/* Reglas de contenido en general de la pagina */

/*Tipo de fuente de la plataforma*/
@font-face 
{
	font-family: "Supra-NormalMezzo";
	src: url("../fonts/Supra-Mezzo/Supra-NormalMezzo.ttf");
}

html,
body 
{
	padding: 0;
	margin: 0;
	background-color: #fff;
	font-family: Arial, Helvetica, Verdana;
	font-size: 14px;
	line-height: 22px;
	color: #555;
	position: relative;
	-webkit-text-size-adjust: none;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 
{
	line-height: 1;
	font-weight: bold;
	margin: 20px 0 10px 0;
}

h1,
h2,
h3 
{
	font-size: 18px;
}

h4, 
h5, 
h6 
{
	font-size: 16px;
}

p
{
	font-size:1.3em;
	line-height:32px;
	letter-spacing: 0.05em;
	text-align: left;
}

a, 
a:link, 
a:active, 
a:visited, 
a:hover 
{
	color: inherit;
	text-decoration:none;
	cursor:pointer;
}

.content 
{
	text-align: center;
	
	padding-top: 19px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom: 10px;
	
	margin-top:23px;
}

/*Botones de formularios*/
.buttons
{
	padding-left: 25px;
  	padding-bottom: 10px;
  	padding-right: 25px;
 	 padding-top: 10px;
  	background: #eee; 
  	color: #000;
  	font-size:19px;
  	min-width: 20px;
  	font-color:#aaa;
  	height:44px;
  	text-align: center;
  	vertical-align:middle;
  	border-radius: 5px 5px 5px 5px;
 	border: 1px solid #ccc;font-size:12px; margin-top:0px; -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
	cursor: pointer;
}

.buttons:hover
{
	border: 1px solid #aaa;
	background: #ddd; 
}

.btn-feedback
{
  	text-align: center;
	font-size:18px; 
	color:#666;
}

#panel,
#contexto
{
	top:-19px;
}

#subcontexto
{
	font-weight:bold;
}

/* marcos de imagen y video */

#outer 
{
	width:250px;
	height:250px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
	margin-top:-233px;
	box-shadow: 4px 4px 4px 4px #cccccc;
}

.free
{
	background: #eee url(../images/image-regular.svg) right no-repeat; 
	background-size:34%; 
	background-position: 50% 50%;
}

.free:hover
{	
	background: #ddd url(../images/image-regular.svg) right no-repeat; 
	background-size:35%; 
	background-position: 50% 50%;
}

.landmark
{
	background: #eee url(../images/landmark-solid.svg) right no-repeat; 
	background-size:30%; 
	background-position: 50% 50%;
}

.landmark:hover
{	
	background: #ddd url(../images/landmark-solid.svg) right no-repeat; 
	background-size:31%; 
	background-position: 50% 50%;
}

.marker
{
	background: #eee url(../images/map-marker-alt-solid.svg) right no-repeat; 
	background-size:20%; 
	background-position: 50% 50%;
}

.marker:hover
{	
	background: #ddd url(../images/map-marker-alt-solid.svg) right no-repeat; 
	background-size:21%; 
	background-position: 50% 50%;
}

.div
{
	text-align:center;
	background:#efefef; 
	width: 100%; 
	border-radius:30px 30px 30px 30px; 
	height:212px;
}

/*Impedir que el usuario seleccione el texto de las sugerencias*/
.non-selectable 
{
-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/*Quitar el borde que aparece al hacer focus en los inputs*/
input:focus, input.form-control:focus 
{
	outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

/*Interruptor  *******************************************************************************************************************/

/* Formateamos el label que servirá de contenedor */
.switch 
{
	position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
     
/* Ocultamos el checkbox html */
.switch input 
{
	display:none;
}
     
/* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
.slider 
{
	position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0078d7;
    -webkit-transition: .4s;
    transition: .4s;
}
     
/* Pintamos la perilla de control o slider usando el selector before */
.slider:before 
{
	position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
     
/* Cambiamos el color de fondo cuando el checkbox esta activado */
input:checked + .slider 
{
	background-color: green;
}
     
/* Deslizamos el slider a la derecha cuando el checkbox esta activado */ 
input:checked + .slider:before 
{
	-webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
     
/* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
.slider.round 
{
	border-radius: 34px;
}
     
.slider.round:before 
{
	border-radius: 50%;
}
/**********************************************************************************************************************/

@media (min-width: 1000px) 
{
	#imagen_panel 
	{ 
		width: 95%;
		height: auto;
		vertical-align: middle;
	}

	#issues .izquierda
	{
		float: left;
		width: 30%;
		box-sizing: border-box;
	}

	#issues .derecha
	{
		float: right;
		width: 70%;
		box-sizing: border-box;
		padding-left:15px;
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	#panel 
	{
		width: 80%;
		height: auto;
		overflow: hidden;
		margin: auto;
		position: relative;
		background: url('../images/dot.gif') left 45px repeat-x;
		box-sizing: border-box;
	}

	#contexto 
	{
		margin: auto;
		position: relative;
		overflow: hidden;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}

	#ubicacion 
	{
		margin: 0;
		padding: 0;
		width: 95%;
		height: 60px;
		overflow: hidden;
	}

	#ubicacion li 
	{
		color:#aaa;
		list-style: none;
		float: right;
		width: auto;
		height: 50px;
		font-size: 18px;
		text-align: center;
		background: url('../images/biggerdot.png') center bottom no-repeat;
		letter-spacing: 0.05em;
	}
				
	#issues 
	{
		display: flex;
		align-items: center;
		width: auto;
		height: auto;
		overflow: hidden;
	}
	
	.titulo
	{
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: center;
		color:#996600;
		margin-bottom:15px;
		display:none;
	}
	
	.subtitulo
	{		
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
		color:#996600;
		margin-bottom:15px;
		font-weight:bold;
	}
}

@media (min-width: 801px) and (max-width: 999px) 
{
	#imagen_panel 
	{ 
		width: 200px;
		height: auto;
		vertical-align: middle;
		align-items: center;
	}

	#issues .izquierda
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
	}

	#issues .derecha
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	#panel 
	{	
		width: 80%;
		height: auto;
		overflow: hidden;
		margin: auto;
		position: relative;
		background: url('../images/dot.gif') left 45px repeat-x;
		box-sizing: border-box;
	}

	#contexto 
	{
		margin: auto;
		position: relative;
		overflow: hidden;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}

	#ubicacion 
	{
		margin: 0;
		padding: 0;
		width: 95%;
		height: 60px;
		overflow: hidden;
	}

	#ubicacion li 
	{
		color:#aaa;
		list-style: none;
		float: right;
		width: auto;
		height: 50px;
		font-size: 18px;
		text-align: center;
		background: url('../images/biggerdot.png') center bottom no-repeat;
		letter-spacing: 0.05em;
	}
				
	#issues 
	{
		align-items: center;
		width: auto;
		height: auto;
		overflow: hidden;
	}

	.titulo
	{
		font-size:1.3em;
		font-weight:bold;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: center;
		color:#996600;
		margin-bottom:15px;
	}
	
	.subtitulo
	{
		
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
		color:#996600;
		margin-bottom:15px;
		display:none;
	}

}

@media (min-width: 672px) and (max-width: 800px) {

	#imagen_panel 
	{ 
		width: 200px;
		height: auto;
		vertical-align: middle;
		align-items: center;
	}

	#issues .izquierda
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
	}

	#issues .derecha
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	#panel 
	{
		width: 86%;
		height: auto;
		overflow: hidden;
		margin: auto;
		position: relative;
		background: url('../images/dot.gif') left 45px repeat-x;
		box-sizing: border-box;
	}

	#contexto 
	{
		margin: auto;
		position: relative;
		overflow: hidden;
		width: 86%;
		height: auto;
		box-sizing: border-box;
	}

	#ubicacion 
	{
		color:#aaa;
		margin: 0;
		padding: 0;
		width: 95%;
		height: 60px;
		overflow: hidden;
	}

	#ubicacion li 
	{
		list-style: none;
		float: right;
		width: auto;
		height: 50px;
		font-size: 18px;
		text-align: center;
		background: url('../images/biggerdot.png') center bottom no-repeat;
		letter-spacing: 0.05em;
	}
				
	#issues 
	{
		align-items: center;
		width: auto;
		height: auto;
		overflow: hidden;
	}

	.titulo
	{
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: center;
		color:#996600;
		margin-bottom:15px;
		font-weight:bold;
	}
	
	.subtitulo
	{
		
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
		color:#996600;
		margin-bottom:15px;
		display:none;
	}
}

@media (max-width: 672px) {

	#imagen_panel 
	{ 
		width: 200px;
		height: auto;
		vertical-align: middle;
		align-items: center;
	}

	#issues .izquierda
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
	}

	#issues .derecha
	{
		display:inline-block; 
		vertical-align:middle;
		width: 100%;
		box-sizing: border-box;
		font-size:1.3em;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
	}

	#panel 
	{ 
		width: 80%;
		height: auto;
		overflow: hidden;
		margin: auto;
		position: relative;
		background: url('../images/dot.gif') left 45px repeat-x;
		box-sizing: border-box;
	}

	#contexto 
	{
		margin: auto;
		position: relative;
		overflow: hidden;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}

	#ubicacion 
	{
		color:#aaa;
		width: 95%;
		height: 60px;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}

	#ubicacion li 
	{
		list-style: none;
		float: right;
		width: auto;
		height: 50px;
		font-size: 18px;
		text-align: center;
		background: url('../images/biggerdot.png') center bottom no-repeat;
		letter-spacing: 0.05em;
	}
				
	#issues 
	{
		align-items: center;
		width: auto;
		height: auto;
		overflow: hidden;
	}

	.titulo
	{
		font-size:1.3em;
		font-weight: normal;
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: center;
		color:#996600;
		margin-bottom:15px;
		font-weight:bold;
	}
	
	.subtitulo
	{
		
		line-height:32px;
		letter-spacing: 0.05em;
		text-align: left;
		color:#996600;
		margin-bottom:15px;
		display:none;
	}
}