body{margin: 0; font-family: myriad pro; background-color: black; overflow-x: hidden;}

html {
  scroll-behavior: smooth;
}

body,html{
    height:100%;
}
/*
* {
  box-sizing: border-box;
}
*/

@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow');

.info-kont{
    width: 100%;
    margin: 0 auto;
}

.informacije-full{
    margin-top: -30px;
    padding-top: 70px;
    padding-bottom: 70px;
    background-image: url(slike/regen-bg.png);
    background-size: cover;
    position: relative;
    width: 100%;
    text-align: center;
    font-family: 'Archivo Narrow', sans-serif;
}

.informacije-full h1, .informacije-full p{
    color: white;
    text-shadow: 1px 2px 4px black;
}

.transparent {
opacity: 0.5;
transition: all 0.5s;
}

::selection{
    background-color: #00c0ff;
    opacity: 1.0 !important; 
    color: white;
}

#navbar{
    position: fixed;
    width: 100%;
    z-index: 100000;
    background-color: rgba(1,1,1,0.98);
    /*background-color: rgba(251,251,251,0.98);*/
    top: 0;
    height: 70px;
    transition: 0.2s all;
}

#link-bar{
    float: right;
    position: absolute;
    top: -4px;
    right: 5%;
    line-height: 70px;
    margin: 0;
    transition: 0.1s all;
    color: #969696;
    font-family: 'Archivo Narrow', sans-serif;
}

#link-bar-jezici{
    float: left;
    position: absolute;
    top: 1px;
    left: -45%;
    line-height: 70px;
    margin: 0;
    transition: 0.1s all;
    font-weight: bold;
    opacity: 0.4;
    font-family: 'Baloo Chettan', cursive;
}

#link-bar-jezici:hover{
    opacity: 0.8;
}

#link-bar-jezici a:hover{
    opacity: 1.0;
}


#link-bar-jezici a{
    padding-left: 0px;
}

#link-bar-jezici a:last-of-type{
    padding: 2px;
    padding-left: 2px;
    padding-right: 35px;
    border-right: 2px solid silver;
}

#link-bar-link{
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 11px;
    padding-top: 11px;
    transition: 0.1s all;
    text-decoration: none;
    color: #a5a5a5;
    font-size: 13px;
    background-color: 
}

#desni-bar a:hover{

}

#link-bar-link:hover{
    color: white;
}

#logo{
    height: 50px;
    padding: 13px;
    transition: 0.2s all;
}

#logo:hover{
    opacity: 0.5;
}

.kartice-container-superior{
    background-size: cover;
    position: relative;
    background-color: white;
}

.prvi-kont{
    background-image: url(slike/regen-bg2.png);
}

.kartice-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    max-width: 1300px;  
    margin: 0 auto;
    grid-template: "prva-kartica druga-kartica treca-kartica";
    grid-gap: 30px;
    padding-top: 30px;
}

.prva-kartica, .druga-kartica ,.treca-kartica{
    box-shadow: 7px 7px 41px black, inset 0 0 0 3px white;
    min-height: 200px;
    border: 15px solid rgba(10,115,200,0.0);
    color: white;
    padding: 20px;
    padding-top: 50px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
    font-family: 'Archivo Narrow', sans-serif;
}

.prva-kartica h1, .druga-kartica h1,.treca-kartica h1{
    margin-top: -38px; position: absolute; font-size: 35px;
    font-family: 'Archivo Narrow', sans-serif;
    text-transform: lowercase;
    font-weight: bold;
}

.prva-kartica { grid-area: prva-kartica;}
.druga-kartica { grid-area: druga-kartica; transition-delay: 0.1s;}
.treca-kartica { grid-area: treca-kartica; transition-delay: 0.2s;}

.drugi-kont{
    background-image: url(slike/regen-bg-narancasta2.png);
    height: 400px;
    padding-top: 50px;
}

.drugi-kont .prva-kartica, .drugi-kont .druga-kartica , .drugi-kont .treca-kartica{
    box-shadow: none;
    min-height: 200px;
    border: 15px solid rgba(10,115,200,0.0);
    color: white;
    padding: 0px;
    padding-top: 40px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
}

.drugi-kont .prva-kartica h1, .drugi-kont .druga-kartica h1, .drugi-kont .treca-kartica h1{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -30px; 
    position: relative; font-size: 35px; 
    display: inline-block;
    font-family: 'Archivo Narrow', sans-serif;
}

.drugi-kont .prva-kartica p, .drugi-kont .treca-kartica p{
    position: absolute;
    width: 50%;
    margin-top: -5px;
    line-height: 1.7;
    color: white;
}

.drugi-kont .prva-kartica p{
    position: absolute;
    right: 0;
}

.drugi-kont .prva-kartica { grid-area: prva-kartica; text-align: right}
.drugi-kont .druga-kartica { grid-area: druga-kartica; background-image: url(slike/reciklaza_logo.png); background-size: cover; background-repeat: no-repeat; background-position: center;}
.drugi-kont .treca-kartica { grid-area: treca-kartica; }

.kartice-container [data-aos='fade-up']{
    margin-bottom: 30px;
}

[data-aos='fade-up'] .ikonica{
    position: absolute;
    margin-left: 250px;
    top: -30px;
    width: 20%;
}

.treci-kont .kartice-container {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    max-width: 1500px;  
    margin: 0 auto;
    grid-template: "prva-kartica druga-kartica";
    grid-gap: 90px;
    padding-top: 0px;
    background-color: none;
}

.treci-kont img{
    width: 110%;
    margin-left: -5%;
    margin-top: -50px;
    box-shadow: 0px 0px 15px black;
}

.smart-fac{
    position: relative;
    width: 100%;
    max-width: 200px;
    float: left;
}

.smart-fac img{
    position: relative;
    margin: 0 auto;
    margin-top: 0px;
    box-shadow: none;
    padding: 10px;
    border: 2px solid gray;
    margin-top: 30px;
}

.misija-i-vizija{
    color: white;
    float: right;
    width: 55%;
    margin-top: 30px;
}

.misija-i-vizija p{

}

.treci-kont h1{
    text-transform: uppercase;
    position: relative;
    font-size: 25px;
    margin-top: 10px;
    text-align: left;
}

.treci-kont p{
    font-size: 15px;
}

.treci-kont  .prva-kartica, .treci-kont  .druga-kartica{
    box-shadow: none;
    min-height: 200px;
    border: none;
    color: white;
    padding: 0px;
    padding-top: 0px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
    font-family: 'Archivo Narrow', sans-serif;
    color: #d0d0d0;
    padding-bottom: 30px;
}

