/* General */ * { margin: 0; padding: 0; } html, body { overflow-x: hidden; } html, body { width: 100%; height: 100%; font-size: 18px; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; } .container { max-width: 1400px; } .container-nav, .container-header { width: 100%; max-width: 1400px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } .container-navigation { width: 100%; /*max-width: 1920px;*/ margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; position: fixed; z-index: 9999; } .container-language { width: 100%; /*max-width: 1920px;*/ right: 100px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; position: relative; z-index: 9999; } @media screen and (max-width: 1250px) { .container { max-width: 1200px; } } @media screen and (max-width: 991px) { .prl-130 { padding: 0 !important; } } @media screen and (max-width: 767px) { .container-language { right: 30px; } .container-content { width: 95%; max-width: 540px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } } @media screen and (max-width: 479px) { /* .container-language { right: -10px; }*/ } /* Typography */ h1 { font-family: 'AG-ExtraBold-Cond-Italic', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } h2 { font-family: 'AG-ExtraBold-Cond-Italic', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } h3 { font-family: 'AG-ExtraBold-Cond-Italic', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } h4 { font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } h5, h6 { font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } h1 { font-size: 162px; } h2 { font-size: 80px; color: #FFFFFF; } h3 { font-size: 40px; line-height: 44px; text-transform: none; } h4 { font-size: 50px; text-transform: uppercase; color: #000000; } h5 { font-size: 30px; line-height: 40px; text-transform: none; color: #000000; } p { font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; margin-bottom: 20px; font-size: 35px; line-height: 38px; letter-spacing: 0; color: #000000; } .buenzlityp-text { font-family: 'AG-Italic', 'Helvetica', 'Arial', 'sans-serif'; margin-bottom: 20px; font-size: 35px; line-height: 38px; letter-spacing: 0; color: #000000; } a { font-family: 'AG-Bold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-size: 33px; letter-spacing: 0px; color: #E76610; cursor: pointer; text-decoration: underline; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } a:hover, a:focus { color: #3D8983 !important; } b, strong { font-weight: 900; } hr { max-width: 100px; margin: 25px auto 0; border-width: 1px; border-color: rgba(34, 34, 34, 0.1); } hr.light { border-color: white; } .text-black { color: #000000; } .text-orange { color: #E76610; } .rhomboid { width: 100%; max-width: 1900px; height: auto; margin: 0 auto; /*margin-left: 15px; float: left;*/ -webkit-transform: skew(-11deg) !important; -moz-transform: skew(-11deg) !important; transform: skew(-11deg) !important; } #harmat-teaser .rhomboid { width: 100%; max-width: 1900px; height: auto; margin: 15px auto; -webkit-transform: skew(-11deg) !important; -moz-transform: skew(-11deg) !important; transform: skew(-11deg) !important; } .header-content-harmat-green-de, .header-content-de, .header-content-0-de, .header-content-1-de, .header-content-2-de, .header-content-3-de, .header-content-4-de, .header-content-5-de, .header-content-6-de, .header-content-harmat-green-fr, .header-content-fr, .header-content-0-fr, .header-content-1-fr, .header-content-2-fr, .header-content-3-fr, .header-content-4-fr, .header-content-5-fr, .header-content-6-fr, .header-content-harmat-green-it, .header-content-it, .header-content-0-it, .header-content-1-it, .header-content-2-it, .header-content-3-it, .header-content-4-it, .header-content-5-it, .header-content-6-it, #harmat-teaser .rotate, .rotate { height: auto; margin: 0; -webkit-transform: skew(-11deg) !important; -moz-transform: skew(-11deg) !important; transform: skew(-11deg) !important; } #harmat-teaser .rhomboid, .rhomboid { -webkit-transform: rotate(-11deg) !important; -moz-transform: rotate(-11deg) !important; -ms-transform: rotate(-11deg) !important; -o-transform: rotate(-11deg) !important; transform: rotate(-11deg) !important; } @media screen and (max-width: 1199px) { h2 { font-size: 6.67vw; line-height: 7.2vw; } h4 { } p, a { font-size: 2.9vw !important; line-height: 3.1vw !important; } } @media screen and (max-width: 991px) { h3 { letter-spacing: -1px; } h4 { font-size: 4.5vw; } } @media screen and (max-width: 767px) { .section-heading { line-height: 9vw; } #bekennen .md-content > h3, h2 { font-size: 6.67vw; letter-spacing: 0px; } h3 { letter-spacing: 0px; } h4 { font-size: 36px; } p, a { font-size: 24px !important; line-height: 26px !important; } } @media screen and (max-width: 399px) { h2 { } } /* Backgrounds */ .bg-white { background-color: #FFFFFF; } .bg-orange { background-color: #E76610; } .bg-grey-light { background-color: #EAEAEA; } .bg-green { background-color: #23968B; } .bg-green-light { background-color: #23968B; } /* .bg-green-light { background-color: #93D2CD; } */ .bg-blue { background-color: #455674; } .bg-lightblue { background-color: #F3F7FC; } .bg-lightblue-gradient { background-color: rgb(236,246,255); background: linear-gradient(60deg, rgba(236,246,255,1) 0%, rgba(247,250,252,1) 35%, rgba(255,253,253,1) 50%, rgba(247,250,252,1) 68%, rgba(236,246,255,1) 100%); } .bg-transparent { background-color: transparent; } .bg-nav, .bg-nav-mobile { width: auto; max-height: 82px; top: 0; position: absolute; z-index: -1; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .bg-tabs { width: 396px; height: auto; margin-top: -67px; margin-left: 197px; position: absolute; opacity: 0.5; z-index: -1; } .bg-news { width: 520px; height: auto; margin-top: 120px; margin-left: 750px; position: absolute; z-index: -1; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .bg-song { width: 100%; /*max-width: 1920px;*/ height: auto; max-height: 500px; margin-top: 120px; margin-right: auto; margin-left: auto; background-color: #E76610 } @keyframes opacity { 0% {opacity:0.7; } 100% {opacity:0.3; }} @media screen and (min-width: 1400px) { .bg-news { margin-right: 0; } } @media screen and (max-width: 1399px) { .bg-news { margin-left: 53.5%; margin-right: 0; } } @media screen and (max-width: 1199px) { .bg-news { width: 460px; margin-left: 515px; } .bg-tabs { width: 396px; margin-left: 100px; } } @media screen and (min-width: 992px) { .bg-nav { display: block; } .bg-nav-mobile { display: none; } } @media screen and (max-width: 991px) { h2 { font-size: 8vw; line-height: 8.5vw; } #mainNav.navbar-shrink .bg-nav-mobile { right: 10vw; display: block; } } /* Buttons */ .btn { margin: 0px; padding: 12px 50px; font-family: "AG-Bold-Cond", Arial, sans-serif; font-size: 33px; color: #FFFFFF; background-color: #E76610; border: 0px solid; border-radius: 0px; z-index: 4; text-transform: none; } .btn.focus, .btn:focus { outline: 0; box-shadow: none; } .btn-outline { border: 1px solid; border-color: #455674; color: #455674; } .btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active { border-color: #455674; background-color: #455674; color: #FFFFFF !important; } .btn-download, .btn-bekennen, .btn-anbieten, .btn-produktsuche { line-height: 75px; padding: 0 50px; } .btn-download { margin-top: 25%; margin-right: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-download:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-bekennen { margin-top: -100px; right: 15px; display: inline; position: absolute; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-bekennen:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-contest { right: 15px; display: inline; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-contest:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-anbieten { margin-top: -100px; right: 15px; display: inline; position: absolute; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-anbieten:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-produktsuche { width: 100%; max-width: 24%; margin-top: 0; margin-right: 0 !important; padding: 0 !important; font-size: 33px !important; line-height: 75px; background-color: #E76610; color: #FFFFFF !important; text-transform: none; float: right !important; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-produktsuche:hover { background-color: #3D8983; color: #FFFFFF !important; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-produktsuche:active, .btn-produktsuche.active { text-decoration: none !important; } .btn-more { width: auto !important; margin-top: 25px; margin-right: auto !important; margin-left: auto; padding: 0 50px !important; font-size: 33px !important; line-height: 75px; background-color: #E76610; color: #FFFFFF !important; text-transform: none; float: none !important; display: block; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-more:hover { background-color: #3D8983; color: #FFFFFF !important; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-more:active, .btn-more.active, .btn-more:focus, .btn-more.focus { text-decoration: none !important; } .btn-mitmachen { margin-top: -40px; right: 47px; padding: 15px 75px; font-size: 44px; display: inline; position: absolute; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: skew(-11deg); -moz-transform: skew(-11deg); -o-transform: skew(-11deg); transform: skew(-11deg); } .btn-mitmachen:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-abonnieren { margin-top: 0; right: 15px; padding: 0 80px; line-height: 75px; display: inline; position: absolute; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-abonnieren:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-go { margin-top: 0; right: 15px; padding: 0 30px; line-height: 75px; display: inline; position: absolute; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } .btn-go:hover { background-color: #3D8983; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @media screen and (max-width: 1399px) { .btn-mitmachen { font-size: 2.85vw; } } @media screen and (max-width: 1250px) { .btn-download, .btn-bekennen, .btn-anbieten, .btn-more, .btn-produktsuche { line-height: 55px; } } @media screen and (max-width: 991px) { .btn-bekennen, .btn-anbieten { margin-top: 0; } .btn-mitmachen { right: 4%; } } @media screen and (max-width: 767px) { .btn-download { margin-top: 16vw; margin-right: 0; } .btn-abonnieren { left: 5px; font-size: 33px; line-height: 75px; } .btn-bekennen { margin-top: 0; } .btn-bekennen, .btn-download, .btn-produktsuche, .btn-anbieten, .btn-more, .btn-mitmachen { font-size: 33px; line-height: 50px; } .btn-mitmachen { padding: 8px 55px; } .btn-go { top: -113px; right: 5px; left: auto; } } /* @media screen and (max-width: 767px) { .btn-bekennen { line-height: 0; padding-top: 25px; padding-bottom: 25px; } } */ @media screen and (max-width: 499px) { .btn-produktsuche { font-size: 24px !important; } } @media screen and (max-width: 400px) { .btn-go { top: -95px; right: 5px; } } @media screen and (max-width: 399px) { .btn-abonnieren { width: 97%; } .btn-bekennen, .btn-download, .btn-produktsuche, .btn-more, .btn-anbieten, .btn-mitmachen { font-size: 24px !important; line-height: 50px; } .btn-mitmachen { padding: 5px 50px; } } @media screen and (max-width: 328px) { .btn-abonnieren { padding-right: 24vw; padding-left: 24vw; } } { width: 130px; height: 75px; background: #037CA9; /* Skew */ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); } /* Spaces */ .space-20 { height: 20px; margin: 0; padding: 0; } .space-30 { height: 30px; margin: 0; padding: 0; } .space-50 { height: 50px; margin: 0; padding: 0; } .space-60 { height: 60px; margin: 0; padding: 0; } .space-100 { height: 100px; margin: 0; padding: 0; } .prl-130 { padding: 0 130px; } /* Contact Top */ #contactNav { max-width: 1920px; max-height: 30px; margin: 0 auto; padding-top: 0; border-color: transparent; background-color: transparent; font-weight: 200; letter-spacing: 1px; display: flex; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } #contactNav .mail-link, #contactNav .navbar-nav > li > a { font-size: 16px; line-height: 12px; font-weight: 300; font-family: 'Gravur-Regular', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: 0px; color: #3d526e; } #contactNav .icon-envelope { line-height: 32px; } #contactNav .contact-nav { margin-top: 8px; padding-right: 26px; padding-left: 30px; z-index: 99; } .absolute-top { top: 0; right: 0; left: 0; position: absolute; z-index: 1099; } @media screen and (max-width: 991px) { #contactNav { display: none; } #contactNav .contact-nav { margin-top: 50px; margin-left: auto; padding-right: 10px; } #contactNav .icon-envelope, #contactNav .navbar-nav .nav-mail { display: none; } #contactNav .navbar-nav > li > a { padding: 0 10px; } #contactNav .navbar-nav { display: flex !important; flex-basis: auto; flex-direction: unset; float: right; } } @media screen and (max-width: 767px) { #contactNav { max-width: 450px; } } @media screen and (max-width: 599px) { #contactNav { max-width: 100%; padding: 0 75px; } } @media screen and (max-width: 479px) { #contactNav { right: 90px; } #contactNav .navbar-nav > li > a { padding: 0 6px; } } /* Navigation */ #toggle { width: 90px; height: 120px; top: 18px; right: 50px; padding: 14px; position: fixed; /*background-color: #FFFFFF;*/ display: block; transition: background-color 0.4s; z-index: 99; } #toggle:hover { transition: all 0.4s; } #toggle span { top: 30px; position: relative; display: block; } #toggle span:after { top: 17px; content: ""; position: absolute; left: 0; } #toggle span:before { top: 34px; content: ""; position: absolute; left: 0; } #toggle span, #toggle span:after, #toggle span:before { width: 100%; height: 6px; background-color: #E76610; transition: all 0.4s; backface-visibility: hidden; border-radius: 3px; -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); } @media screen and (max-width: 1920px) { #toggle span, #toggle span:after, #toggle span:before { width: 60px; height: 6px; } } @media screen and (max-width: 1599px) { #toggle span, #toggle span:after, #toggle span:before { width: 60px; height: 6px; } } @media screen and (max-width: 1299px) { .md-content #toggle { width: 76px; height: 76px; top: 14px; right: 38px; padding: 0 14px; } #toggle span, #toggle span:after, #toggle span:before { width: 60px; height: 6px; } } @media screen and (max-width: 991px) { #toggle { width: 80px; height: 90px; top: -10px; right: 30px; padding: 14px; position: fixed; /*background-color: #FFFFFF;*/ display: block; transition: background-color 0.4s; z-index: 99; } #toggle span, #toggle span::after, #toggle span::before {width: 55px; height: 5px; } #toggle span:before { top: 30px; } #toggle span:after { top: 15px; } } @media screen and (max-width: 767px) { #toggle span, #toggle span:after, #toggle span:before { width: 50px; height: 4px; } } @media screen and (max-width: 479px) { #toggle span, #toggle span:after, #toggle span:before { width: 45px; height: 4px; } } /* Menu on activation */ #toggle.on, #toggle.on span { top: 29px; background-color: transparent; transition: all 0.4s; box-shadow: none; z-index: 99999 } #toggle.on span:before { top: 4px; transform: rotate(45deg) translate(5px, 5px); background-color: #FFFFFF; box-shadow: none; } #toggle.on span:after { top: 22px; transform: rotate(-45deg) translate(7px, -8px); background-color: #FFFFFF; box-shadow: none; } #toggle.on + #menu { left: 0; position: fixed; display: block; opacity: 1; visibility: visible; overflow: hidden; z-index: 9999; } @media screen and (max-width: 991px) { #toggle.on span::before { top: -25px; } #toggle.on span:after { top: -8px; } } @media screen and (max-width: 767px) { #toggle { width: 70px; height: 100px; top: -12px; right: 28px; } #toggle.on, #toggle.on span { top: 17px; } #toggle.on span:before { top: -7px; } #toggle.on span:after { top: 11px; } } @media screen and (max-width: 479px) { #toggle { width: 70px; height: 70px; top: -14pxpx; right: 18px; } #toggle span:after { top: 13px; } #toggle span:before { top: 26px; } #toggle.on, #toggle.on span { top: 23px; } #toggle.on span:before { top: -21px; } #toggle.on span:after { top: -4px; } } /* Language */ #languageNav { width: 165px; height: 90px; top: 47px; right: 35px; padding: 14px; position: absolute; background-color: transparent; display: -webkit-inline-box; transition: all 0.4s; z-index: 99; } #languageNav li a:hover, #languageNav li a:active, #languageNav li a.active { color: #E76610 !important; } #languageNav .nav-breaker, #languageNav li a { margin-right: 7px; padding-top: 10px; line-height: 40px; display:block; text-align: center; text-transform: uppercase; color: #FFFFFF; font-size: 32px; letter-spacing: 1px; font-family: 'AG-Bold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; text-decoration: none; -webkit-text-shadow: 0px 0px 0.5px #000000; text-shadow: 0px 0px 0.5px #000000; } @media screen and (max-width: 1199px) { /* #languageNav { height: 76px; top: 14px; right: 50px; }*/ #languageNav li a, #languageNav .nav-breaker { font-size: 32px !important; line-height: 40px !important; } } @media screen and (max-width: 991px) { #languageNav { width: 152px; height: 76px; top: 19px; right: 0; } #languageNav li a, #languageNav .nav-breaker { font-size: 28px !important; line-height: 32px !important; } } @media screen and (max-width: 767px) { #languageNav { width: 152px; height: 76px; top: 16px; right: 60px; } #languageNav li a, #languageNav .nav-breaker { font-size: 32px; } } @media screen and (max-width: 479px) { #languageNav { width: 142px; height: 76px; top: 13px; right: 50px; } #languageNav li a, #languageNav .nav-breaker { font-size: 25px !important; } } /* Menu Appearance*/ #menu { width: 100vw; height: 100vh; margin: 0; padding: 0; padding-top: 18vh; padding-bottom: 17vh; position: absolute; /*display: grid;*/ text-align: center; border-radius: 0; background: #E76610; box-shadow: 0 1px 8px rgba(0,0,0,0.05); opacity: 0; visibility: hidden; transition: all .3s; -webkit-box-shadow: 0px 0px 10px 5px #E76610; box-shadow: 0px 0px 10px 5px #E76610; } /*#menu { background: #E76610;}*/ #menu li { margin: 0; color: #000; background: transparent; -webkit-border-radius: 2px; border-radius: 2px; display: block; } #menu li a { padding-top: 10px; line-height: 110px; display:block; text-align: center; text-transform: uppercase; color: #FFFFFF; font-size: 80px; letter-spacing: -2px; font-family: 'AG-ExtraBold-Cond-Italic', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; text-decoration: none; } #menu li a:hover { text-decoration: none; } #menu li.active a, #menu li a.active { padding-top: 10px; display:block; color: #A0A0A0; text-decoration: underline; } #menu:after { position: absolute; top: -15px; right: 28px; content: ""; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid white; display: none; } ul, li, li a { list-style: none; display: table-cell; margin: 0; padding: 0; } #menu .menu-contact { bottom: 0; margin-bottom: 20vh; position: absolute; } #menu .img-menu-hero { width: 30vw; top: 4vw; position: absolute; display: block; display: none; -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.3)); filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.3)); } @media screen and (max-width: 1499px) and (min-height: 750px) { #menu li a { font-size: 3.65vw !important; line-height: 5.31vw !important; } } @media screen and (max-height: 1199px) { #menu li a { font-size: 5.2vw !important; line-height: 9.5vh !important; letter-spacing: -1px; } } @media screen and (max-height: 1199px) and (min-width: 1600px) { #menu li a { font-size: 74px !important; line-height: 90px !important; letter-spacing: -1px; } } @media screen and (max-height: 1099px) { #menu li a { font-size: 5vw !important; line-height: 9.5vh !important; letter-spacing: -1px; } } @media screen and (max-height: 1099px) and (min-width: 1600px) { #menu li a { font-size: 72px !important; line-height: 86px !important; letter-spacing: -1px; } } @media screen and (max-height: 999px) { #menu li a { font-size: 4.8vw !important; line-height: 9.5vh !important; letter-spacing: -1px; } } @media screen and (max-height: 999px) and (min-width: 1600px) { #menu li a { font-size: 66px !important; line-height: 76px !important; letter-spacing: -1px; } } @media screen and (max-height: 899px) { #menu li a { font-size: 4.5vw !important; line-height: 9vh !important; letter-spacing: -1px; } } @media screen and (max-height: 899px) and (min-width: 1600px) { #menu li a { font-size: 60px !important; line-height: 66px !important; letter-spacing: -1px; } } @media screen and (min-height: 900px) and (max-width: 599px) { #menu li a { font-size: 40px !important; line-height: 63px !important; letter-spacing: -1px; } } @media screen and (max-width: 767px) { #menu .img-menu-hero { width: 55vw; top: 10vw; display: none; } #menu li a { font-size: 7vw !important; line-height: 7vh !important; letter-spacing: -1px; } } @media screen and (max-height: 799px) { #menu li a { font-size: 4vw !important; line-height: 8vh !important; letter-spacing: -1px; } } @media screen and (max-height: 799px) and (min-width: 1600px) { #menu li a { font-size: 56px !important; line-height: 62px !important; letter-spacing: -1px; } } @media screen and (max-height: 749px) { #menu { padding-top: 18vh;} #menu li a { font-size: 6vw; line-height: 9vh; } } @media screen and (max-height: 699px) { #menu li a { font-size: 3.5vw !important; line-height: 8vh !important; letter-spacing: -1px; } } @media screen and (max-height: 699px) and (min-width: 1600px) { #menu li a { font-size: 50px !important; line-height: 54px !important; letter-spacing: -1px; } } @media screen and (max-height: 599px) { #menu li a { font-size: 3vw !important; line-height: 8vh !important; letter-spacing: -1px; } } @media screen and (max-height: 599px) and (min-width: 1600px) { #menu li a { font-size: 44px !important; line-height: 46px !important; letter-spacing: -1px; } } @media screen and (max-width: 499px) { #menu { width: 100vw; padding-top: 18vh; } #menu li a { font-size: 7vw !important; line-height: 7vh !important; letter-spacing: -1px; } } @media screen and (max-height: 499px) { #menu li a { font-size: 32px !important; letter-spacing: 0px; } } @media screen and (max-height: 399px) and (max-width: 499px) { #menu li a { font-size: 28px !important; line-height: 36px !important; letter-spacing: 0px; } } /* Navigation Sticky */ #mainNav.navbar-shrink { max-width: 1920px; margin: 0 auto; padding-top: 0; border-color: rgba(34, 34, 34, 0.1); background-color: #E8F1FA; border-bottom: 2px solid rgba(0,0,0,0.05); } #mainNav.navbar-shrink .bg-nav, #mainNav.navbar-shrink .bg-nav-mobile { opacity: 1; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } #mainNav.navbar-shrink .logo { max-height: 60px; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } /* Header WG */ /*#desktop-header-wg { width: 100%; right: 0%; left: -50%; position: relative; }*/ #desktop-header-wg { width: 100%; /*right: 0%; left: -50%;*/ position: relative; } #desktop-header-wg .container-header { max-width: 100%; } /* Header */ .header { } .header-content .btn-xl { padding: 5px 45px; font-size: 16px; } header.header .header-text { max-width: 500px; font-size: 50px; font-weight: 100; font-family: 'DIN-Light', 'Helvetica', 'Arial', 'sans-serif' !important; color: #3d526e; text-transform: uppercase; text-align: left; } .header-content-harmat-green-de a.harmat-green, .header-content-harmat-green-fr a.harmat-green, .header-content-harmat-green-it a.harmat-green { top: 1.5vw; color: #3D8983 !important; } .header-content-harmat-green-de a.harmat-green:hover, .header-content-harmat-green-fr a.harmat-green:hover, .header-content-harmat-green-it a.harmat-green:hover { color: #FFFFFF !important; background-color: #E76610; } .btn-slider { top: 3vh; padding: 12px 45px; background-color: #FFFFFF; color: #E76610 !important; text-decoration: none; position: relative; -webkit-box-shadow: 0px 0px 1px 0px #FFFFFF; box-shadow: 0px 0px 1px 0px #FFFFFF; } .btn-slider:hover { background-color: #3D8983; color: #FFFFFF !important; text-decoration: none; } @keyframes glowing { 0% { background-color: #E76610; } 50% { background-color: #3D8983; } 100% { background-color: #E76610; }} .header-content-0-de .btn-slider { right: 2vw; top: 3vh; padding: 12px 45px; background-color: #E76610; color: #FFFFFF !important; text-decoration: none; float: right; position: relative; animation: glowing 1300ms infinite; -webkit-box-shadow: 0px 0px 1px 0px #FFFFFF; box-shadow: 0px 0px 1px 0px #FFFFFF; } .header-content-0-fr .btn-slider { right: 1.5vw; top: 3vh; padding: 12px 45px; background-color: #E76610; color: #FFFFFF !important; text-decoration: none; float: right; position: relative; animation: glowing 1300ms infinite; -webkit-box-shadow: 0px 0px 1px 0px #FFFFFF; box-shadow: 0px 0px 1px 0px #FFFFFF; } .header-content-0-it .btn-slider { right: 1.5vw; top: 3vh; padding: 12px 45px; background-color: #E76610; color: #FFFFFF !important; text-decoration: none; float: right; position: relative; animation: glowing 1300ms infinite; -webkit-box-shadow: 0px 0px 1px 0px #FFFFFF; box-shadow: 0px 0px 1px 0px #FFFFFF; } .header-content-0-de .btn-slider:hover, .header-content-0-fr .btn-slider:hover, .header-content-0-it .btn-slider:hover { background-color: #3D8983; color: #FFFFFF !important; text-decoration: none; animation: glowing 0ms infinite; } .swiper-button-next, .swiper-button-prev { color: #455674; } .img-hero-mobile, .img-hero { width: 30vw !important; top: 4vw; left: 0; position: absolute; display: block; filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.3)); } .img-hero-mobile { display: none; } .header-content-harmat-green-de { width: 100%; max-width: 74vw; top: 17vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-de { width: 100%; max-width: 54vw; top: 18vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-0-de { width: 100%; /*max-width: 67vw;*/ max-width: 63vw; /*top: 25vw;*/ top: 23vw; right: 0%; left: 0%; /*margin: 0 auto;*/ margin-left: 31%; position: absolute; } .header-content-0-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-1-de { width: 100%; max-width: 65vw; top: 27vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-1-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-2-de { width: 100%; max-width: 64vw; top: 26vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-2-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-3-de { width: 100%; max-width: 60vw; top: 26vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-3-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-4-de { width: 100%; max-width: 53vw; top: 27vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-4-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-5-de { width: 100%; max-width: 61vw; top: 26vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-5-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-6-de { width: 100%; max-width: 51vw; top: 27vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-6-de > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-harmat-green-fr { width: 100%; max-width: 80vw; top: 17vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-fr { width: 100%; max-width: 65vw; top: 18vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-0-fr { width: 100%; /*max-width: 69vw;*/ max-width: 63vw; top: 23vw; right: 0%; left: 0%; /*margin: 0 auto;*/ margin-left: 31%; position: absolute; } .header-content-0-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-1-fr { width: 100%; max-width: 76vw; top: 26vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-1-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-2-fr { width: 100%; max-width: 77vw; top: 23.5vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-2-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-3-fr { width: 100%; max-width: 73vw; top: 24vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-3-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-4-fr { width: 100%; max-width: 73vw; top: 25vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-4-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-5-fr { width: 100%; max-width: 80vw; top: 24vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-5-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-6-fr { width: 100%; max-width: 62vw; top: 25vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-6-fr > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-harmat-green-it { width: 100%; max-width: 76vw; top: 16vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-it { width: 100%; max-width: 65vw; top: 18vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-0-it { width: 100%; /*max-width: 73vw;*/ max-width: 63vw; /*top: 24vw;*/ top: 23vw; right: 0%; left: 0%; /*margin: 0 auto;*/ margin-left: 31%; position: absolute; } .header-content-0-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-1-it { width: 100%; max-width: 78vw; top: 26vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-1-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-2-it { width: 100%; max-width: 68vw; top: 22vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-2-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-3-it { width: 100%; max-width: 73vw; top: 24.5vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-3-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-4-it { width: 100%; max-width: 61vw; top: 25.5vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-4-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-5-it { width: 100%; max-width: 73vw; top: 24.5vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-5-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-content-6-it { width: 100%; max-width: 60vw; top: 25.5vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } .header-content-6-it > a { margin-top: 30px; padding-bottom: 8px !important; float: left; } .header-title-harmat-green-de, .header-subtitle-harmat-green-de, .header-title-de, .header-subtitle-de, .header-name-de, .header-title-0-de, .header-subtitle-0-de, .header-name-0-de, .header-title-1-de, .header-subtitle-1-de, .header-name-1-de, .header-title-2-de, .header-subtitle-2-de, .header-name-2-de, .header-title-3-de, .header-subtitle-3-de, .header-name-3-de, .header-title-4-de, .header-subtitle-4-de, .header-name-4-de, .header-title-5-de, .header-subtitle-5-de, .header-name-5-de, .header-title-6-de, .header-subtitle-6-de, .header-name-6-de, .header-title-harmat-green-fr, .header-subtitle-harmat-green-fr, .header-title-fr, .header-subtitle-fr, .header-name-fr, .header-title-0-fr, .header-subtitle-0-fr, .header-name-0-fr, .header-title-1-fr, .header-subtitle-1-fr, .header-name-1-fr, .header-title-2-fr, .header-subtitle-2-fr, .header-name-2-fr, .header-title-3-fr, .header-subtitle-3-fr, .header-name-3-fr, .header-title-4-fr, .header-subtitle-4-fr, .header-name-4-fr, .header-title-5-fr, .header-subtitle-5-fr, .header-name-5-fr, .header-title-6-fr, .header-subtitle-6-fr, .header-name-6-fr, .header-title-harmat-green-it, .header-subtitle-harmat-green-it, .header-title-it, .header-subtitle-it, .header-name-it, .header-title-0-it, .header-subtitle-0-it, .header-name-0-it, .header-title-1-it, .header-subtitle-1-it, .header-name-1-it, .header-title-2-it, .header-subtitle-2-it, .header-name-2-it, .header-title-3-it, .header-subtitle-3-it, .header-name-3-it, .header-title-4-it, .header-subtitle-4-it, .header-name-4-it, .header-title-5-it, .header-subtitle-5-it, .header-name-5-it, .header-title-6-it, .header-subtitle-6-it, .header-name-6-it { text-align: left; color: #FFFFFF !important; filter: drop-shadow(1px 0px 7px rgba(0,0,0,0.3)); } .header-title-harmat-green-de { font-size: 6.8vw; line-height: 6.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; margin-bottom: 15px;} .header-title-de { font-size: 9vw; line-height: 9vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-0-de { font-size: 7vw; line-height: 7.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } .header-title-1-de { font-size: 9vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } .header-title-2-de { font-size: 8vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-3-de { font-size: 7.2vw; line-height: 5.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-4-de { font-size: 8.6vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-5-de { font-size: 8.6vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-6-de { font-size: 7.2vw; line-height: 5.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-harmat-green-de { font-size: 4vw; line-height: 4.5vw; padding-right: 0; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-0-de { font-size: 5vw; line-height: 5.5vw; padding-right: 0; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-1-de { font-size: 6vw; line-height: 6vw; padding-right: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-2-de { font-size: 5.4vw; line-height: 6vw; padding-right: 0; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-3-de { font-size: 5.9vw; line-height: 6vw; padding-right: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-4-de { font-size: 4.9vw; line-height: 5vw; padding-right: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-5-de { font-size: 5.9vw; line-height: 6vw; padding-right: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-6-de { font-size: 4.9vw; line-height: 5vw; padding-right: 9vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-name-0-de { font-size: 1.5vw; line-height: 1vw; padding-right: 39.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-1-de { font-size: 1.5vw; line-height: 1vw; padding-right: 39.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-2-de { font-size: 1.5vw; line-height: 1vw; padding-right: 17.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-3-de { font-size: 1.5vw; line-height: 1vw; padding-right: 34.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-4-de { font-size: 1.5vw; line-height: 1vw; padding-right: 20.3vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-5-de { font-size: 1.5vw; line-height: 1vw; padding-right: 22.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-6-de { font-size: 1.5vw; line-height: 1vw; padding-right: 30vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-title-harmat-green-fr { font-size: 6.8vw; line-height: 6.1vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-fr { font-size: 9vw; line-height: 9vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-0-fr { font-size: 7vw; line-height: 7.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } .header-title-1-fr { font-size: 8.3vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 2px; } .header-title-2-fr { font-size: 7.3vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 2px; } .header-title-3-fr { font-size: 7vw; line-height: 5.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-title-4-fr { font-size: 7vw; line-height: 5.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-title-5-fr { font-size: 8.55vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-title-6-fr { font-size: 7vw; line-height: 5.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-subtitle-harmat-green-fr { font-size: 4vw; line-height: 4.5vw; padding-right: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-0-fr { font-size: 4.5vw; line-height: 6vw; padding-right: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-1-fr { font-size: 5.95vw; line-height: 6vw; padding-right: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-2-fr { font-size: 5.75vw; line-height: 6vw; padding-right: 10vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-3-fr { font-size: 5vw; line-height: 5vw; padding-right: 23vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-4-fr { font-size: 5vw; line-height: 5vw; padding-right: 8vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-5-fr { font-size: 6vw; line-height: 6vw; padding-right: 8vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-6-fr { font-size: 5vw; line-height: 5vw; padding-right: 24vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-name-0-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 47vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-1-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 47vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-2-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 41vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-3-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 48.7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-4-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 9.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-5-fr { font-size: 1.5vw; line-height: 3vw; padding-right: 8.7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-6-fr { font-size: 1.5vw; line-height: 1vw; padding-right: 38vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-title-harmat-green-it { font-size: 8vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-it { font-size: 9vw; line-height: 9vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-0-it { font-size: 6vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } .header-title-1-it { font-size: 8.3vw; line-height: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 2px; } .header-title-2-it { font-size: 8vw; line-height: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0px; } .header-title-3-it { font-size: 8.1vw; line-height: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-title-4-it { font-size: 7.3vw; line-height: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-title-5-it { font-size: 8.1vw; line-height: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } .header-title-6-it { font-size: 7.3vw; line-height: 6vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-harmat-green-it { font-size: 4vw; line-height: 4.5vw; padding-right: 0vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; } .header-subtitle-0-it { font-size: 4.5vw; line-height: 7vw; padding-right: 0vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; } .header-subtitle-1-it { font-size: 6.1vw; line-height: 6vw; padding-right: 0vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 1px; } .header-subtitle-2-it { font-size: 5.8vw; line-height: 6vw; padding-right: 1vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-3-it { font-size: 5.6vw; line-height: 6vw; padding-top: 10px; padding-right: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-4-it { font-size: 5vw; line-height: 5vw; padding-right: 3vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-5-it { font-size: 5.6vw; line-height: 6vw; padding-top: 10px; padding-right: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-subtitle-6-it { font-size: 5vw; line-height: 5vw; padding-right: 1vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } .header-name-0-it { font-size: 1.5vw; line-height: 1vw; padding-right: 53.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-1-it { font-size: 1.5vw; line-height: 1vw; padding-right: 53.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-2-it { font-size: 1.5vw; line-height: 1vw; padding-right: 30vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-3-it { font-size: 1.5vw; line-height: 1vw; padding-right: 30.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-4-it { font-size: 1.5vw; line-height: 1vw; padding-right: 4.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-5-it { font-size: 1.5vw; line-height: 1vw; padding-right: 10vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } .header-name-6-it { font-size: 1.5vw; line-height: 1vw; padding-right: 41.3vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } @media screen and (min-width: 2200px) { .header-subtitle-6-de { padding-right: 5vw; } } @media screen and (min-width: 1920px) { .header-content-de, .header-content-de .rhomboid { max-width: 54vw; } .header-content-fr, .header-content-fr .rhomboid { max-width: 65vw; } .header-content-it, .header-content-it .rhomboid { max-width: 65vw; } .header-content-0-de, .header-content-0-de .rhomboid { /*max-width: 67vw;*/ max-width: 63vw; } .header-content-1-de, .header-content-1-de .rhomboid { max-width: 65vw; } .header-content-2-de, .header-content-2-de .rhomboid { max-width: 64vw; } .header-content-3-de, .header-content-3-de .rhomboid { max-width: 60vw; } .header-content-4-de, .header-content-4-de .rhomboid { max-width: 53vw; } .header-content-5-de, .header-content-5-de .rhomboid { max-width: 61vw; } .header-content-6-de, .header-content-6-de .rhomboid { max-width: 51vw; } .header-content-0-fr, .header-content-0-fr .rhomboid { /*max-width: 67vw;*/ max-width: 63vw; } .header-content-1-fr, .header-content-1-fr .rhomboid { max-width: 76vw; } .header-content-2-fr, .header-content-2-fr .rhomboid { max-width: 77vw; } .header-content-3-fr, .header-content-3-fr .rhomboid { max-width: 73vw; } .header-content-4-fr, .header-content-4-fr .rhomboid { max-width: 73vw; } .header-content-5-fr, .header-content-5-fr .rhomboid { max-width: 80vw; } .header-content-6-fr, .header-content-6-fr .rhomboid { max-width: 62vw; } .header-content-0-it, .header-content-0-it .rhomboid { /*max-width: 73vw;*/ max-width: 63vw; } .header-content-1-it, .header-content-1-it .rhomboid { max-width: 78vw; } .header-content-2-it, .header-content-2-it .rhomboid { max-width: 69vw; } .header-content-3-it, .header-content-3-it .rhomboid { max-width: 73vw; } .header-content-4-it, .header-content-4-it .rhomboid { max-width: 61vw; } .header-content-5-it, .header-content-5-it .rhomboid { max-width: 73vw; } .header-content-6-it, .header-content-6-it .rhomboid { max-width: 60vw; } .header-title-0-de { /*font-size: 134.4px; line-height: 144px;*/ font-size: 126px; line-height: 140px; } .header-title-1-de { font-size: 8.9vw; } .header-title-2-de { font-size: 7.9vw; } .header-title-3-de { font-size: 7vw; } .header-title-4-de { font-size: 8.5vw; } .header-title-0-fr { /*font-size: 134.4px; line-height: 144px;*/ font-size: 126px; line-height: 140px; } .header-title-1-fr { font-size: 8.9vw; } .header-title-2-fr { font-size: 7.8vw; } .header-title-3-fr { font-size: 7vw; } .header-title-0-it { /*font-size: 134.4px; line-height: 144px;*/ font-size: 126px; line-height: 135px; } .header-title-1-it { font-size: 8.9vw; } .header-title-2-it { font-size: 7.9vw; } .header-title-3-it { font-size: 8.0vw; } .header-title-4-it { font-size: 7.1vw; } .header-subtitle-4-de { font-size: 4.8vw; } .header-name-3-it { padding-right: 30.5vw; } .header-title-harmat-green-de { font-size: } .header-title-harmat-green-fr { font-size: } .header-title-harmat-green-fr { font-size: } } @media screen and (max-width: 1919px) { .header-title-0-fr { font-size: 7vw; line-height: 7.5vw; } .header-content-0-fr { right: 1vw; } .header-name-4-de { padding-right: 19.7vw; } .header-name-5-de { padding-right: 22.5vw; } .header-name-4-it { padding-right: 4.5vw; } } @media screen and (max-width: 1899px) { .header-name-4-fr { padding-right: 10vw; } .header-name-5-fr { padding-right: 8.8vw; } } @media screen and (max-width: 1799px) { .header-name-5-fr { padding-right: 9.2vw; } .header-name-3-it { padding-right: 31vw; } .header-name-4-it { padding-right: 5vw; } .header-name-5-it { padding-right: 10.5vw; } } @media screen and (max-width: 1699px) { .header-name-4-fr { padding-right: 10.5vw; } .header-name-5-fr { padding-right: 9.5vw; } .header-name-5-it { padding-right: 11vw; } .header-content-0-fr .btn-slider, .header-content-0-it .btn-slider { right: 1vw; } } @media screen and (max-width: 1599px) { .header-name-2-de { padding-right: 18vw; } .header-title-0-it { font-size: 6.3vw; line-height: 6.5vw; } .header-name-2-fr { padding-right: 41.5vw; } .header-name-3-fr { padding-right: 49vw; } .header-name-4-fr { padding-right: 10.5vw; } .header-name-2-it { padding-right: 29.5vw; } .header-name-3-it { padding-right: 31vw; } .header-name-4-it { padding-right: 5.5vw; } .header-name-5-it { padding-right: 11vw; } .header-content-0-it .btn-slider { top: 1vh; right: 6vw; } } @media screen and (max-width: 1499px) { .header-name-2-de { padding-right: 18.5vw; } .header-subtitle-0-de { font-size: 4.5vw; } .header-content-0-de .btn-slider { top: 2vh; } .header-content-0-it .btn-slider { top: 1vh; } .header-content-0-de .btn-slider, .header-content-0-fr .btn-slider, .header-content-0-it .btn-slider { padding: 10px 40px; } .header-name-5-de { padding-right: 23vw; } .header-name-6-de { padding-right: 30.5vw; } .header-name-4-fr { padding-right: 11vw; } .header-name-3-it { padding-right: 31.5vw; } .header-name-6-it { padding-right: 41.5vw; } } @media screen and (max-width: 1399px) { .header-name-2-de { padding-right: 18.5vw; } .header-name-3-de { padding-right: 35vw; } .header-name-4-de { padding-right: 20.3vw; } .header-name-5-de { padding-right: 23vw; } .header-name-6-de { padding-right: 30.5vw; } .header-name-1-fr { padding-right: 47.5vw; } .header-name-2-fr { padding-right: 42vw; } .header-name-3-fr { padding-right: 49vw; } .header-name-4-fr { padding-right: 11.3vw; } .header-name-5-fr { padding-right: 10.3vw; } .header-name-6-fr { padding-right: 38.5vw; } .header-name-2-it { padding-right: 30vw; } .header-name-3-it { padding-right: 31.7vw; } .header-name-4-it { padding-right: 6vw; } .header-name-5-it { padding-right: 11.5vw; } .header-name-6-it { padding-right: 42vw; } .header-content-0-it .btn-slider { right: 6vw; } header.header .header-text { font-size: 3.5vw; } } @media screen and (max-width: 1299px) { .header-name-2-de { padding-right: 18.5vw; } .header-name-5-de { padding-right: 23.3vw; } .header-name-6-de { padding-right: 30.5vw; } .header-name-2-fr { padding-right: 42vw; } .header-name-3-fr { padding-right: 49.5vw; } .header-name-4-fr { padding-right: 11.3vw; } .header-name-2-it { padding-right: 30.5vw; } .header-name-3-it { padding-right: 32vw; } .header-name-4-it { padding-right: 6.5vw; } .header-name-5-it { padding-right: 12.5vw; } .header-name-6-it { padding-right: 42vw; } .header-content-0-de .btn-slider { padding: 11px 40px; font-size: 30px !important; } .header-content-0-fr .btn-slider { padding: 11px 30px; } .header-content-0-it .btn-slider { top: 1vh; padding: 11px 30px; right: 5vw; } } @media screen and (max-width: 1199px) { .header-name-2-de { padding-right: 18.5vw; } .header-content-0-de .btn-slider { top: 2vh; } .header-content-0-fr .btn-slider { top: 1vh; font-size: 2.7vw; } .header-subtitle-4-it { padding-right: 6vw; } .header-name-2-fr { padding-right: 42vw; } .header-name-4-fr { padding-right: 12vw; } .header-name-5-fr { padding-right: 11.3vw; } .header-name-2-it { padding-right: 30.5vw; } .header-name-3-it { padding-right: 32.5vw; } .header-name-4-it { padding-right: 7vw; } .header-name-6-it { padding-right: 42vw; } .header-content-0-it .btn-slider { top: 1vh; } } @media screen and (max-width: 1099px) { .header-title-0-fr { font-size: 7vw; line-height: 7.5vw; } .header-content-0-de .btn-slider { top: 1vh; } .header-name-2-de { padding-right: 19.5vw; } .header-name-3-de { padding-right: 35.5vw; } .header-name-4-de { padding-right: 21vw; } .header-name-1-fr { padding-right: 48vw; } .header-name-2-fr { padding-right: 42.5vw; } .header-name-3-fr { padding-right: 50vw; } .header-name-4-fr { padding-right: 12.5vw; } .header-name-5-fr { padding-right: 11.5vw; } .header-name-6-fr { padding-right: 39vw; } .header-name-2-it { padding-right: 30.5vw; } .header-name-3-it { padding-right: 32.5vw; } .header-name-4-it { padding-right: 7.7vw; } .header-name-5-it { padding-right: 13.5vw; } .header-name-6-it { padding-right: 42.5vw; } .header-content-0-it .btn-slider { top: 1vh; } } @media screen and (max-width: 991px) { .header-name-1-de { padding-right: 40vw; } .header-name-2-de { padding-right: 19.5vw; } .header-name-3-de { padding-right: 35.5vw; } .header-name-4-de { padding-right: 21.3vw; } .header-name-5-de { padding-right: 24vw; } .header-name-6-de { padding-right: 31vw; } .header-name-2-fr { padding-right: 42.5vw; } .header-name-3-fr { padding-right: 50vw; } .header-name-4-fr { padding-right: 13vw; } .header-name-5-fr { padding-right: 12vw; } .header-name-6-fr { padding-right: 39vw; } .header-name-2-it { padding-right: 31vw; } .header-name-3-it { padding-right: 33vw; } .header-name-4-it { padding-right: 8.5vw; } .header-name-5-it { padding-right: 13.5vw; } .header-name-6-it { padding-right: 42.5vw; } .header-content-0-de .btn-slider { top: 0vw; font-size: 26px !important; } .header-content-0-fr .btn-slider { top: 1vw; right: 2vw; } .header-content-0-it .btn-slider { top: 2vw; right: 4vw; } } @media screen and (max-width: 899px) { .header-name-1-de { padding-right: 40.5vw; } .header-name-2-de { padding-right: 21vw; } .header-name-3-de { padding-right: 35.8vw; } .header-subtitle-4-de { padding-right: 10vw; } .header-name-4-de { padding-right: 22vw; } .header-name-6-de { padding-right: 31.5vw; } .header-name-2-fr { padding-right: 43vw; } .header-name-3-fr { padding-right: 50vw; } .header-name-4-fr { padding-right: 14vw; } .header-name-5-fr { padding-right: 12.5vw; } .header-name-6-fr { padding-right: 39vw; } .header-name-2-it { padding-right: 31.5vw; } .header-name-3-it { padding-right: 34vw; } .header-name-4-it { padding-right: 9vw; } .header-name-5-it { padding-right: 14.5vw; } .header-name-6-it { padding-right: 43vw; } } @media screen and (max-width: 799px) { .header-name-5-de { padding-right: 25vw; } .header-name-3-fr { padding-right: 51vw; } .header-name-4-fr { padding-right: 14.5vw; } .header-name-5-fr { padding-right: 13.3vw; } .header-name-6-fr { padding-right: 40vw; } .header-name-4-it { padding-right: 9.5vw; } .header-name-5-it { padding-right: 15vw; } } @media screen and (max-width: 767px) { .swiper-container { display: none; } .header { margin-top: 0; } .swiper-slide { height: auto !important; } .header-content { top: 110vw; right: 0%; left: 0; margin-right: auto; margin-left: auto; position: absolute; } .btn-slider { top: 3vh; padding: 12px 45px; background-color: #E76610; color: #FFFFFF !important; text-decoration: none; position: relative; -webkit-box-shadow: 0px 0px 1px 0px #FFFFFF; box-shadow: 0px 0px 1px 0px #FFFFFF; } .img-hero { width: 55vw; top: 10vw; } .header-content-0-de .btn-slider { top: 5vw; } .header-content-0-fr .btn-slider { top: 5vw; } .header-content-0-it .btn-slider { top: 5vw; } .header-content-1-de { top: 110vw; } .header-content-1-fr { max-width: 85vw; top: 110vw; } .header-content-1-it { max-width: 85vw; top: 110vw; } .header-subtitle-1-de { padding-right: 17vw; } .header-name-1-de { padding-right: 41vw; } .header-name-1-fr { padding-right: 16vw; } .header-name-1-it { padding-right: 60.5vw; } } @media screen and (max-width: 664px) { .header-content-1-fr { max-width: 86vw; } .header-name-1-fr { padding-right: 18vw; } } @media screen and (max-width: 584px) { .header-content-1-fr { max-width: 87vw; } .header-name-1-fr { padding-right: 21vw; } } @media screen and (max-width: 499px) { .header-content { top: 103vw; max-width: 90vw; } .img-hero { width: 90vw; top: 108vw; display: none; } .img-hero-mobile { width: 37vw !important; top: 12vw; display: block; } .header-title, .header-subtitle, .header-name, .btn-slider, #mobile-header .header-content-de, #mobile-header .header-content-fr, #mobile-header .header-content-it { display: none; } } @media screen and (max-width: 479px) { .header-name-1-fr { padding-right: 27vw; } } /* Mobile-Header */ #mobile-header .container-header { width: 100%; max-width: 1400px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; position: relative; overflow: hidden; list-style: none; z-index: 1; } .img-mobile-header { width: 100%; } #mobile-header .mobile-header-content { top: 38%; max-width: 48vw; position: absolute; } #mobile-header .mobile-header-text { max-width: 500px; font-size: 3.5vw; font-weight: 100; font-family: 'DIN-Light', 'Helvetica', 'Arial', 'sans-serif' !important; color: #3d526e; text-transform: uppercase; text-align: left; } #mobile-header .header-content-1-de { width: 100%; max-width: 93vw; top: 104vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header .header-content-1-fr { width: 100%; max-width: 93vw; top: 104vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header .header-content-1-it { width: 100%; max-width: 93vw; top: 104vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header .header-title-1-de { font-size: 13vw; line-height: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header .header-subtitle-1-de { font-size: 9vw; line-height: 8.5vw; padding-right: 12vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header .header-name-1-de { font-size: 3vw; line-height: 1vw; padding-right: 35.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header .header-title-1-fr { font-size: 12vw; line-height: 12vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } #mobile-header .header-subtitle-1-fr { font-size: 8.5vw; line-height: 7vw; padding-right: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header .header-name-1-fr { font-size: 2.5vw; line-height: 3vw; padding-right: 42vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header .header-title-1-it { font-size: 13vw; line-height: 11vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } #mobile-header .header-subtitle-1-it { font-size: 9vw; line-height: 8.5vw; padding-right: 11vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header .header-name-1-it { font-size: 2.5vw; line-height: 3vw; padding-right: 35vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header .next-screen a { height: 50px; font-size: 5vw !important; line-height: 1; color: #FFFFFF; text-decoration: none; display: block; overflow: hidden; transition: all 350ms; } #mobile-header .icon-bottom::before { content: "\e903"; } @media screen and (min-width: 768px) { #mobile-header { display: none; } #mobile-header .next-screen { display: none; } } @media screen and (max-width: 767px) { #mobile-header { display: block; } #mobile-header .next-screen { bottom: 50px; text-align: center; display: block; position: relative; z-index: 9; } #mobile-header .next-screen:hover a { color: #E76610 !important; transition: all 350ms; } #mobile-header .header-content-1-de { width: 100%; max-width: 93vw; top: unset; bottom: 20vw; margin: 0 auto; position: absolute; } #mobile-header .header-content-1-fr { width: 100%; max-width: 93vw; top: unset; bottom: 20vw; margin: 0 auto; position: absolute; } #mobile-header .header-content-1-it { width: 100%; max-width: 93vw; top: unset; bottom: 20vw; margin: 0 auto; position: absolute; } #mobile-header .header-name-1-de { padding-right: 17.5vw; line-height: 3vw; } #mobile-header .btn-slider { display: none; } #mobile-header .img-mobile-header { width: 100%; max-width: 767px; height: 100vh; margin: 0; padding: 0; object-fit: cover; object-position: center center; } } @media screen and (max-width: 699px) { #mobile-header .header-name-1-de { padding-right: 18.5vw; } #mobile-header .header-name-1-fr { padding-right: 43vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 35vw; } } @media screen and (max-width: 649px) { #mobile-header .header-name-1-de { padding-right: 19vw; } #mobile-header .header-name-1-fr { padding-right: 43vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 35.5vw; } } @media screen and (max-width: 599px) { #mobile-header .header-name-1-de { padding-right: 20vw; } #mobile-header .header-name-1-fr { padding-right: 43vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 36vw; } } @media screen and (max-width: 575px) { #mobile-header .mobile-header-content { max-width: 50vw; padding-left: 15px; } } @media screen and (max-width: 549px) { #mobile-header .header-name-1-de { padding-right: 20vw; } #mobile-header .header-name-1-fr { padding-right: 44vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 37vw; } } @media screen and (max-width: 499px) { #mobile-header .header-name-1-de { padding-right: 21vw; } #mobile-header .header-name-1-fr { padding-right: 44vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 37.5vw; } } @media screen and (max-width: 479px) { #mobile-header .img-mobile-header { width: 100%; max-width: 479px; height: 100vh; margin: 0; padding: 0; object-fit: cover; object-position: bottom; } #mobile-header .mobile-header-text { font-size: 4.5vw; } #mobile-header .btn-slider { font-size: 6vw; } #mobile-header .header-name-1-de { padding-right: 21.5vw; } #mobile-header .header-name-1-fr { padding-right: 45vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 37.5vw; } } @media screen and (max-width: 429px) { #mobile-header .mobile-header-text { font-size: 4.5vw; } #mobile-header .header-name-1-de { padding-right: 22vw; } #mobile-header .header-name-1-fr { padding-right: 45vw; } #mobile-header .header-name-1-it { padding-right: 38.5vw; } } @media screen and (max-width: 414px) { #mobile-header .header-subtitle-1-fr { letter-spacing: -1px; } #mobile-header .header-name-1-de { padding-right: 22.5vw; font-size: 4vw; } #mobile-header .header-name-1-fr { padding-right: 42vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 39vw; } } @media screen and (max-width: 375px) { #mobile-header .header-subtitle-1-de { letter-spacing: -1px; } #mobile-header .header-subtitle-1-fr { letter-spacing: -1px; } #mobile-header .header-subtitle-1-it { letter-spacing: -1px; } #mobile-header .header-name-1-de { padding-right: 18vw; font-size: 4.5vw; } #mobile-header .header-name-1-fr { padding-right: 42vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 35vw; } } @media screen and (max-width: 349px) { #mobile-header .header-subtitle-1-de { letter-spacing: -1px; } #mobile-header .header-subtitle-1-fr { letter-spacing: -1px; } #mobile-header .header-subtitle-1-it { letter-spacing: -1px; } #mobile-header .header-name-1-de { padding-right: 18.5vw; font-size: 4.5vw; } #mobile-header .header-name-1-fr { padding-right: 42vw; font-size: 2.5vw; } #mobile-header .header-name-1-it { padding-right: 35vw; } } /* Mobile-Header-WG */ #mobile-header-wg .rhomboid { width: 100%; max-width: 90vw; height: auto; margin: 0; margin-left: 2px; float: left; } #mobile-header-wg .container-header { width: 100%; max-width: 1400px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; position: relative; overflow: hidden; list-style: none; z-index: 1; } #mobile-header-wg .mobile-header-content { top: 38%; max-width: 48vw; position: absolute; } #mobile-header-wg .mobile-header-text { max-width: 500px; font-size: 3.5vw; font-weight: 100; font-family: 'DIN-Light', 'Helvetica', 'Arial', 'sans-serif' !important; color: #3d526e; text-transform: uppercase; text-align: left; } #mobile-header-wg a:focus, #mobile-header-wg a:focus-visible { color: #FFFFFF !important; outline: 0 } #mobile-header-wg .header-content-de { width: 100%; max-width: 93vw; top: 90vw; right: 0%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header-wg .header-content-0-de { width: 100%; max-width: 90vw; top: 101vw; right: 4%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header-wg .header-content-0-fr { width: 100%; max-width: 90vw; top: 101vw; right: 4%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header-wg .header-content-0-it { width: 100%; max-width: 90vw; top: 101vw; right: 4%; left: 0%; margin: 0 auto; position: absolute; } #mobile-header-wg .header-title-0-de { font-size: 13vw; line-height: 13vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header-wg .header-subtitle-0-de { font-size: 9vw; line-height: 8.5vw; padding-right: 12vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header-wg .header-name-0-de { font-size: 3vw; line-height: 1vw; padding-right: 35.5vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header-wg .header-title-0-fr { font-size: 10vw; line-height: 12vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } #mobile-header-wg .header-subtitle-0-fr { font-size: 8.5vw; line-height: 8.5vw; padding-right: 7vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header-wg .header-name-0-fr { font-size: 3vw; line-height: 3vw; padding-right: 10vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header-wg .header-content-0-fr .btn-slider { max-width: 290px; padding: 12px 18px; } #mobile-header-wg .header-title-0-it { font-size: 9vw; line-height: 10vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -1px; } #mobile-header-wg .header-subtitle-0-it { font-size: 8.5vw; line-height: 8.5vw; padding-right: 11vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: -2px; } #mobile-header-wg .header-name-0-it { font-size: 3vw; line-height: 1vw; padding-right: 14vw; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; letter-spacing: 0; text-align: right; color: #FFFFFF !important; } #mobile-header-wg .header-content-0-it .btn-slider { padding: 12px 34px; } @media screen and (min-width: 768px) { #mobile-header-wg { display: none; } } @media screen and (max-width: 767px) { #mobile-header-wg .img-hero { width: 50vw !important; top: 4.5vw; } #mobile-header-wg { display: block; } #mobile-header-wg .img-mobile-header { width: 100%; max-width: 767px; height: 100%; margin: 0; padding: 0; /*object-fit: contain; object-position: center center;*/ } #mobile-header-wg .header-title-0-de { font-size: 12vw; } } @media screen and (max-width: 575px) { #mobile-header-wg .mobile-header-content { max-width: 50vw; padding-left: 15px; } } @media screen and (max-width: 499px) { #mobile-header-wg .header-content-0-de, #mobile-header-wg .header-content-0-fr, #mobile-header-wg .header-content-0-it { left: 15px; } #mobile-header-wg .img-hero-mobile { width: 50vw !important; top: 4.5vw; } #mobile-header-wg .btn-slider { width: 100%; max-width: 326px; left: 0; padding: 11px 15px !important; font-size: 6vw; text-align: center; float: unset; display: block; } } @media screen and (max-width: 479px) { #mobile-header-wg .img-mobile-header { width: 100%; max-width: 479px; height: 100%; margin: 0; padding: 0; } #mobile-header-wg .mobile-header-text { font-size: 4.5vw; } } @media screen and (max-width: 449px) { #winner-posts .statement-div { font-size: 25px !important; } } @media screen and (max-width: 429px) { #mobile-header-wg .mobile-header-text { font-size: 4.5vw; } } @media screen and (max-width: 399px) { #mobile-header-wg .header-title-0-fr { font-size: 10.1vw; } #mobile-header-wg .img-hero-mobile { width: 37vw !important; top: 12vw; } #mobile-header-wg .btn-slider { width: 100%; max-width: 325px !important; left: 0; font-size: 6vw; float: unset; display: block; } #winner-posts .statement-div { font-size: 23px !important; line-height: 28px; } } @media screen and (max-width: 349px) { #mobile-header-wg .header-title-0-de { font-size: 12.1vw; } #mobile-header-wg .header-title-0-fr { font-size: 10.2vw; } } /* Section Chris Harmat */ #harmat-teaser { display: none; } #chris-harmat { padding-top: 80px; } #harmat-teaser { margin-top: 80px; padding-top: 120px; padding-bottom: 120px; } section.harmat-teaser .container { width: 100%; max-width: 1800px; padding-right: 30px; padding-left: 30px; margin-right: auto; margin-left: auto; } section.harmat-teaser .btn-rotate { margin-top: 160px; margin-left: 10px; line-height: 20px; letter-spacing: -1px; text-transform: none; -webkit-transform: rotate(-11deg); -moz-transform: rotate(-11deg); -ms-transform: rotate(-11deg); -o-transform: rotate(-11deg); transform: rotate(-11deg); } section.harmat-teaser .harmat-teaser-title { font-size:clamp(44px, 5vw, 230px); line-height:clamp(48px, 5vw, 270px); } section.harmat-teaser .harmat-teaser-title { font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: -5px; text-transform: none; filter: drop-shadow(-4px 8px 5px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-subtitle { font-size:clamp(32px, 8vw, 150px); line-height:clamp(38px, 9vw, 150px); } section.harmat-teaser .harmat-teaser-subtitle { font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: -2px; text-transform: none; filter: drop-shadow(-4px 8px 5px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-text { font-size:clamp(26px, 2vw, 40px) !important; line-height:clamp(30px, 2vw, 44px) !important; } section.harmat-teaser .harmat-teaser-text { max-width: 100%; margin-left: 4px; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: -1px; text-transform: none; } section.harmat-teaser .content-harmat-teaser { margin-top: 0; } section.harmat-teaser .img-fragezeichen { width: 300px; margin-top: -136px; margin-left: 21px; position: absolute; } section.harmat-teaser .img-sprechblase { width: 485px; margin-top: -429px; margin-left: 132%; position: absolute; } @media screen and (max-width: 1399px) { #harmat-teaser { padding-top: 15vw; } section.harmat-teaser .harmat-teaser-title { letter-spacing: -2px; } section.harmat-teaser .harmat-teaser-subtitle { letter-spacing: 0; } section.harmat-teaser .harmat-teaser-text { font-size: 2.85vw; line-height: 3.15vw; } section.harmat-teaser .img-fragezeichen { width: 21.4vw; } section.harmat-teaser .img-sprechblase { width: 34.64vw; margin-top: -31vw; margin-left: 132%; position: absolute; } } @media screen and (max-width: 991px) { #harmat-teaser { padding-top: 15vw; padding-bottom: 25vw; filter: drop-shadow(-2px 7px 4px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-title { letter-spacing: -2px; filter: drop-shadow(-2px 7px 4px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-subtitle { letter-spacing: 0; } section.harmat-teaser .harmat-teaser-text { letter-spacing: 0; } section.harmat-teaser .img-fragezeichen { display: none; } section.harmat-teaser .img-sprechblase { margin-left: 138%; } section.harmat-teaser .btn-rotate { margin-top: 10vw; } } @media screen and (max-width: 767px) { #harmat-teaser .col-md-7 { max-width: 100%; flex: 0 0 100%; } section.harmat-teaser .harmat-teaser-title { filter: drop-shadow(-1px 6px 4px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-subtitle { letter-spacing: 0; filter: drop-shadow(-1px 6px 4px rgba(0,0,0,0.3)); } section.harmat-teaser .harmat-teaser-text { max-width: 90%; margin-left: 0; } section.harmat-teaser .harmat-teaser-text, section.harmat-teaser .harmat-teaser-title { letter-spacing: 0; } } @media screen and (max-width: 499px) { section.harmat-teaser .harmat-teaser-title { filter: none; } section.harmat-teaser .harmat-teaser-subtitle { filter: none; } } @media screen and (max-width: 399px) { section.harmat-teaser .harmat-teaser-title { margin-right: 15px; } section.harmat-teaser .harmat-teaser-subtitle { letter-spacing: 1px; } } /* Socials Chris Harmat */ /*#chris-harmat .container { display: grid; place-items: center; }*/ #chris-harmat .col-md-4 { padding-right: 0; padding-left: 0; } #chris-harmat .chris-more { padding: 15px; border: 3px solid #E76610; border-radius: 25px; } #chris-harmat .chris-more h2 { font-size: clamp(26px, 2.5vw, 46px); line-height: 3vw; letter-spacing: 0; color: #E76610; } #chris-harmat .chris-harmat-socials-title { text-align: center; } #chris-harmat ul.portraits-socials { width: auto; max-width: 200px; margin: 15px auto; display: block; } #chris-harmat ul.portraits-socials li a { padding: 0 10px; color: #000000; } #chris-harmat ul.portraits-socials li a:hover { color: #606060 !important; } #chris-harmat ul.portraits-socials .social-teilen { margin-right: 10px; } #chris-harmat ul.chris-harmat-socials { width: 100%; max-width: 165px; margin: 15px auto 0; display: block; } #chris-harmat ul.chris-harmat-socials li { padding: 0 10px; } #chris-harmat ul.chris-harmat-socials li:hover img { scale: 1.1; transition: all 350ms; } #chris-harmat ul.chris-harmat-socials li img { width: 35px; transition: all 350ms; } @media screen and (max-width: 991px) { #chris-harmat ul.portraits-socials { max-width: clamp(170px, 20vw, 190px); } } @media screen and (max-width: 767px) { #chris-harmat .col-md-4 { padding-right: 15px; padding-left: 15px; } #chris-harmat .chris-more { width: auto; margin: 0 auto; } } /* Formular Chris Harmat */ /*.featherlight .featherlight-content #chris { display: grid; place-items: center; }*/ #chris .md-content { width: auto; height: 100vh; top: 0%; right: 0%; bottom: 0%; left: 0%; margin: 0 auto; padding: 10vw 20vw; background: #000000; border-radius: 3px; color: #fff; position: relative; } #chris .md-content > p { margin-bottom: 40px; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-size: 35px; line-height: 38px; letter-spacing: 0px; text-align: left; color: #FFFFFF; opacity: 1; cursor: pointer; text-decoration: none; } #chris .col-md-5, #chris .col-md-5 .col, #chris .col-md-6, #chris .col-md-7, #chris .col-md-7 .col { padding-left: 0; } #chris .col-md-6:last-child { padding-right: 0; } #chris .col-md-12 { margin: 0; padding: 0; } #chris .md-content .form-group:last-child { padding-right: 0; } #chris .md-content .form-text, #chris .md-content .form-text-pflichtfelder { margin-left: 0; } #chris .md-content .form-text-pflichtfelder { margin-top: -85px; } #chris .md-content .pflichtfelder { margin-bottom: 30px; } #chris .md-content .radio-teilnahmebedingungen { margin-top: 12px; margin-right: -15px; margin-left: 0; } #chris .md-content .btn-einreichen { width: 100%; top: 0; right: 15px; } #chris .text-link { margin-top: 40px; margin-left: 15px; font-size: 24px; line-height: 28px; } #chris .text-box { margin-top: 15px; margin-left: 15px; } #chris textarea { line-height: 36px; } #chris .btn-chris { width: 96.5%; top: 15px; right: 0; margin: 0; margin-bottom: 50px; padding: 10px 0px; font-size: 35px; line-height: 52px; display: block; transition: all 350ms; } #chris .btn-chris:hover { background-color: #3D8983; transition: all 350ms; } @media screen and (max-width: 1699px) { #chris .btn-chris { font-size: 28px; } } @media screen and (max-width: 1199px) { #chris .md-content .radio-teilnahmebedingungen { margin-top: 7px; } #chris .btn-chris { font-size: 26px; } } @media screen and (max-width: 1099px) { #chris .md-content .teilnahmebedingungen { padding-right: 30px; } } @media screen and (max-width: 991px) { #chris .md-content { padding: 10vh 15vw 18vh; } #chris .md-content .img-optional-text { margin-top: -50px; } #chris .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #chris .md-content .text-link, #chris .md-content .text-box { margin-left: 15px; } #chris .md-content textarea { line-height: 28px !important; } #chris .md-content .btn-chris { font-size: 2.5vw; } } @media screen and (min-width: 768px) and (max-width: 991px) { #chris .md-content .btn-einreichen { margin-left: -15px; } } @media screen and (max-width: 767px) { #chris .col-md-5, #chris .col-md-5 .col, #chris .col-md-6, #chris .col-md-7, #chris .col-md-7 .col { padding-right: 0; } #chris .md-content .img-optional-text { margin-top: 0px; } #chris .md-content .file-upload { width: 100% !important; } #chris .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #chris .md-content .text-link, #chris .md-content .text-box { margin-left: 0px; } #chris .md-content textarea { line-height: 28px !important; } #chris .md-content .btn-chris { width: 100%; right: 0; margin-bottom: 0; font-size: 28px; } #chris .md-content .form-text-pflichtfelder { margin-top: 0px; } #chris .md-content .btn-einreichen { margin-top: 15px; margin-left: 0; } } @media screen and (max-width: 499px) { #chris .md-content { padding: 10vh 10vw 18vh; } #chris .md-content span { margin-left: 0px; } #chris .md-content .radio-teilnahmebedingungen { margin-right: 0; } #chris .md-content .link-teilnahmebedinungen { margin-left: 0; } } @media screen and (max-width: 399px) { #chris .md-content .img-optional-text { margin-top: 0px; } #chris .md-content .file-upload { width: 100% !important; } #chris .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #chris .md-content textarea { line-height: 28px !important; } #chris .md-content .btn-chris { font-size: 24px; } #chris .md-content span { margin: 0; margin-left: 20px; display: block; } #chris .md-content .form-text-pflichtfelder { margin-top: 0px; } } /* Section Song */ section.song { padding: 60px 0; padding-bottom: 0; position: relative; } section.song h2 { margin-top: 0; } section.song p { margin-bottom: 24px; } section.song .img-buenzlisong { width: 92%; margin-left: -75px; position: relative; z-index: 1; } section.song .radio-wrapper { margin-top: -175px; position: absolute; cursor: pointer; } #song .img-radio { margin: 0;padding: 0; display: block; position: absolute; } #song .img-buenzlisong { cursor: pointer; } #song .btn-radio { margin: 0;padding: 0; display: block; opacity: 0.5; cursor: pointer; z-index: 9; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } section.song .img-buenzlisong:hover > .btn-radio, #song .btn-radio:hover, #song .btn-radio:active, #song .btn-radio.active { opacity: 0.95; z-index: 9; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } @media screen and (max-width: 1399px) { section.song h2 { font-size: 5.7vw; } } @media screen and (max-width: 991px) { /*section.song .col-md-3 { width: 100%; max-width: 100%; flex: 0 0 100%; -ms-flex: 0 0 25%; }*/ } @media screen and (max-width: 767px) { section.song { padding: 11% 0; padding-bottom: 0; position: relative; } section.song .badges .badge-link { display: inline-block; margin-bottom: 0; } section.song h2 { max-width: 50%; font-size: 36px; } section.song .radio-wrapper { margin-top: -20vw; } section.song .img-buenzlisong { width: 45%; margin-top: -135px; margin-left: 0; float: right; position: relative; z-index: 1; } section.song .img-radio, section.song .btn-radio { width: 50vw; margin-top: -30%; margin-right: auto; margin-left: 15vw !important; display: block; } } /* Section Spot */ #spot { margin-top: 120px; } section.spot .section-heading { margin-bottom: 50px; } section.spot .section-heading h2 { margin-top: 0; } section.spot .section-heading p { margin-bottom: 0; } .spot-content-list { padding-left: 15px; float: left; font-family: 'DIN-Light', 'Helvetica', 'Arial', 'sans-serif'; margin-bottom: 20px; font-size: 18px; line-height: 28px; color: #A0A0A0; } section.spot .device-container, section.spot .feature-item { max-width: 325px; margin: 0 auto; } section.spot .device-container { margin-bottom: 100px; } section.spot .img-spot { width: 100%; max-width: 1400px; } section.spot .video-wrapper, section.spot .video-wrapper:focus, section.spot .video-wrapper.focus { width:auto; display:table; position:relative; box-shadow: none !important; outline: 0 !important; } section.spot .playpause { width:20%; height:20%; top:0%; right:0%; bottom:0%; left:0%; margin:auto; cursor: pointer; background-image:url('https://werde-buenzli.ch/assets/images/play-movie.png'); background-repeat:no-repeat; position:absolute; background-size:contain; background-position: center; opacity: 0.5; -webkit-transition: all 0.4s; transition: all 0.4s; } section.spot .video-wrapper { cursor: pointer; } section.spot .playpause:hover, section.spot .video-wrapper:hover > .playpause { opacity: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } section.spot .feature-item { padding-top: 50px; padding-bottom: 50px; text-align: center; } section.spot .feature-item h3 { font-size: 30px; } section.spot .feature-item i { font-size: 80px; display: block; margin-bottom: 15px; background: -webkit-linear-gradient(to left, #7b4397, #dc2430); background: linear-gradient(to left, #7b4397, #dc2430); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } section.spot .spot-content-list { color: #606060 !important; } section.spot .movie-play-button { width: 215px; top: 176px; left: 54%; padding: 17px; font-size: 22px; border-radius: 6px; background-color: #455674; color: white; box-shadow: 2px 2px #4556745e; cursor: pointer; text-align: center; position: absolute; z-index: 99; } section.spot .video:hover .movie-play-button, section.spot .movie-play-button:hover { background-color: #E30711; cursor: pointer; -webkit-transition: all 0.4s; transition: all 0.4s; } section.spot .video-spot:hover .movie-play-button { background-color: #E30711; -webkit-transition: all 0.4s; transition: all 0.4s; } section.spot .movie-play-button img { max-width: 50px; padding-left: 14px; } @media screen and (min-width: 992px) { section.spot .video { margin-top: 10px; display: block; } section.spot .img-video, section.spot .video-play-mobile { display: none; } } @media screen and (max-width: 991px) { section.spot .section-heading { margin-bottom: 2vw; } section.spot .video { margin-top: 15px; } section.spot .img-video { display: none; } section.spot .device-container { margin-bottom: 0; } section.spot .img-spot { margin-bottom: -30px; padding-top: 30px; } section.spot .button-video, section.spot .video-spot, section.spot .movie-play-button { display: none !important; } section.spot .video-play-mobile { width: 100%; position: relative; z-index: 99; } } @media screen and (max-width: 767px) { #spot { margin-top: 100px; } } @media screen and (max-width: 499px) { section.spot .img-spot { margin: 0; padding: 0; } } /* Section Participant */ #participant { margin-top: 120px; padding: 0; } @media screen and (max-width: 991px) { #participant .col-md-8, #participant .col-md-4 { max-width: 100%; flex: 0 0 100%; } } /* Section Produkte anbieten */ .produkte-empfehlen { margin: 120px 0; padding: 0; } @media screen and (max-width: 991px) { .produkte-empfehlen .col-md-8, .produkte-empfehlen .col-md-4 { max-width: 100%; flex: 0 0 100%; } } /* Section portraits */ #portraits { margin-top: 120px; padding: 80px 0; } #portraits h3 { letter-spacing: 0px; } section.portraits .portraits-image { margin-top: 0; margin-left: 0; display: block; z-index: 99; } section.portraits .portraits-name { margin-top: -53%; margin-left: 42%; position: absolute; display: inline-block; color: #000000; z-index: 99; } section.portraits .portraits-text { margin-top: -46%; margin-left: 42%; padding-right: 2%; position: absolute; display: inline-block; color: #E76610; z-index: 99; } section.portraits i { font-size: 24px; color: #000000; z-index: 99; } section.portraits a:hover i { color: #606060; z-index: 99; } section.portraits .owl-prev, section.portraits .owl-next { margin-top: -458px !important; } section.portraits .owl-prev { margin-left: -75px !important; font-size: 120px !important; float: left; } section.portraits .owl-next { margin-right: -75px !important; font-size: 120px !important; display: block; float: right; } section.portraits .owl-carousel, section.portraits .owl-carousel .owl-stage { background-color: #EAEAEA; } section.portraits .owl-theme .owl-nav [class*="owl-"] { background-color: transparent; color: #4C76A0; outline: none !important; } section.portraits .owl-theme .owl-nav [class*="owl-"]:hover { background-color: transparent; color: #455674; outline: none !important; } section.portraits .owl-theme .owl-dots .owl-dot span { width: 12px; height: 12px; border: 1px solid #707070; background-color: #FFFFFF; } section.portraits .owl-theme .owl-dots .owl-dot:hover span, section.portraits .owl-theme .owl-dots .owl-dot:active span, section.portraits .owl-theme .owl-dots .owl-dot.active span { border: 1px solid #455674; background-color: #455674; } section.portraits .arrow-right, section.portraits .arrow-left { margin-top: -13%; position: relative; display: block; color: #E76610; } section.portraits .arrow-right { left: 97%; } section.portraits .arrow-left { left: -5%; } section.portraits .portraits-socials { padding-left: 0; } section.portraits .social-logo { padding-right: 10px; } section.portraits .social-teilen { font-size: 24px; } @media screen and (max-width: 1549px) { section.portraits .container { max-width: 1000px; } section.portraits .portraits-name { margin-top: -56%; font-size: 30px; line-height: 32px; } section.portraits .portraits-text { font-size: 30px; line-height: 32px; } section.portraits i, section.portraits .social-teilen { font-size: 22px; } section.portraits .portraits-socials { padding-left: 0; } } @media screen and (max-width: 1299px) { section.portraits .owl-nav img { width: 15px !important; } section.portraits .owl-prev, section.portraits .owl-next { height: auto; margin: 0 !important; font-size: 0 !important; } section.portraits .owl-prev { margin-left: 15px !important; } section.portraits .owl-next { margin-right: 30px !important; } } @media screen and (max-width: 1199px) { section.portraits .portraits-name, section.portraits .portraits-text { font-size: 2.2vw; line-height: 2.2vw; } section.portraits .portraits-name { margin-top: -53%; } section.portraits .portraits-text { margin-top: -46%; } } @media screen and (max-width: 1149px) { section.portraits .arrow-right, section.portraits .arrow-left { margin-top: 5%; position: relative; display: block; color: #E76610; } section.portraits .arrow-right { left: 53%; } section.portraits .arrow-left { left: 43%; } } @media screen and (max-width: 1099px) { section.portraits .portraits-name { margin-top: -52%; } section.portraits .portraits-text { margin-top: -45%; } section.portraits i, section.portraits .social-teilen { font-size: 20px; } section.portraits .portraits-socials { padding-left: 0; } } @media screen and (max-width: 999px) { section.portraits .portraits-name { margin-top: -45%; font-size: 40px; line-height: 44px; } section.portraits .portraits-text { margin-top: -39%; font-size: 40px; line-height: 44px; } section.portraits .social-logo { padding-right: 12px; padding-left: 0; } section.portraits i, section.portraits .social-teilen { font-size: 24px; } section.portraits .portraits-socials { margin-top: -32px; margin-left: 42.5%; padding-top: 0; padding-left: 0; position: absolute; display: block; } } @media screen and (max-width: 767px) { #portraits { padding: 15px 0 40px; } section.portraits .portraits-name, section.portraits .portraits-text { margin-left: 45%; font-size: 5vw; line-height: 5.5vw; } section.portraits .portraits-socials { /*margin-top: -6%;*/ margin-left: 45%; } section.portraits .arrow-right, section.portraits .arrow-left { padding-top: 4%; } section.portraits .arrow-right, section.portraits .arrow-left { display: none; } } @media screen and (max-width: 699px) { section.portraits .portraits-socials { margin-left: 45%; } } @media screen and (max-width: 599px) { #portraits { padding: 60px 0; } section.portraits .portraits-image { margin-left: 0 !important; } section.portraits .portraits-socials { margin-top: -26px; margin-left: 46%; } section.portraits i, section.portraits .social-teilen { font-size: 20px; } section.portraits .arrow-right { left: 47%; } section.portraits .arrow-left { left: 35%; } } @media screen and (max-width: 499px) { section.portraits .portraits-name { margin-top: -46%; } section.portraits .portraits-text { margin-top: -40%; } section.portraits .portraits-socials { /*margin-top: -6%;*/ margin-left: 45%; position: relative; } section.portraits i, section.portraits .social-teilen { font-size: 18px; } } @media screen and (max-width: 399px) { section.portraits .social-logo { padding-right: 10px; } section.portraits .portraits-socials { /*margin-top: -7%;*/ margin-left: 46%; } } @media screen and (max-width: 349px) { section.portraits .portraits-name { margin-top: -56%; } section.portraits .portraits-text { margin-top: -50%; } section.portraits .social-logo { padding-right: 12px; } section.portraits .portraits-socials { margin-top: 2%; margin-left: 0.5%; } } /* Section Portraits */ #produkte-markt { margin-top: 120px; } /* Section Produkte Markt */ #search { margin-top: 120px; } @media screen and (max-width: 767px) { #search .img-search { display: none; } } /* Section Produktsuche */ .produktsuche { margin-top: 60px; } .produktsuche a { text-decoration: none; } .produktsuche p { margin-top: 25px; margin-left: 0; } .produktsuche button { margin-right: 25px; margin-bottom: 10px; padding: 8px 0; font-size: 24px; color: #AAAAAA; float: left; } .produktsuche button:hover, .produktsuche button:active, .produktsuche button.active { color: #000000; } .produktsuche button:active, .produktsuche button.active { outline: none; text-decoration: underline; } .produktsuche .filter-options { width: 100%; margin-bottom: 10px; padding: 20px 50px 10px; border: 0px solid #f00; border-radius: 20px; display: block; float: left; -webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.3); box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.3); } .produktsuche #filters-search-input { width: 75%; height: 75px; line-height: 75px; border: none !important; border-radius: 2px; outline: 0; box-shadow: 0; background-color: #C5E6E5; } .produktsuche select { width: 289px; height: 50px; margin: 50px 50px; cursor: pointer; float: right; } .produktsuche option { font-size: 26px; } .produktsuche option:hover, .produktsuche option:active, .produktsuche option.active { background-color: #E76610; } .produktsuche .picture-item__details { padding: 5px 15px; background-color: #000000; } .produktsuche .picture-item__title { font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-size: 18px; line-height: 24px; color: #FFFFFF; } .produktsuche .my-shuffle-container { margin-right: 0; margin-left: 0; } .produktsuche figure { max-width: 24%; flex: 0 0 24%; margin-right: 1%; } .produktsuche .produkt-portrait { width: 76px; margin-top: -46px; border: 4px solid #FFFFFF; border-radius: 50%; } .produktsuche .fa-gratipay { margin-right: 15px; font-size: 24px; color: #C22B34; } .produktsuche .heart-count { margin-top: 8px; float: right; color: #000000 !important; } .produktsuche .custom-select:focus { border-color: #000000; box-shadow: none; } .produktsuche input[type="search"] { background:#fff; padding: 0 19px; line-height: 75px; border:0; color:#000; width:100%; font-weight: 300; font-family:'AG-Cond', Arial, Helvetica, sans-serif; -moz-transition:border-color 200ms ease-in; -webkit-transition:border-color 200ms ease-in; transition:border-color 200ms ease-in; } @media screen and (max-width: 1250px) { .produktsuche input[type="search"] { height: 55px !important; line-height: 55px !important; } } @media screen and (max-width: 991px) { .produktsuche figure { max-width: 49%; flex: 0 0 49%; } .produktsuche #filters-search-input { width: 100%; } .produktsuche .btn-produktsuche { max-width: 290px; margin-top: 25px; } .produktsuche p { margin-top: 125px; } } @media screen and (max-width: 767px) { .produktsuche .filter-options { padding-right: 15px; padding-left: 15px; } .produktsuche #filters-search-input { margin-top: 30px; } .produktsuche input[type="search"] { height: 50px !important line-height: 50px !important; } .produktsuche button { margin-bottom: -5px; } .produktsuche select { width: 49%; margin-right: 8px; } .produktsuche .btn-produktsuche { max-width: 50%; } } @media screen and (max-width: 599px) { .produktsuche figure { max-width: 99%; flex: 0 0 99%; } .produktsuche select { display: none; } .produktsuche .filter-options { margin-bottom: 40px; } .produktsuche .btn-produktsuche { width: 100%; max-width: 100%; text-align: center; } .produktsuche button { width: 43%; margin-right: 5%; font-size: 24px; text-align: left; } .produktsuche p { font-size: 24px !important; } } @media screen and (max-width: 399px) { .produktsuche button { width: 100%; margin-right: 5%; margin-bottom: 5px; font-size: 24px; text-align: left; } } /* Section Bünzlityp */ #buenzlityp { margin-top: 120px; padding-top: 240px; padding-bottom: 110px; } section.buenzlityp .container { width: 100%; max-width: 1400px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } section.buenzlityp .btn-rotate { margin-top: 160px; margin-left: 10px; line-height: 20px; letter-spacing: -1px; text-transform: none; -webkit-transform: rotate(-11deg); -moz-transform: rotate(-11deg); -ms-transform: rotate(-11deg); -o-transform: rotate(-11deg); transform: rotate(-11deg); } section.buenzlityp .buenzlityp-title { font-size: 108px; line-height: 100px; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: -5px; text-transform: uppercase; filter: drop-shadow(-4px 8px 5px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-subtitle { font-size: 90px; line-height: 110px; font-family: 'AG-ExtraBold-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: -2px; text-transform: none; filter: drop-shadow(-4px 8px 5px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-text { max-width: 60%; font-size: 40px; line-height: 44px; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; margin-left: 4px; letter-spacing: -1px; text-transform: none; } section.buenzlityp .content-buenzlityp { margin-top: 0; } section.buenzlityp .img-fragezeichen { width: 300px; margin-top: -136px; margin-left: 21px; position: absolute; } section.buenzlityp .img-sprechblase { width: 485px; margin-top: -429px; margin-left: 132%; position: absolute; } @media screen and (max-width: 1399px) { #buenzlityp { padding-top: 15vw; } section.buenzlityp .buenzlityp-title { font-size: 7vw; line-height: 7.5vw; letter-spacing: -2px; } section.buenzlityp .buenzlityp-subtitle { font-size: 6.4vw; line-height: 8vw; letter-spacing: 0; } section.buenzlityp .buenzlityp-text { font-size: 2.85vw; line-height: 3.15vw; } section.buenzlityp .img-fragezeichen { width: 21.4vw; } section.buenzlityp .img-sprechblase { width: 34.64vw; margin-top: -31vw; margin-left: 132%; position: absolute; } } @media screen and (max-width: 991px) { #buenzlityp { padding-top: 15vw; padding-bottom: 15vw; filter: drop-shadow(-2px 7px 4px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-title { font-size: 12vw; line-height: 13vw; letter-spacing: -2px; filter: drop-shadow(-2px 7px 4px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-subtitle { font-size: 8.74vw; line-height: 7vw; letter-spacing: 0; } section.buenzlityp .buenzlityp-text { font-size: 3.5vw !important; line-height: 3.5vw !important; letter-spacing: 0; } section.buenzlityp .img-fragezeichen { display: none; } section.buenzlityp .img-sprechblase { margin-left: 138%; } section.buenzlityp .btn-rotate { margin-top: 10vw; } } @media screen and (max-width: 767px) { #buenzlityp .col-md-7 { max-width: 100%; flex: 0 0 100%; } section.buenzlityp .buenzlityp-title { font-size: 54px; line-height: 65px; filter: drop-shadow(-1px 6px 4px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-subtitle { font-size: 48px; line-height: 54px; letter-spacing: 0; filter: drop-shadow(-1px 6px 4px rgba(0,0,0,0.3)); } section.buenzlityp .buenzlityp-text { max-width: 90%; margin-left: 0; font-size: 26px !important; line-height: 30px !important; } section.buenzlityp .buenzlityp-text, section.buenzlityp .buenzlityp-title { letter-spacing: 0; } } @media screen and (max-width: 499px) { section.buenzlityp .buenzlityp-title { filter: none; } section.buenzlityp .buenzlityp-subtitle { filter: none; } } @media screen and (max-width: 399px) { section.buenzlityp .buenzlityp-title { margin-right: 15px; font-size: 44px; line-height: 48px; } section.buenzlityp .buenzlityp-subtitle { font-size: 32px; line-height: 38px; letter-spacing: 1px; } } /* Section Sammelstellen */ #map { margin: 120px 0; } #map .img-sammelstellen { width: 100% !important; margin-top: -14%; } #map .img-apple-store { margin-top: 33%; } #map .img-google-play { margin-top: 3%; } #map .img-apple-store, #map .img-google-play { opacity: 1; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } #map .img-apple-store:hover, #map .img-google-play:hover { opacity: 0.6; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @media screen and (max-width: 1199px) { #map a { font-size: 2.9vw; line-height: 3.1vw; } } @media screen and (max-width: 991px) { #map .img-apple-store, #map .img-google-play { max-width: 70%; } #map .img-sammelstellen { margin-top: -22%; } } @media screen and (max-width: 767px) { #map .img-sammelstellen { max-width: 470px; margin-top: -405px; float: left; } #map .img-apple-store { max-width: 45%; margin-top: 330px; margin-right: 5%; float: left; } #map .img-google-play { max-width: 45%; margin-top: 330px; float: left; } #map a { font-size: 21px; line-height: 24px; } } @media screen and (max-width: 499px) { #map .img-sammelstellen { max-width: 370px; margin-top: -336px; float: left; } #map .img-apple-store { margin-top: 287px; margin-right: 5%; float: left; } #map .img-google-play { margin-top: 287px; float: left; } #map a { font-size: 21px; line-height: 24px; } } @media screen and (max-width: 399px) { #map .img-sammelstellen { max-width: 290px; margin-top: -274px; float: left; } #map .img-apple-store { margin-top: 225px; margin-right: 5%; float: left; } #map .img-google-play { margin-top: 225px; float: left; } #map a { font-size: 21px; line-height: 24px; } } /* Section Recyclables */ #recyclables { padding: 60px 0; } #recyclables .container-slider { width: 100%; max-width: 1400px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } #recyclables .partner-logos { margin-top: 30px; margin-bottom: 30px; margin-right: auto; margin-left: auto; } #recyclables .partner-logo { width: 75px; margin-top: 10px; margin-right: 10px; float: left; flex-direction: row; display: flex; -ms-flex-direction: row; list-style: none; cursor: pointer; } #recyclables .last-child { margin-right: 0px; } #recyclables .partner-logo:hover, #recyclables .partner-logo:active, #recyclables .partner-logo.active, #recyclables .partner-logo:focus, #recyclables .partner-logo.focus { opacity: 0.5; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } #recyclables .arrow-right, #recyclables .arrow-left { width: 198px; height: 590px; margin-top: -588px; padding-top: 273px; padding-left: 76px; position: relative; background: rgba(234,234,234,0.8); z-index: 9; } #recyclables .arrow-right { margin-left: 1204px; padding-left: 78px; } @media screen and (max-width: 1499px) { #recyclables .container-slider { max-width: 1300px; } #recyclables .arrow-right, #recyclables .arrow-left { width: 182px; height: 532px; margin-top: -532px; padding-top: 244px; } #recyclables .arrow-right { margin-left: 1121px; padding-left: 69px; } #recyclables .arrow-left { margin-left: 0; } } @media screen and (max-width: 1399px) { #recyclables .container-slider { max-width: 1200px; } #recyclables .arrow-right, #recyclables .arrow-left { width: 170px; height: 492px; margin-top: -492px; padding-top: 222px; } #recyclables .arrow-right { margin-left: 1036px; padding-left: 64px; } #recyclables .arrow-left { margin-left: 0; padding-left: 62px; } } @media screen and (max-width: 1299px) { #recyclables .container-slider { max-width: 1100px; } #recyclables .arrow-right, #recyclables .arrow-left { width: 154px; height: 450px; margin-top: -450px; padding-top: 202px; } #recyclables .arrow-right { margin-left: 948px; padding-left: 64px; } #recyclables .arrow-left { margin-left: 0; padding-left: 62px; } } @media screen and (max-width: 1199px) { #recyclables .container-slider { max-width: 992px; } #recyclables .arrow-right, #recyclables .arrow-left { width: 140px; height: 408px; margin-top: -408px; padding-top: 182px; } #recyclables .arrow-right { margin-left: 853px; padding-left: 48px; } #recyclables .arrow-left { margin-left: 0px; padding-left: 48px; } } @media screen and (max-width: 1099px) { #recyclables .container-slider { max-width: 992px; } #recyclables .arrow-right, #recyclables .arrow-left { width: 140px; height: 408px; margin-top: -408px; padding-top: 182px; } #recyclables .arrow-right { margin-left: 844px; padding-left: 48px; } #recyclables .arrow-left { margin-left: 10px; padding-left: 48px; } } @media screen and (max-width: 991px) { #recyclables .container-slider { max-width: 768px; } #recyclables .arrow-right, #recyclables .arrow-right, #recyclables .arrow-left { width: 108px; height: 316px; margin-top: -316px; padding-top: 136px; } #recyclables .arrow-right { margin-left: 650px; padding-left: 32px; } #recyclables .arrow-left { margin-left: 7px; padding-left: 30px; } } @media screen and (max-width: 767px) { #recyclables .arrow-right, #recyclables .arrow-left { display: none; } #recyclables .arrow-right { display: none; } #recyclables .arrow-left { display: none; } #recyclables .partner-logos { margin-top: 60px; } #recyclables .partner-logo { width: 13vw; margin-left: 8vw; } } @media screen and (max-width: 475px) { #recyclables .partner-logo { width: 19.5vw; margin-left: 2vw; } } /* Section Contact */ section.contact { text-align: center; } section.contact h2 { margin-top: 0; margin-bottom: 25px; } section.contact h2 i { color: #dd4b39; } section.contact ul.list-social { margin-bottom: 0; } section.contact ul.list-social li a { font-size: 40px; line-height: 80px; display: block; width: 80px; height: 80px; color: white; border-radius: 100%; } #contact-form .form-check-inline { margin-bottom: 25px; } #contact-form .form-check-label { font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #606060; } #contact-form .form-control { height: 75px; margin-bottom: 20px; padding: 10px 20px; font-size: 33px !important; background: #FFFFFF; border: 0px solid #606060; border-radius: 0px; font-family: "AG-Cond", Arial, sans-serif; font-size: 16px; box-shadow: none !important; -webkit-transition: border 0.25s ease-out; transition: border 0.25s ease-out; } #contact-form .form-control:focus { padding-left: 20px; background: #FFF; border: 0px solid #455674; } #contact-form .form-group label { top: 10px; padding-left: 20px; font-size: 33px; font-weight: 400; line-height: 60px; color: #606060; position: absolute; cursor: auto; z-index: 0; font-family: "AG-Cond", Arial, sans-serif; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #contact-form .form-control:focus + .label, #contact-form .form-control:valid + .label { left: -75px; margin-left: 12px; padding-right: 8px; padding-left: 8px; font-size: 24px; color: #455674; background-color: transparent; z-index: 0; } #contact-form .send { margin: 0px; padding: 10px 50px; font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #FFFFFF; float: right; background-color: #E30711; border-radius: 0px; z-index: 4; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } #contact-form .send:hover { background-color: #455674; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @media screen and (max-width: 479px) { #contact { padding-top: 0; } } /* Section Footer Top */ footer.footer-top { margin-top: 0; } footer.footer-top .container { /*padding-right: 0; padding-left: 0;*/ } footer.footer-top h2 { margin-top: 0; margin-bottom: 25px; } footer.footer-top h2 i { color: #dd4b39; } footer.footer-top ul.list-social { margin-bottom: 0; } footer.footer-top ul.list-social li a { font-size: 40px; line-height: 80px; display: block; width: 80px; height: 80px; color: white; border-radius: 100%; } #newsletter-form { margin-top: 25px; } #newsletter-form .form-check-inline { margin-bottom: 25px; } #newsletter-form .form-check-label { font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #606060; } #newsletter-form .form-control { height: 75px; margin-bottom: 20px; padding: 10px 20px; font-size: 33px !important; background: #FFFFFF; border: 0px solid #606060; border-radius: 0px; font-family: "AG-Cond", Arial, sans-serif; font-size: 16px; box-shadow: none !important; -webkit-transition: border 0.25s ease-out; transition: border 0.25s ease-out; } #newsletter-form .form-control:focus { padding-left: 20px; background: #FFF; border: 0px solid #455674; } #newsletter-form .form-group label { top: 10px; padding-left: 20px; font-size: 33px; font-weight: 400; line-height: 55px; color: #606060; position: absolute; cursor: auto; z-index: 0; font-family: "AG-Cond", Arial, sans-serif; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } /* #newsletter-form .form-control:focus + .label, #newsletter-form .form-control:valid + .label { top: -44px; margin-left: 12px; padding-right: 8px; padding-left: 8px; font-size: 24px; color: #455674; background-color: transparent; z-index: 0; } */ #newsletter-form .form-control:focus + .label, #newsletter-form .form-control:valid + .label { display: none; } #newsletter-form .send { margin: 0px; padding: 10px 50px; font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #FFFFFF; float: right; background-color: #E30711; border-radius: 0px; z-index: 4; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } #newsletter-form .send:hover { background-color: #455674; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @media screen and (max-width: 767px) { footer.footer-top { padding-bottom: 70px; } footer.footer-top .col-6 { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } #newsletter-form .form-control { margin-bottom: 0; } } @media screen and (max-width: 479px) { #newsletter { padding-top: 0; } } /* Footer Middle */ footer.footer-middle { padding: 25px 0; text-align: left; } footer.footer-middle .col-left { width: 33.333%; padding-right: 15px; margin-bottom: 40px; float: left; } footer.footer-middle .col-middle { width: 33.333%; padding-right: 15px; margin-bottom: 40px; float: left; } footer.footer-middle .col-right { width: 33.333%; margin-right: 0px; margin-bottom: 40px; float: left; } footer.footer-middle .footer-middle-menu { margin-top: 30px; } footer.footer-middle a, footer.footer-middle p { color: #FFFFFF !important; } footer.footer-middle a { font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; font-size: 35px; line-height: 38px; letter-spacing: 0px; color: #000000; text-decoration: underline; cursor: pointer; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } footer.footer-middle a:hover, footer.footer-middle a:focus { color: #E76610 !important; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } #recycling-stellen-form { margin-top: 25px; } #recycling-stellen-form .form-check-inline { margin-bottom: 25px; } #recycling-stellen-form .form-check-label { font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #606060; } #recycling-stellen-form .form-control { height: 75px; margin-bottom: 20px; padding: 10px 20px; font-size: 33px !important; background: #FFFFFF; border: 0px solid #606060; border-radius: 0px; font-family: "AG-Cond", Arial, sans-serif; font-size: 16px; box-shadow: none !important; -webkit-transition: border 0.25s ease-out; transition: border 0.25s ease-out; } #recycling-stellen-form .form-control:focus { padding-left: 20px; background: #FFF; border: 0px solid #455674; } #recycling-stellen-form .form-group label { top: 10px; padding-left: 20px; font-size: 33px; font-weight: 400; line-height: 55px; color: #606060; position: absolute; cursor: auto; z-index: 0; font-family: "AG-Cond", Arial, sans-serif; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } /* #recycling-stellen-form .form-control:focus + .label, #recycling-stellen-form .form-control:valid + .label { top: -44px; margin-left: 12px; padding-right: 8px; padding-left: 8px; font-size: 24px; color: #455674; background-color: transparent; z-index: 0; } */ #recycling-stellen-form .form-control:focus + .label, #recycling-stellen-form .form-control:valid + .label { display: none; } #recycling-stellen-form .send { margin: 0px; padding: 10px 50px; font-family: "DIN-Light", Arial, sans-serif; font-size: 18px; color: #FFFFFF; float: right; background-color: #E30711; border-radius: 0px; z-index: 4; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } #recycling-stellen-form .send:hover { background-color: #455674; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } @media screen and (max-width: 991px) { footer.footer-middle .pt-15 { padding-top: 30px; } footer.footer-middle .space-60 { height: 20px; } } @media screen and (max-width: 767px) { footer.footer-middle .col-md-9, footer.footer-middle .col-md-3 { width: 100%; } footer.footer-middle #search-postcode { width: 100%; } footer.footer-middle .pt-15 { padding-top: 15px; } footer.footer-middle .no-text { font-size: 0; } footer.footer-middle .col-left, footer.footer-middle .col-middle, footer.footer-middle .col-right { width: 100%; margin-right: 0px; margin-bottom: 40px; float: left; } } @media screen and (max-width: 499px) { footer.footer-middle .col-md-9, footer.footer-middle .col-md-3 { width: 100%; } } @media screen and (max-width: 400px) { footer.footer-middle .col-6 { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } footer.footer-middle .form-group { margin-bottom: 0; } footer.footer-middle .col-right { margin-bottom: 95px; } } /* Footer Bottom */ #footer-bottom { padding: 50px 0 20px; } footer.footer-bottom .container { /*padding-right: 0; padding-left: 0;*/ } footer.footer-bottom .copyright { margin-top: 25px; } footer.footer-bottom .partner-logo { margin-top: 10px; margin-right: 10px; float: left; flex-direction: row; display: flex; -ms-flex-direction: row; list-style: none; } footer.footer-bottom .img-partner { width: 75px; height: 75px; } footer.footer-bottom .img-partner:hover, footer.footer-bottom .img-partner:active, footer.footer-bottom .img-partner.active, footer.footer-bottom .img-partner:focus, footer.footer-bottom .img-partner.focus { opacity: 0.5; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; } footer li a { display: flex !important; } footer.footer-bottom .navbar-nav > li > a { padding: 0 10px; line-height: 30px; font-size: 18px; font-weight: 300; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; letter-spacing: 0px; text-transform: none; display: flex !important; } footer.footer-bottom .navbar-nav > li > a:hover > h6, footer.footer-bottom .navbar-nav > li > a:focus:hover >h6 { text-decoration: underline; color: #3D8983 !important; } footer.footer-bottom .navbar-nav > li > a.nav-space:hover, footer.footer-bottom .navbar-nav > li > a.nav-space:focus:hover { text-decoration: none; } footer.footer-bottom a { margin-right: 15px; font-size: 48px !important; text-decoration: none; color: #FFFFFF; } footer.footer-bottom .footer-bottom-nav, footer.footer-bottom h5, footer.footer-bottom .footer-socials { width: 240px; } footer.footer-bottom .footer-bottom-nav { margin-right: 10px; flex-direction: row; -ms-flex-direction: row; float: right; } footer.footer-bottom h5 { margin-top: -23px; text-align: left; float: right; } footer.footer-bottom .footer-socials { float: right; } footer.footer-bottom .footer-slash { margin-left: -10px; } @media screen and (max-width: 1399px) { footer.footer-bottom h5 { margin-top: -23px; margin-left: 0; float: right; } footer.footer-bottom .footer-socials { margin-right: 0; padding-left: 0; float: right; } } @media screen and (max-width: 991px) { footer.footer-bottom .img-partner { width: 65px; height: 65px; } footer.footer-bottom .footer-bottom-nav, footer.footer-bottom h5, footer.footer-bottom .footer-socials { width: 220px; } footer.footer-bottom h5 { margin-top: -28px; } footer.footer-bottom h6 { font-size: 17px; } footer.footer-bottom a { margin-right: 5px; font-size: 46px !important; } footer.footer-bottom .footer-socials a { margin-right: 10px; } } @media screen and (max-width: 767px) { #footer-bottom { padding: 35px 0; } footer.footer-bottom .img-partner { width: 9vw; height: 9vw; } footer.footer-bottom .footer-bottom-nav { margin-left: -9px; float: left; } footer.footer-bottom .footer-socials-content { margin-top: 35px; } footer.footer-bottom h5, footer.footer-bottom .footer-socials { width: 240px; display: contents; float: left; } footer.footer-bottom h6 { font-size: 18px; } } @media screen and (max-width: 599px) { footer.footer-bottom .img-partner { width: 46px; height: 46px; } footer.footer-bottom .footer-bottom-nav { margin-left: -9px; float: left; } footer.footer-bottom .footer-socials a { margin-right: 15px; } } @media screen and (max-width: 393px) { footer.footer-bottom .partner-logo { margin-right: 9px; } } @media screen and (max-width: 364px) { footer.footer-bottom .partner-logo { margin-right: 8px; } } @media screen and (max-width: 337px) { footer.footer-bottom .partner-logo { margin-right: 7px; } } /* DVSGO */ @media screen and (max-width: 767px) { .cc_container .cc_btn { font-size: 18px !important; } } /* WG Contest */ /* Buttons */ #wg-contest #btn_contest, #wg-contest #btn_vote, #wg-contest #load_more_button { width: auto; right: 0; } #wg-contest .btn-voting { margin: 0; margin-bottom: 60px; padding: 0px 50px; font-size: 33px; line-height: 75px; display: block; transition: all 350ms; } #wg-contest .btn-voting:hover { background-color: #3D8983; transition: all 350ms; } #wg-contest .btn-contest { margin: 0; margin-bottom: 60px; padding: 0px 50px; font-size: 33px; line-height: 75px; display: block; transition: all 350ms; } #wg-contest .btn-contest:hover { background-color: #3D8983; transition: all 350ms; } #uservoting .btn-uservoting { width: 92%; top: 0; right: 0px; margin: 0; padding: 10px 0; font-size: 28.5px; line-height: 42px; display: block; transition: all 350ms; } #uservoting .btn-uservoting:hover { background-color: #3D8983; transition: all 350ms; } #uservoting .md-content > h3, #uservoting .md-content > p, #uservoting .md-content .row { max-width: 600px; margin: 0 auto; } #uservoting .md-content > h3, #uservoting .md-content > p { margin-bottom: 40px; } #uservoting .md-content .form-group { margin-bottom: 45px; } #wg-contest { margin-top: 120px; } #wg-contest .section-heading { max-width: 1300px; } #wg-contest #contest-posts { margin-top: 220px; margin-bottom: 80px; } #wg-contest #contest-posts a { margin-top: -2px; margin-bottom: 25px; font-size: 24px !important; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; float: left; } #wg-contest #contest-posts .fa-times { padding: 10px; cursor: pointer; } #wg-contest #contest-posts .close-statement { top: 6px; right: 8px; position: absolute; } #wg-contest #contest-posts .statement-div { padding: 40px 15px 10px; font-size: 20px; } #wg-contest #contest-posts .heart-count { float: right; cursor: pointer; } #wg-contest #contest-posts .heart-count i { margin-top: 3px; padding-right: 10px; font-size: 24px; color: #C22B34; } #wg-contest #contest-posts .heart-count-number { top: -3px; position: relative; } @media screen and (max-width: 1250px) { #wg-contest .btn-voting, #wg-contest .btn-contest { font-size: 33px; line-height: 55px;} } @media screen and (max-width: 1199px) { #wg-contest #contest-posts { margin-top: 160px; } } @media screen and (max-width: 991px) { #wg-contest #contest-posts .col-md-4 { max-width: 50%; flex: 0 0 50%; -ms-flex: 0 0 50%; } #wg-contest #contest-posts a { margin-top: -1px; } } @media screen and (max-width: 599px) { #wg-contest #contest-posts .col-md-4 { max-width: 100%; flex: 0 0 100%; -ms-flex: 0 0 100%; } #wg-contest #contest-posts a { margin-top: 1px; } } @media screen and (max-width: 767px) { #uservoting .btn-uservoting { width: 50%; } #uservoting .md-content > h3, #uservoting .md-content > p { margin-bottom: 30px; } #uservoting .md-content .form-group { margin-bottom: 35px; } #uservoting input[type="email"] { height: 42px; } } /* @media screen and (max-width: 499px) { #wg-contest #contest-posts { margin-top: 120px; } } */ @media screen and (max-width: 399px) { #wg-contest .btn-voting, #wg-contest .btn-contest { font-size: 24px; line-height: 50px; } #uservoting .btn-uservoting { width: 60%; padding: 5px 0; } } /* Voting */ #wg-contest .voting { margin-top: 120px; } /* Formular Contest */ #contest .col-md-5, #contest .col-md-5 .col, #contest .col-md-6, #contest .col-md-7, #contest .col-md-7 .col { padding-left: 0; } #contest .md-content .form-text, #contest .md-content .form-text-pflichtfelder { margin-left: 0; } #contest .md-content .form-text-pflichtfelder { margin-top: -85px; } #contest .md-content .radio-teilnahmebedingungen { margin-top: 12px; margin-right: -15px; } #contest .text-link { margin-top: 40px; margin-left: 15px; font-size: 24px; line-height: 28px; } #contest .text-box { margin-top: 15px; margin-left: 15px; } #contest textarea { line-height: 36px; } #contest .btn-contest { width: 96.5%; top: 15px; right: 0; margin: 0; margin-bottom: 50px; padding: 10px 0px; font-size: 35px; line-height: 52px; display: block; transition: all 350ms; } #contest .btn-contest:hover { background-color: #3D8983; transition: all 350ms; } @media screen and (max-width: 1699px) { #contest .btn-contest { font-size: 28px; } } @media screen and (max-width: 1199px) { #contest .btn-contest { font-size: 26px; } } @media screen and (max-width: 991px) { #contest .md-content .img-optional-text { margin-top: -50px; } #contest .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #contest .md-content .text-link, #contest .md-content .text-box { margin-left: 15px; } #contest .md-content textarea { line-height: 28px !important; } #contest .md-content .btn-contest { font-size: 2.5vw; } } @media screen and (max-width: 767px) { #contest .col-md-5, #contest .col-md-5 .col, #contest .col-md-6, #contest .col-md-7, #contest .col-md-7 .col { padding-right: 0; } #contest .md-content .img-optional-text { margin-top: 0px; } #contest .md-content .file-upload { width: 100% !important; } #contest .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #contest .md-content .text-link, #contest .md-content .text-box { margin-left: 0px; } #contest .md-content textarea { line-height: 28px !important; } #contest .md-content .btn-contest { width: 100%; right: 0; margin-bottom: 0; font-size: 28px; } #contest .md-content .form-text-pflichtfelder { margin-top: 35px; } } @media screen and (max-width: 499px) { #contest .md-content .link-teilnahmebedinungen { margin-left: 0; } } @media screen and (max-width: 399px) { #contest .md-content .img-optional-text { margin-top: 0px; } #contest .md-content .file-upload { width: 100% !important; } #contest .md-content .radio-teilnahmebedingungen { margin-right: -30px; } #contest .md-content textarea { line-height: 28px !important; } #contest .md-content .btn-contest { font-size: 24px; } #contest .md-content .form-text-pflichtfelder { margin-top: 35px; } } /* Contest Detail */ #contest-detail-de, #contest-detail-fr, #contest-detail-it { padding: 0 30px; } #contest-detail-de .container, #contest-detail-fr .container, #contest-detail-it .container { max-width: 1200px; } #contest-detail-de .portraits-socials, #contest-detail-fr .portraits-socials, #contest-detail-it .portraits-socials { float: right; } #contest-detail-de .close-page-section, #contest-detail-fr .close-page-section, #contest-detail-it .close-page-section { margin: 30px 0; font-size: 30px; float: right; } #contest-detail-de .close-icon, #contest-detail-fr .close-icon, #contest-detail-it .close-icon { color: #E76610; transition: all 350ms ease-out; cursor: pointer; } #contest-detail-de .close-icon:hover, #contest-detail-fr .close-icon:hover, #contest-detail-it .close-icon:hover { color: #000000; transition: all 350ms ease-out; } #contest-detail-de .heart-count, #contest-detail-fr .heart-count, #contest-detail-it .heart-count { float: left; cursor: pointer; } #contest-detail-de .heart-count i, #contest-detail-fr .heart-count i, #contest-detail-it .heart-count i { margin-top: 3px; padding-right: 10px; font-size: 24px; color: #C22B34; } #contest-detail-de .heart-count-number, #contest-detail-fr .heart-count-number, #contest-detail-it .heart-count-number { top: -3px; font-size: 18px; font-family: 'AG-Cond', 'Helvetica', 'Arial', 'sans-serif'; position: relative; } #contest-detail-de .social-teilen, #contest-detail-fr .social-teilen, #contest-detail-it .social-teilen { font-size: 22px; color: #000000; text-align: left; } #contest-detail-de .social-logo, #contest-detail-fr .social-logo, #contest-detail-it .social-logo { padding: 0 5px; } #contest-detail-de .social-logo:last-child, #contest-detail-fr .social-logo:last-child, #contest-detail-it .social-logo:last-child { padding-right: 0; } #contest-detail-de li a, #contest-detail-fr li a, #contest-detail-it li a { font-size: 22px !important; color: #000000; transition: all 350ms ease-out; } #contest-detail-de .img-wg, #contest-detail-fr .img-wg, #contest-detail-it .img-wg { margin-bottom: 15px; } #contest-detail-de .img-wg img, #contest-detail-fr .img-wg img, #contest-detail-it .img-wg img { width: 100%; } #contest-detail-de .img-hero, #contest-detail-fr .img-hero, #contest-detail-it .img-hero { width: 100% !important; top: 0; position: relative; } #contest-detail-de .img-hero img { width: 58%; display: block; } #contest-detail-fr .img-hero img { width: 58%; display: block; } #contest-detail-it .img-hero img { width: 58%; display: block; } #contest-detail-de .wg-content p, #contest-detail-fr .wg-content p, #contest-detail-it .wg-content p { margin-bottom: 30px; font-size: 30px !important; line-height: 34px !important; text-align: left; } #contest-detail-de .partner-logos, #contest-detail-fr .partner-logos, #contest-detail-it .partner-logos { margin-bottom: 50px; text-align: left; } #contest-detail-de .partner-logo, #contest-detail-fr .partner-logo, #contest-detail-it .partner-logo { width: 11.5%; margin-bottom: 3px; } @media screen and (max-width: 991px) { #contest-detail-de .portraits-socials, #contest-detail-fr .portraits-socials, #contest-detail-it .portraits-socials { width: 100%; margin-top: 15px; float: left; } #contest-detail-de .social-logo:first-child, #contest-detail-fr .social-logo:first-child, #contest-detail-it .social-logo:first-child { padding-left: 0; } } @media screen and (max-width: 767px) { #contest-detail-de .img-hero, #contest-detail-fr .img-hero, #contest-detail-it .img-hero { padding-top: 15px; padding-bottom: 30px; } #contest-detail-de .img-hero img, #contest-detail-fr .img-hero img, #contest-detail-it .img-hero img { width: 100%; max-width: 220px; margin-top: 85px; z-index: 999; } #contest-detail-de .heart-count, #contest-detail-fr .heart-count, #contest-detail-it .heart-count { margin-top: -236px; float: left; } #contest-detail-de .portraits-socials, #contest-detail-fr .portraits-socials, #contest-detail-it .portraits-socials { margin-top: -190px; float: left; } #contest-detail-de .wg-content p, #contest-detail-fr .wg-content p, #contest-detail-it .wg-content p { font-size: 26px !important; line-height: 30px !important; } } @media screen and (max-width: 499px) { #contest-detail-de, #contest-detail-fr, #contest-detail-it { padding-left: 0; padding-right: 5px; } #contest-detail-de .img-hero, #contest-detail-fr .img-hero, #contest-detail-it .img-hero { display: block; } #contest-detail-de .heart-count, #contest-detail-fr .heart-count, #contest-detail-it .heart-count { margin-top: -236px; } #contest-detail-de .portraits-socials, #contest-detail-fr .portraits-socials, #contest-detail-it .portraits-socials { margin-top: -190px; margin-bottom: 15px; } #contest-detail-de .wg-content p, #contest-detail-fr .wg-content p, #contest-detail-it .wg-content p { font-size: 24px !important; line-height: 28px !important; } } @media screen and (max-width: 479px) { #contest-detail-de .partner-logos, #contest-detail-fr .partner-logos, #contest-detail-it .partner-logos { width: 222px; } #contest-detail-de .partner-logo, #contest-detail-fr .partner-logo, #contest-detail-it .partner-logo { width: 51.2px; } } /* Formular User-Voting */ #uservoting .md-content .col-md-8 { margin-left: -15px; padding-right: 15px; } #uservoting .md-content .form-group { width: 100%; margin-bottom: 40px; }