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

/* MENU */

#menu_wrapper{
	position: fixed;
	display: block;
	left: -1px;
	top: 0;
	width: 0%;
	height: 100%;
	overflow: hidden;
	z-index: 100;
	border-right: 1px solid #2a1fbb;
	background-color: #ededed;
-webkit-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#menu_wrapper.in{
	width: calc(100% + 2px);
	left: 0px;
}

#menu_wrapper .title{
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	font-size: 25px;
    text-align: center;
    margin: 12px 0;
    letter-spacing: 2px;
}

#menu_container{
	position: relative;
	width: 100%;
	height: 800px;
	z-index: 1;
	transform-origin: left center;
	margin-left: -50px;
	transform: scale(1.2);
-webkit-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 1000ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.in #menu_container{
	margin-left: 0px;
}
#menu_curve{
	position: absolute;
	left: 0%;
	top: 0%;
	width: 1600px;
	height: auto;
}

.menu_item{
	position: absolute;
	cursor: pointer;
}
.menu_item.no_click{
	cursor: default;
}
#inicio_btn{
    left: 206px;
    top: 175px;
}
#cartel_btn{
   left: 208px;
    top: 479px;
}
#boletos_btn{
	left: 397px;
    top: 627px;
}
#bandas_btn{
   left: 657px;
    top: 297px;
}
#vive_mas_btn{
	left: 679px;
    top: 17px;
}
#parque_btn{
	left: 640px;
    top: 62px;
}
#point_01{
	left: 689px;
    top: 52px;
}
#transporte_btn{
	left: 694px;
    top: -17px;
}
#experiencia_btn{
   left: 979px;
    top: -10px;
}
#cashless_btn{
	left: 1079px;
    top: -8px;
}
#point_05{
	left: 1178px;
    top: 146px;
}
#libros_btn{
	left: 1177px;
    top: 168px;
}
#point_07{
	left: 1187px;
    top: 245px;
}
#prevencion_btn{
	left: 1186px;
    top: 271px;
}

#festival_btn{
	left: 1102px;
    top: 480px;
}
#casa_comedy_btn{
  left: 1070px;
    top: 408px;
}
#point_02{
	left: 1073px;
    top: 511px;
}
#lucha_libre_btn{
   left: 1074px;
    top: 531px;
}
#point_03{
	left: 1102px;
    top: 626px;
}
#comida_btn{
   left: 1108px;
    top: 642px;
}

#point_04{
	left: 1148px;
    top: 691px;
}
#mapa_btn{
   left: 1159px;
    top: 701px;
}

#horarios_btn{
	left: 1373px;
    top: 483px;
}
#reglamento_btn{
	left: 1219px;
    top: 732px;
}

#point_06{
	left: 1202px;
    top: 726px;
}


#menu_eye, #menu_eye_mobile{
	position: absolute;
    left: 1426px;
    top: 150px;
    transform: scale(0);
-webkit-transition: all 800ms cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
        transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
}
#menu_eye.in, #menu_eye_mobile.in{
	transform: scale(1);
}
#menu_eye_mobile{
	left: 180px;
    top: 30px;
    width: 140px;
}

.menu_img{
	position: absolute;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	transform: scale(0);
	border: 1px solid rgba(55,55,209,1);
-webkit-transition: all 800ms cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
        transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);

}
.menu_img.in{
	transform: scale(1);
}
#menu_img_01{
	left: 283px;
    top: 330px;
    background-image: url("../img/menu/img_01.jpg");
}
/*
#menu_img_01:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(55,55,209,0.7);
}
*/
#menu_img_02{
	left: 740px;
    top: 80px;
    background-image: url("../img/menu/img_02.jpg");
}

#close_menu_btn{
	position: absolute;
	left: 1523px;
    top: 0px;
    width: 100px;
    cursor: pointer;
}
#close_menu_btn svg, #close_menu_mobile_btn svg{
	width: 100%;
	transform: scale(0);
}
#close_menu_btn.in svg, #close_menu_mobile_btn.in svg{
	transform: scale(1);
}

#close_menu_btn:hover.in svg, #close_menu_mobile_btn:hover.in svg{
	transform: scale(1.2);
}

#close_menu_mobile_btn{
	position: relative;
    width: 50px;
    left: 20px;
    cursor: pointer;
}

#close_menu_btn svg, #close_menu_btn svg polyline, #close_menu_btn .text, #band_container .band_info .back_btn, #band_container .band_info .back_btn svg line, .page_back_btn a, .page_back_btn svg line, #close_menu_mobile_btn svg, #close_menu_mobile_btn svg polyline, #close_menu_mobile_btn .text{
	-webkit-transition: all 800ms cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
        transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
}

#close_menu_btn .text, #close_menu_mobile_btn .text{
	position: absolute;
	left: 100%;
	margin-left: 25px;
	top: 35%;
	font-size: 24px;
	opacity: 0;
	color: rgb(55, 55, 209);
	transform: translateX(-10px);
}
 #close_menu_mobile_btn .text{
	font-size: 20px;
	margin-left: 18px;
 }

#close_menu_btn.in .text, #close_menu_mobile_btn.in .text{
	opacity: 1;
	transform: translateX(0);
}

#menu_btn{
	position: fixed;
	left: -120px;
	top: 45%;
	z-index: 99;
	width: 65px;
	text-align: center;
	font-size: 24px;
	cursor: pointer;
	color:#2a1fbb;
}
#menu_btn.in{
	left: 20px;
}
#menu_btn svg{
	display: block;
	width: 100%;
	margin-top: 5px;
}


