/* ******************** ------------------------- GENERAL STYLES ------------------------- ******************** */
#forRTMSOnly {
    float: right;
    }

.creative .quickshop,
.creative .qsindicator,
.creative .slider .rsArrow,
.creative .slider .rsNav .rsBullet,
.creative .playVideo {
    background-image: url(img/2015_sprite.png);
    background-repeat: no-repeat;
    }


/* ============ HOMEPAGE SPECIFIC ============ */
/* gsi overrides - US */
.homepage #site-header { 
    position: relative;
    height: 130px;
    }
    
.homepage #site-header #logo { 
    margin-top: 0;
    position: relative;
    top: 45px;
    }
    
/* gsi overrides - EU */
#page-home.page {
    width: 100%;
}

#home #rl-topnav {
    position: relative;
    height: 130px;
    }
    
#home #rl-logo {
    margin-top: 0;
    position: relative;
    top: 45px;
    }
    
/* lg styles */
.creative.homepage {
	width: 100%;
	height: auto;
    }
    
.creative.desktop.homepage, 
.creative.tablet.homepage {
    min-width: 960px;
    max-width: 1400px;
    margin: 0px auto;
    }

.creative.homepage > .inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    }
    
.creative.desktop.homepage > .inner {
	left: 50%;
	/*margin-left: -700px;
	max-width: 116.667em;*/
    -ms-transform: translate(-50%); 
    -moz-transform: translate(-50%); 
    -webkit-transform: translate(-50%); 
    -o-transform: translate(-50%);
    transform: translate(-50%);
    }
    
.creative.tablet.homepage > .inner,
.creative.phone.homepage > .inner {
    left: inherit;
    margin-left: inherit;
    max-width: inherit;
    }
/* ============ end HOMEPAGE SPECIFIC ============ */


.creative .content {
    clear: none;
    width: auto;
    border: none;
    margin: 0;
    }
    
.creative .block {
    margin-bottom: 2px;
    position: relative;
    }

.creative .block .inner {
    position: relative;
    }

.creative .block:last-child {
    margin-bottom: 0px;
    }

.creative .group {
    position: relative;
    }

.creative .image {
    display: block;
    margin: 0;
    }

.creative.phone .image {
	width: 100%;
	height: auto;
    }

.creative .ctahotspot {
    background: url('img/blank.gif') 0 0 repeat;
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    }

.creative .tracking {
    display: none;
    /* used for non-dynamic content when there are span tags with class of "tracking" added to each CTA */
    }




/* +++++++++ ---------- LOADING ---------- +++++++++ */
.creative .inner {
    opacity: 0;
    -webkit-transition: opacity .3s ease-out 0s;
    -moz-transition: opacity .3s ease-out 0s;
    -ms-transition: opacity .3s ease-out 0s;
    -o-transition: opacity .3s ease-out 0s;
	transition: opacity .3s ease-out 0s;
    }


/* ----- LOAD TYPES ----- */
.load-none .inner,
.load-none .block .inner {
    opacity: 1;
    }

.load-all.loaded .inner,
.load-all.loaded .block .inner {
    opacity: 1;
    }

.load-block > .inner,
.load-block .block.loaded .inner {
    opacity: 1;
    }

.load-lazy > .inner,
.load-lazy .block.loaded .inner {
    opacity: 1;
    }


/* ----- LOADER ----- */
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loadgraphic {
    display: block;
    opacity: 1;
    height: 40px;
    margin: -20px 0 0 -20px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 500000;

    border-radius: 100%;
    border: 5px solid rgba(205, 205, 205, 0.5);
    border-bottom-color: #535353;
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;

    -webkit-transition: opacity .2s ease-in 0s;
    -moz-transition: opacity .2s ease-in 0s;
    -ms-transition: opacity .2s ease-in 0s;
    -o-transition: opacity .2s ease-in 0s;
	transition: opacity .2s ease-in 0s;
    /* used to show loading gif seen before backgrounds load */
    }

.load-all .loadgraphic {
    margin-top: 0;
    top: 200px;
    }

.loaded .loadgraphic {
    opacity: 0;
    z-index: -1;
    /* removes loader after all images loaded */
    }



