html { width: 100%; height: 100%; box-sizing: border-box;}

body 
   {
      margin: 0px;
      width: 100%;
      height: 100%;
      font-family: 'Raleway';
      font-size: 14px;
   }
   
a { text-decoration: none; color: #ffffff; }
   
ul
   {
      margin: 0px;
      padding: 0px;
   }
   
ul li
   {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
   }
   
.clear
   {
      clear: both;
   }
   
.intro
   {
      width: 100%;
      height: auto;
      min-height: 50%;
      display: block;
      background: #ec008c;
	  text-align: center;	  
   }
   
.intro header img.logo
   {
      width: 200px;

   }
   
.intro header
   {
      width: calc(100% - 100px);
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 50px;
   }
   
.intro header nav
   {
      float: right;
      padding-top: 10px;
   }
   
.intro header nav ul li
   {
      display: inline-block;      
      padding-left: 10px;
      padding-right: 10px;
   }
   
.intro header nav ul li a
   {
     font-size: 20px;
     font-weight: 600;
   }
   
.intro header nav ul li a 
   {
      position: relative;
   }

.intro header nav ul li a:after
   {
      content: '';
      position: absolute;
      width: 0; height: 3px;
      display: block;
      margin-top: 5px;
      right: 0;
      background: #ffffff;
      transition: width .2s ease;
      -webkit-transition: width .2s ease;
   }
 
.intro header nav ul li a:hover:after
   {
      width: 100%;
      left: 0;
      background: #ffffff;
   }
   
.intro .motto
   {
      color: #ffffff;
      text-align: center;
      position: relative;
margin-top: 50px;
      padding-left: 50px;
      padding-right: 50px;
   }
   
.intro .motto h1
   {
      margin: 0px;
      font-size: 36px;
      margin-bottom: 10px;
      width: 100%;
      text-align: center;
	  display: block;
	  
   }
   
.intro .motto h2
   {
      font-size: 22px;
      font-weight: 400;
      margin: 0px;
      padding: 0px;
   }
   
.intro .aktualizace
   {
      font-size: 18px;
      padding: 10px;
      border: 3px solid #ffffff;
      display: inline-block;
      font-weight: bold;
      margin-top: 50px;
      margin-bottom: 50px;
   }
   
.nav_klienti
   {
      font-size: 30px;
      display: inline-block;
      padding: 10px;
      width: 190px;
      border: 3px solid #ffffff;
      color: #ffffff;
      font-weight: 600;
      margin-left: auto;
      margin-right: auto;
	  text-align: center;
      position: absolute;
      left: calc(50% - 108px);
      margin-top: 40px;
      z-index: 1000;
   }
   
.reference
   {
      text-align: center;   
      color: #ffffff;
      background: #000000;
      width: 100%;   
      padding-bottom: 40px;
   }
   
.reference h2
   {
      margin: 0px;
      padding: 0px;
      padding-top: 20px;
      padding-bottom: 10px;
   }
   
.reference ul
   {
      margin: 0px;
      padding: 0px;
	  
      width: 100%;
      text-align: center;
	  
      display: flex;
      flex-wrap: wrap;
      list-style-type: none;
      justify-content: left;
   }
   
   
.reference ul li
   {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      text-align: center;
      border-box: box-sizing;
	  
      flex-basis: 16.66%;
      float: left;
      overflow: hidden;
      position: relative;
   }
   
.reference ul li img
   {
      max-width: 100%;
      width: 75%;
   }
   
   
ul.ref_big
   {
      width: 100%;
      height: 50%;
   }
   
ul.ref_big li
   {
      width: 50%;
      height: 100%;
      display: block;
      float: left;
	  
      overflow: hidden;
      position: relative;
   }  
      
ul.ref_big li span
   {
      left: 0;
      top: 0;
      position: absolute;
   }

ul.ref_big li span a
   {
      width: 100%;  
      height: 100%;
      display: inline-block;
	  background: blue;
   }
         	  
ul.ref_big li span a img 
   {
      object-fit: cover;  
      width: 100%;
      height: 100%;
      max-width: 100%;  
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
   }
   
ul.ref_big li span a:hover img
   {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }
   
ul.ref_big li span a .layer
   {
      width: 100%;  
      height: 100%;
      background: url('../images/layer-black-50.png') no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
      text-align: center;
      font-size: 16px;
	  z-index: 10;
	  position: absolute;
   }
   
ul.ref_big li span a .layer .logo
   {
      text-align: center;
      width: 100%;
      max-height: 50px;
      margin-top: calc(25% - 20px);
   }
   
ul.ref_big li span a .layer .logo img
   {
      width: auto;  
      max-height: 50px;
      display: inline;
      -moz-transform: none;
      -webkit-transform: none;
      transform: none;
   }
   
ul.ref_big li span a .layer .logo img.logo
   {
      -moz-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
   }
   
ul.ref_big li span a .layer .text
   {
      display: none;
   }
   
   
h2
   {
      font-size: 30px;
      margin: 0px;
      padding: 0px;
      margin-top: 20px;
   }
      
	  
.kontakt
   {
      width: 100%;
      height: 50%;
   }
   
.kontakt .mapa
   {
      width: 50%;
      height: 100%;
      display: block;
      float: left;
   }
   
.kontakt .box
   {
      width: 50%;
      float: right;
      box-sizing: border-box;
      padding-left: 20px;
      line-height: 1.5;
      font-size: 16px;
   }
   
.kontakt .box .odstavec
   {
      padding-top: 10px;
      padding-bottom: 10px;
   }
   
.kontakt .box .telefon
   {
      font-weight: bold;
   }
   
   
.kontakt .box .email
   {
      padding-top: 5px;
   }
   
.kontakt .box .email a
   {
      color: #000000;
   }
   
.kontakt .box .email a:hover
   {
      text-decoration: underline;
   }