.treci-kont  .prva-kartica{margin-left: 50px; }
.treci-kont  .druga-kartica{width: 80%; padding-top: 20px; line-height: 1.6;}

.treci-kont{
    background-color: #171717;
}

.hero-container {
    height: 95%;
    width: 100%;
    margin-top: 70px;
    position: relative;
    grid-gap: 1px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: 1fr 1fr 1fr ;
    grid-template-areas: "totalni totalni  prvi" "totalni  totalni drugi" "totalni totalni  treci";
    background-color: #15a1ff;
    background-image: url(slike/gradient.png);
    background-size: cover;
    max-height: 2300px;
}

.prvi { grid-area: prvi;}
.drugi { grid-area: drugi;}
.treci { grid-area: treci;}

.prvi, .drugi, .treci{
    width: 100%; 
    transition: 0.2s all;
    color: white;
    z-index: 1;
    text-decoration: none;
    background-image: url(slike/kartica-bg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-color: orangered;
}

.prvi .btn, .drugi .btn, .treci .btn{
    display: inline-block;
    padding: 10px;
    border: 1px solid white;
    color: white;
}

.prvi p, .drugi p, .treci p{
    margin: 20px;
    margin-left: 6%;
    margin-top: 10px;
    font-size: 14px;
    width: 70%;
    font-family: 'Archivo Narrow', sans-serif;
    line-height: 1.4;
    color: #d3d3d3;
}

.prvi .paragraf, .drugi .paragraf, .treci .paragraf{
    margin: 50px;
    margin-top: 30px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    font-family: 'Archivo Narrow', sans-serif;
    margin-left: 6%;
    color: white;
}

.prvi:hover, .drugi:hover, .treci:hover{
    background-image: url(slike/kartica-bg-hover.png);
    background-color: #e03d00;
    margin-left: -3%;
    padding-right: 3%;
    /*box-shadow: 0px 0px 11px black;*/
}

.prvi:hover p, .drugi:hover p, .treci:hover p{
    color: white;
}

.totalni { grid-area: totalni; 
    /*background-image: url(slike/logo2.png);
    background-size: 20%;*/
    background-image: url(slike/totalni-bg.png);
    background-position: right;
    background-repeat: no-repeat;
}

@keyframes ulet1 {
  from {margin-left: -200px; opacity: 0;}
  to {margin-left: 0px; opacity: 1.0;}
}

@keyframes ulet2 {
  from {margin-top: -30px; opacity: 0;}
  to {margin-left: 0px; opacity: 1.0;}
}

.ostatak{
    animation-name: ulet2;
    animation-duration: 1s;  
    animation-delay: 2.8s;
    animation-fill-mode: both;
    font-family: 'Archivo Narrow', sans-serif;
}

.uvodni-tekst h1{
    font-size: 100px;
    margin: 0;
    animation-name: ulet1;
    animation-duration: 1s;  
    animation-delay: 1s;
    animation-fill-mode: both;
    font-weight: bold;
}

.uvodni-tekst h1::after { 
    color: silver;
    font-weight: bold;
    font-size: 80px;
    pointer-events: all;
}
    
.uvodni-tekst .hr::after { 
    content: "HR";
}

.uvodni-tekst .eng::after { 
    content: "ENG";
}

.uvodni-tekst .de::after { 
    content: "DE";
}


.uvodni-tekst h2{
    font-size: 60px;
    margin: 0;
    margin-bottom: -15px;
    animation-name: ulet1;
    animation-duration: 1s;  
    animation-delay: 2s;
    animation-fill-mode: both; 
    max-width: 780px;
}

.uvodni-tekst h2:first-of-type{
  animation-name: ulet1;
  animation-duration: 1s;  
  animation-delay: 1.71s;
  animation-fill-mode: both; 
}


.uvodni-tekst h2:last-of-type{
  margin-bottom: 15px;
  animation-duration: 1s;  
  animation-delay: 2.3s;
  animation-fill-mode: both; 
}

.uvodni-tekst h2 a{
    color: white;
}

.uvodni-tekst h2 a:hover{
    color: #d3d3d3;
}

.uvodni-tekst{
    margin: 90px;
    width: 80%;
    margin-top: 140px;
    color: white;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.uvodni-tekst h3{
    color: #d8d8d8;
    font-size: 25px;
    margin: 0;
    margin-top: 15px;
}

.uvodni-tekst span{
    padding: 5px;
}

.uvodni-tekst p{
    width: 80%;
    font-size: 20px;
    margin-top: -5px;
}

.prva-kartica-tri h1{
    text-transform: uppercase;
    font-weight: bold;
}

.unutranji-kont p{
    margin: 20px;
    max-width: 330px;
    color: white;
    width: auto;
    position: absolute;
    font-size: 40px;
    font-weight: bold;
}

.unutranji-kont-drugi{
    margin: 30px;
    position: relative;
}

.unutranji-kont-drugi h1{
    font-size: 45px;
    margin-bottom: 0px;
    text-align: center;
}

.btn{
    margin-top: 10px;
    display: inline-block;
    padding: 10px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    background-color: #ff4300;
}

.btn:hover{
    color: #ff4300;
    text-decoration: none;
}

.btn2{
    margin-top: 10px;
    display: inline-block;
    padding: 10px;
    color: white;
    text-decoration: none;
    background-color: none;
    border: 1px solid white;
}

.btn2:hover{
    color: #ff4300;
    text-decoration: none;
}

.shutter-out-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition: 150ms ease-out;
  transition: 150ms ease-out;
}

.shutter-out-vertical2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition: 150ms ease-out;
  transition: 150ms ease-out;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding-top: 0;
  z-index: 1;
  margin-top: -16px;    
}

.dropdown:hover .dropdown-content{
  display: block;
}

.dropdown-content a{
  display: block;
    color: white;
      padding: 12px;
    color: 13px;    
    font-size: 14px !important;
}

.dropdown-content a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2b24f2+0,2cafe3+100 */
background: rgb(43,36,242); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(43,36,242,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(43,36,242,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(43,36,242,1) 0%,rgba(44,175,227,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b24f2', endColorstr='#2cafe3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.dropdown{
    display: inline-block;
}

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

.mystyle {
    width: 100%;
    padding: 25px;
    background-color: white !important;
    color: white;
    font-size: 25px;
    box-sizing: border-box;
    opacity:1.0 !important;
    top: 0;
    width: 100%;
    left: 0 !important;
    height: 100%;
    z-index: 10;
}

#myDIV{
    opacity:0.0;
    transition: 1s all;
    transition-delay: 0.2s;
    position: fixed !important;
    left: 100%;
    background-color: orangered;
    z-index: 100000000000000;
}

.clicked {
  animation: event 1.4s;
}
.clicked > #myDIV {
  animation: response 1.6s;
}

