/*=============== HEADER =======================================================================*/
/*==============================================================================================*/
header{
	position: fixed;
	left: 0;
	top: 30px;
	background-color: rgba(21,60,63,0.3);
	height: 100px;
	width: 100%;
	z-index: 3;
	box-shadow:2px 2px 20px #bbb; 
}

/*header .hamburguesa{
	display: none;
}*/

#index header{
	background-color: rgba(21,60,63,0.5);
}
.envuelta-logotipo{
	width: 341px; /*20+20px padding +1px borde*/
	float: left;
	padding: 0 20px;
	background-color: rgba(0,0,0,0.5);
	border-right: #fff 1px solid;
}

.logotipo{
	height: 100px;
	text-indent: -9999px;
	background-image: url(../img/logow.png);
	background-size: 300px 100px;
	background-repeat: no-repeat;
}

header nav{
	float: right; 
	height: 120px;
	margin: auto;
	padding-right: 50px;
}

header .hamburguesa{
		display: none;
	}
header nav ul{
	width: 700px;
	height: 100px;	
	float: right; 
	display: block;

}
header nav .opened{
	display: block;

}
header nav li{
	float: left;
	text-align: center;
	margin:0 30px;	
}

header nav li a{
	font-size: 16px;
	color: #fff;
	display: inline-block;
	line-height: 40px;
	padding-top: 30px;
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: center 0;
}


nav li .actual{
	font-family: "montserrat-bold", sans-serif;

}


nav li .index.actual{
	background-image: url(../img/menu/indexamarillo.png);
}
nav li .apartamentos.actual{
	background-image: url(../img/menu/apartamentosamarillo.png);
}
nav li .ubicacion.actual{
	background-image: url(../img/menu/ubicacionamarillo.png);
}
 nav li .contacto.actual{
	background-image: url(../img/menu/contactoamarillo.png);
}

nav li a:hover{
	color: #68ced7;
}
nav li .index:hover{
	background-image: url(../img/menu/indexazul.png);
}
 nav li .apartamentos:hover{
	background-image: url(../img/menu/apartamentosazul.png);
}
nav li .ubicacion:hover{
	background-image: url(../img/menu/ubicacionazul.png);
}
 nav li .contacto:hover{
	background-image: url(../img/menu/contactoazul.png);
}



/*=============MEDIAQUERIES HEADER=======================*/

@media screen and (max-width: 1130px){
	.envuelta-logotipo{
		width: 250px;
	}
	.logotipo{
		background-size: 220px 75px;
		background-position:  0 12px;
	}	
	header nav li{
		margin: 0 20px;
	}
	header nav li a{
		font-size: 14px;
	}
}

			/*footer*/
			footer nav li a{
				font-size: 14px;
			}



@media screen and (max-width: 1040px){
	

	header nav ul{
		width: 550px;
	}
}

@media screen and (max-width: 950px){
	header{
		height: 90px;
		
	}

	.envuelta-logotipo{
		height: 90px;
		width: 300px;

	}
    header nav{
		display: block;
		width: 90px;
		height: 90px;
		margin-right: 50px;
		
		float: right;
	}
	header nav ul li{
		display: none;
	}


	header .hamburguesa{
		display: inline-block;
		background-image: url(../img/hamburguesablanca.png);
		background-size: 60px;
		background-position: 15px;
		background-repeat: no-repeat;
		width: 90px;
		height: 90px;
	}

	header .hamburguesa:hover {
  		background-image: url(../img/hamburguesaclara.png);
	}



header .open{
		
		background-image: url(../img/arrowblanca.png);
		background-size: 60px;
		background-position: 15px;
		background-repeat: no-repeat;
		width: 90px;
		height: 90px;
	}

	header .open:hover {
  		background-image: url(../img/arrowclara.png);
	}




	header nav ul{
		display: none;
		width: 100%;
		margin:-5px -30px 0 0;
		padding: 0;
		float: right;
	}

	header nav ul li{
		background-color: rgba(21,60,63,0.9);
		width: 300px;
		text-align: left;
		padding: 0;
		margin: 0;
		float: right;
		text-indent: 50px;
		border-top: solid #fff 1px;
	}


	header nav li a{

		font-size: 16px;
		color: #fff;
		display: inline-block;
		width: 300px;
		line-height: 50px;
		padding-top: 0px;
		padding-left: 0px;
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: 0;
	}

}
@media screen and (max-width: 550px){
	header nav{
		margin-right: 20px;
		
	}

}


