@charset "UTF-8";
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    background-image: linear-gradient(#2a4036, #1b2822);
    color: #fff;
    font-family: ronnia, sans-serif;
    font-size: 1.125em;
    font-weight: 400;

}

p {
    margin-bottom: 2em;
}

h1,
h2,
h3,
h4,
form legend {
    margin-bottom: 0.5em;
    line-height: 1.1;
}

p {
    line-height: 1.4;
}

b,
strong {
    font-weight: 700;
}

.text-container h2,
.text-container h3,
.text-container h4 {
    margin-top: 0.75em;
}

.text-container ul,
.text-container ol,
.text-container p {
    margin-bottom: 1.25em;
}

.text-container ul,
.text-container ol {
    list-style-position: outside;
    padding-left: 24px;
}

.text-container ul {
    list-style-type: disc;
}

.text-container ol {
    list-style-type: decimal;
}

.text-container ul li,
.text-container ol li {
    line-height: 1.4;
}

.text-container em {
    font-style: italic;
}

.text-container u {
    text-decoration: underline;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

h2,
.text.xl {
    font-size: 2.5rem;
    font-weight: 700;
}

h3,
.text.xl {
    font-weight: 700;
}

@media (min-width: 992px) {
    p {
        margin-bottom: 2em;
    }

    h1,
    h2,
    h3,
    h4,
    form legend {
        margin-bottom: 0.5em;
        line-height: 1.1;
    }

    .text.xxxl {
        font-size: 6rem;
    }

    h1,
    .text.xxl {
        font-size: 4.5rem;
        font-weight: 700;
    }

    h3,
    .text.lg {
        margin-bottom: 1.25em;
        font-size: 1.5rem;
        font-weight: 700;
    }

    h4,
    .text.md {
        font-size: 1rem;
    }

    .text.sm,
    small {
        font-size: 0.875rem;
    }

    .text.xs {
        font-size: 0.8rem;
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

body a,
body a:visited,
body a:hover  {
    color: #d4af37;
}

header {
    position: relative;
    max-width: 100vw;
    min-height: 85vh;
    z-index: 0;
    overflow-x: hidden;

    background: url("../img/crte-mob.png") repeat-y, url("../img/bg.jpg") no-repeat;
    background-position: center center;
    background-size: 100%, cover;
}

header .linija img {
    width: 100%;
}

header .intro {
    padding: 8rem 0 4rem;
}

header .intro .logo {
    padding-right: 4rem;
}

header .intro-text {
    margin-top: 1rem;
    text-shadow: .1rem .1rem rgb(0, 0, 0, 0.3);
}

header .intro .tekst .main-title {
    padding: 0 1rem 5rem;
}

header .intro .tekst .vrijeme {
    background: url("../img/vrijeme.svg") no-repeat;
    background-position: center center;
    background-size: contain;
    width: 30vw;
    height: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -2rem;
}

header .intro .tekst .vrijeme h2 {
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 0;
    text-align: center;
}

header .intro .tekst .vrijeme span {
    font-weight: 300;
    text-transform: none;
    padding: 0;
}

header .intro h1,
header .intro h2,
header .intro h3,
header .intro b {
    color: #d4af37;
}

header .intro h1 {
    padding-top: 1.5rem;
}

header .intro h3 {
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    header .intro h3 {
        padding-bottom: 0;
    }
}

header .intro span {
    position: relative;
    text-transform: uppercase;
    color: #d4af37;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
}

header .intro span:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 0 10px;
    background-color: #fff;
    z-index: -1;
}

.counter {
    background-image:
    url("../img/donje-crte.svg"), linear-gradient(to left, #d4af37, #a0812e);
    background-position: center bottom;
    background-size: cover;
    min-height: 15vh;
    padding: 2.5rem 0 2rem;
}

.counter h2 {
    color: #fff;
    margin-bottom: 0;
}

.counter .naslov {
    margin-bottom: 1.5rem;
    text-align: center;
}

.counter #clock {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.counter #clock h2 {
    padding: 0.75rem 0.5rem;
    font-size: 1.75rem;
    text-align: center;
}

.counter #clock .clock--item h2 {
    border: 2px solid #a0812e;
    min-width: 55px;
    border-radius: 4px;
}

.counter #clock h3 {
    color: #fff;
    padding: 2rem 1rem;
}