footer {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "footer-elemet-prvi footer-elemet-drugi footer-elemet-treci footer-elemet-treci-right footer-elemet-cetvrti footer-elemet-peti";
    height: 500px;
    color: white;
    background-color: #0e0e0e;
    border-bottom: 40px solid black;
    padding-top: 30px;
    font-family: 'Archivo Narrow', sans-serif;
}

footer li, .footer-elemet-prvi li:first-child{
    list-style: none;
    padding: 15px;
    padding-left: 10px;
    font-size: 14px;
    color: #524f4e;
    font-weight: normal;
}


footer input{
    background-color: #292929 !important;

}

footer a{
    text-decoration: none;
}

footer a li:hover{
    text-decoration: underline;
}

footer img{
    width: 100%;
    opacity: 0.3;
}

footer li img{
    width: 40px;
}

.footer-elemet-prvi li{
    padding: 5px;
}

.prvi-element-slika{
    width: 70%;
    margin-left: -8px;
    opacity: 0.4;
}

.lokacija{
    font-family: Myriad pro;
    font-size: 20px;
    margin-top: 0px;
    margin-left: 12px;
    width: 60%;
    color: #3d3b3a;
    font-weight: bold;
    opacity: 0.4;
}

.footer-elemet-treci a, .footer-elemet-treci-right a{
    color: #28d0ff;
}

.footer-elemet-treci p, .footer-elemet-treci-right p{
    color: #aaaaaa
}

.footer-elemet-prvi { grid-area: footer-elemet-prvi; padding-left: 20px;}
.footer-elemet-drugi { grid-area: footer-elemet-drugi; }
.footer-elemet-treci { grid-area: footer-elemet-treci; background-color: black; padding-left: 60px; margin-left: -150px; padding-top: 20px;}
.footer-elemet-treci-right { grid-area: footer-elemet-treci-right; background-color: black; padding-right: 60px;padding-left: 60px; margin-left: -60px; margin-right: 100px; padding-top: 20px; margin-top: }
.footer-elemet-cetvrti { grid-area: footer-elemet-cetvrti; }
.footer-elemet-peti { grid-area: footer-elemet-peti; }

.footer-elemet-treci h1, .footer-elemet-treci-right h1{ font-size: 20px; }
.footer-elemet-treci p, .footer-elemet-treci-right p{ font-size: 14px; margin-top: -6px; font-weight: normal; }


.footer-elemet-prvi, .footer-elemet-drugi,  .footer-elemet-cetvrti{
    border-left: 1px solid black;
} 

.footer-elemet-cetvrti{
    display: grid;
    grid-template-columns: 1fr 1f;
    grid-template-rows: 1fr;
    grid-template-areas: "footer-elemet-cetvrti-left footer-elemet-cetvrti-right";
}

.footer-elemet-cetvrti-left{ grid-area: footer-elemet-cetvrti-left; }
.footer-elemet-cetvrti-right { grid-area: footer-elemet-cetvrti-right; padding-left: 120px;}

.footer-elemet-cetvrti-right a li:hover{

}

.footer-elemet-cetvrti-right a li img{
    width: 100%;
    max-width: 90px;
}

.certifikat1{
    background-image: url(slike/certifikat.png);
    background-size: cover;
    height: 80px;
    width: 80px;
    margin-bottom: -20px;
}

.certifikat1:hover{
    background-image: url(slike/certifikat-hover.png);
}

.certifikat2{
    background-image: url(slike/certifikat2.png);
    background-size: cover;
    height: 60px;
    width: 60px;
    display: inline-block;
    margin-left: 15%;
}

.certifikat2:hover{
    background-image: url(slike/certifikat2-hover.png);
}

.certifikat3{
    background-image: url(slike/certifikat3.png);
    background-size: cover;
    height: 65px;
    width: 70px;
    display: inline-block;
    margin-left: 4%;
}

.footer-elemet-cetvrti-left .btn{
    font-family: 'Archivo Narrow', sans-serif;
    color: black;
    font-size: 14px;
    margin-left: 10px;
}

.email-field{
    font-family: myriad pro;
    padding: 5px;
    margin-left: 10px;
}

.netkani{
    background-color: #202020;
}

.netkani-tekstil-slika h1{
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 24%;
    font-size: 40px;
}

.netkani-tekstil-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-tekstil-slika p{
    width: 80%;
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    font-weight: bold;
    color: black;
    text-shadow: 0px 0px 7px  white;
}

.netkani-tekstil-kont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1500px;  
    margin: 0 auto;
    grid-template: "netkani-left netkani-right";
    grid-gap: 0px;
    padding-top: 0px;
    background-color: none;
    margin-top: 60px;
    z-index: 2;
    position: relative;
    font-family: 'Archivo Narrow', sans-serif;
    /*background-color: gray;*/
}

.netkani-left {grid-area: netkani-left;}
.netkani-right {grid-area: netkani-right;    
    /*background-color: #2e2e2e;*/}

.netkani-tekstil-kont h1{
    color: black;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.netkani-tekstil-kont h1 span{
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-prva .dva-sa-sest, .netkani-druga .dva-sa-sest{
    margin: 0 auto;
    display: flex;
  justify-content: center;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    width: 100%;
    text-align: left;
}

.netkani-prva .dva-sa-sest h1{
    font-size: 20px;
    margin-top: 0;
    background-color: white;
    color: black;
    padding: 10px;
    margin-left: -10px;
    max-width: 180px;
}

.netkani-prva .dva-sa-sest {
    max-width: 510px;
}

.netkani-prva .dva-sa-sest:first-of-type {
  padding-top: 20px;
}

.netkani-prva .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    margin: 2px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
    transition: 0.2s all;
}

.netkani-druga .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    min-height: 160px;
    margin: 1px;
    padding: 10px;
    border-left: 1px solid white;
}

.netkani-druga .dva-sa-sest div h1{
    font-size: 18px;
    margin-top: 0px;
    text-transform: lowercase;
    text-align: left;
    font-weight: bold;
}

.netkani-druga .dva-sa-sest li{
    list-style: square;
    margin-bottom: 10px;
}

