@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  padding: 0px; 
  margin: 0px;
}
#menu {
  background-color: #eee;
  height: 2%;  
  height: 2vw;
  
}
#menu ul {
  height: 63%; 
  width: 63vw;
  list-style-type: none;
  font-size: 1.5%;
  font-size: 1.5vw;
  font-family: 'Source Sans Pro';
  font-weight: 900;
  color: #666;
  margin: 0 50%;
  transform:translate(-18%, 0); 
  transform:translate(-18vw, 0); 
}
#menu li {
  cursor: pointer;
  float: left;
  padding: 0.1% 1.3%;  
  padding: 0.1vw 1.3vw;
  color: #666;
}
#menu li a {
  text-decoration: none;
  color: #666;
  }
#menu li:hover {
  background-color: #666;
  color: #eee;
}
#menu li a:hover {
  text-decoration: none;
  color: #eee;
  }
#menu ul::after {
  clear: both;
}
#main {
  position: absolute;
  width: 100vw;
  height: 96vh; 
  //background: #4e8eba url("tlo.jpg") no-repeat;
  background: #4e8eba no-repeat;
  background-position: top center;
  overflow: hidden;
}
#main_all {
  position: absolute;
  width: 100vw;
  height: 8vw; 
  background: #4e8eba no-repeat;
  background-position: top center;
  overflow: hidden;
  margin: 0 0;
}
#main_wysr {
  width: 63vw;
  font-size: 5vw;
  font-family: 'Source Sans Pro';
  font-weight: 800;
  color: #eee;
  margin: 10vw 50% 0vw 50%;
  transform:translate(-50%, 0);
}
#glownyTytul {
  letter-spacing: 0.3vw;
  width: 63vw;
  font-size: 4vw;
  font-family: 'Source Sans Pro';
  font-weight: 800;
  color: #eee;
  margin: 0vw 50% 0vw 50%;
  transform:translate(-50%, 0);
}
#glownyTytul::first-letter {
  font-size: 5.5vw;
}
#fotka-cien {
  position: absolute;
  left: 44.3vw;
  top: -5vw;
  width: 9.5vw;
  height: 9vw;
  border-radius: 50%;
  -webkit-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  -moz-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  box-shadow: 0.4vw 0.5vw 0.8vw 0px rgba(0,0,0,0.75);
}
#fotka {
  position: absolute;
  left: 44vw;
  top: -6vw;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border: solid #4e8eba 0.3vw;
}
img#mojafotka {
  width: 100%;
  height: 100%;
  background-color: #4e8eba;
  border-radius: 50%; 
}
#wizytowka {
  background-image: url("paper.png");
  position: relative;
  width: 63vw;
  height: 33vw;
  background-color: #ffffff; 
  -webkit-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  -moz-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  margin: 8vw 50% 0vw 50%;
  transform:translate(-50%, 0);
  border: 0px;  
  display:inline-block;
  //overflow: hidden;
}
#wizytowkaPion {
  background-image: url("paper.png");
  position: relative;
  width: 63vw;
  height: 102vw;
  background-color: #ffffff; 
  -webkit-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  -moz-box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.46);
  margin: 8vw 50% 0vw 50%;
  transform:translate(-50%, 0);
  border: 0px;  
  display:inline-block;
  //overflow: hidden;
} 
#lewo {
  height: 100%;
  width: 30vw;
  float: left;
}
#lewoPion {
  height: 20vw;
  width: 63vw;
  //float: left;
}
#lewo img {
  width: 15vw;
  margin: 50% 50%;
  transform:translate(-50%, -15%);  
}
#lewoPion img {
  width: 26vw;
  margin: 0 50%;
  transform:translate(-50%, 18vw);
  

}
#prawo {
  font-size: 2vw;
  font-family: 'Source Sans Pro';
  color: #666;
}
#prawo #imie {
  font-size: 3vw;
  font-weight: 900;
  margin-top: 9vw;
  margin-bottom: 1.5vw;
}
#prawoPion {
  width: 50vw;
  font-size: 4vw;
  font-family: 'Source Sans Pro';
  color: #666;
  margin: 0 50%;
  transform:translate(-50%, 20vw);
}
#prawoPion #imie {
  font-size: 6vw;
  font-weight: 900;
  margin-top: 9vw;
  margin-bottom: 1.5vw;
}

#prawo .dane_margin {
  margin-top: 1.5vw
}
#prawo .dane img, #prawo .dane_margin img {
  width: 1.4vw;
}
#prawoPion .dane_margin {
  margin-top: 3vw;
}
#prawoPion .dane img, #prawoPion .dane_margin img {
  margin-top: 0.3vw;
  width: 3vw;
}
#prawo::after {
  clear: both;
}

.tytul_dzialu {
    font-family: 'Source Sans Pro';
    font-weight: 900;
    font-size: 3vw; 
    color: #A5C5D5;
    margin: 2vw 0 1vw 0;
}
.dzial {
    font-family: 'Roboto';
}
.expwhen {width: 8vw; font-size: 1.5vw;}
.expwhere {font-size: 1.5vw;}
.expAs {color: #6585f5; font-size: 1.5vw;}
.expAbout { font-size: 1.2vw;}