/* style.less build Created by Uli Schöberl, uli@aplusplus.org on 2011-11-05. based on h5bp.com -> THANK YOU! + Helpers, Resets, Mixins –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ ::selection { background: #006600; } ::-moz-selection { background: #006600; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } /* ============================================================================= HTML5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection { background: #CCC; color: #000; text-shadow: none; } ::selection { background: #CCC; color: #000; text-shadow: none; } /* ============================================================================= Links ========================================================================== */ a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ .text ul, .text ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix { zoom: 1; /* overflow:hidden;*/ } .clearfix:after, .clearfix:before { content: "\0020"; display: block; height: 0; } .clearfix:after { clear: both; } /* Columns */ .borderBox { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .noSelect { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .tcenter { text-align: center; } .tright { text-align: right; } .tleft { text-align: left; } /* ++ Globals –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* ++ Grid –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ .gridcol { clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } /* Last Grid Element */ .gridElementLast { padding-left: 0; width: 100px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } /* Push by @pushColumns columns to the right */ .grid .grid { padding: 0; } .GC { clear: both !important; } .GR { float: right !important; } .grid .G, .gridFull .G { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .G1 { width: 100px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G2 { width: 218px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G3 { width: 336px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G4 { width: 454px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G5 { width: 572px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G6 { width: 690px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G7 { width: 808px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G8 { width: 926px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G9 { width: 1044px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G9 { padding-left: 0; width: 100px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .P1 { margin-left: 118px; } .P2 { margin-left: 236px; } .P3 { margin-left: 354px; } .P4 { margin-left: 472px; } .P5 { margin-left: 590px; } .P6 { margin-left: 708px; } .P7 { margin-left: 826px; } .P8 { margin-left: 944px; } .P9 { margin-left: 1062px; } /* Default Layout: 992px. 9 Cols */ .grid, .gridFull { width: 1062px; padding: 0 6px 0 24px; clear: both; position: relative; zoom: 1; /* overflow:hidden;*/ margin: 0 auto; /* background:rgba(255,0,0,.3);*/ } .grid:after, .gridFull:after, .grid:before, .gridFull:before { content: "\0020"; display: block; height: 0; } .grid:after, .gridFull:after { clear: both; } .gridFull { width: 1092px; padding: 0; } .GL { margin-right: 0; } /* + Global Layout –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ html, body { overflow-x: hidden; } body { font-size: 17px; line-height: 26px; font-family: adobe-garamond-pro, 'Apple Garamond', 'Times New Roman', 'Georgia', serif; color: #3c3c3c; margin: 0px auto; /* background: rgb(232,232,232);*/ /* background:white url(../img/lines.png) no-repeat top center;*/ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: #006600; -webkit-font-smoothing: antialiased; /* crisp text rendering in webkit / safari */ text-rendering: optimizeLegibility; } #bglines { position: absolute; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; text-align: center; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; /* .opacity(0.9);*/ } .mobile hgroup, .mobile #partners, .mobile #contact, .mobile .blogentry div, .mobile #footer { background: white; } .mobile #bglines { background: url(../img/lines.mobile.png) repeat center 400px; } .mobile #bglines img { display: none; } #container { overflow: hidden; } div { position: relative; /* .clearfix;*/ } h1, h2, h3 { font-family: brandon-grotesque, "Futura", "Gill Sans", "Helvetica", sans-serif; font-weight: 500 ; margin-bottom: 26px; } h1 { font-size: 48px; line-height: 52px; text-transform: uppercase; color: #333; margin-top: 0; margin-bottom: 12px; font-weight: 300; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .wf-active h1 { font-weight: 500; } .hfont { font-family: brandon-grotesque, "Futura", "Gill Sans", "Helvetica", sans-serif; } p { color: #222; margin-top: 0; margin-bottom: 26px; width: 95%; font-family: adobe-garamond-pro, 'Apple Garamond', 'Times New Roman', 'Georgia', serif; } .oldie p { letter-spacing: 0.05em; } .text { max-width: 540px; } .text ul, .text ol { list-style-type: disc; padding-left: 20px; font-style: italic; } .text ul li { line-height: 24px; margin-bottom: 5px; } .text ol { list-style-type: decimal; } hgroup .text { width: 75%; } a { color: #006600; text-decoration: none; } a:visited, a:active, a:hover { color: #006600; } /* smoothload hide main until typekit has loaded if it is loaded */ html, body { height: 100%; } #container { background-image: url('data:image/gif;base64,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'); background-repeat: no-repeat; background-position: center center; height: 100%; } #main, .hfont, .bglines { visibility: hidden; } #main #intro { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -webkit-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -ms-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } #main h1, #main h2, #main h3, #main p, #main nav a { visibility: hidden; } .wf-inactive body, .wf-active body, .wf-inactive #container, .wf-active #container { height: auto; min-height: none; } .wf-inactive #main h1, .wf-active #main h1, .wf-inactive #main h2, .wf-active #main h2, .wf-inactive #main h3, .wf-active #main h3, .wf-inactive #main p, .wf-active #main p, .wf-inactive #main nav a, .wf-active #main nav a { visibility: visible; } .wf-inactive #main #intro, .wf-active #main #intro { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } .wf-inactive #main, .wf-active #main, .wf-inactive .hfont, .wf-active .hfont, .wf-inactive .bglines, .wf-active .bglines { visibility: visible; } .wf-inactive #container, .wf-active #container { background: none; } /* end smooth load */ #main a { background-color: rgba(0, 0, 0, 0.08); padding: 0 6px; color: #333; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-topleft: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; } #main a:hover { background-color: rgba(0, 0, 0, 0.9); color: white !important; } #main div.section { margin-bottom: 182px; z-index: 1; zoom: 1; /* overflow:hidden;*/ } #main div.section:after, #main div.section:before { content: "\0020"; display: block; height: 0; } #main div.section:after { clear: both; } .truemobileonly { display: none; } .mobile .truemobileonly { display: inline-block; } .mbot2 { margin-bottom: 52px; } iframe { background: white url(../img/loader.gif) no-repeat center center; } /* ============== */ /* = Header = */ /* ============== */ .sprite { background-image: url(../img/sprite.png); background-repeat: no-repeat; } .sprite:hover { background-color: transparent; background-image: url(../img/sprite.png); } #main #slideshow { background: white; padding-top: 246px; /* -webkit-transform:translate3d(0,0,0); */ } #main .next, #main .prev { background-image: url(../img/sprite.png); position: absolute; top: 50%; height: 50px; margin-top: -20px; width: 50px; z-index: 30; padding: 0; cursor: pointer; -moz-opacity: 0.6; -khtml-opacity: 0.6; -webkit-opacity: 0.6; opacity: 0.6; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } #main .next:hover, #main .prev:hover { background-color: transparent; background-image: url(../img/sprite.png); } #main .next:active, #main .prev:active { margin-top: -19px; } #main .next:hover, #main .prev:hover { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #main .next { right: 0; background-position: -50px 0px; } #main .prev { left: 0; } #main #reviews .next, #main #introwrap .next { right: -35px; } #main #reviews .prev, #main #introwrap .prev { left: -35px; } header { width: 100%; position: absolute; z-index: 500; background: white; /* -webkit-transform:translate3d(0,0,0);*/ /* .transitionOutExpoProp(height,0.5s);*/ } header #logolink { visibility: hidden; margin-left: 0; } header #logoheader { background: url('../img/logo-back.jpg') repeat-x 20% top fixed; overflow: visible; } header #logo { height: 180px; border: none; background: url('../img/niche-transparent.png') no-repeat left -20px; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; margin-bottom: 0; padding-bottom: 0; } header #logo img { display: none; } header #subline { position: absolute; left: 1em; left: 22px; z-index: 100; top: 133px; z-index: 550; } header #navcontainer { width: 100%; /* background:white;*/ height: 50px; /* .transitionOutExpo(1s);*/ } header nav { -webkit-transform: translate3d(0, 0, 0); height: 50px; zoom: 1; /* overflow:hidden;*/ overflow: hidden; padding-right: 0; } header nav:after, header nav:before { content: "\0020"; display: block; height: 0; } header nav:after { clear: both; } header nav a { outline: none; display: block; color: #020202; border: none; line-height: 32px; height: 32px; float: left; position: relative; overflow: hidden; padding: 0 0 0 1em; margin: 9px 9px 9px 0; font-size: 14px; font-weight: 500; text-transform: uppercase; } header nav a:visited, header nav a:active, header nav a:hover { color: #020202; outline: none; } header nav a:last-child { padding-right: 0; } header nav a .hover { color: #fefefe; background: black; display: block; padding: 0 1em; margin-left: -1em; } header nav a .hover-container { display: block; -webkit-transition: margin 0.3s cubic-bezier(0.08, 0.96, 0.49, 0.83); -moz-transition: margin 0.3s cubic-bezier(0.08, 0.96, 0.49, 0.83); -ms-transition: margin 0.3s cubic-bezier(0.08, 0.96, 0.49, 0.83); -o-transition: margin 0.3s cubic-bezier(0.08, 0.96, 0.49, 0.83); transition: margin 0.3s cubic-bezier(0.08, 0.96, 0.49, 0.83); } header nav a.active .hover-container, header nav a:hover .hover-container, header nav a:active .hover-container { margin-top: -32px; } /* fixed navigation header*/ .fixnav header { height: 50px; position: fixed; background: white; padding-bottom: 0; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .fixnav header nav, .fixnav header #navcontainer { height: 100%; background: none; } .fixnav header #logoheader, .fixnav header #subline { display: none; } .fixnav header #logolink { border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; background: url(../img/nav-logo.png) no-repeat 0 -30px; margin-top: 8px; display: block; visibility: visible; min-width: 100px; float: left; } .fixnav header #logolink span { visibility: hidden; } .fixnav #main { background-attachment: scroll; } .borderTopG3 { margin-top: 13px; padding-top: 13px; background: url(../img/line-G3.gif) no-repeat center top; } hr { border: none; margin-bottom: 182px; height: 2px; display: block; background: url(../img/line-G9.gif) no-repeat center top; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; } /* + section specific styles –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* ================= */ /* = Niche Section = */ /* ================= */ #niche { zoom: 1; /* overflow:hidden;*/ } #niche:after, #niche:before { content: "\0020"; display: block; height: 0; } #niche:after { clear: both; } #niche #slideshow { width: 100%; height: 350px; overflow: hidden; background: white; padding-bottom: 0; } #niche #slideshow * { /* .noSelect;*/ } #niche #slideshow .slides { width: 999em; height: 350px; overflow: hidden; position: relative; -webkit-transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1); zoom: 1; /* overflow:hidden;*/ left: -200px; } #niche #slideshow .slides:after, #niche #slideshow .slides:before { content: "\0020"; display: block; height: 0; } #niche #slideshow .slides:after { clear: both; } #niche #slideshow li { position: relative; float: left; margin-left: 10px; overflow: hidden; -webkit-transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1); } #niche #slideshow li img { height: 350px; width: auto; } #niche #slideshow li.filtered-out { width: 0 !important; margin: 0; } #niche #slideshow .prev { background-color: rgba(0, 0, 0, 0.3); /* .scale(0.8);*/ -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; top: auto; bottom: 150px; } #niche #slideshow:hover .prev { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #niche #slideshow .next { background-position: -50px -96px; } #niche #slideshow .prev { background-position: 0px -96px; } #niche #introwrap { padding-top: 23px; position: relative; background: white; background: rgba(255, 255, 255, 0.95); } #niche #introwrap h1, #niche #introwrap h2 { text-transform: uppercase; margin-top: 0.5em; margin-bottom: 0.2em; max-width: 90%; letter-spacing: -0.04em; } #niche #introwrap p { width: 95%; } #niche #introwrap .next, #niche #introwrap .prev { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; top: 3.5em; } #introcontentwrap { overflow: hidden; } .js #introwrap .introslide { position: absolute; right: -200%; top: 0; height: 22em; padding-left: 1em; width: 100%; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: right 0.8s cubic-bezier(0.19, 1, 0.22, 1); } .js #introwrap .introslide.active { position: relative; right: 0; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #introwrap #facebook { margin-bottom: 1em; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 0.5em; background-color: #EEE; height: 38px; } #introwrap #facebook iframe { width: 200px !important; height: 30px !important; background-color: #EEE; } #introwrap #facebook a { padding: 0.5em; position: absolute; left: 1; top: 0; z-index: 100; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; background: none; } #introwrap #facebook a img { margin-top: -4px; } #introwrap #facebook a:hover { color: #666; } #introwrap #facebook .fb-like { padding-left: 80px; } .fb-like iframe { background: white; } #introwrap #langswitch { /* width:100%;*/ background: none; /* display:block;*/ text-align: right; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; float: right; -webkit-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); } #introwrap #langswitch:hover { background: rgba(0, 0, 0, 0.6); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } /* =========== */ /* = Tours = */ /* =========== */ #tours { /* Expertise References */ } #tours .orderhint { position: absolute; bottom: 7em; right: 35px; z-index: 20; /* font-style:italic;*/ /* background:@nichegreen;*/ background: #999 url(../img/grad-right.png) repeat-y right top; color: white; line-height: 1.1em; /* text-transform:uppercase;*/ font-size: 0.75em; padding: 10px 5px 0 5px; /* width:100%;*/ text-align: center; width: 60px; height: 60px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); /* background:#333;*/ /* .rounded(2px);*/ /* color:white;*/ /* .scale(0.9);*/ font-weight: 500; -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; text-shadow: 1px -1px rgba(0, 0, 0, 0.2); } #tours #headline { padding: 26px 0; } #tours #headline h2, #tours #headline h1 { margin: 0; } #tours #headline h2 { display: none; } #tours #booking, #tours #cancelbooking { -moz-transition-delay: 1s; -webkit-transition-delay: 1s; transition-delay: 1s; -webkit-transition: all opacity 0.5s; -moz-transition: all opacity 0.5s; -ms-transition: all opacity 0.5s; -o-transition: all opacity 0.5s; transition: all opacity 0.5s; -moz-opacity: 0.1; -khtml-opacity: 0.1; -webkit-opacity: 0.1; opacity: 0.1; display: none; } #tours #booking { position: absolute; right: 0; background: white; margin-top: 18px; /* height:37em;*/ padding-left: 2em; margin-top: 3em; z-index: 20; border-left: 1px solid #CCC; } #tours #cancelbooking { background: black; color: white; text-transform: uppercase; padding: 0.5em 1em 0.5em 3em; position: absolute; top: 0; right: 0; z-index: 20; font-weight: 500; font-size: 95%; } #tours #cancelbooking:before { display: block; position: absolute; z-index: 21; left: 0; top: 0; background-image: url(../img/sprite.png); background-repeat: no-repeat; width: 50px; height: 50px; background-position: 0 -55px; content: ''; } #tours #cancelbooking:before:hover { background-color: transparent; background-image: url(../img/sprite.png); } #tours.book #orderwrap { -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); background: #FFF; } #tours.book #booking, #tours.book #cancelbooking { display: block; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #tours.book .product { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: none; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #tours.book .product .order { display: none; } #tours.book .product:hover { -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); } #tours .product.not-choosen { display: none; margin: 0; padding: 0; overflow-x: hidden; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; } #tours .product { /* border-top:1px solid rgba(0,0,0,.1);*/ /* border-left:1px solid rgba(0,0,0,.1);*/ -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); cursor: pointer; position: relative; background: white; padding: 26px; margin-bottom: 26px; height: 43em; overflow: hidden; } #tours .product div { -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); } #tours .product p { font-size: 95%; margin-bottom: 0; line-height: 22px; margin-bottom: 22px; } #tours .product h5 { margin-bottom: 0; text-align: center; padding-bottom: 10px; font-weight: normal; font-style: italic; font-size: 0.9em; } #tours .product .tourdesc ul { font-size: 95%; margin-top: 0; font-style: normal; } #tours .product h2 { margin: 0; height: 90px; max-height: 90px; } #tours .product h2 span { text-transform: lowercase; font-size: 16px; line-height: 24px; } #tours .product h2 strong { text-transform: uppercase; font-weight: 300; font-size: 44px; line-height: 56px; } #tours .product#corporate h2 { color: #2274AC; } #tours .product#corporate div a { color: #2274AC; border-color: #2274AC; } #tours .product#corporate div a:hover, #tours .product#corporate div a:active, #tours .product#corporate div a:visited { color: #2274AC; } #tours .product#corporate .extended { padding: 26px 0; } #tours .product#private h2 { color: #006600; } #tours .product#private .tourdata div { float: left; margin: 13px 4px 13px 10px; font-size: 0.7em; height: 26px; } #tours .product#private .tourdata .duration { background: url(../img/3h.png) no-repeat center left; padding-left: 35px; } #tours .product#private .tourdata .capacity { background: url(../img/pax-private.png) no-repeat center left; padding-left: 70px; } #tours .product#private .tourprice .desc { font-size: 0.7em; line-height: 26px; bottom: 8px; position: relative; } #tours .product#private .tourprice .price { line-height: 52px; font-weight: 500; font-size: 2em; color: black; margin-right: 0.15em; } #tours .product#expertise h2 { color: #EB008B; } #tours .product:hover { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2); box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2); } #tours .product:hover .order { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; color: white; } #tours .product .order { background: black; display: block; position: absolute; color: rgba(244, 244, 244, 0.8); margin: 0; text-align: center; width: 286px; margin-top: 26px; padding: 12px; border: none; font-family: brandon-grotesque, "Futura", "Gill Sans", "Helvetica", sans-serif; line-height: 24px; font-size: 100%; text-transform: uppercase; font-weight: 500; -webkit-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; bottom: 26px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); -o-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); } #tours #expertise-references { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } #tours #expertise-references p { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } #tours .references { overflow: hidden; text-align: center; position: relative; height: 180px; width: 100%; padding-bottom: 2em; margin: 0 0 26px 0; } #tours .references li { width: 100%; padding-bottom: 10px; height: 160px; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } #tours .references li:hover img { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #tours .references li:hover p { color: #666; } #tours .references li img { margin: 6px 0; -moz-opacity: 0.6; -khtml-opacity: 0.6; -webkit-opacity: 0.6; opacity: 0.6; max-width: 100px; height: auto; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } #tours .references li p { line-height: 1.2em; width: 80%; margin: 0 auto; color: #999; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } #tours .references h4 { margin: 0; } #tours .pager { position: absolute; left: 0; top: 230px; width: 100%; text-align: center; background: white; z-index: 10; } #tours .pager a { background: #CCC; color: #CCC; margin: 0 5px; line-height: 8px; height: 8px; font-size: 8px; width: 8px; padding: 0; display: inline-block; -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-topleft: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; border: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); -moz-opacity: 0.7; -khtml-opacity: 0.7; -webkit-opacity: 0.7; opacity: 0.7; } #tours .pager a.activeSlide { background: #444; color: #444; } .ie7 #tours .product { padding-right: 0; padding-left: 0; } /* =========== */ /* = About = */ /* =========== */ #about img { margin-bottom: 52px; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } #about .text { background: white; background: rgba(255, 255, 255, 0.95); } /* =========== */ /* = Reviews = */ /* =========== */ #reviews h1 { text-align: right; padding-bottom: 50px; margin-top: -2em; } #reviewcycle { width: 100%; height: 500px; position: relative; z-index: 10; clear: both; } #reviewcycle blockquote { width: 100%; height: 506px; position: relative; display: block; clear: both; overflow: hidden; } #reviewcycle blockquote img.rbg { height: 456px; width: auto; } #reviewcycle blockquote img.rlogo { display: none; height: 0px !important; width: 0px !important; visibility: hidden; } #reviewcycle blockquote p { width: 50%; padding: 26px; position: absolute; z-index: 20; background: white; background: rgba(255, 255, 255, 0.9); font-size: 1.4em; line-height: 1.2em; letter-spacing: -0.035em; font-style: normal; font-weight: 500; margin: 0; bottom: 78px; right: 10%; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), -3px -3px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), -3px -3px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 rgba(0, 0, 0, 0), -3px -3px 4px rgba(0, 0, 0, 0.2); color: #111; } #reviewcycle blockquote p em { font-style: normal; font-size: 15px; text-align: right; float: right; padding-top: 26px; color: #666; } #reviewcycle blockquote.justtext p { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); left: 26px; font-size: 1.6em; line-height: 1.1em; top: 20%; left: 10%; bottom: auto; right: auto; width: 60%; text-align: left; font-weight: bold; font-style: normal; } #reviewcycle blockquote.justtext p em { font-weight: normal; } #reviewcycle blockquote.justtext p.short { font-size: 1.5em; top: 20%; } #reviewcycle blockquote#madame p { bottom: 26px; } #reviews #reviewpager { width: 100%; padding-top: 30px; padding-bottom: 2em; background: white url(../img/line-G3.gif) no-repeat top center; text-align: center; position: relative; z-index: 20; } #reviews #reviewpager a { line-height: 50px; margin-right: 1em; margin-left: 0.5em; margin-top: -42px; height: 50px; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); padding-top: 30px; display: none; background-color: transparent; background-image: none; background-position: center 1px; background-repeat: no-repeat; } #reviews #reviewpager a.activeSlide, #reviews #reviewpager a:hover { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; display: inline-block; } #reviews #reviewpager a.activeSlide { background-image: url(../img/linearrow.gif); } /* ================== */ /* = Partners & Map = */ /* ================== */ #partners #logos { margin-right: 0; margin-bottom: 2em; zoom: 1; /* overflow:hidden;*/ } #partners #logos li { float: left; width: 25%; background: white; } #partners #logos li a { text-align: left; background: none; -moz-opacity: 0.8; -khtml-opacity: 0.8; -webkit-opacity: 0.8; opacity: 0.8; -webkit-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); height: 130px; display: block; line-height: 130px; border: none; width: 100%; } #partners #logos li a:hover { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #partners #logos:after, #partners #logos:before { content: "\0020"; display: block; height: 0; } #partners #logos:after { clear: both; } #links { line-height: 1.5em; margin-bottom: 0.25em; width: 60%; } #links a { white-space: nowrap; padding: 0 5px; } #nichemap a { background: none; text-align: right; display: block; width: 100%; } #nichemap a:hover { background: none; } #nichemap a img { max-width: 100% !important; height: auto !important; /* float:right;*/ } /* ================== */ /* = Instagram = */ /* ================== */ #news hgroup { margin-bottom: 2em; } #igcontainer { width: auto; zoom: 1; /* overflow:hidden;*/ clear: both; white-space: nowrap; overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; padding-bottom: 20px; padding-left: calc(50% - 522px); } #igcontainer:after, #igcontainer:before { content: "\0020"; display: block; height: 0; } #igcontainer:after { clear: both; } #igcontainer li { vertical-align: top; list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; width: 454px; margin-right: 40px; margin-top: 1em; overflow: hidden; } #igcontainer li.iintro { margin-right: 0; } #igcontainer li a { padding: 0; background: none; } #igcontainer li img { padding-top: 70px; width: 454px; height: 454px; display: block; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #igcontainer li .il-photo__meta, #igcontainer li p { width: 75%; white-space: normal; margin-top: 2em; } #igcontainer li .il-photo__meta .il-photo__caption, #igcontainer li p .il-photo__caption { -moz-opacity: 0.4; -khtml-opacity: 0.4; -webkit-opacity: 0.4; opacity: 0.4; -webkit-transition: opacity 0.8 cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 0.8 cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 0.8 cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 0.8 cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.8 cubic-bezier(0.19, 1, 0.22, 1); } #igcontainer li .il-photo__meta .il-photo__date, #igcontainer li p .il-photo__date { font-size: 1.1em; position: absolute; top: -560px; letter-spacing: 0.15em; font-family: brandon-grotesque, "Futura", "Gill Sans", "Helvetica", sans-serif; } #igcontainer li:hover .il-photo__caption { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } /* ================== */ /* = Blog = */ /* ================== */ #blog hgroup { margin-bottom: 2em; } #blog article { position: relative; margin-bottom: 3em; } #blog article h3 { margin-top: 0; margin-bottom: 0.5em; } #blog article h3 a { background: none; padding: 0; -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1); } #blog article time { font-weight: 500; font-size: 80%; margin-bottom: .5em; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; -webkit-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1); } #blog article:hover time { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #blog article .imgwrap a { background: none; padding: 0; } #blog article img { max-width: 200px; float: left; margin: 0 1em 1em 0; padding: 0; -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); } #blog article p { max-height: 6.5em; margin-bottom: 0.5em; overflow: hidden; text-overflow: ellipsis; color: #666; } #blog article:hover p { color: #333; } #blog #blogmore { padding: 0.5em; } /* ================== */ /* = Contact = */ /* ================== */ #contact h3 { margin-top: 0; } #contact .contacts { -moz-opacity: 0.8; -khtml-opacity: 0.8; -webkit-opacity: 0.8; opacity: 0.8; -webkit-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1); } #contact .contacts:hover { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #contact .profiles a { text-transform: uppercase; margin-bottom: 0.5em; padding: 0 0.5em; display: inline-block; font-weight: 500; color: white; -webkit-transition: background 0.4s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: background 0.4s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: background 0.4s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: background 0.4s cubic-bezier(0.19, 1, 0.22, 1); transition: background 0.4s cubic-bezier(0.19, 1, 0.22, 1); } #contact .profiles a:hover { background: black !important; } /* ========== */ /* = Footer = */ /* ========== */ #footer { padding-bottom: 20%; text-align: center; color: #666; } /* Tools only for big layout > 1024 */ .fullonly, .mobileonly { display: none; } @media only screen and (min-width: 1024px) { .fullonly { display: block; } .G1-full { width: 100px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G2-full { width: 218px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G3-full { width: 336px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G4-full { width: 454px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G5-full { width: 572px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G6-full { width: 690px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G7-full { width: 808px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G8-full { width: 926px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .G9-full { width: 1044px; margin-right: 18px; clear: none; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-wrap: break-word; } .P1-full { margin-left: 118px; } .P2-full { margin-left: 236px; } .P3-full { margin-left: 354px; } .P4-full { margin-left: 472px; } .P5-full { margin-left: 590px; } .P6-full { margin-left: 708px; } .P7-full { margin-left: 826px; } .P8-full { margin-left: 944px; } .P9-full { margin-left: 1062px; } /* Tours hover alpha effect */ .no-touch #tours:hover div.product div { -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; } .no-touch #tours:hover div.product .order { -moz-opacity: 0.2; -khtml-opacity: 0.2; -webkit-opacity: 0.2; opacity: 0.2; } .no-touch #tours div.product:hover div, .no-touch #tours.book div.product div { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } .no-touch #tours div.product:hover .order { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #reviews h1 { position: absolute; right: 0; z-index: 40; } #reviews blockquote p { font-size: 1.4em; } #reviews #reviewpager { background-image: url(../img/line-G9.gif); } #reviews #reviewpager a { display: inline-block; } /*out of grid date for blog entries*/ #blog time { position: absolute; left: -100px; text-align: right; } } /* Tablet Layout: 768px. 6 Cols */ @media only screen and (max-width: 1023px) { .grid { width: 708px; } .gridFull { width: 738px; } .fullonly { display: block; } #main #slideshow { padding-top: 280px; } #igcontainer { padding-left: calc(50% - 354px); } header { padding-bottom: 0; } header #logo { height: 240px; } header #logolink { display: none; } header nav { position: relative; z-index: 500; } header nav a { margin-left: -1em; } header #navcontainer, header nav { height: auto; } .fixnav header { /* Indicator of current section when collapsed*/ } .fixnav header nav a { display: none; font-size: 14px; width: auto; margin-top: 9px; } .fixnav header nav a.active { display: block; margin-right: 0; text-align: right; padding-right: 15px; position: absolute; right: 0; top: 0; -moz-opacity: 0.85; -khtml-opacity: 0.85; -webkit-opacity: 0.85; opacity: 0.85; padding-top: 0.15em; font-size: 1.2em; } .fixnav header nav a.active span { background: white; color: #333; } .fixnav header nav a.active:before { content: '▾ '; position: absolute; left: 0; width: 15px; height: 10px; display: block; font-size: 0.8em; -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; } .fixnav header nav a.active#logolink { left: 24px; margin-left: 0; } .fixnav header nav a#logolink { display: block; } /* Dropdown menu on hover */ .no-touch .fixnav header:hover { height: 300px; background: rgba(255, 255, 255, 0.95); } .no-touch .fixnav header:hover #logolink { width: 100%; clear: both; margin-bottom: 1em; margin-top: 9px; } .no-touch .fixnav header:hover #logolink.active { left: 0; } .no-touch .fixnav header:hover nav a { text-align: right; width: 100%; margin-top: 0; display: block; } .no-touch .fixnav header:hover nav a span { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .no-touch .fixnav header:hover nav a.active { float: none; position: relative; padding-top: 0; font-size: 14px; right: 0; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } .no-touch .fixnav header:hover nav a.active span { background: black; color: white; } .no-touch .fixnav header:hover nav a.active:before { content: ''; } #introwrap .prev { left: -50px; } #tours #headline { text-align: left; } #tours #booking { border: none; } #tours .product { width: 100%; margin-right: 0; height: auto; } #tours .product h2 { width: 100%; float: left; } #tours .product > div { margin-bottom: 26px; } #tours .product .borderTopG3 { background-size: 100% 3px; } #tours .product .order { position: relative; clear: both; width: 100%; bottom: 0; } #tours.book .product { background: none; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; height: auto; margin-bottom: 0; } #tours.book .product .tourdesc, #tours.book .product .extended, #tours.book .product .tourdata { padding: 0; margin: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -ms-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); display: none; } #tours.book .product.moreinfo .tourdesc, #tours.book .product.moreinfo .extended, #tours.book .product.moreinfo .tourdata { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; display: block; height: auto; padding: inherit; margin: inherit; } #tours.book #booking { margin: 0; width: 100%; position: relative; padding-left: 1em; padding-right: 1em; } #reviews h1 { position: relative; text-align: left; } #reviews blockquote { background-color: rgba(255, 255, 255, 0.95); } #reviews blockquote p { font-size: 1.2em; } #reviews blockquote.justtext p { width: 70%; font-size: 1.3em; } #links, #logos { width: 100%; text-align: center; } } /* Wide Mobile Layout: 480px. 4 Cols */ @media only screen and (max-width: 767px) { .mobileonly { display: block; } .fullonly { display: none; } /* Global */ .grid { width: 472px; padding: 0 24px 0 24px; } .gridFull { width: 520px; } .G2, .G3, .G4, .G5, .G6, .G7, .G8, .G9 { width: 100%; margin-right: 0; margin-bottom: 26px; } #igcontainer { padding-left: 24px; } .twocol { -moz-column-count: 1; -moz-column-gap: 10px; -webkit-column-count: 1; -webkit-column-gap: 10px; column-count: 1; column-gap: 10px; } hr { background-image: url(../img/line-G3.gif); clear: both; display: block; margin-bottom: 100px; } #niche #introwrap h1, #niche #introwrap h2, h1 { font-weight: 500; font-size: 30px; line-height: 30px; } .js #introwrap .introslide { padding-left: 0; } /* Navigation */ /* Make nav full width and vertical all the time */ header nav a { display: block; width: 100%; margin-bottom: 0; margin-top: 0; } /*mobile logo*/ header #logo img { display: block; margin-top: 20px; margin-left: 24px; } header #logoheader { background: none; } header #subline { display: none; } .mobile header #logo img { margin-left: 18px; } #niche #slideshow { height: 180px; } #niche #slideshow .slides { height: 100%; } #niche #slideshow .slides li { width: auto !important; } #niche #slideshow .slides img { height: 180px !important; width: auto !important; } #niche #slideshow .prev { bottom: 70px; } /* Content */ #main #slideshow { background: white; padding-top: 475px; } #main div.section { margin-bottom: 52px; } #main #introwrap .next { right: -10px !important; top: 40px; background-color: rgba(0, 0, 0, 0.2); z-index: 180; } #introwrap .prev { display: none; } #introwrap .next, #introwrap .next:hover { background-color: white; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } #tours .product { width: 100%; height: auto; } #tours .product .order { position: relative; width: 100%; margin-top: 26px; } #reviews h1 { position: relative; text-align: left; } #reviews #reviewcycle { height: 270px; } #reviews .next { right: 60px !important; top: 380px; } #reviews .prev { left: 60px !important; top: 380px; } #reviews blockquote { height: 100%; margin: 0; padding: 0; } #reviews blockquote p { width: 85%; padding: 0 0 0 5%; position: relative; bottom: auto !important; left: auto; right: auto; font-style: normal; font-size: 1em; line-height: 1.3em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; top: 15%; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } #reviews blockquote#madame p { top: 0; width: 90%; padding: 0; } #reviews blockquote img { /* width:auto !important; height:200px !important;*/ display: none !important; } #reviews blockquote.justtext p { font-size: 22px !important; line-height: 1.2em; top: 15%; left: 0; width: 90%; } #contact .contacts { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; } .touch #contact .formholder, .touch #contact hr { display: none; } #links, #partners #logos li { width: 50%; text-align: left; } #links a, #partners #logos li a { text-align: left; } #links { width: 100%; text-align: left; } } .projects .project h3 { margin: 0; } .projects .project p { margin-bottom: 3em; } .projects .past { margin-top: 2em; } /* Mobile Layout: 320px. 3 Cols */ @media only screen and (max-width: 550px) { /* Global*/ .mobileonly { display: block; } #igcontainer li { padding: 0; margin-top: 0; width: 302.66666667px; } #igcontainer li img { padding-top: 0; width: 302.66666667px; height: 302.66666667px; } .grid { /* width: (3 * @colwidth) + (3 * @colgutter);*/ /* padding: 0 @layoutmarginMobile 0 @layoutmarginMobile;*/ width: 90%; padding: 0 5%; } .gridFull { /* width: (3 * @colwidth) + (3 * @colgutter) + @layoutmarginMobile*2 ;*/ width: 100%; } #niche #introwrap h1, #niche #introwrap h2, h1 { font-weight: 500; font-size: 24px; line-height: 24px; } /* Content */ #reviews blockquote.justtext p { font-size: 1em; } #contact .formholder, #contact hr { display: none; } } /* + Print –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* ==|== print styles ======================================================= Print styles. ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*# sourceMappingURL=style.css.map */