﻿body {
  padding; 0;
  margin: 0;
  overflow: hidden;
  background: #696e9e;
    background-image: url(../background/tlo3.png);
    font-family: 'Montserrat', sans-serif;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.upsite {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  height: 20px;
  width: 100%;
  background: #3d3d3d;
}

.side-menu-trigger {
  border: 0;
  border-radius: 5px;
  background: none;
    position: absolute;
    top: 3%;
    right: -16.5%;
  
}

.side-menu {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 15%;
  top: 80px;
  right: -300px;
  padding: 0;
  background: #414141;
  transition: 0.3s transform ease-in-out;
}

.side-menu ul {
  position: absolute;
  display: flex;
  height: calc(100% - 20px);
  flex-wrap: wrap;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  align-content: flex-start
}

.side-menu ul li {
  display: flex;
  height: 5%;
  background: #ececec;
  flex-basis: 100%;
  margin-top: 10px;
  color: #696e9e;
  border-radius: 5px;
  overflow: hidden;
  font-size: 1.7vh;
  font-weight: bold;
  
  
}

.side-menu ul li a {
  display: flex;
  padding: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #ececec;
  text-decoration: none;
  box-sizing: border-box;
}

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
  transform: translateX(-300px); 
}
#test {
    color: wheat;
    
    
}
.domek {
   border: 0;
  border-radius: 5px;
  background: none;
    position: absolute;
    top: 1.5%;
    left: 4%;
  
}
.domek {
        opacity:0.5;
        background-color:white;
      }

.text-upsite {
 text-align: center;
 position: absolute;
 left: 33%;
 top: 3%;
    font-size: 3vh;
    font-weight: bold;
    color: white;
    
}
.center {
    position: absolute;
    left:30%;
   top: 15%;
  padding: 2%;
  height: 50%;
  width: 35%;
  background-color: none;
   border-radius: 5px; 
 background-repeat: no-repeat;
  background-size: 90% 100%;
     
}  








#tpn {
    margin: auto auto auto auto;
}
#paintball {
    margin: 50% 60% 50% 40%;
}
#sklep {
    margin: auto 58% auto 42%;
    
}
#onas {
    margin: auto 38% auto auto;
}








.side-menu a:link {
     font-size: 1.7vh;
  font-weight: bold;
    color: #9933cc;
  
}

.side-menu a:visited {
    font-size: 1.7vh;
  font-weight: bold;
    color: #9933cc;
    
}
.side-menu a:active {
    font-size: 1.7vh;
  font-weight: bold;
    color: #3299CC;
   
}
    

.side-menu a:hover {
    font-size: 1.7vh;
  font-weight: bold;
    color: #3299CC;
    
}


#tpn a:link {
     font-size: 1.7vh;
  font-weight: bold;
    color: #009933;
   
}

#tpn a:visited {
    font-size: 1.7vh;
  font-weight: bold;
    color: #009933;
    
}

#tpn a:active {
    font-size: 1.7vh;
  font-weight: bold;
    color: #33cc66;
   
}
#tpn a:hover {
    font-size: 1.7vh;
  font-weight: bold;
    color: #33cc66;
    
}



#sklep a:link {
     font-size: 1.7vh;
  font-weight: bold;
    color: red;
   
}

#sklep a:visited {
    font-size: 1.7vh;
  font-weight: bold;
    color: red;
    
}

#sklep a:active {
    font-size: 1.7vh;
  font-weight: bold; 
    color: #cc0000;
   
}
#sklep a:hover {
    font-size: 1.7vh;
  font-weight: bold;
    color: #cc0000;
    
}



#cv2 {
    font-weight: bold;
    font-size: 3vh;
    text-align: center;
    left: 35%;
    top: 0%;
    position: absolute;
    color: #ff6600;
    margin: 0px auto;
    
    
    
    
    
    
}
.map {
     position: absolute;
    text-align: center;
     top: 15%;
    left: 41.5%;
    width: 20%;
    height: 18%;
     
}

.map {
    transition-duration: 0.4s;
    margin: 0 auto;
    display: block;
}
.map:hover {
    transform: scale(1.1);
    transform: scale(1.1);
    transform: scale(1.1);
    z-index: 0;
}

#linia {
    color: #414141;
    position: absolute;
    left: 59%;
    top: 25%;
}
#tekst{
    font-size: 1.5vh;
    font-weight: bold;
    
}























#duze_zdjecie { 
  border: solid 1px #ccc;
  width: 40%;
  height: 45;
  padding: 2%;
  top: 82%;
  left: 25%;
    position: absolute;
    

}

#miniaturka a {
  border: solid 1px #ccc;
  width: 10%;
  height: 20%;
  padding: 2%;
  margin: 1%;
  float: left;
}

#miniaturka a:hover {
  border-color: red;
}

#miniaturka li {
  list-style: none;
}

#miniaturka {
  margin: 0;
  padding: 0;
}

#miniaturka img {
  width: 80%;
  height: 80%;
}


#galeria {
    position: absolute;
    left: 22.5%;
    top: 128%;
}
#zdjecie {
   position: absolute;
    top: 40%;
    left: 5%;
    height: 50%;
    width: 50%;
    
    
}
#justify {
    text-align: justify;
    width: 35%;
    height: 50%;
}

.logo {
    position: absolute;
    text-align: center;
    height: 70%;
    width: 70%;
    left: 15%;
    top: 30%;
    
}

#podnaglowek {
    font-weight: bold;
    color: white;
    font-size: 2vh;
    text-align: center;
    margin: 1% auto;
}

