/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

 @import url('https://fonts.googleapis.com/css?family=Chivo:300,300i,400,400i,700,700i,900,900i|Saira+Extra+Condensed:100,200,300,400,500,600,700,800|Saira:100,200,300,400,500,600,700,800');

html {
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
	margin: 0;
}

/* HTML5 display definitions
	 ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
	display: inline-block; /* 1 */
	vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
	display: none;
	height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
	display: none;
}

/* Links
	 ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
	outline: 0;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
	border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
	font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
	font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
	font-size: 2em;
	margin: .67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
	background: #ff0;
	color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
	border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
	overflow: hidden;
}

/* Grouping content
	 ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
	margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
	box-sizing: content-box;
	height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
	overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Forms
	 ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
	color: inherit; /* 1 */
	font: inherit; /* 2 */
	margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
	overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
	text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
	cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
	line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: .35em .625em .75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
	border: 0; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
	overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
	font-weight: bold;
}

/* Tables
	 ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

.main-menu,
.main-menu .sub-menu,
.accordion,
.news-post,
.tabset,
.items-list,
#footer .info-list,
.socialnetworks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.ellipsis {
	white-space: nowrap; /* 1 */
	text-overflow: ellipsis; /* 2 */
	overflow: hidden;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

* {
	max-height: 1000000px;
}

body {
	color: #c2c2c2;
	background: #202225;
	font-family: "Alata", sans-serif;
	min-width: 320px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

.gm-style img {
	max-width: none;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.h {
	font-family: inherit;
	font-weight: bold;
	margin: 0 0 .5em;
	color: inherit;
	letter-spacing: 2px;
}

h1,
.h1 {
	font-size: 64px;
}

h2,
.h2 {
	font-size: 40px;
}

h3,
.h3 {
	font-size: 32px;
}

h4,
.h4 {
	font-size: 20px;
}

h5,
.h5 {
	font-size: 17px;
}

h6,
.h6 {
	font-size: 15px;
}

p {
	margin: 0 0 1em;
}

a {
	color: #c2c2c2;
}

a:hover,
a:focus {
	text-decoration: none;
}

form,
fieldset {
	margin: 0;
	padding: 0;
	border-style: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
	width: 100%;
	box-sizing: border-box;
}

select {
	-webkit-border-radius: 0;
}

textarea {
	resize: vertical;
	vertical-align: top;
}

button,
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="submit"] {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	cursor: pointer;
}

@font-face {
	font-family: "Big John";
	src: url("../fonts/BigJohn.woff2") format("woff2"), url("../fonts/BigJohn.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "icomoon";
	src: url("../fonts/icomoon.eot?lpfptz");
	src: url("../fonts/icomoon.eot?lpfptz#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?lpfptz") format("truetype"), url("../fonts/icomoon.woff?lpfptz") format("woff"), url("../fonts/icomoon.svg?lpfptz#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* vietnamese */

@font-face {
	font-family: 'Alata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Alata Regular'), local('Alata-Regular'), url(https://fonts.gstatic.com/s/alata/v2/PbytFmztEwbIoceyzqYhQA.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
	font-family: 'Alata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Alata Regular'), local('Alata-Regular'), url(https://fonts.gstatic.com/s/alata/v2/PbytFmztEwbIocezzqYhQA.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
	font-family: 'Alata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Alata Regular'), local('Alata-Regular'), url(https://fonts.gstatic.com/s/alata/v2/PbytFmztEwbIoce9zqY.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[class^="icon-"],
[class*=" icon-"] {
	font-family: "icomoon" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-youtube:before {
	content: "\e906";
}

.icon-arrow-down:before {
	content: "\e905";
}

.icon-twitter:before {
	content: "\e900";
}

.icon-discord:before {
	content: "\e901";
}

.icon-info:before {
	content: "\e902";
}

.icon-minus:before {
	content: "\e903";
}

.icon-plus:before {
	content: "\e904";
}

.icon-calendar:before {
  content: "\e912";
}

.sticky-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	-webkit-transition: .2s linear;
	transition: .2s linear;
	height: 69px !important;
	width: 100% !important;
}

.sticky-wrap.fixed-position {
	background: #202225;
}

#header {
	position: relative;
	width: 100% !important;
	border-bottom: 1px solid rgba(194, 194, 194, .2);
	-webkit-transition: .2s linear;
	transition: .2s linear;
	top: 0;
	left: 0;
	right: 0;
	font: 16px/1.375 "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.fixed-position #header {
	background: #202225;
}

#header:before {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	content: "";
	-webkit-transition: linear .3s;
	transition: linear .3s;
	content: "";
	opacity: 0;
	visibility: hidden;
	background: #202225;
	z-index: 99;
}

#header .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	max-width: 100%;
	padding: 16px 10px 16px 18px;
}

#header .logo {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 120px;
}

#header .logo img {
	display: block;
	width: 100%;
	height: auto;
}

.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	content: "";
	-webkit-transition: linear .3s;
	transition: linear .3s;
	content: "";
	opacity: 0;
	visibility: hidden;
	background: #202225;
	z-index: 99;
}

#nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	width: 240px;
	padding: 59px 16px 50px;
	background: #36393f;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: linear .3s;
	transition: linear .3s;
	z-index: 999;
}

.nav-active #nav {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.nav-active #nav .menu-overlay {
	opacity: .8;
	visibility: visible;
}

#nav .btn {
	min-width: 208px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	padding: 12px 15px;
	border: 1px solid #38ffa6;
	color: #38ffa6;
}

#nav .btn:hover {
	color: #fff;
	border-color: #fff;
}

.main-menu {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	margin: 0 -16px;
	padding: 15px 0;
	text-transform: uppercase;
	border-top: 1px solid rgba(194, 194, 194, .2);
}

.main-menu > li {
	margin: 0;
	position: relative;
}

.main-menu > li.has-drop > a:after {
	position: absolute;
	top: 50%;
	right: 15px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: "icomoon";
	content: "";
	font-weight: normal;
	font-size: 20px;
	line-height: 1;
}

.main-menu > li:hover > a:before,
.main-menu > li.active > a:before {
	height: 100%;
	opacity: 1;
	visibility: visible;
}

.main-menu > li > a {
	display: block;
	position: relative;
	padding: 15px 20px;
	color: #c2c2c2;
}

.main-menu > li > a:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 0;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: linear .3s;
	transition: linear .3s;
	border-width: 0 0 0 2px;
	border-style: solid;
	border-color: #38ffa6;
	background: rgba(255, 255, 255, .05);
}

.main-menu .dropdown {
	width: 100%;
	padding: 0;
	border: 2px solid rgba(194, 194, 194, .2);
	background: #202225;
	display: none;
}

.main-menu .sub-menu {
	display: block;
}

.main-menu .sub-menu li {
	margin: 0;
}

.main-menu .sub-menu a {
	display: block;
	position: relative;
	padding: 15px 15px;
	color: #c2c2c2;
}

.main-menu .sub-menu a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 0;
	visibility: hidden;
	opacity: 1;
	-webkit-transition: linear .4s;
	transition: linear .4s;
	background: rgba(56, 255, 166, .35);
}

.main-menu .sub-menu a:hover:before {
	width: 100%;
	visibility: visible;
	opacity: 1;
	color: #fff;
	background: rgba(56, 255, 166, .35);
}

.nav-opener {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: 1px solid #36393f;
	z-index: 9999;
}

.nav-opener:before,
.nav-opener:after,
.nav-opener span {
	background: #c2c2c2;
	position: absolute;
	top: 50%;
	left: 25%;
	right: 25%;
	height: 2px;
	margin-top: -2px;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}

.nav-opener:before,
.nav-opener:after {
	content: "";
	top: 31%;
}

.nav-opener:after {
	top: 69%;
}

.nav-active .nav-opener {
	border: 1px solid #202225;
}

.nav-active .nav-opener span {
	opacity: 0;
}

.nav-active .nav-opener:after,
.nav-active .nav-opener:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 15%;
	right: 15%;
}

