@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');

body {
    color: #3e3621;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5em;
}
#page {
    overflow-x: hidden;
}
p, ul, ol {
    margin-bottom: 1.71rem;
}
p, li {
    font-size: 1.125em;
}
h2 {
    margin-bottom: 40px;
}
svg {
    max-width: 100%;
}
.star-bg {
    background-color: #07827e;
    position: relative;
}
.star-bg:before, .star-bg:after {
    bottom: 0;
    content: '';
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.star-bg:before {
    background: url(../img/stars-1.svg) left top / 727px 837px fixed repeat;
    -webkit-animation: twinkle 3s ease 1.5s infinite normal both running;
            animation: twinkle 3s ease 1.5s infinite normal both running;
    z-index: 1;
}
.star-bg:after {
    background: url(../img/stars-2.svg) left top / 733px 861px fixed repeat;
    -webkit-animation: twinkle 3s ease 0s infinite normal both running;
            animation: twinkle 3s ease 0s infinite normal both running;
    z-index: 2;
}
.star-bg div {
    position: relative;
    z-index: 5;
}
@-webkit-keyframes twinkle {
    0% {
        opacity: .5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .5;
    }
}
@keyframes twinkle {
    0% {
        opacity: .5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .5;
    }
}
#hero {
    height: 610px;
    position: relative;
}
.hero-side, .hero-left-content, .star-bg .hero-side, .star-bg .hero-left-content {
    bottom: 0;
    margin: auto 0;
    position: absolute;
    top: 0;
    width: 50%;
}
.hero-left {
    background-color: #f9f6e2;
    border-right: 5px solid #ba2334;
}
.hero-left-content, .hero-left {
    left: 0;
    padding: 40px 40px 100px;
    text-align: right;
}
.hero-left-content, .star-bg .hero-left-content {
    z-index: 11;
}
.hero-right {
    border-left: 5px solid #ba2334;
    right: 0;
}
.hero-clouds, .bottom-clouds {
    background: url(../img/clouds-full.svg) left top / 1422px 364px repeat-x;
    left: 0;
    position: absolute;
    width: 100%;
}
.star-bg .bottom-clouds {
    position: absolute;
    z-index: 4;
}
.hero-clouds {
    bottom: -80px;
    height: 200px;
    z-index: 5;
}
.star-bg .hero-clouds {
    position: absolute;
    z-index: 5;
}
.bottom-clouds {
    bottom: 0;
    height: 300px;
    z-index: 4;
}
.middle-clouds, .star-bg .middle-clouds {
    background: url(../img/cloud-middle.svg) center top / 1489px 287px repeat-x;
    bottom: -143px;
    left: 0;
    height: 287px;
    position: absolute;
    width: 100%;
    z-index: 4;
}
img.hero-img {
    bottom: 0;
    height: 530px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    -webkit-transform: translateX( calc(50% - 20px) );
            transform: translateX( calc(50% - 20px) );
    width: 777px;
    z-index: 10;
}
#inside-content-top {
    padding: 100px 0 60px;
}
@media only screen and (min-width: 641px) {
    .v-center.row {
        align-items: center;
        display: flex;
        justify-content: center;
    }
}
.inside-section {
    color: #fff;
    padding: 100px 0;
    position: relative;
}
.inside-section.light-bg {
    background-color: #f9f6e2;
    color: #3e3621;
}
.arrow-sep, .star-bg .arrow-sep {
    bottom: -65px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
}
#inside-section-1 {
    padding-bottom: 150px;
    z-index: 3;
}
#inside-section-2 {
    padding-top: 120px;
    z-index: 2;
}
.inside-section .medium-12 p, #footer p {
    margin-left: auto;
    margin-right: auto;
    max-width: 670px;
    width: 100%;
}
#inside-section-2 .row .row {
    margin: 60px 0;
}
#inside-section-3 {
    overflow: hidden;
    padding: 100px 0 200px;
}
#big-things {
    padding-top: 0;
    z-index: 7;
}
.big-things-row.row {
    margin-bottom: -67px;
    position: relative;
    top: -87px;
}

/* Notification */

#notification {
    align-items: center;
    bottom: 0;
    box-shadow: 0 -3px #3e3621;
    display: flex;
    height: 100px;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding: 0 20px;
    position: fixed;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    transition: all .4s ease;
    visibility: hidden;
    width: 100%;
    z-index: 99;
}
#notification.active {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    visibility: visible;
}
#notification img {
    margin: 0 10px;
}
.centered {
    text-align: center;
}
/* h3.watch-video-title {
    margin-bottom: 40px;
} */
#footer {
    bottom: 40px;
    left: 0;
    margin: 0 auto;
    padding: 0 20px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
}
#footer p {
    color: #3e3621;
    font-size: .875rem;
    max-width: 500px;
}

/* Video */

