/*
Theme Name: The Page Edit
Author: Katie Fiddler
Text Domain: thepageedit
Description: the latest theme for the page edit blog
Version: 1.0.1
*/


*, *:before, *:after {
	box-sizing: border-box;
}

:root {
	/* variables */
	spacing: 24px;
	min-card-width: 250px;
	ratio-percent: 75%;
	addl-height: 100px;
}

body {
	color: #22262a;
	background-color: #fff;
	font-family: "Amiri", serif;
	font-size: 17.6px;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.5;
}

h1 {
  font-family: freight-big-pro, serif;
  font-size: 44px;
  font-weight: 500;
  text-align:center;
}

h2 {
  font-family: freight-big-pro, serif;
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
}

h3 {
  font-family: freight-big-pro, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  opacity: .9;
  margin: 0;
}

h4 {
  font-family: freight-big-pro, serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 15px;
  opacity: .8;
  margin: 0;  
  color: #999999;
}

small {
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: 13px;
    color: #303030;
    text-transform: uppercase;
}

/* Links */

a {
    color: #303030;
    text-decoration: none;
}

a:hover {
    opacity: .7;
    transition: all .3s;
}

small a {
    font-family: "Ubuntu Condensed", sans-serif;
    font-size: 13px;
    color: #303030;
    text-transform: uppercase;
}

small a:hover {
    opacity: .7;
    transition: all .3s;
}

a.button{
  display:inline-block;
  padding:0.35em 1.2em;
  border:0.1em solid #000000;
  background-color: #000000;
  margin:0 0.3em 0.3em 0;
  border-radius:0.12em;
  box-sizing: border-box;
  text-decoration:none;
  text-transform: uppercase;
  font-family:'Roboto',sans-serif;
  font-weight: 600;
  font-size: 0.75em;
  color:#FFFFFF;
  text-align:center;
  letter-spacing: 3px;
  transition: all 0.2s;
}

a.button:hover{
 color:#000000;
 background-color:#FFFFFF;
 border: #FFFFFF;
}

@media all and (max-width:30em){
  a.button{
  display:block;
  margin:0.4em auto;
 }
}

.vl {
    border: 1px solid black;
    height: 180px;
    float: right;
    margin-right: 100px;
}

.hr {
    border: 1px solid black;
    width: 180px;
}

.section {
    padding: 8rem 9 7rem;
    text-align: center;
}

.section-header h2 {
    font-family: freight-big-pro, serif;
    text-align:center;
    font-size: 55px;
    font-style: italic;
    text-transform: uppercase;
}

@media (min-width: 720px) {
    .entry {
        padding: 10px 145px;
    margin: 10px;
    }
}

.entry {
    padding: 10px;
    margin: 10px;
}

.wp-block-image img {
    max-width:100%;
    height:auto
    
}

/*HEADER====================================================================*/

.header-main {
    display: flex;
    position: sticky;
    position: -webkit-sticky;
    top:0;
    width: 100%;
    justify-content: center;
    align-content: center;
    background-color: #fff;
    align-items: center;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    z-index:1000;
}

.header-main > div {
    text-align: center;
}

.nav-up {
  top: -70px;
}

.follow,
.follow a,
.header-main nav a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
  font-family: "Amiri", serif;
  font-weight: 400;
  font-size: 17px;
  color: #303030;
  font-style: italic;
  text-decoration: none;
  line-height: 14px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.header-main a:hover {
  opacity: .7;
  transition: all .3s;
}

.header-main > a:hover {
  opacity: .7;
  transition: all .3s;
}

.header-main li {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    list-style-type: none;
    list-style-image: none;
}

.header-main ul {
    display: inline-block;
    list-style-type: none;

}

.navigation {
      display: none;
    } 
    
.logo {
    display: inline-block;
    vertical-align: middle;
    align-content: center;
}

.follow {
    display: none;
}

.shop {
    display: none;
}

/* Larger than mobile */

@media (min-width: 550px) {
    .follow {
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        position: absolute;
        right: 10;
        top: 20;
        padding-right: 25;
        cursor: pointer;
        transition: all .3s;
    }
    
    .navigation {
      display: inline-block;
      vertical-align: middle;
      position: absolute;
      top: 30;
      left: 50;
      cursor: pointer;
      transition: all .3s;
    } 
    
    .shop {
      display: inline-block;
      position: absolute;
      vertical-align: middle;
      right: 10;
   }
    
}

/*Secondary Header and Posts----------------------------------------------------------------*/

