html{
  scroll-behavior: smooth;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 25px;
  color: #515151;
}


img{
  border: 0;
  max-width:100%;
}

a{
  text-decoration: none;
  cursor:pointer;
  transition:.7s color, .7s background-color, .7s opacity;
  color: #515151;
}
a:focus{
  outline: none;
}
a:hover{
  transition:.3s color, .3s background-color, .3s opacity;
  color:#8dacc6;
}

p{
  margin-bottom: 15px;
}

h2,h3{
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  line-height: 35px;
  font-weight: 400;
  color: #B6B6B6;
  margin: 40px 0;
  text-align:center;
}
h3:first-child{
  margin-top:0;
}


ul, ol{
  margin: 0 0 15px 30px;
}

.clear{ clear: both; }

.container{
  margin: 0 auto;
  width: 96%;
  max-width: 1700px;
}

.margined{
  margin: 70px auto;
}



.carousel-image {
  display: block;
  height:auto;
  width:auto;
  height: 100vh;

  min-width: 150px;
  max-width: none;

  top: 50%;
  transform: translateY(-50%);

  border-right: 10px solid #FFF;
}

.carousel.is-fullscreen .carousel-image {
  height: auto;
  max-height: 100%;
}


.home{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index: 9;
  padding: 30px 15vw;
}

.home h1 img{
  width: 300px;
}

.home ul{
  float:right;
  list-style-type:none;
  margin: 0 0 0 100px;
  text-align:right;
  display:block;
  font-family: 'Playfair Display', serif;
}
.home ul a{
  display:block;
  color:#FFF;
  margin-bottom: 10px;
}



.centered{
  text-align:center;
  width: 90%;
  margin: 30px auto;
  max-width: 600px;
}
.centered .display{
  max-width: 500px;
  margin: 0 auto 20px auto;
}

.line{
  height: 10px;
  background-color:#B6B6B6;
  margin: 80px 0;
}

.narrowline{
  border-bottom: 2px solid #B6B6B6;
  width: 50%;
  margin: 20px auto;
}

.flex{
  display:flex;
  flex-wrap:wrap;
}
.flex .half{
  width: 48%;
}
.flex .half.righthalf{
  margin-left: 4%;
}

.sidebar{
  width: 400px;
  padding-right: 200px;
  text-align:right;
}
.main{
  width: calc(100% - 400px);
  position:relative;
}

.sidebar h1{
  margin: 20px 0;
}

.sidebar ul{
  list-style-type:none;
}
.sidebar h1 + ul{
  margin: 380px 0 0 0;
}

@media only screen and (max-width: 1900px) {
  .sidebar h1 + ul{
    margin: 250px 0 0 0;
  }
}

.sidebar ul li{
  position:relative;
}
.sidebar ul li a{
  display:block;
  font-size: 20px;
  font-family: 'Playfair Display', serif;
  color:#515151;
  margin-top: 20px;
}
.sidebar ul li a.current{
  color:#B6B6B6;
}
.sidebar ul li a:hover{
  color:#8dacc6;
}

.sidebar ul li.subnav a{
  font-size: 15px;
  line-height: 20px;
  margin-top: 5px;
  position:relative;
  right: -20px;
}
.sidebar ul li.subnav.deep a{
  right: -40px;
}

.sidebar .stepper{
  width: 12px;
  position:absolute;
  top: 11px;
  right: -20px;
  opacity:.6;
}

.columns{
  column-count: 2;
  column-gap: 25px;
  margin-bottom: 25px;
}

.photo{
  display:block;
  position:relative;
  overflow:hidden;
  margin-bottom: 25px;
}
.photo img{
  display: block;
  width:100%;
}

.photo.maxw img{
  width: auto;
  max-width: 700px;
  max-height: 80vh;
  margin: 0 auto;
}

