@font-face {
    font-family: Humanist; /* deklarace fontu */
    src: url("font/Humanist777AT.TTF"); /* propojení na umístění souboru */
}
@font-face {
    font-family: HumanistLight; /* deklarace fontu */
    src: url("Humanist777LtAT.TTF"); /* propojení na umístění souboru */
}

@font-face {
    font-family: HumanistBold; /* deklarace fontu */
    src: url("Humanist777BlkAT.TTF"); /* propojení na umístění souboru */
}

img {
    width: 100%;
    height: auto;
}

@media (max-width: 1950px) and (min-width: 781px){
        body{
        margin: 0px;
        padding: 0px;
        font-size: 1vw;
        font-family: "Humanist", sans-serif;
    font-size: 1vw;
   
    color: #666;
    background-color: #fff;
        }
        
         .titulka {
            width: 100%;
            height:  100vh;
              background: url('img/bg.jpg') no-repeat top center;
        }
        
        
        .head {
            width: 100%;
             background: url('img/prechod.png');
             height: 30vw;
        }
        
        .head .logo {
            float: left;
            width: 25%;
            margin-top: 2vw;
            margin-left: 3%;
            margin-right: 1%;
        }
        
        .menu {
            float: left;
            margin: auto 5% 0 5%;
            width: 34%;
            height: auto;
            overflow: auto;
            font-size: 1.5vw;
            margin-top: 2.5vw;
        }
        
        .polozka-menu {
            float: left;
            padding: 1vw 3%;
            color: #fff;
        }
        
        .polozka-menu a{
          color: #fff;
          text-decoration: none;
        }
        
        .polozka-menu a:hover {
            text-decoration: underline;
            text-decoration-color: red;
            
        }
        
        .mezera {
            float: left;
            width: 6%;
            height: 1vw;
        }
        
        .sloupskazmrzlina {
            float: left;
            width: 8%;
            margin: 2vw 1% 0 1%;
            height: 5vw
        }
        
        .sloupskazmrzlina img {
            width: 100%;
            height: auto;
        }
        
        .rychlykontakt {
            float: left;
            margin-top: 3vw;
            margin-left: 2%;
            width: 13%;
            height: 5vw;
            color: #fff;
            font-size: 1.5vw;
        }
        
        .rychlykontakt img {
            float: left;
            width: 2.5vw;
            margin-right: 1vw;
        }
        
        
        .cervenypanel {
            margin-top: -15vw;
            margin-right: 10vw;
            float: right;
            width: 18%;
            height: 11vw;
            background-color: #c01717;
            color: #fff;
        }
        
        .cervenypanel p {
            margin-top: 0.5vw;
            margin-left: 5%;
            width: 90%;
            line-height: 2.5vw;
            font-size: 1.5vw;
        }
        
        .cernypanel {
            float: right;
            width: 40%;
            background-color: #000;
            filter: contrast(150%);
            background: url('img/cernyramecek.png');
            color: #fff;
        }
        
        .cernypanel p {
            margin-top: 0.5vw;
            line-height: 2.5vw;
            font-size: 1.5vw;
        }
        
         .cernypanel .img {
            float: left;
            margin: 2% 1vw;
            opacity: 1;
            width: 30%;
        }
        
        .cernypanel .text {
            width: 55%;
            float: left;
            margin: 2% 1vw;
            opacity: 1;
        }
        
        .cernypanel #nadpis {
            font-size: 2vw;
        }
        
        .cernypanel .datum {
            font-size: 1.5vw;
            margin-top: 1vw;
            margin-bottom: 1vw;
            padding: 0.5% 0.5vw;
            border: 1vw;
            background-color: #c01717;
            width: 40%;
            text-align: center;
        }
       
       .topnav {
         display: none;
         }
         
         .rychlykontakt-tel {
         display: none;
         }
        
}

@media (max-width: 3000px) and (min-width: 1951px){
       body{
        margin: 0px;
        padding: 0px;
        font-size: 1vw;
        font-family: "Humanist", sans-serif;
    font-size: 1vw;
   
    color: #666;
    background-color: #fff;
        }
        
         .titulka {
            width: 100%;
            height:  100vh;
              background: url('img/bg-velke.jpg') no-repeat top center;
        }
        
        
        .head {
            width: 100%;
             background: url('img/prechod.png');
             height: 20vw;
        }
        
        .head .logo {
            float: left;
            width: 15%;
            margin-top: 2vw;
            margin-left: 15%;
            margin-right: 1%;
        }
        
        .menu {
            float: left;
            margin-left: 2%;
            width: 33%;
            height: auto;
            overflow: auto;
            font-size: 1.2vw;
            margin-top: 2vw;
        }
        
        .polozka-menu {
            float: left;
            padding: 0.5vw 4%;
            color: #fff;
        }
        
        .polozka-menu a{
          color: #fff;
          text-decoration: none;
        }
        
        .polozka-menu a:hover {
            text-decoration: underline;
            text-decoration-color: red;
            
        }
        
        .mezera {
            float: left;
            width: 3%;
            height: 1vw;
        }
        
        .sloupskazmrzlina {
            float: left;
            width: 6%;
            margin: 1vw 1% 0 1%;
            height: 5vw
        }
        
        .rychlykontakt {
            float: left;
            margin-top: 2vw;
            margin-left: 2%;
            width: 10%;
            height: 5vw;
            color: #fff;
            font-size: 1.2vw;
        }
        
        .rychlykontakt img {
            float: left;
            width: 1.75vw;
            margin-right: 1vw;
        }
        
        
        .cervenypanel {
            margin-top: -10vw;
            margin-right: 20%;
            float: right;
            width: 12%;
            height: 7vw;
            background-color: #c01717;
            color: #fff;
        }
        
        .cervenypanel p {
            margin-top: 0.5vw;
            margin-left: 5%;
            width: 90%;
            line-height: 1.5vw;
            font-size: 1vw;
        }
        
        .cernypanel {
            float: right;
            width: 40%;
            background-color: #000;
            filter: contrast(150%);
            background: url('img/cernyramecek.png');
            color: #fff;
        }
        
        .cernypanel p {
            margin-top: 0.5vw;
            line-height: 1.5vw;
            font-size: 1vw;
        }
        
         .cernypanel .img {
            float: left;
            margin: 2% 1vw;
            opacity: 1;
            width: 15%;
        }
        
        .cernypanel .text {
            width: 43%;
            float: left;
            margin: 2% 1vw;
            opacity: 1;
        }
        
        .cernypanel #nadpis {
            font-size: 1.75vw;
        }
        
        .cernypanel .datum {
            font-size: 1.25vw;
            margin-top: 1vw;
            margin-bottom: 1vw;
            padding: 0.5% 0.5vw;
            border: 1vw;
            background-color: #c01717;
            width: 40%;
            text-align: center;
        }
        
        .topnav {
         display: none;
         }
         
         .rychlykontakt-tel {
         display: none;
         }
}





