/* User-CSS for Cassiopeia GREMSTYLE Template */


.btn-outline-info {
    border-color: grey;
    /* padding: 0.5em; */
    background-color: #cde4ff;
    color: rgb(70, 70, 70);
}

.btn-outline-info:hover {
    background-color: #004fa0
}

.dl-card {
    
    padding: 0.7em;
    background-color: rgb(249, 249, 249);
    border: 1px solid lightgrey;
    border-radius: 8px;
    color: rgb(70, 70, 70);
    margin-bottom: 8px;
   
}



.footerbox {
    color: rgb(161, 161, 161);
}

.footerbox .fa-brands,
.footerbox a {
    transition: all 0.2s ease-in-out;
}

.footerbox .fa-brands {
    color: #127eff;
}

.footerbox .fa-brands:hover,
.footerbox a:hover {
    color: white;
}

.footerbox a {
    color: rgb(161, 161, 161);
    text-decoration: none;
}


.container-footer {
    background-image: linear-gradient(135deg, #19356c 0%, #252d59 100%);
    border-top: 13px solid #ffcc01;
    margin-top: 5em;
    
    }





:root {
    --body-font-size: 1.04 rem; /* Adjust the value as needed */
  }


/* remove url display in search results */
.result__title-url {
    display: none;
    }

/* center logo on mobile screens */
@media (width<=1080px) {
.container-below-top {
    display: flex;
    justify-content: center;
    }}

/* display search on top of menu */
.container-header .container-nav {
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    padding-bottom: 1em;
    }

/* move date and author on the same line */
.article-info dd {
    display: inline-block;
    margin-right: 7px;
    color: #999999;
    font-weight: 300;
    }
    
/* blue background for search field */
.form-control {
    color: white;
    background-color: #127eff;
    border: none;
    }

.banner-top {
    color: white;
    display: flex;
    justify-content: right; 
    align-items: center; 
    margin-top: 1.5em;
    margin-right: 1.5em;
    height: 1vh;
    }

.banner-top a {
    color: #6ca7ff;
    text-decoration: none;
    }

.footer .grid-child {
    color: #cce0ff;
    }

.container-header {
    background-image: linear-gradient(135deg, #19356c 0%, #252d59 100%);
    }
    


.container-banner.full-width {
    margin: 0;
}


@keyframes pulsingSaturation {
    0%, 100% {
    filter: saturate(100%);
    }
    50% {
    filter: saturate(250%);
    }}

.op-img {
    animation: pulsingSaturation 2s infinite;
    }

.op-img {
    opacity: 0.9;
    }
    
/* text with blue box background, aligns right */
.bluebox {
    display: inline-block;
    background-color: #cce0ff; 
    padding: 20px;
    margin: 10px 0; 
    border-radius: 6px;
    text-align: center;
    }

/* text with blue box background, aligns centered */
.bluebox-center {
    text-align: center;
    }

.bluebox-center-element {
    display: inline-block;
    background-color: #cce0ff; 
    padding: 14px;
    margin: 10px 0; 
    border-radius: 6px;
    }  
    
/* style for blue background headings */
.blueblog .blog-item {
    padding: 5px 0px 5px 0px;
    }
    
.blueblog .page-header {
    background-color: #cce0ff;
    padding: 9px 5px 1px 15px;
    border-bottom: 3px solid #80b3ff;
    margin-bottom: 10px;
    border-radius: 6px;
    }

/* color for tag numbers */
.bg-info {
    background-color: #6ca7ff !important; 
    }

.card-header {
    background-color: #6CA7FF;
    }

.card-header-mint .card-header {
    background-color: #ffcc01;
    }

.card-static {
    --card-border-color: #ffcc01;
    --card-border-width: 5px;
    --card-border-radius: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FFFAD7;
    }

.card-social {
    --card-border-color: #FBCC21;
    --card-border-width: 5px;
    --card-border-radius: 1rem;
    margin-top: 40px;
    margin-bottom: 10px;
    }

.card-menu {
    --card-border-color: lightgray;
    --card-border-width: 0px;
    --card-border-radius: 0rem;
    margin-left: 0px;
    border-left: 2px solid lightgray;
    background-color: #FFFAD7;
    }

.card-logos {
    --card-border-color: lightgray;
    --card-border-width: 0px;
    --card-border-radius: 0rem;
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 0px solid lightgray;
    }

.card-eilmeldung {
    --card-border-color: red;
    --card-border-width: 7px;
    --card-border-radius: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FFFAD7;
    height: 100%;
    }

#top-b .module {
    width: 100%;
    }

.card-pfeiler {
    color: #127eff;
    padding-top: 14px;
    background-color: #f2f2f2;
    margin-bottom: 0px;
    height: 4vh;
    font-size: 1.2em;
    font-weight: 700;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-top: 1px solid lightgrey;
    }

.card-pfeiler a {
    color: #127eff;
    text-decoration: none; 
    }
    
.card-pfeiler a:hover {
    color: #127eff;
    text-decoration: underline; 
    }

/* styles for frontpage banner mint - bili - ganztag */
.mi-bi-ga-fp {
    color: #127eff;
    border-top: 1px solid lightgrey;
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 10px;
    }
    
.mi-bi-ga-fp a {
    color: #127eff;
    text-decoration: none; 
    transition: all 0.2s ease-in-out;
    }
    
.mi-bi-ga-fp a:hover {
    color: #004599;
    transition: all 0.2s ease-in-out;
    
    }



/* ---- FLEX STYLES ---- */

.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    }

