/*
*
* Boxes
*/

// 
// Table of Contents:
//
// Box Modern
// Box Minimal
// Box Counter
// Box Info
// Box Info Custom 1
// Box Category
// Box Category 2
// Box Category 3
// Box 1
// Box 2
// Box Industrial


//
// Box Modern
//
.box-modern {
	position: relative;
	width: 100%;
	padding: 30px;
	border: 5px solid $gray-12;

	&::before {
	  content: '';
		position: absolute;
		top: -5px;
		bottom: -5px;
		left: -5px;
		right: -5px;
		border: 5px solid $gray-8;
		transform: scale(1.2);
		opacity: 0;
		transition: .3s cubic-bezier(0, 0.43, 0.6, 1.24) all;
		pointer-events: none;
	}
	
	&:hover {
		&::before {
			opacity: 1;
			transform: scale(1);
		}

		.icon.box-modern-icon {
			&::after {
				opacity: 1;
				transform: scale(1);
			}
		}
	}
}

.icon.box-modern-icon {
	position: relative;
	display: block;
	text-align: center;
	width: 77px;
	height: 77px;
	line-height: 69px;
	border-radius: 50%;
	font-size: 36px;
	color: $primary;
	border: 5px solid $gray-12;

	&::after {
		content: '';
		position: absolute;
		top: -4px;
		bottom: -4px;
		left: -4px;
		right: -4px;
		border-radius: 50%;
		border: 5px solid $gray-8;
		transform: scale(.8);
		opacity: 0;
		transition: .3s all;
	}
}

.box-modern-title {
	font-weight: 500;
	letter-spacing: .05em;
}

* + .box-modern-main { margin-top: 25px; }
* + .box-modern-title { margin-top: 25px; }

@include media-breakpoint-between(sm, sm) {
  .box-modern {
		display: flex;
		align-items: flex-start;

		> * + * {
			margin-top: 0;
			margin-left: 30px;
		}
	}

	.box-modern-icon {
		flex-shrink: 0;
	}

	.box-modern-main {
		flex-grow: 1;

		> * {
			max-width: 320px;
		}
	}
}

@include media-breakpoint-up(xl) {
	.box-modern {
		max-width: 345px;
		padding: 41px 50px 53PX;
	}
}


//
// Box minimal
//
.box-minimal {
	width: 100%;
	padding: 37px 24px;
	border: 2px solid $gray-11;
	transition: .3s ease-out all;
	
	&-title {
		font-weight: 500;
		letter-spacing: .05em;
		
		* + & { margin-top: 10px; }
	}
	
	&-divider {
		display: block;
		width: 50px;
		height: 3px;
		background-color: $primary;
		transition: .2s cubic-bezier(0.55, 0.09, 0.68, 0.53) all;
		
		* + & { margin-top: 15px; }
		& + * { margin-top: 20px; }
	}
	
	.icon {
		min-height: 48px;
		font-size: 36px;
		color: $gray-13;
	}
	
	.icon.icon-1 {
		font-size: 40px;
	}
	
	.icon.icon-2 {
		font-size: 33px;
	}
	
	&:hover {
		border-color: $primary;
		
	  .box-minimal-divider {
			width: 100px;
		}
	}
}

//
// Box Counter
//
.box-counter {
	position: relative;
	text-align: center;
	color: $gray-1;
}

.box-counter-title {
	display: inline-block;
	font-family: $font-family-sec;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: 0;
}

.box-counter-main {
	font-family: $font-family-sec;
	font-size: 45px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;

	> * {
		display: inline;
		font: inherit;
	}

	.small {
		font-size: 28px;
	}

	.small_top {
		position: relative;
		top: .2em;
		vertical-align: top;
	}
}

.box-counter-divider {
	font-size: 0;
	line-height: 0;

	&::after {
		content: '';
		display: inline-block;
		width: 80px;
		height: 2px;
		background: $primary;
	}
}

* + .box-counter-title { margin-top: 0; }
* + .box-counter-main { margin-top: 20px; }
* + .box-counter-divider { margin-top: 10px; }

@include media-breakpoint-up(md) {
	.box-counter-title {
		font-size: 16px;
	}
}

@include media-breakpoint-up(xl) {
	.box-counter-main {
		font-size: 70px;

		.small {
			font-size: 36px;
		}
	}
	
	.box-counter-title {
		font-size: 18px;
	}

	* + .box-counter-main { margin-top: 30px; }
	* + .box-counter-divider { margin-top: 15px; }
}

// Context styling
.context-dark {
	.box-counter {
		color: $white;
	}
}

