/**
 * @file
 * Subtheme specific CSS.
 */

/* ------------- typography overrides -------------- */
body { font-size: 1rem; line-height: 1.25; background-color: #000000; }
a { color: #713d35; text-decoration: underline; }
a:visited { color: #282125; }

.card-deck .display-4 a { text-decoration: none; }
.text-white a { color: #ffffff; }
.card-deck .card-title { margin-bottom: 0; }
.display-4 { line-height: 1; font-size: 2.5rem; }

a:hover { text-decoration: underline !important; }
a.btn-primary:visited, div.btn-primary a, div.btn-primary a:visited { color: #ffffff; }
h3, h4, h5 { font-family: 'Roboto', sans-serif; }
.main-content h3 { margin-top: 20px; }

div#AlertHeader, div#AlertHeader a { color: rgba(255, 255, 255, .65); text-decoration: none; }
div#AlertHeader .alert a { color: #007bff; }
/* div#AlertHeader a { text-decoration: underline; } */
div#AlertHeader a:hover { color: rgba(255,255,255,.5); }
div#PrimaryMenu ul.nav {
  font-size: 1.3em;
  line-height: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  /*float: right;*/
  margin-right: 15px;
}
nav#block-socialmenu div
nav#block-kon-main-menu a { color: rgba(255,255,255,1); text-decoration: none; }
nav#block-kon-main-menu a:visited, nav#block-kon-main-menu a:hover { color: rgba(255,255,255,.85); }
nav#block-footermenu a { color: #092b40; font-size: 1em; }
nav#block-footermenu a:hover { color: #666666; }
.navbar-dark .navbar-toggler { color: rgba(255,255,255, .85); }

nav#block-socialmenu { color: rgba(255,255,255,.85); }
nav#block-socialmenu a { color: rgba(255,255,255,.85); }

div.card-body .circle {
    background-color: #007bff;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto;
    font-size: 40px;
    border-radius: 50%;
    color: #ffffff;
}

h2.section-heading {
  font-size: 1.4em;
  text-align: center;
  text-transform: uppercase;
  background-color: #999999;
  color: #ffffff;
  letter-spacing: 5px;
}

.dropdown-item.active { background-color: inherit; }
.dropdown-item.active a, .dropdown-item:active a {
  background-color: none;
  font-weight: bold;
  color: #ffffff;
}

.view-content.row h3 { padding: 5px; margin-top: 20px; width: 100%; background-color: #5E6D6D; color: White; letter-spacing: 1px; }
.view-content.row p { margin-bottom: 0.5rem; }
.view-content.row .card h3 { background-color: inherit; margin-top: 0; padding: 0; color: Black; }
.view-beachcomber-events .view-content.row h3 { background-color: #ffffcc; padding-left: 15px; }
.view-beachcomber-news h4 { font-family: 'Alegreya', serif; }
.view-beachcomber-tickets .view-content.row .card h3 { margin-top: 15px; }

.event-card { background-color: #ffffff; margin:0; clear: right; }
.event-card .thumb { padding-left: 0; padding-right: 0; }
.event-card .title { padding-top: 10px; }
.event-card .info { padding-top: 10px; }
.date-sticky { 
  /* position: sticky; */ top: 93px; z-index: 20; text-align: right; padding-right: 10px; font-size: 1.2em; 
  background-color: #ffffff;
  width: auto;
  display: inline-block;
  /* float: right; */
  clear: both;
  padding-left: 10px;
  border-bottom: solid 1px #c4e2e5;
}
@media (max-width: 420px) {
  .date-sticky { font-size: 4vw; top: 117px; }
}

.card-header {
  border-bottom: none;
  background-color: #C4E2E4;
  padding: 0 10px 0 0;
  border: none;
}

.card-body { padding: 15px; }

#block-title-header-block { 
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 5px;
  color: #d9362e;
}

div.caption {
  font-size: 15px;
  font-style: italic;
  text-align: center;
  margin-top: 8px;
  line-height: 17px;
  color: #666666;
}

.list-group-item { background-color: inherit; border: 0 none; }

form.webform-submissiom-form .fieldset-legend { font-size: 2rem; font-family: 'Alegreya',serif; }
form.webform-submission-form label { font-size: 1.2rem; font-weight: bold; }
form.webform-submission-form #edit-coordinator-summary { display: none; }
form.webform-submission-form .progress-step { z-index: 1; }
form.webform-submission-form select { max-width: 100%; height: 2.5rem; }
form.webform-submission-form .checkbox label { padding-left: 0; }
form.webform-submission-form div.form-check { margin-bottom: 0.5rem; }
form.webform-submission-form .form-textarea-wrapper { margin-top: 0.5rem; }
form.webform-submission-form .webform-element-description { margin-bottom: 0.5em; }
form.webform-submission-form div.description { margin-bottom: 0.5rem; }
form.webform-submission-form .webform-actions { margin-top: 3rem; }

form.webform-submission-form details { margin-bottom: 1.5rem; }
form.webform-submission-form details summary { font-size: 1.5rem; margin-bottom: 1rem; }

form.webform-submission-form img.webform-image-file { width: auto; }

.vendors .webform-image-file { max-width: inherit; }
.vendors ul.list-group { margin-top: 1.5em; }
.vendors ul.list-group li { display: inline-block; margin-right: 10px; }
.vendors .card .card-body img { margin: 1em 1em 0 0; display: inline-block; max-width: 100%; }

/* ------------- layout ---------------------- */

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: .5rem;
}
.vending-options.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    grid-gap: .5rem;
}
.view-beachcomber-vendor-application .table-responsive {
  padding-left: 0;
  padding-right: 0;
}

.col-auto { padding-left: 0; padding-right: 0; margin-left: 15px; margin-right: 15px; }

div.btn-primary { margin-bottom: 1em; }

.toolbar-icon-menu-link-content7a0e7071-3b91-40eb-a904-a9c1002e685c:before {
  background-image: url(../images/icons/tiki.svg);
  opacity: 0.55;
}

/* --- containers --- */
@media (min-width: 1200px) {
  .container {
    /* max-width: 960px; */
  }
}
@media (max-width: 991px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
    padding: 0;
  }
  .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  #navbar-main { margin: 0 !important; }
  .col-auto { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

  nav#block-socialmenu { position: relative !important; }

}

@media (min-width: 990px) {
  div#LogoBanner img { max-width: 335px; }

}

@media (min-width: 520px) {
  .image-style-sponsor-logo, .image-style-sponsor-logo-level-2, .image-style-sponsor-logo-level-3 {
    margin: 0 15px 10px;
  }
}

.container.wider {
  /* box-sizing: content-box; */
  /* margin-left: -15px;
  margin-right: -15px; */
  /* width: calc(100% + 30px); */
}
.container.widest {
  /* box-sizing: content-box; */
  /* margin-left: -30px;
  width: calc(100% + 30px); */
}
.container.divider {
  /*background-color: #104a6f;*/
  min-height: 24px;
  margin-top: 20px;
  margin-bottom: 15px;
  /*background-image: url(/themes/custom/kon/images/bg_logo.gif);*/
  background-size: cover;
  background-position: center;
}
.container.divider.floating {
  margin-top: 0;
  margin-bottom: 0;
  display: none;
}
.container.divider h2 { 
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.0em;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: #092b40;
  padding: 3px; 
  margin: 0;
}

/* --- global --- */
#page > header { /* position: sticky; position: -webkit-sticky;  */top: 0; z-index: 100; }
#page { background-image: url(../images/theme_background64b4.jpg?cb=20191116) !important; }
div#main { padding: 20px 40px; padding-bottom: 50px; background-color: #c4e2e5; margin-top: 0;   }
div#main-wrapper { padding-top: 0; background: none; }
/* div#main-wrapper div#main { padding-bottom: 100px; } */
div#featured-bottom aside { background-color: #c4e2e5; }
div#page { background-attachment: fixed; }

.featured-view div.views-row { width: 50% !important; }

/* img.image-style-thumbnail { width: 100%; height: auto; } */
.node div.field--name-field-thumbnail { float: right; margin: 0 0 1em 1em; }

form.webform-submission-form fieldset, form.webform-submission-form .form-actions { padding-left: 0; padding-right: 0; }
form.webform-submission-form .col-auto { margin-left: 0; margin-right: 0; }

/* -- wrapper for flag + title in views -- */
.favoriter { font-size: 0.8em; text-transform: uppercase; display: inline-block; }
.favoriter div.flag { display: inline-block; font-size: 18px; }
.favoriter div.flag a, .favoriter div.flag a:visited { color: Brown; }

.node__meta { margin-bottom: 1.0em; }



/* - regions - */
/* div#LogoBanner { padding: 0; display: flex; justify-content: center; overflow: hidden; } */
div#LogoBanner { 
  min-height: 60px;
  background-color: lightblue;
  background-image: url(../images/bg_logo.gif);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
div#LogoBanner img { /* width: 90%; */ max-width: 414px; }

.path-frontpage div#LogoBanner {
  height: 30px; min-height: auto;
}
.path-frontpage div#LogoBanner a {
  display: none;
}

div#AlertHeader 
{
  background-color: #282125; 
  /* background-image: url(/themes/custom/kon/images/band_zigzag_dark.png); */
  background-size: cover;
  background-position: center;
  min-height: 3px;
  margin-right: -15px;
  margin-left: -15px;
  width: calc(100% + 30px);
}
body.path-frontpage div#AlertHeader { min-height: 20px; }
div#AlertHeader div { 
  width: 100%; 
}
.alert-wrapper { position: relative; }


.region-hero { padding-bottom: 10px; background-color: #282125; }
.path-frontpage .region-hero { padding-bottom: 0; }
/* div#Hero { min-height: 50px;  } */
div#Hero .region-hero>div { width: 100%; }
div#Hero .region-hero .block { width: 100%; }
.hero-block { background-color: #000000; /* display: flex; */ justify-content: center; position: relative; }
div.hero-block img { width: 100%; height: auto; }
img.image-fill { width: 100%; }

.views-exposed-form label { display: block; }

.view-beachcomber-lineup h2.node__title { display: none; }

.hero-block img.default { opacity: 0.5; }
.hero-block .photo-credit {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  color: rgba(255,255,255,.55);
  font-size: 0.7em;
  padding: 2px 15px;
  box-sizing: content-box;
  left: 0;
}

div#BottomHeader { min-height: 50px; background-color: #ccffcc; }
div#BottomHeader div.navbar { margin-left: -15px; margin-right: -15px; }
#navbar-main { 
  margin: 0 -15px; 
  background-color: #282125 !important;
  /* background-image: url(/themes/custom/kon/images/band_zigzag_dark.png); */
  background-size: cover;
  background-position: center;
  min-height: 42px;
  padding: 0 20px;
}
.navbar { display: block; }
.navbar-toggler { margin-top: 5px; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.5); }

section.region-footer-first, section.region-footer-second { width: 100% !important; display: flex; justify-content: center; }
div#footer-first, div#footer-second { background-color: #87a6a4; padding-top: 10px; }

.card { margin-bottom: 15px; }
.card-body p:last-child { margin-bottom: 0; }

.field--name-field-image-gallery .field__item {
  display: inline-block; margin-right: 10px;
}

.ticket-item { 
  background-color: #dddddd;
  display: block;
  padding: 3px;
  margin-bottom: 2px;
  margin-right: 10px;
}

/* - navigation -*/
div#PrimaryMenu { /* position: sticky; position: -webkit-sticky; */ top: 100px; z-index: 100; }
div#PrimaryMenu ul.navbar-nav li { display: block; margin-right: 15px; font-size: 1.1em; }
nav#block-socialmenu ul.nav { float: right; }
.navbar-toggler-icon { text-indent: 40px; font-size: 14px; padding-top: 0px; letter-spacing: 2px; text-transform: uppercase; }
nav#block-socialmenu { /*position: absolute;*/ right: 15px; font-size: 1.6em; width: 160px; }
nav#block-kon-main-menu { width: 100%; }
ul.dropdown-menu { background-color: #36566D; }
ul.dropdown-menu a { color: #ffffff; text-decoration: none; }
ul.nav { text-decoration: none; }
.dropdown-item { margin: 10px; background-color: inherit; width: auto; }
.dropdown-item:hover, .dropdown-item a:visited { background-color: inherit; }
.nav-link { text-decoration: none; }

/* - blocks - */
div#block-sitealerts { padding: 3px; }
div#block-sitealerts p { padding: 0px; text-align: center; font-size: 1em; margin: 0;  }
div.view-beachcomber-news .views-row { margin-bottom: 25px; }
.home-news { padding: 0 15px; margin-bottom: 1.0em; }
div#LinkBox { width: 67%; margin: 0 auto; text-align: center; }
div#LinkBox h3 { font-size: 1.4em; margin: 0; }

/* - views - */
.view-beachcomber-page-hero > .view-content.row > div { width: 100% }
.view-beachcomber-news .attachment { margin-bottom: 24px; }
.view-beachcomber-how-to-attend .card-title, .view-beachcomber-get-involved .card-title, .card-stack .card-title { white-space: nowrap; text-align: center; }

/* this is kludgey */
#block-views-block-beachcomber-how-to-attend-block-1, #block-views-block-beachcomber-news-block-2 { background-color: #87a6a4; padding-bottom: 25px; }
.heading-block-views-block-beachcomber-how-to-attend-block-1, .heading-block-views-block-beachcomber-news-block-2 { 
  background-color: #87a6a4; margin-bottom: 0 !important; padding: 20px 0 10px;
}
.heading-block-views-block-beachcomber-how-to-attend-block-1 h2, .heading-block-views-block-beachcomber-news-block-2 h2 { 
  color: White !important; font-weight: bold;
}
#block-views-block-beachcomber-how-to-attend-block-1 #LinkBox a, #block-views-block-beachcomber-news-block-2 #LinkBox a { 
  color:#092b40;
}

.heading-block-views-block-beachcomber-sponsors-block-1, .block-views-blockbeachcomber-sponsors-block-1 { background-color: #eeeeee; }
.heading-block-views-block-beachcomber-sponsors-block-1 { margin: 0 !important; padding-top: 30px; }
.block-views-blockbeachcomber-sponsors-block-1 { margin: 0 !important; padding-bottom: 30px; }

/* -- IE fix --*/
.views-element-container.block.block-views { width: 100%; }
.card a { min-height: 1px; }


/* --- homepage --- */
#home-slider { width: 100%; }

/* --- schedule --- */
div.schedule-row { padding: 10px 0; }
.schedule-block .view-filters { margin: 0 -30px; }
/* div.schedule-row:nth-child(even) { background-color: #dddddd; } */

img.image-style-mini-hero { width: 100%; max-width: 650px; height: auto; }

a.schedule-filter.active { background-color: #ffffff; }
a.schedule-filter { 
  padding: 5px 10px;
  background-color: #B8D3D6;
  margin: 0 3px 3px 0; 
  display: inline-block;
}

/* -- width: 100% was commented out because it causes sponsor logos to be displayed in a single column -- */
div.view-content.row>div { /*display: flex; flex-flow: row wrap;*/ width: 100%; /*margin: 0.5%;*/ }
.view-beachcomber-cocktails div.view-content.row>div { max-width: 33%; min-width: 200px; }
.sponsor-block div.view-content.row>div { display: inline-block; width: auto; }
.path-frontpage .view-beachcomber-get-involved, .card-stack { margin-right: 15px; margin-left: 15px; }
.view-beachcomber-get-involved div.view-content.row>div, .card-stack div.view-content.row>div { min-width: 225px; }
.views-field-field-hero-image { width: 100%; height: 100%; }

.block-views-blockbeachcomber-sponsors-block-1 { margin: 0 auto 40px; width: 100%; }
.sponsor-block .view-content { width: 100%; display: flex; text-align: center; justify-content: center; align-items: center }
.sponsor-block .view-content .field-content { text-align: center; }
.image-style-sponsor-logo, .image-style-sponsor-logo-level-2, .image-style-sponsor-logo-level-3 { margin: 0 15px 20px 15px; }
.image-style-hero { width: 100%; height: auto; }

/* ------------ homepage carousel -------------- */
/* .carousel-caption { background: rgb(0,0,0); background: rgba(0,0,0,0.8); left: auto; right: auto; width: 100%; bottom: 0px; } */
.carousel-caption { 
  background: rgb(0,0,0); background: rgba(0,0,0,0.8); 
  left: 0; bottom: 0;
  width: 34%; height: 100%; max-width: 35%; 
  padding: 20px 15px; 
  text-align: left;
  display: flex;
  align-items: center;
}
.carousel-item .image-style-hero { width: auto; }
.carousel-item:nth-child(odd) .carousel-caption {
  left: auto; right: 0;
}
div.carousel-image { width: 100%; height: 500px; background-size: cover; background-position: center; }
.carousel-caption a, .carousel-caption a:visited { color: rgba(255,255,255,.65); }
.carousel-caption a:hover { color: rgba(255,255,255,.9); }
.carousel-indicators { bottom: 0px; }
.carousel-indicators li { height: 10px; }
.carousel-control-next, .carousel-control-prev { 
  bottom: 12px; top: auto; 
  width: 50px; 
  /* height: 50px;
  background-color: #000000; 
  box-shadow: 0px 0px 50px #000000; 
  display: flex; 
  border-radius: 50px; 
  margin: 0 10px;  */
}

/* -- sponsor page -- */
div.field--name-field-logo {
  float: right !important;
  margin: 0 0 15px 15px !important;
  max-width: 50% !important;
}
div.field--name-field-logo img {
  width: 100%;
  height: auto;
}

.card .includes { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 843px) {
  .card .includes { padding-top: 0; }
}

/* -- event content type -- */
.field--name-field-presenting-sponsor div { display: inline-block; padding-right: 0; }
.field--name-body { /* margin-bottom: 1.0em; margin-top: 1.0em; */ }

.event-info { margin: 1em 0; }
.event-info div.thumbnail { min-width: 155px; padding-left: 0; }
.field--type-entity-reference { margin-top: 1em; }
.adjust-15left { margin-left: -15px; }

/* -- gift shop -- */
.product-thumb img { width: 100%; max-width: 300px; height: auto;}
.field--name-field-image-gallery { margin-top: 40px !important; width: 100%; text-align: center; }
.field--name-field-ticket-link { margin-top: 1em; }

/* form.webform-submission-form label {
  display: inline-block;
} */

form.webform-submissiom-form button, input, optgroup, select, textarea {
  display: block;
}

.grid { margin-bottom: 25px; }
.grid tr.clear-style { border: 0 none; }
.grid tr.clear-style td {
  background-color: #c4e2e5;
  border: 0 none;
  font-size: 1.0rem;
}
.grid h4 {
  font-size: 1.0rem;
  margin: 0;
}

#sidebar_first nav.navigation { 
  border: 0 none;
}
#sidebar_first li {
  display: block; 
  border: 0 none;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: 'Roboto Condensed',sans-serif;
  margin-top: 2px;
  width: 100%;
}
#sidebar_first li > ul {
  padding-left: 0;
  margin-left: 0;
}
#sidebar_first li > ul > li {
  font-size: 1.0rem;
  font-weight: normal;
}
#sidebar_first li > ul > li, #sidebar_first li > a {
  width: 100%;
}
#sidebar_first a.is-active {
  background-color: #ffffff;
}
#sidebar_first a {
  background: rgba(0,0,0,0.063);
  text-transform: uppercase;
}
.sidebar .block {
  padding-top: 10px;
  background-color: inherit !important;
}
@media (max-width: 830px) {
  #sidebar_first li > ul > li, #sidebar_first li > a {
    display: inline-block;
    width: 100%;
  }
}
@media (max-width: 830px) {
  #sidebar_first li > ul > li, #sidebar_first li > a {
    display: inline-block;
    width: auto;
  }
  #sidebar_first ul {
    display: inline;
  }
  .sidebar .block {
    padding: 0;
    margin: 0;
  }
  .sidebar {
    padding-left: 0;
    max-width: 100%;
  }
}

