:root {
    --main-blue-color: #0085a1;
    --main-blue-color-rgba: rgba(0, 133, 161, 0.5);
}

::selection {
  background: var(--main-blue-color-rgba);
}

/*---------------- v STANDARD v ---------------- */

@font-face {
    font-family: "fira-light";
    src: url("fonts/FiraSans-Light.woff2") format("woff2"),
        url("fonts/FiraSans-Light.woff2") format("woff2");
}

@font-face {
    font-family: "akrobat-regular";
    src: url("fonts/Akrobat-Regular.woff2") format("woff2"),
        url("fonts/Akrobat-Regular.woff") format("woff");
}

@font-face {
    font-family: "akrobat-light";
    src: url("fonts/Akrobat-Light.woff2") format("woff2"),
        url("fonts/Akrobat-Light.woff") format("woff");
}

@font-face {
    font-family: "akrobat-thin";
    src: url("fonts/Akrobat-Thin.woff2") format("woff2"),
        url("fonts/Akrobat-Thin.woff") format("woff");
}

html {
    height: 100%;
}

body {
    color: black;
    height: 100%;
    font-family:"fira-light",sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family:"akrobat-regular",sans-serif;
    font-weight: 300;
}

a {
    color: var(--main-blue-color);
    text-decoration: none;
}

/* Default page bodies to nav-bar padding, use the .home-body class only on the homepage to remove it */
.content {
    padding-top: 86px;
}

.home-content {
    padding-top: 0;
}

.vh-10 {
    height: 10vh;
}

.mh-75vh {
    max-height: 75vh;
}

/* remainder this section are pre bootstrap legacy kept in case still in use */
.fill-vh {
    height: 100vh;
}

.fill-parent-height {
    height: 100%;
}