.bg-accent {
	.box-counter {
		color: $white;
	}

	.box-counter-divider {
		&::after {
			background: $white;
		}
	}
}

//
// Box Info
//
.box-info {
	> * + * { margin-top: 40px; }
}

.box-info-1 { }

.box-info-2 { }

.box-info-main {
	position: relative;
	background: $primary-darken;
	padding: 30px 20px;

	&::before {
		content: '';
		position: absolute;
		left: 20px;
		width: 0;
		height: 0;
		border-style: solid;
	}

	&:first-child {
		&::before {
			bottom: -21px;
			border-width: 21px 36px 0 0;
		}
	}

	&:last-child {
		&:before {
			top: -21px;
			border-width: 21px 0 0 36px;
		}
	}

	.form-label,
	.form-input,
	.form-validation {
		color: $white;
	}

	.form-input {
		background: $primary-darken-1;
		border-color: $primary-darken-1;
	}

	textarea.form-input {
		height: 100px;
	}

	.button-secondary {
		&:hover {
			color: $gray-1;
			background: $white;
			border-color: $white;
		}
	}
}

.box-info-1 {
	.box-info-main {
		&:first-child {
			&::before {
				border-color: $primary-darken transparent transparent transparent;
			}
		}

		&:last-child {
			&:before {
				border-color: transparent transparent transparent $primary-darken;
			}
		}
		
		&.bg-primary-lighten {
			&:first-child {
				&::before {
					border-color: $primary-lighten transparent transparent transparent;
				}
			}

			&:last-child {
				&:before {
					border-color: transparent transparent transparent $primary-lighten;
				}
			}
		}
	}
}

.box-info-2 {
	.box-info-main {
		background: $primary;
		box-shadow: 0 10px 6px 1px rgba(0, 0, 0, .11);

		&:first-child {
			&::before {
				border-color: $primary transparent transparent transparent;
			}
		}

		&:last-child {
			&::before {
				border-color: transparent transparent transparent $primary;
			}
		}
	}
}

.box-info-main-inner {
	max-width: 520px;
}

@include media-breakpoint-up(md) {
	.box-info-main {
		padding: 60px 35px 55px 45px;

		&::before {
			left: 50px;
		}
	}
}

@include media-breakpoint-up(lg) {
  .box-info {
		display: flex;

		> * + * {
			margin-top: 0;
			margin-left: 40px;
		}
	}

	.box-info-aside {
		display: flex;
		justify-content: center;
		flex-shrink: 0;
		width: 48%;
		
		> * {
			flex-grow: 1;
		}
	}

	.box-info-main {
		flex-grow: 1;

		&:first-child {
			&::before {
				left: auto;
				right: -21px;
			}
		}

		&:last-child {
			&::before {
				left: -21px;
			}
		}
	}

	.box-info-1 {
		.box-info-main {
			&::before {
				top: 75px;
			}

			&:first-child {
				&::before {
					border-width: 36px 0 0 21px;
					border-color: transparent transparent transparent $primary-darken;
				}
			}

			&:last-child {
				&::before {
					border-width: 0 0 36px 21px;
					border-color: transparent transparent $primary-darken transparent;
				}
			}

			&.bg-primary-lighten {
				&:first-child {
					&::before {
						border-color: transparent transparent transparent $primary-lighten;
					}
				}

				&:last-child {
					&::before {
						border-color: transparent transparent $primary-lighten transparent;
					}
				}
			} 
		} 
	}

	.box-info-2 {
		align-items: flex-start;
		.box-info-main {
			&::before {
				top: 40px;
			}

			&:first-child {
				&::before {
					border-width: 36px 21px 0 0;
					border-color: $primary transparent transparent transparent;
				}
			}

			&:last-child {
				&::before {
					border-width: 0 21px 36px 0;
					border-color: transparent $primary transparent transparent;
				}
			}
		}
	}
	
	@include media-breakpoint-down(lg) {
	  .box-info-aside {
			.row-flex {
				margin-left: -10px;
				margin-right: -10px;
				margin-bottom: -20px;
				
				> [class*='col'] {
					padding: 0 10px;
					margin-bottom: 20px;
				}
			}
			
			.box-minimal {
				padding: 23px 17px;
			}
		} 
	}
}

@include media-breakpoint-up(xl) {
	.box-info { }

	.box-info-1 {
		> * + * {
			margin-left: 75px;
		}

		.box-info-aside {
			width: 51.282%;
		}
	}

	.box-info-2 {
		> * + * {
			margin-left: 100px;
		}

		.box-info-aside {
			width: 56.41%;
		}

		.box-info-main {
			padding-top: 50px;
			padding-bottom: 70px;
		}
	}
}

