/*------------------------------------------------------------------
[Master Stylesheet]
Project:	Edutech
Version:	1.1
Author:	Design Gurus (https://themeforest.net/user/design_gurus )
Primary use: Corporate, Education and Institution


For Gradient page this css file is common in all

-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
[Table of Content]

1.Fonts
2.Header Styles
3.Banner Section Styles
4. Popluar Courses Section Styles
5. How it Works Section Styles
6. Counter Section Styles
7. Services Section Styles
8. FAQ Section Styles
9. Video Section Styles
10. Blog Section Styles
11. Testimonials Section Styles
12. Subscribe Section Styles
13. Contact Us Section Styles
14. Footer Styles
15. Go to Top Button Styles
16. Popup Model Styles
17. Video Popup Models
18. Page Loader Styles

-------------------------------------------------------------------*/




/*fonts-start-here */

@font-face {
    font-family: robo-light;
    src: url("../fonts/roboto/Roboto-Light.ttf");
}
@font-face {
    font-family: robo-medium;
    src: url("../fonts/roboto/Roboto-Medium.ttf");
}
@font-face {
    font-family: robo-bold;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: open-light;
    src: url("../fonts/openSans/OpenSans-Light.ttf");
}
@font-face {
    font-family: open-regular;
    src: url("../fonts/openSans/OpenSans-Regular.ttf");
}
@font-face {
    font-family: open-semibold;
    src: url("../fonts/openSans/OpenSans-Semibold.ttf");
}
@font-face {
    font-family: open-bold;
    src: url("../fonts/openSans/OpenSans-Bold.ttf");
}


.RobotoLight{
    font-family: robo-light;
}
.RobotoMedium{
    font-family: robo-medium;
}
.RobotoBold{
    font-family: robo-bold;
}
.RobotoLight{
    font-family: open-light;
}
.OpensansRegular{
    font-family: open-regular;
}
.OpensanssemBold{
    font-family: open-semibold;
}
.OpenBold{
    font-family: open-bold;
}
body{
    font-family: open-regular;
    line-height: 25px;
    letter-spacing: 0.8px;
}
select::-ms-expand {
    display: none;
}
.col-md-15 , .col-sm-15{
    width: 12.5%;
    float: left;
}
.modal-open{
    overflow: hidden;
}

/*fonts-end-here */
.panel-title:hover{
    color: #000;
}



/* header syles start here*/

header{
    background-image: url("../images/landing-new-home.jpg");
    background-size: cover;
}


/*Navbar styles start here */
.navbar{
    background-color: transparent;
    border: none;
}
.navbar-collapse{
    padding-top: 25px;
}
.navbar-brand{
    color: #fff !important;
    font-size: 30px;
}
#navigation li a{
    color: #fff;
    padding: 2px 0px;
    border-bottom: 1px solid transparent;
    border-bottom-width: 2px;
    transition: all 0.3s ease 0s;
}
#navigation li{
    color: #fff;
    padding: 10px 20px ;
}
.navbar-default .navbar-brand{
    margin-top: 5px !important;
}
#navigation li a:hover{
    color: #fff;
    background-color: transparent;
    outline: none;
    text-decoration: none;
    border-color: #fff;
}
#navigation li.active a{
    color: #fff;
    background-color: transparent;
    outline: none;
    text-decoration: none;
    border-color: #fff;
}
.borderBTn {
    padding: 10px 20px !important;
    color: #ffffff !important;
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid #516072;
    font-size: 18px;
    font-weight: bold !important;
    background: #516072;
    margin-top: 1px;
    margin-bottom: 14px !important;
    margin-top: 12px !important;
}
.borderBTn:hover{
    background-color: #fff !important;
}
.borderBTn div {
    border-radius: 30px;
    background-color: transparent;
    font-family: open-regular;
    font-size: 15px;
    padding: 6px 30px;
    color: #ffffff;
}
.GradinetNav li a:hover, .GradinetNav li a:focus{
    outline: none;
    background-color: transparent;
}
.gradientBtn span{
    width: 100%;
    padding: 8px 28px !important;
    /*background: #fff;
    border: 2px solid transparent;*/
    border-radius: 50px;
}
.gradientBtn:hover span , .gradientBtn:focus span{
    color: #fff;
    background-color: transparent;
}
.btn:active, .btn.active{
    outline: none;
    box-shadow: none;
    background-color: transparent;
}
.navbar{
    transition:all 0.3s;
}
.navbar {
    padding: 0 0 15px;
}
.navbar-fixed-top{
    transition: all 0.3s ease 0s;
}
.navbar-fixed-top .navbar-right{
    margin: 0px;
}
.dropdown-menu{
    background-color: rgba(255,255,255,0.90);
}
.dropdown-menu li a{
    border-bottom: none !important;
    font-size: 12px !important;
    color: #333 !important;
}
.dropdown-menu li a{
    border-bottom: none !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}
