@font-face {
  font-family: 'TCM';
    src: url(tcm.ttf);
}
@font-face {
  font-family: 'TCM';
    src: url(tcm_b.ttf);
    font-weight: bold;

}

body{
  margin:0;
  font-family: 'TCM';
  background-color: white;
  color: black;
}
.text{
  font-size: 4.5vh;
  color: black;
  top:30%;
  left: 3%;
  position: absolute;
}
#stopka{
  width:80%;
  height: 10%;
  left:10%;
  right: 10%;
  position: absolute;
bottom:5%;
}
.fb{
  margin-left: 50%;
margin-bottom: 20%;
margin-top: 20%;
}
.omnie{
 margin-top: 5%;
 margin-bottom: 5%;
  margin-right: 5%;
  
}

#main_kontener{
  width: 96%;
  margin-left: 2%;
}

#kontener2{
/*margin-left: 28%;
*/}
#kontener3{
margin-top: 3%;


}

#kontener4{
/*  border-top: groove #ABABAB  ;
*//*margin-top: 3%;
margin-left:5%;
width: 90%;*/


}
#kontener5{
  width: 94%;
  margin-left:3%;
  margin-top:3%;
}
.kontenery{
/*color: white;
*/margin-top: 1%; 
/*margin-left: 15%;
margin-right: 15%;*/
}
#kontenerKONTAKT{
width:30%;
float: left;
margin-left: 25%;

}
#kontenerKONTAKT2{
width:30%;
/*float: left;
*/margin-left: 45%;


}
#kontenerKONTAKT_main{
  /* border-top: groove #383838  ;
margin-top: 3%;
width: 70%;
margin-left: 15%;
margin-right: 15%;
*/
}
@media screen and (min-width: 560px) {
#kontenerPORTFOLIO{
  width:80%;
  
  left:10%;
  right: 10%;
  position: absolute;
  background-color: #E8E8E8;
  margin-bottom: 5%;
}}
.galeria{
  position: relative;
  margin-top:2%;
  margin-bottom: 2%;
}
/*@media screen and (min-width: 480px) {
.galeria1{
  width:50%;

}}*/
#galeria1{
  z-index: 2;
}
@media screen and (min-width: 480px) {
.zdjecie{
  width:70%;
  margin-left:15%;
  margin-right:15%;
}
}
.naglowek{
opacity: 0.8;
/*color: white;*/
}
/*.tresc{
color:white;
}*/

#tekstOMNIE{

  margin-left: 5%;
  margin-right: 5%;
}
.tekst{
  text-align: center;
}
.tekst1{
  font-size: 3vh;
  margin-left: 5%;
  margin-right: 5%;
  text-align: justify;
}
#tytul{
  text-align: center;
  font-size: 30;
/*  color:black;
*/  margin-top: 3%;
  letter-spacing: 3;
  opacity: 1;
    text-decoration: none;

}
#opis{
  text-align: center;
 /* color: black;*/
  letter-spacing: 3;
}
#opis_galerii{
  margin-top: 1%;
  text-align: center;
  font-size: 3vh;
}


.nav ul {
  list-style: none;
/*  background-color: white;
*/  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'TCM';
  font-size: 1.0em;
  line-height: 40px;
  text-align: left;
}

.nav a {
   opacity:0.7;
  text-decoration: none;
  display: block;
  padding-left: 15px;
  border-bottom: 1px ;
  transition: .3s background-color;
  color: black;
}

.nav a:hover {
  opacity:1;
}

/*.nav a.active {
  background-color: black;
  color: white;
  cursor: pointer;
}*/

/* Sub Menus */
.nav li li {
  font-size: .8em;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}
.galerie{
  margin: 3%;
}
.galerie:hover{
  opacity: 0.8;

}
.kwadrat{
    position: absolute;
    z-index: 5;
    width: 24.7%;
    height: 20%;
    opacity: 0.6;
    background-color: gray;
    top: 75%;
    left: 0.2%;
}