//
// Box Info Custom 1
//
.box-info-custom-1 {
	position: relative;
	text-align: center;
	display: flex;
}

.box-info-custom-1-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 30px 20px;
	background: $primary;
	box-shadow: 0px 10px 5.76px 0.24px rgba(0, 0, 0, 0.11);

	&::before {
		content: '';
		position: absolute;
		top: -10px;
		margin-left: -10px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 10px 10px;
		border-color: transparent transparent $primary transparent;
	}

	&.bg-accent {
		color: $lightblue-1;
	}
}

.box-info-custom-1-title {
	position: relative;

	&::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		height: 3px;
		margin-right: 10px;
		background: $secondary;
	}
}

* + .box-info-custom-1-aside { margin-top: 15px; }

@include media-breakpoint-down(xs) {
	.box-info-custom-1 {
		max-width: 270px;
		margin-left: auto;
		margin-right: auto;
	}
}

@include media-breakpoint-up(sm) {
	.box-info-custom-1 {
		text-align: left;
	}

  .box-info-custom-1-inner {
		padding: 29px 23px;


		&::before {
			display: none;
		}
	}

	* + .box-info-custom-1-aside { margin-top: 20px; }
}

@include media-breakpoint-up(md) {
	.box-info-custom-1-inner {
		padding: 49px 20px 45px 40px;
		margin-left: 21px;

		&::before {
			display: block;
			top: 35px;
			left: -21px;
			margin: 0;
			border-width: 0 21px 36px 0;
			border-color: transparent $primary transparent transparent;
		}
	}
}

@include media-breakpoint-between(lg, lg) {
  .box-info-custom-1-inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;

		> * + * {
			margin-top: 0;
			margin-left: 30px;
		}

		h3 + p {
			margin-top: 10px;
		}
	}
}

//
// Box Category
//
.box-category-outer {
	display: flex;
}
.box-category {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: 200px;
	padding: 20px 20px 20px 60px;

	&,
	&:active,
	&:focus,
	&:hover {
	  color: $white;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: .7;
		z-index: 1;
		background: linear-gradient(to top, rgba(9,22,50,1) 5%,rgba(9,22,50,0.7) 30%,rgba(192,195,202,.3) 82%,rgba(255,255,255,.3) 100%);
	}
}


.box-category-image-outer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: $gray-1;
	background-position: center center;
	background-size: cover;
}

.box-category-caption {
	position: relative;
	z-index: 1;
	width: 100%;

	&::before {
		content: '';
		position: absolute;
		top: 19%;
		left: -40px;
		width: 30px;
		height: 3px;
		background: $secondary;
	}
}

.box-category-caption-inner {
	letter-spacing: .05em;
}

* + .box-category-subtitle { margin-top: 4px; }

@include media-breakpoint-up(md) {
  .box-category {
		min-height: 307px;
		padding: 25px 25px 25px 80px;
	}

	.box-category-caption {
		&::before {
			left: -55px;
			width: 42px;
		}
	}
}

@include media-breakpoint-up(lg) {
	.box-category {
		padding: 35px 35px 40px 79px;
	}


	html:not(.tablet):not(.mobile) {
		.box-category {
			&::before {
				transition: .5s;
			}

			&:hover {
				&::before {
					opacity: .8;
				}

				.box-category-caption {
					transform: translate3d(17px, 0, 0);
					&::before {
						animation: .4s changeAxis both;
					}
				}

				.box-category-caption-inner {
					> * {
						transform: translate3d(-38px, 0, 0);
					}
				}
			}
		}

		.box-category-caption {
			position: relative;
			transition: .4s;
			&::before {
				animation: .4s changeAxisBack both;
			}
		}

		.box-category-caption-inner {
			> * {
				position: relative;
				transition: .4s;

				&:nth-child(2) {
					transition-delay: .02s;
				}
			}
		}
	}
}

@include keyframes(changeAxis) {
	0% {
		height: 3px;
		width: 42px;
	}

	50% {
		width: 3px;
		height: 3px;
	}

	100% {
		width: 3px;
		height: 62%;
	}
}

@include keyframes(changeAxisBack) {
	0% {
		width: 3px;
		height: 62%;
	}

	50% {
		width: 3px;
		height: 3px;
	}

	100% {
		height: 3px;
		width: 42px;
	}
}

