/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
    url('../fonts/roboto-v18-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
    url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
pink: FF3399
blue: 33CCFF
yellow: FFCC66
purple: 6633CC
*/

@media screen {

    html {
        font-size: 62.5%; /* This allows 1rem to equal 10pt font, 1.5rem = 15pt etc. */
        font-family: 'Roboto', sans-serif;
        color: #fff;
    }

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    body {
        font-size: 1.6rem; /* 1rem = 10px, 1.6rem = 16px */
        background-color: #303D4E;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    h1, h2, h3, h4, h5, h6, p {
        margin: 0;
    }

    .hide {
        display: none;
    }

    .copyright {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: auto auto auto;
        justify-self: right;
        align-self: end;
        margin: 0 15px 10px 0;
        cursor: default;
    }

    .copyright,
    .copyright > a {
        color: #686868;
        transition: color .2s;
    }

    .copyright > a {
        cursor: pointer;
    }

    .copyright > a:hover {
        color: #fff;
        transition: color .2s;
    }

    .bold {
        font-family: 'Roboto Black', 'Roboto', sans-serif;
        transition: color .2s;
    }

    .red {
        color: #ff5548 !important;
    }

    .dimmer {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        transition: background-color .2s;
        z-index: 4;
    }

    .btn--selected {
        color: #7c7c7c;
    }

    .btn--selected:hover {
        background-color: rgba(255, 255, 255, 0.2);
        cursor: default;
    }

    .sidenav {
        display: grid;
        grid-template-rows: repeat(7, max-content);
        grid-template-columns: 1fr;
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 5; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        background-color: #303D4E;
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.2s; /* 0.2 second transition effect to slide in the sidenav */
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
    }

    .sidenav__open {
        display: none;
        grid-row: 1/2;
        grid-column: 3/4;
        align-self: end;
        margin-left: 20px;
        cursor: pointer;
    }

    .sidenav__open:hover > .sidenav__icon-part {
        background-color: rgba(255, 255, 255, 0.5);
        transition: background-color .2s;
    }

    .sidenav__icon-part {
        width: 35px;
        height: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: background-color .2s;
    }

    .sidenav__close {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 5rem;
        transition: color .2s;
    }

    .sidenav__close:hover {
        color: rgba(255, 255, 255, 0.5);
    }

    .sidenav__btn {
        padding: 8px 0 8px 32px;
        font-size: 3rem;
        display: block;
        transition: background-color .2s;
    }

    .sidenav__btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color .2s;
    }

    .sidenav__accordion {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: auto auto;
    }

    .sidenav__accordion:after {
        content: '+';
        font-size: 2rem;
        color: white;
        justify-self: right;
        align-self: center;
        margin-right: 30px;
    }

    .sidenav__accordion--active:after {
        content: '-';
    }

    .sidenav__accordion-content {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        font-size: 1.8rem;
        background-color: #1f2025;
        max-height: 300px;
        overflow-y: scroll;
        /*scrollbar-color: dark;*/
    }

    .sidenav__accordion-link {
        padding: 15px 0 12px 40px;
        transition: background-color .2s;
    }

    .sidenav__accordion-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: background-color .2s;
    }

    .first {
        margin-top: 20px;
    }

    .sidenav__contact {
        padding: 5px 34px;
        transition: color .2s;
    }

    .sidenav__contact:hover {
        color: #b4b4b4;
        transition: color .2s;
    }

    .header {
        grid-row: 1/2;
        grid-column: 1/2;
        display: grid;
        grid-template-columns: auto auto auto;
        justify-self: stretch;
        align-self: center;
    }

    .header__identity {
        grid-row: 1/2;
        grid-column: 1/2;
        display: grid;
        grid-template-columns: 100px max-content;
        grid-template-rows: auto 12px;
        cursor: pointer;
    }

    .header__logo {
        grid-row: 1/3;
        grid-column: 1/2;
        justify-self: right;
        width: 70px;
        height: auto;
    }

    .header__name {
        grid-row: 1/2;
        grid-column: 2/3;
        font-size: 2.5rem;
        font-weight: 300;
        align-self: end;
        transition: color .2s;
    }

    .header__slogan {
        grid-row: 2/3;
        grid-column: 2/3;
        font-size: 1.18rem;
        transition: color .2s;
    }

    .header__nav {
        grid-row: 1/2;
        grid-column: 2/3;
        display: grid;
        grid-template-columns: repeat(4, auto);
        grid-gap: 20px;
        align-items: center;
        justify-items: center;
        justify-self: center;
        align-self: end;
    }

    .header__btn {
        width: max-content;
        height: min-content;
        padding: 15px 25px 15px 25px;
        border-radius: 2px;
        transition: background-color .2s;
    }

    .header__btn:hover {
        transition: background-color .2s;
        text-shadow: 0 0 2px #000;
    }

    .header__dropdown-btn {
        transition: unset;
    }

    .dropdown-arrow {
        font-size: 1.4rem;
    }

    .dropdown-arrow::after {
        content: "\25ba";
    }

    .header__dropdown:hover .dropdown-arrow::after {
        content: "\25bc";
    }

    .header__dropdown-content {
        display: none;
        position: absolute;
        grid-template-columns: repeat(2, 155px);
        grid-template-rows: auto;
        background-color: #1c232d;
        margin-top: 13px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
    }

    .header__dropdown:hover > .header__dropdown-content {
        display: grid;
    }

    .header__dropdown:hover > .header__dropdown-btn {
        transition: unset;
    }

    .header__dropdown-link {
        padding: 15px 0 15px 20px;
        transition: background-color .2s;
    }

    .header__dropdown-link:hover {
        transition: background-color .2s;
    }

    .header__contact {
        grid-row: 1/2;
        grid-column: 3/4;
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: auto;
        align-items: center;
        justify-content: right;
        margin-right: 30px;
    }

    .header__email {
        grid-row: 1/2;
        grid-column: 1/2;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 35px max-content;

    }

    .header__email-symbol {
        grid-row: 1/2;
        grid-column: 1/2;
        font-size: 2rem;
        justify-self: center;
    }

    .header__email-text {
        margin-top: 2px;
    }

    .header__phone {
        grid-row: 2/3;
        grid-column: 1/2;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 35px max-content;
    }

    .header__phone-symbol {
        grid-row: 1/2;
        grid-column: 1/2;
        font-size: 2rem;
        justify-self: center;
    }

    .header__phone-text {
        margin-top: 4px;
    }

    .header__email, .header__phone {
        font-size: 1.5rem;
        transition: color .2s;
    }

    .header__email:hover, .header__phone:hover {
        color: #b4b4b4;
        transition: color .2s;
    }

    .hide {
        visibility: hidden;
    }

}

@media screen and (max-width: 1105px) {

    .header {
        grid-template-columns: 100px auto 100px;
    }

    .header__nav,
    .header__contact {
        display: none;
    }

    .sidenav__open {
        display: block;
    }

}

@media screen and (max-width: 420px) {

    .sidenav__open {
        justify-self: right;
        margin-right: 20px;
    }

    .header__identity {
        grid-template-columns: 90px max-content;
    }

}