/*------- resetování na 0 ---------*/
h1,h2,h3,h4,p,ul,ol,li,body {
    margin: 0;
    padding: 0;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}
*, *:after, *:before {
    box-sizing: border-box;
    }
a {
    /*transition: all 0.15s ease-out;*/
}
a:hover { 
    transition: all 0.15s ease-out;
}
/*----------------------*/

body { background: #fcf3c8; margin: 0px;
background: #FEF7DC;} 

.container { margin: 30px auto 10px;}
/* puvodne pred @media screen .container { width: 480px; margin: 50px auto;}*/
.logo { 
/*    display: block; text-align: center;*/
/*background: #00ff33;*/
display: grid;
border-radius: 20px;
/*background:  #bbb;*/

}
.logo img { border-radius: 10px;} 

/*header {
    display: block;
    background: blue;
    position: relative;
    display: flex;

}

.header_left {
    float: left;
    width: 30%;
    background: red;   
}

.header_right {
    float: left;
    width: 70%;
    background: #34ce57; 
    text-align: right; 
    
}*/


.header-footer {
    display: block;
    height: 5px;
    background: linear-gradient(to bottom, #342B09 0%, #FEF7DC 80%);   
    margin-bottom: 10px;
    border-radius: 0 0 3px 3px;
}

 .header_right h1 {
        margin: 15px 0px 10px;
        color: #755139;
        color: #342B09;
    }
    .header_right h3 {
        color: #ffd662;
        color: rgba(117, 81, 57, 0.5);
        color: #C0B002;
        color: #B08A03;
        margin: 0px 0px 10px;
    }

/*    .header_right h1 {
        margin: 30px 0px 10px;
        color: #755139;
        color: #342B09;
    }
    .header_right h3 {
        color: #ffd662;
        color: rgba(117, 81, 57, 0.5);
        color: #C0B002;
        color: #B08A03;
    }*/

/* navigace */
/*nav {
bottom: 0px;
right: 0px;
         position: absolute;    

}*/

/*nav ul { display: block; padding: 2px 0;}*/
   nav ul li { display: block; padding: 5px 0 0 0;}
nav ul li a {
    /* font-size: 22px; */
    
    text-decoration: none;
    /*line-height: 50px;*/
    color: #000;
    text-transform: uppercase;
    /*font-weight: 700;*/
    padding: 15px 40px;
    display: inline-block;
    border-radius: 10px 10px 0 0;
    background: #ffd662; 
    background: #FEF590;
    background: #fded2a;
    background: #B08A03;
}
nav ul li a:hover {
    /*background: #cc6600;*/
    background: #755139;
    background: #342B09;
    
color: #fff;
}


nav li {
    /*margin-bottom: 5px;*/
}

main aside footer { padding: 10px 20px; margin-bottom: 20px;}
main { background: #FDE281; color: #342B09; }
aside { background: #FCCB1A;}

    main { float: left; width: 100%; padding: 10px 20px;}
    aside { float: left; margin: 10px auto 10px; width: 100%; padding: 10px 40px 10px; line-height: 1.5;}
    .aside-bottom { display: block; float: left; width: 100%; padding: 10px 0px; background: #B08A03; line-height: 3; text-align: center; }
    main p { margin: 10px auto; text-align: justify;}
main h3 { margin-top: 10px;}

/* footer */
footer { background: #bbb;
        background: #616161;
        background: #755139;
        background: #342B09;
        color: #fffcdc;
        padding: 10px auto 30px;
        margin: 10px auto;
        text-align: center;
}
/*(ldpi) Android*/
/*@media only screen and (-webkit-device-pixel-ratio:.75){
}*/

/*(mdpi) Android*/
/*@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
}*/

/*(hdpi) Android*/
/*@media only screen and (-webkit-device-pixel-ratio:1.5){
}*/

/* ---- media screen responsive ------*/
/*@media screen and (max-width: 479px) {
.container {width: 92%}
}
@media screen and (min-width: 480px) {
.container {width: 95%}
}
@media screen and (min-width: 740px) {
.container {width: 95%}
}
@media screen and (min-width: 960px) {
.container {width: 95%}
}
@media screen and (min-width: 1200px) {
.container {width: 1100px}

*/
@media screen and (max-width: 479px){
.container {width: 100%}

nav ul li a { display: block; text-align: center;}
/*nav ul li { display: block; padding: 5px 0 0 0;}*/
nav a { width: 100%; padding: 0 10px;}

.header_left { text-align: center;}
.header_right { text-align: center;}
}

@media screen and (-webkit-device-pixel-ratio:0.75) {
.container {width: 95%}

nav ul li a { display: block; text-align: center;}
/*nav ul li { display: block; padding: 5px 0 0 0;}*/
nav a { width: 100%; padding: 0 10px;}

.header_left { text-align: center;}
.header_right { text-align: center;}


}
@media screen and (min-width: 480px)  {
    /*header { margin-bottom: 10px;}*/
    .container { width: 95%}
/*    .logo { text-align: center;}*/
/*    nav { display: block; width: 100%; text-align: right;}*/
    nav ul { margin: 0; text-align: right;}

    /*nav ul li { display: block; padding: 5px 0 0 0;}*/
    nav a {  width: 100%; padding: 0 10px;}
    main aside footer .aside-bottom { background: #000; 
                   /*padding: 10px 20px; margin-bottom: 20px;*/
    }
    
    nav ul li a { text-align: center; width: 100%; display: block;}
    
    main { float: left; width: 100%; padding: 10px 20px;}
    aside { float: left; margin: 10px auto 10px; width: 100%; padding: 10px 40px 10px;}
    .aside-bottom { display: block; float: left; width: 100%; padding: 10px 0px; background: #B08A03; line-height: 3; text-align: center; }
    

.header_left {
        
/*        display: block;*/
/*        display: grid;*/
/*        float: left;
        width: 30%;*/
        text-align: center; 
    }
    .header_right {
/*        display: block;
        float: left;
        width: 70%;*/
   text-align: center; 
    }
}

@media screen and (min-width: 700px) {
    .container { width: 95%}
main { float: left; width: 70%; padding: 10px 20px;}
    aside { float: left; margin: 0 0 10px 10px; width: calc(30% - 10px); padding: 10px 40px 10px;}
    .aside-bottom { display: block; float: left; margin: 0 0 10px 10px; width: calc(30% - 10px); padding: 10px 0px; background: #B08A03; line-height: 3; text-align: center; }
    
    
    header {
/*    display: block;
    background: blue;*/
    position: relative;
    /*display: flex;*/

}

.header_left {
    float: left;
    width: 45%;
/*    background: red;   */
    text-align: left; 
}

.header_right {
    float: left;
    width: 55%;
/*    background: #34ce57; */
    text-align: right; 
    
}

    .header_right h1 {
/*        font-size: 3vw;*/
        margin: 30px 0px 10px;
        color: #755139;
        color: #342B09;
    }
    .header_right h3 {
        color: #ffd662;
        color: rgba(117, 81, 57, 0.5);
        color: #C0B002;
        color: #B08A03;
    }
    
    nav {
display: inline-block;
width: 100%;
text-align: right;
}
nav ul li {
    display: inline-flex; 
}
}

@media screen and (min-width: 768px) {
    .container { width: 95%}
   /* .logo { display: inline-block; text-align: center; float: left;}*/
/*    main { float: left; width: 70%; padding: 10px 20px;}
    aside { float: left; margin: 0 0 10px 10px; width: calc(30% - 10px); padding: 10px 40px 10px;}
    .aside-bottom { display: block; float: left; margin: 0 0 10px 10px; width: calc(30% - 10px); padding: 10px 0px; background: #B08A03; line-height: 3; text-align: center; }
    */
    .header_right h1 {
        margin: 30px 0px 10px;
        color: #755139;
        color: #342B09;
    }
    .header_right h3 {
        color: #ffd662;
        color: rgba(117, 81, 57, 0.5);
        color: #C0B002;
        color: #B08A03;
    }
    .header_left {
    /*float: left;*/
    width: 35%;
/*    background: red;   */
    /*text-align: left;*/ 
}

.header_right {
    /*float: left;*/
    width: 65%;
/*    background: #34ce57; */
    /*text-align: right;*/ 
    
}

}
@media screen and (min-width: 970px) {
        .container { width: 95%}
    nav {
bottom: 0px;
right: 0px;
         position: absolute;    

}
}

@media screen and (min-width: 1200px) {
.container {width: 1100px}
}