/* --------------- UTILITY CLASSES ------------------ */
.extend { box-sizing: content-box; }
.inline-block { display: inline-block; }
.margin-below { margin-bottom: 1.0em; }
.fine-print { font-size: 0.8rem; }

.sm-view { display: none; } /* only to be shown at lower resolution */
@media (max-width: 768px) {
  .sm-view { display: inherit; }
}

@media (min-width: 768px) {
  /* div#LogoBanner { display: flex; justify-content: center; display: flex; justify-content: center; overflow: hidden;  }
  div#LogoBanner img { width: auto !important; } */
  div#main {
    padding: 20px 40px;
    padding-bottom: 50px;
  }
  div.carousel-image { height: 400px; }
}


@media (max-width: 768px) {
  /* div#LogoBanner { display: flex; justify-content: center; display: flex; justify-content: center; overflow: hidden;  }
  div#LogoBanner img { width: auto !important; } */
  div#main {
    padding: 20px 40px;
    padding-bottom: 50px;
  }
  div.carousel-image { height: 300px; }
}
@media (max-width: 680px) {
  div.carousel-image { height: 250px; }
  div.carousel-caption h3 { font-size: 1.2em; }
  div.carousel-caption p { font-size: 0.8em; margin-top: 0.5em; }
}
@media (max-width: 520px) {
  .main-content.col { padding-left: 0; padding-right: 0; }
  #block-sitealerts { font-size: 0.8em; }
  div#LogoBanner img { height: 50px; }
  h1 { font-size: 2.2em; }
  /* at this size, move caption to bottom */
  .carousel-caption {
    position: relative; 
    width: 100%;
    max-width: none;
    text-align: center;
    padding: 10px;
    background:#333333;
  }
  .carousel-caption h3 {
    margin-bottom: 0;
  }
  .carousel-caption p {
    line-height: 1.2em;
    margin-bottom: 30px;
  }
  .carousel-caption div { width: 100% }
  .view-content.row h3 { /* margin-top: auto; */ }
  div.carousel-image { height: 200px; }
  .card-img-top { display: none; }
  div#LogoBanner { min-height: 75px; }
  div#PrimaryMenu { top: 75px; }
  div.hero-block img { width: 100%; height: 150px; }
}
@media (max-width: 320px) {
  div.carousel-image { height: 175px; }
  .card-img-top { display: none; }
}

@media (max-width: 500px) {
  .field--type-image img { max-width: 125px; max-height: 125px; }
}

@media (max-width: 991px) {
  nav#block-socialmenu ul.nav { float: none; }
}

@media (min-width: 830px) {
  .col-md-4 {
    /* flex: 0 0 23%; */
    max-width: 25%;
  }
}
@media (max-width: 830px) {
  .col-md-4 {
    flex: none;
  }
  .schedule .card-header { display: none; }
  .vendors .card { display: block; }
  .vendors .card .card-header img { margin-bottom: 1em; }
  .vendors .card .card-body img { margin: 1em 1em 0 0; display: inline-block; }
}