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

// Demo Colors
$color-primary: #da7940;
$color-secondary: #312227;
$color-tertiary: #efece8;
$color-quaternary: #101019;
$color-light: #FFF;
$color-dark: #1e1e1e;

// Custom Font Family's
$primary-font: 'Sintony', sans-serif;
$secondary-font: 'Playfair Display', serif;

/*
* RTL
*/
@include if-rtl() {
	// Google Maps
	.gmap_marker {
		padding-right: 15px;
	}

	// Icons
	[class*="fa-"] {
		&.fa-reply {
			transform: rotate(180deg);
		}
	}
}

/*
* CUSTOM ANIMATIONS
*/
// Custom Fade In Left
@keyframes customFadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, -50%, 0) rotate(45deg);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, -50%, 0) rotate(45deg);
    }
}

.customFadeInLeft {
    animation-name: customFadeInLeft;
}

// Custom Fade In Left No Rotate
@keyframes customFadeInLeftNoRotate {
    0% {
        opacity: 0;
        transform: translate3d(-100%, -50%, 0);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, -50%, 0);
    }
}

.customFadeInLeftNoRotate {
    animation-name: customFadeInLeftNoRotate;
}

// Custom Fade In Right
@keyframes customFadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, -50%, 0) rotate(45deg);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, -50%, 0) rotate(45deg);
    }
}

.customFadeInRight {
    animation-name: customFadeInRight;
}

// Custom Fade In Right No Rotate
@keyframes customFadeInRightNoRotate {
    0% {
        opacity: 0;
        transform: translate3d(100%, -50%, 0);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, -50%, 0);
    }
}

.customFadeInRightNoRotate {
    animation-name: customFadeInRightNoRotate;
}

/*
* GENERAL DEMO CONFIG
*/

// Set Demo Texts Font Family
h1, h2, h3, h4, h5, h6 {
	font-family: $secondary-font;
}

a, p, span, input {
	font-family: $primary-font;
}

// Set Demo Text Font Size
h2 {
	font-size: 1.9em;
	margin: 0 0 17px 0;
}

h4 {
	font-size: 1.2em;
}

// Set Demo Text Colors
p {
	color: #50545F;
}

// Fix for carousel with thumb
.img-thumbnail {
    transform: translate(0,0);
}

/*
* CUSTOM DEMO CLASSES
*/
// Custom Box Shadow
.custom-box-shadow {
	box-shadow: 0px 0px 60px -10px rgba(139, 139, 139, 0.5);
}

.custom-box-shadow-2 {
	box-shadow: 0px 0px 20px -2px rgba(139, 139, 139, 0.3);
}

// Custom Borders
.custom-border-1 {
	border: 8px solid #FFF;
}

// Custom Overflow
.custom-overflow-hidden {
	overflow: hidden;
}

// Custom Fonts
.custom-primary-font {
	font-family: $primary-font !important;
}

.custom-secondary-font {
	font-family: $secondary-font !important;
}

// Custom Font Styles
.custom-font-italic {
	font-style: italic !important;
}

// Custom Buttons Styles
.custom-btn-style-1 {
	padding: 12px 25px !important;
}

// Custom Text Colors
.custom-text-color-1 {
	color: #544b40 !important;
}

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

.custom-text-color-default {
	color: #777 !important;
}

.custom-hr-color-1 {
	background: #3f3035 !important;
}

// Custom Position
.custom-position-relative {
	position: relative;
}

.custom-img-fluid-center {
	margin: 0 auto;
}

// Custom Spacements
.custom-section-padding-1 {
	padding: 70px 0 160px !important;
}

.custom-section-padding-2 {
    padding: 110px 0 !important;
}

.custom-section-padding-3 {
	padding: 60px 0 180px !important;

	@media (max-width: 767px) {
    	padding: 60px 0 120px !important;
    }
}

.custom-section-padding-4 {
    padding: 78px 0 !important;
}

.custom-margin-1 {
	margin-#{$left}: 95px;
}

.custom-negative-margin-1 {
	margin: -90px 0 60px !important;
}

.custom-negative-margin-2 {
	margin-top: -180px !important;

	@media (max-width: 767px) {
    	margin-top: -90px !important;
    }
}

@media (min-width: 992px) {
	.custom-md-margin-bottom-1 {
		margin-bottom: 30px !important;
	}
}

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

	.custom-sm-margin-bottom-2 {
		margin-bottom: 25px !important;
	}
}

