/***Main element and wrappers***/
.design-categories  {
    background: white; 
    display: flex;
}
.design-categories  >.wrapper {
    display: flex;
    flex-direction: row-reverse;
    margin: 0px auto 0px auto;
    background: transparent; 
    max-width: 1920px;
    flex: 1;
}

/***Categories***/
.design-container{
    flex: 5;
    display: flex;
    flex-direction: column;
}

.design-container  .design-category{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.design-container  .design-category .design-category-frame{
    display: flex;
    flex-direction: row;
    margin: 2px -6px 2px -5px;
}

.design-container button{
    height: 360px;
    min-width: 160px;
}

.design-container button, .design-container .design-category-frame > a{
    width: 100%;
}

.design-categories .limited .design-category:last-of-type a, .design-container > div button{
    margin: 0 0px 0 4px;
}
.design-container .design-category-frame > a {
    margin-right: 4px;
}

/*Button*/
.design-container .design-category button>div{
    height: 80%;
    width: 80%;
    margin: auto;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    flex-direction: column;
    transition: 0.35s ease-in-out;
}
a > button .white-bottom-arrow::after {
    display: none;
}

/*Fix limited view*/
.design-categories  .design-category .bap-picture-button{
    background-repeat: no-repeat !important;
}
.design-categories .limited .design-category .bap-picture-button.showMore{
    background-repeat: initial !important;
}

/*Button animation*/
.design-container .design-category button:hover>div, .design-container .design-category button.open > div{
    background: rgba(0,0,0,0.55);
}
.design-container .design-category button.open:hover{
    filter: brightness(85%);
}

/*Rooms*/
.insertion-point-containter > .insertion-point {
    flex-wrap: wrap;
    display: flex;
    transition: 0.75s ease-in-out;
    width: 100%;
    position: relative;
    opacity: 0;
    z-index: -1;
    height: 0;
}

.insertion-point-containter .insertion-point button,
 .insertion-point-containter .insertion-point div,
  .insertion-point-containter .insertion-point a{
    transition: height 1s;
}

.insertion-point-containter:not(.open) .insertion-point button,
 .insertion-point-containter:not(.open) div,
 .insertion-point-containter:not(.open) .insertion-point a{
    height: 0!important;
}


.design-categories .limited .room-category button {
    height: 250px;
 }

.insertion-point-containter > .insertion-point.open {
    position: relative;
    opacity: 1;
    z-index: 1;
    /*height: auto;*/
    height: 674px; /*CALCULATED BASED ON margins/heights and number of limited view elemets - x2 rows of 
                    250px elements at .design-container > div button and one 150px element at
                    .design-categories .limited .room-category:last-of-type button, with 4px bot/top margin*/
}

.insertion-point-containter.rows-1 > .insertion-point.open {
    height: 424px; /*This happens when there is just 1 row*/
}
.room-category {
    width: calc(33.33% - 6px);
    display: inline;
    margin: 4px 2px 4px 2px;
}

.design-container .design-category .room-category button > div {
    height: 100%;
    width: 100%;
}


.room-category:last-of-type {
    width: calc(100% - 4px);
}

.design-categories .limited .room-category:last-of-type button {
    height: 150px;
}

/***Limited Mode***/
.design-categories .limited .design-category:last-of-type a{
    flex: 1;
}
.design-categories .limited .design-category:last-of-type button {
    height: 100px;
    min-height: 100px;
    margin: 0px;
    width: 100%;
}
.design-categories .limited .design-category:last-of-type button > div{
    height: 100%;
    width: 100%;
}
.design-categories .limited .design-category:last-of-type .white-bottom-arrow::after{
    display: none;
}

/***Responsiveness***/
@media only screen and (max-width: 1100px) {
    .design-container button {
        height: 260px;
    }

    .design-categories .limited .room-category button {
        height: 200px;
     }

    .insertion-point-containter > .insertion-point.open{
        height: 574px;
    }

    .insertion-point-containter.rows-1 > .insertion-point.open {
        height: 370px; /*This happens when there is just 1 row*/
    }
}
@media only screen and (max-width: 787px) {

    /*Category buttons*/
    .design-container{
        margin: auto;
    }

    .design-container >.wrapper{
        width: 100%;
        margin: 5px auto 5px auto;
    }
    
    .design-container .design-category-frame button{
        font-size: 1.5em;
        background-size: auto 100% !important;
    }
    /*Rooms*/
    .design-categories .limited .room-category button {
        height: 150px;
    }
    .design-categories .limited .room-category:last-of-type button {
        height: 75px;
    }
    .insertion-point-containter > .insertion-point.open {
        height: 557px; /*150*3 + 75 + 8*4*/
    }

    .insertion-point-containter.rows-1 > .insertion-point.open {
        height: 235px; /*This happens when there is just 1 row*/
    }
  }

  @media only screen and (max-width: 500px) {

      .design-container .design-category-frame button {
          height: 200px;
      }

      .room-category {
          width: 100%;
      }

      .insertion-point-containter > .insertion-point.open {
          height: 1031px; /* (150+8) * 6 + 75+8 */
      }

      .insertion-point-containter.rows-1 > .insertion-point.open {
          height: auto;
      }

    }