:root {
    --color-main: #fff;
    --color-primary: #fff;
    --color-primary-hover: #fff;
    /* --color-second: #f7ab00; */

    --font-basic: 'Open Sans', sans-serif;
    --font-decor: 'Raleway', sans-serif;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

html {
	font-family: var(--font-basic);
	color: var(--color-main);
	line-height: 1.75;
	font-size: 14px;
	font-weight: 300;
	line-height: 185%;
		
	margin: 0;
	padding: 0;
	display: block;
	background: #f8f8f8;
}

body {
	display: block;
	overflow-x: hidden;
	height: 100%;
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	color: #fff;
	font-weight: 300;
	line-height: 185%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #414141;
}

main {
	max-width: 1050px;
	margin: 30px auto 75px;
	background: rgba(0,0,0,.6);
	padding: 10px 45px;
	position: relative;
  z-index: 5;
}

main > .row {
	margin-top: 30px;
}

/* General config */
.row{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 0 15px;
}

a { color: var( --color-main ); }

a:hover {
	color: var( --color-primary-hover );
	text-decoration: underline;
	opacity: 0.6;
}

svg {
	height: 16px;
	width: auto;
	display: inline-block;
}

input, button {outline: none;}

textarea { resize: vertical; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-decor);
	font-weight: 700;
	line-height: 1.5;

	margin: 20px 0;
	padding:0;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Raleway', arial, helvetica, sans-serif;
	color: #fff;

}


h1, .h1 { font-size: 36px; font-family: var(--font-decor); }
h2, .h2 { font-size: 32px; font-family: var(--font-decor); }
h3, .h3 { font-size: 30px; font-family: var(--font-decor); }
h4, .h4 { font-size: 26px; font-family: var(--font-decor); }
h5, .h5 { font-size: 22px; font-family: var(--font-decor); }
h6, .h6 { font-size: 18px; font-family: var(--font-decor); }

/* Start Code below.  Have Fun!  */


/***	 H E A D E R 			*/
.header-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 0;
}

label.label-btn {
	display: block;
	padding: 10px;
	background: rgba(0, 0, 0, 0.6);
	line-height: 1;
	cursor: pointer;
	transition: background 200ms;
	-webkit-transition: background 200ms;
	-moz-transition: background 200ms;
	-ms-transition: background 200ms;
	-o-transition: background 200ms;
}

label.label-btn:hover {
	background: rgba(0, 0, 0, 0.9);
}

label.label-btn svg {
	height: 18px;
}

a.text-logo {
	font-size: 32px;
	color: #fff;
	text-transform: uppercase;
	line-height: 100%;
	margin: 0 20px;
	padding: 5px;
	display: inline-block;
	font-weight: 800;
	clear: both;
	font-family: 'Raleway', arial, helvetica, sans-serif;
	text-decoration: none;
	max-width: 500px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	opacity: 1;
}