body{
  font-family: 'Varela Round', sans-serif; 
}
#top{
  background: #c7b099;
  padding: 0px 0;
  z-index: 10000;
  position: relative;
}                 
.logo{
  margin-top: 12px;
}
.logo a{
font-size: 18px;
  color: #fff;
}
#head{
  width: 100%;
  background: url('upbg.png') top center repeat-x;
}    
#head .container{
         
  width: 895px;
  
}
.container{
         
  width: 895px !important;
  
}
#section_title{
  color: #6b4542;
  text-align: center;
  font-size: 18px;
}
.divider{
  width: 182px;
  height: 21px;
  background: url('divider.png') center center no-repeat;
  margin: 0 auto;
  margin-bottom: 40px;
}
.form{
  background: rgba(255,255,255,0.5);
  height: 330px;
  margin-left: 40px;
  margin-top: 20px;
  padding: 10px;
  float: left; width: 280px;
}
.form input{
  background: rgba(255,255,255,0.5);
  width: 100%;
  text-align: left;
  border: none;
  padding: 15px;
  outline: none;
  font-size: 12px;
  color: #fff !important;
  padding: 10px;
  margin-top: 15px; 
}      
.form input::placeholder{
  color: #fff !important;
}
.form select{
  background: rgba(255,255,255,0.5);
  width: 100%;
  text-align: left;
  border: none;
  padding: 15px;
  outline: none;
  font-size: 12px;
  color: #fff !important;
  padding: 10px;
  margin-top: 15px; 
}      
.form select::placeholder{
  color: #fff !important;
}
.title{
  background: #C7B099;  
  color: #6b4542;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  padding: 5px;  
}
.sub{
  background: #C7B099 !important;  
  color: #6b4542 !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 17px !important;
  padding: 5px !important;  
}
a:hover{
  text-decoration: none;
}
#logosection img{
  max-width: 100%;
  margin-top: 25px;
  margin-bottom: 0px;
}
.main_menu{
  list-style: none;
  display: inline-block;  
  margin-top: 5px;
  padding: 0;  
  margin-bottom: 0px;
}
.main_menu li{
  float: left;
}
.main_menu li a{
  color: #fff;
  padding: 10px 0px;
  margin: 0 15px;
  float: left;          
  transition: ease 0.2s;
}
.main_menu li a:hover{
  padding: 10px 0px;
  float: left;                 
  color: #fff !important;    
}
.active{
  color: #fff !important;
}
#hometext h1{    
  float: left;
  margin-top: 250px;              
  font-family: 'Open Sans', sans-serif; 
  color: #fff;             
  font-weight: 200;
}
#tabletserver img{
  margin-top: 161px;
  margin-bottom: 55px;
  max-width: 100%;
}
.sto_procent{
  max-width: 100%;  
  transition: ease 0.2s;
  opacity: 0.8; 
} 

