* {
	box-sizing: border-box;
}


.preloader {
	z-index: 9999999999;
	--bg-color: #34314c;
	--size: 200px;
	--first-color: #ff7473;
	--second-color: #ffc952;
	--third-color: #47b8e0;
	--thickness: 3px;
	--duration: 1s;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--duration);
}
.preloader__content {
	position: relative;
	width: var(--size);
	height: var(--size);
}
.preloader__first,
.preloader__second,
.preloader__third {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: var(--duration) linear infinite;
}

.preloader__first {
	border-bottom: var(--thickness) solid var(--first-color);
	animation-name: first; 
}
.preloader__second {
	border-right: var(--thickness) solid var(--second-color);
	animation-name: second; 
}
.preloader__third {
	border-top: var(--thickness) solid var(--third-color);
	animation-name: third; 
}

@keyframes first{
	0% {
	transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
	transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes second {
	0% {
	transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
	transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes third{
	0% {
	transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
	transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

















a {
	transition: 0.5s ease-out;
}


::-webkit-scrollbar {
	display: none;
}


html {
	overflow-x: hidden;

}
.main-overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 0;
	background-image: -moz-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
	background-image: -webkit-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
	background-image: -ms-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
}
html,body {
	font-family: 'Poppins', sans-serif;
	line-height: 1.5;
	font-size: 16px;
	min-width: 280px;
	scroll-behavior: smooth;
}

img {
	display: inline-block;
}

.bgrep{
	height: 30vh;
	background-image: url(../img/bgrep.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;

}

.portfolio-item {
	margin-bottom: 20px;
}

.container {
	width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.row:after {
clear: both;
content: "";
display: table;
}

.col-4 {
	width: 360px;
	margin-right: 30px;
	float: left;
}

.col-4:last-child {
	margin-right: 0px;
}




header {
	background-image: url(../img/bgheader.png);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;

	height: 100vh;
	min-height: 400px;

	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;

	position: relative;
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-y: scroll;
	overflow-x: hidden;
}

.header__title {
	font-size: 56px;
	margin-bottom: 50px;
	font-family: 'PT Sans', sans-serif ;
	margin-top: -80px;
	z-index: 2;
}

.header__paragr {
	font-size: 22px;
	line-height: 42px;
	z-index: 2;
}

.header__icon {
	font-size: 48px;
	width: 60px;
	height: 50px;

	position: absolute;
	bottom: 50px;
	font: 50%;
	z-index: 2;
}





/*...............................................
						portfolio
.................................................*/


.portfolio-single-page {
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

.portfolio-single-page img  {
	margin-bottom: 50px;
	max-width: 100%;
	height: auto;
	box-shadow: 15px 15px 15px;
}

.main-button {
	position: absolute;
	top: 98%;
	left: 50%;
	transform: translate(-50%, -50%);
}




.butt {
	border: 2px solid  #061634;
	font-size: 26px;
	color: #061634;
	text-decoration: none;
	text-transform: uppercase;
	width: 260px;
	height: 60px;
	display: block;
	position: relative;
	text-align: center;
	line-height: 60px;
	transition: .5s;
	overflow: hidden;

}
.butt:hover {
	color: #fff;
}
.butt::before,
.butt::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: #061634;
	left: -100%;
	top: 0;
	opacity: .5;
	transition: 0.5s;
	z-index: -1;
}
.butt::after {
	opacity: 1;

	transition-delay: .2s;
}
.butt:hover::before, 
.butt:hover::after {
	left: 0;
}

/*...............................................
						portfolio-site
.................................................*/





.portfolio {
	background-color: #F4F4F4FF;
	padding-top: 200px;
	padding-bottom: 100px;
}


.title {
	font-size: 46px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 150px;
}

.portfolio-item__img {
	margin-bottom: 17px;

}

.portfolio-item__img img {
	max-width: 100%;
	box-shadow: 5px 5px 50px;

}

.portfolio-item__title {
	font-size: 24px;
	line-height: normal;
	margin-bottom: 5px;
}

.portfolio-item__title a {
	text-decoration: none;
	color: #000;
	border-bottom: 1px solid #F4F4F4FF;
}

.portfolio-item__title a:hover {
	color: #23DBDBFF;
	border-color:  #23DBDB;
}

.portfolio-item__text p {
	margin-top: 0;
	margin-bottom: 30px;
}



/*...............................................
						CUBE 3d
.................................................*/
.title__cube {
	font-size: 46px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 150px;
	padding-top: 90px;
}


.mestocube {
	padding-top: 80px;
	padding-bottom: 300px;
	background-image: -moz-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
	background-image: -webkit-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
	background-image: -ms-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
}

.container__cube {
	width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.cube {
	width: 300px;
	height: 300px;
	margin: 200px auto 0;
	transform-style: preserve-3d;
	animation: rotate 10s infinite linear;
	margin-bottom: 100px;
}

.side {
	position: absolute;
	width: 300px;
	height: 300px;
	border: 1px solid rgb(136,211,206);
	text-align: center;
	line-height: 300px;
	font-size: 52px;
}

.back {
 transform: translateZ(-150px);
background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}
.left {
	transform: translateX(-150px) rotateY(90deg);
	background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}
.right {
	transform: translateX(150px) rotateY(90deg);
	background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}
.top {
	transform: translateY(-150px) rotateX(90deg);
	background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}
.bottom {
	transform: translateY(150px) rotateX(90deg);
	background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}
.front {
	transform: translateZ(150px);
	background-image: -webkit-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: -o-linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
background-image: linear-gradient(150deg, rgb(110,69,226) 0%, rgb(136,211,206) 100%);
}

@keyframes rotate {
	100% {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}




.button-back {
	text-decoration: none;
	font-weight: 700;
	color: #061634;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	padding: 8px  23px 8px 23px;



	display: inline-block;
	border: 2px solid #061634;
	border-radius: 50px;

	margin-bottom: 13px;
}
.button-back i {
	margin-right: 13px;
}
.button-back:hover {
	color: #fff;
	background-color: #061634;
	-webkit-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}












.slider {
	background-color: #F4F4F4FF;
	padding-top: 150px;
	padding-bottom: 100px;
	z-index: 2;
}


.all {
	margin-top: 100px;
}

#slider { 
    position: relative;
	text-align: center;
    top: 10px;
}
#slider{ 
	margin: 0 auto;
}
#slides article{
	width: 20%;
	float: left;
}
#slides .image{ 
	width: 500%;
	line-height: 0;

}
#overflow{ 
	width: 100%;
	overflow: hidden;
}
article img{ 
	width: 100%;

}
#desktop:checked ~ #slider{ 
	max-width: 960px;
}

#switch1:checked ~ #controls label:nth-child(5), 
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4){
	background: url('prev.png') no-repeat; 
	float: left;
	margin: 0 0 0 -84px;
	display: block;
	height: 68px;
	width: 68px;
}
#switch1:checked ~ #controls label:nth-child(2), 
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(1){
	background: url('next.png') no-repeat;
	float: right;
	margin: 0 -84px 0 0; 
	display: block;
	height: 68px;
	width: 68px;
}
label, a{ 
	cursor: pointer;
}
.all input{ 
	display: none;
}
#switch1:checked ~ #slides .image{
	margin-left: 0;
}
#switch2:checked ~ #slides .image{
	margin-left: -100%;
}
#switch3:checked ~ #slides .image{
	margin-left: -200%;
}
#switch4:checked ~ #slides .image{
	margin-left: -300%;
}
#switch5:checked ~ #slides .image{
	margin-left: -400%;
}
#controls{
	margin: -25% 0 0 0;
	width: 100%;
	height: 50px;
}
#active label{
	border-radius: 10px;
	display: inline-block;
	width: 15px;
	height: 15px;
	background: #bbb;
}
#active{ 
	margin: 23% 0 0;
	text-align: center;
}
#active label:hover{ 
	background: #76c8ff;
	border-color: #777 !important; 
}
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
	background: #18a3dd;
	border-color: #18a3dd !important;
}
#slides .image{ 
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#controls label:hover{
	opacity: 0.6;
}
#controls label{ 
	transition: opacity 0.2s ease-out;
}
/* .........................................

					FOOTER

.............................................. */


