:root {
    --white: #fefefe;
    --black: #010101;
    --off-black: #1C1C1C;
    --grey: #383838;
    --dark-blue: #112039;
    --blue: #80D8FF;
    --purple: #A86EEB;
    --yellow: #E6CC5F;
    --pink: #FF6565;
    --header-font: var(--body-font);
    --body-font: "Helvetica Neue", san-serifs;
    --standard-padding: clamp(20px, 1vw, 80px);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root body.inverted {
    --black: #fefefe;
    --white: var(--off-black);
    transition: 1s;
    transition-delay: 0s;
}

:root body.inverted .menu-container {
    --white: #fefefe;
    --black: var(--off-black);
}

.playfair-display {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 600 !important;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

iframe {
    width: 95vw;
    max-width: 100%;
    height: 35vw;
}

.box-shadow {
    box-shadow: 0 0 10px #ddd;
}

body {
    background-color: var(--black);
    font-family: var(--body-font);
    color: var(--white);
    min-height: 100%;
    padding: 0px;
    font-size: clamp(18px, 1vw, 32px);
    line-height: 1.2;
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-weight: 200;
}

p {
    line-height: 1.4;
}

main {
    padding: var(--standard-padding);
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
}

/*menu css*/
.menu-container {
    position: absolute;
    float: left;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white);
    transition: opacity .7s;
    opacity: 0;
    z-index: -9;
    width: 100%;
}

.mobile-menu-active .menu-container {
    opacity: 1;
    z-index: 9;
}

body.mobile-menu-active {
    overflow: hidden;
}

#main-menu {
    overflow: auto;
    height: 100%;
}

#mobile-menu-trigger {
    z-index: 10;
    position: relative;
    display: flex;
}

.mobile-menu-active #mobile-menu-trigger rect {
    fill: var(--black);
    transition: .5s;
}

.mobile-menu-active #mobile-menu-trigger rect:first-child {
    transform: scalex(0);
}

.mobile-menu-active #mobile-menu-trigger rect:nth-child(2) {
    transform: rotate(45deg);
}

.mobile-menu-active #mobile-menu-trigger rect:last-child {
    transform: rotate(-45deg) translate(-50%, -20%);
}

video,
svg {
    overflow: visible;
    max-width: 100%;
}

.logo-link-home {
    margin-right: auto;
    max-width: 80%;
}

.large-logo {
    max-width: 80%;
    margin: 0 auto;
}

.home-page .logo-link-home {
    opacity: 0;
    z-index: -1;
}

.menu-slogan {
    color: var(--black);
    font-size: 16px;
    margin: 0px 40px;
}

img.logo-black {
    margin: 40% 40px 0;
    max-width: calc(100% - 80px);
}

footer,
header {
    display: flex;
    padding: var(--standard-padding);
}

header {
    padding-bottom: 0;
}

footer {
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    background: var(--black);
    color: var(--white);
    align-items: center;
}

#header-logo path {
    fill: var(--white);
}

a {
    text-decoration: none;
    color: var(--iherit);
}

#main-menu ul a {
    text-decoration: none;
    color: var(--black);
    font-weight: 200;
    font-size: 52px;
}

.med-text {
    font-size: clamp(35px, 2.2vw, 62px);
    font-weight: 200;
}

h1,
.large-text {
    font-size: clamp(52px, 9vw, 132px);
    font-weight: 200;
    margin-top: 0;
}

h2 {
    font-weight: 200;
    font-size: clamp(34px, 4vw, 86px);
    margin: 0;
}

.work h2 {
    font-weight: 900;
}

.very-large-text {
    font-size: clamp(62px, 10vw, 242px);
    margin: 0;
    line-height: 1;
}
.work-hero-title {
    font-size: clamp(56px, 12vw, 232px);
    margin-top: 20px;
}
.constrained {
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
}

.margin-top-auto {
    margin-top: 20px;
}

.margin-bottom-auto {
    margin-bottom: 20px;
}

.centered {
    text-align: center;
    justify-content: center;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--standard-padding) * 3);
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.acenter {
    align-items: center;
}

.astart {
    align-items: flex-start;
}

.aend {
    align-items: flex-end;
}

.jcenter {
    justify-content: center;
}

.jstart {
    justify-content: flex-start;
}

.jend {
    justify-content: flex-end;
}

.client-logos {
    margin-top: 20px;
    margin-bottom: 60px;
    gap: 40px;
}
.client-logos > img {
    max-width: 14vw;
}
.stack {
    display: grid;
}

.stack>* {
    grid-area: 1/1/2/2;
    display: flex;
    flex-direction: column;
}

