/*najpierw przypisuje berdziej ogolne wartosci*/

html{
font-family: 'courier'
	margin: auto;
	font-size: 10px; /*od tej wartosci beda liczone wszystkie wielkosci "em"*/
	}


body { width: 100%;
	margin: 0 0;
	/*dzieki tym dwom wartosciom powyzej strona zostaje zawsze wycentrowana w przegladarce, element zostanie wstawiony w srodku mozna tez zapisac margin-left:auto;
	margin-right:auto;  margin-top: 3em dla uzyskania tego samego efektu;*/
	
	padding-top: 2em;	
	padding-bottom:0em;
	padding-left: 1em;
	padding-right: 1.5em;
	box-sizing: border-box;
	justify-content: center;
	background: rgb(230,230,230)
	;}








  


 
.edytorname {
	margin: 0 0 0 0;
	padding-top: 0.4em;
	padding-bottom: 0em;


	list-style: none; /*  usuniete formatowanie m.in. wypunktowanie przy li*/
	font-size: 1.1em;
	letter-spacing: 0.02em;
	word-spacing: 0.1em;
	font-family: 'courier';
	justify-content: left;
	/* position: fixed;
	width:93%; ---dzieki temu otrzymano nieruchoma nawigacje, ktora nie scrolluje sie z calym html*/ 
	align-items: center ;

	}


  
.navigation {
	margin: 0 0 0 0;
	padding-top: 0em;
	padding-bottom: 0.2em;



	list-style: none; /*  usuniete formatowanie m.in. wypunktowanie przy li*/
	color: black;
	font-size: 1.1em;
	letter-spacing: 0.03em;
	font-family: 'courier';
	word-spacing: 0.4em;

	
	justify-content: left;
	/* position: fixed;
	width:93%; ---dzieki temu otrzymano nieruchoma nawigacje, ktora nie scrolluje sie z calym html*/ 
	align-items: center ;

	}



 

.mainmenu {
margin-left: 0em;
margin-right: 0em;
margin-bottom: 1,8em;
margin-top: 0.3em;
padding-top: 0em;



	display: flex;  /* znaczy, ze jadzie poziomo*/
	flex-flow: row wrap;  /*  kierunek od lewej do prawe i moge miec wiecej niz 1 rzad, zawijanie elementow przy pomniejszeniu okna badz na innych nosnikach, dostosowuje uklad elemetow do nosnika*/
	list-style: none; /*  usuniete formatowanie m.in. wypunktowanie przy li*/
	color: black;
	font-size: 1.1em;
	letter-spacing: 0.02em;
	word-spacing: 0.5em;
	font-family: 'courier';
	justify-content: left;

	/* position: fixed;
	width:93%; ---dzieki temu otrzymano nieruchoma nawigacje, ktora nie scrolluje sie z calym html*/ 
	align-items: center ;

	}




.project  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 42em;}

.homepage  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 65em; /*65em wczesniej*/
}


.homepagehorizontal  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 82em; /*42em wczesniej*/
}


.withvideo  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 42em;
}

.withvideoright  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 42em;
}

	.portfolio_content  iframe{ /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.45em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	background: rgb(0,0,0);
	width: 82em;
	height: 62em;}
/*	width: 105em;
height: 73.5em;}
*/



#horizontalpic
	{margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 100.8em;}


.project_vertical_movie	iframe{ /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.45em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	background: rgb(0,0,0);
	width: 50em;
	height: 67.5em;}

.project_vertical_movie  img { /*wybierz wszystkie elementy img, ktore znajduja sie w section*/
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
	padding-top: 0em;
	width: 50em;}







.portfolio_content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: auto;
	/*dzieki tym dwom wartosciom powyzej strona zostaje zawsze wycentrowana w przegladarce, element zostanie wstawiony w srodku mozna tez zapisac margin-left:auto;
	margin-right:auto;  margin-top: 3em dla uzyskania tego samego efektu;*/
	width: 80%;
	padding: 7em 0em 1em 1em; /* dzieki temu elemety li w portfolio content nie beda mialy wciecia akapitowego*/
}
	




