@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui.woff);}
@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui_bold.woff); font-weight: bold;}
@font-face {font-family: Segoe UI; src: url(../fonts/segoe_ui_italic.woff); font-style: italic;}
* {margin: 0 auto;  padding: 0 auto;  border: 0 auto; box-sizing: border-box;}
html, body {height: 100%;}
body {background: #FFF; color: #222; font-family: Segoe UI, sans-serif; font-size: 14px; max-width: 100%; min-width: 300px;}
a:link {color: #000; text-decoration: none;}
a:visited {color: #000;	text-decoration: none;}
a:hover {text-decoration: none; color: #0088cc; transition: all 0.3s ease-in-out;}
a:active, a:focus {text-decoration: none; color: #000;}
h1, h2, h3, h4, h5, h6 {font-family: Segoe UI, sans-serif;}
.h24 {font-size: 24px;}
img {width: 100%;}
.whole {width: 90%;}
.whole-2 {width: 70%;}
.whole-3 {width: 50%;}
.wrapper {min-height: 80%;}
.sld-bg {background-color: #FFF; padding-top: 100px; margin-bottom: 10px; color: #444; min-height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sld-bg-2 {margin-bottom: 30px; color: #444;}
.sld-bg h1, .sld-bg-2 h1 {font-size: 55px; font-weight: bold;}
.sld-bg p, .sld-bg-2 p {font-size: 18px; margin-top: 5px;}
header {background: rgb(255, 255, 255); position: fixed; padding: 15px 0; color: #444; width: 100%; min-width: 300px; min-height: 66px; top: 0; box-shadow: 0 2px 4px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.08); z-index: 9999;}
#logo {width: 30%; font-size: 1.1em;}
#logo a {color: #444;}
#logo img {width: 150px;}
nav {width: 70%; text-align: right; padding-top: 5px;}
nav a:link, nav a:visited {color: #444;}
nav ul {list-style: none; padding: 0;}
nav ul li {display: inline-block; font-size: 12px; padding: 0 10px}
nav ul li .fa {font-size: 16px;}
nav ul li:hover {color: #0088cc; transition: all 0.3s ease-in-out;}
.active {color: #0088cc;}
.nav-divide {border-left: 1px solid #d9d9d9; padding-left: 10px; margin-left: 10px;}
#menu-icon {cursor: pointer; display: none; padding: 2px 10px; margin-top: 2px;}
.break-pg {margin-top: 66px;}
.flex-container {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.btn-sld, .btn-sld-2, .btn-bdy {background-color: #0088cc; color: #FFF!important; padding: 10px 35px; margin-bottom: 10px; border-radius: 0; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.btn-sld:hover, .btn-bdy:hover {background-color: #50abfb; transition: all 0.3s ease-in-out;}
.btn-sld-2 {background-color: #FFF; color: #444!important; margin-left: 10px; border: 1px solid #444;}
.btn-sld-2:hover {background-color: #F9F9F9; transition: all 0.3s ease-in-out;}
.btn-min {padding: 10px 25px;}
.platform-preview {margin-top: 30px;}
.platform-preview img {width: 100%;}
.categ {text-align: cente; margin: 70px 0;}
.categ h2 {font-size: 24px;}
.categ-title {color: #444; font-size: 18px; font-weight: bold; display: block;}
.categ .btn {margin-top: 50px;}
.categ-card {background: #FFF; min-height: 80px; margin-top: 20px;}
.categ-card img {width: 100%; height: 180px; object-fit: cover; margin-bottom: 15px;}
.categ-card img:hover {object-position: 0 -5px; transition: all 0.3s ease-in-out;}
.features-div {margin: 100px 0;}
.features-div .caption {font-size: 16px;}
.features-row .col-sm-4 {margin-bottom: 20px;}
.features-icon {display: inline-block; background-color: #555; padding: 20px 21px; margin-top: 5px; border-radius: 50px;}
.features-icon .fa {font-size: 20px; color: #FFF;}
.f-sch {margin: 50px 0;}
.f-sch .caption {font-size: 16px;}
.f-sch-card {background: #FFF; margin: 15px 0;}
.f-sch-card .inner-1 {text-align: center;}
.f-sch-card .inner-1 img {width: 100%; height: 180px; object-fit: cover;}
.f-sch-card .inner-1 img:hover {object-position: 0 -5px; transition: all 0.3s ease-in-out;}
.f-sch-card .inner-2 {padding: 0 12px 20px 12px; text-align: center;}
.f-sch-card .inner-2 .sch-name {font-size: 16px; font-weight: bold; margin-bottom: 7px; margin-top: 15px;}
.f-sch-card .inner-2 .site-address {font-size: 13px; color: #555; margin-bottom: 7px;}
.pricing-div {margin: 50px 0;}
.pricing-div .caption {font-size: 16px;}
.pricing-card {background: #FFF; margin: 15px 0; padding: 25px 20px; box-shadow: 1px 10px 20px #dededd; border-radius: 10px; text-align: left;}
.pricing-title {margin-bottom: 20px;}
.pricing-title h3 {font-size: 20px;}
.clear {clear: both;}
.txt-color, a.txt-color {color: #0088cc!important;}
.txt-color-hover:hover, a:hover.txt-color-hover {color: #000!important;}
.font-100 {font-size: 100px; font-weight: bold;}
.bg-color {color: #FFF!important; background: #0088cc!important;}
.bg-color-none {background-color: transparent!important;}
.bg-grey {color: #222!important; background: #dededd;}
.bg-dark {background-color: #444; color: #FFF;}
.bg-white {background-color: #FFF; color: #555;}
.max-h {max-height: 320px; overflow-y:scroll; overflow-x:hidden; scrollbar-width: thin;}
.collapse {display: block;}
.form-login {background: rgba(255,255,255,0.65); padding:30px 50px;}
.form-login .select, .form-login .input {width:100%; padding:10px 20px; background:transparent; border:1px solid #CCC; margin: 10px 0;}
.form-login .input {margin-bottom: 20px;}
.form-login .select:hover, .form-login .input:hover, .form-login .select:focus, .form-login .input:focus {border-color: #555; transition: all 0.3s ease-in-out;}
.form-login .heading {border-bottom: 1px solid #CCC; padding-bottom: 20px}
.fa-pad {margin-right: 5px; width: 15px; height: 15px;}
input[type="text"],input[type="password"], textarea, select {width:100%; padding:12px 10px; margin-bottom: 20px; background:transparent; border:1px solid #888;}
input[type="text"]:hover,input[type="password"]:hover, input[type="text"]:focus, textarea:hover, textarea:focus, select:hover, select:focus {border:1px solid #000; transition: all 0.3s ease-in-out;}
input, select, textarea, button {font-size: 14px;outline: none!important;}
textarea {resize: vertical;}
.input-min {padding:5px 10px!important;font-size:14px}
.h100{height: 100%;}
#notify {width: 50%;}
#notify.notify-25 {width: 25%;}
.notify-fixed {position: fixed; width: 50%; top: 67px; left: 25%; right: 25%; z-index: 10;}
.cursor {cursor: pointer;}
.badge {padding: 2px 6px 4px 6px;}
.ul {padding-left:10px;}
.dropdown-menu {padding: 5px 10px;}
.dropdown-menu a:link, .dropdown-menu a:visited, .dropdown-menu a:hover, .dropdown-menu a:active, .dropdown-menu a:focus {color: #0088cc!important;}
.title-modal {width: 80%;}
.close-btn {width: 20%; text-align: right;}
.close-btn span {color: #222; text-align: center; cursor: pointer; background: #FFF; font-size: 16px; font-weight: bold; padding: 0px 4px 3px 4px; border-radius: 2px;}
.slide-anim-div {visibility:hidden;}
.slide-anim {animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible}
@-webkit-keyframes slide {0% {opacity: 0; -webkit-transform: translateY(70%);} 100% {opacity: 1; -webkit-transform: translateY(0%);}}
@keyframes slide {0% {opacity: 0; transform: translateY(70%);} 100% {opacity: 1; transform: translateY(0%);}}
.close-btn span:hover {background: #CCC;}
footer {background-color: #F1F1F1; color: #444; font-size: 14px; padding-top: 20px; margin-top: 50px; background-position: center; background-repeat: no-repeat; background-size: cover;}
footer ul {list-style: none; padding: 0;}
footer ul li {margin: 10px 0;}
footer a:link, footer a:active, footer a:visited {color: #444;}
footer a:hover {color: #0088cc; text-decoration: none; transition: all 0.3s ease-in-out;}
footer .copy-1 {padding: 5px 0;}
footer .copy-2 {color: #8c8c8c; padding: 15px 0 20px 0;}

@media screen and (max-width: 1200px) {
  .whole {width: 90%;}
  .whole-2 {width: 90%;}
  .whole-3 {width: 90%;}
  .sld-bg h1, .sld-bg-2 h1 {font-size: 45px;}
  #notify {width: 90%;}
  #notify.notify-25 {width: 81%;}
  .notify-fixed {width: 90%; left: 0; right: 0;}
}

@media screen and (max-width: 992px) {
  .sld-bg h1, .sld-bg-2 h1 {font-size: 37px;}
  .btn-sld {padding: 10px 30px;}
  .btn-bdy {padding: 10px 30px;}
  .form-login {padding:30px 25px;}
}

@media screen and (max-width: 768px) {
  #menu-icon {display: inline; margin-top: 7px; font-size: 16px;}
  #menu-icon {padding-left: 15px;}
  #logo {width: 50%;}
  .nav-icons {width: 50%; text-align: right; padding-top: 5px;}
  nav {width: 100%; position: absolute; top: 59px; left: 0; text-align: left; padding-top: 0;}
  nav ul {background: rgb(255, 255, 255, 0.96);}
  nav ul li {width: 100%; padding: 10px 7%; margin-top: 0;}
  nav ul li:hover {background: rgba(230, 230, 230, 0.4);}
  nav ul:first-child {padding-top: 10px}
  nav ul:last-child {padding-bottom: 10px}
  .collapse {display: none;}
  .nav-divide {border: none; padding-left: 0; margin-left: 0;}
  .sld-bg h1, .sld-bg-2 h1 {font-size: 35px;}
  .form-login {margin-top:50px;}
  .h100{min-height: 700px}
}

@media screen and (max-width: 650px) {
}