@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	background-color:#000;
	width: 100%;
	height: auto;	
	}


#bloque_top{
	background-image:url(Images/top_back.jpg);
	background-repeat:repeat-x;
	background-color:#666;
	margin:0;
	width: 100%;
	height: auto;
	}

#top{
	font-family: 'Dancing Script', cursive;
	color: #FFF;
	font-size:130%;
	font-weight:normal;
	padding:30px 50px 0 50px;
	margin:0 auto;
	width: 924px;
	height: auto;
	}


#bloque_foto{
	background-color:#000;
	text-align:center;
	margin:0;
	width: 1024px;
	height: 410px;
	}
		
#foto{
	background-image:url(Images/foto_sitios_web_01.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	float:left;
	width: 448px;
	height: 410px;
	}

#form{
	background-color:#000;
	font-family: 'Raleway', sans-serif;
	color:#FFF;
	font-size:80%;
	letter-spacing:0.1em;
	line-height:150%;
	text-align:left;
	color:#8aa6ac;
	padding-left:30px;
	float:right;
	width: 546px;
	height: 410px;
	}
	
	
#bloque_info_info{
	background-image:url(Images/info_sitios_web_back.jpg);
	background-repeat:repeat-x;
	text-align:center;
	margin:0;
	width: 100%;
	height: 433px;
	}
	
#bloque_info{
	margin:0 auto;
	width: 1024px;
	height: 433px;
	}
		
#info{
	background-image:url(Images/info_sitios_web_back.jpg);
	background-repeat:repeat-x;
	float:left;
	width: 406px;
	height: 433px;
	}
	
#info-txt{
	background-color: rgba(255,255,255,0.7);
	font-family: 'Playfair Display', serif;
	color:#000;
	text-align:center;
	font-size:90%;
	padding:5px 15px 10px 15px;
	margin:30px 0 10px 0;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	float:left;
	width: 380px;
	height:370px;
	}


#responsive{
	background-image:url(Images/responsive_sitios_web_01.png);
	background-repeat:no-repeat;
		background-size:100%;
	font-family: 'Raleway', sans-serif;
	float:right;
	width: 618px;
	height: 433px;
	}

#datos{
	font-family: 'Raleway', sans-serif;
	color:#006b79;
	font-size:140%;
	float:left;
	width: 100%;
	height: auto;
	}
	
	
#footer{
	background-image:url(Images/footer_back.jpg);
	background-repeat:repeat-x;
	font-family: 'Raleway', sans-serif;
	color:#FFF;
	letter-spacing:0.2em;
	font-size: 80%;
	text-align:center;
	line-height:20px;
	padding-top:30px;
	float:left;
	width: 100%;
	height: auto;
	}
	
a:link {
	color: #1f505f;
	text-decoration: none;
}
a:visited {
	color: #1f505f;
	text-decoration: none;
}
a:hover {
	color: #006b79;
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('Images/subir.png') no-repeat;
}

h1{
	font-family: 'Raleway', sans-serif;
	font-size:140%;
	text-align:center;
	color:#8aa6ac;
	}
	
h2{
	font-family: 'Playfair Display', serif;
	font-size:140%;
	color:#1f505f;
	}
	
.txt_verde{
	font-family: 'Playfair Display', serif;
	color:#1f505f;
	font-size:100%;
	text-transform:uppercase;
	}

	
.txt_playfair{
	font-family: 'Playfair Display', serif;
	font-size:80%;
	}
	

.txt_170{
	font-size:170%;
	}


@media screen and (max-width: 800px) {
	
#top{
	font-family: 'Dancing Script', cursive;
	color: #FFF;
	font-size:140%;
	font-weight:normal;
	padding:5% 10% 0 10%;
	width: 80%;
	height: auto;
	}


#bloque_foto{
	width: 100%;
	height: 400px;
	}
		
#foto{
	clear:both;
	width: 100%;
	height: 400px;
	}

#form{
	font-size:90%;
	letter-spacing:0.5 em;
	line-height:150%;
	padding: 4%;
	clear:both;
	width: 92%;	
	height: 400px;
	}
	
	
#bloque_info_info{
	clear:both;
	width: 100%;
	height: auto;
	}
	
#bloque_info{
	clear:both;
	width: 100%;	
	height: auto;
	}
		
#info{
	background-image:url(Images/info_sitios_web_tablet_back.jpg);
	clear:both;
	width: 100%;	
	height: auto;
	}
	
#info-txt{
	font-size:120%;
	padding:3%;
	margin:5%;
	clear:both;
	width: 84%;	
	height:460px;
	}


#responsive{
	background-image:url(Images/responsive_sitios_web_01.jpg);
	clear:both;
	width: 100%;	
	height: 530px;
	}

#datos{
	clear:both;
	}
	
	
#footer{
	font-size: 90%;
	clear:both;
	}
}

@media screen and (max-width: 500px) {
	
#top{
	font-family: 'Dancing Script', cursive;
	color: #FFF;
	font-size:110%;
	font-weight:normal;
	padding:5% 10% 0 10%;
	width: 80%;
	height: auto;
	}


#bloque_foto{
	width: 100%;
	height: 300px;
	}
		
#foto{
	clear:both;
	width: 100%;
	height: 300px;
	}

#form{
	font-size:90%;
	letter-spacing:0;
	line-height:130%;
	padding: 4%;
	clear:both;
	width: 92%;	
	height: 400px;
	}
	
	
#bloque_info_info{
	clear:both;
	width: 100%;
	height: auto;
	}
	
#bloque_info{
	clear:both;
	width: 100%;	
	height: auto;
	}
		
#info{
	background-image:url(Images/info_sitios_web_tablet_back.jpg);
	clear:both;
	width: 100%;	
	height: auto;
	}
	
#info-txt{
	font-size:120%;
	padding:3%;
	margin:5%;
	clear:both;
	width: 84%;	
	height:630px;
	}


#responsive{
	background-image:url(Images/responsive_sitios_web_01.jpg);
	clear:both;
	width: 100%;	
	height: 250px;
	}

#datos{
	font-size:100%;
	clear:both;
	}
	
	
#footer{
	font-size: 70%;
	clear:both;
	}
}