@font-face {
  font-family: 'Whipsmart';
  src: url('Whipsmart.eot?#iefix') format('embedded-opentype'),  url('Whipsmart.woff') format('woff'), url('Whipsmart.ttf')  format('truetype'), url('Whipsmart.svg#Whipsmart') format('svg');
  font-weight: normal;
  font-style: normal;
}


header {
    background-color: #364042;
}

#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 14em;
}
#hexy1{
    margin-top: 0%;
}

/*body {background-image: linear-gradient(to bottom, #364042, #6c9689);}*/

.heksi {
    width: 100%;
    margin-top: 81%;
    margin-left: 27%;
}

.particles-js-canvas-el{
    width: 50%;
}
.avatar {
    display: inline-block;
    width: 50%;
    margin-left: -10%;
}

.text-box {
    display: inline-block;
    width: 48%;
    position: relative;
    background-image: url("images/bubblet2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left: 5%
}

.naslov{
    font-size: 2.5vw;
    text-align: center;
    font-weight: bold;
}

.podnaslov{
    width: auto;
    font-size: 1.9vw;
    position: relative;
    color: #000000;
    text-align: center;
}

#tb1 {
    padding: 8% 7% 25% 5%;
}

#tb2 {
    padding: 5% 7% 25% 5%;
}

#tb3 {
    padding: 6% 7% 25% 5%;
}

#tb4 {
    padding: 5% 7% 25% 5%;
}

#tb5 {
    padding: 6% 7% 19% 4%;
}

.title{
    font-size: 2.7vw;
    color: white;
}

h1 {
    width: auto;
    font-size: 1.2vw;
    position: relative;
    color: #000000;
}

h2 {
    width: auto;
    font-size: 0.5vw;
    position: relative;
    color: #364042;
}
.passField{
    margin-left: 6%;
    font-size: 1vw;
    width: 63%;
}

.btnCont{
    font-size: 1vw
}

.section {
    display: block;
    width: 70%;
    margin: 0 auto;
}

.button-container {
    display: block;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.button-box {
    display: inline-block;
    width: 45%;
}

.button-box img {
    width: 50%;
    margin: auto 25%;

}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

#treasure-box {
    display: block;
    margin: 0 auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Whipsmart";
    
}

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

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

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0;
    background-color: #364042;
}


footer {background-color: aqua}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    .section {
        display: block;
        width: 100%;
        margin: 40px auto;
    }
    .heksi {
        display: block;
        width: 87%;
        margin-left: 7%;
        margin-top: -7%;
    }
    .text-box {
        display: block;
        width: 70%;
        position: relative;
        background-image: url("images/bubblet2.png");
        background-repeat: no-repeat;
        background-size: 100%;
        padding-left: 5%;
        padding-top: 5%;
        padding-bottom: 14%;
       margin: 0 0 0 15%;

    }
    #tb1 {
        padding: 11% 9% 20% 9%;
    }

    #tb2 {
        padding: 7% 6% 19% 2%;
    }

    #tb3 {
        padding: 11% 9% 20% 9%;
    }

    #tb4 {
        padding:  13% 9% 14% 10%;
    }

    #tb5 {
        padding: 7% 10% 23% 9%;
    }
    .avatar {
        display: block;
        position: relative;
        width: 100%;
        margin: 24px auto;
    }
    .naslov{
    font-size: 4.5vw;
    text-align: center;
    font-weight: bold;
}

.podnaslov{
    width: auto;
    font-size: 4vw;
    position: relative;
    color: #000000;
    text-align: center;
}

.title{
    font-size: 6vw;
    color: white;
}

.passField{
    margin-left: 18%;
    font-size: 2vw;
    width: 63%;
}
.btnCont{
    font-size: 1.18vw
}
#hexy1{
    margin-top: 0%;
}
    h1 {
        width: auto;
        font-size: 16px;
        position: relative;
        color: #364042;
    }
    h2 {
        width: auto;
        font-size: 12px;
        position: relative;
        color: #364042;
    }
    body {
        width: 100%;
    }
}