/*# source 1 1 _responsive/index.compiled.css */
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Core imports                                                                                                                                                                                                                                                                                                                                                                       |
// +--------------------------------------------------------------------------------------------------------+
*/
html, body {
  font-size: 100%;
  width: 100%; }

/*
// +--------------------------------------------------------------------------------------------------------+  
// | EM Calculator function																			 																																																													|
// | Function to convert pixels into EMs 																																																																																			|  
// | Usage:

						.article-heading {
								font-size: emCalc(700);
						}

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Breakpoint Mixin                                                                                                                                                                           |
// | Shortcut for outputting the media query breakpoints                                                                                                        |  
// | @param point (string)                                                                                                                                                                    |
// | @return content (string)                                                                                                                                                             |
// | Usage:

            .page-wrap {
                width: 75%;
                @include breakpoint(large) { width: 60%; }
                @include breakpoint(medium) { width: 80%; }
                @include breakpoint(small) { width: 95%; }
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Clearfix                                                                                                                                                                                           |
// | Shortcut for clearfix                                                                                                                                                                    |  
// | @return content (string)                                                                                                                                                             |
// | Usage:

            .article {
                      @include clearfix();
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Box Sizing with IE fallback                                                                                                                                                        |  
// | @param width (string)  - CSS property                                                                                                                                    |
// | @param padding (string)  - CSS property                                                                                                                                |
// | Usage:                                                                                                                                                                                                 |

            section {
                background: white;
                @include box(50, 3);
                margin: 0 auto;
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Box Sizing                                                                                                                                                                                       |
// | Shortcut for clearfix                                                                                                                                                                    |  
// | @param box-model (string)  - CSS property                                                                                                                            |
// | Usage:

            *,
            *:after,
            *:before {
                @include box-sizing(border-box);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Border radius                                                                                                                                                                                |
// | Shortcut for border radius                                                                                                                                                       |  
// | @return content (string)                                                                                                                                                             |
// | Usage:

            .button {
                @include border-radius(5px);
            }

            .submit-button {
                @include border-top-radius(10px);
                @include border-right-radius(8px);
                @include border-bottom-radius(10px);
                @include border-left-radius (6px);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Opacity                                                                                                                                                                                            |
// | Shortcut for opacity                                                                                                                                                                     |  
// | Usage:

            .article-heading {
                @include opacity(0.8);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Text truncate -                                                                                                                                                                           |
// | Shortcut for text truncate                                                                                                                                                         |
// |  An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.            |  
// | Usage:

            .text-truncate {
                @include text-truncate;
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Font size                                                                                                                                                                                       |
// | Shortcut to output rem font-size with px fallback                                                                                                          |
// | Usage:

            body {
                @include font-size(16);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Center Block                                                                                                                                                                                 |
// | Center block elements                                                                                                                                                                  |
// | Usage:

            img {
                @include center-block;
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Center Block                                                                                                                                                                                 |
// | Center block elements                                                                                                                                                                  |
// | Usage:

            img {
                @include center-block;
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Indent                                                                                                                                                                                             |
// | Indents text                                                                                                                                                                                   |
// | Usage:

            img {
                @include center-block;
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Min Height                                                                                                                                                                                       |
// | Shortcut for min-height                                                                                                                                                                | 
// | @param pixels (Int)
// | @return content (string)                                                                                                                                                             |
// | Usage:

            .article {
                      @include min-height();
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Min Width |
// | Shortcut for min-width | 
// | @param pixels (Int)
// | @return content (string) |
// | Usage:

            .article {
                      @include min-height();
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Transition                                                                                                                                                                                       |
// | Shortcut for transitions                                                                                                                                                             | 
// | @param transition-property (String)                                                                                                                                        |
// | @param transition-time (String)                                                                                                                                                |
// | @param method (String)                                                                                                                                                                 |
// | @return content (string)                                                                                                                                                             |
// | Usage:

            button {
                      @include transition(background-color, 0.5s, ease);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Gradient                                                                                                                                                                                         |
// | Shortcut for transitions                                                                                                                                                             | 
// | @param from (String)                                                                                                                                                                   |
// | @param to (String)                                                                                                                                                                         |
// | @param height (String)                                                                                                                                                                 |
// | @return content (string)                                                                                                                                                             |
// | Usage:

            .gradient {
                @include gradient(red, white, 100%);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Rotate                                                                                                                                                                                               |
// | Shortcut for rotating                                                                                                                                                                    | 
// | @param degrees (Int)                                                                                                                                                                     |
// | Usage:

            div {
                      @include rotate(90);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Translate 3D                                                                                                                                                                                   |
// | Shortcut for rotating                                                                                                                                                                    | 
// | @param x (Int) - Pixels                                                                                                                                                                |
// | @param y (Int) - Pixels                                                                                                                                                                |
// | @param z (Int) - Pixels                                                                                                                                                                |
// | Usage:

            div {
                      @include translate3d(10, 20, 30);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Backface Visibility                                                                                                                                                                      |
// | Shortcut for rotating                                                                                                                                                                    | 
// | @param value (String) - Optional / Default: visible                                                                                                        |

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Font Montserrate																																																																																					 	|
// | Shortcut for transitions																																																																															| 
// | @param weight (String) - Optional																																																																						|
// | Usage:

						button {
											@include transition(background-color, 0.5s, ease);
						}

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Tap Highlight                                                                                                                                                                                  |
// | Shortcut for the tap highlight color                                                                                                                                     | 
// | @param color (String) - Optional / default: black                                                                                                            |
// | Usage:

            button {
                      @include tapHighlight(red);
            }

// +--------------------------------------------------------------------------------------------------------+
*/
/*
// +--------------------------------------------------------------------------------------------------------+  
// | Config Variables                                                                                                                                                                                                                                                                                                                                                           |
// +--------------------------------------------------------------------------------------------------------+
*/
/*
// Main body font size
// All em measurements should be worked out from this value, for example, if you want to convert 20px into an em, the calculation is
// 20 / 16 = 1.25
*/
/*
// Off canvas menu width
*/
/*  
// Font Icon
*/
/*
// Heading font sizes in pixels
*/
/*
// Copy - normal in pixels
*/
/*
// Dir Paths
*/
/*
- Assets Dir:
*/
/*
- Images:
*/
/*
- CSS:
*/
/*
- JS:
*/
/*
- Fonts:
*/
/*
// Colours - hex
*/
/*
// Loading spinner path
*/
/*
// Header height
*/
/*
// Header height small
*/
/*
// Cookie Banner Height
*/
/*
// Cookie Banner Height Small
*/
/* 
// Breakpoint variables 
// These are the responsive breakpoint values - uses the emCalc function, which works out the em values based on the pixel param.
*/
/*only for checkout information boxes at bottom of page*/
/*only for header-buttons span in header - removes span so text doesn't overlap*/
.content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10px; }
  .content-wrap, .content-wrap--narrow, .content-wrap--wide, .content-wrap--full {
    *zoom: 1; }
  .content-wrap:before,
  .content-wrap--narrow:before,
  .content-wrap--wide:before,
  .content-wrap--full:before,
  .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after {
    content: "";
    display: table; }
  .content-wrap:after, .content-wrap--narrow:after, .content-wrap--wide:after, .content-wrap--full:after {
    clear: both; }

