@import 'global.css';

/************************************************/
.Container {
   display:none;
   position:relative;
   float:left;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   margin-left:auto;
   margin-right:auto;
   margin-top:30px;
   margin-bottom:15px;
   padding:5px;
   width:0px;
   height:0px;
   color:#000;
   border:1px solid rgba(77, 77, 77, 1);
   border-radius:10px;
   overflow:hidden;
}

div.TextInfoContainer {
	float:left;
	display:block;
   position:relative;
   margin:0px;
   margin-left:10px;
	padding:0px;
	color:#000;
	border:0px solid blue;
	overflow:hidden;
   width:540px;
   height:290px;
}

div.TextInfoCaptionContainer {
	float:left;
	display:block;
	margin:0px;
	padding:10px;
	border:0px solid #999;
   position:relative;
   width:538px;
   height:70px;
	overflow:hidden;
}

div.TextInfoInfoContainer {
	float:left;
	display:block;
	margin-left:1px;
   margin-top:1px;
	padding:20px;
	color:#000;
	border:0px solid #999;
	overflow:hidden;
   position:relative;
   width:538px;
   height:140px;
}

div.TextInfoLinkContainer {
	float:left;
	display:block;
	margin-left:1px;
   margin-top:1px;
	padding:20px;
	color:#000;
	border:0px solid #999;
   border-radius:0px;
	overflow:hidden;
   position:relative;
   width:538px;
   height:70px;
}

span.ContainerTextCaption {
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   color:lightgoldenrodyellow;
   font-size:50px;
}

p.ContainerTextInfo {
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   color:lightgoldenrodyellow;
   font-size:16px;
}

a.ContainerTextInfoLink {
   font-size:25px;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   color:lightgoldenrodyellow;
   text-decoration:none;
}

div.VisualInfoRightContainer {
	float:left;
	display:block;
   position:relative;
   margin:0px;
	margin-left:30px;
   padding:0px;
   padding-left:10px;
	color:#000;
	border:0px solid #999;
   width:360px;
   height:290px;
	overflow:hidden;
}

div.VisualInfoLeftContainer {
	float:left;
	display:block;
   position:relative;
	margin:0px;
   margin-right:30px;
   padding:0px;
   padding-left:10px;
	color:#000;
	border:0px solid tomato;
   width:360px;
   height:290px;
	overflow:hidden;
}

div.VisualPicturesRightContainer {
	float:left;
	display:block;
   position:relative;
	margin-left:70px;
   margin-top:13px;
	padding:5px;
	color:#000;
	border:0px solid #999;
   border-radius:10px;
   width:260px;
   height:190px;
	overflow:hidden;
}

div.VisualPicturesLeftContainer {
	float:left;
	display:block;
   position:relative;
	margin-right:70px;
   margin-top:13px;
	padding:5px;
	color:#000;
	border:0px solid #999;
   border-radius:10px;
   width:260px;
   height:190px;
	overflow:hidden;
}

div.VisualCaptionPictureRightContainer {
	float:left;
	display:block;
   position:relative;
   top:-60px;
   left:12px;
	width:130px;
	height:130px;
	border:1px solid grey;
   border-radius:10px;
	overflow:hidden;
}

div.VisualCaptionPictureLeftContainer {
	float:left;
	display:block;
   position:relative;
   top:-60px;
   left:200px;
	width:130px;
	height:130px;
	border:1px solid grey;
   border-radius:10px;
	overflow:hidden;
}

/******* Beim Überfahren mit der Maus **********/
.Container:hover {
   a.ContainerTextInfoLink {
      color:gold;
   }

   margin:-2;

   border:1px solid white;
   box-shadow:0px -4px 8px 0px rgba(255, 255, 255, 0.4), 0px -6px 20px 0px rgba(255, 255, 255, 0.2),
      0px 4px 8px 0px rgba(255, 255, 255, 0.4), 0px 6px 20px 0px rgba(255, 255, 255, 0.2);

   transition:1.5s;
}

div.VisualCaptionPictureRightContainer:hover {
   border:1px solid #000;
   transform:scale(1.05, 1.05);
   transition: transform 0.8s;
   box-shadow:0px -4px 8px 0px rgba(255, 255, 255, 0.4), 0px -6px 20px 0px rgba(255, 255, 255, 0.2),
      0px 4px 8px 0px rgba(255, 255, 255, 0.4), 0px 6px 20px 0px rgba(255, 255, 255, 0.2);
   transition: 1.5s;
}

