/*
Theme Name: LeoBurnett
Text Domain: LeoBurnett
Version: 1.0
Description: Wordpress theme for Leo Burnett
Tags: responsive
Author: Ben Cormack
AuthorURI: http://www.bencormack.com
*/

body {
    background-color: #F6F6F6;
}

header {
    z-index: 99999 !important;
}

.main-wrapper {
    z-index: 0 !important;
}

* {
    /*    font-size: 23px;*/
    font-size: 18px;
    margin: 0;

}

p, li {
    font-family: 'neue_haas_grotesk_disp55roman';
}

a {
    text-decoration: none;
    color: inherit;
}

b, strong {
    font-family: 'neue_haas_grotesk_disp65roman' !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'neue_haas_grotesk_displa95Blk' !important;
    line-height: 1.05em;
}

p, h4 {
    line-height: 1.3em;
    font-size: 18px;
}

.fullScreenImageCaption div h4, .fullScreenImageCaption div p {
    font-size: 14px;
}

h1 {
    font-size: 64px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 25px;
}

.largeRegularText {
    font-size: 20px;
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    .largeRegularText {
        font-size: 15px;
    }

    #LeoBurnettLogoBlack {
        width: 180px
    }
}

.page-container {
    /*    max-width: 1300px;*/
    position: relative;
    max-width: 1100px;
    margin: 50px auto;
    min-width: 320px;
}

.mobilePadding {
    position: relative;
    transition: 1s;
}

@media only screen and (max-width: 1350px) {
    .mobilePadding {
        padding: 0 25px;
    }

    .mobilePaddingLeft {
        padding: 0 0 0 25px;
    }
}

.menu-main-menu-container ul {
    display: flex;
    flex-wrap: wrap;
}

.menu-main-menu-container ul li {
    width: 50%;
    margin-bottom: 5px;
    transition: .1s;
}

.menu-main-menu-container ul li a {
    transition: .1s;
}

.menu-main-menu-container ul li:hover {
    color: red;
}

.menu-main-menu-container ul li:hover a {}

/* TEXT & IMAGE --- */

.textAndImage {
    display: flex;
    flex-direction: row;
    margin-bottom: 50px;
}

.imageRight {
    flex-direction: row-reverse;
}

.textAndImage div {
    flex: 1;
}

.textAndImage_Text {
    padding-left: 20px;
}

.imageRight .textAndImage_Text {
    padding-left: 0px;
    padding-right: 50px;
}

.textAndImage_Text *:not(:last-child) {
    margin-bottom: 25px;
}

.textAndImage_Image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 56.25% 0;
}

@media only screen and (max-width: 768px) {
    .textAndImage {
        display: block;
    }

    .textAndImage_Text,
    .imageRight .textAndImage_Text {
        padding: 0 25px !important;
    }

    .textAndImage_Image {
        margin-bottom: 25px;
    }
}

.single-post h2, .single-post p {
    /*margin-bottom: 25px;*/
}

.single-post h1, .single-post h1, .single-post h2, .single-post p {
        transition: 1s;
    }

@media only screen and (max-width: 1350px) {
    .single-post h1, .single-post h1, .single-post h2, .single-post p {
        padding: 0 25px;
    }
}

.noLeftMargin {
    padding-left: 0 !important;
}


/* VID HEADER ----------------------------------------------------------------- */

.vidHeader {
    position: relative;
}

#vimeoPlayer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0
}

.vimeoPosterContainer {
    position: relative;
}

.vidHeaderFullScreenImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 56.25% 0;
    transition: all .5s;
}

.vimeoPosterContainer:hover .vidHeaderFullScreenImage,
.vimeoPosterContainer:focus .vidHeaderFullScreenImage {
    transform: scale(1.05);
    opacity: 0;
}

.vimeoPosterContainer:hover .vidHeaderFullScreenImage,
.vimeoPosterContainer:focus .vidHeaderFullScreenImage {
    transform: scale(1.05);
}

/* CLICK TO PLAY VIDEO ----------------------------------------------------------------- */

.clickToPlayVideo {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin: 50px 0;
}

