/* Header */
.yass-header {
    background-image: url("img/yass-header-bg.png");
}

@media screen and (min-width: 30em) {
    .yass-header {
        min-height: 100vh;
        height: 100%;
    }
}

@media screen and (max-width: 45em) {
    .yass-header {
        background-image: url("img/yass-header-bg-mobile.png")    
    }
}

/* Colors */
.bg-yass-blue { background-color: #001A3B; }
.bg-yass-yellow { background-color: #F3BB20; }
.bg-yass-red { background-color: #C31344; }
.bg-yass-green { background-color: #6FC7B1; }

.yass-blue { color: #001A3B; }
.yass-yellow { color: #F3BB20; }
.yass-red { color: #D15779; }
.yass-green { color: #6FC7B1; }

.b--yass-red { border-color: #C31344; }

/* Fonts */
.montserrat { font-family: "Montserrat", sans-serif; }
.karla { font-family: "Karla", sans-serif; }

/* Shadows */
.shadow-yass-yellow { text-shadow: 2px 2px #F3BB20; }
.shadow-white { text-shadow: 2px 2px #FFFFFF; }

/* Heights */
#yass-header-img {
    height: 5.5rem;
}

@media screen and (min-width: 60em) {
    .f-display-l {
        font-size: 4.5rem;
    }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
    .f-subdisplay-m {
        font-size: 4rem;
    }
}

/* Carousel */
ul.slick-dots > li {
    display: inline-block;
}

ul.slick-dots > li > button {
    background: white;
    border: none;
    cursor: pointer;
    color: rgb(0, 0, 0, 0.20);
    font-size: 1.2rem;
}

ul.slick-dots > li.slick-active > button {
    color: rgb(0, 0, 0, 0.90);
}