@font-face {
    dropdown-item servicetype font-family: "HelloBranch-Regular";
    src: url("HelloBranch-Regular.otf");
}
/*Direct elements*/
* {
    font-family: 'HelloBranch-Regular';
}

.form-check-input {
    color: rgb(236, 230, 206);
} 

    .form-check-input:checked {
        background-color: rgb(48, 72, 80);
        border-color: rgb(48, 72, 80);
        color: rgb(236, 230, 206);
    }

    .form-check-input:focus {
        border-color: rgb(236, 230, 206);
        box-shadow: 0 0 0 0.05rem rgb(236, 230, 206);
    }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

footer {
    margin-top: auto;
}


pre {
    font-family: 'HelloBranch-Regular';
}

h1.skole-label {
    font-size: 36px;
    text-transform: uppercase;
    text-align: center;
}

h2 {
    text-align: center;
    margin-bottom: 40px;
}

h4 {
    margin-bottom: 40px;
    font-size: 27px;
}
h5 {
    padding-bottom:30px;
    font-size: 1.5rem;
} 
q{ 
    padding-top:20px;
    padding-bottom:20px;
    font-size: 1.2rem;
    font-style:italic;
}
a {
    transition: 0.2s;
    outline: none !important;
}

    a.anchor {
        display: block;
        position: relative;
        top: -250px;
        visibility: hidden
    }

footer {
    background-color: rgb(48, 72, 80);
    font-size: 18px;
}

hr {
    margin: 80px 0;
}
/*Direct elements*/
/*Foreground*/
.foreground-beige {
    color: rgb(236, 230, 206);
    text-decoration: none;
}

.foreground-white {
    color: floralwhite;
    text-decoration: none;
}
/*Foreground*/
/*Menu*/
.dropdown-menu {
    background-color: rgb(48, 72, 80);
    padding: 15px 30px 15px 10px;
}

    .dropdown-menu .servicetype {
        font-size: large;
        text-align: left;
        text-transform: none;
    }

    .dropdown-menu a {
        background-color: rgb(48, 72, 80) !important;
    }

        .dropdown-menu a:hover {
            background-color: antiquewhite !important;
        }

nav .navbar-nav .nav-item .nav-link {
    color: rgb(236, 230, 206);
    font-size: large;
    margin: 0px 15px;
}

nav .navbar-nav .nav-item .dropdown {
    border: 0px !important;
}

#navbarDropdown::after {
    content: none;
}

#header-container {
    background-color: rgb(48, 72, 80);
    width: 100%;
    height: 90%;
}

.menutext {
    font-family: HelloBranch-Regular;
    font-size: larger;
}

.navbar-custom {
    background-color: rgb(48, 72, 80);
}

#menu-container {
    width: 100%;
}

#main-background-image {
    /* background-color: rgb(48, 72, 80);
    width: 100%; 
    object-fit: cover;
    max-height: 83vh;
    top: 0;*/
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 100px;
    display: block;
}

#headerText {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: rgb(236, 230, 206);
    font-size: 50px;
    font-family: HelloBranch-Regular;
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

#menu-button {
    text-decoration: none;
    padding: 20px 40px;
    border: solid;
    border-color: rgb(236, 230, 206);
    border-width: 1px 1px 1px 1px;
    color: rgb(236, 230, 206);
    background-color: rgb(48, 72, 80);
}

    #menu-button span {
        font-size: 28px;
    }

#menu-button-skole {
    text-decoration: none;
    border: solid;
    border-color: rgb(236, 230, 206);
    border-width: 1px 1px 1px 1px;
    color: rgb(236, 230, 206);
    background-color: rgb(48, 72, 80);
    margin-left: 30px;
    padding: 13px 40px 13px 40px;
    float: left;
}

    #menu-button-skole span {
        font-size: 28px;
    }

#header-menu {
    padding: 20px;
    background-color: rgb(48, 72, 80);
}

.head-underline {
    margin-left: auto;
    margin-right: auto;
    width: 35%;
    border-bottom: solid 1px;
    border-color: black;
}
/*Menu*/
/*Containers*/
.skole-container {
    padding-top: 100px;
    width: 40%;
}

.container {
    font-size: 24px;
}

    .container > .row {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4px;
    }

    .container h3 a {
        color: rgb(99, 99, 110);
    }

    .container .row .col-md-7 {
        display: inline-block;
        vertical-align: middle;
    }
/*Containers*/
/*Cards and columns*/
.card-img-top {
    width: 100%;
    height: 27vw; /*ViewPort width*/
    object-fit: cover; /*This allows zoom. Much better than streching*/
}

.card {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}

.column {
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
}

    .column video {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
        height: Auto;
    }

    .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }
/*Cards and columns*/
/*Buttons*/
.skole-button-container {
    margin: 25px 25px 25px 25px;
}

