whmcsCrosterTemplates/assets/less/home.less

.mass-head {
	position: relative;
	overflow: hidden;
}

.domains-section {
	position: relative;
	.domain-hero {
		position: relative;
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		
		.form-search {
			width: 100%;
			max-width: 600px;
		}
		
		@media(min-width: 992px) and (max-width: 1200px) {
			.form-search {
				max-width: 490px;
			}
		}
		
		.domain-pricing {
			display: flex;
			align-items: center;
			margin-top: 10px;
			.featured-tlds {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				
				div {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					padding-right: 10px;
					margin-right: 10px;
					border-right: 1px solid @default-border-color;
					
					&:last-child {
						margin-right: 0;
						padding-right: 0;
						border: 0 none;
					}
					
					&.tld-img {
						img {
							vertical-align: baseline;
							margin-top: 6px;
						}					
					}
				}
				.tld, .dots {
					font-weight: 900;
					margin-right: 4px;
				}
				.tld {
					font-size: 1.2rem;
				}
				.dots {
					margin-right: 0;
					color: @themeColor;
				}
				
			}
		}
		.serach-form {
			display: flex;
			align-items: center;
			position: relative;
			background: @white;
			width: 100%;
			padding: 6px;
			margin: 0 auto;
			border-radius: 4px;
			border: 1px solid @default-border-color;
			
			.form-control {
				border: 0 none;
				box-shadow: none;
			}
			
			.input-group-icon {
				margin: 0 8px;
				font-size: 18px;
				color: @gray-light;
			}

			.input-group-btn {
				display: flex;
				width: auto;
				margin-left: 8px;
				
				.btn {
					min-width: 110px;
				}
			}
		}
		
		@media (max-width: 586px) {
			.serach-form {
				display: block;
				background: 0 0;
				border: 0 none;
				box-shadow: none;
				
				.domain-pricing {
					margin-top: 15px;
				}
				
				.input-group-icon {
					display: none;
				}
				.form-control {
					margin-bottom: 7.5px;
					border: 1px solid @default-border-color;
					width: 100%;
				}
				
				.input-group-btn {
					width: 100%;
					margin-left: 0;
					
					.btn {
						flex: 1;
					}
				}
			}
		}
		
		@media (min-width: 992px) {
			flex-direction: row;
			.form-search {
				margin-left: 15px;
				order: 2;
			}
			.domain-pricing	{
				margin: 0 15px 0 0;
				order: 1;
			}			
		}
		
		&.in-inner-block {
			.form-search {
				max-width: 768px;
			}
			.domain-pricing {
				margin: 30px 0 0;
				.featured-tlds {
					div {
						padding: 8px; margin-top: 8px;
						border: 1px solid @default-border-color;
						border-radius: 4px;
						.tld {
							font-size: 19px;
						}
					}
				}
			}
			.serach-form {
				box-shadow: 0 4px 16px 0 rgba(19,26,44,.02), 0 0 32px 0 rgba(19,26,44,.1);
			}
			

		}

		.tld-content {
			display: flex;
			align-items: center;
			position: relative;
			padding: 8px 40px;
			
			&.tld-img {
				img {
					vertical-align: baseline;
					margin-top: 6px;
				}					
			}
			.tld, .dots {
				font-weight: 900;
				margin-right: 8px;
			}
			.tld {
				font-size: 19px;
			}
			.dots {
				margin-right: 0;
				color: @themeColor;
			}

			.tld-price {
				white-space: nowrap;
			}				
		}
		.tld-content+.tld-content:before {
			content: "";
			width: 1px;
			height: 24px;
			background: @default-border-color;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
			
		
		&.full-width {
			padding: 0;
			align-items: normal;
			.form-search {
				margin-bottom: 10px;
				width: 100%;
				max-width: 100%!important;
				order: 1;
				@media (max-width: 633px) {
					margin-top: 10px;
				}
				
			}
			.serach-form {
				border-top-width: 2px;
				padding: 3px;
			}
			.domain-pricing {
				justify-content: space-between;
				margin-bottom: 10px;
				order: 2;
				@media (max-width: 767px) {
					flex-direction: column;
				}				
				.featured-tlds {
					justify-content: left;
					margin-left: 10px;
					
				}
				.btn {
					padding: 10px;
				}
			}
			@media (min-width: 992px) {
				flex-direction: column;
				.form-search {
					margin-left: 0;
				}
				.domain-pricing	{
					margin-right: 0;
				}			
			}			
		
		}
	}
	
	&.sec-img-bg {
		background-image: url(../../images/sec-bg10.jpg);
	}
	
	&.bg-primary {
		.domain-hero .domain-pricing {
			.dots {
				color: @white;
			}
		}
	}
	
	&.bg-primary, &.dark, &.inverse {
		.domain-hero .domain-pricing {
			.tld-content {
				&.tld-img {
					.tld {
						img {
							 -webkit-filter: brightness(0) invert(1);
							filter: brightness(0) invert(1);
						}
					}
				}			
			}
			.featured-tlds {
				.tld-img {
					.tld {
						img {
							 -webkit-filter: brightness(0) invert(1);
							filter: brightness(0) invert(1);
						}
					}
				}			
			}
		}
	}
}

@media (min-width:1200px) {
	.container-xl {
		width: 100%;
		max-width: 1520px;
	}
}


section, .sec {
	&.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner-domain  {
		padding: 60px 0;
		
		&.inner-30 {
			padding: 30px 0;
		}
		
		h1, h2, .h1, .h2 {
			margin: 0 0 30px;
		}
		
		.domain-hero {
			flex-direction: column!important;
			.form-search, .domain-pricing {
				margin: 0;
			}
			.domain-pricing {
				margin-top: 20px;
				order: 2;
			}
		}
	}
	
	.tech-specs {
		ul {
			margin-bottom: 0;
			li {
				position: relative;
				list-style: none;
				font-size: 110%;
				padding: 2px 0 2px 20px;
				
				&:before {
					position: absolute;
					content: "\f058";
					margin-right: 4px;
					font-family: "Font Awesome 5 Pro";
					color: @themeColor;
					font-size: @baseFontSize + 2;
					left: 0;
				}
			}
		}
	}
	
	
	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		border: 1px solid @brand-secondary;
		border-radius: 0!important;
		background-color: @white;
	}
	.swiper-pagination-bullet-active {
		border-color: @brand-secondary;
		background-color: lighten(@brand-secondary, 20%);
		transform: scale(1.2);
	}
	.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
		opacity: 0;
	}
	.swiper-button-next, .swiper-button-prev {
		top: 50%;
		transform: translateY(-50%);
		height: auto;
        margin: 0;
		
		.btn_icon_large {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			padding: 15px;
			background-color: var(--white);
			box-shadow: 2px 15px 30px rgba(0, 0, 0, .15);
			font-size: 21px;
		}
		&:after {
			display: none;
		}
	}

	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
		left: -40px;
	}

	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
		right: -40px;
	}

	@media (min-width: 1200px) {
		.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
			left: -60px;
		}

		.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
			right: -60px;
		}
	}

	@media (max-width: 991px) {
		.swiper-button-next, .swiper-button-prev {
			.btn_icon_large {
				padding: 10px;
				font-size: @baseFontSize;
			}
		}
		.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
			left: -5px;
		}

		.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
			right: -5px;
		}
	}
}

