.menu-article-headline #label {
    margin-bottom: 0px;
}

.x-firefox .x-layout-box {
    display: flex !important;
}

.toolbarRightContainer .playing,
.menuItem .playing {
    /*background-color:#1234ab;*/
    background-image: url('../images/reader%20icons/no-speech-ic-wht2.png') !important;
    /*code here to control sprite change */
}

.reader-menu,
.reader-menu .x-inner {
    background-color: initial !important;
}

.hide-sections * {
    display: none;
}

#page-number-cont {
    width: 130px;
}

.x-phone #page-number-cont {
    width: 100px;
}

.articleContent {
    background-color: white;
    margin: auto;
    max-width: 1024px;
}

.ie-inner {
    width: 100% !important;
    max-width: 100%;
}

.reader-with-scroller {
    height: calc(100% - 80px) !important;
    top: 80px !important;
}

.checkbox-checked {
    color: rgb(132, 175, 205) !important;
}

.x-ios-9 .IIV::-webkit-media-controls-play-button,
.x-ios-9 video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

.popoverTopBar .playing {
    background-image: url('../images/reader%20icons/no-speech-ic-blk2.png') !important;
}

.search-input:disabled+label {
    opacity: 0.8;
}

.search-type-container .x-form-label {
    background-color: transparent !important;
    display: block !important;
}

.x-field-radio {
    cursor: pointer;
}

.x-field-radio.x-item-disabled {
    cursor: default;
}

.search-type-container .x-form-label span {
    font-weight: normal !important;
}

.search-type-container .x-field-mask::before {
    height: 18px !important;
    width: 18px !important;
    top: 8px !important;
    right: 0px !important;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: white !important;
}

.search-type-container .x-item-disabled .x-field-mask::before {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.search-type-container .x-field-mask::after {
    height: 10px !important;
    width: 10px !important;
    top: 12px !important;
    right: 4px !important;
}

.x-ie .search-type-container .x-label-align-right {
    flex-direction: row-reverse !important;
}

.x-ie .search-type-container .x-form-label {
    margin-left: 60px;
    margin-right: 20px;
}

/*.search-input{
    margin: 0px 3px;
}*/

.ieScroll {
    -ms-overflow-y: auto !important;
}

.pauseReadAloud {
    background: url("../images/pause-ic.png") black;
}

.playReadAloud {
    background: url("../images/play-ic.png") black;
}

.stopReadAloud {
    background: url("../images/stop-ic.png") black;
}

.ticker {
    display: inline-block !important;
    padding-left: 100%;
    white-space: nowrap;
    -webkit-animation: tickerAnim 80s linear infinite;
    -moz-animation: tickerAnim 80s linear infinite;
    -ms-animation: tickerAnim 80s linear infinite;
    animation: tickerAnim 80s linear infinite;
}

.tickerPhone {
    animation: tickerAnim 100s linear infinite !important;
}

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.dfpDiv {
    display: inline-block;
    margin: auto;
}

@-webkit-keyframes tickerAnim {
    0% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0px, 0px);
        transform: translate3d(-100%, 0px, 0px);
    }
}

@-moz-keyframes tickerAnim {
    0% {
        -moz-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        -moz-transform: translate3d(-100%, 0px, 0px);
        transform: translate3d(-100%, 0px, 0px);
    }
}

@-ms-keyframes tickerAnim {
    0% {
        -ms-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        -ms-transform: translate3d(-100%, 0px, 0px);
        transform: translate3d(-100%, 0px, 0px);
    }
}

@keyframes tickerAnim {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(-100%, 0px, 0px);
    }
}

/*.ipadhtml {
    min-height:960px;
    position: absolute !important;
    top:0;
}*/

/*.articleContentHtml5 *{
    -webkit-user-select:text !important;
    user-select:text !important;
    
}*/

.hide-fullscreen-control {
    display: none !important;
}

@media screen and (min-width:1200px) {
    .newsdaySlider {
        width: 25% !important;
        max-width: 200px !important;
    }
    .newsdaySliderElement {
        width: 75% !important;
        left: 11.5% !important;
    }
    /*.zoomIn {
        right: 8% !important;
    }
    .zoomOut {
        left: 8% !important;
    }*/
}

.readerFullscreen {
    height: calc(100% - 40px) !important;
    top: 40px !important;
}

.selectBox select::-ms-expand {
    /*display:none !important;*/
    visibility: hidden !important;
}

.selectBox {}

.x-field-input,
.x-field-inputinput:focus,
.x-field-inputinput:hover {
    font-size: 16px !important;
}

.datefield,
.datefield:focus,
.datefield:hover {
    font-size: 16px !important;
}

.selectBox select {
    user-select: all !important;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.selectBox::after {
    z-index: 1;
}

.fadeSearchItem {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.fadeSearchItem:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 1.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}

body {
    touch-action: none;
    min-height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-width: 100%;
}

#ext-viewport {
    min-height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-width: 100%;
    /*padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);*/
}

.searchOverlay input[type="text"] {
    background-color: white;
    color: black;
    border: 1px solid #707070;
    padding: 1px;
}

.searchOverlay input[type="text"][disabled] {
    background-color: white;
    color: black;
    border: 1px solid #707070;
    padding: 1px;
}