@media (max-width: 767px) {
	.custom-xs-margin-bottom-1 {
		margin-bottom: 30px !important;
	}

	.custom-xs-ml-0 {
		margin-left: 0 !important;
	}

	.custom-xs-ml-1 {
		margin-left: 60px !important;
	}

	.custom-xs-padding-1 {
		padding-top: 0 !important;
	    padding-bottom: 20px;
	}
}

// Custom Sizes
.custom-icon-size-1 {
	font-size: 2em;
}

.custom-line-height-1 {
	line-height: 1.7 !important;
}

// Custom Right & Left Image
.custom-left-cloud {
	position: absolute;
    top: 0;
    left: 0;
}

.custom-right-cloud {
	position: absolute;
    top: 0;
    right: 0;
}

// Custom Square & Cloud Styles
.custom-cloud {
	position: absolute;
	top: 50%;
    width: auto;
    height: 80%;
    transform: translateY(-50%);

	&.left-pos {
		left: 0;
	}

	&.left-pos-2 {
		left: 90px;
	    top: 58%;
	}

	&.right-pos {
		right: 0;
	}
}

.custom-small-square {
    position: absolute;
	width: 192px;
    height: 192px;
    top: 50%;
    border: 10px solid #FFF;
    backface-visibility: hidden;
    transform: translateY(-50%) rotate(45deg);

    &.left-pos {
    	left: 3vw;
    	top: 45%;
    }

    &.left-pos-2 {
    	left: 250px;
    }

    &.right-pos {
		right: 3vw;
	    top: 66%;
    }
}

.custom-big-square {
    position: absolute;
	width: 312px;
    height: 312px;
    top: 43%;
    border: 10px solid #FFF;
    backface-visibility: hidden;
    transform: translateY(-50%) rotate(45deg);

    &.left-pos {
    	left: -150px;
    }

    &.left-pos-2 {
		left: 35px;
    }

    &.right-pos {
    	right: -150px;
    }
}

.custom-box-squares {
	position: relative;
	min-height: 300px;
	margin-top: 38px;

	.custom-cloud {
		height: 100%;
	}

	.custom-big-square {
		width: 250px;
		height: 250px;
	}

	.custom-small-square {
		width: 155px;
		height: 155px;
	}
}

@media (max-width: 991px) {
	.custom-cloud {
	    height: 40%;
	}

	.custom-small-square {
		width: 102px;
	    height: 102px;
	    border: 5px solid #FFF;

	    &.left-pos {
	    	left: 4vw;
	    }

	    &.right-pos {
			right: 4vw;
			top: 54%;
	    }
	}

	.custom-big-square {
		width: 232px;
	    height: 232px;
	    border: 5px solid #FFF;
	}
}

// Custom Social Icons Style
.custom-social-icons {
	li {
		box-shadow: none !important;

		a {
			background: transparent;
			font-size: 17px;
			color: #FFF !important;
		}

		&:hover {
			a {
				background: transparent !important;
				color: #da7940 !important;
			}
		}
	}
}

.custom-social-icons-2, .custom-social-icons-big {
	li {
		box-shadow: none !important;
		border: 1px solid #9D9D9D;

		a {
		    line-height: 34px;
			background: transparent;
			color: #9D9D9D !important;
		}

		&:hover {
			border-color: $color-primary;

			a {
				background: transparent !important;
				color: $color-primary !important;
			}
		}
	}
}

.custom-social-icons-big {
	margin-bottom: 20px;

	li {
		border-width: 2px;
		margin: 0;

		&:nth-child(2) {
			margin: 0 20px;
		}

		a {
			position: relative;
		    width: 60px;
		    height: 60px;
		    font-size: 23px;
		    line-height: 65px;
	        background: transparent !important;
		}

		.custom-icon-title {
			position: absolute;
			left: 50%;
		    bottom: -24px;
		    font-size: 12px;
		    line-height: 1;
		    letter-spacing: -1px;
			transform: translateX(-50%);
		}
	}
}

.custom-social-icons-3 {
	li {
		box-shadow: none;
		border: 2px solid #8C8C8C;

		a {
		    color: #8C8C8C !important;
		}
	}
}

// Rev Slider - Custom Arrows Style
.tp-leftarrow, .tp-rightarrow {
	&.custom-arrows-style-1 {
		width: 45px;
		height: 80px;
		background: rgba(16, 16, 25, 0.5);

		&:hover {
			background: rgba(16, 16, 25, 1);
		}

		&:before {
			content: '';
			position: absolute;
		    top: 50%;
		    left: 70%;
		    width: 30px;
		    height: 30px;
		    border-top: 1px solid #FFF;
		    border-left: 1px solid #FFF;
			transform: translate3d(-50%, -50%, 0) rotate(-45deg);
		}
	}
}

