body { 
    font-family: 'Arimo', 'Open-sans', sans-serif;
    font-size: 17px;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
}

.container {
    margin: auto;
}

/* COMMON CLASSES */

.primary-text {
    color: #56A79A;
}

.primary-background {
    background: #56A79A;
}

.yellow-text {
    color: rgb(255, 202, 24);
}

/*HEADER*/
#main-navbar {
    transition: .5s;
}

#main-navbar .title-navbar {
    height: 100%;
    width: 250px;
    transition: .5s;
}

#main-navbar.border-style {
    border-bottom: solid 2px rgb(255, 202, 24);
    background: rgba(51, 51, 51, 0.9) !important;
}

#main-navbar.border-style .title-navbar {
    height: 100%;
    width: 200px;
    transition: .5s;
}

.navbar {
    border-bottom: solid 2px #56A79A;
    background: rgba(51, 51, 51, 0.418) !important;
    font-family: 'Arimo', 'Open-sans', sans-serif
}


.navbar ul {
    padding: 0px 0px;
}

.navbar ul li {
    padding: 0 20px;
}

.navbar ul li a{
    font-size: 1.2em;
    font-weight: 500; 
}


.navbar ul li a:hover{
    color: rgb(255, 202, 24) !important; 
      

}

.dropdown:hover>.dropdown-menu {
    display: block;
    
}
/* SOCIAL MEDIA - ASIDE */

#social-media {
    display: none;
}

#social-media.display-scroll {
    display: block;
    position: fixed;
    top: 35%;
    transform: translateY(-50%);
    font-family: Arial, Helvetica, sans-serif;
    z-index: 500;
    transition: .5s;
}

#social-media.display-scroll .share {
    width: 50px;
    height: 40px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s linear;
}

#social-media.display-scroll .share .fab{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    color: #fff;
    font-size: 1.4em;
}

#social-media.display-scroll .share.whatsapp {
    background-color: #25D366;
}

#social-media.display-scroll .share.facebook {
    background-color: #3b5999;
}

#social-media.display-scroll .share.instagram {
    background-color: #e4405f;
}

#social-media.display-scroll .share.pinterest {
    background-color: #bd081c;
}

#social-media.display-scroll .share:hover {
    width: 70px;
}

@media (max-width:880px) {
    #social-media.display-scroll {
        display: none;
    }
}
/* NAVBAR */ 

#navbar {
    text-transform: uppercase;
}

#navbar li {
    display: inline-block;
    padding-right: 25px;
    list-style: none;
    margin-top: 20px;
}
 
#navbar a {
    text-decoration: none;
    color:#333;
    font-weight: 650;
}

#navbar li a:hover {
    background-color: rgba(86, 167, 154, 0.6);
    padding: 21px 0px 19px 0px;
    border-radius: 0px;
    transition: .3s;
}

#navbar a.whats-icon:hover {
    font-size: 1.8em;
    color: #fff;
    background-color: #56A79A;
    padding: 5px 10px;
    transition: .7s;
    border-radius: 10px;
}

/* MEDIA QUERIES */

@media (max-width:600px) {
    #navbar li {
        display: none;
    }
    #main-header h1 {
        margin: 20px 20px 0px 20px;
    }
}

/* SHOWCASE */

#showcase {
    background: url(../img/showcasekid.jpg);
    border-bottom: 1px solid #56A79A;
    margin-bottom: 0px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#showcase .row {
    height: 670px;
}

#showcase h1 {
    color: #fff;
    font-size: 4em;
    margin: 0;
    margin-top: 210px;
    padding-bottom: 20px;
    font-weight: lighter;
    letter-spacing: 0.1em;
}

#showcase p {
    color: #fff;
    margin: 0;
    font-size: 2em; 
    font-weight: 450;
    letter-spacing: 0.15em;
}

/* MEDIA QUERIES */

@media (max-width: 800px) {
    #showcase h1 {
        font-size: 2em;
        padding-top: 10px;
    }

    #showcase p {
        display: none;
    }
}

@media (max-width: 500) {
    #showcase .showcase-content {
        padding: 40px 10px;
    }
}

/* SEPARATOR */

