/* -------------- SPECIFICNI -------------- */
/* Klase uvek pocunju sa . */
/* ID uvek pocinje sa # */
/* HTML element nema ni . ni # ispred sebe */
/* Pseudo elementi i pseudo klase pocinju sa : i spojeni su sa imenom klase ili elementa */
main {
    position: relative;
    width: 100%;
}

.top-image-wrapper {
    position: relative;
}

.top-intro {
    position: relative;
    width: 101%;
    margin-left: -6px;
}

.top-intro img {
    width: 100%;
    margin-bottom: -18%;
}

.top-image {
    position: relative;
}

.top-image img {
    width: 100%;
}

.top-text {
    position: relative;
}

.top-text h1 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    text-align: center;
}

.text1 h2 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    margin-bottom: 0;
    position: relative;
}

.text1 h2:after {
    content: '';
    width: 110px;
    height: 5px;
    background: #0099D4;
    position: absolute;
    left: 144px;
    bottom: 0;
}

.text2 h2 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    margin-bottom: 0;
    position: relative;
}

.text2 h2:after {
    content: '';
    width: 110px;
    height: 5px;
    background: #0099D4;
    position: absolute;
    left: 130px;
    bottom: 0;
}

.text3 h2 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    margin-bottom: 0;
    position: relative;
}

.text3 h2:after {
    content: '';
    width: 130px;
    height: 5px;
    background: #0099D4;
    position: absolute;
    left: 128px;
    bottom: 0;
}

.text4 h2 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    margin-bottom: 0;
    position: relative;
}

.text4 h2:after {
    content: '';
    width: 18%;
    height: 5px;
    background: #0099D4;
    position: absolute;
    left: 71%;
    bottom: 0;
}
.text5 h2 {
    font-size: 40px;
    font-family: 'DM Serif Text', sans-serif;
    color: #0C6587;
    margin-bottom: 0;
    position: relative;
}

.text5 h2:after {
    content: '';
    width: 127px;
    height: 5px;
    background: #0099D4;
    position: absolute;
    left: 142px;
    bottom: 0;
}
.text6 {
    position: absolute;
    z-index: 9;
    padding: 5% 0 0 18%;
}
.text6 h2 {
    font-size: 55px;
    font-family: 'DM Serif Text', sans-serif;
    color: #090e0e;
    margin-bottom: 0;
    position: relative;
}

.text6 h2:before {
    content: '</';
    color: #0099D4;
}
.text6 h2:after {
    content: '>';
    color: #0099D4;
}

.hexagon, .hexagon1, .hexagon2 {
    width: 100%;
    height: 300px;
    cursor: pointer;
    overflow: hidden;
}

.hexagon img, .hexagon1 img, .hexagon2 img {
    max-width: 300px;
}

.hexagon p, .hexagon1 p, .hexagon2 p {
    color: #0d0d0d;
    background: linear-gradient(to right, #073ca4, #2973c4, #61bde5);
    padding: 20px;
    font-size: 22px;
    font-family: 'DM Serif Text', sans-serif;
    margin: 0;
}

.desc {
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0;
    padding-top: 50px;

}

.desc.one {
}

.bisc {
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0;

}
.bisc.no {

}
.desc, .bisc {
    transform: translateX(17%);
}
.hexaimg {
    transform: translateX(12%);
}

.first {
    transform: translate(8.4%, 0);
}

.second {
    transform: translate(0, -37%);
}

.third {
    transform: translate(8.4%, -73%);
}

.top-products {
    position: relative;
    margin-top: 300px;
    transition: all 1.9s;
    opacity: 0;
}
.top-products.done {
    margin-top: 0;
    animation: ease-in;
    opacity: 1;
    margin-bottom: -150px;
}
.middle-content {
    position: relative;
    margin-top: 300px;
    transition: all 1.9s;
    opacity: 0;
}
.middle-content.done {
    margin-top: 0;
    animation: ease-in;
    margin-bottom: 0;
    opacity: 1;
}
.bottom-products    {
    margin-bottom: 150px;
}

.how-content {
    margin-bottom: -10%;
}

.next img {
    margin: 75% 0 0 100%;
}

.about-text {
    padding: 40px 20px;
}
.about-text p {
    font-size: 20px;
}

.contact-wrapper form {
    display: inline-table;
}

.contact-form label {
    margin-bottom: 5px;
    display: block;
    font-weight: 400;
    color: #333333;
    font-size: 22px;
}

.contact-form label p {
    color: #162dc4;
    display: inline-block;
    margin-bottom: 0;
}

.contact-form label h6 {
    color: white;
    display: inline-block;
    margin: 11px 0 6px 0;
}

.contact-form input {
    display: block;
    width: 100%;
    border: 1px solid #E0E0E0;
    height: 40px;
    background: white;
}

.contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #E0E0E0;
    height: 120px; /* za prostor texta u message formu */
}

