/* HireMee Landing Pages V2 Styles*/
// Variables
@import "landingvariables";
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
/*Main Styling*/
html{
	font-size: 100%;
}
body{
	font-size: 1rem;
	font-family: 'Roboto Condensed', sans-serif;
}

.back-to-top{
	& span{
		margin-left: -3px;
		font-size: 10px;
		display: inline-block;
		text-shadow: 0 0 2px lighten($black, 55%);
	}
	&:hover{
		& span{
			color: lighten($black, 90%);
			text-shadow: 0 0 2px lighten($black, 35%);
		}
	}
}
.v2-landing-hme-gradient-bg{
	background: linear-gradient(180deg, #009245, #8FC740);
	background-size: 400% 400%;
	-webkit-animation: AnimationName 30s ease infinite;
	-moz-animation: AnimationName 30s ease infinite;
	animation: AnimationName 30s ease infinite;
	background-attachment: fixed;
}
.map-legend{
	padding: 16px;
	border-radius: 6px;
	min-height: 120px;
	background: lighten($hiremee-light, 5%);
	color: darken($hiremee-dark, 5%);
	& h4{
		font-size: 18px;
	}
	& p{
		margin: 0;
		padding: 0;
		font-weight: 500;
	}
}
.data-legend{
	padding: 16px;
	border-radius: 6px;
	min-height: 120px;
	background: lighten($hiremee-light, 5%);
	color: darken($hiremee-dark, 5%);
	position: relative;
	color: $white;
	& h1{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		font-size: 18px;
		background: darken($hiremee-light, 15%);
		padding: 12px;
		border-radius: 6px 6px 0 0;
		text-align: center;
		text-transform: uppercase;
	}
	& h2{
		width: 100%;
		padding-top:80px;
		font-size: 18px;
		padding: 12px 0;
		margin-top: 16px;
		font-weight: 400;
		text-align: center;
		& .data{
			display: block;
			margin: 8px;
			font-size: 56px;
			font-weight: 500;
			text-align: center;
		}
	}
}
.header-subsidary-thick{
	width: 100vw;
	height: 40vh;
	background: url('/img/header-bg/case-study.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	background-attachment: fixed;
	position: relative;
	& .video-container{
		height: 40vh;
	}
	& .navbar-expand-lg{
		z-index: 5000;
	}
	& .contact{
		color: $white;
		z-index: 200;
		margin-top: 8px;
		margin-bottom: 8px;
		margin-left: 24px;
		& .icon-holder{
			margin-right: 8px;
		}
	}
	& .header-inner{
		background-color: rgba($black, 0.5);
		position: absolute;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
		padding-top: 125px;
		color: $white;

		& .arrow-marker{
			width: 48px;
			height: 48px;
			border: 1px solid $white;
			margin: 16px auto;
			display: inline-block;
			align-items: center;
			text-align: center;
			border-radius: 50%;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 16px;

			&:before{
				line-height: 48px;
				text-align: center;
				font-size: 20px;
				font-family: 'Linearicons-Free';
				content: "\e874";
				animation: slideDown 1.5s infinite;
				display: inline-block;
			}
		}
	}

	& h1{
		font-weight: 400;
		text-shadow: 0 0 5px lighten($black, 20%);
		animation-name: MoveInRight;
		animation-duration: 3s;
	}
	& h3{
		font-weight: 200;
		text-shadow: 0 0 5px lighten($black, 20%);
		font-size: 20px;
		animation-name: MoveInLeft;
		animation-duration: 3s;
	}
}
.header-subsidary{
	width: 100vw;
	height: 60vh;
	background: url('/img/header-bg/case-study.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	background-attachment: fixed;
	position: relative;
	& .navbar-expand-lg{
		z-index: 5000;
	}
	& .contact{
		color: $white;
		z-index: 200;
		margin-top: 8px;
		margin-bottom: 8px;
		margin-left: 24px;
		& .icon-holder{
			margin-right: 8px;
		}
	}
	& .header-inner{
		background-color: rgba($black, 0.5);
		position: absolute;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
		padding-top: 180px;
		color: $white;

		& .arrow-marker{
			width: 48px;
			height: 48px;
			border: 1px solid $white;
			margin: 16px auto;
			display: inline-block;
			align-items: center;
			text-align: center;
			border-radius: 50%;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 16px;

			&:before{
				line-height: 48px;
				text-align: center;
				font-size: 20px;
				font-family: 'Linearicons-Free';
				content: "\e874";
				animation: slideDown 1.5s infinite;
				display: inline-block;
			}
		}
	}

	& h1{
		font-weight: 400;
		text-shadow: 0 0 5px lighten($black, 20%);
		animation-name: MoveInRight;
		animation-duration: 3s;
	}
	& h3{
		font-weight: 200;
		text-shadow: 0 0 5px lighten($black, 20%);
		font-size: 20px;
		animation-name: MoveInLeft;
		animation-duration: 3s;
	}
}
.header{
	width: 100vw;
	height: 65vh;
	position: relative;
	background-attachment: fixed;

	.illustration{
		position: relative;
		bottom: 0;
		& .svg-position{
			position: absolute;
	    left: 0;
			top: 0;
	    width: 100%;
	    animation: oscilate 3s;
			z-index: 5000;
			& .cls-2{
				animation: slideindown 3s infinite;
			}
		}

	}

	@keyframes slideindown{
		0%{
			margin-top: -100px;
		}
		100%{
			margin-top: 0;
		}
	}

	.hme-pro-company-scroll{
		padding: 16px;

		& li{
			margin: 12px;
		}

		& .company-logo{
			width: 120px;
		}
	}
	@keyframes slideindown {
		0%{
			margin-top: -100px;
		}
		100%{
			margin-top: 0;
		}
	}

	& .header-inner{
		position: absolute;
		z-index: 200;
		width: 100%;
		height: 65vh;
		top:0;
		left: 0;
		display: inline-block;
		margin-top: -8px;
		& svg{
			width: 80%;
			margin-top: 14vh;
			@media screen and (max-width: $break-medium) {
				display: none;
			}
		}
		& .content{
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			color: $white;
			padding-top: 25vh;
			padding-left: 0;
			@media screen and (max-width: $break-medium) {
				padding-top: 6vh;
			}
			& h1{
				font-size: 48px;
				font-weight: 600;
				animation-name: MoveInLeft;
				animation-duration: 3s;
				margin-left: 16px;
			}
			& h3{
				font-size: 36px;
				font-weight: 100;
				animation-name: MoveInRight;
				animation-duration: 3s;
				margin-left: 16px;
			}
		}
	}
	.dropdown-item-menu{
		padding-left: 48px;
		margin-bottom: 12px;
	}
	.contact{
		color: lighten($black, 100%);
		font-weight: 300;
		line-height: 1.5;
		margin: .2rem 0 .2rem 2rem;
		position: relative;
		.icon-holder{
			display: inline-block;
		    position: absolute;
		    top: .17rem;
		    left: -1.4rem;
		}
	}
	@media screen and (max-width: $break-medium) {
		height: 45vh;

		& #particles-js{
			height: 45vh;
		}
		.illustration{
			 display: none;
		 }
		 & .header-inner{
	 		position: relative;
	 		& .content{
	 			text-align: center;
				margin-top: 0;
	 			& h1{
	 				font-size: 48px;
	 				font-weight: 600;
	 				animation-name: MoveInLeft;
	 				animation-duration: 3s;
	 			}
	 			& h3{
	 				font-size: 36px;
	 				font-weight: 100;
	 				animation-name: MoveInRight;
	 				animation-duration: 3s;
	 			}
	 		}
	 	}
		.navbar-brand {
		    position: absolute;
		    padding: 10px 0 0 15px;
		    top: 0;
		    width: 70%;

				& img{
					width: 200px;
				}
		}
	 }
	 @media screen and (min-width: $break-x-large){
		.svg-position{
 				position: inherit;
 		    left: -108%;
 		    width: 222%;
 		    bottom: -107px;
 				animation: oscilate 3s;
 				& .cls-2{
 					animation: slideindown 3s infinite;
 				}
 			}

 		}
}

.transparent-nav{
	background: transparent;
	color: lighten($black, 100%);
	box-shadow: none;
	height: 3rem;
}
.navbar-expand-lg .navbar-nav .nav-link{
	padding: .3rem 1.6rem .3rem .8rem;
	border-radius: .28rem;
	color: lighten($black, 100%);
	font-weight: 300;
	position: relative;
	.hme-home-link{
		font-size: 1.6rem;
	}
	&:hover, &:focus, &:active{
		background-color: rgba($white, 0.98);
		color: darken($hiremee-dark, 25%);
	}
	.drop-down-marker{
		position: absolute;
		top: 1.1rem;
		right: .4rem;
		display: inline-block;
		font-size: .6rem;
		font-weight: 700;
	}
}
.navbar{
	background-color: rgba(255, 255, 255, 0);
	box-shadow: none;
	height: 56px;
	@media screen and (max-width: $break-medium) {
		height: 70px;
	}
}
.bgm-gray{
	background-color: $semi-light-gray;
}
.bgm-hme-gradient{
	background : -moz-linear-gradient(49.73% -10.59% -89.41deg,rgba(143, 199, 64, 1) 0%,rgba(0, 146, 69, 1) 100%);
  background : -webkit-linear-gradient(-89.41deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
  background : -webkit-gradient(linear,49.73% -10.59% ,50.27% 118.27% ,color-stop(0,rgba(143, 199, 64, 1) ),color-stop(1,rgba(0, 146, 69, 1) ));
  background : -o-linear-gradient(-89.41deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
  background : -ms-linear-gradient(-89.41deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8FC740', endColorstr='#009245' ,GradientType=0)";
  background : linear-gradient(179.41deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8FC740',endColorstr='#009245' , GradientType=1);
}
.wave-bg-top{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTExIDk2MS43NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNkNmQ2ZDY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT53YXZlLXRvcDwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yLDI1Ljc4YzUwNSwzMjMsOTkwLjQ0LDYwLDk5MC40NCw2MCw0NTAuNTYtMTkzLDkxOC41NiwwLDkxOC41NiwwVjkyNi44NkwwLDkxNi43OFoiLz48L2c+PC9nPjwvc3ZnPg==);
	background-repeat: no-repeat;
  background-size: cover;
}
.wave-bg-bottom{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTExIDk1My44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNkNmQ2ZDY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT53YXZlLWJvdHRvbTwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yLDkyOC4zMkM1MDcsNjA4LDk5Mi40NCw4NjguODEsOTkyLjQ0LDg2OC44MWM0NTAuNTYsMTkxLjQzLDkxOC41NiwwLDkxOC41NiwwVjM0LjYxTDAsNDQuNjFaIi8+PC9nPjwvZz48L3N2Zz4=);
	background-repeat: no-repeat;
  background-size: cover;
	margin-top:-18px;
}
.min-height-section{
	min-height: 620px !important;
}

.wave-bg-hme{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkxMSA5NjEuNzYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCk7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSI5NTMuMDYiIHkxPSItMTI4Ljk0IiB4Mj0iOTU4LjIiIHkyPSIxMTk3LjkyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOGZjNzQwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA5MjQ1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPndhdmUtaG1lPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIsMjUuNzhjNTA1LDMyMyw5OTAuNDQsNjAsOTkwLjQ0LDYwLDQ1MC41Ni0xOTMsOTE4LjU2LDAsOTE4LjU2LDBWOTI2Ljg2TDAsOTE2Ljc4WiIvPjwvZz48L2c+PC9zdmc+);
	background-repeat: no-repeat;
  background-size: cover;
}

.navbar-expand-lg-scrolled{
		background-color: rgba(255, 255, 255, 1);
    padding: 12px 8px 12px 4px;
    height: 80px;
    border-radius: 0;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		box-shadow: 0 0 10px lighten($black, 75%);
		animation-name: slideindown;
		animation-duration: 200ms;
		animation-timing-function: ease-in-out;

		& .navbar-nav .nav-link{
			color: $hiremee-dark;
			font-weight: 500;
		}
		& .navbar-expand-lg .navbar-nav .nav-link:hover, .navbar-expand-lg .navbar-nav .nav-link:focus, .navbar-expand-lg .navbar-nav .nav-link:active{
			background-color: rgba(11, 102, 36, 1);
			text-shadow: none;
    	color: white;
		}
}
.how-work-left{
	background: #67B13D;
	min-height: 320px;
	width: 50vw;
	text-align: center;
	color: $white;
	padding: 32px 8px 32px 32px;
	font-family: 'Roboto Condensed', sans-serif;
	& .header-main{
		font-size: 40px;
		font-weight: 400;
		display: block;
	}
	#accordion-nav, #accordion-nav .panel-body{
		background-color: lighten($black, 100%);
	}
	& .header-secondary{
		font-size: 32px;
		font-weight: 100;
		display: block;
	}
	& .counter-wrapper{
		width: 120px;
		height: 120px;
		border: 4px solid $white;
		display: inline-block;
		padding: 0;
		font-size: 72px;
		border-radius: 50%;
		text-align: center;
		margin-top: 24px;
		font-weight: 200;
	}
	@media screen and (max-width: $break-medium) {
    width: 100vw;
		padding: 16px;
		min-height: 220px;
  }
}
.slicknav_menu ul{
	padding-bottom: 145px;
	background: url('/img/pro/bg/menu-bg.jpg');
	background-size: cover;
}
.slick-dots{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.how-work-right{
	font-family: 'Roboto Condensed', sans-serif;
	background : -moz-linear-gradient(22.11% 99.94% -55.01deg,rgba(165, 191, 181, 1) 0%,rgba(194, 243, 146, 1) 100%);
  background : -webkit-linear-gradient(-55.01deg, rgba(165, 191, 181, 1) 0%, rgba(194, 243, 146, 1) 100%);
  background : -webkit-gradient(linear,22.11% 99.94% ,22.16% 100.1% ,color-stop(0,rgba(165, 191, 181, 1) ),color-stop(1,rgba(194, 243, 146, 1) ));
  background : -o-linear-gradient(-55.01deg, rgba(165, 191, 181, 1) 0%, rgba(194, 243, 146, 1) 100%);
  background : -ms-linear-gradient(-55.01deg, rgba(165, 191, 181, 1) 0%, rgba(194, 243, 146, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5BFB5', endColorstr='#C2F392' ,GradientType=0)";
  background : linear-gradient(145.01deg, rgba(165, 191, 181, 1) 0%, rgba(194, 243, 146, 1) 100%);
  border-radius : 0px;
  -moz-border-radius : 0px;
  -webkit-border-radius : 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5BFB5',endColorstr='#C2F392' , GradientType=1);
	min-height: 320px;
	width: 50vw;
	padding: 56px 40px 40px 40px;
	position: relative;
	& .slider-items{
		overflow: hidden;
		padding: 0 40px 0 0;

		& .owl-controls{
			margin-top: -24px !important;
		}
	}

	& .desc-heading{
		font-size: 36px;
		color: $black;
	}
	& .desc{
		font-size: 18px;
		font-weight: 300;
		margin-top: 32px;
		margin-right: 16px;
		width: 420px;
		line-height: 1.8;
		color: lighten($black , 15%);

		& .scroll-list{
			margin-bottom: 4px;
			font-size: 16px;
			margin-left: 35px;
			font-weight: 500;
		}
		& .scroll-list:before{
			font-family: 'Linearicons-Free';
			content: "\e87a";
			display: inline-block;
			width: 24px;
			height: 24px;
			margin-right: 8px;
			margin-left: -31px;
		}
	}
	@media screen and (max-width: $break-medium) {
    width: 100vw;
		padding: 16px;
		min-height: 220px;
		text-align: center;
		& .slider-items{
			padding: 8px;
		}
		& .desc{
			margin: 8px;
			width: 100%;
			text-align: left;
		}
  }
	@media screen and (max-width: $break-x-large) {

  }
}

.navbar-expand-lg .navbar-nav .hme-pro-cta-nav-link{
	background-color: $white;
	border: .17rem solid darken($white, 5%);
	color: lighten($black, 0%);
	font-weight: 400;
	&:hover{
		background: darken($white, 65%);
		border: .17rem solid $white;
		color: $white;
		border-radius: 24px;
	}
}
.navbar-expand-lg .navbar-nav .hme-pro-cta-nav-link-v2{
	background-color: lighten($hiremee-dark, 5%);
	border: .17rem solid lighten($hiremee-dark, 15%);
	color: lighten($black, 100%);
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 400;
	&:hover{
		background: darken($hiremee-dark, 5%);
		border: .17rem solid lighten($hiremee-dark, 25%);
		border-radius: 24px;
		color: $white;
	}
}
.slicknav_btn{
	border: 2px solid $hiremee-light;
	height: 40px;
	padding: 12px 0 9px;
}
.hme-pro-cta-nav-link-mobile{
	background-color: $yellow;
	border: .17rem solid darken($yellow, 5%);
	color: lighten($black, 0%);
	font-weight: 400;
	font-size: 18px;
	border-radius: 48px;
	&:hover{
		background: darken($yellow, 5%);
		border: .17rem solid $yellow;
		border-radius: 24px;
	}
}
.hme-pro-cta-nav-link-v2-mobile{
	background-color: lighten($blue, 2%);
	border: .17rem solid lighten($blue, 15%);
	color: #fff !important;
	font-size: 18px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 400;
	border-radius: 48px;
	&:hover{
		background: darken($blue, 5%);
		border: .17rem solid lighten($blue, 25%);
		border-radius: 24px;
	}
}
.hme-pro-cta{
	background: lighten($hiremee-dark, 4%);
	border: .11rem solid lighten($hiremee-light, 5%);
	color: lighten($black, 100%);
	padding:16px 64px;
	font-weight: 400;
	border-radius: 8px;

	&:hover{
		background: lighten($hiremee-dark, 1%);
		border-radius: 40px;
		color: $white;
	}
}
#accordion{

	& .panel-heading{
		& .panel-title{
			font-size: 18px;
			font-weight: 400;
			position: relative;

			& a{

				&:after{
					position: absolute;
					top: 16px;
					right: 12px;
					font-size: 24px;
				}
			}
		}
	}
}
#accordion{

                .card-header:after {

                    font-family: 'Linearicons-Free';

                    content: "\e882";

                    float: right;

                    color: lighten($black, 55%);

                                                position: absolute;

                                                top: 10px;

                                                right: 16px;

                }

                .card-header.collapsed:after {

                    content: "\e881";

                }

}
#accordion{
	& a{
		border: 1px solid lighten($black, 55%);
	}

	& .panel .panel-body{
		border: 1px solid lighten($black, 55%);
	}
}

.navbar-expand-lg .navbar-nav .dropdown-menu{
		top: 3.8rem;
    left: 0.98rem;
    background: rgba($white, 1);
		color: $hiremee-light;
		border-radius: 0;
    .dropdown-item{
    	padding: .8rem 1.5rem;
    	color: lighten($black, 45%);
    	font-weight: 400;
			font-size: 15px !important;
			&:hover{
				color: lighten($black, 100%);
			}
    }
}

.footer{
	background-color: $footer-bg-light;
	min-height: 320px;
	width: 100%;
	display: inline-block;
	position: relative;
	font-size: .8rem;
	font-weight: 400;
	padding-bottom: 100px;
	& .links{
		& .button-cta{
			border-radius: 4px;
			margin: 16px 0;
			padding: 9px 32px;
			height: 48px;
			background: $hiremee-light;
			border: 2px solid $hiremee-dark;
			font-size: 18px;
			width: 100%;
			text-transform: capitalize;
			& :hover{
				background-color: $hiremee-dark;
				border: 2px solid $hiremee-light;
			}
		}
		& .contact-details{
			margin-bottom: 12px;
			& img{
				width: 24px;
				margin-right: 16px;
			}
			& span{
				font-size: 20px;
				color: $white;
				font-weight: 300;
			}
		}
		& .link-header{
			font-size: .9rem;
			padding-left: 12px;
			height: 20px;
			border-left: 3px solid $hiremee-light;
			margin-bottom: .3rem;
		}
		& .list-inline{
			margin-bottom: .4rem;

			& .list-inline-item{
				margin-top:.6rem;
				display: block;
				padding-left: 11px;
				& a{
					color: lighten($black, 85%);
					font-size: 14px;
					font-weight: 300;
					position: relative;
					&:before{
						position: absolute;
						top: -9px;
						left: -29px;
						font-size: 11px;
						margin-right: 24px;
						font-family: 'Linearicons-Free';
					  content: "\e875";
						display: inline-block;
						width: 24px;
						height: 24px;
						transform: rotate(180deg);
					}

					&:hover{
						color: lighten($black, 100%);
					}
				}
			}
		}
	}

	& .copy-right{
		background-color: lighten($black, 15%);
		position: absolute;
		bottom: -10px;
		left: 0;
		width: 100%;
		padding: 1.3rem 0 .9rem 0;
		color: lighten($black, 70%);
		border-bottom: 6px solid $hiremee-light;
		& .credits{
			 & p{
				 margin-bottom: 8px;
				 line-height: 1.1;
			 }
		}
		& .links-inline{
			max-width: 320px;
			margin-top: -6px;
			& .list-inline{

				& .list-inline-item{
					min-width: 100px;
					padding: 2px;

					& a{
						font-size: 15px;
					}
				}
			}
		}
		& .associations{
			max-width: 460px;
			& .label{
				font-size: 15px;
				line-height: 1.1;
				text-align: left;
				margin-right: 16px;
				margin-left: 32px;
			}
			& .icon{
				width: 30px;
				margin-right: 30px;
			}
			& .logo{
				width: 60px;
				margin-left: 16px;
			}
		}
	}

	& .brand-social{
		color: lighten($black, 70%);
		font-size: .9rem;
		font-weight: 500;
		& .brand{
			margin-top: -8px;
			& img{
				width: 180px;
			}
			& .address{
				text-align: left;
				line-height: 1.4;
				margin-top: .5rem;
				margin-left: .4rem;
				font-weight: 400;
				margin-bottom: 1.2rem;
			}
			& .social{
				& a{
					width: 40px;
					height: 40px;
					display: inline-block;
				}
				& .social-link{
					width: 40px;
					height: 40px;
					margin: 0 8px 0 0;
					display: inline-block;
					&:hover{
						transform: translateY(-4px);
					}
					& img{
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
	@media screen and (max-width: $break-medium) {
		background-color: $footer-bg-light;
  	min-height: 320px;
  	width: 100%;
  	display: inline-block;
  	position: relative;
  	font-size: 16px;
  	font-weight: 400;
  	padding-bottom: 0;
  	& .links{
			margin: 16px 0;
			& .list-inline-item{
				padding: 12px;
				width: 47%;
				background-color: lighten($black, 12%);
				display: inline-block;
			}
  		& .button-cta{
  			border-radius: 4px;
  			margin: 16px 0;
  			padding: 9px 32px;
  			height: 48px;
  			background: $hiremee-light;
  			border: 2px solid $hiremee-dark;
  			font-size: 18px;
				width: 100%;
				padding: 24px;
				height: 80px;
				font-size: 24px;
  			text-transform: capitalize;
  			& :hover{
  				background-color: $hiremee-dark;
  				border: 2px solid $hiremee-light;
  			}
  		}
  		& .contact-details{
  			margin-bottom: 12px;
  			& img{
  				width: 24px;
  				margin-right: 16px;
  			}
  			& span{
  				font-size: 20px;
  				color: $white;
  				font-weight: 300;
  			}
  		}
  		& .link-header{
  			font-size: .9rem;
  			padding-left: 12px;
  			height: 20px;
  			border-left: 3px solid $hiremee-light;
  			margin-bottom: .3rem;
  		}
  		& .list-inline{
  			margin-bottom: .4rem;

  			& .list-inline-item{
  				margin-top:.6rem;
  				display: inline-block;
					padding: 12px;
  				padding-left: 40px;
					width: 47%;
  				& a{
  					color: lighten($black, 85%);
  					font-size: 14px;
  					font-weight: 300;
  					position: relative;
  					&:before{
  						position: absolute;
  						top: 4px;
  						left: -24px;
  						font-size: 10px;
  						margin-right: 24px;
  						font-family: 'Linearicons-Free' !important;
  						content: "\e876";
  						display: inline-block;
  						width: 24px;
  						height: 24px;
  						transform: rotate(0deg);
  					}

  					&:hover{
  						color: lighten($black, 100%);
  					}
  				}
  			}
  		}
  	}

  	& .copy-right{
  		background-color: lighten($black, 15%);
  		position: relative;
  		bottom: -10px;
  		left: 0;
  		width: 100%;
  		padding: 1.3rem 0 .9rem 0;
  		color: lighten($black, 70%);
  		border-bottom: 6px solid $hiremee-light;
  		& .credits{
				margin: 16px 4px;
				text-align: center;
				width: 100%;
  			 & p{
  				 margin-bottom: 8px;
  				 line-height: 1.1;
  			 }
  		}
  		& .links-inline{
  			max-width: 100%;
  			margin-top: 8px;
  			& .list-inline{

  				& .list-inline-item{
  					min-width: 100px;
  					padding: 12px;
						margin: 4px;
						background: lighten($black, 20%);
						width: 47%;
						text-align: center;
						display: inline-block;
  				}
  			}
  		}
  		& .associations{
  			max-width: 100%;
				& .associations-comp{
					width: 100%;
					margin: 24px 8px;
				}
  			& .label{
  				font-size: 18px;
					text-align: center;
					line-height: 1.3;
  				margin-right: 48px;
  				margin-left: 32px;
  			}
  			& .icon{
  				width: 40px;
  				margin-right: 24px;
  			}
  			& .logo{
  				width: 70px;
  				margin-left: 16px;
  			}
  		}
  	}

  	& .brand-social{
  		color: lighten($black, 70%);
  		font-size: .9rem;
  		font-weight: 500;
			text-align: center;
  		& .brand{
  			margin-top: -8px;
				margin: 8px auto;
  			& img{
  				width: 180px;
  			}
  			& .address{
  				text-align: center;
  				line-height: 1.4;
  				margin-top: .5rem;
  				margin-left: .4rem;
  				font-weight: 400;
  				margin-bottom: 1.2rem;
  			}
  			& .social{
					margin: 8px auto;
					text-align: center;
  				& a{
  					width: 40px;
  					height: 40px;
  					display: inline-block;
  				}
  				& .social-link{
  					width: 40px;
  					height: 40px;
  					margin: 0 8px 0 0;
  					display: inline-block;
  					&:hover{
  						transform: translateY(-4px);
  					}
  					& img{
  						width: 40px;
  						height: 40px;
  					}
  				}
  			}
  		}
  	}
 }
}

/* Section Generic Styling*/
.section-institution{
	background-color: #000;
}
.section{
	min-height: 320px;
	padding: 1.6rem .2rem;
	& .section-header{
		text-align: center;
		font-size: 1.7rem;
		font-weight: 300;
		color: lighten($black, 45%);
		padding: .4rem .2rem;

		& .divider{
			height: 2px;
	    display: block;
	    background: linear-gradient(90deg, #009245, #8FC740);
	    margin: 0 auto;
	    width: 10vw;
	    padding: .05rem;
	    margin-top: 0.8rem;
		}

	}
	& .section-content{
		color: $section-content-gray;
		font-size: .9rem;
	}

}

.flip-box-wrapper{
	width: 80%;
	margin: 1rem auto 2rem auto;
	.flipper-box{
		width: 180px;
		height: 180px;
		margin: .8rem;
		background-color: $white;
		box-shadow: .1rem .1rem .3rem lighten($black, 65%);
		display: inline-block;
	}
	@media screen and (max-width: $break-medium) {
		width: 100%;
		margin: 1rem auto 1rem auto;
	}
}

.card-flip {
  perspective: 80%;
  &:hover .flip,
  &.hover .flip {
    transform: rotateY(180deg);
  }
	&.card{
		background-color: transparent;
		background: transparent;
	}
	@media screen and (max-width: $break-medium) {
		perspective: 100%;
	}
}
.card-flip{
	margin: .4rem;
	@media screen and (max-width: $break-medium) {
		margin: .05rem;
	}
}
.card-flip,
.front,
.back {
  width: 200px;
  height: 200px;
	@media screen and (max-width: $break-medium) {
		width: 185px;
	  height: 190px;
	}
	@media screen and (max-width: $break-tab) {
		width: 165px;
	  height: 180px;
	}
	@media screen and (max-width: $break-small) {
		width: 135px;
	  height: 180px;
		& .caption{
			font-size: .9rem;
		}
	}
}
.flip {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
	position: relative;
	padding: .3rem;
	background-color: lighten($black, 88%);
	& img.card-img-top{
		width: 72px;
		height: 72px;
		position: absolute;
		top: 1.5rem;
		bottom: 0;
		left: 0;
		right: 0;
		margin:0 auto;
		@media screen and (max-width: $break-medium) {
			width: 64px;
			height: 64px;
		}
	}
	& .caption{
		position: absolute;
		top: 6.8rem;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 1.2rem;
		font-weight: 400;
		margin: 0 1.3rem;
		@media screen and (max-width: $break-medium) {
			font-size: 0.9rem;
		}
	}
}
.back {
  transform: rotateY(180deg);
	background: linear-gradient(240deg, #514F4F, #333232);
	color: $white;
	padding: .8rem;
	& .caption{
		margin-top: .6rem;
		font-size: 1.2rem;
		font-weight: 300;
		text-align: center;
		@media screen and (max-width: $break-medium) {
			font-size: 0.9rem;
		}
	}
	& p{
		font-size: .9rem;
		color: $white;
		text-align: center;
		margin-top: 1.2rem;
		line-height: 1.3;
		font-weight: 200;
	}
}

.key-feature{
	background: linear-gradient(120deg, #009245, #8FC740);
	color: $white;
	@media screen and (max-width: $break-medium) {
		background: lighten($black, 88%);
		color: lighten($black, 45%);
  }
}


.testimonial-static{
	padding-top: 2rem;
	& img{
		width: 72px;
		display: block;
		margin-bottom: 32px;
	}
	& h3{
		font-size: 30px;
		margin-bottom: 32px;
		color: lighten($black, 45%);
	}
	& p{
		font-size: 24px;
		font-weight: 300;
	}
	@media screen and (max-width: $break-medium) {
		padding-top: 24px;
		& img{
			width: 72px;
			display: block;
			margin-bottom: 32px;
			margin: 8px auto;
		}
		& h3{
			text-align: center;
		}
		& p{
			text-align: center;
		}
  }
}
.testimonial-item{
	width: 100%;
	& .testimonial-content{
		padding: 24px;
		box-shadow: 0 0 16px lighten($black, 75%);
		border-radius: 8px;
		margin: 24px;
		font-size: 16px;
		font-weight: 300;
	}
	& .user-wrapper{
		margin-left: 24px;
		& img{
			width: 48px;
			height: 48px;
			border-radius: 48px;
			margin-right: 16px;
		}
		& .content{
			& h3{
				font-size: 20px;
				font-weight: 500;
			}
			& p{
				font-size: 13px;
				font-weight: 400;
			}
		}
	}
}
#particles-js{
	height: 65vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
	& .particles-js-canvas-el{
		position: absolute;
		top:0;
	}
}
.bgm-white{
	background: lighten($black, 100%);
}
.how-works-wrapper{
	width: 260px;
	min-height: 200px;
	padding: 8px;
	display: inline-block;
	text-align: center;
	& .steps{
		display: inline-block;
		font-size: 48px;
		width: 64px;
		height: 64px;
		padding: 48px;
		border: 2px solid $white;
		border-radius: 50%;
	}
	& img{
		width: 64px;
		height: 64px;
		margin: 16px auto;
	}
	& .headeing{
		font-size: 32px;
		font-weight: 300;
	}
}
.test-library-container{
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}
/*Generic Style*/
.c-black{
	color: $black;
}
.illustration{
	float: right;
	z-index: 500;
}
.bg-white{
	background: $white !important;
}
.bg-white{
	color: $white !important;
}
/* Animations*/
@-webkit-keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
@keyframes AnimationName {
    0%{background-position:44% 0%}
    50%{background-position:57% 100%}
    100%{background-position:44% 0%}
}
.cls-6{
	animation: MoveInTop 6s infinite;
	animation-delay: 2s;
}
.check-1{
	animation: appear 3s infinite;
	animation-delay: 3s;
}
.avatar-bg{
	animation: appear 3s infinite;
	animation-delay: 5s;
}
.check-3{
	animation: Appear 3s infinite;
	animation-delay: 7s;
}
.11{
	animation: zoomIn 4s infinite;
	animation-delay: 10s;
}
.man-3-sliadeIn{
	animation: slideInLeft 3s infinite;
	animation-delay: 2s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
}
@keyframes Appear{
	0%{
		opacity: 0;
	}
	80%{
		opacity: 0.5;
	}
	100%{
		opacity: 1;
		fill: #8fc641;
	}
}
@keyframes zoomIn{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	80%{
		opacity: 0.5;
		transform: scale(1);
	}
	100%{
		opacity: 1;
		transform: scale(1.5);
	}
}
@keyframes MoveInLeft{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	}
	80%{
		transform: translateX(10px);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slideInLeft{
	0%{
		transform: translateX(0);
	}
	25%{
		transform: translateX(5px);
	}
	50%{
		transform: translateX(10px);
	}
	75%{
		transform: translateX(5px);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes MoveInTop{
	0%{
		opacity: 0;
		transform: translateX(-20px);
	}
	20%{
		transform: translateX(10px);
	}
	40%{
		opacity: 1;
		transform: translateX(0);
		fill: #d2eaad;
	}
	60%{
		opacity: .6;
		transform: translateY(10px);
	}
	80%{
		opacity: .4;
		transform: translateY(15px);
	}
	100%{
		opacity: 0;
	}
}
@keyframes MoveInRight{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}
	80%{
		transform: translateX(-10px);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

// SVG Styles
.cls-2{fill:#f0efef}
.cls-3{fill:#fff}
.cls-6{fill:#dee0e7}
.cls-7{fill:#eeeff7}
.cls-8{fill:#3d4246}
.cls-9{fill:#eea885}
.cls-10{fill:#e35354}
.cls-11{fill:#a67861}
.cls-13{fill:#d8c6c0}
.cls-14{fill:#eea986}
.cls-15{fill:#e7744e}
.cls-16{fill:#c58b71}
.cls-17{fill:#ecd9d2}
.cls-18{fill:#5173aa}
.cls-19{fill:#323757}
.cls-20{fill:#f4f5fb}
.cls-21{fill:#939393}
.cls-22{fill:#fdbe56}
.cls-23{fill:#f3f3f3}
.cls-24{fill:#141c24}
.cls-25{fill:#504a47}
.cls-28{fill:#395469}
.cls-31{fill:#706966}
.cls-33{fill:#b8dcf4}
.cls-34{fill:#e1d2ca}
.cls-40{fill:#434873}
.cls-41{fill:#2a2c47}
.cls-42{fill:#3b4048}
.cls-43{fill:#918682}
.cls-45{fill:#beb2ac}
.cls-47{fill:#ceced5}
.cls-50{fill:#1d3c55}
.cls-51{fill:#dd9673}
.cls-52{fill:#8fc641}
.cls-53{fill:#764937}
.cls-58{fill:#d78951}
.feature-wrapper{

	& .feature-items{
		width: 440px;
		min-height: 170px;
		border-radius: 4px;
		background: $white;
		padding: 16px;
		margin: 8px;
		display: inline-block;
		position: relative;
		& .icon{
			padding: 8px;
			& img{
				width: 64px;
				height: 64px;
			}
		}
		& .content{
			padding: 8px 16px 8px 16px;
			& h4{
				font-size: 17px;
			}
			& a{
				position: absolute;
				bottom: 8px;
				right: 8px;
				color: $hiremee-dark;
				padding: 8px;
				font-size: 12px;
				font-weight: 500;
				border: 1px solid $hiremee-dark;
				border-radius: 3px;
			}
		}
	}
	@media screen and (max-width: $break-tab) {
			& .feature-items{
				width: 328px;
				padding: 8px;
				margin: 4px;
				& .icon{
					padding: 4px;
					& img{
						width: 64px;
						height: 64px;
					}
				}
				& .content{
					padding: 8px;
				}
		}
	}
}
.recognization-wrapper{
	width: 100%;
	margin: 16px auto 16px auto;
	& .recognization-items{
		width: 150px;
		height: 180px;
		border-radius: 4px;
		background: $white;
		padding: 16px;
		margin: 8px;
		display: inline-block;
		@media screen and (max-width: $break-medium) {
			width: 130px;
		}
		 & img{
			 text-align: center;
			 width: 80px;
			 height: 80px;
		 }
		 & p{
			 text-align: center;
			 font-size: 15px;
			 font-weight: 500;
			 color: lighten($black, 40%);
		 }
	}
}
.dropdown-menu{
	animation: slideInUpSlow 0.2s;
}

.slicknav_nav a {
    padding: 15px;
    font-size: 18px;
		font-weight: 500;
}
// Dropdown opens on hover
@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}
@-webkit-keyframes slideInUpSlow{
	0%{
		margin-top: 48px;
		opacity: 0;
	}
	100%{
		margin-top: 0;
		opacity: 1;
	}
}

.hme-case-study{
	background-color: lighten($black, 92%);

	& .case-study-card{
		width: 300px;
		height: 360px;
		background-color: $white;
		border-radius: 2px;
		box-shadow: 0 0 5px lighten($black, 80%);
		margin: 8px;
		position: relative;
		transition: all 0.3s ease-in-out;
		&:hover{
			box-shadow: 0 0 8px lighten($black, 70%);
			transform: translateY(-3px);
			& .card-footer{
				& .card-action{
					& .btn-card{
						background-color: darken($yellow, 8%);
					}
				}
			}
		}

		& .card-header{
			height: 140px;
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 300px;
			padding: 0;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center;
			background-color: $white;

		}
		& .card-body{
			margin-top: 150px;
			padding: 8px 16px;

			& .card-title{
				font-weight: 600;
				font-size: 14px;
			}
			& .card-description{
				font-weight: 300;
				font-size: 12px;
			}
		}
		& .card-footer{
					position: relative;
					background: -webkit-linear-gradient(to bottom right, $hiremee-light, $hiremee-dark);
					background: -o-linear-gradient(to bottom right, $hiremee-light, $hiremee-dark);
					background: linear-gradient(to bottom right, $hiremee-light, $hiremee-dark);
					color: $white;
					border-radius: 0;
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 48px;
					& .card-action{
						position: absolute;
						bottom: 6px;
						right: 8px;
						& .btn-card{
							border-radius: 24px;
							padding: 8px 20px;
							font-size: 14px;
							min-width: 8px;
							background-color: rgba($black, 0.8);
							color: $white;
							transition: all 0.3s ease-in-out;
							&:hover{
								background-color: darken($yellow, 20%);
							}
						}
					}
					& em{
						font-size: 13px;
						font-weight: 500;
					}
				}
	}

}

#case-study-details{
	 & h2{
		 font-size: 24px;
		 font-weight: 400;
		 margin-bottom: 32px;
		 line-height: 1.5;
		 color: lighten($black, 5%);
		 @media screen and (max-width: $break-medium) {
				font-size: 18px;
		 }
	 }
	 & p{
		 margin: 20px 0;
		 @media screen and (max-width: $break-medium) {
				font-size: 14px;
		 }
	 }
	 & em{
		 font-size: 26px;
		 font-weight: 400;
		 padding: 16px 8px 16px 32px;
		 border-left: 4px solid $hiremee-light;
		 margin: 12px 0;
		 line-height: 32px;
		 display: inline-block;
		 & span{
				font-size: 26px;
				padding:0 2px;
				line-height: 32px;
				color: darken($hiremee-light, 10%);
				font-weight: 600;
		 }
	 }
	 & .company-info{
		 background-color: lighten($hiremee-light, 35%);
		 border-top: 8px solid darken($hiremee-light, 4%);
		 border-bottom: 8px solid darken($hiremee-light, 4%);
		 border-radius: 8px;
		 padding: 16px;
		 display: inline-block;
		 width: 100%;
		 min-height: 200px;
		 & ul{
			  & li{
					margin: 2px 0 2px -40px !important;

					&:before{
						display: none;
					}
				}
		 }
	 }
	 & .highlights{
		 background-color: lighten($hiremee-light, 30%);
		 border: 1px solid lighten($hiremee-light, 10%);
		 border-radius: 4px;
		 padding: 16px;
		 & p{
			 color: darken($hiremee-light, 20%);
			 font-size: 18px;
		 }
		 & ul{
			 margin: 0 0 0 40px;
		 }


	 }
	 & ul{
		 margin: 0 0 0 40px;
		 padding: 0;

		 & li{
			 margin: 16px 0;

			 &:before{
				 display: inline-block;
				 margin-right: 24px;
				 width: 16px;
				 content: ' ';
	       height: 14px;
	       margin-right: 8px;
	       margin-left: -25px;
	       display: inline-block;
	       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjYsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMy42IDEzLjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEzLjYgMTMuMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzNCNjAwMDt9DQo8L3N0eWxlPg0KPGcgaWQ9InJhdGUtc3Rhci1idXR0b24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTYuMzc1KSI+DQoJPGcgaWQ9InN0YXItcmF0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2LjM3NSkiPg0KCQk8cGF0aCBpZD0iUGF0aF8xMDUyIiBjbGFzcz0ic3QwIiBkPSJNNi44LDEwbDQuMiwzLjFsLTEuNi01bDQuMi0zSDguNUw2LjgsMEw1LjEsNS4xSDBsNC4yLDNsLTEuNiw1TDYuOCwxMHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
	       background-repeat: no-repeat;
	       background-size: contain;
			 }
		 }
	 }
}
.image-wrapper{
	position: relative;
	margin-top: 40px;
	padding: 20px;
	@media screen and (max-width: $break-medium) {
		min-height: 320px;
	}
	 & .drive-image{
	 	width: 280px;
	 	border: 4px solid lighten($black, 65%);
	 }
	 & .image-1{
 		position: absolute;
 		left: 0;
 		top: 0;
 		z-index: 100;
 		transition: all 0.2s ease-in-out;
 		box-shadow: 0 0 40px lighten($black, 55%);
 		&:hover{
 			z-index: 200;
 			border-color: $white;
 			transform: scale(1.4);
 		}
 	}
 	& .image-2{
 		position: absolute;
 		right: 29px;
 		top: 58px;
 		z-index: 101;
 		transition: all 0.2s ease-in-out;
 		box-shadow: 0 0 40px lighten($black, 55%);
		@media screen and (max-width: $break-medium) {
			right: 0px;
		}
 		&:hover{
 			z-index: 200;
 			border-color: $white;
 			transform: scale(1.4);
 		}
 	}
 	& .image-3{
 		position: absolute;
 		left: 86px;
 		top: 140px;
 		z-index: 102;
 		transition: all 0.2s ease-in-out;
 		box-shadow: 0 0 40px lighten($black, 55%);
		@media screen and (max-width: $break-medium) {
			left: 15px;
		}
 		&:hover{
 			z-index: 200;
 			border-color: $white;
 			transform: scale(1.4);
 		}
 	}
}
.parallax-mirror{
	width: 100% !important;
}
.data-counter-wrapper{
	width: 100%;
	margin: 20px 0;
	& .data-counter{
		padding: 20px;
		text-align: center;
		background-color: lighten($black, 85%);
		width: 20%;display: inline;
		color: lighten($black, 40%);
		border-right: 1px solid lighten($black, 65%);
		@media screen and (max-width: $break-medium) {
			width: 100%;
		}
		&:last-child{
			border-right: none;
		}
		&:first-child{
			background-color: lighten($hiremee-light, 15%);
			color: $white !important;
			border-left: 5px solid darken($hiremee-light, 5%);
			@media screen and (max-width: $break-medium) {
				border-left: none;
				border-top: 5px solid darken($hiremee-light, 5%);
			}
		}
		& h3{
			font-size: 56px;
			font-weight: 600;
			color: darken($hiremee-light, 10%);
		}
		& p{
			font-size: 17px;
			line-height: 1.3;
			font-weight: 400;
			color: darken($black, 60%);
		}
		& img{
			width: 64px;
			height: 64px;
			margin: 16px auto;
		}
		& h4{
			font-size: 24px;
			color: darken($hiremee-light, 30%);
			font-weight: 400;
		}
	}

}
.no-learning-material{
  padding: 64px;
  text-align: center;
  & img{
    width: 64px;
    height: 64px;
    margin: 24px auto;

  }
  & .end-of-record{
    font-size: 16px;
    font-weight: 300;
    & .star{
      width: 16px;
      height: 14px;
      margin-right: 3px;
      margin-left: 3px;
      display: inline-block;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy42NDYiIGhlaWdodD0iMTMuMDc3IiB2aWV3Qm94PSIwIDAgMTMuNjQ2IDEzLjA3NyI+DQogIDxnIGlkPSJyYXRlLXN0YXItYnV0dG9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC02LjM3NSkiPg0KICAgIDxnIGlkPSJzdGFyLXJhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNi4zNzUpIj4NCiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwNTIiIGRhdGEtbmFtZT0iUGF0aCAxMDUyIiBkPSJNNi44MjMsMTYuMzgybDQuMjA4LDMuMDctMS41OTItNSw0LjIwOC0yLjk1N0g4LjUyOUw2LjgyMyw2LjM3NSw1LjExNywxMS40OTJIMGw0LjIwOCwyLjk1Ny0xLjU5Miw1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtNi4zNzUpIiBmaWxsPSIjOWE5MjkyIi8+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==');
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: inherit;
  }

  .no-video .video-container video,
  .touch .video-container video {
    display: none;
  }

  .no-video .video-container .poster,
  .touch .video-container .poster {
    display: block !important;
  }

  .video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
		height: 60vh;
    width: 100%;
    //overflow: hidden;
    background: #000;
  }

  .video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
  }

  .video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
  }

  .video-container video.fillWidth {
    width: 100%;
  }
	@keyframes slideDown {
		from{
			margin-top: -8px;
			opacity: 0;
		}
		to{
			margin-top: 2px;
			opacity: 1;
		}
	}

	// Landing v2 homepage
	.v2-landing-home{
		background-image: url('/img/v2-landing/home-header-bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: center -20px;
		position: relative;
		z-index: 1;
		& .header-overlay{
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background : -moz-linear-gradient(99.17% -39.14% -160.65deg,rgba(143, 199, 64, 1) 0%,rgba(0, 146, 69, 1) 100%);
		  background : -webkit-linear-gradient(-160.65deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
		  background : -webkit-gradient(linear,99.17% -39.14% ,31.17% 84.13% ,color-stop(0,rgba(143, 199, 64, 1) ),color-stop(1,rgba(0, 146, 69, 1) ));
		  background : -o-linear-gradient(-160.65deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
		  background : -ms-linear-gradient(-160.65deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
		  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8FC740', endColorstr='#009245' ,GradientType=0)";
		  background : linear-gradient(250.65deg, rgba(143, 199, 64, 1) 0%, rgba(0, 146, 69, 1) 100%);
		  opacity : 0.75;
		  filter: alpha(opacity=55) progid:DXImageTransform.Microsoft.Alpha(opacity=55) progid:DXImageTransform.Microsoft.gradient(startColorstr='#8FC740',endColorstr='#009245' , GradientType=1);
			& .pre-header-menu{
				height: 40px;
				& .contact{
					color: lighten($black, 100%);
					font-weight: 500;
					text-shadow: 0 0 1px $black;
				}
			}
			.banner-menu{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				& .banner-menu-items{
					width: 160px;
					min-height: 100px;
					padding-bottom: 16px;
					display: inline-block;
					background: rgba($white, 0.75);
					margin: 0 4px;
					border-radius: 12px 12px 0 0;
					transition: 0.3s all ease-in-out;
					& p{
						text-align: center;
						line-height: 1.2;
						color: $black;
					}
					& .icon{
						width: 64px;
						height: 64px;
						margin: auto;
						margin-top: 8px;
						margin-bottom: 12px;
					}
					&:hover{
						background: rgba(lighten(#00602B, 0), 1);
						cursor: pointer;
						& p{
							color: $white;
						}
					}
				}
			}

		}
	}
	.bg-light-gray{
	  background: lighten($black, 88%) !important;
		margin-top: -16px;
	}
// Counter components
.counter-wrapper{
	margin: 8px auto 32px auto;
	@media screen and (max-width: $break-medium) {
		width: 160px;
	}
	& .numbers{
		min-width: 160px;
		height: 120px;
		border-radius: 8px;
		padding-top: 24px;
		background-color: linear-gradient(180deg, #009245, #8FC740);
		display: inline-block;
		margin: 16px;
		color: $hiremee-light;
		font-size: 48px;
		text-align: center;
		font-weight: 600;
	}
	& .label{
		font-size: 18px;
		text-transform: uppercase;
		text-align: center;
		color: lighten($black, 45%);
	}
	@media screen and (max-width: $break-medium) {
		margin: 8px auto 16px auto;

		.numbers{
			min-width: 140px;
    	height: 48px;
			font-size: 40px;
			padding-top: 0;
		}
	}
}
// Varaibles
$item-count: 2;
$item: 1 / $item-count;

.scrolling-box {
	font-family: 'Ubuntu', sans-serif;
  height: 40px;
  margin: auto;
  overflow: hidden;
	position: absolute;
  font-size: 24px;
  left: 16px;
  top: 50vh;
	color: $white;
	& .scrolling-box-ul{

		& .scrolling-box-li{
			margin-left: 63px;
		}
	}
	@media screen and (max-width: $break-medium) {
		display: none;
	}
}
.mobile-display{
	display: none;
	@media screen and (max-width: $break-medium) {
		display: inline-block;
		font-size: 18px;
		font-weight: 400;
		border-left: none;
		line-height: 30px;
		display: inline-block;
		margin-top: -40px;
		margin-bottom: 56px;
		padding-left: 0;
	}
}
.know-more{
	& .modal-dialog{
		max-width: 640px;
		border-color: #fff;
	}

}
.sweet-alert button{
	height: 40px;
	border-radius: 3px;
	min-width: 100px;
	background-color: #28e1bd !important;
}
.form-info-wrapper{
	width: 360px;
  height: 476px;
  display: inline-block;
  margin-right: -1px;
	background: url('/img/pro/know-more.svg') no-repeat;
	background-color: #c0e4f2;
	background-size: cover;
	@media screen and (max-width: $break-medium) {
		display: none;
	}
	& h4{
		text-align: center;
		color: lighten($black, 35%);
		font-weight: 500;
		margin: 48px 12px;
		font-size: 24px;
		text-transform: uppercase;
	}
}
.contact-form-wrapper{
	margin: 16px;
	padding: 16px;
	border-radius: 12px;
	background: darken($white, 2%);
	border: 1px solid lighten($black, 85%);
	min-height: 400px;
	color: lighten($black, 30%);
	margin-top: -115px;
	@media screen and (max-width: $break-medium) {
		margin: 0;
		margin-top: 16px;
	}
}
.association-wrapper{

	& img{
		width: 80px;
		height: 80px;
		margin: 4px;
	}
}
.c-white-gray{
  color: lighten($black, 70%) !important;
}

.features-form{
	& label {
		margin-bottom: 8px;
	}
	& .form-control{
		height: 48px;
		border-radius: 6px;
		background: rgba($white, 0.7);
	}
	& .long-text{
		resize: none;
		height: 120px;
	}
	& button{
		border-radius: 6px;
		margin-top: 16px;
		color: lighten($black, 3%);
		font-weight: 700;
		font-size: 20px;
	}
}
.width-80p{
	width: 80%;
	margin: 0 auto;
	@media screen and (max-width: $break-medium) {
		width: 100%;
		margin: 0 auto;
	}
}
// features-form
.feature-box-desc{
	width: 400px;
	min-height: 150px;
	padding: 16px;
	display: inline-block;
	box-shadow: 0 0 32px lighten($black, 85%);
	position: relative;
	overflow: hidden;
	margin: 8px;
	& .icon{
		width: 64px;
		height: 64px;
		margin: 12px;
		& img{
			width: 64px;
			height: 64px;
		}
	}
	& .content{
		width: 320px;
		padding: 8px;
		font-size: 16px;
		text-align: left;
		line-height: 1.2;
		& h6{
			font-size: 20px;
			padding-bottom: 8px;
			border-bottom: 1px solid $hiremee-light;
		}
		& p{
			font-size: 15px;
			font-weight: 400;
		}
	}
}
.parellax-wrapper{
	padding: 0 !important;
}
.feature-box{
	width: 180px;
	height: 180px;
	padding: 16px;
	display: inline-block;
	box-shadow: 0 0 32px lighten($black, 85%);
	position: relative;
	margin: 8px;
	@media screen and (max-width: $break-medium) {
		width: 160px;
	  padding: 10px;
	  margin: 4px;
	}
	& .icon{
		width: 64px;
		height: 64px;
		margin: 8px auto;

		& img{
			width: 64px;
			height: 64px;
		}
	}
	& .content{
		position: absolute;
		left: 0;
		top: 80px;
		width: 100%;
		padding: 8px;
		font-size: 18px;
		text-align: center;
		line-height: 1.2;
		margin-top: 24px;
	}

}
// Parellax Containers
.parallax-container-testimonial{
	width: 100%;
	position: relative;
	display: inline-block;
	padding: 0;

	& .testimonial-content {
	    padding: 8px;
	    box-shadow: none;
	    border-radius: 8px;
	    font-size: 16px;
	    font-weight: 500;

	}
}
.video-demo-wrapper{
	width: 680px;
	margin: 8px auto;
	margin-bottom: 24px;
	& .embed-responsive{
		height: 383px !important;
	}
	& iframe{
		width: 100%;
		height: 100%;
	}
}
.parallax-container-counter{
	text-align: center;
	min-height: 300px;
	padding: 48px 0;
	color: $white;
	& h4{
		font-size: 32px;
		font-weight: 400;
	}
	& .sub-header{
		padding: 18px;
		border-bottom: 2px solid $black;
		margin-bottom: 16px;
		display: inline-block;

	}
	& h1{
		font-size: 72px;
		font-weight: 700;
	}
	& h5{
		font-size: 24px;
		font-weight: 400;
		margin: 4px 0;
	}
}
.steps-arrow-right{
	position: absolute;
    right: -24px;
    top: 40%;
    width: 48px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    font-size: 36px;
    background: #ffffff;
    line-height: 40px;
    text-align: center;
    z-index: 500;
}
.parallax-container {
  min-height: 100px;
  width: 100%;
	position: relative;
	display: inline-block;

	& .static-pre-contact-wrap{
		background-color: rgba($white, 0.93);
		padding:4px 0;

		& .contact{
			color: lighten($black, 15%);
			font-size: 16px;
			font-weight: 500;
			margin-left: 8px;
			line-height: 16px;
		}
	}
	& .navbar{
		border-bottom: 1px solid rgba($white, 0.4);
		background-color: rgba($white, 0.3);
	}
	& .hme-pro-white-brand{
		margin-top: -5px;
	}
	& .header-inner{
		text-align: center;
		color: $white;
		& .content{
			padding-top:20px;
			@media screen and (max-width: $break-medium) {
				padding-top: 35px;
			}
			& h1{
				font-size: 32px;
				font-weight: 500;
				margin-bottom: 8px;
			}
			& h3{
				font-size: 20px;
				font-weight: 500;
				margin-bottom: 24px;
			}
		}
	}
}
// Mixit up
#accordion-nav{
	padding-bottom: 48px;
  background: rgba(255,255,255,0.75);
  border-radius: 0 0 60px 60px;
}
.cd-header {
  position: relative;
  height: 150px;
  background-color: #70e5cd;
}
.cd-header h1 {
  color: #ffffff;
  line-height: 150px;
  text-align: center;
}
@media only screen and (min-width: 1170px) {
  .cd-header {
    height: 180px;
  }
  .cd-header h1 {
    line-height: 180px;
  }
}

.cd-main-content {
  position: relative;
  min-height: 100vh;
}
.cd-main-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-main-content.is-fixed .cd-tab-filter-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.cd-main-content.is-fixed .cd-gallery {
  padding-top: 76px;
}
.cd-main-content.is-fixed .cd-filter {
  position: fixed;
  height: 100vh;
  overflow: hidden;
}
.cd-main-content.is-fixed .cd-filter form {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-main-content.is-fixed .cd-filter-trigger {
  position: fixed;
}
@media only screen and (min-width: 768px) {
  .cd-main-content.is-fixed .cd-gallery {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-main-content.is-fixed .cd-gallery {
    padding-top: 100px;
  }
}

/* --------------------------------

xtab-filter

-------------------------------- */
.cd-tab-filter-wrapper {
  background-color: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  z-index: 1;
}
.cd-tab-filter-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tab-filter {
  /* tabbed navigation style on mobile - dropdown */
  position: relative;
  height: 50px;
  width: 140px;
  margin: 0 auto;
  z-index: 1;
	@media screen and (max-width: $break-medium) {
		float: right;
		min-width: 120px;
	}
}
.cd-tab-filter::after {
  /* small arrow icon */
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-arrow.svg") no-repeat center center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}
.cd-tab-filter ul {
  position: absolute;
  top: 0;
  left: 0;
  background-color: lighten($black, 40%);
  box-shadow: inset 0 -2px 0 $hiremee-light;
	@media screen and (max-width: $break-medium) {
		background-color: lighten($black, 100%);
		color: $black;
		box-shadow: none;
	}
}
.cd-tab-filter li {
  display: none;
}
.cd-tab-filter li:first-child {
  /* this way the placehodler is alway visible */
  display: block;
}
.cd-tab-filter a {
  display: block;
  /* set same size of the .cd-tab-filter */
  height: 50px;
  width: 140px;
  line-height: 50px;
  padding-left: 14px;
	@media screen and (max-width: $break-medium) {
		color: $black;
	}
}
.cd-tab-filter a.selected {
  background: $hiremee-light;
  color: #ffffff;
}
.cd-tab-filter.is-open::after {
  /* small arrow rotation */
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}
.cd-tab-filter.is-open ul {
  box-shadow: inset 0 -2px 0 $hiremee-light, 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cd-tab-filter.is-open ul li {
  display: block;
}
.cd-tab-filter.is-open .placeholder a {
  /* reduces the opacity of the placeholder on mobile when the menu is open */
  opacity: .4;
}
@media only screen and (min-width: 768px) {
  .cd-tab-filter {
    /* tabbed navigation style on medium devices */
    width: auto;
    cursor: auto;
  }
  .cd-tab-filter::after {
    /* hide the arrow */
    display: none;
  }
  .cd-tab-filter ul {
    background: transparent;
    position: static;
    box-shadow: none;
    text-align: center;
  }
  .cd-tab-filter li {
    display: inline-block;
  }
  .cd-tab-filter li.placeholder {
    display: none !important;
  }
  .cd-tab-filter a {
    display: inline-block;
    padding: 0 1em;
    width: auto;
    color: #9a9a9a;
    text-transform: uppercase;
      }
  .no-touch .cd-tab-filter a:hover {
    color: $hiremee-light;
  }
  .cd-tab-filter a.selected {
    background: transparent;
    color: $hiremee-light;
    /* create border bottom using box-shadow property */
    box-shadow: inset 0 -2px 0 $hiremee-light;
  }
  .cd-tab-filter.is-open ul li {
    display: inline-block;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-tab-filter {
    /* tabbed navigation on big devices */
    width: 100%;
    float: right;
    margin: 0;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
  }
  .cd-tab-filter.filter-is-visible {
    /* reduce width when filter is visible */
    width: 80%;
  }
}

/* --------------------------------

xgallery

-------------------------------- */
.cd-gallery {
  padding: 26px 5%;
  width: 100%;
}
.cd-gallery li {
  margin-bottom: 1.6em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: none;
}
.cd-gallery li.gap {
  /* used in combination with text-align: justify to align gallery elements */
  opacity: 0;
  height: 0;
  display: inline-block;
}
.cd-gallery img {
  display: block;
  width: 100%;
}
.btn-no-result{
	background-color: $white;
	color: lighten($black, 40%);
	padding: 8px 24px;
	border: 1px solid lighten($black, 55%);
	&:focus{
		color: lighten($black, 5%);
	}
	&:hover{
		color: lighten($black, 100%);
		background-color: darken($white, 45%);
	}
}
.cd-gallery .cd-fail-message {
  display: none;
  text-align: center;

	& img{
		width: 80px;
		margin: 32px auto;
	}

	& h4{
		font-weight: 400;
		font-size: 24px;
		text-transform: uppercase;
		color: lighten($black, 55%);
	}
}
.cd-no-page-content-message {
  text-align: center;

	& img{
		width: 80px;
		margin: 32px auto;
	}

	& h4{
		font-weight: 400;
		font-size: 24px;
		text-transform: uppercase;
		color: lighten($black, 55%);
	}
}
@media only screen and (min-width: 768px) {
  .cd-gallery {
    padding: 40px 3%;
  }
  .cd-gallery ul {
    text-align: justify;
  }
  .cd-gallery ul:after {
    content: "";
    display: table;
    clear: both;
  }
  .cd-gallery li {
    width: 48%;
    margin-bottom: 2em;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-gallery {
    padding: 50px 2%;
    float: right;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
  }
  .cd-gallery li {
    width: 23%;
  }
  .cd-gallery.filter-is-visible {
    /* reduce width when filter is visible */
    width: 80%;
  }
}

/* --------------------------------

xfilter

-------------------------------- */
.cd-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #ffffff;
  box-shadow: 4px 4px 20px transparent;
  z-index: 2;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
  -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cd-filter::before {
  /* top colored bar */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: #444444;
  z-index: 2;
}
.cd-filter form {
  padding: 70px 20px;
}
.cd-filter .cd-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  width: 60px;
  color: #ffffff;
    text-align: center;
  background: #444444;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 3;
}
.no-touch .cd-filter .cd-close:hover {
  background: #666666;
}
.cd-filter.filter-is-visible {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}
.cd-filter.filter-is-visible .cd-close {
  opacity: 1;
}
@media only screen and (min-width: 1170px) {
  .cd-filter {
    width: 20%;
  }
  .cd-filter form {
    padding: 70px 10%;
  }
}

.cd-filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  width: 60px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  color: #333;
  white-space: nowrap;
  background: transparent url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzMC4wNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNlZmUyZGQ7fS5jbHMtMntmaWxsOiNmN2YxZWM7fS5jbHMtM3tmaWxsOiM3ZmI3ZTM7fS5jbHMtNHtmaWxsOiMzNWI2NjY7fS5jbHMtNXtmaWxsOiNmYmFlMTg7fS5jbHMtNntmaWxsOiNkM2Q0ZDg7fS5jbHMtN3tmaWxsOiNmZGNjMDk7fS5jbHMtOHtmaWxsOiNiYmJhYzA7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5zb2NpYWwtcG9zdC1BcnRib2FyZCAxPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMy40NywxLjI3SDE3bC00LjgyLjU0LS41OCwxMy4yNC41OCwxMy43OEgyMy40N1oiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0uOTEsMS4yN1YyOC44M0gxMi4xOXYtMjdMNy4zOCwxLjI3WiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTUuNTksOS42NUg3LjI4djEuNjJINS41OVoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01LjU5LDEzLjFINy4yOHYxLjYxSDUuNTlaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNNS41OSwxNi41NEg3LjI4djEuNjJINS41OVoiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik01LjU5LDIxLjcxaDQuM3YxLjYxSDUuNTlaIi8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTQuNDgsMjQuOGwtMi4yOS0yLjI5LDEuMTQtMS4xNCwxLjE1LDEuMTUsMi4zLTIuMywxLjE1LDEuMTRaIi8+PHBhdGggY2xhc3M9ImNscy01IiBkPSJNMTcsMS4yN0gxMi4xOUwxMSwzLjU3bDEuMTUsMkgxN1oiLz48cGF0aCBjbGFzcz0iY2xzLTciIGQ9Ik03LjM2LDEuMjdoNC44M1Y1LjUzSDcuMzZaIi8+PHBhdGggY2xhc3M9ImNscy04IiBkPSJNMTguNzksMTEuMjdWOS42NWgtNi42bC0uNTguODEuNTguODFaIi8+PHBhdGggY2xhc3M9ImNscy04IiBkPSJNMTguNzksMTQuNzFWMTMuMWgtNi42bC0uNTguOC41OC44MVoiLz48cGF0aCBjbGFzcz0iY2xzLTgiIGQ9Ik0xOC43OSwxOC4xNlYxNi41NGgtNi42bC0uNTguODEuNTguODFaIi8+PHBhdGggY2xhc3M9ImNscy02IiBkPSJNOC45LDkuNjVoMy4yOXYxLjYySDguOVoiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik04LjksMTMuMWgzLjI5djEuNjFIOC45WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTguOSwxNi41NGgzLjI5djEuNjJIOC45WiIvPjwvc3ZnPg==") no-repeat center center;
  z-index: 3;
	background-size: 14%;
	@media screen and (max-width: $break-medium) {
		background-size: 56%;
	}
}
// .cd-filter-trigger.filter-is-visible {
//   pointer-events: none;
// }
.test-box{
	background: $white;
	width: 180px;
	height: 220px;
	padding: 8px;
	text-align: center;
	@media screen and (max-width: $break-medium) {
		width: 160px;
	}
	&:hover{
		& .cta-btn{
			&:hover{
				background: #45484d; /* Old browsers */
				background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
				color: lighten($black, 100%);
				font-weight: 400;
			}
		}
	}
	& img{
		margin: 8px auto;
		height: 40px;
		width: auto;
	}
	& h3{
		font-size: 16px;
		font-weight: 400;
		color: lighten($black, 40%);
		margin: 8px 0;
		height: 40px;
		line-height: 1.2;
	}
	& .cta-btn{
		border-radius: 3px;
		background: #4c4c4c; /* Old browsers */
		background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
		width: 120px;
		padding: 8px;
		margin-top: 10px;
		color: #fff;
		font-size: 15px;
		text-transform: uppercase;
	}
}
#test-lead{
  & .alert-content{
    font-size: 13px;
		margin-bottom: 24px;
		& .info-icon{
			width: 32px;
			height: 32px;
			border-radius: 50%;
			display: inline-block;
			background-color: $blue;
			color: $white;
			line-height: 32px;
			text-align: center;
			font-size: 24px;
			margin-right: 8px;
		}
		& p{
			width: 80%;
			margin: 0 !important;
		}
  }
}
.hme-modal-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 56px;
    height: 56px;
    opacity: 1;
    font-size: 30px;
    color: #333333;
    text-align: center;
    line-height: 56px;
    z-index: 1;
		background: transparent;
		&:hover{
			background: transparent;
			color: #000000;
		}
}
.modal-header{
	font-size: 20px;
	font-weight: 400;
}
.btn-test-more{
  background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
	border-radius: 3px;
	color: $white;
	padding: 10px 30px;
	width: 180px;
}
@media only screen and (min-width: 1170px) {
  .cd-filter-trigger {
    width: auto;
    left: 2%;
    text-indent: 0;
    color: #9a9a9a;
    text-transform: uppercase;
            padding-left: 24px;
    background-position: left center;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
  }
  .no-touch .cd-filter-trigger:hover {
    color: $hiremee-light;
  }
  .cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover {
    color: #ffffff;
  }
}

/* --------------------------------
xcustom form elements
-------------------------------- */
.cd-filter-block {
  margin-bottom: 1.6em;
}
.cd-filter-block h4 {
  font-size: 15px;
  position: relative;
  margin-bottom: .2em;
  padding: 10px 0 10px 20px;
  color: lighten($black, 35%);
	font-weight: 400;
  text-transform: uppercase;
      -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.no-touch .cd-filter-block h4:hover {
  color: $hiremee-light;
}
.cd-filter-block h4::before {
  /* arrow */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
	margin-right: 8px;
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBkYXRhLW5hbWU9IkNhcGEgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTY2NGI2O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c29jaWFsLXBvc3QtQXJ0Ym9hcmQgMTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMuMTksMTEsMTYuNDUsNC4yMkExLjA1LDEuMDUsMCwxLDAsMTUsNS43MWw0Ljk0LDVoLTE4YTEsMSwwLDEsMCwwLDIuMWgxOGwtNC45NCw1YTEuMDYsMS4wNiwwLDAsMCwwLDEuNDksMSwxLDAsMCwwLC43NC4zMSwxLjA1LDEuMDUsMCwwLDAsLjc1LS4zMWw2Ljc0LTYuNzRBMS4wNiwxLjA2LDAsMCwwLDIzLjE5LDExWiIvPjwvc3ZnPg==") no-repeat center center;
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-filter-block h4.closed::before {
  -webkit-transform: translateY(-50%) rotate(0deg);
  -moz-transform: translateY(-50%) rotate(0deg);
  -ms-transform: translateY(-50%) rotate(0deg);
  -o-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
}
.cd-filter-block input, .cd-filter-block select,
.cd-filter-block .radio-label::before,
.cd-filter-block .checkbox-label::before {
  /* shared style for input elements */  border-radius: 0;
  background-color: #ffffff;
  border: 2px solid #e6e6e6;
}
.cd-filter-block input[type='search'],
.cd-filter-block input[type='text'],
.cd-filter-block select {
  width: 100%;
  padding: .8em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  box-shadow: none;
}
.cd-filter-block input[type='search']:focus,
.cd-filter-block input[type='text']:focus,
.cd-filter-block select:focus {
  outline: none;
  background-color: #ffffff;
  border-color: $hiremee-light;
}
.cd-filter-block input[type='search'] {
  /* custom style for the search element */
  border-color: transparent;
  background-color: #e6e6e6;
  /* prevent jump - ios devices */
  font-size: 1rem !important;
}
.cd-filter-block input[type='search']::-webkit-search-cancel-button {
  display: none;
}
.cd-filter-block .cd-select {
  /* select element wrapper */
  position: relative;
}
.cd-filter-block .cd-select::after {
  /* switcher arrow for select element */
  content: '';
  position: absolute;
  z-index: 1;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  width: 16px;
  height: 16px;
  background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-arrow.svg") no-repeat center center;
  pointer-events: none;
}
.cd-filter-block select {
  cursor: pointer;
}
.cd-filter-block select::-ms-expand {
  display: none;
}
.cd-filter-block .list li {
  position: relative;
  margin-bottom: .8em;
}
.cd-filter-block .list li:last-of-type {
  margin-bottom: 0;
}
.cd-filter-block input[type=radio],
.cd-filter-block input[type=checkbox] {
  /* hide original check and radio buttons */
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 2;
}
.cd-filter-block .checkbox-label,
.cd-filter-block .radio-label {
  padding-left: 24px;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before {
  width: 16px;
  height: 16px;
  left: 0;
}
.cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::after {
  /* check mark - hidden */
  display: none;
}
.cd-filter-block .checkbox-label::after {
  /* check mark style for check boxes */
  width: 16px;
  height: 16px;
	left: 0;
  background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-check.svg") no-repeat center center;
}
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
  border-radius: 50%;
}
.cd-filter-block .radio-label::after {
  /* check mark style for radio buttons */
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  left: 5px;
}
.cd-filter-block input[type=radio]:checked + label::before,
.cd-filter-block input[type=checkbox]:checked + label::before {
  border-color: $hiremee-light;
  background-color: $hiremee-light;
}
.cd-filter-block input[type=radio]:checked + label::after,
.cd-filter-block input[type=checkbox]:checked + label::after {
  display: block;
}

@-moz-document url-prefix() {
  /* hide custom arrow on Firefox - select element */
  .cd-filter-block .cd-select::after {
    display: none;
  }
}
// e-book-header
.main-content {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.pdf-reader{

	& iframe{
		width: 100%;
		height: 90vh;
	}
	& embed{
		width: 100%;
		height: 90vh;
	}
}
h1 {
  width: 100%;
  margin: 0 auto 0.5em;
  font-size: 30px;
  small {
    text-transform: none;
    display: block;
    margin: 16px 0;
    font: 300 20px 'QuickSand', sans-serif;
    color: #999;
  }
}

.wrapper {
  max-width: calc(100% / 4);
  min-width: 100%;
}
.book {
  height: 250px;
  width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 32px;
  perspective: 800px;
  &:hover {
    // Change to make others effects
    transform: rotateZ(-8deg);
    .book__cover {
      transform: rotateY(-40deg);
      z-index: 999;
      box-shadow: 20px 10px 50px rgba(0,0,0,0.2);
    }
  }

  &__cover {
    height: 250px;
    width: 175px;
    position: absolute;
    border-radius: 5px 15px 15px 5px;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: .5s linear;
    transform-style: preserve-3d;
    transform-origin: left center 0px;
    background-size: 180px 255px;
  }

  &__detail {
    background-color: rgba(51, 51, 51, 0.8);
    position: absolute;
		bottom: 30px;
		left: 0;
		width: 100%;
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    z-index: 10;
    color: #fff;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }

  &__page {
    height: 100%;
    width: 175px;
    position: absolute;
    background-color: #fbfae8;
    z-index: 0;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    border-radius: 5px 16px 16px 5px;
    overflow: hidden;
    &.ruled {
      background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
      background-size: 100% 10px;
    }
    &.squared {
          background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
      background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
    }
    &.dotted {
          background: linear-gradient(90deg, #fbfae8 10px, transparent 1%) center, linear-gradient(#fbfae8 10px, transparent 1%) center, #999;
      background-size: 11px 11px;
    }
  }

}