*{
    margin: 0;
    padding: 0;
}
#header {
    font-style: italic;
    font-style: normal;
    float: left;
    font-family: 'Ubuntu', sans-serif;
    border: 5px outset black;
    width: 14%;
    font-size: 30px;
    margin-left: 15%;
    margin-top: 1%;
    color: rgb(82, 75, 75);
    text-align: center;
}

#content {
    margin-left: 36.5%;
    background-color: black; 
}
.men1{
    width: 140px; 
    background-color: white;
    }
.men2{
    width: 100px; 
    background-color: white;
}
ul {

    list-style: none;
 
}
ul li {
    position:relative;
    float:left;
    width: 300px;
    height: 60px;
    background-color:white;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
    text-decoration: none;
    margin-top: 0%;
}
ul ul {
    position: absolute;
    top:95%;
    right: 0px;
    display: none ;
    }
    ul li:hover > ul {
        display: block;
     }
     #n1 {
        z-index: 3;
        }
        #n2{
            z-index: 2;
        }

#footer {
    clear: both;
    color: white;
    font-family: 'Ubuntu', sans-serif;
    background-color: rgb(34, 33, 33);
    padding: 2%;
}
#f1 {
    float: left;
    margin-left: 10%;
    font-size: 20px;
    margin-top: -1%;
}
#f2 {
    float:left;
    margin-left: 17%;
    font-size: 30px;
    margin-top: -1%;
}
#f3 {
    margin-left: 75%;
    font-size: 20px;
    margin-top: -1%;
}

@media   (max-width: 1481px) {
    #header{
        width: 10%;
        margin-left: 10%;
        display: inline-block;
        font-size: 20px;
        text-align: center;
    }
        #content {
        margin-left: 25%;
	}
    #f2 {
        margin-left: 9%;}
}
    @media   (max-width: 1258px) {
        /* MENU GŁÓWNE */
        #content {
            margin-left: 19%;
        }

        #header {
            margin-left: 5%;
    }
     #f2 {
        margin-left: 8%;
     } 
}

    @media   (max-width: 952px) {
        #header {
            width: 15%;
    } 
    #content {
        width: 15%;
        font-size: 15px;
        margin-left: 40%;
    }
    #f3 {
        width: 40%;
        margin-left: 60%;
    }
    #f2 {
        margin-left: 3%;
        width:  45%;
    }
    #f1 {
        width: 20%;
    }
}
        @media   (max-width: 602px) {
            /* MENU GŁÓWNE */
         ul li{

            font-size: 20px;
            margin-left: -40%;
         }
         #n1{
            margin-left: -39%;
         }
         #n2{
            margin-left: -26%;
         }
         .men2{
             margin-left: -20%;
         }
         .men1{
             margin-left: 3%;
         }
         #header{
            width: 20%;
         }
         #f3 {
           font-size: 10px;
        }
        #f2 {
            font-size: 17px;
            margin-left: -4%;
            padding-left: 5px;
            padding-right: 5px;
        }
        #f1 {
            font-size: 10px;
            margin-left: 10%;
        }
        }
        @media (max-width:388px) {
        #f1 {
            margin-left: 5%;
        }
        #f2 { 
            margin-left: 5%;
            width: 45%;
            font-size: 15px;
        }
    }
    @media (max-width:414px) {
        /* MENU GŁÓWNE */
           ul li {
            margin-left: -10%;
            font-size: 18px;
           }
           #content{
               margin-left: 10%;
           }
           #header{
               width: 50%;
               margin-left:23%;
               margin-top: 3%;
           }
        }
.div1{
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
    float: left;
    width: 40%;
    margin-left: 15%;
    margin-top: 3%;
    margin-bottom: 12%;
}
a:link{
    color: black;
}
a:visited{
    color: black;
}
.p1{
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 1%;
    margin-top: 1%;
    font-size: 40px;
}
.div2{
    margin-top: 8px;
    margin-bottom: 8px;
}
.div3{
    margin-bottom: -25px;
}
.zdjecie{
    float: right;
    min-width: 400px;
    min-height: 250px;
    width: 32%;
    margin-right: 10%;
    margin-top: 8%;
}
@media (min-width:0px) and (max-width:1160px){
    .zdjecie{
    float: left;
    min-width: 260px;
    min-height: 150px;
    height: 40%;
    width: 80%;
    margin-top: 20px;
    margin-left: 10%;
    margin-bottom: 20px;
    }
}
@media (min-width:0px) and (max-width:1160px){
    .div1{
        width: 80%;
        margin-right: 10%;
        margin-left: 10%;
        font-size: 20px;
    }
}