// main: style.scss

/* Section Stuffs
------------------------------*/
.section-padding {
	@include rem('padding', 70px 0px);
}
.section-padding-lg {
	@include rem('padding', 90px 0px);
}
.section-padding-larger {
	@include rem('padding', 140px 0px);
}

.section-meta {
	background-color: $meta;
}

.onepage-section {
	position: relative;
	overflow: hidden;
	&:before {
		position: absolute;
		top: 0px; left: 0px; right: 0px; bottom: 0px; display: block;
		content: " ";
		z-index: 1;
	}
	.container {
		position: relative;
		z-index: 5;
	}
}

.section-inverse {
	background: #222222;
	.section-title-area {
		.section-title {
			color: rgba(255, 255, 255, 0.99);
		}
		.section-subtitle {
			color: rgba(255, 255, 255, 0.7);
		}
		.section-subtitle::after {
			background: rgba(255, 255, 255, 0.8);
		}
	}
}

.section-inverse-extended {
	background: #333333;
	.section-title-area {
		.section-title {
			color: rgba(255, 255, 255, 0.99);
		}
		.section-subtitle {
			color: rgba(255, 255, 255, 0.7);
		}
		.section-subtitle::after {
			background: rgba(255, 255, 255, 0.8);
		}
	}
}

.section-inverse {
	color: rgba(255, 255, 255, 0.5);
	h1,h2,h3,h4,h5,h6 {
		color: rgba(255, 255, 255, 0.9);
	}
	p {
		color: rgba(255, 255, 255, 0.5);
	}
}

.section-title-area {
	margin-bottom: 60px;
	text-align: center;
	.section-title {
		font-size: 30px;
		letter-spacing: 2px;
		font-weight: 800;
		position: relative;
		margin-bottom: 0px;
		text-transform: uppercase;
		@include for(medium-screens) {
			font-size: 40px;
			letter-spacing: 3.5px;
		}
	}
	.section-subtitle {
		color: #aaaaaa;
		font-size: 12px;
		display: inline-block;
		position: relative;
		@include rem('margin-bottom', 13px);
		text-transform: uppercase;
		letter-spacing: 2px;
		// &:after {
		// 	content: "";
		// 	display: block;
		// 	width: 100%;
		// 	height: 2px;
		// 	background: $border;
		// 	position: absolute;
		// 	bottom: -6px;
		// }
		@include for(medium-screens) {
			font-size: 14px;
		}
	}
}
.section-desc {
	@include rem('font-size', 20px);
	@include rem('margin-top', 40px);
}

/* Section: Hero
------------------------------*/

.hero-slideshow-wrapper {
	width: 100%;
	position: relative;
	background-color: #222222;
	overflow: hidden;
	&:after{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		display: block;
		content: "";
	}

	.hero__content {
		.hero-large-text, .hero-small-text, .btn {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateY(100px);
			transform: translateY(100px);
			-webkit-transition: all .5s linear;
			transition: all .5s linear;
		}
		.hero-large-text {
			-webkit-transition-delay: 0.7s; /* Safari */
			transition-delay: 0.7s;
		}
		.hero-small-text {
			-webkit-transition-delay: 0.8s; /* Safari */
			transition-delay: 0.8s;
		}
		.btn{
			-webkit-transition-delay: 1s; /* Safari */
			transition-delay: 1s;
		}

	}

	&.loaded {
		.container {
			.hero__content {

				&:hover {
					.hero-large-text, .hero-small-text, .btn {
						-webkit-transition-duration: 0.3s;
						transition-duration: 0.3s;
					}
					.hero-large-text {
						-webkit-transition-delay: 0s; /* Safari */
						transition-delay: 0s;
					}
					.hero-small-text {
						-webkit-transition-delay: 0s; /* Safari */
						transition-delay: 0s;
					}
					.btn{
						-webkit-transition-delay: 0s; /* Safari */
						transition-delay: 0s;
					}
				}

				.hero-large-text,
				.hero-small-text,
				.btn {
					visibility: visible;
					opacity: 1;
					-webkit-transform: translateY(0);
					transform: translateY(0);
				}

			}
		}
	}

	/* Loading icon */
	.sk-cube-grid {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 9999999;
		margin: 0px;
		-webkit-transform: translate(-50%, -50%);
	            transform: translate(-50%, -50%);
	}
}