#separator {
    padding: 50px 0px;
    margin: 0;
    background: rgba(51, 51, 51, 0.85);
    border-bottom: solid 2px #56A79A;
}

#separator p {
    color: #fff;
    font-size: 2em;
    text-align: center;
    vertical-align: center;
    
}

/*COURSES*/

#img-parallax1 {
    background:url(../img/childsmall-triangle.jpg);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}
#img-parallax2 {
    background:url(../img/kids-course-triangle.jpg);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}
#img-parallax3 {
    background:url(../img/teen-course-triangle.jpg);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}
#img-parallax4 {
    background:url(../img/adult-course-triangle.jpg);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}

#img-parallax5 {
    background:url(../img/seniors-course-triangle.jpg);    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}

#middle-parallax-y {
    background: rgb(255, 202, 24);
    padding: 50px 0;
}

#middle-parallax-y h2 {
    padding: 0 0px 0 0;
    font-size: 2.5em;  
}

#middle-parallax-y p {
    font-size: 1.2em;
    text-align: justify;  
}

#middle-parallax-y button{
    background: #333;
    color: rgb(255, 202, 24);
    padding: 10px 30px;
    border-radius: 50px;
    border: solid 2px #333;
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
    transition: .5s;
}

#middle-parallax-y button:hover {
    background: rgb(255, 202, 24);
    color: #333;
    border: solid 2px #333;
    transition: .5s;
}

#middle-parallax-g {
    background: rgb(35, 186, 171);
    padding: 50px 0;
}

#middle-parallax-g h2 {
    padding: 0 0px 0 0;
    font-size: 2.5em;  
}

#middle-parallax-g p {
    font-size: 1.2em;
    text-align: justify;    
}

#middle-parallax-g button{
    background: #333;
    color: rgb(35, 186, 171);
    padding: 10px 30px;
    border-radius: 50px;
    border: solid 2px #333;
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
    transition: .5s;
}

#middle-parallax-g button:hover {
    background: rgb(35, 186, 171);
    color: #333;
    border: solid 2px #333;
    transition: .5s;
}

/*---------TESTIMONIALS---------*/

#testimonials {
    padding: 50px 0;
    background: url(../img/lemontestimonial.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: solid 2px #56A79A;
}


#testimonials h1 {
    margin-top: 50px;
    font-size: 1.9em;
    color: #fff;
}

#testimonials h1::after {
    content: '';   
    background: #f7ce3a;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px; 
}

#testimonials p {
    font-size: 1.2em;
    color: #fff;
}

#testimonials .row {
    margin-top: 30px;

}

#testimonials .col-md-4 {
    margin: 40px auto;
}

#testimonials .profile {
    padding: 70px 10px 10px;
    background-color: #efefef;
}

#testimonials .user {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

#testimonials .profile img {
    top: -60px;
    position: absolute;
    left: calc(50% - 60px);
    border: 10px solid #efefef;
}

#testimonials .profile .nome-depoimento {
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 15px;   
    color: #f7ce3a;
    margin: 0;
}

#testimonials .profile .curso-depoimento {
    padding: 10px 0;
    margin: 0;
    color: #333;
    font-size: 1.1em;
    font-weight: 500;
}

#testimonials blockquote {
    font-size: 1.1em;
    line-height: 30px;
}

#testimonials .fas {
    font-size: 30px;
    color: rgb(247, 206, 58);
}

#testimonials .profile {
    transition: .5s;    
}

#testimonials .profile:hover {
    box-shadow: 0 0 15px 5px rgba(247, 206, 58, 0.5);
    cursor: pointer;
    transition: .5s;
}

/*DIFERENCIAL*/

#diferencial {
    padding: 80px 0px 30px 0px;
    color: #333;
    line-height: 2em;
    font-size: 1.1em;
    background: rgb(229, 230, 232);
}

#diferencial h2.title {
    margin-top: 80px;
    font-size: 1.9em;
}

#diferencial h2:not(.title){
    margin-top: 50px;
    margin-bottom: 0;
    margin-bottom: 20px;
}

#diferencial img{
    margin-top: 60px;
    border-radius: 10px;
}

@media (max-width:767px){
    #diferencial img.img-hide {
        display: none;
    }
}

/*MEDIA CONTENT*/