/* +++++++++ ---------- COPY ---------- +++++++++ */
.creative .copy {
    color: #fff;
    font-family: 'DIN1451W01-Mittelschrif', Arial, sans-serif;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    }

.creative .copy h1,
.creative .copy h2,
.creative .copy h3,
.creative .copy h4,
.creative .copy h5 {
    font-size: 1em;
    text-transform: uppercase;
    }

.creative .copy p,
.creative .copy li {
    font-size: .875em;
    }

.creative .copy.light .inner {
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    }

.creative .copy.dark .inner {
    background: rgba(255, 255, 255, 0.65);
    color: #000;
    }

.creative .copy .cta_container {
    text-align: center;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    }


/* REVEAL FUNCTIONALITY */
.creative .copy.reveal .inner,
.creative .copy.reveal .hide,
.creative .copy.reveal .hidden {
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -ms-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
	transition: all .2s linear 0s;
    }

.creative .copy.reveal {
    height: 100%;
    width: 100%;
    top: auto;
    bottom: 0;
    }

.creative .copy.reveal .inner {
    height: 2.7em; /* change per project needs */
    width: 98%;
    padding: 1.5em 1% 3em;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    }

.mobile .copy.reveal .inner,
.creative .copy.reveal:hover .inner {
    height: 5.5em; /* change per project needs */
    }

.creative .copy .hide,
.creative .copy .hidden {
    height: 0;
    opacity: 0;
    }

.mobile .copy.reveal .hide,
.mobile .copy.reveal .hidden,
.creative .copy.reveal:hover .hide,
.creative .copy.reveal:hover .hidden {
    height: auto;
    opacity: 1;
    }

.creative .copy.reveal .cta_container {
    position: absolute;
    top: auto;
    bottom: 1em;
    left: 0;
    }



/* +++++++++ ---------- CTAS ---------- +++++++++ */
.creative .cta_container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    }

.creative .cta_container .cta {
    cursor: pointer;
    }


/* ----- BUTTONS ----- */
.creative .cta_container .cta.button,
.creative .cta_container .cta.button span {
    font-family: Arial, Verdana, Sans-Serif !important;
    font-size: 12px !important;
    }

