..event_wrapper{
float:right;
width:100%
}
.event_wrapper .event_title{
float:right;
width:100%;
transform:translateX(0);
transition:transform 0.35s ease,opacity 0.35s ease;
padding:10px 0;
background-color:rgba(0,0,0,0.8);
color:#FFFFFF;
font-size:48px;
text-align:center;
margin:20px 0 0 0;
transform:translateX(0)
}
.event_wrapper .event_booths{
float:right;
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
flex-direction:row
}
/* Slide transition helpers */
.map_wrapper.pre-enter.from-right{ transform:translateX(40px);
opacity:0.7
}
.map_wrapper.pre-enter.from-left{ transform:translateX(-40px);
opacity:0.7
}
.map_wrapper.leave-left{ transform:translateX(-40px);
opacity:0.7;
z-index:2
}
.map_wrapper.leave-right{ transform:translateX(40px);
opacity:0.7;
z-index:2
}
.event_wrapper .event_booths .booth{
width:40%;
margin:10px 0;
padding:10px;
border:1px solid rgb(205,119,19);
background:#000;
border-radius:5px;
text-align:center;
color:#fff;
display:flex;
flex-wrap:wrap;
flex-direction:column;
justify-content:center
}
.event_wrapper .event_booths .booth .booth_title{
width:100%;
font-size:30px
}
/* .event_wrapper .event_booths .booth .booth_title a { styles inherit } */
.event_wrapper .event_booths .booth .booth_logo{
width:100%;
max-width:100%;
height:100px;
margin:10px 0
}
.event_wrapper .event_booths .booth .booth_logo a{
width:100%;
position:relative
}
.event_wrapper .event_booths .booth .booth_logo a img{
width:auto;
height:auto;
max-width:100%;
max-height:100px
}
.event_wrapper .event_booths .booth .both_desc{
width:100%;
font-size:20px;
overflow-y:hidden;
height:184px
}
.event_wrapper .event_booths .booth .both_desc a{
word-break:break-all
}
.punchcards_purchase{
float:right;
width:100%;
padding:10px 0;
margin:15px 0 50px 0;
text-align:center;
font-size:30px;
border-radius:15px;
background-color:#cd7713;
color:#000 !important
}
/*
--- Map page styles ---
--- The map page displayes an even map with the booths points located (identifiyed by logo) on the map,when clicked upon opens an on-map info modal with the booth details.
*/
.title{
float:right;
width:100%;
text-align:center;
font-size:48px;
font-weight:bold;
margin:10px 0 20px 0
}
.subtitle{
float:right;
width:100%;
text-align:center;
font-size:36px;
margin:10px 0 50px 0
}
.maps_wrapper{
float:right;
width:100%;
/* make room for arrows */
margin:0 0 100px 0;
/* center with arrow space */
position:relative;
box-sizing:border-box;
overflow:visible;
/* allow point info to overflow vertically */
transition:height 0.3s ease;
/* animate height change when switching maps */
}
.map_wrapper{
position:absolute;
top:0;
left:0;
width:100%;
box-sizing:border-box;
z-index:2;
display:none;
transition:all 0.5s ease-in-out
}
.map_wrapper.active{
display:block;
z-index:3
}
.map_wrapper:not(.active){
pointer-events:none;
/* prevent clicks on inactive map */
}
.map_wrapper .map_background_img{
float:right;
width:100%;
background-color:#FFFFFF;
padding:10px 0
}
.map_wrapper .map_background_img img{
float:right;
width:100%;
height:auto
}
.map_wrapper .points_wrapper{
float:right;
width:100%
}
.map_wrapper .points_wrapper .point{
position:absolute;
width:50px;
height:auto;
z-index:2;
cursor:pointer
}
.map_wrapper .points_wrapper .point img{
float:right;
width:90%;
margin:0 5%;
height:auto;
border-radius:100px;
border:1px solid #000;
background-color:#447ab5;
text-align:center
}
.map_wrapper .points_wrapper .point .point_info{
display:none;
position:absolute;
bottom:115%;
right:-150%;
left:0;
margin:0 auto;
background-color:#fff;
box-sizing:border-box;
padding:40px 20px 0 20px;
text-align:center;
width:400%;
border:1px solid #000
}
.map_wrapper .points_wrapper .point .point_info.below{
top:115%;
bottom:auto
}
.map_wrapper .points_wrapper .point .point_info a{
word-break:break-all
}
.map_wrapper .points_wrapper .point .point_info::after{
content:'';
transform:rotate(45deg);
position:absolute;
bottom:-9px;
right:0;
left:0;
margin:0 auto;
width:20px;
height:20px;
background-color:#fff;
z-index:1
}
.map_wrapper .points_wrapper .point .point_info.below::after{
bottom:auto;
top:-9px
}
.map_wrapper .points_wrapper .point .point_info .closer{
position:absolute;
top:0;
left:5px;
font-size:66px;
color:#000;
z-index:10;
font-weight:bold;
line-height:0.5
}
.map_wrapper .points_wrapper .point .point_info .point_title{
float:right;
width:100%;
text-align:center;
font-size:28px;
position:relative;
z-index:2
}
.map_wrapper .points_wrapper .point .point_info .point_description{
float:right;
width:100%;
text-align:center;
padding:0 10px 10px 10px;
box-sizing:border-box;
position:relative;
z-index:2;
font-size:24px;
overflow-y:auto;
/* allow scrolling long descriptions */
max-height:223px;
pointer-events:auto;
/* allow interaction inside the info */
}
.map_wrapper .points_wrapper .point .point_info .booth_btn{
float:right;
width:100%;
text-decoration:underline;
font-size:26px;
margin:0 0 40px 0;
color:var(--main-color);
text-decoration:underline
}
.map_wrapper .points_wrapper .point.floating{
width:130px
}
.map_wrapper .points_wrapper .point .floating_title{
border-radius:5px;
font-size:22px;
background:rgba(255,255,255,0.8);
padding:2px 5px;
position:absolute;
text-align:center
}
/* Pagination for maps */
.maps_pagination{
position:absolute;
bottom:10px;
right:0;
left:0;
margin:0 auto;
display:flex;
gap:8px;
justify-content:center;
align-items:center;
z-index:5
}
.maps_pagination .dot{
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,255,255,0.5);
border:1px solid #000;
cursor:pointer
}
.maps_pagination .dot.active{
background:var(--main-color,#cd7713)
}
/* Light feedback during dragging */
.maps_wrapper.dragging .map_wrapper.active{
transition:none;
/* smoother live drag */
}
/* Navigation arrows for mobile/iOS compatibility */
.maps_nav_arrow{
position:absolute;
top:80%;
transform:translateY(-50%);
width:40px;
height:80px;
background:rgba(0,0,0,0.6);
border:2px solid var(--main-color,#FFFFFF);
border-radius:8px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:var(--main-color,#FFFFFF);
z-index:4;
transition:all 0.2s ease;
user-select:none
}
.maps_nav_arrow.left{
left:10px
}
.maps_nav_arrow.right{
right:10px
}
.maps_nav_arrow:before{
content:'';
border:solid #FFFFFF;
border-width:0 3px 3px 0;
display:inline-block;
padding:4px
}
.maps_nav_arrow:hover:before{
/* border-color:#fff;
*/
}
.maps_nav_arrow.left:before{
transform:rotate(135deg);
margin-left:4px
}
.maps_nav_arrow.right:before{
transform:rotate(-45deg);
margin-right:4px
}