@import url("https://fonts.googleapis.com/css?family=GFS+Didot|Lato");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: top;
	background: transparent;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
	-webkit-tap-highlight-color: transparent
}
body {
	line-height: 1px
}
nav ul {
	list-style: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: none
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	outline: 0
}
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none
}
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold
}
del {
	text-decoration: line-through
}
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0
}
input, select {
	vertical-align: middle
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, \:article, \:aside, \:details, \:figcaption, \:figure, \:footer, \:header, \:hgroup, \:menu, \:nav, \:section {
	display: block
}
p {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0
}
:focus {
	outline: 0
}
canvas {
	letter-spacing: 0
}
.abs {
	top: 0;
	left: 0;
	position: absolute
}
.rel {
	top: 0;
	left: 0;
	position: relative
}
.absFull {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	display: block
}
.hidden {
	visibility: hidden;
	display: none;
	opacity: 0
}
.clickKill {
	cursor: none
}
.mobile .clickKill {
	display: block;
	cursor: pointer
}
.TL {
	top: 0;
	left: 0;
	position: absolute
}
.T {
	top: 0;
	left: 50%;
	position: absolute
}
.TR {
	top: 0;
	right: 0;
	position: absolute
}
.L {
	top: 50%;
	left: 0;
	position: absolute
}
.C {
	top: 50%;
	left: 50%;
	position: absolute
}
.HC {
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	position: absolute
}
.TC {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.R {
	top: 50%;
	right: 0;
	position: absolute
}
.BL {
	bottom: 0;
	left: 0;
	position: absolute
}
.B {
	bottom: 0;
	left: 50%;
	position: absolute
}
.BR {
	bottom: 0;
	right: 0;
	position: absolute
}
.full {
	width: 100%;
	height: 100%;
	display: block
}
.invis {
	visibility: hidden;
	opacity: 0
}
.hList {
	list-style: none;
	white-space: nowrap
}
.hList li {
	display: inline-block;
	white-space: normal;
	vertical-align: top
}
.flexCenter {
	width: 100%;
	min-height: 465px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.noSelect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
html {
	min-height: 100%;
	width: 100%;
	height: auto;
	overflow-x: hidden;
	overflow-y: auto
}
body {
	background: #000;
	color: #c00;
	background-size: cover;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.0em;
	overflow-x: auto;
	overflow-y: auto;
	min-height: 100%;
	width: 100%;
	touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
#datacon, .tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop, .tmblr-iframe--controls.iframe-controls--phone-mobile, .tmblr-iframe--mobile-logged-in-controls.iframe-controls--phone-mobile, .tmblr-iframe--controls.iframe-controls--tablet-mobile, .tmblr-iframe--mobile-logged-in-controls.iframe-controls--tablet-mobile, iframe.tmblr-iframe {
	display: none;
	visibility: hidden
}
.upgrade {
	text-align: center;
	margin-top: 60px
}
#preloader {
	background: #000;
	z-index: 3000;
	min-height: inherit;
	min-width: inherit;
	overflow: hidden
}
.lt-ie10 #preloader {
	background-color: #000;
	min-height: 100%
}
#preloader #loaderBarContainer {
	width: 100%;
	min-height: 10px;
	position: absolute;
	bottom: initial;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.lt-ie10 #preloader #loaderBarContainer {
	display: none
}
#preloader #loaderBar {
	position: relative;
	width: 100%;
	height: 2px;
	background-color: #222
}
#preloader #loaderBar .progress {
	position: absolute;
	top: 0px;
	left: 0;
	height: 2px;
	background-color: #EEE;
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
	width: 0%;
	font-size: 15px
}
#consent_blackbar {
	z-index: 3000 !important;
	width: 84vw !important;
	margin: auto;
	left: 8vw
}
#upgrade {
	position: fixed;
	padding: 50px;
	width: 100%;
	height: 100%;
	background-size: auto 100%
}
#upgrade #releaseDate {
	left: 0px;
	top: 0px
}
#upgrade div {
	margin: auto;
	text-align: center
}
#upgrade img {
	margin: 0px auto 10px;
	text-align: center
}
#upgrade .flexCenter {
	text-align: center;
	width: 800px;
	height: 600px
}
#upgrade p {
	color: #FFF;
	text-align: center;
	margin: 10px auto
}
.preloadLabel {
	font-size: 60px;
	position: absolute;
	line-height: 75px;
	color: #dbdad7
}
.preloadLabel.label1 {
	text-align: right;
	right: 50%;
	margin-right: 55px;
	top: 0
}
.preloadLabel.label2 {
	text-align: left;
	left: 50%;
	margin-left: 60px;
	top: 0
}

@media only screen and (max-width: 630px) {
.preloadLabel.label1 {
	text-align: center;
	right: 0;
	left: 0;
	margin-right: 0
}
.preloadLabel.label2 {
	text-align: center;
	left: 0;
	right: 0;
	top: 60px;
	margin-left: 0
}
}
.preloadLabel .letter {
	opacity: 0
}
#preloadseo {
	width: 100%;
	text-align: center;
	font-size: 9px;
	color: #666
}
#shell {
	display: none;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 100%;
	min-height: inherit;
	min-width: inherit
}
section {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%
}

@media only screen and (orientation: landscape) {
.mobile section {
	min-height: 100%
}
}
#portraitModeDisabled {
	display: none
}
.logo {
	width: 460px;
	height: 265px;
	display: block
}
.logo img {
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.logoDate {
	bottom: 26px;
	color: #fff;
	text-align: center;
	width: 100%
}
.boxButton {
	overflow: hidden
}
.boxButton .border {
	border: solid 2px white;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: 0.35s ease-out all;
	transition: 0.35s ease-out all;
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2)
}
.boxButton .inner {
	overflow: hidden;
	-webkit-transition: 0.25s ease-out transform;
	transition: 0.25s ease-out transform;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}
