@import 'typo.css';

html, body {
    padding: 0;
    margin: 0;
    color: #45464d;
    letter-spacing: -1px;
}

.section {
    background-image: url(../images/clean_bg.jpg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid white;
    min-height: 550px;
}
.section .section-header {
    overflow: hidden;
}
.section .section-header .section-title {
    color: #1c56c2;
    font-family: 'Roboto-Thin';
    font-size: 60px;
    overflow: hidden;
}
.section .section-header .section-info-line {
    float: right;
    border-bottom: 1px solid #1c56c2;
    font-size: 17px;
    padding-top: 42px;
    font-family: 'Roboto-Light';
}
.section ul.product-info-content li {
    padding-top: 5px;
    padding-bottom: 5px;
}
.section ul.product-info-content .name {
    color: #1c56c2;
    font-size: 50px;
    font-family: 'Roboto-Thin';
    line-height: normal;
}
.btn {
    position: relative;
    background: #ff4f76;
    background: -moz-linear-gradient(left, #ff4f76 0%, #ff283c 100%);
    background: -webkit-linear-gradient(left, #ff4f76 0%,#ff283c 100%);
    background: linear-gradient(to right, #ff4f76 0%,#ff283c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4f76', endColorstr='#ff283c',GradientType=1 );
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    color: white;
    font-size: 25px;
    font-family: 'Roboto-Light';
    border: none;
    border-radius: 0;
    border: 1px solid white;
    padding: 10px 35px;
    letter-spacing: initial;
}

.arrow-top {
    height: 25px;
    background-image: url(../images/arrow-top.png);
    /*background-size: 6%;*/
    background-repeat: no-repeat;
    background-position: center top;
}
.text-white {color: white;}
.text-black {color: black;}
.text-green {color: #44a600;}
ul {
    list-style: none;
    margin-left: -20px;
}

/*top*/
.section.top-container {
   /* background-image: url(../images/header_simple_bg.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 550px;
    color: #ffffff;
    position: relative;
}
.top-container .inside-content {
    background: url(../images/c20_header.png), url(../images/c20_girl_bg.png);
    background-repeat: no-repeat;
    background-position: 8% center, 94%;
    background-size: 590px, 520px;
    height: 550px;
    position: relative;
}


.section.top-container2 {
    /*background-image: url(../images/header_simple_bg.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 550px;
    color: #ffffff;
    position: relative;
	display:none;
}
.top-container2 .inside-content2 {
    background:  url(../images/c20_girl_bg.png);
    background-repeat: no-repeat;
    background-position:  center;
    background-size: 390px, 295px;
    height: 550px;
    position: relative;
}



.top-container .title-content {
    position: absolute;
    bottom: 0;
    left: 15%;
}
.top-container .title {
    width: 280px;
    font-size: 75px;
    font-family: 'Roboto-Light';
    line-height: 1;
}
.top-container .info {
    font-size: 40px;
    font-family: 'Roboto-Light';
}
/*top END


/*lemon*/
.lemon-container .header {
    color: #023393;
    padding-left: 4%;
    margin-top: 25px;
}
.lemon-container .header .title {
    font-size: 75px;
    font-family: 'Roboto-Light';
    line-height: 1;
}
.lemon-container .header .info {
    font-size: 40px;
    font-family: 'Roboto-Regular';
}
.lemon-container .lemon img {
    max-width: 80%;
    margin: 0 auto;
    padding: 2% 0 10% 0px;
}
.lemon-container .info-group ul {
    color: #023393;
}
.lemon-container .info-group {
    padding-top: 14%;
}
.lemon-container .info-group ul .checked {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    background: url(../images/check.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.lemon-container .info-group ul .content .top {
    font-size: 44px;
    font-family: 'Roboto-Light';
    line-height: 40px;
    padding-top: 3px;
}
.lemon-container .info-group ul .content .info {
    font-size: 17px;
    font-family: 'Roboto-Regular';
    line-height: 10px;
    color: #585960;
}
.lemon-container .info-group ul li {
    width: 100%;
    padding-bottom: 25px;
}
/*lemon END*/

/*vitamin*/
.vitamin-container .header {
    color: #023393;
    margin-top: 40px;
}
.vitamin-container .header .title {
    font-size: 75px;
    font-family: 'Roboto-Light';
    line-height: 1;
}
.vitamin-container .header .info {
    font-size: 40px;
    font-family: 'Roboto-Regular';
}
.vitamin-container .vitamin {
    margin-top: 76px;
}
.vitamin-container .vitamin img {
    max-width: 50%;
    margin: 0 auto;
}
.vitamin-container .info-content {
    color: #585960;
    font-size: 25px;
    font-family: 'Roboto-Light';
    margin: 50px 0;
}
.vitamin-container .info-content .enhancement {
    color: #023393;
}
/*vitamin END*/


/*conten*/
.conten-container .section-info-line {
    width: 42%;
}
.conten-container .section-title {
    width: 57%;
}
.technology img {
    max-width: 70%;
}
.technology .section-header {
    padding-bottom: 55px;
}
.technology .desc {
    font-family: 'Roboto-Light';
}
.technology .desc .title {
    font-size: 32px;
}
.technology .desc .info {
    font-size: 15px;
    line-height: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
}
.technology .ceramide .desc .info {
    width: 65%;
}
.technology .hyaluron .desc .info {
    width: 75%;
}
.technology .peptid {
    padding-top: 5%;
}
.technology .peptid .bottom-desc {
    position: absolute;
    bottom: -55%;
    left: 0;
    width: 80%;
}
/*conten END*/



/*thee-section*/
.thee-section .header {
    color: #023393;
    margin-top: 40px;
}
.thee-section .info-content {
    padding-left: 5%;
}
.thee-section .header .title {
    font-size: 50px;
    font-family: 'Roboto-Light';
    line-height: 1;
}
.thee-section .header .title .extra {
    font-size: 80px;
}
.thee-section .header .info {
    font-size: 50px;
    font-family: 'Roboto-Light';
}
.thee-section .info {
    font-family: 'Roboto-Light';
    font-size: 24px;
    padding-bottom: 15px;
}
.thee-section .content {
    margin-top: 80px;
}
.thee-section img {
    max-width: 80%;
}
/*thee-section END*/

.all-supply-container h4 {
    padding-top: 20px;
    padding-bottom: 25px;
    font-family: 'Roboto-Light';
    font-size: 32px;
}

.row a.btn:hover {
    background: #e1004e;
    background: -moz-linear-gradient(left, #e1004e 0%, #da2c68 100%);
    background: -webkit-linear-gradient(left, #e1004e 0%,#da2c68 100%);
    background: linear-gradient(to right, #e1004e 0%,#da2c68 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1004e', endColorstr='#da2c68',GradientType=1 );
    color: white;
}
.footer-section {
    background: #d4ddf0;
    background: -moz-linear-gradient(top, #d4ddf0 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #d4ddf0 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #d4ddf0 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4ddf0', endColorstr='#ffffff',GradientType=0 );
    transition: all 1s linear;
    border-bottom: 1px solid white;
}
/*btn setup*/
.footer-section p {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 32px;
    font-family: 'Roboto-Light';
}
.footer-section .btn, .footer-section a.btn:hover {
    background: none;
    border: none;
}



/*grid*/
@media all and (max-width: 1400px) {
    
}
@media all and (min-width: 1300px) {

}
/*MD*/
@media all and (max-width: 1200px) {
    .top-container .inside-content {
        background-position: 0% center, 100%;
        background-size: 565px, 434px;
    }
	

    
    
    .lemon-container .header .title {
        font-size: 70px;
    }
    .lemon-container .header .info {
        font-size: 38px;
    }
    .lemon-container .info-group ul .content .top {
        font-size: 40px;
    }
    .lemon-container .info-group ul .checked {
        width: 55px;
        height: 55px;
        margin-right: 10px;
    }
    .lemon-container .info-group ul li {
        padding-bottom: 15px;
    }
    .lemon-container .info-group {
        padding-top: 9%;
    }
    .lemon-container .lemon img {
        max-width: 95%;
        margin: 0 auto;
        padding: 10% 0 10% 0px;
    }
    
    .vitamin-container .vitamin img {
        max-width: 47%;
    }
    
    .thee-section img {
        max-width: 105%;
        margin-left: -30px;
    }
}
@media all and (max-width: 1000px) {
	.section.top-container2  {
display:block;
}
}

/*SM*/
@media all and (max-width: 992px) {

.section.top-container2  {
display:block;
}

    .section {
        background-image: url(../images/clean_mobile_bg.jpg);
    }

    .top-container .inside-content {
        background: url(../images/c20_header.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
    }
    
    .vitamin-container .header .info {
        font-size: 34px;
    }
    .vitamin-container .vitamin img {
        max-width: 28%;
        margin-top: -70px;
        margin-bottom: 25px;
    }

    .lemon-container .header, .vitamin-container .header {
        text-align: center;
    }
    .lemon-container .info-content {
        width: 475px;
        margin: 0 auto;
    }
    .lemon-container .lemon img {
        max-width: 45%;
        padding: 25px 0;
    }
    
    .thee-section .content {
        margin-top: 20px;
    }
    .thee-section .info-content {
        padding-left: 0;
        text-align: center;
        width: 375px;
        float: none;
        margin: 0 auto;
        padding-bottom: 25px;
    }
    .thee-section img {
        max-width: 60%;
        margin: 0 16%;
    }
}
/*XS*/
@media all and (max-width: 767px) {

.top-container2 .inside-content2 {
    background:  url(../images/c20_girl_bg.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: 350px, 245px;
    height: 550px;
    position: relative;
}

}
@media all and (max-width: 600px) {
    .top-container .title-content {
        width: 100%;
        left: 0;
    }
}
@media all and (max-width: 500px) {
    .lemon-container .info-content {
        width: auto;
    }
    ul {
        margin-left: -50px;
    }
    .lemon-container .info-group ul .content .top {
        font-size: 30px;
    }
    .lemon-container .info-group ul .checked {
        width: 45px;
        height: 45px;
        margin-right: 5px;
    }
    .lemon-container .info-group ul li {
        padding-bottom: 10px;
    }
}
@media all and (max-width: 400px) {
    .top-container .title, .lemon-container .header .title, .vitamin-container .header .title {
        font-size: 15vw;
    }
    .top-container .info {
        font-size: 10vw;
    }
    .lemon-container .header .info, .vitamin-container .header .info {
        font-size: 8vw;
    }
    .vitamin-container .info-content, .thee-section .info, .btn, .thee-section .header .info {
        font-size: 6vw;
    }
    .thee-section .header .title {
        font-size: 9vw;
    }
    .thee-section .header .title .extra {
        font-size: 13vw;
    }
    .lemon-container .info-group ul .content .top {
        font-size: 9vw;
        line-height: 6vw;
    }
    .lemon-container .info-group ul .content .info {
        font-size: 4vw;
    }
    .lemon-container .info-group ul .checked {
        width: 9vw;
        height: 9vw;
    }
    .thee-section .info-content, .top-container .title {
        width: auto;
    }
    
    .section.top-container, .top-container .inside-content {
        height: 435px;
    }
    .section {
        min-height: 435px;
    }
}
/*grid end*/