.counter #clock p {
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.75rem;
    padding-top: 0.5rem;
    margin-bottom: 0;
    font-weight: 500;
}

@media (min-width: 992px) {
    .counter {
        background-image:
                  url("../img/donje-crte.svg"), linear-gradient(to left, #d4af37, #a0812e);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
        min-height: 15vh;
        padding: 2.5rem 0 1rem;
    }

    .counter h2 {
        color: #fff;
        margin-bottom: 0;
    }

    .counter .naslov {
        margin-bottom: 1.5rem;
    }

    .counter #clock {
        display: flex;
        flex-direction: row;
    }

    .counter #clock h2 {
        padding: 1rem 0.75rem;
        font-size: 2.5rem;
        text-align: center;
    }

    .counter #clock .clock--item h2 {
        border: 4px solid #a0812e;
        min-width: 92px;
        border-radius: 4px;
    }

    .counter #clock h3 {
        color: #fff;
        padding: 2rem 1rem;
    }

    .counter #clock p {
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        font-size: 0.75rem;
        padding-top: 0.5rem;
        margin-bottom: 0;
        font-weight: 500;
    }
}

canvas {
    display:block;
    vertical-align:bottom;
  }


  /* ---- stats.js ---- */

  .count-particles{
    background: #000022;
    position: absolute;
    top: 48px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
  }

  .js-count-particles{
    font-size: 1.1em;
  }

  #stats,
  .count-particles{
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
  }

  #stats{
    border-radius: 3px 3px 0 0;
    overflow: hidden;
  }

  .count-particles{
    border-radius: 0 0 3px 3px;
  }


  /* ---- particles.js container ---- */

  #particles-js {
      position: absolute;
        width: 100%;
        height: 100%;
  }


@media (min-width: 992px) {
    p {
        margin-bottom: 2em;
    }

    h1,
    h2,
    h3,
    h4,
    form legend {
        margin-bottom: 0.5em;
        line-height: 1.1;
    }

    /* text size */
    .text.xxxl {
        font-size: 6rem;
    }

    h1,
    .text.xxl {
        font-size: 4.5rem;
        font-weight: 700;
    }

    h2,
    .text.xl {
        font-size: 3rem;
        font-weight: 700;
    }

    h3,
    .text.lg {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.25em;
    }

    h4,
    .text.md {
        font-size: 1.25rem;
    }

    .text.sm,
    small {
        font-size: 1rem;
    }

    .text.xs {
        font-size: 1rem;
    }
}

button::-moz-focus-inner {
    border: none;
}

input[type=reset]::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=file]>input[type=button]::-moz-focus-inner {
    border: none;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    scroll-behavior: smooth;
    min-width: 100vw;
}

.btn-primary {
    display: inline-block;
    padding: 12px 16px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: "8px";
    -moz-border-radius: "8px";
    border-radius: "8px";
    border: solid 1px #d4af37 !important;
    font-size: 1rem;
    font-weight: 700;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    white-space: nowrap;
    background-color: #d4af37 !important;
    color: #fff !important;
    z-index: 9999;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: #a0812e !important;
    border-color: #d4af37 !important;
    color: #fff;
    text-decoration: none;
}

.btn-primary::after {
    content: "→";
    padding-left: 0.5rem;
    font-weight: 700;
}

.btn-border {
    display: inline-block;
    padding: 12px 16px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: "8px";
    -moz-border-radius: "8px";
    border-radius: "8px";
    border: solid 1px #ccc;
    font-size: 1rem;
    font-weight: 700;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
    white-space: nowrap;
    border: solid 2px #d4af37;
    background-color: transparent;
    color: #d4af37;
    z-index: 9999;
}

.btn-border:hover {
    text-decoration: none;
}

.btn-border:active {
    position: relative;
    top: 1px;
}

.btn-border::after {
    content: "→";
    padding-left: 0.5rem;
    font-weight: 700;
}

.btn-border:hover,
.btn-border:active  {
    background-color: transparent;
    color: #a0812e;
    border: solid 2px #a0812e;
}