.flex-container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    }

@media (width<=900px) {
  .flex-container {
    flex-direction: column;
    align-items: center;    
    }}

@media (width<=900px) {
.flex-item2 {
    padding: 0;   
    }}

.flex-item {
    }   

.flex-item2 {    
    }

@media (width<=900px) {
.flex-container-image {
    flex-direction: column;
    align-items: center; 
    }}

.flex-container-image {
    display: flex;
    justify-content: space-evenly;
    }

.flex-image {
    border: 3px solid white;
    object-fit: contain; 
    }

.box-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }


/* ---- GRAYSCALE STYLES ---- */

.grayscale-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
    border-bottom: 3px solid lightblue;
    padding-bottom: 4px;
    }

.grayscale-img:hover {
    filter: grayscale(0);
    } 

.grayscale-footer {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
    }

.grayscale-footer:hover {
    filter: grayscale(0);
    transition: filter 0.3s ease-in-out;
    }
    
.grayscale-banner {
    animation: grayscaleToColor 6s;
    }

@keyframes grayscaleToColor {
    0% {
    filter: grayscale(100%);
    }
    100% {
    filter: grayscale(0%);
    }}

@keyframes saturation-loop {
    0%, 100% {
    filter: saturate(250%);
    }
    50% {
    filter: saturate(100%);
    }}

/* ---- HEADING STYLES ---- */

h2,
.h2 {
  font-size:calc(1.4rem + .1vw)
}
@media (width>=1200px) {
  h2,
  .h2 {
    font-size:1.6rem
  }
}
h3,
.h3 {
  font-size:calc(1.3rem + .6vw)
}
@media (width>=1200px) {
  h3,
  .h3 {
    font-size:1.2rem
  }
}
h4,
.h4 {
  font-size:calc(1.275rem + .3vw)
}
@media (width>=1200px) {
  h4,
  .h4 {
    font-size:1.5rem
  }
}
h5,
.h5 {
  font-size:1.25rem
}
h6,
.h6 {
  font-size:1rem
}


/* ---- BACKGROUND IMAGE VIEWPORT ---- */ 

.container-banner .banner-overlay {
    height: 65vh;
    background-attachment: scroll;
    margin: 0 0 0;  
    }

.container-banner {
    margin:0 0 1em;
    display:block 
    }
  
.container-banner .banner-overlay .overlay {
    background-color: #00000052;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1em;
    display: flex;
    }
  
/* ---- TABLE STYLES ---- */

.table-custom {
    border-collapse: collapse;
    width: 100%;
    }

