@charset "utf-8";
/* CSS Document */

/* @import url(""); *** Importa otra hoja css*** */

/* Reset CSS */

*{                                    
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
}

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td, th, caption {
	font-weight: normal; 
	text-align: left; 
	}

img, fieldset {
	border: 0;
}

ol {
	padding-left: 1.4em;
	list-style: decimal;
}

ul {
	padding-left: 1.4em;
	list-style:square;
}

q:before, q:after {
	content:''; 
}

/* Fin del reset CSS */


/*	{
	background: linear-gradient(bottom, #00F 50%, #3FF 50% );          
	background: -moz-linear-gradient(bottom, #00F , #3FF );                 Degradados lineal con CSS
	background: -webkit-linear-gradient(bottom, #00F , #3FF );                bottom, left, right, top
	background: -ms-linear-gradient(bottom, #00F , #3FF );
	background: -o-linear-gradient(bottom, #00F , #3FF );
	
	background: radial-gradient(center, circle, #00F 50%, #3FF 50% );         
	background: -moz-radial-gradient(center, circle, #00F , #3FF );                 Degradados circular con CSS
	background: -webkit-radial-gradient(center, circle, #00F , #3FF );               circle, ellipse
	background: -ms-radial-gradient(center, circle, #00F , #3FF );
	background: -o-radial-gradient(center, circle, #00F , #3FF );
	
	color: rgba(180,10,20,0.5);                                               aplicar transparencia a Textos, de 0 a 1, colores RGBA
	
	outline: 2px dashed #36d900;     Añade borde con raya discontinua
	outline-offset: 15px;            Separa el borde
	
	-moz-transform: scale(1.2, -1);       Transforma el texto original, mas grande o mas pequeño, segundo parametro da la vuelta al elemento
	
	-moz-transform: rotate(180deg);        Rota elementos
	
	-moz-transform: skew(30deg);         Cambia perspectiva
	
	-moz-transition:-moz-transform 1s ease 0.5;      Transicion mas lenta en trasform
*/

/* Fuente de letra venteven */
@font-face{
	/*font-family: 'Venteven';
	src: url('MagnetoBold.TTF');*/
	font-family: 'Venteold';
	src: url('OldGrowth-Regular.otf');
}

/* Imagen de fondo venteven */
/*body{
	background-color: #eceff1;
	background-image: url('../imagenes/ventevenfondo1.png')
}*/



/* MENÚ LATERAL */

#menu_on{
	margin: 15px;
	display: inline-block;
	width:30px;
	height: 20px;
	position: relative;
	z-index: 2;
}
 
#menu_on span{
	width: 100%;
	height: 4px;
	border-radius: 4px;
	display: block;
	position: absolute;
	background: #5900b3;
	transition: all 0.25s ease; /* Propiedades a animar | Tiempo | Tipo animación*/
	transform-origin : 0px 100%;
}
 
#menu_on span:nth-child(2){
	top: calc(50% - 2px);
}
 
#menu_on span:nth-child(3){
bottom: 0;
}

nav{
	position: fixed;
	top: 0;
	bottom: 0;
	left:-300px; /* Escondemos nuestro menú con un valor negativo */ 
	width: 300px;
	z-index: 1;
	padding: 90px 30px 30px;
	background: #000000;
	opacity: 0;
	transition: all 0.75s ease;
	font-size: 1.2em;
	overflow-y: auto;
}

nav a{
	display:block;
	text-decoration: none;
	padding: 10px;
	color: rgba(255,255,255,0.75);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	transition: all ease 0.25s;
}

nav a:hover{
	color: rgba(255,255,255,1);
	border-bottom-color:rgba(255,255,255,0.4);
}

.visible_menu span:nth-child(1){
	transform: rotate(45deg) translate(-2px,1px); 
}
 
.visible_menu span:nth-child(2){
	opacity: 0;
}
 
.visible_menu span:nth-child(3){
	transform: rotate(-45deg) translate(-3px,3px); 
}

.visible_menu nav{
	left: 0;
	opacity: 1;
}