@media screen and (max-width: 500px){
	
	.envuelta-logotipo{
		width: 70%;
		height: 60px;
	}
	.logotipo{
		background-size: 150px 50px;
		background-position:  center;
		height: 60px;
	}
	header{
		height: 60px;
	}
	header nav ul{
		margin: -35px 0px;


	}header .hamburguesa{
		background-size: 40px;
		background-position: 10px 10px;
		width: 70px;
		height: 90px;
	}
	
	header nav{
		padding: 0 0 0 2%;
		margin: 0;
		width: 28%;
	}
	
}







/*===================FOOTER=====================================================================*/
/*==============================================================================================*/
footer{
	background-color: rgba(21,60,63,0.9);
	border-top: #bea151 20px solid;
	padding-bottom: 30px;
}

footer .contenedor-footer{
	width: 80%;
	margin: auto;
}
/*dimensiones de los 4 apartados*/
.foota{
	float: left;
	margin-top: 15px;
	height: 150px;
}

.footernav{
	float: left;
	margin-top: 25px;
	height: 180px;

}
footer .envcenter{
	margin: auto;
	width: 200px;
}

footer nav{
	border-top: #fff double 4px;
	padding-top: 15px;
	margin: auto;
}
footer .logofooter{
	float: left;
	margin-top: 15px;
	height: 180px;
}/*dimensiones de los 4 apartados*/

/*css footercontacto y llegar*/
.foota h6{
	margin: 0 0 5px 0;
}

.foota h6 a{
	font-size: 16px;
	width: 100%;
	font-family: "montserrat-thin", sans-serif;
	display: inline-block;
	color:#fff;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	text-align: center;
	padding: 10px 0;
	margin: 10px 0;
}

.foota h6 a:hover{
	color: #68ced7;
	font-family: "montserrat-regular", sans-serif;
}

.foota .telef a, .foota .email a, .llegar .ubic a{	
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-family: "montserrat-regular", sans-serif;
	line-height: 30px;
	background-image: url(../img/telefamarillo.png);
	padding-left: 25px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 0 center;
}

.foota .email a{
	font-size: 12px;
}
.llegar a{	
	text-align: right;
}

.footercontacto .email a{
	display: inline-block;
	background-image: url(../img/arrobaamarillo.png);
}
.footercontacto .email a:hover{
	color: #68ced7;
	background-image: url(../img/arrobaazul.png);
}

.foota .telef a:hover{
	color: #68ced7;
	background-image: url(../img/telefazul.png);
}

.llegar .ubic a{
	display: inline-block;
	line-height: 25px;
	background-image: url(../img/menu/ubicacionamarillo.png);
}
.llegar .ubic a:hover{
	color: #68ced7;
	background-image: url(../img/menu/ubicacionazul.png);
}

.llegar .ubic span{
	font-family: "montserrat-bold", sans-serif;
}

/*css NAV footer*/
footer nav li a{
	font-family: "montserrat-thin", sans-serif;
	font-size: 16px;	
	color: #fff;
	display: inline-block;
	padding: 3px;
	text-align: left;
	width: 200px;
	line-height: 25px;
	padding-left: 30px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 0px center;
}
footer nav li a:hover{
	color: #68ced7;
}
footer nav ul{
	margin: auto;
	width: 200px;
}



