html {padding-top:2.5vmin; font-size: 1em;}
body {background-color:#FFFFFF;  margin:0 auto; border:none; font-size:100%;}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

h2, h3, p {font-family:Arial, Helvetica, sans-serif; line-height:1.8rem;}
h2 {color:#000000; font-weight:normal; font-size:1.2rem; padding-bottom:1.2rem;}
h3 {color:#000000; font-weight:bold; font-size:1.6rem;}
p {color:#696969; font-size:1.2rem; text-align:justify;}

.poda {color:#A9A9A9; font-family:Arial, Helvetica, sans-serif; font-size:1.2rem; line-height:1.8rem; vertical-align:top; padding:2rem 0rem 1rem 0rem;}
strong, .poda:first-line {color:#000000; font-weight:normal;}

.leto, .raz, .raznas  {font-family:Arial, Helvetica, sans-serif; font-size:1.2rem; line-height:1.8em; vertical-align:bottom; text-align:left;}
.leto {color:#A9A9A9; font-weight:bold; padding:2.4rem 0rem 1.2rem 0rem;}
.raz {color:#000000; font-weight:normal;padding:0rem 0rem 0.6rem 0rem;}
.raznas {color:#000000; font-weight:bold; padding:0rem 0rem 0rem 0rem;}

.povezi {color:#5F9EA0; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-weight:normal; font-size:1.2rem;}

.slika, .vslika, .mslika, .dslika .logo, figure, footer, nav, video, aside, .seznam {display:block; vertical-align:top; border-style:none; outline:none;}

header {width:100%; margin-left:0; margin-right:auto;}
article {}
nav {}
aside {}

figure {float:none;}
figcaption {font-family:Arial, Helvetica, sans-serif; text-align:left; color:#A9A9A9; font-size:1.0rem; line-height:1.8rem; padding:0rem 0rem 2.4rem 0rem; border-style:none;}
footer {font-family:Arial, Helvetica, sans-serif; text-decoration:underline; line-height:1.8rem; color:#8383FF; font-size:1.0rem; padding-top:2vmin;}


.IR {grid-area:IR;}
.SL {grid-area:SL;}
.EN {grid-area:EN;}
.JT {grid-area:JT;}
.NT {grid-area:NT;}
.MK {grid-area:MK;}
.MP {grid-area:MP;}
.VO {grid-area:VO;}
.TO {grid-area:TO;}
.OA {grid-area:OA;}
.SE {grid-area:SE;}
.CV {grid-area:CV;}
.SO {grid-area:SO;}
.GR {grid-area:GR;}
.AW {grid-area:AW;}
.IL {grid-area:IL;}
.AN {grid-area:AN;}
.DS {grid-area:DS;}
.stolpec {grid-area:stolpec;}
.repro {grid-area:repro;}
.poda {grid-area:poda;}
.tekst {grid-area:tekst;}

.meni, .meni2, .trojka, .uvod {
  display:grid;
  grid-auto-columns:9%;
  background-color:#FFFFFF;
  cursor:pointer;
  padding:2.5rem;
}

.meni {grid-template-areas:'IR IR EN JT NT MK MP VO TO OA SE';}
.meni2 {grid-template-areas:'IR IR SL DS AN IL AW GR SO CV SE';}

.meni > div, .meni2 > div {
  font-family:Arial, Helvetica, sans-serif;
  font-weight:normal;
  font-size:1.1rem;
  line-height:1.6rem;
  vertical-align:bottom;
  padding:0.4rem 0.4rem 0rem 0.4rem;
  border-left:3px solid #5F9EA0;
  margin-bottom:1.6rem;
  text-overflow:ellipsis;
  overflow:hidden;
  text-decoration:none;
  white-space:nowrap;
}

.meni > div:hover, .meni2 > div:hover {
	 width:100%;
    height:auto;
    display:inline-block;
   font-weight:bold;
    border-left:5px solid #5F9EA0;
}

.ime {color:#5F9EA0; font-weight:bold; letter-spacing:5px;}
.jezik {color:#8B0000;}

.trojka {
   grid-auto-rows:80vmin;
   grid-template-areas:
     'stolpec stolpec repro repro repro repro repro repro repro poda poda';
}

.uvod {
	grid-auto-rows:8vmin;
   grid-template-areas:
     'stolpec stolpec stolpec tekst tekst tekst tekst tekst poda poda poda';
}

.stolpec {
	display:grid;
   grid-auto-rows:10vmin;
	float:left;
   padding:1.0rem;
}

.tekst {
	display:block;
	float:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.2rem;
   font-style:normal;
	line-height:1.8rem;
	color:#696969;
}

.repro {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.2rem;
   font-style:normal;
	line-height:1.8rem;
	color:#696969;
}

.prva {
  display:grid;
  grid-auto-columns:10.67%;
  grid-auto-rows:80rem;
  grid-template-areas:
    'EN JT NT MK MP VO TO';
  padding:0rem 0rem 0rem 22.5rem;
  background-color:white;
}

.flex-container {display:flex; -webkit-display:flex; flex-wrap:wrap; padding:0.6rem 0rem 0.6rem 0rem;}
.flex-container > div {flex:50%; color:#A9A9A9; font-family:Arial, Helvetica, sans-serif; font-style:normal; line-height:1.8rem; font-size:1.2rem;}
.flex-container > div:first line {flex:50%; color:#FFFFFF; font-weight:bold;}

.logo, .vlogo, .hlogo  {background-color:#FFFFFF; margin:1.0vmin 0.0vmin 1.5vmin 2.5vmin; float:none;}
.logo {width:30vmin; height:auto;}
.vlogo {width:auto; height:30vmin;}
.hlogo {width:70vmin; height:auto;}
.slika, .vslika, .dslika, .mslika {overflow:auto; float:none;}
.slika {width:90vmin; height:auto;}
.vslika {width:auto; height:75vmin;}
.dslika {width:30vmin; height:auto;}
.mslika {width:60vmin height:auto;}

.teksti {padding:0rem}
.seznam {width:70vmin; float:left; margin-left:0; margin-right:0;}

.video {width:90%; height:auto; padding: 0rem 0rem 5rem 0rem;}

.img, .imga {display:block; width:7.5vmin; padding:1.5vmin 0vmin 1.5vmin 0vmin; vertical-align:top; border-style:none;}
.img {opacity:1.0; filter:alpha(opacity=100);}
.imga {opacity:0.3; filter:alpha(opacity=30);}

a.img:link {opacity:0.5; filter:alpha(opacity=50);}
a.img:visited {opacity:0.2; filter:alpha(opacity=20);}
.img:hover {border-style:none; opacity:1.0; filter:alpha(opacity=100);}
.img:active {opacity:1.0; filter:alpha(opacity=100);}

a:link {text-decoration:none; color:#5F9EA0; border-style:none;}
a:visited {color:#568e8f;}
a:hover {text-decoration:none; color:#778899;}
a:active {text-decoration:none; font-weight:bold; color:#778899;}
a.focus:link, a.focus:visited {text-decoration:none; font-weight:bold;}
a.povezi:link, a.povezi:visited {font-family:Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold;}
a.povezi:link {color:#6699FF;}
a.povezi:visited {}

a:active, a:visited, a:focus {border:none; outline:none;}
a.jezik:link, {color:#CC0000;}


@keyframes slidy {
0% { left: 0%}
12% {left: -100%;}
25% {left: -200%;}
37% {left: -300%;}
50% {left: -400%;}
63% {left: -500%;}
75% {left: -600%;}
88% {left: -700%;}
100% {left: -800%;}
}

div#slider, div#vslider { overflow:hidden;}
div#slider figure img, div#vslider figure img {width:5.5%; padding:1.0vmin; float:left;}
div#slider figure { 
  position:relative;
  width:1800%;
  margin:0;
  left:0;
  text-align:left;
  font-size:0;
  animation: 40s slidy infinite; 
}

div#vslider figure { 
  position:relative;
  width:1000%;
  margin:0;
  left:0;
  text-align:left;
  font-size:0;
  animation: 40s slidy infinite;
} 
  
@media only screen and (max-width: 1024px) {
  
  body {margin: auto;}
  
  .meni {
    display:grid;
    grid-auto-columns:auto auto auto auto auto auto auto;
    grid-template-areas:
      'IR IR IR IR OA OA SE'
      'EN JT NT MK MP VO TO';
    padding:2.5rem 2.0rem 2.5rem 2.0rem;
  }

  .meni2 {
    display:grid;
    grid-auto-columns:auto auto auto auto auto auto;
    grid-template-areas:
     'IR IR IR SL CV SE'
     'DS AN IL AW GR SO';
    padding:1.0rem 2.0rem 2.5rem 2.0rem;
  }
  
  .meni > div, .meni2 > div {
    font-size:1.4rem;
    line-height:1.8rem;
    padding:0.2rem 0.2rem 0.2rem 0.2rem;
    border-left:2px solid #5F9EA0;
  }

  .meni > div:hover, .meni2 > div:hover {
    font-weight:bold;
    border-left:4px solid #5F9EA0;
  }
  
  .trojka, .uvod {display:block;padding:0rem 2rem 0rem 2rem;}
  .uvod {float:none;}
  
  .prva {
    display:grid;
    grid-auto-columns:auto auto auto auto auto auto auto;
    grid-auto-rows:auto auto;
    grid-template-areas:
      'EN JT NT MK MP VO TO';
    padding:2.5rem 2rem 0rem 2rem;
    background-color:white;
    cursor:pointer;
  }
  
  .stolpec {
    display:grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    padding:1.0rem 0rem 2.5rem 0rem;
	 float:none;
  }
   
  .repro {
	float:none;
  }
  .img, .imga {width:9vmin; padding:1vmin;}
  .slika, .vslika, .hslika, .dslika, .mslika {padding:1.0rem 0rem 1.0rem 0rem;}
  .slika, .dslika, .hslika, .mslika {width:100%; height:auto;}
  .logo {width:50vmin; height:auto;}
  
  .video {width:100%; height:auto;}

  .flex-container > div {flex:100%; line-height:3rem; font-size:2rem;}
  .flex-container > div:first line {flex:100%;}

  .teksti {padding:3rem 1rem 0rem 1rem;}
  
  h3 {font-size:2rem; line-height:3rem;}
  h2 {font-size:2rem; line-height:3rem;}
  p {font-size:2rem; line-height:3rem;}

  .poda {font-size:2rem; line-height:3rem; vertical-align:top; padding:4rem 2rem 1rem 2rem;}
  
  .leto {font-size:2rem; font-weight:bold; line-height:3rem; padding:3rem 0rem 1.5rem 0rem;}
  .raz {font-size:2rem; line-height:3rem; padding:0rem 0rem 1.5rem 0rem;}
  .raznas {font-size:2rem; line-height:3rem; padding:0rem 0rem 0rem 0rem;}
  .povezi {font-size:2rem; line-height:3rem;}
  .tekst {font-size:2rem; line-height:3rem; padding:6rem 0rem 3rem 0rem;}
  
  figcaption, footer {font-size:2.0rem; line-height:3.0rem;}
}