@charset "utf-8";
/* CSS Document */
/*--RESET BROWSER STYLES--*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, small, strong, ol, ul, li, embed, footer, header, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
a { text-decoration: none; }
strong { font-weight: normal; }
@font-face { font-family: 'Hel-Roman'; src: url('../webfonts/Hel-Roman.eot'); src: url('../webfonts/Hel-Roman.eot?#iefix') format('embedded-opentype'), url('../webfonts/Hel-Roman.woff2') format('woff2'), url('../webfonts/Hel-Roman.woff') format('woff'), url('../webfonts/Hel-Roman.ttf') format('truetype'), url('../webfonts/Hel-Roman.svg#Hel-Roman') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Hel-Lt'; src: url('../webfonts/Hel-Lt.eot'); src: url('../webfonts/Hel-Lt.eot?#iefix') format('embedded-opentype'), url('../webfonts/Hel-Lt.woff2') format('woff2'), url('../webfonts/Hel-Lt.woff') format('woff'), url('../webfonts/Hel-Lt.ttf') format('truetype'), url('../webfonts/Hel-Lt.svg#Hel-Lt') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Hel-Bd'; src: url('../webfonts/Hel-Bd.eot'); src: url('../webfonts/Hel-Bd.eot?#iefix') format('embedded-opentype'), url('../webfonts/Hel-Bd.woff2') format('woff2'), url('../webfonts/Hel-Bd.woff') format('woff'), url('../webfonts/Hel-Bd.ttf') format('truetype'), url('../webfonts/Hel-Bd.svg#Hel-Bd') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Hel-Hv'; src: url('../webfonts/Hel-Hv.eot'); src: url('../webfonts/Hel-Hv.eot?#iefix') format('embedded-opentype'), url('../webfonts/Hel-Hv.woff2') format('woff2'), url('../webfonts/Hel-Hv.woff') format('woff'), url('../webfonts/Hel-Hv.ttf') format('truetype'), url('../webfonts/Hel-Hv.svg#Hel-Hv') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Hel-Md'; src: url('../webfonts/Hel-Md.eot'); src: url('../webfonts/Hel-Md.eot?#iefix') format('embedded-opentype'), url('../webfonts/Hel-Md.woff2') format('woff2'), url('../webfonts/Hel-Md.woff') format('woff'), url('../webfonts/Hel-Md.ttf') format('truetype'), url('../webfonts/Hel-Md.svg#Hel-Md') format('svg'); font-weight: normal; font-style: normal; }
/*LAYOUT*/
body { line-height: 1.5; background-color: #f3ed02; }
#cta { text-align: center; padding: 48px 0 24px; }
#socials { position:absolute; top:12px; right:12px; }
#socials svg { width:24px; height:auto; }
a:hover { opacity: 0.8; }
/*MEDIA WALL*/
#media-wall { width: 80vw; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 12px auto 48px; }
.media-holder { padding: 12vw; -webkit-justify-content: center; -webkit-align-items: center; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; -webkit-flex: 0 1 auto; flex: 0 1 auto; margin: 0 auto; }
.media-holder small { position: absolute; top: 20px; left: 20px; font-family: 'Hel-Hv'; font-size: 0.7vw; color: #fff; text-transform: uppercase; opacity: 0; transform: translateY(-200px); pointer-events: none; }
.media iframe { margin: 0 auto!important; }
.media { box-sizing: border-box; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-justify-content: center; -webkit-align-items: center; justify-content: center; align-items: center; }
.drag { position: absolute; bottom: 0; right: 0; width: 1.3vw; height: auto; transform: translate(48px, 48px); display: block; opacity: 0; max-width: 48px; pointer-events: none; }
.open img { width: 100%; height: auto; margin: 0 auto; display: block; transform: translateX(15%); }
.fs { position: absolute; bottom: 10px; left: 10px; z-index: 50; width: 24px; height: auto; cursor: pointer; display: block; }
/*TYPE*/
h1 { font-family: 'Hel-Bd'; font-size: 22vw; text-transform: uppercase; margin: 12px 0; line-height: 0.5; }
h1 img { width: 61vw; height: auto; display: block; margin: 0 auto; }
p { font-family: 'Hel-Roman'; font-size: 4vw; margin: 24px 0; text-transform: uppercase; }
/*FORM*/
.input { padding: 10px; border: none; text-align: left; background-color: #D34347; color: #fff; display: block; margin: 0 auto 12px; width: 70%; max-width: 400px; text-transform: uppercase; box-sizing: border-box; border-radius: 40px; }
.submit { padding: 12px 0 10px; background-color: #fff; border: none; text-transform: uppercase; cursor: pointer; width: 32%; margin-top: 12px; border-radius: 40px; max-width: 150px; }
/*UMG*/
#site-footer { padding: 10px; text-align: center; }
#umg a { font-family: 'Hel-Lt'; color: #000; }

@media only screen and (min-width:60em) {
body { background-image: url(../images/bg3.jpg); background-size: cover; background-attachment: fixed; }
h1 { font-size: 5vw; line-height: 0.7; margin: 24px 0; }
h1 img { width: 31vw; }
p { font-size: 1.275rem; margin-bottom: 24px; }
#cta { padding: 48px 0; }
#socials { position:absolute; top:24px; right:24px; }
#socials svg { width:36px; height:auto; }
#media-wall { margin: 24px auto 96px; width: 100%; }
.media-holder { padding: 48px; min-width: 234px; -webkit-flex: 1 1 16.2%; flex: 1 1 16.2%; }
.open img { width: 60%; transform: translateX(15%); }
.input { padding: 10px 20px; display: inline; margin: 0; width: inherit; border-radius: 0px; text-align:left; }
.submit { padding: 10px 20px; width: inherit; margin: 24px auto 0; border-radius: 40px 0; display: block; }
}

@media only screen and (min-width:90em) {
body { background-image: url(../images/bg3.jpg); background-size: cover; background-attachment: fixed; }
h1 { font-size: 3vw; line-height: 0.7; margin: 24px 0; }
h1 img { width: 26vw; max-width: 437px; }
p { font-size: 1.275rem; margin-bottom: 24px; }
#cta { padding: 48px 0; }
#media-wall { margin: 24px auto 96px; width: 100%; }
.media-holder { padding: 48px; min-width: 234px; -webkit-flex: 1 1 16.2%; flex: 1 1 16.2%; }
.open img { width: 60%; transform: translateX(15%); }
.input { padding: 10px 20px; display: inline; margin: 0; width: inherit; border-radius: 0px; }
.submit { padding: 10px 20px; width: inherit; margin: 24px auto 0; border-radius: 40px 0; display: block; }
}
.media-holder.m1 { background-color: #ff60af }
.media-holder.m2 { background-color: #72c05b }
.media-holder.m3 { background-color: #b3aa21 }
.media-holder.m4 { background-color: #aeb821 }
.media-holder.m5 { background-color: #3c81aa }
.media-holder.m6 { background-color: #3e3882}
.media-holder.m7 { background-color: #292570 }
.media-holder.m8 { background-color: #652969 }
.media-holder.m9 { background-color: #d13c38 }
.media-holder.m10 { background-color: #d4d009 }
.media-holder.m11 { background-color: #398bb1 }
.media-holder.m12 { background-color: #8a8a12 }
.media-holder.m13 { background-color: #af604f }
.media-holder.m14 { background-color: #c6b144 }
.media-holder.m15 { background-color: #e55094 }
.media-holder.m16 { background-color: #d45455 }
.media-holder.m17 { background-color: #b5b118}
.media-holder.m18 { background-color: #382c78 }
.media-holder.m19 { background-color: #5093bd }
.media-holder.m20 { background-color: #802d25 }
.popup { width: 100%; height: auto; max-width: 500px; display: none; }

@media only screen and (max-width: 560px) {
        iframe {width: 100%;}
}

/* sean / push / 2016-1-09 / fix black footer */
footer { background-color: transparent !important; }