@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);



.bg{

    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));

}





.imgoverlay{



width: 300px;

height: 45px;

background-color: #ffffeeef;

text-align: center;

font-size: 20px;

line-height: 45px;



font-weight: 700;

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







}





  



#sluzby{



padding: 2px 0px;



}



#aboutpc{



}



#aboutmo{



display: none;



}



.h1ab{



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

  font-size: 50px;

  text-align: center;

font-weight: 700;

padding-top: 50px;

}



.abouth2{



  color: #73a012; font-size: 18; font-weight: 700; letter-spacing: 2px;



}









.pab{

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

  font-size: 15px;

  color: #7e7e7e;



  text-align: center;

  padding: 15px 50px;



}



#privateimg{



  height: 600px;

  background-image: url(Pics/privateedit.png);

  background-position: center;

  background-size: cover;

  background-size: 130%;

  transition: all 1s ease;

 -moz-transition: all 1s ease;

 -ms-transition: all 1s ease;

 -webkit-transition: all 1s ease;

 -o-transition: all 1s ease;

 border-right: 1px solid white;

}

#privateimg:hover{

  

  background-size: 145%;

  cursor: pointer;

   

}





#commerceimg{



  height: 600px;

  background-image: url(Pics/komercni.jpg);

  background-position: center;

  background-size: cover;

  background-size: 130%;

  transition: all 1s ease;

 -moz-transition: all 1s ease;

 -ms-transition: all 1s ease;

 -webkit-transition: all 1s ease;

 -o-transition: all 1s ease;

 border-left: 1px solid white;

}

#commerceimg:hover{

  

  background-size: 145%;

  cursor: pointer;

   

}



#imgabout{

  height: 700px;

   background-image: url(Pics/about.jpg);



}

.hero_private{





  width: 100%;

  height: 450px;

  background-image: url(Pics/osobnihero.png);

 background-size:     cover;                      /* <------ */

    background-repeat:   no-repeat;

    background-position: center center;  





}



.hero_private_k{





  width: 100%;

  height: 450px;

  background-image: url(Pics/mainkomercni.png);

 background-size:     cover;                      /* <------ */

    background-repeat:   no-repeat;

    background-position: center center;  





}



.private_container{

display: flex;

justify-content: center;

position: absolute;

left: 50%;

top: 25%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

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

font-size: 60px;

text-align: center;

font-weight: 700;

color: white;



}







#container_ref{



  display: flex;

   margin: 10px 20px;

    flex-wrap: wrap;

  

}



#ref_item{

  background-color: transparent;

   height: 360px;

   

    background-position: center;

    background-size: cover;

    margin: 15px 0px;

    transition: 0.4s;

   

}



#clickable_ref{



  cursor: zoom-in;

}



#list_r{



  position: absolute;

    z-index: 10;

    text-align: center;

 margin-top: 15px;

 padding-left: 10px;

 

}





#list_r li{



  float: left;

  display: block;

  margin: 0 3px;

  width: 10px;

  height: 10px;



}







#list_r li a{



  display: block;

  cursor: pointer;

  text-indent: -9999px;

  width: 10px;

  height: 10px;

  border: 1px solid #fff;

  border-radius: 50%;

}



.item_num{



color: white;

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

margin-left: 10px;

font-size: 50px;

}



.item_num_k{



color: white;

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

margin-left: 10px;

font-size: 35px;

}





.activated{



  background-color: white;

  transition: 0.4s;

  }







@media all and (max-width: 900px) {

  .private_container{

    display: flex;

    justify-content: center;

    position: absolute;

    left: 50%;

    top: 40%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

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

    font-size: 40px;

    text-align: center;

    font-weight: 700;

    color: white;

    

    }





  

  

  

  

  #imgabout{

    height: 500px;

     background-image: url(Pics/about.jpg);

     background-position: center;

  }



  #aboutpc{



display: none;

  }

  

  #aboutmo{

  

display: block;

  

  }

  

  .imgoverlay{



    width: 300px;

    height: 45px;

    background-color: #ffffeeef;

    text-align: center;

    font-size: 20px;

    line-height: 45px;

    

    font-weight: 700;

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

   

    

    

    }





    



   

    

    

    #privateimg{

    

      height: 400px;

      background-image: url(Pics/privateedit.png);

      background-position: center;

      background-size: 200%;

    

     

    

    }



    #privateimg:hover{

  

      background-size: 210%;

      cursor: pointer;

       

    }

   

    #commerceimg{

    

      height: 400px;

      background-image: url(Pics/komercni.jpg);

      background-position: center;

    border-top: 2px solid white;

      background-size: 200%;

      

    }

    



    #commerceimg:hover{

  

      background-size: 210%;

      cursor: pointer;

       

    }

    



}