@media (min-width: 992px) {
	section, .sec {
		&.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner-domain {
			padding: 120px 0;
			
			&.inner-t-60 {
				padding-top: 60px;
			}
			&.inner-t-30 {
				padding-top: 30px;
			}
			&.inner-b-60 {
				padding-bottom: 60px;
			}
			&.inner-b-30 {
				padding-bottom: 30px;
			}
		}
		.tech-specs {	
			h3, .h3 {
				border-bottom: 3px double @default-border-color;
				padding: 0 0 10px 10px;
			}
			ul {
				padding-left: 0;
			}
		}
	}
}

section, .sec {
	&.products {
		&.margin-up {
			padding: 0 0 60px;
			z-index: 2;
			
			.@{brand}-pricing-container {
				margin-top: -100px;
			}
		}
	}
	
	&.call-to-action, .sec_banner {
		.sec-title {
			margin: 0 0 1.5rem;
		}
		.sec-desc  {
			margin-top: 1.5rem;
		}
		.sec-actions {
			padding-top: 2rem;
		}
		&.sec-col-2 {
			.sec-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				
				.sec-col-first, .sec-col-last {
					img {
						margin: 0 auto;
					}
				}
			}
			
			@media only screen and (max-width: 767px) {
				.sec-block {
					flex-direction: column;	
					.sec-col-first, .sec-col-last {
						margin-bottom: 30px;
					}

				}		
			}
		}
	}
}

@media only screen and (max-width: 991px) {
	section,.sec {
		&.footer {
			&.spc {
				padding-bottom: 170px;
			}
		}
	}
}

section, .sec {
	&.social {
		.news-blocks {
			.card {
				.card-body {
					padding: 0;
				}
				.card-footer {
					padding: 0.75rem 0 0;
					background-color: transparent;
					border: 0 none;
				}
			}
		}
	}

}

