@import "reset";
@import "variables";
@import "mixins";

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
	flex: 1 0 auto;
}
.container{
	@include mq(1524px){
		width: 96%;
	}
	.row{
		@include mq(600px){
			margin: 0!important;
		}
		.col{
			@include mq(600px){
				padding: 0;
			}
		}
	}
}

.main-top-padding{
	padding-top: 102px;
	@include mq(992px){
		padding-top: 57px;
	}
}
header{
	*{
		transition: 0.2s;
	}
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
	left: 0;
	@include mq(992px){
		background: rgba(0,0,0,0.9);
	}
	.back-arrow{
		font-size: 38px;
		color: white;
	}
	&.header-black{
		background-color: rgba(0,0,0,0.9);
	}
	&.scroll-header{
		background-color: rgba(0,0,0,0.9);
		.logo{
			img{
				width: 130px;
			}
		}
		nav{
			a{
				padding: 0;
				font-size: 14px;
			}
		}
		.input-field{
			margin-top: 10px;
		}
		.burger-bar{
			color: $mainPink;
		}
	}
	.input-field{
		@include mq(992px){
			margin-top: 10px;
		}
	}
	.header-info{
		border-bottom: 1px solid $rgbaWhite;
		height: 38px;
	}
	.phone-icon{
		margin-top: 10px;
		margin-bottom: -4px;
	}
	.phone-number{
		margin: 0 0 8px 5px;
		font-size: 13px;
		display: inline-block;
	}
	.search-icon{
		background: url(../img/search.svg) no-repeat;
		background-size: 20px;
		background-position: 3px 10px;
		width: 30px;
		height: 38px;
		overflow-x: hidden; 
		display: block;
		border: none;
		border-bottom: 1px solid white;
		margin-bottom: -1px;
		&.bg-x{
			background: url(../img/x.svg) no-repeat;
		    background-size: 17px;
    		background-position: 6px 12px;
		}
	}
	.header-search{
		position: relative;
	}
	.dropdown-search{
		position: absolute;
		top: 0;
		right: 28px;
		width: 0;
		overflow: hidden;
		max-height: 38px;
		transition: 0.2s;
		input[type="search"]{
			width: 86%;
			display: block;
			height: 37px;
			border-bottom: 1px solid white!important;
			color: white;
			&:focus{
				border-bottom: 1px solid $mainPink!important;
			}
		}
		button{
			width: 10%;
			display: block;
			background: transparent;
			margin-left: 4px;
			border: none;
			padding-bottom: 2px;
			border-bottom: 1px solid white;
			img{
				width: 20px;
				margin-top: 10px;
			}
		}
		&.search-width{
			width: 300px;
		}
	}
	.iguide-facebook{
		color: white;
	    width: 30px;
	    line-height: 40px;
	   	margin-left: 4px;
	    height: 38px;
	    display: inline-block;
	    font-size: 20px;
	    border-bottom: 1px solid transparent;
	    &:hover{
	    	border-bottom: 1px solid white;
	    }
	}
	.iguide-weather{
		font-size: 14px;
		height: 38px;
		line-height: 40px;
		margin-left: 4px;
		img{
			margin-top: 5px;
		}
		.weather-deg{
			position: relative;
			color: white;
			margin-left: 10px;
			span{
				position: absolute;
				font-size: 8px;
				left: 16px;
				top: -5px;
			}
		}
	}
	.logo{
		margin-top: 10px;
		@include mq(1200px){
			margin-top: 13px;
		}
		@include mq(992px){
			text-align: center;
		}
		display: block;
		img{
			width: 180px;
			@include mq(1200px){
				width: 160px;
			}
			@include mq(992px){
				width: 130px;
			}
		}
	}
	nav{
		background: transparent;
		text-align: center;
		box-shadow: none;
		ul{
			margin-top: -1px;
		}
		li{
			text-transform: uppercase;
			float: none;
			display: inline-block;
			padding: 0 22px;
			@include mq(1200px){
				padding: 0 13px;
			}
			a{
				position: relative;
				overflow: hidden;				
				transition: 0.3s;
				font-size: 16px;
				letter-spacing: 1px;
				padding: 5px 0;
				@include mq(1200px){
					font-size: 15px;
				}
				.line-top{
					position: absolute;
					width: 100%;
					height: 1px;
					background: white;
					top: 0px;
					left: -100%;
					transition: 0.2s;
				}
				&:hover{
					.line-top{
						left: 0;
					}
				}
			}
			&.active{
				background: transparent;
				a{
					.line-top{
						left: 0;
					}
					// border-top: 1px solid white;
					background: transparent;
				}
			}
			&:hover{
				background: transparent;
				a{
					background: transparent;
				}
			}
		}	
	}
	.languages{
		text-align: right; 
		color: white;
	    border-bottom: none;
	    height: 38px;
	    width: 50px;
	    .caret{
	    	color: white;
	    	margin-top: 16px;
	    }
	    ul{
	    	transform: translateX(-25%);
	    }
	    span{
    		color: $mainPink;
    		text-align: center;
    	}
	    input.select-dropdown{
	    	border-bottom: none!important;
	    }
	    .dropdown-content{
	    	background-color: rgba(255,255,255,0.8);
	    }
	}
}
.burger-bar{
	width: 20px;
	height: 20px;
	background: url(../img/menu.svg) no-repeat;
	border: none;
	color: white;
	font-size: 25px;
	margin-top: 10px;
	display: none;
	margin-left: 20px;
	@include mq(992px){
		display: block;
	}
	&.active{
		background: url(../img/x-white.svg) no-repeat;
		background-size: 100%;
	}
}
.menu-shadow{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: -100%;
	transition: 0.2s;
	z-index: 200;
	background: rgba(0,0,0,0.4);
	&.active{
		right: 0;
	}
}
.responsive-menu{
	position: absolute;
	background: rgba(0,0,0,0.9);
	height: 100vh;
	width: 150px;
	text-align: center;
	right: -150px;
	overflow-y: scroll; 
	&::-webkit-scrollbar{
		width: 0;
	}
	li{
		margin: 20px 0;
	}
	a{
		text-transform: uppercase;
		color: white;
		margin: 20px 0;
		i{
			font-size: 25px;
			padding: 4vh 0 1vh;
		}
	}
	&.active{
		right: 0;
	}
}

