/* IMPORTS */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Shadows+Into+Light&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");

html {
  padding: 0;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: #21262A;
  background: linear-gradient(#21262A, #404448);
  background-attachment: fixed;
  color: #DEDEDE;
  text-shadow: 1px 1px 8px #101010;
}

a {
  color: #A2185B;
  font-weight: bold;
  text-decoration: none;
}

/* BOOTSTRAP */

  .container {
    max-width: 100%;
  }

  .row {
    margin: 0;
    padding: 0;
  }

/* FONT*/

  .caveat {
    font-family: 'Caveat', cursive;
  }

/* BORDERS */

  .border {
    border: 4px ridge #A2185B !important;
  }

  .border-right {
    border-right: 4px ridge #A2185B;
  }

  .border-left {
    border-left: 4px ridge #A2185B;
  }

  .border-bottom {
    border-bottom: 4px ridge #A2185B !important;
  }

/* COLORS */

  .berry {
    color: #A2185B;
  }

  .green {
    color: #007800;
  }

  .black {
    color: #333333;
  }

/* SHADOWS */

  .box-shadow {
    box-shadow: 1px 1px 8px 1px #101010;
  }

  .box-shadow1 {
    box-shadow: -1px 1px 8px 1px #101010;
  }

  .text-shadow-white {
    text-shadow: 1px 1px 3px #aaa;
    }

/* NAVBAR */

  .facebook:hover{
    color: #4267B2;
  }

  .instagram:hover {
    background-image:linear-gradient(35deg, #FFDC80, #FCAF45, #F77737, #F56040, #FD1D1D, #E1306C, #C13584, #833AB4, #5B51D8, #405DE6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }

  .tiktok:hover {
    color: #111;
    text-shadow: 2px 2px 3px #ff0050, -2px -2px 3px #00f2ea;
  }

  .youtube:hover {
    color: #FF0000;
  }

  .navbar {
    min-height: 99px;
    border-bottom: 4px ridge #A2185B;
  }

  .navbar-brand {
    margin-right: 5px;
    font-size: 1em;
  }

  .navbar-brand-image {
    background-color: #EFEFEF;
    padding: 2px;
    margin-right: 10px;
    border: 4px ridge #A2185B;
    border-radius: 5px;
  }

  .navbar-brand-text {
    color: #000;
    font-size: 2.8rem;
    font-weight: bold;
    padding: 0;
    margin: 0 10px 0 0;
    line-height: 0.9;
  }

  .navbar-brand-text-small {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0;
    margin: 0 10px 0 0;
    line-height: 0.8;
  }

  .navbar-contact {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0;
    margin: 0 0 0 0;
    line-height: 2.2;
  }

  .nav-spacer {
    height: 99px;
  }

/* CONTENT */

  .content-wrapper {
    margin-top: 0;
    height: calc(100vh - 99px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .content {
    padding: 0;
    margin: 0;
  }

  .min-full-height {
    min-height: calc(100vh - 99px);
  }

  .studiolution {
    width: 100%;
	height: calc(100vh - 99px);
    background: #efefef;
  }

  .modal-content {
    background: #21262A;
    background: linear-gradient(#21262A, #404448);
    border: 3px ridge #a2185b;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    border-color: #a2185b;
  }

  .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a2185b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  }

/* IMAGES */

  .img-full {
    height: 100%;
  }

/* TEXTBLOCKS */

/* SCALES */

@media (max-width: 991.98px) {
  .full-height-last {
    height: calc(100vh - 150px);
    padding-bottom: 110px;
  }
  .full-height {
    height: calc(100vh - 150px);
  }
  .navbar-brand-text {
    font-size: 2rem;
  }
  .navbar-brand-text-small {
    font-size: 0.8rem;
  }
  .navbar-contact {
    font-size: 0.9rem;
  }
  .max-width-sm {
    max-width: 100%;
    height: auto;
  }
  .instagram:hover {
    background-image:linear-gradient(#FFDC80, #FCAF45, #F77737, #F56040, #FD1D1D, #E1306C, #C13584, #833AB4, #5B51D8, #405DE6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
	.studiolution {
    width: 100%;
	  height: calc(100vh - 155px);
    background: #efefef;
  }
  .galleryfilter {
    background: #21262A;
    background: linear-gradient(#21262A, #404448);
    position: absolute;
    top: 149px;
    z-index: 98;
    padding-top: 30px;
    padding-bottom: 20px;
    box-shadow: 1px 1px 8px 1px #101010;
  }
  .filter-dropdown {
    background-color: #efefef;
    text-align: center;
    width: 100%;
    height: 50px;
    display: block;
    z-index: 99;
    position: fixed;
    top: 99px;
    padding-top: 10px;
    color: #21262A;
    box-shadow: 1px 1px 8px 1px #101010;
  }
  .gallery {
    position: absolute;
    padding-top:10px;
    right: 0px;
    top: 149px;
    overflow-y: scroll;
  }
}

@media (min-width: 991.98px) {
  .full-height {
    height: calc(100vh - 99px);
  }
  .full-height-last {
    height: calc(100vh - 99px);
  }
  .full-height-lg {
    height: calc(100vh - 98px);
  }
  .border-lg-right {
    border-right: 4px ridge #A2185B;
  }
  .border-lg-left {
    border-left: 4px ridge #A2185B;
  }
  .framed-pic {
    max-height: 80vh;
  }
  .galleryfilter {
    position: absolute;
    top: 99px;
  }
  .gallery {
    position: absolute;
    padding-top:10px;
    right: 0px;
    overflow-y: scroll;
  }
}

/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #a2185b;
  border-radius: 2px;
}

.overflow-y-scroll {
  overflow-y: auto;
}

/* ADVENTSKALENDER */

  .türchen {
    width: 150px;
    height: 150px;
    border: 3px ridge #a2185b;
    box-shadow: 1px 1px 8px 1px #101010;
    margin: 20px auto;
    text-align: center;
    background-image: radial-gradient(circle, #777777, #555555, #333333);
    position: relative;
  }

  .door {
    position: absolute;
    font-size: 115px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .door-number {
    position: absolute;
    font-size: 40px;
    color: #A2185B;
    top: 39%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .türchen:hover .door,
  .türchen:focus .door {
    color: #a2185b;
  }

  .türchen:hover .door-number,
  .türchen:focus .door-number {
    color: #777;
  }

  .door-content {
    border: 3px ridge #a2185b;
    background-color: rgba(162, 24, 91, 0.7);
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .door-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .btn-secondary {
    --bs-btn-color: #a2185b;
    --bs-btn-bg: #333;
    --bs-btn-border-color: #a2185b;
    --bs-btn-hover-color: #a2185b;
    --bs-btn-hover-bg: #444;
    --bs-btn-hover-border-color: #a2185b;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5pxrgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
  }

/* GALLERY */

.portfolio-menu{
    text-align:center;
    width: 100%;
 }
 .portfolio-menu ul li{
    display:inline-block;
    margin:0 0 10px 0;
    list-style:none;
    padding:10px 15px;
    cursor:pointer;
    -webkit-transition:all 05s ease;
    -moz-transition:all 05s ease;
    -ms-transition:all 05s ease;
    -o-transition:all 05s ease;
    transition:all .5s ease;
 }

 .portfolio-item{
    /*width:100%;*/
 }
 .portfolio-item .item{
    /*width:303px;*/
    float:left;
    margin-bottom:10px;
 }

 .portfolio-item .item .img-fluid{
    border: 3px ridge #A2185B;
    box-shadow: 2px 2px 10px 2px #010101;
 }


/* Gallery End */

   .img-thumbnail {
     border: 3px ridge #A2185B;
     padding: 0;
     background-color: none;
     border-radius: 5px;
     box-shadow: 2px 2px 15px 5px rgba(0,0,0,0.9);
   }

   .maps {
     border-radius: 5px;
     box-shadow: 5px 5px 25px 9px rgba(0,0,0,0.9);
     width: 100%;
     height: 65vh;
     border: 3px ridge #A2185B;
   }

   .form-group {
     margin-bottom: 10px;
   }

   .video {
     border: 3px ridge #A2185B;
     background-color: none;
     border-radius: 5px;
     box-shadow: 1px 1px 8px 1px #101010;
     margin-bottom: 20px;
   }

   .filterCategorie {
	 padding: 5px 10px;
	 margin: auto;
	 border: 1px solid #fff;
	 box-shadow: 2px 2px 5px #000;
   }

.alert-light {
	text-shadow: 0 0 0;
}