body { width: 100%; height: 100%; overflow: hidden !important; background-color: #161616; overflow-x: hidden; } h1, h2, h3 { font-weight: normal; } input:focus { outline: none; } select:focus { outline: none; } .container { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; overflow: hidden !important; } #fwa { display: none; position: fixed; width: 100px; height: 100px; bottom: 0px; left: 0px; z-index: 10000; background: url('../img/DayBotLeft.png') center center no-repeat; } /*************************************/ /* ------------ COLOURS ------------ */ /*************************************/ /*************************************/ /* ------------ FONTS -------------- */ /*************************************/ .gotham-light { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; } .gotham-book { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; } .gotham-medium { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; } .gotham-bold { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 700; font-style: normal; -webkit-font-smoothing: antialiased; } .gotham-rounded-light { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; } .gotham-rounded-book { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; } /*************************************/ /* ------------ MIX IN'S ----------- */ /*************************************/ .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .layer { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .smartFill { width: 100%; max-height: 100%; } .ccnr { background-position: center center; background-repeat: no-repeat; } .cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .leftShadow { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 0; pointer-events: none; right: 0px; top: 0px; width: 650px; height: 100%; position: absolute; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjU1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.8) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(42%, rgba(0, 0, 0, 0.55)), color-stop(100%, rgba(0, 0, 0, 0.8))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.8) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.8) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.8) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.8) 100%); /* W3C */ } .strollList { position: relative; padding: 0; list-style: none; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding-right: 70px; } .strollLi { padding-top: 20px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; position: relative; color: #fff; z-index: 2; overflow: auto; } .strollLi p { text-transform: uppercase; font-size: 11px; color: #fffa00; } .feedDivider { position: absolute; left: 0px; top: 5px; width: 195px; height: 1px; border-bottom: 1px dotted #545454; } .feedDivider.long { width: 235px; } .time { margin: -12px 0px 0px 0px; color: #7f7f7f; font-size: 10px; float: right; } .hotizontalDivider { margin: 10px 0px 10px -15px; width: 245px; height: 1px; background: url("../img/filters_divider.png") center center no-repeat; } .triggerGPU { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .closeButton { cursor: pointer; } .closeButton:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .closeButton:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .closeButton .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .closeButton .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } .closeButton .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } .arrowButton:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .arrowButton:hover .icon { -webkit-animation: 'leftArrow' 300ms 1 ease-out; -moz-animation: 'leftArrow' 300ms 1 ease-out; -o-animation: 'leftArrow' 300ms 1 ease-out; } .arrowButton .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } .arrowButton .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_btn_toggle.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .arrowButton .icon { background-image: url("../img/icon_btn_toggle@2x.png"); background-size: 9px 14px; } } .fadeDown { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .fadeUp { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .outLeft { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .inLeft { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .fadeIn { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .scaleDownFade { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .scaleUpFade { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .scaleDown { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .scaleUp { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*************************************/ /* ------------ HEADER ------------- */ /*************************************/ .headerLogo { cursor: pointer; width: 262px; height: 100%; margin: 0px 15px 0px 15px; position: absolute; float: left; background-position: center center; background-repeat: no-repeat; background-image: url('../img/header_logo.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .headerLogo { background-image: url("../img/header_logo@2x.png"); background-size: 262px 32px; } } .header { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; display: block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); top: -80px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; width: 100%; height: 60px; left: 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #020202), color-stop(100%, #1a1a1a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* IE10+ */ background: linear-gradient(to bottom, #020202 0%, #1a1a1a 100%); /* W3C */ -webkit-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); z-index: 10000; color: #c8c8c8; text-transform: uppercase; } .header.onStage { top: 0px; opacity: 1; } .mapButton { position: relative; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; font-size: 10px; cursor: pointer; float: right; width: 65px; line-height: 95px; text-align: center; height: 60px; width: 70px; color: #c8c8c8; background-position: center 10px; background-repeat: no-repeat; border-right: 1px dotted #252525; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .mapButton.active { color: #fff; } .mapButton .content { width: 100%; height: 45px; position: absolute; left: 0px; top: 0px; overflow: hidden; } .mapButton .content .contentSection { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; width: 100%; height: 60px; position: relative; } .mapButton .content .contentSection .icon { background-position: center 10px; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .mapButton .content .contentSection.contentTop { opacity: 0.6; } .mapButton .content .caption { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; } .mapButton .pointer { -moz-transition: bottom 0.4s ease-out; -webkit-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; width: 12px; height: 7px; position: absolute; bottom: 0px; left: 50%; margin-left: -6px; } .mapButton .pointer svg { pointer-events: none; position: absolute; left: 0px; } .mapButton:hover:not(.activeBtn) { color: #ffffff; } .mapButton:hover:not(.activeBtn) .content .contentSection.contentTop { opacity: 1; } .mapButton:hover:not(.activeBtn) .caption { color: #ffffff; } .mapButton:last-of-type { border-left: 1px dotted #252525; } .mapButton.activeBtn { color: #868686; } .mapButton.activeBtn .pointer { opacity: 1; } .mapButton.activeBtn .activeBackground { opacity: 1; } .mapButton .caption { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .mapButton#btnVenues { width: 75px; } .mapButton .activeBackground { background-color: #fffa00; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .mapButton .pointer { -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; opacity: 0; bottom: -7px; } .mapButton .pointer svg { fill: #fffa00; } .videoButton { position: relative; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; font-size: 10px; cursor: pointer; float: right; width: 65px; height: 60px; line-height: 95px; text-align: center; color: #000; } .videoButton.active { color: #fff; } .videoButton .content { width: 100%; height: 45px; position: absolute; left: 0px; top: 0px; overflow: hidden; } .videoButton .content .contentSection { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; width: 100%; height: 60px; position: relative; } .videoButton .content .contentSection .icon { background-position: center 10px; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .videoButton .content .contentSection.contentTop { opacity: 0.6; } .videoButton .content .caption { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; } .videoButton .pointer { -moz-transition: bottom 0.4s ease-out; -webkit-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; width: 12px; height: 7px; position: absolute; bottom: 0px; left: 50%; margin-left: -6px; } .videoButton .pointer svg { pointer-events: none; position: absolute; left: 0px; } .videoButton:hover:not(.activeBtn) { color: #ffffff; } .videoButton:hover:not(.activeBtn) .content .contentSection.contentTop { opacity: 1; } .videoButton:hover:not(.activeBtn) .caption { color: #ffffff; } .videoButton.activeBtn { color: #ffffff; } .videoButton.activeBtn .pointer { bottom: -7px; } .videoButton.activeBtn .activeBackground { top: 0px; } .videoButton .content .contentSection { position: absolute; } .videoButton .activeBackground { width: 65px; height: 60px; position: absolute; top: -60px; left: 0px; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-box-shadow: 0px -13px 24px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px -13px 24px rgba(50, 50, 50, 0.5); box-shadow: 0px -13px 24px rgba(50, 50, 50, 0.5); /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iODglIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(88%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 88%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66ffffff', endColorstr='#00ffffff', GradientType=0); /* IE6-8 */ } .headerButton { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; font-size: 10px; cursor: pointer; float: right; width: 65px; height: 60px; line-height: 95px; text-align: center; } .headerButton.active { color: #fff; } .headerButton .content { width: 100%; height: 45px; position: absolute; left: 0px; top: 0px; overflow: hidden; } .headerButton .content .contentSection { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; width: 100%; height: 60px; position: relative; } .headerButton .content .contentSection .icon { background-position: center 10px; background-repeat: no-repeat; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .headerButton .content .contentSection.contentTop { opacity: 0.6; } .headerButton .content .caption { -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; transition: all 400ms cubic-bezier(0.175, 0.885, 0.27, 1.38) 0s; } .headerButton .pointer { -moz-transition: bottom 0.4s ease-out; -webkit-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; width: 12px; height: 7px; position: absolute; bottom: 0px; left: 50%; margin-left: -6px; } .headerButton .pointer svg { pointer-events: none; position: absolute; left: 0px; } .headerButton:hover:not(.activeBtn) { color: #ffffff; } .headerButton:hover:not(.activeBtn) .content .contentSection.contentTop { opacity: 1; } .headerButton:hover:not(.activeBtn) .caption { color: #ffffff; } #btnFeed .icon { background-image: url('../img/icon_feed.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnFeed .icon { background-image: url("../img/icon_feed@2x.png"); background-size: 23px 21px; } } #btnFeed.activeBtn .icon { background-image: url('../img/icon_feed_active.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnFeed.activeBtn .icon { background-image: url("../img/icon_feed_active@2x.png"); background-size: 23px 21px; } } #btnFeed .contentSection { opacity: 1; } #btnFeed .contentSection.contentTop { opacity: 0; } #btnFeed .contentSection.contentTop .icon { background-image: url("../img/icon_feed_active.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnFeed .contentSection.contentTop .icon { background-image: url("../img/icon_feed_active@2x.png"); background-size: 23px 21px; } } #btnFeed:hover .content .contentSection.contentTop { opacity: 1; } #btnFeed:hover .content .contentSection:not(.contentTop) { opacity: 0; } #btnChat .icon { background-image: url('../img/icon_chat.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnChat .icon { background-image: url("../img/icon_chat@2x.png"); background-size: 25px 26px; } } #btnChat.activeBtn .icon { background-image: url('../img/icon_chat_active.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnChat.activeBtn .icon { background-image: url("../img/icon_chat_active@2x.png"); background-size: 25px 26px; } } #btnChat .contentSection { opacity: 1; } #btnChat .contentSection.contentTop { opacity: 0; } #btnChat .contentSection.contentTop .icon { background-image: url("../img/icon_chat_active.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnChat .contentSection.contentTop .icon { background-image: url("../img/icon_chat_active@2x.png"); background-size: 23px 21px; } } #btnChat:hover .content .contentSection.contentTop { opacity: 1; } #btnChat:hover .content .contentSection:not(.contentTop) { opacity: 0; } #btnPhotos .icon { background-image: url('../img/icon_photo.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnPhotos .icon { background-image: url("../img/icon_photo@2x.png"); background-size: 25px 22px; } } #btnPhotos.activeBtn .icon { background-image: url('../img/icon_photo_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnPhotos.activeBtn .icon { background-image: url("../img/icon_photo_dark@2x.png"); background-size: 25px 22px; } } #btnVideos .icon { background-image: url('/img/icon_video.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnVideos .icon { background-image: url("/img/icon_video@2x.png"); background-size: 27px 25px; } } #btnVideos.activeBtn .icon { background-image: url('/img/icon_video_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnVideos.activeBtn .icon { background-image: url("/img/icon_video_dark@2x.png"); background-size: 27px 25px; } } #btnPromo .icon { background-image: url('../img/icon_le_mis_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnPromo .icon { background-image: url("../img/icon_le_mis_white@2x.png"); background-size: 30px 30px; } } #btnPromo.activeBtn .icon { background-image: url('../img/icon_le_mis_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnPromo.activeBtn .icon { background-image: url("../img/icon_le_mis_dark@2x.png"); background-size: 30px 30px; } } #btnFilters .icon { background-image: url('../img/icon_map.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnFilters .icon { background-image: url("../img/icon_map@2x.png"); background-size: 20px 25px; } } #btnFilters.activeBtn .icon { background-image: url('../img/icon_map_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnFilters.activeBtn .icon { background-image: url("../img/icon_map_dark@2x.png"); background-size: 20px 25px; } } #btnMap .icon { background-image: url('/img/icon_map.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnMap .icon { background-image: url("/img/icon_map@2x.png"); background-size: 27px 25px; } } #btnMap.activeBtn .icon { background-image: url('/img/icon_map_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnMap.activeBtn .icon { background-image: url("/img/icon_map_dark@2x.png"); background-size: 27px 25px; } } #btnVenues .icon { background-image: url("/img/icon_venues.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnVenues .icon { background-image: url("/img/icon_venues@2x.png"); background-size: 27px 24px; } } #btnVenues.activeBtn .icon { background-image: url("/img/icon_venues_dark.png"); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnVenues.activeBtn .icon { background-image: url("/img/icon_venues_dark@2x.png"); background-size: 27px 24px; } } #btnStats .icon { background-image: url('/img/icon_stats.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnStats .icon { background-image: url("/img/icon_stats@2x.png"); background-size: 27px 24px; } } #btnStats.activeBtn .icon { background-image: url('/img/icon_stats_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnStats.activeBtn .icon { background-image: url("/img/icon_stats_dark@2x.png"); background-size: 27px 24px; } } #btnSearch .icon { background-image: url('/img/icon_search.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnSearch .icon { background-image: url("/img/icon_search@2x.png"); background-size: 22px 22px; } } #btnSearch.activeBtn .icon { background-image: url('/img/icon_search_dark.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnSearch.activeBtn .icon { background-image: url("/img/icon_search_dark@2x.png"); background-size: 22px 22px; } } #btnSearch.open { width: 300px; } #btnSearch.open .content { opacity: 0; } #btnSearch.open .caption { opacity: 0; } #btnSearch.open .search .bg { opacity: 1; } #btnSearch.open .search input { opacity: 1; } #btnSearch .btn { display: block; } #btnSearch .search { display: none; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #btnSearch .search .bg { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #454344; } #btnSearch .search ::-webkit-input-placeholder { color: #5d5c5c; } #btnSearch .search :-moz-placeholder { color: #5d5c5c; } #btnSearch .search ::-moz-placeholder { color: #5d5c5c; } #btnSearch .search :-ms-input-placeholder { color: #5d5c5c; } #btnSearch .search input { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; width: 200px; position: absolute; top: 18px; left: 40px; font-size: 14px; background: transparent; border: none; color: #d0d0d0; } #btnSearch .search .logo { position: absolute; width: 26px; height: 26px; left: 10px; top: 50%; margin-top: -13px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/icon_search_bar.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnSearch .search .logo { background-image: url("/img/icon_search_bar@2x.png"); background-size: 14px 13px; } } #btnSearch .search .chevron { position: absolute; right: 6px; height: 30px; width: 30px; top: 15px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/icon_search_chevron.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #btnSearch .search .chevron { background-image: url("/img/icon_search_chevron@2x.png"); background-size: 10px 16px; } } /*************************************/ /* ------------ HEADER MAIN --------- */ /*************************************/ #headerMain { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; display: block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); top: -80px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; width: 100%; height: 60px; left: 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #020202), color-stop(100%, #1a1a1a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* IE10+ */ background: linear-gradient(to bottom, #020202 0%, #1a1a1a 100%); /* W3C */ -webkit-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); z-index: 10000; color: #c8c8c8; text-transform: uppercase; /*------------- HEADER VIDEO ------------*/ /*------------- HEADER MAP ------------*/ } #headerMain.onStage { top: 0px; opacity: 1; } #headerMain.mapHeader .localTime { width: 90px; border-left: 1px dotted #252525; border-right: 1px dotted #252525; } #headerMain.mapHeader .headerMap { display: block; } #headerMain.rctHeader .headerVideo { display: block; } #headerMain .localTime { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; height: 60px; float: left; width: 0px; vertical-align: 16px; overflow: hidden; text-align: center; } #headerMain .localTime p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 18px; margin-top: -5px; color: #c8c8c8; } #headerMain .localTime .local { color: #fffa00; font-size: 9px; margin-top: 15px; } #headerMain #liveBtns { border-left: 1px dotted #252525; float: left; width: 75px; height: 100%; font-size: 14px; } #headerMain #liveBtns .liveBtn { height: 16px; width: 75px; overflow: hidden; margin-left: 15px; cursor: pointer; position: absolute; -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.27, 1.38); -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.27, 1.38); -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.27, 1.38); -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.27, 1.38); transition: all 500ms cubic-bezier(0.175, 0.885, 0.27, 1.38); /* custom */ } #headerMain #liveBtns .liveBtn:hover { color: #ffffff !important; } #headerMain #liveBtns #btnLive1 { margin-top: 12px; color: #e6033b; z-index: 500; } #headerMain #liveBtns #btnLive2 { color: #019fff; margin-top: 31px; z-index: 100; } #headerMain #liveBtns .smallGrey { display: none; margin-left: 10px; color: #c8c8c8; text-transform: capitalize; } #headerMain #status { display: none; float: left; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 13px; width: 300px; } #headerMain #status .status1 { margin-top: 13px; } #headerMain #status .status2 { margin-top: 4px; } #headerMain .headerVideo { display: none; width: 450px; height: 100%; position: absolute; right: 0px; } #headerMain .headerVideo.rct1 { background-color: #e6033b; } #headerMain .headerVideo.rct1 #controlTextbox { border: 7px solid #e6033b; } #headerMain .headerVideo.rct1 #triangle { -webkit-transform: translateX(-30px) rotate(14deg); -moz-transform: translateX(-30px) rotate(14deg); -ms-transform: translateX(-30px) rotate(14deg); -o-transform: translateX(-30px) rotate(14deg); transform: translateX(-30px) rotate(14deg); } #headerMain .headerVideo.rct1 #triangle .carrot { fill: #e6033b; } #headerMain .headerVideo.rct1 .videoButton .pointer svg { fill: #e6033b; } #headerMain .headerVideo.rct2 { background-color: #019fff; } #headerMain .headerVideo.rct2 #controlTextbox { border: 7px solid #019fff; } #headerMain .headerVideo.rct2 #triangle { -webkit-transform: translateX(-30px) rotate(-12deg); -moz-transform: translateX(-30px) rotate(-12deg); -ms-transform: translateX(-30px) rotate(-12deg); -o-transform: translateX(-30px) rotate(-12deg); transform: translateX(-30px) rotate(-12deg); } #headerMain .headerVideo.rct2 #triangle .carrot { fill: #019fff; } #headerMain .headerVideo.rct2 .videoButton .pointer svg { fill: #019fff; } #headerMain .headerVideo #triangle { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 14px; height: 14px; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); left: -20px; top: 50%; margin-top: -9px; -webkit-transform-origin: 40px; -moz-transform-origin: 40px; } #headerMain .headerVideo #controlTextbox { position: absolute; transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin-left: -40px; -webkit-border-radius: 29px; -moz-border-radius: 29px; -ms-border-radius: 29px; -o-border-radius: 29px; border-radius: 29px; width: 290px; height: 100%; background-color: #fff; text-transform: capitalize; color: #000; line-height: 45px; font-size: 18px; text-indent: 20px; box-shadow: 2px 1px 11px rgba(31, 29, 29, 0.75), inset 0px 1px 5px 1px rgba(0, 0, 0, 0.55); -moz-box-shadow: 2px 1px 11px rgba(31, 29, 29, 0.75), inset 0px 1px 5px 1px rgba(0, 0, 0, 0.55); -webkit-box-shadow: 2px 1px 11px rgba(31, 29, 29, 0.75), inset 0px 1px 5px 1px rgba(0, 0, 0, 0.55); } #headerMain .headerVideo #controlTextbox textarea { overflow: auto; transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; resize: none; border: none; width: 235px; font-size: 14px; margin-top: 6px; line-height: 30px; outline: none; height: 33px; } #headerMain .headerVideo #controlTextbox textarea.twoLine { font-size: 12px; line-height: 14px; height: 30px; padding-top: 2px; } #headerMain .headerVideo #controlTextbox textarea.threeLine { line-height: 11px; font-size: 9px; } #headerMain .headerVideo #controlTextbox .textAreaIcon { position: absolute; right: 0px; width: 30px; height: 30px; top: 7px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_chevron.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #headerMain .headerVideo #controlTextbox .textAreaIcon { background-image: url("../img/icon_chevron@2x.png"); background-size: 10px 16px; } } #headerMain .headerVideo #controlTextbox .textAreaIcon:hover { cursor: pointer; } #headerMain .headerVideo #controlTextbox .textAreaIcon.checked { right: 10px; background-image: url('../img/icon_check.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #headerMain .headerVideo #controlTextbox .textAreaIcon.checked { background-image: url("../img/icon_check@2x.png"); background-size: 20px 14px; } } #headerMain .headerVideo #controlTextbox ::-webkit-input-placeholder { color: #000; } #headerMain .headerVideo #controlTextbox :-moz-placeholder { color: #000; } #headerMain .headerVideo #controlTextbox ::-moz-placeholder { color: #000; } #headerMain .headerVideo #controlTextbox :-ms-input-placeholder { color: #000; } #headerMain .headerVideo #tourist-wrap { position: relative; } #headerMain .headerVideo #touristSubTitle { top: 13px; font-size: 10px; color: #000000; opacity: 0.5; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 700; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; text-transform: uppercase; width: 150px; height: 30px; margin-left: 275px; } @media screen and (max-width: 1180px) { #headerMain .headerVideo #touristSubTitle { display: none !important; } } #headerMain .headerVideo #touristTitle { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #ffffff; text-transform: none; width: 400px; margin-left: 275px; top: 30px; position: absolute; } @media screen and (max-width: 1180px) { #headerMain .headerVideo #touristTitle { display: none !important; } } #headerMain .headerVideo #touristTitle.stageLeft { left: -30%; opacity: 0; } #headerMain .headerVideo #touristTitle.onStage { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; left: 0%; opacity: 1; } #headerMain .headerVideo #touristTitle.stageRight { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; left: 10%; opacity: 0; } #headerMain .headerMap { display: none; } /*************************************/ /* --------- DOWN HEADER ----------- */ /*************************************/ #headerDown { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; display: block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); top: -80px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; width: 100%; height: 60px; left: 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #020202), color-stop(100%, #1a1a1a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* IE10+ */ background: linear-gradient(to bottom, #020202 0%, #1a1a1a 100%); /* W3C */ -webkit-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); z-index: 10000; color: #c8c8c8; text-transform: uppercase; } #headerDown.onStage { top: 0px; opacity: 1; } #headerDown .localTime { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; height: 60px; float: left; width: 90px; border-left: 1px dotted #252525; border-right: 1px dotted #252525; vertical-align: 16px; overflow: hidden; text-align: center; } #headerDown .localTime p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 18px; margin-top: -5px; color: #c8c8c8; } #headerDown .localTime .local { color: #fffa00; font-size: 9px; margin-top: 15px; } #headerDown .nextStream { margin-left: 15px; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; height: 60px; float: left; vertical-align: 16px; text-align: left; } #headerDown .nextStream p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 18px; margin-top: -5px; color: #c8c8c8; } #headerDown .nextStream .title { color: #fffa00; font-size: 9px; margin-top: 15px; } /*************************************/ /* --------- Post HEADER ----------- */ /*************************************/ #headerPost { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; display: block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); top: -80px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; width: 100%; height: 60px; left: 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #020202), color-stop(100%, #1a1a1a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #020202 0%, #1a1a1a 100%); /* IE10+ */ background: linear-gradient(to bottom, #020202 0%, #1a1a1a 100%); /* W3C */ -webkit-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); box-shadow: 0px 12px 30px rgba(50, 50, 50, 0.75); z-index: 10000; color: #c8c8c8; text-transform: uppercase; } #headerPost.onStage { top: 0px; opacity: 1; } /*************************************/ /* ------------ FOOTER ------------- */ /*************************************/ #footerMain { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; z-index: 3000; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; position: absolute; left: 0px; bottom: -30px; height: 30px; width: 100%; background-color: #000; color: rgba(255, 255, 255, 0.3); font-size: 9px; line-height: 33px; text-indent: 20px; min-width: 768px; overflow: hidden; } #footerMain a { color: rgba(255, 255, 255, 0.3); text-decoration: none; } #footerMain a:hover { color: rgba(255, 255, 255, 0.5); } #footerMain a.light { color: rgba(255, 255, 255, 0.7); } #footerMain a.light:hover { color: #ffffff; } #footerMain #footerShare { font-size: 10px; color: #fffa00; float: right; text-indent: 0px; line-height: 30px; margin-right: 3px; } #footerMain #footerShare a { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; cursor: pointer; color: #fffa00; border-bottom: 1px dashed #fffa00; } #footerMain #footerShare a:hover { color: #ffffff; border-bottom: 1px dashed #ffffff; } #footerMain #footerShare .footerShare { margin-right: 10px; display: inline-block; cursor: pointer; } #footerMain #footerShare .shareOn { display: inline-block; margin-right: 10px; } #footerMain #footerShare .btnFacebook { vertical-align: middle; margin-top: -5px; cursor: pointer; display: inline-block; width: 8px; height: 16px; position: relative; } #footerMain #footerShare .btnFacebook .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #footerMain #footerShare .btnFacebook:hover .content.white { opacity: 1; } #footerMain #footerShare .btnFacebook .content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #footerMain #footerShare .btnFacebook .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_footer_facebook_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #footerMain #footerShare .btnFacebook .content.white { background-image: url("../img/icon_footer_facebook_white@2x.png"); background-size: 8px 16px; } } #footerMain #footerShare .btnFacebook .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_footer_facebook_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #footerMain #footerShare .btnFacebook .content.yellow { background-image: url("../img/icon_footer_facebook_yellow@2x.png"); background-size: 8px 16px; } } #footerMain #footerShare .btnTwitter { margin-left: 7px; margin-right: 5px; vertical-align: middle; margin-top: -4px; width: 18px; height: 15px; cursor: pointer; display: inline-block; position: relative; } #footerMain #footerShare .btnTwitter .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #footerMain #footerShare .btnTwitter:hover .content.white { opacity: 1; } #footerMain #footerShare .btnTwitter .content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #footerMain #footerShare .btnTwitter .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_footer_twitter_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #footerMain #footerShare .btnTwitter .content.white { background-image: url("../img/icon_footer_twitter_white@2x.png"); background-size: 18px 15px; } } #footerMain #footerShare .btnTwitter .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_footer_twitter_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #footerMain #footerShare .btnTwitter .content.yellow { background-image: url("../img/icon_footer_twitter_yellow@2x.png"); background-size: 18px 15px; } } #footerMain #footerShare .shareButton { cursor: pointer; position: relative; display: inline-block; } #footerMain #footerShare .shareButton .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #footerMain #footerShare .shareButton:hover .content.white { opacity: 1; } #footerMain .footerDivider { display: inline-block; width: 1px; height: 6px; border-left: 1px dotted #ffffff; margin-left: 5px; margin-right: 5px; } /***************************************************************************************************************/ /* ----------- VIEWS ------------*/ /***************************************************************************************************************/ /*************************************/ /* ----------- GP VIEW ------------*/ /*************************************/ #promoViewLeMis { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: none; text-align: center; background-color: black; color: #ffffff; } #promoViewLeMis.share #promoShare #promoShareFacebook { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #promoViewLeMis.share #promoShare #promoShareTwitter { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #promoViewLeMis.noShare #promoShare { display: none; } #promoViewLeMis .promoContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } #promoViewLeMis .promoContent.hideMe { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #promoViewLeMis .promoContent.showMe { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; } #promoViewLeMis .promoBackground { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; background-color: #333; } #promoViewLeMis .promoBackground .image { position: absolute; width: 100%; height: 100%; top: 5%; left: 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #promoViewLeMis .yellowH { color: #fffa00; display: inline-block; } #promoViewLeMis .divider { border-bottom: 1px dashed #839698; height: 1px; margin-top: 100px; opacity: .5; margin-bottom: -76px; } #promoViewLeMis #promoRCT { width: 277px; height: 186px; display: inline-block; background-image: url('../img/promo_logo_lm.png'); background-repeat: no-repeat; margin-top: 104px; margin-left: 7px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #promoRCT { background-image: url("../img/promo_logo_lm@2x.png"); background-size: 274px 164px; } } #promoViewLeMis #f1logo { margin-top: 50px; width: 250px; height: 61px; background-position: center center; background-repeat: no-repeat; display: inline-block; } #promoViewLeMis #promoShare { position: relative; width: 150px; height: 82px; top: 55px; margin: auto; } #promoViewLeMis #promoShare .shareButton { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); position: absolute; width: 82px; height: 82px; cursor: pointer; } #promoViewLeMis #promoShare .shareButton:hover { z-index: 100; } #promoViewLeMis #promoShare .shareButton:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #promoViewLeMis #promoShare .shareButton .background { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; text-align: left; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 41px; -moz-border-radius: 41px; -ms-border-radius: 41px; -o-border-radius: 41px; border-radius: 41px; overflow: hidden; } #promoViewLeMis #promoShare .shareButton .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #promoViewLeMis #promoShare #promoShareTwitter { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); position: absolute; width: 82px; height: 82px; cursor: pointer; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; } #promoViewLeMis #promoShare #promoShareTwitter:hover { z-index: 100; } #promoViewLeMis #promoShare #promoShareTwitter:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #promoViewLeMis #promoShare #promoShareTwitter .background { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; text-align: left; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 41px; -moz-border-radius: 41px; -ms-border-radius: 41px; -o-border-radius: 41px; border-radius: 41px; overflow: hidden; } #promoViewLeMis #promoShare #promoShareTwitter .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #promoViewLeMis #promoShare #promoShareTwitter .background { background-image: url('../img/twitter_promo_bg.png'); background-position: center center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #promoShare #promoShareTwitter .background { background-image: url("../img/twitter_promo_bg@2x.png"); background-size: 100px 100px; } } #promoViewLeMis #promoShare #promoShareTwitter .icon { background-image: url('../img/icon_promo_twitter.png'); background-position: center center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #promoShare #promoShareTwitter .icon { background-image: url("../img/icon_promo_twitter@2x.png"); background-size: 21px 17px; } } #promoViewLeMis #promoShare #promoShareFacebook { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); position: absolute; width: 82px; height: 82px; cursor: pointer; left: 70px; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #promoShare #promoShareFacebook:hover { z-index: 100; } #promoViewLeMis #promoShare #promoShareFacebook:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #promoViewLeMis #promoShare #promoShareFacebook .background { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; text-align: left; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 41px; -moz-border-radius: 41px; -ms-border-radius: 41px; -o-border-radius: 41px; border-radius: 41px; overflow: hidden; } #promoViewLeMis #promoShare #promoShareFacebook .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #promoViewLeMis #promoShare #promoShareFacebook .background { background-image: url('../img/facebook_promo_bg.png'); background-position: center center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #promoShare #promoShareFacebook .background { background-image: url("../img/facebook_promo_bg@2x.png"); background-size: 100px 100px; } } #promoViewLeMis #promoShare #promoShareFacebook .icon { background-image: url('../img/icon_promo_facebook.png'); background-position: center center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #promoShare #promoShareFacebook .icon { background-image: url("../img/icon_promo_facebook@2x.png"); background-size: 13px 25px; } } #promoViewLeMis #closed { display: none; } #promoViewLeMis #closed.hideMe { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #promoViewLeMis #closed.showMe { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; } #promoViewLeMis #closed h1 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 30px; color: #fffa00; width: 75%; margin: auto; margin-top: 30px; } #promoViewLeMis #closed p { margin: 0 auto; width: 60%; max-width: 740px; line-height: 20px; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 16px; } #promoViewLeMis #closed p.yellow { color: #fffa00; } #promoViewLeMis #closed p.initial { margin-top: 140px; } #promoViewLeMis #thanks { display: none; } #promoViewLeMis #thanks.hideMe { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #promoViewLeMis #thanks.showMe { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; } #promoViewLeMis #thanks h1 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 30px; color: #fffa00; width: 85%; margin: auto; margin-top: 30px; } #promoViewLeMis #thanks p { margin: 0 auto; width: 60%; max-width: 740px; line-height: 20px; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 16px; } #promoViewLeMis #thanks p.initial { margin-top: 24px; } #promoViewLeMis #thanks #shareOnThanks { margin-top: 40px; background-color: #0E0E0E; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; width: 124px; height: 27px; border-radius: 40px; display: inline-block; top: 319px; right: 5%; font-size: 14px; padding-top: 3px; margin-bottom: 50px; } #promoViewLeMis #thanks #shareOnThanks .fbIcon { display: inline-block; background-image: url('../img/icon_footer_facebook_yellow.png'); width: 8px; height: 16px; margin-left: 6px; margin-right: 7px; margin-top: 2px; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #thanks #shareOnThanks .fbIcon { background-image: url("../img/icon_footer_facebook_yellow@2x.png"); background-size: 8px 16px; } } #promoViewLeMis #thanks #shareOnThanks .twIcon { display: inline-block; background-image: url('../img/icon_footer_twitter_yellow.png'); width: 18px; height: 15px; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #thanks #shareOnThanks .twIcon { background-image: url("../img/icon_footer_twitter_yellow@2x.png"); background-size: 18px 15px; } } #promoViewLeMis #shareOn { background-color: #000; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; width: 124px; height: 27px; border-radius: 40px; position: absolute; top: 240px; right: 5%; font-size: 14px; padding-top: 3px; padding-left: 10px; padding-right: 10px; opacity: 0.7; } #promoViewLeMis #shareOn .fbIcon { display: inline-block; background-image: url('../img/icon_footer_facebook_yellow.png'); width: 8px; height: 16px; margin-left: 6px; margin-right: 7px; margin-top: 4px; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #shareOn .fbIcon { background-image: url("../img/icon_footer_facebook_yellow@2x.png"); background-size: 8px 16px; } } #promoViewLeMis #shareOn .twIcon { display: inline-block; background-image: url('../img/icon_footer_twitter_yellow.png'); width: 18px; height: 15px; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #shareOn .twIcon { background-image: url("../img/icon_footer_twitter_yellow@2x.png"); background-size: 18px 15px; } } #promoViewLeMis #shareOn .shareOnText { float: left; margin-left: 6px; margin-top: 4px; } #promoViewLeMis #form { display: none; position: relative; } #promoViewLeMis #form h1 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 30px; margin: auto; width: 80%; margin-bottom: 6px; margin-top: 50px; letter-spacing: -2px; line-height: .96; } #promoViewLeMis #form #remember { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; margin-top: 45px; font-size: 14px; } #promoViewLeMis #form .permit { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 26px; } #promoViewLeMis #form.hideMe #promoTop { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #promoViewLeMis #form.hideMe #answers { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; } #promoViewLeMis #form.hideMe #details { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #promoViewLeMis #form.hideMe #rule { opacity: 0; transition: all 100ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 100ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 100ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 100ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #form.showMe #promoTop { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #promoViewLeMis #form.showMe #answers { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; } #promoViewLeMis #form.showMe #details { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #promoViewLeMis #form.showMe #rule { opacity: 0; transition: all 100ms 100ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 100ms 100ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 100ms 100ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 100ms 100ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #form #recorded { opacity: 0; height: 20px; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font: 12px; } #promoViewLeMis #form #rule { width: 100%; top: 150px; position: absolute; height: 1px; left: 0px; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); } #promoViewLeMis #form .clues { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 15px; margin-top: 36px; } #promoViewLeMis #form .clues p { margin-top: 30px; } #promoViewLeMis #form .clues h2 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; letter-spacing: -1px; font-weight: 300; } #promoViewLeMis #form .clues .clue { font-size: 15px; } #promoViewLeMis #form .clues a { border: none; text-decoration: none; color: #fffa00; border-bottom: 1px dashed #fffa00; cursor: pointer; } #promoViewLeMis #form .clues .follow { margin-bottom: 5px; font-size: 19px; } #promoViewLeMis #form .yellowH { color: #fffa00; display: inline-block; font-size: 26px; } #promoViewLeMis #form .yellowH.small { font-size: 20px; } #promoViewLeMis #form #promoTop { line-height: 22px; width: 100%; max-width: 760px; margin: 0 auto; } #promoViewLeMis #form #promoTop p { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 15px; letter-spacing: -0.1px; width: 80%; margin: 0 auto; margin-top: 21px; } #promoViewLeMis #form #promoTop p:first-of-type { margin-top: 16px; } #promoViewLeMis #form #promoTop p.smallText:last-of-type { margin-top: -2px; } #promoViewLeMis #form #promoTop p.yellow { color: #fffa00; } #promoViewLeMis #form #promoTop a { border: none; text-decoration: none; color: #fffa00; border-bottom: 1px dashed #fffa00; cursor: pointer; } #promoViewLeMis #form #promoTop .smallText { font-size: 12px; line-height: 18px; } #promoViewLeMis #form #promoTop .promoDetails { width: 70%; max-width: 550px; text-align: left; } #promoViewLeMis #form #promoTop #majorPrizes { width: 100%; } #promoViewLeMis #form #promoTop h2 { color: #fffa00; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; letter-spacing: -1px; font-weight: 300; margin-top: 62px; margin-bottom: 33px; } #promoViewLeMis #form #promoTop h2 a { display: inline-block; border: none; text-decoration: none; color: #fffa00; border-bottom: 1px dashed #fffa00; font-weight: 500; cursor: pointer; } #promoViewLeMis #form #promoTop h2 a:hover { color: #ffffff; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); } #promoViewLeMis #form #promoTop h3 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; letter-spacing: -1px; font-weight: 300; } #promoViewLeMis #form #promoTop h3 a { display: inline-block; border: none; text-decoration: none; color: #fffa00; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); font-weight: 500; cursor: pointer; } #promoViewLeMis #form #promoTop h3 a:hover { color: #ffffff; border-bottom: 1px dashed #fffa00; } #promoViewLeMis #form #promoTop ul { list-style: none; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: left; text-indent: -8px; font-size: 15px; text-align: center; line-height: 25px; margin-top: 22px; padding: 0 65px; } #promoViewLeMis #form #promoTop li { margin-bottom: 20px; } #promoViewLeMis #form .runnersUp { margin-top: -6px; } #promoViewLeMis #form #answers { width: 100%; max-width: 740px; margin: 0 auto; margin-top: 120px; } #promoViewLeMis #form #answers p { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; } #promoViewLeMis #form #answers h1 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 25px; } #promoViewLeMis #form #answers h3 { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; margin-top: 45px; margin-bottom: 18px; } #promoViewLeMis #form #answers #answerError { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; background-color: #db0000; width: 85%; margin: auto; border-radius: 10px; margin-bottom: 20px; text-align: left; padding-top: 6px; padding-bottom: 6px; opacity: 0; display: none; } #promoViewLeMis #form #answers #answerError.showMe { opacity: 1; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #form #answers #answerError .errorItem { position: relative; padding-left: 10px; } #promoViewLeMis #form #answers h2 { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; text-transform: uppercase; font-size: 16px; margin-top: 26px; margin-bottom: 20px; } #promoViewLeMis #form #answers .styledSelect { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; margin: auto; margin-left: 2px; margin-right: 2px; margin-top: 0px; margin-bottom: 6px; width: 235px; display: inline-block; background-color: #ffffff; font-size: 18px; text-indent: 10px; color: #000000; height: 40px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; cursor: pointer; pointer-events: none; } #promoViewLeMis #form #answers .styledSelect.ieFix { background-image: url('../img/icon_promo_select.png'); background-position: 95% center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #form #answers .styledSelect.ieFix { background-image: url("../img/icon_promo_select@2x.png"); background-size: 13px 9px; } } #promoViewLeMis #form #answers .styledSelect select { cursor: pointer; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; text-indent: 10px; line-height: 40px; height: 40px; color: #000000; background: transparent; width: 250px; float: left; border: 0; -webkit-appearance: none; pointer-events: auto; } #promoViewLeMis #form #answers .styledSelect .carrot { width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; position: absolute; right: 0px; top: 0px; background-image: url('../img/icon_promo_select.png'); background-position: center center; background-repeat: no-repeat; background-color: white; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #form #answers .styledSelect .carrot { background-image: url("../img/icon_promo_select@2x.png"); background-size: 13px 9px; } } #promoViewLeMis #form #answers .styledSelect select::-ms-expand { display: none; } #promoViewLeMis #form #answers .tellUsDirection { margin-top: -1px; } #promoViewLeMis #form #answers .tellUs { width: 600px; height: 112px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border: none; resize: none; outline: none; font-size: 12px; margin-top: -2px; padding-top: 8px; padding-left: 10px; padding-right: 10px; } #promoViewLeMis #form #answers .smallText { font-size: 12px; } #promoViewLeMis #form #answers .fieldMan { margin-top: -3px; } #promoViewLeMis #form #answers input { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; width: 180px; height: 28px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; display: inline-block; border: none; cursor: pointer; } #promoViewLeMis #form #details { margin: 0 auto; margin-top: 42px; width: 100%; max-width: 520px; } #promoViewLeMis #form #details h2 { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 16px; margin-top: 26px; } #promoViewLeMis #form #details #detailError { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; background-color: #db0000; width: 93%; margin: auto; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; text-align: left; padding-top: 6px; padding-bottom: 6px; opacity: 0; margin-top: -10px; display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } #promoViewLeMis #form #details #detailError.showMe { opacity: 1; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #form #details #detailError .errorItem { position: relative; padding-left: 10px; } #promoViewLeMis #form #details .styledSelect { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 212px; display: inline-block; background-color: #ffffff; text-indent: 10px !important; color: #000000; height: 34px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; position: relative; pointer-events: none; cursor: pointer; } #promoViewLeMis #form #details .styledSelect.ieFix { background-image: url('../img/icon_promo_select.png'); background-position: 95% center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #form #details .styledSelect.ieFix { background-image: url("../img/icon_promo_select@2x.png"); background-size: 13px 9px; } } #promoViewLeMis #form #details .styledSelect .carrot { width: 34px; height: 34px; -webkit-border-radius: 17px; -moz-border-radius: 17px; -ms-border-radius: 17px; -o-border-radius: 17px; border-radius: 17px; position: absolute; right: 0px; top: 0px; background-image: url('../img/icon_promo_select.png'); background-position: center center; background-repeat: no-repeat; background-color: white; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #form #details .styledSelect .carrot { background-image: url("../img/icon_promo_select@2x.png"); background-size: 13px 9px; } } #promoViewLeMis #form #details .styledSelect.state { width: 94px; background-position: 90% center; margin-right: 0px; } #promoViewLeMis #form #details .styledSelect.selectInvalid { width: 219px; margin-left: 2px; border: 2px solid #e6033b !important; } #promoViewLeMis #form #details .styledSelect select { cursor: pointer; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; padding-left: 10px; padding-right: 10px; line-height: 34px; height: 34px; color: #000000; background: transparent; width: 240px; float: left; border: 0; -webkit-appearance: none; pointer-events: auto; } #promoViewLeMis #form #details .styledSelect select::-ms-expand { display: none; } #promoViewLeMis #form #details #state { width: 130px !important; } #promoViewLeMis #form #details .wrapper { display: inline-block; padding-left: 15px; padding-right: 15px; background-color: #ffffff; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; height: 34px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 8px; } #promoViewLeMis #form #details .wrapper.left { margin-right: 33px; } #promoViewLeMis #form #details .wrapper.state { float: right; } #promoViewLeMis #form #details input { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; width: 180px; height: 25px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; display: inline-block; border: none; cursor: pointer; } #promoViewLeMis #form #details input#postcode { width: 80px; padding-top: 4px; } #promoViewLeMis #form #details ::-webkit-input-placeholder { /* WebKit browsers */ color: #000; } #promoViewLeMis #form #details :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; } #promoViewLeMis #form #details ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; } #promoViewLeMis #form #details :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #000; } #promoViewLeMis #form #details #smaller { display: inline-block; height: 30px; margin-left: 32px; vertical-align: top; } #promoViewLeMis #form #details #smaller .wrapper { vertical-align: top; margin-right: 1px; } #promoViewLeMis #form #details #smaller.smallerInvalid { margin-left: 34px; } #promoViewLeMis #form #submit { width: 100%; max-width: 520px; margin: 0 auto; margin-top: 33px; } #promoViewLeMis #form #submit .twoLine { text-indent: -26px; margin-left: 26px; } #promoViewLeMis #form #submit .checkboxItem { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 13px; text-align: left; margin-bottom: 10px; letter-spacing: 0px; padding-left: 32px; } #promoViewLeMis #form #submit .checkboxItem a { border: none; text-decoration: none; border-bottom: 1px dashed #ffffff; display: inline-block; color: #ffffff; } #promoViewLeMis #form #submit .checkboxItem a:hover { color: #fffa00; border-bottom: 1px dashed #fffa00; } #promoViewLeMis #form #submit .checkboxItem .checkbox { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; margin-right: 10px; display: inline-block; vertical-align: middle; width: 16px; height: 16px; cursor: pointer; } #promoViewLeMis #form #submit .checkboxItem .checkbox.active { background-image: url('../img/check_promo.png'); background-position: center center; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #promoViewLeMis #form #submit .checkboxItem .checkbox.active { background-image: url("../img/check_promo@2x.png"); background-size: 11px 8px; } } #promoViewLeMis #form #submit #btnSubmitForm { width: 170px; height: 50px; background-color: #fffa00; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; display: inline-block; margin-top: 25px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 20px; line-height: 50px; color: #000000; text-align: center; cursor: pointer; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #promoViewLeMis #form #submit #btnSubmitForm:hover { background-color: #ffffff; } #promoViewLeMis #form #submit #invaildInfo { opacity: 0; margin-top: 15px; color: #ffffff; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; } #promoViewLeMis #form #emailBottom { margin: auto; margin-top: 56px; height: 20px; width: 100%; } #promoViewLeMis #form #emailBottom #lastLine { height: 90px; } #promoViewLeMis #form #emailBottom p { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 25px; } #promoViewLeMis #form #emailBottom p a { text-decoration: none; color: #fffa00; border-bottom: 1px dashed #fffa00; } /*************************************/ /* ----------- PROMO VIEW ------------*/ /*************************************/ .invalid { border: 2px solid #e6033b !important; margin-right: -4px; } /*************************************/ /* ----------- STATS VIEW ------------*/ /*************************************/ #statsView { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: none; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; background: #454545; } #statsView .statsLogo { margin: 0 auto; margin-top: 10%; width: 350px; height: 200px; background: url('../img/logo1.gif') center center no-repeat; } #statsView .statsCopy { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 20px; color: #ffffff; width: 100%; max-width: 700px; margin: 0px auto; text-align: center; margin-top: 90px; margin-bottom: 30px; } #statsView .statsHolder { margin: 0 auto; width: 100%; max-width: 1130px; margin-bottom: 100px; font-size: 0; } #statsView .statsHolder .stat { position: relative; height: 400px; width: 50%; display: inline-block; margin: 0px; padding: 0px; color: #ffffff; text-align: center; background-repeat: no-repeat; background-position: center 60px; } #statsView .statsHolder .stat.walked { background-color: #ffbc00; background-image: url("../img/stats/icon_stat_walk.png"); } #statsView .statsHolder .stat.coffees { background-color: #bc5b0d; background-image: url("../img/stats/icon_stat_coffee.png"); } #statsView .statsHolder .stat.checkins { background-color: #13bfff; background-image: url("../img/stats/icon_stat_checkin.png"); } #statsView .statsHolder .stat.beers { background-color: #963217; background-image: url("../img/stats/icon_stat_beer.png"); } #statsView .statsHolder .stat.social { background-color: #716c6b; background-image: url("../img/stats/icon_stat_social.png"); } #statsView .statsHolder .stat.seconds { background-color: #e29eb7; background-image: url("../img/stats/icon_stat_time.png"); } #statsView .statsHolder .stat.seconds h1 { font-size: 55px; line-height: 95px; } #statsView .statsHolder .stat.burgers { background-color: #009245; background-image: url('../img/stats/icon_stat_burger.png'); } #statsView .statsHolder .stat.highest { background-color: #0078c3; background-image: url('../img/stats/icon_stat_highest.png'); } #statsView .statsHolder .stat.about { background-color: #5c367d; background-image: url('../img/stats/icon_stat_quotes.png'); } #statsView .statsHolder .stat.mostRequested { background-color: #dd3d59; background-image: url('../img/stats/icon_stat_map.png'); } #statsView .statsHolder .stat.mostRequested h1 { bottom: 60px; font-size: 30px; text-transform: uppercase; } #statsView .statsHolder .stat.hugs { background-color: #603813; background-image: url('../img/stats/icon_stat_hands.png'); } #statsView .statsHolder .stat.topUser { background-color: #3a3a3a; background-image: url('../img/stats/icon_stat_trophy.png'); } #statsView .statsHolder .stat.cheese { background-color: #ffbc00; background-image: url('../img/stats/icon_stat_cheese.png'); } #statsView .statsHolder .stat.records { background-color: #bc5b0d; background-image: url('../img/stats/icon_stat_records.png'); } #statsView .statsHolder .stat.job { background-color: #21b5ec; background-image: url('../img/stats/icon_stat_job.png'); } #statsView .statsHolder .stat.beard { background-color: #963217; background-image: url('../img/stats/icon_stat_beard.png'); } #statsView .statsHolder .stat.accents { background-color: #716c6b; background-image: url('../img/stats/icon_stat_accents.png'); } #statsView .statsHolder .stat.animals { background-position: center 50px; background-color: #e29eb7; background-image: url('../img/stats/icon_stat_animals.png'); } #statsView .statsHolder .stat.kungfu { background-color: #009245; background-image: url('../img/stats/icon_stat_kungfu.png'); } #statsView .statsHolder .stat.chef { background-color: #0078c3; background-image: url('../img/stats/icon_stat_chef.png'); } #statsView .statsHolder .stat.selfie { background-color: #5c367d; background-image: url('../img/stats/icon_stat_selfie.png'); } #statsView .statsHolder .stat.flowers { background-position: center 45px; background-color: #dd3d59; background-image: url('../img/stats/icon_stat_flowers.png'); } #statsView .statsHolder .stat.dessert { background-color: #603813; background-image: url('../img/stats/icon_stat_dessert.png'); } #statsView .statsHolder .stat.marrige { background-color: #3a3a3a; background-image: url('../img/stats/icon_stat_marrige.png'); } #statsView .statsHolder .stat h1 { margin: 0px; width: 100%; text-align: center; position: absolute; bottom: 40px; margin-top: 160px; font-size: 80px; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; } #statsView .statsHolder .stat p { margin: 0px; width: 100%; text-align: center; position: absolute; bottom: 20px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; text-transform: uppercase; } /*************************************/ /* ----------- PHOTO VIEW ------------*/ /*************************************/ #photoView { display: none; } #photoView.showContent .image { height: 475px; } #photoView.showContent .slideShow .photoTitle { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #photoView.showContent .slideShow #photoButtons { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 250ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 250ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 250ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 250ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #photoView.showContent .slideShow .closePhotoBtn { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #photoView.showContent .photoBackground { opacity: 0.5; } #photoView.showImage .image img { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 1; } #photoView .image { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-color: #fff; width: 475px; height: 0px; overflow: hidden; } #photoView .image img { opacity: 0; width: 395px; height: 395px; border: 40px solid #ffffff; background-color: #fff; } #photoView .photoBackground { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #333; opacity: 0; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; display: none; } #photoView .slideShow { z-index: 1000; display: none; margin: auto; position: absolute; top: 0; left: -250px; bottom: -55px; right: 0; width: 475px; height: 485px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; } #photoView .slideShow .closePhotoBtn { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); position: absolute; width: 33px; height: 33px; top: -39px; right: -7%; cursor: pointer; } #photoView .slideShow .closePhotoBtn:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #photoView .slideShow .closePhotoBtn:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #photoView .slideShow .closePhotoBtn .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #photoView .slideShow .closePhotoBtn .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } #photoView .slideShow .closePhotoBtn .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #photoView .slideShow .photoTitle { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); float: left; width: 70%; font-size: 10px; color: #fff; text-transform: uppercase; margin-top: 5px; } #photoView .slideShow .photoTitle.hasVenue { cursor: pointer; } #photoView .slideShow .photoTitle.hasVenue:hover { color: #fffa00; } #photoView .slideShow #photoButtons { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); margin-top: 5px; font-size: 11px; float: right; color: #fffa00; } #photoView .slideShow #photoButtons .prev { display: inline-block; } #photoView .slideShow #photoButtons .prev:hover { cursor: pointer; } #photoView .slideShow #photoButtons .divider { display: inline-block; border-left: 1px dotted #c8c8c8; height: 7px; } #photoView .slideShow #photoButtons .next { display: inline-block; margin-right: -2px; } #photoView .slideShow #photoButtons .next:hover { cursor: pointer; } /*************************************/ /* ----------- MAP VIEW ------------ */ /*************************************/ #mapView { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; color: #fff; } #mapView #mapLoader { position: absolute; left: 50%; top: 50%; margin-top: -15px; margin-left: -50px; width: 100px; height: 30px; line-height: 30px; text-align: center; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; color: #c8c8c8; } #mapView #mapCanvas { transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; } #mapView #zoomControls { display: none; opacity: 0; transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; left: 20px; top: 80px; width: 30px; height: 60px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; z-index: 10; } #mapView #zoomControls .control { background-color: #222; opacity: 1; cursor: pointer; width: 30px; height: 30px; float: left; } #mapView #zoomControls .control:hover { background-color: #000; } #mapView #zoomControls .btnPlus { background-color: #222; opacity: 1; cursor: pointer; width: 30px; height: 30px; float: left; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_plus.png'); border-bottom: 1px solid #181818; } #mapView #zoomControls .btnPlus:hover { background-color: #000; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #mapView #zoomControls .btnPlus { background-image: url("../img/icon_plus@2x.png"); background-size: 10px 10px; } } #mapView #zoomControls .btnMinus { background-color: #222; opacity: 1; cursor: pointer; width: 30px; height: 30px; float: left; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_minus.png'); } #mapView #zoomControls .btnMinus:hover { background-color: #000; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #mapView #zoomControls .btnMinus { background-image: url("../img/icon_minus@2x.png"); background-size: 7px 3px; } } #mapView .livestreamThumbs { opacity: 0; } #mapView .showLSThumb { -webkit-transition: opacity 0.5s linear 3s; -moz-transition: opacity 0.5s linear 3s; -o-transition: opacity 0.5s linear 3s; -ms-transition: opacity 0.5s linear 3s; transition: opacity 0.5s linear 3s; opacity: 1; } /*************************************/ /* ----------- RCT VIEW ------------ */ /*************************************/ #rctView { display: none; color: #fff; /*------------- Video Player ------------*/ /*------------- Map Overlay ------------*/ } #rctView #videoPlayerHolder { left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; -webkit-transition: opacity 0.5s linear 3s; -moz-transition: opacity 0.5s linear 3s; -o-transition: opacity 0.5s linear 3s; -ms-transition: opacity 0.5s linear 3s; transition: opacity 0.5s linear 3s; } #rctView .videoPlayerBlocker { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } #rctView .videoPlayerBottomOverlay { position: absolute; width: 100%; left: 0px; opacity: 0.7; bottom: 30px; height: 140px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, #000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* W3C */ } #rctView #mapOverlay { position: absolute; bottom: 40px; left: 20px; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 275px; height: 170px; } #rctView #mapOverlay.onStage .mapOverlayInfo .title { transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; } #rctView #mapOverlay.onStage .mapOverlayInfo h3 { transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; } #rctView #mapOverlay.onStage .mapOverlayInfo p { transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: opacity 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; } #rctView #mapOverlay.onStage #mapOverlayHolder { transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: height 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: height 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: height 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: height 300ms cubic-bezier(0.25, 0.1, 0.25, 1); height: 170px; opacity: 1; } #rctView #mapOverlay.onStage #mapToggleBtn { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #rctView #mapOverlay #mapOverlayHolder { position: absolute; bottom: 0px; width: 275px; height: 0px; background-color: #000; float: left; border: 3px solid #fffa00; opacity: 0; overflow: hidden; } #rctView #mapOverlay #mapOverlayHolder #mapCanvas { bottom: 0px; position: absolute; width: 275px; height: 170px; } #rctView #mapOverlay .mapOverlayInfo { position: absolute; left: 295px; bottom: 0px; width: 600px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; } #rctView #mapOverlay .mapOverlayInfo.hidden .title { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); opacity: 0; } #rctView #mapOverlay .mapOverlayInfo.hidden h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; } #rctView #mapOverlay .mapOverlayInfo.hidden p { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); opacity: 0; } #rctView #mapOverlay .mapOverlayInfo .holder { overflow: hidden; position: relative; width: 100%; } #rctView #mapOverlay .mapOverlayInfo .holder.nearby { height: 12px; margin-bottom: 10px; } #rctView #mapOverlay .mapOverlayInfo .holder.name { margin-top: 6px; margin-bottom: 8px; height: 30px; } #rctView #mapOverlay .mapOverlayInfo .holder.desc { margin-top: 5px; margin-bottom: 0px; height: 16px; } #rctView #mapOverlay .mapOverlayInfo h3 { margin-bottom: 0px; margin-top: 0px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; font-size: 26px; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; position: absolute; left: 0px; top: 0px; } #rctView #mapOverlay .mapOverlayInfo .title { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); opacity: 0; position: absolute; left: 0px; top: 0px; font-size: 11px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #fffa00; text-transform: uppercase; } #rctView #mapOverlay .mapOverlayInfo p { margin-bottom: 0px; margin-top: 0px; -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); position: absolute; left: 0px; top: 0px; opacity: 0; font-size: 14px; } #rctView #mapToggleBtn { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background-size: 40px 41px; position: absolute; z-index: 200; width: 36px; height: 36px; top: -19px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; left: 259px; display: inline-block; cursor: pointer; } #rctView #mapToggleBtn:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #rctView #mapToggleBtn .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_expand_map.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #rctView #mapToggleBtn .icon { background-image: url("../img/icon_expand_map@2x.png"); background-size: 17px 17px; } } #rctView #mapToggleBtn .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } /*************************************/ /* ---------- Video View ----------- */ /*************************************/ #videoView { display: none; position: absolute; top: 0px; left: 0px; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; width: 100%; line-height: 0; margin-bottom: 90px; padding-top: 60px; background-color: #1D1D1D; } #videoView.showContent #player { opacity: 1; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView.showContent #closeBtn { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; } #videoView.showContent #videoShare #btnShare { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms; } #videoView .video { overflow: hidden; margin: 0px; display: none; display: inline-block; width: 25%; height: 25%; cursor: pointer; position: relative; } #videoView .video img { position: absolute; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView .video:hover .venueInfo .smallName { opacity: 1; } #videoView .video:hover .venueOverlay { opacity: 0; } #videoView .video:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } #videoView .video:hover .play .bg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } #videoView .video:hover .play .icon { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } #videoView .video .play { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } #videoView .video .play .bg { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid #fffa00; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } #videoView .video .play .icon { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; top: 50%; left: 50%; width: 22px; height: 25px; margin-left: -9px; margin-top: -12px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/icon_play_video.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .play .icon { background-image: url("/img/icon_play_video@2x.png"); background-size: 22px 25px; } } #videoView .video .venueOverlay { top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.4; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView .video .venueInfo { position: absolute; width: 100%; bottom: 5px; overflow: visible; } #videoView .video .venueInfo .smallName { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; overflow: hidden; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 90%; padding-left: 10%; opacity: 0.6; color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; background-position: 1% center; background-repeat: no-repeat; line-height: 18px; margin-bottom: 5px; margin-top: 8px; overflow: visible; } #videoView .video .venueInfo .smallName.none { padding-left: 2%; } #videoView .video .venueInfo .smallName.food { background-image: url('../img/venue_icons/food_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.food { background-image: url("../img/venue_icons/food_icon_venue@2x.png"); background-size: 16px 11px; } } #videoView .video .venueInfo .smallName.bars { background-image: url('../img/venue_icons/bars_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.bars { background-image: url("../img/venue_icons/bars_icon_venue@2x.png"); background-size: 11px 11px; } } #videoView .video .venueInfo .smallName.coffee { background-image: url('../img/venue_icons/coffee_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.coffee { background-image: url("../img/venue_icons/coffee_icon_venue@2x.png"); background-size: 8px 11px; } } #videoView .video .venueInfo .smallName.shop { background-image: url('../img/venue_icons/shop_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.shop { background-image: url("../img/venue_icons/shop_icon_venue@2x.png"); background-size: 8px 13px; } } #videoView .video .venueInfo .smallName.events { background-image: url('../img/venue_icons/events_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.events { background-image: url("../img/venue_icons/events_icon_venue@2x.png"); background-size: 12px 12px; } } #videoView .video .venueInfo .smallName.sights { background-image: url('../img/venue_icons/sights_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.sights { background-image: url("../img/venue_icons/sights_icon_venue@2x.png"); background-size: 13px 13px; } } #videoView .video .venueInfo .smallName.hotels { background-image: url('../img/venue_icons/hotels_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.hotels { background-image: url("../img/venue_icons/hotels_icon_venue@2x.png"); background-size: 13px 12px; } } #videoView .video .venueInfo .smallName.parks { background-image: url('../img/venue_icons/parks_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.parks { background-image: url("../img/venue_icons/parks_icon_venue@2x.png"); background-size: 11px 12px; } } #videoView .video .venueInfo .smallName.art { background-image: url('../img/venue_icons/art_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.art { background-image: url("../img/venue_icons/art_icon_venue@2x.png"); background-size: 12px 13px; } } #videoView .video .venueInfo .smallName.music { background-image: url('../img/venue_icons/music_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.music { background-image: url("../img/venue_icons/music_icon_venue@2x.png"); background-size: 11px 15px; } } #videoView .video .venueInfo .smallName.streets { background-image: url('../img/venue_icons/streets_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.streets { background-image: url("../img/venue_icons/streets_icon_venue@2x.png"); background-size: 8px 15px; } } #videoView .video .venueInfo .smallName.extras { background-image: url('../img/venue_icons/extras_icon_venue.png'); background-position: 0.98% center; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView .video .venueInfo .smallName.extras { background-image: url("../img/venue_icons/extras_icon_venue@2x.png"); background-size: 12px 12px; } } #videoView #player { opacity: 0; background-color: #000; position: fixed; left: 0px; top: 60px; display: none; z-index: 100; height: 100%; width: 100%; } #videoView #closeBtn { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); width: 33px; height: 33px; top: 48px; right: 20px; cursor: pointer; z-index: 1000; position: fixed; } #videoView #closeBtn:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #videoView #closeBtn:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #videoView #closeBtn .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #closeBtn .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } #videoView #closeBtn .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare { z-index: 1000; position: fixed; width: 170px; height: 40px; top: 48px; left: 20px; } #videoView #videoShare.open #btnShare .arrow { left: 26px; } #videoView #videoShare.open #videoShareButtons #btnFacebook { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #videoView #videoShare.open #videoShareButtons #btnTwitter { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #videoView #videoShare.open #videoShareButtons #btnEmail { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #videoView #videoShare #btnShare { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); cursor: pointer; top: 0px; left: 0px; position: absolute; width: 33px; height: 33px; } #videoView #videoShare #btnShare:hover .arrow { left: 26px; } #videoView #videoShare #btnShare .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/icon_video_share.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #btnShare .icon { background-image: url("/img/icon_video_share@2x.png"); background-size: 16px 15px; } } #videoView #videoShare #btnShare .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare #btnShare .arrow { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; left: 16px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 13px solid transparent; border-left: 14px solid #fffa00; top: 3px; } #videoView #videoShare #videoShareButtons { display: none; } #videoView #videoShare #videoShareButtons .shareButton { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); position: absolute; width: 33px; height: 33px; cursor: pointer; } #videoView #videoShare #videoShareButtons .shareButton:hover .background { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #videoView #videoShare #videoShareButtons .shareButton:hover .white { opacity: 1; } #videoView #videoShare #videoShareButtons .shareButton .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; } #videoView #videoShare #videoShareButtons .shareButton .white { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView #videoShare #videoShareButtons .shareButton .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #2f2c2c; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare #videoShareButtons #btnFacebook { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); position: absolute; width: 33px; height: 33px; cursor: pointer; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; right: 80px; } #videoView #videoShare #videoShareButtons #btnFacebook:hover .background { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #videoView #videoShare #videoShareButtons #btnFacebook:hover .white { opacity: 1; } #videoView #videoShare #videoShareButtons #btnFacebook .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; } #videoView #videoShare #videoShareButtons #btnFacebook .white { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView #videoShare #videoShareButtons #btnFacebook .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #2f2c2c; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare #videoShareButtons #btnFacebook .icon { background-image: url('/img/icon_video_facebook.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnFacebook .icon { background-image: url("/img/icon_video_facebook@2x.png"); background-size: 8px 16px; } } #videoView #videoShare #videoShareButtons #btnFacebook .white { background-image: url('/img/icon_video_facebook_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnFacebook .white { background-image: url("/img/icon_video_facebook_white@2x.png"); background-size: 8px 16px; } } #videoView #videoShare #videoShareButtons #btnTwitter { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); position: absolute; width: 33px; height: 33px; cursor: pointer; right: 40px; } #videoView #videoShare #videoShareButtons #btnTwitter:hover .background { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #videoView #videoShare #videoShareButtons #btnTwitter:hover .white { opacity: 1; } #videoView #videoShare #videoShareButtons #btnTwitter .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; } #videoView #videoShare #videoShareButtons #btnTwitter .white { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView #videoShare #videoShareButtons #btnTwitter .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #2f2c2c; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare #videoShareButtons #btnTwitter .icon { background-image: url('/img/icon_video_twitter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnTwitter .icon { background-image: url("/img/icon_video_twitter@2x.png"); background-size: 19px 16px; } } #videoView #videoShare #videoShareButtons #btnTwitter .white { background-image: url('/img/icon_video_twitter_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnTwitter .white { background-image: url("/img/icon_video_twitter_white@2x.png"); background-size: 8px 16px; } } #videoView #videoShare #videoShareButtons #btnEmail { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); position: absolute; width: 33px; height: 33px; cursor: pointer; right: 0px; } #videoView #videoShare #videoShareButtons #btnEmail:hover .background { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #videoView #videoShare #videoShareButtons #btnEmail:hover .white { opacity: 1; } #videoView #videoShare #videoShareButtons #btnEmail .icon { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; } #videoView #videoShare #videoShareButtons #btnEmail .white { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videoView #videoShare #videoShareButtons #btnEmail .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #2f2c2c; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #videoView #videoShare #videoShareButtons #btnEmail .icon { background-image: url('/img/icon_video_email.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnEmail .icon { background-image: url("/img/icon_video_email@2x.png"); background-size: 15px 15px; } } #videoView #videoShare #videoShareButtons #btnEmail .white { background-image: url('/img/icon_video_email_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #videoView #videoShare #videoShareButtons #btnEmail .white { background-image: url("/img/icon_video_email_white@2x.png"); background-size: 8px 16px; } } /*************************************/ /* ----------- Venue VIEW ------------*/ /*************************************/ #venuesView { position: absolute; top: 0px; left: 0px; display: none; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; width: 100%; height: 100%; padding-top: 60px; background-color: #1D1D1D; } #venuesView .venues { line-height: 0; margin-bottom: 90px; } #venuesView #noVenueResults { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #venuesView #noVenueResults p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; color: #ffffff; opacity: 0.5; font-size: 16px; position: absolute; width: 167px; height: 50px; top: 50%; margin-top: -25px; left: 50%; margin-left: -80px; } #venuesView .venue { overflow: hidden; margin: 0px; display: none; display: inline-block; width: 25%; cursor: pointer; position: relative; } #venuesView .venue img { width: 100%; max-height: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #venuesView .venue:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #venuesView .venue:hover .venueInfo .smallName { opacity: 1; margin-left: -8%; } #venuesView .venue:hover .venueInfo h3 { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); padding-left: 2%; } #venuesView .venue:hover .venueOverlay { opacity: 0; } #venuesView .venue .venueShadow { position: absolute; width: 100%; height: 25%; left: 0px; bottom: 0px; opacity: 0.8; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, #000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); /* W3C */ } #venuesView .venue .venueOverlay { top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.4; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #venuesView .venue .venueInfo { position: absolute; width: 100%; bottom: 5px; overflow: visible; } #venuesView .venue .venueInfo .smallName { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; overflow: hidden; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 90%; padding-left: 10%; opacity: 0.6; color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; background-position: 1% center; background-repeat: no-repeat; line-height: 18px; margin-bottom: 5px; margin-top: 8px; overflow: visible; } #venuesView .venue .venueInfo .smallName.food { background-image: url('../img/venue_icons/food_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.food { background-image: url("../img/venue_icons/food_icon_venue@2x.png"); background-size: 16px 11px; } } #venuesView .venue .venueInfo .smallName.bars { background-image: url('../img/venue_icons/bars_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.bars { background-image: url("../img/venue_icons/bars_icon_venue@2x.png"); background-size: 11px 11px; } } #venuesView .venue .venueInfo .smallName.coffee { background-image: url('../img/venue_icons/coffee_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.coffee { background-image: url("../img/venue_icons/coffee_icon_venue@2x.png"); background-size: 8px 11px; } } #venuesView .venue .venueInfo .smallName.shop { background-image: url('../img/venue_icons/shop_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.shop { background-image: url("../img/venue_icons/shop_icon_venue@2x.png"); background-size: 8px 13px; } } #venuesView .venue .venueInfo .smallName.events { background-image: url('../img/venue_icons/events_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.events { background-image: url("../img/venue_icons/events_icon_venue@2x.png"); background-size: 12px 12px; } } #venuesView .venue .venueInfo .smallName.sights { background-image: url('../img/venue_icons/sights_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.sights { background-image: url("../img/venue_icons/sights_icon_venue@2x.png"); background-size: 13px 13px; } } #venuesView .venue .venueInfo .smallName.hotels { background-image: url('../img/venue_icons/hotels_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.hotels { background-image: url("../img/venue_icons/hotels_icon_venue@2x.png"); background-size: 13px 12px; } } #venuesView .venue .venueInfo .smallName.parks { background-image: url('../img/venue_icons/parks_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.parks { background-image: url("../img/venue_icons/parks_icon_venue@2x.png"); background-size: 11px 12px; } } #venuesView .venue .venueInfo .smallName.art { background-image: url('../img/venue_icons/art_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.art { background-image: url("../img/venue_icons/art_icon_venue@2x.png"); background-size: 12px 13px; } } #venuesView .venue .venueInfo .smallName.music { background-image: url('../img/venue_icons/music_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.music { background-image: url("../img/venue_icons/music_icon_venue@2x.png"); background-size: 11px 15px; } } #venuesView .venue .venueInfo .smallName.streets { background-image: url('../img/venue_icons/streets_icon_venue.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.streets { background-image: url("../img/venue_icons/streets_icon_venue@2x.png"); background-size: 8px 15px; } } #venuesView .venue .venueInfo .smallName.extras { background-image: url('../img/venue_icons/extras_icon_venue.png'); background-position: 0.98% center; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venuesView .venue .venueInfo .smallName.extras { background-image: url("../img/venue_icons/extras_icon_venue@2x.png"); background-size: 12px 12px; } } #venuesView .venue .venueInfo h3 { width: 90%; padding-left: 2%; color: #fffa00; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 11px; margin-bottom: 0px; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } /*************************************/ /* ----------- LANDING VIEW --------- */ /*************************************/ .side { height: 100%; position: absolute; } .rightSide { height: 100%; position: absolute; width: 45%; padding-right: 2%; min-width: 500px; right: 0px; } .leftSide { height: 100%; position: absolute; width: 50%; left: 0px; } .leftSide img { position: absolute; } #landingView { text-align: center; display: none; color: #fff; } #landingView .leftSide img { opacity: 0; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingView.hideContent .landingLogo { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 0; } #landingView.hideContent .landingCopy { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; opacity: 0; } #landingView.hideContent .leftSide img { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; } #landingView.hideContent .landingButtons { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; } #landingView.hideContent #btnTrailer { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingView.hideContent .trailerCaption { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingView.showContent .landingLogo { opacity: 1; } #landingView.showContent .landingCopy { opacity: 1; } #landingView.showContent .landingButtons { opacity: 1; } #landingView.showContent #btnTrailer { opacity: 1; } #landingView.showContent .leftSide img { opacity: 1; } #landingView.showContent .trailerCaption { opacity: 1; } #landingView .landingContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingView .landingBackground { -webkit-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -moz-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -ms-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -o-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-color: #161616; } #landingView .landingLogo { transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; margin: 0 auto; margin-top: 10%; width: 350px; height: 200px; background-image: url('../img/logo1.gif'); background-position: center center; background-repeat: no-repeat; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingView .landingLogo { background-image: url("../img/logo1@2x.gif"); background-size: 340px 200px; } } #landingView .landingCopy { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; opacity: 0; width: 100%; max-width: 550px; text-align: center; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 23px; margin: 20px auto; } #landingView .landingButtons { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms; opacity: 0; margin-top: 35px; height: 40px; position: relative; } #landingView .landingButtons .loading { color: #fffa00; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; } #landingView .landingButtons .loadingFin { opacity: 1 !important; top: 0px; } #landingView .landingButtons #btnContinue { top: 10px; position: absolute; text-align: center; width: 100%; transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingView .landingButtons #btnContinue a { color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 25px; border-bottom: 2px dashed #fffa00; cursor: pointer; } #landingView .landingButtons #btnContinue a:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #landingView #btnTrailer { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; opacity: 0; cursor: pointer; width: 105px; height: 80px; margin: 0 auto; margin-top: 20px; position: relative; } #landingView #btnTrailer:hover .imgOverlay { opacity: 0.4; } #landingView #btnTrailer:hover .play { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #landingView #btnTrailer .background { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/img_preview_thumb.jpg'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingView #btnTrailer .background { background-image: url("../img/img_preview_thumb@2x.jpg"); background-size: 104px 80px; } } #landingView #btnTrailer .imgOverlay { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background-color: #000000; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingView #btnTrailer .imgBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: 2px solid #ffffff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #landingView #btnTrailer .play { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_play.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingView #btnTrailer .play { background-image: url("../img/icon_play@2x.png"); background-size: 20px 24px; } } #landingView .trailerCaption { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 650ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 650ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 650ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 650ms; opacity: 0; margin-top: 5px; color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 13px; text-transform: uppercase; } /*************************************/ /* ----------- LANDING POST --------- */ /*************************************/ #landingPost { z-index: 101; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; display: none; color: #fff; } #landingPost.hideContent .landingLogo { transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 75ms; -moz-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 75ms; -webkit-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 75ms; -o-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 75ms; opacity: 0; } #landingPost.hideContent .landingCopy { transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -moz-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -webkit-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -o-transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; opacity: 0; } #landingPost.hideContent .leftSide img { transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -moz-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -webkit-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -o-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; opacity: 0; } #landingPost.hideContent #btnViewHighlights { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -moz-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -webkit-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -o-transition: all 400ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; } #landingPost.showContent .landingBlack { transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0.8; } #landingPost.showContent .postLandingBg { opacity: 1; transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 1400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingPost.showContent .landingLogo { opacity: 1; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } #landingPost.showContent .landingCopy { opacity: 1; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; } #landingPost.showContent .leftSide img { opacity: 1; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingPost.showContent #btnViewHighlights { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; } #landingPost.hideMe .landingBlack { transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -moz-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -webkit-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -o-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; opacity: 0 !important; } #landingPost.hideMe .postLandingBg { transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -moz-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -webkit-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -o-transition: all 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; opacity: 0 !important; } #landingPost .landingContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingPost .landingBlack { -webkit-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -moz-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -ms-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -o-transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; transition: all 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-color: #161616; } #landingPost .postLandingBg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #landingPost .landingLogo { margin: 0 auto; margin-top: 40px; width: 350px; height: 200px; background: url('../img/logo1.gif') center center no-repeat; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } #landingPost .btnViewHighlights { clear: both; color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; margin: 0px auto 30px auto; font-size: 28px; border-bottom: 2px dashed #fffa00; cursor: pointer; } #landingPost .btnViewHighlights:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #landingPost .landingCopy { width: 100%; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 20px; margin-top: 38px; margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; } /*************************************/ /* ----------- LANDING TEASER --------- */ /*************************************/ #landingTeaser { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; display: none; color: #fff; } #landingTeaser .leftSide img { opacity: 0; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingTeaser.showContent .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #landingTeaser.showContent .landingLogo { opacity: 1; } #landingTeaser.showContent .landingCopy { opacity: 1; } #landingTeaser.showContent .leftSide img { opacity: 1; } #landingTeaser.showContent .landingModule { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #landingTeaser.hideContent .landingLogo { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingTeaser.hideContent .landingCopy { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingTeaser.hideContent .leftSide img { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingTeaser.hideContent #liveIn { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingTeaser.hideContent #schedule { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingTeaser.hideContent #trailer { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingTeaser.hideContent .landingBlack { opacity: 0; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #landingTeaser .landingContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingTeaser .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-color: #161616; } #landingTeaser .landingBackground { top: 0px; left: 0px; width: 100%; height: 100%; background: url('../img/landing_bg_large.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; } #landingTeaser .standByCopy { text-align: center; margin-bottom: 20px; } #landingTeaser .standByCopy a { color: #fffa00; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; display: inline-block; font-size: 20px; border-bottom: 2px dashed #fffa00; } #landingTeaser .landingLogo { transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; margin: 0 auto; margin-top: 10%; width: 350px; height: 200px; background-image: url('../img/logo1.gif'); background-position: center center; background-repeat: no-repeat; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser .landingLogo { background-image: url("../img/logo1@2x.gif"); background-size: 340px 200px; } } #landingTeaser .btnViewHighlights { clear: both; color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; margin: 0px auto 30px auto; font-size: 28px; border-bottom: 2px dashed #fffa00; cursor: pointer; } #landingTeaser .btnViewHighlights:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #landingTeaser .landingCopy { opacity: 0; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; width: 100%; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 20px; margin-top: 38px; margin-bottom: 30px; max-width: 520px; margin-left: auto; margin-right: auto; } #landingTeaser .landingModule { position: relative; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); vertical-align: top; width: 150px; height: 120px; display: inline-block; } #landingTeaser .landingModule h1 { font-size: 15px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #fffa00; text-transform: uppercase; margin: 0px; } #landingTeaser #liveIn { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; background: url('../img/module_divider.png') right center no-repeat; width: 190px; } #landingTeaser #liveIn .section { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 16px; left: -14px; position: relative; } #landingTeaser #liveIn .section div { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin: 10px 0px 5px 0px; position: relative; float: left; text-align: center; } #landingTeaser #liveIn .section div.hours { width: 70px; text-align: right; } #landingTeaser #liveIn .section div.minutes { width: 46px; text-align: center; } #landingTeaser #liveIn .section div.seconds { width: 46px; text-align: center; } #landingTeaser #liveIn .section div.colon { width: 8px; } #landingTeaser #liveIn .section .timeLabels { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; width: 100%; } #landingTeaser #liveIn .section .timeLabels.hours { width: 40px; float: right; text-align: center; } #landingTeaser #schedule { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; } #landingTeaser #schedule .moduleButton { position: relative; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; float: left; width: 50%; height: 70%; line-height: 165px; } #landingTeaser #schedule .moduleButton .icon { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; } #landingTeaser #schedule .moduleButton .content { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingTeaser #schedule #btnView { cursor: pointer; } #landingTeaser #schedule #btnView:hover .icon .iconBackground { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } #landingTeaser #schedule #btnView .icon { overflow: visible; } #landingTeaser #schedule #btnView .icon .iconBackground { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_view.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #schedule #btnView .icon .iconBackground { background-image: url("../img/icon_view@2x.png"); background-size: 41px 41px; } } #landingTeaser #schedule #btnDownload { cursor: pointer; } #landingTeaser #schedule #btnDownload:hover .icon .arrow { display: none; } #landingTeaser #schedule #btnDownload:hover .icon .arrowTop { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 1; top: -10px; } #landingTeaser #schedule #btnDownload .icon { margin-top: -19px; } #landingTeaser #schedule #btnDownload .icon .iconBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_border.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #schedule #btnDownload .icon .iconBorder { background-image: url("../img/icon_landing_download_border@2x.png"); background-size: 41px 38px; } } #landingTeaser #schedule #btnDownload .icon .arrow { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #schedule #btnDownload .icon .arrow { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } #landingTeaser #schedule #btnDownload .icon .arrowTop { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -40px; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #schedule #btnDownload .icon .arrowTop { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } #landingTeaser #schedule .downloadLink { text-decoration: none; color: #FFFFFF; } #landingTeaser #trailer { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; background: url('../img/module_divider.png') left center no-repeat; } #landingTeaser #trailer #btnTrailer { cursor: pointer; width: 105px; height: 80px; margin: 0 auto; margin-top: 10px; position: absolute; left: 36px; } #landingTeaser #trailer #btnTrailer:hover .imgOverlay { opacity: 0.4; } #landingTeaser #trailer #btnTrailer:hover .play { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #landingTeaser #trailer #btnTrailer .background { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/img_preview_thumb.jpg'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #trailer #btnTrailer .background { background-image: url("../img/img_preview_thumb@2x.jpg"); background-size: 104px 80px; } } #landingTeaser #trailer #btnTrailer .imgOverlay { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background-color: #000000; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingTeaser #trailer #btnTrailer .imgBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: 2px solid #fffa00; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #landingTeaser #trailer #btnTrailer .play { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_play.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingTeaser #trailer #btnTrailer .play { background-image: url("../img/icon_play@2x.png"); background-size: 20px 24px; } } .infoLanding { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; display: none; color: #fff; } .infoLanding .leftSide img { opacity: 0; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } .infoLanding.showContent .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .infoLanding.showContent .landingLogo { opacity: 1; } .infoLanding.showContent .landingCopy { opacity: 1; } .infoLanding.showContent .leftSide img { opacity: 1; } .infoLanding.showContent .landingModule { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .infoLanding.hideContent .landingLogo { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } .infoLanding.hideContent .landingCopy { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } .infoLanding.hideContent .leftSide img { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } .infoLanding.hideContent #liveIn { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .infoLanding.hideContent #schedule { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .infoLanding.hideContent #trailer { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .infoLanding.hideContent .landingBlack { opacity: 0; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } .infoLanding .landingContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .infoLanding .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-color: #161616; } .infoLanding .landingBackground { top: 0px; left: 0px; width: 100%; height: 100%; background: url('../img/landing_bg_large.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; } .infoLanding .standByCopy { text-align: center; margin-bottom: 20px; } .infoLanding .standByCopy a { color: #fffa00; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; display: inline-block; font-size: 20px; border-bottom: 2px dashed #fffa00; } .infoLanding .landingLogo { transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; margin: 0 auto; margin-top: 10%; width: 350px; height: 200px; background-image: url('../img/logo1.gif'); background-position: center center; background-repeat: no-repeat; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding .landingLogo { background-image: url("../img/logo1@2x.gif"); background-size: 340px 200px; } } .infoLanding .btnViewHighlights { clear: both; color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; margin: 0px auto 30px auto; font-size: 28px; border-bottom: 2px dashed #fffa00; cursor: pointer; } .infoLanding .btnViewHighlights:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } .infoLanding .landingCopy { opacity: 0; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; width: 100%; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 20px; margin-top: 38px; margin-bottom: 30px; max-width: 520px; margin-left: auto; margin-right: auto; } .infoLanding .landingModule { position: relative; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); vertical-align: top; width: 150px; height: 120px; display: inline-block; } .infoLanding .landingModule h1 { font-size: 15px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #fffa00; text-transform: uppercase; margin: 0px; } .infoLanding #liveIn { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; background: url('../img/module_divider.png') right center no-repeat; width: 190px; } .infoLanding #liveIn .section { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 16px; left: -14px; position: relative; } .infoLanding #liveIn .section div { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin: 10px 0px 5px 0px; position: relative; float: left; text-align: center; } .infoLanding #liveIn .section div.hours { width: 70px; text-align: right; } .infoLanding #liveIn .section div.minutes { width: 46px; text-align: center; } .infoLanding #liveIn .section div.seconds { width: 46px; text-align: center; } .infoLanding #liveIn .section div.colon { width: 8px; } .infoLanding #liveIn .section .timeLabels { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; width: 100%; } .infoLanding #liveIn .section .timeLabels.hours { width: 40px; float: right; text-align: center; } .infoLanding #schedule { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; } .infoLanding #schedule .moduleButton { position: relative; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; float: left; width: 50%; height: 70%; line-height: 165px; } .infoLanding #schedule .moduleButton .icon { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; } .infoLanding #schedule .moduleButton .content { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .infoLanding #schedule #btnView { cursor: pointer; } .infoLanding #schedule #btnView:hover .icon .iconBackground { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .infoLanding #schedule #btnView .icon { overflow: visible; } .infoLanding #schedule #btnView .icon .iconBackground { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_view.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #schedule #btnView .icon .iconBackground { background-image: url("../img/icon_view@2x.png"); background-size: 41px 41px; } } .infoLanding #schedule #btnDownload { cursor: pointer; } .infoLanding #schedule #btnDownload:hover .icon .arrow { display: none; } .infoLanding #schedule #btnDownload:hover .icon .arrowTop { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 1; top: -10px; } .infoLanding #schedule #btnDownload .icon { margin-top: -19px; } .infoLanding #schedule #btnDownload .icon .iconBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_border.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #schedule #btnDownload .icon .iconBorder { background-image: url("../img/icon_landing_download_border@2x.png"); background-size: 41px 38px; } } .infoLanding #schedule #btnDownload .icon .arrow { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #schedule #btnDownload .icon .arrow { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } .infoLanding #schedule #btnDownload .icon .arrowTop { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -40px; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #schedule #btnDownload .icon .arrowTop { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } .infoLanding #schedule .downloadLink { text-decoration: none; color: #FFFFFF; } .infoLanding #trailer { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; background: url('../img/module_divider.png') left center no-repeat; } .infoLanding #trailer #btnTrailer { cursor: pointer; width: 105px; height: 80px; margin: 0 auto; margin-top: 10px; position: absolute; left: 36px; } .infoLanding #trailer #btnTrailer:hover .imgOverlay { opacity: 0.4; } .infoLanding #trailer #btnTrailer:hover .play { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .infoLanding #trailer #btnTrailer .background { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/img_preview_thumb.jpg'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #trailer #btnTrailer .background { background-image: url("../img/img_preview_thumb@2x.jpg"); background-size: 104px 80px; } } .infoLanding #trailer #btnTrailer .imgOverlay { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background-color: #000000; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } .infoLanding #trailer #btnTrailer .imgBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: 2px solid #fffa00; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .infoLanding #trailer #btnTrailer .play { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_play.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .infoLanding #trailer #btnTrailer .play { background-image: url("../img/icon_play@2x.png"); background-size: 20px 24px; } } /*************************************/ /* ---------- LANDING POST NEW --------- */ /*************************************/ #landingPostNew { display: none; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; text-transform: uppercase; } #landingPostNew.showContent #content #landingLogo { opacity: 1; transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } #landingPostNew.showContent #content #landingBtn { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #landingPostNew.showContent #content .explore { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; } #landingPostNew.showContent #content .buttons #btnLandingMap { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.showContent #content .buttons #btnLandingVenues { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 450ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.showContent #content .buttons #btnLandingVideos { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.showContent #content .buttons #btnLandingStats { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.showContent #content .buttons #btnLandingWin { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.hideContent #content #landingLogo { opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; } #landingPostNew.hideContent #content #landingBtn { opacity: 0; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; } #landingPostNew.hideContent #content .explore { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #landingPostNew.hideContent #content .buttons #btnLandingMap { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.hideContent #content .buttons #btnLandingVenues { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.hideContent #content .buttons #btnLandingVideos { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms, color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.hideContent #content .buttons #btnLandingStats { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew.hideContent #content .buttons #btnLandingWin { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -moz-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1), -o-transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1), color 300ms cubic-bezier(0.25, 0.1, 0.25, 1); } #landingPostNew #landingVideoContainer { position: absolute; width: 100%; height: 100%; } #landingPostNew .landingBlack { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: black; opacity: 1; } #landingPostNew #content { text-align: center; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingPostNew #content #landingLogo { display: inline-block; margin-top: 50px; width: 100%; height: 96px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/landing_logo_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content #landingLogo { background-image: url("/img/landing_logo_new@2x.png"); background-size: 683px 96px; } } #landingPostNew #content #landingBtn { position: relative; cursor: pointer; margin-top: 30px; display: inline-block; width: 150px; height: 150px; } #landingPostNew #content #landingBtn .bg { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #landingPostNew #content #landingBtn .play { transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; top: 50%; left: 50%; width: 22px; height: 24px; margin-left: -11px; margin-top: -12px; background-position: center center; background-repeat: no-repeat; background-image: url('/img/landing_play.png'); -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content #landingBtn .play { background-image: url("/img/landing_play@2x.png"); background-size: 22px 24px; } } #landingPostNew #content #landingBtn p { transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; letter-spacing: 1px; color: #fffa00; font-size: 10px; } #landingPostNew #content #landingBtn p.large { font-size: 27px; margin-top: 53px; margin-bottom: -7px; } #landingPostNew #content #landingBtn:hover .bg { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } #landingPostNew #content #landingBtn:hover p { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } #landingPostNew #content #landingBtn:hover .play { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #landingPostNew #content .explore { position: absolute; left: 50%; margin-left: -122px; width: 245px; height: 50px; color: white; font-size: 18px; bottom: 80px; border-bottom: 1px dashed white; } #landingPostNew #content .buttons { width: 580px; height: 40px; left: 50%; position: absolute; bottom: 40px; margin-left: -270px; text-align: center; } #landingPostNew #content .buttons .landingBtn { position: relative; cursor: pointer; color: #fffa00; width: 128px; display: inline-block; height: 40px; line-height: 40px; font-size: 12px; text-align: left; text-indent: 50px; } #landingPostNew #content .buttons .landingBtn:hover { color: #ffffff; } #landingPostNew #content .buttons .landingBtn:hover .white { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } #landingPostNew #content .buttons .landingBtn .white { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-repeat: no-repeat; background-position: 10px center; width: 40px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } #landingPostNew #content .buttons .landingBtn .yellow { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-repeat: no-repeat; background-position: 10px center; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; width: 40px; } #landingPostNew #content .buttons .landingBtn#btnLandingMap { margin-left: -38px; width: 107px; } #landingPostNew #content .buttons .landingBtn#btnLandingMap .yellow { background-image: url('/img/icon_map_landing_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingMap .yellow { background-image: url("/img/icon_map_landing_yellow@2x.png"); background-size: 28px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingMap .white { background-image: url('/img/icon_map_landing_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingMap .white { background-image: url("/img/icon_map_landing_white@2x.png"); background-size: 28px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingVideos { width: 127px; } #landingPostNew #content .buttons .landingBtn#btnLandingVideos .yellow { background-image: url('/img/icon_videos_landing_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingVideos .yellow { background-image: url("/img/icon_videos_landing_yellow@2x.png"); background-size: 28px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingVideos .white { background-image: url('/img/icon_videos_landing_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingVideos .white { background-image: url("/img/icon_videos_landing_white@2x.png"); background-size: 28px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingVenues { text-indent: 53px; width: 135px; } #landingPostNew #content .buttons .landingBtn#btnLandingVenues .yellow { background-image: url('/img/icon_venues_landing_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingVenues .yellow { background-image: url("/img/icon_venues_landing_yellow@2x.png"); background-size: 30px 26px; } } #landingPostNew #content .buttons .landingBtn#btnLandingVenues .white { background-image: url('/img/icon_venues_landing_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingVenues .white { background-image: url("/img/icon_venues_landing_white@2x.png"); background-size: 30px 26px; } } #landingPostNew #content .buttons .landingBtn#btnLandingStats { text-indent: 51px; width: 110px; } #landingPostNew #content .buttons .landingBtn#btnLandingStats .yellow { background-image: url('/img/icon_stats_landing_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingStats .yellow { background-image: url("/img/icon_stats_landing_yellow@2x.png"); background-size: 30px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingStats .white { background-image: url('/img/icon_stats_landing_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingStats .white { background-image: url("/img/icon_stats_landing_white@2x.png"); background-size: 30px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingWin { text-indent: 51px; width: 110px; } #landingPostNew #content .buttons .landingBtn#btnLandingWin .yellow { background-image: url('/img/icon_lemis_landing_yellow.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingWin .yellow { background-image: url("/img/icon_lemis_landing_yellow@2x.png"); background-size: 32px 27px; } } #landingPostNew #content .buttons .landingBtn#btnLandingWin .white { background-image: url('/img/icon_lemis_landing_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingPostNew #content .buttons .landingBtn#btnLandingWin .white { background-image: url("/img/icon_lemis_landing_white@2x.png"); background-size: 32px 27px; } } /*************************************/ /* ---------- LANDING DOWN --------- */ /*************************************/ #landingDown { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; display: none; color: #fff; } #landingDown .leftSide img { opacity: 0; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingDown.showContent .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #landingDown.showContent .landingLogo { opacity: 1; } #landingDown.showContent .landingCopy { opacity: 1; } #landingDown.showContent .leftSide img { opacity: 1; } #landingDown.showContent .landingModule { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #landingDown.hideContent .landingLogo { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingDown.hideContent .landingCopy { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingDown.hideContent .leftSide img { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #landingDown.hideContent #liveIn { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingDown.hideContent #schedule { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingDown.hideContent #trailer { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #landingDown.hideContent .landingBlack { opacity: 0; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } #landingDown .landingContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingDown .landingBlack { transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-color: #161616; } #landingDown .landingBackground { top: 0px; left: 0px; width: 100%; height: 100%; background: url('../img/landing_bg_large.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; } #landingDown .standByCopy { text-align: center; margin-bottom: 20px; } #landingDown .standByCopy a { color: #fffa00; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; display: inline-block; font-size: 20px; border-bottom: 2px dashed #fffa00; } #landingDown .landingLogo { transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; margin: 0 auto; margin-top: 10%; width: 350px; height: 200px; background-image: url('../img/logo1.gif'); background-position: center center; background-repeat: no-repeat; -webkit-transform: translateX(7px); -moz-transform: translateX(7px); -ms-transform: translateX(7px); -o-transform: translateX(7px); transform: translateX(7px); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown .landingLogo { background-image: url("../img/logo1@2x.gif"); background-size: 340px 200px; } } #landingDown .btnViewHighlights { clear: both; color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; margin: 0px auto 30px auto; font-size: 28px; border-bottom: 2px dashed #fffa00; cursor: pointer; } #landingDown .btnViewHighlights:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #landingDown .landingCopy { opacity: 0; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; width: 100%; text-align: center; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 20px; margin-top: 38px; margin-bottom: 30px; max-width: 520px; margin-left: auto; margin-right: auto; } #landingDown .landingModule { position: relative; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); vertical-align: top; width: 150px; height: 120px; display: inline-block; } #landingDown .landingModule h1 { font-size: 15px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #fffa00; text-transform: uppercase; margin: 0px; } #landingDown #liveIn { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; background: url('../img/module_divider.png') right center no-repeat; width: 190px; } #landingDown #liveIn .section { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 16px; left: -14px; position: relative; } #landingDown #liveIn .section div { font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin: 10px 0px 5px 0px; position: relative; float: left; text-align: center; } #landingDown #liveIn .section div.hours { width: 70px; text-align: right; } #landingDown #liveIn .section div.minutes { width: 46px; text-align: center; } #landingDown #liveIn .section div.seconds { width: 46px; text-align: center; } #landingDown #liveIn .section div.colon { width: 8px; } #landingDown #liveIn .section .timeLabels { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; width: 100%; } #landingDown #liveIn .section .timeLabels.hours { width: 40px; float: right; text-align: center; } #landingDown #schedule { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 550ms; } #landingDown #schedule .moduleButton { position: relative; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; float: left; width: 50%; height: 70%; line-height: 165px; } #landingDown #schedule .moduleButton .icon { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; } #landingDown #schedule .moduleButton .content { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #landingDown #schedule #btnView { cursor: pointer; } #landingDown #schedule #btnView:hover .icon .iconBackground { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } #landingDown #schedule #btnView .icon { overflow: visible; } #landingDown #schedule #btnView .icon .iconBackground { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_view.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #schedule #btnView .icon .iconBackground { background-image: url("../img/icon_view@2x.png"); background-size: 41px 41px; } } #landingDown #schedule #btnDownload { cursor: pointer; } #landingDown #schedule #btnDownload:hover .icon .arrow { display: none; } #landingDown #schedule #btnDownload:hover .icon .arrowTop { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 1; top: -10px; } #landingDown #schedule #btnDownload .icon { margin-top: -19px; } #landingDown #schedule #btnDownload .icon .iconBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_border.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #schedule #btnDownload .icon .iconBorder { background-image: url("../img/icon_landing_download_border@2x.png"); background-size: 41px 38px; } } #landingDown #schedule #btnDownload .icon .arrow { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #schedule #btnDownload .icon .arrow { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } #landingDown #schedule #btnDownload .icon .arrowTop { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_landing_download_arrow.png'); top: -40px; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #schedule #btnDownload .icon .arrowTop { background-image: url("../img/icon_landing_download_arrow@2x.png"); background-size: 19px 33px; } } #landingDown #schedule .downloadLink { text-decoration: none; color: #FFFFFF; } #landingDown #trailer { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; background: url('../img/module_divider.png') left center no-repeat; } #landingDown #trailer #btnTrailer { cursor: pointer; width: 105px; height: 80px; margin: 0 auto; margin-top: 10px; position: absolute; left: 36px; } #landingDown #trailer #btnTrailer:hover .imgOverlay { opacity: 0.4; } #landingDown #trailer #btnTrailer:hover .play { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #landingDown #trailer #btnTrailer .background { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/img_preview_thumb.jpg'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #trailer #btnTrailer .background { background-image: url("../img/img_preview_thumb@2x.jpg"); background-size: 104px 80px; } } #landingDown #trailer #btnTrailer .imgOverlay { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; background-color: #000000; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingDown #trailer #btnTrailer .imgBorder { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: 2px solid #fffa00; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #landingDown #trailer #btnTrailer .play { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_play.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #landingDown #trailer #btnTrailer .play { background-image: url("../img/icon_play@2x.png"); background-size: 20px 24px; } } #landingDown .leftSide { top: 0px; } #landingDown .leftSide img { opacity: 0; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingDown .rightSide { top: 0px; } #landingDown.showContent .btnViewHighlights { opacity: 1; } #landingDown.hideContent .btnViewHighlights { opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #landingDown .btnViewHighlights { opacity: 0; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; clear: both; color: #fffa00; display: inline-block; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; text-align: center; margin: 0px auto 30px auto; font-size: 28px; border-bottom: 2px dashed #fffa00; cursor: pointer; } #landingDown .btnViewHighlights:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #landingDown #landingVideoContainer { width: 100%; height: 100%; } /***************************************************************************************************************/ /* ----------- TABS ------------*/ /***************************************************************************************************************/ .btnCloseTab { z-index: 500; left: 5px; top: 40px; width: 36px; height: 36px; position: absolute; cursor: pointer; } .btnCloseTab:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .btnCloseTab:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .btnCloseTab .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .btnCloseTab .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } .btnCloseTab .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } .btnToggleTab { left: 7px; top: 40px; width: 36px; height: 36px; position: absolute; display: none; cursor: pointer; transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; } .btnToggleTab:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .btnToggleTab:hover .icon { -webkit-animation: 'leftArrow' 300ms 1 ease-out; -moz-animation: 'leftArrow' 300ms 1 ease-out; -o-animation: 'leftArrow' 300ms 1 ease-out; } .btnToggleTab .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } .btnToggleTab .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_btn_toggle.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .btnToggleTab .icon { background-image: url("../img/icon_btn_toggle@2x.png"); background-size: 9px 14px; } } .mapOverlay { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; right: -350px; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; z-index: 0; position: absolute; top: 60px; height: 87%; padding-left: 25px; width: 300px; } .mapOverlay.toggleTab { right: -275px !important; } .mapOverlay.toggleTab .btnToggleTab { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .mapOverlay.activeTab { right: 0px; } .videoOverlay { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; z-index: 1000; position: absolute; right: -350px; top: 60px; height: 87%; padding-left: 25px; width: 300px; } .videoOverlay.toggleTab { right: -275px; } .videoOverlay.toggleTab .btnToggleTab { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .videoOverlay.activeTab { right: 0px; opacity: 1; } /*************************************/ /* -------- LOCATION INFO ---------- */ /*************************************/ #locationInfo { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 11px; line-height: 14px; color: #fff; overflow-y: hidden; overflow-x: visible; } #locationInfo .btnCloseTab { margin-top: -17px; } #locationInfo .carousel { position: relative; width: 160px; height: 160px; overflow: hidden; border: 2px solid #fffa00; margin-top: 20px; margin-left: 10%; background-color: #000; } #locationInfo .carousel .carouselContent { transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 700ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; left: 0px; top: 0px; height: 160px; } #locationInfo .carousel .carouselContent img { cursor: pointer; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; float: left; width: 160px; height: 160px; transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-perspective: 800; -o-perspective: 800; -moz-perspective: 800; perspective: 800; } #locationInfo .carousel .carouselContent img.offRight { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } #locationInfo .carousel .carouselContent img.offLeft { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } #locationInfo .carousel .carouselContent img.activeCarouselItem { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } #locationInfo .carouselButton { color: #fffa00; display: inline-block; width: 36px; text-align: center; cursor: pointer; } #locationInfo .carouselButton.disabled { color: #c8c8c8; cursor: auto; opacity: 0.75; } #locationInfo #btnCarouselPrev { border-right: 1px dotted #404040; margin-left: 39px; } #locationInfo #btnCarouselNext { /*cursor:pointer;*/ } #locationInfo .count { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 10px; color: #969696; margin-left: 10%; width: 50px; } #locationInfo .count.disabled { color: #c8c8c8; } #locationInfo .btnSend { cursor: pointer; color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; height: 17px; text-align: center; text-transform: uppercase; border-bottom: 2px dashed #fffa00; margin: 25px 0px 15px 10%; display: none; } #locationInfo .btnSend:hover { color: #ffffff; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; border-color: #ffffff; } #locationInfo .alreadyCheckedIn { display: none; } #locationInfo .section { padding-left: 10%; padding-right: 10%; width: 70%; padding-bottom: 15px; padding-top: 15px; border-bottom: 1px dotted #404040; background-repeat: no-repeat; } #locationInfo .section h1 { text-transform: uppercase; margin: 0px 0px 15px 0px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 10px; } #locationInfo .section.short { padding-top: 10px; padding-bottom: 10px; } #locationInfo .section.short a { color: #fffa00; text-decoration: none; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 11px; } #locationInfo .section.short .site { border-right: 1px dotted #fff; padding-right: 6px; height: 7px; line-height: 7px; } #locationInfo .about .more { display: inline-block; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; color: #fffa00; border-bottom: 1px dashed #fffa00; } #locationInfo .links { color: #fffa00; font-size: 12px; border-top: 1px dotted #404040; } #locationInfo .links a { margin-right: 6px; } #locationInfo .links a:hover { color: #ffffff; } #locationInfo .links .shareButton { cursor: pointer; width: 18px; height: 18px; display: inline-block; background-position: center center; background-repeat: no-repeat; vertical-align: middle; } #locationInfo .links .shareButton .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #locationInfo .links .shareButton:hover .content.white { opacity: 1; } #locationInfo .links .btnFacebook { cursor: pointer; width: 18px; height: 18px; display: inline-block; background-position: center center; background-repeat: no-repeat; vertical-align: middle; margin-top: -6px; width: 7px !important; height: 15px !important; position: relative; } #locationInfo .links .btnFacebook .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #locationInfo .links .btnFacebook:hover .content.white { opacity: 1; } #locationInfo .links .btnFacebook .content { position: absolute; width: 100%; height: 100%; } #locationInfo .links .btnFacebook .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_facebook_venue_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .links .btnFacebook .content.white { background-image: url("../img/icon_facebook_venue_white@2x.png"); background-size: 7px 15px; } } #locationInfo .links .btnFacebook .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_facebook.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .links .btnFacebook .content.yellow { background-image: url("../img/icon_info_share_facebook@2x.png"); background-size: 7px 15px; } } #locationInfo .links .btnTwitter { margin-top: -3px; width: 25px !important; height: 20px !important; cursor: pointer; width: 18px; height: 18px; display: inline-block; background-position: center center; background-repeat: no-repeat; vertical-align: middle; position: relative; } #locationInfo .links .btnTwitter .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #locationInfo .links .btnTwitter:hover .content.white { opacity: 1; } #locationInfo .links .btnTwitter .content { position: absolute; width: 100%; height: 100%; } #locationInfo .links .btnTwitter .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_twitter_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .links .btnTwitter .content.white { background-image: url("../img/icon_info_share_twitter_white@2x.png"); background-size: 18px 14px; } } #locationInfo .links .btnTwitter .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_twitter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .links .btnTwitter .content.yellow { background-image: url("../img/icon_info_share_twitter@2x.png"); background-size: 18px 14px; } } #locationInfo .requests p { margin-bottom: 0px; } #locationInfo .requests .name { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; margin-top: 3px; margin-bottom: 15px; } #locationInfo .requests .actTW { background: url('../img/small_twittericon.png'); width: 10px; height: 8px; display: inline-block; } #locationInfo .requests .actFB { background: url('../img/small_facebookicon.png'); width: 10px; height: 8px; display: inline-block; } #locationInfo .related p { color: #c8c8c8; } #locationInfo .address { background-image: url('../img/icon_info_checkin.png'); background-position: 5% 12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .address { background-image: url("../img/icon_info_checkin@2x.png"); background-size: 8px 10px; } } #locationInfo .phone { background-image: url('../img/icon_info_phone.png'); background-position: 5% 12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .phone { background-image: url("../img/icon_info_phone@2x.png"); background-size: 7px 10px; } } #locationInfo .phone a { color: #fff; text-decoration: none; } #locationInfo .tourist { background-image: url('../img/icon_info_quote.png'); background-position: 5% 23px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .tourist { background-image: url("../img/icon_info_quote@2x.png"); background-size: 8px 7px; } } #locationInfo .checkin { line-height: 26px; font-size: 15px; color: #fffa00; text-transform: uppercase; background-image: url('../img/icon_info_checkin_large.png'); background-position: 4% center; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #locationInfo .checkin { background-image: url("../img/icon_info_checkin_large@2x.png"); background-size: 14px 19px; } } #locationInfo .locationType { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 10px; margin: 20px 0px 15px 0px; text-transform: uppercase; padding-left: 10%; padding-right: 10%; width: 80%; } #locationInfo .locationName { border-bottom: 1px dotted #404040; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 200; font-style: normal; font-size: 25px; padding-left: 10%; padding-right: 10%; width: 70%; line-height: 26px; padding-bottom: 10px; margin-top: -5px; } /*************************************/ /* ---------- PHOTOS TAB ----------- */ /*************************************/ #photos { padding-left: 25px; padding-right: 0px; width: 275px; } #photos .btnToggleTab { left: -20px; } #photos #photosThumbs { width: 250px !important; height: 100%; margin-top: 0px; margin-bottom: 0px; } #photos #photosThumbs li { padding-top: 20px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; position: relative; color: #fff; z-index: 2; overflow: auto; } #photos #photosThumbs li p { width: 90%; cursor: pointer; } #photos #photosThumbs li p { text-transform: uppercase; font-size: 11px; color: #fffa00; } #photos #photosThumbs li .imgContainer { width: 180px; height: 180px; position: relative; overflow: hidden; background-color: #fffa00; cursor: pointer; } #photos #photosThumbs li .imgContainer img { position: absolute; left: 0px; top: 0px; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 180px; height: 180px; } #photos #photosThumbs li .imgContainer .imgOverlay { position: absolute; width: 180px; height: 180px; top: 0px; left: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #photos #photosThumbs li .imgContainer:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #photos #photosThumbs li .imgContainer:hover .imgOverlay { border: 3px solid #fffa00; } #photos #scrollBtn { width: 5px; height: 80px; position: absolute; z-index: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background-color: #ccc; top: 6px; left: 240px; opacity: 0.5; } #photos #scrollBtn:hover { cursor: pointer; } /*************************************/ /* ---------- VIDEOS TAB ----------- */ /*************************************/ #videos { padding-left: 25px; padding-right: 0px; width: 275px; } #videos .btnToggleTab { left: -20px; } #videos #videosThumbs { position: relative; padding: 0; list-style: none; overflow-x: hidden; overflow-y: scroll; padding-right: 70px; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; overflow: scroll; width: 250px !important; height: 100%; padding-left: 15px; margin-top: 0px; margin-bottom: 0px; } #videos #videosThumbs p { width: 80%; } #videos #videosThumbs li { padding-top: 20px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; position: relative; color: #fff; z-index: 2; overflow: auto; padding-top: 5px; height: 180px; overflow: hidden; cursor: pointer; } #videos #videosThumbs li p { text-transform: uppercase; font-size: 11px; color: #fffa00; } #videos #videosThumbs li .feedDivider { width: 220px; } #videos #videosThumbs li .imgContainer { width: 200px; height: 110px; position: relative; overflow: hidden; background-color: #fffa00; cursor: pointer; } #videos #videosThumbs li .imgContainer img { position: absolute; left: 0px; top: 0px; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 200px; height: 110px; } #videos #videosThumbs li .imgContainer .imgOverlay { position: absolute; width: 200px; height: 110px; top: 0px; left: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 150ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #videos #videosThumbs li .imgContainer .imgOverlay .btnPlay { opacity: 0; } #videos #videosThumbs li .imgContainer:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #videos #videosThumbs li .imgContainer:hover .imgOverlay { border: 3px solid #fffa00; } #videos #vScrollBtn { width: 5px; height: 80px; position: absolute; z-index: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background-color: #ccc; top: 6px; left: 240px; opacity: 0.5; } #videos #vScrollBtn:hover { cursor: pointer; } /*************************************/ /* --------- HIGHLIGHTS TAB ----------- */ /*************************************/ #highlights { padding-left: 50px; width: 140px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; color: #fff; margin-top: 20px; pointer-events: none; } #highlights.toggleTab { right: -140px !important; } #highlights .btnToggleTab { top: -5px; } #highlights a { color: #ffffff; font-size: 11px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; pointer-events: auto; height: 20px; } #highlights a:hover { color: #ffffff; } #highlights a.selected { color: #fffa00; } #highlights p { font-size: 14px; margin-top: 0px; margin-bottom: 0px; } #highlights input { margin-right: 10px; } #highlights #filtersCover { height: 100%; width: 94%; pointer-events: auto; display: inline; } #highlights .dayDivider { display: none; } #highlights .day { display: none; font-size: 12px; margin-right: 5px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; color: #ffffff; } #highlights .day.selected { color: #fffa00; } #highlights .day.disabled { color: #999; opacity: 0.5; cursor: auto; } #highlights .day.disabled.hover { color: #ffffff; } #highlights #none { display: none; } #highlights .filterCheckbox { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); margin-top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; cursor: pointer; opacity: 0.4; color: #fff; font-size: 15px; clear: both; transform-origin: left center; padding: 0px 0px 4px 0px; text-indent: 40px; margin-top: 10px; margin-left: 5px; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ background-position: left center; background-repeat: no-repeat; } #highlights .filterCheckbox:hover { text-indent: 50px; } #highlights .filterCheckbox.activeFilter { opacity: 1; } #highlights .filterCheckbox#food { background-image: url('../img/map_icons/food_icon_filter.png'); margin-top: 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#food { background-image: url("../img/map_icons/food_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#bars { background-image: url('../img/map_icons/bars_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#bars { background-image: url("../img/map_icons/bars_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#coffee { background-image: url('../img/map_icons/coffee_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#coffee { background-image: url("../img/map_icons/coffee_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#shop { background-image: url('../img/map_icons/shop_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#shop { background-image: url("../img/map_icons/shop_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#events { background-image: url('../img/map_icons/events_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#events { background-image: url("../img/map_icons/events_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#sights { background-image: url('../img/map_icons/sights_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#sights { background-image: url("../img/map_icons/sights_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#hotels { background-image: url('../img/map_icons/hotels_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#hotels { background-image: url("../img/map_icons/hotels_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#parks { background-image: url('../img/map_icons/parks_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#parks { background-image: url("../img/map_icons/parks_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#art { background-image: url('../img/map_icons/art_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#art { background-image: url("../img/map_icons/art_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#music { background-image: url('../img/map_icons/music_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#music { background-image: url("../img/map_icons/music_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#streets { background-image: url('../img/map_icons/streets_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#streets { background-image: url("../img/map_icons/streets_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .filterCheckbox#extras { background-image: url('../img/map_icons/extras_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #highlights .filterCheckbox#extras { background-image: url("../img/map_icons/extras_icon_filter@2x.png"); background-size: 27px 27px; } } #highlights .pipe { font-size: 12px; color: #777; margin-left: -17px; margin-right: -17px; } #highlights .filtersDivider { width: 228px; height: 1px; background: url("../img/filters_divider.png") center center no-repeat; margin: 10px 0px 8px 0px; } /*************************************/ /* --------- FILTERS TAB ----------- */ /*************************************/ #filters { padding-left: 50px; width: 275px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; color: #fff; margin-top: 20px; pointer-events: none; } #filters .btnToggleTab { top: -5px; } #filters a { color: #fffa00; font-size: 11px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; } #filters a:hover { color: #ffffff; } #filters p { font-size: 14px; margin-top: 0px; margin-bottom: 0px; } #filters input { margin-right: 10px; } #filters #filtersCover { height: 100%; width: 94%; pointer-events: auto; } #filters .dayDivider { display: none; } #filters .day { display: none; font-size: 12px; margin-right: 5px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; color: #ffffff; } #filters .day.selected { color: #fffa00; } #filters .day.disabled { color: #999; opacity: 0.5; cursor: auto; } #filters .day.disabled.hover { color: #ffffff; } #filters #all { display: none; } #filters #none { display: none; } #filters #buttonPipe { display: none; } #filters .filterCheckbox { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); margin-top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; cursor: pointer; opacity: 0.4; color: #fff; font-size: 15px; clear: both; transform-origin: left center; padding: 0px 0px 4px 0px; text-indent: 40px; margin-top: 10px; margin-left: 5px; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ background-position: left center; background-repeat: no-repeat; } #filters .filterCheckbox:hover { text-indent: 50px; } #filters .filterCheckbox.activeFilter { opacity: 1; } #filters .filterCheckbox#food { background-image: url('../img/map_icons/food_icon_filter.png'); margin-top: 20px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#food { background-image: url("../img/map_icons/food_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#bars { background-image: url('../img/map_icons/bars_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#bars { background-image: url("../img/map_icons/bars_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#coffee { background-image: url('../img/map_icons/coffee_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#coffee { background-image: url("../img/map_icons/coffee_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#shop { background-image: url('../img/map_icons/shop_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#shop { background-image: url("../img/map_icons/shop_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#events { background-image: url('../img/map_icons/events_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#events { background-image: url("../img/map_icons/events_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#sights { background-image: url('../img/map_icons/sights_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#sights { background-image: url("../img/map_icons/sights_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#hotels { background-image: url('../img/map_icons/hotels_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#hotels { background-image: url("../img/map_icons/hotels_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#parks { background-image: url('../img/map_icons/parks_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#parks { background-image: url("../img/map_icons/parks_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#art { background-image: url('../img/map_icons/art_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#art { background-image: url("../img/map_icons/art_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#music { background-image: url('../img/map_icons/music_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#music { background-image: url("../img/map_icons/music_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#streets { background-image: url('../img/map_icons/streets_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#streets { background-image: url("../img/map_icons/streets_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .filterCheckbox#extras { background-image: url('../img/map_icons/extras_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filters .filterCheckbox#extras { background-image: url("../img/map_icons/extras_icon_filter@2x.png"); background-size: 27px 27px; } } #filters .pipe { font-size: 12px; color: #777; } #filters .filtersDivider { width: 228px; height: 1px; background: url("../img/filters_divider.png") center center no-repeat; margin: 10px 0px 8px 0px; } /*************************************/ /* ----------- FEED TAB ------------ */ /*************************************/ #feed { width: 280px; } #feed #feeds { height: 100%; } #feed .feedDisplayDiv { display: none; height: 100%; width: 285px; overflow-x: hidden; overflow-y: hidden; } #feed .feedContent { margin-top: 0px; width: 250px; overflow-y: hidden; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: relative; padding: 0; list-style: none; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding-right: 70px; } #feed .feedContent li { opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; transition: opacity 0.5s; width: 235px; position: relative; padding-top: 12px; color: #fff; z-index: 2; overflow: auto; } #feed .feedContent li:first-of-type { margin-top: 20px; } #feed .feedContent li.showMe { opacity: 1; } #feed .feedContent li .title { margin-left: 20px; text-transform: uppercase; font-size: 10px; } #feed .feedContent li .name { margin-left: 10px; font-size: 10px; color: #ffffff; } #feed .feedContent li .name #actTW { background: url('../img/small_twittericon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #feed .feedContent li .name #actFB { background: url('../img/small_facebookicon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #feed .feedContent li p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; margin-left: 20px; color: #7f7f7f; font-size: 11px; line-height: 14px; width: 80%; word-wrap: break-word; margin-top: 2px; margin-bottom: 6px; } #feed .feedContent li p .twitterID { color: #fff; } #feed .feedContent li.request { background: url('/img/icon_request.png') left 17px no-repeat; } #feed .feedContent li.request .title { color: #fffa00; } #feed .feedContent li.reply { background: url('/img/icon_quote.png') left 18px no-repeat; } #feed .feedContent li.reply .white { color: #ffffff; } #feed .feedContent li.reply .title { color: #e6033b; } #feed .feedContent li.userRequest { background: url('/img/icon_request_user.png') left 17px no-repeat; } #feed .feedContent li.userRequest .title { color: #e6033b; } #feed .feedContent li.instagram .imgContainer { width: 180px; height: 180px; position: relative; overflow: hidden; cursor: pointer; } #feed .feedContent li.instagram .imgContainer img { position: absolute; left: 0px; top: 0px; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 180px; height: 180px; } #feed .feedContent li.instagram .imgContainer .imgOverlay { position: absolute; width: 180px; height: 180px; top: 0px; left: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #feed .feedContent li.instagram .imgContainer:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #feed .feedContent li.instagram .imgContainer:hover .imgOverlay { border: 3px solid #fffa00; } #feed .feedContent li.instagram p { margin-left: 0px; } #feed .feedContent li.milestone { background: url('/img/icon_star.png') left 21px no-repeat; } #feed .feedContent li.milestone p { color: #ea6221; margin-bottom: 6px; font-size: 16px; line-height: 22px; margin-top: 6px; } #feed .feedContent li.checkin { background: url('/img/icon_checkin.png') left 17px no-repeat; } #feed .feedContent li.checkin .title { color: #e6033b; } #feed .feedContent li.checkin p { margin-top: 6px; font-size: 16px; line-height: 20px; } #feed #fScrollBtn { width: 5px; height: 80px; position: absolute; z-index: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background-color: #ccc; top: 6px; left: 240px; opacity: 0.5; } #feed #fScrollBtn:hover { cursor: pointer; } /*************************************/ /* --------- FILTERS TAB New----------- */ /*************************************/ #filtersNew { padding-left: 50px; width: 275px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; color: #fff; margin-top: 20px; pointer-events: none; } #filtersNew .btnToggleTab { top: -5px; } #filtersNew a { color: #fffa00; font-size: 10px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; letter-spacing: -1px; } #filtersNew a:hover { color: #ffffff; } #filtersNew p { font-size: 14px; margin-top: 0px; margin-bottom: 0px; } #filtersNew input { margin-right: 10px; } #filtersNew #filtersCover { height: 100%; width: 94%; pointer-events: auto; margin-left: 11px; margin-top: 2px; letter-spacing: -2px; } #filtersNew .dayDivider { display: none; } #filtersNew .dayFirst { display: inline-block; color: #ffffff; font-size: 19px; margin-right: 7px; margin-top: 9px; letter-spacing: -2px; margin-left: 4px; } #filtersNew .day { display: none; font-size: 19px; margin-right: 3px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; color: #ffffff; } #filtersNew .day.selected { color: #fffa00; } #filtersNew .day.disabled { color: #999; opacity: 0.5; cursor: auto; } #filtersNew .day.disabled.hover { color: #ffffff; } #filtersNew #all { display: none; margin-right: 8px; margin-right: 10px; margin-left: 5px; } #filtersNew #none { display: none; margin-left: 13px; } #filtersNew #buttonPipe { display: none; } #filtersNew .filterCheckbox { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); margin-top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; cursor: pointer; opacity: 0.4; color: #fff; font-size: 16px; clear: both; transform-origin: left center; padding: 0px 0px 4px 0px; text-indent: 37px; margin-top: 5px; margin-left: 5px; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ background-position: left center; background-repeat: no-repeat; height: 27px; line-height: 35px; } #filtersNew .filterCheckbox:hover { text-indent: 50px; } #filtersNew .filterCheckbox.activeFilter { opacity: 1; } #filtersNew .filterCheckbox#food { background-image: url('../img/map_icons/food_icon_filter.png'); margin-top: 11px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#food { background-image: url("../img/map_icons/food_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#bars { background-image: url('../img/venue_icons/bars_icon_venue_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#bars { background-image: url("../img/venue_icons/bars_icon_venue_new@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#coffee { background-image: url('../img/map_icons/coffee_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#coffee { background-image: url("../img/map_icons/coffee_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#shop { background-image: url('../img/venue_icons/shop_icon_venue_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#shop { background-image: url("../img/venue_icons/shop_icon_venue_new@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#events { background-image: url('../img/map_icons/events_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#events { background-image: url("../img/map_icons/events_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#sights { background-image: url('../img/venue_icons/sights_icon_filter_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#sights { background-image: url("../img/venue_icons/sights_icon_filter_new@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#hotels { background-image: url('../img/venue_icons/hotels_icon_venue_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#hotels { background-image: url("../img/venue_icons/hotels_icon_venue_new@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#parks { background-image: url('../img/map_icons/parks_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#parks { background-image: url("../img/map_icons/parks_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#art { background-image: url('../img/map_icons/art_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#art { background-image: url("../img/map_icons/art_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#music { background-image: url('../img/map_icons/music_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#music { background-image: url("../img/map_icons/music_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#streets { background-image: url('../img/venue_icons/streets_icon_filter_new.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#streets { background-image: url("../img/venue_icons/streets_icon_filter_new@2x.png"); background-size: 27px 27px; } } #filtersNew .filterCheckbox#extras { background-image: url('../img/map_icons/extras_icon_filter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #filtersNew .filterCheckbox#extras { background-image: url("../img/map_icons/extras_icon_filter@2x.png"); background-size: 27px 27px; } } #filtersNew .pipe { font-size: 12px; color: #777; } #filtersNew .filtersDivider { width: 228px; height: 1px; background: url("../img/filters_divider.png") center center no-repeat; margin: 10px 0px 8px 0px; } /*************************************/ /* ----------- FEED TAB ------------ */ /*************************************/ #feed { width: 280px; } #feed #feeds { height: 100%; } #feed .feedDisplayDiv { display: none; height: 100%; width: 285px; overflow-x: hidden; overflow-y: hidden; } #feed .feedContent { margin-top: 0px; width: 250px; overflow-y: hidden; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; position: relative; padding: 0; list-style: none; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding-right: 70px; } #feed .feedContent li { opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; transition: opacity 0.5s; width: 235px; position: relative; padding-top: 12px; color: #fff; z-index: 2; overflow: auto; } #feed .feedContent li:first-of-type { margin-top: 20px; } #feed .feedContent li.showMe { opacity: 1; } #feed .feedContent li .title { margin-left: 20px; text-transform: uppercase; font-size: 10px; } #feed .feedContent li .name { margin-left: 10px; font-size: 10px; color: #ffffff; } #feed .feedContent li .name #actTW { background: url('../img/small_twittericon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #feed .feedContent li .name #actFB { background: url('../img/small_facebookicon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #feed .feedContent li p { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; margin-left: 20px; color: #7f7f7f; font-size: 11px; line-height: 14px; width: 80%; word-wrap: break-word; margin-top: 2px; margin-bottom: 6px; } #feed .feedContent li p .twitterID { color: #fff; } #feed .feedContent li.request { background: url('/img/icon_request.png') left 17px no-repeat; } #feed .feedContent li.request .title { color: #fffa00; } #feed .feedContent li.reply { background: url('/img/icon_quote.png') left 18px no-repeat; } #feed .feedContent li.reply .white { color: #ffffff; } #feed .feedContent li.reply .title { color: #e6033b; } #feed .feedContent li.userRequest { background: url('/img/icon_request_user.png') left 17px no-repeat; } #feed .feedContent li.userRequest .title { color: #e6033b; } #feed .feedContent li.instagram .imgContainer { width: 180px; height: 180px; position: relative; overflow: hidden; cursor: pointer; } #feed .feedContent li.instagram .imgContainer img { position: absolute; left: 0px; top: 0px; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; width: 180px; height: 180px; } #feed .feedContent li.instagram .imgContainer .imgOverlay { position: absolute; width: 180px; height: 180px; top: 0px; left: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #feed .feedContent li.instagram .imgContainer:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #feed .feedContent li.instagram .imgContainer:hover .imgOverlay { border: 3px solid #fffa00; } #feed .feedContent li.instagram p { margin-left: 0px; } #feed .feedContent li.milestone { background: url('/img/icon_star.png') left 21px no-repeat; } #feed .feedContent li.milestone p { color: #ea6221; margin-bottom: 6px; font-size: 16px; line-height: 22px; margin-top: 6px; } #feed .feedContent li.checkin { background: url('/img/icon_checkin.png') left 17px no-repeat; } #feed .feedContent li.checkin .title { color: #e6033b; } #feed .feedContent li.checkin p { margin-top: 6px; font-size: 16px; line-height: 20px; } #feed #fScrollBtn { width: 5px; height: 80px; position: absolute; z-index: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background-color: #ccc; top: 6px; left: 240px; opacity: 0.5; } #feed #fScrollBtn:hover { cursor: pointer; } /*************************************/ /* ----------- CHAT TAB ------------ */ /*************************************/ #chat { height: 81%; width: 280px; } #chat #chatChevron { position: absolute; z-index: 30; margin-left: -16px; margin-top: 9px; } #chat .chatInput { width: 225px; height: 29px; min-height: 10px; height: 23px; background-color: #FFF; border: solid 1px #BFBDBD; color: #333; padding-left: 10px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; outline: 0; resize: none; padding-right: 25px; padding-left: 15px; padding-top: 8px; } #chat input[type=button] { background-color: #1E1E1E; color: #333; width: 24px; height: 103px; color: #c8c8c8; outline: 0; } #chat input[type=button], #chat .chatInput { border: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; outline: 0; } #chat input::-webkit-input-placeholder { color: #333; } #chat input:-moz-placeholder { /* Firefox 18- */ color: #333; } #chat input::-moz-placeholder { /* Firefox 19+ */ color: #333; } #chat input:-ms-input-placeholder { color: #333; } #chat #chatTW { background: url('../img/small_twittericon.png'); width: 10px; height: 8px; margin-left: 4px; display: inline-block; } #chat #chatFB { background: url('../img/small_facebookicon.png'); width: 10px; height: 8px; margin-left: 4px; display: inline-block; } #chat #chats { height: 90%; } #chat .messageDisplayDiv { display: none; height: 100%; width: 280px; overflow-x: hidden; overflow-y: hidden; } #chat .messageDisplayDiv .white { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; color: #fff; display: inline-block; margin-top: 5px; font-size: 11px; text-indent: 12px; margin-bottom: 4px; } #chat .messageDisplayDiv .chatMessage { font-size: 11px; width: 89%; margin-bottom: 5px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; color: #c8c8c8; } #chat .messageDisplayDiv .chatMessage #messageDiv { padding-left: 11px; } #chat .messageDisplayDiv .chatMessage .messageQuote { float: left; margin-left: 5px; } #chat .messageDisplayDiv .chatMessage .chatTime { display: inline-block; line-height: 2px; margin-left: 4px; font-size: 10px; float: right; margin-top: 8px; } #chat .messageDisplayDiv .chatMessage .chatBorder { border-bottom: #C8c8c8 1px dotted; display: inline-block; width: 195px; opacity: 0.6; } #chat .messageDisplayDiv .chatMessage .chatBorder.long { width: 235px; } #chat #cScrollBtn { width: 5px; height: 80px; position: absolute; z-index: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background-color: #ccc; top: 6px; left: 210px; opacity: 0.5; } #chat #cScrollBtn:hover { cursor: pointer; } /*************************************/ /* --------- Venue TAB ----------- */ /*************************************/ #venues { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 19px; color: #fff; display: none; position: absolute; top: 60px; } #venues a { color: #fffa00; font-size: 11px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; cursor: pointer; } #venues a:first-of-type { margin-left: 20px; } #venues p { font-size: 14px; margin-top: 25px; margin-bottom: 25px; } #venues input { margin-right: 10px; } #venues #btnSlide { background: url("../img/button_slide.png") left center no-repeat; width: 35px; height: 36px; display: inline-block; vertical-align: top; margin-right: 13px; } #venues #btnSlide:hover { cursor: pointer; } #venues #venueMenu { display: inline-block; margin-top: 6px; } #venues .venueCheckbox { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; cursor: pointer; color: #666; font-size: 15px; clear: both; opacity: 0; transform-origin: left center; text-indent: 20px; margin-top: 30px; margin-left: 5px; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ } #venues .venueCheckbox.activeFilter { color: #fff; background: url("../img/icon_filter_selected.png") left center no-repeat; } #venues .pipe { font-size: 12px; color: #777; } #venues .venueDivider { width: 245px; height: 1px; background: url("../img/filters_divider.png") center center no-repeat; margin: 13px 0px 8px 0px; } /***************************************************************************************************************/ /* ----------- OVERLAYS ------------*/ /***************************************************************************************************************/ .overlay { display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 900; } .overlayButton { cursor: pointer; width: 160px; height: 160px; background-color: rgba(0, 0, 0, 0.6); -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; -o-border-radius: 80px; border-radius: 80px; text-align: center; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; } .overlayButton p { color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; } /*************************************/ /* --------- VENUE DETAILS --------- */ /*************************************/ #venueDetails { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; } #venueDetails.hideContent .btnGoLeft { -webkit-transform: rotate(180deg) scale(0); -moz-transform: rotate(180deg) scale(0); -ms-transform: rotate(180deg) scale(0); -o-transform: rotate(180deg) scale(0); transform: rotate(180deg) scale(0); } #venueDetails.hideContent .btnGoRight { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } #venueDetails.hideContent .btnClose { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } #venueDetails.hideContent .detailsBackground { opacity: 0; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; } #venueDetails.hideInfo .venueLeft .leftContent .contentHolder .content { opacity: 0; transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -moz-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -webkit-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; -o-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 100ms; } #venueDetails.hideInfo .venueLeft .leftContent .carouselHolder { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #venueDetails.hideInfo .venueContent .name { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; opacity: 0; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } #venueDetails.hideInfo .venueContent .address { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; opacity: 0; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } #venueDetails.hideInfo .venueContent .visited { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; opacity: 0; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } #venueDetails.hideInfo .venueContent .contact { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 50ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #venueDetails.hideInfo .venueContent .description { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 25ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #venueDetails.hideInfo .venueContent .requests { transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -moz-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; -o-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } #venueDetails.showInfo .venueLeft .leftContent .contentHolder { transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; opacity: 1; } #venueDetails.showInfo .venueLeft .leftContent .contentHolder .content { opacity: 1; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; } #venueDetails.showInfo .venueLeft .leftContent .carouselHolder.animateCarouselHolder { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 800ms; } #venueDetails.showInfo .venueContent .name { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 150ms; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #venueDetails.showInfo .venueContent .address { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 175ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 175ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 175ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 175ms; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #venueDetails.showInfo .venueContent .visited { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #venueDetails.showInfo .venueContent .contact { transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #venueDetails.showInfo .venueContent .description { transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #venueDetails.showInfo .venueContent .requests { transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -moz-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -webkit-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; -o-transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #venueDetails.showContent .detailsBackground { opacity: 0.8; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #venueDetails.showContent .btnGoLeft { -webkit-transform: rotate(180deg) scale(1); -moz-transform: rotate(180deg) scale(1); -ms-transform: rotate(180deg) scale(1); -o-transform: rotate(180deg) scale(1); transform: rotate(180deg) scale(1); transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms; } #venueDetails.showContent .btnGoRight { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; } #venueDetails.showContent .btnClose { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -moz-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -webkit-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -o-transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; } #venueDetails .detailsBackground { width: 100%; height: 100%; background-color: #161616; } #venueDetails .btnGo { cursor: pointer; width: 35px; height: 35px; position: absolute; top: 50%; margin-top: -12.5px; } #venueDetails .btnGo:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #venueDetails .btnGo:hover .icon { -webkit-animation: 'leftArrow' 300ms 1 ease-out; -moz-animation: 'leftArrow' 300ms 1 ease-out; -o-animation: 'leftArrow' 300ms 1 ease-out; } #venueDetails .btnGo .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #venueDetails .btnGo .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_btn_toggle.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .btnGo .icon { background-image: url("../img/icon_btn_toggle@2x.png"); background-size: 9px 14px; } } #venueDetails .btnGoLeft { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); cursor: pointer; width: 35px; height: 35px; position: absolute; top: 50%; margin-top: -12.5px; left: 20px; } #venueDetails .btnGoLeft:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #venueDetails .btnGoLeft:hover .icon { -webkit-animation: 'leftArrow' 300ms 1 ease-out; -moz-animation: 'leftArrow' 300ms 1 ease-out; -o-animation: 'leftArrow' 300ms 1 ease-out; } #venueDetails .btnGoLeft .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #venueDetails .btnGoLeft .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_btn_toggle.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .btnGoLeft .icon { background-image: url("../img/icon_btn_toggle@2x.png"); background-size: 9px 14px; } } #venueDetails .btnGoRight { cursor: pointer; width: 35px; height: 35px; position: absolute; top: 50%; margin-top: -12.5px; right: 20px; } #venueDetails .btnGoRight:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #venueDetails .btnGoRight:hover .icon { -webkit-animation: 'leftArrow' 300ms 1 ease-out; -moz-animation: 'leftArrow' 300ms 1 ease-out; -o-animation: 'leftArrow' 300ms 1 ease-out; } #venueDetails .btnGoRight .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #venueDetails .btnGoRight .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_btn_toggle.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .btnGoRight .icon { background-image: url("../img/icon_btn_toggle@2x.png"); background-size: 9px 14px; } } #venueDetails .btnClose { top: 100px; right: 20px; width: 35px; height: 35px; position: absolute; cursor: pointer; } #venueDetails .btnClose:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #venueDetails .btnClose:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #venueDetails .btnClose .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .btnClose .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } #venueDetails .btnClose .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #venueDetails .venueLeft { width: 38%; height: 60%; padding-top: 120px; padding-left: 10%; padding-right: 2%; position: absolute; left: 0px; top: 0px; text-align: right; } #venueDetails .venueLeft .leftContent { width: 100%; height: 100%; display: inline-block; max-width: 500px; } #venueDetails .venueLeft .contentHolder { opacity: 0; overflow: hidden; } #venueDetails .venueLeft .contentHolder .content { width: 100%; height: 100%; position: relative; } #venueDetails .venueLeft .contentHolder .content:hover .videoOverlay { opacity: 0.3; } #venueDetails .venueLeft .contentHolder .content:hover .videoPlay { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #venueDetails .venueLeft .contentHolder .content .videoOverlay { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #000000; opacity: 0; } #venueDetails .venueLeft .contentHolder .content .videoPlay { background-position: center center; background-repeat: no-repeat; transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-image: url('../img/icon_video_play.png'); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueLeft .contentHolder .content .videoPlay { background-image: url("../img/icon_video_play@2x.png"); background-size: 69px 69px; } } #venueDetails .venueLeft .contentHolder .content img { opacity: 0; width: 100%; height: 100%; transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; } #venueDetails .venueLeft .contentHolder .content img.videoThumb { height: 100%; width: auto; } #venueDetails .venueLeft .carouselHolder { position: relative; width: 100%; overflow: visible; } #venueDetails .venueLeft .carouselHolder .carouselButton { display: none; background-position: center center; background-repeat: no-repeat; width: 30px; height: 30px; top: 50%; margin-top: -15px; position: absolute; cursor: pointer; z-index: 1000; } #venueDetails .venueLeft .carouselHolder .carouselButton.disabled { cursor: auto !important; opacity: 0.5; } #venueDetails .venueLeft .carouselHolder .btnPrev { display: none; background-position: center center; background-repeat: no-repeat; width: 30px; height: 30px; top: 50%; margin-top: -15px; position: absolute; cursor: pointer; z-index: 1000; left: -30px; background-image: url('../img/icon_btn_prev_carousel.png'); } #venueDetails .venueLeft .carouselHolder .btnPrev.disabled { cursor: auto !important; opacity: 0.5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueLeft .carouselHolder .btnPrev { background-image: url("../img/icon_btn_prev_carousel@2x.png"); background-size: 9px 14px; } } #venueDetails .venueLeft .carouselHolder .btnNext { display: none; background-position: center center; background-repeat: no-repeat; width: 30px; height: 30px; top: 50%; margin-top: -15px; position: absolute; cursor: pointer; z-index: 1000; background-image: url('../img/icon_btn_next_carousel.png'); right: -30px; } #venueDetails .venueLeft .carouselHolder .btnNext.disabled { cursor: auto !important; opacity: 0.5; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueLeft .carouselHolder .btnNext { background-image: url("../img/icon_btn_next_carousel@2x.png"); background-size: 9px 14px; } } #venueDetails .venueLeft .carouselHolder .carousel { width: 100%; overflow: hidden; } #venueDetails .venueLeft .carouselHolder .carouselContent { transition: margin 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: margin 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: margin 300ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: margin 300ms cubic-bezier(0.25, 0.1, 0.25, 1); margin-left: 0px; margin-top: 0px; background-color: #000; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem { cursor: pointer; padding: 4px 2px 4px 2px; display: inline-block; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem:hover .imgContainer .carouselItemOverlay { opacity: 0; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem:hover .imgContainerVideo .carouselItemOverlay { opacity: 0; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainer { position: relative; width: 100%; height: 100%; overflow: hidden; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainer img { width: 100%; max-height: 100%; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainer .carouselItemOverlay { background-color: #000000; opacity: 0.45; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainerVideo { position: relative; width: 100%; height: 100%; overflow: hidden; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainerVideo .imgOverlay { background: url("../img/playArrow.png"); height: 100%; width: 100%; position: absolute; display: inline-block; background-repeat: no-repeat; background-position: center center; z-index: 999; opacity: 0.5; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainerVideo img { max-height: 100%; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem .imgContainerVideo .carouselItemOverlay { background-color: #000000; opacity: 0.45; transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem:first-of-type { padding-left: 4px; } #venueDetails .venueLeft .carouselHolder .carouselContent .carouselItem:last-of-type { padding-right: 4px; } #venueDetails .venueRight { padding-left: 2%; padding-right: 10%; width: 38%; height: 100%; margin-top: 60px; position: absolute; right: 0px; top: 0px; color: #ffffff; } #venueDetails .venueRight .venueContent { width: 100%; height: 100%; max-width: 500px; } #venueDetails .venueRight .venueContent .name { margin-top: 55px; line-height: 55px; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 50px; margin-bottom: 0px; } #venueDetails .venueRight .venueContent .address { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 14px; margin-top: 2px; margin-bottom: 0px; } #venueDetails .venueRight .venueContent .visited { margin-top: 5px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 11px; } #venueDetails .venueRight .venueContent .related p { color: #c8c8c8; } #venueDetails .venueRight .venueContent .section { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; margin-top: 50px; font-size: 6.5px; } #venueDetails .venueRight .venueContent .section h3 { text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; } #venueDetails .venueRight .venueContent .section p { font-size: 11px; } #venueDetails .venueRight .venueContent .section a { color: #fffa00; text-decoration: none; } #venueDetails .venueRight .venueContent .requests p { margin-bottom: 0px; } #venueDetails .venueRight .venueContent .requests .requestName { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; margin-top: 3px; margin-bottom: 15px; font-size: 10px; } #venueDetails .venueRight .venueContent .requests .actTW { background: url('../img/small_twittericon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #venueDetails .venueRight .venueContent .requests .actFB { background: url('../img/small_facebookicon.png'); width: 10px; height: 8px; margin-left: 1px; display: inline-block; } #venueDetails .venueRight .venueContent .contact { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 10px; margin-top: 20px; } #venueDetails .venueRight .venueContent .contact a { padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border-left: 1px dotted #ffffff; border-right: 1px dotted #ffffff; color: #fffa00; text-decoration: none; } #venueDetails .venueRight .venueContent .contact .btnFacebook { vertical-align: top; cursor: pointer; display: inline-block; width: 7px; height: 15px; position: relative; } #venueDetails .venueRight .venueContent .contact .btnFacebook .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #venueDetails .venueRight .venueContent .contact .btnFacebook:hover .content.white { opacity: 1; } #venueDetails .venueRight .venueContent .contact .btnFacebook .content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #venueDetails .venueRight .venueContent .contact .btnFacebook .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_facebook_venue_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueRight .venueContent .contact .btnFacebook .content.white { background-image: url("../img/icon_facebook_venue_white@2x.png"); background-size: 7px 15px; } } #venueDetails .venueRight .venueContent .contact .btnFacebook .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_facebook.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueRight .venueContent .contact .btnFacebook .content.yellow { background-image: url("../img/icon_info_share_facebook@2x.png"); background-size: 7px 15px; } } #venueDetails .venueRight .venueContent .contact .btnTwitter { width: 25px; height: 15px; vertical-align: top; cursor: pointer; display: inline-block; position: relative; } #venueDetails .venueRight .venueContent .contact .btnTwitter .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #venueDetails .venueRight .venueContent .contact .btnTwitter:hover .content.white { opacity: 1; } #venueDetails .venueRight .venueContent .contact .btnTwitter .content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #venueDetails .venueRight .venueContent .contact .btnTwitter .content.white { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_twitter_white.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueRight .venueContent .contact .btnTwitter .content.white { background-image: url("../img/icon_info_share_twitter_white@2x.png"); background-size: 13px 10px; } } #venueDetails .venueRight .venueContent .contact .btnTwitter .content.yellow { background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_info_share_twitter.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #venueDetails .venueRight .venueContent .contact .btnTwitter .content.yellow { background-image: url("../img/icon_info_share_twitter@2x.png"); background-size: 13px 10px; } } #venueDetails .venueRight .venueContent .contact .shareButton { vertical-align: top; cursor: pointer; position: relative; display: inline-block; } #venueDetails .venueRight .venueContent .contact .shareButton .content.white { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; } #venueDetails .venueRight .venueContent .contact .shareButton:hover .content.white { opacity: 1; } /*************************************/ /* --------- LIVE SCHEDULE --------- */ /*************************************/ .module0 h1 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module0 h3 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module0 p { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .module0 .divider { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } .module0 .moduleDivider { width: 0px; } .module0.showMe h1 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module0.showMe h3 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module0.showMe .startTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module0.showMe .userTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module0.showMe .divider { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module0.showMe .moduleDivider { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; width: 25px; } .module0.hideMe { opacity: 0; } .module0.hideMe h1 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module0.hideMe h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; } .module0.hideMe .startTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } .module0.hideMe .userTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module0.hideMe .moduleDivider { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module1 h1 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module1 h3 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module1 p { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .module1 .divider { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } .module1 .moduleDivider { width: 0px; } .module1.showMe h1 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module1.showMe h3 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module1.showMe .startTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module1.showMe .userTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module1.showMe .divider { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module1.showMe .moduleDivider { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; width: 25px; } .module1.hideMe { opacity: 0; } .module1.hideMe h1 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module1.hideMe h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; } .module1.hideMe .startTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } .module1.hideMe .userTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module1.hideMe .moduleDivider { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module2 h1 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module2 h3 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module2 p { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .module2 .divider { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } .module2 .moduleDivider { width: 0px; } .module2.showMe h1 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module2.showMe h3 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module2.showMe .startTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module2.showMe .userTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module2.showMe .divider { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module2.showMe .moduleDivider { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; width: 25px; } .module2.hideMe { opacity: 0; } .module2.hideMe h1 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module2.hideMe h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; } .module2.hideMe .startTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } .module2.hideMe .userTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module2.hideMe .moduleDivider { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module3 h1 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module3 h3 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module3 p { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .module3 .divider { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } .module3 .moduleDivider { width: 0px; } .module3.showMe h1 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module3.showMe h3 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module3.showMe .startTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module3.showMe .userTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module3.showMe .divider { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module3.showMe .moduleDivider { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; width: 25px; } .module3.hideMe { opacity: 0; } .module3.hideMe h1 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module3.hideMe h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; } .module3.hideMe .startTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } .module3.hideMe .userTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module3.hideMe .moduleDivider { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module4 h1 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module4 h3 { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } .module4 p { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .module4 .divider { -webkit-transform: translateY(170px); -moz-transform: translateY(170px); -ms-transform: translateY(170px); -o-transform: translateY(170px); transform: translateY(170px); } .module4 .moduleDivider { width: 0px; } .module4.showMe h1 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module4.showMe h3 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 700ms; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .module4.showMe .startTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module4.showMe .userTimes { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module4.showMe .divider { transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -moz-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -o-transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 400ms; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .module4.showMe .moduleDivider { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 650ms; width: 25px; } .module4.hideMe { opacity: 0; } .module4.hideMe h1 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module4.hideMe h3 { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 20ms; } .module4.hideMe .startTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 50ms; } .module4.hideMe .userTimes { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } .module4.hideMe .moduleDivider { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #liveSchedule { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; color: #ffffff; } #liveSchedule.showMe .title { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #liveSchedule.showMe h2 { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #liveSchedule.showMe .scheduleBackground { opacity: 0.86; } #liveSchedule.showMe .scheduleButton { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #liveSchedule.showMe #btnClose { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #liveSchedule.hideMe #btnClose { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } #liveSchedule.hideMe #btnDown { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #liveSchedule.hideMe #btnUpdates { transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; } #liveSchedule #btnClose { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s; -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s; -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s; -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s; position: absolute; width: 35px; height: 35px; right: 20px; top: 20px; cursor: pointer; } #liveSchedule #btnClose:hover .background { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #liveSchedule #btnClose:hover .icon { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #liveSchedule #btnClose .icon { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; background-image: url('../img/icon_btn_close_tab.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #liveSchedule #btnClose .icon { background-image: url("../img/icon_btn_close_tab@2x.png"); background-size: 15px 15px; } } #liveSchedule #btnClose .background { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; background-color: #fffa00; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -ms-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1); /* easeOutBack */ } #liveSchedule .content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } #liveSchedule .scheduleImage { top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; background: url('../img/landing_bg_large.jpg') center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; } #liveSchedule .fadeOn { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; opacity: 1; } #liveSchedule .fadeOff { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 300ms; opacity: 0; } #liveSchedule .scheduleBackground { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #545454; opacity: 0; } #liveSchedule .onStage { margin-top: 10%; opacity: 1; } #liveSchedule .title { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); margin-top: 5%; text-transform: uppercase; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 35px; margin-bottom: 0px; } #liveSchedule h2 { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; color: #fffa00; font-size: 24px; margin: 3px 0px 70px 0px; } #liveSchedule .moduleHolder { height: 170px; overflow: hidden; position: relative; } #liveSchedule .scheduleModule { vertical-align: top; overflow: hidden; padding-left: 20px; text-align: left; width: 125px; height: 170px; margin: 0px 0px 0px 0px; display: inline-block; position: relative; } #liveSchedule .scheduleModule:first-of-type { background: none; } #liveSchedule .scheduleModule .moduleDivider { height: 1px; border-bottom: 1px solid #BCBCBC; margin-bottom: 10px; margin-top: 15px; } #liveSchedule .scheduleModule .startTimes { color: #fff; margin-bottom: 10px; margin-top: 8px; } #liveSchedule .scheduleModule .userTimes { margin-top: 12px; } #liveSchedule .scheduleModule .divider { height: 160px; width: 1px; position: absolute; right: 0px; top: 0px; border-left: 1px dotted #999; } #liveSchedule .scheduleModule h1 { margin-left: -5px; margin-top: 0px; font-size: 64px; color: #ffffff; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; margin-bottom: 0px; } #liveSchedule .scheduleModule h3 { margin-top: -5px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 10px; margin-bottom: 0px; } #liveSchedule .scheduleModule p { margin-top: 5px; margin-bottom: 0px; text-transform: uppercase; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; color: #BCBCBC; } #liveSchedule .scheduleModule p .light { font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; } #liveSchedule .linkFacebook, #liveSchedule .linkTwitter, #liveSchedule .downloadLink { display: inline-block; outline: 0 none; cursor: auto; } #liveSchedule .scheduleButton { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); width: 160px; height: 160px; display: inline-block; vertical-align: top; margin: 60px 10px 0px 10px; position: relative; text-align: center; } #liveSchedule .scheduleButton .buttonBackground { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; -o-border-radius: 80px; border-radius: 80px; background-color: rgba(0, 0, 0, 0.6); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } #liveSchedule .scheduleButton .buttonContent { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #liveSchedule .scheduleButton .buttonContent p { color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; margin-top: 100px; } #liveSchedule .scheduleButton:hover .buttonBackground { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } #liveSchedule .scheduleButton:hover#btnDown .btnDownload .arrow { display: none; } #liveSchedule .scheduleButton:hover#btnDown .btnDownload .arrowTop { transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; opacity: 1; top: -10px; } #liveSchedule #btnDown { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 350ms; cursor: pointer; } #liveSchedule #btnDown .btnDownload { cursor: pointer; margin-top: 30px; margin-bottom: 2px; position: relative; display: inline-block; width: 48px; height: 48px; overflow: visible; border: none; outline: none; } #liveSchedule #btnDown .btnDownload .content { overflow: visible; } #liveSchedule #btnDown .btnDownload .content .background { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_download_border.png'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #liveSchedule #btnDown .btnDownload .content .background { background-image: url("../img/icon_download_border@2x.png"); background-size: 48px 44px; } } #liveSchedule #btnDown .btnDownload .content .arrow { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_download_arrow.png'); top: -10px; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #liveSchedule #btnDown .btnDownload .content .arrow { background-image: url("../img/icon_download_arrow@2x.png"); background-size: 22px 39px; } } #liveSchedule #btnDown .btnDownload .content .arrowTop { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-position: center center; background-repeat: no-repeat; background-image: url('../img/icon_download_arrow.png'); top: -40px; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { #liveSchedule #btnDown .btnDownload .content .arrowTop { background-image: url("../img/icon_download_arrow@2x.png"); background-size: 22px 39px; } } #liveSchedule #btnUpdates { transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms; } #liveSchedule #btnUpdates .divider { display: inline-block; height: 40px; width: 1px; border-left: 1px dashed #525557; margin-top: 30px; margin-bottom: 10px; top: 6px; position: relative; } #liveSchedule #btnUpdates a { border: none; text-decoration: none; } #liveSchedule #btnUpdates .shareButton { cursor: pointer; margin-top: 30px; margin-bottom: 10px; position: relative; display: inline-block; } #liveSchedule #btnUpdates .shareButton img { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; position: absolute; top: 0px; left: 0px; } #liveSchedule #btnUpdates .shareButton:hover img { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } #liveSchedule #btnUpdates .btnFacebook { cursor: pointer; margin-top: 30px; margin-bottom: 10px; display: inline-block; width: 14px; height: 30px; margin-right: 10px; margin-left: 11px; position: relative; } #liveSchedule #btnUpdates .btnFacebook img { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; position: absolute; top: 0px; left: 0px; } #liveSchedule #btnUpdates .btnFacebook:hover img { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } #liveSchedule #btnUpdates .btnFacebook img { width: 14px; height: 30px; border: none; } #liveSchedule #btnUpdates .btnTwitter { margin-left: 6px; cursor: pointer; margin-top: 30px; margin-bottom: 10px; position: relative; display: inline-block; width: 33px; height: 27px; } #liveSchedule #btnUpdates .btnTwitter img { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms; position: absolute; top: 0px; left: 0px; } #liveSchedule #btnUpdates .btnTwitter:hover img { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } #liveSchedule #btnUpdates .btnTwitter img { width: 31px; height: 26px; border: none; } /*************************************/ /* --------- LOGIN OVERLAY --------- */ /*************************************/ #loginOverlay { margin-top: 60px; } #loginOverlay.showContent .loginBackground { opacity: 0.86; } #loginOverlay.showContent #loginContent #btnTwitter { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #loginOverlay.showContent #loginContent #btnFacebook { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #loginOverlay.showContent #loginContent #loginTitle { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #loginOverlay.showContent #loginContent #loginPrivacy { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #loginOverlay #loginContent { width: 340px; height: 220px; position: absolute; left: 50%; top: 50%; margin: -240px 0 0 -170px; z-index: 30; } #loginOverlay #loginContent #loginTitle { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -moz-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -webkit-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; -o-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 100ms; width: 100%; height: 50px; text-align: center; font-size: 16px; } #loginOverlay #loginContent #loginTitle p { color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; } #loginOverlay #loginContent #loginPrivacy { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -moz-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -webkit-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; -o-transition: all 140ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms; width: 116%; height: 50px; font-size: 14px; float: left; text-align: center; margin-top: 79px; margin-left: -26px; letter-spacing: -1px; line-height: 21px; } #loginOverlay #loginContent #loginPrivacy p { color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; } #loginOverlay #loginContent #loginPrivacy a { color: #fffa01; text-decoration: none; border-bottom: 1px dashed #FFFA01; } #loginOverlay #loginContent #loginPrivacy a.light { color: rgba(255, 255, 255, 0.7); } #loginOverlay #loginContent #btnTwitter { cursor: pointer; width: 160px; height: 160px; background-color: rgba(0, 0, 0, 0.6); -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; -o-border-radius: 80px; border-radius: 80px; text-align: center; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; float: left; } #loginOverlay #loginContent #btnTwitter p { color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; } #loginOverlay #loginContent #btnTwitter img { margin-top: 40px; display: inline-block; } #loginOverlay #loginContent #btnFacebook { cursor: pointer; width: 160px; height: 160px; background-color: rgba(0, 0, 0, 0.6); -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; -o-border-radius: 80px; border-radius: 80px; text-align: center; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 100ms; float: right; } #loginOverlay #loginContent #btnFacebook p { color: #fffa00; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 12px; } #loginOverlay #loginContent #btnFacebook img { margin-top: 33px; display: inline-block; } #loginOverlay .loginBackground { transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -moz-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -webkit-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; -o-transition: all 500ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #545454; opacity: 0; } /*************************************/ /* --------- RESIZE OVERLAY --------- */ /*************************************/ #resizeOverlay { background: #000000; display: block; z-index: 15000; } #resizeOverlay p { position: absolute; top: 40%; width: 100%; font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B'; font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 20px; color: #ffffff; text-align: center; } /*************************************/ /* --------- NO SCRIPT --------- */ /*************************************/ #noScript { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #161616; z-index: 50000; text-align: center; } #noScript img { display: inline-block; width: 381px; height: 500px; margin-top: 50px; margin-bottom: 50px; } #noScript p { font-size: 12px; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; color: #ffffff; clear: both; margin: 0 auto; } /*************************************/ /* -------- Location Overlay ------- */ /*************************************/ #locationOverlay #preLoc { background: url("../img/button_slide.png") left center no-repeat; width: 35px; height: 36px; display: inline-block; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } #locationOverlay #preLoc:hover { cursor: pointer; } #locationOverlay #nextLoc { background: url("../img/button_slide.png") left center no-repeat; width: 35px; height: 36px; display: inline-block; } #locationOverlay #nextLoc:hover { cursor: pointer; } #locationOverlay #rightLoc { color: #ffffff; font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 500; font-style: normal; -webkit-font-smoothing: antialiased; } /***************************************************************************************************************/ /* ----------- MEDIA QUERIES ------------*/ /***************************************************************************************************************/ @media only screen and (min-width: 750px) { #resizeOverlay { display: none; } } @media only screen and (min-width: 800px) { #statsView .statsHolder .stat { width: 33.3%; } #venuesView .venue .venueInfo .smallName { background-position: 3% center; } } @media only screen and (min-width: 960px) { #venueDetails .venueRight .venueContent .contact { font-size: 14px; margin-top: 50px; } #venueDetails .venueRight .venueContent .contact a { padding: 0px 10px 0px 10px; margin: 0px 10px 0px 10px; } .rightSide { min-width: 600px; } #landingTeaser .landingModule { width: 180px; } #landingTeaser #liveIn { width: 210px; } #landingDown .landingModule { width: 180px; } #landingDown #liveIn { width: 210px; } #headerMain.mapHeader #status { display: block; } #liveSchedule .scheduleModule { width: 133px; } } @media only screen and (min-height: 570px) { #landingPostNew #content #landingBtn { margin-top: 80px; } #landingPostNew #content .buttons { bottom: 80px; } #landingPostNew #content .explore { bottom: 140px; } } @media only screen and (min-height: 700px) { #landingPostNew #content #landingLogo { margin-top: 170px; } } @media only screen and (min-height: 800px) { #filters { margin-top: 33px; } #liveSchedule .title { margin-top: 10%; } } @media only screen and (min-width: 1024px) { #promoViewLeMis #shareOn { right: 19%; } #promoViewLeMis #form #promoTop p { width: 100%; } #promoViewLeMis #form #promoTop h2 { font-size: 28px; marign-top: 50px; } .rightSide { width: 45%; } #venuesView .venue .venueInfo .smallName { background-position: 4% center; } } @media only screen and (min-width: 1200px) { #promoViewLeMis #promoShare { position: relative; margin: auto; } #promoViewLeMis #form h1 { font-size: 40px; margin-top: 35px; line-height: 53px; } #promoViewLeMis #thanks h1 { font-size: 44px; line-height: 48px; width: 55%; } #promoViewLeMis #closed h1 { font-size: 44px; line-height: 48px; } .rightSide { padding-right: 10%; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { #footerMain a:first-of-type { margin-left: 0px; } #fwa { display: none; } #venueDetails .venueLeft { padding-top: 280px; } #photoView.showContent .image { height: 405px; } #photoView .image { width: 405px; } #photoView .image img { width: 325px; height: 325px; } #photoView .slideShow { left: -190px; } #photoView .slideShow .closePhotoBtn { right: auto; top: -32px; left: -36px; } #photoView .slideShow #photoButtons { margin-right: 70px; } .rightSide { width: 100%; } #photoView .slideShow .photoButtons { font-size: 13px; } #footerMain { font-size: 8px; } #headerMain #status { display: none !important; } #headerMain .headerVideo #controlTextbox { width: 250px; } #headerMain .headerVideo #controlTextbox textarea { width: 200px; } #rctView .videoPlayerBlocker { display: none; } .leftSide { top: 0px; display: block; width: 100%; } .leftSide img { position: relative; margin-top: 50px; } .leftSide img.male { width: 332px; height: 500px; } .leftSide img.female { width: 395px; height: 500px; } .rightSide { bottom: 0px; height: 350px; } #landingTeaser .landingCopy { margin-top: 18px; } #landingDown .landingCopy { margin-top: 18px; } #landingDown .rightSide { bottom: 80px; top: auto; } #landingDown .leftSide img { position: relative; margin-top: 50px; } #landingDown .leftSide img.male { width: 265px; height: 400px; } #landingDown .leftSide img.female { width: 316px; height: 400px; } #landingDown .landingLogo { margin-bottom: 30px; } #landingView .rightSide .landingButtons { margin-top: 15px; } .landingLogo { margin-top: 10px !important; width: 428px !important; height: 52px !important; background-image: url('../img/landing_logo_horizontal@2x.png') !important; background-size: 428px 52px !important; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) { #footerMain a:first-of-type { margin-left: 0px; } #fwa { display: none; } .rightSide { top: 0px; } #photoView .slideShow .photoButtons { font-size: 13px; } .leftSide { top: 0px; display: block; width: 50%; } .leftSide img { position: relative; margin: 100px auto; } .leftSide img.male { width: 265px !important; height: 400px !important; } .leftSide img.female { width: 316px !important; height: 400px !important; } #rctView .videoPlayerBlocker { display: none; } }