:root {

    --fontSize: 1rem;
    
    /* boje Modern line */

    --mainColor: rgb(37,39,41);
    --highlightColor: hwb(190, 35%, 20%);
--plava: rgb(0,80,131);
--tamnoplava: rgb(57,88,114); /* #395872 */
--svijetloplava: #0098d6;
--zelena: rgb(166,180,40); /* #a6b428 */
--tamnozelena: rgb(97,113,45); /* #61712d */
--svijetlozelena: #dafd96;
--svijetlozelena2: #b7fc2d;
--siva: #bbbbbb;
--crvena: rgb(185,62,49);

/* font */
--sans: 'Roboto', sans-serif;

/* breakpoints */

--mali: 'screen' 600px;
--malipx: 600px;
--srednji: 'screen' (min-width 960px) (min-height 800px);
--veliki:1280px;

/* razno */

--maxwidth-slika:1500px;

}

/* media queries */

/* @custom-media --tablet only screen and (width >= 960px) and (height >= 800px); */

/* custom selectors  */

/* fontovi */

@font-face {
    @font-face {
        font-family: 'Dual 300';
        src: url('../fonts/Dual-300.eot');
        src: url('../fonts/Dual-300.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Dual-300.woff2') format('woff2'),
            url('../fonts/Dual-300.woff') format('woff'),
            url('../fonts/Dual-300.ttf')  format('truetype'); /* Safari, Android, iOS */
        font-weight: normal;
        font-style: normal;
    }
  }

.navbar .mainmenu {
  /* justify-self: end; */
  display: none
}

@media only screen and (min-width: 960px){

.navbar .mainmenu {
    display:block
}
  }

.navbar .mainmenu a {
    font-size:0.8em;
    position:relative;
    padding: 8px 20px 8px 15px;
    margin:0 1px;
    border-width: 1px 1px 5px 5px;
    border-style: solid;
    
        border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 5px solid #fff;
    border-left: 5px solid #fff;
    border-color: rgb(37,39,41);
    border-color: var(--mainColor);
    display:inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
  }

.navbar .mainmenu a:before {
        content:'';
        -webkit-box-sizing:content-box;
                box-sizing:content-box;
        position: absolute;
        width: 5px;
        margin:0;
        padding:0;
        
        height: 25%;
        right: 0;
        bottom: 0;
        background-color: rgb(37,39,41);
        background-color: var(--mainColor);
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        /* border-right: 5px solid #fff; */
    }

.navbar .mainmenu a:hover {

    border-color: #fff
  }

.navbar .mainmenu a:hover:before {
      background-color: #fff;
    }

.menu-but {
  position:fixed;
  top:0;
  right:0;
  z-index:999;
  display: block
}

@media only screen and (min-width: 960px){

.menu-but {
    display:none
}
  }

.mobile-container {
  position:fixed;
  top:0;
  left:0;
  width:0;
  overflow:hidden;
  z-index:990;
  background-color: rgb(37,39,41);
  background-color: var(--mainColor);
  color: #fff;
  -webkit-transition: width 0.2s linear;
  -o-transition: width 0.2s linear;
  transition: width 0.2s linear
}

.mobile-container .overlay {
    width:100%;
  min-height:100vh;
  display: grid;
  grid-template-columns: 100%;
grid-template-rows: auto;
justify-items: center;
-ms-flex-line-pack:center;
    align-content:center;
grid-gap:20px;

  }

.mobile-container a {
  display:block;
}

.mobile-container .mobile-logo {
  max-width:200px;
  width:100%;
}

.otvoren a {
  -webkit-animation: link;
          animation: link
}

nav a,nav a.link,nav a.visited,nav a.active {
    text-decoration:none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing:1px;
  padding:8px 15px
}

nav a:hover,nav a.link:hover,nav a.visited:hover,nav a.active:hover {
    color: #bbbbbb;
    color: var(--siva);
  }

.mobile-container.otvoren {
  width:100%;
}

