@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');
@import url("https://unicons.iconscout.com/release/v4.0.0/css/line.css");
* {
  font-family: 'Titillium Web', sans-serif;
}

nav#navbar-top {
	    justify-content: flex-end;
    }

    nav#navbar-top a {
	        color: white;
	}

img {
  display: Block;
  max-width: 100%;
  height: auto;
}

img.cke_widget_element {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ------------ LOGIN SCREEN ------------  */
body.path-user .user-form-page__wallpaper img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
}


/* ------------- Layout ------------- */
main#content section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

div#main-wrapper {
  margin-bottom: 4rem;
}

/* ------------- LANG SWITCHER ------------- */
.language-switcher-language-url a {
  text-transform:uppercase;
  text-decoration:none;
  padding:0;
  margin:0;
}

.language-switcher-language-url nav {
  gap:1rem;
}

.language-switcher-language-url .nav-link {
  padding:0;
  margin:0;
}

.language-switcher-language-url a.is-active {
  font-weight:bold;
}


/* FONT SIZES */
nav#navbar-top {
  font-size: 14px;
}

nav#block-sub-e7-theme-main-menu a {
  font-size: 24px;
  text-transform: uppercase;
}

h2, .h2 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 1rem;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  margin-inline: 4rem;
}


/* ------------- Nav - HEADER POSI ------------- */
header#header {
  border-bottom:15px solid;
  border-color: #ed185b;
  margin-bottom: 3rem;
}

.path-frontpage header#header {
  background-image: url("/sites/default/files/uploads/system/header_bg.jpg");
  background-size: cover;
  min-height: 500px;
}

.path-frontpage header#header::after {
content: "";
    background-image: url(/sites/default/files/uploads/system/sagomine_header.png);
    height: 400px;
    width: 100%;
    /* object-fit: fill; */
    display: block;
    background-repeat: no-repeat;
    background-position: center 25px;
}

.featured-top {
    position: relative;
}

/*
.featured-top aside::before {
    content: "";
    background-image: url(/sites/default/files/uploads/system/sagomina_03_small.png);
    height: 160px;
    width: 80px;
    display: block;
    position: absolute;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 25%;
}*/




nav#navbar-main {
  background:transparent;
}

ul.dropdown-menu.show {
    background: #ffffffd4!important;
    padding-block: 2rem!important;
}

.seiten__header-banner.container img {
  width: 100%;
}

nav#navbar-main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

a.navbar-brand {
  grid-column: 1/3;
}

div#CollapsingNavbar {
  grid-row: 2;
  grid-column: 1/9;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  justify-content: center!important;
  align-items: center;
}

.navbar-nav {
  
}

ul.clearfix.nav.navbar-nav a {
  font-size: 1.37rem;
  font-weight: normal;
  padding-left:1.5rem;
  padding-right:1.5rem;
  color:#666;
  text-decoration:none;
}

/* ------------- Typos ------------- */
h1 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 2rem;
}


/* BLOCK SETTINGS */
div#block-mitglieder h2 {
  text-align: center;
  margin-bottom: 1rem;
}

/* ------------- Logo + Slogan ------------- */
.d-inline-block.align-top.site-name-slogan {
  width: 28ch;
  text-transform: uppercase;
}

/* ------------- Navigation ------------- */

/* Dropdowns */
.dropdown-item.active, .dropdown-item:active {
  color: #666;
  text-decoration: none;
  background-color: #fff;
}

.active a {
  font-weight: 600!important;
}



/* ---------------- */
/*      Social      */
/* ---------------- */
div#block-socialsbuttons {
font-size: 1.5rem;
}
div#block-socialsbuttons ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    color: white;
    align-content: center;
    align-items: center;
    margin: 0;
}
li.social__link a {text-decoration: none;font-weight: 700;}

