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

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

.creative {
    min-height: 340px;
    width: 100%;
    position: relative;
    z-index: 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 .block .image {
    display: block;
    margin: 0;
    }

.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 ---------- +++++++++ */
.copy {
    color: #fff;
    font-family: 'DIN1451W01-Mittelschrif', Arial, sans-serif;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    }
    
.copy h1,
.copy h2,
.copy h3,
.copy h4,
.copy h5 {
    font-size: 1em;
    text-transform: uppercase;
    }
    
.copy p,
.copy li {
    font-size: .875em;
    }
    
.copy.light .inner {
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    }
    
.copy.dark .inner {
    background: rgba(255, 255, 255, 0.65);
    color: #000;
    }
    
.copy .cta_container {
    text-align: center;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    }
    

/* REVEAL FUNCTIONALITY */
.copy.reveal .inner,
.copy.reveal .hide,
.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;
    }

.copy.reveal {
    height: 100%;
    width: 100%;
    top: auto;
    bottom: 0;
    }
    
.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,
.copy.reveal:hover .inner {
    height: 5.5em; /* change per project needs */
    }
    
.copy .hide,
.copy .hidden {
    height: 0;
    opacity: 0;
    }

.mobile .copy.reveal .hide,
.mobile .copy.reveal .hidden,
.copy.reveal:hover .hide,
.copy.reveal:hover .hidden {
    height: auto;
    opacity: 1;
    }
    
.copy.reveal .cta_container {
    position: absolute;
    top: auto;
    bottom: 1em;
    left: 0;
    }



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

.cta_container .cta {
    cursor: pointer;
    }


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

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

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


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

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

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

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


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

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

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

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

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

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

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

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


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

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




/* +++++++++ ---------- QUICKSHOP ---------- +++++++++ */
.quickshop,
.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;
    }

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

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



/* +++++++++ ---------- MULTISHOP ---------- +++++++++ */
.multishop {
    display: none;
    width: 400px; /* may need to change on individual basis */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    }
    
.multishop.available {
    display: block;
    }
    
.multishop .qsindicator {
    display: block;
    }

.multishop .qsproducts {
    display: none;
    }

.multishop.active .qsproducts {
    display: block;
    }

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

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

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

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

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

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




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

.slider .rsOverflow { overflow: hidden; }
.slider .rsOverflow .rsSlide { overflow: hidden; }
.slider .rsOverflow .rsContainer { overflow: visible; }


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


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

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


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

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

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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




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

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


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


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


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

.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 .dark .light .playVideo,
.creative .light .playVideo {
    background-position: 0px -100px;
    }

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






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

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

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

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

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

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

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

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

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

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

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

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

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