@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');


*{
    margin: 0;
    padding: 0;
}

html, body{
    width: auto;
    font-family: verdana;
   
}
/*CABEÇALHO PARA CELULAR DESATIVADO*/
@media only screen and (min-width: 700px) and (min-height: 600px){
.cabecalho{
    display: none;
}
}
/*CABEÇALHO DESKTOP...*/
@media only screen and (max-width: 700px) and (min-height: 300px){
.cabecalho1{
    display: none;
}
}
/*CABEÇALHO DESKTOP...*/
@media only screen and (max-height: 599px){
.cabecalho1{
    display: none;
}
}
/*BLOCO DO MEIO PARA CELULAR DESATIVADO*/
@media only screen and (min-width: 700px) and (min-height: 600px){
.bloco-meio{
    display: none;
}
}
/*BLOCO DO MEIO PARA DESKTOP...*/
@media only screen and (max-width: 700px) and (min-height: 300px){
.bloco-meio1{
    display: none;
}
}
/*BLOCO DO MEIO PARA DESKTOP...*/
@media only screen and (max-height: 599px){
.bloco-meio1{
    display: none;
}
}

/* LOGOMARCA NO CABEÇALHO*/
.pequena{
    width: 35px;
    height: 35px;
}
@media only screen and (min-width: 700px) and (min-height: 600px){
.pequena{
    width: 150px;
    height: 50px;
}
}

 /*PRIMEIRA PARTE DO CABEÇALHO*/
.nav-cabecalho{
    background-color: whitesmoke;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 10vh;
}
/*PRIMEIRA PARTE DO CABEÇALHO PARA TABLET*/
@media only screen and (max-height: 600px){
.nav-cabecalho{
padding: 10px;
}
}

/*ICONES DA PRIMEIRA PARTE DO CABEÇALHO*/
.nav-list{
    list-style: none;
    display: flex;
}

.nav-list li {
    letter-spacing: 10px;
}

.nav-list i{
    color: black;
}


