body {
    margin: 0 auto 0 auto;
    padding: 0;
    background-color: #e1fffc;
    text-align: center;
}

.text_container, .text_container_purple, .text_container_plain, .text_container_blue, .text_container_yellow {
    display: block;
    float: left;
    width: 100%;
    font-size: 22px;
}

.text_container {
    background-color: #e1fffc;
    font-family: BarlowCondensedLight, serif;
}

.text_container_purple {
    background-color: #ffb4ea;
    margin: 50px 0 0 0;
    font-family: BarlowCondensedLight, serif;
}
.text_container_blue {
    background-color: #006eab;
    margin: 0;
    font-family: BarlowCondensedLight, serif;
}
.text_container_yellow {
    font-family: RalewaySemiBold, serif;
    font-size: 30px;
    color: #1d2e46;
    margin: 50px 0 0 0;
}

.top_space {
    margin-top: 50%;
}

.pict_container, .banner_container, .text_container_purple {
    margin: 0 auto 0 auto;
    padding: 0;
    display: block;
    float: left;
    width: 100%;
    text-align: center;
}
.company_name_link {
    cursor: pointer;
    text-decoration: none;
    color: white;
}
.company_name_link:hover {
    color: #b0f8e2;
}
.pict_container_inner {
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 50px 0;
}

.banner_container {
    margin: 0 auto 50px auto;
}

.text, .text_nicer, .text_how_it_works, .text_index, .text_index_white {
    width: 70%;
    margin: 0 auto 0 auto;
    padding: 50px;
    text-align: justify;
    font-family: CalibriLight, serif;
}
.text {
    width: 90%;
    padding: 30px;
}
.text_index_white{
    color: white;
    font-size: 26px;
}

.text_how_it_works {
    padding: 20px;
    font-size: 22px;
    text-align: center;
}

.text_nicer {
    width: 50%;
    font-size: 30px;
    font-family: RalewaySemiBold, serif;
    color: #084e52;
}

.article_titel {
    font-family: RalewaySemiBold, serif;
    font-size: 42px;
    color: #2e9ba1;
    margin: 0 0 50px 0;
}

.article_titel_darkGreen, .article_title_darkBlue {
    font-family: RalewaySemiBold, serif;
    font-size: 42px;
    color: #18393f;
    margin: 0 auto 10px auto;
    text-align: left;
}
.article_title_darkBlue {
    color: #ffffff;
    font-size: 38px;
}

.text_to_center {
    text-align: center;
    font-size: 28px;
}

.subTitle {
    font-size: 28px;
    font-family: BarlowCondensedReg, serif;
}

.div_container, .div_container_dark_purple {
    float: left;
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 0;
}

.div_container_dark_purple {
    background-color: purple;
}

.div_sub_container {
    width: 80%;
    float: left;
    margin: 3% 0 3% 15%;
    padding: 0;
}

.negyes {
    float: left;
    text-align: center;
    width: 20%;
    padding: 10px;
    margin: 40px auto 40px auto;
}

.roundedBlock {
    width: 200px;
    height: 250px;
    border-radius: 30px;
    box-shadow: 2px 2px 10px #6a8c94;
}

.negyes_title {
    font-family: AsapCondensedBold, serif;
    font-size: 36px;
    color: #2ca8af;
    text-align: center;
}

.text_negyes {
    margin: 40px 0 0 0;
    text-align: center;
    font-family: BarlowCondensedBold, serif;
    font-size: 24px;
    color: #207a80;
}

.patch_container {
    width: 100%;
    margin: 20px auto 20px auto;
    padding-top: 50px;
    display: block;
    float: left;
    background-color: #ff4b89;
    /*background-color: #ff59b1;*/
}

.patches, .patches_plain {
    float: left;
    width: 32%;
    height: 750px;
    margin: 0 0 20px 20px;
    border-radius: 30px;
    box-shadow: 2px 2px 10px #a26c90;
    background-color: white;
    padding: 0;
}

.patches:hover {
    background: rgba(165, 255, 227, 0.9);
    cursor: pointer;
}

