/* Pirelli Cal */ /** * Globals */ /*@font-face { font-family: 'Garamond'; src: url('fonts/ebgaramond-regular-webfont.woff2') format('woff2'), url('fonts/ebgaramond-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }*/ #cal-site { -webkit-text-size-adjust: 100%; } /*top: 0;*/ #cal-site #site #sections .section { position: relative; overflow: hidden; cursor: default; } #cal-site #site #sections > .scroller { overflow: auto; -webkit-overflow-scrolling: touch; } #cal-site #site #sections > .scroller .scroller-wrap { position: relative; height: auto; } .video-ui-main { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } b { font-family: "Gotham A", "Gotham B"; font-style: normal; font-weight: 500; } .back { right: 2.5em; top: 2.5em; } .tablet .back { top: 2.5em; } .garamond { font-family: 'EB Garamond', serif; } /*.garamond { font-family: 'Garamond' }*/ #preloader { height: 100%; bottom: auto; } /** * Header */ #cal-site #site header#header { position: fixed; top: 48px; left: 0; z-index: 99; } #cal-site #site header#header .header-bar { position: absolute; top: 0; left: 0; width: 100%; height: 64px; border-bottom: 1px solid rgba(255,255,255,.3); z-index: 2; } #cal-site #site header#header .header-bar .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #000; } #cal-site #site header#header .header-bar .hamb { position: absolute; width: 44px; height: 44px; background-color: transparent; top: 50%; left: .75em; margin: -22px 0 0 0; z-index: 2; cursor: pointer; } #cal-site #site header#header .header-bar .hamb .hamb-wrap { position: absolute; width: 21px; height: 16px; top: 50%; left: 50%; margin: -8px 0 0 -10px; } #cal-site #site header#header .header-bar .hamb .hamb-line { position: absolute; left: 0; right: 0; height: 2px; background-color: #fff; -webkit-transform-origin: 50%; transform-origin: 50%; } #cal-site #site header#header .header-bar .hamb .hamb-line.line-1 { top: 0; } #cal-site #site header#header .header-bar .hamb .hamb-line.line-2 { top: 7px; } #cal-site #site header#header .header-bar .hamb .hamb-line.line-3 { top: 14px; } #cal-site #site header#header .header-bar .hamb .hamb-line.line-4 { top: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #cal-site #site header#header .header-bar .hamb .hamb-line.line-5 { top: 7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #cal-site #site header#header .header-bar img.logo { position: absolute; width: 280px; display: block; left: 50%; top: 50%; margin: -8px 0 0 -140px; z-index: 2; cursor: pointer; } #cal-site #site header#header .header-bar .tools { position: absolute; right: 1.5em; color: #fff; top: 0; bottom: 0; line-height: 64px; z-index: 2; } #cal-site #site header#header .header-bar .tools a { font-size: .75em; } #cal-site #site header#header .header-bar .tools a img { width: 15px; } #cal-site #site header#header .header-bar .tools .line { position: relative; display: inline-block; width: 1px; height: 34px; background-color: rgba(255,255,255,.5); margin: 0 1.25em; top: 10px; } #cal-site #site header#header .header-bar .tools .lock {} #cal-site #site header#header .header-bar .tools .lock-open { display: none; } /*#cal-site #site header#header.nav-open .header-bar .hamb .hamb-line.line-1 { -webkit-transform: translate(0px, 7px) rotate(-45deg); transform: translate(0px, 7px) rotate(-45deg); } #cal-site #site header#header.nav-open .header-bar .hamb .hamb-line.line-2 { -webkit-transform: scale(0, 1); transform: scale(0, 1); } #cal-site #site header#header.nav-open .header-bar .hamb .hamb-line.line-3 { -webkit-transform: translate(0px, -7px) rotate(45deg); transform: translate(0px, -7px) rotate(45deg); }*/ #cal-site #site header#header nav { position: absolute; top: 0; left: 0; background-color: #000; z-index: 1; } #cal-site #site header#header nav .nav-wrap { position: absolute; top: 64px; left: 0; right: 0; bottom: 0; overflow: hidden; } #cal-site #site header#header nav ul { color: #fff; line-height: 6em; } #cal-site #site header#header nav ul li { display: block; font-size: 3em; text-transform: none; } #cal-site #site header#header nav ul li a { display: inline-block; padding: 0; color: #fff; } #cal-site #site header#header nav ul li a sup { font-size: .35em; vertical-align: super; position: relative; top: -.25em; } /** * Sections */ #cal-site #site #sections .section .wrap .header, #cal-site #site #sections .section .wrap .footer { position: relative; text-align: center; padding: 2em; } #cal-site #site #sections .section .wrap .header h2, #cal-site #site #sections .section .wrap .footer h2 { font-weight: 100; font-size: 4em; } #cal-site #site #sections .section .wrap .header sup, #cal-site #site #sections .section .wrap .footer sup { font-size: .35em; vertical-align: super; position: relative; top: -.25em; } #cal-site #site #sections .section .wrap .header h3, #cal-site #site #sections .section .wrap .footer h3 {} #cal-site #site #sections .section .wrap .header p, #cal-site #site #sections .section .wrap .footer p { font-size: 1em; padding: 0 1em; line-height: 1.5em; max-width: 45em; margin: 0 auto; } #cal-site #site #sections .section .wrap .header .line, #cal-site #site #sections .section .wrap .footer .line { position: relative; display: inline-block; width: 4.5em; height: 1px; margin: 1.25em 0; background-color: #000; } #cal-site #site #sections .section .wrap .footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 1em 2em 2em; } #cal-site #site #sections .section .wrap .footer p { max-width: 55em; } #cal-site #site #sections .section .wrap .footer p span { letter-spacing: initial; } #cal-site #site #sections .section.free-scroll { width: auto !important; height: auto !important; } /** * Index */ #cal-site #site #sections #index-view { background-color: #000; } #cal-site #site #sections #index-view .wrap { top: 0; height: auto; bottom: 0; z-index: 1; } /* top: 64px; */ #cal-site #site #sections #index-view .caption { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.5em; } #cal-site #site #sections #index-view .caption .table { text-align: left; } #cal-site #site #sections #index-view .caption h1 { color: #fff; font-size: 4em; font-weight: 100; line-height: 1em; } #cal-site #site #sections #index-view .caption h1 sup { font-size: .15em; vertical-align: super; position: relative; top: -1.5em; } #cal-site #site #sections #index-view .caption .play-video { color: #fff; font-size: .85em; padding: 3em 0; cursor: pointer; display: block; float: left; text-transform: uppercase; } #cal-site #site #sections #index-view .caption .play-video img { width: 25px; height: 25px; margin-right: .5em; vertical-align: middle; } #cal-site #site #sections #index-view .caption .play-video span { vertical-align: middle; letter-spacing: initial; padding: 1em 0; cursor: pointer; } #cal-site #site #sections #index-view .caption .read-cta { letter-spacing: initial; font-size: .85em; text-transform: uppercase; padding: 3.4em 0; display: block; float: left; margin-left: 4em; } #cal-site #site #sections #index-view .caption .read-cta a { color: #fff; } #cal-site #site #sections #index-view .caption .read-cta span { letter-spacing: initial; padding: 1em 0; cursor: pointer; } #cal-site #site #sections #index-view .caption .read-cta img { width: 15px; height: 15px; vertical-align: middle; margin-left: .5em; } #cal-site #site #sections #index-view .video-view { z-index: 2; } #cal-site #site #sections #index-view .close-wrap { bottom: auto; top: 5.5em; right: 1.5em; z-index: 3; } #cal-site #site #sections #index-view .scroll.cta { position: absolute; z-index: 3; bottom: 1.5em; left: 50%; margin: -22px 0 0 -22px; overflow: hidden; } #cal-site #site #sections #index-view .scroll.cta img { width: 44px; height: 44px; display: block; } /** * Making */ #cal-site #site #sections #making-view { } #cal-site #site #sections #making-view .wrap { } #cal-site #site #sections #making-view .wrap .grid { position: relative; width: 100%; height: auto; overflow:hidden; } #cal-site #site #sections #making-view .wrap .grid .box { position: absolute; cursor: pointer; border: 1px solid #fff; overflow:hidden; } #cal-site #site #sections #making-view .wrap .grid .box .box-solid-gray { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #28272c; z-index: 1; } #cal-site #site #sections #making-view .wrap .grid .box .box-solid-white { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffffff; z-index: 2; } #cal-site #site #sections #making-view .wrap .grid .box .box-mask { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; overflow:hidden; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap img { position: absolute; display: block; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap img.icon { z-index: 2; right: .5em; bottom: .5em; width: 40px; height: 40px; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap img.icon.play { right: auto; left: .5em; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap span { position: absolute; z-index: 1; color: #fff; letter-spacing: initial; bottom: 1.65em; right: 3.5em; cursor: pointer; font-size: .8em; } #cal-site #site #sections #making-view .wrap .grid .box.box-1 { width: 60%; height: 100%; top: 0; left: 0; border-left: 0; } #cal-site #site #sections #making-view .wrap .grid .box.box-2 { width: 20%; height: 50%; top: 0; left: 60%; } #cal-site #site #sections #making-view .wrap .grid .box.box-3 { width: 20%; height: 50%; top: 50%; left: 60%; } #cal-site #site #sections #making-view .wrap .grid .box.box-4 { width: 20%; height: 100%; top: 0; left: 80%; border-right: 0; } #cal-site #site #sections #making-view .wrap .media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; } #cal-site #site #sections #making-view .wrap .media .mask-white, #cal-site #site #sections #making-view .wrap .media .mask-gray { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cal-site #site #sections #making-view .wrap .media .mask-white { background-color: #ffffff; } #cal-site #site #sections #making-view .wrap .media .mask-gray { background-color: #000000; } /*#28272c*/ #cal-site #site #sections #making-view .wrap .media .close-wrap { top: 1.5em; right: 1.5em; } #cal-site #site #sections #making-view .wrap .media .video-ui { bottom: 3em; } /** * Stories */ #cal-site #site #sections #stories-view { background-color: #f2f2f2; padding-bottom: 4em; } #cal-site #site #sections #stories-view .wrap { position: relative; top: 0; height: auto; bottom: 0; } #cal-site #site #sections #stories-view .stories-store { position: relative; text-align: center; } #cal-site #site #sections #stories-view .stories-store .story-box { position: relative; width: 100%; height: auto; margin: 2em 0 5em; overflow: hidden; } #cal-site #site #sections #stories-view .stories-store .story-box img.thumb { position: relative; width: 55%; max-width: 800px; display: block; } #cal-site #site #sections #stories-view .stories-store .story-box.even img.thumb { float: left; } #cal-site #site #sections #stories-view .stories-store .story-box.odd img.thumb { float: right; } #cal-site #site #sections #stories-view .stories-store .story-box .box { position: absolute; top: 2em; bottom: 2em; width: 50%; padding: 0 2em 2em; background-color: #fff; overflow: hidden; } #cal-site #site #sections #stories-view .stories-store .story-box .box .table { text-align: left; } #cal-site #site #sections #stories-view .stories-store .story-box.even .box { } #cal-site #site #sections #stories-view .stories-store .story-box.odd .box { } #cal-site #site #sections #stories-view .stories-store .story-box .box .head { position: relative; overflow: hidden; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head { position: relative; overflow: hidden; margin-top: -1em; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .first-letter { position: relative; font-size: 8em; font-weight: 100; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head sup { font-size: .5em; vertical-align: super; position: relative; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .cell { vertical-align: bottom; border-bottom: 1px solid rgba(0,0,0,.3); } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .title-body { position: relative; font-size: 2em; font-weight: 100; line-height: 1em; top: -32px; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .caption { position: relative; line-height: 1.5em; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .caption span { letter-spacing: initial; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .read-cta { letter-spacing: initial; font-size: .75em; text-transform: uppercase; padding: 2em 0; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .read-cta span { letter-spacing: initial; padding: 1em 0; cursor: pointer; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .read-cta img { width: 15px; height: 15px; vertical-align: middle; margin-left: .5em; } #cal-site #site #sections #stories-view .stories-store a.read-all-cta { display: inline-block; margin: 0 auto; font-style: italic; font-size: 1.25em; } #cal-site #site #sections #stories-view .stories-store a.read-all-cta img { width: 15px; height: 15px; vertical-align: middle; margin-left: .15em; } /** * Icons */ #cal-site #site #sections #icons-view { background-color: #fff; } #cal-site #site #sections #icons-view .wrap .header { padding: 1em; } #cal-site #site #sections #icons-view .wrap .header h2 { font-size: 3em; text-transform: uppercase; text-indent: .35em; } #cal-site #site #sections #icons-view .wrap .header h2 span { letter-spacing: .6em; } #cal-site #site #sections #icons-view .wrap .header h3 { font-size: 1.2em; } #cal-site #site #sections #icons-view .wrap .header p span { letter-spacing: initial; } #cal-site #site #sections #icons-view .wrap .header .line { margin: 1.25em 0 .75em; } #cal-site #site #sections #icons-view .covers { position: relative; top: 0; left: 0; } #cal-site #site #sections #icons-view .covers .covers-mask { position: absolute; overflow: hidden; background-color: #666; } #cal-site #site #sections #icons-view .covers .covers-mask .cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster { position: relative; width: 100%; height: 100%; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .top-holder, #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .bottom-holder { position: absolute; left: 0; right: 0; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .top-holder { top: 0; bottom: 50%; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .bottom-holder { bottom: 0; top: 50%; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .top-mask { position: absolute; top: 0; right: 0; height: 100%; width: 100%; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster .bottom-mask { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .poster img { position: absolute; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .play-icon { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; z-index: 2; cursor: pointer; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .play-icon .icon-top { position: absolute; top: 0; left: 0; right: 0; bottom: 45px; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .play-icon .icon-bottom { position: absolute; top: 45px; left: 0; right: 0; bottom: 0; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .play-icon .icon-top img { position: absolute; left: 0; top: 0; width: 100%; height: 200% } #cal-site #site #sections #icons-view .covers .covers-mask .cover .play-icon .icon-bottom img { position: absolute; left: 0; bottom: 0; width: 100%; height: 200% } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption { position: absolute; z-index: 1; top: 0; left: 50%; bottom: 0; right: 0; color: #fff; padding-left: 70px; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption .table { text-align: left; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption .text-wrap { position: relative; overflow: hidden; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption p { position: relative; text-transform: uppercase; font-size: 1.875em; padding-bottom: .25em; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a { position: relative; text-transform: uppercase; font-size: .75em; display: inline-block; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a span { letter-spacing: initial; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a img { width: 14px; height: 14px; vertical-align: middle; margin-left: .25em; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a img.white-arrow { display: initial; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a img.black-arrow { display: none; } #cal-site #site #sections #icons-view .icons-nav { position: absolute; left: 0; right: 0; z-index: 3; } #cal-site #site #sections #icons-view .icons-nav .nav-item { position: relative; float: left; text-align: center; cursor: pointer; } #cal-site #site #sections #icons-view .icons-nav .nav-item a { padding: 1em; font-size: .75em; } #cal-site #site #sections #icons-view .icons-nav .nav-item .line { display: inline-block; width: 8px; height: 1px; background-color: #000; top: 50%; margin-left: .25em; } #cal-site #site #sections #icons-view .icons-nav .nav-item .name { margin-left: 1.5em; letter-spacing: initial; } #cal-site #site #sections #icons-view .icons-nav .active-line { position: absolute; left: 0; bottom: -.5em; height: 2px; background-color: #000; } #cal-site #site #sections #icons-view #icons-sub-view { z-index: 2; } #cal-site #site #sections #icons-view #icons-sub-view a.back { border: 0; font-size: .65em; padding: .85em 3.75em .85em .5em; } #cal-site #site #sections #icons-view #icons-sub-view .iScrollVerticalScrollbar { bottom: 0; } /** * Time Machine */ #cal-site #site #machine-sub-view .sub-nav { bottom: 1.5em; } #cal-site #site #machine-view .gallery-view .wrap { background-color: #fff; } #cal-site #site #machine-view .text-view .wrap { background-color: #252525; } #cal-site #site #machine-view .over-section .text-mask { padding: 2em 2em 2em; } #cal-site #site #machine-view .prev-scroll, #cal-site #site #machine-view .next-scroll { position: absolute; z-index: 2; width: 44px; height: 44px; left: 50%; margin-left: -22px; cursor: pointer; display: none; } #cal-site #site #machine-view .prev-scroll { top: .5em; } #cal-site #site #machine-view .next-scroll { bottom: .25em; } #cal-site #site #machine-view .prev-scroll img, #cal-site #site #machine-view .next-scroll img { position: absolute; display: block; width: 44px; height: 44px; -moz-transform-origin: 50%; -webkit-transform-origin: 50%; transform-origin: 50%; } #cal-site #site #machine-view .prev-scroll img { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } /** * Time Machine Teaser */ #cal-site #site #sections #machine-view .header { color: #fff; z-index: 6; } #cal-site #site #sections #machine-view .header .line, #cal-site #site #sections #machine-view .footer .line { background-color: #fff; } #cal-site #site #sections #machine-view .body { position: relative; z-index: 1; } #cal-site #site #sections #machine-view .video-view { z-index: 2; } /*#cal-site #site #sections #machine-view .close-wrap { bottom: auto; top: 1.5em; right: 1.5em; z-index: 3; }*/ #cal-site #site #sections #machine-view a.play-video { position: relative; width: 160px; height: 48px; border: 1px solid #fff; display: block; margin: 0 auto; color: #fff; font-size: .650em; text-transform: uppercase; line-height: 45px; } #cal-site #site #sections #machine-view a.play-video img { width: 30px; position: relative; float: right; margin: 7px 10px 0 0; } #cal-site #site #sections #machine-view .side-panel { bottom: 2em; } /** * Members */ #cal-site #site #sections #members-view { } #cal-site #site #sections #members-view .header { padding: 1.25em; display: none; visibility: hidden; } #cal-site #site #sections #members-view .members-wrap { margin-top: -240px; } #cal-site #site #sections #members-view #members-sub-view { z-index: 2; } #cal-site #site #sections #members-view #members-sub-view .sub-nav { left: 2em; bottom: 2em; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item { cursor: default; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .prev-scroll, #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .next-scroll { position: absolute; z-index: 2; width: 44px; height: 44px; left: 50%; margin-left: -22px; cursor: pointer; display: none; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .prev-scroll { top: .5em; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .next-scroll { bottom: .25em; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .prev-scroll img, #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .next-scroll img { position: absolute; display: block; width: 44px; height: 44px; -moz-transform-origin: 50%; -webkit-transform-origin: 50%; transform-origin: 50%; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .prev-scroll img { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .text-view .wrap { bottom: 0; height: auto; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap .scroll-tip.hide-desk { display: none !important; } /** * About */ #cal-site #site #sections #about-view { } #cal-site #site #sections #about-view .wrap { position: relative; text-align: center; } #cal-site #site #sections #about-view .box { position: relative; width: 100%; max-width:1280px; margin: 0 auto; padding: 2em 3em 3em; } #cal-site #site #sections #about-view .box .holder { position: relative; background-color: #28272c; width: 100%; height: 140px; } #cal-site #site #sections #about-view .box .holder .link-box { position: absolute; top: 0; bottom: 0; width: 25%; opacity: .8; color: #fff; text-transform: uppercase; font-size: .8125em; cursor: pointer; } #cal-site #site #sections #about-view .box .holder .link-box span { letter-spacing: .1em; } #cal-site #site #sections #about-view .box .holder .link-box.link-1 { left: 0%; } #cal-site #site #sections #about-view .box .holder .link-box.link-2 { left: 25%; } #cal-site #site #sections #about-view .box .holder .link-box.link-3 { left: 50%; } #cal-site #site #sections #about-view .box .holder .link-box.link-4 { left: 75%; } #cal-site #site #sections #about-view .box .holder .link-box img { position: relative; display: block; width: 15px; height: 15px; margin: .5em auto; } #cal-site #site #sections #about-view .box .holder .sep { position: absolute; top: 2em; bottom: 2em; width:1px; background-color: #fff; opacity: .2; } #cal-site #site #sections #about-view .box .holder .sep.sep-1 { left: 25%; } #cal-site #site #sections #about-view .box .holder .sep.sep-2 { left: 50%; } #cal-site #site #sections #about-view .box .holder .sep.sep-3 { left: 75%; } #cal-site #site #sections #about-view a { position: relative; display: inline-block; color: #fff; background-color: #28272c; font-size: .8125em; padding: 1.5em 2.5em; margin: 1em 0 5em; text-transform: uppercase; } #cal-site #site #sections #about-view a img { width: 15px; height: 15px; vertical-align: middle; margin-left: 1.5em; } /** * Footer */ #cal-site #site footer#footer { position: relative; width: 100%; height: 60px; background-color: #28272c; color: #fff; padding: 0 2.5em; line-height: 60px; } #cal-site #site footer#footer p { font-size: .5625em; } #cal-site #site footer#footer p.copy { float: left; } #cal-site #site footer#footer p.links { float: right; } #cal-site #site footer#footer p.links a { margin-left: 1.5em; } /** * Login */ #cal-site #site #login { position: fixed; top: 64px; height: auto; bottom: 0; cursor: default; } #cal-site #site #login .close-wrap { bottom: auto; top: -3em; right: 1em; } #cal-site #site #login .close-wrap .close { display: block; } /** * Media */ @media screen and (max-width:1160px) { /*#cal-site #site #sections #stories-view .stories-store .story-box img.thumb { width: 60%; } */ } @media screen and (max-width:1024px) { #cal-site #site #sections #stories-view .stories-store .story-box .box { padding: 0 1.5em 1.5em; } } @media screen and (max-width:1023px) { #cal-site #site #sections #stories-view .stories-store .story-box { margin: 2em 0 2em; } #cal-site #site #sections #stories-view .stories-store .story-box img.thumb { width: 100%; max-width: initial; float: none !important; } #cal-site #site #sections #stories-view .stories-store .story-box .box { position: relative; width: auto; left: auto !important; right: auto !important; margin: -8% 1.5em 0; bottom: 0; top: 0; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head { margin-top: auto; } #cal-site #site #sections #icons-view .icons-nav .nav-item .line, #cal-site #site #sections #icons-view .icons-nav .nav-item .name { display: none; } #cal-site #site #sections #making-view .wrap .grid .box .box-wrap span { /*display: none; */ font-size: 0.6em; bottom: 22px; } } @media screen and (max-width:767px) { #cal-site #site header#header nav ul { font-size: .75em; } #cal-site #site header#header .header-bar img.logo { width: 150px; margin: -4px 0 0 -90px; } #cal-site #site header#header .header-bar .tools .line, #cal-site #site header#header .header-bar .tools a.membership span { display: none; } #cal-site #site header#header nav ul li { line-height: 1.5em; } #cal-site #site header#header .header-bar .tools a img {margin-right: 10px;} #cal-site #site header#header .header-bar .tools a.language {font-size: 0.65em} #cal-site #site #sections .section .wrap .header, #cal-site #site #sections .section .wrap .footer { padding: 1.5em; } #cal-site #site #sections .section .wrap .header h2, #cal-site #site #sections .section .wrap .footer h2 { font-size: 2.5em; } #cal-site #site #sections .section .wrap .header .line, #cal-site #site #sections .section .wrap .footer .line { margin: 1em 0; } #cal-site #site #sections .section .wrap .header p, #cal-site #site #sections .section .wrap .footer p { font-size: .9em; line-height: 1.25em; padding: 0; } #cal-site #site #sections #index-view .caption { padding: 1.5em; } #cal-site #site #sections #index-view .caption h1 { font-size: 2em; padding-top: 6em; } #cal-site #site #sections #index-view .scroll.cta { bottom: .5em; } #cal-site #site #sections #index-view .caption .read-cta { margin-left: 1.25em; } #cal-site #site #sections #making-view .wrap { position: relative; top: 0; height: auto; bottom: 0; } #cal-site #site #sections #making-view .wrap .grid .box { position: relative; } #cal-site #site #sections #making-view .wrap .grid .box img.full-to-parent { position: relative; width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } #cal-site #site #sections #making-view .wrap .grid .box.box-1 { width: 100%; height: auto; top: 0; left: 0; float: left; border-right: 0; } #cal-site #site #sections #making-view .wrap .grid .box.box-2 { width: 50%; height: auto; top: 0; left: 0; float: left; border-left: 0; } #cal-site #site #sections #making-view .wrap .grid .box.box-3 { width: 50%; height: auto; top: 0; left: 0; float: left; border-left: 0; } #cal-site #site #sections #making-view .wrap .grid .box.box-4 { width: 50%; height: auto; top: 0; left: 0; float: right; } #cal-site #site #sections #making-view .wrap .footer { position: relative; padding: 1em 1.5em 1.5em; } #cal-site #site #sections #stories-view { padding-bottom: 2.5em; } #cal-site #site #sections #stories-view .stories-store .story-box .box { padding: 0 .75em .75em; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .first-letter { font-size: 5em; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .title-body { font-size: 1.25em; top: -20px; } #cal-site #site #sections #stories-view .stories-store .story-box .box .head .caption { font-size: .875em; } #cal-site #site #sections #icons-view .wrap .header h2 { font-size: 2.5em; } #cal-site #site #sections #icons-view .wrap .header h3 { font-size: 1em; } #cal-site #site #sections #icons-view .wrap .header .line { margin: .75em 0 .5em; } #cal-site #site #sections #icons-view .covers .covers-mask { overflow: visible; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption { position: relative; color: #000; left: 0; width: 130%; left: -15%; padding: .75em 0; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption .table { text-align: center; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption p { font-size: 1.25em; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a { font-size: .85em; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a img.white-arrow { display: none; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption a img.black-arrow { display: initial; } #cal-site #site #machine-view .prev-scroll, #cal-site #site #machine-view .next-scroll { display: block; } #cal-site #site #machine-view .mobile-landing .table p { display: none; } #cal-site #site #sections #members-view .header { display: none; } #cal-site #site #sections #members-view .actions-list { width: 44px; padding: 0; margin-left: -22px; bottom: 0; } #cal-site #site #sections #members-view .actions-list .cta img { width: 44px; height: 44px; display: block; } #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .prev-scroll, #cal-site #site #sections #members-view #members-sub-view .scroller .scroller-wrap ul.scroll-list li.scroll-item .next-scroll { display: block; } #cal-site #site footer#footer { height: auto; line-height: 1.2em; text-align: center; padding: .5em 1.5em; } #cal-site #site footer#footer p.copy { float: none; margin: 3em 0; } #cal-site #site footer#footer p.links { float: none; margin: 3em 0; } #cal-site #site #sections #about-view .box { padding: 1.5em 1.5em 3em; } #cal-site #site #sections #about-view .box .holder { height: auto; } #cal-site #site #sections #about-view .box .holder .link-box { position: relative; width: 100%; left: 0 !important; height: 100px; } #cal-site #site #sections #about-view .box .holder .sep { width: auto; height: 1px; left: 1em !important; right: 1em !important; bottom: auto; } #cal-site #site #sections #about-view .box .holder .sep.sep-1 { top: 25%; } #cal-site #site #sections #about-view .box .holder .sep.sep-2 { top: 50%; } #cal-site #site #sections #about-view .box .holder .sep.sep-3 { top: 75%; } #members-view.minimize .year-cover { height: 100% !important; } #login .box-panel { top: 64px; } } @media screen and (max-width:374px) { #cal-site #site #sections #icons-view .wrap .header { padding: .5em 1em; } #cal-site #site #sections #icons-view .wrap .header h2 { font-size: 1.75em; } #cal-site #site #sections #icons-view .wrap .header h3 { font-size: .70em; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption { padding: .25em 0; } #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption p { padding-bottom: 0; } } @media only screen and (min-width : 414px) and (orientation: landscape) { html.smartphone { overflow: hidden; } .smartphone body { overflow: hidden; background-image: url(../img/assets/_AltContentSmartphone.jpg); background-size: cover; background-position: 50%; } .smartphone #cal-site { visibility: hidden !important; } } /** * Making articles cta label display */ /*#cal-site #site #sections #making-view .wrap .grid .box .box-wrap span { display: none !important; visibility: hidden !important; }*/ .invideo-discovermore { letter-spacing: initial; font-size: .85em; text-transform: uppercase; padding: 0; display: none; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); z-index: 99999; } .invideo-discovermore a { color: #fff; } .invideo-discovermore span { letter-spacing: initial; padding: 1em 0; cursor: pointer; } .invideo-discovermore img { width: 15px; height: 15px; vertical-align: middle; margin-left: .5em; } html[lang="it"] #invideo-discovermore-it {display: block;} html[lang="en"] #invideo-discovermore-en {display: block;} html[lang="it"] #icons-sub-view #invideo-discovermore-it, html[lang="en"] #icons-sub-view #invideo-discovermore-en, html[lang="it"] #making-view #invideo-discovermore-it, html[lang="en"] #making-view #invideo-discovermore-en, html[lang="en"] #machine-sub-view #invideo-discovermore-en, html[lang="it"] #machine-sub-view #invideo-discovermore-it {display: none;} #cal-site #site #sections #index-view .caption.play-video {cursor: pointer;} #cal-site #site #sections #index-view .caption.play-video:hover {opacity: 1!important;} #cal-site #site #sections #index-view .scroll.cta, #cal-site #site #sections #index-view .caption .read-cta {display: none} .close span.goth-bold { color: #fff; text-transform: uppercase; font-size: 11px; position: absolute; left: -50px; top: 8px; } #cal-site #site #machine-sub-view .sub-nav ul li.nav-item > a {text-transform: uppercase;} #cal-site #site #sections #icons-view .covers .covers-mask .cover .caption .text-wrap {white-space: nowrap;} @media only screen and (max-width: 992px) { #cal-site #site #sections #index-view .scroll.cta, #cal-site #site #sections #index-view .caption .read-cta {display: block;} #cal-site #site #sections #index-view .caption .read-cta {padding: 1em 0; float: none;} #cal-site #site #sections #index-view .caption .play-video {padding-bottom: 1em; float: none;} } /*#icons-view {min-height: 794px;}*/ /*#cal-site #site #sections #icons-view .covers,*/ /*#cal-site #site #sections #icons-view .covers .covers-mask {min-height: 511px;}*/