.dropdown-menu li{
    padding: 0px !important;
}
.dropdown-menu li:hover{
   background-color: #ddd !important;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    background-color: transparent;
}


/* header syles end here*/



/* banner styles start here */


#banner-section{
    padding-top: 150px;
    padding-bottom: 250px;
}
.BigFont{
    font-family: robo-bold;
    font-size: 45px;
    font-weight: 400;
    line-height: 55px;
    margin-bottom: 30px;;
}
.white {
    color: #516073;
}
}
.BannerPlayBtn{
    border-radius: 50%;
    padding: 20px 20px 20px 27px;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease 0s;
    border: 1px solid #fff;
}
.leftSpace{
    padding-left: 15px;
}
.spacetop{
    padding: 30px 0px;
}

/* banner styles End here */


/* popular course section styles start here*/


.sectionPadding{
    padding: 80px 15px;
}
.SectionTitle{
    font-size: 30px;
    color: #516072;
}
.underTitleLine{
    border-radius: 3px;
    height: 6px;
    margin: 20px 0px;
    width: 80px;
}
.text-center .underTitleLine{
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.LightColor{
    color: #777777;
    font-size: 18px;
    margin-bottom: 40px;
}
.sectionHeader{
    padding-bottom: 50px;
}
.popularBox{
    background-color: transparent;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
}
.popularBox:hover{
    cursor: pointer;
 
}
.ImageContainer{
    height: 240px;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}
.popularTitle {
    margin: 0px;
    color: #516072;
    font-size: 17px;
    margin-bottom: 10px;
}
.popularDesc{
    margin: 0px;
    font-size: 13px;
    color: #888;
}
.popularBtn{
    margin: 0px;
    font-size: 13px;
}
.popularBtn:hover{
    text-decoration: none;
}
.popularPadding {
    padding: 15px;
    line-height: 20px;
    min-height: 275px;
}

/* popular course section styles end here*/


/*how it works styles start here*/


.minusMg{
    margin-top: -50px;
}
.noMarg{
    margin: 0px;
}
.search-div{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(66, 215, 209, 0.15);
    padding: 15px;
}
.iconContainer{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: -7px;
    display: block;
    padding: 4px 10px;
}
.BorderedSection{
    background-color: #fbfbfb;
}
.RightIcon{
    padding-right: 40px;
    text-align: right;
}
.RightIcon:after{
    background: transparent;
    border-radius: 50%;
    content: "";
    font-family: fontawesome;
    height: 20px;
    position: absolute;
    right: -10px;
    top: 30px;
    width: 20px;
}
.LeftIcon{
    text-align: left;
    margin-top: 115px;
    margin-left: -1px;
    padding-left: 40px;
}
.LeftIcon:after{
    background: transparent;
    border-radius: 50%;
    content: "";
    font-family: fontawesome;
    height: 20px;
    position: absolute;
    left: -10px;
    top: 30px;
    width: 20px;
}
.upperSpace{
    margin-top: 60px;
}
.ArrowImage{
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
    display: block;
}
.BoxLayout {
    padding: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 20px #eee;
    border-radius: 10px;
    min-height: 290px;
}

/*how it works styles end here*/


/* counter styles start here*/

#Counter{

}
.p0withl-r{
    padding: 0px 15px;
}
.counterTitle{
    font-size: 50px;
}
.counterLine{
    border-radius: 3px;
    height: 6px;
    margin: 5px 0;
    width: 80px;
}
.ParalaxImage{
    background-size: cover !important;
}

/* counter styles end here*/


/*services box styles start here*/


.ServiceBox{
    border-radius: 10px;
    padding: 18px;
    transition: all 0.2s ease 0s;
}

.serviceImage{
    margin: 15px auto;
    display: block;
    width: 100%;}
.noPadding{
    padding: 0px;
}
.serviceTitle{
    color: #3a3737;
    font-family: open-semibold;
    font-size: 18px;
}
.serviceDetail{
    color: #999999;
    font-size: 14px;
    font-family: open-regular;
}

/*services box styles end here*/

/*faq styles start  here*/