.nav-active .nav-opener:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-active .nav-opener:hover {
	opacity: .9;
}

body {
	min-width: 320px;
	font-size: 12px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.h {
	margin: 0 0 10px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

h1,
.h1 {
	font-size: 32px;
	line-height: 40px;
}

h2,
.h2 {
	font-size: 28px;
	line-height: 32px;
}

h3,
.h3 {
	font-size: 22px;
	line-height: 28px;
}

h4,
.h4 {
	font-size: 16px;
	line-height: 20px;
}

p {
	margin: 0 0 16px;
}

p:last-child {
	margin: 0 !important;
}

a {
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
	text-decoration: none;
}

.btn {
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
	padding: 15px 23px;
	border: 3px solid #2f3136;
	z-index: 2;
	font-family: "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.btn:before {
	width: 0;
	content: "";
	position: absolute;
	left: 50%;
	right: 0;
	top: 0;
	bottom: 0;
	-webkit-transform: translateX(-50%) skew(-25deg);
	-ms-transform: translateX(-50%) skew(-25deg);
	transform: translateX(-50%) skew(-25deg);
	background: #01b972;
	-webkit-transition: linear .35s;
	transition: linear .35s;
	z-index: -1;
}

.btn:hover:before {
	width: 130%;
}

.btn.btn-green {
	background: #01b972;
}

.btn.btn-green:before {
	background: #01ac44;
}

.btn.btn-white {
	border-color: #fff;
	background: none;
	cursor: pointer;
}

.btn.btn-white:before {
	background: #fff;
}

.btn.btn-white:hover {
	color: #202225;
}

.btn.btn-black {
	border-color: #202225;
	background: #fff;
	color: #202225;
}

.btn.btn-black:before {
	background: #202225;
}

.btn.btn-black:hover {
	color: #fff;
}

.btn.btn-yellow {
	color: #202225;
	background: #e4cc19;
}

.btn.btn-yellow:before {
	background: #c9b51f;
}

.btn.btn-red {
	color: #202225;
	background: #ff2e4c;
}

.btn.btn-red:before {
	background: #c93248;
}

.btn.btn-skew {
	-webkit-transform: skewX(-2deg) rotate(-1deg);
	-ms-transform: skewX(-2deg) rotate(-1deg);
	transform: skewX(-2deg) rotate(-1deg);
}

.btn.btn-skew span {
	display: block;
	-webkit-transform: skewX(0) rotate(2deg);
	-ms-transform: skewX(0) rotate(2deg);
	transform: skewX(0) rotate(2deg);
}

.btn .ico {
	display: inline-block;
	vertical-align: middle;
	font-size: 22px;
	line-height: 1;
	margin: 0 5px 0 0;
}

.learn-more {
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: underline;
}

.learn-more:hover {
	text-decoration: none;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-yellow {
	color: #e4cc19;
}

.text-red {
	color: #ff2e4c;
}

.text-green {
	color: #01b972;
}

.text-black {
	color: #202225;
}

.subtitle {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 5px;
}

.container {
	max-width: 1278px;
	padding: 0 32px;
	margin: 0 auto;
}

.container-lg {
	max-width: 1170px;
	padding: 0 32px;
	margin: 0 auto;
}

#wrapper {
	overflow: hidden;
	position: relative;
}

#main {
	overflow: hidden;
}

.intro-section {
	width: 100%;
	padding: 110px 0 80px;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.intro-section:after {
	content: "";
	position: absolute;
	top: 100px;
	right: 0;
	width: 197px;
	height: 215px;
	background: url(../images/bg-pattren.png) no-repeat;
	background-size: 100% auto;
	z-index: -1;
}

.intro-section.faq {
	padding-bottom: 55px;
}

.intro-section.pricing {
	padding-bottom: 70px;
}

.intro-section.skill {
	width: 100%;
}

.intro-section.skill:after {
	content: "";
	position: absolute;
	top: -10%;
	bottom: 0;
	left: -20%;
	right: -20%;
	height: auto;
	width: auto;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	background: #36393f;
	z-index: -1;
}

.intro-section.bg-img {
	margin: 0 0 10px;
}

.intro-section.bg-img:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1;
}

.intro-section.bg-img:after {
	content: "";
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 40px 140vw;
	border-color: transparent transparent #202225 transparent;
	z-index: 1;
}

.intro-section .container,
.intro-section .container-lg {
	position: relative;
	z-index: 2;
}

.intro-section .icon-holder {
	max-width: 84px;
	margin: 0 0 20px;
}

.intro-section .icon-holder img {
	display: block;
	max-width: 100%;
	height: auto;
}

.intro-section h1 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 18px;
}

.intro-section h2 {
	font-family: "Big John";
	font-weight: 50;
	margin: 0 0 18px;
}

.intro-section p {
	margin: 0 0 40px;
}

.intro-section p br {
	display: none;
}

.intro-section .img-holder {
	max-width: 500px;
	margin: 0 auto 20px;
}

.intro-section .img-holder img {
	display: block;
	width: 100%;
	height: auto;
}

.intro-section .btn-holder {
	margin: 0 -2px;
}

.intro-section .btn {
	margin: 0 2px 5px;
}

.info-section {
	width: 100%;
	padding: 110px 0 80px;
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.info-section:after {
	content: "";
	position: absolute;
	top: 100px;
	right: 0;
	width: 197px;
	height: 215px;
	background: url(../images/bg-pattren.png) no-repeat;
	background-size: 100% auto;
}

.info-section.faq {
	padding-bottom: 55px;
}

.info-section.pricing {
	padding-bottom: 70px;
}

.info-section.skill {
	width: 100%;
}

.info-section.skill:after {
	content: "";
	position: absolute;
	top: -10%;
	bottom: 0;
	left: -20%;
	right: -20%;
	height: auto;
	width: auto;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	background: #36393f;
	z-index: -1;
}

.info-section.bg-img {
	margin: 0 0 10px;
}

.info-section.bg-img:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1;
}

.info-section.bg-img:after {
	content: "";
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	z-index: 1;
}

.info-section .container,
.info-section .container-lg {
	position: relative;
	z-index: 2;
}

.info-section .icon-holder {
	max-width: 84px;
	margin: 0 0 20px;
}

.info-section .icon-holder img {
	display: block;
	max-width: 100%;
	height: auto;
}

.info-section h1 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 18px;
}

.info-section h2 {
	font-family: "Big John";
	font-weight: 50;
	margin: 0 0 18px;
}

.info-section p {
	margin: 0 0 40px;
}

.info-section p br {
	display: none;
}

.info-section .img-holder {
	max-width: 500px;
	margin: 0 auto 20px;
}

.info-section .img-holder img {
	display: block;
	width: 100%;
	height: auto;
}

.info-section .btn-holder {
	margin: 0 -2px;
}

.info-section .btn {
	margin: 0 2px 5px;
}

.splash-section {
	overflow: hidden;
	margin: 0 0 76px;
}

.splash-section .heading-holder {
	width: 100%;
	margin: 0 0 30px;
}

.splash-section h2 {
	font-family: "Big John";
	font-weight: 400;
	text-align: center;
}

.features-section {
	overflow: hidden;
	margin: 0 0 76px;
}

.features-section .heading-holder {
	width: 100%;
	margin: 0 0 30px;
}

.features-section h2 {
	font-family: "Big John";
	font-weight: 400;
}

.feature-holder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.feature-holder.feature-slider .feature-col {
	width: 240px;
	margin: 0 10px 0 0;
	min-height: 300px;
}

.feature-holder .feature-col {
	width: 100%;
	margin: 0 0 8px;
}

.feature-col {
	width: 100%;
	position: relative;
	padding: 30px 20px 24px;
	position: relative;
	background: #36393f;
}

.feature-col:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 168px;
	height: 72px;
	background: url(../images/bg-pattren01.png) no-repeat;
}

.feature-col .img-box {
	width: 114px;
	min-height: 105px;
	margin: 0 0 15px;
}

