body, ul, li, div {
                       padding:0;
                       margin: 0;
                      }
p {
                       padding:0;
                       margin: 0 0 10px 0;
                      }
                      

body {
       background:url('images/main-bg.png');
       text-align: center;
       font-family: 'Roboto Condensed', sans-serif;
       color: #652621;
       }

#container {
           width:100%;
           max-width:1200px ;
           text-align: center;
           margin:0 auto;
           background:url('images/slunce.png') no-repeat 20px 15px transparent;
           padding-top:1px
           }

h1 {
    font-weight: normal;
    }

h1, h2 {
    margin-top: 50px!important;
}
       
ul#menu {
         float:right;
         margin-top:15px;
         margin-bottom:5px
         }

ul#menu li {
           display:inline-block;
           padding:15px;
           border-radius:10px;
           margin-left:15px;
           background: #e64b3c; /* Old browsers */
           background: -moz-linear-gradient(top,  #e64b3c 50%, #d43f2e 50%); /* FF3.6-15 */
           background: -webkit-linear-gradient(top,  #e64b3c 50%,#d43f2e 50%); /* Chrome10-25,Safari5.1-6 */
           background: linear-gradient(to bottom,  #e64b3c 50%,#d43f2e 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e64b3c', endColorstr='#d43f2e',GradientType=0 ); /* IE6-9 */
            }
           
ul#menu li a {
              color:#fff;
              text-decoration: none;
             }
             
ul#menu li a:hover {
                    text-decoration: underline;
                    } 
                    
#slogan {
        clear:both;
        font-size: 2.3em;
        background: #E64B3C;
        color:#fff;
        width:600px;
        margin:100px auto 110px;
        text-transform: uppercase;
        height:1.6em;
        line-height: 1.6em;
        position: relative;
        } 
        
#slogan:before{
              content:"";
              width:0;
              height:0;
              border-top:0.8em solid;
              border-right:0.8em solid;
              border-bottom:0.8em solid;
              border-left:0.8em solid  transparent;
              position: absolute;
              top:10px;
              left:-1em;
              z-index:-10;
              color: #D43F2E;
              }              
        
#slogan:after {
              content:"";
              width:0;
              height:0;
              border-top:0.8em solid;
              border-right:0.8em solid transparent;
              border-bottom:0.8em solid;
              border-left:0.8em solid;
              position: absolute;
              top:10px;
              right:-1em;
              z-index:-10;
              color: #D43F2E;
              }                                                     
       
#silnice {
         position: relative;
         text-align: center;
         background:url('images/silnice.png') no-repeat center 50px transparent; 
         height:740px;
         clear:both;
         width:460px;
         margin:0 auto;       
         }
         
#silnice p, p {
           line-height: 150%;
           }           
         
#logo {
        padding-top:150px
        }  
        
#fabrika, #skladka, #svoz, #obec   {
            position: absolute;
            
            } 
            
#fabrika   {
           top:520px;
           left:-40px            
            } 
            
#fabrika p  {
           position: absolute;
           top:80px;
           left:220px;
           width:300px;
           text-align: left;           
            }
            
#fabrika:after {
                content:"";
                position: absolute;
                top:155px;
                left:240px;
                transform:rotate(-130deg);
                width: 15px;
                height:40px;
                background: url('images/sipka.png') no-repeat center center transparent;
               }             
            
#skladka   {
           top:140px;
           left:-320px            
            } 
            
#skladka p  {
           position: absolute;
           top:220px;
           left:60px;
           width:260px;
           text-align: left;           
            }
            
#skladka:after {
                content:"";
                position: absolute;
                top:220px;
                left:20px;
                transform:scale(1, -1) rotate(50deg);
                width: 15px;
                height:40px;
                background: url('images/sipka.png') no-repeat center center transparent;
               } 
            
#svoz   {
           top:-70px;
           left:200px            
            } 
            
