@import 'mixins';

/* basic 
==================================== */
body {
	overflow-x: hidden;
	color: #000;
	@extend %font1;
	font-size: 14px;
	@media only screen and (min-width: 1900px) {
		font-size: 16px;
	}
}

a {
	@extend %transition;
	color: #000;
	&:hover{
		color: #000;
	}
}

b, strong{
	@extend %font3;
}

img {
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 991px) {
	.fp-tableCell{
		height: auto!important;		
	}
	.fp-section, .fp-scrollable, .fp-tableCell{
		height: auto !important;
	}
}

.container{
	max-width: 1000px;
	padding-right:20px;
	padding-left: 20px;
	&.container-lg{
		max-width: 1435px;
	}
}

.btn{
	font-size: 8px;
	padding: 10px 20px;
	border-radius:0;
	text-transform: uppercase;
	background: transparent;
	&.btn-primary{
		letter-spacing: 1px;
		border: 1px solid #fff;
		background: #fff;
		color: $theme1;
		&:hover{
			background: $theme5;
			color: #fff;
			border-color:$theme5;
		}
	}
	&.btn-secondary{
		letter-spacing: 2px;
		border: 1px solid $theme5;
		color: $theme5;
		padding: 15px 30px;
		font-size: 12px;
		&:hover{
			background: $theme5;
			color: $theme1;
		}
	}
}


/* Header
========================================= */
#header{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	padding: 20px;
	@extend %transition;
	background: #fff;
	@media only screen and (min-width: $md) {
		width:auto;
	}
	&.active{
		background:transparent;
	}
	.menu {
		position: fixed;
		top: 0;
		width: auto;
		height: 100%;
		background: transparent;
		z-index: 9;
		left: 0;
		.logo{
			text-align:center;
			@media only screen and (min-width: $md) {
				padding-top:30px;
			}
			img{
				max-width:122px;
				width:100%;
			}
		}
		.close-menu{
			width:100%;
			color: #fff;
			padding:20px;
			@media only screen and (min-width: $md) {
				display:none;
			}
		}
		ul {
			list-style: none;
			margin: 0;
			width: 100%;
			padding: 40px 0 0 0;
			text-align: left;
			li {
				margin-bottom: 20px;
				@media only screen and (min-width: $md) {
					margin-bottom: 35px;
				}
				padding: 0 10px;
				text-align:center;
				position:relative;
				&:before{
					content:'';
					position:absolute;
					width:45px;
					height:2px;
					background:#fff;
					margin:0 auto;
					bottom:-10px;
					left:0;
					right:0;
					opacity:0;
					@extend %transition;
				}
				&:last-child{
					margin-bottom: 0;
				}
				a {
					color: #fff;
					font-size: 20px;
					letter-spacing:1px;
					@extend %font4;
					@media only screen and (min-width: $md) {
						font-size:22px;
					}
					&:hover{
						color: $theme2;
						text-decoration:none;
					}
				}
				&.active{
					&:before{
						opacity:1;
					}
				}
			}
		}
		.menu-body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #000;
			flex-wrap: wrap;
			width:100%;
			max-width: 165px;
			margin-left: -165px;
			overflow-y: auto;
			@media only screen and (min-width: $md) {
				margin-left:0;
				@media only screen and (min-width: $hd) {
					max-width: 180px;
				}
			}
			margin-right: auto;
			-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
			&.active{
				margin-left: 0;
			}

			.bottom{
				align-self: flex-end;
				width: 100%;
				padding-bottom: 25px;
				.logos{
					text-align:center;
					margin-top: 40px;
				}
				a{
					display: inline-block;
					margin: 0 15px;
					img{
						width: 78px;
					}
				}
			}
		}
	}
	.toggle{
		width: 26px;
	}
}

@media only screen and (min-width: $md) {
	#header{
		text-align: center;
		background:transparent;
	}
}


.anchor {
	display: block;
	position: relative;
	top: -82px;
	visibility: hidden;
}

.main{
	padding-top: 82px;
}

@media only screen and (min-width: $md) {
	.anchor {
		top: -164px;
	}
	.main{
		padding-top: 164px;
	}
}


