@font-face {
  font-family: neu5land;
  src: url('../styl/font/neu5land.ttf');
}
@font-face {
  font-family: neu5land_bold;
  src: url('../styl/font/neu5land_bold.ttf');
}

a:link {color: #666666; text-decoration: none;}
a:visited {color: #666666; text-decoration: none;}
a:hover {color: #000000; text-decoration: none;}
a:active {color: #666666; text-decoration: none;}

a.biely:link {color: rgba(0,136,169,1); text-decoration: none;}
a.biely:visited {color: rgba(0,136,169,1); text-decoration: none;}
a.biely:hover {color: rgba(0,136,169,0.7); text-decoration: none;}
a.biely:active {color: rgba(0,136,169,1); text-decoration: none;}

a.kartoteka:link {color: #ffffff; text-decoration: none;}
a.kartoteka:visited {color: #ffffff; text-decoration: none;}
a.kartoteka:hover {color: #666666; text-decoration: none;}
a.kartoteka:active {color: #ffffff; text-decoration: none;}

body{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #e3e3e3;
overflow-x: hidden;
color: #444444;
font-size: 1vw;
}
@media only screen and (max-width: 1200px) {
body{
font-size: 1.5vw;
body *{
font-size: 1.5vw;
    }
  }
}

h3{
margin-top: 6px;
margin-bottom: 6px;
}

p{
margin: 0px;
}

div.search{
position: absolute;
z-index: 100;
top: 0px;
right: 0px;
margin: 6px;
padding: 10px;
color: #ffffff;
background-color: rgba(0,0,0,0.6);
border-radius: 8px;
}
@media only screen and (max-width: 1200px) {
div.search{
position: relative;
width: 80vw;
font-size: 6vw;
background-color: rgba(0,0,0,0);
  }
}

input.search{
width: 200px;
padding: 4px;
font-size: 100%;
border: none;
border:solid 1px #ccc;
border-radius: 4px;
}
@media only screen and (max-width: 1200px) {
input.search{
width: 60vw;
font-size: 6vw;
  }
}
.head{
display: inline-block;
width: 100%;
height: calc(100vh / 2.5);

/* border: solid 1px red; */
}

div.logo{
position: absolute;
z-index: 8;
height: calc(100vh / 2.5);
left: 10%;
}
@media only screen and (max-width: 1200px) {
div.logo {
left: 1%;
  }
}

img.logo{
position: absolute;
z-index: 9;
bottom: 20px;
-webkit-animation: animuj_logo 1s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: animuj_logo 1s forwards; /* Firefox < 16 */
-ms-animation: animuj_logo 1s forwards; /* Internet Explorer */
-o-animation: animuj_logo 1s forwards; /* Opera < 12.1 */
animation: animuj_logo 1s forwards;
}
@keyframes animuj_logo {
from { left: -150px; opacity: 0.1; transform: scaleX(0); }
to   { left: 0px; opacity: 1; transform: scaleX(1); }
}

.menu_container{
width: 100%;
text-align: center;
background-color: rgba(0,0,0,1);
background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 100%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);

/* border: solid 1px black; */
}

.menu{
display: inline-block;
width: 80%;

/* border: solid 1px blue; */
}

.menu_polozka{
display: inline-block;
margin-top: 0px;
padding: 12px;
padding-left: 18px;
padding-right: 18px;
text-align: center;
font-family: neu5land;
font-size: 36px;
font-size: 2vw;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);

color: #ffffff;
/* background-color: rgba(0,136,169,1); */

/* border: solid 1px blue; */
}
.menu_polozka:hover{
background-image: url('../img/reflex.png');
background-size: 300px auto;
background-repeat: no-repeat;

-webkit-animation: menu_hover 1s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: menu_hover 1s forwards; /* Firefox < 16 */
-ms-animation: menu_hover 1s forwards; /* Internet Explorer */
-o-animation: menu_hover 1s forwards; /* Opera < 12.1 */
animation: menu_hover 1s forwards;
}
@keyframes menu_hover {
from { 
background-color: rgba(255,255,255,0.2);
background-position: 50% 100%; }
to   { 
background-color: rgba(0,0,0,1);
background-position: 50% 0%; }
}

.menu_button{
display: none;
position: fixed;
z-index: 15;
top: 0px;
right: 0px;
font-size: 80px;
font-weight: bold;
cursor: pointer;
cursor: hand;
background-color: #000000;
}

@media only screen and (max-width: 1200px) {
.menu_container {
visibility: hidden;
position: absolute;
z-index: 11;
padding-top: 140px;
/* top: 120px; */
/* right: 0px; */
width: calc(100%);
min-height: 110%;
/* overflow-x: scroll; */
  }
.menu {
/* width: calc(100% - 20px); */
  }
.menu_polozka {
/* width: calc(100% - 20px); */
display: block;
font-size: 8vw;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
  }
.menu_button {
display: inline-block;
width: auto;
text-align: right;
margin-bottom: 4px;
margin-right: 4px;
  }
}

.prilepene{
position: fixed;
z-index: 15;
top: 0 !important;

-webkit-box-shadow: 0 18px 18px -18px #000000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow:    0 18px 18px -18px #000000;  /* Firefox 3.5 - 3.6 */
box-shadow:         0 18px 18px -18px #000000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

-webkit-animation: menu_fix 1s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: menu_fix 1s forwards; /* Firefox < 16 */
-ms-animation: menu_fix 1s forwards; /* Internet Explorer */
-o-animation: menu_fix 1s forwards; /* Opera < 12.1 */
animation: menu_fix 1s forwards;
}
@keyframes menu_fix {
from { top: -60px; opacity: 0.1; }
to   { top: 0px; opacity: 1; }
}

.zobraz{
-webkit-animation: zobraz 1s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: zobraz 1s forwards; /* Firefox < 16 */
-ms-animation: zobraz 1s forwards; /* Internet Explorer */
-o-animation: zobraz 1s forwards; /* Opera < 12.1 */
animation: zobraz 1s forwards;
}
@keyframes zobraz {
from { right: 600px; opacity: 0.1; visibility: hidden; }
to   { right: 0px; opacity: 1; visibility: visible; }
}
.skry{
-webkit-animation: skry 1s forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: skry 1s forwards; /* Firefox < 16 */
-ms-animation: skry 1s forwards; /* Internet Explorer */
-o-animation: skry 1s forwards; /* Opera < 12.1 */
animation: skry 1s forwards;
}
@keyframes skry {
from { right: 0px; opacity: 0.9; visibility: visible; }
to   { right: 600px; opacity: 0; visibility: hidden; }
}

.shadow{
position: absolute;
z-index: 10;
height: 20px;
width: 100%;
background: url(../img/shadow.png) no-repeat center top; 
opacity: 0.5;
}

.obsah_container{
width: 100%;
overflow-x: hidden;
min-height: 400px;
text-align: center;
vertical-align: top;

background: url(../img/bg_body.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

/* border: solid 1px green; */
}

.obsah{
display: inline-block;
width: calc(80% - 20px);
min-height: 400px;
padding: 10px;
padding-top: 20px;
text-align: center;
vertical-align: top;
background-color: rgb(255,255,255,0.9);

/* border: solid 1px green; */
}
@media only screen and (max-width: 1200px) {
.obsah {
width: 100%;
  }
}

.stlpce{
display: table;
width: 100%;
margin-bottom: 24px;
}
@media only screen and (max-width: 1200px) {
.stlpce {
display: block;
  }
}

.stlpec_container{
display: inline-block;
width: 33%;
height: 100%;
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
vertical-align: top;

/* border: solid 1px blue; */
}
@media only screen and (max-width: 1200px) {
.stlpec_container {
display: block;
height: auto;
width: calc(100% - 20px);
  }
}

.stlpec{
/* display: inline-block; */
/* position: relative; */
vertical-align: top;
margin: 10px;
margin-bottom: 0px;
/* width: calc(33% - 26px); */
height: calc(100% - 40px);
background-color: #ffffff;
/* background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); */

/* border: solid 1px red; */
}
@media only screen and (max-width: 1200px) {
.stlpec {
width: calc(100% - 20px);
height: auto;
  }
}

.prvy{
transform: rotateY(90deg);
animation: 0.5s ease-out 0.5s 1 otoc_stlpec forwards;
}
.druhy{
transform: rotateY(90deg);
animation: 0.5s ease-out 1s 1 otoc_stlpec forwards;
}
.treti{
transform: rotateY(90deg);
animation: 0.5s ease-out 1.5s 1 otoc_stlpec forwards;
}
@keyframes otoc_stlpec {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.line{
height: 8px;
background-color: rgba(0,0,0,1);
}

div.stlpec_img{
width: 100%;
}

img.stlpec_img{
width: 100%;
}

.stlpec_nadpis{
padding-top: 20px;
padding-left: 10px;
font-family: neu5land;
font-size: 2vw;
text-align: left;
color: rgba(0,0,0,0.4);;
}
@media only screen and (max-width: 1200px) {
.stlpec_nadpis {
font-size: 8vw;
  }
}

.stlpec_text{
text-align: left;
padding: 10px;
line-height: 1.5;
text-align: justify;
text-justify: inter-word;
/* font-size: 1vw; */
/* background-color: #ffffff; */
}
@media only screen and (max-width: 1200px) {
.stlpec_text {
font-size: 2vw;
  }
}

.viac{
padding: 6px;
margin-left: 10px;
margin-right: 10px;
background-color: rgba(0,0,0,0.6);
color: rgb(255,255,255,0.6);
font-size: 1.2vw;
text-align: center;
}
@media only screen and (max-width: 1200px) {
.viac {
font-size: 2vw;
  }
}

.link:hover{
color: #ffffff;
background-color: rgba(0,136,169,0.8);;
}

.karta_container{
display: table;
width: calc(100% - 40px);
margin: 10px;
margin-top: 0px;
padding: 10px;
padding-top: 0px;
text-align: left;
background-color: #ffffff;
/* background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%); */

/* border: solid 1px red; */
}
@media only screen and (max-width: 1200px) {
.karta_container {
display: block;
width: calc(100% - 60px);
  }
}

div.karta_img{
display: table-cell;
width: 35%;
padding-right: 10px;

/* border: solid 1px green; */
}
@media only screen and (max-width: 1200px) {
div.karta_img {
display: block;
width: 100%;
padding: 0px;
text-align: center;
  }
}

img.karta_img{
width: 100%;
margin-top: 10px;
}
@media only screen and (max-width: 1200px) {
img.karta_img {
width: 80%;
padding-left: 5px;
padding-right: 5px;
  }
}

.karta_text{
display: table-cell;
width: calc(100% - 0px);
padding-top: 10px;
vertical-align: top;
/* text-align: left; */
line-height: 1.5;
text-align: justify;
text-justify: inter-word;
/* font-size: 1vw; */
border: solid 1px rgba(255,255,255,0);
}
@media only screen and (max-width: 1200px) {
.karta_text {
display: block;
text-align: center;
width: auto;
  }
}

.no_table{
display: block;
}

.text_viac_zbalene{
overflow: hidden;
height: 0px;
padding: 0px;
opacity: 0;
-webkit-transition: height .5s, opacity .5s, visibility .5s ease-out;
-moz-transition: height .5s, opacity .5s, visibility .5s ease-out;
-ms-transition: height .5s, opacity .5s, visibility .5s ease-out;
-o-transition: height .5s, opacity .5s, visibility .5s ease-out;
transition: height .5s, opacity .5s, visibility .5s ease-out;
/* transition: opacity 0.5s ease-out; */
}

.text_viac_rozbalene{
display: inline-block;
width: calc(100% - 20px);
padding: 10px;
background-color: rgba(0,0,0,0.1);
-webkit-transition: visibility 0s, opacity .5s ease-in;
-moz-transition: visibility 0s, opacity .5s ease-in;
-ms-transition: visibility 0s, opacity .5s ease-in;
-o-transition: visibility 0s, opacity .5s ease-in;
transition: visibility 0s, opacity .5s ease-in;
}

.karta_nadpis{
width: calc(100% - 0px);
padding-top: 0px;
padding-bottom: 0px;
font-family: neu5land;
font-size: 2vw;
color: rgba(0,0,0,0.4);
/* border: solid 1px green; */

}
@media only screen and (max-width: 1200px) {
.karta_nadpis {
font-size: 8vw;
  }
}

.button_obsah{
display: inline-block;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: rgba(0,0,0,0.6);
font-family: neu5land;
font-size: 2vw;
text-align: center;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-radius: 10px 10px 0px 0px;
}
@media only screen and (max-width: 1200px) {
.button_obsah {
display: block;
width: calc(100% - 60px);
margin-left: 10px;
margin-right: 10px;
font-size: 6vw;
border-bottom: solid 4px rgba(255,255,255,1);
  }
}

.selected{
color: rgba(0,0,0,0.4);
background-color: #ffffff;
border-bottom: solid 4px rgba(255,255,255,1);
text-shadow: none;
}
.selected:hover{
color: rgba(0,0,0,1);
background-color: #ffffff;
border-bottom: solid 4px rgba(255,255,255,1);
text-shadow: none;
}

.pata_container{
width: 100%;
/* overflow-x: hidden; */
text-align: center;
vertical-align: top;
background-color: rgba(0,0,0,1);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(38,34,31,1) 100%);
}

.pata{
display: inline-block;
width: calc(80% - 20px);
padding: 10px;
text-align: center;
vertical-align: top;
color: #ffffff;
/* background-color: rgba(0,136,169,1); */

/* border: solid 1px yellow; */
}
@media only screen and (max-width: 1200px) {
.pata {
display: block;
width: calc(100% - 20px);
  }
}

.pata_stlpec{
display: inline-block;
width: calc(33% - 60px);
margin: 10px;
margin-top: 0px;
padding: 10px;
padding-bottom: 20px;
text-align: left;
line-height: 1.5;
vertical-align: bottom;
border-bottom: solid 2px rgba(255,255,255,0.2);

/* border: solid 1px red; */
}
@media only screen and (max-width: 1200px) {
.pata_stlpec {
display: block;
width: calc(100% - 40px);
font-size: 3vw;
text-align: center;
  }
}

.pata_nadpis{
font-family: neu5land;
font-size: 1.5vw;
}
@media only screen and (max-width: 1200px) {
.pata_nadpis {
font-size: 6vw;
  }
}

.copy{
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
font-size: 0.8vw;
}
@media only screen and (max-width: 1200px) {
.copy {
font-size: 1vw;
  }
}

.product_container{
display: inline-block;
width: calc(25% - 4px);
vertical-align: top;

/* border: solid 1px blue; */
}
@media only screen and (max-width: 1200px) {
.product_container {
display: block;
width: calc(100% - 20px);
height: auto;
  }
}


/* DETAIL PRODUKTU */


div.item_detail {
position: relative;
display: inline-block;
width: 100%;
min-height: 400px;
margin: 4px;

border: solid 0px red;
}
@media only screen and (max-width: 1200px){
div.item_detail { width: 80%; }
}

div.item_img_detail {
display: table-cell;
float: left;
height: 400px;
width: 400px;
overflow: hidden;
text-align: center;

border: solid 0px blue;
}
@media only screen and (max-width: 1200px){
div.item_img_detail { width: 100%; height: 600px; }
}

img.item_img_detail {
height: 400px;
margin-left: 50%;
transform: translateX(-50%);
}

div.item_galeria {
display: table-cell;
float: left;
height: auto;
width: 400px;
overflow: hidden;
text-align: center;
margin-bottom: 6px;

border: solid 0px blue;
}
@media only screen and (max-width: 1200px){
div.item_galeria { width: 100%; }
}

div.item_galeria_nahlady_container {
display: block;
height: 100px;
width: 400px;
overflow-y: hidden;
overflow-x: auto;
padding: 6px;

border: solid 0px green;
}
@media only screen and (max-width: 1200px){
div.item_galeria_nahlady_container { width: 100%; }
}

div.item_galeria_nahlady {
display: table-cell;
height: 100px;
width: auto;

border: solid 0px red;
}

img.item_galeria_nahlad{
height: 98%;
margin: 2px;
cursor: pointer;
cursor: hand;
}
img.item_galeria_nahlad:hover{
opacity: 0.7;
filter: alpha(opacity=70); /* IE8 */
}

div.item_info_detail_container {
display: inline-block;
text-align: left;
vertical-align: bottom;
float: left;
width: calc(100% - 404px);
height: auto;
min-height: 400px;
padding: 0px;

border: solid 0px green;
}
@media only screen and (max-width: 1200px){
div.item_info_detail_container { width: 100%; }
}

div.item_info_detail {
text-align: left;
background-color: #f2f2f2;
padding: 6px;
margin-left: 0px;
background-color: rgba(0,0,0,0.1);

border: solid 0px green;
border-top: solid 4px rgba(80,80,80,1);
}

.item_stlpec_nadpis{
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
font-family: neu5land;
font-size: 2vw;
text-align: left;
color: rgba(255,255,255,1);
background-color: rgba(80,80,80,1);
}
@media only screen and (max-width: 1200px) {
.item_stlpec_nadpis {
font-size: 8vw;
  }
}

.item_stlpec_text{
text-align: left;
padding: 10px;
line-height: 1.5;
}
@media only screen and (max-width: 1200px) {
.item_stlpec_text {
font-size: 2vw;
  }
}

div.item_popis_detail {
width: auto;
margin-left: 10px;
font-size: 16px;
line-height: 1.5;
background-color: #ffffff;
padding: 6px;
}
@media only screen and (max-width: 1200px) {
div.item_popis_detail {
margin-left: 0px;
  }
}

div.item_shadow {
clear: both;
text-align: center;
height: 14px;

background-image: url("../img/shadow.png");
background-repeat: no-repeat;
background-position: center top; 
background-size: 100% 100%;

border: solid 0px black;
}

@media only screen and (max-width: 1200px){
div.info_icon { height: 0px; }
img.info_icon { display: none; }
}

svg{
/* width: 100%; */
/* border: solid 1px red; */
}
@media only screen and (max-width: 1200px){
svg {
    width: 100%;
}
}

.podlazie_button{
margin-bottom: 4px;
padding: 8px;
font-size: 120%;
font-weight: bold;
color: rgba(0,0,0,0.8);
background-color: rgba(100,100,100,0.1);
}
@media only screen and (max-width: 1200px){
.podlazie_button { 
    font-size: 300%;
    display: inline-block;
    width: calc(80% - 16px); 
}
}
.podlazie_button:hover{
color: rgba(0,0,0,1);
background-color: rgba(100,100,100,0.2);
}

.podzemne{
background-color: rgba(100,100,100,0.2);
}
.podzemne:hover{
background-color: rgba(100,100,100,0.3);
}

.zoznam_riadok_container{
width: 100%;
border-bottom: solid 2px #d3d3d3;
}

.zoznam_riadok{
display: table;
padding: 10px;
}

.zoznam_pole{
display: table-cell;
/* width: 20%; */
text-align: left;
vertical-align: middle;
padding: 10px;
/* border: solid 1px red; */
}

.zoznam_logo{
width: 100px;
}