@charset "utf-8";


/*ESTA FOLHA DE STYLES É APENAS PARA O SLIDER DAS 3 FOTOS E DO BANER DA PAGINA INDEX.HTML*/




#slider {

    background-color: #ffffff;
    width: 100%; /* important to be same as image width */
    padding-top: 26%; /*afasta o a DIV das 3 imagens do topo para nãoficar debaixo das duas primeiras*/
    position: relative; /*important */
    overflow: hidden; /* important */
    text-align:left;
}

#sliderContent {
    width: 100%; /* important to be same as image width or wider */
    position: absolute; /*ABSOLUTE para que o se posicionar dentro do SLIDE PAI*/
	top: 0;
}

.sliderImage { /*DIV pai e contentor das 3 fotos*/
    width: 100%;
    height: auto;
    position: relative; /*RELATIVE para a SPANse posicionar no seu interior*/
    display:none;
    
}

.sliderImage img{ 

    width: 100%;
    height: auto;
    object-fit: cover; /*Obriga as 3 imagens do slider a ocupar a totalidade da div pai*/
	border-radius: 10px;	
}

.sliderImage span {

    position:absolute;
    top:0; /* ajusta a caixa do baner ao topo da div pai*/
    right: 1.1%; /* ajusta a caixa do baner da margem direita da div pai*/
    padding: 0.9%; /* relativo à letra da lista que está no slider distancia do bordo inicial*/
    width: 23%;  /* This is the width of the caption box  */
	height:90%; /* This is the height of the caption box  */

    background-color: #000;  /* This sets the background color of the semi transparent box */
    /* If you do not want the transparent content field to appear, change all opacity values to 0 */
	filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7;
	font-family:Arial, Helvetica, sans-serif;
	/*font-size:0.7rem;   - as dimensões da fonte estão definidas na media query abaixo*/ 
	line-height:150%;
    color: #fff; /* This is the color of the text in the caption box */
    display: none;
    border-radius: 8px;
   
    
}

.sliderImage span h3 { 
    color:#cb6614;  /* This is the color of the title text in the caption box */
    /*font-size: 1.2rem;  - Está defenia o tamanho da fonte nas media query abaixo - This is the font size of the title text in the caption box */
    line-height:200%; /* Aqui permite subir os titulos do slider mais para cima*/
    background-color: #ffffff;
    text-align: center;
    border-radius: 5px;
}

.clear { clear: both; }


#slider ul 		{ list-style-type: none;}
#slider ul li 	{ margin-left:0px; }


/*#############  @MEDIA QUERY ######################################################*/



@media(max-width:600px) {

    /* styles para o SLIDER */
    .sliderImage span{font-size: 0.28rem;}
    .sliderImage span h3{font-size: 0.5rem;}
}

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

    /* styles para o SLIDER */
    .sliderImage span{font-size: 0.405rem;}
    .sliderImage span h3{font-size: 0.75rem;}
 }

 @media(min-width:768px) and (max-width:1023px) {

    /* styles para o SLIDER */
    .sliderImage span{font-size: 0.534rem;}
    .sliderImage span h3{font-size: 1rem;}
 }

 @media(min-width:1024px) and (max-width:1279px) {

    /* styles para o SLIDER */
    .sliderImage span{font-size: 0.718rem;}
    .sliderImage span h3{font-size: 1.3rem;}
 }

    @media (min-width:1280px) {
    
    /* styles para o SLIDER */
    .sliderImage span{font-size: 0.91rem;}
    .sliderImage span h3{font-size: 1.5rem;}
 }