.content-sec {
    margin-top: 20px;
    background: url(../img/bubble-bg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0px;
}

#media-content {
    margin:0;
    padding-top: 80px;
    background: #333;
    color: #fff;
}

#media-content img {
    width: 80px;
    height: 80px;
}

#media-content .fb-img {
    background: #3b599949;
    cursor: pointer;
}

#media-content .wts-img {
    background: #5e993b38;
    cursor: pointer;
}

#media-content .inst-img {
    background: #993b8938;
    cursor: pointer;
}



/*CALLBACK*/


/* BOTÕES CAROUSEL PREV E NEXT*/

#callback .carousel-control-prev {
    height: 600px;
}

#callback .carousel-control-next {
    height: 600px;
}



/*BUTTON REPLACE*/

#btn-callback {
    background-color: rgb(255, 202, 24);
    border: solid 2px rgb(255, 202, 24);
    height: 50px;
}

#btn-callback #btn-replace{
    width: 100%;
    background-color: rgb(255, 202, 24);
    border: none;
    text-align: center;
    cursor: pointer;
    height: 46px;
    color: #333;
    font-weight: bolder;
    font-size: 1.5em;
}


/*ESTRUTURA*/

#estrutura {
    margin: 0px 0px;
    color: #333;
    line-height: 2em;
    font-size: 1.1em;
    padding-bottom: 100px;
    background: rgb(229, 230, 232);
    border-bottom: solid 1px #56A79A;
}

#estrutura div.dnSlide-main{
    height: 300px;
}

@media (max-width:768px) {
    #estrutura {
        display: none;
    }
}


/* COMPANY */

#company {
    background: #333;
    color: #fff;
    padding: 10px 0;
    margin: 0;
    padding: 50px 0;
    font-size: 1.3em;
}

#company h4{
    text-transform: uppercase;
    margin-bottom: 40px;
}

#company ul{
    list-style: none;
    padding: 0;
    line-height: 2em;
}


/* MAIN FOOTER */

#main-footer{
    background: #333;
    padding: 5px;
    color: #fff;
    font-weight: 500;
    font-size: 1.1em;
}

/*MODAL*/

#form-modal-img {
    height: 80px;
    width: 80px;
    margin-left: calc(50% - 40px);
}

#form-modal-parag {
    color: #333;
    font-size: 1.2em;
}

/*VISITA*/

#aula-experimental {
    background: url(../img/backgroundformjpg.jpg);
    margin-bottom: 0px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 1px solid #56A79A;
    border-top: 1px solid #56A79A;
    margin-top: 0;
    padding: 50px 0;
}

#aula-experimental .wrapper {
    margin: 0px auto;
    background-color: #fff;
    border-radius: 10px;
    padding-top: 50px;
    padding-bottom: 50px;
    box-shadow: 0 0 40px 2px rgba(37,73,214,0.18);
}

#aula-experimental .feature-box h2 {
    margin-top: 0;
    margin-bottom: 5%;
    font-size: 2em;
    font-weight: 600;
    color: #333;
    text-align: center;
}

#aula-experimental .feature-box h2::after {
    content: '';   
    background: #f7ce3a;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px; 
}

#aula-experimental .feature-box p {
    margin: 50px auto;
    color: #333;
    font-size: 1.5em;
    font-weight: 400;
    text-align: center;
}

#aula-experimental .feature-box p span.green-whats {
    font-weight: 600;
    color: green;
}

#aula-experimental .feature-box a {
    color: #fff;
    font-size: 1.6em;
    letter-spacing: 2px;
    font-weight: 500;
}

#wave {
    height: 200px;
    margin: 0;
    padding: 0;
    background: url(../img/orangewave.png);
}

/*FORM-CONTATO*/

#form-contato {
    padding: 50px;
    background-color: #fe7213;
}
#form-contato img {
    padding: 15%;
}

#form-contato h2 {
    margin-top: 0;
    margin-bottom: 3%;
    font-size: 2em;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

#form-contato h2::after {
    content: '';   
    background: #f7ce3a;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px; 
}

#form-contato p {
    color: #fff;
    font-size: 1.2em;
    font-weight: 400;
}

#form-contato label {
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
}