@font-face {
    font-family: 'Meister';
    src: url('fonts/Meister-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Meister';
    src: url('fonts/Meister-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* reset.css */
* {

    box-sizing: border-box;
}

/* Üldine lehe stiil */
html { margin: 0px; padding: 0px }
body {
    font-family: 'Meister', sans-serif;
    background-color: #0b4733;
    color: #0049FF;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 27px */;
}

.wrapper { max-width: 1312px; margin: 0 auto; width: 98% }

.clear { clear: both }


/* Lingi stiil */
a {
    color: #000;
    text-decoration: none;
}

/* Hover efekt lingile */
a:hover {
    text-decoration: none;
}

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
.juicer-feed h1.referral { display: none !important; }


.hero_holder { margin-bottom: 20px; }
.hero_holder .section { display: flex }
.hero { color: #db6b2f; height: 400px;  border-radius: 20px; background: url('img/roh-lamp.png') no-repeat center center; margin-top: 40px; margin-bottom: 20px;  display: flex; align-items: center; justify-content: flex-start; padding: 60px;     background-size: 150%;background-position: 16% 38%;}
.hero h2 { font-size: 74px; line-height: 60px; }
.video_holder { width: 100% }
.intro { border-radius: 20px; background: #db6b2f; text-align: center; padding: 20px 40px; margin-bottom: 12px }
.intro h2 { color: #fff; text-transform: uppercase; font-weight: bold; font-size: 42px; line-height: 42px;margin: 0px; padding: 0px; margin-top: 20px; margin-bottom: 10px }
.intro p { color: #0b4733; font-weight: bold; line-height: 24px;font-size: 20px; }

.some { width: 100%; height: 100%; display: flex; padding-top: 40px }
.some_i { background: #2f6051; width: 100%; height: 1015px; overflow: scroll; border-radius: 30px; padding-top: 20px}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 video ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.product { width: 100%; height: 320px;border-radius: 30px;display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; cursor: pointer;  }
.product a { color: white; font-size: 16px }
.product a i { margin-left: 15px; }
.product_1 {  background: url('img/roheline-lamp2.png') no-repeat center center; background-size: cover;  }
.product_2 {  background: url('img/alus.png') no-repeat center center; background-size: cover;  }
.product_3 {  background: url('img/seebi.jpeg') no-repeat center center; background-size: 100%;  }
.product_4 {  background: url('img/lamp3.png') no-repeat center center; background-size: cover;  }




.footer { clear: both; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: flex-start; align-items: center; gap: 8px }
.footer img { max-width: 30px; }
.footer img.fb { margin-left: 40px }

.footer a { line-height: 0px }
.desktop { display: block }
.mobile { display: none }

.btn { background: #2f6051; border-radius: 30px; padding: 10px 20px; border: none; color: #fff; font-size: 14px; cursor: pointer; }

.jg { width: 100% }
.pdl { width: 120%; margin-left: -10%; margin-right: -10%; }

.modals { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #00000099; z-index: 9 }
.modal { position: relative; color: white }
.modal img { width: auto;height: 80vh; }
#close { position: absolute; top: 10px;right: -40px; font-size: 25px;cursor: pointer;}



.privacy { max-width: 900px; height: 90vh; overflow: scroll; background: #2f6051;padding: 20px;font-size: 16px;line-height: 24px; }
.privacy h2 { text-transform: uppercase }

body.modal-open {
    overflow: hidden;
}


.age-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: #0c4733;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.age-modal {
    background: #0c4733;
    padding: 30px;
    max-width: 90%;
    text-align: center;
    border-radius: 50px;
    font-family: sans-serif;
    color: #72bf44;
    border: 10px solid #72bf44;
    min-width: 300px;
    position: relative;
}
.age-modal h3 { font-size: 80px; color: white; margin: 0px }

.age-modal h2 { font-weight: bold;font-size: 42px;line-height: 42px; text-transform: uppercase; margin: 0px; margin-bottom: 30px  }
.age-modal h2.aastane { margin-top: 30px; margin-bottom: 0px }

.age-modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    position: absolute; top: 50%;
    width: 90%;
    left: 0px;
    right: 0px;
}

.age-modal-buttons button {
    background: #2f6051; border-radius: 3px; padding: 10px 20px; border: none; color: #fff; font-size: 14px; cursor: pointer;
}
#age-no { background: #f88c29; color: #0c4733 }
#age-yes { background: white; color: #0c4733  }


/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.5%;
}
.span_10_of_12 {
    width: 83%;
}

.span_9_of_12 {
    width: 74.5%;
}

.span_8_of_12 {
    width: 66%;
}

.span_7_of_12 {
    width: 57.5%;
}

.span_6_of_12 {
    width: 49%;
}

.span_5_of_12 {
    width: 40.5%;
}

.span_4_of_12 {
    width: 32%;
}

.span_3_of_12 {
    width: 23.5%;
}

.span_2_of_12 {
    width: 15%;
}

.span_1_of_12 {
    width: 6.5%;
}

@media only screen and (max-height: 967px) {
    .hero_holder { padding-bottom: 0px; }
}

@media only screen and (max-width: 1440px) {
    .hero_holder { padding-bottom: 0px; }
}
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 980px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
        width: 100%;
    }

    .wrapper { width: 95% }
    .desktop { display: none }
    .mobile { display: block }
    .hero_holder .section { flex-direction: column; }
    .footer { flex-direction: column; }
    .pdl { width: 95%; margin: 0px }
    .footer img.fb { margin-left: 0px }
    .hero h2 { font-size: 43px;line-height: 40px; }
    .intro h2 { font-size: 24px;line-height: 27px; }
    #close { right: 20px; }
    .modal img { width: 95%; height: auto; margin-left: 2.5%; }
    .some_i { height: 500px; }
}