/* normalize
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeLegibility;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;-webkit-font-smoothing: antialiased;}}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .container {
    position: relative; 
    width: 80%; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0; }
  .container .column,        
  .container .columns { 
    float: left; 
    width: 100%; 
    box-sizing: border-box; }
  .row { 
    margin-bottom: 2rem; }
  .row .column:first-child,        
  .row .columns:first-child { 
    margin-left: 0; }
  
  /* For devices larger than 550px */
  @media (min-width: 550px) {
    
    .container .column,
    .container .columns {
      margin-left: 4%; }
    
    .container .one.column,
    .container .one.columns          { width: 4.66666666667%; }
    .container .two.columns          { width: 13.3333333333%; }
    .container .three.columns        { width: 22%;            }
    .container .four.columns         { width: 30.6666666667%; }
    .container .five.columns         { width: 39.3333333333%; }
    .container .six.columns          { width: 48%;            }
    .container .seven.columns        { width: 56.6666666667%; }
    .container .eight.columns        { width: 65.3333333333%; }
    .container .nine.columns         { width: 74.0%;          }
    .container .ten.columns          { width: 82.6666666667%; }
    .container .eleven.columns       { width: 91.3333333333%; }
    .container .twelve.columns       { width: 100%; margin-left: 0; }

    .container .one-third.column     { width: 30.6666666667%; }
    .container .two-thirds.column    { width: 65.3333333333%; }

    .container .one-half.column      { width: 48%; }

    /* Offsets */
    .container .offset-by-one.column,
    .container .offset-by-one.columns       { margin-left: 8.66666666667%; }
    .container .offset-by-two.column        { margin-left: 17.3333333333%; }
    .container .offset-by-three.column      { margin-left: 26%;            }
    .container .offset-by-four.column       { margin-left: 34.6666666667%; }
    .container .offset-by-five.column       { margin-left: 43.3333333333%; }
    .container .offset-by-six.column        { margin-left: 52%;            }
    .container .offset-by-seven.column      { margin-left: 60.6666666667%; }
    .container .offset-by-eight.column      { margin-left: 69.3333333333%; }
    .container .offset-by-nine.column       { margin-left: 78.0%;          }
    .container .offset-by-ten.column        { margin-left: 86.6666666667%; }
    .container .offset-by-eleven.column     { margin-left: 95.3333333333%; }

    .container .offset-by-one-third.column  { margin-left: 34.6666666667%; }
    .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; }

    .container .offset-by-one-half.column   { margin-left: 52%; }
  }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1, h2, h3, h4, h5, h6 { 
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 2rem; }
  h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
  h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.4rem; line-height: 1.2; letter-spacing: -.08rem; }
  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
  h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

  /* Larger than phablet */
  @media (min-width: 550px) {
    h1 { font-size: 5.0rem; }
    h2 { font-size: 4.2rem; }
    h3 { font-size: 3.6rem; }
    h4 { font-size: 3.0rem; }
    h5 { font-size: 2.4rem; }
    h6 { font-size: 1.5rem; }
  }

  p {
    margin-top: 0; 
  }
  .text-center {
    text-align: center;
  }
  .nowrap {
    white-space: nowrap;
  }
  .lite {
    font-weight: 300;
  }
  .muted {
    color: #999;
  }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  a { 
    text-decoration: none;
  }
  a:hover { 
    text-decoration: underline;
  }

