/*
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;
}

.heading {
    margin-bottom: 20px;
}

/* 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);
} */

#clickToPlayVideoFP:hover .clickToPlayVideoControls,
#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;
    }
}


/* About ---------- */

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

.clientTile {
    position: relative;
    aspect-ratio: 1.2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.aboutCopyImage {
    display: flex;
    flex-direction: row;
    margin-bottom: 100px;
}

.animationHolder {
    position: relative;
    flex: 1;
    align-self: center;
}

.pops {
    position: absolute;
    width: 120%;
    padding-bottom: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('/wp-content/themes/leo-burnett/assets/images/aboutPops.png');
}

.desktopAnimation {
    width: 100%;
    height: auto;
    display: none;
}

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

    .aboutCopyImage {
        display: block;
        margin-bottom: 0;
    }

    .animationHolder {
        padding: 5%;
    }

    .pops {
        position: inherit;
        width: 100%;
        padding-bottom: 100%;
        top: 0;
        left: 0;
        transform: none;
    }

    .desktopAnimation {
        aspect-ratio: 1.4;
    }
}

#animation-container {
    height: auto !important;
}

.main {
    height: auto !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%);*/
}

/*.personTileAvatar:after {*/
.personTile:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}

.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;
    z-index: 1000;
}

.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));
    }
}



/* Working at Leo's */

/* .workingAtLeosImageHolder {
    flex: 1;
}

.workingAtLeosImage {
    height: 0;
    width: 100%;
    background-size: cover;
    padding-top: 56.25%;
}

.workingAtLeosTextRight {
    padding: 0 0 0 30px;
} */

.workingAtLeosP {
    margin-bottom: 20px;
}



/* 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;
}

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


/* 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;
}

.largeCarouselItem {
    flex: 0 0 70%;
    max-width: 70%;
}



/* FOOTER */

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

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


/* Pop Pulse Form ----- */

.popPulseDownloadFormContainer {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 10px 50px;
    /*    font-family: Arial, sans-serif;*/
    font-size: 16px;
    margin: 50px 0;
}

.popPulseDownloadFormHeading,
.popPulseDownloadFormText p {
    margin-bottom: 20px;
}

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

.popPulseDownloadForm {
    font-family: 'neue_haas_grotesk_disp55roman' !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 50px;
}

.popPulseDownloadForm button {
    margin: 5px 0 15px 0;
}

.popPulseDownloadFormText {
    grid-column: span 2;
    padding: 0 25px;
}

.popPulseDownloadForm input[type="text"],
.popPulseDownloadForm input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px 0;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.popPulseDownloadForm button {
    width: 100%;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

.popPulseDownloadForm button:hover {
    background-color: #444;
}

.opt-in {
    padding-left: 0 !important;
    margin: 5px 0 0 0;
}

@media only screen and (max-width: 768px) {
    .popPulseDownloadFormContainer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .popPulseDownloadFormText {
        grid-column: span 1;
        padding: 0;
    }

    .popPulseDownloadForm {
        margin-top: 20px;
        padding-left: 25px;
        padding-right: 25px;
    }

}




/* 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;
}