.main-carousel{
	position: relative;
	margin-top: -2px;
	.item{
		background: lightblue;
		max-height: 600px;
		min-height: 250px;
		position: relative;
		display: flex;
		align-items: center;
		@include mq(480px){
			height: 250px;
		}
		>img{
			min-height: 100%;
			min-width: 100%;
			flex-shrink: 0;
			@include mq(480px){
				height: 100%;
				width: auto;
			}
		}
	}
	.carousel-shadow{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.carousel-text{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 101;
	}
	.carousel-title{
		font-size: 32px;
		font-weight: bold;
		color: white;
		margin: 190px 0 0 0;
		height: 35px;
		overflow: hidden;
		@include mq(992px){
			text-align: center;
			margin-top: 24%;
		}
		@include mq(480px){
			font-size: 22px;
			height: 26px;
			margin-top: 97px;
		}
	}
	.carousel-item-date{
		font-size: 22px;
		color: white;
		height: 24px;
		overflow: hidden;
		@include mq(992px){
			text-align: center;
		}
		@include mq(480px){
			font-size: 16px;
		}
	}
	.carousel-item-location{
		background: rgba(233,29,98,0.7);
		padding: 5px 10px;
		color: white;
		font-size: 18px;
		display: inline-block;
		margin-top: 5px;
		img{
			width: 16px;
			display: inline-block;
			margin-bottom: -4px;
		}
	}
	.read-more{
		display: block;
		margin-top: 40px;
		color: white;
		font-size: 13px;
		margin-top: 25px;
		@include mq(992px){
			display: flex;
			justify-content: center;
		}
		span{
			padding-top: 5px;
			padding-right: 50px;
			border-top: 1px solid rgba(255,255,255,0.5);
			@include mq(992px){
				text-align: center;
				float: none!important;
				padding: 5px 10px;
				border-top: 1px solid rgba(255,255,255,0.9);
				text-align: center;
			}
		}
		i{ 
			margin: 6px 0 -5px -45px;
			font-size: 20px;
			@include mq(992px){
				display: none;
			}
		}
	}
	.owl-dots{
		border-top: 1px solid rgba(255,255,255,0.4);
		@include carousel;
		&.container{
			width: 54%;
			@include mq(1300px){
				width: 78%;
			}
		}
	}
	.owl-nav{
		text-align: right;
		@include carousel;
		bottom: 0;
		[class*=owl-]{
			float: none;
			text-align: center;
			display: inline-block;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			border: 1px solid;
			color:  rgba(255,255,255,0.5);
			background: transparent;
			font-size: 26px;
			line-height: 20px;
			margin-right: 10px;
			@include mq(992px){
				margin-right: 0;
				margin-left: 5px;
			}
		}
	}
	.owl-dot{
		color: rgba(255,255,255,0.7);
		float: left;
		padding-top: 10px;
		border-top: 1px solid transparent;
		margin-top: -1px;
		position: relative;
		div{
			padding: 0 20px 0 0;
			font-size: 11px;
		}
		svg{
			position: absolute;
			top: -1px;
			display: none;
			left: 0;
		}
		&.active{
			svg{
				display: block;
				#st0{
			  		stroke-dasharray: 1000;
			  		stroke-dashoffset: 0;
			  		animation: dash 30s linear forwards;
				}
			}
			div{
				color: white;
			}
		}
	}
}