.desktop .boxButton:hover .border {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}
.desktop .boxButton:hover .inner {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8)
}
.desktop .boxButton:hover.closeBtn .inner {
	-webkit-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7)
}
@font-face {
	font-family: 'icomoon';
	src: url("../fonts/icomoon.eot?wpkyar");
	src: url("../fonts/icomoon.eot?wpkyar#iefix") format("embedded-opentype"), url("../fonts/icomoon.woff2?wpkyar") format("woff2"), url("../fonts/icomoon.ttf?wpkyar") format("truetype"), url("../fonts/icomoon.woff?wpkyar") format("woff"), url("../fonts/icomoon.svg?wpkyar#icomoon") format("svg");
	font-weight: normal;
	font-style: normal
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.icon-instagram2:before {
	content: "\e900"
}
.icon-facebook22:before {
	content: "\eeef"
}
.icon-facebook2:before {
	content: "\eef0"
}



.icon-google:before {
	content: "\e603"
}
.icon-google:before {
	content: "\e603"
}




.icon-twitter:before {
	content: "\eef5"
}
.contentColumn {
	background: transparent;
	bottom: 0;
	left: 90px;
	right: 20px;
	max-width: 400px
}
.contentColumn .contentColumnInner {
	overflow: hidden
}
.contentColumn .title {
	color: #484848;
	display: inline-block;
	font-size: 42.2px;
	height: 67px;
	line-height: 67px;
	padding: 0 7px;
	top: 180px;
	z-index: 1
}
.contentColumn .closeBtn {
	position: relative;
	background: #fff;
	top: 180px;
	left: -30px;
	font-size: 30px;
	display: block;
	width: 76px;
	height: 76px;
	margin: 0px auto;
	z-index: 2000
}
.contentColumn .closeBtn .line {
	position: absolute;
	width: 2px;
	height: 12px;
	background: #e5e5e5
}
.contentColumn .closeBtn .line1 {
	top: 9px;
	-webkit-transform: rotate(-45deg) translateZ(0);
	transform: rotate(-45deg) translateZ(0);
	left: 14px
}
.contentColumn .closeBtn .line2 {
	top: 9px;
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0);
	left: 14px
}
.contentColumn .closeBtn .closeOuter {
	-webkit-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1)
}
.contentColumn .iScrollIndicator {
	position: absolute;
	border: none
}
.contentColumn .iScrollVerticalScrollbar {
	cursor: pointer;
	background: transparent url(../images/framework/scroll_bg.png) center center repeat-y;
	bottom: 0px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0px;
	-webkit-transition: width 0.25s;
	transition: width 0.25s;
	width: 0
}
.contentColumn .iScrollVerticalScrollbar.hidden {
	width: 0
}
.contentColumn .iScrollVerticalScrollbar .iScrollIndicator {
	width: 100%;
	height: 100px;
	background: #333;
	-webkit-transition: 0.3s background;
	transition: 0.3s background
}
.desktop .contentColumn .iScrollVerticalScrollbar .iScrollIndicator:hover {
	background: #666
}
.desktop .contentColumn:hover .iScrollVerticalScrollbar {
	width: 4px
}
.desktop .contentColumn:hover .iScrollVerticalScrollbar.hidden {
	width: 0px
}
.contentColumn .scrollContent {
	bottom: 0;
	display: block;
	overflow: hidden;
	top: 247px;
	width: 100%;
	z-index: 1
}
.contentColumn .scrollContentInner {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	background: #c00;
	color: #bf9732
}

@media only screen and (max-width: 500px) {
.contentColumn {
	left: 40px
}
.contentColumn .closeBtn {
	top: 140px
}
.contentColumn .title {
	top: 140px;
	font-size: 25.3px;
	height: 40px;
	line-height: 40px
}
.contentColumn .scrollContent {
	top: 180px
}
}

@media only screen and (orientation: landscape) {
.mobile .contentColumn .title {
	top: 100px;
	font-size: 20px;
	height: 30px;
	line-height: 30px
}
.mobile .contentColumn .closeBtn {
	top: 100px
}
.mobile .contentColumn .scrollContent {
	top: 130px
}
}
#header {
	top: 14px;
	left: 116px;
	right: 31px;
	max-width: 471px;
	z-index: 1001
}

@media only screen and (max-width: 630px) {
#header {
	left: 100px
}
}

@media only screen and (max-width: 500px) {
#header {
	left: 72px
}
}
#header .logo {
	width: 100%;
	height: auto
}
#header p {
	width: 100%;
	text-align: center
}
#header a {
	display: block
}
#header a.logoBtn.home {
	cursor: default
}

@media only screen and (orientation: landscape) {
.mobile #header {
	-webkit-transform: scale(0.6, 0.6);
	-ms-transform: scale(0.6, 0.6);
	transform: scale(0.6, 0.6);
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top
}
}
#sections {
	overflow: hidden
}

@media only screen and (orientation: landscape) {
.mobile #sections {
	min-height: 100%
}
}
#tumblrDrawer {
	top: 28px;
	right: 18px
}
.mobile #tumblrDrawer {
	top: 10px;
	right: 10px
}
#tumblrDrawer a {
	position: relative;
	display: inline-block;
	color: #878787;
	font-size: 11px;
	letter-spacing: 0.12em;
	font-family: "Lato", sans-serif;
	font-weight: 600;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
	margin-right: 35px;
	line-height: 1em;
	height: 30px
}
#tumblrDrawer a:last-child {
	margin-right: 0px
}
#tumblrDrawer a:before {
	content: ' ';
	margin: auto;
	text-align: center;
	position: absolute;
	display: inline-block;
	width: 14px;
	height: 30px;
	top: -10px;
	left: -18px
}
#tumblrDrawer a#follow:before {
	background: transparent url(../images/framework/follow.png) center center no-repeat
}
#tumblrDrawer a#dashboard:before {
	top: -9px;
	background: transparent url(../images/framework/dashboard.png) center center no-repeat
}
.desktop #tumblrDrawer a:hover {
	color: #FFF
}

@media only screen and (max-width: 900px) {
#tumblrDrawer a {
	font-size: 9px
}
#tumblrDrawer a#follow:before {
	top: -11px
}
#tumblrDrawer a#dashboard:before {
	top: -10px
}
}
#socialDrawer {
	/*top: 63px;
	right: 14px;*/
	top: 10px;
	right: 5px;
	-webkit-transform-origin: bottom right;
	-ms-transform-origin: bottom right;
	transform-origin: bottom right;
	/*width: 113px;*/
	height: 30px
}

@media only screen and (max-width: 900px) {
#socialDrawer {
	display: none;
	top: 18px;
	left: 55px;
	right: auto;
	text-align: center
}
#socialDrawer.open {
	display: block
}
}
.mobile #socialDrawer {
	display: none;
	z-index: 2000
}
.mobile #socialDrawer.open {
	display: block
}
#socialDrawer a {
	background-color: #fff;
	color: #000;
	display: inline-block;
	font-size: 20px;
	line-height: 30px;
	height: 30px;
	text-align: center;
	margin: 0px 6px 0px 0px;
	opacity: .6;
	overflow: hidden;
	position: relative;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	white-space: nowrap;
	width: 30px
}
.desktop #socialDrawer a:hover {
	opacity: 1
}
#socialDrawer a:last-child {
	margin-right: 0px
}
.lt-ie10 #socialDrawer {
	display: none
}
#connectDrawer, #ugcconnectDrawer {
	z-index: 900;
	top: -webkit-calc(100vh - 70px);
	top: calc(100vh - 70px);
	height: 45px;
	right: 0px;
	left: initial;
	width: 400px;
	margin: auto
}
.tumblrMenuBtn #connectDrawer, .tumblrMenuBtn #ugcconnectDrawer {
	top: 0px;
	left: 0px;
	right: initial;
	width: 100%;
	height: 100%
}
#connectDrawer #connectWrapper, #ugcconnectDrawer #connectWrapper {
	width: 90%
}
#connectDrawer a, #connectDrawer .like, #ugcconnectDrawer a, #ugcconnectDrawer .like {
	position: relative;
	display: inline-block;
	max-width: 45px;
	max-height: 45px;
	height: 4vw;
	width: 4vw;
	border-radius: 4px;
	overflow: hidden;
	text-align: center;
	background-color: #FFF;
	margin: 0px 1vw 1vw 0px;
	white-space: nowrap
}