.table-custom td, .table-custom th {
    border: 1px solid #ddd;
    padding: 8px 8px 8px 16px;
    }

.table-custom tr:nth-child(even) {
    background-color: #f2f2f2;
    }
    
.table-custom tr:hover {
    background-color: #ddd;
    }

.table-custom tr {
    vertical-align: middle;
    }

.table-custom th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #6ca7ff;
    color: black;
    border-bottom: 2px solid darkgray;
    }

/* responsive table style */
@media screen and (max-width: 700px) {
.table-custom, thead, tbody, th, td, tr {
    display: block;
    }

thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align: left;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    /* Label the data */
    content: attr(data-label);
    font-weight: bold;
  }
}




/* ---- MENU PADDING STYLES ---- */

.metismenu.mod-menu .metismenu-item {
   padding: .4em .7em;
}

.metismenu.mod-menu .metismenu-item:hover {
   
}


.metismenu.mod-menu .metismenu-item .p-2 {
  padding: .25rem !important;
  color: #ffcc01;
  margin-right: 5px;
}


/* ---- MENU STYLES ---- */

.mod-menu .metismenu-item:hover .mm-collapse {
  /* display: block; */ /* Show sub-menu on hover */
  
}


.mod-menu .metismenu.mod-menu .mm-collapse {
  display: none;
  color: #6ca7ff;
  
} 

.metismenu.mod-menu .mm-collapse {
  background-color: #074ea2;
  /* border: 3px solid #377ACA;
  border-radius: 10px; */

}

.metismenu.mod-menu .mm-collapse > li > a {
    color: #e6f0ff;
}

.metismenu.mod-menu .metismenu-item > button {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  color: #e6f0ff;
}

.container-header .mod-menu > li > a {
    color: #e6f0ff;
}
/* ---------------------- */

.sidem .mod-menu .metismenu.mod-menu .mm-collapse {
  display: none;
} 

.sidem .metismenu.mod-menu .mm-collapse {
  background-color: #FFFAD7;
  color: #074ea2;
  
  
  /* border: 3px solid #377ACA;
  border-radius: 10px; */
}

.sidem .metismenu.mod-menu .mm-collapse > li > a {
    color: #074ea2;
    
}

.sidem .metismenu.mod-menu .metismenu-item > button {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  color: #074ea2;
}

.metismenu.mod-menu .metismenu-item:hover > .submenu {
    display: block; /* Adjust as necessary */
}

.sidem .metismenu.mod-menu .metismenu-item .p-2 {
  padding: .35rem !important;
  color: #224faa;
  margin-right: 0px;
}

.sidem .metismenu.mod-menu .metismenu-item.active > a {

color: #e69500;
text-decoration: none;

}



.sidem .metismenu.mod-menu .metismenu-item {
   padding: .4em .3em;
}

/* ---- DOWNLOAD STYLES ---- */

.dl > ul {
    padding: 0;
    margin: 0;
    list-style: none; 
}

.dl > ul > li {
    margin: 1.5em 0;
    display: block;
}


/*
.dl > ul > li::before {
    vertical-align: middle;
    content: "\f56d"; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900;
    padding-right: 8px;
    color: orange;
    font-size: 1.2em;
    
    
}
*/

.dl > ul > li > a {
    border: 1px solid lightgrey;
    border-radius: 5px; 
    background-color: #ffedcc;
    padding: 8px 10px;
    text-decoration: none;
    color: #282828;
    transition: all 0.3s ease-in-out;
}

.dl > ul > li > a:hover {
    background-color: #ffd280;
    color: #1b1756;
    transition: all 0.3s ease-in-out;
}


.boxed .blog-item .item-content {
  padding: 20px;
  background-color: #fff5cc;
  border-top: 12px solid #6CA7FF;
}

.boxed .blog-item .item-content p {
  /* text-align: justify; */
}


.boxed .blog-item .item-content h2 {
  
}


.boxed .blog-item .item-content a {
    text-decoration: none;   
  
}

.boxed .blog-item {
  background-color: #fff5cc;
}






.masonry-3 .blog-item .item-content {
  padding: 20px;
  background-color: #fff5cc;
  border-top: 12px solid #6CA7FF;
}