.carousel-search{
	.container{
		position: absolute;
		z-index: 102;
		margin-top: 450px;
		left: 50%;
		transform: translateX(-50%);
	}
	.carousel-search-select{
		width: 10%;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		background: $mainPink;
		input{
			color: white;
			padding-left: 15px;
			padding-right: 15px;
			max-width: 24px;
			height: 45px;
		}
		.caret{
			margin-right: 8px;
			color: white;
		}
		.dropdown-content {
			width: auto!important;
			span{
				color: $mainPink;
			}
			li.disabled{
				span{
					color: rgba(0,0,0,0.2);
				}
			}
		}
	}
	.carousel-search-input{
		width: 82%;
		input{
			height: 45px;
			&:focus{
				background: rgba(255,255,255,0.9);
				transition: 0.2s;
				border-bottom: none!important;
				box-shadow: none!important;
			}
		}
	}
	input.select-dropdown{
		margin: 0;
	}
	.search-submit{
		width: 8%;
	}
	.carousel-search-input input{
		background: white;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.search-submit{
		display: block;
		margin-top: 15px;
		height: 45px;
		background: white;
		border: none;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		border-left: 1px solid rgba(0,0,0,0.2);
		img{
		    width: 23px;
			margin: 4px 2px 0 0;
		}
	}
}
.main-title{
	padding: 10px 20px;
	margin-top: 20px;
	font-size: 20px;
	position: relative;
	text-transform: uppercase;
	font-weight: bold;
	@include mq(600px){
		margin-top: 10px;
	}
	span{
		height: 5px;
		width: 50px;
		top: 0;
		background-color: $mainPink;
		display: inline-block;
		position: absolute;
		margin-left: -20px;
	}
}

.each-category{
	display: block;
	box-sizing: content-box;
    padding-top: 60%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    @include mq(600px){
		margin-top: 10px;
	}
    @include mq(600px){
    	padding-top: 40%;
    }
    .shadow{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background: rgba(0,0,0,0.5);
    }
    .text{
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	text-transform: uppercase;
    	color: white;
    	font-weight: bold;
    	padding: 0 20px;
    	height: 20px;
    	overflow: hidden;
    	display: block;
    	text-align: center;
    }
    .hover{
    	position: absolute;
    	display: block;
    	opacity: 0;
    	transition: 0.2s;
    	top: 5%;
    	left: 4%;
    	width: 92%;
    	height: 90%;
    	svg{
    		width: 100%;
    		height: 100%;
    		position: absolute;
    		top: 0;
    		left: 0;
    	}
    	span{
    		color: white;
    		position: absolute;
    		top: 75%;
    		font-size: 12px;
    		left: 50%;
    		transform: translateX(-50%);
    	}
    	i{
    		&.right{
    			margin-left: 0;
    			font-size: 18px;
    		}
    	}
    }
    &:hover{
    	.shadow{
    		background: rgba(0,0,0,0.2);
    	}
    	.hover{
    		opacity: 1;
    	}
    	#st1{
	  		stroke-dasharray: 1000;
	  		stroke-dashoffset: 0;
	  		animation: dash 4s linear infinite;
		}
    }
}

