@font-face {
    font-family: "Cairo";
    src: url('./fonts/Cairo/Cairo-Regular.eot') format("eot"),url("fonts/Cairo/Cairo-Regular.woff") format("woff"),url("fonts/Cairo/Cairo-Regular.ttf") format("truetype"),url("fonts/Cairo/Cairo-Regular.svg#Cairo") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Cairo";
    src: url('./fonts/Cairo/Cairo-Light.eot') format("eot"),url("fonts/Cairo/Cairo-Light.woff") format("woff"),url("fonts/Cairo/Cairo-Light.ttf") format("truetype"),url("fonts/Cairo/Cairo-Light.svg#Cairo") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Cairo";
    src: url('./fonts/Cairo/Cairo-Bold.eot') format("eot"),url("fonts/Cairo/Cairo-Bold.woff") format("woff"),url("fonts/Cairo/Cairo-Bold.ttf") format("truetype"),url("fonts/Cairo/Cairo-Bold.svg#Cairo") format("svg");
    font-weight: 700;
    font-style: normal;
}

.pt20-5-5-5 {
    padding: 20px 10px 10px 10px;
}

* {
    font-family: "Cairo", "Arial", "Sans-serif";
    line-height: 1.2em;
}

.heading-h2 {
    font-size: 1.4em;
}

.heading-h1 {
    font-size: 3em;
}

.text-grey {
    color: #666666;
}

.pt20 {
    padding-top: 20px;
}

.flex1 {
    flex: 1 1 20em;
    flex-wrap: wrap;
}

.flex2 {
    flex: 2 2 20em;
    flex-wrap: wrap;
}

.flex-row-container {
    /*background: #aaa;*/
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    /*align-items: center;*/
    /*justify-content: center;*/
}

    .flex-row-container > .flex-row-item.flex1 {
        flex: 1 1 30%;
        height: 100%;
    }
.p5 {
    padding: 5px;
}

    .p5 h2 {
        margin: 0;
    }

    .p5 p {
        margin: 0px;
        padding: 5px;
    }

.flex-row-item.flex1 {
    /*margin-left: 10px;*/
    padding-right: 10px;
}

.flex-row-container > .flex-row-item {
    padding: 10px 10px 0 10px;
    justify-content: space-between;
}


.flex-row-item {
    background-color: white;
    /*border: 1px solid #f76707;*/
    margin-top: 20px;
}

.flex1 img, .flex2 img {
    /*border: 1px solid red;*/
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}


ul {
    list-style: none; /* Remove default bullets */
    padding-inline-start: 10px
}

    ul li::before {
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 1em; /* Also needed for space (tweak if needed) */
        margin-left: -1em; /* Also needed for space (tweak if needed) */
    }

    ul.green li::before {
        content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: #13A538; /* Change the color */
    }

    ul.greenyellow li::before {
        content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: rgb(195,205,53); /* Change the color */
    }

    ul.blue li::before {
        content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: #00A7AE; /* Change the color */
    }

    ul.brown li::before {
        content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: #6F381A; /* Change the color */
    }

.back-brown {
    background-color: #6F381A;
}

.back-blue {
    background-color: #00A7AE;
}

.back-green {
    background-color: #13A538;
}
.back-orange { background-color: rgb(245, 130, 36); }

.text-brown {
    color: #6F381A;
}

.text-blue {
    color: #00A7AE;
}

.text-green {
    color: #13A538;
}

.text-white {
    color: white;
}

.text-black {
    color: black;
}

.text-gryellow {
    color: rgb(195,205,53);
}
.text-orange {
    color: rgb(245, 130, 36);
}

.back-gryellow {
    /*background-color: #C7CB08;*/
    background-color: rgb(195,205,53);
}

.back-white {
    /*background-color: #C7CB08;*/
    background-color: white;
}

.b {
    font-weight: bold;
}

.box {
    width: 45%;
    margin: 0 auto;
    padding: 20px;
    position: absolute;
    left: 4em;
    top: 18em;
    font-size: 1.8em;
}



.text-center {
    text-align: center;
}

.logosvg {
    width: 7em;
}

.inline-div {
    display: inline-flex;
}

.guaranth2 {
    padding-left: 10px;
}

.pbh {
    padding-bottom: 10.4em;
}

/*
    watter/drought
*/

.rotate-div {
    transform: rotate(-5deg);
}

.p10 {
    padidng: 10px;
}

.pbh3 {
    padding-bottom: 3em;
}
#img-in-bg {
    background: url('/frontend/webroot/uploads/images/2019/enweb/img2-watter-circle-edit.png');
    background-size: 110%;
    background-position: -8px 15px;
    background-repeat: no-repeat;
}

.pt20 {
    padding: 20px;
}

p {
    padding: 5px 20px;
}

.pt50 {
    padding-top: 50px;
}

.plr-60-40 {
    padding-left: 60px;
    padding-right: 40px;
}

.pbh4 {
    padding-bottom: 6em;
}
.carusell-icon {
    display: inline-flex;
    padding-top:40px

}
.carusell-icon img {
    margin: 0 15px;

}
.foto-legend {
    padding: 5px 10px;

}
.h2-smaller{
    font-size: 0.8em;
    vertical-align: middle;
}

.box_drought {
    width: 53%;
    margin: 0 auto;
    padding: 20px 20px 5px 20px;
    position: absolute;
    right: 1em;
    bottom: -1em;
    font-size: 1.4em;
}

/*watter soil end*/