.skole-button-bordered {
    text-decoration: none;
    padding: 20px 38px;
    border: solid;
    border-color: rgb(236, 230, 206);
    border-width: 3px 3px 3px 3px;
    color: rgb(236, 230, 206);
    background-color: rgb(48, 72, 80);
    transition-duration: 0.4s;
    border-radius: 5px;
}

    .skole-button-bordered:hover {
        opacity: 0.7;
    }

.row .skole-button-bordered {
    text-decoration: none;
    padding: 20px 40px;
    border: solid;
    border-color: rgb(236, 230, 206);
    border-width: 2px 2px 2px 2px;
    color: rgb(236, 230, 206);
    background-color: rgb(48, 72, 80);
}

    .row .skole-button-bordered a:hover {
        text-decoration: none;
        padding: 40px;
    }

/*Buttons*/
/*Borders*/
.border-beige {
    border: 2px solid;
    border-color: rgb(236, 230, 206);
}
/*Borders*/

.text-align-center { 
    text-align: center; 
}
/*Images & Icons*/
.some-icon { 
    color: rgb(48, 72, 80);
}
.some-icon-footer {
    color: rgb(236, 230, 206);
} 

.skolelaiset-img {
    width: 60%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
}

#caption {
    margin: 5px 15px 5px 15px;
    font-size: medium;
}

.modal-content {
    background-color: white;
    border: 0px;
}

#modal-image {
    width: 100%;
}

#modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
}

.some-img {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    .some-img:hover {
        opacity: 0.7;
    }

.some-username {
    font-size: 1.3rem;
}
/*Image*/

/*FORM*/
.skole-form {
    margin-bottom: 100px;
}

.skole-input {
    font-size: 20px;
    padding: 10px;
    margin: 20px;
    border: 0;
    box-shadow: 0px 2px 4px #ededed;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: rgb(48, 72, 80);
}

fieldset {
    padding-top: 50px;
    padding-bottom: 0px;
}

legend {
    font-size: larger;
}
/*FORM*/

/*IFrame*/
#google-maps-iframe {
    width: 100%;
    height: 35vh;
    object-fit: contain;
}
/*IFrame*/

/*Footer*/
footer .container-fluid .row a:hover {
    text-decoration: none;
    color: rgb(236, 230, 206);
}

#footer-img {
    width: 100%;
    padding-top: 100px;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@media only screen and (max-width: 2000px) {
    .skole-container {
        width: 100%;
    }
}

@media only screen and (max-width: 1400px) {
    nav .navbar-nav .nav-item .nav-link {
        font-size: 14px;
        margin: 0px;
    }

    #headerText {
        font-size: 40px;
    }
}
/*
    At this width the nav bar collapses.
*/
@media only screen and (max-width: 990px) {
    /*  #main-background-image {
        width: 100%;
        object-fit: cover;
        max-height: 100vh;
    }*/

    nav .navbar-nav .nav-item .nav-link {
        font-size: medium;
    }

    #headerText {
        font-size: 34px;
    }

    .skole-form {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .skole-container .some {
        width: 80%;
    }

    #navbar-servicelink {
        margin-right: 30px;
    }

    .head-underline {
        width: 70%;
    }

    .navbar-custom {
        margin-bottom: 300px;
    }

    .card {
        width: 100%;
    }

    .dropdown-menu {
        border: 0px;
        padding: 0px 40px 0px 0px;
    }
}

@media only screen and (max-width: 800px) {
    #menu-button {
        padding: 18px 40px;
    }

        #menu-button span {
            font-size: 20px;
        }

    #menu-button-skole {
        padding: 13px 40px 13px 40px;
    }

        #menu-button-skole span {
            font-size: 20px;
        }

    .head-underline {
        width: 90%;
    }

    .skolelaiset-img {
        width: 80%;
        height: 80%;
    }

    #headerText {
        font-size: 24px;
    }

    .dropdown-menu .servicetype {
        font-size: large;
    }
    /*   #main-background-image {
        width: 100%;
        object-fit: cover;
        max-height: 110vh;
    }*/
}

@media screen and (max-width: 600px) {
    /*  #main-background-image {
        width: 100%;
        height: 380px;
        object-fit: cover;
    }*/
    .some-username {
        font-size: 1rem;
    }

    .column {
        flex: 100%;
        max-width: 100%;
    }

    .skole-container .some {
        width: 100%;
    }
}

@media only screen and (max-width: 380px) {
    /*  #main-background-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }*/

    #menu-button {
        padding: 12.5px 25px;
    }

        #menu-button span {
            font-size: 18px;
        }

    #menu-button-skole {
        padding: 8px 25px;
    }

        #menu-button-skole span {
            font-size: 18px;
        }
}

@media only screen and (max-width: 320px) {
    /* #main-background-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }*/
}

@media only screen and (max-width: 295px) {
    #menu-button-skole {
        display: none;
    }
}