/* ---------------- */
/*      Projects    */
/* ---------------- */

        /* ---------------- */
        /*      RESET       */
        /* ---------------- */

        .view-id-projekte.view-display-id-block_1 * {
            margin:0;
            padding:0;
        }	
  
        .view-id-projekte.view-display-id-block_1 .view-content.row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
        }
        .view-id-projekte.view-display-id-block_1 .project__item {
            border-radius: 1rem;
            overflow: hidden;
            position: relative;
        }
        .view-id-projekte.view-display-id-block_1 .project__link {
            display: flex;
            flex-direction: column;
  
            text-decoration: none;
            color: white;
            position: relative;
        }
        .view-id-projekte.view-display-id-block_1 .project__title {
            background-color: #f1155b;
            position: absolute;
            bottom: 0;
            padding: 1.5rem 2rem;
            width: -webkit-fill-available;
        }
        .view-id-projekte.view-display-id-block_1 img.project__img {
            filter: grayscale(1);
            transition: 500ms;
        }
        .view-id-projekte.view-display-id-block_1 .project__item:hover img.project__img {
            filter: grayscale(0);
        }





/* ------------- MEDIAS ------------- */
@media (max-width: 980px){
  .link__block-inner {
    grid-template-columns: 1fr!important;
    grid-template-rows: 7vh 7vh 7vh 7vh!important;
  }
  main#content section {
    gap: 2rem;
  }
}

#navbar-main {
  width: 100%;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1400px) {
  #navbar-main {
    max-width: 100%!important;
  }
}
@media (min-width: 1200px) {
  #navbar-main {
    max-width: 1140px;
  }
}
@media (max-width: 992px) {
  #navbar-main{
    max-width: 960px;
    display: flex!important;
    margin-left: 15px;
    margin-right: 15px;
    justify-content: space-evenly;
  }
  a.navbar-brand {
    max-width: 150px;
  }
}
@media (max-width: 768px) {
  #navbar-main {
    max-width: 720px;
  }
}
@media (max-width: 576px) {
  #navbar-main {
    max-width: 540px;
    justify-content: space-between;
    margin: 0;
  }
  a.navbar-brand ,
  .site-name-slogan {
    zoom:70%;
  }
}

/* ------------- FOOTER ------------- */
footer.site-footer {
  text-align: center;
  padding: 0;
}
footer.site-footer *,
footer.site-footer a{
  color:#fff;
  font-size: 14px;
}


.contextual a {
  color: black!important;
}

/* ---------------- */
/*      Projects    */
/* ---------------- */

        /* ---------------- */
        /*      RESET       */
        /* ---------------- */

        .view-id-projekte.view-display-id-block_1 * {
          margin:0;
          padding:0;
      }	

   .view-id-projekte.view-display-id-block_1 .view-content.row {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 1rem;
      }
      .view-id-projekte.view-display-id-block_1 .project__item {
          border-radius: 1rem;
          overflow: hidden;
          position: relative;
      }
      .view-id-projekte.view-display-id-block_1 .project__link {
          display: flex;
          flex-direction: column;

          text-decoration: none;
          color: white;
          position: relative;
      }
      .view-id-projekte.view-display-id-block_1 .project__title {
          background-color: #f1155b;
          position: absolute;
          bottom: 0;
          padding: 1.5rem 2rem;
          width: -webkit-fill-available;
	  height:100px;
          width: -moz-available;
      }
      .view-id-projekte.view-display-id-block_1 img.project__img {
          filter: grayscale(1);
          transition: 500ms;
      }
      .view-id-projekte.view-display-id-block_1 .project__item:hover img.project__img {
          filter: grayscale(0);
      }

    .projects__show_all a {
	color: white;
	background: #f1155b;
	position: absolute;
	border-radius: 1rem;
	text-align: center;
	vertical-align: middle;
	background-position: -15vw 25vh;
	background-size: initial;
	padding: 3rem 4rem!important;
	font-size: 1.5rem;
	text-decoration: none;
	background-image: url("/sites/default/files/uploads/system/sagomine_header.png");
    }

    .projects__show_all {position: relative;display: flex;justify-content: center;align-items: center;align-content: center;}


div#block-views-block-projekte-block-1 h2 {
    text-align: center;
    border-top: 2px solid #ccc;
    padding-top: 1.2rem;
    margin-bottom: 1rem;
}

/* Project Page */
.view-id-projekte.view-display-id-page_1 * {
    margin: 0;
    padding: 0;
}