.tp-rightarrow {
	&.custom-arrows-style-1 {
		transform: rotate(180deg);
	}
}

// Owl Carousel
.owl-carousel {
	&.custom-arrows-style-1 {
		.owl-nav {
			button.owl-prev, button.owl-next {
				position: absolute;
	    		width: 55px;
	    		background: transparent !important;
	    		transition: ease all 300ms;

	    		&:before {
	    			content: '';
	    			display: block;
	    			position: absolute;
	    			top: 50%;
	    			right: -2px;
	    			left: auto;
	    			width: 100%;
	    			border-top: 1px solid #da7940;
	    			transform: translateY(-50%);
	    		}

	    		&:after {
	    			content: '';
	    			display: block;
	    			position: absolute;
	    			top: 50%;
	    			right: 0;
	    			width: 25px;
	    			height: 25px;
	    			border-top: 1px solid #da7940;
	    			border-right: 1px solid #da7940;
	    			transform: translateY(-50%) rotate(45deg);
	    		}
			}

			button.owl-prev {
				#{$left}: 10px;
				@include if-ltr() {
					transform: rotate(-180deg);
				}
				@include if-rtl() {
					transform: rotate(0);
				}
			}
			
			button.owl-next {
				#{$right}: 10px;
				@include if-rtl() {
					transform: rotate(180deg);
				}
			}
		}
	}

	&.custom-arrows-style-2 {
		.owl-nav {
			button[class*="owl-"] {
				width: 32px;
				height: 55px;
				background: $color-quaternary;

	    		&:before {
					content: '';
					position: absolute;
				    top: 50%;
				    left: 70%;
				    width: 15px;
				    height: 15px;
				    border-top: 1px solid $color-light;
				    border-left: 1px solid $color-light;
					transform: translate(-50%, -50%) rotate(-45deg);
					@include if-rtl() {
						left: auto;
						right: -5px;
					}
	    		}

	    		&:hover, &:active, &:focus, &:active:hover, &:active:focus {
	    			background: $color-quaternary;
	    		}
			}

			button.owl-next {
				#{$right}: -4px;
			    transform-origin: 50% 25%;
				@include if-ltr() {
					transform: rotate(180deg);
				}
				@include if-rtl() {
					transform: rotate(0deg);
				}
			}

			button.owl-prev {
				#{$left}: -4px;
				@include if-rtl() {
					transform: rotate(180deg);
				}
			}
		}
	}

	&.custom-nav-inside-center {
		.owl-dots {
		    position: absolute;
		    left: 50%;
			bottom: 10px;
		    transform: translateX(-50%);			
		}
	}

	@media (max-width: 991px) {
		&.custom-sm-nav-bottom {
			.owl-nav {
				top: 100%;
			    left: 50%;
			    margin-top: 0;
			    width: 45%;
			    transform: translateX(-50%);
			}
		}
	}

	@media (max-width: 320px) {
		&.custom-sm-nav-bottom {
			.owl-nav {
			    width: 57%;
			}
		}
	}
}

/*
* Newcomers Class
*/
.custom-newcomers-class {
	position: relative;
	display: inline-flex;
	align-items: center;
	background-color: #FFF;
	padding: 0 30px;
    font-size: 1.2em;
    min-width: 445px;
    white-space: nowrap;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		bottom: 5px;
		left: 5px;
		border: 1px solid #efece8;
	}

	> span {
	    position: relative;
	    display: inline-flex;
	    justify-content: center;
	    padding: 25px 12px;
	    font-family: $secondary-font;
	    line-height: 1.1;

		&:after {
		    content: '';
		    display: block;
		    position: absolute;
		    top: 50%;
		    #{$right}: 0;
		    height: calc(100% - 10px);
		    border-right: 1px solid #efece8;
		    transform: translateY(-50%);
		}

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

			&:after {
				content: none;
			}
		}

		> span {
	    	font-size: 1.2em;
	    	padding-right: 3px;
	    }
	}

	&.clock-one-events {
		> span {
			&:last-child {
				padding-#{$right}: 12px;
			}
		}
	}

	&.custom-newcomers-pos-2 {
		position: absolute;
	    top: -31px;
	    left: 50%;
	    transform: translateX(-50%);

	    @media (max-width: 767px) {
	    	top: -30px;
	    }
	}
}

