/*Spezifikationen fürs Logo bei oberster Drittel der Website */
.logo {		position: absolute;
					text-align: center;
					/* Erzeugt einen Schlagschatten bei Bilder mit transparentem Hintergrund */
					filter: drop-shadow(4vw 2vw 0.6vw white);
					width: 65vw;
					top: 25vw;
					left: 50%;
					transform: translate(-50%, -50%);
					opacity: 0.8;

}

/*Spezifikation fürs Logo bei Mobile Version */
@media all and (max-width: 1024px) {

	.logo { top: 40vw;
					filter: drop-shadow(4vw 2vw 1vw white);

	}

}






/*Spezifikation fürs Logo ab Deskstop-Breite 4000px */
@media screen and (min-width: 4000px) {

	.logo {  width: 55vw;
					 top: 15vw;

	}

}


/* Spezfikationen fürs Menu am oberen Bildschirmrand, Container */
.menu { position: sticky;
	top: 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: black; opacity: 100%;


}

/*verändert das Menu ab 1024px und kleinerer Bildschirmbreite  */
@media screen and (max-width: 1024px) {

	.menu {
					display: flex;
					flex-direction: row;
					align-items: center;
					background-color: black; opacity: 100%;

		}

	}



/* Spezifikationen fürs Menu am oberen Bildschirmrand
vw bedeutet Viewport und passt sich automatisch an der Bildschirmgrösse an */
h3 { font-family: 'Arial';
font-size: 1.5vw;
color: white;
padding-right: 2.5em;
text-decoration: none;

}

}

/*Spezifikation für h3 bei der Mobile-Version */
@media screen and (max-width: 1024px) {

	h3 { font-size: 2vw;

	}

}



/*Spezifikation für h3 ab Dekstop-Breite 4000px */
@media screen and (min-width: 4000px) {

	h3 { font-size: 1vw;
	}

}


/*Hier wird die Farbe der Menu-Leiste beim Klicken & drüberfahren definiert. */

