/* Pirelli Cal */ /** FONTS **/ /*.................................................... Proxima */ @font-face { font-family: 'Proxima_nova_rgregular'; src: url('fonts/proximanova-regular-webfont.eot'); src: url('fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-regular-webfont.woff2') format('woff2'), url('fonts/proximanova-regular-webfont.woff') format('woff'), url('fonts/proximanova-regular-webfont.ttf') format('truetype'), url('fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima_nova_bold'; src: url('fonts/proximanova-bold-webfont.eot'); src: url('fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-bold-webfont.woff2') format('woff2'), url('fonts/proximanova-bold-webfont.woff') format('woff'), url('fonts/proximanova-bold-webfont.ttf') format('truetype'), url('fonts/proximanova-bold-webfont.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima_nova_extrabold'; src: url('fonts/proximanova-extrabold-webfont.eot'); src: url('fonts/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-extrabold-webfont.woff2') format('woff2'), url('fonts/proximanova-extrabold-webfont.woff') format('woff'), url('fonts/proximanova-extrabold-webfont.ttf') format('truetype'), url('fonts/proximanova-extrabold-webfont.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } /*.................................................... Proxima */ html { overflow: hidden; -webkit-tap-highlight-color: transparent;} body { background-color: #fff; } html, body { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; /*-webkit-font-smoothing: antialiased;*/ /*text-rendering: optimizeLegibility;*/ } * { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; } .tween { transition: .35s ease-in-out; -webkit-transition: .35s ease-in-out; } .unselectable, img { user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .table { display: table; text-align: center; width: 100%; height: 100%; } .table-cell { display: table-cell; vertical-align: middle; } .goth-bold { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 700; letter-spacing: .2em } .goth-book { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 400; letter-spacing: .1em } .goth-medium { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 500; letter-spacing: .1em; } .goth-thin { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 100; letter-spacing: .2em } .goth-light { font-style: normal; font-weight: 300; letter-spacing: .05em; font-family: "Gotham A", "Gotham B"; } .goth-extralight { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 200; letter-spacing: .2em } .prox-regular { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 500; letter-spacing: .1em; } .prox-bold { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 700; letter-spacing: .2em } .prox-extrabold { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 700; letter-spacing: .2em } .ls-00 {letter-spacing: 0} .ls-10 {letter-spacing: 0.1em; } .ls-15 {letter-spacing: 0.155em; } .ls-20 {letter-spacing: 0.20em; } .ls-35 {letter-spacing: 0.33em; } .white {color: #ffffff} .darkgrey {color: #66665d;} .lightblack {color: #231f20;} .full-cover { height: 100%; width: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; } .wrapper-960 { position: absolute; text-align: center; width: 960px; height: 610px; left: 50%; top: 50%; margin-left: -465px; margin-top: -305px} .wrapper-960max { position: relative; height: auto; width: 100%; max-width: 960px; max-height: 610px; text-align: center; margin: 0 auto;} .wrapper-960min { position: relative; height: 100%; width: 100%; min-width: 960px; min-height: 610px; text-align: center; margin: 0 auto;} .hide-mobile { display: block; } .hide-desk { display: none; } .hide-tablet { display: block; } a { text-decoration: none; color: inherit ; } /* Core */ #cal-site { position: absolute; top: 48px; left: 0; right: 0; bottom: 0; overflow: hidden; border-top: 1px solid #eee; } #cal-site #site { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; font-size: 16px; } .tablet #cal-site #site { overflow: hidden; } /* Scroller */ .scroller-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .scroller { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .scroller .scroller-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .scroller .scroller-wrap ul.scroll-list { list-style: none; position: absolute; width: 100%; height: 100%; } .scroller .scroller-wrap ul.scroll-list li.scroll-item { position: relative; top: 0; left: 0; width: 100%; overflow: hidden; cursor: -webkit-grab; } .scroller .logo-wrap { position: absolute; bottom: 40px; right: 40px; width: 147px; height: 57px } .scroller .logo-wrap img {position: absolute; display: block; width: 100%; opacity: 0} .scroller .logo-wrap.white .cal-white {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1 } .scroller .logo-wrap.white .cal-black {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0 } .scroller .logo-wrap.black .cal-white {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0 } .scroller .logo-wrap.black .cal-black {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1 } /* Back */ .back { position: absolute; top: 28px; cursor: pointer; padding: 1.70em 2.75em 1.750em; text-transform: uppercase; font-size: .563em; border: 1px solid #fff; color:#fff; right: 4em; z-index: 5; background: url(../img/assets/ie-bg.png) repeat } .back a { } .back .arrow { position: relative; display: inline-block; width: 30px; overflow: hidden; height: auto; margin-right: 1.667em; top: 2px; left: 0;; } .back span {display: inline-block} .back .arrow span {; height: 100%; width: 100%} .back .arrow img { position: absolute; top: 0; left: 0; width: 100% } .back .arrow img.black { opacity: 0; visibility: hidden; } .back .arrow img.white { opacity: 1; visibility: visible; } .back.black { color: #000; border-color: #000; } .back.black img.black { opacity: 1; visibility: visible; } .back.black img.white { opacity: 0; visibility: hidden; } .tablet .back { top: 28px; } /* Close */ .close-wrap {position: absolute; right: 0px; bottom: 0px; width: 30px; height: 30px; cursor: pointer; z-index: 3 } .close { position: relative; right: 0px; bottom: 0px; width: 30px; height: 30px; cursor: pointer; z-index: 3; background: url(../img/assets/ie-bg.png) repeat;} .close .background-close { position: relative; height: 30px; width: 30px; z-index: 1; border: 1px solid #fff } .close .background-close .cross-bar-1{ position: absolute; top: 7px; left: 13px; width: 2px; height: 15px; z-index: 2; background-color: #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); } .close .background-close .cross-bar-2 { position: absolute; top: 7px; left: 13px; width: 2px; height: 15px; z-index: 2; background-color: #fff; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} /* Nav Line */ .line { position: absolute; width: 0; height: 1px; transition: background-color .4s ease-out; -webkit-transition: background-color .4s ease-out; -webkit-transform-origin: 50%; transform-origin: 50%; } .white .line { background-color: #fff; } .black .line { background-color: #000; } /* Sub Nav */ .sub-nav { position: absolute; bottom: 3em; left: 1.5em; text-transform: uppercase; z-index: 2; } .sub-nav ul { list-style: none; border: 1px solid; padding: .250em .75em; } .sub-nav ul li { display: inline-block; line-height: 1em; font-size: .563em; } .sub-nav ul li a { padding: 1em; position: relative; display: block; } .sub-nav ul li a span { } .sub-nav ul { transition: border-color .4s ease-out; -webkit-transition: border-color .4s ease-out; } .sub-nav ul a { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; } .sub-nav.white ul { color: #fff; border-color: #fff; } .sub-nav.black ul { color: #000; border-color: #000; } .sub-nav.white ul a { color: #fff; } .sub-nav.black ul a { color: #000; } .sub-nav .line { bottom: 8px; left: 0; } .tablet .sub-nav { bottom: 1.5em; } img.full { position: absolute; } img.full-to-top { position: absolute; } img.full-to-parent { position: absolute; } img.show-all { position: absolute; } img.show-all-to-parent { position: absolute; } video.full { position: absolute; } video.full-to-top { position: absolute; } video.full-to-parent { position: absolute; } video.show-all { position: absolute; } ul, li { list-style: none !important; } .over-view { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .over-view { background-color: #252525; width: 100%; display: none; } .over-view .scrollbar-holder { padding-top: 40px; } .subs-container {position: absolute; bottom: 100px; padding: 0 25px 0 25px; opacity: 0;text-align: center; background-color: transparent; color: #ffffff; font-weight: bold; width : 100%; font-size : 1.475em; z-index : 5} .subs-container.show {transition: opacity .5s ease-out; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; opacity: 1} .subs-container p {display: inline-block; text-align: center; margin: 0 auto; background-color: rgba(0,0,0,.7); padding: .15em .5em;} #bio {} #bio .col-right {position: absolute; height: 100%; width: 50%; right: 0;} #bio .col-right p {position: relative; width: 50%; text-align: left; line-height: 1em; margin: 0 auto; color: #fff; left: -100px} #bio .col-right .cta {font-size: .583em; top: 12px} #bio .col-right .border-btn {border: 1px solid #fff; padding: 1.5em 2.25em; display: inline-block;} #bio .col-right p.subtitle {font-size: .563em; padding-bottom: 1.5em} #bio .col-right p.title {position: relative; font-size: 3.438em; padding-bottom: .25em; text-transform: uppercase; letter-spacing: .3em; line-height: 1.2em; left: -104px;} #bio .col-right p.desc {font-size: .875em; padding-bottom: 1.25em; line-height: 1.286em } .text-mask {position: relative; width: 900px; margin: 0 auto; overflow: hidden; padding: 2em; padding-right: 20px; height: 400px;} .text-scroller {position: relative; width: 100%; height: 100%; overflow: hidden; line-height: 1.667em;} .text-scroller-wrap { position: relative; width: 100%; overflow: hidden; padding-right: 45px;} .text-scroller-wrap p { width: 100%; position: relative; margin: 0 auto; text-align: left; } .text-scroller-wrap div {padding-right: 20px} .scrollbar-holder {position: absolute; width: 40px; height: 100%; right: 0; top: 0%; display: none;} .scrollbar-holder .scrollbar {position: relative; height: 100%; left: 50%; padding-bottom: 40px; width: 2px; margin-left: -1px} .scrollbar-holder .scrollbar .scrollbar-track {position: relative; width: 1px; height: 100%; margin: 0 auto; background-color: #3b3b3b} .scrollbar-holder .scrollbar .scrollbar-bar {position: absolute; top: 0; width: 2px; background-color: #fff; height: 60px; left: 0} .iScrollVerticalScrollbar {position: absolute; width: 19px; top:0 ; margin: 0 auto; background-image: url(../img/assets/sliderbar.png); background-repeat: repeat-y; right: 6px; bottom: 50px;} .iScrollIndicator {position: absolute; top: 0; width: 10px; left: 5px; background-image: url(../img/assets/sliderindicator.png); background-repeat: repeat-y; cursor: pointer;} /* Preloader */ #preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; z-index: 20; } #preloader .loader { position: absolute; top: 50%; left: 50%; width: 300px; height: 1px; margin-left: -150px; } #preloader .loader .loader-base { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #606060; } #preloader .loader .loader-bar { position: absolute; top: 0; left: 0; width: 0%; height: 100%; z-index: 1; background-color: #fff; } /* Header */ #cal-site #site header { position: static; text-transform: uppercase; } #cal-site #site header .desktop {position: absolute; top: 1.5em; left: 1.5em; z-index: 5; } #cal-site #site header .title { position: relative; width: 410px; height: 30px; } #cal-site #site header .title img { position: absolute; width: 100%; display: block; margin-left: 1px; } #cal-site #site header h1 a { } #cal-site #site header ul { list-style: none; margin-left: -3px} #cal-site #site header ul li { display: inline-block; font-size: 0.688em; } #cal-site #site header ul li a { display: block; position: relative; padding: .750em 1.25em .75em 0.45em } #cal-site #site header ul li.lock-wrap .lock-close, #cal-site #site header ul li.lock-wrap .lock-open { position: relative; } #cal-site #site header ul li.lock-wrap .lock-close { display: block; } #cal-site #site header ul li.lock-wrap .lock-open { display: none; } #cal-site #site header ul li.lock-wrap.auth .lock-close { display: none; } #cal-site #site header ul li.lock-wrap.auth .lock-open { display: block; } #cal-site #site header ul li.lock-wrap { position: relative; width: 16px; height: 12px; top: 2px; left: -8px} #cal-site #site header ul li.lock-wrap .lock { position: absolute; width: 100%; height: auto; } #cal-site #site header.white ul li.lock-wrap .lock.blck {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0} #cal-site #site header.black ul li.lock-wrap .lock.blck {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1} #cal-site #site header.white ul li.lock-wrap .lock.wht {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1} #cal-site #site header.black ul li.lock-wrap .lock.wht {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0} #cal-site #site header h1 a, #cal-site #site header ul li a { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; } #cal-site #site header.white h1 a, #cal-site #site header.white ul li a { color: #fff; } #cal-site #site header.black h1 a, #cal-site #site header.black ul li a { color: #000; } #cal-site #site header .line { bottom: 0; left: 0; } #cal-site #site header .menu-tablet { position: relative; margin-top: 1.75em; margin-left: 1.5em; width: 48px; height: 48px; float: left; z-index: 10} #cal-site #site header .menu-tablet .menu-tablet-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid } #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet { position: absolute; left: 16px; width: 13px; height: 2px; border-bottom: 2px solid ; transform-origin: 50%; -webkit-transform-origin: 50%; -moz-transform-origin: 50%;} #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-top { top: 18px; } #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-middle { top: 23px; transform: rotate(0deg) translateY(0px) translateX(0px); -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px);} #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-bottom { top: 28px; transform: rotate(0deg) translateY(0px) translateX(0px); -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 1} #cal-site #site header .tablet .title { position: relative; float: left; top: 44px; left: 11px; z-index: 6; width: 324px} #cal-site #site header .tablet .title img { position: absolute; width: 100%; } #cal-site #site header .menu-align { display: inline-block; margin: 0 auto; text-align: left;} #cal-site #site header .menu-align .title { position: relative; width: 695px; height: auto; float: none; display: block; top: 0; left: 10px; padding: 0;} #cal-site #site header .menu-align .title img {position: relative;} #cal-site #site header .menu-tablet-list { position: absolute; width: 100%; height: 100%; left: 0; background-color: #000; z-index: 5 !important; color: #fff !important; overflow: hidden; opacity: 0; visibility: hidden; } #cal-site #site header .menu-tablet-list ul { display: inline-block;} #cal-site #site header .menu-tablet-list ul li { font-size: 1.125em} #cal-site #site header .menu-tablet-list ul li a { color: #fff !important; padding: .750em 1.1em 0 .7em; } #cal-site #site header .menu-tablet-list .lock-tablet { position: relative; width: 20px; left: -10px } #cal-site #site header .menu-tablet-list .lock-tablet img {display: block; width: 100%} #cal-site #site header .menu-tablet-list .lock-tablet img.lock { display: block; } #cal-site #site header .menu-tablet-list .lock-tablet img.lockopen { display: none; } #cal-site #site header .menu-tablet-list .lock-tablet.auth img.lock { display: none; } #cal-site #site header .menu-tablet-list .lock-tablet.auth img.lockopen { display: block; } #cal-site #site header.white .menu-tablet .menu-tablet-wrap { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #fff} #cal-site #site header.black .menu-tablet .menu-tablet-wrap { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #000} #cal-site #site header.black .menu-tablet.force-white .menu-tablet-wrap { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #fff} #cal-site #site header.white .title img.white-title { transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1} #cal-site #site header.white .title img.black-title { transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0} #cal-site #site header.black .title img.black-title { transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1} #cal-site #site header.black .title img.white-title { transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0} #cal-site #site header .menu-tablet.close-menu .line-tablet.line-top { transition: transform .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(45deg) translateY(3px) translateX(4px); -webkit-transform: rotate(45deg) translateY(3px) translateX(4px); -moz-transform: rotate(45deg) translateY(3px) translateX(4px);} #cal-site #site header .menu-tablet.close-menu .line-tablet.line-middle { transition: transform .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(-45deg) translateY(0px) translateX(0px); -webkit-transform: rotate(-45deg) translateY(0px) translateX(0px); -moz-transform: rotate(-45deg) translateY(0px) translateX(0px);} #cal-site #site header .menu-tablet.close-menu .line-tablet.line-bottom { transition: transform .4s ease-out, opacity .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out, opacity .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(-45deg) translateY(-4px) translateX(4px); -webkit-transform: rotate(-45deg) translateY(-4px) translateX(4px); -moz-transform: rotate(-45deg) translateY(-4px) translateX(4px); opacity: 0} #cal-site #site header .menu-tablet.open-menu .line-tablet.line-top { transition: transform .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(0deg) translateY(0px) translateX(0px); -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px);} #cal-site #site header .menu-tablet.open-menu .line-tablet.line-middle { transition: transform .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(0deg) translateY(0px) translateX(0px); -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px);} #cal-site #site header .menu-tablet.open-menu .line-tablet.line-bottom { transition: transform .4s ease-out, opacity .4s ease-out; -webkit-transition: -webkit-transform .4s ease-out, opacity .4s ease-out; -moz-transition: -moz-transform .4s ease-out; transform: rotate(0deg) translateY(0px) translateX(0px); -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 1} .smartphone #cal-site #site header .bread-crumbs, .tablet #cal-site #site header .bread-crumbs {z-index: 5} .smartphone #cal-site #site header .bread-crumbs { position: absolute; left: 50px; top: 24px; height: 20px; overflow: hidden;} .smartphone #cal-site #site header .bread-crumbs p { position: relative; display: inline-block; font-size: .563em; bottom: 1px; line-height: 15px; border-left: 1px solid; padding: 0 10px } .smartphone #cal-site #site header .bread-crumbs p.first { margin-right: 10px; border-left: none; bottom: 0px; padding: 0; font-size: .75em;} .smartphone #cal-site #site header.white .bread-crumbs p { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #fff; border-right: 1px solid; padding: 0 7px 0 8px; margin-right: 2px;} .smartphone #cal-site #site header.black .bread-crumbs p { transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #000} .smartphone #cal-site #site header .menu-tablet, .tablet #cal-site #site header .menu-tablet {z-index: 6} .smartphone #cal-site #site header .menu-tablet { margin-top: 15px; margin-left: 5px; width: 43px; height: 40px; } .smartphone #cal-site #site header .menu-tablet{} .smartphone #cal-site #site header .menu-tablet .menu-tablet-wrap { border: none !important} .smartphone #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet {left: 15px} .smartphone #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-top {top: 15px; } .smartphone #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-middle {top: 20px;} .smartphone #cal-site #site header .menu-tablet .menu-tablet-wrap .line-tablet.line-bottom {top: 25px;} .smartphone #cal-site #site header .tablet .title { display: none; visibility: hidden; } .smartphone #cal-site #site header .bread-crumbs { top: 26px; } .smartphone #cal-site #site header .bread-crumbs p { border: 0; padding: 0; } .smartphone #cal-site #site header .bread-crumbs p.first { border-right: 1px solid; padding-right: 10px; padding-left: 0; } .smartphone #cal-site #site header .menu-tablet-list .lock-tablet { width: 12px; } #cal-site #site header .footer { position: absolute; left: 0; bottom: .5em; z-index: 1; right: auto; top: auto; font-size: .55em; } #cal-site #site header .footer p { position: relative; float: left; overflow: hidden; text-transform: none; padding: 0 0 1.5em 20px; } #cal-site #site header .footer .foo-wrap p:nth-child(1) { padding-top: 0; padding-left: 2.8em; } #cal-site #site header .footer .foo-wrap p a { position: relative; padding-right: 15px; } #cal-site #site header .footer .foo-wrap p br { display: none; } #cal-site #site header .menu-tablet-list .footer { position: absolute; bottom: 1em; left: 0; right: 0; top: auto; font-size: 1.125em; line-height: .9em; } #cal-site #site header .menu-tablet-list .footer .share { display: none; } #cal-site #site header .menu-tablet-list .footer .foo-wrap { position: relative; width: 100%; height: 100%; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p { position: relative; float: left; overflow: hidden; text-transform: none; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p a { position: relative; padding-right: 40px; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p { font-size: .65em; padding: 0 0 1.5em 30px; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p a { font-size: 1em; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p:nth-child(2) { padding-top: 0; padding-left: 7em; } #cal-site #site header .menu-tablet-list .footer .foo-wrap p br { display: none; } .smartphone #cal-site #site header .menu-tablet-list .footer .share { display: block; padding-bottom: 1em !important; font-size: 1em !important; } .smartphone #cal-site #site header .menu-tablet-list .footer .share span { text-transform: uppercase; padding-right: .85em;} .smartphone #cal-site #site header .menu-tablet-list .footer .share img { width: 20px; } .smartphone #cal-site #site header .menu-tablet-list .footer .foo-wrap p { font-size: .55em; padding: 0 0 0 42px; } .smartphone #cal-site #site header .menu-tablet-list .footer .foo-wrap p a { font-size: 1.125em; padding-right: 20px; } .smartphone #cal-site #site header .menu-tablet-list .footer .foo-wrap p br { display: block; } #cal-site #site header .menu-tablet-list .menu-banner { position: relative; width: 705px; margin: 2em auto 0; } .smartphone #cal-site #site header .menu-tablet-list .menu-banner { position: absolute; width: auto; bottom: 10em; left: 42px; } /* Sections */ #cal-site #site #sections { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } #cal-site #site #sections .section, #cal-site #site #sections .sub-section, #cal-site #site #sections .over-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cal-site #site #sections .section .wrap, #cal-site #site #sections .sub-section .wrap, #cal-site #site #sections .over-section .wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; width: 100%; } #cal-site #site #sections .section { z-index: 1; } #cal-site #site #sections .sub-section { z-index: 3; } #cal-site #site #sections .over-section { z-index: 4; } #cal-site #site #sections .section { cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } #cal-site #site #sections .section:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } /* Contents */ #cal-site #site #sections .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } /* Index */ #cal-site #site #index-view { background-color: #fff; color:#000; } #cal-site #site #index-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } #cal-site #site #index-view .scroller ul li:nth-child(3) .cta span { cursor: pointer; } #cal-site #site #index-view .scroller ul li:nth-child(4) { background-color: #cdced2; } #credits .logo { position: relative; float: left; width: 100%; text-align: center;} #credits .logo span { position: relative; display: block; margin: 0 auto; margin-bottom: .5em} #credits .logo span:nth-child(1){width: 25%} #credits .logo span img {display: block; width: 100%} #credits .credits-text {position: relative; float: left; width: 100%} #credits .credits-text p.credits-p {text-align: justify; font-size: .688em; padding: 0 2em} #credits .credits-text p.credits-p:nth-child(2) {font-size: .583em; margin-top: 2.25em; padding: 0 2.44em} #credits .credits-text p.credits-p span {padding: 0em ; line-height: 2.5em} #credits .credits-text p.credits-p span:nth-child(1) {padding-left: 0 } #credits .credits-text li {position: relative; width: 100%;} #credits .credits-text li:nth-child(1) {padding: 1.75em 0} #credits .credits-text li:nth-child(2) {font-size: .75em; padding: 0 9em; line-height: 1.5em } #credits .credits-text .name-holder {position: relative; display: inline-block; padding: 1em 1.5em} #credits .credits-text .name-holder .type {font-size: .625em; padding-bottom: 1em;} #credits .credits-text .name-holder .name {font-size: 1.275em;} #models .main-wrap {position: absolute; top: 0; left: 0; height: 100%; width: 100%} #models .main-wrap .pics-wrap {position: absolute; left: 0; height: 100%; width: 50%; overflow: hidden;} #models .main-wrap .pics-wrap .pic-wrap {position: absolute; left: 0; top: 0; height: 100%; width: 100%; overflow: hidden; background-color: #fff;} #models .main-wrap .side-wrap {position: absolute; right: 0; height: 100%; background-color: #cdced2; text-align: left; overflow: hidden; width: 50%;} #models .main-wrap .side-wrap {text-align: left;} #models .main-wrap .side-wrap .content-wrap {text-align: left;} #models .main-wrap .side-wrap .content-wrap .content-height {position: relative; height: auto; width: 100%; min-height: 440px} #models .main-wrap .side-wrap .content-wrap .content-height .model-wrap {position: absolute; width: 100%; padding: 0 4.75em; top: 55px; bottom: 2.5em; overflow: hidden;} #models .main-wrap .side-wrap .content-nav {position: relative; width: 100%; padding: .75em 0; padding-left: 4.75em; white-space: nowrap;} #models .main-wrap .side-wrap .description-wrap {position: absolute; left: 4.75em; right: 4.75em; bottom: 0; top: 145px;} #models .main-wrap .side-wrap .content-nav .num-wrap {position: relative; display: inline-block; text-align: center; cursor: pointer; width: 20px; height: 20px; margin-right: 5px; border-bottom: none} /*#models .main-wrap .side-wrap .content-nav .num-wrap { transition: background-color .35s ease-in-out; -webkit-transition: background-color .35s ease-in-out; } #models .main-wrap .side-wrap .content-nav .num-wrap p { transition: color .35s ease-in-out; -webkit-transition: color .35s ease-in-out; } #models .main-wrap .side-wrap .content-nav .num-wrap:hover { background-color: #d9bcac } #models .main-wrap .side-wrap .content-nav .num-wrap:hover p { color: #f9f0e8 }*/ #models .main-wrap .side-wrap .content-nav p {position: relative; font-size: .625em; color: #000; line-height: 18px; margin-left: 1px;} #models .main-wrap .side-wrap .content-nav .num-wrap .line {position: relative; display: block; margin-top : 2px; width: 70%; left: 15%; border-bottom: 1px solid #000; opacity: 0 } #models .main-wrap .side-wrap .content-nav .num-wrap.selected .line {transition: opacity .35s ease-in-out; -webkit-transition: opacity .35s ease-in-out; opacity: 1} #models .main-wrap .side-wrap .name {font-size: 3.5em; color: #000; line-height: 1em} #models .main-wrap .side-wrap .name .long { font-size: .650em; letter-spacing: 0; line-height: 1em; } #models .main-wrap .side-wrap .miss-month {color: #000; padding: 0; font-size: .75em} #models .main-wrap .side-wrap .model-bio {} #models .main-wrap .side-wrap .model-details .description-wrap {position: relative; width: 100%; float: left;} #models .main-wrap .side-wrap .description-wrap .text-scroller {font-size: .75em} #models .iScrollVerticalScrollbar {background-image: url(../img/assets/sliderbar-models.png)} #models .iScrollIndicator {background-image: url(../img/assets/sliderindicator-models.png)} #models .main-wrap .side-wrap .content-nav .num-wrap.selected { } /*#models .main-wrap .side-wrap .content-nav .num-wrap.selected p { color: #f9f0e8 }*/ /* People */ #people-view {color: #fff} #cal-site #site #people-view { } #cal-site #site #people-view .view-intro { position: absolute; font-size: 1.250em; line-height: 1.250em; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; } #cal-site #site #people-view .view-intro .table { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; } #cal-site #site #people-view .view-intro .table .table-cell { text-align: center; } #cal-site #site #people-view .view-intro p { padding: 0 2em; max-width: 960px; margin: 0 auto; } #people-view .table-cell p.title {position: relative; font-size: 4.5em; text-align: center; margin: 0 auto; letter-spacing: .5em; } #people-view .table-cell p.subtitle {position: relative; font-size: 1.4em; margin: 0 auto; text-align: center; padding-right: 1.1em; letter-spacing: .21em; } #people-view .table-cell .line {position: absolute; right: -5px; width: 1px; background-color: #fff; height: 147px; top: -37px} #people-view .desc-holder {position: relative; float: left; margin-left: 30px; line-height: 1.25em;} #people-view .carrousel {position: absolute; bottom: 45px; text-align: center; width: 100%; height: 12.188em;} #people-view .carrousel-wrap {position: relative; display:inline-block; height: 100%; bottom: 0; overflow: hidden; padding: 0 0 0 3.5em; width: 100%;} #people-view .carrousel-wrap .arrow-holder {position: absolute; bottom: 21px; padding: 1em 1.5em; cursor: pointer; z-index: 2;} #people-view .carrousel-wrap .arrow-holder.left {left: 1em; /*display: none;*/ } #people-view .carrousel-wrap .arrow-holder.right {right: 1em; /*display: none;*/ } #people-view .carrousel-wrap .carrousel-mask {position: relative; float: left; width: 100%; height: 100%; overflow: hidden; margin: 0 auto; z-index: 2; } #people-view .carrousel-wrap .carrousel-slider {position: relative; float: left; height: 100%; top: 0; left: 0; width: auto; } #people-view .carrousel-wrap .carrousel-slider .name-holder {position: relative; float: left; z-index: 5; margin: 0 1.25em; width: 13.5em; height: auto; margin-top: 125px; font-size: .563em; color: #fff; line-height: 15px; text-align: left; text-transform: uppercase; cursor: pointer;} #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap {position: relative; padding: 1em; z-index: 2; text-align: left;} #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap p { position: relative; display: inline-block; text-align: left; background: url(../img/assets/ie-bg.png) repeat } #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap p span { position: relative; display: inline-block; } #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder {position: absolute; opacity: 0; width: 100%; height: 0; top: 0; } #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder .bg-over {position: relative; opacity: 0; width: 100%; height: 0; overflow: hidden; background-size: cover; background-position: 50% } #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder .mask-interview {position: relative; height: 0; overflow: hidden; width: 100%; text-align: left; display: block;} #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder p {position: relative; display: block; width: 100%; background-color: #fff; color: #000; padding: 1em; line-height: 1.5em} #people-view .carrousel-wrap.fixed { width: 100% } #people-view .carrousel-wrap.fixed .carrousel-slider {position: absolute;} #cal-site #site #people-view { } #cal-site #site #people-view .view-intro { position: absolute; font-size: 1.250em; line-height: 1.250em; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; } #cal-site #site #people-view .view-intro .table { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; } #cal-site #site #people-view .view-intro .table .table-cell { text-align: center; } #cal-site #site #people-view .view-intro p { padding: 0 2em; max-width: 960px; margin: 0 auto; } #cal-site #site #people-view .view-intro .skip-intro { position: absolute; left: 0; bottom: 1.9em; right: 0; text-align: center; font-size: .700em; color: #fff; text-transform: uppercase; cursor: pointer; } #cal-site #site #people-view .view-intro .skip-intro span { padding-right: 0; } #cal-site #site #people-view .view-intro .skip-intro img { position: relative; top: 1px; padding-left: .5em; display: inline-block; height: 1em; } .tablet #cal-site #site #people-view .view-intro p { padding: 0 4em; max-width: 100%; } .smartphone #cal-site #site #people-view .view-intro p { padding: 0; max-width: 100%; } /* Machine */ #cal-site #site #machine-view { background-color: #fff; color:#000; } #cal-site #site #machine-view .side-panel { position: absolute; top: 0; width: 350px; height: 100%; z-index: 4; right: 0; background-color: #fff; } #cal-site #site #machine-view .side-panel .years-list { position: absolute; top: 0; left: 0; overflow: hidden; } #cal-site #site #machine-view .side-panel .years-list ul { list-style: none; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block { position: relative; width: 90px; height: 50px; text-align: center; background-color: transparent; line-height: 1.1em; font-size: 0.750em; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block .select-block { position: absolute; top: 50px; width: 0; height: 30px; right: 0; overflow: hidden; background-color: #fff; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block .select-block .line { position: absolute; right: 0; height: 1px; width: 20px; background-color: #000; top: 14px; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.main { color: #fff; display: block; height: 50px; background-color: transparent; padding: 1.1em 0; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.coming-soon { position: absolute; top: 0; left: 0; width: 100%; height: 60px; text-transform: uppercase; padding: 1.2em 0; color: #7c7c7c; cursor: pointer; opacity: 0; z-index: 1; font-size: .85em; background: transparent url(../img/assets/ie-bg.png) repeat; } #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block a.coming-soon { position: absolute; top: 0; left: 0; width: 100%; height: 50px; text-transform: uppercase; font-size: .85em; padding: 1.2em 0; color: #7c7c7c; cursor: pointer; opacity: 0; z-index: 1; background: #222 url(../img/assets/ie-bg.png) repeat; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block:nth-child(1) a.main { border: 0; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.main .the { font-size: .850em; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block ul { position: relative; width: 100%; height: auto; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block ul li { position: relative; display: block; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block ul li a { padding: 0; position: relative; display: block; width: 100%; height: 100%; color: #fff; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block ul li a span {} #cal-site #site #machine-view .side-panel .content-list { position: absolute; top: 0; right: 0; width: 260px; height: 100%; overflow: hidden; background-color: #222; } #cal-site #site #machine-view .side-panel .content-list ul { list-style: none; position: absolute; width: 100%; height: auto; display: block; } #cal-site #site #machine-view .side-panel .content-list ul li { position: relative; width: 100%; height: 360px; cursor: pointer; color: #fff; background-size: 100%; background-position: center; overflow: hidden; } #cal-site #site #machine-view .side-panel .content-list ul li img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } #cal-site #site #machine-view .side-panel .content-list ul li .title { font-size: 0.750em; font-weight: 100; position: absolute; top: 0; left: 0; padding: 1em; text-transform: uppercase;} #cal-site #site #machine-view .side-panel .content-list ul li .subtitle { position: absolute; bottom: 0; left: 0; padding: 1em; font-size: .950em; } #cal-site #site #machine-view .side-panel .content-list ul li .icon { position: absolute; right: .5em; height: 40px; background-image: url(../img/assets/components-icons.png); bottom: .32em; width: 40px; } #cal-site #site #machine-view .side-panel .content-list ul li .cal-gallery.icon { background-position: 0 0; } #cal-site #site #machine-view .side-panel .content-list ul li .gallery.icon { background-position: 0 0; } #cal-site #site #machine-view .side-panel .content-list ul li .video.icon { background-position: 0 -40px; } #cal-site #site #machine-view .side-panel .content-list ul li .text.icon { background-position: 0 -80px; } #cal-site #site #machine-view .side-panel .content-list ul li.intro { background-color: #fff !important; color: #000; font-size: .9em; padding: 1.25em; height: auto; } #cal-site #site #machine-view .view-intro { position: absolute; font-size: 1.250em; line-height: 1.250em; z-index: 5; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; } #cal-site #site #machine-view .view-intro .table { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; } #cal-site #site #machine-view .view-intro p { padding: 0 2em; max-width: 960px; margin: 0 auto; } #cal-site #site #machine-view .view-intro .skip-intro { position: absolute; left: 0; bottom: 3em; right: 0; text-align: center; font-size: .700em; color: #fff; text-transform: uppercase; cursor: pointer; } #cal-site #site #machine-view .view-intro .skip-intro span { padding-right: 0em; } #cal-site #site #machine-view .view-intro .skip-intro img { position: relative; top: 1px; padding-left: .5em; display: inline-block; height: 1em; } #cal-site #site #machine-view .wrap { background-color: transparent; } #cal-site #site #machine-view .side-panel .content-list ul li:nth-child(1) { background-color: #1e1e1e; } #cal-site #site #machine-view .side-panel .content-list ul li:nth-child(2) { background-color: #1e1e1e; } #cal-site #site #machine-view .side-panel .content-list ul li:nth-child(3) { background-color: #1e1e1e; } #cal-site #site #machine-view .side-panel .content-list ul li:nth-child(4) { background-color: #1e1e1e; } .touch #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.coming-soon { opacity: 1 !important; } .touch #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block a.coming-soon { opacity: 1 !important; } .tablet #cal-site #site #machine-view .view-intro p { padding: 0 4em; max-width: 100%; } .smartphone #cal-site #site #machine-view .view-intro p { padding: 0; max-width: 100%; } .smartphone #cal-site #site .mobile-landing { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5 !important; color: #fff; overflow: hidden; } .smartphone #cal-site #site .mobile-landing .intro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .smartphone #cal-site #site .mobile-landing .decs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .smartphone #cal-site #site .mobile-landing .decs ul { position: relative; max-width: 260px; margin: 0 auto; } .smartphone #cal-site #site .mobile-landing .decs ul li { position: relative; width: 100%; background-color: rgba(0,0,0,.3); margin: .750em 0; height: 40px;border: 1px solid #fff; } .smartphone #cal-site #site .mobile-landing .decs ul li a { position: relative; display: block; width: 100%; height: 100%; line-height: 38px; font-size: .750em; } .smartphone #cal-site #site .mobile-landing .decs ul li a img { width: 1.1em; position: absolute; right: 2em; top: 15px; } .smartphone #cal-site #site .mobile-landing .decs ul li a span {} .smartphone #cal-site #site .mobile-landing .table { position: relative; z-index: 1; } .smartphone #cal-site #site .mobile-landing .table p { font-size: .850em; padding: 0 1em; line-height: 1.50em; } .smartphone #cal-site #site .mobile-landing .scroll-tip { padding: 1em 2em; } .smartphone #cal-site #site .mobile-landing .scroll-tip .down { border: 1px solid #fff; width: 100%; max-width: 260px; height: 40px; line-height: 35px; } .smartphone #cal-site #site .mobile-landing .scroll-tip .down p { padding-right: 0; } .smartphone #cal-site #site .mobile-landing .scroll-tip .down img { width: .95em; height: auto !important; } /* Members */ #cal-site #site #members-view { background-color: #000; color:#fff; } #members-view .members-wrap { position: absolute; height: 540px; width: 100%; top: 50%; margin-top: -230px; text-align: center; transition: margin-top .35s ease-out; -webkit-transition: margin-top .35s ease-out; } #members-view .year-cover { position: relative; width: 600px; height: 400px; margin: 0 auto; transition: height .35s ease-out; -webkit-transition: height .35s ease-out; } #members-view .year-cover .cover-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #1e1e1e; } #members-view .year-cover .col-shown { position: relative; float: left; width: 300px; height: 100%; padding: .700em; } #members-view .year-cover .col-shown .cover-image { position: relative;width: 100%;height: 100%;background-size: contain;background-repeat: no-repeat;background-position: center; } #members-view .year-cover .col-shown.actions-wrap { padding: 0; } #members-view .year-cover .col-shown .year-details { padding: 1.2em 0 0; } #members-view .year-cover p.year-label, #members-view .year-cover p.city-label { margin-bottom: 1.15em; transition: margin-bottom .35s ease-out; -webkit-transition: margin-bottom .35s ease-out; } #members-view .year-cover p.photographer-label {font-size: 1.563em; margin-bottom: .5em;} #members-view .years-list { position: relative; width: 100%; height: 41px; margin: 20px 0; transition: margin .35s ease-out; -webkit-transition: margin .35s ease-out; } #members-view .years-list .line { position: absolute; bottom: 8px; left: 0; width: 0; height: 1px; background-color: #fff; z-index: 2; } #members-view .years-list ul { list-style: none; text-align: center; position: absolute; width: 100%; } #members-view .years-list ul li { display: inline-block; padding: 1.667em; font-size: .563em; cursor: pointer; } #members-view .years-wrap { position: relative; width: 100%; } #members-view .years-wrap ul { list-style: none; text-align: center; } #members-view .years-wrap ul li { background-color: #1e1e1e; display: inline-block; font-size: .688em; padding: 1.364em 3.636em; color: #fff; cursor: pointer; position: relative; } #members-view .years-wrap ul li span { position: relative; z-index: 2; } #members-view .years-wrap ul li .white-bg {position: absolute;display: block;background-color: #fff;top: 0;left: 0;right: 0;bottom: 0; z-index: 1; } #members-view .years-wrap ul li.selected { } #members-view .actions-list { position: relative; width: 100%; margin: 0 auto; text-align: center; } #members-view .actions-list ul { list-style: none; text-align: center; width: 100%; padding: 0 3em; position: relative;} #members-view .actions-list ul li { display: block; padding: 1.667em 0; cursor: pointer; background-color: #fff; margin: 1.444em 0; color: #000; text-transform: uppercase; font-size: .563em; } #members-view.minimize .members-wrap { margin-top: -200px; } #members-view.minimize .year-cover { height: 360px; } #members-view.minimize .years-list { margin: 10px 0; } #members-view.minimize .year-cover p.year-label, #members-view.minimize .year-cover p.city-label { margin-bottom: 0em; } #members-view.auth-minimize .members-wrap { height: 400px; margin-top: -200px; } #members-view.auth-minimize.minimize .members-wrap { margin-top: -155px; } .tablet #members-view .years-list { margin: 12px 0; } /* Sidenav */ #cal-site #site #side-nav { position: static; } #cal-site #site #side-nav .arrow { position: absolute; top: 50%; bottom: 130px; width: 80px; overflow: hidden; z-index: 2; } #cal-site #site #side-nav .arrow-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; line-height: .750em; text-align: center; } #cal-site #site #side-nav .arrow-wrap img { position: absolute; top: 50%; margin-top: -7px; } #cal-site #site #side-nav .arrow-wrap img.arrow-black {} #cal-site #site #side-nav .arrow-wrap img.arrow-white {} #cal-site #site #side-nav .arrow-label { position: absolute; width: 100%; height: 100%; left: 0; line-height: .750em; text-align: center; cursor: pointer; top: 0; } #cal-site #site #side-nav .arrow.arrow-left { left: 0; } #cal-site #site #side-nav .arrow.arrow-right { right: 0; } #cal-site #site #side-nav .arrow.arrow-left img.arrow-white, #cal-site #site #side-nav .arrow.arrow-left img.arrow-black { right: 10px; width: 40px; height: 15px } #cal-site #site #side-nav .arrow.arrow-right img.arrow-white, #cal-site #site #side-nav .arrow.arrow-right img.arrow-black { left: 10px; width: 40px; height: 15px } #cal-site #site #side-nav .arrow span { text-transform: uppercase; font-size: 0.65em; } #cal-site #site #people-sub-view { } #cal-site #site #people-sub-view .wrap { /*border: 6px solid #fff;*/ } #cal-site #site #people-sub-view .cta { color: #fff; } #cal-site #site #machine-sub-view .iScrollVerticalScrollbar { bottom: 0; } #cal-site #site #members-sub-view .iScrollVerticalScrollbar { bottom: 0; } /* Mobile panel */ #cal-site #site .mobile-panel { position: absolute; top: 0; width: 90px; bottom: 0; z-index: 4; right: -90px; background-color: #fff; } #cal-site #site .mobile-panel .mobile-years-list { position: absolute; top: 0; left: 0; overflow: hidden; } #cal-site #site .mobile-panel .mobile-years-list ul { list-style: none; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block { position: relative; width: 90px; height: auto; text-align: center; background-color: #7c7c7c; font-size: 0.750em; line-height: 1.1em; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block .select-block { position: absolute; width: 0; background-color: #fff; right: 0; overflow: hidden; height: 30px; top: 50px; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block .select-block .line { position: absolute; right: 0; height: 1px; width: 20px; background-color: #000; top: 14px; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block a.main { color: #fff; display: block; background-color: #222; height: 50px; padding: .9em 0; border-top: 1px solid #000; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block:nth-child(1) a.main { border: 0; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block a.main .the { font-size: .850em; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block ul { position: relative; width: 100%; height: auto; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block ul li { position: relative; display: block; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block ul li a { padding: 0; position: relative; display: block; width: 100%; height: 100%; color: #fff; line-height: 50px; } #cal-site #site .mobile-panel .mobile-years-list ul li.years-block ul li a span {} #cal-site #site .mobile-panel-cta { position: absolute; top: 1.75em; right: -1px; border: 1px solid #fff; padding: .5em; color: #fff; font-size: .750em; z-index: 3 !important; } #cal-site #site .mobile-panel-cta span {margin: 0 5px} #cal-site #site .mobile-panel-cta .panel-icon {position: relative; display: inline-block; width: 10px; height: 10px; } #cal-site #site .mobile-panel-cta .panel-icon img {display: block; width: 100%} /* Social */ #social { position: static; } #social #share-box { position: absolute; z-index: 1; right: 1.5em; top: 28px; } #social #share-wrap {position: absolute; right: 0; top: 0; width: 125px; height: 49px; border: 1px solid; z-index: 1; transition: border-color .4s ease-out; -webkit-transition: border-color .4s ease-out; } #social .reduced-wrap {position: relative; float: left; width: 100%; height: 100%} #social .col-menu {position: relative; width: 50%; float: left; height: 100%; cursor: pointer;} #social .cols-separator {position: absolute; left: 50%; top: 15px; height: 20px; width: 1px; border-left: 1px solid; transition: border-color .4s ease-out; -webkit-transition: border-color .4s ease-out; } #social .share-icon {position: relative; display: block; height: 20px; width: 20px; margin: 0 auto; top: 15px; overflow: hidden; cursor: pointer;} #social .share-icon img {position: absolute; top: 0; left: 0; width: 100%; height: auto;} #social .language p {position: relative; display: inline-block; font-size: 0.563em; line-height: 20px; top: 15px; height: 20px; width: 100%; text-align: center; overflow: hidden; cursor: pointer; } #social .language p span {position: relative; display: block; line-height: 20px} #social .language.it p span {transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -moz-transition: top .25s ease-in-out; top: 0px} #social .language.it:hover p span {transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -moz-transition: top .25s ease-in-out; top: -20px} #social .language.en p span {transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -moz-transition: top .25s ease-in-out; top: -20px} #social .language.en:hover p span {transition: top .25s ease-in-out; -webkit-transition: top .25s ease-in-out; -moz-transition: top .25s ease-in-out; top: 0px} #social .extended-wrap {position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden;} #social .extended-wrap .share-on {text-align: left; padding: 0 1.25em} #social .extended-wrap .share-on p {font-size: .688em; line-height: 50px} #social .extended-wrap .bottom-separator {position: relative; width: 100%; height: 1px; border-top: 1px solid} #social .close-share {position: absolute; height: 40px; width: 40px; top: 5px; right: 5px; cursor: pointer; background: url(../img/assets/ie-bg.png) repeat} #social .close-share .cross-bar-1 {position: absolute; width: 1px ; height: 13px; border-left: 2px solid; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); left: 20px; top: 15px} #social .close-share .cross-bar-2 {position: absolute; width: 1px ; height: 13px; border-left: 2px solid; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); left: 20px; top: 15px } #social .socials-list {position: relative; width: 100%; height: auto; padding: 0 1.25em; margin-top: 15px} #social .socials-list .row-social {position: relative; width: 100%; cursor: pointer;} #social .socials-list .row-social p {font-size: .563em; line-height: 50px} #social .socials-list .row-social .icon-wrap {position: absolute; width: 20px; height: 20px; overflow: hidden; right: .1em; top: 15px;} #social .socials-list .row-social .icon-wrap img {position: absolute; width: 100%; height: 100%; top: 0; left: 0} #social .icon-black {opacity: 0; } #social.black p {transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #000 } #social.white p {transition: color .4s ease-out; -webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; color: #fff } #social.white #share-wrap { border-color: #fff; } #social.black #share-wrap { border-color: #000; } #social.white .cols-separator { border-color: #fff; } #social.black .cols-separator { border-color: #000; } #social.white .icon-black {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0 } #social.white .icon-white {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1 } #social.black .icon-black {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 1 } #social.black .icon-white {transition: opacity .4s ease-out; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; opacity: 0 } #social #g-mute { position: absolute; top: 9px; right: 145px; width: 28px; height: 30px; overflow: hidden; cursor: pointer; } #social #g-mute #g-mute-wrap { position: relative; width: 100%; height: 100%; } #social #g-mute img { position: absolute; top: 0; left: 0; width: 32px; height: auto; } .touch #social #g-mute { display: none; } #social #banner-wrap { position: absolute; right: 124px; top: 0; width: 250px; height: 49px; overflow: hidden; transition: border-color .4s ease-out; -webkit-transition: border-color .4s ease-out; z-index: 1 !important; } #social #banner-wrap #banner { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid; cursor: pointer; } #social #banner-wrap #banner img { position: absolute; top: 0px; left: 0; width: 250px; height: auto; } #social #banner-wrap #banner img.banner-open { visibility: hidden; opacity: 0; } #social #banner-wrap #banner img.banner-close { } #social.white #banner-wrap { border-color: #fff; } #social.black #banner-wrap { border-color: #000; } .tablet #social #banner-wrap { display: none; } /* Login */ #login { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,.5); z-index: 2; display: none; } #login .box-panel {position: relative; width: 545px; height: auto; background-color: #fff; margin: 0 auto; padding: 1.875em;} #login .box-panel .close {position: absolute; top: 0; background-color: #000} #login .box-panel h2 {font-size: .688em; margin-bottom: 1em; text-transform: uppercase;} #login .box-panel h3, #login .box-panel h4, #login .box-panel p {font-size: .5em} #login .box-panel h3 {margin-bottom: .5em} #login .box-panel h4 {margin-bottom: 1.5em} #login .box-panel p {text-align: justify; line-height: 1.250em;} #login .box-panel .input-wrap { position: relative; display: inline-block; width: auto; height: 50px; margin: 0 auto; margin-top: 1em; padding-left: 1em; border: 1px solid #737373; } #login .box-panel .input-wrap .input-code {position: relative; text-align: center;} #login .box-panel .input-wrap .input-code input.goth-book {margin: 0 auto; text-align: left; width: auto; font-style: italic; } #login .box-panel .close .cross-bar-1{ position: absolute; top: 7px; left: 13px; width: 2px; height: 15px; z-index: 2; background-color: #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); } #login .box-panel .close .cross-bar-2 { position: absolute; top: 7px; left: 13px; width: 2px; height: 15px; z-index: 2; background-color: #fff; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} #login .box-panel .input-wrap .input-code p {position: relative; cursor: pointer; display: inline-block; color: #fff; background-color: #000; line-height: 49px; font-size: .75em; padding: 0 1.25em;} #login .box-panel .input-wrap p.input-error {position: absolute; margin-top: 5px; color: #f00; text-align: center; left: 0; width: 100% } #login { cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } #login:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } #login.black, #login.white { color: #000 !important} .smartphone #login.black { background-color: #fff; color: #000 !important} .smartphone #login.white { background-color: #000; color: #000 !important} .smartphone #login {position: absolute; top: 0px; bottom: 0; height: auto; background-color: #000; text-align: center;} .smartphone #login .box-panel {position: absolute; top: 70px; bottom: 0; width: 100%; height: auto; padding: 1em 1.25em;} .smartphone #login .box-panel h2 { font-size: .75em } .smartphone #login .box-panel p { font-size: .625em; line-height: 1.3em } .smartphone #login .box-panel .close {display: none;} .smartphone #login .box-panel .input-wrap .input-code input{ font-size: .675em; } .smartphone #login .box-panel .input-wrap .input-code input::-webkit-input-placeholder { color: #000;} .smartphone #login .overlay-code {position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; background-color: rgba(0,0,0,.5); z-index: 3} /* Components */ .text-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .text-view .wrap { background-color: #252525; } .gallery-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .video-view { top: 0; left: 0; bottom: 0; right: 0; background-color: #000; z-index: 1; position: absolute; } .smartphone .video-view { background-color: #000; } .video-view video { position: absolute; z-index: 1; } .video-view .video-black { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background-color: rgba(0,0,0,.2); } .gallery-view .wrap, .video-view .wrap { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } #people-sub-view .video-view .alt-subtitles { display: none; visibility: hidden; } #machine-sub-view .video-view .alt-subtitles { position: absolute; left: 6.70em; bottom: 14em; cursor: pointer; color: #fff; display: inline-block; font-size: .575em; margin-right: 1.25em; padding: 1em; z-index: 5; } /* Gallery */ .gallery-view .wrap { } .gallery-view .gallery-item { position: absolute; } .gallery-view .gallery-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .gallery-view .gallery-item img.gallery-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gallery-view .gallery-item .image-preload { position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; background-color: #666; margin-left: -100px; margin-top: 0px; } .gallery-view .gallery-item .image-preload .preload-bar { position: absolute; top: 0; left: 0; width: 2%; height: 100%; background-color: #ccc; } .gallery-view .gallery-nav { position: absolute; left: 0; right: 0; top: 50%; margin-top: -15px; } .gallery-view .gallery-nav .prev { position: absolute; top: 0; width: 125px; height: 30px; cursor: pointer; overflow: hidden; left: 0; } .gallery-view .gallery-nav .prev .arrow { position: absolute; top: 8px; left: 0; width: 40px; height: 15px; overflow: hidden; } .gallery-view .gallery-nav .prev .arrow .arrow-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gallery-view .gallery-nav .prev .arrow .arrow-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gallery-view .gallery-nav .prev .label { position: absolute; text-align: right; height: 15px; top: 8px; right: 0; overflow: hidden; text-transform: uppercase; font-size: .575em; width: 68%; } .gallery-view .gallery-nav .prev .label .label-1 { position: absolute; top: 2px; right: 0; } .gallery-view .gallery-nav .prev .label .label-2 { position: absolute; top: 2px; right: 0; } .gallery-view .gallery-nav .next { position: absolute; top: 0; width: 125px; height: 30px; cursor: pointer; overflow: hidden; right: 0; } .gallery-view .gallery-nav .next .arrow { position: absolute; top: 9px; width: 40px; height: 15px; right: 0; overflow: hidden; } .gallery-view .gallery-nav .next .arrow .arrow-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gallery-view .gallery-nav .next .arrow .arrow-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gallery-view .gallery-nav .next .label { position: absolute; text-align: left; left: 0; overflow: hidden; text-transform: uppercase; font-size: .575em; height: 15px; top: 8px; width: 66%; } .gallery-view .gallery-nav .next .label .label-1 { position: absolute; top: 2px; left: 0; } .gallery-view .gallery-nav .next .label .label-2 { position: absolute; top: 2px; left: 0; } .gallery-view .gallery-title { position: absolute; width: 100%; z-index: 3; ; } .gallery-view .gallery-title .label { position: relative; bottom: 0; left: 0; height: 20px; margin: 0 auto; overflow: hidden; cursor: default; width: 100%; font-size: .850em; } .gallery-view .gallery-title .label .label-1 { position: absolute; top: 0; left: 0; text-align: center; width: 100%; } .gallery-view .gallery-title .label .label-2 { position: absolute; top: 0; left: 0; text-align: center; width: 100%; } #index-view .gallery-view .gallery-nav .prev .arrow .arrow-1 { background-image: url(../img/assets/arrow-prev-black.png); background-size: 100% } #index-view .gallery-view .gallery-nav .prev .arrow .arrow-2 { background-image: url(../img/assets/arrow-prev-black.png); background-size: 100% } #index-view .gallery-view .gallery-nav .next .arrow .arrow-1 { background-image: url(../img/assets/arrow-next-black.png); background-size: 100% } #index-view .gallery-view .gallery-nav .next .arrow .arrow-2 { background-image: url(../img/assets/arrow-next-black.png); background-size: 100% } #index-view .gallery-view .gallery-nav .prev .label { color: #000; } #index-view .gallery-view .gallery-nav .next .label { color: #000; } #index-view .gallery-view .gallery-title .label { color: #000; } #machine-sub-view .gallery-view .gallery-nav .prev .arrow .arrow-1 { background-image: url(../img/assets/arrow-prev-black.png); background-size: 100% } #machine-sub-view .gallery-view .gallery-nav .prev .arrow .arrow-2 { background-image: url(../img/assets/arrow-prev-black.png); background-size: 100% } #machine-sub-view .gallery-view .gallery-nav .next .arrow .arrow-1 { background-image: url(../img/assets/arrow-next-black.png); background-size: 100%} #machine-sub-view .gallery-view .gallery-nav .next .arrow .arrow-2 { background-image: url(../img/assets/arrow-next-black.png); background-size: 100%} #machine-sub-view .gallery-view .gallery-nav .prev .label { color: #000; } #machine-sub-view .gallery-view .gallery-nav .next .label { color: #000; } #machine-sub-view .gallery-view .gallery-title .label { color: #000; } #members-sub-view .gallery-view .gallery-nav .prev .arrow .arrow-1 { background-image: url(../img/assets/arrow-prev-white.png); background-size: 100% } #members-sub-view .gallery-view .gallery-nav .prev .arrow .arrow-2 { background-image: url(../img/assets/arrow-prev-white.png); background-size: 100%} #members-sub-view .gallery-view .gallery-nav .next .arrow .arrow-1 { background-image: url(../img/assets/arrow-next-white.png); background-size: 100%} #members-sub-view .gallery-view .gallery-nav .next .arrow .arrow-2 { background-image: url(../img/assets/arrow-next-white.png); background-size: 100%} #members-sub-view .gallery-view .gallery-nav .prev .label { color: #fff; } #members-sub-view .gallery-view .gallery-nav .next .label { color: #fff; } #members-sub-view .gallery-view .gallery-title .label { color: #fff; } .gallery-view.gallery .gallery-nav .prev { width: 100px; } .gallery-view.gallery .gallery-nav .next { width: 100px; } .gallery-view.gallery .gallery-title .label .label-2 { display: none; } /* VIDEO PLAYER */ .video-ui {position: absolute; height: auto; width: 100% ; max-width: 960px; left: 50%; margin-left: -480px; bottom: 140px; z-index: 5; } /* UI WRAP */ .video-ui-wrap {position: relative; width: 100%; padding: 0 60px; } .video-ui-main {position: relative; width: 100%; height: 32px; } .smartphone .video-ui-wrap { padding: 0 30px; } /* LEFT GROUP */ .video-ui-left {white-space: nowrap;} /* actions */ .video-ui-actions-wrap {position: relative; display: inline-block; color: #fff; vertical-align: inherit; margin-right: 5px; min-width: 150px; top: -3px;} .video-ui-actions-wrap p.title {font-size: 1.475em; text-align: left; } .video-ui-actions-wrap .actions-holder {position: relative; display: table; width: 100%; text-align: left; } .video-ui-actions-wrap .actions-holder .action-cell {position: relative; display: table-cell; width: auto; line-height: 1em} .video-ui-actions-wrap .actions-holder .action-cell p {cursor: pointer;} .video-ui-actions-wrap .actions-holder .action-cell p.disabled {cursor: default;} .video-ui-actions-wrap .actions-holder p {display: inline-block; font-size: .575em; margin-right: 1.25em; padding-bottom: 1em} /* play */ .video-ui-play { position: relative; display: inline-block; left: 5px; top: 1px; width: 28px; height: 30px; vertical-align: inherit; cursor: pointer; overflow: hidden; } .video-ui-play img { position: absolute; display: block; width: 26px; margin-right: 0; } /* END LEFT GROUP */ /* RIGHT GROUP */ .video-ui-right {position: relative; width: 100%} /* progress bar */ .video-ui-track-wrap {position: relative; height: 3px; width: 100%; padding: 0 10px } .video-ui-track {position: relative; width: 100%; height: 1px; top: 1px; background-color: #606060} .video-ui-progress {position: relative; height: 1px; top: 0; width: 0%; background-color: #fff} /* label extended */ .video-ui-extended {position: relative; color: #fff; font-size: .55em; line-height: 32px; padding: 0 5px; white-space: nowrap; } .video-ui-extended p { cursor: pointer; position: relative; overflow: hidden; } .video-ui-extended p span { position: relative; text-align: right; display: block; } .video-ui-extended p span.label { position: absolute; top: 0; left: 0; width: 100%; } .video-ui-extended p span.label br { display: none; } .video-ui-extended p span br { display: none; } .touch .video-ui-extended { padding: 0 15px; } .smartphone .video-ui-extended p span.label br { display: block; } /* mute */ .video-ui-mute { position: relative; padding: 0 10px 0 5px; } .video-ui-mute .mute { position: relative; top: 0px; width: 28px; height: 30px; cursor: pointer; overflow: hidden; display: inline-block; left: 0; } .video-ui-mute img { position: absolute; display: block; width: 32px; margin-right: 0; } .touch .video-ui-mute { display: none; } /* close */ .video-ui-close {position: relative; width: 32px; cursor: pointer; } /* END RIGHT GROUP */ /* Smartphone Scroll */ .smartphone .smartphone-scroll {z-index: 1;} .smartphone .smartphone-scroll ul { position: absolute; list-style: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;} .smartphone .smartphone-scroll ul li { display: block; position: relative; background-size: cover; background-position: center; color: #fff; text-align: center; } .smartphone .smartphone-scroll ul li.landing .table { padding: 0 1em 4em; } .smartphone .smartphone-scroll ul li .table {padding: 0 1em 6em;} .smartphone .smartphone-scroll ul li .table-cell {vertical-align: bottom;} .smartphone .smartphone-scroll ul li .width-helper {position: relative; display: inline-block; text-align: center;} .smartphone .smartphone-scroll ul li .decade-title {font-size: 1.5em; margin: 1em 0} .smartphone .smartphone-scroll ul li .cta-decade {position: relative; margin: 0 auto; padding: .9em; width: 200px; border: 1px solid; margin-bottom: .5em} .smartphone .smartphone-scroll ul li.landing .cta-decade {min-width: 220px; width: 100%; } .smartphone .smartphone-scroll ul li .cta-decade p {font-size: .625em; } .smartphone .smartphone-scroll ul li .cta-decade p.watch-video {margin-left: -10px} .smartphone .smartphone-scroll ul li .decade-title {font-size: 1.5em; margin: 1em 0} .smartphone .smartphone-scroll ul li .cta-decade p.character-decade {font-size: 1.5em} .smartphone .smartphone-scroll ul li .cta-decade .icon-play {position: absolute; width: 9px; height: 11px; top: 15px; right: 10px} .smartphone .smartphone-scroll ul li .cta-decade .icon-play img {position: relative; display: block; width: 100%} .smartphone .smartphone-scroll ul li.landing .arrow-down {display: none;} .smartphone .smartphone-scroll ul li:last-child .arrow-down {display: none;} .smartphone .smartphone-scroll ul li .source-wrap p.source-title { font-size: .625em; text-transform: uppercase;} .smartphone .smartphone-scroll ul li .source-wrap p.source-type { font-size: 1.5em; margin: .5em 0 1em} /* Smartphone */ .smartphone { background-color: transparent; } .smartphone .sub-nav { display: none; visibility: hidden; } .smartphone .home-video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #fff; z-index: 1; } .smartphone .home-video .cta-wrap {position: relative; width: 200px; margin: 0 auto; text-align: center;} .smartphone .home-video .cta-wrap img.cal-icon { position: relative; width: 165px; margin: 0 auto; display: block; opacity: 0; visibility: hidden; } .smartphone .membership-video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #fff; z-index: 1; } .smartphone .membership-video .cta-wrap {position: relative; margin: 0 auto; text-align: center; top: 5em} .smartphone .membership-video .cta-wrap .video-title {position: relative; font-size: 1.75em; margin-bottom: .75em} .smartphone .cta-video {position: relative; margin: 0 auto; padding: 1em 2em; width: 200px; border: 1px solid} .smartphone .cta-video p {font-size: .625em; margin-left: -10px} .smartphone .cta-video .icon-play {position: absolute; width: 9px; height: 11px; top: 50%; right: 20px; margin-top: -6px} .smartphone .cta-video .icon-play img {position: relative; display: block; width: 100%} .smartphone #machine-sub-view .home-video { display: none; } .smartphone #cal-site #site #machine-view .side-panel { display: none; } .smartphone #models .main-wrap .side-wrap .description-wrap .close-wrap {width: 50px; height: 50px; bottom: 22px; right: 2px} .smartphone #models .main-wrap .side-wrap .description-wrap .close-wrap .close {left: 10px; top: 10px} @media only screen and (max-width: 1023px) { #credits .wrapper-960max {font-size: 80% } } /* ipad portrait */ @media only screen and (max-device-width: 768px) and (orientation: portrait){ .tablet.hide-desk {display:block; } .hide-mobile { display: block; } .hide-tablet { display: none; } .back { top: 35px;} .tablet .text-mask {width: 100%; height: 515px} .tablet #bio .col-right {padding-right: 2em} .tablet #bio .col-right p {width: 100%;} .tablet #models .main-wrap .side-wrap .content-wrap .content-height {min-height: 610px} #cal-site #site header .menu-tablet-list .footer .foo-wrap p {padding-left:7em; } /*#social { display: none; }*/ } /* ipad landscape */ @media only screen and (max-device-width: 1024px) and (orientation: landscape){ .tablet.hide-desk { display: block;} /*.hide-mobile {display: block;} .hide-tablet {display: none;}*/ .back { top: 35px;} .tablet #bio .col-right {padding: 0} .tablet #bio .col-right p {width: 50%;} } @media only screen and (min-width: 1101px) and (max-width: 1280px){ #models .main-wrap .side-wrap .name {font-size: 3em} #models .main-wrap .side-wrap .content-wrap .content-height .model-wrap {} #models .main-wrap .side-wrap .description-wrap { top: 120px} } @media only screen and (min-width: 973px) and (max-width: 1100px){ #models .main-wrap .side-wrap .name {font-size: 2.5em} #models .main-wrap .side-wrap .description-wrap { top: 100px} } @media only screen and (max-width: 972px) { #credits .wrapper-960max {font-size: 75% } .video-ui {left: 0; margin: 0} #models .main-wrap .side-wrap .name {font-size: 2em} #models .main-wrap .side-wrap .description-wrap { top: 80px} } @media only screen and (max-device-width: 736px) { .hide-mobile {display: none !important} .hide-desk {display: block !important} .min-content {width: 100% ; height: 100%; left: 0; top: 0; margin: 0;} .arrow-down {position: absolute; bottom: 1em; left: 50%; margin-left: -20px; width: 40px; height: 40px; text-align: center; z-index: 2} .arrow-down img {position: relative; margin: 0 auto; width: 15px; display: block; top: 16px} .wrapper-960 {width: 100%; height: 100%; float: left; margin: 0; left: 0; top: 0} .wrapper-960min {min-width: 100%; min-height: 100%;} .text-mask {position: absolute; top: 0; width: 100%; height: 100%; padding: 4em 2em 2em; padding-right: 20px;} .text-scroller {position: relative; top: 0; font-size: .875em; line-height: 1.5em; padding-right: 20px;} .text-scroller-wrap {padding: 0} .smartphone .back {top: 18px; right: 18px; padding: 1.25em; font-size: 9px; } .smartphone #people-sub-view .back {top: 15px; right: 15px; padding: 1.25em; font-size: 9px; } .smartphone #cal-site #site header .menu-tablet-list ul {position: absolute; left: 31px; top: 12px} .smartphone #cal-site #site header .menu-tablet-list ul.sub-nav-mobile {position: relative; top: 0; } .smartphone #cal-site #site header .menu-tablet-list ul.sub-nav-mobile li {display: block;} .smartphone #cal-site #site header .menu-tablet-list ul.sub-nav-mobile li a.cta {padding: .5em 0 0} .smartphone #cal-site #site header .menu-tablet-list ul li.main-menu-item {display: block;} .smartphone #cal-site #site header .menu-tablet-list ul li.main-menu-item:nth-last-child(2), .smartphone #cal-site #site header .menu-tablet-list .lock-tablet {display: inline-block; } .scroll-tip {position: absolute; width: 100%; bottom: 1.5em; text-align: center; z-index: 1;} .scroll-tip .ui-holder {position: relative; text-align: center; width: auto; margin: 0 auto} .scroll-tip .ui-holder p {display: inline-block; font-size: .75em; padding-right: 1em} .scroll-tip .ui-holder img {display: inline-block; height: .75em} #cal-site #site #people-view .view-intro .skip-intro { font-size: 1em; } #cal-site #site #machine-view .view-intro .skip-intro { font-size: 1em; } #credits.table, #credits.table > div.table-cell {display: block;} #credits .table-cell .min-content .logo {margin-top: 5.5em} #credits .table-cell .min-content .logo span {margin-bottom: .25em} #credits .table-cell .min-content .logo span:nth-child(1) img {width: 30%} #credits .table-cell .min-content .logo span:nth-child(2) img {width: 50%} #credits .wrapper-960max {position: absolute; font-size: 100%; max-height: none; max-width: none; top: 4em; left: 0; right: 0; bottom: 0em; } #credits .logo {float: none; } #credits .logo span:nth-child(1) {width: 50%} #credits .credits-text {position: absolute; float: none; top: 5.5em; bottom: 3em; overflow: hidden; } #credits .credits-text .iScrollVerticalScrollbar {bottom: 0; top: 0 } #credits .credits-text li:nth-child(1) {position: relative; font-size: 100%; padding: 0; max-height: none; max-width: none; top: 0em; left: 0; right: 0; bottom: 0em; } #credits .credits-text .mobile-table {display: table; height: 50%;} #credits .credits-text .mobile-table .mobile-col {display: block; vertical-align: middle;} #credits .credits-text .name-holder {padding: .75em .15em .25em; width: 100%} #credits .credits-text .name-holder .type {padding-bottom: .25em} #credits .credits-text .name-holder .name {font-size: .675em} #credits .credits-text p.credits-p, #credits .credits-text p.credits-p:nth-child(2) {font-size: .475em; padding: 0 4em 0 2em} #bio .col-right {width: 100%; float: none;} #bio .col-right p {text-align: center; color: #fff; left: inherit;} #bio .table .table-cell p.title {font-size: 2em; width: 100%; text-transform: capitalize; margin-top: 2em; left: inherit;} #bio .table .table-cell p.cta {font-size: .75em; margin-top: 1.25em; padding: 1.25em 2.5em; border: 1px solid #fff; display: block; top: 0; left: auto;} #bio .col-right p.cta span {padding: 0; border: none;} #bio .over-view {font-size: .75em; margin-right: 40px} #bio .over-view .min-content {padding: 1.5em 40px 1.5em 1.5em; } #bio .over-view .min-content .scroller-wrap {padding: 0} .scrollbar-holder {height: 100%; top: 0; margin: 0; padding: 1.5em 0;} .scrollbar-holder .close {position: absolute; bottom: 1.5em} #people-view .table-cell p.title {font-size: 2.75em; margin-left: .5em } #people-view .table-cell p.subtitle {font-size: 0.85em; margin-left: 1.6em; } #people-view .desc-holder {line-height: .75em; margin-left: 17px} #people-view .desc-holder p {font-size: .5em} #people-view {overflow: scroll;} #people-view .carrousel {position: relative; height: 100%; bottom: auto; float: left;} #people-view .carrousel-wrap {position: relative; display: block; float: left; height: auto; width: 100%; padding: 0} #people-view .carrousel-wrap .arrow-holder {display: none;} #people-view .carrousel-wrap .carrousel-mask {position: relative; float: left; width: 100%; height: auto; margin: 0} #people-view .carrousel-wrap .carrousel-mask .carrousel-slider {position: relative; float: left; width: 100%; height: auto; margin: 0} #people-view .carrousel-wrap .carrousel-slider .name-holder {position: relative; width: 100%; margin: 0; height: 23.50em; display: block;} #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap {position: absolute; text-align: center; width: 52%; height: 100%; right: 0px; display: table; padding: 0; font-size: 1.75em; bottom: 0; text-transform: capitalize} #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap p { display: table-cell; vertical-align: middle; font-weight: 400} #people-view .carrousel-wrap .carrousel-slider .name-holder .character-wrap p span{ font-weight: 400} #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder {height: 100%; opacity: 1;} #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder .bg-over {height: 100%; opacity: 1; } #people-view .carrousel-wrap .carrousel-slider .name-holder .bg-over-holder img {position: absolute; right: 1.15em; bottom: 50%; margin-bottom: -3px; background-color: transparent; width: 18px; height: 6px } #people-view .video-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: .1em; background-color: #fff} #people-view .video-list .back-button {position: absolute; right: 1.5em; top: 1em; z-index: 2; border: 1px solid #fff} #people-view .video-list .back-button p {font-size: .625em; padding: 1.25em } #people-view .video-list .full-cover {background-image: url(../img/assets/videolist-bg-mobile.png); display: table;} #people-view .video-list .full-cover .list-wrap {position: relative; display: table-cell; vertical-align: bottom; width: 100%; padding: 0 1em 1em} #people-view .video-list .full-cover .list-wrap p.name {font-size: 1.5em; padding: .75em 0 } #people-view .video-list .full-cover .list-wrap .row-wrap {position: relative; float: left; width: 100%; } #people-view .video-list .full-cover .list-wrap .row-wrap:nth-child(2) {padding-bottom: 1.75em} #people-view .video-list .full-cover .list-wrap .row-wrap p.title {padding-bottom: .5em; font-size: 1.15em} #people-view .video-list .full-cover .list-wrap .row-wrap .cta-video {position: relative; float: left; border: 1px solid #fff; padding: .75em; width: 46%; margin-right: 4%} #people-view .video-list .full-cover .list-wrap .row-wrap .cta-video p {position: relative; display: inline; font-size: .675em} #people-view .video-list .full-cover .list-wrap .row-wrap .cta-video img {position: relative; float: right; height: 10px; right: .25em; top: .1em} #cal-site #site #people-view .view-intro {font-size: .75em; line-height: 1.5em; padding: 2em} #cal-site #site #people-view .view-intro .table {position: relative; } #cal-site #site #people-view .view-intro .table p br {display: none;} .smartphone #cal-site #site #people-sub-view .wrap { /*border: 2px solid #fff;*/ } #models {min-height: 100%; min-width: 100%} #models .main-wrap .smartphone-height {position: relative; float: left; width: 100%; height: auto;} #models .main-wrap .pics-wrap {position: relative; float: left; width: 100%} #models .main-wrap .pics-wrap .pic-wrap {position: relative; float: left; width: 100%} #models .main-wrap .pics-wrap .pic-wrap img {position: relative; width: 100%;} #models .main-wrap .side-wrap {position: relative; float: left; width: 100%; padding: 0; top: -150px; text-align: center; min-width: 100%; max-width: 100%; overflow: visible;} #models .main-wrap .side-wrap .content-nav {position: absolute; width: 100%} #models .main-wrap .side-wrap .content-wrap .content-height {float: left; min-height: 100%} #models .main-wrap .side-wrap .content-wrap .content-height .model-wrap {position: relative; float: left; padding: 0; top: 0; height: 100%; width: 100%; overflow: visible;} #models .main-wrap .side-wrap .model-details {position: relative; float: left; width: 100%; height: 100% ; text-align: center;} #models .main-wrap .side-wrap .mobile-cta-holder {position: relative; float: left; width: 100%; height: 150px; } #models .main-wrap .side-wrap .model-details .mobile-nav {position: absolute; width: 100%; height: 100%} #models .main-wrap .side-wrap .model-details .mobile-nav .arrow-prev {position: absolute; top: 50%;left: 15px; margin-top: -7px} #models .main-wrap .side-wrap .model-details .mobile-nav .arrow-next {position: absolute; top: 50%;right: 15px; margin-top: -7px} #models .main-wrap .side-wrap .model-details .mobile-nav img {display: block; width: 40px} #models .main-wrap .side-wrap .model-details .name {font-size: 1.563em; padding-top: .25em} #models .main-wrap .side-wrap .description-wrap {position: relative; float: left; top: inherit; left: inherit; bottom: inherit; right: inherit; padding: 4em 0em 2em; } #models .main-wrap .side-wrap .description-wrap .text-scroller {padding: 0 2.286em; } #models .main-wrap .side-wrap .description-wrap .text-scroller .text-scroller-wrap {padding-right: 20px} #models .main-wrap .side-wrap .description-wrap .text-scroller .iScrollVerticalScrollbar {right: 16px} #models .main-wrap .side-wrap .miss-month {position: relative; float: left; font-size: .625em; padding: 0; width: 100%; padding-top: 2em} #models .main-wrap .side-wrap .model-details .bio-model {position: relative; font-size: .625em; margin-top: 1.5em; z-index: 2} #models .main-wrap .side-wrap .model-details .bio-model p {display: inline-block; padding: 1em 1.5em; border: 1px solid #000} #models .main-wrap .side-wrap .scroller-wrap {color: #000} #models .main-wrap .side-wrap .scroller-wrap p {padding: 2em} #models .main-wrap .side-wrap .scrollbar-holder .scrollbar .scrollbar-track {background-color: #e0d8d0} #models .main-wrap .side-wrap .scrollbar-holder .scrollbar .scrollbar-bar {background-color: #000} #members-view .members-wrap { height: 100% !important; margin: 0 !important; top: 0; } #members-view .year-cover {width: 100%; height: 100%; margin: 0} #members-view .year-cover .cover-wrap {background-color: #000; padding: 0 1em } #members-view .year-cover .col-shown.image-wrap img {position: relative; display: block; width: 50%; text-align: center; margin: 0 auto;} #members-view .year-cover .col-shown.image-wrap, #members-view .year-cover .col-shown.actions-wrap {position: static; float: none; width: 100%; height: auto; margin: 0 auto;} #members-view .year-cover .col-shown.image-wrap {position: relative; height: 60%; top: 0} #members-view .year-cover .col-shown .year-details {padding: .5em 0 0 } #members-view .year-cover p.year-label, #members-view .year-cover p.city-label, #members-view .year-cover p.photographer-label {margin-bottom: 0} #members-view .actions-list {position: absolute; bottom: .5em; left: 50%; margin-left: -15px; width: 30px; padding: 10px 7px; } #members-view .actions-list .cta img {position: relative; width: 15px} #cal-site #site #machine-view .view-intro {} #cal-site #site #machine-view .view-intro {font-size: .75em; line-height: 1.5em; padding: 2em} #cal-site #site #machine-view .view-intro .table {position: relative; } #cal-site #site #machine-view .view-intro .table p br {display: none;} .smartphone .video-ui {bottom: 0; color: #fff} .smartphone .video-ui-main {height: auto;} .smartphone .video-smartphone p {text-align: left;} .smartphone .video-smartphone p.title {font-size: 1.5em; margin-bottom: 1em; margin-left: 5px } .smartphone .video-smartphone p.table-title { margin-left: 5px } .smartphone .video-smartphone .col-button {position: relative; width: 50%; padding: .75em .5em 2.5em; font-size: .675em} .smartphone .video-smartphone .actions-holder .col-button {width: 100%} .smartphone .video-smartphone .col-button p {padding: 1em 1em 1em .7em; border: 1px solid #fff;} .smartphone .video-smartphone .col-button .icon-play {position: absolute; width: 9px; height: 11px; right: 11px; top: 50%; margin-top: -15px} .smartphone .video-smartphone .col-button .icon-play img {position: relative; display: block; width: 100%} .smartphone .smartphone-wrap { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 2 !important; } .smartphone .smartphone-scroll { position: absolute; height: auto; width: 100%; float: left; z-index: 1 !important; } .smartphone #people-view .wrapper-960 { position: relative; height: 100%} .smartphone #models .close-wrap { bottom: 2em; right: 10px} .smartphone #models .close .background-close { border: 1px solid #000; } .smartphone #models .close .background-close .cross-bar-1 { background-color: #000 } .smartphone #models .close .background-close .cross-bar-2 { background-color: #000 } .smartphone #index-view .gallery-view .gallery-title .label, .smartphone .gallery-view .gallery-title .label { font-size: .625em; height: 14px; } .smartphone .gallery-view .down-arrow-white {display: block;} .smartphone .gallery-view .down-arrow-black {display: none;} .smartphone #index-view .gallery-view .down-arrow-white {display: none;} .smartphone #index-view .gallery-view .down-arrow-black {display: block;} .smartphone #members-sub-view.sub-section .back {display: none;} } @media only screen and (min-width : 414px) and (orientation: landscape) { .smartphone body { background-image: url(../img/assets/_AltContentSmartphone.jpg); background-size: cover; background-position: 50%; } .smartphone #cal-site { bottom: 100% } } @media only screen and (max-device-width: 736px) { #models .main-wrap .pics-wrap .pic-wrap { position: absolute; } } @media only screen and (max-device-width: 736px) { #models .main-wrap .side-wrap .model-details .mobile-nav { z-index:1; } } /* 3D fix */ #social, .back, .sub-nav, #social #share-wrap, #people-view .carrousel, #cal-site #site .view-intro, .gallery-view .gallery-item, #cal-site #site .mobile-panel-cta, #cal-site #site #sections .section, #cal-site #site header .menu-tablet-list, #cal-site #site #machine-view .side-panel { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } video::-webkit-media-controls { display:none !important; } /* ----------------- Last update 11/2015 ----------------- */ #cal-site #site .scroller .scroller-wrap ul.scroll-list li.scroll-item { cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } #cal-site #site .scroller .scroller-wrap ul.scroll-list li.scroll-item:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } #cal-site #site #machine-view {} #cal-site #site #machine-view .side-panel { bottom: 3em; top: auto; left: 1.5em; width: auto; height: 60px; right: 1.5em !important; border: 1px solid #fff; background: rgba(0,0,0,.15) url(../img/assets/ie-bg.png) repeat; } #cal-site #site #machine-view .side-panel .years-list { width: 100%; height: 59px; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block { display: block; float: left; width: 230px; height: 58px !important; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.main { display: block; width: 100%; height: 54px; top: 3px; position: relative; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block a.coming-soon { top: 6px; color: #fff; height: 48px; line-height: 13px; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block.first { color: #fff; text-transform: uppercase; line-height: 59px; text-align: center; border-right: 1px solid #fff; } #cal-site #site #machine-view .view-intro { background: none; z-index: 1; } #cal-site #site #machine-view .view-intro p { padding: 0 3em; } #cal-site #site #machine-sub-view .video-intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(0,0,0,.1); } #cal-site #site #machine-sub-view .video-intro p { font-size: 1em; color: #fff; line-height: 1.750em; width: 100%; margin: 0 auto; max-width: 900px; padding: 0 1em; } #cal-site #site #machine-sub-view .video-intro a.play-video { position: relative; width: 160px; height: 48px; border: 1px solid #fff; display: block; margin: 1.5em auto 0; color: #fff; font-size: .650em; text-transform: uppercase; line-height: 45px;; } #cal-site #site #machine-sub-view .video-intro a.play-video img { width: 30px; position: relative; float: right; margin: 7px 10px 0 0; } #cal-site #site #machine-sub-view .video-intro p span { letter-spacing: 1px; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; color: #fff; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list .half-back { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #252525; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list h2 { position: absolute; top: 50%; text-align: center; width: 100%; margin-top: -280px; font-size: 3.2em; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul { text-align: center; top: 50%; position: absolute; width: 100%; height: 360px; margin-top: -180px; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li { display: inline-block; cursor: pointer; position: relative; font-size: .850em; margin: 0 1.5em; width: 260px; height: 360px; background-color: #000; overflow: hidden; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li img { position: relative; width: 100%; height: auto; display: block; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .title { text-transform: uppercase; position: absolute; top: 1em; left: 1em; font-size: .750em; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .subtitle { position: absolute; bottom: 1em; left: 1em; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .icon { position: absolute; right: 0; width: 40px; height: 40px; bottom: 0; background-image: url(../img/assets/components-icons.png); } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .cal-gallery.icon { background-position: 0 0; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .gallery.icon { background-position: 0 0; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .video.icon { background-position: 0 -40px; } #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li .text.icon { background-position: 0 -80px; } #cal-site #site #machine-sub-view .sub-nav { left: 1.5em; right: 1.5em; width: auto; height: 60px; border: 1px solid #fff; background: rgba(0,0,0,.3) url(../img/assets/ie-bg.png) repeat; } #cal-site #site #machine-sub-view .sub-nav ul { border: 0; position: relative; width: 100%; height: 100%; padding: 0; } #cal-site #site #machine-sub-view .sub-nav ul li { position: relative; font-size: .600em; display: block; float: left; width: auto; height: 100%; line-height: 39px; text-align: center; text-transform: none; } #cal-site #site #machine-sub-view .sub-nav ul li.nav-item > a { border-right: 1px solid #fff; width: auto; height: 100%; } #cal-site #site #machine-sub-view .sub-nav ul li .sub-list { position: absolute; left: 0; width: 100%; height: 60px; bottom: 59px; text-align: center; overflow: hidden; /*overflow: hidden;*/ } #cal-site #site #machine-sub-view .sub-nav ul li ul { position: absolute; left: 0; width: 100%; height: 60px; background-color: #fff; top: 60px; } #cal-site #site #machine-sub-view .sub-nav ul li ul li { display: inline-block; font-size: .850em; margin: 0 auto; float: none; } #cal-site #site #machine-sub-view .sub-nav ul li ul li.sub-year { display: block; float: left; font-size: 1em; } .tablet #cal-site #site #machine-sub-view .sub-nav ul li ul li.sub-year { font-size: .9em; } #cal-site #site #machine-sub-view .sub-nav ul li ul li a { color: #000; width: auto; height: 100%; font-size: 1.150em; padding: 1em .5em; } #cal-site #site #machine-sub-view .sub-nav ul li ul li a .year-line { position: absolute; bottom: 1.5em; left: 50%; height: 3px; background-color: #000; width: 36px; margin-left: -18px; } #cal-site #site #machine-sub-view .sub-nav .line { width: 100px; height: 5px; background-color: #fff; bottom: 0; } #cal-site #site #machine-sub-view .sub-nav ul li .sub-list .cta-riotta img { width: 30px; position: relative; float: right; margin: 3px 0 0 7px; } #cal-site #site .over-section .gallery-view .gallery-nav .prev .arrow .arrow-1, #cal-site #site .over-section .gallery-view .gallery-nav .prev .arrow .arrow-2 { background-image: url(../img/assets/arrow-prev-black.png); background-size: 100%; } #cal-site #site .over-section .gallery-view .gallery-nav .next .arrow .arrow-1, #cal-site #site .over-section .gallery-view .gallery-nav .next .arrow .arrow-2 { background-image: url(../img/assets/arrow-next-black.png); background-size: 100%; } #cal-site #site .over-section.over-scroll .iScrollVerticalScrollbar { bottom: 0; } #cal-site #site #machine-view .side-panel .years-list ul li.years-block { font-size: .700em; letter-spacing: 1px; line-height: 29px;;; } #cal-site #site #machine-sub-view .sub-nav ul li.nav-item.back-machine img { width: 8px; height: auto; float: left; margin: 11px 0 0 11px; } #cal-site #site #machine-sub-view .sub-nav ul li.nav-item.back-machine { font-size: .700em; letter-spacing: 1px; text-transform: none; line-height: 36px; } #cal-site #site audio { position: absolute; top: -999em; pointer-events: none; display: none; margin: 0; left: -999em; visibility: hidden; opacity: 0; } .smartphone #cal-site #site #machine-view .mobile-panel { background: none; border-left: 1px solid #fff; border-right: 1px solid #fff; } .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list {} .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul {} .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block { background: none; } .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block a.main { background: none !important; } .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block ul { border: 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block ul li {} .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block ul li a {} .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block a.coming-soon { width: 88px !important; background: #000 !important; } .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block .select-block { top: 50px; bottom: 0; height: auto;} .smartphone #cal-site #site #machine-view .mobile-panel .mobile-years-list ul li.years-block .select-block .line { right: 2em; left: 2em; width: auto; top: 28px; height: 3px; } /* iPad in portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* and (-webkit-min-device-pixel-ratio: 2) */ .tablet #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list h2 { margin-top: -240px; } .tablet #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul { width: 100%; height: 322px; margin-top: -160px; } .tablet #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li { margin: 0 3px; width: 240px; height: 322px; } } /* iPad in portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* and (-webkit-min-device-pixel-ratio: 2) */ .tablet #cal-site #site #machine-sub-view .sub-nav ul li.nav-item.back-machine span { display: none; } .tablet #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul { width: 100%; height: 322px; margin-top: -160px; } .tablet #cal-site #site #machine-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .content-list ul li { margin: 0 3px; width: 240px; height: 322px; } } .video-view video { position: absolute; z-index: 1; width: 100%!important; height: 100%!important; margin: 0 auto!important; top: 0!important; left: auto!important; }