// DIsable text animation
.is-customize-preview {
	.sk-cube-grid {
		display: none !important;
	}
	.hero-slideshow-wrapper {

		.hero__content {
			.hero-large-text, .hero-small-text, .btn {
				visibility: visible;
				opacity: 1;
				-webkit-transform: translateY(0px);
				transform: translateY(0px);
				-webkit-transition: all 0s linear;
				transition: all 0s linear;
			}
			.hero-large-text {
				-webkit-transition-delay: 0s; /* Safari */
				transition-delay: 0s;
			}
			.hero-small-text {
				-webkit-transition-delay: 0s; /* Safari */
				transition-delay: 0s;
			}
			.btn{
				-webkit-transition-delay: 0s; /* Safari */
				transition-delay: 0s;
			}

		}

		&.loaded {
			.container {
				.hero__content {

					&:hover {
						.hero-large-text, .hero-small-text, .btn {
							-webkit-transition-duration: 0s;
							transition-duration: 0s;
						}
						.hero-large-text {
							-webkit-transition-delay: 0s; /* Safari */
							transition-delay: 0s;
						}
						.hero-small-text {
							-webkit-transition-delay: 0s; /* Safari */
							transition-delay: 0s;
						}
						.btn{
							-webkit-transition-delay: 0s; /* Safari */
							transition-delay: 0s;
						}
					}

					.hero-large-text,
					.hero-small-text,
					.btn {
						visibility: visible;
						opacity: 1;
						-webkit-transform: translateY(0);
						transform: translateY(0);
					}

				}
			}
		}
	}
}


.hero-slideshow-normal {
	.container {
		padding: 10% 0px;
		position: relative;
		z-index: 80;

	}
}

.hero-slideshow-fullscreen {
	.container {
		z-index: 80;
		position: relative;
		top: 50%;
	  	transform: translateY(-50%);

	}
}

.hero__content {
	color: #FFF;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	@include rem('font-size', 18px);
	font-weight: 300;
	h1, h2, h3, h4, h5, h6 {
		color: #FFF;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	a.btn {
		@include rem('margin', 10px 10px 20px 0px);
	}
	p {
		@include rem('margin-bottom', 20px);
	}
	.btn-secondary-outline {
		box-shadow: none;
		border-color: rgba(255, 255, 255, 0.9);
		color: rgba(255, 255, 255, 0.9);
		&:hover {
			background: #FFF;
			color: #333;
		}
	}
}

/* Hero Content Style 2. */
.hero-content-style2 {
	h1 {
		font-weight: 800;
		@include rem('font-size', 50px);
		letter-spacing: 3px;
	}
	.hcl2-content {
		@include rem('padding', 50px 0px);
	}
	.hcl2-image  {
		text-align: right;
	}
	.hcl2-content, .hcl2-image {
		@include media-breakpoint-down(lg) {
			text-align: center;
		}
	}
}

/* Hero Text Style1. */
.hero-content-style1 {
	text-align: center;
	h2 {
		color: #FFFFFF;
		font-size: 35px;
		letter-spacing: 2px;
		line-height: 1.3;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		font-weight: 800;
		text-transform: uppercase;
		@include for(small-screens) {
			font-size: 60px;
			letter-spacing: 3px;
		}
		@include for(medium-screens) {
			font-size: 75px;
			letter-spacing: 4px;
		}
		strong {
			font-weight: 900;
		}
	}
	p {
		font-size: 14px;
		font-style: italic;
		letter-spacing: 0.4px;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		color: #FFFFFF;
		text-align: center;
		font-weight: 100;
		@include rem('margin-bottom', 30px);
		@include for(medium-screens) {
			font-size: 18px;
		}
		@include for(large-screens) {
			font-size: 22px;
		}
		strong {
			letter-spacing: -0.6px;
		}
	}
	.btn {
		@include media-breakpoint-down(sm) {
			display: inline-block;
		}
	}

	a, .btn {
		&:active, &:focus {
			outline: none;
		}
	}

}

