h1.h1-splash {
    height: 20vh;
    line-height: 20vh;
    font-size: 8vw;
}

body {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.bg-1 {
    background-size: cover;
    background-image: url(../img/shore/1200/1.jpg);
}
body.bg-2 {
    background-size: cover;
    background-image: url(../img/shore/1200/2.jpg);
}
body.bg-3 {
    background-size: cover;
    background-image: url(../img/shore/1200/3.jpg);
}
body.bg-4 {
    background-size: cover;
    background-image: url(../img/shore/1200/4.jpg);
}
body.bg-5 {
    background-size: cover;
    background-image: url(../img/shore/1200/5.jpg);
}
body.looped-leaves {
    background-size: cover;
    background-image: url(../img/shore/looped-leaves.jpg);
}
body.looped-shore {
    background-size: cover;
    background-image: url(../img/shore/looped-shore.jpg);
}
body.looped-tree {
    background-size: cover;
    background-image: url(../img/shore/looped-tree.jpg);
}
body.looped-valerian {
    background-size: cover;
    background-image: url(../img/shore/looped-valerian.jpg);
}
body.looped-water {
    background-size: cover;
    background-image: url(../img/shore/looped-water.jpg);
}
body.looped-water-2 {
    background-size: cover;
    background-image: url(../img/shore/looped-water-2.jpg);
}

body.sun {
    background-size: cover;
    background-image: url(../img/shore/sunblind.jpg);
}
body.sun2 {
    background-size: cover;
    background-image: url(../img/shore/sun2.jpg);
}
body.sun3 {
    background-size: cover;
    background-image: url(../img/shore/sun3.jpg);
}
body.solstice {
    background: #f4f6eb url(../img/shore/winter-solstice-bg-dark.jpg) repeat;
}
body.solstice2 main {
    background: #f4f6eb url(../img/shore/winter-solstice-landscape.jpg) no-repeat bottom left;
    background-size: cover;
}
body.solstice2 footer {
    margin-top: 0;
}
body.solstice2 main {
    position: relative;
}
body.solstice2 main a  {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
body.solstice h1.h1-splash {
    height: 10vh;
    line-height: 4.5vh;
    font-size: 4.5vw;
    max-width: 95vw;
    margin-top: .5vh;
}
body.solstice main img {
    width: 100%;
}
.dropshadow {
    -webkit-box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.1);
box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.1);
}
body.solstice .btn-ff:focus, body.solstice .btn-ff:hover {
    background-color: #476775;
    border-color: #476775;
}



.nav>li>a {
    font-size: 18px;
    text-transform: uppercase;
}

body.KnazXFjNKdE, #KnazXFjNKdE {
    background-size: cover;
    background-image: url(https://img.youtube.com/vi/KnazXFjNKdE/0.jpg);
}

.btn-default:hover a,
.btn a:hover {
    color: black;
}
.btn-ff:hover a, .btn-ff-from:hover a, .btn-ff-from:hover {
    color: white;
}
iframe {
    transition: opacity 500ms ease-in-out;
    transition-delay: 250ms;
}
.video-background-holder {
    position: relative;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow-x: hidden;
  }

  .video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .video-background-content {
    position: relative;
    z-index: 2;
    display: table;
    width: 100%;
    min-height: 100vh;
  }

  .video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.1;
    z-index: 1;
  }

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/

body.looped-leaves {
    background-size: cover;
    background-image: url(../img/shore/400/looped-leaves.jpg);
}
body.looped-shore {
    background-size: cover;
    background-image: url(../img/shore/400/looped-shore.jpg);
}
body.looped-tree {
    background-size: cover;
    background-image: url(../img/shore/400/looped-tree.jpg);
}
body.looped-valerian {
    background-size: cover;
    background-image: url(../img/shore/400/looped-valerian.jpg);
}
body.looped-water {
    background-size: cover;
    background-image: url(../img/shore/400/looped-water.jpg);
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    body.looped-leaves {
        background-size: cover;
        background-image: url(../img/shore/600/looped-leaves.jpg);
    }
    body.looped-shore {
        background-size: cover;
        background-image: url(../img/shore/600/looped-shore.jpg);
    }
    body.looped-tree {
        background-size: cover;
        background-image: url(../img/shore/600/looped-tree.jpg);
    }
    body.looped-valerian {
        background-size: cover;
        background-image: url(../img/shore/600/looped-valerian.jpg);
    }
    body.looped-water {
        background-size: cover;
        background-image: url(../img/shore/600/looped-water.jpg);
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    body.looped-leaves {
        background-size: cover;
        background-image: url(../img/shore/800/looped-leaves.jpg);
    }
    body.looped-shore {
        background-size: cover;
        background-image: url(../img/shore/800/looped-shore.jpg);
    }
    body.looped-tree {
        background-size: cover;
        background-image: url(../img/shore/800/looped-tree.jpg);
    }
    body.looped-valerian {
        background-size: cover;
        background-image: url(../img/shore/800/looped-valerian.jpg);
    }
    body.looped-water {
        background-size: cover;
        background-image: url(../img/shore/800/looped-water.jpg);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .the-buttons .btn {
        max-width: auto;
        width: auto;
        min-width: auto;
        float: right;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h1 {
        font-size: 10vh;
    }
    body.looped-leaves {
        background-size: cover;
        background-image: url(../img/shore/1200/looped-leaves.jpg);
    }
    body.looped-shore {
        background-size: cover;
        background-image: url(../img/shore/1200/looped-shore.jpg);
    }
    body.looped-tree {
        background-size: cover;
        background-image: url(../img/shore/1200/looped-tree.jpg);
    }
    body.looped-valerian {
        background-size: cover;
        background-image: url(../img/shore/1200/looped-valerian.jpg);
    }
    body.looped-water {
        background-size: cover;
        background-image: url(../img/shore/1200/looped-water.jpg);
    }
}

/*
the other direction (the given screen size or smaller):
*/


/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {}

body.shore-home {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/shore/shore-bg-xl.jpg);
}
body.shore-ciby {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/shore/1200/2.jpg);
}
body.shore-ciby h1 {
    font-style: normal;
}

/* Portrait */
@media only screen and (min-device-width: 300px) and (max-device-width: 812px) and (orientation: portrait) {
    body.shore-home {
        background-image: url(../img/shore/shore-bg-mobile-portrait.jpg);
    }
}

@media (max-width: 480px) {
    body.shore-home {
        background-image: url(../img/shore/shore-bg-sm.jpg);
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    body.shore-home {
        background-image: url(../img/shore/shore-bg-lg.jpg);
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    body.shore-home {
        background-image: url(../img/shore/shore-bg-xl.jpg);
    }
}