*{
	margin: auto;
}

html{
}

body{
	max-width: 1000px;
	font-family: 'Roboto', sans-serif;
	padding: 0 2% 0 2%;
	background-color: white;
}

h1, h2, h3{
	font-weight: 400;
}

/*CAJA INFO-----------------------------------*/
#c_info{
	width: 100%;
	height: 125px;
	background-color: #ebebeb;
}
#c_info p{
	padding: 20px 0 0 45px;
	font-size: 11pt;
	color: #666666;
}

/*END CAJA INFO-------------------------------*/

/*CAJA evento con calendario*/
#block1{
	margin: 20px auto auto 5%;
	width: 90%;
	float: left;
	/*border: 1px solid yellow;*/
}

#block1 p{
	margin: 3px 0 5px 0;
}
/*end CAJA evento con calendario*/
/*PROXIMO EVENTO------------------------------*/
/*Info basico del proxino evento*/
#fecha{
	font-style: italic;
	cursor: pointer;
	border: none;
	font-size: 14pt;
	width: 350px;
	/*margin-bottom: -100px;*/
}
.nombre_d_e{
	width: 200px;
	font-size: 20pt;
	font-weight: 500;
	font-style: italic;
	border: none;
	background: none;
}

#p_evento{
	width: 386px;
	/*border: 1px solid pink;*/
	float: left;
	margin-right: 10%;
}
#p_evento h3{
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 10px;
}
#p_evento h1{
	font-weight: 500;
	font-size: 30px;
	margin-bottom: 15px;
	font-style: italic;
	width: 120%;
    background: #EBEDEC;
    padding: 15px 0 15px 40px;
    margin-left: -40px;
}
#p_evento p{
	font-weight: 300;
	font-size: 18px;
	margin-bottom: 20px;
}
#foto_p_evento{
	width: 100%;
	height: 190px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}
#p_evento h2{
	margin: 15px 20px 0 0;
	float: left;
}
#p_evento h4{
	margin-top: 20px;
	font-weight: 400;
	font-size: 18px;
	float: left;

}
/*Precio*/
.precio{
	width: 90px;
	font-size: 18pt;
	border: none;
	display: inline;
	}
.duracion{
	width: 120px;
	display: inline;
	font-size: 14pt !important;
	font-weight: 400 !important;
}

hr{
	margin-top: 10px;
}

/*Ayuda para elegir*/
#ayuda_eligir{
	margin-top: 5px;
	padding: 5px 0 5px 0;
	float: left;
	width: 100%;
	border: none;
	font-size: 12pt;
	font-weight: 300;
	color: gray;
}


/*End Ayuda para elegir*/

/*Numero de personas*/
#n_personas{
	/*height: 44px;*/
	height: auto;
	margin-top: 0px;
	float: left;
	width: 100%;
	/*border:1px solid red;*/
}
#n_personas p{
	float: left;
	margin-right: 20px;
	margin-top: 9px;
	}
#n_p, #n_p2, #n_p3, #n_p4{
	background-color: white;
	width: 33px;
	height: 23px;
	float: left;
	margin: 5px 10px 0 0;
	text-align: center;
	font-size: 18px;
	border:1px solid gray;
}
#n_p p{
	margin: 5px 0 0 10px;
	text-align: left;
}
#b_seg{
	margin-top: 5px;
	height: 30px;
}
#alerta_n_p{
	float: left;
	color: white;
	background-color: red;
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
	display: none;

}
/*end numero de personas*/
/*Intervalo*/
#intervalo{
	width: 100%;
	height: auto;
	margin: 5px 0 15px 0;
}

#intervalo, #intervalo img, #dia p, #tarde p, #dia b, #tarde b{
	float: left;
}
#dia > p, #dia > b, #tarde > p, #tarde > b{
	margin: 9px 6px 0 8px;
	color: white;
}

#dia img{
	margin: 9px 5px 0 5px;
	width: 20px;
	height: 20px;
}
#tarde img{
	margin: 11px 5px 0 5px;
	width: 12px;
	height: 17px;	
}
#dia, #tarde{
	float: left;
	width: 49%;
	height: 130px;
}
#dia{
	background-color: #f26522;
	margin-right: 2%;
}
#tarde{
	background-color: #3176b6;
}
#intervalo > p{
	width: 50%;
	float: left;
	margin-top: 15px;
	font-size: 11pt;
}
#botones{
	float: right;
	margin-top: 10px;
	}
