{% load static %}

@font-face {
  font-family: "Raleway";
  src: url('fonts/Raleway/Raleway-VariableFont_wght.ttf') format("truetype");
}

:root {
  --blue-color: #2f2f2f;
  --green-color: #f0f0f0;
  --orange-color: #eaac32;
  --grey-color: #ddd;
}

html, body {
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    background: #fff;
    overflow-x: clip;
}

.full-page {
    height: 100vh;
    width: 100vw;
}

.row {
    height: 100%;
}

.centered {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50%;
    color: #fff;
}

.col-xs-5, .col-xs-7 {
    width: 100%;
}

.reversed {
    display: flex;
    flex-direction: column-reverse;
}

.grey {
    background: var(--grey-color);
}

.blue {
    background: var(--blue-color);
}

.tan {
    background: var(--green-color);
    background: #000;
    color: #fff;
}

.orange {
    background: var(--orange-color);
}

.centered > div {
    text-align: left;
    width: 100%;  
    padding: 0px 2vw;
}
div > h1 {
    margin: 0 0 30px 0;   
    font-weight: 600;
    font-size: 2em;
    letter-spacing: 0.02vw;
} 
div > p {
    margin: 0 0 50px 0; 
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 0.03vw;
    font-family: 'Nunito', sans-serif;
} 
.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 90%;
}
.title div { 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title h1, .title h2 {
    display: block;
    text-align: left;
    width: 72%;
    font-family: "Raleway";
    color: #fff;
    line-height: 1em;
    margin: 0;
    padding: 0;
}
.title h1 {
    font-size: 21.5vw;    
    font-variation-settings: 'wght' 200;
    font-weight: 200;
}
.title h2 {
    font-size: 5vw; 
    font-variation-settings: 'wght' 300;
    font-weight: 300;
    letter-spacing: 13.1vw;
}

.btn, .btn-transparent {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02vw;    
    transition: color 0.1s;
    background: #fff;
}

.btn::before, .btn-transparent::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: "";
    height: 100%;
    width: 100%;
    background: #000;
    transition: width 0.3s;
}

.btn::after, .btn-transparent::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    content: "";
    height: 100%;
    width: 0%;
    background: #fff;
    transition: width 0.3s;
}


.btn-transparent {
    position: relative;
    background: none;
}

.btn-transparent::before {
    left: inherit;
    right: 0; 
    background: #fff;
    width: 0%;
    float: right;
}
.btn-transparent::after {
    visibility: hidden;
    background: #fff;
}



.blue .btn::before {
    background: var(--blue-color);
}


.tan .btn {
    background: #000;
    border: 2px solid #000;
    color: #000;
}
.tan .btn::before {
    background: #000;
}
.tan .btn::before {
    background: var(--green-color);
}
.tan .btn::after {
    background: #000;
}
.tan .btn:hover {
    color: #fff;
    background: var(--green-color);
}

.dark .btn {
    background: #000;
    border: 2px solid #000;
    color: #000;
}
.dark .btn::before {
    background: #000;
}
.dark .btn::before {
    background: #fff;
}
.dark .btn::after {
    background: #000;
}


.grey { color: #000; }
.btn-inverse { 
    border: 2px solid #000;
    color: #000;
}
.btn-inverse:before {
    background: #000;
}
.btn-inverse::after {
    background: #000;
}




.grey .btn {
    background: #000;
    border: 2px solid #000;
    color: #000;
}
.grey .btn::before {
    background: #000;
}
.grey .btn::before {
    background: #000;
}
.grey .btn::after {
    background: #000;
}



.orange .btn::before {
    background: var(--orange-color);
}
big {
    padding-right: 30px;
}



@media (hover: hover) {
    .btn:hover {
        color: #000;
        background: #000;
    }
    .btn:hover::before {
        width: 0%;
        z-index: -2;
    }
    .btn:hover::after {
        width: 100%;
        z-index: -1;
    }
    .btn-transparent:hover {
        color: #000;
        text-decoration: none;
        cursor: pointer; 
    }
    .btn-transparent:hover::before {
        right: inherit;
        left:0;
        width: 100%;
        z-index: -2;
    }
    .btn-transparent:hover::after {
        visibility: visible;
        width: 100%;
        z-index: -1;
    }
    .blue .btn:hover {
        background: var(--blue-color);
    }
    .tan .btn:hover {
        color: #fff;
        background: #000;
    }
    .dark .btn:hover {
        color: #fff;
        background: #fff;
    }
    .orange .btn:hover {
        background: var(--orange-color);
    }
    .btn-inverse:hover { color: #fff; }
    .btn-inverse:hover::after {
        background: #000;
    }   
    .orange .btn:hover {
        background: var(--orange-color);
    }
    .grey .btn:hover {
        color: #fff;
        background: #000;
    } 
}