/*
 * GLOW Grid setup for Grids
 * ----------------------------------------------- */
/*
* GLOW style rules for styling Grid control
* ----------------------------------------------- */
/*
.gridControl {
  //margin-left: -20px;

  > .gridControl {
    //margin-left: 20px;
  }



  &.span1, &.span2, &.span3, &.span4, &.span5, &.span6, &.span7, &.span8, &.span9, &.span10, &.span11, &.span12, &.span13, &.span14, &.span15, &.span16 {
    //.grid.startpageGrid();
    //overflow: hidden;
    //float: left;
  }

  //&.span2  { .grid.w1100col16(2); }
  //&.span3  { .grid.w1100col16(3); }
  //&.span4  { .grid.w1100col16(4); }
  //&.span5  { .grid.w1100col16(5); }
  //&.span6  { .grid.w1100col16(6); }
  //&.span7  { .grid.w1100col16(7); }
  //&.span8  { .grid.w1100col16(8); }
  //&.span9  { .grid.w1100col16(9); }
  //&.span10 { .grid.w1100col16(10); }
  //&.span11 { .grid.w1100col16(11); }
  //&.span12 { .grid.w1100col16(12); }
  //&.span13 { .grid.w1100col16(13); }
  //&.span14 { .grid.w1100col16(14); }
  //&.span15 { .grid.w1100col16(15); }
  //&.span16 { .grid.w1100col16(16); }
}
*/
/*
 *  GLOW style rules for styling Grid controlfor edit mode
 * --------------------------------------------------------- */
.cq-wcm-edit .gridControl {
  position: relative;
}
.cq-wcm-edit .gridControl > .gridControl {
  display: table;
  outline: 2px dashed #aaa;
  position: static;
}
.cq-wcm-edit .gridControl > .gridControl > .notification {
  position: absolute;
  z-index: 100;
  width: 116px;
  padding: 0 8px;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.6);
  color: #666;
  font-size: 10px;
  font-family: 'arial', sans-serif;
  text-transform: uppercase;
  box-sizing: border-box;
}
.cq-wcm-edit .gridControl > .gridControl > .parsys {
  min-height: inherit;
}
.cq-wcm-edit .gridControl > .gridControl .new.section {
  position: absolute;
  bottom: 2px;
  width: inherit !important;
  height: 83px !important;
}
.cq-wcm-preview .gridControl > .gridControl > .notification {
  display: none;
}

.grid-container-wrap .par {
    overflow: visible;
    margin: auto;
    width: 100%;
}

.grid-container-wrap {
    /*display: none;*/
    padding: 4px 4px 0 0;
    float: left;
    background-color: #F5F5F5;
}

.grid-container-wrap .par div.section {
    float: left;
    width: auto;
    height: auto;
}

/* CQ admin styling fixes */
.grid-container-wrap.editmode {
    position: relative;
    padding: 4px 0 0 0;
    width: 100%;
}

.grid-container-wrap.editmode .description {
    color: #cccccc;
    font-size: 30px;
    left: 50%;
    line-height: 60px;
    margin-left: -200px;
    position: absolute;
    text-transform: uppercase;
    top: 40%;
}

.grid-container-wrap.editmode .par {
    display: block;
}

.grid-container-wrap.editmode .par .new.section[class*="cq-element"] {
    float: left;
    width: 33%;
}

.grid-container-rhs {
    background-color: #F5F5F5;
    padding: 4px;
}

.grid-container-rhs .grid-cell {
    margin-top: 8px;
}

.grid-container-rhs .grid-cell:first-child {
    margin-top: 0;
}

.grid-cell-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-cell-wrap .par {
    overflow: visible;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: auto;
}
/*
 * Grid cell default sizes
 * H&M grid sizes on the start page
 -------------------------------------------------------------- */
.grid-cell-wrap {
    margin: 0 0 4px 4px;
}

.grid-cell-wrap > div {
    min-height: inherit;
}

/* aspect-16_9 */
.grid-cell-wrap,
.grid-cell-wrap.size-1x1 {
    width: 318px;
    height: 177px;
    min-height: 177px;
    float: left;
}
.grid-cell-wrap.size-2x2 {
    width: 640px;
    height: 357.5px;
    min-height: 357.5px;
    position:relative;
}

.gridControl .grid-cell-wrap,
.gridControl .grid-cell-wrap.size-1x1 {
    min-height: 176.5px;
    height: 176.5px;
}
.grid-cell-wrap.size-2x3 { width: 640px; height: 545px; }
.grid-cell-wrap.size-3x3 { width: 962px; height: 545px; }

/* aspect-4_3 */
.aspect-4_3 .grid-cell-wrap,
.aspect-4_3 .grid-cell-wrap.size-1x1 { width: 318px; height: 239px; }
.aspect-4_3 .grid-cell-wrap.size-2x2 { width: 640px; height: 482px; }
.aspect-4_3 .grid-cell-wrap.size-2x3 { width: 640px; height: 725px; }
.aspect-4_3 .grid-cell-wrap.size-3x3 { width: 962px; height: 725px; }

/* Overrides */
.grid-container-rhs .grid-cell-wrap {
    clear: both;
    margin: 0;
    width: 268px;
    height: 150px;
    min-height: 150px;
    float: none;
}

/* -------------------------------------------------------------- */

/* CQ admin styling fixes */
.grid-cell-wrap.editmode {
    background: #f8f8f8;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    /*height: 100%;*/
}

.grid-cell-wrap.editmode .grid-cell-description {
    color: #000;
    font-size: 30px;
    height: 60px;
    left: 50%;
    line-height: 60px;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    width: 50%;
}

.grid-cell-wrap.editmode .par {
    display: block;
}

.grid-cell-wrap.editmode .par .new.section[class*="cq-element"] {
    clear: both;
}

.local-teasers .grid-cell-wrap {
    height: 179px;
}