/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color       : #222;
	font-size   : 1em;
	line-height : 1.4;
	font-family : 'PT Sans', sans-serif;
}

* {
	box-sizing : border-box;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background  : #b3d4fc;
	text-shadow : none;
}

::selection {
	background  : #b3d4fc;
	text-shadow : none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display    : block;
	height     : 1px;
	border     : 0;
	border-top : 1px solid #ccc;
	margin     : 1em 0;
	padding    : 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align : middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border  : 0;
	margin  : 0;
	padding : 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize : vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	margin     : 0.2em 0;
	background : #ccc;
	color      : #000;
	padding    : 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.layout { flex : 1 }

.layout .container { flex : 1; }

.layout.layout--vertical { display : flex; flex-direction : column; }

.layout.layout--horizontal { display : flex; flex-direction : row; }

.layout.layout--fixed-header { }

.layout.layout--main { max-width : 1920px; margin : 0 auto; position : relative; }

.layout.layout__content { }

.layout.layout__header { }

.layout.layout--footer { position : relative; height : 350px; background-color : #D3D7CA; display : flex; padding-bottom: 100px; }

.container { max-width : 1024px; margin : 0 auto; }

/* Small devices (phone, 768px and up) */
@media (max-width : 575px) {

}

/* Small devices (phone) */
@media (min-width : 576px) {

}

/* Small devices (tablets, 768px and up) */
@media (min-width : 768px) {
	.container { max-width : 1024px; margin : 0 auto; }
	.decal__footer { background-repeat : no-repeat; background-image : url(../assets/decal.png); background-position : 100% 100%; }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width : 992px) {
	.container { max-width : 1024px; margin : 0 auto; }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : 1200px) {
	.container { max-width : 1024px; margin : 0 auto; }
	.decal__footer { background-repeat : no-repeat; background-image : url(../assets/decal.png); background-position : 100% 100%; }
}

.section { display : flex; flex-direction : column; height : inherit; }

.section.section--fill { align-items : stretch; background-color : #F9F9F9; }

.section.section--center { align-items : center; }

.section-group { }

/* Small devices (phone, 768px and up) */
@media (max-width : 575px) {
	.section { padding : 20px; }
}

/* Small devices (phone) */
@media (min-width : 576px) {
	.section { padding : 20px; }
}

/* Small devices (tablets, 768px and up) */
@media (min-width : 768px) {
	.section { display : flex; flex-direction : row; padding : 40px; }

	.spacing--first > *:first-child { margin-right : 67px; }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width : 992px) {
	.section { display : flex; flex-direction : row; padding : 40px; }

	.spacing--first > *:first-child { margin-right : 67px; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : 1200px) {
	.section { display : flex; flex-direction : row; padding : 40px; }

	.spacing--first > *:first-child { margin-right : 67px; }
}

.feature { flex : 1; position : relative; }

.feature .feature__title { margin-top : 30px; margin-bottom : 30px; font-size : 40px; font-weight : bold; color : #000000; }

.feature .feature__body { font-size : 19px; line-height : 1.4; }

.feature .feature__art { position : absolute; top : 0; bottom : 0; right : 0; left : 0; }

.feature.feature--text { padding : 40px; }

.feature.feature--center { display : flex; align-items : flex-start; flex-direction : column; justify-content : center; }

.feature.feature--padding { }

.feature.feature--contacts { width : 312px; }

.list { display : flex; padding : 0; margin : 0; flex : 1; flex-direction : column; }

.list.list--vertical { }

.list.list--center { justify-content : center; }

.list.list--center { align-items : center; }

/* Small devices (phone, 768px and up) */
@media (max-width : 575px) {
	.list { flex-direction : column }

	.feature.feature--contacts { margin : 0 auto }

	.feature.feature--text { padding : 10px }

	.feature.feature--spacing { margin-right : 0; }
}

/* Small devices (phone) */
@media (min-width : 576px) {
	.list { flex-direction : column }
}

/* Small devices (tablets, 768px and up) */
@media (min-width : 768px) {
	.list { flex-direction : row }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width : 992px) {
	.list { flex-direction : row }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : 1200px) {
	.list { flex-direction : row }
}

.card {
	background      : white;
	width           : 300px;
	height          : 450px;
	border          : 1px solid #EAECE5;
	display         : flex;
	flex-direction  : column;
	border-radius   : 6px;
	padding         : 30px 15px;
	cursor          : pointer;
	color           : black;
	text-decoration : none;
}

.card:hover {
	border : 1px solid #C2C8B5;
}

.card:hover .card__art {
	transform : scale(1.1, 1.1);
}

/* Small devices (phone, 768px and up) */
@media (max-width : 575px) {
	.card { flex : 1; margin : 25px 0; }
}

/* Small devices (phone) */
@media (min-width : 576px) {
	.card { flex : 1; margin : 25px 0; }
}

/* Small devices (tablets, 768px and up) */
@media (min-width : 768px) {
	.card { margin-left : 55px; }

	.card:first-child { margin-left : 0; }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width : 992px) {
	.card { margin-left : 55px; }

	.card:first-child { margin-left : 0; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : 1200px) {
	.card { margin-left : 55px; }

	.card:first-child { margin-left : 0; }
}

.card .card__title { font-size : 27px; font-weight : bold; color : #000000; margin : 15px 0; }

.card .card__art { width : 200px; height : 200px; align-self : center; background-size : contain; background-repeat : no-repeat; background-position : 50% 50%; }

.card .card__art.card__art--anim { transition : all 0.3s; }

.game_iris { background-image : url(../assets/game_1.png); }

.game_tanks_masters { background-image : url(../assets/game_2.png); }

.game_bv { background-image : url(../assets/game_3.png); }


.game_cut-the-rope {background-image : url(../assets/cut.png);}
.game_metro2033 {background-image : url(../assets/metro.png);}
.game_wot {background-image : url(../assets/wot.png);}

.card .card__body { font-size : 19px; color : #000000; }

.carousel-wrap { flex : 1; height : 540px; width : 100%; overflow : hidden; }

.carousel-wrap.slick-dotted.slick-slider { margin : 0; }

.carousel-wrap .slick-dots { bottom : 25px; color : white; }

.slick-prev:before, .slick-next:before { color : black; }

.carousel-item { display : flex; position : relative; }

.carousel-item .carousel-item__art { height : 540px; width : 100%; }

.art { background-size : cover; background-position : 50% 50%; }

.art_1 { background-image : url(../assets/bg_1.jpg); }

.art_2 { background-image : url(../assets/bg_2.jpg); }

.tv_1 { background-image : url(../assets/tv_1.png); }

.tv_2 { background-image : url(../assets/tv_2.jpg); }

.carousel-item .carousel-item__art { flex : 1; }

.carousel-item .carousel-item__text {
	position    : absolute;
	bottom      : 40px;
	right       : 0;
	color       : white;
	font-size   : 27px;
	font-weight : bold;
	width       : 459px;
}

.top {
	position   : absolute;
	top        : 0;
	width      : 100%;
	height     : 100px;
	background : -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */
	background : -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
	background : linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */
}

.top .container {
	display        : flex;
	flex-direction : row;
	align-items    : baseline;
	margin-top     : 30px;
}

.brand { flex : 1; color : white; font-size : 27px; font-weight : bold; }

.brand.brand--logo { background-image : url(../assets/logo.png); width : 169px; height : 54px; background-repeat : no-repeat; }

.menu { flex : 1.5; display : flex; flex-direction : row; align-items : flex-end; align-self : center; }

.menu .menu__item { padding : 0 20px; color : white; text-align : center; }

.menu .menu__item .menu__link { color : white; font-size : 19px; text-decoration : none; }

.footer__static-text {
	font-size     : 19px;
	position      : absolute;
	width         : 100%;
	bottom        : 0;
	text-align    : center;
	color         : #a1a595;
	margin-bottom : 30px;
}

/* Small devices (phone, 768px and up) */
@media (max-width : 575px) {
	.menu { display : none }

	.brand { margin-left : 30px; }

	.carousel-wrap { height : 165px; }

	.carousel-item .carousel-item__art { height : 165px; }
}

/* Small devices (phone) */
@media (min-width : 576px) {
	.menu { display : flex }

	.brand { margin-left : 30px; }
}

/* Small devices (tablets, 768px and up) */
@media (min-width : 768px) {
	.menu { display : flex }
}

/* Medium devices (desktops, 992px and up) */

@media (min-width : 992px) {
	.menu { display : flex }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width : 1200px) {
	.menu { display : flex }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.bold {
	font-weight : bold;
}

/*
 * Hide visually and from screen readers
 */

.hidden {
	display : none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
	border   : 0;
	clip     : rect(0 0 0 0);
	height   : 1px;
	margin   : -1px;
	overflow : hidden;
	padding  : 0;
	position : absolute;
	width    : 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip     : auto;
	height   : auto;
	margin   : 0;
	overflow : visible;
	position : static;
	width    : auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility : hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content : " "; /* 1 */
	display : table; /* 2 */
}

.clearfix:after {
	clear : both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width : 35em) {
	/* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio : 1.25),
(min-resolution : 1.25dppx),
(min-resolution : 120dpi) {
	/* Style adjustments for high resolution devices */
}