/* Theme Name: Evangelisch an Sieg und Rhein Description: WordPress Theme für Relaunch (Child EKASUR) - Updated by Kirchenkreis an Sieg und Rhein in collaboration with Christian Stenner (https://heystenner.com) Template: ekasur-relaunch Version: 1.5.3 Text Domain: ekasur-relaunch-child */ /* Main Stylesheet EKASUR Child Theme */ /* ------------------------------------------------------------- 00 Inhalt ---------------------------------------------------------------- 01 # Gloabl Settings a) Global Variables - CS b) Import Fonts locally 02 # General a) Back to top button b) Preloader c) Global Styles - CS 03 # Header 04 # Navigation Menu a) Search Form in Navigation b) Mobile Navigation c) Custom CTA Button in Navigation - CS 05 # Breadcrumps 06 # Sections a) Sections Header b) Sections Main c) zielgruppen-icons Jugendwerk d) Newsarchiv e) Searchresults f) Blogpost-detail g) Lastblogposts I) Custom Posts Module h) About Block multitask i) Shortboxes j) FunFacts k) Call To Action m) Features Section n) Teamcards o) FAQ Section p) Angebote q) Aboutshort r) gemeindefinder s) kontaktseite t) iconboxes u) kontaktperson (Diakonie) v) Adresse & Kontakt x) Bildergalerie 07 # Footer a) Social Media Icons 08 # Responsive Media Queries # Terminkalender iFrame 10 # Cookie Policy 11 # Newsletter Styling Footer et al. --------------------------------------------------------------- */ /* -------------------------------------------------------------- 01 # Global Settings -------------------------------------------------------------- */ /* a) Global Variables - CS */ /* --> CSS Custom Properties defined in functions.php <-- */ /* b) Import Fonts Locally */ /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Montserrat Italic'), local('Montserrat-Italic'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-500 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */ src: local('Montserrat Medium'), local('Montserrat-Medium'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-500italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.eot'); /* IE9 Compat Modes */ src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-700 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */ src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* montserrat-700italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.eot'); /* IE9 Compat Modes */ src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/montserrat/montserrat-v14-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* -------------------------------------------------------------- */ /* quicksand-500 - latin */ @font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; src: url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */ } /* quicksand-600 - latin */ @font-face { font-family: 'Quicksand'; font-style: bold; font-weight: 600; src: url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.woff') format('woff'), /* Modern Browsers */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../ekasur-relaunch/assets/fonts/quicksand/quicksand-v21-latin-600.svg#Quicksand') format('svg'); /* Legacy iOS */ } /* -------------------------------------------------------------- 02 # General -------------------------------------------------------------- */ /* d) Global Styles - CS */ body { background: var(--white); color: var(--black); } h1, h2, h3, h4, h5, h6 { font-family: "Quicksand", sans-serif; font-family: var(--font-primary); color: var(--black); } p { font-family: "Montserrat", sans-serif; font-family: var(--font-secondary); } li, .btn { font-family: "Quicksand", sans-serif; font-family: var(--font-primary); } a { font-family: "Quicksand", sans-serif; font-family: var(--font-primary); color: var(--secondary); } a:hover, a:active, a:focus { color: var(--secondary); } .h1style { color: var(--black); } h3.section-title { color: var(--primary); } .text-weiss { color: var(--white) !important; } .text-white { color: var(--white) !important; } .text-lila { color: var(--primary) !important; } .black { color: var(--black); } div.leadtext { color: var(--accent); background-color: var(--primary); } .card { background-color: var(--white); } .cta-btn.eigene { background-color: var(--accent) !important; color: var(--black) !important; } .btn-primary { color: var(--white); background-color: var(--secondary); border-color: var(--secondary); } .btn-primary:hover { background-color: var(--secondary); border-color: var(--secondary); color: var(--accent); } .btn-success { color: var(--white); background-color: var(--primary); padding: 8px; } .btn-success:hover, .btn-success:focus, .btn-success:active { color: var(--accent); } .btn-success:hover { color: var(--white); background-color: var(--primary); border-color: var(--white); } .btn-success { border-color: transparent; } .btn { font-weight: 600; } /* a) Back to top button */ .back-to-top { background: var(--secondary); color: var(--white); } .back-to-top i { color: var(--white); } /* b) Prelaoder */ #preloader { background: var(--white); } #preloader:before { border: 6px solid var(--subtle); border-top: 6px solid var(--secondary); } /* -------------------------------------------------------------- 03 # Header -------------------------------------------------------------- */ /* #header { background-color: var(--white); } */ #header.header-scrolled, #header.header-pages { background-color: var(--white); box-shadow: 0px 0px 30px rgba(144, 144, 144, 0.3); } #header .logo h1 a, #header .logo h1 a:hover { color: var(--primary); } /* -------------------------------------------------------------- 04 # Navigation Menu -------------------------------------------------------------- */ /* Desktop Navigation */ nav.main-nav ul li a { font-family: "Quicksand", sans-serif; font-family: var(--font-primary); color: var(--primary); } .main-nav a { color: var(--primary); } .main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a { color: var(--secondary); text-decoration: none; } .main-nav .drop-down ul { background: var(--white); box-shadow: 0px 0px 30px rgba(144, 144, 144, 0.25); } .main-nav .drop-down ul a { padding: 10px 20px; font-weight: 500; text-transform: none; color: var(--primary); } .main-nav .drop-down ul a:hover, .main-nav .drop-down ul .active > a, .main-nav .drop-down ul li:hover > a { color: var(--secondary); } /* a) Search Form in Navigation */ input { color: var(--placeholder) !important; background-color: var(--white) !important; } .form-control { padding-left: 5px; } /* Placeholder Text */ ::-webkit-input-placeholder { /* Edge */ color: var(--placeholder) !important; } :-ms-input-placeholder { /* Internet Explorer */ color: var(--placeholder) !important; } ::placeholder { color: var(--placeholder) !important; } /* b) Mobile Navigation */ .mobile-nav { background: rgba(var(--primary-rgb), 0.9); } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: var(--secondary); } .mobile-nav-toggle i { color: var(--primary); } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: var(--secondary); text-decoration: none; } .mobile-nav-toggle i { margin: 18px 18px 0 0; color: var(--black); } .mobile-nav-overly { background: rgba(var(--primary-rgb), 0.8); } /* c) Custom CTA Button in Navigation - CS */ .custom-menu a{ color: var(--white)!important; background-color: var(--primary); padding: 10px; margin: 0px 10px; border-radius: 4px; border: 0px solid var(--primary); } .custom-menu:hover{ text-decoration: none; color: var(--white)!important; } .custom-menu a:hover{ color: var(--white)!important; background-color: var(--secondary); border: solid var(--primary) 0px; } /* Mobile Navigation */ .mobile-nav .custom-menu a{ color: var(--primary)!important; background-color: var(--accent); padding: 10px; border-radius: 0px; } .mobile-nav .custom-menu:hover{ text-decoration: none; color: var(--white)!important; } .mobile-nav .custom-menu a:hover{ color: var(--secondary)!important; background-color: var(--primary)00; border: solid var(--primary) 0px; } /* -------------------------------------------------------------- 05 # Breadcrumps ---------------------------------------------------------------- */ /* #breadcrumps { margin-top: 60px; } */ /* -------------------------------------------------------------- 06 # Sections -------------------------------------------------------------- */ /* a) Sections Header -------------------------------- */ .section-header h3 { color: var(--white); } .section-header p { color: var(--white); } /* d) 6 Latest Blog Posts & Newsarchiv -------------------------------- */ #lastblogposts h3 { color: var(--black); } #lastblogposts p { color: var(--black); } /* f) Sections Blogpost-detail -------------------------------- */ #blogpostdetail .figure-caption { color: var(--accent); } div.audioblock { background-color: var(--secondary); color: var(--white); } /* g) Sections Lastblogposts -------------------------------- */ .bg-wrapper01 { background-color: var(--primary); } /* g) I) Custom Posts Module -------------------------------- */ .bg-wrapper02 { background-color: var(--light-grey); background-size: cover; padding-top: 30px; padding-bottom: 30px; } #postscustom h3 h4 h5 { color: var(--white); } #postscustom .img-fluid { border-radius: 0.125rem; } #postscustom .figure-caption { color: var(--subtle); font-size: 0.5rem; padding: 2px; } div .postscustom { padding: 15px; } div .categorytitle { color: var(--white); font-family: "Quicksand", sans-serif; font-family: var(--font-primary); font-size: 1.2em; font-weight: bold; padding: 20px 10px; display: flex; align-items: center; justify-content: center; min-height: 50px; text-align: center; line-height: 1.2; } /* h) About Block multitask -------------------------------- */ div.about .about-content { font: var(--black); } div.about .about-content h2 { color: var(--black); } div.about .about-content h3 { color: var(--black); } div.about .about-content h4 { color: var(--black); } div.about .about-content ul li i, div.pressetextblock .aufzaehlung ul li i { font-size: 20px; padding-right: 4px; color: var(--secondary); } div.about .about-img::before { background-image: linear-gradient(to top, var(--primary) 40%, var(--secondary) 100%); } div.about .about-img::after { background-image: linear-gradient(to top, var(--primary) 10%, var(--secondary) 100%); } /* i) Shortboxes -------------------------------- */ #shortboxes .box { background-color: var(--accent); background: var(--white); } #shortboxes .title a { color: var(--black); } #shortboxes .box:hover .title a { color: var(--secondary); } /* j) FunFacts -------------------------------- */ #funfacts .funfacts-content .features h4 { color: var(--primary); } #funfacts .funfacts-content .features p { color: var(--primary); } #funfacts .counters span { color: var(--primary); } #funfacts .counters p { color: var(--primary); } /* k) Call To Action -------------------------------- */ div.call-to-action { background: var(--secondary); } div.call-to-action .cta-title { color: var(--white); } div.call-to-action .cta-text { color: var(--white); } div.call-to-action a { color: var(--secondary); } .cta-btn { background-color: var(--accent); color: var(--primary); } div.call-to-action .cta-btn:hover { background-color: var(--secondary); color: var(--accent); } .mail-link { color: var(--accent); } /* n) Team -------------------------------- */ .teamheader h3 { color: var(--black); } div.card-header01 { background-color: var(--primary); } div.teamcards div.row.card-teams { color: var(--accent); } /* o) FAQ -------------------------------- */ div.faq .akkordionclr { background-color: var(--accent); } div.faq .section-header h3 { color: var(--primary); } div.faq { background-color: var(--primary); } div.faq .faq-list li { border-bottom: 1px solid var(--light-grey); background-color: var(--white); } div.faq .faq-list p { color: var(--primary); } div.faq .faq-list a.collapse { color: var(--secondary); } .txtclr { color: var(--white); } div.faq a.akkordioncolor, div.faq a:hover, div.faq a:active, div.faq a:focus, div.faq i { color: var(--primary); } /* p) Angebote -------------------------------- */ div.angebote { background-color: var(--light-grey); } .leadtext a { color: var(--accent); } .leadtext h3 { } /* q) aboutshort -------------------------------- */ .aboutshort { background-color: var(--primary); } .aboutshort header.section-header h3 { color: var(--black); } .aboutshort div.row { background-color: var(--white); } .aboutshort .about-content { font: var(--black); } .aboutshort .about-content h2 { color: var(--black); } .aboutshort .about-content h3 { color: var(--black); } .aboutshort .about-content ul li i { color: var(--secondary); } .aboutshort .col-lg-8{ width: 100%; margin: auto; } .aboutshort .about-img img { border: 8px solid var(--white); } /* s) kontaktseite -------------------------------- */ div#myModal-kontakt div.modal-header { background-color: var(--primary); color: var(--white); } div#myModal-kontakt button.close { color: var(--white); } /* t) iconboxes -------------------------------- */ div.iconboxes { background-color: var(--primary); } div.icon { background-color: var(--accent); } i.colorme { color: var(--primary); } div.iconboxes .box { background-color: var(--accent); background: var(--white); } div.iconboxes .title a { color: var(--black); } div.iconboxes .box:hover .title a { color: var(--secondary); } div.iconboxes .section-header h3 { color: var(--accent); } /* u) kontaktperson (Diakonie) - Ansprechpartner-Modul -------------------------------- */ .kontaktperson div.container { background-color: var(--primary); } .kontakttext { color: var(--white); } a.kontaktmail { color: var(--accent); } a.kontaktmail:hover { color: var(--secondary); } .section-header02 h3 { color: var(--white); } /* v) --------------- Adresse & Kontakt -------------------------------- */ .adressblock div.container { background-color: var(--primary); } div.adresslinks { background-color: var(--primary); } .kontakttext01 { color: var(--white); } a.kontaktmail01 { color: var(--accent); } .section-header03 h3 { color: var(--white); } /* -------------- Newsarchiv & Newsuebersicht ---------------------- */ #newsarchiv h2.card-header, #newsarchiv h3, #newsarchiv div.card-header { background-color: var(--primary); color: var(--white); } #newsarchiv h3.archivsytle01 { color: var(--white); } div.background01 { background-image: linear-gradient(rgba(var(--primary-rgb),0.9), rgba(var(--primary-rgb),0.9)), url(../ekasur-relaunch-child/assets/media/header-kk-bg-gerade.svg); background-color: var(--primary); background-size: cover; padding: 30px 0 30px 0; } div.videoblock { background-image: linear-gradient(rgba(var(--primary-rgb),0.9), rgba(var(--primary-rgb),0.9)), url(../ekasur-relaunch-child/assets/media/header-kk-bg-gerade.svg); background-size: cover; padding: 30px 0 30px 0; max-width: 100%; } /* ----------------- x) Bildergalerie ---------------------------- */ .img_gallery_block { margin-top: 20px; margin-bottom: 20px; } .gallery-top .swiper-slide { background: var(--primary) !important; } /* ----------------- Styles EKASUR Terminkalender iFrame ---------------------------- */ div.et_veranstalter { font-family: "Montserrat", sans-serif; font-family: var(--font-secondary); } .et_filter_headline, .et_filter_subrow { background-color: var(--primary) !important; padding: 10px !important; color: var(--white) !important; } .monthbar { background: var(--secondary) !important; padding: 10px !important; color: var(--black) !important; } #ETFilter_highlight, #ETFilter_eventtype, #ETFilter_people, #highlight, #eventtype, #people { padding: 5px !important; } .et_filter_block div, .et_filter_block_left div, .et_filter_block_right div { padding: 5px !important; } button#Suche.et_submit, button#reset.et_reset { background-color: var(--secondary) !important; color: var(--black) !important; font-weight: bold !important; border: none !important; padding: 10px 20px !important; } .et_filter_block_left, .et_filter_block_right { padding-top: 20px !important; padding-bottom: 20px !important; } .et_submit { font-size: 1rem !important; width: 150px !important; color: var(--black) !important; } #et_container .even, #et_content_container .even { padding: 20px 0 !important; } #et_container .odd, #et_content_container .odd { padding: 20px 0 !important; background-color: rgba(var(--accent-rgb),0.2) !important; } .simple-pagination { padding: 10px 0 10px 5px !important; background-color: var(--light-grey) !important; } .light-theme a, .light-theme span { color: var(--black) !important; font-size: 1rem !important; font-weight: bold !important; border: none !important; padding: 8px 16px !important; margin: 0 7px 0 0 !important; border-radius: 3px !important; background-color: rgba(var(--accent-rgb),0.2) !important; } .et_filter_main, .et_filter_block div, .et_filter_block_left div, .et_filter_block_right div, .et_filter_block_right div { background-color: var(--subtle) !important; } /* -------------------------------------------------------------- 07 # Footer -------------------------------------------------------------- */ #footer { background: var(--white); } #footer .footer-top { background-color: var(--primary); } #footer .footer-top .footer-info h3 { color: var(--primary); } #footer .footer-top .social-links a { background: var(--secondary); color: var(--white); } #footer .footer-top .social-links a:hover { background: var(--secondary); color: var(--white); } #footer .footer-top .footer-links ul a { color: var(--white); } #footer .footer-top .footer-links ul a:hover { color: var(--secondary); } #footer .footer-newsletter h4 { color: var(--white); } #footer .footer-top .footer-newsletter input[type="email"] { border: 1px solid var(--subtle); } #footer .footer-top .footer-newsletter input[type="submit"] { background: var(--secondary); border: 1px solid var(--secondary); color: var(--white); } #footer .footer-top .footer-newsletter input[type="submit"]:hover { background: var(--secondary); } #footer .footer-top .form #sendmessage { color: var(--white); background: var(--secondary); } #footer .footer-top .form #errormessage { color: var(--white); background: var(--black); } #footer .footer-top .form .validation { color: var(--black); } #footer .footer-top .form label { color: var(--primary); } #footer .footer-top .form input, #footer .footer-top .form textarea { border: 1px solid var(--subtle); } #footer .footer-top .form input::-webkit-input-placeholder, #footer .footer-top .form textarea::-webkit-input-placeholder { color: var(--placeholder); } #footer .footer-top .form input::-moz-placeholder, #footer .footer-top .form textarea::-moz-placeholder { color: var(--placeholder); } #footer .footer-top .form input:-ms-input-placeholder, #footer .footer-top .form textarea:-ms-input-placeholder { color: var(--placeholder); } #footer .footer-top .form input::placeholder, #footer .footer-top .form textarea::placeholder { color: var(--placeholder); } #footer .footer-top .form button[type="submit"] { background: var(--secondary); color: var(--white); } #footer .footer-top .form button[type="submit"]:hover { background: var(--secondary); } #footer .copyright { color: var(--primary); } #footer .credits { color: var(--primary); } #footer .credits a { color: var(--secondary); } #footer .credits a:hover { color: var(--secondary); } #footer a { color: var(--white) !important; } /* ----------------- a) Footer Social Media Icons -------------------------------- */ a.social-link .fa.fa-facebook { padding-right: 2px; padding-top: 1.5px; } a.social-link .fa.fa-instagram { padding-left: 2px; padding-right: 1px; padding-top: 1px; } a.social-link .fa.fa-linkedin { padding-left: 1px; } a.social-link .fa.fa-twitter { padding-top: 1.5px; } a.social-link .fa.fa-youtube-play { padding-left: 1px; padding-top: 1px; } /* Replace Twitter Icon with X */ .fa.fa-twitter { font-family: sans-serif; } .fa.fa-twitter::before { content: "𝕏"; font-size: 1.3rem; line-height: 0px; } div.social-links-description { display: flex; justify-content: center; align-items: center; margin-left: 4px; } a.social-links-description { font-size: 17px; display: flex; justify-content: center; font-family: var(--font-secondary); } #footer .footer-top .social-links a:hover { background-color: var(--accent); } /* -------------------------------------------------------------- 08 # Responsive Media Queries -------------------------------------------------------------- */ div.kontakt-rechts, div.kontakt-links { background-color: var(--white); } /* -------------------------------------------------------------- 10 # Cookie Policy -------------------------------------------------------------- */ #cookie-notice .cookie-notice-container { font-size: 1.1rem; font-weight: 500; line-height: 1.5; font-family: "Montserrat", sans-serif; font-family: var(--font-secondary); padding: 20px; } .cn-button.policybuttons, .cn-button.wp-default { color: var(--white) !important; background: var(--primary) !important; padding: 8px 12px !important; border-radius: 4px !important; font-size: 1rem !important; margin: 10px !important; font-family: var(--font-primary); font-family: "Quicksand"; } .cn-button.policybuttons:hover, .cn-button.wp-defaul:hover { color: var(--white) !important; background: var(--secondary) !important; } /* -------------------------------------------------------------- 11 # Newsletter Styling Footer et al. -------------------------------------------------------------- */ #mailpoet_form_2 { margin-top: -40px; margin-left: -20px; font-family: "Montserrat", sans-serif; font-family: var(--font-secondary); font-size: 15px; } #footer div.footer-rechts div.footer-newsletter h4 { text-align: left; } #footer .footer-top .social-links #mailpoet_form_2 a { font-size: 16px; color: var(--white); text-align: left; transition: 0.3s; display: inline-block; background: transparent; border-radius: none; } #mailpoet_form_4 .mailpoet_paragraph { font-size: 1rem; line-height: 1.5 !important; font-family: "Montserrat", sans-serif; font-family: var(--font-secondary); } input.mailpoet_submit { background-color: var(--accent); color: var(--white); font-family: "Quicksand", sans-serif; font-family: var(--font-primary); font-weight: 600; border-radius: 10px; }