/* ===============================
** LOGIC
  
    .canvas
      .flex-parent
        .flex-child-XX
            visible element, eg .tile
            visible element, eg .tile
            visible element, eg .tile
        .flex-child-XX
            visible element, eg .tile
            visible element, eg .tile
            visible element, eg .tile


================================== */


/* ===============================
** FLEX-GRID
================================== */

.tile-hover:hover {
    border: 1px solid grey;
    box-shadow: 0px 0px 20px var(--col-main-l3);
}

.flex-grid-parent {
    width: 100%;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0px;
}


div.flex-chart-process {
  width: 100%;
  height: 200px;
  margin: 8px 0px 8px 0px;
  position: relative;
}


div.flex-chart-project {
  height: 200px;
  position: relative;
}

div.flex-chart-heading {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: transparent;
  height: 25px;
}

div.flex-chart-chart {
  position: absolute;
  top: 25px;
  left: 0px;
  height: 175px;
  width: 100%;
  background-color: transparent;
}


div.flex-chart-symbols {
  position: absolute;
  top: 3px;
  right: 8%;
  height: 25px;
  width: 25px;
  z-index: 1;
}

div.flex-chart-symbols-modifier {
  position: absolute;
  top: 3px;
  right: calc(8% + 25px);
  height: 25px;
  /*width: 25px;*/
  z-index: 1;
}


img.symbol {
  height: 25px;
  width: 25px;
  cursor: pointer;
  z-index: 1;
}


.chart-section-divider {
  padding-top: 30px;
  border-bottom: 3px solid var(--col-greys-l2);
}

.tile-margin {
    margin:10px;
}

.tile-padding {
    padding:20px;
}



.product-tile {
    /* height and width is realtive to tile-wrapper-products-page */
    position: relative;    
    border: 1px solid white;
    background-color: transparent;
}


.tile-content {
    width: 100%;
    height: 100%;
    position: relative;    
    background-color: transparent;
}


.tile-image-cropper {
    background-color: transparent;
    width: 100%;
    z-index: 1;
    position: relative;
}

.tile-image {
    background-color: transparent;
    width: 100%;
    height: 0%;
    padding-top: 75%;
    z-index: 1;
    position: relative;
}

.tile-image-abs {
    position: absolute;
    top: 0;
}

.tile-brands {
    background-color: transparent;
    width: 100%;
    z-index: 2;
    height:25px;
    margin-top: 5px;
}

.tile-prod-name {
    background-color: transparent;
    width: 100%;
    z-index: 2;
    height:30px;
}
.tile-sub-text{
    background-color: transparent;
    width: 100%;
    z-index: 2;
    height:25px;
}

.tile-prices{
    background-color: transparent;
    width: 100%;
    z-index: 2;
    
    padding-top: 12px;
}

.tile-primary-price {
    width: 55%;
    min-width: 80px;
    height: 40px;
    margin: 0 auto;
}

.price-btn-clr-border {
    border-radius: 5px;
    border: 2px solid #239B56;
    background-color: var(--col-brand);
}

.speed-tagging-image {
    position: absolute;
    bottom: 5px;
    width: 100%;
    z-index: 1;
}

.tile-image-center {
    margin: auto;
    width: 80%;
    /*height:120px;*/
}

.img-center img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}

.tile-price {
    position: absolute;
    bottom: 18px;
}
.snap-right {right:0px;}
.snap-left {left:0px;}
.tile-unit {
    position: absolute;
    bottom: 0px;
}



/* ===============================
** BADGES
================================== */

div.badge-parent {
    position: relative;
    z-index: 5;
    background-color: yellow;
    height:0px;
}

div.badge-save-percent {
    position: absolute;
    top: 0px;
    right: 0px;
}

div.badge-circle {
    border-radius: 50%;
    display: inline-block;
    border: 3px solid white;
}

div.badge-circle-save-percent {
    background-color: var(--col-brand);
    height: 34px;
    width: 40px;
    padding-top: 6px;
}

div.badge-price-campaign {
    position: absolute;
    top: 0px;
    left: 0px;
}

div.badge-circle-price-campaign {
    background-color: var(--col-yellow-badge);
    height: 27px;
    width: 40px;
    padding-top: 13px;
}

