body{
	font-family: Calibri, Helvetica, sans-serif;
	/*background-color:#ffffff;*/
	
	border: 0px;
	padding: 0px;
	margin: 0px;
	
	font-size:14;
	/*background-color:#fff000;*/
}

#pagina{
	position:fixed;
	width:100%;
	height:100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}

.pagina{
	position:relative;
	width:100%;
	float:left;
}

.conteudo{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	display: flex;
	flex-wrap: wrap;
}

.titulo-secao{
	width:100%;
	font-size:30;
	letter-spacing:2px;
	color:#4f4f4f;
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;
	padding-bottom:40px;
	padding-top:40px;
	letter-spacing:2px;
}

/*-------------------------------------- PAGINA 1 - PRINCIPAL --------------------------------------*/

#cabecalho{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	width:100%;
	z-index:5;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cabecalho-fixed{
	height:160px;
	background: rgba(102,0,255,0.5);
	background: -moz-linear-gradient(top, rgba(102,0,255,0.5) 0%, rgba(102,0,255,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,0,255,0.5)), color-stop(100%, rgba(102,0,255,0)));
	background: -webkit-linear-gradient(top, rgba(102,0,255,0.5) 0%, rgba(102,0,255,0) 100%);
	background: -o-linear-gradient(top, rgba(102,0,255,0.5) 0%, rgba(102,0,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(102,0,255,0.5) 0%, rgba(102,0,255,0) 100%);
	background: linear-gradient(to bottom, rgba(102,0,255,0.5) 0%, rgba(102,0,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6600ff', endColorstr='#6600ff', GradientType=0 );
}
.cabecalho-shrink{
	height:70px;
	background-color:#4f4f4f;
}

#logo{
	background-image: url("img/logo.png");
	background-size: 200px auto;
	height:66px;
	width:200px;
	background-repeat:no-repeat;
	background-position:center center;
	position:relative;
	float:left;
	margin-left:auto;
	margin-right:auto;
	flex-grow: 1;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.logo-fixed{
	background-size:auto 66px;
	margin-top:10px;
}
.logo-shrink{
	background-size:auto 50px;
	margin-top:1px;
}

#menu{
	display:none;
	position:relative;
	float:right;
	margin-top:25px;
	color:#ffffff;
	font-weight:bold;
	text-transform:uppercase;
	font-weight: lighter;
}

#menu-icon{
	position:relative;
	float:right;
	margin-top: 15px;
	margin-right:20px;
	background-image: url("img/icones/menu.png");
	height:40px;
	width:40px;
	cursor:pointer;
}

#menu-mobile{
	height:0px;
	position:fixed;
	top:0px;
	width:100%;
	background-color:#4f4f4f;	
	font-weight:bold;
	padding-top:0px;
	text-transform:uppercase;
	font-weight: lighter;
}

.menu-mobile{
	display:none;
	opacity: 0;
	position:relative;
	width:100%;
	float:left;
	font-size:13;
	cursor:pointer;
	letter-spacing:2px;
	color:#ffffff;
	
	padding:10px 0px 10px 30px;
}

.menu-mobile:hover{
	background: -webkit-linear-gradient(top, #33ff99, #ccff00);
	color:#4f4f4f;
}

#fechar-menu-mobile{
	opacity: 0;
	background-image: url("img/icones/close-menu.png");
	height:40px;
	width:40px;
}

.menu{
	position:relative;
	float:left;
	font-size:13;
	cursor:pointer;
	letter-spacing:2px;
}

.menu:hover{
	color:#CCFF00;
}

#pagina1{
	height:430px;
	overflow-x: hidden;
	overflow-y: hidden;
}

#box-video{
	display:none;
	position:absolute;
	width:300%;
	left:-100%;
	background-color:#dddddd;
	height:300%;
	top:-100%;
	/*display: flex;*/
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#box-imagem{
	background-color:#f0f0f0;
	top:0px;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	background-image: url("img/cabecalho.jpg");
	background-size:cover;
	background-position:right center;
}

#video{
    width: auto;
    height: 34%;
}

/*-------------------------------------- PAGINA 2 - SERVIÇOS --------------------------------------*/

#pagina2{}

#conteudo-2{
	padding-bottom:80px;
}

.servico{
	width:100%;
	margin-bottom:60px;
}

.titulo{
	color:#4f4f4f;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:2px;
	font-size:20;
	text-align:center;
	line-height:1;
	margin:0px;
	margin-top:22px;
}

.paragrafo{
	color:#4f4f4f;
	text-align:center;
	line-height:1.3;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	margin-top:20px;
	margin-bottom:0px;
}