#svoz p  {
           position: absolute;
           top:20px;
           left:-180px;
           width:210px;
           text-align: left;           
            }

#svoz:after {
                content:"";
                position: absolute;
                top:-10px;
                left:0px;
                transform: rotate(90deg);
                width: 15px;
                height:40px;
                background: url('images/sipka.png') no-repeat center center transparent;
               }
            
#obec   {
           top:200px;
           left:480px            
            } 
            
#obec p  {
           position: absolute;
           top:156px;
           left:15px;
           width:260px;
           text-align: left;           
            } 
            
#obec:after {
                content:"";
                position: absolute;
                top:160px;
                left:250px;
                transform: rotate(220deg);
                width: 15px;
                height:40px;
                background: url('images/sipka.png') no-repeat center center transparent;
               }            
            
#onas {
      background:url('images/vesnice-auto.png') no-repeat center bottom transparent;
      padding:0 100px 160px;
      margin:0 auto;
      font-size: 120%;
      } 
      
#form {
      color:#fff;
      padding:15px 0 120px 0px;
      background:url('images/kontejnery.png') no-repeat center bottom #4d4d4d ;
      }  
      
#copyright  {
            padding:15px 0;
            background:#fda610;
            color: #bf382a;
            }
            
#copyright a {
             color:#fff
             }
             
#copyright a:hover {
             color:#bf382a
             }                           
      
/*formulář*/

.form{
    max-width: 800px;
    background: transparent;
    padding:10px 0px 0px;
    margin: 0 auto;
}
.form ul{
    padding:0;
    margin:0;
    list-style:none;
}
.form ul li{
    display: block;
    margin-bottom: 30px;
    min-height: 35px;
}
.form ul li  .field-style{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    outline: none;
    border: 0px solid #d4d4d4;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    border-radius:5px;
    background:#eeddb3;
    color: #5d4333;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:16px;
}
    
.form ul li  .field-style:focus{
    box-shadow:inset 0px 0px 1px 2px #7ca300;
}
.form ul li .field-split{
    width: 45%;
}
.form ul li .field-full{
    width: 100%;
}
.form ul li input.align-left{
    float:left;
}
.form ul li input.align-right{
    float:right;
}
.form ul li textarea{
    width: 100%;
    height: 100px;
}
.form ul li input[type="button"],
.form ul li input[type="submit"] {
    border: 0px solid red;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    padding:15px;
    border-radius:10px;
    text-decoration: none;
    font-size:120%;
    font-family: 'Roboto Condensed', sans-serif;
    background: #e64b3c; /* Old browsers */
    background: -moz-linear-gradient(top,  #e64b3c 50%, #d43f2e 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e64b3c 50%,#d43f2e 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e64b3c 50%,#d43f2e 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e64b3c', endColorstr='#d43f2e',GradientType=0 ); /* IE6-9 */
}
.form ul li input[type="button"]:hover,
.form ul li input[type="submit"]:hover {
   text-decoration: underline;
}

#obec div {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
} 

#fabrika div {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#skladka div {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.g-recaptcha div  {margin: 0 auto}

/*formulář konec*/  

 @media screen and (max-width:1200px) {
 
#slogan {
        font-size: 2em;
        width:480px;
        height:1.6em;
        line-height: 1.6em;
        position: relative;
        margin:120px auto 80px;
        }  
 
#container {
           max-width:960px ;
           }
           
#silnice {
         background:url('images/silnice70procent.png') no-repeat center 50px transparent; 
         height:560px;       
         }               

#skladka img, #svoz img, #obec img, #fabrika img {
             transform:scale(0.8)
             }
             
#skladka p, #svoz p, #obec p, #fabrika p {
             font-size: 90%;
             }             
           
#fabrika   {
           top:360px;
           left:-40px            
            } 

#fabrika p {
           top:80px;
           left:200px;
           width:250px;           
            }