.netkani-prva .prva-slika{background-image: url(slike/prva-netkani.png)}
.netkani-prva .druga-slika{background-image: url(slike/druga-netkani.png)}
.netkani-prva .treca-slika{background-image: url(slike/treca-netkani.png)}
.netkani-prva .cetvrta-slika{background-image: url(slike/cetvrta-netkani.png)}
.netkani-prva .peta-slika{background-image: url(slike/peta-netkani.png)}
.netkani-prva .sesta-slika{background-image: url(slike/sesta-netkani.png)}

.netkani-prva .dva-sa-sest div p{
    opacity: 0.0;
    width: 100%;
    background-color: black;
    text-align: left;
    transition: 0.2s all;
    padding: 5px;
    margin: -5px;
}

.netkani-prva .dva-sa-sest div:hover p{
    opacity: 1.0;
    position: relative;
    margin-top: 10px;
}

.netkani-prva .dva-sa-sest div:hover{
}

.netkani-prva .dva-sa-sest div:hover h1{
    opacity: 0.5;
}

.netkani-prva .dva-sa-sest div:hover{
    background-color: black;
}

.netkani{
    /*background-color: #2e2e2e;*/
}

.netkani .netkani-druga .dva-sa-sest h1{
    position: relative;
}

.tepisi-slika{
    background-image: url(slike/regen-bg2.png);
    background-size: cover;
    height: 20px;
    margin: 0 auto;
    position: relative;
    padding-top: 140px;
    font-family: 'Archivo Narrow', sans-serif;
    z-index: 1;
}

.tepisi-slika h1{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 20%;
    font-size: 40px;
}

.tepisi-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.tepisi-galerija{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 700px;
}

.tepisi-galerija img{
    background-color: aqua;
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    margin: 2px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
}

.tepisi-kont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    grid-template: "tepisi-left tepisi-right";
    grid-gap: 20px;
    padding-top: 0px;
    margin-top: -60px;
    z-index: 2;
    position: relative;
    font-family: 'Archivo Narrow', sans-serif;
    max-width: 1400px;
    padding-top: 30px;
    border-bottom: 80px solid white;
    /*background-color: gray;*/
}

.tepisi-left {grid-area: tepisi-left; background-color: #e0e0e0; display: flex;}
.tepisi-right {grid-area: tepisi-right; width: 80%; text-align: justify; line-height: 1.6; padding-left: 5%;}   

.tepisi-left .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    max-height: 200px;
    margin: 12px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
    color: #4c4c4c;
}

.tepisi2{
    margin-top: 60px;
}

.kontakt:hover{
    margin-left: -210%;
    width: 310%;
    transition: 0.7s all;
}

.kontakt:hover .container{
    opacity: 1.0;
    right: 8%;
} 

.kontakt-tekst{
    transition: 0.1s;
    max-width: 430px;
} 

.kontakt:hover .kontakt-tekst{
    margin-left: 20%;
        z-index: -2;
    position: relative;
} 

.kontakt:hover .paragraf{
    margin-left: 20%;
} 

.submit{
    background-color: orangered !important;
    border-radius: 0 !important;
        font-family: 'Archivo Narrow', sans-serif !important;
}

.container{
    font-family: 'Archivo Narrow', sans-serif !important;
    position: relative;
}

.kontakt .container{
    position: absolute;
    bottom: 5%;;
    right: 3%;
    width: 40%;
    height: 20%;
    background-color: orangered;
    opacity: 0.0;
    transition: 0.3s all;
}

.kontakt-info{
    background-color: black;
    height: 400px;
    width: 40%;
    position: absolute;
    z-index: -1;
    right: 3%;
    transition: 0.4s all;
    opacity: 0.0;
    transition-delay: 2s;
    transition-property: all;
    height: 100%;
    margin-top: -20px;
}

.kontakt-info p{
    margin: 50px;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: normal;
}

.kontakt:hover .kontakt-info{
    opacity: 1.0;
    right: 100%;
} 

.kontakt:hover{
    background-color: #c53500;
}

.toggle-content {
	display: none;
	height: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out;
    background-color: #0f0f0f;
    color: white;
}

.toggle-content.is-visible {
	display: block;
	height: auto;
}
    
.zaposli-se{
    width: 100%;
    padding-bottom: 0;
    text-align: center;
    background-color: black;
}    
    
.zaposli-se-crta{
    width: 100%;
    max-width: 1300px;  
    margin: 0 auto;
    background-image: url(slike/zaposli-se-crta.png);
    background-position: center;
}   
    
.zaposli-se a{
    color: orangered;
    text-decoration: none;
    font-family: 'Archivo Narrow', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    font-size: 40px;
    background-image: url(slike/plus-ikonica.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 65px;
    padding-left: 4px;
    background-color: black;
    transition: 0.2s all;
}     
    
.zaposli-se a:hover{
    color: #fe2a00;
    background-image: url(slike/plus-ikonica-hover.png);
} 
   
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Archivo Narrow', sans-serif;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 0px;
    background-color: #dfdfdf;
    padding: 20px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}    
    
#example .container{
    background-color: #0f0f0f;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 0;
    width: 100%;
    max-width: 1100px;
}

#example label{
    position: absolute;
    opacity: 0.0;
}

#example #lname{
    width: 49.5%;
    float: left;
    margin-left: 1%;
}

#example #fname{
    width: 49.5%;
    float: left;
    
}

.netkani-tekstil-slika{
    background-image: url(slike/netkani-tekstil.png);
    background-size: cover;
    height: 260px;
    margin: 0 auto;
    position: relative;
    padding-top: 240px;
    font-family: 'Archivo Narrow', sans-serif;
    z-index: 1;
}

.netkani-tekstil-slika h1{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 24%;
    font-size: 40px;
}

.netkani-tekstil-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-tekstil-slika p{
    width: 80%;
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    font-weight: bold;
    color: black;    
}



@media (max-width: 68em) {
   

.uvodni-tekst h1::after { 
    font-size: 40px;
}
        
    
body{margin: 0; font-family: myriad pro; background-color: black; overflow-x: hidden;}

body,html{
    height:100%;
}
    
.kontakt{
display: none;
}

.kontakt:hover .container{
display: none;
} 

.kontakt-tekst{
display: none;
} 

.kontakt:hover .kontakt-tekst{
display: none;
} 

.kontakt:hover .paragraf{
display: none;
} 
    
.ostatak p{
    display: none;
}    
    
[data-aos='fade-up'] .ikonica{
    position: absolute;
    margin-left: 250px;
    top: -50px;
    width: 20%;
    max-width: 80px;
}
    

@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow');

.hero-container .responzivno-skriven{
    display: none; 
}
    
.hero-container container{
    display: none; 
}
    
    
.info-kont{
    width: 100%;
    margin: 0 auto;
}

.informacije-full{
    margin-top: -30px;
    padding-top: 70px;
    padding-bottom: 70px;
    background-image: url(slike/regen-bg.png);
    background-size: cover;
    position: relative;
    width: 100%;
    text-align: center;
    font-family: 'Archivo Narrow', sans-serif;
}

.informacije-full h1, .informacije-full p{
    color: white;
    text-shadow: 1px 2px 4px black;
}

.transparent {
opacity: 0.5;
transition: all 0.5s;
}


.kartice-container-superior{
    background-size: cover;
    position: relative;
    background-color: white;
}

.prvi-kont{
    background-image: url(slike/regen-bg2.png);
    margin-top: 0px;
    position: relative;
}

.kartice-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    max-width: 1300px;  
    margin: 0 auto;
    grid-template: "prva-kartica" "druga-kartica" "treca-kartica";
    grid-gap: 0px;
    padding-top: 0px;
}

