@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
@import url(../fonts/circular/stylesheet.css);
html * {
    transition: all 0.3s ease;
}
body{font-family: 'Circular Std Book', arial, sans-serif;font-weight: normal;font-style: normal;font-size: calc(16px + 2*(100vw - 320px)/1600);line-height: 1.5;}
.serif{font-family: 'Tenor Sans', serif;}

.h1, h1 {font-size: calc(34px + 106*(100vw - 320px)/1600); line-height: 1;margin:0;}
.h2, h2 {font-size: calc(30px + 70*(100vw - 320px)/1600); line-height: 1;margin:0;}
.h3, h3 {font-size: calc(22px + 18*(100vw - 320px)/1600); line-height: 1;margin:0;}
.h4, h4 {font-size: calc(15px + 20*(100vw - 320px)/1600); line-height: 1.222222222222222;margin:0;}
.h5, h5 {font-size: calc(18px + 12*(100vw - 320px)/1600); line-height: 1;margin:0;}
.h6, h6 {font-size: calc(14px + 12*(100vw - 320px)/1600); line-height: 1.3;margin:0;}
.p, p {font-size: calc(14px + 4*(100vw - 320px)/1600); line-height: 1.5;}

a {color: #00597d;  opacity: 0.72;text-decoration: none;}
a:hover  {color: #00597d; opacity: 1; }

.background{
    position: absolute;
}
.background--image {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}
.background--blend__color, .background--blend__multiply, .background--color {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #c9c9c9;
}
.background--blend__color {
    mix-blend-mode: color;
}
.background--blend__multiply {
    mix-blend-mode: multiply;
}
.background--color {
    opacity: 0.9;
}

.content {
    height: 100vh;
    position: relative;
    padding: 5.833333333333333vw 8.333333333333333333vw;
}
.content > .container-fluid > .row {
    height: calc(100vh - 11.666666666666667vw);
}
.logo {
    height: 32px;
    width: auto;
    fill: #00597d;
}
p {
    margin: 0;
    color: #00597d;
}
.block--one, .block--two, .block--three {
    position: relative;
    height: auto;
}
.block--three{
    margin-left: auto;
}
.block--one .last--paragraph {
    margin-top: 18.333333333333333vh;
}
.circle--logo {
    width: 37.5vw; 
    height: 37.5vw;
    background-color: #00597d;
    border-radius: 50%;
    color: #c9c9c9;
}
.circle--logo .logo {
    height: auto;
    width: 15vw;
    fill: #c9c9c9;
}
.social--links {
    padding: 0;
    margin: 0;
    list-style: none;
}
.link {
    font-size: calc(15px + 20*(100vw - 320px)/1600);
    line-height: 1.222222222222222;
}

.hover--facebook p, .hover--instagram p, .hover--facebook a, .hover--instagram a, .hover--facebook h6, .hover--instagram h6 {
    color: #fff;
}
.hover--facebook .background--blend__color,.hover--facebook .background--blend__multiply,.hover--facebook .background--color,.hover--facebook .circle--logo {
    background-color: #4267b2;
}
.hover--facebook .logo,.hover--instagram .logo {
    fill: #fff;
}
.hover--instagram .background--blend__color,.hover--instagram .background--blend__multiply,.hover--instagram .background--color,.hover--instagram .circle--logo {
    background-color: #2c2a35;
}

@media (min-width: 992px) {
    .content {
        padding: 2.916666666666667vw 4.166666666666667vw;
    }
    .content > .container-fluid > .row {
        height: auto;
    }
    .block--one, .block--two, .block--three {
        height: calc(100vh - 5.833333333333333vw);
    }
    .block--one {
        width: 20.833333333333333vw; 
    }
    .block--two{
        padding-left: 12.5vw;
    }
    .logo {
        height: auto;
        width: 15vw;
    }
    .circle--logo {
        width: 18.75vw; 
        height: 18.75vw;
    }
}