.icone-servico{
	height:60px;
	width:60px;
	padding:20px;
	border-radius:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:0px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	/*background: -webkit-linear-gradient(top, #6600ff, #33ff99);*/
	/*background: -webkit-linear-gradient(top, #6600ff, #ff6600);*/
	/*background: -webkit-linear-gradient(top, #6600ff, #ccff00);*/
	/*background: -webkit-linear-gradient(top, #33ff99, #ccff00);*/
}

.icone-servico:hover{
	padding:25px;
	margin-top:0px;
	margin-bottom:-5px;
}

/*
ROXO 6600ff
AZUL 33ff99
VERDE ccff00
LARANJA ff6600
*/

/*-------------------------------------- PAGINA 3 - LOCALIZAÇÃO --------------------------------------*/

#pagina3{
	background-color:#dddddd;
	height:600px;
}

#conteudo-3{
	flex-direction:row-reverse;
}

.overlay {
   position:absolute;
   z-index:2;
   width:100%;
   height:600px;
}

#mapa{
	border:0;
	background-color:#dddddd;
}

#box{
	color:#4f4f4f;
	padding: 30px;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	font-size:14;
	text-align:center;
	line-height:1.3;
}

#titulo-box{
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:2px;
}

#logo-escola{
	margin:30px 0px 10px 0px;
	background-image: url("img/extreme_kite_point.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	width:200px;
	height:60px;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

/*-------------------------------------- PAGINA 4 - GALERIA --------------------------------------*/

#pagina4{
	padding-bottom: 100px;
}

.conteudo-4{
	justify-content:left;
}

.imagem{
	width:100%;
	height:300px;
	float:left;
	cursor:pointer;
	background-color:#f0f0f0;
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	webkit-transition: background-size 300ms ease;
    -moz-transition: background-size 300ms ease;
    -o-transition: background-size 300ms ease;
    -ms-transition: background-size 300ms ease;
    transition: background-size 300ms ease;
}

.conteudo-imagem-filtro{
	position:absolute;
	z-index:3 !important;
	left:0px;
	top:117px;
	/*background-color:#00ff00;*/
	width:100%;
	/*margin-left:0px;
	margin-right:0px;*/
	
	
}

/*.conteudo-imagem{
	position:absolute;
	z-index:3;
	left:50%;
	margin-left:0px;
	margin-right:0px;
}*/

.imagem-filtro{
	/*background: -webkit-linear-gradient(top, #33ff99, #6600ff);*/
	background: rgba(51,255,153,0.8);
	background: -moz-linear-gradient(top, rgba(51,255,153,0.8) 0%, rgba(102,0,255,0.8) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(51,255,153,0.8)), color-stop(100%, rgba(102,0,255,0.8)));
	background: -webkit-linear-gradient(top, rgba(51,255,153,0.8) 0%, rgba(102,0,255,0.8) 100%);
	background: -o-linear-gradient(top, rgba(51,255,153,0.8) 0%, rgba(102,0,255,0.8) 100%);
	background: -ms-linear-gradient(top, rgba(51,255,153,0.8) 0%, rgba(102,0,255,0.8) 100%);
	background: linear-gradient(to bottom, rgba(51,255,153,0.8) 0%, rgba(102,0,255,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ff99', endColorstr='#6600ff', GradientType=0 );
	
	/*background-color: rgba(0,0,0,.7);*/
	opacity:0;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.imagem-filtro:hover{
	opacity:1;
}

.icon-zoom{
	width:70px;
	height:70px;
	background-image: url("img/icones/icon-lupa.png");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	/*padding:10px;
	border-radius:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:80px;*/
	cursor:pointer;
	/*opacity:1;*/
}

.legenda{
	padding:16px 30px 0px 30px;
	color:#ffffff;
	font-size:13;
	text-align:center;
	/*font-family:Calibri;*/	
}

/*-------------------------------------- PAGINA 5 - INTEGRANTES --------------------------------------*/

#pagina5{
	/*background-color:#00ff00;*/
	/*height:30px;*/
}

#conteudo-5{
	justify-content:center;
	padding-bottom:80px;
}

.integrante{
	width:100%;
	/*background-color:#ff0000;*/
	/*margin-top:40px;*/
}