footer{
	*{
		color: white;
	}
	background: url(../img/foot.jpg);
	background-size: cover;
	margin-top: 20px;
	min-height: 520px;
	position: relative;
	@include mq(600px){
		text-align: center;
		min-height: 672px;
	}
	.shadow{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.9);
	}
	.container{
		z-index: 10;
	}
	.footer-title{
		text-transform: uppercase;
		margin: 50px 0 20px;
		font-size: 16px;
		@include mq(600px){
			text-align: center;
			margin: 20px 0 10px;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}
	}
	.phone-num{
		display: inline-block;
	}
	.iguide-mail{
		img{
			margin-bottom: -3px;
		}
	}
	.footer-contact{
		@include mq(600px){
			margin: 0 auto;
			max-width: 300px;
		}
	}
	input{
		height: 30px!important;
		@include inputField;
		color: black;
	}
	textarea{
		@include inputField;
		height: 70px;
		color: black;
	}
	button{
		@include inputField;
		height: 30px;
		background-color: $mainPink !important;
		margin-top: 10px!important;
		text-transform: uppercase;
		font-weight: bold;
		background-image: url(../img/submit.png);
		background-position: 98.5% 10px;
		background-repeat: no-repeat;
	}
	.input-field{
		position: relative;
		.name{
			background-image: url(../img/user.png);
			@include inputImage;
		}
		.email{
			background-image: url(../img/envelope.png);
			@include inputImage;
		}
		.textarea{
			background-image: url(../img/edit.png);
			@include inputImage;
		}
	}
	.footer-category{
		margin: -8px 0 0 14px;
		li{
			list-style-image: url(../img/triangle.png);
			&:hover{
				@include listHover;
			}
			&.active{
				@include listHover;
			}
		}
		
	}
	.copyright{
		margin-top: 50px;
		padding-top: 30px;
		border-top: 1px solid $rgbaWhite;
		font-size: 13px;
		img{
			height: 46px; 
		}
		.rights{
			margin-top: 20px;
			a{
				color: #fbbc05;
			}
		}
	}
}