div.VisualCaptionPictureLeftContainer:hover {
   border:1px solid #000;
   transform:scale(1.05, 1.05);
   box-shadow:0px -4px 8px 0px rgba(255, 255, 255, 0.4), 0px -6px 20px 0px rgba(255, 255, 255, 0.2),
      0px 4px 8px 0px rgba(255, 255, 255, 0.4), 0px 6px 20px 0px rgba(255, 255, 255, 0.2);
   transition: 1.5s;
}

/************Wenn's kleiner wird***************/
.MobileContainer {
   display:block;
   position:relative;
   float:left;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   margin-top:15px;
   margin-bottom:15px;
   width: calc(100vw - 60px);
   height:auto;
   color:#000;
   border:0px solid black;
   overflow:visible;
}

.FlexContainer {
   display: flex;
   flex-wrap: wrap;
   width:100vw;
   padding-left:3vw;
   border:0px solid black;
   height:auto;
}

.FlexItem {
   color:lightgoldenrodyellow;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   background-color:Inherit;
   width: calc(100vw - 90px);
   height: calc(1.8 * ((100vw - 90px)));
   margin:10px;
   border:1px solid white;
   box-shadow:0px -4px 8px 0px rgba(255, 255, 255, 0.4), 0px -6px 20px 0px rgba(255, 255, 255, 0.2),
      0px 4px 8px 0px rgba(255, 255, 255, 0.4), 0px 6px 20px 0px rgba(255, 255, 255, 0.2);
   overflow:hidden;
}

.FlexItemCaption {
   display:block;
   color:lightgoldenrodyellow;
   position:relative;
   background-color:inherit;
   font-family:'MS Sans Serif', sans serif;
   float:left;
   padding:10px;
   width: calc((100vw - 90px) - 2px);
   height:3rem;
   border-bottom:1px solid black;
   font-size:1.5rem;
   text-align:center;
   overflow:hidden;
}

.FlexItemPicture {
   display:block;
   position:relative;
   float:left;
   padding:0px;
   width: calc(100vw - 90px);
   height:auto;
   border-bottom:0px solid black;
   overflow:hidden;
}

.FlexItemText {
   display:block;
   position:relative;
   float:left;
   padding:15px;
   top:-3px;
   width:auto;
   height:auto;
   font-size:1rem;
   text-shadow:silver 0.1px 0.1px;
   border-top:1px solid grey;
   overflow:hidden;
}

a.FlexItem {
   text-decoration:none;
   color:lightgoldenrodyellow;
   border:none;
   box-shadow:none;
}

/******* Beim Überfahren mit der Maus **********/
.FlexItem:hover {
   .FlexItemCaption {
      color:gold;
   }
}

/***********************************************/
@media only screen and (min-width:576px) {
/***********************************************/
   .Container {
      width: calc(100vw - 86px);
   }

   .FlexItem {
      width: calc((100vw - 108px) / 2);
      height: calc(1.8 * (((100vw - 108px) / 2)));
   }

   .FlexItemCaption {
      width: calc(((100vw - 108px) / 2) - 2px);
   }

   .FlexItemPicture {
      width: calc((100vw - 108px) / 2);
   }
}

/***********************************************/
@media only screen and (min-width:768px) {
/***********************************************/
   .Container {
      width: calc(100vw - 86px);
   }

   .FlexItem {
      width: calc((100vw - 126px) / 3);
      height: calc(1.8 * (((100vw - 126px) / 3)));
   }

   .FlexItemCaption {
      width: calc(((100vw - 126px) / 3) - 2px);
   }

   .FlexItemPicture {
      width: calc((100vw - 126px) / 3);
   }
}

/***********************************************/
@media only screen and (min-width: 992px) {
/***********************************************/
   .MobileContainer {
      display:none;
      width:0px;
      height:0px;
   }

   .FlexContainer {
      display:none;
      width:0px;
      height:0px;
   }

   .Container {
      display:block;
      height:300px;
      width: calc(100vw - 24px);
      max-width: calc(var(--me-BigScreen) - 32px);
      margin-left: calc((100vw - (var(--me-BigScreen) - 32px)) / 2);
   }
}