.component_signup .content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;margin:auto}.component_signup .title{width:25%;min-width:200px}.component_signup .title:after{content:' ';display:block;margin-bottom:30px}.component_signup .spacer{margin:10px 0}.component_signup h2{margin:0;text-transform:uppercase;font-weight:normal;font-size:16px;color:#fff;line-height:1.2em;margin-bottom:0}@media only screen and (max-width: 740px){.component_signup h2{font-size:15px;opacity:0.5}}.component_signup ::-webkit-input-placeholder{color:#fff}.component_signup :-ms-input-placeholder{color:#fff}.component_signup ::placeholder{color:#fff}.component_signup form{position:relative}.component_signup form a.btn-arrow{color:#fff;display:block;cursor:pointer;opacity:1;transition:opacity 0.4s ease;margin-bottom:20px;background:none;border:none;color:#fff;padding:0;margin-bottom:20px}.component_signup form a.btn-arrow:hover{opacity:0.5;transition:opacity 0.4s ease}@media only screen and (max-width: 688px){.component_signup form a.btn-arrow{left:87%}}.component_signup input[type='email']{background:none;border:none;color:#fff;width:86%;margin-bottom:5px;border-bottom:1px solid #fff;padding-bottom:5px;padding-left:0;margin-bottom:12px}@media only screen and (max-width: 688px){.component_signup input[type='email']{width:100%;max-width:100%}}@media only screen and (max-width: 740px){.component_signup input[type='email']{width:93%}}.component_signup small{left:unset;right:0;width:100%;max-width:630px;color:#fff}@media only screen and (max-width: 688px){.component_signup small{width:100% !important;padding-bottom:30px}}.component_signup .subscribeBox{position:relative}@media only screen and (max-width: 740px){.component_signup .subscribeBox{margin-top:20px}}.component_signup .logo-bedrock{width:150px;margin-top:30px;display:block}@media only screen and (max-width: 688px){.component_signup .logo-bedrock{width:100px}}.component_signup .thankyou{font-size:9px;opacity:0.7;text-transform:uppercase;position:relative;top:-10px}.component_signup p{font-size:8px;letter-spacing:0.05em;margin:0;margin-bottom:3px}.component_signup p a{text-decoration:none;color:#fff}.component_signup p a:hover{opacity:0.5}

.component_menu{padding:0;margin:0;margin-bottom:20px}.component_menu li{list-style:none;margin:0;padding:0}@media only screen and (max-width: 740px){.component_menu li{font-size:15px}}.component_menu li a{display:block;color:#fff;text-decoration:none;text-transform:uppercase}.component_menu li a span{display:block;font-size:11px;opacity:0}.component_menu li a:hover span{opacity:.7}.component_menu li:first-child a.active,.component_menu li:first-child a:hover{color:#629AA9}.component_menu li:nth-child(2) a.active,.component_menu li:nth-child(2) a:hover{color:#94D500}.component_menu li:nth-child(3) a.active,.component_menu li:nth-child(3) a:hover{color:#4267B2}.component_menu li:nth-child(4) a.active,.component_menu li:nth-child(4) a:hover{color:#4267B2}.component_menu li:nth-child(5) a.active,.component_menu li:nth-child(5) a:hover{color:#F00075}.component_menu li:nth-child(6) a.active,.component_menu li:nth-child(6) a:hover{color:#F00075}.component_menu li:nth-child(7) a.active,.component_menu li:nth-child(7) a:hover{color:#324459}.component_menu li:nth-child(8) a.active,.component_menu li:nth-child(8) a:hover{color:#004AFF}.component_menu li:nth-child(9) a.active,.component_menu li:nth-child(9) a:hover{color:#FFFF00}.component_menu li:nth-child(10) a.active,.component_menu li:nth-child(10) a:hover{color:#1ED760}.component_menu li:nth-child(11) a.active,.component_menu li:nth-child(11) a:hover{color:#FF8800}.component_menu li:nth-child(12) a.active,.component_menu li:nth-child(12) a:hover{color:#1DA1F2}.component_menu li:nth-child(13) a.active,.component_menu li:nth-child(13) a:hover{color:#1DA1F2}.component_menu li:nth-child(14) a.active,.component_menu li:nth-child(14) a:hover{color:#FF0000}.component_menu li:nth-child(15) a.active,.component_menu li:nth-child(15) a:hover{color:#3d3d3d}.component_menu li:nth-child(16) a.active,.component_menu li:nth-child(16) a:hover{color:#8E8E8E}

.component_sideBar{display:flex;flex-direction:column;justify-content:space-between;width:300px}.component_sideBar .logos{max-width:100px;margin-bottom:30px}@media only screen and (max-width: 740px){.component_sideBar{position:absolute;z-index:99;background:rgba(0,0,0,0.9);font-size:15px;overflow:hidden;height:50px;padding-bottom:20px;transition:height .8s ease}}@media only screen and (max-width: 740px){.component_sideBar.in{height:auto;transition:height .8s ease}}

.component_shapes{position:relative}@media only screen and (max-width: 740px){.component_shapes{display:flex;width:100%;position:relative;align-items:flex-end;justify-content:center}}.component_shapes svg.desktop{position:absolute;top:0;right:0;height:100%}@media only screen and (max-width: 948px){.component_shapes svg.desktop{height:70%}}@media only screen and (max-width: 740px){.component_shapes svg.desktop{display:none}}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){.component_shapes svg.desktop{height:45%}}.component_shapes svg.mobile{margin:auto;display:block;position:absolute;bottom:20px;left:50%;height:75%;transform:translateX(-50%)}@media only screen and (min-width: 741px){.component_shapes svg.mobile{display:none}}@media only screen and (max-width: 740px){.component_shapes svg.mobile{width:70%;margin:0}}.component_shapes .shape{transition:.8s ease;transform:scale(1) translateZ(0);user-select:none;-webkit-user-select:none}.component_shapes .shape:hover{transform:scale(0.5) translateZ(0);transition:.8s ease}.component_shapes .shape-1{transform-origin:13% 13%}.component_shapes .shape-2{transform-origin:36% 13%}.component_shapes .shape-3{transform-origin:62% 13%}.component_shapes .shape-4{transform-origin:90% 13%}.component_shapes .shape-5{transform-origin:12% 36%}.component_shapes .shape-6{transform-origin:36% 36%}.component_shapes .shape-7{transform-origin:60% 36%}.component_shapes .shape-8{transform-origin:86% 36%}.component_shapes .shape-9{transform-origin:13% 61%}.component_shapes .shape-10{transform-origin:37% 61%}.component_shapes .shape-11{transform-origin:62% 61%}.component_shapes .shape-12{transform-origin:88% 61%}.component_shapes .shape-13{transform-origin:37% 87%}.component_shapes .shape-14{transform-origin:39% 87%}.component_shapes .shape-15{transform-origin:62% 87%}.component_shapes .shape-16{transform-origin:88% 87%}.component_shapes .shape-18{transform-origin:13% 87%}

.component_mobilemenu{position:absolute;top:30px;right:30px;cursor:pointer;z-index:99999}@media only screen and (min-width: 741px){.component_mobilemenu{display:none}}.component_mobilemenu svg{z-index:999;width:20px;height:20px}

@font-face {
    font-family: 'Neurial Grotesk';
    src: url('../fonts/NeurialGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/NeurialGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

html {
    font-size: calc(100vw / 1920 * 20);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body {
    background-color: black;
    background-size: cover;
    padding: 0;
    font-family: 'Neurial Grotesk';
    background-image: url(bedrock.jpg);
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: top left;

    @media only screen and (max-width: 798px) {
        background-size: 100%;
    }
}

.top {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

h2 {
    margin: 0;
    font-weight: 100;
    font-size: 35px;
    line-height: .9em;
    color: white;
}

@media only screen and (max-width: 798px) {
   h2 {
      font-size: 15px;
    }
}

.splash {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.signup-btn {
    cursor: pointer;
}

/* .splash.hide {
    opacity: 1;
    max-width: 300px;
    transition: .4s ease;
} */

.show {
    opacity: 1;
    transition: .4s ease;
}

.hide {
    opacity: 0;
}

form {
    display: none;
    margin-top: 30px;
    opacity: 0;
    display: block;
}

main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 0;
    box-sizing: border-box;
}

.bedrock-logo {
    width: 60px;
    height: 60px;
    max-height: 60px;
    min-height: 60px;
    margin-bottom: 1em;
}

.signup-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 798px) {
    .signup-container {
      justify-content: flex-start;
    }
}

.main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #000;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 3rem;
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;

    @media only screen and (max-width: 798px) {
        justify-content: flex-end;
        flex-direction: column-reverse !important;
     }

    .left {
        width: 40%;
        

        @media only screen and (max-width: 798px) {
            width: 100%;
            padding-top: 80%;
         }
    }

    .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 40px;
        position: absolute;
        bottom: 0;
        right: 0;

        @media only screen and (max-width: 798px) {
            width: 100%;
         }

        form { 
            width: 90%;
            max-width: 600px;

            @media only screen and (max-width: 798px) {
                max-width: 100%;
                width: 100%;
             }
        }
    }

}

footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 0 35px;
}

footer svg {
    width: 200px;
    height: 80px;
}

span {
    color: #74ACDF;
}

.title {
    width: 50%;
    max-width: 900px;
}

@media only screen and (max-width: 798px) {
    .splash {
       margin-top: 25%;
     }
 }

.flag {
    width: 50%;
    text-align: right;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white !important;
    opacity: 1; /* Firefox */
  }
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white !important;
}

