@font-face {
            font-family: avenir;
            src: url("../fonts/AvenirLTStd-Medium.otf") format("opentype");
        }
        
        @font-face {
            font-family: avenirLT;
            src: url("../fonts/AvenirLTStd-Light.otf") format("opentype");
        }
        
        @font-face {
            font-family: avenirBL;
            src: url("../fonts/AvenirLTStd-Black.otf") format("opentype");
        }
        
        @font-face {
            font-family: avenirBLO;
            src: url("../fonts/AvenirLTStd-BlackOblique.otf") format("opentype");
        }
        
         :root {
            --main-pink: #FF017A;
            --main-yellow: #F7ED4C;
            --main-blue: #23b5d3;
        }
        
        body {
            overflow-y: scroll;
            overflow-x: hidden;
        }
        
        .nav {
            background-color: white;
        }
        
        .vnyl-scrawl {
            width: 175px;
        }
        
        header img {
            position: relative;
            z-index: 1;
        }
        
        header {
            position: relative;
        }
        
        h1 {
            color: white;
            font-family: 'avenirLT';
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        
        h2 {
            color: white;
            font-family: 'avenirLT';
            font-size: 38px;
            margin-top: 60px;
            margin-bottom: 20px;
            margin-left: 12px;
        }
        
        h3 {
            text-align: center;
            font-family: 'avenir';
            font-size: 26px;
            margin: 30px;
            letter-spacing: 3px;
        }
        
        footer h3 {
            margin-top: 20px;
        }
        
        h4 {
            font-family: avenir;
            font-size: 20px;
        }
        
        button {
            padding-top: 5px;
            font-family: avenirLT;
            font-size: 16px;
            letter-spacing: 2px;
        }
        
        a {
            color: white;
        }
        
        section {
            margin: 20px 0;
        }
        
        section img {
            width: 100%;
        }
        
        p,
        a,
        a:hover {
            font-family: 'avenirLT';
            font-size: 14px;
            margin: 12px;
        }
        
        a,
        a:hover {
            margin: 0px;
        }
        
        p {
            font-family: 'avenirLT';
            font-size: 20px;
            margin: 12px;
        }
        
        .head {
            width: 100%;
        }
        
        .over-image {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .over-image-header {
            z-index: 1010;
            text-align: left;
            margin: 30px 0;
        }
        
        .navbar-fixed-top {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        
        .header {
            margin-top: 11%;
            margin-bottom: 12%;
        }
        
        .felt-cute-section {
            background-image: url("../images/header-image.svg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 14%;
        }
        
        .felt-cute-section .header-mobile {
            display: none;
        }
        
        .felt-cute-section h3 {
            font-family: 'avenirBL';
            color: black;
            text-align: left;
            font-size: 38px;
            margin: 0 0 20px 0;
            line-height: 1.2;
        }
        
        .felt-cute-phrase {
            background: rgba(255, 255, 255, 0.75);
            padding: 20px;
            border-radius: 2px;
        }
        
        @media (max-width: 600px) {
            .felt-cute-section .header-mobile {
                display: block;
                margin-bottom: 20px;
            }
            .felt-cute-section {
                background: none;
                padding: 0 0 12% 0;
            }
            .felt-cute-section h3 {
                font-size: 30px;
            }
        }
        
        .felt-cute-section p {
            font-family: 'avenirLT';
            color: black;
            margin: 0;
        }
        
        .creative-section {
            margin-top: 11%;
            margin-bottom: 12%;
        }
        
        .creative-section .camera-image {
            max-width: 400px;
            width: 100%;
            display: block;
            margin: 0 auto;
        }
        
        .creative-section h3 {
            text-align: left;
            font-family: 'avenirBLO';
            font-size: 38px;
            margin: 0 0 20px 0;
            line-height: 1.2;
        }
        
        .creative-section p {
            font-family: 'avenirLT';
            margin: 0;
        }
        
        @media (max-width: 600px) {
            .creative-section {
                padding-bottom: 12%;
            }
            .creative-section h3 {
                font-size: 30px;
            }
            .creative-section .camera-image {
                margin: 20px 0;
            }
        }
        
        .live-best-section {
            margin-top: 11%;
            margin-bottom: 12%;
        }
        
        .live-best-section h3 {
            text-align: left;
            font-family: 'avenirBL';
            color: var(--main-pink);
            font-size: 38px;
            margin: 0 0 20px 0;
            line-height: 1.2;
        }
        
        .live-best-section p {
            font-family: 'avenirLT';
            margin: 0;
            width: 50%
        }
        
        @media (max-width: 600px) {
            .live-best-section {
                padding-bottom: 12%;
            }
            .live-best-section h3 {
                font-size: 30px;
            }
            .live-best-section p {
                width: 100%
            }
        }
        
        .cosmic-ride-section {
            padding-top: 20%;
            padding-bottom: 20%;
            background: url('../images/stoked_art_group.svg');
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        
        .get-stoked-section {
            margin-bottom: 12%;
        }
        
        .get-stoked-section h3 {
            font-family: 'avenirBLO';
            font-size: 38px;
            margin: 0 0 20px 0;
            line-height: 1.2;
        }
        
        .get-stoked-section p {
            font-family: 'avenirLT';
            margin: 0;
        }
        
        .get-stoked-section .pre-order-button-group {
            margin-top: 20px;
        }
        
        .scrawl-section {
            padding-top: 11%;
            padding-bottom: 12%;
            background: url('../images/yellow_scrawl.svg');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0;
        }
        
        .nav-order-button {
            min-width: 150px;
            height: 50px;
            background: var(--main-yellow);
            font-family: 'avenir';
            margin-top: 80px;
            border-width: 2px;
            padding: 15px;
            border-color: black;
            color: black;
            border-style: solid;
        }
        
        .mid-order-button {
            min-width: 150px;
            height: 50px;
            background: var(--main-yellow);
            font-family: 'avenir';
            border-width: 2px;
            padding: 15px;
            border-color: black;
            color: black;
            border-style: solid;
        }
        
        .bottom-order-button {
            min-width: 150px;
            height: 50px;
            background: var(--main-blue);
            font-family: 'avenir';
            border-width: 2px;
            padding: 15px;
            border-color: black;
            color: black;
            border-style: solid;
        }
        
        .text-center {
            text-align: center;
        }
        
        .strike-through {
            text-decoration: line-through;
        }
        
        .middle-aligned {
            width: 56%;
            margin: 0 auto;
        }
        
        .social-logos a {
            float: right;
        }
        
        .logo-box {
            border-style: solid;
            border-width: 1px;
            border-color: black;
        }
        
        .logo-box img {
            padding: 25px 10px;
            max-width: 200px;
        }
        
        .press-logo img {
            padding: 50px 10px;
            max-width: 200px;
        }
        
        .press-logo {
            max-width: 800px;
            margin: auto;
            display: block;
        }
        
        .pre-order-footer {
            margin-top: 20px;
            padding: 14px 25px 9px 25px;
            color: white;
            background: #2B2B2B;
            border: none;
            font-size: 18px;
            border-radius: 2px;
            margin-bottom: 15px;
        }
        
        .footer-footer {
            background: #000000;
            margin: 0px;
            padding-top: 25px;
        }
        
        .footer-footer li {
            list-style: none;
        }
        
        .copyright-text {
            color: white;
            font-size: 12px;
        }
        
        .prices {
            max-width: 420px;
        }
        
        .hero-img {
            max-width: 600px;
            margin-right: auto;
        }
        
        .the-pics {
            width: 300px;
            margin: 0 auto;
        }
        
        .cosmic {
            width: 600px;
            margin: 0 auto;
        }
        
        .wavey-arms {
            width: 250px;
            margin: 100px auto;
        }
        
        .subcription-button {
            min-width: 150px;
            height: 50px;
            margin-right: 10px;
            margin-top: 20px;
            border-width: 2px;
            padding: 15px;
            border-color: black;
            color: black;
            border-style: solid;
            background: white;
        }
        
        .toggle {}
        
        @media (max-width: 600px) {
            .toggle {
                text-align: center;
            }
        }
        
        .toggle-active {
            font-weight: bold;
            font-family: "avenir";
            color: white;
            background: var(--main-pink);
            transition: all 0.3s ease-in;
        }
        
        .toggle-buttons {
            margin-top: 40px;
        }
        
        .secondary-img {
            max-width: 550px;
            margin-right: 0;
            width: 100%;
        }
        
        .tertiary-img {
            max-width: 800px;
            width: 100%;
        }
        
        .stripe-button-el {
            display: none !important;
        }
        
        #reveal1.layer2 {
            background-image: url("../images/HandCamera_move.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        
        @media (max-width: 600px) {}
        
        #reveal1 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        
        #reveal1.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        
        #reveal2 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        
        #reveal2.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        
        #reveal3 {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        
        #reveal3.visible {
            opacity: 1;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
        
        .logo {
            padding: 0 10px;
            width: 200px;
        }
        
        .faq h5 {
            color: black;
            letter-spacing: 1px;
            padding-top: 6px;
            padding-bottom: 2px;
            margin-left: 12px;
        }
        
        .faq a:hover {
            text-decoration: none;
        }
        
        .faq a {
            text-decoration: none;
        }
        
        .faq {
            padding-top: 120px;
            max-width: 600px;
            margin: auto;
        }
        
        .faq p {
            color: black;
        }
        
        @media (max-width: 600px) {
            h3 {
                font-size: 20px;
            }
            .logo {
                width: 120px;
                margin-top: 15px;
            }
            .header {
                margin-top: 30%;
            }
            .nav-order-button {
                height: 50px;
                margin-right: auto;
                margin-left: auto;
                font-size: 12px;
                padding: 0;
                min-width: 220px;
                text-align: center;
            }
            .line {
                height: 1px;
                width: 60%;
                background: white;
            }
            .pre-order-nav {
                font-size: 12px;
                margin-top: 15px;
            }
            .toggle-buttons {
                margin-top: 25px;
            }
            .logo-box img {
                padding: 20px 20px;
                max-width: 200px;
            }
            .middle-aligned {
                width: 90%
            }
        }