/** * Theme: Politics 2023 * * Bootstrap breakpoints * --------------------- * xs: 0, * sm: 576px, * md: 768px, * lg: 992px, * xl: 1200px, * xxl: 1400px * * colors * ------ * * @white = #fff rgba(255,255,255, 1) * @light = #e3e3e3 * @blue = #00ccff rgba(0,162,223, 1) * @dkblue = #006699 rgba(0,102,166, 1) * @blkblue = #173557 rgba(23,53,87, 1) * @red = #cc0000 rgba(213,23,47, 1) * @grey = #999 rgba(80,80,80, 1) * @dark = #333 * **/ /* define colors */ @font-color: #444; @white: #fff; @light: #e3e3e3; @grey: #999; @dark: #333; @blue: #00ccff; @dkblue: #006699; @blkblue: #173557; @red: #cc0000; .white { color: @white; } .light { color: @light; } .grey { color: @grey; } .dark { color: @dark; } .blue { color: @blue; } .dkblue { color: @dkblue; } .red { color: @red; } .bg-white { background-color: @white; color: @font-color; } .bg-grey { background-color: @grey; color: @white; } .bg-light { background-color: @light; } .bg-dark { background-color: @dark; color: @white; } .bg-blue { background-color: @blue; color: @white; } .bg-dkblue { background-color: @dkblue; color: @white; } .bg-red { background-color: @red; color: @white; } .bg-white-transparent { background-color: rgba(255,255,255, .8); } .bg-dark-transparent { background-color: rgba(0,0,0, .5); } .bg-transparent { background-color: rgba(0,0,0, .5) !important; } /* fonts */ @font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; src: url('../fonts/Open_Sans/static/OpenSans/OpenSans-Light.ttf') format('truetype'); } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url('../fonts/Open_Sans/static/OpenSans/OpenSans-Regular.ttf') format('truetype'); } @font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; src: url('../fonts/Open_Sans/static/OpenSans/OpenSans-Bold.ttf') format('truetype'); } @font-face { font-family: "Barlow"; font-weight: 300; font-style: normal; src: url('../fonts/Barlow/Barlow-Light.ttf') format('truetype'); } @font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; src: url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype'); } @font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; src: url('../fonts/Barlow/Barlow-Bold.ttf') format('truetype'); } /* Set font classes */ @font-face { font-family: 'LigatureSymbols'; src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.woff') format('woff'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'); font-weight: normal; font-style: normal; } .lsf, .lsf-icon:before { font-family: 'LigatureSymbols'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .lsf-icon:before { content: attr(title); margin-right: 0.3em; font-size: 130%; } .lsf-icon.favorite:before { content: '\E121'; } /* defaults */ .clearfix { overflow: auto; } html, body { background-color: @white; overflow-x: hidden; /* Prevent scroll on narrow devices */ } body { font-family: "Open Sans", Sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5em; background-color: transparent; color: @font-color; /* padding-top: 56px; /* adjust content to fixed navbar */ } @media (min-width:1400px) { body { font-size: 18px; } } .header-font { font-family: "Barlow"; } h1 { font-family: "Barlow"; /* font-size: 28px; */ font-size: 32px; color: @grey; } h2 { font-family: "Barlow"; font-size: 30px; } h3 { font-family: "Barlow"; font-size: 28px; } h4 { font-family: "Barlow"; font-size: 26px; } h5 { font-size: 23px; } h6 { font-size: 16px; } h1, h2, h3 { font-weight: 300; } h1 .lsf, h2 .lsf, h3 .lsf { font-size: 150%; margin-right: .5rem; } @media (max-width:576px) { h1, h2 { word-break: break-word; } } @media (min-width:1200px) { h1 { font-size: 46px; line-height: 1.15em; } h2 { font-size: 32px; line-height: 1.15em; } h3 { font-size: 26px; line-height: 1.15em; } h4 { font-size: 24px; } h5 { font-size: 22px; } h6 { font-size: 18px; } } .small { font-size: .8em; line-height: 1.2em !important; } strong, .strong { font-weight: 500 !important; } .extrastrong { font-weight: 600 !important; } .extralight { font-weight: 300 !important; } .justify { text-align: justify; } .uppercase { text-transform: uppercase; } /* lists */ /* links */ a, a:link, a:visited { color: @font-color; text-decoration: none; transition: all linear .3s; } a:hover, a:active { color: @blue; text-decoration: none; transition: all linear .3s; } .bg-red a, .bg-red a:link, .bg-red a:visited { color: @white; } .bg-red a:hover, .bg-red a:active { color: @white; } /* buttons */ .btn, .btn:link, .btn:visited, .btn:active, .btn:hover { border-radius: 0; border: none; display: inline-block; padding: .65rem 1.5rem; } .btn-default, .btn-default:link, .btn-default:visited { background-color: @red; color: @white; transition: all linear .3s; } .btn-default:hover, .btn-default:active, .btn-default:focus { background-color: @blue; color: @white; } .btn-dark, .btn-dark:link, .btn-dark:visited { background-color: @dark; color: @white; transition: all linear .3s; } .btn-dark:hover, .btn-dark:active, .btn-dark:focus { background-color: @grey; color: @white; } .btn-light, .btn-light:link, .btn-light:visited { background-color: @light; color: @font-color; transition: all linear .3s; } .btn-light:hover, .btn-light:active { background-color: @grey; color: @white; } .btn-outline, .btn-outline:link, .btn-outline:visited { background-color: transparent; color: @font-color; border: solid 2px @font-color; transition: all linear .3s; margin-bottom: .5rem; } .btn-outline:hover, .btn-outline:active { background-color: transparent; color: @font-color; border: solid 2px @font-color; } .bg-color .btn-outline, .bg-color .btn-outline:link, .bg-color .btn-outline:visited { background-color: transparent; color: @white; border: solid 2px @white; transition: all linear .3s; } .bg-color .btn-outline:hover, .bg-color .btn-outline:active { background-color: transparent; color: @white; border: solid 2px @white; } .btn-animated { position: relative; overflow: hidden; } .btn-animated span.pxl { position: absolute; z-index: 10; bottom: 0; left: 0; background-color: transparent; width: 1px; height: 6px; transition: all ease-in .5s; } .btn-animated:hover span.pxl { background-color: @blue; transform: scale(800,1); } @media (min-width:576px) { .btn-outline { margin-left: .25rem; margin-right: .25rem; } } /* img */ img { width: auto; max-width: 100%; height: auto; } /* animated */ .animate-inview-element, .animate__animated { opacity: 0; } /* BS Container */ @media (min-width:576px) { .container { max-width: 100%; } } @media (min-width:1400px) { .container { max-width: 1200px; /* width: 96%; */ } } /* header */ .site-logo { display: inline-block; margin-top: 10px; margin-right: 10px; } .site-logo > img { width: 40px; position: relative; } @media (min-width:1200px) { .site-logo { margin-top: 0; } .site-logo > img { width: 50px; } } .site-name { font-size: .8em; } .site-name.inverted { color: @font-color !important; } /* Navbar */ .navbar { background-color: transparent; } .navbar-color { background-color: @dkblue !important; } .navbar-inverted { background-color: rgba(255,255,255,.9) !important; } .navbar-collapse .social-media-links { display: none; } .offcanvas-header { background-color: @dark; color: @white; } .offcanvas-header .btn-close {} .navbar-collapse { padding-top: 1rem; } .navbar-brand { padding: 0px; color: @white !important; font-size: 1.75rem; } .navbar-toggler { border: none !important; box-shadow: none !important; margin-top: .25rem; } @media (min-width:576px) { .navbar-brand { padding: 20px 30px; font-size: 2rem; } .site-name { font-size: 1em; } .navbar-toggler { margin-top: .85rem; } } /* navbar toggle icon */ #nav-icon { width: 28px; height: 28px; position: relative; margin: 8px auto 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background: @white; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon.inverted span { background: @grey; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 10px; } #nav-icon span:nth-child(4) { top: 20px; } #nav-icon.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; } #nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } .navbar-expand-xxl .navbar-nav .nav-link { padding-left: 1rem; padding-right: 1rem; } .dropdown-menu { background-color: @dkblue; border-radius: 0; border: none; } .dropdown-item, .dropdown-item:link, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active, .dropdown-item:visited, .dropdown-item.active { background-color: @dkblue; color: @white; } .nav-link, .nav-link:link, .nav-link:visited { color: @white; } .nav-link:focus, .nav-link:focus:hover, .nav-link:focus:active { color: @blue; } .nav-link.active { color: @blue !important; } .nav-link.inverted, .nav-link.inverted:link, .nav-link.inverted:visited { color: @font-color; } .nav-link.inverted:focus, .nav-link.inverted:focus:hover, .nav-link.inverted:focus:active { color: @blue; } .dropdown-menu { background-color: @dkblue; border-radius: 0; border: none; } .dropdown-item, .dropdown-item:link, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active, .dropdown-item:visited, .dropdown-item.active { background-color: @dkblue; color: @white; } .dropdown-item.inverted { background-color: rgba(255, 255, 255, 0.9) !important; color: @font-color; } .offcanvas-header .btn-close { background: transparent url('../img/icon-close.svg') center no-repeat; background-size: 18px 18px; opacity: 1; } .offcanvas-body { background-color: @white; } .offcanvas-body .nav-link, .offcanvas-body .dropdown-item { /* font-size: 1.35em !important; */ padding-left: .5rem; padding-bottom: .75rem; } .offcanvas-body .nav-link, .offcanvas-body .nav-link:link, .offcanvas-body .nav-link:visited, .offcanvas-body .dropdown-item:link, .offcanvas-body .dropdown-item:visited { color: @white; font-size: 1.35em; font-weight: 300; } .offcanvas-body .nav-link:focus, .offcanvas-body .nav-link:hover, .offcanvas-body .nav-link:active, .offcanvas-body .dropdown-item:focus, .offcanvas-body .dropdown-item:hover, .offcanvas-body .dropdown-item:active { color: @blue; font-size: 1.35em; font-weight: 300; } .offcanvas-body .dropdown-item { background: rgba(0,0,0,.8) !important; } .offcanvas-body .nav-link.active { color: @blue !important; } .social-media-links { padding: 1rem .5rem; } .social-media-links .social-media-link { color: @white !important; } .social-media-links .social-media-link .lsf { font-size: 3em; } @media (min-width:1400px) { .navbar-collapse { padding-top: 0; } .nav-link { padding-left: 1.5rem; padding-right: 1.5rem; } } /* Sections */ section, .section { position: relative; padding: 2rem 1rem; } .section-padding { padding-top: 4rem; padding-bottom: 4rem; } section .content-block, .section .content-block { padding-top: 2rem; padding-bottom: 2rem; } .fixed-section { height: auto; overflow: hidden; padding: 0; } .fixed-banner { overflow: hidden; } .fixed-banner img { width: 100%; height: auto; } .fixed-banner-title { display: inline-block; position: absolute; bottom: 3%; left: 6%; z-index: 2; padding: 1rem; background-color: transparent; color: @white; } .fixed-banner-title .arrow-down { height: 16px; width: 30px; position: absolute; bottom: -16px; right: 47%; text-align: center; } /* banner widget */ .widget { position: absolute; z-index: 10; bottom: -100px; right: 1rem; left: 1rem; max-width: 100%; height: 90px; overflow: hidden; background-color: @dkblue; opacity: 0; } .widget a, .widget a:link, .widget a:visited, .widget a:focus { color: @white; } .widget .widget-body { padding: .75rem; } .widget .widget-media { display: none; } .widget .widget-header { font-size: .8em; } .widget .widget-header .content-type { display: block; font-size: .75em; text-transform: uppercase; border-bottom: solid 1px @white; padding-bottom: .25rem; margin-bottom: .5rem; } .widget .widget-content { /* NOT USED */ display: none; } .widget .widget-actions { position: absolute; z-index: 12; right: 0px; top: -.65rem; font-size: .8em; } @media (min-width:768px) and (max-width:1200px) { section, .section { padding-left: 2rem; padding-right: 2rem; } .fixed-banner-title { bottom: 4%; left: 20%; font-size: 2em; } } @media (min-width:576px) { .widget { height: 100px; } .widget .widget-body { padding: .75rem 1rem; } .widget .widget-header { font-size: 1em; } .widget .widget-actions { font-size: 1em; right: .5rem; top: .15rem; } } @media (min-width:1200px) { .fixed-section { height: 100vh; } .section-padding { padding-top: 7.5%; padding-bottom: 7.5%; } .fixed-banner-title { bottom: 40px; left: 40px; font-size: 3em; } } @media (min-width:1400px) { .widget { right: 1.5rem; left: auto; width: 480px; height: 100px; } .widget.show-media { height: 466px; } .widget .widget-media { width: 100%; height: auto; max-height: 360px; overflow: hidden; display: block; text-align: center; } .widget.show-media img, .widget.show-media iframe { width: 100%; height: auto; } .widget.show-media iframe { height: 360px; } .widget .widget-body { padding: .5rem 1rem; } .widget .widget-header { font-size: 1em; } .widget .widget-actions { font-size: 1em; top: -5px; } } /* Breadcrumbs */ .breadcrumbs-nav { font-size: .8em; } /* Page navigation */ .page-navigation { border-top: solid 1px @light; border-bottom: solid 1px @light; padding: 1rem 0; } /* Main content */ .page-banner { min-height: 80px; } @media (min-width:1200px) { .page-banner { min-height: 100px; } } /* Calendar */ .calendar-toggler { display: block; cursor: pointer; } .calendar-description { display: none; padding: 0 0 1rem; } /* Multimedia */ .gallery-preview { margin-bottom: 1.25rem; height: auto; } .gallery-preview img { width: 100%; height: auto; opacity: 1; transition: all linear .3s; } .gallery-preview img:hover { opacity: .7; } .newsblog-teaser, .calendar-teaser, .youtube-preview { background-color: @white; padding: 10px; box-shadow: 1px 1px 20px rgba(0,0,0,.1); margin-bottom: 3rem; } .bg-color .newsblog-teaser, .bg-color .calendar-teaser, .bg-color .youtube-preview, .bg-dkblue .newsblog-teaser, .bg-dkblue .calendar-teaser, .bg-dkblue .youtube-preview { background-color: none !important; /* box-shadow: none !important; */ } .bg-color .teaser-headline, .bg-dkblue .teaser-headline, .bg-color .teaser-text, .bg-dkblue .teaser-text { color: @font-color; } .bg-color .teaser-options .btn-outline, .bg-dkblue .teaser-options .btn-outline { color: @font-color !important; border-color: @font-color !important; } .newsarticle, .videoclip { background-color: @white; padding: 10px; box-shadow: 1px 1px 20px rgba(0,0,0,.1); margin-left: -15px; margin-right: -15px; /* eliminate section x-paddings */ } .newsblog-teaser .teaser-headline { word-break: break-word; } .newsblog-teaser .teaser-image { margin-bottom: 1rem; } .newsarticle-gallery .gallery-preview { background: @dark; margin-bottom: 1.25rem; height: 132px; overflow: hidden; } .newsarticle-gallery .gallery-preview img { width: 100%; height: auto; opacity: 1; transition: all linear .3s; } .newsarticle-gallery .gallery-preview img:hover { opacity: .7; } .teaser-options { text-align: center; padding-top: .75rem; } .newsarticle-meta { border-top: solid 1px @grey; border-bottom: solid 1px @grey; font-size: .8em; padding: .25rem 0; margin: 1rem 0; color: @grey; } .newsarticle-meta .meta-item { display: inline-block; margin-right: 1rem; } .newsarticle-sharing .share-info { font-size: .85em; color: @grey; } .newsarticle-sharing a, .newsarticle-sharing a:link, .newsarticle-sharing a:hover, .newsarticle-sharing a:active, .newsarticle-sharing a:focus, .newsarticle-sharing a:visited { display: inline-block; margin-left: .5rem; } .newsarticle-weblink { margin-top: .75rem; } .newsarticle-weblink .weblink { display: block; margin-top: .35rem; } .newsarticle-weblink .lsf { font-size: 130%; } .newsarticle-sharing .lsf { font-size: 200%; } @media (min-width:768px) { .gallery-preview { height: 230px; } } @media (min-width:768px) { .gallery-preview { height: 300px; } } @media (min-width:1400px) { .calendar-teaser { margin-bottom: 1rem; } .newsblog-teaser, .mediathek .youtube-preview { margin-bottom: 6rem; } .newsblog-teaser .teaser-image { margin-bottom: 0; } .newsarticle-gallery .gallery-preview { height: 132px; } } .youtube-preview { margin-bottom: 3rem; } .youtube-preview iframe, .youtube-clip { width: 100%; height: 210px; max-height: 280px; margin-bottom: .65rem; } @media (min-width:768px) { .youtube-preview iframe, .youtube-clip .youtube-clip { height: 360px; max-height: 360px; } } @media (min-width:1200px) { .youtube-preview iframe, .youtube-clip { height: 320px; } .teaser-headline { position: relative; height: 4em; } .teaser-headline .headline { position: absolute; left: 0; right: 0; bottom: 0; } .teaser-text { height: 9em; } } .videoclip { margin-bottom: 2rem; } .mediathek-player {} .mediathek-player iframe, .mediathek-player { width: 100%; height: 320px; max-height: 320px; } .mediathek-description { padding-top: 2rem; } @media (min-width:768px) { .mediathek-player iframe, .mediathek-player { height: 640px; max-height: 640px; } } /* Petition */ .petition {} .petition-meta { margin-top: 1rem; } .petition-meta .meta-date {} .petition-meta .meta-decision-maker { margin-top: 1rem; } .petition-cover { margin-bottom: 2rem; } .petition-description {} .petition form label { font-size: .7em; font-weight: bold; } .petition .smaller { display: inline-block; font-size: .7em; line-height: 1.35em !important; padding-top: .35rem; } .petition-downloads { padding: 1rem; } .petition-downloads .download { text-align: center; margin-bottom: .35rem; } /* Slider */ .slider-gallery {} .slider-gallery .slider-element { width: 100%; height: 240px; display: inline-block; padding: 0 1rem; } .slider-gallery .slider-element .slider-image { width: 100%; max-width: 100%; height: auto; max-height: 100%; } @media (min-width:576px) { .slider-gallery .slider-element { width: 100%; height: auto; display: inline-block; padding: 0; } .slider-gallery .slider-element .slider-image { width: 100%; max-width: 100%; height: auto; } } @media (min-width:1200px) { .slider-gallery .slider-element { padding: 2rem; } .slider-gallery .slider-element .slider-image { width: 480px; height: auto; } } /* Carousel */ .carousel-indicators { position: absolute; bottom: -3rem; } /* Backgrounds */ /* Sidebar */ /* Search */ #openSearchform { cursor: pointer; } .searchForm { width: 100%; overflow: hidden; } .search-info {} .search-results-header { margin-top: 2rem; margin-bottom: 1rem; } .search-results { margin-bottom: 2rem; } .search-results .search-result { margin-bottom: 3rem; } @media (min-width:1200px) { #searchForm { width: 0px; } } /* Forms */ .contact-form-border { background-color: @light; border-radius: 5px; padding: 1rem; margin-top: 1rem; } .form-field-label { color: @white; font-size: .75em; } .form-field-box { display: inline-block; width: 100%; background-color: @white; border: solid 1px @grey; padding: .35rem .5rem; margin-bottom: .5rem; } @media (min-width:992px) { .form-field-label { color: @grey; } .form-field-box { margin-bottom: 0; } } .form-field-box input, .form-field-box select { border: none; } .form-icon { display: inline-block; padding: .35rem .25rem .15rem; text-align: center; } .form-icon .lsf { font-size: 36px; } #emailAddress { display: none; } /* Pre-Footer */ /* Footer */ footer { background-color: @dark; color: @white; padding: 1rem 1rem 2rem; font-size: .8em; line-height: 1.35em; margin-top: 2rem; } footer .footer-arrow { text-align: center; margin-top: -1rem; } footer .box-header { margin-bottom: 1rem; } footer .footer-box { padding: 1rem 1rem; } @media (min-width:992px) { footer { font-size: .9em; } footer .border-aside { border-left: solid 2px @white; border-right: solid 2px @white; } } footer a, footer a:link, footer a:visited { color: @white; } footer a:hover, footer a:active { color: @blue; } footer .copyright { padding: 2rem 0 0; text-align: center; font-size: .85em; } footer .social-media { text-align: center; padding-top: 1rem; } footer .social-media > a { display: inline-block; font-size: 300%; margin-left: .5rem; margin-right: .5rem; color: @white !important; cursor: pointer; } /* scroll top */ .scroll-top, .scroll-top:link, .scroll-top:visited, .scroll-top:focus, .scroll-top:hover { position: fixed; z-index: 99; bottom: -2rem; right: 1rem; background-color: @blue; color: @white; width: 30px; height: 30px; text-align: center; padding: 5px 5px; line-height: 16px; cursor: pointer; opacity: 0; } /* animations */ .animated { position: relative; } .animate__fadeIn { opacity: 0; } .animate__slideInUp { opacity: 0; top: 80px; } .animate__slideInLeft { opacity: 0; left: -100px; } .animate__slideInRight { opacity: 0; right: -100px; } /* BS modal mod. */ .modal-content { background-color: @dkblue; color: @white; background-clip: padding-box; border: none; border-radius: 0; outline: 0; padding: 7.5% 1rem; } .modal .btn-close { color: @white !important; } .modal-content .lsf { font-size: 120%; } .modal-content a, .modal-content a:link, .modal-content a:visited, .modal-content a:active, .modal-content a:hover, .modal-content a:focus { color: @white; } @media (min-width: 576px) { .modal-dialog { max-width: 90%; } } @media (min-width:1200px) { .modal-dialog { top: 10%; max-width: 600px; } .modal-content { width: 600px; } } /* Animated */ .scroll-animated { opacity: 0; position: relative; top: 80px; } .scroll-animated-inverted { opacity: 0; position: relative; top: -80px; } /* Cookie consent policy */