@import url(reset.css);
@import url(tekst.css);
@import url(listy.css);
@import url(linki.css);

   
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    max-width: 1200px;
    min-height: 100%;
    flex: 1 0 0;
    margin: 0 auto;

}

/*.....:>H E A D E R<:.....*/

header {
    background-color: #007DFF;

    background: -moz-linear-gradient(-45deg,  #f9f9f9 70%, #f9f9f9 70%, #ffff30 71%, #f72222 72%, #007dff 72%, #007dff 72%, #007dff 73%, #007dff 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(70%,#f9f9f9), color-stop(70%,#f9f9f9), color-stop(71%,#ffff30), color-stop(72%,#f72222), color-stop(72%,#007dff), color-stop(72%,#007dff), color-stop(73%,#007dff), color-stop(100%,#007dff));
    background: -webkit-linear-gradient(-45deg,  #f9f9f9 70%,#f9f9f9 70%,#ffff30 71%,#f72222 72%,#007dff 72%,#007dff 72%,#007dff 73%,#007dff 100%);
    background: -o-linear-gradient(-45deg,  #f9f9f9 70%,#f9f9f9 70%,#ffff30 71%,#f72222 72%,#007dff 72%,#007dff 72%,#007dff 73%,#007dff 100%);
    background: -ms-linear-gradient(-45deg,  #f9f9f9 70%,#f9f9f9 70%,#ffff30 71%,#f72222 72%,#007dff 72%,#007dff 72%,#007dff 73%,#007dff 100%);
    background: linear-gradient(135deg,  #f9f9f9 70%,#f9f9f9 70%,#ffff30 71%,#f72222 72%,#007dff 72%,#007dff 72%,#007dff 73%,#007dff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#007dff',GradientType=1);
    
    height: 45px;
}

.logo {
    float: left;
}

.title {
    float: left;
    margin-top: 7.5px;
}

header div { 
    padding: 5px;
}


/*.....:>S E C T I O N<:.....*/

#content{
    height: 900px;
    margin-bottom: 20px;
}

h2 {
    padding-top: 30px;
    margin-left: 20px; 
}

.main {
    float:left;
    width: 75%;
    padding: 20px;
    margin-bottom: 60px;
}

.side {
    float: left;
    width: 20%;
    margin-bottom: 60px;
}

figure {
    display: inline-block;
    padding: 150px;
}

.obraz img {
    width: 640px;
}

.obraz:hover img {
    transform: scale(1.05);
    transition: .3s;
}


/*.....:>M E D I A <:.....*/

@media all and (min-width: 731px) and (max-width: 960px) {
    
    #content h2 {
        text-align: center;
    }
    
    .main {
        float: none;
        width: 570px;
        margin: 0 auto;
    }
    
    .side {
        float: none;
        width: 75%;
        margin: 0 auto;
    }

    
    footer {
        visibility: hidden;
    }
    
    .obraz img {
        width: 250px;
    }
    
    .title h1 span {
        visibility: hidden;  
    }
    
    
}

@media all and (max-width: 731px) {
    
    .title h1 {
        visibility: hidden;  
    }
    
    
    #content h2 {
        text-align: center;
    }
    
    .main {
        float: none;
        width: 75%;
        margin: 0 auto;
        padding-left: 12%;
    }
    
    .obraz img {
        width: 180px;
    }
    
    .main figcaption {
        font-size: .66rem;
    }
    
    .main figure {
        padding: 0;
    }
    
    .side {
        float: none;
        width: 75%;
        margin: 0 auto;
    }
    
    footer {
        visibility: hidden;
    }
}