/* ==================== preloader ==================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
    background-color: #fff;
    z-index: 100;
}

#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(../images/load.gif);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px; /* width and height divided by two */
}

/* ==================== global styles ==================== */
body {
  font-family: 'OpenSansLt', "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #1e2024;
  font-weight: 400;
  background-color: #ffffff;
  padding-right: 0 !important;
}

a {
  color: #4fbfa8;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #348e7b;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:link, a:visited, a:hover {
	text-decoration: none !important;
}

.btn-link:link, .btn-link:visited {
	text-decoration: none !important;
}

ul {
  padding-inline-start: 0px !important;
}

.bfade {
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -ms-animation-duration: 300ms;
  animation-duration: 300ms;
}

hr {
  margin-top: 22px;
  margin-bottom: 22px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

section {
  position: relative;
  height: 100% !important;
  width: auto;
  overflow: hidden;
  padding: 3.5em 0;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.section-gray {
  background: #eeeeee;
}

.img-responsive {
  margin: 0 auto;
}

.img-rounded {
  border-radius: 0;
}

.vcenter {
	display: inline-block;
	vertical-align: middle;
	float: none;
}

.point {
  cursor: pointer;
}

.modal-title {
  font-family: 'FortBook', Verdana, sans-serif;
  font-size: 2.75em;
  letter-spacing: -0.04em;
  font-weight: 400;
  font-style: oblique;
}


/* ================ buttons =============== */
.btn {
  font-weight: normal;

  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.42857143;
  border-radius: 0;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 0;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0;
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0;
}

/* ================ type =============== */
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 0;
  margin-bottom: 22px;
}

p {
  margin: 0 0 22px;
}

.lead {
  margin-bottom: 22px;
  font-size: 18px;
}

.text-small {
  font-size: 12px;
}

.text-large {
  font-size: 20px;
}

.text-italic {
  font-style: italic;
}

.text-primary {
  color: #4fbfa8;
}

a.text-primary:hover {
  color: #3aa18c;
}

.bg-primary {
  color: #fff;
  background-color: #4fbfa8;
}

a.bg-primary:hover {
  background-color: #3aa18c;
}

abbr[title],
abbr[data-original-title] {
  border-bottom: 1px dotted #999999;
}

blockquote {
  padding: 11px 22px;
  margin: 0 0 22px;
  font-size: 16px;
  border-left: 5px solid #4fbfa8;
}

blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #999999;
}

blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}

.blockquote-reverse,
blockquote.pull-right {
  border-right: 5px solid #4fbfa8;
}

address {
  margin-bottom: 22px;
  line-height: 1.42857143;
}

.panel {
    margin-bottom: 22px;
    background-color: transparent;;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.panel-primary {
  border-color: #4fbfa8;
}

.panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #4fbfa8;
  border-color: #4fbfa8;
}

.panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #4fbfa8;
}

.panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #4fbfa8;
}

.panel-primary .panel-title {
  font-weight: 300;
}

.panel-primary .panel-title a:hover {
  color: #fff;
  text-decoration: none;
}

a.badge:hover,
a.badge:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #4fbfa8;
  background-color: #ffffff;
}

.italic {
  font-style: italic;
}

.heading {
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.5em;
}

.heading:after {
  content: " ";
  display: block;
  width: 150px;
  height: 1px;
  margin: 5px auto;
  background: #4fbfa8;
}

h2.heading {
  font-size: 2.5em;
}

#special {
  color: #fff !important;
}

.bob {
  visibility: hidden;
}


/* ===================  social icons  ======================================= */
.socialBar {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0 !important;
}

p.social a.email {
  background-color: #4a7f45;
}

.socialBar .fab {
	padding-right:0;
}

.socialBar a  {
  margin-left: 0.25em;
  margin-right: 0.25em;
  margin-bottom: 1.25em;
}

.bigBadge {  /* === Note that this a combined tag, not a hierarchy tag like .badge .social */
	background: #cccccc;
	font-size: 1.2em;
	height: 2.0em;
	width: 2.0em;
	text-align: center;
	line-height: 2.1em;
	padding: 0;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	color: #ffffff;
	display: inline-block;
	min-width: 10px;
	font-weight: bold;
	white-space: nowrap;
	vertical-align: baseline;
}

.twitter {
	background: #1da1f2;
	color: #ffffff !important;
}

.etsy {
	background: #f1641e;
	color: #ffffff !important;
}

.pinterest {
	background: #cb2027;
	color: #ffffff !important;
}

.instagram {
	background: #9b6954;
	color: #ffffff !important;
}

.socialBar a:visited {
	color: #ffffff;
}

.socialShare {
	margin-top: 0 !important;
}

/* ======================= section styles ======================= */
section#page1 {
    height: 100vh !important;
}

#page1 {
  text-align: center;
  background: url('../images/cover.jpg') center center no-repeat;
  background-size: cover;
  background-position: 47% 50%;
  color: #fff;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  z-index: 2;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.cover {
	font-family: "Carbo", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    color: #ffffff !important;
    font-weight: 500;
}

