.burger {width: auto; height: 44px; float: left; display: none; background-color: #000; position: relative;}
.burger .text {width: 100%; height: 44px; padding: 0px 10px 0px 50px; float: left; color: #FFF; font-size: 16px; font-weight: 400; text-transform: uppercase; display: flex; align-items: center;}
.burger .icon {width: 30px; height: 2px; float: left; background-color: #FFF; position: absolute; top: calc(50% - 1px); left: 10px; transition: all .5s; z-index: 2;}
.burger .icon::before {height: 2px; background-color: #FFF; content: ""; width: 100%; position: absolute; left: 0; transition: all .5s; top: -8px;}
.burger .icon::after {height: 2px; background-color: #FFF; content: ""; width: 100%; position: absolute; left: 0; transition: all .5s; top: 8px;}
.burger.active .icon {background-color: transparent;}
.burger.active .icon::before {top: 0; transform: rotate(45deg);}
.burger.active .icon::after {top: 0; transform: rotate(135deg);}

@media only screen
and (max-width: 1200px)
{
  #mainBanner .slide {*height: 800px;}
  
  .mainFrame {width: 100%;}
  
  #galerieDetail .list .masonry {column-count: 4;}
}


@media only screen
and (max-width: 1000px)
{
  #galerie .list .item {width: 24%; margin-right: 1.33333%;}  
  #galerie .list .item:nth-child(4n) {margin-right: 0;}
}


@media only screen
and (max-width: 900px)
{
  .burger {display: block;}
  
  header {padding: 0 30px;}
  header h1, header .title {font-size: 30px;}  
  header .menu {display: none;}
  header .menu.active {display: block; position: absolute; left: 0; top: 100%; width: 100%; z-index: 20; background-color: rgba(0,0,0,0.4); color: #fff;}
  header .menu ul {justify-content: center;}
  header .menu ul li {padding: 10px 15px;}
  
  #mainBanner .slide {height: calc(100vh - 100px);}
  
  #galerieDetail .list .masonry {column-count: 3;}
}


@media only screen
and (max-width: 800px)
{
  #galerie .list .item {width: 32%; margin-right: 2%;}  
  #galerie .list .item:nth-child(3n) {margin-right: 0;}
}


@media only screen
and (max-width: 600px)
{
  #galerieDetail .list .masonry {column-count: 2;}
}


@media only screen
and (max-width: 500px)
{
  header {padding: 0 20px;}
  header h1, header .title {font-size: 24px;}
  header .menu ul {flex-direction: column; align-items: center;}
  
  .burger .text {visibility: collapse; padding: 0px 0px 0px 6px;}
  
  #mainBanner .slide {*height: 400px;}
  
  #galerie .list .item {width: 100%; margin-right: 0;}  
  #galerie .list .item h2 {margin: 0;}
  
  #galerieDetail .list .masonry {column-count: 1;}
}