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

* {
	position:relative;
	box-sizing:border-box;
	text-decoration:none;
	-webkit-font-smoothing:antialiased;
}

body {
	margin:0; padding:0;
	font-family: 'Rubik', sans-serif;
	background-image:url("https://www.bensanson.com/images/dc-rgb-bg.svg");
	background-position:150% -150px;
	background-repeat:no-repeat;
	background-color:#3C3C3B;
}

section {
	padding:50px 2.5%;
	max-width:1440px;
	margin:0 auto;
}

img {
	max-width:100%;
}

/** Inner Elements */
.brand-logo {
	max-width:290px;
	height:69px;
}

.sectionhead {
	height:1px;
	margin:60px 0;
	clear:both;
}

/** Typography */

h1, h2, h3, h4, h5, h6, p, ul {
	margin:0;
	color:#fff;
}

h1, h4 {
	font-size:24px;
	margin-bottom:34px;
	line-height:1.4;
}

h4:last-of-type {
	margin-bottom:0;
}

p {
	font-size:14px;
	margin-bottom:18px;
	line-height:18px;
}

i {
	color:#fff;
	margin-right:5px;
	transition:color 0.2s ease-in-out;
}

/** Brand Accents */
.color--brand-accent, i:hover {
	color:#FFDD00;
}

.background--brand-accent {
	background:#9D9D9C;
}

.alt-color--brand-accent {
	color:#F7D508;
}

.alt-background--brand-accent {
	background:#F7D508;
}

/** Grid */
.element-wrap:after {
	display:table;
	clear:both; content:'';
}

[class*="grid--col-"] {
    float:left;
}

.grid--col-1 {
	width:8.33%;
}
.grid--col-2 {
	width:16.66%;
}

.grid--col-3 {
	width:25%;
}

.grid--col-4 {
	width:33.33%;
}

.grid--col-5 {
	width:41.66%;
}

.grid--col-6 {
	width:50%;
}

.grid--col-7 {
	width:58.33%;
}

.grid--col-8 {
	width:66.66%;
}

.grid--col-9 {
	width:75%;
}

.grid--col-10 {
	width:83.33%;
}

.grid--col-11 {
	width:91.66%;
}

.grid--col-12 {
	width:100%;
}

@media screen and (min-width:1260px) {
	body {
		background-position:-600% -750px;
		background-size:105% auto;	}
}

@media screen and (max-width:1045px) {
	body {
		background-position:225% -150px;
	}
}

@media screen and (max-width:964px) {
	body {
		background-position:350% -150px;
	}
}

@media screen and (max-width:900px) {
	body {
		background-position:450% -150px;
	}
}

@media screen and (max-width:870px) {
	body {
		background-position:750% -150px;
	}
}

@media screen and (max-width:850px) {
	body {
		background-position:950% -150px;
	}
}

@media screen and (max-width:840px) {
	body {
		background-position:1250% -150px;
	}
}

@media screen and (max-width:830px) {
	body {
		background-image:none;
	}
	
	[class*="grid--col-"] {
		width:100%;
	}
}