/* .main-menu-wrapper {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    background:url(img/ml-bg-plava.svg) no-repeat 50% 70%;
    background-size: cover;
    width:100%;
    height:0;
    margin:0;
    padding:0;
    overflow-y: auto;
    overflow-y: overlay;
    transition: all 0.4s linear;
  }
  
  .main-menu-wrapper.otvoren {
    height:100vh;
      z-index:999;
    & .main-menu{
      display:block;
      opacity:1;
      & a {
        font-size:2em;
      }
    }
  }
  

  
  
  .menu-but {
    font-size: 1.1em;

    z-index: 9999;
    position: absolute;
    right:0;
    top:0;
    padding:11px 16px;
    background-color: var(--plava);
    color:#fff;
    margin:0;
    &:hover {
      background-color:$zelena;
    }
    @media (--mobile) {
        font-size: 1em;
      }
  }
  
  .menu-but {
    transform: rotate(-90deg); 
    transform-origin: right bottom;
    transition: 0.3s all linear;
    &.otvoren {
      transform: rotate(0);
      background-color: var(--crvena);
      position:fixed;
    }
  }
  .main-menu {
    max-width:600px;
    margin:0 auto;
    padding-top:40px;
    padding-bottom:40px;

    text-align:center;
    opacity:0;
    transition: opacity 0.4s linear;
    @media (--tablet){
        position: relative;
         // overflow-y: scroll;
         // overflow-y: overlay;
        top: 50%;
        transform: translateY(-50%);
      }
  }
  .main-menu a {
    color: #fff;
    font-size:0.5em;
    transition: all 0.4s linear;
    display:block;
    text-decoration:none;
    font-weight:100;
    padding:20px 0;
    &:hover {
      background-color: #fff;
      color: var(--plava);
      text-decoration:none;
    }
  }
  
  .main-menu a.mmlogo:hover {
    background-color: var(--plava);
  } */

html,
body {
    height: 100%;
    width:100%;
    border:0;
    margin:0;
    
}

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

body {
  font-family: 'Dual 300', sans-serif;
font-weight: 300;
font-size: 14px;
font-size: 100%;
line-height:1.6em;
    background-color:rgb(37,39,41);
    background-color:var(--mainColor);
    color: #fff;
    text-transform: uppercase;
    overflow-x: hidden;
    /* border-top: 15px solid #fff; */
}

#page-wrapper {
  /* max-width:1600px; */
  margin: 0 auto;
  position:relative;
  padding: 0 8px 10px 8px
  
}

@media (--tablet)){

#page-wrapper {
  padding: 0 20px 20px 20px
  
}
  }

#header {
  background-color: rgb(37,39,41);
  background-color: var(--mainColor);
  color: #fff;
  /* margin:15px 0 10px 0; */
  margin:5px 0 10px 0;
  /* min-height:60px; */
  text-align:center;
  
  /* & .navbar {
      display: grid;
  grid-template-columns: 250px auto;
  align-items: center;
} */
/* & .navbar-logo {
  padding:10px;
} */
}

img {
  max-width:100%;
  height:auto;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:100;
  line-height:1.2em;
}

h1 {
  font-size:2em;
}

h2 {
  font-size:1.6em;
}

h3 {
  font-size:1.3em;
}

a,a.link,a.visited,a.active {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing:1px
}

a:hover,a.link:hover,a.visited:hover,a.active:hover {
  color: #bbbbbb;
  color: var(--siva);
}

a.cta {
  padding: 15px 20px;
  display:inline-block;
  margin: 40px auto 20px;
  background-color: rgb(166,180,40);
  background-color: var(--zelena);
  border-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: inset -2px -2px 15px 0px rgba(0,0,0,0.75);
          box-shadow: inset -2px -2px 15px 0px rgba(0,0,0,0.75);
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out
}

a.cta:hover {
    background-color: #333;
    color: #fff;
    -webkit-box-shadow: inset -5px -5px 20px 0px rgba(0,0,0,0.75);
            box-shadow: inset -5px -5px 20px 0px rgba(0,0,0,0.75);
  }

strong, b {
    font-weight:500;
  }

ul {
    margin-left:2em
  }

@media (--tablet)){

ul {
      margin-left:1em
  }
    }

p, h1, h2, h3, h4, h5, h6 {
    padding-left:20px;
    padding-right:20px
  }

@media (--tablet)){

p, h1, h2, h3, h4, h5, h6 {
      padding-left:0;
      padding-right:0
  }
    }

