$partSize: 110px;
$margins: 2px;
$rows: 4; //change this also in js
$cols: 6; //change this also in js
$perspective: 700px;
$transTime: 0.3s;
$border-radius: 5px;
$shadow-size: 10px;
$demo-bg: linear-gradient(60deg, #5B5893, darken(#6A66A6, 30%));
$gallery-bg: #eee;

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.demo {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
  background: $demo-bg;
  
  &__gallery {
    width: $cols * $partSize + 2 * $cols * $margins + 2 * $margins;
    height: $rows * $partSize + 2 * $rows * $margins + 2 * $margins;
    padding: $margins;
    flex-shrink: 0;
    
    background: $gallery-bg;
    
    perspective: $perspective;
    border-radius: $border-radius;
  }
  
  &__placeholder {
    width: $partSize;
    height: $partSize;
    margin: $margins;
    float: left;
    background-color: lightslategrey;
    border-radius: $border-radius;
  }
  
  &__part {
    position: relative;
    float: left;
    
    width: $partSize;
    height: $partSize;
    margin: $margins;
  
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: all $transTime ease-in-out;
   
    &:hover .demo__part-front {
      box-shadow: 0 0 $shadow-size black;
      transform: scale(0.96);
      
      &:after {
        opacity: 0;
      }
    }    
  }
  
  &__part-front, &__part-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    overflow: hidden;    
    backface-visibility: hidden;
    border-radius: $border-radius;
    cursor: pointer;
    
    
  }
  
  &__part-front {
    background-color: lightslategrey;
    background-size: cover;
    background-position: center;
    
    transform: rotateX(0deg);
    transition: all $transTime / 1.5 ease;
    
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      
      width: 100%;
      height: 100%;
      
      background-color: black;
      
      content: "";
      opacity: 0.5;      
      transition: all $transTime / 1.5 ease;
    }
  }
  
  &__part-back {
    transform: rotateY(180deg) rotateX(0deg);
  }
  
  &__part-back-inner {
    width: $partSize * $cols + $margins * ($cols - 1) * 2;
    height: $partSize * $rows + $margins * ($rows - 1) * 2;    
    
    background-image: url(http://kirillkiyutin.com/img/nyc/nyc1.jpg);
    background-size: cover;
    background-position: center;
    
    backface-visibility: hidden;
  }
  
  &__help {
    margin-bottom: 7px;
    font-size: 30px;
    font-family: "Yanone Kaffeesatz", sans-serif;
    
    color: white;
    
    & a {
      color: white;
      
      &:hover {
        color: #E39999;
      }
    }
  }
}

@for $row from 1 through $rows {
  @for $col from 1 through $cols {
    .demo__part-#{$row}-#{$col} .demo__part-back-inner {
      transform: translate( -($col - 1) * ($partSize + $margins * 2), -($row - 1) * ($partSize + $margins * 2) );
    }
  }
}

.show-front {
  transform: none;
}
#wb_LayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid1
{
   box-sizing: border-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 50px 0px 25px 0px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid1 > .col-1
{
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid1 > .col-1
{
   -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
}
#LayoutGrid1 > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   flex-basis: 100%;
   max-width: 100%;
   display: -webkit-flex;
   -webkit-flex-wrap: wrap;
   -webkit-align-content: center;
   -webkit-align-self: stretch;
   -webkit-align-items: center;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: stretch;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   text-align: center;
}
@media (max-width: 480px)
{
#LayoutGrid1 > .col-1
{
   -webkit-flex-basis: 100% !important;
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}
#wb_Heading1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   box-sizing: border-box;
   vertical-align: top;
   margin: 0px 0px 25px 0px;
   padding: 0;
   text-align: center;
}
#Heading1
{
   color: #FFFFFF;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 43px;
   margin: 0;
   text-align: center;
}
#wb_LayoutGrid2
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid2
{
   box-sizing: border-box;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1024px;
}
#LayoutGrid2 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid2 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid2 > .row > .col-1
{
   float: left;
}
#LayoutGrid2 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   width: 100%;
   text-align: left;
}
#LayoutGrid2:before,
#LayoutGrid2:after,
#LayoutGrid2 .row:before,
#LayoutGrid2 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid2:after,
#LayoutGrid2 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid2 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#Extension1, #Extension1 *, #Extension1 *:before, #Extension1 *:after
{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
#Extension1
{
   border-radius: 0px;
   flex-shrink: 0;
   font-size: 0;
   padding: 2px;
   perspective: 700px;
   width: 100%;
}
#Extension1 .block-placeholder
{
   background-color: #778899;
   border: 0px solid #000000;
   border-radius: 0px;
   display: inline-block;
   height: 100px;
   margin: 2px;
   width: 100px;
}
#Extension1 .block
{
   display: inline-block;
   height: 100px;
   margin: 2px;
   position: relative;
   transform: rotateY(180deg);
   transform-style: preserve-3d;
   transition: all 300ms ease-in-out;
   width: 100px;
}
#Extension1 .block:hover .block-front:after
{
   opacity: 0;
}
#Extension1 .block-front, #Extension1 .block-back
{
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   border: 0px solid #000000;
   border-radius: 0px;
   cursor: pointer;
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
}
#Extension1 .block-front
{
   background-color: #778899;
   background-size: cover;
   background-position: center;
   transform: rotateX(0deg);
   transition: all 200ms ease;
}
#Extension1 .block-front:after 
{
   background-color: #00000094;
   content: "";
   height: 100%;
   left: 0;
   opacity: 0.5;
   position: absolute;
   top: 0;
   transition: all 0.2s ease;
   width: 100%;
}
#Extension1 .block-back 
{
   transform: rotateY(180deg) rotateX(0deg);
}
#Extension1 .block-back-inner
{
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   background-image: url(images/america-2800896_1280.jpg);
   background-size: cover;
   background-position: center;
   height: 416px;
   width: 624px;
}
#Extension1 .show-front
{
   transform: none;
}
#wb_LayoutGrid3
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   height: 10vh;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid3
{
   box-sizing: border-box;
   height: 10vh;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 50px 0px 50px 0px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid3 > .col-1
{
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid3 > .col-1
{
   -webkit-flex: 0 0 auto;
   flex: 0 0 auto;
}
#LayoutGrid3 > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   flex-basis: 100%;
   max-width: 100%;
   display: -webkit-flex;
   -webkit-flex-wrap: wrap;
   -webkit-align-content: center;
   -webkit-align-self: stretch;
   -webkit-align-items: center;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: stretch;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   text-align: center;
}
@media (max-width: 480px)
{
#wb_LayoutGrid3, #LayoutGrid3
{
   height: auto;
}
#LayoutGrid3 > div[class^="col-"]
{
   height: 10vh;
}
#LayoutGrid3 > .col-1
{
   -webkit-flex-basis: 100% !important;
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text1 div
{
   text-align: center;
}
#wb_Text1
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text2 div
{
   text-align: center;
}
#wb_Text2
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}