@font-face {
    font-family:"ABCGGK-Regular";
    src:url("../fonts/ABCGGK-Regular.woff2") format("woff2"),
        url("../fonts/ABCGGK-Regular.woff") format("woff");
    font-style:normal;font-weight:normal;
}

*,
*:after, 
*:before {
	margin: 0;
	box-sizing: border-box;
	font-family:"ABCGGK-Regular", arial, sans-serif;
	Color: #131313;
}

*::selection {
  background: transparent;
  color: #5181FC;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#FC0D1B;
    z-index:99;
}

#status {
    width:300px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(../links/loading.png);
    background-repeat:no-repeat;
    background-position:center;
    margin:-150px 0 0 -150px; /* is width and height divided by two */
    animation: blink 1s infinite;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
		#status {
		    background-image:url(../links/loading@2x.png);
		    background-size: 300px 300px;
		}
}

@keyframes blink {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/*  Styles  */

a {
	text-decoration: underline;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

h1 {
	font-size: 4.1vw;
	font-weight: normal;
	font-style: normal;
}


h2, p {
	font-size: 2.5vw;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	line-height: 1.3;
}

.rule {
	border-bottom: 4px solid #000;
}

.bg-yellow {
	background-color: #FDF051;
}

.bg-red {
	background-color: #FC0D1B;
}

.bg-purple {
	background-color: #8560A2;
}

.bg-orange {
	background-color: #EE7B44;
}

.bg-teal {
	background-color: #52BACA;
}

.bg-pink {
	background-color: #FF8CBC;
}

.bg-green {
	background-color: #83EF6B;
}

.bg-dblue {
	background-color: #5181FC;
}

.bg-black {
	background-color: #000;
}

.text-yellow,
.text-yellow p,
.text-yellow h1,
.text-yellow h2 {
	color: #FDF051;
	border-color: #FDF051;
}

.text-red,
.text-red p,
.text-red h1,
.text-red h2 {
	color: #FC0D1B;
	border-color: #FC0D1B;
}

.text-purple,
.text-purple p,
.text-purple h1,
.text-purple h2 {
	color: #8560A2;
	border-color: #8560A2;
}

.text-orange,
.text-orange p,
.text-orange h1,
.text-orange h2 {
	color: #EE7B44;
	border-color: #EE7B44;
}

.text-teal,
.text-teal p,
.text-teal h1,
.text-teal h2 {
	color: #52BACA;
	border-color: #52BACA;
}

.text-pink,
.text-pink p,
.text-pink h1,
.text-pink h2 {
	color: #FF8CBC;
	border-color: #FF8CBC;
}

.text-green,
.text-green p,
.text-green h1,
.text-green h2 {
	color: #83EF6B;
	border-color: #83EF6B;
}

.text-dblue,
.text-dblue p,
.text-dblue h1,
.text-dblue h2 {
	color: #5181FC;
	border-color: #5181FC;
}

.text-white,
.text-white p,
.text-white h1,
.text-white h2 {
	color: #fff;
	border-color: #fff;
}

.logo {
	position: fixed;
}

img,
video {
	width: 100%;
}

.header-logo {
	padding: 1% 11% 0 0;
}

.two-up {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.three-up {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 3%;
}

.four-up {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 3%;
}

.five-up {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	column-gap: 3%;
}

.space-top-l {
	padding-top: 15%;
}

.space-top-m {
	padding-top: 6%;
}

.space-top-s {
	padding-top: 3%;
}

.space-bottom-l {
	padding-bottom: 15%;
}

.space-bottom-m {
	padding-bottom: 6%;
}

.space-bottom-s {
	padding-bottom: 3%;
}

.space-l-r {
	padding-left: 2.5%;
	padding-right: 2.5%;
}

.space-l-r-xl {
	padding-left: 15%;
	padding-right: 15%;	
}

footer {
	background-color: #fff;
}

footer p {
	color: #000;
}

@media only screen and (max-width : 700px) {

	h2, p {
		font-size: 3.7vw;
	}

	.hide-mobile {
		display: none;
	}

	.space-l-r {
		padding-left: 4%;
		padding-right: 4%;
	}

	.two-up {
		grid-template-columns: 1fr;
		grid-row-gap: 0;
	}

	.three-up,
	.four-up{
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 3%;
	}

	.three-up p,
	.four-up p {
		padding-bottom: 6%;
	}

	.logo {
		position: relative;
	}
}