body,
html {
  min-width: 320px;
  max-width: 1320px;
  margin: 0;
  padding: 0;
}


.main-wrap {
    overflow: hidden;
    background: black;
    font-family: Lato-Medium;
    font-size: calc( 24 * 100vw / 640  );
    color: white;
}
.img-full{
    width: 100%;
    z-index: 1;
}

@media (max-width: 320px) {   
    .main-wrap { font-size: 12px; }
}
@media (min-width: 768px) {   
    .main-wrap { 
        font-size: calc( 23 * 100vw / 768  );
     }
}

/* @media (min-width: 992px) {   
    .main-wrap { font-size: 32px; }
} */
@media (min-width: 1320px) {   
    .main-wrap { font-size: 39px; }
}


.subt {
    font-family: Lato-Medium; 
    font-size: 1em;
    line-height: 1.2em;
    text-transform: uppercase;   
    text-align: center;
}




.section-blok1 {
    display: grid;
    grid-template-columns: 33% 67%;
    grid-template-areas: 
    "logo logo" 
    "subt1 subt1" 
    "colorcat packs";
}
.logo {
    grid-area: logo;
    width: 50%;
    margin: 7px auto;
}
.subt-blok1 {
    grid-area: subt1;
    text-align: center;
    padding-bottom: 0.5em;
    font-size: 1em;
}
.gold-shrt-line {   
    display: none;
}
.colorcat {
    grid-area: colorcat;
    margin: 0 -0.75rem;
} 
.delpacks {
    grid-area: packs;
    padding: 0.5em 1em 1.0em 0;
    display: flex;
    flex-flow: row nowrap;
}


.subt-blok2 {
    font-size: 0.85em;
    line-height: 1.1em;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 1em;
}
.problems-wrap {

    display: flex;
    flex-flow: column nowrap;
}
.prob-card {
    display: flex;
    justify-content: center;
}
.prob-icon {
    width: 20%;
    margin: 3% 5%;
    padding-bottom: 0.5em;   
}
.prob-txt {
    width: 40%;
    font: 0.70em Lato-Medium;
    line-height: 1.2em;  
    text-align: left;
    align-self: center;
    /* padding-bottom: 0.75em; */

}
.prob-disq {
    font: 0.4em Lato-Medium;
    font-weight: 200;
    text-align: right;
    margin-right: 5%;
    padding-bottom: 3em;
    /* background-color: rgba( 180,20,20,0.5);  */
}

.section-blok3{
    position: relative;
}

