/*  MOVILES  */

/*----
@IMPORT
----*/

@import 'moviles/class-id.css';
@import 'moviles/index.css';
@import 'moviles/sidebar.css';
@import 'moviles/header.css';
@import 'moviles/section.css';
@import 'moviles/div.css';
@import 'moviles/slider.css';
@import 'moviles/watch.css';
@import 'moviles/form.css';
@import 'moviles/footer.css';

/*----
FIN @IMPORT
----*/

@media screen and (min-width: 280px) and (max-width:1024px){

#caja-ubicacion h2{
	font-size: 1.5em;
	margin: .3em;
	padding: 0;
	top: 2em;
}
#caja-ubicacion p{
	bottom: 0;
	font-size: 1em;
	line-height: 30px;
	width: 90%;
}

#ubicacion{
	left: .2em;
	bottom: .2em;
}
#caja-bottom-right{
	border-radius: 30px;
	bottom: .2em;
	right: .2em;
}
#idiomas{
	bottom: .2em;
	right: .2em;
}

#ubicacion img{
	height: auto;
	margin: 0 .2em;
	width: 30px;
}
iframe{
	height: 50%;
	width: 100%;
}
.flex > img{
	height: 40px;
}
.flex h2{
	font-size: 2em;
}

#main-galeria{
	display: block;
}
#main-galeria h1{
	margin: 0;
	padding: 0;
}
#main-galeria > div:first-of-type{
	position: relative;
	text-align: center;
}

#galeria-img img{
	float: none;
}

#banner{
	border: none;
	height: 100%;
	width: 100%;
}
#banner h3{
	font-size: 1.3em;
}

#banner span{
	margin: 0;
}
body,html{
  height: 100%;
}

#h2-alai{
	height: 200px;
	width: 200px;
}

#h2-alai h1{
	font-size: 1.2em;	
}
#h2-alai h2{
	font-size: 4em;
}

section{
		margin: 2em auto;
}

#h1-index{
	font-size: 1.8em;
}
#h1-index span{
  color: #333;
}

header{
  animation: none;
}

#header-carta #caja-login{
  left: auto;
  margin: auto;
  }
  
#caja-login{
	margin: 0;
	padding: 0;
}

#caja-publi{
	height: 100%;
	top: 30%;
}

#caja-publi ul{
  position: absolute;
  top: 6em;
  }

#caja-publi h3{
  font-size: 1.4em;
  }
  
#caja-login{
	bottom: 0.2em;
	left: 0.2em;
}



#addImg {
	bottom: 0.2em;
	padding: 0;
	right: 0.2em;
}

#addImg input{
  font-size: 1.1em;
}
  
#img-fb{
  bottom: 0em;
  margin: 2em auto 0;
  display: block;
  width: 40px;
  
}

#sct-music > iframe{
  border: 0;
  margin: 1em 0;
  min-height: 450px;
  width: 100%;
}

#header-slider{
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

#header-slider li{
	background-position: center;
	background-size: cover;
	position: absolute;
	width: 100%;
}

#header-top{
  padding: .2em 0;
  z-index: 999;
}

#header-top h1{
  font-size: 2.5em;
  text-align: center;
  width: auto;
}

#caja-publi h3{
  width: 60%;
}

#logo{
  height: 40px;
  width: 40px;
}

#nav-menu{
  background: rgba(0,0,0,.9);
  display: none;
  height: 100%;
  margin: 0;
  overflow: none;
  position: fixed;
  top: 3.2em;
  width: 100%;
  z-index: 900;
}

#ul-lehen{
  height: 100%;
  list-style: auto;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: relative;
  width: 90%;
} 

#nav-menu li{
  display: block;
  margin: .4em auto; 
} 
#ul-sub li:hover{
  background: #ffe8b3;
}
#flechaCarta{
  
  position: absolute;
  right: 1em;
  top: 1em;
  transition: transform .3s linear;
  z-index: 999;
width: 25px;
height: 25px;
cursor: pointer;
}

#li-sub{
  height: auto;
  position: relative;
}

#li-sub img{
  display: none;
  }

#ul-sub{
  display: none;
  left: 0;
  margin: auto;
  opacity: 1;
  padding: 0;
  position: relative;
  top: 0;
  z-index: 1000;
  width: 100%;
}

#ul-sub::before{
  display: none;
  }