.sto_procent:hover { 
  opacity: 1; 
}
#hometext p{ 
  color: #fff;               
  font-weight: 100;
  line-height: 24px;
}            
#hometext a{   
  display: block;
  float: left;
  margin-top: 22px;
  margin-right: 22px;    
  padding: 10px 45px;  
  color: #fff;
  border: 2px solid #fff;  
  margin-top: 30px;
  border-radius: 50px;   
  transition: ease 0.2s;
}                  
#hometext a:hover{
  color: #484b79;
  text-shadow: none;
  background: #fff;
}       
.mini_divider{
  height: 2px;
  background: #fff;
  width: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.mini_divider2{
  height: 2px;
  background: #fff;
  width: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#clientsection a{
  float: right;           
  margin-top: 2px;
  margin-right: 5px;    
  padding: 10px 5px;  
  color: #000;
  border-radius: 50px;          
  transition: ease 0.2s;
}                            
#clientsection a:hover{
  color: #fff;
  text-shadow: none;
}       
#foot{
  margin: 0px;
  height: 268px;
  width: 100%;
  background: url('footbg.png') center top repeat-x;  
  z-index: 9000;
  position: relative;
}
#footlogo{
  max-width: 100%;
  margin-top: 0px;
  margin-bottom: 60px;
}
#footcopy{     
  color: #000;
  margin-top: 40px;
  margin-bottom: 40px;
}
#footsection .title{
  color: #000;
  font-size: 17px;
}
#footsection ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#footsection ul li{
  padding: 3px 0;
}  
#footsection ul li a{    
  color: #000;    
  transition: ease 0.2s;
}               
#footsection ul li a:hover{
  color: #000;
}   
#macbook{
  background: url('images/macbook_footer.jpg') center center no-repeat;
  width: 100%;
  height: 773px;
}
#hardware{
  padding: 60px 0 180px;
  width: 100%;
}                 
.hardware_title{
  text-align: center;
  color: #7177bf;              
}          
.contact_title{  
  text-align: center;    
  margin-top: 30px;
}
.contact_inner{
  width: 713px;
  margin: 0 auto;
  color: #fff;
  margin-top: 55px;
}
.contact_title .title{  
  color: #7177bf;     
  font-size: 36px;
}
.hardware_title .title{
  font-size: 36px;
}
#hardware .partner{
  margin-top: 40px;
}
#contact_form{
  background: url('images/contact_form.jpg') center center;
  width: 100%;
  height: 776px;
}


.contact_left{
  float: left;
  width: 54.5%;
}
.contact_right{
  float: right;
  width: 36%;
  margin-top: 156px;
  margin-right: 1%;
  color: black;
}   
.info{
  font-style: italic;
  color: #878787;
}
.phone{
  font-size: 20px;
}
.contact_right .title{  
  color: #7177bf;   
  font-size: 26px;
}
.contact_input{        
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.36);
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  margin-right: 0px;    
  padding: 10px 15px;  
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
  border-radius: 50px;          
  transition: ease 0.2s;
}                            
.contact_input:focus{
  color: #484b79;
  text-shadow: none;
  background: #fff;
}       
.contact_input_textarea{        
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.36);
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  margin-right: 0px;    
  padding: 10px 15px;  
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;            
  height: 101px;
  border-radius: 20px;
  resize: none; 
  transition: ease 0.2s;
}                            
.contact_input_textarea:focus{
  color: #484b79;
  text-shadow: none;
  background: #fff;
}          
.contact_submit{     
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.36);
  background: transparent;
  float: right;
  margin-top: 10px;
  margin-right: 0px;    
  outline: none;
  padding: 10px 15px;  
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;          
  transition: ease 0.2s;
}                            
.contact_submit:hover{
  color: #484b79;
  text-shadow: none;
  background: #fff;
}     
#numbers{
  background: #f9f9ff url('images/numbers_bg.png') center center no-repeat;
  width: 100%;
  color: #7177bf;   
  padding-bottom: 129px;
  padding-top: 132px;   
  
  text-align: center;
}
#numbers .number_title{      
  font-size: 33px;
}
.first_line{
  margin-top: 480px;
}
.second_line{
  margin-top: 172px;
}