.pdfinfinitecarousel.fill {
    overflow: hidden;
}

.x-label-align-left .x-component-outer,
.x-label-align-right .x-component-outer {
    -ms-flex: 1 0 0px !important;
    flex: 1 0 0px !important;
}

.x-loading-mask {
    z-index: 100 !important;
}

.x-mask {
    background: rgba(0, 0, 0, 0.75) center center no-repeat !important;
}

.transparentMask {
    background-color: transparent !important;
}

.sectionpopup {
    z-index: 9999 !important;
}

.sectionpopupmask {
    z-index: 9998 !important;
}

.backgroundImage {
    background-repeat: no-repeat !important;
    /*background-size:contain !important;
    background-position:center !important;*/
}

.backImage {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    /* background-size: 100% 100%; */
    background-position: center !important;
}

.backImage.aspectfill {
    background-size: cover !important;
    background-position: 50% 0% !important;
}

.backImage.fillwidth {
    background-size: 100% !important;
    background-position: top !important;
}

.backgroundImage.aspectfill {
    /*background-size:cover !important;*/
    /*background-position:50% 0% !important;*/
}

.backgroundImage.fillwidth {
    background-size: 100% !important;
    background-position: top !important;
}

.watermark {
    color: #a9a9a9;
}

.splashscreenphone,
.splashscreen {
    width: 100%;
    height: 100%;
}

.interstitialoverlaytablet {
    width: auto;
    height: auto;
}

.interstitialoverlayphone {
    width: auto;
    height: auto;
}

#menuSharing .x-inner {
    display: block !important;
}

.backgroundImage .x-innerhtml {
    height: 100%;
}

.readeranimationobject .x-innerhtml {
    height: 100%;
}

.sectionlistitem:hover {
    background-color: lightblue;
    cursor: pointer;
}

.hideTick {
    visibility: hidden;
}

.showTick {
    visibility: visible;
}

@media screen and (orientation: portrait) {
    .dfpLeftHandAd {
        display: none !important;
    }
    html.iphone.safari {
        height: 100% 
    }
    .portraitOnly {
        display: block;
    }
    .landscapeOnly {
        display: none;
    }
    .splashscreen {
        background: url('../images/loading screen_portrait.png');
    }
    .splashscreenphone {
        background: url('../images/HC-splash-mobile-portrait.png');
    }
    .archiveitemphone {
        width: 46% !important;
        margin: 0 2% 20px 2% !important;
    }
    .helperphone {
        background: url('../images/mobile-overlay-part1.png');
    }
    .helperphonenext {
        background: url('../images/mobile-overlay-part2.png');
    }
    .helpertablet {
        background: url('../images/helper-portrait-overlay-tablet.png');
    }
    .helpertabletButton {
        position: absolute !important;
        top: 65%;
    }
    @media screen and (max-height: 946px) {
        .helpertabletButton {
            position: absolute !important;
            top: 75%;
        }
    }
    .helpertabletButtonAndroid {
        position: absolute;
        top: 65% !important;
    }
    .helperphoneButton {
        width: 100%;
        position: absolute;
        bottom: 50px;
    }
    .interstitial {
        background: url('../images/interstitial.png');
    }
    .interstitialphone {
        background: url('../images/interstitialphone.png');
    }
    .interstitialoverlaytablet {}
    .interstitialoverlaytablet .advert {
        max-height: 768px;
        max-width: 576px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .interstitialoverlayphone {
        max-width: 100%;
        max-height: 133vw;
    }
    .interstitialoverlaytablet iframe {
        width: 768px;
        height: 1024px;
    }
    .sharepopupitem {
        height: 75px;
    }
    .bookmarkitemphone {
        width: calc(50% - 20px);
    }
    .interstitiallandscape {
        display: none;
    }
}

@media screen and (orientation: landscape) {
    .portraitOnly {
        display: none;
    }
    .landscapeOnly {
        display: block;
    }
    .interstitialportrait {
        display: none;
    }
    .interstitiallandscape {
        display: block;
    }
    .splashscreen {
        background: url('../images/loading screen_landscape.png');
    }
    .splashscreenphone {
        background: url('../images/HC-splash-mobile-ls.png');
    }
    .archiveitemphone {
        width: 30% !important;
        margin: 0 3% 20px 0 !important;
    }
    .helperphone {
        background: url('../images/mobile-overlay-landscape-part1.png');
    }
    .helperphonenext {
        background: url('../images/mobile-overlay-landscape-part2.png');
    }
    .helpertablet {
        background: url('../images/helper-landscape-overlay-tablet.png');
    }
    .helpertabletButton {
        position: absolute !important;
        top: 75%;
    }
    .helpertabletButtonAndroid {
        position: absolute;
        top: 75% !important;
    }
    .helperphoneButton {
        width: 100%;
        position: absolute;
        bottom: 25px;
    }
    .interstitial {
        background: url('../images/interstitial-land.png');
    }
    .interstitialphone {
        background: url('../images/interstitialphone-land.png');
    }
    .interstitialoverlaytablet .advert {
        max-width: 768px;
        max-height: 576px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    }
    /*.interstitialoverlaytablet .advert iframe {
            pointer-events:none;
        }*/
    .interstitialoverlayphone {
        max-height: 100%;
        max-width: 133vh;
    }
    .interstitialoverlaytablet iframe {
        width: 1024px;
        height: 768px;
    }
    .sharepopupitem {
        width: 95px;
        height: calc(100% - 40px);
        display: inline-block;
    }
    .bookmarkitemphone {
        width: calc(25% - 20px);
    }
}

#bannerAd {
    position: absolute;
    bottom: 20px;
    left: calc((100% - 728px) / 2);
    width: 728px;
    height: 90px;
    background: url('../images/blue-sky-banner-ad.png');
}