.photo .caption{
  display:block;
  position:absolute;
  right:0;
  bottom:-100px;
  background-color:rgba(182,182,182,.6);
  color:#FFF;
  padding: 10px 15px;
  font-style:italic;
  transition:.5s bottom;
}

.photo:hover{
  background-color:#f1f1f1;
}

.photo:hover .caption{
  bottom:0;
  transition:.5s bottom;
}

.colcontent{
  break-inside: avoid;
  margin-bottom: 50px;
}

.smallline{
  width: 70%;
  border-bottom: 1px solid #B6B6B6;
  margin: 60px auto;
}
.sublinks a{
  display:block;
  color:#8dacc6;
  font-style:italic;
  margin-bottom: 20px;
  font-size: 20px;
}
.sublinks a:hover{
  color: #8dacc6;
  font-weight:bold;
}

.quote{
  background-image: url('images/quote1.svg');
  background-position: left top;
  background-size: 60px auto;
  background-repeat: no-repeat;
  position:relative;
  left: 30px;
  margin-top: 750px;
}
.quote2{
  background-image: url('images/quote2.svg');
  background-position: right bottom;
  background-size: 60px auto;
  background-repeat: no-repeat;

  padding: 30px 20px;
  font-size: 15px;
  line-height: 20px;
  color: #B6B6B6;
}

.quote2 .name{
  font-style:italic;
  margin-top: 10px;
}

.bottom{
  margin: 120px auto 50px auto;
}
.bottom .sidebar{
  padding-right: 50px;
}

.footer{
  border-left: 1px solid #B6B6B6;
  padding-left: 50px;
  color: #B6B6B6;
}
.footer a{
  color:#B6B6B6;
}
.footer a:hover{
  color: #8dacc6;
}

.footer .social{
  margin-right: 25px;
}
.footer .social img{
  width: 48px;
}

.iris{
  width: 150px;
  position:absolute;
  top: 0;
  left: -122px;
  z-index:1;
}

.mobileheader{
  display:none;
}


.blogindex{
  display:flex;
  flex-wrap:wrap;
}

.blogindex .blog{
  width: 50%;
  padding: 0 12.5px;
}

.blogindex .blog.latest{
  width: 100%;
  padding:0;
}

.blog .blogimage{
  position:relative;
}
.blog .blogimage img{
  display:block;
  width:100%;
}
.blog .blogimage .blogheader{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:rgba(182,182,182,.6);
  padding: 10px 20px 20px 20px;
  text-align:center;
  color:#FFF;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  transition:.3s background-color, .3s padding;
}
.blog.latest .blogimage .blogheader{
  width: 80%;
  left: 10%;
}
.blog .blogimage .blogheader h2{
  font-size: 27px;
  color:#FFF;
  margin: 10px auto;
  max-width: 450px;
}
.blog .blogimage .blogheader .whiteline{
  border-bottom: 1px solid #FFF;
  margin: 10px auto;
  width: 80%;
  max-width: 300px;
}

.blog .blogcontent{
  margin: 25px 0;
  padding: 0 25px;
  border-bottom: 2px solid #B6B6B6;
  padding-bottom: 25px;
}
.blog.latest .blogcontent{
  columns: 2;
  column-gap: 25px;
}

a.blog .blogcontent p:last-child::after{
  content: '...';
}

a.blog:hover{
  color: #515151;
}
a.blog:hover .blogheader{
  background-color:rgba(182,182,182,.8);
  padding: 30px 20px 40px 20px;
  transition:.3s background-color, .3s padding;
}

.fancybox-caption{
  text-align:center;
}
.fancybox-caption a.printbutton{
  display: inline-block;
  background-color:#8dacc6;
  color:#FFF;
  padding: 20px;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
}
.fancybox-caption a.printbutton:hover{
  text-decoration:none;
}

.modal{
  max-width: 900px;
  padding: 40px;
}

.modal .thumb{
  max-width:300px;
}

