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: black;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_section {padding: 5rem 0 3rem; margin: 0; background-color: black}
.head_section h4 {color: white!important; font-weight: 900; line-height: 4rem;font-size: 3.5rem;}
.head_section h4 {text-shadow: .2rem .3rem #ecba25; -webkit-text-fill-color: white; -webkit-text-stroke: 0px black;
  -webkit-text-stroke-color: white;}
.head_section h2 {color: white!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin-top: 1rem; letter-spacing: 0}
/* HEADER -END- */

/* INTRO */
.intro_section {padding: 5rem 0 2rem; margin: 0; background-color: white}
.intro_section h4 {color: black!important; font-weight: 900; line-height: 2rem;font-size: 4rem;}
.intro_section h2 {color: black!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin-top: 1rem; letter-spacing: 0}
.intro_section .des p{max-width:40rem;font-size:.9rem;line-height:2rem;font-weight:400; letter-spacing: 0; margin-top: 0; color: black; padding: 0 1rem}
.intro_section .des a{color: #ecba25!important; font-size: .9rem; padding: 0; margin: 0}
.intro_section a{font-weight: 800; font-size: .5rem; margin-left: 0rem}

.intro_section .img-fluid {margin: 2rem 0 3rem}

/* 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: 'Oswald', 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 */
	.head_section {padding: 6rem 0; margin: 0;}
	.head_section h4 {line-height: 8rem;font-size: 7rem;}
	.head_section h2 {line-height: 4rem;font-size: 1.6rem; margin-top: 1rem; letter-spacing: 0}
	.head_section h4 {text-shadow: .5rem .5rem #ecba25!important; -webkit-text-fill-color: white; -webkit-text-stroke: 0px;
  -webkit-text-stroke-color: #ecba25;}
	
	/* INTRO */
	.intro_section {padding: 5rem 0; margin: 0; background-color: white}
	.intro_section h4 {color: black!important; font-weight: 900; line-height: 2rem;font-size: 4rem;}
	.intro_section h2 {color: black!important; font-weight: 300; line-height: 2rem;font-size: 1rem; margin-top: 1rem; letter-spacing: 0}
	.intro_section .des p{max-width:60rem;font-size:1.1rem;line-height:2.5rem;font-weight:400; letter-spacing: 0; margin-top: 4rem; color: black; padding-left: 0}
	.intro_section .des a{color: lightgreen; font-size: 1.1rem; padding: 0; margin: 0}
	.intro_section a{font-weight: 800; font-size: .5rem; margin-left: 0rem}

	.intro_section .img-fluid {margin: 4rem 0 5rem}
	
	
	/* 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;
}