* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    html {
        background:#010101;
        margin: 0;
        scroll-behavior: smooth;
        transition: 0.3s;
    }
    body{
        background:#010101;
        color:#fefefe;
        margin: 0;
        height: 100vh;
        }

        .center-wrapper{
            max-width:1260px;
            margin:0 auto;
            display:block;
        }
        .position-1 {
            z-index:1;
            position:relative;
        }
        header {
            padding:54px 104px;
        }
        header .logo {
            float:left;
        }
        .logo {
            width:192px;
            }
        nav {
            float:right;
            }
        nav a {
           font-family: "League Gothic", sans-serif;
           font-size:24px;
           color:#fff;
           padding-left:36px;
           font-weight:normal;
           text-transform:uppercase;
           text-decoration:none;
           letter-spacing:1px;
        }
        nav a:hover {
            color:#666;
        }
        .league-gothic-font{
            font-family: "League Gothic", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-variation-settings:"wdth" 100;
         }
        .source-serif-4-font {
            font-family: "Source Serif 4", serif;
            font-optical-sizing: auto;
            font-weight: 100;
            font-style: normal;
        }

        h1 { 
            font-family: "Source Serif 4", serif;
            font-size:48px;
            line-height:48px;
            margin-bottom:24px;
            }
        h2 {
            font-family: "Source Serif 4", serif;
            font-size: 72px;
            line-height: 64px;
            margin-bottom: 12px;
            margin-top: 15%;
        }
        p { 
            font-family: "Source Serif 4", serif;
            font-style:italic;
            font-size:21px;
            }
        main {
            padding:0 104px;
            
        }
        .hero {
            margin-top:168px;
        }
        .hero h1 {max-width:640px;}
        .hero p {max-width:460px;}
        .clients {
            color: #666;
            margin-top:32px;
        }
        .clients img {
            width:48px;
            height:48px;
            padding:0 4px 8px;
        }
        .clients p {
            font-size:16px;
            letter-spacing:1px;
            padding:5px 0;
        }

        .left-text, .left-image {
            float:left;
        }
        .left-text, .right-text {
            margin-top:48px;
        }
        .right-image, .right-text {
            float:right;
        }
        .right-image, .left-image {
            width:570px;
            height:720px;
           
        }
        .section {
            width:100%;
            float:left;
            margin-top:100px;
            margin-bottom:20px;
        }
        .section.about {
            border-top: 1px solid #222;
            padding: 0 0 12px 0;
            display: inline-block;
            width: 100%;
        }
        .section h2, .section p {
            max-width: 360px;
        }

        .section.about h2, .section.about p {
            max-width: 100%;
        }
        .section.about p {
            padding-bottom: 32px;
            line-height: 36px;
        }
        .section.raptors .right-image {
            background: url(/images/iphone-raptors.png) no-repeat center center;
            background-size: contain;
        }
        .section.dropshop .right-image {
            background: url(/images/iphone-dropshop.png) no-repeat center center;
            background-size: contain;
        }
        .section.dropshop video {
            display:none;
        }
        .section.dropshop .right-image:hover video{
            display:block;
            width:100%;
        }
        .section.leafs .left-image {
            background: url(/images/iphone-leafs.png) no-repeat center center;
            background-size: contain;
        }
        .section.nhl .left-image {
            background: url(/images/iphone-nhl.png) no-repeat center center;
            background-size: contain;
        }
        .section.fanup .left-image {
            background: url(/images/iphone-fanup.png) no-repeat center center;
            background-size: contain;
        }
        .app-icon {
            width: 192px;
            height: 192px;
            margin: 25% auto;
            display: block;
        }
        footer {
            border-top: 1px solid #222;
            padding: 12px 0;
            display: inline-block;
            width: 100%;
            text-transform:uppercase;
            color:#666;
        }
        footer .left-text-align, footer .right-text-align {
            margin-top:24px;
        }
        footer .left-text-align {
            text-align:left;
            display:inline-block;
        }
        footer .right-text-align {
            text-align:right;
            display:inline-block;
        }
        footer .center-text-align {
            text-align:center;
            display:inline-block;
        }
        footer .right-text:hover span {
            color:red;
        }
        footer img {
            width:32px;
            opacity: 0.4;
        }
        .quarters {
            width: 24%;
            display: inline-block;
        }
        .quarters img {
            width:100%;
        }
        img.banner {
            width:100%;
            height:auto;
        }
        .floatRight{
            float:right;
        }
        .floatLeft {
            float:left;
        }
        .oneThird {
            width:32%;
        }
        .twoThird {
            width:65%;
        }
        .oneThird, .twoThird {
            float:left;
        }
        .halfWidth {
            width:50%;
        }
        .center-align {
            margin:0 auto;
        }
        .fullWidth {
            width:100%;
        }
        .halfWidth img{
            width:100%
        }
        .about h2 {
            margin-bottom:48px;
        }
        .about a {
            color:#fff;
        }
        .about a:hover {
            text-decoration:none;
        }
        ol {
            margin-left: 0;
            margin-top: 16px;
            margin-bottom:24px;
            font-size: 16px;
            letter-spacing: 0;
            font-weight: 100;
            font-style: italic;
        }
        li {
            margin-top: 16px;
            border-top: 1px solid #222;
            padding-top: 16px;
            padding-left: 4px;
        }
        li p {
            line-height:24px;            
        }
        .about h3 {
            font-size: 24px;
            margin-top: 0px;
        }
        .bg-headshot {
            position: absolute;
            margin: -300px 0 0 500px;
            opacity: 0.2;
            width: 500px;
            height: 500px;
            background: url(/images/headshot-glitch.jpg) no-repeat;
            background-size: cover;
        }
        .bg-headshot:hover img {
            display:none;
        }
        .bg-headshot img {
            width:100%;
            height:auto;
        }
        .section.about p.spotify {
            font-size: 16px;
            line-height: 24px;
            padding: 16px 0;
        }
        #bg-video {
            position: absolute;
            right: 0;
            top: 48px;
            width: 600px;
            height: auto;
            z-index: 0;
            opacity: 0.05;
            transition: 0.3s;
        }
        #bg-video:hover {
            opacity:1;
        }
       .monogram {
           display:none;
            position: absolute;
            right: auto;
            top: 200px;
            opacity: 6%;
            width: 700px;
            left: auto;
        }
        .monogram img {
            width:100%;
        }
         footer .left-text, footer .right-text {
            margin-top:16px;
        }
        .firstcharacter {
            float: left;
            font-size: 74px;
            line-height: 60px;
            padding-top: 4px;
            padding-right: 6px;
            padding-left: 3px;
            font-weight: 500;
            }       

        .floating-img{
        transform: translateY(-1%);
        animation: floater 5s infinite;
        transition: ease 5s;
        }

        @keyframes floater {
        0%{transform: translateY(-1%);transition: ease 5s;}
        50%{transform: translateY(1%);transition: ease 5s;}
        }

        .page nav {
        float: right;
        width: auto;
        text-align: right;
        margin-bottom: 0;
        }
        ol li ul {
            margin: 12px 0 0 0;
        }
        ol li ul li {
            border: none;
            margin: 8px 0 8px 32px;
            padding: 0;
        }
        ol li ul li p{
            font-size:16px;
            margin: 0;
            font-weight:300;
        }
        ol li::marker, ul li::marker {
        font-weight: bold;
        }