#nextToPersonDate{
	background-color: #13c63d;/*blue*/
	border: none;
	color: white;
}

#botones button, #siguiente, #atras{
	height: 35px;
	font-size: 14pt;
	padding: 0 15px 0 15px;
	cursor: pointer;
}
#atras{
	background-color: #b8b8b8;/*blue*/
	border: none;
	color: white;
	margin-right: 10px;
}
#siguiente{
	background-color: #b8b8b8;/*blue*/
	border: none;
	color: white;

}
#siguiente, #atras{
	float: right;
}
#nextToPersonDate{
	display: none;
}

#box-dia{
	margin-top: 37px;
	width: 189px;
	height: 90px;
	background-color: orange;
}
#box-tarde{
	margin-top: 37px;
	width: 189px;
	height: 90px;
	background-color: #08B2F7;
}
#box-dia button, #box-tarde button{
	width: 55px;
	font-size: 16px;
	background-color: white;
	border: none;
	padding: 5px;
	margin: 10px 10px 0px 0;
	cursor: pointer;
}

#box-dia button:hover{
	outline: 2px solid red;
}
#box-tarde button:hover{
	outline: 2px solid #0262F7;
}

#box-dia .centrar, #box-tarde .centrar{
	margin-left: 35px;
}

/*end Intervalo*/

/*Clients dates*/
.casilla{
	margin-left: 30px;
	}
#datos_cliente{
	display: none;
}
#datos_cliente p{
}

/*end Clients dates*/

/*END PROXIMO EVENTO------------------------------*/
/*CALENDARIO----------------------------------*/
#calendario{
	width: 300px;
	height: 450px;
	background-color: gray;
	float: left;
}
/*END CALENDARIO------------------------------*/
/*--------------Otros eventos--------------*/
#otros_e{
	width: 100%;
	float: left;
	margin: 0px auto;
}
.otro_e{
	min-width: 314px;
	width: 48%;
	float: left;
	margin-bottom: 20px;
	border: 1px solid #E4E2E2;
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	-moz-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	overflow: hidden;

}

.otro_e_reserva{
	max-width: 100%;
	margin-bottom: 20px;
	border: 1px solid #E4E2E2;
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	-moz-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
	overflow: hidden;
}

.otro_e:hover{
	-webkit-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.32);
	-moz-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.32);
	box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.32);
	border: 1px solid #B4B4B4;


}

.margin_r{
	margin-right: 3%;
}

.otro_e h1, .otro_e h2, .otro_e h3{
	float: left;
}

.titulo_o_e{
	float: left;
	width: 100%;
	background-color: #EBEDEC;
}

.titulo_o_e h1{
	margin: 10px 20px 10px 20px;

}

.otro_e h1{
	font-size: 18pt;
	font-style: italic;
	width: 55%;
}

.info_o_e{
	float: left;
	margin: 5px 20px 20px 20px;
}
.otro_e h2{
	font-size: 16pt;
}
.otro_e h3{
	margin: 3px 0 0 10px;
}
.i_t_o_e{
	width: 100%;
	float: left;
	padding: 4% 0 4% 0;
}
.i_t_o_e > img{
	width: 40%;
	height: 120px;
	background-color: gray;
	float: right;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

}

.i_t_o_e > p{
	margin-top: 5px;
	text-indent: -5pt;
	margin-left: 5px;
}
.otro_e p{
	font-size: 11pt;
	font-weight: 300;
	margin-left: 5pt;
	width: 55%;
}




/*--------------END Otros eventos-----------*/

/*--------------Calendario-----------*/

iframe{
	height: 300px;
	position: absolute;
	background-color: white;
	box-shadow: 1px 1px 5px grey;
	display: none;
}

#ifRoja, #ifBlanca, #ifInternacional, #ifBurbuja, #ifTour, #ifNS{
	margin: -40px 0px 0 -180px;
}