.feature-col .img-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

.feature-col h3 {
	margin: 0 0 13px;
}

.what-is-vertex {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	margin: 0 0 50px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.what-is-vertex .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-top: 48px;
	padding-bottom: 50px;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

.what-is-vertex .text-area {
	max-width: 600px;
}

.what-is-vertex h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 20px;
}

.what-is-vertex p {
	margin: 0 0 24px;
}

.what-is-vertex .img-box {
	display: none;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	max-width: 350px;
}

.what-is-vertex .img-box img {
	display: block;
	width: 100%;
	height: auto;
}

.slanted-section {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	margin: 0 0 50px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.slanted-section .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-top: 48px;
	padding-bottom: 50px;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

.slanted-section .text-area {
	max-width: 600px;
}

.slanted-section h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 20px;
}

.slanted-section p {
	margin: 0 0 24px;
}

.slanted-section > a > .img-box {
	display: none;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	max-width: 350px;
}

.slanted-section > a > .img-box img {
	display: block;
	width: 100%;
	height: auto;
}

.pattren-img {
	display: block;
	width: 60px;
	height: auto;
	margin: 0 0 13px;
}

.pattren-img.center {
	margin: 0 auto 13px;
}

.our-game {
	width: 100%;
	position: relative;
	padding: 0 0 80px;
}

.our-game:before,
.our-game:after {
	content: "";
	position: absolute;
	top: 50px;
	right: 0;
	width: 165px;
	height: 173px;
	background: url(../images/bg-pattren3.png) no-repeat;
	background-size: 100% auto;
	z-index: -1;
}

.our-game:after {
	right: auto;
	top: auto;
	left: 0;
	bottom: -15px;
	width: 153px;
	height: 173px;
	background: url(../images/bg-pattren4.png) no-repeat;
	background-size: 100% auto;
}

.our-game .heading-holder {
	max-width: 520px;
	text-align: center;
	padding: 0 20px;
	margin: 0 auto 56px;
}

.our-game h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 25px;
}

.games-columns {
	width: 100%;
	text-align: center;
}

.games-columns .col {
	display: block;
	width: 100%;
	position: relative;
	border: 5px solid #2f3136;
	margin: 0 0 2px;
	-webkit-transform: skewY(-1deg);
	-ms-transform: skewY(-1deg);
	transform: skewY(-1deg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.games-columns .col:hover:before {
	opacity: 0;
	visibility: hidden;
}

.games-columns .col:hover .text-holder {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

.games-columns .col:hover .img-box {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.games-columns .col:hover h3 {
	left: -150%;
}

.games-columns .col:hover p {
	right: -150%;
}

.games-columns .col:hover .btn {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.games-columns .col:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-transition: linear .3s;
	transition: linear .3s;
	opacity: 1;
	visibility: visible;
	background: rgba(0, 0, 0, .8);
}

.games-columns .content-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 537px;
	padding: 15px 20px;
}

.games-columns .text-holder {
	border-radius: 5px;
	width: 320px;
	margin: 0 auto;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
	-webkit-transition: linear .3s;
	transition: linear .3s;
}

.games-columns h3 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 20px;
	position: relative;
	left: 0;
	-webkit-transition: .7s ease;
	transition: .7s ease;
}

.games-columns p {
	margin: 0 0 24px;
	-webkit-transition: .7s ease;
	transition: .7s ease;
	position: relative;
	right: 0;
}

.games-columns .img-box {
	width: 60px;
	margin: 0 auto 12px;
	-webkit-transition: .7s ease;
	transition: .7s ease;
	position: relative;
	top: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.games-columns .img-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

.games-columns .btn {
	-webkit-transition: .7s ease;
	transition: .7s ease;
	position: relative;
	bottom: 0;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.accordion {
	width: 100%;
	font-size: 14px;
}

.accordion > li > .opener {
	font-family: "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

.accordion li {
	margin: 0 0 8px;
	background: #36393f;
}

.accordion li.active a.opener:after {
	font-family: "icomoon";
	content: "";
	font-weight: normal;
}

.accordion a.opener {
	display: block;
	font-weight: 700;
	padding: 20px 40px 20px 20px;
	position: relative;
	color: #fff;
	background: #36393f;
}

.accordion a.opener:after {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 20px;
	font-family: "icomoon";
	content: "";
	font-weight: normal;
	font-size: 18px;
	line-height: 1;
	color: #01b972;
}

.accordion .slide {
	padding: 0 20px 20px;
}

.faq-section {
	overflow: hidden;
	margin: 0 0 60px;
}

.faq-section .text-area {
	text-align: center;
	margin: 0 auto 40px;
}

.faq-section .pattren-img {
	width: 60px;
	margin: 0 auto 12px;
}

.faq-section h3 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 24px;
}

.faq-section p {
	margin: 0 0 30px;
}

.join-our-discord {
	width: 100%;
	position: relative;
	font-size: 18px;
	line-height: 23px;
	color: #fff;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.join-our-discord:before {
	content: "";
	position: absolute;
	top: -50px;
	left: 0;
	width: 155px;
	height: 173px;
	background: url(../images/bg-pattren.png) no-repeat;
	background-size: 100% auto;
	z-index: -1;
}

.join-our-discord .container {
	padding-top: 48px;
	padding-bottom: 52px;
}

.join-our-discord .text-area {
	max-width: 650px;
	padding: 0 15px 0 0;
}

.join-our-discord h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 20px;
}

.join-our-discord p {
	margin: 0 0 24px;
}

.join-our-discord .img-box {
	display: none;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	max-width: 385px;
}

.join-our-discord .img-box img {
	display: block;
	width: 100%;
	height: auto;
}

.article-section {
	overflow: hidden;
	padding: 40px 0;
	text-align: center;
}

.article-section .container {
	padding-top: 40px;
	padding-bottom: 40px;
}

.article-section .text-box {
	max-width: 500px;
	margin: 0 auto 40px;
}

.article-section .pattren-img {
	margin: 0 auto 13px;
}

.article-section h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 15px;
}

.article-section p {
	margin: 0 0 25px;
}

.article-section .img-box {
	max-width: 450px;
	margin: 0 auto;
}

.article-section .img-box img {
	display: block;
	width: 100%;
	height: auto;
}

.our-story {
	position: relative;
	margin: 0 -15px 80px;
	color: #fff;
	z-index: 5;
	-webkit-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

.our-story:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: url(../images/bg-pattern.png);
	z-index: -1;
}

.our-story .container {
	padding-top: 48px;
	padding-bottom: 30px;
	-webkit-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	transform: rotate(1deg);
}

.our-story h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 36px;
}

.story-holder .text-col {
	width: 100%;
	position: relative;
	padding: 0 15px 30px 40px;
	z-index: 1;
}

.story-holder .text-col:last-child:after {
	display: none;
}

.story-holder .text-col:after {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 4px;
	left: 11px;
	width: 2px;
	background: #fff;
	z-index: -1;
}

.story-holder .box-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 24px;
	height: auto;
	margin: 0 0 25px;
}

.story-holder h3 {
	text-transform: capitalize;
	margin: 0 0 15px;
}

.team-section {
	overflow: hidden;
	margin: 0 0 64px;
}

.team-section .heading-holder {
	max-width: 520px;
	margin: 0 auto 40px;
}

.team-section h2 {
	font-family: "Big John";
	font-weight: 400;
	margin: 0 0 20px;
}

.team-holder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	margin: 0 -4px;
}

.team-holder .column {
	width: calc(50% - 8px);
	position: relative;
	margin: 0 4px 8px;
	background: #36393f;
}

.team-holder .column:before {
	width: 75% !important;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 168px;
	height: 72px;
	background: url(../images/bg-pattren6.png) no-repeat;
}

.team-holder .column a {
	display: block;
	padding: 20px 5px;
	position: relative;
}

.team-holder .column a:hover .img-box {
	-webkit-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}

