@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

*{margin: 0; padding: 0; box-sizing: border-box;}
main {min-height: 35rem;}

h1 {font-size: 3rem; color: black; font-weight: 700;margin-top: 1rem; margin-left: 1rem;}
h2 {font-size: 3.5rem; color: #0BC4F0; font-weight: 700;margin-top: 1rem; margin-left: 1rem;}
h3 {font-size: 1.5rem; color: #EB4726; font-weight:700;margin-top: 1rem; margin-left: 1rem;}
h4 {font-size: 2rem; color: #EB4726; font-weight: 900; margin: 1rem 0;text-align: center;}
h5 {font-size: 1.5rem; color: #EB4726; font-weight: 700;margin-top: 1rem;}


hr{max-width: 48rem; margin: 0 auto;}

/*General*/
body {background: white;
    margin: 0 auto;
    font-family: 'Lato', sans-serif; 
    max-width: 80rem; margin-top: 0; margin-bottom: 0;}
  
main {max-width: 80rem; margin: 0 auto;}
a {text-decoration: none;}

/*Barra*/
.navegacion {background-color: #004258;
    padding-top: 0.8rem;
    padding-bottom: 0.5rem;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
    
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;}

.right img {padding-left: 1rem;}



.ccfadu {height: 30px;}
.lupita, .perfil, .iniciar {height: 30px;}




/*Banner*/
.banner {position: relative;}

.banner img { width: 100%; margin-bottom: 1rem;}
.banner p { background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 5rem; font-weight: 700; max-width: 35rem; position: absolute; top: 25rem;}

.info {padding-left: 2rem; padding-right: 2rem; font-size: 1rem; padding-bottom: 1rem;}
.info a{font-size: 2.5rem; color: #EB4726; font-weight: 700;}
.info p{font-size: 1.4rem;}

.extraizq p {font-weight: 700; font-size: 2rem;}




/*Evento*/
.extra {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
.extrader {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.extrader img {padding-left: 0.5rem; padding-right: 0.5rem;}

.extrader .corazon:hover {background-image:url(img/likerojo.png);    
    background-position: center;
    background-repeat: no-repeat;
}


.fecha {background-color: #EB4726; color: #EEEEEE; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;} 
.hora {background-color: #F1E857; color: #1A1A1A; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}

.fecha p {font-weight: 700; font-size: 1.6rem;}
.hora p {font-weight: 700; font-size: 1.6rem;}

.evento {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;}
.eventoder {padding: 1rem; }


/*Días*/
.dias {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: space-around;
}
.dias img {padding-top: 2rem; padding-bottom: 2.5rem;}


/*Nav 2 sugerencias, favoritos...*/
nav ul li {font-size: 1rem;color: #000;list-style: none; display: inline;}
nav ul li a {font-size: 1.5rem; color: #000; text-decoration: none; font-weight: 400; padding: 0 ;}

nav { max-width: 48rem; margin-top:1.5rem; margin-left: 4rem; margin-right: 4rem; margin-bottom: 1.5rem;}

ul {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
max-width: 48rem; }


/*Cubos de imagenes*/
.eventospasados{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
    max-width: 48rem; margin: 0 auto;}

.pasados {width: 14rem; margin: 1rem auto;}




/*Cambia el color cuando seleccionas texto*/
::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}


/*Paginas de registro*/
#registro {background: #004258; font-family: 'Lato', sans-serif;}

.mainregistro {padding-top: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;}

.ccfaduregistro {width: 20%; padding-bottom: 3rem;}


.navregistro ul {list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: space-between;}

.navregistro ul li {display: inline;}


.navregistro ul li a {
    color: #C8C8C8; 
    text-decoration: none;
    font-size: 1.5rem;
    border-bottom: 4px solid #004258;
   }

.navregistro ul li p {
    color: #C8C8C8; 
    text-decoration: none;
    font-size: 1.5rem;
    border-bottom: 4px solid #EB4726;
    padding: 0;
     font-weight: 700;}


/* Inputs */

input{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: none ;
    box-sizing: border-box;
    background-color: #0F596D;
    font-size: 1rem;
color:#fff;}


.btn { background: #EB4726;
    border: 0;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #fff; font-size: 1rem;
    width: 10rem}



.container {padding: 1rem;}
.container p {font-weight: 700; color: #EB4726; margin-top: 2rem;}
.container a {color:#fff; text-decoration: none; font-size: 1rem;}


/*Datos*/
.datos { }
.datos p {font-size: 2rem; color: #0BC4F0; font-weight: 700; }
.conta p {font-size: 1rem; color: #fff; font-weight: 400; margin-top: 1.5rem;}

.lista{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: none ;
    box-sizing: border-box;
    background-color: #0F596D;
    font-size: 1rem}


/*Agenda y calendario*/

.tituloevento {font-size: 1.4rem; color: #EB4726; font-weight: 700; margin-top: 1rem;}

.navagenda {padding-right: 3rem; padding-left: 3rem; position: relative;}

.navagenda .navbarraagenda{    
    
    width: 10rem;
    height: 0.3rem;
    position: absolute;
    top: 3.2rem;
    left: 28.6rem;
    background-color: #EB4726;border-style: none;}

.subrayado{border-bottom: 4px solid #EB4726;}
/*
.navagenda .navbarracalendario{    
    
    width: 10rem;
    height: 0.3rem;
    position: absolute;
    top: 3.2rem;
    left: -0.4rem;
    background-color: #EB4726;border-style: none;}
*/
.separadoragenda{width: 50%; margin-left: 0;}   


.contenedoragenda{padding: 1rem 1rem;}

    .eventoagenda {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}       
    .eventoizquierda{} 
    .hashtag{font-weight:700i ; color: #004258; margin-top: 0.8rem;} 
    .nombreevento {font-size: 1.3rem; color: #1A1A1A; font-weight: 900;} 
    .eventoderecha  {background-color:#F1E857; width: 30%; padding: 1.5rem; font-weight: 700; color:#1A1A1A; font-size: 2rem;}      
.horario { }   


.imgcalendario{width: 8rem; margin: 1rem auto;}

.diadelmes {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-around;max-width: 48rem; margin: 0 auto;padding: 1rem 1rem;}


/*dia particular*/

.lunes15{font-size: 2rem;
    color: #EB4726;
    font-weight: 900;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-bottom: 0.5;}

.diaparticular {position: relative;}
.diaparticular img { width: auto; margin-top: 0.5rem; margin-bottom: 1rem; max-height: 25rem;}
.diaparticular p { background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 3rem; font-weight: 700; max-width: 28rem; position: absolute; top: 18rem;}

.otrolunes {position: relative; }
.otrolunes img {width: auto; margin-top: 0.5rem; margin-bottom: 1rem; max-height: 15rem;}
.otrolunes p {background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 2rem; font-weight: 700; max-width: 20rem; position: absolute; top: 6rem;}

/*eveparticular*/
.eveparticular{display: flex; margin-bottom: 1rem; margin-top: 1rem;}

.lu{background-color: #EB4726; color: #EEEEEE; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}
.ho{background-color: #F1E857; color: #1A1A1A; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}
.escen{background-color: #EB4726; color: #EEEEEE; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}

.lu p{font-weight: 700; font-size: 1.6rem;}
.ho p{font-weight: 700; font-size: 1.6rem; }
.escen p{font-weight: 700; font-size: 1.6rem;}

.bio {margin-top: 2rem;}
.bio a {font-size: 2rem; margin-top: 2rem;}

/*segui a dúo*/
.redes {display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 15rem;}
.redes img {width: 2rem;}

/*Banda*/
.infobanda p {margin-left: 1rem;}




/*Leer más*/
.vermas span {
    display: none;
}


/*Página banda.html*/
.more {padding-left: 1rem; padding-right: 1rem; padding-bottom: 0; text-align: center;}

.fotosduocane{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: space-around;*/
	align-items: center;
	align-content: stretch;
    max-width: 48rem;
    }

.bajistaduo {width: 7.5rem; margin: 1rem auto;}


.more a {font-size: 1rem; color: #959595; font-weight: 400; text-align: center;}




/*footer*/
footer {text-align: center;
    font-size: 0.7rem;
    padding: 1rem 2rem;
    border-top: 1px solid #afafaf;
    color: #afafaf;
}



.footerregistro {text-align: center;
    font-size: 0.7rem;
    margin-top: 4rem;
    padding: 1rem 2rem;
    border-top: 1px solid #116379;
    
    
    color: #116379;
 
}











/*Celulares*/    
@media (max-width:450px) {

h1 {font-size: 2rem; color: black; font-weight: 700;margin-top: 1rem; margin-left: 1rem;}
h2 {font-size: 2rem; color: #0BC4F0; font-weight: 700;margin-top: 1rem; margin-left: 1rem;}
h3 {font-size: 1.5rem; color: #EB4726; font-weight: 700;margin-top: 1rem; margin-left: 1rem;}
h4 {font-size: 2rem; color: #EB4726; font-weight: 900; margin: 1rem 0;text-align: center;}
h5 {font-size: 1.5rem; color: #EB4726; font-weight: 700;margin-top: 1rem;}

/*pàginas de registro*/
    
.navregistro ul {list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: space-between;}

.navregistro ul li {display: inline;}


.navregistro ul li a {
    color: #fff; 
    text-decoration: none;
    font-size: 1.2rem;
    border-bottom: 4px solid #004258;
   }

.navregistro ul li p {
    color: #fff; 
    text-decoration: none;
    font-size: 1.2rem;
    border-bottom: 4px solid #EB4726;
    padding: 0;
     font-weight: 700;}
    
            
    
    
    /*General*/
body {background: white;
    margin: 0 auto;
    font-family: 'Lato', sans-serif; 
    max-width: 28.13rem; margin-top: 0; margin-bottom: 0;}
  
main {max-width: 28.13rem; margin: 0 auto;}
a {text-decoration: none;}
    
    /*Banner*/
  .banner {position: relative;}
.banner img { width: 100% ; margin-bottom: 0;}
.banner p { background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 3rem; font-weight: 700; max-width: 35rem; position: absolute; top: 10rem;}
   
    .extraizq p {font-weight: 700; font-size: 1.2rem;}
    
    
    /*Evento*/
.extra {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.extrader {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.extrader img {padding-left: 0.5rem; padding-right: 0.5rem; width: 2.5rem;}


.fecha {background-color: #EB4726; color: #EEEEEE; width: 10rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;} 
.hora {background-color: #F1E857; color: #1A1A1A; width: 10rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}

.fecha p {font-weight: 700; font-size: 1rem;}
.hora p {font-weight: 700; font-size: 1rem;}

.evento {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
    margin-top: 1rem;}
    
.eventoder {padding: 1rem 0; text-align: center; }
    
    
    /*Días*/
.dias {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: space-around;}
.dias img {padding-top: 1rem; padding-bottom: 0rem;; max-width:100%}
.dias a {max-width: 40%;}
    
    /*Nav 2 sugerencias, favoritos...*/
nav ul li {font-size: 1rem;color: #000;list-style: none; display: inline;}
nav ul li a {font-size: 1.5rem; color: #000; text-decoration: none; font-weight: 400; padding: 0; width: 10rem;}

nav { max-width: 48rem; margin-top:1.5rem;margin-left: 0; margin-right: 0; margin-bottom: 1.5rem;}

ul {display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
     }


/*Cubos de imagenes*/
.eventospasados{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: space-around;*/
	align-items: center;
	align-content: stretch;
    max-width: 48rem; margin: 0 1rem;}

.pasados {width: 6.5rem; margin: 1rem auto;}
.eventopas a { font-size: 1.5rem;}
   
    /*Agenda y calendario*/

.tituloevento {font-size: 1.4rem; color: #EB4726; font-weight: 700; margin-top: 1.5rem;}

.navagenda {padding-right: 2rem; padding-left: 2rem; position: relative;}

.navagenda .navbarraagenda{    
    
    width: 10rem;
    height: 0.3rem;
    position: absolute;
    top: 3.2rem;
    left: 28.6rem;
    background-color: #EB4726;border-style: none;}


.navagenda .navbarracalendario{    
    
    width: 10rem;
    height: 0.3rem;
    position: absolute;
    top: 3.2rem;
    left: -0.4rem;
    background-color: #EB4726;border-style: none;}

.separadoragenda{width: 50%; margin-left: 0;}   


.contenedoragenda{padding: 1rem 1rem;}

    .eventoagenda {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}       
    .eventoizquierda{} 
    .hashtag{font-weight:700i ; color: #004258; margin-top: 0.8rem;} 
    .nombreevento {font-size: 1.3rem; color: #1A1A1A; font-weight: 900;} 
    .eventoderecha  {    background-color: #F1E857;
    width: 40%;
    padding: 1rem;
    font-weight: 700;
    color: #1A1A1A;
    font-size: 0.8rem;}      
 


.imgcalendario{width: 8rem; margin: 1rem auto;}

.diadelmes {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;max-width: 48rem; margin: 0 auto;padding: 0 0.5rem;}

    .diadelmes img {width:4rem; margin: 0.2rem;}

    
    
    .ccfaduregistro {width: 50%;}
    
    /*segui a dúo*/
.redes {display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 5rem; padding-bottom: 1rem;}
.redes img {width: 2rem;}
    
      
    
    
    /*dia particular*/
.diaparticular {position: relative;}
.diaparticular img { max-width: 100%; margin-top: 0.5rem; margin-bottom: 0; }
.diaparticular p { background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 2rem; font-weight: 700; max-width: 28rem; position: absolute; top: 7rem;}

.otrolunes {position: relative; }
.otrolunes img {width: 100%; margin-top: 0.5rem; margin-bottom: 1rem; }
.otrolunes p {background-color: #AFAFAF; opacity: 0.8; padding: 1rem; font-size: 2rem; font-weight: 700; max-width: 20rem; position: absolute; top: 6rem;}

/*eveparticular*/
.eveparticular{display: flex; margin-bottom: 1rem; margin-top: 1rem;}
.info p {text-align: center;}

.lu{background-color: #EB4726; color: #EEEEEE; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}
.ho{background-color: #F1E857; color: #1A1A1A; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}
.escen{background-color: #EB4726; color: #EEEEEE; width: 15rem; text-align: center; padding-top: 0.3rem; padding-bottom: 0.3rem;}

.lu p{font-weight: 700; font-size: 1rem;}
.ho p{font-weight: 700; font-size: 1rem; }
.escen p{font-weight: 700; font-size: 1rem; }

.bio {margin-top: 1rem;}
.bio a {font-size: 1rem;}

/*segui a dúo*/
.redes {display: flex; flex-wrap: nowrap; justify-content: space-between; }
.redes img {width: 2rem;}

/*Banda*/
.infobanda p {margin-left: 1rem;}
}