@media only screen and (max-width: 600px) {
#connectDrawer a, #connectDrawer .like, #ugcconnectDrawer a, #ugcconnectDrawer .like {
	height: 7vw;
	width: 7vw
}
}
#connectDrawer a img, #connectDrawer .like img, #ugcconnectDrawer a img, #ugcconnectDrawer .like img {
	position: relative;
	top: 7px;
	left: 1px;
	max-width: 100%;
	width: 100%;
	height: auto
}
.mobile #connectDrawer a img, .mobile #connectDrawer .like img, .mobile #ugcconnectDrawer a img, .mobile #ugcconnectDrawer .like img {
	top: 3px
}
.desktop #connectDrawer a:hover, .desktop #connectDrawer a.active, .desktop #connectDrawer .like:hover, .desktop #connectDrawer .like.active, .desktop #ugcconnectDrawer a:hover, .desktop #ugcconnectDrawer a.active, .desktop #ugcconnectDrawer .like:hover, .desktop #ugcconnectDrawer .like.active {
	background-color: #c00
}
#connectDrawer a #connectBtns, #connectDrawer .like #connectBtns, #ugcconnectDrawer a #connectBtns, #ugcconnectDrawer .like #connectBtns {
	-webkit-transition: top .3s ease;
	transition: top .3s ease
}
.hidden #connectDrawer a #connectBtns, .hidden #connectDrawer .like #connectBtns, .hidden #ugcconnectDrawer a #connectBtns, .hidden #ugcconnectDrawer .like #connectBtns {
	top: 120%
}
#connectDrawer a.hidden, #connectDrawer .like.hidden, #ugcconnectDrawer a.hidden, #ugcconnectDrawer .like.hidden {
	display: none
}
#connectDrawer .like img, #ugcconnectDrawer .like img {
	display: none;
	top: 7px
}
#connectDrawer .like_button, #ugcconnectDrawer .like_button {
	-webkit-transition-delay: .6s;
	transition-delay: .6s;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	padding: 0px;
	margin: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	top: 50%;
	left: 50%;
	z-index: 100;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#connectDrawer .like_button iframe, #ugcconnectDrawer .like_button iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	z-index: 100;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
#connectDrawer .like_button iframe #like svg, #ugcconnectDrawer .like_button iframe #like svg {
	fill: #FFF
}
#connectShareDrawer {
	z-index: 900
}
#connectShareDrawer a {
	background: transparent;
	position: relative;
	display: inline-block;
	width: 50px;
	height: 40px;
	padding-top: 2px;
	margin-right: 15px;
	text-align: center;
	border: none;
	opacity: 1;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out
}
#connectShareDrawer a:hover {
	opacity: .6
}
#connectShareDrawer a:last-child {
	margin-right: 0px
}
#connectShareDrawer a img {
	left: 0px !important
}
#connectShareDrawer a span, #connectShareDrawer a img.hover {
	display: none !important
}
#sounds {
	display: inline-block;
	font-size: 24px;
	height: 32px;
	line-height: 32px;
	position: relative;
	text-align: center;
	width: 32px
}
#sounds i {
	line-height: inherit
}
#sounds .fa-volume-up {
	display: block
}
#sounds .fa-volume-off {
	display: none
}
.muted #sounds .fa-volume-up {
	display: none
}
.muted #sounds .fa-volume-off {
	display: block
}
.soundDisabled #sounds {
	display: none
}
.sectionClose {
	line-height: 1em;
	top: 0px;
	background-color: #000;
	width: 30px;
	height: 30px;
	right: 5px;
	cursor: pointer
}
.sectionClose:before, .sectionClose:after {
	content: ' ';
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	position: absolute;
	height: 40px;
	width: 1px;
	border-left: 2px #FFF solid;
	top: -6px;
	-webkit-transition: all .22s ease-out;
	transition: all .22s ease-out
}
.sectionClose:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 14px;
	top: -6px
}
.sectionClose:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 13px
}
.desktop .sectionClose:hover, .desktop .sectionClose:active {
	border-color: #666666
}
.desktop .sectionClose:hover:before, .desktop .sectionClose:hover:after, .desktop .sectionClose:active:before, .desktop .sectionClose:active:after {
	border-color: #666666;
	height: 25px;
	top: 2px
}
.mobile .sectionClose {
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: scale(0.75, 0.75);
	-ms-transform: scale(0.75, 0.75);
	transform: scale(0.75, 0.75)
}
#footer {
	overflow: hidden;
	max-height: 0px;
	display: block;
	width: 100%;
	z-index: 50;
	height: auto;
	background-color: #000;
	-webkit-transition: all 0.5s cubic-bezier(0, 0, 0.19, 0.99);
	transition: all 0.5s cubic-bezier(0, 0, 0.19, 0.99);
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 10px;
	text-align: center;
	text-transform: uppercase
}

@media only screen and (max-width: 650px) {
#footer {
	display: block
}
}
#footer.on {
	max-height: 100vh
}

@media only screen and (max-width: 500px) {
#footer.on {
	z-index: 900
}
}
#footer p {
	line-height: 1em
}
#footerInner {
	width: 100%;
	position: relative;
	height: auto
}
#footerContainer {
	bottom: 0px;
	width: 100%
}
#logos {
	display: block;
	vertical-align: top;
	margin: 30px auto 15px;
	max-width: 650px;
	text-align: center;
	position: relative;
	top: 0
}
#logos img {
	max-width: 1028px;
	width: 100%;
	height: auto
}

@media only screen and (max-width: 1000px) {
#logos {
	margin: 60px auto 10px;
	padding: 0px 15px
}
}

@media only screen and (max-width: 650px) {
#logos {
	width: 100%;
	margin: 15px auto 10px;
	padding: 0px 20px
}
}

@media only screen and (orientation: landscape) {
.mobile #logos {
	width: 100%;
	margin: 10px auto 10px
}
}
#legal {
	bottom: 12px
}
#legal, #legaltrayBtns {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
	display: block;
	font-size: 10px;
	color: #666;
	line-height: 1em;
	height: auto;
	text-align: center;
	vertical-align: top;
	width: 100%;
	left: 0px;
	right: 0px;
	z-index: 20;
	text-transform: uppercase
}
#legal p, #legaltrayBtns p {
	margin-top: 3px;
	line-height: 1.2em
}
#legal a, #legaltrayBtns a {
	display: inline-block;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	padding: 2px;
	margin: 3px;
	line-height: 1em;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}
.desktop #legal a:hover, .desktop #legaltrayBtns a:hover {
	color: #FFF;
	text-decoration: underline
}
.mobile #legal a, .mobile #legaltrayBtns a {
	margin: 4px
}
.mobile #legal a, .mobile #legal a:active, .mobile #legal a:hover, .tablet #legal a, .tablet #legal a:active, .tablet #legal a:hover, .mobile #legaltrayBtns a, .mobile #legaltrayBtns a:active, .mobile #legaltrayBtns a:hover, .tablet #legaltrayBtns a, .tablet #legaltrayBtns a:active, .tablet #legaltrayBtns a:hover {
	color: #FFF;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	text-decoration: none
}
#legal #legalBtns, #legaltrayBtns #legalBtns {
	cursor: pointer;
	left: 10px;
	top: -10px
}
#legal #legalBtns a, #legaltrayBtns #legalBtns a {
	color: #666
}
.desktop #legal #legalBtns a:hover, .desktop #legaltrayBtns #legalBtns a:hover {
	color: #FFF
}
.mobile #legal #legalBtns a, .mobile #legal #legalBtns a:active, .mobile #legal #legalBtns a:hover, .tablet #legal #legalBtns a, .tablet #legal #legalBtns a:active, .tablet #legal #legalBtns a:hover, .mobile #legaltrayBtns #legalBtns a, .mobile #legaltrayBtns #legalBtns a:active, .mobile #legaltrayBtns #legalBtns a:hover, .tablet #legaltrayBtns #legalBtns a, .tablet #legaltrayBtns #legalBtns a:active, .tablet #legaltrayBtns #legalBtns a:hover {
	color: #FFF;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8)
}

