html{
      height: 100%;
}
body{
      font-size: 20px;
      line-height: 26px;
      font-family: 'Roboto', sans-serif;
      color: #000;
      height: 100%;
      background: #fff;
}
.main{
      position: relative;
      max-width: 1160px;
      margin: 0 auto;
}
a{
      color: #a10901;
}
/*---------------------------------------------- HLAVICKA --------------------------------------------*/
.hlavicka{
      position: relative;
      height: 210px;
      -webkit-box-shadow: 0px 11px 111px 26px rgba(0,0,0,0.60);
      -moz-box-shadow: 0px 11px 111px 26px rgba(0,0,0,0.60);
      box-shadow: 0px 11px 111px 26px rgba(0,0,0,0.60);
      z-index: 2;
}
.hlavicka.minitien{
      -webkit-box-shadow: 0px 11px 54px 26px rgba(0,0,0,0.07);
      -moz-box-shadow: 0px 11px 54px 26px rgba(0,0,0,0.07);
      box-shadow: 0px 11px 54px 26px rgba(0,0,0,0.07);
}
.hlavicka .main{
      height: 100%;
}
.hlavicka h1{
      height: 0;
}
.hlavicka .logo{
      position: relative;
      display: block;
      width: 219px;
      height: 41px;
      top: 91px;
      margin: 0 auto;
      background: url('../img/logo.png') no-repeat;
}
/*---------------------------------------------- MENU ------------------------------------------------*/
.menu ul:first-of-type{
      position: absolute;
      text-align: right;
      top: 100px;
      right: 64.6%;
}
.menu ul:last-of-type{
      position: absolute;
      top: 100px;
      left: 64.6%;
}
.menu li{
      display: block;
      float: left;
      padding: 0 25px;
}
.menu ul:first-of-type li:last-of-type,
.menu ul:last-of-type li:last-of-type{
      padding-right: 0;
}
.menu ul:last-of-type li:first-of-type,
.menu ul:first-of-type li:first-of-type{
      padding-left: 0;
}
.menu li a{
      color: #000;
      text-decoration: none;
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
}
.menu li a:hover{
      color: #a10901;
}
.menu li a.activ{
      color: #1d366d;
}
/*--------------------------------------------- (MENU) -----------------------------------------------*/
/*--------------------------------------------- (HLAVICKA) -------------------------------------------*/
/*---------------------------------------------- SLIDER ----------------------------------------------*/
/*--------------------------------------------- (SLIDER) ---------------------------------------------*/
/*---------------------------------------------- UVODNA ----------------------------------------------*/
.boxy{
      position: relative;
      height: calc(100% - 210px);
      z-index: 1;
}
.box{
      position: relative;
      text-align: center;
      width: 25%;
      height: 100%;
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      background: #1d366d;
}
.box span.ramik_logo{
      display: block;
      height: calc(100% - 80px);
      width: calc(100% - 80px);
      margin: 40px;
      box-sizing: border-box;
      border: 5px solid #679;
}
.box span.nazov{
      position: absolute;
      display: block;
      text-align: center;
      font-size: 45px;
      line-height: 45px;
      font-weight: 700;
      text-transform: uppercase;
      color: #fefefe;
      width: calc(100% - 90px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
	-webkit-transition-duration: .8s;
	transition-duration: .8s;
      z-index: 1;
}
.box img{
      min-height: 100%;
      min-width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
	-webkit-transition-duration: .8s;
	transition-duration: .8s;
      z-index: 2;
}
.box:hover img{
      opacity: .2;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
      transform: translate(-50%, -50%) scale(1.07);
}
.box:hover span.nazov{
      font-size: 36px;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}
/*--------------------------------------------- (UVODNA) ---------------------------------------------*/
/*---------------------------------------------- OBSAH -----------------------------------------------*/
.stranky{
      width: 29%;
      margin-right: 16%;
      float: right;
}
.stranky h1,
.stranky h2{
      margin-top: 200px;
      margin-top: 36%;
      font-size: 30px;
      line-height: 30px;
      margin-bottom: 35px;
      font-weight: 700;
      color: #1d366d;
}
.stranky h2{
      margin-top: 40px;
      margin-bottom: 24px;
      font-size: 24px;
      line-height: 24px;
}
.stranky p,
.stranky ul,
.stranky ol{
      margin-bottom: 26px;
}
.stranky p.info{
      border-top: 2px solid #7584a6;
      line-height: 40px;
      padding-top: 26px;
}
.stranky p.info a{
      padding-left: 40px;
      display: inline-block;
      color: inherit;
      text-decoration: none;
}
.stranky p.info a:hover{
      text-decoration: underline;
}
.stranky p.info a:first-of-type{
      background: url('../img/kontakt_mail.png') 0 12px no-repeat;
}
.stranky p.info a:nth-of-type(2){
      background: url('../img/kontakt_tel.png') 0 6px no-repeat;
}
.stranky p.info a:last-of-type{
      background: url('../img/kontakt_web.png') 1px 8px no-repeat;
}
.stranky.kontakty{
      width: 45%;
      margin-right: 7%;
}
.stranky.kontakty .text{
      float: left;
      width: 33%;
}
.stranky.kontakty form{
      margin-top: 82px;
      float: left;
      width: 47%;
      margin-left: 20%;
}
.stranky.kontakty form p:last-of-type{
      margin-bottom: 0;
}
.stranky.kontakty form input,
.stranky.kontakty form textarea{
      width: 100%;
      box-sizing: border-box;
      font-size: 20px;
      line-height: 57px;
      height: 57px;
      padding: 0;
      margin-bottom: 22px;
      border: none;
      border-bottom: 1px solid #dde3e9;
}
.stranky.kontakty form textarea{
      margin-top: 14px;
      line-height: 30px;
      height: 118px;
}
.stranky.kontakty form input.button{
      color: #fff;
      height: 70px;
      line-height: 70px;
      margin-top: 33px;
      margin-bottom: 0;
      text-transform: uppercase;
      background: #a10901;
      border-bottom: none;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
}
.stranky.kontakty form input.button:hover{
      background: #1d366d;
}
.podstranka_obrazok{
      position: relative;
      float: left;
      width: 42%;
      overflow: hidden;
      height: calc(100% - 276px);
}
.podstranka_obrazok img{
      min-height: 100%;
      min-width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
/*--------------------------------------------- REFERENCIE -------------------------------------------*/
.referencia{
      position: relative;
      width: 100%;
}
.referencia:nth-child(even){
      color: #fff;
      background: #880804;
}
.referencia .obr{
      position: relative;
      height: 100%;
      width: 53%;
      overflow: hidden;
      float: left;
}
.referencia .obr img{
      min-height: 100%;
      min-width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
.referencia .info{
      position: absolute;
      float: left;
      top: 50%;
      left: 53%;
      max-height: 100%;
      width: 47%;
      transform: translate(0, -50%);
      box-sizing: border-box;
      padding: 0 6%;
      text-align: center;
}
.referencia .nazov{
      font-size: 25px;
      line-height: 35px;
      font-weight: 700;
}
.referencia p{
      margin-top: 30px;
      font-size: 18px;
      line-height: 30px;
}
/*-------------------------------------------- (REFERENCIE) ------------------------------------------*/
/*--------------------------------------------- KONTAKT ----------------------------------------------*/
.stranky.kontakty form input:focus,
.stranky.kontakty form textarea:focus{
      outline: none;
      border-bottom: 1px solid #7584a6;
}
.stranky.kontakty form input[type='checkbox']{
      height: 24px;
      line-height: 24px;
      width: 16px;
      margin: 0 7px 0 0;  
      vertical-align: middle; 
}
.stranky.kontakty form label{
      width: calc(100% - 50px);
      vertical-align: baseline;
      font-size: 14px;      
}
p.hlaska{
      margin: 10px 0;
      padding: 12px 10px;
      color: #fff;
      border: 1px solid #370;
      background: #6a1;
}
.kosik_objednat p.hlaska{
      margin-left: 0;
      margin-right: 20px;
}
p.hlaska.ok{
      border: 1px solid #370;
      background: #6a1;
}
p.hlaska.error{
      border: 1px solid #611;
      background: #c11;
}
/*-------------------------------------------- (KONTAKT) ---------------------------------------------*/
/*--------------------------------------------- PATA -------------------------------------------------*/
.pata{
      line-height: 66px;
      height: 66px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #1d366d;
}
.pata span{
      margin: 0 7px;
}
.pata a{
      color: #fff;
      font-weight: 700;
      text-decoration: none;
}
.pata a:hover{
      opacity: 0.8;
}
/*-------------------------------------------- (PATA) ------------------------------------------------*/
.neobtek{
	line-height: 0;
	font-size: 0;
	clear: both;
}
.show-menu {
      position: absolute;
      top: 40px;
      right: 25px;
      cursor: pointer;
      text-decoration: none;
      color: #16181a;
      padding: 0;
      width: 56px;
      height: 27px;
      line-height: 27px;
      display: none;
      font-size: 15px;
      margin: 0 0 0 0;
      text-transform: uppercase;
      background: url('../img/nav-icon.png') center no-repeat;
}
/*Hide checkbox*/
input[type=checkbox]#show-menu{
      display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]#show-menu:checked ~ .menu{
      display: block;
}

@media only screen and (max-width: 1439px) {
      .stranky{
            width: 35%;
            margin-right: 10%;
      }
      .podstranka_obrazok{
            width: 45%;
      }
      .stranky h1{
            margin-top: 30%;
      }
      .stranky.kontakty form{
            margin-top: 40px;
      }
}
@media only screen and (max-width: 1279px) {
      .hlavicka{
            height: 100px;
      }
      .hlavicka .logo{
            top: 30px;
      }
      .menu ul:first-of-type{
            top: 40px;
            right: 65%;
      }
      .menu ul:last-of-type{
            top: 40px;
            left: 65%;
      }
      .menu li{
            padding: 0 10px;
      }
      .boxy{
            height: calc(100% - 100px);
      }
      .podstranka_obrazok{
            height: calc(100% - 166px);
      }
      .stranky.kontakty{
            width: 50%;
            margin-right: 2%;
      }
      .stranky.kontakty .text{
            width: 48%;
      }
      .stranky.kontakty form{
            margin-top: 53px;
            width: 42%;
            margin-left: 8%;
      }
}
@media only screen and (max-width: 1023px) {
      .show-menu {
    		display:block;
            z-index: 10;
    	}
    	div.menu{
            position: absolute;
            display: none;
            width: 100%;
            margin-top: 100px;
            margin-right: 0;
            margin-left: 0;
            padding-top: 0;
            z-index: 3;
            margin-top: 0;
            background: #fff;
            left: 0;
            top: 100px;
            height: auto;
            padding-left: 0;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
    	}
      .menu ul{
            width: 50%;
            float: left;
            padding-top: 20px;
            padding-bottom: 20px;
      }
      .menu ul:first-of-type{
            position: relative;
            text-align: center;
            top: 0;
            right: inherit;
            border-right: 1px solid #ccc;
            width: calc(50% - 1px);
      }
      .menu ul:last-of-type{
            position: relative;
            text-align: center;
            top: 0;
            left: inherit;
      }
      .menu li{
            display: block;
            float: none;
            padding: 0;
      }
      .menu ul:last-of-type li:first-of-type a,
      .menu ul:first-of-type li:first-of-type a{
      }
      .menu li a{
            padding: 10px 25px;
            display: block;
            width: 100%;
            box-sizing: border-box;
      }
      .box span.ramik_logo{
            display: block;
            height: calc(100% - 40px);
            width: calc(100% - 40px);
            margin: 20px;
      }
      .box span.nazov{
            font-size: 30px;
            line-height: 30px;
            width: calc(100% - 50px);
      }
      .box:hover span.nazov{
            font-size: 26px;
      }
      .stranky.kontakty{
            width: 35%;
            margin-right: 10%;
      }
      .stranky.kontakty .text{
            float: none;
            width: 100%;
      }
      .stranky.kontakty form{
            float: none;
            width: 100%;
            margin-left: 0;
            margin-bottom: 20px;
      }
}
@media only screen and (max-width: 767px) {
      .box{
            width: 50%;
            height: 50%;
      }
      .stranky{
            float: none;
            width: 80%;
            margin: 50px 10%;
            min-height: calc(50% - 266px);
      }
      .stranky.kontakty{
            width: 80%;
            margin: 50px 10%;
      }
      .stranky.kontakty form{
            margin-bottom: 0;
      }
      .stranky h1{
            margin-top: 0;
      }
      .podstranka_obrazok{
            width: 100%;
            height: auto;
      }
      .referencia{
            height: auto;
            color: #fff;
            background: #880804;
      }
      .referencia .info{
            width: 100%;
            position: relative;
            box-sizing: border-box;
            margin: 0;
            left: 0;
            height: auto;
            top: 0;
            padding: 80px 10%;
            transform: none;
            max-height: none;
            float: none;
      }
      .referencia .obr{
            float: none;
            width: 100%;
            height: 200px;
      }
}

@media only screen and (max-width: 599px) {
      .hlavicka{
            position: relative;
            width: 80%;
            padding: 0 10%;
      }
      .hlavicka .logo{
            margin: 0;
      }
      .show-menu{
            right: 10%;
      }
}
@media only screen and (max-width: 479px) {
      .pata{
            text-align: left;
            line-height: 20px;
            padding-top: 15px;
            padding-bottom: 5px;
            height: 50px;
            padding-left: 10%;
            padding-right: 10%;
      }
      .pata span{
            width: 0;
            height: 0;
            display: block;
            text-indent: -9999px;
      }
}
@media only screen and (max-width: 411px) {
      .hlavicka .logo{
            background: url('../img/logo.svg') no-repeat;
            background-size: 82%;
      }
      .menu ul,
      .menu ul:first-of-type{
            float: none;
            border-right: none;
            width: 100%;
      }
      .menu ul:first-of-type{
            padding-bottom: 0;
      }
      .menu ul:last-of-type{
            padding-top: 0;
      }
      .menu ul li{
            text-align: left;
      }
      .menu ul li a{
            padding: 10px 10%;
      }
}
@media only screen and (max-width: 359px) {
      .pata{
            font-size: 11px;
      }
}