.section-default{
	padding: 40px 0;
	overflow-x: hidden;
	width: 100%;
	@media only screen and (min-width: $md) {
		min-height: 100vh;
		padding: 60px 40px;
	}
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	z-index: 5;


	&.section-highlights{
		h2{
			@include heading1();
		}
		.image{
			img{
				width: 100%;
			}
		}
		.block{
			margin-bottom:30px;
		}
		.slider{
			position: relative;
			.slick-arrow{
				position: absolute;
				left:20px;
				font-size:0;
				outline:0;
				border:0;
				width: 20px;
				height: 25px;
				bottom:20px;
				background:url(../images/arrowleft.svg) center no-repeat;
				background-size: 100%;
				z-index:1;
				&.slick-next{
					left:50px;
					transform: rotate(180deg);
				}
			}
		}
		.icons{
			@extend %font3;
			display: flex;
			flex-wrap:wrap;
			margin: 0 -10px;
			.column{
				width: 33.33%;
				padding: 0 10px;
				margin-bottom:20px;
				.icon{
					margin-bottom:15px;
					width: 40px;
					height:40px;
					img{
						width:100%;
						height:100%;
						object-fit:contain;
					}
					@media only screen and (min-width: $md) {
						width: 60px;
						height:60px;
					}
				}
				@media only screen and (min-width: $md) {
					width: 25%;
				}
				@media only screen and (min-width: $hd) {
					width: 12.5%;
				}
			}
			@media only screen and (min-width: $md) {
				font-size: 16px;
			}
		}
		@media only screen and (min-width: $md) {
			.block{
				display:flex;
				margin-bottom:60px;
				.column{
					width: 30%;
					&:first-child{
						padding-top:100px;
					}
					&:last-child{
						width: 70%;
					}
				}
			}
		}
	}

	&.section-stackplan{
		h2{
			@include heading2();
		}
		.image{
			position:relative;
			.markers{
				ul{
					list-style:none;
					margin:0;
					padding:0;
					li{
						position: absolute;
						width:15%;
						top:0;
						right:0;
						z-index:2;
						@extend %font2;
						font-size:1.3vw;
						line-height:1;
						opacity:0;
						@extend %transition;
						span{
							@extend %font5;
							font-size:3vw;
						}
						@media only screen and (min-width: $md) {
							font-size:14px;
							span{
								font-size:33.5px;
							}
						}
						&:first-child{
							top: 15%;
						}
						&:nth-child(2){
							top: 31%;
						}
						&:nth-child(3){
							top: 44.5%;
						}
					}
				}
			}
			@media only screen and (min-width: $md) {
				max-width: 1065px;
				margin:0 auto;
			}
			img{
				width: 100%;
			}
		}
	}

	&.section-plan{
		h2{
			@include heading1();
		}
		.heading-wrap{
			@extend %font3;
		}
		.image{
			img{
				width:100%;
			}
			@media only screen and (min-width: $md) {
				max-width:1210px;
			}
		}
		@media only screen and (min-width: $md) {
			.heading-wrap{
				display:flex;
				justify-content:space-between;
				max-width: 1130px;
				align-items:flex-end;
				font-size: 17px;
				.column:last-child{
					padding-bottom: 45px;
				}
			}
		}
	}

	
}


/* hero 
==================================== */
.hero{
	position:relative;
	margin-top:59px;
	@media only screen and (min-width: $md) {
		margin-top:0;
	}
	img{
		width:100%;
		@media only screen and (min-width: $md) {
			height:100%;
			object-fit:cover;
			object-position: top;
		}
	}
	.over{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
	}
	@media only screen and (min-width: $md) {
		height:100vh;
	}
}



/* intro 
==================================== */
.section-intro{
	h2{
		@include heading1();
		
	}
	.content{
		padding: 40px 20px;
		width:100%;
		@media only screen and (min-width: $md) {
			max-width: 640px;
			margin: 0 auto;
			padding: 60px;
			p{
				max-width:410px;
				text-indent: 10px;
				margin-bottom:0;
			}
		}
	}
	.image{
		img{
			width:100%;
		}
		@media only screen and (min-width: $md) {
			height: calc(100vh - 120px);
			min-height: 490px;
			img{
				height:100%;
				object-fit:cover;
			}
		}
	}
	.img{
		width: 100%;
		padding: 0px 20px 40px;
		@media only screen and (min-width: $md) {
			max-width: 420px;
			margin: 0 auto;
			padding: 0 60px 60px;
			align-self:flex-end;
		}
	}
	.slider{
		position: relative;
		.slick-arrow{
			position: absolute;
			left:20px;
			font-size:0;
			outline:0;
			border:0;
			width: 20px;
			height: 25px;
			bottom:20px;
			background:url(../images/arrowleft.svg) center no-repeat;
			background-size: 100%;
			z-index:1;
			&.slick-next{
				left:50px;
				transform: rotate(180deg);
			}
		}
	}
	@media only screen and (min-width: $md) {
		display:flex;
		flex-direction:row-reverse;
		min-height:100vh;
		.column{
			width: 60%;
			&:first-child{
				align-self:center;
				width: 40%;
			}
			&:last-child{
				padding:60px;
				padding-left:0;
			}
		}
	}
}