@media only screen and (max-width: 650px) {
#legal #legalBtns, #legaltrayBtns #legalBtns {
	top: -10px;
	left: 15px;
	right: 15px
}
#legal #legalBtns a, #legaltrayBtns #legalBtns a {
	padding: 0px;
	margin: 0px
}
}

@media only screen and (max-width: 420px) {
#legal #legalBtns, #legaltrayBtns #legalBtns {
	top: -25px;
	line-height: 1.4em
}
}

@media only screen and (orientation: landscape) {
.mobile #legal #legalBtns, .mobile #legaltrayBtns #legalBtns {
	margin: auto;
	position: relative;
	left: 0px;
	top: 7px
}
}

@media only screen and (orientation: landscape) {
.mobile #legal, .mobile #legaltrayBtns {
	left: 0px;
	right: 0px;
	margin-top: 0px
}
.mobile #legal p, .mobile #legaltrayBtns p {
	margin-bottom: 10px
}
}

@media only screen and (orientation: landscape) {
.mobile #legal {
	bottom: 10px
}
}
#legaltrayBtns {
	position: relative;
	max-width: 1028px;
	width: 100%;
	margin: 0px auto 10px
}
#legaltrayBtns a {
	color: #CCC
}

@media only screen and (max-width: 650px) {
#legaltrayBtns {
	margin: 0px auto 10px;
	position: relative;
	bottom: auto;
	line-height: 1em
}
}

@media only screen and (orientation: landscape) {
.mobile #legaltrayBtns {
	position: relative;
	line-height: 1em
}
}
p#notrated {
	margin: 0px auto 0px;
	padding: 4px;
	display: none;
	width: auto;
	color: #444;
	border: #444 1px solid
}
#legalBtnToggle {
	bottom: 1px;
	left: 25px
}

@media only screen and (max-width: 650px) {
#legalBtnToggle {
	bottom: 0px;
	left: 0px;
	right: 0px;
	text-align: center
}
}

@media only screen and (orientation: landscape) {
.mobile #legalBtnToggle {
	bottom: -1px;
	left: 5px
}
}
#legalBtnToggle a {
	position: relative;
	display: inline-block;
	line-height: 1.1em;
	font-size: 8px;
	color: #CCC;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	padding: 2px;
	margin: 3px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}
.desktop #legalBtnToggle a:hover {
	color: #FFF;
	text-decoration: underline
}
.mobile #legalBtnToggle a {
	margin: 7px
}
.mobile #legalBtnToggle a, .mobile #legalBtnToggle a:active, .mobile #legalBtnToggle a:hover, .tablet #legalBtnToggle a, .tablet #legalBtnToggle a:active, .tablet #legalBtnToggle a:hover {
	color: #FFF;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
	text-decoration: none
}
#legalBtnToggle #openLegalBtn {
	z-index: 90;
	font-size: 10px;
	font-family: "Lato", sans-serif;
	color: #666
}
.mobile #legalBtnToggle #openLegalBtn, .mobile #legalBtnToggle #openLegalBtn:active, .mobile #legalBtnToggle #openLegalBtn:hover, .tablet #legalBtnToggle #openLegalBtn, .tablet #legalBtnToggle #openLegalBtn:active, .tablet #legalBtnToggle #openLegalBtn:hover {
	color: #FFF;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.8)
}
#legalBtnToggle #openLegalBtn img {
	position: relative;
	top: -7px;
	right: 10px
}
#legalBtnToggle #closeLegalBtn.hidden {
	display: none
}
#closeLegalBtn {
	cursor: pointer;
	position: absolute;
	top: 20px;
	left: 25px;
	z-index: 100
}
.mobile #closeLegalBtn {
	top: 10px;
	left: 10px
}
.mobile #closeLegalBtn img {
	width: 25px;
	height: auto
}

@media only screen and (max-width: 650px) {
#closeLegalBtn {
	display: block;
	position: relative;
	top: 0;
	width: 34px;
	left: 0;
	margin: 0 auto 10px;
	width: auto;
	height: auto
}
.mobile #closeLegalBtn {
	top: 0;
	left: 0
}
}
#home {
	display: block
}
#home header {
	position: relative;
	margin: auto;
	height: 100%
}
#homeContentScroll {
	overflow-x: hidden;
	overflow-y: auto
}
#homeBg {
	background: url(../images/home/bgNoVideo.jpg) center center no-repeat;
	background-size: auto 100%
}
#homeContent {
	width: 100%;
	height: 100vh
}
.mobile #homeContent, .tablet #homeContent {
	height: -webkit-calc(100vh - 80px);
	height: calc(100vh - 80px)
}

@media screen and (orientation: landscape) {
.mobile #homeContent {
	height: -webkit-calc(100vh - 20px);
	height: calc(100vh - 20px)
}
}
#videoCurtain, #homeCurtain {
	background-color: #000
}
#homeLogoBlock {
	display: block;
	width: 400px;
	max-width: 35%;
	bottom: 30px;
	right: 10px
}
#homeLogoBlock:before {
	content: '';
	padding-top: 110%;
	display: block
}

@media only screen and (max-width: 600px) {
#homeLogoBlock {
	bottom: 40px
}
}

@media screen and (orientation: landscape) {
#homeLogoBlock {
	width: 31.85vh;
	max-width: none;
	height: 30vh
}
#homeLogoBlock:before {
	content: none;
	padding-top: 0
}
}
#subTitle {
	color: rgba(255,255,255,0.7);
font-size:-webkit-calc( 9px + (40 - 9) * (100vw - 280px) / (1000 - 280) );
font-size:calc( 9px + (40 - 9) * (100vw - 280px) / (1000 - 280) );
	font-family: "Didot W01 Headline", "GFS Didot", "DidotW01-DisplayRegular", serif;
	line-height: 1em;
	text-align: center;
	text-shadow: 0 0 13px #000;
	width: 100%
}

@media screen and (max-width: 280px) {
#subTitle {
	font-size: 9px
}
}

@media screen and (min-width: 1000px) {
#subTitle {
	font-size: 40px
}
}

@media screen and (orientation: landscape) {
#subTitle {
	font-size: 3vh
}
}
#titleArt {
	top: 6%;
	height: 80%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	width: auto
}
#releaseDate {
	color: rgba(255,255,255,0.5);
font-size:-webkit-calc( 11px + (47 - 11) * (100vw - 280px) / (1000 - 280) );
font-size:calc( 11px + (47 - 11) * (100vw - 280px) / (1000 - 280) );
	font-family: "Didot W01 Headline", "GFS Didot", "DidotW01-DisplayRegular", serif;
	line-height: 2em;
	text-align: center;
	text-shadow: 0 0 3px #000, 0 0 13px #000;
	width: 100%
}

@media screen and (max-width: 280px) {
#releaseDate {
	font-size: 11px
}
}

@media screen and (min-width: 1000px) {
#releaseDate {
	font-size: 47px
}
}

