body {
    margin: 0;
    padding: 0;
}

.viewPortBtns {
    height: 35px;
    text-align: center;
    padding: 0px;
    z-index:9999;
    position: relative;
  }
  .topBar {
    position: fixed;
    width: 100%;
    height: 35px;
    padding: 0.3% 2%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #cecece;
    box-shadow: 2px 0px 13px 1px #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: arial;
  }
  
  .circlemode {
    padding: 8px 16px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }
  .Landscape span:first-child {
    transform: rotate(90deg);
  }
  
  .circlemode span {
    vertical-align: middle;
    color: rgb(170, 170, 170);
    font-size: 16px;
  }
  .circlemode i {
    font-size: 25px;
    color: rgb(170, 170, 170);
  }
  .circlemode:hover span,
  .circlemode:hover i,  .circlemode.active span, .circlemode.active i{
    color: #fff;
  }
.circlemode i {
    font-size: 25px;
    color: rgb(170, 170, 170);

}

.modeButton {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clearfix {
    clear: both;
}

.circlemode span {
    font-size: 15px;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px 0px;
    margin: 0;
}

.mainwrapper {
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;


}

.mobileContainer {
    width: 384px;
    height: 730px;
    position: relative;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.mobileLandContainer {
    width: 730px;
    height: 384px;
    position: relative;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.mobileContainer img,
.mobileLandContainer img {
    width: 100%;
    height: auto;
}


.innermain {
    position: absolute;
    top: 13.9%;
    width: 76.5%;
    left: 11.2%;
    height: 72%;
    background: #f9f6f6;

}


.closeExpand,
.closeTeaser,
.close {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0;
    top: 0;
    text-align: right;
    z-index: 9999 !IMPORTANT;
}

.placeholder .closeExpand img
{
    filter: invert(1);

}
.closeExpand img,
.closeTeaser img,
.close img {
    width: 30% !important;

}

.undertone-marker {
    background-position: -16px -14px;
}

.teaserTxt,
.bottomTxt {
    width: 100%;
    z-index: 999;
    clear: both;
    text-align: center;
}

.teaserTxt img {
    width: 90%;
}

.bottomTxt img {
    width: 95%;
}

.teaserTxt {
    top: 20px;
    left: 0;
    position: relative;
    border-radius: 0;
}

.bottomTxt {
    bottom: 0;
    left: 0;
    position: absolute;
}

.teaser {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    background: #fff;
}

.zipperable {
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 99;
    cursor: pointer;
    position: absolute;

}

.zipperable .header {
    position: absolute;
    top: 0;
    bottom: 50%;
    transition: all 2s;
    background: url(imgs/top.png);
    background-position: bottom right;
    background-color: #fff;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 200%;
    background-size: 100% auto;
    left: -100%;
    animation-name: animatop;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-delay: 2s;

}

.zipperable .footer {

    position: absolute;
    bottom: 0;
    top: 50%;
    left: 0;
    transition: all 2s;
    background: url(imgs/bottom.png);
    background-position: top right;
    background-color: #fff;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 200%;
    background-size: 100% auto;
    left: -100%;
    animation-name: animabottom;
    animation-fill-mode: forwards;
    animation-duration: 2.5s;
    animation-delay: 2s;
}

@keyframes animatop {
    to {
        top: -100%;
        border-bottom-left-radius: 80%;
        left: 100%;
        display: none;
    }
}

@keyframes animabottom {
    to {
        bottom: -100%;
        border-top-left-radius: 80%;
        left: 100%;

    }
}



@keyframes teaserTxt {
    to {
        border-bottom-left-radius: 100%;
    }
}

.zipperable .header {
    bottom: 50%;
}

.zipperable .footer {
    top: 50%;
}

.zipperable .zipper {
    top: 50%;
    left: -87.5px;
    margin-top: -37.5px;
    width: 600px;
    height: 75px;

    transition: all 2s;
    border-top-left-radius: 15% 50%;
    border-bottom-left-radius: 15% 50%;
}

.bottombanner {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
}

.bottombanner {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    display: none;
}

.bottombanner .bannerimg {
    width: 100%;
}

.bottombanner .plusimg {
    width: 50px;
    height: auto;
}

.landscaperotate {
    transform: rotate(90deg);
}

.teaserLine,
.wintxt {
    width: 100%;
}


.wintxt {

    display: flex;

}

.wintxt img {
    width: 100%;
}

.teaserLine img
    {
    width: 50%;
}

.winfirst,
.winSecond {
    width: 50%;
    margin-top: 5%;
    float: left;
}

.expand {
    width: 100%;
    height: 100%;
    background: url('imgs/backgroundExpand.jpg')
}

.expand img {
    width: 100%;
}

.footerTxt {
    position: absolute;
    bottom: -10px;
}

.placeholder {
    position: absolute;
    top: 10%;
    width: 75.1%;
    left: 12%;
    height: 79%;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    font-size: 0;
    pointer-events: auto !important;

}

.landscapeMain {
    position: absolute;
    top: 6.9%;
    width: 75.1%;
    left: 12%;
    height: 79%;
}

.placeholder .plzrotate {
    display: inline-block;
    text-align: center;
    text-transform: none;
    vertical-align: middle;
    font-size: 14px;
    position: relative;
}

.placeholder .plzrotate .logo {
    position: relative;
    margin: 0 auto;
    left: 80px !important;
    top: 0 !important;
}

.placeholder .plzrotate .rotate {
    position: relative;
    top: 20px;
    /*left: -25px;*/
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

.placeholder .plzrotate .spinner {
    position: relative;
    top: 30px;
    width: 17px;
    margin: 0 auto;
    -webkit-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -moz-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -ms-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -o-animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: rotating 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
}

.placeholder:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(90deg);
    }
}

@-moz-keyframes rotating {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(90deg);
    }
}

@-o-keyframes rotating {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(90deg);
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

@-webkit-keyframes btn-rotating {
    0% {
        -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
    }
}

@-moz-keyframes btn-rotating {
    0% {
        -moz-transform: rotate(-45deg);
    }

    100% {
        -moz-transform: rotate(90deg);
    }
}

@-o-keyframes btn-rotating {
    0% {
        -o-transform: rotate(-45deg);
    }

    100% {
        -o-transform: rotate(90deg);
    }
}

@keyframes btn-rotating {
    0% {
        transform: rotate(-45deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

@-webkit-keyframes btn-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes btn-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes btn-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes btn-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.mobileLandContainer .bottombanner {
    width: 320px;
    height: 50px;
    left: 50%;
    transform: translate(-50%);
}

.mobileLandContainer .teaser {
    width: 320px;
    height: 200px;
    left: 50%;
    transform: translate(-50%);
}

.mobileLandContainer,
.placeholder,
.wintxt {
    display: none;
}