body {
    transition: background-color .5s; padding:0; margin:0;
}

img {margin:0;}
a {margin:0;}

.wrapper { max-width:48rem; margin:auto;}

/* sidenav */ 
.sblink {border-bottom: 0.1rem solid #eeeeee;}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0; line-height: 0.1rem;
    right: 0;
    background-color: #333333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 3rem;
}

.sidenav a {
    padding: 2rem 0.5rem 3rem 0.5rem;
    text-decoration: none;
    font-size: 4rem; text-align:center;
    color: #00ff99;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px; color: #00ff99;
}

#main {
    transition: margin-left .5s;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* main */

#main a {display:inline-block;margin:0;}

/* header & nav */
header {text-transform: uppercase; background: #333333; text-align: center; width:100%; top:0px; left: 0px; color:white; font-family:dosis; padding: 0.5rem 0 ;position:fixed;}
header a {font-size:35px; text-decoration: none; color: white; transition-duration: 1s; font-family: dosis; }
header a:hover {background: transparent;}

nav {margin-right: 3rem; color: white;float: right;font-size:30px;}
nav ul {
    list-style-type: none;
    overflow: hidden;
}
nav ul li {
    float: right;
}
nav ul li a {
    display: block;
    margin: 0.15rem 0.5rem;
    padding: 0.5rem;
	color: white;
	font-family: biryani;
	font-size:0.47rem;
    text-decoration: none;
}

nav ul li a:hover { color: white;}


nav ul li ul {
  display: none;
  position: absolute; top:5rem;
  width: 50px; background: #333333; text-align:left;
}

nav ul li ul li {
}

nav ul li ul li:first-child { border-top: none; }

nav ul li ul li a {
}

nav ul li ul li a:hover {  }

section a {margin:0;}

.search {float:left; font-size:30px; color: #00ff99;margin-left: 3rem; display: inline-block;}

.fadu {display: inline-block;}
.fadu a:hover {background: transparent;}
.fadu img {width:100px;}
	
.imagen {margin-bottom:0;}	
.imagen img {width:100%; margin-bottom:0; height:75%;}

/* botón */
.thebutton {width:33.33%; height: 25%; font-size:1rem; color:white; text-align:center; float:left; padding: 3.5rem 0; font-family: dosis; font-weight: bold; text-decoration: none;}
.thebutton img {width:4rem;}

.thebutton2 {width:33.33%; height: 25%; font-size:1rem; color:white; text-align:center; float:left; padding: 3.5rem 0; font-family: dosis; font-weight: bold; text-decoration: none;}
.thebutton2 img {width:4rem;}

/* imagen de titulo */
.titlehead {width:100%; height: 15rem; background-size: 100% auto;}
.titlehead2 {width:100%; height: 26rem; background-size: 100% auto;}
.spacer {padding-top:8rem;}
.pregunta {color: white; font-family: dosis; font-size: 1rem; background: #333333; width:10rem; text-align:right; padding: 0.5rem;}
.colortitle {background: #00ff99; width: 100%; height: 15rem;}

/* Información de lugar */
.whole {border-bottom: 0.1rem solid black; height: 13rem;}
.whole:first-child {margin-top:3.5rem;}
 
 .info {margin:1rem 0 0 0 ;}
 .info a {text-decoration:none;}
.placetitle {font-family: dosis; color: white; font-size:0.9rem;text-transform: uppercase;  padding: 0.4rem; font-weight: bold;text-decoration:none; margin-top:1rem;}
.placetitle a {text-decoration:none;}
.miniinfo {font-family: open sans; margin-top:0.3rem; font-size:0.75rem; margin-right:0.7rem;}

.info2 {margin:0.5rem 0 0 0.5rem ; float: left;}
.placetitle2 {font-family: dosis; color: white; font-size:0.8rem;text-transform: uppercase; width:8rem; padding: 0.4rem; font-weight: bold;}
.miniinfo2 {font-family: open sans; margin-top:0.3rem; font-size:0.6rem; width:8rem;}

.whole2 {height: 9.5rem;}

/* Espacio */ 
.porcentaje {width: 50%; display:inline-block;font-family: dosis; color: white; font-size: 2rem; text-transform:uppercase; text-align:center; }
.grayspace {background: #333333;width: 50%; color: white; font-family: open sans; font-size: 1rem;display: inline-block;}
.grayspace .info {margin-left: 1rem; width:7rem;}
.grayspace .placetitle {width:7rem;}
.grayspace .miniinfo {width:6rem;}
.grayspace .miniboton img{width:1rem;}

.miniwrap {background:#333333;}

.triple {font-family: dosis; text-transform: uppercase; padding: 0.5rem 0; text-align:center; width: 33.33%;color: white; font-weight: bold; float: left; font-size: 1rem;}
.triple2 {background: #333333; font-family: open sans; padding: 0.2rem 0; width: 33.33%; color: white; float: left;}

/* Rating */
.rating {
  unicode-bidi: bidi-override; font-size: 1.8rem;
  direction: rtl; text-align:left;z-index:0;
}
.rating > span {
  display: inline-block;
  position: relative;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

/* miniboton */
.minibotonbar {margin-left: 2.4rem; }
.miniboton {padding: 0.5rem;}
.miniboton img {width: 1.5rem; }

.minibotonbar2 {float: right; margin-top: 0; margin-right: 1rem;}
.miniboton2 {padding: 0.6rem; }
.miniboton2 img {width: 1rem; }

/* lista */ 
.sinimagen {float: left; margin: 1rem 1rem 0rem 1rem; background: #c453a1; padding: 1.4rem;}
.sinimagen img {width: 5rem;}

.conimagen {float: left; margin: 1rem 1rem 0rem 1rem; background: red; width:8rem; height: 8rem;}

/* ABC */
.letra{text-decoration: none;font-family: 'Dosis', sans-serif; width:33.33%; height: 25%; font-size:40px; color:white; text-align:center; float:left; padding: 3rem 0;background:#333333;}
.letra:hover{transition-duration: 1s; background: #00ff99;}

.innerwrapper {margin-top:3.7rem;}

/* AYUDA - AVISOS - LEGALES*/


li {list-style-type: none;}
.linkslegales {font-family: 'Open sans', sans-serif; font-weight: 200; margin:0;padding: 0; text-decoration: none;color: #3f8e6e;text-align: center;}
.linkslegales: hover{transition-duration: 1s; color: #154d36;}
h1 {font-family: 'Dosis', sans-serif; background: #acd19d; margin:auto; padding:1rem;}
.privacidad {font-family: 'Dosis', sans-serif; background: #bdddb1; margin:auto; padding:1rem; }
.avisos {font-family: 'Dosis', sans-serif;background: #d2ebc8; padding:1rem;}
h2{font-family: 'Open sans', sans-serif; font-weight: 200; font-size: 0.75rem;}
h3{font-family: 'Open sans', sans-serif; font-weight: 500; color:#67BD9A;}
p {font-family: 'Open sans', sans-serif; font-weight: 200;}
main {margin: 0; width: 100%; padding: 0;}
footer {font-size:0.50rem; text-transform:uppercase; background: white; border: 0.08333rem solid #e0e0e0; padding: 1rem; text-align: justify;font-family: 'Open sans', sans-serif; font-weight: 200; color: gray; max-width:46rem;z-index: 0;} 
.iconos {float: right; margin-right: 0 2rem 0 0; padding: auto;}

/*INICIO*/

.inicio {background-image: url(../img/inicio.jpg);background-size: auto 50rem;}
.logo {display: flex; flex-flow: row; width:10rem; padding:6rem;text-align:center;margin: 0 auto;}
.logo2 {width:8rem;padding:6rem;text-align:center;margin: 0 auto;}
.logo2 img {width:50%;}
.footerblanco {float: left; font-size:0.50rem; text-transform:uppercase; border: 0.08333rem solid #e0e0e0; padding: 1rem; text-align: justify;font-family: 'Open sans', sans-serif; font-weight: 200; color: gray; max-width:46rem; z-index: 0;}
@media all and (max-width: 20rem) 
{body {flex-flow: column;}}

.iconos {margin-right:1rem; margin-top:1.5rem;}
    
/*LOADING*/
#circleG{
	width:56px;
	margin:auto;
}
.circleG{
	background-color:rgb(255,255,255);
	float:left;
	height:12px;
	margin-left:6px;
	width:12px;
	animation-name:bounce_circleG;
		-o-animation-name:bounce_circleG;
		-ms-animation-name:bounce_circleG;
		-webkit-animation-name:bounce_circleG;
		-moz-animation-name:bounce_circleG;
	animation-duration:2.24s;
		-o-animation-duration:2.24s;
		-ms-animation-duration:2.24s;
		-webkit-animation-duration:2.24s;
		-moz-animation-duration:2.24s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	border-radius:8px;
		-o-border-radius:8px;
		-ms-border-radius:8px;
		-webkit-border-radius:8px;
		-moz-border-radius:8px;
}
#circleG_1{
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}
#circleG_2{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}
#circleG_3{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

@keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgba(0,0,0,0.37);
	}

	100%{}
}
@-o-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgba(0,0,0,0.37);
	}

	100%{}
}
@-ms-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgba(0,0,0,0.37);
	}

	100%{}
}
@-webkit-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgba(0,0,0,0.37);
	}

	100%{}
}
@-moz-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgba(0,0,0,0.37);
	}

	100%{}
}

.imagentriple img {width:33.33%;margin-bottom:0;padding-bottom:0;}

.parrafo1 {margin:1rem; text-align:justify;}
.parrafo2 {margin:1rem; text-align:justify;}
.parrafo3 {margin:1rem; text-align:justify;}

.av {margin: 1rem; text-align:justify; font-size:0.7rem;}
.av h3 {margin-bottom:0.2rem; padding:0;}
.av p {margin-top:0;}

form {font-family: open sans; font-size:0.7rem; color:white;}
input[type=text]{background:transparent; border-bottom: 0.1rem solid grey; border-top:none;border-right:none;border-left:none; width:15rem; margin-bottom:0.5rem; color:white;}
input[type=text]:focus {border-bottom: 0.1rem solid #00ff99; box-shadow:none; }

::-webkit-input-placeholder {
   color:white;
}

:-moz-placeholder { /* Firefox 18- */
   color:white;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color:white;  
}

:-ms-input-placeholder {  
   color:white;  
}
.forma {margin:auto; width:15rem;}

.botondeaceptar {background: #333333; color: white; padding: 0.5rem; width:5rem; text-align:center; float: right; font-family: dosis; text-transform:uppercase; font-size:0.7rem;}

.sidelink {font-family: dosis; font-size:1rem;}

.comment {padding:0.6rem; background: #eaeaea; font-family: open sans; width: 20rem; margin:0.6rem auto;font-size:0.9rem;}
.nom {font-family: dosis; text-transform:uppercase; font-weight:bold;}
.comentar {padding: 0.5rem 0.5rem 0 0.5rem; background: #00ff99; }
.comentar i {font-size:1rem;}
.comentar form input {background:white; width:80%; color:grey; border:none; padding:0.5rem; margin-right: 1rem;}
.comentar::-webkit-input-placeholder {
   color:white;
}

.comentar:-moz-placeholder { /* Firefox 18- */
   color:white;  
}

.comentar::-moz-placeholder {  /* Firefox 19+ */
   color:white;  
}

.comentar:-ms-input-placeholder {  
   color:white;  
}