#main {
    background-color: #364e64;
    padding: 30px;
     transition: background-color 3s;
}

#main:hover {
    background-color: blue;
}

div {
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
}

#header {
    background-image: url('https://bradavice.eu/obrazky/logo10.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: black;
    color: white;
    margin-bottom: 0 !important;
}

.container {
    background-image: url('argus_filch_001.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    min-height: 500px;
    background-size: cover;
    -moz-transition: width 5s ease-in-out, left 1.5s ease-in-out;
    -webkit-transition: width 5s ease-in-out, left 1.5s ease-in-out;
    -moz-transition: width 5s ease-in-out, left 1.5s ease-in-out;
    -o-transition: width 5s ease-in-out, left 1.5s ease-in-out;
    transition: width 5s ease-in-out, left 1.5s ease-in-out;
}

#article {
    margin: 20px auto auto auto;
    color: red;
    padding: 15px;
}

.container:hover {
    width: 40%;
}


@media screen and (max-height: 768px) {
    .container {
        min-height: 300px;
    }
}
#article {
    margin: 20px auto auto auto;
    color: red;
    padding: 15px;
}

@media screen and (max-width: 768px) {
    .container:hover {
        width: 70%;
        min-height: 300px;
    }
}

@media screen and (min-width: 769px) {
    .container:hover {
        width: 40%;
    }
}