section, .sec {
	&.products, &.about, &.social, &.testimonials, &.features, &.faqs, &.editor, &.feature-list, &.teamlist, &.gallery, &.domains, &.site-banner, &.site-banner-domain {
		.sec-description {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			max-width: 768px;
			margin: 0 auto 3rem;
		}
		.sec-caption {
			display: block;
			margin-bottom: @headings-margin-bottom * 2;
			span {
				display: inline-block;
				border: 1px solid var(--primary);
				padding: .08em .5em;		
			}
		}
		
		h1, .h1 {
			&.sec-title {
				font-size: @font-size-base * 3;
				font-weight: 900;
				margin-bottom: @headings-margin-bottom * 3;
			}		
		}
		
		h2, .h2 {
			&.sec-title {
				font-size: @font-size-base * 2.5;
				font-weight: 700;
				margin-bottom: @headings-margin-bottom * 3;
			}		
		}
		.sec-subtitle {
			font-size: @h5-font-size;
			font-weight: 300;
			
			ul {
				text-align: left;
			}
		}
		
		#enableSoundButton {
			background-color: rgba(0,0,0,0.6);
			color: var(--white);
			border-radius: 0.75rem;
			position:absolute;
			padding: 0.5rem;
			top:1rem;
			right: 2rem;
			width: auto;
			
			.btn-text {
				display: none;
				transition: all 0.2s ease-in-out;
			}
			
			&:hover, &:focus {
				.btn-text {
					display: inline-block;
					
				}
			}
		}
	}
}

.site-banner {
	position: relative;
	overflow: hidden;
	.banner_body {
		padding: 60px 0;
		position: relative;
		.banner-content-container {
			position: relative;
			z-index: 2;
			.banner_content {
				.action {
					display: flex;
					align-items: center;
					margin-top: 2rem;
					
					.pricing {
						display: flex;
						flex-direction: column;
						margin-left: 1rem;
						.price {
							display: flex;
							align-items: baseline;
							white-space: nowrap;
							.cost {
								font-size:36px;
							}
						}
						
						&.group {
							text-align: left!important;
							line-height: 33px;
						}
					}
				}
			}
			
			.banner_graphic {
				display: flex;
				align-items: center;
				justify-content: center;
				.img-fluid {
					max-height: 480px;
				}
			}
		}
		
		&.graphics {
			&.centered {
				background-size: cover;
				background-repeat: no-repeat;
				background-position: 50%;
			}
		}

		&.bg-primary, &.inverse, &.dark {
			.banner_content {
				.sec-caption {
					span {
						border-color: var(--white);
					}
				}
			}
		}
			
		&.bg-opacity {
			&:before {
				background-color: #000000;
				content: "";
				z-index: 1;
				position: absolute;
				height: 100%;
				width: 100%;
				left: 0;
				right: 0;
				top:0;
				opacity: 50%;
			}			
		}
		
		&.bg-opacity-light {
			&:before {
				background-color: #ffffff;
				content: "";
				z-index: 1;
				position: absolute;
				height: 100%;
				width: 100%;
				left: 0;
				right: 0;
				top:0;
				opacity: 50%;					
			}
		}		
		
		.banner-bg-video-container {
			position: absolute;
			bottom: 0;
			right: 0;
			top: 0;
			left: 0;
			overflow: hidden;		
			.banner-bg-video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: auto;
				width: 100%;
				min-width: 100%;
				min-height: 100%;
				object-position: 50% 50%;
				object-fit: cover;
				background-position: center center;			
			}
		}
		.banner-bg-container {
			position: absolute;
			bottom: 0;
			right: 0;
			top: 0;
			overflow: hidden;
			@media (max-width: 1399px) {
				right: unset;
				left: 50%;
				transform: translateX(-50%);
			
			}			
			.banner-bg {
				height: 100%;
				img {
					height: 100%;
				}
			}
		}

	}
}