#menu_btn svg line, #menu_btn, .menu_item svg path{
	-webkit-transition: all 800ms cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920);
        transition: all 800ms cubic-bezier(0.340, 1.420, 0.330, 0.920); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.340, 1, 0.330, 0.920); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
   -moz-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
     -o-transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920);
        transition-timing-function: cubic-bezier(0.340, 1.420, 0.330, 0.920); /* custom */
}


#menu_btn:hover svg line, #menu_btn:hover, #close_menu_btn:hover.in .text, #close_menu_btn:hover svg polyline, #band_container .band_info .back_btn:hover, #band_container .band_info .back_btn:hover svg line{
	stroke: rgb(0, 255, 79);
	color: rgb(0, 255, 79);
}
#menu_btn:active svg line, #menu_btn:active{
	stroke: rgb(255, 95, 95);
	color: rgb(255, 95, 95);
}

.menu_item:hover  svg path, .menu_item.active svg path{
	fill: rgb(0, 255, 79);
}

.menu_item.no_click:hover svg path{
	fill: #3737D1;
}

#menu_bottom_circles{
	position: absolute;
	width: 720px;
    height: 690px;
    bottom: -510px;
	z-index: 0;
	right: 0;
    left: 0;
    margin: 0 auto;
}
#menu_bottom_circles .circle{
	position: absolute;
	border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border: 1px solid #2a1fbb;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
	transform-origin: right bottom;
	transform: scale(0);
	background-color: #ededed;
-webkit-transition: all 800ms cubic-bezier(0.325, 1, 0.400, 0.945); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.325, 1.350, 0.400, 0.945);
   -moz-transition: all 800ms cubic-bezier(0.325, 1.350, 0.400, 0.945);
     -o-transition: all 800ms cubic-bezier(0.325, 1.350, 0.400, 0.945);
        transition: all 800ms cubic-bezier(0.325, 1.350, 0.400, 0.945); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.325, 1, 0.400, 0.945); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.325, 1.350, 0.400, 0.945);
   -moz-transition-timing-function: cubic-bezier(0.325, 1.350, 0.400, 0.945);
     -o-transition-timing-function: cubic-bezier(0.325, 1.350, 0.400, 0.945);
        transition-timing-function: cubic-bezier(0.325, 1.350, 0.400, 0.945); /* custom */
}
#menu_bottom_circles .circle.in{
	transform: scale(1);
}
#menu_bottom_circles .circle:nth-child(1){
	width: 70%;
	height: 80%;
	z-index: 3;
}
#menu_bottom_circles .circle:nth-child(2){
	width: 85%;
	height: 90%;
	z-index: 2;
}
#menu_bottom_circles .circle:nth-child(3){
	width: 100%;
	height: 100%;
	z-index: 1;
}


#menu_mobile{
	display: none;
}

.menu_item.font_blue a, .mobile_submenu .submenu_item a{
	color:#2a1fbb;
}

.mobile_submenu{
	position: relative;
	padding-left: 20px;
}
.mobile_submenu .submenu_item{
	display: inline-block;
	margin: 0 2px;
}


@media(max-height:1100px){
	#menu_container{
		margin-top: 50px;
		transform: scale(1);
	}
}

@media(max-height:900px){
	#menu_container{
		margin-top: 50px;
		transform: scale(0.9);
	}
}


@media(max-width:2200px){
	#menu_container{
		transform: scale(1);
	}
}

@media(max-width:1900px){
	#menu_container{
		transform: scale(0.95);
	}
}

@media(max-width:1700px){
	#menu_container{
		transform: scale(0.9);
	}
}
@media(max-width:1600px){
	#menu_container{
		transform: scale(0.85);
	}
}

@media(max-width:1500px){
	#menu_container{
		transform: scale(0.8);
	}
}
@media(max-width:1430px){
	#menu_container{
		transform: scale(0.75);
	}
}

@media(max-width:1350px){
	#menu_container{
		transform: scale(0.7);
	}
}
@media(max-width:1250px){
	#menu_container{
		transform: scale(0.65);
	}
}

@media(max-width:1170px){
	#menu_container{
		transform: scale(0.6);
		margin-top: 0px;
	}
}
@media(max-width:1080px){
	#menu_container{
		transform: scale(0.55);
		margin-top: 0px;
	}
}
@media(max-width:992px){
	#menu_container{
		transform: scale(0.52);
	}
}
@media(max-width:940px){
	#menu_container{
		transform: scale(0.5);
	}
}
@media(max-width:910px){
	#menu_container{
		transform: scale(0.45);
	}
}
@media(max-width:840px){
	#menu_container{
		transform: scale(0.4);
	}
}
@media(max-width:768px){
	#menu_btn {
		position: absolute;
	    left: 0px;
	    top: -100px;
	    right: 0;
	    width: 50px;
	    margin: 0 auto;
	}

	#menu_btn.in {
	    top: 5px;
	    left: 0;
	    font-size: 20px;
	}
	#menu_wrapper .title{
		font-size: 18px;
	}
	#menu_btn svg {
	    margin-top: -5px;
	}
	
}
@media(max-width: 767px){
	#menu_container{
		display: none;
	}
	#menu_mobile{
		display: block;
		padding-top: 40px;
		position: relative;
		z-index: 1;
		height: 100vh;
		overflow: scroll;
		padding-bottom: 140px;
	}
	.menu_item {
    	position: relative;
    	font-size: 30px;
    	line-height: 34px;
    	padding-left: 20px;
    }
    #menu_wrapper .wrapper, #menu_wrapper .content{
	    display: block;
    }
}

@media(max-width:550px){
	#menu_btn {
	    width: 40px;
	    top: -50px;
	    font-size: 17px;
	}
	#menu_btn svg {
	    margin-top: -12px;
	}
	#menu_wrapper .title{
		font-size: 12px;
		letter-spacing: 1px;
	}
	
}