.team-holder .img-box {
	width: 40px;
	margin: 0 auto 16px;
	-webkit-transition: linear .2s;
	transition: linear .2s;
}

.team-holder .subtitle {
	display: block;
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	color: #01b972;
	margin: 0 0 6px;
}

.team-holder .title {
	display: block;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
}

.info-section {
	overflow: hidden;
	margin: 0 0 60px;
}

.info-section .container-lg {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	max-width: 1100px;
}

.info-section .col {
	width: 50%;
	padding: 0 5px 35px;
}

.info-section .icon-holder {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 58px;
	height: 65px;
	margin: 0 auto 20px;
}

.info-section .icon-holder img {
	display: block;
	max-width: 100%;
	height: auto;
}

.info-section h3 {
	margin: 0 0 15px;
}

.info-section .subtitle {
	display: block;
	color: #fff;
}

.banner-holder {
	margin: 0 0 30px;
}

.article-banner {
	position: relative;
	padding: 40px 0;
}

.article-banner .container {
	text-align: center;
}

.article-banner .text-holder {
	border-radius: 5px;
	max-width: 500px;
	position: relative;
	margin: 0 auto 40px;
}

.article-banner .text-holder .h3 {
	font-family: "Big John";
}

.article-banner .text-holder:before {
	display: none;
	content: "";
	position: absolute;
	top: 32px;
	right: 0;
	width: 168px;
	height: 72px;
	background: url(../images/bg-pattren6.png) no-repeat;
}

.article-banner .text-holder:after {
	display: none;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/*bottom: -50px;*/
	background: #2f3136;
	z-index: -1;
}

.article-banner .pattren-img {
	margin: 0 auto 13px;
}

.article-banner h2 {
	margin: 0 0 15px;
}

/*.article-banner .background-img {
	margin: 0 -2%;
	min-height: 257px;
	border-width: 5px 0;
	border-style: solid;
	border-color: #2f3136;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	z-index: -1;
}*/

.article-banner .background-img {
	margin: 0 -2%;
	min-height: 257px;
	-webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -1;
}

.login-section {
	width: 100%;
	min-height: calc(100vh - 204px);
	padding: 100px 0 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.login-section:before,
.login-section:after {
	content: "";
	position: absolute;
	top: 100px;
	right: 0;
	width: 200px;
	height: 200px;
	background: url(../images/bg-pattren7.png) no-repeat;
	background-size: 100% auto;
	z-index: -1;
}

.login-section:after {
	display: none;
	left: 0;
	right: auto;
	background: url(../images/bg-pattren8.png) no-repeat;
	background-size: 100% auto;
}

.login-section .container-lg {
	width: 100%;
}

.login-section .form-login {
	max-width: 400px;
	margin: 0 auto;
	background: #36393f;
}

.form-login {
	width: 100%;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 16px;
	background: #36393f;
}

.form-login .btn {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	outline: none;
}

.form-login .text {
	display: block;
	text-align: center;
}

.form-login .text a {
	color: #01b972;
}

.form-group {
	margin: 0 0 16px;
}

label {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	margin: 0 0 12px;
	color: #fff;
}

.form-control {
	width: 100%;
	height: 42px;
	font-size: 12px;
	line-height: 15px;
	color: rgba(194, 194, 194, .4);
	padding: 10px 16px;
	outline: none;
	box-shadow: none;
	border: 0;
	background: #202225;
}

.form-control::-webkit-input-placeholder {
	color: rgba(194, 194, 194, .4);
}

.form-control::-moz-placeholder {
	opacity: 1;
	color: rgba(194, 194, 194, .4);
}

.form-control:-moz-placeholder {
	color: rgba(194, 194, 194, .4);
}

.form-control:-ms-input-placeholder {
	color: rgba(194, 194, 194, .4);
}

.form-control.placeholder {
	color: rgba(194, 194, 194, .4);
}

.pricing-section {
	overflow: hidden;
	font-size: 12px;
	line-height: 16px;
	margin: 0 0 80px;
	position: relative;
	z-index: 3;
	padding-top: 25px;
}

.tabs-select {
	width: 100%;
	border: 2px solid #2f3136;
	position: relative;
	margin: 0 0 16px;
	background: #202225;
	z-index: 5;
	position: relative;
}

.tabs-select.active .tabset li {
	display: block;
}

.tabs-select.active .tabset li.active a {
	color: #01b972;
}

.tabs-select.active .tabs-opener {
	background-color: #01b972;
}

.tabs-select.active .tabs-opener i {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	top: 2px;
	left: 3px;
}

.tabs-opener {
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	z-index: 9;
	width: 51px;
	height: 51px;
	font-size: 24px;
	line-height: 1;
	z-index: 99;
	padding: 15px;
	background: #01b972;
}

.tabs-opener i {
	width: 20px;
	height: 20px;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-transition: .2s linear;
	transition: .2s linear;
}

.tabs-opener:hover {
	background: #01b972;
}

.tabset {
	font-size: 12px;
	line-height: 15px;
	font-weight: 700;
	text-transform: uppercase;
	background: #202225;
}

.tabset li {
	margin: 0;
	display: none;
}

.tabset li.active {
	display: block;
}

.tabset a {
	display: block;
	padding: 18px 26px;
	position: relative;
	color: #fff;
}

.tabset a:hover {
	color: #01b972;
}

.pricing-columns .price-col {
	width: 100%;
	margin: 0 0 24px;
	background-color: #36393f;
}

.pricing-columns > .price-col {
	transition: all .2s;
	box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,.1);
}

.pricing-columns > .price-col:hover {
	margin-top: -1.25rem;
	margin-bottom: 2.75rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,.3);
	transition: all .2s;
}

.pricing-columns .content-wrap {
	width: 100%;
	padding: 32px 20px 85px;
	position: relative;
}

.pricing-columns .content-wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 135px;
	height: 58px;
	background: url(../images/bg-pattren6.png) no-repeat;
	background-size: 100% auto;
}

.pricing-columns .head {
	width: 100%;
	margin: 0 0 32px;
	text-align: center;
}

.pricing-columns .title {
	display: none;
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
	color: #c2c2c2;
	margin: 0 0 25px;
}

.pricing-columns .img-box {
	width: 98px;
	margin: 0 auto 20px;
}

.pricing-columns .img-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pricing-columns .price {
	display: block;
	font-size: 40px;
	line-height: 44px;
	color: #fff;
}

.pricing-columns .price sup {
	font-size: 28px;
	line-height: 30px;
	font-weight: 400;
}

.pricing-columns .btn-holder {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
}

.pricing-columns .btn {
	display: block;
	width: 100%;
}

.items-list {
	color: #fff;
}

.items-list li {
	position: relative;
	padding-bottom:16px;
	padding-top: 16px;
	font-size: 16px;
	padding-left: 16px;
}

.items-list li.none-active .text {
	color: #c2c2c2;
}

.items-list li.none-active .text:before {
	background: #202225;
}

.items-list li.none-active .text:after {
	display: block;
}

.items-list .text {
	display: inline-block;
	vertical-align: top;
	margin: 0 6px 0 0;
	padding: 0 0 0 28px;
	position: relative;
}

.items-list .text:before,
.items-list .text:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	background: #01b972;
}

.items-list .text:after {
	display: none;
	width: auto;
	height: 1px;
	top: 9px;
	right: 0;
	left: 28px;
	background: #c2c2c2;
}

.tooltip {
	display: inline-block;
	vertical-align: top;
	width: 14px;
	position: relative;
	z-index: 999;
}

.tooltip:hover .tooltip-inner {
	visibility: visible;
	opacity: 1;
}

.tooltip .ico {
	display: block;
	font-size: 14px;
	line-height: 1;
}

.tooltip .tooltip-inner {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: linear .3s;
	transition: linear .3s;
	position: absolute;
	bottom: 20px;
	right: -10px;
	width: 140px;
	font-size: 12px;
	line-height: 15px;
	padding: 10px;
	border-radius: 5px;
	background: #202225;
}

/* Slick slider styles */