footer {
	background-color: #061634;
	color: #6479a2;
	padding-top: 90px;
	padding-bottom: 120px;
}

footer p {
	margin-top: 0;
	margin-bottom: 15px;
}

p.footer__name {
	font-size: 28px;
	margin-bottom: 10px;
	line-height: normal;
	font-family: 'PT Sans', sans-serif ;
}

p.footer__social {
	color: #fff;
}
p.footer__social-icons {

	font-size: 32px;
}

p.footer__social-icons a {
		color: #fff;
		text-decoration: none;
		margin-right: 20px;
}
.p.footer__social-icons a:last-child {
	margin-right: 0px;
}

p.footer__social-icons a:hover {
	color: #455DB9FF;
}

.button {
	text-decoration: none;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	padding: 8px  23px 8px 23px;



	display: inline-block;
	border: 2px solid #fff;
	border-radius: 50px;

	margin-bottom: 13px;
}

.button:hover {
	color: #061634;
	background-color: #fff;
	-webkit-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}



/* .........................................

					AUDOI

.............................................. */


.title__audio {
	font-size: 46px;
	padding-top: 20px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 150px;
	z-index: 2;
}

audio {
	width: 1110px;
}

.audio {
	z-index: 2;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 70px;
	background-color:  #061634;
	width: 100%;
	height: 200px;
	margin-bottom: 100px;
}