@media screen and (orientation: landscape) {
#releaseDate {
	font-size: 2vh
}
}
#countdown {
	color: #fff;
	font-family: "Didot W01 Headline Bold", serif;
font-size:-webkit-calc( 40px + (111 - 40) * (100vw - 280px) / (1000 - 280) );
font-size:calc( 40px + (111 - 40) * (100vw - 280px) / (1000 - 280) );
	letter-spacing: 0.025em;
	white-space: nowrap;
	text-shadow: 0 0 3px #fff, 0 0 7px #fff;
	-webkit-transform: translate(-50%, -35%);
	-ms-transform: translate(-50%, -35%);
	transform: translate(-50%, -35%)
}

@media screen and (max-width: 280px) {
#countdown {
	font-size: 40px
}
}

@media screen and (min-width: 1000px) {
#countdown {
	font-size: 111px
}
}
#countdown>div {
	opacity: 0.75
}
#tumblr {
	position: relative;
	padding: 0vh 0 0vh;
	top: 100vh;
	margin: 0 auto;
	text-align: center
}
#tumblrMenuBtns {
	background-color: #171717;
	width: 100%;
	position: relative;
	width: 100%;
	padding: 50px 0px 100px
}
.tumblrMenuBtn {
	display: inline-block;
	position: relative;
	width: 30vw;
	margin: 0px 1.5vw 3vw;
	cursor: pointer;
	border-radius: 4px
}

@media only screen and (max-width: 650px) {
.tumblrMenuBtn {
	width: 80vw
}
}
.tumblrMenuBtn .bg img {
	width: 100%;
	height: auto
}
.tumblrMenuBtn #connectDrawer {
	background: rgba(255,255,255,0.8);
	border-radius: 4px
}
#tumblrCTA {
	z-index: 500;
	top: -webkit-calc(100vh - 40px);
	top: calc(100vh - 40px);
	right: 20px;
	line-height: 1.1em;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	padding: 2px;
	margin: 3px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}

@media only screen and (max-width: 650px) {
#tumblrCTA {
	width: 100%;
	text-align: center;
	top: -webkit-calc(100vh - 25px);
	top: calc(100vh - 25px);
	left: 0px;
	right: 0px;
	margin: auto
}
}
#tumblrCTA #tumblrArrow {
	display: block;
	width: 143px
}

@media only screen and (max-width: 650px) {
#tumblrCTA #tumblrArrow {
	text-align: center;
	margin: auto
}
}
#tumblrCTA #tumblrArrow span {
	font-size: 10px;
	color: #c00;
	position: relative
}
#tumblrCTA #tumblrArrow:hover span {
	color: #FFF
}
#tumblrCTA #tumblrArrow img {
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg)
}
#gallery {
	z-index: 800;
	background-color: #000;
	height: 100vh
}
#gallery .arrow {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	cursor: pointer;
	text-align: center;
	font-size: 46px;
	display: block;
	width: 46px;
	height: 46px;
	background-color: rgba(0,0,0,0.6);
	padding: 10px
}
.mobile #gallery .arrow, .tablet #gallery .arrow {
	margin-top: -23px
}
#gallery .arrow.L {
	left: 26px;
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1)
}
#gallery .arrow.R {
	right: 26px
}
#gallery .arrow img {
	width: 13px;
	height: 26px
}
#gallery .arrow .line {
	background: white;
	display: block;
	height: 3px;
	width: 10px;
	margin: -1.5px 0 0 -5px;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}
#gallery .arrow .line.line1 {
	-webkit-transform: rotate(-45deg) translateZ(0);
	transform: rotate(-45deg) translateZ(0)
}
#gallery .arrow .line.line2 {
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0)
}
#gallery .arrow .closeOuter {
	-webkit-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1)
}
#gallery #connectDrawer {
	top: initial;
	bottom: 40px;
	left: 0px;
	right: 0px;
	width: auto;
	margin: auto
}
#gallery #connectDrawer #connectWrapper {
	width: 95%;
	text-align: right
}
.tablet #gallery #connectDrawer {
	top: auto;
	bottom: 85px
}
.mobile #gallery #connectDrawer {
	bottom: 65px
}

@media screen and (orientation: landscape) and (max-height: 320px) {
.mobile #gallery #connectDrawer {
	bottom: 85px
}
}
#galleryImageBar {
	overflow: hidden
}
#galleryImageBar.grabbed {
	cursor: -webkit-grabbing;
	cursor: grabbing
}
.slide {
	background: url(../images/gallery/loadLoop.gif) no-repeat;
	background-position: center center
}
.slide .imageShell {
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.slide.loaded .imageShell {
	opacity: 1
}
#galleryCol {
	left: 90px;
	max-width: 227px;
	-webkit-transition: opacity .25s ease-out;
	transition: opacity .25s ease-out
}
#galleryCol .title {
	width: 100%;
	text-align: center;
	z-index: 2
}
#galleryCol #galleryMask {
	overflow: hidden;
	margin-left: 0px
}
#galleryCol.autohide {
	opacity: 0
}
#galleryCol.autohide:hover {
	opacity: 1
}

@media only screen and (max-width: 500px) {
#galleryCol {
	display: none
}
}
.tablet #galleryCol, .mobile #galleryCol {
	display: none
}
.galleryOverlayBtn {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(../images/gallery/menuBtn.png) left top;
	cursor: pointer
}
.desktop .galleryOverlayBtn:hover {
	background-position: -16px top
}
.desktop .galleryOverlayBtn.selected:hover {
	background-position: right top;
	cursor: default
}
.galleryOverlayBtn.selected {
	background-position: right top;
	cursor: default;
	opacity: 1
}
.galleryMenuBtn {
	cursor: pointer;
	display: block;
	overflow: hidden;
	position: relative
}
.galleryMenuBtn .thumb {
	display: block;
	height: auto;
	position: relative;
	width: 100%;
	-webkit-filter: grayscale(1);
	-webkit-filter: grayscale(100%) contrast(85%) brightness(180%);
	filter: gray;
	filter: grayscale(100%) contrast(85%) brightness(180%);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease
}
.galleryMenuBtn .thumb:hover, .galleryMenuBtn:hover .thumb, .galleryMenuBtn.selected .thumb {
	-webkit-filter: grayscale(0);
	-webkit-filter: grayscale(0%) contrast(100%) brightness(100%);
	filter: none;
	filter: grayscale(0%) contrast(100%) brightness(100%)
}
.galleryMenuBtn:hover .label {
	background-color: rgba(0,0,0,0.9)
}
.ie10 .galleryMenuBtn:after {
	content: ' ';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(190,190,190,0.75);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
	opacity: 1
}
.ie10 .galleryMenuBtn .thumb {
	-webkit-filter: none;
	filter: none
}
.ie10 .galleryMenuBtn:hover:after, .ie10 .galleryMenuBtn.selected:after {
	opacity: 0
}
#galleryClose {
	top: 20px;
	right: 20px
}
#galleryScrollContent {
	top: 247px
}