.filter-title{
	margin-top: 20px;
	padding: 10px;
	background: rgba(0,0,0,0.9);
	color: white;
	@include mq(600px){
		margin-top: 10px;
	}
	.title{
		text-transform: uppercase;
		font-weight: bold;
		font-size: 18px;
		@include mq(600px){
			font-size: 14px;
		}
	}
}
.filter-select{
	width: 78px;
	margin: 2px 10% 0 8px;
	color: $mainPink!important;
	@include mq(600px){
		margin: 2px 0 0 8px;
	}
	span{
		color: $mainPink!important;
	}
	input.select-dropdown{
		margin: 0!important;
		line-height: 1!important;
		height: auto!important;
		width: 83%;
		padding-right: 17%;
		text-align: center;
	}
	.dropdown-content{
		max-width: 200px!important;
	}
}
.restaurant{
	margin-top: 20px;
	display: block;
	border: 1px solid rgba(0,0,0,0.05);
	border-radius: 5px; 
	overflow: hidden;
	@include mq(600px){
		margin-top: 10px;
	}
	.image{
		height: 150px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		img{
			min-width: 100%;
			min-height: 100%;
			flex-shrink: 0;
			height: 100%;
			@include mq(600px){
				width: 100%;
				height: auto;
			}
		}
	}
	.description{
		color: black;
		@include mq(992px){
			padding: 10px 20px!important;
		}
		.line{
			margin-left: -10px;
			width: 50px;
			height: 5px;
			background: $mainPink;
			display: block;
			margin-top: 10px;
		}
		.title{
			font-size: 20px;
			font-weight: bold;
			margin-top: 5px;
			height: 30px;
			overflow: hidden;
			@include mq(600px){
				height: auto;
			}
		}
		.status{
			font-weight: bold;
			font-size: 12px;
			height: 15px;
			overflow: hidden;
			@include mq(600px){
				height: auto;
			}
		}
		.location{
			padding: 10px 10px 0px 20px;
			display: block;
			border-top: 1px solid rgba(0,0,0,0.05);
			margin: 13px 0 0 -20px;
			font-size: 12px;
			font-weight: bold;
			.icon{
				margin-bottom: -10px;
				width: 16px;
				display: block;
				line-height: 16px;
				text-align: center;
				margin-right: 5px;
			}
			div.inside{
				display: inline-block;
				margin-right: 20px;
				height: 18px;
				overflow: hidden;
				@include mq(600px){
					height: auto;
				}
			}
		}
	}
}