.foto-integrante{
	height:100px;
	width:100px;
	padding:20px;
	border-radius:50%;
	background-color:#f0f0f0;
	margin-left:auto;
	margin-right:auto;
	
	margin-top:35px;
	margin-bottom:0px;
	
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.foto-integrante:hover{
	height:110px;
	width:110px;
	
	margin-top:30px;
	margin-bottom:-5px;
}

/*-------------------------------------- PAGINA 6 - CONTATO --------------------------------------*/

#pagina6{
	/*background-color:#0000ff;*/
	/*height:30px;*/
	background-image: url("img/contact.jpg");
	/*background-image: url("img/parallax.png");*/
	background-repeat:no-repeat;
	background-position:center bottom;
	/*background-size:100% auto;*/
	background-size: cover;
	background-color:#dddddd;
}

#conteudo-6{
	flex-direction:row-reverse;
	/*padding-top:30px;*/
	padding-bottom:140px;
	padding-top:100px;
	justify-content:center;
}

#formulario{
	color:#ffffff;
	display: flex;
	flex-wrap: wrap;
	flex-direction:column;
	align-items:center;
	width:90%;
	margin-left:5%;
	margin-right:5%;
}

#formulario-2{
	display: flex;
	flex-wrap: wrap;
	width:100%;
	justify-content:center;
	height:auto;
	justify-content:space-between;
}

.coluna-formulario{
	position:relative;
	height:auto;
	width:100%;
}

.coluna-formulario-2{
	/*position:relative;*/
	/*height:auto;*/
	width:100%;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction:column;
}

.contato{
	padding: 10px;
	border: 2px solid #ffffff;
	border-radius:6px;
	margin-bottom:10px;
	color:#999999;
	font-size:14;
	font-family:Calibri, Helvetica, sans-serif;
	text-transform: uppercase;
}

#botao{
	float:right;
	margin-right:30px;
	width:60px;
}

#botao-fotos{
	margin-left:auto;
	margin-right:auto;
	margin-top: 50px;
}

.invisible {
	transition: opacity 0.5s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}

.botao{
	position:relative;
	background: -webkit-linear-gradient(top, #ccff00, #33ff99);
	/*background: -webkit-linear-gradient(top, #ccff00, #33ff99);*/
	/*background-color:#ccff00;*/
	color:#4f4f4f;
	/*height:30px;*/
	padding: 10px 30px 10px 30px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	border-radius:30px;
	
	-webkit-box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);
	-moz-box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);
	box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);
	
	/*-webkit-box-shadow: 9px 10px 28px -10px rgba(102,0,255,1);
	-moz-box-shadow: 9px 10px 28px -10px rgba(102,0,255,1);
	box-shadow: 9px 10px 28px -10px rgba(102,0,255,1);*/
}
.botao:hover{color:#ffffff;}

#carregando{
	width:auto;
	position:relative;
	float:right;
	margin-right:30px;
	/*background-color:#ff0000;*/
}

/*-------------------------------------- PAGINA 7 - RODAPÉ --------------------------------------*/

#pagina7{
	background-color:#4f4f4f;
	padding-top:20px;
	
	/*align-items:center;*/
	/*padding-top:14px;
	padding-bottom:14px;*/
	
/*background: rgba(76,76,76,1);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 23%, rgba(102,102,102,1) 53%, rgba(71,71,71,1) 80%, rgba(54,54,54,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(23%, rgba(89,89,89,1)), color-stop(53%, rgba(102,102,102,1)), color-stop(80%, rgba(71,71,71,1)), color-stop(100%, rgba(54,54,54,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 23%, rgba(102,102,102,1) 53%, rgba(71,71,71,1) 80%, rgba(54,54,54,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 23%, rgba(102,102,102,1) 53%, rgba(71,71,71,1) 80%, rgba(54,54,54,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 23%, rgba(102,102,102,1) 53%, rgba(71,71,71,1) 80%, rgba(54,54,54,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 23%, rgba(102,102,102,1) 53%, rgba(71,71,71,1) 80%, rgba(54,54,54,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#363636', GradientType=0 );*/
}

#conteudo-7{
	color:#ffffff;
	/*height:30px;*/
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	
	/*background-color:#f0f0f0;*/
}

.coluna-rodape{
	width:100%;
}

#logo-rodape{
	background-image: url("img/logo-rodape.png");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:180px auto;
	/*background-color:#ff0000;*/
	height:55px;
	width:180px;
	margin-left:0px;
	margin-bottom:20px;
	/*margin-top:1px;
	margin-left:30px;
	flex-grow: 1;*/
}

#texto-rodape{
	margin-top:0px;
	padding-top:0px;
	margin-bottom:20px;
}

#redes-sociais{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width:200px;
	margin-bottom:20px;
}

