﻿
        .jpx-wp-wrapper {
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            z-index: -2;
            overflow: hidden;
            opacity: 1 !important;
            display: block;
            background: transparent;
            cursor:pointer;
        }

        .jpx-wp-brandlabel div {
            position: fixed;
            right: 0;
            top: 0;
            width: 78px;
            height: 17px;
            z-index: 99;
        }

        #jpx-wp-layer-bg {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #jpx-wp-layer-left-wrapper {
            visibility: visible;
            z-index: 3;
            overflow: hidden;
            position: fixed;
            display: block;
            outline: none 0px;
            top: 0px;
            height: 100%;
            width: calc((100% - 1119px) / 2);
            left: 0px;
        }

        #jpx-wp-layer-left-container {
            z-index: 0;
            display: block;
            outline: 0 none;
            overflow: hidden;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            right: 0;
        }

        #jpx-wp-layer-left {
            position: absolute;
            display: block;
            top: 0;
            outline: 0 none;
            overflow: hidden;
            background: transparent;
            height: 100%;
            width: 100%;
            z-index: 1;
            right: 0;
            transform-origin: top right;
            border: 0;
        }

        #jpx-wp-layer-right-wrapper {
            visibility: visible;
            z-index: 3;
            overflow: hidden;
            position: fixed;
            display: block;
            outline: none 0px;
            top: 0px;
            height: 100%;
            width: calc((100% - 1119px) / 2);
            right: 0px;
        }

        #jpx-wp-layer-right-container {
            z-index: 0;
            display: block;
            outline: 0 none;
            overflow: hidden;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            left: 0;
        }

        #jpx-wp-layer-right {
            position: absolute;
            display: block;
            top: 0;
            outline: 0 none;
            overflow: hidden;
            background: transparent;
            height: 100%;
            width: 100%;
            z-index: 1;
            left: 0;
            transform-origin: top left;
            border: 0;
        } 
        #jpx-wp-layer-top-wrapper {
            visibility: visible;
            z-index: 3;
            position: absolute;
            display: block;
            outline: none 0;
            top: 0;
            left: 0;
            height: 0;
            width: 100%;
            margin-top: 113px;
        }

        #jpx-wp-layer-top-container {
            z-index: 0;
            width: 1170px;
            height: 140.1px !important;
            margin: 0 auto;
            position:relative;
        }

        #jpx-wp-layer-top {
            width: 100%;
            height: 100%;
            background: transparent;
            transform-origin: top center;
            margin: 0;
            top: 0;
        }

        #jpx-wp-layer-top {
            border: 0;
        } 
.clickable, .ct {
    cursor: pointer !important;

    pointer-events: auto !important;
}

.ignore-clicks {
    pointer-events: none !important;
}

.zero-alpha {
    opacity: 0;
}

 


#body_back {
    background-color: black;
}

#body_back .top-grad {
    position: absolute;
    width:100%;
    height:9vw;
    top:0;
    z-index: 1;
    opacity:0.6;
}

#body_back .wrapper {
    position: absolute;
    width:50%;
    height: 100%;
    z-index: 0;
}

#body_back .wrapper.left-wrapper {
    background-color: gray;
    top:0;
    right:50%;
}

#body_back .video-wrapper {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}

#body_back .video-wrapper video {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -50%);
}

#body_back .wrapper.left-wrapper {
    background-image: url("assets/wwf_fam_left.jpg");
    background-size: cover;
    background-position-x:0%;
    background-position-y:40%;
    background-repeat: no-repeat;
    top:0;
    left:0;
    height:100%;
    /*height:60%;*/
            cursor:pointer;
}

 
#body_back .wrapper.left-wrapper .bottom-grad {
    position: absolute;
    bottom:0;
    width:100vw;
    height:14vh;
    z-index: 1;left:0px;

}



#body_back .wrapper.right-wrapper {
    background-image: url("assets/wwf_fam_right.jpg");
    background-size: cover;
    background-position-x:20%;
    background-position-y:40%;
    background-repeat: no-repeat;
    top:0;
    right:0;
    height:100%;
    /*height:60%;*/
            cursor:pointer;
}


#body_back .wrapper.right-wrapper .bottom-grad {
    position: absolute;
    bottom:0;
    width:100vw;
    height:14vh;
    z-index: 1;
}



/* TOP */
#body_top .middle-grad {
    position: absolute;
    width:75%;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
}

#body_top .top-headline {
    position: absolute;
    top:50%;
    left:50%;
    width:36%;
    transform:translate(-50%,-50%);
    z-index: 99;
}


/* GUTTERS */
.frame {
    position: absolute;
    z-index: 0;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

#frame-2 {
    display:none;
}
 


.arrow {
    position: absolute;
    top:75%;
    width:27px;
    height:50px;
    margin-top: -25px;
    z-index: 99;
}

.arrow#arrow-right {
    right:3%;
    transform-origin: right;
}

.arrow#arrow-left {
    left:3%;
    transform-origin: left;
}


.cta-wrapper {
    position: absolute;
    bottom:3.5vh;
    left:50%;
    width:378px;
    height:100px;
    margin-left: -189px;
    transform-origin: bottom center;
    z-index: 99;
}

.cta-wrapper .cta {
    position: absolute;
    width:100%;
    transition: transform 0.2s;
}

.cta-wrapper:hover .cta {
    transform:scale(1.075);
}


#body_left .bottom-grad {
    position: absolute;
    bottom:0;
    width:100%;
    height:40%;
    z-index: 0;
}

#video-caption {
    position: absolute;
    top: 80%;
    left: 50%;
    font-size: 25px;
    color: white;
    font-family: "gotham-book";
    text-align: center;
    z-index: 99;
    transform: translate(-50%, -50%);
    width: 90%;
}


.right-copy { 
    position: absolute;
    top: 51%;
    left: 50%;
    width: 571px;
    height: 154px;
    z-index: 99;
    margin: 90px 110px;
    transform: matrix(0.664063, 0, 0, 0.664063, 0, 0);
    opacity: 1;
    color: #fff;
}