@media (max-width: 780px) and (min-width: 320px){
        body{
        margin: 0px;
        padding: 0px;
        font-size: 1vw;
        font-family: "Humanist", sans-serif;
    font-size: 5vw;
   
    color: #666;
    background-color: #fff;
        }
        
         
        
        .topnav {
    float: left;
   background-color: black;
  position: absolute;
  z-index: 999;
  right: 5%;
  background-color: #c01717;
  width: 80%;
  
  
}
.topnav #myLinks {
  display: none;
  margin-top: 16vw;
  background-color: #c01717;
  right: 2%;
}

.topnav #myLinks a {
   font-size: 8vw;
   margin-left: 2vw;
   
}
  


/* Style navigation menu links */
.topnav a {
  color: #fff;
  padding: 2vw 2vw;
  text-decoration: none;
  font-size: 10vw;
  display: block;
  
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  color: #fff;
  display: block;
 background-color: #c01717;
  position: absolute;
  top: 0vw;
  right: 0vw; 
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background: black;
  color: #fff;
  opacity: 1;
  background-color: #c01717;
}

/* Style the active link (or home/logo) */
.topnav .active {
  background-color: #c01717;
  color: #fff;
  width: 21%;
} 




        
         .titulka {
            width: 100%;
            height:  100vh;
              background: url('img/bg-tel.jpg') no-repeat top center;
        }
        
        
        .head {
            width: 100%;
             background: url('img/prechod.png');
             height: 60vw;
        }
        
        .head .logo {
            float: left;
            width: 80%;
            margin-top: 11vw;
            margin-left: 10%;
            margin-right: 1%;
        }
        
        .menu {
            float: left;
            margin: auto;
            width: 44%;
            height: auto;
            overflow: auto;
            font-size: 1.9vw;
            margin-top: 2.5vw;
        }
        
        .polozka-menu {
            display: none;
        }
        
        .polozka-menu a{
          color: #fff;
          text-decoration: none;
        }
        
        .polozka-menu a:hover {
            text-decoration: underline;
            text-decoration-color: red;
            
        }
        
        .mezera {
             display: none;
        }
        
        .sloupskazmrzlina {
            display: none;
        }
        
         .rychlykontakt {
           display: none;
        }
        
        .rychlykontakt-tel {
            float: left;
            margin-top: 2vw;
            margin-left: 18%;
            width: 70%;
            height: 5vw;
            color: #fff;
            font-size: 6vw;
        }
        
        .rychlykontakt-tel img {
            float: left;
            width: 7vw;
            margin-right: 4vw;
        }
        
        
        .cervenypanel {
            margin-right: 5%;
            float: right;
            width: 55%;
            height: 30vw;
            background-color: #c01717;
            color: #fff;
            line-height: 7vw;
        }
        
        .cervenypanel p {
            margin-top: 0.5vw;
            margin-left: 5%;
            width: 90%;
        }
        
        .cernypanel {
            float: right;
            width: 90%;
            background-color: #000;
            filter: contrast(150%);
            background: url('img/cernyramecek.png');
            color: #fff;
            margin-top: 10vw;
        }
        
        .cernypanel p {
            margin-top: 0.5vw;
            font-size: 5vw;
            line-height: 7vw;
        }
        
         .cernypanel .img {
            float: left;
            margin: 2% 1vw;
            opacity: 1;
            width: 40%;
        }
        
        .cernypanel .img img {
            width: 100%;
            height: auto;
        }
        
        .cernypanel .text {
            width: 55%;
            float: left;
            margin: 2% 1vw;
            opacity: 1;
        }
        
        .cernypanel #nadpis {
            font-size: 7vw;
        }
        
        .cernypanel .datum {
            font-size: 5vw;
            margin-top: 1vw;
            margin-bottom: 1vw;
            padding: 0.5% 0.5vw;
            border: 1vw;
            background-color: #c01717;
            width: 70%;
            text-align: center;
        }
}


#red {
    color: red;
}

.clear {
    clear: both;
}