@media (max-width:1100px){

    header nav li a{
        display: block;
        }
    .flex-container{
        width:100vw;}
    .container { 
            width:100%
        }
    .middle p.text{
        font-size: 2.5rem;}
    .article h1{
        font-size: 1.2rem
    }
    .article p{
        font-size: 0.8rem}
    .banner1{
        width:100%-10px;
    }
    form{
        width:100vw;
    }
    form div.personal{
        height:50vh;}
    form div.name{
        margin:auto;
        width: 50%;}
    form div.email{
        width:80%;
        margin:auto;
        display: block;}
    form textarea{
        width:80%;}
    #sendbutton{
        width:60vw;
    }
    
}

@media (min-width:1100px){
    header nav li{
        display: inline;}
    header nav a{
        margin:20px 5px 5px 5px;
        }
    .flex-container{
        width:80vw;}

    .container { 
        width:50%
    }
    .middle p.text{
        font-size: 2.3rem;}
    .article{ width:100%;}
    .articles{width:80%}
    .article h1{
        font-size: 1.6rem
    }
    .article p{
        font-size: 0.8rem}
    .banner1{
        width:80%;
    }
    form{
        width:80vw;
    }
    form div.personal{
        height:100px;}
    form div.name{
        float: left;
        width: 22.5%;}
    form div.email{
        float:left;
        width:40%;
    display: block;}
    form textarea{
        width:50%;
    }
    #sendbutton{
        width:20vw;}

}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    color: #444;
    text-align: center;
    background-color:hsla(0, 10%, 90%, 1);
    }
header{
    z-index: 1;
    position: fixed;
    width:100%;
    left: 0;
    top: 0;
    display: block;
    background-color:#555;
    margin-bottom:50px;
    border: 1px solid black;
}
header nav ul{
    display: none;
    padding: 5px;
    width:initial;
    text-align: center;
    margin-block-start: 1.5em;
    
}

.icon{
    margin:auto;
    margin-block-start: 0.5em;
    margin-block-end: 0.3em;
}
.icon img{
    width:4vh;
    opacity: 90%;}

header nav li a{
    text-decoration: none;
    background-color: #444;
    padding: 10px 20px 5px 20px;
    color: #bbb;
    font-size: 16px;
    border:#444 solid 5px;
    border-radius: 5px;
    }

header nav li a:hover{
    color: #555;
    border:#80b280 solid 5px;
    background-color: #80b280
}
header nav li a.active{
    color: #f2f2f2;
    border:forestgreen solid 5px;
    background-color: forestgreen;
}
header nav li a.active:hover{
    color: #455a64;
    border:#80b280 solid 5px;
    
}

.firm{
    margin-top: 4rem;
    margin-bottom: 1rem;
    padding:1vh 0px;
    background: hsla(120, 30%, 75%, 1);
    font-weight:700;
    font-variant: small-caps;
}

.spacer150{
    margin-bottom:150px;
    width:100%;
}


.flex-container{
    display:flex;
    flex-wrap: wrap;
    margin:auto;
    margin-bottom: 15vh;
}
.container {
    position: relative;
    display: flex;
    margin: auto;
    }

.image {
    opacity: 50%;
    display: inline;
    width: 100%;
    transition:1.5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .85s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;

    
}
.container:hover .image {
    opacity: 0.1;
}
.container:hover .middle {
    opacity: 1;
}
.middle a{
    text-decoration:none;
    color:unset;}
.middle p.text{
    font-weight: 700;
    opacity:initial;
}

.fill-height-or-more {
    display: flex;
}
.fill-height-or-more {
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
    /* these are the flex items */
    flex: 1;
}
.area div{
    position: relative;
    padding: 20vh 0vh;

}
#izkaznica{
    background: hsla(120, 30%, 60%, 1)
}
#fizika{
    background: hsla(120, 30%, 65%, 1)
}
#subvencija{
    background: hsla(120, 30%, 70%, 1)
}
#phpp{
    background: hsla(120, 30%, 75%, 1)
}