.audio__title {
	font-size: 22px;
	color: #061634;
	display: block;
	padding-right: 50px;
	padding-left: 50px;
	height: 60px;
	background-color: #fff;
	font-family: 'PT Sans', sans-serif ;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	margin-right: 30px;
	z-index: 99;
}


/* .........................................

						MAP

.............................................. */


.title__map {
	font-size: 46px;
	padding-top: 20px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 150px;
}


.map {
	background-color: #F4F4F4FF;
	padding-top: 100px;
	padding-bottom: 100px;
}

.map__geo {
	width: 100%;
	
}
.map__geo iframe {
	border-radius: 0 0 15px 15px;
	box-shadow: 2px 2px 30px;
}


.social__icon {
	font-size: 32px;
	text-align: center;
}

.social__text {
	text-align: center;
	font-family: 'PT Sans', sans-serif;
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 50px;
}



/* .........................................

					FORM-obra

.............................................. */

.form__inputs input{	
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: transparent;
	outline: none;
	transition: 0.3s;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: transparent;
	outline: none;
	transition: 0.3s;

}
.form__inputs {
	letter-spacing: 1px;
	padding-top: 2rem;


}
.red {
	color: red;
}
.obr-bg textarea {
	font-size: 20px;
}

.contact__waraper {
	width: 753px;
	margin: 0 auto;
	color: #1e1e1e;
}

.form__inputs {
	display: flex;
	justify-content: space-between;
	margin-top: 100px;
	
}

.button-obr {
	padding-bottom: 20px;
	padding-top: 20px;
}
.obr-bg {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	background-color: #fff;
	box-shadow: 0 10px 24px #ccc;
	border-radius: 15px;
	margin-bottom: 5rem;
}

.contact__from {
	padding-right: 20px;
	padding-left: 20px;
}

.contact__from input  {
	width: 100%;
	height: 40px;
	font-size: 20px;
	margin-bottom: 30px;
}
.contact__from textarea {
	width: 100%;
	height: 160px;
}

.contact__from input, textarea {
	border: 1px solid #999999;
}

.contact__from input:first-of-type {
	margin-right: 24px;
}

.button__block {
	display: flex;
	justify-content: flex-end;
}

.button__block button{
	margin-top: 20px;
	margin-bottom: 90px;
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px;
}

.contact__from input[type=submit] {
	width: 165px;
	height: 40px;
	background: #303030FF;
	color: #fff;
	margin-right: 0;
	margin-top: 20px;
}

.title__contact {
	font-size: 46px;
	padding-top: 80px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
}

/* .........................................

					FORM-reg

.............................................. */


.title__regestration {
	font-size: 46px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 150px;
	padding-top: 90px;
}

.form__regestration {
	background: #F4F4F4FF;
}

.multi-input input{
	width: 500px;
	height: 40px;
}

.input-right input{
	width: 300px;
	height: 40px;
	display: block;
	margin: 0 auto;
}
.form-field {
	display: block;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}

.form__regestration input[type=submit] {
	width: 165px;
	height: 40px;
	background: #303030FF;
	color: #fff;
	margin-top: 20px;
}

.button__block-reg {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -50px;
	padding-bottom: 90px;
}

.button__block-reg button {
	margin-top: 30px;
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
}


.multi-input input:first-of-type {
	margin-right: 24px;
}









/* .........................................

					MENU

.............................................. */

.title__menu {
		font-size: 46px;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
	border-bottom: 2px solid orange;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 150px;
	padding-top: 90px;
}



.menu-nav ul {
	display: flex; 
	list-style-type: none;
	justify-content: center;
	align-items: center;
	padding-bottom: 100px;


}

.menu-nav a {
	text-decoration: none;
	color: #000;
	padding-right: 50px;
	font-size: 21px;
}









.menu input {
	margin: 0 auto;
	display: block;
	width: 200px;
	height: 30px;
	margin-bottom: 50px;
}













.form-reg-group h1 {
	text-align: center;
	padding-bottom: 2rem;
	margin: 0;
}


.form-reg-group {
	width: 400px;
}

.form-reg-group {
	margin: 0 auto;
	padding-bottom: 5rem;
}

.form {
	padding: 32px;
	border-radius: 10px;
	box-shadow: 0 10px 24px #ccc;
	letter-spacing: 1px;
}
.form__input-reg,
.form__button-reg {
	letter-spacing: 1px;
	font-size: 16px;
}

.form__title-reg {
	text-align: center;
	margin-bottom: 32px;
	font-weight: normal;
}

.form__group {
	position: relative;
	margin-bottom: 32px;
}
.form__group label {
	width: 200px;
}