.prva-kartica, .druga-kartica ,.treca-kartica{
    box-shadow: 0px 0px 0px black, inset 0 0 0 3px white;
    min-height: 200px;
    border: 15px solid rgba(10,115,200,0.0);
    color: white;
    padding: 20px;
    padding-top: 50px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
    font-family: 'Archivo Narrow', sans-serif;
}

.prva-kartica h1, .druga-kartica h1,.treca-kartica h1{
    margin-top: -38px; position: absolute; font-size: 35px;
    font-family: 'Archivo Narrow', sans-serif;
    text-transform: lowercase;
    font-weight: bold;
}

.prva-kartica { grid-area: prva-kartica;}
.druga-kartica { grid-area: druga-kartica; transition-delay: 0.1s;}
.treca-kartica { grid-area: treca-kartica; transition-delay: 0.2s;}

.drugi-kont{
    background-image: url(slike/regen-bg-narancasta2.png);
    height: 400px;
    padding-top: 50px;
}

.drugi-kont .prva-kartica, .drugi-kont .druga-kartica , .drugi-kont .treca-kartica{
    box-shadow: none;
    min-height: 200px;
    border: 15px solid rgba(10,115,200,0.0);
    color: white;
    padding: 0px;
    padding-top: 40px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
}

.drugi-kont .prva-kartica h1, .drugi-kont .druga-kartica h1, .drugi-kont .treca-kartica h1{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -30px; 
    position: relative; font-size: 35px; 
    display: inline-block;
    font-family: 'Archivo Narrow', sans-serif;
}

.drugi-kont .prva-kartica p, .drugi-kont .treca-kartica p{
    position: absolute;
    width: 50%;
    margin-top: -5px;
    line-height: 1.7;
    color: white;
}

.drugi-kont .prva-kartica p{
    position: absolute;
    right: 0;
}

.drugi-kont .kartice-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    max-width: 1300px;  
    margin: 0 auto;
    grid-template: "prva-kartica treca-kartica" "druga-kartica druga-kartica" ;
    grid-gap: 0px;
    padding-top: 0px;
}
    
.drugi-kont .prva-kartica { grid-area: prva-kartica; text-align: right; text-shadow: 1px 1px black;}
.drugi-kont .druga-kartica { grid-area: druga-kartica; background-image: url(slike/reciklaza_logo.png); background-size: 70%;; background-repeat: no-repeat; background-position: center; position: absolute; width: 100%; height: 100%; margin-top: -70px; z-index: 0; opacity: 0.7 !important;}
.drugi-kont .treca-kartica { grid-area: treca-kartica; text-shadow: 1px 1px black; }

.kartice-container [data-aos='fade-up']{
    margin-bottom: 0px;
}

[data-aos='fade-up'] .ikonica{
    position: absolute;
    margin-left: 250px;
    top: -30px;
    width: 20%;
}

.treci-kont .kartice-container {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1500px;  
    margin: 0 auto;
    grid-template: "prva-kartica" "druga-kartica";
    grid-gap: 0px;
    padding-top: 0px;
    background-color: none;
}

.treci-kont img{
    width: 105%;
    margin-top: 0px;
    box-shadow: 0px 0px 15px black;
    opacity: 0.3;
}

.smart-fac{
    position: relative;
    width: 100%;
    max-width: 800px;
    float: none;
    margin-top: -60%;
}

.smart-fac img{
    position: relative;
    margin: 0 auto;
    border: none;
    width: 40%;
    padding: 30%;
    padding-top: 10px;
    padding-bottom: 0;
    box-shadow: none;
    opacity: 1.0;
}

.misija-i-vizija{
    color: white;
    width: 80%;
    margin-top: 0px;
    padding: 10%;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #28d0ff;
    color: black;
}

.misija-i-vizija p{

}

.treci-kont h1{
    text-transform: uppercase;
    position: relative;
    font-size: 25px;
    margin-top: 10px;
    text-align: left;
}

.treci-kont p{
    font-size: 15px;
}

.treci-kont  .prva-kartica, .treci-kont  .druga-kartica{
    box-shadow: none;
    min-height: 200px;
    border: none;
    color: white;
    padding: 0px;
    padding-top: 0px;
    z-index: 1;
    line-height: 1.3;
    text-align: justify;
    font-size: 16px;
    font-family: 'Archivo Narrow', sans-serif;
    color: #d0d0d0;
    padding-bottom: 30px;
}

.treci-kont  .prva-kartica{margin-left: 0px; }
.treci-kont  .druga-kartica{width: 90%; padding-top: 20px; line-height: 1.6; margin: 5%; margin-top: -10px; margin-bottom: 0;}

.treci-kont{
    background-color: #171717;
}

.hero-container {
    height:100%;
    width: 100%;
    margin-top: 0px;
    position: relative;
    grid-gap: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 1fr 1fr ;
    grid-template-areas: "totalni totalni " "prvi drugi" ;
    background-color: #15a1ff;
    background-image: url(slike/gradient.png);
    background-size: cover;
    max-height: 2300px;
    position: relative;
}

.prvi { grid-area: prvi;}
.drugi { grid-area: drugi;}
.treci { grid-area: treci;}

.prvi, .drugi, .treci{
    width: 100%; 
    transition: 0.2s all;
    color: white;
    z-index: 1;
    text-decoration: none;
    background-image: none;
    background-position: right;
    background-repeat: no-repeat;
    background-color: orangered;
    border-right: 2px solid black;
}

.prvi .btn, .drugi .btn, .treci .btn{
    display: inline-block;
    padding: 10px;
    border: 1px solid white;
    color: white;
}