.fill-parent-width {
    width: 100%;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

.no-margin {
    margin: 0;
}

.divider {
    border: 1px solid var(--main-blue-color-rgba);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    width: 80vw;
}

/*---------------- ^ STANDARD ^ ---------------- */

/*---------------- v NAVBAR v ---------------- */

.navbar {
    font-family:"akrobat-light",sans-serif;
    padding: 0.5rem 0; /* override horizontal padding to enable dropdown to fill width on mobile */
}

.navbar-container {
    padding: 0rem 0; /* override all padding to enable dropdown to fill width on mobile and prevent whole navbar from getting too fat */
}

.navbar-brand {
    white-space: pre;
    letter-spacing: 5px;
    text-transform: uppercase;
    /* font-weight:800; */
    color:#fff;
    padding:20px;
    margin-right: 0;
}

.navbar-custom {
    background:0 0;
    border:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.navbar-brand:hover, .navbar-brand:focus {
    color: var(--main-blue-color);
}

.nav-link {
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
}

/* Standard .nav-link works to set padding for mobile mode, but for bigger screens it's taken over by this more specific one in bootstrap, so we get specific to make sure we always have the right padding */
.navbar-expand-md .navbar-nav .nav-link {
    color: black;
    padding: 20px;
}

.nav-link:focus, .nav-link:hover {
    color: white;
    background: rgba(0, 133, 161, 1.0);
}

.navbar-default .navbar-collapse {
    border-top: 1px solid #DAA520;
    background-color: rgba(255,255,255,0);
    width: 100vw;
    margin:0
}

.navbar-custom .nav li a:active{
    background: white;
    opacity: 0.8;
}

.navbar-toggler {
    margin-right: 1rem;
}

.navbar-custom.invert .navbar-brand{	
    color:#404040;
}

.navbar-custom.invert .navbar-brand:hover, .navbar-custom.invert .navbar-brand:focus {
    color: var(--main-blue-color);
}

.navbar-custom.invert .nav li a {
    color:#404040;
}

.navbar-custom {
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    transition:background-color .3s;
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

/* look when it's slid in any scroll level below original top position */
.navbar-custom.is-fixed {
    position:fixed;
    background-color:rgba(255,255,255,0.9);
}

.navbar-custom.is-fixed .navbar-brand{
    color:#404040;
}

.navbar-custom.is-fixed .navbar-brand:hover,.navbar-custom .is-fixed .navbar-brand:focus{
    color: var(--main-blue-color);
}

.navbar-custom.is-fixed .nav li a{
    color:#404040;
}

.navbar-custom.is-fixed .nav li a:hover,.navbar-custom.is-fixed .nav li a:focus{
    color: var(--main-blue-color);
}

@media only screen and (min-width:768px) {
    /* reset padding back to bootstrap navbar default. idk how to reset it rather than hardcoding the same values */
    .navbar {
        padding: 0.5rem 1rem;
    }

    .navbar-default .navbar-collapse {
        border: none;
        background: rgba(0, 0, 0, 0.0);
        box-shadow: none;
        border-radius: 0;
        width: auto;
        float: none;
        margin: 0;
    }

    .navbar-custom .nav li a {
        color: white;
    }

    .navbar-custom .nav li a:active {
        background: 0;
        opacity: 1.0;
    }

    .navbar-custom .nav li a:hover,.navbar-custom .nav li a:focus {
        color:rgba(255, 255, 255, 0.4);
    }

    /* super specific to beat out navbar-dark */
    .navbar-nav > .nav-item > .nav-link {
        color: white;
        background 0;
    }

    /* super specific to beat out navbar-dark */
    .navbar-nav > .nav-item > .nav-link:focus, .navbar-nav > .nav-item > .nav-link:hover {
        color: var(--main-blue-color);
        background: 0;
    }

    /* look when it's slid in any scroll level below original top position */
    .navbar-custom.is-fixed {
        top:-87px; /* must match full height of navbar including all padding/margin/border */
        border-bottom:1px solid #f2f2f2;
        -webkit-transition:-webkit-transform .3s;
        -moz-transition:-moz-transform .3s;
        transition:transform .3s;
    }

    /* slide in when scrolling up */
    .navbar-custom.is-visible{
        -webkit-transform:translate3d(0,100%,0);
        -moz-transform:translate3d(0,100%,0);
        -ms-transform:translate3d(0,100%,0);
        -o-transform:translate3d(0,100%,0);
        transform:translate3d(0,100%,0);
    }

}

.navbar-toggler {
    border-color:transparent;
}

.navbar-toggler-home:active{
    background-color:rgba(255,255,255,.25);
}

.navbar-toggler-standard:active{
    background-color:rgba(0,0,0,.15);
}

/*---------------- ^ NAVBAR ^ ---------------- */

/*---------------- v MAIN INDEX HEADER v ---------------- */

.intro-header {
    background-color: #000028;
    background: no-repeat center center;	
    background-size: cover;
    height: 100vh;
}

.intro-header .row {
    justify-content: center;
}

.intro-header .site-heading {
    justify-content: center;
}

.intro-header .site-heading h1 {
    text-decoration-line: underline;
    text-decoration-color: #DAA520;
    text-underline-offset: 10px;
    text-align: center;
    letter-spacing: 20px;
    color:#fff;
    font-size: 4rem;
    font-family: "akrobat-light";
}


@media only screen and (min-width: 768px) {
    .intro-header .row {
        justify-content: start;
    }

    .intro-header .site-heading {
        justify-content: end;
        padding-top: 150px;
        padding-bottom:5vh;
        padding-left: 5vw;
    }

    .intro-header .site-heading h1 {
        font-size: 6rem;
        text-align: left;
    }
}

/*---------------- ^ MAIN INDEX HEADER ^ ---------------- */

/*---------------- v MAIN INDEX WORK GRID v ---------------- */

.work-grid-container {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.work-grid-item {
    height: 50vw
}

.work-grid-item-img {
    overflow: hidden;
    width: 90%;
    border-radius: 5px;
    /* background property must be set directly in html because it needs access to hugo vars */
    /* background-size and -position must be set directly in html because they must be set after background */
}

.work-grid-item a {
    background-color: rgba(0, 0, 0, 0.0);
    color: white;
    width: 100%;
    height: 100%;
}

.work-grid-item a > p {
    opacity: 0%;
}

.work-grid-item a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.work-grid-item a:hover > p {
    opacity: 100%; 
}

/* md and bigger */
@media (min-width: 768px) {
    .work-grid-container {
        width: 90vw;
    }

    .work-grid-item {
        height: 25vw
    }
}

/* lg and bigger */
@media (min-width: 992px) {
    .work-grid-container {
        width: 80vw;
    }

    .work-grid-item {
        height: 16vw
    }
}

/*---------------- ^ MAIN INDEX WORK GRID ^ ---------------- */

/*---------------- v FOOTER v ---------------- */

.footer-img {
    height: 90px;
}

/*---------------- ^ FOOTER ^ ---------------- */