.form-element {
    margin-bottom: 20px;
}

.form-button .button {
    width: 200px;
    border: none;
}
.contact-wrapper {
    padding: 50px 20px;
}
.contact-wrapper h3 {
    font-size: 36px;
    font-weight: 700;
}
/* RADIO BUTTON */
.radio-button {
    display: flex;
}
.radio-button .ring {
    width: 10%;
}
/* ENDRADIO BUTTON */

.button, .buttons {
    flex: 1 1 auto;
    margin: 10px;
    padding: 5px 30px;
    text-align: center;
    text-decoration: none;
    font-family: 'DM Serif Text', sans-serif;
    font-weight: 400;
    transition: 0.5s;
    background: linear-gradient(90deg, var(--c1, #073ca4), var(--c2, #2973c4) 51%, var(--c1, #61bde5)) var(--x, 0)/ 200%;
    color: #EFEFEE;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    font-size: 24px;
}
.button:hover, .buttons:hover {
    --x: 100%;
    text-decoration: none;
    color: #EFEFEE;
}
.button, .buttons {
    --c1: #022675;
    --c2: #0f4f92;
}
.buttons {
    margin-top: 15px;
}
.logo {
    position: relative;
}
.seconds {
    display: none;
}
.content {
    transform: translateY(10%);
}
.content-text p{
    font-size: 22px;
    font-family: 'DM Serif Text', sans-serif;
    font-weight: 500;
    margin: -80px 0 100px;
}
.bottom-image img{
    width: 100%;
    height: 400px;
}

@media all and (max-width: 1320px) {

}

@media all and (max-width: 1200px) {

}

@media all and (max-width: 1024px) {


}

@media all and (max-width: 992px) {


}

@media all and (max-width: 768px) {
    .bottom-products {
         margin-bottom: 0;
    }

    .content-text p {
        font-size: 20px;
        font-family: 'DM Serif Text', sans-serif;
        font-weight: 500;
        margin: -48px 74px 100px;
    }
    .text6 h2 {
        font-size: 40px;
    }
    .next {
        display: none;
    }
    .first, .second, .third, .middle-st {
        transform: translate(29%, 0);
    }
    .desc, .bisc {
        transform: translateX(0);
    }
}


@media all and (max-width: 680px) {

    .top-products {
        margin-bottom: 0;
    }
    .logo {
        display: none;
    }
    .seconds {
        transform: translate(29%, 0);
    }

    .second {
        display: none;
    }
    .seconds {
        display: block;
    }
}

@media all and (max-width: 640px) {
    .top-products.done {
        margin-bottom: 0;
    }
    .block {
        margin-bottom: 50px;
    }
    .content-text p {
        font-size: 18px;
        font-family: 'DM Serif Text', sans-serif;
        font-weight: 500;
        margin: -40px 0 50px;
    }
    .bottom-image img {
        width: 100%;
        height: 115px;
    }
    .text6 {
        padding: 0 0 0 5%;
    }
    .text6 h2 {
        font-size: 30px;
    }
    .top-text h1 {
        font-size: 18px;
    }
    .first, .seconds, .third, .middle-st {
        transform: translate(24%, 0);
    }
}
@media all and (max-width: 500px){
    .top-intro {
        position: relative;
        width: 325%;
        margin-left: -111%;
    }
    .footer-text {
        padding: 40% 0 5%;
    }
}
@media all and (max-width: 424px) {
    .first, .seconds, .third, .middle-st {
        transform: translate(11%, 0);
    }
    .content {
        margin-bottom: 50px;
    }

}

@media all and (max-width: 375px) {

}

@media all and (max-width: 315px) {

}