html {
  overflow-y: scroll;
  padding-bottom: 15px;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  }

background {
	color: #fcfcfc;
	}

.canvas {
	max-width: 1200px;
	padding-top: 10px;
	padding-left: 75px;
	padding-right: 75px;
	text-transform: uppercase;
	}
	
.header a {
	color: #222222;
	font-family: 'Julius Sans One', 'PT Sans', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	}
	
nav li {
	display: inline;
	}
	
nav  {
	font-family: 'Julius Sans One', 'PT Sans', sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 13px;
	letter-spacing: 1px;
	text-align: right;
	text-decoration: none;
	line-height: 1.6em;
	word-spacing: 30px;
	}
	
nav a {
	text-decoration: none;
	}

nav a:link {
		color: #999999;
	}
	
nav a:hover {
		color: #111111;
	}

#active a {
		color: #111111;
		}
		
nav a:visited {
	color: #424242;
	}
		
.smallView{
	display: none;
	}
	
.smallView .nightsort {
	display: none;
	}

.smallView .daysort {
	display: none;
	}

.container {
	position: relative; 
	width: 1100px; 
	margin: 0 auto; 
	font-size:13px;
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: uppercase;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

p {
	text-transform: none;
	}
	
body a:link {
	text-decoration: none;
	}
	
.information {
	display: inline-block;
	padding-bottom: 10px;
}

.rightside {
	float: right;
	padding-right: 260px;
}
	
 #viewBy{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
    z-index: 1;
	background-color: #ffffff;
	padding-left: 10px;
	}
	
/* ---- Styles for the cookie popup ---- */

#cookie-popup {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 10px;
	text-align: center;
}
#cookie-popup button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}
	
/* ---- button ---- */

.button {
	padding:0;
	list-style:none;
	letter-spacing: 3px;
	background-color: white;
	border: none;
	float: left;
	display: block;
	padding: 5px 20px;
	text-decoration: none;
	cursor: pointer;
	text-transform: uppercase;
	color: #575757;
}

.button:active,
.button.is-checked {
  background: #e95a44;
		color:#fff;
		text-decoration: none;
		button:focus {outline:0;}
}

button:focus {outline:0;}

.button:active {
  background: #e95a44;
		color:#fff;
}

/* ---- button-group ---- */

.button-group {
	margin-bottom: 3px;
}

.button-group:after {
	content: '';
	display: block;
	clear: both;
}

.button-group .button {
	float: left;
	border-radius: 0;
	margin-left: 0;
	margin-right: 1px;
}

.floating-box {
	display: inline-block;
}

.nightsort {
	float: right;
	display: none;
}
	
.daysort {
	float: right;
	display: none;
}

.grid {
	padding: 5px;
	}

/* ---- grid ---- */

/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

/* ---- main .grid-item ---- */

.grid-sizer,
.grid-item {
	width: 23%;
}

.grid-item {
	float: left;
	margin-bottom: 20px;
	box-shadow: 0 10px 10px 0 black, 0 6px 15px 0 grey;
	cursor: pointer;
}

.grid-item img {
	display: block;
	max-width: 100%;
}

.grid-wrapper {
	overflow:hidden;
	position: relative !important;
	background: #666;
	cursor:pointer;
}

.grid-item .label {
	position: absolute;
	width: 100%;
	height:40px;
	bottom:-40px;
	-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.grid-item .label-bg {
		background: #e95a44;
		width: 100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
}

.grid-item .label-text {
		color:#fff;
		position: relative;
		z-index:1;
		padding:5px 8px;
}

.grid-item .text-category {
			display:block;
			font-size:9px;
}

.grid-item:hover .label {
	bottom:0;
}

.grid-item:hover img {
	top:-30px;
}

/* ------ obs photo grid ----- */

.photo-sizer,
.photo-item {
	width: 49%;
}

.photo-item {
	float: left;
	margin-bottom: 20px;
	box-shadow: 0 10px 10px 0 black, 0 6px 15px 0 grey;
}

.photo-item img {
	display: block;
	max-width: 100%;
}

.build img {
	max-height: 300px;
	width: auto;
	}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
	display: flex;
	flex-direction: column;
	max-width: 80%;
	margin: 0 auto;
	border-radius: 5px;
	position: relative;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* ---- additional sytling for modal image and description ---- */
.image-title {
  text-align: center;
  text-decoration: underline;
  text-underline-position: under;
  color: #999999;
}

.image-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 20px;
	padding-top: 10px;
}

.full-width{
	width: 100%;
}

.user-options {
	display: flex;
	justify-content: center;
}

.user-options button {
	background-color: #999999;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'PT Sans', sans-serif;
}

.user-options button:hover {
	background-color: #595959;
}

button#purchase {
	margin-right: 10px;
}

.image-container img {
	object-fit: contain;
	object-position: top;
}

.image-description {
	display: flex;
	justify-content: left;
	align-items: center;
	flex-shrink: 1;
	padding: 5px;
	color: #999999;
	font-weight: bold;
}

/* ---- other text ---- */

.cards {
	border-radius: 25px;
	padding: 20px;
	width: auto;
	float: left;
	margin-bottom: 20px;
	box-shadow: 0 10px 10px 0 black, 0 6px 15px 0 grey;
	cursor: default;
}
  
 /* ---- aboutus ---- */
  
.us {
	float: left;
	width: 550px;
	}

	.us img{
		/* max-width: 100%; */
		max-width: 50%;
		display: block;
		margin-right: auto;
		margin-left: auto;
		}