.subt-blok3 {
    font-size: 0.85em;
    line-height: 1.1em;
    width: 80%;
    margin: 0 auto;
    background: linear-gradient(to right, #994f14, #dab047, #f5c96a, #ddab44, #a05916); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    padding-bottom: 1em;
}
.subt-blok3 sup{
    font-size: 0.6em;
}
.center-col {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-areas: 
    "t1 t2 t3" 
    "t1 circle-cat t3" ;
    width: 95%;
    margin: 0 auto -5% auto;

}
.circle-cat {
    grid-area: circle-cat;
    padding-top: 0.5em;
    z-index: 1;
}
.raz-tab-txt {
    font: 0.60em Lato-Medium;
    line-height: 1.2em;  
    text-align: center;
    padding: 0.6em 0;
        /* background-color: rgba( 180,250,20,0.5);  */
}
.center-col .t1 {
    grid-area: t1;
    align-self: center;
    padding-bottom: 5em;
}
.center-col .t2 {
    grid-area: t2;
}
.center-col .t3 {
    grid-area: t3;
    align-self: center;
    padding-bottom: 5em;
}
.raz-col {
    padding-top: 3.5em;
    padding-bottom: 8em;
    /* padding-bottom: 1em; */
}

.boxes-tab {
    /* margin: 1em;
    background-color: rgba( 180,250,20,0.5); */

    display: flex; 
    flex-flow: row nowrap;
    justify-content: space-around;  
    z-index: 1000;
    padding-bottom: 2em;
} 
.box-tab {
    width: 30%;
    border-radius: 12px;
    border: 1px solid #cb993b;
    box-sizing: border-box;
    padding: 0.35em; 
    z-index: 10;
    /* margin: 0.1em; */
    display: flex; 
    flex-flow: column nowrap;
    justify-content: space-between;     
    align-items: center;
}
.box-tab-symb {
    width: 68%;
    margin: 0 auto -47% auto;
    padding-bottom: 0.5em;  
}

.section-blok4{
    position: relative;
    padding-bottom: 1em;
}

.blok4-logo {
    width: 30%;
    margin: 0 auto;
}
.research-benefits {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 1.5em;
    /* background-color: rgba( 180,250,20,0.5); */
}

.research-blok {
    position: relative;
    display: flex; 
    flex-flow: row nowrap;
    justify-content: flex-start;  
    align-items: center;
    z-index: 10;
    padding-bottom: 0.5em;
    /* background-color: rgba( 180,250,20,0.5);  */
} 
.rsch-pix {
    margin: 0 0.5em ;
    width: 15%;
    /* padding: 0.35em 0; */
    /* background-color: rgba( 180,0,20,0.5);  */
}
.rsch-txt {
    font: 0.70em Lato-Medium;
    text-align: left;
    line-height: 1.2em;  
    width: 80%;
    /* background-color: rgba( 180,250,20,0.5);  */
}
.research-blok .tx4 {
    width: 30%;
}
.miskcat {
    position: absolute;
    z-index: 1;
    width: 70%;
    bottom: 0;
    left: 53%;
    /* margin: -30% 0 0 40%; */
}

.section-blok5 {    
}
.subt-blok5 {
    font-size: 0.85em;
    line-height: 1.1em;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 1em;
    position: relative;
    z-index: 10;
}
.clife-tab {
    position: relative;
}
.clife-icons-wrap {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    z-index: 10;
        /* background-color: rgba( 180,250,20,0.5);  */
}
.clife-icon-card {    
    /* background-color: rgba( 180,250,20,0.5);  */
    width: 30%;
    align-self: center;
}
.clife-icon {
    width: 25%;
    margin: 0 auto;
}

.clife-wrap {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    z-index: 1;
    margin-top: -7%;
}
.clife-card {
    position: relative;
    overflow: hidden;
}
.clife-pix {
    width: 120%;
    margin-left: -10%;
}



.subt-blok6 {
    font-size: 0.85em;
    line-height: 1.1em;
    padding-bottom: 0.25em;
    width: 60%;
    margin: 0 auto;
}

.feed-blok {
    padding-bottom: 1.5em;
    width: 95%;
    margin: 0 2.5%;
    display: grid; 
    align-items: center;
    grid-template-columns: 25% 5% 25% 5% 1fr;
    grid-template-areas: 
    "bnf1 . bnf3 . ikcat" 
    "fdry fplus fwet feqv ikcat"
    "bnf2 . bnf4 . ikcat" ;

    /* background-color: rgba( 80,250,20,0.5);      */
}



.feed-bnf {
    /* width: 100%; */
    /* align-content: center; */
    /* padding-top: 1.5em; */
    /* margin: 0.5em 15%; */
    /* background-color: rgba( 180,250,200,0.5);   */
 
}
.bnf1 {
    grid-area: bnf1;  
}
.bnf2 {
    grid-area: bnf2;
}
.bnf3 {
    grid-area: bnf3;  
}
.bnf4 {
    grid-area: bnf4;
}

.feed-ben-pix {
    width: 3em; 
    margin: 10% auto;
}
.feed-ben-txt {
    font: 0.60em Lato-Medium;
    font-weight: 200;
    line-height: 1.2em;  
    text-align: center;
    padding-bottom: 0.75em;
    width: 80%;
    margin: 0 auto;
}
.feed-pix {
    width: 90%;
    margin: 10% 5%;
    /* padding-bottom: 0.75em; */
    /* background-color: rgba( 80,250,20,0.5); */
}
.fdry {
    grid-area: fdry;  
}
.fwet {
    grid-area: fwet;  
}
.feed-sign {
    width: 100%;
}
.fplus {
    grid-area: fplus;  
}
.feqv {
    grid-area: feqv;  
}
.ikcat {
    grid-area: ikcat;  
    align-self: end;
    position: relative;
    /* background-color: rgba( 80,250,20,0.5);  */
}
.ikcat-pix {
    position: relative;
    padding-bottom: 1.1em;
}
.ikcat-ic1 {
    position: absolute;
    width: 3em;
    top: 0;
    left: 0;
}
.ikcat-ic2 {
    position: absolute;
    width: 3em;
    top: 0;
    right: 0;
}
.ikcat-ic3 {
    position: absolute;
    width: 3em;
    bottom: 0.5em;
    left: 0;
}
.ikcat-ic4 {
    position: absolute;
    width: 3em;
    bottom: 0.5em;
    right: 0;
}




.subt-blok7 {
    font-size: 0.85em;
    line-height: 1.1em;
    padding-bottom: 0.25em;
}
.subt-blok7 sup{
    font-size: 0.6em;
}
.walkcat {
    width: 84%;
    margin: 0% 3% 0.5em;
    /* padding-bottom: 0; */
    /* background-color: rgba( 180,0,20,0.5);  */
}
.blok7-shed {
    width: 92%;
    margin: 0 4% 0.5em;
    /* background-color: rgba( 180,0,20,0.5);  */
}
.section-blok7 .disql {
    font: 0.4em Lato-Medium; 
    font-weight: 200;
    text-align: center;
    padding-bottom: 2em;
}


@media (min-width: 768px) {  
    .section-blok1 {
        display: grid;
        grid-template-columns: 55% 45%;
        grid-template-areas: 
        "subt1 logo" 
        "packs colorcat" ;
        justify-items: center;
        padding-left: 2em;
        padding-bottom: 1em;
    }
    .subt-blok1 {
        grid-area: subt1;    
        padding-bottom: 0;
        align-self: center; 
    }
    .gold-shrt-line {   
        display: block; 
        width: 100%;
        margin: 0.25em auto;
        height: 2px;
        background: #f0c983;
    }
    .delpacks {
        width: 75%;
        margin-left: 1em;
        /* align-self: end; */
    }



    .subt-blok2 {
    }
    .problems-wrap {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        padding-bottom: 1em;
    }
    .prob-card {
        width: 30%;
        display: flex;
        flex-flow: column;
        justify-content: start;
        /* background-color: rgba( 180,250,20,0.5); */
    }
    .prob-icon {
        width: 50%;
        align-self: center;
    }
    .prob-txt {
        width: 70%;
        font: 0.6em Lato-Medium;
        line-height: 1.2em;
        text-align: center;
    }

    .section-blok3{
    }
    .center-col {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-areas: 
    "t1 t3 t2" 
    "circle-cat circle-cat circle-cat" ;
    width: 95%;
    margin: 0 auto 0.25em auto;
    
    }
    .circle-cat {
        padding-top: 0;
    }
    .raz-tab-txt {
        margin: 0 10%;
    }
    .center-col .t1 {
        padding-bottom: 0em;
    }

    .center-col .t3 {
        padding-bottom: 0em;
    }
    .boxes-tab {
        width: 92%;
        margin: 1em auto;
    } 




    .section-blok5 {    
    }
    .clife-icon {
        margin: 0 0 0 auto;
    }
    .ic3-patch {
        margin-right: 0.8em;
    }
    
    .clife-wrap {
        margin-top: -18%;
    }
    .clife-pix {
        width: 100%;
        margin-left: 0;
    }






    .subt-blok6 {
        width: 90%;
    }
    .feed-blok {
        padding-bottom: 1.5em;
        width: 95%;
        margin: 0 2.5%;
        display: grid; 

        align-items: end;
        grid-template-columns: 14% 14% 5% 14% 14% 5% 1fr;
        grid-template-areas: 
        "fdry fdry fplus fwet fwet feqv ikcat"
        "bnf1 bnf2   .   bnf3 bnf4   .  ikcat";

    }



    .feed-bnf {
        padding-top: 0em;
    }

    .feed-ben-txt {
        font: 0.55em Lato-Medium;
        font-weight: 100;
        line-height: 1.2em;  
        padding:0 0 0.75em 0;
        width: 100%;
    }
    .feed-pix {
        width: 70%;
        margin: 20% 15% 0 15%;

    }

    .feed-sign {
        padding-bottom: 2em;
    }

    .ikcat {
        padding-left: 0.5em;
        padding-right: 0.2em;
        margin-top: -0.3em;
        /* background-color: rgba( 80,250,20,0.5);  */
    }

    .ikcat-ic1 {
        position: absolute;
        width: 3em;
        top: 0.75em;
        left: 1.5em;
    }
    .ikcat-ic2 {
        position: absolute;
        width: 3em;
        top: 1.3em;
        right: -0.1em;
    }
    .ikcat-ic3 {
        position: absolute;
        width: 3em;
        top: 5.3em;
        right: -1em;
        left: auto;
    }
    .ikcat-ic4 {
        position: absolute;
        width: 3em;
        bottom: 1.6em;
        right: 0.5em;
    }




    .shed-blok {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        padding-bottom: 1em;
    }
    .walkcat {
        width: 65%;
        margin: 1em 0 0 -35%;
    }
    .blok7-shed {
        width: 60%;
        margin: 1em 0 0.5em 0;
    }

}