#hero {
	.btn {
		box-shadow: none;
	}
}

.header-transparent {
	#hero {
		.container {
			.hero__content {
				margin-top: 70px;
			}

		}
	}
}


/* Text Rotator */
.morphext > .animated {
    display: inline-block;
}

/* Section: Features
------------------------------*/
.icon-background-default {
    color: #03c4eb;
}
.feature-item {
	text-align: center;
	.feature-icon {
		color: #fff;
	}
	.fa-5x {
		font-size: 4em;
	}
	&:hover {
		.icon-background-default {
		    color: #333333;
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
			transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-moz-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}
	}

	@include for( medium-screens  ){
		&.col-lg-3:nth-child( 4n+1 ),
		&.col-lg-4:nth-child( 3n+1 ),
		&.col-lg-6:nth-child( 2n+1 ),
		{
			clear: left;
		}
	}

}
.feature-media {
	text-align: center;
	margin-bottom: 20px;
}

/* Section: About Us
------------------------------*/
.section-about {
	.about-image {
		text-align: center;
	}
	.about-image img {
		margin-bottom: 30px;
	}
}

/* Section: Services
------------------------------*/
.section-services {
	.service-item {
		background: #FFFFFF;
		padding: 30px;
		margin-bottom: 30px;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
		-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
		transition: all 100ms ease-out 0s;
		@include for(screens-small) {
			padding: 20px;
		}
		&:after {
			@include clearfix;
			@include clearfix-after;
		}
		&:hover {
			box-shadow: 0 6px 9px rgba(0, 0, 0, 0.09);
		}
		.service-image {
			float: left;
			margin-right: 30px;
			img {
				max-width: 120px;
				height: auto;
			}
			i {
				color: $primary;
			}
			@include for(screens-small) {
				float: none;
				margin-bottom: 30px;
				margin-top: 10px;
				margin-right: 0px;
				text-align: center;
			}
		}
		.service-thumbnail {
			@include rem('margin-bottom', 25px);
		}
		.service-content {
			overflow: hidden;
			p {
				margin: 0px;
				font-size: 14px;
				color: $text;
			}
			@include for(screens-small) {
				text-align: center;
				overflow: auto;
			}

		}
		.service-title {
			@include rem('margin-bottom', 10px);
			color: #333333;
		}
		.service-link {
			&:before {
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0px;
				left: 0px;
				content: "";
			}
		}
	}
}

/* Section: Counter
------------------------------*/
.section-counter {

}
.counter_item {
	text-align: center;
	@include rem('margin-bottom', 35px);
	.counter__number {
		@include rem('font-size', 50px);
		font-weight: 800;
		color: $primary;
		line-height: 1;
		font-family: serif, sans-serif;
		text-transform: uppercase;
	}
	.counter_title {
		@include rem('font-size', 18px);
	}
}


/* Section: Parallax
------------------------------*/
.section-has-parallax {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.parallax_bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
}

.parallax_bg.is-mobile {
	background-position: 50% 50% !important;
}

.parallax_bg_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 5;
	opacity: 0.4;
}

.parallax-content {
	z-index: 10;
	position: relative;
	padding: 100px 0px;
	text-align: center;
	h1,h2,h3,h4,h5,h6 {
		color: #FFFFFF;
		line-height: 1.5;
	}
	p, a {
		color: #FFFFFF;
	}
}

