/*  ====================================================
Stylesheet zur Formatierung am Bildschirm
Autor: Matthias Krickel, StudingerPartner, Basel
======================================================== */


/* Sitecolors:	Hintergrund		weiss	#FFFFFF
				satt/higru		orange	color:rgb(255,102,000); background-color:rgba(255,102,000,0.7);
								yellow	color:rgb(204,136,000); background-color:rgba(255,245,100,0.7);
								mint	color:rgb(000,210,255); background-color:rgba(000,255,255,0.7);
								blue	color:rgb(020,070,140); background-color:rgba(100,145,220,0.7);
								green	color:rgb(064,128,064); background-color:rgba(170,230,125,0.7);
								red		color:rgb(170,000,000); background-color:rgba(230,130,130,0.7);
								pink	color:rgb(255,000,255); background-color:rgba(255,000,255,0.7);
								purple	color:rgb(102,000,204); background-color:rgba(102,000,204,0.7);
*/

/* ======================================
   Farben-Styles
   ====================================== */

.text-red {		color:rgb(170,000,000); }
.text-yellow {	color:rgb(204,136,000); }
.text-green {	color:rgb(064,128,064); }
.text-blue {	color:rgb(020,070,140); }

/* Sitefonts:	Saira Condensed Medium (Google Font) 								*/


/* ======================================
   Allgemeine Styles
   ====================================== */
* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	margin-bottom:1px;
}

a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a.pfeil-text-yellow {
	background-image:url(../images/symbols/rightarrow-text-yellow.png);
	background-size:12px 12px;
	background-position:0px 6px;
	background-repeat:no-repeat;
	padding-left:18px;
	border:none;
}

a.pfeil-up-yellow {
	background-image:url(../images/symbols/uparrow-text-yellow.png);
	background-size:12px 12px;
	background-position:0px 6px;
	background-repeat:no-repeat;
	padding-left:18px;
	border:none;
}

a.pfeil-up-blue {
	background-image:url(../images/symbols/uparrow-blue.png);
	background-size:12px 12px;
	background-position:0px 6px;
	background-repeat:no-repeat;
	padding-left:18px;
	border:none;
}

/*strong {
	color:black;
}*/

.quelle {
	font-size:75%;
}

#mehr {
	display:none;
}

.nostyle {
	background:none;
	border:none;
	margin:0px;
	padding:0px;
	font-size:inherit;
	letter-spacing:inherit;
	color:inherit;
}

.nostyle:hover {
	text-decoration:underline;
}

/* ======================================
   Layout-Bereiche
   ====================================== */
#iphonewrapper {
	position:relative;
	width:320px;
	min-height:480px;
	margin:0 auto 0 auto;
	/*border:1px solid red;*/
}

	/* Special styles for media with screen-size wider than 1000px: */
	@media only screen and (min-width: 1000px) {
	#iphonewrapper {
		margin:50px auto 0 auto;
	}
	}

/* horizontales menü = besser für mobiles */
/*.nav {
	margin:0 -10px;
	height:20px;
}

	.nav ul {
		margin:0px;
		list-style-type:none;
	}

	.nav li {
		display:inline;
		margin:0px;
		padding:0 12px;
		border-left:2px solid #BBB;
	}*/


/* red */
#home {
	background-color:rgba(230,130,130,0.7);
	position:absolute;
	top:70px;
	left:5px;
	width:320px;
	min-height:100px;
	padding:20px;
	-webkit-filter: blur(7px) opacity(50%) saturate(70%);
    filter: blur(7px) opacity(50%) saturate(70%);
}
#pos-home #home {
	-webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}

/* blue */
#projekt {
	background-color:rgba(100,145,220,0.7);
	position:absolute;
	top:150px;
	left:40px;
	width:450px;
	min-height:100px;
	padding:20px;
	-webkit-filter: blur(7px) opacity(50%) saturate(70%);
    filter: blur(7px) opacity(50%) saturate(70%);
}
#pos-projekt #projekt {
	-webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}

/* orange */
#projekt-galerie {
	background-color:rgba(255,102,000,0.7);
	position:absolute;
	top:230px;
	left:-60px;
	width:420px;
	min-height:100px;
	padding:20px;
}

/* mint */
#projekt-ausstellung {
	background-color:rgba(000,255,255,0.7);
	position:absolute;
	top:150px;
	left:30px;
	width:300px;
	min-height:100px;
	padding:20px;
}

/* purple */
#projekt-fotograf {
	background-color:rgba(000,255,255,0.7);
	position:absolute;
	top:150px;
	left:30px;
	width:300px;
	min-height:100px;
	padding:20px;
}

/* green */
#kontakt {
	background-color:rgba(170,230,125,0.7);
	position:absolute;
	top:90px;
	left:90px;
	width:320px;
	padding:20px;
	-webkit-filter: blur(7px) opacity(70%) saturate(75%);
    filter: blur(7px) opacity(70%) saturate(75%);
}
#pos-kontakt #kontakt {
	-webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}