.video-box {
    margin: 0 auto 20px;
    position: relative;
}
.yt-player-contain {
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .4s ease;
    visibility: hidden;
    width: 854px;
}
.star-bg .yt-player-contain, .star-bg .close {
    position: absolute;
}
.yt-player-contain.active {
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: #f15c3a;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    transition: all .4s ease;
    width: 20px;
    z-index: 1000;
}
.close:hover {
    background-color: #fae27f;
}
.close:before, .close:after {
    background-color: #fff;
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .4s ease;
    width: 68%;
}
.close:before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.close:after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
@media only screen and (max-width: 640px) {
    iframe#video-1 {
        height: 188px;
        height: 50.13vw;
    }
}

/* Slider */

.slick-prev:before, .slick-next:before {
    color: #fae27f;
}
.slick-dots li button:before {
    background-color: #fff;
}
.slick-dots li.slick-active button:before {
    background-color: #fae27f;
}
.slick-dots {
    bottom: -20px;
}
.sc-slider-contain {
    padding: 10px;
    position: relative;
}
.sc-slider-contain:before, .sc-slider-contain:after {
    display: block;
    content: '';
    position: absolute;
    z-index: 10;
}
.sc-slider-contain:before {
    background: url(../img/slider-arrow-1.svg) center center / 71px 71px no-repeat;
    height: 71px;
    left: 0;
    top: 0;
    width: 71px;
}
.sc-slider-contain:after {
    background: url(../img/slider-arrow-2.svg) center center / 30px 30px no-repeat;
    bottom: 20px;
    height: 30px;
    right: 60px;
    width: 30px;
}
.sc-lightbox-slider-container {
    width: 90%;
}
.sc-lightbox-slider-container .slick-prev:before, .sc-lightbox-slider-container .slick-next:before {
    color: #f15c3a;
}

/* Lightbox */

.lightbox, .lightbox-contain {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    transition: all .4s ease;
}
.lightbox {
    display: block !important;
    position: fixed;
    width: 100%;
    overflow: hidden;
    z-index: 99991;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, -100vh);
            transform: translate(0, -100vh);
}
.lightbox-contain, .lightbox-content {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
}
.lightbox-contain {
    background-color: #f9f6e2;
}
#image-box-contain {
    background: #f9f6e2;
    text-align: center;
}
.lightbox-content {
    bottom: 0;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
    z-index: 10;
}
#image-box-contain.lightbox-contain img {
    /* max-width: 90%; */
    margin: 0 auto;
}
.lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: translate(0);
            transform: translate(0);
}
.lightbox-contain.sub-open {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
#image-box .close {
    right: 20px;
    top: 20px;
}

/* Responsive */

@media only screen and (max-width: 1024px) {
    #hero {
        height: 490px;
    }
    img.hero-img {
        height: auto;
        width: 600px;
    }
    #hero-title-svg, .hero-btn {
        height: auto;
        width: 250px;
    }
    #inside-content-top, .inside-section {
        padding-left: 5px;
        padding-right: 5px;
    }
}
@media only screen and (max-width: 640px) {
    #hero {
        height: auto;
        overflow: hidden;
        padding-bottom: 50px;
    }
    .hero-side, .star-bg .hero-side {
        border: 0;
        position: relative;
        width: 100%;
    }
    .hero-left {
        display: none;
    }
    .hero-left-content, .star-bg .hero-left-content {
        background-color: #f9f6e2;
        margin-bottom: 20px;
        padding: 20px;
        position: relative;
        text-align: center;
        width: 100%;
    }
    .hero-clouds, .bottom-clouds {
        background-size: auto 100%;
    }
    img.hero-img {
        left: -20px;
        position: relative;
        -webkit-transform: none;
                transform: none;
        width: 120%;
        z-index: 6;
    }
    .row.col-flip {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 0;
    }
    .inside-section {
        padding-bottom: 60px;
        padding-top: 60px;
    }
    .arrow-sep, .star-bg .arrow-sep {
        bottom: -35px;
        padding: 0 20px;
    }
    #inside-section-1 {
        padding-bottom: 70px;
    }
    #inside-section-2 {
        padding: 70px 5px 20px;
    }
    #inside-section-2 .row .row {
        margin: 40px 0 13px;
    }
    #inside-section-2 .row .row .columns {
        margin-bottom: 1.71rem;
    }
    #inside-section-3 {
        padding: 40px 5px 100px;
    }
    h3 svg {
        height: auto;
    }
    #bottom-svg {
        height: auto;
        width: 100%;
    }
    #notification {
        height: 110px;
    }
    #notification a img {
        margin-top: 5px;
    }
    .bottom-clouds {
        height: 140px;
    }
    #footer {
        bottom: 30px;
    }
    #inside-content-top {
        padding: 0 5px 40px;
    }
    #inside-section-3 h2 {
        margin-bottom: 10px;
    }
}