.clearText {
    background-color: rgba(0, 0, 0, 0);
    margin-left: 35px;
}

.x-mask .x-mask-inner {
    background: rgba(0, 0, 0, 0.5) !important;
}

.x-mask .x-mask-message {
    color: white !important;
}

#splashscreen .x-innerhtml {
    height: 100%;
}

#htmlpart .x-innerhtml {
    height: 100%;
}

.videoview .x-innerhtml {
    height: 100%;
}

.flashreader .x-innerhtml {
    height: 100%;
}

.innerhtmlfullheight .x-innerhtml {
    height: 100%;
}

.chicagoregister .x-innerhtml {
    height: 100%;
}

figure {
    padding: 0;
    margin: 0;
    height: 100%;
}

.zoomDiv {
    width: auto;
    display: inline-block;
}

.animate {
    transition: .4s ease-out;
}

.mediaDiv {
    z-index: 22222;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    white-space: nowrap;
}

.mediaDiv div:not(.brightcoveVideo, .brightcoveVideo div) {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.mediaObject.backgroundImage div {
    display: block !important;
}

.tileDiv {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 11111;
    white-space: nowrap;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    pointer-events: none;
}

.tileDiv canvas {
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
}

.tileDiv div {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.tileImage {
    display: none;
}

@media screen and (orientation: portrait) {
    .landscapeimage {
        display: none !important;
    }
}

@media screen and (orientation: landscape) {
    .portraitimage {
        display: none !important;
    }
}

.singlepagelandscapeimage {
    display: none !important
}

.chicagoInput {
    width: 100% !important;
}

.downloadCheckBox .x-field-input {
    min-width: inherit !important;
}

.readerpage {
    z-index: -10;
}

.readerpage.selecteditem {
    z-index: 10;
}

.readerpage .x-scroll-bar-y.active {
    width: 0px !important;
}

.readerpage .x-scroll-bar-x.active {
    height: 0px !important;
}

.readerpage .x-innerhtml {
    height: 100%;
}

.searchDate {
    background-color: #e6e6e6;
    color: #000000;
}

.searchDate.hidden {
    display: none;
}

.blur {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

.tileDivImage .portrait, .tileDivImage .landscape {
    display: inline-block;
    width:100%;
    height:100%;
}

@media screen and (orientation:landscape){
    .tileDivImage.dpsMode .portrait, .tileDivImage.dpsMode .landscape {
        width:50%;
    }
}

.tileImageContainer {
    width: 50%;
    height: 50%;
    float: left;
}

.tileImageContainer img {
    width: 100%;
    height: 100%;
}

.x-layout-card-item {
    background: none !important;
}

.dynamicgallery {
    background: black !important;
}

.bannerIcon {
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background-color: #b81b23;
    font-size: 10px;
    color: white;
    line-height: 14px;
    text-align: center;
    padding-left: -2px;
}

.readercontrols {
    color: white;
    font-size: 14px;
}

.readercontrols .playbutton {
    width: 26px;
    height: 26px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.playbutton.play {
    background-image: url(../images/play-ic.png)
}

.playbutton.pause {
    background-image: url(../images/pause-ic.png)
}

.readercontrols .togglebox {
    width: calc(100% - 52px);
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

.readercontrols .fullscreenbutton {
    width: 26px;
    height: 26px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/fullscreen-ic.png)
}

.timeBar {
    width: 75px;
}

.tool-tip {
    visibility: hidden;
    font-family: arial 'Harlow Solid';
    color: white;
    font-size: 12px;
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    opacity: 0.8;
    border-radius: 5px;
    border: 2px solid white;
    overflow: hidden;
    white-space: nowrap;
}

.articleTooltip {
    font-family: arial 'Harlow Solid';
    color: white;
    font-size: 12px;
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    opacity: 0.8;
    border-radius: 5px;
    border: 2px solid white;
    overflow: hidden;
    white-space: nowrap;
}

.tooltip {
    visibility: hidden;
    font-family: arial 'Harlow Solid';
    color: white;
    font-size: 12px;
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    opacity: 0.8;
    border-radius: 5px;
    border: 2px solid white;
    overflow: hidden;
    white-space: nowrap;
}

.tooltiptoolbar {
    font-family: arial 'Harlow Solid';
    color: white;
    font-size: 12px;
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    /*opacity: 0.8;*/
    border-radius: 5px;
    border: 2px solid white;
    overflow: hidden;
    white-space: nowrap;
}

.adTooltip {
    visibility: hidden;
    font-family: arial 'Harlow Solid';
    color: white;
    font-size: 12px;
    background-color: black;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    opacity: 0.8;
    border-radius: 5px;
    border: 2px solid white;
    overflow: hidden;
    white-space: nowrap;
}

.readerArticle:hover {
    cursor: pointer;
}

.readerArticle:hover .tool-tip {
    visibility: visible;
}

.readerLink:hover {
    cursor: pointer;
}

.readerLink:hover .tool-tip {
    visibility: visible;
}

.toolbar:hover .tooltip {
    visibility: visible;
}

.leftsidead:hover .adTooltip {
    visibility: visible;
}

/*.marquee {
    /*overflow: hidden;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    /*-webkit-animation: marquee 50s linear infinite;
    -moz-animation: marquee 50s linear infinite;
    -ms-animation: marquee 50s linear infinite;
}*/

.readerLightbox:hover {
    cursor: pointer;
}

.tickerLink {
    text-decoration: none;
    color: black;
}

.readerLightbox:hover .tool-tip {
    visibility: visible;
}

.tickerLink:hover {
    text-decoration: underline;
}

/*@keyframes marquee {
  
    0% { transform: translate(100%,0);}
    100% {transform: translate(-350%, 0);}
}*/

.openSans {
    font-family: 'Open Sans';
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

.sectionBtn:hover {
    /*background-color:#929292;
    color:white;*/
    cursor: pointer;
}

.sectionBtn {
    color: #929292;
}

.articleExpand {
    animation-duration: 5s;
}

@keyframes articleExpand {
    100% {
        height: 100%;
        width: 100%;
    }
}

.toggle .x-toggle {
    height: 1.1em;
    width: 2em;
}

.x-thumb {
    height: 1em !important;
    width: 1em !important;
}

.toggle .x-thumb::before {
    height: 1em;
    width: 1em;
    top: 0em;
}

.toggle .x-thumb::after {
    height: 1em;
    width: 1em;
    top: 0.03em;
    left: 0.03em;
}

.newsdayObject:hover {
    cursor: pointer;
}

/*@-webkit-keyframes marquee {
    0%   { text-indent: 430px }
    100% { text-indent: -485px }
    0% { transform: translate(100%,0);}
    100% {transform: translate(-100%, 0);}
}*/

.marquee {
    /*overflow: hidden;
    white-space: nowrap;
    animation: marqueeAnim 80s linear infinite;*/
    /*-webkit-animation: marquee 50s linear infinite;
    -moz-animation: marquee 50s linear infinite;
    -ms-animation: marquee 50s linear infinite;*/
}

.marqueeLive {
    /*overflow: hidden;*/
    white-space: nowrap;
    animation: marqueeLive 80s linear infinite;
    /*-webkit-animation: marquee 50s linear infinite;
    -moz-animation: marquee 50s linear infinite;
    -ms-animation: marquee 50s linear infinite;*/
}

.tickerLink {
    color: white;
    text-decoration: none;
}

.tickerLink:hover {
    text-decoration: underline;
}

input[type=range] {
    -webkit-appearance: none !important;
    /*-webkit-transform: translate3d(0px, 0px, 0px);*/
    width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
    background: #8C8B8B;
    /*background:url('../../../assets/zoomSlider/bar.png');*/
    height: 3px;
    margin-top: 8px;
    width: 100%;
}

.pwa-v2 input[type=range]::-webkit-slider-runnable-track {
    height: 1px;
    margin-top: 10px;
}

input[type=range]::-webkit-slider-thumb {
    /*-webkit-appearance: none;
    background:url('../../../assets/zoomSlider/slider-switch.png') no-repeat;
    height:8px;
    width:8px;
    padding-top:-15px;
    background-size:contain;
    display:inline;*/
    -webkit-appearance: none !important;
    background: #fff;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: -3px;
    border: 1px solid #8c8b8b;
}

.pwa-v2 input[type=range]::-webkit-slider-thumb {
    margin-top: -4px;
    background: #000000;
}

input[type=range]::-moz-range-track {
    background: #8C8B8B;
    /*background:url('../../../assets/zoomSlider/bar.png');*/
    height: 3px;
    margin-top: -15px;
    width: 100%;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none !important;
    background: #ffffff;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: -3px;
    border: 1px solid #8c8b8b;
}

.pwa-v2 input[type=range]::-moz-range-track {
    height: 1px;
    margin-top: -4px;
}

.pwa-v2 input[type=range]::-moz-range-thumb {
    margin-top: -4px;
    background: #000000;
}

.hide-tooltip .tooltiptoolbar, .hide-tooltip .articleTooltip, .hide-article-tooltip .articleTooltip {
    display: none !important;
    visibility: hidden !important;
}

input[type=range]::-ms-track {
    height: 3px;
    background: transparent;
    border-color: transparent;
    color: transparent;
    width: 100%;
    border-width: 6px 0;
}

input[type=range]::-ms-fill-lower {
    background: #8C8B8B;
    border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
    background: #8C8B8B;
    border-radius: 10px;
}

input[type=range]::-ms-thumb {
    background: #ffffff;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: -3px;
    border: 1px solid #8c8b8b;
}

.phoneShareBtn {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 7.5%;
    padding-bottom: 7.5%;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 5%;
}

.phoneShareBtnLand {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5%;
    width: 10%;
    padding-top: 40%;
    display: inline-block;
}

/*@media screen and (max-height:700px){
    .twentyFour{
        font-size:18px !important;
    }

    .ten{
        font-size:8px !important;
    }

    .thirteen{
        font-size:10px !important;
    }

    .fifty{
        font-size:30px !important;
    }

    .eighteen{
        font-size:13px !important;
    } 
    
    .windDirection{
        visibility:hidden;
    }
}*/

@media screen and (max-height:768px) {
    .twentyFour {
        font-size: 14px !important;
    }
    .ten {
        font-size: 8px !important;
    }
    .thirteen {
        font-size: 10px !important;
    }
    .fifty {
        font-size: 18px !important;
    }
    .eighteen {
        font-size: 10px !important;
    }
}

@media screen and (max-height:615px) {
    .twentyFour {
        font-size: 14px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .ten {
        font-size: 8px !important;
    }
    .thirteen {
        display: none;
    }
    .fifty {
        font-size: 18px !important;
    }
    .eighteen {
        font-size: 10px !important;
    }
}

@media screen and (max-height:560px) {
    .twentyFour {
        font-size: 14px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .ten {
        font-size: 8px !important;
    }
    .thirteen {
        display: none;
    }
    .fifty {
        font-size: 18px !important;
        display: none;
    }
    .eighteen {
        font-size: 10px !important;
    }
}

/* ----------------- Top Story ------------------------- */

@-webkit-keyframes expandTopStory {
    from {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandTopStory {
    from {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandTopStory {
    from {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandTopStory {
    from {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkTopStory {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes shrinkTopStory {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes shrinkTopStory {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
}

@keyframes shrinkTopStory {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 60%;
        top: 0px;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 3 Col 1 Left ------------------------- */

@-webkit-keyframes expandRow3Col1LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col1LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col1LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col1LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
}

@-moz-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
}

@-ms-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
}

@keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 0px
    }
}

@-webkit-keyframes expandRow3Col1LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col1LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col1LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col1LeftSmall {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
}

@-moz-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
}

@-ms-keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
}

@keyframes shrinkRow3Col1LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 3 Col 2 Left ------------------------- */

@-webkit-keyframes expandRow3Col2LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col2LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col2LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col2LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
}

@-moz-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
}

@-ms-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
}

@keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 256px
    }
}

@-webkit-keyframes expandRow3Col2LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col2LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col2LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col2LeftSmall {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
}

@-moz-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
}

@-ms-keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
}

@keyframes shrinkRow3Col2LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 256px
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 3 Col 3 Left ------------------------- */

@-webkit-keyframes expandRow3Col3LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col3LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col3LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col3LeftSmall {
    from {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
}

@-moz-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
}

@-ms-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
}

@keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 30%;
        top: 60%;
        left: 512px
    }
}

@-webkit-keyframes expandRow3Col3LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-moz-keyframes expandRow3Col3LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-ms-keyframes expandRow3Col3LeftMed {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@keyframes expandRow3Col3LeftSmall {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
}

@-webkit-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
}

@-moz-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
}