.prvi p, .drugi p, .treci p{
    margin: 20px;
    margin-left: 6%;
    margin-top: 10px;
    font-size: 14px;
    width: 70%;
    font-family: 'Archivo Narrow', sans-serif;
    line-height: 1.4;
    color: #d3d3d3;
}

.prvi .paragraf, .drugi .paragraf, .treci .paragraf{
    margin: 50px;
    margin-top: 30px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    font-family: 'Archivo Narrow', sans-serif;
    margin-left: 6%;
    color: white;
}

.prvi:hover, .drugi:hover, .treci:hover{
    background-image: none;
    background-color: #e03d00;
    margin-left:0;
    padding-right: 0;
    /*box-shadow: 0px 0px 11px black;*/
}

.prvi:hover p, .drugi:hover p, .treci:hover p{
    color: white;
}

.totalni { grid-area: totalni; 
    /*background-image: url(slike/logo2.png);
    background-size: 20%;*/
    background-image: url(slike/totalni-bg.png);
    background-position: right;
    background-repeat: no-repeat;
}

@keyframes ulet1 {
  from {margin-left: -200px; opacity: 0;}
  to {margin-left: 0px; opacity: 1.0;}
}

@keyframes ulet2 {
  from {margin-top: -30px; opacity: 0;}
  to {margin-left: 0px; opacity: 1.0;}
}

.ostatak{
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    font-family: 'Archivo Narrow', sans-serif;
}

.uvodni-tekst h1{
    font-size: 40px;
    margin: 0;
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    font-weight: bold;
}

.uvodni-tekst h2{
    font-size: 60px;
    margin: 0;
    margin-bottom: -15px;
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    line-height: 0.9;
    margin-bottom: 10px;
}

.uvodni-tekst h2:first-of-type{
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
}


.uvodni-tekst h2:last-of-type{
  margin-bottom: 15px;
  animation-duration: 1s;  
  animation-delay: 2.3s;
  animation-fill-mode: both; 
}

.uvodni-tekst h2 a{
    color: white;
}

.uvodni-tekst h2 a:hover{
    color: #d3d3d3;
}

.uvodni-tekst{
    margin: 0px;
    width: 80%;
    margin-top: 140px;
    color: white;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-top: 110px;
}

.uvodni-tekst h3{
    color: #d8d8d8;
    font-size: 25px;
    margin: 0;
    margin-top: 15px;
}

.uvodni-tekst span{
    padding: 5px;
}

.uvodni-tekst p{
    width: 80%;
    font-size: 20px;
    margin-top: -5px;
}

.prva-kartica-tri h1{
    text-transform: uppercase;
    font-weight: bold;
}

.unutranji-kont p{
    margin: 20px;
    max-width: 330px;
    color: white;
    width: auto;
    position: absolute;
    font-size: 40px;
    font-weight: bold;
}

.unutranji-kont-drugi{
    margin: 30px;
    position: relative;
}

.unutranji-kont-drugi h1{
    font-size: 45px;
    margin-bottom: 0px;
    text-align: center;
}

.btn{
    margin-top: 10px;
    display: inline-block;
    padding: 20px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    background-color: #ff4300;
}

.btn:hover{
    color: #ff4300;
    text-decoration: none;
}

.btn2{
    margin-top: 10px;
    display: inline-block;
    padding: 10px;
    color: white;
    text-decoration: none;
    background-color: none;
    border: 1px solid white;
}

.btn2:hover{
    color: #ff4300;
    text-decoration: none;
}

.shutter-out-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition: 150ms ease-out;
  transition: 150ms ease-out;
}

.shutter-out-vertical2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition: 150ms ease-out;
  transition: 150ms ease-out;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding-top: 0;
  z-index: 1;
  margin-top: -16px;    
}

.dropdown:hover .dropdown-content{
  display: block;
}

.dropdown-content a{
  display: block;
    color: white;
      padding: 12px;
    color: 13px;    
    font-size: 14px !important;
}

.dropdown-content a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2b24f2+0,2cafe3+100 */
background: rgb(43,36,242); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(43,36,242,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(43,36,242,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(43,36,242,1) 0%,rgba(44,175,227,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b24f2', endColorstr='#2cafe3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.dropdown{
    display: inline-block;
}

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

.mystyle {
    width: 100%;
    padding: 25px;
    background-color: white !important;
    color: white;
    font-size: 25px;
    box-sizing: border-box;
    opacity:1.0 !important;
    top: 0;
    width: 100%;
    left: 0 !important;
    height: 100%;
    z-index: 10;
}

#myDIV{
    opacity:0.0;
    transition: 1s all;
    transition-delay: 0.2s;
    position: fixed !important;
    left: 100%;
    background-color: orangered;
}

.clicked {
  animation: event 1.4s;
}
.clicked > #myDIV {
  animation: response 1.6s;
}

footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "footer-elemet-prvi footer-elemet-drugi" "footer-elemet-treci footer-elemet-treci-right"  "footer-elemet-cetvrti footer-elemet-peti";
    height: 500px;
    color: white;
    background-color: #0e0e0e;
    border-bottom: 40px solid black;
    padding-top: 30px;
    font-family: 'Archivo Narrow', sans-serif;
}

footer li, .footer-elemet-prvi li:first-child{
    list-style: none;
    padding: 15px;
    padding-left: 10px;
    font-size: 14px;
    color: #524f4e;
    font-weight: normal;
}


footer input{
    background-color: #292929 !important;

}

footer a{
    text-decoration: none;
}

footer a li:hover{
    text-decoration: underline;
}

footer img{
    width: 100%;
    opacity: 0.3;
}

footer li img{
    width: 40px;
}

.footer-elemet-prvi li{
    padding: 5px;
}

.prvi-element-slika{
    width: 70%;
    margin-left: -8px;
    opacity: 0.4;
}

.lokacija{
    font-family: Myriad pro;
    font-size: 20px;
    margin-top: 0px;
    margin-left: 12px;
    width: 60%;
    color: #3d3b3a;
    font-weight: bold;
    opacity: 0.4;
}

.footer-elemet-treci p, .footer-elemet-treci-right p{
    color: #aaaaaa;
}

