html {
	box-sizing:border-box;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

body {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	font-family: "Roboto", sans-serif;
}

h1 {
	font-family: "Raleway", sans-serif;
	line-height: 1;
	margin: 50px 0 15px 0;
}

body, html {
	height: 100%
}

*, *:before, *:after {
	box-sizing:inherit
}

a {
	color: inherit;
}

img {
	vertical-align: middle;
}

.red-gradient {
	background: linear-gradient(-45deg, #e6332a, #b22720);
	min-height: -webkit-fill-available;
}

.boxes-bg {
  background-image: url(/img/boxes.png);
  min-height: 100%;
  background-position: bottom right;
  background-size: 1000px;
  background-repeat: no-repeat;
  width: 100%;
}

.boxes-bg-mobile {
	position: absolute;
	bottom: 0;
	right: 0;
}

.closed {
	display: block;
	height: 150px;
	margin: auto;
}

.sp-box {
	font-family: Inter;
    background: #efefef;
    box-shadow: 0 0px 10px 0px rgb(0 0 0 / 50%);
    color: #454360;
    padding: 7px 15px;
    border-radius: 20px;
    text-decoration: none;
    line-height: 2.5em;
    transition: 0.3s ease-in-out;
}

.sp-box:hover {
	box-shadow: 0 0 15px 0px rgb(0 0 0 / 65%);
	transition: 0.3s ease-in-out;
}

.display-bottomleft {
	position:absolute;
	left:0;
	bottom:0;
	opacity: 0.35;
}

.display-bottomright {
	position: absolute;
	right: 0;
	bottom: 0;
}

.display-middle {
	padding-top: 20px;
}

.main {
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	z-index: 2;
}

.tiny {
	font-size:10px!important
}

.small {
	font-size:12px!important
}

.medium {
	font-size:15px!important
}

.large {
	font-size:18px!important
}

.xlarge {
	font-size:24px!important
}

.xxlarge {
	font-size:36px!important
}

.xxxlarge {
	font-size:48px!important
}

.jumbo {
	font-size:64px;
	text-align: center;
}

.left-align {
	text-align:left!important
}

.right-align {
	text-align:right!important
}

.justify {
	text-align:justify!important
}

.center {
	text-align:center!important
}

.padding-small {
	padding:4px 8px!important
}

.padding {
	padding:8px 16px!important
}

.padding-large {
	padding:12px 24px!important
}

.text-white, .hover-text-white:hover {
	color:#fff!important
}

.animate-top {
	/*position: relative;*/
	animation: animatetop 0.5s;
}

.border-white,.hover-border-white:hover {
	border-color:#fff!important
}

@keyframes animatetop {
	from {
		top:-300px;opacity:0
	}

	to {
		top:0;opacity:1
	}
}

@media only screen and (min-width: 951px) {
	.boxes-bg-mobile {
		display: none;
	}
}

@media only screen and (max-width : 950px) {
	.main {
		position: relative;
		top: 0;
		left: 0;
		transform: none;

	}

	.display-middle {
		padding: 50px 15px 0 15px;
	}

	.boxes-bg, .credits {
		display: none;
	}

	.jumbo {
		font-size: 45px;
	}