.work h1 span {
    display: block;
}

.work h1 span {
    display: block;
}

.work h1 strong {
    font-style: italic;
    font-weight: 900;
}

h2 strong,
h1 strong {
    font-style: italic;
    font-weight: 900;
}

ul {
    padding-left: 20px;
    line-height: 1.5;
}
a:visited .button,
.button {
    border: 2px solid var(--white);
    color: var(--white);
    padding: 10px 25px;
    margin: 20px auto 20px 0;
    border-radius: 50px;
    display: inline-block;
    text-decoration: none;
}
a:focus {
    outline: none;
}
a:visited,
.button:visited {
    color: inherit;
}
a:visited .button:focus,
a:visited .button:hover,
.button:hover,
.button:focus {
    background: var(--white);
    box-shadow: 0 0 14px #00000070;
    transition: .5s;
    color: var(--black);
    border-color: var(--white);
}

.mrgn-section,
.branded-section {
    background: url(../img/branded-background.webp);
    background-size: auto;
    background-size: cover;
}

.mrgn-section {
    background: var(--dark-blue);
}

.mrgn-section img,
.branded-section img {
    max-width: 75vw;
}

.adult-swim-section {
    background: url(../img/adult-swim-background-mobile.webp) no-repeat bottom center #010101;
    background-size: cover;
}

.liveonNY-section {
    background: url(../img/liveonimage-background.webp) no-repeat bottom center #010101;
    background-size: 100%;
}

.aca-section {
    background: url(../img/aca-background.webp) no-repeat center #010101;
    background-size: cover;
    min-height: 50vw;
}

.rochelle-jordan-section {
    background-color: #010101;
}

.liveonNY-section .content {
    margin: 10vw 8% 67vw;
}

.adult-swim-section .content {
    margin: 10vw 8% 67vw;
}

.aca-section .content {
    margin: auto 8% auto;
}

.aca-section img {
    max-width: 80%;
}

.standard-padding {
    padding: var(--standard-padding);
}

.grey-padding {
    max-width: calc(95%);
    background: #eee;
    padding: 2.5%;
}

.grey-padding-alt {
    max-width: calc(95%);
    background: #eee;
    padding: 20px 270px;
}

.breakout {
    margin-right: calc(-50vw + 50%);
    margin-left: calc(-50vw + 50%);
}

.breakout.section {
    padding-right: 0;
    padding-left: 0;
}

.section {
    padding: var(--standard-padding);
}

.full-height-section {
    display: flex !important;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.down-link {
    display: none;
    transform: rotate(90deg);
}

.section.hero-section {
    padding: 0px !important;
}

.four-color-boxes {
    display: grid;
    gap: 20px;
}

.four-color-boxes>div {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    transition: 1s;
    background: #383838;
}

.four-color-boxes .stack {
    height: 100%;
}

.four-color-boxes h2 {
    margin-bottom: 0;
    margin-top: auto;
    font-weight: 900;
    font-size: clamp(34px, 3.5vw, 86px);
    transition: 1s;
}


.four-color-boxes .stack>div:nth-child(2) {
    opacity: 0;
    z-index: -1;
    transform: translatey(5%);
    transition: 1s
}

.four-color-boxes .animated .stack>div:nth-child(1) {
    opacity: 0;
    z-index: -1;
}

.four-color-boxes .animated .stack>div:nth-child(2) {
    opacity: 1;
    z-index: 1;
    transform: none;
}

.four-color-boxes .stack>div:nth-child(1) h2 {
    margin-top: auto;
    opacity: 0;
}
body.loaded .four-color-boxes .stack>div:nth-child(1) h2 {
    opacity: 1;
}
.four-color-boxes>div:nth-child(1).animated, 
.four-color-boxes>div:nth-child(1):hover {
    background: #308042;
}
.four-color-boxes>div:nth-child(2).animated, 
.four-color-boxes>div:nth-child(2):hover {
    background: #C7983D;
}
.four-color-boxes>div:nth-child(3).animated, 
.four-color-boxes>div:nth-child(3):hover {
    background: #8A4DA0;
}
.four-color-boxes>div:nth-child(4).animated, 
.four-color-boxes>div:nth-child(4):hover {
    background: #4686AF;
}

.four-color-boxes .animated .stack h2 {
    margin-top: 0;
    transition-delay: .5s;
}

.page-bottom-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.page-bottom-controls.sticky {
    margin-top: 80px;
    position: sticky;
    top: 10px;
}

.services-table-row {
    display: grid;
    gap: 20px;
    border-top: 2px solid;
    padding: 40px 0;
    grid-template-columns: auto 1fr;
}


.services-table {
    border-bottom: 2px solid;
}

.services-table-row>div:nth-child(1) {
    font-weight: bold;
    font-size: 1.17em;
}
.services-table-row > div:nth-child(3) {
    grid-area: 2/1/3/3;
}

.services-table-row p strong {
    font-size: 1.17em;
font-weight: bold;
}

.services-table-row p,
.services-table-row h3 {
    margin-top: 0;
}

.work-content ul {
    line-height: 2;
}

.work-content h1,
.work-content h2 {
    font-size: 42px;
    font-weight: 900;
}

input {
    background: transparent;
    padding: 20px 0;
    border: 0;
    border-bottom: 2px solid var(--white);
    color: var(--white);
    font-size: clamp(18px, 1vw, 32px);
    font-weight: 200;
    margin-top: 30px;
}

input::placeholder {
    color var(--white);
    opacity: 1;
}

.submit-row input:focus,
.submit-row input:hover {
    background: var(--white);
    color: var(--black);
}

form .submit-row {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 40px;
}

form .submit-row>div {
    order: 2
}

form .submit-row input[type="submit"] {
    margin: 0;
    border: 1px solid #fff;
    padding: 10px 60px
}

.grid-4-columns,
.grid-2-columns {
    display: grid;
}

.circle-link {
    margin-left: auto;
    transition: .5s;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    width: 50px;
    height: 50px;
}

.circle-link.inverted path {
    fill: var(--white);
}

.back-top-link {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(-90deg);
}

.circle-link:hover,
.circle-link:focus {
    background-color: var(--white);
}

.circle-link:hover .arrow,
.circle-link:focus .arrow {
    fill: var(--black);
}
input[type="checkbox"] {
    outline: 2px solid #fff;
    accent-color: #000;
}
nav#main-menu ul {
    margin-top: 10vw;
    list-style: none;
}
.section {
    display: grid;
    gap: var(--standard-padding);
}
.core-values {
    gap: 0;
}
a.logo-link-home:focus-within svg {
    outline: 2px solid var(--white);
}
.half-width {
    width: 85%;
    min-width: 280px;
}
.rochelle-jordan-section {
    padding: 80px 0;
  }