.header-secondary {
    display: grid;
    grid-template-columns: 100%;
    position: absolute;
    align-items: center;
    background-color: none;
}

.post-header {
    display: grid;
    grid-template-columns: 25% 75%;
}

.post-header .post-logo img {
    width: 200px;
    height: auto;
    padding: 95px 0px 150px 25px;
}

.post-header .secondary-image img {
    width: 1000px;
    height: 500px;
    object-fit: cover;
    opacity: .5;
    margin: 0px;
    padding: 0px;
}

.post-header hr {
    margin: -150px 0px 0px 25px;
    z-index: 10;
    width: 600px;
    
}
.post-content {
    display: grid;
    grid-template-columns: 45% 55%;
} 

.post-content {
	  -moz-column-count: 3;
	  -moz-column-gap: 10px;
	  -moz-column-rule: none;
	  -webkit-column-count: 3;
	  -webkit-column-gap: 10px;
	  -webkit-column-rule: none;
	column-count: 3;
	column-gap: 10px;
	column-rule: none;
	}
	
	
.post-content .featured-image {
    width: 600px;
    height: auto;
    z-index: 2;
}

.post-header .post-logo .post-title {
    padding: 125px 0px 0px 25px;
    margin: 30px;
    text-align: center;
}

.post-title {
    margin: 30px;
    text-align: center;
}

.single-post {
    margin: 10px;
}

@media (min-width: 720px) {
.single-post {
    margin: 0px 60px;
    }
}


.post-header .post-logo .post-title .small a {
    text-decoration: none;
    color: #999999;
}

.post-title h1 {
    font-family: freight-big-pro, serif;
    font-style:italic;
    margin-bottom: -10px;
    text-transform: uppercase;
}

.social-icons {
    margin: 10px 25px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
}

.svg-icon {
  width: 1em;
  height: 1em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #333;
}

.svg-icon circle {
  stroke: #333;
  stroke-width: 1;
}

.textarea #comment {
    width: 100%;
    border: 1px solid #ddd;
    font-family: ubuntu-condensed, sans-serif;
}

#commentform textarea#comment { 
    width: 100%;
    border: 1px solid #ddd;
    font-family: ubuntu-condensed, sans-serif;
}

#respond.comment-respond {
    margin: 50px;
}

.input #submit {
	background-color:#ededed;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:ubuntu-condensed, sans-serif;
	font-size:15px;
	padding:5px 30px;
	text-decoration:none;
}
.input #submit:hover {
	background-color:#dfdfdf;
}
.input#submit:active {
	position:relative;
	top:1px;
}

/*Hamburger + Flyout Menu===================================================*/
/*Flyout*/

body.overlay header#header-main {
    background: none;
}

body.overlay header#header-secondary {
    background: none;
}

#overlay-menu {
    background: #F9F9F9;
    width: 45%;
    height: 100%;
    position: fixed;
    z-index: 100;
    padding-top: 75px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    box-shadow: 17px 20px 45px 9px rgba(0,0,0,0.34);
}

@media (min-width: 720px) {
#overlay-menu {
    background: #F9F9F9;
    width: 35%;
    height: 100%;
    position: fixed;
    z-index: 100;
    padding-top: 75px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    box-shadow: 17px 20px 45px 9px rgba(0,0,0,0.34);
    }
}


#overlay-menu.active {
    opacity: 1;
    visibility: visible;
}

.overlay-menu-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.64);
    visibility: hidden;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
}

.overlay-menu-shade.active {
    opacity: 1;
    visibility: visible;
}

#secondary-nav li {
    font-size: 22px;
    font-family: freight-big-pro, serif;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    margin-left: 20px;
    padding: 10px 5px 5px 0px;
    text-decoration: none;
    vertical-align: middle;
    list-style-type: none;
    list-style-image: none;
}

#secondary-nav a:hover {
    opacity: .7;
    transition: all 0.2s;
}

/*Dropdown Search, Follow, Newsletter*/

body.overlay header#header-search {
    background: none;
}

.header-searchform {
    background: #F9F9F9;
    width: 100%;
    top: 100%;
    left: 0;
    height: 160px;
    padding: 38px 24px 56px 24px;
    border-bottom: solid 1px
    rgba(0,0,0,0.1);
    overflow:hidden;
    position: fixed;
    z-index: 100;
    padding-top: 75px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
}

.header-search.active {
    opacity: 1;
    visibility: visible;
}