#mainNav {
    min-height: 4.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
}

#mainNav .navi {
    display: flex;
    justify-content: space-between;
}

#mainNav .navbar-collapse {
    align-items: center;
    justify-content: center;
}

#mainNav .show .navbar-nav {
    padding-top: 2rem;
}

#mainNav .navbar-toggler {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.75rem;
    color: #d4af37;
    border: none;
}

#mainNav .navbar-toggler:focus {
    outline: none;
}

#mainNav .container {
    padding-left: 0;
    padding-right: 0;
}

#mainNav .navbar-nav .nav-item:hover {
    color: fade(#fff, 80%);
    outline: none;
    background-color: transparent;
}

#mainNav .navbar-nav .nav-item:active,
#mainNav .navbar-nav .nav-item:focus {
    outline: none;
    background-color: transparent;
}

#mainNav .menu-icon>.line {
    background-color: #292929;
    height: 2px;
    display: block;
}

#mainNav .menu-icon>.line+.line {
    margin-top: 8px;
}

.navbar-brand {
    color: #909090;
    font-weight: 700;
    padding: 0;
}

.navbar-brand img {
    width: 3rem;
    margin-top: 0;
}

.navbar-shrink .navbar-brand img {
    max-width: 4rem;
    margin-top: 0;
    top: 0;
}

@media (min-width: 992px) {
    .btn-primary,
    .btn-primary:visited {
        display: inline-block;
        padding: 16px 32px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        -webkit-border-radius: "8px";
        -moz-border-radius: "8px";
        border-radius: "8px";
        border: solid 1px #d4af37 !important;
        font-size: 1.125rem;
        font-weight: 700;
        -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        white-space: nowrap;
        min-width: unset;
        background-color: #d4af37 !important;
        color: #fff;
        z-index: 9999;
    }

    .btn-primary:hover,
    .btn-primary:active {
        background-color: #a0812e !important;
        border-color: #d4af37 !important;
        color: #fff;
        text-decoration: none;
    }

    .btn-border {
        display: inline-block;
        padding: 16px 32px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        -webkit-border-radius: "8px";
        -moz-border-radius: "8px";
        border-radius: "8px";
        border: solid 1px #ccc;
        font-size: 1.125rem;
        font-weight: 700;
        -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
        white-space: nowrap;
        min-width: unset;
        border: solid 2px #d4af37;
        background-color: transparent;
        color: #d4af37;
        z-index: 9999;
    }

    .btn-border:hover {
        background-color: transparent;
        color: #a0812e;
        border: solid 2px #a0812e;
    }

    #mainNav {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none;
        transition: background-color 0.3s ease-in-out;
    }

    #mainNav .navbar-brand {
        padding: 0.75rem 0;
        color: rgba(255, 255, 255, 0.5);
    }

    #mainNav .navbar-brand img {
        width: 7rem;
        margin-top: 0.5rem;
    }

    #mainNav .navbar-shrink .navbar-brand img {
        width: 4rem;
        margin-top: 0 !important;
    }

    #mainNav .nav-link {
        padding: 1rem 0.75rem;
        color: #d4af37;
        transition: none;
    }

    #mainNav .nav-link:hover {
        color: #fff;
    }

    #mainNav.navbar-shrink {
        background-color: #fff;
        padding: 0.5rem 0;
    }

    #mainNav.navbar-shrink .navbar-brand {
        color: #909090;
    }

    #mainNav.navbar-shrink .nav-link {
        color: #909090;
        padding: 1.5rem 1.5rem 1.25rem;
        border-bottom: 0.25rem solid transparent;
    }

    #mainNav.navbar-shrink .nav-link:hover {
        color: #d4af37;
    }

    #mainNav.navbar-shrink .nav-link:active {
        color: #d4af37;
    }

    #mainNav.navbar-shrink .nav-link.active {
        color: #d4af37;
        outline: none;
    }
}

.podnaslov {
    padding-bottom: 1.5rem;
}

.podnaslov span {
    color: #d4af37;
    position: relative;
    text-align: center;
}

/* .podnaslov span:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: #fff;
    z-index: -1;
    border-radius: 16px;
} */

