/* Theme Name: KittoKatsu Theme URI: Description: Author: design: KittoKatsu | programming & interaction advice: André Pahl Author URI: Version: 3.0 */ /* ============================================================================= Plugins ============================================================================= */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#152735}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} /* always adjust paths for blank.gif, grab.png, grabbing.png !! */ /* Royalslider CSS v1.0.6 http://dimsemenov.com/plugins/royal-slider/ http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css */ .royalSlider{width:600px;height:400px;position:relative;direction:ltr}.royalSlider>*{float:left}.rsWebkit3d .rsSlide,.rsWebkit3d .rsContainer,.rsWebkit3d .rsThumbs,.rsWebkit3d .rsPreloader,.rsWebkit3d img,.rsWebkit3d .rsOverflow,.rsWebkit3d .rsBtnCenterer,.rsWebkit3d .rsAbsoluteEl,.rsWebkit3d .rsABlock,.rsWebkit3d .rsLink{-webkit-backface-visibility:hidden}.rsFade.rsWebkit3d .rsSlide,.rsFade.rsWebkit3d img,.rsFade.rsWebkit3d .rsContainer{-webkit-transform:none}.rsOverflow{width:100%;height:100%;position:relative;overflow:hidden;float:left;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVisibleNearbyWrap{width:100%;height:100%;position:relative;overflow:hidden;left:0;top:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVisibleNearbyWrap .rsOverflow{position:absolute;left:0;top:0}.rsContainer{position:relative;width:100%;height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsArrow,.rsThumbsArrow{cursor:pointer}.rsThumb{float:left;position:relative}.rsArrow,.rsNav,.rsThumbsArrow{opacity:1;-webkit-transition:opacity .3s linear;-moz-transition:opacity .3s linear;-o-transition:opacity .3s linear;transition:opacity .3s linear}.rsHidden{opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear .3s,opacity .3s linear;-moz-transition:visibility 0s linear .3s,opacity .3s linear;-o-transition:visibility 0s linear .3s,opacity .3s linear;transition:visibility 0s linear .3s,opacity .3s linear}.rsGCaption{width:100%;float:left;text-align:center}.royalSlider.rsFullscreen{position:fixed!important;height:auto!important;width:auto!important;margin:0!important;padding:0!important;z-index:2147483647!important;top:0!important;left:0!important;bottom:0!important;right:0!important}.royalSlider .rsSlide.rsFakePreloader{opacity:1!important;-webkit-transition:0s;-moz-transition:0s;-o-transition:0s;transition:0s;display:none}.rsSlide{position:absolute;left:0;top:0;display:block;overflow:hidden;height:100%;width:100%}.royalSlider.rsAutoHeight,.rsAutoHeight .rsSlide{height:auto}.rsContent{width:100%;height:100%;position:relative}.rsPreloader{position:absolute;z-index:0}.rsNav{-moz-user-select:-moz-none;-webkit-user-select:none;user-select:none}.rsNavItem{-webkit-tap-highlight-color:rgba(0,0,0,0.25)}.rsThumbs{cursor:pointer;position:relative;overflow:hidden;float:left;z-index:22}.rsTabs{float:left;background:none!important}.rsTabs,.rsThumbs{-webkit-tap-highlight-color:rgba(0,0,0,0)}.rsVideoContainer{width:auto;height:auto;line-height:0;position:relative}.rsVideoFrameHolder{position:absolute;left:0;top:0;background:#141414;opacity:0;-webkit-transition:.3s}.rsVideoFrameHolder.rsVideoActive{opacity:1}.rsVideoContainer iframe,.rsVideoContainer video,.rsVideoContainer embed,.rsVideoContainer .rsVideoObj{position:absolute;z-index:50;left:0;top:0;width:100%;height:100%}.rsVideoContainer.rsIOSVideo iframe,.rsVideoContainer.rsIOSVideo video,.rsVideoContainer.rsIOSVideo embed{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-right:44px}.rsABlock{left:0;top:0;position:absolute;z-index:15}img.rsImg{max-width:none}.grab-cursor{cursor:url(assets/gfx/grab.png) 8 8,move}.grabbing-cursor{cursor:url(assets/gfx/grabbing.png) 8 8,move}.rsNoDrag{cursor:auto}.rsLink{left:0;top:0;position:absolute;width:100%;height:100%;display:block;z-index:20;background:url(assets/gfx/blank.gif)} /** * Swiper 4.1.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2018 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 13, 2018 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform} .swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x} .swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform} .swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move} .swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} /*! other helpers some taken from Boilerplate Author: Aaron T. Grogg, based on the work of Paul Irish, Divya Manian, and Elliot Jay Stocks http://aarontgrogg.com/ */ hr{display:block;height:1px;border:0;border-top:1px solid #152735;margin:1em 0;padding:0}audio,canvas,img,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}@media print{*{background:transparent!important;color:#152735!important;box-shadow:none!important;text-shadow:none!important}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:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}} /* ============================================================================= Colors blue: #152735 hover red: #e52320 ========================================================================== */ /* ----------------------------------------------- fonts ----------------------------------------------- */ @font-face { font-family: 'GT-America-Standard-Regular'; src: url('assets/fonts/GT-America-Standard-Regular.eot'); src: url('assets/fonts/GT-America-Standard-Regular.eot?#iefix') format('embedded-opentype'), url('assets/fonts/GT-America-Standard-Regular.woff2') format('woff2'), url('assets/fonts/GT-America-Standard-Regular.woff') format('woff'), url('assets/fonts/GT-America-Standard-Regular.ttf') format('truetype'); font-style: normal; font-weight: normal; } @font-face { font-family: 'GT-America-Standard-Bold'; src: url('assets/fonts/GT-America-Standard-Bold.eot'); src: url('assets/fonts/GT-America-Standard-Bold.eot?#iefix') format('embedded-opentype'), url('assets/fonts/GT-America-Standard-Bold.woff2') format('woff2'), url('assets/fonts/GT-America-Standard-Bold.woff') format('woff'), url('assets/fonts/GT-America-Standard-Bold.ttf') format('truetype'); font-style: normal; font-weight: normal; } @font-face { font-family: 'GT-America-Expanded-Medium'; src: url('assets/fonts/GT-America-Expanded-Medium.eot'); src: url('assets/fonts/GT-America-Expanded-Medium.eot?#iefix') format('embedded-opentype'), url('assets/fonts/GT-America-Expanded-Medium.woff2') format('woff2'), url('assets/fonts/GT-America-Expanded-Medium.woff') format('woff'), url('assets/fonts/GT-America-Expanded-Medium.ttf') format('truetype'); font-style: normal; font-weight: normal; } @font-face { font-family: 'fontello'; src: url('assets/fonts/fontello2.eot?50822755'); src: url('assets/fonts/fontello2.eot?50822755#iefix') format('embedded-opentype'), url('assets/fonts/fontello2.woff2?50822755') format('woff2'), url('assets/fonts/fontello2.woff?50822755') format('woff'), url('assets/fonts/fontello2.ttf?50822755') format('truetype'); font-weight: normal; font-style: normal; } /* todo remove */ @font-face { font-family: 'gt_americamedium'; src: url('assets/fonts/c/gt-america-medium-webfont.woff2') format('woff2'), url('assets/fonts/c/gt-america-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* ----------------------------------------------- General ----------------------------------------------- */ html, button, input, select, textarea { color: #152735; } html { font-size:100%; /* base 16px = 1em/rem */ } body { font-family: "GT-America-Standard-Regular", sans-serif; font-size: 0.9375em; /* 15px */ line-height: 1.6em; /* 24px -> 24/16 / 0.9375 */ font-weight:normal; color:#152735; background-color:#ffffff; overflow-x:hidden; overflow-y: scroll; text-rendering: optimizeLegibility; border:9px solid #ffffff; /* adjust also #main_menu if adjusted*/ -webkit-transition: background-color 1s ease-in-out, border 1s ease-in-out; -moz-transition: background-color 1s ease-in-out, border 1s ease-in-out; -o-transition: background-color 1s ease-in-out, border 1s ease-in-out; -ms-transition: background-color 1s ease-in-out, border 1s ease-in-out; transition: background-color 1s ease-in-out, border 1s ease-in-out; } div, article, section, aside, nav, figure { position:relative; } figure { margin:0; } /* adjust also #main_menu if adjusted*/ .border_red { border:9px solid #152735; } /* adjust also #main_menu if adjusted*/ .border_blue { border:9px solid #152735; } p { margin-top:0; } table { border-collapse:collapse; border-spacing:0; } table td { vertical-align:top; text-align:left; padding:0; margin:0; } .table_view { display:table; table-layout:fixed; } .table_view_nonfix { display:table; } .table_cell_mid { display:table-cell; vertical-align:middle; } .table_row { display:table-row; } .table_cell { display:table-cell; vertical-align:top; } .v_align_parent { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .v_align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ul, ol { list-style:none; list-style-image:none; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } *, *::before, *::after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing: border-box; } *::selection { background:#eee; color:#152735; text-shadow:none; } *::-moz-selection { background:#eee; color:#152735; text-shadow:none; } * { outline:0; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-focus-ring-color:rgba(0, 0, 0, 0); } a:active, a:focus { outline: 0 /* firefox needs it */ } .clickable { cursor:pointer; touch-action: manipulation; -ms-touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; user-select: none; } .noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; user-select: none; } a, .like_link { color: #152735; text-decoration:none; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; touch-action: manipulation; -ms-touch-action: manipulation; } .no-touch .red_link_hover:hover { color: #e52320; } /* todo: ok ? */ a[x-apple-data-detectors], a[href^="tel"] { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:normal !important; line-height:normal !important; } .nowrap { white-space:nowrap; } .nowrap a { -ms-word-break:keep-all; word-break:keep-all; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none; } .read_more { text-decoration: underline; } /* todo */ .post-edit-link { display:none; /* margin-bottom:0; text-align:left; display:block; position:absolute; left:59px; bottom:10px; color:transparent !important; padding:30px 0; z-index:100; */ } .post-edit-link:hover { color:#152735 !important; } .hw_acc { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .faded_out { opacity:0!important; } .faded_soft { opacity:0.3!important; } /* input styling & placeholders */ textarea, input[type="text"], input[type="button"], input[type="submit"] { -webkit-appearance:none; /* for iOS */ border-radius:0; } input:not([type="checkbox"]), textarea { border:0; border-bottom: 1px solid #152735; color: #152735; width: 100%; background:transparent; -webkit-appearance:none; border-radius:0; padding:0; display:inline-block; margin-bottom:15px; } body.red_bg input { border-bottom:1px solid #ffffff; color:#ffffff; } body.border_blue input { border-bottom:1px solid #152735; color:#152735; } textarea { border:1px solid #152735; padding:5px; resize:none; } body.red_bg textarea { border:1px solid #ffffff; } body.border_blue textarea { border:1px solid #152735; } /* don't use opacity, breaks EDGE https://www.sitepoint.com/community/t/edge-browser-missing-placeholders-on-inputs/207611 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/ */ ::-webkit-input-placeholder { color:#152735; } :-moz-placeholder { color:#152735; } ::-moz-placeholder { color:#152735; } :-ms-input-placeholder { color:#152735; } /* on focus */ :focus::-webkit-input-placeholder { opacity:0.4; } :focus:-moz-placeholder { opacity:0.4; } :focus::-moz-placeholder { opacity:0.4; } :focus:-ms-input-placeholder { opacity:0.4; } /* red bg */ body.red_bg ::-webkit-input-placeholder { color:#ffffff; } body.red_bg :-moz-placeholder { color:#ffffff; } body.red_bg ::-moz-placeholder { color:#ffffff; } body.red_bg :-ms-input-placeholder { color:#ffffff; } /* border blue */ body.border_blue ::-webkit-input-placeholder { color:#ffffff; } body.border_blue :-moz-placeholder { color:#ffffff; } body.border_blue ::-moz-placeholder { color:#ffffff; } body.border_blue :-ms-input-placeholder { color:#ffffff; } /* ----------------------------------------------- animations ----------------------------------------------- */ .opacity_fade { -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .opacity_fade06 { -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .opacity_fade_1 { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .transform_all_03 { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .transform_all_06 { -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .transform_all_1 { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .animated { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated_05 { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated_1s { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated_2s { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* http://daneden.github.io/animate.css/ */ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } /* loading */ #loading_message { position:fixed; width:100px; height:80px; top:50%; left:50%; margin-top:-40px; margin-left:-50px; z-index:10000; } #loading_ani { width:100px; height:80px; } .loading_ani_active { background:url(assets/gfx/loading.svg?2) no-repeat; background-size:500px 80px; background-position:-400px 0px; -webkit-animation: ando_running_ani 0.5s steps(4) infinite; -moz-animation: ando_running_ani 0.5s steps(4) infinite; -o-animation: ando_running_ani 0.5s steps(4) infinite; animation: ando_running_ani 0.5s steps(4) infinite; -webkit-transform: scale3d(0.7, 0.7, 0.7); -moz-transform: scale3d(0.7, 0.7, 0.7); -o-transform: scale3d(0.7, 0.7, 0.7); -ms-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7); } body.red_bg .loading_ani_active { background:url(assets/gfx/loading_white.svg?2) no-repeat; background-size:500px 80px; background-position:-400px 0px; -webkit-animation: ando_running_ani 0.5s steps(4) infinite; -moz-animation: ando_running_ani 0.5s steps(4) infinite; -o-animation: ando_running_ani 0.5s steps(4) infinite; animation: ando_running_ani 0.5s steps(4) infinite; -webkit-transform: scale3d(0.7, 0.7, 0.7); -moz-transform: scale3d(0.7, 0.7, 0.7); -o-transform: scale3d(0.7, 0.7, 0.7); -ms-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7); } @-webkit-keyframes ando_running_ani { from { background-position: -400px 0px; } to { background-position: 0px 0px } } @-moz-keyframes ando_running_ani { from { background-position: -400px 0px; } to { background-position: 0px 0px } } @-o-keyframes ando_running_ani { from { background-position: -400px 0px; } to { background-position: 0px 0px } } @keyframes ando_running_ani { from { background-position: -400px 0px; } to { background-position: 0px 0px } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .spin_me_5s { -moz-animation: spin 5s infinite linear; -o-animation: spin 5s infinite linear; -webkit-animation: spin 5s infinite linear; animation: spin 5s infinite linear; } /* screensaver */ #screensaver { position:fixed; width:100%; height:100%; top: 0; left: 0; z-index:20000; background-color:rgba(255,252,246,0.9); } #screensaver_outer { position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-39px; width:79px; height:71px; overflow:hidden; } #screensaver_inner { width:79px; height:71px; } #screensaver_inner.active { background:url(assets/gfx/screensaver.svg?2) no-repeat; background-size:158px 71px; background-position:0px 0px; -webkit-animation: ando_screensaver 0.6s steps(2) infinite; -moz-animation: ando_screensaver 0.6s steps(2) infinite; -o-animation: ando_screensaver 0.6s steps(2) infinite; animation: ando_screensaver 0.6s steps(2) infinite; -webkit-transform: scale3d(0.7, 0.7, 0.7); -moz-transform: scale3d(0.7, 0.7, 0.7); -o-transform: scale3d(0.7, 0.7, 0.7); -ms-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7); } @-webkit-keyframes ando_screensaver { from { background-position: 0px 0px; } to { background-position: -158px 0px } } @-moz-keyframes ando_screensaver { from { background-position: 0px 0px; } to { background-position: -158px 0px } } @-o-keyframes ando_screensaver { from { background-position: 0px 0px; } to { background-position: -158px 0px } } @keyframes ando_screensaver { from { background-position: 0px 0px; } to { background-position: -158px 0px } } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /* video button, link, fallback */ .video_fallback { position:absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; } .video_play_link { font-family: 'GT-America-Standard-Bold', sans-serif; position: absolute; z-index: 10; bottom: 20px; text-align: center; margin: 0 auto; left: 0; right: 0; display: none; } .white .video_play_link { color:white; } .video_play { position:absolute; width:133px; height:84px; top:50%; left:50%; margin-left:-56px; margin-top:-33px; background:url(assets/gfx/video_play.svg?2) no-repeat; background-size:266px 84px; background-position:0px 0px; z-index:10; } .white .video_play { background:url(assets/gfx/video_play_white.svg?2) no-repeat; background-size:266px 84px; } .blue .video_play { background:url(assets/gfx/video_play_blue.svg?2) no-repeat; background-size:266px 84px; } .video_play.active { -webkit-animation: video_play_ani 10s step-start infinite; -moz-animation: video_play_ani 16s step-start infinite; -o-animation: video_play_ani 16s step-start infinite; animation: video_play_ani 16s step-start infinite; } .no-touch .video_play.active:hover { background-position:-133px 0px !important; -webkit-animation:none; -moz-animation:none; -o-animation:none; animation:none; } @-webkit-keyframes video_play_ani { 0% { background-position:0px 0px; } 2% { background-position:0px 0px; } 3% { background-position:-133px 0px; } 4% { background-position:0px 0px; } 29% { background-position:0px 0px; } 30% { background-position:-133px 0px; } 31% { background-position:0px 0px; } 32% { background-position:-133px 0px; } 33% { background-position:0px 0px; } 70% { background-position:0px 0px; } 71% { background-position:-133px 0px; } 72% { background-position:0px 0px; } 89% { background-position:0px 0px; } 90% { background-position:-133px 0px; } 93% { background-position:0px 0px; } } @-moz-keyframes video_play_ani { 0% { background-position:0px 0px; } 2% { background-position:0px 0px; } 3% { background-position:-133px 0px; } 4% { background-position:0px 0px; } 29% { background-position:0px 0px; } 30% { background-position:-133px 0px; } 31% { background-position:0px 0px; } 32% { background-position:-133px 0px; } 33% { background-position:0px 0px; } 70% { background-position:0px 0px; } 71% { background-position:-133px 0px; } 72% { background-position:0px 0px; } 89% { background-position:0px 0px; } 90% { background-position:-133px 0px; } 93% { background-position:0px 0px; } } @-o-keyframes video_play_ani { 0% { background-position:0px 0px; } 2% { background-position:0px 0px; } 3% { background-position:-133px 0px; } 4% { background-position:0px 0px; } 29% { background-position:0px 0px; } 30% { background-position:-133px 0px; } 31% { background-position:0px 0px; } 32% { background-position:-133px 0px; } 33% { background-position:0px 0px; } 70% { background-position:0px 0px; } 71% { background-position:-133px 0px; } 72% { background-position:0px 0px; } 89% { background-position:0px 0px; } 90% { background-position:-133px 0px; } 93% { background-position:0px 0px; } } @keyframes video_play_ani { 0% { background-position:0px 0px; } 2% { background-position:0px 0px; } 3% { background-position:-133px 0px; } 4% { background-position:0px 0px; } 29% { background-position:0px 0px; } 30% { background-position:-133px 0px; } 31% { background-position:0px 0px; } 32% { background-position:-133px 0px; } 33% { background-position:0px 0px; } 70% { background-position:0px 0px; } 71% { background-position:-133px 0px; } 72% { background-position:0px 0px; } 89% { background-position:0px 0px; } 90% { background-position:-133px 0px; } 93% { background-position:0px 0px; } } /* ----------------------------------------------- Colors ----------------------------------------------- */ .bg_red { background-color:#152735; } .bg_blue { background-color:#152735; } .bg_beige { background-color:#152735; } body.red_bg { color:#ffffff; background-color:#152735; } body.red_bg .red { color:#ffffff; } .beige_bg { color:#152735; background-color:#ffffff; } .beige { color:#ffffff; } body.red_bg .beige { color:#152735; } a:hover, .like_link:hover { color:#152735; } body.red_bg a, body.red_bg .red a, body.red_bg .like_link { color:#ffffff; } body .editor_content a:hover, body .editor_content .like_link:hover { text-decoration: none; } /* ----------------------------------------------- SVG animation ----------------------------------------------- */ .enlivenem { visibility:hidden; cursor:pointer; opacity:0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } /* ----------------------------------------------- Typography [mce] reflect changes in custom-editor-style.css ----------------------------------------------- */ h1, h2, h3 { margin-top: 0; font-style: normal; font-weight: normal; } i, em { font-family: 'GT-America-Standard-Regular', serif; font-style: normal; font-weight: normal; } b, strong { font-family: 'GT-America-Standard-Bold', sans-serif; font-style:normal; font-weight:normal; } b i, strong i, b em, em b, i b, i strong, .walsm_42 i, i .walsm_42, .walsm_42 em, em .walsm_42, .walsm_36 i, i .walsm_36, .walsm_36 em, em .walsm_36, .walsm_24 i, i .walsm_24, .walsm_24 em, em .walsm_24, .walsm_20 i, i .walsm_20, .walsm_20 em, em .walsm_20 { font-family: 'GT-America-Standard-Bold', sans-serif; font-style: normal; font-weight: normal; } table td { padding-right:26px !important; padding-right:1.625rem !important; } /* 42 pt */ .walsm_42 { font-family: 'GT-America-Standard-Regular', sans-serif; font-size:42px; font-size:2.625rem; line-height:51px; line-height:3.1875rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 36 pt // todo for later: light walsl_36 */ .walsm_36, .walsl_36 { font-family: 'GT-America-Standard-Regular', sans-serif; font-size:36px; font-size:2.25rem; line-height:44px; line-height:2.75rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .walsl_36 a, .walsm_36 a { text-decoration:none !important; position:relative; } .walsl_36 a::after, .walsm_36 a::after { content: ''; border-bottom:2px solid; position:absolute; left:0; top:42px; top:2.625rem; width:100%; } .walsl_36 a:hover::after, .walsm_36 a:hover::after { border-bottom:2px solid transparent; } /* 24 pt // todo for later walsl_24 light */ .walsm_24, .walsl_24 { font-family: 'GT-America-Standard-Regular', sans-serif; font-size:24px; font-size:1.5rem; line-height:33px; line-height:2.0625rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .walsm_24 a, .walsl_24 a { text-decoration:none !important; position:relative; } .walsm_24 a::after, .walsl_24 a::after { content: ''; border-bottom:1px solid; position:absolute; left:0; top:28px; top:1.75rem; width:100%; } .walsm_24 a:hover::after, .walsl_24 a:hover::after { border-bottom:1px solid transparent; } /* 22 pt */ .america_22 { font-family: 'GT-America-Standard-Regular', sans-serif; font-size: 22px; font-size: 1.375rem; line-height: 33px; line-height: 2.0625rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p.america_22 { position: relative; margin-top: -10px; margin-top: -0.625rem; } /* 20 pt */ .walsm_20 { font-family: 'GT-America-Standard-Regular', sans-serif; font-size:20px; font-size:1.25rem; line-height:29px; line-height:1.8125rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .citation_name { font-family: 'GT-America-Standard-Regular', sans-serif; font-size: 11px; line-height: 13px; text-transform: uppercase; text-align: center; } /* other sizes */ .text_bigger { font-family: 'GT-America-Standard-Regular', sans-serif; font-size: 18px; font-size: 1.125rem; line-height: 29px; line-height: 1.8125rem; } /* todo for later: remove .text_bigger style from all projects as temp solution make .text bigger for non-case studies like body text */ body.single:not(.case_study) .text_bigger { font-size: 15px; font-size: 0.9375rem; line-height: 24px; line-height: 1.5rem; } .text_smaller { font-family: 'GT-America-Standard-Regular', sans-serif; font-size: 13px; font-size: 0.8125rem; line-height: 17px; line-height: 1.0625rem; } /* xxx */ .nav_links { font-family: 'gt_americamedium', sans-serif; font-size: 13px; font-size: 0.8125rem; line-height: 17px; line-height: 1.0625rem; } .caslon { font-family: 'GT-America-Standard-Regular', sans-serif; } .page_section, .like_page_section { text-transform: uppercase; font-family: 'GT-America-Expanded-Medium', sans-serif; font-size: 11px; font-size: 0.6875rem; line-height: 18px; /* was 21px */ line-height: 1rem; letter-spacing: 0.7px; margin-bottom: 0; -webkit-transition: color .6s ease-in-out; -moz-transition: color .6s ease-in-out; -o-transition: color .6s ease-in-out; -ms-transition: color .6s ease-in-out; transition: color .6s ease-in-out; position: relative; top: 4px; top: 0.25rem; } p.like_page_section { margin-bottom: 0.6875rem; } .ami_expanded_big_up { font-family: 'GT-America-Expanded-Medium', sans-serif; font-size: 23px; font-size: 1.4375rem; line-height: 43px; line-height: 2.6875rem; letter-spacing: 1px; text-transform: uppercase; padding-right: 10vw; } /* todo for later: re-enable arrow? */ .page_section .arr_right::after { display: none !important; } /* großbuchstaben 14pt */ .uppercase_14 { text-transform:uppercase; font-family:'GT-America-Standard-Regular', sans-serif; font-size:14px; font-size:0.875rem; line-height:22px; line-height:1.375rem; letter-spacing:1px; } p.uppercase_14 { position: relative; margin-top: -7px; margin-top: -0.4375rem; } /* circle outline for numbers */ .circle_around { display:inline-block; border-radius:50%; border:1px solid; margin-right:38px; margin-right:2.375rem; width:32px; width:2rem; height:32px; height:2rem; text-align:center; } .circle_around::before { content:'\200B'; display:inline-block; line-height:0; padding-top:16px; padding-top:1rem; } /* flower outline for numbers */ .flower_around { display:inline-block; background:url(assets/gfx/flower_outline_black.svg?2) no-repeat; background-size:32px 33px; background-size:2rem 2.0625rem; margin-right:38px; margin-right:2.375rem; width:32px; width:2rem; height:33px; height:2.0625rem; text-align:center; } body.red_bg .flower_around { background:url(assets/gfx/flower_outline_white.svg?2) no-repeat; background-size:32px 33px; background-size:2rem 2.0625rem; } body.border_blue .flower_around { background:url(assets/gfx/flower_outline_blue.svg?2) no-repeat; background-size:32px 33px; background-size:2rem 2.0625rem; } .flower_around::before { content:'\200B'; display:inline-block; line-height:0; padding-top:17px; padding-top:1.0625rem; } /* hexagon outline for numbers */ .hex_around_black, .hex_around_red, .hex_around_blue { display:inline-block; margin-right:38px; margin-right:2.375rem; width:36px; width:2.25rem; height:32px; height:2rem; text-align:center; } .hex_around_black { background:url(assets/gfx/hexa_black.svg?2) no-repeat; background-size:36px 32px; background-size:2.25rem 2rem; } .hex_around_red { background:url(assets/gfx/hexa_red.svg?2) no-repeat; background-size:36px 32px; background-size:2.25rem 2rem; } .hex_around_blue { background:url(assets/gfx/hexa_blue.svg?2) no-repeat; background-size:36px 32px; background-size:2.25rem 2rem; } body.red_bg .hex_around_black, body.red_bg .hex_around_red, body.red_bg .hex_around_blue { background:url(assets/gfx/hexa_white.svg?2) no-repeat; background-size:36px 32px; } .hex_around_black::before, .hex_around_red::before, .hex_around_blue::before { content:'\200B'; display:inline-block; line-height:0; padding-top:15px; padding-top:1.0666rem; } /* arrow down */ .arr_down { position:relative; } .arr_down:after { content:""; width:12px; height:100%; top:50%; margin-top:-3px; position:absolute; right:-20px; background:url(assets/gfx/arrow_black_down.svg?2) no-repeat; background-size:12px 6px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; -ms-transition: all .4s ease-out; transition: all .4s ease-out; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -moz-transform-origin: 50% 3px; -webkit-transform-origin: 50% 3px; transform-origin: 50% 3px; } body.red_bg .arr_down:after { background:url(assets/gfx/arrow_white_down.svg?2) no-repeat; background-size:12px 6px; } .active .arr_down:after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } /* small arrows | left/right */ .arr_left, .arr_right { position:relative; } .arr_left::after, .arr_right::after { content: ""; width: 20px; height: 100%; top: 0; position:absolute; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } /* left arrow */ .arr_left::after { left:-26px; background:url(assets/gfx/arrow_black_left.svg?2) no-repeat; background-size:20px 7px; background-position:6px center; } body.red_bg .arr_left::after { background:url(assets/gfx/arrow_beige_left.svg?2) no-repeat; background-size:20px 7px; background-position:6px center; } .no-touch .arr_left:hover::after { background-position:0px center !important; } /* right arrow */ .arr_right::after { right:-26px; background:url(assets/gfx/arrow_black_right.svg?2) no-repeat; background-size:20px 7px; background-position:-6px center; } .cm_footer .arr_right::after { background:url(assets/gfx/arrow_red_right.svg?2) no-repeat; background-size:20px 7px; background-position:-6px center; right:-20px; } body.border_blue .cm_footer .arr_right::after { background:url(assets/gfx/arrow_blue_right.svg?2) no-repeat; background-size:20px 7px; background-position:-6px center; right:-20px; } body.red_bg .arr_right::after, body.red_bg .cm_footer .arr_right::after { background:url(assets/gfx/arrow_beige_right.svg?2) no-repeat; background-size:20px 7px; background-position:-6px center; } .no-touch .arr_right:hover::after { background-position:0px center !important; } /* etc */ a.underline { text-decoration:underline; } .no-touch a.hover_underline:hover { text-decoration:underline !important; } .red, .red a { color:#152735; } .black, .black a { color:#152735; } .uppercase { text-transform:uppercase; } p.max_740, ol.max_740, ul.max_740, table.max_740 { width: 100%; max-width: 700px; /* was 740 ... */ display: inline-block; } p.max_600, ol.max_600, ul.max_600, table.max_600 { width:100%; max-width:600px; display:inline-block; } p.max_420, ol.max_420, ul.max_420, table.max_420 { width:100%; max-width:420px; display:inline-block; } .p_no_bm { margin-bottom:0 !important; } .p_no_bm { margin-bottom:0 !important; } .p_sm_bm { margin-bottom:8px !important; } /* end editor */ /* ----------------------------------------------- Images / Videos ----------------------------------------------- */ img { width:100%; max-width:100%; height:auto; } .lazy_img_cont { overflow:hidden; } .lazy_img_cont img { position:absolute; z-index: 2; top: 0; left: 0; width: 100%!important; opacity: 0; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .lazy_img_cont.is_svg img { position:relative; } .lazy_img_cont.is_svg.smaller_centered { width:50%; margin:14% auto; /* todo: evt besser http://localhost/kittokatsu_v3/qonsilus-positionierung-identity/ */ } .lazy_img_cont .lazy_bg { position:absolute; z-index: 2; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background-size: cover; background-position: center center; opacity:0; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } .video_container { -webkit-backface-visibility: hidden; height: 0; overflow: hidden; width: 100%; position: relative; } .aspect1609 { padding-bottom:56.25%; } .video_container iframe, .video_container object, .video_container embed, .video_container video { position:absolute; top:0; left:0; width:100%!important; height:100%!important; z-index:1; } .max_w_wrap { display:inline-block; width:100%; } /* hide iOS video button // todo https://github.com/bfred-it/iphone-inline-video https://github.com/bfred-it/iphone-inline-video/issues/72#issuecomment-247629743 */ .IIV::-webkit-media-controls-play-button, video::-webkit-media-controls-start-playback-button { opacity: 0; pointer-events: none; width: 5px; } /* ----------------------------------------------- share fontello.com -> Font Awesome ----------------------------------------------- */ [class^="icon-"]::before, [class*=" icon-"]::before { font-family: "fontello"; font-style: normal; font-weight: normal; speak:none; display: inline-block; text-decoration: none; font-size: 110%; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* write class names differently to trick ad-blockers use in html: */ .icon-fsb::before { content: '\e801'; } /* facebook f */ .icon-issgr::before { content: '\e802'; } /* instagram */ .icon-tirr::before { content: '\e800'; } /* twitter */ .icon-pintst::before { content: '\e803'; } /* pininterest */ .icon-beh::before { content: '\e804'; } /* behance */ .shr_link { display:inline-block; margin-right:10px; } .shr_link:hover { color:#152735; } .shr_link:hover { color:#152735; } /* ----------------------------------------------- custom mouse cursors ----------------------------------------------- */ html.notIE .mouse_cross { cursor: url('assets/gfx/mouse_pointers/mouse_cross.svg') 13 13, url('assets/gfx/mouse_pointers/mouse_cross.png') 13 13, pointer; } html.isIE .mouse_cross { cursor: url('https://www.kittokatsu.de/wp-content/themes/kittokatsu/assets/gfx/mouse_pointers/mouse_cross.cur?2'), pointer; } /* ----------------------------------------------- menu [mmm] ----------------------------------------------- */ /* hamburger / X */ #main_menu_trigger { display: block; position: fixed; top: 0; left: 0; height: 74px; width: 100px; z-index: 3501; } #main_menu_lines { width: 32px; height: 24px; position: absolute; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 32px; left: 36px; /* todo war 70 */ z-index: 100; } #main_menu_lines.l_ani { -webkit-transition: left 0.6s ease-in-out; -moz-transition: left 0.6s ease-in-out; -o-transition: left 0.6s ease-in-out; -ms-transition: left 0.6s ease-in-out; transition: left 0.6s ease-in-out; } #main_menu_trigger .line { height: 2px; width: 28px; margin-bottom: 7px; background: #152735; opacity: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .no-touch #main_menu_lines:hover .line { background: #e52320; } body.red_bg #main_menu_trigger .line { background: #fff; } body #main_menu_trigger.active .line { background: #fff !important; } body.red_bg #main_menu_trigger.active .line { background: #152735 !important; } #main_menu_trigger.active .line1 { -webkit-transform: rotate(45deg) translate3d(3px, 2px, 0); -o-transform: rotate(45deg) translate3d(3px, 2px, 0); -ms-transform: rotate(45deg) translate3d(3px, 2px, 0); -moz-transform: rotate(45deg) translate3d(3px, 2px, 0); transform: rotate(45deg) translate3d(3px, 2px, 0); } #main_menu_trigger.active .line3 { -webkit-transform: rotate(-45deg) translate3d(4px, -4px, 0); -o-transform: rotate(-45deg) translate3d(4px, -4px, 0); -ms-transform: rotate(-45deg) translate3d(4px, -4px, 0); -moz-transform: rotate(-45deg) translate3d(4px, -4px, 0); transform: rotate(-45deg) translate3d(4px, -4px, 0); } /* display the page name */ #main_menu_page { position:fixed; top: 30px; right: 41px; /* overwritten by .js <- not any more */ text-align:right; z-index:3501; } #main_menu_page.desktop_hidden { display: none; } /* menu content */ #main_menu { position: fixed; top: 0; left: 0; width: auto; height: 100%; background-color: #152735; padding: 0; z-index: 3500; color: #ffffff; -webkit-transition: width 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; -moz-transition: width 0.6s ease-in-out, -moz-transform 0.6s ease-in-out; -o-transition: width 0.6s ease-in-out, -o-transform 0.6s ease-in-out; -ms-transition: width 0.6s ease-in-out, -ms-transform 0.6s ease-in-out; transition: width 0.6s ease-in-out, transform 0.6s ease-in-out; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } #main_menu.active { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #main_menu_bg { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:3499; /* background-color: rgba(0,255,0,0.5); */ } #mm_swiper { position:absolute !important; top:0px; height:100%; width:100%; } #mm_swiper .swiper-slide { height:auto!important; } #main_menu_inner { padding-top:128px; margin-left:70px; -webkit-transition: margin-left 0.6s ease-in-out; -moz-transition: margin-left 0.6s ease-in-out; -o-transition: margin-left 0.6s ease-in-out; -ms-transition: margin-left 0.6s ease-in-out; transition: margin-left 0.6s ease-in-out; } #main_menu.active { display:block; } #main_menu_wrap { display:inline-block; } #main_menu ul { margin:0 auto; padding:0; } #main_menu li { text-transform: uppercase; font-family: 'GT-America-Expanded-Medium', sans-serif; font-size: 13px; /* don't use rem here */ line-height: 28px; letter-spacing: 1px; margin:0; padding:0; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #main_menu a { color:#ffffff; position: relative; } .no-touch #main_menu .submenu a:hover::before, #main_menu .submenu a.sub_item_active::before, .no-touch #main_menu .menu-item a.main_item:hover::before, #main_menu .current-menu-item a.main_item::before { content:''; position: absolute; left: -26px; height: 7px; top: 5px; width: 20px; background: url(assets/gfx/arrow_beige_right.svg?2) no-repeat; background-size: 20px 7px; background-position: -6px center; } .no-touch body.red_bg #main_menu .submenu a:hover::before, body.red_bg #main_menu .submenu a.sub_item_active::before, .no-touch body.red_bg #main_menu .menu-item a.main_item:hover::before, body.red_bg #main_menu .current-menu-item a.main_item::before { background:url(assets/gfx/arrow_red_right.svg?2) no-repeat; background-size:20px 7px; background-position:-6px center; } /* red bg menu = beige bg */ body.red_bg #main_menu { background-color:#ffffff; color:#152735; } body.red_bg #main_menu a { color:#152735; } body.red_bg #main_menu .current-menu-item a { color:#152735 !important; } /* blue bg menu */ body.border_blue #main_menu { background-color:#152735; } /* mobile menu text */ #main_menu_soc { text-transform: uppercase; font-size:16px; line-height:31px; } #main_menu_soc_ic { margin-top:8px; } #main_menu_soc_ic { text-align:left; display:inline-block; } #main_menu_soc_ic a { float:left; } #main_menu_soc_ic .icon { margin:0 6px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; font-size: 14px; } #main_menu_soc_ic .icon-issgr { padding-right: 2px; } .no-touch .icon:hover { color: #e52320 !important; } #main_menu_soc_ic .icon.first { margin-left:0px; } #main_menu_soc_ic .icon.last { margin-right:0px; } /* submenu */ #main_menu .arr_expand { position:relative; display: inline-block; } #main_menu .arr_expand::after { content: ""; width: 12px; height: 100%; top: 50%; margin-top: -3px; position:absolute; right:-20px; background:url(assets/gfx/arrow_white_down.svg?2) no-repeat; background-size:12px 6px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; -ms-transition: all .4s ease-out; transition: all .4s ease-out; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -moz-transform-origin: 50% 3px; -webkit-transform-origin: 50% 3px; transform-origin: 50% 3px; } body.red_bg #main_menu .arr_expand::after { background:url(assets/gfx/arrow_red_down.svg?2) no-repeat; background-size:12px 6px; } #main_menu .submenu_active .arr_expand::after { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } #main_menu .submenu_outer { } #main_menu .submenu { padding: 8px 0 20px 0; } #main_menu .submenu li, #main_menu .submenu a { line-height: 26px; text-transform: none; } /* language */ .language_switch { position:absolute; top:0px; right:0px; } .language_switch a { color:#152735; } body.red_bg .language_switch a { color:#ffffff; } body.border_blue .language_switch a { color:#152735; } /* ---------------------------------------------------------------------------------------------- logos left & right: kitto & katsu --------------------------------------------------------------------------------------------- */ #logo_kk_left { position: fixed; width: 18px; height: 131px; top: 50vh; margin-top: -65px; left: 41px; z-index: 2; } #logo_kk_right { position: fixed; width: 18px; height: 131px; top: 50vh; margin-top: -65px; right: 41px; z-index: 2; } #logo_kk_left path, #logo_kk_right path { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } body.red_bg #logo_kk_right path, body.red_bg #logo_kk_left path { fill:#ffffff!important; } .no-touch #logo_kk_right:hover path, .no-touch #logo_kk_left:hover path { fill: #e52320!important; } /* ---------------------------------------------------------------------------------------------- special sticky headline --------------------------------------------------------------------------------------------- */ #sticky_headline { position:fixed; top: 0px; margin: 0 auto; left: 9px; right: 9px; /* same as border */ z-index:1; width: auto; padding-top: 100px; color:#152735; } #sticky_headline_content .content_less_width { padding-bottom: 10px; padding-bottom: 0.625rem; } #sticky_headline h1 { margin-bottom:0; } body.red_bg #sticky_headline { color:#ffffff; } body.border_blue #sticky_headline { color:#152735; } /* ---------------------------------------------------------------------------------------------- content [ccc] --------------------------------------------------------------------------------------------- */ #content { position:relative; width:100%; margin:0 auto; margin-top:90px; z-index:1; background-color:#ffffff; -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; -ms-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out; } body.red_bg #content { background-color: #152735; } body.red_bg { -webkit-font-smoothing: antialiased; /* todo ok? */ -moz-osx-font-smoothing: grayscale; } .content_max_w { width:100%; max-width:2166px; /* alt 1266: 1186 + 2x content padding */ } .content_padding { padding-left: 110px; padding-right: 110px; } .content_less_width { padding:0 4%; } body.home .content_less_width { padding:0; } .content_module { width:100%; } #ml_body_class { display:none; } #is_mobile_view { display: none; position: absolute; top:-10px; left:-10px; width:1px; height:1px; overflow: hidden; } /* limit text width for childs of Strategie & Design */ body.parent-pageid-578 .cm_txt .col_right, body.parent-pageid-607 .cm_txt .col_right { max-width: 700px; } /* content module bottom margin */ .mb_bigger { margin-bottom: 192px; margin-bottom: 12rem; } .mb_normal { margin-bottom: 144px; margin-bottom: 9rem; } body.single #content_module1, /* single work or project, 1st module, spacing to project specs */ .mb_mid { margin-bottom: 96px; margin-bottom: 6rem; } .mb_normal_smaller { margin-bottom: 72px; margin-bottom: 4.5rem; } .mb_smaller { margin-bottom: 48px; margin-bottom: 3rem; } .mb_small { margin-bottom: 22px; margin-bottom: 1.375rem; } .mb_none { margin-bottom:0; } .last_cm { margin-bottom:96px; margin-bottom:6rem; } /* section title */ .in_view .slide_inner, .in_view .page_section a { color:#152735; } .in_view .page_section .arr_right::after { background-image:url(assets/gfx/arrow_red_right.svg?2); } /* todo for later body.red_bg .in_view .page_section, body.red_bg .in_view .page_section a { color:#ffffff; } body.border_blue .in_view .page_section, body.border_blue .in_view .page_section a { color:#152735; } */ .section_title .st_col_left { display: inline-block; width:50%; text-align:left; vertical-align: top; } .section_title .st_col_right { display: inline-block; width:50%; text-align: right; vertical-align: top; } #related_projects .section_title .st_col_right a { margin-left:16px; } body.case_study #related_projects .section_title .prev_next { display:none; } #related_projects .section_title .st_col_left { width:27%; } #related_projects .section_title .st_col_right { width:73%; } /* shows content of wysiwyg editor */ .editor_content a { text-decoration:underline; } .no-touch .editor_content a:hover { text-decoration:none; } .editor_content p:last-child { margin-bottom:0; } /* automatic sub-page list */ ul.subpage_list { padding:0; margin:0; width:100%; display:block } ul.subpage_list li { float:left; width:33.333%; } .slide_text_inner, .slide_text { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: antialiased; } #mobile_k1, #mobile_k2 { display: none; opacity: 0; } /* ----------------------------------------------- icons for headlines ----------------------------------------------- */ .kk_icon { display: inline-block; height: 3.3125rem; /* 53px */ vertical-align: top; top: -10px; top: -0.625rem; position: relative; margin-bottom: -0.625rem; /* 3.3125 - 2.6875rem ( is line height .ami_expanded_big_up ) */ } /* chart */ body:not(.red_bg) .icon_chart { background: url(assets/gfx/icons/kk_icon_chart-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.75rem; /* 44 px */ } body.red_bg .icon_chart { background: url(assets/gfx/icons/kk_icon_chart-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.75rem; /* 44 px */ } /* drink */ body:not(.red_bg) .icon_drink { background: url(assets/gfx/icons/kk_icon_drink-b.svg) no-repeat; background-size: 100% 100%; background-position: 0px 3px; background-position: 0px 0.1875rem; width: 1.875rem; /* 30 px */ } body.red_bg .icon_drink { background: url(assets/gfx/icons/kk_icon_drink-w.svg) no-repeat; background-size: 100% 100%; background-position: 0px 3px; background-position: 0px 0.1875rem; width: 1.875rem; /* 30 px */ } /* eye */ body:not(.red_bg) .icon_eye { background: url(assets/gfx/icons/kk_icon_eye-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.3125rem; /* 53 px */ } body.red_bg .icon_eye { background: url(assets/gfx/icons/kk_icon_eye-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.3125rem; /* 53 px */ } /* eye open */ body:not(.red_bg) .icon_eye_open { background: url(assets/gfx/icons/kk_icon_eye_open-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.6875rem; /* 43 px */ } body.red_bg .icon_eye_open { background: url(assets/gfx/icons/kk_icon_eye_open-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.6875rem; /* 43 px */ } /* fan */ body:not(.red_bg) .icon_fan { background: url(assets/gfx/icons/kk_icon_fan-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.3125rem; /* 53 px */ } body.red_bg .icon_fan { background: url(assets/gfx/icons/kk_icon_fan-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.3125rem; /* 53 px */ } /* loupe & chart */ body:not(.red_bg) .icon_loupe { background: url(assets/gfx/icons/kk_icon_loupe-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.75rem; /* 44 px */ } body.red_bg .icon_loupe { background: url(assets/gfx/icons/kk_icon_loupe-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.75rem; /* 44 px */ } /* medaille nr 1 */ body:not(.red_bg) .icon_nr1 { background: url(assets/gfx/icons/kk_icon_nr1-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.375rem; /* 38 px */ } body.red_bg .icon_nr1 { background: url(assets/gfx/icons/kk_icon_nr1-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.375rem; /* 38 px */ } /* pen */ body:not(.red_bg) .icon_pen { background: url(assets/gfx/icons/kk_icon_pen-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.0625rem; /* 33 px */ } body.red_bg .icon_pen { background: url(assets/gfx/icons/kk_icon_pen-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.0625rem; /* 33 px */ } /* people */ body:not(.red_bg) .icon_people { background: url(assets/gfx/icons/kk_icon_people-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.625rem; /* 58 px */ } body.red_bg .icon_people { background: url(assets/gfx/icons/kk_icon_people-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.625rem; /* 58 px */ } /* phone */ body:not(.red_bg) .icon_phone { background: url(assets/gfx/icons/kk_icon_phone-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2rem; /* 32 px */ } body.red_bg .icon_phone { background: url(assets/gfx/icons/kk_icon_phone-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2rem; /* 32 px */ } /* planet */ body:not(.red_bg) .icon_planet { background: url(assets/gfx/icons/kk_icon_planet-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.125rem; /* 50 px */ } body.red_bg .icon_planet { background: url(assets/gfx/icons/kk_icon_planet-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 3.125rem; /* 50 px */ } /* rocket */ body:not(.red_bg) .icon_rocket { background: url(assets/gfx/icons/kk_icon_rocket-b.svg) no-repeat; background-size: 100% 100%; background-position: 0px 3px; background-position: 0px 0.1875rem; width: 2.8125rem; /* 45 px */ } body.red_bg .icon_rocket { background: url(assets/gfx/icons/kk_icon_rocket-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.8125rem; /* 45 px */ } /* shirt */ body:not(.red_bg) .icon_shirt { background: url(assets/gfx/icons/kk_icon_shirt-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5rem; /* 40 px */ } body.red_bg .icon_shirt { background: url(assets/gfx/icons/kk_icon_shirt-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5rem; /* 40 px */ } /* smilie */ body:not(.red_bg) .icon_smilie { background: url(assets/gfx/icons/kk_icon_smilie-b.svg) no-repeat; background-size: 100% 100%; background-position: 0px 2px; background-position: 0px 0.125rem; width: 2.5rem; /* 40 px */ } body.red_bg .icon_smilie { background: url(assets/gfx/icons/kk_icon_smilie-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5rem; /* 40 px */ } /* square */ body:not(.red_bg) .icon_square { background: url(assets/gfx/icons/kk_icon_square-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.1875rem; /* 35 px */ } body.red_bg .icon_square { background: url(assets/gfx/icons/kk_icon_square-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.1875rem; /* 35 px */ } /* star */ body:not(.red_bg) .icon_star { background: url(assets/gfx/icons/kk_icon_star-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5625rem; /* 41 px */ } body.red_bg .icon_star { background: url(assets/gfx/icons/kk_icon_star-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5625rem; /* 41 px */ } /* target w/ arrow */ body:not(.red_bg) .icon_target { background: url(assets/gfx/icons/kk_icon_target-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.8125rem; /* 45 px */ } body.red_bg .icon_target { background: url(assets/gfx/icons/kk_icon_target-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.8125rem; /* 45 px */ } /* tent */ body:not(.red_bg) .icon_tent { background: url(assets/gfx/icons/kk_icon_tent-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.875rem; /* 46 px */ } body.red_bg .icon_tent { background: url(assets/gfx/icons/kk_icon_tent-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.875rem; /* 46 px */ } /* triangle */ body:not(.red_bg) .icon_triangle { background: url(assets/gfx/icons/kk_icon_triangle-b.svg) no-repeat; background-size: 100% 100%; background-position: 0px -2px; background-position: 0px -0.125rem; width: 2.5625rem; /* 41 px */ } body.red_bg .icon_triangle { background: url(assets/gfx/icons/kk_icon_triangle-w.svg) no-repeat; background-size: 100% 100%; background-position: 0px -2px; background-position: 0px -0.125rem; width: 2.5625rem; /* 41 px */ } /* x */ body:not(.red_bg) .icon_x { background: url(assets/gfx/icons/kk_icon_x-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 1.9375rem; /* 4316 px */ } body.red_bg .icon_x { background: url(assets/gfx/icons/kk_icon_x-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 1.9375rem; /* 31 px */ } /* chart up with 2 x */ body:not(.red_bg) .icon_x_arrow_x { background: url(assets/gfx/icons/kk_icon_x_arrow_x-b.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5625rem; /* 41 px */ } body.red_bg .icon_x_arrow_x { background: url(assets/gfx/icons/kk_icon_x_arrow_x-w.svg) no-repeat; background-size: 100% 100%; background-position: top left; width: 2.5625rem; /* 41 px */ } /* ----------------------------------------------- module: team ----------------------------------------------- */ .cm_team .team_header { margin-bottom: 12px; margin-bottom: 0.75rem; } .cm_team .member { margin-bottom:64px; margin-bottom:4rem; width:100%; } .cm_team .pic_col { width: 33.333%; float: left; padding-right: 2.25rem; } .cm_team .team_pic { max-width: 225px; position: relative; top: 5px; } .cm_team .text_col { width: 66.666%; float: left; } .cm_team .team_text { max-width: 640px; } .cm_team .mo_img { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; opacity:0; } .no-touch .cm_team .pic_col:hover > .mo_img { opacity:1 !important; } .cm_team .p_trigger { font-family: 'GT-America-Standard-Bold'; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .no-touch .cm_team .p_trigger:hover { color: #e52320; } .cm_team .p_trigger .plus { position:absolute; top:9px; top: 0.5rem; right:-14px; background:url(assets/gfx/plus.svg?2) no-repeat; width:8px; height:8px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .cm_team .p_trigger.active { color: #152735; } body.red_bg .cm_team .p_trigger.active { color: #ffffff; } body.border_blue .cm_team .p_trigger.active { color: #152735; } .cm_team .p_trigger.active .plus, .no-touch .cm_team .p_trigger:hover .plus { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } .pers_overlay { width:676px; display:block!important; } .pers_overlay .wrap { background-color:#152735; } .pers_x { width:35px; height:35px; background:url(assets/gfx/K_K_SchliessenX.svg?2) no-repeat; position:absolute; z-index:10; top:10px; right:10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .no-touch .pers_x:hover { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /* ----------------------------------------------- module: work/playground grid ----------------------------------------------- */ .cm_work_grid .filter_menu { overflow:hidden; height:0; } .cm_work_grid .filter_menu .selected { display:none; } .cm_work_grid .grid { margin-left:-14px; margin-right:-14px; width:auto; } .cm_work_grid .mobile_text { display:none; } .cm_work_grid .selection { top: -4px; } .cm_work_grid .selection_name.arr_down { left:-19px; } .is-touch .cm_work_grid .mobile_text { display: block; height: 40px; overflow: hidden; } .cm_work_grid .grid .grid_item { float:left; padding:14px; /* when changed also change .cm_project_slider .royalSlider */ } .cm_work_grid .grid .grid_item.size_half { width:50%; } body.page-template-page-template-presse_overview .cm_work_grid .grid .grid_item.size_half { width:33.3333%; } .cm_work_grid .grid .grid_item.size_full { width:100%; } .cm_work_grid .grid .grid_item_inner { overflow:hidden; height:0; width:100%; padding-bottom:66.6666%; } .cm_work_grid .grid .grid_image { height:100%; width:100%; position:absolute; top:0px; left:0px; } .cm_work_grid .lazy_img_cont { height:100%; } .cm_work_grid .grid .bg_image { height:100%; width:100%; } .cm_work_grid .mo_color { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; z-index:2; opacity:0; background-color:#152735; } body.border_blue .cm_work_grid .mo_color { background-color:#152735; } .no-touch .cm_work_grid .grid_item:hover .mo_color { opacity:0.92 !important; } .cm_work_grid .slide_text { position: absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; text-align: center; padding: 30px; padding: 1.875rem; color: #ffffff !important; opacity: 0; z-index: 3; } body.red_bg .cm_work_grid .slide_text { border:9px solid #ffffff; /* todo responsive ! */ } .no-touch .cm_work_grid .grid_item:hover .slide_text { opacity:1!important; } .cm_work_grid .slide_text h3 { margin-bottom:2px; } .cm_work_grid .grid .toggle_size { position:absolute; top:0px; right:0px; z-index:20; width:40px; height:40px; cursor:zoom-in; } /* admin functions */ .no-touch .cm_work_grid .grid .toggle_size:hover { background-color:#F905B9; } .cm_work_grid .grid .edit_post { position:absolute; bottom:0px; right:0px; z-index:20; width:40px; height:40px; cursor:e-resize; } .no-touch .cm_work_grid .grid .edit_post:hover { background-color:#0ff; } /* ----------------------------------------------- module: slideshow ----------------------------------------------- */ .cm_slideshow .slider_wrap { width:100% !important; height:1px !important; padding-bottom:64.815%; /* 1:1.5 would be 66.666% */ } .cm_slideshow .royalSlider, .cm_slideshow .like_royalSlider { position:absolute; width:100% !important; height:100% !important; } .cm_slideshow .slide_inner { height:100%; } .cm_slideshow .slide_inner .lazy_img_cont { position:absolute; top:0px; left:0px; width:100%; height:100%; } /* slide border */ .cm_slideshow .rsContent.has_border { border:9px solid #152735; } body.border_blue .cm_slideshow .rsContent.has_border { border:9px solid #152735; } body.red_bg .cm_slideshow .rsContent.has_border { border:9px solid #ffffff; } /* slide background color */ .cm_slideshow .rsContent.has_bg { background-color:#152735; } body.border_blue .cm_slideshow .rsContent.has_bg { background-color:#152735; } body.red_bg .cm_slideshow .rsContent.has_bg { background-color:#ffffff; } .cm_slideshow .like_royalSlider .rsContent.has_bg { background-color:transparent !important; } /* slide mouseover image */ .cm_slideshow .mo_img { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; opacity:0; } .no-touch .cm_slideshow .rsContent:hover > .mo_img { opacity:1 !important; } /* slide text */ .cm_slideshow .slide_text { position:absolute; top:0px; left:0px; right:0px; width:100%; height:100%; text-align:center; padding:60px; padding:3.75rem; z-index:3; margin:0 auto; } .cm_slideshow .rsContent.has_bg .slide_text, .cm_slideshow .rsContent.has_bg .slide_text a { color:#ffffff; } body.red_bg .cm_slideshow .rsContent.has_bg .slide_text, body.red_bg .cm_slideshow .rsContent.has_bg .slide_text a { color:#152735; } .cm_slideshow .slide_text a { text-decoration:underline; } .no-touch .cm_slideshow .slide_text a:hover { text-decoration:none; } .cm_slideshow .slide_nav { text-align:right; margin-top:1rem; /* todo: ok? */ } .cm_slideshow .mo_color { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; z-index:2; opacity:0; background-color:#152735; } body.border_blue .cm_slideshow .mo_color { background-color:#152735; } .no-touch .cm_slideshow .rsSlide:hover .mo_color { opacity:0.92 !important; } .cm_slideshow .project_text { position:absolute; top:0px; left:0px; right:0px; width:100%; height:100%; text-align:center; padding:30px; padding:1.875rem; color:#ffffff !important; opacity:0; z-index:3; } .no-touch .cm_slideshow .rsSlide:hover .project_text { opacity:1!important; } .cm_slideshow .project_text h3 { margin-bottom:2px; } .cm_slideshow .project_text a { color:#ffffff; } /* video */ .cm_slideshow .video_wrap { position:absolute; top:0px; left:0px; z-index:1; width:100%; height:100%; } /* todo: style zusammenfassen mit anderem slider styles für roten hintergrund */ /* bullets */ .rsBullets { position: absolute; display: inline-block; left: 0; right:0; bottom:20px; bottom:1.2rem; width:auto; margin:0 auto; text-align:center; height:18px; z-index:135; } .rsBullet { width: 18px; height: 18px; display: inline-block; padding: 0; margin:0 7px; margin:0 0.4375rem; cursor:pointer; } .rsBullet span { display: block; width: 9px; width: 0.5625rem; height: 9px; height: 0.5625rem; border-radius: 50%; background: #ffffff; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } .rsBullet.rsNavSelected span { background-color: #152735; } .no-touch .rsBullet:hover span { background: #152735; -webkit-transform: scale3d(1.4, 1.4, 1.4); -moz-transform: scale3d(1.4, 1.4, 1.4); -o-transform: scale3d(1.4, 1.4, 1.4); -ms-transform: scale3d(1.4, 1.4, 1.4); transform: scale3d(1.4, 1.4, 1.4); } body.border_blue .no-touch .rsBullet:hover span { background: #152735; } /* ----------------------------------------------- module: work, playground, illustration, presse slider ----------------------------------------------- */ .cm_project_slider .royalSlider { width: auto !important; overflow: hidden; margin-left: -14px; /* when change also change .cm_work_grid .grid .grid_item */ margin-right: -14px; } .cm_project_slider .royalSlider.only_one .rsOverflow { margin-left: 0 !important; } .cm_project_slider .slide_aspect { width: 100%; height: 100%; } .cm_project_slider .rsSlide { padding:0 14px; } .cm_project_slider .slide_outer { width:100%; height:100%; position:absolute; top:0px; left:0px; } .cm_project_slider .slide_outer a { position: absolute; width: 100%; height: 100%; } .cm_project_slider .slide_inner { height:100%; } .cm_project_slider .visibleNearby .rsSlide { -webkit-backface-visibility: hidden !important; overflow: hidden !important; } .cm_project_slider .mo_color { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; height: auto; width: auto; z-index: 2; opacity: 0; background-color:#152735; } body.border_blue .cm_project_slider .mo_color { background-color:#152735; } .no-touch .cm_project_slider .rsSlide:hover .mo_color { opacity:0.92 !important; } .cm_project_slider .slide_inner .lazy_img_cont { position:absolute; top:0px; left:0px; width:100%; height:100%; } .cm_project_slider .slide_text { position:absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; text-align: center; padding: 30px; padding: 1.875rem; color: #ffffff !important; opacity: 0; z-index: 10; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } body.red_bg .slide_text { border:9px solid #ffffff; /* todo responsive ! */ } .no-touch .cm_project_slider .rsSlide:hover .slide_text { opacity:1 !important; } .cm_project_slider .slide_text h3 { margin-bottom: 4px; } .cm_project_slider .slider_prev, .cm_project_slider .slider_next { position: absolute; top: 50%; margin-top: -15px; margin-top: -0.9375rem; width: 29px; height: 29px; z-index: 2; } .cm_project_slider .slider_prev { left: 0; } .cm_project_slider .slider_next { right: 0; } .no-touch .cm_project_slider .slide_arr:hover circle { fill-opacity: 1!important; } .no-touch .cm_project_slider .slide_arr:hover polyline { stroke: #ffffff!important; } /* blue arrows */ body.border_blue .cm_project_slider .slide_arr circle, body.border_blue .cm_project_slider .slide_arr polyline { stroke: #152735!important; } .no-touch body.border_blue .cm_project_slider .slide_arr:hover circle { fill:#152735!important; fill-opacity:1!important; } /* white arrows */ body.red_bg .cm_project_slider .slide_arr circle { fill-opacity:1!important; stroke:#ffffff!important; } body.red_bg .cm_project_slider .slide_arr polyline { stroke:#ffffff!important; } .no-touch body.red_bg .cm_project_slider .slide_arr:hover circle { fill:#ffffff!important; } .no-touch body.red_bg .cm_project_slider .slide_arr:hover polyline { stroke:#152735!important; } /* hide arrows if only 3 projects in project slider? */ .cm_project_slider .slide_arr.slide_count3 { display: none; } /* ----------------------------------------------- module: Grid two ----------------------------------------------- */ .grid_two_outer { width:auto; margin-left: -15px; margin-right: -15px; } .cm_grid_two .section_title .st_col_right.second_title { text-align:left; padding-left: 15px; } .grid_two_outer .item { width:50%; display: inline-block; vertical-align: top; padding: 0 15px 30px 15px; } .grid_two_outer .item_aspect { width:100%; height:1px; padding-bottom: 66.6667%; } .grid_two_outer .item_aspect .slide_inner { position: absolute; top:0px; left:0px; width:100%; height:100%; } .cm_grid_two .slide_inner .lazy_img_cont { position:absolute; top:0px; left:0px; width:100%; height:100%; } .cm_grid_two .mob_second_title { display: none; } .cm_grid_two .mo_color { position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; z-index:2; opacity:0; background-color:#152735; } body.border_blue .cm_grid_two .mo_color { background-color:#152735; } .no-touch .cm_grid_two .item:hover .mo_color { opacity:0.92 !important; } .cm_grid_two .slide_text { position:absolute; top:0px; left:0px; right:0px; width:100%; height:100%; text-align:center; padding:30px; padding:1.875rem; color:#ffffff !important; opacity:0; z-index:3; } body.red_bg .cm_grid_two .slide_text { border:9px solid #ffffff; /* todo responsive ! */ } .no-touch .cm_grid_two .item:hover .slide_text { opacity:1!important; } /* ----------------------------------------------- module: Animated gfx ----------------------------------------------- */ .cm_animated_gfx_1 .ani_container { width:72%; margin-left: auto; margin-right: auto; max-width: 960px; overflow:hidden; } #kk_animated_gfx_2 { margin-top: 2rem; } .cm_animated_gfx_2 .ani_container { padding: 0 26px; width:72%; margin-left: auto; margin-right: auto; max-width: 960px; overflow:hidden; } /* ----------------------------------------------- module: Text ----------------------------------------------- */ .cm_txt.text_two_col .col_left { width:33.333%; float:left; padding-right:36px; padding-right:2.25rem; } .cm_txt.text_two_col .col_right { width:66.666%; float:left; } .cm_txt.text_left .text { width:66.666%; } .cm_txt.text_left_marg .text { width:66.666%; margin-left:33.333%; } .cm_txt.text_three_col .col { width:33.333%; float:left; padding-right:36px; padding-right:2.25rem; } .cm_txt.text_centered { text-align:center; width:74%; margin-left:13%; } .animate_text { visibility:hidden; } .cm_txt .animate_text .fade { -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } /* ----------------------------------------------- module: link on right ----------------------------------------------- */ .cm_link_right { text-align:right; } .cm_link_right a { text-decoration:underline; } /* ----------------------------------------------- module: project text & specs ----------------------------------------------- */ .cm_text_and_specs .mobile_text { display:none; } .cm_text_and_specs h1 { font-family: 'GT-America-Standard-Bold'; font-size: 16px; font-size: 1rem; line-height: 20px; line-height: 1.25rem; margin-bottom: 7px; margin-bottom: 0.4375rem; text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 3px; top: 0.1875rem; } body.single:not(.case_study) .cm_text_and_specs h1 { margin-bottom: 43px; margin-bottom: 2.6875rem; } /* normal project */ .cm_text_and_specs .left_col { float:left; width:33.333%; padding-right:48px; /* todo ok? */ } .cm_text_and_specs h3 { margin-bottom: 1px; font-style: normal; font-weight: normal; } .cm_text_and_specs .right_col { float:left; width:66.666%; } /* case study */ .cm_text_and_specs .case_cat { margin-bottom:64px; margin-bottom:4rem; } #case_study_text { margin-bottom:64px; margin-bottom:4rem; width:66.666%; } /* prev next */ #prev_project { width:auto; display: inline-block; text-align: left; margin-left: 33.333%; margin-right: 26px; margin-right: 1.625rem; } #next_project { display: inline-block; width:auto; text-align: left; } body.case_study .cm_prev_next { margin-top:32px; margin-top:2rem; } .case_study_shr { margin-top:96px; margin-top:6rem; } .no-touch .cm_prev_next a:hover { color: #e52320; text-decoration: none !important; border-bottom: none !important; } /* ----------------------------------------------- case study navigation ----------------------------------------------- */ #section_nav { position:absolute; z-index:1000; } #section_nav.fixed { position:fixed !important; top: 32px!important; } #section_nav span { -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } #section_nav.fixed span{ opacity: 0; } #section_nav.fixed .sec_nav_item:not(.first)::after { opacity: 0; } #section_nav:hover span { opacity: 1; } #section_nav:hover .sec_nav_item::after { opacity: 1 !important; } .sec_nav_item { color:#152735; text-decoration:underline; position:relative; } .no-touch .sec_nav_item:hover { color:#152735; } .sec_nav_item::after { content:""; width:20px; height:100%; top:0px; position:absolute; right:-30px; background:url(assets/gfx/arr_section_nav2.svg?2) no-repeat; background-size:7px 7px; background-position:6px center; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; -ms-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out; } /* todo: schöner machen und nur bei den pfeilen mouseover machen, nicht ganzer bereich */ #section_nav.disable { display:none; } /* ----------------------------------------------- module: page headline ----------------------------------------------- */ .cm_page_headline.h1_above { display:none; /* will be copied with javascript to top of page */ } .cm_page_headline.h1_normal { padding-top: 0; margin-bottom: 72px; margin-bottom: 4.5rem; } .cm_page_headline h1 { font-weight: normal; color: #152735; } body.red_bg .cm_page_headline h1 { color:#ffffff; } body.border_blue .cm_page_headline h1 { color:#152735; } /* ----------------------------------------------- module: Images / Videos ----------------------------------------------- */ .cm_images_videos .img_wrap { margin-bottom: 30px; } .cm_images_videos .img_wrap:last-child { margin-bottom: 0; } .cm_images_videos .img_wrap.full_width { width:100%; } .cm_images_videos .img_wrap.full_width .text_wrap { width: 100%; padding: 0 10%; margin-top: 6px; margin-top: 0.375rem; margin-bottom: 2rem; } .cm_images_videos .img_wrap.full_width { width: 100%; } .cm_images_videos .img_wrap.half_width { width: 50%; float: left; /* todo: padding ! */ } .cm_images_videos .img_wrap.third_width { width: 33.333%; /* todo: padding ! */ float: left; } .cm_images_videos .img_wrap.def_width { float:left; margin-right: 46px; margin-right: 2.875rem; /* todo: padding ! */ } /* ----------------------------------------------- module: kontakt ----------------------------------------------- */ .cm_kontakt textarea { height:400px; height:25rem; margin-top:24px; margin-top:1.5rem; margin-bottom:0 !important; } .cm_kontakt .measure_height { /* todo maps height checken und abstand Schreiben sie uns ... */ } .cm_kontakt .col_left { width:33.333%; float:left; padding-right:36px; padding-right:2.25rem; } .cm_kontakt .col_right { width:66.666%; float:left; } .cm_kontakt .above_form { margin-bottom:32px; margin-bottom:2rem; } .cm_kontakt .below_form { margin-top:32px; margin-top:2rem; } .cm_kontakt .google_maps { height:400px; } .cm_kontakt .contact_form_submit, .cm_kontakt .contact_form_submitting { margin-top:24px; margin-top:1.5rem; display:inline-block; } .cm_kontakt .below_map { margin-top:24px; margin-top:1.5rem; } .cm_kontakt .form_result { margin-top:10px; } #form_i_agree_check { width: auto; } #form_i_agree_check_wrap { display: inline-block; margin-right: 10px; float: left; top: -1px; position: relative; } #form_i_agree_check_wrap.alert::before { content: ''; border: 2px solid #e52320; position: absolute; top: 3px; left: -5px; right: -5px; bottom: -1px; width: auto; height: auto; z-index: -1; } /* ----------------------------------------------- module: instagram ----------------------------------------------- */ .cm_instagram .ig_feed { margin-bottom:24px; margin-bottom:1.5rem; height:1px; padding-bottom:25%; /* 6/1 */ } .cm_instagram .ig_feed_inner { position:absolute; top:0px; width:100%; } /* todo besser... das alle abstände gleich sind bei solchen spacern/... muss 28 sein */ .cm_instagram .ig_item { float:left; width:23.5%; } .cm_instagram .ig_item:nth-child(1), .cm_instagram .ig_item:nth-child(2), .cm_instagram .ig_item:nth-child(3) { margin-right:2%; } /* ----------------------------------------------- footer ----------------------------------------------- */ .case_related_divider { height:1px; width:100%; background-color:#152735; } /* line */ #scroll_up_line { width:100%; height:1px; z-index:1; position:relative; left:0px; background-color:#152735; overflow:hidden; top:50%; } body.border_blue #scroll_up_line { background-color:#152735; } body.red_bg #scroll_up_line { background-color:#ffffff; } /* footer */ .cm_footer { margin-bottom:0; } #footer { padding:30px 0; padding:1.875rem 0; color:#152735; } #footer .menu, #footer .submenu, #footer .submenu a { padding:0; margin:0; } #footer a { color:#152735; text-decoration:underline; } #footer a:hover { text-decoration:none; } body.red_bg #footer, body.red_bg #footer a, body.red_bg #footer h3 { color:#ffffff; } body.border_blue #footer, body.border_blue #footer a { color:#152735; } /* footer headlines */ #footer h3 { font-style:normal; font-weight:normal; font-size:100%; /* todo ok ? */ color:#152735; } /* footer columns */ #footer .col1, #footer .col2, #footer .col3, #footer .col4, #footer .col5 { float: left; width: 16.4%; max-width: 200px; } #footer_mobile_col { display:none; } #footer .col_inner { padding-right:50px; padding-right:3.125rem; } #footer .col6 { position: absolute; right: 0; top: 30px; /* same as #footer padding */ top: 1.875rem; width: 210px; } /* footer kittokatsu logo */ #kittokatsu_logo_footer { width: 117px; height: 29px; top: 3px; position: relative; } #kittokatsu_logo_footer path, #kittokatsu_logo_footer polygon { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } /* normal footer logo hover*/ .no-touch #kittokatsu_logo_footer:hover > path, .no-touch #kittokatsu_logo_footer:hover > polygon { fill: #e52320 !important; } /* red bg footer logo */ body.red_bg #kittokatsu_logo_footer > path, body.red_bg #kittokatsu_logo_footer > polygon { fill:#ffffff !important; } .no-touch body.red_bg #kittokatsu_logo_footer:hover > path, .no-touch body.red_bg #kittokatsu_logo_footer:hover > polygon { fill:#e52320 !important; } /* footer social links */ #footer #soc_lnks { text-align:left; display:inline-block; margin-top: 0.8rem; } #footer #soc_lnks a { float:left; } #footer #soc_lnks .icon { margin:0 6px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .no-touch #footer #soc_lnks .icon:hover { color:#152735; } #footer #soc_lnks .icon.first { margin-left:0px; } #footer #soc_lnks .icon.last { margin-right:0px; } #newsletter_link svg { position: relative; width: 150px; height: 55px; margin: 5px 0 10px 0; } /* .no-touch #newsletter_link:hover #nl_paperplane path, .no-touch #newsletter_link:hover #nl_paperplane line, .no-touch #newsletter_link:hover #nl_paperplane polygon, .no-touch #newsletter_link:hover #nl_paperplane polyline { stroke: #e52320 !important; } */ /* footer newsletter form / todo: optimize */ #nl_submit_arrow { width:1px; height:7px; } #nl_submit_arrow::after { margin-left:0 !important; } #nl_form_container .nowrap {white-space:nowrap;} #nl_form_container .mc-field-group { clear:left; margin:0; padding:0; } #nl_form_container .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;} #nl_form_container .mc-field-group label { display:block; margin-bottom:3px; float:left; width:30%; } #nl_form_container .clear {clear:both;} #nl_form_container .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;} #nl_form_container .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;} #nl_form_container .mc-field-group.input-group label {display:inline;} #nl_form_container .mc-field-group.input-group input {display:inline; width:auto; border:none;} #nl_form_container div#mce-responses { top:-10px; position:relative; padding:0; overflow:hidden; width:90%; margin:0; clear:both; } #nl_form_container #mce-responses a { display:block; } #nl_form_container div.response { margin:0; padding:0; float:left; top:-1.5em; z-index:1; width:100%; } #nl_form_container #mce-success-response, #nl_form_container #mce-error-response { display:none; } #nl_form_container label.error { display:block; float:none; width:auto; margin-left:0; text-align:left; padding:0; } #nl_form_container div.mce_inline_error { padding:3px 0!important; z-index:1; position:relative; top:-15px; } /* ----------------------------------------------- Fun overlays ----------------------------------------------- */ .super_overlay { -webkit-transform: translateZ(0); transform: translateZ(0); position:absolute; z-index:1000; /* todo ok? */ display:none; cursor: move; cursor: -webkit-grab; cursor: -moz-grab; top:10px; left:10px; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } /* ----------------------------------------------- Usercentrics ----------------------------------------------- */ .no-touch #uc-main-banner .btn-list button:hover { background-color: #2fe4dc; color: #000; } /* ----------------------------------------------- responsive [rrr] ----------------------------------------------- */ @media only screen and (min-width : 1900px) { html { font-size:110% !important; } .cm_animated_gfx1 .ani_container { margin-top: 96px !important; margin-bottom: 96px!important; } } @media only screen and (min-width : 1680px) { html { font-size:105%; } .content_padding { padding-left: 140px; padding-right: 140px; } /* limit text width on big screens */ .cm_kontakt .col_right, .cm_text_and_specs .right_col, .cm_txt.text_left_marg .text, .cm_txt.text_two_col .col_right { width: 44.444%; } .cm_team .team_text { max-width: 66.6666%; } #footer .col1, #footer .col2, #footer .col3, #footer .col4, #footer .col5 { max-width:240px; } .cm_animated_gfx1 .ani_container { margin-top: 48px; margin-bottom: 48px; } #sticky_headline_text { width:66.666%; } } @media only screen and (max-width : 1339px) { /* todo */ #main_menu_inner { margin-left: 40px; } } @media only screen and (max-width : 1280px) { #footer .col1 { width: 100%; display: block; float: none; margin-bottom: 1.59375rem; } #footer .col2, #footer .col3, #footer .col4, #footer .col5, #footer .col6 { float:left; width:20%; max-width:none; } #footer .col_inner { padding-right:20px; } #footer .col6 { position:relative; right:auto; top:0; } .cm_animated_gfx_2 .ani_container { padding: 0; width: 90%; } } @media only screen and (max-width : 1024px) { /* tablet landscape [lll] */ body.page-template-page-template-presse_overview .cm_work_grid .grid .grid_item.size_half { width:50%; } .content_padding { padding-left: 90px; padding-right: 90px; } .cm_animated_gfx_2 .ani_container { width: 96%; } .section_title.only_left .st_col_left { width: 100%; } .cm_txt.text_left .text { width: 75%; } } @media only screen and (max-width : 1023px) { /* / 1.2 */ #kittokatsu_logo_footer { width: 97px; height: 24px; } .ami_expanded_big_up { padding-right: 0; } #footer .col2, #footer .col3, #footer .col4, #footer .col5 { width:25%; } #footer .col_inner { padding-right:12px; } #footer .col6 { margin-top:2rem; display:block; width:100% !important; position:relative; max-width:none; } #footer .col6 form { width:50%; float:left; } #footer .col6 #soc_lnks { width:50%; float:left; padding-left: 0; } .is-touch .video_play_link { display:block; } ul.subpage_list li { width: 50%; } .cm_animated_gfx_2 .ani_container { width: 100%; padding: 0 30px; } } @media only screen and (max-width : 900px) { html { font-size:90%; } .cm_txt.text_left .text { width:100%; } .cm_project_slider .slide_arr.slide_count3 { display: block; } } @media only screen and (max-width : 820px) { #related_projects .section_title .st_col_left { width: 50%; } #related_projects .section_title .st_col_right { width: 50%; } } @media only screen and (max-width : 768px) { /* ipad portrait */ html { font-size: 85%; } body { border: 6px solid #ffffff; } .border_red { border: 6px solid #152735; } .border_blue { border: 6px solid #152735; } .video_play_link { display: block; } #sticky_headline { left: 6px; right: 6px; /* same as border */ } .content_padding { padding-left: 70px; padding-right: 70px; } #logo_kk_left { left: 33px; } #logo_kk_right { right: 33px; } /* ----------------------------------------------- ipad portrait / module: slideshow ----------------------------------------------- */ /* slide border */ .cm_slideshow .rsContent.has_border { border:6px solid #152735; } body.border_blue .cm_slideshow .rsContent.has_border { border:6px solid #152735; } body.red_bg .cm_slideshow .rsContent.has_border { border:6px solid #ffffff; } /* ----------------------------------------------- ipad portrait / module: team ----------------------------------------------- */ .cm_team .p_trigger { font-size: 12px; } .cm_team .p_trigger .plus { top: 0.55rem; } } @media only screen and (max-width : 736px) { /* iphone 6+ landscape */ /* ----------------------------------------------- iphone 6+ landscape / related projects ----------------------------------------------- */ #related_projects .section_title .st_col_left { width: 27%; } #related_projects .section_title .st_col_right { width: 73%; } } @media only screen and (max-width : 735px) { /* < iphone 6+ landscape MOBILE VIEW [ooo] */ #is_mobile_view { display: block; } #main_menu_page.desktop_hidden { display: block; } html { font-size:72%; } body { font-size: 1.1rem; /* * 1.1 */ line-height: 1.7875rem; border: 0px solid #ffffff; } #logo_kk_left, #logo_kk_right { display: none; } .page_section, .like_page_section { font-size: 0.9rem; /* * 1.2 */ line-height: 1.2rem; } .walsm_42 { font-size:2.25rem; line-height:3.1rem; } /* / 1.1 */ .walsm_36, .walsl_36 { font-size:2.045rem; line-height:2.6rem; } .walsm_20 { font-size:1.375rem; /* 1.25rem */ line-height:1.99375rem; /* 1.8125rem */ } .nav_links, footer, .text_smaller, footer .text_smaller { font-size: 0.9375rem!important; line-height: 1.5rem!important; } .border_red { border:4px solid #152735; } .border_blue { border:4px solid #152735; } #sticky_headline { left: 0; right: 0; } .content_padding { padding-left: 0; padding-right: 0; } .mobile_padding { padding-left:30px !important; padding-right:30px !important; } .content_less_width { padding: 0; } .mb_bigger { margin-bottom: 8.57rem; /* / 1.4 */ } .mb_normal { margin-bottom: 5rem; } body.single #content_module1, /* xxx single work or project, 1st module, spacing to project specs */ .mb_mid { margin-bottom: 4.285rem; } .mb_normal_smaller { margin-bottom: 3.214rem; } .mb_smaller { margin-bottom: 2.0625rem; } .mb_small { margin-bottom: 1.1rem; } .section_title.mb_small { margin-bottom: 1.2rem; } #content { margin-top: 111px; overflow: hidden; } .circle_around, .flower_around, .hex_around_black, .hex_around_red, .hex_around_blue { margin-right:1.2rem; } #mobile_k1, #mobile_k2 { display: block; width: 22px; height: 19px; position: fixed; top: 63px; } #mobile_k1 { left: 31px; } #mobile_k2 { right: 31px; } body.red_bg #mobile_k1 path, body.red_bg #mobile_k2 path { fill: #ffffff !important; } /* .last_cm { margin-bottom:0; } */ .section_title .st_col_left, .section_title .st_col_right { width:100%; } .cm_team .section_title .st_col_left, .cm_team .section_title .st_col_right { width: 50%; } .cm_work_grid .section_title .st_col_left, .cm_work_grid .section_title .st_col_right { width:50%; } .section_title { margin-bottom: 7px; margin-bottom: 0.6rem; } /* ----------------------------------------------- Main Menu ----------------------------------------------- */ #main_menu_lines { left: 30px; } #main_menu_inner { margin-left:30px; } .no-touch #main_menu .submenu a:hover::before, #main_menu .submenu a.sub_item_active::before, .no-touch #main_menu .menu-item a.main_item:hover::before, #main_menu .current-menu-item a.main_item::before { left:-20px; } body.landscape #main_menu_inner { padding-top: 70px; } #main_menu_page { right:30px !important; /* same as .mobile_padding */ } /* ----------------------------------------------- special sticky headline ----------------------------------------------- */ #sticky_headline { padding-top: 111px; /* todo rem? */ } /* ----------------------------------------------- module: slideshow ----------------------------------------------- */ body.portrait .cm_slideshow .slider_wrap { padding-bottom:100%; } .cm_slideshow .slide_nav { display:none; } /* slide border */ .cm_slideshow .rsContent.has_border { border:4px solid #152735; } body.border_blue .cm_slideshow .rsContent.has_border { border:4px solid #152735; } body.red_bg .cm_slideshow .rsContent.has_border { border:4px solid #ffffff; } /* slide text */ .cm_slideshow .slide_text { padding:60px; padding:3.75rem; /* todo: ok? */ } .cm_slideshow .project_text { padding:30px; padding:1.875rem; /* todo: ok? */ } /* ----------------------------------------------- module: Images / Videos ----------------------------------------------- */ .cm_images_videos .img_wrap.def_width { margin-right:2rem; /* todo: padding ? */ } .cm_images_videos .img_wrap.full_width .text_wrap { padding: 0 30px; /* same as .mobile_padding */ } /* ----------------------------------------------- module: Grid two ----------------------------------------------- */ .grid_two_outer { margin-left: -10px; margin-right: -10px; } .grid_two_outer .item { padding: 0 10px 20px 10px; } .grid_two_outer .item_inner_text { padding-left:30px; padding-right:30px; } .cm_grid_two .section_title .st_col_right.second_title { text-align:left; padding-left: 40px; } /* ----------------------------------------------- module: Text ----------------------------------------------- */ .cm_txt.text_two_col .col_left { width: 100%; padding-right: 0; margin-bottom: 1.4rem; } .cm_txt.text_two_col .col_left .max_w_wrap { margin:0 auto; } .cm_txt.text_two_col .col_left .mobile_center { text-align:center; } .cm_txt.text_two_col .col_right { width:100%; } .cm_txt.text_left_marg .text { width:100%; margin-left:0; } .cm_txt.text_three_col .col1 { padding-right:0; width:100%; } .cm_txt.text_three_col .col2 { padding-right:5px; } .cm_txt.text_three_col .col1 { margin-bottom: 1.4rem; } .cm_txt.text_three_col .col2, .cm_txt.text_three_col .col3 { width:50%; } .cm_txt.text_centered { width:100%; margin-left:0; } /* ----------------------------------------------- module: work/playground grid ----------------------------------------------- */ .cm_work_grid .grid { margin-left:0px; margin-right:0px; } .cm_work_grid .grid .grid_item { float:left; padding:0px; /* todo: ok ? when changed also change .cm_project_slider .royalSlider */ } .cm_work_grid .selection, .cm_work_grid .filter_trigger { margin-bottom: 0.4rem; } .cm_work_grid .filter_menu_inner { padding-bottom: 1rem; } .cm_work_grid .mobile_text { display: block; height: 44px; overflow: hidden; padding: 4px 10px 10px 10px; line-height: 1.4rem; } .cm_work_grid .mobile_text_inner { height:36px; } body.red_bg .mobile_text { color:#ffffff; } body.single #content_module1 { margin-bottom: 1rem; } /* ----------------------------------------------- module: project text & specs ----------------------------------------------- */ #section_nav { display:none; } .cm_text_and_specs h1 { margin-bottom: 0.3rem; letter-spacing: 1.2px; } /* normal project */ .cm_text_and_specs .title_col { width:100%; padding-right:0; margin-right:0; } .cm_text_and_specs .mobile_text { display:block; } body.single:not(.case_study) .cm_text_and_specs h1 { margin-bottom: 2.25rem; } .cm_text_and_specs .arr_down::after { position: absolute; top: 10px; right: -13px; } .cm_text_and_specs .left_col { width:100%; margin-top: 2rem; margin-bottom: 0rem; } .cm_text_and_specs .right_col { display:none; } .cm_text_and_specs .mobile_text .right_col { display:block; width:100%; } /* case study */ #case_study_text { width:100%; } .cm_prev_next { margin-bottom: 5rem; } #prev_project { margin-left: 0; } /* ----------------------------------------------- module: work/playground slider ----------------------------------------------- */ .cm_project_slider .rsSlide { padding: 0; } .cm_project_slider .slider_prev { left: 10px; } .cm_project_slider .slider_next { right: 10px; } /* ----------------------------------------------- module: kontakt ----------------------------------------------- */ .cm_kontakt textarea { height:200px; } .cm_kontakt .col_left { width:100%; padding-right:0; } .cm_kontakt .col_right { margin-top:4rem; width:100%; } .cm_kontakt .google_maps { height:200px !important; } /* ----------------------------------------------- module: animated gfx ----------------------------------------------- */ .cm_animated_gfx1 .ani_container { width:76%; margin-top: 3rem; margin-bottom: 3rem; } /* ----------------------------------------------- module: team ----------------------------------------------- */ .cm_team .pic_col { width: 30%; display: inline-block; vertical-align: top; } .cm_team .text_col { vertical-align: top; width: 70%; display: inline-block; } .pers_overlay { width: 90%; } .pers_x { width: 25px; height: 25px; } /* ----------------------------------------------- footer ----------------------------------------------- */ #footer .col_inner { padding-right:10px; } #footer .col2 a, #footer_mobile_col a { display:block; margin-bottom:0.4rem !important; } #footer .col1, #footer .col3, #footer .col4, #footer .col5 { display:none; } #footer .col2 { width:50%; } #footer_mobile_col { display:inline-block; float:left; width:50%; clear:right; } #footer_mobile_col .col_content { padding-bottom:2rem; } #footer_mobile_col .col_wrap { display:none; overflow:hidden; } #footer .col6 { width:100%; clear:both; float:none; position:relative; top:2rem; } #footer .col2 h3, #footer .col6 h3 { display:none; } #footer .col6 form { width:50%; float:left; } #footer .col6 #soc_lnks { width:50%; float:left; padding-left: 0; } } @media only screen and (max-width : 666px) { /* < iphone 6 landscape */ /* ----------------------------------------------- < iphone 6+ landscape module: Grid two ----------------------------------------------- */ .grid_two_outer { width:auto; margin-left: -10px; margin-right: -10px; } .grid_two_outer .item { width:100%; padding: 0 10px 20px 10px; } .grid_two_outer .item_inner_text { padding-left:30px; padding-right:30px; } .cm_grid_two .section_title .st_col_right.second_title { display: none; } .cm_grid_two .mob_second_title { display: block; } /* ----------------------------------------------- < iphone 6+ landscape module: animated gfx ----------------------------------------------- */ #kk_animated_gfx_2 { margin-top: 0; } /* ----------------------------------------------- < iphone 6+ landscape related projects ----------------------------------------------- */ /* #related_projects .section_title { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; } */ #related_projects .section_title .st_col_left { text-align: left; width:100%; } #related_projects .section_title .st_col_right a { margin-left: 0; margin-right: 16px; } /* #related_projects .section_title .st_col_right { text-align: left; width:100%; margin-bottom: 2rem; } */ #related_projects .section_title .st_col_right { display: none; } } @media only screen and (max-width : 568px) { /* iphone 5 landscape */ } @media only screen and (max-width : 414px) { /* iphone 6+ portrait */ .cm_work_grid .grid .grid_item_inner { padding-bottom:100%; } /* ----------------------------------------------- module: team ----------------------------------------------- */ .cm_team .st_col_right .p_trigger { left: -13px; } .cm_team .p_trigger .plus { top: 0.6rem; } /* ----------------------------------------------- module: instagram ----------------------------------------------- */ .cm_instagram .ig_item { width: 32%; } .cm_instagram .ig_item3 { display: none; } .cm_instagram .ig_item:nth-child(3) { margin-right: 0; } /* ----------------------------------------------- iphone 6+ portrait module: team ----------------------------------------------- */ .cm_team .pic_col { width: 100%; padding-left: 20%; padding-right: 20%; display: block; } .cm_team .mo_img { padding-left: 20%; padding-right: 20%; } .cm_team .text_col { width: 100%; padding-top: 3rem; padding-left: 0; } .cm_team .member { margin-bottom: 5.3625rem; } .pers_x { width:20px; height:20px; } /* ----------------------------------------------- iphone 6+ portrait module: work/playground grid ----------------------------------------------- */ .cm_work_grid .grid .grid_item.size_half { width:100%; } } @media only screen and (max-width : 375px) { /* iphone 6 portrait */ #related_projects .section_title .st_col_right .prev_next { display:none; } } @media only screen and (max-width : 320px) { /* iphone 5 portrait */ html { font-size:69%; } .mobile_padding { padding-left:20px !important; padding-right:20px !important; } /* ----------------------------------------------- < iphone 6+ landscape Main Menu ----------------------------------------------- */ #main_menu_lines { left: 20px !important; } #main_menu_page { top: 27px; right:20px !important; /* same as .mobile_padding */ } #main_menu_inner { margin-left:20px !important; } .no-touch #main_menu .submenu a:hover::before, #main_menu .submenu a.sub_item_active::before, .no-touch #main_menu .menu-item a.main_item:hover::before, #main_menu .current-menu-item a.main_item::before { left:-15px; width:12px; background-position:-10px center; } .no-touch body.red_bg #main_menu .submenu a:hover::before, body.red_bg #main_menu .submenu a.sub_item_active::before, .no-touch body.red_bg #main_menu .menu-item a.main_item:hover::before, body.red_bg #main_menu .current-menu-item a.main_item::before { background-position:-10px center; } .cm_team .p_trigger .plus { top: 0.55rem; } .arr_down::after { width:8px; margin-top:-1px; right:-13px; background:url(assets/gfx/arrow_black_down.svg?2) no-repeat; background-size:8px 4px; -moz-transform-origin: 50% 2px; -webkit-transform-origin: 50% 2px; transform-origin: 50% 2px; } body.red_bg .arr_down::after { background:url(assets/gfx/arrow_white_down.svg?2) no-repeat; background-size:8px 4px; } .content_module .arr_left::after, .content_module .arr_right::after { width:15px; } /* left arrow */ .content_module .arr_left::after { left:-17px; background-size:15px 4px; background-position:6px center; } body.red_bg .content_module .arr_left::after { background-size:15px 5px; background-position:6px center; } /* right arrow todo: check */ .content_module .arr_right::after { right:-20px; background-size:15px 4px; background-position:-6px center; } .cm_footer .arr_right::after { background-size: 20px 7px; background-position: -6px center; right: -15px; } body.border_blue .cm_footer .arr_right::after { background-size: 20px 7px; background-position: -6px center; right: -15px; } body.red_bg .arr_right::after, body.red_bg .cm_footer .arr_right::after { background-size: 20px 7px; background-position: -6px center; } .cm_grid_two .item_inner_text { padding-left: 20px; padding-right: 20px; } }