@charset "UTF-8";
/* CSS Document */

/* Colours */
:root{
	--black:  hsla(0,0%,0%,1.00);
	--grey1:  hsla(0,0%,90%,1.00);
	--grey2:  hsla(0,0%,88%,1.00);
	--white:  hsla(0,0%,100%,1.00);
	--blue:   hsla(240,100%,50%,1.00);
	--orange: hsla(35,100%,50%,1.00);
}

/* Cursors */
:root{
	--pointer: url("../img/cursor_pointer.png")23 4, pointer;
	--click:   url("../img/cursor_click.png")  23 4, pointer;

	--pointRight:      url("../img/cursor_point_right.png")      96 23, e-resize;
	--pointRightClick: url("../img/cursor_point_right_click.png")96 23, e-resize;
	--pointLeft:       url("../img/cursor_point_left.png")        4 23, w-resize;
	--pointLeftClick:  url("../img/cursor_point_left_click.png")  4 23, w-resize;
}

/* Typo Raster */
:root{
	--GUTT: calc(var(--BLU) * 1);						/* Gutter */
	--COL7: calc((100% - (var(--GUTT) * 6)) / 7 );		/* 7 Columns */
	--COL8: calc((100% - (var(--GUTT) * 7)) / 8 );		/* 7 Columns */
	--COL14: calc((100% - (var(--GUTT) * 13)) / 14 );	/* 14 Columns */
	--SCRO: calc(var(--BLU) * 4);						/* Scroll bar width */
	--FSR:  (85 / 100);									/* Font size ratio */
	--100vh: calc(var(--vh, 1vh) * 100)					/* Screen Hight */
}

/* 1 / Desktop / XL / */
@media all{
	:root{
		--BLU: 20px;
	}
}

/* 2 / Laptop / L / */
@media all and (max-width: 2000px) {
	:root{
		--BLU: 17px;
	}
}

/* 3 / Laptop / M / */
@media all and (max-width: 1200px) {
	:root{
		--BLU: 14px;
	}
}

/* 4 / Tablet / S / */
@media all and (pointer:none), (pointer:coarse) and (orientation:landscape) {
	:root{
		--BLU: 16px;
	}
}

/* 5 / Mobile / XS / */
@media all and (pointer:none), (pointer:coarse) and (orientation:portrait) {
	:root{
		--BLU: 27px;
	}
}

/* Global Styles */

.NoSelect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	 -khtml-tap-highlight-color: rgba(0, 0, 0, 0);
	   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
	    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
	     -o-tap-highlight-color: rgba(0, 0, 0, 0);
	        tap-highlight-color: rgba(0, 0, 0, 0);
}
.SP01 { width: 100%; display: block; height: calc(var(--BLU) *  1);}
.SP02 { width: 100%; display: block; height: calc(var(--BLU) *  2);}
.SP03 { width: 100%; display: block; height: calc(var(--BLU) *  3);}
.SP04 { width: 100%; display: block; height: calc(var(--BLU) *  4);}
.SP05 { width: 100%; display: block; height: calc(var(--BLU) *  5);}
.SP06 { width: 100%; display: block; height: calc(var(--BLU) *  6);}
.SP07 { width: 100%; display: block; height: calc(var(--BLU) *  7);}
.SP08 { width: 100%; display: block; height: calc(var(--BLU) *  8);}
.SP09 { width: 100%; display: block; height: calc(var(--BLU) *  9);}
.SP10 { width: 100%; display: block; height: calc(var(--BLU) * 10);}

.Reg {
		font-weight: normal;
	}

/* Transition Animations */

.AniA{
		-webkit-transition-duration: 0.2s;
		 -khtml-transition-duration: 0.2s;
		   -moz-transition-duration: 0.2s;
		    -ms-transition-duration: 0.2s;
		     -o-transition-duration: 0.2s;
		        transition-duration: 0.2s;
		-webkit-transition-timing-function: ease-in-out;
		 -khtml-transition-timing-function: ease-in-out;
		   -moz-transition-timing-function: ease-in-out;
		    -ms-transition-timing-function: ease-in-out;
		     -o-transition-timing-function: ease-in-out;
		        transition-timing-function: ease-in-out;
}

.AniB{
		-webkit-transition-duration: 0.4s;
		 -khtml-transition-duration: 0.4s;
		   -moz-transition-duration: 0.4s;
		    -ms-transition-duration: 0.4s;
		     -o-transition-duration: 0.4s;
		        transition-duration: 0.4s;
		-webkit-transition-timing-function: ease-in-out;
		 -khtml-transition-timing-function: ease-in-out;
		   -moz-transition-timing-function: ease-in-out;
		    -ms-transition-timing-function: ease-in-out;
		     -o-transition-timing-function: ease-in-out;
		        transition-timing-function: ease-in-out;
}

.AniC{
		-webkit-transition-duration: 0.6s;
		 -khtml-transition-duration: 0.6s;
		   -moz-transition-duration: 0.6s;
		    -ms-transition-duration: 0.6s;
		     -o-transition-duration: 0.6s;
		        transition-duration: 0.6s;
		-webkit-transition-timing-function: ease-in-out;
		 -khtml-transition-timing-function: ease-in-out;
		   -moz-transition-timing-function: ease-in-out;
		    -ms-transition-timing-function: ease-in-out;
		     -o-transition-timing-function: ease-in-out;
		        transition-timing-function: ease-in-out;
}

.AniD{
		-webkit-transition-duration: 0.8s;
		 -khtml-transition-duration: 0.8s;
		   -moz-transition-duration: 0.8s;
		    -ms-transition-duration: 0.8s;
		     -o-transition-duration: 0.8s;
		        transition-duration: 0.8s;
		-webkit-transition-timing-function: ease-in-out;
		 -khtml-transition-timing-function: ease-in-out;
		   -moz-transition-timing-function: ease-in-out;
		    -ms-transition-timing-function: ease-in-out;
		     -o-transition-timing-function: ease-in-out;
		        transition-timing-function: ease-in-out;
}

.AniE{
		-webkit-transition-duration: 1s;
		 -khtml-transition-duration: 1s;
		   -moz-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		     -o-transition-duration: 1s;
		        transition-duration: 1s;
		-webkit-transition-timing-function: ease-in-out;
		 -khtml-transition-timing-function: ease-in-out;
		   -moz-transition-timing-function: ease-in-out;
		    -ms-transition-timing-function: ease-in-out;
		     -o-transition-timing-function: ease-in-out;
		        transition-timing-function: ease-in-out;
}