.main-left {
	@include up-md {
		padding-left: 95px;
	}
}

.particles-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.video-bg {
	overflow: hidden;
}

/* Home Banner 1
----------------------*/
.home-banner-01 {
	position: relative;
	@include down-sm {
		background-position: 70% center;
	}
	.container {
		position: relative;
		z-index: 1;
	}
	.ht-text {
		@include down-sm {
			background: rgba($px-white, 0.8);
			padding: 25px;
		}
	}
	h6 {
		color: $px-dark;
		font-size: 18px;
		margin: 0 0 15px;
		@include down-md {
			font-size: 15px;
		}
		@include down-sm {
			font-size: 14px;	
		}
	}
	h1 {
		font-size: 60px;
		color: $px-dark;
	    font-weight: 600;
	    margin: 0 0 15px;
	    line-height: 1;
	    @include down-md {
			font-size: 40px;
		}
		@include down-sm {
			font-size: 35px;
		}
	}
	h2 {
	    font-weight: 500;
		font-size: 20px;
		color: $px-dark;
		margin: 0 0 15px;
		@include down-md {
			font-size: 18px;
		}
		@include down-sm {
			font-size: 16px;
		}
		> span {
			border-bottom: 1px solid $px-dark;
		}
	}
	p {
	   color: rgba($px-dark,.8);
		margin: 0;
	}
	.btn-bar {
		padding-top: 25px;
		a {
		    min-width: 120px;
			margin-right: 12px;
		}
	}

	.go-to-next {
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		width: 35px;
		margin: auto;
		z-index: 1;
		text-align: center;
		a {
			width: 35px;
			height: 35px;
			position: relative;
			display: inline-block;
			background: $px-theme;
			border-radius: 50%;
			animation: down 1s linear infinite;
			-webkit-animation: down 1s linear infinite;
			span {
				border-top: 1px solid $px-white;
				border-right: 1px solid $px-white;
				width: 10px;
				height: 10px;
				position: absolute;
				top: -6px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				@include rotate(135); 
			}
		}
	}
}

@-webkit-keyframes down {
    0%   { top:5px; opacity: 0; }
    30%  { top:15px; opacity: 1; }
    60%  { top:15px; opacity: 0.60; }
    100% { top:25px; opacity: 0; }
}

@keyframes down {
    0%   { top:5px; opacity: 0; }
    30%  { top:15px; opacity: 1; }
    100% { top:25px; opacity: 0; }
}


/* Home Banner 2
----------------------*/
.home-banner-02 {
	position: relative;
	&:after {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $px-dark;
		opacity: 0.8;
	}
	.container {
		position: relative;
		z-index: 1;
	}
	h6 {
		color: $px-white;
		font-size: 24px;
		margin: 0 0 8px;
		@include down-md {
			font-size: 15px;
		}
		@include down-sm {
			font-size: 14px;	
		}
	}
	h1 {
		font-size: 80px;
		color: $px-white;
	    font-weight: 600;
	    margin: 0 0 25px;
	    line-height: 1.3;
	    @include down-md {
			font-size: 50px;
		}
		@include down-sm {
			font-size: 35px;
		}
	}

	.ht-list {
		span {
			background: rgba($px-white, 0.13);
		    margin: 0 3px;
		    padding: 7px 20px;
		    font-size: 12px;
		    font-weight: 400;
		    text-transform: uppercase;
		    color: $px-white;
		    border-radius: 30px;
		    letter-spacing: 1px;
	    }
	}

	.social-icons {
		a {
			background: rgba($px-white, 0.13);
		    margin: 0 3px;
		    width: 45px;
		    height: 45px;
		    line-height: 45px;
		    display: inline-block;
		    font-size: 18px;
		    color: $px-white;
		    border-radius: 50%;
		    &:hover {
		    	background: $px-white;
		    	color: $px-dark;
		    }
		}
	}

	.btn-bar {
		padding-top: 25px;
	}

	.go-to-next {
		position: absolute;
		bottom: 30px;
		left: 0;
		right: 0;
		width: 35px;
		margin: auto;
		z-index: 1;
		text-align: center;
		a {
			width: 35px;
			height: 35px;
			position: relative;
			display: inline-block;
			background: $px-white;
			border-radius: 50%;
			animation: down 1s linear infinite;
			-webkit-animation: down 1s linear infinite;
			span {
				border-top: 1px solid $px-dark;
				border-right: 1px solid $px-dark;
				width: 10px;
				height: 10px;
				position: absolute;
				top: -6px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				@include rotate(135); 
			}
		}
	}
}