#services{
  background: #fff;
  margin: 30px 0;
}
#services .box{
  background: #a70000;
  padding: 30px;
  color: #fff;
  box-shadow: 0px 0px 8px #0000003d;
  
}
.parttitle{
  font-size: 20px;
}
.box a{       
  display: block;
  margin-top: 10px;
  margin-bottom: -5px;
  padding: 5px 15px;  
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50px;          
  transition: ease 0.2s;
}                         
.box a:hover{
  color: #000;
  text-shadow: none;
  background: #fff;
}         
#about{
  background: #fff;
  
  margin: 30px 0 0;
  padding-bottom: 30px;     
  z-index: 10020;
  position: relative;
}
#about img{
  box-shadow: 0px 0px 8px #0000003d;
}
.titleabout{
  font-size: 20px;
}             
#about a{       
  display: block;
  margin-top: 10px;
  margin-bottom: -5px;
  padding: 5px 15px;  
  color: #000;
  border: 2px solid #000;
  border-radius: 50px;          
  transition: ease 0.2s;
  text-align: center;
}                         
#about a:hover{
  color: #fff;
  text-shadow: none;
  background: #000;
}  
#form{
  background: url('images/formbg.jpg') center center repeat-y;
  margin: 0px 0 0;       
  padding: 30px 0;
  color: #000;
  z-index: 10000;
  box-shadow: 0px 0px 8px #00000061;
  position: relative;
}           
.bxnt{       
  display: block;
  margin-top: 10px;
  margin-bottom: -5px;
  padding: 5px 15px;  
  color: #000;
  background: transparent;
  border: 2px solid #000;
  border-radius: 50px;          
  transition: ease 0.2s;
  text-align: center;
}                         
.bxnt:hover{
  color: #fff;
  text-shadow: none;
  background: #000;
}  
.part3{
  float: left;
  width: 30%;
  margin-right: 1.5%;
}
.part2{
  float: left;
  width: 48%;
  margin-right: 1.5%;
}
.popisek{
  margin-top: -68px;
  background: #ffffff61;
  color: white;
  font-size: 18px;
  z-index: 2000;
  position: relative;
  width: 93%;
  /* height: 20px; */
  padding: 8px 0;
}                                                                                                                                                    +

.ui-widget-header{
  color: #222;
}

.ui-datepicker .ui-datepicker-header{
  border-color: #c7b099;
  background: #c7b099;
}

.ui-state-highlight{
  background: #c7b099 !important;
  color: #fff !important;
  border-color: #c7b099 !important;
}

.ui-state-active{
  background: #a2703e !important;
  color: #fff !important;
  border-color: #a2703e !important;
}


.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {                   
    -moz-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    position: relative;
    display: inline-block; 
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 35px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000000;
    transform: translate(-50%);
    left: 50%;
}
.dropdown-content a {
    color: black;
    padding: 9px 10px;
    text-decoration: none;
    display: block;
    width:100%;
    background: #fff;       
    color: gray !important;
}
.dropdown-content a:hover {
  background-color: #896429;
  color: #fff !important;
}
.dropdown:hover .dropdown-content {   
    display: block;
}
.dropdown:hover .dropbtn {       
    background-color: #896429;
}
.dropdown-content a{
  font-size: 14px !important;
}

@media(max-width: 1000px){
  .container{
      width: 95% !important;
      margin: 0 auto !important;
  }
  #main_slide_show div{
    width: 100% !important;
    padding-left: 0px !important;
    left: 0 !important;
    padding-right: 0px !important;
  }
  #main_slide_show div div{
  }
  #main_slide_show{
    background: none !important;

  }
  .col-md-4{

    margin-bottom: 40px;
  }
  #foot{
      background: none !important;

  }
  .part2{
    width: 100% !important;
    margin: 0 auto !important;

    margin-bottom: 20px !important;
  }
  .logo {
    margin-top: 0px;
  }
  .main_menu li {
    float: left;
    width: 100%;
  }
  #clientsection a{
    display: inline;
    float: none;
  }
  #clientsection{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #menuer{
    display: block;
    width: 100%;
    background: #2f1907;
    border-radius: 5px;
    padding: 5px 0;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
  }
  .onlymobile{
    display: block !important;
  }
  .logohide{
    display: none !important;
    
  }
  .main_menu{
    display: none;
  }
  #menuer{
    display: block;
  }
  .rez{
    top: 200px !important;

  }
}
@media(min-width: 1000px){
  .main_menu{
    display: block !important;
  }
  #menuer{
    display: none;
  }
  .onlymobile{
    display: none !important;
  }
  .logohide{
    display: block !important;

  }
}

.part6{
  width: 20%;
  margin: 1% 2.5%;
  float: left;
}