﻿.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;*/
    position:absolute;
    top:0px;
    right: 0px;
}

.gallery-ad-container {
    text-align:center;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

.fg-gallery-mpu {
    width:300px !important;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate3d(-50%, -50%, 0px);
    -ms-transform:translate3d(-50%, -50%, 0px);
    -moz-transform:translate3d(-50%, -50%, 0px);
    transform: translate3d(-50%, -50%, 0px);
}

.scrolling-page .wrap-ad {
    pointer-events: none !important;
    display: block !important;
}

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

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

.x-chrome .articles-pages-container::-webkit-scrollbar {
    width: 100%;
    height:8px;
}
 
.x-chrome .articles-pages-container::-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);
}
 
.x-chrome .articles-pages-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color:white;
}
.x-safari .articles-pages-container::-webkit-scrollbar {
    width: 100%;
    height:8px;
}
 
.x-safari .articles-pages-container::-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);
}
 
.x-safari .articles-pages-container::-webkit-scrollbar-thumb {
    /*border-radius: 10px;*/
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
    background-color:white;
}

.x-firefox.x-macos .articles-pages-container {
    background-color: transparent !important;
} 

.x-firefox.x-macos #ext-articlescontainer-1 {
    background-color: rgba(0, 0, 0, 0.8);
}

.x-firefox.x-macos .section-toolbar {
    background-color: transparent !important;
}

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


html.iphone {
    position: fixed !important;
    bottom: 0;
    width:100%;
    max-height:100% !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;
}

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

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

.selectBox{
    
}

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

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

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

@media screen and (orientation: portrait) {
    .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%;
    }

    .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 {
    position: relative;
    display:inline-block;
}

.tileDiv {
    position: absolute;
    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;
}

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

.tileDiv2 {
    position: absolute;
    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;
}

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

.tileImage {
    display:none;
}

@media screen and (orientation: portrait) {
    .landscapeimage {
        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);
}

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

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

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

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

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

 #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;
}

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

@media all and (orientation: portrait) {

    #toolbarIcon {
        display: none !important;
    }

    .toolbarIconRight {
        display: none !important;
    }

    .howto-edition-options {
        display: none;
    }
}

@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: 890px) {
    .how-to-view-options,
    .howto-dps {
        display: none !important;
    }

    .how-to-edition-options {
        display: none !important;
    }

    .howToArticlesContainer {
        display: none;
    }
}

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

@media screen and (max-width: 690px) {
    .how-to-view-options,
    .howToArticlesContainer,
    .howto-dps {
        display: none !important;
    }

    .touchscreenHowTo,
    .articleHowTo {
        visibility: hidden;
    }

    .howTo-continue {
        top: initial !important;
    }
}