/*-=_=_=_=_=_=_=_=_=MEDIAquery FOOTER=_=_=_=_*/
@media screen and (max-width: 1130px){

	footer nav li a{
		font-size: 14px;
	}



}
/*css logofooter*/
footer .logofooter .logo{
	text-indent: -9999px;
	margin: auto;
	height: 70px;
	width: 210px;
	background-image: url(../img/logow.png);
	background-size: 210px 70px;
	background-repeat: no-repeat;
}

footer .logofooter .env-logo{
	float: right;
	width: 210px;

}

.footer .copyright{
	width: 100%;

	padding-right: 16px;
}

footer .copyright .copy{
	float: right;
	width: 210px;
	font-size: 10px;	
	padding:10px 16px;
	height: 50px;

}

footer .logofooter .copy p{
	color: #fff;
	text-align: right;
	line-height: 20px;
	text-indent: -30px;
	width: 100%;	
}

footer .copyright .copy span{
	font-family: "montserrat-thin", sans-serif;
	font-size: 10px;
}

footer .copyright .copy span a{
	color: #ffa;
	font-family: "montserrat-regular", sans-serif;
}
footer .copyright .copy span a:hover{
	color: #5bf8ff;
}

footer .copyright .copy .cookies{
	float:right;
	text-align: right;
}

footer .copyright .copy .cookies a{
	display: inline-block;
	font-size: 11px;
	color: #fff;
	text-align: right;
	width: 100%;
	margin-top: 15px;
}
footer .copyright .copy .cookies a:hover{
	color: #5bf8ff;
}

/*-=_=_=_=_=_=_=_=_=MEDIAquery FOOTER=_=_=_=_*/
@media screen and (max-width: 350px){

	footer nav li a{
		font-size: 12px;
	}
	.foota .telef, .foota .email a, .llegar .ubic a{	
		font-size: 12px;
	}

}

/*Política de cookies===DESPLEGABLE=====*/

#barraaceptacion{
	border-top-left-radius: 40%;
	width: 350px;
	height: 350px;
	background-color: #bea151;
	color: #fff;
	font-weight: 200;
	line-height: 25px;	
	text-align: center;
	font-size: 12px;
	z-index: 3;
	position:fixed;
	right: 0px;
	bottom:0;
	box-shadow: 2px -2px 20px #aaa;

	-webkit-animation: cookie  2s 0s;
}

#barraaceptacion .inner{
	padding: 45px;
}

#barraaceptacion .inner p{
	margin:25px 0px 15px 0;
	font-size: 16px;
	font-family: "montserrat-thin", sans-serif;
	
}

#barraaceptacion .inner span{
	font-family: "montserrat-bold", sans-serif;
	font-size: 18px;
}
@-webkit-keyframes cookie{

		0%{
			
			bottom:-200px;
		}


		100%{
			bottom:0;
		}
	}


#barraaceptacion .ok{
	display: inline-block;
	padding: 5px;
	color: #4f2c1d;
	background-color: #fff;
	box-shadow: #4f2c1d 1px 1px 1px;
	width: 60%;
	margin: 25px 20%;
	float: left;
	font-size: 13px;
}

#barraaceptacion .ok:hover{
	background-color: #1b787f;
	color: #fff;	
	text-decoration: none;
	box-shadow: #4f2c1d 1px 1px 1px;
}


#barraaceptacion .info{
	color: #fff;
	float: right;
	font-size: 13px;
}

#barraaceptacion .info:hover{
	color: #0b585f;	

}
/*==================*/


@media screen and (max-width:500px){
	
#barraaceptacion{
	border-top-left-radius: 20%;
	width: 250px;
	height: 250px;
	line-height: 25px;	
	text-align: center;

}
#barraaceptacion .inner{
	padding: 15px;
}

#barraaceptacion .inner p{
	margin: 20px 0px 5px 0;
	font-size: 12px;
	font-family: "montserrat-thin", sans-serif;
	
}
#barraaceptacion .ok{
	
	margin: 15px 20%;
	font-size: 12px;
}

}