@charset "UTF-8";
/* CSS Document */

.header {
	background-color: #00758d;
	margin-top: -10px;
}

h1 {
	font-family: "Copse", serif;
	font-size: 35px;
	margin-top: 25px;
}

h2 {
	font-family: "Copse", serif;
	color: #00758d;
	font-size: 26px;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

h3 {
	font-family: "Copse", serif;
	color: #000;
	font-size: 23px;
	margin-top: -1px;
}


p.bodytext {
	font-size: 17px;
	line-height: 29px;
}
p.pricetext {
	font-size: 17px;
	margin-top: -10px;
}

p.dates {
      font-family: "Copse", serif;
	color: #ffb359;
}

.margintop50 {
      margin-top: 50px;
}

a {
	text-decoration: underline;
	color: #ffb359;
}

a:hover {
	color: #fff;
}

a.whitebkg {
      text-decoration: underline;
	color: #ffb359;
}

a.whitebkg:hover {
      color: #00758d
}

a.link-teal {
	color: #00758d;
	font-size: 24px;
	font-family: "Arial", sans-serif;
}
a.link-teal:hover {
	color: #FFB359;
	text-decoration: none;
}

.navbar {
	font-size: 1.2em;
	padding: 15px 30px 15px 30px;
	color: #fff!important;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link {
	color: #fff;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
	color: #FFB359;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
	color: #FFB359;
}

.nav-link {
	color: #fff;
	padding: 1rem;
}

.nav-item.active {
    color: #ffb359!important;
}

.interior-container {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.container {
	width: 40%;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: 5rem;
	color: #000;
}

.highlight {
	color: #ffb359;
}

footer {
	background-color: #00758d;
	padding: 40px 0;
	margin-top: 50px;
}

.text-center {
	text-align: center;
}

.social {
	margin-top: 20px;
}

.btn-info {
	margin-top: 25px;
}

.fa {
    padding: 5px;
  	font-size: 30px;
  	width: 40px;
  	text-align: center;
  	text-decoration: none;
  	margin: 5px 2px;
	border-radius: 3px;
}
.fa:hover {
    background: #fff;
	text-decoration: none;
	color: #00758d;
}

/*
.fa-facebook {
  background: #ffb359;
  color: white;
}

.fa-twitter {
	background: #ffb359;
  	color: white;
}
.fa-instagram {
	background: #ffb359;
  	color: white;
}
*/

.form-field {
	width: 65%; 
	height: 53px; 
	margin: 0 15px 0 0; 
	padding-left: 20px;
	border: none; 
	vertical-align: middle;
}
.submit {
	width: 30%; 
	background-color: #ffb359!important; 
	text-transform: uppercase; 
	font-size: 24px!important; 
	color: white!important; 
	border: none!important; 
	font-weight: 100; 
	padding: 10px 0!important; 
	vertical-align: middle;
	font-family: Arial, sans-serif;
}

.submit:hover {
	background-color: #e5a150;
}

.top {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
      width: 85%;
}

.bottom {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 85%;
}

/*.container:hover .image {
  opacity: 0.3;
} */

.shop {
    position: relative;
}
.shop:hover .top {
  opacity: 1;
}
.shop:hover .bottom {
  opacity: 1;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.text {
  background-color: #00758d;
  color: white;
  font-size: 18px;
  padding: 16px 30px;
  width: 200px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-weight: lighter;
}

.text:hover {
  background-color: #ffb359;
}

.txt-btn {
	background-color: #00758d;
	color: white;
	font-size: 16px;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	padding: 10px 20px;
}

.txt-btn:hover {
	background-color: #ffb359;
	text-decoration: none;
	color: white;
}

.shopify-buy__btn {
      text-transform: uppercase;
}


.product-title {
	font-family: 'Copse', serif;
	color: #FFB359;
	font-size: 20px;
	margin-top: 30px;
}

.colorize-teal {
      background: #00758d;
      color: white;
}

.cropped {
    width: 100%; /* width of container */
    height: 150px; /* height of container */
    object-fit: cover;
    object-position: 20% -80px; 
}

/* Carousel CSS */

.carousel-inner img {
    width: 100%;
    height: 100%;
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px;
}

#custCarousel .carousel-indicators>li {
    width: 100px;
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1;
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
}

.carousel-item img {
          width: 100%;
}

.shopify-buy-frame--product {
    max-width: none!important;
}

.jumbotron {
		  color: white;
		  background-image: url("/img/hero-img.png");
		  background-position: bottom right;
		  background-repeat: no-repeat;
		  background-size:100% auto;
		  background-color: #c5c7c7;
		  height: 75vh;
		  display: flex;
		}
			
			@media (max-width: 500px) {
				.container {
					width: 100%;
					padding: 0;
					margin-left: 1rem;
				}
				
				.jumbotron {
					height: 90vh;
				}
			}
			
			@media (max-width: 1000px) {
				.container {
					width: 80%;
					padding: 0;
					margin-left: 1.5rem;
				}
				
				.jumbotron {
					height: 100vh;
				}
			}
			
.shop-soap {
	background-image: url("/img/shop-soap.png");
	background-position: center;
	background-size: cover;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 100px 15px;
	text-align: center;
}

.shop-soap a {
	text-decoration: none;
	color: #fff;
}

.shop-soap a:hover {
	text-decoration: none;
color: #FFB359;
}

.shop-body {
	background-image: url("/img/shop-body.png");
	background-position: center;
	background-size: cover;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 100px 15px;
	text-align: center;
}

.shop-body a {
	text-decoration: none;
	color: #fff;
}

.shop-body a:hover {
	text-decoration: none;
	color: #FFB359;
}

.shop-tumblers {
	background-image: url("/img/shop-tumblers.png");
	background-position: center;
	background-size: cover;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 100px 15px;
	text-align: center;
}

.shop-tumblers a {
	text-decoration: none;
	color: #fff;
}

.shop-tumblers a:hover {
	text-decoration: none;
	color: #FFB359;
}

.shop-crafts {
	background-image: url("/img/shop-crafts.png");
	background-position: center;
	background-size: cover;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 100px 15px;
	text-align: center;
}

.shop-crafts a {
	text-decoration: none;
	color: #fff;
}

.shop-crafts a:hover {
	text-decoration: none;
	color: #FFB359;
}