@font-face { font-family: 'Anuphan'; src: url('../../fonts/Anuphan-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Anuphan'; src: url('../../fonts/Anuphan-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 48%; transform: rotate(45deg); } 50% { top: 48%; transform: none; } 100% { top: 38%; transform: none; } } @keyframes rotate_a2 { 0% { top: 48%; transform: rotate(-45deg); } 50% { top: 48%; transform: none; } 100% { top: 58%; transform: none; } } @keyframes rotate_b1 { 0% { top: 38%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 58%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(-45deg); } } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 0px; overflow-x: hidden; background: #122b15; margin: 0px; color: #1d1d1b; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Anuphan', Arial, Helvetica, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } h4.texterror { color: #ff0000 } ul { padding: 0px 0px 0px 10px; margin: 10px 0px 10px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 10px 0px 10px 10px } img { border: none } b, strong { font-weight: 700 } a { color: #1d1d1b; text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 50%; padding: 10px; border: none; text-align: left; vertical-align: top } fieldset { display: flex; flex-flow: row wrap; float: left; width: calc(100% + 40px); padding: 10px; border: none; margin: -20px } fieldset legend { float: left; width: 100%; padding: 10px } fieldset div { position: relative; float: left; width: 25%; padding: 10px } fieldset div.slim { width: 10% } fieldset div.wide { width: 50% } fieldset div.full { width: 100% } fieldset div input[type=radio], fieldset div input[type=checkbox] { display: none } fieldset div input[type=radio] + label, fieldset div input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 20px 50px } fieldset div input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #1d1d1b33; border-radius: 50% } fieldset div input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #1d1d1b33 } fieldset div input[type=radio].error + label b, fieldset div input[type=checkbox].error + label b { border-color: #ff0000 } fieldset div input[type=radio]:checked + label b { background-image: url(../../images/layout/radio.svg); border-color: #1d1d1b } fieldset div input[type=checkbox]:checked + label b { background-image: url(../../images/layout/checkbox.svg); border-color: #1d1d1b } fieldset div select, fieldset div textarea, fieldset div input[type=date], fieldset div input[type=time], fieldset div input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px #1d1d1b33; color: #1d1d1b; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Anuphan', Arial, Helvetica, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: textfield } fieldset div select.error, fieldset div textarea.error, fieldset div input[type=date].error, fieldset div input[type=time].error, fieldset div input[type=text].error { border-color: #ff0000 } fieldset div select + label, fieldset div textarea + label, fieldset div input[type=date] + label, fieldset div input[type=time] + label, fieldset div input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #ffffff; font-size: 14px; line-height: 24px; pointer-events: none; transition: 0.4s ease-in-out } fieldset div select:focus, fieldset div textarea:focus, fieldset div input[type=date]:focus, fieldset div input[type=time]:focus, fieldset div input[type=text]:focus, fieldset div select:not([value=""]), fieldset div textarea:not(:placeholder-shown), fieldset div input[type=date]:not(:placeholder-shown), fieldset div input[type=time]:not(:placeholder-shown), fieldset div input[type=text]:not(:placeholder-shown) { border-color: #1d1d1b; outline: none } fieldset div select:focus + label, fieldset div textarea:focus + label, fieldset div input[type=date]:focus + label, fieldset div input[type=time]:focus + label, fieldset div input[type=text]:focus + label, fieldset div select:not([value=""]) + label, fieldset div textarea:not(:placeholder-shown) + label, fieldset div input[type=date]:not(:placeholder-shown) + label, fieldset div input[type=time]:not(:placeholder-shown) + label, fieldset div input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 6px 8px 6px 8px; font-size: 12px; line-height: 12px } fieldset div select { background-image: url(../../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain; -webkit-appearance: none } fieldset div textarea { height: 320px; overflow: auto; resize: none } fieldset div button, fieldset div input[type=submit] { float: left; width: 100%; height: 60px; padding: 23px; background: transparent; background: #ff9933; border: none; border-radius: 30px; color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 700; font-family: 'Anuphan', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; text-indent: 0.1em; cursor: pointer; transition: 0.4s ease-in-out } fieldset div button:hover, fieldset div input[type=submit]:hover { background: #1d1d1b } a.scrollto { display: none } a.show_cookiemanager { display: block; position: fixed; z-index: 1000; left: 20px; bottom: 20px; width: 60px; height: 60px; padding: 12px; background: #ff9933; border-radius: 50%; transition: 0.4s ease-in-out } a.show_cookiemanager:hover { background: #1d1d1b } a.show_cookiemanager svg path { fill: #ffffff } a.scrolltop { display: block; position: fixed; z-index: 1000; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #ff9933 url(../../images/layout/up.svg) no-repeat center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } a.scrolltop:hover { background-color: #1d1d1b } div.preloader { position: fixed; z-index: 6000; left: 0%; top: 0%; width: 100%; height: 100%; background: #ffe6cc } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; background: url(../../images/layout/preloader.svg) no-repeat center; background-size: 80%; content: ''; transform: translate(-50%,-50%) } div#popUp { display: none; position: fixed; z-index: 5000; left: 0%; top: 0%; width: 100%; height: 100%; background: #1d1d1bcc } div#popUp div { position: absolute; left: 50%; top: 50%; width: 960px; padding: 40px; background: #ffffff; border-radius: 20px; transform: translate(-50%,-50%) } div#popUp div svg { display: block; position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; padding: 10px; cursor: pointer } div#popUp div svg path { filter: opacity(0.5); transition: 0.4s ease-out } div#popUp div svg:hover path { filter: none } div#popUp div h3 { float: left; width: calc(100% - 40px); margin: 20px; font-size: 36px; font-weight: 700; text-transform: uppercase; text-align: center } div#popUp div ul { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } div#popUp div ul li { display: block; float: left; width: calc(50% - 20px); margin: 10px } div#popUp div ul li a { display: block; float: left; width: 100%; padding: 40px 0px 40px 0px; background: #ff9933; border-radius: 10px; color: #ffffff; font-size: 24px; font-weight: 700; text-align: center; transition: 0.4s ease-in-out } div#popUp div ul li a:hover { background: #1d1d1b } header { position: absolute; z-index: 2000; left: 20px; top: 60px } header a { display: block; float: left; width: 270px; height: 60px; background: url(../../images/layout/logo_sakg_dark.svg) no-repeat center; background-size: contain } div.switch { display: none } nav { position: absolute; z-index: 1000; right: 0%; top: 0%; width: 100%; background: #ffffff; box-shadow: 0px 5px 5px 0px #1d1d1b1a; transition: 0.4s ease-in-out } nav ul { display: flex; flex-flow: row wrap; justify-content: flex-end; float: left; width: 100%; padding: 20px; margin: 0px; list-style-type: none } nav ul li { display: block; float: left; margin: 5px } nav ul li a { display: block; float: left; padding: 16px 25px 16px 25px; border-radius: 25px; font-size: 18px; line-height: 18px; transition: 0.4s ease-in-out } nav ul li a:hover { background: #ff9933; color: #ffffff } nav ul li:nth-child(6) { display: none } nav ul:first-child { padding: 0px; background: #ffe6cc } nav ul:first-child li { margin: 0px } nav ul:first-child li a { padding: 14px 50px 14px 50px; border-radius: 0px; font-size: 12px; line-height: 12px; text-transform: uppercase; letter-spacing: 0.05em; text-indent: 0.05em } nav ul:first-child li:nth-child(2) a { background: #ffbf7e } nav ul:first-child li:nth-child(3) a { background: #ff9933 } nav ul:first-child li a:hover { background: #1d1d1b } div.overlay { display: none; position: fixed; z-index: 3000; left: 0%; top: 0%; width: 100%; height: 100%; background: #1d1d1bcc } aside { display: flex; flex-flow: row wrap; align-content: center; position: fixed; z-index: 2000; left: 0%; top: 0%; width: 60px; height: 100% } aside:before { display: block; position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(#39ab4a 50%, #ffffff 50%); box-shadow: 0px 0px 10px #1d1d1b1a; content: ''; transform: translateX(-100%); transition: 0.4s ease-in-out } aside:hover:before, aside:focus:before { transform: none } aside:after { display: block; position: absolute; z-index: -2; left: 0%; top: 50%; width: 40px; height: 120px; background: #ffffff url(../../images/layout/play.svg) no-repeat center; background-size: 75%; box-shadow: 0px 0px 10px #1d1d1b1a; border-radius: 0px 5px 5px 0px; content: ''; transform: translateY(-50%); transition: 0.4s ease-in-out } aside:hover:after, aside:focus:after { left: -100% } aside ul { float: left; padding: 5px; margin: 0px; list-style-type: none; transform: translateX(-100%); transition: 0.4s ease-in-out } aside:hover ul, aside:focus ul { transform: none } aside ul li { display: block; float: left; margin: 5px } aside ul li a { display: block; float: left; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; border-radius: 50%; transition: 0.4s ease-in-out } aside ul li a:hover { box-shadow: 0px 0px 10px #1d1d1b33 } aside ul:nth-child(1) li a { background-size: 75% } aside ul:nth-child(1) li:nth-child(1) a { background-image: url(../../images/layout/phone.svg) } aside ul:nth-child(1) li:nth-child(2) a { background-image: url(../../images/layout/mail.svg) } aside ul:nth-child(1) li:nth-child(3) a { background-image: url(../../images/layout/marker.svg) } aside ul:nth-child(2) li a { background-size: 50% } aside ul:nth-child(2) li:nth-child(1) a { background-image: url(../../images/layout/geldspende.svg) } aside ul:nth-child(2) li:nth-child(2) a { background-image: url(../../images/layout/sachspende.svg) } aside ul:nth-child(2) li:nth-child(3) a { background-image: url(../../images/layout/zeitspende.svg) } section.theme { position: relative; float: left; width: 100%; height: 600px; overflow: hidden; background: linear-gradient(66.6666deg, #ff9933, #ffbf7e) } section.theme:has(div) { height: 300px } section.theme:before { display: block; position: absolute; z-index: 2; left: calc(50% - 960px); bottom: 0%; width: 360px; height: 360px; background: url(../../images/layout/dots.svg) no-repeat center; background-size: contain; transform: translateY(10%); content: '' } section.theme:after { display: block; position: absolute; z-index: 2; right: calc(50% - 960px); top: 0%; width: 360px; height: 360px; background: url(../../images/layout/dots.svg) no-repeat center; background-size: contain; transform: translateY(-10%); content: '' } section.theme div { position: absolute; z-index: 3; left: calc(50% - 620px); width: 1240px; padding: 30px; transform: translateY(-15%) } section.theme div h1 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 48px; line-height: 60px; font-weight: 700; text-shadow: 0px 0px 8px #1d1d1b80 } section.theme div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 18px; line-height: 24px; text-transform: uppercase; text-shadow: 0px 0px 4px #1d1d1b80 } section.theme picture { display: block; position: absolute; z-index: 1; left: 50%; min-width: 1920px; height: 100%; transform: translateX(-50%) } section.theme picture img { display: block; float: left; width: 100%; height: 100%; object-fit: cover } section.content { position: relative; float: left; width: 100%; padding: 20px calc(50% - 600px) 20px calc(50% - 600px); background: #ffffff; box-shadow: 0px -5px 5px 0px #1d1d1b1a } section.content hr { float: left; width: calc(100% - 40px); height: 2px; border: none; margin: 20px; background: #1d1d1b33; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content hr.active { transform: none; filter: none } section.content .news { position: absolute; z-index: 2; left: calc(50% - 580px); width: 400px; padding: 10px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 10px #1d1d1b1a; transform: translateY(-90%) } section.content .news .logo { display: block; float: right; width: 180px; height: 40px; background: url(../../images/layout/logo_sakg_dark.svg) no-repeat center; background-size: contain; margin: 10px } section.content .news ul { float: left; width: calc(100% + 40px); padding: 0px; margin: 10px -20px 10px -20px; list-style-type: none } section.content .news ul li { display: block; float: left; width: 100%; margin: 0px } section.content .news ul li a { display: block; float: left; width: 100%; padding: 15px 25px 15px 25px; border-radius: 5px; transition: 0.4s ease-in-out } section.content .news ul li a:hover { background: #39ab4a; color: #ffffff } section.content .news ul li a h3 { float: left; width: calc(100% - 10px); margin: 5px; font-size: 18px; line-height: 24px; font-weight: 700 } section.content .news ul li a h4 { float: left; width: calc(100% - 10px); margin: 5px; font-size: 14px; line-height: 18px } section.content .news .cta { display: block; clear: right; float: right; margin: 10px; color: #39ab4a } section.content .ordercollect { display: flex; flex-flow: row wrap; float: left; width: 100% } section.content .column { float: left; padding: 10px } section.content .column.full { width: 100% } section.content .column.wide { width: 66.6666% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3333% } section.content .column picture { display: block; position: relative; float: left; width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; border-radius: 10px; overflow: hidden; margin: 10px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column picture.active { transform: none; filter: none } section.content .column picture img { display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .caption { float: left; width: calc(100% - 20px); margin: 0px 10px 10px 10px; color: #1d1d1bcc; font-size: 12px; line-height: 18px; text-align: center; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .caption.active { transform: none; filter: none } section.content .column .clickbutton { display: block; float: right; padding: 18px 40px 18px 80px; background-color: #39ab4a; background-repeat: no-repeat; background-position: 20px center; background-size: auto 50%; border-radius: 40px; margin: 10px; transition: 0.4s ease-in-out } section.content .column .clickbutton:hover { background-color: #1d1d1b } section.content .column .clickbutton.call { background-image: url(../../images/layout/phone.svg) } section.content .column .clickbutton.account { background-image: url(../../images/layout/account.svg) } section.content .column .clickbutton h3 { color: #ffffff; font-size: 14px; line-height: 14px; text-transform: uppercase } section.content .column .clickbutton h4 { color: #ffffff; font-size: 30px; line-height: 30px; font-weight: 700 } section.content .column .entry { float: left; width: calc(100% - 20px); margin: 10px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .entry.active { transform: none; filter: none } section.content .column .entry * { color: #1d1d1b !important; font-family: 'Anuphan', Arial, Helvetica, sans-serif !important } section.content .column .entry h2 { font-size: 36px; line-height: 60px; font-weight: 700 } section.content .column .entry a { text-decoration: underline } section.content .column .entry table { float: none; width: calc(100% + 40px) !important; margin: 0px -20px 0px -20px } section.content .column .entry table tr td { width: auto } section.content .column .entry table tr td:first-child { width: 25% } section.content .column .entry .pic { display: block; float: right; width: calc(50% + 20px); padding: 10px; margin: -20px -20px 0px 0px } section.content .column .entry .pic img { display: block; float: left; width: calc(100% - 20px); aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; overflow: hidden; margin: 10px } section.content .column .entry .pic div { float: left; width: calc(100% - 20px); margin: 0px 10px 10px 10px; font-size: 12px; line-height: 18px; text-align: center } section.content .column .entry fieldset div input[type=submit] { color: #ffffff !important } section.content .column .cta { float: left; width: calc(100% + 20px); padding: 10px; margin: -10px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .cta.active { transform: none; filter: none } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column .cta li a { display: block; float: left; padding: 18px 25px 18px 25px; background: #39ab4a; border-radius: 25px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } section.content .column .cta li a:hover { background: #1d1d1b } section.content .column .downloads { float: left; width: calc(100% + 20px); padding: 0px; margin: -10px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .downloads.active { transform: none; filter: none } section.content .column .downloads li { display: block; float: left; width: 100%; padding: 20px; overflow: hidden } section.content .column .downloads li a { display: block; position: relative; float: left; width: 100%; padding: 23px 90px 23px 30px; background: #1d1d1b1a; border-radius: 30px; line-height: 14px; transition: 0.4s ease-in-out } section.content .column .downloads li a:hover { background: #1d1d1b; color: #ffffff } section.content .column .downloads li a:before { display: block; position: absolute; top: -10px; right: -10px; width: 80px; height: 80px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; box-shadow: 0px 0px 10px #1d1d1b1a; content: ''; transition: 0.4s ease-in-out } section.content .column .downloads li a:hover:before { transform: scale(1.1) rotate(360deg) } section.content .column .downloads li a.pdf:before { background-image: url(../../images/layout/downloads_pdf.svg) } section.content .column .downloads li a.doc:before { background-image: url(../../images/layout/downloads_doc.svg) } section.content .column .list { float: left; width: calc(100% - 20px); padding: 40px 20px 40px 20px; background: #ffffff; border-radius: 10px; margin: 10px; box-shadow: 0px 0px 10px #1d1d1b1a; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .list.active { transform: none; filter: none } section.content .column .list h2 { float: left; width: 100%; padding: 20px; font-size: 36px; line-height: 36px; font-weight: 700 } section.content .column .list ul { float: left; width: 100%; padding: 0px; border-top: solid 1px #1d1d1b1a; margin: 0px; list-style-type: none } section.content .column .list ul li { display: block; float: left; width: 100%; border-bottom: solid 1px #1d1d1b1a } section.content .column .list ul li a { display: block; float: left; width: 100%; padding: 20px; transition: 0.4s ease-in-out } section.content .column .list ul li a:hover { background: #1d1d1b1a } section.content .column .list ul li a h3 { color: #39ab4a; font-size: 18px; line-height: 24px } section.content .column .list ul li a h4 { font-size: 14px; line-height: 18px } section.content .column .offices { position: relative; float: left; width: calc(100% - 20px); padding: 20px; background: #f5f5f5; border-radius: 10px; margin: 10px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .offices.active { transform: none; filter: none } section.content .column .offices .pixelmap { display: block; float: right; width: calc(40% - 40px); margin: 20px } section.content .column .offices .pixelmap path { fill: #ff9933 } section.content .column .offices .pixelmap path.selected { fill: #1d1d1b } section.content .column .offices .selector { float: left; width: 60%; padding: 10px } section.content .column .offices .selector h3, section.content .column .offices .selector h4 { float: left; width: calc(100% - 20px); margin: 10px } section.content .column .offices .selector ul { float: left; width: 100%; padding: 5px; margin: 0px; list-style-type: none } section.content .column .offices .selector ul li { display: block; float: left; width: calc(33.3333% - 10px); padding: 13px; background: #ff9933; border-radius: 20px; margin: 5px; color: #ffffff; line-height: 14px; text-align: center; cursor: pointer; transition: 0.4s ease-in-out } section.content .column .offices .selector ul li:hover, section.content .column .offices .selector ul li.selected { background: #1d1d1b } section.content .column .offices .selector ul.small li { width: calc(20% - 10px); padding: 9px; border-radius: 15px; font-size: 12px; line-height: 12px } section.content .column .offices .office { display: none; float: left; width: calc(60% - 40px); margin: 20px } section.content .column .offices .office.selected { display: block } section.content .column .offices .office small { font-size: 14px; line-height: 24px } section.content .tiles { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.content .tiles li { display: block; float: left; width: calc(33.3333% - 20px); margin: 10px; transform: scale(0.5); filter: opacity(0); transition: 0.4s ease-in-out } section.content .tiles li.active { transform: none; filter: none } section.content .tiles li a { display: block; float: left; width: 100%; height: 100%; padding: 30px; background: #215d30; border-radius: 10px; transition: 0.4s ease-in-out } section.content .tiles li a:hover { background: #ffe6cc } section.content .tiles li a span { display: block; position: relative; float: left; width: calc(33.3333% - 20px); padding: 0% 0% calc(33.3333% - 20px) 0%; background: #39ab4a; border-radius: 50%; margin: 10px; transition: 0.4s ease-in-out } section.content .tiles li a:hover span { background: #1d1d1b } section.content .tiles li a span b { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: #ffffff; mask-size: 40%; mask-repeat: no-repeat; mask-position: center; transition: 0.4s ease-in-out } section.content .tiles li a:hover span b { background: #ffe6cc } section.content .tiles li a div { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; transition: 0.4s ease-in-out } section.content .tiles li a:hover div { color: #1d1d1b } section.content .tiles li a div h3 { font-size: 14px; line-height: 24px; text-transform: uppercase } section.content .tiles li a div h4 { font-size: 18px; line-height: 30px; font-weight: 700 } section.content .cards { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.content .cards li { display: block; float: left; width: calc(33.3333% - 20px); margin: 10px; transform: scale(0.5); filter: opacity(0); transition: 0.4s ease-in-out } section.content .cards li.active { transform: none; filter: none } section.content .cards li a { display: block; position: relative; float: left; width: 100%; border-radius: 10px; overflow: hidden } section.content .cards li a picture { display: block; position: relative; float: left; width: 100%; padding: 0% 0% 150% 0% } section.content .cards li a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: 0.4s ease-in-out } section.content .cards li a:hover picture img { transform: none } section.content .cards li a div { position: absolute; left: 0%; bottom: 0%; width: 80%; height: 40%; padding: 15px; background: #ffffff; border-radius: 0px 10px 0px 0px; transition: 0.4s ease-in-out } section.content .cards li a:hover div { background: #ffe6cc } section.content .cards li a div h3, section.content .cards li a div h4 { float: left; width: calc(100% - 10px); margin: 5px } section.content .cards li a div span { display: block; position: absolute; left: 20px; bottom: 20px; color: #39ab4a; font-size: 18px; line-height: 18px } section.content .gallery { display: flex; flex-flow: row wrap; float: left; width: calc(100% - 40px); padding: 20px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 10px #1d1d1b1a; margin: 20px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .gallery.active { transform: none; filter: none } section.content .gallery li { display: block; float: left; width: calc(20% - 40px); margin: 20px; transform: scale(0.5); filter: opacity(0); transition: 0.4s ease-in-out } section.content .gallery li.active { transform: none; filter: none } section.content .gallery li a { display: block; float: left; width: 100%; height: 100%; padding: 5px; transition: 0.4s ease-in-out } section.content .gallery li a:hover { background: #ffe6cc } section.content .gallery li a picture { display: block; position: relative; float: left; width: calc(100% - 10px); padding: 0% 0% calc(100% - 10px) 0%; overflow: hidden; margin: 5px } section.content .gallery li a picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: 0.4s ease-in-out } section.content .gallery li a:hover picture img { transform: none } section.content .gallery li a h3 { float: left; width: calc(100% - 10px); margin: 5px; font-size: 14px; line-height: 18px; font-weight: 700 } section.content .gallery li a h4 { float: left; width: calc(100% - 10px); margin: 5px; font-size: 12px; line-height: 14px } section.projects { float: left; width: 100%; padding: 40px 0px 0px 0px; background: #ffffff; transition: 0.4s ease-in-out } section.projects.active { padding: 0px 0px 40px 0px } section.projects .bx-wrapper, section.projects .bx-wrapper .bx-viewport { float: left; max-width: 100% !important } section.projects .bx-wrapper .bx-viewport ul { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0%; margin: 0% calc(50% - 240px) 0% calc(50% - 240px); list-style-type: none } section.projects .bx-wrapper .bx-viewport ul li { display: block; float: left; width: 480px !important; padding: 20px } section.projects .bx-wrapper .bx-viewport ul li .link { display: block; float: left; width: 100%; height: 100%; padding: 20px 20px 20px 80px; background: url(../../images/layout/bubbles.svg) no-repeat 20px center; background-size: 40px; border-radius: 10px; transition: 0.4s ease-in-out } section.projects .bx-wrapper .bx-viewport ul li .link:hover { background-color: #ffe6cc } section.projects .bx-wrapper .bx-viewport ul li .link h3 { font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase } section.projects .bx-wrapper .bx-viewport ul li .link h4 { color: #ff9933; font-size: 14px; line-height: 18px } section.projects .bx-wrapper .bx-viewport ul li .box { float: left; width: 100%; height: 100%; padding: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 10px #1d1d1b1a } section.projects .bx-wrapper .bx-viewport ul li .box picture { display: block; position: relative; float: left; width: calc(100% + 40px); padding: 0% 0% calc(75% + 30px) 0%; margin: -20px -20px 20px -20px } section.projects .bx-wrapper .bx-viewport ul li .box picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.projects .bx-wrapper .bx-viewport ul li .box h2 { float: left; width: calc(100% - 40px); margin: 20px; font-weight: 700 } section.projects .bx-wrapper .bx-viewport ul li .box h3 { float: left; width: calc(100% - 40px); margin: 20px; font-size: 18px; line-height: 30px } section.projects .bx-wrapper .bx-viewport ul li .box h4 { position: relative; float: left; width: calc(100% - 40px); height: 4px; background: #ff993333; margin: 20px } section.projects .bx-wrapper .bx-viewport ul li .box h4 i { display: block; position: absolute; left: 0%; top: 0%; height: 100%; background: #ff9933 } section.projects .bx-wrapper .bx-viewport ul li .box h4 b { display: block; position: absolute; top: 50%; padding: 4px; background: #ff9933; border-radius: 2.5px; color: #ffffff; font-size: 12px; line-height: 12px; font-weight: 400; transform: translate(-50%,-50%) } section.projects .bx-wrapper .bx-viewport ul li .box div { display: flex; flex-flow: row wrap; justify-content: space-between; float: left; width: 100%; padding: 10px } section.projects .bx-wrapper .bx-viewport ul li .box div u { display: block; float: left; margin: 10px; text-decoration: none } section.projects .bx-wrapper .bx-viewport ul li .box div a { display: block; float: left; padding: 13px 20px 13px 20px; background: #ff9933; border-radius: 20px; margin: 10px; color: #ffffff; line-height: 14px; font-weight: 700; transition: 0.4s ease-in-out } section.projects .bx-wrapper .bx-viewport ul li .box div a:hover { background: #1d1d1b } section.belt { position: relative; z-index: 1; float: left; width: 100%; padding: 20px calc(50% - 600px) 20px calc(50% - 600px) } section.belt .dots { position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; overflow: hidden } section.belt .dots:before { display: block; position: absolute; left: calc(50% - 960px); bottom: 0%; width: 360px; height: 360px; background: url(../../images/layout/dots.svg) no-repeat center; background-size: contain; transform: translateY(10%); content: '' } section.belt .dots:after { display: block; position: absolute; right: calc(50% - 960px); top: 0%; width: 360px; height: 360px; background: url(../../images/layout/dots.svg) no-repeat center; background-size: contain; transform: translateY(-10%); content: '' } section.belt .column { float: left; width: 50%; padding: 10px } section.belt .column .entry { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.belt .column .entry.active { transform: none; filter: none } section.belt .column .entry h1 { color: #39ab4a; font-size: 48px; font-weight: 700 } section.belt .column .icons { float: left; width: calc(100% + 20px); padding: 10px; margin: -10px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.belt .column .icons.active { transform: none; filter: none } section.belt .column .icons li { display: block; float: left; width: calc(33.3333% - 20px); margin: 10px } section.belt .column .icons li a { display: block; float: left; width: 100%; padding: 101px 0px 21px 0px; background-repeat: no-repeat; background-position: center 20px; background-size: 40%; border-radius: 5px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; text-align: center; transition: 0.4s ease-in-out } section.belt .column .icons li a:hover { background-color: #ffffff33 } section.belt .column .icons li:nth-child(1) a { background-image: url(../../images/layout/geldspende.svg) } section.belt .column .icons li:nth-child(2) a { background-image: url(../../images/layout/sachspende.svg) } section.belt .column .icons li:nth-child(3) a { background-image: url(../../images/layout/zeitspende.svg) } section.belt .column .cta { float: left; width: calc(100% + 20px); padding: 10px; margin: -10px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.belt .column .cta.active { transform: none; filter: none } section.belt .column .cta li { display: block; float: left; margin: 10px } section.belt .column .cta li a { display: block; float: left; padding: 21px 30px 21px 30px; background: #39ab4a; border-radius: 30px; color: #ffffff; font-size: 18px; line-height: 18px; transition: 0.4s ease-in-out } section.belt .column .cta li a:hover { background: #1d1d1b } section.belt .column picture { display: block; position: relative; float: right; width: 560px; height: 480px; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 10px #1d1d1b1a; margin: -50px 10px -50px 10px } section.belt .column picture img { display: block; position: absolute; top: 0%; width: 200%; height: 100%; object-fit: cover; transform: translateX(-50%) } section.belt .column picture div { display: block; position: absolute; left: 0%; bottom: 0%; width: 100%; padding: 30px } section.belt .column picture div h2 { float: left; padding: 16px; background: #122b15; border-radius: 5px; margin: 10px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase } section.belt .column picture div h3 { position: relative; float: left; width: calc(100% - 20px); height: 4px; background: #122b1533; margin: 10px } section.belt .column picture div h3 i { display: block; position: absolute; left: 0%; top: 0%; height: 100%; background: #122b15 } section.belt .column picture div h3 b { display: block; position: absolute; top: 50%; padding: 4px; background: #122b15; border-radius: 2.5px; color: #ffffff; font-size: 12px; line-height: 12px; font-weight: 400; transform: translate(-50%,-50%) } section.belt .column picture div span { display: block; float: left; width: calc(100% - 20px); margin: 10px; color: #122b15; line-height: 14px } section.donate { position: relative; float: left; width: 100%; height: 480px; overflow: hidden } section.donate form { position: absolute; z-index: 2; left: 50%; width: 1160px; padding: 40px; background: #ffffff; border-radius: 10px; box-shadow: 0px 0px 10px #1d1d1b1a; transform: translate(-50%,-50%) } section.donate form a { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 100% } section.donate form fieldset div h3 { font-size: 14px; line-height: 24px; font-weight: 700 } section.donate form fieldset div h4 { font-size: 12px; line-height: 18px } section.donate form fieldset div input[type=radio] + label { padding: 23px 0px 23px 0px; background: #1d1d1b33; line-height: 14px; text-align: center; cursor: pointer; transition: 0.4s ease-in-out } section.donate form fieldset div input[type=radio]:hover + label, section.donate form fieldset div input[type=radio]:checked + label { background: #1d1d1b; color: #ffffff } section.donate form fieldset div input[type=checkbox] + label { padding: 23px 0px 23px 90px; line-height: 14px; cursor: pointer } section.donate form fieldset div input[type=checkbox] + label span { display: block; position: absolute; left: 0px; top: 10px; width: 70px; height: 40px; background: #1d1d1b33; border-radius: 20px; transition: 0.4s ease-in-out } section.donate form fieldset div input[type=checkbox]:hover + label span, section.donate form fieldset div input[type=checkbox]:checked + label span { background: #1d1d1b } section.donate form fieldset div input[type=checkbox] + label span:before { display: block; position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #1d1d1b; border-radius: 10px; content: ''; transition: 0.4s ease-in-out } section.donate form fieldset div input[type=checkbox]:hover + label span:before { background: #ffffff } section.donate form fieldset div input[type=checkbox]:checked + label span:before { left: 40px; background: #ffffff } section.donate picture { display: block; position: absolute; z-index: 1; left: 50%; width: 100%; transform: translate(-50%,-50%) } section.donate picture img { display: block; float: left; width: 100% } footer { position: relative; float: left; width: 100%; padding: 20px calc(50% - 600px) 100px calc(50% - 600px) } footer:before { display: block; position: absolute; z-index: -1; left: calc(50% - 960px); top: 50%; width: 520px; height: 680px; background: url(../../images/layout/sachsen-anhalt.svg) no-repeat center; background-size: contain; transform: translateY(-50%); filter: opacity(0.05); content: '' } footer hr { display: block; float: left; width: calc(100% - 40px); height: 1px; background: #ffffff33; border: none; margin: 20px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer hr.active { transform: none; filter: none } footer .contact { float: left; width: 100% } footer .contact ul { float: right; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer .contact ul.active { transform: none; filter: none } footer .contact ul li { display: block; float: left; margin: 10px } footer .contact ul li a { display: block; float: left; padding: 23px 25px 23px 50px; background-color: #ffffff33; background-repeat: no-repeat; background-position: 15px center; background-size: 30px; border-radius: 30px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } footer .contact ul li a:hover { background-color: #1d1d1b } footer .contact ul li:nth-child(1) a { background-image: url(../../images/layout/phone.svg) } footer .contact ul li:nth-child(2) a { background-image: url(../../images/layout/mail.svg) } footer .contact ul li:nth-child(3) a { background-image: url(../../images/layout/marker.svg) } footer .contact .logo { display: block; float: left; width: 270px; height: 60px; background: url(../../images/layout/logo_sakg_light.svg) no-repeat center; background-size: contain; margin: 20px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer .contact .logo.active { transform: none; filter: none } footer .menu { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 10px } footer .menu ul { float: left; width: calc(33.3333% - 20px); padding: 0px; margin: 10px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer .menu ul.active { transform: none; filter: none } footer .menu ul li { display: block; float: left; width: 100%; margin: 0px } footer .menu ul li h4 { float: left; width: 100%; padding: 21px 0px 21px 0px; color: #ffffff; line-height: 18px; font-weight: 700 } footer .menu ul li a { display: block; float: left; width: 100%; padding: 13px 0px 13px 0px; color: #ffffff; line-height: 14px } footer .menu ul:nth-child(1) li h4 { padding: 28px 0px 28px 0px; font-size: 24px; line-height: 24px } footer .menu ul:nth-child(1) li a { padding: 21px 0px 21px 0px; font-size: 18px; line-height: 18px } footer .menu ul:nth-child(2) { width: calc(66.6666% - 20px); padding: 30px; background: #ffffff33; border-radius: 10px } footer .menu ul:nth-child(2) li { width: calc(50% - 20px); margin: 10px } footer .menu ul:nth-child(2) li:first-child { width: calc(100% - 20px) } footer .menu ul:nth-child(2) li h4 { padding: 3px 0px 3px 0px; font-size: 24px; line-height: 24px } footer .menu ul:nth-child(2) li a { padding: 16px; background: #ffffff1a; border-radius: 30px; font-size: 18px; line-height: 18px; text-align: center; transition: 0.4s ease-in-out } footer .menu ul:nth-child(2) li a:hover { background: #1d1d1b } footer .copyright { float: left; width: 100% } footer .copyright ul { display: flex; flex-flow: row wrap; float: right; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer .copyright ul.active { transform: none; filter: none } footer .copyright ul li { display: block; float: left; margin: 10px } footer .copyright ul li a { display: block; float: left; padding: 23px 25px 23px 25px; background: #ffffff33; border-radius: 30px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } footer .copyright ul li a:hover { background: #1d1d1b } footer .copyright div { float: left; margin: 20px; color: #ffffff; line-height: 30px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer .copyright div.active { transform: none; filter: none } footer .copyright div a { color: #ffffff; text-decoration: underline } @media only screen and (max-width: 1279px) { body { font-size: 9px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px; font-size: 9px; line-height: 14px } fieldset { width: calc(100% + 20px); padding: 5px; margin: -10px } fieldset legend { width: 100%; padding: 5px } fieldset div { width: 50%; padding: 5px } fieldset div.slim { width: 20% } fieldset div.wide, fieldset div.full { width: 100% } fieldset div input[type=radio] + label, fieldset div input[type=checkbox] + label { padding: 0px 0px 10px 30px } fieldset div input[type=radio] + label b, fieldset div input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } fieldset div select, fieldset div textarea, fieldset div input[type=date], fieldset div input[type=time], fieldset div input[type=text] { padding: 12px; border-width: 1px; font-size: 9px; line-height: 14px } fieldset div select + label, fieldset div textarea + label, fieldset div input[type=date] + label, fieldset div input[type=time] + label, fieldset div input[type=text] + label { left: 10px; top: 10px; font-size: 9px; line-height: 14px } fieldset div select:focus + label, fieldset div textarea:focus + label, fieldset div input[type=date]:focus + label, fieldset div input[type=time]:focus + label, fieldset div input[type=text]:focus + label, fieldset div select:not([value=""]) + label, fieldset div textarea:not(:placeholder-shown) + label, fieldset div input[type=date]:not(:placeholder-shown) + label, fieldset div input[type=time]:not(:placeholder-shown) + label, fieldset div input[type=text]:not(:placeholder-shown) + label { padding: 3px 8px 3px 8px; font-size: 7px; line-height: 7px } fieldset div textarea { height: 240px } fieldset div button, fieldset div input[type=submit] { height: 40px; padding: 15.5px; font-size: 9px; line-height: 9px } a.show_cookiemanager { left: 10px; bottom: 10px; width: 40px; height: 40px; padding: 8px } a.scrolltop { right: 10px; bottom: 10px; width: 40px; height: 40px } div.preloader:before { width: 100px; height: 100px } div#popUp div { width: 280px; padding: 20px; border-radius: 10px } div#popUp div svg { right: 10px; top: 10px; width: 20px; height: 20px; padding: 5px } div#popUp div h3 { width: calc(100% - 20px); margin: 10px; font-size: 24px } div#popUp div ul { padding: 5px } div#popUp div ul li { width: calc(100% - 10px); margin: 5px } div#popUp div ul li a { padding: 20px 0px 20px 0px; border-radius: 5px; font-size: 14px } header { left: 0px; top: 0px; width: 100%; padding: 10px; background: #ffffff; box-shadow: 0px 2.5px 2.5px 0px #1d1d1b1a } header a { width: 180px; height: 40px } div.switch { display: block; position: fixed; z-index: 4000; right: 10px; top: 10px; width: 40px; height: 40px; background: #ff9933; border-radius: 50%; cursor: pointer; transition: 0.4s ease-in-out } div.switch:hover { background: #1d1d1b } div.switch:before { display: block; position: absolute; left: 30%; width: 40%; height: 4%; background: #ffffff; content: ''; animation: rotate_a1 0.4s forwards } div.switch:after { display: block; position: absolute; left: 30%; width: 20%; height: 4%; background: #ffffff; content: ''; animation: rotate_a2 0.4s forwards } div.switch.active { right: 210px } div.switch.active:before { animation: rotate_b1 0.4s forwards } div.switch.active:after { width: 40%; animation: rotate_b2 0.4s forwards } nav { position: fixed; z-index: 4000; right: -200px; width: 200px; height: 100%; overflow-y: auto } nav.active { right: 0px } nav ul { padding: 5px } nav ul li { width: calc(100% - 10px) } nav ul li a { width: 100%; padding: 14px 20px 14px 20px; border-radius: 20px; font-size: 12px; line-height: 12px } nav ul li:nth-child(6) { display: block } nav ul li:nth-child(6) a { padding: 14px 15px 14px 40px; background: #39ab4a url(../../images/layout/phone.svg) no-repeat 10px center; background-size: 20px; color: #ffffff } nav ul:first-child { padding: 10px 0px 0px 0px } nav ul:first-child li { width: 100% } nav ul:first-child li a { padding: 15.5px 30px 15.5px 30px; font-size: 9px; line-height: 9px } aside { width: 45px } aside:after { width: 25px; height: 80px; box-shadow: 0px 0px 5px #1d1d1b1a; border-radius: 0px 2.5px 2.5px 0px } aside ul { padding: 3.75px } aside ul li { margin: 3.75px } aside ul li a { width: 30px; height: 30px } section.theme { height: 360px } section.theme:has(div) { height: 180px } section.theme:before { left: calc(50% - 140px); bottom: 20px; width: 80px; height: 80px; transform: none } section.theme:after { right: calc(50% - 140px); top: 20px; width: 80px; height: 80px; transform: none } section.theme div { left: calc(50% - 160px); width: 320px; padding: 5px } section.theme div h1 { width: calc(100% - 10px); margin: 5px; font-size: 24px; line-height: 30px } section.theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 9px; line-height: 12px } section.theme picture { min-width: 320px } section.content { padding: 0px calc(50% - 160px) 0px calc(50% - 160px); box-shadow: 0px -2.5px 2.5px 0px #1d1d1b1a } section.content hr { width: calc(100% - 20px); height: 1px; margin: 10px; transform: translateY(40px) } section.content .news { left: calc(50% - 150px); width: 250px; padding: 15px; border-radius: 5px; box-shadow: 0px 0px 5px #1d1d1b1a } section.content .news .logo { width: 135px; height: 30px; margin: 5px } section.content .news ul { width: calc(100% + 40px); margin: 5px -20px 5px -20px } section.content .news ul li a { padding: 7.5px 22.5px 7.5px 22.5px; border-radius: 2.5px } section.content .news ul li a h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 12px; line-height: 14px } section.content .news ul li a h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px; line-height: 12px } section.content .news .cta { margin: 5px } section.content .column { width: 100% !important; padding: 5px } section.content .column picture { width: calc(100% - 10px); padding: 0% 0% calc(75% - 7.5px) 0%; border-radius: 5px; margin: 5px; transform: translateY(40px) } section.content .column .caption { width: calc(100% - 10px); margin: 0px 5px 5px 5px; font-size: 7px; line-height: 12px; transform: translateY(40px) } section.content .column .clickbutton { width: 40px; height: 40px; padding: 0px; background-position: center; border-radius: 50%; margin: 5px } section.content .column .clickbutton h3, section.content .column .clickbutton h4 { display: none } section.content .column .entry { width: calc(100% - 10px); margin: 5px; transform: translateY(40px) } section.content .column .entry h2 { font-size: 18px; line-height: 30px } section.content .column .entry table { width: calc(100% + 20px) !important; margin: 0px -10px 0px -10px } section.content .column .entry table tr td { width: 100%; padding: 0px 5px 10px 5px } section.content .column .entry table tr td:first-child { width: 100%; padding: 10px 5px 0px 5px } section.content .column .entry .pic { width: calc(50% + 10px); padding: 5px; margin: -10px -10px 0px 0px } section.content .column .entry .pic img { width: calc(100% - 10px); border-radius: 5px; margin: 5px } section.content .column .entry .pic div { width: calc(100% - 10px); margin: 0px 5px 5px 5px; font-size: 7px; line-height: 12px } section.content .column .cta { width: calc(100% + 10px); padding: 5px; margin: -5px; transform: translateY(40px) } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 10.5px 15px 10.5px 15px; border-radius: 15px; line-height: 9px } section.content .column .downloads { width: calc(100% + 10px); margin: -5px; transform: translateY(40px) } section.content .column .downloads li { padding: 10px } section.content .column .downloads li a { padding: 14px 60px 14px 20px; border-radius: 20px; font-size: 12px; line-height: 12px } section.content .column .downloads li a:before { top: -5px; right: -5px; width: 50px; height: 50px; box-shadow: 0px 0px 5px #1d1d1b1a } section.content .column .list { width: calc(100% - 10px); padding: 20px 10px 20px 10px; border-radius: 5px; margin: 5px; box-shadow: 0px 0px 5px #1d1d1b1a; transform: translateY(40px) } section.content .column .list h2 { padding: 10px; font-size: 18px; line-height: 18px } section.content .column .list ul li a { padding: 10px } section.content .column .list ul li a h3 { font-size: 12px; line-height: 14px } section.content .column .list ul li a h4 { font-size: 9px; line-height: 12px } section.content .column .offices { width: 100%; padding: 0px; background: none; margin: 0px; transform: translateY(40px) } section.content .column .offices .pixelmap { width: calc(100% - 140px); margin: 10px 70px 10px 70px } section.content .column .offices .selector { width: 100%; padding: 5px } section.content .column .offices .selector h3, section.content .column .offices .selector h4 { width: calc(100% - 10px); margin: 5px } section.content .column .offices .selector ul { padding: 2.5px } section.content .column .offices .selector ul li { width: calc(33.3333% - 5px); padding: 10.5px; border-radius: 15px; margin: 2.5px; line-height: 9px } section.content .column .offices .selector ul.small li { width: calc(20% - 5px); padding: 7px; border-radius: 10px; font-size: 6px; line-height: 6px } section.content .column .offices .office { width: calc(100% - 20px); margin: 10px; font-size: 7px; line-height: 12px } section.content .column .offices .office h3 { font-size: 12px; line-height: 18px } section.content .column .offices .office h4 { font-size: 9px; line-height: 14px } section.content .column .offices .office small { font-size: 6px; line-height: 9px } section.content .tiles { padding: 5px } section.content .tiles li { width: calc(50% - 10px); margin: 5px } section.content .tiles li a { padding: 5px; border-radius: 5px } section.content .tiles li a span { width: calc(33.3333% - 10px); padding: 0% 0% calc(33.3333% - 10px) 0%; margin: 5px } section.content .tiles li a div { width: calc(100% - 10px); margin: 5px } section.content .tiles li a div h3 { font-size: 7px; line-height: 12px } section.content .tiles li a div h4 { font-size: 9px; line-height: 14px } section.content .cards { padding: 5px } section.content .cards li { width: calc(50% - 10px); margin: 5px } section.content .cards li a { border-radius: 5px } section.content .cards li a div { padding: 7.5px; border-radius: 0px 5px 0px 0px } section.content .cards li a div h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 9px; line-height: 14px } section.content .cards li a div h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 7px; line-height: 12px } section.content .cards li a div span { left: 10px; bottom: 10px; font-size: 7px; line-height: 7px } section.content .gallery { width: calc(100% - 20px); padding: 5px; border-radius: 5px; box-shadow: 0px 0px 5px #1d1d1b1a; margin: 10px; transform: translateY(40px) } section.content .gallery li { width: calc(33.3333% - 5px); margin: 2.5px } section.content .gallery li a { padding: 1px } section.content .gallery li a picture { width: calc(100% - 2px); padding: 0% 0% calc(100% - 2px) 0%; margin: 1px } section.content .gallery li a h3 { width: calc(100% - 2px); margin: 1px; font-size: 9px; line-height: 12px } section.content .gallery li a h4 { width: calc(100% - 2px); margin: 1px; font-size: 7px; line-height: 9px } section.projects { padding: 20px 0px 0px 0px } section.projects.active { padding: 0px 0px 20px 0px } section.projects .bx-wrapper .bx-viewport ul { margin: 0% calc(50% - 120px) 0% calc(50% - 120px) } section.projects .bx-wrapper .bx-viewport ul li { width: 240px !important; padding: 10px } section.projects .bx-wrapper .bx-viewport ul li .link { padding: 10px 10px 10px 40px; background-position: 10px center; background-size: 20px; border-radius: 5px } section.projects .bx-wrapper .bx-viewport ul li .link h3 { font-size: 9px; line-height: 12px } section.projects .bx-wrapper .bx-viewport ul li .link h4 { font-size: 7px; line-height: 9px } section.projects .bx-wrapper .bx-viewport ul li .box { padding: 10px; border-radius: 5px; box-shadow: 0px 0px 5px #1d1d1b1a } section.projects .bx-wrapper .bx-viewport ul li .box picture { width: calc(100% + 20px); padding: 0% 0% calc(75% + 15px) 0%; margin: -10px -10px 10px -10px } section.projects .bx-wrapper .bx-viewport ul li .box h2 { width: calc(100% - 20px); margin: 10px; font-size: 14px; line-height: 24px } section.projects .bx-wrapper .bx-viewport ul li .box h3 { width: calc(100% - 20px); margin: 10px; font-size: 9px; line-height: 14px } section.projects .bx-wrapper .bx-viewport ul li .box h4 { width: calc(100% - 20px); height: 2px; margin: 10px } section.projects .bx-wrapper .bx-viewport ul li .box h4 b { padding: 2px; border-radius: 1.25px; font-size: 6px; line-height: 6px } section.projects .bx-wrapper .bx-viewport ul li .box div { padding: 5px } section.projects .bx-wrapper .bx-viewport ul li .box div u { margin: 5px; font-size: 7px; line-height: 12px } section.projects .bx-wrapper .bx-viewport ul li .box div a { padding: 6.5px 10px 6.5px 10px; border-radius: 10px; margin: 5px; font-size: 7px; line-height: 7px } section.belt { padding: 10px calc(50% - 160px) 10px calc(50% - 160px) } section.belt .dots:before { left: calc(50% - 150px); bottom: 10px; width: 80px; height: 80px; transform: none } section.belt .dots:after { right: calc(50% - 150px); top: 10px; width: 80px; height: 80px; transform: none } section.belt .column { width: 100%; padding: 5px } section.belt .column .entry { width: calc(100% - 10px); margin: 5px; transform: translateY(40px) } section.belt .column .entry h1 { font-size: 24px; line-height: 30px } section.belt .column .icons { width: calc(100% + 10px); padding: 5px; margin: -5px; transform: translateY(40px) } section.belt .column .icons li { width: calc(33.3333% - 10px); margin: 5px } section.belt .column .icons li a { padding: 54px 0px 4px 0px; background-position: center 10px; border-radius: 2.5px; font-size: 12px; line-height: 12px } section.belt .column .cta { width: calc(100% + 10px); padding: 5px; margin: -5px; transform: translateY(40px) } section.belt .column .cta li { margin: 5px } section.belt .column .cta li a { padding: 14px 20px 14px 20px; border-radius: 20px; font-size: 12px; line-height: 12px } section.belt .column picture { width: 300px; height: 240px; border-radius: 5px; box-shadow: 0px 0px 5px #1d1d1b1a; margin: 5px } section.belt .column picture div { padding: 15px } section.belt .column picture div h2 { padding: 9px; border-radius: 2.5px; margin: 5px; font-size: 12px; line-height: 12px } section.belt .column picture div h3 { display: none } section.belt .column picture div span { width: calc(100% - 10px); margin: 5px; line-height: 9px } section.donate form { width: 300px; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 5px #1d1d1b1a } section.donate form fieldset div h3 { font-size: 9px; line-height: 14px } section.donate form fieldset div h4 { font-size: 7px; line-height: 12px } section.donate form fieldset div input[type=radio] + label { padding: 15.5px 0px 15.5px 0px; line-height: 9px } section.donate form fieldset div input[type=checkbox] + label { padding: 8px 0px 8px 55px; line-height: 12px } section.donate form fieldset div input[type=checkbox] + label span { top: 5px; width: 45px; height: 30px; border-radius: 15px } section.donate form fieldset div input[type=checkbox] + label span:before { left: 7.5px; top: 7.5px; width: 15px; height: 15px; border-radius: 7.5px } section.donate form fieldset div input[type=checkbox]:checked + label span:before { left: 22.5px } section.donate picture { width: 300% } footer { padding: 10px calc(50% - 160px) 50px calc(50% - 160px) } footer:before { left: calc(50% - 130px); width: 260px; height: 340px } footer hr { width: calc(100% - 20px); margin: 10px; transform: translateY(40px) } footer .contact ul { padding: 5px; transform: translateY(40px) } footer .contact ul li { margin: 5px } footer .contact ul li a { width: 30px; height: 30px; padding: 0px; background-position: center; background-size: 66.6666%; border-radius: 50%; color: transparent; font-size: 0px; line-height: 0px } footer .contact .logo { width: 135px; height: 30px; margin: 10px; transform: translateY(40px) } footer .menu { padding: 5px } footer .menu ul { width: calc(100% - 10px); margin: 5px; transform: translateY(40px) } footer .menu ul li { width: 50% } footer .menu ul li:first-child { width: 100% } footer .menu ul li h4 { padding: 9px 0px 9px 0px; line-height: 12px } footer .menu ul li a { padding: 5.5px 0px 5.5px 0px; line-height: 9px } footer .menu ul:nth-child(1) li h4 { padding: 13px 0px 13px 0px; font-size: 14px; line-height: 14px } footer .menu ul:nth-child(1) li a { padding: 14px 0px 14px 0px; font-size: 12px; line-height: 12px } footer .menu ul:nth-child(2) { width: calc(100% - 10px); padding: 5px; border-radius: 5px } footer .menu ul:nth-child(2) li { width: calc(50% - 10px); margin: 5px } footer .menu ul:nth-child(2) li:first-child { width: calc(100% - 10px) } footer .menu ul:nth-child(2) li h4 { font-size: 14px; line-height: 14px } footer .menu ul:nth-child(2) li a { padding: 9px; border-radius: 15px; font-size: 12px; line-height: 12px } footer .copyright ul { width: 100%; padding: 5px; transform: translateY(40px) } footer .copyright ul li { flex-grow: 1; margin: 5px } footer .copyright ul li a { width: 100%; padding: 10.5px; background: #ffffff33; border-radius: 15px; line-height: 9px; text-align: center } footer .copyright div { width: calc(100% - 20px); margin: 10px; line-height: 18px; transform: translateY(40px) } }