:root{
    --lightblue: #3E9ACE; /*62, 154, 206*/
    --blue: #058acc;
    --darkblue: #1F4B6A; /*31,75.106*/
    --lightgrey: #95979a;
    --darkgrey: #414141 ;
    --gold: #6a3e1f;
}

html{
    scroll-behavior: smooth;
}
body{
    /*background-color: white;*/
    margin:auto;
    color:black;
    font-size: 1em;
    margin: 0;
    /*font-family: 'Merriweather', serif;*/
    font-family: 'rubik', serif;
}


h1.scale
{
    margin:3vmin 5vmin;
    font-size: 9vmin !important;
}

h2.scale
{
    font-size: 7vmin !important;
}

h3.scale
{
    font-size: 6vmin !important;
}

.page{
    max-width: 1900px;
    margin:auto;
}

.content{
    min-height: 70vh;
}

.footer{
    padding:80px 0px;
    min-height: 30vh;
    background-color: black; /*rgb(0,135,201);*/
    color:white;
    text-align: center
}

.poster{
    background: rgba(0 ,0 ,0, 0.2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    background-blend-mode: darken;
    text-align: center;
}

.attached{
    background-attachment: fixed;
    background-position: bottom;
}

@media (hover: none) {
 .attached {
     background-attachment: initial;
 }
}



.cover{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

.contain{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: darken;
}

.square{
    width:100%;
    height: 0px;
    padding-bottom:100%;
}

.hd{
    width:100%;
    height: 0px;
    padding-bottom:60%;
}

a {
    text-decoration:none;
    color:inherit;
}

a.button {
    border:1px solid;
    text-decoration: none;
    color:white;
    font-weight: 600;
    font-size:5vmin;
    padding:8px 10px;
}

a.button:hover{
    color:black;
    background: rgba(255,255,255,1);
    transition-timing-function: ease;
    transition-property:border, color, background;
    transition-duration: .5s;
    transition-timing-function: linear;


}

.flexbox{
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

}

.flexbox .flex-item h1{
    font-weight: 600;
    text-align: center;
    font-size: 5em;
}
.flexbox .flex-item h2{
    font-weight: 600;

    text-align: center;
    font-size: 3em;
}
.flexbox .flex-item h3{
    font-weight: 600;
    color:white;
    text-align: center;
    font-size: 2em;
}

.menu_front{
    padding:10px 0px;
    /*background-color: white;*/
}

.menu_front nav{
    display:flex;
    justify-content: center;
}

.menu_front nav a {
    text-decoration: none;
    color:white;
    font-weight: bold;
    padding:12px;
    border: 2px solid rgba(255,255,255,0);
}

.menu_front nav a:hover {
    border-bottom: 2px solid var(--lightblue);
    color: var(--lightblue);
    transition-timing-function: ease;
    transition-property:border, color;
    transition-duration: .5s;
    transition-timing-function: linear;
}

.menu_desktop {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    padding:10px 0px;
    background-color: rgba(255,255,255,0.75);
}

.menu_desktop nav{
    display:flex;
    justify-content: center;
}

.menu_desktop nav a {
    text-decoration: none;
    color:var(--darkblue);
    font-weight: bold;
    padding:12px;
    border: 2px solid rgba(255,255,255,0);
    font-size:3vmin;
}

.menu_desktop nav a:hover {
    border-bottom: 2px solid var(--lightblue);
    color: var(--lightblue);
    transition-timing-function: ease;
    transition-property:border, color;
    transition-duration: .5s;
    transition-timing-function: linear;
}

.menu_mobile {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    padding:3px 0px;
    background-color: rgba(255,255,255,.95);
    /*border-bottom:1px var(--darkblue) solid;*/
    color:var(--darkblue);
    z-index: 300;
    text-decoration: none;

}

.foh_logo{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height:40vmin;
    width: 40vmax;
    /*background-color: red;*/

    margin-bottom:30px;
}
.logo{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height:16vh;
    width: 100%;
    margin:60px 0px;
}

.mobile_logo{
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    height:10vmin;
    width: 25vmin;

}

.mobile_menu_lines div a {
    border-color:grey;
    display:block;
    padding:3vmin;
    border-top:1px solid grey;
    font-size:3vmax;
}

.mobile_menu_lines div a:hover {
    color:white;
    background-color: var(--darkblue);
}

section{
    padding:50px 0px;
    color:black;
}

.portrait{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height:50vmin;
    width: 50vmin;
    margin:2vmin;
}

.card {
    margin:3vmin;
    padding:3vmin;
}


.fh{
    min-height:100vh;
}

.small {
    font-size:small;
}

.smaller {
    font-size:smaller;
}

.justify{
    text-align: justify;
}

.center{
    text-align: center;
}

.right{
    text-align: right;
}

.grey {
    color:grey;
}

.white{
    color:white;
}

.gold {
    color:var(--gold);
}

.darkblue{
    color: var(--darkblue)
}


.lightblue{
    color: var(--lightblue)
}

.darkgrey{
    color: var(--darkgrey)
}


.lightgrey{
    color: var(--lightgrey)
}


.bg-gold {
    background:var(--gold);
}

.bg-darkblue{
    background-color: var(--darkblue);
}
.bg_black {
 background-color: black;
}


.bg-lightblue{
    background-color: var(--lightblue);
}

.bg-darkgrey{
    background-color: var(--darkgrey);
}


.bg-lightgrey{
    background-color: var(--lightgrey);
}

.icon{
    margin-top:12vmin;
    font-size:18vmin;
    color:var(--darkblue);
}