#page1 h1 {
    font-family: 'Italiana', sans-serif !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.08em !important;
    font-size: 4.0em;
}

#page1 p {
  font-size: 2.0em;
}

#page1 .icon {
  position: absolute;
  bottom: 15%;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: solid 2px #fff;
  border-radius: 20px;
  z-index: 3;
}

#page1 a {
    color: #fff !important;
}

i.fa.fa-angle-double-down {
    font-size: 1.5em !important;
}

.section-header {
	margin-top: 0;
	margin-bottom: 1.0em;
}

#work h1 {
  font-size: 3.0em;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
}

.tag {
  color: #ffffff;
}

.close {
  opacity: 0.4 !important;
}

.modal-footer p{
  font-size: 1.5em !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.about p {
  font-weight: 400;
  font-size: 1.2em;
}

/* ======================= product section styles ======================= */

#salesItem {
text-align: center;
background-color: #ffffff;
}

.overlay2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}

section.product {
  height: 85vh !important;
}

/* #salesItem img {
	box-shadow: 0.375em 0.375em 1.0em 1.0em #4fbfa8;
} */

.product h2 {
  font-family: 'LucidaHand', sans-serif !important;
  color: #1e2024 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  font-size: 4.0em;
}

.homey {
  color: #222;
  font-size: 1.5em;
}


/* ======================== isotope css ======================== */
.isoback {
  /* background-color: #262932; */
  background-color: #080510;
  /* background-color: #222; */
  width: 100%;
}

.picmenu {
  padding-bottom: 2em;
}

#isosection img {
	cursor: pointer;
}

/* #isosection a img {
	box-shadow: 0.75em 0.75em 0.625em #888888;
} */

#filters .btn-sm {
	background-color: #363942;
	color: #7f7f7f;
	font-size: 1.25em;
	font-weight: bold;
	padding: 10px 13px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#filters li {
	display: inline-block;
	list-style: none;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.portfolioFilter a.current {
	background-color: #ef4a4a !important;
	color: #fff !important;
}

#filters a:hover {
	background-color: #fff;
}

#filters .btn:focus, #filters .btn:active {
	outline: none;
  box-shadow: none;
}

#filters a:focus {
	background-color: #ef4a4a;
	color: #fff;
}

#filters .btn:active, filters .btn:active::after {
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  
}

#filters li:active {
  padding: 0 !important;
}

.portfolioContainer img {
	margin: 15px 0 !important;
}

#isosection {
	padding: 0 !important;
}

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}


/* =================== @media ==================== */
@media screen and (min-width: 1200px) {
  .copyright {
    margin-top: 60px;
  }
}

@media screen and (min-width: 1022px) and (max-width: 1200px) {
  #page1 h1 {
    font-size: 5.0em;
    font-weight: 600 !important;
  }

  #page1 p { 
    font-size: 3.25em !important;  
  }
}

@media screen and (min-width: 769px) and (max-width: 1020px) {
  #page1 .row div {
      -webkit-transform: translateY(17px);
      -moz-transform: translateY(17px);
      -ms-transform: translateY(17px);
      transform: translateY(17px);
      z-index: 20 !important;
  }

  #page1 h1 {
    font-size: 4.0em;
    font-weight: 600 !important;
  }

  #page1 p { 
    font-size: 2.75em !important;  
  }

  .modal-title {
		font-size: 2.0em !important;
	}

  .copyright {
    margin-top: 3.0em;
  }

  section.product {
    height: 70vh !important;
  }
}

@media screen and (max-width: 768px) {
  .text-center-xs {
    text-align: center !important;
  }

  .text-center-xs img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .lead {
    font-size: 24px;
  }

  #page1 h1 {
    font-size: 3.0em;
    font-weight: 600 !important;
  }

  .modal-title {
		font-size: 1.5em !important;
	}

  .copyright {
    margin-top: 3.0em;
  }

  section.product {
    height: 60vh !important;
  }
}

@media screen and (max-width: 601px) {
  body {
    width: 100vw !important;
  }
  
	#page1 p { 
    font-size: 2.0em !important;  
  }
 
  .bottom {
		padding-top: 15px;
	}

  .portfolioContainer img {
    margin: 15px 30px !important;
  }
}  

@media screen and (max-width: 480px) {  
  .phone {
		display: none;
	}

  img {
		margin-left: auto !important;
		margin-right: auto !important;
	}

  #filters li {
		padding-top: 1.0em !important;
		padding-bottom: 1.0em !important;
		padding-left: 0.125em !important;
		padding-right: 0.1255em !important;
	}

	#filters .btn-sm {
		font-size: 0.8375em !important;
		padding: 10px 13px;
	}

	.portfolioContainer img {
		margin: 15px 0px !important;
	}

  .about p {
    font-size: 1.25em !important;
  }

  .modal-footer p {
    font-size: 1.25em !important;
  }

}