.panel-title{
    font-family: open-semibold;
    font-size: 15px;
    color: #000;
    padding: 10px;
}
.panel-body{
    font-family: open-light;
    font-size: 14px;
    color: #222;
    transition: all 0.2s ease 0s;
}
.panel-group .panel{
    box-shadow: 0px 4px 8px rgba(217, 217, 217, 0.8);
    border: none;
    margin-bottom: 12px;
    transition: all 0.2s ease 0s;
}
.panel-default > .panel-heading{
    background-color: #ffffff;
    padding: 0px;
}
.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group{
    border: none;
    transition: all 0.2s ease 0s;
}
.panel-title{
    padding: 22px 15px 13px;
    display: inline-table;
    width: 100%;
}
.panel-heading:hover{
    cursor: pointer;
}
.collpapseArrow{
    float: right;
    text-align: right;
}
.panel-group{
    padding:  50px 0px;
}
.faqImage{
    margin: 0 auto;
    display: block;
}
.panel-title p{
    width: 85% !important;
    float: left;
}
.panel-title i{
    width: -1%;
}
.panel-title{
    overflow: hidden;
}
.panel.active .collpapseArrow{
    transform:rotate(180deg);
}
.panel.active .panel-title{
    color: #ffffff;
    outline: none;
}
.panel.active{
    transition: all 0.2s ease 0s;
}

/*faq styles end  here*/

/*video tour section styles start here*/


.videoTourPlayBtn{
    background-color: #ffffff !important;
    border-radius: 50%;
    padding: 16px 20px 16px 27px;
    text-align: center;
}
.btnContainer{
    text-align: center;
    margin: 35px 0px;
}

/*video tour section styles end here*/

/*blog section styles start here*/


.BlogImageContainer{
    height: 200px;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}
.blogPostContainer{
    position: relative;
}
.blogPostContainer:hover .blogOverlay{
    height: 100%;
    padding: 188px 50px;
}
.blogPost p{
    margin: 10px 0px;
}
.viewBlog:hover{
    cursor: pointer;
    transform:rotate(75deg);
}
.blogOverlay{
    text-align: center;
    position: absolute;
    transition: all 0.3s ease 0s;
    bottom: 0px;
    border-radius: 10px;
    height: 0%;
    width: 100%;
    overflow: hidden;
}
.postModal{
    width: 70% !important;
}
.blogPostContent{
    padding: 50px;
}
.blogPostContent .dates{
    margin-bottom: 20px;
}
.myCloseBtn{
    color: #fff;
    float: right;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    position: absolute;
    right: 15px;
    text-align: right;
    text-shadow: 0 1px 0 #fff;
    z-index: 999999999;
}

/*blog section styles end here*/


/* testimonials styles start here */

.clientReview{
    font-size: 16px;
    color: #999;
    font-family: open-regular;
}
.clientName{
    font-size: 18px;
    text-transform: uppercase;
    font-family: open-semibold;
    margin: 15px 0px;
}
.owl-theme .owl-dots .owl-dot span
{
    background: #869791 none repeat scroll 0 0;
    border-radius: 0;
    display: block;
    height: 2px;
    margin: 5px 7px;
    opacity: 1;
    width: 12px;
}

/* testimonials styles end here */


/*subscribe styles start here*/

.subscribeInput{
    padding: 15px;
    width: 100%;
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #fff;
    padding-right: 130px;
}
.subscribeInput::-moz-placeholder
{
    color: #fff;
    font-size: 16px;
}
.subscribeBtn{
    border: 0 none;
    border-radius: 50px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    float: right;
    padding: 8px 20px;
    position: absolute;
    right: 26px;
    top: 7px;
}
.MarBm{
    margin-bottom: 30px;
}


/*subscribe styles end here*/


/*contact us styles goes here*/

.themeInputs{
    border: none;
    box-shadow: none;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 1px solid #eeeeee;
    height: 60px;
}
.inputContainer{
    margin: 0px;
    overflow: hidden;
}
.form-control:focus{
    box-shadow: none;
}
.inputContainer label{
    color: #777;
}
textarea{
    padding: 20px 12px;
}
label.error{
    color: #bbb !important;
    padding: 0px 10px;
    font-size: 10px;
    margin: 0px;
}
.output_message.success, .contact_output_message.success {
    color: green;
}
.contact-info ul{
    list-style: none;
}
.contact-info h5 {
    color: #111;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: sans-serif;
}
.contact-info > ul > li > a {
    color: #797979;
    float: left;
    width: 100%;
}
.contact-box .social-networks {
    padding: 0px;
    padding-top: 2px;
}
.social-networks li {
    border: 1px solid transparent;
    border-radius: 50%;
    float: left;
    height: 40px;
    padding: 4px;
    width: 40px;
}
.social-networks li a {
    background: #405e94 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 13px;
    height: 30px;
    line-height: 28px;
    margin-right: 10px;
    text-align: center;
    width: 30px;
}
.social-networks li a :hover{
    text-decoration: none;
}

/*contact us styles end here*/


/* footer styles goes here*/