.view-id-projekte.view-display-id-page_1 .view-content.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.view-id-projekte.view-display-id-page_1 .project__item {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.view-id-projekte.view-display-id-page_1 .project__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: white;
    position: relative;
}

.view-id-projekte.view-display-id-page_1 img.project__img {
    filter: grayscale(1);
    transition: 500ms;
}
.view-id-projekte.view-display-id-page_1 img.project__img:hover {
    filter: grayscale(0);
}

.view-id-projekte.view-display-id-page_1 .project__title {
    background-color: #f1155b;
    position: absolute;
    bottom: 0;
    padding: 1.5rem 2rem;
    width: -webkit-fill-available;
    height: 100px;
}

/* Buttons TOP */
div#block-topbuttons {
    margin-block: 3rem 6rem;
    padding-inline: 0;
}
div#block-topbuttons div div p{
    display: flex;
    flex-direction: row;
}

div#block-topbuttons div div a {
    font-size:44px;
    text-decoration:none;
    color: #ca279a;
    border-radius:1rem;
    padding-block:1rem;
    padding-inline:2rem;
    border: 6px solid transparent;
    border-style: solid;
    width: 45%;
    background: 
     linear-gradient(#fff,#fff) padding-box, /*this is your grey background*/
     linear-gradient(to right, #9c20aa, #fb3570) border-box;
}

div#block-topbuttons div div a:before {
     
} 

div#block-topbuttons div div a:first-child {

}
div#block-topbuttons div div a:last-child {
    margin-left: 10%;
}
div#block-topbuttons div div a:first-child {
    position: relative;
}

div#block-topbuttons div div a:first-child::after {
    content: "";
    background-image: url(/sites/default/files/uploads/system/sagomina_01_small.png);
    height: 160px;
    width: 80px;
    display: block;
    position: absolute;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    top: -35%;
    right: 5%;
}

div#block-topbuttons div div a:nth-child(2) {
    position: relative;
}

div#block-topbuttons div div a:nth-child(2)::after {
    content: "";
    background-image: url(/sites/default/files/uploads/system/sagomina_02_small.png);
    height: 160px;
    width: 110px;
    display: block;
    position: absolute;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    top: -35%;
    right: 5%;
}

/* GIN BACKEND */
div#toolbar-item-administration-tray ul.toolbar-menu li:nth-child(2) a::before {
    -webkit-mask-image: url(https://img.icons8.com/material-outlined/24/000000/menu--v1.png);
    mask-image: url(https://img.icons8.com/material-outlined/24/000000/menu--v1.png);
}



div#toolbar-item-administration-tray ul.toolbar-menu li:nth-child(3) a::before {
    -webkit-mask-image: url("https://img.icons8.com/ios-glyphs/30/000000/block--v1.png");
    mask-image: url("https://img.icons8.com/ios-glyphs/30/000000/block--v1.png");
}

div#toolbar-item-administration-tray ul.toolbar-menu li:nth-child(2) a::before,
div#toolbar-item-administration-tray ul.toolbar-menu li:nth-child(3) a::before {
    background: var(--colorGinIcons);
    -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    position: absolute;
    top: 0;
    left: 0.6667em;
    display: block;
    width: 20px;
    height: 100%;
    content: "";
    background-color: #666;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% auto;
}

section.row.region.region-footer-first {
  width: 100%;
  background-image: url(/sites/default/files/uploads/system/header_bg.jpg);
  background-size: cover;
  min-height: 200px;
  border-top: 15px solid;
  border-color: #ed185b;
  margin: 0;
  padding: 0;
}
div#block-footer {
  margin: 0;
  padding: 0;
}

.container.first__footer-inner {
  display: flex;
  margin: 0;
  padding: 0;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.container.first__footer-inner * {
  color: black;
}

footer.site-footer {
  margin: 0;
}

section.row.region.region-footer-fifth {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  padding: 0;

}

section.row.region.region-footer-fifth > div {
  width: 50%;
}

.site-footer__bottom {
  margin: 0;
  padding: 0;
}

section.container.region.region-footer-fifth {
  display: flex;
  justify-content: space-between;
}

section.row.region.region-footer-fifth * {
  color: black;
}




section.row.region.region-footer-fifth div#block-socialsbuttons-2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

section.row.region.region-footer-fifth div#block-socialsbuttons-2 ul {
    text-decoration: none;
    list-style: none;
    display: flex;
    margin: 0;
}
section.row.region.region-footer-fifth div#block-socialsbuttons-2 ul i {

    font-size:2rem;
}