//
// Box Category 2
//
.box-category-2 {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: 200px;
	text-align: left;

	&,
	&:active,
	&:focus,
	&:hover {
		color: $white;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: .7;
		z-index: 1;
		background: linear-gradient(to top, rgba(9,22,50,1) 5%,rgba(9,22,50,0.7) 30%,rgba(192,195,202,.3) 82%,rgba(192,195,202,.3) 100%);
		transition: .5s;
	}

	&::after {
		content: '';
		display: block;
		padding-bottom: (367 / 441) * 100%;
	}

	&:hover {
		&::before {
			opacity: .8;
		}
	}
}

.box-category-2::after,
.box-category-2-inner {
	flex-shrink: 0;
	width: 100%;
}

.box-category-2-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.box-category-2-image-outer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: $gray-1;
	background-position: center center;
	background-size: cover;
}

.box-category-2-caption {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 20px 12px 20px 33px;

	.tag-inline {
		display: inline-flex;
		align-items: center;
		height: 28px;
		padding: 5px 20px 5px 13px;
		font-size: 14px;
		letter-spacing: .05em;
	}

	* + .tag-inline { margin-top: 10px; }
}

.ie-10,
.ie-11 {
	.box-category-2-caption {
		.tag-inline {
			svg {
				width: 30px;
			}
		}
	}
}

.box-category-2-title {
	letter-spacing: .05em;
}

* + .box-category-2-subtitle { margin-top: 4px; }

@include media-breakpoint-up(md) {
	.box-category-2-caption {
		padding: 25px 25px 25px 40px;
	}
}

@include media-breakpoint-up(lg) {
	html:not(.tablet):not(.mobile) {
		.box-category-2:hover {
			.box-category-2-image-outer {
				transform: scale(1.05, 1.05);
			}

			.box-category-2-title {
				color: $secondary;
			}

			.box-category-2-title,
			.box-category-2-caption .tag-inline {
				transform: translateX(10px);
			}
		}

		.box-category-2-image-outer {
			transition: .33s ease-in-out;
		}

		.box-category-2-title,
		.box-category-2-caption .tag-inline {
			transition: .33s ease-in-out;
		}

		.box-category-2-caption .tag-inline {
			transition-delay: .02s;
		}
	}
}

@include media-breakpoint-up(xl) {
	.box-category-2-caption {
		padding: 35px 30px 46px 44px;
	}
}

//
// Box category 3
//
.box-category-3 {
	position: relative;
	overflow: hidden;
	display: flex;
	min-height: 200px;
	text-align: left;

	&,
	&:active,
	&:focus,
	&:hover {
		color: $white;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: .7;
		z-index: 1;
		background: linear-gradient(to top, rgba(9,22,50,1) 5%,rgba(9,22,50,0.68) 30%,rgba(192,195,202,0) 82%,rgba(255,255,255,0) 100%);
		transition: .5s;
	}

	&::after {
		content: '';
		display: block;
		padding-bottom: (236 / 369) * 100%;
	}

	&:hover {
		&::before {
			opacity: .8;
		}
	}
}

.box-category-3::after,
.box-category-3-inner {
	flex-shrink: 0;
	width: 100%;
}

.box-category-3-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.box-category-3-image-outer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: $gray-1;
	background-position: center center;
	background-size: cover;
}

.box-category-3-caption {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 20px 12px 20px 25px;
}

.box-category-3-caption-inner {
	> * {
		letter-spacing: .05em;
	}
}

.context-dark .box-category-3-subtitle {
	color: $secondary;
}

* + .box-category-3-subtitle { margin-top: 4px; }

@include media-breakpoint-up(md) {
	.box-category-3-caption {
		padding: 25px 25px 25px 40px;
	}
}

@include media-breakpoint-up(lg) {
	.box-category-3-lg {
		&::after {
			padding-bottom: (382 / 369) * 100%;
		}
	}
	
	html:not(.tablet):not(.mobile) {
		.box-category-3:hover {
			.box-category-3-image-outer {
				transform: scale(1.05, 1.05);
			}

			.box-category-3-title,
			.box-category-3-subtitle {
				transform: translateY(-10px);
			}
			
			.box-category-3-title {
				color: $secondary;
			}

			.box-category-3-subtitle {
				color: $white;
			}

			.box-category-3-caption-inner {
				&::after {
					width: 100%;
				}
			}
		}

		.box-category-3-image-outer,
		.box-category-3-title,
		.box-category-3-subtitle {
			transition: .33s ease-in-out;
		}

		.box-category-3-subtitle {
			transition-delay: .02s;
		}

		.box-category-3-caption-inner {
			position: relative;
			display: inline-block;
			
			&::after {
				content: '';
				position: absolute;
				height: 3px;
				width: 0; 
				background: $secondary;
				transition: .33s ease-in-out;
			}
		}
	}
}

