/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O                  PROMOTIONS                 O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°    Main container with large background   °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

#main-container.promotions{
	background-image:url(../images/products/products.jpg);
}

#main-container.promotions .global.promotions{
	padding-top:83px;
}

@media all and (max-width: 989px){
	#main-container.promotions .global.promotions{padding-top:20px;}
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                 Left text                 °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.promotions .left{
	width:252px;
	float:left;
	border-radius:2px;
	background:#fff;
	padding:43px 33px;
}

.promotions .left h2{
	font:700 49px / 49px 'Dancing Script', cursive;
	color:#f01724;
	padding:0 0 10px 0;
	letter-spacing:-1px;
}

.promotions .left p{
	font:700 31px / 34px 'Dancing Script', cursive;
	color:#411200;
	padding:34px 0 0 0;
}

@media all and (max-width: 989px){
	.promotions .left{width:629px; float:none; padding:25px 0 25px 25px; font-size:0; margin:0 auto 9px auto;}
	.promotions .left h2{font-size:21px; line-height:21px; display:inline-block; width:159px; padding:0; vertical-align:top;}
	.promotions .left .text{width:423px; display:inline-block;}
	.promotions .left p{font-size:21px; line-height:34px; padding:0;}
}

@media all and (max-width: 767px){
	.promotions .left{width:204px; padding:25px; font-size:0; margin:0 auto 23px auto;}
	.promotions .left h2{font-size:39px; line-height:39px; display:block; width:auto; padding:0 0 10px 0;}
	.promotions .left .text{width:auto; display:block;}
	.promotions .left p{font-size:24px; line-height:27px; padding:30px 0 0 0;}
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                Right block                °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.promotions .right{
	width:654px;
	float:right;
	border-radius:2px;
	overflow:hidden;
	background:#fff;
}

@media all and (max-width: 989px){
	.promotions .right{float:none; margin:0 auto;}
}

@media all and (max-width: 767px){
	.promotions .right{width:282px;}
}

/* .o° .o° .o° .o° .o° .o° First step °o. °o. °o. °o. °o. °o. */

.promotions .first-step{
	padding:11px 19px 0 19px;
}

/* blocks */

.promotions .first-step .block{
	padding:24px 0 27px 0;
}

.promotions .first-step .block:first-child{
	border-bottom:solid 1px #e7e5e5;
}

/* left red notice */

.promotions .first-step .notice{
	font:800 29px / 30px 'Open Sans', sans-serif;
	color:#fff;
	background:#f01724;
	position:relative;
	width:200px;
	padding:37px 23px;
	float:left;
}

.promotions .first-step .notice img{
	position:absolute; top:50%; right:-14px;
	margin-top:-18px;
}

/* already registered form */

.promotions .first-step form{
	display:inline-block;
	padding:0 0 0 28px;
	width:335px;
	float:left;
}

.promotions .first-step form .block-left{
	width:236px;
	float:left;
}

.promotions .first-step form input{
	width:236px;
	height:43px;
	border:solid 1px #c5c5c5;
	padding:0 12px;
	font:400 12px / 100% 'Open Sans', sans-serif;
	color:#411200;
	margin:12px 0 0 0;
	display:block;
}

.promotions .first-step form input::-webkit-input-placeholder{font-style:italic; opacity:1;}
.promotions .first-step form input::-moz-placeholder{font-style:italic; opacity:1;}
.promotions .first-step form input:-ms-input-placeholder{font-style:italic; opacity:1;}
.promotions .first-step form input:-moz-placeholder{font-style:italic; opacity:1;}

.promotions .first-step form button{
	width:50px;
	height:45px;
	border:solid 2px #e61a2b;
	border-radius:2px;
	background:#fff;
	text-transform:uppercase;
	font:400 16px / 20px 'Open Sans', sans-serif;
	color:#e61a2b;
	margin:69px 12px 0 0;
	cursor:pointer;
	float:right;
}

.promotions .first-step form button:hover{
	color:#fff;
	background:#e61a2b;
}

.promotions .first-step a{
	clear:both;
	font:400 italic 12px /12px 'Open Sans', sans-serif;
	color:#8d7166;
	text-decoration:underline;
	display:block;
	padding:8px 0 0 0;
}

/* not yet registered */

.promotions .first-step .right-notice{
	width:327px;
	float:left;
	padding:23px 0 0 28px;
	font:700 15px / 20px 'Open Sans', sans-serif;
	color:#411200;
	text-align:center;
}

.promotions .first-step .right-notice button{
	height:45px;
	padding:0 22px;
	border:solid 2px #e61a2b;
	border-radius:2px;
	display:inline-block;
	background:#fff;
	text-transform:uppercase;
	font:400 16px / 20px 'Open Sans', sans-serif;
	color:#e61a2b;
	margin:12px 0 0 0;
	cursor:pointer;
}

.promotions .first-step .right-notice button:hover{
	color:#fff;
	background:#e61a2b;
}

@media all and (max-width: 767px){
	.promotions .first-step{padding:5px 17px 12px 17px;}
	.promotions .first-step .block{padding:27px 0 20px 0;}
	.promotions .first-step .notice{width:auto; float:none; margin-bottom:35px;}
	.promotions .first-step .notice img{top:initial; bottom:-24px; right:initial; left:50%; margin-top:0; margin-left:-7px; transform:rotate(90deg);}
	.promotions .first-step form{display:block; padding:0; width:auto; float:none; text-align:center;}
	.promotions .first-step form input{width:224px; float:none; margin:6px 0 6px 0;}
	.promotions .first-step form button{float:none; margin:15px 0 0 0;}
	.promotions .first-step a{text-align:left; padding:0;}
	.promotions .first-step .right-notice{width:auto; float:none; padding:0;}
}

/* .o° .o° .o° .o° .o° .o° Second step : Form °o. °o. °o. °o. °o. °o. */

.promotions-form{
	background:url(../images/promotions/form-bg.png) no-repeat 420px 0 #e7e5e5;
	padding:10px 0 38px 19px;
	display:none;
}

.promotions-form .column{
	width:308px;
	float:left;
	padding:0 0 45px 0;
}

/* required fields */

.promotions-form p{
	font:400 italic 12px /12px 'Open Sans', sans-serif;
	color:#8d7166;
	padding:0 0 25px 0;
}

/* inputs */

.promotions-form input{
	width:236px;
	background:#fff;
	border:solid 1px #cac9c9;
	height:43px;
	padding:0 12px;
	font:400 12px / 100% 'Open Sans', sans-serif;
	color:#411200;
	margin:0 0 12px 0;
}

.promotions-form input::-webkit-input-placeholder{font-style:italic; opacity:1;}
.promotions-form input::-moz-placeholder{font-style:italic; opacity:1;}
.promotions-form input:-ms-input-placeholder{font-style:italic; opacity:1;}
.promotions-form input:-moz-placeholder{font-style:italic; opacity:1;}

/* radio buttons */

.promotions-form fieldset{
	border:none;
	font:italic 12px / 20px 'Open Sans', sans-serif;
	color:#411200;
	margin:0 0 15px 0;
}

.promotions-form fieldset legend{
	float:left;
}

.promotions-form fieldset label{
	float:left;
	padding:0 20px 0 36px;
	position:relative;
}

.promotions-form fieldset input[type="radio"]{
	position:absolute; left:10px; top:0px;
	border:none;
	line-height:20px;
	padding:0;
	background:none;
	margin:0;
	width:20px;
	height:20px;
	opacity:0;
}

.promotions-form fieldset img{
	position:absolute; left:10px; top:0px;
}

/* checkbox */

.promotions-form .checkbox-label{
	display:block;
	padding:0 0 0 40px;
	position:relative;
	font:italic 12px / 13px 'Open Sans', sans-serif;
	color:#411200;
	margin:16px 0 0 0;
}

.promotions-form input[type="checkbox"]{
	position:absolute; left:0;
	top: 0;
	border:none;
	line-height:27px;
	padding:0;
	background:none;
	margin:0;
	width:27px;
	height:27px;
	opacity:0;
}

.promotions-form .checkbox-label img{
	position:absolute; left:0; top:0;
}

/* submit */

.promotions .center-button{
	clear:both;
	text-align:center;
}

.promotions-form button{
	height:45px;
	padding:0 22px;
	border:solid 2px #e61a2b;
	border-radius:2px;
	text-transform:uppercase;
	font:400 16px / 20px 'Open Sans', sans-serif;
	color:#e61a2b;
	margin:12px 0 0 0;
	cursor:pointer;
	background:none;
}

.promotions-form button:hover{
	color:#fff;
	background:#e61a2b;
}

@media all and (max-width: 767px){
	.promotions-form{background-position:center top; padding:40px 0 24px 17px;}
	.promotions-form .column{width:auto; float:none; padding:0;}
	.promotions-form input{width:224px;}
	.promotions-form button{margin:24px 17px 0 0;}
}
