﻿* {box-sizing: border-box;}

body {
  background-image: url("../img/logo4.jpg");
  background-repeat: repeat;
}

/*--------------------hlavni--------------------*/

.hlavni {                                      /* hlavní div stránek */
  position: relative;
  top: -7px;
  left: -5px;
  width: 1000px;
  height: 1982px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.hlavni {
  left: 183px;
}}
@media screen and (max-width: 1920px) and (min-width: 1681px)

{.hlavni {
  left: 460px;
}}
@media screen and (max-width: 1680px) and (min-width: 1601px)

{.hlavni {
  left: 340px;
}}
@media screen and (max-width: 1600px) and (min-width: 1441px)

{.hlavni {
  left: 300px;
}}
@media screen and (max-width: 1440px) and (min-width: 1367px)

{.hlavni {
  left: 220px;
}}
@media screen and (max-width: 1360px) and (min-width: 1281px)

{.hlavni {
  left: 180px;
}}
@media screen and (max-width: 1280px) and (min-width: 1153px)

{.hlavni {
  left: 140px;
}}
@media screen and (max-width: 1152px) and (min-width: 1025px)

{.hlavni {
  left: 76px;
}}
@media screen and (max-width: 1023px) and (min-width: 971px)

{.hlavni {
  left: 3px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.hlavni {
  left: 5px;
  width: 790px;
  height: 1982px;
}}
@media screen and (max-width: 600px) and (min-width: 551px)

{.hlavni {
  left: 150px;
  width: 300px;
  height: 1740px;
}}
@media screen and (max-width: 550px) and (min-width: 501px)

{.hlavni {
  left: 125px;
  width: 300px;
  height: 1740px;
}}
@media screen and (max-width: 500px) and (min-width: 386px)

{.hlavni {
  left: 100px;
  width: 300px;
  height: 1740px;
}}
@media screen and (max-width: 450px) and (min-width: 385px)

{.hlavni {
  left: 75px;
  width: 300px;
  height: 1740px;
}}
@media screen and (max-width: 414px) and (min-width: 376px)

{.hlavni {
  left: 57px;
  width: 300px;
  height: 1750px;
}}
@media screen and (max-width: 360px) and (min-width: 321px)

{.hlavni {
  left: 30px;
  width: 300px;
  height: 1750px;
}}
@media screen and (max-width: 375px) and (min-width: 361px)

{.hlavni {
  left: 38px;
  width: 300px;
  height: 1750px;
}}
@media screen and (max-width: 384px) and (min-width: 362px)

{.hlavni {
  left: 42px;
  width: 300px;
  height: 1750px;
}}
@media screen and (max-width: 320px) and (min-width: 200px)

{.hlavni {
  left: 10px;
  width: 300px;
}}

/*--------------------header--------------------*/

.hlavni-div {                                   /* hlavní div header */
  position: relative;
  top: 0px;
  left: 0px;
  width: 1000px;
  height: 500px;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.hlavni-div {
  width: 790px;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.hlavni-div {
  left: 0px;
  width: 300px;
}}

/*------------------jazyková-verze-------------*/

.en {                                  /* hlavní div */
  position: absolute;
  top: 0px;
  left: 10px;
  width: 50px;
  height: 40px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.en {
  left: -10px;
  width: 50px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.en {
  left: -10px;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.en {
  top: 60px;
  left: 0px;
  width: 25px;
  height: 12px;
}}


.img-en {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 18px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.img-en {
  top: 0px;
  left: 0px;
  width: 20px;
  height: 10px;
}}


/*--------------------menu--------------------*/

.menu {                                  /* hlavní div */
  position: relative;
  float: left;
  top: 1px;
  left: 549px;
  width: 434px;
  height: 90px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.menu {
  left: 568px;
  width: 434px;
}}


@media screen and (max-width: 900px) and (min-width: 800px)

{.menu {
  left: 356px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.menu {
  left: 0px;
  width: 300px;
  height: 47px;
}}


.ul {
  list-style-type: none;
  position: relative;
  top: -18px;
  left: 0px;
  padding: 0px;
  overflow: hidden;
}

.li {
  float: left;
}

.li a {
  display: block;
  width: 108px;
  height: 90px;
  border-right: 1px solid #fac39d;
  border-bottom: 7px solid #fac39d;
  padding: 37px 0px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
  text-align: center;
  background-color: #d29063;
  cursor: pointer;
  text-decoration: none;
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
}

.li a:hover {
  text-decoration: none;
  background-image: linear-gradient(#d29063, #fac39d);
  padding: 33px 0px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.li a {
  width: 75px;
  height: 37px;
  border-bottom: 3px solid #fac39d;
  padding: 13px 0px 10px 0px;
  font-size: 10px;
  letter-spacing: 0.3px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.li a:hover {
  padding: 11px 0px 15px 0px;
}}


#li2 {
  display: block;
  float: left;
  width: 108px;
  height: 90px;
  border-right: 1px solid #fac39d;
  border-bottom: 7px solid #fac39d;
  padding: 37px 0px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
  text-align: center;
  background-color: #d29063;
  cursor: pointer;
  text-decoration: none;
  background-image: linear-gradient(#d29063, #fac39d);
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#li2 {
  width: 75px;
  height: 37px;
  border-bottom: 3px solid #fac39d;
  padding: 13px 0px 12px 0px;
  font-size: 10px;
  letter-spacing: 0.3px;
}}


.odkaz {
  color: black;
  text-decoration: none
}

.odkaz:visited {
  color: black;
}


/*-----------------hlavní-obrázek--------------*/

.obrazek {                                  /* hlavní div */
  position: relative;
  float: left;
  top: 30px;
  left: 20px;
  width: 960px;
  height: 470px;
  background-image: url("../img/2.jpg");
  background-repeat: no-repeat;
  box-shadow: 1px 1px 33px white;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.obrazek {
  width: 1000px;
  height: 470px;
  left: 0px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.obrazek {
  left: 0px;
  width: 790px;
  height: 449px;
  background-image: url("../img/2-1.jpg");
  background-repeat: no-repeat;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.obrazek {
  left: 0px;
  width: 300px;
  height: 190px;
  background-image: url("../img/2-3.jpg");
  background-repeat: no-repeat;
}}


/*---------------------logo-------------------*/

.logo {                                  /* hlavní div */
  position: absolute;
  top: -88px;
  left: 50px;
  width: 303px;
  height: 110px;
  background-color: white;
  box-shadow: 1px 1px 10px white;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.logo {
  left: 70px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.logo {
  left: 33px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.logo {
  top: -30px;
  left: 150px;
  width: 133px;
  height: 47px;
}}


.img-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 260px;
  height: 70px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.img-logo {
  display: none;
}}

.img-logo1 {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 120px;
  height: 36px;
}

@media screen and (min-width: 601px)

{.img-logo1 {
  display: none;
}}



/*---------------------text-------------------*/

.text {                                  /* hlavní div */
  position: relative;
  top: 90px;
  left: 20px;
  width: 960px;
  padding: 0px 0px 70px 0px;
  background-color: #ffe5b3;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text {
  left: 0px;
  width: 1000px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text {
  top: 20px;
  left: 0px;
  width: 790px;
  padding: 0px 0px 30px 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text {
  top: -233px;
  left: 0px;
  width: 300px;
  padding: 0px 0px 30px 0px;
}}


.text1 {
  display: inline-block;
  float: left;
  width: 100%;
  padding: 0px 0px 40px 0px;
}


.text1 p{                                  /* text o nás */
    display: inline-block;
    float: left;
    margin: -31px 0px 0px 25px;
    width: 550px;
    padding: 30px 10px 25px 17px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-align: left;
    color: black;
    background-color: #ece7df;
    box-shadow: 1px 1px 17px #8c8c8c;
  }

  @media screen and (max-width: 1366px) and (min-width: 1361px)

  {.text1 p {
    margin: -31px 0px 0px 35px;
  }}

  @media screen and (max-width: 900px) and (min-width: 800px)

  {.text1 p {
    margin: -31px 0px 0px 120px;
  }}

  @media screen and (max-width: 600px) and (min-width: 200px)

  {.text1 p {
    margin: -31px 0px 0px 20px;
    width: 260px;
    font-size: 12px;
    text-align: center;
  }}

  .text1-en-c h1{
    width: auto!important;
    text-align: left!important;
    margin: 40px 0px 0px 268px;
    padding: 0px 10px 8px 0px; 
  }

  .text1 h1 {
    display: block;
    margin: 40px 0px 0px 278px;
    width: 47px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: black;
    z-index: 1;
  }

  @media screen and (max-width: 1366px) and (min-width: 1361px)

  {.text1 h1 {
    margin: 20px 0px 0px 287px;
  }}


  @media screen and (max-width: 900px) and (min-width: 800px)

  {.text1 h1 {
    margin: 40px 0px 0px 370px;
  }}


  @media screen and (max-width: 600px) and (min-width: 200px)

  {.text1 h1 {
    margin: 40px 0px 0px 130px;
    font-size: 13px;
  }}


@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text1 {
  width: 100%;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text1 {
  width: 790px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text1 {
  width: 300px;
}}


.text2 {
  display: inline-block;
  float: left;
  width: 360px;
  padding: 0px 0px 47px 0px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text2 {
  width: 375px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text2 {
  width: 400px;
  padding: 0px 0px 20px 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text2 {
  width: 300px;
  padding: 0px 0px 30px 0px;
}}



.text3 {
  display: inline-block;
  float: left;
  margin: 10px 0px 0px 0px;
  width: 100%;
  padding: 50px 0px 50px 0px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text3 {
  width: 100%;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text3 {
  width: 390px;
  padding: 0px 0px 20px 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text3 {
  width: 300px;
  padding: 0px 0px 40px 0px;
  margin: 0px 0px 0px 0px;
}}



.text5 {
  position: static;
  width: 580px;
  padding: 15px 0px 5px 0px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text5 {
  width: 625px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text5 {
  width: 790px;
  padding: 20px 0px 50px 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text5 {
  width: 300px;
  padding: 0px 0px 50px 0px;
}}


/*------------------text-o-nás----------------*/

.o-nas {                                  /* text o nás */
  display: inline-block;
  float: left;
  margin: -31px 0px 0px 25px;
  width: 550px;
  padding: 45px 10px 26px 17px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: left;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.o-nas {
  margin: -31px 0px 0px 35px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.o-nas {
  margin: -31px 0px 0px 120px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.o-nas {
  margin: -31px 0px 0px 20px;
  width: 260px;
  font-size: 12px;
  text-align: center;
}}

.h1-o-nas {
  display: block;
  margin: 40px 0px 0px 278px;
  width: 47px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.h1-o-nas {
  margin: 40px 0px 0px 287px;
}}


@media screen and (max-width: 900px) and (min-width: 800px)

{.h1-o-nas {
  margin: 40px 0px 0px 370px;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.h1-o-nas {
  margin: 40px 0px 0px 130px;
  font-size: 13px;
}}


/*-----obrázek-o-nás-----*/

.div-o-nas {                                  /* hlavní div */
  display: inline-block;
  float: left;
  margin: -31px 0px 0px 55px;
  width: 300px;
  height: 199px;
  box-shadow: 1px 1px 17px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.div-o-nas {
  margin: -31px 0px 0px 75px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.div-o-nas {
  margin: 20px 0px 0px 245px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.div-o-nas {
  margin: 20px 0px 0px 20px;
  width: 260px;
  height: 179px;
}}


.img-o-nas1 {                                 /* obrázek */
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 199px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.img-o-nas1 {
  width: 260px;
  height: 179px;
}}


/*------------------text-vybavení----------------*/

.text3 p {                                  /* text vybavení */
  display: inline-block;
  float: left;
  margin: -35px 0px 0px 55px;
  width: 550px;
  padding: 50px 10px 26px 17px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: left;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}


@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text3 p {
  margin: -35px 0px 0px 75px;

}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text3 p {
  margin: -30px 0px 0px 120px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text3 p {
  margin: -31px 0px 0px 20px;
  width: 260px;
  font-size: 12px;
  text-align: center;
}}


.text3 h1 {
  display: inline-block;
  margin: 18px 0px 0px 278px;
  width: 119px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.text3 h1 {
  margin: 18px 0px 0px 300px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.text3 h1 {
  margin: 30px 0px 0px 337px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.text3 h1 {
  margin: 40px 0px 0px 100px;
  font-size: 13px;
}}

/*-----obrázek-vybavení-----*/

.div-vybaveni {                                  /* hlavní div */
  display: inline-block;
  float: left;
  margin: 5px 0px 0px 25px;
  width: 300px;
  height: 199px;
  box-shadow: 1px 1px 17px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.div-vybaveni {
  margin: 5px 0px 0px 35px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.div-vybaveni {
  margin: 0px 0px 0px 245px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.div-vybaveni {
  margin: 0px 0px 0px 20px;
  width: 260px;
  height: 179px;
}}


.img-vybaveni1 {                              /* obrázek */
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 199px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.img-vybaveni1 {
  width: 260px;
  height: 179px;
}}


/*------------------virtuální prolhídka----------------*/

.virtualni-prohlidka {                                  /* text */
  display: inline-block;
  margin: 40px 0px 0px 300px;
  width: 360px;
  padding: 8px 10px 18px 10px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.virtualni-prohlidka {
  margin: 50px 0px 0px 320px;
}}

@media screen and (max-width: 900px) and (min-width: 601px)

{.virtualni-prohlidka {
  display: inline-block;
  margin: 0px 0px 0px 265px;
  width: 260px;
  padding: 16px 10px 12px 10px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.virtualni-prohlidka {                                  /* text */
  display: inline-block;
  margin: 20px 0px 0px 20px;
  width: 260px;
  padding: 16px 10px 12px 10px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}}


/*-----*/

.h1-virtualni-prohlidka {
  position: relative;
  top: -3px;
  left: 200px;                                                  /* width - 151*/
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: left;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.h1-virtualni-prohlidka {
  left: 200px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.h1-virtualni-prohlidka {
  top: -5px;
  left: 96px;
  font-size: 12px;
}}

.ikona-vp {
  display: inline-block;
  float: left;
  margin: 10px 0px 0px 25px;
  border-radius: 3px;
  background-color: #e1ab86;
  cursor: pointer;
}

.ikona-vp:hover {
  background-color: #b97b51;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{.ikona-vp {
  margin: 15px 0px 0px 100px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.ikona-vp {
  margin: 18px 0px 0px 95px;
}}


#ikona-vp1 {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 40px;
  color: white;
  padding: 5px 8px;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{#ikona-vp1 {
  font-size: 30px;
}}


.nazev-vp {
  display: inline-block;
  float: left;
  margin: 26px 0px 0px 10px;                            /* width - 189px */
  border-bottom: 1px dotted black;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{.nazev-vp {
  margin: 5px 0px 0px 30px;
  font-size: 12px;
  text-align: center;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.nazev-vp {
  margin: 5px 0px 0px 25px;
  font-size: 13px;
  text-align: left;
}}

/*------------------obrázky-footer----------------*/

.obrazky-footer {                                 /* hlavní div - obrázky a footer */
  position: relative;
  float: left;
  top: 90px;
  left: 20px;
  width: 960px;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.obrazky-footer {
  left: 0px;
  width: 1000px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.obrazky-footer {
  top: 24px;
  left: 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.obrazky-footer {
  top: -229px;
  left: 0px;
  width: 300px;
}}

/*------------------mapa-facebook----------------*/


.mapa-facebook {                                 /* hlavní div - mapa - facebook */
  position: relative;
  float: left;
  top: -5px;
  left: 0px;
  width: 960px;
  height: 300px;
  background-color: #d29063;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.mapa-facebook {
  left: 0px;
  width: 1000px;
  height: 300px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.mapa-facebook {
  width: 790px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.mapa-facebook {
  width: 300px;
  height: 560px;
}}

/*---------------------obrázky---------------------*/

.mapa {                                 /* hlavní div - obrázek */
  display: inline-block;
  float: left;
  margin: 20px 0px 0px 20px;
  width: 512px;
  height: 262px;
  padding: 5px;
  background-color: #ece7df;
  box-shadow: 1px 1px 13px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.mapa {
  margin: 20px 0px 0px 30px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.mapa {
  margin: 20px 0px 0px 15px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.mapa {
  display: none;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.mapa1 {
  display: inline-block;
  float: left;
  margin: 20px 0px 0px 20px;
  width: 260px;
  height: 220px;
  padding: 5px;
  background-color: #ece7df;
  box-shadow: 1px 1px 13px #8c8c8c;
  z-index: 2;
}}


@media screen and (min-width: 601px)

{.mapa1 {
  display: none;
}}


.facebook {                                 /* hlavní div */
  display: inline-block;
  margin: 20px 0px 0px 55px;
  width: 350px;
  padding: 5px;
  height: 260px;
  background-color: #ece7df;
  box-shadow: 1px 1px 13px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.facebook {
  margin: 20px 0px 0px 75px;
}}

@media screen and (max-width: 900px) and (min-width: 200px)

{.facebook {
  display: none;
}}

.facebook1 {
  display: none;
}

@media screen and (min-width: 1025px)

{.facebook1 {
  display: none;
}}

@media screen and (max-width: 900px) and (min-width: 601px)

{.facebook1 {
  display: inline-block;
  margin: 20px 0px 0px 15px;
  width: 232px;
  padding: 5px;
  height: 262px;
  background-color: #ece7df;
  box-shadow: 1px 1px 13px #8c8c8c;
  z-index: 1;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.facebook1 {
  display: inline-block;
  margin: 20px 0px 0px 34px;
  width: 232px;
  height: 262px;
  padding: 5px;
  background-color: #ece7df;
  box-shadow: 1px 1px 13px #8c8c8c;
}}


iframe {
  border: none;
}

/*------------------footer----------------*/

.footer {                             /* hlavní div footer */
  position: relative;
  float: left;
  top: 40px;
  left: 0px;
  width: 960px;
  height: 200px;
  background-color: #ffe5b3;     /*#ffe0a7*/
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.footer {
  left: 0px;
  width: 1000px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.footer {
  width: 790px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.footer {
  width: 300px;
  height: 292px;
}}


.footer1 {
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  width: 960px;
  height: 50px;
  background-color: #d29063;     /*#d29063*/
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.footer1 {
  width: 1000px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.footer1 {
  width: 790px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.footer1 {
  width: 300px;
}}


.ikony {
  position: relative;
  float: left;
  top: 70px;
  left: 30px;
  width: 565px;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.ikony {
  top: 40px;
  left: 90px;
  width: 298px;
  padding: 0px 0px 10px 0px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.ikony {
  top: 10px;
  left: 7px;
  width: 290px;
}}


.div-wifi {                              /* hlavní div ikony */
  position: relative;
  float: left;
  top: 0px;
  left: 0px;
  border-radius: 3px;
  background-color: #e1ab86;
}

#wifi {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 8px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#wifi {
  padding: 3px 3px;
  font-size: 40px;
}}


.div-parkovani {                              /* hlavní div ikony */
  position: relative;
  float: left;
  top: 0px;
  left: 5px;
  border-radius: 3px;
  background-color: #e1ab86;
}

#parkovani {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 8px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#parkovani {
  padding: 3px 3px;
  font-size: 40px;
}}


.div-kuchyne {                              /* hlavní div ikony */
  position: relative;
  float: left;
  top: 0px;
  left: 10px;
  border-radius: 3px;
  background-color: #e1ab86;
}

#kuchyne {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 17px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#kuchyne {
  padding: 3px 12px;
  font-size: 40px;
}}


.div-sport {                              /* hlavní div ikony */
  position: relative;
  float: left;
  top: 0px;
  left: 15px;
  border-radius: 3px;
  background-color: #e1ab86;
}

#sport {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 5px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#sport {
  padding: 3px 1px;
  font-size: 40px;
}}

.div-sprcha {                              /* hlavní div ikony */
  position: relative;
  float: left;
  top: 0px;
  left: 20px;
  border-radius: 3px;
  background-color: #e1ab86;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.div-sprcha {
  top: 5px;
  left: 39px;
}}

#sprcha {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 11px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#sprcha {
  padding: 3px 6px;
  font-size: 40px;
}}


.div-apartman {                              /* hlavní div ikony */
  position: relative;
  top: 0px;
  left: 25px;
  border-radius: 3px;
  background-color: #e1ab86;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.div-apartman {
  top: 5px;
  left: 44px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.div-apartman {
  top: 5px;
  left: 0px;
}}

#apartman {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 8px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#apartman {
  padding: 3px 3px;
  font-size: 40px;
}}


.div-zvirata {                              /* hlavní div ikony */
  position: relative;
  top: 0px;
  left: 25px;
  border-radius: 3px;
  background-color: #e1ab86;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.div-zvirata {
  top: 5px;
  left: 44px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.div-zvirata {
  top: 5px;
  left: 1px;
}}

#zvirata {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 50px;
  color: white;
  padding: 8px 13px;
  cursor: default;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{#zvirata {
  padding: 3px 7px;
  font-size: 40px;
}}


.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #193861;
  color: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  position: absolute;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #506f97 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*----------------kontakt--------------------*/

.kontakt {                                 /* hlavní div */
  position: relative;
  float: left;
  top: 0px;
  left: 60px;
  width: 330px;
  height: 200px;
}

@media screen and (max-width: 900px) and (min-width: 800px)

{.kontakt {
  left: 160px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.kontakt {
  width: 300px;
  top: 30px;
  left: 0px;
}}


.h1-kontakt {
  position: relative;
  top: 0px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.h1-kontakt {
  top: -5px;
  left: 8px;
  font-size: 13px;
  text-align: left;
}}


.adresa {
  position: relative;
  top: 7px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.adresa {
  top: -8px;
  left: 8px;
  font-size: 11px;
  text-align: left;
}}


.span-nazev {
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.span-nazev {
  left: 8px;
  font-size: 12px;
  text-align: left;
}}

/*--------------------gps---------------------*/

.odkaz-gps {
  position: relative;
  top: 7px;
  left: 2px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  color: blue;
  text-decoration: underline;
}

@media screen and (max-width: 600px) and (min-width: 200px)

{.odkaz-gps {
  font-size: 11px;
}}

.odkaz-gps:hover {
  text-decoration: none;
}

.odkaz-gps {
  font-weight: bold;
}

.odkaz-gps:hover {
  text-decoration: none;
}

.odkaz-gps:visited {
  color: blue;
}

.gps {
  position: relative;
  top: 7px;
  left: 2px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.gps {
  top: 7px;
  left: 2px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.gps {
  left: 0px;
  font-size: 11px;
}}

/*--------------------copy---------------------*/

.copy {                                 /* hlavní div */
  position: relative;
  float: left;
  top: 35px;
  left: 392px;
  width: 180px;
  height: 79px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.copy {
  left: 413px;
  width: 180px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.copy {
  left: 308px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.copy {
  top: 5px;
  left: 73px;
  width: 154px;
  height: 10px;
  font-size: 10px;
}}

.web {
  position: relative;
  float: left;
  top: 35px;
  left: 615px;
  width: 175px;
  height: 15px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: black;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.web {
  left: 655px;
  width: 175px;
}}

@media screen and (max-width: 900px) and (min-width: 800px)

{.web {
  left: 445px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.web {
  top: 28px;
  left: 76px;
  height: 79px;
  font-size: 10px;
}}

.web-odkaz {
  color: #4c678c;
  text-decoration: none;
}
.web-odkaz:hover {
  text-decoration: underline;
}

.web-odkaz:visited {
  color: #4c678c;
}



/*------------------virtuální prolhídka----------------*/

.virtualni-prohlidka-en {                                  /* text */
  display: inline-block;
  margin: 40px 0px 0px 300px;
  width: 360px;
  padding: 8px 10px 18px 10px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.virtualni-prohlidka-en {
  margin: 50px 0px 0px 320px;
}}

@media screen and (max-width: 900px) and (min-width: 601px)

{.virtualni-prohlidka-en {
  display: inline-block;
  margin: 0px 0px 0px 265px;
  width: 260px;
  padding: 16px 10px 12px 10px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.virtualni-prohlidka-en {                                  /* text */
  display: inline-block;
  margin: 20px 0px 0px 20px;
  width: 260px;
  padding: 16px 10px 12px 10px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  color: black;
  background-color: #ece7df;
  box-shadow: 1px 1px 17px #8c8c8c;
}}


/*-----*/

.h1-virtualni-prohlidka-en {
  position: relative;
  top: -3px;
  left: 200px;                                                  /* width - 151*/
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  text-align: left;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 1366px) and (min-width: 1361px)

{.h1-virtualni-prohlidka-en {
  left: 200px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.h1-virtualni-prohlidka-en {
  top: -5px;
  left: 96px;
  font-size: 12px;
}}

/*-----*/

.ikona-vp-en {
  display: inline-block;
  float: left;
  margin: 10px 0px 0px 60px;
  border-radius: 3px;
  background-color: #e1ab86;
  cursor: pointer;
}

.ikona-vp-en:hover {
  background-color: #b97b51;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{.ikona-vp-en {
  margin: 15px 0px 0px 100px;
}}

@media screen and (max-width: 600px) and (min-width: 200px)

{.ikona-vp-en {
  margin: 18px 0px 0px 95px;
}}


#ikona-vp1-en {
  position: relative;
  top: 0px;
  left: 0px;
  font-size: 40px;
  color: white;
  padding: 5px 8px;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{#ikona-vp1-en {
  font-size: 30px;
}}


.nazev-vp-en {
  display: inline-block;
  float: left;
  margin: 26px 0px 0px 45px;                            /* width - 189px */
  border-bottom: 1px dotted black;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  color: black;
  z-index: 1;
}

@media screen and (max-width: 900px) and (min-width: 601px)

{.nazev-vp-en {
  margin: 5px 0px 0px 60px;
  font-size: 12px;
  text-align: center;
}}


@media screen and (max-width: 600px) and (min-width: 200px)

{.nazev-vp-en {
  margin: 5px 0px 0px 65px;
  font-size: 13px;
  text-align: left;
}}