/****************************** RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ""; content: none; } q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } *, :after, :before { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: text; } *:focus { outline: none; } /********************/ /* MIXIN */ /********************/ /********************/ /* COMMONS */ /********************/ /* Document : _common$ Created on : 13 nov. 2013, 12:27:33 Author : Diplomatic Cover Description: Purpose of the stylesheet follows. */ /* Document : _common$ Created on : 13 nov. 2013, 12:27:33 Author : Diplomatic Cover Description: Purpose of the stylesheet follows. */ /* Document : _common$ Created on : 13 nov. 2013, 12:27:33 Author : Diplomatic Cover Description: Purpose of the stylesheet follows. */ /* Webfont: UniversCom-59UltraCondensed */ @font-face { font-family: 'UniversCom59UltraCondensed'; src: url("../fonts/UniversCom59UltraCondensed/UniversCom-59UltraCondensed.eot"); /* IE9 Compat Modes */ src: url("../fonts/UniversCom59UltraCondensed/UniversCom-59UltraCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/UniversCom59UltraCondensed/UniversCom-59UltraCondensed.woff") format("woff"), url("../fonts/UniversCom59UltraCondensed/UniversCom-59UltraCondensed.ttf") format("truetype"), url("../fonts/UniversCom59UltraCondensed/UniversCom-59UltraCondensed.svg#UniversCom-59UltraCondensed") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: UniversLT-LightUltraCondensed */ @font-face { font-family: 'UniversLT49LightUltraCn'; src: url("../fonts/UniversLT49LightUltraCn/UniversLT-LightUltraCondensed.eot"); /* IE9 Compat Modes */ src: url("../fonts/UniversLT49LightUltraCn/UniversLT-LightUltraCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/UniversLT49LightUltraCn/UniversLT-LightUltraCondensed.woff") format("woff"), url("../fonts/UniversLT49LightUltraCn/UniversLT-LightUltraCondensed.ttf") format("truetype"), url("../fonts/UniversLT49LightUltraCn/UniversLT-LightUltraCondensed.svg#UniversLT-LightUltraCondensed") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: HelveticaLT-Condensed */ @font-face { font-family: 'HelveticaLTCondensed'; src: url("../fonts/HelveticaLTCondensed/HelveticaLT-Condensed.eot"); /* IE9 Compat Modes */ src: url("../fonts/HelveticaLTCondensed/HelveticaLT-Condensed.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaLTCondensed/HelveticaLT-Condensed.woff") format("woff"), url("../fonts/HelveticaLTCondensed/HelveticaLT-Condensed.ttf") format("truetype"), url("../fonts/HelveticaLTCondensed/HelveticaLT-Condensed.svg#HelveticaLT-Condensed") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: TrajanPro-Bold */ @font-face { font-family: 'TrajanPro'; src: url("../fonts/TrajanPro/TrajanPro-Bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/TrajanPro/TrajanPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/TrajanPro/TrajanPro-Bold.woff") format("woff"), url("../fonts/TrajanPro/TrajanPro-Bold.ttf") format("truetype"), url("../fonts/TrajanPro/TrajanPro-Bold.svg#TrajanPro-Bold") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } /* Webfont: TrajanPro */ @font-face { font-family: 'TrajanProLight'; src: url("../fonts/TrajanPro/TrajanPro-Regular.eot"); /* IE9 Compat Modes */ src: url("../fonts/TrajanPro/TrajanPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/TrajanPro/TrajanPro-Regular.woff") format("woff"), url("../fonts/TrajanPro/TrajanPro-Regular.ttf") format("truetype"), url("../fonts/TrajanPro/TrajanPro-Regular.svg#TrajanPro-Regular") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } /* Document : _common$ Created on : 13 nov. 2013, 12:27:33 Author : Diplomatic Cover Description: Purpose of the stylesheet follows. */ html, body { height: 100%; width: 100%; min-height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } body { font-size: 14px; line-height: 21px; overflow: hidden; color: white; } body * { -webkit-font-smoothing: antialiased; } input { font-family: inherit; padding: 5px 10px; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } li { list-style-type: none; } a, a:active { outline: none; text-decoration: none; transition: color 0.3s; } a img { border: none; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } /*::selection { background: #fff2a8; } ::-moz-selection { background: #fff2a8; }*/ section { width: -mox-calc(100% - 296px); width: -o-calc(100% - 296px); width: calc(100% - 296px); height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background-size: 100% 100%; background-position: center center; background-color: black; } @media screen and (max-width: 1280px) { section { width: -mox-calc(100% - 200px); width: -o-calc(100% - 200px); width: calc(100% - 200px); } } .container { position: relative; margin-top: -1px; padding-top: 1px; z-index: 3; } .surround { display: inline-block; position: relative; letter-spacing: 2px; text-transform: uppercase; } .surround::before { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 900px 1px; position: absolute; top: -5px; left: 0; opacity: 0.7; } .surround::after { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 900px 1px; position: absolute; bottom: -5px; left: 0; opacity: 0.7; } .bottom-blur { position: fixed; bottom: 0; left: 0; height: 150px; width: 100%; background-image: linear-gradient(transparent 0%, black 70%); z-index: 8; } .right-blur { position: fixed; bottom: 0; right: 0; width: 150px; height: 100%; background-image: linear-gradient(to right, transparent 0%, black 50%); z-index: 8; } .left-blur { position: fixed; bottom: 0; left: 0; width: 150px; height: 100%; background-image: linear-gradient(to left, transparent 0%, black 50%); z-index: 8; } .perspective { -webkit-perspective: 400px; perspective: 400px; } .anime3d { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .blur { -webkit-filter: blur(2px); filter: blur(2px); } .main-title { height: 50px; text-align: center; margin: 100px 0 30px; position: relative; z-index: 5; width: auto; display: inline-block; } .main-title h1, .main-title h2 { display: inline-block; font-family: "UniversCom59UltraCondensed"; font-size: 54px; line-height: 64px; color: #bd994d; text-transform: uppercase; position: relative; z-index: 2; } .main-title h1::before, .main-title h2::before { content: ""; display: block; width: 65px; height: 1px; position: absolute; top: 41%; left: -40px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 400% 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } .main-title h1::after, .main-title h2::after { content: ""; display: block; width: 65px; height: 1px; position: absolute; top: 41%; right: -70px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 400% 1px; } body { background-color: #000000; } #main { height: 100%; } .outer-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; opacity: 0; transition: opacity 0.5s ease; background: rgba(0, 0, 0, 0.9); } .outer-wrapper.open { display: block; opacity: 1; } .outer-wrapper > div { position: relative; display: block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .outer-wrapper#trailer > div { vertical-align: top; } #mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; display: none; } #mask.show { display: block; } .blur { -webkit-filter: blur(2px); filter: blur(2px); } /** * Title */ .title { display: inline-block; padding: 8px 18px 2px; margin: 0 auto 15px; font-family: "UniversCom59UltraCondensed"; font-size: 22px; line-height: 22px; color: #bd994d; vertical-align: middle; } .ie .title { padding: 5px 18px 3px; } /** * Video */ video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } video.loaded { opacity: 1; } #transitions { position: fixed; top: 0; left: 0; width: 50%; height: 50%; z-index: 20; display: none; opacity: 0; transition: opacity 0.4s; -webkit-transform: scale(2); transform: scale(2); -webkit-transform-origin: 0 0; transform-origin: 0 0; } #transitions.show { opacity: 1; display: block; } #particles { position: fixed; top: 0; left: 0; width: 50%; height: 50%; z-index: 2; -webkit-transform: scale(2); transform: scale(2); -webkit-transform-origin: 0 0; transform-origin: 0 0; transition: opacity 0.5s; } #particles.hide { opacity: 0; } /********************/ /* ASIDE */ /********************/ #cookies { position: absolute; bottom: 0; right: 0; box-sizing: border-box; background-color: #050402; padding: 17px 60px; text-align: center; z-index: 30; width: -mox-calc(100% - 298px); width: -o-calc(100% - 298px); width: calc(100% - 298px); transition: bottom 0.3s ease; } @media screen and (max-width: 1280px) { #cookies { width: -mox-calc(100% - 202px); width: -o-calc(100% - 202px); width: calc(100% - 202px); } } #cookies.hide { bottom: -100%; } #cookies p { font-family: "HelveticaLTCondensed"; font-size: 15px; color: #acacac; } #cookies .btn { font-family: "HelveticaLTCondensed"; font-size: 15px; line-height: 15px; margin-top: 0; display: inline-block; height: 15px; color: #bd994d; } #cookies .btn:after { display: none; } #cookies .close-cookie { background: url("../img/close-cross-cookie.png") center center no-repeat; position: absolute; top: -mox-calc(50% - 5px); top: -o-calc(50% - 5px); top: calc(50% - 5px); right: 39px; width: 12px; height: 10px; transition: all 0.4s ease; } #cookies .close-cookie:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } #shares { position: fixed; bottom: 20px; right: 20px; line-height: 60px; z-index: 9; } #shares a.facebook, #shares a.twitter { width: 35px; padding: 0px; } #shares a.facebook { padding-top: 7px; } #shares a.facebook img { width: 11px; height: 21px; margin: auto; } #shares a.twitter { padding-top: 8px; padding-bottom: 1px; } #shares a.twitter img { width: 22px; height: 18px; margin: auto; } #shares a.volume { display: inline-block; width: 35px; height: 35px; padding: 0; } #shares a.volume .volume-icon { display: block; width: 100%; height: 100%; background: url("../img/pictos/sound.svg") center center no-repeat; background-size: 19px 17px; } #shares a.volume.mute .volume-icon { background: url("../img/pictos/mute.svg") center bottom no-repeat; background-size: 19px 17px; } .ie #shares a { padding: 6px 10px 2px; height: 34px; } .ie #shares a.facebook, .ie #shares a.twitter { padding-left: 7px; padding-right: 7px; } .field-wrapper { display: block; } .input-wrapper { display: inline-block; vertical-align: top; position: relative; } .input-wrapper .msg { font-size: 12px; } .input-wrapper.file::after { content: ""; display: block; position: absolute; width: 11px; height: 11px; right: 20px; top: 12px; background: url("../img/pictos/cross.svg") center center no-repeat; background-size: 11px 11px; } .input { position: relative; z-index: 1; display: inline-block; vertical-align: top; background-color: rgba(0, 0, 0, 0.4); color: white; font-family: "UniversLT49LightUltraCn"; font-size: 80px; text-transform: uppercase; } .input *, .input *:after, .input *:before { box-sizing: border-box; } .input .borders { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; } .input .borders span { transition: width 100ms linear, height 100ms linear; position: absolute; display: block; background: #bd994d; } .input .borders span:nth-child(1) { left: 0; top: 0; width: 100%; height: 1px; } .input .borders span:nth-child(2) { right: 0; top: 0; width: 1px; height: 100%; } .input .borders span:nth-child(3) { right: 0; bottom: 0; width: 100%; height: 1px; } .input .borders span:nth-child(4) { left: 0; bottom: 0; width: 1px; height: 100%; } .input.textarea { width: 400px; } .input.error .borders span { background: #ff4200; } .input.error .input__field, .input.error .input__label { color: #ff4200; } .input.error select { color: #ff4200; } .input--focus .borders span:nth-child(1), .input--focus .borders span:nth-child(3) { height: 3px; } .input--focus .borders span:nth-child(2), .input--focus .borders span:nth-child(4) { width: 3px; } .input__field { position: relative; display: block; float: right; padding: 9px 37px; width: 100%; z-index: 10; color: white; font-family: inherit; font-size: inherit; text-transform: uppercase; text-align: center; border: none; border-radius: 0; background: transparent; -webkit-appearance: none; /* for box shadows to show on iOS */ -moz-appearance: none; } textarea.input__field { height: 100%; } .input__field:focus { outline: none; } .input__label { position: absolute; width: 100%; display: inline-block; float: right; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 104px; transition: all 0.3s ease; } .input__field:focus + .input__label, .input--filled .input__label { transition-delay: 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0; } .input__label-content { position: relative; display: block; width: 100%; } .msg { font-family: "HelveticaLTCondensed"; font-weight: bold; font-size: 12px; line-height: 21px; color: #bd994d; text-transform: uppercase; display: block; visibility: hidden; height: 0; opacity: 0; transition: all 0.3s ease; margin: 0 !important; } .msg.show { visibility: visible; opacity: 1; } .msg.error { color: #ff4200; } input[type="submit"] { display: block; height: 0; visibility: hidden; opacity: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number] { -moz-appearance: textfield; } [type="file"] { opacity: 0; } [type="checkbox"] { opacity: 0; margin-right: 22px; float: left; z-index: 10; position: relative; } [type="checkbox"] + label { display: block; text-align: left; margin-bottom: 5px; color: #9c9c9c; font-family: "HelveticaLTCondensed"; font-size: 14px; } [type="checkbox"]:checked + label::after { -webkit-transform: scale(1) translate3d(0%, 0%, 0); transform: scale(1) translate3d(0%, 0%, 0); } [type="checkbox"] + label::before { content: ""; display: block; width: 18px; height: 18px; cursor: pointer; background: transparent; position: absolute; left: 0; top: 1px; border: 1px solid #bd994d; transition: opacity 0.3s; } [type="checkbox"] + label::after { content: ""; display: block; width: 10px; height: 10px; cursor: pointer; background: #bd994d; position: absolute; left: 4px; top: 5px; transition: all 0.3s; -webkit-transform: scale(0) translate3d(0%, 0%, 0); transform: scale(0) translate3d(0%, 0%, 0); } #menu { width: 296px; height: 100%; position: fixed; left: 0; top: 0; z-index: 10; background: url("../img/bg/nav.jpg") left top no-repeat #0c0b09; background-size: auto 1024px; margin-top: -1px; padding: 1px 0 0; } @media screen and (max-width: 1280px) { #menu { width: 200px; } } #menu::after { content: ""; display: block; width: 2px; height: 100%; position: absolute; right: -1px; top: 0; background: rgba(255, 255, 255, 0.06); } #menu h1 { width: 90%; margin: 40px auto 20px; } #menu h1 img { width: 100%; } #menu nav { width: 170px; margin: 50px auto 23px; } @media screen and (max-height: 690px) { #menu nav { margin-bottom: 20px; } } @media screen and (max-width: 1280px) { #menu nav { margin-top: 20px; } } #menu nav .btn { width: 100%; font-size: 23px; line-height: 33px; margin-top: 0; padding-left: 55px; padding-right: 0; color: #9c9c9c; } #menu nav .btn.disable { color: #3b3a39; } #menu nav .btn.disable .num { color: #3b3a39; } #menu nav .btn .hidden { margin-top: -10px; } #menu nav .btn > span { height: 11px; } #menu nav .btn > span > span { top: -1px; text-align: left; } #menu nav .btn > span.bottom > span { top: auto; bottom: -10px; } #menu nav .btn .num { height: 34px; width: 30px; position: absolute; left: 0; top: -2px; z-index: 0; font-family: "TrajanPro"; font-size: 14px; line-height: 34px; vertical-align: middle; text-align: center; color: #616160; } #menu nav .btn:not(.disable):hover, #menu nav .btn.selected { color: #bd994d; } #menu nav .btn:not(.disable):hover .num, #menu nav .btn.selected .num { color: white; } #menu .push-market { margin-top: 30%; width: 100%; height: 270px; padding-top: 20px; background: url("../img/bg/packshot_light.png") center center no-repeat; background-size: 100% 100%; text-align: center; } #menu .push-market img { max-height: 180px; } #menu .push-market .btn { color: #bd994d; } @media screen and (max-height: 820px) { #menu .push-market { margin-top: 10px; height: 200px; } #menu .push-market img { max-height: 110px; } } @media screen and (max-height: 690px) { #menu .push-market { margin-top: 10px; height: 180px; } #menu .push-market img { max-height: 90px; } #menu .push-market a { margin-top: 10px; } } @media screen and (max-width: 1280px) { #menu .push-market .btn { margin-top: 0; font-size: 20px; } } #menu .legals { width: 90%; padding: 0 20px; position: absolute; bottom: 20px; color: #616160; font-family: "HelveticaLTCondensed"; font-size: 12px; line-height: 13px; } #menu .legals ul { display: inline-block; width: 100%; } #menu .legals ul li { display: inline-block; margin-right: 10px; } #menu .legals p { margin: 5px 0; } #menu .legals .legals-link { display: inline-block; text-decoration: none; position: relative; overflow: hidden; } #menu .legals .legals-link::after { content: ""; display: block; height: 1px; width: 100%; position: absolute; bottom: 0; right: 0; background-color: white; } #menu .legals .legals-link:hover::after { -webkit-animation: animateUnderline 1.5s; animation: animateUnderline 1.5s; } @media screen and (max-width: 1280px) { #menu .legals { padding: 0 0px 0 10px; } #menu .legals ul li { margin-right: 2px; } } #menu .legals-link { color: white; text-transform: uppercase; text-decoration: underline; } .ie #menu nav .btn { height: 23px; } .ie #menu nav .btn .num { height: 23px; line-height: 37px; } .ie #menu nav .btn .hidden { margin-top: -13px; } .ie #menu nav .btn > span { height: 14px; } .ie #menu nav .btn > span.bottom > span { bottom: -4px; } .ie #menu nav .btn::after { top: 14px; } .no-cookies #legals .close { top: 39px; } #legals { z-index: 20; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; text-align: center; vertical-align: middle; background-color: rgba(0, 0, 0, 0.9); font-family: "HelveticaLTCondensed"; opacity: 0; transition: opacity 0.5s ease; } #legals .main-title { margin: 0; } #legals.open { opacity: 1; } #legals .close { position: absolute; top: 39px; right: 39px; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } #legals .legals, #legals .platforms { width: 700px; margin: 20px auto; } #legals .legals { width: 350px; } #legals .legals .img { width: 300px; margin: auto; } #legals .legals .img a { margin: 5px 10px; } #legals .platforms .img a { margin: 5px; } #legals p { margin: 10px; } [lang=us] #age-gate { background: #000; } [lang=us] #age-gate .msg.error { margin-top: 40px; font-size: 23px; } #age-gate { text-align: center; vertical-align: middle; z-index: 10; } #age-gate .wrapper { width: 622px; height: 396px; margin: 0 auto; } #age-gate .logo { margin-bottom: 15px; width: 100%; } #age-gate .input.day, #age-gate .input.month { width: 144px; } #age-gate .input-wrapper:nth-child(1), #age-gate .input-wrapper:nth-child(2) { margin-right: 11px; } #age-gate .input.year { width: 196px; } .ie #keep-in-touch { background-color: rgba(0, 0, 0, 0.9); } .no-cookies #keep-in-touch .close { top: 39px; } #keep-in-touch { z-index: 20; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; text-align: center; vertical-align: middle; background-color: rgba(0, 0, 0, 0.9); opacity: 0; transition: opacity 0.5s ease; } #keep-in-touch.open { opacity: 1; } #keep-in-touch > div { position: absolute; display: inline-block; text-align: center; vertical-align: middle; top: 50%; left: 0; right: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } #keep-in-touch .main-title { margin: 0 0 10px; } #keep-in-touch .wrapper { width: 408px; margin: 0 auto; } #keep-in-touch .title { font-size: 48px; line-height: normal; text-transform: uppercase; padding: 12px 18px 0px; margin-bottom: 23px; vertical-align: middle; } .form p { font-family: "HelveticaLTCondensed"; font-size: 15px; line-height: 21px; color: #ffffff; margin-bottom: 25px; } .form p.error { color: #ff4200; font-size: 12px; } .form p.success { color: #bd994d; } .form form.hide { display: none; } .form .input-wrapper { display: block; margin: 0 auto; max-width: 262px; min-height: 58px; } .form .input-wrapper p { text-align: right; } .form .input { font-family: "HelveticaLTCondensed"; font-size: 12px; width: 100%; max-width: 262px; margin-bottom: 8px; } .form .input.select:after { content: ""; background: url("../img/select-arrow.png") center center no-repeat; position: absolute; right: 0; top: 0; width: 40px; height: 100%; } .form .input.error { margin-bottom: 0px; transition: none; } .form .input__field { text-align: left; text-transform: none; padding: 12px 15px; } .form .input__label { text-transform: uppercase; line-height: 32px; text-align: left; padding-left: 15px; } .form .input__label-content { line-height: normal; padding-top: 13px; } .form select option { background-color: white; color: black; font-size: 14px; line-height: 20px; } .form .close { position: absolute; top: 39px; right: 39px; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .ie #keep-in-touch .title { padding: 7px 18px 3px; } @-webkit-keyframes move-before { 0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 40% { -webkit-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 40.001% { -webkit-transform: translate3d(-33px, 0, 0); transform: translate3d(-33px, 0, 0); } 60% { -webkit-transform: translate3d(-33px, 0, 0); transform: translate3d(-33px, 0, 0); } 100% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } } @keyframes move-before { 0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } 40% { -webkit-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 40.001% { -webkit-transform: translate3d(-33px, 0, 0); transform: translate3d(-33px, 0, 0); } 60% { -webkit-transform: translate3d(-33px, 0, 0); transform: translate3d(-33px, 0, 0); } 100% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } } @-webkit-keyframes move-after { 0% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } 40% { -webkit-transform: translate3d(0, 33px, 0); transform: translate3d(0, 33px, 0); } 40.001% { -webkit-transform: translate3d(0, -33px, 0); transform: translate3d(0, -33px, 0); } 60% { -webkit-transform: translate3d(0, -33px, 0); transform: translate3d(0, -33px, 0); } 100% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } } @keyframes move-after { 0% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } 40% { -webkit-transform: translate3d(0, 33px, 0); transform: translate3d(0, 33px, 0); } 40.001% { -webkit-transform: translate3d(0, -33px, 0); transform: translate3d(0, -33px, 0); } 60% { -webkit-transform: translate3d(0, -33px, 0); transform: translate3d(0, -33px, 0); } 100% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } } #highlights-push { position: fixed; top: 20px; right: 20px; height: 170px; width: 310px; z-index: 5; padding-left: 40px; transition: -webkit-transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } #highlights-push.closed { -webkit-transform: translate3d(290px, 0, 0); transform: translate3d(290px, 0, 0); } #highlights-push.closed #highlights-link::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 1480px) { #highlights-push { width: 200px; } #highlights-push.closed { -webkit-transform: translate3d(185px, 0, 0); transform: translate3d(185px, 0, 0); } } #highlights-push .highlights-content { white-space: nowrap; overflow: hidden; margin-bottom: 20px; text-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.75); } #highlights-push article { display: inline-block; width: 100%; height: 138px; white-space: normal; vertical-align: top; } #highlights-push article h3 { font-family: "UniversCom59UltraCondensed"; font-size: 24px; line-height: 27px; margin: 10px 0; text-transform: uppercase; } #highlights-push article h3 a { color: white; } #highlights-push .nav a { display: inline-block; width: auto; margin-right: 7px; padding-right: 3px; padding-bottom: 6px; font-family: "HelveticaLTCondensed"; font-size: 16px; color: white; position: relative; overflow: hidden; float: left; } #highlights-push .nav a::after { content: ""; display: block; height: 1px; width: 100%; position: absolute; bottom: 7px; right: 0; background-color: white; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.75); } #highlights-push .nav a:not(.disable):hover::after { -webkit-animation: animateUnderline 1.5s; animation: animateUnderline 1.5s; } #highlights-push .nav a.disable { opacity: 0.6; cursor: default; } @media screen and (max-width: 1480px) { #highlights-push .nav a:not(.all) { width: 20px; padding-bottom: 0; text-indent: -9999px; background-image: url("../img/pictos/arrow.svg"); background-position: 6px center; background-repeat: no-repeat; background-size: 15px auto; transition: -webkit-transform 0.3s; transition: transform 0.3s; } #highlights-push .nav a:not(.all)::after { display: none; } #highlights-push .nav a:not(.all).next { -webkit-transform: rotate(180deg); transform: rotate(180deg); } #highlights-push .nav a:not(.all).next:not(.disable):hover { -webkit-transform: rotate(180deg) translate3d(-5px, 0, 0); transform: rotate(180deg) translate3d(-5px, 0, 0); } #highlights-push .nav a:not(.all).prev:not(.disable):hover { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } } #highlights-push .nav .all { float: right; } #highlights-push .nav .separator { vertical-align: top; margin: 0 7px 0 0px; float: left; } #highlights-push .trailer-content { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; } #highlights-push .trailer-content iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #highlights-push.animate .trailer-content { transition: -webkit-transform 0.3s; transition: transform 0.3s; } #highlights-link { position: absolute; left: -70px; top: 66px; width: 160px; padding: 8px 0 0; font-family: "UniversCom59UltraCondensed"; font-size: 20px; text-align: center; text-transform: uppercase; color: #bd994d; border: 1px solid rgba(133, 101, 35, 0.3); background: rgba(0, 0, 0, 0.8); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } #highlights-link::before { content: ""; display: block; width: 10px; height: 10px; position: absolute; left: 10px; top: 10px; background: url("../img/pictos/close.svg") center center no-repeat; background-size: 10px 10px; transition: -webkit-transform 0.5s; transition: transform 0.5s; } .tag { display: inline-block; width: auto; margin: 10px 0; padding: 0 5px; text-transform: uppercase; font-family: "TrajanPro"; font-size: 13px; letter-spacing: 2px; position: relative; text-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.75); } .tag::before { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_white.png") center center no-repeat; background-size: 100% 1px; position: absolute; top: -5px; left: 0; opacity: 0.7; box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.75); } .tag::after { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_white.png") center center no-repeat; background-size: 100% 1px; position: absolute; bottom: 0px; left: 0; opacity: 0.7; box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.75); } /********************/ /* ELEMENTS */ /********************/ /** * Button */ .btn { position: relative; font-family: "UniversCom59UltraCondensed"; font-size: 34px; line-height: 48px; color: white; text-transform: uppercase; text-decoration: none; padding: 0 40px; display: inline-block; width: auto; overflow: hidden; margin-top: 23px; cursor: pointer; -webkit-transform: translateZ(0); transform: translateZ(0); } .btn.disable { cursor: default; } .btn .hidden { opacity: 0; margin-top: -14px; } .btn > span { position: relative; display: block; height: 19px; overflow: hidden; text-indent: initial; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s; transition-delay: 0.1s; } .btn > span > span { top: 0; left: 0; position: absolute; text-align: center; width: 100%; } .btn > span.bottom > span { top: auto; bottom: -10px; text-align: center; } .btn::after { content: ""; display: block; position: absolute; top: 53%; left: -150%; width: 100%; height: 1px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 900px 1px; z-index: 1; opacity: 0.7; -webkit-transform: translate3d(0%, 0%, 0%); transform: translate3d(0%, 0%, 0%); transition: left 0.3s; } .btn:not(.disable):hover, .btn.selected { color: #bd994d; } .btn:not(.disable):hover::after, .btn.selected::after { left: 0%; } .btn:not(.disable):hover .top, .btn.selected .top { -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 0, 0); } .btn:not(.disable):hover .bottom, .btn.selected .bottom { -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0); } .ie .btn { height: 34px; } .ie .btn .hidden { margin-top: -17px; } .ie .btn > span { height: 17px; } .ie .btn > span.bottom > span { bottom: -4px; } .ie .btn::after { top: 17px; } .btn-border:not(.btn-inside) { position: relative; box-sizing: border-box; display: inline-block; height: 35px; padding: 8px 10px 2px; margin-right: 11px; font-family: "UniversCom59UltraCondensed"; font-size: 20px; line-height: normal; text-transform: uppercase; color: #bd994d; text-align: center; vertical-align: middle; background: rgba(0, 0, 0, 0.7); } .btn-border a { position: relative; z-index: 3; } .btn-border .borders { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; } .btn-border .borders span { transition: width 125ms linear, height 125ms linear; position: absolute; display: block; background: #bd994d; } .btn-border .borders span:nth-child(1) { left: 0; top: 0; width: 100%; height: 1px; } .btn-border .borders span:nth-child(2) { right: 0; top: 0; width: 1px; height: 100%; } .btn-border .borders span:nth-child(3) { right: 0; bottom: 0; width: 100%; height: 1px; } .btn-border .borders span:nth-child(4) { left: 0; bottom: 0; width: 1px; height: 100%; } .btn-border:hover .borders span:nth-child(1), .btn-border:hover .borders span:nth-child(3), .btn-border.selected .borders span:nth-child(1), .btn-border.selected .borders span:nth-child(3) { height: 3px; } .btn-border:hover .borders span:nth-child(2), .btn-border:hover .borders span:nth-child(4), .btn-border.selected .borders span:nth-child(2), .btn-border.selected .borders span:nth-child(4) { width: 3px; } .close { display: block; background: url("../img/close-circle.png") center center no-repeat; width: 50px; height: 50px; transition: all 0.3s ease; -webkit-transform: rotate(45deg) translate3d(-70%, 0%, 0); transform: rotate(45deg) translate3d(-70%, 0%, 0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; overflow: hidden; z-index: 5; } .close:before, .close:after { content: ""; position: absolute; display: block; top: 50%; left: 50%; background-color: #f0d9c2; transition: -webkit-transform 0.3s; transition: transform 0.3s; } .close:before { width: 15px; height: 1px; top: 50%; left: 18px; } .close:after { height: 15px; width: 1px; top: 18px; right: 50%; } .close:hover:before { -webkit-animation: move-before 0.3s; animation: move-before 0.3s; } .close:hover:after { -webkit-animation: move-after 0.3s; animation: move-after 0.3s; } .scroll { display: block; width: 60px; height: 32px; position: absolute; bottom: 40px; left: 50%; background: url("../img/pictos/scroll.png") center center no-repeat; background-size: 100% 100%; -webkit-transform: translate3d(-50%, 0%, 0); transform: translate3d(-50%, 0%, 0); transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; z-index: 9; opacity: 1; } .scroll:hover { -webkit-transform: translate3d(-50%, 20%, 0); transform: translate3d(-50%, 20%, 0); } .scroll.hide { opacity: 0.2; cursor: default; } .scroll.left { left: 20px; top: 50%; bottom: auto; -webkit-transform: translate3d(0%, -50%, 0) rotate(90deg); transform: translate3d(0%, -50%, 0) rotate(90deg); } .scroll.left:hover { -webkit-transform: translate3d(-20%, -50%, 0) rotate(90deg); transform: translate3d(-20%, -50%, 0) rotate(90deg); } .scroll.right { right: 20px; top: 50%; bottom: auto; left: auto; -webkit-transform: translate3d(0%, -50%, 0) rotate(-90deg); transform: translate3d(0%, -50%, 0) rotate(-90deg); } .scroll.right:hover { -webkit-transform: translate3d(20%, -50%, 0) rotate(-90deg); transform: translate3d(20%, -50%, 0) rotate(-90deg); } .scroll.disable { opacity: 0.3; cursor: default; } .video-container.fullscreen { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background: rgba(0, 0, 0, 0.8); } .video-container.fullscreen #player-fullscreen { width: 100%; height: 100%; } .video-container .progress-bar { display: block; width: 100%; height: 15px; position: absolute; bottom: 0px; background-color: #2c2a27; cursor: pointer; -webkit-transform: translate3d(0, 7px, 0); transform: translate3d(0, 7px, 0); transition: -webkit-transform 0.3s; transition: transform 0.3s; } .video-container .progress-bar .avancement { height: 100%; width: 100%; background-color: #87591a; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .video-container .go-fullscreen { position: absolute; top: 13px; right: 13px; width: 15px; height: 15px; background: url("../img/pictos/fullscreen.svg") center center no-repeat; background-size: 100% 100%; display: none; } .video-container .close-video { position: absolute; top: 15px; right: 9px; width: 10px; height: 10px; background: url("../img/pictos/close.svg") center center no-repeat; background-size: 100% 100%; display: none; } .video-container .play { display: block; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; background: url("../img/btn_youtube_play.png") center center no-repeat; background-size: 100% 100%; cursor: pointer; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); transition: -webkit-transform 0.3s; transition: transform 0.3s; } .video-container .play.pause { background: url("../img/btn_pause.png") center center no-repeat; background-size: 100% 100%; } .video-container .play.hide { display: none; } .video-container:hover .go-fullscreen, .video-container:hover .close-video { display: block; cursor: pointer; } .video-container:hover .progress-bar { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } .video-container:hover .play { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.05); transform: translate3d(-50%, -50%, 0) scale(1.05); } .fullscreen .play { width: 120px; height: 120px; } .fullscreen .go-fullscreen { background: url("../img/pictos/smallscreen.svg") center center no-repeat; width: 30px; height: 30px; top: 7px; right: 12px; } .fullscreen .close-video { display: none !important; } .preview .play { width: 80px; height: 80px; } #popin-media { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; overflow: hidden; display: none; } #popin-media .close { position: absolute; top: 0; left: 50%; margin-top: -40px; opacity: 0; } #popin-media .close.show { opacity: 1; margin-top: 0px; } #popin-media::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 0; transition: background 0.5s; } #popin-media.show { display: block; } #popin-media.small { background: transparent; } #popin-media.small .image img { width: 100%; } #popin-media.small .video-container { width: 100%; } #popin-media.fullscreen::before { background: rgba(0, 0, 0, 0.8); } #popin-media.fullscreen .legend { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity: 1; } #popin-media .image { position: relative; width: 90%; height: 100%; text-align: center; transition: all 0.5s; margin: auto; } #popin-media .image img { width: 100%; position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); transition: all 0.5s; } #popin-media.portrait img { height: 70%; width: auto; } #popin-media.portrait .video-container { width: 90%; height: 70%; padding-bottom: 0; } #popin-media.portrait .video-container img { height: auto; min-width: 100%; } #popin-media .video-container { position: absolute; width: 90%; height: 0; padding-bottom: 56.25%; text-align: center; overflow: hidden; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); transition: all 0.5s; } #popin-media .video-container .image { width: 100%; position: absolute; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: opacity 0.5s; background: black; } #popin-media .video-container .image img { width: 100%; } #popin-media .video-container .image.hide { opacity: 0; } #popin-media .video-container iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #popin-media .legend { display: block; width: 90%; position: absolute; padding-left: 5px; font-family: "HelveticaLTCondensed"; font-size: 14px; text-align: center; left: 50%; z-index: 1; opacity: 0; -webkit-transform: translate3d(-50%, -200%, 0); transform: translate3d(-50%, -200%, 0); transition: all 0.4s; } .sharing-creation { position: absolute; top: 20px; right: 20px; z-index: 2; opacity: 0; transition: opacity 0.5s; } .sharing-creation a { display: block; width: 40px; height: 45px; border: 1px solid #bd994d; transition: border 0.2s; } .sharing-creation .facebook { background: url("../img/facebook.svg") center center no-repeat rgba(0, 0, 0, 0.6); background-size: 11px 21px; } .sharing-creation .twitter { margin-top: -1px; background: url("../img/twitter.svg") center center no-repeat rgba(0, 0, 0, 0.6); background-size: 22px 18px; } .sharing-creation a:hover { border: 3px solid #bd994d; } .vote { display: block; position: absolute; left: 50%; opacity: 0; z-index: 0; -webkit-transform: translate3d(-50%, -100px, 0); transform: translate3d(-50%, -100px, 0); transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .vote.show { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .vote p { display: inline-block; text-transform: uppercase; color: #bd994d; width: auto; font-family: "UniversCom59UltraCondensed"; } .vote ul { display: inline-block; text-align: left; margin: 0; } .vote li { display: inline-block; margin: 5px 5px; width: 30px; height: 30px; text-align: center; font-family: "HelveticaLTCondensed"; font-size: 14px; line-height: 35px; color: #bd994d; cursor: pointer; background-color: transparent; background-image: url("../img/cta.png"); background-size: 100% 100%; transition: background-color 0.3s, color 0.3s; border-radius: 50%; vertical-align: middle; } .vote li:hover, .vote li.voted { color: black; background-color: #bd994d; } .vote p.result { display: block; color: white; opacity: 0; transition: opacity 0.4s; } .vote p.result.error { color: #ff4200; } .vote p.result.show { opacity: 1; } #popin-media.creation.display-legend .legend, #popin-media.sacrifice.display-legend .legend { display: block; } #popin-media.creation .legend, #popin-media.sacrifice .legend { display: none; width: auto; min-width: 25%; max-width: 65%; bottom: 20px; left: 20px; margin: 0; text-align: left; z-index: 2; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); background: rgba(0, 0, 0, 0.6); border: 1px solid #bd994d; padding: 15px; opacity: 0; } #popin-media.creation .legend span, #popin-media.sacrifice .legend span { text-transform: uppercase; font-size: 25px; line-height: 25px; display: block; } #popin-media.creation .legend .winner, #popin-media.sacrifice .legend .winner { font-size: 14px; line-height: 14px; display: inline-block; position: relative; bottom: auto; width: auto; -webkit-transform: none; transform: none; left: auto; margin: 5px 0 10px; } #popin-media.creation .legend p, #popin-media.sacrifice .legend p { font-size: 14px; } #popin-media.creation .vote ul, #popin-media.sacrifice .vote ul { width: auto; } #popin-media.creation.hover .legend, #popin-media.sacrifice.hover .legend { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } #popin-media.creation.hover .legend, #popin-media.creation.hover .sharing-creation, #popin-media.sacrifice.hover .legend, #popin-media.sacrifice.hover .sharing-creation { opacity: 1; } #popin-media.creation .image figure, #popin-media.sacrifice .image figure { background: #000; position: absolute; width: 90%; height: 75%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #popin-media.creation .image figure img, #popin-media.sacrifice .image figure img { position: absolute; max-width: 100%; max-height: 100%; height: auto; width: auto; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #popin-media.creation.portrait .image figure img, #popin-media.sacrifice.portrait .image figure img { height: auto; width: auto; } #popin-media.sacrifice .video-container { background: #000; } #popin-media.sacrifice .video-container .image { height: 83%; width: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #popin-media.sacrifice .video-container .image img { height: 100%; width: auto; display: none; } #popin-media.sacrifice .nickname { top: -70px; z-index: 1; font-size: 24px; min-width: 150px; } #popin-media.sacrifice video { position: relative; width: 102%; height: 80%; top: auto; left: auto; -webkit-transform: none; transform: none; margin-left: -1%; } #popin-media.sacrifice video.hide { opacity: 0; } #popin-media.sacrifice #player-popin { position: absolute; top: 50%; left: 50%; width: auto; overflow: hidden; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 2; } #popin-media.sacrifice .loader { left: 50%; } .ps-scrollbar-y-rail { width: 4px; position: absolute; right: 0 !important; background: #2e2e2e; } .ps-scrollbar-y-rail .ps-scrollbar-y { width: 4px; position: absolute; background: #bd994d; } .custom-wrapper { display: inline-block; width: 260px; position: relative; font-family: "HelveticaLTCondensed"; font-size: 12px; z-index: 3; margin: 10px 5px; background: rgba(0, 0, 0, 0.9); } .custom-wrapper .selected { display: block; border: 1px solid #bd994d; padding: 0px 0px 0px 10px; height: 35px; line-height: 35px; vertical-align: middle; text-transform: uppercase; } .custom-wrapper .selected::after { display: block; content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #bd994d transparent transparent transparent; position: absolute; top: 15px; right: 15px; z-index: 2; } .custom-wrapper > div { width: 100%; height: 0; overflow: hidden; position: absolute; top: 37px; left: 0; text-transform: uppercase; transition: height 0.3s; } .custom-wrapper > div span::first-child { border-top: 1px solid #bd994d; } .custom-wrapper > div span { display: block; padding: 5px 5px 5px 10px; border: 1px solid #bd994d; border-top: none; cursor: pointer; background: rgba(0, 0, 0, 0.9); transition: background 0.3s; } .custom-wrapper > div span:hover { background: black; } .loader { position: absolute; top: 50%; left: -mox-calc(50% + 148px); left: -o-calc(50% + 148px); left: calc(50% + 148px); display: block; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; -webkit-transform: translate3d(-50%, -50%, 0px); transform: translate3d(-50%, -50%, 0px); opacity: 0; transition: opacity 0.3s; } @media screen and (max-width: 1280px) { .loader { left: -mox-calc(50% + 100px); left: -o-calc(50% + 100px); left: calc(50% + 100px); } } .loader.show { opacity: 1; } #loading-form { left: 50%; } .loader .circle { display: block; width: 100%; height: 100%; background: url("../img/bg/loader.png") center center no-repeat; background-size: cover; -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } .loader.show .cirlce { -webkit-animation: rotateCircle 1s infinite linear; animation: rotateCircle 1s infinite linear; } .loader .line { position: absolute; top: 27px; display: block; width: 1px; height: 15px; background: #bd994d; } .loader .line:after { content: ""; display: block; width: 3px; height: 1px; display: block; position: absolute; bottom: 0; background: #bd994d; left: -1px; } .loader .line:before { content: ""; display: block; width: 3px; height: 1px; display: block; position: absolute; top: 0; background: #bd994d; left: -1px; } .loader .line1 { left: 27px; -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } .loader.show .line1 { -webkit-animation: moveLinesTop 2s linear infinite; animation: moveLinesTop 2s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } .loader .line2 { left: 35px; -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } .loader.show .line2 { -webkit-animation: moveLinesBottom 2s linear infinite; animation: moveLinesBottom 2s linear infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .loader .line3 { left: 43px; -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } .loader.show .line3 { -webkit-animation: moveLinesTop 2s linear infinite; animation: moveLinesTop 2s linear infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes rotateCircle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateCircle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes moveLinesBottom { 0% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } 25% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 50% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 75% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 99.99% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } 100% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } } @keyframes moveLinesBottom { 0% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } 25% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 50% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 75% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 99.99% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } 100% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } } @-webkit-keyframes moveLinesTop { 0% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } 25% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 50% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 75% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 99.99% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } 100% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } } @keyframes moveLinesTop { 0% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } 25% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 50% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 75% { -webkit-transform: translate3d(0%, 0px, 0px); transform: translate3d(0%, 0px, 0px); } 99.99% { -webkit-transform: translate3d(0%, 80px, 0px); transform: translate3d(0%, 80px, 0px); } 100% { -webkit-transform: translate3d(0%, -80px, 0px); transform: translate3d(0%, -80px, 0px); } } #hover { position: absolute; top: 51.5%; left: 49%; z-index: 1; margin-left: 10px; -webkit-transform: translate3d(-50%, -50%, 0) scale(2.8); transform: translate3d(-50%, -50%, 0) scale(2.8); } @media screen and (max-width: 1480px) { #hover { -webkit-transform: translate3d(-50%, -50%, 0) scale(2.24); transform: translate3d(-50%, -50%, 0) scale(2.24); } } #push { position: absolute; top: 48%; left: 49%; z-index: 3; width: 610px; height: 608px; padding-left: 10px; margin-left: -305px; margin-top: -304px; background: url("../img/bg/circle.png") left center no-repeat; background-size: auto 100%; text-align: center; } #push h2 { display: block; width: 80%; color: white; margin: 230px auto 0; font-family: "UniversCom59UltraCondensed"; font-size: 87px; line-height: 80px; text-transform: uppercase; position: relative; z-index: 4; } #push p { font-family: "TrajanPro"; font-size: 13px; text-transform: uppercase; margin: 10px 0; color: white; position: relative; z-index: 4; margin-top: -180px; } #push a { color: #bd994d; position: relative; z-index: 4; margin-top: 0; } #push .push-link { width: 100%; height: 100%; display: inline-block; } @media screen and (max-width: 1480px) { #push { -webkit-transform: scale(0.8); transform: scale(0.8); } } #sprite-push { position: absolute; z-index: 3; top: 20px; left: -72px; width: 800px; height: 640px; opacity: 0; } #home-trailer #push p { margin-top: -220px; } #push-awards { width: 100%; z-index: 3; text-align: center; -webkit-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); transition: -webkit-transform 0.5s; transition: transform 0.5s; } #push-awards .block { display: block; width: 100%; height: 100%; } #push-awards a { display: inline-block; width: 100%; height: 100%; } #push-awards a.nolink { cursor: default; } #push-awards img { width: 80%; height: auto; } #push-awards:hover { -webkit-transform: scale(1.1) translate3d(0, 0, 0); transform: scale(1.1) translate3d(0, 0, 0); } /**********************/ /* ANIMATIONS */ /**********************/ @-webkit-keyframes animateUnderline { 0% { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } 50% { -webkit-transform: translate3d(120%, 0, 0); transform: translate3d(120%, 0, 0); } 50.01% { -webkit-transform: translate3d(-120%, 0, 0); transform: translate3d(-120%, 0, 0); } 100% { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } @keyframes animateUnderline { 0% { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } 50% { -webkit-transform: translate3d(120%, 0, 0); transform: translate3d(120%, 0, 0); } 50.01% { -webkit-transform: translate3d(-120%, 0, 0); transform: translate3d(-120%, 0, 0); } 100% { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } #chapters.hover .chapter { -webkit-transform: scale(0.7); transform: scale(0.7); } #chapters.hover1 #chapter1 { -webkit-transform: scale(1.4); transform: scale(1.4); } #chapters.hover1 #chapter3 { -webkit-transform: scale(0.7) translate3d(-30px, -200px, 0); transform: scale(0.7) translate3d(-30px, -200px, 0); } #chapters.hover1 #chapter4 { -webkit-transform: scale(0.7) translate3d(-15px, -400px, 0); transform: scale(0.7) translate3d(-15px, -400px, 0); } #chapters.hover1 #chapter5 { -webkit-transform: scale(0.7) translate3d(-285px, -187px, 0); transform: scale(0.7) translate3d(-285px, -187px, 0); } #chapters.hover1 .all { -webkit-transform: translate3d(-83px, -194px, 0); transform: translate3d(-83px, -194px, 0); } #chapters.hover2 #chapter1 { -webkit-transform: scale(0.7) translate3d(0px, 70px, 0); transform: scale(0.7) translate3d(0px, 70px, 0); } #chapters.hover2 #chapter2 { -webkit-transform: scale(1.4); transform: scale(1.4); } #chapters.hover2 #chapter3 { -webkit-transform: scale(0.7) translate3d(-190px, 94px, 0px); transform: scale(0.7) translate3d(-190px, 94px, 0px); } #chapters.hover2 #chapter4 { -webkit-transform: scale(0.7) translate3d(0px, -110px, 0); transform: scale(0.7) translate3d(0px, -110px, 0); } #chapters.hover2 #chapter5 { -webkit-transform: scale(0.7) translate3d(-240px, -260px, 0); transform: scale(0.7) translate3d(-240px, -260px, 0); } #chapters.hover2 .all { -webkit-transform: translate3d(-150px, -246px, 0); transform: translate3d(-150px, -246px, 0); } #chapters.hover3 #chapter1 { -webkit-transform: scale(0.7) translate3d(-90px, 0, 0); transform: scale(0.7) translate3d(-90px, 0, 0); } #chapters.hover3 #chapter2 { -webkit-transform: scale(0.7) translate3d(350px, 20px, 0); transform: scale(0.7) translate3d(350px, 20px, 0); } #chapters.hover3 #chapter3 { -webkit-transform: scale(1.4); transform: scale(1.4); } #chapters.hover3 #chapter4 { -webkit-transform: scale(0.7) translate3d(-180px, -25px, 0); transform: scale(0.7) translate3d(-180px, -25px, 0); } #chapters.hover3 #chapter5 { -webkit-transform: scale(0.7) translate3d(25px, 0, 0); transform: scale(0.7) translate3d(25px, 0, 0); } #chapters.hover3 .all { -webkit-transform: translate3d(-199px, 65px, 0); transform: translate3d(-199px, 65px, 0); } #chapters.hover4 #chapter1 { -webkit-transform: scale(0.7) translate3d(-65px, 0px, 0); transform: scale(0.7) translate3d(-65px, 0px, 0); } #chapters.hover4 #chapter2 { -webkit-transform: scale(0.7) translate3d(0px, 100px, 0); transform: scale(0.7) translate3d(0px, 100px, 0); } #chapters.hover4 #chapter3 { -webkit-transform: scale(0.7) translate3d(-256px, -85px, 0); transform: scale(0.7) translate3d(-256px, -85px, 0); } #chapters.hover4 #chapter4 { -webkit-transform: scale(1.4); transform: scale(1.4); } #chapters.hover4 #chapter5 { -webkit-transform: scale(0.7) translate3d(-503px, -70px, 0); transform: scale(0.7) translate3d(-503px, -70px, 0); } #chapters.hover4 .all { -webkit-transform: translate3d(90px, -109px, 0); transform: translate3d(90px, -109px, 0); } #chapters.hover5 #chapter1 { -webkit-transform: scale(0.7) translate3d(130px, -24px, 0); transform: scale(0.7) translate3d(130px, -24px, 0); } #chapters.hover5 #chapter2 { -webkit-transform: scale(0.7) translate3d(0px, 190px, 0); transform: scale(0.7) translate3d(0px, 190px, 0); } #chapters.hover5 #chapter3 { -webkit-transform: scale(0.7) translate3d(-60px, 0px, 0); transform: scale(0.7) translate3d(-60px, 0px, 0); } #chapters.hover5 #chapter4 { -webkit-transform: scale(0.7) translate3d(25px, -188px, 0); transform: scale(0.7) translate3d(25px, -188px, 0); } #chapters.hover5 #chapter5 { -webkit-transform: scale(1.4); transform: scale(1.4); } #chapters.hover5 .all { -webkit-transform: translate3d(-54px, 85px, 0); transform: translate3d(-54px, 85px, 0); } /********************/ /* PAGE */ /********************/ #home-push .character { display: block; height: 100%; position: absolute; left: 50%; bottom: 0; z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media screen and (orientation: portrait) { #home-push .character { left: -220px !important; } } #home-trailer #push h1 { margin-top: 200px; } #home-push.contest #push { background: none; } #home-push.contest #push a { height: auto; } #home-push.contest #push h2 { margin-top: 170px; margin-bottom: 30px; padding-top: 20px; } #home-push.contest #push p { margin-top: 0; margin-bottom: 50px; } .play-wrapper { display: block; margin: 13px auto 0; position: relative; z-index: 4; } .play-wrapper .play { position: relative; display: block; background: url("../img/play.png") top center no-repeat; background-size: 100% 100%; width: 119px; height: 91px; margin: 0 auto; overflow: hidden; } .play-wrapper:hover .play { -webkit-transform: scale(1.2); transform: scale(1.2); } #inventory { background-image: url("../img/bg/bg_inventory.jpg"); } #inventory #parallax { width: 100%; height: 100%; } #inventory .coming-soon { display: inline-block; width: auto; padding: 5px 5px 0; z-index: 3; position: absolute; top: 0; left: 0; display: none; text-transform: uppercase; font-family: "UniversCom59UltraCondensed"; font-size: 20px; color: white; background: #bd994d; } #inventory .chapter { background-size: cover; position: absolute; cursor: none; z-index: 1; } #inventory .chapter.active::before { display: none; } #inventory .chapter.active a { cursor: pointer; } #inventory .chapter a { display: block; width: 100%; height: 100%; position: relative; z-index: 3; cursor: default; } #inventory .chapter .center { position: absolute; top: 50%; left: 50%; margin-top: 10%; text-align: center; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #inventory .chapter::before { content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.5); z-index: 4; } #inventory .chapter h2 { display: inline-block; padding: 8px 5px 0px; background: black; font-family: "UniversCom59UltraCondensed"; font-size: 30px; text-transform: uppercase; color: white; -webkit-transform: translate(0%, -70px); transform: translate(0%, -70px); white-space: nowrap; } #inventory .chapter span { font-family: "TrajanPro"; font-size: 132px; color: #bd994d; } #inventory .chapter .borders { position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%; -webkit-transform: transform3d(0, 0, 1px); transform: transform3d(0, 0, 1px); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #inventory .chapter .borders span { position: absolute; display: block; background: #bd994d; -webkit-transform: transform3d(0, 0, 1px); transform: transform3d(0, 0, 1px); } #inventory .chapter .borders span:nth-child(1) { left: 20px; top: 20px; width: -mox-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); height: 1px; } #inventory .chapter .borders span:nth-child(2) { right: 20px; top: 20px; width: 1px; height: -mox-calc(100% - 40px); height: -o-calc(100% - 40px); height: calc(100% - 40px); } #inventory .chapter .borders span:nth-child(3) { right: 20px; bottom: 20px; width: -mox-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); height: 1px; } #inventory .chapter .borders span:nth-child(4) { left: 20px; bottom: 20px; width: 1px; height: -mox-calc(100% - 40px); height: -o-calc(100% - 40px); height: calc(100% - 40px); } #inventory .all { display: inline-block; width: auto; padding: 20px 30px; position: absolute; top: 665px; left: 860px; } #inventory .all a { color: #bd994d; margin-top: 5px; font-size: 30px; } #inventory .all .borders { left: 0px; -webkit-transform: transform3d(0, 0, 1px); transform: transform3d(0, 0, 1px); } #chapters { position: absolute; top: 50%; left: 50%; z-index: 3; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 1240px; height: 944px; } #inventory #chapter1.chapter { width: 330px; height: 450px; top: 301px; left: 0; } #inventory #chapter1.chapter .borders { left: -1px; top: -1px; } #chapter2 { width: 466px; height: 284px; top: 0; left: 179px; } #chapter3 { width: 550px; height: 338px; top: 301px; left: 353px; } #chapter4 { width: 482px; height: 275px; left: 352px; top: 665px; } #chapter5 { width: 307px; height: 406px; top: 235px; left: 928px; } .chapter-title, .creations-title, .sacrifices-title { height: 50px; text-align: center; margin: 100px 0 30px; position: relative; z-index: 5; } .chapter-title h1, .creations-title h1, .sacrifices-title h1 { display: inline-block; font-family: "UniversCom59UltraCondensed"; font-size: 30px; text-transform: uppercase; color: white; position: absolute; top: -5px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .chapter-title h1 span, .creations-title h1 span, .sacrifices-title h1 span { position: relative; z-index: 1; padding: 6px 5px 0px; background: black; } .chapter-title h1::before, .creations-title h1::before, .sacrifices-title h1::before { content: ""; display: block; width: 150%; position: absolute; top: 35%; left: 50%; height: 1px; background: url("../img/line_gold-big.png") center center no-repeat; background-size: 100% 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } .chapter-title > span, .creations-title > span, .sacrifices-title > span { font-family: "TrajanPro"; font-size: 132px; color: #bd994d; } @media screen and (max-width: 1024px) { .chapter-title h1, .creations-title h1, .sacrifices-title h1 { font-size: 25px; top: 2px; } .chapter-title > span, .creations-title > span, .sacrifices-title > span { font-size: 82px; } } #chapter, #creations, #sacrifices-wall { background-image: url("../img/bg/bg_inventory.jpg"); } #chapter .subtitle, #creations .subtitle, #sacrifices-wall .subtitle { line-height: 17px; margin-top: 65px; } #chapter .filters, #creations .filters, #sacrifices-wall .filters { position: relative; margin: 0 12.5% 10px; z-index: 1; } #chapter .filters a, #creations .filters a, #sacrifices-wall .filters a { color: white; font-family: "HelveticaLTCondensed"; font-size: 14px; line-height: 20px; } #chapter ul, #creations ul, #sacrifices-wall ul { width: 80%; margin: auto; text-align: center; } #chapter .list.lazyload li img, #creations .list.lazyload li img, #sacrifices-wall .list.lazyload li img { display: none; } #chapter .list.lazyload li.loaded img, #creations .list.lazyload li.loaded img, #sacrifices-wall .list.lazyload li.loaded img { display: block; } #chapter .list li, #creations .list li, #sacrifices-wall .list li { display: inline-block; position: relative; width: 46%; height: 0; background: black; padding-bottom: 25.7%; margin: 0.5%; overflow: hidden; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5); transition: box-shadow 0.4s; } #chapter .list li:not(.disabled), #creations .list li:not(.disabled), #sacrifices-wall .list li:not(.disabled) { cursor: pointer; } #chapter .list li.video::before, #creations .list li.video::before, #sacrifices-wall .list li.video::before { content: ""; display: block; width: 120px; height: 92px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background: url("../img/play.png") center center no-repeat; background-size: 100% 100%; z-index: 1; } #chapter .list li::after, #creations .list li::after, #sacrifices-wall .list li::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 2; transition: opacity 0.4s; } #chapter .list li:not(.disabled):hover, #creations .list li:not(.disabled):hover, #sacrifices-wall .list li:not(.disabled):hover { box-shadow: 0px 5px 10px 7px rgba(0, 0, 0, 0.5); z-index: 4; } #chapter .list li:not(.disabled):hover::after, #creations .list li:not(.disabled):hover::after, #sacrifices-wall .list li:not(.disabled):hover::after { opacity: 0; } #chapter li img, #creations li img, #sacrifices-wall li img { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #chapter li.portrait img, #creations li.portrait img, #sacrifices-wall li.portrait img { width: auto; height: 100%; } #chapter.all-media .main-title, #creations.all-media .main-title, #sacrifices-wall.all-media .main-title { width: 100%; margin: 60px 0 80px; } #creations .creations-title, #creations .sacrifices-title, #sacrifices-wall .creations-title, #sacrifices-wall .sacrifices-title { height: 50px; text-align: center; margin: 50px 0 60px; position: relative; z-index: 5; line-height: 62px; } #creations .creations-title h1, #creations .sacrifices-title h1, #sacrifices-wall .creations-title h1, #sacrifices-wall .sacrifices-title h1 { display: inline-block; width: auto; font-family: "TrajanProLight"; font-size: 54px; text-transform: uppercase; color: #bd994d; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: 2; } #creations .creations-title h1::before, #creations .sacrifices-title h1::before, #sacrifices-wall .creations-title h1::before, #sacrifices-wall .sacrifices-title h1::before { content: ""; display: block; width: 150%; height: 1px; position: absolute; top: 40%; left: 50%; background: url("../img/line_gold-big.png") center center no-repeat; background-size: 100% 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } #creations .creations-title h1 span, #creations .sacrifices-title h1 span, #sacrifices-wall .creations-title h1 span, #sacrifices-wall .sacrifices-title h1 span { background: none; white-space: nowrap; } @media screen and (max-width: 1490px) { #creations .creations-title h1, #creations .sacrifices-title h1, #sacrifices-wall .creations-title h1, #sacrifices-wall .sacrifices-title h1 { font-size: 40px; } } @media screen and (max-width: 1100px) { #creations .creations-title h1, #creations .sacrifices-title h1, #sacrifices-wall .creations-title h1, #sacrifices-wall .sacrifices-title h1 { font-size: 33px; } #creations .creations-title > span, #creations .sacrifices-title > span, #sacrifices-wall .creations-title > span, #sacrifices-wall .sacrifices-title > span { font-size: 82px; } } #creations .winner, #sacrifices-wall .winner { position: absolute; bottom: 10px; color: #bd994d; z-index: 3; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; width: auto; padding: 5px 5px 0; z-index: 3; text-transform: uppercase; font-family: "UniversCom59UltraCondensed"; font-size: 20px; color: white; background: #bd994d; } #creations .list li.soon, #sacrifices-wall .list li.soon { background: none; font-size: 20px; font-family: "TrajanProLight"; text-transform: uppercase; margin-top: 40px; cursor: default; width: auto; box-shadow: none; line-height: 35px; } #creations .list li.soon:hover, #sacrifices-wall .list li.soon:hover { box-shadow: none; } #creations .list li.soon:after, #sacrifices-wall .list li.soon:after { display: none; } .back { position: absolute; top: 40px; left: 40px; display: block; padding: 26px 32px 26px 32px; z-index: 6; } .back .text { display: inline-block; width: auto; padding: 13px 20px 7px; border: 1px solid #bd994d; text-transform: uppercase; font-family: "UniversCom59UltraCondensed"; font-size: 24px; color: #bd994d; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .back .square { display: block; position: absolute; border: 1px solid #bd994d; transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .back .top { top: 0; left: 40%; width: 26px; height: 18px; } .back .right { top: 30%; right: 0px; width: 25px; height: 35px; } .back .left { bottom: 0; left: 0px; width: 25px; height: 36px; } .back .bottom { bottom: 0; left: 35%; width: 34px; height: 19px; } .back:hover .text { color: white; -webkit-transform: scale(0.9) translate3d(0%, 0, 0); transform: scale(0.9) translate3d(0%, 0, 0); } .back:hover .top { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .back:hover .right { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } .back:hover .left { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .back:hover .bottom { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } #community { background-image: url("../img/bg/bg_community.jpg"); overflow: hidden; } #community .container { width: 100%; height: 100%; position: relative; margin: auto; -webkit-transform: translate3d(0, -1px, 0); transform: translate3d(0, -1px, 0); } #community .list { width: 80%; max-width: 1024px; height: auto; margin: auto; } #community .feed { display: block; width: 90%; position: relative; margin: 75px auto; } #community .feed .content { position: absolute; width: 400px; z-index: 3; top: 35%; } #community .feed.no-image { height: auto; } #community .feed.no-image .content { position: relative; width: 100%; } #community .feed figure { display: inline-block; width: auto; height: auto; max-width: 80%; position: relative; } #community .feed figure img { width: 100%; } #community .feed figure::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 6px; right: 0; box-shadow: inset 0px 0px 130px 50px rgba(0, 0, 0, 0.8); z-index: 2; } #community .feed p { font-size: 38px; line-height: 38px; font-family: "UniversCom59UltraCondensed"; color: white; text-transform: uppercase; text-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); } #community .feed:nth-child(even) .content { right: 0px; } #community .feed:nth-child(even).no-image .content { text-align: right; right: 0; } #community .feed:nth-child(odd) { text-align: right; } #community .feed:nth-child(odd) .content { text-align: left; left: 0px; } #community .feed:nth-child(odd).no-image .content { left: 0; } #community .date { display: inline-block; font-family: "TrajanPro"; font-size: 21px; color: #bd994d; position: relative; padding: 5px; margin-bottom: 20px; text-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); } #community .date::before { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 100% 1px; position: absolute; top: -5px; left: 0; opacity: 0.7; box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.75); } #community .date::after { content: ""; display: block; width: 100%; height: 1px; background: url("../img/line_gold.svg") center center no-repeat; background-size: 100% 1px; position: absolute; bottom: 0px; left: 0; opacity: 0.7; box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.75); } #community .fb { display: inline-block; width: auto; padding: 7px 7px 0; text-transform: uppercase; font-family: "UniversCom59UltraCondensed"; font-size: 24px; color: white; background: #bd994d; } .isMobile #community .container { overflow: scroll; -webkit-overflow-scrolling: touch; } .isMobile #community .feed .content { -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .isMobile #community .feed:nth-child(even) .content { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .isMobile #community .feed.blur { -webkit-filter: none; filter: none; } .isMobile #community .scroll { display: none; } #highlights { background-image: url("../img/bg/bg_popin.jpg"); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } #highlights .container { width: 100%; position: absolute; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); text-align: center; } #highlights .main-title { margin: 0px 0 0px; height: auto; } @media screen and (max-height: 820px) { #highlights .main-title { margin-top: 50px; margin-bottom: -50px; } } #highlights .list { width: 90%; height: 550px; white-space: nowrap; text-align: center; margin: auto; } @media screen and (max-height: 820px) { #highlights .list { -webkit-transform: scale(0.9); transform: scale(0.9); } } #highlights article { vertical-align: middle; display: inline-block; position: relative; width: 410px; height: 100%; padding: 20px; overflow: hidden; white-space: normal; text-align: left; } #highlights article figure, #highlights article .background { display: block; height: 430px; width: -mox-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); position: relative; background: black; } #highlights article .background { width: 100%; } #highlights article figure { position: absolute; top: 20px; left: 20px; background-position: center center; background-size: cover; } #highlights article.bg1 figure { background-image: url("../img/bg/bg_highlights01.jpg"); } #highlights article.bg2 figure { background-image: url("../img/bg/bg_highlights02.jpg"); } #highlights article.bg3 figure { background-image: url("../img/bg/bg_highlights03.jpg"); } #highlights article figure img { position: absolute; top: 40%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); max-height: 250px; } #highlights article h3 { font-family: "UniversCom59UltraCondensed"; font-size: 24px; line-height: 27px; margin: 10px 0; text-transform: uppercase; max-height: 78px; overflow: hidden; } @media screen and (max-height: 820px) { #highlights article h3 { font-size: 20px; line-height: 23px; } } #highlights article .readmore, #highlights article .readless { position: absolute; bottom: 20px; left: 15px; font-size: 23px; line-height: 48px; padding: 0 25px; color: #bd994d; } #highlights article .readmore.hide, #highlights article .readless.hide { opacity: 0; visibility: hidden; } #highlights article .readmore::after, #highlights article .readless::after { top: 56%; } #highlights article .content { position: absolute; top: 350px; left: 50%; width: -mox-calc(100% - 40px); width: -o-calc(100% - 40px); width: calc(100% - 40px); height: 475px; overflow: hidden; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } #highlights article .article-title { padding: 20px; min-height: 180px; } #highlights article .text { padding: 0 20px 20px; font-family: "HelveticaLTCondensed"; } #highlights article .text a { color: #bd994d; } #highlights article .text p { margin: 10px 0; } #highlights article .text img, #highlights article .text iframe { display: block; width: 80%; margin: 10px auto; height: auto; } #highlights article .text ul, #highlights article .text ol { margin: 10px 0; } #highlights article .text li { margin-left: 5px; } #highlights article .text li::before { display: inline-block; content: "\2014"; margin-right: 5px; } #highlights .top-small-blur, #highlights .bottom-small-blur { opacity: 0; } #highlights .top-small-blur { height: 20px; width: 100%; position: absolute; top: -1px; left: 0px; right: 0px; z-index: 2; background: black; } #highlights .bottom-small-blur { height: 20px; width: 100%; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 2; background: black; } #highlights .close { position: absolute; top: 39px; right: 39px; z-index: 10; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } #preorder { background-image: url("../img/bg/bg_community.jpg"); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } #preorder .container { width: 100%; margin: auto; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); height: auto; } #preorder .main-title { width: 100%; margin: 40px 0 10px; } #preorder h2, #preorder h3 { font-family: "TrajanPro"; font-size: 14px; text-transform: uppercase; } #preorder h2.soon, #preorder h3.soon { position: absolute; top: 20px; left: 0; width: 100%; text-align: center; } #preorder .platform { width: 80%; margin: auto; text-align: center; } @media screen and (max-height: 820px) { #preorder .platform { margin-top: -10px; } } #preorder .platform li { display: inline-block; cursor: pointer; margin: 10px; } #preorder .platform p { display: inline-block; font-family: "HelveticaLTCondensed"; line-height: 16px; vertical-align: middle; margin-left: 5px; } #preorder .platform .check { display: inline-block; width: 30px; height: 30px; border: 2px solid #4c3b21; vertical-align: middle; position: relative; border-radius: 50%; transition: border-color 0.3s; } #preorder .platform .check::after { content: ""; display: block; width: 4px; height: 4px; position: absolute; top: 50%; left: 50%; background: #bd994d; border-radius: 50%; -webkit-transform: scale(0) translate3d(-50%, -50%, 0); transform: scale(0) translate3d(-50%, -50%, 0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: -webkit-transform 0.3s; transition: transform 0.3s; } #preorder .platform li:hover .check, #preorder .platform .selected .check { border-color: #bd994d; } #preorder .platform .selected .check::after { -webkit-transform: scale(1) translate3d(-50%, -50%, 0); transform: scale(1) translate3d(-50%, -50%, 0); } #preorder .editions { width: 80%; margin: auto; position: relative; } #preorder .editions figure { display: inline-block; width: 45%; margin: 5% 1%; vertical-align: top; text-align: center; } #preorder .editions figure img { max-width: 100%; max-height: 360px; } #preorder .editions .editions-content { display: inline-block; width: 50%; margin: 1%; min-height: 550px; vertical-align: middle; display: none; opacity: 0; visibility: hidden; } #preorder .editions .editions-content.selected { display: inline-block; opacity: 1; visibility: visible; } @media screen and (max-height: 820px) { #preorder .editions .editions-content { margin: 0 1%; } } #preorder .edition-choice { margin: 10px 0; } #preorder .edition-choice li { display: inline-block; margin: 5px; width: auto; } #preorder .edition-choice li a { margin-right: 0; color: white; font-size: 12px; line-height: 20px; font-family: "HelveticaLTCondensed"; } #preorder .edition-choice li.selected a { color: #bd994d; } #preorder .edition-choice li.selected a .borders span:nth-child(1), #preorder .edition-choice li.selected a .borders span:nth-child(3) { height: 3px; } #preorder .edition-choice li.selected a .borders span:nth-child(2), #preorder .edition-choice li.selected a .borders span:nth-child(4) { width: 3px; } #preorder .edition, #preorder .retailers { display: none; opacity: 0; visibility: hidden; } #preorder .edition > div, #preorder .retailers > div { margin: 20px 0; } #preorder .edition.selected, #preorder .retailers.selected { display: block; opacity: 1; visibility: visible; } @media screen and (max-height: 820px) { #preorder .desc h3 { display: none; } #preorder .edition > div, #preorder .retailers > div { margin: 15px 0; } } #preorder .text { margin-top: 10px; padding: 0px 20px 0px 5px; height: 105px; overflow: hidden; position: relative; font-family: "HelveticaLTCondensed"; } @media screen and (max-height: 820px) { #preorder .text { margin-top: 0; } } #preorder .text p { margin: 10px 0; } #preorder .text strong { font-weight: bold; } @media screen and (max-height: 820px) { #preorder .custom-wrapper { margin-top: 0; } } #preorder .retailers { width: 100%; } #preorder .retailers li { display: inline-block; height: 60px; width: 30%; margin: 5px; vertical-align: top; } #preorder .retailers li a { display: inline-block; width: 100%; height: 100%; background: white; position: relative; } #preorder .retailers li img { display: inline-block; max-width: 80%; max-height: 45px; vertical-align: middle; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #preorder .close { position: absolute; top: 39px; right: 39px; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } #experience .container { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #experience ul { width: 100%; margin-top: 100px; } #experience li { width: 25%; display: inline-block; margin: 3%; transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; -webkit-transform: scale(1); transform: scale(1); } #experience li span { display: inline-block; width: auto; height: auto; color: #bd994d; position: relative; font-size: 22px; margin-bottom: 20px; } #experience li span::before { content: ""; display: block; width: 65px; height: 2px; position: relative; top: -38px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; background: url("../img/line_gold.svg") center center no-repeat; background-size: 100% 100%; } #experience li h3 { font-family: "UniversCom59UltraCondensed"; font-size: 80px; line-height: 85px; color: white; text-transform: uppercase; margin-bottom: 20px; } #experience li a { font-family: "UniversCom59UltraCondensed"; font-size: 24px; text-transform: uppercase; color: white; padding: 5px 10px 0px; background: #bd994d; opacity: 0; transition: opacity 0.5s; } #experience li.not-hover { -webkit-transform: scale(0.75); transform: scale(0.75); opacity: 0.4; } #experience li.hover { -webkit-transform: scale(1.2); transform: scale(1.2); } #experience li.hover a { opacity: 1; } @media screen and (max-width: 1480px) { #experience li h3 { font-size: 60px; line-height: 65px; } } #contest, #sacrifice { background: #130F08; background-size: cover; } #contest .back, #sacrifice .back { top: 24px; left: 20px; } #contest .container, #sacrifice .container { height: 100%; width: 100%; transition: -webkit-transform 0.7s, opacity 0.7s; transition: transform 0.7s, opacity 0.7s; } #contest .container:not(.center), #sacrifice .container:not(.center) { margin-top: -180px; } #contest .container.hidden, #sacrifice .container.hidden { display: none; } #contest .container.hide:not(.center), #sacrifice .container.hide:not(.center) { opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #contest .container.center, #sacrifice .container.center { position: absolute; top: 50%; -webkit-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); height: auto; } #contest .container.center .main-title, #sacrifice .container.center .main-title { margin-top: 0; } #contest .container.center.hide, #sacrifice .container.center.hide { opacity: 0; -webkit-transform: translate(0, -50%) scale(0); transform: translate(0, -50%) scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #contest .contest-title, #sacrifice .contest-title { height: 50px; text-align: center; margin: 50px 0 30px; position: relative; z-index: 5; line-height: 62px; } #contest .contest-title h1, #sacrifice .contest-title h1 { display: inline-block; font-family: "TrajanProLight"; font-size: 54px; text-transform: uppercase; color: #bd994d; position: relative; top: 0; z-index: 2; } #contest .contest-title h1::before, #sacrifice .contest-title h1::before { content: ""; display: block; width: 150%; height: 1px; position: absolute; top: 40%; left: 50%; background: url("../img/line_gold-big.png") center center no-repeat; background-size: 100% 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media screen and (max-width: 1490px) { #contest .contest-title h1, #sacrifice .contest-title h1 { font-size: 40px; } } @media screen and (max-width: 1100px) { #contest .contest-title h1, #sacrifice .contest-title h1 { font-size: 33px; } #contest .contest-title > span, #sacrifice .contest-title > span { font-size: 82px; } } #contest .contest-links, #sacrifice .contest-links { position: relative; text-align: center; z-index: 5; top: -20px; } #contest .contest-links a, #sacrifice .contest-links a { font-size: 12px; display: inline-block; color: white; margin: 0px 20px 0; transition: color 0.3s; } #contest .contest-links a:hover, #sacrifice .contest-links a:hover { color: #bd994d; } #contest .wall, #sacrifice .wall { position: absolute; top: 50px; right: 60px; display: inline-block; color: #bd994d; width: auto; max-width: 100px; text-transform: uppercase; text-align: center; font-size: 20px; font-family: "UniversCom59UltraCondensed"; z-index: 6; transition: color 0.4s, opacity 0.4s, -webkit-transform 0.4s; transition: color 0.4s, opacity 0.4s, transform 0.4s; } #contest .wall.hide, #sacrifice .wall.hide { opacity: 0; } #contest .wall::after, #sacrifice .wall::after { content: ""; display: block; margin: 5px auto 0; width: 50px; height: 57px; border: 1px solid #bd994d; background: url("../img/pictos/wall.svg") center center no-repeat; background-size: 23px 25px; transition: border 0.4s; } #contest .wall:hover, #sacrifice .wall:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #contest .wall:hover::after, #sacrifice .wall:hover::after { border: 3px solid #bd994d; } #contest video, #sacrifice video { top: auto; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: opacity 1.5s; } #contest video.hidden, #sacrifice video.hidden { opacity: 0; } #contest #subtitles, #sacrifice #subtitles { position: absolute; left: 50%; bottom: 100px; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; opacity: 0; text-align: center; transition: opacity 0.3s; } #contest #subtitles.show, #sacrifice #subtitles.show { opacity: 1; } #contest #skip, #sacrifice #skip { position: absolute; left: 50%; bottom: 60px; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; text-align: center; color: white; opacity: 1; transition: opacity 0.4s; } #contest #skip::after, #contest #skip::before, #sacrifice #skip::after, #sacrifice #skip::before { display: none; } #contest #skip.hidden, #sacrifice #skip.hidden { opacity: 0; cursor: default; } @media screen and (max-width: 1024px) { #contest h1, #sacrifice h1 { font-size: 44px; } } #step1 .position { position: relative; width: 900px; height: 100%; margin: auto; } #step1 #push-step1 { position: absolute; z-index: 3; text-align: center; bottom: 295px; height: 350px; width: 460px; line-height: 350px; left: 46.5%; opacity: 0; -webkit-transform: scale(0.5) translateX(-100%); transform: scale(0.5) translateX(-100%); } #step1 #push-step1 p { line-height: 30px; } #step1 #push-step1 .vam > span { display: block; color: #bd994d; text-transform: uppercase; margin: 0 auto 35px; font-family: "TrajanPro"; line-height: 30px; } #step1 #push-step1 h2 { margin-top: 0; font-family: "TrajanProLight"; font-weight: normal; font-size: 77px; line-height: 77px; } #step1 #push-step1 h2 span { font-size: 39px; line-height: 40px; display: block; } #step1 #push-step1 .subtitle { margin-top: 0; font-family: "TrajanProLight"; font-size: 19px; line-height: 19px; } #step1 #push-step1 .vam { display: inline-block; vertical-align: middle; } #step1 #push-step1 a { font-size: 30px; padding: 32px 40px; background: url("../img/cta.png") center center no-repeat; } #contest #step2, #sacrifice #step5 { text-align: center; } #contest #step2.container.center, #sacrifice #step5.container.center { top: 55%; } #contest #step2 .rules, #contest #step2 .newsletter, #sacrifice #step5 .rules, #sacrifice #step5 .newsletter { position: relative; width: 100%; margin: 0 0px 0 15px; } #contest #step2 .rules.error label, #contest #step2 .newsletter.error label, #sacrifice #step5 .rules.error label, #sacrifice #step5 .newsletter.error label { color: #ff4200; } #contest #step2 [type="checkbox"], #sacrifice #step5 [type="checkbox"] { margin-right: 10px; } #contest #step2 form, #sacrifice #step5 form { margin: auto; width: 550px; } #contest #step2 .input-wrapper, #sacrifice #step5 .input-wrapper { display: inline-block; width: 250px; min-height: 50px; margin: 0 10px; } #contest #step2 .input-wrapper .input, #sacrifice #step5 .input-wrapper .input { max-width: 300px; } #contest #step2 .input-wrapper.select-wrapper, #sacrifice #step5 .input-wrapper.select-wrapper { width: 520px; max-width: 100%; } #contest #step2 .input-wrapper.select-wrapper .select, #sacrifice #step5 .input-wrapper.select-wrapper .select { max-width: 100%; } #contest #step2 .btn.submit, #sacrifice #step5 .btn.submit { font-size: 28px; } @media screen and (max-width: 1490px), screen and (max-height: 860px) { #contest #step2 h2, #sacrifice #step5 h2 { font-size: 40px; } } #contest #step3, #sacrifice #step2 { color: #f0d9c2; font-size: 22px; font-family: "TrajanProLight"; text-align: center; } #contest #step3 .choice, #sacrifice #step2 .choice { position: relative; width: 900px; height: 100%; margin: auto; } #contest #step3 > div:not(#calibrate) > div, #sacrifice #step2 > div:not(#calibrate) > div { position: absolute; display: inline-block; width: 287px; height: 287px; line-height: 317px; cursor: pointer; } #contest #step3 > div:not(#calibrate) > div span, #sacrifice #step2 > div:not(#calibrate) > div span { transition: color 0.3s, opacity 0.5s, -webkit-transform 0.5s; transition: color 0.3s, opacity 0.5s, transform 0.5s; } #contest #step3 > div:not(#calibrate) > div:hover span, #sacrifice #step2 > div:not(#calibrate) > div:hover span { color: #bd994d; -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0.8; } #contest #step3 > div:not(#calibrate) > div.orbe-hidden span, #sacrifice #step2 > div:not(#calibrate) > div.orbe-hidden span { opacity: 0; } #contest #step3 > div:not(#calibrate) > div.image, #contest #step3 > div:not(#calibrate) > div.fbconnect, #sacrifice #step2 > div:not(#calibrate) > div.image, #sacrifice #step2 > div:not(#calibrate) > div.fbconnect { right: 103px; bottom: 297px; } #contest #step3 > div:not(#calibrate) > div.video, #contest #step3 > div:not(#calibrate) > div.webcam, #sacrifice #step2 > div:not(#calibrate) > div.video, #sacrifice #step2 > div:not(#calibrate) > div.webcam { left: 32px; bottom: 287px; } #contest #step3 span, #sacrifice #step2 span { display: inline-block; line-height: 22px; width: 60%; margin: auto; } #step4 { text-align: center; } #step4 form { width: 580px; margin: auto; transition: opacity 0.4s; } #step4 form.hidden { opacity: 0; } #step4 .input-wrapper { margin: 0; } #step4 .input-wrapper { max-width: 580px; } #step4 .input-wrapper.textarea .input { height: 115px; } #step4 .input-wrapper .input { max-width: 580px; } #step4.image .video { display: none; } #step4.video .image { display: none; } #step4 #addfile { display: block; height: 36px; width: 100%; text-align: left; z-index: 10; color: white; font-family: inherit; font-size: inherit; text-transform: uppercase; background: rgba(0, 0, 0, 0.4); padding: 7px 15px 12px; border: 1px solid #bd994d; font-family: "HelveticaLTCondensed"; font-size: 12px; transition: border 0.4s, color 0.4s; } #step4 #addfile.error { border-color: #ff4200; color: #ff4200; } #step5 { text-align: center; } #step5 figure { display: inline-block; position: relative; margin: auto; max-width: 900px; height: 380px; width: auto; overflow: hidden; } #step5 figure:not(.video-container)::after { content: ""; display: block; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; border: 1px solid #bd994d; z-index: 1; } #step5 figure img { max-width: 100%; height: 100%; } #step5 figure.video-container { width: 630px; height: 354px; } #step5 figure #player { max-width: 100%; } #step5 figure iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #step5 a { color: #bd994d; transition: opacity 0.5s; } #step5 a.hide { opacity: 0; } #step5.video #preview-image { display: none; } #step5.image #preview-video { display: none; } #creation { background-image: url("../img/bg/bg_community.jpg"); overflow: hidden; } #creation.sacrifice { background: #101010; } #creation .container { height: 100%; width: 100%; margin: auto; transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; } #creation .creation-title { height: 50px; text-align: center; margin: 50px 0 30px; position: relative; z-index: 5; line-height: 62px; } #creation .creation-title h1 { display: inline-block; font-family: "TrajanProLight"; font-size: 54px; text-transform: uppercase; color: #bd994d; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: 2; } #creation .creation-title h1::before { content: ""; display: block; width: 150%; height: 1px; position: absolute; top: 40%; left: 50%; background: url("../img/line_gold-big.png") center center no-repeat; background-size: 100% 1px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; } @media screen and (max-width: 1490px) { #creation .creation-title h1 { font-size: 40px; } } @media screen and (max-width: 1100px) { #creation .creation-title h1 { font-size: 33px; } #creation .creation-title > span { font-size: 82px; } } #creation .creation { position: relative; height: 70%; } #creation .sacrifice { position: relative; height: 70%; max-height: 672px; } #creation .sacrifice .video-container { width: auto; height: 100%; padding: 0; position: relative; overflow: hidden; } #creation .sacrifice video { position: relative; display: block; top: 0; height: 100%; width: 102%; margin-left: -1%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin: auto; } #creation .sacrifice .sharing-creation { opacity: 1; top: 0; } #creation figure { position: relative; margin: auto; width: 90%; height: 100%; text-align: center; background: #000; } #creation figure img { height: 100%; } #creation .video-container { position: relative; width: 80%; height: 0; padding-bottom: 56.25%; margin: 90px auto 20px; overflow: hidden; } #creation .video-container .image { width: 100%; position: absolute; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: opacity 0.5s; background: black; top: 0; left: 0; } #creation .video-container .image img { width: 100%; } #creation .video-container .image.hide { opacity: 0; } #creation .legend { min-width: 25%; position: absolute; bottom: 40px; left: 40px; background: rgba(0, 0, 0, 0.6); padding: 20px; border: 1px solid #bd994d; opacity: 0; } #creation .legend.hover { opacity: 1; } #creation .sharing-creation { right: 14%; } #creation .sharing-creation.hover { opacity: 1; } #creation .vote { width: 80%; margin: auto; text-align: center; } #creation .back { top: 30px; } #sacrifice { background: #000; } #sacrifice #push-step1 { line-height: 470px; } #sacrifice #push-step1 .vam { line-height: initial; } #sacrifice #push-step1 span.roman { font-family: "TrajanProLight"; position: absolute; left: 50%; -webkit-transform: translate(-50%, -25%); transform: translate(-50%, -25%); z-index: 1; } #sacrifice #push-step1 p { text-transform: uppercase; } #sacrifice #push-step1 p > span { color: #bd994d; line-height: 20px; } #sacrifice #push-step1 p.nb { font-family: "UniversCom59UltraCondensed"; position: relative; z-index: 2; background: black; padding: 5px 5px 0; font-size: 24px; line-height: 24px; display: inline-block; width: auto; } #sacrifice #push-step1 p.lvl { font-size: 12px; line-height: 12px; margin-top: 60px; } #sacrifice #push-step1 a.btn { margin-top: -50px; } #sacrifice #push-step1 a.btn::after { top: 52%; } #sacrifice #push-step1 .gauge { display: block; width: 580px; height: 192px; margin: -90px 0 0 -120px; line-height: 21px; background: url("../img/bg/gauge_vide.png") center center no-repeat; -webkit-transform: scaleX(0.9); transform: scaleX(0.9); } #sacrifice #push-step1 .gauge .inner-gauge { position: absolute; top: 112px; left: 140px; display: block; width: 0px; height: 21px; z-index: 1; transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); background: url("../img/bg/gauge_pleine.png") -130px -111px no-repeat; } #sacrifice #step3 { height: 630px; } #sacrifice #step3.fbconnect { height: 200px; vertical-align: middle; text-align: center; } #sacrifice #step3.fbconnect #calibrate { display: none; } #sacrifice #step3.fbconnect .actions { display: none; } #sacrifice #step3.fbconnect .loader { left: 50%; } #sacrifice #step3.fbconnect p { color: #bd994d; font-size: 34px; font-family: "UniversCom59UltraCondensed"; } #sacrifice #step3.webcam #fbmessage { display: none; } #sacrifice #step3 #calibrate { width: 430px; height: 430px; position: absolute; left: 50%; top: 50%; border-radius: 50%; overflow: hidden; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #sacrifice #step3 #calibrate #webcam { width: 730px; height: 730px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #sacrifice #step3 #calibrate canvas { position: absolute; width: 100%; height: 100%; } #sacrifice #step3 #calibrate div.mask { width: 430px; height: 435px; position: absolute; left: 50%; top: 50%; overflow: hidden; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background: url("../img/cam.png") center center no-repeat; background-size: cover; z-index: 1; } #sacrifice #step3 #calibrate video { display: block; width: 100%; height: 100%; z-index: 0; left: 50%; top: 0%; -webkit-transform: scale(1) translate3d(-50%, 0, 0) !important; transform: scale(1) translate3d(-50%, 0, 0) !important; } #sacrifice #step3 .actions { text-align: center; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } #sacrifice #step3 .btn { display: inline-block; height: 48px; } #sacrifice #step3 .participate, #sacrifice #step3 .retake { font-size: 30px; height: 42px; opacity: 0; display: none; } #sacrifice #step3 img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #sacrifice #step4 { height: 58%; width: 100%; } #sacrifice #step4 .shield { height: 100%; margin: auto; overflow: hidden; width: 55%; } #sacrifice #step4 video { position: relative; display: block; top: auto; left: auto; -webkit-transform: none; transform: none; transition: none; height: 100%; width: 102%; min-width: auto; margin-left: -1%; } #sacrifice #step4 .loader { left: 50%; } #sacrifice #step4 #capture { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #sacrifice #step4 .continue { opacity: 0; position: absolute; bottom: -50px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); transition: opacity 0.75s; z-index: 1; } #sacrifice #step4 .continue.show { opacity: 1; } #sacrifice #sacrifice-queuing, #sacrifice #sacrifice-error { width: 100%; height: 200px; text-align: center; position: absolute; top: 40%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); transition: opacity 1s; opacity: 0; display: none; z-index: 3; } #sacrifice #sacrifice-queuing p, #sacrifice #sacrifice-error p { color: #bd994d; font-size: 18px; line-height: 40px; vertical-align: middle; font-family: "TrajanProLight"; text-transform: uppercase; } #sacrifice #sacrifice-queuing p.sentence, #sacrifice #sacrifice-error p.sentence { display: none; } #sacrifice #sacrifice-queuing p.sentence.show, #sacrifice #sacrifice-error p.sentence.show { display: block; } #sacrifice #sacrifice-queuing .loader, #sacrifice #sacrifice-error .loader { left: 50%; } #sacrifice #sacrifice-queuing.show, #sacrifice #sacrifice-error.show { opacity: 1; display: block; } #sacrifice .wall::after { background: url("../img/pictos/shield.svg") center center no-repeat; background-size: 23px 25px; } #sacrifices-wall { background: #000; } #sacrifices-wall .list ul { width: 90%; } #sacrifices-wall .list li { background: none; width: auto; height: auto; box-shadow: none; overflow: hidden; position: relative; width: 340px; height: 340px; padding: 0; text-align: center; } #sacrifices-wall .list li::after { display: none; } #sacrifices-wall .list li:not(.disabled):hover { box-shadow: none; } #sacrifices-wall .list li span { font-size: 12px; position: absolute; bottom: 70px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); min-width: 100px; z-index: 2; } #sacrifices-wall .list li span::before { top: 0; } #sacrifices-wall .list li span::after { bottom: 0; } #sacrifices-wall .list li video { display: block; position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; -webkit-transform: none; transform: none; transition: opacity 0.5s; } #sacrifices-wall .list li video.hide { opacity: 0; } #sacrifices-wall .list li img { display: block; width: 102%; } #howto { background-image: url("../img/bg/bg_community.jpg"); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } #howto .container { width: 100%; margin: auto; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); height: auto; } #howto .main-title { width: 100%; margin: 40px 0 10px; } #howto h2 { color: #bd994d; font-family: "TrajanPro"; font-size: 18px; text-transform: uppercase; margin: 20px auto; width: 800px; } #howto .content { position: relative; width: 800px; height: 300px; overflow: hidden; margin: auto; padding-right: 30px; } #howto .content p { margin: 10px 0; } #howto .content strong { font-weight: bold; } #howto .content em { font-style: italic; } #howto .content ul { margin: 10px 5px; } #howto .content li { padding-left: 20px; position: relative; } #howto .content li::before { content: "\2014"; position: absolute; left: 0; } #howto .content a { color: #bd994d; text-decoration: underline; } #howto .content iframe { width: 60%; display: block; position: relative; height: 300px; margin: auto; overflow: hidden; } #howto .content .aligncenter { display: block; margin: auto; } #howto .close { position: absolute; top: 39px; right: 39px; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } #awards { background-image: url("../img/bg/bg_community.jpg"); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } #awards .container { width: 100%; margin: auto; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); height: auto; } #awards .main-title { width: 100%; margin: 40px 0 30px; } #awards .content { position: relative; width: 900px; height: 500px; overflow: hidden; margin: auto; padding-right: 30px; } #awards ul { text-align: center; } #awards li { width: 46%; margin: 20px 3%; display: inline-block; vertical-align: middle; text-align: left; } #awards li:nth-child(odd) { margin-left: 0; } #awards li:nth-child(even) { margin-right: 0; } #awards li img { max-width: 100%; } #awards li .quote { text-transform: uppercase; font-size: 34px; line-height: 35px; font-family: "UniversCom59UltraCondensed"; } #awards li .author { margin-top: 10px; font-size: 14px; padding: 0 10px; color: #bd994d; font-family: "TrajanPro"; } #awards li .author::after, #awards li .author::before { background-size: 100% auto; } #awards .close { position: absolute; top: 39px; right: 39px; -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .page-template-page-guides-chapter #chapter .chapter-title:before { position: absolute; top: -100px; left: 0; right: 0; bottom: 0; height: 100px; display: block; z-index: -1; content: ''; background: black; background: -webkit-gradient(left top, left bottom, color-stop(0%, black), color-stop(62%, rgba(0, 0, 0, 0.38)), color-stop(100%, rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.38) 62%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0 ); } #chapterMenu { z-index: 5; position: absolute; display: inline-block; padding: 59px 0; width: auto; text-align: left; float: left; } #chapterMenu .menuItem { margin: 4px 0; padding-left: 63px; } @media screen and (max-width: 1600px) { #chapterMenu .menuItem { padding-left: 40px; } } @media screen and (max-width: 1024px) { #chapterMenu .menuItem { padding-left: 32px; } } #chapterMenu .menuItem a.selected, #chapterMenu .menuItem a { background-color: rgba(8, 7, 5, 0.4); font-size: 12px; font-family: "HelveticaLTCondensed"; color: white; text-transform: uppercase; line-height: 1.667; opacity: 1; padding: 14px 24px; display: inline-block; height: auto; } @media screen and (max-width: 1024px) { #chapterMenu .menuItem a.selected, #chapterMenu .menuItem a { font-size: 10px; padding: 12px 15px; } } #chapterMenu .menuItem a.selected, #chapterMenu .menuItem a:hover { color: #e6cf9f; /*padding: 12px 22px;*/ } #guide-chapter { height: 100%; } #guide-chapter .content { display: block; text-align: center; margin: 43px auto; padding: 0; width: 50%; background: none; box-shadow: none; cursor: auto; height: calc(100% - 300px); overflow: hidden; position: relative; } #guide-chapter .content .content-scroll { width: 80%; max-width: 628px; margin: auto; } @media screen and (max-width: 1600px) { #guide-chapter .content .content-scroll { max-width: 670px; } } @media screen and (max-width: 1024px) { #guide-chapter .content .content-scroll { max-width: 420px; } } #guide-chapter .content h1 { font-size: 34px; font-family: "UniversCom59UltraCondensed"; color: white; text-transform: uppercase; line-height: 1; } #guide-chapter .content p { font-size: 14px; font-family: "HelveticaLTCondensed"; color: white; line-height: 1.429; margin: 16px; } #guide-chapter .content img { position: relative; -webkit-transform: none; transform: none; margin: auto; width: auto !important; max-width: 100%; } #guide-chapter .content a { color: #bd994d; } #guide-chapter .content strong { font-weight: bold; } #guide-chapter .content em { font-style: italic; } #guide-chapter .content iframe { display: block; width: 80%; margin: 10px auto; height: auto; } #guide-chapter .content ul, #guide-chapter .content ol { margin: 10px 0; } #guide-chapter .content li { margin-left: 5px; } #guide-chapter .content li::before { display: inline-block; content: "\2014"; margin-right: 5px; } section#guides { background-size: cover; background-position: center center; } #menu .buy { display: block; width: 179px; margin: auto; } #menu .buy a.btn-border { text-transform: uppercase; text-align: center; /*border: 1px solid rgb(189, 153, 77);*/ background-color: rgba(0, 0, 0, 0.702); height: 38px; width: 100%; font-size: 24px; font-family: "UniversCom59UltraCondensed"; } .getGuide { position: fixed; bottom: 0; z-index: 12; padding: 41px 62px; } .getGuide img, .getGuide span { display: inline-block; vertical-align: bottom; } .getGuide span { color: #ffffff; font-size: 25px; font-family: "UniversCom59UltraCondensed"; text-align: left; margin-left: 15px; text-transform: uppercase; line-height: 1; }