.masonry-3 .blog-item .item-content p {
  text-align: justify;
}


.masonry-3 .blog-item .item-content h2 {
  
}


.masonry-3 .blog-item .item-content a {
    text-decoration: none;   
  
}

.masonry-3 .blog-item {
  background-color: #fff5cc;
}






/* .btn-secondary {
  background-color: orange;} */
  
  
/* ---- VIDEO OVERLAY ---- */

.video-container {
  position: relative;
  width: 100%; /* Adjust as needed */
 /* height: 882px;  Adjust as needed */
}

.video-container video {
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%; /* Center vertically, or adjust as needed */
  left: 50%; /* Center horizontally, or adjust as needed */
  transform: translate(-50%, -50%); /* Adjust for perfect centering */
  z-index: 1; /* Ensure it's above the video */
  color: white; /* Text color */
  /* Add more styling as needed */
}

.kontakt-fp {
    
    color: #808080;
    font-weight: 380;
    background-color: #f2f2f2;

}

.kontakt-fp a {
   color: #808080; 
  text-decoration: none;
}

.kontakt-fp a:hover {
   color: #808080; 
  text-decoration: underline; 
}


.logineo-fp {
    
    color: #808080;
    font-weight: 380;
    background-image: linear-gradient(135deg, #19356c 0%, #252d59 100%);
    display: flex;
    justify-content: right; 
    align-items: center; 
    padding: 1em;
    height: 2vh; /* Example height */
}

.logineo-fp a {
   color: #808080; 
  text-decoration: none;
}

.logineo-fp a:hover {
   color: #808080; 
  text-decoration: underline; 
}

@media (width<=900px) {
.logineo-fp {
       height: 6vh;
    }
}




.schulblog-fp {
    color: black;
    background-color: #fff5cc;
    height: 7vh; /* Example height */
    font-size: 1.7em;
    display: flex;
    justify-content: center; 
    align-items: center;
       
}




.schulblog-fp a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
     
}

.schulblog-fp a:hover {

    background-color: #ffc966;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    padding: 3px 8px 3px 8px;
    border-radius: 10px;    
}




.boxed .blog-item .item-title a {
    color: #224faa;
    transition: all 0.2s ease-in;
   
    
}

.boxed .blog-item .item-title a:hover {

    color: #515151;
    transition: all 0.2s ease-in-out;
    
    
      
}







@media (width<=900px) {
  .schulblog-fp {
       height: 9vh;
    }
}





@media screen and (width<=830px) {
.grem-logo-fp img {
    width: 100%;
  }
}



/* Hide the line break on larger screens */
.conditional-break {
  display: none;
}

/* Show the line break on screens smaller than 767 pixels */
@media screen and (width<=830px) {
  .conditional-break {
    display: block;
  }
}





.columns-2  {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2;    /* Firefox */
  column-count: 2;
  column-gap: 30px;
}

@media screen and (max-width: 768px) {
.columns-2  {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1;    /* Firefox */
    column-count: 1;
  }
}







.mod-list li {
  padding: .35em 0;
  font-size: medium;
}

/* ######################## CSS SLIDESHOW ######################## */







.slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.slider {
    width: 100%;
    max-width: 100%;
    height: 400px;
    margin: 0px;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.slides {
    display: flex;
    overflow-x: scroll;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
    background-color: rgb(250, 246, 212);
}

.slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 400px;
    margin-right: 0px;
    box-sizing: border-box;
    background: white;
    transform-origin: center center;
    transform: scale(1);
    scroll-snap-align: center;
}

.slide__text {
    font-size: 40px;
    font-weight: bold;
    font-family: sans-serif;
}

.slide a {
    background: none;
    border: none;
}

a.slide__prev,
.slider::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 5%;
}

a.slide__next,
.slider::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: solid black;
    border-width: 0 4px 4px 0;
    padding: 3px;
    box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: '';
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
    box-sizing: border-box;
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
}

.slider__navlink {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: black;
    margin: 0 10px 0 10px;
}