/*
Main Home
=========================================================
*/
#main{
	position: relative;
}

/*
Welcome Section
---------------------------------------*/
.bonkers-welcome-section{
	position: relative;
	background-position: center;
    background-size: cover;
    text-align: center;

    	&::before{
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 1;
		}

		.bonkers-welcome-intro{
			z-index: 2;
			color: #fff;
			width: 70%;
			padding: 14% 0;
			margin: 0 15%;
			position: relative;

				.bonkers-intro-line{
					color: #fff;
					.font-size(68);
					margin-bottom: 50px;
				}

				.ql_border_btn{
					border-color: #fff;
					color: #fff;

						&:hover, &:focus {
							background-color: #fff;
							color: @heroColor;
						}
				}
		}
}


/*
Services Section
---------------------------------------*/
.bonkers-services-section{
	padding: 70px 0;

		.bonkers-service{
			text-align: center;
			vertical-align: top;

				.bonkers-service-icon{
					margin-bottom: 15px;
				}

				.bonkers-service-btn{
					text-transform: uppercase;
					margin-top: 10px;
					display: inline-block;
					position: relative;

						&:hover, &:focus {
							text-decoration: none;
						}

						&:after{
							position: absolute;
							left: 0;
							bottom: 0;
							.transition( width 500ms cubic-bezier(0.075, 0.82, 0.165, 1));
							content: " ";
							display: block;
							width: 0;
							height: 1px;
							background-color: @heroColor;
						}

						&:hover:after, &:focus:after {
							width: 100%;
						}


				}
		}

}


/*
Image Section
---------------------------------------*/
.bonkers-image-section{
	position: relative;
	background-color: #111111;


    	.bonkers-image-section-image{
    		background-position: center;
		    background-size: cover;
		    text-align: center;
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    width: 50%;

				&::before{
					content: "";
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.3);
					z-index: 1;
				}

    	}

    	.bonkers-image-section-text{
    		width: 50%;
    		margin-left: 50%;
    		padding: 80px;
    		display: inline-block;
    		columns: #fff;

    			.bonkers-image-section-title{
    				color: #fff;
    				margin-bottom: 30px;
    				.font-size(38);
    			}

    			.bonkers-image-section-content{
    				.font-size(20);
    				line-height: 35px;

    					.ql_border_btn {
    						margin-top: 30px;

    						&:hover, &:focus {
    							background-color: #fff;
    						}
    					}
    			}
    	}

    	&.bonkers-image-right{

    			.bonkers-image-section-image{
    				right: 0;
    			}

    			.bonkers-image-section-text{
    				margin-left: 0;
    			}
    	}

}


/*
Phone Section
---------------------------------------*/
.bonkers-phone-section{
	background-color: @gray-lighter2;
	padding: 70px 7%;

		.bonkers-phone-services{
			display: inline-block;
			width: 35%;
			vertical-align: top;
			padding-top: 50px;

				.bonkers-phone-service{
					position: relative;
					margin-bottom: 15%;

						.bonkers-phone-icon{
							display: block;
							top: 0;
							position: absolute;
							max-width: 22px;
							vertical-align: top;
						}

						.bonkers-phone-service-content{
							vertical-align: top;

						}
				}

				&.bonkers-phone-left .bonkers-phone-service{
					text-align: right;

						.bonkers-phone-service-content{
							padding-right: 45px;
						}

						.bonkers-phone-icon{
							right: 0;
						}
				}

				&.bonkers-phone-right .bonkers-phone-service{

						.bonkers-phone-service-content{
							padding-left: 45px;
						}

						.bonkers-phone-icon{
							left: 0;
						}
				}
		}

		.bonkers-phone-image{
			display: inline-block;
			width: 25%;
			vertical-align: top;
			margin: 0 2%;
			position: relative;

				.bonkers-phone-screenshot{
					position: absolute;
					top: 16.5%;
					left: 16.5%;
					background-color: black;
					width: 67%;
					height: 67%;
					background-position: center;
				    background-size: cover;
				    text-align: center;
				}
		}
}

/*
CTA Section
---------------------------------------*/
.bonkers-cta-section{
	background-color: #000;
	color: #fff;
	padding: 70px 10%;
	background-position: center;
	background-size: cover;
	position: relative;

		&::before{
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.85);
			z-index: 1;
		}


		.bonkers-cta-title{
			color: #fff;
			display: inline-block;
			width: 77%;
			margin-bottom: 0;
			line-height: 48px;
			vertical-align: top;
			position: relative;
			z-index: 2;
			text-transform: uppercase;
		}

		.bonkers-cta-button{
			position: absolute;
			top: 50%;
			right: 19%;
			.translate(0;-50%);
			z-index: 2;
			vertical-align: top;

			&:hover, &:focus {
				text-decoration: none;
				color: #fff;
			}
		}
}

/*
Video Section
---------------------------------------*/
.bonkers-video-section{
	padding: 70px 20%;
	text-align: center;
	position: relative;

		&::before{
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 40%;
			background-color: @gray-lighter2;
			z-index: -1;
		}

		.bonkers-video-title{
			.font-size(40);
			color: @gray-dark;
		}


		.bonkers-video-video{
			margin-top: 40px;
			position: relative;
			padding-bottom: 56.2%;

				iframe, .wp-video-shortcode, .me-plugin{
					width: 100% !important;
					height: 100% !important;
					position: absolute;
					top: 0;
					left: 0;


				}
				.wp-video-shortcode{
					.box-shadow(0 5px 30px rgba(0,0,0,0.20));

						.mejs-controls{
							display: none;
						}
						&:hover .mejs-controls{
							display: block;
						}
				}
		}

}

