/* ===================================================================== */
/* Wrapper um alle Banner                                                */
/* ===================================================================== */

div#BannerWrapper{
  position: relative;
  align: center;
  top: -40px;
}

/* ===================================================================== */
/* Eigenschaften aller Banner                                            */
/* ===================================================================== */

/* abweichende Eigenschaften bei breitem Viewport siehe ganz unten! */

/* ======================================================= Allgemeiner Bannereigenschaften */

a.Banner{
  position: relative;
  display: block;
  height: 20vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  margin-left: 1vw;
  margin-right: 1vw;
  padding-left: 1vw;
  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 1px 1px 8px 2px rgba(0,0,0,0.7);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 2px 2px 8px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 8px 2px rgba(0,0,0,0.7);
  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s; 
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 20vw;
}

/* ======================================================= Hover-Eigenschaften der Banner */

a.Banner:hover{
  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 1px 1px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
  -moz-box-shadow: inset 2px 2px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
  box-shadow: inset 0px 0px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
}

/* ======================================================= Logo in einem Banner */

img.LogoAufBanner{
  margin-top: 0.5vw;
  height: 19vw;
}

img.ExtLinkAufBanner{
  width: 3%;
  position: relative;
  left: -21%;
}

div.AktuellTitel{
  position: absolute;
  right: 1%;
  top: 10%;
  font-size: 6.5vw;
  transform: rotate(20deg);
  color: #EEA900;
  font-weight: bold;
  font-style: italic;
  text-shadow: 0px 0px 0.6vw #fff, 0px 0px 0.6vw #fff, 0px 0px 0.6vw #fff, 0px 0px 0.6vw #fff, 0px 0px 0.6vw #fff, 0px 0px 0.6vw #fff;
}

/* ======================================================= Auswahl der Banner-Hintergrundbilder */

a#BannerVen11{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildVen11.JPG);}
a#BannerAlp12{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildAlp12.JPG);}
a#BannerIst13{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildIst13.JPG);}
a#BannerPra14{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildPra14.JPG);}
a#BannerPar15{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildPar15.JPG);}
a#BannerMon15{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildMon15.JPG);}
a#BannerGui16{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildGui16.JPG);}
a#BannerChi16{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildChi16.JPG);}
a#BannerMar17{background-image: linear-gradient(to right, rgba(134,0,0,1) 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildMar17.JPG);}
a#BannerBal19{background-image: linear-gradient(to right, #EEA900 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildBal19.JPG);}
a#BannerNor21{background-image: linear-gradient(to right, #EEA900 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildNor21.JPG);}
a#BannerZen22{background-image: linear-gradient(to right, #EEA900 25%, rgba(134,0,0,0) 75%), url(../../grafiken/radreisen/banner/BannerBildZen22.JPG);}


/* ===================================================================== */
/* Float bei großem Viewport                                             */
/* ===================================================================== */

/* ======================================================= Darstellung in zwei Spalten bei breitem Viewport */

@media only screen and (min-width: 800px) {
	div#BannerWrapper{                                     /* Wrapper um alle Banner */
	  position: relative;
	  top: -20px;
	}
	a.Banner{                                              /* allgemeine Bannereigenschaften */
	  height: 11vw;
          width: 45vw;
	  background-size: auto 11vw;
	  float: left;
	  margin-top: 0vw;
	  margin-bottom: 1.5vw;}
	img.LogoAufBanner{height: 10vw;}                       /* Logo auf Banner */
	span#StartZielkl{font-size: 1.5vw;}                    /* Text auf Aktuell-Banner 1 */
	span#WebsiteLinkTextkl{font-size: 1.5vw;}              /* Text auf Aktuell-Banner 2 */
  img.ExtLinkAufBanner{left: -24%;}
  div.AktuellTitel{font-size: 3.5vw;}
}

/* ======================================================= Ausblenden des Aktuell-Banners bei sehr großem Viewport */

/* bei sehr großem Viewport wird der Aktuell-Banner direkt auf der Karte eingeblendet */

@media only screen and (min-width: 1300px) {
	a#ButtonAktuell{display: none;}
}