.usluga1 {
    position: absolute;
    left: 32%;
    top: 22%;
    height: 45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga1{
     font-size: 1.5vh;
    font-weight: bold; 
}
.usluga2 {
    position: absolute;
    left: 52%;
    top: 22%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga2{
     font-size: 1.5vh;
    font-weight: bold; 
}
.usluga3 {
    position: absolute;
    left: 32%;
    top: 36%;
    height: 45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga3{
     font-size: 1.5vh;
    font-weight: bold; 
}
.usluga4 {
    position: absolute;
    left: 52%;
    top: 36%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga4{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga5 {
    position: absolute;
    left: 32%;
    top: 50%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga5{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga6 {
    position: absolute;
    left: 52%;
    top: 50%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga6{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga7 {
    position: absolute;
    left: 32%;
    top: 64%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga7{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga8 {
    position: absolute;
    left: 52%;
    top: 64%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga8{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga9 {
    position: absolute;
    left: 32%;
    top: 78%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga9{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga10 {
    position: absolute;
    left: 52%;
    top: 78%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga10{
     font-size: 1.5vh;
    font-weight: bold; 
}


.usluga11 {
    position: absolute;
    left: 32%;
    top: 92%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga11{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga12 {
    position: absolute;
    left: 52%;
    top: 92%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga12{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga13 {
    position: absolute;
    left: 32%;
    top: 106%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga13{
     font-size: 1.5vh;
    font-weight: bold; 
}

.usluga14 {
    position: absolute;
    left: 52%;
    top: 106%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga14{
     font-size: 1.5vh;
    font-weight: bold; 
}


.usluga15 {
    position: absolute;
    left: 42%;
    top: 122%;
    height:  45%;
    width: 20%;
     font-size: 1.5vh;
    font-weight: bold;
}
.obrazusluga15{
     font-size: 1.5vh;
    font-weight: bold; 
}


#pole1 {
    position: absolute;
    left:39%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
    
}

#pole11 {
     position: absolute;
    left:41.5%;
    top:27.5%;
     font-size: 1.5vh;
    font-weight: bold; 
}

#pole2 {
    position:absolute;
    left:46.5%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole22 {
     position: absolute;
    left:49%;
    top:27.5%;
     font-size: 1.5vh;
    font-weight: bold; 
}


#pole3 {
    position:absolute;
    left:55%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole33 {
     position: absolute;
    left:57.5%;
    top:27.5%;
     font-size: 2vh;
    font-weight: bold; 
}


.center1 {
    position: absolute;
    left:30%;
   top: 30%;
  padding: 2%;
  height: 50%;
  width: 35%;
  background-color: none;
   border-radius: 5px; 
 background-repeat: no-repeat;
  background-size: 90% 100%;
     
}  


#podnaglowek1 {
    font-weight: bold;
    color: white;
    font-size: 2vh;
    text-align: center;
    margin: 1% auto;
}

#pole4 {
    position: absolute;
    left:5%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
    
}

#pole44 {
      position: absolute;
    left:18%;
    top:30%;
     font-size: 1.5vh;
    font-weight: bold; 
}

#pole5 {
    position:absolute;
    left:38%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole55{
     position: absolute;
    left:50%;
    top:30%;
     font-size: 1.5vh;
    font-weight: bold; 
}


#pole6 {
    position:absolute;
    left:71%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole66 {
     position: absolute;
    left:80%;
    top:29.5%;
     font-size: 2vh;
    font-weight: bold; 
}

.center2 {
    position: absolute;
    left:30%;
   top: 50%;
  padding: 2%;
  height: 50%;
  width: 35%;
  background-color: none;
   border-radius: 5px; 
 background-repeat: no-repeat;
  background-size: 90% 100%;
     
}  

#pole7 {
    position: absolute;
    left:39%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
    
}

#pole77 {
      position: absolute;
    left:40%;
    top:30%;
     font-size: 1.5vh;
    font-weight: bold; 
}

#pole8 {
    position:absolute;
    left:46.5%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole88{
     position: absolute;
    left:48%;
    top:30%;
     font-size: 1.5vh;
    font-weight: bold; 
}


#pole9 {
    position:absolute;
    left:55%;
    top:25%;
     font-size: 2vh;
    font-weight: bold; 
}

#pole99 {
     position: absolute;
    left:57%;
    top:30%;
     font-size: 2vh;
    font-weight: bold; 
}
.center3 {
    position: absolute;
    left:30%;
   top: 70%;
  padding: 2%;
  height: 50%;
  width: 35%;
  background-color: none;
   border-radius: 5px; 
 background-repeat: no-repeat;
  background-size: 90% 100%;
     
}  

#podnaglowek2 {
    font-weight: bold;
    color: white;
    font-size: 2vh;
    text-align: center;
    margin: 1% auto;
}
#imie {
    position: absolute;
    left:15.5%;
    top: 16%;
    height: 2%;
    width: 20%;
    
}
#wiek {
   position: absolute;
    left:15.5%;
    top: 28%;
    height: 2%;
    width: 20%; 

}
#nazwisko {
    position: absolute;
    left:15.5%;
    top: 22%;
    height: 2%;
    width: 20%;  
    
}
#text1 {
    font-size: 1.5vh;
     font-weight: bold;
}
#przycisk {
    position: absolute;
    left: 45%;
    top: 40%;
    height: 5%;
    width: 10%;
    font-size: 1.4vh;
     font-weight: bold;
    color: #ff6000;
}
#ubezpieczenie {
    position: absolute;
    left: 20%;
    top: 38%;
}