.site-banner-domain {
	position: relative;
	overflow: hidden;
	.banner-content-container {
		position: relative;
		z-index: 2;
		.banner_graphic {
			display: flex;
			align-items: center;
			justify-content: center;
			.img-fluid {
				max-height: 480px;
			}
		}
		.domain-hero {
			display: block;
			.nav {
				margin-bottom: 1rem;
				.nav-item {
					.nav-link {
						&.active {
							border-bottom: 3px solid var(--primary);
						}
					}
				}
			}
			.tab-content {
				max-width: 768px;
				width: 100%;
				.tab-pane {
					.form-search {
						.input-group {
							display: flex;
							align-items: center;
							position: relative;
							background: @white;
							width: 100%;
							padding: 6px;
							margin: 0 auto;
							border-radius: 0.25rem;
							border: 1px solid @default-border-color;
							box-shadow: 0 4px 16px 0 rgba(19,26,44,.02), 0 0 32px 0 rgba(19,26,44,.1);
							
							.form-control {
								border: 0 none;
								box-shadow: none;
							}
							
							.input-group-icon {
								margin: 0 8px;
								font-size: 18px;
								color: @gray-light;
							}

							.input-group-btn {
								display: flex;
								width: auto;
								margin-left: 8px;
								
								.btn {
									min-width: 110px;
								}
							}
						}

						@media (max-width: 586px) {
							.input-group {
								display: block;
								background: 0 0;
								border: 0 none;
								box-shadow: none;
								
								.input-group-icon {
									display: none;
								}
								.form-control {
									margin-bottom: 0.5rem;
									border: 1px solid @default-border-color;
									width: 100%;
								}
								
								.input-group-btn {
									width: 100%;
									margin-left: 0;
									
									.btn {
										flex: 1;
									}
								}
							}
						}						
					
					}				
				}
			}
			.domain-tlds {
				margin-top: 3rem;
				.featured-tlds {
					.tld-container {
						display: flex;
						align-items: center;
						.tld-item {
							display: flex;
							align-items: center;
							padding: 2px 10px;
							margin-right: 1.5rem;
							border: 1px solid var(--primary);
							border-radius: 0.25rem;
							height: 40px;
							.tld, .dots {
								font-weight: 900;
							}
							.dots {
								color: var(--secondary);
							}
							.tld {
								font-size: @font-size-base * 1.25;
							}
							.tld-graphics {
								display: flex;
								align-items: center;
							}							
						}
						.tld-price {
							font-size: @font-size-base * 1.25;
							font-weight: 300;
						}
						
						&:not(:first-child) {
							padding-left: 2.5rem;
						}
						&:not(:last-child) {
							padding-right: 2.5rem;
						}

						+.tld-container:before {
							content: "";
							width: 1px;
							height: 24px;
							background: @default-border-color;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}												
													
					}	
					
				}
			}
		}
	}
	
	&.compact {
		padding: 1rem 0;
		.domain-tlds {
			.featured-tlds {
				.tld-container {
					.tld-item {
						.tld {
							font-size: @font-size-base!important;
						}							
					}
					.tld-price {
						font-size: @font-size-base!important;
					}				
												
				}	
				
			}
		}		
	}
}

.site-banner-domain, .sec.features, .sec.gallery {
	position: relative;
	overflow: hidden;
	
	.banner-content-container {
		position: relative;
		z-index: 2;	
	}
	
	&.graphics {
		&.centered {
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 50%;
		}
	}

	&.bg-primary, &.inverse, &.dark {
		.banner_content {
			.sec-caption {
				span {
					border-color: var(--white);
				}
			}
			.domain-hero {
				.tab-content {
					.nav {
						.nav-item {
							.nav-link {
								color: var(--white);
								&.active {
									border-bottom: 3px solid var(--white);
								}
							}
						}
					}
				}
				.domain-tlds .featured-tlds .tld-container .tld-item {
					border-color: var(--white);
				}				
			}
		}
	}
		
	&.bg-opacity {
		&:before {
			background-color: #000000;
			content: "";
			z-index: 1;
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			top:0;
			opacity: 50%;
		}			
	}
	
	&.bg-opacity-light {
		&:before {
			background-color: #ffffff;
			content: "";
			z-index: 1;
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			top:0;
			opacity: 50%;					
		}
	}		
	
	.banner-bg-video-container {
		position: absolute;
		bottom: 0;
		right: 0;
		top: 0;
		left: 0;
		overflow: hidden;		
		.banner-bg-video {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: auto;
			width: 100%;
			min-width: 100%;
			min-height: 100%;
			object-position: 50% 50%;
			object-fit: cover;
			background-position: center center;			
		}
	}
	.banner-bg-container {
		position: absolute;
		bottom: 0;
		right: 0;
		top: 0;
		overflow: hidden;
		@media (max-width: 1399px) {
			right: unset;
			left: 50%;
			transform: translateX(-50%);
		
		}			
		.banner-bg {
			height: 100%;
			img {
				height: 100%;
			}
		}
	}	
}

@media (min-width: 992px) {
	.site-banner {
		.banner_body {
			padding: 120px 0;
			
			&.inner-t-60 {
				padding-top: 60px;
			}
			&.inner-b-60 {
				padding-bottom: 60px;
			}		
			&.inner-t-30 {
				padding-top: 30px;
			}

			&.inner-b-30 {
				padding-bottom: 30px;
			}			
			
		}
	}		
}

