@import url(https://fonts.googleapis.com/css?family=Raleway:300);

html,
body,
header
{
	margin: 0; padding: 0;
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	-webkit-font-smoothing: antialiased;
	background-color: #272727;
	color: #ffffff;
}

.bgvid
{
	position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.index-bg
{
	background: url(../images/bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.client-bg
{
	background: url(../images/client-bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.header
{
	display: block;
	position: fixed;
	width: 100%;
	z-index: 99999;
}

.header
.top
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50px;
/* 	background-color: #393939; */
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9;
}

.header
.top
.logo
{
	display: inline-block;
	margin-left: 10px;
	height: 50px;
}

.header
.top
.menu-btn
{
	display: inline-block;
	vertical-align: top;
	height: 50px;
	line-height: 50px;
	color: #ffffff;
	font-size: 22px;
	margin-left: 20px;
	padding: 0px 10px 0px 10px;
/* 	background-color: #505050; */
	background-color: #252525;
	
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	cursor: pointer;
}

.header
.top
.menu-btn:hover
{
	background-color: #606060;
}

.header
.top
.menu-btn:active
{
	background-color: #bebebe;
}

.header
.bottom
{
	display: block;
	position: absolute;
	left: 0;
	top: 0px;
	width: 100%;
	height: 50px;
	background-color: rgba(27, 27, 27, 0.7);
	z-index: 8;
}

.header
.bottom
ul
{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	height: 50px;
	margin: 0; padding: 0;
	list-style: none;	
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
}

.header
.bottom
ul
li
{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #ffffff;
	padding: 0px 10px 0px 10px;
	font-size: 18px;
	
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	
	cursor: pointer;
}

.header
.bottom
ul
li:hover
{
	background-color: rgba(255, 255, 255, 0.15);	
}

.header
.bottom
ul
li:active
{
	background-color: rgba(255, 255, 255, 0.25);	
}

.page
{
	position: absolute;
	left: 0;
	top: 100px;
	right: 0;
	padding-bottom: 70px;
}

.center-logo
{
	display: block;
	width: 400px;
	image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.footer
{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 35px;
	background-color: rgba(0, 0, 0, 0.7);
	text-align: center;
	line-height: 35px;
	font-size: 14px;
	color: #ffffff;
	z-index: 99998;
}

.client-page
{
	margin-top: 50px;
	width: 100%;
}

.client-page
.logo
{
	display: block;
	width: 20%;
	pointer-events: none;
}

.client-page
.description
{
	display: block;
	margin-top: 80px;
	width: 70%;
	color: #ffffff;
	word-wrap: break-word;
	font-size: 28px;
}

.client-page
.stats
{
	display: block;
	margin-top: 80px;
	width: 95%;
}

.client-page
.stats
.stat
{
	display: inline-block;
	text-align: center;
	word-wrap: break-word;
	color: #ffffff;
	font-size: 28px;
	border-radius: 10%;
	margin: 20px;
	padding: 10px;
	border: 1px solid #ffffff;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	cursor: default;
}

.counter
{
	display: inline-block;
}

.page
.clients
{
	width: 95%;
}

.page
.clients
.client
{
	display: inline-block;
	width: 320px;
	height: 180px;
	cursor: pointer;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 2px solid #ffffff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.page
.clients
.client:hover
{
	
	border: 10px solid #5278d8;
}

.page
.client-page
.name
{
	margin-top: 50px;
	font-size: 48px;
}

.page
.client-page
.authors
{
	margin-top: 20px;
	font-size: 28px;
}

.page
.client-page
.buttons
{
	margin-top: 20px;
	font-size: 28px;
}

.page
.client-page
.button
{
	display: inline-block;
	background-color: #333333;
	color: #ffffff;	
	padding: 10px;
	margin-left: 10px;
	font-size: 24px;
	border: 2px solid #999999;
	width: 140px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	cursor: pointer;
}

.page
.client-page
.button:hover
{
	background-color: #ffffff;
	color: #333333;
}

.page
.client-page
.button:active
{
	background-color: #bbbbbb;
	color: #333333;
}

.page
.client-page
.views
{
	margin-top: 50px;
	color: #54ffa4;
}

.page
.client-page
.downloads
{
	margin-top: 50px;
}

.page
.client-page
.keybinds
{
	margin-top: 50px;
}

.page
.client-page
table
tr
td
{
	padding: 0px 40px 0px 40px;
}

.page
.client-page
table
tr
td
{
	font-size: 20px;
}

.page
.client-page
table
tr
td
a
{
	color: #878787;
	text-decoration: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.page
.client-page
table
tr
td
a:hover
{
	color: #8b8be9;
}

.page
.client-page
table
tr
td
a:active
{
	color: #d28be8;
}


@media(max-width: 1280px)
{
	.client-page
	.logo
	{
		width: 240px;
	}
}