a {  text-decoration: none;
		 color: white;

}
a:focus   { background-color: white; color: #a32638;}
a:visited { color: white;}
a:hover   { background-color: white; color: black; }
a:active  { background-color: #c0c0c0; color: black; }





/* Spezifikationen fürs Hintergrundvideo: Die nächste Zeile lässt das Desktopvideo bei einer Bildschirmgrösse unter 1024px verschwinden
und das kleinere Video: mobile erscheinen */
@media screen and (max-width: 1024px) {   #video_background_desktop { display: none; } }
@media screen and (min-width: 1024px) {   #video_background_mobile { display: none; }}

.container {
	  text-align: center;
}

#video_background_desktop {
	position: static;
	top: 0px;
	right: 0px;
	min-width: 100%;
	max-width: 1887px;
	min-height: 10px;
  max-height: 2160px;
	width: auto;
	z-index: -1000;
	overflow: hidden;

}

 #video_background_mobile {
	position: static;
	top: 0px;
	max-width: 100%;

}



/*Spezifikation für den Teil "Über mich" und das entsprechende Foto links */

.chaestli {
display: flex;
flex-direction: row;
justify-content: center;

}


.uebermich {
	top: 0px;
	right: 0px;
	min-width: 10%;
	min-height: 100%;
	width: auto;
	max-width: 50vw;
	max-height: 700px;

	}




.box2 {
max-width: 50vw;
align-items: center;
-webkit-align-items: center;

}


/*Änderungen für mobile Geräte (bis 1024px)*/
@media all and (max-width: 1024px) {

/*Spezifikation für die Flexbox 1 */
	.chaestli {
	flex-direction: column;

 }

	.uebermich {
		align-self: center;
			max-width: 100vw;

	}


	.box2 {
		align-self: center;
		max-width: 100vw;

	}

}




/* Spezifikationen für Titel Olivier Chanson
.name {font-family: 'Arial black';
color: #a32638;
font-size: 5vw;
text-shadow: 10px 20px 7px #d3d3d3;
text-align: center;
position: absolute;
top: 12vw;
left: 50%;
transform: translate(-50%, -50%);

}

*/

/*Spezifikationen für Titel Olivier Chanson bei Mobile-Version
@media all and (max-width: 1024px) {

.name {font-size: 10vw;
			 text-shadow: 3vw 3vw 2vw grey;

}

}

*/

/* Spezifikationen für Titel Multimedia Producer
.beruf {font-family: 'Arial black';
font-style: normal;
color: #F08018;
font-size: 4vw;
text-shadow: 10px 20px 7px #d3d3d3;
text-align: center;
position: absolute;
top: 20vw;
left: 50%;
transform: translate(-50%, -50%);
}

*/


/*Spezifikationen für Titel Multimedia Producer bei Mobile-Version
@media all and (max-width: 1024px) {

.beruf { font-size: 8vw;
				 top: 60vw;
				 text-shadow: 3vw 3vw 2vw grey;
}


}

*/

/*Spezifikationen für die zweite Flexbox bei "Kontakt" */

.chaestli2 {
display: flex;
flex-direction: column;
justify-content: center;

}


.kontakt {
	min-width: 10%;
	min-height: 100%;
  max-height: 620px;
	max-width: 400px;
	width: auto;
	align-self: center;

}


.box3 {}

/* Spezifikationen für Ueberschriften */
.ueberschrift {font-family: 'Arial black';
text-shadow: 10px 20px 7px #d3d3d3;
font-style: normal;
font-weight: 400;
color: #a32638;
font-size: 65px;
text-align: center;
padding-top: 1em;
padding-left: 6vw;
padding-right: 6vw;

}


/*Spezifikation für Überschriften bei der Mobile-Version */
@media all and (max-width: 1024px) {

.ueberschrift { font-size: 8vw;
text-shadow: 2vw 4vw 3vw #d3d3d3;

 }

}



/* Spezifikationen für Text */
p {font-family: 'Arial';
  color: black;
  font-size: 20px;
	padding-left: 6vw;
	padding-right: 6vw;
	text-align: center;
	position: static;
	line-height: normal;

}

/*Spezifikationen für den Text für die Mobile-Version */
@media all and (max-width: 1024px) {

	p { font-size: 4vw;
		padding-left: 5vw;
		padding-right: 5vw;

	}

}



/* Spezifikationen für h2 - Überschriften */

h2 { font-family: 'Arial black';
	color: #F08018;
	font-size: 35px;
	text-shadow: 10px 20px 7px #d3d3d3;
	text-align: center;
	padding-top: 1em;
	padding-left: 6vw;
	padding-right: 6vw;

}


/*Spezifikationen für die h2-Mobile Überschriften */
@media all and (max-width: 1024px) {

h2 { font-size: 6.5vw;
text-shadow: 2vw 4vw 3vw #d3d3d3

 }

}


/*Hier wird die Bildgrösse der Wahlkampfunterstützung festgelegt. */
.wahlkampf {  min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}


@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version der Wahlkampfunterstützung */
.wahlkampf {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;
 }

}

/*Hier wird die Bildgrösse der multimedialen Biografie festgelegt. */
.multimedial { min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}



@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version der multimedialen Biografie */
.multimedial {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;
 }

}



/*Hier wird die Bildgrösse des Werbefilm KmU's festgelegt. */
.werbefilm { min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}



@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version des Werbefilm KmU's */
.werbefilm {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;

 }

}



/*Hier wird die Bildgrösse des Ferienfilms festgelegt. */
.ferien { min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}



@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version des Ferienfilms */
.ferien {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;
 }

}


/*Hier wird die Bildgrösse der Drohnenaufnahme festgelegt. */
.drohne { min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}



@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version der Drohnenaufnahme*/
.drohne {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;

 }

}


/*Hier wird die Bildgrösse des Dokumentarfilms festgelegt. */
.dokumentarfilm { min-width: 10%;
min-height: 100%;
max-height: 620px;
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

}



@media all and (max-width: 1024px) {

/*Und hier die Bildgrösse bei der Mobile-Version des Dokumentarfilms*/
.dokumentarfilm {

	min-width: 10%;
	min-height: 100%;
	max-height: 620px;
	max-width: 400px;
	width: auto;

 }

}

