figure, section { display: block}
canvas { display: inline-block}
button { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; outline: 0!important;}
body, section { padding: 0; margin: 0; border: 0 none; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

/* MOBILE */

#nav-desktop {display: none} #nav-mobile {display: block}

#nav-mobile .navigation-main {	width: 100%; position: fixed; margin-top: 0; z-index: 400;}
#nav-mobile .navigation-main--persistent { width: 100vw; height: 4rem!important; z-index: 2; background-color: #efefef; padding: 1rem 0 0 0; position: fixed}
#nav-mobile .navigation-main--persistent .logo { padding: 1rem; white-space: nowrap;}
#nav-mobile .navigation-main--persistent .hamburger {  padding: 1rem; width: 100%;height: auto}

#nav-mobile .navigation-main--open { padding: 0 5rem 0 4rem; margin-left: 0; width: 90vw;	height: 100vh; visibility: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; -webkit-box-pack: center; justify-content: center; position: fixed; overflow: hidden;
background:url(../img/menu.jpg); box-sizing:border-box; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; transition-timing-function: ease-in; opacity: 0;	z-index: 2;}

#nav-mobile .navigation-main--open .close {	text-align: left; color: black!important; padding: 3rem 0 0 0}

.nav-primary .navbar-nav {padding: 0; margin-top: 10vh; z-index: 2;}
.nav-primary .h4 {font-weight: 700; margin-bottom: .5rem; max-width: auto;}
.nav-primary .number {font-size: 1rem; font-weight: 800; margin-bottom: .5rem; color: rgba(0,0,0,1)}
.nav-primary .navbar-nav .nav-link {color: rgba(0,0,0,.5);border-bottom: 2px solid; width: auto; border-bottom-color: transparent;}
.nav-primary .navbar-nav .nav-link:focus, .nav-primary .navbar-nav .nav-link:hover {color: #45d5ef;background-color: none !important;border-bottom: 2px solid;border-bottom-color: transparent; width: auto}
.nav-primary .nav-item a{font-weight: 800; font-size: 1.3rem;}
.menu_label {display: none}

#nav-mobile .navigation-main--open ul {list-style-type: none;}
#nav-mobile .navigation-main--open .foot { padding-top: 3rem; margin-left: 0; padding-left: 0}

#nav-mobile .navigation-main--open > div { opacity: 1 }

#nav-mobile .navigation-main--open .vp1 { font-size: 2rem; color: black; font-weight: 400}
#nav-mobile .navigation-main--open .vp2 { font-size: 2rem; color: black; font-weight: 800}


/* MOBILE -END- */

/* DESKTOP */

#nav-desktop .navigation-main { width: 0; height: 100%; position: fixed; left: 0; top: 0; z-index: 400;}
#nav-desktop .navigation-main--persistent { width: 6rem; height: 100%; position: fixed; left: 0; top: 0; z-index: 2;	background-color: #efefef;}
#nav-desktop .navigation-main--persistent:hover { cursor: pointer; background-color: #000!important; color: white!important; fill:rgb(255,255,255);}

#nav-desktop .navigation-main--persistent .logo { top: 4rem; left: calc(50% - 1.75rem);	width: 3.5rem; height: 1.9rem; position: absolute; z-index: 1; white-space: nowrap;}
#nav-desktop .navigation-main--persistent .title { bottom: 8rem; position: absolute; left: 50%;	font-size: .8rem; line-height: 1; white-space: nowrap; transform: rotate(-90deg) translateY(50%); transform-origin: 0 100%; display: block;}
#nav-desktop .navigation-main--persistent .hamburger { width: 100%;height: 0; position: absolute; right: 0; top: 50%; transform: rotate(-90deg);}
#nav-desktop .navigation-main--persistent .hamburger figure { position: absolute!important;}
#nav-desktop .navigation-main--persistent .hamburger--open, .navigation-main--persistent .hamburger--close { width: 100%!important; height: 1rem!important; left: 50%!important; top: 50%!important; transform: translate(-50%, -50%);}
#nav-desktop .navigation-main--persistent .hamburger--close { visibility: hidden;}

.navigation-main--open .hamburger {	width: 6rem; height: 100%;	position: absolute;	left: 0; right: 0; top: 0; cursor: pointer;	transform: rotate(-90deg);}
.navigation-main--open .hamburger figure {	position: absolute!important;}
.navigation-main--open .hamburger--close { width: 100%!important; height: 1rem!important; left: 50%!important; top: 50%!important; stroke: #fff;}

.navigation-main--open { padding: 0 26rem 0 18rem; width: 90vw;	height: 100%; visibility: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; -webkit-box-pack: center; justify-content: center; position: fixed; top: 0rem; left: 0rem;	overflow: hidden;
	/*background-color: #efefef;*/
background:url(../img/menu.jpg); box-sizing:border-box; -webkit-transition: opacity 1s, visibility 1s; transition: opacity 1s, visibility 1s; transition-timing-function: ease-in; opacity: 0;	z-index: 2;}

.navigation-main--open .nav-primary { display: flex; transition: opacity 0.25s 0.4s cubic-bezier(0.24, 0.015, 0.145, 0.93);}
.navigation-main--open ul {list-style-type: none;}
.navigation-main--open .subtitle { left: 18rem;	top: 6rem; color: #282626; white-space: nowrap;	position: absolute;	z-index: 1;}
.navigation-main--open .title-right { top: 6rem;
	/*color: #282626;*/
color: white; position: absolute; right: 9rem; transform: translateY(-100%) rotate(-90deg);	transform-origin: 100% 100%; display: block;}

.navigation-main--open > div { opacity: 1 }

.navigation-main--open .vp1 { font-size: 4rem; color: black; font-weight: 400}
.navigation-main--open .vp2 { font-size: 4rem; color: black; font-weight: 800}

.mystyle {  position: absolute; width: 100%; padding: 25px; background-color: coral; color: white; box-sizing: border-box; z-index: 999;}

/* DESKTOP -END- */


/* GENERAL */
.head_p {padding: 0 1rem}
.content {padding: 0 2rem}
.custom-x {width:10vw;height:auto}

.nav-item a{font-weight: 600; font-size: .9rem}
.navbar {border-bottom: 1px solid rgba(255,255,255,.3)}

.btn{-webkit-box-shadow:0;box-shadow:0;padding:1rem 1.5rem;font-size:50%;letter-spacing:.05rem;border:0;border-radius: 0;}

.btn-primary{background-color:transparent;border: solid 1px white;}
.btn-primary:hover{background-color:white!important}
.btn-primary:focus{background-color:white!important; border: solid 1px white;}
.btn-primary:active{background-color:transparent;border: solid 1px white;}


/* HEADER */
.head_desktop {display: none}
.head_mobile {display: block}

.masthead2{padding: 5rem 0 0 0; margin: 0}

.masthead{height:100vh;margin: 0; padding: 0}
.masthead h3{color: #f7ff00; font-size:2rem;line-height:.1rem;letter-spacing:0.1rem;font-weight:800;margin: 0 4rem 2rem;padding-top: 80%; }
.masthead h2{max-width:60rem;font-size:0.8rem;line-height:.1rem;font-weight:300; margin: 0 4rem 2rem}
.masthead h1{font-size:4.2rem;line-height:.1rem;letter-spacing:.1rem;font-weight:800; margin: 0 4rem}
.masthead a{color:#171618;font-size: 0.5rem;font-weight:600; margin: 0 4rem 1rem; padding: .5rem}
.masthead a:hover, a:focus {color:black!important}

.slide_1{position:relative;width:100%;height:580px;
background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.3)), url(../img/g1.jpg);
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;
background-size:cover;
}
.slide_2{position:relative;width:100%;height:580px;
background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.3)), url(../img/g6.jpg);
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;
background-size:cover;
}
.slide_3{position:relative;width:100%;height:580px;
background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.3)), url(../img/g5.jpg);
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;
background-size:cover;
}