.patches:active {
    background: rgba(239, 215, 179, 0.9);
}

.text_patches {
    width: 90%;
    margin: 0 auto 0 auto;
    padding: 10px 10px 30px 10px;
    text-align: justify;
    font-size: 20px;
    font-family: CalibriRegular, serif;
    color: #4b4b4b;
}

.patches_title {
    font-size: 80px;
    color: white;
    font-family: AsapCondensedBold, serif;
    text-align: center;
    margin: 0 auto 40px 0;
    text-shadow: 3px 3px #333333;
}
.patch_pitcure {
    width: 100%;
}

.patches_text_title, .how_it_works_title {
    width: 100%;
    font-family: RalewaySemiBold, serif;
    font-size: 30px;
    color: rgba(61, 61, 61, 0.8);
    text-align: center;
}

.how_it_works_title {
    font-family: BarlowCondensedBold, serif;
}

.text_medium_area_Calibri_font {
    width: 60%;
    margin: 40px auto 40px auto;
    text-align: justify;
    font-size: 24px;
    font-family: CalibriRegular, serif;
}

.text_medium_area_title {
    font-family: AsapCondensedBold, serif;
    font-size: 40px;
    text-align: center;
}

.how_to_use_container {
    display: block;
    float: left;
    width: 100%;
    margin: 50px auto 50px auto;
    /*padding: 30px;*/
    text-align: center;
}

.how_to_use_picts {
    float: left;
    width: 100%;
    margin: 0 auto 0 auto;
}
.how_to_use_picts_width {
    width: 100%;
}
.how_to_use_picts_width_50 {
    width: 50%;
}
.how_to_use_rounded_block {
    width: 90%;
    float: left;
    margin: 10px 0 10px 10px;
    padding: 10px;
    background-color: white;
    color: #5d5d5d;
    border-radius: 30px;
    box-shadow: 0 0 5px #a6a6a6;
}

.footer_text_center, .footer_text_justify {
    width: 60%;
    color: white;
    margin: 0 auto 0 auto;
    padding: 20px;
    font-family: BarlowCondMedium, serif;
    font-size: 30px;
    text-align: center;
}

.footer_text_justify {
    text-align: justify;
}

.toCenter {
    width: 100%;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 0;
}

.pict_width_30 {
    width: 30%;
}
.pict_width_50 {
    width: 50%;
}
.harmas_index {
    float: left;
    text-align: center;
    width: 32%;
    padding: 0;
    margin: 0;
}
.od18do22 {
    text-align: center;
    font-size: 22px;
    font-family: BarlowCondMedium, serif;
    padding: 10px;
}
.clean_water_button {
    margin: 40px auto 20px auto;
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: #ff8929;
    color: white;
    font-size: 30px;
    font-family: BarlowCondMedium, serif;
    border-radius: 50%;
    outline: none;
    text-decoration: none;
    border: 2px solid #c5c5c5;
    cursor: pointer;
    box-shadow: 3px 3px 8px #505050;
}
.clean_water_button:active {
    box-shadow: 1px 1px 3px #343434;
    transform: translateY(2px);
}
.clean_water_button:hover {
    background-color: #fda026;
}
.pict_border_index {
    border: 10px solid #9ac0ea;
    width: 70%;
}
.tovabb_button {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #efe02f;
    color: black;
    font-family: BarlowCondensedBold, serif;
    font-size: 30px;
    text-align: center;
    outline: none;
    text-decoration: none;
    border: 12px solid #ada684;
    cursor: pointer;
}
.tovabb_button:hover {
    background-color: #fff484;
}
.text_to_center_small {
    text-align: center;
    font-size: 20px;
    font-family: CalibriLight, serif;
}
a {
    text-decoration: none;
    color: #313131;
}

@keyframes myScale {
    100% {transform: scale(1.1);}
}

.webshop {
    font-family: SairaSemiCondensedExtBold, serif;
    width: 220px;
    height: 80px;
    font-size: 28px;
    background-color: #ffd467;
    /*background-color: #2ca8af;*/
    color: #313131;
    border-radius: 30px;
    border: 8px solid #bb9b6a;
    margin: 0 0 30px 0;
    animation: myScale 1s alternate infinite ease-in;
}


