/* Porto Block */
#banner-wrapper,
#content-top,
#content-bottom {
    .porto-block {
        overflow: hidden;
    }
}

/* Porto Concept */
.porto-concept {
    width: 100%;
    overflow: hidden;
    strong {
        display: block;
        font-size: 2.1em;
        font-weight: normal;
        position: relative;
        margin-top: 30px;
    }
    .row {
        position: relative;
    }
    .process-image {
        width: 160px;
        height: 175px;
        margin: 130px auto 0 auto;
        padding-bottom: 50px;
        position: relative;
        z-index: 1;
        img {
            border-radius: 150px;
            margin: 8px;
            width: 144px;
        }
    }
    .our-work {
        margin-top: 52px;
        font-size: 2.6em;
    }
    .project-image {
        width: 350px;
        height: 420px;
        margin: side-values(15px 0 0 -30px);
        padding-bottom: 45px;
        position: relative;
        z-index: 1;
        img {
            width: 338px;
        }
    }
    .sun {
        width: 60px;
        height: 56px;
        display: block;
        position: absolute;
        #{$left}: 10%;
        top: 35px;
    }
    .cloud {
        width: 116px;
        height: 56px;
        display: block;
        position: absolute;
        #{$left}: 57%;
        top: 35px;
    }
}

/* Responsive */
@media (max-width: 991px) {

    .porto-concept {
        background: none;
        .project-image {
            margin: 60px auto 0 auto;
        }
        .process-image {
            margin-top: 60px;
        }
    }

}

@media (max-width: 575px) {

    .porto-concept {
        .project-image {
            background-position: 0 0;
            margin-#{$left}: auto;
            max-width: 160px;
            max-height: 250px;
        }
        .fc-slideshow {
            max-height: 145px;
            max-width: 145px;
            img {
                max-height: 145px;
                max-width: 145px;
            }
        }
    }
}

/* Porto Map Section */
.porto-map-section {
    padding-top: 164px;
    margin-top: 15px;

    .map-content {
        padding: 50px 0 30px;
        min-height: 400px;
        margin-top: 0;

        article.post,
        .post-item {
            .post-date .day {
                background-color: #fff;
            }
        }
    }
}

.porto-portfolio {
    position: relative;
}

// Diamonds
.porto-diamonds {
    font-size: 0;
    margin: 40px auto;
    position: relative;
    text-align: center;
    max-width: 1110px;

    .csstransforms3d & {
        padding: side-values(50px 0 0 52px);
    }

    .no-csstransforms3d & {
        max-width: 1035px;
    }

    > li {
        display: inline-block;
        font-size: 18px;
        margin-#{$right}: 130px;

        .no-csstransforms3d & {
            margin: side-values(0 20px 20px 0);
        }
    }

    .diamond {
        background: #f4f4f4;
        display: block;
        height: 245px;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        width: 245px;

        &:after {
            @include transition (all 0.2s ease);
            content: " ";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            #{$left}: 0;
            background: #000;
            opacity: 0;
            transform: scale(0);
            z-index: 100;
        }

        &:hover {
            &:after {
                opacity: 0.3;
                transform: scale(1);
            }

            .content {
                &:after {
                    opacity: 0.8;
                    transform: scale(1);
                }
            }

        }

        .csstransforms3d & {
            overflow: hidden;
            transform: rotate(-45deg);
        }
    }

    .content {
        display: table-cell;
        height: 245px;
        padding: 0 10px;
        transform: rotate(45deg);
        text-align: center;
        vertical-align: middle;
        width: 245px;
        position: relative;

        &:after {
            @include transition (all 0.2s ease);
            color: #fff;
            content: "\e091";
            font-family: "simple-line-icons";
            font-size: 28px;
            #{$left}: 26%;
            margin: -6px -12px;
            opacity: 0;
            position: absolute;
            top: 49%;
            z-index: 1000;
            transform: scale(2);
        }

        img {
            margin-#{left}: -25%;
            max-width: 375px;
        }
    }

    .diamond-sm {
        .content {
            &:after {
                #{$left}: 24%;
                top: 49%;
            }
        }

    }
}

