* {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	font-family: 'kubikami-tri';
	text-transform: lowercase;
	user-select: none;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
    font-weight: 100;
}

*:focus {
	outline: none;
}

body,
html,
.wrapper {
	height: 100%;
}

.wrapper {
	position: relative;
}

.logo {
	background-image: url(/assets/images/atf.svg);
	position: relative;
	cursor: pointer;
}

.contacts a {
	width: 3.5vh;
	height: 3.5vh;
	margin-left: 0.5vh;
	text-decoration: none;
}

.contacts .vk a {
	background-image: url(/assets/images/social/vk.svg);
}

.contacts .twitter a {
	background-image: url(/assets/images/social/twi.svg);
}

.contacts .direct {
	width: auto;
}

.tags {
	font-size: 1.5vh;
}

	.tags li {
		margin-right: 2vh;
		margin-bottom: 2vh;
		width: auto;
		background-color: #8b9bb4;
		color: #181425;
		box-shadow: 0.5vh 0 0 #8b9bb4, -0.5vh 0 0 #8b9bb4, 0 0.5vh 0 #8b9bb4, 0 -0.5vh 0 #8b9bb4;
		padding: 0 1.5vh;
		cursor: pointer;
		transition: background-color .2s ease, box-shadow .2s ease;
		will-change: background-color, box-shadow;
	}

		.tags li:hover {
			background-color: #c0cbdc;
			box-shadow: 0.5vh 0 0 #c0cbdc, -0.5vh 0 0 #c0cbdc, 0 0.5vh 0 #c0cbdc, 0 -0.5vh 0 #c0cbdc;
		}

		.tags li.active {
			background-color: #e43b44;
			box-shadow: 0.5vh 0 0 #e43b44, -0.5vh 0 0 #e43b44, 0 0.5vh 0 #e43b44, 0 -0.5vh 0 #e43b44;
			will-change: background-color, box-shadow;
		}

.images {
	margin-left: auto;
	margin-right: auto;
}

.images li {
	transition: background-size 0.2s ease, background-position 0.2s ease 0.1s;
	will-change: background-size, background, background-position;
	cursor: pointer;
	background-color: #181c2d;
	position: relative;
	overflow: hidden;
}

	.images li:hover {
		transition: background-size 0.2s ease 0.1s, background-position 0.2s ease;
		background-size: 100% !important;
		background-position: 50% 50% !important;
	}

	.images li > span {
	    display: block;
	    width: 100%;
	    background-color: rgba(228, 59, 68, 0.7);
	    padding: 1vh;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    font-size: 1vh;
	    letter-spacing: 0.1vh;
	    line-height: 1.5vh;
	    transform: translateY(102%);
	    text-indent: -40em;
	    transition: transform 0.2s ease 0.2s, text-indent 0.2s ease 0.3s;
	}

		.images li:hover > span {
			transform: translateY(0);
			text-indent: 0;
		}

.show-more {
	display: block;
    margin: 4vh auto;
}

.show-more,
.contacts a {
	cursor: pointer;
	border: none;
	color: #fff;
	background-color: #262b44;
	opacity: 0.8;
	box-shadow: 0.5vh 0 0 #3a4466, -0.5vh 0 0 #3a4466, 0 0.5vh 0 #3a4466, 0 -0.5vh 0 #3a4466;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	will-change: opacity, box-shadow;
}
	.show-more:hover,
	.contacts a:hover {
		opacity: 1;
		box-shadow: 0.5vh 0 0 #3a4466, -0.5vh 0 0 #3a4466, 0 0.5vh 0 #3a4466, 0 -0.5vh 0 #3a4466, 0 1.5vh 0 #e43b44, 0.5vh 1vh 0 #e43b44, -0.5vh 1vh 0 #e43b44;
	}

	.contacts .direct a,
	.show-more {
		width: auto;
	    line-height: 3.5vh;
	    padding: 0 1.5vh;
	    font-size: 1.5vh;
		font-family: 'kubikami-tri';
	}

.view {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
    padding: 0 9vh;
}

	.view-image {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		max-height: 60vh;
	}

	.view h2 {
		font-family: 'aturbidflow';
	    font-size: 5vh;
	    font-weight: 100;
	    letter-spacing: 0.25vh;
	    margin: 8vh 0 4vh;
	    line-height: 4.5vh;
	    text-transform: none;
	    float: left;
	}

	.view-info {
	    float: right;
	    list-style: none;
	    margin: 8vh 0 0;
	    font-size: 1vh;
	    color: #3a4466;
	}

		.view-info li {
			display: inline-block;
		    vertical-align: middle;
		    margin-left: 4vh;
		}

	.view p {
		clear: both;
	    font-size: 1vh;
	    line-height: 2.5vh;
	    margin-bottom: 4vh;
	    text-transform: none;
    	word-spacing: 1vh;
     	margin: 4vh 0;
	}

	.view footer {
		font-size: 1vh;
		line-height: 4vh;
		color: #3a4466;
	}

	.view a {
		color: #fff;
	}

main,
.view,
.images {
	opacity: 1;
	max-height: 9999999999%;
	top: 0;
	transition: opacity .1s ease .1s, max-height 0s ease, top 0s ease;
}


.hidden {
	opacity: 0;
	pointer-events: none;
	max-height: 100vh;
	overflow: hidden;
	transition: opacity .1s ease, max-height 0s ease .1s, top 0s ease .1s;
}

main.hidden {
	top: -30vh;
	position: absolute;
}


@media screen and (max-width: 920px) {
	.view {
		padding: 0 4vh;
	}

		.view h2 {
			font-size: 3vh;
			float: none;
			margin-bottom: 0;
		}

		.view-info {
			float: none;
			margin-top: 1vh;
		}

			.view-info li {
				margin-left: 0;
				margin-right: 4vh;
			}
}

@media screen and (max-width: 291vh) {
	.wrapper,
	header {
		max-width: 228vh;
	}
}

@media screen and (max-width: 253vh) {
	.wrapper,
	header {
		max-width: 198vh;
	}
}

@media screen and (max-width: 223vh) {
	.wrapper,
	header {
		max-width: 166vh;
	}
}

@media screen and (max-width: 193vh) {
	.wrapper,
	header {
		max-width: 166vh;
	}
}

@media screen and (max-width: 168.2vh) {
	.wrapper,
	header {
		max-width: 136vh;
	}
}

@media screen and (max-width: 138.1vh) {
	.wrapper,
	header {
		max-width: 106vh;
	}
}

@media screen and (max-width: 100vh) {
	.images {
		max-width: 68vh;
	}
}

@media screen and (max-width: 70.1vh) {
	.images {
		max-width: 38vh;
	}
}