/******** RESPONSIVE MODE *********/

@media screen and (max-width: 1600px) {
    .patches, .patches_plain {
        width: 31%;
        height: 660px;
        margin: 0 0 20px 20px;
    }
}
@media screen and (max-width: 1300px) {
    .negyes {
        float: left;
        text-align: center;
        width: 30%;
        padding: 10px;
        margin: 20px auto 20px auto;
    }
}
@media screen and (max-width: 1200px) {
    .patches, .patches_plain {
        width: 45%;
        height: 700px;
        margin: 0 0 20px 30px;
    }
    .patches_text_title {
        font-size: 25px;
    }
}
@media screen and (max-width: 1050px) {
    .pict_width_30 {
        width: 40%;
    }
    .article_titel {
        font-size: 35px;
        text-align: center;
    }
    .text, .text_nicer {
        display: block;
        width: 85%;
        padding: 15px;
    }
    .text_medium_area_Calibri_font {
        width: 85%;
        margin: 20px auto 20px auto;
    }
    .text_nicer {
        font-size: 25px;
    }
    .negyes {
        float: left;
        text-align: center;
        width: 25%;
        padding: 10px;
        margin: 20px auto 20px auto;
    }
    .text_how_it_works {
        padding: 10px;
        font-size: 20px;
        width: 90%;
    }
    .text_index, .text, .text_index_white {
        width: 90%;
        padding: 10px;
    }
    .text {
        text-align: center;
    }
}

@media screen and (max-width: 950px) {
    .negyes {
        width: 80%;
        margin: 0 auto 0 auto;
    }
    .text_negyes {
        margin: 20px 0 30px 0;
    }
    .harmas_index {
        width: 95%;
        margin: 0 0 30px 0;
    }
    .how_to_use_picts_width {
        width: 50%;
    }
    .text_medium_area_title {
        font-size: 35px;
        padding: 10px;
    }
    .patch_container {
        padding-top: 20px;
    }
    .patches_title {
        font-size: 60px;
        margin: 0 auto 20px 0;
    }
    .patches, .patches_plain {
        width: 45%;
        height: 630px;
        margin: 0 0 20px 3.2%;
    }
    .pict_border_index {
        border: 5px solid #9ac0ea;
        width: 100%;
    }
}
@media screen and (max-width: 750px) {
    .patches, .patches_plain {
        width: 90%;
        height: 660px;
        margin: 0 0 20px 4.7%;
    }
    .patch_pitcure {
        width: 80%;
    }
    .patches_title {
        font-size: 50px;
    }
}
@media screen and (max-width: 700px) {
    .text_medium_area_title {
        font-size: 30px;
    }
    .article_titel_darkGreen,.article_title_darkBlue {
        font-size: 35px;
    }
}
@media screen and (max-width: 600px) {
    .patches, .patches_plain {
        width: 90%;
        height: 600px;
    }
}
@media screen and (max-width: 500px) {
    .pict_width_30 {
        width: 70%;
    }
    .patches, .patches_plain {
        width: 90%;
        height: 560px;
        margin: 0 0 20px 5%
    }
    .text_patches {
        font-size: 18px;
    }
    .how_to_use_picts_width, .how_to_use_picts_width_50 {
        width: 60%;
    }
}
@media screen and (max-width: 400px) {
    .patches_text_title {
        width: 90%;
        margin: 0 auto 0 auto;
    }
    .patches, .patches_plain {
        width: 90%;
        height: 530px;
        margin: 0 0 20px 5%
    }
    .article_titel_darkGreen, .article_title_darkBlue {
        width: 100%;
        font-size: 26px;
        text-align: left;
        padding: 0;
        margin: 0;
    }
    .footer_text_justify, .footer_text_center {
        width: 80%;
        text-align: center;
        font-size: 25px;
    }
    .text_nicer {
        width: 90%;
        font-size: 22px;
    }
}