.site-banner, .@{brand}-Slider {
	.swiper-pagination {
		bottom: auto;
		top:30px;
		left: auto; right: 30px;
		width: auto;
	}
}

.hero {
    position: relative;
    padding: 60px 0;
    z-index: 1;
	
	&.spc {
		padding: 2rem 0 1rem;
		.logo-section {
			.logo {
				display: inline-flex;
				align-items: center;
				img {
					height: 40px;
					max-height: 40px;
				}
				
				span {
					font-size: 1.7em;
					color: @baseFontcolor;
					font-weight: 900;
					white-space: nowrap;				
				}
			}
		}
		
		.lang-btn {
			@media (max-width: 991px) {
				margin-bottom: -45px;
			}
		}
	}
}

.block-s1 {
    padding: 10px 0;
	p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		padding: 0;
		margin: 10px 15px;
	}
	@media (max-width: 992px) {
		.text-right, .text-left {
			text-align: center!important;
		}
	}
	@media (max-width: 480px) {
		h1, h2, .h1, .h2 {
			font-size: 27px;
		}
	}
	&.notice {
		padding: 10px;
	}
}

.block-s2, .block-s4, .block-s5 {
    padding: 20px 0 5px;
}

.block-s3 {
	h1, h2, .h1, .h2 {
		margin-bottom: 20px;
	}
    padding: 30px 0;
	
	&.padding2x {
		padding: 60px 0;
	}
	&.padding3x {
		padding: 90px 0;
	}
	&.padding4x {
		padding: 120px 0;
	}
	&.bottom2x {
		padding: 30px 0 60px;
	}
	&.bottom3x {
		padding: 45px 0 90px;
	}
}

@media(min-width:767px) {
    .block-s2 {
        padding: 80px 0 50px;
    }	
    .block-s5 {
        padding: 80px 0;
    }
}

.arrow-block {
    display: block;
    height: auto;
    position: relative;
    padding: 15px;
    &:before {
        content: "";
        width: 25px;
        height: 25px;
        display: block;
        position: absolute;
        background-color: inherit;
        margin-left: -15px;
        top: 100%;
        margin-top: -15px;
		left: 50%;
        .rotate(45deg);
		z-index: 3;
    }
}