@media only screen and (max-width: 500px) {
    .clickToPlayVideo, .imageRightTextLeft, .imageLeftTextRight, .headingAndCopy, .sectionContainer, .fullScreenImageContainer, .adCampaignHeader {
        margin: 30px 0 !important;
    }
}

.clickToPlayVideoPlayer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.clickToPlayVideoPoster {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
}

.clickToPlayVideoPosterHomepage {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
}

.clickToPlayVideoBtn {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    cursor: pointer;
}

.clickToPlayVideoPauseBtn {
    background-image: url('/wp-content/themes/leo-burnett/assets/images/videoPauseBtn.png');
    display: none;
}

.clickToPlayVideoPlayBtn {
    background-image: url('/wp-content/themes/leo-burnett/assets/images/videoPlayBtn.png');
    display: block;
}

.clickToPlayVideoControls {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.05);
    transition: 1s;
}

@media (pointer:none), (pointer:coarse) {
    .clickToPlayVideoControls {
        /* transform: scale(2) !important; */
        opacity: 1;
    }
}

.opacityZero {
    opacity: 0 !important;
}

/* #clickToPlayVideo:hover .clickToPlayVideoPoster, #clickToPlayVideo2:hover .clickToPlayVideoPoster, #clickToPlayVideo3:hover .clickToPlayVideoPoster {
    transform: scale(1.05);
} */

#clickToPlayVideo:hover .clickToPlayVideoControls, #clickToPlayVideo2:hover .clickToPlayVideoControls, #clickToPlayVideo3:hover .clickToPlayVideoControls {
    transform: scale(1);
    opacity: 1;
}


/* CUSTOM BLOCKS ----------------------------------------------------------------- */

.imageRightTextLeft, .imageLeftTextRight {
    display: flex;
    flex-direction: row;
    margin: 50px 0;
}

.imageRightTextLeft div, .imageLeftTextRight div {
    flex: 0 0 50%;
}

.headingAndCopy {
    margin: 50px 0;
    padding: 0 30px;
}

.paragraph {
    margin: 20px 0;
    padding: 0 30px;
}

.imageRightTextLeft div, .imageLeftTextRight div {
    flex: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 30px;
}

.imageRightTextLeft h1, .imageLeftTextRight h1, .headingAndCopy h1 {
    font-size: 43px;
    margin-bottom: 20px;
}

/* .imageRightTextLeft p, .imageLeftTextRight p, .headingAndCopy p {
    font-size: 23px;
} */

@media only screen and (max-width: 768px) {
    .imageRightTextLeft, .imageLeftTextRight {
        display: block;
        min-height: 0;
    }

    .imageRightTextLeft div {
        padding: 0 0 50px 0;
    }

    .imageLeftTextRight div {
        padding: 50px 0 0 0;
    }

    .headingAndCopy, .paragraph {
        padding: 0 0 0 0;
    }

    .imageRightTextLeft div:nth-child(2), .imageLeftTextRight div:first-of-type {
        position: relative;
        padding: 0 0 56.25% 0;
    }

    .imageRightTextLeft h1, .imageLeftTextRight h1, .headingAndCopy h1 {
        font-size: 20px;
    }

    .imageRightTextLeft p, .imageLeftTextRight p, .headingAndCopy p, .paragraph p {
        /* font-size: 16px; */
        margin-bottom: 0;
    }
}


/* Marketing page header ---------- */

.marketingPageHeader {
    display: flex;
    margin-bottom: 25px;
    gap: 25px;
}

.marketingPageHeader * {
    padding: 0 !important;
}

.marketingPageHeaderTitle p:first-of-type{
    font-family: 'neue_haas_grotesk_displa95Blk' !important;
    margin-bottom: 0;
}

/* Full width image ---------- */

.sectionContainer {
    margin: 50px 0;
}

.carouselContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 20px
}

.carouselContainerLeft {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 20px
}

/*
.carouselContainer:first-of-type {
    margin-right: 20px;
}
*/

.fullScreenImageContainer {
    display: flex;
    margin: 50px 0;
}

.fullScreenImageContainerFrontPage {
    display: flex;
    margin: 0 0 0 0;
}

.fullScreenImageContainer,
.vimeoPosterContainer,
.fullScreenImageContainerFrontPage {
    overflow: hidden;
}

