@charset "UTF-8";

.header {
	margin-bottom: 50px;
}

.header
.header__logo {
	padding: 20px 0;
	border-bottom: 1px solid #00ffff;
	background:
		linear-gradient(
			bottom,
			transparent 0%, 
			transparent 50%,
			rgba(0, 255, 255, 0.3)
		);
	background:
		-webkit-gradient(
			linear,
			left top, left bottom,
			from(transparent),
			color-stop(0.5, transparent),
			to(rgba(0, 255, 255, 0.3))
		);
}

.header
.header__logo
.header__logo__link {
	display: block;
	position: relative;
	transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
	color: #fff;
	letter-spacing: 3px;
	padding: 10px 0;
	text-align: center;
	font-size: 26px;
	line-height: 30px;
	text-indent: 35px;
	width: 250px;
	margin: 0 auto;
}

.header
.header__logo
.header__logo__link:hover {
	opacity: 0.6;
}

.header
.header__logo
.header__logo__link:active {
	   -moz-transform: scale(0.96);
	    -ms-transform: scale(0.96);
	-webkit-transform: scale(0.96);
	     -o-transform: scale(0.96);
	        transform: scale(0.96);
}

.header
.header__logo
.header__logo__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 30px;
	height: 30px;
	background-image: url('icon_logo.png');
	background-size: contain;
}

.gNav {
	background-color: rgba(0, 255, 255, 0.15);
	border-bottom: 1px solid #000;
	text-align: center;
	position: relative;
}

.gNav
.gNav__list {
	list-style: none;
}

.gNav
.gNav__list
.gNav__list__item {
	display: inline-block;
	position: relative;
	margin: 0 16px;
}

.gNav
.gNav__list
.gNav__list__item:first-child {
	margin-left: 0;
}

.gNav
.gNav__list
.gNav__list__item:last-child {
	margin-right: 0;
}

.gNav
.gNav__list
.gNav__list__item--active::after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background:
		linear-gradient(to left, #000 0%, #00ffff 50%, #000 100%);
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link {
	display: inline-block;
	position: relative;
	padding: 16px 5px;
	color: #fff;
	font-size: 18px;
	line-height: 1em;
	text-indent: 20px;
	transition:
		opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.gNav
.gNav__list
.gNav__list__item--active
.gNav__list__item__link {
	color: #00ffff;
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link:hover {
	opacity: 0.6;
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link:active {
	   -moz-transform: scale(0.96);
	    -ms-transform: scale(0.96);
	-webkit-transform: scale(0.96);
	     -o-transform: scale(0.96);
	        transform: scale(0.96);
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link:before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	bottom: 0;
	top: 0;
	left: 0;
	margin: auto ;
	background-size: contain;
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link--games:before {
	background-image: url('icon_games.png');
}

.gNav
.gNav__list
.gNav__list__item--active
.gNav__list__item__link--games:before {
	background-image: url('icon_games_on.png');
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link--about:before {
	background-image: url('icon_about.png');
}

.gNav
.gNav__list
.gNav__list__item--active
.gNav__list__item__link--about:before {
	background-image: url('icon_about_on.png');
}

.gNav
.gNav__list
.gNav__list__item
.gNav__list__item__link--contact:before {
	background-image: url('icon_contact.png');
}

.gNav
.gNav__list
.gNav__list__item--active
.gNav__list__item__link--contact:before {
	background-image: url('icon_contact_on.png');
}

@media screen and (max-width: 480px) {
	.gNav
	.gNav__list
	.gNav__list__item {
		margin: 0;
	}

	.gNav
	.gNav__list
	.gNav__list__item
	.gNav__list__item__link {
		font-size: 14px;
	}
}

.socialButtons {
	text-align: center;
}