#barra_superior {
	font-family: "Century Gothic", "Berlin Sans FB", Simplex;
	float: right;
	background-color: #ffffff;
	margin-right: 40px;
	padding-top: 5px;
	border-left: 2px solid #73b9ff;
	border-top: 2px solid #73b9ff;
	border-right: 2px solid #73b9ff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
}

nav ul{
	list-style-type: none;
	text_align: center;	
}

nav ul li{
	display: inline;
	text-align: center;
	margin: 0 10px 0 0;
}

nav ul li a{
	padding: 2px 6px 3px 6px;
	color: #ff0080;
	text-decoration: none;
}

#alerta h2{
	text-align: center;
	font-size: 200%;
	color: #ff0000;
	padding: 5px;
}

#login_usuario{
	width: 280px;
	background-color: #555555;
	margin: 10px auto;
}

#login_usuario input,button{
	width:200px;
	height:30px;
	padding: 0px 10px;
	text-align: center;
	margin: 5px;
	
}

header #logo{
	width: 70%;
	margin: auto;
	margin-top: -45px;
	float: center;
	background-color: #ffffff;
	text-align: center;	
}

/*header #logo{
	width: 98%;
	margin: auto;
	clear: both;
	background-color: #ffffff;
	text-align: center;	
	border: 4px solid #73b9ff;
	border-radius: 20px;
	box-shadow: #bbbbbb 7px 7px 5px;
	/*text-shadow: #bbbbbb 7px 7px 5px; sombra para textos*/ 
	
/*}*/

#logo_rosa {
	font-family: 'Venteold';
	font-size: 140%;
	color: #ff00bf;
	
}

#logo_lila {
	font-family: 'Venteold';
	font-size: 140%;
	color: #5900b3;
	
}

#logito{
	font-family: "Century Gothic", "Berlin Sans FB", Simplex;
	font-size: 150%;
	color: #2626ff;
}

#buscador{
	font-family: "Century Gothic", "Berlin Sans FB", Simplex;
	text-align: center;
	font-size: 110%;
	margin: 0 auto;
	width: 80%;
	color: #ff00bf;
	padding: 10px;
	background-color: #ffffff;
	/*border-left: 3px solid #73b9ff;
	border-bottom: 3px solid #73b9ff;
	border-right: 3px solid #73b9ff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;	*/
}

.caja_buscador {
	color: #5900b3;
	padding: 4px;
	border-radius: 5px;
    border: 2px solid #2626ff;	
}

.boton_personalizado{
    text-decoration: none;
    padding: 4px;
    font-weight: 500;
    font-size: 100%;
    color: #ffffff;
    background-color: #73b9ff;
    border-radius: 5px;
    border: 2px solid #2626ff;
  }
  
.boton_personalizado:hover{
    color: #73b9ff;
    background-color: #ffffff;
  }
  
#administracion{
	text-align: center;
} 

#administracion h1{
	font-size: 120%;
	font-weight: bold;
	color: #2626ff;
}

#administracion h2{
	font-size: 110%;
	font-weight: bold;
	color: #2626ff;
}



#registro_usuario table{
	background-color: #dddddd;
	width: 30%;
	margin: auto;
	border-radius: 15px;
	box-shadow: #bbbbbb 5px 5px 5px;
}

#registro_usuario td{
	padding: 8px 15px;
}

/*Extructura Parrilla de Eventos Responsive*/

.masonryholder {
	width: 98%;
	margin: 5px auto;
	column-gap: 10px;
	max-width: 1200px;
	
}

.masonryblocks {
	display: inline-block;
	/*background-color: #f4ffd5;*/
	background-color: #ffffff;
	padding: 15px;
	margin: 0 0 0px 0;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	border-bottom: 1px solid #bbbbbb;
	/*border: 2px solid #73b9ff;*/
	/*border-radius: 15px;*/
	/*box-shadow: #bbbbbb 5px 5px 5px;*/
}

.masonryblocks img {
	width: 98%;
	margin: auto;		
}

.masonryblocks h2 {
	font-size: 140%;
	color: #5900b3;
	font-weight: bold;
}