@media only screen and (max-width: 500px) {
#galleryScrollContent {
	top: 180px
}
}
#galleryScrollContentInner {
	background-color: transparent
}
#ugc {
	background-color: rgba(0,0,0,0.85);
	z-index: 1000
}
#ugcColBg {
	background: #000 url(../images/gallery/ugc_gallery_bg.jpg) top left no-repeat;
	min-height: 100vh;
	background-size: 100% auto
}
#ugcCol {
	max-width: none;
	left: 0px;
	right: 0px;
	margin: 0px auto;
	width: 100%
}
#ugcScrollContent {
	top: 0px;
	bottom: 0px
}
#ugcScrollContent .scrollContentInner {
	background: transparent;
	padding: 0px;
	margin: auto;
	text-align: center
}
#ugcScrollContent .iScrollVerticalScrollbar {
	width: 7px;
	background-size: 100% auto
}
.mobile #ugcScrollContent, .tablet #ugcScrollContent {
	overflow-y: auto;
	overflow-x: hidden
}
#ugcTitle {
	background-color: transparent;
	height: auto;
	position: absolute;
	left: 46.3vw;
	top: 1.2vw;
	margin: 0px auto;
	text-align: center;
	color: #FFF;
	font-family: "Didot W01 Headline", "GFS Didot", "DidotW01-DisplayRegular", serif;
	font-size: 36px;
	line-height: 1em
}

@media only screen and (orientation: portrait) {
.mobile #ugcTitle {
	top: 2vw
}
}

@media only screen and (max-width: 800px) {
#ugcTitle {
	top: 1.7vw;
	font-size: 24px
}
}

@media only screen and (max-width: 320px) {
#ugcTitle {
	font-size: 18px
}
}

@media only screen and (max-width: 600px) {
#ugcTitle {
	left: 26vw
}
}
#rulesCTA {
	display: block;
	background-color: #c30000;
	color: #FFF;
	text-align: center;
	width: 14.5vw;
	padding: 14px 0px;
	font-family: "Didot W01 Headline", "GFS Didot", "DidotW01-DisplayRegular", serif;
	font-size: 13px;
	left: 27.2vw;
	top: .7vw;
	z-index: 10;
	cursor: pointer;
	line-height: 1em
}
.desktop #rulesCTA:hover {
	background-color: #FFF;
	color: #c30000
}

@media (min-width: 620px) {
#rulesCTA {
	font-size: -webkit-calc(4.14286px + 1.42857vw);
	font-size: calc(4.14286px + 1.42857vw)
}
}

@media (min-width: 1460px) {
#rulesCTA {
	font-size: 25px
}
}

@media only screen and (max-width: 600px) {
#rulesCTA {
	width: auto;
	padding: 10px 15px;
	top: 46px
}
}
#ugcThumbWrapper {
	padding: 45px 10.2vw 0px 27.2vw;
	text-align: left
}

@media (min-width: 620px) {
#ugcThumbWrapper {
	padding-top: -webkit-calc(19.16667px + 4.16667vw);
	padding-top: calc(19.16667px + 4.16667vw)
}
}

@media (min-width: 1460px) {
#ugcThumbWrapper {
	padding-top: 80px
}
}

@media only screen and (max-width: 600px) {
#ugcThumbWrapper {
	padding-top: 86px
}
}
.ugcMenuBtn {
	display: inline-block;
	position: relative;
	width: 14.5vw;
	height: 14.5vw;
	max-width: 279px;
	max-height: 279px;
	margin: 0px 15px 15px 0px;
	margin: 0px .7vw .7vw 0px;
	cursor: pointer;
	-webkit-transition: border-color .3s ease;
	transition: border-color .3s ease;
	border: 1px rgba(255,255,255,0) solid
}

@media only screen and (orientation: portrait) {
.mobile .ugcMenuBtn {
	width: 45.5vw;
	height: 45.5vw;
	margin: 0px auto 15px
}
}
.desktop .ugcMenuBtn:hover {
	border: 1px #fff solid
}
#ugcClose {
	top: 13px;
	right: 13px;
	z-index: 100
}
#ugcClose a {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent
}
#ugcClose a img {
	width: 76px;
	height: 76px
}
#ugcDesc {
	margin: auto
}
#ugcDesc p {
	margin: 0px 0px 33px 0px;
	color: #FFF;
	font-family: "Lato", sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3em
}
.mobile #ugcDesc p {
	font-size: 12px;
	margin-right: 0px
}
#ugcGalleryImageBar {
	overflow: hidden
}
#ugcGalleryImageBar.grabbed {
	cursor: -webkit-grabbing;
	cursor: grabbing
}
#ugcShell {
	top: -webkit-calc(50% - 40px);
	top: calc(50% - 40px);
	min-height: inherit;
	z-index: 800;
	background-color: #000
}
#ugcShell .arrow {
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	cursor: pointer;
	text-align: center;
	font-size: 46px;
	display: block;
	width: 46px;
	height: 46px;
	background-color: rgba(0,0,0,0.6);
	padding: 10px
}
.mobile #ugcShell .arrow, .tablet #ugcShell .arrow {
	margin-top: -23px
}
#ugcShell .arrow.L {
	left: 26px;
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1)
}
#ugcShell .arrow.R {
	right: 26px
}
#ugcShell .arrow img {
	width: 13px;
	height: 26px
}
#ugcShell .arrow .line {
	background: white;
	display: block;
	height: 3px;
	width: 10px;
	margin: -1.5px 0 0 -5px;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}
#ugcShell .arrow .line.line1 {
	-webkit-transform: rotate(-45deg) translateZ(0);
	transform: rotate(-45deg) translateZ(0)
}
#ugcShell .arrow .line.line2 {
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0)
}
#ugcShell .arrow .closeOuter {
	-webkit-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1)
}
.ugcslide {
	background: url(../images/gallery/loadLoop.gif) no-repeat center center
}
.ugcslide .imageShell {
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
.ugcslide.loaded {
	background: #000
}
.ugcslide.loaded .imageShell {
	opacity: 1
}
#ugcconnectDrawer {
	top: initial;
	bottom: 20px;
	left: 0px;
	right: 0px;
	width: auto;
	margin: auto
}
#ugcconnectDrawer #connectWrapper {
	text-align: right
}
#ugcOverlay {
	overflow: hidden;
	background: #000;
	top: 100%;
	z-index: 2000
}
.mobile #ugcOverlay {
	position: fixed
}
#ugcOverlay .closeBtn {
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	cursor: pointer;
	display: block;
	background-color: #000;
	z-index: 2000
}
#ugcOverlay .closeBtn .line {
	position: absolute;
	width: 2px;
	height: 12px;
	background: #e5e5e5
}
#ugcOverlay .closeBtn .line1 {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 14px
}
#ugcOverlay .closeBtn .line2 {
	top: 9px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 14px
}
#videos {
	background-color: rgba(0,0,0,0.85);
	z-index: 1000
}
#videosCol {
	max-width: -webkit-calc(100% - 40px);
	max-width: calc(100% - 40px);
	left: 20px;
	right: 0px;
	margin: 0px auto;
	width: 100%
}
.mobile #videosCol {
	right: 10px;
	left: 10px;
	width: auto
}

@media only screen and (max-width: 900px) {
#videosCol {
	max-width: 100%;
	left: 35px;
	right: 35px;
	width: auto
}
}
#videosScrollContent {
	top: 60px;
	bottom: 50px
}
.mobile #videosScrollContent {
	top: 82px;
	bottom: 100px;
	overflow-y: auto;
	overflow-x: hidden
}
.tablet #videosScrollContent {
	overflow-y: auto;
	overflow-x: hidden
}

