@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;
	&.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;
		}
		.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:16%;
						top:0;
						right:0;
						z-index:2;
						@extend %font2;
						font-size:1.4vw;
						line-height:1;
						opacity:0;
						@extend %transition;
						span{
							@extend %font5;
							font-size:3.2vw;
						}
						@media only screen and (min-width: $md) {
							font-size:12px;
							span{
								font-size:29.5px;
							}
						}
						&:first-child{
							top: 5%;
						}
						&:nth-child(2){
							top: 17%;
						}
						&:nth-child(3){
							top: 28%;
						}
						&:nth-child(4){
							top: 39%;
						}
						&:nth-child(5){
							top: 50%;
						}
						&:nth-child(6){
							top: 61%;
						}
						&:nth-child(7){
							top: 74%;
						}

					}
				}
			}
			@media only screen and (min-width: $md) {
				max-width: 986px;
				margin:0 auto;
			}
			img{
				width: 100%;
			}
		}
	}

	&.section-loc{
		.image{
			position:relative;
			.over{
				position:absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
			}
			img{
				width:100%;
			}
		}
	}
}


/* 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();
		@media only screen and (min-width: $md) {
			margin-left: 60px;
		}
		
	}
	.content{
		padding: 40px 20px;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 508px;
			margin: 0 auto;
			padding-right:60px;
			p{
				margin-left: 60px;
				max-width:300px;
				text-indent: 10px;
				margin-bottom:0;
			}
		}
	}
	.img{
		margin-bottom:20px;
		@media only screen and (min-width: $md) {
			margin-bottom:50px;
			padding-right:60px;
		}
	}
	
	img{
		width: 100%;
	}
	.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;
		padding: 60px;
		align-items:center;
		.column{
			width: 45%;
			&:last-child{
				width: 55%;
			}
		}
		.slider{
			.image{
				height: calc(100vh - 120px);
				min-height:760px;
				img{
					height:100%;
					object-fit:cover;
				}
			}
		}
	}
}

.section-unexpected{
	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;
		}
		p{
			text-indent: 10px;
			margin-bottom:0;
		}
	}
	
	img{
		width: 100%;
	}
	.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;
		padding: 60px;
		align-items:center;
		.column{
			width: 40%;
			&:last-child{
				width: 60%;
			}
		}
		.slider{
			.image{
				height: calc(100vh - 120px);
				min-height: 580px;
				img{
					height:100%;
					object-fit:cover;
				}
			}
		}
	}
}

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

		.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:4%;
					top:0;
					left:0;
					z-index:2;
					border-radius:50%;
					&:first-child{
						top: 31.5%;
	    				left: 18.1%;
					}
					&:nth-child(2){
					    top: 45.8%;
    					left: 31.4%;
					}
					&:nth-child(3){
					    top: 57.1%;
					    left: 17%;
					}
					&:nth-child(4){
					    top: 76.4%;
					    left: 54.2%;
					}
					&:nth-child(5){
					    top: 79.7%;
					    left: 28.5%;
					}
					&:nth-child(6){
					    top: 74%;
					    left: 29%;
					}
					&:nth-child(7){
					    top: 67%;
					    left: 74.9%;
					}
					&:nth-child(8){
					    top: 32.9%;
					    right: 13.2%;
					    left: auto;
					}
					&:nth-child(9){
					    top: 71.3%;
					    left: 49.8%;
					}
					&:nth-child(10){
					    top: auto;
					    left: auto;
					    bottom: 13.6%;
					    right: 23.5%;
					}
    
				}
			}
		}
		.imageset{
			ul{
				list-style:none;
				margin:0;
				padding:0;
				li{
					position: absolute;
					width:10%;
					top:0;
					left:0;
					z-index:1;
					@extend %transition;
					opacity:0;
					&:first-child{
					    width: 8.6%;
					    top: 31.5%;
					    left: 13.5%;
					}
					&:nth-child(2){
					    width: 14.2%;
					    top: 45.6%;
					    left: 21.2%;
					}
					&:nth-child(3){
					    width: 17.2%;
					    top: 56.9%;
					    left: 3.8%;
					}
					&:nth-child(4){
					    width: 17%;
					    top: 76.2%;
					    left: 41.2%;
					}
					&:nth-child(5){
					    width: 8.5%;
					    top: 79.6%;
					    left: 23.7%;
					}
					&:nth-child(6){
					    width: 7.7%;
					    top: 73.9%;
					    left: 29%;
					}
					&:nth-child(7){
					    width: 16%;
					    top: 66.8%;
					    left: 74.9%;
					}
					&:nth-child(8){
					    width: 16%;
					    top: 32.8%;
					    right: 1.2%;
					    left: auto;
					}
					&:nth-child(9){
					    width: 15.8%;
					    top: 71.3%;
					    left: 36.8%;
					}
					&:nth-child(10){
					    width: 16.8%;
					    top: auto;
					    left: auto;
					    bottom: 13.6%;
					    right: 23.5%;
					}
				}
			}
		}
	}
	
	@media only screen and (min-width: $md) {
		display:flex;
		flex-direction:row-reverse;
		padding: 60px;
		align-items:center;
		padding-left:0;
		.column{
			width: 35%;
			&:last-child{
				width: 65%;
			}
		}
	}
}

.section-gallery{
	.content{
		padding: 40px 20px;
		@media only screen and (min-width: $md) {
			padding: 0;
			padding-right:60px;
		}
		p{
			text-indent: 10px;
			margin-bottom:0;
		}
	}
	
	img{
		width: 100%;
	}
	.img{
		margin-top:40px;
		@media only screen and (min-width: $md) {
			margin-top:60px;
			margin-left: 60px;
			height: calc(30vh - 60px);
			img{
				height:100%;
				object-fit:cover;
			}
		}
	}
	.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;
		align-items:center;
		.column{
			width: 40%;
			&:last-child{
				width: 60%;
			}
		}
		.slider{
			.image{
				height: calc(100vh - 120px);
				img{
					height:100%;
					object-fit:cover;
				}
			}
		}
		.slider2{
			.image{
				height: calc(70vh - 120px);
				img{
					height:100%;
					object-fit:cover;
				}
			}
		}
	}
}

.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-enquire{
	h2{
		@include heading1();
	}
	.content{
		padding: 40px 20px;
		@media only screen and (min-width: $md) {
			padding: 0;
			max-width: 360px;
			margin-right:0;
			margin-left:auto;
			padding-right:20px;
		}
	}
	.img{
		margin-top:20px;
		@media only screen and (min-width: $md) {
			margin-top:50px;
		}
	}
	
	img{
		width: 100%;
	}
	@media only screen and (min-width: $md) {
		display:flex;
		padding: 60px;
		align-items:flex-end;
		.column{
			width: 45%;
			&:last-child{
				width: 55%;
				align-self:center;
			}
		}
		.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;
	}
}