@media (min-width: 992px) {
    .podnaslov {
        padding-bottom: 2rem;
    }

    .podnaslov span {
        color: #d4af37;
        position: relative;
        text-align: center;
    }

    /* .podnaslov span:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background-color: #fff;
        z-index: -1;
        border-radius: 16px;
    } */
}

#about {
    padding: 6rem 0 4rem;
}

#about .naglaseno {
    font-style: italic;
    color: #fff;
}

#about b {
    font-weight: 700;
    color: #d4af37;
}

#about a {
    text-decoration: underline;
    font-weight: 700;
}

#about a:hover {
    color: #747474;
}

#panelisti {
    background: url("../img/linija-panelisti-mob.svg") no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 0 0 10rem;
    max-width: 100vw;
    overflow-x: hidden;
}

#panelisti h3 {
    color: #d4af37;
    margin-bottom: 0;
}

#panelisti .panelist {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}

#panelisti .panelist .prvi {
    background: url("../img/panelist04.png") no-repeat;
    margin-top: 0%;
}

#panelisti .panelist .drugi {
    background: url("../img/panelist01.png") no-repeat;
    margin-top: 5%;
}

#panelisti .panelist .fotka {
    width: 200px;
    height: 250px;
    background-position: bottom center;
    background-size: contain;
    align-self: center;
}

#panelisti .panelist .ime {
    background-color: #d4af37;
    border-radius: 8px;
    color: #fff;
    padding: 1rem;
    z-index: 99;
    margin-top: -2rem;
    margin-left: 8rem;
}

@media (max-width: 500px) {
    #panelisti .panelist .ime {
        margin-left: 0;
    }
}

#panelisti .panelist .ime p {
    font-weight: 600;
    margin-bottom: 0;
    font-size: 1rem;
}

#panelisti .panelist .titula {
    background-color: #fff;
    font-size: 0.75rem;
    padding: 3rem 1rem 1rem;
    border-radius: 8px;
    margin-top: -2rem;
    margin-left: 8rem;
    font-weight: 700;
    color: #747474;
}

@media (max-width: 500px) {
    #panelisti .panelist .titula {
        margin-left: 0;
    }
}

@media (min-width: 992px) {
    #about {
        padding: 9rem 0 4rem;
    }

    #about .naglaseno {
        font-style: italic;
        color: #fff;
    }

    #about b {
        font-weight: 700;
    }

    #panelisti {
        background: url("../img/molekule02.svg") no-repeat;
        background-position: top center;
        background-size: 100%;
        padding: 0 0 12rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    #panelisti h3 {
        color: #d4af37;
        margin-bottom: 0;
    }

    #panelisti .panelist {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
    }

    #panelisti .panelist .prvi {
        background: url("../img/panelist04.png") no-repeat;
        margin-top: 15%;
    }

    #panelisti .panelist .drugi {
        background: url("../img/panelist01.png") no-repeat;
        margin-top: 15%;
    }

    #panelisti .panelist .fotka {
        width: 250px;
        height: 300px;
        background-position: bottom center;
        background-size: contain;
        align-self: center;
    }

    #panelisti .panelist .ime {
        background-color: #d4af37;
        border-radius: 8px;
        color: #fff;
        padding: 1rem;
        z-index: 99;
        margin-top: -2rem;
        margin-left: 6rem;
    }

    #panelisti .panelist .ime p {
        font-weight: 600;
        margin-bottom: 0;
    }

    #panelisti .panelist .titula {
        background-color: #fff;
        font-size: 0.75rem;
        padding: 3rem 1rem 1rem;
        border-radius: 8px;
        margin-top: -2rem;
        margin-left: 6rem;
        font-weight: 700;
        color: #747474;
    }
}

#webinar {
    position: relative;
    padding: 0 0 4rem;
}

#webinar b {
    color: #d4af37;
}

#webinar .btn-link {
    display: inline-block;
    padding: 0;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    color: #d4af37;
    z-index: 999999;
}

#webinar .btn-link:hover {
    text-decoration: none;
}

#webinar .btn-link:active {
    position: relative;
    top: 1px;
}

#webinar .btn-link::after {
    content: "→";
    padding-left: 0.5rem;
    font-weight: 700;
}