/*
Team Section
---------------------------------------*/
.bonkers-team-section{
	text-align: center;
	padding: 70px 0;

		.bonkers-section-title{
			text-transform: uppercase;
			margin-bottom: 50px;
			position: relative;
			display: inline-block;

				&::before{
					content: "";
					position: absolute;
					top: 50%;
					left: -70px;
					.translate(0;-50%);
					height: 1px;
					width: 50px;
					border-bottom: 1px solid @gray-light;
				}
				&::after{
					content: "";
					position: absolute;
					top: 50%;
					right: -70px;
					.translate(0;-50%);
					height: 1px;
					width: 50px;
					border-bottom: 1px solid @gray-light;
				}
		}

		.bonkers-team-wrap{

				.widget {

					width: 25%;
					display: inline-block;
					text-align: left;
					padding: 0 2.5%;

				}

				.bonkers-team-member{

						.bonkers-team-image{
							display: inline-block;
							width: 40%;
							vertical-align: top;
							padding: 2px;
							border: 1px solid @gray-light2;
							border-radius: 50%;
							margin-right: 4%;
						}

						.bonker-team-content{
							width: 54%;
							display: inline-block;
							vertical-align: top;
							padding-top: 15px;

								.bonkers-team-name{
									margin-bottom: 2px;
								}

								.bonkers-team-position{
									.font-size(15);
									font-weight: bold;
								}

								.bonkers-team-social{
									list-style: none;
									padding: 0;
									margin-bottom: 0;
									margin-top: 5px;

										li{
											display: inline-block;
											margin: 5px;

												a{
													padding: 2px;
													color: @gray-light;

														&:hover, &:focus {
															color: @gray-dark;
														}

														i{
															.font-size(18);
														}
												}


										}
								}
						}
				}
		}


}

/*
Subscribe Section
---------------------------------------*/
.bonkers-subscribe-section{
	padding: 50px 25%;
	background-color: @gray-darker;

		.bonkers-subscribe-content{

				.bonkers-subscribe-title{
					color: #fff;
				}

				.bonkers-subscribe-text{
					margin-bottom: 10px;
				}

				.bonkers-subscribre-form-wrapper{

						.bonkers-subscribre-form, .contact-form{

								& > div{
									display: inline-block;
									width: 60%;
								}

								input{
									background-color: rgba(255, 255, 255, 0.08);
									border: none;
									width: 60%;
									display: inline-block;
									vertical-align: top;
									height: 50px;
									margin-right: 15px;
									.font-size(16);
								}

								label{
									display: none;
								}

								.contact-submit{
									display: inline-block;
								}

								.bonkers_subscribe_btn, input[type="submit"]{
									.ql_border_btn;
									vertical-align: top;
									width: auto;
									margin-right: 0;
								}
						}

						.contact-form{
							input{
								width: 100%;
								margin-right: 0;
							}

							& > div{
								margin-right: 15px;
							}
						}

				}
		}
}



/*
Clients Section
---------------------------------------*/
.bonkers-clients-section{
	text-align: center;
	padding: 70px 0;

		.bonkers-section-title{
			text-transform: uppercase;
			margin-bottom: 50px;
			position: relative;
			display: inline-block;

				&::before{
					content: "";
					position: absolute;
					top: 50%;
					left: -70px;
					.translate(0;-50%);
					height: 1px;
					width: 50px;
					border-bottom: 1px solid @gray-light;
				}
				&::after{
					content: "";
					position: absolute;
					top: 50%;
					right: -70px;
					.translate(0;-50%);
					height: 1px;
					width: 50px;
					border-bottom: 1px solid @gray-light;
				}
		}

		.bonkers-clients-wrap{

				.widget {
					width: 17%;
					padding: 0 3.5%;
					display: inline-block;
					vertical-align: top;

						a{
							display: block;

								img{
									width: 100%;
								}
						}

						img{
							width: 100%;
						}
				}
		}

		.bonkers-clients-logo a:focus {
			outline: 1px solid;
		}
}


/*
Contact Section
---------------------------------------*/
.bonkers-contact-section{
	padding: 80px;
	background-color: @gray-lighter;
	position: relative;

		.bonkers-contact-map{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;

				#bonkers-map{
					width: 100%;
					height: 100%;
				}
		}

		.bonkers-contact-content{
			width: 40%;
			margin-left: 55%;
			background-color: @gray-darker;
			text-align: center;
			padding: 50px;
			position: relative;
			z-index: 1;

				.bonkers-contact-title{
					color: #fff;
					position: relative;
					display: inline-block;
					margin-bottom: 30px;
					text-transform: uppercase;

						&::before{
							content: "";
							position: absolute;
							top: 50%;
							left: -70px;
							.translate(0;-50%);
							height: 1px;
							width: 50px;
							border-bottom: 1px solid @gray-light;
						}
						&::after{
							content: "";
							position: absolute;
							top: 50%;
							right: -70px;
							.translate(0;-50%);
							height: 1px;
							width: 50px;
							border-bottom: 1px solid @gray-light;
						}

				}

				.bonkers-contact-form{

						form, .wpcf7-form{

								div{
									margin-bottom: 15px;
								}
								input, textarea{
									background-color: rgba(255, 255, 255, 0.08);
									border: none;
									display: block;
									width: 100%;
								}
								textarea{
									min-height: 150px;
								}

								label{
									text-align: left;
									display: block;
								}

								.contact-submit, &{
									text-align: left;

										input[type="submit"]{
											.ql_border_btn;
											display: inline-block;
											width: auto;
											margin-bottom: 0;
											height: auto;
										}
								}
						}
				}
		}
}