body {
	background:#222;
}

#mainGrid {
	margin:1rem;
	display:grid;
	grid-template-columns: 6fr 6fr;
	grid-gap: 1rem;
	grid-template-rows: 60vh auto 20vh auto;
}

@media screen and (max-width: 1000px) {

		#mainGrid {
			margin:1rem;
			display:grid;
			grid-template-columns: 12fr;
			grid-gap: 1rem;
			grid-template-rows: 35vh auto auto auto;
		}

		#mainGrid > div.rightBack > img {
			max-height:320px;
		}
}

#mainGrid > div.leftBack:hover, #mainGrid > div.rightBack:hover {
	box-shadow: inset 1px 1px 2px #fff, inset -1px 1px 2px #000;
}

#mainGrid > div.leftBack {
	background:url(/gfx/vstopna-left-back.jpg) center;
	background-size: cover;
	padding:2rem;
	border-radius:10px;
	text-align:center;
	position:relative;
}

#mainGrid > div.leftBack > img {
}

.enterArea {
	height:100%;
	display:grid;
	align-content: center;
}

#mainGrid > div.rightBack {
	background:url(/gfx/vstopna-right-back.jpg) center;
	background-size: cover;
	padding:2rem;
	border-radius:10px;
	position:relative;
}

#mainGrid > div.rightBack > img {
	position:absolute;
	bottom:1rem;
	left:10px;
	
}

#mainGrid .middleGrid {
	grid-column-start: 1;
	grid-column-end: 4;

}

#mainGrid .middleGrid img {
	border-radius:1rem;
	margin-right:1rem;
}


@media screen and (max-width: 1000px) {

#mainGrid .middleGrid {
	grid-column-start: 1;
	grid-column-end: 2;

}
}

#mainGrid .subGrid {
	display:grid;
	grid-template-columns: 6fr 6fr;
	grid-gap: 1rem;
}

.subGrid img {
	border-radius:10px;
}

#mainContent {
	background: white;
	padding-top:2rem;
	padding-bottom:5rem;
	background: rgb(34,34,34);
	background: -moz-linear-gradient(top,  rgba(34,34,34,1) 0%, rgba(255,255,255,1) 33%);
	background: -webkit-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(255,255,255,1) 33%);
	background: linear-gradient(to bottom,  rgba(34,34,34,1) 0%,rgba(255,255,255,1) 33%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#ffffff',GradientType=0 );
}

.hover-img {
	-webkit-transition: 1s cubic-bezier(.86, 0, .07, 1);
		-o-transition: 1s cubic-bezier(.86, 0, .07, 1);
			transition: 1s cubic-bezier(.86, 0, .07, 1);
}

.mainField:hover .hover-img {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}


.arrow-btn-box {
	display: inline-block;
	position: relative;
}

.arrow-btn {
	padding: 25px 60px 25px 40px;
	background: #1b2a2f;
	color: white;
	-webkit-transition: .5s cubic-bezier(.86, 0, .07, 1);
		-o-transition: .5s cubic-bezier(.86, 0, .07, 1);
			transition: .5s cubic-bezier(.86, 0, .07, 1);
	display: inline-block;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 3px;
}

.arrow-btn-box:hover .arrow-btn {
	padding: 25px 90px 25px 40px;
}

.arrow-btn:before {
	content: '';
	position: absolute;
	top: 50%;
	right: 40px;
	-webkit-transform: translateY(-50%) scaleX(0);
	    -ms-transform: translateY(-50%) scaleX(0);
	        transform: translateY(-50%) scaleX(0);
	width: 30px;
	height: 2px;
	-webkit-transition: .5s cubic-bezier(.86, 0, .07, 1);
		-o-transition: .5s cubic-bezier(.86, 0, .07, 1);
			transition: .5s cubic-bezier(.86, 0, .07, 1);
	-webkit-transform-origin: right;
	    -ms-transform-origin: right;
	        transform-origin: right;
	background: #ef0d33;
}

.arrow-btn:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 40px;
	width: 7px;
	height: 7px;
	border-right: 2px solid white;
	border-top: 2px solid white;
	-webkit-transform: translateY(-50%) rotate(45deg);
	    -ms-transform: translateY(-50%) rotate(45deg);
	        transform: translateY(-50%) rotate(45deg);
	-webkit-transition: .5s cubic-bezier(.86, 0, .07, 1);
		-o-transition: .5s cubic-bezier(.86, 0, .07, 1);
			transition: .5s cubic-bezier(.86, 0, .07, 1);
}

.arrow-btn-box:hover .arrow-btn:before {
	-webkit-transform: translateY(-50%) scaleX(1);
	    -ms-transform: translateY(-50%) scaleX(1);
	        transform: translateY(-50%) scaleX(1);
}

.arrow-btn-box:hover .arrow-btn:after {
	border-right: 2px solid #ef0d33;
	border-top: 2px solid #ef0d33;
}

.dark-bg-1 .arrow-btn,
.dark-bg-2 .arrow-btn {
	background: #f5f5f5; 
	color: #262626;
}

.dark-bg-1 .arrow-btn:after,
.dark-bg-2 .arrow-btn:after {
	border-right: 2px solid #262626;
	border-top: 2px solid #262626;
}

.red-bg .arrow-btn {
	color: #ef0d33;
}

.red-bg .arrow-btn:after {
	border-right: 2px solid #ef0d33;
	border-top: 2px solid #ef0d33;
}