.project_description{
	margin: 0 0 0 0;
	padding-top: 0em;
	padding-bottom: 0.3em;


	display: flex;  /* znaczy, ze jadzie poziomo*/
	flex-flow: row wrap;  /*  kierunek od lewej do prawe i moge miec wiecej niz 1 rzad, zawijanie elementow przy pomniejszeniu okna badz na innych nosnikach, dostosowuje uklad elemetow do nosnika*/
	list-style: none; /*  usuniete formatowanie m.in. wypunktowanie przy li*/
	color: black;
	font-size: 1.4em;
	letter-spacing: 0.03em;
	font-family: 'courier';
	word-spacing: 0.4em;
	 /* font-variant: small-caps;*/
	    text-transform: uppercase;
	
		justify-content: left;
	/* position: fixed;
	width:93%; ---dzieki temu otrzymano nieruchoma nawigacje, ktora nie scrolluje sie z calym html*/ 
	align-items: center ;
}





 .stopka {
 	display: flex;
	flex-wrap: wrap;
	list-style: none;

	justify-content: space-between;
	

	font-size: 1.1em;
	letter-spacing: 0.02em;
	word-spacing: 0.5em;
	font-family: 'courier';


	color:  black;
	margin-top: 3em;
	padding-top: 0.4em;
	padding-right: 2em;
	padding-left: 2em;
	
	text-align: center;
	position: relative;

	}








.about {
	margin: 20 20 50 50;
	padding-top: 5em;
	padding-bottom: 0.4em;
	padding-left: 20%;
padding-right: 38%;

	display: flex;  /* znaczy, ze jadzie poziomo*/
	flex-flow: row wrap;  /*  kierunek od lewej do prawe i moge miec wiecej niz 1 rzad, zawijanie elementow przy pomniejszeniu okna badz na innych nosnikach, dostosowuje uklad elemetow do nosnika*/
	list-style: none; /*  usuniete formatowanie m.in. wypunktowanie przy li*/
	color: black;
	font-size: 1.4em;
	letter-spacing: 0.01em;
	font-family: 'courier';
word-spacing: 0.4em;

	
		justify-content: left;
	/* position: fixed;
	width:93%; ---dzieki temu otrzymano nieruchoma nawigacje, ktora nie scrolluje sie z calym html*/ 
	align-items: center ;

	}





	/*
font-size: 0.2em;
-webkit-transition: font-size 0.5s ease 0.05s;
  -moz-transition: font-size 0.5s ease 0.05s;
  -o-transition: font-size 0.5s ease 0.05s;
  transition:font-size 0.5s ease 0.05s;}
  .description_text:hover {font-size: 1.1em*/ }  

.portfolio_content a{ cursor: default;
	-webkit-transition: border 0.05s ease 0.05s;
  -moz-transition: border 0.05s ease 0.05s;
  -o-transition: border 0.05s ease 0.05s;
  transition:border 0.05s ease  0.05s;}
/* dzieki temu przesuwaly sie zdjecia lekko widac, ze najechane {  border: solid 1px white; } */



a:link { color: black; text-decoration: none; }
a:visited { color: black; text-decoration: none; }
a:hover { color: black;  }
a:active { color: black; text-decoration: none; }


.underlinelink a:link { color: black; text-decoration: none; }
.underlinelink a:visited { color: black; text-decoration: none; }
.underlinelink a:hover { color: black; text-decoration: none; }
.underlinelink a:active { color: black; text-decoration: none; }

/*.portfolio_content img
{
opacity:1;
filter:alpha(opacity=40); 
}
img:hover
{
opacity:0.5;
filter:alpha(opacity=100); 

}*/


/*.about_page a:link{color:gray; }
.about_page a:visited{color: black); } */

