body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}

#wrapper {
width:100%;
height:calc(100% - 100px);
position:absolute;
top:100px;left:0;
overflow-y:auto;
overflow-x:hidden;
z-index: 0;
}


#mask {
	width:100%;
	height:800%;
	overflow:hidden;
}

.item {
	width:100%;
	height:12.5%;
	display:block;
	margin-left: auto;
	overflow-x:hidden;
	overflow-y:auto; 
	
}	


.content {
	width:100%;
	height:100%;
	top:0px;
	margin:0 auto;
	background-color:#aaa;
	position:relative;
	display:block;
	overflow: hidden;
	text-align: center;
}

.content img {
	width:auto;
	height:100%;
	position: relative;
	margin:0 auto;
}	


.selected {
	font-weight:700;
}

.item1{background-image: url(../img/fquienessomos.jpg); background-position: center;}
.item2{background-image: url(../img/fservicios.jpg); background-position: center;}
.item3{background-image: url(../img/fhome.jpg); background-position: center;}
.item4{background-color: white; }
.item5{background-color: white; }

.item2-1{background-image: url(../img/campeonatos.jpg); background-position: center;}
.item2-2{background-image: url(../img/jornadas.jpg); background-position: center;}
.item2-3{background-image: url(../img/marketing.jpg); background-position: center;}

.header-svg { position:relative; top:0%; width:100%; height:15%;}
.container_svg{ position:absolute; top:0%; width:100%; height:100%; z-index:0;}
.container_text{ position:absolute; top:5%; width:100%; height:66%; z-index: 1;
					text-align: center; vertical-align: middle; color: white; font-family:"Century Gothic"; font-weight: bold; font-size: 18pt; }
.container_text span{  margin: 2% auto; display: inline-block;}