#fabrika:after {
                top:170px;
                left:210px;
               }             
            
#skladka   {
           top:80px;
           left:-220px            
            } 
            
#skladka p  {
           top:190px;
           left:60px;
           width:210px;           
            }
            
#skladka:after {
                top:190px;
                left:20px;
               } 
            
#svoz   {
           top:-60px;
           left:200px            
            } 
            
#svoz p  {
           top:20px;
           left:-170px;
           width:210px;          
            }

#svoz:after {
                top:-10px;
                left:30px;
               }
               
#obec   {
           top:140px;
           left:380px            
            } 
            
#obec p  {
           top:130px;
           left:40px;
           width:230px;           
            } 
            
#obec:after {
                top:140px;
                left:280px;
               }               
               
#logo {
        padding-top:90px;
        transform:scale(0.70)
        }
        
#onas {
      background:url('images/vesnice-auto80procent.png') no-repeat center bottom transparent;
      padding:0 100px 160px;
      margin:0 auto;
      font-size: 120%;
      }          

}  

@media screen and (max-width:959px) { 

#slogan {
        font-size: 1.6em;
        width:380px;
        height:1.6em;
        line-height: 1.6em;
        position: relative;
        margin:160px auto 60px;
        }  


 
#container {
           max-width:768px ;
           
           }
           
#silnice {
         height:510px;       
         }             

#skladka img, #svoz img, #obec img, #fabrika img {
             transform:scale(0.6)
             }
             
            
           
#fabrika   {
           top:330px;
           left:0px            
            } 

#fabrika p {
           top:70px;
           left:180px;
           width:250px;           
            }

#fabrika:after {
                top:140px;
                left:190px;
               }             
            
#skladka   {
           top:80px;
           left:-150px;
           width:220px;            
            }
            
#skladka img {
             margin-left:-40px
            }             
            
#skladka p  {
           top:170px;
           left:50px;
           width:180px;           
            }
            
#skladka:after {
                top:170px;
                left:10px;
               } 
            
#svoz   {
           top:-40px;
           left:180px            
            } 
            
#svoz p  {
           top:20px;
           left:-110px;
           width:200px;          
            }

#svoz:after {
                top:-10px;
                left:60px;
               }
               
#obec   {
           top:100px;
           left:280px;
           width:250px;
                      
            }
            
#obec img {
           position: relative;
           left:50px 
            }             
            
#obec p  {
           top:120px;
           left:140px;
           width:180px;           
            } 
            
#obec:after {
                top:120px;
                left:305px;
               }               
               
        
#onas {
      background:url('images/vesnice-auto60procent.png') no-repeat center bottom transparent;
      padding:0 30px 130px;
      margin:0 auto;
      font-size: 100%;
      } 
      
#form {
      background:url('images/kontejnery80procent.png') no-repeat center bottom #4d4d4d ;
      } 
             
}

@media screen and (max-width:850px) {

#form {
        padding:15px 30px 120px
        }

} 

@media screen and (max-width:760px) {

#slogan {
        font-size: 1.2em;
        width:270px;
        position: relative;
        margin:50px 20px 40px;
        float:right ;
        }  



#form {
      background:url('images/kontejnery50procent.png') no-repeat center bottom #4d4d4d ;
      } 

.form ul li input.align-left,.form ul li input.align-right {
    float: none;
}

.form ul li input, .form ul li textarea {
                 margin-bottom: 20px;
                 }

.form ul li {
            margin-bottom:0
} 

.form ul li .field-split {
    width: 100%;
    }
    
.form ul li input[type="button"],
.form ul li input[type="submit"] {
                                  margin-top:20px
                                 }
    
#container {
           max-width:480px ;
           background:none;
          } 


#silnice {
         position: relative;
         text-align: center;
         background:url('images/silnice-cik-cak.png') no-repeat center 50px transparent; 
         height:920px;
         clear:both;
         width:480px;
         margin:0 auto;       
         }
         
