@import url('../fonts/fonts.css');

@import url('./navBar.css');

@import url('./modalElement.css');

@import url('./defaultLoginArea.css');

@import url('./exitButton.css');

@import url('./searchBar.css');

@import url('./videoAulas.css');

@import url('./flexClasses.css');

@import url('./listOfSearchs.css');

@import url('./extras.css');

@import url('./pastas.css');





.fnt-serrat-regular{

    font-family: 'Montserrat' !important;

}



.fnt-serrat-bold{

    font-family: 'MontserratBold' !important;

}







/* ---------- ROOT CONTAINERS ---------- */

#rootHeaderContent {

    width: 100%;

    /* height: 10%;  */

}

#rootHeaderContent #mainBackground {

    background: url(../../images/new/banner.png) center no-repeat;

    background-size: cover;

    /* width: 100%; */

    position: relative;

    display: flex;

    flex-direction: column;

}



#rootMainContent {

    width: 100%;

    min-height: 60vh;

    height: auto;

    padding: 32px;

    padding-top: 9vh;

    padding-bottom: 2vh;

}



#rootFooterContent {

    width: 100%;

    height: auto;

}



#rootHeaderContent *,

#rootMainContent *,

#rootFooterContent *{

    font-family: 'Montserrat' ;

}



button, a, input[type=checkbox], input[type=radio], #videoAula_loadMore{

    cursor: pointer !important;

}

/* ---------- ROOT CONTAINERS ---------- */







/* ---------- ROOT HEADER STYLES ---------- */



#rootHeaderContent #mainBackground #topHeaderElements {

    display: flex;

    justify-content: space-around;

    align-items: center;

    /* height: 40vh; */

    /* max-height: 575px; */

    padding: 5vh 5vh 10vh 5vh;

}
#rootHeaderContent #mainBackground #topHeaderElements img{

    height: 50px;

}


#rootHeaderContent #mainBackground #topHeaderElements h1 {
    color: white;

    font-family: MontserratBold !important;

    width: 15ch;

    font-size: min(5vw, 55px);

    text-align: center;

    cursor: pointer;
}



.activeSearchBar{

    width: 100%;

    height: 4vh;

    margin-top: 4vh;

    margin-bottom: 4vh;

}



#rootHeaderContent #mainBackground #rightContainer .greatingText{

    color: white;

    font-size: min(5vw, 32px);

    text-align: right;

}



@media (max-width: 1110px) {

    #rootHeaderContent #mainBackground #topHeaderElements {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        min-height: 45vh;

    }

    #rootHeaderContent #mainBackground #topHeaderElements h1 {

        font-size: min(8vw, 36px);

        width: 375px;

        max-width: 90vw;

    }

    

}

/* ---------- ROOT HEADER STYLES ---------- */





/* ---------- MAIN CONTENT STYLES ---------- */

#rootMainContent .containerMain{

    width: 100%;

    height: auto;

    background-color: transparent;

    max-width: 1300px;

}

@media (max-width: 768px) {

    #rootMainContent{

        /* padding-top: 3vh; */

        padding: 24px;

    }

}

@media (max-width: 480px) {

    #rootMainContent{padding: 16px;}

}

@media (max-width: 360px) {

    #rootMainContent{padding: 12px;}

}



/* ---------- MAIN CONTENT STYLES ---------- */







/* ---------- ROOT FOOTER STYLES ---------- */

#rootFooterContent #footerLoginArea {

    background: url(../../images/new/banner2.png) center no-repeat;

    background-size: cover;

    width: 100%;

    height: 40vh;

    /* max-height: 575px; */

    height: auto;

    padding: 24px 12px;

}



.footer-segment{

    width: 375px;

    max-width: 90vw;

    margin: 10px;

}


#rootFooterContent #footerLoginArea #rightImg img{

    object-fit: contain;

    width: 225px;

}

#rootFooterContent #footerLoginArea #leftText{

    color: white;

    font-size: 1.5rem;

    font-family: MontserratBold !important;

}



/* --- Lower Footer */