.each-restaurant{
	margin-top: 20px;
	@include mq(600px){
		margin-top: 0px;
	}
	.restaurant-resp{
		@include mq(600px){
			padding: 0 30px!important;
		}
	}
	.cover{
		position: relative;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		@include mq(600px){
			margin: 0 -2%;
		}
		.cover-image{
			min-height: 100%;
			min-width: 100%;
			flex-shrink: 0;
		}
		.shadow{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
		}
	}
	.desc-image{
		width: 180px;
		height: 180px;
		border: 10px solid white;
		border-radius: 5px;
		@include mq(600px){
			float: none!important;
			margin: 0 auto;
			display: block;
			width: 100%;
		}
		img{
			width: 100%;
			height: 100%;
		}
	}
	.desc{
		display: flex;
		align-items: center;
		@include mq(600px){
			display: block;
		}
	}
	.desc-title{
		margin-left: 20px;
		color: white;
		@include mq(600px){
			float: none!important;
			margin: 0 auto;
			display: block;
			width: 100%;
			text-align: center;
			margin-top: 20px;
		}
		span{
			font-weight: bold;
			text-transform: uppercase;
			font-size: 24px;
			background: rgba(233,29,98,0.8);
			padding: 2px 10px;
		}
	}
	.contact{
		width: 34px;
		overflow: hidden;
		padding: 10px;
		background: white;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
		transition: 0.2s;
		@include mq(600px){
			position: fixed;
			left: 0;
			z-index: 100;
			border: 1px solid rgba(0,0,0,0.05);
		}
		&:hover{
			width: 280px;
		}
		.contact-inside{
			width: 280px;
		}
		.line{
			width: 50px;
			height: 4px;
			background: $mainPink;
			display: block;
		}
		.contact-title{
			margin-left: 25px;
			padding-top: 4px;
			display: block;
			text-transform: uppercase;
			font-weight: bold;
		}
		.each-info{
			display: block;
			width: 100%;
			margin-left: -10px;
			.info-icon{
				width: 30px;
				text-align: center;
				img{
					height: 13px;
				}
			}
			.info-text{
				padding-left: 35px;
				font-size: 12px;
			}
			div:not(.info-text){
				display: inline-block;
				font-weight: bold;
				font-size: 12px;
			}

		}
	}
	.restaurant-title{
		margin-top: 26px;
		font-weight: bold;
		span{
			display: block;
			width: 30px;
			height: 4px;
			margin-left: -12px;
			background: $mainPink;
			@include mq(992px){
				margin-left: 0;
			}
		}
	}
	p.description{
		font-size: 12px;
		margin-top: 10px;
	}
	#googleMap{
		width: 100%;
		margin-top: 10px;
		height: 374px;
		@include mq(600px){
			margin: 10px -2% 0;
			width: 104%;
		}
	}
	
}
.gallery-img{
    display: block;
    width: 100%;
    overflow: hidden;
    padding-top: 100%;
    position: relative;
    margin-top: 20px;
    img{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    }
}
.sl-overlay{
	z-index: 1038;
	background: black;
	opacity: 0.95;
}
.sl-prev,
.sl-next,
.sl-close{
	color: white!important;
}
.video-banner{
	margin-top: 90px;
	padding-top: 60%;
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	display: block;
	@include mq(992px){
		margin-top: 20px;
	}
	video{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	@include mq(600px){
		margin: 10px -2% 0;
		width: 104%;
	}
}
.second-banner{
	margin-top: 20px;
	display: block;
	background: rgba(0,0,0,0.2);
	@include mq(600px){
		margin-top: 10px;
	}
	span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
		font-size: 30px;
		text-align: center;
	}
}
.hotels{
	padding-left: 90px;
	padding-right: 90px;
	padding-bottom: 70px;
	@include mq(1500px){
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}
}
.map-filter{
	width: 290px;
	@include leftContent;
	@include mq(600px){
		left: -290px;
	}
	&.active{
		left: 0;
	}
	.map-filter-title{
		margin-top: 15px;
		font-weight: bold;
		text-transform: uppercase;
	}
	.map-filter-select{
		margin: 10px 0 0;
		border: 1px solid rgba(0,0,0,0.7);
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 12px;
		font-weight: bold;
		.caret{
			color: $mainPink;
		}
		.select-wrapper input.select-dropdown{
			height: 20px;
			line-height: 20px;
			margin: 0;
			font-size: 12px;
		}
	}
	.map-filter-search{
		input{
			margin: 0;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid rgba(0,0,0,0.5)!important;
			box-shadow: none!important;
			&:focus{
				box-shadow: none!important;
			}
		}
		.input-field{
			margin-top: 10px;
		}
		.input-field.col label{
			left: 0;
			color: rgba(0,0,0,0.6);
			font-size: 12px;
			font-weight: bold;
			top: -4px;
		}
		.input-field label:not(.label-icon).active {
		    -webkit-transform: translateY(-6px) scale(0.7);
		    transform: translateY(-6px) scale(0.7);
		    color: $mainPink;
		}
		.map-filter-btn{
			margin-top: 11px;
			border: none;
			border-bottom: 1px solid rgba(0,0,0,0.5);
			width: 100%;
			height: 30px;
			background: url(../img/search.png) no-repeat;
			background-size: 16px;
			background-position: center right;
		}
	}
	.map-filter-title-2{
		font-weight: bold;
		font-size: 12px;
		margin-top: 20px;
	}
	.sorting-options{
		button{
			padding: 5px 15px;
			border-radius: 5px;
			border: 1px solid $mainPink;
			color: $mainPink;
			font-size: 12px;
			background: white;
			margin: 5px 5px 0 0;
			&:hover,
			&.active{
				background-color: $mainPink;
				color: white;
			}
		}
	}
	.search-object{
		*{
			color: black;
		}
	}
	.status{
		font-size: 12px;
	}
	.location{
		font-size: 12px;
		margin-top: 10px;
	}
	.icon{
		display: block;
		width: 20px;
	}
	.object-image{
		box-sizing: content-box;
	    padding-top: 80%;
	    background-size: cover;
	    background-position: center center;
	    background-repeat: no-repeat;
	    position: relative;
	    margin-top: 10px;
	    border-radius: 5px;
	}
	.search-object{
		display: block;
		padding-bottom: 15px;
		margin-bottom: 5px;
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}
}

