/*=======================================================================

1. Typography

=========================================================================*/

html {

    height: 100%;

}



body {

    font-size: 16px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

    height: 100%;

    line-height: 1.7;

    vertical-align: baseline;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    color: #646464;

    background-color: #fff;

}



p {

    margin: 0 0 20px 0;

    color: #646464;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 400;

    font-family: 'Roboto', sans-serif;

    margin: 0 0 20px 0;

    color: #111;

}



h1,

h2 {

    line-height: 1.2;

}



h3,

h4,

h5,

h6 {

    line-height: 1.4;

}



h1 {

    font-size: 36px;

}



@media only screen and (max-width: 1199px) {

    h1 {

        font-size: 34px;

    }

}



@media only screen and (max-width: 991px) {

    h1 {

        font-size: 32px;

    }

}



@media only screen and (max-width: 767px) {

    h1 {

        font-size: 30px;

    }

}



h2 {

    font-size: 28px;

}



@media only screen and (max-width: 1199px) {

    h2 {

        font-size: 26px;

    }

}



@media only screen and (max-width: 991px) {

    h2 {

        font-size: 24px;

    }

}



@media only screen and (max-width: 767px) {

    h2 {

        font-size: 22px;

    }

}



h3 {

    font-size: 22px;

}



@media only screen and (max-width: 991px) {

    h3 {

        font-size: 20px;

    }

}



@media only screen and (max-width: 767px) {

    h3 {

        font-size: 18px;

    }

}



h4 {

    font-size: 20px;

}



@media only screen and (max-width: 991px) {

    h4 {

        font-size: 18px;

    }

}



@media only screen and (max-width: 767px) {

    h4 {

        font-size: 16px;

    }

}



h5 {

    font-size: 18px;

}



@media only screen and (max-width: 991px) {

    h5 {

        font-size: 16px;

    }

}



/*=======================================================================

2. Template Default Style

=========================================================================*/

a {

    text-decoration: none;

}



a:active,

a:hover,

a:focus {

    text-decoration: none;

}



a:active,

a:hover,

a:focus {

    outline: 0 none;

}



img {

    max-width: 100%;

    height: auto;

}



ul {

    list-style: outside none none;

    margin: 0;

    padding: 0;

}



