@font-face {
    font-family: Garamont; /* deklarace fontu */
    src: url("fonts/GaramondPremrPro.otf"); /* propojení na umístění souboru */
}
@font-face {
    font-family: Garamontitalic; /* deklarace fontu */
    src: url("fonts/GaramondPremrPro-It.otf"); /* propojení na umístění souboru */
}

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

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

@font-face {
    font-family: 'opensans-regular';
    src: url('font/OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'comic-regular';
    src: url('font/comici.ttf');
}


@media (max-width: 3000px) and (min-width: 1981px){
    * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}



/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


.slideshow {
    width: 60%;
    margin-left: 20%;
    height: 20vw;
}

.slideshow img {
    width: auto;
    height: 30vw;
}


.stred-slideshow {
    margin: 0 0 0 0;
    width: 100%;
    padding: 1vw 10% 0 10%;
    text-align: center;
    color: #000;
}
}

.none {
    display: none;
}

@media (max-width: 1980px) and (min-width: 980px){
    * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


.slideshow {
    width: 100%;
    height: 50vw;
}

.slideshow img {
    width: auto;
    height: 50vw;
}


.stred-slideshow {
    margin: 0 0 0 0;
    width: 100%;
    padding: 1vw 10% 0 10%;
    text-align: center;
    color: #000;
}
}

.none {
    display: none;
}



     img{
        max-width: 100%;
        height: auto;
     }
        
        body{
        margin: 0px;
        padding: 0px;
        font-size: 1vw;
        font-family: "Garamont"; 
        color: #000;
        background: url('img/bg.jpg')  repeat top center; color: #fff;
    }
    



    .menu {
        float: left;
        background: #fff  repeat top center;
        position: fixed;
        top: 0;
        padding: 0 10% 0 10%;
        width: 100%;
        height: 8vw;
    }
    
    ul {
  list-style-type: none;
  margin: 0;
  padding-top: 2.5vw;
  overflow: hidden;
  top: 0;
  font-size: 1.25vw;
}

li {
  float: right;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 0.5vw 1vw;
  margin: 0 1vw;
  text-decoration: none;
  letter-spacing: 0.1vw;
  
}

li a:hover {
  background-color: #000;
  border-radius: 0.5vw;
  color: white;
}





.logo {
    float: left;
    margin-top: -2.5vw;
}

.logo img {
    width: 8vw;
    height: 8vw;
}
   
.piskovane-sklo {
    margin-top: 8vw;
    width: 100%;
    height: 30vw;
    color: #000;
    background: url('img/bg-bila.png')  repeat top center;
}

.pozadi {
    float: left;
    width: 60%;
    height: 30vw;
    overflow: hidden;
}

.text {
    float: left;
    width: 20%;
    margin: 5vw 10%;
    letter-spacing: 0.05vw;
    line-height: 1.5vw;
}

.text-tmave {
    float: left;
    width: 20%;
    margin: 5vw 10%;
    letter-spacing: 0.05vw;
    line-height: 1.5vw;
}
 
.stred {
    margin: 8vw 0 0 0;
    width: 80%;
    padding: 1vw 10% 0 10%;
    text-align: center;
    color: #000;
}

.stred h1 {
    font-size: 4vw;
}

.stred h2 {
    font-size: 2vw;
    font-weight: lighter;
    font-family: "Garamontitalic";
}

.stred p {
    width: 50%;
    margin-left: 25%;
    font-family: Garamont;
    font-size: 1.1vw;
    line-height: 2vw;
    letter-spacing: 0.05vw;
    color: #222;
}


.galerie {
    width: 100%;
    text-align: center;
}

.galerie h3 {
    font-size: 2vw;
    font-weight: lighter;
    font-family: "Garamontitalic";
    line-height: 0;
    text-decoration: underline;
}

.galerie img {
    margin: 0 0.5vw 0 0.5vw;
    width: 23%;
}

.fotospopisem {
    float: left;
    width: 23%;
    margin: 0 0.5vw 0 0.5vw;
}

