@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Semibold.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Light.woff2') format('woff2'),
        url('../fonts/SFProDisplay-Light.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

/*GENERAL CLASSES*/
button:focus, *, a:focus, a:focus, body{
	outline: none !important;
    -moz-outline-style: none;
}
body{
    overflow-x: hidden;
	font-family: 'SF Pro Display';
	background-color: rgb(17, 17, 17);
    margin: 0;
    color: white;
}
body footer hr{
    border-color: #d1d8e5;
    /*border-color: #a0a88f;*/
}
body.white{
    background-color: #fff;
    color: #888888;
}
.dark{
    color: rgb(17, 17, 17);
}
a.white{
    color: #fff !important;
}
.h1-large{
    font-size: 53px;
    line-height: 53px;
}
.h2-large{
    font-size: 60px;
}
h1:hover, p:hover{
	cursor: default;
}
a, a:hover{
	color:inherit;
	text-decoration: none;
}
.bg-none{
	background-color: transparent;
}
.mh-25{
    max-height:25%;
}
.mw-35{
    max-width:35%;
}
.mw-50{
    max-width:50%;
}
.opacity-1{
    opacity:1 !important;
}
.after-none:after{
    content: none !important;
}
p{
    font-size:20px;
    font-weight:100;
}
label {
    font-size: 12px;
}
footer small{
    letter-spacing: 1px;
}

/*CUSTOM CLASSES*/
.index-1{
    z-index:1;
}
.opacity-0{
    opacity: 0!important;
}
.border-radius-0{
    border-radius: 0;
}
.border-radius-25{
    border-radius: 25px;
}
.border-transparent{
    border-color:transparent !important;
}
.full-div{
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}
.green{
	color: #a2c84c;
}
.background-green{
    background-color: #a2c84c;
}
button.background-green:hover, button.background-green:hover, button.background-green:active, button.background-green:active{
    background-color: #a5cc4d !important;
}
.index-max{
	z-index: 999 !important;
}
.index-really-max{
    z-index: 1000 !important;
}
.d-none{
	display:none !important;
}
.logo{
	width:75px;		
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: #111; 
}
::-webkit-scrollbar-thumb {
  background: #a2c84c; 
}
::-webkit-scrollbar-thumb:hover {
  background: #a2c84c; 
}
.section{
	height:100vh;
}
.dark-overlay {
    background-color: rgba(0, 0, 0, 0.25);
}
.light-overlay {
    background-color: rgba(255, 255, 255, 0.25);
}
.text-yellow{
    color: #f5c351;
}
.text-green{
    color: #89c12a;
}
.text-light-green{
    color: #baed64;
}
.text-blue{
    color: #6082a7;
}
.text-red{
    color: #fb7964;
}
.text-light-blue{
    color: #3bb7b9;
}
.text-super-light {
    color: #cecdcd;
}
.bg-yellow{
    background-color: #f5c351;
}
.bg-green{
    background-color: #89c12a !important;
}
.bg-light-green{
    background-color: #baed64;
}
.bg-blue{
    background-color: #6082a7;
}
.bg-red{
    background-color: #fb7964;
}
.bg-light-blue{
    background-color: #3bb7b9;
}
.font-small{
    font-size: 16px !important;
}
.border-red{
    border-color: #fb7964;
}
.border-blue{
    border-color: #6082a7;
}
.border-light-blue{
    border-color: #3bb7b9;
}
.border-green{
    border-color: #a2c84c !important;
}
button.normal, a.normal{
    font-size: 12;
    border-radius: 3px;
}
.font-16{
    font-size: 16px;
}
.font-25{
    font-size: 25px;
}
.bg-transparent{
    background-color: transparent;
}

/*NAVIGATION*/
.sidenav {
	width: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;    
	transform: translateX(100%);
	background-color: rgb(17, 17, 17);
	transition: 0.5s ease-in-out;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
}
.nav-link{
	font-weight:600;
	font-size:30px;
}
.closebtn{
	font-size: 40px;
}
.sidenav > ul > li:not(:last-child):after, .menu > ul > li:after {
    content: " ";
    width: 5px;
    height: 5px;
    position: absolute;
    background-color: transparent;
    left: 49%;
    bottom: -10px;
    border-radius: 100%;
    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
}
.sidenav > ul > li.active:not(:last-child):after, .menu > ul > li.active:after {
    background-color: #a2c84c;
    transition: background-color 0.5s ease-in-out;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -ms-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
}
nav{
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
nav.scrolled{
    background-color: rgb(17, 17, 17);
}
nav .menu{
	opacity:0;
    position: absolute;
    right: -100%;
    top: 33px;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
nav .burger{
	opacity:1;
    transform: translateX(0);    
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}
nav.scrolled .burger{
	opacity:0;
    transform: translateX(20%);
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
nav.scrolled .menu{
	opacity:1;
    right: 0;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
#SideNav > ul > li > a > div, .menu > ul > li > a > div{
    top: -2px;
    right: -26px;
    transform: rotateZ(90deg);
    width: 21px;
    font-size: 16px;
}

/*BUTTONS*/
.btn-gamecooks{
    white-space: nowrap;
    background: transparent;
    border-radius: 25px;
    color: #fff;
    border: 2px solid #fff;
    font-size: 19px;
    transition: 0.4 linear;
    -webkit-transition: 0.4 linear;
    -moz-transition: 0.4 linear;
    -ms-transition: 0.4 linear;
    -o-transition: 0.4 linear;
}
.btn-gamecooks:hover{
    background: #a2c84c;
    border-color: #a2c84c;
    color: #fff;
}
.btn-small.btn-gamecooks, .btn-small.btn-gamecooks:hover{
    padding: 2px 8px !important;
}

.btn-gamecooks:hover{
	cursor: pointer;
}
.text-btn{
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	font-size: 20px;
	pointer-events: none;
}

.border-radius{
    border-radius: 25px;
}
.back-button{
    top:40px;
    left:60px;
}
.btn-steam, .btn-steam svg, .btn-youtube, .btn-youtube svg, .response{
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
}
.response{
    opacity:0;
}
.response.active{
    opacity:1;
}

.btn-Steam{
    color: #00adee !important;
    border-color: #00adee !important;
}
.btn-youtube{
    color: #ff0000 !important;
    border-color: #ff0000 !important;
}

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

.social-media{
    filter: grayscale(1) contrast(0) brightness(1.6);
    margin: 0px 8px;
    transition: filter 0.3s linear;
    -webkit-transition: filter 0.3s linear;
    -moz-transition: filter 0.3s linear;
    -ms-transition: filter 0.3s linear;
    -o-transition: filter 0.3s linear;
}
.social-media:hover{
    filter: grayscale(0) contrast(1);
}