.content-wrap {
  max-width: 1200px; }

.content-wrap--narrow {
  max-width: 800px; }

.content-wrap--wide {
  max-width: 2000px; }

/*cloudzoom ie11 bug fix*/
.cloudzoom-zoom {
  z-index: 1; }

/*out of stock error*/
div.flash-message-container ul {
  max-width: 1200px;
  margin: .625em auto 0 auto;
  text-align: center; }

/*DE*/
.region-DE .german-delivery-info {
  margin-top: 60px !important; }

/*NL*/
.region-NL .nederlands-delivery-info {
  margin-top: 0 !important; }

.product-details-container .few-left-in-stock {
  color: #fff; }

.show-important {
  color: #000000 !important;
  display: block !important; }

.hide-important {
  display: none !important; }

/* Magazine section missing */
@media only screen and (max-width: 700px) {
  .li-item-5.menu-item {
    display: block !important; } }

/* Checkout */
header.header--checkout {
  z-index: 20; }

/* Sign up max width */
.newsletter-signup {
  max-width: 1200px;
  margin: 0 auto; }

/* PLP */
.info-strip-container:after {
  clear: both;
  content: "";
  display: table; }

.sidebar-left {
  margin-top: 0; }

/* FIX for weird li's on PDP */
.description-copy ul {
  clear: both; }

/* fix for 4th column of megamenu not looking the same as others */
#inner-container .navigation--primary .li-col-3 li {
  margin-bottom: 5px; }

#outer-container #inner-container div.site-container .full-page {
  box-sizing: border-box;
  float: none !important;
  width: 100% !important; }

#faq-container {
  padding: 0 !important; }

/*right side on product page*/
.greatwithany .was-price {
  margin: 0; }

#add-to-basket-form .few-left-in-stock.after-size-guide {
  margin-top: -11px !important; }

.basket .table-basket .few-left-in-stock {
  display: none !important; }

@media all and (max-width: 960px) {
  .basket .table-basket .few-left-in-stock {
    display: block !important; } }

