html { width: 100%; height: 100%; }
body 
   {
      width: 100%;
      height: 100%;
      margin: 0px;
      background: #ffffff;
      font-family: 'Raleway', sans-serif;
      font-size: 14px;
   }
      
.clear
   {
      clear: both;
      height: 0px;
   }    
   
a.responsive_menu
   {
      width: 30px;
      height: 30px;
      display: inline-block;
      position: absolute;
      right: 0;	  
      margin-right: 20px;
      margin-top: 25px;
      z-index: 9999;
      cursor: pointer;
      display: none;
      background: url('../images/menu.svg') no-repeat;
      background-size: 30px;
   } 
   
.odskok
   {
      width: 100%;
      height: 80px;
      display: block;
      position: absolute;
      margin-top: -80px;
   }
      
a { text-decoration: none; }
   
img
   {
      border: 0px;
   }
   
 
   
.center
   {
      width: 100%;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
   }
   
.centerio
   {
      width: 100%;
      max-width: 1600px;
      margin-left: auto;
      margin-right: auto;
   }

.first
   {
      width: 100%;
      height: 100%; 
      background: url('../images/homepage.jpg') no-repeat;

      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin: 0px;
      padding: 0px;
   }  
   
.first header
   {
      background: #ffffff;
      width: 100%;
      height: 80px;
      z-index: 50;
      top: 0;
	  box-sizing: border-box;
      position: fixed;
      border-bottom: 1px solid #ECF0F0;
   } 
   
.first header img.logo
   {
      width: 330px;
      float: left;
      margin-top: 8px;
   } 
   
.first header nav
   {
      width: calc(100% - 330px);
      float: right;
      margin-top: 12px;
   } 
   
.first .motto .text
   {

   }
   
.first .motto
   {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 20px;
      z-index: 49;
   }
   
.first .motto .text
   {
      padding-bottom: 20px;	  
      background: #ffffff;
      padding: 15px;
      padding-left: 30px;
      padding-right: 30px;
	  color: #f58220;
      font-size: 36px; 
      font-weight: 700;
      display: inline-block;
   }
   
.first .motto a.arrow
   {
      display: block;
      background: url('../images/hp-arrow.svg') no-repeat;
      background-size: 46px;
      width: 46px;
      height: 46px;
      display: block;
      margin-left: auto;
      margin-right: auto;   
      margin-top: 40px;
      -webkit-animation: bounce 2s infinite ease-in-out;
   } 
   
@-webkit-keyframes bounce {
	0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
    40%  { -webkit-transform: translateY(-20px); }
	80% { -webkit-transform: translateY(-10px); }
}
   
h1,h2
   {
      color: #f58220;      
      font-size: 40px;
      font-weight: 400; 
   }
   
.mapa
   {
      width: 50%;
      float: left;
      height: 500px;
   }
   
.foto
   {
      width: 50%;
      display: block;
      float: left;
      overflow: hidden;
   }
   
.height-400
   {
      height: 400px;
   }
   
.foto img
   {
      width: 100%;
   }
   
.main
   {
      padding-bottom: 40px;
   }
      
.content
   {
      width: calc(50% - 40px);
      display: block;
      float: right;
      text-align: justify;
      padding-left: 40px;
   }

.content ul
   {
      margin: 0px;
      padding-left: 20px;
   }
   
.content ul li
   {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      padding-left: 15px;
      padding-top: 5px;
      padding-bottom: 5px;
      background: url('../images/square-orange.svg') 0% 10px no-repeat;
      background-size: 7px;
   }
   
.content ul.reference
   {
      width: 100%;
      margin: 0px;
      padding: 0px;
      text-align: center;
      display: inline-block;
   }
   
.content ul.reference li
   {
      width: 100%;
      margin: 0px;
      padding: 0px;
      background: none;
      width: calc(33% - 60px);
      border: 20px solid #ffffff;
      display: inline-block;
      float: left;
      margin: 10px;
      text-align: center;
   }
   
.content ul.reference li .image
   {
      width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
   }
   
.content ul.reference li .image .nazev
   {
      width: 100%;
      height: 40px;
      padding-top: 30px;
      display: block;
      position: absolute;
	  bottom: 0px;
      z-index: 9;
      color: #ffffff;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
	  
      background: rgba(255,255,255,1);
      background: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,1) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(0,0,0,1)));
      background: -webkit-linear-gradient(top, transparent) 0%, rgba(0,0,0,1) 100%);
      background: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,1) 100%);
      background: -ms-linear-gradient(top, transparent 0%, rgba(0,0,0,1) 100%);
      background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
   }
   
.content ul.reference li .image img
   {
      max-width: 100%;  
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      display: block;
   }
   
.content ul.reference li .image:hover img
   {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }
   
.gray
   {
      background: #ecf0f0;
   }
   
.gray .content
   {
      width: 100%;
   }
   
footer
   {
      width: 100%;
      display: block;
      background: #f58220;
   }
   
footer .center
   {
      display: block;
      background: url('../images/footer-logo.svg') 0% 50% no-repeat;
      background-size: 50px;
      padding-top: 25px;
      padding-bottom: 25px;
   }
   
footer ul
   {
      height: 100%;
      margin: 0px;
      padding: 0px;
      float: right;
   }
   
footer ul li
   {
      height: 100%;
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      display: inline-block;
   }
   
footer ul li a
   {
      padding-left: 10px;
      padding-right: 10px;
      display: inline-block;
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
   }
   
footer ul li a:hover
   {
      text-decoration: underline;
   }
		 
footer ul li:after
   {
      color: #ffffff;
      content: '/';
   }
		 
footer ul li:last-child:after
   {
      content: '';
   }
   
#backTop
   {
      width: 20px;
      height: 20px;
      padding: 10px;
      border-radius: 4px;
      text-indent: -9999px;
      cursor: pointer;
      z-index: 0;
      display: none;
      box-sizing: content-box;
      -webkit-box-sizing: content-box;
      color: #F58220;
      border: 1px solid #ffffff;
   }
   
#backTop.white
   {
      background: #F58220 url('../images/arrow-up-w.svg') no-repeat center center;
      background-size: 16px;
   } 
   
.padding-top-40
   {
      padding-top: 40px;
   }

.padding-top-40 h1
   {
      padding-top: 0px;
	  margin-top: 0px;
   }
   
.padding-top-40 h2
   {
      padding-top: 0px;
	  margin-top: 0px;
   }
   
   
@media screen and (min-width: 1000px)
   {              
      nav
         {
            float: right;
            margin-top: 0px;
            color: #f58220;
            text-align: right;
            z-index: 99999 !important;
         }
      
      nav ul
         {
            margin: 0px;
            padding: 0px;
         }
   
      nav ul li
         {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            display: inline-block;
         }
		 
      nav ul li:after
         {
            content: '/';
         }
		 
      nav ul li:last-child:after
         {
            content: '';
         }
   
      nav ul li a
         {
            padding-left: 15px;
            padding-right: 15px;
            height: 40px;
            padding-top: 20px;
            display: inline-block;
            color: #f58220;
            font-size: 16px;
            font-weight: bold;

            -webkit-transition: all ease 0.8s;
            -moz-transition: all ease 0.8s;
            transition: all ease 0.8s;
         }
   
      nav ul li a:hover
         {
            color: #000000;
            box-shadow: inset 0 0 0 0 #f4ba62;
            cursor: pointer;
         }   
   }