@charset "utf-8";
/* CSS Document */

/*BOTÃO FLIPER 3D*/
/*Cont1*/
.flip-container {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipper {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switch{display: none; }/*Muda Div aqui*/
#switch:checked ~ .flip-container .flipper {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont2*/
.flip-containerDois {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperDois {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchDois{display: none; }/*Muda Div aqui*/
#switchDois:checked ~ .flip-containerDois .flipperDois {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont3*/
.flip-containerTres {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperTres {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchTres{display: none; }/*Muda Div aqui*/
#switchTres:checked ~ .flip-containerTres .flipperTres {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont4*/
.flip-containerQuatro {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperQuatro {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchQuatro{display: none; }/*Muda Div aqui*/
#switchQuatro:checked ~ .flip-containerQuatro .flipperQuatro {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont5*/
.flip-containerCinco {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperCinco {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchCinco{display: none; }/*Muda Div aqui*/
#switchCinco:checked ~ .flip-containerCinco .flipperCinco {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont6*/
.flip-containerSeis {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperSeis {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchSeis{display: none; }/*Muda Div aqui*/
#switchSeis:checked ~ .flip-containerSeis .flipperSeis {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont7*/
.flip-containerSete {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperSete {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchSete{display: none; }/*Muda Div aqui*/
#switchSete:checked ~ .flip-containerSete .flipperSete {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

/*Cont8*/
.flip-containerOito {width:24%; height:24%; perspective:1500px; float:left; margin-bottom:1%; margin-right:1%;}/*Muda Div aqui, Tamanho da div*/
.flipperOito {width:100%; height:100%; position:relative; transition:transform 0.8s; transform-style:preserve-3d;}/*Muda Div aqui*, velocidade do giro*/
#switchOito{display: none; }/*Muda Div aqui*/
#switchOito:checked ~ .flip-containerOito .flipperOito {transform: rotateY(180deg);}/*Muda Div aqui*/
.front{width:100%; height:100%; position:absolute; backface-visibility:hidden; z-index:999;} /*sempre a frente z-index*/
.back {transform: rotateY(180deg);}

@media(max-width:1175px){
	.flip-container,
	.flip-containerDois,
	.flip-containerTres,
	.flip-containerQuatro,
	.flip-containerCinco,
	.flip-containerSeis,
	.flip-containerSete,
	.flip-containerOito
	{ width:49%;}}
@media(max-width:600px){
	.flip-container,
	.flip-containerDois,
	.flip-containerTres,
	.flip-containerQuatro,
	.flip-containerCinco,
	.flip-containerSeis,
	.flip-containerSete,
	.flip-containerOito
	{ width:99%;}}	

/*Conteudo BUT Fliper*/
.frenteAzul{ 
	width:100%;
	height:100%;
	float:left;
	padding-top:50%; 
	padding-bottom:50%;
	cursor:pointer;
	background:#0094d9;
	border-radius:15px;
	position:relative;
	border:0.5px solid #0094d9;
	}
.BkbutCinza{ 
	width:100%;
	height:100%;
	float:left;
	padding-top:50%; 
	padding-bottom:50%;
	cursor:pointer;
	background:#F1F1F2;
	border-radius:15px;
	position:relative;
	}	
.IcoServico{
	width:120px; height:120px;
	position:absolute; top:50%; left:50%; 
	margin-top:-70px;
	margin-left:-60px;
	}
.TitleServico{
	width:100%; height:auto;
	position:absolute; bottom:0;
	padding-bottom:15px;
	font-family:'Baloo 2',Arial, Helvetica, sans-serif; font-size:24px; font-weight:700; text-align:center; color:#FFF; line-height:27px;
	}
.BtFecharServ{
	width:40px; height:40px;
	position:absolute; top:0; right:0;
	}	
.TXTServico{ 
	width:200px; height:200px;
	position:absolute; top:50%; left:50%;
	margin-top:-100px;
	margin-left:-100px;
	font-family:'Baloo 2',Arial, Helvetica, sans-serif; font-size:18px; font-weight:400; text-align: center; color:#002565; line-height:20px;
	}			
/*final BOTÃO FLIPER 3D*/