.footerContainer{
    background-color: #fff;
}
.footerLogo{
    font-size: 30px;
}
.footerLogo img{
    width: 150px;
    padding: 20px 0px;
}
.footerTitle{
    margin: 30px 0px;
}
footer ul{
    list-style: none;
    padding-left: 0px;
}
footer ul li a{
    color: #fff;
    line-height: 30px;
}
.footerMb{
    margin-bottom: 80px;
}
.rightsReserved{
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.footerPadding{
    padding-bottom: 20px;
}
.SocialIcons li a img{
    width: 30px;
}

/* footer styles end here*/



/*go to top button design start here */

#TopBtn
{
    position: fixed;
    right: 25px;
    bottom: 25px;
    color: #fff;
    display: none;
}

/*go to top button design end here */



/* modal design styles start here*/


.modal-dialog{
    width: 25%;
}
label{
    display: none;
}
.marg20{
    margin: 20px 0px;
}
.loginRegisterNote{
    color: #777;
    font-size: 11px;
    font-family: open-light;
}

.modal-dialog {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

#card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}

#card figure {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}


#card .back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

#card.flipped {
    -webkit-transform: translateX( -100% ) rotateY( -180deg );
    -moz-transform: translateX( -100% ) rotateY( -180deg );
    -o-transform: translateX( -100% ) rotateY( -180deg );
    transform: translateX( -100% ) rotateY( -180deg );
}
.loginRegisterNote a:hover,.loginRegisterNote a:focus{
    text-decoration: none;
    outline: none;
}

/* modal design styles end here*/


/* video modal styles start here*/


#playVideo .modal-dialog{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
#playVideo .modal-content{
    width: 100%;
    height: 70vh;
    margin-top: 15vh;
}
.iframe{
    height: 100%;
    width: 100%;
}

/* video modal styles start here*/


/* loading styles start here*/


.pageLoader{
    background-color: #ffffff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}
.loaderArea{
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 2100;
}
.Myloader1{
    height: 100%;
    position: relative;
}
.gradient_circle{
    animation: 1s linear 0s normal none infinite running rotateThis;
    border-radius: 100%;
    box-shadow: 0 1px 0 0 rgba(225, 131, 194, 0.25), 0 -1px 0 0 rgba(165, 181, 222, 0.25), 1px 0 0 0 rgba(225, 131, 194, 0.25), -1px 0 0 0 rgba(165, 181, 222, 0.25), 1px -1px 0 0 rgba(195, 156, 208, 0.5), -1px 1px 0 0 rgba(195, 156, 208, 0.5), 1px 1px 0 0 rgba(255, 105, 180, 0.75), -1px -1px 0 0 rgba(135, 206, 235, 0.75);
    height: 90px;
    margin-left: -45px;
    margin-top: -45px;
    width: 90px;
}
.gradient_circle {
    margin-top: -45px;
    margin-left: -45px;
    height: 90px;
    width: 90px;
    border-radius: 100%;
    box-shadow: 0 1px 0 0 rgba(225, 131, 194, .25), 0 -1px 0 0 rgba(165, 181, 222, .25), 1px 0 0 0 rgba(225, 131, 194, .25), -1px 0 0 0 rgba(165, 181, 222, .25), 1px -1px 0 0 rgba(195, 156, 208, .5), -1px 1px 0 0 rgba(195, 156, 208, .5), 1px 1px 0 0 rgba(255, 105, 180, .75), -1px -1px 0 0 rgba(135, 206, 235, .75);
    animation: rotateThis 1s linear infinite
}
@-o-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}
@-moz-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}
@-webkit-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}
@keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}

/* loading styles end here*/

.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 33px;
    float: left;
    margin-right: 5px;
    margin-top: 8px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #eeeeee;
    -webkit-transition: .4s;
    transition: .4s;
    width: 60px;
    height: 33px;
}
.slider::before {
    position: absolute;
    content: "";
    height: 25px;
    width: 25px;
    left: 2px;
    bottom: 2px;
    background-color: #2F2F2F;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider.round {
  border-radius: 30px;
}
.slider.round:before {
  border-radius: 50%;
}
input:focus-visible {
  outline: none;
}
input:checked + .slider {
  background-color: #2F2F2F;
  border: 2px solid #eeeeee;
  width: 60px;
  height: 33px;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(27px);
  -ms-transform: translateX(27px);
  transform: translateX(27px);
  background: #FFF;
  left: -5px;
}
.privacy {
    color: #777777;
    font-size: 11px;
    padding-top: 10px;
}
.contact-privacy {
    line-height: 48px;
    color: #777777;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #eeeeee;
    -webkit-transition: .4s;
    transition: .4s;
    width: 50px;
    height: 27px;
}
.slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 0px;
    background-color: #2F2F2F;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider{
    width: 50px;
    height: 27px;
    background-color: green;
}
.textoinicio {
    font-size: 108px;
    color: #0797a2;
    font-weight: bold;
}
.cuidando{
    font-size: 42px !important;
    letter-spacing: 0px;
    color: #0497a2;
    margin-bottom: 40px !important;
}