@media (max-width: 722px) {
    .csstransforms3d .porto-diamonds,
    .porto-diamonds {
        max-width: 245px;
        padding-#{$left}: 0;
    }

    .porto-diamonds > li {
        margin-#{$right}: 0;
        margin-bottom: 130px;
        clear: both;
    }

    .porto-diamonds > li:last-child {
        margin-bottom: 50px;
        margin-#{$right}: 0;
        margin-top: 0;
        padding-#{$left}: 0;
    }
}

// Porto Schedule Timeline
.border-transparent {
	border-color: transparent;
}
.no-box-shadow {
	box-shadow: none !important;
}
.timeline-circle {
	position: relative;
	margin-#{$left}: 25px;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	border-width: 1px;
	border-style: solid;
	z-index: 2;
	box-shadow: 0px 11px 21px 0px rgba(229, 232, 235, 0.75);
	.circle-dotted {
		position: absolute;
		padding: 16px;
		width: 106px;
		height: 106px;
		top: 5px;
		left: 5px;
		display: table;
		border-style: dashed;
		border-width: 1px;
		border-radius: 50%;
	}
	.circle-center {
		display: table-cell;
		vertical-align: middle;
		> span:first-child {
			font-size: 1.5em;
			line-height: 1;
		}
	}
	&.circle-light {
		border-color: #e6ebeb;
		.circle-dotted {
			border-color: #e6ebeb;
		}
	}
}