@media only screen and (orientation: landscape) {
.mobile #videosScrollContent {
	top: 60px;
	bottom: 50px
}
}
#videosScrollContent .scrollContentInner {
	background: transparent;
	padding: 0;
	margin: auto;
	text-align: center
}
#videosTitle {
	background-color: transparent;
	display: none;
	width: 100%;
	height: auto;
	position: absolute;
	left: 0px;
	top: auto;
	bottom: 24px;
	margin: 0px auto;
	text-align: center
}
.mobile #videosTitle {
	display: none
}

@media only screen and (max-width: 728px) {
#videosTitle {
	bottom: 58px
}
#videosTitle img {
	max-width: 300px
}
}

@media only screen and (max-height: 1000px) {
#videosTitle {
	height: 140px
}
#videosTitle img {
	max-height: 100%;
	width: auto
}
}
#videosClose {
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	cursor: pointer;
	display: block;
	background-color: #000;
	z-index: 1000
}
#videosClose:before, #videosClose:after {
	z-index: 1000
}
#videosClose .closeBtn {
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: none
}
#videosClose .closeBtn .line {
	position: absolute;
	width: 2px;
	height: 12px;
	background: #e5e5e5
}
#videosClose .closeBtn .line1 {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 14px
}
#videosClose .closeBtn .line2 {
	top: 9px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 14px
}
#videosDesc {
	margin: auto
}
#videosDesc p {
	margin: 0px 0px 33px 0px;
	color: #FFF;
	font-family: "Lato", sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3em
}
.mobile #videosDesc p {
	font-size: 12px;
	margin-right: 0px
}
.videoMenuBtn {
	cursor: pointer;
	display: block;
	margin: 0px 0px 18px;
	overflow: hidden;
	position: relative
}

@media only screen and (orientation: landscape) {
.mobile .videoMenuBtn {
	margin: 0px auto 18px
}
.tablet .videoMenuBtn {
	margin: 0px auto 18px
}
}
.videoMenuBtn .label {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	text-align: left;
	background-color: rgba(0,0,0,0.5);
	padding: 12px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease
}
.mobile .videoMenuBtn .label, .tablet .videoMenuBtn .label {
	padding: 7px
}
.videoMenuBtn .label p {
	text-transform: uppercase;
	font-family: "Lato", sans-serif;
	font-weight: 200;
	font-size: 16px;
	letter-spacing: .10em;
	line-height: 1em;
	color: #FFF
}
.mobile .videoMenuBtn .label p, .tablet .videoMenuBtn .label p {
	font-size: 11px;
	font-size: 3vw;
	line-height: 1em
}

@media only screen and (orientation: landscape) {
.mobile .videoMenuBtn .label p, .tablet .videoMenuBtn .label p {
	font-size: 2vw
}
}
.videoMenuBtn:hover .label {
	background-color: rgba(255,255,255,0.6)
}
.videoMenuBtn:hover .label p {
	color: #000
}
.desktop .videoMenuBtn:hover #trailerCaption {
	color: #14181b;
	background-color: #FFF
}
.videoMenuBtn img {
	display: block;
	width: 100%;
	height: auto
}
.videoMenuBtn.youtubePlaylist {
	width: 25vw;
	height: 13.2vw;
	max-width: 385px;
	max-height: 210px;
	display: inline-block;
	margin: 15px
}

@media only screen and (orientation: portrait) {
.mobile .videoMenuBtn.youtubePlaylist, .tablet .videoMenuBtn.youtubePlaylist {
	display: block;
	margin: 0px auto 15px;
	width: 56vw;
	height: 36vw
}
}

@media only screen and (max-width: 900px) {
.videoMenuBtn.youtubePlaylist {
	display: block;
	margin: 0px auto 15px;
	width: 56vw;
	height: 36vw
}
}

@media only screen and (orientation: landscape) {
.mobile .videoMenuBtn.youtubePlaylist, .tablet .videoMenuBtn.youtubePlaylist {
	width: 28vw;
	height: 18.4vw;
	display: inline-block;
	margin: 15px
}
}
.videoMenuBtn.youtubePlaylist img {
	position: absolute;
	left: 0px;
	top: -42px
}

@media only screen and (orientation: portrait) {
.mobile .videoMenuBtn.youtubePlaylist img, .tablet .videoMenuBtn.youtubePlaylist img {
	position: relative;
	top: 0px
}
}

@media only screen and (orientation: landscape) {
.mobile .videoMenuBtn.youtubePlaylist img, .tablet .videoMenuBtn.youtubePlaylist img {
	position: relative;
	top: 0px
}
}
#videoShell, #homeShell {
	top: -webkit-calc(50% - 40px);
	top: calc(50% - 40px);
	min-height: inherit
}
#videoOverlay, #homeOverlay {
	overflow: hidden;
	background: #000;
	top: 100%;
	z-index: 2000
}
.mobile #videoOverlay, .mobile #homeOverlay {
	position: fixed
}
#videoOverlay .closeBtn, #homeOverlay .closeBtn {
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	font-size: 30px;
	cursor: pointer;
	display: block;
	background-color: #000
}
#videoOverlay .closeBtn .line, #homeOverlay .closeBtn .line {
	position: absolute;
	width: 2px;
	height: 12px;
	background: #e5e5e5
}
#videoOverlay .closeBtn .line1, #homeOverlay .closeBtn .line1 {
	top: 9px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 14px
}
#videoOverlay .closeBtn .line2, #homeOverlay .closeBtn .line2 {
	top: 9px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 14px
}
#about {
	background-color: rgba(0,0,0,0.85);
	z-index: 1000
}
#aboutCol {
	max-width: 756px;
	left: 33px;
	right: 0px;
	margin: 0px auto;
	width: 100%
}
.mobile #aboutCol {
	right: 10px;
	left: 10px;
	width: auto
}

@media only screen and (max-width: 850px) {
#aboutCol {
	right: 18px
}
}
#aboutScrollContent {
	top: 173px;
	bottom: 175px
}
.mobile #aboutScrollContent {
	top: 82px;
	bottom: 100px;
	overflow-y: auto;
	overflow-x: hidden
}
.tablet #aboutScrollContent {
	overflow-y: auto;
	overflow-x: hidden
}

@media only screen and (orientation: landscape) {
.mobile #aboutScrollContent {
	top: 60px;
	bottom: 50px
}
}
#aboutScrollContent .scrollContentInner {
	background: transparent;
	padding: 30px
}
#aboutTitle {
	background-color: transparent;
	display: none;
	width: 100%;
	height: auto;
	position: absolute;
	left: 0px;
	top: auto;
	bottom: 24px;
	margin: 0px auto;
	text-align: center
}
.mobile #aboutTitle {
	display: none
}

@media only screen and (max-width: 728px) {
#aboutTitle {
	bottom: 58px
}
#aboutTitle img {
	max-width: 300px
}
}

