.quadros{ background-color: #EFEFFB; width: 20%; height: 286px ; float: left; margin: 19px ; position: relative;}
.quadros p{	text-align: center;	font: 17px/17px calibri; padding-left: 0px;	padding-top: 5px; margin-bottom: 0px; color: #FFA500;}
.quadros div { border: 1px solid gray; width: 135px; height: 30px; margin: 0 auto; font: 14px/15px Calibri;	padding-top: 6px; color: gray; text-decoration: none;}
.quadros a { text-decoration: none;}
.quadros:hover  p, .quadros:hover { background-color: #FFA500; color: white;}
.quadros:hover div{	color: white ; border: 1px solid white;}


.largurab{ width: 770px; margin: 0 auto; margin-top: 20px;} 
.largurab div{ float: left; width: 50%; border: 0px solid  gray; overflow: hidden;}		
.largurab div.imagem{ width: 40%; float: left; text-align: right; padding: 6px; border: 0px solid  gray; padding-top: 8px; height: 90px;}		
.largurab div.texto h4{font: 20px/22px calibri;}
.largurab div.texto{ width: 60%; float: left; text-align: right; padding-left: 10px; padding-right: 20px; border: 0px solid  gray; padding-top: 0px;}
.largurab div.total{ width: 100%; float: left; text-align: right; padding-right: 20px; border: 0px solid  gray;}
.largurab div.total div { float: right; border: 1px solid #FFA500; width: 100px; height: 30px; margin: 0 auto; font: 14px/15px Calibri;	padding-top: 6px; color: #FFA500; text-decoration: none; text-align: center;}
.largurab div.total div:hover{ float: right; border: 1px solid #FFA500; width: 100px; height: 30px; margin: 0 auto; font: 14px/15px Calibri;	padding-top: 6px; color: white; text-decoration: none; text-align: center; background-color: #FFA500;}
.largurab h3, .largurab p{ margin: 0px;	padding: 2px;}
.largurab p{color: gray;}

.space{min-height: 0px;}

div.slide2{ margin: 0 auto; position: relative; width: 800px; margin-right: 10px;}

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

.largurab{ width: 90% ; margin: 0 auto; } 
.quadros{ width: 30%; min-width: 120px; height: 360px; float: left; margin: 10%; }
div.slide, div.slide2{max-width: 100%;}
}

@media only screen and (max-width: 580px) {
.quadros{ width: 34%; min-width: 120px; height: 320px; float: left; margin: 8%; }
div.slide, div.slide2{max-width: 100%;}
}
@media only screen and (max-width: 430px) {
.quadros{ background-color: #EFEFFB; width: 44%; max-width: 200px; height: 320px; float: left; margin: 3%; }
.quadros p{	text-align: center;	font: 17px/17px calibri; padding-left: 0px;	padding-top: 5px; margin-bottom: 0px; color: #FFA500;}
.quadros div { border: 1px solid gray; width: 90%; height: 30px; margin: 0 auto; font: 14px/15px Calibri;	padding-top: 6px; color: gray; text-decoration: none;}


.largurab{ width: 90% ; margin: 0 auto; } 
.largurab div{ float: left; width: 100%; margin: 0 auto; margin-top: 20px; } 		
.largurab div.imagem{ width: 100%; float: left; padding: 2px; border: 0px solid gray; height: 180px}		
.largurab div.texto{ width: 100%; float: left; padding: 2px;  border: 0px solid gray;}
.largurab div.total{ width: 100%; float: left; padding-right: 0px; text-align: left; border: 0px solid gray;}

.infos{min-height: 60px;}
.space{min-height: 60px;}

div.slide, div.slide2{display: none;}


}
@media only screen and (max-width: 370px) {
.quadros{  height: 280px; }


}