@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-Bold.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-Bold.svg#PPNeueMontreal-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-Italic.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-Italic.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-Italic.svg#PPNeueMontreal-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal Book';
    src: url('/assets/fonts/PPNeueMontreal-Book.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-Book.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-Book.svg#PPNeueMontreal-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-Medium.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-Medium.svg#PPNeueMontreal-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-SemiBolditalic.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-SemiBolditalic.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-SemiBolditalic.svg#PPNeueMontreal-SemiBolditalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/assets/fonts/PPNeueMontreal-Thin.woff2') format('woff2'),
        url('/assets/fonts/PPNeueMontreal-Thin.woff') format('woff'),
        url('/assets/fonts/PPNeueMontreal-Thin.svg#PPNeueMontreal-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


* {
    margin:0;
    padding:0;
}
body {
    color:#ffffff;
    font-family: 'PP Neue Montreal';
}
.main {
    pointer-events:none;
    width:100vw;
    height:100vh;
    position:absolute;
}
#app {
    position:fixed;
    top:0;
    left:0;
}
.content {
    width:900px;
    position:absolute;
    top:75%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align:center;
}


/* typography */
h1 {}
h2 {
    font-size:48px;
    font-weight:900;
    text-transform:uppercase;
}
h3 {
    font-size:36px;
}
h4 {
    font-size:24px;
}
h5{}
h6 {}
p {
    font-size:16px;
    font-weight:300;
}
p2 {
    font-size:22px;
    font-weight:300;

}
.main-header {
    position:fixed;
    width:100vw;
    height:100px;
}
.nav-col, .footer-col {
    display:inline-block;
    padding:20px;
}
.nav-col.left{
    position:absolute;
    left:0;
    width:50%;
    top:0;
}
.footer-col.left{
    position:absolute;
    left:0;
    width:50%;
    bottom:0;
}
.nav-col.right{
    position:absolute;
    right:0;
    width:50%;
    top:0;
    text-align:right;
}
.footer-col.right{
    position:absolute;
    right:40px;
    width:50%;
    bottom:0;
    text-align:right;
}
.main-header h2 {
    font-size:22px;
}
.clients {
    
}
.client-list {
    list-style-type: none;
}
.client-list li {
    display:inline-block;

}
.client-list li img {
    height:60px;
}
.clients h4 {
    margin-top:10px;
    text-transform:uppercase;
    font-size:16px;
    letter-spacing:1.4px;
}
.clients ul {
    margin-top:20px;
}
.clients ul li {
    margin-right:30px;
}
.clients ul li:last-child {
    margin-right:0px;
}
button {
    background:#ffffff;
    padding:20px 30px;
    border:none;
    border-radius:30px;
    pointer-events:all;
    cursor:pointer;
}
button:hover {
    background:black;
    color:#ffffff;
}
footer {
    width:100vw;
    position:fixed;
    bottom:0;
    padding:20px;
}
/* Responsive */
@media screen and (max-width:767px) {
    footer {
        padding:0;
    }
    .footer-col {
        width:100% !important;
        position:relative !important;
        text-align:center;
        padding:0;
    }
    .footer-col.right {
        right:0;
        text-align:center;
        padding:30px 0;
    }
    .client-list li img {
        height: 50px;
    }
}