@media (max-width: 1199px) {
	.custom-newcomers-class {
		font-size: 1em;
	}
}

@media (max-width: 767px) {
	.custom-newcomers-class {
		flex-wrap: nowrap;
		> span {
			margin-bottom: 0;
		}
	}
}


@media (max-width: 575px) {
	.custom-newcomers-class {
		padding: 25px 10px 15px 10px;
		font-size: 1em;
		flex-direction: column;
		min-width: 100%;

		> span {
			justify-content: center;
			margin-bottom: 0 !important;
		    padding: 15px 12px;

			&:after {
				content: none;
			}

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

		&.custom-newcomers-pos-2 {
			min-width: 93%;

			& + img {
				margin-top: 240px;
			}
		}
	}
}

/*
* About Us
*/
.custom-thumb-info-3 {
	border: none;
	padding: 15px;

	.thumb-info-wrapper {
		margin: 0 !important;

		&:after {
			content: none;
		}
	}

	.thumb-info-caption {
    	display: block;
		padding: 0;

		.thumb-info-caption-text {
			padding: 0;
			margin: 0;

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

.custom-location {
	padding-#{$left}: 60px;

	> img {
	    position: absolute;
	    #{$left}: 30px;
	    top: 7px;
	}

	strong {
		@include if-rtl() {
			display: inline-block;
		}
	}
}

.custom-phone {
	display: block;
}

.custom-form-style-1 {
	.form-control {
		font-size: 0.9em;
	}
}

@media (max-width: 767px) {
	.custom-form-style-1 {
		.form-control.custom-xs-mb {
			margin-bottom: 15px;
		}
	}	
}

.custom-thumb-carousel {
	padding: 8px;

	&:after {
		content: '';
		display: block;
		clear: both;
	}

	.img-thumbnail {
		padding: 0;
		margin: 0;

		&.img-thumbnail-hover-icon {
			&:before {
				background: rgba($color-quaternary, 0.65);
			}

			&:after {
				content: "\e090";
				font-family: simple-line-icons;
			}
		}
	}

	strong {
		@include if-rtl() {
			display: inline-block;
		}
	}
}

/*
* Event
*/
.custom-thumb-info {
	border: none;
	overflow: visible;

	.thumb-info-wrapper {
		margin: 0 !important;

		&:after {
			content: none;
		}
	}

	.thumb-info-caption {
    	display: block;
		padding: 20px 40px;
		
		.custom-thumb-info-wrapper-box {
			float: left;
		    width: 100%;
		    margin: -57px 0 15px 0;
		}

		.custom-event-infos, .thumb-info-catption-text {
			float: left;
			width: 100%;
		}

		.thumb-info-caption-text, p {
			padding: 0;
			font-size: 1em;
			line-height: 2;
		}

		p {
			font-size: 0.9em;
		}
	}
}

// Custom Event Infos Style
.custom-event-infos {
	ul {
		padding: 0;
		margin: 0;

		li {
			list-style: none;
		    display: inline-block;
		    margin-left: 15px;
		    font-size: 0.9em;

			&:first-child {
				margin-left: 0;
			}

			i {
				font-size: 1.2em;
				color: #1f222b;
				font-weight: bold;
			}
		}
	}
}

// Custom Post Event Style
.custom-post-event {
	position: relative;

	.post-event-date {
	    position: absolute;
	    top: 0;
	    #{$left}: 0;
	    padding: 15px 20px;

		span {
			display: block;

			&.day {
				font-size: 1.9em;
			}

			&.year {
				font-size: 0.9em;
			}
		}

		&.custom-xlg-space {
			top: 30px;
			#{$left}: 30px
		}
	}

	.post-event-content {
		p {
			font-size: 0.9em;
		}

		a {
			@include if-rtl() {
				display: inline-block;
			}
		}
	}

	.comments-count {
		@include if-rtl() {
			display: inline-block;
		}
	}
}

/*
* Testimonial
*/
.custom-testimonial-style {
	.testimonial-quote {
		display: inline-block;
	    padding: 20px;
	    border-radius: 100%;
	    line-height: 1;
	    margin: 5px 0 20px;
	    box-shadow: 0px 5px 20px 5px rgba(207,207,207,0.9);
	}

	blockquote {
		p {
		    font-family: $primary-font;
		    font-style: normal;
		    font-size: 1em;
		    line-height: 1.7;
		}
	}

	.testimonial-author {
		strong {
			display: inline-block;
		}

		span {
			display: inline-block;
			font-size: 1em;
		}
	}
}

/*
* Gallery
*/
.custom-thumb-info-4 {
	border: none;
	padding-bottom: 30px;
	overflow: visible;

	&:hover {
		.thumb-info-wrapper {
			&:before {
			    background: rgba(0, 0, 0, 0.55);
			}

			&:after {
				top: 50%;
			    opacity: 1;
			}
		}
	}

	a {
		cursor: pointer;
	}

	.thumb-info-wrapper {
		&:before {
		    transition: background 0.2s;
		    background: rgba(0, 0, 0, 0);
		    content: "";
		    display: block;
		    position: absolute;
		    left: 0;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    z-index: 2;
		}

		&:after {
	        transition: top 0.2s, opacity 0.2s;
	        background: transparent;
		    color: #FFF;
			content: "\e090";
		    font-family: simple-line-icons;
		    font-size: 30px;
		    height: 30px;
		    position: absolute;
		    top: 30%;
		    margin-top: -15px;
		    display: block;
		    text-align: center;
		    width: 100%;
		    opacity: 0;
		    z-index: 3;
		}

		&.active {
			box-shadow: 0px 0px 60px -3px rgba(139, 139, 139, 1);
		}
	}

	.thumb-info-caption {
	    position: relative;
	    display: block;
	    width: 80%;
	    margin: -37px auto 0;
	    padding: 15px;
	    background: #FFF;
	    z-index: 1;

	    .thumb-info-caption-text {
	    	padding: 0;
	    }

	    h2 {
	    	margin: 0;
	    	line-height: 1.5;
	    }
	}
}

/*
* Blog
*/
.custom-thumb-info-2 {
	background: transparent;
	border: none;
	overflow: visible;

	.thumb-info-wrapper {
		&:after {
			content: none;
		}
	}

	.thumb-info-caption {
	    position: relative;
	    display: block;
	    width: 80%;
	    margin: -80px auto 0;
	    background: #FFF;
	    padding: 30px 30px 20px 30px;
	    z-index: 1;

	    .thumb-info-caption-text, p {
			padding: 0;
			font-size: 1em;
			line-height: 2;
		}

		p {
			font-size: 0.9em;
			margin-bottom: 45px;
		}
	}
}

.custom-thumb-info-post-infos {
	ul {
		position: relative;
		padding: 0;
		margin: 0;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: -20px;
			left: 50%;
			width: calc(100% + 60px);
			border-top: 1px solid #efece8;
			transform: translateX(-50%);
		}

		&:after {
			content: '';
			display: block;
			clear: both;
		}

		li {
		    float: $left;
			list-style: none;
		   	width: 50%;
		    font-size: 0.9em;

			i {
				display: inline-block;
				font-size: 1em;
				color: #1f222b;
				font-weight: bold;
				margin-#{$right}: 8px;
			}
		}
	}

	&.custom-blog-info {
		ul {
			&:before {
				content: none;
			}

			li {
				margin-left: 2px;
			}
		}
	}
}

@media(max-width: 1199px) {
	.custom-thumb-info-post-infos {
		ul {
			li {
			    font-size: 0.8em;
			}
		}
	}

}

.custom-thumb-style-1 {
	border: none;

	img {
	    border-radius: 100% !important;
	    border: 5px solid #FFF;
	    box-shadow: 0px 0px 0px 2px #E0E0E0;
	}
}

ul.custom-comments-style {
	li {
		@media (min-width: 768px) {
			padding: side-values(35px 0 0 115px);
		}
		border-top: 1px solid #DDE5E7;
	}

	> li:first-child {
		border-top: 0;
	}

	.comment-block {
		background: none;
    	padding: 5px 0 20px;
	}
}

.custom-form-style-1 {
	.form-group {
		margin-bottom: 0;

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

/*
* Map
*/
.custom-view-our-location {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #36252b;
    width: 100%;
    height: 96px;
    overflow: hidden;
    z-index: 1;
    transition: ease all 300ms;

    &:hover {
    	opacity: 0.9;
    }

	> a {
		display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
		font-size: 1.6em;
		text-decoration: none;
	    padding-top: 35px;
	}

	> img {
		position: absolute;
	    top: -60px;
	    left: 50%;
	    width: 420px;
		transform: translateX(-50%);
	}
}

#googlemaps {
	min-height: 96px;
}

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

	.container {
		.row {
			> div {
				margin-bottom: 0;
			}
		}
	}

	p {
		margin: 0;
		line-height: 1.6;
	}
}