body{

  overflow-x: hidden;

  font-family: 'Ubuntu', sans-serif;

  margin: 0;

  padding: 0;

  -moz-user-select: none;

  user-select: none;

}



#ExplorerSmallScreen{

  display: none;

}



a{

  text-decoration: none;

  color: inherit;

}



#vacation{

  background-color: yellow;

  width: 100%;

  height: 25px;

  position: sticky;

  top: 0px;

  z-index: 2;



  display: flex;

  justify-content: center;

  align-items: center;

  font-style: italic;

}



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



  #logo{

    display: none;

  }

  .start{

    text-align: center;

    color:white;

    font-size:28px;

    font-weight:bolder;

    position: absolute;

    top: 150px;

  }

  .welcome{

    color: white;

    font-size: 20px;

    text-align: center;

    font-weight: bold;

    position: absolute;

    top: 420px;

  }

  #B22{

    display: grid;

    grid-template-columns: auto;

    grid-template-rows: 550px 6vw 550px;

  }

  #porad{

    text-align: right;

    grid-row: 1;

    max-width: 330px;

  }

  #zbozi{

    text-align: right;

    margin: 15px 0 0 -575px;

    grid-row: 3;

    max-width: 330px;

  }

  .sluzbypic{

    display:none;

  }

  #hiddenOnMobile{

    display: none;

  }



}



#logo{

  position: fixed;

  top: 4px;

  left: 0.5vw;

  width: 200px;

  height: 65px;

  z-index: 1;



  background-image: url("logo.png");

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

  cursor: pointer;



  padding-top: 27px;

}



.header{

  width: 100vw;

  height: 72px;

  position: fixed;

  top: 0;

  background-color: transparent;

  transition: background-color 0.35s;



  display: flex;

  flex-flow: row-reverse;

  z-index: 1;



  padding-top: 27px;

}



.scrolledMenu{

  background-color: white;

}



.button{

  width: 80px;

  height: 30px;

  margin: 12px;

  margin-top: 18px;

  padding-top: 6px;



  text-align: center;

  border-radius: 4px;

  border: 2px solid transparent;

  transition: border-color 0.5s;



  color: white;

  font-size: 18px;

}



.active{

  border: 2px solid white;

}



.button:hover{

  border-color: white;

}



.button2{

  width: 80px;

  height: 30px;

  margin: 12px;

  margin-top: 18px;

  padding-top: 6px;



  text-align: center;

  border-radius: 4px;

  border: 2px solid transparent;

  transition: border-color 0.5s;



  color: black;

  font-size: 18px;

}



.active2{

  border: 2px solid black;

}



.button2:hover{

  border-color: black;

}



#body{

  width: 100vw;

  display: flex;

  flex-flow: column;

}



#B1{

  height: 850px;

  background-color: lightgrey;

  background-image: url("welcomeBackground.jpg");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;



  display: flex;

  flex-flow: column;



  justify-content: center;

}



.start{

  text-align: center;

  color:white;

  font-size:36px;

  font-weight:bolder;

}



.welcome{

  color: white;

  font-size: 24px;



  text-align: center;

  font-weight: bold;

}



#B2{

  height: 750px;

  background-color: white;

  background-image: url("sluzbyBackground.png");



  display: flex;

  flex-flow: column;

  text-align: center;

  color: #424242;

}



#B21{

  font-size: 36px;

  margin: 70px 0 50px 0;

  font-weight: bolder;

}



#B22{

  /*display: flex;

  flex-flow: row;



  justify-content: space-around;

  align-items: flex-start;*/

  display: grid;

  grid-template-columns: auto 550px 6vw 550px auto;

  grid-template-rows: auto;

}



#porad{

  text-align:right;

  grid-column: 2;

}



#poradTitle{

  font-size:22px;

  font-weight:bold;

  margin:0 0 23px 0;

}



#zbozi{

  grid-column: 4;

}



#zboziTitle{

  font-size:22px;

  font-weight:bold;

}



.sluzby{

  display: inline-flex;

  flex-flow: column;

  max-width: 550px;

  text-align: left;

  font-size: 18px;

}



.sluzbypic{

  margin: 25px 0 25px 0;

  width: 500px;

  height: 300px;

}



#B3{

  height: 750px;

  background-color: lightgrey;

  background-image: url("ONasBackground.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  color: white;

  line-height: 1.6;

}



#onas{

  padding: 25px;

  text-align: justify;

  max-width: 80vw;

  margin-left: 8vw;

}



#onasTitle{

  margin:65px 0 30px 0;

  font-size:calc(22px + 0.75vw);

  text-align:center;

}



.onasText{

  font-weight:bold;

  font-size:calc(18px + 0.25vw);

}



#B4{

  background-color: white;

}



#contactInfo{

  padding: 25px 0 0 0;

  text-align: center;

  display: flex;

  flex-flow: column;

  align-items: center;

}



.openHours{

  margin: 25px;

  align-content: center;

  font-size: 18px;

}



.contactMenu{

  margin-top: 25px;

  height: auto;

  width: 100vw;

  background-color: rgb(110,110,110);

  color: white;

  display: flex;

  flex-flow: row;

  justify-content: space-around;

}



.contactButtons{

  border: 2px solid transparent;

  transition: border-color 0.5s;

  border-radius: 5px;

  padding: 6px;

}



.contactButtons:hover{

  border-color: white;

}



.contactButtons:active{

  box-shadow: -2px -2px #e6e6e6;

  margin: 2px 0 0 2px;

}



#mapContainer{

   dispay:flex;

   flex-flow:column;

   padding: 25px;

   align-content: center;

}



#footer{

  height: 250px;

  background-color: rgb(58,132,255);

  display: flex;

  flex-flow: column;

  align-items: center;

}



#facebook{

  width: 50px;

  height: 50px;

  border-radius: 25px;

  color: #3b5998;

  background-color: white;

  text-align: center;

  font-size: 48px;

  font-weight: bolder;

  font-family: sans-serif;

  transition: background-color 0.5s;

  transition: color 0.5s;

  user-select: none;

  cursor: pointer;

}



#facebook:hover{

  background-color: grey;

  color: white;

}



#facebook:active{

  transform: translateY(2px);

}





/*Internet Explorer handling - coz IE is shit!*/

@media screen and (-ms-high-contrast: active) and (max-width: 1200px), (-ms-high-contrast: none) and (max-width: 1200px){

  #body{

    display: none;

  }



  #ExplorerSmallScreen{

    display: block;

    position: absolute;

    top: 180px;

    margin-left: 50px;

  }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

   .welcome {

     color: white;

     font-size: 26px;



     position: absolute;

     top: 495px;



     text-align: center;

     font-weight: bold;



     left: 15vw;

   }

   .Start{

     left: 27vw;

   }

   #B21 {

     text-align: center;

     font-size: 26px;

   }

   #porad{

     left: calc( 25px + 12vw);

     position: absolute;

     top: 1000px;

   }

   #zbozi{

     margin-left: calc(250px + 42vw);

     position: absolute;

     top: 1000px;

   }



   .header{

     width: 100vw;

     height: 72px;

     position: fixed;

     top: 0;

     background-color: white;

     display: flex;

     flex-flow: row-reverse;

     z-index: 1;

   }



   .button{

     width: 80px;

     height: 30px;

     margin: 12px;

     margin-top: 18px;

     padding-top: 6px;



     text-align: center;

     border-radius: 4px;





     color: black;

     font-size: 18px;

   }



   .active{



   }



   .button:hover{

     border-color: black;

   }



}



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

  #vacation{

    height: 62px;

  }



  #header{

    padding-top: 48px;

  }

}