// COMMON IMPORTS
@import "../config/imports";

// DEMO COLORS
$color-primary: #FDD55C;
$color-secondary: #ecf1f7;
$color-tertiary: #403f3d;
$color-quaternary: #1f1e1c;
$color-light: #FFF;
$color-dark: #1e1e1e;

/*
* DEMO GENERAL STYLES
*/
body {
	position: relative;
	overflow-x: hidden;
}

.body {
	background: transparent;
}

h2 {
	margin-bottom: 17px;
	font-size: 1.8em;
}

section.section {
	padding: 60px 0px;
}

@media (max-width: 767px) {
	section.section {
		padding: 30px 0px;
	}
}

/*
* DEMO CUSTOM STYLES
*/
// POSITION
.custom-position-1 {
	position: relative;
}

// FONT SIZE
.custom-font-size-1 {
	font-size: 60px;
	font-weight: 600;
	line-height: 1;
	margin: -15px 0 10px;
	letter-spacing: -2px;
}

.custom-font-size-2 {
	font-size: 21px;
	letter-spacing: -0.5px;
	line-height: 1;
}

// TEXT COLOR
.custom-text-color-1 {
	color: #b7b7b7 !important;
}

.custom-text-color-2 {
	color: #727c93 !important;
}

.custom-text-color-3 {
	color: #4a3b00 !important;
}

// PARALLAX OVERFLOW
.parallax-no-overflow {
	overflow: visible !important;
	.parallax-background {
		z-index: -1;
	}
}

// BORDER
.custom-border {
	border: 10px solid $color-light;
}

@media (min-width: 991px) {
	.custom-image-position-2 {
		position: absolute;
		max-width: 90%;
		top: -60px;
		z-index: 1;
	}
}

// SPACEMENT
.custom-margin-bottom-1 {
	margin-bottom: 30px !important;
}


@media (min-width: 992px) {
	.custom-section-padding-1 {
		padding-top: 150px !important;
		padding-bottom: 70px !important;
	}

	.custom-md-margin-top-1 {
		margin-top: 58px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.custom-section-padding-1 {
		padding-top: 150px !important;
		padding-bottom: 2.3rem !important;
	}
}

@media (max-width: 991px) {
	.custom-sm-margin-bottom-1 {
		margin-bottom: 45px;
	}
}

@media (max-width: 767px) {
	.custom-xs-margin-1 {
		margin-#{$left}: 0 !important;
		margin-top: 10px;
	}
}

// BUTTONS
.custom-btn-style-1 {
	padding: 5px 18px;
	border-radius: 35px !important;
}

.custom-btn-style-2 {
	padding: 10px 30px;
	border-radius: 35px !important;

	&.btn-outline {
		border-color: #b5b5b5 !important;
		border-width: 1px;
	}
}

// BOX SHADOW
.custom-box-shadow-1 {
	box-shadow: 0px 30px 120px 0px rgba(221, 229, 238, 1);
}

.custom-box-shadow-2 {
	box-shadow: 0px 12px 90px -10px rgba(171, 191, 216, 0.6) !important;
}

.custom-box-shadow-3 {
	box-shadow: 0 30px 40px -15px #e5edf6;
}

.custom-box-shadow-4 {
	box-shadow: 0px 12px 90px -10px rgba(139, 139, 139, 0.5) !important;
}

// CUSTOM BACKGROUND
.custom-bg-color-1 {
	background: #f4f9ff !important;
}

// BACKGROUND
@media (max-width: 767px) {
	.custom-xs-bg-size-cover {
		background-size: cover !important;
	} 
}

// FLAGS
.flag {
	position: relative;
	top: -1px;
}

// Custom Image Pos
@media(min-width: 992px) and (max-width: 1199px) {
	.custom-image-pos-1 {
	    position: relative;
	    left: -60px;
	    max-width: 160%;
	}
}

/*
* Owl Carousel
*/
.owl-carousel {
	&.custom-carousel-style-1 {
		width: calc(100% + 120px);
		#{$left}: 50%;
		@include if-ltr() {
			transform: translateX(-50%);
		}

		@include if-rtl() {
			transform: translateX(50%);
		}

	}

	&.custom-item-padding {
		.owl-item {
			padding: 20px 40px 40px;
		}
	}

	&.custom-dots-style-1 {
		.owl-dots {
			button.owl-dot {
				&.active, &:hover {
					span {
						border-color: $color-dark !important;
						background-color: $color-dark !important;
					}
				}

				span {
					position: relative;
					width: 12px;
					height: 12px;
					margin: 5px 2px;
					background: transparent !important;
					border: 2px solid $color-dark;
				}
			}
		}
	}

	&.custom-dots-color-1 {
		.owl-dots {
			button.owl-dot {
				&.active, &:hover {
					span {
						border-color: $color-dark !important;
						background-color: $color-dark !important;
					}
				}

				span {
					border: 2px solid $color-dark !important;
				}
			}
		}
	}

	&.custom-dots-position-1 {
		.owl-dots {
			text-align: $right;
			padding-#{$right}: 68px;	
		}
	}
}

/*
* Header
*/
#header.header-floating-icons {
	.nav {
		flex-direction: column;
	}

	.header-nav-main {
		nav {
			> ul {
				> li {
					flex: 0 0 auto;
					margin-left: 0;
					> a {
						&.active {
							background: $color-light !important;

							&:after {
								background: $color-light;
							}
						}
					}
				}
			}
		}
	}
}

