* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    list-style: none;
}

.contenedor{ 
	/*background: linear-gradient(#22bb97, #22bb97);*/
	max-width: 35rem;
	margin-left: auto;
	margin-right:auto;
}

.superior {
    background-color: rgb(255,255,255);
    display: flex;
    justify-content: center;
    height: 3.5em;
    box-shadow: 0 0.2em 0.5em rgba(0,0,0,.1);
}

.superior img {
	width: 5em;
	display: block;
	margin: auto;
}


/* 
--------------------------------
--------------------------------*/
/*background: linear-gradient(-135deg,#15EDED, #029CF5);*/

body {
	min-height: 100vh;
	/*background: linear-gradient(-135deg,#15EDED, #029CF5);*/
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
}

header {
	width: 100%;
    position: fixed;
	top: 0;
    background-color: #00aff0;
    height: 3.75rem; /*3.75 = 60px*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);
    z-index: 99;
}

.icoheader{
    width: 2.3rem;
	margin-left: 1rem;
    margin-right: 1rem;
    display: block;
}

header nav ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
}

header nav ul li a {
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 300;
}

main{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

ul {
    list-style: none;
	margin: auto;
	padding: 0;
}


a {
	flex-grow: inherit;
	text-decoration: none;
    color: inherit;
}

/*DESPLEGABLE*/
header nav {
	box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
	background: linear-gradient(-45deg,rgba(21,237,237,0.95), rgba(2,156,245,0.95));
    /*background-color: rgba(34, 187, 151, 0.98);*/
    position: fixed;
    right: -100vw;
    top: 0;
    height: 100vh;
    min-width: 5vw;
    z-index: 999;
    transition: all .4s ease;
}

header > ul {
    display: flex;
}


header > ul > li > a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    }

/* TEXTO DENTRO DE MENU DESPLEGABLE*/

#menu{
    flex-direction: column;
    justify-content: space-between;
    padding: 3.75rem 1.5rem 1rem 2.5rem;
}

#menu ul{
	text-align: right;
    flex-direction: column;
	margin-bottom: 1rem;
    }

#menu ul li {
    align-items: center;
    font-weight: 300;
    font-size: 1rem;
	line-height: 2rem;
    }

#menu ul li a {
    color: #FFFFFF;
}

#menu ul li a:hover {
    color: #e6fabb;
}

/* CRUZ PARA CERRAR DESPLEGABLE*/
#x {
	margin-top: 1rem;
	margin-right: 1rem;
    position: absolute;
    right: 0;
    top: 0;
	color: #FFFFFF;    
}

header > ul > li {
    width: 2rem;
    height: 2rem;
    display: flex;
}


 header nav:target {
    right: 0;
     }

.logoheader {
    background-color: rgb(255,255,255);
    display: flex;
    justify-content: center;
    height: 3.5em;
    box-shadow: 0 0.2em 0.5em rgba(0,0,0,.1);
}

.logoheader img {
	width: 16em;
	display: block;
	margin: auto;
}

#logoheader {
	width: 12em;
	display: block;
	margin: auto;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


footer {
	margin-bottom: 3.5rem;
    padding: 1rem;
    background-color: #b2b2b2;
}

footer p {
    color: #FFFFFF;
    font-size: 0.7rem;
    line-height: 1rem;
}

botonera {
	height: 3.5rem;
	position: fixed;
    bottom: 0;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
	padding-left: 1.2rem;
    padding-right: 1.2rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
    
    }


.botonesmenu{
    width: 3rem;
    }

.separador{
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	border-bottom: rgba(0, 0, 0, 0.8) 0.5px solid;
	
}

/* TEXTOS
--------------------------------
--------------------------------*/
h1{
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.2rem;
	margin: 0 auto;
	color:#FFFFFF;
}

h2{
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 1rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#00aff0;
}

h3{
	flex-grow: inherit;
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#545454;
}

h4{
	font-family: 'Roboto', sans-serif;
    font-weight: 400;
	font-size: 1.2rem;
	line-height: 2rem;
	margin: 0 auto;
	color:#FFFFFF;
}

p{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#545454;
}

.p1{
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#22bb97;
}

.p2{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#ff0000
}
.p3{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#00AE33;
}
.p4{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#FFFFFF;
}
.p5{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.8rem;
	line-height: 1rem;
	margin: 0 auto;
	color:#FFFFFF;
}
.p6{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size: 0.8rem;
	line-height: 0.7rem;
	margin: 0 auto;
	color:#545454;
}