@media all and (max-width: 768px) {
  #add-to-basket-form .few-left-in-stock.after-size-guide {
    margin-top: 5px !important; } }

/*  temporary fix for christmas gifts, ok to delete in 2016 */
@media all and (min-width: 1928px) {
  #inner-container #category-header .header-girls-girls-christmas-gifts {
    font-size: 17px !important; } }

@media all and (max-width: 1601px) {
  #inner-container #category-header .header-girls-girls-christmas-gifts {
    font-size: 15px !important; } }

@media only screen and (min-width: 976px) {
  .sidebar-left {
    float: left;
    margin-right: -300px;
    position: relative; }
  .listing__results {
    float: left;
    width: 100%; } }

@media only screen and (max-width: 976px) {
  /*hide magazine on tablet*/
  .li-item-5.menu-item {
    display: none; } }

/* Core fixes x */
.info-strip-container:after {
  content: "";
  display: table;
  clear: both; }

/* switch social media buttons on product page back on */
.site-container .product-details-container .social-media {
  display: inline-block; }
  .site-container .product-details-container .social-media .sprite {
    display: inline-block; }
  .site-container .product-details-container .social-media .share-description {
    display: none; }

/* adding bold and bigger font to link headings in mega menu (eg brands)*/
#main-menu li ul.menu-container li.li-col .brands-link {
  font-weight: bold !important;
  font-size: 15px !important; }

/* border right removal for footer 

footer .social-media .center,footer .facebook-like .center {
  border-right: none;
}

footer section.bottom-content a {
  padding-left: 0;
  padding-right: 0.4625em;
}
footer section.social-media {
  width: 33.3%!important;
}

footer section.facebook-like {
    width: 34%;

  overflow: initial;
}
*/
/************************************************/
/*padding fix for footer style studio in UK site*/
/**********************************************
.region-UK footer section.facebook-like {
  padding: 9px 0px;
}

footer section.download-app {
 width: 32.6%;
}**/
/*keep 'download the river island app!' vertically centered

footer section.download-app .icon-mobile-3:before {
    vertical-align: middle;
}*/
/* dirty fix for strange padding behaviour 23/02/15 */
.full-page {
  padding: 0 !important; }

/* have added to core 19/01/15 */
.noBgImg h1 {
  font-size: 2.5rem !important; }

#category-header ul {
  display: inline-table; }

/* fix for alignment for sidebar on product listings page(s) */
.sidebar-left {
  margin-top: 2px; }
  .sidebar-left .searched-for-container .count-clear-all {
    margin-bottom: 23px; }
  .sidebar-left .searched-for-container .search-terms {
    background-color: #e0e0e0; }

/* MEega menu -> style insider -> trends column pushed down to match next column */
.li-item-4 .li-col-1 {
  margin-top: 0 !important; }

#faq-container ul, #faq-container ol {
  list-style: none outside none; }

.help-wrapper ul, .help-wrapper ol {
  list-style: disc outside none !important; }

.i-r-i-wrapper ul, .i-r-i-wrapper ol {
  list-style: disc outside none !important; }

#ul-modules li, #ul-size-categories li {
  list-style: none outside none; }

/* SI remove categories until it's fixed by TCPL */
#style-insider .blog-sidebar #categories-nav {
  display: none; }

/* checkout final review box table containing green button */
#accordian #final-review table .button-green {
  width: 100%; }

header#main-header {
  z-index: 20;
  /* added to core 13/05/14, upon new release - delete this */ }

#index-container {
  margin-top: 0 !important; }

#page.content {
  width: 100%;
  float: none; }

.preview-container {
  position: absolute; }

body #outer-container #inner-container {
  width: auto;
  padding: 0 10px; }

#faq-container {
  padding: 0 !important; }

#outer-container #container {
  padding: 0; }

body #outer-container #inner-container .site-container {
  padding-left: 0; }

a.cta {
  background: url("https://images.riverisland.com/is/image/RiverIsland/blank?$GIF%20Transparency$&locale=fr") repeat scroll 0 0 transparent;
  position: absolute;
  text-align: center;
  text-indent: -9999em;
  z-index: 2;
  padding: 0; }

/* Fix for double SSL notice on signin for checkout */
.site-container > .checkout-header > table {
  display: none; }

/* size guides images fix - make them responsive */
#gender-menu a.womens, #gender-menu a.mens, #gender-menu a.girls, #gender-menu a.boys, #gender-menu a.teens {
  background-size: cover;
  height: 0;
  padding-bottom: 16.63%; }

/* fix to ie8 checkout page to display checkbox on terms and conditions - added to core 13/05/14 - waiting for release before removing this from temp file*/
/* when you click on the add to basket this notification pops up*/
#bagNotification .bagArrow {
  right: 79px; }

