/**************** GENERAL ****************/
*
{
	color: white;
	font-size: 16px;
}

a
{
	text-decoration: none;
}

h1
{
	
}

hr
{

}

button
{
	border: 0;
	cursor: pointer;
}

body, html
{
	margin: 0;
    padding: 0;
}

img {display: block;}

@media only screen and (min-width: 1024px)
{
	*
	{
		font-size: 22px;
	}
}

/**************** STANDARDS ****************/
.display-none { display: none;}
.before { opacity: 0 !important; }
.after { opacity: 1 !important; }
.desktop-only { display: none;}
.mobile-only { display: block;}

/* variant 1 */
.primary-color {color: #353535;}
.primary-bkg {background-color: #353535;}

.secondary-color {color: #304a61;}
.secondary-bkg {background-color: #304a61;}

.accent-color {color: #476d70;}
.accent-bkg {background-color: #476d70;}

.plain-color {color: #FFF;}
.plain-bkg {background-color: #FFF;}

.orange-test {background-color: #ff712c;}
.smalltext {font-size: 12px;}



.title-font
{
	font-family: metallophile-sp8, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.main-font
{
	font-family: carta-marina,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.clean-font
{
	font-family: semplicitapro,sans-serif;
	font-weight: 300;
	font-style: normal;
}

@media only screen and (min-width: 1024px)
{
	.smalltext {font-size: 12px;}
}

/* Variant 2 
.primary-color {color: #353535;}
.primary-bkg {background-color: #353535;}

.secondary-color {color: #304a61;}
.secondary-bkg {background-color: #304a61;}

.accent-color {color: #476d70;}
.accent-bkg {background-color: #476d70;}

.plain-color {color: #FFF;}
.plain-bkg {background-color: #FFF;}
*/

/* variant 3 
.primary-color {color: #353535;}
.primary-bkg {background-color: #353535;}

.secondary-color {color: #304a61;}
.secondary-bkg {background-color: #304a61;}

.accent-color {color: #476d70;}
.accent-bkg {background-color: #476d70;}

.plain-color {color: #FFF;}
.plain-bkg {background-color: #FFF;}
*/

.flex-split
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.flex-center
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.flex-center 
{
	justify-content: center;
	align-items: center;
}

.flex-start
{
	justify-content: flex-start;
	align-items: center;
}

.flex-start p
{
	margin-left: 10px;
}

.flex-container
{
	display: flex;
}

@media only screen and (min-width: 1200px)
{
	.desktop-only
	{
		display: block;
	}

	.mobile-only
	{
		display: none;
	}
}

/* NAV BAR */
#nav-bar
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 1;
	opacity: 0.75;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-nav
{
	width: 100%;
	height: 60px;
	background: transparent;
	color: white;
	border: 0;
	border-right: 1px solid white;
	padding: 10px;
}

.mobile-nav option
{
	background-color: #353535;
	opacity: 0.75;
	color: white;
}

#left-nav
{
	padding-left: 0px;
	width: 60%;
}

#left-nav a:hover
{
	color: #476d70;
}

#right-nav
{
	display: flex;
	justify-content: flex-end;
	align-items: center;

	width: 40%;
}

#fs-account-icon img, #fs-chat-bubble img, #fs-cart-icon img
{
	width: 24px;
}

#left-nav a, #right-nav a
{
	font-family: carta-marina,sans-serif;
	font-weight: 400;
	font-style: normal;

	margin: 0 15px;
	font-size: 18px;
	letter-spacing: 2px;
	cursor: pointer;
}

.current
{
	color: #fdd300;
}

.banner-container
{
	width: 100%;
	min-height: 400px;
	overflow: hidden;
	display: block;
	position: relative;
}

.banner
{
	display: block;
	animation: fadein 1s ease-in-out forwards; 
}

.banner img
{
	display: block;
	vertical-align: middle;
}

.title-container
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;

	animation: fadein 1s ease-in-out forwards; 
}

.title-container h1
{
	font-size: 48px;
	text-shadow: 2px 2px #000;
	margin: 15px 0;
	white-space: normal;
}

.title-container h2
{
	font-size: 16px;
	text-shadow: 1px 1px #000;
}

.loading-gif-container
{
	width: 100%;
	min-height: 700px;
	transition: opacity 0.5s ease-in-out;

	position: absolute;
	left: 0;
	top: 0;
}

.loading-gif-container img
{
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.booknow, .gotoservices
{
	padding: 15px;
	border: 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  	border-radius: 5px;
}

.booknow-small
{
	padding: 15px;
	border: 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  	border-radius: 5px;
	  font-size: 16px;
}

.featured-container
{
	width: 100%;
}

.featured-content
{
	position: relative;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}

.featured-picture
{
	width: 100%;
}

.featured-item
{
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;	
	
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.featured-item-cell
{
	width: 60%;
	background-color: rgba(53,53,53,0.75);
	border-radius: 5px;
	padding: 25px;
	text-align: center;
}

.featured-item-cell img
{
	width: 90%;
	margin: 0 auto;
}

.featured-item-cell h2
{
	font-size: 18px;
	margin: 5px auto;
}

.featured-item-cell p
{
	font-size: 16px;
	margin: 5px auto;
}

@media only screen and (min-width: 1280px)
{
	#nav-bar
	{
		height: 75px;
		justify-content: space-between;
	}

	#fs-account-icon img, #fs-chat-bubble img, #fs-cart-icon img
	{
		width: 32px;
	}

	.title-container
	{
		top: 50%;
		right: 150px;
		transform: translate(0px,-50%);
		text-align: right;
	}

	.title-container h1
	{
		font-size: 64px;
		text-shadow: 3px 3px #000;
		white-space: nowrap;
	}

	.title-container h2
	{
		font-size: 24px;
		text-shadow: 2px 2px #000;
	}

	#left-nav
	{
		padding-left: 25px;
	}

	#left-nav a, #right-nav a
	{
		margin: 0 15px;
		font-size: 26px;
		letter-spacing: 2px;
		cursor: pointer;
	}

	.banner-container
	{
		min-height: 700px;
	}

	.featured-content
	{
		flex-direction: row;
	}

	.featured-picture
	{
		width: 60%;
	}

	
	.featured-item
	{
		position: static;
		left: 0;
		top: 0;
		transform: translate(0,0);
		text-align: center;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;	
		
	}

	.featured-item-cell
	{
		width: 50%;
	}

	.featured-item-cell img
	{
		width: 80%;
	}

	.featured-item-cell h2
	{
		font-size: 22px;
	}

	.featured-item-cell p
	{
		font-size: 18px;
		margin: 5px auto;
	}
}

@media only screen and (min-width: 1400px)
{
	.title-container h1
	{
		font-size: 85px;
		white-space: nowrap;
	}

	.title-container h2
	{
		font-size: 32px;
	}

}

.cc-center
{
	text-align: center;
	margin: 0 auto;
}

.cc-fullwidth
{
	width: 100%;
}

.content-container
{
	width: calc(100% - 30px);
	padding: 15px;
}

.content-container-inside
{
	width: calc(100% - 30px);
	padding: 15px;
	margin: 50px auto;
	text-align: left;
}

.content-container-inside h2
{
	font-family: metallophile-sp8, sans-serif;
	font-weight: 300;
	font-style: normal;

	font-size: 26px;
}

/* DEV MESSAGE */
.devmsg
{
	margin: 50px auto;
	background: linear-gradient(135deg, 
        	rgba(53, 53, 53, 0.25) 0 10%, rgba(255, 255, 0, 0.25) 10% 15%, 
        	rgba(53, 53, 53, 0.25) 15% 25%, rgba(255, 255, 0, 0.25) 25% 30%,
        	rgba(53, 53, 53, 0.25) 30% 40%, rgba(255, 255, 0, 0.25) 40% 45%,
        	rgba(53, 53, 53, 0.25) 45% 55%, rgba(255, 255, 0, 0.25) 55% 60%,
        	rgba(53, 53, 53, 0.25) 60% 70%, rgba(255, 255, 0, 0.25) 70% 75%,
        	rgba(53, 53, 53, 0.25) 75% 85%, rgba(255, 255, 0, 0.25) 85% 100%,
        	rgba(53, 53, 53, 0.25) 90% 100%);

	background-size: 200% 200%;
	animation: indev 5s linear infinite;
	
}

.devmsg p
{
	font-family: quasimoda, sans-serif;
    font-weight: 300;
    font-style: italic;
	margin: 0 5px;

	opacity: 0.75;
}

@-webkit-keyframes indev {
    0%{background-position:0% 0%}
    100%{background-position:100% 100%}
}
@-moz-keyframes indev {
    0%{background-position:0% 0%}
    100%{background-position:100% 100%}
}
@keyframes indev { 
    0%{background-position:0% 0%}
    100%{background-position:89% 100%}
}

.service-msg
{
	max-width: 500px;
	margin: 75px auto;

	font-style: italic;
	opacity: 0.75;
}

.inquiry-container
{
	width: 95%;
	margin: 50px auto;
}

.inquiry-container input[type='text'], .inquiry-container input[type='email']
{
	display: block;
	width: calc(100% - 20px);
	margin: 4px 0px;
	padding: 15px 10px;
	color: white;

	font-size: 18px;

	background-color: #353535;
	border: 0;
	border-bottom: 2px solid white;
}

.inquiry-container textarea
{
	display: block;
	width: calc(100% - 18px);
	height: auto;
	margin: 4px 0px;
	padding: 10px;
	color: white;
	text-align: left;

	font-size: 18px;

	background-color: #353535;
	border: 0;
	border-bottom: 2px solid white;
}

.inquiry-container input[type='submit']
{
	display: block;
	width: calc(100% + 4px);
	margin: 2px auto;
	padding: 10px;
	color: white;

	font-size: 18px;

	background-color: #476d70;
	border:  0;

}

@media only screen and (min-width: 1024px)
{
	.content-container-inside
	{
		width: fit-content;
		padding: 25px;
	}

	.service-msg
	{
		max-width: 500px;
		margin: 75px auto;
	}

	.inquiry-container
	{
		width: 500px;
	}

}


/* IMG GRID */
.gallery-grid
{
	width: 100%;
	margin: 0px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}

.gallery-grid-column
{
	width: calc(100% - 4px);
	margin: 2px;

	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
}

.gallery-grid-column img
{
	width: 100%;

	animation: fadein 0.5s ease-in-out forwards;
}

@media only screen and (min-width: 1200px)
{
	.gallery-grid
	{
		width: 100%;
		margin: 0px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: row;
	}

	.gallery-grid-column
	{
		width: calc(50% - 4px);
		margin: 2px;

		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
	}
}

footer
{
	position: relative;
	width: calc(100% - 100px);
	padding: 50px;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;

	background: linear-gradient(120deg, #243a47 0 100%);/*, #476d70 40% 41%, #353535 41% 60%, #476d70 65% 66%, #353535 66% 100%);*/
	border: 0;
	border-top: 3px solid #353535;
	border-style: outset;
}

.footer-column
{
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #353535;
}

.footer-column img
{
	margin: 0 auto;
	width: 512px;
	max-width: 90%;
}

#links-container
{
	width: fit-content;
	margin: 0 auto;
}

#links-container a
{
	display: block;
	margin: 10px auto;
	font-size: 16px;
}

#links-container a:hover
{
	color: #476d70;
}

.social-icon-container
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.social-icon img
{
	width: 24px !important;
	margin: 0 5px !important;
}

.poweredby
{
	position: absolute;
	right: 10px;
	bottom: 5px;
	color: #fff;
	font-size: 10px;
}

.poweredby:hover
{
	color: #476d70;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




@media only screen and (min-width: 1024px)
{
	footer 
	{
		flex-direction: row;
		background: linear-gradient(135deg, #243a47 0 30%, #353535 35% 100%);
	}

	.footer-column
	{
		text-align: left;
		width: 33.3%;
		border: 0;
	}

	.footer-column img
	{
		margin: 0;
		width: 256px;
	}

	#links-container
	{
		width: 400px;
	}

	#links-container a
	{
		margin: 10px 0px;
		font-size: 16px;
	}

	.social-icon-container
	{
		width: 400px;
		display: flex;
		justify-content: flex-start;
	}

	.poweredby
	{
		font-size: 12px;
	}
}

@media only screen and (min-width: 1024px)
{
	.footer-column img
	{
		margin: 0;
		width: 384px;
	}
}


/* TEXTURES */
.texture1
{
	background-color: #bc7855;
	background-image: url("../img/textures/gravel.png");
}

.texture2
{
	background-color: #81521e;
	background-image: url("../img/textures/gravel.png");
}

.texture3
{
	background-color: #d29847;
	background-image: url("../img/textures/gravel.png");
}

.texture4
{
	background-color: #b86938;
	background-image: url("../img/textures/rough-cloth-light.png");
}

.texture5
{
	background-color: #b86938;
	background-image: url("../img/textures/sandpaper.png");
}

.texture6
{
	background-color: #d29847;
	background-image: url("../img/textures/stardust.png");
}