/* estilo geral para diversos dipositivos com resoluções inferiores a width 720px */
body {
	background-color: white;
}

#preloader-imagem{
	background: url('../img/curriculo_ot2.jpg') no-repeat -9999px -9999px;
}

/* estilo para dispositivos mobile com resolução width 720px no minimo (ex.: Lumia 830) */
@media screen and (min-width: 720px) {
	
	body {
		background-color: white;
	}
	
	/* height 1280px (1152px) */
	
	#topo{
		background-color: red;
		height: 115.2px; /* equivale a 10% */ 
	}
	
	#conteudo{
		background-color: green;
		height: 979.2px; /* equivale a 85% */
	}
	
	#rodape{
		background-color: yellow;
		height: 57.6px; /* equivale a 5% */
	}
	
}

/* estilo para desktop com resolução mínima de width 1000px (ex.: resolução de  1024 x 768) */
@media screen and (min-width: 1000px) {
	
	body {
		background-color: white;
	}
	
}

/* estilo para desktop com resolução mínima de width 1280px (ex.: menu monitor) */
@media screen and (min-width: 1280px) {
	
	body {
		background-color: white;
	}
	
	/* height 1024px (921,60px)*/
	
	#topo{
		background-color: #229eff;
		width: 100%;
		height: 90px; /* equivale a 20% */ 
		top: 0;
		left: 0;
		
		position:fixed;
		z-index: 2;
		/*display: none;*/
	}
	
	table{
		width: 1280px;
		
		/*background-color: green;*/
	}
	
	.destaque1{
		color: #666666;
		font-size: 26px;
		/*text-shadow: 2px 2px 5px white;*/
	}
	
	#conteudo{
		/*background-color: pink;*/
		
		background-color: white;
		/*background-image: url('../img/conteudo_d.jpg'); 
		background-repeat: no-repeat;
		background-size: 100%;*/
	
		height: 614.4px; /* equivale a 60% */
		position: absolute;
		margin-top: 100px;
		
		z-index: 1;
	}
	
	.projetos{
		background-color: #fff;
		
		width: 1280px; /*1280px*/
		/*height: 5600px;*/
		
		margin: 0 auto;
	}
	
	/* Início Configurações do slider */
	.swiper-container{
        width: 800px;
        height: 420px;
        padding: 50px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 800px;
        height: 420px;
    }
    .legenda-slider {
		color: white;
		font-size: 14px;
		background-color: rgba(0,0,0,0.6);
		color: rgba(255,255,255,0.7);
		
		/*opacity: 0.6;*/
		
		width: 800px;
		height: 50px;

		/*padding-left: 10px;*/
		/*margin: 0 auto;*/
		position: absolute;
		bottom: 0;
    }
    .legenda-slider a{
    	text-decoration: underline;
    	
    	width: 30px;
    	height: 10px;
    	background-color: rgba(255,255,255,0);
    	
    	transition: background-color 1s;
		-webkit-transition: background-color 1s;
		-moz-transition: background-color 1s;
		-o-transition: background-color 1s;
		-ms-transition: background-color 1s;
    }
    .legenda-slider a:hover{
    	text-decoration: none;
    	background-color: #229eff;
    	font-weight: bold;
    }
    .figura1_slider{
    	background-image: url('../img/projetos/img1.jpg');
    	background-repeat: no-repeat;
    }
    .figura2_slider{
    	background-image: url('../img/projetos/img2.jpg');
    	background-repeat: no-repeat;
    }
    .figura3_slider{
    	background-image: url('../img/projetos/img3.jpg');
    	background-repeat: no-repeat;
    }
    .figura4_slider{
    	background-image: url('../img/projetos/img4.jpg');
    	background-repeat: no-repeat;
    }
    
    /* Fim Configuração do slider */
	
	.bola{
        background-image: url('../img/projetos/circulo_g.png');
        background-repeat: no-repeat;
		background-position: left;
	
		width: 250px;
		height: 250px;
	
		position: relative;
		z-index: 2;
	
		overflow: hidden;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%¨;
		-ms-border-radius: 50%;
    }
    .bola2{
        background-image: url('../img/projetos/circulo_m.png');
        background-repeat: no-repeat;
		background-position: center;
	
		width: 184px;
		height: 184px;
	
		top: 40px;
	
		position: relative;
		z-index: 2;
	
		overflow: hidden;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%¨;
		-ms-border-radius: 50%;
    }
    .bola3{
        background-image: url('../img/projetos/circulo_p.png');
        background-repeat: no-repeat;
		background-position: center;
	
		width: 122px;
		height: 122px;
	
		top: 75px;
	
		position: relative;
		z-index: 2;
	
		overflow: hidden;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%¨;
		-ms-border-radius: 50%;
    }
    
    .retangulo{
		background-color: rgba(0,0,0,0.5);
	
		width: 1280px;
		height: 100px;
	
		top: 85px;
		position: absolute;
		z-index: 1;
    }
    
    .figura1{
		background-image: url('../img/projetos/img1_mini.jpg');
		background-repeat: no-repeat;
		background-position: center;
	
		width: 250px;
		height: 250px;
	
		position: relative;
	
		transition: width 1s;
		-webkit-transition: width 1s;
		-moz-transition: width 1s;
		-o-transition: width 1s;
		-ms-transition: width 1s;
    }
    a:hover .figura1{
		width: 130%;
    }	
    			 	
    .figura2{
		background-image: url('../img/projetos/img2_mini.jpg');
		background-repeat: no-repeat;
		background-position: center;
	
		width: 184px;
		height: 184px;
	
		position: relative;
	
		transition: width 1s;
		-webkit-transition: width 1s;
		-moz-transition: width 1s;
		-o-transition: width 1s;
		-ms-transition: width 1s;
    }
    a:hover .figura2{
		width: 130%;
    }
    	
    .figura3{
		background-image: url('../img/projetos/img3_mini.jpg');
		background-repeat: no-repeat;
		background-position: center;
	
		width: 122px;
		height: 122px;
	
		position: relative;
		transition: width 1s;
		-webkit-transition: width 1s;
		-moz-transition: width 1s;
		-o-transition: width 1s;
		-ms-transition: width 1s;
    }
    a:hover .figura3{
		width: 130%;
    }	
    
    .figura4{
		background-image: url('../img/projetos/img4_mini.jpg');
		background-repeat: no-repeat;
		background-position: center;
	
		width: 122px;
		height: 122px;
	
		position: relative;
		transition: width 1s;
		-webkit-transition: width 1s;
		-moz-transition: width 1s;
		-o-transition: width 1s;
		-ms-transition: width 1s;
    }
    a:hover .figura4{
		width: 130%;
    }
    
	.texto_chamada{
		text-align: right;
		
		height: 256px;
		
		top: 30px;
		position: absolute;
		z-index: 2;
    }
    h1{
		font-size: 30px;
		font-family: Arial, Helvetica, sans-serif;
    }
    h2{
		color: #fff;
		font-size: 14px;
		font-family: Arial, Helvetica, sans-serif;
		/*padding-top: 10px;*/
    }
    
    a h3{
		display: none;
    }
    a:hover h3{
		display: block;
		text-align: center;
		font-size: 14px;
		color: white;
		padding-top: 20px;
	
		width: 250px;
		height: 40px;
		background-color: rgba(0,0,0,0.6);
	
		position: absolute;
		top: 95px;
    }
    
    a h4{
		display: none;
    }
    a:hover h4{
		display: block;
		text-align: center;
		font-size: 14px;
		color: white;
		padding-top: 20px;
	
		width: 184px;
		height: 40px;
		background-color: rgba(0,0,0,0.6);
	
		position: absolute;
		top: 50px;
    }
    
    a h5{
		display: none;
    }
    a:hover h5{
		display: block;
		text-align: center;
		font-size: 14px;
		color: white;
		padding-top: 20px;
	
		width: 122px;
		height: 40px;
		background-color: rgba(0,0,0,0.6);
	
		position: absolute;
		top: 10px;
    }
	
	#rodape{
		/*background-color: white;*/
		width: 100%;
		height: 102.4px; /* equivale a 10% */
		/*position: relative;*/
		
		
		/*bottom: 0;*/
		position: relative;
		z-index: 2;
	}
	
	.faixa{
		width: 100%;
		height: 40px;
		background-color: #6a6869;
		
		/*position: absolute;*/
		/*top: 30%;*/

	}
	
	.texto-rodape{
		font-size: 12px;
		text-align: center;
		color: white;
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		
		margin-top: 12px;
		padding-top: 14px;

	}
	

}

/* estilo para tv com resolução mínima de width 1900px (ex.: resolução de  1980 x 1080 - Wide) */
@media screen and (min-width: 1900px) {
	
	body {
		background-color: white;
	}
	
}