@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/Work/WorkSans-Light.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Work/WorkSans-Regular.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Work/WorkSans-SemiBold.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/Work/WorkSans-Bold.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/Banger/Bangers-Regular.ttf') format("truetype");
  font-display: swap;
}

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    transition:ease all 0.5s;
}

body {
    background:#000;
    color:#fff;
    font-family:'Work Sans', sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-x:hidden;
}

.container {
    max-width:1550px;
    margin:auto;
    padding:2rem;
}

h1 {
    font-size:4rem;
    margin-bottom:3rem;
    color:#76FEAB;
    font-family:'Bangers', sans-serif;
    letter-spacing: 10px;
}

p {
    line-height:1.75rem;
    margin:1rem 0;
}

section p {
    margin-bottom:5rem;
    max-width:600px;
    line-height:1.75rem;
}

strong {
    font-weight:800;
}

a {
    text-decoration:none;
}

.subpage li {
    width:100%;
}

.subpage a {
    color:#76FEAB;
}

li {
    list-style:none;
    float:left;
}

section {
    height:100vh;
    min-height:700px;
    position:relative;
    background:url('images/stage.jpg');
    background-size:cover;
    background-position:center;
}

.overlay {
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.1) 100%);
    position:absolute;
    width:100%;
    height:100%;
}

.color {
    color:#76FEAB;
}

.stage-inner {
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
}

.btn {
    background:#76FEAB;
    color:#000;
    padding:1.25rem 1.75rem;
    display:inline-block;
    border-radius:7px;
    border:1px solid #76FEAB;
    font-weight:600;
    position:relative;
}

.btn:hover {
    background:#000;
    color:#76FEAB;
}

.btn:before {
    content:'';
    position:absolute;
    right:-100px;
    top:-50px;
    width:75px;
    height:75px;
    background:url('images/arrow.svg') no-repeat;
    background-size:contain;
    background-position:center;
}

.contact-wrapper {
    margin-top:5rem;
    display:inline-block;
    width:100%;
    margin-bottom:5rem;
}

.contact-wrapper li,
.contact-wrapper li a {
    color:#76FEAB;
    margin-right:2rem;
}

.mail, .phone {
    position:relative;
    padding-left:30px;
}

.mail:before {
    background:url('images/mail.svg') no-repeat;
    width:20px;
    height:20px;
    left:0;
    content:'';
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    background-size:contain;
    background-position:center;
}

.phone:before {
    background:url('images/phone.svg') no-repeat;
    width:20px;
    height:20px;
    left:0;
    content:'';
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
    background-size:contain;
    background-position:center;
}

footer {
    display:flex;
    align-items: center;
}

footer a {
    color:#fff;
    margin-right:2rem;
}

footer a:hover {
    color:#76FEAB;
}

.facebook {
    background:url('images/facebook.svg') no-repeat;
    background-size:contain;
    background-position: left center;
    width: 15px;
    height:25px;
}

.facebook:hover {
    opacity:0.5;
}

@media (max-width:580px) {
    h1 {
        font-size:3rem;
    }

    section {
        height:100%;
    }

    .stage-inner {
        position:relative;
        top:unset;
        transform:unset;
    }

    .mail {
        margin-bottom:1rem;
    }

    .container {
        padding:1rem;
    }

    .btn:before {
        display:none;
    }
}