fotter a:link { color: black; text-decoration: none; }
fotter a:visited { color: rgb(0,0,0); text-decoration: none; }


 /* @media only screen and (max-width: 119.9em)
{body{width:45%;}
.portfolio_content img {width: 95.5%;}
.portfolio_content iframe {width: 95.5%;}
.portfolio_content  {width: 100%;} }


@media only screen and (max-width: 118em)
{body{width:45%;}
.portfolio_content img {width: 95%;} 
.portfolio_content iframe {width: 95%;}
.portfolio_content  {width: 80%;}}   

@media only screen and (max-width: 115em)
{body{width:55%;}
.portfolio_content img {width: 95%;} 
.portfolio_content iframe {width: 95%;}
.portfolio_content  {width: 86%;}}


@media only screen and (max-width: 113em)
{body{width:55s%;}
.portfolio_content img {width: 94%;} 
.portfolio_content iframe {width: 94%;}
.portfolio_content  {width: 95%;}}

@media only screen and (max-width: 110em)
{body{width:60%;}
.portfolio_content img {width: 93%;} 
.portfolio_content iframe {width: 93%;}
.portfolio_content  {width: 100%;}} 

@media only screen and (max-width: 109em)
{body{width:60%;}
.portfolio_content img {width: 94%;} 
.portfolio_content iframe {width: 94%;}
.portfolio_content  {width: 100%;}}  

@media only screen and (max-width: 102em)
{body{width:60%;}
.portfolio_content img {width: 85%;} 
.portfolio_content iframe {width: 85%;}
.portfolio_content  {width: 100%;}}   

@media only screen and (max-width: 100em)
{body{width:60%;}
.portfolio_content img {width: 90%;} 
.portfolio_content iframe {width: 90%;}
.portfolio_content  {width: 100%;}}  

@media only screen and (max-width: 97em)
{body{width:60%;}
.portfolio_content img {width: 90%;} 
.portfolio_content iframe {width: 93%;}
.portfolio_content  {width: 100%;}} 


 

@media only screen and (max-width: 95em)
{body{width:100%;}
.portfolio_content img {width: 30%;} 
.portfolio_content iframe {width: 60.55%; height:98.2%;}
.project_vertical_movie	iframe {width: 30%; height:94%;}
#horizontalpic {width: 60.55%; height:94.2%;}
.portfolio_content  {width: 100%;}}  





@media only screen and (max-width: 95em)
{body{width:60%;}
.portfolio_content img {width: 92%;} 
.portfolio_content iframe {width: 92%;}
.portfolio_content  {width: 100%;}}



@media only screen and (max-width: 90em)
{body{width:65%;}
.portfolio_content img {width: 90%;} 
.portfolio_content iframe {width: 90%;}
.portfolio_content  {width: 100%;}}


@media only screen and (max-width: 87em)
{body{width:65%;}
.portfolio_content img {width: 97%;} 
.portfolio_content iframe {width: 97%;}
.portfolio_content  {width: 90%;
	margin: 2em;}}



@media only screen and (max-width: 85em)
{body{width:100%;}
.portfolio_content  {width: 100%; }
.portfolio_content img {width: 55%;} 
.portfolio_content iframe {max-width: 50%;height: 98%;}
.navigation {width:100%;}}


*/

@media only screen and (max-width: 105em)
{body{width:100%;}
.portfolio_content  {width: 100%; }
.portfolio_content iframe {max-width: 68%;}
.navigation {width:100%;}}






@media only screen and (max-width: 85em)
{body{width:100%;}
.portfolio_content img {width: 98%;} 
.withvideo img {width: 80%; margin-bottom: 74%;} 
.withvideoright img {width: 65%; margin-bottom: 0.7%; margin-left: 0.38%;} 
.withvideoright iframe { margin-bottom: 74%;} 
.portfolio_content iframe {max-width: 82em; height: 43em; }
.portfolio_content  {width: 40%;}
.navigation {font-size: 1.2em;}
.edytorname {font-size: 1.2em;}
.mainmenu {font-size: 1.2em;}
.stopka {font-size: 1.2em;}
.about {font-size: 1.7em;
padding-left: 20%;
padding-right: 18%;}



@media only screen and (max-width: 63em)
{body{width:100%;}
.portfolio_content img {width: 98%;} 
.withvideo img {width: 98%; margin-bottom: 74%;} 
.withvideoright img {width: 98%; margin-bottom: 0.7%; margin-left: 0.38%;} 
.withvideoright iframe { margin-bottom: 74%;} 
.portfolio_content iframe {max-width: 82em; height: 57em; }
.portfolio_content  {width: 88%;}
.navigation {font-size: 3em;}
.edytorname {font-size: 3em;}
.mainmenu {font-size: 3em;}
.stopka {font-size: 3em;}
.about {font-size: 3em;}