/*.area { 
    > div {
        padding: 1rem;
        &:nth-child(1) {
        background: hsla(100, 50%, 60%, 1);
        }
        &:nth-child(2) {
        background: hsla(120, 50%, 65%, 1);
        }
        &:nth-child(3) {
        background: hsla(120, 50%, 70%, 1);
        }
        &:nth-child(4) {
        background: hsla(120, 50%, 75%, 1);
        }
        &:nth-child(5) {
        background: hsla(120, 50%, 80%, 1);
        }
        h1, h2 {
        margin: 0 0 0.2rem 0;
        }
        p {
        margin: 0;
    }}

    */

.posted{
    font-size: 15px;
    display:inline;
}
.date{
    font-size: 15px;
    font-weight: 600;
    display:inline;
}
.articles{
   
    margin:auto
}
article{ 
    margin-bottom: 30px;

    margin-left:20%;
    display: block;
    position: relative;
    
}
.article div{
    margin-bottom: 1rem;
    padding: 20px;
    display: block;
    text-align: justify;
    background: hsla(120, 50%, 90%, 1);
    border-color:  gray;
    border-width:5px ;
    border-style: groove;
}

.banner1{
    margin:auto;
    margin-bottom: 20px;
    background-color: #d0f0c0;
    border-color:  gray;
    border-width:5px ;
    border-style: solid;
    padding-bottom:20px;
}
.banner1 h1{
    font-size: 1.5em;
}
.banner1 h2{ 
    display: inline;
    font-size: 1.1em;
}
.banner1 h3{ 
    display: inline;
    font-size: 1.1em;
}
form{
    text-align: center;
    color: #ddd;
    margin:auto;
} 
form div.personal{
    margin:auto;
    margin-bottom: 30px;
    display:block;
    background-color: #669475;
    border-color:  gray;
    border-width:5px ;
    border-style: solid;
}
form div.subject{
    width:80%-10px;
    margin-top: 30px;
    padding-bottom: 30px;
    display:block;
    color:#eee;
    font-size: 1.5em;
    background-color:#90b19b ;
    border-color:  gray;
    border-width:5px ;
    border-style: solid;
}
form div.name{
    padding: 10px 2.5%;        
}
form div.email{
    padding: 10px 2.5%;
    }
form label{
    display: block;
    width: 100%;
    padding-top: 10px;
    }
form input{
    margin-bottom: 10px;
    padding-left:0px;
    height:30px;
    width: 90%;
    border: 3px solid #b3d1b3 ;
    border-radius: 4px;
    padding-left: 10px;
    }
form select{
    display: block;
    height: 30px;
    margin:auto;
    margin-bottom: 30px;
    margin-top: 10px;
    border: 3px solid #cce0cc; 
    border-radius: 4px;
    padding-left: 10px;
    }
form textarea{
    display: block;
    margin:auto;
    min-height: 100px;
    margin-bottom: 10px;
    border: 3px solid  #b3d1b3;
    border-radius: 10px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    }
form div.submit{
    display: block;
    padding: 20px 0px;
    margin-top: 30px;
    margin:auto;
}
#sendbutton{
    font-size:15px;
    border: 3px solid #d0f0c0 ;
    border-radius: 10px;
    background: hsla(120, 30%, 60%, 1);
    padding:initial
    }
#sendbutton:hover{
    background: hsla(120, 30%, 70%, 1);;
}   
footer {
    position: fixed;
    color: #222; 
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:#555;
}
footer h2{ 
    display: inline;
    font-size: 0.8rem;
    font-style: normal;
}
footer h3{ 
    display: inline;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 400;
}
footer p{
    font-size: 0.8rem;
    margin-block-start: 0.5em;
    margin-block-end: 0.2em;
    }
footer p.copyright{
    font-size: 0.6rem;
}