@-ms-keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
}

@keyframes shrinkRow3Col3LeftSmall {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 512px
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 1 Col 1 Right ------------------------- */

@-webkit-keyframes expandRow1Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow1Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow1Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow1Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow1Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes shrinkRow1Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes shrinkRow1Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
}

@keyframes shrinkRow1Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 0px;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 1 Col 2 Right ------------------------- */

@-webkit-keyframes expandRow2Col1Right {
    from {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow2Col1Right {
    from {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow2Col1Right {
    from {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow1Col2Right {
    from {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
}

@-moz-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
}

@-ms-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
}

@keyframes shrinkRow1Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 30%;
        top: 0px;
        left: 256px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 2 Col 1 Right ------------------------- */

@-webkit-keyframes expandRow2Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow2Col1Right {
    0% {
        height: 30%;
        top: 30%;
        left: 0px;
        width: 256px;
    }
    100% {
        height: 105%;
        top: 0px;
        left: 0px;
        width: 768px;
    }
}

@-ms-keyframes expandRow2Col1Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow2Col1Right {
    from {
        height: 30%;
        top: 30%;
        left: 0px;
        width: 256px;
    }
    to {
        height: 105%;
        top: 0px;
        left: 0px;
        width: 768px;
    }
}

@-webkit-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
}

@-moz-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
}

@-ms-keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
}

@keyframes shrinkRow2Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 2 Col 2 Right ------------------------- */

@-webkit-keyframes expandRow2Col2Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow2Col2Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow2Col2Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow2Col2Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow2Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
}

@-moz-keyframes shrinkRow2Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
}

