/* Hilfmittel um Bilder in die flex-item-Mitte zu setzen */
/*
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
*/


.gallery img {
  padding: 0.2em;
  vertical-align: middle;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */


	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
	/* o n l y    mo b i l e  a n d  t o u c h    s c r e e n s       */
	/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

@media only screen and (min-width:20em)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
	.gallery img {
	  width: 100%; /* 55%; */

	  clip-path: ellipse(43% 42%);
	  }

	.ww-region img {
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	  width: 100%;
	}
	
	.logo img {
	  width: 95%;
	}

	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 75%;
	  margin-bottom: 0%;
	  margin-left: -7%;
	}
}
@media only screen and (min-width:30em)  { /* smartphones, Android phones, landscape iPhone */ 
	.gallery img {
	  width: 100%; /* 55%; */

	  clip-path: ellipse(43% 42%);
	  }


	.ww-region img {
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	  width: 100%;
	}

	.logo img {
	  width: 95%;
	}

	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 75%;
	  margin-bottom: 0%;
	  margin-left: -7%;
	}
}
@media only screen and (min-width:38em)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
	.gallery img {
	  width: 100%; /* 65%; */

	  clip-path: ellipse(43% 42%);
	  }


	.ww-region img {
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	  width: 100%;
	}

	.logo img {
	  width: 95%;
	}

	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 75%;
	  margin-bottom: 0%;
	  margin-left: -7%;
	}
}
@media only screen and (min-width:50em)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
	.gallery img {
	  width: 100%; /* 65%; */

	  clip-path: ellipse(43% 42%);
	  }


	.ww-region img {
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	  width: 100%;
	}

	.logo img {
	  width: 95%;
	}

	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 75%;
	  margin-bottom: 0%;
	  margin-left: -7%;
	}
}



	/* - - - - - - - - - - - - - - - - - - - - - - */
	/* h o v e r i n g    t h e    m o n i t o r s */
	/* - - - - - - - - - - - - - - - - - - - - - - */
	
@media only screen and (min-width:64em) { /* big landscape tablets, laptops, and desktops */ 

	/* Graustufen und Groesse*/
	.gallery img {
	  filter: grayscale(0);
	  width:  100% /* 75%; */

	  clip-path: ellipse(47% 42%);
	  /* clip-path: circle(47%); */
	}
	.gallery img:hover {
	  filter: grayscale(1);
	}


	.ww-region img {
	  filter: grayscale(0);
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	}
	.ww-region img:hover {
	  filter: grayscale(1);
	}


	.logo img {
	  width: 95%;
	}


	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 25%;
	}
	.ti-logo img:hover {
	  filter: grayscale(0);
	}
}

@media only screen and (min-width:80em) { /* hi-res laptops and desktops */ 
	/* Graustufen und Groesse*/
	.gallery img {
	  filter: grayscale(0);
	  width: 100%; /* 75%; */

	  clip-path: ellipse(47% 42%);
	  /* clip-path: circle(47%); */
	}
	.gallery img:hover {
	  filter: grayscale(1);
	}


	.ww-region img {
	  filter: grayscale(0);
	  clip-path: ellipse(49% 27%);
	  margin-top: -15%;
	  margin-bottom: -12%;
	}
	.ww-region img:hover {
	  filter: grayscale(1);
	}


	.logo img {
	  width: 95%;
	}


	.ti-logo img {
	  clip-path: ellipse(49% 55%);
	  margin-top: -9%;
	  width: 25%;
	}
	.ti-logo img:hover {
	  filter: grayscale(0);
	}
}