.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
}

.slick-list:focus {
	outline: none;
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;
}

.slick-track:before,
.slick-track:after {
	content: "";
	display: table;
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none;
}

[dir="rtl"] .slick-slide {
	float: right;
}

.slick-slide img {
	display: block;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
	display: none;
}

#footer {
	width: 100%;
	font-size: 14px;
	line-height: 18px;
	padding: 32px 0 15px;
	position: relative;
	text-align: center;
	background: #36393f;
}

.home #footer:before {
	display: block;
}

#footer:before {
	display: none;
	content: "";
	position: absolute;
	top: -60px;
	left: -20%;
	right: -20%;
	height: 150px;
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	background: #36393f;
	z-index: -1;
}

#footer .ft-col {
	max-width: 320px;
	margin: 0 auto 20px;
}

#footer .footer-logo {
	width: 151px;
	margin: 0 auto 17px;
}

#footer .footer-logo img {
	display: block;
	width: 100%;
	height: auto;
}

#footer .socialnetworks {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

#footer .info-list {
	max-width: 170px;
	border-top: 1px solid #c2c2c2;
	margin: 0  auto;
	padding: 10px 0 0;
}

#footer .info-list li {
	padding: 0 8px 8px;
}

#footer .info-list a {
	color: #c2c2c2;
}

#footer .info-list a:hover {
	color: #01b972;
}

.socialnetworks {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	font-size: 20px;
	line-height: 1;
	margin: 0 -5px 5px;
}

.socialnetworks li {
	padding: 0 5px 10px;
}

.socialnetworks a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #c2c2c2;
	border: 1px solid #c2c2c2;
	border-radius: 50px;
}

.socialnetworks a:hover {
	color: #01b972;
	border-color: #01b972;
}

@media (min-width: 480px) {
	body {
		font-size: 14px;
	}

	.team-holder .column a {
		padding: 40px 15px 30px;
	}

	.team-holder .img-box {
		width: 80px;
		margin: 0 auto 24px;
	}

	.team-holder .subtitle {
		font-size: 14px;
		line-height: 18px;
	}

	.team-holder .title {
		font-size: 16px;
		line-height: 20px;
	}

		/* Timeline */

	.timeline {
		max-width: 100%;
		padding: 30px;
	}

	.timeline .event:before {
		left: 0px;
		min-width: 0px;
	}

	.timeline .event:after {
		left: -37.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: -23px;
	}

	.modal {
		width: 80%;
	}

	.splash-section h2 {
		min-height: 64px;
	}
}