#webinar .modal {
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
}

#webinar .modal .modal-body {
    padding: 1rem 2rem 6rem 3rem;
}

#webinar .modal .modal-body h3 {
    color: #d4af37;
}

#webinar .modal .modal-body ul {
    position: relative;
    list-style: none;
    list-style-position: outside;
    padding-inline-start: 0;
}

#webinar .modal .modal-body li {
    color: #909090;
    font-weight: 600;
    padding: 0.5rem 0;
}

#webinar .modal .modal-body li::before {
    content: "→";
    position: absolute;
    left: -30px;
    color: #d4af37;
    font-weight: 700;
}

#webinar .modal .modal-body p {
    margin-bottom: 1rem;
}

#webinar .modal .modal-body p.dod {
    color: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 2rem;
    margin-bottom: 1rem;
}

#webinar .modal .modal-body p {
    color: #909090;
}

#webinar .modal .modal-header {
    padding: 3rem 4rem 0;
    border: none;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

#webinar .modal .modal-header .close {
    color: #d4af37;
    opacity: 1;
    font-size: 2rem;
}

#webinar .modal .modal-dialog {
    max-width: 800px;
}

#webinar .modal .modal-content {
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    border: none;
}

#webinar .predavanje {
    padding-top: 6rem;
    position: relative;
}

#webinar .predavanje p {
    margin-bottom: 0.5rem;
}

#webinar .predavanje h3 {
    color: #d4af37;
    margin-bottom: 1.5rem;
}

#webinar .predavanje .predavac {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}

#webinar .predavanje .predavac .fotka {
    width: 250px;
    height: 400px;
    background: url("../img/herceg.png") no-repeat;
    background-position: center center;
    background-size: contain;
    align-self: center;
}

#webinar .predavanje .predavac .fotka--rusan {
    width: 250px;
    height: 400px;
    background: url("../img/rusan.png") no-repeat;
    background-position: center center;
    background-size: contain;
    align-self: center;
}

#webinar .predavanje .predavac .ime {
    background-color: #d4af37;
    border-radius: 8px;
    color: #fff;
    padding: 1rem;
    z-index: 99;
    margin-top: -20%;
}

#webinar .predavanje .predavac .ime p {
    font-weight: 600;
    margin-bottom: 0;
    font-size: 0.9rem;
}

#webinar .predavanje .predavac .titula {
    background-color: #fff;
    font-size: 0.75rem;
    padding: 3rem 1rem 1rem;
    border-radius: 8px;
    margin-top: -2rem;
    font-weight: 700;
    color: #747474;
}

#webinar .predavanje .tema {
    margin-top: 5%;
}