input[type="text"], input[type="tel"], select {
    background: black;
    border: 1px solid white;
    padding: 15px 8px;
    max-width: 600px;
    color: white;
    outline: none;
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'Neurial Grotesk';
    margin-bottom: 10px;
}
button {
    font-family: 'Neurial Grotesk';
    background: white;
    border: none;
    color: black;
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 16px;
    margin-bottom: 30px;
    margin-top: 50px;
}

.radios {
    display: flex;
    margin-top: 30px;
    margin-bottom: 20px;
}

input[type="radio"] {
    -webkit-appearance: auto !important;
}

.button-signup {
    background: #c54500;
    color: #ffffff;
    border: 1px solid black;
    width: 300px;
    padding: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: 'Neurial Grotesk';
    font-weight: normal;
    margin-top: 30px;
    margin-bottom: 0;
}

.button-signup:hover {
    background: black;
    color: white;
    border: 1px solid white;
    cursor: pointer;
}


.entry__choice {
    width: auto;
    margin-right: 50px;
}

@media only screen and (max-width: 798px) {
    .main {
      flex-direction: column-reverse;
      justify-content: flex-end;
    }

    .title {
        width: 100%;
        font-size: 9rem;
        line-height: 9rem;
        margin-top: 3rem;
    }

    .flag {
        width: 100%;   
        margin-bottom: 1rem;
    }

    input[type="text"] {
        max-width: 100%;
    }
}