/* home-banner-03
----------------------*/
.home-banner-03 {
	.full-scree {
		height: 100vh;
		background-size: cover;
		background-position: center; 
	}
	.ht-text {
		padding: 5%;
		max-width: 700px;
		@include down-md {
			padding: 15% 5%;
		}
		h1 {
			color: $px-dark;
			font-size: 65px;
			font-weight: 600;
			@include down-md {
				font-size: 50px;
			}
			@include down-sm {
				font-size: 40px;
			}
		}
		p {
		    font-size: 18px;
			margin: 0 0 25px;
		}
	}
	.social-icons {
		a {
			background: $px-theme;
			text-align: center;
		    margin: 0 7px 0 0;
		    width: 35px;
		    height: 35px;
		    line-height: 35px;
		    display: inline-block;
		    font-size: 16px;
		    color: $px-white;
		    border-radius: 3px;
		    &:hover {
		    	background: $px-dark;
		    	color: $px-white;
		    }
		}
	}
}

/* About Us
----------------------*/
.about-me-img {
	border: 14px solid $px-white;
	border-radius: 5px;
	position: relative;
	.social-icon {
		width: 50px;
	    position: absolute;
	    top: 20px;
	    left: -10px;
	    background: $px-white;
	    padding: 8px;
		a {
			width: 34px;
			height: 34px;
			line-height: 34px;
			text-align: center;
			background: $px-theme;
			color: $px-white;
			margin: 3px 0;
			font-size: 12px; 
			&:hover {
				background: $px-dark;
			}
		}
	}
	.btns{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		a {
			flex: 0 0 50%;
			max-width: 50%;
			background: $px-theme;
			padding: 10px 5px;
			color: $px-white;
			text-decoration: none;
			text-align: center;
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 0.045rem;	
			&:hover {
				background: $px-dark;
			}
			+ a {
				border-left: 1px solid $px-white;
			}
		}
	}
}
.about-me {
	@include up-md {
		padding-left: 40px;
	}
	h4 {
		font-weight: 600;
	    font-size: 30px;
	    margin: 0 0 10px;
	    color: $px-dark;
	}
	h6 {
		color: $px-dark;
		font-weight: 400;
    	margin: 0 0 20px;
	}
	.about-list {
		padding-top: 10px;
	}
	.media {
	    padding: 6px 0;
    	line-height: normal;
		label {
		    margin: 0;
		    color: $px-dark;
		    font-weight: 500;
		    font-size: 14px;
		    flex: 0 0 90px;
		    border-right: 1px solid #c1c1c1;
		    max-width: 90px;
		}
		p {
		    margin-bottom: 0;
		    padding-left: 15px;
		    font-size: 14px;
		}
	}
	.btn-bar {
		margin-top: 30px;
	}
}

/* fun
------------------*/
.feature-box-2 {
	padding: 18px 15px;
	border-radius: 5px;
	background: $px-white;
	border: 2px solid $px-theme;
	box-shadow: 0px 30px 60px 0px rgba(38, 59, 94, 0.1);
	@include transition(ease all 0.35s); 
	.icon {
	    font-size: 30px;
	    width: 50px;
	    height: 50px;
	    line-height: 50px;
	    color: $px-theme;
	}
	h5 {
		margin: 0;
		font-size: 16px;
		color: $px-dark;
	}
	&:hover {
		background: $px-white;
		
		.icon {
			color: $px-theme;
		}
		h5 {
			color: $px-dark;
		}
	}
}

/* Services
------------------*/
.feature-box-1 {
	padding: 40px 30px;
	background: $px-white;
    border: 1px solid #eee;
	border-radius: 5px;
	position: relative;
	top: 0;
	@include transition(ease all 0.35s); 
	.icon {
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border-radius: 50%;
		border: 2px dotted $px-theme;
		color: $px-theme;
		font-size: 32px;
		margin-bottom: 22px;
	}
	h5 {
		color: $px-dark;
		font-weight: 500;
		font-size: 16px;
		margin: 0 0 12px;
	}
	p {
		margin: 0;
	}
	&:hover {
		background: $px-theme;
		border-color: $px-theme;
		top: -10px;
		.icon {
			border-color: $px-white;
			color: $px-white;
		}
		h5 {
			color: $px-white;
		}
		p {
			color: rgba($px-white, 0.6);
		}
	}
}

