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


/* ============ HOMEPAGE SPECIFIC ============ */
.creative.homepage {
	width: 100%;
	height: auto;
    }
    
.creative.desktop.homepage, .creative.tablet.homepage {
    min-width: 6em;
    top: 10.833em; /*environmentmanager.css also has this value applied initially to account for the loading phase where we're waiting for this CSS file to load but we want to show the user something is happening. It gets removed once this file is loaded though.*/
    }

.creative.homepage > .inner {
    position: relative;
    overflow: hidden;
    }
    
.creative.desktop.homepage > .inner {
	left: 50%;
	margin-left: -700px;
	max-width: 116.667em;
    }
    
.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 ---------- +++++++++ */
.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;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    }

.multishop.available {
    display: block;
    }

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

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

.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 */
.multishop.top .qsproducts { top: 0; }
.multishop.left .qsproducts { left: 0; text-align: left; }
.multishop.bottom .qsproducts { top: auto; bottom: -3px; }
.multishop.right .qsproducts { left: auto; right: 0; text-align: right; }
.multishop.centerY .qsproducts { top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.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%); }
.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%); }
.multishop.short .qsproducts { width: 300px; }
.multishop.medium .qsproducts { width: 450px; }
.multishop.long .qsproducts { width: 600px; }

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


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





/* +++++++++ ---------- 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.sizedFromImage .rsOverflow { width: 100% !important; height: 100% !important; }
.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;
    }


/* phone specific styles to match brandingbrand */
.phone .slider {
    padding-bottom: 35px;
    }

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

.creative .dark .light .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;
    }





/* ******************** ------------------------- DEBUGGING STYLES ------------------------- ******************** */
/* debugger display */
#debugger {
    background: #fff;
    border: 2px solid #f23333;
    -webkit-box-shadow: 0 0 15px 0 #555;
    box-shadow: 0 0 15px 0 #555;
    font-family: Verdana, Arial, Sans-Serif;
    width: 150px;
    padding: 10px 15px;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 50000000;
    }

#debugger h2 {
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    }

#debugger h3 {
    background: #eee;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0 7px 0;
    padding: 5px 0;
    }

#debugger #code-display .property {
    display: block;
    color: #000;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 3px;
    }

#debugger #code-display .property .prop {
    font-weight: bold;
    }

#debugger .code-field {
    background: rgba(233,233,233,.5);
    border: 1px solid #ccc;
    color: #000;
    display: block;
    font-size: 13px;
    margin: 10px auto;
    width: 99%;
    }

#debugger #btn-viewmarkup {
    background: #f23333;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 100%;

    -webkit-transition: all .2s ease-in 0s;
    -moz-transition: all .2s ease-in 0s;
    -ms-transition: all .2s ease-in 0s;
    -o-transition: all .2s ease-in 0s;
	transition: all .2s ease-in 0s;
    }

#debugger #btn-viewmarkup:hover {
    background: #c42424;
    }


/* debugger elements */
.creative.debugging .cta_container {
    background: rgba(242,51,51,.5);
    }

.creative.debugging .ctahotspot {
    background: rgba(238,207,34,.2);
    }

.creative.debugging .group {
    background: rgba(82,116,252,.4);
    }

.creative.debugging .bg,
.creative.debugging .image,
.creative.debugging .group,
.creative.debugging .quickshop,
.creative.debugging .multishop,
.creative.debugging .playVideo {
    border: 2px solid #f23333;
    }

.creative.debugging .quickshop,
.creative.debugging .multishop {
    display: block;
    }

.creative.debugging .multishop .qsproducts {
    display: none !important;
    }

.creative.debugging .bg,
.creative.debugging .image,
.creative.debugging .quickshop,
.creative.debugging .multishop,
.creative.debugging .multishop .qsindicator,
.creative.debugging .cta_container,
.creative.debugging .cta_container .cta,
.creative.debugging .ctahotspot,
.creative.debugging .group,
.creative.debugging .playVideo {
    cursor: move;
    }


/* generated markup */
#generatedMarkup {
    background: rgba(255,255,255,.9);
    border: 2px solid #f23333;
    -webkit-box-shadow: 0 0 15px 0 #555;
    box-shadow: 0 0 15px 0 #555;
    margin: -250px 0 0 -350px;
    opacity: 0;

    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1;

    height: 500px;
    width: 700px;

    -webkit-transition: all .2s ease-in 0s;
    -moz-transition: all .2s ease-in 0s;
    -ms-transition: all .2s ease-in 0s;
    -o-transition: all .2s ease-in 0s;
	transition: all .2s ease-in 0s;
    }

#generatedMarkup.active {
    opacity: 1;
    z-index: 30000000;
    }

#generatedMarkup #markup-slot {
    color: #000;
    font-size: 12px;
    line-height: 16px;
    overflow: auto;
    height: 99%;
    width: 99%;
    position: relative;
    z-index: 1;
    }

#generatedMarkup #markup-close {
    background: #f23333;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 9px;
    text-decoration: none;
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 2;
    }

#generatedMarkup #markup-close:hover {
    background: #c42424;
    }