/** clearing **/ .clear {clear: both; font-size: 0.1px; height: 0.1px; line-height: 0.1px; float: none; display: table;} /** block grid **/ .autogrid, .autogrid:before,.autogrid:after {-moz-box-sizing: border-box; box-sizing:border-box;} .autogrid {padding-left: 1%; padding-right: 1%; position: relative; display: block; float: left;overflow: hidden;} /** block grid wrapper **/ .autogrid_wrapper {margin-left: -1%; margin-right: -1%;} /** non block **/ .autogrid:not(.block) {padding-left: 0; padding-right: 0; margin-left: 1%; margin-right: 1%;} /* .block.autogrid.first, .block.autogrid:first-child {margin-left: -1%;} */ /* .block.autogrid.last, .block.autogrid:last-child {margin-right: -1%;} */ /** Non block grid **/ .full {width: 98%;} .one_half {width: 48%;} .one_third {width: 31.3333%;} .one_fourth {width: 23%;} .one_fifth {width: 18%;} .one_sixth {width: 14.6667%;} /** Block grid **/ .block.full {width: 100%;} .block.one_half {width: 50%;} .block.one_third {width: 33.3333%;} .block.one_fourth {width: 25%;} .block.one_fifth {width: 20%;} .block.one_sixth {width: 16.6667%;} .block.two_third {width: 66.6667%;} .block.two_fourth {width: 50%;} .block.three_fourth {width: 75%;} .block.two_fifth {width: 40%;} .block.three_fifth {width: 60%;} .block.four_fifth {width: 80%;} .block.two_sixth {width: 33.3333%;} .block.three_sixth {width: 49.9999%;} .block.four_sixth {width: 66.6667%;} .block.five_sixth {width: 83.3333%;} /** Non block grid system **/ /** odd split: 2 elements per row **/ .n2:not(.block).one_third {width: 32%;} .n2:not(.block).two_third {width: 64%;} .n2:not(.block).one_fourth {width: 24%;} .n2:not(.block).two_fourth {width: 48%;} .n2:not(.block).three_fourth {width: 72%;} .n2:not(.block).one_fifth {width: 19.2%;} .n2:not(.block).two_fifth {width: 38.4%;} .n2:not(.block).three_fifth {width: 57.6%;} .n2:not(.block).four_fifth {width: 76.8%;} .n2:not(.block).one_sixth {width: 16%;} .n2:not(.block).two_sixth {width: 32%;} .n2:not(.block).three_sixth {width: 48%;} .n2:not(.block).four_sixth {width: 64%;} .n2:not(.block).five_sixth {width: 80%;} /** odd split: 3 elements per row **/ .n3:not(.block).one_half {width: 47%;} .n3:not(.block).two_third {width: 62.6667%;} .n3:not(.block).one_fourth {width: 23.5%;} .n3:not(.block).two_fourth {width: 47%;} .n3:not(.block).three_fourth {width: 70.5%;} .n3:not(.block).one_fifth {width: 18.8%;} .n3:not(.block).two_fifth {width: 37.6%;} .n3:not(.block).three_fifth {width: 56.4%;} .n3:not(.block).four_fifth {width: 75.2%;} .n3:not(.block).one_sixth {width: 15.6667%;} .n3:not(.block).two_sixth {width: 31.3333%;} .n3:not(.block).three_sixth {width: 47%;} .n3:not(.block).four_sixth {width: 62.6667%;} .n3:not(.block).five_sixth {width: 78.3333%;} /** odd split: 4 elements per row **/ .n4:not(.block).one_half {width: 46%;} .n4:not(.block).one_third {width: 30.6667%;} .n4:not(.block).two_third {width: 61.3333%;} .n4:not(.block).two_fourth {width: 46%;} .n4:not(.block).three_fourth {width: 69%;} .n4:not(.block).one_fifth {width: 18.4%;} .n4:not(.block).two_fifth {width: 36.8%;} .n4:not(.block).three_fifth {width: 55.2%;} .n4:not(.block).four_fifth {width: 73.6%;} .n4:not(.block).one_sixth {width: 15.3333%;} .n4:not(.block).two_sixth {width: 30.6667%;} .n4:not(.block).three_sixth {width: 46%;} .n4:not(.block).four_sixth {width: 61.3333%;} .n4:not(.block).five_sixth {width: 76.6667%;} /** odd split: 5 elements per row **/ .n5:not(.block).one_half {width: 45%;} .n5:not(.block).one_third {width: 30%;} .n5:not(.block).two_third {width: 60%;} .n5:not(.block).one_fourth {width: 22.5%;} .n5:not(.block).two_fourth {width: 45%;} .n5:not(.block).three_fourth {width: 67.5%;} .n5:not(.block).two_fifth {width: 36%;} .n5:not(.block).three_fifth {width: 54%;} .n5:not(.block).four_fifth {width: 72%;} .n5:not(.block).one_sixth {width: 15%;} .n5:not(.block).two_sixth {width: 30%;} .n5:not(.block).three_sixth {width: 45%;} .n5:not(.block).four_sixth {width: 60%;} .n5:not(.block).five_sixth {width: 75%;} /** odd split: 6 elements per row **/ .n6:not(.block).one_half {width: 44%;} .n6:not(.block).one_third {width: 29.3333%;} .n6:not(.block).two_third {width: 58.6667%;} .n6:not(.block).one_fourth {width: 22%;} .n6:not(.block).two_fourth {width: 44%;} .n6:not(.block).three_fourth {width: 66%;} .n6:not(.block).one_fifth {width: 17.6%;} .n6:not(.block).two_fifth {width: 35.2%;} .n6:not(.block).three_fifth {width: 52.8%;} .n6:not(.block).four_fifth {width: 70.4%;} .n6:not(.block).two_sixth {width: 29.3333%;} .n6:not(.block).three_sixth {width: 44%;} .n6:not(.block).four_sixth {width: 58.6667%;} .n6:not(.block).five_sixth {width: 73.3333%;} .border-inner {border-left: 1px solid #ddd;} .border-inner.first, .border-inner:first-child {border-left: 0;} .border-inner.last, .border-inner:last-child {border-right: 0;} /** optical correction **/ /* .autogrid.block.border-inner {margin-left: -0.75%; padding-left: 1.75%;} */ /** grid options **/ .autogrid.break {clear:left; margin-left: 0;} .autogrid.full.break {width: 100%;clear:both;float: none;padding-left: 0;padding-right: 0;} /** same height **/ .autogrid.same-height {display: table-cell; float: none; vertical-align: top;} /** flexible same height **/ .autogrid_wrapper.same-height, .autogrid_wrapper .inner.same-height {display: flex; display: -webkit-flex; display: -ms-flexbox; height: 100%; clear: both;} /** autogrid full **/ .autogrid.full {padding-left: 0; padding-right: 0;} .autogrid_wrapper .autogrid.full {padding-left: 1%; padding-right: 1%;} /** no gutter **/ .autogrid_wrapper.no_gutter {margin-left: 0; margin-right: 0;} .autogrid.no_gutter {padding-left: 0; padding-right: 0;} /** tablets **/ @media only screen and (min-width: 768px) and (max-width: 990px) { .autogrid.adjust_mobile {width: 50% !important} } /** phones **/ @media only screen and (max-width: 767px) { .autogrid {width: 100%!important;} .autogrid.same-height, .autogrid_wrapper.same-height, .autogrid_wrapper .inner.same-height {display: block;} .border-inner {border-left: 0;} .ce_autogridSpacer {margin: 0!important; line-height: 0!important;} } /* SyntaxHighlighter 3.0.83, (c) 2004-2010 Alex Gorbatchev, http://alexgorbatchev.com/SyntaxHighlighter */ .syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea{-moz-border-radius:0 0 0 0 !important;-webkit-border-radius:0 0 0 0 !important;background:none !important;border:0 !important;bottom:auto !important;float:none !important;height:auto !important;left:auto !important;line-height:1.1em !important;margin:0 !important;outline:0 !important;overflow:visible !important;padding:0 !important;position:static !important;right:auto !important;text-align:left !important;top:auto !important;vertical-align:baseline !important;width:auto !important;box-sizing:content-box !important;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;font-weight:normal !important;font-style:normal !important;font-size:1em !important;min-height:inherit !important;min-height:auto !important}.syntaxhighlighter{width:100% !important;margin:1em 0 1em 0 !important;position:relative !important;overflow:auto !important;font-size:1em !important}.syntaxhighlighter.source{overflow:hidden !important}.syntaxhighlighter .bold{font-weight:bold !important}.syntaxhighlighter .italic{font-style:italic !important}.syntaxhighlighter .line{white-space:pre !important}.syntaxhighlighter table{width:100% !important}.syntaxhighlighter table caption{text-align:left !important;padding:.5em 0 .5em 1em !important}.syntaxhighlighter table td.code{width:100% !important}.syntaxhighlighter table td.code .container{position:relative !important}.syntaxhighlighter table td.code .container textarea{box-sizing:border-box !important;position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;border:none !important;background:white !important;padding-left:1em !important;overflow:hidden !important;white-space:pre !important}.syntaxhighlighter table td.gutter .line{text-align:right !important;padding:0 .5em 0 1em !important}.syntaxhighlighter table td.code .line{padding:0 1em !important}.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0 !important}.syntaxhighlighter.show{display:block !important}.syntaxhighlighter.collapsed table{display:none !important}.syntaxhighlighter.collapsed .toolbar{padding:.1em .8em 0 .8em !important;font-size:1em !important;position:static !important;width:auto !important;height:auto !important}.syntaxhighlighter.collapsed .toolbar span{display:inline !important;margin-right:1em !important}.syntaxhighlighter.collapsed .toolbar span a{padding:0 !important;display:none !important}.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline !important}.syntaxhighlighter .toolbar{position:absolute !important;right:1px !important;top:1px !important;width:11px !important;height:11px !important;font-size:10px !important;z-index:10 !important}.syntaxhighlighter .toolbar span.title{display:inline !important}.syntaxhighlighter .toolbar a{display:block !important;text-align:center !important;text-decoration:none !important;padding-top:1px !important}.syntaxhighlighter .toolbar a.expandSource{display:none !important}.syntaxhighlighter.ie{font-size:.9em !important;padding:1px 0 1px 0 !important}.syntaxhighlighter.ie .toolbar{line-height:8px !important}.syntaxhighlighter.ie .toolbar a{padding-top:0 !important}.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:none !important}.syntaxhighlighter.printing .line .number{color:#bbb !important}.syntaxhighlighter.printing .line .content{color:black !important}.syntaxhighlighter.printing .toolbar{display:none !important}.syntaxhighlighter.printing a{text-decoration:none !important}.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{color:black !important}.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{color:#008200 !important}.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{color:blue !important}.syntaxhighlighter.printing .keyword{color:#069 !important;font-weight:bold !important}.syntaxhighlighter.printing .preprocessor{color:gray !important}.syntaxhighlighter.printing .variable{color:#a70 !important}.syntaxhighlighter.printing .value{color:#090 !important}.syntaxhighlighter.printing .functions{color:#ff1493 !important}.syntaxhighlighter.printing .constants{color:#06c !important}.syntaxhighlighter.printing .script{font-weight:bold !important}.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{color:gray !important}.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{color:#ff1493 !important}.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{color:red !important}.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{color:black !important}.syntaxhighlighter{margin:0 !important;background-color:#eee !important}.syntaxhighlighter .line{line-height:1.25 !important}.syntaxhighlighter .line.alt1{background-color:#fff !important}.syntaxhighlighter .line.alt2{background-color:#fcfcfc !important}.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{background-color:#ffc !important}.syntaxhighlighter .line.highlighted.number{color:black !important}.syntaxhighlighter table caption{color:black !important}.syntaxhighlighter .gutter{color:#afafaf !important}.syntaxhighlighter .gutter .line{border-right:3px solid #6ce26c !important}.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c !important;color:white !important}.syntaxhighlighter.printing .line .content{border:none !important}.syntaxhighlighter.collapsed{overflow:visible !important}.syntaxhighlighter.collapsed .toolbar{color:blue !important;background:white !important;border:1px solid #6ce26c !important}.syntaxhighlighter.collapsed .toolbar a{color:blue !important}.syntaxhighlighter.collapsed .toolbar a:hover{color:red !important}.syntaxhighlighter .toolbar{color:white !important;background:#6ce26c !important;border:none !important}.syntaxhighlighter .toolbar a{color:white !important}.syntaxhighlighter .toolbar a:hover{color:black !important}.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:#000 !important}.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#808080 !important}.syntaxhighlighter .string,.syntaxhighlighter .string a{color:#008200 !important}.syntaxhighlighter .keyword{color:#069 !important}.syntaxhighlighter .preprocessor{color:gray !important}.syntaxhighlighter .variable{color:#700 !important}.syntaxhighlighter .value{color:#090 !important}.syntaxhighlighter .functions{color:#000 !important}.syntaxhighlighter .constants{color:#069 !important}.syntaxhighlighter .script{font-weight:bold !important;color:#069 !important;background-color:none !important}.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:#808080 !important}.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#909 !important}.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:#909 !important}.syntaxhighlighter .keyword{font-weight:bold !important} /* ColorBox, (c) 2011 Jack Moore, MIT license */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url("../../assets/jquery/colorbox/1.6.1/images/loading.gif") no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url("../../assets/jquery/colorbox/1.6.1/images/controls.png") no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} /** * Contao Open Source CMS * * Copyright (c) 2005-2015 Leo Feyer * * @license LGPL-3.0+ */ table.sortable thead th { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/default.gif"); background-repeat:no-repeat; background-position:center right; } table.sortable thead th.headerSortDown { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/asc.gif"); } table.sortable thead th.headerSortUp { background-image:url("../../assets/jquery/tablesorter/2.0.5/images/desc.gif"); } /* ============================================================================= * Gerald Keil 19.02.2023: * 2023-02-19 separate css file with dynamic file name (default browser cache for customize.css is one year!!!) * Implementation: Eclipse / Seitenlayouts / Content-Page - Full Width / Stylesheets / Externe Stylesheets / Auswahl ändern * ========================================================================== */ /* ============================================================================= * Buttons, Hypertext * ========================================================================== */ .ce_hyperlink a, a.btn, input.submit.cyd-wide-button, .cyd-wide-button input.submit, .formbody { font-size: 1.3rem; font-weight: normal; /* 2018-03-21 hyperlink font-size, font-weight original: 0.9, bold */ } .cyd-wide-button input.submit { margin-top:15px; } /* 2023-03-31 space above "Send" button ("Thank you"-page) original: - */ .cyd-wide-button:hover { opacity: 0.75; } /* 2018-03-21 lighter button on hover original: - */ /* ============================================================================= * Miscellaneous * ========================================================================== */ .cyd-center-horizontally-60 { padding-left: 20% !important; padding-right: 20% !important; } /* 2025-07-12 center items horizontally 70% of width */ .cyd-center-horizontally-70 { padding-left: 15% !important; padding-right: 15% !important; } /* 2025-07-12 center items horizontally 70% of width */ .cyd-center-horizontally-80 { padding-left: 10% !important; padding-right: 10% !important; } /* 2025-07-12 center items horizontally 80% of width */ .cyd-center-horizontally-90 { padding-left: 5% !important; padding-right: 5% !important; } /* 2025-07-12 center items horizontally 90% of width */ /* ============================================================================= * Gerald Keil 02.11.2022: Google Webfonts local, see C:\xampp\htdocs\coyodo-com_contao-3-5\files\cto_layout\fonts * see uncomment Google web fonts in C:\xampp\htdocs\coyodo-com_contao-3-5\system\modules\core\pages\PageRegular.php * ========================================================================== */ /* source-sans-pro-300 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-700 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* playfair-display-regular - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ }/* playfair-display-italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; src: url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-700italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../files/cto_layout/fonts/playfair-display-v30-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* ============================================================================= * Gerald Keil 17.02.2023 Company Logos non-stop (Carousel) * CodePen [CSS] Infinite autoplay carousel * see https://codepen.io/studiojvla/pen/qVbQqW * see Articel Home / DE Unsere Champions / Inhaltselement HTML * ========================================================================== */ :root { /* CAUTION: logo css style width (px, height=100px) is half of png file width (px, height=200px) */ --BELIMO: 350px; /* png file width 700px */ --CLAAS: 425px; /* png file width 850px */ --ETIMEX: 350px; /* png file width 700px */ --EVERLLENCE: 425px; /* png file width 850px */ --KUENZ: 280px; /* png file width 560px */ --LEYBOLD: 400px; /* png file width 800px */ --PINION: 375px; /* png file width 750px */ --STAIGER: 525px; /* png file width 1050px */ --STIHL: 400px; /* png file width 800px */ --THK: 275px; /* png file width 550px */ --ZAMA: 400px; /* png file width 800px */ --Success: 365px; /* png file width 730px */ --TotalLogoWidth: calc( var(--BELIMO) + var(--CLAAS) + var(--ETIMEX) + var(--EVERLLENCE) + var(--KUENZ) + var(--LEYBOLD) + var(--PINION) + var(--STAIGER) + var(--STIHL) + var(--THK) + var(--ZAMA) + var(--Success) ); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(var(--TotalLogoWidth) * -1)); } } .slider { background: white; height: 100px; margin: auto; overflow: hidden; position: relative; width: 1160px; } .slider::after { right: 0; top: 0; transform: rotateZ(180deg); } .slider::before { left: 0; top: 0; } .slider .slide-track { animation: scroll 20s linear infinite; display: flex; width: calc(var(--TotalLogoWidth) * 2); } .slider .slide { height: 100px; } /* ============================================================================= * Gerald Keil 13.11.2023: Cloud Table (Compare Cloud Server with Company Server) * see Articel Home / DE Unsere Champions / Inhaltselement HTML * ========================================================================== */ .cloud-table-grid { display: grid; /* grid-template-columns: auto minmax(12%, auto) auto; */ grid-template-columns: 49% 8% 41%; /* Sum = 98% */ grid-gap: 1%; /* 2 x 1% = 2%; total 100% parent width */ } .cloud-table-title:nth-child(1), .cloud-table-title:nth-child(2) { margin-bottom: 10px; padding: 30px 10px; font-size: 30px; color: #909; display: flex; height: 100px; justify-content: center; align-items: center; } .cloud-table-grid > div { text-align: center; padding: 10px 10px; } .cloud-column2-wide { grid-column: 2 / 4; } .cloud-column1-wide { grid-column: 1 / 3; } .cloud-table-title { } .cloud-table-item { font-size: 20px; } .cloud-table-cloud { background-color: #F2F2F2; } .cloud-table-company { background-color: #E0E0E0; } /* ============================================================================= * purple parallelogram with white text * ========================================================================== */ .parallelogram { padding-left: 10px; padding-right: 10px; margin-left: 22px; display: inline-block; background: #909; transform: skewX(-30deg); } .parallelogram-text h1{ padding-left: 10px; padding-right: 10px; margin-bottom: 0px; transform: initial; color: white; transform: skewX(30deg); } .parallelogram-follow { margin-left: 12px; display: inline-block; }