/* note: overflow-x:hidden must be included for sidebars to work correctly */ 

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #CCC; 
    overflow: hidden;
}

a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
}




/*------------------------------ Outer Containers ---------------------------------*/ 

#map_wrapper { 
    margin: 0; 
    width: 100%;  
    height:calc(80vh);
    position: relative;
}



@media screen and (min-width : 521px){

/* google map container */
#map { 
    width: 100%; 
    height: calc(80vh);
}

#mobile_header { 
    display:none;
}
}



/* ------------------------ infowindows (for markers on map) --------------------- */  
/* ---------------- note: these classes are called in markers.js -------------*/ 
.infowindow {width: 300px;}
.infowindow_content { width:250px; }
.infowindow_content h1 { font-size: 20px; }

/* links to website in infowindows */ 
.infowindow_btn {
    display:block;
	padding-top:10px; 
	height: 20px;
	text-align: center;
	color: #fff;
	background: #2f3036;
	text-decoration: none;
    line-height: 100%; 
}

.infowindow_btn:hover {
	background: #19c589;
    padding-top:10px;
}

/* ------------------------------- categories styles ---------------------------------*/ 

/* outer container for the categories buttons */
#categories_wrapper {
    background-color: #374039;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    height: 20vh;
}

#categories_wrapper ul { 
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 20px 0 20px 0;
    margin: 0;
}
 
.bg_images { 
    margin: auto;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg_images:hover {
    background-color: aliceblue;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
}

#bg_image1 { background-image:  url(../images/category_imgs/365tickets_attractions_icon_white.svg); 
}

#bg_image1:hover { background-image:  url(../images/category_imgs/365tickets_attractions_icon.svg); 
}

#bg_image2 { background-image:  url(../images/category_imgs/365tickets_bus_tour_icon_white.svg);
}

#bg_image2:hover { background-image:  url(../images/category_imgs/365tickets_bus_tour_icon.svg);
}

#bg_image3 { background-image:  url(../images/category_imgs/365tickets_landmark_icon_white.svg);
}

#bg_image3:hover { background-image:  url(../images/category_imgs/365tickets_landmark_icon.svg);
}

#bg_image4 { background-image:  url(../images/category_imgs/365tickets_museum_icon_white.svg); 
}

#bg_image4:hover { background-image:  url(../images/category_imgs/365tickets_museum_icon.svg); 
}

#bg_image5 { background-image:  url(../images/category_imgs/365tickets_river_cruise_icon_white.svg);
}

#bg_image5:hover { background-image:  url(../images/category_imgs/365tickets_river_cruise_icon.svg);
}

#bg_image6 { background-image:  url(../images/category_imgs/365tickets_sightseeing_icon_white.svg); 
}

#bg_image6:hover { background-image:  url(../images/category_imgs/365tickets_sightseeing_icon.svg); 
}

#bg_image7 { background-image:  url(../images/category_imgs/365tickets_theme_parks_icon_white.svg); 
}

#bg_image7:hover { background-image:  url(../images/category_imgs/365tickets_theme_parks_icon.svg); 
}


#bg_image8 { background-image:  url(../images/category_imgs/365tickets_water_park_icon_white.svg);   
}

#bg_image8:hover { background-image:  url(../images/category_imgs/365tickets_water_park_icon.svg);   
}


#bg_image9 { background-image:  url(../images/category_imgs/365tickets_theatre_icon_white.svg);  
}

#bg_image9:hover { background-image:  url(../images/category_imgs/365tickets_theatre_icon.svg);  
}

.cat_text { 
    width: 100px;
    text-decoration: none;
    text-align: center;
}

.category_item {
    display: inline-block;
    float: none;
    box-sizing: border-box;
    max-width: 110px;
    text-align: center;
    list-style-type: none;
}

.category_buttons {
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    width: 100%;  /* Full width of its container */
    height: auto;
}

.category_buttons:hover {
    color:#c7d6c9;
}

.category_title:hover { 
    color: #000;
}

.category_title {
    color:#666; 
}

/* ---------------------- Content for sidebars (left and right) --------------------- */ 

/* styles for both sidebar containers */ 
.sidebars_container {
    position: absolute;
    background-color: rgba(47,48,54,0.7);
    height: 100vh;
    z-index: 10;
    width: 280px;
    color: #bbb;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
    font-family: 'Source Sans Pro', sans-serif; 
}    


/* original positions of sidebars */
/* !important: these must be above .open_left/right_sidebar */ 
.left_sidebar { 
    float:left; 
    top: 0; 
    left:-280px; 
}    

.right_sidebar { 
    float: right; 
    top: 0px;
    right:-280px; 
} 

/* content in sidebar: needed for overflow to work */    
.sidebar_content { 
    height:100vh; 
}  

/* sidebar button which open sidebars on left and right side of map */ 
.sidebar_buttons {
    position: absolute;
    top: 80px;
    width: 50px; 
    height: 50px; 
    padding: 10px; 
    font-size: 1.3em;
    color: #FFF;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
    background-color: rgba(47,48,54,0.7);
    text-align: center; 
}   
 