#ul-sub li{
  background: white;
  padding: 1em;
  text-align: center;
}

#ul-sub a{
  color: #333;
  font: 1.2em 'Laila', serif;
  text-transform: uppercase;
}

#nav-menu h2{
	font: 1.5em 'Laila', serif; 
  margin: auto;
  padding: .7em 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

#header-menu #nav-menu h2{
  color: white;
}

table,form{
  width: 100%;
}

p{
	font-size: 1.1em;
	line-height: 35px;
	margin: 1.5em 0;
	text-align: left;
	width: 80%;
	border-radius: 3px;
	padding: .8em;
	border-width: 1px;
}

#menu{
  display: block;
}

main h1{
  font-size: 2.5em; 
  outline: 0;
  overflow: hidden;
  padding: 0; 
  position: relative; 
}

h2{ 
  font-size: 2.5em;
  width: 100%;
 }
h3{ font-size: 2em; }
h4,
h5{ 
	font-size: 1.4em; 
	}


#sct-carta h4:first-of-type{
	text-align: center;
  }
.boton a{
	font-size: 1.4em;
}

footer div{
	margin: 2em auto;
}

footer > div:first-of-type{
	display: block;
	margin-top: 150px;
	width: 100%;
}
footer div:last-of-type{
  width: 100%;
}
  
footer h4{
	width: 90%;
}	
footer input{
	width: 90%;
}
footer textarea{
  height: 200px;
  width: 90%;
}


#sct-carta div{
	display: inline-block;
	font-size: 1em;
	margin: 1.5em auto;
	padding: 0;
	width: 100%;
}

#sct-carta div p{
	font-size: 1.2em;
	line-height: 30px;
	margin: .8em auto;
}

#sct-carta h4:last-child{
  font-size: 1.3em;
}

#sct-desayuno div:nth-child(1),#sct-music div{ 
  min-height: 450px;
  }
  
#caja-img li,#caja-img li img{
	border: none;
  height: auto;
  margin: 0;
  padding: 0;
  width: 100%;
  }
  
#sct-galeria-pintxos .boton2{
  font-size: 1.2em;
  }


.caja-evento form{
  width: 100%;
}

#caja-img div{
	width: 85%;
height: 250px;
}

.form-act-evento input,.form-act-evento textarea{
  margin: .5em auto 1em;
  width: 90%;
  }

#sct-eventos p{
	border-radius: 0;
	margin: .5em;
}

.caja-evento img{
  margin-top: .5em;
  width: 90%;
}

#form-evento div{
  display: flex;
  padding: .4em;
  width: 50%;
}
#form-addEvento input[type='file']{
  margin: auto;
  width: 90%;
}

#form-newVideo input{
	margin: .5em auto;
	width: 90%;
}

#caja-video{
	border-left: none;
	border-right: none;
	min-height: 150px;
	width: 100%;

}

#caja-play{
	margin: auto;
}

#ul-videos{
	margin: 2em auto;
	padding: 0;
	width: 80%;
}
#ul-videos h5{
	border: none;
	width: 100%;
}
.videoCodigo{
	width: 100%;
}
#ul-videos li{
	margin: .4em auto;
	width: 90%;
}

#caja-contacto-img img{
	width: 100%;
}

#caja-proyectos-web{
	margin: 4em auto;
}
.proyect-box{
	height: 250px;
margin: .5em 0;
width: 90%;
}
.proyect-box div h2{
	font-size: 2em;
}

#caja-footer-icon{
	height: auto;
	left: 0;
	margin: 0;
	position: absolute;
	right: 0;
	top: .5em;
	width: 100%;
  }
  
  #caja-horario{
	  display: block;
  }
  
  #video-mini{
	height: auto;
	padding: 0;
	width: 100%;
  }
  
#form-newImg div,
#form-addImg div,
#form-newVideo div,
#form-borrarVideo div,
#form-evento div{
	margin: 1em auto;
}
#form-evento input,
#update,
#form-newVideo input,
#form-newImg input,
#form-addImg input{
	width: 70%;
	font-size: 1em;
}

#form-addEvento input[type="file"]:valid{
	width: 90%;
}

#form-addEvento input, #form-addEvento textarea{
	width: 90%;
}

.white > div{
	display: block;
	width: 90%;
}
.white p{
	margin: 0;
}
}  
	  /*FIN CSS MOBILES*/