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

. html, body {
	font-family: 'Titillium Web', sans-serif;
	font-size:1.2em;
	color:#000;
}

.nav {
	position:relative;
	float:left;
	width:100%;
	padding:7px;
	background:#060015;
	opacity: 0.7;
}

#menu2 {
	font-size:1.2em;
}
	

.redes {
	position:fixed;
	float:left;
	text-align:right;
	width:95%;
	margin-right:20px;
	top:85%;
}

.redes img {
	width:5%;
	height:auto;
}

.redes a {
	opacity: 0.6;
}

.redes a:hover {
	opacity: 0.9;
}

.botoncontacto {
	z-index:99;
	float:right;
	position:fixed;
	text-align:right;
	top:70%;
	width:10%;
	margin-left:90%;
}

.botoncontacto img{
	width:40px;
	height:auto;
}

.botoncontacto a{
	opacity: 0.6;
}

.botoncontacto a:hover {
	opacity: 0.9;
}

.telefono{
	z-index:999;
	position:fixed;
	text-align:center;
	float:right;
	top:200px;
	font-family: 'Titillium Web', sans-serif;
	font-size:1.2em;
	color:#CCC;
	background:#008FC5;
	width:40%;
	padding:1.5% 1.5% 0 1.5%;
	margin-left:57%;
	box-shadow: 2px 4px 8px rgba(10,10,10,0.6);
	-webkit-animation: contacto 1s; /* Chrome, Safari, Opera */
	-webkit-border-radius: 25px 0px 0px 25px;
   border-radius: 25px 0px 0px 25px;
}
	
.contacto {
	z-index:999;
	position:fixed;
	text-align:center;
	float:right;
	top:200px;
	font-family: 'Titillium Web', sans-serif;
	font-size:1.2em;
	color:#CCC;
	background:#036;
	width:48%;
	padding:2% 2% 0 2%;
	margin-left:48%;
	box-shadow: 2px 4px 8px rgba(10,10,10,0.6);
	-webkit-animation: contacto 1s; /* Chrome, Safari, Opera */
	-webkit-border-radius: 25px 0px 0px 25px;
   border-radius: 25px 0px 0px 25px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes contacto{
    0%   {right:-250px; opacity: 0.0;filter: alpha(opacity=00);}
    100%  {right:0px; opacity: 1;filter: alpha(opacity=100);}
}

/* Standard syntax */
@keyframes contacto{
     0%   {right:-250px; opacity: 0.0;filter: alpha(opacity=00);}
    100%  {right:0px; opacity: 1;filter: alpha(opacity=100);}
}

.contacto a{
	opacity: 0.6;
}

.contacto a:hover {
	opacity: 0.9;
}

.contacto h1 {
	font-size:2.3em;
	text-align:right;
}

.contacto h2 {
	font-size:1.6em;
	text-align:right;
}

.contacto h3 {
	font-size:1.2em;
	text-align:right;
}

.telefono a{
	opacity: 0.6;
}

.telefono a:hover {
	opacity: 0.9;
}

.telefono h1 {
	font-size:2.3em;
	text-align:right;
}

.telefono h2 {
	font-size:1.6em;
	text-align:right;
}

.telefono h3 {
	font-size:1.2em;
	text-align:right;
}

.info {
	position:relative;
	float:left;
	font-family: 'Titillium Web', sans-serif;
	width:100%;
	margin:15px 0px 5px 0px;
	text-shadow: 1px 1px 5px rgba(0,0,0,1);
	text-align:center;
}

.info p {
	text-align:center;
	width:64%;
	margin-left:18%;
	font-size:1.1em;
	color:#FFF;
}

.info h1 {
	text-align:center;
	width:70%;
	font-size:2em;
	margin-left:15%;
}

.gal {
	position:relative;
	float:left;
	width:100%;
	padding:15px 0px 15px 0px;
	text-align:center;
}

/*formulario*/

.textfield_effect {
/*we will first set the border styles.*/
font-family: 'Titillium Web', sans-serif;
border-width: 1px;
border-style: solid;
border-color: #09F;
/*we are now going to add in the shadow image that we created earlier*/
background-color:#FFF;
background-repeat: repeat-x;
/*I am going to add some text formatting of my own*/
font-size: .8em;
color:#999;
width: 80%;
padding:3px;
margin-bottom:5px;
}
/*we are now going to style how the textfield will look when we
hover over it and when we actually have it selected*/
.textfield_effect:hover {
border-color:#CCC;
border-width: 2px;
padding:3px;
}
.textfield_effect:focus {
border-color: #666;
border-width: 0px;
background-color:#333;
}

.submit {
	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fff), color-stop(1, #CCC));
	background:-moz-linear-gradient(top, #fff 5%, #CCC 100%);
	background:-webkit-linear-gradient(top, #fff 5%, #CCC 100%);
	background:-o-linear-gradient(top, #fff 5%, #CCC 100%);
	background:-ms-linear-gradient(top, #fff 5%, #CCC 100%);
	background:linear-gradient(to bottom, #fff 5%, #CCC 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ffab23',GradientType=0);
	font-family: 'Titillium Web', sans-serif;
	background-color:#fff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #CCC;
	display:inline-block;
	cursor:pointer;
	color:#666;
	font-size:.8em;
	font-weight:normal;
	padding:4px 15px;
	text-decoration:none;}
	
.submit:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #CCC), color-stop(1, #fff));
	background:-moz-linear-gradient(top, #CCC 5%, #fff100%);
	background:-webkit-linear-gradient(top, #CCC 5%, #fff 100%);
	background:-o-linear-gradient(top, #CCC 5%, #fff 100%);
	background:-ms-linear-gradient(top, #CCC 5%, #fff 100%);
	background:linear-gradient(to bottom, #CCC 5%, #fff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCC', endColorstr='#fff',GradientType=0);
	background-color:#ccc;
	color:#333;
}
.submit:active {
	position:relative;
	top:1px;
}
	

@media screen and (max-width: 720px) {
	
.redes {
	bottom:40px;
	width:97%;
	margin-right:100px;
}
.botoncontacto {
	top:60%;
	width:11%;
	margin-left:89%;
}

.contacto {
	top:150px;
	font-size:1.1em;
	width:88%;
	margin-left:8%;
}

.contacto h1 {
	font-size:1.6em;
	text-align:right;
}

.contacto h2 {
	font-size:1.1em;
	text-align:right;
}

.telefono {
	top:150px;
	font-size:1.1em;
	width:89%;
	margin-left:8%;
}

.telefono h1 {
	font-size:1.6em;
	text-align:right;
}

.telefono h2 {
	font-size:1.1em;
	text-align:right;
}

.info p {
	width:84%;
	margin-left:8%;
	font-size:1em;
	color:#FFF;
}

.info h1 {
	width:90%;
	font-size:1.5em;
	margin-left:5%;
}

.redes img {
	width:10%;
	height:auto;
}

.textfield_effect {
width: 90%;
}

}

@media screen and (max-width: 480px) {
	
.botoncontacto {
	top:50%;
	width:11%;
	margin-left:89%;
}
.contacto {
	top:30px;
}

.telefono {
	top:80px;
}