@media only screen and (max-height: 1000px) {
#aboutTitle {
	height: 140px
}
#aboutTitle img {
	max-height: 100%;
	width: auto
}
}
#aboutClose {
	top: 173px;
	right: 0px;
	z-index: 100
}
.mobile #aboutClose, .tablet #aboutClose {
	top: 20px;
	left: 20px;
	z-index: 100;
	margin: 0px auto;
	text-align: center
}
#aboutClose a {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent
}
#aboutClose a img {
	width: 76px;
	height: 76px
}
.mobile #aboutClose a, .tablet #aboutClose a {
	left: initial;
	top: 24px;
	width: 38px;
	height: 38px;
	text-align: center;
	margin: 0px auto
}
.mobile #aboutClose a img, .tablet #aboutClose a img {
	width: 38px;
	height: 38px
}
#aboutDesc {
	margin: auto
}
#aboutDesc p {
	margin: 0px 0px 33px 0px;
	color: #FFF;
	font-family: "Lato", sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.3em
}
.mobile #aboutDesc p {
	font-size: 12px;
	margin-right: 0px
}
#openNavBtn {
	cursor: pointer;
	width: 36px;
	height: 36px;
	padding: 0px;
	display: block;
	top: 15px;
	left: 15px
}
#openNavBtn .row {
	width: 28px;
	height: 4px;
	background-color: #666;
	position: absolute;
	left: 4px;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out
}
#openNavBtn .row1 {
	top: 9px
}
#openNavBtn .row2 {
	top: 16px;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s
}
#openNavBtn .row3 {
	top: 23px;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s
}
#openNavBtn .row4 {
	top: 7px;
	left: 9px;
	-webkit-transform: rotate(45deg) scaleX(0);
	-ms-transform: rotate(45deg) scaleX(0);
	transform: rotate(45deg) scaleX(0);
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out
}
#openNavBtn .row5 {
	top: 7px;
	left: auto;
	right: 9px;
	-webkit-transform: rotate(-45deg) scaleX(0);
	-ms-transform: rotate(-45deg) scaleX(0);
	transform: rotate(-45deg) scaleX(0);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: all .4s ease-out;
	transition: all .4s ease-out
}
#openNavBtn.open .row1 {
	opacity: 0;
	top: 29px;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s
}
#openNavBtn.open .row2 {
	opacity: 0;
	top: 29px
}
#openNavBtn.open .row3 {
	opacity: 0;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	top: 29px
}
#openNavBtn.open .row4 {
	-webkit-transform: rotate(45deg) scaleX(1);
	-ms-transform: rotate(45deg) scaleX(1);
	transform: rotate(45deg) scaleX(1);
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s
}
#openNavBtn.open .row5 {
	-webkit-transform: rotate(-45deg) scaleX(1);
	-ms-transform: rotate(-45deg) scaleX(1);
	transform: rotate(-45deg) scaleX(1);
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s
}
.mainMenuBtn {
	font-family: "Didot W01 Headline", "GFS Didot", "DidotW01-DisplayRegular", serif;
	display: block;
	font-size: 32px;
	line-height: 1em;
	color: #c4c4ba;
	cursor: pointer;
	padding-left: 30px;
	text-align: left;
	margin: 0px 0px 15px 0px;
	-webkit-transform: translateX(-50px);
	-ms-transform: translateX(-50px);
	transform: translateX(-50px);
	opacity: 0;
	-webkit-transition: color 0.33s ease, opacity 0.3s ease 0.2s, -webkit-transform 0.4s cubic-bezier(0.82, 0.01, 0.97, 0.36);
	transition: color 0.33s ease, opacity 0.3s ease 0.2s, -webkit-transform 0.4s cubic-bezier(0.82, 0.01, 0.97, 0.36);
	transition: color 0.33s ease, opacity 0.3s ease 0.2s, transform 0.4s cubic-bezier(0.82, 0.01, 0.97, 0.36);
	transition: color 0.33s ease, opacity 0.3s ease 0.2s, transform 0.4s cubic-bezier(0.82, 0.01, 0.97, 0.36), -webkit-transform 0.4s cubic-bezier(0.82, 0.01, 0.97, 0.36)
}
.mainMenuBtn:hover {
	color: #c00
}
.mainMenuBtn:first-child {
	margin-top: 70px
}
.open .mainMenuBtn {
	opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: color 0.33s ease, opacity 0.3s, -webkit-transform 1s cubic-bezier(0, 0.64, 0.25, 1) 0.1s;
	transition: color 0.33s ease, opacity 0.3s, -webkit-transform 1s cubic-bezier(0, 0.64, 0.25, 1) 0.1s;
	transition: color 0.33s ease, opacity 0.3s, transform 1s cubic-bezier(0, 0.64, 0.25, 1) 0.1s;
	transition: color 0.33s ease, opacity 0.3s, transform 1s cubic-bezier(0, 0.64, 0.25, 1) 0.1s, -webkit-transform 1s cubic-bezier(0, 0.64, 0.25, 1) 0.1s
}

@media screen and (max-height: 400px) {
.mainMenuBtn {
	font-size: 22px
}
}
#mainMenu {
	background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(0,0,0,0.7)), to(transparent));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.7) 50%, transparent 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.7) 50%, transparent 100%);
	display: block;
	height: 100%;
	width: 300px;
	max-width: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s ease 0.7s;
	transition: opacity 0.5s, visibility 0s ease 0.7s
}
#mainMenu.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s
}
#mainMenu .iScrollIndicator {
	position: absolute;
	border: none
}
#mainMenu .iScrollVerticalScrollbar {
	cursor: pointer;
	background: #fff;
	bottom: 0px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0px;
	-webkit-transition: width 0.25s;
	transition: width 0.25s;
	width: 0
}
#mainMenu .iScrollVerticalScrollbar.hidden {
	width: 0
}
#nav {
	position: absolute;
	top: 75px;
	left: 25px
}
#promoHolder {
	bottom: 45px;
	left: 35px;
	max-width: 360px;
	width: 100%;
	display: block
}

@media only screen and (max-width: 900px) {
#promoHolder {
	display: none
}
}
.mobile #promoHolder {
	display: none
}
#promoHolder.open, .tablet #promoHolder {
	display: block
}

@media only screen and (max-width: 900px) {
.tablet #promoHolder {
	bottom: 28px;
	left: 28px;
	right: inherit;
	margin: 0px
}
}

@media only screen and (orientation: landscape) {
.mobile #promoHolder {
	display: block;
	bottom: 28px;
	left: 28px;
	right: inherit;
	margin: 0px
}
.mobile #promoHolder.open {
	display: block;
	bottom: 30px;
	left: 30px;
	right: inherit;
	margin: auto;
	width: auto
}
}

@media only screen and (orientation: portrait) {
.mobile #promoHolder {
	bottom: 18%;
	left: 0px;
	right: 0px;
	margin: auto
}
}
#artPromoCTA {
	position: relative;
	margin: 0px;
	text-align: left;
	vertical-align: bottom;
	display: block;
	width: 100%;
	float: left
}

@media only screen and (max-width: 1100px) {
#artPromoCTA {
	width: 32vw
}
}

@media only screen and (max-width: 1100px) and (orientation: portrait) {
.mobile #artPromoCTA {
	width: 38vw;
	float: none;
	margin: auto
}
}

@media only screen and (max-height: 600px) {
#artPromoCTA {
	width: 40vh
}
}

@media only screen and (max-width: 900px) {
.mobile #artPromoCTA.open {
	width: 30vh;
	float: none;
	margin: auto
}
}

@media only screen and (orientation: landscape) {
.mobile #artPromoCTA {
	width: 45vh
}
}
#artPromoCTA img {
	position: relative;
	width: 100%;
	height: auto;
	margin: auto;
	vertical-align: bottom
}