@media (min-width: 992px) {
	#header.header-floating-icons {
		background: transparent;
		height: 0;
		min-height: 0 !important;

		.header-row {
			display: block;
			position: absolute;
			top: 45px;
			#{$left}: -40px;
		}

		.header-body {
			position: fixed;
			top: 0;
			background: transparent;
			min-height: 0;
			padding: 0;
			border: none;
		}

		.header-nav {
			padding: 0 !important;
		}

		.header-nav-main {
			margin: 0;
			box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.3);

			nav {
				> ul {
					> li {
						&:hover {
							> a {
								> span {
									transform: rotateY(0deg);
								}
							}
						}

						> a {
							font-size: 25px;
							padding: 17.1px;
						    perspective: 770px;

						    &:after {
						    	content: '';
						    	display: block;
						    	position: absolute;
						    	top: 0;
						    	#{$right}: 0;
						    	width: 100%;
						    	height: 102%;
						    	background: $color-primary;
						    	z-index: -1;
						    }

							> span {
							    position: absolute;
							    top: 0;
							    #{$left}: 125.5%;
							    background: #FFF;
							    padding: 0 25px;
							    height: 100%;
							    line-height: 4.1;
							    white-space: nowrap;
							    font-size: 14px;
							    z-index: -2;
							    transition: ease transform 300ms;
							    @include if-ltr() {
							    	transform-origin: -19% 0%;
							    	transform: rotateY(88deg);
							    }

							    @include if-rtl() {
							    	transform-origin: 107% 0% 11px;
							    	transform: rotateY(-88deg);
							    }

							    &:before {
									content: '';
								    display: block;
								    position: absolute;
								    top: 50%;
								    #{$left}: -4px;
    								padding: 10px;
								    background: #FFF;
								    z-index: -1;
							    	transform: translate(0, -50%) rotate(45deg);
							    }
							}
						}
					}
				}
			}
		}
	}
}

