@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Poetsen+One&display=swap');

[data-largeimage] {cursor: pointer;}

.icon-email {background-image: url(../img/icon-email.png);}
.icon-phone {background-image: url(../img/icon-phone.png);}

body
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
}

.container
{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.header
{
	background: #147eaa;
	display: flex;
	flex-direction: column;
	align-items: center;
}
	.header a
	{
		color: inherit;
		text-decoration: none;
	}
	.header-inner
	{
		width: calc(100% - 40px);
		max-width: 1300px;
		margin: 0 20px;
		padding: 30px 0;
		display: flex;
		flex-direction: column;
		color: #fff;
		gap: 30px;
	}
		.header-atlantic
		{
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
			.header-atlantic-logo
			{
				width: 56px;
				height: 27px;
				background: url(../img/logo.png) center no-repeat;
				background-size: contain;
				margin-left: 30px;
			}
			.header-atlantic-text
			{
				font-family: 'Poetsen One', sans-serif;
				font-size: 38px;
			}
		.nav
		{
			display: flex;
			gap: 20px;
			justify-content: space-between;
			text-transform: uppercase;
			font-size: 15px;
			font-weight: bold;
		}
		.nav-hamburger
		{
			display: none;
		}

.content
{
	flex: 1;
	/*background: url(../img/example-bg.jpg) center no-repeat;
	background-size: cover;*/
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #a5c8d3;
}
	.slideshow
	{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;
		overflow: hidden;
		display: flex;
	}
		.slideshow-slide
		{
	    width: 100%;
			min-width: 100%;
			overflow: hidden;
			height: 100%;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	.content-inner
	{
		width: calc(100% - 40px);
		max-width: 1300px;
		margin: 0 20px;
		padding: 90px 0;
		display: flex;
		flex-direction: column;
		gap: 50px;
		position: relative;
		z-index: 1;
	}
		.textbox
		{
			padding: 50px 30px;
			background: rgba(255,255,255,.9);
			position: relative;
			gap: 50px;
			display: flex;
		}
			.textbox a
			{
				color: inherit;
				text-decoration: none;
			}
			.textbox .text a
			{
				color: #147eaa;
				text-decoration: underline;
			}
			.textbox-column
			{
				display: flex;
				flex-direction: column;
				flex: 1;
			}
			.slideshow-controls
			{
				position: absolute;
				top: -25px;
				right: 100px;
				display: flex;
				gap: 10px;
			}
				.slideshow-controls-slider
				{
					width: 46px;
					height: 46px;
					background: #147eaa;
					border-radius: 200px;
					border: 2px solid #fff;
					position: relative;
					cursor: pointer;
				}
				.slideshow-controls-slider.selected:after
				{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					border-radius: 200px;
					width: 15px;
					height: 15px;
					background: #fff;
				}
			.title
			{
				font-family: 'Poetsen One', sans-serif;
				font-size: 36px;
				color: #147eaa;
			}
			.subtitle
			{
				color: #385361;
				font-size: 22px;
				margin-top: 30px;
			}
			.text
			{
				margin-top: 30px;
			}
			.image
			{
				margin-top: 30px;
			}
				.image img
				{
					width: 100%;
					height: auto;
				}
			.home-contact
			{
				margin-top: 50px;
				display: flex;
				gap: 40px;
			}
				.home-contact-column
				{
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10px;
				}
					.home-contact-icon
					{
						width: 60px;
						height: 60px;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
					.home-contact-text
					{
						font-family: 'Bree Serif', serif;
						color: #147eaa;
						font-size: 36px;
					}
			.pricetable
			{
				width: 100%;
				margin: 30px 0 0 0;
		    padding: 0;
			}
				.pricetable th,
				.pricetable td
				{
					width: 33%;
					height: 30px;
					line-height: 30px;
					background-color: #bbb;
					color: #fff;
					text-align: center;
				}
				.pricetable td
				{
			    border-bottom: 1px solid #bbb;
					color: #666;
					background: #fff;
					font-size: 11pt;
				}
			.button,
			button
			{
				display: inline-block;
				padding: 15px 20px;
				background: #147eaa;
				color: #fff !important;
				font-size: 16px;
				margin: 30px 0 0 0;
				align-self: flex-start;
				justify-self: center;
				cursor: pointer;
				border: 0;
				outline: 0;
			}
			.button.left,
			button.left
			{
				align-self: flex-start;
			}
			.button.right,
			button.right
			{
				align-self: flex-end;
			}
			.button.center,
			button.center
			{
				align-self: center;
			}
			.button.disabled
			{
				cursor: default;
				background: #ccc;
				color: #999;
			}
			.iframe
			{
				width: 100%;
				padding-top: calc(100% / 4 * 3);
				height: 0;
				position: relative;
				margin-top: 30px;
			}
				.iframe iframe
				{
					border: 0;
					padding: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			.form
			{
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				gap: 15px;
			}
				.form-row
				{
					display: flex;
					gap: 10px;
				}
				.form-label
				{
					padding-top: 4px;
					text-align: right;
					width: 160px;
					color: #666;
				}
				.form-label.autowidth
				{
					width: auto;
				}
				.form-input
				{
					flex: 1;
				}
					.form-input input,
					.form-input textarea
					{
						font-family: 'Roboto', Arial, sans-serif;
						padding: 5px;
						width: calc(100% - 12px);
						border: 1px solid #147eaa;
						border-radius: 3px;
					}
					.form-input select
					{
						font-family: 'Roboto', Arial, sans-serif;
						padding: 5px;
						border: 1px solid #147eaa;
						border-radius: 3px;
					}
			.gallery
			{
				width: 100%;
				display: grid;
				grid-template-columns: auto auto auto;
				margin: 20px 0 50px 0;
				border-collapse: collapse;
			}
				.gallery-image
				{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					height: 0;
					padding-top: 75%;
					border: 1px solid #fff;
					border-collapse: collapse;
					transition: all .2s ease-in-out;
				}
				.gallery-image:hover
				{
					transform: scale(1.05,1.05);
					cursor: pointer;
				}
					
		.collage
		{
			display: flex;
			margin-top: 50px;
			background: #fff;
			padding: 1px;
			gap: 1px;
			min-height: 470px;
		}
			.collage a
			{
				color: inherit;
				text-decoration: none;
			}
			.collage-column
			{
				display: flex;
				flex-direction: column;
				flex: 1;
				gap: 1px;
			}
				.collage-textbox
				{
					display: flex;
					align-items: center;
					text-align: center;
					justify-content: center;
					padding: 20px;
					font-family: 'Bree Serif', serif;
					font-size: 14px;
				}
				.collage-button
				{
					display: flex;
					align-items: center;
					text-align: center;
					justify-content: center;
					padding: 30px;
					background: #147eaa;
					color: #fff;
					font-family: 'Bree Serif', serif;
					font-size: 26px;
					line-height: 24px;
				}
				.collage-image
				{
					flex: 1;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}
		
.footer
{
	background: #147eaa;
	display: flex;
	flex-direction: column;
	align-items: center;
}
	.footer a
	{
		color: inherit;
		text-decoration: none;
	}
	.footer-inner
	{
		width: calc(100% - 40px);
		max-width: 1300px;
		margin: 0 20px;
		padding: 50px 0;
		display: flex;
		flex-direction: row;
		color: #fff;
		text-transform: uppercase;
		gap: 30px;
		align-items: flex-end;
	}
		.footer-column
		{
			display: flex;
			flex-direction: column;
			gap: 30px;
		}
		.footer-column:first-child
		{
			margin-right: auto;
		}
			.footer-links
			{
				display: flex;
				flex-direction: column;
				gap: 12px;
				font-size: 14px;
			}
			.footer-contact
			{
				text-align: right;
				font-size: 18px;
			}
			.footer-address
			{
				text-align: right;
				font-size: 14px;
			}

@media screen and (max-width: 1200px)
{
	.textbox
	{
		flex-direction: column;
	}
}

@media screen and (max-width: 1000px)
{
	.home-contact
	{
		flex-direction: column;
	}
}

@media screen and (max-width: 800px)
{
	.header
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	
	.header-inner
	{
		gap: 5px;
		flex-direction: row;
		padding:15px 0;
	}
	
	.header-atlantic-text
	{
		font-size: 30px;
		white-space: nowrap;
	}

	.nav
	{
		display: none;
		position: fixed;
		top: 108px;
		width: calc(100vw - 60px);
		padding: 30px;
		height: calc(100vh - 168px);
		left: 0;
		flex-direction: column;
		gap: 25px;
		flex: 0;
		background: #147eaa;
		justify-content: flex-start;
		z-index: 100;
		text-align: right;
	}
	
	.nav-hamburger
	{
		display: block;
		width: 45px;
		height: 45px;
		background: url(../img/hamburger.png) center no-repeat;
		background-size: contain;
		cursor: pointer;
		margin-left: auto;
	}
	
	.content
	{
		margin-top: 108px;
	}
	
	.content-inner
	{
		padding-top: 20px;
		padding-bottom: 20px;
		gap: 20px;
	}
	
	.slideshow-controls
	{
		right: 0;
		left: 0;
		width: 100%;
		justify-content: center;
	}
	
	.home-contact-column
	{
		flex-direction: column;
	}
	
	.textbox.mobilereverse
	{
		flex-direction: column-reverse;
	}
	
	.gallery
	{
		grid-template-columns: auto auto;
	}
	
	.collage
	{
		flex-direction: column;
		margin-top: 0;
	}
		.collage-column
		{
			flex-direction: row;
			min-height: 200px;
		}
			.collage-textbox
			{
				flex: 1;
			}
			.collage-column a
			{
				flex: 1;
			}
			.collage-button
			{
				flex: 1;
				height: calc(100% - 60px);
			}
	
	.form-row
	{
		flex-direction: column;
	}
	.form-label
	{
		width: 100%;
		text-align: left;
	}
	
	.footer-inner
	{
		flex-direction: column;
	}
		.footer-column
		{
			margin-left: auto;
			margin-right: auto;
		}
			.footer-links
			{
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
			}
			.footer-contact,
			.footer-address
			{
				text-align: center;
			}
}

@media screen and (max-width: 600px)
{
	.home-contact-text
	{
		font-size: 20px;
	}
	
	.gallery
	{
		grid-template-columns: auto;
	}
}