/*
 *  Reset
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}


 /*
 *  Base Styles
*/

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

:root {
  --brand-blue: #3cf;
  --brand-orange: #f80;
  --main-font-family: 'Source Sans Pro', sans-serif;
  --facebook-color: #4267b2;
  --instagram-color: #cd486b;
  --twitter-color: #1da1f2;

  --header-height: 0px;
}

html,
body {display:flex; flex-direction:column; flex:1; min-height:100%;}

body {font-family:var(--main-font-family); background:rgba( 0,0,0, .05 );}

a:link,
a:visited {color:black; text-decoration:none;}
a:hover {text-decoration:underline;}

h2 {margin:30px 0; text-align:center; font-size:30px; font-weight:900; color:black;}

ul {list-style:disc; padding-left:30px;}

header {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:20px; background:white;}

header .logo {display:inline-flex; margin-right:auto; padding:5px 20px 10px 20px; background:#3cf; border-radius:0 10px 10px 10px; color:white; font-size:30px; line-height:1em; text-transform:lowercase; text-decoration:none;}
header .logo {background:var(--brand-blue); color:white;}

header .search {}
header .search input {width:400px; max-width:100%; padding:10px; background:rgba( 0,0,0, .05 ); border:0;}

header .social {display:flex; align-items:center; gap:15px; margin-left:auto; font-size:18px; line-height:120%;}
header .social a:link,
header .social a:visited {color:black; cursor:default; pointer-events:none;}
header .social .fa-facebook {color:var(--facebook-color);}
header .social .fa-instagram {color:var(--instagram-color);}
header .social .fa-twitter {color:var(--twitter-color);}

@media ( max-width:750px ){
  header {flex-direction:column; align-items:center; justify-content:flex-start; gap:20px;}
  header .logo {margin:0;}
  header .social {display:none;}
}

.hero {position:relative; display:flex; align-items:flex-end; height:75vh; min-height:30vh; padding:40px; background:blue; transition:height 1s;}
.hero.shrink {height:20vh;}
.hero .video {position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.hero .video video {width:100%;}

.frame {position:relative; z-index:1; display:flex; flex:1;}

main {padding:40px;}

@media ( min-width:901px ){
  main {margin-right:25%;}
  .sidebar {position:fixed; top:var(--header-height); right:0; bottom:0;}
}

@media ( max-width:480px ){
  main {padding:30px 20px;}
}

.sidebar {min-width:25%; background:white; color:rgba( 0,0,0, .65 ); font-size:13px; line-height:1.4em;}
.sidebar .inner {padding:30px;}

@media ( max-width:900px ){
  .sidebar {min-width:40%;}
}

@media ( max-width:750px ){
  .sidebar {display:none;}
}

.sidebar .map {height:400px;}

.sidebar h3 {margin:20px 0 10px 0; color:rgba( 0,0,0, .75 ); text-transform:uppercase;}

.sidebar .label {display:flex; flex-direction:column; margin:0 0 30px 0; font-size:25px; line-height:1.2em; font-weight:900; color:var(--brand-blue);}
.sidebar .label .first-line {display:flex;}
.sidebar .label .in {margin-left:5px; color:rgba( 0,0,0, .25 );}

.title {position:relative; z-index:2; width:100%; color:black; text-align:center;}
.title .label {display:inline-flex; flex-wrap:wrap; justify-content:center; margin:0 0 40px 0; color:black; font-size:40px; font-weight:900;}
.title .label > div:not(:first-child) {margin-left:.2em;}
.title .label .in {color:rgba( 0,0,0, .6 );}

.slider {position:relative; width:100%; max-width:500px; margin:0 auto 20px auto;}
.slider .tick {position:absolute; top:100%; height:15px; padding-top:12px; color:rgba( 0,0,0, .5 ); font-size:14px; transform:translateX(-50%);}
.slider .tick.on {color:rgba( 0,0,0, 1 );}
.slider .tick:before {content:''; position:absolute; top:0; left:50%; height:10px; border-left:1px solid rgba( 0,0,0, .5 );}
.slider .tick.first:before,
.slider .tick.last:before {border-left:0;}
.slider.ui-widget.ui-widget-content {height:10px; background:rgba( 0,0,0, .2 ); border:0; border-radius:5px; box-shadow:inset 0 2px 2px rgba( 0,0,0, .3 );}
.slider .ui-slider-handle {display:flex; align-items:center; justify-content:center; top:50%; transform:translate(-50%, -50%); width:30px; height:30px; margin:0; border-radius:0 35% 35% 35%; border:3px solid white; background:#3cf; outline:none; box-shadow:0 0 10px rgb( 0,0,0, .2 ); cursor:grab; transition:box-shadow .2s;}
.slider .ui-slider-handle:hover {box-shadow:1px 1px 8px 3px rgb( 0,0,0, .3 );}
.slider .ui-slider-handle:active {cursor:grabbing;}
.slider .ui-slider-handle:after {content:'\f0c9'; transform:rotate(90deg); font-family:"Font Awesome 5 Free"; font-weight:bold; color:rgba( 255,255,255, .75 ); font-size:12px;}
.slider .ui-widget-header {background:var(--brand-blue);}

.cards {display:grid; grid-template-columns:repeat( 3, 1fr ); grid-gap:30px; padding:40px;}

@media ( min-width:1201px ){
  .cards.ten-plus {grid-template-columns:repeat( 4, 1fr );}
}

@media ( max-width:1200px ){
  .cards {grid-template-columns:repeat( 2, 1fr );}
}

@media ( max-width:1100px ){
  .frame > .logo {display:none;}
}

@media ( max-width:900px ){
  .cards {grid-template-columns:repeat( 1, 1fr );}
}

@media ( max-width:750px ){
  .cards {grid-template-columns:repeat( 2, 1fr ); padding:40px 0;}
}

@media ( max-width:600px ){
  .cards {grid-template-columns:repeat( 2, 1fr );}
}

.card {position:relative; display:flex; flex-direction:column; background:white; border-radius:5px; /* box-shadow:10px 10px 0 rgba( 0,0,0, .3 ); */ transition:all .1s;}
.card:hover,
.card.hover {transform:scale(1.05); box-shadow:none; /* box-shadow:0 0 5px rgba( 0,0,0, .6 ); */}
/*
.card.highlight {background:#ffc;}
*/
.card .text {position:relative; flex:1; display:flex; flex-direction:column; padding:20px; background:white;}
.card .text .cat {position:absolute; top:0; left:50%; transform:translate(-50%, -50%); align-self:center; display:inline-flex; padding:3px 10px; font-size:13px; text-align:center; background:var(--brand-orange); color:white;}
.card .text .name {font-size:25px; line-height:1.2em; font-weight:bold; text-align:center;}
.card .text .snip {margin-top:15px; font-size:15px; line-height:1.2em; font-style:italic; text-align:center;}
.card .text .description {opacity:0; transition:opacity .5s; margin-top:15px; font-size:15px; font-style:italic; text-align:center;}
.card .text .description.visible {opacity:1;}
.card .tags {flex:1; margin-top:30px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end; font-size:11px; line-height:1em;}
.card .tags .tag {padding:6px 8px; border-radius:3px; background:rgba( 0,0,0, .05 ); cursor:pointer;}
.card .tags .tag:not(:first-child) {margin-left:5px;}
.card .tags .tag:hover {background:rgba( 0,0,0, .1 );}
.card .image {position:relative; max-height:60%; overflow:hidden;}
.card .image img {display:block; width:100%;}
.card .image video {display:block; width:100%;}
.card .image .highlight {position:absolute; z-index:2; top:0; left:0; margin:10px; padding:6px 8px; box-shadow:0 0 8px 2px rgba( 0,0,0, .3 ); background:var(--brand-blue); color:white; font-size:11px; line-height:1em; font-weight:bold; transition:opacity .1s;}
.card .image .highlight i {margin-right:5px;}
.card:hover {}
.card:hover .image .highlight {opacity:0;}
.card:hover .text {border-radius:5px;}
.card:hover .image {border-radius:5px 5px 0 0;}

@media ( min-width:1201px ){
  .cards.ten-plus .text .name {font-size:20px; line-height:1.2em;}
  .cards.ten-plus .text .snip {font-size:14px; line-height:1.2em;}
  .cards.ten-plus .text .description {font-size:14px; line-height:1.2em;}
}

@media ( max-width:600px ){
  .card .text .cat {font-size:11px; line-height:1.2em;}
  .card .text .name {font-size:18px; line-height:1.2em;}
}

@media ( max-width:480px ){
  .cards {grid-gap:20px;}
  .card {box-shadow:none;}
}

.contribute {margin:40px 0 0 0; color:black; font-size:18px; text-align:center;}
.contribute a {color:black;}

.destinations {display:grid; grid-template-columns:repeat( 4, 1fr ); grid-gap:20px;}
.destinations .destination {position:relative; display:flex; background:linear-gradient( to top, rgba( 0,0,0, .3 ), transparent ); transition:transform .1s;}
.destinations .destination:hover {transform:scale(1.1);}
.destinations .destination img {width:100%;}
.destinations .destination .name {position:absolute; z-index:2; top:0; left:0; width:100%; padding:30px; text-align:center; color:white; font-size:30px; line-height:1.2em; text-transform:uppercase; font-weight:900; text-shadow:0 0 10px rgba( 0,0,0, .2 );}

@media ( max-width:1200px ){
  .destinations {grid-template-columns:repeat( 3, 1fr );}
}

@media ( max-width:900px ){
  .destinations {grid-template-columns:repeat( 2, 1fr );}
}

@media ( max-width:480px ){
  .destinations {grid-template-columns:repeat( 1, 1fr );}
}

.activity-list {list-style:none; padding:0; font-size:14px; line-height:1.4em;}
.activity-list li {display:flex; align-items:center; margin-bottom:2px;}
.activity-list .highlight {font-weight:bold;}
.activity-list .fa {width:12px; margin-right:10px;}
.activity-list .fa-star {color:var(--brand-orange); font-size:10px;}

.map-label {margin-top:-5px; padding:6px 10px; border-radius:0 6px 6px 6px; border:2px solid white; background:var(--brand-blue); box-shadow:2px 2px 0px 0px rgba( 45,103,123, .54 ); font-family:var(--main-font-family) !important; font-size:11px; font-weight:600; color:white !important; cursor:pointer; transition:transform .1s;}
.map-label:hover {transform:scale(1.05);}
.map-label.hover {transform:scale(1.1); z-index:3;}

.map div[role="img"] img {transition:transform .1s;}
.map div[role="img"].hover img {transform:scale(1.1); z-index:3;}