/* LARGURA REAL DOS ELEMENTOS *********************************************************/

*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



/* SEPARA OS ELEMENTOS FLOATS *********************************************************/

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}



/* SEÇÃO *****************************************************************************/


/* BANNER ----------------------------------------*/

.banner{
     margin: 0 auto;
     max-width:1200px;
     width: 100%;
     text-align: left;
     font-size: 70px;
     font-weight: 600;
     letter-spacing: -3px;
     color: #fff;
     text-shadow: 1px 1px 3px #000;
     }

.banner img{
     width: 100%;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     }
	 
.no-banner{
     width: 100%;
	 height: 90px;
     }


/* CONTEÚDO ----------------------------------------*/

.container{
     margin: 0 auto;
     max-width:1200px;
     width: 100%;
     text-align: left;
     padding: 0px 80px;
}

.container h1{
     font-family:'SegoeWP-Semibold', Tahoma;
     font-size: 50px;
     letter-spacing: -3px;
     color: #1e1852;
     line-height: 140%;
     margin: 10px 0px;
     }
	 
.container h2{
     font-size: 20px;
     letter-spacing: -1px;
     color: #1e1852;
     line-height: 120%;
     margin: -20px 0px 20px 0px;
     }

.container2{
     margin: 0 auto;
     max-width:1200px;
     width: 100%;
     text-align: center;
     padding: 80px 60px 0px 60px;
}

.container2 h1{
     font-size: 35px;
     font-weight: 300;
     letter-spacing: -2px;
     line-height: 160%;
     color: #1e1852;
     margin: -10px 0px 0px 0px;
     }

.container-fotos{
     width: 100%;
     text-align: center;
     background: #ededf6;
     border-radius: 20px;
     overflow: auto;
     }

.thumbs{
	 float: left;
     width: 24%;
	 margin: 5px 0.5%;
	 padding-bottom: 5px;
     text-align: center;
	 font-size: 18px;
     font-weight: 300;
     letter-spacing: -1px;
     line-height: 100%;
     color: #1e1852;
	 border: 1px solid #000;
	 border-radius: 5px;
     }

.thumbs-img{
     width:100%;
	 height:160px;
	 margin-bottom: 5px;
	 border-top-left-radius:4px;
	 border-top-right-radius:4px;
     }

.fotos{
     width: 70%;
     margin: 0px auto;
     }

.bt-voltar{
     width: 300px;
     margin: 10px 0px;
     padding: 5px 10px;
     border: 1px solid #1e1852;
     border-radius: 5px;
     font-family:'Open Sans', sans-serif;
     color: #fff;
     font-size: 20px;
     font-weight: 300;
     letter-spacing: -1px;
     background: #1e1852;
     }

.bt-voltar:hover{
     background: #877ec9;
     }


/* NEWSLETTER ----------------------------------------*/

.news{
     clear:both;
     width: 100%;
     padding: 20px;
     border-radius: 10px;
     background: #f8941d;
     text-align: center;
     font-size: 20px;
     letter-spacing: -1px;
     color: #fff;
     margin: 20px 0px;
     }

.news-input{
     width: 160px;
     margin: 3px;
     padding: 3px 10px;
     border: 1px solid #999;
     border-radius: 5px;
     font-family:'Open Sans', sans-serif;
     font-size: 20px;
     font-weight: 300;
     letter-spacing: -1px;
     }
	 
.news-select{
     width: 160px;
     margin: 1px;
     padding: 3px 10px;
     border: 1px solid #999;
     border-radius: 5px;
     font-family:'SegoeWP-Light', Tahoma;
     font-size: 20px;
     letter-spacing: -1px;
	 color: #999;
     }

.bt-enviar{
     width: 120px;
     margin: 3px;
     padding: 3px 10px;
     border: 1px solid #1e1852;
     border-radius: 5px;
     font-family:'Open Sans', sans-serif;
     color: #fff;
     font-size: 20px;
     font-weight: 300;
     letter-spacing: -1px;
     background: #1e1852;
     }

.bt-enviar:hover{
     background: #877ec9;
     }



/***********************************************************************************/
/* MÍDIA QUERIES */
/***********************************************************************************/


/* 1200px – Desktops, notebooks com monitores widescreen --------------------------*/

@media screen and (max-width: 1200px){

}


/* 960px – Tablets no formato paisagem e alguns monitores mais antigos ------------*/

@media screen and (max-width: 1240px){

.banner{
     font-size: 60px;
     }

.no-banner{
	 height: 60px;
     }

.container{
     padding: 0px 30px;
     }
	 
.container h1{
     font-size: 40px;
     letter-spacing: -2px;
     }

.container2 h1{
     margin-top: -35px;
     font-size: 25px;
     }

.thumbs{
	 font-size: 16px;
     }

.thumbs-img{
	 height:135px;
     }

.news{
     margin: 10px 0px;
     }

}


/* 768px – Tablets no formato retrato, como o iPad --------------------------------*/

@media screen and (max-width: 959px){

.no-banner{
	 height: 20px;
     }

.container{
     margin-top: -10px;
     padding: 0px 30px;
     }

.container2{
     padding: 50px 20px 0px 20px;
}

.fotos{
     width: 90%;
     }

.thumbs{
	 height: 145px;
     }

.thumbs-img{
	 height:100px;
     }

.news{
     margin: 20px 0px;
     font-size: 25px;
     line-height: 120%;
     }

.news-input{
     margin: 5px 3px;
     padding: 5px 8px;
     font-size: 18px;
     }

.bt-enviar{
     width: 250px;
     margin: 5px;
     }

}



/* 480px – Smartphones no formato paisagem com tela pequena -----------------------*/

@media screen and (max-width: 767px){

.banner{
     text-align: center;
     }

.no-banner{
	 height: 10px;
     }

.container{
     padding: 0px 10px;
     }
	 
.container h1{
     font-size: 30px;
     letter-spacing: -1px;
     }
	 
.container h2{
     font-size: 16px;
     margin: -15px 0px 15px 0px;
     }

.container2{
     padding: 35px 10px 0px 10px;
}

.fotos{
     width: 90%;
     }
	 
.thumbs{
     width: 32%;
	 height: 120px;
	 margin: 5px 0.5%;
	 }
	 
.thumbs-img{
	 height:75px;
     }

.news{
     font-size: 20px;
     }

.news-input{
     width: 250px;
     }
	 
.news-select{
     width: 250px;
     }

}


/* 320px – Smartphones no formato retrato com tela pequena ------------------------*/

@media screen and (max-width: 479px){

.banner p{
     font-size: 40px;
     margin-top: -80px;
     }

.container2{
     padding: 40px 0px 0px 0px;
}

.container2 h1{
     margin-top: -35px;
     font-size: 22px;
     }

.fotos{
     width: 100%;
     }

.thumbs{
     width: 49%;
	 height: 120px;
	 margin: 5px 0.5%;
	 }
	 
.thumbs-img{
	 height:75px;
     }

.news-input{
     width: 220px;
     }
	 
.news-select{
     width: 220px;
     }

.bt-enviar{
     width: 200px;
     }

.bt-voltar{
     width: 200px;
     }


}