#rootFooterContent #footerDefaultContent {

    width: 100%;

    min-height: 50vh;

    /* max-height: 650px; */

    height: auto;

    padding: 8px;

    background-color: rgb(2, 64, 107);

}



#rootFooterContent #footerDefaultContent * {

    color: white;

}

#rootFooterContent #footerDefaultContent .social-media-icons{

    margin: 3vh auto 3vh auto;

    width: 250px;

}


#rootFooterContent #footerDefaultContent .social-media-icons img{

    width: 50px;

}

#rootFooterContent #footerDefaultContent .contacts{

    font-size: 0.9rem;

    max-width: 950px;

    margin: auto;

    margin-top: 2vh;

    height: 10vh;

    margin-bottom: 5vh;

}



#rootFooterContent #footerDefaultContent .contacts div{

    margin: 1vh 2vw;

    width: 225px;

    text-align: center;

}



#rootFooterContent #footerDefaultContent .contacts img{
    
    width: 22px;

}

#rootFooterContent #footerDefaultContent .colaboration{


    width: 55%;

    margin-left: 50%;

    transform: translateX(-50%);


}

#rootFooterContent #footerDefaultContent .colaboration section{


    min-height: 15vh;

    height: auto;

    width: 5%;

    min-width: 300px;

    padding: 5px;

}



#rootFooterContent #footerDefaultContent .colaboration section img{

    width: 90px;

}



#rootFooterContent #footerDefaultContent .colaboration div{

    margin-top: 1vh;

    font-size: 0.85rem;

}

#rootFooterContent #footerDefaultContent .footer-logos{

    margin-top: 25px;

    margin-left: 50.5%;

    transform: translateX(-50%);

    height: 100px;

    width: 550px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-around;

}


 #rootFooterContent #footerDefaultContent .footer-logos .img-logo{

    width: 150px;

} 

#rootFooterContent #footerDefaultContent .footer-logos .img-logo1{

    width: 125px;

} 

#rootFooterContent #footerDefaultContent .from-where{

    display: flex;

    flex-direction: column;

    align-items: center;

} 



#rootFooterContent #footerDefaultContent .from-where span{

    font-size: 0.85rem;

    margin-bottom: 1vh;

}



#rootFooterContent #footerDefaultContent .from-where img{

    width: 45px;

    height: 15px;

    object-fit: contain;

}


/* ---------- ROOT FOOTER STYLES ---------- */







/* ---------- ROOT FORM STYLES ---------- */

.default-form-home{

    background-color: rgba(255, 255, 255, 0.5);

    padding: 16px 32px;

    border-radius: 8px;

    width: 375px;

    max-width: 90vw;

}



.default-form-home header {

    color: rgb(127, 6, 6);

    font-size: 1.25rem;

    margin-bottom: 1em;

    font-weight: bold;

    font-family: MontserratBold !important;

}



.default-form-home .input-login {

    margin: 5px 0px;

    border-radius: 8px;

    padding: 25px;

    padding-left: 55px;

    width: 100%;

}



.default-form-home select {

    margin: 5px 0px;

    border-radius: 8px;

    padding: 15px;

    width: 100%;

}



.default-form-home .login-form{

    background-color: rgb(209, 30, 87);

    font-weight: bold;

    font-family: MontserratBold !important;

    font-size: 24px;

    color: white;

    height: auto;

    border: none;

    border-radius: 8px;

    margin-top: 12px;

}



.default-form-home .footer{

    margin-top: 1.5em;

}



select:required:invalid {

    color: gray;

}



option[value=""][disabled] {

    display: none;

}



option {

    color: black;

}

/* ---------- ROOT FORM STYLES ---------- */







/* ---------- FLEX COMOM STYLES AND ALIGMENT STYLES ---------- */

/* 

flex 

- (flex-direction: r / c)

- (justify-content: c / fe / fs / sa / sb / se)

- (align-items: c / fe / fs)

- (flex-wrap: w / nw)

*/

/* ---------- FLEX COMOM STYLES ---------- */