@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham/GothamLight.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham/GothamBook.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham/GothamMedium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham/GothamMediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/Gotham/Gotham-Bold.otf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/Gotham/Gotham-BookItalic.otf");
    font-weight: 700;
    font-style: italic;
}

body {
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 3.22vw;
    color: rgba(255, 255, 255, 0.6);
    background-color: #1F2945;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

#overflow {
    overflow-x: hidden;
}

p {
    margin: 0 0 10px;
    line-height: 1.42857143;
}

a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

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

main {
    display: block;
    padding: 5.56vh 6.250vw;
    padding-left: 33vw;
}

#WebGL-output {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
}

#WebGL-output canvas {
    width: 100% !important;
    height: 100% !important;
}

#video-bg {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    min-height: 100vh;
    min-width: 100vw;
    z-index: -4;
    opacity: 0;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    z-index: -3;
    opacity: 0;
    transition: all 0.5s ease;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    /*background: rgba(31, 41, 69, 0.6);*/
    background-image: radial-gradient(rgba(31, 41, 69, 0.6), rgba(31, 41, 69, 1));
    transition: all 0.5s ease;
    opacity: 0;
}

#fixed {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(30vw - 60px);
    z-index: 10;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    padding: 5.56vh 4.167vw;
    padding-right: 0;
}

#fixed img {
    height: 32px;
}

#fixed #links {
    display: flex;
    flex-direction: column;
    bottom: 5.56vh;
    position: absolute;
}

#fixed #links a {
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    width: fit-content;
}

#fixed #links a:hover,
#fixed #links a:focus {
    color: #fff;
    border-color: #fff;
}

#head {
    height: 85vh;
    display: flex;
    align-items: center;
}

h1 {
    color: #fff;
    font-size: 4.167vw;
    line-height: 4.688vw;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
    margin: .67em 0;
}

.area {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10vh;
}

.shape {
    width: 15%;
    height: 3%;
    position: absolute;
    top: 0;
}

.area.red .shape {
    background: #ff0044;
}

.area.blue .shape {
    background: #34D9C3;
}

.area.orange .shape {
    background: #ffed00;
}

h2 {
    color: #fff;
    font-size: 6.250vw;
    line-height: 6.771vw;
    font-weight: 300;
    margin-top: 10%;
    margin-bottom: 10px;
}

.area.red h2 {
    color: #ff0044;
}

.area.blue h2 {
    color: #34D9C3;
}

.area.orange h2 {
    color: #ffed00;
}

.brands-links {
    margin-bottom: 16.666vh;
}

.brand {
    display: flex;
    flex-direction: column;
    padding-bottom: 10vh;
}

.brand a {
    width: fit-content;
    position: relative;
}

.brand:hover h3,
.brand:hover .link,
.brand a:hover {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.brand:focus h3,
.brand:focus .link,
.brand a:focus {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.category {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 10px;
    letter-spacing: 5px;
}

.red .category {
    color: #ff0044;
}

.blue .category {
    color: #34D9C3;
}

.orange .category {
    color: #ffed00;
}

h3 {
    color: rgba(255, 255, 255, 1);
    font-size: 3.229vw;
    font-weight: 700;
    position: relative;
    line-height: 1.1;
    margin-bottom: 10px;
    margin-top: 0px;
    width: inherit;
}

h3 span {
    font-size: 22px;
    top: 5px;
    right: -24px;
    position: absolute;
}

h3::before,
h3::after {
    content: '';
    position: absolute;
    top: 4.4vh;
    margin-left: -0.521vw;
    height: 3.4vh;
    width: 0;
    z-index: -1;
}

.red h3::before,
.red h3::after {
    background: #ff0044;
}

.blue h3::before,
.blue h3::after {
    background: #34D9C3;
}

.orange h3::before,
.orange h3::after {
    background: #ffed00;
}

h3::before {
    left: -0.521vw;
}

h3::after {
    left: -0.521vw;
    transition: width 500ms ease;
}

.brand:hover h3::before {
    width: calc(100%);
    transition: width 500ms ease;
}

.brand:hover h3::after {
    width: calc(100%);
    background: transparent;
    transition: 0;
}

.link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 700;
}

.extra {
    margin-top: 20.37vh;
}

.list-clients {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.list-clients .element {
    width: 7.031vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px;
}

.element img {
    width: 100%;
}

#contacts {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5.555vh;
}

#contacts h3 {
    font-size: 3.125vw;
    line-height: 1.563vw;
    margin: 7.407vh 0 3.703vh;
    font-weight: 700;
    text-transform: uppercase;
}