/* added 06/10/14 to fix layout widths - .site-container.threecollayout was overriding correct stlye */
.site-container.threecollayout .styleinsider-listing-records li, .site-container.threecollayout .content-listing-records li {
  width: 75%; }

.site-container.threecollayout .store-listing-records li {
  width: 47%; }

/* added 06/10/14 to fix layout widths - .site-container.threecollayout was overriding correct stlye */
/* added 06/10/14 to fix banner heading - hide heading class wasn't working in umbraco */
.heading-replace h1 {
  display: none !important; }

#outer-container #inner-container div.site-container {
  width: 100%; }

/* added 13/10/14 needs to be added to main .scss - to correct text container centering */
.bgImg p {
  margin: 0 auto 15px; }

/* added 14/10/14  - to correct mega menu teen view all link */
.bold-heading .view-all {
  float: none;
  text-align: left;
  line-height: normal;
  height: auto;
  background-color: transparent; }

.megamenu-red {
  color: red !important;
  font-weight: 800; }

/* iPad Potrait width */
@media only screen and (max-width: 976px) {
  /* checkout final review box table containing reen button */
  #accordian #final-review table .button-green {
    font-size: 1.1rem; }
  body #outer-container #category-header {
    display: none; }
  /* fix to my details "Thank you..." pop up box */
  .site-container .flash-message-container .uimsg {
    top: 3.5em;
    position: relative;
    /*display: none;*/ }
  /* when you click on the add to basket this notification pops up*/
  #bagNotification {
    margin-top: 8px; }
    #bagNotification .bagArrow {
      right: 8px; } }

/* Mobile width */
@media only screen and (max-width: 700px) {
  /* to give more space for bottom pagination for iphone */
  .section-pagination-bottom .paginator {
    margin-right: 0; }
  .section-pagination-bottom .m-back-to-top {
    margin-left: 0; }
  /* checkout final review box table containing green button */
  #accordian #final-review table .button-green {
    font-size: 1.25rem; }
  #main-menu {
    z-index: 30 !important; }
    #main-menu:not(:target) {
      z-index: 30; }
  /* size guides images fix - make them responsive */
  #gender-menu a.womens, #gender-menu a.mens, #gender-menu a.girls, #gender-menu a.boys, #gender-menu a.teens {
    height: auto;
    padding-bottom: 0; }
  /* when you click on the add to basket this notification pops up*/
  #bagNotification {
    margin-top: 60px; }
  /*footer section.facebook-like {
        width: 100%!important;
    }
    footer section.social-media {
        width: 100%!important;
    }

    footer section.download-app {
        width: 100%!important;
        margin-bottom: 14px;
    }*/ }

/* One Size Fix - ENG 080714 Alex */
.wide a .sizes {
  width: 50% !important; }
  .wide a .sizes .facetname {
    font-size: 9px !important;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding-right: 0; }

.fac-sizes li {
  height: 20px; }

.fac-sizes .separator {
  height: 0px; }

@media only screen and (max-width: 976px) {
  .wide a .sizes .facetname {
    font-size: 10px !important;
    line-height: 0.9;
    padding-left: 5% !important;
    width: 20% !important; } }

/* One Size Fix - FR 090714 Alex */
.region-FR .wide a .sizes .facetname {
  font-size: 7px !important;
  text-align: left; }

@media only screen and (max-width: 976px) {
  .region-FR .wide a .sizes .facetname {
    font-size: 10px !important;
    line-height: 0.9;
    padding-left: 5% !important;
    width: 20% !important; } }

/* Facebook wrap fix - 100714 Alex */
.facebook-like iframe {
  min-width: 0 !important;
  height: 40px !important; }

/* Added until a better responsive navigation can be implemented */
@media only screen and (max-width: 1181px) {
  .image-size-container {
    display: none !important; } }

@media only screen and (max-width: 1100px) {
  .items-container {
    float: none; } }

@media only screen and (max-width: 975px) {
  .items-container {
    float: right; } }

/* My account menu is behind the swimwear links */
.info-strip-container {
  position: relative;
  z-index: 0; }

/* Adding a 33% column to the mega-menu */
#inner-container .navigation--primary .menu-item ul.menu-container li.col33 {
  width: 33% !important; }

/* fixing clear of bullet points on PDP */
.right-side .description-copy ul {
  clear: both; }

/*FR and DE infostrip stuff*/
.ri-home .no-breadcrumbs {
  height: 98px; }

@media only screen and (max-width: 700px) {
  .ri-home .no-breadcrumbs {
    height: 48px; } }