@font-face {
  font-family: 'Quicksand';
  src: url('https://www.bio-schramm.at/assets/fonts/Quicksand-Regular.ttf') format('truetype');
}


*{
font-family: 'Quicksand', sans-serif;
scroll-behavior: smooth;
}
body{
  background-image: url("/assets/img/bg-barley.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;
  min-height: 580px;
  max-height: auto;
}
#cookie-alert{
background-color: rgba(200, 200, 200, 0.9);
font-size: 14px;
z-index: 9999;
position: fixed;
bottom: 0;
margin-bottom: 0;
float: center;
}
#cookie-alert .btn{
 font-size: 14px;

 margin-top: 5%;

}
#cookie-alert form{
 margin: auto;
  width: 50%;
}

/*contact-button*/
#contact-btn{
  position: fixed;
  display: flex;
  top: 55%;
  right: -34px;
  transform: rotate(270deg);
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 1;
  animation-duration: 2s;
  animation-name: grow;
  border: none;
  outline: none;
  overflow: hidden;
}
@keyframes grow {
    from {
        font-size: 50%;
    }
    to {
        font-size: 90%;
    }
}
#contact-btn:hover {
  background-color: rgb(139, 167, 37);
  transform: rotate(270deg) scale(1.1);
}

/*top-button*/
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  overflow: hidden;
}
#topBtn:hover {
  transform: scale(1.1);
  background-color: rgb(139, 167, 37);
}
/*Page Headers - slid-in*/
.slideright{
  animation-duration: 2s;
  animation-name: slidein;
  -webkit-animation-name: slidein;
  -webkit-animation-duration: 2s;
}
@keyframes slidein {
    from {
        margin-left: -20%;
    }
    to {
        margin-left: 0%;
    }
}
@webkit-keyframes slidein {
    from {
        margin-left: -20%;
    }
    to {
        margin-left: 0%;
    }
}


/* main header in nav-bar */
.head{
    background-color: white;
    padding: 2% 2%;
}

/* universal */
.light{
 color: rgb(120 120 120);
 font-size: 15px;
}
h2{
text-shadow: 0px 3px 3px grey;
}
h1{
text-shadow: 0px 3px 3px grey;
}
.welcome{
  background-color: white;
  padding: 2%;
}
.boxcontent{
  margin: 0px 0px 5% 0px;
  text-align: center;
  color: rgb(0, 0, 0);
  border-top: solid white 0.5px;
  border-bottom: solid white 0.5px;
  padding: 20px 0px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;
}
.boxcontent h1{
border-bottom: 1.5px solid rgb(200 200 200);
margin: 0 0 2% 0;
padding: 0 0 2% 0;
text-shadow: 0px 3px 3px grey;
}

/*admin-content*/
.admin-content{
  margin: 50px 70px 10px 70px;
  text-align: center;
  color: rgb(0, 0, 0);
  background-color: rgba(180, 180, 180, 0.7);
  border-top: solid white 0.5px;
  border-bottom: solid white 0.5px;
  padding: 4% 0px;
}

/* main */
.main-slide-show{
box-shadow: 0px 5px 5px grey;
}
.carousel-item a{
box-shadow: 0px 3px 3px grey;
}
.carousel-item a:hover{
background-color: rgb(139, 167, 37);
box-shadow: 0px 3px 3px grey;
}

.main-content{
margin: 2%;
}
.main-content .material-icons{
margin-top: 5%;
font-size: 50px;
color: rgb(139, 167, 37);
text-shadow: 0px 3px 3px grey;
}
.main-content .material-icons:hover{
margin: 2% 0 4% 0;
color: rgb(20, 20, 20);
font-size: 52px;
}
.main-content a:hover{
   background-color: rgb(139, 167, 37);
   box-shadow: 0px 3px 3px grey;
}
.main-content a{
   box-shadow: 0px 3px 3px grey;
}
#presentation{
text-align: center;
margin: 5% 0 0 0;
}
#presentation h2{
text-shadow: none;
font-weight: bold;
color: rgb(139, 167, 37);
}
.over{
  background-image: url("/assets/img/nature-text.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: border-box;
  background-position-x: 55%;
  background-position-y: 50%;
  background-size: 80% 90%;
}
#second-row{
border-top: 1.5px solid rgb(200 200 200);
border-bottom: 1.5px solid rgb(200 200 200);
margin: 0 0 2% 0;
display: none;
animation-name: bounceInUp;
animation-duration: 2s;
-webkit-animation-name: bounceInUp;
  -webkit-animation-duration: 2s;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
}
#second-row h2{
padding: 0 0 1.5% 0;
}
#second-row a{
margin: 5% 0 15% 0;
box-shadow: 0px 3px 3px grey;
}


#article-img-main{
box-shadow: 0px 3px 3px grey;
margin: 2% 0 0 0;
}


