/* CSS Document */

html,body {
	padding:0;
	margin:0;
	height:100%;
	font-family:Roboto,Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:#111111;
	font-size:15px;
}
a {text-decoration:none;}
.limpia{
	clear:both;
	font-size:1px;
}
.gobutton,.gobutton:hover, .gobutton:active, .gobutton:visited{
	width:115px;
	height:17px;
	padding:9px;
	background-color:#153D5A;
	color:#FFF;
	cursor:pointer;
	text-align:center;
	margin:40px 30px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border: 0px solid #000000;
	
}
#maindiv{	
	margin:0;
	padding:0;
	height:100%;
  	background: url(../images/main_photo.jpg) top center no-repeat;
	background-size:cover;
}
#header{
	margin:0;
	padding:16px 0;
	width:100%;
	height:25px;
	background:rgba(255, 255, 255, 0.70);
	/*opacity: 0.5;*/
}
	#header .logo{
		float:left;
		width:250px;		
		margin: 0 15px;
	}
	#header .nav{
		float:right;
		padding:0 40px 0 0;
		margin:0;
		width:70%;
		/*margin: 15px 15px 15px 15px;*/
	}
	#header .nav li{
		list-style: none;
		float:right;
	}

#mainblock{
	position:relative;
	margin:14% auto 0 auto;
	padding:10px 5px;
	width:470px;
	height:260px;
	background:rgba(255, 255, 255, 0.70);
    filter: alpha(opacity=50); /* For IE8 and earlier */
	-webkit-box-shadow: 2px 2px 2px 0px rgba(102,100,102,1);
	-moz-box-shadow: 2px 2px 2px 0px rgba(102,100,102,1);
	box-shadow: 2px 2px 2px 0px rgba(102,100,102,1);
}

	#mainblock .logo{
		text-align:center;
		margin: 15px;
	}
	#mainblock hr{
		width:80%;
		margin-bottom:20px;
	}
#mainblock .flags{
	text-align:right;
	margin-bottom:10px;
	margin-right:10px;
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
#mainblock .flags a:link,a:hover,a:active,a:visited{
	text-decoration:none;
	margin:0;
	padding:0;
}
	#mainblock .first{
		text-align:center;
		font-size:25px;
		font-weight:bold;
		text-transform:uppercase;
		color:#333333;
	}
	#mainblock .text{
		text-align:center;
		font-size:15px;
		font-weight:bold;
		text-transform:uppercase;
		color:#444444;
	}
	#mainblock .navegation{
		margin-top:20px;
		text-align: center;
	}
	#mainblock .navegation a:link, a:visited, a:active{
		color:#153D5A;
		margin: 0 10px;
		font-weight: 700;
	}

/******* SITES *****************/
.site1{
	width:100%;
	height:500px;
	background-color:#FFF;	
}
	.site1 .photo{
		margin:0;
		padding:0;
		width:50%;
		height:100%;
		float:left;

		
	}
	.site1 .photo img{
		width:100%;
	}
	.site1 .text{
		width:50%;
		float:left;
		margin:0;
		padding:0;
		text-align:left;
	}
	.site1 .text .logo{
		margin:50px 30px 30px 30px;
			width:250px;
	}
	.site1 .text p{
		margin:10px 30px 20px 30px;
	}
.site1 a{
	color:#fff;
}

.site2{
	width:100%;
	height:500px;
	background-color:#FFF;	
}
	.site2 .photo{
		margin:0;
		padding:0;
		width:50%;
		height:100%;
		float:right;
	}
	.site2 .text{
		width:50%;
		float:left;
		margin:0;
		padding:0;
		text-align:right;
	}
	.site2 .text .logo{
		margin:50px 30px 30px 30px;
			width:250px;
	}
	.site2 .text p{
		margin:10px 30px 20px 30px;
	}

.site2 a{
	color:#fff;
}

/*****************************************************************/
/***** SCREEN UNDER 1000 ******************************************/
/*****************************************************************/
@media only screen and (max-width: 1000px) {
	/******* SITES *****************/
.site1{
	min-height:700px !important;
	padding-bottom:20px !important;
	}
	.site1 .photo{
		width:100% !important;
		height:50% !important;
		float:none !important;
	}
	.site1 .text{
		width:100% !important;
		float:none !important;
		text-align:center  !important;
	}
	
	.site1 .text .gobutton{
		float:none !important;
		margin: 30px auto;
	}
	
.site2{
	min-height:700px !important;
	padding-bottom:30px !important;
	}
	.site2 .photo{
		width:100% !important;
		height:50% !important;
		float:none !important;
	}
	.site2 .text{
		width:100% !important;
		float:none !important;
		text-align:center  !important;
	}
	
	.site2 .text .gobutton{
		float:none !important;
		margin: 30px auto;
	}
}

.footer{	
	padding:20px 0px;
	width:100%;
	color:#fff;
	background-color:#153D5A;
	text-align:center;
}

/*****************************************************************/
/***** SCREEN UNDER 767 ******************************************/
/*****************************************************************/
@media only screen and (max-width: 767px) {

  body {
    background-image: url(images/Road-Cycling-mobile.jpg);
  }
	
	#mainblock{
		margin:50px auto 50px auto !important;
	}
	.site1{
	min-height:800px !important;
	}
	.site2{
	min-height:800px !important;
	}

}

/*****************************************************************/
/***** SCREEN UNDER 478px ******************************************/
/*****************************************************************/
@media only screen and (max-width: 478px) {
	
	#maindiv{	
		height:568px !important; 
	}
	#mainblock{
		margin:30px auto 50px auto !important;
		padding:15px 5px !important;
		width:300px !important;
		height: 300px !important;
	}
	
	#mainblock .navegation{
		text-align: center !important;
	}
	.site1{
	min-height:720px !important;
	}
	.site1 .photo{
		height:30% !important;
	}
	.site2{
	min-height:720px !important;
	}
	.site2 .photo{
		height:30% !important;
	}

}