.text-blue{ color:#116690; }



input:invalid {
 border-bottom: 3px solid red;
 background: #000;
 box-shadow: 0 0 10px 0 red;
 color: #888;
}


/*****************************************         Quienes Somos: ***********************************************************/ 
.quienes_somos{
	width: 55%;
	height: auto;
	position: relative;
	background-color: black;
	padding: 1%;
	margin: auto;
	margin-top: 30%;
	opacity: 0.85;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 3px 3px 3px #111;
	-moz-box-shadow: 3px 3px 3px #111;
	box-shadow: 3px 3px 3px #111;

}
.quienes_somos span{
	font: 12pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: white;
}

/*****************************************         PRINCIPAL ***********************************************************/ 
.principal{
	width: 55%;
	height: auto;
	position: relative;
	background-color: black;
	padding: 1%;
	margin: auto;
	opacity: 0.85;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 3px 3px 3px #111;
	-moz-box-shadow: 3px 3px 3px #111;
	box-shadow: 3px 3px 3px #111;
	top:65%;

}
.principal span{
	font: 20pt 'Century Gothic Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: white;
	display: block;
}


/*****************************************    Formulario:       ***********************************************************/ 

.formulario { position:relative; width: 70%; height: 70%; color:#006690; 
				font-family: "Century Gothic"; font-size: 14pt; margin: 0 auto; text-align: center;  }
.formulario form { height: 100%;}
.form-header{ position:relative; width: 60%; height: 20%;  margin: auto; 
				border-bottom: #006690 2px solid; text-align: center; vertical-align: bottom;}
.form-header1 {  position: absolute; bottom: 10px; width: 100%;}

.form-line{ position: relative; width: 100%; height: 17%;}
.form-line1{ 	position:relative; float:left; width: 30%; text-align: left; border: white 1px solid; 
				box-sizing:border-box; display:block;  margin-left: 1%; margin-right: 1%; height: 100%; vertical-align: bottom; } 
.form-line1 label{ 	width: 50px;  margin: 0px;} 
.form-line1 span{ padding: auto 10px; vertical-align: bottom; vertical-align: text-bottom; margin-top: 20px; display: block;}
.form-line1 input{ background-color: transparent; border-style: none; border-bottom: #006690 1px solid; width:75%; position: absolute;
	right: 0px; bottom: 0px; height: 25px; font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%;    }

.form-line2{ 	position:relative; float:left; width: 98%; text-align: left; border: white 1px solid; 
				box-sizing:border-box; display:block;  margin-left: 1%; margin-right: 1%; height: 100%; vertical-align: bottom;} 
.form-line2 label{ 	width: 50px;  margin: 0px;} 
.form-line2 span{ padding: auto 10px; vertical-align: bottom; vertical-align: text-bottom; margin-top: 18px; display: block;}
.form-line2 input{ border-style:none; border-bottom: #006690 1px solid; width:88%; position: absolute; background-color: transparent;
					right: 0px; bottom: 0px; height: 25px; font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;  height: 100%;}

.form-line3{ 	position:relative; float:left; width: 98%; text-align: left; border: white 1px solid; 
				box-sizing:border-box; display:block;  margin-left: 1%; margin-right: 1%; height: 100%;} 
.form-line3 input{ border-style:none; border-bottom: #006690 1px solid; width:100%; position: absolute;
					right: 0px; bottom: 0px; height: 25px; font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%;}

.form-button { width: 94%; height: 27%; margin: 0 auto; }
.form-button-enviar { border: #006690 1px solid; width: 60px; height: 60px;  position: absolute; bottom: 17px; 
			background-color: transparent; margin: 0 46%; 
			    -ms-transform: rotate(45deg); /* IE 9 */
    			-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    			transform: rotate(45deg); }					
.form-button input[type='submit']{ z-index:2; border: #006690 1px solid; width: 60px; height: 60px; bottom: 0px; 
			background-color: transparent; margin: auto; color: transparent; cursor:pointer; cursor: hand; }		
.form-button-txt { z-index:1; position: absolute; left: 8px; top: 25px;  font: 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #116690; cursor:pointer; cursor: hand; 
			    -ms-transform: rotate(-45deg); /* IE 9 */
    			-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    			transform: rotate(-45deg); }

.contactos { border-top: #116690 2px solid; width: 96%; padding-top:3px; text-align: center; height: auto; position: relative; vertical-align: top;
				font: 12pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #116690; margin: 8px auto 0 auto; }
.contactos img { margin: 0 5px; }
.social { width: 100%; text-align: center; height: auto; position: relative; vertical-align: top; margin: 0px auto;}
.social img { margin: 0 20px; }

/*Pagina de Servicios */
.servicios{ 
	width: 75%; 
	text-align: center;
	margin: 8% auto;
}
.servicios-img{ 
	width:33%; 
	position: relative;
	float: left;
}
.servicios-img img {
	position: relative;
	width:70%;
	height: auto;
}
.servicios-img img:hover{
		width:72%;
		cursor: pointer; cursor: hand;
}
.servicios a{
	font: 12pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: white;
	display: inline-block;
	width: 55%;
	margin-top: 10px;
	text-decoration:none;
}
.servicios a:hover{
	cursor: pointer; cursor: hand;
	font-weight: bold;
}

/*Pagina de Servicios - Paginas independientes*/
.servicios-container{
	height: 100%;
	margin: auto;
	width: 88%;
}
.servicios-rombo{	
	float: left;
	height: 61%;
	margin: 3% 2% 0% 2%; 
	position: relative;
	width: 40%;
}
.servicios-rombo img{
	height: auto;
	position: relative;
	width: 86%;
}
.servicios-detalle{ 	
	float: left;
	height: 61%;
	margin: 3% 2% 0% 2%; 
	position: relative;
	width: 45%;
}
.servicios-texto{ 	
	float: left;
	height: 35%;
	position: relative;
	width: 100%;
}
.servicios-texto span{
	display: block;
	width: 87%;
	float: right;
	text-align: right;
}
.servicios-tipos{
	position: relative;
	float: left;
	bottom: 0px;
	width: 100%;
	margin-top: 4%;
}
.tipos3{
	position: relative;
	float:left;
	width: 33%;
}
.tipos3 img{
	width: 80%;
	height: auto;
}
.tipos3 span{
	width: 100%;
	display: block;
	position: relative;
	float: left;
	font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: white;
	margin-top: 1% auto;
	font-size: 10pt;
}

.tipos2{
	position: relative;
	width: 30%;
	margin: 0% 3%;
	display: inline-block;
}
.tipos2 img{
	width: 100%;
	height: auto;
;
}
.tipos2 span{
	width: 100%;
	display: block;
	position: relative;
	float: left;
	font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: white;
	margin-top: 1% auto;
	font-size: 10pt;
}
.servicios-pie{
	float: left;
	height: auto;
	margin: 2% 2% 0% 2%; 
	position: relative;
	width: 96%;
	vertical-align: middle;

}

.jornadas-detalle{ 	
	float: left;
	height: 61%;
	margin: 3% 2% 0% 2%; 
	position: relative;
	width: 50%;
}
.jornadas-texto{ 	
	float: left;
	height: 47%;
	position: relative;
	width: 100%;
	padding-top: 3%
}
.jornadas-texto span{
	display: block;
	width: 100%;
	float: right;
	text-align: left;
}



.a-seleccionado{
	background-color: white;
	height: 25px;
	width: 25px;
	margin: auto;
	display: inline-block;
	margin: 5px 3px 5px 3px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.a-no-seleccionado{
	background-color: white;
	height: 15px;
	width: 15px;
	margin: auto;
	display: inline-block;
	margin: 10px 3px 10px 3px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* ajustes: campeonatos deportivos */
.span-1{
	margin-top: 1%;
}

/*  Textos */
.texto-1{
	font: 12pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: white;
	line-height: 13pt;
}
.texto-2{
	font: 16pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: white;
	font-weight: bold;
}
.texto-3{
	font: 11pt 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: white;
	line-height: 13pt;
}

.alinenacion-l{
	text-align: left;
}
.alinenacion-r{
	text-align: right;
}

/************************************************ Pagina: Clientes **************************************************/
.clientes-container {
	height: 100%;
	width: 88%;
	margin:auto; 

}
.clientes-texto { 
	width: 55%;
	height: 45%;
	float: left;
	display: block;
	vertical-align: middle;
}
.clientes-texto span{ 
	font: 12pt 'Century Gothic Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	color: #116690;
	line-height: 14pt;
	margin: 15% 2% auto 20%;
	display: block;
	text-align: left;
	font-weight: bold;
}

.clientes-video {
	width: 45%;
	height: 45%;
	background-color: black;
	float: left;
	display: block;
}
.clientes-clientes{
	width: 100%;
	height: 40%;
	float: left;
	display: block;
}

.clientes-clientes img {
	width: 50%;
	height: auto;
}

.video {
	width: 400px;
	height: 225px;
}