.search#submit {
    background-color:#e8e8e8;
	border:1px solid #b2b8ad;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:17px;
	padding:10px 30px;
	text-decoration:none;
}
.search#submit :hover {
	background-color:#c7c7c7;
}
.search#submit :active {
	position:relative;
	top:1px;
}

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

.search-form .search-submit {
	background-color:#e8e8e8;
	border:1px solid #b2b8ad;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:ubuntu-condensed, san-serif;
	font-size:17px;
	padding:10px 30px;
	text-decoration:none;
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 
.hamburger {
  padding: 15px 15px;
  position: absolute;
  left: 0;
  top: 7;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  z-index: 1000;}
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 1px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Spin Reverse
   */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
    

/*Header Controls============================================================*/

.search-trigger,
.follow-trigger,
.newsletter-trigger {
   display: inline-block; 
}
 
.search-trigger:active {
    
}
 .search-trigger.is-active:hover,
 .follow-trigger .is-active:hover,
 .newsletter-trigger .is-active:hover {
     opacity: 0.7; }
     .search-trigger.is-active,
     .follow-trigger.is-active,
     .newsletter-trigger.is-active{
        opacity: 0.7;
 }
 
.header-search,
.header-follow,
.header-newsletter {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.header-search.active,
.header-follow.active,
.header-newsletter.active{
    opacity: 1;
    visibility: visible;
    
}

.header-search .wrapper,
.header-follow .wrapper,
.header-newsletter .wrapper{
    max-width: 100%;
    width: 100%;
    position: fixed;
    z-index: 100;
    padding-top: 10px;
    
}

#searchsubmit {
    display: none;
}

input#s {
    font-family: amiri, serif;
    font-weight: 300;
    font-size: 52px;
    border: 0;
    line-height: 52px;
    text-align:center;
    padding: 0 140px 4px;
    width: 100%;
    background-color: #f7f5f2;
    opacity: 0.9;
    display: block;
    border-bottom: solid 1px #000;
    border-radius: 0;
}

.follow-results .img {
    display: inline-block;
    height: 200px;
}

.follow-results {
    height: 200px;
    font-family: amiri, serif;
    font-weight: 300;
    font-size: 18px;
    font-style: italic;
    line-height: 28px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px rgba(47, 41, 42, 0.1);
    /*opacity: 0.9;*/
    display: block;
}

.newsletter-results {
    font-family: amiri, serif;
    font-weight: 300;
    font-size: 18px;
    font-style: italic;
    text-align:center;
    line-height: 28px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px rgba(47, 41, 42, 0.1);
    /*opacity: 0.9;*/
    display: block; 
}

.ig-posts {
    display: inline-block;
    vertical-align: top;
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgba(0, 0, 0, 0.1);
    padding-right: 24px;
 
}

.header-follow-links {
    width: 300px;
    display: inline-block;
    vertical-align: top;
    margin: 12px 0 0 24px;
  
}

.header-follow-links a {
    display: block;
}


/*Featured Content============================================================*/