.rochelle-jordan-section > img {
    order: 2;
}
#hamburger {
    --black: var(--black);
    --white: var(--white);
  }
@media(max-width: 999.99px) {
    body.work .content {
        display: none;
    }
    .aca-section,
    .adult-swim-section,
    .liveonNY-section {
        min-height: 80vw;
        background-size: cover;
    }
    .mrgn-section {
        background: var(--white);
    }
    .mrgn-section > div:nth-child(2) {
        grid-area:1/2
    }
    .liveonNY-section {
        background-position: bottom left;
    }
    .desktop-only {
        display: none;
    }
}
@media(min-width: 1000px) {
    .margin-top-auto {
        margin-top: auto;
    }
    
    .margin-bottom-auto {
        margin-bottom: auto;
    }
    .section.hero-section {
        min-height: 80vh;
    }
    .adult-swim-section {
        background: url(../img/adult-swim-background.webp) no-repeat bottom center #010101;
        background-size: 100%;
    }
    
    .mobile-only {
        display: none;
    }
    .desktop-only {
        display: block;
    }
    .rochelle-jordan-section > img {
        order: initial;
    }
    .rochelle-jordan-section {
        display: flex !important;
        min-height: 100vh;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .half-width {
        width: 50%;
    }
    .client-logos > img {
        max-width: 100%;
    }
    header {
        padding-bottom: 40px;
    }
    .section {
        padding: calc(var(--standard-padding) * 2) var(--standard-padding);
    }
    .four-color-boxes .animated .stack>div:nth-child(1) {
        opacity: initial;
        z-index: initial;
    }
    .four-color-boxes .animated .stack>div:nth-child(2),
    .four-color-boxes .stack>div:nth-child(2) {
        opacity: 1;
        z-index: 1;
        transform: translatey(5%);
        transition: 1s
    }
    body.loaded .four-color-boxes .stack>div:nth-child(2) {
        opacity: 0;
        z-index: -1;
    }
    .four-color-boxes .stack:hover>div:nth-child(1) {
        opacity: 0;
        z-index: -1;
    }
    body.loaded .four-color-boxes .stack:hover>div:nth-child(2) {
        opacity: 1;
        z-index: 1;
        transform: none;
    }
    .four-color-boxes .stack:hover h2 {
        margin-top: 0;
        transition-delay: .5s;
    }
    body.loaded .four-color-boxes>div:nth-child(4),
    body.loaded .four-color-boxes>div:nth-child(3),
    body.loaded .four-color-boxes>div:nth-child(2),
    body.loaded .four-color-boxes>div:nth-child(1) {
        background: var(--grey);
    }
    body.loaded .four-color-boxes>div:nth-child(4) h2,
    body.loaded .four-color-boxes>div:nth-child(4) {
        transition-delay: 1s;
    }
    body.loaded .four-color-boxes>div:nth-child(3) h2,
    body.loaded .four-color-boxes>div:nth-child(3) {
        transition-delay: .75s;
    }
    body.loaded .four-color-boxes>div:nth-child(2) h2,
    body.loaded .four-color-boxes>div:nth-child(2) {
        transition-delay: .5s;
    }
    body.loaded .four-color-boxes>div:nth-child(1) h2,
    body.loaded .four-color-boxes>div:nth-child(1) {
        transition-delay: .25s;
    }
    body.loaded .four-color-boxes>div:nth-child(1):hover {
        background: #308042;
        transition-delay: 0s;
    }
    body.loaded .four-color-boxes>div:nth-child(2):hover {
        background: #C7983D;
        transition-delay: 0s;
    } 
    body.loaded .four-color-boxes>div:nth-child(3):hover {
        background: #8A4DA0;
        transition-delay: 0s;
    }
    body.loaded .four-color-boxes>div:nth-child(4):hover {
        background: #4686AF;
        transition-delay: 0s;
    }
    .services-table-row {
        grid-template-columns: auto 1fr 3fr;
    }
    .services-table-row > div:nth-child(3) {
        grid-area: auto;
    }
    .services-table-row>div:nth-child(2) {
        text-align: center;
    }
    
    nav#main-menu ul {
        margin-top: initial;
    }
    #main-menu {
        overflow: visible;
    }

    #main-menu a:focus-within,
    #main-menu a:hover {
        color: var(--blue);

    }

    #main-menu {
        margin-right: 20px;
    }

    form .submit-row {
        flex-direction: row;
    }

    .work-hero {
        min-height: 80vh;
    }

    .work-content {
        max-width: 30vw;
    }

    .constrained-desktop {
        max-width: 1400px;
        width: 90%;
        margin: 0 auto;
    }

    .work .page-bottom-controls {
        margin-top: calc(-1 * clamp(0px, 8vw, 140px));
    }

    .down-link {
        display: inline-block;
    }

    .mrgn-section img,
    .branded-section img {
        max-width: 45vw;
    }

    /* Basic grid container */
   

    /* For 2/4 columns */
    .grid-4-columns,
    .grid-2-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 80px;
    }

    .work .grid-2-columns {
        gap: 20px;
    }

    .grid-2-columns.left {
        grid-template-columns: 1fr 3fr;
    }

    .grid-2-columns.right {
        grid-template-columns: 3fr 1fr;
    }

    /* For 3 columns */
    .grid-3-columns {
        grid-template-columns: repeat(3, 1fr);
        display: grid;
        gap: 80px;
    }

    /* For auto columns */
    .grid-auto-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--standard-padding);
        gap: 80px;
    }

    .grid-4-columns.four-color-boxes {
        gap: 20px;
    }

    footer {
        flex-direction: row;
    }

    .logo-black,
    .menu-slogan {
        display: none;
    }

    .core-values {
        gap: var(--standard-padding);
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 40px;
    }

    .core-values > * {
        margin: 30px 0;
      }

    .menu-container {
        position: relative;
        float: none;
        opacity: 1;
        background: transparent;
        color: var(--white);
        width: auto;
        z-index: 9;
    }

    #main-menu {
        font-size: 16px;
    }

    #main-menu ul {
        list-style: none;
        display: flex;
        gap: 3vw;
    }

    #mobile-menu-trigger {
        display: none;
    }

    #main-menu a {
        color: var(--white);
        text-decoration: none;
    }

    #main-menu ul a {
        font-size: clamp(16px, 1vw, 32px);
        color: var(--white);
    }

    .liveonNY-section .content {
        margin: 24vw 4vw 8vw 18vw;
    }

    .adult-swim-section .content {
        margin: 27vw 8vw 10vw;
    }

    .mrgn-section .content,
    .branded-section .content {
        margin-right: 8vw;
        margin-left: 8vw;
    }

    .liveonNY-section,
    .adult-swim-section {
        background-size: cover;
        background-position: 60% center;
    }
    :root body.inverted .menu-container {
        --black: #fefefe;
        --white: var(--off-black);
    }
    
}

@media(min-width: 1200px) {

    /* For 4 columns */
    .grid-4-columns {
        grid-template-columns: repeat(4, 1fr);
    }
}