.marker {border: none;cursor: pointer;height: 25px;width: 25px;background-size: 25px 25px;background-image: url(./icons/marker-256.png);background-repeat: no-repeat;background-color: rgba(0, 0, 0, 0);
opacity: 1; }

body {color:#404040;font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;margin:0;padding:0;-webkit-font-smoothing:antialiased;}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.sidebar {position:absolute;width:25%;height:100%;top:0;left:0;overflow:hidden;border-right:1px solid rgba(0,0,0,0.25);
opacity: 1;transition: 0.5s;z-index:2;}
      
.pad2 {padding:20px;}

.map {position:absolute;left:0%;width:100%;top:0;bottom:0;}

h1 {font-size:22px;margin:0;font-weight:400;line-height: 20px;padding: 20px 2px;font-family: 'helvetica';font-weight: 200;}

a {color:#404040;text-decoration:none;}
a:hover {color:#101010;}

.heading {background:#fff;border-bottom:1px solid #eee;min-height:60px;line-height:60px;padding:0 10px;background-color: black;color: #fff;}

.listings {height:100%;overflow:auto;padding-bottom:60px;background: black;}
.listings div {color: #fefefe}
.listings .item {display:block;border-bottom:1px solid #eee;padding:10px;text-decoration:none;}
.listings .item:last-child { border-bottom:none;}
.listings .item .title {display:block;color:#00AEEF;font-weight:700;}
.listings .item .title small { font-weight:400; }
.listings .item.active .title, .listings .item .title:hover {color:#00AEEF;text-decoration: underline;}
.listings .item.active {background: #003366;}

.item a p {font-size: 0px;}

::-webkit-scrollbar {width:3px;height:3px;border-left:0;background:rgba(0,0,0,0.1);}
::-webkit-scrollbar-track {background:none;}
::-webkit-scrollbar-thumb {background:#3fc2f3;border-radius:0;}

.clearfix { display:block; }
.clearfix:after {content:'.';display:block;height:0;clear:both;visibility:hidden;}

/* Marker tweaks */
.mapboxgl-popup {padding-bottom: 50px;}
.mapboxgl-popup-close-button {display:none;}
.mapboxgl-popup-content {font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;padding:0;width:180px;opacity: 1;}
.mapboxgl-popup-content-wrapper {padding:1%;}
.mapboxgl-popup-content h4 {margin:0;display:block;padding: 10px 10px 10px 10px;font-weight:400;background: black;color: #00AEEF;text-align: center;}
.mapboxgl-popup-content div {padding:10px;border-style: none;}
.mapboxgl-container .leaflet-marker-icon {cursor:pointer;}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {margin-top: 15px;}
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {border-bottom-color: #3fc2f3;}
          
.modal-footer button {border-radius: 1px; padding: 10px 25px 10px 25px; color: black;}
.modal-footer button:hover {color: black;}
.modal-footer button p {padding-top: 0px; padding-bottom: 0px;}

.btn-info {background: #00AEEF; border-color: black;}
     
/*Modal Popup*/

.modal h1 {color: white;padding: 15px 2px 5px 2px; margin-top: -5px;font-family: 'HelveticaNeue-Light',Arial,Helvetica,sans-serif;text-transform: uppercase;}
.modal h5 {font-size: 16px; font-style: italic;}
.myButton:hover {color: white;}         
.myButton:active {position:relative;top:1px;}

/*Modal content*/

.modal-content {margin: 0 auto; max-width: 800px;background: black;border-radius: 0px;color: white; width: inherit; height: 100%;margin-left: -35%; background: black; margin-top: 0vh;}
.mapboxgl-popup-content {width: 250px;}
.mapboxgl-popup-content button {position: inherit;z-index: 9999999999;}
.modal-dialog {position:absolute;overflow-y: initial!important; display: inherit;margin-left: 0px;}
.modal-body {overflow-y: auto;height: 55vh;}
.modal  {display: inline-table;height: 500px;padding: 0px;margin-top: -50%;}
.modal-open {position: table-cell;vertical-align: middle;display: inherit;overflow: visible;width:500px;}
p {margin-bottom: 0px;}

h4.modal-title {padding-left: 0px; background: white;}
p.year-tags {font-size: 12px; margin-bottom: 10px;}
.modal-backdrop {position: inherit;}

/*MISC-Secondary Modal*/

.mapboxgl-popup-content div {padding-right: 10px;}
p.image-box img {width: 100%;padding: 10px 0px 10px 0px;}
.listings div {font-size: 13px; line-height: 1.4;}

iframe {width: 100%;height: 2000px;border-style: none;} 
.tour-icon {padding: 5px;}
.tour-list img {height: 150px;width: 150px;border-radius: 8px;}
.tour-list h1 {text-align: center;}
h5.tour-label {margin-top: -5px;font-style: normal;text-align: center;color: #efefef;}
    
#sidebar {top: 0px;width: 25%;bottom: 0px;left: 0;position: absolute;}
.main-area {top: 0px;right: 0;bottom: 0px;left: 0;-moz-transition: left 0.5s ease;transition: left 0.5s ease;}
label{z-index: 2;position: absolute;top: 0;left: 25%;background-color: blue;-moz-transition: left 0.5s ease;transition: left 0.5s ease;}
      
input[type=checkbox] {display: none;}
input:checked ~ .sidebar {margin-left: -65%;} 
input:checked ~ .main-area { left:-25%;}
input:checked ~ label {left: 0;}
 
/*MIN-WIDTH: 768px*/

@media screen and (min-width: 768px) {.modal:before {display: inline-block;vertical-align: middle;content: " ";height: 100%;}}
.modal-dialog {display: inline-block;text-align: left;vertical-align: middle;}
.modal-header h1 {text-align: left;}

/*600px max*/
      
@media only screen and (max-width: 600px) {.sidebar {width: 60%;}
label {margin-left: 35%;}
input:checked ~ label {margin-left:0%;}}

/*768px max*/

@media only screen and (max-width: 768px) {.modal-content { margin: 0 auto; background: black;border-radius: 0px; color: white; width: inherit; height: inherit; width: 90vw; margin-left: -25%; margin-top:15vh; padding: 25px;}
.modal-footer {height: 50px;}
.vertical-alignment-helper  {display:table;height: 100%;width: 100%;}
.vertical-align-center     {/* To center vertically */display: table-cell;vertical-align: middle;}
.mapboxgl-popup-content h3 {font-size: 1.3em;}
.btn-info {padding: 5px 5px 5px 5px}
.modal {height: 400px;}
.modal-body {height: 20vh;}
.modal-content{margin-left: -35%;width: 80vw}
.mapboxgl-ctrl-geocoder {display: none;}
.modal-body {height: 100vh;}
.mapboxgl-popup-content div {padding: 8px;}}

/*450px max*/

@media only screen and (max-width: 450px) {
         
.modal-content { margin: 0 auto; border-radius: 0px;width: inherit;height: inherit; width: 102vw; margin-left: -28%;margin-top:20vh;padding: 0px 35px 0px 35px;}
.mapboxgl-popup-content {width: 250px;}
.modal h1 {text-align: center;}
.modal h5 {text-align: center;}
.modal p {text-align: justify;}
                                        }

#card {background: black;padding-top:30px;}     

/*SAFARI-MAC ACCOMODATIONS*/

_::-webkit-full-page-media, _:future, :root #mymodal {width: 820px; z-index: -1; position: absolute; margin-left: -300px; padding-left: 300px;}
_::-webkit-full-page-media, _:future, :root .modal-content {z-index:9999999;position: absolute;padding-bottom: 100px;}
_::-webkit-full-page-media, _:future, :root .modal-content img {width: 80%;z-index: -999999999;}
.full-card {background: black;z-index:2;}

/*IPAD Safari-MAC STYLING*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 

{
_::-webkit-full-page-media, _:future, :root #mymodal {margin-left: -120%; padding-left: 100px;height: 100vh;}
_::-webkit-full-page-media, _:future, :root  .modal-content {margin-left: 10%; margin-top: 10vh;}
    .image-frame {text-align: center; padding-bottom: 100px;position: relative;}
    .modal-header h1 {text-align: left; margin-top: 10px;}
}

#close {float:right;display:inline-block;padding:2px 5px;background:black;color: white;font-size: 1.5em;transition: 500ms;}
.modal-body img {width: 100%;}
#myInput {background: black;background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */width: 100%; /* Full-width */font-size: 16px; /* Increase font-size */padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ height: 40px; border-style: none;}   

#Div1 {max-height: 40px; overflow-y: hidden;}
#myInput[type=text] {margin-left: 0px; background: url(/icons/search.png); background-repeat: no-repeat; background-position: left;}

@import url('https://fonts.googleapis.com/css?family=Work+Sans');


#myInput[type=text] {margin-left: 0px; background: url(../icons/search-icon-white.png); background-repeat: no-repeat; background-position: left;}

.heading h1 {font-size:15px;margin:0 0 0 0;line-height: 20px;padding: 25px 2px;font-family: 'Josefin Sans';font-weight: 600;}

#myInput {width: 100%; /* Full-width */font-size: 16px; /* Increase font-size */padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ height: 40px; border-style: none;}   

#myInput[type=text] {margin-left: 0px; background: url(./icons/search-icon-dark.png); background-repeat: no-repeat; background-position: left;background-size: 25px 25px}

/*Sidebar Content*/

.heading {background:#F5F5F5;border-bottom:3px solid #666;min-height:60px;line-height:60px;background-color: #F5F5F5;color: black;}

/*Listings*/

.listings {overflow:auto;padding-bottom:60px;background: #f5f5f5;text-transform: capitalize;}
.listings div {color: black}
.listings .item {display:block;border-bottom:1px solid #eee;padding:13px;text-decoration:none;}
.listings .item .title {color:black;font-weight:700;font-family: 'Work Sans', Arial,Helvetica,sans-serif;font-weight: 600;
font-size: 11px;text-transform: Capitalize;}
.listings .item {border-bottom:1px solid #eee;}
.listings .item:last-child {border-bottom:none;}

.listings .item .title small {font-weight:400;}
.listings .item.active .title, .listings .item .title:hover {color:#666;}
.listings .item.active {background: #fefefe;}

 #Div1 {max-height: 35px; overflow-y: hidden;font-family: 'Work Sans', Arial,Helvetica,sans-serif;font-weight: 300;}

::-webkit-scrollbar {width:6px;height:6px;border-left:0;background:rgba(0,0,0,0.1);}
::-webkit-scrollbar-track {background:none;}
::-webkit-scrollbar-thumb {background:#666;border-radius:0;}

.modal-content {background: #f5f5f5;border-radius: 0px;color: black; margin-top: 0vh; height: 45vh;}

.mapboxgl-popup-content div {margin-top: 0px;}

.modal h1 {color: black;padding: 15px 2px 5px 2px; margin-top: -5px;font-family: 'Work Sans',Arial,Helvetica,sans-serif;text-transform: capitalize;font-size: 15px;}
.modal h5 {font-size: 16px; font-style: italic;}
.modal p  {font-family: 'Work Sans', Arial,Helvetica,sans-serif;padding-top 10px; padding-bottom: 10px;}
.myButton:hover {color: white;background: transparent;}     
.myButton:active {position:relative;top:1px;background: transparent;border: 1px solid #f5f5f5}
.myButton {background: transparent;border-style: solid; border-color: #f5f5f5; border-width: 1px;border-radius:0px;display:inline-block;cursor:pointer;color:#f7f7f7;font-family:'Josefin Sans', sans-serif;font-size:14px;padding:11px 31px;text-decoration:none;width: 100%;text-align: center;}
.btn-info {padding: 5px 5px 5px 5px;background: #666;color: white;border-style: none;}

.btn-info:focus {background-color: #f5f5f5; border-color: black;color: black;}
.modal-body {height: 40vh; width: 100%;}
   
@media (min-width: 768px) {.modal-body {margin-top: -125px;}}
.btn-info:hover {background: #666;}

/*Modal Button*/
.modal-header .btn-info {padding: 10px 20px 10px 20px;margin-top: -10px;float: right;color: white;font-family: helvetica;}
.mapboxgl-popup-content h3 {background:transparent;color:#f5f5f5;padding:10px;border-radius:3px 3px 0 0;font-weight:700;margin-top:-15px;text-align: center;margin:0;display:block;}
.mapboxgl-popup-content h4 {padding: 10px 10px 10px 10px;font-weight:400;background: transparent;color: #f5f5f5;text-align: center;}

mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {border-bottom-color: #666;}

label{background: linear-gradient(#F39F86, #FC9842);}
#close {float:right;display:inline-block;padding:2px 5px;background:transparent;color: white;font-size: 1.5em;transition: 500ms;}
#card {background:transparent; padding-top:20px;}   

.full-card {background:linear-gradient(#F39F86, #FC9842);border-radius: 5px;}
.modal {height: 0px !important;}
#card h3 {font-size: 1.8rem !important;}
#card h4 {font-size: 1.3rem !important;}

@media (max-width: 450px) {.modal-content { margin-left: -20%;width: 90vw !important;}}