.section-unexpected{
	h2{
		@include heading1();
	}
	.content{
		padding: 40px 20px;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 960px;
			margin:0 auto;
		}
		p{
			text-indent: 10px;
			margin-bottom:0;
		}
	}
	
	img{
		width: 100%;
	}
	.top{
		margin-bottom: 20px;
		@media only screen and (min-width: $md) {
			margin-bottom:40px;
			display: flex;
			h2{
				width: 35%;
			}
			.text{
				width:65%;
				padding-left:40px;
			}
		}
	}
	.slider, .slider2{
		position: relative;
		.slick-arrow{
			position: absolute;
			left:20px;
			font-size:0;
			outline:0;
			border:0;
			width: 20px;
			height: 25px;
			bottom:20px;
			background:url(../images/arrowleft.svg) center no-repeat;
			background-size: 100%;
			z-index:1;
			&.slick-next{
				left:50px;
				transform: rotate(180deg);
			}
		}
	}
	@media only screen and (min-width: $md) {
		display:flex;
		padding: 60px;
		.column{
			width: 70%;
			&:last-child{
				width: 30%;
				align-self:flex-end;
			}
			&:first-child{
				padding-right:60px;
			}
		}
	}
}

.section-location{
	h2{
		@include heading1();
		
	}
	.content{
		padding: 40px 20px;
		p{
			text-indent: 10px;
			margin-bottom:0;
		}
		@media only screen and (min-width: $md) {
			padding: 60px;
			max-width: 500px;
			margin: 0 auto;
			line-height:1.2;
		}
	}
	
	img{
		width: 100%;
	}
	.map{
		position:relative;
		
		.over{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
			z-index:1;
			mix-blend-mode:multiply;
		}

		.over-1{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
			mix-blend-mode:multiply;
		}
		.markers{
			ul{
				list-style:none;
				margin:0;
				padding:0;
				li{
					position: absolute;
					width:3.8%;
					top:0;
					left:0;
					z-index:3;
					border-radius:50%;
					&:first-child{
					    top: 0.6%;
					    left: 70.4%;
					}
					&:nth-child(2){
					    top: 19.9%;
					    left: 56.7%;
					}
					&:nth-child(3){
					    top: 24.5%;
    					left: 79.4%;
					}
					&:nth-child(4){    
					    top: 21%;
					    left: 72.4%;
					}
					&:nth-child(5){
					    top: 52.2%;
					    left: 11.9%;
					}
					&:nth-child(6){
					    top: 51.7%;
					    left: 73.3%;
					}
					&:nth-child(7){
					    top: 47.9%;
					    left: 56.4%;
					}
					&:nth-child(8){ 
					    left: 31.2%;
					    top: 37.9%;
					}
					&:nth-child(9){
					    left: 48.5%;
					    top: 38.8%;
					}
					&:nth-child(10){
					    top: 30.3%;
					    left: auto;
					    right: 46.5%;
					}
					&:nth-child(11){
						top: 34.7%;
						left: auto;
    					right: 45.7%;
					}
    
				}
			}
		}
		.imageset{
			ul{
				list-style:none;
				margin:0;
				padding:0;
				li{
					position: absolute;
					width:25%;
					top:0;
					left:0;
					z-index:2;
					@extend %transition;
					opacity:0;
					&:first-child{
					    top: 0.5%;
					    left: 60.9%;
					}
					&:nth-child(2){
					    top: 19.9%;
					    left: 44.7%;
					}
					&:nth-child(3){
					    top: 24.5%;
    					left: 79.4%;
					}
					&:nth-child(4){    
					    top: 21%;
					    left: 72.4%;
					}
					&:nth-child(5){
					    top: 52.2%;
					    left: 11.9%;
					}
					&:nth-child(6){
					    top: 51.7%;
					    left: 73.3%;
					}
					&:nth-child(7){
					    top: 47.9%;
					    left: 56.4%;
					}
					&:nth-child(8){ 
					    left: 30.6%;
					    top: 37.9%;
					}
					&:nth-child(9){
					    left: 48.5%;
					    top: 38.8%;
					}
					&:nth-child(10){
					    top: 30.3%;
					    left: auto;
					    right: 46.5%;
					}
					&:nth-child(11){
						top: 34.7%;
						left: auto;
						right: 45%;
					}
				}
			}
		}
	}
	
	@media only screen and (min-width: $md) {
		display:flex;
		flex-direction:row-reverse;
		align-items:center;
		padding-left:0;
		.column{
			width: 40%;
			&:last-child{
				width: 60%;
			}
			&:first-child{
				align-self:flex-end;
			}
		}
	}
}

.section-gallery{
	padding:20px;
	img{
		width: 100%;
	}
	.slider, .slider2{
		position: relative;
		.slick-arrow{
			position: absolute;
			left:20px;
			font-size:0;
			outline:0;
			border:0;
			width: 20px;
			height: 25px;
			bottom:20px;
			background:url(../images/arrowleft.svg) center no-repeat;
			background-size: 100%;
			z-index:1;
			&.slick-next{
				left:50px;
				transform: rotate(180deg);
			}
		}
	}
	@media only screen and (min-width: $md) {
		display:flex;
		padding: 60px;
		min-height:100vh;
		.column{
			width: 80%;
			margin-right:0;
			margin-left: auto;
		}
		.slider{
			.image{
				height: calc(100vh - 120px);
				img{
					height:100%;
					object-fit:cover;
				}
			}
		}
	}
}

