/* ------------------------------------------- Name: Libelle Date: 2017/04/05 Author: http://psdhtml.me --------------------------------------------- */ * { margin: 0; padding: 0; } *, :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { overflow-y: scroll; min-height: 100%; margin: 0 0 1px; font-size: 100.01%; -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; -ms-content-zooming: none; } body { min-height: 100%; background: #fff; font-size: 62.5%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, textarea, input, select, option, button { color: #666; font-family: Gotham_web, Arial, Helvetica, sans-serif; line-height: 1.63636363636; } li, dt, dd, p, figure, th, td, caption, legend, pre { font-size: 1.3em; } li *, dt *, dd *, p *, figure *, th *, td *, legend * { font-size: 1em; } ul, ol, dl, p, figure, table, pre, h1, h2, h3, h4, h5, h6, legend { margin-bottom: 6px /*12*/; } article, aside, details, div, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /*! Layout --------- */ #root { overflow: hidden; position: relative; width: 100%; padding: 0 0 0 220px; } #top { position: fixed; left: 0; top: 0; bottom: 0; z-index: 8; width: 220px; padding: 293px 0 0 40px; border-right: 1px solid #ebebeb; border-bottom: 0 solid #ebebeb; background: #fff; line-height: 1.81818181818; text-transform: uppercase; } #logo { position: absolute; left: 40px; top: 55px; z-index: 1; width: 110px; min-height: 44px; margin: 0; } #logo a { display: block; position: relative; width: 100%; height: 100%; color: #000; font-weight: 400; text-decoration: none; text-align: left; } /*#logo a:before { content: "\e907"; display: block; position: absolute; left: 0; top: 0; font-family: i; font-size: 44px; line-height: 44px; text-indent: 0; text-align: center; }*/ #skip { position: fixed; top: 0; left: -10000px; } #skip a:focus, #skip a:active { display: block; position: absolute; left: 10000px; top: 0; z-index: 10001; width: 200px; margin: 15px 0 0 15px; padding: 4px 8px; background: #333; color: #fff; font-weight: 500; font-size: 1.1em; text-align: center; text-decoration: none; } #nav { padding: 1px 0 0; } #nav > ul { list-style: none; margin: 0; padding: 0; } #nav > ul > li { margin-bottom: 9px; line-height: 1.2; } #nav > ul > li > a { color: #666; font-weight: 400; text-decoration: none; } #nav > ul > li.active > a, #nav > ul > li.current-page-ancestor > a { font-weight: 500; cursor: default; } #nav > ul > li.active > a, #nav > ul > li.current-page-ancestor > a, #nav > ul > li > a:hover, #top > .pager a:hover { color: #000; } #nav #lang { display: none; overflow: hidden; position: relative; color: #666; text-transform: uppercase; } #nav #lang:before { content: ""; display: block; width: 100%; height: 16px; } #nav #lang > li { position: relative; float: left; margin: 0 14px 0 0; } #nav #lang > li:before { content: "/"; display: block; position: absolute; left: 100%; top: 0; width: 14px; text-align: center; } #nav #lang > li:last-child { margin-right: 0; } #nav #lang > li:last-child:before, #nav #lang a span, #mobile #lang a span, #mobile #lang > li:first-child:before { position: absolute; left: -3000em; top: 0; } #top > .menu { display: block; position: absolute; right: 0; top: -3000em; z-index: 2; width: 105px; height: 100px; color: #000; font-weight: 400; text-decoration: none; cursor: pointer; } #top > .menu:before { content: "\e90d"; display: block; position: absolute; left: 0; top: 50%; width: 100%; margin: -10px 0 0; font-family: i; font-size: 20px; line-height: 20px; text-align: center; } #top > .pager { position: absolute; left: 100%; top: 50%; width: 82px; height: 42px; margin: -41px 0 0 -41px; } #top > .pager a { display: block; position: absolute; top: 0; width: 42px; height: 42px; border: 1px solid #ebebeb; background: #fff; color: #ddd9d9; font-size: 11px; font-weight: 400; line-height: 20px; text-align: left; text-indent: -3000em; text-decoration: none; } #top > .pager a.bx-prev { left: 0; } #top > .pager a.bx-next { right: 0; } #top > .pager a:before { display: block; position: absolute; left: 0; top: 50%; width: 100%; margin: -10px 0 0; font-family: i; text-align: center; text-indent: 0; } #top > .pager a.bx-prev:before { content: "\e90a"; } #top > .pager a.bx-next:before { content: "\e90b"; } #mobile { overflow-x: hidden; overflow-y: auto; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 100; margin: 0; background: #fff; line-height: 1.22727272727; text-align: center; text-transform: uppercase; letter-spacing: .1em; } #mobile { -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } #mobile > ul { position: absolute; left: 0; top: 50%; right: 0; list-style: none; margin: 0; padding: 0; } #mobile > ul { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #mobile > ul > li { font-size: 2.2em; } #mobile > ul > li > a { display: block; padding: .35em; color: #666; font-weight: 400; text-decoration: none; } #mobile > ul > li.active > a, #mobile > ul > li > a:hover { color: #000; } #mobile > .close { display: block; overflow: hidden; position: absolute; right: 0; top: 0; width: 105px; height: 100px; color: #000; font-weight: 400; text-decoration: none; text-align: left; text-indent: -3000em; } #mobile > .close:before { content: "\e90e"; display: block; position: absolute; left: 0; top: 50%; width: 100%; margin: -10px 0 0; font-family: i; font-size: 20px; line-height: 20px; text-indent: 0; text-align: center; } #mobile #lang { display: none; left: 0; right: 0; top: auto; bottom: 10px; text-transform: uppercase; } #mobile #lang > li { display: inline-block; float: none; } #mobile #lang > li:before { content: "/"; display: inline-block; position: relative; top: -1px; padding: 0 6px 0 4px; font-size: .8em; line-height: 1px; } #mobile #lang > li a { display: inline-block; padding: 0; } #content { position: relative; z-index: 3; width: 535px; padding: 293px 110px 50px; background: #fff; } #content.a { margin-top: -100px; } #content > p:first-child, #content > ul:first-child, #content > ol:first-child { padding-top: 2px; } #content img, #top img { height: auto !important; } #content:after, #top:after, #footer:after, form p:after, .social-a:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } #gallery { position: fixed; left: 220px; top: 0; top: 0; bottom: 0; right: 0; z-index: 3; list-style: none; margin: 0; padding: 0; } #gallery > * { max-width: none !important; margin-left: -2px; } #gallery li { float: left; padding-left: 2px; } #gallery img, #gallery .item { width: auto !important; } #gallery-mobile { list-style: none; margin: 23px 0 0; padding: 0; } #gallery-mobile li { margin: 0 0 15px; } #gallery-mobile img { display: block; width: 100% !important; height: auto !important; } #footer { position: fixed; left: 0; bottom: 0; z-index: 9; width: 220px; padding: 0 0 40px 40px; border-top: 0 solid #ebebeb; color: #666; line-height: 1.8em; text-transform: uppercase; } #footer li, #footer p { font-size: 1em; } #footer a { color: #666; font-weight: 400; text-decoration: none; } #footer a:hover { color: #000; } #footer #author { color: #666; font-size: .85em; line-height: 1.41176470588; } #footer #author a { color: #666; } #footer #author a:hover { color: #000; } #root.a:before, #root.a:after { content: ""; display: block; position: fixed; left: 0; z-index: 5; width: 755px; height: 55px; background: #fff; } #root.a:before { top: 0; } #root.a:after { bottom: 0; } #background { overflow: hidden; position: fixed; left: 755px; top: 0; bottom: 0; right: 0; z-index: 99; margin: 0; background-position: 100% 0; background-repeat: no-repeat; background-size: cover; } #background img { display: block; position: absolute; right: 0; top: 0; width: auto !important; height: 100% !important; } #background .big { display: block; position: absolute; bottom: 15px; width: 45px; height: 45px; color: #000; font-weight: 400; font-size: 18px; line-height: 20px; text-decoration: none; } #background .big:before { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; border-radius: 45px; background: #fff; opacity: .4; } #background .big:after { display: block; position: absolute; left: 0; top: 50%; z-index: 2; width: 100%; margin: -10px 0 0; font-family: i; text-align: center; text-indent: 0; } #background .big.a { left: 30px; } #background .big.b { left: auto; right: -50px; margin: 0 0 0 -22.5px; font-size: 14px; } #background .big.a:after { content: "\e907"; } #background .big.b:after { content: "\e90e"; } .bg-active #background { left: 220px; } .bg-active #background .big.a { left: -45px; } .bg-active #background .big.b { right: 50%; } .bg-active #background .wide { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } #background .wide { position: absolute; top: 0; bottom: 0; right: 0; width: 100vw; background-position: 100% center; background-repeat: no-repeat; background-size: cover; } #background .wide { -moz-transform: translateX(10%); -webkit-transform: translateX(10%); -o-transform: translateX(10%); -ms-transform: translateX(10%); transform: translateX(10%); } /*! Modules --------- */ .social-a { list-style: none; margin-top: 12px; margin-bottom: 25px; padding: 0; } .social-a li { float: left; margin: 0 20px 0 0; font-size: 1.3em; } .social-a a, #footer .social-a a { color: #000; font-weight: 400; text-decoration: none; } .social-a i { display: block; float: left; font-size: 13px; line-height: 13px; } .social-a i.icon-twitter { font-size: 11px; } .social-a:last-child { margin-bottom: 12px; } /*! Headers --------- */ h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; color: #000; font-weight: 400; font-size: 1.3em; line-height: 1.61538461538; text-transform: uppercase; } h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline { margin-bottom: 0; font-size: 1.1em; line-height: 1.63636363636; } /*! Content --------- */ b, strong, .strong { color: #000; font-weight: 700; } blockquote { margin: 1em 40px; } dfn, em, i, .em { font-style: italic; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before { content: '“'; } q:after { content: '”'; } q.strong { display: block; margin-bottom: 6px; } small { font-size: 85%; } strike, del, .strike { text-decoration: line-through; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .overlay-a { color: #000; } .overlay-b { color: #666; } a.overlay-b { font-weight: 400; } /*! Links --------- */ a { background: none; color: #000; font-weight: 500; text-decoration: none; cursor: pointer; } /*---*/ a span { cursor: pointer; } a:hover, a:focus, a:active { text-decoration: underline; outline: none; } a.email, a[href*="tel"], a[href*="mailto"] { color: inherit; font-weight: 400; } .link-a { margin-top: 20px; text-transform: uppercase; } .link-a a { display: inline-block; padding: 9px 22px; border: 2px solid #000; text-decoration: none; } .link-a a:hover { background: #000; color: #fff; } /*! Lists --------- */ ul, ol, dd, blockquote { padding-left: 40px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } .list-a { list-style: none; margin-top: 18px; padding: 0; } .list-a li { margin-bottom: 17px; } .list-a + .list-a, .list-a + .list-a.a { margin-top: 30px; } .list-a.a { margin-top: 14px; } .list-a.a li { margin-bottom: 6px; } .list-a.a li > span:first-child { display: block; color: #000; font-weight: 700; } /*! Media --------- */ img, iframe, object, embed { max-width: 100% !important; } img { image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; } .lt-ie9 img { max-width: none !important; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } /*! Forms --------- */ fieldset, hr { border-width: 0; } legend { position: absolute; left: 0; top: -3000em; padding: 0; border: 0; white-space: normal; } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none; } input, select, textarea { position: relative; z-index: 1; margin: 0; padding: 0; box-shadow: none; border-radius: 0; font-size: 1em; line-height: normal; text-align: left; text-transform: none; outline: none; } input, select, textarea, button, input[type="button"], input[type="reset"], input[type="submit"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } input { } input[type="search"], input[type="number"], input[type="date"], input[type="time"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input::-webkit-clear-button, input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; visibility: hidden !important; height: auto; margin: 0; } input::-o-outer-spin-button, input::-o-inner-spin-button { -o-appearance: none; margin: 0; } input[type="checkbox"], input[type="radio"] { height: auto; padding: 0; border: 0; background: none; line-height: 1; } input[type="color"] { padding: 0; cursor: pointer; } input[type="date"] { display: -webkit-inline-flex; } textarea { overflow: auto; vertical-align: top; resize: vertical; } select { line-height: 1; text-overflow: ''; text-indent: 0.01px; -moz-appearance: none; -webkit-appearance: none; appearance: none; } select::-ms-expand { display: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { display: block; overflow: visible; position: relative; z-index: 3; height: auto; margin: 0; box-shadow: none; text-transform: none; text-indent: 0; cursor: pointer; outline: none; -webkit-appearance: button; -webkit-font-smoothing: inherit; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; outline: none; } form [disabled] { cursor: default; } form > div { position: relative; } ::-webkit-input-placeholder { opacity: 1; color: inherit; } ::-moz-placeholder { opacity: 1; color: inherit; } :-moz-placeholder { opacity: 1; color: inherit; } :-ms-input-placeholder { opacity: 1; color: inherit; } ::-ms-input-placeholder { opacity: 1; color: inherit; } :focus::-webkit-input-placeholder { opacity: 0; } :focus::-moz-placeholder { opacity: 0; } :focus:-moz-placeholder { opacity: 0; } :focus:-ms-input-placeholder { opacity: 0; } :focus::-ms-input-placeholder { opacity: 0; } form { } label { display: block; position: relative; left: 0; top: 0; z-index: 2; font-weight: 400; } form p { position: relative; clear: both; } input { height: 32px; padding: 0 12px; } select { padding: 7px 7px 7px 9px; } textarea { padding: 7px 7px 7px 12px; } input, select, textarea { border: 1px solid #ccc; background: #fff; } button, input[type="button"], input[type="reset"], input[type="submit"] { overflow: hidden; float: left; padding: 6px 12px; border: 1px solid #ccc; background: #fff; } /*! Tables --------- */ table { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; } th, td { padding: 5px 10px; border: 1px solid #eee; font-weight: 400; text-align: left; } /*! Helpers --------- */ .no-mobile *, .no-mobile *:before, .no-mobile *:after { -moz-transition: visibility 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, border-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s; -webkit-transition: visibility 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, border-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s; -o-transition: visibility 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, border-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s; -ms-transition: visibility 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, border-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s; transition: visibility 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, border-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s; -moz-transform-origin: center center; -webkit-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transition-delay: -0.1s; } #mobile { -moz-transition: all 550ms ease-in-out 0s; -webkit-transition: all 550ms ease-in-out 0s; -o-transition: all 550ms ease-in-out 0s; -ms-transition: all 550ms ease-in-out 0s; transition: all 550ms ease-in-out 0s; } #background .big { -moz-transition: all .6s cubic-bezier(.77,0,.175,1) 0s; -webkit-transition: all .6s cubic-bezier(.77,0,.175,1) 0s; -o-transition: all .6s cubic-bezier(.77,0,.175,1) 0s; -ms-transition: all .6s cubic-bezier(.77,0,.175,1) 0s; transition: all .6s cubic-bezier(.77,0,.175,1) 0s; } #background { -moz-transition: left .6s cubic-bezier(.77,0,.175,1) 0s; -webkit-transition: left .6s cubic-bezier(.77,0,.175,1) 0s; -o-transition: left .6s cubic-bezier(.77,0,.175,1) 0s; -ms-transition: left .6s cubic-bezier(.77,0,.175,1) 0s; transition: left .6s cubic-bezier(.77,0,.175,1) 0s; } #background .wide { -moz-transition: -moz-transform .6s cubic-bezier(.77,0,.175,1) 0s; -webkit-transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1) 0s; -webkit-transition: transform .6s cubic-bezier(.77,0,.175,1) 0s; -o-transition: -o-transform .6s cubic-bezier(.77,0,.175,1) 0s; -ms-transition: -ms-transform .6s cubic-bezier(.77,0,.175,1) 0s; transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1) 0s; transition: transform .6s cubic-bezier(.77,0,.175,1) 0s; } .clear { clear: both; overflow: hidden; width: 100%; height: 0; } .hidden, [hidden], template, #nav em, .js #background img, .social-a span, #mobile em, #gallery-mobile { position: absolute; left: -3000em; top: 0; right: auto; bottom: auto; } hr, .hr { display: block; overflow: hidden; width: 100%; height: 1px; margin: 15px 0; padding: 0; border: 0; border-top: 1px solid #ccc; background: none; font-size: 0; } .hr hr { display: none; } .social-a:first-child, .link-a:first-child, .list-a:first-child, .list-a.a:first-child { margin-top: 0; } #root .mb-a, #gallery-mobile li:last-child { margin-bottom: 0; } #root .mb-b { margin-bottom: 12px; } #root .mb-c { margin-bottom: 18px; } /*! Warnings --------- */ p.lt-ie9 { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 28px; background: #333; color: #fff; font-size: 1.2em; font-family: Arial, Helvetica, sans-serif; line-height: 28px; text-align: center; } p.lt-ie9 a { color: #fff; font-weight: 700; text-decoration: underline; } p.lt-ie9 a:hover, p.lt-ie9 a:focus, p.lt-ie9 a:active { text-decoration: none; } .lt-ie9 body { padding-top: 28px; } /*! Miscellaneous --------- */ audio, canvas, iframe, img, svg, video { border-width: 0; vertical-align: middle; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } svg:not(:root) { overflow: hidden; } @-ms-viewport { width: auto; } ::selection { background: #000; color: #fff; text-shadow: none; } ::-moz-selection { background: #000; color: #fff; text-shadow: none; } #root .desktop-hide, #root .tablet-only, #root .mobile-only { position: absolute; left: -3000em; top: -3000em; bottom: inherit; right: inherit; } /*! Fonts --------- */ @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-book.eot'); src: url('fonts/gotham-book.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-book.woff2') format('woff2'), url('fonts/gotham-book.woff') format('woff'), url('fonts/gotham-book.ttf') format('truetype'), url('fonts/gotham-book.svg#gotham_bookbook') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-bookitalic.eot'); src: url('fonts/gotham-bookitalic.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-bookitalic.woff2') format('woff2'), url('fonts/gotham-bookitalic.woff') format('woff'), url('fonts/gotham-bookitalic.ttf') format('truetype'), url('fonts/gotham-bookitalic.svg#gotham_bookbookitalic') format('svg'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-medium.eot'); src: url('fonts/gotham-medium.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-medium.woff2') format('woff2'), url('fonts/gotham-medium.woff') format('woff'), url('fonts/gotham-medium.ttf') format('truetype'), url('fonts/gotham-medium.svg#gotham_mediummedium') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-mediumitalic.eot'); src: url('fonts/gotham-mediumitalic.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-mediumitalic.woff2') format('woff2'), url('fonts/gotham-mediumitalic.woff') format('woff'), url('fonts/gotham-mediumitalic.ttf') format('truetype'), url('fonts/gotham-mediumitalic.svg#gotham_mediummediumitalic') format('svg'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-bold.eot'); src: url('fonts/gotham-bold.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-bold.woff2') format('woff2'), url('fonts/gotham-bold.woff') format('woff'), url('fonts/gotham-bold.ttf') format('truetype'), url('fonts/gotham-bold.svg#gotham_boldbold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Gotham_web'; src: url('fonts/gotham-bolditali.eot'); src: url('fonts/gotham-bolditali.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-bolditali.woff2') format('woff2'), url('fonts/gotham-bolditali.woff') format('woff'), url('fonts/gotham-bolditali.ttf') format('truetype'), url('fonts/gotham-bolditali.svg#gotham_boldbolditali') format('svg'); font-weight: 700; font-style: italic; } /*! Icons --------- */ @font-face { font-family: 'i'; src: url('icons/icomoon.eot'); src: url('icons/icomoon.eot#iefix') format('embedded-opentype'), url('icons/icomoon.ttf') format('truetype'), url('icons/icomoon.woff') format('woff'), url('icons/icomoon.svg#icomoon') format('svg'); font-weight: 400; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'i' !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-angle-down:before { content: "\e909"; } .icon-angle-left:before { content: "\e90a"; } .icon-angle-right:before { content: "\e90b"; } .icon-angle-up:before { content: "\e90c"; } .icon-facebook:before { content: "\e908"; } .icon-google-plus:before { content: "\e905"; } .icon-instagram:before { content: "\e906"; } .icon-logo:before { content: "\e907"; } .icon-menu:before { content: "\e90d"; } .icon-pinterest:before { content: "\e904"; } .icon-resize:before { content: "\e907"; } .icon-skype:before { content: "\e901"; } .icon-twitter:before { content: "\e902"; } .icon-vimeo:before { content: "\e903"; } .icon-youtube:before { content: "\e900"; } .icon-x:before { content: "\e90e"; } /* Responsive --------- */ @media only screen and (max-height: 50em) { /* 800h */ #top, #content, #content.a { padding-top: 180px; } } @media only screen and (max-height: 25em) { /* 400h */ #mobile { } #mobile > ul > li { font-size: 1.6em; } #mobile > #lang { bottom: 8px; } #mobile #lang > li:before { padding: 0 5px 0 3px; } } @media only screen and (max-height: 18.75em) { /* 300h */ #mobile { } #mobile > ul > li { font-size: 1.2em; } #mobile > #lang { bottom: 2px; } #mobile #lang > li:before { padding: 0 4px 0 2px; } } @media only screen and (max-width: 90em) { /* 1440 */ #content { width: 455px; padding-left: 70px; padding-right: 70px; } #background { left: 675px; } #root.a:before, #root.a:after { width: 675px; } } @media only screen and (max-width: 68.75em) { /* 1100 */ #content { width: 395px; padding-left: 40px; padding-right: 40px; } #background { left: 615px; } #root.a:before, #root.a:after { width: 615px; } } @media only screen and (max-width: 62.5em) { /* 1000 */ #root .desktop-hide, #root .tablet-only { position: relative; left: 0; top: 0; } #root .desktop-only, #root .tablet-hide { position: absolute; left: -3000em; top: -3000em; bottom: inherit; right: inherit; } } @media only screen and (max-width: 47.5em), screen and (max-height: 37.5em) { /* 760 or 600h */ #root { padding: 0; } #top { position: relative; right: 0; bottom: auto; width: auto; padding: 40px 0 0 40px; border-right-width: 0; } #logo { position: relative; left: 0; top: 0; width: 70px; min-height: 0; height: 45px; } #logo a:before { font-size: 21px; line-height: 45px; } #logo img { display: block; } #top > .menu { top: 0; } #content, #content.a { width: auto; margin-top: 0; } #content, #content.a, #footer { padding: 34px 40px 25px; } #content, #content.a { padding-top: 45px; } #footer { position: relative; z-index: 2; width: auto; border-top-width: 1px; } #background, #background .wide { position: relative; left: 0; width: auto; background-position: -3000em -3000em; } #background img { width: 100% !important; height: auto !important; } li, dt, dd, p, figure, th, td, caption, legend, pre { font-size: 1.3em; } .menu-active #mobile, #background, #background .wide { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } #root .tablet-hide, #root .mobile-only, .js #background img, #gallery-mobile { position: relative; left: 0; top: 0; } #root .tablet-only, #root .mobile-hide, #nav, #root.a:before, #root.a:after, #top > .pager, #gallery, #root #background .big { position: absolute; left: -3000em; top: -3000em; bottom: inherit; right: inherit; } } @media only screen and (max-width: 31.25em) { /* 500 */ } @media only screen and (max-width: 25em) { /* 400 */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } }