/*********************************************************************************************************************/
/* WEBFONTS */
/*********************************************************************************************************************/
@font-face {font-family:"Roboto-Bold"; src:url("../fonts/Roboto-Bold.ttf") format("truetype");}
@font-face {font-family:"Roboto-Regular"; src:url("../fonts/Roboto-Regular.ttf") format("truetype");}
@font-face {font-family:"Roboto-Thin"; src:url("../fonts/Roboto-Thin.ttf") format("truetype");}

/*********************************************************************************************************************/
/* GLOBAL */
/*********************************************************************************************************************/
* {margin:0; padding:0;}
li {list-style-type:none;}
body {--screen:"large"; font-family:"Roboto-Regular", sans-serif; font-size:1vw; color:#FFFFFF; background-color:#000000;}
::selection {background-color:#26B9D9;}
a {text-decoration:none; color:#FFFFFF;}
article {position:relative;}
article.white {color:#FFFFFF;}
article.black {color:#000000;}
thin, thinColor {font-family:"Roboto-Thin", sans-serif;}
thinColor.white, boldColor.white, h5.white, scroll.white {color:#FFFFFF;}
thinColor.black, boldColor.black, h5.black, scroll.black {color:#000000;}
bold, boldColor {font-family:"Roboto-Bold", sans-serif;}
h1 {font-size:4vw; font-weight:normal;}
h2 {font-size:1.5vw; font-weight:normal;}
h3 {font-size:1.5vw; font-weight:normal;}
h4 {font-size:1.5vw; font-weight:normal;}
h5 {font-size:1vw; font-weight:normal;}
h6 {font-size:1vw; font-weight:normal;}
.zoom {cursor:pointer;}

@media screen and (max-width:1280px) {
	body {--screen:"medium"; font-size:1.5vw;}
	h1 {font-size:6vw;}
	h2 {font-size:3vw;}
	h3 {font-size:2vw;}
	h5 {font-size:1.5vw;}
}

@media screen and (max-width:980px) {
	body {--screen:"small"; font-size:4vw;}
	h1 {font-size:9vw;}
	h2 {font-size:3.5vw;}
	h3, h4, h5 {font-size:3vw;}
}

/*********************************************************************************************************************/
/* SCROLL */
/*********************************************************************************************************************/
article>scroll {position:absolute; bottom:5vw; display:block; width:100%; font-size:2vw; text-align:center; cursor:pointer;}

@media screen and (max-width:1280px) {
	article>scroll {bottom:1vw; left:calc(50% - 2.5vw); width:5vw; font-size:4vw;}
}

@media screen and (max-width:980px) {
	article>scroll {bottom:5vw; left:calc(50% - 6vw); width:12vw; font-size:10vw;}
}

/*********************************************************************************************************************/
/* BUTTON */
/*********************************************************************************************************************/
.button {position:relative; overflow:hidden; display:inline-block; padding:0.5vw; font-family:"Roboto-Bold", sans-serif; text-transform:uppercase; text-align:center; border-radius:0.2vw;}
.button.blue {background-color:#26B9D9;}
.button.orange {background-color:#AA6E1A;}
.button.pink {background-color:#D926B0;}
.button:after {content:""; position:absolute; top:-100%; left:-200%; width:180%; height:200%; transform:rotate(-45deg); background-image:linear-gradient(0deg, rgba(255,255,255,0.8), rgba(255,255,255,0));}
.button:hover:after {animation:slide 0.5s ease-in-out 0s forwards;}
@keyframes slide {from {left:-200%;} to {left:-50%;}}

@media screen and (max-width:1280px) {
	.button {padding:1vw; border-radius:0.2vw;}
}

@media screen and (max-width:980px) {
	
}