.featured-post {
    margin: 15px;
    padding: 15px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.featured-post-left {
    position:relative;
    top: auto;
    height: auto;
    margin: 10px;
    width: 100%;
    object-fit: contain;
}

.featured-post-left .img {
    width: 100px;
    height: auto;
    object-fit: cover;
}

 img:hover {
    opacity: .8;
    transition: all .3s;
}

.featured-content {
    background-color: #e8e2da;
    height: auto;
    text-align: justify;
    margin: -100px 10px 10px 10px;
    width:auto;
    text-align:center;
    position:absolute;
}


 .featured-content h3 {
  font-family: "Amiri", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  margin: 10;
}

/* .featured-content h2 {
  font-family: "Amiri", serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  margin: 15px 0 0;
}*/

 .featured-content p {
  font-family: "Amiri", serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 23px;
  margin: 16px 0 0;
}

.featured-content a {
  font-family: "Amiri", serif;
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
  color: #000;
  line-height: 14px;
}

.featured-content a:hover {
    opacity: .7;
}

.featured-content a.button{
  display:inline-block;
  padding:0.35em 1.2em;
  border:0.1em solid #000000;
  background-color: #000000;
  margin:0 0.3em 0.3em 0;
  border-radius:0.12em;
  box-sizing: border-box;
  text-decoration:none;
  text-transform: uppercase;
  font-family:'Roboto',sans-serif;
  font-weight: 300;
  font-size: 0.75em;
  color:#FFFFFF;
  text-align:center;
  letter-spacing: 4px;
  transition: all 0.2s;
}

.featured-content a.button:hover{
 color:#000000;
 background-color:#FFFFFF;
 border: #FFFFFF;
}

@media all and (max-width:30em){
  a.button{
  display:block;
  margin:0.4em auto;
 }
}

.small-text-right {
    visibility: hidden;
}

@media (min-width: 720px) {
.small-text-right {
    visibility:visible;
    z-index: 100;
    position: relative;
}
.small-text-right small {
    float: right;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: sideways-right;
    font-size: 20px;
    margin-top: 160px;
    margin-right: -15px;
    display: inline-block;
    z-index:10;
    }
}


@media (min-width: 720px) {
    .featured-post-left {
        position: relative;
        top: auto;
        margin: 10px;
        width: 100%;
        height:600px;
        object-fit: contain;
        -webkit-transition: all .7s;
        transition: all .7s;
        z-index: 2;
    }
    
    .featured-content {
        background-color: #e8e2da;
        height: 400px;
        padding: 80px 50px 40px 180px;
        margin: 100px 60px 100px -180px;
        z-index: -10;
        text-align:justify;
        width:auto;
        position:absolute;
    }
}

@media (min-width: 960px) {
.featured-post-left {
        position: relative;
        top: auto;
        margin: 10px;
        width: 100%;
        height:600px;
        object-fit: contain;
        -webkit-transition: all .7s;
        transition: all .7s;
        z-index: 2;
    }
    
    .featured-content {
        background-color: #e8e2da;
        height: 400px;
        padding: 80px 40px 40px 200px;
        margin: 100px 60px 100px -200px;
        z-index: -10;
        text-align:justify;
        width:auto;
        position:absolute;
    }
}

@media (min-width: 1200px) {
  .featured-post-left {
        position: relative;
        top: auto;
        margin: 10px 40px 10px -100px;
        width: 100%;
        height:600px;
        object-fit: contain;
        -webkit-transition: all .7s;
        transition: all .7s;
        z-index: 2;
    }
    
    .featured-content {
        background-color: #e8e2da;
        height: 400px;
        padding: 80px 180px 40px 80px;
        margin: 100px 60px 100px -200px;
        z-index: -10;
        text-align:justify;
        width:auto;
        position:absolute;
    }
}

.featured-middle-container {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: max-content;
    grid-gap: 30px;
    margin: 10px 60px 10px 60px;
    padding-bottom: 35px;
    /*border-bottom: solid 1px rgba(0, 0, 0, 0.1);*/
}

.related-posts-container {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-template-rows: max-content;
    grid-gap: 30px;
    margin: 10px 60px 10px 60px;
    padding-bottom: 35px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.featured-middle,
.related-posts {
    display: block;
}

.featured-middle-container .featured-middle .featured-middle-image {
    height: 360px;
    overflow: hidden;
}

.related-posts-container .related-posts .related-posts-image {
   height: 260px;
    overflow: hidden; 
}

.featured-middle-container .featured-middle .featured-middle-image img,
.related-posts-container .related-posts .related-posts-image img {
    top: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    -webkit-transition: all .7s;
    transition: all .7s;
}

.featured-middle-title a:hover {
    opacity: .5;
}

.featured-middle-title,
.related-posts-title h3 {
  font-family: freight-big-pro, serif;
  font-weight: 400;
  margin: 5px;
  color: #000;
  font-size: 26px;
  line-height: 26px;
  text-align: center;
}

.featured-middle-title h4 {
  font-family: "Amiri", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 26px;
  font-style:italic;
}

@media (min-width: 720px) {
.featured-shop {
    margin: 5px 60px 25px 60px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    }
}

.featured-shop {
    margin: 10px;
}



/*Comments Dropdown===================================================*/

.comments-trigger {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    padding: 24px 0;
}

.comments-trigger.is-active:hover {
    opacity:0.7; }
    .comments-trigger.is-active{
        opacity:0.7;
    }

.comments-trigger h2 {
    position: relative;
    text-align:center;
    transition: all 0.3s;
}

.comments-results {
    font-family: ubuntu-condensed, sans-serif;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    display: block;
    position:absolute;
    transition: all 0.3s;
}

.comments-results.active {
    visibility: visible;
    opacity: 1;
    position:relative;
}

.comments-results .wrapper {
    max-width: 100%;
    width: 100%;
    position: fixed;
    padding-top: 10px;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


/*Footer===============================================================*/

.footer-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 25px;
    align-items: center;
    text-align: center;
    background-color: #fff;
}

.footer-main > div {
    text-align: center;
}

.footer-main a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
  font-family: "Amiri", serif;
  font-weight: 400;
  font-size: 15px;
  color: #303030;
  font-style: italic;
  text-decoration: none;
  line-height: 14px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.footer-main a:hover {
  opacity: .7;
  transition: all .7s;
}

.footer-main > a:hover {
  opacity: .7;
  transition: all .7s;
}

/*ABOUT=========================================================*/

.about {
    margin: 15px;
    padding: 80px 15px 15px 15px;
}

.about-left {
    position:relative;
    
}
.about-left img {
    top: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
    
    z-index: 2;
}


.about-left img:hover {
    opacity: .8;
    transition: all .7s;
}


.about-content {
    /* original background-color: #eedbc6; */
    background-color: #e8e2da;
    height: auto;
    padding: 10px;
    margin: 10px;
    text-align: justify;
}

@media (min-width: 720px) {
    .about-content {
        height: 300px;
        padding: 50px 150px 80px 170px;
        margin: 80px 50px 50px -150px;
        z-index: -10;

    }
    
    .about-left {
        position:relative;
        margin: 10px;
        -webkit-transition: all .7s;
        transition: all .7s;
    }

}

.about-content h3 {
  font-family: "Amiri", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  opacity: .6;
  margin: 0;
}

.about-content h2 {
  font-family: "Amiri", serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  font-style: italic;
  margin: 15px 0 0;
}

.about-content p {
  font-family: "Amiri", serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 23px;
  margin: 16px 0 0;
}

.about-content a {
  font-family: "Amiri", serif;
  font-weight: 400;
  font-size: 14px;
  color: #303030;
  line-height: 14px;
}

.about-content a:hover {
    opacity: .7;
}

/*About Page==================================================*/

.section-about-page {
    margin: 50px;
    padding-top: 25px;
}

.hero-copy,
.hero-copy2 {
    padding: 5px;
    margin: 10px;
    text-align: justify;
}

@media (min-width: 720px) {
.hero-copy {
    padding: 5px 65px;
    margin: 10px;
    text-align: justify;
    align-items: center;
    }
}

.hero-copy p,
.hero-copy2 p {
    color: #303030;
    padding: 5px;
    margin: 20px 5px 5px 5px;
    position: relative;
}

@media (min-width: 720px) {
.hero-copy2,
.hero-copy2 p {
    padding: 5px 65px;
    margin: 10px;
    text-align: justify;
    align-items: center;
    }
}

.hero-image1 {
    width: 100%;
    padding: 0px;
    position: relative;
    box-shadow:none;
}

@media (min-width: 720px) {
.hero-image1 {
    width:100%;
    margin: 40px 60px 10px -65px;
    position: relative;
    -webkit-box-shadow: 57px -42px 0px 0px rgba(245,237,231,0.82);
-moz-box-shadow: 57px -42px 0px 0px rgba(245,237,231,0.82);
box-shadow: 57px -42px 0px 0px rgba(245,237,231,0.82);
    }
}

.hero-image1 img {
    width: 100%;
    height: auto;
}

.hero-image2 {
    width: 100%;
    height: auto;
    margin: 10px;
    object-fit: cover;
}

.hero-image2 img {
    object-fit: contain;
    width: 100%;
    height: auto;
    margin: 10px;
}

@media (min-width: 720px) {
.hero-image2 {
    margin: -20px 0px 20px 70px;
    z-index: 1000;
    }
.hero-image2 img {
    object-fit:contain;
    width:600px;
    height:600px;
    }
}

.hero-image3 {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: auto;
}

.hero-image3 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 720px) {
.hero-image3 {
    width: 100%;
    margin:-150px 60px 10px -85px;
    position:relative;
    }
}

.hero-quote {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    font-family: freight-big-pro, serif;
    font-weight: 300;
    font-size: 56px;
    color: #000000;
    letter-spacing: 0;
    line-height: 56px;
    text-align: center;
    margin: 5px;
    padding: 50px 0px 0px 0px;
    top: 0;
    position:relative;
}

@media (min-width: 720px) {
.hero-quote {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    font-family: freight-big-pro, serif;
    font-weight: 300;
    font-size: 56px;
    color: #000000;
    letter-spacing: 0;
    line-height: 56px;
    top:100;
    align-items: center;
    padding-left: 45px;
    position: relative;
    }
}




/*=====404======*/

.error {
    height: 800px;
}

.error img {
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to bottom, black 0, transparent 100%);
}


/*======Newsletter======*/

.newsletter {
    background:#fff;
    text-align: center;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}