.side_bar_buttons:hover {
    background-color: antiquewhite; 
    color:#000;
}     



/* classes which are used by jquery to change appearence of sidebar on click  */ 

#show_sidebar_left {
    margin-left: 100%;
}
 
#show_sidebar_right {
  margin-right: 100%;
  right: 0px; 
}    
    
/* styles which responds to jquery function and */ 
/* animates sidebars when button is clicked */ 
.open_left_sidebar { 
    left: 0;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.open_right_sidebar { 
    right: 0px; 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}  

.open_mobile_menu { 
    left: 0;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.open_mobile_menu { 
    height: 50vh;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}


/* clear_left and clear_right respond to jquery */ 
/* and makes sidebar buttons dissapear when clicked */ 
.clear_left { 
    display:none; 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; 
}
    
.clear_right { 
    display:none; 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}   

.clear_mobile { 
    display:none; 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; 
}
  

/* --------------------------- Right Sidebar Content ----------------------------------*/ 

/* styles for the individual list items for right sidebar */ 
  
.sidebar_buttons_right {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 15px;
    color: #FFF;
    display: block;
    transition: 0.3s;
    background-color: rgba(47,48,54,0.7);
    height: 20px;
    width: 100%;
    border-top: 1px solid #818181;
    border-bottom: 1px solid #818181;
}  
    
.sidebar_buttons_right:hover {
    color: #000;
    background-color: aliceblue; 
}  

/* div which creates margin above list items on right */ 
/* side of menu to allow room for close button  */ 
#list_wrapper {
    margin-top:50px; 
}
    
.closebtn_right {
    position: absolute;
    top: 0;
    right: 245px;
    font-size: 36px !important;
    margin-left: -50px;
    text-decoration: none;
    cursor: pointer; 
}   
    
/* if there are more list items that height of sidebar then scrollbar appears */
.content_right {
    overflow-y: auto;
    overflow-x: hidden;
}

/* display no category lists on initial page load */ 
.list_boxes {display: none; } 


/* ------------------------------ Left Sidebar Content ---------------------------- */ 

/* content inside left side nav */ 
.box_text { 
    color: #CCC;
    padding: 10px 17px;
    font-size: 14px;
    /* width: 200px; */
    float: left;
    margin-top: -10px;
    unicode-bidi: bidi-override;
    direction: ltr;
    display: flex;
    background-color: #222;
    margin: 0 auto;
}

/* images for left side bar */ 
.images {
    display: block;
    width: 100%;
    /* height: 130px; */
    float: left;
    /* margin-top: 50px; */
    /* margin: 15px 10px 25px 15px; */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-size: 200px 130px;
}

/* the close button for left sidebar */
.closebtnleft {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 36px !important;
    margin-left: 50px;
    text-decoration: none;
    cursor:pointer;
}

.sidebar_content_left { 
    unicode-bidi:bidi-override;
    direction: rtl;
    overflow: auto;
    overflow-x: hidden!important;
    text-align: left;
}   

/* display no info boxes on initial page load */ 
.info_boxes {display: none;}

/* when category button is clicked page jumps to map (for mobile) */ 
.show_map {display: none; }
/* -----------------------------Responsive Styles--------------------------------*/

@media screen and (max-width : 910px){
	
    #categories_wrapper {
        width: 100%;
    }
    
   .bg_images {
        width: 100%;
        background-repeat: no-repeat;
    }
  
    #sidebar_left {
        display:none;
    }
    
    #sidebar_right {
        display:none;
    }
    
     .bg_images { 
        margin: auto;
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        background-size: 100%;
    }
}


@media screen and (max-width : 620px){
    
    #mobile_buttons {
        padding-top:5px;
    }
    
    .show_map {
        display: block;
    }
    
    #categories_wrapper { 
        margin-top:30px;  
        margin-bottom: -20px; 
    }

       
    #categories_wrapper { 
        width: 100%; 
    }
    
    
    #mobile_header {
        width:100%;
        display:block;
        height:8vh;
        background-color: #2f3036;
    }
    
    #mobile_header.update-menu {
        height: 35vh;
    }
    
    .mobile_icon {
        padding:20px 10px;
        margin-top:20px;
    }
    
    
    .category_item {
        padding: 0;
        margin: auto;
    }
    
    #map {
        height: calc(90vh);
        transition: all 0.5s ease-in;
    }

    #map.update-map {  
        height:calc(65dvh);
    }
    
    #map, #mobile_header {
        transition: height 0.5s ease-in;
    }
    
    #map_wrapper {
        height:calc(90dvh);
    }

    #categories_wrapper { 
        display:none;
    }
    
    #categories_list {
        display: grid;
        width: 100%;
        padding-inline-start: 0px;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 25px;
    }
    
    .cat_text {
        width: auto;
        display:none;
    }
    
    
}
        
        

/* cross on marker info */ 
.custom-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
            padding-top: 2px;
}

.custom-close-btn:hover {
    background: #777;
}