/*In den folgenden Containter (chaestli3, 4 und 5) werden die Bisherigen Projekte/Portfolio geordnet und definiert. */
 .chaestli3 { display: flex;
flex-direction: row;
justify-content: center;
max-width: 100%;
padding-left: 2vw;
padding-right: 2vw;

}

.video01 {
padding-right: 1vw;


}

  .text01 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

.video02 {
padding-right: 1vw;


}

.text02 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

.text03 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}


 .chaestli4 { display: flex;
flex-direction: row;
justify-content: center;
max-width: 100%;
padding-left: 2vw;
padding-right: 2vw;

}

.video04 {
padding-right: 1vw;

}

.text04 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

.video05 {
padding-right: 1vw;

}

.text05 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

.text06 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}




 	.chaestli5 { display: flex;
flex-direction: row;
justify-content: center;
max-width: 100%;
padding-left: 2vw;
padding-right: 2vw;

}

.video07 {
padding-right: 1vw;

}

.text07 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

.video08 {
padding-right: 1vw;

}

.text08 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}


.text09 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}


 .chaestli6 { display: flex;
flex-direction: row;
/* justify-content: center; */ /*einfügen wenn mer Videos */
max-width: 100%;
padding-left: 2vw;
padding-right: 2vw;

}

.video10 {
padding-left: 7vw; /*rausnehmen wenn mehr Videos */
padding-right: 1vw;


}

.text10 { font-family: 'Arial black';
  color: black;
  font-size: 20px;
	text-align: center;
	padding-bottom: 2vw;

}

/*In den folgenden Containter (chaestli3, 4 und 5) werden die Bisherigen Projekte/Portfolio geordnet und definiert bei der Mobile-Version */
@media screen and (max-width: 1024px) {   .video01 { display: none; } }
@media screen and (min-width: 1024px) {   .video01-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video02 { display: none; } }
@media screen and (min-width: 1024px) {   .video02-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video03 { display: none; } }
@media screen and (min-width: 1024px) {   .video03-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video04 { display: none; } }
@media screen and (min-width: 1024px) {   .video04-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video05 { display: none; } }
@media screen and (min-width: 1024px) {   .video05-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video06 { display: none; } }
@media screen and (min-width: 1024px) {   .video06-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video07 { display: none; } }
@media screen and (min-width: 1024px) {   .video07-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video08 { display: none; } }
@media screen and (min-width: 1024px) {   .video08-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video09 { display: none; } }
@media screen and (min-width: 1024px) {   .video09-mobile { display: none; }}
@media screen and (max-width: 1024px) {   .video10 { display: none; } }
@media screen and (min-width: 1024px) {   .video10-mobile { display: none; }}



@media all and (max-width: 1024px) {

.chaestli3 { display: flex;
 flex-direction: column;
 align-items: center;
 padding-left: 2vw;
 padding-right: 2vw;

 }

 .video01-mobile { padding-bottom: 2vw;
 									 padding-right: 0vw;}
 .video02-mobile { padding-bottom: 2vw;
  								 padding-right: 0vw;}
 .video03-mobile { padding-bottom: 2vw;
  								 padding-right: 0vw;}

 .chaestli4 { display: flex;
 flex-direction: column;
 align-items: center;
 max-width: 100%;
 padding-left: 2vw;
 padding-right: 2vw;

 }

 .video04-mobile { padding-bottom: 2vw;
  								 padding-right: 0vw;}
 .video05-mobile { padding-bottom: 2vw;
     							 padding-right: 0vw;}
 .video06-mobile { padding-bottom: 2vw;
 									 padding-right: 0vw;}

  .chaestli5 { display: flex;
 flex-direction: column;
 align-items: center;
 max-width: 100%;
 padding-left: 2vw;
 padding-right: 2vw;

 }

.video07-mobile { padding-bottom: 2vw; }
.video08-mobile { padding-bottom: 2vw; }
.video09-mobile { padding-bottom: 2vw; }


.chaestli6 { display: flex;
flex-direction: column;
align-items: center;
max-width: 100%;
padding-left: 2vw;
padding-right: 2vw;

}

.video10-mobile { padding-bottom: 2vw;


}