/* CSS Datei zu Hotel Den Templae  */
/* Copyright (c) 2021 Reto Tröndle */

/* Hero Image für Januar laden */

@media only screen and (max-width: 576px) and (orientation: portrait) {
 .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/576.png");
  }
  .btn-menu {
	background-color: unset;
  }
   .hero-title{
  	color: var(--header-text-color);
  }
  #logo {
  	position: absolute;
  	top: 80px;
  	left: 25px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) and (orientation: portrait) {
  .hero-image {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/768.png");
  }
}

@media only screen and (min-width: 576px) and (max-width: 768px) and (orientation: landscape) {
  .hero-image {
     background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/768_l.png");
  }
}


@media only screen and (min-width: 768px) and (max-width: 992px)  and (orientation: portrait) {
  .hero-image  {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/992.png");
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px)  and (orientation: landscape) {
  .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/992_l.png");  
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) and (orientation: portrait) {
  .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1200.png");
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) and (orientation: landscape) {
  .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1200_l.png");
  }
}


@media only screen and (min-width: 1200px) and (max-width: 1400px) and (orientation: portrait) {
  .hero-image  {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1400.png");
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) and (orientation: landscape) {
  .hero-image  {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1400_l.png");
  }
}

@media only screen and (min-width: 1400px) and (orientation: portrait){
  .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1920.png");
  }  
}
@media only screen and (min-width: 1400px) and (orientation: landscape){
  .hero-image  {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("../images/jan/1920_l.png");
  }  
}