html {
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.header {
    height: 200px;
    display: flex;
    justify-content: center;
    background: linear-gradient(to right, #008556 50%, #E8E76A 50%);
}

.sec-header {
    /* border: red 1px solid; */
    height: 100%;
    width: 980px;
}

.column {
    float: left;
    padding: 0px 30px 10px 0px;
    height: 100%;

}



.column1 {
    width: 25%;
    display: grid;
    align-items: center;
    justify-items: left;
}

.column1 img {
    width: 200px;
}

.column2 {
    width: 75%;
    display: grid;
    align-items: flex-end;
    justify-items: right;
    text-align: right;
    background-color: #008556;
    /* border: wheat 1px solid; */
}



/* .row {
    align-items: flex-end;
} */

/* .row:after {
    content: "";
    display: table;
    clear: both;
} */

/* social icon */
.social-icon-m {
    display: none;
}

.social-icon {
    word-spacing: 5px;
    margin-bottom: 25px;
    margin-right: 18px;
    /* border: #fff 1px solid; */
}

.social-icon a {
    color: transparent;
}


.topnav {
    /* border: #fff 1px solid; */
    margin-bottom: 10px;
}

/* menu */
.nav-menu a {
    color: #ffffff;
    padding: 15px 15px;
    text-decoration: none;
    text-transform: none;
    font-size: 18px;
    letter-spacing: 4px;
    font-weight: 300;
}

.nav-menu a:hover {
    color: #E8E86B;
}

.nav-menu a.nav-active {
    color: #E8E86B;
}


.nav-menu .icon {
    display: none;
}

.nav-menu-m {
    display: none;
}



/* banner */
.banner {
    background-image: url("../image/bg-banner-full.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-color: #B6A0E8; */
    /* background: linear-gradient(to right, #008556 50%, #E8E76A 50%); */
    height: 600px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-banner {
    height: 100%;
    width: 980px;
}

.sec {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
}



.sec1 {
    width: 45%;
    padding: 1% 7% 0% 7%;
    /* border: 2px solid red; */
    /* background-color: #ffffff; */
    display: grid;
    align-content: start
}

.sec1 span {
    font-size: 3.5em;
    color: #fff;
    /* border: 2px solid red; */
    font-family: 'Heimat Display';
    font-style: italic;
    letter-spacing: 5px;
    line-height: 6.5vh;
    font-weight: 300;

}

.sec1 button {
    background-color: #E8E76A;
    border: none;
    width: 120px;
    height: 45px;
    color: #008556;
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 2.5px;
    margin-top: 0px;
    border-radius: 7px;
    cursor: pointer;
}

.sec1 img {
    display: none;
}

.sec2 {
    width: 55%;
    /* border: 2px solid black; */
    background-image: url('../image/banner-img-2-100.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    align-items: center;

}

.sec2 img {
    width: 50%;
    padding-right: 7%;
    /* position: absolute;
    top: 530px;
    left: 55%; */
}

.sec2 .btn {
    position: absolute;
    top: 530px;
    left: 46%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-image: url('../image/19-free-w.webp');
    background-color: transparent;
    width: 150px;
    height: 150px;
    background-size: cover;
    color: transparent;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.sec2 .btnshow {
    background-color: #F2C2AE;
    border: none;
    width: 120px;
    height: 40px;
    color: #008556;
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 2px;
    margin-top: 0px;
    border-radius: 7px;
    cursor: pointer;
    position: absolute;
    top: 780px;
    left: 60px;
    z-index: 1;
    display: none;
}

#rorate-banner {
    width: 400x;
    height: 400px;
    background-image: url("../image/rorate-banner-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

.rotating {
    -webkit-animation: rotating 5s linear infinite;
}

/* banner */
/* section-shower-oil  */
.section-shower-oil {
    background: linear-gradient(to right, #384BD7 50%, #F2C2AE 50%);
    height: 600px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-sho {
    /* border:5px solid yellow; */
    height: 100%;
    width: 980px;
}

.sho {
    /* background-color: #B6A0E8; */
    /* border: 2px solid greenyellow;  */
    float: right;
    height: 100%;
}

.sho1 {
    width: 50%;
    padding: 0% 7% 0% 7%;
    /* border: 2px solid red; */
    background-color: #ffffff;
    display: grid;
    align-content: center;
}

.sho1 span {
    font-size: 3.5em;
    color: #384BD7;
    font-family: 'Heimat Display';
    font-style: italic;
    letter-spacing: 5px;
    line-height: 6vh;
    font-weight: 300;
    text-align: center;
}

.sho1 p {
    font-size: 16px;
    color: #008556;
    text-align: justify;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}

.sho1 a {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #B4A0CC;
    font-style: italic;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
}

.sho1 a:hover {
    color: #384BD7;
}


.sho2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
}

.sho2 {
    background-image: url("../image/bg-sho2.png");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center center;
}

/* section-shower-oil  */
/* section-7-special-oils */
.section-7-special-oils {
    background: #B5A1CD;
    background-image: url('../image/bg-7-spe.png');
    background-size: 25% 40%;
    background-position: top left;
    background-repeat: no-repeat;
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-spe {
    height: 100%;
    width: 980px;
}

.sec-speM {
    display: none;
}

.spe {
    /* background-color: #B6A0E8; */
    float: right;
    height: 100%;
    /* border:5px solid red; */
}

.spe1 {
    width: 50%;
    padding: 0% 0% 0% 0%;
    /* border: 2px solid red; */
    background-color: #ffffff;
    display: grid;
    align-content: center;
}

.spe1 img {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
}


.spe2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
    padding: 0% 5% 0% 5%;
}

.spe2 img {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.spe2 span {
    color: #E8E76A;
}

.spe2 p {
    font-size: 16px;
    color: #fff;
    text-align: justify;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}

.spe2 a {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #B4A0CC;
    font-style: italic;
    text-decoration: none;
    margin: 20px 20px 0px 0px;
}

/* section-7-special-oils */
/* accordion */
.accordion {
    display: block;
    align-content: center;
    background-color: #008556;
    color: #F2C2AE;
    cursor: pointer;
    padding: 16px 0px 10px 0px;
    border: none;
    width: 100%;
    border-bottom: 1px solid #E8E76A;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

.txt-acc {
    font-size: 29px;
    font-weight: 300;
    letter-spacing: 5px;
    font-family: 'Acumin pro';
    font-style: italic;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.active,
.txt-acc:hover {
    background-color: #008556;
    color: #fff;

}

.txt-acc:after {
    content: '\02C5';
    color: #E8E76A;
    font-weight: 300;
    font-size: 29px;
    font-family: 'Acumin Pro';
    float: right;
    margin-left: 5px;
    font-style: normal;
}

/* .accordion:after {
    content: '\02C5';
    color: #E8E76A;
    font-weight: bold;
    margin-left: 50%;
} */

.active .txt-acc:after {
    content: "\02C4";
}

.panel {
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0px;
    width: 980px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    color: #B4A0CC;
    display: flex;
    align-items: center;
}

.panel-p {
    /* padding-top: 50px;
    padding-bottom: 50px; */
    width: 80%;
    line-height: 1.5;
    letter-spacing: 2px;
}

.panel-img {
    width: 20%;
    text-align: right;
    padding-right: 10px;

}

.panel-img-m {
    display: none;
}

.panel img {
    /* height: 100%; */
    width: 70px;
}

/* accordion */
/* section-ingredients */
.section-ingredients {
    background: #384BD7;
    background-image: url('../image/bg-ing-full.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-ing {
    height: 100%;
    width: 980px;
}

.sec-ing-m {
    display: none;
}

.ing {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:5px solid red; */
}

.ing1 {
    width: 50%;
    padding: 0% 0% 0% 0%;
    /* border: 2px solid red; */
    /* background-color: #ffffff; */
    display: grid;
    align-content: start;
}

.ing1 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    margin-bottom: 70px;
}

.ing1 p {
    font-size: 14px;
    color: #fff;
    text-align: left;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 30px;
}


.ing2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
    padding: 0% 7% 0% 15%;
    background-color: #ffffff;
}




.ing2 span {
    font-size: 18px;
    color: #008556;
    text-align: left;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.7;
}

.ing2 span::before {
    content: 'No ';
    font-size: 18px;
    color: #008556;
    font-weight: 100;
    letter-spacing: 1px;

}


/* section-ingredients */
/* section-can-shower */
.section-can-shower {
    background: #F2C2AE;
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-can {
    height: 100%;
    width: 980px;
}

.can {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:5px solid red; */
}

.can1 {
    width: 50%;
    padding: 0% 0% 0% 0%;
    /* border: 2px solid red; */
    /* background-color: #ffffff; */
    background-image: url('../image/oil-sea-100.webp');
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    align-content: start;
}

.can1 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 45px;
    margin-bottom: 50px;
    display: none;
}



.can2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
    padding: 0% 5% 0% 5%;
    background-color: #FBEDE7;
}


.can2 img {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.h-can-m{
display: none;
}

.can2 p {
    font-size: 16px;
    color: #008556;
    text-align: left;
    font-family: 'Acumin pro';
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}

.can2 a {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #B4A0CC;
    font-style: italic;
    text-decoration: none;
    margin: 20px 0px 0px 0px;
    font-family: 'Acumin pro';
}

.can2 a:hover {
    color: #384BD7;
}

/* section-can-shower */
/* section-skin */
.section-skin {
    background: #fff;
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: grid;
    justify-content: center;
}

.sec-skin {
    height: 100%;
    width: 980px;
}

.skin {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:5px solid red; */
}

.skin1 {
    width: 100%;
    padding: 0% 0% 0% 0%;
    /* border: 2px solid red; */
    background-color: #ffffff;
    display: grid;
    align-content: start;
}

.skin1 img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    /* margin-bottom: 50px; */
    /* border: 2px solid red; */
}

.skin1 img#h-skin {
    /* border: 2px solid red; */
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 45px; */
    /* margin-bottom: 50px; */
}



.skin1 p {
    font-size: 16px;
    color: #B5A1CD;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
    margin-bottom: 40px;

}

/* section-skin */
/* section-benefit */
.section-benefit {
    background: #B5A1CD;
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
    background-image: url('../image/bg-ben-full.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec-ben {
    height: 100%;
    width: 980px;
    /* border: 2px solid greenyellow; */

}

.sec-ben .h-ben {
    text-align: center;
    width: fit-content;
    height: 68px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Heimat Display';
    font-size: 55px;
    color: #fff;
    font-style: italic;
    line-height: auto;
    letter-spacing: 3px;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: #B5A1CD;
}

.ben {
    /* background-color: #B6A0E8; */
    float: left;
    height: auto;
    /* border:5px solid red; */

}

.ben h {
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-family: 'Heimat Display';
    font-style: italic;
    line-height: 50px;
    letter-spacing: 2px;
}


.ben1 {
    width: 33.33%;
    /* border: 2px solid yellow; */
    display: grid;
    align-content: start;
    padding: 0% 2% 0% 2%;
}

.ben1 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.ben1 p {
    font-size: 16px;
    font-family: 'Acumin Pro';
    color: #fff;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;

}

.ben2 {
    width: 33.33%;
    /* border: 2px solid yellow; */
    display: grid;
    align-content: start;
    padding: 0% 2% 0% 2%;
}


.ben2 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}


.ben2 p {
    font-size: 16px;
    font-family: 'Acumin Pro';
    color: #fff;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}



.ben3 {
    width: 33.33%;
    /* border: 2px solid red; */
    display: grid;
    align-content: start;
    padding: 0% 2% 0% 2%;
}

.ben3 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}


.ben3 p {
    font-size: 16px;
    font-family: 'Acumin Pro';
    color: #fff;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}



/* section-benefit */
/* section-our-story */
.section-our-story {
    /* background:url('../image/bg-our-100.jpg'),
    linear-gradient(to right, red 50%, green 50%); */
    background: url('../image/bg-our-100.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* background: #F2C2AE; */
    height: 700px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-our {
    height: 100%;
    width: 980px;
}

.our {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:5px solid red; */
}

.our1 {
    width: 50%;
    padding: 0% 0% 10% 3%;
    /* border: 2px solid red; */
    /* background-color: #ffffff; */
    background-image: url('../image/our-story-1-100.jpg');
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    align-content: center;
}





.our2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
    padding: 0% 2% 0% 2%;
    background-color: #fff;
}

.our2 span {
    font-size: 16px;
    color: #384BD7;
    text-align: left;
    font-family: 'Acumin pro';
    font-weight: 300;
    letter-spacing: 1px;
    line-height: auto;
}

.our2 img {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
    /* border: 2px solid red; */
}


.our2 p {
    font-size: 16px;
    font-family: 'Acumin pro';
    color: #008556;
    text-align: left;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 25px;
}

.our2 a {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #B4A0CC;
    font-style: italic;
    font-family: 'Acumin pro';
    text-decoration: none;
    margin: 20px 0px 0px 0px;
}

.our2 a:hover {
    color: #384BD7;
}

#rorate-our {
    width: 300x;
    height: 300px;
    background-image: url("../image/rorate-banner-2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}

.rotating {
    -webkit-animation: rotating 5s linear infinite;
}

/* section-our-story */
.bg-our-story {
    display: none;
}

/* section-partners */
.section-partners {
    background: #B5A1CD;
    height: 370px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
    background-color: #E8E76A;
}

.sec-par {
    height: 100%;
    width: 980px;
    /* border: 2px solid greenyellow; */

}

.par {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:2px solid red; */

}



.par1 {
    width: 33.33%;
    /* border: 2px solid red; */
    display: grid;
    align-content: top;
    padding: 0% 0% 0% 0%;

}

.par1 img {
    height: 300px;
}

.par1 span {
    color: #008556;
    text-align: right;
    /* border: 2px solid red; */
    font-size: 40px;
    font-family: 'Heimat Display';
    font-style: italic;
    line-height: 50px;
    letter-spacing: 2px;
    margin-top: 20px;
    margin-bottom: 0px;
    /* width: fit-content; */
}

.par2 {
    width: 33.33%;
    /* border: 2px solid yellow; */
    display: grid;
    align-content: center;
    padding: 0% 2% 0% 2%;
}

.par2 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    /* border: 2px solid red; */
}

.par2 a {
    margin-left: auto;
    margin-right: auto;
}
.par2 span {
    color: #008556;
    font-size: 23px;
    font-family: 'Acumin pro';
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
}


.par3 {
    width: 33.33%;
    /* border: 2px solid red; */
    display: grid;
    align-content: center;
    padding: 0% 2% 0% 2%;
}

.par3 img {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 100%;
}

.par3 a {
    margin-left: auto;
    margin-right: auto;
}
.par3 span {
    color: #008556;
    font-size: 23px;
    font-family: 'Acumin pro';
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* section-partners */
/* section-footer */
.footer {
    /* background:url('../image/bg-our-100.jpg'),
    linear-gradient(to right, red 50%, green 50%); */

    background: #008556;
    height: 64px;
    /* border: 2px solid greenyellow; */
    display: flex;
    justify-content: center;
}

.sec-foot {
    height: 100%;
    width: 980px;
}

.foot {
    /* background-color: #B6A0E8; */
    float: left;
    height: 100%;
    /* border:5px solid red; */
}

.foot1 {
    width: 50%;
    padding: 0% 0% 0% 0%;
    /* border: 2px solid red; */
    /* background-color: #ffffff; */

    display: grid;
    align-content: center;
}

.foot1 h {
    color: #ffffff;
    font-family: 'Heimat Display';
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 2px;
}




.foot2 {
    width: 50%;
    /* border: 2px solid red; */
    display: grid;
    /* align-content: center; */
    padding: 1% 0% 0% 0%;
    justify-content: end;
}


/* section-footer*/
/* scroll to top */
#myBtn {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 99;
    font-size: 25px;
    font-weight: 900;
    border: none;
    outline: none;
    background-color: #008556;
    border: #E8E76A 2px solid;
    color: #E8E76A;
    cursor: pointer;
    padding: 10px;
    border-radius: 35px;
}

#myBtn:hover {
    background-color: #E8E76A;
    color: #008556;
    border: #008556 2px solid;
}

/* scroll to top */
/* marquee */
.mq {
    background-color: #384BD7;
    height: 50px;
    display: flex;
    align-items: center;
}

marquee {
    font-size: 28px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 4px;
    color: #E8E76A;
    font-family: Acumin Pro;

}

#sec-marquee {
    background-color: #384BD7;
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 28px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 4px;
    color: #E8E76A;
    font-family: 'Acumin Pro';
}

#div1 {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

#div2 {
    display: inline-block;
    animation: marquee2 30s linear infinite;
    animation-delay: 15s;
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-200%);
    }
}

/* marquee */
/* image Slideshow */


/* image Slideshow */

.mySlides {
    display: none
}
.mySlides img {
    padding-top: 20px;
    height: 400px;
    /* border: #008556 solid 2px; */
    /* background-color: red; */
} 

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 10px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 5px;
    user-select: none;
    background-color: #71717190;
}

/* Position the "next button" to the right */
.next {
    right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: #717171;
}



/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 100%;
    display: none;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {

    .prev,
    .next,
    .text {
        font-size: 11px
    }
}