@include media-breakpoint-up(xl) {
	.box-category-3-caption {
		padding: 35px 30px 46px 30px;
	}
}

//
// Box 1
//
.box-1-bg-shape {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: auto;
	height: 86.607%;
	max-width: none;
	z-index: 0;
	opacity: .3;
	
	img {
		height: 100%;
		max-width: none;
	}
}

.box-1-cell {
	position: relative;
	overflow: hidden;
	background: $primary-lighten;
}

.box-1-outer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.box-1 {
	max-width: 525px;
	padding: 40px 0 110px;
	margin: 0 auto;

	@include media-breakpoint-between(xl, xl) {
		.select2-container .select2-choice {
			padding-left: 10px;
			padding-right: 10px;
		}

		.select2-arrow {
			right: 10px;
		}
	}
}

@include media-breakpoint-up(md) {
	.box-1 {
		padding-top: 80px;
		padding-bottom: 90px;
	}

	div.box-1-outer {
		padding-left: 30px;
		padding-right: 30px;
	}

	.box-1-bg-shape {
		right: 100px;
		left: auto;
		transform: translate3d(0, -50%, 0);
		
		img {
			float: right;
		}
	}
}

@include media-breakpoint-up(xl) {
	.box-1-bg-shape {
		right: 270px;
	}
}

@include media-breakpoint-up(xxl) {
	.box-1 {
		padding-top: 90px;
		padding-bottom: 70px;
	}

	.box-1-bg-shape {
		top: 3%;
		bottom: -3%;
		right: map-get($container-max-widths, xl) / 2 - 70px;
		transform: none;
		height: auto;
		opacity: 1;
	}
}

//
// Box 2
//
.box-2 {
	padding: 15px 15px 0;
	max-width: 100%;

	&,
	.owl-carousel.owl-loaded,
	.owl-stage-outer,
	.owl-stage,
	.owl-item,
	.owl-item > * {
		display: flex;
		flex-grow: 1;
	}

	&,
	.owl-carousel,
	.owl-stage-outer,
	.owl-item {
		flex-direction: column;
	}
}

.box-2-footer {
	padding: 10px;
	background: $gray-12;
}

.box-2-footer-inner {
	@include groupY(10px);
	text-align: center;
}

* + .box-2-footer { margin-top: 15px; }

@include media-breakpoint-up(sm) {
	.box-2-footer-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include groupX(20px);
		text-align: left;
	}
}

@include media-breakpoint-up(md) {
	.box-2 {
		padding: 30px 30px 0;
	}

	.box-2-footer {
		padding: 12px 30px;
	}

	* + .box-2-footer { margin-top: 30px; }
}

@include media-breakpoint-up(lg) {
	.box-2 {
		padding-top: 0;
	}
}

@include media-breakpoint-up(xl) {
  .box-2 {
		padding-right: 0;

		.owl-carousel {
			width: auto;
			margin-right: -65px;
		}
	}
}

//
// Box Industrial
//
.box-industrial {
	> * + * {
		margin-top: 15px;
	}
	
	&:hover {
		.box-industrial-icon {
			transform: translate(7px, 7px);
		}
		.box-industrial-aside::before {
			transform: translate(-7px, -7px);
		}
	}
}

.box-industrial-aside {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: $primary-lighten;
	color: $lightblue-1;
	padding: 20px;
	margin-right: 7px;
	margin-bottom: 7px;
	
	&::before {
		content: '';
		position: absolute;
		top: 7px;
		left: 7px;
		width: 100%;
		height: 100%;
		background: rgba($primary-lighten, .64);
		transition: .25s;
	}
}

.icon.box-industrial-icon {
	font-size: 80px;
	line-height: 1.2;
	transition: .2s;
}

.box-industrial-main {
	> * + * {
		margin-top: 5px;
	}
}

@include media-breakpoint-down(xs) {
	.box-industrial {
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

@include media-breakpoint-between(md, md) {
	.box-industrial {
		display: flex;
		align-items: center;
		text-align: left;

		> * + * {
			margin-top: 0;
			margin-left: 20px;
		}
	} 

	.box-industrial-aside {
		flex-shrink: 0;
	}

	.box-industrial-main {
		flex-grow: 1;
	}
}

@include media-breakpoint-up(lg) {
	.box-industrial {
		> * + * {
			margin-top: 28px;
		}
	}

	.icon.box-industrial-icon {
		font-size: 100px;
	}
}

@include media-breakpoint-up(xl) {
	.icon.box-industrial-icon {
		font-size: 135px;
	}
}