body {
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1.5em;
	color: #fff;
	background-color: #000007;
	margin: 0;
	width: 100vw;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
div {
	position: relative;
}
img {
	max-width: 100%;
}
a {
	text-decoration: none;
}
h2,
p,
video,
.inline-img,
.inline-video {
    padding: 1em 0;
    margin: auto;
    display: block;
}
video {
	max-width: 80%;
}
h2 {
    font-size: 1.5em;
    line-height: 1;
    padding-bottom: 0;
}
p,
.brand {
	position: relative;
	z-index: 1;
}
.wrapper {
	overflow: hidden;
}
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	background-color: #000;
	height: 60px;
	text-align: center;
}
.logo-site {
    display: block;
    position: absolute;
    top: 12px;
    left: 20px;
    width: 23px;
    overflow: hidden;
}
.logo-site img {
    max-width: none;
    display: block;
}
.share {
	position: absolute;
	top: 20px;
	bottom: auto;
	right: 15px;
	height: 30px;
	opacity: 1;
}
.share div {
	width: 20px;
	height: 20px;
	display: inline-block;
	background: no-repeat 50% 50%;
	cursor: pointer;
}
.share .share-facebook {
	background-image: url(../img/share-facebook.png?v=21);
}
.share .share-twitter {
	background-image: url(../img/share-twitter.png?v=21);
}
.logo-campaign {
	display: inline-block;
}
.logo-campaign img {
	height: 22px;
	margin: 20px 0;
}
.header {
	height: calc(100vh - 60px);
	background: no-repeat 50% 50% / cover;
}
.header .corset {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
}
.hero {
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding-bottom: 4em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	background: url(../img/header.jpg?v=21) no-repeat center top / cover;
}
.hero .noise {
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 100%;
	height: 50px;
	background: url(../img/noise.png?v=21) repeat 0 center;
	z-index: 1;
}
.hero .noise:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/noise.png?v=21) repeat 0 center;
	opacity: .5;
	mix-blend-mode: hard-light;
	-webkit-animation: noise 2s linear infinite;
	animation: noise 2s linear infinite;
}
.logo {
    display: inline-block;
    max-width: 50%;
}
.logo .main {
    position: relative;
    z-index: 1;
}
.logo:before,
.logo:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.logo:before {
	background: url(../img/logo1.png?v=21) no-repeat 0 0 / contain;
	-webkit-animation: glitch 2.5s linear infinite;
	animation: glitch 2.5s linear infinite;
}
.logo:after {
	background: url(../img/logo2.png?v=21) no-repeat 0 0 / contain;
	-webkit-animation: glitch 2.2s 1.5s linear infinite;
	animation: glitch 2.2s 1.5s linear infinite;
}
.hero .title {
    z-index: 1;
    position: relative;
    margin-top: 1em;
}
.hero .title .main {
	position: relative;
	z-index: 1;
}
.hero .title .effect {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.hero .title .effect.ef1 {
	color: #662d35;
	-webkit-animation: glitch 2.5s linear infinite;
	animation: glitch 2.5s linear infinite;
}
.hero .title .effect.ef2 {
	color: #e11e25;
	-webkit-animation: glitch 2.2s 1.5s linear infinite;
	animation: glitch 2.2s 1.5s linear infinite;
}
.hero .title h2 {
	padding: 0;
}
.corset {
    max-width: 100%;
    width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
}
.header .corset {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
}
.article {
    padding: 5em 0;
    background: url(../img/bg.jpg?v=21) no-repeat center top / 100% 100%;
}
.inline-img {
	margin: auto;
}
.anim {
	-webkit-transition: all 3s ease;
	-o-transition: all 3s ease;
	transition: all 3s ease;
	opacity: 0;
	visibility: hidden;
}
.anim.visible {
	opacity: 1;
	visibility: visible;
}
.resp {
    height: 0;
    padding-bottom: 56.25%;
}
.resp iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.thumbs {
    max-width: 700px;
    margin: 1em auto;
}
.thumbs .inner {
    height: 0;
    padding-bottom: 60%;
}
.thumb {
    position: absolute;
    max-width: 50%;
    -webkit-box-shadow: -5px 0 18px #211717;
    box-shadow: -5px 0 18px #211717;
}
.thumb.t1 {
    top: 0;
    right: 10%;
    z-index: 2;
}
.thumb.t2 {
    top: 17%;
    left: 0;
    z-index: 3;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}
.thumb.t3 {
    top: 55%;
    left: 10%;
    z-index: 1;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}
.thumb.t4 {
    top: 50%;
    right: 0;
    z-index: 0;
    -webkit-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
}
@-webkit-keyframes glitch {
	0% {
		top: 0;
		left: 0;
	}
	5% {
		top: 2px;
		left: 0;
	}
	8 {
		top: -2px;
		left: 0;
	}
	10% {
		top: 5px;
		left: 0;
	}
	12% {
		top: -2px;
		left: 0;
	}
	15% {
		top: -5px;
		left: 0;
	}
	18% {
		top: -10px;
		left: 0;
	}
	20% {
		top: 0;
		left: -10px;
	}
	22% {
		top: -10px;
		left: -5px;
	}
	25% {
		top: 0;
		left: 0;
	}
}
@keyframes glitch {
	0% {
		top: 0;
		left: 0;
	}
	5% {
		top: 2px;
		left: 0;
	}
	8 {
		top: -2px;
		left: 0;
	}
	10% {
		top: 5px;
		left: 0;
	}
	12% {
		top: -2px;
		left: 0;
	}
	15% {
		top: -5px;
		left: 0;
	}
	18% {
		top: -10px;
		left: 0;
	}
	20% {
		top: 0;
		left: -10px;
	}
	22% {
		top: -10px;
		left: -5px;
	}
	25% {
		top: 0;
		left: 0;
	}
}
@-webkit-keyframes noise {
	0% {
		background-position: 0 0;
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
	7% {
		background-position: 2px 0;
	}
	10% {
		background-position: -2px 0;
	}
	12% {
		background-position: 5px 0;
	}
	15% {
		background-position: -2px 0;
	}
	17% {
		background-position: -10px 0;
	}
	20% {
		background-position: -20px 0;
	}
	22% {
		background-position: 0 -10px;
	}
	25% {
		background-position: -30px -10px;
	}
	26% {
		background-position: 0 0;
	}
	30% {
		background-position: 0 0;
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}
@keyframes noise {
	0% {
		background-position: 0 0;
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
	7% {
		background-position: 2px 0;
	}
	10% {
		background-position: -2px 0;
	}
	12% {
		background-position: 5px 0;
	}
	15% {
		background-position: -2px 0;
	}
	17% {
		background-position: -10px 0;
	}
	20% {
		background-position: -20px 0;
	}
	22% {
		background-position: 0 -10px;
	}
	25% {
		background-position: -30px -10px;
	}
	26% {
		background-position: 0 0;
	}
	30% {
		background-position: 0 0;
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}
@media only screen and (min-width: 576px) {
	#header {
		height: 70px;
	}
	.logo-site {
		top: 17px;
	}
	.logo-campaign img {
		height: 32px;
		margin: 19px 0;
	}
	.share {
		top: 23px;
	}
	.share div {
		padding: 5px;
	}
	.hero {
	    -webkit-box-align: end;
	    -ms-flex-align: end;
	    align-items: flex-end;
	}
}
@media only screen and (min-width: 768px) {
	h2 {
		font-size: 1.75em;
	}
	#header {
		height: 90px;
	}
	.logo-site {
		top: 25px;
		width: auto;
	}
	.logo-campaign img {
		margin: 29px 0;
	}
	.share {
		top: 30px;
	}
	.share img {
		width: 30px;
		padding: 10px 5px;
	}
	.share img:not(:first-of-type) {
		margin-left: 5px;
	}
	.desc {
	    position: absolute;
	    bottom: 1em;
	    left: 0;
	    width: 50%;
	}
}
@media only screen and (min-width: 992px) {
	h2 {
		font-size: 2em;
	}
	.logo-site {
		left: 30px;
	}
	.share {
		right: 30px;
	}
}