.block-footer {
	.@{brand}-partners {
		position: relative;
		padding: 25px 0 15px;
		z-index:1;
	}	
	.footer-widgets {
		padding: 30px 0;
		border-top: 1px solid @default-border-color;
		
		&.primary, &.bg-primary {
			border-color: @themeColor;
		}
		
		.footer-navbar {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			
			@media only screen and (min-width: 768px) {
				flex-direction: row;
			}
		}
		@media only screen and (max-width: 991px) {
			.contacts_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				h4 {
					display: block;
					width: 100%;
					text-align: center;				
				}
				
				.btn-contacts {
					display: block;
					width: 100%;
				}
				
			}
		}
		
		@media only screen and (min-width: 768px) {
			span {		
				&.pull-right {
					display: none;
				}
			}
			.collapse {
				display: block!important
			}
			ul {
				height: auto!important;
			}
		}
		ul.list-unstyled {				
			li {
				&:not(:first-child) {
					padding-top: 10px;
				}
				a {
					color: @FooterLink;
					
					&:hover, &:active, &:focus {
						color: @FooterHoverLink;
						text-decoration: none;
					}
				}
			}
		}
		h4, .h4 {
			font-size: @baseFontSize + 4;
			margin-top: 0;
			padding-bottom: 10px;
			border-bottom: 1px solid @default-border-color;
			
			@media (min-width: 768px) {
				display: inline-block;
				padding-right: 3rem;
			}
		}

		p {
			display: flex;
			align-items: center;
			font-size: @baseFontSize + 4;
			font-weight: 500;
			.fas, .fab, .far, .fal, .fad {
				margin-right: 5px;
			}
		}

		@media only screen and (max-width: 767px) {
			h4, .h4 {
				cursor: pointer;
				padding: 7.5px 0;
			}
		}
		
		&.dark, &.inverse, &.bg-primary, &.primary {
			h4, .h4 {
				color: @white;
			}
			ul.list-unstyled, ul.list-inline {
				a, .fab {
					color: @navbarDarklink;
					
					&:hover, &:active, &:focus {
						color: @navbarDarklink-hover;
					}
				}
			}
			.social-icons a.btn-social .fab {
				color: @navbarDarklink;
			}
			p {
				color: rgba(255,255,255,0.7);
			}
		}
		&.primary {
			background: linear-gradient(90deg,darken(@themeColor, 25%),@themeColor 100%);
		}
		
		&.picons {
			padding: 30px 0 45px;
		}
	}
	
	.fcCode {
		margin: 2rem 0;
	}
	
	.sfooter {
		border-top: 1px solid @default-border-color;
	}
	.footer-last {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding: 15px 0;
		
		@media (min-width: 768px) {
			flex-direction: row;
		}
		
		.btn-container {
			display: flex;
			align-items: center;
			@media (max-width: 767px) {
				flex-direction: column;
			}
		}
		.footer-copyright, li a {
			font-size: @baseFontSize;			
			color: @FooterLink;
			a {
				&:hover, &:focus {
					color: @FooterHoverLink;
				}
			}
		}
		.nav {
			justify-content: center;
			li {
				a {
					margin: 0 0.5rem;
				}				
			}
		}
		
		@media (min-width: 768px) {
			.nav {
				justify-content: flex-start;
				li {
					
					&:first-child {
						a {
							margin-left: 0;
						}
					}
					&:last-child {
						a {
							margin-right: 0;
						}
					}
				}
			}
		}

		&.picons {
			padding: 45px 0 30px;
		}
		.social-icons {
			align-items: center;
			justify-content: center;		
		}
	}

	@media (min-width: 768px) {
		.footer-widgets, .footer-widgets.picons {
			padding: 90px 0;
		}
	}
	
	.payment-icons {
		position: absolute;
		left: 0;
		right: 0;
		top: -30px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		
		ul {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px; 
			background-color: @white;
			border: 1px solid @default-border-color;
			border-radius: 4px;
			list-style: none;
			margin: 0;
			
			li {
				display: inline-block;
				padding-right: 5px;
				padding-left: 5px;
				
				.fab, .fas, far, .fal, .fed {
					font-size: 23px;
					color:#777;
					
					@media (min-width: 281px) {
						font-size: 37px;
					}
				}
				
				&:first-child {
					padding-left: 0;
				}
				&:last-child {
					padding-right: 0;
				}
			}
		}
	}
	.social-icons {
		display: flex;
		flex-wrap: wrap;
		a {
			&.btn-social {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.75rem;
				height: 1.75rem;
				margin: 0.175rem;
				padding: 0;
				.fab {
					font-size: 18px;
					color: @themeColor;
					margin: 0;
				}
				
				&:hover, &:focus {
					background-color: @themeColor;
					border-color: @themeColor;
					.fab {
						color: @white;
					}
				}
				
				&.large {
					width: 2.75rem;
					height: 2.75rem;
					.fab {
						font-size: 21px;
					}
				}
			}
		}
	}
}

.back-to-top {
	&.btn {
		padding:6px 8px!important;
		font-size: 1.5rem;
		@media (min-width: 768px) {
			margin-left: 1rem;
		}
	}
}