#logo {
        margin-top:-290px;
        margin-left:-280px;
        transform:scale(0.70)
        }                   
        
#onas {
      background:url('images/vesnice-auto50procent.png') no-repeat center bottom transparent;
      padding:0 25px 70px;
      font-size: 100%;
      }

         
           
#fabrika   {
           top:460px;
           left:-30px;          
            } 

#fabrika p {
           top:70px;
           left:180px;
           width:180px;           
            }

#fabrika:after {
                display: none;
               }             
            
#skladka   {
           top:670px;
           left:180px;
           width:220px;            
            }
            
#skladka img {
             margin-right:-220px
            }             
            
#skladka p  {
           top:60px;
           left:-30px;
           width:140px;           
            }
            
#skladka:after {
                display: none;
               } 
            
#svoz   {
           top:120px;
           left:-50px;           
            } 
            
#svoz p  {
           top:30px;
           left:250px;
           width:140px;          
            }

#svoz:after {
              display: none;
               }
               
#obec   {
           top:300px;
           left:150px;
           width:250px;
           }
            
#obec img {
           position: relative;
           left:60px 
            }             
            
#obec p  {
           top:30px;
           left:0px;
           width:130px;           
            } 
            
#obec:after {
              display: none;
               }
    
}

@media screen and (max-width:480px) {

#slogan {
        font-size: 1.0em;
        width:160px;
        position: relative;
        margin:30px 20px 10px;
        float:right;
        height:auto;
        padding:5px 0;
        transform:rotate(-7deg);
        box-shadow:4px 4px 0px #999999
        } 

#slogan:before, #slogan:after {display: none;}

#container {
           max-width:320px ;
          }
ul#menu {
            float:right;
            margin-top:15px;
            margin-bottom:50px
            }
          
ul#menu li {
           display:inline-block;
           padding:5px 10px;
           margin:0 5px 0 0;
            }
                     

#silnice {
         position: relative;
         text-align: center;
         background:url('images/silnice-cik-cak-320.png') no-repeat center 40px transparent; 
         height:1160px;
         clear:both;
         width:320px;
         margin:0 auto;       
         }
         
#logo {
        margin-top:-270px;
        margin-left:-200px;
        transform:scale(0.60)
        }
        
#onas {
      background:url('images/vesnice-auto320orez.png') no-repeat center bottom transparent;
      padding:0 25px 70px;
      font-size: 100%;
      } 
      
#fabrika   {
           top:665px;
           left:20px;          
            } 

#fabrika p {
           top:-30px;
           left:20px;
           width:230px;           
            }

             
            
#skladka   {
           top:930px;
           left:-20px;
           width:230px;            
            }            
            
#skladka p  {
           top:-30px;
           left:90px;
           width:240px;           
            }

            
#svoz   {
           top:200px;
           left:-10px;           
            } 
            
#svoz p  {
           top:-90px;
           left:70px;
           width:200px;          
            }


               
#obec   {
           top:450px;
           left:-50px;
           width:230px;
           }             
            
#obec p  {
           top:-80px;
           left:120px; 
           width:230px          
            }               

}

.popis {
    text-align: left;
}

.popis h1, h2 {
    text-align: center;
}

.popis li {
    margin: 10px 0px 5px 40px;}

.popis li:last-child {
    margin-bottom: 20px;
}

/* Sekce Kontakt */
div.kontakt {
    padding: 50px 40px;
}

div.form {
    max-width: 1200px;
    margin: auto;
}

li.tlacitko {
    text-align: center;
}

/* Patička */
div#copyright {
    text-align: center;
}

a.app {
    border: 0px solid red;
    display: inline-block;
    color: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 120%;
    background: linear-gradient(to bottom, #e64b3c 50%,#d43f2e 50%);
}

a.app:hover {
    text-decoration: underline;
    color: #fff;
}