/* Section: Team
------------------------------*/
.section-team {
	.team-member {
		padding: 0px 0.5px;
	}
	.row {
		margin-left: -0.5px;
		margin-right: -0.5px;
	}
}
.team-members.row {
	@include rem('margin-left', 0px);
	@include rem('margin-right', 0px);

	@include for ( medium-screens  ) {
		&.team-layout-4 {
			.team-member {
				width: ( 100%/4 );
			}
			.team-member:nth-child(4n+1) {
				clear: left;
			}
		}
		&.team-layout-3 {
			.team-member {
				width: ( 100%/3 );
			}
			.team-member:nth-child(3n+1) {
				clear: left;
			}
		}
		&.team-layout-2 {
			.team-member {
				width: ( 100%/2 );
			}
			.team-member:nth-child(2n+1) {
				clear: left;
			}
		}
	}

	@include for( screens-medium ) {
		.team-member {
			width: ( 100%/2 );
		}
		.team-member:nth-child(2n+1) {
			clear: left;
		}
	}

	@include for( screens-small ) {
		.team-member {
			width: ( 100%/2 );
		}
		.team-member:nth-child(2n+1) {
			clear: left;
		}
	}

	@include for( screens-tiny ) {
		.team-member {
			width: 100%;
		}
	}

}

.team-member {
	margin-bottom: 20px;
	float: left;

	.member-thumb {
		margin-bottom: 20px;
		position: relative;
		overflow: hidden;
		&:hover {
			.member-profile {
				bottom: 8px;
				transition: all 0.1s linear;
			}
			img {
				opacity: 0.7;
				transition: all 0.1s linear;
			}
		}
		.member-profile {
			position: absolute;
			text-align: center;
			bottom: -35px;
			left: auto;
			right: auto;
			width: 100%;
			a {
				color: #000000;
				.fa-inverse {
					color: #ffffff;
				}
				&:hover {
					color: $primary;
				}
			}
		}
	}

	.member-info {
		margin-top: 0px;
		position: relative;
		z-index: 30;
		text-align: center;
	}
	.member-name {
		letter-spacing: 2px;
		margin-bottom: 15px;
		position: relative;
		&:after {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -15%;
			bottom: -11px;
			width: 30%;
			height: 1px;
			background: #cccccc;
		}
	}
	.member-position {
		text-transform: uppercase;
		font-size: 10px;
		letter-spacing: 1.3px;
	}

}

/* Section: News
------------------------------*/
.all-news {
	text-align: center;
	margin-top: 40px;
	display: block;
}

.section-news, .archive, .blog {

	.list-article {
		border-top: 1px solid $border;
		padding: 25px 0px;
		&:last-of-type {
			border-bottom: 1px solid $border;
		}
	}
	.list-article-thumb {
		float: left;
		margin-right: 30px;
		a img:hover {
			opacity: 0.8;
		}
		@include for(screens-medium) {
			display: none;
		}
		@include for(screens-small) {
			width: 100%;
			float: none;
			margin-right: 0px;
			margin-bottom: 30px;
			display: block;
			img {
				width: 100%;
			}
		}
	}
	.list-article-content {
		float: none;
		overflow: hidden;
	}
	.list-article-meta {
		font-size: 11px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		margin-bottom: 10px;
	}

	.entry-title {
		font-size: 22px;
		line-height: 1.5;
		a:hover{
			text-decoration: none;
		}
	}
	.entry-excerpt p {
		margin-bottom: 0px;
	}
}

.archive .site-main .list-article:first-child,
.blog .site-main .list-article:first-of-type {
	border-top: none;
	padding-top: 0px;
}