.masonryblocks h3 {
	font-size:120%;
	color: #5900b3;
}


.masonryblocks pre {
	white-space: pre-wrap;
	text-align: justify;
}


/* CSS Detalle Evento*/

#detalle_evento {
	max-width: 98%;
	/*background-color: #dddddd;*/
	background-color: #ffffff;
	padding: 15px;
	margin: 10px auto;
	text-align: center;
	/*box-sizing: border-box;*/
	/*border: 2px solid #73b9ff;
	border-radius: 15px;*/
	/*box-shadow: #bbbbbb 5px 5px 5px;*/
}

#detalle_evento img {
	width: 98%;
	margin: auto;		
}

#detalle_evento h2 {
	font-family: 'Century Gothic';
	font-size: 140%;
	color: #5900b3;
	font-weight: bold;
}

#detalle_evento h3 {
	font-family: 'Century Gothic';
	font-size:120%;
	color: #5900b3;
}

#detalle_evento h4 {
	font-family: 'Century Gothic';
	font-size:110%;
	color: #5900b3;
	text-align: left;
	padding: 5px;
}

#detalle_evento pre {
	font-family: 'Century Gothic';
	white-space: pre-wrap;
	text-align: justify;
	
}

#detalle_evento a {
	font-family: 'Century Gothic';
	white-space: pre-wrap;
}

/* Estilo Formulario Evento */

.campos { 
	margin: 5px;
    font-family:verdana,arial;     /* tipo de letra */ 
    width: 480px;                 /* anchura de campos de formulario */ 
    color: #0000ff;                 /* color del texto */  
    border: 1px solid black;        /* color del borde puede ser solid ó dotted */
}

.boton{
    font-size:12px;
    font-family:Verdana,Helvetica;
    font-weight:bold;
    color:#0000FF;
    background:#A4C1FF;
    border:0px;
    width:120px;
    height:25px;
}


/*--------------------------------------------------------------------------*/

footer{
	background-color: #000000;
	border-top: 3px solid #ff00bf;
	border-bottom: 3px solid #ff00bf;
	color: #ff00bf;
	height: 40px;
}

footer h2{
	text-align: center;
	padding: 10px;
}

@media screen and (max-width: 480px){
	.menu_nav{
		position: fixed;
		margin-bottom: 15px;
		margin_right: 15px;
		border-radius: 50%;
	}
	
	#detalle_evento{
		width: 90%;
	}
	
	.masonryholder{
		column-count: 2;
	}
}

@media screen and (min-width: 481px){
	.masonryholder{
		column-count: 3;
	}
	
	#detalle_evento{
		width: 90%;
	}
	
	nav{
		background-color: black;
		flex-direction: column;
	}
	
	.boton_nav{
		display: inline-block;
	}
	
	#menu_nav{
		position: fixed;
		bottom: 15px;
		right: 15px;
		border-radius: 50%;
	}
}

@media screen and (min-width: 981px){
	.masonryholder{
		column-count: 4;
	}
	#detalle_evento{
		width: 800px;
	}
}
	

/*
nav{
	
}

li{
	background-image: url('../imagenes/botonnavn1.png');
	display: inline;
	padding: 4x 8px;
	margin-right: 3px;
	
}

li:hover{
	background-image: url('../imagenes/botonnavn2.png');
}

nav li a{
	
	color: white;
	text-decoration: none;
}

#barralateralizquierda{
	background-color: #0000ff;
	float: left;
	height: 100%;
	width: 130px;
	border: outset 4px;
}

section{
	float: left;
	width: 70%;
	
}

#barralateralderecha{
	background-color: #0000ff;
	float: right;
	height: 13%;
}
article{
	background-color: #ff8000;	
	float: left;
	height: 16%;
}

img{
	background-color: #ff00ff;	
}
footer{
	background-color: #ff0000;
	clear: both;
}
*/

/*
p{
	font-family: Tahoma, Geneva, sans-serif;
	font-style: italic;
	font-weight: bold;
	font-size: 12px;
	color: black;
}

#tabla{
	background-color: lime;
	
}*/