.section-loc{
	h2{
		@include heading1();
	}
	.content{
		padding: 40px 20px;
		width:100%;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 560px;
			margin: 0 auto;
			padding-left:60px;
		}
		p{
			text-indent: 10px;
			margin-bottom:0;
   
		}
	}
	.img{
		padding: 0px 20px 40px;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 560px;
			margin: 0 auto;
			padding-left:60px;
			margin-top: 40px;
			align-self:flex-end;
		}
	}
	.image{
		img{
			width:100%;
		}
		@media only screen and (min-width: $md) {
			height:calc(100vh - 120px);
			min-height:662px;
			img{
				width:100%;
				height:100%;
				object-fit:cover;
			}
		}
	}
	@media only screen and (min-width: $md) {
		padding:60px;
		.block{
			display:flex;
			flex-direction:row-reverse;
			max-width:1440px;
			margin:0 auto;
			.column{
				width: 50%;
				&:first-child{
					display:flex;
					flex-wrap:wrap;
				}
				&:last-child{
				}
			}
		}
	}
}

.section-rathdrum{
	.content{
		padding: 40px 20px;
		.logo{
			text-align:center;
			margin-bottom:40px;
			@media only screen and (min-width: $md) {
				margin-bottom:80px;
			}
			img{
				width: 100%;
				max-width:100px;
				@media only screen and (min-width: $md) {
					max-width: 189px;
				}
			}
		}
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 300px;
			margin: 0 auto;
			padding-right:60px;
		}
		@media only screen and (min-width: 1900px) {
			max-width: 390px;
		}
		p{
			text-indent: 10px;
			margin-bottom:0;
		}
	}
	
	img{
		width: 100%;
	}
	
	@media only screen and (min-width: $md) {
		display:flex;
		padding: 60px;
		padding-right:0;
		align-items:center;
		.column{
			width: 40%;
			&:last-child{
				width: 60%;
			}
		}
		.image{
			height: calc(100vh - 120px);
			min-height:520px;
			img{
				height:100%;
				object-fit:cover;
			}
		}
	}
}

.section-floorplan{
	padding: 40px 0;
	@media only screen and (min-width: $md) {
		padding: 60px 0;
		.block{
			display:flex;
			.column{
				width:320px;
				&:last-child{
					width:calc(100% - 320px);
				}
			}
		}
	}
	h2{
		@include heading1();
		span{
			font-size:16px;
			@extend %font3;
			display:block;
			margin-top:5px;
			margin-bottom:15px;
			@media only screen and (min-width: $md) {
				font-size:20px;
			}
		}
	}
	.image{
		img{
			width:100%;
		}
		@media only screen and (min-width: $md) {
			height:calc(100vh - 120px);
			img{
				height:100%;
				object-fit:contain;
			}
		}
	}

}

.section-enquire{
	h2{
		@include heading1();
	}
	.content{
		padding: 40px 20px;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 360px;
			margin:0 auto;
			padding-right:60px;
		}
	}
	img{
		width: 100%;
	}
	@media only screen and (min-width: $md) {
		display:flex;
		padding: 60px;
		.column{
			width: 35%;
			&:first-child{
				padding-top:60px;
			}
			&:last-child{
				width: 65%;
			}
		}
		.image{
			height: calc(100vh - 120px);
			min-height:630px;
			img{
				height:100%;
				object-fit:cover;
			}
		}
	}
}

@keyframes mover {
	0% { transform: translateX(0); }
	50% { transform: translateX(100px); }
	100% { transform: translateX(0); }
}

@keyframes menuAnim {
	0% { opacity:0; right: -80%; }
	100% { opacity:1; right: 0; }
}


@media only screen and (min-width: $md) {
	.section{
		padding-left: 165px;
		@media only screen and (min-width: $hd) {
			padding-left: 180px;
		}
	}
}


.imp-shape{
	opacity:0!important;
	&:hover{
		opacity:1!important;
		fill: rgba(0, 0, 0, 0.1)!important;
	}
}

.section-image-full{
	img{
		width:100%;
	}
	@media only screen and (min-width: $md) {
		height:100vh;
		img{
			height:100%;
			object-fit:cover;
		}
	}
}

.section-loc2{
	.image{
		position:relative;
		.over{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}
		img{
			width:100%;
		}
		@media only screen and (min-width: $md) {
			height:100vh;
			img{
				height:100%;
				object-fit:cover;
				object-position:top;
			}
		}
	}
}