@import url(reset.css);
@import url(ramka.css);
 /*<div class="hoverme">
        

        <a class="menu" href="#"></a>

        <header class="dropdown-content">
            <nav>
                <ul>
                    <li><a href="index.php">Strona główna</a></li>
                    <li><a href="omnie.php">O mnie</a></li>
                    <li><a href="Oferta.php">Oferta</a></li>
                    <li><a href="kontakt.php">Kontakt</a></li>
                </ul>
            </nav>
        </header>
    </div> wyciete z body index*/ 
html {
    font-size: 62.5%;
    font-family: 'Raleway', serif;
    color: white;
    
    /*background-size: cover;    
    height: 100vh;*/
}
body{
    
    /*background-image: url(x);background-repeat: no-repeat;
    background-size: cover;*/
}
h1 {
    font-size: 4rem;
    font-style: italic;
    font-weight: bold;
    padding: 1rem;
    
}
h2 {
    font-size: 3.5rem;
    font-weight: bold;
    padding: 1rem;
}
h3 {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    padding-bottom: 5rem;
    margin-top: -5rem;  
    
}

h4 {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    padding: 2rem;
    /*usune to jesli nie potrzebne height: 8rem;*/
}
h5{
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    
}
p{
    font-size: 3rem;
    line-height: 4rem;
    text-indent: 7rem;
    padding: 4rem;
    text-align: left; 
    }
.stronaoferta1 {
    font-size: 2.5rem;
    line-height: 3rem;
    text-indent: 1rem; 
}
.firstlogo{
     /* zmieniłem z inline-block*/
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    
}
.trawa{
    background-image: url(trawa1.jpg);
    background-position: center ;    
    height: 40rem;
}
.trawa p{
    text-align: center;
    color: #fff;
    padding-top: 12.5%;
}
.kwiatomnie{
    background-image: url(kwiatomnie.jpg);
    background-position: center ;    
    height: 40rem;
}
.kwiatomnie p{
    text-align: center;
    color: #dec5c5;
    padding-top: 12.5%;
}
.drzewooferta{
    background-image: url(drzewooferta.jpg);
    background-position: center ;    
    height: 40rem;
}
.drzewooferta p{
    text-align: center;
    color: #fff;
    padding-top: 12.5%;
}
.podkladkontakt{
    background-image: url(kwiatekkontakt.jpg);
    background-position: center;    
    height: 40rem;
}
.podkladkontakt p{
    text-align: center;
    color: #dec5c5;
    padding-top: 12.5%;
}

.drugicytat{
    display: inline-block;
        
    padding-bottom: 5%;
}
p.drugicytat{
    text-align: left;
    position: relative;
    
    
    
}
div blockquote.cytat{padding: 10% 12.5%;}
.drugicytat
    {
    line-height: 5rem;
    font-size: 3rem;
    }
blockquote p
    {
    text-indent: 0rem;
    font-size: 2.5rem;
    line-height: 5rem;
    }
h2.stronaoferta{
    text-align: center;
    padding: 5rem 4rem 3rem 4rem;    
    /*background: none color="#cccccc";*/
        
}
.opis{
    text-indent: 0;
    padding: 3% 10%;
    font-size: 2.5rem;
}
.oferta-listauporzadkowana  {
    font-size: 2.5rem;
    padding-left: 10%;
    line-height: 4rem;
}
.stronaofertalista{
    padding: 2% 10%;
}
.stronaofertalista li{
    font-size: 2.5rem;
    line-height: 5rem;
}
.omnie {
    text-align: left;
    padding-bottom: 0rem; 
    padding-left: 10%;
}
.drugastrona{
    padding-top: 5rem;
    margin-bottom: -8rem;
}
.pierwszafota   {
                float: right;
                width: 17%;
                padding: 10% 15% 5% 1%;  
                                }
.drugafota{
    float: right;
    width: 17%;
    padding: 10% 15% 5% 1%;    
}
.gabinet{
    text-align: center;
}
.gabinet img{    
    width: 40%;
    margin: 2%;
    border: 4px solid black;    
}
h2.omnie{
    clear: both;
}
.oferta{
    text-align: center;
    padding: 1rem 6rem 10rem 6rem;
    
}
.kolumna{
    column-count: 3;
    column-gap: 5%;
    text-align: center;
    
}
.oferta1{    text-decoration: none;
        
}
.oferta1 p{
    text-indent: 0;
    text-align: center;  
   
}
.kontakt{
    text-align: left;
    padding: 5%; 
}
.front{
    background: #DDB6B6;/*#e79d9d;*/
    column-count: 2;
    column-gap: 45%;
    font-family: 'Poppins', serif;   
}
.front .oferta1 p{
    text-align: left;
    line-height: 2rem;
    font-size: 2rem;
    padding: 2rem 0rem 0rem 0rem;
}