.shadow {
	&:before {
		background-color: transparent;
		background-image: linear-gradient(0deg,transparent 61%,#EDF0F5 100%);
		z-index: -1;
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		right: 0;
		top:0;
	}
}


// Call to action block

.sec-img-bg {
	background-image: url(../../images/sec-bg1.jpg);
	background-attachment: fixed;
	background-origin: initial;
	background-clip: initial;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-position: center;
	z-index: 1;
	position: relative;
	
	h1, h2, h3, h4, p, .h1, .h2, .h3, .h4 {
		color: @white;
	}
	
	
	&.bg-opacity {
		&:before {
			background: #000000;
			content: "";
			z-index: -1;
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			top:0;
			opacity:0.7!important;
		}
		&.inverse, &.dark {
			&:before {
				background: #000000;
			}
		}
	}
}

.sec-img-bg-2 {
	background-image: url(../../images/sec-bg1.jpg);
	background-attachment: fixed;
	background-origin: initial;
	background-clip: initial;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-position: center;
	z-index: 1;
	position: relative;
	
	
	&.bg-opacity {
		&:before {
			background: #000000;
			content: "";
			z-index: -1;
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			top:0;
			opacity:0.7;
		}
	}
}

.@{brand}-Slider {
	position: relative;
	overflow: hidden;
	
	.swiper-container {
		&.effects .@{brand}-animation[data-delay-transtion="1"] {
		  .transition-delay(100ms);
		}
		&.effects .@{brand}-animation[data-delay-transtion="2"] {
		  .transition-delay(300ms);
		}
		&.effects .@{brand}-animation[data-delay-transtion="3"] {
		  .transition-delay(600ms);
		}
		&.effects .@{brand}-animation[data-delay-transtion="4"] {
		  .transition-delay(900ms);
		}
		&.effects .@{brand}-animation[data-delay-transtion="5"] {
		  .transition-delay(1200ms);
		}
		&.effects .@{brand}-animation[data-delay-transtion="6"] {
		  .transition-delay(1500ms);
		}
		
		.@{brand}-animation {
		  .transform(translateY(70%));
		  opacity:0;
		  .transition(all 1.3s);
		  -webkit-transition-property: transform, opacity;
		  transition-property: transform, opacity;
		}		
		.slides {
			&.swiper-slide-active {			
				.@{brand}-animation {
					.transform(translateY(0));
					opacity:1;
				}
			}
		}
	}
	
	.row {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;

		@media (min-width: 992px) {
			flex-direction: row !important;
		}
	}
	.slides {	
		.hero-outer {
			padding: 180px 0;
			z-index:2;
			
			&.sp {
				padding: 120px 0;
			}

			.hgroup {
				ul {
					display: flex;
					flex-direction: column;
					list-style: none;
					padding-left: 0;
					
					@media (max-width: 991px) {
						align-items: center;
						justify-content: center;
					}
					
					li {
						position: relative;
						padding: 5px 0 0 25px;
						&:before {
							position: absolute;
							content: "\f00c";
							margin-right: 4px;
							font-family: "Font Awesome 5 Pro";
							left: 0;						
						}
					}
				}
				h1, .h1 {
					font-size: 37px;
					font-weight: 900;
					padding: 0;
					
					@media (min-width: 992px) {
						font-size: 65px;
					}
					@media (min-width: 768px) and (max-width: 991px) {
						font-size: 47px;
					}
				}
				h3, .h3 {
					font-style: italic; margin-top: 10px; font-weight: 100; line-height: normal;
				}
				@media (max-width: 599px) {
					h3, .h3 {font-size: 1.25rem;}
				}
				
				h4, .h4 {
					font-style: italic; margin-top: 10px; font-weight: 100;
				}
				
				.buttons {
					margin: 40px 0;
					br {
						display : none;
					}
					.btn {
						&:first-of-type {
							margin-right : 20px;
						}
					}
					.pricing {
						line-height: 30px;
						.price {
							align-items: baseline;
							flex-wrap: wrap;
							word-break: break-all;
							font-size: 36px;
							font-weight: 900;
							.cycle {
								font-size: @baseFontSize;
								font-weight: 300;
							}
						}
						.starting {
							font-weight: 300;
						}
					}
				}
				
				@media (max-width: 991px) {
					.buttons {
						flex-direction: column-reverse;
						justify-content: center;
						margin: 0;
						.btn {
							&:first-of-type {
								margin-right : 0;
							}
						}
					}
				}
				
				@media (max-width: 599px) {				
					.buttons {
						.btn {
							padding: 13px 15px;
							font-size: 13px;
						}
					}
					
				}
				@media (max-width: 767px) {
					.flex-row {
						flex-direction: column !important;
						.col-md-9 {
							width: 100%;
						}
					}
				}
				
				&.text-dark {
					h1, .h1 {
						color: @baseHeadingcolor!important;
					}
					h2, .h2, h3, .h3, h4, .h4, h5, .h5, ul li, ul li a {
						color: @baseFontcolor!important;
					}
				}
			}
		}
	
		.slide-bg {
			border-top: 5px solid @brand-secondary;
			position: relative;
			overflow: hidden;
			
			&.ibg {
				background-image: url(../../images/hero-bg1.jpg);
				background-position:  center center;
				background-repeat: no-repeat;
				background-size: cover;
				  -webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;				
			}
			
			&.ibg, &.bg-primary, &.dark, &.primary {
				.hero-outer {
					.hgroup {
						color: @white;
						h1, h2, h3, h4, .h1, .h2, .h3, .h4, ul li, ul li a {
							color: @white;
						}					
					}
				}
			}
			&.dark {
				border-color: @brand-secondary!important;
			}
			&.bg-primary {
				border-color: @themeColor;
			}
			
			&.primary {
				background: linear-gradient(90deg,darken(@themeColor, 7%),@themeColor);
			}
			
			&.bg-opacity {
				z-index: 1;
				&:before {
					background: linear-gradient(to right, #000000 0%, transparent 100%);
					content: "";
					z-index: -1;
					position: absolute;
					height: 100%;
					width: 100%;
					left: 0;
					right: 0;
				}
			}
			
			&.top {
				background-position:  top center;
			}
			
			&.bottom {
				background-position:  bottom center;
			}
		}
	}

}


/// Couder Slider
.hero-bg-wrap {
    position: relative;
	border-top: 5px solid @brand-secondary;
	background-image: url(../../images/hero-bg1.jpg);
	background-position:  center center;
	background-repeat: no-repeat;
		background-size: cover;
		  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	 color: @white;
	 z-index: 1;
	 
	.page-title {
		text-align: center;
		padding: 30px 0;
		h1, .h1 {
			margin: 0;
			font-size: 26px;
		}
	}
	.item {
		margin-bottom: 15px;
	}
	.bg-shape-poly {
		padding: 20px 55px 55px 105px;
		margin-left: -90px;
		background: url(../../images/hero-bg-poly.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30px;
	}
	
	ul {
		list-style: none;
		padding-left: 0;
		
		li {
			position: relative;
			padding: 5px 0 0 25px;
			&:before {
				position: absolute;
				content: "\f00c";
				margin-right: 4px;
				font-family: "Font Awesome 5 Pro";
				left: 0;						
			}
		}
	}
	
	@media only screen and (max-width: 479px) {
		ul {
			display: none;
		}
	}
	
	h1, h2, .h1, .h2 {
		color: @white;
		.fab {
			font-weight: normal!important;
		}
	
	}
	h1, .h1 {
		font-size: @baseFontSize + 7;
	}
	h2, .h2 {
		font-size: 27px;
		margin-bottom: 25px;
	}

	.buttons {
		margin: 10px 0 0;
		br {
			display : none;
		}
		.btn {
			&:first-of-type {
				margin-right : 20px;
			}
		}
		.pricing {
			line-height: 30px;
			.price {
				align-items: baseline;
				flex-wrap: wrap;
				word-break: break-all;
				font-size: 36px;
				font-weight: 900;
				.cycle {
					font-size: @baseFontSize;
					font-weight: 300;
				}
			}
			.starting {
				font-weight: 300;
			}
		}
	}
	
	@media (max-width: 991px) {
		.buttons {
			flex-direction: column-reverse;
			justify-content: center;
			margin: 0;
			.btn {
				&:first-of-type {
					margin-right : 0;
				}
			}
		}
	}
	
	@media (max-width: 599px) {				
		.buttons {
			.btn {
				padding: 13px 15px;
				font-size: 13px;
			}
		}
		
	}
	
	.carousel  {
		&.tc-carousel {
			.carousel-indicators {
				top: auto;
				bottom: -23px;
				margin: 0;
				width: auto;
				right: 0;
				left: 0;
				
				li {
					&.active {
						width: 15px;
						background-color: @brand-secondary;
					}
				}
				&.left {
					justify-content: flex-start;
				}
				
				@media (max-width:768px) {
					top: -15px;
					bottom: auto;
				}
			}
		}
	}
	@media (min-width: 768px) {
		padding-bottom: 120px;
		.page-title {
			padding: 60px 0;
			h1, .h1 {
				font-size: 43px;
			}
		}
		.bg-shape-poly {
			padding: 70px 130px 60px 105px;
		}		
		h2, .h2 {
			font-size: 43px;
		}
	}
	
	@media (max-width: 468px) {		
		h2, .h2 {
			font-size: 27px;
		}
	
	}
	&.small-header {
		background-image: url(../../images/sec-bg3.jpg);
		padding: 0;
		
		&.bg-opacity {
			&:before {
				opacity: 0.70;
			}
		}
		&.bg-primary, &.dark {
			background-image: none;
			&:before {
				display: none;
			}
		}

		&.bg-primary {
			border-color: @brand-secondary!important;
		}
		&.inverse, &.dark {
			border-color: @brand-secondary!important;
		}
	}
	
	&.bg-opacity {
		&:before {
			background: #000000;
			content: "";
			z-index: -1;
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0;
			right: 0;
			opacity: 0.20;
		}
	}
}


.sheaderbg {
    position: relative;
	.page-title {
		text-align: center;
		padding: 30px 0;
		h1, .h1 {
			margin: 0;
			font-size: 26px;
		}
	}
	
	h1, .h1 {
		font-size: @baseFontSize + 7;
	}
	
	@media (min-width: 768px) {
		.page-title {
			padding: 60px 0;
			h1, .h1 {
				font-size: 43px;
			}
		}	
		h2, .h2 {
			font-size: 43px;
		}
	}
	
	@media (max-width: 468px) {		
		h2, .h2 {
			font-size: 27px;
		}
	
	}
	&.tborder {
		border-top: 5px solid @brand-secondary!important;
		
		&.primary, &.bg-primary, &.dark, &.inverse, &.bg-light, &.light, &.bg-white {
			border-top-color: @brand-secondary!important; 
		}
		
	}
}