.bio {
	float: left;
	width: 500px;
	padding-left: 10px;
	text-align: left;
	}

/* ---- other ---- */
.build {
	cursor: default;
}

/* ---- projects ---- */
		
.projects {
	float: left;
	width: 550px;
	cursor: default;
	}
	
	.projects img {
		max-width: 40%;
		max-height: 170px;
		margin-bottom: 5px;
		}
	
.build {
	cursor: default;
}

.build img {
		max-width: 100%;
		margin-bottom: 5px;
		}

/*---- other ---- */


/*---- loading dots ----*/
.page-load-status p {
	text-align: center;
}

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

.footer {
    color: #575757;
    text-align: left;
    font-size: 13px;
    padding: 15px;
}

.footer p {
	margin: 0px;
	}

.signoffleft {
	float: left;
	}
	
.signoffright {
	float: right;
	}

/* ---- social links ----*/
.social .fa-brands {
  padding: 5px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2px 5px 2px;
  border-radius: 25%;
}

.social .fa-brands:hover {
    opacity: 0.7;
}

.social .fa-facebook {
  background: #3B5998;
  color: white;
}

.social .fa-x-twitter {
  background: black;
  color: white;
}

.social .fa-instagram {
  background: #125688;
  color: white;
}

.social .fa-pinterest {
  background: #cb2027;
  color: white;
}

.social .fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.canvas {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.header  a{
		font-size: 10px;
		text-align: center;
	}
	
	nav {
		text-align: center;
		margin-bottom: 10px;
	}
	
	.container { 
		max-width: 100%; 
	}
	
	.build img {
		max-width: 100%;
		margin-bottom: 5px;
	}
		
	.build iframe {
		max-width: 100%;
	}
		
	.projects {
		width: auto;
	}
	
	.projects img {
		max-width: 100%;
	}
	
	.normalView {
		display: none;
	}
	
	.smallView {
		display: inline-block;
	}
	
	.dropbtn {
		background-color: #FFFFFF;
		color: #999999;
		padding: 5px 20px;
		font-size: 13px;
		border: none;
		cursor: pointer;
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		right: 0;
		background-color: #fcfcfc;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown-content button {
		color: #999999;
		width: 160px;
		font-size: 13px;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

	.dropdown-content, .button:active,
	.button.is-checked {
	  background: #e95a44;
			color:#fff;
			text-decoration: none;
			button:focus 
			outline:0;
	}

	button:focus {
		outline:0;
	}

	.button:active {
	  background: #e95a44;
			color:#fff;
	}

	.dropdown:hover .dropdown-content {
		display: block;
	}

	.dropbtn:hover, .dropbtn:focus {
		background-color: #999999;
		color: #FFFFFF;
	}

	.show {
		display:block;
	}
		
	.grid-sizer,
	.grid-item {
		width: 46%;
	}

	.photo-sizer,
	.photo-item {
		width: 47%;
	}

	.grid-item .label-text {
		color:#fff;
		position: relative;
		z-index:1;
		padding:5px 8px;
		font-size:8px;
	}
				
	.grid-item .text-category {
		display:block;
		font-size:8px;
	}

	.image-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		padding-top: 10px;
	}

	.us {
		float: left;
		width: auto;
	}

	.us img{
		width: 100%;
	}

	.bio {
		float: left;
		width: auto;
		padding: 25px;
		text-align: left;
	}
	
	.signoffright {
		float: left;
	}
	
	.signoffleft {
		padding-top: 5px;
		float: left;
	}
	.signoffleft img{
		display: none;
	}
		
	p.cali{
		display:none;
	}
	.signoffleft img{
		display: none;
	}
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.canvas {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	nav {
		text-align: center;
		margin-bottom: 10px;
	}
	
	.container { 
		max-width: 100%; 
	}
	
	p.cali{
		display:none;
	}
	.signoffleft img{
		display: none;
	}
}

/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.canvas {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.header  a{
		font-size: 14px;
	}
	
	.container { 
		max-width: 100%; 
	}
	
	.grid-sizer,
	.grid-item {
		width: 31%;
	}

	.photo-sizer,
	.photo-item {
		width: 48%;
		}
	
	.image-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		padding-top: 10px;
	}
	
	.us {
		float: left;
		width: 350px;
		padding-left: 25px;
	}

	.us img{
		width: 100%;
	}

	.bio {
		float: left;
		width: 300px;
		padding-left: 25px;
		text-align: left;
	}
	
	p.cali{
		display:none;
	}
	.signoffleft img{
		display: none;
	}
}

/* #Tablet (Landscape) */
@media only screen and (min-width: 960px) and (max-width: 1115px) {
	.canvas {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.header a{
		font-size: 20px;
	}
	
	.container { 
		max-width: 100%; 
	}
	
	.grid-sizer,
	.grid-item {
		max-width: 32%;
	}

	.photo-sizer,
	.photo-item {
		width: 49%;
	}
	
	.image-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		padding-top: 10px;
	}
	
	.us {
		float: left;
		width: 500px;
		padding-left: 25px;
		padding-top: 20px;
	}

	.us img{
		width: 100%;
		}

	.bio {
		float: left;
		width: 400px;
		padding-left: 50px;
		text-align: left;
	}
	
	p.cali{
		display:none;
	}
	
	.signoffleft img{
		display: none;
	}
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }