@font-face {
    font-family: Handlee;
	src: url(../fonts/Handlee-Regular.woff2),
         url(../fonts/Handlee-Regular.woff),
	     url(../fonts/Handlee-Regular.ttf);
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Medium.woff2),
         url(../fonts/Poppins-Medium.woff),
	     url(../fonts/Poppins-Medium.ttf);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Light.woff2),
         url(../fonts/Poppins-Light.woff),
	     url(../fonts/Poppins-Light.ttf);
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
*{
	margin: 0; padding: 0;}
body{
	font-family: 'Poppins', sans-serif; line-height: 1.8em; text-align: center; font-weight: 300; font-size: 1.2em; color: #555;}
img a, a, a img{
	text-decoration: none;}
#imagen img, img{
	width: 100%; height: auto;}
.neg{
	font-weight: bold;}
.noneg{
	font-weight: normal;}
#cabecera{ border-top: 6px solid #47bac2;}
.redes{width: 50px; position: absolute; top: 10px; right: 5px;}
.redes a{display: block; padding: 5px;}
.redes a:hover{opacity: 0.5;}
#menu ul li{
	list-style-type: none; text-align: center;}
#menu ul li a{
	color: #00a1ac; padding: 20px 0; display: block; font-size: 18px;}
#menu ul li a:hover{color: #777;}
#menu .rosa a{color: #fb3fb6;}
p{ 	margin: 8px 0;}
h1{color: #00a1ac; margin-top: 100px; font-size: 70px; font-weight: 300;}
h1 span, .frase{font-family: 'Handlee', cursive; display: block; color: #fb3fb6; margin: 30px 0; font-size: 33px;}
h3{margin-top: 40px;}
.trio{ margin-top: 100px;}
.trio .boton a:hover{}
.rosa .izdo{border: 15px solid #fb3fb6; border-radius: 5px;}
.azul .izdo{border: 15px solid #00a1ac;border-radius: 5px;}
.naranja .izdo{border: 15px solid #f8b133;border-radius: 5px;}
.rosa h2, h3{color: #fb3fb6; }
.azul h2{color:  #00a1ac;}
.azul .frase{color: #00a1ac;}
.naranja h2{color: #f8b133;}
.duo, .disfraces{margin-top: 100px;}
.duo h2{font-size: 26px; font-weight: 300; margin-top: 30px;}
.duo .m20{margin-top: 20px;}
.duo .m50{margin-top: 50px;}
.duo .izdo img{display: block;}
.mayor{ font-size: 1.3em; line-height: 2.5em;}
footer{	background: url("../imagenes/banderines.jpg") repeat-x center top; padding-top: 80px; margin-top: 100px;}
footer .logo{ width: 200px; margin: 0 auto; color: #47bac2; line-height: 22px; font-size: 16px;}
address{	font-style: normal; display: inline; font-size: 15px;}	
.nota{margin-top: 100px;}
.borra{	clear: both;}
.boton a{ display: block; background: #47bac2; color: #fff; padding: 8px 0; width: 250px; margin: 20px auto 60px auto;
	text-transform: uppercase; font-size: 15px; font-weight: bold; border-radius: 5px; border: 1px solid #47bac2;}
.boton a:hover{ background: #fff; color: #47bac2; border: 1px solid #47bac2;}
.rosa .boton a{background: #fb3fb6; border: 1px solid #fb3fb6;}
.rosa .boton a:hover{background: #fff; border: 1px solid #fb3fb6; color: #fb3fb6;}
.naranja .boton a{background: #f8b133; border: 1px solid #f8b133;}
.naranja .boton a:hover{background: #fff; color: #f8b133; border: 1px solid #f8b133;}
.deco{font-size: 16px; font-weight: 600; text-transform: uppercase;}
.tel a{color: #00a1ac; font-size: 40px; display: block; padding: 15px 0; }
.tel a:hover{color: #777;}
.instagram{margin-top: 80px; }
.instagram a{width: 80px; display: block; margin: 0 auto;}
.instagram a:hover{opacity: 0.4;}
.hablamos .rosa{color: #fb3fb6; border-bottom: 5px dotted #fb3fb6;}
.hablamos .verde{color: #70c859; border-bottom: 5px dotted #70c859;}
.hablamos .naranja{color: #f8b133; border-bottom: 5px dotted #f8b133;}
.hablamos .rosa, .hablamos .verde, .hablamos .naranja{display: inline-block; padding: 15px 8px; font-weight: bold;}
footer{position: relative;}
.euskera img{width: 100%;}
footer .boton a{width: 140px;}
#aviso{ 
	font-size: 0.7em; background: #47bac2; color: #fff; border-top: 5px solid #fb3fb6;}
#aviso a{
	color: #fff; display: inline-block; padding: 5px 0;}

.rslides li{position: relative;}
.rslides li img{position: relative; z-index: 1;}
.rslides li h3{position: absolute; z-index: 2; color: #fff; font-weight: 800; 
	text-transform: uppercase; text-shadow: 0px 5px 10px #00659f;}
.suelta{width: 90%; margin: 80px auto 0 auto; max-width: 600px;}
.mapa{padding: 100px 0; background: url( "../imagenes/mapa.jpg") no-repeat center center; background-size: cover; margin-top: 100px;}

@media only screen 
and (max-width : 700px){
	body{font-size: 1.1em; line-height: 1.9em;}
.pantalla, .tablet{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 20px;}
	#logo{	width: 300px; margin: 60px auto 20px auto;}
	#menu{	width: 400px; margin: 30px auto 0 auto;}
	#menu ul li{ float: left; width: 27%}
	#menu ul .uno{width: 20%;}
	#menu ul li a{font-size: 16px;}
	h1{font-size: 46px;}
	h1 span{font-size: 27px;}
	.trio .tercio {width: 330px; margin: 40px auto 0 auto;}
	.trio .card .back{text-align: center !important; }
	.trio .card .back h5{font-size: 24px !important;}
	.duo .izdo{width: 80%; max-width: 300px; margin: 100px auto 0 auto;}
	.duo .dcho{margin-top: 0;}
	.duo .dcho .boton {text-align: center;}
	.duo h2{margin-top: 30px;}
	.duo .boton a{margin: 20px auto;}
	.disfraces img{width: 45%; display: inline-block; margin: 1%;}
	.nota{font-size: 0.9em;}
	.euskera{width: 80px; margin: 30px auto; }
	.rslides li h3{position: relative; background: #00a1ac; font-size: 20px; line-height: 26px; 
		padding: 10px; margin-top: 0; display: inline-block; z-index: 0;}
}

@media only screen 
	and (max-width : 600px){
	.disfraces img{width: 70%; display: block; margin: 30px auto;}
}

@media only screen 
and (min-width : 701px)
and (max-width : 999px) {
	.movil, .tablet{ display: none;}
	.container { width: 100%; margin: 0 auto;}
	.todo {	margin: 0 40px;}
	#logo{	width: 280px; 	float: left; margin: 20px 0 10px 0;}
	#menu{	width: 450px; float: right; margin-top: 24px;}
	#menu ul li{ float: left; width: 27%}
	#menu ul .uno{width: 20%;}
	#menu ul li a{font-size: 15px;}
	h1{font-size: 60px;}
	.trio{width: 610px; margin: 0 auto;}
	.trio .card .back{text-align: center !important; }
	.trio .card .back h5{font-size: 24px !important;}
	.trio .tercio{width: 250px; margin: 30px 20px 0 20px; float: left;}
	.trio .tercio img{width: 100%;}
	.trio .borra {display: none;}
	.trio .borra-boton-t{clear: both;}
	.trio .boton a{width: 250px; height: 138px; float: left; margin: 70px 20px 0 20px; border: 15px solid #00a1ac; padding-top: 105px;}
	.duo .izdo{width: 300px; margin: 100px auto 0 auto;}
	.duo .dcho{margin-top: 0;}
	.duo .dcho .boton {text-align: center;}
	.duo h2{margin-top: 30px;}
	.duo .boton a{margin: 20px auto;}
	.disfraces img{width: 30%; display: inline-block; margin: 1%;}
	.euskera{width: 80px; position: absolute; right: 20px; bottom: 90px;}
	.rslides li h3{top: 70%; left: 6%; font-size: 40px; line-height: 40px; text-align: left;}
}
@media only screen 
and (min-width : 701px)
	and (max-width : 869px) {
	#logo{	width: 300px; margin: 60px auto 20px auto; float: none;}
	#menu{	width: 500px; margin: 30px auto 0 auto; float: none;}
	#menu ul li{ float: left; width: 27%}
	#menu ul .uno{width: 20%;}
	#menu ul li a{font-size: 17px;}
}
	
@media only screen 
and (min-width : 1000px){ 
	.movil, .tablet{
	display: none;}
	.container {	width: 1000px; margin: 0 auto;}
	.todo {	margin: 0 50px; }
	#cabecera .todo{margin: 0 20px;}
	#logo{	width: 320px; 	float: left; 	margin: 30px 0 10px 0;}
	#menu{	width: 500px; float: right; font-size: 0.8em; margin-top: 35px;}
	#menu ul li{	float: left; width: 30%}
	#menu ul .uno{width: 20%;}
	.trio .tercio{width: 27%; float: left;}
	.trio .tercio-central{margin: 0 5%;}
	.duo .izdo{width: 35%; float:left;}
	.duo .dcho{width: 55%; float: right; text-align: left;}
	.duo .dcho .boton {text-align: center;}
	.duo h2{margin-top: 80px;}
	.duo .boton a{margin-left: 70%;}
	.disfraces img{width: 28%; display: inline-block; margin: 1%;}
	.euskera{width: 100px; position: absolute; right: 20px; bottom: 60px;}
	.rslides li h3{top: 70%; left: 6%; font-size:  56px; line-height: 56px; text-align: left;}
}
@media only screen 
and (min-width : 1400px){ 
	.container {
	width: 1400px; margin: 0 auto;}
	.disfraces img{width: 18%; display: inline-block; margin: 1%;}
	.duo .izdo{width: 25%;}
	.duo .dcho{width: 65%; }
	.rslides li h3{top: 60%; font-size: 70px; line-height: 70px; }
}
@media only screen 
and (min-width : 1000px)
and (max-width : 1399px) {
	.decoracion h2{ margin-top: 10px;}
}