/* Portfolio
------------------*/
.portfolio-content {
	margin-left: -10px;
	shape-margin: -10px;
	.grid-item {
		padding: 10px;
		width: calc(100% / 3);
		float: left;
		@include down-md {
			width: calc(100% / 2);
		}
		@include down-xsm {
			width: 100%;
		}
	}
}
.portfolio-box-01 {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	.link-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	img {
		@include scale(1);
		@include transition(ease all 0.35s);
	}
	.portfolio-info {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba($px-dark, 0.5);
		@include transition(ease all 0.35s);
		opacity: 0;
		@include flexbox;
		@include flex-direction(column);
		@include justify-content(center);
		@include align-items(center);
		h5 {
			color: $px-white;
		    font-size: 25px;
		    font-weight: 600;
		    display: inline-block;
		    margin: 0 0 10px;
		    position: relative;
		    @include transition(ease all 0.35s);
		    left: -25px;
		    @include down-md {
		    	font-size: 20px;
		    }
		}
		span {		    
		    color: rgba($px-white, 0.8);
		    font-weight: 500;
		    padding: 2px 12px;
		    display: inline-block;
		    vertical-align: top;
		    font-size: 14px;
		    @include transition(ease all 0.35s);
		    position: relative;
		    left: -25px;
		}
	}
	&:hover {
		.portfolio-info {
			opacity: 1;
			h5 {
				left: 0;
			}
			span {
				left: 0;
			}
		}
		img {
			@include scale(1.1);
		}
	}
}


/* Testimonials
------------------*/
.testimonial-col-01 {
	background: $px-white;
	padding: 20px;
	margin-top: 15px;
	margin-bottom: 25px;
	border: 1px solid #edd;
	.img {
		width: 120px;
		height: 120px;
		overflow: hidden;
		border-radius: 50% 0 50% 50%;
		@include down-sm {
			width: 60px;
			height: 60px;
		}
	}
}

/* Blog
------------------*/
.blog-grid {
	.blog-gird-info{
	    background: $px-white;
	    margin: -30px 10px 0;
	    position: relative;
	    padding: 18px;
	    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.19);
	    .date {
    	    background: $px-theme;
		    font-size: 12px;
		    position: absolute;
		    top: -27px;
		    padding: 4px 20px;
		    color: $px-white;
		    border-radius: 0;
		    left: 0px;
	    }
	    .meta {
	    	background: $px-white;
		    padding: 0px 12px;
		    display: inline-block;
		    vertical-align: top;
		    font-size: 12px;
		    border-radius: 3px;
		    border: 1px solid #ddd;
	    }
	    .b-meta {
	    	margin-bottom: 8px;
	    }
	    h5 {
	    	font-weight: 500;
    		font-size: 17px;
    		a {
    			color: $px-dark;
    		}
	    }
	}
}

/* Contact Us
------------------*/
.contact-form {
	border-radius: 5px;
	background: $px-white;
	padding: 5%;
	h4 {
		font-weight: 600;
	    font-size: 18px;
	    text-transform: uppercase;
	    color: $px-dark;
	    margin-bottom: 20px; 
	}
	.form-group {
		position: relative;
		margin-bottom: 20px;

		.input-focus-effect {
			position: absolute;
			bottom: -1px;
			left: auto;;
			right: 0;
			width: 0px;
			height: 2px;
			@include transition(ease all 0.35s); 
		}
		.form-control {
		    border: none;
		    border-bottom: 1px solid #ccc;
		    border-radius: 0;
		    padding-left: 0;
		    box-shadow: none;
		    font-size: 14px;
		    &.invalid {
				border-color:#ff0000;
				&:focus {
					+ .input-focus-effect {
						background:#ff0000;
					}
				}
			}
		    &:focus {
		    	+ .input-focus-effect {
		    		width:100%;
		    		right: auto;
		    		left: 0;
		    	}
		    }
		}
		textarea {
			height: 80px;
		}
	}
}
.contact-info {
	background: $px-white;
	padding: 20px;
	&:not(:first-child) {
		margin-top: 20px;
	}
	.icon {
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		color: $px-white;
		background: $px-theme;
	    font-size: 19px;
	    line-height: 40px;
	    margin-right: 20px;
	}
	.media-body {
		h6 {
			font-size: 15px;
			font-weight: 500;
			color: $px-dark;
			margin-bottom: 8px;
		}
		p {
			margin: 0;
			font-size: 14px;
		}
	}
}