/* LESS Document */
@import "elements.less";
@import "config.less";

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: @bg-color-peach;
}
::-moz-placeholder { /* Firefox 19+ */
  color: @bg-color-peach;
}
:-ms-input-placeholder { /* IE 10+ */
  color: @bg-color-peach;
}
:-moz-placeholder { /* Firefox 18- */
  color: @bg-color-peach;
}

.nc_main_container{
	.big_wrapper{
		position:relative;
		overflow:hidden;
	}
	.vidaloka;
	max-width:1024px;
	margin:0 auto;
	color:@font-color-brown;
	overflow:hidden;
	position:relative;
	.imagebtn{
		position:relative;
		img{
			position:absolute;
			top:0;
			left:0;
		}
		img.normal{
			display:block;
		}
		img.hover{
			display:none;
		}
	}
	.imagebtn:hover{
		img.normal{
			display:none;
		}
		img.hover{
			display:block;
		}	
	}
	.hideforce{
		visibility:hidden;
	}
	.pfl-container{
		height:35px;
		width:100%;
		text-align:center;
		background:@bg-color-purple;
		position:fixed;
		color:@font-color-white;
		font-size:12px;
		line-height:20px;
		padding:7.5px 0px;
		bottom: 0;
		left: 0;
		z-index: 22;
		span:first-child{
			margin-right:10px;
		}
		.pfl-close{
			position:absolute;
			top:0px;
			line-height:20px;
			font-size:12px;
			text-transform:uppercase;
			right:10px;
			top:7.5px;
			a{
				color:@font-color-white;
				text-decoration:none;
				-webkit-transition: all .2s ease-out;
				-moz-transition: all .2s ease-out;
				-o-transition: all .2s ease-out;
				transition: all .2s ease-out;
			}
			a:hover, a:active{
				opacity:0.5;	
			}
			span{
				font-size:13px;
				line-height:20px;
			}
		}
	}
	.landingpage{
		width:100%;
		height:100vh;
		position:relative;
		.page_inner{
			position:absolute;
			width:100%;
			height:100%;
			background-image:url(../images/bg2.jpg);
			background-size:cover;
			.cont_shadow{
				width: 316px;
				height: 316px;
				position: absolute;
				margin-left: -157px;
				margin-top: -179px;
				left:50%;
				top:50%;
				.rounded(100%);
			    box-shadow: 0px 0px 60px -10px rgba(0, 0, 0, 0.75);
			    -webkit-transition: box-shadow .4s;
			    transition: box-shadow .4s;
			}
			.cont_shadow:hover{
				-webkit-transition: box-shadow 0s;
				transition: box-shadow 0s;
				box-shadow: 0px 0px 60px -10px rgba(0, 0, 0, 0.75);
			}
			.cont{
				width:340px;
				height:380px;
				position:absolute;
				margin-left:-170px;
				margin-top:-240px;
				left:50%;
				top:50%;
				cursor:pointer;
				.booster{
					display:none;
					width:170px;
					height:75px;
					top: 3px;
					left: 55%;
					position:absolute;
					img{
						position:absolute;
						top:0;
						left:0;
					}
				}
				.img1, .img2{
					position:absolute;
					top:0;
					left:0;
				}
				.img1{
					display:block;
				}
				.img2{
					display:none;
				}
			}
			.cont.open{
				.img2{
					display:block;
				}
			}
			.cont.withbooster{
				.booster{
					display:block;
				}
			}
		}
	}	
	.landingpage::after{
		content:"";
		display:block;
		padding-top:100%;
	}
	.winnerpage{
		background-image:url(../images/bg3.jpg);
		background-size:cover;
		min-height:700px;	
		padding-bottom:50px;
		.topsection{
			padding-top: 142px;
			margin: 0 auto;
			width: 90%;
			max-width: 760px;
			.leftsection{
				width:30%;
				float:left;
				img{
					
				}
				.mobiletext{
					display:none;
				}
			}
			.rightsection{
				width:70%;
				float:left;
				.wincard_cont{
					width:185px;
					height:300px;
					background:url(../images/grandprize.png);
					float:left;
					margin:0 10px;
					position:relative;
					.profileimage{
						width:85px;
						height:85px;
						margin:32px auto 0;
						background:url(../images/pp_b.png);
						position:relative;
						.user{
							display:block;
							position:absolute;
							float:left;
							width:83px;
							height:83px;
							.rounded(100%);
							top:1px;
							left:1px;
							img{
								position:absolute;
								left:0;
								top:0;
								width:83px;
								height:83px;
								.rounded(50%);
							}
							.hover{
								background:rgba(0,0,0,0.55);
								width:83px;
								height:83px;
								padding:10px;
								position:absolute;
								top:0;
								left:0;
								.rounded(50%);
								overflow:hidden;
								display:none;
							}
							.hover span{
								font-size:0.9em;
								color:#fff;
								display:table-cell;
								text-align:center;
								vertical-align:middle;
								word-wrap:break-word;
								text-transform:none;
								position:static;
								width:auto;
							}
						}
						.user:hover .hover{
							display:table;
						}
					}
					.profileimage.empty{
						width:130px;
						height:110px;
						background:url(../images/pp_a.png);
						margin:10px auto 0;
					}
					.claim_code{
						position:absolute;
						width:140px;
						text-align:center;
						background:@font-color-white;
						color:@font-color-red;
						.rounded(10px);
						font-size:3rem;
						top:150px;
						left:24px;
						.note{
							color:@font-color-brown;
							width:110px;
							position:absolute;
							top:57px;
							right:110%;
							.caveat;
							font-size:2rem;
							line-height:1;
						}
						.note::before{
							content:" ";
							display:block;
							position:absolute;
							top:-50px;
							right:-9px;
							width:45px;
							height:45px;
							background:url(../images/booster3.png);
						}
					}
					.claimed{
						position:absolute;
						top:140px;
						left:11px;
						width:165px;
						height:65px;
						background:url(../images/claimed.png);
					}
					.description{
						padding: 100px 20px 0;
						color: #fff;
						.caveat;
						text-align: center;
						font-size: 2rem;
						line-height: 1;
					}
				}
				.wincard_cont.orange{
					background:url(../images/prizesample.png);
					.claim_code{
						.note{
							color:@font-color-brown;
							width:110px;
							position:absolute;
							top:57px;
							left:110%;
						}
						.note::before{
							content:" ";
							display:block;
							position:absolute;
							top:-50px;
							left:-9px;
							background:url(../images/booster2.png);
						}
					}
				}
			}
			.rightsection:after{
				content:"";
				display:block;
				clear:both;
			}
		}
		.topsection:after{
			content:"";
			display:block;
			clear:both;
		}
		.bottomsection{
			width:90%;
			max-width:760px;
			margin:20px auto;
			.headsection{
				.border-radius(20px, 0, 0, 20px);
				background:@bg-color-orange;
				color:@font-color-white;
				padding:20px;
				text-align:center;
				font-size:2.5rem;
				.nc_icon{
					display:inline-block;
					width:15px;
					height:15px;
					margin-left:5px;
					margin-right:5px;
					background:url(../images/icon7.png);
				}
			}
			.bodysection{
				.border-radius(0, 20px, 20px, 0);
				background:@bg-color-peach;
				padding:20px 80px;
				position:relative;
				.winners{
					min-height:200px;
					text-align:left;
					margin:0 auto;
					position:relative;
					.winner{
						float:left;
						color:@font-color-red;
						.opacity(0.7);
						text-align:center;
						display:inline-block;
						width:20%;
						padding:5px;
						border-bottom:dashed 1px @font-color-red;
						text-decoration:none;
						white-space: nowrap; 
					    overflow: hidden;
					    text-overflow: ellipsis; 
					}
					.winner:hover{
						.opacity(1);
					}
				}		
				.winners:after{
					content:"";
					display:block;
					clear:both;
				}
				.leftbutton, .rightbutton{
					position:absolute;
					top:50%;
					width:60px;
					height:60px;
					margin-top: -30px;
				}
				.leftbutton{
					left:10px;
				}
				.rightbutton{
					right:10px;
				}
			}
		}
	}
	.appicon{
		width:150px;
		height:90px;
		background:url(../images/appicon.png);
		position:absolute;
		top:30px;
		left:30px;
	}
	.footer_logo{
		width:150px;
		height:50px;
		background:url(../images/etudelogo.png);
		position:absolute;
		bottom:10px;
		right:30px;
	}
	.chance_cont{
		width:150px;
		height:150px;
		background:url(../images/chance.png);
		position:absolute;
		top: 131px;
		left: 38px;
		.number{
			display: block;
			position: absolute;
			top: 28px;
			left: 40px;
			width: 110px;
			text-align: center;
			font-size: 8rem;
			line-height: 1;
			.caveat;
			color:@font-color-white;
		}
		.label{
			display: block;
			position: absolute;
			top: 96px;
			left: 45px;
			width: 110px;
			text-align: center;
			font-size: 2rem;
			line-height: 1;
			.caveat;
			color:@font-color-white;
		}
	}
	.cta_btn{
		display:inline-block;
		width:180px;
		height:45px;
		text-align:center;
		color:@font-color-white;
		position:relative;
		line-height:45px;
		text-decoration:none;
		margin:0 10px;
		font-size: 2rem;
		.caveat;
		border: none;
		outline: none;
		cursor:pointer;
	}
	.cta_btn{
		background:url(../images/button.png);
	}
	.cta_btn:hover, .cta_btn.active{
		background:url(../images/button_hover.png);
		span::before, span::after{
			display:block;
		}
	}
	.cta_btn span{
		position:relative;
	}
	.cta_btn span::before{
		content:"";
		display:none;
		width:25px;
		height:15px;
		background:url(../images/buttonsparka.png);
		position:absolute;
		margin-top:-7px;
		top:50%;
		right:110%;
		-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.cta_btn span::after{
		content:"";
		display:none;
		width:25px;
		height:15px;
		background:url(../images/buttonsparkb.png);
		position:absolute;
		margin-top:-7px;
		top:50%;
		left:110%;	
		-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .5s;
		animation-duration: .5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.menu_bar{
		position:absolute;
		top:30px;
		right:30px;
		text-align:center;
	}
	.popbg{
		position:absolute;
		z-index:102;
		width:100%;
		height:100%;
		top:0;
		background-color:fade(#000,80%);
		overflow:hidden;
		.popcontainer{
			position:relative;
			width:100%;
			height:100%;
		}

		.popoutbox{
			position:relative;
			margin:0 auto;
			top:0;
			.title{
				width:93%;
				margin:10px auto 30px;
				h1{
					font-size: 3.5rem;
					margin-top: 0;
    				margin-bottom: .5rem;
					text-align:center;
				}
				h2{
					font-size: 2rem;
					margin-top: 0;
    				margin-bottom: 0;
					text-align:center;
				}
			}
			.closebtnbox{
				position:absolute;
				left: 50%;
				top: 57px;
				a{
					display:block;
					width:60px;
					height:60px;
					position: relative;
					left: 122px;
				}
			}
		}

		.registrationprompt{
			.icon{
				display:block;
				width:225px;
				height:170px;
				margin:0 auto;
				background:url(../images/icon1.png);
			}
			.input-text{
				border:none;
				padding:15px 40px;
				width:200px;
				.rounded(50px);
				outline: none;
			}
			.input-text.long{
				width:300px;
			}
			.nc_row{
				width:80%;
				margin:20px auto 10px;
				.input_cnt{
					float:left;
					width:50%;
				}
			}
			.nc_row::after{
				content:"";
				display:block;
				clear:both;
			}
			.errormsg{
				color:@bg-color-red;
				font-size:1.2rem;
			}
			.errormsg.hide{
				display: block !important;
				visibility: hidden;
			}
			.btn_cnt{
				margin:10px auto;
			}
		}

		.exhuastedprompt{
			.icon{
				display:block;
				width:225px;
				height:170px;
				margin:0 auto;
				background:url(../images/icon2.png);
			}
			.button_cont{
				text-align:center;
			}
			.bonus_fans{
				text-align:left;
				font-size:1.2rem;
				margin:10px auto;
				width:80%;
				position:relative;
				.pp{
					display:block;
					position: relative;
					top: 7px;
					margin-left: 2px;
					float:left;
				}
				.bonus_fans_image, .bonus_fans_text{
					float:left;
				}
				.dynamic_friends_number{
					
				}
				.dynamic_friends_number:hover{
					text-decoration:none;
				}
			}
			.bonus_fans:after{
				clear:both;
				content:'';
				display:block;	
			}
			.share-intro{
				text-align: center;
			    font-size: 2.2rem;
			    line-height:1;
			    margin:20px auto 10px;
			    width:75%;
			    .caveat;
			    color:@bg-color-red;
			}
			.pp1{
				.bonus_fans_image{
					width:29px;
				}
				.bonus_fans_text{
					width:calc(~" 100% - 29px");
					padding:13px 0 0 5px;
				}
			}
			.pp2{
				.bonus_fans_image{
					width:56px;
				}
				.bonus_fans_text{
					width:calc(~" 100% - 56px");
					padding:13px 0 0 5px;
				}
			}
			.pp3{
				.bonus_fans_image{
					width:83px;
				}
				.bonus_fans_text{
					width:calc(~" 100% - 83px");
					padding:13px 0 0 5px;
				}
			}
			.pp4{
				.bonus_fans_image{
					width:110px;
				}
				.bonus_fans_text{
					width:calc(~" 100% - 110px");
					padding:4px 0 0 5px;
				}
			}
			.pp5{
				.bonus_fans_image{
					width:137px;
				}
				.bonus_fans_text{
					width:calc(~" 100% - 137px");
					padding:4px 0 0 5px;
				}
			}
		}

		.winprompt{
			.main_cont{
				.icon{
					display:block;
					width:300px;
					height:250px;
					margin:0 auto;
					background:url(../images/icon3.png);
					background-repeat:no-repeat;
					background-position:center bottom;
				}
				.button_cont{
					margin:30px auto;
					text-align:center;
				}
			}
		}

		.loseprompt{
			.main_cont{
				.icon{
					display:block;
					width:225px;
					height:250px;
					margin:0 auto;
					background:url(../images/icon4.png);
					background-repeat:no-repeat;
					background-position:center bottom;
				}
				.button_cont{
					margin:30px auto;
					text-align:center;
				}
			}
		}

		.acknowledgementprompt{
			.main_cont{
				.icon{
					display:block;
					width:225px;
					height:200px;
					margin:0 auto;
					background:url(../images/icon5.png);
					background-repeat:no-repeat;
					background-position:center bottom;
				}
				.title{
					margin-bottom:15px;
				}
				.whisper{
					.caveat;
					color:@font-color-red;
					width:90%;
					font-size:1.6rem;
					text-align:center;
					margin:10px auto;
				}
				.input_cnt{
					text-align:center;
					.input-text{
						border:none;
						padding:15px 40px;
						width:200px;
						.rounded(50px);
						outline: none;
						text-align:center;
						font-size:2rem;
					}
					.input-text.long{
						width:300px;
					}
				}
				.button_cont{
					text-align:center;
					margin:15px auto;
				}
			}
		}

		.popoutboxbg{
			.main_cont{
				max-width:520px;
				width:100%;
				height:535px;
				margin:0 auto;
				background:url(../images/lightbox.png);
				background-repeat:no-repeat;
				background-position:center 20px;
			}
			.footerlabel{
				position:relative;
				width:100%;
				background:@bg-color-cyan;
				margin-top:10px;
				padding-top:5px;
				padding-bottom:5px;
				.tips{
					width:90%;
					max-width:520px;
					margin:0 auto;
					.tip{
						.icon{
							float:left;
							width:60px;
							height:auto;
						}
						.description{
							float:left;
							width:calc(~" 100% - 60px ");
							color:@font-color-white;
							h3{
								font-size: 2rem;
								margin: 0 0 0.5rem;
							}
							p{
								font-size: 1.2rem;
								line-height: 1.3rem;
								margin-bottom:0;
							}
						}
					}
					.tip::after{
						content:"";
						display:block;
						clear:both;
					}
				}
			}
		}

		.popoutboxbg.withfooter{
			
		}
	}
}

.microsite{
	width:auto;
	.big_wrapper{
		
	}
	.pages{
		min-height:auto;
	}
	.nc_main_container{
		.landingpage{
			
		}
	}
}
.xmicrosite{
	width:100%;
	margin:0 auto;
	.nc_main_container{
		overflow:hidden;
		.landingpage{
			height:700px;
			.page_inner{
				.cont_shadow{
					margin-left:-190px;
					margin-top: -159px;
				}
				.cont{
					margin-left:-202px;
					margin-top: -220px;
				}
			}
		}
		.landingpage::after{
			display:none;
		}
		.pfl-container{
			position:absolute;
		}
	}
}

@media only screen
and (min-width : 1024px)
and (max-height : 767px) {
	.nc_main_container{
		.landingpage{
			
		}
	}
}

@media only screen
and (min-width : 1024px)
and (min-height : 769px) {
	.nc_main_container{
		.landingpage{
			
		}
	}
}

.screen_rotate{
	display:none;
}
@media only screen and (max-width: 737px) and (orientation: landscape){
	.screen_rotate{
		position: fixed;
	    background: #000;
	    color: #fff;
	    display: block;
	    width: 100vw;
	    height: 100vh;
	    top: 0;
	    left: 0;
	    z-index: 104;
	    p{
	    	top: 50%;
		    left: 50%;
		    transform: translateX(-50%) translateY(-50%);
		    position: absolute;
	    }
	}
}