/*
* Boxes
*/

// Box Minimal
.box-minimal {
	text-align: center;

	.box-minimal-icon {
		font-size: 50px;
		line-height: 50px;
		color: $primary;
	}
}

.box-minimal-divider {
	width: 36px;
	height: 4px;
	margin-left: auto;
	margin-right: auto;
	background: $primary;
}

.box-minimal-text {
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

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

* + .box-minimal-title {
	margin-top: 10px;
}

* + .box-minimal-divider {
	margin-top: 20px;
}

* + .box-minimal-text {
	margin-top: 15px;
}

%context-dark {
	.box-minimal {
		p {
			color: $body-color;
		}
	}
}


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

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

.box-counter-main {
	font-family: $font-family-sec;
	font-size: 45px;
	font-weight: 400;
	line-height: 1.2;

	> * {
		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: 10px;
}

* + .box-counter-main {
	margin-top: 20px;
}

* + .box-counter-divider {
	margin-top: 10px;
}

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

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

		.small {
			font-size: 36px;
		}
	}

	* + .box-counter-main {
		margin-top: 30px;
	}
	* + .box-counter-divider {
		margin-top: 15px;
	}
	* + .box-counter-title {
		margin-top: 18px;
	}
}
s
.bg-primary {
	.box-counter {
		color: $white;
	}

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

.main-section-cta{
	text-align: left;
	padding: 40px 0;
	@include media-breakpoint-up(sm){
		padding: 0;
	}
	@include media-breakpoint-up(md){
		text-align: right;
	}
	@include media-breakpoint-up(xl){
		margin-right: -15px;
	}
	.button{
		margin-top: 40px;
	}
}
// service box
.service-box{

	text-align: center;
	padding: 0 12px;
	figcaption{
		margin-top: 40px;
		h5{
			text-transform: uppercase;
		}
		p{
			font-size: 15px;
			letter-spacing: .03em;
		}
	}
}
.square-figure{
	width: 83px;
	height: 83px;
	border: 2px solid $gray-300;
	transform: rotate(45deg);
	border-radius: 7px;
	text-align: center;
	position: relative;
	margin: 0 auto;
	transition: all linear .35s;
	display: flex;
	flex-direction: column;
	justify-content: center;
	span{
		display: block;
		transform: rotate(-45deg);
		color: $primary;
		font-size: 50px;
		transition: all linear .35s;
	}
}
.service-box{
	@include media-breakpoint-up(xl){
		&:hover{
			.square-figure{
				transform: rotate(0deg);
				transition: all linear .35s;
				background-color: $primary;
				border-color: $primary;
				span{
					transform: rotate(0deg);
					transition: all linear .35s;
					color: $white;

				}
			}
		}
	}
}
// Call to action section

.cta-wrap{
	border: 2px solid rgba($primary, .92);
	padding: 20px;
	@include media-breakpoint-up(md){
		padding: 60px 45px 60px 60px;
	}
	position: relative;
	background-color: inherit;
	z-index: 1;

}

h2.creative-title{
	font-weight: 300;
	text-transform: uppercase;
	span{
		font-weight: 700;
	}
}
.slider-creative{
	h2{
		text-align: center;
		padding-top: 60px;
		@include media-breakpoint-up(xl){
			padding-top: 110px;
			text-align: left;
		}
	}
}

.cta-event-time{
	position: absolute;
	top: -12px;
	padding: 0 15px;
	left: 49px;
	background-color: $white;
	z-index: 2;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15px;
	line-height: 23px;
	color: rgba($primary, .92);
	letter-spacing: .03em;
}
.cta-section{
	.rd-form{
		max-width: 345px;
		width: 100%;
		@include media-breakpoint-up(md){
			margin-left: 56px;
		}
	}
}
.gallery-wrap{
	display: flex;
	flex-direction: column-reverse;
	@include media-breakpoint-up(xl){
		display: block;
		position: relative;
		min-height: 860px;
		&:before{
			content: '';
			position: absolute;
			background: radial-gradient(circle at 3px 3px, rgba(#DCDCDC, .5) 3px, transparent 3px);
			left: 12.5%;
			top: 11%;
			height: 407px;
			width: 366px;
			display: block;
			background-size: 27px 27px;
			background-position: 100%;
			background-repeat: repeat;
			//z-index: -1;
		}
	}

}
.gallery-content-wrap{
	min-height: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	right: 0;
	width: 100%;
	position: relative;
	pointer-events: none;

	> * {
		pointer-events: auto;
	}

	@include media-breakpoint-up(xl){
		justify-content: flex-end;
		text-align: left;

	}
}
.gallery-info{
	h2{
		br{
			display: none;
		}
	}
	@include media-breakpoint-up(xl){
		padding-top: 35px;
		max-width: 380px;
		h2{
			br{
				display: block;
			}
		}
	}

	h2{
		text-transform: uppercase;
		font-weight: 300;
		span{
			font-weight: 700;
		}
	}
	p{
		margin-top: 45px;
		@include media-breakpoint-up(xl){
			max-height: 160px;
			overflow: hidden;
		}
	}
}
.floating-items{
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;
	@include media-breakpoint-up(xl){
		margin-top: 0;
	}
	> *{
		> a{
			display: inline-block;
			position: relative;
			padding-bottom: 100%;
			width: 100%;
			min-height: 100%;
			@include media-breakpoint-up(xl){
				min-height: auto;
				display: block;
				padding-bottom: 0;
				width: 100%;
				height: 100%;
				&:before{
					content: '';
					position: absolute;
					opacity: 0;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 100%;
					height: 100%;
					border: 1px solid $white;
					transition: all ease .35s;
					z-index: 2;
				}
				&:after{
					content: '\ec25';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					font-family: 'Linearicons';
					opacity: 0;
					transition: all ease .35s;
					font-size: 30px;
					color: $white;

				}
				&:hover{
					&:before{
						transition: all ease .35s;
						width: 80%;
						height: 80%;
						opacity: 1;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
					}
					&:after{
						opacity: 1;
						transition: all ease .35s;
					}
				}
				img{
					position: relative;
					min-height: auto;
				}
			}
			img{
				object-fit: cover;
				object-position: center;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				width: 100%;
				bottom: 0;
				min-height: 100%;

			}
		}
		@include media-breakpoint-up(xs){
			width: calc(100% / 2);
		}
		@include media-breakpoint-up(sm){
			width: calc(100% / 3);
		}
		background-color: $white;
		transition: all ease .35s;
		@include media-breakpoint-up(xl){
			width: inherit;
			&:hover{
				box-shadow: 0px 0px 17px 2px rgba(0,0,0,0.15);
				img{
					transform: scale(.96);
					transition: all ease .35s;
				}
			}
		}
		@include media-breakpoint-up(xl){
			position: absolute;
			user-select: none;
		}
		img{
			transition: all ease .35s;
		}

	}
}
.item-1{
	@include media-breakpoint-up(xl){
		width: 186px;
		height: 186px;
		left: 40.6%;
	}
}
.item-2{
	@include media-breakpoint-up(xl){
		width: 445px;
		height: 415px;
		top: 25.2%;
		left: 19.8%;
	}
}
.item-3{
	@include media-breakpoint-up(xl){
		width: 86px;
		height: 86px;
		top: 36.3%;
		left: 10%;
	}
}
.item-4{
	 @include media-breakpoint-up(xl){
		 width: 203px;
		 height: 203px;
		 top: 50%;
		 left: 0;
	 }
 }
.item-5{
	@include media-breakpoint-up(xl){
		width: 202px;
		height: 202px;
		bottom: 0;
		left: 20.5%;
	}
}
.item-6{
	@include media-breakpoint-up(xl){
		width: 86px;
		height: 86px;
		top: 76.5%;
		left: 40.5%;
	}
}
.item-7{
	@include media-breakpoint-up(xl){
		width: 240px;
		height: 317px;
		left: 59.7%;
		top: 49.6%;
	}
}
.item-8{
	@include media-breakpoint-up(xl){
		width: 203px;
		height: 203px;
		right: 0;
		top: 49.6%;
	}
}
.item-9{
	@include media-breakpoint-up(xl){
		width: 86px;
		height: 86px;
		right: 10%;
		top: 76.5%;
	}
}
.item-10{
  @include media-breakpoint-up(xl){
		width: 86px;
		height: 86px;
		right: 26%;
		bottom: 0;
	}
}
.big-title{
	color: $primary;
	text-transform: uppercase;
	font-weight: 700;
	span{
		display: block;
	}
}
/*Slide box*/
.slider-modern{
	position: relative;
	&:before{
		content: '';
		position: absolute;
		width: 100%;
		height: 60%;
		top: 0;
		left: 0;
		background-image: linear-gradient(to right, rgba(238, 238, 238, .5), rgba(238, 238, 238, 1));
		z-index: -1;
	}
}
.owl-creative{
	.owl-stage-outer {
		padding: 60px 15px;
		margin: -60px -15px;
	}
}
.slide-box{
	width: 100%;
	position: relative;
	margin-bottom: 60px;
	z-index: 1;
	background-color: $white;
	box-shadow: 0 25px 25px rgba($black, .15);
	@include media-breakpoint-up(xl){
		background-color: transparent;
		box-shadow: none;
	}
	.social-links{
		align-self: flex-end;
	}
}
.slide-preview{
	position: relative;
	padding-bottom: 79%;
	width: 100%;
	min-height: 50%;
	img{
		object-fit: cover;
		object-position: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		bottom: 0;
		min-height: 50%;
	}
}
.slide-description{
	text-align: center;
	padding-top: 25px;
	@include media-breakpoint-up(lg){
		padding: 25px 0;
	}
	h4{
		text-transform: uppercase;
		font-weight: 700;
	}
	span{
		display: block;
		font-size: 15px;
		color: rgba( $black, .7 )
	}
}
.slide-links{
	display: flex;
	justify-content: center;
	opacity: 1;
	position: relative;
	padding: 25px;


	@include media-breakpoint-up(lg){
		position: absolute;
		overflow: hidden;
		background-color: $white;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		box-shadow: 0 25px 25px rgba($black, .15);
		z-index: -1;
		padding: 10px;
		ul {
			opacity: 0;
			pointer-events: none;
			li{
				opacity: 0;
			}
		}
	}
}
@include media-breakpoint-up(lg){
	.owl-item.center{
		.slide-box{
			.slide-links{
				bottom: -50px;
				//padding: 30px 0;
				transition: all ease .55s;
				ul {
					opacity: 1;
					pointer-events: auto;
					transition: all ease .55s;
					padding-bottom: 10px;
					li{
						transition: all ease .35s;
						&:nth-child(1){
							transition-delay: 250ms;
							opacity: 1;
						}
						&:nth-child(2){
							transition-delay: 350ms;
							opacity: 1;
						}
						&:nth-child(3){
							transition-delay: 450ms;
							opacity: 1;
						}
					}
				}
			}
		}
	}
}
.quotes-creative{
	p{
		font-size: 20px;
		line-height: 37px;
		font-weight: 300;
		font-style: italic;
		letter-spacing: .03em;
		color: rgba($black , .7);
		margin-top: 0;
		@include media-breakpoint-up(xl){
			max-height: 148px;
			min-height: 148px;
			overflow: hidden;
			font-size: 24px;
			margin-top: 15px;
		}
	}
}
.slide-content:not(h2){
	padding-left: 43px;
}
.slide-conten{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	@include media-breakpoint-up(xl){
		display: block;
	}
}
.creative-text{
	padding-left: 80px;
	position: relative;
	color: $black;
	letter-spacing: .03em;
	font-size: 18px;
	line-height: 27px;
	&:before{
		content: '';
		position: absolute;
		left: 0;
		height: 1px;
		width: 60px;
		top: 50%;
		transform: translateY(-50%);
		background-color: $form-input-border-color;
	}
}

.slide-creative{
	align-items: center;
}
.slider-creative-content{
	display: flex;
}
.slider-creative-content + .button{
	margin-top: 20px;
	@include media-breakpoint-up(xl){
		margin-top: 70px;
	}
	letter-spacing: normal;
	padding: 14px 17px;
}