@media (min-width: 992px) {
    #webinar {
        position: relative;
        padding: 0 0 9rem;
        width: unset;
    }

    #webinar .btn-link {
        display: inline-block;
        padding: 0;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        border: none;
        font-size: 1.125rem;
        font-weight: 700;
        color: #d4af37;
        z-index: 999999;
    }

    #webinar .btn-link:hover {
        text-decoration: none;
    }

    #webinar .btn-link:active {
        position: relative;
        top: 1px;
    }

    #webinar .btn-link::after {
        content: "→";
        padding-left: 0.5rem;
        font-weight: 700;
    }

    #webinar .modal {
        border-radius: 32px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        -ms-border-radius: 32px;
        -o-border-radius: 32px;
    }

    #webinar .modal .modal-body {
        padding: 1rem 8rem 6rem;
    }

    #webinar .modal .modal-body h3 {
        color: #d4af37;
    }

    #webinar .modal .modal-body ul {
        position: relative;
        list-style: none;
        list-style-position: outside;
        padding-inline-start: 0;
    }

    #webinar .modal .modal-body li {
        color: #909090;
        font-weight: 600;
        padding: 0.5rem 0;
    }

    #webinar .modal .modal-body li::before {
        content: "→";
        position: absolute;
        left: -40px;
        color: #d4af37;
        font-weight: 700;
    }

    #webinar .modal .modal-body p {
        margin-bottom: 1rem;
    }

    #webinar .modal .modal-body p.dod {
        color: #d4af37;
        font-weight: 700;
        text-transform: uppercase;
        padding-top: 2rem;
        margin-bottom: 1rem;
    }

    #webinar .modal .modal-body p {
        color: #909090;
    }

    #webinar .modal .modal-header {
        padding: 3rem 4rem 0;
        border: none;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    #webinar .modal .modal-header .close {
        color: #d4af37;
        opacity: 1;
        font-size: 2rem;
    }

    #webinar .modal .modal-dialog {
        max-width: 800px;
    }

    #webinar .modal .modal-content {
        border-radius: 32px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        -ms-border-radius: 32px;
        -o-border-radius: 32px;
        border: none;
    }

    #webinar .predavanje {
        padding-top: 6rem;
        position: relative;
    }

    #webinar .predavanje p {
        margin-bottom: 1rem;
    }

    #webinar .predavanje h3 {
        color: #d4af37;
        margin-bottom: 1.5rem;
    }

    #webinar .predavanje .predavac {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
    }

    #webinar .predavanje .predavac .fotka {
        width: 250px;
        height: 400px;
        background-position: bottom center;
        background-size: contain;
        align-self: flex-end;
        background: url("../img/herceg.png") no-repeat;
    }

    #webinar .predavanje .predavac .ime {
        background-color: #d4af37;
        border-radius: 8px;
        color: #fff;
        padding: 1rem;
        z-index: 99;
        margin-top: -50%;
    }

    #webinar .predavanje .predavac .ime p {
        font-weight: 600;
        margin-bottom: 0;
    }

    #webinar .predavanje .predavac .titula {
        background-color: #fff;
        font-size: 0.75rem;
        padding: 3rem 1rem 1rem;
        border-radius: 8px;
        margin-top: -2rem;
        font-weight: 700;
        color: #747474;
    }

    #webinar .predavanje .tema {
        margin-top: 0;
    }
}

#program {
    background: url("../img/molekule01.svg") no-repeat;
    background-position: top center;
    background-size: 100%;
    padding: 2rem 0;
    position: relative;
    max-width: 100vw;
    overflow-x: hidden;
}

#program .program-item {
    border-bottom: 1px solid #d4af37;
    padding: 3rem 1rem;
    display: flex;
    align-items: baseline;
    position: relative;
}

#program .program-item:last-of-type {
    border: none;
}

#program .program-item .dodatak {
    position: absolute;
    right: 0%;
    top: 0.5rem;
    max-width: 100px;
}

#program .program-item .time {
    padding-bottom: 1rem;
}

#program .program-item .time h4 {
    font-size: 1.125em;
    color: #d4af37;
    font-weight: 600;
}

#program .program-item span {
    background-color: #d4af37;
    border-radius: 16px;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
    font-weight: 600;
}

#program .program-item h4 {
    color: #fff;
    font-weight: 600;
}

#program .program-item p i {
    color: #909090;
}

#program .program-item .detalji {
    display: flex;
    align-items: baseline;
}

#program .program-item .detalji p {
    color: #fff;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

#program .program-item .detalji p.sm {
    color: #d4af37;
    text-transform: uppercase;
    font-weight: 700;
}

#program .program-item .detalji p.xs {
    color: #747474;
    font-weight: 600;
    padding-bottom: 1.5rem;
}

@media (min-width: 992px) {
    #program {
        padding: 0 0 3rem;
        position: relative;
        max-width: 100vw;
        overflow-x: hidden;
    }

    #program .program-item {
        border-bottom: 1px solid #747474;
        padding: 3rem 0 1rem;
        display: flex;
        align-items: baseline;
        position: relative;
    }

    #program .program-item:last-of-type {
        border: none;
    }

    #program .program-item .dodatak {
        position: absolute;
        right: -10%;
        top: 1.5rem;
        max-width: 130px;
    }

    #program .program-item .time {
        padding-bottom: 0;
    }

    #program .program-item .time h4 {
        font-size: 1.125em;
        color: #d4af37;
        font-weight: 600;
    }

    #program .program-item span {
        background-color: #d4af37;
        border-radius: 16px;
        color: #fff;
        text-transform: uppercase;
        font-size: 0.75rem;
        padding: 0.25rem 1rem;
        font-weight: 600;
    }

    #program .program-item h4 {
        color: #fff;
        font-weight: 600;
    }

    #program .program-item p i {
        color: #909090;
    }

    #program .program-item .detalji {
        display: flex;
        align-items: baseline;
    }

    #program .program-item .detalji p {
        color: #fff;
        margin-bottom: 0.25rem;
        font-weight: 600;
    }

    #program .program-item .detalji p.sm {
        color: #d4af37;
        text-transform: uppercase;
        font-weight: 700;
    }

    #program .program-item .detalji p.xs {
        color: #747474;
        font-weight: 600;
        padding-bottom: 1.5rem;
    }
}

