*{
	box-sizing:inherit;
}
body{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding:0 10px;
	font-size:16px;
	box-sizing:border-box;
	font-family: 'Roboto', sans-serif;
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	transition:0.5s ease;
	color:#fff;
	background:#000;
}
body.remove_this_class{
	color:#000;
	background:#fff;
}
ul{
	margin-bottom:0;
	margin-top:0;
	padding-left:0;
}
ul ul{
	padding-left:10px;
}
li{
	list-style-type:none;
	position: relative;
}
li:before{
	content:'';
	background:url(sprite.png) no-repeat scroll 0 0;
	width:18px;
	height:18px;
	display:inline-block;
	position: relative;
	left: 0;
	top: 3px;
	margin-right:5px;
}
.remove_this_class li:before{
	display:none;
}
.remove_this_class li{
	list-style-type:inherit;
}
li li:before{
	content:'';
	background:url(sprite.png) no-repeat scroll 0px -28px;
	width: 24px;
	height: 25px;
	display:inline-block;
	position: relative;
	left: 0;
	top: 3px;
	margin-right:5px;
}
h1 a:link,h1 a:visited{
	text-decoration:none;
	color:red;
}
h1{
	-webkit-transition:none;
	-moz-transition:none;
	transition:none;
	cursor:pointer;
	text-decoration:none;
	font-size:1.5rem;
	color:#000ef1;
	display: inline-block;
}
.remove_this_class h1{
	border-bottom: 1px dotted;
}
.front-title{
	font-family: 'Press Start 2P', cursive;
	color:#fff;
}
.remove_this_class .front-title{
	color:#000;
	font-family: 'Roboto', sans-serif;
}
.front-main{
	font-size:0;
}
.front-main-content,.front-main-additional{
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	font-size:1rem;
}
.front-main-content{
	width: 400px;
	margin-bottom:10px;
}
.front-main-additional{
	width: 780px;
	padding: 0 10px;
}
.front-main-additional-image{
	max-width:100%;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
          animation-name: hinge;
}
.animated{
	-webkit-animation-duration: 2s;
          animation-duration: 2s;
-webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.body-magic{
	transform:rotate(180deg);
}