#closeCalBlanca, #closeCalRoja, #closeCalInternacional, #closeCalBurbuja, #closeCalTour, #closeCalNS{
	position: absolute; 
	margin: -15px 0 0 400px; 
	z-index: 2; 
	cursor: pointer; 
	display: none;
}
.ver_hora img{
	width: 15px;
	height: 15px;
	margin-right: 5px;
	background-image: url(/cena_cata/img/cal2.svg);
	background-repeat: no-repeat;
}



/*Footer*/
#separate{
	background-color:;
	float: left;
	width: 100%;
	height: 50px;
}

/*Check Orden body*/
#ordenCheck{
	max-width:700px;
	height: auto;
	display: block;
	margin: auto;
	padding: 20px 5% 50px 5%;
}

#foto_evento{
	width: 100%;
    height: 215px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

#evento_cabesera{
	float: left;
	width: 40%;
	height: 100%;
	margin-right: 30px;
}

#evento_cabesera h2{
	margin-bottom: 20px;
}

#datos_confirmar{
	float: left;
	margin:none;
	line-height: 18pt;
}

#pagar{
	margin-top: 20px;
	float: left;
	display: block;
	width: 100%;
	height: auto;
	border: none;
	background-color: #4BF04E;
	padding: 15px 30px 15px 30px;
	font-size: 14pt;
}

.ver_hora{
	margin: 10px 20px 10px 0;
	float: right;
	background-color: ;
	padding: 10px 10px 10px 10px;
	cursor: pointer;
	display: block;
	width: 90px;
	border-radius: 2px;
	border: 2px solid #3BDA6B;
	-webkit-box-shadow: -4px 0px 10px -4px rgba(0,0,0,0.22);
	-moz-box-shadow: -4px 0px 10px -4px rgba(0,0,0,0.22);
	box-shadow: -4px 0px 10px -4px rgba(0,0,0,0.22);
	background-color: ;
}

.ver_hora:hover{
	background-color: #3BDA6B;
	color: white;
}
.ver_hora:hover > img{
	background-image: url(/cena_cata/img/cal.svg);
}

footer{
	width: 100%;
	height: 200px;
	background-color: #F5F5F5;
	clear: both;
	padding: 30px 0;
	line-height: 2;
}
footer p{
	margin: 20px;
}

 /*Other evetns*/
 .otro_e_reserva h1{
		font-size: 16pt;
		max-width: 50%;
		float: left;
	}
	.otro_e_reserva{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}
	.i_t_o_e{
		font-weight: 300;
	}
	#p_evento{/*en estilo.css*/
		width: 408px;
		padding: 20px 40px 20px 40px;
		border: 1px solid #E4E2E2;
		border-radius: 4px;
		-webkit-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
		-moz-box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
		box-shadow: -4px 0px 24px -4px rgba(0,0,0,0.22);
		overflow: hidden;
	}
	#otrosEv{
		float: right; 
		max-width: 40%; 
		padding-top: 20px;
	}
	#block1{
		float: left; max-width: 386px;
	}


@media only screen and (max-width: 750px){

	.otro_e{
		min-width: 200px;

}
@media only screen and (max-width: 545px){

	.otro_e{
		min-width: 200px;
		width: 100%;
		float: none;
	}
	.margin_r{
		margin-right: auto;
	}
}
@media only screen and (max-width: 410px){

	.otro_e h1 {
		font-size: 17pt;
		width: 50%;
		margin-right: 5px;
	}
	.ver_hora{
	margin: 10px 20px 10px 0;
	float: right;
	padding: 10px 10px 10px 10px;
	width: 30%;

}
}
@media only screen and (max-width: 361px){

	.otro_e h1 {
		font-size: 15pt;
		width: 45%;
	}
}
@media only screen and (max-width: 289px){

	.otro_e h1 {
		font-size: 15pt;
		width: 100%;
	}
	.ver_hora{
	width: 80%;

}
}
@media screen and (max-width: 843px) and (min-width: 545px){
		.otro_e h1 {
		font-size: 16pt;
		width: 40%;
		margin-right: 5px;
	}
	.ver_hora{
	margin: 10px 20px 10px 0;
	float: right;
	padding: 10px 10px 10px 10px;
	width: 30%;

}
}