.carousel-control-prev, .carousel-control-next {
cursor: pointer;
position: absolute;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
height: 50%;
top: 30%;
}
.carousel-control-prev, .carousel-control-next { padding: 0 2rem;}

/*
.carousel-control-prev:hover, .carousel-control-next:hover {
  background-color: rgba(144,238,144,.9);
  height: 50%;
}*/

/* HEADER -END- */

/* INTRO */

.intro_section {padding: 5rem 0; margin: 0; background-color: black}

/* CONTENT */
/* TUTORIAL */
.content0 {padding: 2rem 0; margin: 0; background-color: white;}
.content0 h4 {color: black!important; font-weight: 900; line-height: 2rem;font-size: 4rem; font-family: 'Impact', sans-serif}
.content0 h2 {color: black!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin-top: 1rem; letter-spacing: 0}

.content0 .tutorial {padding: 4rem 0 0 0}
.content0 .tutorial h5 {color: black!important; font-size: 1.5rem; margin-top: 0rem; letter-spacing: 0; font-family: 'Impact', sans-serif; font-weight: lighter}
.content0 .tutorial h6 { padding-bottom: 1rem; letter-spacing: 0; text-align: left; justify-content: flex-start; line-height: 1.5rem; font-size: .8rem}
.content0 .tutorial .card-text {border-bottom: 7px solid black}
.content0 .tutorial .card {border-bottom: none; border-radius: none; border-top: none; border-right: none; border-left: none; padding: 0 1rem}
.content0 .news {padding: 4rem 2rem 0 0}
.content0 .tutorial_vid {display: none}