li > * {
    vertical-align: text-top;
}




        .page h2 {
            font-family: "League Gothic", serif;
            text-transform:uppercase;
            font-size: 48px;
            line-height: 40px;
            margin-bottom: 12px;
            margin-top: 0;
        }
        .page .section .left-text p {
            max-width: 460px;
        }
        .page .section.fullWidth p {
            max-width: 100%;
            margin: 0 0 24px 0;
            display: inline-block;
        }
        .page .section.fullWidth li p {
            max-width: 100%;
            margin: 0;
            display: inline-block;
            font-weight:300;
        }
        .page .section .app-icon {
            margin:0;
        }
        .page .logo {
            width:80px;
        }
        .page .logoHold {
            float:left;
            margin-top:-4px;
        }
        .page .logoHold img {
            float:left;
        }
        .page .logoHold img.iconx {
            width: 18px;
            margin: 12px;
        }
        .page .logoHold img.logo-raptors {
            width:48px;
        }
        .page header {
            padding: 24px 104px 54px;
        }
        .page .section {
            margin-top:20px;
            margin-bottom:100px;
        }
        .page .left-text, .right-text {
            margin-top: 0px;
        }
                .page .section.fullWidth .desc p {
            font-size: 14px;
            padding: 0 20px;
            text-align:center;
        }