#kako {
    background: url("../img/linija-kako-mob.svg") no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 4rem 0 8rem;
    position: relative;
    max-width: 100vw;
    overflow-x: hidden;
}

#kako h2 {
    text-align: center;
}

#kako .linija {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100vw;
    height: 100%;
}

#kako .kucica {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    width: unset;
    max-height: unset;
    height: unset;
    margin-top: 3rem;
}

#kako .kucica .naslov-kucica {
    border-bottom: 1px solid #fff;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

#kako .kucica .naslov-kucica h5 {
    color: #d4af37;
    text-transform: uppercase;
    font-weight: 700;
}

#kako .kucica .naslov-kucica h5 span {
    font-size: 3rem;
    padding-right: 1rem;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
}

#kako .kucica p {
    padding-top: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

#kako .kucica a {
    font-weight: 600;
    color: #d4af37;
}

#kako .kucica.crvena {
    padding: 2rem 2rem 4rem;
    background-color: #d4af37;
    color: #fff;
}

#kako .kucica.crvena .naslov-kucica h5 {
    color: #fff;
}

@media (min-width: 992px) {
    #kako {
        padding: 6rem 0;
        position: relative;
        max-width: 100vw;
        overflow-x: hidden;
    }

    #kako h2 {
        text-align: left;
    }

    #kako .linija {
        position: absolute;
        top: 0;
        min-width: 1600px;
    }

    #kako .kucica {
        padding: 0 2rem 1.5rem;
        width: 260px;
        height: 100%;
        max-height: 450px;
        margin-top: 5rem;
    }

    #kako .kucica .naslov-kucica {
        border-bottom: 1px solid #d4af37;
        padding-bottom: 1rem;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    #kako .kucica .naslov-kucica h5 {
        color: #d4af37;
        text-transform: uppercase;
        font-weight: 700;
    }

    #kako .kucica .naslov-kucica h5 span {
        font-size: 3rem;
        padding-right: 1rem;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1;
    }

    #kako .kucica p {
        padding-top: 1.5rem;
    }

    #kako .kucica a {
        font-weight: 600;
    }

    #kako .kucica.crvena {
        width: 500px;
        height: 100%;
        max-height: 400px;
        padding-top: 2rem;
        margin-top: 5rem;
        background-color: #d4af37;
        color: #fff;
    }

    #kako .kucica.crvena .naslov-kucica h5 {
        color: #fff;
    }
}

#testiranje {
    margin-top: 6rem;
}

@media (min-width: 992px) {
    #testiranje {
        margin-top: 8rem;
    }
}

#ostalo {
    padding: 4rem 0 6rem;
    position: relative;
}

#ostalo .mail h3 {
    color: #d4af37;
    margin-bottom: 1.5rem;
}

#ostalo .mail p {
    padding: 0 1rem;
}

#ostalo .mail #mc_embed_signup {
    background-color: transparent;
}

#ostalo .mail #mc_embed_signup .clear {
    position: absolute;
    right: 0;
    top: 100%;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
}

#ostalo .mail #mc_embed_signup .button {
    border-radius: 32px;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    -ms-border-radius: 32px;
    -o-border-radius: 32px;
    background-color: #d4af37;
    padding: 12px 32px;
    max-width: 90%;
    height: unset;
    font-size: 1rem;
    font-family: ronnia, sans-serif;
}

#ostalo .mail #mc_embed_signup .button::after {
    content: "→";
    padding-left: 0.5rem;
    font-weight: 700;
}

