./* --------------- (c) 2017 alogis ag / beat schaub ----------------------------------------------------------------------------------------------------------------- */ @charset "utf-8"; /* --------------- Colors & Z-Stack ------------------------------------------------------------------------------------------------------------------------------------ green #00882F red #00882F ------------------ End Colors --------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- Skelleton ---------------------------------------------------------------------------------------------------------------------------------------- */ html { } body { padding: 0 47px 0 0 !important; font-family: 'Blinker', sans-serif; font-size: 16px; line-height: 1.5; background: #ffffff !important; } .container { max-width: 1100px; margin: 0 auto; } .cat_wide .container { max-width: 1576px; } .container_wide { max-width: 1873px; margin: 0 auto; } .mobile { display: none !important; } .flex_container { display: flex; justify-content: space-between; flex-wrap: wrap; align-self: flex-start; width: 100%; } .flex_container.flex_container_center { justify-content: center; } .flex_box { } .flex_box_empty { margin: 0 !important; padding: 0 !important; border: 0 !important; } .flex_box.art img { width: 100.0%; } .flex_box_100 { width: 100.0%; } .flex_box_75 { width: 74.0%; } .flex_box_66 { width: 64.7%; } .flex_box_50 { width: 48.0%; } .flex_box_33 { width: 29.4%; } .flex_box_25 { width: 22.0%; } .flex_box_20 { width: 16.7%; } .flex_box_16 { width: 14%; } .flex_box_3.flex_box_width_1 { width: 29.4%; } .flex_box_3.flex_box_width_2 { width: 64.7%; } .flex_box_3.flex_box_width_3 { width: 100.0%; } .flex_box_2.flex_box_width_1 { width: 47.0%; } .flex_box_2.flex_box_width_2 { width: 100.0%; } .flex_box_1 { width: 100.0%; } span.bullet { display: block; position: relative; padding: 5px 0 20px 50px; line-height: 25px; } span.bullet:after { display: block; content: "\f058"; position: absolute; left: 0; top: -5px; width: 35px; height: 35px; line-height: 35px; font: 40px 'FontAwesome'; color: #00882F; } span.bulletblack { display: block; position: relative; padding: 0 0 0 30px; line-height: 27px; } span.bulletblack:hover { color: #000000 !important; font-weight: bold; } span.bulletblack:after { display: block; content: "\f138"; position: absolute; left: 0; top: 0; width: 20px; height: 27px; line-height: 27px; font: 22px 'FontAwesome'; color: #000000 !important; } span.bulletblack.bulletblack_left:after { content: "\f137"; } span.bulletblack:hover:after { color: #000000 !important; } .button.button_image { display: inline-block; margin-top: 40px; height: auto; width: auto; } a.cms_button, .cms_button a { display: inline-block; padding: 3px 20px; background: #000000; text-decoration: none; color: #ffffff; border-radius: 3px; } a.cms_button:hover, .cms_button a:hover { background: #00882F; color: #ffffff; } /* --------------- End Skelleton ------------------------------------------------------------------------------------------------------------------------------------ */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- HEADER ------------------------------------------------------------------------------------------------------------------------------------------- */ header { border-bottom: 35px solid #00882F; } /* --------------- Language ----------------------------------------------------------------------------------------------------------------------------------------- */ nav#hLanguage { padding: 15px 35px 16px 35px; } nav#hLanguage ul { margin: 0 !important; padding: 0 !important; } nav#hLanguage ul:after { display: block; content: ""; clear: both; } nav#hLanguage ul li { float: left; list-style: none; padding-right: 12px; margin-right: 12px; border-right: 1px solid #000000; } nav#hLanguage ul li:last-child { border-right: none; } nav#hLanguage ul li a { display: block; font-size: 14px; line-height: 16px; font-weight: 300; color: #000000; text-decoration: none; } nav#hLanguage ul li.current a { font-weight: 400; } /* --------------- Shop-Button, Navigation & Logo ------------------------------------------------------------------------------------------------------------------- */ #hMain { position: relative; height: 88px; } #hHamburger { display: none; } #hService { display: none; } #hShop, #hHome { display: block; position: absolute; left: 35px; top: 0; height: 35px; padding: 0 0 0 35px; font-size: 20px; line-height: 35px; font-weight: bold; color: #ffffff; text-align: center; text-decoration: none; background: #00882F; } #hShop:after, #hHome:after { display: block; content: "\f07a"; position: absolute; left: 0; top: 0; width: 35px; height: 35px; font: 16px 'FontAwesome'; line-height: 35px; } #hShop { width: 176px;} #hHome { width: 126px; } #hShop:after { content: "\f07a"; } #hHome:after { content: "\f015"; } #hLogo { display: block; position: absolute; left: 52%; right: 35px; top: -15px; height: 74px; cursor: pointer; background: url("/www_immer/pages/img/prebena_logo.jpg") no-repeat center right; background-size: contain; } @media screen and (max-width: 960px) { #hLogo { top: 0px; height: 44px; cursor: pointer; } } .cms #hLogo { left: auto; width: 371px; } #hNavigation { display: block; position: absolute; left: 246px; right: 441px; top: 0; height: 35px; } #hNavigation ul { } #hNavigation ul li { float: left; list-style: none; padding-right: 30px; } #hNavigation ul li a { display: block; cursor: pointer; font-size: 20px; line-height: 35px; font-weight: 300; color: #000000; text-decoration: none; } #hNavigation ul li#hn_179 a i { display: block; float: left; width: 18px; height: 35px; margin-right: 5px; background: url("/www_immer/pages/img/blog_bullet.svg") no-repeat center 8px; background-size: contain; } #hNavigation ul li#hnLanguage { display: none; } #hClose { display: none; } /*#hCrump { position: absolute; left: 35px; bottom: 0; right: 35px; } #hCrump ul { padding: 14px 0 0 0; } #hCrump ul li { float: left; padding: 0 10px 0 0; list-style: none; } #hCrump ul li a { position: relative; display: block; padding-right: 20px; line-height: 30px; font-size: 18px; text-decoration: none; color: #000000; } #hCrump ul li a:after { position: absolute; display: block; content: "\f054"; right: 0; top: 0; width: 20px; height: 30px; text-align: right; font: 14px 'FontAwesome'; line-height: 30px; } #hCrump ul li span { display: block; line-height: 30px; font-size: 18px; font-weight: bold; }*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #00882F; background: #00882F; font-weight: normal; color: #ffffff; } .fa.fa-plus { display: none; } /* --------------- END HEADER --------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- Sidebar ------------------------------------------------------------------------------------------------------------------------------------------ */ #sidebar { position: fixed; right: 0; top: 0; bottom: 0; z-index: 1000; width: 47px; padding: 170px 0 0 0; background: #000000; color: #ffffff; } #sidebar a { color: #ffffff; text-decoration: none; } #sidebar ul { padding: 0 0 120px 0 !important; margin: 0 !important; } #sidebar ul li { list-style: none; position:relative; } #sidebar ul li > a { display: block; width: 47px; height: 47px; background-repeat: no-repeat; background-position: center; background-size: 26px auto; } #sidebar ul li > a:hover, #sidebar .open ul li a { background-color: #252525; } #sidebar ul li.sBasket > a { background-image: url("/pages/img/svg/basket_white.svg"); position: relative; } #sidebar ul li.sBasket > a span { display: none; position: absolute; right: 37px; top: 12px; min-width: 22px; height: 22px; line-height: 22px; padding: 0 6px; border-radius: 11px; background: #00882F; color: #ffffff; font-size: 12px; text-align: center; } #sidebar ul li.sBasket.full > a span { display: block; } #sidebar ul li.sUser > a { background-image: url("/pages/img/svg/user_white.svg"); } #sidebar ul li.sLogout > a { background-image: url("/pages/img/svg/logout_white.svg"); } #sidebar ul li.sLogin > a { background-image: url("/pages/img/svg/login_white.svg"); } #sidebar ul li.sContact > .link { position: relative; width: 47px; height: 200px; background-image: url("/pages/img/svg/phone_white.svg"); background-position: center 15px; background-repeat: no-repeat; background-size: 26px auto; cursor: pointer; } #sidebar ul li.sContact > .link span { position: absolute; left: -52px; top: 90px; transform: rotate(-90deg); display: block; height: 47px; width: 153px; line-height: 47px; font-size: 26px; text-transform: uppercase; font-weight: 700; } #sContact { position: relative; } #sContact .sContactContent { display: none; position: absolute; right: 47px; top: 0; padding: 24px; background: #252525; white-space: nowrap; } #sContact.open .sContactContent { display: block; } #sContact .sContactContent > div { position: absolute; right: 24px; top: 24px; width: 16px; height: 16px; border-radius: 8px; background: url("/pages/img/svg/arrow_right_black.svg") no-repeat 5px 4px #ffffff; background-size: 8px 8px; cursor: pointer; } #snChangeUser { background-image: url(/pages2015/img/userchange.png)} #snChangeUser_red { background-image: url(/pages2015/img/userchange_red.png)} #snExport { background-image: url('/pages2015/img/sn_export.png'); } #sService ul ul { display: none; position: absolute; right: 47px; top: 0; padding: 5px; background: #00882F; border-radius: 10px 0 10px 10px; } #sService ul li:hover ul { display: block; } #sService ul ul li a { white-space: nowrap; color: #ffffff; height: auto; padding: 5px; cursor: pointer; width:auto; } #sService ul ul li a:hover { background: rgba(0,0,0,1) !important; } #sService ul ul li:first-child a { border-radius: 6px 6px 0 0; } #sService ul ul li:last-child a { border-radius: 0 0 6px 6px; } #sService ul li#disk a:hover { background-color: #00882F } @media screen and (min-width: 1920px) { /*section.hasSidebarSlider { min-height: 860px; }*/ } /* --------------- End Sidebar -------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- FOOTER ------------------------------------------------------------------------------------------------------------------------------------------- */ /*footer { margin: 200px 0 0 0; padding: 40px 0; background: #000000; color: #ffffff; line-height: 30px; }*/ footer { margin: 200px 0 0 0; padding: 40px 0; background: #000000; color: #ffffff; line-height: 18px; font-size: 14px; } footer .container_wide { padding: 0 35px; } footer a { color: #ffffff; text-decoration: none; } footer .arrow { display: block; padding-left: 24px !important; line-height: 24px; background-image: url("/pages/img/svg/arrowbullet_white.svg"); background-repeat: no-repeat; background-position: left center; background-size: 16px auto; } input.arrow { font-weight: bold; } input.arrow:hover { background-color: black !important; color:#00882F !important; display: block !important; font-weight: bold; } footer .container { /*padding: 0 48px 0 95px;*/ } footer table { width: 100%; } footer table td { padding-right: 40px; } footer table td:last-child { padding-right: 0; } footer table td p { padding: 0 0 15px 0; } ul.fSocialNavi.flex_container { width: 140px; /*padding: 20px 0 60px 0;*/ } ul.fSocialNavi.flex_container li { display: inline-block; list-style: none; } ul.fSocialNavi.flex_container li a { display: block; width: 38px; height: 37px; background-repeat: no-repeat; background-position: center; background-size: contain; } ul.fSocialNavi.flex_container li.fFB a { background: url("/pages/img/svg/fb_white.svg") center; background-size:contain; background-repeat:no-repeat; width:38px; height:37px; } ul.fSocialNavi.flex_container li.fYT a { background: url("/pages/img/svg/yt_white.svg") center; background-size:contain; background-repeat:no-repeat; } ul.fSocialNavi.flex_container li.fP a { background: url("/pages/img/svg/p_white.svg") center; background-size:contain; background-repeat:no-repeat; } footer .nlform { max-width: 240px; position: relative; padding: 20px 0; } footer .nlform input[type="text"] { width: 100%; padding: 8px 36px 8px 15px; height: 36px; background: #ffffff !important; border: none; border-radius: 3px; line-height: 20px; color: #000000 !important; } footer .nlform:after { display: block; content: ""; position: absolute; right: 0; top: 20px; width: 36px; height: 36px; background: url("/pages/img/svg/newsletter_black.svg") no-repeat center; background-size: 21px auto; } footer .nlform input[type="submit"] { width: 100%; padding: 18px 15px 8px 15px; height: 46px; background-color: #000000; border: none; border-radius: 3px; color: #ffffff; line-height: 20px; font-weight: 700; text-align: left; background-position: left 20px; } /*#fSocial form { max-width: 240px; position: relative; padding: 20px 0; } #fSocial form input[type="text"] { width: 100%; padding: 8px 36px 8px 15px; height: 36px; background: #ffffff; border: none; border-radius: 3px; line-height: 20px; } #fSocial form:after { display: block; content: ""; position: absolute; right: 0; top: 20px; width: 36px; height: 36px; background: url("/pages/img/svg/newsletter_black.svg") no-repeat center; background-size: 21px auto; } #fSocial form input[type="submit"] { width: 100%; padding: 18px 15px 8px 15px; height: 46px; background-color: #000000; border: none; border-radius: 3px; color: #ffffff; line-height: 20px; font-weight: 700; text-align: left; background-position: left 20px; }*/ ul.fSocialNLBenefit { width: 100%; max-width: 240px; padding: 0; } ul.fSocialNLBenefit li { width: 100%; padding-left: 18px; background: url("/pages/img/svg/tick_white.svg") no-repeat left 6px; background-size: 12px auto; line-height: 26px; list-style: none; } li.fPMText { list-style-type:none; text-align:right; } li.fPMIcon { list-style-type:none; margin-bottom:10px; } li.fPMIcon ul li { list-style-type: none; padding: 0 0 20px 0; } ul li.fPMIcon a { display: block; min-width: 55px; height: 40px; background-repeat: no-repeat; background-position: right center; background-size: contain; } li.fPMIcon.fPMIcon_maestro a { background: url("/pages/img/svg/maestro.svg") right center; background-size:contain; background-repeat:no-repeat; } ul li.fPMIcon.fPMIcon_master a { background: url("/pages/img/svg/mastercard.svg") right center; background-size:contain; background-repeat:no-repeat; } ul li.fPMIcon.fPMIcon_visa a { background: url("/pages/img/svg/visa.svg") right center; background-size:contain; background-repeat:no-repeat; } ul li.fPMIcon.fPMIcon_paypal a { background: url("/pages/img/svg/paypal.svg") right center; background-size:contain; background-repeat:no-repeat; } ul li.fPMIcon.fPMIcon_postfinance a { background: url("/pages/img/svg/postfinance.svg") right center; background-size:contain; background-repeat:no-repeat; } ul li.fPMIcon.fPMIcon_sog a { margin-top: 40px; height: 80px; background: url("/pages/img/svg/sog.png") right center; background-size:contain; background-repeat:no-repeat; } #fCopy { clear: both; width: 100%; padding: 20px 0 0 0; text-align: right; } .fFB a { background-image: url("/pages/img/svg/fb_white.svg"); } .fYT a { background-image: url("/pages/img/svg/yt_white.svg"); } .fP a { background-image: url("/pages/img/svg/p_white.svg"); } footer .flex_box_20.flex_box_payment { width: 100%; padding-top: 40px; } footer .flex_box_20.flex_box_payment ul { display: table; } footer .flex_box_20.flex_box_payment ul li { display: table-cell; padding-right: 30px; list-style: none; vertical-align: middle; white-space: nowrap; } #socialmedia:after { content: ""; display: block; clear: both; } #socialmedia li { float: left; padding-right: 10px; list-style: none; } #socialmedia li a { font-size: 28px; } @media screen and (min-width: 1280px) and (max-width: 1920px) { footer .flex_box_16 { width: 22.75% } footer .flex_box_16.flex_box_sm, } @media screen and (min-width: 960px) and (max-width: 1279px) { footer { padding: 40px 0 0 0; } footer .flex_box_16 { width: 31%; padding-bottom: 40px; } } @media screen and (max-width: 959px) { footer { padding: 40px 0 0 0; } footer .flex_box_16 { width: 100%; padding-bottom: 40px; } } @media screen and (max-width: 640px) { footer .flex_box_20.flex_box_payment ul { display: flex; justify-content: space-between; flex-wrap: wrap; align-self: flex-start; width: 100%; } footer .flex_box_20.flex_box_payment ul li { display: block; width: 48%; padding: 0 0 20px 0; } footer .flex_box_20.flex_box_payment ul li:nth-child(2N) { text-align: right; } } /* --------------- END FOOTER --------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- PANORAMA ----------------------------------------------------------------------------------------------------------------------------------------- */ section#panorama div { height: 450px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; /*background-color: #464646;*/ } .cms section#panorama div { margin-bottom: -100px; } /* --------------- END PANORAMA ------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- MAIN --------------------------------------------------------------------------------------------------------------------------------------------- */ main { display: block; position: relative; } main .container { background: #ffffff; padding: 35px 48px 0px 48px; } main .container_wide { background: #ffffff; padding: 35px 48px 0px 48px; } section.cat_grey, section.cat_grey .container { background: #dde1e1; } article.art { padding-bottom: 40px; } .cms main td { padding-right: 10px; } a { text-decoration: none; color: #000000 } a:hover { color: #00882F } hr { height: 1px; background: #000000; border: none; outline: none; } main .art_map_box { position: relative; height: 28.5vW; max-height: 314px; } main .art_map_box div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } main .art_map_box div iframe { min-height: 0; } span.rot { color: #00882F; } span.rot a { color: #00882F; } span.rot a:hover { text-decoration: underline; } span.grau { color: #787878; } span.h0 { font-size: 40px; } h1, span.h1 { font-size: 30px; font-weight: bold; } h2, span.h2 { font-size: 22px; font-weight: bold; } h3 { padding: 2px 0; font-size: 22px; font-weight: 400; border-bottom: 1px solid #000000; } h4 { font-size: 19px; font-weight: normal; } h5 { font-size: 15px; font-weight: normal; color: #00882F; } main a.link_grey { display: block; text-decoration: none; color: #9a9a9a; } main a.link_grey:hover { color: #000000; } main a.link_grey i { font-size: 70px; margin-bottom: 10px; } main a.link_grey span.h0 { margin-bottom: 10px; } /* --------------- Home - Aktionen & Angebote ----------------------------------------------------------------------------------------------------------------------- */ .flex_box_offer { position: relative; padding-bottom: 95px; } .flex_box_offer .offer_image { height: 17.7vW; max-height: 195px; margin-bottom: 30px; background-repeat: no-repeat; background-position: center; background-size: cover; } .flex_box_offer h3 { margin-bottom: 20px; } .flex_box_offer a { position: absolute; left: 0; bottom: 35px; } /* --------------- Home - Marken ------------------------------------------------------------------------------------------------------------------------------------ */ main section.cat_29 .container { padding: 70px 95px 90px 95px; } /* --------------- Home - Service ----------------------------------------------------------------------------------------------------------------------------------- */ main section.cat_32 { background: #dde1e1; } main section.cat_32 .container { padding: 45px 95px 25px 95px; background: none; } .flex_box_service { text-align: center; } .flex_box_service .service_image { width: 140px; height: 140px; margin: 0 auto 20px auto; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 70px; overflow: hidden; } .flex_box_service h4 { margin-bottom: 10px; } .flex_box_service p { margin-bottom: 25px; } .flex_box_service a.button { display: block; height: auto; margin: 0 0 25px 0; padding: 0; font-size: 20px; font-weight: bold; line-height: 25px; background: none; color: #000000 !important; } .flex_box_service a.button:hover { color: #00882F !important; } /* --------------- Home - News -------------------------------------------------------------------------------------------------------------------------------------- */ main section.cat_35 .container { padding: 75px 48px 0 48px; } main section.cat_35 h1 { padding: 0 0 20px 0; } .flex_box_news.flex_box_link { cursor: pointer; } .flex_box_news .news_image_box { position: relative; margin-bottom: 20px; overflow: hidden; } .flex_box_news .news_image_box img { width: 100%; } .flex_box_news .news_image { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 0.5s; } .flex_box_news .news_frame { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; z-index: 1; border: 1px solid #000000; opacity: 0; transition: all 0.5s; } .flex_box_news.flex_box_link:hover .news_image { left: -40px; top: -40px; right: -40px; bottom: -40px; } .flex_box_news.flex_box_link:hover .news_frame { opacity: 1; } .flex_box_news h5 { margin-bottom: 10px; } .flex_box_news p { margin-bottom: 25px; } .flex_box_news div.button { display: inline-block; text-transform: uppercase; } .flex_box_news.flex_box_link:hover div.button { background: #00882F; } /* --------------- Link-Boxes --------------------------------------------------------------------------------------------------------------------------------------- */ .flex_box_article.flex_box_link { cursor: pointer; } .flex_box_article .article_image_box { position: relative; margin-bottom: 30px; overflow: hidden; } .flex_box_article .article_image { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 0.5s; } .flex_box_article .article_frame { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; z-index: 1; border: 1px solid #000000; opacity: 0; transition: all 0.5s; } .flex_box_article.flex_box_link:hover .article_image { left: -40px; top: -40px; right: -40px; bottom: -40px; } .flex_box_article.flex_box_link:hover .article_frame { opacity: 1; } .flex_box_article .article_roundimage_box { position: relative; margin-bottom: 20px; overflow: hidden; line-height: 1px; } .flex_box_article .article_roundimage_box img { width: 100%; } .flex_box_article .article_roundimage { position: absolute; left: 15px; top: 30px; right: 15px; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 0.5s; border-radius: 50%; overflow: hidden; } .flex_box_article.flex_box_link:hover .article_roundimage { left: 0px; top: 0px; right: 0px; } /*.flex_box_article_1007 { margin: 60px 0 70px 0; }*/ .flex_box_article_1007.flex_box_link:hover h3 { font-weight: bold; } .flex_box_article_1008 { position: relative; padding-bottom: 95px !important; } .flex_box_article_1008 h3 { margin-bottom: 20px; } .flex_box_article_1008 .article_button { position: absolute; left: 0; bottom: 35px; display: inline-block; } .flex_box_article_1008:hover .article_button { background: #00882F; } .flex_box_article_1016 { position: relative; padding-bottom: 95px !important; } .flex_box_article_1016 .article_image_box { margin-bottom: 15px !important; } .flex_box_article_1016 h3 { font-size: 18px; margin-bottom: 10px; } .flex_box_article_1009 { overflow: hidden; } .flex_box_article_1009 h4 { color: #787878; } .flex_box_article_1009:hover h4 { color: #000000; } .flex_box_news h5 { margin-bottom: 10px; } .flex_box_news p { margin-bottom: 25px; } .flex_box_news div.button { display: inline-block; text-transform: uppercase; } .flex_box_news.flex_box_link:hover div.button { background: #00882F; } .flex_box_team { margin-top: 60px; } .team_image { margin-bottom: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } .team_text p { padding-bottom: 15px; color: #787878; } .team_text p b, .team_text p strong { color: #000000; } .team_text p:last-of-type { padding-bottom: 0; } .team_text a span.email, .team_text a span.vcard { position: relative; width: 40px; height: 20px; display: inline-block; text-indent: -1000px; overflow: hidden; } .team_text a span.email:after, .team_text a span.vcard:after { display: block; position: absolute; left: 0; top: 0; width: 40px; height: 20px; line-height: 20px; font: 22px 'FontAwesome'; text-indent: 0; color: #787878; } .team_text a:hover span.email:after, .team_text a:hover span.vcard:after { color: #000000; } .team_text a span.email:after { content: "\f0e0"; } .team_text a span.vcard:after { content: "\f2bb"; } /* --------------- Side-Boxes --------------------------------------------------------------------------------------------------------------------------------------- */ .side_container_outer { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 2; } .side_container_outer .container { position: relative; padding: 0; background: none; } .side_container { position: absolute; top: 180px; width: 11.35vW; max-width: 218px; } .side_container.side_container_left { left: -340px; } .side_container.side_container_right { right: -340px; } .side_container.side_container_right .artSlider { left: -38px; position: relative; } .side_box { position: relative; width: 218px; height: 85px; margin-bottom: 25px; overflow: hidden; border: 1px solid #9a9a9a; border-radius: 3px; color: #9a9a9a; cursor: pointer; transition: all 0.5s; } .side_box:hover { border: 1px solid #00882F; color: #00882F; } .side_box:after { display: block; content: "\f067"; position: absolute; right: 0; top: 0; width: 35px; height: 35px; color: #ffffff; font: 14px 'FontAwesome'; line-height: 35px; text-align: center; background: #00882F; transition: all 0.5s; } .side_box:hover:after { background: #00882F; } .side_box_image { position: absolute; left: 5px; right: 47px; top: 5px; height: 53px; background-position: left center; background-repeat: no-repeat; background-size: contain; background-color: #ffffff; transition: all 0.5s; } .side_box_image.side_box_image_color { z-index: 1; opacity: 0; } .side_box:hover .side_box_image.side_box_image_color { opacity: 1; } .side_box_label { position: absolute; left: 5px; right: 47px; bottom: 1px; height: 20px; line-height: 20px; font-size: 14px; } .side_container_outer nav ul li { list-style: none; } .side_container_outer nav ul li a { display: block; padding: 8px 0; color: #9a9a9a; text-decoration: none; } .side_container_outer nav ul li.current a, .side_container_outer nav ul li a:hover { color: #000000; font-weight: bold; } .metro_gold { background-color: #FAB542 !important;} /* --------------- Fachparnter -------------------------------------------------------------------------------------------------------------------------------------- */ #map #mapFilterBox { padding-top: 24px; } #map .fpgTitle { display: block; margin-top: -23px; line-height: 20px; } #map .fpgTitle .fpgTitle_title { display: inline-block; padding: 20px 10px 0 0; font-weight: bold; } #map .mapFilter_chk label { padding-bottom: 48px !important; } #map .mapFilter_txt input[type="text"] { margin-bottom: 24px; border-collapse: #969696; border-radius: 3px; } #map .mapFilter_txt label { color: #969696; } #map #map_container { position: relative; margin: 36px 0 0 0; padding: 40%; } #map #map_canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #map .map_box { margin: 36px 0 0 0; } @media screen and (max-width: 680px) { #map #map_container { padding: 100% 0; } } #map input[type="checkbox"] + label:before { top: 7px; width: 14px; height: 14px; background: #e2e2e2; border: none; border-radius: 0; box-shadow: none; } #map input[type="checkbox"] + label:after { display: none !important; } #map input[type="checkbox"]:checked + label:before { background: #00882F; } #map label:hover .fpgTitle_title { color: #00882F; } #map label:hover:before { box-shadow: 0 0 10px rgba( 0,0,0,0.5 ) !important; } /* --------------- END MAIN ----------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- BLOG --------------------------------------------------------------------------------------------------------------------------------------------- */ .flex_box_blog { margin-bottom: 40px; } .flex_box_blog > a { display: block; color: #000000 !important; } .flex_box_blog > a img { width: 100%; } .flex_box_blog .blog_image { margin-bottom: 20px; background-repeat: no-repeat; background-position: center; background-size: cover; } .flex_box_blog .blog_date { line-height: 1px; } .flex_box_blog .blog_date div { position: relative; width: 50px; padding: 42px 0 5px 0; background: #00882F; color: #ffffff; text-align: center; line-height: 1; } .flex_box_blog .blog_date div:before { display: block; content: ""; position: absolute; left: 3px; top: 36px; right: 3px; height: 1px; background: rgba( 255,255,255,0.5 ); } .flex_box_blog .blog_date div:after { display: block; content: ""; position: absolute; left: 3px; top: 6px; right: 3px; height: 24px; background: url('/www_immer/pages/img/stift.svg') no-repeat center; background-size: contain; } .flex_box_blog .blog_date span { display: block; } .flex_box_blog .blog_date span.blog_date_day { font-size: 21px; } .flex_box_blog .blog_date span.blog_date_month { font-size: 13px; } .flex_box_blog .blog_title { width: 100%; padding-left: 20px; font-size: 15px; font-weight: bold; } .flex_box_blog .blog_title span { display: block; font-weight: normal; font-size: 10px; color: #787878; padding-top: 10px; } .flex_box_blog .blog_preview { margin: 20px 0 15px 0; color: #787878; } .flex_box_blog .bulletblack { font-weight: bold; } .flex_box_blog > a:hover .blog_title { color: #00882F; } #side_tag_title { color: #787878; font-size: 15px; font-weight: bold; padding-bottom: 20px; } #side_tag_box:after { display: block; content: ""; clear: both; } #side_tag_box a { display: block; float: left; padding: 5px 10px; line-height: 28px; margin: 0 7px 7px 0; background: #787878; color: #ffffff; } #side_tag_box a:hover { background: #000000; } /* --------------- END BLOG ----------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ /* --------------- COURSE ------------------------------------------------------------------------------------------------------------------------------------------- */ .course_box { display: block; margin: 0 0 80px 0; padding: 0 0 65px 80px; border-bottom: 1px solid #787878; color: #000000 !important; } .course_box:last-of-type { border-bottom: none; } .course_box:after { display: block; content: ""; clear: both; } .course_box .course_date { float: left; width: 50px !important; margin: 0 0 0 -80px; padding: 20px 0; background: #00882F; color: #ffffff; text-align: center; } .course_box .course_date span { display: block; } .course_box .course_date span.course_date_day { font-size: 21px; } .course_box .course_date span.course_date_month { font-size: 13px; } .course_box .course_title { font-size: 30px; font-weight: bold; } .course_box .course_datetext { font-size: 15px; line-height: 2; } .course_box .course_location { font-size: 15px; line-height: 3; } .course_box .bulletblack { font-weight: bold; } .course_box:hover .course_title { color: #00882F; } .course_box .course_image { float: right; padding: 0 15px 0 50px; } .course_box .course_image div { width: 25vW; max-width: 200px; line-height: 1px; background-repeat: no-repeat; background-position: center; background-size: cover; } .course_box .course_image div img { width: 100%; } .course_box .course_price { float: right; } .course_box .button { white-space: nowrap; background: #000000 !important; } .course_det_back { padding-bottom: 60px; } .course_det_image { margin-bottom: 55px; line-height: 1px; background-repeat: no-repeat; background-position: center; background-size: cover; } .course_det_image img { width: 100%; } .course_det_text { margin-top: 20px; } /* --------------- END COURSE --------------------------------------------------------------------------------------------------------------------------------------- */ /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ .stockinfo td { text-decoration: none; padding: 2px 4px 2px 4px; font-size: 12px; } .blockUI.blockMsg.blockPage { background: none; border: none; padding: 0} body.marken .mBox { position: relative; width: 135px; background: #ffffff !important; } body.marken .mBox div { position: absolute; left: 8px; top: 8px; right: 8px; bottom: 8px; background-repeat: no-repeat; background-size: contain; background-position: center; } /*-----| Search Result |--------------------------------------------------------------------------------------------------------------*/ .search_result { padding: 20px 20px 0 20px; margin: 0 !important; } .search_result ul li { list-style: none; font-weight:bold } .search_result ul li a { font-weight: bold; } .search_result ul li a:hover { color: rgba( 220,10,0,1 ); } .search_result ul li ul { padding: 0 0 20px 20px; } .search_result ul li ul li a { font-weight: normal; } .bootstrapshop { margin: -20px -40px; } footer #socialmedia { margin: 0 !important; padding: 0 !important; } .stufe13-box-top-buttons { display: none; } @media screen and (max-width: 640px){ main { padding: 20px !important; } }