/*products*/
.products .card-img{
   min-height: 210px;
   max-height: 340px;
    transition: 3s;
    box-shadow: 0px 5px 5px grey;
    display: cover;
}
#products-text :hover .card-img{
  transform: scale(1.05)
}
.products .card{
min-height: 210px;
max-height: 340px;
box-shadow: 0px 3px 3px grey;
overflow: hidden;
margin: 2% 8%
}
.products .card-title{
border-bottom: 1.5px solid rgb(200 200 200);
color: rgb(139, 167, 37);
font-weight: bold;
padding-top: 10px;
}
.products .card-img-overlay{
background-color: rgba(100, 100, 100, 0.8);
margin: 6% 20%;
font-weight: bold;
}
.products .modal-title{
color: rgb(139, 167, 37);
}
.box{
  padding: 1%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: cover;
}
.products{
  background-color: rgba(220, 220, 220, 0.7);
  padding-bottom: 20px;
  padding-top: 10px;
  }
.new{
 color: rgb(250 0 0);
 font-weight: normal;
 font-size: 11px;
}
.bold{
 font-weight: bold;
}
.accordion button{
 color: rgb(139, 167, 37);
 font-weight: bold;
 font-size: 26px;
}

/*product-group*/
.product-group-title{
background-color: rgba(50, 50, 50, 0.8);
color: rgb(139, 167, 37);
text-align: center;
}
.product-group .card-title{
border-bottom: 1.5px solid rgb(200 200 200);
color: rgb(139, 167, 37);
font-weight: bold;
padding-top: 10px;
}


/*contact*/
#contact h3 a{
  color: black;
}
#contact h2{
  text-shadow: none;
}
#contact h3 a:hover{
  color: rgb(139, 167, 37);
}
#send-but{
color: rgb(139, 167, 37);
font-size: bold;
box-shadow: 0px 3px 3px grey;
border: none;
}
#send-but:hover{
 color: rgb(60, 60, 60);
 background-color: rgb(139, 167, 37);
 border: none;
}
/*info_toast*/
.info_toast .alert{
text-align: center;
background-color: rgba(180,180, 180, 0.7);
font-size: 12px;
z-index: 9999;
position: absolute;
left: 50%;
-ms-transform: translate(-50%);
transform: translate(-50%); font-weight: bold;
}

/*articles*/
#articles{
 /* Background image */
  background-image: url('/assets/img/landscape.jpg');
  /* Full-screen */
  height: 100%;
  /* Center the background image */
  background-position: center;
  /* Scale and zoom in the image */
  background-size: cover;
  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  position: relative;

}

/*about*/
.highlight{
color: rgb(139, 167, 37);
font-size: 20px;
font-weight: bold;
}
#about img{
width:100%;
box-shadow: 0px 5px 5px gray;
padding: 2%;
}

/*gallery*/
#gallery img:hover{
  -webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari */
  filter: drop-shadow(8px 8px 10px gray);
  transform: scale(1.1)
}
#gallery h1{
margin: 0 0 4% 0;
text-align: center;
}

#gallery .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  overflow: hidden;
}
/* Create four equal columns that sits next to each other */
#gallery .column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

#gallery .column img {
  margin-top: 8px;
  vertical-align: middle;
  padding: 2% 2%;
  width:100%;
transition: 3s;
box-shadow: 0px 5px 5px gray;
overflow: hidden;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  #gallery .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  #gallery .column {
    flex: 100%;
    max-width: 100%;
  }
}



/*footer*/
#footer{
  border-top: rgb(139, 167, 37) solid 5px;
  font-family: 'Quicksand', sans-serif;
  /*font-family: 'Amatic SC', cursive;*/
  font-size: 16px;
  background-color: rgb(50, 50, 50);
  color: white;
  margin: 0 0%;
  padding: 0.5%;
}
#copy-footer .material-icons{
  font-size: 14px;
}
#footer a{
text-decoration: none;
color: white;
}
#footer a:hover{
color: rgb(139, 167, 37);
}



/* loader */
#loader {
  position: absolute;
  top: 50%;
  left: 47.5%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid rgb(50, 50, 50);
  border-bottom: 8px solid rgb(50, 50, 50);
  width: 60px;
  height: 60px;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
#loader-bg{
text-align: center;
margin: 4% 0 50% 0;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation on Page load "page content" */
.container {
  position: relative;
  -webkit-animation-name: container;
  -webkit-animation-duration: 1s;
  animation-name: container;
  animation-duration: 1s
}

@-webkit-keyframes container {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes container {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}


#loader-logo {
   position: relative;
  -webkit-animation-name: loader-logo;
  -webkit-animation-duration: 1s;
  animation-name: loader-logo;
  animation-duration: 1s
}

@-webkit-keyframes loader-logo {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes loader-logo {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
}






/*responsive-rules*/

 @media only screen and (max-width: 1060px) {
body{
 min-height: 920px;
 }
#loader {
  left: 46%;
  }

 }

 @media only screen and (max-width: 980px) {
body{
 min-height: 900px;
 }

#loader {
  left: 45%;
  }

.products .card-img{
 height: 280px;
}
  .products .card-title{
 font-size: 18px;
}
.products .card-text{
 font-size: 14px;
}
.products .btn{
 font-size: 10px;
}
.products h2{
    font-size: 20px;
    }
 }

@media only screen and (max-width: 720px) {
body{
 min-height: 800px;
 }
#loader {
  left: 41%;
  }

 }

@media only screen and (max-width: 650px) {
body{
 min-height: 700px;
 }
#loader {
  left: 43%;
}

 }