body{margin: 0px; background: #F5F5F5; font-family: 'Open Sans', sans-serif; color: #393A3E}
a, a:hover, a:active, a:visited{text-decoration: none;}

.headerLogo{height: 70px; background:#444; min-width: 1050px; position: relative; padding: 5px 10px 5px 30px; margin-bottom: 3px}
.headerLogo img{height: 70px;}


.menu{display: flex; justify-content: center; height: 100px; background:#EEE; min-width: 1050px; position: relative;}
.menu a, .menu a:hover, .menu a:active, .menu a:visited{width: 100%; height: 100%; text-decoration: none;}
.contraMenu, .menuIcon{display: none}
.itemMenu{height: 100px; width: 170px; background-size: 110px; background-position: center 13px; background-repeat: no-repeat; text-align: center; font-size: 14px; margin: 0px 1px; transition: 0.3s}
.itemMenu:hover {background-color: #DDD; background-size: 120px; background-position: center 10px;}
.itemMenu div{padding-top: 70px; color: #393A3E;}
.labelInfo{display: none; position: absolute; background: #393A3E; padding: 5px; z-index: 10001; color: #FFF; font-size: 11px; border-radius: 3px; border: 1px solid #777;}

.menu-aulas{background-image: URL('img/menu-aulas.png');}
.menu-calendario{background-image: URL('img/menu-calendario.png');}
.menu-resumo{background-image: URL('img/menu-resumo.png');}
.menu-secretaria{background-image: URL('img/menu-secretaria.png');}

.menuSelect{background-color: #777 !important; background-size: 120px; background-position: center 10px;}
.menuSelect div{color: #F5F5F5 !important}

.user{position: absolute; top: 10px; right: 15px;}
.userName{color: #393A3E; font-size: 11px; text-align: center;border: 1px solid #CCC; border-radius: 3px; padding: 10px 5px; cursor: pointer; background: #E5E5E5;}
.sair{width: 140px; height: 32px; margin-top: 10px; background-image: URL('img/sair.png'); background-repeat: no-repeat; background-position: center; filter: grayscale(60%); transition: 0.3s;}
.sair:hover{ filter: grayscale(0%); transition: 0.3s;}

.favoritosBar{width: 1040px; margin: 25px auto; position: relative; height: 68px;}
.favoritos{width: 130px; height: 66px; line-height: 66px; position: absolute; right: 0; color: #FFF; font-size: 20px; padding-left: 70px; background-color: #3a3845; background-image: URL('img/favoritos.png'); background-position: 12px center; background-repeat: no-repeat; background-size: 46px; font-family: 'Archivo Black', sans-serif; transition: 0.3s; border-radius: 2px;}
.favoritos:hover{background-position: 10px center; background-size: 50px;  transition: 0.3s;}

.avatar{display: flex; justify-content: space-between; margin: 25px auto; width: 1040px; padding: 0px 5px; flex-wrap: wrap}

[id^='avatar-']{position: relative; width: 200px; height: 200px; background-size: 64px; background-position: center 12px; background-repeat: no-repeat; border-radius: 2px; transition: 0.3s; cursor: pointer}
[id^='avatar-']:hover{background-size: 70px; background-position: center 7px; transition: 0.3s;}
[id^='avatar-'] div{position: absolute; text-align: center; width: 100%; bottom: 10px; font-size: 23px; font-family: 'Archivo Black', sans-serif; color: #FFF;}

#avatar-biologia{background-color: #6bb590; background-image: URL('img/avatar-biologia.png');}
#avatar-quimica{background-color: #6ba6b6; background-image: URL('img/avatar-quimica.png');}
#avatar-fisica{background-color: #d03a45; background-image: URL('img/avatar-fisica.png');}
#avatar-matematica{background-color: #6153aa; background-image: URL('img/avatar-matematica.png');}
#avatar-redacao{background-color: #f69f02; background-image: URL('img/avatar-redacao.png');}

.biologia{background-color: #6bb590; display: flex !important}
.quimica{background-color: #6ba6b6; display: flex !important}
.fisica{background-color: #d03a45; display: flex !important}
.matematica{background-color: #6153aa; display: flex !important}
.redacao{background-color: #f69f02; display: flex !important}
.resumo{background-color: #AAA;}

#materiaSelecionada > div{margin: 10px;}
#materiaSelecionada{display: none; justify-content: center; flex-wrap: wrap; margin: 25px 0px 0px 0px; padding: 10px; min-width: 1040px; overflow: hidden; padding-bottom: 30px; transition: 0.3s}
.tituloCat{color: #777; font-weight: bold; background: #F5F5F5; padding: 10px; width: 230px; border-radius: 2px; text-align: center; cursor: pointer}
.aulasCat{margin: 5px 10px; display: none}
.aulasCat div{color: #FFF; font-size: 14px; margin: 5px 0px; cursor: pointer}

.resumoFlex, .favoritosFlex{display: flex; justify-content: space-between; width: 1050px; margin: 20px auto; padding: 0px 15px; flex-wrap: wrap}
.favoritosFlex > div{padding: 10px; width: 310px; margin: 10px; border-radius: 2px; color: #FFF; text-align: center; display: grid !important; align-items: center; cursor: pointer}
.resumoFlex > div{width: 500px;}
.resumoBt, .bt{width: 100%; height: 60px; line-height: 60px; background: #0c71c3; border-radius: 2px; text-align: center; color: #FFF; margin: 20px 0px 10px 0px; cursor: pointer; font-weight: bold; border: none; font-family: 'Open Sans', sans-serif; font-size: 17px}
.bt{line-height: initial !important}
.resumoHidden{display: none; padding: 0px 10px; line-height: 30px;}
.resumoHidden a, .resumoHidden a:hover, .resumoHidden a:visited, .resumoHidden a:active{text-decoration: none; color:#555}
.resumoHidden a:hover{text-decoration: none; color:#333}
.label{margin-top: 10px}
input, select{padding: 10px; width: 100%}
.dadosCadastrais{width: 400px; margin: 20px auto; padding: 0px 15px;}

#boxTemp{height: 100%; width: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0, 0.8); z-index: 10000; display: flex; align-items: center; justify-content: center}
.close{cursor: pointer; position: absolute; top: 0px; right: 0px; height: 40px; width: 40px; background-image: URL('img/close.png'); background-size: 20px; background-repeat: no-repeat; background-position: center;}
.vimeo{height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #FFF; position: relative;}
.videoContain {width: 100%; height: 100%;}
.videoContain .bar{display: flex; justify-content: center; width: 100%; height: 40px; line-height: 40px; background: #FFF; margin-bottom: 15px; text-align: center;}
.videoContain iframe{height: calc(100% - 70px);width: 100%;}

.favoritos-color, .favoritos-grey{width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: 25px; margin: 5px; transition: 0.3s; cursor: pointer;}
.favoritos-color{background-image: URL('img/favoritos.png');}
.favoritos-grey{background-image: URL('img/favoritos-gray.png');}
.form{margin: 0px;}

.footer{background: #000; min-width: 1200px; padding: 20px calc((100% - 1200px) / 2);}
.msgAlerta{padding: 25px; background: #FFF; border-radius: 2px; color: #CC0000; font-weight: bold;}


/*PAGE QUEM SOMOS*/
.quemSomos{width: 100%; min-width: 1200px; height: 900px; background-image: URL('img/qs-background.png'); overflow: hidden; position: relative;}
.quemSomosBalao{display: none; position: absolute; bottom: 200px; left: 270px; width: 800px; background-image: URL('img/qs-tagBalao.png'); padding-bottom: 109px; background-position: bottom left; background-repeat: no-repeat;}
.quemSomosTxt{color: #393A3E; padding: 20px; background: rgba(255,255,255,0.9); border-radius: 30px;}
.professores{min-width: 1200px; padding: 20px calc((100% - 1200px) / 2); margin: 0px; background: #FFF;}
.profTitulo{width: 600px; height: 60px; background-image: URL('img/qs-seus-professores.png'); background-repeat: no-repeat; background-position: center; margin: 0 auto; cursor: pointer}
.hide{display: none !important; transition: 0.5s}
.profHidden{display: flex; justify-content: space-between; margin-top: 20px; transition: 0.5s}
.profItem{margin: 20px; color: #393A3E; text-align: left; width: 50%}
.realidadeVirtual{width: 100%; min-width: 1200px; height: 289px; background-color: #353336; background-image: URL('img/qs-realidade-virtual.png'); background-position: center; background-repeat: no-repeat; position: relative; animation: realidadeVirtual 3s linear infinite;}
.qsFotoPerfil{ width: 100%; border: 3px #419FDF solid; border-radius: 10px; margin: 20px 0px}
.qsTxtPerfil a{color: #3086d2 !important;}
.cano{width: 97px; height: 88px; position: absolute; bottom: 38px; left: 150px; background-image: URL('img/qs-cano.png');}
.bonecoQS {width: 112px; height: 139px; position: absolute; bottom: 117px; left: 131px; animation: bonecoQS 2s linear infinite;}
.plataforma{width: 620px; height: 20px; position: absolute; bottom: 150px; left: 729px; background-image: URL('img/qs-plataforma.png');}
.escada{width: 57px; height: 280px; position: absolute; bottom: 170px; left: 1000px; background-image: URL('img/qs-escada.png');}
.coracao{width: 51px; height: 50px; position: absolute; left: 1053px; bottom: 72px; background-image: URL('img/qs-coracao.png'); background-size: 51px 50px; background-repeat: no-repeat; background-position: center; animation: coracao 1.5s cubic-bezier(.79,.14,.15,.86) infinite;}
.moeda{width: 48px; height: 48px; position: absolute; bottom: 190px; background-image: URL('img/qs-moeda.png'); animation: moeda 3s linear infinite;}
.moeda1{left: 765px;}
.moeda2{left: 835px;}
.moeda3{left: 905px;}

@keyframes realidadeVirtual {
    0% {background-image: URL('img/qs-realidade-virtual.png');}
    45% {background-image: URL('img/qs-realidade-virtual.png');}
    50% {background-image: URL('img/qs-realidade-virtual2.png');}
    55% {background-image: URL('img/qs-realidade-virtual.png');}
    100% {background-image: URL('img/qs-realidade-virtual2.png');}
}
@keyframes bonecoQS {
    0% {background-image: URL('img/qs-boneco.png');}
    45% {background-image: URL('img/qs-boneco.png');}
    50% {background-image: URL('img/qs-boneco2.png');}
    55% {background-image: URL('img/qs-boneco.png');}
    100% {background-image: URL('img/qs-boneco.png');}
}
@keyframes coracao{
    0% {background-size: 51px 50px}
    50% {background-size: 47px 46px}
    100% {background-size: 51px 50px}
}
@keyframes moeda{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.youtubeFaixa{background: #FF2D00; padding: 30px 0px; text-align: center; min-width: 1200px;}
.youtubeFaixa img{width: 100px; margin-bottom: 20px}
.youtubeViews{color: #FFF; font-weight: bold; text-align: center}