div.badge-small-right-outside {
    position: absolute;
    top: -10px;
    right: -10px;

}

div.badge-small-circle-price-campaign {
    background-color: var(--col-yellow-badge);
    height: 20px;
    width: 30px;
    padding-top: 10px;
}


/* ===============================
** BLOCK FILTER-CLICKING WHILE UPDATING
================================== */

#disable-until-updated-product-groups, 
#disable-until-updated-filter {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: 0
}


/* ===============================
** OLD
================================== */



.flex-parent {
    width: 100%;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}

.flex-child {
    width: calc(100% - 70px);
    min-height: 250px;
    margin: 10px;
    padding: 25px;
}



/* ===============================
** PRICE-LIST 
================================== */

.product-overview {
    margin:0px;
    padding: 10px 0px 10px 0px;
    position: relative;    
    background-color: transparent;
}

.product-image-container {
    width: 100%;
    height: 0%;
    padding-top: calc(60% + 40px);
    z-index: 1;
    position: relative;
}

.product-image {
    position: absolute;
    width: 80%;
    padding: 20px 10% 20px 10%;
    top: 0;
}


.container-for-images-of-variable-size {
    width: 100%;
    z-index: 1;
    margin: 20px 0px;
}


.price-list-wrapper-meta {
    height:50px;
    padding:12px 20px;
    border-top: 1px solid rgb(200,200,200);
}

.price-list-wrapper-variant {
    height:70px;
    padding:12px 20px;
    border-top: 1px dashed rgb(235,235,235);
}


.price-list-last {
    border-bottom: 0px solid black;
}

.price-list-inner {
    height: calc(100%);
}

.price-list-logo {
    float:left;
    width: calc(25% - 15px);
    height: 100%;
    margin-right: 15px;
}

.price-list-name {
    position: relative;;
    float:left;
    width: calc(50% - 15px);
    height: 100%;
    margin-right: 15px;
}

.price-list-price-button {
    position: relative;
    float:right;
    width: 25%;
    height: 100%;
}

.price-btn {
    height: 40px;
    width: 90%;
    border-radius: 5px;
    border: 2px solid #239B56;
    background-color:#239B56;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
}

.div-float-left {
    position: relative;
    float:left;
    height: 100%;
}

.price-btn-fill {
    background-color:#239B56;
    border-radius: 5px;
    border: 2px solid #239B56;
    position:absolute;
    left:-2px;
    bottom:0px;
}


.price-btn-text {
    background-color:transparent;
    width:100%;
    text-align: center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);

}


/* ===============================
** NOT LARGEST SCREEN: SHOW LESS PRODUCTS PER WIDTH
================================== */




/* VIEWPORT WIDTH: 0->320 | All screens
/* ======================================*/
@media (min-width: 0px) {

    div.flex-chart-project {
      width: calc(100% - 6px);
      margin: 8px 0px 8px 0px;
    }


  .hide-on-mobil {display: none}
  .hide-on-desktop {display: block}

  .flex-grid-filters,
  .flex-grid-products,
  .flex-grid-20,
  .flex-grid-25,
  .flex-grid-30,
  .flex-grid-33,
  .flex-grid-40,
  .flex-grid-50,
  .flex-grid-60,
  .flex-grid-70,
  .flex-grid-75,
  .flex-grid-80,
  .flex-grid-100 {width: 100%;}

  .tile-wrapper-products-page {width: 100%;}
  .tile-wrapper-full-page-width {width: 100%;}
  .tile-wrapper-similar-products {width: 100%;}

  .product-tile {
      /* height and width is realtive to tile-wrapper-products-page */
      margin:10px;
      padding:24px 12px 8px 12px;
      width: calc(100% - 46px);
  }

  .shadow {
      background-color: rgb(255,255,255);
      box-shadow: 0px 0px 20px var(--col-main-l2);
      border-radius: 10px;
  }

  .shadow-not-on-mobil {
      background-color: rgb(255,255,255);
      box-shadow: none;
      border-radius: none;
  }



}


/* VIEWPORT WIDTH: 320 | iPhone 4 / 5 / SE | 
/* ======================================*/
@media (min-width: 320px) {
  .tile-wrapper-products-page {width: 50%;}
  .tile-wrapper-full-page-width {width: 33.33%;}

}