section.row.region.region-footer-fifth div#block-socialsbuttons-2 .content {
    margin: 0;
    padding: 0;
}


div#block-socialsbuttons-2 {
  margin: 0;
}

section.row.region.region-footer-fifth p {
  margin: 0;
}

section.row.region.region-footer-fifth {
  margin: 0;
}


div#block-footer {}

div#block-footer .content .container {
    display: flex;
    /* color: black; */
    justify-content: flex-start;
}

div#block-footer * {
    color: black;
    text-align: left;
}

div#block-footer .content .container .col-12.col-md-12.col-lg.col-xl * {
    font-size:16px;
}

div#block-footer .content .container .col-12.col-md-12.col-lg.col-xl h1 {
    font-size: 38px!important;
    margin: 0;
    line-height: 40px;
    font-weight: bold;
}

section.row.region.region-footer-first {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

div#block-footer .col-12.col-md-12.col-lg.col-xl p {
  margin: 0;
}
section.row.region.region-footer-fifth h2 {
  border: none;
  margin: 0;
  padding: 0;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  align-items: flex-end;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl {
  position:relative;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(1):before {
  content: "";
  position:absolute;
  left:-5rem;
  top:-50%;
  background-image: url(/sites/default/files/uploads/system/sagomina_04_small.png);
  height: 160px;
  width: 80px;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(2):after {
  content:"";
  position:absolute;
  right:-6rem;
  top:-50%;
  background-image: url(/sites/default/files/uploads/system/sagomina_03_small.png);
  height: 160px;
  width: 80px;
}




/* Medias */



@media (min-width: 1200px){
  nav#navbar-main > a.navbar-brand {
      display: none;
  } 
  
}

@media (max-width: 1199px){
  div#CollapsingNavbar a.navbar-brand {
      display:none;
  }
  header#header,
  header#header::after {
    height:auto;
    min-height: fit-content;
    background: none;
  }
  nav#navbar-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-inline: 0;
    margin:0;
  }
  nav#block-sub-e7-theme-main-menu ul {
    align-content: center;
    background: #ed185b;
    padding-top: 2rem;
  }
  nav#block-sub-e7-theme-main-menu ul a {
    color: white!important;
  }

  div#block-topbuttons div div p{
    flex-direction: column;
    gap: 4rem;
    margin-inline: 1rem;
}

div#block-topbuttons div div a:first-child {
    margin-right: 10%;
}

div#block-topbuttons div div a {
    width: 100%;
    max-width: -webkit-fill-available;
}


  /*Footer*/
 section.row.region.region-footer-first {
   display:block;
 } 
 div#block-footer .content .container {
   display:block;

   overflow: hidden;
   max-width: 100%;
   position: relative;
 } 
 div#block-footer * .col-12.col-md-12.col-lg.col-xl {
   display: flex;
   margin:0;
   padding:0;
   margin-block:5rem;
   margin-inline: 5rem;
   text-align:center;
   float:left;
   flex-direction: column;
   align-items: center;
   max-width: -webkit-fill-available;
 }

 div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(2) {
   align-items: center;
 }


}



/* 668px */
@media (max-width: 768px){
  div#block-topbuttons div div a {
    margin: 0!important;
    margin-inline: 1rem;
  }
  div#block-topbuttons div div a::after {
    height: 80%!important;
    width: 100%!important;
    background-position: right!important;
    top: 5%!important;
    right: 2%!important;
  }
  .view-id-projekte.view-display-id-block_1 .view-content.row {
    display: flex;
  }

  .projects__show_all {
    margin: 0!important;
    padding: 0!important;
}

  .projects__show_all * {
      margin: 0!important;
      padding: 0!important;
      background: none!important;
      color: black!important;
      margin-top: 1rem!important;
  }

  div#block-footer .content .container {
    max-width:100%!important;
    padding:0;
    margin:0; 
  }

