*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.clearfix {zoom: 1}
.clearfix:after
{
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row
{
    max-width: 1140px;
    margin: 0 auto;
}

.separator
{
    text-align: center;
    font-size: 40px;
    text-shadow: 5px 5px 5px rgb(255, 255, 255);
    padding-top: 60px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgb(3, 35, 0);
}


/* HEADER */


header
{
    background: linear-gradient(rgb(4, 51, 0), rgba(151, 246, 157, 0.1)), url("../img/backround.jpg");
    height: 100vh;
    /* 100vh znamena 100% velkosti obrazovky */
    background-size: cover;
    /* cover zabezpeci prisposobenie obrazka k vyrezu */
    /* background-attachment: fixed; */
    /* fixed - zafixuje pozadie, nehybe sa pri rolovani */
}

header nav
{
    background-color: rgb(3, 35, 0);
    margin-bottom: 15px;
}

header nav ul li
{
    list-style-type: none;
    float: left;
    width: 180px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

header nav ul li a:link,
header nav ul li a:visited
{
    color: white;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

header nav ul li a:hover,
header nav ul li a:active
{
    border-bottom: 2px solid white;
    transition: border-bottom 1s;
}

.head-logo img
{
    height: 200px;
    position: absolute;
}

.head-nadpis h1
{
    color: white;
    font-size: 40px;
    position: absolute;
    margin-top: 25px;
    margin-left: 240px;
    text-shadow: 5px 5px 5px rgb(0, 0, 0);
}

.head-motto h6
{
    position: absolute;
    right: 10%;
    bottom: 5%;
    font-size: 50px;
    color: rgb(255, 255, 255);
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 3px 3px 3px rgb(0, 0, 0);
    background-color: rgb(4, 51, 0);
    border-radius: 20px;
    padding: 10px 15px 10px 10px;
    box-shadow: 10px 10px 10px rgb(0, 0, 0)
}


/* MAIN */


main
{
    background-color: rgba(204, 255, 208, 0.5);
    padding-bottom: 40px;
}

.about
{
    background: linear-gradient(rgba(200, 200, 200, 0.6), rgba(200, 200, 200, 0.6)), url("../img/AboutBack.jpg");
    background-size: cover;
}

.walking
{
    background: linear-gradient(rgba(200, 200, 200, 0.4), rgba(200, 200, 200, 0.4)), url("../img/WalkBack.jpg");
    background-size: cover;
}

.field
{
    background: linear-gradient(rgba(255, 195, 195, 0.8), rgba(251, 195, 195, 0.8)), url("../img/FRbackround.jpg");
    background-size: cover;
}

main p
{
    font-size: larger;
    font-weight: bold;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
}

main h2 a
{
    font-size: 32px;
    font-weight: bold;
    color:  rgb(8, 96, 0);
    margin-left: 10px;
    margin-right: 10px;
}

main img
{
    max-width: 90%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    border-radius: 20px;
    box-shadow: 6px 6px 6px rgb(0, 0, 0);
}

a
{
    text-decoration: none;
    color: rgb(0, 62, 142);
    font-weight: bold;
}

main .popis
{
    margin-top: 40px;
}

/* FOOTER */


footer
{
    background: rgb(3, 35, 0);
}

footer .kontakt
{
    max-width: 680px;
    margin: 0px auto 0px auto;
    padding: 25px 0px 110px 0px;
}

footer .kontakt p,
footer .kontakt a
{
    margin-bottom: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
}

footer .kontakt h2
{
    text-align: center;
    color: white;
}

footer .kontakt img
{
    width: 100px;
    display: block;
    margin: 0px auto 0px auto;
}

.copy
{
    text-align: center;
    color: white;
    padding-bottom: 20px;
    padding-top: 20px;
}