b,
strong,
.b {
    font-weight: 600;
}

dfn,
cite,
em,
i,
.i {
    font-style: italic;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.pulse {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: pulse;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin: auto;
}

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

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

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

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

.spacer {
    opacity: 0;
}

.h1 {
    color: #33a7a9;
    text-align: center;
}

.p {
    margin: 50px 0 0 0;
    text-align: center;
    font-weight: 300;
    width: 76%;
    text-align: justify;
    margin-top: -5px;
}


.pink {
    color: #c65c6c;
}

.white {
    color: #fff;
}

.dark {
    color: #4b4b4b;
}

.str-blue {
    color: #4c6d99;
    font-weight: 500;
}

::selection {
    background: #f58a8d;
    /* WebKit/Blink Browsers */
    color: #fff;
}

::-moz-selection {
    background: #f58a8d;
    /* Gecko Browsers */
    color: #fff;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.floater {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #d87381;
    border-radius: 5px;
    font-size: 14px;
    position: absolute;
}

    .floater ul {
        list-style-type: none;
        padding-left: 0px;
        margin-bottom: 0px;
    }

        .floater ul li {
            display: inline-block;
        }

    .floater .warning p {
        font-size: 16px;
        font-weight: 600;
    }

        .floater .warning p i {
            color: #d87381;
            font-size: 23px;
        }

    .floater .info {
        padding-right: 20px;
    }

        .floater .info p {
            margin-bottom: 0px;
        }

    .floater .close {
        position: absolute;
        top: 5px;
        right: 5px;
    }

        .floater .close p {
            font-size: 10px;
        }

    .floater strong {
        font-weight: 600;
        color: #d87381;
    }


.form-container {
    display: block;
}

.claim-hover {
    float: right;
    margin-top: -210px;
}

.navbar {
    padding: 7px 0px;
    font-size: 14px;
}

    .navbar li a {
        padding: 15px 25px;
    }

.navbar-default .navbar-nav > li > a.orange {
    color: #e64343;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.navbar-default .navbar-nav > li > a.green {
    color: #4c6d99;
}

.navbar-brand i:hover,
.navbar-brand i:focus {
    color: #4c6d99;
}

a,
i {
    transition: all 0.1s ease-in-out 0s;
}

.b01 {
    background-color: #e2e8f6;
    padding-top: 15px;
}

    .b01.mod1 {
        background: url("../img/banner1.jpg");
        background-repeat: no-repeat;
        background-position: 50% -5px;
        padding-top: 15px;
    }

.sprite {
    background-color: #D0D0D0;
    color: #000;
    display: block;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 32px;
    padding: 15px 0 25px 0;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

    .sprite.mod1 {
        background-color: #25d6de;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        color: #feffff;
        display: block;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: -1px;
        line-height: 32px;
        padding: 25px 0;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    .sprite .big {
        color: #0f5176;
        display: block;
        font-family: "Open Sans", sans-serif;
        font-size: 37px;
        font-weight: 800;
    }

.form-container {
    background: rgba(255, 255, 255, .8);
    padding: 10px 20px;
}

    .form-container input {
        margin: 6px auto;
        display: table-cell;
        width: 100%
    }

.cta {
    /* background-color: rgba(255, 255, 255, 0.5);
    background-image: url("../img/btn_border_bg.png");
    background-repeat: repeat;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;*/
    color: #fffefe;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    font-weight: 400;
    outline: medium none;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    display: block;
    margin-top: 20px;
    width: 70% !important;
    text-align: center;
    margin:20px auto;
}

button{
    background: none !important;
}

.form-container .button span {
    padding: 13px 10px 10px;
}


.cta span,
.cta span,
input[type="submit"] span {
    background: linear-gradient(to bottom, #82d359 0%, #5a9d37 100%) scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #549a2f;
    background-repeat: repeat;
    border: 1px solid;
    border-radius: 5px;
    display: inline-block;
    line-height: 22px;
    padding: 12px 10px;
    color: #fff;
}

.cta:hover > span,
.cta:focus > span,
.cta:hover > span,
.cta:focus > span,
input[type="button"]:hover > span,
input[type="button"]:focus > span,
.b01 input[type="submit"]:hover > span,
.b01 input[type="submit"]:focus > span {
    background: linear-gradient(to bottom, #5a9d37 0%, #82d359 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.cta span span,
.cta span span:hover {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    filter: none;
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 14px;
    padding: 0;
    text-shadow: none;
    text-transform: none;
    color: #fff;
}

.big-btn > span {
    padding: 10px 20%;
}

.b01 h1 {
    color: #525253;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -2px;
    margin-bottom: 12px;
}

    .b01 h1.mod1 {
        color: #fff;
        font-size: 40px;
        font-weight: 600;
        letter-spacing: -2px;
        margin-bottom: 12px;
    }

    .b01 h1 .big {
        font-size: 50px;
    }

    .b01 h1 .smaller {
        font-size: 30px;
    }


#outline {
    width: 70px;
    height: 70px;
    margin: 55px auto;
}

.c1 {
    border: 4px solid #dd676a;
}

.c2 {
    border: 4px solid #dd676a;
}

.c3 {
    border: 4px solid #dd676a;
}

.c4 {
    border: 4px solid #dd676a;
}

.serum {
    background-image: url("/images/prod1.png");
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    height: 262px;
    width: 381px;
    margin-left: 10%;
}

[class*="tt"] {
    cursor: pointer;
}

.serum > .tt02 {
    left: 230px;
    position: relative;
    top: 20px;
}

.serum > .tt03 {
    left: 150px;
    position: relative;
    top: 66px;
}

.serum > .tt04 {
    left: 210px;
    position: relative;
    top: 110px;
}


.shadow01 {
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.girl-bg > .tt05 {
    left: 231px;
    position: relative;
    top: 206px;
}

.girl-bg > .tt06 {
    left: 270px;
    position: relative;
    top: 235px;
}

.point-small {
    height: 30px;
    position: absolute;
    width: 30px;
    top: -70px;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

.pointer {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: -70px;
    background-color: rgba(255, 255, 255, .1);
}

.point {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55);
    display: block;
    height: 7px;
    left: 11px;
    position: absolute;
    top: 11px;
    width: 7px;
}


.arrow-container {
    background-image: url(../img/claim.png);
    width: 650px;
    height: 69px;
    color: #fff;
    font-size: 27px;
    text-align: center;
    padding-top: 15px;
    position: absolute;
    top: 521px;
    margin-top: 51px;
}


/*for back to top*/
.cd-top {
    position: fixed;
    right: 35px;
    bottom: 15px;
    color: #fff;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
}

    .cd-top.cd-is-visible {
        visibility: visible;
        opacity: 1;
    }


/*to arrow css*/
.side_arrow_up {
    height: 450px;
    position: absolute;
    right: 5px;
}

.side_arrow_up {
    top: 175px;
    transform: rotate(0deg);
    transition: all 0.5s ease 0s;
    width: 1px;
}

    .side_arrow_up img {
        height: 361px;
    }

div#side_arrow.side_arrow {
    position: absolute;
    right: 58px;
    top: 175px;
    transform: rotate(20deg);
    transition: all 0.5s ease 0s;
    width: 1px;
}

@media only screen and (max-width : 704px) {
    .ingred {
        display: block;
        margin: auto;
    }

    .ingre > div:nth-of-type(2) > h3 {
        text-align: center;
    }
}

/* to shine arrow*/
.shine {
    content: "";
    /* transform: skew(-20deg, 0deg); */
    position: absolute;
    /* width: 50px; */
    height: 70px;
    background-color: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    position: relative;
    -webkit-animation: mymove 1.5s infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation: mymove 1.5s infinite;
    animation-timing-function: ease-in-out;
    margin-top: -54px;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    width: 50px;
}


.pulse {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: pulse;
}

/*keyframe to shine arrow*/
@-webkit-keyframes mymove {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        opacity: 0.0
    }

    48% {
        opacity: 0.6
    }

    80% {
        opacity: 0.2
    }

    100% {
        left: 88%;
        opacity: 0.0
    }
}

@keyframes mymove {
    0% {
        left: 0;
        opacity: 0;
    }

    5% {
        opacity: 0.0
    }

    48% {
        opacity: 0.6
    }

    80% {
        opacity: 0.2
    }

    100% {
        left: 88%;
        opacity: 0.0
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.zindex-up {
    z-index: 99;
}

footer {
    background-color: #e2e2e2;
    padding-top: 20px;
    color: #333;
}

    footer a {
        color: #E36D94;
    }

.footer-links {
    list-style-type: none;
    padding-left: 0px;
    color: #fcc4d7;
}

    .footer-links li {
        display: inline-block;
        padding: 10px 30px;
    }

footer .call {
    color: #E36D94;
}

footer .brand {
    color: #333;
}

.mini-displayed {
    display: none;
}

.serum-small {
    display: none;
    margin: auto;
}

.logo-small {
    max-width: 180px;
    padding-left: 10px;
}

.serum-smaller {
    display: none;
    margin: auto;
    max-width: 50%;
}

/*blocks */
.b01 h1 {
    width: 200px;
}

.b02 {
    background: url('../img/bg-block02.jpg') top center no-repeat;
    background-size: cover;
}

    .b02.mod1 {
        background-image: url('../img/girl02.jpg');
        background-position: left top;
        background-repeat: no-repeat;
    }

.webp .b03 {
    background: url('../img/causes-bg.webp') top center fixed;
}


.b03 {
    background-size: cover !important;
}

.no-webp .b03 {
    background: url('../img/causes-bg.jpg') top center fixed;
}

.webp .b03 {
    background: url('../img/causes-bg.webp') top center fixed;
}

.no-js .b03 {
    background: url('../img/causes-bg.jpg') top center fixed;
}

.b03 h1 {
    color: #fff;
}


.b03 .container {
    background-image: url('../img/man01.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}

.cause {
    min-height: 200px;
    background: rgba(255, 255, 255, .5);
    padding: 10px;
    margin: 5px;
    color: #000 !important;
    font-size: 18px;
}

.blue-bg {
    background-color: #b6bbce;
    background-image: url('../img/blue-bg.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    color: #fff;
    background-size: cover;
    text-align: center;
}

.no-webp .blue-bg {
    background-image: url('../img/blue-bg.jpg');
}

.webp .blue-bg {
    background-image: url('../img/blue-bg.webp');
}

.no-js .blue-bg {
    background-image: url('../img/blue-bg.jpg');
}

.blue-bg.mod1 {
    background-color: #7ca6c0;
    background-image: url('../img/blue-bg2.jpg');
    background-position: right bottom;
    background-repeat: no-repeat;
    color: #fff;
    background-size: cover;
    text-align: center;
}

.step-box {
    max-width: 300px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: auto;
    padding: 20px;
    vertical-align: top;
}


#comment-slides {
    max-width: 500px;
    margin: auto;
}

.b05 .container {
    max-width: 850px;
}

.b05 {
    background-color: #b6bbce;
}

.comment-box p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.b06 {
    background-image: url('../img/bg-gradient02.jpg');
    background-position: center bottom;
    background-repeat: repeat-x;
}

    .b06.mod1 {
        background-image: url('../img/bg-gradient02b.jpg');
        background-position: center bottom;
        background-repeat: repeat-x;
    }

/*end blocks */

.form01 .field {
    position: relative;
    /* For the icon positioning */
}

    .form01 .field i {
        /* Size and position */
        left: 0px;
        top: 0px;
        position: absolute;
        height: 36px;
        width: 36px;
        /* Styles */
        color: #474747;
        text-align: center;
        line-height: 42px;
        transition: all 0.3s ease-out;
        pointer-events: none;
    }

    .form01 .field input,
    .form01 .field select {
        padding-left: 32px;
        text-indent: 5px;
    }


.form01 input:focus ~ i,
.form01 select:focus ~ i {
    color: #50b0ee;
}

.form01 input:focus,
.form01 select:focus,
.form01 input[type=submit]:focus {
    outline: none;
}

.smaller {
    font-size: 75%;
}

.text-muted {
    color: #999;
}

.top_form span {
    background: black none repeat scroll 0 0;
    margin: 1px;
    padding: 2px;
}

.top_form {
    background: #1361a5 none repeat scroll 0 0;
    color: white;
    font-family: arial;
    padding: 5px;
    text-align: center;
}

    .top_form.mod1 {
        background: #0a969c none repeat scroll 0 0;
        color: white;
        font-family: arial;
        padding: 5px;
        text-align: center;
    }

.container {
    position: relative;
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .b01 h1 {
        width: 200px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .navbar li a {
        padding: 15px 8px;
        font-size: 13px;
    }

    .footer-links li {
        padding: 10px 15px;
    }

    .claim-hover {
        display: none !important;
    }

    .b03 .container {
        background: none;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .comment-box {
        margin-left: 30px;
    }

    .b01.mod1 {
        background: url("../img/bg03b.jpg") no-repeat scroll 50% -40px rgba(0, 0, 0, 0);
        background-size: cover;
    }

    .b04 .cta,
    .b05 .cta {
        margin: auto;
        display: table;
    }

    .b07 .spacer {
        padding: 300px 0px 50px 0px;
    }

    .b06 {
        background-size: cover;
    }

    .b04 {
        min-height: 550px;
    }

    .floater,
    .logo-main {
        display: none;
    }

    .serum-small,
    .navbar {
        position: relative;
        margin-bottom: 0px;
    }

    body {
        padding: 0px;
    }

    .b01 h1 {
        width: auto;
    }

    .sprite {
        padding: 10px 0px;
        font-size: 22px;
    }

        .sprite .big {
            font-size: 35px;
        }

    .form-container input {
        margin: 3px auto;
    }

    .arrow.mod1 {
        transform: rotate(-90deg);
        width: 23%;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .shadow01 {
        max-width: 100%;
    }

    .steps {
        padding-left: 0px;
    }

    .step1,
    .step1:hover,
    .step2,
    .step2:hover,
    .step2,
    .step2:hover,
    .step3,
    .step3:hover {
        background: none;
    }

    .b02,
    .b02.mod1 {
        background: none;
    }

        .b02 ul > li {
            margin-top: 40px;
            min-height: 100px;
        }

    .comment-box {
        margin-left: 0px;
    }

        .comment-box .comment {
            max-width: 65%;
        }

    footer {
        margin-top: 10px;
    }

    .b01 .serum {
        display: none;
    }

    .b01 h1 {
        font-size: 22px;
        font-weight: 600;
        margin: 10px 0px;
    }

    .b01 h2 {
        font-size: 16px;
        margin: 10px 0px;
    }

    .lister {
        padding-left: 20px;
        font-size: 13px;
        font-weight: 600;
    }

        .lister li {
            margin-bottom: 10px;
        }

    .mini-displayed {
        display: block;
    }

    .b07 .serum-display {
        display: none;
    }

    .h1,
    .p {
        text-align: center;
        width: 100%;
    }

    .arrow.mod1 {
        transform: rotate(0deg);
    }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    .arrow.mod1 {
        transform: rotate(0deg);
    }
}

@media only screen and (min-width : 1024px) {
    .arrow.mod1 {
        transform: rotate(-90deg);
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

    .arrow-claim.mod1 {
        margin: auto !important;
        position: relative;
        bottom: 80px;
    }

    .arrow.mod1 {
        transform: rotate(-90deg);
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {

    .arrow-claim.mod1 {
        margin: auto !important;
        position: relative;
        bottom: -41px;
    }

    .arrow.mod1 {
        transform: rotate(-90deg);
    }
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
}

.d-blue {
    color: #0F5176 !important;
}

.trial01 {
    background: #0F5176;
    color: #fff;
    margin: 0;
    padding: 5px;
}

.form-control {
    background-color: #EFEFEF;
    background-image: none;
    border: 1px solid #c1c1c1;
    border-radius: 8px;
}