.fotospopisem img {
  
    width: 100%; 
}



h1 {
     font-family: "Garamontitalic"; 
     font-size: 2.5vw;
     font-weight: lighter;
     line-height: 1vw;
     
}

 ud {
     float: left;
  list-style-type: none;
  margin-right: 2.5vw;
  font-family: "Garamontitalic"; 
    font-size: 1.25vw;
    letter-spacing: 0.05vw;
 
    background-color: transparent;
    border-radius: 0.5vw;
}

ud li a {
    width: 100%;
    border-radius: 0.5vw;
  color: #000;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1vw;
   border: 0.1vw solid #000;
  
}

ud li a:hover {
  background-color: #000;
  border-radius: 0.5vw;
  color: white;
}


od {
     float: left;
  list-style-type: none;
  margin-right: 2.5vw;
  font-family: "Garamontitalic"; 
    font-size: 1.25vw;
    letter-spacing: 0.05vw;
 
    background-color: transparent;
    border-radius: 0.5vw;
}

od li a {
    width: 100%;
    border-radius: 0.5vw;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1vw;
   border: 0.1vw solid #fff;
  
}

od li a:hover {
  background-color: #fff;
  border-radius: 0.5vw;
  color: #000;
}








button {
    width: 100%;
    height: 3vw;
    border: 0.1vw solid #000;
    background-color: transparent;
    border-radius: 0.5vw;
    font-family: "Garamontitalic"; 
    font-size: 1.25vw;
    letter-spacing: 0.05vw;
}

button:hover {
    background-color: #000;
    color: white;
}

.projekty {
    width: 100%;
    height: 30vw;
    color: #fff;
    background: url('img/bg-tmava.png')  repeat top center;
}

.text-tmave button {
    border: 0.1vw solid #fff;
    color: #fff;
}

.text-tmave button:hover {
    background-color: #fff;
    color: #000;
}


.oceneni {
    width: 100%;
    height: 30vw;
    color: #000;
    background: url('img/bg-bila.png')  repeat top center;
}

.kontakt {
    width: 100%;
    height: 30vw;
    color: #fff;
    background: url('img/bg-tmava.png')  repeat top center;
    font-size: 1.5vw;
}

.kontakt .ikona {
    float: left;
    width: 15%;
}

.kontakt .ikona-text {
    float: left;
    width: 80%;
    margin-left: 5%;
    margin-top: 0.5vw;
    height: 5vw;
}

.kontakt a {
    color: #fff;
}

.kontakt .ikona-text-adresa {
    float: left;
    width: 80%;
    margin-left: 5%;
    margin-top: 0.1vw;
    height: 5vw;
}

.kontakt-male {
    width: 100%;
    height: 15vw;
    color: #fff;
    background: url('img/bg-tmava.png')  repeat top center;
    font-size: 1.5vw;
}

.kontakt-male .ikona {
    float: left;
    width: 8%;
    margin: -0.5vw 0vw 1% 1%;
}

.kontakt-male .ikona-text {
    float: left;
    width: 40%;
    margin-left: 0%;
    margin-top: 0.5vw;
    height: 5vw;
}


.strkontakt .ikona-text {
   font-size: 1.5vw;
   margin-bottom: 2vw;
}

.strkontakt .ikona-text a {
    color: #000;
}

.strkontakt .ikona-text-adresa {
    font-size: 1.5vw;
   margin-bottom: 2vw;
}


.kontakt-male a {
    color: #fff;
}

.kontakt-male .ikona-text-adresa {
    float: left;
    width: 80%;
    margin-top: 0.6vw;
    height: 5vw;
}

.pozadi-male {
    float: left;
    width: 40%;
    height: 15vw;
    overflow: hidden;
}

.pozadi-male img {
    height: auto;
}

.kontakt-male .text-tmave {
    float: left;
    width: 50%;
    margin: 1vw 0 0 10%;
    letter-spacing: 0.05vw;
    line-height: 1.5vw;
}






a {
    text-decoration: none;
}



 

#red {
    color: red;
}

.clear {
    clear: both;
}