.stopka{
    clear: both;
    background: #f5d2bd;
    font-family: 'Poppins', serif;
}
.stopka2{
    column-count: 2;
    column-gap: 25%;
    font-size: 2.5rem;
    line-height: 4rem;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

footer p {   font-size: 2rem; color: #d4d4d3; text-align: right; line-height: 2rem; padding: 2rem 2rem 3rem;}
footer{    
    bottom: 0;
    right: 0;
      
    background: #cc9090;
}
/* LoVe HAte nieodwiedzony link */
a:link {
    color: black;
}

/* odwiedzony link */
a:visited {
    color: #09094f;
}

/* po najechaniu */
a:hover {
    color: #d11111;
}

/* aktywny */
a:active {
    color: #15a9b2;
}
.header2-pozmianach{
    
}
/*header {
    display: none;
    position: fixed;
    background: rgba(193,196,211,0.3);
    color: #fff;
    height: 40rem;
    padding: 5rem;    
    border-radius: 5rem;
    z-index: 9999;
}
nav {
    float: right;
}
nav li {
    text-align: left;
    background:  right no-repeat;
    font-size: 2.5rem;
    padding-right: 2rem;
    line-height: 8rem;
    margin: 1.5rem;    
}
.dropdown-content{
    width: 15%;    
}*/
.dropdown-content2{
    
    font-size: 2.5rem;
    text-align: left;
    padding-bottom: 5rem;
         
    }
.dropdown-content2 a{
    
    font-family: 'Poppins' , serif;
    max-width: 20%;
    padding-left: 8%;
    line-height: 10rem;
    text-decoration: none;
    
    
}
.dropdown-content2 img{
    margin-bottom: -3rem;
    
}
.poczta{
      
    
    }
.poczta2{
      
    
}
.poczta2 p{
    font-size: 2rem;
    line-height: 2rem; 
    
}
form{    
    float: left;
    margin-left: 3%;
    padding-bottom: 10%;
    margin-right: 14%;
    margin-top: 3%;
}

textarea {
    width: 40rem;
    height: 16rem;
    /*background: none;*/
    border: 2px black solid;
    
    color: #000;
    font-size: 2rem;
}
button {
    display: block;
    background: #bcb6ce;
    /*border: none;*/
    padding: 3rem 3rem;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 2rem;
    cursor: pointer;
    
}
.menu {
    background: url(menu.svg) center no-repeat;
    background-size: contain;
    padding: 1rem;
    margin: 1rem;
    height: 3.5rem;
    position: fixed;
    width: 3.5rem;
    right: 1rem;
    opacity: 0.5;
    z-index: 9999;
    }
/*.hoverme:hover header {
    display: block;
    right: 1.5rem;
    top: 1.5rem;
    
}*/
.ukrytemenu{
    display: none;
}

section {
   /* position: absolute;
    left: 5%;
    min-width: 300px;
    max-width: 800px;
    margin-top: 80rem;
    font-size: 2rem;
    margin-bottom: 20rem;*/
    
}
  /* stara wartość 1280px
section {
        width: 50%;
        position: absolute;
        left: 5%;
    }*/
@media all and (min-width: 1500px) {
    div.trawa {
        
        background-repeat: no-repeat;
    }
    .kwiatomnie{
        background-repeat: no-repeat;
    }
    .drzewooferta{
        background-repeat: no-repeat;
    }
    .swiecakontakt{
        background-repeat: no-repeat;
    }
    .header2-pozmianach{
        text-align: center;
    }
    .drugafota{
    float: right;
    width: 15%;
    padding: 5% 15% 5% 1%;    
    }
}
@media all and (max-width: 1100px) {
    .pierwszafota{
        float: none;
        padding-top: 10%;
        padding-left: 35%;
        width: 25%;
                
    }
    .drugafota{
        width:25%;
    }
    .drugicytat
    {
    line-height: 4rem;
    font-size: 2.5rem;
    margin-left: 2rem;
    }
    div blockquote.cytat{
        padding: 0;
    }
    .gabinet img{
        display: block;
        width: 95%;
        margin-left: 2%;
    }
    .oferta{
        padding-bottom: 2rem;
    }
    .stopka2{
        column-count: 1;
    }
    .dropdown-content2{
        display: none;
    }
    .ukrytemenu{
        display: block;
        
    }
    .firstlogo{
        display: inline;
     /* zmieniłem z inline-block*/
    padding: 3% 2%;
        
        }   
    .hoverme:hover header {
    display: block;
    right: 1.5rem;
    top: 2.5rem;
    
    }
    header {
        display: none;
        position: fixed;
        background: rgba(236,206,206,0.3);
        color: black;
        height: 15rem;
        padding: 3rem 5rem 12rem 5rem;    
        border-radius: 5rem;
        z-index: 9999;
        text-align: left;
        
        }
    nav {
        float: /*right*/;
        
        
        }
    nav li {
        font-size: 1.5rem;
        /*pad8ding-right: 2rem;*/
        line-height: 6rem;
        

        }
    .menu {
    background: url(menu.svg) center no-repeat;
    background-size: contain;
    padding: 1rem;
    margin: 1rem;
    height: 3rem;
    position: fixed;
    width: 3.5rem;
    right: 1rem;
    opacity: 0.5;
    z-index: 9999;
    }
    
.dropdown-content{
    width: 12rem;
    font-family: 'Poppins', serif;
    
}
    .poczta2{
        clear: both;
        
            }
    .poczta2 p{
        text-indent: 0;
    }
    
}
@media all and (max-width: 903px) {
        .kolumna{
            column-count: 1;
            text-align: right;
            
        }
        .gabinet img{
        display: block;
        width: 95%;
        margin-left: 2%;
        }
        .drugicytat
        {
        line-height: 3rem;
        font-size: 2rem;
        margin-left: 2rem;
        }
        .front{
            column-count: 1;
        }
        .kolumna img{
            display: none;
                    }
        .kolumna p{
            background: url(lisc.png) left no-repeat;           
            
        }
    .podkladkontakt{      
    height: 25rem;
}
    .podkladkontakt p{
        text-align: center;  
        padding-top: ;
    }
    .trawa{    
    height: 25rem;
    }
    .trawa p{
        text-align: center;
        padding-top: ;
    }
    .kwiatomnie{
        height: 25rem;
    }
    .kwiatomnie p{
        text-align: center;
        padding-top: ;
    }
    .drzewooferta{   
        height: 25rem;
    }
    .drzewooferta p{
        text-align: center;
        padding-top: ;
    }
    }   
@media all and (max-width: 755px){
        .gabinet img{
         
        width: 93%;
        text-align: center;
        margin: 3%;
    }
}
 @media all and (max-width: /*420px*/570px){
     form{
         margin-left: 5%;
     }
     textarea{
         width: 20rem;
     }
     .gabinet img{
         
        width: 88%;
        text-align: center;
        margin-left: 5%;
    }
    .menu {
    
    padding: 1rem;
    margin: 1rem;
    height: 2rem;
    position: fixed;
    width: 2.5rem;
    right: 1rem;
    opacity: 0.5;
    z-index: 9999;
    }
     .podkladkontakt p{
         font-size: 2rem;
         text-align: left;
         text-indent: 0;
     }
     .trawa p{
         font-size: 2rem;
         text-align: left;
         text-indent: 0;
     }
     .kwiatomnie p{
         font-size: 2rem;
         text-align: left;
         text-indent: 0;
     }
     .drzewooferta p{
         font-size: 2rem;
         text-align: left;
         text-indent: 0;
     }
     .front .oferta1 p{
         font-size: 1.5rem;
     }
     .stopka2{
         font-size: 1.5rem;
     }
     .poczta2 p{
         font-size: 1.5rem;
     }
     h2{
         font-size: 2.5rem;
     }
     h4{
         font-size: 2.5rem;
     }
     p{
         font-size: 2.5rem;
     }
     footer p{
         font-size: 1.5rem;
     }
     button {
    
    padding: 2rem 2rem;
    font-size: 1.5rem;
    
     }
     
     .stronaofertalista li{
         font-size: 2rem;
     }
     .oferta-listauporzadkowana{
         font-size: 2rem;
     }
     .opis{
         font-size: 2rem;
     }
     blockquote p{
         font-size: 2rem;
     }
     .stronaoferta1 {
         font-size: 2rem;
     }
    }