.center{

display: flex;

justify-content: center;

position: absolute;

  left: 50%;

  top: 48%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}



html, body {

  height: 100%;

  padding: 0;

  margin: 0;

}

section {

  position: relative;

  width: 100%;

  height: 95%;

  text-align: center;

}

section::after {

  position: absolute;

  bottom: 0;

  left: 0;

  content: '';

  width: 100%;

  height: 80%;

  

}





#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}

#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}

#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}

#section04 { background: url(Pics/HeroDone.jpg) center center / cover no-repeat;}

#section05 { background: url(Pics/HeroDone.jpg) center center / cover no-repeat;}

#section06 { background: url(https://picsum.photos/1200/800?image=901) center center / cover no-repeat;}

#section07 { background: url(https://picsum.photos/1200/800?image=675) center center / cover no-repeat;}

#section08 { background: url(https://picsum.photos/1200/800?image=1050) center center / cover no-repeat;}

#section09 { background: url(https://picsum.photos/1200/800?image=902) center center / cover no-repeat;}

#section10 { background: url(https://picsum.photos/1200/800?image=516) center center / cover no-repeat;}

@media all and (max-width: 800px) {



  #section04 { background: url(Pics/HeroDoneM.jpg) center center / cover no-repeat;}

  #section05 { background: url(Pics/HeroDoneM.jpg) center center / cover no-repeat;}



}







.demo a {

  position: absolute;

  bottom: 20px;

  left: auto;

  

  z-index: 2;

  display: inline-block;

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  color: #fff;

  font : normal 400 20px/1;

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

  letter-spacing: .1em;

  text-decoration: none;

  transition: opacity .3s;

}

.demo a:hover {

  opacity: .5;

  color: white;

  text-decoration: none;

}



@media all and (min-width: 1350px) {

	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }

	.navbar .nav-item:hover .nav-link{ color: #fff;  }

	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }

	.navbar .dropdown-menu.fade-up{ top:180%;  }

  .navbar .nav-item:hover .dropdown-menu{margin-left: 17.5px; transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }





#section05 a {

    padding-top: 70px;

  }

  #section05 a span {

    position: absolute;

    top: 0;

    left: 50%;

    

    width: 24px;

    height: 24px;

    margin-left: -12px;

    border-left: 1px solid #fff;

    border-bottom: 1px solid #fff;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-animation: sdb05 1.5s infinite;

    animation: sdb05 1.5s infinite;

    box-sizing: border-box;

  }

  @-webkit-keyframes sdb05 {

    0% {

      -webkit-transform: rotate(-45deg) translate(0, 0);

      opacity: 0;

    }

    50% {

      opacity: 1;

    }

    100% {

      -webkit-transform: rotate(-45deg) translate(-20px, 20px);

      opacity: 0;

    }

  }

  @keyframes sdb05 {

    0% {

      transform: rotate(-45deg) translate(0, 0);

      opacity: 0;

    }

    50% {

      opacity: 1;

    }

    100% {

      transform: rotate(-45deg) translate(-20px, 20px);

      opacity: 0;

    }

  }

 



  #navitems{

    margin: 0px 30px;

    font-family: 'poiret_oneregular';

  font-size: 30px;

  font-weight: 300;

  transition: .3s;

    position: relative;

    padding:0;

    top: 50%;

   -ms-transform: translateY(-50%);

   transform: translateY(-50%);

   

  }

  

  #navitemsl{

    margin: 0px 30px;

    font-weight: 300;

    font-family: 'poiret_oneregular';

  font-size: 25px;

  transition: .3s;

    position: relative;

    padding:0;

    top: 50%;

   -ms-transform: translateY(-50%);

   transform: translateY(-50%);

  }

  

  

  #navbarDropdownMenuLink{

    font-weight: 300;

    margin: 0px 25px;

    font-family: 'poiret_oneregular';

  font-size: 30px;

  transition: .3s;

    position: relative;

    padding:0;

    top: 50%;

   -ms-transform: translateY(-50%);

   transform: translateY(-50%);

   

  }

  

  

  #navitemsd{

    font-weight: 500;

    font-family: 'metropolis_regularregular';

  font-size: 20px;

  

  }

 

 



#navmob{



display: none;



}



  .navbarr{

    width: 100%;

    display: flex;

    justify-content: flex-end !important;

    margin-right:0px;

    

    height: 100px;

    }



        a#navitems:before {

            content: "";

            position: absolute;

            width: 100%;

            height: 2px;

            bottom: 0;

            left: 0;

            opacity: 1;

            background-color: #FFF;

            visibility: hidden;

            transform: scaleX(0);

            transition: all 0.3s ease-in-out;

          }

        

        

        a#navitems:hover:before {

            visibility: visible;

            transform: scaleX(1);

          }

        }

  html{



overflow-x: hidden;

scroll-behavior: smooth;

  }



  @media (max-width:1351px){

#navpc{



display: none;



}