@media (min-width: 768px) {
	#header .container {
		padding: 18px 20px;
	}

	#header .logo {
		width: 140px;
	}

	#nav {
		width: 340px;
		padding: 68px 16px 50px;
	}

	.main-menu {
		font-size: 14px;
		line-height: 18px;
	}

	.nav-opener {
		top: 15px;
		right: 15px;
	}

	body {
		font-size: 16px;
	}

	h1,
	.h1 {
		font-size: 40px;
		line-height: 45px;
	}

	h2,
	.h2 {
		font-size: 30px;
		line-height: 35px;
	}

	h3,
	.h3 {
		font-size: 28px;
		line-height: 32px;
	}

	h4,
	.h4 {
		font-size: 20px;
		line-height: 24px;
	}

	.btn {
		font-size: 14px;
		line-height: 18px;
		padding: 17px 38px;
	}

	.subtitle {
		font-size: 14px;
		line-height: 18px;
	}

	.intro-section {
		padding: 140px 0 110px;
	}

	.intro-section:after {
		width: 360px;
		height: 360px;
	}

	.intro-section.skill:after {
		-webkit-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}

	.intro-section.bg-img {
		margin: 0 0 32px;
	}

	.intro-section.bg-img:after {
		border-width: 0 0 50px 100vw;
	}

	.intro-section h1 {
		margin: 0 0 25px;
	}

	.info-section {
		padding: 140px 0 110px;
	}

	.info-section:after {
		width: 360px;
		height: 360px;
	}

	.info-section.skill:after {
		-webkit-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}

	.info-section.bg-img {
		margin: 0 0 32px;
	}

	.info-section.bg-img:after {
		border-width: 0 0 50px 100vw;
	}

	.info-section h1 {
		margin: 0 0 25px;
	}

	.feature-holder {
		margin: 0 -4px;
	}

	.feature-holder.feature-slider .feature-col {
		width: calc(50% - 8px);
		margin: 0 4px 8px;
		min-height: inherit;
	}

	.feature-holder .feature-col {
		width: calc(50% - 8px);
		margin: 0 4px 8px;
		min-height: inherit;
	}

	.what-is-vertex {
		font-size: 18px;
		line-height: 23px;
		margin: 0 0 80px;
	}

	.what-is-vertex .container {
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.slanted-section {
		font-size: 18px;
		line-height: 23px;
		margin: 0 0 80px;
	}

	.slanted-section .container {
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.our-game:before,
	.our-game:after {
		top: 0;
	}

	.our-game:after {
		top: auto;
		left: 0;
		bottom: 0;
	}

	.games-columns p {
		margin: 0 0 30px;
	}

	.games-columns .img-box {
		width: 75px;
		margin: 0 auto 40px;
	}

	.accordion {
		font-size: 16px;
	}

	.join-our-discord .container {
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.our-story .container-lg {
		padding-top: 72px;
		padding-bottom: 60px;
	}

	.our-story h2 {
		margin: 0 0 65px;
	}

	.story-holder {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		margin: 0 -15px;
	}

	.story-holder .text-col:last-child:after {
		display: block;
	}

	.story-holder .text-col {
		width: 50%;
		position: relative;
		padding: 0 15px 40px;
	}

	.story-holder .text-col:after {
		top: 15px;
		left: 25px;
		right: -9999px;
		bottom: auto;
		height: 2px;
		width: auto;
	}

	.story-holder .box-img {
		position: static;
		width: 28px;
		margin: 0 0 25px;
	}

	.team-section {
		margin: 0 0 80px;
	}

	.team-section .heading-holder {
		padding: 0 20px;
	}

	.team-holder {
		margin: 0 -7px;
	}

	.team-holder .column {
		width: calc(25% - 14px);
		margin: 0 7px 14px;
	}

	.info-section .col {
		padding: 0 10px 35px;
	}

	.info-section .icon-holder {
		width: 72px;
		height: 80px;
	}

	.banner-holder {
		margin: 0 0 50px;
	}

	.article-banner .background-img {
		min-height: 300px;
	}

	.login-section:before,
	.login-section:after {
		width: 250px;
		height: 250px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.login-section:after {
		display: block;
	}

	.form-login {
		font-size: 14px;
		line-height: 18px;
		padding: 20px;
	}

	label {
		font-size: 14px;
		line-height: 18px;
	}

	.form-control {
		height: 51px;
		font-size: 14px;
		line-height: 18px;
	}

	.pricing-section {
		font-size: 14px;
		line-height: 18px;
	}

	.pricing-columns .content-wrap {
		padding: 32px 32px 134px;
	}

	.pricing-columns .content-wrap:before {
		width: 168px;
		height: 72px;
	}

	.pricing-columns .head {
		margin: 0 0 50px;
	}

	.pricing-columns .img-box {
		width: 130px;
		margin: 0 auto 35px;
	}

	.pricing-columns .price {
		font-size: 48px;
		line-height: 52px;
	}

	.pricing-columns .btn-holder {
		padding: 32px;
	}

	.tooltip .tooltip-inner {
		width: 180px;
		bottom: 0;
		left: 100%;
		right: auto;
		margin: 0 0 0 5px;
	}

	/* Timeline */

	.timeline {
		max-width: 95%;
		padding: 40px;
	}

	.timeline .event:before {
		left: 0px;
		min-width: 0px;
	}

	.timeline .event:after {
		left: -47.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: -30px;
	}

	.modal {
		width: 70%;
	}

	.splash-section h2 {
		min-height: 70px;
	}
}

@media (min-width: 1024px) {
	#header {
		padding: 0;
	}

	#header .container {
		padding: 0 20px;
	}

	#header .logo {
		width: 151px;
	}

	#nav {
		position: static;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0;
		overflow-y: inherit;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		background: none;
	}

	#nav .btn {
		min-width: 150px;
	}

	.main-menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		padding: 0 10px 0 0;
		margin: 0;
		border: 0;
	}

	.main-menu > li.has-drop > a:after {
		position: static;
		display: inline-block;
		vertical-align: top;
		font-size: 18px;
		margin: 0 0 0 3px;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	.main-menu > li:hover .dropdown {
		visibility: visible;
		opacity: 1;
	}

	.main-menu > li > a {
		display: inline-block;
		vertical-align: top;
		padding: 20px 18px;
	}

	.main-menu > li > a:before {
		border-width: 0 0 2px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.main-menu .dropdown {
		visibility: hidden;
		opacity: 0;
		-webkit-transition: linear .3s;
		transition: linear .3s;
		position: absolute;
		top: 100%;
		left: 0;
		display: block;
	}

	.nav-opener {
		display: none;
	}

	h1,
	.h1 {
		font-size: 45px;
		line-height: 50px;
	}

	h2,
	.h2 {
		font-size: 36px;
		line-height: 40px;
	}

	h3,
	.h3 {
		font-size: 30px;
		line-height: 34px;
	}

	.flex-reverse {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}

	.container {
		padding: 0 20px;
	}

	.container-lg {
		padding: 0 20px;
	}

	.intro-section {
		padding: 145px 0 120px;
	}

	.intro-section .container,
	.intro-section .container-lg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.intro-section .text-area {
		max-width: 600px;
		padding: 0 15px 0 0;
	}

	.intro-section p br {
		display: block;
	}

	.intro-section .img-holder {
		max-width: 500px;
		margin: 0;
	}

	.info-section {
		padding: 145px 0 120px;
	}

	.info-section .container,
	.info-section .container-lg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.info-section .text-area {
		max-width: 600px;
		padding: 0 15px 0 0;
	}

	.info-section p br {
		display: block;
	}

	.info-section .img-holder {
		max-width: 500px;
		margin: 0;
	}

	.features-section {
		margin: 0 0 100px;
	}

	.feature-holder {
		margin: 0 -8px;
	}

	.feature-holder.feature-slider .feature-col {
		width: calc(25% - 16px);
		margin: 0 8px 16px;
	}

	.feature-holder .feature-col {
		width: calc(25% - 16px);
		margin: 0 8px 16px;
	}

	.feature-col .img-box {
		min-height: 115px;
	}

	.what-is-vertex {
		margin: 0 0 90px;
	}

	.what-is-vertex .text-area {
		padding: 0 15px 0 0;
	}

	.what-is-vertex .img-box {
		display: block;
	}

	.pattren-img {
		width: 80px;
	}

	.pattren-img.center {
		margin: 0 auto 20px;
	}

	.our-game {
		padding: 0 0 100px;
		margin: 0 0 50px;
	}

	.our-game:before,
	.our-game:after {
		width: 302px;
		height: 344px;
	}

	.our-game:after {
		width: 359px;
		height: 344px;
	}

	.our-game .heading-holder {
		max-width: 720px;
		margin: 0 auto 65px;
	}

	.games-columns {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}

	.games-columns .col {
		width: 33%;
		border: 7px solid #2f3136;
		-webkit-transform: skewX(-1deg) skewY(0);
		-ms-transform: skewX(-1deg) skewY(0);
		transform: skewX(-1deg) skewY(0);
	}

	.games-columns .content-wrap {
		height: 580px;
		padding: 15px;
	}

	.accordion li {
		margin: 0 0 12px;
	}

	.accordion a.opener {
		padding: 20px 40px 20px 24px;
	}

	.accordion a.opener:after {
		right: 24px;
	}

	.accordion .slide {
		padding: 5px 24px 24px;
	}

	.faq-section {
		margin: 0 0 100px;
	}

	.faq-section .container,
	.faq-section .container-lg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.faq-section .text-area {
		max-width: 35.1%;
		text-align: left;
		margin: 0;
	}

	.faq-section .pattren-img {
		width: 80px;
		margin: 0 0 20px;
	}

	.faq-section .accordion {
		max-width: 49.2%;
	}

	.join-our-discord:before {
		top: -200px;
		width: 400px;
		height: 300px;
	}

	.join-our-discord .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding-top: 75px;
		padding-bottom: 75px;
	}

	.join-our-discord .img-box {
		display: block;
	}

	.article-section {
		text-align: left;
		padding: 40px 0 70px;
	}

	.article-section .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.article-section .container:nth-child(even) {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}

	.article-section .text-box {
		max-width: 450px;
		margin: 0;
	}

	.article-section .pattren-img {
		margin: 0 0 20px;
	}

	.article-section .img-box {
		max-width: 500px;
		margin: 0;
	}

	.our-story {
		margin: 0 -15px 100px;
	}

	.our-story .container-lg {
		padding-top: 112px;
		padding-bottom: 120px;
	}

	.story-holder .text-col {
		width: 25%;
		padding: 0 15px;
	}

	.team-section .heading-holder {
		max-width: 720px;
		margin: 0 auto 70px;
	}

	.team-holder .column {
		width: calc(20% - 14px);
	}

	.team-holder .title {
		font-size: 18px;
		line-height: 22px;
	}

	.info-section {
		margin: 0 0 80px;
	}

	.info-section .col {
		width: 25%;
	}

	.banner-holder {
		margin: 0 0 150px;
	}

	.article-banner {
		overflow: hidden;
		margin: 0 -8px 45px;
		padding: 0;
		/*-webkit-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		transform: rotate(-1deg);*/
	}

	.article-banner:nth-child(odd) .container {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.article-banner .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		text-align: left;
		width: 100%;
		height: 550px;
		padding: 0 30px;
		/*-webkit-transform: rotate(1deg);
		-ms-transform: rotate(1deg);
		transform: rotate(1deg);*/
	}

	.article-banner .text-holder {
		border-radius: 5px;
		max-width: 460px;
		padding: 40px 25px 50px;
		margin: 0;
		background: #2f3136;
	}

	.article-banner .text-holder:before {
		display: block;
	}

	.article-banner .text-holder:after {
		display: block;
	}

	.article-banner .pattren-img {
		margin: 0 0 20px;
	}

	.article-banner h2 {
		margin: 0 0 20px;
	}

	.article-banner .background-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-width: 8px 0;
		min-height: inherit;
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
	}

	.tabs-select {
		display: none;
	}

	.pricing-columns {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		margin: 0 -12px;
	}

	.pricing-columns .price-col {
		width: calc(33.33% - 24px);
		margin: 0 12px 24px;
	}

	.pricing-columns .title {
		display: block;
	}

	#footer {
		text-align: left;
		padding: 49px 0;
	}

	#footer .container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	#footer .ft-col {
		max-width: 320px;
		margin: 0;
	}

	#footer .footer-logo {
		margin: 0 0 17px;
	}

	#footer .socialnetworks {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	#footer .info-list {
		max-width: inherit;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	#footer .info-list li {
		padding: 0 8px 5px;
	}

	/* Timeline */

	.timeline {
		max-width: 85%;
		padding: 50px;
	}

	.timeline .event:before {
		left: 0px;
		min-width: 0px;
	}

	.timeline .event:after {
		left: -57.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: -30px;
	}

	.modal {
		width: 60%;
	}

	.splash-section h2 {
		min-height: 80px;
	}
}

