html {
	font-family:Arial,sans-serif;
	font-size:0;
	line-height:0;
	text-align:left;
}

body {
	-webkit-text-size-adjust:100%;
	background-color:#231f20;
	margin:0;
	padding:0;
}

header {
	background-color:#231f20;
	background-image:url(header-large.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	height:100px;
}

@media (max-width: 1024px) {
	header {
		background-image:url(header-med.jpg);
	}
}

@media (max-width: 600px) {
	header {
		background-image:url(header-small.jpg);
	}
}

@media (max-width: 375px) {
	header {
		background-image:url(header-xsmall.jpg);
	}
}

.fishchubbie {
	max-height:80px;
	padding:10px;
}

/*@media (max-width: 360px) {
	        .fishchubbie {
	            float: right;
	        }
	    }*/
subheader {
	display:block;
	background-color:#fff;
	text-align:right;
	padding:3px 10px;
}

subheader p,subheader a {
	font-size:14px;
	line-height:18px;
	color:#231f20;
	margin:0;
}

a[href^="tel:"] {
	text-decoration:none;
}

/*.bg {
            background-image:url(bg.jpg);
            background-position:right center;
            background-size:cover;
            background-repeat:no-repeat;
            margin:0;
            padding:0;
        }*/
.bg {
	background-image:url(bg.png);
}

@media (max-width: 600px) {
	.bg {
		background-image:url(bg-small.png);
	}
}

/*.overlay {
            /*background:-moz-linear-gradient(left,rgba(25,31,32,1) 10%,rgba(25,31,32,0.5) 75%,rgba(25,31,32,0) 100%);
            background:-webkit-linear-gradient(left,rgba(25,31,32,1) 10%,rgba(25,31,32,0.5) 75%,rgba(25,31,32,0) 100%);
            background:linear-gradient(to right,rgba(25,31,32,1) 10%,rgba(25,31,32,0.5) 75%,rgba(25,31,32,0) 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#231f20',endColorstr='#00231f20',GradientType=1);
			text-shadow: 1px -1px 3px rgba(25,31,32,0.5);
			}
        
        @media (max-width: 768px) {
            .overlay {
            	background: transparent;
            }
        }*/
.content {
	padding:20px;
}

.panel {
	background:#fff;
	padding:1px 20px;
	margin:20px -20px -20px;
}

.panel p,.panel h2 {
	color:#231f20;
	text-shadow:none;
}

.panel p {
	font-size:16px;
}

footer {
	background-color:#231f20;
	padding:20px;
	text-align:center;
}

footer .logo {
	width:300px;
	height:auto;
}

img {
	max-width:100%;
}

/* utility */
.margin-remove {
	margin:0;
}

.margin-top-remove {
	margin-top:0;
}

.margin-bottom-remove {
	margin-bottom:0;
}

/* content */
p,.p,ul,ol,h1,h2,h3 {
	font-family:Arial,sans-serif;
}

p {
	margin:10px 0 20px;
}

p,.p,ul,ol {
	font-size:16px;
	line-height:24px;
	font-weight:400;
	color:#fff;
}

h1,h2 {
	font-weight:700;
	color:#fff;
	letter-spacing:-.5px;
}

a {
	color:#fff;
	cursor:pointer;
}

h1 {
	font-size:22px;
	line-height:28px;
	letter-spacing:-.5px;
	margin:0 0 10px;
}

h2 {
	font-size:18px;
	line-height:24px;
	margin:20px 0 10px;
}

.copyright {
	font-size:12px;
}

.crypt:after {
	content:attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

/* Galleries */
.gallery.chubbie img {
	width:33%;
}

.gallery.chubbie img.thumb.two {
	width:66%;
}

.gallery.chubbie img.thumb.three {
	width:99%;
}

.gallery.fish img {
	width:10%;
}

img.thumb {
	cursor:pointer;
	opacity:.95;
}

img.thumb:hover {
	opacity:1;
}

/* Modal Background */
.modal {
	display:none;
	position:fixed;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgba(0,0,0,0.85);
}

/* Modal Content */
.modal-content {
	position:relative;
	margin:auto;
	padding:0;
	width:90%;
	text-align:center;
}

/* The Close Button */
.close {
	color:#fff;
	position:absolute;
	top:25px;
	right:25px;
	font-size:36px;
}

.close:hover,.close:focus {
	color:#999;
	text-decoration:none;
	cursor:pointer;
}

/* Hide the slides by default */
.fullsize {
	display:none;
}

/* Next & previous buttons */
.prev,.next {
	cursor:pointer;
	position:absolute;
	top:25%;
	width:auto;
	padding:25px 15px;
	color:#fff;
	font-weight:700;
	font-size:24px;
	transition:.6s ease;
	user-select:none;
	-webkit-user-select:none;
	background:rgba(0,0,0,0.5);
}

.prev {
	left:0;
}

.next {
	right:0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,.next:hover {
	background-color:rgba(0,0,0,0.8);
}

/* Caption */
.caption-container p {
	margin:10px 0;
}

/* ========================================================================
		   Component: Grid
========================================================================== */

.grid {
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	list-style:none;
}

/*
		 * DEPRECATED
		 * Micro clearfix
		 * Can't use `table` because it creates a 1px gap when it becomes a flex item, only in Webkit
		 */
.grid:before,.grid:after {
	content:"";
	display:block;
	overflow:hidden;
}

.grid:after {
	clear:both;
}

/*
		 * Grid cell
		 * 1. Space is allocated solely based on content dimensions
		 * 2. Makes grid more robust so that it can be used with other block elements
		 * 3. DEPRECATED Using `float` to support IE9
		 */
.grid > * {
/* 1 */
	-ms-flex:none;
	-webkit-flex:none;
	flex:none;
/* 2 */
	margin:0;
/* 3 */
	float:left;
}

/*
		 * Remove margin from the last-child
		 */
.grid > * > :last-child {
	margin-bottom:0;
}

/* Grid gutter
		 ========================================================================== */
/* Horizontal */
.grid {
	margin-left:-20px;
}

.grid > * {
	padding-left:20px;
}

/* Vertical */
.grid + .grid,.grid-margin {
	margin-top:20px;
}

[class*='width'] {
	box-sizing:border-box;
	width:100%;
}

.width-1-2 {
	width:50%;
}

.width-1-3 {
	width:33.333%;
}

.width-2-3 {
	width:66.666%;
}

.width-1-4 {
	width:25%;
}

.width-3-4 {
	width:75%;
}

@media (max-width: 800px) {
	.width-1-2,.width-1-3,.width-2-3,.width-1-4,.width-3-4 {
		width:100%;
	}
}