@charset "utf-8";
/* CSS Document */

/* Register / Create Account Page */
#registerpg { padding-bottom:0; }
.register-wrap { background:url(../images/bg-account-wrapper.jpg) 0 0 no-repeat; background-color:#f2e8d6; background-size:auto 100%; -webkit-background-size:auto 100%; padding:60px; } 
.register-wrap .reginner { background:url(../images/bg-account.jpg) 0 0 repeat; padding:50px 60px 30px; background-color:#f8f0dd; border:2px solid #636056; }
.register-wrap .reginner .toptitle { text-align:center; font-size:18px; line-height:24px; margin:0 0 40px; padding:0 20px; }
.register-wrap .reginner .toptitle h1 { font:bold 26px/28px "Times New Roman",serif; margin:0 0 15px; }
.register-wrap .reginner .toptitle a { text-decoration:underline; }
.register-wrap .forms { width:50%; float:right; padding:0 0 0 55px; }
.register-wrap .forms .sectitle { font-family:"Times New Roman", Times, serif; margin:0 0 5px 0; font-size:15px; line-height:18px; font-weight:bold; margin-bottom:15px; }
.register-wrap .forms .sectitle.second { margin-top:32px; }
.register-wrap .forms .sectitle .required { color:#c03333; font-size:11px; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
.register-wrap .forms .row { margin-bottom:15px; }
.register-wrap .forms .row label { margin-bottom:5px; display:block; }
.register-wrap .forms .row label > .redtxt { color:#c03333; margin-right:5px; }
.register-wrap .forms .row .error_message { color:red; font-size:11px; margin-top:5px; display:block; }
.register-wrap .forms .row select { width:100%; }
.register-wrap .forms .row .col-4.mid { width:23.33%; margin:0 5%; }
.register-wrap .forms .row .txt .redtxt { color:#c03333; }
.register-wrap .forms .terms .togglelang { margin:10px 0 5px; }
.register-wrap .forms .terms .togglelang a { display:inline-block; color:#777; font-size:11px; font-weight:bold; }
.register-wrap .forms .terms .togglelang a.active { cursor:default; color:#000; }
.register-wrap .forms .terms .togglelang .separator { display:inline-block; color:#777; }
.register-wrap .forms .terms .termsbox { height:260px; overflow:hidden; border:1px solid #CCC; background:#FFF; }
.register-wrap .forms .terms .termsbox .txtwrap { padding:10px 15px; display:none; }
.register-wrap .forms .terms .termsbox .txtwrap.selected { display:block; }

.register-wrap .rewardsbox { width:50%; position:relative; }
.register-wrap .rewardsbox .rewardswrap { border:2px solid black; background:#FFF; padding-bottom:50px; }
.register-wrap .rewardsbox .topimg { margin:0 10px; }
.register-wrap .rewardsbox .topimg img { max-width:100%; margin:0 auto; display:block; }
.register-wrap .rewardsbox .txtbox { max-width:240px; margin:0 auto; }
.register-wrap .rewardsbox .txtbox .maincopy { margin:15px -10px; text-align:center; font-size:14px; line-height:18px; } 
.register-wrap .rewardsbox .txtbox h2 { font-family:"Times New Roman", Times, serif; font-size:18px; font-weight:bold; border-top:1px dotted #d8492c; border-bottom:1px dotted #d8492c; padding:20px 0; margin:40px 0 25px; text-align:center; }
.register-wrap .rewardsbox .rewardspoints { margin:20px 0 20px 20px; }
.register-wrap .rewardsbox .rewardspoints > ul { list-style:disc;}
.register-wrap .rewardsbox .rewardspoints > ul > li { margin-bottom:15px; }
.register-wrap .rewardsbox .rewardspoints .rewards-terms { margin:30px -50px; font-size:11px; line-height:14px; font-style:italic; }
.register-wrap .rewardsbox .rewards-wing { margin-top:35px; }
.register-wrap .rewardsbox .rewards-wing img { max-width:100%; margin:0 auto; display:block; }
.register-wrap .rewardsbox .subterms { display:block; margin-top:5px; color:#999; font-size:11px; line-height:15px; }
.register-wrap .rewardsbox .txtbox .row { overflow:hidden; }
.register-wrap .rewardsbox .txtbox .row .col-11 { width:89.66%; margin-left:2%; }
.register-wrap .rewardsbox .newsletter-info { max-width:270px; margin:50px auto 0; }
.register-wrap .rewardsbox .newsletter-info h2 { font-size:20px; font-weight:bold; margin-bottom:20px; }
.register-wrap .rewardsbox .newsletter-info .subterms { color:#000; } 
.register-wrap .rewardsbox .newsletter-info a { text-decoration:underline; }
.register-wrap .btmnav { border-top:1px dotted #000; margin-top:30px; padding:30px 0; text-align:center; }


/* Sign In Page */
#loginpg .pcont-wrap { padding-top:40px; }
#loginpg .toptitle h1 { font:30px/35px "Times New Roman", Times, serif; margin-bottom:30px; }
#loginpg .loginbox { width:40%; border:1px solid #d4d4d4; background:#fafaf8; -webkit-box-shadow: #666 2px 2px 6px -1px; -moz-box-shadow: #666 2px 2px 6px -1px; box-shadow: #666 2px 2px 6px -1px; }
#loginpg .loginbox .loginboxwrap { padding:30px 40px 20px; }
#loginpg .loginbox .fieldslist label { display:none; }
#loginpg .loginbox .fieldslist .row { margin-bottom:20px; }
#loginpg .loginbox .fieldslist .error_message { margin:5px 0 0 0; display:block; }
#loginpg .loginbox .fieldslist .checkbox label { display:block; }
#loginpg .loginbox .fieldslist .checkbox .forgotpw { float:right; font-weight:bold; }
#loginpg .loginbox .fieldslist .checkbox input { float:left; margin-right:5px; }
#loginpg .loginbox .fieldslist .kbtn { width:100%; margin-bottom:15px; }
#loginpg .loginbox h2 { margin:0 0 15px; padding:0 0 15px; border-bottom:1px dotted #ccc; font:bold 20px/22px "Times New Roman", Times, serif; }
#loginpg .create-account-sec { margin:50px 0 10px; } 
#loginpg .create-account-sec > h2 { margin:0 0 15px; padding:0 0 15px; border-bottom:1px dotted #ccc; font:bold 20px/22px "Times New Roman", Times, serif; }
#loginpg .create-account-sec .txtbox { font-size:14px; line-height:20px; }
#loginpg .create-account-sec .txtbox p { margin-bottom:15px; }
#loginpg .create-account-sec .kbtn { margin-top:20px; }


/* Sign In Page Revamp */
#signinpg { padding-bottom:0; }
#signinpg .breadcrumb { margin-bottom:0; }
#signinpg .signin-wrap { background:url(../images/bg-account-wrapper.jpg) 0 0 no-repeat; background-color:#f2e8d6; background-size:100% auto; -webkit-background-size:100% auto; padding:60px; position:relative; } 
#signinpg .signin-wrap .reginner { background:url(../images/bg-account.jpg) 0 0 repeat; padding:50px 60px 90px; background-color:#f8f0dd; border:2px solid #636056; position:relative; }
#signinpg .kribbon { text-align:center; position:absolute; top:-40px; left:0; width:100%; } 
#signinpg .kribbon img { max-width:100%; }
#signinpg .date .mid { margin: 0 5%; width: 23.33%; }
#signinpg .sicontwrap { max-width:350px; margin:0 auto; position: relative; z-index: 10; }
#signinpg .friendskiehls { max-width:235px; margin:0 auto; display:block; }
#signinpg .friendskiehls img { max-width:100%; }
#signinpg .secheader { font-size: 30px; line-height:46px; font-family: "Times New Roman", Times, serif; margin-bottom: 10px; position: relative; text-align:center; overflow:hidden; margin:20px 0 10px; }
#signinpg .secheader:before, #signinpg .secheader:after { width:110px; height: 1px; background: #000; position: relative; left: -18px; top: -6px; display: inline-block; content: ""; }
#signinpg .secheader:after { right: -18px; left: auto; }
#signinpg .row { margin-bottom: 20px; }
#signinpg label { margin-bottom: 5px; display: block; }
#signinpg select { width:100%; }
#signinpg .subfields { font-size:11px; color:#4f4f4f; }
#signinpg .subfields .basic_checkbox { -webkit-appearance: checkbox !important; }
#signinpg .subfields .col-3 { max-width:25px; }
#signinpg .forgotpw { text-align:right; }
#signinpg .forgotpw a { text-decoration:underline; color:#4f4f4f; }
#signinpg .btmnav .kbtn { width:100%; margin-bottom:20px; }
#signinpg .btmlinks p { margin-bottom:10px; } 
#signinpg .btmdimgs .leftimg { position:absolute; left:0; bottom:0; }
#signinpg .btmdimgs .rightimg { position:absolute; right:0; bottom:0; }


/* Email Sign Up / Newsletter Subscription */
#newsletter-subscriptionpg { padding-bottom:0; }
#newsletter-subscriptionpg .breadcrumb { margin-bottom:0; }
#newsletter-subscriptionpg .nswrap { background:url(../images/bg-account-wrapper.jpg) 0 0 no-repeat; background-color:#f2e8d6; background-size:100% 100%; -webkit-background-size: 100% 100%; padding:60px; position:relative; } 
#newsletter-subscriptionpg .reginner { background:url(../images/bg-account.jpg) 0 0 repeat; padding:50px 60px 90px; background-color:#f8f0dd; border:2px solid #636056; position:relative; display:table; }
#newsletter-subscriptionpg .leftimg { width:40%; display:table-cell; vertical-align:middle; padding:0 30px 0 0; }
#newsletter-subscriptionpg .leftimg img { max-width:100%; }
#newsletter-subscriptionpg .sicontwrap { width:60%; display:table-cell; }
#newsletter-subscriptionpg .inner-sicontwrap { max-width:360px; margin:0 auto; }
#newsletter-subscriptionpg .secheader { font-size: 30px; line-height:46px; font-family: "Times New Roman", Times, serif; margin-bottom: 10px; position: relative; text-align:center; overflow:hidden; margin:20px 0 10px; }
#newsletter-subscriptionpg .secheader:before, #newsletter-subscriptionpg .secheader:after { width:70px; height: 1px; background: #000; position: relative; left: -18px; top: -6px; display: inline-block; content: ""; }
#newsletter-subscriptionpg .secheader:after { right: -18px; left: auto; }
#newsletter-subscriptionpg .row { margin-bottom: 20px; }
#newsletter-subscriptionpg label { margin-bottom: 5px; display: block; }
#newsletter-subscriptionpg select { width:100%; }
#newsletter-subscriptionpg .subfields { font-size:11px; color:#4f4f4f; }
#newsletter-subscriptionpg .subfields .col-3 { max-width:25px; }
#newsletter-subscriptionpg .btmnav .kbtn { width:100%; margin-bottom:20px; }


/* Friends of Kiehl's */
#friend-kiehlspg { padding-bottom:0; }
#friend-kiehlspg .breadcrumb { margin-bottom:0; }
#friend-kiehlspg .nswrap { background:url(../images/bg-account-wrapper.jpg) 0 0 no-repeat; background-color:#f2e8d6; background-size:100% auto; -webkit-background-size:100% auto; padding:60px; position:relative; } 
#friend-kiehlspg .nswrap .reginner { background:url(../images/bg-account.jpg) 0 0 repeat; padding:50px 30px 130px; background-color:#f8f0dd; border:2px solid #636056; position:relative; }
#friend-kiehlspg .kribbon { text-align:center; position:absolute; top:-40px; left:0; width:100%; } 
#friend-kiehlspg .kribbon img { max-width:100%; }
#friend-kiehlspg .btmdimgs .leftimg { position:absolute; left:0; bottom:0; }
#friend-kiehlspg .btmdimgs .rightimg { position:absolute; right:0; bottom:0; }
#friend-kiehlspg .toptxtwrap { margin:60px auto 50px; max-width:530px; font-size:18px; line-height:23px; text-align:center;  }
#friend-kiehlspg .toptxtwrap p { margin-top:20px; }
#friend-kiehlspg .toptxtwrap h1 { font-weight:bold; font-size:26px; line-height:30px; font-family:"Times New Roman", Times, serif; }
#friend-kiehlspg .pointslist { float:left; width:100%; }
#friend-kiehlspg .pointslist > li { position:relative; width:42%; float:left; margin:0 4%; height:150px; }
#friend-kiehlspg .pointslist > li .num { -webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px; width:32px; height:32px; line-height:32px; font-size:25px; text-align:center; font-family:"Times New Roman", Times, serif; color:#FFF; background:#fc2923; position:absolute; left:0; top:0; }
#friend-kiehlspg .pointslist > li .txtwrap { padding-left:50px; font-size:15px; line-height:22px; }
#friend-kiehlspg .pointslist > li .txtwrap em { color:#fc2923; font-weight:bold; }
#friend-kiehlspg .pointswrap .tnc { text-align:center; font-style:italic; line-height:18px; clear:both; max-width:90%; margin:0 auto; } 
#friend-kiehlspg .pointslist > li:nth-child(3), #friend-kiehlspg .pointslist > li:nth-child(4) { height:120px; }


/* Breakpoints */
@media only screen and (min-width:768px) and (max-width:1023px) {
	
	/* Register / Create Account Page */
	.register-wrap .reginner { padding:50px 20px 30px; }
	.register-wrap .forms { padding:0 0 0 20px; }
	.register-wrap .rewardsbox .rewardspoints .rewards-terms { margin:30px 0; }
	
	
	/* Friends of Kiehl's */
	#friend-kiehlspg .pointslist > li { height:170px; }
	#friend-kiehlspg .pointswrap .tnc { max-width:70%; }
}

@media only screen and (max-width:767px) {
	
	/* Register / Create Account Page */
	#registerpg { max-width:430px; }
	.register-wrap { background-image:none; padding:0; }
	.register-wrap .reginner { padding:40px 0 0; background-image:none; background-color:#f8f0dd; border:0; }
	.register-wrap .forms { width:100%; float:none; padding:0 20px 20px; }
	.register-wrap .rewardsbox { width:100%; margin:0; overflow:hidden; }
	.register-wrap .reginner .toptitle { font-size:15px; line-height:20px; }
	.register-wrap .rewardsbox .rewardswrap { margin-top:140px; border-left:0; border-right:0; border-bottom:0; } 
	.register-wrap .rewardsbox .newsletter-info { position:absolute; top:0; max-width:100%; padding:0 20px; margin-top:20px; width:100%; }
	.register-wrap .btmnav { border-top:0; margin-top:0; background:#FFF; padding:0 0 50px; }
	.register-wrap .btmnav .kbtn { width:90%; }
	.register-wrap .rewardsbox .txtbox { max-width:90%; }
	.register-wrap .rewardsbox .rewardspoints .rewards-terms { margin:30px 0; }
	.register-wrap .rewardsbox .topimg { margin:0 20px; }
	
	
	/* Sign In Page */
	#loginpg .pcont-wrap { padding-top:20px; }
	#loginpg .loginbox { width:auto; margin-left:-20px; margin-right:-20px; border:0; border-top:1px solid #CCC; }
	#loginpg .toptitle h1 { font-size:24px; line-height:30px; margin-bottom:20px; }
	#loginpg .loginbox .loginboxwrap { padding:30px 20px; }
	#loginpg h2 { font-size:23px !important; line-height:25px !important; } 
	#loginpg .create-account-sec { margin:30px 0 20px; }
	#loginpg .create-account-sec .kbtn { width:100%; margin-top:10px; }
	
	
	/* Sign In Page Revamp */
	#signinpg { width:100%; }
	#signinpg .signin-wrap { background-image:none; padding:0; background-color:#f8f0dd; }
	#signinpg .signin-wrap .reginner { padding:20px 0 0; /*background-image:none; background-color:#f8f0dd; */border:0; }	
	#signinpg .kribbon { max-width:300px; position:initial; margin:0 auto; }
	#signinpg .friendskiehls { max-width:190px; margin-top:-20px; }
	#signinpg .sicontwrap { padding:0 20px; }
	#signinpg .btmdimgs img { max-width:100%; }
	#signinpg .secheader:before, #signinpg .secheader:after { width:70px; }
	
	
	/* Email Sign Up / Newsletter Subscription */
	#newsletter-subscriptionpg .nswrap { background-image:none; padding:0; background-color:#f8f0dd; }
	#newsletter-subscriptionpg .nswrap .reginner { padding:20px; border:0; width:100%; display:block; }	
	#newsletter-subscriptionpg .leftimg { width: 100%; display:block; padding:0; }
	#newsletter-subscriptionpg .leftimg img { max-width:280px; margin:0 auto; }
	#newsletter-subscriptionpg .sicontwrap { width: 100%; display:block; }
	#newsletter-subscriptionpg .secheader:before, #newsletter-subscriptionpg .secheader:after { width:40px; }
	#newsletter-subscriptionpg .secheader { margin-top:0; }
	
	
	/* Friends of Kiehl's */
	#friend-kiehlspg .nswrap { background-image:none; padding:0; background-color:#f8f0dd; position:relative; }
	#friend-kiehlspg .nswrap .reginner { padding:20px 0 0; border:0; width:100%; display:block; }	
	#friend-kiehlspg .pointslist > li { height:auto !important; width:100%; margin:0 0 20px; }
	#friend-kiehlspg .pointswrap .tnc { max-width:100%; }
	#friend-kiehlspg .kribbon { max-width:300px; position:initial; margin:0 auto; }
	#friend-kiehlspg .btmdimgs img { max-width:100%; }
	#friend-kiehlspg .toptxtwrap { margin:20px auto; font-size: 15px; line-height:18px; }
	#friend-kiehlspg .toptxtwrap p { margin-top:10px; }
	#friend-kiehlspg .sicontwrap { padding:0 20px; }
	#friend-kiehlspg .pointslist > li .txtwrap { font-size:14px; line-height:20px; }
}