/* Theme Name: Ralf Barsties Theme URI: Description: Author: Okan Tustas (design) | André Pahl (programming) Author URI: Version: 1.0 */ /* references: https://matthewlein.com/tools/ceaser http://the-echoplex.net/flexyboxes/ */ /* ============================================================================= Plugins ============================================================================= */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none} /* swiper */ /* without swiper-container-3d, swiper-button-prev, swiper-pagination-progressbar, swiper-lazy-preloader, swiper-container-cube, swiper-container-cube, swiper-container-coverflow, swiper-pagination /** * Swiper 4.2.6 * 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: May 1, 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-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-main{-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/ ============================================================================= */ .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}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}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: #2b388f blue light: #4a90e2 grey light: #eeeeee grey darker: #e4e4e4 text grey: #9b9b9b text grey dark: #4a4a4a ----------------------------------------------- */ .bg_white { background-color: #fff; } .bg_blue { background-color: #2b388f; } .bg_grey_light { background-color: #eeeeee; } .bg_grey_darker { background-color: #e4e4e4; } .bg_transparent { background-color: transparent; } /* ----------------------------------------------- fonts ----------------------------------------------- */ @font-face{ font-family:"univers_light"; src:url("assets/fonts/1475948/1215ed91-313a-4dda-99be-3acf61484452.eot?#iefix"); src:url("assets/fonts/1475948/1215ed91-313a-4dda-99be-3acf61484452.eot?#iefix") format("eot"),url("assets/fonts/1475948/db1e9a24-d371-4686-ba25-77b32a84e0db.woff2") format("woff2"),url("assets/fonts/1475948/beca77d5-0862-440e-bddd-321e82d5422c.woff") format("woff"),url("assets/fonts/1475948/a27ea012-0910-47ac-8294-40726e5a8fd3.ttf") format("truetype"); } @font-face{ font-family:"univers_regular"; src:url("assets/fonts/1475960/18c81410-3496-4c82-aefd-df42506addc3.eot?#iefix"); src:url("assets/fonts/1475960/18c81410-3496-4c82-aefd-df42506addc3.eot?#iefix") format("eot"),url("assets/fonts/1475960/938b61cf-8b60-408a-a252-531fc37ebeb3.woff2") format("woff2"),url("assets/fonts/1475960/df8a7a82-1b14-40c7-b6f8-7e2bac922b27.woff") format("woff"),url("assets/fonts/1475960/c7989e6f-ecdd-41d3-bb56-4e3f087847e6.ttf") format("truetype"); } @font-face{ font-family:"univers_bold"; src:url("assets/fonts/1475972/1c24e174-d1d8-49de-98ac-09d77eccf0e7.eot?#iefix"); src:url("assets/fonts/1475972/1c24e174-d1d8-49de-98ac-09d77eccf0e7.eot?#iefix") format("eot"),url("assets/fonts/1475972/73d8af9e-4b82-4953-81a5-8941aed30297.woff2") format("woff2"),url("assets/fonts/1475972/19ff06fe-d0c5-4294-a237-a4c9b85312b8.woff") format("woff"),url("assets/fonts/1475972/ff00799e-9823-48a0-a789-5f2d2e509fd7.ttf") format("truetype"); } /* ----------------------------------------------- General ----------------------------------------------- */ html, button, input, select, textarea { color: #000; } html { font-size: 100%; /* base 16px = 1em/rem */ width: 100%; } body { font-family: 'univers_light', sans-serif; font-size: 1.25em; /* 22 px -> /1.1 20px */ line-height: 1.5454545; font-weight: normal; color: #000; width: 100%; overflow-x: hidden; overflow-y: scroll; } div, article, section, header, footer, figure { position: relative; width: 100%; } aside, nav { position: relative; } iframe { border: none !important; } figure { margin: 0; } 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; } ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } .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: #000; text-shadow: none; } *::-moz-selection { background: #eee; color: #000; 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; } .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[x-apple-data-detectors], a[href^="tel"] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .nowrap { white-space: nowrap; } .nowrap a { -ms-word-break: keep-all; word-break: keep-all; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } .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; } .v_center_parent { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .v_center { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* input styling & placeholders */ textarea, input { -webkit-appearance:none; border-radius:0; } input, textarea { border: 0; width: 100%; background: transparent; -webkit-appearance: none; border-radius: 0; padding: 0; display: inline-block; } textarea { border: 1px solid #000; padding: 5px; resize: none; } /* ----------------------------------------------- animations ----------------------------------------------- */ .opacity_fade03 { -webkit-transition: opacity .3s ease-out; -moz-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; -ms-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .opacity_fade06 { -webkit-transition: opacity .6s ease-out; -moz-transition: opacity .6s ease-out; -o-transition: opacity .6s ease-out; -ms-transition: opacity .6s ease-out; transition: opacity .6s ease-out; } .opacity_fade10 { -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-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_04 { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s 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_10 { -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; } /* ----------------------------------------------- Typography [mce] reflect changes in custom-editor-style.css ----------------------------------------------- */ h1, h2, h3 { font-size: inherit; line-height: inherit; margin-top: 0; font-style: normal; font-weight: normal; } i, em { font-family: 'univers_light'; font-style: normal; font-weight: normal; } b, strong, b i, strong i, b em, em b, i b, i strong { font-family:'univers_bold' !important; font-style:normal; font-weight:normal; } .type_verybig { font-family: 'univers_regular'; font-size: 60px; font-size: 3.75rem; line-height: 1.1; /* 66px */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .type_big { font-family: 'univers_regular'; font-size: 40px; font-size: 2.5rem; line-height: 1.1; /* 44px */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .type_medium2 { font-family: 'univers_light'; font-size: 32px; font-size: 2rem; line-height: 1.375; /* 44px */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .type_medium { font-family: 'univers_regular'; font-size: 28px; font-size: 1.75rem; line-height: 1.214; /* 34px */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .type_regular { font-family: 'univers_regular' !important; } .type_smaller { font-family: 'univers_light'; font-size: 18px; font-size: 1.125rem; line-height: 1.5555556; /* 28px */ } .type_smaller16 { font-family: 'univers_light'; font-size: 16px; font-size: 1rem; line-height: 1.625; /* 26px */ } .type_small { font-family: 'univers_regular'; font-size: 14px; font-size: 0.875rem; line-height: 1.42857; /* 20px */ } .color_white, a.color_white, .color_white a { color: #fff; } .color_blue, a.color_blue, .color_blue a { color: #2b388f; } .color_blue_light, a.color_blue_light, .color_blue_light a { color: #4a90e2; } .color_textgrey, a.color_textgrey, .color_textgrey a { color: #9b9b9b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .color_textgrey_dark, a.color_textgrey_dark, .color_textgrey_dark a { color: #4a4a4a; } /* arrow links */ .arrow_onleft { padding-left: 40px; padding-left: 2.5rem; text-decoration: none!important; } .arrow_onright { padding-right: 40px; padding-right: 2.5rem; text-decoration: none!important; } .arrow_onleft::after, .arrow_onright::after { content: ""; width: 30px; width: 1.875rem; height: 100%; top: 1px; position: absolute; -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; } .arrow_onleft::after { left: 0; } .arrow_onleft.arr_rotate::after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); left: -6px; } .arrow_onright::after { right: 0; } /* http://b64.io or https://www.base64encode.org/ */ .arrow_onleft::after, .arrow_onright::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkIi8+PC9zdmc+) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .color_blue.arrow_onleft::after, .color_blue .arrow_onright::after, .arrow_onleft.color_blue::after, .arrow_onright.color_blue::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6IzJiMzg4ZjtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .color_blue_light .arrow_onleft::after, .color_blue_light .arrow_onright::after, .arrow_onleft.color_blue_light::after, .arrow_onright.color_blue_light::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6IzRhOTBlMjtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .color_textgrey .arrow_onleft::after, .color_textgrey .arrow_onright::after, .arrow_onleft.color_textgrey::after, .arrow_onright.color_textgrey::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6IzliOWI5YjtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .color_textgrey_dark .arrow_onleft::after, .color_textgrey_dark .arrow_onright::after, .arrow_onleft.color_textgrey_dark::after, .arrow_onright.color_textgrey_dark::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6IzRhNGE0YTtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .color_white .arrow_onleft::after, .color_white .arrow_onright::after, .arrow_onleft.color_white::after, .arrow_onright.color_white::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 30px 9px; background-size: 1.875rem 0.5625rem; background-position: -8px center; background-position: -0.5rem center; } .mo .arrow_onleft::after, .arrow_onleft:hover::after, .mo .arrow_onright::after, .arrow_onright:hover::after { background-position: 0px center !important; } /* etc */ .p_small_bm { margin-bottom: 22px !important; margin-bottom: 1.375rem !important; } .p_no_bm, .no_bm { margin-bottom: 0 !important; } .uppercase { text-transform: uppercase; } .editor_content ul { margin: 0 0 34px 0; /* same as line height of body */ margin: 0 0 2.125rem 0; padding: 0; } .editor_content li { list-style-type: none; padding-left: 28px; /* padding-left: 1.875rem; */ margin: 0; position: relative; } .editor_content li::before { content: '–'; display: inline-block; position: absolute; left: 0; } /* end editor */ /* ----------------------------------------------- other Typography & Links ----------------------------------------------- */ a, .like_link { position: relative; color: inherit; 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; cursor: pointer; } a .color_white, a .color_blue, a .color_blue_light, a .color_textgrey, a .color_textgrey_dark { -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; } .underline { text-decoration: underline; } .no-touch a.underline:hover, .no-touch a .underline:hover, .no-touch .like_link.underline:hover, .no-touch .clickable.underline:hover { text-decoration: none; } .uppercase { text-transform: uppercase; } .editor_content hr { display: none; } .readmore_trigger { font-family: 'univers_bold'; font-size: 13px; /* font-size: 0.8125rem; todo kein Rem? */ line-height: 1.42857; text-decoration: underline; text-transform: uppercase; display: inline-block; top: -2px; position: relative } .readmore_spacer { margin-right: 10px; } .no-touch .readmore_trigger:hover { text-decoration: none; } /* ----------------------------------------------- Lazy images ----------------------------------------------- */ img { width: 100%; max-width: 100%; height: auto; } .lazy_img_cont { overflow: hidden; } .lazy_img_cont img { position: absolute; z-index: 2; top: 0px; left: 0px; 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 .lazy_bg { position: absolute; z-index:2; top: 0; left: 0; right: 0; bottom: 0; width: auto; heigth: auto; background-size: cover; background-position: center center; background-repeat: no-repeat; 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; } .image_aspect { height: 0; padding-bottom: 52.7%; -webkit-backface-visibility: hidden; overflow: hidden; } .max_w_wrap { display: inline-block; width: 100%; } /* ----------------------------------------------- menu [mmm] ----------------------------------------------- */ #main_menu { position: absolute; top: 0; left: 0; right: 0; width: auto; margin: 0 auto; z-index: 100; } #main_menu_bg { position: fixed; top: 0; left: 0; right: 0; width: auto; margin: 0 auto; height: 50px; background-color: #fff; z-index: 99; opacity: 0; } body:not(.small_screen) #main_menu_bg { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -ms-transition: all .2s ease-out; transition: all .2s ease-out; } body:not(.img_over_menu) #main_menu_bg { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } #main_menu_bg.on { opacity: 1; } body #main_menu.fixed { position: fixed; top: -73px; } body.small_screen #main_menu.fixed { top: -52px; } #main_menu .menu-outer { position: absolute; right: 8.3333%; /* same as .content_padding */ top: 92px; width: auto; z-index: 2; } #main_menu.fixed .menu-outer { top: 91px; } #main_menu ul { margin: 0; padding: 0; width: auto; } #main_menu li { display: inline-block; margin: 0 0 0 30px; margin: 0 0 0 1.875rem; padding: 0; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #main_menu.fixed a { color: #2b388f; } #main_menu li a::before { content: ''; display: block; position: absolute; left: 0; bottom: -8px; bottom: -0.5rem; height: 1px; width: 0; background-color: #fff; transition: width .5s ease, bottom .3s ease; } #main_menu.fixed a::before { bottom: -3px; bottom: -0.1875rem; } #main_menu.fixed .color_white li a::before, #main_menu .color_blue li a::before { background-color: #2b388f; } li.current-menu-item a::before, body.page-id-1255 .menu-item-1188 a::before, .no-touch #main_menu li a:hover::before { width: 100% !important; } /* menu logo */ #logo_top { top: 42px; width: 194px; height: 68px; z-index: 1; } #logo_top path, #logo_top polygon { -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; } body:not(.small_screen) #logo_top:not(.blue) path, body:not(.small_screen) #logo_top:not(.blue) polygon { fill: #fff !important; } body:not(.small_screen) #main_menu.fixed #logo_top:not(.blue) path, body:not(.small_screen) #main_menu.fixed #logo_top:not(.blue) polygon { fill: #2b388f !important; } .no-touch #logo_top:hover path, .no-touch #logo_top:hover polygon, #logo_top.blue path, #logo_top.blue polygon { fill: #2b388f !important; } .no-touch #logo_top.blue:hover path, .no-touch #logo_top.blue:hover polygon { fill: #000000 !important; /* todo ? */ } #bb_logo_m1, #bb_logo_m2, #bb_logo_m3, #logo_m_left_1, #logo_m_left_2, #logo_m_left_3 { -webkit-backface-visibility: hidden; } /* menu carrots left */ #mm_carrots_left { position: absolute; width: 30px; height: 35px; left: -42px; top: -7px; opacity: 0; } /* mobile menu hamburger */ #menu-toggle { position: fixed; top: 15px; right: 20px; width: 24px; height: 18px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; z-index: 1002; display: none; } /* make click area bigger */ #menu-toggle::before { content: ''; position: absolute; top: -15px; bottom: -15px; left: -20px; right: -20px; background-color: transparent; /* rgba(255,0,66, 0.5); */ z-index: -1; } /* based on https://codepen.io/designcouch/pen/Atyop */ #menu-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: #2b388f; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #menu-toggle span:nth-child(1) { top: 0px; } #menu-toggle span:nth-child(2), #menu-toggle span:nth-child(3) { top: 8px; } #menu-toggle span:nth-child(4) { top: 16px; } #menu-toggle.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; } #menu-toggle.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu-toggle.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu-toggle.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; } /* mobile menu text */ #mob_menu_content li { margin-bottom: 1.3rem; } #mob_menu_content li a { font-family: 'univers_light'; } #mob_menu_content li.current-menu-item a::before { content: ''; display: block; position: absolute; left: 0; bottom: -0.2rem; height: 2px; width: 100%; background-color: #2b388f; transition: width .5s ease; } /* mobile menu logo */ #mob_menu_logo { width: 15.8088rem; /* 1.176470588235294 * 215 */ height: calc(5.441176rem + 3.67647rem); background: url(assets/gfx/barsties_logo.svg) no-repeat; background-size: contain; background-position: top center; } /* mobile menu overlay */ #mob_menu_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 1001; } #mob_menu_bg { position:fixed; top: 0; left: 0; width: 100%; height: 100vh; color: #fff; z-index: 1000; background-color: #eeeeee; } body:not(.small_screen) #mob_menu_overlay, body:not(.small_screen) #mob_menu_bg { display: none !important; } #mob_menu_swiper { position: absolute !important; top: 0; width: 100%; height: 100%; } #mob_menu_swiper .swiper-slide { height: 100%; text-align: center; } #mob_menu_content { margin-top: -2vh; text-align: left; display: inline-block; width: auto; } /* ---------------------------------------------------------------------------------------------- swipers & slide navigation https://www.base64encode.org --------------------------------------------------------------------------------------------- */ /* slide navigation */ .slider_nav { -webkit-transition: opacity .6s ease-out 0.4s; -moz-transition: opacity .6s ease-out 0.4s; -o-transition: opacity .6s ease-out 0.4s; -ms-transition: opacity .6s ease-out 0.4s; transition: opacity .6s ease-out 0.4s; opacity: 0; } .swiper-slide-active .slider_nav { opacity: 1; } .arr_square_left { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNNy41NywxMS42MWEuMzYuMzYsMCwwLDEtLjEyLjI4bC0uNjEuNjJhLjQuNCwwLDAsMS0uNTcsMEwuNTUsNi43OGEuMzkuMzksMCwwLDEsMC0uNTZMNi4yNy40OWEuNC40LDAsMCwxLC41NywwbC42MS42MmEuMzkuMzksMCwwLDEsMCwuNTZMMi42Miw2LjVsNC44Myw0LjgzQS4zOC4zOCwwLDAsMSw3LjU3LDExLjYxWiIgc3R5bGU9ImZpbGw6IzJiMzg4ZiIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; width: 46px; width: 2.875rem; height: 46px; height: 2.875rem; background-color: #fff; display: inline-block; margin-right: 18px; border: 1px solid #2b388f; } .no-touch .arr_square_left:not(.disabled):hover { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNNy41NywxMS42MWEuMzYuMzYsMCwwLDEtLjEyLjI4bC0uNjEuNjJhLjQuNCwwLDAsMS0uNTcsMEwuNTUsNi43OGEuMzkuMzksMCwwLDEsMC0uNTZMNi4yNy40OWEuNC40LDAsMCwxLC41NywwbC42MS42MmEuMzkuMzksMCwwLDEsMCwuNTZMMi42Miw2LjVsNC44Myw0LjgzQS4zOC4zOCwwLDAsMSw3LjU3LDExLjYxWiIgc3R5bGU9ImZpbGw6I2ZmZmZmZiIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; background-color: #2b388f; border: 1px solid #2b388f; } .arr_square_left.disabled { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNNy41NywxMS42MWEuMzYuMzYsMCwwLDEtLjEyLjI4bC0uNjEuNjJhLjQuNCwwLDAsMS0uNTcsMEwuNTUsNi43OGEuMzkuMzksMCwwLDEsMC0uNTZMNi4yNy40OWEuNC40LDAsMCwxLC41NywwbC42MS42MmEuMzkuMzksMCwwLDEsMCwuNTZMMi42Miw2LjVsNC44Myw0LjgzQS4zOC4zOCwwLDAsMSw3LjU3LDExLjYxWiIgc3R5bGU9ImZpbGw6I0QwRDJEMyIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; background-color: #fff; cursor: default !important; border: 1px solid #EEEEEE; } .arr_square_right { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNLjQzLDEuMzlhLjM2LjM2LDAsMCwxLC4xMi0uMjhMMS4xNi40OUEuNDcuNDcsMCwwLDEsMS40NS4zN2EuNDYuNDYsMCwwLDEsLjI4LjEyTDcuNDUsNi4yMmEuMzkuMzksMCwwLDEsMCwuNTZMMS43MywxMi41MWEuNDYuNDYsMCwwLDEtLjI4LjEyLjQ3LjQ3LDAsMCwxLS4yOS0uMTJsLS42MS0uNjJhLjM5LjM5LDAsMCwxLDAtLjU2TDUuMzgsNi41LjU1LDEuNjdBLjM4LjM4LDAsMCwxLC40MywxLjM5WiIgc3R5bGU9ImZpbGw6IzRhNGE0YSIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; width: 46px; width: 2.875rem; height: 46px; height: 2.875rem; background-color: #fff; display: inline-block; border: 1px solid #2b388f; } .no-touch .arr_square_right:not(.disabled):hover { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNLjQzLDEuMzlhLjM2LjM2LDAsMCwxLC4xMi0uMjhMMS4xNi40OUEuNDcuNDcsMCwwLDEsMS40NS4zN2EuNDYuNDYsMCwwLDEsLjI4LjEyTDcuNDUsNi4yMmEuMzkuMzksMCwwLDEsMCwuNTZMMS43MywxMi41MWEuNDYuNDYsMCwwLDEtLjI4LjEyLjQ3LjQ3LDAsMCwxLS4yOS0uMTJsLS42MS0uNjJhLjM5LjM5LDAsMCwxLDAtLjU2TDUuMzgsNi41LjU1LDEuNjdBLjM4LjM4LDAsMCwxLC40MywxLjM5WiIgc3R5bGU9ImZpbGw6I2ZmZmZmZiIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; background-color: #2b388f; border: 1px solid #2b388f; } .arr_square_right.disabled { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDEzIj48cGF0aCBkPSJNLjQzLDEuMzlhLjM2LjM2LDAsMCwxLC4xMi0uMjhMMS4xNi40OUEuNDcuNDcsMCwwLDEsMS40NS4zN2EuNDYuNDYsMCwwLDEsLjI4LjEyTDcuNDUsNi4yMmEuMzkuMzksMCwwLDEsMCwuNTZMMS43MywxMi41MWEuNDYuNDYsMCwwLDEtLjI4LjEyLjQ3LjQ3LDAsMCwxLS4yOS0uMTJsLS42MS0uNjJhLjM5LjM5LDAsMCwxLDAtLjU2TDUuMzgsNi41LjU1LDEuNjdBLjM4LjM4LDAsMCwxLC40MywxLjM5WiIgc3R5bGU9ImZpbGw6I0QwRDJEMyIvPjwvc3ZnPg==) no-repeat; background-size: 8px 12px; background-size: 0.5rem 0.75rem; background-position: center center; background-color: #fff; cursor: default !important; border: 1px solid #EEEEEE; } /* ---------------------------------------------------------------------------------------------- content [ccc] --------------------------------------------------------------------------------------------- */ #content { margin: 0 auto; z-index: 1; overflow: hidden; } #content_inner { min-height: calc(100vh - 140px); /* overwritten by .js // 140 is footer height */ padding-top: 150px; } #is_small_screen, #is_mobile_view { display: none; position: absolute; top: -10px; left: -10px; width: 1px; height: 1px; overflow: hidden; } .content_max_w { width: 100%; max-width: 1444px; margin: 0 auto; } .content_padding { padding-left: 8.3333%; padding-right: 8.3333%; } .content_module { width: 100%; } /* shows content of wysiwyg editor */ .editor_content a { text-decoration: none; } .no-touch .editor_content a:not(.arrow_onleft):hover, .no-touch .editor_content a:not(.arrow_onleft):hover .color_white, .no-touch .editor_content a:not(.arrow_onleft):hover .color_blue_light, .no-touch .editor_content a:not(.arrow_onleft):hover .color_textgrey, .no-touch .editor_content a:not(.arrow_onleft):hover .color_textgrey_dark { color: #2b388f; } .no-touch .editor_content a:not(.arrow_onleft):hover .color_blue { color: #000; } .editor_content p:last-of-type, .editor_content ul:last-child { margin-bottom: 0; } /* content module bottom margin */ .mb_bigger { padding-bottom: 136px; padding-bottom: 8.5rem; } /* same as parallax couble negative margin ! */ .mb_normal { padding-bottom: 85px; padding-bottom: 5.3125rem; } .mb_smaller { padding-bottom: 51px; padding-bottom: 3.1875rem; } .mb_one_line { padding-bottom: 22px; padding-bottom: 1.375rem; } .mb_none { padding-bottom: 0; } /* content module top margin */ .mt_bigger { padding-top: 136px; padding-top: 8.5rem; } .mt_normal { padding-top: 85px; padding-top: 5.3125rem; } .mt_smaller { padding-top: 51px; padding-top: 3.1875rem; } /* todo responsive ? */ .mt_one_line { padding-top: 34px; padding-top: 2.125rem; } .mt_none { padding-top: 0; } /* ----------------------------------------------- Grid ----------------------------------------------- */ .columns { margin-left: -1.661%; margin-right: -1.661%; width: auto; } .col { padding-left: 1.71617842%; /* total width 103.322% -> 103.322 / 100 = 1.03322 -> 1.661 * 1.03322 = 1.71617842 */ padding-right: 1.71617842%; display: inline-block; vertical-align: top; } .c1 { width: 8.333332%; } .c2 { width: 16.666667%; } .c3 { width: 25%; } .c4 { width: 33.333332%; } .c5 { width: 41.666667%; } .c6 { width: 50%; } .c7 { width: 58.333332%; } .c8 { width: 66.666667%; } .c10 { width: 83.333332%; } .c11 { width: 91.666667%; } .c12 { width: 100%; } /* left margins */ .cml1 { margin-left: 8.333332%; } .cml2 { margin-left: 16.666667%; } .cml3 { margin-left: 25%; } .cml5 { margin-left: 41.666667%; } .cml6 { margin-left: 50%; } /* right margins */ .cmr1 { margin-right: 8.3333%; } .cmr2 { margin-right: 16.666667%; } .cmr3 { margin-right: 25%; } /* ----------------------------------------------- Module Headline ----------------------------------------------- */ .module_headline h2 { margin-bottom: 30px; margin-bottom: 1.875rem; } .module_headline .spacer_line { width: 0%; height: 2px; height: 0.125rem; margin-bottom: 55px; margin-bottom: 3.4375rem; background-color: #2b388f; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } .in_viewport .spacer_line { width: 44.6524%; } /* ----------------------------------------------- Module: Headerbild(er) ----------------------------------------------- */ .cm_header_img { } .cm_header_img .header_text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 48px 50px; padding: 3rem 3.125rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 3; } .cm_header_img .header_text_inner { position: absolute; bottom: 8.7vw; left: 0; height: auto; } .cm_header_img .text { max-width: 660px; } .cm_header_img h1 { margin-bottom: 0; } .content_module1.cm_header_img.below_menu { margin-top: -150px; /* same as #content_inner */ } body.small_screen .content_module1.cm_header_img.below_menu { margin-top: 0; } /* ----------------------------------------------- Module: Text ----------------------------------------------- */ .cm_txt .logos { position: absolute; width: 48.28382158%; bottom: 0; left: 1.71617842%; } .cm_txt .logos .logo { width: auto; height: 60px; height: 3.75rem; margin-right: 24px; margin-right: 1.5rem; } /* layout: Zwei Spalten mit Bild links */ .text_two_col_img .col_left.c5 .text_img { width: 78.661%; margin-bottom: 90px; margin-bottom: 5.625rem; } .text_two_col_img .col_left.c4 .text_img { width: 100%; margin-bottom: 90px; margin-bottom: 5.625rem; } .cm_txt .col.editor_content p { /* opacity: 0; */ /* todo !!!! */ -webkit-animation-delay: 1s; } @-webkit-keyframes moveup_and_fade { 0% { opacity: 0; -webkit-transform: translateY(70px); -ms-transform: translateY(70px); -moz-transform: translateY(70px); transform: translateY(70px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @keyframes moveup_and_fade { 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -moz-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } /* ----------------------------------------------- Module: Team ----------------------------------------------- */ .mt_first { padding-top: 16px; padding-top: 1rem; } .cm_team .team_item .lazy_image { border-radius: 50%; } .cm_team .team_item .team_img_wrap { width: 269px !important; width: 16.8125rem !important; height: 269px !important; height: 16.8125rem !important; } .cm_team .logos { position: absolute; bottom: 0; left: 0; width: 50%; } .cm_team .logos .logo { width: auto; height: 70px; height: 4.375rem; margin-right: 24px; margin-right: 1.5rem; } /* ----------------------------------------------- Module: Next Page ----------------------------------------------- */ .no-touch .cm_next_page .link_outer:hover .arrow_onright::after { background-position: 0px center !important; } .cm_next_page .link { width: auto; display: inline-block; margin-bottom: 7px; margin-bottom: 0.4375rem; } .cm_next_page .descr { max-width: 280px; } /* ----------------------------------------------- Module: Parallax Couple ----------------------------------------------- */ /* same as .mb_normal */ .cm_parallax_couple.layout1 { margin-top: -5.3125rem; } .cm_parallax_couple.layout2 { margin-bottom: -5.3125rem; } .cm_parallax_couple .img1, .cm_parallax_couple .img2 { -webkit-transition: left .6s ease-out; -moz-transition: left .6s ease-out; -o-transition: left .6s ease-out; -ms-transition: left .6s ease-out; transition: left .6s ease-out; } .cm_parallax_couple.layout1 .img1 { z-index: 2; } .cm_parallax_couple.layout1 .img2 { margin-left: -25%; margin-top: 170px; /* overwritten by .js */ z-index: 1; } .cm_parallax_couple.layout2 .img1 { z-index: 1; } .cm_parallax_couple.layout2 .img2 { margin-left: -33.3332%; margin-top: 500px; /* todo javascript */ z-index: 2; } /* ----------------------------------------------- Module: Google Maps ----------------------------------------------- */ .cm_maps .google_maps { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ----------------------------------------------- Module: Grid links ----------------------------------------------- */ .cm_grid_links .link_item { display: inline-block; vertical-align: top; } .cm_grid_links.layout1 .link_item { width: 50%; } .cm_grid_links.layout2 .link_item { width: 33.333%; } .cm_grid_links .link_item_text { position: absolute; /*top: 0; left: 0; */ left: 3.125rem; bottom: 2.125rem; width: calc(100% - 6.25rem); /* width: 100%; height: 100%; */ /* padding: 48px 50px; padding: 3rem 3.125rem; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 3; } .cm_grid_links h2 { margin-bottom: 0; } .cm_grid_links .link { position: relative; } /* .cm_grid_links .arrow_onright:after { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } */ /* ----------------------------------------------- Module: Regeln ----------------------------------------------- */ .cm_rules h3 { margin-top: 0; } .cm_rules h3 .num { color: #D0D2D3; } .cm_rules .text { z-index: 2; /* background-color: rgba(255,0,0,0.4); */ } /* debug */ /* .cm_rules .swiper-container { background: url(assets/gfx/test_grid.gif) repeat-y; background-size: 100%; } */ .cm_rules .swiper-container { -webkit-transition-timing-function: cubic-bezier(0.18, 0.49, 0.27, 0.99) !important; -o-transition-timing-function: cubic-bezier(0.18, 0.49, 0.27, 0.99) !important; transition-timing-function: cubic-bezier(0.18, 0.49, 0.27, 0.99) !important; } .cm_rules .swiper-slide { height: 700px; /* gets overwritten by .js */ overflow: hidden; } .cm_rules .images { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .cm_rules .img { /* todo kollidiert mit parallax transition-duration -webkit-transition: top .6s ease-in-out; -moz-transition: top .6s ease-in-out; -o-transition: top .6s ease-in-out; -ms-transition: top .6s ease-in-out; transition: top .6s ease-in-out !important; */ } /* slide layout 1 */ .cm_rules .layout1 .img1 { position: absolute; width: calc(41.6665% + 1.71617842%); padding-right: 1.71617842%; top: 0; right: 0; z-index: 2; } .cm_rules .layout1 .img2 { position: absolute; width: 33.3332%; top: 326px; /* overwritten by js */ left: 50%; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 1; } /* slide layout 2 */ .cm_rules .layout2 .img1 { position: absolute; width: calc(50% + 1.71617842%); padding-right: 1.71617842%; top: 0; right: 0; z-index: 1; } .cm_rules .layout2 .img2 { position: absolute; width: 25%; top: 423px; /* overwritten by js */ left: 40%; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* slide layout 3 */ .cm_rules .layout3 .img1 { position: absolute; width: 50%; padding-left: 1.71617842%; padding-right: 1.71617842%; top: 0; right: 0; z-index: 1; } .cm_rules .layout3 .img2 { position: absolute; width: 33.3332%; top: 325px; /* overwritten by js */ right: 25%; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* slide layout 4 */ .cm_rules .layout4 .img1 { position: absolute; width: 33.3332%; padding-left: 1.71617842%; padding-right: 1.71617842%; top: 0; right: 25%; z-index: 1; } .cm_rules .layout4 .img2 { position: absolute; width: 50%; top: 177px; /* overwritten by js */ right: 0; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* slide layout 5 */ .cm_rules .layout5 .img1 { position: absolute; width: calc(33.3332% + 1.71617842%); padding-right: 1.71617842%; top: 0; right: 25%; z-index: 1; } .cm_rules .layout5 .img2 { position: absolute; width: 33.3332%; top: 107px; /* overwritten by js */ right: 0; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } .cm_rules .layout5 .img3 { position: absolute; width: 25%; top: 390px; /* overwritten by js */ right: calc(16.6666% - 1.71617842% - 1.71617842%); padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* slide layout 6 */ .cm_rules .layout6 .img1 { position: absolute; width: 58.33333%; padding-left: 1.71617842%; padding-right: 1.71617842%; top: 0; right: 0; z-index: 1; } /* slide layout 7 */ .cm_rules .layout7 .img1 { position: absolute; width: calc(50% + 0.9%); padding-left: 1.71617842%; padding-right: 1.71617842%; top: 0; right: 2.4%; z-index: 1; } .cm_rules .layout7 .img2 { position: absolute; width: 33.3332%; top: 275px; /* overwritten by js */ left: 40%; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* slide layout 8 */ .cm_rules .layout8 .img1 { position: absolute; width: 50%; padding-left: 1.71617842%; padding-right: 1.71617842%; top: 0; right: 8.3333%; z-index: 1; } .cm_rules .layout8 .img2 { position: absolute; width: 33.3332%; top: 304px; /* overwritten by js */ right: 0; padding-left: 1.71617842%; padding-right: 1.71617842%; z-index: 2; } /* ----------------------------------------------- Module: Videos ----------------------------------------------- */ .video_container { -webkit-backface-visibility: hidden; height: 0; overflow: hidden; width: 100%; text-align: center; -webkit-transition: padding-bottom .6s ease-in-out; -moz-transition: padding-bottom .6s ease-in-out; -o-transition: padding-bottom .6s ease-in-out; -ms-transition: padding-bottom .6s ease-in-out; transition: padding-bottom .6s ease-in-out; } .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; } .video_play { position: absolute; z-index: 2; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 118px; width: 7.375rem; height: 118px; height: 7.375rem; } .video_play svg path { -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; } .no-touch .video_player .video_play:hover svg path, .no-touch .video_thumb:hover .video_play svg path, .video_thumb.active .video_play svg path { fill: #2b388f; } .video_player { margin-bottom: 38px; margin-bottom: 2.375rem; } .video_thumb { display: inline-block; vertical-align: top; width: 26.744%; margin-right: 26px; margin-right: 1.625rem; } .video_thumb .video_play { width: 32px; width: 2rem; height: 32px; height: 2rem; } /* ----------------------------------------------- Module: Text mit Slides (Bild/Text) todo ----------------------------------------------- */ .cm_text_and_slides .img_slides .swiper-slide { padding-right: 16%; /* todo ? */ } .cm_text_and_slides .img_slides .swiper-slide .img { -webkit-transition: opacity .6s ease-out 0.4s; -moz-transition: opacity .6s ease-out 0.4s; -o-transition: opacity .6s ease-out 0.4s; -ms-transition: opacity .6s ease-out 0.4s; transition: opacity .6s ease-out 0.4s; opacity: 0; } .cm_text_and_slides .img_slides .swiper-slide-active .img { opacity: 1; } /* ----------------------------------------------- Module: Textblöcke mit Icons ----------------------------------------------- */ .cm_text_and_icons .test_grid { position: absolute; top: 0; z-index: -1; left: 1.71617842%; right: 1.71617842%; width: auto; height: 100%; background: url(assets/gfx/test_grid.gif) repeat-y; background-size: 100%; } .cm_text_and_icons .text_left { position: absolute; top: 0; left: 0; z-index: 1; } /* text larger than grid... */ .cm_text_and_icons .text_left p { padding-right: 13%; } /* text with icon https://css-tricks.com/almanac/properties/f/flex/ */ .cm_text_and_icons .text_block { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; } .cm_text_and_icons .icon_and_line { height: 100%; } .cm_text_and_icons .icon { position: absolute; width: 83.78%; /* 51px max */ height: 0; padding-bottom: 83.78%; left: -26.5%; top: -10px; } .cm_text_and_icons .icon img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cm_text_and_icons .circle { left: 100%; margin-left: -10px; width: 20px; width: 1.25rem; height: 20px; height: 1.25rem; border: 1px solid #2b388f; border-radius: 50%; background-color: #fff; top: 7px; top: 0.4375rem; z-index: 1; } .cm_text_and_icons .line { content: ''; position: absolute; top: 0; left: 100%; margin-left: -1px; width: 1px; height: 100%; background-color: #9B9B9B; z-index: 0; } .cm_text_and_icons .first .line { top: 10px; top: 0.625rem; } .cm_text_and_icons .last .line { height: calc(100% - 34px - 0.4rem); } .cm_text_and_icons .title h2 { display: inline; width: auto; margin-bottom: 0; } .cm_text_and_icons .title .num { display: inline-block; margin-right: 26px; margin-right: 1.625rem; } .cm_text_and_icons .text_block .text { padding-bottom: 34px; } /* ----------------------------------------------- Module: Kundenzitate todo margins ok? ----------------------------------------------- */ .cm_clients .cite { width: 50%; padding-left: 1.661%; padding-right: 1.661%; margin-bottom: 68px; margin-bottom: 4.25rem; } .cm_clients .cite_inner { -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -ms-transition: all 2s ease-out; transition: all 2s ease-out; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .cm_clients .cite_inner.inactive { -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); opacity: 0; } .cm_clients .cite_footer { -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -ms-transition: all 2s ease-out; transition: all 2s ease-out; opacity: 1; } .cm_clients .inactive .cite_footer { opacity: 0; } .cite_container { margin-left: -1.661%; margin-right: -1.661%; width: auto; } .cm_clients .cite_img { width: 48px; width: 3rem; height: 48px; height: 3rem; margin-right: 20px; margin-right: 1.25rem; display: inline-block; vertical-align: middle; } .cite_img .lazy_img_cont { width: 100%; height: 100%; border-radius: 50%; } .cm_clients .cite_name { display: inline-block; vertical-align: middle; width: calc(100% - 3rem - 1.25rem); /* substract .cite_img width + margin */ } .cite_footer { margin-top: 0.8rem; } /* ----------------------------------------------- Footer ----------------------------------------------- */ #footer { height: auto; text-align: center; padding-top: 42px; padding-top: 2.625rem; padding-bottom: 35px; padding-bottom: 2.1875rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #footer_line1 .home { margin-right: 16px; margin-right: 1rem; } .no-touch #footer_line1 .home:hover { color: #4a4a4a !important; } #footer_line1 h2 { display: inline-block; width: auto; margin-bottom: 0; } #footer_line1 h3 { display: inline-block; width: auto; margin-bottom: 0; } #footer_line2 { margin-top: 8px; margin-top: 0.5rem; } #footer_line2 p { color: #797979; display: inline-block; vertical-align: middle; margin: 0; } #footer_line2 p::after { content: ' –'; } #footer_line2 p:nth-last-child(2)::after { content: ''; padding-right: 1rem; } #footer_line2 p:last-child::after { content: ''; } #footer_line2 a { color: #797979; text-decoration: none !important; } .no-touch #footer a:hover { color: #2b388f !important; } /* ----------------------------------------------- cookie message todo ----------------------------------------------- */ /* #ckkie_message { position: fixed; width: 100%; left: 0; bottom: 0; background-color: #eee; color: #999; z-index: 999; padding: 14px 0; padding: 0.575rem 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } #ckkie_message.active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #ckkie_message a { color: #999; text-decoration: none; border-bottom: 1px solid; } #ckkie_message a:hover { border-bottom:1px transparent; } #ckkie_message_inner { width: 100%; margin: 0 auto; } #ckkie_message_inner p { display: inline; margin: 0; } #ckkie_message .content_module { margin-bottom: 0; } #ckkie_accept { display: inline; border-bottom: 1px solid; padding: 0; margin-left: 10px; margin-left: 0.625rem; } #ckkie_accept:hover { border-bottom:1px solid transparent; } */ /* ----------------------------------------------- responsive [rrr] ----------------------------------------------- */ @media only screen and (max-width : 1366px) { /* 1366x768 Laptop */ html { font-size: 98%; } .module_headline.c4 { width: 41.666667%; /* = c5 */ } } @media only screen and (max-width : 1024px) { /* ipad landscape */ html { font-size: 95%; } } @media only screen and (max-width : 1023px) { /* smaller than ipad landscape */ html { font-size:90%; } } @media only screen and (max-width : 768px) { /* ipad portrait */ html { font-size: 85%; } #is_small_screen { display: block; } /* show mobile menu */ #menu-toggle { display: block; } #main_menu .menu-outer { display: none; } #content_inner { padding-top: 110px; } .content_module1.cm_header_img.below_menu { margin-top: 0; } #main_menu_content { text-align: center; } #logo_top { top: 24px; width: 180px; height: 61px; z-index: 1; margin: 0 auto; } #mm_carrots_left { width: 25px; height: 30px; left: -36px; top: -6px; } #mob_menu_content li.current-menu-item a::before { height: 1px; } /* make images square */ .cm_maps .image_aspect, .cm_header_img .image_aspect { padding-bottom: 100%; } } @media only screen and (max-width : 736px) { /* iphone 6+ landscape */ body.landscape #mob_menu_content { transform: scale(0.8); margin-top: -3vh; } body.landscape #mob_menu_logo { height: calc(5.441176rem + 2.67647rem); } body.landscape #mob_menu_content li { margin-bottom: 1rem; } } @media only screen and (max-width : 735px) { /* < iphone 6+ landscape MOBILE VIEW [vvv] */ #is_mobile_view { display: block; } body.small_screen.is_mobile_view #main_menu.fixed { top: -48px; } #logo_top { transform: scale(0.8); top: 24px; } #main_menu_bg { height: 48px; } #mm_carrots_left { top: -7px; } /* 15px @ 320px width */ .content_padding { padding-left: 4.6875%; padding-right: 4.6875%; } /* half distance margin bottom for 1st module */ .content_module1.mb_bigger { padding-bottom: 4.25rem; } .content_module1.mb_normal { padding-bottom: 2.65625rem; } .content_module1.mb_smaller { padding-bottom: 1.59375rem; } /* smaller - */ .editor_content li { padding-left: 26px; } .editor_content li::before { content: '-'; } /* ----------------------------------------------- Module Headline ----------------------------------------------- */ .module_headline { width: 100% !important; } .module_headline .spacer_line { margin-bottom: 2.29167rem; } .in_viewport .spacer_line { width: 28%; } /* ----------------------------------------------- Module: Text ----------------------------------------------- */ .cm_txt .type_smaller { /* same font size as body */ font-size: 1.375rem; line-height: 1.5454545; } .cm_txt .col_left { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2.975rem; } .cm_txt .col_right { width: 100%; margin-right: 0; margin-left: 0; } /* xxx */ .cm_txt .logos { width: 96.56764316%; position: relative; bottom: auto; left: 1.71617842%; margin-top: 1.5rem; } /* layout: Zwei Spalten mit Bild links */ .text_two_col_img .text_img { width: 100% !important; margin-bottom: 2.8125rem !important; } /* Layout: Drei Spalten */ .cm_txt.text_three_col .col { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2.975rem; } /* ----------------------------------------------- Module: Parallax Couple ----------------------------------------------- */ /* applied by .js to modules that have mb_none and come before parallax couples */ .mobile_mb_special { padding-bottom: 2.8125rem !important } .cm_parallax_couple { margin-top: 0!important; padding-bottom: 0; margin-bottom: 10px!important; /* todo checken ob überall ok */ } .cm_parallax_couple .col { width: 100%; } .cm_parallax_couple .img1 { margin-left: 0!important; margin-top: 0!important; margin-bottom: 10px; } .cm_parallax_couple .img2 { margin-left: 0!important; margin-top: 0!important; } /* ----------------------------------------------- Module: Regeln ----------------------------------------------- */ .cm_rules .text { width: 100%; margin-left: 0; margin-right: 0; } .cm_rules .images { position: relative; width: 100%; margin-left: 0; margin-right: 0; margin-top: 2.975rem; } /* slide layout 1 todo feintunen */ .cm_rules .layout1 .img1 { width: calc(75% + 1.71617842%); } .cm_rules .layout1 .img2 { width: 49.9998%; left: 10%; } /* slide layout 2 */ .cm_rules .layout2 .img1 { width: calc(75% + 1.71617842%); } .cm_rules .layout2 .img2 { width: 50%; left: 0%; } /* slide layout 3 */ .cm_rules .layout3 .img1 { width: 70%; } .cm_rules .layout3 .img2 { width: 50%; right: 40%; } /* slide layout 4 */ .cm_rules .layout4 .img1 { width: 50%; right: 50%; } .cm_rules .layout4 .img2 { width: 75%; } /* slide layout 5 */ .cm_rules .layout5 .img1 { width: calc(50% + 1.71617842%); right: 50%; } .cm_rules .layout5 .img2 { width: 60%; } .cm_rules .layout5 .img3 { width: 25%; right: calc(16.6666% - 1.71617842% - 1.71617842%); } /* slide layout 6 */ .cm_rules .layout6 .img1 { width: 100%; } /* slide layout 7 */ .cm_rules .layout7 .img1 { width: calc(70% + 0.9%); right: 2.4%; } .cm_rules .layout7 .img2 { width: 50%; right: 50%; } /* slide layout 8 */ .cm_rules .layout8 .img1 { width: 83.3334%; right: 8.3333%; } .cm_rules .layout8 .img2 { width: 50%; } /* ----------------------------------------------- Module: Videos ----------------------------------------------- */ .cm_videos .text { margin-bottom: 2.975rem; } /* ----------------------------------------------- Module: Textblöcke mit Icons ----------------------------------------------- */ .cm_text_and_icons .text_left { position: relative; top: 0; flex: 1 100%; margin-bottom: 2.975rem; } .cm_text_and_icons .icon_col { flex: 1 17%; margin: 0; } .cm_text_and_icons .text_col { flex: 1 80%; margin: 0; } .cm_text_and_icons .text_col .text { padding-left: 10px; } .cm_text_and_icons .line { left: 95%; } /* ----------------------------------------------- Module: Team ----------------------------------------------- */ .cm_team .col_left { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 2.975rem; } .cm_team .col_right { width: 100%; margin-right: 0; margin-left: 0; } .cm_team .team_item .team_img_wrap { width: 13.2rem !important; height: 13.2rem !important; } .cm_team .type_smaller, .cm_team h3 { /* same font size as body */ font-size: 1.375rem; line-height: 1.5454545; } .cm_team h3 { font-family:"univers_regular"; color: #000 !important; margin-bottom: 2.975rem; } .cm_text_and_icons .text_block .text { padding-bottom: 51px; } .cm_text_and_icons .last .line { height: calc(100% - 51px - 0.4rem); } .cm_team .logos { width: 96.56764316%; position: relative; bottom: auto; left: 1.71617842%; margin-top: 1.5rem; } /* ----------------------------------------------- Module: Next Page ----------------------------------------------- */ .cm_next_page .link_outer { width: 100%; margin-left: 0; margin-right: 0; /* same font size as body */ font-size: 1.375rem; line-height: 1.5454545; } .cm_next_page .descr { max-width: none; } .cm_next_page .arrow_onright { padding-right: 66px; } .cm_next_page .arrow_onright::after { width: 45px; } .cm_next_page .arrow_onright::after { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCA5Ij48cG9seWdvbiBwb2ludHM9IjI1LjQ4IDAgMjQuNjggMC44IDI3LjY5IDMuODEgMCAzLjgxIDAgNS4xIDI3Ljc4IDUuMSAyNC42OCA4LjIgMjUuNDggOSAyOS45OCA0LjUgMjUuNDggMCIgc3R5bGU9ImZpbGw6IzJiMzg4ZjtmaWxsLXJ1bGU6ZXZlbm9kZCIvPjwvc3ZnPg==) no-repeat; background-size: 45px 14px; background-position: 0px center; } /* ----------------------------------------------- Module: Grid links ----------------------------------------------- */ .cm_grid_links.layout1 .link_item, .cm_grid_links.layout2 .link_item { width: 100%; } .cm_grid_links .link_item_text { left: 4.6875%; bottom: 2.125rem; width: 90.625%; } /* ----------------------------------------------- Module: Kundenzitate todo margins ok? ----------------------------------------------- */ .cm_clients .cite { width: 100%; } /* ----------------------------------------------- Footer ----------------------------------------------- */ #footer { text-align: left; padding-top: 42px; padding-top: 2.625rem; padding-bottom: 35px; padding-bottom: 2.1875rem; } #footer * { font-size: 16px !important; line-height: 1.5 !important; } #footer_line1 .home { margin-right: 16px; margin-right: 1rem; } .no-touch #footer_line1 .home:hover { color: #4a4a4a !important; } #footer_line1 h2 { display: inline-block; width: auto; margin-bottom: 0; } #footer_line1 h3 { display: block; width: auto; margin-bottom: 0; } #footer_line2 { margin-top: 8px; margin-top: 0.5rem; } #footer_line2 p { color: #797979; display: block; vertical-align: top; margin: 0; } #footer_line2 p::after { content: ''; } #footer_line2 a { color: #797979; text-decoration: none !important; } .no-touch #footer a:hover { color: #2b388f !important; } } @media only screen and (max-width : 667px) { /* iphone 6 landscape */ } @media only screen and (max-width : 568px) { /* iphone 5 landscape */ } @media only screen and (max-width : 414px) { /* iphone 6+ portrait */ html { font-size: 71.4287%; } .type_verybig { font-size: 3.375rem; } .type_small { font-size: 0.9625rem; line-height: 1.54545; } } @media only screen and (max-width : 375px) { /* iphone 6 portrait */ } @media only screen and (max-width : 374px) { /* < iphone 6 portrait */ .type_verybig { font-size: 2.5rem; } } @media only screen and (max-width : 320px) { /* iphone 5 portrait */ }