@font-face {
	font-family: TYPOGRAPH_PRO;
	src: url(../fonts/TYPOGRAPH_PRO_Light.ttf),
	url(../fonts/TYPOGRAPH_PRO_Light.eot);
	font-weight:400;
}
body{
	cursor:default;
	font-family: 'TYPOGRAPH_PRO';
	padding-top:3em;
	margin:0;
}
a{
	text-decoration: none;
	color:black;
}
a:visited{
	text-decoration: none;
	color:black;
}
div#main-header{
	cursor:default;
	color:black;
	text-align:center;
	position:fixed;
	font-size:120%;
	width:100%;
	box-shadow:0px 2px 1px #4099FF;
	height:2em;
	padding-top:0.5em;
	top:0;
	left:0;
	z-index:100;
	background-color:white;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#download-link{
	height:2em;
	width:17em;
}
#download-link span{
	margin-top:0.5em;
	display:inline-block;
}
#download-link img{
	display:inline-block;
	float:right;
	width:2em;
	height:2em;
}
/*
	COLORES DEL HEADER SUPERIOR (DONDE PONE DISTAREA)
*/
div#main-header.inicio{
	box-shadow:0px 2px 1px #4099FF;
	background:white;
	color:#4099FF;	
}
div#main-header.inicio:hover{
	box-shadow:0px 2px 8px indianred;
}
div#main-header.profesionales{
	color:indianred;
	background:white;
	box-shadow:0px 2px 1px indianred;
}
div#main-header.profesionales:hover{
	box-shadow:0px 2px 8px indianred;
}
div#main-header.pedidos{
	color:peru;
	background:white;
	box-shadow:0px 2px 1px peru;
}
div#main-header.pedidos:hover{
	box-shadow:0px 2px 8px peru;
}
div#main-header.deportes{
	color:green;
	background:white;
	box-shadow:0px 2px 1px green;
}
div#main-header.deportes:hover{
	box-shadow:0px 2px 8px green;
}
div#main-header:hover{
	box-shadow:0px 2px 8px #4099FF;
}
div#main-header header span#main-header-clientes{
	float:left;
	margin-left:1em;
}
div#main-header header span#main-header-empresas{
	float:right;
	margin-right:1em;
}
div#main-header header img{
	width: 24px;
		height: auto;
		cursor:pointer;
}
div#main-header header img#main-img-empresas{
	float:right;
}
div#main-header header img#main-img-cliente{
	float:left;
}
div#main-header div.main-header-form{
	background-color:white;
	box-shadow:0px 1px 1px black;
}
div#main-header div.main-header-form form{
	padding-bottom:0.1em;
}
div#main-header div.main-header-form input{
	display:block;
	margin:auto auto;
	margin-top:0.5em;
	margin-bottom:0.5em;
	border:1px solid black;
	font-family: 'TYPOGRAPH_PRO';
	text-align:center;
	border-radius: 0.1em;
}
div#main-header div.main-header-form input[type=submit]{
	background-color:#15706A;
	color:white;
	box-shadow:0px 0px 2px black;
	padding:0.3em;
	cursor:pointer;
}
#page-selector{
	position:fixed;
	width:100%;
	text-align: center;
	background:white;
	top:3em;
	padding-bottom:5px;
}
#page-navigator{
	font-size:120%;
}
#page-navigator span{
	margin-right: 0.5em;
	margin-left:0.5em;
	cursor:pointer;
}
#page-navigator span:hover{
	box-shadow: 0px 4px 0px black;
}
.circle{
	cursor:pointer;
	display:inline-block;
	width:110px;
	font-size:100%;
	padding:0.5em;
	color:black;
	text-align:center;
	margin-left:5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
/*
	COLORES DE LAS LINEAS DE LA BARRA DE NAVEGACION
*/
.circle:hover{
	box-shadow: 0px 5px 0px black;
}
.circle.selected{
	box-shadow: 0px 5px 0px black;
}
#circle-distarea:hover{
	box-shadow: 0px 5px 0px #4099FF;
}
#circle-distarea.selected{
	box-shadow: 0px 5px 0px #4099FF;
}
#circle-pedidos:hover{
	box-shadow: 0px 5px 0px peru;
}
#circle-pedidos.selected{
	box-shadow: 0px 5px 0px peru;
}
#circle-profesionales:hover{
	box-shadow: 0px 5px 0px firebrick;
}
#circle-profesionales.selected{
	box-shadow: 0px 5px 0px firebrick;
}
#circle-deportes:hover{
	box-shadow: 0px 5px 0px green;
}
#circle-deportes.selected{
	box-shadow: 0px 5px 0px green;
}
.hidden{
	display:none;
}
.helper{
	font-size:60%;
	color:#15706A;
}
#pages{
	margin-top:3em;
}
.page-idea{
	padding-top:3em;
	font-size:120%;
	text-align: center;
	padding-bottom:3em;
}
.page-introduction-img{
	width:100%;
	height:200px;
	text-align: center;
}
.page-concept{
	width:100%;
	height:100%;
}
.page-concept-img{
	width:100%;
	height:500px;
	text-align: center;
	font-size:150%;
	color:white;
}
.page-concept-img header{
	padding-top:80px;
	font-size:230%;
	text-decoration: underline;
}
.page-concept-img a{
	color:white;
	font-size:100%;
	margin-left:0.3em;
	margin-right:0.3em;
	text-decoration: underline;
}
.page-results{
	margin-top:3em;
	margin-bottom:3em;
	text-align: center;
}
.page-results header{
	font-size:200%;
	text-align: center;
}
.page-results .column-container{
	width:90%;
	margin:auto auto;
	display:inline-block;
}
.page-results .two-column-container{
	width:70%;
	margin:auto auto;
	display:inline-block;
}
.page-results div{
	margin-top:1em;
	font-size:110%;
}
.page-results div p{
	font-size:60%;
}
.page-footer{
	text-align:center;
	margin-top:3em;
	width:100%;
	height:267px;
	background: url('../img/fondodistarea_p.png') no-repeat center center;
}
.page-footer a{
	margin-left: 0.3em;
	margin-right:0.3em;
}
#distarea-introduction-img{
	width:100%;
	height:100%;
}
#distarea-concept-img{
	background: url('../img/fondodistarea_n.png') no-repeat center center;
}
#pedidos-introduction-img{
	width:100%;
	height:100%;
}
#pedidos-concept-img{
	background: url('../img/fondodistarea_n.png') no-repeat center center;
}
#profesionales-introduction-img{
	width:100%;
	height:100%;
}
#profesionales-concept-img{
	background: url('../img/fondodistarea_n.png') no-repeat center center;
}
.opener{
	cursor:pointer;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.icon{
	height:64px;
	width:64px;
	display:inline-block;
	padding-top:200px;
}
.mail-icon{
	background: url('../img/mail.png') no-repeat center center;
	background-size: 64px 64px;
}
.facebook-icon{
	background: url('../img/facebook.png') no-repeat center center;
	background-size: 64px 64px;
}
.copyright-icon{
	background: url('../img/copyright.png') no-repeat center center;
	background-size: 64px 64px;
}
img{
	max-width: 100%;
}
img.scroll-gif{
	display: block;
    margin-left: auto;
    margin-right: auto;
    width:12%;
}
.two-column-container .column-left{
	float: left; 
	width: 50%;
	display:inline-block;
	min-height:100%;
	text-align: center;
}
.two-column-container .column-right{
	float: right; 
	width: 50%;
	display:inline-block;
	height:100%;
	text-align: center;
}
div.column{
	text-align: left;
}
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
a.circle-link{
	background-color:white;
	color:black;
	width:128px;
	height:128px;
	line-height: 128px;
	font-size: 80%;
	display:inline-block;
	border-radius: 10em;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a.circle-link:hover{
	background-color:#4099FF;
	color:white;
}
#fixed-page-background{
	top:0;
	left:0;
	z-index:500;
	position:fixed;
	background:#47A16B;
	width:100%;
	height:100%;
    min-height: 100%;
    max-height: 100%;
    opacity:0.8;
    cursor:pointer;
}
.fixed-page{
	background:#FAFAFA;
	text-align: justify;
	font-size:80%;
	top:2em;
	padding:2em;
	z-index:1000;
	position:fixed;
	background:white;
	word-wrap: break-word;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 20em;
    max-height: 78%;
    width: 70%;
    overflow-y: auto;
}
.fixed-page header{
	font-size:180%;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
}
.fixed-page p{
	margin: 6px 0px 6px 0px;
}

@media (max-width: 860px) {
	.circle{			
		font-size:90%;
	}
	div#main-header header span.opener{
		display:none;
	}
	div#main-header header img#main-img-empresas{
		margin-right:1em;
		border-radius:2em;
		padding:0.1em;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	div#main-header header img#main-img-empresas:hover{
		box-shadow:0px 2px 0px black;
	}
	div#main-header header img#main-img-cliente:hover{
		box-shadow:0px 2px 0px black;
	}
	div#main-header header img#main-img-cliente{
		margin-left:1em;
		border-radius:2em;
		padding:0.1em;
		-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
	}
	.page-introduction-img{
		height:150px;
	}
	.page-concept-img{
		height:380px;
		font-size:130%;
	}
	.page-concept-img header{
		padding-top:80px;
		font-size:200%;
	}
	a.circle-link{
	width:90px;
	height:90px;
	line-height: 90px;
	font-size: 50%;
	}
}
@media (max-width: 660px) {
	.circle{		
		font-size:75%;
		width:6em;
	}	
	.page-introduction-img{
		height:100px;
	}
	.page-concept-img{
		height:340px;
		font-size:160%;
	}
	.page-concept-img header{
		padding-top:60px;
	}
}
@media (max-width: 480px) {
	#page-selector{
		position:static;
		top:3em;
	}
	.circle{	
		line-height: 30px;	
		height: 30px;	
		border:0;
		width:100%;
		box-shadow: 0;
		border-radius: 0;
		font-size:85%;
		padding:0;
		margin:0;
		box-shadow: 0px 0px 0px transparent;
	}
	/*
		COLORES DE LAS LINEAS DE LA BARRA DE NAVEGACION
	*/
	#circle-distarea.selected{
		box-shadow: 0px 2px 0px #4099FF;
		border:0;
	}
	#circle-distarea:hover{
		box-shadow: 0px 2px 0px #4099FF;
		border:0;
	}
	#circle-pedidos.selected{
		box-shadow: 0px 2px 0px peru;
		border:0;
	}
	#circle-pedidos:hover{
		box-shadow: 0px 2px 0px peru;
		border:0;
	}
	#circle-deportes:hover{
		box-shadow: 0px 2px 0px green;
		border:0;
	}
	#circle-deportes.selected{
		box-shadow: 0px 2px 0px green;
		border:0;
	}
	#circle-profesionales:hover{
		box-shadow: 0px 2px 0px firebrick;
		border:0;
	}
	#circle-profesionales.selected{
		box-shadow: 0px 2px 0px firebrick;
		border:0;
	}
	.page-idea{
		padding-top:1.5em;
		padding-bottom:1.5em;
		font-size:100%;
	}
	.page-introduction-img{
		height:80px;
	}
	.page-concept-img{
		height:230px;
		font-size:100%;
	}
	.page-concept-img header{
		padding-top:40px;
	}
	.page-footer{
		height:200px;
	}
	.page-footer .icon{
		padding-top:100px;
	}
	.page-results{
		display:inline-block;
		margin-bottom:0em;
		font-size:85%;
	}	
	.page-results div div{
		width:100%;
		display:block;
	}
	.page-results .column{
		width:100%;
		display:block;
	}
	a.circle-link{
		width:64px;
		height:64px;
		line-height: 64px;
		font-size: 70%;
	}
}