/* VIEWPORT WIDTH: 360 | Galaxy S5 | 
/* ======================================*/
@media (min-width: 360px) {
  .tile-wrapper-products-page {width: 50%;}
  .tile-wrapper-full-page-width {width: 33.33%;}
}


/* VIEWPORT WIDTH: 375 | iPhone 6/7/8 | iPhone X
/* ======================================*/
@media (min-width: 375px) {
  .tile-wrapper-products-page {width: 50%;}
  .tile-wrapper-similar-products {width: 50%;}
  .tile-wrapper-full-page-width {width: 33.33%;}

}


/* VIEWPORT WIDTH: 411 | iPhone 6/7 | Pixel 2/2XL | iPhone 6/7/8 Plus
/* ======================================*/
@media (min-width: 411px) {
  .tile-wrapper-products-page {width: 50%;}
  .tile-wrapper-full-page-width {width: 33.33%;}

}


/* VIEWPORT WIDTH: 576
/* ======================================*/
@media (min-width: 576px) {
  .tile-wrapper-products-page {width: 33.33%;}
  .tile-wrapper-full-page-width {width: 20%;}

}


/* VIEWPORT WIDTH: 768 | iPad
/* ======================================*/
@media (min-width: 768px) {
  .hide-on-mobil {display: block}
  .hide-on-desktop {display: none}

  .flex-grid-20  {width: 20%;}
  .flex-grid-25  {width: 25%;}
  .flex-grid-30  {width: 30%;}
  .flex-grid-33  {width: 33%;}
  .flex-grid-40  {width: 40%;}
  .flex-grid-50  {width: 50%;}
  .flex-grid-60  {width: 60%;}
  .flex-grid-70  {width: 70%;}
  .flex-grid-75  {width: 75%;}
  .flex-grid-80  {width: 80%;}
  .flex-grid-100 {width: 100%;}

  div.flex-chart-project {
      width: calc(50% - 22px);
      margin: 8px 16px 8px 0px;
   }

  .flex-grid-filters {width: 280px;}
  .flex-grid-products {width: calc(100% - 280px);}

  .product-overview {padding: 20px 35px 10px 0px;}

  .tile-wrapper-products-page {width: 50%;}
  .tile-wrapper-similar-products {width: 25%;}
  .tile-wrapper-full-page-width {width: 25%;}

  .product-tile {
    /* height and width is realtive to tile-wrapper-products-page */
    margin:10px;
    padding:20px 20px 10px 20px;
    width: calc(100% - 62px);
  }

  .shadow-not-on-mobil {
      background-color: rgb(255,255,255);
      box-shadow: 0px 0px 20px var(--col-main-l2);
      border-radius: 10px;
  }


}


/* VIEWPORT WIDTH: 992 | iPad Pro
/* ======================================*/
@media (min-width: 992px) {

  .flex-grid-filters {width: 300px;}
  .flex-grid-products {width: calc(100% - 300px);}
  .tile-wrapper-products-page {width: 33.33%;}
  .tile-wrapper-similar-products {width: 20%;}
  .tile-wrapper-full-page-width {width: 20%;}

}


/* VIEWPORT WIDTH: 1200
/* ======================================*/
@media (min-width: 1200px) {
  .tile-wrapper-products-page {width: 33.33%%;}
  .tile-wrapper-full-page-width {width: 20%;}
}

/* VIEWPORT WIDTH: 1400
/* ======================================*/
@media (min-width: 1300px) {
  .tile-wrapper-products-page {width: 25%;}
  .tile-wrapper-full-page-width {width: 16.67%;}
}

/* VIEWPORT WIDTH: 1400
/* ======================================*/
@media (min-width: 1600px) {
  .tile-wrapper-products-page {width: 20%;}
  .tile-wrapper-full-page-width {width: 14.29%;}
}

/* VIEWPORT WIDTH: 1400
/* ======================================*/
@media (min-width: 1800px) {
  .tile-wrapper-products-page {width: 270px;}
}


/* ===============================
** SMALL SCREENS: MAKE ALL 100% WIDTH
================================== */