/* BOTAO LUPA DA PESQUISA PARA CELULAR E DESKTOP*/
.btn-buscar-top {
    width: 20px;
    height: 20px;
    background: url(http://www.devmedia.com.br/imagens/2013/buscar_grey.png) no-repeat;
    cursor: pointer;
    border: none;
    transform: translateY(-50%);
    padding: 0;
    position: relative;
    right: -83%;
    top: -16px;
  }
  @media only screen and (min-width: 700px){
.btn-buscar-top{
    right: -133%;
    top: -35px;
}
}
  @media only screen and (min-width: 1200px){
.btn-buscar-top{
    right: -183%;
    top: -35px;
}
}

/*BARRA DE TEXTO DA PESQUISA CABEÇALHO CELULAR E DESKTOP*/
.barra-pesq{
    height: 10px;
    width: 130px;
    font-size: 11px;
    margin-top: 27px;
    padding: 8px;
    background-color: #fcf7f2c2;
    border: solid 1px;
    outline: none;
}
@media only screen and (min-width: 700px){
.barra-pesq{
    height: 15px;
    width: 300px;
    margin-top: 6em;
}
}


/* NAV MENU CELULAR E DESKTOP*/
.menu {
    background-color: whitesmoke;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 5vh;
}

/*LINKS DO MENU CELULAR E DESKTOP*/
.menu a{
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #006837;
    padding-bottom: 4px;
}
@media only screen and (min-width: 700px) and (min-height: 600px){
.menu a{
    font-size: 18px;
}
}


/*CARROSSEL ABAIXO DO CABEÇALHO*/
.carrossel{
    height: auto;
    margin: 15px 0;
    overflow-x: hidden;
}

.carrossel ul {
    display: flex;
    width: 600%;
    list-style: none;
  }

.carrossel li{
    position: relative;
    animation: slide 15s infinite ease-out;
}

.carrossel img, .carrossel a{
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 1300px) and (min-height: 600px){
.carrossel img{
    height: 600px;
}
}

/* CONTAGEM DE ROLAGEM DA LISTA CARROSSEL*/
@keyframes slide{
    0%{left:  0%;}
    8.3%{left: 0%;}
    16.6%{left:-16.7%;}
    24.9%{left:-16.7%;}
    33.2%{left:-33.4%}
    42.5%{left:-33.4%}
    50.8%{left:-50.1%}
    59.1%{left:-50.1%}
    67.4%{left:-66.7%}
    75.7%{left:-66.7%}
    84%{left:-83.4%}
    92.3%{left:-83.4%}
    100%{left:0%}
}


/*SUBTITULO*/
h2{
    padding: 15px;
    text-align: center;
    font-size: 18px;
}
@media only screen and (max-width: 700px){
h2{
     font-size: 8px;
}
}
@media only screen and (max-height: 599px){
h2{
    font-size: 8px;
}
}

h3{
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-top: 15px;
}
@media only screen and (max-width: 700px){
h3{
    font-size: 18px;
}
}
@media only screen and (max-height: 599px){
h3{
    font-size: 18px;
}
}


/*FOTOS E TEXTOS MEIO CELULAR E DESKTOP*/
.content{
    width: 31%;
    margin: 40px auto;
}

.content p{
    font-size: 11px;
}

.content img:hover{
   box-shadow: 0 0 11px rgba(241, 216, 216, 0.795);
   opacity: 0.3;
}

/*LINHA(PARA CELULAR) LINHA2(PARA DESKTOP E TABLET)*/
.linha, .linha2{
    display: flex;
}

.linha img{
    height: 100px;
}
.linha2 img{
    width: 31%;
}

/*BLOCO-MEIO(PARA CELULAR) BLOCO-MEIO1(PARA DESKTOP E TABLET)*/
.bloco-meio, .bloco-meio1{
    text-align: center;
    
}

@media only screen and (min-width: 700px) and (min-height: 600px){
.content img, .content p{
    margin: 10px 0;
    font-size: 18px;
}
}
@media only screen and (min-width: 1000px){
.content img{
    height: 150px;
}
}
@media only screen and (min-width: 1200px){
.content img{
    height: 200px;
}   
}


/*SOBRE NOS*/
.sobre{
    margin: 30px auto;
    text-align: center;
}

.sobre:hover{
    text-decoration: underline;
}

.sobre a{
    font-size: 18px;
    text-align: center;
    color: white;
    background-color: #006837;
    padding: 7px 10px;
    border-radius: 15px 0;
    text-decoration: none;
}

/*FOTO DA TURMA*/
@media only screen and (min-width: 700px) and (min-height: 600px){
#nossa-foto{
    width: 100%;
    margin: 50px auto;
    text-align: center;
}
}
#nossa-foto img{
    width: 100%;
    height: auto;
    border-radius: 30px;
}
@media only screen and (min-width: 1300px){
#nossa-foto img{
    height: 1000px;
    width: 1300px;
}
}

#nossa-foto p{ 
    font-size: 18px;
}

@media only screen and (max-width: 700px) and (min-height: 599px){
#nossa-foto p{
    display: none;
}
}

/*FORMULARIO DE CADASTRO*/
.formulario{
    padding: 20px;
    background-color:#348F0D;
}

.formulario p{
    margin: 15px;
    font-size: 11px;
    color: white;
    text-align: center;
}
@media only screen and (min-width: 700px){
 .formulario p{
    font-size: 18px;
}
}

/*BARRAS DO FORMULARIO DE CADASTRO*/
form div{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
@media only screen and (min-width: 700px){
form div{
    width: 50%;
    margin: 20px auto;
}
}
@media only screen and (min-width: 1100px){
form div{
    width: 30%;
}
}

form input, form textarea{
    overflow: unset;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
}
@media only screen and (min-width: 500px) and (max-height: 500px){
form input{
    padding: 10px 20px;
    font-size: 11px;
}
}

form input[type=submit]{
    background-color: #006837;
    font-size: 18px;
    color: white;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    cursor: pointer;
}


form span{
    color: white;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 11px;
}
@media only screen and (min-width: 700px){
form span, form input{
    font-size: 18px;
}
}


/*RODAPE*/
footer{
    text-align: center;
    background-color:whitesmoke;  
    padding: 20px 0;
}

footer p{
    margin-top: 10px;
}

/*RODAPE LOGOMARCA*/
footer img{
    width: 100px;
    height: 35px;
}
@media only screen and (min-width: 700px) and (min-height: 600px){
footer img {
    width: 300px;
    height: 100px;
}
}