.page-template-template-blog .section-news {
	.list-article {
		padding: 30px 0px;
		&:first-of-type {
			border-top: none;
			padding-top: 0px;
		}
		&:last-of-type {
			border-bottom: none;
		}
	}
}
.section-news.section-inverse {
	.list-article {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		&:last-of-type {
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
	}
	h1,h2,h3,h4,h5 {
		a {
			color: rgba(255, 255, 255, 0.8);
			&:hover {
				color: #FFF;
			}
		}
	}
}

/* Section: Contact
------------------------------*/
.section-contact {
	input, textarea {
		width: 100%;
	}
	.address-contact {
		margin-top: 5px;
		margin-bottom: 15px;
		span {
			float: left;
			color: #aaaaaa;
    		//margin-top: 7px;
    		//color: #aaaaaa;
		}
		.address-content {
			display: block;
    		padding-left: 45px;
    		font-style:  italic;
    		line-height: 2;
		}
		.fa-inverse {
			font-size: 12px;
		}
	}
	textarea {
		max-height: 190px;
	}
}

.wpcf7-form {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 600;
	br {
		margin-bottom: 5px;
	}
}

div.wpcf7-validation-errors {
	margin: 20px 0px;
	padding: 15px;
}
div.wpcf7-response-output {
	margin: 20px 0px;
}

/* Section: Videolightbox
------------------------------*/
.section-videolightbox {
	text-align: center;
	.videolightbox__icon {
		@include rem('margin-bottom', 40px);
	}
	.videolightbox__heading {
		text-transform: uppercase;
		@include rem('font-size', 38px);
		letter-spacing: 0px;
		font-weight: 500;
		strong {
			font-weight: 800;
		}
	}
	.video_icon {
		background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
	    border: 4px solid #fff;
	    border-radius: 100px;
	    height: 50px;
	    line-height: 1;
	    padding: 10px;
	    width: 50px;
		display: inline-block;;
		i {
			color: #fff;
		    font-size: 20px;
		    margin-left: 6px;
			margin-top: 1px;
			line-height: 1;
		}
		&:hover {
			background: #FFFFFF;
			i {
				color: #000;
			}
		}
	}
}
.parallax-mirror, .parallax-mirror .parallax-slider,
.parallax-hero.parallax-window {
	//background-color: #222222;
}
.parallax-videolightbox .parallax-mirror::before {
	background-color: #000000;
	opacity: 0.4;
}

/* Section: Parallax
------------------------------*/
.parallax-window section {
	z-index: 10;
	position: relative;
	background: transparent !important;
}
.parallax-window .parallax-mirror::before{
	content:  " ";
	position: absolute;
	top: 0px; left: 0px; right: 0px; bottom: 0px; display: block;
	z-index: 2;
}

/* Section: Gallery
------------------------------*/

.gallery-grid .g-item {
	padding: 10px;
	float: left;
}
.all-gallery {
	text-align: center;
	margin-top: 40px;
	display: block;
}
// Zoom effect
.g-zoom-in {
	.g-item {
		display: block;
		overflow: hidden;
		.inner-content {
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		img {
			display: block;
			overflow: hidden;
			-webkit-transition: all 0.5s linear;
	          transition: all 0.5s linear;
		}
		&:hover {
			img {
				-ms-transform: scale(1.5, 1.5); /* IE 9 */
	   			-webkit-transform: scale(1.5, 1.5); /* Safari */
	   			transform: scale(1.5, 1.5);
			}
		}
	}
}

.g-layout-full-width.container {
	width: 100%;
	max-width: none;
	padding: 0px;
}
@include for( small-screens ) {
  @for $i from 1 through 6 {
    .g-col-#{$i} {
      .g-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}

@media screen and (min-width: $small_phone) and (max-width: $phone) {
  @for $i from 1 through 6 {
    .g-col-#{$i} {
      .g-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}

@include for( screens-tiny ){
  @for $i from 1 through 6 {
    .g-col-#{$i} {
      .g-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}


.gallery-justified {
  width: 100%;
  position: relative;
  overflow: hidden;

  img {
	  max-width: none;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  margin: 0;
	  padding: 0;
	  border: none;
  }
}
.gallery-justified > a,
.gallery-justified > div {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  float: left;
  //filter: "alpha(opacity=10)";
  //opacity: 0.1;
}

.gallery-masonry {
	width: 100%;
	position: relative;
	display: block;
	&:affter{
		@include clearfix-after();
	}
	.inner {
		display: block;
	}
}