/* yellow */
#impressum {
	background-color:rgba(255,245,100,0.7);
	position:absolute;
	top:110px;
	left:-30px;
	width:370px;
	min-height:100px;
	padding:20px;
	-webkit-filter: blur(7px) opacity(70%) saturate(75%);
    filter: blur(7px) opacity(70%) saturate(75%);
}
#pos-impressum #impressum {
	-webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}



/* ======================================
   Styles für Modal-Galerie
   ====================================== */

/* Hier Grösse der Galerie-Thumbnails einstellen. Bei maximaler Grösse > width: 100%; (entspricht Breite Projektspalte abzgl Padding = 410px) */
.thumbnail {
  width:100%;
  height:auto;
  margin:0 10px 10px 0;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 15;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.85);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: rgba(0,0,0,0.85);
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.1s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.1s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}




/* ======================================
   Effekt-Filter
   ====================================== */

/*.blur {
    -webkit-filter: blur(7px) opacity(70%) saturate(75%);
    filter: blur(7px) opacity(70%) saturate(75%);
}*/

/*.blur:hover {
    -webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}
*/
/* The animation code
@keyframes sharpen {
    0%		{	-webkit-filter: blur(7px) opacity(70%) saturate(75%);
				filter: blur(7px) opacity(70%) saturate(75%);	}
    100%	{	-webkit-filter: blur(0px) opacity(100%) saturate(100%);
				filter: blur(0px) opacity(100%) saturate(100%);	}
} */

/* The element to apply the animation to
.blur:hover {
    animation-name: sharpen;
    animation-duration: 0.3s;
} */


/* 
.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

*/

/*******************************/
/*   Styles for index-3.html   */
/*******************************/

/* ======================================
   Effekt-Filter
   ====================================== */

/*.blur {
    -webkit-filter: blur(7px) opacity(70%) saturate(75%);
    filter: blur(7px) opacity(70%) saturate(75%);
}

.blur:hover {
    -webkit-filter: blur(0px) opacity(100%) saturate(100%);
    filter: blur(0px) opacity(100%) saturate(100%);
}*/

/*.orange {
	position:absolute;
	top:50px;
	left:50px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(255,102,0,0.5);
	color:rgba(255,102,0,1);
}

.yellow {
	position:absolute;
	top:70px;
	left:240px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(255,255,0,0.4);
	color:rgba(255,210,0,1);
}

.mint {
	position:absolute;
	top:60px;
	left:430px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(0,255,255,0.4);
	color:rgba(0,230,255,1);
}

.blue {
	position:absolute;
	top:170px;
	left:60px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(0,100,255,0.4);
	color:rgba(0,100,255,1);
}

.green {
	position:absolute;
	top:160px;
	left:255px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(0,255,0,0.5);
	color:rgba(0,210,0,1);
}

.red {
	position:absolute;
	top:190px;
	left:420px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(255,0,0,0.5);
	color:rgba(255,0,0,1);
}

.pink {
	position:absolute;
	top:290px;
	left:50px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(255,0,255,0.5);
	color:rgba(255,0,255,1);
}

.purple {
	position:absolute;
	top:480px;
	left:240px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(102,0,204,0.5);
	color:rgba(102,0,204,1);
}

.purple2 {
	position:absolute;
	top:480px;
	left:540px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(102,0,204,0.5);
	color:rgba(102,0,204,1);
}

.purple-blurred {
	position:absolute;
	top:480px;
	left:540px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(102,0,204,0.5);
	color:rgba(102,0,204,1);
	-webkit-filter: blur(7px);
	filter: blur(7px);
}
*/
/*.purple-blurred {
	position:absolute;
	top:480px;
	left:540px;
	width:200px;
	min-height:100px;
	padding:20px;
	background-color:rgba(102,0,204,0.5);
	box-shadow:0 0 30px 30px rgba(102,0,204,0.5);
	color:transparent;
	text-shadow: 0 0 12px rgba(102,0,204,1);
}*/

/*.orange2 {
	position:absolute;
	top:600px;
	left:50px;
	width:800px;
	height:80px;
	background-color:rgba(255,102,0,0.5);
	color:rgba(255,102,0,1);
}

.beispiel {
	position:absolute;
	top:400px;
	left:600px;
	width:400px;
	height:250px;
	background-color:rgba(255,255,0,0.6);
	box-shadow: 0 0 20px rgb(255,255,0);
	padding:50px;
}

.beispiel p {
	color:rgba(255,255,0,0.8);
	font-size:160%;
}

.beispiel2 {
	position:absolute;
	top:360px;
	left:450px;
	width:600px;
	height:150px;
	background-color:rgba(255,0,255,0.6);
	box-shadow: 0px 0px 20px rgb(255,0,255);
	padding:50px;
}

.beispiel2 p {
	color:rgba(230,0,255,0.9);
	font-size:160%;
}*/