@-ms-keyframes shrinkRow2Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
}

@keyframes shrinkRow2Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 256px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 2 Col 3 Right ------------------------- */

@-webkit-keyframes expandRow2Col3Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow2Col3Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow2Col3Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow2Col3Right {
    from {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow2Col3Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
}

@-moz-keyframes shrinkRow2Col3Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
}

@-ms-keyframes shrinkRow2Col3Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
}

@keyframes shrinkRow2Col3Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 30%;
        top: 30%;
        left: 512px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 3 Col 1 Right ------------------------- */

@-webkit-keyframes expandRow3Col1Right {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow3Col1Right {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow3Col1Right {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow3Col1Right {
    from {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow3Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
}

@-moz-keyframes shrinkRow3Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
}

@-ms-keyframes shrinkRow3Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
}

@keyframes shrinkRow3Col1Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 256px;
        height: 45%;
        top: 60%;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

/* ----------------- Row 3 Col 2 Right ------------------------- */

@-webkit-keyframes expandRow3Col2Right {
    from {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-moz-keyframes expandRow3Col2Right {
    from {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-ms-keyframes expandRow3Col2Right {
    from {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@keyframes expandRow3Col2Right {
    from {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
}

@-webkit-keyframes shrinkRow3Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
}

@-moz-keyframes shrinkRow3Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
}

@-ms-keyframes shrinkRow3Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
}

@keyframes shrinkRow3Col2Right {
    from {
        width: 768px;
        height: 105%;
        top: 0px;
        left: 0px;
    }
    to {
        width: 512px;
        height: 45%;
        top: 60%;
        left: 256px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTopLeft {
    from {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTopLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes expandSmallViewTopLeft {
    from {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTopLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes expandSmallViewTopLeft {
    from {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTopLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
}

@keyframes expandSmallViewTopLeft {
    from {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTopLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 0%;
        left: 0%;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTopLeftBanner {
    from {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTopLeftBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes expandSmallViewTopLeftBanner {
    from {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTopLeftBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes expandSmallViewTopLeftBanner {
    from {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTopLeftBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
}

@keyframes expandSmallViewTopLeftBanner {
    from {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTopLeftBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
    to {
        width: 512px;
        height: 72.5%;
        top: 0%;
        left: 0%;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTopRight {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTopRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
}

@-moz-keyframes expandSmallViewTopRight {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTopRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
}

@-ms-keyframes expandSmallViewTopRight {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTopRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
}

@keyframes expandSmallViewTopRight {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTopRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 512px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTopRightBanner {
    from {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTopRightBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
}

@-moz-keyframes expandSmallViewTopRightBanner {
    from {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTopRightBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
}

@-ms-keyframes expandSmallViewTopRightBanner {
    from {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTopRightBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
}

@keyframes expandSmallViewTopRightBanner {
    from {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTopRightBanner {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 72.5%;
        top: 0%;
        left: 512px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewBottomLeft {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewBottomLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@-moz-keyframes expandSmallViewBottomLeft {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewBottomLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@-ms-keyframes expandSmallViewBottomLeft {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewBottomLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@keyframes expandSmallViewBottomLeft {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewBottomLeft {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewBottomRight {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewBottomRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
}

@-moz-keyframes expandSmallViewBottomRight {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewBottomRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
}

@-ms-keyframes expandSmallViewBottomRight {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewBottomRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
}

@keyframes expandSmallViewBottomRight {
    from {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewBottomRight {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 384px;
        height: 52.5%;
        top: 52.5%;
        left: 384px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTop1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTop1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
}

@-moz-keyframes expandSmallViewTop1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTop1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
}

@-ms-keyframes expandSmallViewTop1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTop1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
}

@keyframes expandSmallViewTop1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTop1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewTop2 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewTop2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
}

@-moz-keyframes expandSmallViewTop2 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewTop2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
}

@-ms-keyframes expandSmallViewTop2 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewTop2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
}

@keyframes expandSmallViewTop2 {
    from {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewTop2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 0%;
        left: 256px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewBottom1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewBottom1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@-moz-keyframes expandSmallViewBottom1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewBottom1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@-ms-keyframes expandSmallViewBottom1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewBottom1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

@keyframes expandSmallViewBottom1 {
    from {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewBottom1 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 256px;
        height: 52.5%;
        top: 52.5%;
        left: 0px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes expandSmallViewBottom2 {
    from {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-webkit-keyframes shrinkSmallViewBottom2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
}

@-moz-keyframes expandSmallViewBottom2 {
    from {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-moz-keyframes shrinkSmallViewBottom2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
}

@-ms-keyframes expandSmallViewBottom2 {
    from {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@-ms-keyframes shrinkSmallViewBottom2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
}

@keyframes expandSmallViewBottom2 {
    from {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
    to {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0%;
    }
}

@keyframes shrinkSmallViewBottom2 {
    from {
        width: 768px;
        height: 105%;
        top: 0%;
        left: 0px;
    }
    to {
        width: 512px;
        height: 52.5%;
        top: 52.5%;
        left: 256px;
    }
}

/*--------------------------------------------------------------*/

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeOut {
    opacity: 0;
}

#clipper:hover {
    width: 1000px;
    height: 1000px;
    cursor: pointer;
}

.se-handle {
    width: 50px;
    height: 50px;
    /*background-color: #ffffff;
    border: 1px solid #000000;*/
    background: url(../images/cornerHandle.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    position: absolute;
    z-index: 10000;
}

.lineClamp {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}


.audioControl {
    display: inline-block !important;
}

.disableIframe iframe {
    pointer-events: none !important;
}

html,
body {
    overflow: hidden;
}

.audioControl:hover {
    cursor: pointer;
    box-shadow: 0px 0px 2px 2px #cccccc;
}

.pageArticleTab {
    background-color: #555555;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    margin-top: -5px;
}

.browserBtn:hover {
    cursor: pointer;
}

#clippingmenu {
    background: white !important;
}

#clippingsContainer {
    min-height: 155px !important;
}

.desktoppageviewer .x-scroll-view {
    overflow: visible !important;
}

.page-tab-container .x-scroll-view {
    overflow: visible !important
}

.page-tab-container  .x-scroll-scroller-vertical {
    max-width: 40px !important;
}

#zoomout:hover,
#zoomin:hover {
    cursor: pointer;
}

.shortStory {
    overflow: hidden;
    position: relative;
    line-height: 14px;
    max-height: 42px;
    text-align: justify;
    margin-right: 0em;
    padding-right: 1em;
}

.shortStory:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 2px;
}

.shortStory:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background-color: rgb(238, 238, 238);
}

/*.bylineText{
     overflow:hidden;
     position:relative;
     line-height:14px;
     max-height:42px;
     text-align:justify;
     margin-right:0em;
     padding-right:1em;
 }

  .bylineText:before{
     content:'...';
     position:absolute;
     right:0;
     bottom:2px;
 }

 .bylineText:after{
     content:'';
     position:absolute;
     right:0;
     width:1em;
     height:1em;
     margin-top:0.2em;
     background-color: rgb(238, 238, 238);
 }

 .subheadlineText{
     overflow:hidden;
     position:relative;
     line-height:16px;
     max-height:42px;
     text-align:justify;
     margin-right:0em;
     padding-right:1em;
 }

  .subheadlineText:before{
     content:'...';
     position:absolute;
     right:0;
     bottom:2px;
 }

 .subheadlineText:after{
     content:'';
     position:absolute;
     right:0;
     width:1em;
     height:1em;
     margin-top:0.2em;
     background-color: rgb(238, 238, 238);
 }*/

.tickerLive {
    z-index: 1000000;
    position: relative !important;
}

/*@media screen and (orientation:portrait){*/

.hideWrapper {
    display: none;
}

/*}*/

.showWrapper {
    display: inline-block;
}

.fullStoryLink:hover {
    cursor: pointer;
}

.modal {
    z-index: 9 !important;
}

.articleViewBtn:hover {
    cursor: pointer;
}

.pointerCursor:hover {
    cursor: pointer;
}

.printImage {
    display: none;
    height: 100%;
    max-width: 100%;
}

.readerpuzzle .font13 {
    display: none;
}

.puzzleArchive {
    background-color: white !important;
    padding: 0px 0px 10px 0px;
}

.tooltipHide {
    display: none !important;
}

.hideItem {
    display: none !important;
}

.pagesTabNewsday {
    left: -85px;
    border-top-right-radius: 0 !important;
    transform: rotate(90deg);
    background-color: transparent !important;
    border-radius: 0 !important;
    font-size: 16px;
}

.browserBtnNewsday {
    background-color: rgba(0, 0, 0, 0.7);
    margin: 0px 0px 0px 5px;
    border-radius: 0 !important;
    font-size: 16px;
}

.squaredFour {
    width: 20px;
    margin: 20px auto;
    position: relative;
}

.squaredFour label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
}

.squaredFour label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squaredFour label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.squaredFour input[type=checkbox]:checked+label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.helperCheckbox {
    visibility: hidden;
}

.galleryInfo::-webkit-scrollbar {
    width: 12px;
    height: 90%;
}

.galleryInfo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    /*border-radius: 10px;*/
    background-color: rgb(75, 75, 75);
}

.galleryInfo::-webkit-scrollbar-thumb {
    /*border-radius: 10px;*/
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
    background-color: white;
}

.fullscreengalleryicon {
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url(../images/reader%20icons/expand-gallery-icon.png);
    background-position: center;
    background-size: 30px;
    background-repeat: no-repeat;
    height: 42px;
    width: 42px;
    /*margin:6px;*/
}

.articleiframe {
    -ms-user-select: text;
    user-select: text;
}

@media all and (orientation: portrait) {
    /*#toolbarIcon {
        display:none !important;
    }

    .toolbarIconRight {
        display:none !important;
    }*/
}

/*How To Screen desktop*/

@media screen
/*and (max-width:1200px)*/

and (max-height:900px) {
    .howTo-continue {
        top: 60% !important;
    }
    .touchscreenHowTo,
    .articleHowTo {
        bottom: -25vh !important;
    }
    .how-to-item * {
        font-size: 10pt !important;
    }
    .how-to-item .explainationTitle * {
        font-size: 11pt !important;
    }
}

@media screen and (max-height:650px) {
    .howTo-continue {
        top: 70% !important;
    }
    .touchscreenHowTo,
    .articleHowTo {
        bottom: -25vh !important;
    }
    .how-to-item * {
        font-size: 10pt !important;
    }
    .how-to-item .explainationTitle * {
        font-size: 11pt !important;
    }
}

@media screen and (max-height:660px) {
    .howToArticlesContainer {
        display: none;
    }
}

@media screen and (max-width: 880px) {
    .how-to-view-options {
        display: none !important;
    }
}

@media screen and (max-width: 810px) {
    .how-to-edition-options {
        display: none !important;
    }
}

@media screen and (max-width: 690px) {
    .how-to-view-options,
    .howToArticlesContainer {
        display: none !important;
    }
    .touchscreenHowTo,
    .articleHowTo {
        visibility: hidden;
    }
    .howTo-continue {
        top: initial !important;
    }
}

.iframe-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

.media-image {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visiblity: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    /*object-fit:contain;
    object-position:center;*/
}

.zoomed-out .media-image {
    -webkit-backface-visibility: unset !important;
    backface-visiblity: unset !important;
    -ms-transform: unset !important;
    -webkit-transform: unset !important;
    -moz-transform: unset !important;
    transform: unset !important;
}

.wrapper-outer {
    display: inline-block;
}

.wrapper-inner {
    padding: 50% 0;
    height: 0;
}

.pageTabInner {
    display: block !important;
    /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
    white-space: nowrap;
    width: auto;
    transform-origin: top left;
    /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
    /*transform: rotate(-90deg) translate(-100%);*/
    transform: rotate(90deg) translate(0, -100%);
    margin-top: -50%;
    padding: 5px;
}

.pageTabInner.anti-clockwise-rotate {
    transform: rotate(-90deg) translate(-100%) !important;
}

.justify-right, .justify-right .thumbInfo, .justify-right input[type=text] {
    text-align: right;
}

.articlepopover.justify-right .content, .article-print.justify-right .content {
    direction: rtl;
}

    .justify-right .reader-items-container div.x-inner, .justify-right #menuSharing div.x-inner {
        display: flex !important;
        flex-direction: row-reverse !important;
        flex-wrap: wrap;
    }

    .justify-right .menuToggle {
        right: initial !important;
        left: 10px !important;
    }

.fullscreen-article-popover-item-content .x-innerhtml, .template-article-area .x-innerhtml, .template-article-area .x-inner {
    height: 100%;
}



.text-size-slider {
    margin: 0;
    display: block;
    width: 100%;
    height: 3px !important;
    background: #002339;
    outline: none;
    opacity: 1;
    top: 50%;
    position: absolute;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0px;
    transform: translate3d(0px, -100%, 0);
}

.text-size-slider:hover {
    opacity: 1;
}

    .text-size-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px !important;
        height: 25px !important;
        background-color: #FFFFFF !important;
        cursor: pointer;
        border-radius: 50% !important;
        border: none;
        outline: none;
        top: 0px !important;
        margin-top: 0px !important;
        transform:translate3d(0px, -50%, 0);
    }

    .text-size-slider::-webkit-slider-runnable-track {
        background-color: transparent !important;
        height: 10px !important;
        margin-top: 4px !important;
    }

    .text-size-slider::-moz-range-thumb {
        width: 25px !important;
        height: 25px !important;
        background-color: #FFFFFF !important;
        cursor: pointer;
        border-radius: 50% !important;
        border: none;
        outline: none;
        top: 0px !important;
        margin-top: -3px;
        transform: translate3d(0px, 0%, 0) !important;
        position:relative !important;
    }

        .text-size-slider::-moz-range-thumb::after {
            transform: translate3d(0px, 0%, 0) !important;
        }

        .text-size-slider::-moz-range-track {
            background-color: transparent !important;
            height: 10px !important;
            margin-top: 15px !important;
            width: 100%;
        }

.share-slider-button .x-innerhtml {
    height: 100%;
    padding: 12px 10px;
}

.share-slider .shareOptions .x-scroll-indicator, .content-browser-section-scroller .x-scroll-indicator {
opacity: 0 !important;
}

.share-slider-button:first-child {
    margin-left: auto !important;
}

.share-slider-button:last-child {
    margin-right: auto !important;
}

@media screen and (max-width: 400px) {
    .article-control-button {
        margin: 14px 2px !important;
    }
}

@media screen and (max-width: 365px) {
    .fullscreen-article-logo {
        height: 22px !important;
        width: 110px !important;
    }

    .article-control-button {
        margin: 14px 1px !important;
    }
}

.selected-tab {
    background-color: #FFFFFF;
    border-radius: 6px;
    color: #000000;
    box-shadow: 0 1px 2px #fff, 0 -1px 1px #cbc8c8, inset 0 -1px 1px rgb(112 112 112 / 50%), inset 0 1px 1px rgba(255,255,255,0.8);
}

.archive-spinner {
    background: none !important;

}

.empty-advert-placeholder {
    display: none;
    position:relative;
    width:100%;
    height:100%;
}

.empty-advert-placeholder .empty-advert-text-container {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    width:603px;
    height:334px;
    max-width:90vw;
    max-height:-webkit-calc(90 * (100vh - 40px) / 100);
    max-height:calc(90 * (100vh - 40px) / 100);
    text-align:center;
    border:2px solid #ACACAC;
    color:#878787;
    font-family:inherit;
    font-size:16px;
}

.empty-advert-placeholder .empty-advert-text-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.empty-advert-placeholder .empty-advert-text {
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
}

.not-rendered-advert.empty-advert-placeholder {
    display: block;
}

.inline-article-media {
    text-align: center;
    position: relative;
    transition: 0.5s ease opacity;
    /*display: inline-block;*/
    /*transform: translateZ(0);*/
}

audio.inline-article-media::-webkit-media-controls
/*audio.inline-article-media::-webkit-media-controls-panel*/ {
    /*width: 100%;
    position:relative;*/
}

@media only screen and (max-width: 375px) {
    .hide-below-375px {
        display: none !important;
    }
}