@media (min-width: 1200px) {
	#header .container {
		padding: 0 40px;
	}

	#nav .btn {
		min-width: 161px;
	}

	.main-menu {
		padding: 0 20px 0 0;
	}

	.main-menu > li > a {
		padding: 25px 24px;
	}

	h1,
	.h1 {
		font-size: 55px;
		line-height: 65px;
	}

	h3,
	.h3 {
		font-size: 32px;
		line-height: 36px;
	}

	.intro-section:after {
		right: 0;
		width: 494px;
		height: 430px;
	}

	.intro-section .text-area {
		max-width: 640px;
	}

	.intro-section .img-holder {
		max-width: 598px;
	}

	.info-section:after {
		right: 0;
		width: 494px;
		height: 430px;
	}

	.info-section .text-area {
		max-width: 640px;
	}

	.info-section .img-holder {
		max-width: 598px;
	}

	.features-section {
		margin: 0 0 150px;
	}

	.features-section .heading-holder {
		margin: 0 0 50px;
	}

	.feature-col {
		border-radius: 5px;
		padding: 47px 28px 28px;
	}

	.feature-col .img-box {
		margin: 0 0 22px;
	}

	.feature-col h3 {
		margin: 0 0 20px;
	}

	.what-is-vertex {
		font-size: 20px;
		line-height: 25px;
	}

	.what-is-vertex .container {
		padding-top: 85px;
		padding-bottom: 85px;
	}

	.what-is-vertex .text-area {
		max-width: 730px;
	}

	.what-is-vertex .img-box {
		max-width: 385px;
	}

	.slanted-section {
		font-size: 20px;
		line-height: 25px;
	}

	.slanted-section .container {
		padding-top: 85px;
		padding-bottom: 85px;
	}

	.slanted-section .text-area {
		max-width: 730px;
	}

	.slanted-section .img-box {
		display: block;
		max-width: 385px;
	}

	.pattren-img {
		width: 80px;
		margin: 0 0 20px;
	}

	.our-game .heading-holder {
		margin: 0 auto 95px;
	}

	.games-columns .content-wrap {
		height: 650px;
	}

	.faq-section {
		margin: 0 0 150px;
	}

	.join-our-discord {
		min-height: 321px;
		font-size: 20px;
		line-height: 25px;
	}

	.join-our-discord .container {
		padding-top: 85px;
		padding-bottom: 85px;
	}

	.join-our-discord .text-area {
		max-width: 730px;
	}

	.article-section .text-box {
		max-width: 400px;
	}

	.article-section .img-box {
		max-width: 576px;
	}

	.info-section {
		margin: 0 0 150px;
	}

	.article-banner .container {
		height: 704px;
	}

	.article-banner .text-holder {
		border-radius: 5px;
		max-width: 496px;
		padding: 46px 48px 96px;
	}

	.login-section:before,
	.login-section:after {
		width: 300px;
		height: 392px;
	}

	.pricing-section {
		margin: 0 0 150px;
	}

		/* Timeline */

	.timeline {
		max-width: 80%;
		padding: 50px;
	}

	.timeline .event:before {
		left: 0px;
		min-width: 0px;
	}

	.timeline .event:after {
		left: -57.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: -30px;
	}

	.modal {
		width: 50%;
	}

	.splash-section h2 {
		min-height: 80px;
	}
}

@media (min-width: 1440px) {
	h1,
	.h1 {
		font-size: 64px;
		line-height: 80px;
	}

	h2,
	.h2 {
		font-size: 40px;
		line-height: 45px;
	}

	.container {
		padding: 0 15px;
	}

	.container-lg {
		padding: 0 15px;
	}

	.intro-section {
		padding: 190px 0 135px;
	}

	.intro-section.bg-img {
		padding: 245px 0;
	}

	.intro-section .text-area {
		max-width: 660px;
	}

	.info-section {
		padding: 190px 0 135px;
	}

	.info-section.bg-img {
		padding: 245px 0;
	}

	.info-section .text-area {
		max-width: 660px;
	}

	.features-section {
		margin: 0 0 200px;
	}

	.what-is-vertex {
		margin: 0 0 200px;
	}

	.our-game {
		padding: 0 0 200px;
	}

	.games-columns .content-wrap {
		height: 800px;
	}

	.faq-section {
		margin: 0 0 200px;
	}

	.team-section {
		margin: 0 0 150px;
	}

	.login-section:before,
	.login-section:after {
		width: 392px;
		height: 430px;
	}

	/* Timeline */

	.timeline {
		max-width: 80%;
		padding: 50px;
	}

	.timeline .event:before {
		left: -260px;
		min-width: 176px;
	}

	.timeline .event:after {
		left: -57.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: 0;
	}

	.modal {
		width: 50%;
	}

	.splash-section h2 {
		min-height: 45px;
	}
}

@media (max-width: 1023px) {
	.nav-active .menu-overlay {
		opacity: .8;
		visibility: visible;
	}

	.nav-active #header:before {
		opacity: .8;
		visibility: visible;
	}

	body.nav-active {
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.pr-md-0 {
		padding-right: 0 !important;
	}

	.js-tab-hidden {
		display: block !important;
		left: -9999px !important;
		position: absolute !important;
		top: -9999px !important;
	}

	.our-game h2 {
		font-size: 22px;
		margin: 0 0 15px;
	}

	.games-columns .text-holder {
		border-radius: 5px;
		font-size: 14px;
		line-height: 19px;
	}

	.games-columns h3 {
		font-size: 28px;
	}

	.story-holder h3 {
		margin: 0 0 10px;
	}

	.team-section h2 {
		font-size: 22px;
		line-height: 26px;
		margin: 0 0 10px;
	}

	.info-section h3 {
		font-size: 24px;
	}

	.form-login .text {
		font-size: 10px;
	}
}

@media (max-width: 479px) {

	/* Timeline */

	.timeline {
		max-width: 100%;
		padding: 20px;
	}

	.timeline .event:before {
		left: 0px;
		min-width: 0px;
	}

	.timeline .event:after {
		left: -27.85px;
	}

	.timeline .event:before,
	.timeline .event:after {
		top: -15px;
	}

	.modal {
		width: 90%;
		box-sizing: content-box;
	}

	.modal-content > .img-box > img {
		height: 50%;
		width: 50%;
	}

	.splash-section h2 {
		min-height: 128px;
	}
}

.parallax {

	/* Full height */
	height: 100%;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.news-post {
	width: 100%;
	font-size: 14px;
}

.news-post li {
	margin: 0 0 8px;
	background: #36393f;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 1.5em 2.14em;
}

.news-post .news-post-title {
	display: block;
	font-weight: 700;
	font-size: 24px;
	padding: 20px 40px 20px 20px;
	position: relative;
	color: #fff;
	background: #36393f;
}

.news-post li {
	margin: 0 0 12px;
}

.news-post .news-post-title {
	padding: 20px 40px 20px 24px;
}

.news-post .news-post-title:after {
	right: 24px;
}

.news-post .news-post-text {
	padding: 5px 24px 24px;
	line-height: 1.9;
}

.news-post .news-post-footer {
	padding: 5px 24px 24px;
	font-weight: 700;
}

.news-post .news-post-footer img {
	border-radius: 50% !important;
    margin-right: 5px;
    max-width: 34px;
    display: inline-block;
    vertical-align: middle;
}

.btn.btn-news {
	padding: 7px 23px;
	border: 2px solid #2f3136;
	border-color: #fff;
	float: right;
}

.btn.btn-news.btn-white-news {
	background: none;
}

.btn.btn-news.btn-white-news:before {
	background: #fff;
}

.btn.btn-news.btn-white-news:hover {
	color: #01b972;
}

.news-post-page {
	padding: 5px 24px 24px;
	font-weight: 700;
}

.news-post-page img {
	border-radius: 50% !important;
    margin-right: 5px;
    max-width: 34px;
    display: inline-block;
    vertical-align: middle;
}

.doc-section {
	overflow: hidden;
	margin: 0 0 76px;
}

.doc-section .heading-holder {
	width: 100%;
	margin: 0 0 30px;
}

.doc-section h2 {
	font-family: "Big John";
	font-weight: 400;
}

.doc-section h3 {
	font-family: "Big John";
	font-weight: 400;
}

.img-slant {
	-webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.slanted-section .container a:hover .img-box {
	-webkit-transform: rotate(8deg);
	-ms-transform: rotate(8deg);
	transform: rotate(8deg);
}

.slanted-section .container > a > .img-box {
	margin: 0 auto 16px;
	-webkit-transition: linear .2s;
	transition: linear .2s;
}

.rectangle-slanted {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	margin: 0 0 50px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #36393f;
  	-webkit-clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
	clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
	z-index: -1;
}

.rectangle {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	margin: 0 0 50px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #36393f;
	z-index: -1;
}

.rectangle-header {
	background-image: url(images/section-header.png);
}

.rectangle-footer {
	background-image: url(images/section-footer.png);
}

.hide-element {
	visibility: hidden;
}

/* Timeline */

.timeline > body {
	background: #252827;
	font-size: 16px;
}

.timeline > p {
	font-weight: 300;
}

.timeline > a {
	color: #6c6d6d;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	letter-spacing: .3em;
	font-size: .6em;
	font-weight: 400;
	background: #252727;
	padding: .3rem 1rem;
	margin: 1.9rem 0 0 0;
	float: right;
}

.timeline > a:hover {
	color: #ffffff;
	background: #004ffc;
	border-bottom: .35em solid black;
}

.timeline > strong {
	font-weight: 600;
}

#timeline-content > h1 {
	font-family: "Big John";
	letter-spacing: 1.5px;
	color: #ffffff;
	font-weight: 400;
	font-size: 2.4em;
}

#timeline-content {
	margin-top: 50px;
	text-align: center;
}