.vimeoPosterContainer:hover .fullScreenImage,
.vimeoPosterContainer:focus .fullScreenImage {
    transform: scale(1.05);
    opacity: 0;
}

.fullScreenImageHolder {
    overflow: hidden;
    /* flex: 1; */
}

.fullScreenImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 0 0 56.25% 0;
    transition: all .5s;
}

.fullScreenImageContainer:hover .fullScreenImage,
.fullScreenImageContainer:focus .fullScreenImage,
.fullScreenImageContainerFrontPage:hover .fullScreenImage,
.fullScreenImageContainerFrontPage:focus .fullScreenImage {
    transform: scale(1.05);
}

.fullScreenImageCaption {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 10px;
}

.sixteenNineHalf {
    height: 0;
    padding: 0 0 26% 0 !important;
}

.width30 {
    margin-top: 0;
    width: 30%;
}

.width50 {
    margin-top: 0;
    width: 50%;
}

@media only screen and (max-width: 768px) {
    .sixteenNineHalf {
        height: 0;
        padding: 0 0 56.25% 0 !important;
    }

    .carouselContainer, .carouselContainerLeft {
        display: block;
    }

    .width30, .width50 {
        margin-top: 30px;
        width: 100%;
    }
}


/* Ad campaign header */

.adCampaignHeader {
    display: flex;
    flex-direction: row;
    margin: 50px 0;
}

.adCampaignHeader div {
    flex: 1;
    /* padding: 0 30px; */
}

.adCampaignHeader div:nth-child(2) {
    flex: 4;
}

.adCampaignHeaderTitle p:first-of-type {
    font-family: 'neue_haas_grotesk_displa95Blk' !important;
    margin-bottom: 3px;
}

@media only screen and (max-width: 768px) {
    .adCampaignHeader {
        display: block;
    }

    .adCampaignHeader div:first-child {
        margin-bottom: 5px;
    }

    .fullScreenImageHolder {
        width: 100% !important;
    }
}


/* People ---------- */

.peopleContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    margin-top: 50px;
}