.footer-elemet-prvi { grid-area: footer-elemet-prvi; padding-left: 20px; width: 60%;}
.footer-elemet-drugi { grid-area: footer-elemet-drugi; width: 110%; margin-left: 50%; position: absolute;}
.footer-elemet-treci { grid-area: footer-elemet-treci; background-color: none; padding-left: 30px; margin-left: 0px; }
.footer-elemet-treci-right { grid-area: footer-elemet-treci-right; background-color: none; padding-right: 60px;padding-left: 0px; margin-left: -70%; margin-right: 100px; width: 150%;}
.footer-elemet-cetvrti { grid-area: footer-elemet-cetvrti; background-color: #0e0e0e;}
.footer-elemet-peti { grid-area: footer-elemet-peti; background-color: #0e0e0e}

.footer-elemet-treci h1, .footer-elemet-treci-right h1{ font-size: 20px; }
.footer-elemet-treci p, .footer-elemet-treci-right p{ font-size: 14px; margin-top: -6px; font-weight: normal; }


.footer-elemet-prvi, .footer-elemet-drugi,  .footer-elemet-cetvrti{
    border-left: 1px solid black;
} 

.footer-elemet-cetvrti{
    display: grid;
    grid-template-columns: 1fr 1f;
    grid-template-rows: 1fr;
    grid-template-areas: "footer-elemet-cetvrti-left footer-elemet-cetvrti-right";
}

.footer-elemet-cetvrti-left{ grid-area: footer-elemet-cetvrti-left; }
.footer-elemet-cetvrti-right { grid-area: footer-elemet-cetvrti-right; padding-left: 120px;}

.footer-elemet-cetvrti-right a li:hover{

}

.footer-elemet-cetvrti-right a li img{
    width: 100%;
    max-width: 90px;
}

.certifikat1{
    background-image: url(slike/certifikat.png);
    background-size: cover;
    height: 80px;
    width: 80px;
    margin-bottom: -20px;
}

.certifikat1:hover{
    background-image: url(slike/certifikat-hover.png);
}

.certifikat2{
    background-image: url(slike/certifikat2.png);
    background-size: cover;
    height: 60px;
    width: 60px;
    display: inline-block;
    margin-left: 15%;
}

.certifikat2:hover{
    background-image: url(slike/certifikat2-hover.png);
}

.certifikat3{
    background-image: url(slike/certifikat3.png);
    background-size: cover;
    height: 65px;
    width: 70px;
    display: inline-block;
    margin-left: 4%;
}

.footer-elemet-cetvrti-left .btn{
    font-family: 'Archivo Narrow', sans-serif;
    color: black;
    font-size: 14px;
    margin-left: 10px;
}

.email-field{
    font-family: myriad pro;
    padding: 5px;
    margin-left: 10px;
}

.netkani{
    background-color: #202020;
}
    
.netkani .kartice-container .prva-kartica, .netkani .kartice-container .druga-kartica{

    box-shadow: none;
}


.netkani-tekstil-slika h1{
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 24%;
    font-size: 40px;
}

.netkani-tekstil-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-tekstil-slika p{
    width: 80%;
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    font-weight: bold;
    color: black;
    text-shadow: 0px 0px 7px  white;
}

.netkani-tekstil-kont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1500px;  
    margin: 0 auto;
    grid-template: "netkani-left netkani-right";
    grid-gap: 0px;
    padding-top: 0px;
    background-color: none;
    margin-top: 60px;
    z-index: 2;
    position: relative;
    font-family: 'Archivo Narrow', sans-serif;
    /*background-color: gray;*/
}

.netkani-left {grid-area: netkani-left;}
.netkani-right {grid-area: netkani-right;    
    /*background-color: #2e2e2e;*/}

.netkani-tekstil-kont h1{
    color: black;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.netkani-tekstil-kont h1 span{
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-prva .dva-sa-sest, .netkani-druga .dva-sa-sest{
    margin: 0 auto;
    display: flex;
  justify-content: center;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    width: 100%;
}

.netkani-prva .dva-sa-sest h1{
    font-size: 20px;
    margin-top: 0;
    background-color: white;
    color: black;
    padding: 10px;
    margin-left: -10px;
    max-width: 180px;
}

.netkani-prva .dva-sa-sest {
    max-width: 510px;
}

.netkani-prva .dva-sa-sest:first-of-type {
  padding-top: 20px;
}

.netkani-prva .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    margin: 2px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
    transition: 0.2s all;
}

.netkani-druga .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    min-height: 160px;
    margin: 1px;
    padding: 10px;
    border-left: 1px solid white;
}

.netkani-druga .dva-sa-sest div h1{
    font-size: 18px;
    margin-top: 0px;
    text-transform: lowercase;
    text-align: left;
    font-weight: bold;
}

.netkani-druga .dva-sa-sest li{
    list-style: square;
    margin-bottom: 10px;
}

.netkani-prva .prva-slika{background-image: url(slike/prva-netkani.png)}
.netkani-prva .druga-slika{background-image: url(slike/druga-netkani.png)}
.netkani-prva .treca-slika{background-image: url(slike/treca-netkani.png)}
.netkani-prva .cetvrta-slika{background-image: url(slike/cetvrta-netkani.png)}
.netkani-prva .peta-slika{background-image: url(slike/peta-netkani.png)}
.netkani-prva .sesta-slika{background-image: url(slike/sesta-netkani.png)}

.netkani-prva .dva-sa-sest div p{
    opacity: 0.0;
    width: 100%;
    background-color: black;
    text-align: left;
    transition: 0.2s all;
    padding: 5px;
    margin: -5px;
}

.netkani-prva .dva-sa-sest div:hover p{
    opacity: 1.0;
    position: relative;
    margin-top: 10px;
}

.netkani-prva .dva-sa-sest div:hover{
}

.netkani-prva .dva-sa-sest div:hover h1{
    opacity: 0.5;
}

.netkani-prva .dva-sa-sest div:hover{
    background-color: black;
}

.netkani{
    /*background-color: #2e2e2e;*/
}

.netkani .netkani-druga .dva-sa-sest h1{
    position: relative;
}

.tepisi-slika{
    background-image: url(slike/regen-bg2.png);
    background-size: cover;
    height: 20px;
    margin: 0 auto;
    position: relative;
    padding-top: 140px;
    font-family: 'Archivo Narrow', sans-serif;
    z-index: 1;
}

.tepisi-slika h1{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 20%;
    font-size: 40px;
}

.tepisi-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.tepisi-galerija{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    width: 700px;
}

.tepisi-galerija img{
    background-color: aqua;
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    margin: 2px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
}

.tepisi-kont{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    grid-template: "tepisi-left" "tepisi-right";
    grid-gap: 20px;
    padding-top: 0px;
    margin-top: -60px;
    z-index: 2;
    position: relative;
    font-family: 'Archivo Narrow', sans-serif;
    max-width: 1400px;
    padding-top: 30px;
    border-bottom: 80px solid white;
    /*background-color: gray;*/
}

.tepisi-left {grid-area: tepisi-left; background-color: #e0e0e0; display: flex;}
.tepisi-right {grid-area: tepisi-right; width: 94%; text-align: justify; line-height: 1.6; padding-left: 3%;}
    

.tepisi-left .dva-sa-sest div{
    width: 100%; 
    display: block; 
    height: 100%;
    max-width: 200px;
    min-height: 160px;
    max-height: 200px;
    margin: 12px;
    padding: 10px;
    background-size: cover;
    transition: 0.2s all;
    color: #4c4c4c;
}

.tepisi2{
    margin-top: 60px;
}

.kontakt:hover{
    margin-left: -210%;
    width: 310%;
    transition: 0.7s all;
}

.kontakt:hover .container{
    opacity: 1.0;
    right: 8%;
} 

.kontakt-tekst{
    transition: 0.1s;
    max-width: 430px;
} 

.kontakt:hover .kontakt-tekst{
    margin-left: 20%;
        z-index: -2;
    position: relative;
} 

.kontakt:hover .paragraf{
    margin-left: 20%;
} 

.submit{
    background-color: orangered !important;
    border-radius: 0 !important;
        font-family: 'Archivo Narrow', sans-serif !important;
}

.container{
    font-family: 'Archivo Narrow', sans-serif !important;
    position: relative;
}

.kontakt .container{
    position: absolute;
    bottom: 5%;;
    right: 3%;
    width: 40%;
    height: 20%;
    background-color: orangered;
    opacity: 0.0;
    transition: 0.3s all;
}

.kontakt-info{
    background-color: black;
    height: 400px;
    width: 40%;
    position: absolute;
    z-index: -1;
    right: 3%;
    transition: 0.4s all;
    opacity: 0.0;
    transition-delay: 2s;
    transition-property: all;
    height: 100%;
    margin-top: -20px;
}

.kontakt-info p{
    margin: 50px;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: normal;
}

.kontakt:hover .kontakt-info{
    opacity: 1.0;
    right: 100%;
} 

.kontakt:hover{
    background-color: #c53500;
}

.toggle-content {
	display: none;
	height: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out;
    background-color: #0f0f0f;
    color: white;
}

.toggle-content.is-visible {
	display: block;
	height: auto;
}
    
.zaposli-se{
    width: 100%;
    padding-bottom: 0;
    text-align: center;
    background-color: black;
}    
    
.zaposli-se-crta{
    width: 100%;
    max-width: 1300px;  
    margin: 0 auto;
    background-image: url(slike/zaposli-se-crta.png);
    background-position: center;
}   
    
.zaposli-se a{
    color: orangered;
    text-decoration: none;
    font-family: 'Archivo Narrow', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    font-size: 40px;
    background-image: url(slike/plus-ikonica.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 65px;
    padding-left: 4px;
    background-color: black;
    transition: 0.2s all;
}     
    
.zaposli-se a:hover{
    color: #fe2a00;
    background-image: url(slike/plus-ikonica-hover.png);
} 
   
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Archivo Narrow', sans-serif;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}    
    
#example .container{
    background-color: #0f0f0f;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 0;
    width: 100%;
    max-width: 1100px;
}

#example label{
    position: absolute;
}

#example #lname{
    width: 49.5%;
    float: left;
    margin-left: 1%;
}