.form__label-reg {
	position: absolute;
	top: 0;
	color: #9e9e9e;
	transition: 0.3s;
}

.form__input-reg {
	width: 100%;
	padding-bottom: 10px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	background-color: transparent;
	outline: none;
	transition: 0.3s;
}
.form__input-reg:focus {
	border-bottom: 1px solid #1a73a8;
}
.form__button-reg {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	color: #fff;
	background-color: #0071f0;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
}

.form__button-reg input {
	opacity: 0;
	position: absolute;
}



/*...............................................

						MEDIA
						
.................................................*/



@media (max-width: 1160px) {
	.container {
		width: 100%;
	}
	.bgrep {
		max-width: 100%;
		
	}
	.bgrep h1 {
		font-size: 22px;
		padding-right: 15px;
		padding-left: 15px;
	}
	.portfolio-item__img img {
		width: 100%;
		height: auto;
	}
	

	.col-4 {
		width: 100%;
		margin: 0;
		margin-bottom: 30px;
		padding-left: 15px;
		padding-right: 15px;
		text-align: center;
		float: none;
		box-sizing: border-box;
	}

	header {
		padding-left: 15px;
		padding-right: 15px;
	}

	.header__title {
		font-size: 38px;
		line-height: 48px;
		margin-bottom: 15px;
	}

	.header__paragr {
		font-size: 22px;
		line-height: 38px;
	}

	.portfolio {
		padding-top: 40px;
		padding-bottom: 50px;
	}

	.title {
		font-size: 36px;
	}
	
	footer {
		padding-top: 70px;
		padding-bottom: 60px;
	}



	.slider {
		display: none;
	}

	audio {
	max-width: 100%;
	padding-right: 30px;
	padding-left: 30px;
	margin-top: 35px;
}
	.audio__title{
		font-size: 16px;
		margin-top: 50px;
		transform: translate(3%,30%);
		text-align: center;
	}

	.audio {
		display: block;
	}

	.map iframe {
		max-width: 95%;
		margin-left: 10px;
		margin-right: 10px;
	}


	.social__text {
		padding-bottom: 20px;
	}






	.form__inputs {
	display: block;
	margin-top: 100px;
	margin: 0 auto;
	padding-top: 100px;

}

.contact__from input {
	width: 250px;
}

.contact__from {
	max-width: 100%;
}






.obr-bg input {
	max-width: 60%;
	height: 30px;
	font-size: 12px;
}
.obr-bg textarea {
	font-size: 16px;
}
.form__inputs p {
	font-size: 12px;
}


.form__inputs {
	display: block;
	margin: 0 auto;
}

.form__inputs input {
	margin: 0 auto;
}

.form__inputs p {
	text-align: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 15px;

}
.contact__from p {
	padding-left: 15px;
}

	.contact__from textarea {
		max-width: 100%;
		margin: 0 auto;
		display: block;
	}









.form__regestration {
		max-width: 100%;
}


.multi-input input{
	width: 270px;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.input-right input{
	width: 270px;
}





.menu-nav ul {
	display: block;
	text-align: center;
	
}

.menu-nav ul li {
	padding-bottom: 20px;
}





.form-reg-group {
	width: 300px;
}






}

@media (max-width: 550px) {
	.cube {
	width: 200px;
	height: 200px;
	margin: 200px auto 0;
	transform-style: preserve-3d;
	animation: rotate 10s infinite linear;
}

.side {
	width: 200px;
	height: 200px;
	line-height: 200px;
	font-size: 32px;
}

.back {
 transform: translateZ(-100px);
}
.left {
	transform: translateX(-100px) rotateY(90deg);
}
.right {
	transform: translateX(100px) rotateY(90deg);
}
.top {
	transform: translateY(-100px) rotateX(90deg);
}
.bottom {
	transform: translateY(100px) rotateX(90deg);
}
.front {
	transform: translateZ(100px);
}
}

@media (max-width: 350px) {
.title__cube {
	padding-top: 1px;
}

.main-button a{
	transform: translate(-200%,0);
	display: block;
}


.cube {
	width: 150px;
	height: 150px;
	margin: 200px auto 0;
	transform-style: preserve-3d;
	animation: rotate 10s infinite linear;
	margin-bottom: -150px;
	margin-top: 130px;
}

.side {
	width: 150px;
	height: 150px;
	line-height: 150px;
	font-size: 22px;
}

.back {
 transform: translateZ(-75px);
}
.left {
	transform: translateX(-75px) rotateY(90deg);
}
.right {
	transform: translateX(75px) rotateY(90deg);
}
.top {
	transform: translateY(-75px) rotateX(90deg);
}
.bottom {
	transform: translateY(75px) rotateX(90deg);
}
.front {
	transform: translateZ(75px);
}
}