/*lethargic load*/
.image[data-ll] {
    background-image: none;
    visibility: hidden;
    opacity: 0;
    transition: all 300ms;
}

.image {
  position: relative;
  height: 0;
  overflow: hidden;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
}

.content-area > a > img,
.image > a > img {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.content-area > a,
.image > a {
  background-color: transparent;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  z-index: 1;
}

/*NEW MIX AND MATCH WIDTHS*/

.mix-and-match {
  width: 166.66%;
  margin-left: -33.33%;
}

@media only screen and (max-width: 701px) {
    .mix-and-match {
      width: 100%;
      margin: auto;
    }
}

.ri-standard {
  margin: auto;
  width: 60%;
  max-width: 1200px;
}

.ri-extend-fw {
  width: 100%;
  max-width: 2000px;
}

.image .content-area {
  position: absolute;
  top: 0;
  height: 100%;
  left: 20%;
  width: 60%;
}

.ri-true-fw .content-area {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;    
}

.ri-true-fw {
  margin: auto;
  width:100vw;
  max-width: 2000px;
}

@media only screen and (max-width: 701px) {
    .ri-standard, .ri-extend-fw, .ri-true-fw {
      width: 100%;
      max-width: none;
    }
}


/*LIVE TEXT CTAs*/
.image .live-cta-dark--static,
.image .live-cta-light--static,
.live-cta-dark--static,
.live-cta-light--static,
.live-cta-dark,
.live-cta-light, 
.live-cta-dark,
.live-cta-light,
.image .live-cta-dark,
.image .live-cta-light, 
.image .live-cta-dark.no-resize,
.image .live-cta-dark--static.no-resize,
.image .live-cta-light.no-resize,
.image .live-cta-light--static.no-resize {
	letter-spacing: 0.5px;
  position: absolute;
  width: auto;
  height: auto;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 16px 20px;
  display: inline-block;
 	font-size: 14px;
	line-height: 16px;
  font-family: 'proxima-nova';
  font-weight: 500;
  margin: auto;
  white-space: nowrap;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}

/*--static ctas are always position static and transform none--*/

.image .live-cta-dark--static,
.image .live-cta-light--static,
.live-cta-dark--static,
.live-cta-light--static {
  position: static !important;
  -webkit-transform: none !important;
          transform: none !important;
}

.live-cta-dark--static::after,
.live-cta-light--static::after, 
.live-cta-dark::after,
.live-cta-light::after,
.image .live-cta-dark.no-resize::after,
.image .live-cta-light.no-resize::after {
	margin-left: 10px;
	font-family: 'icons';
	font-size: 15px;
	position: relative;
	top: 0.1rem;
	content: '\e90a';
}

.live-cta-light,
.live-cta-light--static,
.image .live-cta-light,
.image .live-cta-light--static {
  color: #000000;
  background-color: #edeeee;
	background: rgb(237, 238, 238);
	background: rgba(237, 238, 238, 0.9);
	border: 1px solid #edeeee;
}

.live-cta-light.translucent,
.live-cta-light--static.translucent,
.image .live-cta-light.translucent,
.image .live-cta-light--static.translucent {
	background: rgba(237, 238, 238, 0.6);
}

.live-cta-dark,
.live-cta-dark--static,
.image .live-cta-dark,
.image .live-cta-dark--static {
	color: #ffffff;
  background-color: #252525;
	background: rgb(37, 37, 37);
	background: rgba(37, 37, 37, 0.9);
	border: 1px solid #252525;
}

.live-cta-dark.translucent,
.live-cta-dark--static.translucent,
.image .live-cta-dark.translucent,
.image .live-cta-dark--static.translucent {
	background: rgba(37, 37, 37, 0.6);
}

@media only screen and (max-width: 1220px) and (min-width: 701px) {
  .image .live-cta-dark,
  .image .live-cta-light,
  .image .live-cta-dark--static,
  .image .live-cta-light--static {
  	letter-spacing: 0.042vw;
    padding: 1.16vw 1.33vw;
    font-size: 1.16vw;
  }

  .image .live-cta-light::after,
  .image .live-cta-dark::after,
  .image .live-cta-dark--static,
  .image .live-cta-light--static {
		font-size: 1.22vw;
		margin-left: 0.82vw;
  }



}

@media only screen and (max-width: 2000px) and (min-width: 701px) {
  .ri-true-fw .live-cta-dark,
  .ri-true-fw .live-cta-light,
  .ri-true-fw .live-cta-dark--static,
  .ri-true-fw .live-cta-light--static {
		/*padding: 16px 20px;*/
		/*font-size: 14px;*/
		/*line-height: 16px;*/
		letter-spacing: 0.025vw;
    padding: 0.8vw 0.6vw 0.8vw 0.8vw;
    font-size: 0.7vw;
    line-height: 0.8vw;
  }

  .ri-true-fw .live-cta-dark::after,
  .ri-true-fw .live-cta-light::after,
  .ri-true-fw .live-cta-dark--static::after,
  .ri-true-fw .live-cta-light--static::after {
		margin-left: 0.5vw;
    font-size: 0.75vw;
  }
}

/* NEW CTA JULY 2018 */
/* static version of them still hasn't been created */
.dark-rounded-cta,
.dark-rounded-cta--static,
.light-rounded-cta,
.light-rounded-cta--static,
.image .dark-rounded-cta,
.image .dark-rounded-cta--static,
.image .light-rounded-cta,
.image .light-rounded-cta--static {
    text-transform: uppercase;
    color: black;
    border: 2px solid black;
    padding: 16px 20px;
    border-radius: 5px;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 14px;
    width: auto;
    height: auto;
    display: inline-block;
    line-height: 16px;
    font-family: 'proxima-nova';
    margin: auto;
    white-space: nowrap;
    text-align: center;
}

.dark-rounded-cta,
.dark-rounded-cta--static,
.image .dark-rounded-cta,
.image .dark-rounded-cta--static {
    color: black;
    border: 2px solid black;
}

.light-rounded-cta,
.light-rounded-cta--static,
.image .light-rounded-cta,
.image .light-rounded-cta--static {
    color: white;
    border: 2px solid white;
}

/* NEW CTA on .image - JULY 2018 */
@media only screen and (max-width: 1220px) and (min-width: 701px) {
    .image .dark-rounded-cta,
    .image .dark-rounded-cta--static,
    .image .light-rounded-cta,
    .image .light-rounded-cta--static {
      letter-spacing: 0.042vw;
      padding: 1.16vw 1.33vw;
      font-size: 1.16vw;
    }
  
    .image .dark-rounded-cta::after,
    .image .dark-rounded-cta--static::after,
    .image .light-rounded-cta::after,
    .image .light-rounded-cta--static::after {
          font-size: 1.22vw;
          margin-left: 0.82vw;
    } 
}
  
/* NEW CTA on .ri-true-fw - JULY 2018 */ 
@media only screen and (max-width: 2000px) and (min-width: 701px) {
    .ri-true-fw .dark-rounded-cta,
    .ri-true-fw .dark-rounded-cta--static,
    .ri-true-fw .light-rounded-cta,
    .ri-true-fw .light-rounded-cta--static {
        letter-spacing: 0.025vw;
        padding: 0.8vw 0.6vw 0.8vw 0.8vw;
        font-size: 0.7vw;
        line-height: 0.8vw;
    }

    .ri-true-fw .dark-rounded-cta::after,
    .ri-true-fw .dark-rounded-cta--static::after,
    .ri-true-fw .light-rounded-cta::after,
    .ri-true-fw .light-rounded-cta--static::after {
        margin-left: 0.5vw;
        font-size: 0.75vw;
    }
}




/*DEPRECATED FULL WIDTH*/

.ri-full-width {
    width: 166.66%;
    margin-left: -33.33%;
    background-size: contain;
}

.ri-full-width .content-area {
  position: absolute;
  top: 0;
  height: 100%;
  left: 20%;
  width: 60%;
}

a.cta {
  position: absolute;
  background: url(https://images.riverisland.com/is/image/RiverIsland/blank?$GIF%20Transparency$);
  text-indent: -9999em;
  z-index: 2;
}

.desktop-section {
  display: block;
}
.mob-section {
  display: none;
}

/*CLEARFIXES*/

.desktop-section, .mob-section, .clearfix {
    *zoom:1
}

.desktop-section:before, .desktop-section:after, .mob-section:before, .mob-section:after, .clearfix:before,.clearfix:after {
    content: "";
    display: table;
}

.desktop-section:after, .mob-section:after, .clearfix:after {
    clear: both;
}


.ri-home .no-breadcrumbs {
  margin-top: 0;
}

.ri-home footer {
  margin-top: 0px;
}

@media only screen and (max-width: 700px) {
  .mob-section {
    display: block;
  }
  .desktop-section {
    display: none;
  }
}