.timeline-balloon {
	position: relative;
	&::before {
		content: '';
		position: absolute;
		top: -35px;
		#{$left}: 83px;
		width: 1px;
		height: 120%;
		background-color: #e6ebeb;
	}
	&:last-of-type::before {
		height: 75px;
	}
	.balloon-cell {
		display: table-cell;
		vertical-align: top;
		width: 100%;
	}
	.balloon-time {
		padding-top: 25px;
		width: 93px;
		white-space: nowrap;
		.time-text {
			display: inline-block;
			vertical-align: middle;
			width: 72px;
		}
		.time-dot {
			position: relative;
			width: 25px;
			height: 25px;
			display: inline-block;
			vertical-align: middle;
			&::before {
				content: '';
				position: absolute;
				width: 19px;
				height: 19px;
				top: 50%;
				left: 50%;
				border-style: solid;
				border-width: 2px;
				border-radius: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
			&::after {
				content: '';
				position: absolute;
				width: 7px;
				height: 7px;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		}
	}
	.balloon-content {
		position: relative;
		margin-#{$left}: 34px;
		padding: 25px;
		padding-#{$right}: 15px;
		border-width: 1px;
		border-style: solid;
		border-radius: 3px;
		border-color: #e6ebeb;
		&.balloon-shadow {
			box-shadow: 0px 11px 21px 0px rgba(229, 232, 235, 0.75);
		}
		.balloon-arrow {
			position: absolute;
			width: 20px;
			height: 20px;
			top: 35px;
			#{$left}: -15px;
			border-width: 1px;
			border-style: solid;
			border-#{$right}: none;
			border-bottom: none;
			border-color: #e6ebeb;
			@if $rtl == 1{
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				-webkit-transform-origin: right top;
				-moz-transform-origin: right top;
				-ms-transform-origin: right top;
				-o-transform-origin: right top;
				transform-origin: right top;
			} @else {
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
				-webkit-transform-origin: left top;
				-moz-transform-origin: left top;
				-ms-transform-origin: left top;
				-o-transform-origin: left top;
				transform-origin: left top;	
				
			}
		}
		.balloon-photo {
			display: table-cell;
			vertical-align: top;
			height: 64px;
			width: 64px;
		}
		.balloon-description {
			display: table-cell;
			padding-#{$left}: 25px;
			p {
				line-height: 1.6;
			}
		}
	}
}

@media (max-width: 767px) {
	.timeline-circle {
		margin: 0px auto 35px !important;
	}
	.timeline-balloon {
		&:before {
			#{$left}: 50%;
		}
		.balloon-time {
			.time-dot {
				display: none;
			}
			.time-text {
				position: absolute;
				top: -11px;
				left: 50%;
				text-align: center;
				background: #FFF;
				border-width: 1px;
				border-style: solid;
				border-radius: 3px;
				border-color: #e6ebeb;
				padding: 5px 0px;
				z-index: 1;
				-webkit-transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-o-transform: translateX(-50%);
				transform: translateX(-50%);
			}
		}
		.balloon-content {
			margin-#{$left}: 5px;
		}
	}
}

// Porto Experience Timeline
section.exp-timeline {
	width: calc(100% - 30px);
	@if $rtl == 1{
		margin: 0 30px 0 0;
	} @else {
		margin: 0 0 0 30px;
	}
	padding: 0;
	&:after {
		content: none;
	}
	.timeline-bar {
		position: absolute;
		width: 3px;
		#{$left}: -2.9%;
		z-index: 0;
	}
	.timeline-box {
		border: 0 !important;
		margin: 15px 0 !important;
		width: 100%;
		margin: 0;
		padding: 0;
		box-shadow: 0px 12px 90px -10px rgba(171, 191, 216, 0.6) !important;
		&.right {
			max-width: 100%;
			display: -webkit-flex;
                        display: -moz-flex;
                        display: -ms-flexbox;
                        display: flex;
			-webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
			&:before {
				top: 50%;
				#{$left}: -2.5%;
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				-o-transform: translateY(-50%);
				transform: translateY(-50%);
			}
			&:after {
				top: 50%;
				border: none;
				-webkit-transform: translateY(-50%) rotate(45deg);
				-moz-transform: translateY(-50%) rotate(45deg);
				-ms-transform: translateY(-50%) rotate(45deg);
				-o-transform: translateY(-50%) rotate(45deg);
				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: 50%;
                float: left;
				text-transform: uppercase;
				font-size: 12px;
				line-height: 1.3;
			}
			.from > span, .to > 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: 991px) {
	section.exp-timeline {
		.timeline-bar {
			left: -4.1%;
		}
		.timeline-box {
			&:before, &:after {
				display: block !important;
			}
			&.right {
				float: right;
				&:before {
					left: -3.4%;
				}
			}
		}
	}
}

@media (max-width: 767px) {
	section.exp-timeline {
		width: 100%;
		margin: 0;
		.timeline-bar {
			display: none;
		}
		.timeline-box {
			&:before, &:after {
				display: none !important;
			}
		}
	}
}

// Porto Floating Menu
.floating-menu {
	.nav > li > a {
		position: relative;
		display: block;
	}
	.floating-menu-btn-collapse-nav {
		color: #FFF;
		display: none;
		float: right;
		margin: 12px 0 8px 15px;
	}
	.floating-menu-nav-main nav > ul > li {
		margin-bottom: 0;
		&.active > a {
			background: #FFF !important;
			&:after {
				background: #FFF;
			}
		}
	}
}

@media (min-width: 992px) {
	.floating-menu {
		background: transparent;
		height: 0;
		min-height: 0 !important;
		.floating-menu-row {
			position: absolute;
			top: 45px;
			#{$left}: -47.5px;
		}
		.floating-menu-body {
			position: fixed;
			top: 0;
			background: transparent;
			min-height: 0;
			padding: 0;
			border: none;
			z-index: 999;
		}
		.floating-menu-nav {
			padding: 0 !important;
		}
		.floating-menu-nav-main {
			display: block !important;
			margin: 0;
			height: auto !important;
			box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.3);
			nav > ul > li {
				&:hover > a > span {
					-webkit-transform: rotateY(0deg);
					-moz-transform: rotateY(0deg);
					-ms-transform: rotateY(0deg);
					-o-transform: rotateY(0deg);
					transform: rotateY(0deg);
				}
				> a {
					font-size: 25px;
					padding: 16.65px 17px;
					@if $rtl != 1 {
						perspective: 770px;
					}
					&:after {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						#{$right}: 0;
						width: 100%;
						height: 100%;
						z-index: -1;
					}
					> span {
						position: absolute;
						top: 0;
						#{$left}: 127%;
						background: #FFF;
						padding: 0 25px;
						height: 100%;
						line-height: 4.1;
						white-space: nowrap;
						font-size: 14px;
						z-index: -2;
						-webkit-transition: ease transform 300ms;
						-moz-transition: ease transform 300ms;
						transition: ease transform 300ms;
						@if $rtl == 1 {
							-webkit-transform-origin: 119% 0%;
							-moz-transform-origin: 119% 0%;
							-ms-transform-origin: 119% 0%;
							-o-transform-origin: 119% 0%;
							transform-origin: 119% 0%;
							-webkit-transform: rotateY(92deg);
							-moz-transform: rotateY(92deg);
							-ms-transform: rotateY(92deg);
							-o-transform: rotateY(92deg);
							transform: rotateY(92deg);
						} @else {
							-webkit-transform-origin: -19% 0%;
							-moz-transform-origin: -19% 0%;
							-ms-transform-origin: -19% 0%;
							-o-transform-origin: -19% 0%;
							transform-origin: -19% 0%;
							-webkit-transform: rotateY(88deg);
							-moz-transform: rotateY(88deg);
							-ms-transform: rotateY(88deg);
							-o-transform: rotateY(88deg);
							transform: rotateY(88deg);
						}
						&:before {
						  content: '';
						  display: block;
						  position: absolute;
						  top: 50%;
						  #{$left}: -4px;
						  padding: 10px;
						  background: #FFF;
						  z-index: -1;
						  -webkit-transform: translate(0, -50%) rotate(45deg);
						  -moz-transform: translate(0, -50%) rotate(45deg);
						  -ms-transform: translate(0, -50%) rotate(45deg);
						  -o-transform: translate(0, -50%) rotate(45deg);
						  transform: translate(0, -50%) rotate(45deg);
						}
					}
				}
			}
		}
	}
}

@media (min-width: 992px) and (max-width: 1281px) {
	.floating-menu {
		.floating-menu-row {
			#{$left}: -26.5px;
		}
		.floating-menu-nav-main nav > ul > li > a {
			padding: 9.8px;
			@if $rtl != 1 {
				perspective: 450px;
			}
			> span {
				line-height: 3;
			}
		}
	}
}

@media (max-width: 991px) {
	.floating-menu {
		position: absolute;
		top: 73px;
		#{$right}: 0px;
		z-index: 999;
		.floating-menu-body {
			background: transparent;
			border: none;
			min-height: 0;
		}
		.floating-menu-btn-collapse-nav {
			display: block !important;
			padding: 15px 20px;
			margin-right: 15px;
			outline: 0;
		}
		.floating-menu-nav-main {
			position: absolute;
			right: 0px;
			top: 71px;
			overflow: hidden;
			nav > ul > li {
				border: none;
				> a {
					font-size: 1.7em;
					margin: 0;
					padding: 15px;
					> span {
						display: none;
					}
				}
			}
		}
	}
}

/* Preview Image Lazy Loader */
.porto-preview-image{
	.lazy {
		display: block;
		background-position: top center;
		background-size: 100%;
        z-index: 2;

		+ .fa-spin{
			background: transparent none repeat scroll 0 0;
			color: #ccc;
			font-size: 25px;
			left: 50%;
			margin: -13px;
			position: absolute;
			top: 50%;
			z-index: 1;
		}
	}
}