@import 'breakpoints';
@import '../libs/fontawesome/fontawesome.scss';
@import '../libs/fontawesome/regular.scss';
@import '../libs/fontawesome/light.scss';
@import '../libs/fontawesome/solid.scss';
@import '../libs/fontawesome/brands.scss';

@mixin pseudo-block( $place, $type, $opacity: 1, $top: false, $right: false, $bottom: false, $left: false ){
	&::#{$place}{
		content: '';
		display: block;
		position: absolute;
		opacity: $opacity;
		transition: opacity 100ms ease-in;


		@if $type == 'bg'{
			background-color: currentcolor;
		}
		@if $type == 'border'{
			border: 1px solid currentcolor;
		}
		@if $type == 'top'{
			border-top: 1px solid currentcolor;
		}
		@if $type == 'right'{
			border-right: 1px solid currentcolor;
		}
		@if $type == 'bottom'{
			border-bottom: 1px solid currentcolor;
		}
		@if $type == 'left'{
			border-left: 1px solid currentcolor;
		}
    @if $top{
			top: $top;
		}
		@if $right{
			right: $right;
		}
		@if $bottom{
			bottom: $bottom;
		}
		@if $left{
			left: $left;
		}
	}
}

.xtd-carousel-filmstrip{

  &__container{
    position: relative;
  }

	&--offset-bottom{
		transform: translateY(25%);
	}

	&--offset-top{
		transform: translateY(-25%);
	}

}

.xtd-gmap{
  width: 100%;
	img{
		max-width: 100%;
		height: auto;
	}
}


.xtd-carousel-mini{
  display: flex;
  align-items: center;

  &::after{
    content: '';
    border-top: 1px solid currentColor;
    opacity: 0.5;
    flex-grow: 1;
    margin-top: -2.5rem;
  }

  .wpb_single_image{
    margin-bottom: 0 !important
  }
  .onclick-video_link a{
    position: relative;
    display: block;

    &::before{
      content: '';
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      transition: opacity 200ms ease;
    }
    &::after{
      content: '\f04b';
      position: absolute;
      display: block;
      width: 3.5rem;
      height: 3.5rem;
      border: 0.25rem solid currentColor;
      border-radius: 100px;
      line-height: 3.125rem;
      text-align: center;
      font-family: 'Font Awesome 5 Pro';
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.2rem;
      transition: all 200ms ease;
      text-shadow: 0px 0px 3px 0 rgba(0,0,0,0.85);
      text-indent: 0.25rem;
    }

    &:hover::before{
      opacity: 0.85;
    }
  }
  .owl-carousel{
    max-width: 18rem;
    margin-right: 10%;
    flex-basis: 60%;
    overflow: hidden;
  }
  .owl-image-link{
    position: relative;
    display: block;

    &::before{
      position: absolute;
      content: '\e611';
      display: inline-block;
      font-family: 'themify';
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
      border-radius: 100px;
      top: 50%;
      left: 50%;
      z-index: 1;
      font-size: 2.5rem;
      text-align: center;
      transform: translate(-50%, -50%);
      transition: opacity 200ms ease;
      opacity: 0;
    }
    &::after{
      position: absolute;
      content: '';
      display: block;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: currentColor;
      opacity: 0;
      border-radius: 0.3125rem;
      transition: opacity 200ms ease;
      color: transparent;
    }
    &:hover::after{
      opacity: 0.9;
    }
    &:hover::before{
      opacity: 0.65;
    }
  }

  .owl-stage-outer{
    border-radius: 0.3125rem;
  }
  img{
    height: auto;
    max-width: 100%;
  }

}

.fa-lg{
  font-size: 1.5em;
}
.fa-fw{
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3;
  display: inline-block;
  margin: .1rem;
}
.fa-border{
  border-radius: 100px;
  text-align: center;
  border-color: currentColor !important;
}
.fa-boxed{
  border-radius: 100px;
  text-align: center;
	transition: opacity 80ms ease;

	&:hover{
		opacity: 0.75;
	}
}
.fa-fw.fa-border,
.fa-fw.fa-boxed{
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8;
}

.fa-text-left{
	float: left;
	margin-right: .5em;
}
.fa-text-right{
	float: right;
	margin-left: .5em;
}
.smooth-scroll{
  display: inline-block;
}




.xtd-recent-posts{
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  &__post{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2rem 0;
    position: relative;

    &:first-child{
      padding-top: .5rem;
    }

    & + &{
      @include pseudo-block( 'after', 'top', 0.125, 0, 0, false, 0 );
    }

    &__content{
      align-self: center;
    }

    &__title{
      display: block;
      margin-bottom: .5rem;
      font-size: inherit;
      line-height: 1.4
    }

    &__date{
      display: block;
      font-size: .625rem;
      text-transform: uppercase;
      letter-spacing: 1px;

      &::before{
        content: "\e6b6";
        font-family: 'themify';
        display: inline-block;
        margin-right: 0.5em;
      }

      span{
        opacity: 0.65;
      }
    }

    &__thumbnail{
      flex-basis: 3.5rem;
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: 1rem;

      @media(min-width: 1200px){
        flex-basis: 4.5rem;
        margin-right: 1.5rem;
      }

      img{
        border-radius: 100rem;
      }

    }

  }

}



.xtd_search{
  position: relative;

  .form-control{
    padding-right: 4rem;
		padding: 0.75rem 1.5rem;
		line-height: inherit;
  }

  .ti-search{
    display: inline-block;
    width: 3.5rem;
    position: absolute;
    top: .8rem;
    right: 0;
    font-size: 1.5em;
    text-align: center;
    border-left: 1px solid currentColor;
  }
}