/* SECCIONES - INICIO  
--------------------------------
--------------------------------*/
.inicio {
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

.inicio img{
	max-width: 18rem;
	padding-top: 2.5em;
	width: 75%;
}

.login {
	margin-top: 1rem;
	align-items: center;
}

.textoinicio{
	padding-top: 1rem;
	text-align: center
	
}
/* BARRA LOGIN 
--------------------------------
--------------------------------*/
.barralogin{
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	width: 90%;
	background-color: rgba(255,255,255,0.9);
	height: 6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 8px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid;
	
}

.barralogin1{
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	width: 90%;
	background-color: rgba(255,255,255,0.9);
	height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 8px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid;
	
}


.form-login {
			width: 100%;
			background-color: rgba(255,255,255,0.0);
			overflow: hidden;
			opacity: 1;
			visibility: visible;
			-webkit-transition: all .3s ease;
			}

.inputlogin {
			text-align: center;
			color:#545454;
			background-color: rgba(255,255,255,0.0);
			box-shadow: none;
			display: block;
			padding: 8px 8px;
			width: 100%;
			font-size: 0.9rem;
			}

.inputloginizq {
			text-align: left;
			color:#545454;
			background-color: rgba(255,255,255,0.0);
			box-shadow: none;
			display: block;
			padding: 8px 8px;
			width: 100%;
			font-size: 0.9rem;
			}

::-webkit-input-placeholder {
			color: rgba(0,0,0,0.6);
			}
			
.icologin{
	margin-right: 0.5rem;
    width: 1.3rem;
    /*display: block;*/
}	

.barralogin2{
	margin-top: 0.45rem;
	margin-bottom: 0.5rem;
	width: 90%;
	background: linear-gradient(-135deg,#AFF57A, #54D169);
	height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
	border-radius: 8px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
	border: rgba(0, 0, 0, 0.1) 0.5px solid;
	
}
.barraloginfb{
	margin-top: 0.0rem;
	width: 90%;
	border-radius: 8px;
	height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
	/*background-color: rgba(59, 89, 152,1.0);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border: rgba(0, 0, 0, 0.1) 0.5px solid;*/	
}

.registro{
	position: absolute;
	bottom: 0;
	width: 100%;
	background: linear-gradient(-135deg,#AFF57A, #54D169);
	height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	/*border-radius: 5px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid;*/
	
}

/* SECCIONES - HOME  
--------------------------------
--------------------------------*/
.home {
    margin-top: 3.75rem;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-around;
}

.home img{
	width: 3.5em;
	margin-right: 0.5rem;
}
.home img.sig{
	width: 4em;
}

.home a{
	flex-grow: 1;
}

.btnhome {
	margin-bottom: 2.5%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    align-content: center;
    padding: 10px;
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 0.2);
	background-color: rgba(255,255,255,0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid;
}



/* SECCIONES - CENTROS 
--------------------------------
--------------------------------*/
.centro00, .centro01, .centro02, .centro03,
.centrob01, .centrob02, .centrob03,
.centroc01, .centroc02, .centroc03,
.centrod01, .centrod02, .centrod03{
	width: 100%; 
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.centro00{
	background-image: url('./../imagenes/centro00.jpg'); 
}
.centro01{
	background-image: url('./../imagenes/centro01.jpg'); 
}
.centro02{
	background-image: url('./../imagenes/centro02.jpg'); 
}
.centro03{
	background-image: url('./../imagenes/centro03.jpg'); 
}



.centrob01{
	background-image: url('./../imagenes/centrob01.jpg'); 
}
.centrob02{
	background-image: url('./../imagenes/centrob02.jpg'); 
}
.centrob03{
	background-image: url('./../imagenes/centrob03.jpg'); 
}



.centroc01{
	background-image: url('./../imagenes/centroc01.jpg'); 
}
.centroc02{
	background-image: url('./../imagenes/centroc02.jpg'); 
}
.centroc03{
	background-image: url('./../imagenes/centroc03.jpg'); 
}



.centrod01{
	background-image: url('./../imagenes/centrod01.jpg'); 
}
.centrod02{
	background-image: url('./../imagenes/centrod02.jpg'); 
}
.centrod03{
	background-image: url('./../imagenes/centrod03.jpg'); 
}


/* DETALLE CENTRO 
--------------------------------
--------------------------------*/
.detallecentros{
	bottom: 0;
	margin-bottom: 3.5rem;
	width: 100%;
	background-color: rgba(255,255,255,0.95);
	height: 8rem;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    /*padding-left: 1rem;
    padding-right: 1rem;*/
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	
}
.icodetallecentros{
    width: 2.3rem;
    display: block;
}

.textocentros{
	text-align: center;
	padding: 5%;
}
.icoalarma{
	padding: 4px;
    bottom: 0;
    width: 3rem;
    margin-left: 1rem;
    margin-bottom: 12.5rem;
    position: fixed;
    display: flex;
	background-color: rgba(255,255,255,0.95);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	border-radius: 100%
		
}

/* SECCIONES - PERFIL
--------------------------------
--------------------------------*/
.perfil {
	margin-top: 3.75rem;
	margin-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.perfil img {
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.4);
    width: 2.5em;
	margin-right: 1rem;
}
.perfil img.sig {
    width: 2em;
	margin-right: 0rem;
}

.perfil01 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-grow: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#5496ff, #8739e5);
    padding: 1rem 1rem 2.5rem 1rem;
}

.perfil01 img {
    border-radius: 100%;
    padding-right: 0px;
    width: 10em;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.contenedormenuperfil{
	text-align: left;
    margin-bottom: 5%;
    width: 90%;
    margin-top: -2.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.menuperfil {
	/*height: 1rem;*/
	margin-top: 0.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    align-content: center;
    background-color: #FFFFFF;
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 0.2);
    padding: 10px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.notificaciones {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#5496ff, #8739e5);
    padding: 1rem 1rem 2.5rem 1rem;
}

.notificaciones img {
	box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.0);
    padding-right: 0px;
    width: 6em;
    display: block;
    margin: auto;
}

.alarmas {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#5496ff, #8739e5);
    padding: 1rem 1rem 2.5rem 1rem;
}

.alarmas img {
	box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.0);
    padding-right: 0px;
    width: 6em;
    display: block;
    margin: auto;
}



/* SECCIONES - TRANSPORTE
--------------------------------
--------------------------------*/
.transporte {
	margin-top: 3.75rem;
	margin-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.transporte img {
    width: 2.5em;
	margin-right: 1rem;
}
.transporte img.sig {
    width: 2em;
	margin-right: 0rem;
}

.transportea {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-grow: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#46EEAA, #2CBFC7);
    padding: 1rem 1rem 2.5rem 1rem;
}

.transportea img {
    padding-right: 0px;
    width: 10em;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
}


.transporte01{
	/*position: fixed;*/
	background-image: url('./../imagenes/transporte01.jpg');
	width: 100%; 
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.transporteok {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#46EEAA, #2CBFC7);
    padding: 1rem 1rem 2.5rem 1rem;
}

.transporteok img {
    padding-right: 0px;
    width: 6em;
    display: block;
    margin: auto;
}

option {
	flex-grow: inherit;
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.1rem;
	margin: 0 auto;
	color:#545454;
}

.transportea2 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-grow: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#46EEAA, #2CBFC7);
    padding: 1rem 1rem 2.5rem 1rem;
}

.transportea2 img {
    padding-right: 0px;
    width: 6em;
    display: block;
    margin: auto;
}

/* BARRA DE MESAJERIA 
--------------------------------
--------------------------------*/
.contenedormensajes{
	margin-top: -2rem;
}

.mensajeria {
	margin-right: auto;
    margin-left: auto;
    width: 90%;
	margin-top: 0.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    align-content: center;
    background-color: #FFFFFF;
    text-shadow: 0px 0px 50px rgba(255, 255, 255, 0.2);
    padding: 10px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
/* BARRA DE BUSQUEDA 
--------------------------------
--------------------------------*/
.barrabusqueda{
	margin-top: 4.2rem;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
	height: 3rem;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}

.form-busqueda {
	width: 100%;
	background-color: rgba(255,255,255,0.0);
	overflow: hidden;
	opacity: 1;
	visibility: visible;
	-webkit-transition: all .3s ease;
}

.input {
	color:#545454;
	background-color: rgba(255,255,255,0.0);
	box-shadow: none;
	display: block;
	padding: 8px 8px;
	width: 100%;
	font-size: 0.9rem;
}


::-webkit-input-placeholder {
	color: rgba(0,0,0,0.6);
}
			
.icobusqueda{
    width: 2.3rem;
    display: block;
}		
		
.barracalendario{
	font-size: 0.9rem;
	color: #545454;
	margin-top: 7.2rem;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
	height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}



/* DETALLE AYUDA
--------------------------------
--------------------------------*/
.acercade {
	margin-top: 3.75rem;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

.menuprincipal{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-around;
}

.menuprincipal img{
	width: 2.5em;
    margin-left: 0rem;
	margin-right: 0.5rem;
    padding: inherit;
}

.menuprincipal img.sig{
	width: 4em;
}

.menuprincipal a{
	flex-grow: 1;
}

.comofunciona{
	flex-grow: 1;
	display: flex;
	align-items: center;
	align-content: center;
	padding-bottom: 10px;
	text-shadow: 0px 0px 50px rgba(255, 255, 4255, 0.2);
}


/* SECCIONES - INFO  
--------------------------------
--------------------------------*/
.general {
	margin-top: 3.75rem;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

.general img{
	width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

/* VIDEO 
--------------------------------
--------------------------------*/
.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
margin-top: 0.2rem;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* SECCIONES - REPORTAR PROBLEMA
--------------------------------
--------------------------------*/
.reportarproblema {
	margin-top: 3.75rem;
	margin-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.reportarproblema img {
    width: 2.5em;
	margin-right: 1rem;
}
.reportarproblema img.sig {
    width: 2em;
	margin-right: 0rem;
}


.reportarproblema2 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    align-content: center;
    background: linear-gradient(-135deg,#15EDED, #029CF5);
    padding: 1rem 1rem 2.5rem 1rem;
}

.reportarproblema2 img {
    padding-right: 0px;
    width: 6rem;
    display: block;
    margin: auto;
}
/* MAPA
--------------------------------
--------------------------------*/
.map{
	width: 100%; 
	height: 94vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* #POPUP
================================================== */

#popup {
	position: absolute;
   	visibility: hidden;
   	opacity: 0;
   	margin-top: -556px;
}
#popup:target {
   	visibility:visible;
   	opacity: 1;
   	background-color: rgba(0,0,0,0.8);
   	position: fixed;
   	top:0;
   	left:0;
   	right:0;
   	bottom:0;
   	margin:0;
   	z-index: 999;
   	transition:all 1s;
}
.popup-contenedor{
   	position: relative;
    margin: 10% auto;
    padding: 2rem;
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 90%;
}
a.popup-cerrar{
   	position: absolute;
   	top:3px;
   	right:3px;
   	/*background-color: #333;*/
   	padding:7px 10px;
   	font-size: 20px;
   	text-decoration: none;
   	line-height: 1;
   	color:#000;
}

.gifok{
  width: 100%
}

/* #POPUPOK
================================================== */

#popupok {
	position: absolute;
   	visibility: hidden;
   	opacity: 0;
   	margin-top: -556px;
}
#popupok:target {
   	visibility:visible;
   	opacity: 1;
   	background-color: rgba(0,0,0,0.8);
   	position: fixed;
   	top:0;
   	left:0;
   	right:0;
   	bottom:0;
   	margin:0;
   	z-index: 999;
   	transition:all 1s;
}




/* #PROMORECICLAPP
================================================== */

.cabezalresponsive{
	background: linear-gradient(-135deg,#15EDED, #029CF5);
	height: 400px;
}


/* #RESPONSIVE
================================================== */
.container{ 
	position: relative; 
	width: 1200px; 
	margin: 0 auto; 
	padding: 0;
}

.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px;}

		.container .one.column,
		.container .one.columns                     { width: 55px;  }
		.container .two.columns                     { width: 130px; }
		.container .three.columns                   { width: 205px; }
		.container .four.columns                    { width: 280px; }
		.container .five.columns                    { width: 355px; }
		.container .six.columns                     { width: 430px; }
		.container .seven.columns                   { width: 505px; }
		.container .eight.columns                   { width: 580px; }
		.container .nine.columns                    { width: 655px; }
		.container .ten.columns                     { width: 730px; }
		.container .eleven.columns                  { width: 805px; }
		.container .twelve.columns                  { width: 880px; }
		.container .thirteen.columns                { width: 955px; }
		.container .fourteen.columns                { width: 1030px; }
		.container .fifteen.columns                 { width: 1105px; }
		.container .sixteen.columns                 { width: 1180px; }

		.container .one-third.column                { width: 380px; }
		.container .two-thirds.column               { width: 780px; }


/* #960
================================================== */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.container { 
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	padding: 0;
}

.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}
	
		.container .one.column,
		.container .one.columns                     { width: 40px;  }
		.container .two.columns                     { width: 100px; }
		.container .three.columns                   { width: 160px; }
		.container .four.columns                    { width: 220px; }
		.container .five.columns                    { width: 280px; }
		.container .six.columns                     { width: 340px; }
		.container .seven.columns                   { width: 400px; }
		.container .eight.columns                   { width: 460px; }
		.container .nine.columns                    { width: 520px; }
		.container .ten.columns                     { width: 580px; }
		.container .eleven.columns                  { width: 640px; }
		.container .twelve.columns                  { width: 700px; }
		.container .thirteen.columns                { width: 760px; }
		.container .fourteen.columns                { width: 820px; }
		.container .fifteen.columns                 { width: 880px; }
		.container .sixteen.columns                 { width: 940px; }

		.container .one-third.column                { width: 300px; }
		.container .two-thirds.column               { width: 620px; }
}

/* #TABLET
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .columns { margin-left: 10px; margin-right: 10px;  margin-top: 10px; margin-bottom: 10px;}

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }
}
	
/* #MOBILE
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.container .column {  margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;}

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 420px; }
}	

@media only screen and (min-width: 320px) and (max-width: 479px) {
.container { width: 300px; }
.container .column {  margin-left: 0; margin-right: 0;  margin-top: 10px; margin-bottom: 10px;}

		.container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 300px; }
}
	
@media only screen and (max-width: 319px) {
.container { width: 220px; }
.container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;}
	
        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 220px; }
}