@import 'baseline.less';

@desktop:   ~"only screen and (min-width: 641px)";
@mobile:    ~"only screen and (max-width: 640px)";



.sem-popup{
	position: fixed;
	z-index: 1001;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
	
	background: #333;
	border-radius: 4px;
	
	left: 50%;
	
	@media @desktop{
		width: 680px;
		margin-left: -340px;
		top: 25%;
	}
	@media @mobile{
		width: 300px;
		margin-left: -150px;
		top: 105px;
	}
	
	.popup-title{
		position: relative;
		
		h1{
			color: #fff!important;
			
			@media @desktop{
				.font(24, 200);
				height: 54px;
				line-height: 54px;
				text-align: center;
			}
			@media @mobile{
				.font(18, 200);
				margin: 0 0 0 10px;
				height: 44px;
				line-height: 44px;
			}
			
		}
		.popup-hide{
			position: absolute;
			.font(24, 200);
			color: #fff;
			cursor: pointer;
			
			@media @desktop{
				right: 18px;
				top: 11px;
			}
			@media @mobile{
				right: 14px;
				top: 7px;
			}
		}
	}
	.popup-body{
		margin: 0 5px 5px;
		background: #fff;
		border-radius: 0 0 2px 2px;
		text-align: center;
		
		position: relative;
		
		.popup-steps{
			.clearfix();
			
			@media @desktop{
				padding: 40px 0;
				margin-left: 80px;
			}
			
			@media @mobile{
				padding: 20px 0;
				margin-left: 10px;
			}
			
			.step{
				float: left;
				.clearfix();
				
				@media @desktop{
					margin: 0 40px 0 0;
				}
				@media @mobile{
					margin: 0 15px 0 0;
				}
			}
			
			.steps-number{
				float: left;
				background: #d49f4c;
				text-align: center;
				
				@media @desktop{
					line-height: 40px;
					width: 40px;
					height: 40px;
					border-radius: 20px;
				}
				
				@media @mobile{
					line-height: 20px;
					width: 20px;
					height: 20px;
					border-radius: 10px;
				}
				
				span{
					color: #fff;
					
					@media @desktop{
						.font(28, 200);
					}
					@media @mobile{
						.font(15, 400);
					}
				}
			}
			.steps-label{
				float: left;
				
				@media @desktop{
					height: 40px;
					line-height: 40px;
				}
				
				@media @mobile{
					height: 20px;
					line-height: 20px;
				}
				
				span{
					color: #666;
					
					@media @desktop{
						.font(28, 200);
						margin: 0 0 0 8px;
					}
					@media @mobile{
						.font(16, 200);
						margin: 0 0 0 4px;
					}
				}
			}
		}
		
		p{
			color: #666;	
			margin: 0;
			text-align: center;
			
			@media @desktop{
				.font(20, 200);
				padding: 0 60px;
			}
			
			@media @mobile{
				.font(15, 200);
				padding: 0 15px;
			}
		}
		
		.popup-cta{
			background: #2ecc44;
			display: inline-block;	
			color: #fff;
			text-decoration: none;
			box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
			
			@media @desktop{
				margin: 50px 0 40px;
				border-radius: 32px;
				height: 64px;
				line-height: 64px;
				.font(26, 400);
				padding: 0 25px;
			}
			@media @mobile{
				margin: 20px 0 20px;
				border-radius: 22px;
				height: 44px;
				line-height: 44px;
				.font(20, 400);
				padding: 0 15px;
			}
		}
	}
	
	.camera-rental-decal-1{
		width: 120px;
		height: 119px;
		background: url('../images/cta-rental-decal-1.png') no-repeat;
		position: absolute;
		left: 0;
		bottom: 10px;
		
		@media @mobile{
			display: none;
		}
		
	}
	.camera-rental-decal-2{
		width: 129px;
		height: 97px;
		background: url('../images/cta-rental-decal-2.png') no-repeat;
		position: absolute;
		right: 0;
		bottom: 20px;
		
		@media @mobile{
			display: none;
		}
	}
	
	.lens-rental-decal-1{
		width: 103px;
		height: 96px;
		background: url('../images/cta-lens-decal-1.png') no-repeat;
		position: absolute;
		left: 0;
		bottom: 16px;
		
		@media @mobile{
			display: none;
		}
		
	}
	.lens-rental-decal-2{
		width: 102px;
		height: 90px;
		background: url('../images/cta-lens-decal-2.png') no-repeat;
		position: absolute;
		right: 0;
		bottom: 20px;
		
		@media @mobile{
			display: none;
		}
	}
	
}
.sem-popup-cover{
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: #f5f5f5;
	opacity: .5;
	z-index: 1000;
	cursor: pointer;
}


.sem-title{
	.font(38, 200);
	color: #666!important;
	margin: 20px 0 0;
	
	@media @mobile{
		.font(28, 200);
		margin-left: 20px;
	}
}

.sem-sub-title{
	.font(18, 400);
	text-transform: uppercase;
	color: #e73345;
	margin: 5px 0 20px;
	
	@media @mobile{
		.font(14, 400);
		margin-top: 0;
		margin-left: 20px;
	}
}


.sem-brand-grid{
	.clearfix();
	margin: 0 0 40px;
	
	@media @mobile{
		margin-bottom: 20px;
	}
	
	.grid-box{
		float: left;
		
		@media @desktop{
			width: 17.4375%;
			margin-right: 2.083333333333333%;
			
			&:last-child{
				margin-right: 0;
			}
		}
		
		@media @mobile{
			width: 45.3125%;
			margin: 0 0 3.125% 3.125%;
		}
		
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 2px 0 #e5e5e5;
		
		.transition();
		
		&:hover{
			box-shadow: 0 2px 0 #d5d5d5 , 0 0 0 1px rgba(0, 0, 0, 0.02) , 0 0 20px rgba(0, 0, 0, 0.12);
		}
		
		a{
			display: block;
		}
		
		.box-brand{
			padding: 20px 20px 0;
			line-height: 40px;
			
			@media @desktop{
				height: 31px;
			}
			@media @mobile{
				height: 21px;
			}
			
			img{
				max-width: 80%;
				margin: 0 0 0 10%;
				display: inline-block;
				vertical-align: middle;
			}	
		}
		.box-image{
			padding:20px;
			text-align: center;
			
			@media @desktop{
				height: 154px;
				
			}
			@media @mobile{
				height: 84px;
			}
			
		
			img{
				max-width: 100%;
				max-height: 100%;
			}	
		}
	}
}