#example #fname{
    width: 49.5%;
    float: left;
    
}

.netkani-tekstil-slika{
    background-image: url(slike/netkani-tekstil.png);
    background-size: cover;
    height: 260px;
    margin: 0 auto;
    position: relative;
    padding-top: 240px;
    font-family: 'Archivo Narrow', sans-serif;
    z-index: 1;
}

.netkani-tekstil-slika h1{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    top: 24%;
    font-size: 40px;
}

.netkani-tekstil-slika h1 span{
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

.netkani-tekstil-slika p{
    width: 80%;
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    font-weight: bold;
    color: black;    
}

}


@media only screen and (max-width: 1300px) {
   
.uvodni-tekst h1::after { 
    font-size: 40px;
}
          
    
    
.footer-elemet-prvi { grid-area: footer-elemet-prvi; padding-left: 20px; width: 60%;}
.footer-elemet-drugi { grid-area: footer-elemet-drugi; width: 110%; margin-left: 50%; position: absolute;}
.footer-elemet-treci { grid-area: footer-elemet-treci; background-color: none; padding-left: 30px; margin-left: 0px; }
.footer-elemet-treci-right { grid-area: footer-elemet-treci-right; background-color: none; padding-right: 60px;padding-left: 0px; margin-left: -70%; margin-right: 100px; width: 150%;}
.footer-elemet-cetvrti { grid-area: footer-elemet-cetvrti; background-color: #0e0e0e;}
.footer-elemet-peti { grid-area: footer-elemet-peti; background-color: #0e0e0e}
    
footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "footer-elemet-prvi footer-elemet-drugi" "footer-elemet-treci footer-elemet-treci-right"  "footer-elemet-cetvrti footer-elemet-peti";
    height: 500px;
    color: white;
    background-color: #0e0e0e;
    border-bottom: 40px solid black;
    padding-top: 30px;
    font-family: 'Archivo Narrow', sans-serif;
}

footer li, .footer-elemet-prvi li:first-child{
    list-style: none;
    padding: 15px;
    padding-left: 10px;
    font-size: 14px;
    color: #524f4e;
    font-weight: normal;
}


footer input{
    background-color: #292929 !important;

}

footer a{
    text-decoration: none;
}

footer a li:hover{
    text-decoration: underline;
}

footer img{
    width: 100%;
    opacity: 0.3;
}

footer li img{
    width: 40px;
}

.footer-elemet-prvi li{
    padding: 5px;
}

.prvi-element-slika{
    width: 70%;
    margin-left: -8px;
    opacity: 0.4;
}
    
    
.ostatak{
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    font-family: 'Archivo Narrow', sans-serif;
}

.uvodni-tekst h1{
    font-size: 40px;
    margin: 0;
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    font-weight: bold;
}



.uvodni-tekst h2{
    font-size: 60px;
    margin: 0;
    margin-bottom: -15px;
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
    line-height: 0.9;
    margin-bottom: 10px;
}

.uvodni-tekst h2:first-of-type{
    animation-name: none;
    animation-duration: none;
    animation-delay: none;
    animation-fill-mode: none;
}

.uvodni-tekst h2:last-of-type{
  margin-bottom: 15px;
  animation-duration: 1s;  
  animation-delay: 2.3s;
  animation-fill-mode: both; 
}
    
.uvodni-tekst{
    margin: 0px;
    width: 80%;
    margin-top: 140px;
    color: white;
    padding-left: 40px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-top: 90px;

}    
    
}


    
}