.gm-style-iw.gm-style-iw-c{
	button{
		display: none !important;
	}
}
.xtd-gmap-info{
	width:200px;
	//transform:translateY(-100%);
	//position: absolute;
	padding: 0 0 2rem 0;
	box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.5);
	border-radius:2px;
	text-align: center;

	&::after{
		content: '';
    display: block;
    width: 0;
  	height: 0;
  	border-left: .75rem solid transparent;
  	border-right: .75rem solid transparent;
  	border-top: .75rem solid white;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
	}

	&:empty{
		display: none;
	}

	img{
		max-width: 100% !important;
		height: auto;
		margin-bottom: 1rem;
	}

	div{
		font-size: 120%;
		font-weight: bold;
		margin-bottom: .25rem;
	}

	p{
		font-size: 80%;
		padding: 0 .5rem;
		margin: 0;
	}
}

.xtd-modal-content{
	@at-root *:not(.mfp-content) > &{
		display: none;
	}
}
.xtd-ninja-modal{

	&-container{
		max-width: 50rem;
		box-shadow: 0 1rem 7rem -2rem rgba(0,0,0,0.25);
		margin: 0 auto;
		padding: 1rem;
		background-color: white;

		@include media-breakpoint-up(sm) {
			padding: 2rem;
		}

		@include media-breakpoint-up(md) {
			padding: 3rem;
		}

		@include media-breakpoint-up(lg) {
			padding: 4rem;
		}

		@include media-breakpoint-up(xl) {
			padding: 5rem;
		}

		&--hidden{
			display: none;
		}

		@at-root .mfp-ready &{
			display: block !important;
		}

	}

}







.img-frame{
	&-small{
		border-style: solid; border-color: white; border-width: .75rem; box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
	}
	&-large{
		border-style: solid; border-color: white; border-width: 1rem; box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
	}
}

.img--full-width{
	figure, div, img, a{
		width: 100%;
		height: auto;
		display: block;
	}
}

.dropcap{
	display: inline-block;
	font-size: 300%;
	font-weight: bold;
	float: left;
	line-height: 1;
	margin-right: 0.25rem;
	margin-bottom: 0.125rem;
}

.text-size,
.xtd-text-size{
	&--sm{
		font-size: 90%;
	}
	&--lg{
		font-size: 150%;
	}
}

@import 'vc/vc';
@import '_shadow';

$spacers: (
	sm: 1rem,
	lg: 4rem,
	xl: 6rem,
	xxl: 12rem
);


body div.vc_empty_space.xtd-spacer{
	min-height: 2rem !important;
	height: 2rem !important;

	@include media-breakpoint-up(sm) {
		min-height: 2rem !important;
	}

	@include media-breakpoint-up(md) {
		min-height: 2rem !important;
	}

	@each $spacer, $spacer_value in $spacers{

		&--#{$spacer}{

			@include media-breakpoint-up(lg) {
				min-height: $spacer_value * 0.75;
			}

			@include media-breakpoint-up(xl) {
				min-height: $spacer_value;
			}
		}


	}
}

.xtd-hover{
	&-05{
		transition: opacity 120ms ease;
		opacity: 0.5;

		&:hover{
			opacity: 1;
		}
	}
}


.xtd-background--fixed.xtd-background--fixed.xtd-background--fixed.xtd-background--fixed{
	background-attachment: fixed !important;
}





.xtd-offset-frame{
	position: relative;

	&::before{
		content: '';
		display: block;
		position: absolute;
		border: 1px solid currentColor;
		top: 0;
		left: 0;
		right: 7.5%;
		bottom: 7.5%;
		z-index: 0;
		opacity: 0.3;
	}

	.vc_single_image-wrapper,
	& > img{
		margin: 7.5% 0 0 7.5% !important;
		position: relative;
		z-index: 1;
	}
}

.xtd-offset-dots,
.xtd-offset-dots-white{
	position: relative;

	@media(min-width: 768px){
		&::before{
			content: '';
			display: block;
			position: absolute;
			background-image: url('../svg/dots-black.svg');
			top: -7.5%;
			left: -7.5%;
			right: 12.5%;
			bottom: 12.5%;
			z-index: 0;
			opacity: 0.8;
		}
		& > *:first-child{
			margin: 0 !important;
			position: relative;
			z-index: 1;
		}
	}


}
.xtd-offset-dots-white{
	&::before{
		background-image: url('../svg/dots-white.svg');
		opacity: 0.95
	}
}


@keyframes xtenderLeftRight {
  0% {
    background-position: -20px 0;
  }
  50% {
    background-position: -500px 0;
  }
  100% {
    background-position: -1000px 0;
  }
}

.vc_row.xtd-background-animation{
	&--left-right{
		background-size: 256px 256px !important;
		-webkit-animation: xtenderLeftRight 100s infinite;
		animation: xtenderLeftRight 100s infinite;
	}
}

.wpb_revslider_element.wpb_content_element{
	margin-bottom: 0;
}


.shortcode-display{
	display: inline-block;
	padding: 0.75rem 1.5rem;
	width: 100%;
	background-color: rgba(0,0,0,0.05);

	&::before{
		content: '[';
	}
	&::after{
		content: ']';
	}
}

@import '_timeline';
@import '_shapes';
@import '_person';
@import '_offset';
@import '_margins';
@import '_pricing-list';
@import '_services-carousel';
@import '_services-list';
@import '_leisure-person';
@import '_isotope';