@media (min-width: 992px) and (max-width: 1281px) {
	#header.header-floating-icons {
		.header-row {
			#{$left}: -19px;
		}

		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							padding: 9.8px;
							perspective: 450px;

							> span {
								line-height: 3;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 991px) {
	#header.header-floating-icons {
		position: absolute;
		top: 60px;
		#{$right}: 0px;
		
		.header-body {
			background: transparent;
			border: none;
			min-height: 0;
		}

		.header-btn-collapse-nav {
			padding: 15px 20px;
			margin: 0;
			color: #1e1e1e;
		}

		.header-nav-main {
			position: absolute;
			#{$right}: 0px;
			top: 77px;
			max-width: 53px;
			overflow: hidden;
			&:before {
				content: none;
			}

			nav {
				padding: 0;
				max-height: none;
				> ul {
					display: block;
					padding: 0;
					> li {
						display: inline-block;
						border: none;

						> a {
							font-size: 1.7em;
							margin: 0;
							padding: 15px;
							color: #1e1e1e !important;
						    border-bottom-color: #FDD55C;

							> span {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}

/*
* About Me
*/
.about-me-more {
	display: none;
	&.about-me-more-visible {
		display: block;
	}
}

.custom-about-me-infos {
	span {
		display: block;
	}
}

@media (max-width: 767px) {
	.custom-about-me-infos {
		span {
			font-size: 0.9em;
		}
	}
}

.custom-about-me-links {
	position: relative;

	&:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		#{$right}: 0;
		width: 75vw;
		border-bottom: 1px solid #e2e2e2;
		z-index: 0;
	}
}

@media (max-width: 991px) {
	.custom-about-me-links {
		&:after {
			width: 100vw;
		}
	}
}

@media (max-width: 767px) {
	.custom-about-me-links {
		> .container {
			max-width: none;
		}
	}
}

.custom-nav-button {
	display: inline-block;
	padding: 30px 10px;
	font-size: 1.2em;
	letter-spacing: -0.5px;
	line-height: 1.3;
	text-align: center;

	&.custom-divisors {
		&:before, &:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			#{$left}: -12px;
			height: 100%;
			border-#{$left}: 1px solid #e2e2e2;
		}

		&:after {
			#{$left}: auto;
			#{$right}: -16px;
		}
	}

	i {
		float: $left;
		font-size: 1.3em;
		margin-#{$right}: 5px;
		vertical-align: middle;
	}
}

@media (max-width: 991px) {
	.custom-nav-button {
		&.custom-divisors {
			&:before, &:after {
				content: none;
			}
		}
	}
	.custom-xs-border-bottom {
		border-bottom: 1px solid #e2e2e2;
	}
}

.custom-box-details {
	padding: 35px;

	h4 {
		letter-spacing: -0.5px;
	}

	@media (max-width: 767px) {
		float: none !important;
		margin-left: 0 !important;
	}
}

.custom-list-style-1 {
	padding: 0;

	li {
		list-style: none;

		span {
			text-transform: uppercase;
			font-weight: 600;
			font-size: 0.9em;

			&:nth-child(1) {
				display: inline-block;
				min-width: 100px;
			}

			&.custom-max-width-1 {
				min-width: 130px;
			}
		}
	}
}

.custom-social-icons {
    position: absolute;
    top: 50%;
    #{$right}: 0;
    transform: translate(0, -50%);

    li {
    	display: block;
    	margin: 0;

    	a {
    		height: 40px;
		    line-height: 40px;
		    width: 40px;
		    border-radius: 0;
		    color: $color-light !important;
    	}

    	&:hover {
    		a {
    			opacity: 0.9;
    		}
    	}

    	&.social-icons-facebook {
    		a {
				background: #3b5a9a; 
    		}
    	}

    	&.social-icons-twitter {
    		a {
				background: #1aa9e1; 
    		}
    	}

    	&.social-icons-youtube {
    		a {
				background: #c3191e; 
    		}
    	}
    }

    @media (max-width: 1281px) {
    	display: none;
    }
}

/*
* Experience
*/
section.custom-timeline {
	width: calc(100% - 30px);
	margin: side-values(0 0 0 40px);
	padding: 0;

	&:after,
	&:before {
		content: none;
	}

	.timeline-body {
		&:after {
			content: '';
			display: block;
			clear: both;
		}
	}

	.timeline-bar {
		position: absolute;
		background: $color-dark;
		width: 3px;
		#{$left}: -3.6%;
		z-index: 0;
	}

	.timeline-box {
		position: relative;
		border: 0 !important;
		margin: 15px 0 !important;
		width: 100%;
		margin: 0;
		padding: 0;

		&.right {
			max-width: 100%;

			&:before {
				top: 50%;
				#{$left}: -3.8%;
				background: $color-dark !important;
				box-shadow: 0 0 0 3px $color-secondary, 0 0 0 6px $color-dark !important;
				margin-top: 0;
				transform: translateY(-50%);
			}

			&:after {
				top: 50%;
				left: -22px;
				background: $color-primary;
				border: none;
				transform: translateY(-50%) rotate(45deg);
			}
		}

		.experience-info, .experience-description {
			padding: 40px;
		}

		.experience-info {
			p {
				opacity: 0.5;
				text-transform: uppercase;
				font-size: 11px;
			}

			.from, .to {
				display: inline-block;
				width: 49%;
				text-transform: uppercase;
				font-size: 12px;
				line-height: 1.3;

				> span {
					display: block;
					text-transform: none;
					font-size: 16px;
				}
			}

			.company {
				font-size: 18px;

				> span {
					display: block;
					opacity: 0.5;
					text-transform: uppercase;
					font-size: 11px;
				}
			}
		}
	}
}

@media (max-width: 1199px) {
	section.custom-timeline {
		width: calc(100% - 60px);
		margin: side-values(0 0 0 60px);

		.timeline-bar {
			#{$left}: -5.1%;
		}

		.timeline-box {
			&.right {
				&:before {
					#{$left}: -5.5%;
				}
			}
		}
	}
}

@media (max-width: 991px) {
	section.custom-timeline {
	    width: calc(100% - 30px);
	    margin: 0 0 0 20px;
		.timeline-bar {
			#{$left}: -6.7%;
		}

		.timeline-box {
			&:before, &:after {
				display: block !important;
			}

			&.right {
				float: $right;

				&:before {
					#{$left}: -7%;
				}
			}
		}
	}
}

@media (max-width: 767px) {
	section.custom-timeline {
		width: 100%;
		margin: 0;
		padding-left: 15px;
		padding-right: 15px;

		.timeline-bar {
			display: none;
		}

		.timeline-box {
			&:before, &:after {
				display: none !important;
			}
		}
	}
}

@media (max-width: 575px) {
	section.custom-timeline {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
* Education
*/
.custom-box-details-2 {
	padding: 45px;
	margin-top: 20px;
	margin-bottom: 20px;

	h4 {
		letter-spacing: -0.5px;
	}

	> i {
		font-size: 2em;
	}
}

/*
* Skills & Language
*/
.custom-progress-bars {
	&:after {
		content: '';
		display: block;
		clear: both;
	}

	.progress-label {
		float: $left;
		width: 30%;
		clear: both;
		margin-top: 10px;
	}

	.progress {
		float: $left;
		width: 70%;
		height: 3px;
		margin-top: 20px;

		.progress-bar {
			background-color: $color-dark;
			overflow: visible !important;
			height: auto;
		}
	}
}

/*
* Portfolio
*/
.custom-nav-sort {
	&.nav {
		> li {
			margin-#{$right}: 10px;

			> a {
				background: transparent;
				border-radius: 35px;
				color: $color-dark;
				text-transform: uppercase;
				border: 1px solid #d0d3d6;
				font-weight: 700;
				padding: 7px 30px;
				font-size: 0.9em;
				transition: ease background 300ms;
			}

			&.active, &:hover {
				> a {
					background: $color-primary;
					border-color: $color-primary;

					&:hover, &:focus {
						color: $color-dark;   	
					}
				}
			}
		}
	}
}

@media (max-width: 767px) {
	.custom-nav-sort {
		&.nav {
			> li {
				margin-bottom: 10px;
			}
		}
	}
}

.custom-thumb-info-1 {
	border: none;
	backface-visibility: initial;
	transform: none;

	&:hover {
		.thumb-info-wrapper {
			&:after {
				opacity: 0.8;
			}

			.thumb-info-plus {
				opacity: 1;
				width: 30%;

				&:after {
					transform: translate(-50%, -50%) rotate(90deg);
				}
			}
		}
	}

	.thumb-info-wrapper {
		margin: 0 !important;
		backface-visibility: initial;
		transform: none;

		&:after {
			background: $color-primary;
		}

		.thumb-info-plus {
			opacity: 0;
			position: absolute;
			width: 10%;
			top: 50%;
			left: 50%;
			z-index: 2;
			transform: translate(-50%, -50%);
			transition: ease all 0.3s;

			&:before, &:after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				top: 50%;
				left: 50%;
				border-top: 1px solid $color-dark;
				transform: translate(-50%, -50%);
			}

			&:after {
				transform: translate(-50%, -50%) rotate(0deg);
			}
		}
	}
}

/*
* Testimonials
*/
.custom-testimonial-style-1 {
	&.testimonial-with-quotes {
		blockquote {
			&:before, &:after {
				color: $color-dark;
			}

			p {
				padding: 0 10px;
			}
		}
	}

	blockquote {
		background: transparent !important;

		p {
			font-family: "Open Sans";
			font-size: 1em;
			line-height: 1.8;
		}
	}

	.testimonial-author {
		position: relative;
		margin: 19px 0 0 72px;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: -10px;
			#{$left}: 10px;
			width: 100px;
			border-top: 1px solid #deb717;
		}

		span {
			font-size: 1em;
		}
	}
}

/*
* Blog
*/
.custom-thumb-info-2 {	
	border: 0;
	.thumb-info-wrapper {
		margin: 0 !important;

		&:after {
			content: none;
		}
	}

	.thumb-info-caption {
		display: block;
		padding: 25px 45px 45px;

		.thumb-info-caption-text {
			padding: 0;
			min-height: 112px;

			p {
				font-size: 1em;
				padding: 0;
				line-height: 2;
			}
		}

		.custom-blog-post-share {
			float: $right;

			ul {
				float: $right;
				margin-#{$left}: 8px;
				padding: 0;

				li {
					display: inline-block;
					list-style: none;
					line-height: 1;
					padding: 0 10px;

					a {
						line-height: 1;
						transition: ease opacity 300ms;

						&:hover {
							opacity: 0.7;
						}

						&.item-facebook {
							color: #395b98;
						}

						&.item-twitter {
							color: #2baae1;
						}

						&.item-google-plus {
							color: #fc5956;
						}
					}

					&:nth-child(2) {
						border-#{$left}: 1px solid #bababa;
						border-#{$right}: 1px solid #bababa;
					}

					&:last-child {
						padding-#{$right}: 0;
					}
				}
			}

			@media (max-width: 1200px) {
				float: $left;
			}
		}

		.custom-blog-post-date {
			@media (max-width: 1200px) {
				display: block;
			}
		}
	}
}

@media (max-width: 767px) {
	.custom-thumb-info-2 {
		.thumb-info-caption {
			padding: 25px 25px 45px;

			.custom-blog-post-share {
				float: $left;
			}
		}
	}
}

@media (max-width: 430px) {
	.custom-thumb-info-2 {
		.thumb-info-caption {
			padding: 25px 25px 15px;
			
			.custom-blog-post-share {
				float: none;
				display: block;

				ul {
					float: none;
					margin-left: 0;

					li {
						padding-left: 0;

						&:nth-child(2) {
							border: none;
						}
					}
				}
			}

			.custom-blog-post-date {
				float: none;
				display: block;
			}
		}
	}
}

/*
* Say Hello
*/
// For RTL purposes
.col-half-section{
	&.col-half-section-left {
		float: $left;
	}
}

.custom-form-style {
	.form-control-custom {
		.form-control {
			background: transparent;
			border: none;
			border-bottom: 1px solid #d8b113;
			color: $color-dark;
			font-size: 12px;
			padding: 6px 0;
			margin-bottom: 15px;
			box-shadow: none;

			&::-webkit-input-placeholder {
				color: $color-dark;
				text-transform: uppercase;
				font-weight: 600;
			}
			&::-moz-placeholder {
				color: $color-dark;
				text-transform: uppercase;
				font-weight: 600;
			}
			&:-ms-input-placeholder {
				color: $color-dark;
				text-transform: uppercase;
				font-weight: 600;
			}
			&:-moz-placeholder {
				color: $color-dark;
				text-transform: uppercase;
				font-weight: 600;
			}
		}

		textarea.form-control {
			height: 100px;
			margin-bottom: 15px;
		}
	}
}

.custom-feature-box {
	&:hover {
		.custom-feature-box-icon {
			background: $color-primary;

			i {
				color: $color-dark !important;
			}
		}
	}

	.custom-feature-box-icon {
		border: 1px solid #454441;
		line-height: 0.9;
		padding: 10px;
		transition: ease background 300ms;

		i {
			font-size: 1.4em;
			transition: ease color 300ms;
		}
	}

	.feature-box-info {
		padding-left: 25px;
		flex: none;
		> .custom-label {
			display: block;
			line-height: 1;
			font-size: 0.8em;
			color: #bdbdbd;
			position: relative;
		}

		> strong {
			font-size: 1.7em;
			line-height: 1;
		}

		&.custom-both-side-border {
			border-#{$right}: 1px solid #52504d;
			border-#{$left}: 1px solid #52504d;
			line-height: 1;
			padding: 0px 16px;
			margin: 0 13px;
		}
	}
}

@media (max-width: 767px) {
	.custom-feature-box {
		.feature-box-info {
			> strong {
				font-size: 1.4em;
			}
		}
	}

	.custom-feature-box-icon {
		top: -1px;
	}
}

/*
* Footer
*/
#footer {
	border-top: none;

	.footer-copyright {
		border-top: none;
		padding: 15px 0px 30px 0px;
	}
}

@media (max-width: 992px) {
	#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu {
		right: auto;
	}
	
	#header .header-nav-main nav > ul > li.dropdown:hover .dropdown-menu li.dropdown-submenu > .dropdown-menu {
		right: 100%;
	}
}