/* Buttons 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    display: inline-block;
    background-color: transparent;
    border-radius: 2px;
    color: #555;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #777;
    height: 42px;
    line-height: 38px;
    padding: 0 30px;
    letter-spacing: .1rem;
    text-transform: uppercase; 
    white-space: nowrap;
    box-sizing: border-box; }
  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover,
  .button:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    border-color: #888;
    color: #333;
    outline: 0; }
  .button.button-primary,
  button.button-primary,
  input[type="submit"].button-primary,
  input[type="reset"].button-primary,
  input[type="button"].button-primary {
    color: #FFF;
    border-color: #3399ff;
    background-color: #3399ff; }
  .button.button-primary:hover,
  button.button-primary:hover,
  input[type="submit"].button-primary:hover,
  input[type="reset"].button-primary:hover,
  input[type="button"].button-primary:hover,
  .button.button-primary:focus,
  button.button-primary:focus,
  input[type="submit"].button-primary:focus,
  input[type="reset"].button-primary:focus,
  input[type="button"].button-primary:focus {
    background-color: #0066cc;
    border-color: #003366;
    color: #FFF; }

  .button {
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .button:hover {
    opacity: 1;
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  input[type="email"],
  input[type="search"],
  input[type="text"],
  input[type="password"],
  textarea,
  select {
    border: 1px solid #D1D1D1;
    height: 42px;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    border-radius: 4px;
    box-shadow: none;
    background: #fff; }
  /* Removes awkard default styles on some inputs */
  input[type="email"],
  input[type="search"],
  input[type="text"],
  textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px; }
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="text"]:focus,
  input[type="password"]:focus,
  textarea:focus,
  select:focus {
    border: 1px solid #3399ff;
    outline: 0; }
  label,
  legend {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem; }
  fieldset {
    border-width: 0;
    padding: 0; }
  input[type="checkbox"],
  input[type="radio"] {
    display: inline; }
  label > .label-body {
    display: inline-block;
    font-weight: normal;
    margin-left: .5rem; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  ul { 
    list-style: disc outside;
    margin: 0 0 0 20px;
    line-height: 1.3em;
  }
  ol { 
    list-style: decimal inside; }
  ol, ul {
    margin-top: 0;
    padding-left: 0; }
  ul ul, 
  ul ol,
  ol ol, 
  ol ul { 
    margin: 1.5rem 0 1.5rem 3rem; 
    font-size: 90%; }
  li {
    margin-bottom: 1rem; }
  ul.row li {
    display: inline-block;
  }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  th,
  td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1; 
    vertical-align: top;
    }
  th:first-child,
  td:first-child {
    padding-left: 0; }
  th:last-child,
  td:last-child {
    padding-right: 0; }
  .top {
    vertical-align: top;
  }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  button,
  .button {
    margin-bottom: 1rem; }
  input,
  textarea,
  select,
  fieldset {
    margin-bottom: 1.5rem; }
  pre,
  blockquote,
  form,
  dl,
  figure,
  table,
  p,
  ul,
  ol,
  form {
    margin-bottom: 2.5rem; }
  p {
    margin-top: 0;
  }

  .img-pad {
    vertical-align: middle;
    margin: 0 10px;
  }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .u-full-width {
    width: 100%;
    box-sizing: border-box; }
  .u-max-full-width {
    max-width: 100%;
    box-sizing: border-box; }
  .u-pull-right {
    float: right; }
  .u-pull-left {
    float: left; }
  .v-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .container:after,
  .row:after,
  .u-cf { 
    content: "";
    display: table;
    clear: both; 
  }
  .pad-left{
    padding-left: 2rem;
  }
  .pad-right{
    padding-right: 2rem;
  }
  .margin-right{
    margin-right: 20px;
  }
  .spacer{
    padding-top: 0;
  }
  .no-margin {
    margin: 0;
  }
  .shadow {
    box-shadow: 0 2px 10px rgba(0,0,0,.4); 
  }
  .tight {
    margin-bottom: 0;
  }
  .tall {
    margin-bottom: 50px;
  }
  .outline {
    border: 1px solid #ddd;
  }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #e1e1e1;
  }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    white-space: nowrap; }
  pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre; }

/* modals
–––––––––––––––––––––––––––––––––––––––––––––––––– */

  .closex {
    position: fixed;
    z-index: 2;
    cursor: pointer;
    top: 5%;
    right: 5%;
    color: rgba(0,0,0,.5);
    font-size: 72px;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-weight: 300;
    transition: color 0.3s;
    border: none;
  }
  .closex:hover,
  .closex:focus {
    color: rgba(255,255,255,1);
    text-decoration: none;
    cursor: pointer;
  }
  .closex.inside {
    top: 20px;
    right: 20px;
    transition: color 0.3s;
  }
  .closex.inside svg{
    width: 20px;
    height: 20px;
  }
  .has-expanded-item .closex.inside {
    display: none;
  }

  .closex:hover,
  .closex:focus {
    color: rgba(0,0,0,1);
    text-decoration: none;
    cursor: pointer;
  }
  .md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 10;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .md-show {
    visibility: visible;
  }
  .md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 9;
    opacity: 0;
    background: rgba(143,27,15,0.5);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
  }

  .md-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .md-effect-1 .md-content {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }

  .md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  /* round modal */
  .rounded {
    border-radius: 100%; 
    width: 640px; 
    height: 640px;
  }
  img.svg25 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    opacity: .05;
    width: 800px;
    clip-path: circle(320px at center);
  }
  .rounded .content {
    padding: 25px;
  }
  @media ( max-width: 500px ){
    .rounded .content {
      width: 50%;
      padding: 0;
    }
  }
  .rounded .content a {
    display: inline-block;
    position: relative;
    z-index: 1;
    cursor: pointer;
    margin-right: 5%;
  }

