@import url("https://fonts.googleapis.com/css?family=Exo 2|Alegreya Sans");

/*
    Main page header content

    Video will always fill available screen space when page is loaded,
    it will remain in the center when web page is resized and will be shown behind text.
*/

:root {
    --bs-font-sans-serif: "Alegreya Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Exo 2", sans-serif;
}

.pt-6 {
    padding-top: 6rem;
}

#navbar {
    transition: 0.4s;
}

.navbar-hidden {
    background: transparent;
}

.navbar-visible {
    background-color: #1c1d1f;
}



.nav-tabs .nav-item .nav-link {
    color: #FFF;
}

.nav-tabs .nav-item .nav-link.active {
    color: black;
}

header {
    position: relative;
    background-color: black;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

.masthead-90 {
    height: 90vh;
}

.masthead-75 {
    height: 75vh;
}

.masthead-50 {
    height: 50vh;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
}

header .container {
    position: relative;
    z-index: 2;
}

/* Transparent black overlay on top of video to make white text pop out better */
header .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.35;
    z-index: 1;
}

.link-white {
    color: white;
    transition: 100ms;
}

.link-white:hover,
footer a:focus {
    color: lightgray;
}

/* 
    Media Query for devices with coarse pointers and no hover functionality
    This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element
*/

@media (pointer: coarse) and (hover: none) {
    header {
        background: url('../img/PLACEHOLDER_header_fallback_image.jpg') black;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    header video {
        display: none;
    }
}

.toggler-border-disable {
    border: none;
}


/* Footer styling */
footer {
    background-color: #1c1d1f;
}

footer p {
    color: lightgray;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: white;
}

footer a {
    color: lightgray;
    text-decoration: none;
}

footer a:hover,
footer a:focus {
    color: white;
}


.block2-image {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0,0,0,0.7)), url("../img/Solukuva_kakkossivu_v1.jpg") no-repeat center;
    background-size: cover;
}
@media only screen and (min-width: 992px) {
    .block2-image {
        background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), url("../img/Solukuva_kakkossivu_v1.jpg") no-repeat center;
        background-size: cover;
    }
}