@font-face {
    font-family: 'thingsregular';
    src: url('../fonts/things-webfont.woff2') format('woff2'),
         url('../fonts/things-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'thingsitalic';
    src: url('../fonts/things-italic-webfont.woff2') format('woff2'),
         url('../fonts/things-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

:root {
  --color-astronaut: #244673; 
  --color-blue-zodiac: #02152D; 
  --color-white: #ffffff;
  --color-wedgewood: #4B7BA6;
  --color-downriver: #27446A;
  --color-gold: #F5E87F;
}

body {
    background-color: var(--color-blue-zodiac);
    color: var(--color-white);
    font-family: "IBM Plex Sans", sans-serif;
}

/*******************
Typography
********************/

h1 {
    font-size: 2.5rem;
    font-family: 'thingsitalic', serif;
}

h2, h3 {
    font-family: 'thingsregular', serif;
}

h2 {
    font-size: 2rem;
}

p, li {
    line-height: 1.6;
}

a {
    color: var(--color-gold);
}

@media (min-width: 768px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 3rem;
    }
}




/*******************
Header
********************/

.site-header {
    background-color: var(--color-astronaut);
    border-top: 2px solid var(--color-blue-zodiac);
    border-bottom: 2px solid var(--color-blue-zodiac);
}

.site-header a.nav-link {
    color: var(--color-white);
}

.hero {
    background-color: var(--color-astronaut);
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

div[class^='hero'], div[class*=' hero'] {
    min-height: 300px;
}

.hero-content.hp-hero {
    min-height: 0; 
}

@media screen and (min-width: 768px) {
    .hero-content.hp-hero {
        min-height: 300px;
    }
}

@media screen and (min-width: 992px) {
   div[class^='hero'], div[class*=' hero'],
   .hero-content.hp-hero {
        min-height: 500px;
    } 
}

/*******************
Navigation
********************/

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--color-wedgewood);
}

.dropdown-menu {
    background-color: var(--color-blue-zodiac);
    border-radius: 0;
}

.dropdown-item {
    color: var(--color-white)
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--color-wedgewood);
    color: var(--color-white);
}

.navbar-toggler {
    border-color: transparent;
}

.navbar-toggler:focus {
    border: 0;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

@media (min-width: 992px) {
    .dropdown-menu {
        background-color: var(--color-astronaut);
        border-radius: 0;
    }
}




/*******************
Hero
********************/

#heroVid {
    top: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-boat {
    background: url(../images/hero_boat.jpg) no-repeat center center / cover;
}

@media screen and (min-width: 768px) {
    #heroVid {
        position: absolute;
    }
}

@media screen and (min-width: 992px) {
    #heroVid {
        top: 50%;
        transform: translateY(-38%);
    }
}


/*******************
Blocks
********************/

.accordion {
    border-color: var(--color-wedgewood);
}

.accordion-item {
    background-color: transparent;
    color: #ffffff;
    border-color: var(--color-wedgewood);
}

h2.accordion-header .accordion-button {
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--color-astronaut);
}

h2.accordion-header .accordion-button:hover {
    background-color: var(--color-wedgewood);
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border-radius: 0;
}

.accordion-button.collapsed::after,
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/*******************
Forms
********************/

.subscribe-form .form-control{
    border: 0;
}


/*******************
Buttons
********************/

.btn-primary {
    background-color: var(--color-wedgewood);
    border-color: var(--color-wedgewood);
    border-radius: 0;
}
.btn-primary:hover {
    background-color: var(--color-astronaut);
    border-color: var(--color-astronaut);
}


/*******************
Carousel
********************/


@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}