/* lightbox
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .modal {
    visibility: hidden;
    position: fixed;
    z-index: 11;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(76,48,24,0.8);
  }
  /* Modal Content */
  .modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1440px;
  }
  .modal-content .container .four.columns {
    margin: 1px;
  }
  .modal-content .container .columns {
    margin: 0;
  }
  .mySlides {
    /*visibility: hidden;*/
  }
  .cursor {
    cursor: pointer;
  }
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  .caption-container {
    text-align: center;
    background-color: transparent;
    padding: 2px 16px;
    color: white;
  }

  .demo {
    opacity: 0.6;
  }

  .active,
  .demo:hover {
    opacity: 1;
  }

/* site specific css 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  html { 
    font-size: 100%; 
  } 
  body {
    font-size: 1.5em; 
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
    color: #7d4a4a;
  }
  body.home {
    background: #382626 url('../images/nineleft-bg.jpg');
    background-size: cover;
  }
  a, a:visited {
    color: #7d4a4a;
    border-bottom: 1px solid #7d4a4a;
    line-height: 1.25em;
    text-decoration: none;
    transition: color .2s;
  }
  a:hover {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  a.noline {
    border: none;
  }
  .container {
    width: 100%;
    max-width: 1440px;
  }
  .main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 50px);
  }


  .nineleft {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: auto;
    height: 50%;
    fill: #382626;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  }
  .nineleft:hover {
    cursor: pointer;
    transform: translate(-50%, -50%) scale(1.05);
  }
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    margin: 0;
    padding: 0;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
  .item {
    display: flex;
    background: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
  }

/* samples
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  .samples header {
    height: 50px;
    margin: 0 0 10% 0;
  }
  .samples section {
    margin: 10%;
  }
  .samples {
    position: relative;
    z-index: 1;
    cursor: pointer;
    /*-webkit-transform: scale(1);
      transform: scale(1);
    will-change: transform, contents;
    -webkit-transition-property: all;
      transition-property: all;
    -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);*/
  }
  .samples p {
    color: #777;
    font-size: 18px;
    margin: 0;
  }
  .sample .sample-thumb {
    display: inline-block;
    width: 30%;
    max-width: 120px;
    height: auto;
    margin: 0 10% 0 0;
   /* will-change: transform, contents;
    -webkit-transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);*/
  }
  .sample .mobile-hide {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 30px auto 0 auto;
  }
  
  .sample .button {
    text-align: left;
    border: none;
    border-radius: 0;
    color: #7d4a4a;
    margin: 0 0 0 20px;
    padding: 0 20px;
    font-weight: bolder;
  }
  .sample .button:hover {
    border-color: #7d4a4a;
    color: #000;
  }
  @media screen and (max-width: 1299px) {
    .samples section {
      text-align: center;
    }
    .sample .sample-thumb { 
      display: block;
      margin: 0 auto 10px auto;
    }
    .samples section {
      text-align: center;
    }
    .sample .button {
      text-align: center;
    }
    .sample .mobile-hide {
      margin: 0;
    }
  }

  @media screen and (max-width: 550px) {
    .sample .mobile-hide {
      display: none;
    }
    .sample .sample-thumb {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }

  /*.sample1.is-expanded .sample-thumb {
    width: 10%;
  }*/

  /*#video-bg {
    position: fixed;
    z-index: -1; 
    height: 100vh;
  }
  @media (min-aspect-ratio: 16/9) {
    #video-bg {
      width: 100%;
      height: auto;
    }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg {
      width: auto;
      height: 100%;
    }
  }
  @media (max-width: 767px) {
    #video-bg {
      display: none;
    }
    body {
      background: url('../images/nineleft-bg.jpg');
      background-size: cover;
    }
  }*/
  /* footer
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  footer {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    background-color: transparent;
  }
  footer h6 {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    margin: 0 10px;
    text-shadow: 0 0 3px rgba(0,0,0,.8);
  }
  footer h6 a {
    color: #fff;
  }
  @media screen and (max-width: 414px), (max-height: 700px) {
    footer h6 {
      font-size: .85em;
      line-height: 1;
    }
  }