.main-title-3{
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	span{
		width: 30px;
		height: 4px;
		margin-left: -10px;
		margin-bottom: 0px;
		background: $mainPink;
		display: block;
	}
}
.city-map{
	padding-left: 290px;
	@include rightMap;
	@include mq(600px){
		padding-left: 0px;
	}
	&.active{
		padding-left: 290px;
	}
}
#cityMap,
#objectListMap{
	width: 100%;
	height: 100%;
}
.map-filter-resp{
	position: absolute;
	top: 67px;
	left: 10px;
	display: none;
	background: rgba(0,0,0,0.9)!important;
	&:focus{
		background: rgba(0,0,0,0.9)!important;
	}
	z-index: 100;
	color: white;
	height: 30px;
	padding: 0 30px;
	border: none;
	text-transform: uppercase;
	@include mq(600px){
		display: block;
	}
}
.objects-list-map{
	@include rightMap;
	padding-left: 500px;
}

.objects-list{
	@include leftContent;
	width: 500px;
}
.list-each-object{
	*:not(i){
		color: black!important;
	}
	margin-top: 16px;
	display: block;
	&:hover{
		background: rgba(0,0,0,0.04);
	}
	.list-object-img{
		overflow: hidden;
		border: 5px solid rgba(0,0,0,0.1);
		border-radius: 5px;
		padding-top: 100%;
		position:relative;
		img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.main-title-3{
		margin-top: 0px;
		font-size: 18px;
		height: 36px;
		overflow: hidden;
		span{
			margin-left: 0;
		}
	}
	.status{
		font-size: 12px;
		height: 15px;
	}
	.inside{
		height: 36px;
		overflow: hidden;
		.icon{
			display: block;
			width: 20px;
		}
		font-size: 12px;
	}
	.status-icon{
		color: $mainPink!important;
		font-size: 18px;
		margin-top: 10px;
		text-transform: uppercase;
		span{
			font-size: 14px;
			background: rgba(0,0,0,0.1);
			padding: 2px 10px;
		}
	}
}
.height-150{
	height: 150px;
	padding-top: 20px!important;
}
.cover-image{
	margin: 0 -16px;
	min-height: 200px;
	position: relative;
	.cover-image-inside{
		width: 100%;
	}
	img{
		width: 100%;
	}
}
.logo-image{
	width: 150px;
	height: 150px;
	overflow: hidden;
	border: 5px solid #f2f2f2;
	border-radius: 5px;
	margin-top: -90px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	img{
		width: 100%;
		height: 100%;
	}
	.material-placeholder{
		height: 100%;
	}
}
.object-info{
	margin-top: 70px;
	.title{
		font-size: 26px;
		font-weight: bold;
	}
	.status{
		font-size: 12px;
		color: $mainPink;
	}
}

.each-object{
	margin: 0 -16px;
	margin-top: 20PX;
	.gallery-img{
		padding-top: 70%;
		margin-top: 0;
	}
}

.each-object-contact-info{
	margin-top: 10px;
	.row{
		border-top: 1px solid rgba(0,0,0,0.05);
		padding: 5px;
	}
	i{
		color: $mainPink;
	}
}
.search-results{
	background: white;
    position: absolute;
    top: 62px;
    width: 49.1%;
    overflow: hidden;
    line-height: 50px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    .result{
    	padding: 10px;
    	display: block;
    	border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .image{
    	overflow: hidden;
    	height: 50px;
    	img{
    		width: 100%;
    		min-height: 100%;
    	}
    }
    .result-name{
    	color: black;
    	font-weight: bold;
    }
    .result-status{
    	font-size: 12px;
    	color: black;
    }
}

@keyframes dash {
	from {
		stroke-dashoffset: 1000;
	}
	to {
		stroke-dashoffset: 0;
	}
}