@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
    body {
        font-family: 'Poppins', sans-serif;
        font-weight: normal;
        font-size: 14px;
        color: #687377;
        line-height: 26px;
    }
    /*---Typography---*/
    
    ol,
    ul,
    li {
        padding: 0px;
        margin: 0px;
    }
    
    ol {
        display: block;
        list-style-type: decimal !important;
        margin: 0;
        padding: 0 0 0 15px;
    }
    
    ol li {
        color: #687377;
        font-size: 14px;
    }
    
    ul {
        list-style: inside;
    }
    
    ul.list-unstyled {
        list-style: none;
    }
    
    a {
        text-decoration: none !important;
        outline: none;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        -webkit-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    
    button {
        outline: none !important;
    }
    
    .btn.focus,
    .btn:focus {
        box-shadow: none;
    }
    
    label {
        font-weight: normal;
    }
    
     ::-webkit-input-placeholder {
        opacity: 1;
    }
    
     :-moz-placeholder {
        /* Firefox 18- */
        opacity: 1;
    }
    
     ::-moz-placeholder {
        /* Firefox 19+ */
        opacity: 1;
    }
    
     :-ms-input-placeholder {
        opacity: 1;
    }
    
    input,
    textarea {
        transition: all 0.3s ease 0s;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
    }
    
    .btn-bluesky {
        background-color: #01ddd2;
        padding: 8px 30px;
    }
    
    .btn-bluesky a {
        color: #171d70;
    }
    
    .btn-bluesky:hover {
        background-color: #171d70;
    }
    
    .btn-bluesky:hover a {
        color: #01ddd2;
    }
    /* ================================================== */
    /* 02. Preloader */
    /* ================================================== */
    
    #loader {
        width: 100%;
        height: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    
    #element {
        width: 70px;
        height: 24px;
        position: relative;
        left: 0px;
        right: 0px;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        z-index: 1001;
        animation: spin 2s linear infinite;
    }
    
    .circ-one,
    .circ-two {
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 100%;
    }
    
    .circ-one {
        background: #42d79e;
        float: left;
        animation: load-x 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;
    }
    
    .circ-two {
        background: #57bce2;
        float: right;
        animation: load-y 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;
    }
    
    @keyframes load-x {
        0% {
            left: -5px;
        }
        25% {
            z-index: 2;
        }
        50% {
            left: 50px;
        }
        75% {
            z-index: 1;
        }
        100% {
            left: -5px;
        }
    }
    
    @keyframes load-y {
        0% {
            right: -5px;
        }
        25% {}
        50% {
            right: 50px;
            z-index: 1;
        }
        75% {
            z-index: 2;
        }
        100% {
            right: -5px;
        }
    }
    
    @keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }
    
    .navbar-brand {
        max-width: 192px;
    }
    
    .header-wrapper .opt5 {
        position: relative;
        background: url(../images/header-bg.jpg) no-repeat center top;
    }
    
    .opt5 {
        width: 100%;
        position: absolute;
        z-index: 3;
    }
    
    .opt5.fixed {
        position: fixed;
        top: 0px;
        background: #fff;
        border-bottom: 1px #e0e5e9 solid;
        box-shadow: 0 3px 2px rgba(0, 0, 0, 0.04);
    }
    
    .opt5.fixed .navbar-expand-lg .navbar-nav .nav-link {
        color: #556665;
    }
    
    .logo1,
    .opt5.fixed .logo2 {
        display: none;
    }
    
    .opt5.fixed .logo1 {
        display: block;
    }
    
    .opt5 .navbar-expand-lg .navbar-nav .nav-link {
        color: #171d70;
    }
    
    .opt5.fixed {
        animation: 0.7s ease-in-out 0.1s normal both 1 running stickyhead;
    }
    /*-----------------------
	Navigation
-----------------------*/
    
    .navbar {
        padding: 0px;
    }
    
    .navbar-light {
        background: none;
        border: none;
        margin-bottom: 0px;
    }
    
    .navbar-light .navbar-nav {
        padding-left: 5%;
    }
    
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 30px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #556665;
        cursor: pointer;
    }
    
    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover {
        color: #57bce2;
    }
    
    .footer {
        display: block;
        background: #ccfcf9;
    }
    /* ================================================== */
    /* 29. Responsive */
    /* ================================================== */
    
    @media (max-width: 991px) {
        .landing {
            background-color: #fff;
            padding-bottom: 20px;
        }
        .logo1 {
            display: block;
        }
        .navbar-brand {
            height: 70px;
            padding: 10px 15px;
        }
        .navbar-light .navbar-nav {
            padding: 0px;
        }
        .navbar-expand-lg .navbar-nav .nav-link {
            padding: 6px 15px;
        }
        .navbar-light .navbar-toggler {
            border: none;
            cursor: pointer;
            outline: none;
        }
        .opt5 .logo2,
        .opt5.fixed.logo2 {
            display: none;
        }
    }
    
    .demo-wrapper-2 {
        background-color: #180d5b;
    }
    
    .demo-wrapper-3 .container {
        padding-bottom: 1.5rem;
        padding-top: 6rem;
    }
    
    .demo-wrapper-4 .container {
        padding-bottom: 5rem;
        padding-top: 5rem;
    }
    
    .btn-grey {
        background-color: #c4c3f7;
        padding: 8px 30px;
    }
    
    .btn-grey a {
        color: #180d5b;
    }
    
    .btn-grey:hover {
        background-color: #bab9ea;
    }
    
    .btn-grey:hover a {
        color: #180d5b;
    }
    
    .btn-darkblue {
        background-color: #180d5b;
        padding: 8px 30px;
    }
    
    .btn-darkblue a {
        color: #bab9ea;
    }
    
    .btn-darkblue:hover {
        background-color: #bab9ea;
    }
    
    .btn-darkblue:hover a {
        color: #180d5b;
    }
    
    .wave-top {
        margin-bottom: -5px;
    }
    
    .wave-bottom {
        margin-top: -5px;
    }
    
    .service-middle {
        background-color: #01ddd2;
    }
    
    .service-left,
    .service-right {
        background-color: #fff;
    }
    
    .service-middle>h3 {
        color: #fff;
    }
    
    .service-middle>h2 {
        color: #fff;
    }
    
    .service-middle>p {
        color: #fff;
    }
    
    .btn-custom-1 {
        background-color: #01ddd2;
        padding: 8px 30px;
    }
    
    .btn-custom-1:hover {
        background-color: #01d2c7;
    }
    
    .btn-custom-1 a {
        color: #fff;
    }
    
    .btn-custom-2 {
        background-color: #fff;
        padding: 8px 30px;
    }
    
    .btn-custom-2:hover {
        background-color: #f2f2f2;
    }
    
    .btn-custom-2 a {
        color: #171d70;
    }
    
    @media (min-width: 768px) {
        .demo-wrapper-3 .container {
            padding-bottom: 4rem;
        }
    }
    /* ================================================== */
    /* 20. Login & Register */
    /* ================================================== */
    
    .login-outer {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        display: table;
        position: absolute;
        background: url(../images/spa-relax-bg.jpg) no-repeat fixed;
        background-size: cover;
        background-position: center;
        box-shadow: 0 0 30px rgb(0 0 0 / 20%);
    }
    
    .login-outer:after {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        /*background: rgba(255, 255, 255, 0.8);*/
        content: "";
    }
    
    .login-outer .content-area {
        display: table-cell;
        vertical-align: middle;
        position: relative;
        z-index: 1;
    }
    
    .login-form-holder {
        max-width: 400px;
        margin: 0 auto;
        text-align: center;
    }
    
    .login-form-holder .login-form {
        padding: 50px 35px 48px;
        text-align: left;
    }
    
    .login-form-holder h3 {
        padding: 0 0 25px;
        text-align: center;
        font-size: 30px;
        font-weight: 400;
        color: #3a4951;
    }
    
    .login-form-holder label {
        display: block;
        position: relative;
        padding-bottom: 2px;
        font-size: 14px;
        color: #697980;
        margin: 0px;
    }
    
    .login-form-holder input {
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #697980;
        padding: 0 20px;
        margin: 0 0 14px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid #d8dfe3;
        border-radius: 3px;
    }
    
    .login-form-holder input:focus {
        border-color: #69c2e4;
    }
    
    .login-form .forgot label {
        display: inline-block;
        position: relative;
        cursor: pointer;
        vertical-align: top;
    }
    
    .login-form .forgot a {
        display: inline-block;
        font-size: 12px;
        color: #697980;
        text-transform: uppercase;
    }
    
    .login-form .forgot a:hover {
        color: #57bce2;
    }
    
    .login-form .forgot a .q-mark {
        width: 21px;
        height: 21px;
        font-size: 12px;
        line-height: 21px;
        margin-right: 8px;
        border: 1px #dbe1e5 solid;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        font-weight: normal;
        text-align: center;
        padding: 0px;
    }
    
    .login-form label img {
        max-width: 100%;
        vertical-align: top;
        display: inline-block;
    }
    
    .login-form label span {
        display: inline-block;
        vertical-align: top;
        padding: 0 12px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
    }
    
    .login-form label span a {
        color: #5db5d6;
    }
    
    .login-form label span a:hover {
        color: #f29a32;
    }
    
    .login-form input[type="checkbox"] {
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        padding: 0;
        margin: 2px 0 0;
        cursor: pointer;
        vertical-align: top;
    }
    
    .login-form input[type="checkbox"]:checked+span:before {
        position: absolute;
        top: -1px;
        left: 4px;
        display: block;
        content: "";
        content: "\f00c";
        font-family: 'FontAwesome';
        font-size: 12px;
        color: #69c2e4;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .login-form .forgot {
        padding: 16px 0 0;
    }
    
    .login-btn {
        font-size: 1.5em;
        font-weight: 600;
        text-transform: uppercase;
        background: #f29a32;
        box-shadow: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
        width: 100%;
    }
    
    .login-btn:hover {
        background: #57bce2;
    }
    
    .social-media-box {
        background: rgba(255, 255, 255, 0.8);
        padding: 20px 35px;
        box-shadow: inset 0 15px 20px -20px rgba(0, 0, 0, 0.2);
    }
    
    .social-media-box p {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
    }
    
    .social-media-box ul {
        display: block;
        padding: 15px 0 10px;
    }
    
    .social-media-box ul li {
        display: inline-block;
        padding: 0 2px;
    }
    
    .social-media-box ul li a i {
        width: 38px;
        height: 38px;
        line-height: 38px;
        background: #f29a32;
        color: #fff;
        border-radius: 100%;
        text-align: center;
        font-size: 18px;
        display: block;
        transition: all 0.3s ease 0s;
    }
    
    .social-media-box ul li a i.fa-facebook {
        background: #4460a1;
    }
    
    .social-media-box ul li a i.fa-twitter {
        background: #57bce2;
    }
    
    .social-media-box ul li a i.fa-google-plus {
        background: #d56644;
    }
    
    .social-media-box ul li a i.fa-linkedin {
        background: #007ebb;
    }
    
    .social-media-box ul li a:hover i {
        background: #2c5260;
    }
    
    .box-hav-accnt {
        max-width: 420px;
        margin: 0 auto;
        background: #57bce2;
        padding: 10px 30px 10px;
        box-shadow: 0px 2px 10px -3px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 1px 1px;
    }
    
    .box-hav-accnt p {
        font-size: 14px;
        color: #c9e9f6;
    }
    
    .box-hav-accnt a {
        border-bottom: 1px solid #c9e9f6;
        color: #fff;
    }
    
    .div-bg-pos {
        position: relative;
        background-repeat: no-repeat;
        background: white;
        border-radius: 20px;
    }
    
    .div-bg-pos .img-responsive {
        width: 100%;
        max-width: 200px;
    }
    
    .div-bg-pos .form-login-pos {
        width: 100%;
    }
    
    .form-login-pos h3 {
        font-family: 'Concert One', cursive;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 3rem;
    }
    
    @media (max-width: 480px) {
        .login-form-holder .login-form {
            padding: 5px 35px 48px;
        }
    }
    
    @media (max-width: 350px) {
        .form-login-pos .my-5 {
            margin-bottom: 0 !important;
        }
        .form-login-pos h3 {
            font-size: 2.5rem;
        }
        .div-bg-pos .img-responsive {
            max-width: 180px;
        }
    }
    
    .btn-s1,
    .btn-s2,
    .btn-s3,
    .btn-s4,
    .btn-s5,
    .btn-s6,
    .btn-s7,
    .btn-s8,
    .btn-s9,
    .btn-s10 {
        transition: .5s all;
        border-radius: 20px !important;
        display: inline-block;
        border: 1px solid #fff;
        padding: 3px 25px 5px;
        background: #fff;
        font-size: 16px;
    }
    
    .btn-s1 span,
    .btn-s2 span,
    .btn-s3 span,
    .btn-s4 span,
    .btn-s5 span,
    .btn-s6 span,
    .btn-s7 span,
    .btn-s8 span,
    .btn-s9 span,
    .btn-s10 span {
        margin-left: 7px;
    }
    
    .btn-s1 {
        background: #46a040;
        color: #fff;
    }
    
    .btn-s2 {
        background: #005496;
        color: #fff;
    }
    
    .btn-s3 {
        background: #e49725;
        color: #fff;
    }
    
    .btn-s4 {
        background: #9f018c;
        color: #fff;
    }
    
    .btn-s5 {
        background: #E91E63;
        color: #fff;
    }
    
    .btn-s6 {
        background: #b1b1b1;
        color: #fff;
    }
    
    .btn-s7 {
        background: #2196f3;
        color: #fff;
    }
    
    .btn-s8 {
        background: #000;
        color: #fff;
    }
    
    .btn-s9 {
        background: #ff0000;
        color: #fff;
    }
    
    .btn-s10 {
        background: transparent;
        color: #7e7575;
        border-color: #7e7575;
    }
    
    .btn-s1:hover,
    .btn-s1:focus {
        border-color: #46a040;
        color: #46a040;
        background: #fff;
    }
    
    .btn-s2:hover,
    .btn-s2:focus {
        border-color: #005496;
        color: #005496;
        background: #fff;
    }
    
    .btn-s3:hover,
    .btn-s3:focus {
        border-color: #e49725;
        color: #e49725;
        background: #fff;
    }
    
    .btn-s4:hover,
    .btn-s4:focus {
        border-color: #9f018c;
        color: #9f018c;
        background: #fff;
    }
    
    .btn-s5:hover,
    .btn-s5:focus {
        border-color: #E91E63;
        color: #E91E63;
        background: #fff;
    }
    
    .btn-s6:hover,
    .btn-s6:focus {
        border-color: #b1b1b1;
        color: #b1b1b1;
        background: #fff;
    }
    
    .btn-s7:hover,
    .btn-s7:focus {
        border-color: #2196f3;
        color: #2196f3;
        background: #fff;
    }
    
    .btn-s8:hover,
    .btn-s8:focus {
        border-color: #000;
        color: #000;
        background: #fff;
    }
    
    .btn-s9:hover,
    .btn-s9:focus {
        border-color: #ff0000;
        color: #ff0000;
        background: #fff;
    }
    
    .btn-s10:hover,
    .btn-s10:focus {
        color: #7e7575;
        background: #fff;
    }
    
    [class*=btn-s][disabled] {
        background: #ccc !important;
        color: #fff !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }
    
    .pt-15 {
        padding-top: 15px !important;
    }
    
    .mt-15 {
        margin-top: 15px !important;
    }
    
    .mt-5p {
        margin-top: 5px !important;
    }
    
    .fs-17 {
        font-size: 17px !important;
    }
    
    .bold {
        font-weight: bold;
    }
    
    #modal-goto .btn-s2:hover {
        background: #1478a5;
        color: #fff;
    }
    
    #modal-goto .btn-s1:hover {
        background: #2c8026;
        color: #fff;
    }
    
    .modal-backdrop {
        background: transparent !important;
    }
    
    .modal-backdrop.fade {
        opacity: 1;
    }
    
    .close-recovery-pw{
        position: absolute;
        right: 15px;
        top: 10px;
    }
    
    .close-recovery-pw button{
        font-size: 30px;
    }
    
    .btn-forget-pw{
        
    }
    
    .input-err{
        color: #dc3545!important;
    }