@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Song+Myung');

* { margin: 0; padding: 0%; box-sizing: border-box;}
body {background: #f2f2f2;font-size: 16px;font-family: 'Roboto', sans-serif;color: #333333;}
.contenedor { max-width: 30rem; min-height: 60rem; background-color:#f2f2f2;}

header { display: block; width: 100%;}
header #site-nav .menu-toggle { clear: both; display: block;font-weight: 300;font-family: 'Lato', sans-serif; position: relative; background-image: url(../img/header.jpg);float: left; font-size: 1.5rem; ;margin: 0; color: #fff; padding: 1rem; width: 100%; height: 4rem;}
header #site-nav .menu-toggle2 { clear: both; display: block;font-weight: 300;font-family: 'Lato', sans-serif; position: relative; background-image: url(../img/header.jpg);float: left; font-size: 1.5rem; ;margin: 0; color: #fff; padding: 1rem; width: 100%; height: 4rem; }
header #site-nav .menu-toggle2 a { text-decoration: none; color: #fff;}
.container { width: 100%; z-index: 1;}



/* Secciones */
.menu-menu-container { border: 0;font-family: "Roboto";font-size: 100%; font-weight: 100; outline: 0; vertical-align: align-items: ; display: none; padding-top: 3rem;}
.menu-desplegable {width: 100%; background: #f29469; margin: auto;}
.menu-desplegable li { padding-top: 0.5rem;}
li { list-style-type: none;}
li a {width: 100%; display: block; text-decoration: none; padding: 1rem; color: #fff;font-size: 1rem; }
.a { text-decoration: underline; color: #fff;padding-bottom: 0.4rem transition: opacity .4s ease; }
li:hover { text-decoration: underline; color: #fff; padding-bottom: 0.4rem transition: opacity .4s ease; }


/* Menú footer*/
.nav_mobile {display: block;position: fixed;bottom: 0;background: #f5096d;border-top: 1px solid #e4e4e4; width: 100%; z-index: 1000; }
.nav_mobile ul {display: flex;flex-direction: row;}
.nav_mobile ul li { display: block; width: 25%; text-align: center; padding: 0.5rem; }
.nav_mobile ul li a {display: block;padding: 0.25rem 0;color: #eaadc9; text-decoration: none; font-size: 1.7rem; margin: auto; text-align: center; }
.prueba { color: #fff;}


/*Info Evento*/
.main .list { transform: none; position: static; overflow: visible;}
.main {display: -webkit-box; flex-direction: row;max-width: 960px;margin: 0 auto;margin-top: 1rem; padding: 0 1rem;}
.main .list .cnt_list-item {display: flex;flex-direction: row;padding: 1rem;background: #ffffff;border-radius: 0.25rem;transition: all 0.2s;position: relative;margin-bottom: 1rem;}
.main .list .cnt_list-item:hover {box-shadow: 0 10px 20px -7px rgba(0,0,0,0.25);}
.main .list .cnt_list-item .logo {width: 30%;height: 5rem;margin-right: 1rem;border-radius: 0.25rem;overflow: hidden;}
.main .list .cnt_list-item .logo img {width: 100%; }
.main .list .cnt_list-item .info {width: 75%;}
.main .list .cnt_list-item .info h4 {font-size: 1.5rem;font-weight: 500;margin-bottom: 1rem; width: 85%;}
.main .list .cnt_list-item .info .location { display: inline-block; font-size: 1rem; color: #000;display: inline-flex;vertical-align: middle;font-weight: 300; padding-right: 1.5rem;} 
.main .list .cnt_list-item .info .location i {color: #adadad;font-size: 1rem;line-height: 1rem;margin-top: -1px;margin-right: 0.25rem;}
.main .list .cnt_list-item .info .price { display: inline-block; font-size: 1rem; color: #000; display:  inline-flex;vertical-align: middle;font-weight: 300; padding-right: 1.5rem;}
.main .list .cnt_list-item .info .price i{color: #adadad;font-size: 1rem;line-height: 1rem; margin-top: -1px;margin-right: 0.25rem;}
.main .list .cnt_list-item .info .actions {margin-top: 1rem; display: flex; justify-content: flex-end; }
.btn.btn_primary { background: #ff5252; color: #ffffff; cursor: pointer;}
.btn { text-transform: uppercase; padding: 0.3rem 0.7rem; display: inline-block; text-align: center; }
a { text-decoration: none; }
.texto p { font-size: 0.8rem; font-weight: 300;font-family: 'Roboto', sans-serif;color: #333333; text-align: left; padding-top: 0.5rem; padding-bottom: 0.5rem;  }


/* Compra */
.row {
  display: inline-block;
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

.col-50 input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #fff;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 7px;
  margin: 0 auto;
  border: none;
  width: 8rem;
  border-radius: 0.50rem;
  cursor: pointer;
  font-size: 12px;
  display: block;
    text-align: center;
    
}

.btn:hover {
  background-color: #45a049;
}

.price a {
  color: #000; text-decoration: none;
}

hr {
  border: 1px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* login*/

.login {
max-width: 480px;
margin: 0 auto;
}


.login .logo_inicio img{ width: 100%; height: 10rem;}

.login h1 {
font-size: 2.25rem;
position: absolute;
text-align: center;
top: 3.5rem;
color: white;
left: 6.5rem;
}

.login form {
margin-top: 1rem;
    padding: 1rem;
}


.iniciar_sesion {
max-width: 480px;
margin: 0 auto;
padding: 1rem;
flex-direction: row;
text-align: center;
}

.login .separacion {
width: 40px;
height: 40px;
margin: -27px auto 0 auto;
text-align: center;
}

input {
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #333333;
background-color: #ffffff;
border: 0;
border-radius: 0.25rem;
}

.checkbox { margin-bottom: 2rem;}

.login label, .login input[type="text"], .login input[type="password"] {
display: block;
width: 100%;
    font-size: 0.9rem;
font-weight: 300;
}

.login input[type="text"], .login input[type="password"] {
margin-bottom: 1rem;
}

.facebook { color: gray;
font-size: 0.8rem;
font-weight: 100; padding: 1rem;}

.facebook:hover { text-decoration: underline;}



.iniciar_sesion {
max-width: 480px;
margin: 0 auto;
padding: 1rem;
flex-direction: row;
text-align: center;
}

.iniciar_sesion p { font-size: 0.7rem; padding-bottom: 0.5rem;font-weight: 100; }