h3.designHeading {
text-align: center;
    width: 100%;
    font-size: 32px;
    margin: 0;
    font-family: "League Gothic", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid #333;
    padding-top: 44px;
}

h3.designHeading.marginT64 {
    margin-top:64px;
        display: inline-block;
}
        .filter-black {
            filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7465%) hue-rotate(338deg) brightness(91%) contrast(109%);
        }
        .filter-black:hover {
            filter: brightness(100%) saturate(100%) invert(0%) sepia(0%) saturate(7465%) hue-rotate(338deg) brightness(91%) contrast(109%);
        }
        .responsiveImage {
            width:100%;
            height:auto;
        }

        .page .center-wrapper {
            max-width: 1024px;
        }
        .page .section h1 {
            max-width: 600px;
            margin-top:0;
            font-family: "Source Serif 4", serif;
            font-size: 60px;
            line-height: 64px;
            margin-bottom: 12px;
        }
        .about h3.marginT64{margin-top:64px;}
        
        .marginT64{margin-top:64px;}


.podcast-video {
    float:left;
    padding:0 12px 12px 0;
    width:50%;
}

a.button {
    padding: 12px 16px;
    border: 1px solid #333;
    border-radius: 6px;
    margin: 20px 0 0 0;
    text-decoration: none;
    display: inline-block;
    color: #999;
    font-family: 'League Gothic';
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
a.button:hover {
    border-color:#fff;
    color:#fff;
}

 @media only screen and (max-width: 720px) {
        main {
            padding: 0 24px;
        }
        .monogram {
            display:block;
            width:100%;
            }
        #bg-video, .bg-headshot {
            display:none;
        }
        nav {
            float: left;
            width: 100%;
            text-align: center;
            margin-bottom:80px;
        }
        header {
            padding:54px 24px;
        }
        header .logo {
            float: none;
            text-align: center;
            display: block;
            margin: 0 auto;
        }
        nav a {padding:10px 12px 0;
        }
        .hero {
            margin-top:100px;
        }
         h1 { 
            font-family: "Source Serif 4", serif;
            font-size:42px;
            line-height:42px;
            margin-bottom:20px;
            }
        .hero h1, .hero p {text-align:center;}
        .clients {
            text-align:center;
        }
        .right-image, .left-image {
            width: 100%;
            height: 500px;
        }
        .right-image, .right-text {
            float: left;
        }
        .left-text, .right-text {
            margin-top: 0;
            text-align: center;
            width: 100%;
        }
        .section h2 {
            max-width: 100%;
        }
        .section p {
            max-width: 340px;
            margin:0 auto;
        }
        .oneThird, .twoThird {
            width:100%;
        }
        .section.about p {
            padding-bottom: 32px;
            text-align: left;
        }
        h2 {
            margin-top: 10%;
        }
        .stats {
            display:none;
        }
        footer img {
            margin: 0 auto 4px;
            display:block;
            }
        footer .right-text {
            margin-top:2px;
        }
        ol {
        font-size: 18px;
        }
         .page header {
        padding:24px 20px 20px;
        box-sizing: border-box;
        float: left;
        width: 100%;
    }
    .page .logoHold {
    margin-top: 0;
}
.page nav {
    margin-top: 4px;
}
.page nav a{
    padding-right:0;
}
    .page .logoHold img.iconx {
    margin: 12px 4px;
    width:12px;
    }
.page .logo {
    width: 64px;
}
.page .logoHold img.logo-raptors {
    width: 42px;
}

.page .app-icon {
    display:none;
}
.screenshots .halfWidth {
    width:100%;
}
  }