@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i|Titillium+Web:300,300i,400,400i,700,700i');



/* index */
#app{margin: auto; width: 320px; height: 100vh; background-image: url(../img/background-registrarse.jpg); font-family: 'Montserrat', sans-serif;}

.contenido{margin: auto; padding: 60% 30% 30% 30%;  }
.contenido img{padding-bottom: 80%;}
.btn-registrasre{padding: 0.8rem; background-color: #fff;    
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
color: #ec518c;
text-decoration: none;
border-radius: 0.5rem;}
.btn-registrasre:hover{background: rgba(0,0,0,0); color: #fff; box-shadow: inset 0 0 0 3px #fff;}


/* index2 */
#app2{margin: auto; width: 320px; background-color: #f6c574; font-family: 'Montserrat', sans-serif; text-align: center;}
.contenido2{margin: auto; padding: 60% 10% 30% 10%;}

.formulario{padding-bottom: 20%; align-items: center; flex-direction: column; }
.formulario .nombre{padding-bottom: 0%; padding-top: 8%; font-family:'Titillium Web', sans-serif; font-size: 0.8rem; color: #fff;}
.formulario .pass{padding-bottom: 2%; font-family:'Titillium Web', sans-serif; font-size: 0.8rem; color: #fff; }
.formulario .btn{background-color: #F49C76; border-radius: 0.5rem; color:#fff; padding: 3% 10%; font-family:'Titillium Web', sans-serif; font-weight: 700; border: 0px;}
.formulario input{border-radius: 0.3rem; border: 0px;}

.contenido2 h1{font-size: 1.2rem; color: #fff;}
.google img{width: 80%;}
.face img{width: 80%;}



/* index3 */
#app3{margin: auto; width: 320px; ; background-color: #FF518C; font-family: 'Montserrat', sans-serif; text-align: center;}
.arriba{padding-top: 3%; padding-bottom: 6%; color: #fff; }
.arriba p{font-size: 2rem;}
a{padding: 0%; color: #fff; font-family:'Montserrat', sans-serif; font-weight: 300; font-size: 1.2rem; text-decoration: none; }
.arq{background-color: #FF5D8C; padding: 6%; }
.dg{background-color: #FF6F8C; padding: 6%;}
.din{background-color: #FF848C; padding: 6%;}
.di{background-color: #FF9B8C; padding: 6%;}
.dt{background-color: #FFAF8C; padding: 6%;}
.dis{background-color: #FFC58C; padding: 6%;}
.dp{background-color: #FFDB8C; padding: 6%;}



/* index4 */
#app4{margin: auto; width: 320px; ; background-color: #ff9b8c; font-family: 'Montserrat', sans-serif; }
#app4 .arriba{text-align: center; padding-top: 1%; padding-bottom: 4%;}
.externos{padding: 5% 2% 9% 2%; background-color: #ffaf8c}
.externos p{color: #fff; font-size: 0.8rem;}
.checkbox{display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
    color: #fff;
    font-style: italic;
    }
.externos .checkbox .check-2{padding-top: 0.8%;}

.internos{padding: 5% 2% 9% 2%; background-color: #ffc58c}
.internos p{color: #fff; font-size: 0.8rem;}
.internos .checkbox{float: inherit; display: inline-block; padding-left: 9%;}

.sig{text-align: center; padding: 2%; background-color: #ffdb8c;}
.sig a{font-weight: 400; color: #ff518c;}

.check-1 label .campo{margin-bottom: 20%;}
.check-2 label .campo{margin-bottom: 20%;}



/* index5 */
#app5{margin: auto; width: 320px;; background-color: #6adab4; font-family: 'Montserrat', sans-serif; }
#app5 .arriba{text-align: center; padding-top: 1%; padding-bottom: 10%;}
.notif{padding: 20% 2%; background-color: #6ac9b4; text-align: center; }
.notif a{font-size: 4rem; font-weight: 400; text-align: center; }
.notif2{padding: 20% 2%; background-color: #6ab3b4; font-size: 4rem; text-align: center;}
.notif2 a{font-size: 4rem; font-weight: 400; text-align: center; }




/* index6 */
#app6{margin: auto; width: 320px; height: 100%; background-image: url(../img/background-inicio.jpg); font-family: 'Montserrat', sans-serif; }

/* NAV-MENU ARRIBA */
nav{margin:auto; text-align:left; width: 100%; height: 31px; max-width:320px; top:50px; position:absolute }


.contenido6 .logo6{padding-bottom: 80%; margin: auto; padding: 10% 35%; width: 30%; opacity: 0.5;}
.filas{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
    text-align: center;
}
.filas article{max-width: 8rem; padding-bottom: 10%;}
.filas article h6{color: #fff; font-size: 0.6rem; font-weight: 300;}
.filas article img{width: 80%;}
.iconos{margin-top: 10%;}



/* geoloc.html */
.mapa iframe{width: 320px; height: 100vh;}



/* eventosdiarios.html  /  eventosarq.html */
#eventosdiarios{margin: auto; width: 320px; ; background-color: #6adab4; font-family: 'Montserrat', sans-serif; }
.eventos{margin: auto; padding: 0% 6% 3% 6%; display: inline-block;}
.eventos img{float: left; padding-right: 0.5rem;}
.info{background-color: rgba(255, 255, 255, 0.5); height: 100px; width: 170px;}
.eventos .info{float: right; font-size: 0.8rem; color: #6a4bb4;}
.eventos .info p{padding: 0% 10%; font-size: 10px; text-align: center; }
.eventos .info h4{text-align: center; padding-bottom: 3%; }
.arriba h2{text-align: center;}



/* buscarreras.html */
.arribabuscar{padding-top: 10%; padding-bottom: 20%; color: #fff; }




/* tuseventos.html */
#tuseventos1{margin: auto; width: 320px; background-image: url(../img/background-inicio.jpg); font-family: 'Montserrat', sans-serif; }
.eventoanish{margin: auto; padding-left: 8%; max-width: 320px; }
.eventoanish img{width: 90%; box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.5);}
.infoanish{background-color: rgba(255, 255, 255, 0.8); height: 120px; width: 90%; margin-top: -9%;}
.eventoanish .infoanish p{padding: 0% 10%; font-size: 14px; text-align: center; color: #6a4bb4; }
.eventoanish .infoanish h4{text-align: center; padding-top: 5%; color: #6a4bb4;}

.maseventos{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch; color: #6a4bb4;
    padding-top: 5%;
    
}
.maseventos .otroseventos .info{background-color: rgba(255, 255, 255, 0.5); height: 80px; width: 130px; padding-top: 1%;}
.maseventos .otroseventos .info p{padding: 0% 10%; font-size: 12px; text-align: center; }
.maseventos .otroseventos .info h4{text-align: center; }
.maseventos .otroseventos img{}

.btn-maseventos{text-align: center; padding: 2%; background-color: #6adab4; margin-top: 4%;}
.btn-maseventos a{font-weight: 400; color: #FFF;}



/* eventoanish.html */
.anish-2{margin: auto;max-width: 320px; height: 100%; }
.anish-2 img{width: 100%;}

.infoanish-2{ width: 90%; margin: auto;}
.anish-2 .infoanish-2 p{padding: 0% 10%; font-size: 14px; text-align: center; color: #fff; }
.anish-2 .infoanish-2 .text{padding: 0% 10%; font-size: 14px; text-align: center; color: #fff; margin-top: -3%; }
.anish-2 .infoanish-2 h4{text-align: center; color: #fff; margin-bottom: 14%; margin-top: -8%; font-size: 1.2rem;}
.anish-2 .infoanish-2 h3{text-align: center; color: #fff; font-weight: 300; font-size: 1.8rem; font-style: italic; }



/* FOOTER */
footer{margin: auto; max-width: 320px; background-color:#6a4bb4; font-family:'Titillium Web', sans-serif;}
.btn-footer{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
    text-align: center;
    padding-top: 5%;
    padding-bottom: 3%;
}
footer .btn-footer article {max-width: 33%;}
.btn-footer article img{width: 50%;}
footer .btn-footer article h6{color: #fff; font-size: 0.8rem; font-weight: 400; margin: 0.2rem; }




/* guardar.html */
#guardar{margin: auto; width: 320px; height: 100vh; background-color: #ebca82; font-family: 'Montserrat', sans-serif; }




/* menu-perfil.html */
#perfil1{margin: auto; width: 320px; background-color: #6adab4; font-family: 'Montserrat', sans-serif; }
.perfil{margin: auto; max-width: 320px; }
.perfil img{margin: auto; margin-top: 10%; margin-left: 15%; width: 70%;}

.infoperfil-2{ width: 90%; margin: auto; margin-bottom: 15%;}
.perfil .infoperfil-2 p{padding: 0% 10%; font-size: 14px; text-align: center; color: #fff; }
.perfil .infoperfil-2 .text{padding: 0% 10%; font-size: 14px; text-align: center; color: #fff; margin-top: -3%; }
.perfil .infoperfil-2 h4{text-align: center; color: #fff; margin-bottom: 14%; font-size: 1.2rem;}

.boton{text-align: center; padding-bottom: 10%;}
.btn-perfil{padding: 0.3rem 3rem; background-color: #61a697; font-family: 'Titillium Web', sans-serif; font-weight: 700; color: #fff; text-decoration: none; border-radius: 0.5rem;}
.btn-perfil:hover{background: rgba(0,0,0,0); color: #fff; box-shadow: inset 0 0 0 3px #fff;}




/* config.html */
.config{margin: auto; text-align: center; padding-bottom: 12%;}
.config p{color: #fff; font-size: 1.3rem;}
.config .check-config{float: inherit; display: inline-block; }
.check-config label{font-style: italic;}

.boton-config{text-align: center; padding-top: 8%;}
.btn-config{padding: 0.3rem 3rem; background-color: #fff; font-family: 'Titillium Web', sans-serif; font-weight: 700; color: #c4a259; text-decoration: none; border-radius: 0.5rem;}
.btn-config:hover{background: rgba(0,0,0,0); color: #fff; box-shadow: inset 0 0 0 3px #fff;}














/* MENU */

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 375px;
    margin: 0 auto;
}

.loading-wrapper {
    background-color: #f5b859;
    display: flex;
    flex-direction: column;
    height: 100vh;
}


.nav-inicio {
   
   
   
    height: 50px;
    color: white;
    display: block;
    position: fixed;
    top: 0;

}


.content {
    padding-top: 50px;
    width: 100%;
    display: block;
    background-repeat: no-repeat;
    
}

.menu-opened .content {
    overflow: hidden;
}

.hamburger {
    width: 50px;
    height: 50px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
}

.hamburger-off {
    background-image:url(../img/menu.png); max-width:50px;
}

.hamburger-on {
    background-image:url(../img/hamburguer-on.svg);
}

.hamburger-off:hover , .hamburguer-on:hover{
    cursor: pointer;
}

.hamburger-menu {
    display: none;
    position: absolute;
    top: 50px;
    -wekit-height: calc(100% - 100px);
    -moz-height: calc(100% - 100px);
    -ms-height: calc(100% - 100px);
    -o-height: calc(100% - 100px);
    height: calc(100% - 100px);
    max-width: 320px;
    width: 100%;
    background-color: #FFF;
    z-index: 2;
}


.menu-opcion {
    margin: 0 auto;
    width: 320px;
    height: 25%;
    border-bottom: 1px solid #2a2a2a;
}

.menu-opcion:last-child {
    border-bottom: none;
}

.menu-opcion a {
    display: flex;
    align-items: center;
    width: 320px;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
	color: #6A4BB4;
	
}

.menu-opcion img {
    
}





.onoffswitch {
    position: relative; width: 74px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
   
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 16px; margin: 6.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 41px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}


.onoffswitch2 {
    position: relative; width: 74px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch2-checkbox {
    display: none;
}
.onoffswitch2-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch2-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch2-inner:before, .onoffswitch2-inner:after {
    display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch2-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch2-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch2-switch {
    display: block; width: 16px; margin: 6.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 41px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-inner {
    margin-left: 0;
}
.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-switch {
    right: 0px; 
}

.onoffswitch3 {
    position: relative; width: 74px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch3-checkbox {
    display: none;
}
.onoffswitch3-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch3-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch3-inner:before, .onoffswitch3-inner:after {
    display: block; float: left; width: 50%; height: 29px; padding: 0; line-height: 29px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch3-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch3-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch3-switch {
    display: block; width: 16px; margin: 6.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 41px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {
    margin-left: 0;
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-switch {
    right: 0px; 
}