div#block-footer * .col-12.col-md-12.col-lg.col-xl {
    display:block;
    align-items: center;
    text-align: center;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(2):after {
    right: -60vw;
    background-repeat: no-repeat;
    top: auto;
    height: 100%;
    width: inherit;
    background-size: contain;
    display:none;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl:nth-child(1):before {
    background-repeat: no-repeat;
    left: -30px;
    top: auto;
    height: 100%;
    width: inherit;
    background-size: contain;
    display:none;
}

div#block-footer * .col-12.col-md-12.col-lg.col-xl {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: center;
}

.bs_grid.null .row > div {
    margin-block: 1rem;
}

.bs_grid.null .row > div img {
    width: 100%;
}


}


li.menu-item.menu-item--expanded ul.toolbar-menu li a::before {
    -webkit-mask-image: none!important;
    background:transparent!important;
}


.dropdown-item:focus, .dropdown-item:hover {
    background: transparent;
    text-decoration: underline;
}
ul.dropdown-menu.show {
    background: transparent;
    border: none;
    margin-top:0;
    padding-top:0;
}

ul.dropdown-menu.show li.dropdown-item a {
    padding:0;
    padding:1rem;
    font-size: 1.25rem!important;
}

@media (max-width: 1199px) { 
    ul.nav.navbar-nav *{
        text-align:center;
    }
    
    ul.dropdown-menu.show *{
    margin:0;
    padding:0;

    }
    ul.dropdown-menu.show {
        margin:0;
        padding:0;
        padding-top:0!important;
        border:none;
    }

     ul.dropdown-menu.show a{
         font-size: 1.25rem!important;
    }

.bs_grid.null .row > div {
    margin-block: 1rem;
}

}


.view-id-projekte .project__item img {
    overflow: hidden;
    height: auto;
    max-height: 315px;
    object-fit: cover;
}


@media (max-width: 768px) { 
  .path-frontpage header#header {
    min-height: 200px;
    height: 200px;
  }
  .path-frontpage header#header::after {
    background: none;
  }
    div#CollapsingNavbar {
      z-index: 5000;
  }
 
section.row.region.region-footer-fifth > div {width:100%;}

 div#block-topbuttons div div p {
    gap: 1rem;
  }
section.row.region.region-footer-fifth {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.row.region.region-footer-fifth div#block-socialsbuttons-2 {
    align-items: center;
    justify-content: center;
}
div#block-footer * .col-12.col-md-12.col-lg.col-xl {
    margin-block: 2rem;
}

}

@media (max-width: 1199px) {
    ul.dropdown-menu.show {background:transparent!important;}
    nav#block-sub-e7-theme-main-menu ul a {color:#3f3f3f!important;}
}




/*Accordions*/
.ckeditor-accordion-container > dl {
    border-color: #ed185b!important;
}

.ckeditor-accordion-container a {
    border-color: #ed185b!important;
    background-color: #ed185b!important;
}

.ckeditor-accordion-container a:hover {
    background-color: #eb497c!important;
}
.ckeditor-accordion-container .active a{
    background-color: #eb497c!important;
}

.ckeditor-accordion-container > dl dd {
    padding-block:1rem;
}
.ckeditor-accordion-container > dl dt {
    position: relative;
    border-bottom: 1px solid #eb497c!important;
}


/* Webform */
.webform-scale {
    position: relative;
    /* background: purple; */
    width: 26dvw;
}

.webform-scale-options {
    display: flex;
    justify-content: center;
    z-index: 2;
    position: relative;
}

.webform-scale-text {
    position: absolute;
    display: flex;
    width: 100%;
    top: 15px;
}
legend,fieldset > label {
    font-size: 1.5rem;
}

.mb-3 {
    margin-bottom: 3rem!important;
}

.webform-scale-large input + label {
    line-height: 40px;
}

.webform-scale-options input:checked + label,
.webform-options-display-buttons .form-check-input:checked ~ .form-check-label,
.form-check-input:checked{
    border-color: #e31d5f;
}
.form-check-input:checked,
input#edit-actions-submit {
    background:#e31d5f;
}

input#edit-actions-submit {
    color:white;
    font-size: 1.5rem;
}