.fxt-content-between {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



@media only screen and (max-width: 767px) {

    .fxt-none-767 {

        display: none !important;

    }

}



@media only screen and (max-width: 991px) {

    .fxt-none-991 {

        display: none !important;

    }

}



/*========================================================================

3. Template Animation

=========================================================================*/

.fxt-template-animation {

    position: relative;

    z-index: 1;

    width: 100%;

    opacity: 0;

    overflow: hidden;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}



.fxt-template-animation .fxt-transformY-50 {

    opacity: 0;

    -webkit-transform: translateY(50px);

    -ms-transform: translateY(50px);

    transform: translateY(50px);

}



.loaded.fxt-template-animation {

    opacity: 1;

    overflow: visible;

}



.loaded.fxt-template-animation .fxt-transformY-50 {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

    -webkit-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out;

}



.loaded.fxt-template-animation .fxt-transition-delay-1 {

    -webkit-transition-delay: 0.1s;

    -o-transition-delay: 0.1s;

    transition-delay: 0.1s;

}



.loaded.fxt-template-animation .fxt-transition-delay-2 {

    -webkit-transition-delay: 0.2s;

    -o-transition-delay: 0.2s;

    transition-delay: 0.2s;

}



.loaded.fxt-template-animation .fxt-transition-delay-3 {

    -webkit-transition-delay: 0.3s;

    -o-transition-delay: 0.3s;

    transition-delay: 0.3s;

}



.loaded.fxt-template-animation .fxt-transition-delay-4 {

    -webkit-transition-delay: 0.4s;

    -o-transition-delay: 0.4s;

    transition-delay: 0.4s;

}



.loaded.fxt-template-animation .fxt-transition-delay-5 {

    -webkit-transition-delay: 0.5s;

    -o-transition-delay: 0.5s;

    transition-delay: 0.5s;

}



.loaded.fxt-template-animation .fxt-transition-delay-6 {

    -webkit-transition-delay: 0.6s;

    -o-transition-delay: 0.6s;

    transition-delay: 0.6s;

}



.loaded.fxt-template-animation .fxt-transition-delay-7 {

    -webkit-transition-delay: 0.7s;

    -o-transition-delay: 0.7s;

    transition-delay: 0.7s;

}



.loaded.fxt-template-animation .fxt-transition-delay-8 {

    -webkit-transition-delay: 0.8s;

    -o-transition-delay: 0.8s;

    transition-delay: 0.8s;

}



.loaded.fxt-template-animation .fxt-transition-delay-9 {

    -webkit-transition-delay: 0.9s;

    -o-transition-delay: 0.9s;

    transition-delay: 0.9s;

}



.loaded.fxt-template-animation .fxt-transition-delay-10 {

    -webkit-transition-delay: 1s;

    -o-transition-delay: 1s;

    transition-delay: 1s;

}



.loaded.fxt-template-animation .fxt-transition-delay-11 {

    -webkit-transition-delay: 1.1s;

    -o-transition-delay: 1.1s;

    transition-delay: 1.1s;

}



.loaded.fxt-template-animation .fxt-transition-delay-12 {

    -webkit-transition-delay: 1.2s;

    -o-transition-delay: 1.2s;

    transition-delay: 1.2s;

}



.loaded.fxt-template-animation .fxt-transition-delay-13 {

    -webkit-transition-delay: 1.3s;

    -o-transition-delay: 1.3s;

    transition-delay: 1.3s;

}



.loaded.fxt-template-animation .fxt-transition-delay-14 {

    -webkit-transition-delay: 1.4s;

    -o-transition-delay: 1.4s;

    transition-delay: 1.4s;

}



.loaded.fxt-template-animation .fxt-transition-delay-15 {

    -webkit-transition-delay: 1.5s;

    -o-transition-delay: 1.5s;

    transition-delay: 1.5s;

}



.loaded.fxt-template-animation .fxt-transition-delay-16 {

    -webkit-transition-delay: 1.6s;

    -o-transition-delay: 1.6s;

    transition-delay: 1.6s;

}



.loaded.fxt-template-animation .fxt-transition-delay-17 {

    -webkit-transition-delay: 1.7s;

    -o-transition-delay: 1.7s;

    transition-delay: 1.7s;

}



.loaded.fxt-template-animation .fxt-transition-delay-18 {

    -webkit-transition-delay: 1.8s;

    -o-transition-delay: 1.8s;

    transition-delay: 1.8s;

}



.loaded.fxt-template-animation .fxt-transition-delay-19 {

    -webkit-transition-delay: 1.9s;

    -o-transition-delay: 1.9s;

    transition-delay: 1.9s;

}



.loaded.fxt-template-animation .fxt-transition-delay-20 {

    -webkit-transition-delay: 2s;

    -o-transition-delay: 2s;

    transition-delay: 2s;

}



/*========================================================================

23. Demo Layout Twenty

=========================================================================*/

.fxt-template-layout20 {

    min-height: 100vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



@media only screen and (max-width: 991px) {

    .fxt-template-layout20 {

        padding: 15px;

    }

}



@media only screen and (min-width: 1380px) {

    .fxt-template-layout20 .container {

        max-width: 1350px;

    }

}



.fxt-template-layout20 .fxt-checkbox-area {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    margin-bottom: 0px;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.fxt-template-layout20 .fxt-bg-color {

    background-color: #ffffff;

    width: 100%;

    padding: 0;

}



.fxt-template-layout20 .fxt-bg-img {

    width: 100%;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    margin: 0;

    padding: 0;

    border-radius: 15px 0 0 15px;

    box-shadow: 3px 0 79px 0 rgba(0, 0, 0, 0.08);

}



.fxt-template-layout20 .fxt-content {

    border-radius: 0 15px 15px 0;

    padding: 25px 50px;

    width: 100%;

    -webkit-box-shadow: 3px 0 79px 0 rgba(0, 0, 0, 0.08);

    box-shadow: 3px 0 79px 0 rgba(0, 0, 0, 0.08);

    min-height: 525px;

}



.fxt-template-layout20 .fxt-content {

    color: #272323;

    text-align: center;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



@media only screen and (max-width: 1199px) {

    .fxt-template-layout20 .fxt-content {

        padding: 100px 35px 70px 50px;

    }

}



@media only screen and (max-width: 991px) {

    .fxt-template-layout20 .fxt-content {

        padding: 100px 70px 70px 70px;

        border-radius: 15px;

    }



    .fxt-template-layout20 .fxt-bg-img {

        border-radius: 15px;

        margin-bottom: 20px;

    }




}



@media only screen and (max-width: 767px) {

    .fxt-template-layout20 .fxt-content {

        padding: 80px 50px 50px 50px;

    }

}



@media only screen and (max-width: 575px) {

    .fxt-template-layout20 .fxt-content {

        padding: 60px 30px 30px 30px;

    }

}



@media only screen and (max-width: 479px) {

    .fxt-template-layout20 .fxt-content {

        padding: 50px 20px 20px 20px;

    }
.mobile_display{ display:block;}
.mobile_none{ display:none;}


}

.mobile_display{ display:none;}

.fxt-template-layout20 .fxt-header {

    text-align: center;

}



.fxt-template-layout20 .fxt-logo {

    display: block;

    margin-bottom: 50px;

    margin-left: auto;

    margin-right: auto;

    max-width: 40vw;

}



.fxt-template-layout20 .fxt-form .form-group {

    position: relative;

    z-index: 1;

}



.fxt-template-layout20 .fxt-form .form-control {

    min-height: 50px;

    -webkit-box-shadow: none;

    box-shadow: none;

    border: 1px solid #a8a8a8;

    padding: 10px 15px;

    color: #111111;

}



.fxt-template-layout20 .fxt-form input::-webkit-input-placeholder {

    color: #a1a1a1;

    font-size: 15px;

    font-weight: 300;

}



.fxt-template-layout20 .fxt-form input::-moz-placeholder {

    color: #a1a1a1;

    font-size: 15px;

    font-weight: 300;

}



.fxt-template-layout20 .fxt-form input:-moz-placeholder {

    color: #a1a1a1;

    font-size: 15px;

    font-weight: 300;

}



.fxt-template-layout20 .fxt-form input:-ms-input-placeholder {

    color: #a1a1a1;

    font-size: 15px;

    font-weight: 300;

}



.fxt-template-layout20 .fxt-btn-fill {

    font-family: 'Roboto', sans-serif;

    cursor: pointer;

    display: inline-block;

    font-size: 17px;

    font-weight: 500;

    -webkit-box-shadow: none;

    box-shadow: none;

    outline: none;

    border: 0;

    color: #fff;

    border-radius: 3px;

    background-color: #0d8ac2;

    padding: 10px 36px;

    margin-bottom: 18px;

    width: 100%;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}



.fxt-template-layout20 .fxt-btn-fill:hover {

    background-color: #0d8ac2;

    border-color: #0d8ac2;

}



.fxt-template-layout20 .fxt-btn-fill:focus {

    outline: none;

}



.fxt-template-layout20 .switcher-text {

    color: #0d8ac2;

    font-size: 15px;

    margin-left: 3px;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}



.fxt-template-layout20 .switcher-text:last-child {

    margin-right: 0;

}



.fxt-template-layout20 .switcher-text:hover {

    color: #666;

}



.fxt-template-layout20 .switcher-text.active {

    color: #666;

}



.fxt-template-layout20 .fxt-style-line {

    overflow: hidden;

    text-align: center;

}



.fxt-template-layout20 .fxt-style-line h2 {

    text-align: center;

    font-weight: 300;

    margin-bottom: 30px;

    font-size: 20px;

    color: #333;

    display: inline-block;

    position: relative;

    padding: 0 25px;

    z-index: 1;

}



.fxt-template-layout20 .fxt-style-line h2:before {

    display: inline-block;

    content: "";

    height: 1px;

    width: 100%;

    background-color: #a8a8a8;

    left: 100%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;

    z-index: 1;

}



.fxt-template-layout20 .fxt-style-line h2:after {

    display: inline-block;

    content: "";

    height: 1px;

    width: 100%;

    background-color: #a8a8a8;

    right: 100%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;

    z-index: 1;

}



.fxt-template-layout20 ul.fxt-socials {

    display: -ms-flexbox;

    display: -webkit-box;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-right: -5px;

    margin-left: -5px;

    margin-bottom: 20px;

}



.fxt-template-layout20 ul.fxt-socials li {

    max-width: 100%;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    padding-left: 5px;

    padding-right: 5px;

    margin-bottom: 10px;

}



@media only screen and (max-width: 575px) {

    .fxt-template-layout20 ul.fxt-socials li {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

    }

}



@media only screen and (max-width: 350px) {

    .fxt-template-layout20 ul.fxt-socials li {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

    }

}



.fxt-template-layout20 ul.fxt-socials li a {

    border-radius: 2px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: flex-start;

    -ms-flex-pack: flex-start;

    justify-content: flex-start;

    font-size: 15px;

    height: 45px;

    color: #ffffff;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}



.fxt-template-layout20 ul.fxt-socials li a i {

    border-radius: 2px 0 0 2px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 45px;

    height: 45px;

}



.fxt-template-layout20 ul.fxt-socials li a span {

    height: 100%;

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-facebook a {

    background-color: #3b5998;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-facebook a i {

    background-color: #4867aa;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-facebook a:hover {

    background-color: #5676bb;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-twitter a {

    background-color: #00acee;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-twitter a i {

    background-color: #33ccff;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-twitter a:hover {

    background-color: #3dc5f3;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-google a {

    background-color: #CC3333;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-google a i {

    background-color: #db4437;

}



.fxt-template-layout20 ul.fxt-socials li.fxt-google a:hover {

    background-color: #e75042;

}



.fxt-template-layout20 .checkbox {

    padding-left: 5px;

}



.fxt-template-layout20 .checkbox label {

    padding-left: 20px;

    color: #a4a4a4;

    margin-bottom: 0;

    font-size: 15px;

    position: relative;

}



.fxt-template-layout20 .checkbox label:before {

    content: "";

    position: absolute;

    width: 15px;

    height: 15px;

    top: 4px;

    left: 0;

    margin-left: -5px;

    border: 1px solid;

    border-color: #dcdcdc;

    border-radius: 3px;

    background-color: #fff;

    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

}



.fxt-template-layout20 .checkbox label:after {

    position: absolute;

    margin-left: -20px;

    padding-left: 3px;

    font-size: 10px;

    color: #555555;

}



.fxt-template-layout20 .checkbox input[type="checkbox"] {

    display: none;

}



.fxt-template-layout20 .checkbox input[type="checkbox"]:checked + label::after {

    font-family: 'Font Awesome 5 Free';

    content: "\f00c";

    font-weight: 900;

    color: #ffffff;

    left: 15px;

    top: 2px;

}



.fxt-template-layout20 .checkbox input[type="checkbox"]:checked + label::before {

    background-color: #0d8ac2;

    border-color: #0d8ac2;

}



.fxt-template-layout20 .fxt-footer {

    text-align: center;

}



.disc p span {

    font-weight: 500;

}



.disc_logo {

    margin-bottom: 5px;

    text-align: center;

    margin-top: 30px;

}



.main-gallery {

}



.fxt-template-layout20 .fxt-bg-img {
    overflow: visible;
}

.fxt-bg-img .senja-embed {
    display: block;
    width: 90%;
    max-width: 570px;
    margin: 20px auto 32px auto;
    padding: 0 4px;
    min-height: 240px;
    height: auto;
    overflow: hidden;
}

.fxt-bg-img .main-footer {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 8px;
}



.gallery-cell {

    width: 100%;

}



.testimonial h3 {

    margin-bottom: 0;

}



.testimonial {

    text-align: center;

    max-width: 100%;

    margin: 20px auto 100px auto;

    padding: 0 20px;

}



.testimonial-avatar {

    margin-bottom: 20px;

}



.testimonial-quote {

    display: block;

    font-size: 15px;

    font-weight: 300;

    padding: 10px 0;

    color: #333;

    line-height: 23px;

}



.testimonial-author {

    display: block;

    font-weight: 800;

    color: #333;

}



.flickity-page-dots {

    bottom: 20px;

}



.flickity-page-dots .dot.is-selected {

    background: #13b3ea;

}



.testi_box {

    background: #fff;

    width: 150px;

    height: 2px;

    margin: 0 auto;

}


.fxt-template-layout20 .fxt-style-line h3::after {
    display: inline-block;
    content: "";
    height: 1px;
    width: 100%;
    background-color: #ebebeb;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    z-index: 1;
}
.fxt-template-layout20 .fxt-style-line h3::before {
    display: inline-block;
    content: "";
    height: 1px;
    width: 100%;
    background-color: #ebebeb;
    left: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    z-index: 1;
}

.fxt-template-layout20 .fxt-style-line h3 {
    text-align: center;
    font-weight: 300;
    margin-bottom: 20px;
    font-size: 20px;
    color: #a4a4a4;
    display: inline-block;
    position: relative;
    padding: 0 25px;
    z-index: 1;
}
.mob_login .disc_logo{ display:none;}

@media only screen and (max-width:1024px) and (min-width:1013px){ } 
@media only screen and (max-width:1014px) and (min-width:768px){ } 
@media only screen and (max-width:767px) and (min-width:480px){ } 
@media only screen and (max-width:479px) and (min-width:320px){
.mobile_display{ display:block;margin-top: 20px !important;}
.mobile_none{ display:none;}
.mob_login .disc_logo{ display: block;margin-top: 0;margin-bottom: 30px;}
.mobile_display .disc_logo{ display: none;}
}