.item_num_k{



color: white;

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

margin-left: 10px;

font-size: 20px;

}





#navmob{



display: flex;



}



  }

  #navitemsm{

    font-family: 'metropolis_regularregular' !important;



  }

  .site-footer

{

  background-color:#26272b;

  padding:45px 0 20px;

  font-size:15px;

  line-height:24px;

  color:#737373;



}

.site-footer hr

{

  border-top-color:#bbb;

  opacity:0.5

}

.site-footer hr.small

{

  margin:20px 0

}

.site-footer h6

{

  color:#fff;

  font-size:16px;

  text-transform:uppercase;

  margin-top:5px;

  letter-spacing:2px

}

.site-footer a

{

  color:#737373;

}

.site-footer a:hover

{

  color:#3366cc;

  text-decoration:none;

}

.footer-links

{

  padding-left:0;

  list-style:none

}

.footer-links li

{

  display:block

}

.footer-links a

{

  color:#737373

}

.footer-links a:active,.footer-links a:focus,.footer-links a:hover

{

  color:#3366cc;

  text-decoration:none;

}

.footer-links.inline li

{

  display:inline-block

}

.site-footer .social-icons

{

  text-align:right

}

.site-footer .social-icons a

{

  width:40px;

  height:40px;

  line-height:40px;

  margin-left:6px;

  margin-right:0;

  border-radius:100%;

  background-color:#33353d

}

.copyright-text

{

  margin:0

}

@media (max-width:991px)

{

  .site-footer [class^=col-]

  {

    margin-bottom:30px

  }

}

@media (max-width:767px)

{

  .site-footer

  {

    padding-bottom:0

  }

  .site-footer .copyright-text,.site-footer .social-icons

  {

    text-align:center

  }

}

.social-icons

{

  padding-left:0;

  margin-bottom:0;

  list-style:none

}

.social-icons li

{

  display:inline-block;

  margin-bottom:4px

}

.social-icons li.title

{

  margin-right:15px;

  text-transform:uppercase;

  color:#96a2b2;

  font-weight:700;

  font-size:13px

}

.social-icons a{

  background-color:#eceeef;

  color:#818a91;

  font-size:16px;

  display:inline-block;

  line-height:44px;

  width:44px;

  height:44px;

  text-align:center;

  margin-right:8px;

  border-radius:100%;

  -webkit-transition:all .2s linear;

  -o-transition:all .2s linear;

  transition:all .2s linear

}

.social-icons a:active,.social-icons a:focus,.social-icons a:hover

{

  color:#fff;

  background-color:#29aafe

}

.social-icons.size-sm a

{

  line-height:34px;

  height:34px;

  width:34px;

  font-size:14px

}

.social-icons a.facebook:hover

{

  background-color:#3b5998

}

.social-icons a.twitter:hover

{

  background-color:#00aced

}

.social-icons a.linkedin:hover

{

  background-color:#007bb6

}

.social-icons a.dribbble:hover

{

  background-color:#ea4c89

}

@media (max-width:767px)

{

  .social-icons li.title

  {

    display:block;

    margin-right:0;

    font-weight:600

  }

}



@media all and (max-width: 500px) {



  #ref_item{

    background-color: transparent;

     height: 200px;

     

      background-position: center;

      background-size: cover;

      margin: 5px 0px;

      transition: 0.4s;

  }

  #list_r{



    position: absolute;

      z-index: 10;

      text-align: center;

   margin-top: 0px;

   padding-left: 10px;

   

  }

  #container_ref{



    display: flex;

     margin: 5px 0px;

      flex-wrap: wrap;

    justify-content: center;

  }



}



#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 1000;display:flex;justify-content:center;}



#loading-image {position: absolute;z-index: 1001;top: 50%;-ms-transform: translateY(-50%); transform: translateY(-50%);} 


#imgk{

  height: 110px;
  display:block;
  }
  #imgk2{
  
    height: 92px;
    width: 110px;
    display:block;
    }

    #jsk{

      display:flex;
      justify-content: center;
      
      }
      #kh{

        font-family: 'Montserrat', sans-serif;
      font-size: 40px;
      font-weight: 500;
      display:block;
      text-align: center;
      }
      #kht{
        color: #565656;
          font-family: 'Montserrat', sans-serif;
        font-size: 30px;
        font-weight: 300;
        display:block;
        text-align: center;
        line-height: 50px;
        }
        #pdk{

          padding-top: 0px;
          
          }