.contacts {
    margin-top: 5.555vh;
    width: fit-content;
}

.contacts i {
    margin-right: 10px;
}

.contacts p:hover .fa-envelope,
.contacts p:focus .fa-envelope,
.contacts p:hover a,
.contacts p:focus a {
    color: #fff;
    font-weight: 700;
}

.contacts p:hover,
.contacts p:focus {
    cursor: pointer;
}

footer {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.brand-bg {
    display: none;
}

@media only screen and (max-width: 1024px) {
    #fixed {
        font-size: 12px;
        padding: 60px 80px;
        padding-right: 0;
    }
    #fixed #links {
        bottom: 60px;
    }
    #fixed #links a {
        margin-bottom: 5px;
    }
    h3::before,
    h3::after {
        top: 2.4vh;
        height: 3vh;
    }
    .list-clients {
        justify-content: flex-start;
    }
    .list-clients .element {
        width: 90px;
        margin: 15px 30px;
    }
    #contacts {
        font-size: 14px;
    }
    footer {
        font-size: 12px;
        padding: 0 30px;
    }
}

@media only screen and (max-width: 768px) {
    #fixed img {
        height: 25px;
    }
    main {
        padding: 30px 80px;
    }
    #fixed {
        padding: 30px 80px;
        padding-right: 0;
        width: -webkit-fill-available;
        bottom: auto;
    }
    #fixed #links {
        top: 30px;
        right: 80px;
    }
    h1 {
        font-size: 48px;
        line-height: 54px;
    }
    h2 {
        font-size: 34px;
        line-height: 42px;
    }
    h3 {
        font-size: 30px;
    }
    h3 span {
        font-size: 18px;
        top: 0;
        right: -20px;
    }
    .brand {
        height: 300px;
    }
    .list-clients {
        justify-content: space-around;
    }
    .list-clients .element {
        margin: 15px;
    }
    #contacts h3 {
        font-size: 20px;
    }
    .brand {
        position: relative;
    }
    .brand-bg {
        display: block;
        position: absolute;
        top: -8vh;
        left: 0;
        width: 100vw;
        height: 100%;
        margin-left: -80px;
        background-size: cover;
        background-position: center;
        z-index: -3;
        transition: all 0.5s ease;
        opacity: 0;
        overflow: hidden;
    }
    .brand-bg video {
        width: 100vw;
    }
    .brand-overlay {
        position: absolute;
        top: -8vh;
        left: 0;
        width: 100vw;
        height: 100%;
        margin-left: -80px;
        z-index: -2;
        background-image: radial-gradient(rgba(31, 41, 69, 0.6), rgba(31, 41, 69, 1));
        transition: all 0.5s ease;
        opacity: 0;
    }
    #bg5 {
        background-image: url('../img/brand5.jpg');
    }
    #bg6 {
        background-image: url('../img/brand6.jpg');
    }
    #bg7 {
        background-image: url('../img/brand7.jpg');
    }
    #bg8 {
        background-image: url('../img/brand8.jpg');
    }
}

@media only screen and (max-width: 654px) {
    .brand-bg video {
        height: 100%;
        width: auto;
    }
}

@media only screen and (max-width: 480px) {
    main {
        padding: 30px;
    }
    #fixed {
        padding: 30px;
    }
    #fixed #links {
        right: 30px;
    }
    .brand {
        height: 250px;
    }
    .brand-bg,
    .brand-overlay {
        margin-left: -30px;
    }
}

@media only screen and (min-width: 1024px) and (min-height: 960px) {
    h3::before,
    h3::after {
        top: 2.4vh;
        height: 2.6vh;
    }
}