.personTile {
    position: relative;
    cursor: pointer;
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.personTileAvatar {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
/*    filter: grayscale(100%);*/
}

.personTileTint {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.personTile:hover .personTileAvatar {
    opacity: 0;
/*    scale: 1.05;*/
}

.personTileCopy {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    line-height: 1em;
}

.personTileCopy p:first-of-type {
    font-family: 'neue_haas_grotesk_displa95Blk' !important;
}

.personTileCopy p {
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, .4);
    /* font-size: 14px; */
    line-height: 1.2em;
}

@media only screen and (max-width: 768px) {
    .peopleContainer {
        margin-top: 25px;
    }
}

@media only screen and (max-width: 620px) {
    .peopleContainer {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}



/* Work ---------- */

.workContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 15px;
    grid-row-gap: 25px;
}

@media only screen and (max-width: 675px) {
    .workContainer {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media only screen and (max-width: 400px) {
    .workContainer {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.workTile {
    position: relative;
    cursor: pointer;
}

.workTile a {
    text-decoration: none;
}

.workTileBackgroundHolder {
    overflow: hidden;
}

.workTileBackground {
    width: 100%;
    /* margin-left: 50%;
    transform: translateX(-50%); */
    padding: 0 0 56.25% 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
    margin-bottom: 10px;
}

.workTile:hover .workTileBackground  {
    width: 110%;
    margin-left: -5%;
}

.workTileCopy {
    display: flex;
    overflow: visible;
}

.workTileCopy p, .workTileCopy p nobr {
    font-size: 14px !important;
}

.workTileCopy p:first-child {
    font-family: 'neue_haas_grotesk_displa95Blk';
    margin-right: 15px;
}


/* More Work ----------------------------------------------------------------- */

.moreWork {
    margin-top: 75px;
    margin-bottom: 15px;
}
.carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.carousel::-webkit-scrollbar {
display: none;
}
.carouselItem {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 0;
}
@media only screen and (max-width: 600px) {
    .carouselItem {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.caroselA {
    text-decoration: none;
    color: inherit;
}
.carouselItemCopy {
    margin-top: 15px;
}
.carouselTitle {
    font-family: 'neue_haas_grotesk_displa95Blk';
    margin-right: 15px;
}
.carouselItemImage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 0 56.25% 0;
}



/* FOOTER */

footer {
    margin-top: 70px !important;
}

.footer-secondary-nav {
    /*padding: 0 30px;*/
}




/* ANIMATIONS ----------------------------------------------------------------- */

.initiallyTransparent {
    opacity: 0 !important;
}

.initiallyBlurred {
    filter: blur(10px);
}

.fadeIn {
    -webkit-animation-name: fadeAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: fadeAnim;
    animation-duration: 1s;
}


@keyframes fadeAnim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animateBackground {
    -webkit-animation-name: backgroundAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: backgroundAnim;
    animation-duration: 1s;
}


@keyframes backgroundAnim {
    from {
        transform: translate(-5px, -5px);
    }

    to {
        transform: translate(5px, 5px);
    }
}

.animateBorder {
    -webkit-animation-name: borderAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: borderAnim;
    animation-duration: 1s;
}


@keyframes borderAnim {
    from {
        transform: translate(5px, 5px);
    }

    to {
        transform: translate(-5px, -5px);
    }
}

.tweenInFromLeft {
    -webkit-animation-name: tweenInFromLeftAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: tweenInFromLeftAnim;
    animation-duration: 1s;
}

@keyframes tweenInFromLeftAnim {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tweenInFromBelow {
    -webkit-animation-name: tweenInFromBelowAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: tweenInFromBelowAnim;
    animation-duration: 1s;
}

@keyframes tweenInFromBelowAnim {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tweenInFromRight {
    -webkit-animation-name: tweenInFromRightAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: tweenInFromRightAnim;
    animation-duration: 1s;
}

@keyframes tweenInFromRightAnim {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.tweenInFromBack {
    -webkit-animation-name: tweenInFromBackAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: tweenInFromBackAnim;
    animation-duration: 1s;
}

@keyframes tweenInFromBackAnim {
    from {
        opacity: 0;
        transform: scale(.95);
        /*        filter: blur(2px);*/
    }

    to {
        opacity: 1;
        transform: scale(1);
        /*        filter: blur(0);*/
    }
}

.tweenInFromCenter {
    -webkit-animation-name: tweenInFromCenterAnim;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    animation-name: tweenInFromCenterAnim;
    animation-duration: 1s;
}

@keyframes tweenInFromCenterAnim {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



.revealFromLeft {
    -webkit-animation-name: revealFromLeftAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-name: revealFromLeftAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.revealFromLeftSlow {
    -webkit-animation-name: revealFromLeftSlowAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-name: revealFromLeftSlowAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

@keyframes revealFromLeftAnim {
    from {
        opacity: 0;
        transform: translateX(-500px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes revealFromLeftSlowAnim {
    from {
        opacity: 0;
        transform: translateX(-450px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.revealFromRight {
    -webkit-animation-name: revealFromRightAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-name: revealFromRightAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.revealFromRightSlow {
    -webkit-animation-name: revealFromRightSlowAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-name: revealFromRightSlowAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

@keyframes revealFromRightAnim {
    from {
        opacity: 0;
        transform: translateX(500px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes revealFromRightSlowAnim {
    from {
        opacity: 0;
        transform: translateX(450px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}



.growFromLeft {
    -webkit-animation-name: growFromLeftAnim;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-name: growFromLeftAnim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

@keyframes growFromLeftAnim {
    from {
        width: 0;
    }

    to {
        width: 15%;
    }
}



/* FONTS ----------------------------------------------------------------- */

@font-face {
    font-family: 'neue_haas_grotesk_disp55roman';
    src: url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-55rg-webfont.woff2') format('woff2'),
        url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-55rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neue_haas_grotesk_disp65roman';
    src: url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-65md-webfont.woff2') format('woff2'),
        url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-65md-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neue_haas_grotesk_displa95Blk';
    src: url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-95blk-webfont.woff2') format('woff2'),
        url('/wp-content/themes/leo-burnett/assets/fonts/nhaasgroteskdspro-95blk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}