#ostalo .mail #mc_embed_signup input.email {
    border: 1px solid #d4af37;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 1.25rem 2rem;
    position: relative;
    width: 100%;
    height: unset;
    font-family: ronnia, sans-serif;
    color: #909090;
}

#ostalo .mail #mc_embed_signup input:-internal-autofill-selected {
    background-color: #d4af37;
}

#ostalo .mail #mc_embed_signup input::placeholder {
    color: #747474;
}

#ostalo .mail input:-internal-autofill-selected {
    background-color: #d4af37 !important;
}

#ostalo .kontakt {
    padding-top: 8rem;
}

#ostalo .kontakt h3 {
    color: #d4af37;
    font-weight: 600;
    padding-top: 1rem;
}

@media (min-width: 992px) {
    #ostalo {
        padding: 4rem 0 3rem;
        position: relative;
    }

    #ostalo .mail h3 {
        color: #d4af37;
        margin-bottom: 1.5rem;
    }

    #ostalo .mail p {
        padding: 0 4rem;
    }

    #ostalo .mail #mc_embed_signup {
        background-color: transparent;
    }

    #ostalo .mail #mc_embed_signup .clear {
        position: absolute;
        right: -63px;
        top: 81%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }

    #ostalo .mail #mc_embed_signup .button {
        border-radius: 32px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        -ms-border-radius: 32px;
        -o-border-radius: 32px;
        background-color: #d4af37;
        padding: 16px 48px;
        height: unset;
        font-size: 1rem;
        font-family: ronnia, sans-serif;
    }

    #ostalo .mail #mc_embed_signup .button::after {
        content: "→";
        padding-left: 0.5rem;
        font-weight: 700;
    }

    #ostalo .mail #mc_embed_signup input.email {
        border: 1px solid #d4af37;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        padding: 2.25rem 2rem;
        position: relative;
        width: 100%;
        height: unset;
        font-family: ronnia, sans-serif;
        color: #909090;
    }

    #ostalo .mail #mc_embed_signup input:-internal-autofill-selected {
        background-color: #d4af37;
    }

    #ostalo .kontakt {
        padding-top: 6rem;
    }

    #ostalo .kontakt h3 {
        color: #d4af37;
        font-weight: 600;
        padding-top: 1rem;
    }
}

footer {
    max-width: 100vw;
    overflow-x: hidden;
}

footer .footy {
    border-top: 1px solid #747474;
    padding: 4rem 0;
}

footer .footy .logx {
    padding-bottom: 4rem;
}

footer .footy .logx img {
    max-width: 75px;
}

footer .footy .linkovi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 4rem;
}

footer .footy .linkovi p {
    color: #747474;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem 0;
    margin-bottom: 0;
}

footer .footy .linkovi p:hover {
    text-decoration: none;
    color: #d4af37;
}

footer .footy .linkovi a:hover {
    text-decoration: none;
    color: #d4af37;
}

@media (min-width: 992px) {
    footer .footy {
        border-top: 1px solid #747474;
        padding: 2rem 0;
    }

    footer .footy .logx {
        padding-bottom: 0;
    }

    footer .footy .logx img {
        max-width: 75px;
    }

    footer .footy .linkovi {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-bottom: 0;
    }

    footer .footy .linkovi p {
        color: #747474;
        text-transform: uppercase;
        font-weight: 600;
        padding: 0 1rem;
        margin-bottom: 0;
    }

    footer .footy .linkovi p:hover {
        text-decoration: none;
        color: #d4af37;
    }

    footer .footy .linkovi a:hover {
        text-decoration: none;
        color: #d4af37;
    }
}

#webinar .krug {
    position: absolute;
    right: 0;
    top: -13rem;
    width: 50%;
}

@media (min-width: 450px) {
    #webinar .krug {
        width: 30%;
    }
}

@media (min-width: 992px) {
    #webinar .krug {
        right: -20%;
        top: -10rem;
        width: 100%;
    }
}

.is-gray-color {
    font-size: 1.12rem;
    color: rgb(202, 202, 202);
}

@media (min-width: 992px) {
    .is-gray-color {
        font-size: 1.5rem;
    }
}

.intro-text .video-buttons img {
    height: 100%;
    width: 5rem;
    margin-left: 1.5rem;
  }