*
{
	border: 0;
	margin: 0;
	/*padding: 0;*/
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

/*a
{
	text-decoration: none;
}

body
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 50px;
	position: relative;
	width: 620px;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p
{
	clear: both;
	font: 10px Verdana, sans-serif;
	padding: 10px 0;
	text-align: center;
}

p a
{
	background: inherit;
	color: #777;
}

p a:hover
{
	background: inherit;
	color: #000;
}*/

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
	margin-left: 5px;
  	margin-right: 0px;
}

.hoverbox a
{
	/*cursor: default;*/
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -25px;
	z-index: 1;
}

.hoverbox img
{
	/*background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;*/
	color: inherit;
	/*padding: 2px;*/
	vertical-align: top;
	width: 92px;
	height: 73px;
}

.hoverbox li
{
	/*background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;*/
	color: inherit;
	display: inline;
	float: left;
	margin: 1px;
	/*padding: 5px;*/
	position: relative;
}
li.hoverbox2 {
    white-space: nowrap;
    clear: both;
}

.hoverbox .preview
{
	border-color: #000;
	width: 215px;
	height: 171px;
}
/*  http://codepen.io/mikehobizal/pen/EHDsu  */
@import "bourbon";

/*body {
  background: #f1f1fa;
}*/
.bel {
  margin: 40px auto 0;
  font-size: 0;
  max-width: 80%;
}

.wrap {
  -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
  -moz-transform: rotate(45deg) translate3d(0, 0, 0);
  -ms-transform: rotate(45deg) translate3d(0, 0, 0);
  -o-transform: rotate(45deg) translate3d(0, 0, 0);
  transform: rotate(45deg) translate3d(0, 0, 0);
  display: inline-block;
  -webkit-transition: -webkit-transform 300ms ease-out;
  -moz-transition: -moz-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  width: 100px;
}
.wrap:hover {
  -webkit-transition: -webkit-transform 700ms ease-out;
  -moz-transition: -moz-transform 700ms ease-out;
  transition: transform 700ms ease-out;
  -webkit-transform: rotate(45deg) translate3d(10px, 10px, 0);
  -moz-transform: rotate(45deg) translate3d(10px, 10px, 0);
  -ms-transform: rotate(45deg) translate3d(10px, 10px, 0);
  -o-transform: rotate(45deg) translate3d(10px, 10px, 0);
  transform: rotate(45deg) translate3d(10px, 10px, 0);
}
.wrap:nth-child(even) {
  width: 40px;
  -webkit-transform: rotate(225deg) translate3d(30px, 120px, 0);
  -moz-transform: rotate(225deg) translate3d(30px, 120px, 0);
  -ms-transform: rotate(225deg) translate3d(30px, 120px, 0);
  -o-transform: rotate(225deg) translate3d(30px, 120px, 0);
  transform: rotate(225deg) translate3d(30px, 120px, 0);
}
.wrap:nth-child(even) .crop img {
  -webkit-transform: skew(-20deg, -20deg) rotate(-225deg);
  -moz-transform: skew(-20deg, -20deg) rotate(-225deg);
  -ms-transform: skew(-20deg, -20deg) rotate(-225deg);
  -o-transform: skew(-20deg, -20deg) rotate(-225deg);
  transform: skew(-20deg, -20deg) rotate(-225deg);
}
.wrap:nth-child(even):hover {
  -webkit-transform: rotate(225deg) translate3d(40px, 130px, 0);
  -moz-transform: rotate(225deg) translate3d(40px, 130px, 0);
  -ms-transform: rotate(225deg) translate3d(40px, 130px, 0);
  -o-transform: rotate(225deg) translate3d(40px, 130px, 0);
  transform: rotate(225deg) translate3d(40px, 130px, 0);
}

.crop {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0;
  display: block;
  overflow: hidden;
  -webkit-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
  -moz-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
  -ms-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
  -o-transform: skew(20deg, 20deg) translate3d(0, 0, 0);
  transform: skew(20deg, 20deg) translate3d(0, 0, 0);
}
.crop img {
  width: 160px;
  height: 160px;
  position: absolute;
  left: -50%;
  margin-top: 36px;
  margin-left: 36px;
  top: -50%;
  -webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
  -moz-transform: skew(-20deg, -20deg) rotate(-45deg);
  -ms-transform: skew(-20deg, -20deg) rotate(-45deg);
  -o-transform: skew(-20deg, -20deg) rotate(-45deg);
  transform: skew(-20deg, -20deg) rotate(-45deg);
  opacity: 0.7;
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}
.crop img:hover {
  opacity: 1;
}
@media only screen and (max-width: 1024px){
	.hoverbox {
	margin-left: -20px;
    margin-right: -20px;
	}
	.hoverbox.2 {
	/*margin-left: -20px;
    margin-right: -20px;*/
	white-space:normal;
	}
	ul.hoverbox.plusz{
	margin-left: 0px;
    margin-right: 0px;
	}
}
@media only screen and (max-width: 400px) {	
	.hoverbox {
	  margin-left: -22px;
	  margin-right: -22px;
	}
	.mainsection {
	  margin-left: 5px;
	  margin-right: 5px;
	}
	.bel {
	    margin: 50px 5px 5px 30px;
	}
	.hoverbox li {
    margin-left: 15px;
	}
	li.hoverbox2{	
	white-space:normal;
	}
}