#footer {
    max-width:960px;
    margin:40px auto;
    padding:10px;
    font-size:0.8em;
    color: #777
    /* text-align:center; */
  }

#footer strong {
      color: #aaa;
    }

#footer {
    text-align:center
  }

@media (--tablet)){

#footer {
      display: grid;
    grid-template-columns: 100px auto;
    justify-items: start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align:left
  }
    }

.footer-logo svg {
    width:100%;
    max-width:100px;
    height:auto;
  }

/* .navbar {
    display:flex;
    align-items:center;
    justify-content:center; 
  } */

/* Language selector */

.menu-jezik-main {
    display: none
  }

@media only screen and (min-width: 960px){

.menu-jezik-main {
      border-bottom:1px solid #555;
      text-align:right;
      display:block
  }
    }

.menu-jezik-main a{
    color: #aaa;
    font-size: 0.8em;
    display:inline-block;
    padding:4px 6px;
    margin:0;
    text-decoration: none;
    -webkit-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
  }

.menu-jezik-main a:hover{
    color: #fff;
  }

.menu-jezik-main .aktivan{
    color: #fff;
  }

/* 


    position:absolute;
    right:10px;
    padding: 0;
    height: 34px;
    overflow: hidden;
    transition: all .3s ease;
    margin: 6px 10px 10px 20px;
    vertical-align: top;
    z-index:999;
    background-color: #333;
  }

  .menu-jezik-main {
    & .aktivan {
      order:1;
    }
    & .neaktivan {
      order:2;
    }
  }
  
  .menu-jezik-main:hover {
    height: 102px;
  }
  
  .menu-jezik-main a{
    color: #fff;
    font-size: 0.8em;
    display:block;
    padding:4px 10px;
    margin:0;
    text-decoration: none;
  }

  .languagepicker a:first-child li {
    border: none;
    background: #FFF !important;
  }
*/

.menu-jezik-mobile {
    margin: 20px auto 5px;
    padding-top:20px;
    border-top: 1px solid #fff;
    width:100%;
    max-width:200px;
    text-align:left;
    font-size:0.8em;
  }

.menu-jezik-mobile a {
    padding:4px 0;
  }

/* SOCIAL MEDIA LINKS */

.link-instagram {
    margin-left:20px;
    font-size: 0.9em
   
  }

.link-instagram:before {
      margin-right:5px;
      margin-bottom:-5px;
      content:'';
      width:20px;
      height:20px;
      display:inline-block;
      background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M363.273 0H148.728C66.719 0 0 66.719 0 148.728v214.544C0 445.281 66.719 512 148.728 512h214.544C445.281 512 512 445.281 512 363.273V148.728C512 66.719 445.281 0 363.273 0zM472 363.272C472 423.225 423.225 472 363.273 472H148.728C88.775 472 40 423.225 40 363.273V148.728C40 88.775 88.775 40 148.728 40h214.544C423.225 40 472 88.775 472 148.728v214.544z' fill='%23FFF'/%3E%3Cpath d='M256 118c-76.094 0-138 61.906-138 138s61.906 138 138 138 138-61.906 138-138-61.906-138-138-138zm0 236c-54.037 0-98-43.963-98-98s43.963-98 98-98 98 43.963 98 98-43.963 98-98 98z' fill='%23FFF'/%3E%3Ccircle cx='396' cy='116' r='20' fill='%23FFF'/%3E%3C/svg%3E") no-repeat;
      background-size:cover;
    }

.link-facebook {
    margin-left:20px;
    font-size: 0.9em
   
  }

.link-facebook:before {
      margin-right:5px;
      margin-bottom:-5px;
      content:'';
      width:20px;
      height:20px;
      display:inline-block;
      background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M437 0H75C33.648 0 0 33.648 0 75v362c0 41.352 33.648 75 75 75h151V331h-60v-90h60v-61c0-49.629 40.371-90 90-90h91v90h-91v61h91l-15 90h-76v181h121c41.352 0 75-33.648 75-75V75c0-41.352-33.648-75-75-75zm0 0' fill='%23FFF'/%3E%3C/svg%3E") no-repeat;
      background-size:cover;
    }

/* Modular hero */