.timeline {
	border-left: 4px solid #38ffa6;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.8);
	margin: 50px auto;
	letter-spacing: 0.5px;
	position: relative;
	line-height: 1.4em;
	font-size: 1.03em;
	/*padding: 50px;*/
	list-style: none;
	text-align: left;
	font-weight: 100;
	/*max-width: 80%;*/
}

.timeline h1 {
	letter-spacing: 1.5px;
	font-weight: 100;
	font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
	font-family: "Big John";
	letter-spacing: 1.5px;
	font-weight: 400;
	font-size: 1.4em;
}

.timeline .event {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	padding-bottom: 25px;
	margin-bottom: 50px;
	position: relative;
}

.timeline .event:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}

.timeline .event:before,
.timeline .event:after {
	position: absolute;
	display: block;
	/*top: 0;*/
}

.timeline .event:before {
	/*left: -260px;*/
	color: rgba(255, 255, 255, 0.4);
	content: attr(data-date);
	text-align: right;
	font-weight: 100;
	font-size: 0.9em;
	/*min-width: 176px;*/
	font-family: "Big John";
}

.timeline .event:after {
	box-shadow: 0 0 0 4px #38ffa6;
	/*left: -57.85px;*/
	background: #313534;
	border-radius: 50%;
	height: 11px;
	width: 11px;
	content: "";
	top: 5px;
}

.modal-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

/**
 * Modal
 */
.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	background-color: #202225;
	/*width: 50%;*/
	max-height: 80%;
	padding: 1rem;
	border-radius: 3px;
	opacity: 0;
	overflow-y: auto;
	visibility: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	backface-visibility: hidden;
	transform: scale(1.2);
	transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

.modal-content {
	overflow-y: auto;
	margin-top: auto;
}

.modal-content > .img-box > img,
.modal-content > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.modal-content > .img-box > img {
	padding-top: 30px;
	padding-bottom: 60px;
}

.modal h3 {
	font-family: "Big John";
	text-align: center;
}

.modal p {
	text-align: center;
	padding-bottom: 10px;
	overflow-y: initial;
	padding-left: 20px;
	padding-right: 20px;
}

.modal .close-modal {
	position: absolute;
	cursor: pointer;
	top: 5px;
	right: 15px;
	opacity: 0;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition-delay: 0.3s;
}

.modal .close-modal svg {
	width: 1.75em;
	height: 1.75em;
}

.modal .modal-content {
	opacity: 0;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition-delay: 0.3s;
}

.modal.active {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.modal.active .modal-content {
	opacity: 1;
}

.modal.active .close-modal {
	transform: translateY(10px);
	opacity: 1;
}

.svg-icon {
  width: 3em;
  height: 3em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #38ffa6;
}

.svg-icon circle {
  stroke: #fff;
  stroke-width: 1;
}

/* Table Styles */

.table-wrapper{
    margin: 10px 70px 70px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: #999B9F;
}

.fl-table td, .fl-table th {
    text-align: center;
    padding: 8px;
}

.fl-table td {
    border-right: 1px solid #202225;
    font-size: 12px;
}

.fl-table thead th {
    color: #01b972;
    background: #2f3136;
}


.fl-table thead th:nth-child(odd) {
    color: #01b972;
    background: #36393f;
}

.fl-table tr:nth-child(even) {
    background: #b9bbbe;
}

.fl-table tr {
	color: #202225;
}

/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: 100%;
    }
    .table-wrapper:before{
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: #01b972;
        padding: 0 0 10px;
    }
    .fl-table thead, .fl-table tbody, .fl-table thead th {
        display: block;
    }
    .fl-table thead th:last-child{
        border-bottom: none;
    }
    .fl-table thead {
        float: left;
    }
    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .fl-table td, .fl-table th {
        padding: 20px .625em .625em .625em;
        height: 60px;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 120px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .fl-table thead th {
        text-align: left;
        border-bottom: 1px solid #202225;
    }
    .fl-table tbody tr {
        display: table-cell;
    }
    .fl-table tbody tr:nth-child(odd) {
        background: none;
    }
    .fl-table tr:nth-child(even) {
        background: transparent;
    }
    .fl-table tr td:nth-child(odd) {
        background: #b9bbbe;
        border-right: 1px solid #202225;
    }
    .fl-table tr td:nth-child(even) {
        border-right: 1px solid #202225;
    }
    .fl-table tbody td {
        display: block;
        text-align: center;
    }
}

.spacer
{
	aspect-ratio: 16/9;
	width: 100%;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 70;
}

.divtop1
{
	background-image: url('../images/bg/divtop1.svg');
}

.divtop2
{
	background-image: url('../images/bg/divtop2.svg');
}

.divtop3
{
	background-image: url('../images/bg/divtop3.svg');
}

.divtop4
{
	background-image: url('../images/bg/divtop4.svg');
}

.divbot1
{
	background-image: url('../images/bg/divbot1.svg');
}

.divbot2
{
	background-image: url('../images/bg/divbot2.svg');
}

.divbot3
{
	background-image: url('../images/bg/divbot3.svg');
}

.divbot4
{
	background-image: url('../images/bg/divbot4.svg');
}

.bdivtop1
{
	background-image: url('../images/bg/bdivtop1.svg');
}

.bdivbot1
{
	background-image: url('../images/bg/bdivbot1.svg');
}

.myBox {
	border: none;
	padding: 5px;
	font: 24px/36px sans-serif;
	width: 200px;
	height: 200px;
	overflow: scroll;
}

/* Scrollbar styles */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: #292b2f;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #40444b;  
}

::-webkit-scrollbar-thumb:hover {
	background: #b9bbbe;  
}

/* Gifs displayed inside text titles */

.clip-text-index {
  background: url(../images/text/title_bg.gif);
}

.clip-text-meltdown {
  background: url(../images/text/fire.gif);
}

.clip-text-allura {
  background: url(../images/text/title_bg.gif);
}

.clip-text-sandbox {
  background: url(../images/text/title_bg.gif);
}

.clip-text {
  background-size: cover;
  background-position: center;
  
  -webkit-background-clip: text;
  color: transparent; // set to transparent, otherwise won't see the background
}

.article-banner .text-holder .h3
{
	backdrop-filter: blur(8px);
}

/* 404 page */

.notfound-body
{
	display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #131313;
  color: #ccc;
  font-size: 96px;
  letter-spacing: -7px;
}

.notfound{
  animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

.notfound:before,
.notfound:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.notfound:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

.notfound:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}