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

*,
*:after, 
*:before {
	margin: 0;
	box-sizing: border-box;
	font-family: "ABCDiatype-Medium", arial, sans-serif;
	Color: #000;
}

body {
	background-color: #D42525;
}

*::selection {
  background: #D42525;
  color: #fff;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#D42525;
    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.25vw;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	line-height: 1.2;
}

h2 {
	text-transform: uppercase;
}

.serif {
	font-family: "ABCSyntTrial-Regular", times new roman, serif;
}

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

.center {
	text-align: center;
}

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

.bg-white {
	background-color: #fff;
}

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

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

img,
video {
	width: 100%;
}

.logo {
	z-index: 2;
	position: relative;
}

.stories-gif {
	margin-top: -3.5%;
	z-index: 1;
	position: relative;
}

.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-top-xs {
	padding-top: 1%;
}

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

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

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

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

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

.email-scroll {
	height: 60vh;
	min-height: 600px;
	overflow-y: auto;
	width: 80%;
	margin: 0 auto;
}

footer a {
	text-decoration: none;

}

footer a:hover {
	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;
	}
}