/* 
.modular-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: repeat(5, 1fr);
}

.hero-slika {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 6;
    & img {
        max-width:100%;
        height:auto;
    }

  }

  .image-overlay {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 6;
    background-color: rgba(37,39,41,0.7);

}
  
  .container{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
  }
 */

.sidro {
     width:0;
     height:0;
 }

.modular-hero-wrapper {
    width:100%;
    max-width:1600px;
    margin:0 auto;
}

.modular-hero {
    width:100%;
    margin:0 auto;
    background-size:auto 100%;
    background-repeat: no-repeat;
    min-height: 70vh;
    height:auto;
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    background-attachment: fixed;
    background-position: center center;
}

.box-desno {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.box-lijevo .container {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.modular-hero .container {
    z-index:2;
    min-width:300px;
    max-width:80%;
    padding:10px;
    color: #fff;
    display:block
}

.modular-hero .container h1, .modular-hero .container p, .modular-hero .container h2, .modular-hero .container h3 {
        margin:0;
    }

.box .container{
    background-color: #fff;
    color: rgb(37,39,41);
    color: var(--mainColor);
    padding: 20px;
}

.overlay-dark .image-overlay {
     position:absolute;
    width:100%;
    min-height:100%;
    background-color: rgba(37,39,41,0.7);
 }

.hero-start.overlay-dark .image-overlay{
    background-color: #24272a;
    /* background: #252729 url(../images/s.png) no-repeat 50% 50%; */
    /* background-size: auto 100%; */
}

/* modular text */

.modular-text {
    max-width:1600px;
    margin: 80px auto;
    display: grid;
    grid-template-columns: 1fr;
    /* align-content: center; */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.text-text {
    max-width:960px;
    padding:20px;
    justify-self: center;
    color: #fff;
}

@media only screen and (min-width: 960px) {
.image-align-left {
    grid-template-columns: repeat(4, 1fr)
}
    
    .image-align-left .text-image {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row:1
    }
        @media only screen and (min-width: 960px) {
    
    .image-align-left .text-image {
                grid-column-start: 1;
                grid-column-end: 3
    }
            }

    .image-align-left .text-text {
        background-color: #fff;
        color: rgb(37,39,41);
        color: var(--mainColor);
        grid-row:1;
        grid-column-start: 2;
        grid-column-end: 5;
        justify-self: end;
    }

.image-align-right {
    grid-template-columns: repeat(4, 1fr)
}
    
    .image-align-right .text-image {
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row:1
    }
        @media only screen and (min-width: 960px) {
    
    .image-align-right .text-image {
                grid-column-start: 3;
                grid-column-end: 5
    }
            }

    .image-align-right .text-text {
        background-color: #fff;
        color: rgb(37,39,41);
        color: var(--mainColor);
        grid-row:1;
        grid-column-start: 1;
        grid-column-end: 4;
        justify-self: start;
    }
}

.text-image img {
    max-width:100%;
    height:auto;
}

/* MODULAR FEATURES */

.modular-features {
    max-width: 1600px;
    margin: 100px auto
}

.modular-features header {
        max-width:960px;
        margin:0 auto;
        padding:20px;
        text-align:center;
    }

.feature-columns {
    
    display: grid;
    grid-gap: 20px;
    /* grid-auto-flow: column;  */
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
}

.lijevo {
    text-align:left;
}

.centrirano {
    text-align: center;
}

.desno {
    text-align:right;
}

.feature img {
        max-width:100%;
        height:auto;
    }

.feature h5 {
        margin:0 0 5px 0;
    }

.feature p {
        margin:0;
        font-size:0.8em;
    }

.feature .feature-content {
        padding:20px;
    }

/* MODULAR SLIKA */

.slika-full {
    width:100%;
    margin: 0 auto;
}

.slika-box {
    width:100%;
    max-width:1600px;
    margin: 0 auto;
}

.modular-slika {
    text-align:center;
}

.modular-slika img {
    max-width:100%;
    height:auto;
}

.povecana img {
    width:100%;
    height:auto;
}

/* @import "partials/_carousel.css";
@import "partials/_jquery.fullpage.css";
@import "partials/_reference.css";
@import "partials/_program.css";
@import "partials/_singlepage.css";
@import "partials/_formular.css"; */

/*# sourceMappingURL=seaandstyle.css.map */