.icon-social{
	/*position:relative;
	float:left;*/
	/*margin-left:20px;*/
	margin-top:5px;
	width:40px;
	height:40px;
	background-size:40px 40px;
	background-position:center center;
	cursor:pointer;
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	
	/*-webkit-box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);
	-moz-box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);
	box-shadow: 9px 10px 28px -10px rgba(0,0,0,0.5);*/
}

.icon-social:hover{
	width:50px;
	height:50px;
	background-size:50px 50px;
	margin-top:0px;
}

/*-------------------------------------- MEDIA --------------------------------------*/

@media only screen and (min-width: 600px){
	.conteudo{
		width:600px;
	}
	
	/* GALERIA */
	.imagem{
		width:100%;
		height:450px;
		
		background-size: 100% auto;
	}
	.imagem:hover{
		background-size: 105% auto;
	}
	
	.conteudo-imagem-filtro{
		left:50%;
		margin-left:-300px;
	}
	
	/*RODAPE*/
	#redes-sociais{width:200px;}
}

@media only screen and (min-width: 700px){
	/*CONTATO*/
	
	#formulario{
		width:600px;
	}

	#formulario-2{
		display: flex;
		flex-wrap: wrap;
		width:100%;
		justify-content:center;
		height:auto;
		justify-content:space-between;
	}

	.coluna-formulario{
		padding-left:0px;
		padding-right:0px;
	}
	
	.contato{
		padding:12px;
		border-radius:6px;
		border:0px;
		margin-bottom:10px;
		width:100%;
	}

	#botao{
		position:relative;
		float:right;
		margin-right:0px;
	}
	#botao:hover{color:#ffffff;}
}

@media only screen and (min-width: 800px){
	.conteudo{
		width:800px;
	}

	#menu{ display:block; }
	#menu-icon{ display:none; }
	.menu{
		margin-right:30px;
	}
	
	#logo{
		background-position:left center;
		margin-left:30px;
	}
	
	/* VIDEO */
	#video{
		width: 34%;
		height: auto;
	}
	#box-video{display:flex !important;}
	#box-imagem{display:none !important;}
	
	/* SERVIÇOS */
	.servico{
		width:50%;
	}
	
	/* GALERIA */
	.conteudo-imagem-filtro{
		left:50%;
		margin-left:-400px;
	}
	.imagem{
		width:50%;
		background-size:auto 100%;
	}
	.imagem:hover{
		background-size:auto 105%;
	}
	.imagem-filtro{
		width:50%;
	}
	
	/*CONTATO*/
	.coluna-formulario-2{
		width:280px;
	}

	/* INTEGRANTES*/
	.integrante{
		width:33.33%;
	}
	
	/*RODAPE*/
	#texto-rodape{padding-top:6px; padding-left:19px; padding-right:19px;}
}

@media only screen and (min-width: 900px){	
	/* RODAPE */
	#conteudo-7{justify-content:space-between;}
	.coluna-rodape{width:auto;}
	#redes-sociais{width:160px;}
	/*#texto-rodape{padding-bottom:0px;}*/
}

@media only screen and (min-width: 1000px){
	.conteudo{
		width:1000px;
	}
	
	#pagina1{
		height:560px;
	}
	
	/* SERVIÇOS */
	.servico{
		width:33.33%;
	}
	.paragrafo{
		width:250px;
	}
	
	/* LOCALIZAÇÃO */
	/*#box{
		color:#4f4f4f;
		background-color:#ffffff;

		margin:140px 30px 40px auto;
		width:25%;
		position:absolute;
		z-index:3;
	}*/

	
	/*#logo-escola{
		width:200px;
		height:60px;
		padding:0px;
	}*/
	
	/* GALERIA */
	.conteudo-imagem-filtro{
		left:50%;
		margin-left:-500px;
	}
	.imagem{
		width:33.33%;	
	}
	
	.imagem-filtro{
		width:33.33%;
	}
	
	/*RODAPE*/
	#redes-sociais{width:200px;}
}

@media only screen and (min-width: 1200px){
	.conteudo{
		width:1200px;
	}
	
	/* SERVIÇOS */
	.paragrafo{
		width:330px;
	}
	
	/* GALERIA */
	.conteudo-imagem-filtro{
		left:50%;
		margin-left:-600px;
	}
	
	/* INTEGRANTES*/
	.foto-integrante{
		width:160px;
		height:160px;
	}
	.foto-integrante:hover{
		height:170px;
		width:170px;
	
		margin-top:30px;
		margin-bottom:-5px;
	}
	
	.texto-rodape{
		color:#ffffff;
		
	}
}