.input, .textarea,.select{
  display:block;
  width:100%;
  border:1px solid #CCC;
  padding: 10px;
  margin-bottom: 15px;
  font-family: arial;
  font-size: 13px;
  background-color:#FFF;
}
.textarea{
  height:100px;
}
.button{
  border: 1px solid #CCC;
  padding: 10px 20px;
  font-style:italic;
  font-family: Roboto;
  font-weight:400;
  background-color:#FFF;
  color:#666;
  font-size: 18px;
  cursor:pointer;
  transition:.3s background-color;
}
.button:hover{
  background-color:#8dacc6;  
  color:#FFF;
  transition:.3s background-color;
}

.sent{
  position:absolute;
  z-index:5;
  top: 0;
  background-color:#8dacc6;
  width: 40%;
  left: 30%;
  padding: 20px;
  color:#FFF;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  text-align:center;
  border-radius: 0 0 5px 5px;
}

.flickity-button{
  background:none !important;
}


.narrow{
  max-width: 500px;
  margin: 0 auto;
}

.halffloat{
  float: left;
  width: 50%;
  padding-right: 12.5px;
}
.halffloat:nth-child(2n+2){
  padding-right:0;
  padding-left: 12.5px;
}
.halffloat h2{
  margin-top:0;
}

.back{
  display:block;
  position:absolute;
  right:0;
  top:0;
  background-color:#FFF;
  padding: 5px 20px;
  z-index: 9;
  opacity: .6;
}
.back:hover{
  opacity: 1;
}


.buttons{
  padding-top: 50px;
  font-family: 'Playfair Display', serif;
}
.buttons .top{
  float:right;
}

.introduction{
  margin: 40px auto;
  max-width: 700px;
  text-align:center;
}

.product{
  width: 24%;
  margin-right: 1.333333333333333%;
  margin-bottom: 1.333333333333333%;
  background-size:cover;
  background-position:center center;
  background-repeat: no-repeat;
  position:relative;
  background-color:#8dacc6;
  
}
.product:nth-child(4n+4){
  margin-right:0;
}

.product:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.product .title{
  display:flex;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  align-items:center;
  text-align:center;
  background-color:rgba(141,172,198,.3);
  opacity: 0;
  transition:.3s opacity;
}
.product .title span{
  display:block;
  width:100%;
  text-align:center;
  color:#FFF;
}

.product .price{
  position:absolute;
  right:0;
  bottom:0;
  background-color:rgba(255,255,255,.7);
  padding: 10px;
}

.product:hover{
  background-size:contain;
  transition:.3s background-size;
}
.product:hover .title{
  opacity: 1;
  transition:.3s opacity;
}

.productphotos{
  width: 40%;
}
.productphotos img{
  display:block;
  width:100%;
  margin-bottom: 30px;
}

.productdetails{
  width: 55%;
  margin-left: 5%;
}
.productoption{
  display:block;
  margin-bottom: 5px;
}
.productoption:last-of-type{
  margin-bottom: 25px;
}
.productoption .price{
  color:#8dacc6;
}

.purchase{
  background-color:#F8FAFC;
  padding: 25px;
  margin: 40px 0;
}
.purchase h3{
  color:#8dacc6;
  text-align:left;
}


.carttable{
  border-collapse:collapse;
  width:100%;
}
.carttable td{
  padding: 10px;
  border-bottom: 1px solid #CCC;
}
.carttable td.heading{
  background-color: #8dacc6;
  color:#FFF;
}
.carttable img{
  max-width: 100px;
  max-height: 100px;
}
.carttable input{
  text-align:right;
}

.home-shop-button{
  display: block;
  border: 2px solid #FFF;
  background-color:rgba(255,255,255,.5);
  color:#FFF;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;

  font-size: 25px;
  padding: 20px 0;
  position:absolute;
  top: 80vh;
  left: calc(50% - 100px);
  width: 300px;
  text-align:center;
  z-index: 99;
}
.home-shop-button:hover{
  color:#FFF;
  background-color: rgba(100,100,100,.6);
}