.creative .cta_container .cta.button {
    background: #000;
    border-radius: 5px;
    color: #fff;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }

.creative .cta_container .cta.button.light {
    background: #fff;
    color: #000;
    }


/* ----- BUTTONS - FULL (inherits from buttons) ----- */
.creative .cta_container.full {
    background: #000;
    height: 60px;
    line-height: 56px;
    width: 100%;
    position: relative;
    }

.creative .cta_container.full.light {
    background: #fff;
    }

.creative .cta_container.full .cta.button.full {
    border-radius: 0px;
    display: block;
    font-weight: bold;
    height: 100%;
    padding: 0px 0px;
    width: 100%;
    }

.creative .cta_container.full .cta.button.full:after {
    content: ">";
    font-size: 125%;
    padding-left: 7px;
    position: relative;
    top: 1px;
    }


/* ----- LINKS ----- */
.creative .cta_container .cta.link,
.creative .cta_container .cta.link span {
    font-family: Arial, Verdana, Sans-Serif !important;
    font-size: 12px !important;
    }

.creative .cta_container .cta.link {
    color: #000;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    }

.creative .cta_container .cta.link .text {
    text-decoration: none;
    }

.creative .cta_container .cta.link:after {
    /*content: ">";
    padding-left: 5px;*/

    content: "\e600";
    font-family: 'RL icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 95%;
    top: 0px;
    padding-left: 6px;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

.creative .cta_container .cta.link.light {
    color: #fff;
    }

.creative .cta_container .cta.link.large,
.creative .cta_container .cta.link.large span {
    font-size: 14px !important;
    }

.creative .cta_container .cta.link.bold {
    font-weight: bold;
    }

.creative .cta_container .cta.link.underline .text {
    text-decoration: underline;
    }


/* ----- HOTSPOT ----- */
.creative .cta_container .cta.hotspot {
    background: transparent;
    display: block;
    height: 100%;
    width: 100%;
    }

.creative .cta_container .cta.hotspot .text {
    display: none;
    }




/* +++++++++ ---------- GROUPS ---------- +++++++++ */
.creative .group.inline { display: inline-block; vertical-align: top; }
.creative .group.multicta { width: 100%; position: absolute; top: 0px; left: 0; z-index: 2; }
.creative .group.multicta .cta_container { display: inline-block; vertical-align: top; margin: 0 15px; width: auto; position: relative; }
.creative .group.multicta.center { text-align: center; }
.creative .group.multicta.center .cta_container { margin: 0 10px; }
.creative .group.multicta.left { text-align: left; }
.creative .group.multicta.left .cta_container { margin: 0 15px 0 0; }
.creative .group.multicta.right { text-align: right; }
.creative .group.multicta.right .cta_container { margin: 0 0 0 15px; }




/* +++++++++ ---------- QUICKSHOP ---------- +++++++++ */
.creative .quickshop,
.creative .qsindicator {
    background-position: -100px -160px;
    cursor: pointer;
    display: none;
    height: 27px;
    width: 27px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    /* fixes safari issue for these when they are contained within a royalslider */
    -webkit-transform-style: preserve-3d;
    }

/*.creative .quickshop:hover {
    background-position: 0px -160px;
    }*/

.creative .quickshop.available {
    display: block; /*class shown via shopdot js*/
    }



/* +++++++++ ---------- MULTISHOP ---------- +++++++++ */
.creative .multishop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    }

.creative .multishop.available {
    display: block;
    }

.creative .multishop .qsindicator {
    display: block;
    position: relative;
    }

.creative .multishop .qsproducts {
    display: none;
    position: absolute;
    top: 0; /* overridden by dev class from creative.js */
    left: 0; /* overridden by dev class from creative.js */
    }

.creative .multishop.active .qsproducts {
    display: block;
    width: 400px; /* overridden by dev class from creative.js */
    z-index: 4;
    }

/* size and position classes from developer in creative.js declaration */
.creative .multishop.top .qsproducts { top: 0; }
.creative .multishop.left .qsproducts { left: 0; text-align: left; }
.creative .multishop.bottom .qsproducts { top: auto; bottom: -3px; }
.creative .multishop.right .qsproducts { left: auto; right: 0; text-align: right; }
.creative .multishop.centerY .qsproducts { top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.creative .multishop.centerX .qsproducts { text-align: center; left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
.creative .multishop.center .qsproducts { text-align: center; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.creative .multishop.short .qsproducts { width: 300px; }
.creative .multishop.medium .qsproducts { width: 450px; }
.creative .multishop.long .qsproducts { width: 600px; }

.creative .multishop .quickshop {
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 2px 0px #ccc;
    -webkit-box-shadow: 2px 2px 2px 0px #ccc;
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
    color: #000;
    height: auto;
    margin-bottom: 5px;
    padding-right: 15px;
    position: relative;
    text-decoration: none;
    width: auto;
    }

.creative .multishop .quickshop.multi:empty {
    display: none; /* fixes issue where sometimes the quickshop plugin doesnt add class available to stuff that has data returned from cat services */
    }

.creative .multishop.available .quickshop {
    display: inline-block; /*class shown via shopdot js*/
    }

.creative .multishop .quickshop .prodDetail {
    display: inline-block;
    vertical-align: middle;
    }

.creative .multishop .quickshop .prodImage {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 10px;
    }

.creative .multishop .quickshop .prodTitle {
    border-right: 1px solid #ccc;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    padding-right: 10px;
    }

.creative .multishop .quickshop .prodPrice {
    font-size: 16px;
    }




/* +++++++++ ---------- PAGE BGs ---------- +++++++++ */
/* ----- GLOBAL ELEMENT OVERRIDES (header, nav, sidenav, footer) ----- */
/* US - white background */
.pbg-chrome-white #site-header { background: #fff; }
.pbg-chrome-white #wrapper #site-content { padding-top: 132px !important; }
.pbg-chrome-white #footerMain { margin: 0 auto; background: #fff; width: 960px; }
.pbg-chrome-white #footerBanner { padding: 0 0 20px 0; margin: 0 auto; width: 940px; }

/* US - black background */
.pbg-chrome-black #site-header { background: #000; }
.pbg-chrome-black #wrapper #site-content { padding-top: 132px !important; }
.pbg-chrome-black #footerMain { margin: 0 auto; background: #000; width: 960px; }
.pbg-chrome-black #footerBanner { padding: 0 0 20px 0; margin: 0 auto; width: 940px; }

/* US - transparent */
.pbg-chrome-transparent .navbtm,
.pbg-chrome-transparent .sidenav,
.pbg-chrome-transparent #JCTopShadow,
.pbg-chrome-transparent #JCwrapFTW { background: transparent; }
.pbg-chrome-transparent #wrapper #site-content { padding-top: 122px; }

/* EU - white background */
.pbg-chrome-white #content-wrap { background: #fff; }
.pbg-chrome-white #footer { background: #fff; }

/* EU - black background */
.pbg-chrome-black #content-wrap { background: #000; }
.pbg-chrome-black #footer { background: #000; }

/* EU - transparent */
.pbg-chrome-transparent #main-container.Top2col, 
.pbg-chrome-transparent #main-container.Top2col #inner-container, 
.pbg-chrome-transparent #main-container.Top2col .bottom { transparent; }


/* ----- BACKGROUNDS ----- */
/* creates fade transition for page background elements */
.pagebgs {
    opacity: 0;
    -webkit-transition: opacity .3s linear 0s;
    -moz-transition:    opacity .3s linear 0s;
    -ms-transition:     opacity .3s linear 0s;
    -o-transition:      opacity .3s linear 0s;
    }
    
/* handle states of pagebgs */
.pagebgs.loaded {
    opacity: 1;
    }
    
.pagebg.inview {
    opacity: 1;
    z-index: -1;
    }
    
.pagebgs.sticky .pagebg {
    position: fixed;
    top: 0;
    }
    
.pbg-sticky-true .pagebg {
    top: 132px;
    }
    
/* general pagebg styles */
.pagebg {
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: fixed;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0;
    
    -webkit-transition: opacity .3s linear 0s;
    -moz-transition:    opacity .3s linear 0s;
    -ms-transition:     opacity .3s linear 0s;
    -o-transition:      opacity .3s linear 0s;
    }
    
/* size overrides */
.pagebg.contain { background-size: contain; }
.pagebg.cover   { background-size: cover; }
.pagebg.fixed   { background-size: fixed; }

/* bg position overrides */
.pagebg.center.center   { background-position: 50% 50%; }
.pagebg.center.left     { background-position: 0% 50%; }
.pagebg.center.right    { background-position: 100% 50%; }
.pagebg.top.center      { background-position: 50% 0%; }
.pagebg.top.left        { background-position: 0% 0%; }
.pagebg.top.right       { background-position: 100% 0%; }
.pagebg.bottom.center   { background-position: 50% 100%; }
.pagebg.bottom.left     { background-position: 0% 100%; }
.pagebg.bottom.right    { background-position: 100% 100%; }

/* position overrides */
.pagebg.pos-absolute { position: absolute; }
.pagebg.pos-fixed { position: fixed; }
    
    
    
    
    
/* +++++++++ ---------- IMG LOOP ---------- +++++++++ */


/* ----- 2 FRAME LOOP ----- */
@keyframes imgloop2 {
  0%   { left: 0 }
  50%   { left: 0 }
  50.01%   { left: -100% }
  100% { left: -100%}
}
@-webkit-keyframes imgloop2 {
  0%   { left: 0 }
  50%   { left: 0 }
  50.01%  { left: -100% }
  100% { left: -100%}
}


/* ----- 3 FRAME LOOP ----- */
@keyframes imgloop3 {
  0%   { left: 0 }
  33.33%   { left: 0 }
  33.34%   { left: -100% }
  66.33%   { left: -100% }
  66.34%   { left: -200% }
  100% { left: -200% }
}
@-webkit-keyframes imgloop3 {
  0%   { left: 0 }
  33.33%   { left: 0 }
  33.34%   { left: -100% }
  66.33%   { left: -100% }
  66.34%   { left: -200% }
  100% { left: -200% }
}


/* ----- 4 FRAME LOOP ----- */
@keyframes imgloop4 {
  0%   { left: 0 }
  25.00%   { left: 0 }
  25.01%   { left: -100% }
  50.00%   { left: -100% }
  50.01%   { left: -200% }
  75.00%   { left: -200% }
  75.01%   { left: -300% }
  100% { left: -300% }
}
@-webkit-keyframes imgloop4 {
  0%   { left: 0 }
  25.00%   { left: 0 }
  25.01%   { left: -100% }
  50.00%   { left: -100% }
  50.01%   { left: -200% }
  75.00%   { left: -200% }
  75.01%   { left: -300% }
  100% { left: -300% }
}


/* ----- 5 FRAME LOOP ----- */
@keyframes imgloop5 {
  0%   { left: 0 }
  20.00%   { left: 0 }
  20.01%   { left: -100% }
  40.00%   { left: -100% }
  40.01%   { left: -200% }
  60.00%   { left: -200% }
  60.01%   { left: -300% }
  80.00%   { left: -300% }
  80.01%   { left: -400% }
  100% { left: -400% }
}
@-webkit-keyframes imgloop5 {
  0%   { left: 0 }
  20.00%   { left: 0 }
  20.01%   { left: -100% }
  40.00%   { left: -100% }
  40.01%   { left: -200% }
  60.00%   { left: -200% }
  60.01%   { left: -300% }
  80.00%   { left: -300% }
  80.01%   { left: -400% }
  100% { left: -400% }
}

/* ----- 6 FRAME LOOP ----- */
@keyframes imgloop6 {
  0%   { left: 0 }
  16.66%   { left: 0 }
  16.67%   { left: -100% }
  33.32%   { left: -100% }
  33.33%   { left: -200% }
  49.98%   { left: -200% }
  49.99%   { left: -300% }
  66.64%   { left: -300% }
  66.65%   { left: -400% }
  83.30%   { left: -400% }
  83.31%   { left: -500% }
  100% { left: -500% }
}
@-webkit-keyframes imgloop6 {
    0%   { left: 0 }
    16.66%   { left: 0 }
    16.67%   { left: -100% }
    33.32%   { left: -100% }
    33.33%   { left: -200% }
    49.98%   { left: -200% }
    49.99%   { left: -300% }
    66.64%   { left: -300% }
    66.65%   { left: -400% }
    83.30%   { left: -400% }
    83.31%   { left: -500% }
    100% { left: -500% }
}

/* ----- 7 FRAME LOOP ----- */
@keyframes imgloop7 {
  0%   { left: 0 }
  14.29%   { left: 0 }
  14.30%   { left: -100% }
  28.58%   { left: -100% }
  28.59%   { left: -200% }
  42.87%   { left: -200% }
  42.88%   { left: -300% }
  57.16%   { left: -300% }
  57.17%   { left: -400% }
  71.45%   { left: -400% }
  71.46%   { left: -500% }
  85.74%   { left: -500% }
  85.75%   { left: -600% }
  100% { left: -600% }
}
@-webkit-keyframes imgloop7 {
    0%   { left: 0 }
  14.29%   { left: 0 }
  14.30%   { left: -100% }
  28.58%   { left: -100% }
  28.59%   { left: -200% }
  42.87%   { left: -200% }
  42.88%   { left: -300% }
  57.16%   { left: -300% }
  57.17%   { left: -400% }
  71.45%   { left: -400% }
  71.46%   { left: -500% }
  85.74%   { left: -500% }
  85.75%   { left: -600% }
  100% { left: -600% }
}

/* ----- 8 FRAME LOOP ----- */
@keyframes imgloop8 {
  0%   { left: 0 }
  12.50%   { left: 0 }
  12.51%   { left: -100% }
  25.00%   { left: -100% }
  25.01%   { left: -200% }
  37.50%   { left: -200% }
  37.51%   { left: -300% }
  50.00%   { left: -300% }
  50.01%   { left: -400% }
  62.50%   { left: -400% }
  62.51%   { left: -500% }
  75.00%   { left: -500% }
  75.01%   { left: -600% }
  87.50%   { left: -600% }
  87.51%   { left: -700% }
  100% { left: -700% }
}
@-webkit-keyframes imgloop8 {
  0%   { left: 0 }
  12.50%   { left: 0 }
  12.51%   { left: -100% }
  25.00%   { left: -100% }
  25.01%   { left: -200% }
  37.50%   { left: -200% }
  37.51%   { left: -300% }
  50.00%   { left: -300% }
  50.01%   { left: -400% }
  62.50%   { left: -400% }
  62.51%   { left: -500% }
  75.00%   { left: -500% }
  75.01%   { left: -600% }
  87.50%   { left: -600% }
  87.51%   { left: -700% }
  100% { left: -700% }
}

/* ----- 9 FRAME LOOP ----- */
@keyframes imgloop9 {
  0%   { left: 0 }
  11.11%   { left: 0 }
  11.12%   { left: -100% }
  22.22%   { left: -100% }
  22.23%   { left: -200% }
  33.33%   { left: -200% }
  33.34%   { left: -300% }
  44.44%   { left: -300% }
  44.45%   { left: -400% }
  55.55%   { left: -400% }
  55.56%   { left: -500% }
  66.66%   { left: -500% }
  66.67%   { left: -600% }
  77.77%   { left: -600% }
  77.78%   { left: -700% }
  88.88%   { left: -700% }
  88.89%   { left: -800% }
  100% { left: -800% }
}
@-webkit-keyframes imgloop9 {
  0%   { left: 0 }
  11.11%   { left: 0 }
  11.12%   { left: -100% }
  22.22%   { left: -100% }
  22.23%   { left: -200% }
  33.33%   { left: -200% }
  33.34%   { left: -300% }
  44.44%   { left: -300% }
  44.45%   { left: -400% }
  55.55%   { left: -400% }
  55.56%   { left: -500% }
  66.66%   { left: -500% }
  66.67%   { left: -600% }
  77.77%   { left: -600% }
  77.78%   { left: -700% }
  88.88%   { left: -700% }
  88.89%   { left: -800% }
  100% { left: -800% }
}

/* ----- 10 FRAME LOOP ----- */
@keyframes imgloop10 {
  0%   { left: 0 }
  10.00%   { left: 0 }
  10.01%   { left: -100% }
  20.00%   { left: -100% }
  20.01%   { left: -200% }
  30.00%   { left: -200% }
  30.01%   { left: -300% }
  40.00%   { left: -300% }
  40.01%   { left: -400% }
  50.00%   { left: -400% }
  50.01%   { left: -500% }
  60.00%   { left: -500% }
  60.01%   { left: -600% }
  70.00%   { left: -600% }
  70.01%   { left: -700% }
  80.00%   { left: -700% }
  80.01%   { left: -800% }
  90.00%   { left: -800% }
  90.01%   { left: -900% }
  100% { left: -900% }
}
@-webkit-keyframes imgloop10 {
  0%   { left: 0 }
  10.00%   { left: 0 }
  10.01%   { left: -100% }
  20.00%   { left: -100% }
  20.01%   { left: -200% }
  30.00%   { left: -200% }
  30.01%   { left: -300% }
  40.00%   { left: -300% }
  40.01%   { left: -400% }
  50.00%   { left: -400% }
  50.01%   { left: -500% }
  60.00%   { left: -500% }
  60.01%   { left: -600% }
  70.00%   { left: -600% }
  70.01%   { left: -700% }
  80.00%   { left: -700% }
  80.01%   { left: -800% }
  90.00%   { left: -800% }
  90.01%   { left: -900% }
  100% { left: -900% }
}

.creative .imgloop {
	overflow: hidden;
	position: relative;
    }
    
.creative .imgloop .loopinner {
    white-space: nowrap;
    }
    
.creative .imgloop .loop {
	display: inline-block !important;
	margin: 0;
	position: relative;
	vertical-align: top;
    }

.creative .imgloop2 .loop  {
	animation: imgloop2 2s infinite;
	-webkit-animation: imgloop2 2s infinite;
    }

.creative .imgloop3 .loop  {
	animation: imgloop3 3s infinite;
	-webkit-animation: imgloop3 3s infinite;
    }
    
.creative .imgloop4 .loop  {
	animation: imgloop4 4s infinite;
	-webkit-animation: imgloop4 4s infinite;
    }
    
.creative .imgloop5 .loop  {
	animation: imgloop5 5s infinite;
	-webkit-animation: imgloop5 5s infinite;
    }

.creative .imgloop6 .loop  {
    animation: imgloop6 6s infinite;
    -webkit-animation: imgloop6 6s infinite;
    }

.creative .imgloop7 .loop  {
    animation: imgloop7 7s infinite;
    -webkit-animation: imgloop7 7s infinite;
    }

.creative .imgloop8 .loop  {
    animation: imgloop8 8s infinite;
    -webkit-animation: imgloop8 8s infinite;
    }

.creative .imgloop9 .loop  {
    animation: imgloop9 9s infinite;
    -webkit-animation: imgloop9 9s infinite;
    }

.creative .imgloop10 .loop  {
    animation: imgloop10 10s infinite;
    -webkit-animation: imgloop10 10s infinite;
    }





/* +++++++++ ---------- SLIDER ---------- +++++++++ */
.creative .slider {
    height: 100%; /*overwritten from slide image height in page by layoutgenerator.js*/
    width: 100%; /*overwritten from slide image width in page by layoutgenerator.js*/
    position: relative;
    z-index: 1;
    }

.creative .slider .rsOverflow { overflow: hidden; }
.creative .slider.sizedFromImage .rsOverflow { width: 100% !important; height: 100% !important; }
.creative .slider .rsOverflow .rsSlide { overflow: hidden; }
.creative .slider .rsOverflow .rsContainer { overflow: visible; }


/* ----- SLIDE ----- */
.creative .slider .slide {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    }


/* ----- ARROWS ----- */
.creative .slider .rsArrow {
    height: 42px;
    margin: -20px 0px 0px 0px;
    width: 42px;
    position: absolute;
    top: 50%;
    z-index: 5;
    }

.creative .slider .rsArrowDisabled {
    display: none!important;
    }


/* left arrow */
.creative .slider .rsArrowLeft {
    left: 11px;
    background-position: -1px 0px;
    }

.creative .slider .rsArrowLeft:hover {
    background-position: -1px -45px;
    }

.creative .slider.light .rsArrowLeft {
    background-position: -100px 0px;
    }

.creative .slider.light .rsArrowLeft:hover {
    background-position: -100px -45px;
    }


/* right arrow */
.creative .slider .rsArrowRight {
    right: 10px;
    background-position: -50px 0px;
    }

.creative .slider .rsArrowRight:hover {
    right: 10px;
    background-position: -50px -45px;
    }

.creative .slider.light .rsArrowRight {
    background-position: -151px 0px;
    }

.creative .slider.light .rsArrowRight:hover {
    background-position: -151px -45px;
    }


/* ----- PAGER ----- */
.creative .slider .rsNav {
    height: 12px;
    opacity: 1;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 14px;
    z-index: 3;
    }

.creative .slider .rsNav .rsBullet {
    background-position: -202px -201px;
    cursor: pointer;
    height: 11px;
    margin: 0px 5px;
    padding: 0px;
    width: 11px;
    display: inline-block;
    *display: inline;
    zoom: 1;
    }

.creative .slider .rsNav .rsBullet.rsNavSelected {
    background-position: -182px -201px;
    }


/* phone specific styles to match brandingbrand */
.phone .slider {
    padding-bottom: 35px;
    }
    
.phone.sale .slider .rsNav {
    display: block !important; /* done because of issue on the HP where display:none!important was used for the rsNav. On rlmobile these styles are still in the page when a new page is loaded and therefore the important rule takes precedence over the standard styles causing a conflict */
    }

.phone .slider .rsNav {
    clear: both;
    height: 12px;
    opacity: 1;
    padding-top: 11px;
    text-align: center;
    width: 100%;
    position: relative;
    bottom: 0px;
    z-index: 3;
    }

.phone .slider .rsNav .rsBullet {
    width: 11px;
    height: 11px;
    display: inline-block;
    background: #666;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    margin: 0 6px;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    }

.phone .slider .rsNav .rsBullet.rsNavSelected {
    background: #000;
    background: rgba(0,0,0,0.9);
    }

/*.slider.light .rsBullet {
    background-position: 0px -201px;
    }

.slider.light .rsBullet.rsNavSelected {
    background-position: -21px -201px;
    }*/


/* ----- TABS ----- */
.creative .slider .tabs {
    display: none;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 3;
    }

.creative .slider.showTabs .tabs {
    display: block;
    }

.creative .slider.showTabs .tabs .tab {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    }

/*.creative .slider.showTabs .tabs .tab .text {
    display: none;
    }*/

.creative .slider .tabText {
    display: none; /* placed in each slide via JS, used by JS to fill actual tabs with text from each slide */
    }


/* ----- INDICATOR ----- */
.creative .slider .rsIndicator {
    display: none;
    opacity: 1;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 3;
    }

.creative .slider.showIndicator .rsIndicator {
    display: block;
    }




/* +++++++++ ---------- VIDEOS ---------- +++++++++ */
.creative .video_container,
.creative .video_container .vidContainer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }

.creative .video_container .vidContainer {
    z-index: 1;
    }


/* ----- TYPE: BACKGROUND ----- */
.creative .video_container.type_background .vidContainer {
    height: 100%;
    top: 0px;
    z-index: 1;
    }


/* ----- TYPE: INLINE ----- */
.creative .video_container.type_inline .vidContainer {
    height: 107.5%;
    top: -7.5%;
    z-index: 4;
    }


/* ----- TYPE: OVERLAY ----- */
.creative .video_container.type_overlay .vidContainer {
    height: 107.5%;
    top: -7.5%;
    z-index: 4;
    }

.creative .vidContainer.modal-true {
    height: 107.5%;
    top: -7.5%;
    }


/* ----- PLAY BUTTON ----- */
.creative .playVideo {
    background-color: transparent;
    background-position: -100px -100px;
    display: block;
    height: 53px;
    padding: 0;
    text-indent: -9999px;
    width: 74px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    }

.creative .light .dark .playVideo,
.creative .light .playVideo {
    background-position: 0px -100px;
    }

.creative .dark .light .playVideo,
.creative .dark .playVideo {
    background-position: -100px -100px;
    }





/* ******************** ------------------------- CUSTOM GRID STYLES ------------------------- ******************** */
.creative .customGrid .slider {
    height: 520px !important;
    width: 100% !important;
    }

.creative .customGrid .slider .rsBullets {
    display: none;
    }

.creative .customGrid .product {
    display: inline-block;
    margin-right: 2px;
    padding-bottom: 12px;
    position: relative;
    vertical-align: top;
    width: 233.5px;
    }

.creative .customGrid .product:last-child {
    margin-right: 0px;
    }

.creative .customGrid .product .image-shots {
    position: relative;
    }

.creative .customGrid .product .image-shots .gridimg {
    display: inline;
    height: auto;
    width: 100%;
    display: none;
    }

.creative .customGrid .product .image-shots .gridimg.active {
    display: inline;
    }

.creative .customGrid .product .details {
    color: #494949;
    font-family:"Univers LT W01 45 Light";
    font-size: 13px;
    padding: 0px 0 15px;
    text-align: center;
    }

.creative .customGrid .product .details .brand img {
    height: auto;
    width: 100%;
    }

.creative .customGrid .product .details .price {
    margin-top: 4px;
    }

.creative .customGrid .product .image-patterns {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    }

.creative .customGrid .product .image-patterns .gridimg.pattern {
    cursor: pointer;
    display: inline;
    margin: 0 .5px;
    }

.creative .customGrid .product .image-patterns .gridimg.pattern:hover {
    -webkit-box-shadow: 0 0 10px 0 #adadad;
    box-shadow: 0 0 10px 0 #adadad;
    }