/* open-sans-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-300italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('../fonts/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../fonts/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-500italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('../fonts/open-sans-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../fonts/open-sans-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../fonts/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-800italic - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('../fonts/open-sans-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1440px;} .coming-soon-content {font-family: 'Roboto Condensed'; font-weight: 400; font-size: 28px; color: #165537;} body {font-family: 'Open Sans'; font-weight: 300;} p {font-family: 'Open Sans'; font-weight: 200; color: #1A1A1A; font-size: 18px;} h1,h2,h3,h4,h5,h6 {font-family: 'Open Sans'; font-weight: 300;} li {font-size: 18px; font-weight: 200; color: #1A1A1A;} h1,h4,h6 {color: #2C5D73; line-height: 150%;} h2,h3,h5 {color: #4587A6; line-height: 150%;} adress {font-size: 12px;} a {font-family: 'Open Sans' !Important; font-weight: 400;} .breadcrumb { padding: 0.75rem 1rem; background-color: #ffffff !important; border-radius: 0;} .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-family: 'Open Sans'!Important; text-decoration: none; font-weight: 400; letter-spacing: 0px; font-size: 18px;} .article-list .article .article-header h1 a, .article-list .article .article-header h2 a { color: #4587A6; font-weight: 300;} .article-list .article .readmore a {display:inline-block; background-color:#ffffff; border: 1px solid #4587A6; color: #4587A6 !important;margin-bottom: 0;margin-top: 10px; padding: 10px !important; font-size: 20px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 400 !important; border-radius: 5px;} .article-list .article .readmore a:hover {background-color:#4587A6; border: 1px solid #4587A6; color: #ffffff !important;cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; } #sp-header.full-header { padding-left: 5px; padding-right: 5px;} body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, body.ltr .sp-megamenu-parent > li.sp-has-child > span::after { margin-left: 3px;} #sp-position1 h1 {color: #ffffff;} #sp-position1 h2 {color: #ffffff;} #sp-position1 h3 {color: #ffffff;} #sp-position1 h4 {color: #ffffff;} #sp-position1 p {color: #ffffff;} #sp-position2 h1 {color: #ffffff;} #sp-position2 h2 {color: #ffffff;} #sp-position2 h3 {color: #ffffff;} #sp-position2 h4 {color: #ffffff;} #sp-position2 p {color: #ffffff;} #sp-main-body {padding: 10px 0;} #sp-left .sp-module, #sp-right .sp-module { padding: 15px; } #sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {color: #165537; font-family: 'Open Sans'!important; font-weight: 400; font-size: 20px !important;} #sp-left .sp-module, #sp-right .sp-module {margin-top: 15px !important; border: 1px solid #cccccc !important; } #sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {margin: 0 0 10px; padding-bottom: 5px;} #sp-right .sp-module ul { padding-top: 20px !Important;} #sp-right .sp-module li { padding-top: 10px !Important; padding-bottom:10px !Important;} #sp-bottom p {font-weight: 300; color: #fff;} #sp-bottom .sp-module { margin-bottom: 10px;} #sp-bottom .sp-module .sp-module-title {font-weight: 300; font-size: 26px; margin: 0 0 10px; color: #fff;} #sp-bottom .sp-module .mostread ul {display: block; margin-bottom: 5px;} #sp-bottom .sp-module .mostread li {padding-top: 2px !Important; padding-bottom:2px !Important; font-size: 16px !important; margin-bottom: 2px !Important;} #sp-bottom .sp-module .latestnews ul {display: block; margin-bottom: 5px;} #sp-bottom .sp-module .latestnews li {padding-top: 2px !Important; padding-bottom:2px !Important; font-size: 16px !important; font-family: 'Open Sans'!Important; margin-bottom: 2px !Important;} #sp-bottom .sp-module-content .latestnews > li > a > span {color: #ffffff; margin-top: 1px !Important;font-size: 12px; font-family: 'Open Sans' !Important;} #sp-bottom .sp-module-content .latestnews > li > a > span { display: none !important;} #sp-bottom {padding: 30px 0 30px;} #sp-bottom .sp-module ul > li {margin-bottom: 0px !important; font-size: 16px !important; line-height: 22px !important;} #sp-bottom .sp-module ul > li > a {padding-bottom: 10px; display: block; white-space: nowrap; overflow: hidden;width: 100%;text-overflow: ellipsis; border-bottom: 1px dotted #C6C6C6; font-family: 'Open Sans' !Important; line-height: 22px;} .sp-module-content .latestnews > li > a { display: block; margin-top: 0px; font-size: 16px;} .sp-module-content .latestnews > li > a > span { display: none;} #sp-footer {font-size: 16px !important; font-weight: 400;} #sp-footer a {color: #ffffff !Important; font-size: 16px !important; font-weight: 400;} #sp-footer a:hover {color: #1A1A1A !Important; font-size: 16px !important;} #sp-menu ul.social-icons a {color: #4587A6 !Important;} #sp-menu ul.social-icons a:hover {color: #2C5D73 !Important;} #sp-title p {color: #ffffff; font-size: 16px; font-weight: 400;} .article-details .article-header h1 {font-size: 28px; border-bottom: 1px solid #4587A6; text-align: center;} .btn1 {display:inline-block; background-color:#4587A6;color: #ffffff !important;margin-bottom: 0;margin-top: 10px; padding: 10px !important; font-size: 20px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 400 !important; } .btn1:hover { background-color: #2C5D73;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} .btn2 { display:inline-block;background-color: #2C5D73;color: #ffffff !important;margin-bottom: 0; margin-top: 10px;padding: 10px !important; font-size: 20px !important; line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer; font-weight: 300 !important;-moz-transition: border 0.25s linear; -ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear; -webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear; font-weight: 400 !important;} .btn2:hover { background-color: #4587A6; color: #ffffff !important; -moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear; -o-transition: border 0.25s linear; transition: border 0.25s linear; -webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear; -ms-transition: background 0.25s linear; -o-transition: background 0.25s linear; transition: background 0.25s linear; } .btn2-big { display:inline-block;background-color: #4587A6;color: #ffffff !important;margin-bottom: 0; margin-top: 10px;padding: 20px !important; font-size: 24px !important; line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer; font-weight: 300 !important;-moz-transition: border 0.25s linear; -ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear; -webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear; font-weight: 400 !important;} .btn2-big:hover { background-color: #2C5D73; color: #ffffff !important; -moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear; -o-transition: border 0.25s linear; transition: border 0.25s linear; -webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear; -ms-transition: background 0.25s linear; -o-transition: background 0.25s linear; transition: background 0.25s linear; } .btn3 {display:inline-block; width: 100%;border: 1px solid #4587A6; background-color: none;color: #4587A6 !important;margin-bottom: 0;margin-top: 10px; padding: 10px !important; font-size: 20px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 300 !important; border-radius: 5px; } .btn3:hover { border: 1px solid #4587A6; background-color: #4587A6;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} .btn3-big {display:inline-block; width: 100%;border: 1px solid #ffffff; background-color: none;color: #ffffff !important;margin-bottom: 0;margin-top: 10px; padding: 20px !important; font-size: 24px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 300 !important; } .btn3-big:hover { background-color: #2C5D73;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} .btn4 {display:inline-block; width: 100%;border: 1px solid #ffffff;background-color: none;color: #ffffff !important;margin-bottom: 0;margin-top: 0; padding: 0px !important; font-size: 20px !important;line-height: 38px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 300 !important; border-radius: 5px;} .btn4:hover { border: 1px solid #ffffff;background-color: #2C5D73;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} /* Shine */ .shine-button { position: relative; overflow: hidden; } .shine-button:after { content:''; top:0; transform:translateX(100%); width:100%; height:220px; position: absolute; z-index:1; animation: slide 2s infinite; /* CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } /* shine animation */ @keyframes slide { 0% {transform:translateX(-100%);} 100% {transform:translateX(100%);} } /* button */ .blue-button {background-color: #4587A6;color: #ffffff;background-image: linear-gradient(180deg, #77B4D5 20%, #4587A6 80%); font-weight: 400; font-size: 24px; padding: 12px 20px; border-radius: 5px; margin: 5px; border-width: 0; display: inline-flex; align-items: center; box-shadow: 0 4px 12px 0 #4587A6; transition: all 0.5s ease; justify-content: center; text-align: center; text-decoration: none; position: relative; overflow: hidden; flex: 1;} .blue-button:hover {background-color: #2C5D73;color: #ffffff;background-image: linear-gradient(180deg, #4587A6 20%, #2C5D73 80%); box-shadow: 0 4px 12px 0 #2C5D73; transition: all 0.5s ease; justify-content: center; text-align: center; text-decoration: none; position: relative; overflow: hidden; flex: 1; transform: translateY(-2px);} .silver-button {background-color: rgb(69, 135, 166, 0); background-image: linear-gradient(180deg, #fefefe 20%, #9f9f9f 80%);font-weight: 400; font-size: 24px; padding: 12px 20px; border-radius: 5px; margin: 5px;border-width: 0; display: inline-flex; align-items: center; box-shadow: 0 4px 12px 0 #efefef; transition: all 0.5s ease; justify-content: center; text-align: center;text-decoration: none; position: relative; overflow: hidden; flex: 1;color: #4587A6 !important;} .silver-button:hover { background-image: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%); box-shadow: 0 6px 18px rgba(160, 160, 160, 0.5); transform: translateY(-2px); color: #2C5D73 !important;} .gold-button { background-color: rgba(255, 215, 0, 0); /* transparent */ color: #252525; background-image: linear-gradient(180deg, #fff8dc 20%, #d4af37 80%); font-weight: 400; font-size: 24px; padding: 12px 20px; border-radius: 5px; margin: 5px; border-width: 0; display: inline-flex; align-items: center; box-shadow: 0 4px 12px 0 rgba(212, 175, 55, 0.3); /* Goldschatten */ transition: all 0.4s ease; justify-content: center; text-align: center; text-decoration: none; position: relative; overflow: hidden; flex: 1;} .gold-button:hover { background-image: linear-gradient(180deg, #ffe680 0%, #b8860b 100%); color: #ffffff; box-shadow: 0 6px 16px rgba(184, 134, 11, 0.6); transform: translateY(-2px);} .scale1:hover {-webkit-transform:scale(1.2);transform:scale(1.2);} .scale1 {-webkit-transition: all 0.7s ease;transition: all 0.7s ease;} .article-list .article { margin-bottom: 30px; padding: 20px; border: 1px solid #cccccc; margin-top: 20px !Important; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);} .camera_caption > div { background: none !important;} .visform .btn { border: 0px solid #999 !important; border-radius: 0px;} .jtcs_item_wrapper .jt-title {text-align: center !Important;} .col-12 {padding-bottom: 10px !important;} .form-control {color: #106B73 !important; border: 1px solid #ccc!important;} .btn {--bs-btn-border-width: 0px !Important; --bs-btn-border-radius: 0px !Important; --bs-btn-font-size: 20px; !Important; } .buttonpadding10 {min-width: 75% !important;} .mfp_default_skin_default .mfp_default_item .mfp_default_title a {font-weight: 500 !important; font-size: 1em !important;} .mfp_default_skin_default .mfp_default_item .mfp_introtext { font-size: 18px !important; padding: 0; display: block; margin: .7em 0 0 0; color: #1A1A1A;} .mfp_default_skin_default .mfp_default_item .mfp_date, .mfp_default_skin_default .mfp_default_item .mfp_author { font-size: .9em; color: #666; display: inline;} .readmore a {color: #1a1a1a; font-weight: 500; font-size: 18px !important; text-align: right} .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .layout { width: 100%; display: flex; gap: 30px; justify-content: center;} .box { flex-grow: 1;min-width:440px; max-width: 50%} .layout-box {text-align: center !important; flex-wrap: wrap; -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-flex;display: -ms-flex; display: flex;justify-content: center;} .container-1-base {padding-left:0;padding-right: 0; width:100%; float:left; } .container-1-blue {padding-left:1%;padding-right: 1%; width:98%; float:left; background-color: #3BABBB; border-radius: 5px; } .container-1-blue h2 {color: #ffffff;} .container-2-base {margin: 1%; padding-left:5%;padding-right: 5%; width:48%; text-align: center; padding-top: 1%;} .container-2-base img {width:100%; text-align: center; border-radius: 5px; } .container-2-line {width:48%; border:1px solid #cccccc; padding-top: 20px; justify-content: center; text-align: center; margin-left: 1%; margin-right: 1%; padding-left:1%;padding-right: 1%; padding-bottom: 20px; border-radius: 5px; } .container-2-blue {margin: 1%;padding-left:1%;padding-right: 1%;width:48%; float:left; padding-top: 20px; background-color: #3BABBB; border-radius: 5px; } .container-2-base-1 {width:29%; text-align: center;} .container-2-base-1 img {width:100%; text-align: center; border-radius: 5px; } .container-2-line-1 {width:68%; border:1px solid #cccccc; padding-top: 10px; text-align: left; padding-left:1%;padding-right: 1%; padding-bottom: 10px; border-radius: 5px; margin-left: 1%; margin-right: 1%; } .container-2-blue p {color: #ffffff;} .container-2-blue h2 {color: #ffffff;} .container-3-blue {margin-top: 20px; padding-top: 10px; padding-left:10px;padding-right: 10px; background-color: #106B73; text-align: left; width: 90%; margin-left: 5%; margin-right: 5%;border-radius: 5px; padding-bottom:1px;} .container-3-blue p {color: #ffffff;} .box-1 {border: solid 1px #3BABBB;border-radius: 5px; vertical-align:top;display: inline-block;text-align:center;width:23%; float:left;margin: 1%; } .box-1 h3{ background-color: #3BABBB; color: #ffffff; font-size: 24px !important; padding-top: 10px; padding-bottom: 10px;} .box-1 h1{ background-color: #3BABBB; color: #ffffff; font-size: 28px !important; padding-top: 10px; padding-bottom: 10px;} .box-1 img {width: 100%; padding: 0 !important;} .box-1 p{font-size: 18px;margin-top: 5px;margin-bottom: 5px;padding: 0.5%; font-weight: 300;} .box-1 li{font-size: 16px;text-align:left;line-height: 150%;font-weight: 300; padding:2px;} .bild-corners { border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0;} .bild-drop { border-radius: 150px 150px 150px 0; -moz-border-radius: 150px 150px 150px 0; -webkit-border-radius: 150px 150px 150px 0;} .bild-300 { border-radius: 300px; -moz-border-radius: 300px; -webkit-border-radius: 300px } .freeform {border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; background-color: white; width:200px; height:200px;} .bild-rund {border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;} .freebanner {border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; background-color: white; width:1400px; height:500px;} .freebannerani {width: 1400px;height: 500px;background-color: white; /* Startform */ border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* Animation */ animation: fluidShape 8s ease-in-out infinite alternate; transition: border-radius 1s ease;} /* Keyframes für organische Veränderung */ @keyframes fluidShape { 0% { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; } 25% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; } 50% { border-radius: 50% 50% 60% 40% / 40% 50% 60% 50%; } 75% { border-radius: 65% 35% 45% 55% / 55% 45% 50% 50%; } 100% { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; } } .freebannerani1 { width: 1400px; height: 500px; background-color: white; overflow: hidden; /* Start: leicht abgerundet (rechteckig mit runden Ecken) */ border-radius: 5% 5% 5% 5% ; /* Animation */ animation: morphToEllipse 6s ease-in-out infinite alternate; transition: border-radius 1s ease; } @keyframes morphToEllipse { 0% { /* Startform – rechteckig mit runden Ecken */ border-radius: 5% 5% 5% 5% / 5% 5% 5% 5% ; } 50% { /* Zwischenform – stärker gerundet, wirkt organischer */ border-radius: 40% 60% 60% 40% / 50% 40% 40% 50%; } 100% { /* Ziel: elliptische Form */ border-radius: 50% / 50%; } } .textblock-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; box-sizing: border-box; max-width: 100%; } /* Basis-Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Textblock-Stil */ .textblock { background: #ffffff; border: 1px solid #4587A6; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); padding: 24px; width: calc(50% - 10px); /* 2-Spalten-Logik */ /* Animation ohne JS */ opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; } .textblock2-1 { background: none; padding: 0; margin-top: -20px; width: calc(30% - 10px); /* 2-Spalten-Logik */ /* Animation ohne JS */ opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; } .textblock2-2 { background: none; padding: 0; width: calc(70% - 10px); /* 2-Spalten-Logik */ /* Animation ohne JS */ opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; } .textblock3 { background: #ffffff; border: 1px solid #4587A6; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); padding: 24px; width: calc(33% - 10px); /* 3-Spalten-Logik */ /* Animation ohne JS */ opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; } /* Automatische Verzögerungen via nth-child */ .textblock:nth-child(1) { animation-delay: 0s; } .textblock:nth-child(2) { animation-delay: 0.2s; } .textblock:nth-child(3) { animation-delay: 0.4s; } .textblock:nth-child(4) { animation-delay: 0.6s; } .textblock:nth-child(5) { animation-delay: 0.8s; } .textblock:nth-child(6) { animation-delay: 1.0s; } /* usw. bei Bedarf erweiterbar */ /* Immer volle Breite */ .textblock.fullwidth { width: 100% !important; } /* Mobil: alle Blöcke 100 % Breite */ @media (max-width: 1024px) { .textblock:not(.fullwidth) { width: 100%;} .textblock2-1 {width: 100%;} .textblock2-2 {width: 100%;} } .referenz-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 25px 00px; box-sizing: border-box; } .referenz-container1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 25px 0px; box-sizing: border-box; } .referenz-box { background: #ffffff; border: 1px solid #4587A6; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); padding: 60px 20px 20px; /* Platz oben für Bild */ position: relative; margin-top: 40px; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s ease-out forwards; display: flex; /* Inhalt vertikal anordnen */ flex-direction: column; box-sizing: border-box; } .textblock .btn-bottom, .textblock button.btn-bottom, .textblock a.btn-bottom { display: inline-block; /* wichtig für , damit margin-top wirkt */ margin-top: auto; /* schiebt das Element an das untere Ende */ align-self: flex-start; /* optional: linksbündig */ } .referenz-box .btn-bottom {margin-top: auto; display:inline-block; width: 100%;border: 1px solid #4587A6; background-color: none;color: #4587A6 !important;margin-bottom: 0;margin-top: 10px; padding: 10px !important; font-size: 20px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 300 !important; border-radius: 5px; } .referenz-box .btn-bottom:hover { border: 1px solid #4587A6; background-color: #4587A6;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} .referenz-box:nth-child(1) { animation-delay: 0s; } .referenz-box:nth-child(2) { animation-delay: 0.2s; } .referenz-box:nth-child(3) { animation-delay: 0.4s; } .referenz-box:nth-child(4) { animation-delay: 0.6s; } .referenz-box:nth-child(5) { animation-delay: 0.8s; } .referenz-box:nth-child(6) { animation-delay: 1.0s; } .referenz-box:nth-child(7) { animation-delay: 1.2s; } .referenz-box:nth-child(8) { animation-delay: 1.4s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Bildcontainer rund, zentriert */ .referenz-image { width: 50%; max-width: 200px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); background: #fff; } /* Bild füllt runde Fläche automatisch */ .referenz-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .referenz-nummer { width: 100%; height: 10px; /* oder variabel */ position: absolute; top: -40px; align-items: center; justify-content: center; } .referenz-nummer-text { width: 11vmin; /* Kreisgröße (responsiv) width: 10vmin; */ aspect-ratio: 1 / 1; /* Quadrat mit automatischer Höhe */ border-radius: 50%; /* rund */ background-color: #4587A6; color: white; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; line-height: 1; font-size: 8vmin; /* Skalierbar – besser als cqw für Kompatibilität */ padding: 0; /* kein Innenabstand */ overflow: hidden; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* Text */ .referenz-box h2 { margin-top: 0px; font-weight: 300; text-align: left; } .referenz-box h4 { margin-top: 120px; font-size: 24px; font-weight: 400; text-align: center; } .referenz-box p { margin-top: 6px; font-size: 18px; } /* Mobil: 1 Spalte */ @media (max-width: 1023px) { .referenz-container { grid-template-columns: 1fr; } .referenz-container1 { grid-template-columns: 1fr; } } .blog-entry.border {border: 1px solid #4587A6 !important; border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); } .blog-entry.border .entry-content {border: 0px !important; } .entry-title a {font-size: 18px;} .blog-entry.border .entry-content :hover {border: 0px !important; } .blog-entry-image {display: none;} .entry-content {margin: 10px; margin-top: 10px; margin-top: 10px !important; background: #fff; position: relative; padding: 20px;} .entry-description a {display:inline-block; width: 100%;border: 1px solid #4587A6; background-color: none;color: #4587A6 !important;margin-bottom: 0;margin-top: 10px; padding: 10px !important; font-size: 20px !important;line-height: 28px !important;text-align: center;vertical-align: middle; cursor: pointer;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear; transition: border 0.25s linear;-webkit-transition: background 0.25s linear;-moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear;transition: background 0.25s linear; font-weight: 300 !important; } .entry-description a:hover { border: 1px solid #4587A6; background-color: #4587A6;color: #ffffff !important;-moz-transition: border 0.25s linear;-ms-transition: border 0.25s linear;-o-transition: border 0.25s linear;transition: border 0.25s linear;-webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear;-ms-transition: background 0.25s linear;-o-transition: background 0.25s linear; transition: background 0.25s linear;} .animated-button { position: relative; display: inline-block; padding: 14px 28px; font-size: 20px; font-weight: 500; color: #ffffff; background: linear-gradient(135deg, #4587A6, #2C5D73); border: none; border-radius: 5px; cursor: pointer; text-transform: uppercase; overflow: hidden; box-shadow: 0 0 20px rgba(69, 135, 166, 0.4); transition: all 0.4s ease; animation: pulseGlow 3s infinite ease-in-out; } /* Glänzender Wipe-Effekt */ .animated-button::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); animation: shimmer 3s infinite; z-index: 1; } /* Text oben halten */ .animated-button span { position: relative; z-index: 2; } /* Hover: neue Farbe + größer + Schatten + Radius */ .animated-button:hover { background: linear-gradient(135deg, #ffffff, #c0c0c0); color: #2C5D73; box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 20px rgba(44, 93, 115, 0.5); border-radius: 20px; transform: scale(1.05); } /* Dauerhafte pulsierende Helligkeit */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(69, 135, 166, 0.4); } 50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); } } /* Glanzstreifen-Animation */ @keyframes shimmer { 0% { left: -75%; } 100% { left: 125%; } } .freeform-button { position: relative; display: inline-block; padding: 14px 28px; font-size: 18px; font-weight: 600; color: #ffffff; background: linear-gradient(135deg, #4587A6, #2C5D73); border: none; border-radius: 12px; cursor: pointer; overflow: hidden; text-transform: uppercase; transition: all 0.6s ease-in-out; box-shadow: 0 0 20px rgba(69, 135, 166, 0.4); animation: pulseGlow 3s infinite ease-in-out; } /* Glanz-Wipe-Effekt */ .freeform-button::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); animation: shimmer 3s infinite; z-index: 1; } .freeform-button span { position: relative; z-index: 2; } /* 🧬 Hover: Verwandlung in "Freeform" mit asymmetrischem border-radius */ .freeform-button:hover { background: linear-gradient(135deg, #ffffff, #c0c0c0); color: #2C5D73; border-radius: 70% 30% 50% 50% / 40% 60% 30% 70%; box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 20px rgba(44, 93, 115, 0.5); transform: scale(1.05); } /* Dauerhafter Glow */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(69, 135, 166, 0.4); } 50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); } } /* Glanzanimation */ @keyframes shimmer { 0% { left: -75%; } 100% { left: 125%; } } .entry-description {hyphens: auto;} .advent-grid {display: grid; grid-template-columns: repeat(6,minmax(100px,1fr)); gap: .5rem;} .advent-grid figure {margin: 0;} .advent-link {padding: 0; text-decoration: none; color: currentColor; width: 100%; height: 100%; } .mod-articles-advent-item-content {aspect-ratio: 1;transition: all .2s ease-in-out; display: flex; justify-content: center; align-items: center; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16);} .mod-articles-advent-item-content:hover {transform: scale(1.025);} .mod-articles-advent-item-content span {font-size: 4rem; color: #fff;} @media (max-width: 768px) { .advent-grid { grid-template-columns: repeat(3,minmax(80px,1fr)); } }