/* ESPORT CORNER */
/* ESPORT CORNER - GAMES */
.content1 {padding: 7rem 0; margin: 0; background-color: black}
.content1 h4 {color: white!important; font-weight: 900; line-height: 4rem;font-size: 4rem; font-family: 'Impact', sans-serif;}
.content1 h3 {color: white!important; font-weight: 900; line-height: 2rem;font-size: 3rem; font-family: 'Impact', sans-serif}
.content1 h2 {color: white!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin: 1rem 0 4rem 0; letter-spacing: 0}
.content1 h1 {color: white!important; font-weight: 400; line-height: 2rem;font-size: 2rem; margin-bottom: 1rem; letter-spacing: 0}

#content1 h4{
	animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

.content1 .carousel-project {display: none; margin-bottom: 8rem}
.content1 .carousel-project-mobile {display: block; margin-bottom: 8rem}

.content1 .carousel-control-prev, .content1 .carousel-control-next { width: auto; top: 0; margin-top: 0; transition: 0.6s ease; border-radius: 0; user-select: none; height: 100%; }
.content1 .games a{color: white!important; font-size: 2rem}
.content1 .games a:hover{color: black!important}
.content1 .games .row img {border: 5px solid #fff}
.content1 .carousel-control-prev, .carousel-control-next { padding: 0 1rem;}
.content1 .carousel-control-prev:hover, .content1 .carousel-control-next:hover {  background-color: rgba(255,255,255,.9); height: 100%;}

.content1 hr {border: 3px solid white; margin: 3rem 0 3rem 0}

/* CONTENT1 - ESPORT CORNER - TEAMS */
.content1 .teams {padding: 5rem 1rem 0}
#accordion .card-header {background-color: #fff; border-radius: 0}
#accordion .card {background-color: transparent!important}
.content1 .teams h5 {font-weight: 800; line-height: 0rem; margin-bottom: 0; font-size: 1rem;letter-spacing: 0}
.content1 .teams button {text-decoration: none; color: black}
.content1 .teams button:hover {color: black}
.content1 .teams .team_des {list-style: none; color: #f7ff00; font-size: 1rem; font-weight: 600;}
.content1 .teams li {margin-bottom: 1rem}
/*.content1 .teams li {border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 1rem}*/
.content1 .teams .card-body{margin-top: .2rem; border-top: 1px solid white; border-bottom: 5px solid #f7ff00!important}
/* CONTENT1 -END */


/* CONTENT2 - JOIN */
.content2 {padding: 7rem 0 6rem; margin: 0; background-color: white}
.content2 h4 {color: black!important; font-weight: 900; line-height: 2rem;font-size: 2.2rem; font-family: 'Impact', sans-serif; margin-left: .5rem}
.content2 h3 {color: black!important; font-weight: 400; line-height: 2rem;font-size: 2rem; margin: 0 0 1rem .5rem; letter-spacing: 0}
.content2 h2 {color: black!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin: 2.5rem 0 0 .5rem; letter-spacing: 0;max-width: 55rem}

.content2 .social, .social_main {padding: 0}
.content2 .social_main a{color: black; font-size: 10rem; padding: 0; margin: 0}
.content2 .social a{color:black; font-size: 2rem; padding: 0 .3em; margin: 0}

/* FOOTER */
footer .row .row1 {justify-content: center!important}
footer .row .row2 {justify-content: center!important}
footer .social {padding: 0}
footer .social a{color:white; font-size: 1.5rem; padding: 0 .3em .3rem}
footer .social a:hover{text-decoration:none;color:#f7ff00}

/* END OF MOBILE VERSION */


@media (min-width:768px){
	body{ margin-left: 0 }
	.custom-x {width:15%;height:auto}
	
	.head_p {padding: 0 1rem}
	.content {padding: 0 4rem}
	
	
	/* HEADER */
	.head_desktop {display: block}
	.head_mobile {display: none}
	
	.masthead2{padding: 5.5rem 0 0 0; margin: 0}
	
	.masthead{position:relative;width:100%;height:auto;
	background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,1)), url(../img/bag2.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-size:cover;
	}
	
	/* CONTENT2 - ESPORTS CORNER */
	.content1 .carousel-project-mobile {display: none;}
	.content1 .carousel-project {display: block; margin-top: 4rem}
	
	.content2 h4 {color: black!important; font-weight: 900; line-height: 4rem;font-size: 4rem; font-family: 'Impact', sans-serif;}
	
	footer .social {padding: 0}
	footer .social a{color:white; font-size: 1.3rem; padding: 0 .5rem .5rem}
	footer .social a:hover{text-decoration:none;color:#f7ff00}
}

@media (min-width:992px){
	body{ margin-left: 5rem }
	
	/* NAVIGATION */
	#nav-desktop {display: block} #nav-mobile {display: none}
	.custom-x {width:100%;height:auto}
	
	.nav-primary .navbar-nav {padding: 0}
	.nav-primary .h4 {font-size: 2.3rem; font-weight: 800; margin-bottom: .5rem; -webkit-text-stroke: 1.3px white; -webkit-text-fill-color: transparent}
	.nav-primary .number {font-size: 3rem; font-weight: 800; margin-bottom: .5rem; color: black!important; -webkit-text-stroke: 1.3px black!important; -webkit-text-fill-color: black!important}
	.nav-primary .navbar-nav .nav-link {align-items: center!important;color: rgba(255,255,255,1);border-bottom: 2px solid; width: 100%; border-bottom-color: transparent}
	.nav-primary .navbar-nav .nav-link:focus, .nav-primary .navbar-nav .nav-link:hover {color: white;background-color: none !important;border-bottom: 2px solid;border-bottom-color: transparent; width: 100%; -webkit-text-stroke: 0px white; -webkit-text-fill-color: black}
	.nav-primary .nav-item a{font-weight: 800; font-size: 5rem}
	
	.menu_label { cursor: pointer; display: block;	text-align: left!important;	z-index: -1; position: absolute; font-weight: 900; color: #e3e3e3; text-transform: uppercase; font-size: 19.8vh; line-height: 1; white-space: nowrap; transform: rotate(-90deg) translateY(100%); transform-origin: 0 100%; margin: 0; padding: 0; left: -3vh; bottom: -2vh;}
	
	/* - NAVIGATION -END- */

	/* GENERAL */
	.head_p {padding: 0 4rem}
	.content {padding: 0 10rem}
	
	
	/* HEADER */
	.masthead2{padding: 0 0 0 1rem; margin: 0}
	
	.head_desktop {display: block}
	.head_mobile {display: none}
	
	.slide_1{position:relative;width:100%;height:auto;
	background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,1)), url(../img/bag2.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-size:cover;
	}
	.slide_2{position:relative;width:100%;height:auto;
	background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,1)), url(../img/bag1.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-size:cover;
	}
	.slide_3{position:relative;width:100%;height:auto;
	background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,1)), url(../img/km.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-size:cover;
	}
	
	.masthead{height:100vh;margin: 0; padding: 0}
	.masthead h3{font-size:5rem;line-height:2.5rem;letter-spacing:0.1rem;font-weight:800;margin: 0 4rem 3rem;padding-top: 30%;}
	.masthead h2{max-width:60rem;font-size:0.9rem;line-height:2rem;font-weight:300; margin: 0 4rem 3rem}
	.masthead h1{font-size:4.2rem;line-height:2.5rem;letter-spacing:.1rem;font-weight:800; margin: 0 4rem}
	.masthead a{color:#171618;font-size: 0.9rem;font-weight:800; margin: 0 4rem; padding: 1rem}
	.masthead a:hover{color:black!important}
	
	/* CONTENT1 - TUTORIAL */
	.content0 {padding: 8rem 0; margin: 0; background-color: white;}
	.content0 .tutorial_vid {display: block; padding: 1rem 0}
	
	.content0 h4 {color: black!important; font-weight: 900; line-height: 4rem;font-size: 8rem; font-family: 'Impact', sans-serif}
	.content0 h2 {color: black!important; font-weight: 300; line-height: 4rem;font-size: 1.6rem; margin-top: 1rem; letter-spacing: 0}
	.content0 .tutorial h5 {color: black!important; font-size: 2.2rem; margin-top: 0rem; letter-spacing: 0; font-family: 'Impact', sans-serif; font-weight: lighter}
	.content0 .tutorial h6 { padding-bottom: 1rem; letter-spacing: 0; text-align: left; justify-content: flex-start; line-height: 1.5rem; font-size: 1rem}
	

	/* CONTENT2 - ESPORTS CORNER */
	.content1 .carousel-project-mobile {display: none;}
	.content1 .carousel-project {display: block; margin-top: 8rem}
	
	.content1 {padding: 10rem 0; margin: 0; background-color: black}
	.content1 h4 {color: white!important; font-weight: 900; line-height: 4rem;font-size: 8rem; font-family: 'Impact', sans-serif;}
	.content1 h3 {color: white!important; font-weight: 900; line-height: 4rem;font-size: 6rem; font-family: 'Impact', sans-serif}
	.content1 h2 {color: white!important; font-weight: 300; line-height: 4rem;font-size: 1.6rem; margin-top: 1rem; letter-spacing: 0}
	.content1 h1 {color: white!important; font-weight: 400; line-height: 4rem;font-size: 3rem; margin-bottom: 1rem; letter-spacing: 0}
	
	.content1 .teams {padding: 7rem 7rem 0}
	.content1 .teams h5 {font-weight: 800; line-height: 0rem; margin-bottom: 0; font-size: 1.5rem;letter-spacing: 0}
	.content1 .teams .team_des {list-style: none; color: #f7ff00; font-size: 1.3rem; font-weight: 600;}
	
	/* CONTENT2 - JOIN */
	.content2 {padding: 8rem 0; margin: 0; background-color: white}
	.content2 h4 {color: black!important; font-weight: 900; line-height: 4rem;font-size: 7rem; font-family: 'Impact', sans-serif;}
	.content2 h3 {color: black!important; font-weight: 400; line-height: 4rem;font-size: 3.5rem; margin: 0 0 1rem .5rem; letter-spacing: 0}
	.content2 h2 {color: black!important; font-weight: 300; line-height: 2.5rem;font-size: 1.6rem; margin: 2.5rem 0 0 .5rem; letter-spacing: 0;max-width: 55rem}
	
	.content2 .social, .social_main {padding: 0}
	.content2 .social_main a{color: black; font-size: 13rem; padding: 0; margin-top: 0}
	.content2 .social a{color:black; font-size: 3rem; padding: 0 .3em .3rem}
	
	
	/* FOOTER */
	footer .row .row1 {justify-content: flex-start}
	footer .row .row2 {justify-content: flex-end}
	footer .social {padding: 0}
	footer .social a{color:white; font-size: 1.8rem; padding: 0 1rem 1rem}
	footer .social a:hover{text-decoration:none;color:#f7ff00}
	
}


body{ font-family: 'Roboto', sans-serif; letter-spacing:.0625em;} 
body a{color:#171618}
body a:focus,body a:hover{text-decoration:none;color:black}

.bg-black{background-color:#161616!important}
.bg-primary{background-color:#64a19d!important}
.text-primary{color:#171618!important}

footer{padding:4rem 0 3rem;}
footer a {color:rgba(255,255,255,.5)!important}
footer a:active{color:rgba(255,255,255,.5)!important}
footer a:focus, footer a:hover{color:#f7ff00!important;text-decoration:none}

.fa-angle-up:hover {color: red;}


@keyframes fadein {
    from { opacity:0;}
    to {opacity:1;   }
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to { opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity:0;}
    to { opacity:1;  }
}
@-o-keyframes fadein { /* Opera */
    from { opacity:0; }
    to { opacity: 1;  }
}

::selection {
  background: #fff; /* WebKit/Blink Browsers */
  color: black;
}
::-moz-selection {
  background: #fff; /* Gecko Browsers */
	color: black;
}