/*-----  CSS RESET  ------*/
/* Brand Colors 
#766c5b */

/* fonts */

@font-face {
  font-family: "mak";
  src: url("/fonts/mak.otf");
}

@font-face {
  font-family: "freepen";
  src: url("/fonts/freepen.otf");
}

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth; /* this enables smooth scrolling between internal links */
    overflow-x: hidden;
    }

  body {
    font-family: 'Noto Sans HK', sans-serif;
    color: rgb(120,120,125);
    overflow-x: hidden;
  }

  img {
    max-width: 100%; /* this ensures images never break their container */
    height: auto;
    margin-bottom: -0.6%;
  }

  .studio img 
  {
    max-width: 85%;
  }

  .mob-bg1 {
    background-image: url(/images/candy3.jpg);
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    padding-top: 6rem;}

  .mob-img img {
    background-size: cover;
    background-position: center;
    min-height: 70vh;}



   /* this overrides the default padding and margin on gridlex elements */
  [class*=grid] {   margin: 0;  }
  [class*=col]  {   padding: 0; }

  .behind {z-index: -1;
  position: absolute;}

  /* ------------- Utility Classes --------------  */

  .left     {  text-align: left;     }
  .right    {  text-align: right;    }
  .centered {  text-align: center;   }

  .padded   {  padding: 5% !important;    }
  .padded-s { padding: 1% !important;}
  .padded-m {padding: 3% !important;}
  .padded-1 {  padding: 1rem !important;  }
  .padded-2 {  padding: 2rem;  }
  .padded-4 {  padding:5rem;   }
  .padded-05 {padding: .5rem;}
  .padded-10 {padding: 10%;}
  .unique-padding {  padding: 1.1rem;  }
  .padded-sides { padding-right: 5% !important;
                  padding-left: 5% !important;}
  .padded-right { padding: 0% 0% 0% 5%;}
  .padded-top-left-bottom {padding: 5% 0% 5% 5%;}
  .padded-bottom {padding-bottom: 5%;}
  .padded-top {padding-top: 6%;}
  .padded-top-2 {padding-top: 3%;}
  .padded-top-left-right {padding: 5% 5% 0% 5%}
  .padded-t-0 {padding-top: 0;}
  .padded-50 {padding: 48%;}

 
  .margin-social {margin: 5%;}

  .capped-width { width: 80%; margin: auto;}

  .tall-50  {  min-height: 50vh;   }
  .tall-100 {  min-height: 100vh;  }

  .dark-bg      {  background-color: #c1b9ac;     }
  .light-bg     {  background-color: #efe9db;  }
  .hosting-card-bg {background-color: #E6E3DE;}
  .featured-bg  {  background-color: #ffdfc3;       }
  .bg-white     {  background-color: #fff;}
  .bg-light-grey { background-color: #eeeeee;}
  .bg-soft-pink {  background-color: #f2e7e3;}
  .bg-dark-beige {background-color: #d9d5ca;}
  .template-bg {background-color: #eceff1;}

  .split-beige {background: linear-gradient(180deg,#fff 80%,#efe9db 20%);}
  .split-beige-white {background: linear-gradient(180deg,#efe9db 51%,#fff 46%);}

  .light-text   { color: white; }
  .flex-flip:nth-child(2n){  flex-direction: row-reverse; }

  /* bumps */

  .bump-right
    {
    margin-top: 1rem;
    margin-left:7rem;
    margin-bottom: 1rem;
    margin-right:-12rem;
    z-index:1;
    position: relative;
  }

  .sm-bump-left {
   
    margin-top: 1rem;
    margin-left:-4rem;
    margin-bottom: 1rem;
    margin-right: 3rem;
    z-index:1;
    position: relative;}

  .v-bump-right {
   
    margin-left: 15rem;
    z-index: 1;
    position: relative;}

  .bump-left
    {
    margin-top: 1rem;
    margin-left:-11rem;
    margin-bottom: 1rem;
    margin-right: 3rem;
    z-index:1;
    position: relative;
    }

  .bump-up
    {
    margin-top: -6rem;
    z-index:1;
    }

    .s-bump-up
    {
    margin-top: -12rem;
    z-index:1;
    } 

    .bump-up-portfolio
    {
    margin-top: -3rem;
    z-index:1;
    }  

    .portfolio-2  
    {
    z-index:1;
    }  
    .portfolio-2 hr {
      border: none;
      border-left: 1px solid;
      width: 0rem;
      text-align: center;
      padding-bottom: 14rem;
      margin-top: -5.4rem;
  }

  .bump-left-2
    {
    margin-top: 1%;
    margin-left:-7%;
    z-index:1;
    position: relative;
    }

    /* unique page styles */

  .photography-page h4 {margin-bottom: 0rem;}

  .service-text h3 {color: #c1b9ac;}
  .service-text a  {color: #c1b9ac;}


  .social-media { background-color: white;}
  
  .dark-text {color: #766c5b;}


.template-radius {border-radius: 500px 500px 0px 0px;}
.template-border {border: 1px solid; }
.black-border  {border-top: 1px solid #766c5b;
  border-bottom: 1px solid #766c5b ; }

.circle {border-radius: 100%;}  

.category-bar {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border-top: 1px solid #766c5b;
  border-bottom: 1px solid #766c5b;
  text-align: center;
}

.black-border-top {border-top: 1px solid #766c5b;}

.black-border-social-right 
{
  border-top: 1px solid #766c5b;
  border-bottom:  1px solid #766c5b;
  border-right:  1px solid #766c5b;
}

.black-border-social-all
{border: 1px solid #766c5b;}



.category-bar .category {
  padding: 0.7rem;
  white-space: nowrap;
}
.category {
  display: inline-block;
  text-decoration: none;
  letter-spacing: 1px;
  font-family: "Playfair Display", serif;
  border-right: 1px solid #766c5b;
  border-left: 1px solid #766c5b;
  
}

.mt-special h3 {margin-bottom: 3%;}

.relative {
  position: relative;
}



.img-product {
  object-fit: contain;
  object-position: center;
  min-height: 100%;
  width: 100%;
  transition: 1s ease;
  position: absolute;
  top: 0;
}
.hide-2 {
  opacity: 0;
}

.hide-3 {
  display: none;
}


#container {margin-top: -160px;}

#circle { width: 100%; }

#circle text {font-family: "mak", serif; font-size: 20px;}

#circle svg { left: 0; top: 0; width: 300px; height: 300px;

  -webkit-animation-name: rotate;
     -moz-animation-name: rotate;
      -ms-animation-name: rotate;
       -o-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 30s;
     -moz-animation-duration: 30s;
      -ms-animation-duration: 30s;
       -o-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;

}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); }
}
@-moz-keyframes rotate {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0); }
}
@-ms-keyframes rotate {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0); }
}
@-o-keyframes rotate {
    from { -o-transform: rotate(360deg); }
    to { -o-transform: rotate(0); }
}
@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}


/* ---------ANNIMATION--------- */

.reveal {
  position: relative;
  opacity: 0;
  transition: 3s all ease;
  }
  
  .reveal.active {
  opacity: 1;
  }
  /* ---------ANNIMATION--------- */
  
  
  
  .animated {
      animation-duration: 2s;
      animation-fill-mode: both;
      -webkit-animation-duration: 2s;
      -webkit-animation-fill-mode: both
  }


.animatedFadeInUp {
  opacity: 0
}

.animatedFadeInDown {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.fadeInDown {
  opacity: 0;
  animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
}
.active.fade-up {animation: fade-up 1s ease-in;
color:#766c5b;
border-bottom: 0px;}

.active.fade-down {animation: fade-down 1s ease-in;
  color:#766c5b;
  border-bottom: 0px;}


  

  @keyframes fade-up {
    0%
      {
      transform: translateY(20px);
      opacity: 0;
      }
    100%
      {
      transform: translateY(0);
      opacity: 1;
      }
  }

  @keyframes fade-down {
    0%
      {
      transform: translateY(-20px);
      opacity: 1;
      }
    100%
      {
      transform: translateY(0);
      opacity: 1;
      }
  }

  @keyframes fadeInUp1 {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated1 {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp1 {
    opacity: 0
}

.fadeInUp1 {
    opacity: 0;
    animation-name: fadeInU1p;
    -webkit-animation-name: fadeInUp1;
}

  


.playfair { font-family: "Playfair Display", serif;}
.small-text {font-size: 1.5rem;}
.small-text-2 {font-size: 1.5rem;}
.big-text h3 {font-size: 5.5rem;}

.reviews {
  font-size: 1.8rem;
  color: #c1b9ac;

}

.enquire a {
  font-family: "mak";
  text-decoration: none;
  color:  #efe9db;
  padding: 0.6rem 2rem;
  display: inline-block;
  font-size: 4rem;
  background-color: #766c5b;
  border-radius: 100%;
}

.enquire a:hover {
  background-color: transparent;
  color: #766c5b;

} 

.enquire-portfolio a 
  {
  font-family: "mak";
  text-decoration: none;
  color:  #efe9db;
  padding: 0.5rem 0.5rem;
  display: inline-block;
  font-size: 4rem;
  background-color: #766c5b;
  border-radius: 50%;
  }


.enquire-portfolio a:hover 
{
  background-color: transparent;
  color: #766c5b;
} 

.enquire-home a 
  {
  font-family: "mak";
  text-decoration: none;
  color:  #efe9db;
  padding: 0.6rem 2rem;
  display: inline-block;
  font-size: 3rem;
  background-color: #766c5b;
  border-radius: 100%;
}

.enquire-home a:hover 
{
  background-color: transparent;
  color: #766c5b;
} 

.radius-100 {
  border-radius: 100%;
  padding: 1rem;
  border: #766c5b 1px solid;
}

.radius-100-portfolio {
  border-radius: 100%;
  padding: 1rem;
  border: #766c5b 1px solid;
}
  

.small-image
  {
    min-height: 40vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* General typography */
  h1
    {
    font-family: "mak", serif;
    font-size: 3.5rem;
    color: #766c5b;
    font-weight: 300;
    }
   
   .home-h3 
   {
    font-family: "mak", serif;
    font-size: 6.4rem;
    color: #766c5b;
    font-weight: 300;
    }

  .black {color: black;}  

  .web-portfolio h1 {
    font-size: 6rem;
   
    text-align: center;}

  .web-dev h1 {font-size: 3.3rem;}
  .web-dev img
    {
    max-width: 85%;
    max-height: auto;
    }

  /* ----SHOP---- */
  .shopify-button 
    {
    display: inline-block;
    position: fixed;
    line-height: 0.5;
    top: 4rem;
    right: 40%;
    z-index: 2;
    font-weight: 400;
    color: white;
    text-align: center;
    border-radius: 100%;
    }

  .shopify-buy-frame--product {
      display: inline-block !important;
  }

  .mock-ups{  background-size: contain;
    background-position: center;
    min-height: 100%;
    background-repeat: no-repeat;  }

    .portfolio hr {
      border: none;
      border-left: 1px solid;
      width: 4rem;
      text-align: center;
      padding-bottom: 8rem;
      margin-top: -2.4rem;
    }

    .portfolio-bottom hr {
      border: none;
      border-left: 1px solid;
      width: 4rem;
      text-align: center;
      padding-bottom: 8rem;

    }

    .portfolio-mockups {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      box-sizing: border-box;
    }

  .stars {
      font-size: 2rem;
      color: #2f2f2e;
    }

    .z-index {z-index: -1;}

    .device-preview-desktop .device-preview-img {
      border-radius: 4%;
      width: 108%;
      left: -3.7%;
      position: relative;
      top: -3.3%;
      height: 101.5%;
      z-index: -1;
      box-shadow: -4px 5px 4px rgb(0 0 0 / 48%), -9px 6px 4px rgb(0 0 0 / 9%), -10px 11px 16px rgb(0 0 0 / 9%), -25px 12px 25px rgb(0 0 0 / 9%), -37px 40px 39px rgb(0 0 0 / 9%);
  }


  .device-preview-img {
    display: block;
    background-size: 100% auto;
    overflow: hidden;
    -webkit-transition: background-position 4s;
    transition: background-position 6s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    height: 55%;
    border-radius: 6px;
    z-index: 10;
}


.device-preview-wrapper {
  position: relative;
  margin-bottom: -4%;
  
}

.device-preview-autosize {
  opacity: 0;
  width: 90%;
  height: auto;
}

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

  .d .se-wpt a:hover, .m .se-wpt a:hover {
    opacity: 1;
}
.device-preview-desktop {
  position: absolute;
  background: url(/images/ipad-mockup.png) no-repeat top left;
  background-size: 100% auto;
  width: 59%;
  margin-left: 20%;
  height: 67.8%;
  top: -8%;
  left: 0;
  padding: 3% 3% 0%;
}

.device-preview-desktop .device-preview-img {
  
    border-radius: 3%;
    width: 106%;
    left: -2.7%;
    /* position: relative; */
    top: -3.3%;
    height: 96.7%;
  box-shadow: -4px 5px 4px rgb(0 0 0 / 48%), -9px 6px 4px rgb(0 0 0 / 9%), -10px 11px 16px rgb(0 0 0 / 9%), -25px 12px 25px rgb(0 0 0 / 9%), -37px 40px 39px rgb(0 0 0 / 9%);
  z-index: 1;
}

.device-preview-img:hover {
  background-position:  0% 100%;
}

.device-preview-img:focus {
  background-position:   0% 100%;
}

.bump-up-line {
  margin-top: -3.4rem;
}

  .social-media-management h1
    {
    font-size: 2.2rem;
    font-family: "Playfair Display", serif;
    font-weight: 100;
    color: #766c5b;
    line-height: 1;
    margin-bottom: 0.8rem;
    }

 .h1-meta h1
    {
    font-size: 1rem;
    }

   h4
    {
    font-size: 1.6rem;
    font-family: "Playfair Display", serif;
    color: #766c5b;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    font-weight: 100;
    }

   h2, h3, h5, h6
   {
    line-height: 1.5;
    margin-bottom: 0.8rem;
    font-family: 'mak', serif;
    color: #c1b9ac;
    font-weight: 500;

    }

  h2  { font-size: 2rem;  }
  h3  { font-size: 1.8rem;  }

  h5 {font-size: 1.2rem;
  font-weight: 100;}

  .products h1
  {
   line-height: 1;
   margin-bottom: 0.8rem;
   color: #766c5b;
   font-size: 1.8rem;
    }

  .apply
    {
    color: #766c5c;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 27%);
    }

  p   { font-size: 1rem;  }

  .logo h2
    {
    font-size: 1rem;
    padding-top: 0.8rem;
    }

  p, ul {margin-bottom: 0.8rem;}

  .is 
  { color: #C1B9AC;
    text-transform: uppercase;
    margin-bottom: -73px;
    margin-top: -40px;
    font-size: 9.5rem;
  }

  .kingcode 
  { font-family: "Playfair Display", serif;
    font-size: 3.5rem;
    line-height: 50px;
    color: #766c5c;
    text-transform: lowercase;
  }

  .foryou
  {
    color: #C1B9AC;
    text-transform: uppercase;
    font-size: 3rem;
  }

  a
    {
    color: #766c5c;
    text-decoration: none;
    }

  .our-benefits a {color: #c1b9ac;}
  .our-benefits a:hover {color: grey;}

  .font-bg
    {
    background-color: #ffffffa3;
    padding-bottom: 0.8rem;
    }


  /* this makes sure that the last element in any container doesn't have margin-bottom */
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child,
  p:last-child {
    margin-bottom:0;
  }

  hr
    { /* this is a line element */
    border: none;
    border-bottom: 1px solid;
    width: 4rem;
    margin-bottom: 1rem;
    text-align: left;
    }



  .home hr
    {
    border: none;
    border-bottom: 1.5px solid;
    width: 20%;
    margin-bottom: 1rem;
    text-align: center;
    margin: 0% 40% 0% 40%;
    color: #766c5b;
    }

  .border-right-2 {border-right: 1px solid #766c5b;}
  .border-left-2 {border-left: 1px solid #766c5b;}
  .border-top-2 {border-top: 1px solid #766c5b;}
  .border-bottom-2 {border-bottom: 1px solid #766c5b;}

  .margin-neg {margin-bottom: -0.1%;}

  .border-grey
    {
    border: 1px solid grey;
    padding: 5rem 3rem 5rem 3rem;
    }

  .border-top-sides
    {
    border: 1px solid grey;
    padding: 5rem 3rem 0rem 3rem;
    }


  .borders-top-bottom
    {
    border-bottom: 1px solid;
    border-top: 1px solid;
    }

  .border-sides
    {
    border-left: 1px solid;
    border-right: 1px solid;
    }

  .border-top {border-top: 10px solid white;}

  .margin-top {margin-top: 0.8rem;}
  .margin {margin: 5%;}
  .margin-2{margin: 6%;}
  .margin-bottom {margin-bottom: 2%;}
  .margin-shop {margin: 1rem !important;}

  .border-template {border: 1px solid;}

  .border-bottom {border-bottom: 1px solid;}
  /* ------- unique typography styles - adjust to suit your styles  --------- */

  .logo-font
    {
    font-family: "bebas";
    color: black;
    font-size: 3rem;
    }

  .not-bold   { font-weight: normal; } /* add this class to make headings not bold */
  .no-bullets { list-style:none; } /* Used to remove dot-points from a list */


  .bold
    {
    font-size: 8rem;
    font-weight: 100;
    }

  .services
    {
    padding: 0% 3% 0% 3%;
    font-size: 0.9rem;
    }


  p.emphasis   /* typically added to paragraphs to make them a little bigger, could be a different font or color also */
    {
    font-size: 1.2rem;
    }

  /* Icons */

  .far         /* default styles for font awesome icons */
    {
    font-size: 2rem;
    margin-bottom: 1rem;
    }


  .highlight { /* this is applied to spans for out highlighted text. */
    background-color: rgb(240, 240, 245);
    display: inline-block;
    padding: 0.5rem;
    margin: 2px;
  }

  .quote-icon {  /* You can also change the fonts for these icons specifically */
    font-size: 6rem;
    line-height: 1;
  }

  /* ---------------  Button Styles  --------- */
  /* We have created lots of different button styles, you probably don't need to have quite this many styles depending on your site */




  .button {
    text-decoration: none;
    color:  white;
    border: 1px solid #c1b9ac;
    padding: 0.6rem 2rem;
    margin-top: 1rem;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1rem;
    background-color: #c1b9ac;
  }

  .button-photography {  text-decoration: none;
    border: 1px solid #c1b9ac;
    padding: 0.4rem 1rem;
    margin-top: 1rem;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8rem;
    background-color: #c1b9ac;
  }

  .button-social-media {  text-decoration: none;
    border: 1px solid #c1b9ac;
    padding: 0.4rem 1rem;
    margin-top: 1rem;
    margin-bottom: 5%;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8rem;
    background-color: #c1b9ac;
  }

  .button:hover {
    background-color: transparent;
    color: #848387;
    border:#848387 solid 1px;
  }
  .button-photography:hover {
    background-color: transparent;
    color: #c1b9ac;
    border:#c1b9ac solid 1px;
  }

  .button-social-media:hover {
    background-color: transparent;
    color: #c1b9ac;
    border:#c1b9ac solid 1px;
  }



  .arrow { /* this is the arrow button */
    font-size: 1.5rem;
    display: inline-block;
    text-align: center;
    font-weight: 300;
    line-height: 1.5rem;
    min-width: 2.5rem;
    padding: 0.5rem;
    border-radius: 100%;
    text-decoration: none;
    margin-top: 0.5rem;
    background-color: transparent;
    color: #c1b9ac;
    border:#c1b9ac solid 1px;
  }

    .arrow:hover {
      color: white;
      background-color: #c1b9ac;
      border:#c1b9ac solid 1px;
      transition: 0.5s;
    }


  /* Headers and footers */

  header .page {
    background-color: transparent;
    padding: 2% 2% 0% 2%;
    top: 0;
    width: 100%;
    z-index: 10;
    border-bottom: 1px solid;
  }

  header a,
  footer a,
   nav a {
    text-decoration: none;
    color: inherit;
    color: #766c5c;

  }

  .scroll
    {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    border-top: solid 1px;
    border-bottom: solid 1px;
    padding: 20px;
    z-index: 1;
  }

.radius
  {
  border-radius: 90px;
  border: solid 1px;
  padding: 1px;
  margin-bottom: 3px;
  }

  header nav a,
  .inline a {
    display: inline-block;
    padding: 0.5rem;
  }

  .small-font{ font-size: 0.9rem}

  .small-font a
  { padding-left: 2%;
    padding-right: 2%;}

  nav a:hover {
    border-bottom: solid #766c5c 1px;

  }

  footer a:hover {
    color: #e3dfd4;
    border-bottom: solid #e3dfd4;
  }

  .sub-footer a {padding: 0% 2% 0% 2%;}
  .sub-footer a:hover {color:#e3dfd4;}

  /* Fixed Header Option */

  header.fixed {
    position: fixed;
    border-bottom: 1px solid;
    top:0;
    left:0;
    right:0;
    z-index: 10;
    margin:0;
    padding-top: 1%;
    text-align: center;
  }
  .bump-for-header {
    min-height: 4rem;
  }

  .side-bar {padding: 5% 5% 20% 5%;}
  .side-bar a:hover {
    border-bottom: solid 1px #766c5c;}



  /* Hamburger Menu */
  .hamburger,
  .mobile-menu {
    display: none;
  }

  .hamburger {
    top:-16px;
    right:0;
    z-index: 10;
    font-size: 4rem;
    padding:0% 1%;
    border-radius: 0%;
    margin: 3%;
    position: fixed;

  }

  .active {
    color: black;
    border-bottom: solid 1px black;
  }

  .menu-p {
    color: white;
    font-family: 'Dynalight', cursive;
    font-size: 1.5rem;
    border-bottom: 2px solid rgba(255,255,255,.7);
    padding-top: 1rem;
  }
  .mobile-menu {
    position: fixed;
    top: 0;
    right:0;
    left:0;
    bottom: 0;
    background: linear-gradient(130deg,rgba(255,255,255,.8) 50%,#d9d5cc 50%);
    padding: 16% 10% 10% 10%;
    z-index: 10;


  }
  .mobile-menu a {
    color: rgb(120,120,125);
    padding: 1rem;
    display: block;
    text-decoration: none;
    font-family: "Playfair Display", serif;
    text-align: center;
  }


  /* -- Footer -- */

  footer .info {
    padding-right: 3rem;
  }

  footer nav a {
    display:block;
  }

  footer h3 {
    font-size: 1.2rem;
  }

  .socials {font-size: 2rem;}

  /* BANNERS */

  .banner,
  .banner-with-header,
  .banner-social  {
    background-size: cover;
    background-position: center;
    min-height: 60vh;
  }

  .banner-portfolio
  {
    background-size: cover;
    background-position: 50% 75%;
    min-height: 60vh;
  } 

  .banner-60 {
    background-size: cover;
    background-position: top;
    min-height: 70vh;}

  .service-banner {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
  }


  .fixed {
    background-attachment: fixed;
  }

  .banner-with-header {
    padding-top: 6rem;
    min-height: 100vh;
  }

  .absolute-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: none;
  }

  .banner-square {
    background-color: #efe9db;
    padding: 0% 5% 5% 5%;
  }

  .service-banner {
    margin-bottom: -5rem;
  }


  .bg-image {
    background-size: contain;
    background-position: center;
    min-height: 100%;
    background-repeat: no-repeat;
  }


  .bg-logo
  {
    min-height: 60vh;
  }

  .bg-height 
    {
    min-height: 70vh;    
    background-size: cover;
    background-repeat: no-repeat;
    }

  .bg-image-clients {
    background-size: cover;
    background-position: center;
    min-height: 100%;
    background-repeat: no-repeat;
  }

  .image-slider {overflow: hidden;}

  .bg-image-portfolio {
    background-size: cover;
    background-position: center;
    background-color: #d3ccc2;
    background-repeat: no-repeat;
  }

  .bg-image-content {
    background-size: cover;
    background-position: center;
    padding-bottom: 26%;
    background-repeat: no-repeat;
    }


/* javascript */

  .fadein {  opacity: 0;}
  .fadeinone {  opacity: 0;}
  .fadeintwo {  opacity: 0;}
  .fadeinthree {  opacity: 0;}
  .fadeinfour {  opacity: 0;}

  .slideinright  {
      margin-left: 100vw;
      min-width:100%;
      width: 100%;
    }

  .slideinleft {
      margin-left: -100vw;
      max-width:100%;
  }

  .mobile-review p {
    font-size: 0.5rem;
    text-align: center;
    
  }

  .review {text-decoration: none;
  color: #2f2f2e;
  font-size: 3rem;
  font-family: freepen;
  font-weight: lighter;
  }

 

  .review img {
    max-width: 25%;
    border: #c1b9ac 1px solid;
  }  

  .review-margin {margin-top: -140px;}


  .review:hover {color: #d3ccc2;}

  /* javascript end */

  /* vertical text */

.vertical {
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 1rem;
    position: absolute;
    white-space: nowrap;
    top: 35rem;
    left: 55%;

    color: white;
    border: white solid 1px;
  }

.vertical:hover {
  color: #78787d;
  border: #78787d solid 1px;
  background-color: #efe9db;}

  .landscape {padding: 20%;}



  .border {border: solid white 10px;}
  .border-top-right-bottom {
      border-top: solid white 10px;
      border-right: solid white 10px;
      border-bottom: solid white 10px;
  }
  /* Hover grid */

  .hover-container {
    background-size: cover;
    background-position: center;
  }

  .hover-overlay {
    position: relative;
    padding-bottom: 100%;
    color: rgba(255, 255, 255, 0);
    position: relative;
    /* you only need to use relative + absolute if you want to determine the exact aspect ratio of the container */
    transition: all 0.3s;
  }

  .hover-overlay:hover {
    background-color: rgba(60, 60, 60, 0.7);
    color: white;
  }

  .hover-inner {
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .hover-inner p {
    margin-bottom: 0;
  }

  /* Blog Post Elements */
  /* ---- Blog loop elements style 1 ------ */
  .blog-loop .blog-item {
    color: inherit;
    text-decoration: none;
    width: 100%;
    margin: 0;
    display:block;
  }

  .blog-loop .bg-image {
    padding-bottom: 60%;
    margin-bottom: 0.5rem;
  }

  .blog-loop img,
  .post-body img {
      margin-bottom: 2vh;
  }

  /* ----- FORMS --------------------------- */

/* fancy form */
.textarea {
    min-height: 6rem;}

.v-light-bg {
    background-color: #f8f6f4;}

.capped-width {
    max-width: 1100px;
    margin: auto;}

.relative {
    position: relative;}

.vertical-form-text {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 3.5rem;
    position: absolute;
    white-space: nowrap;
    top: 50%;
    left: 50%;
}
.sm-bold {
    font-size: 2.5rem;}

.floating-input {
      position: relative;
      padding-top: 1rem;
      /* margin-bottom: 2rem; */
    }

.checkbox 
  {
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 1rem;
  }

.enquiry input {font-family: "Playfair Display", serif;}

.input-text
  {
  font-size: 1.2rem;
  line-height: 1.2;
  display: block;
  margin: 0;
  width: 100%;
  border: none;
  border-radius: 0px;
  border-bottom: 2px solid #5f5a5a;
  transition: all .5s;
  padding: .7rem 0 .5rem;
  background-color: rgba(0,0,0,0);
  font-family: "Playfair Display", serif;
  }

.input-label
  {
  display: block;
  position: absolute;
  top: 0;
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: 1px;
  color: #5a5a5a;
  }

.enquiry textarea {resize: none;}

.input-text:placeholder-shown+.input-label
  {
  visibility: hidden;
  z-index: -1;
  }

input[type=submit]
  {
  width: auto;
  display: block;
  }

.button-solid
  {
  background-color: #3c3c3c;
  border: 1px solid #3c3c3c;
  text-decoration: none;
  padding: 0.6rem 2rem;
  margin-top: 1rem;
  display: inline-block;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  }

.button-solid:hover {
  background-color: #fff;
  border: 1px solid #fff;
  color: #3c3c3c;
}

element.style {display: none;}


input,
textarea,
select,
option
  {
  border-style: solid;
  border: 2px solid rgb(200, 200, 205);
  padding: 0.8em;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  font-family: "Playfair Display", serif;
  background-color: transparent;
  border: none;
  color: rgb(120,120,125);}
select {padding: 0.7rem 0 0.5rem}

.input-text:focus {border-color:  #efe9db;}

input:focus, textarea:focus
  {
  outline: 0;
  border: 2x solid #fff;
  }

    /* featured color


  textarea {
    min-height: 7em;
  } */

  input[type="submit"] {
    width: auto;
    display: block;
  }

  form [class*=col-] {
    padding: 5px;
  }

  .email-signup input {
    width: 30%;
    display: inline-block;
    max-width: 250px;
    margin-top:1rem;
  }

  .email-signup .button-solid {
    padding: 0.8em;
    border-radius: 0;
    font-size: 1rem;
  }
   form .button {
     width:100%;
   }

   @media(max-width:768px) {
     .email-signup input {
       width: 100%;
       max-width: 100%;
     }
   }

  /* Testimomnials */

  .profile {
    max-width: 8rem;
    border-radius: 100%;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }

  .card .author {
    font-weight: bold;
    margin-bottom:0;
  }

  .card .company {
    margin-bottom: 2rem;
  }

  /* -----HOSTING----- */

  .card-square
  {
  padding: 2rem;
  box-shadow: 2px 2px 7px 1px rgb(0 0 0 / 15%);
  
  }

  .card 
    {
    padding: 2rem;
    box-shadow: 3px 14px 9px -7px rgb(0 0 0 / 8%);
    }
  
  .card-subheading 
    {
    font-family: "Playfair Display", serif;
    color: #766C5B;
    }

  .oval-radius  
    {
    border-radius: 100%;
    box-shadow: 3px 14px 9px -7px rgb(0 0 0 / 8%);
    margin-top: -2rem;
    padding: 0% 5% 5% 5%;
    }

  .hosting-price 
    { 
    font-family: "Playfair Display", serif;
    color: #766C5B;
    font-size: 1.3rem;
    margin-bottom: 0px;
    margin-top: 20px;
    }

  .hosting-heading
    { 
    font-family: "Playfair Display", serif;
    color: #766C5B;
    font-size: 1.4rem;
    margin-bottom: 5px;
    }
  
  .hosting-list 
    {
    font-size: 0.9rem;
    padding: 0.5%;
    z-index: 1;
    }

  .hosting-margin {margin: 0rem 1.5rem !important;}
  .hosting-padded-bottom {padding-bottom: 5% !important;}

  .hosting-button 
    {
    font-family: Open Sans, sans-serif;
    background-color: #c1b9ac;
    border-radius: 0px;
    padding-left: 24px;
    padding-right: 24px;
    color: #fff;
    font-size: 15px;
    padding: 12px 40px;
    letter-spacing: .3px;
    display: block;
    border-radius: 0px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: background 200ms ease;
    transition: background 200ms ease;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
    border: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    }

    .hosting-button:hover {background-color: #766C5B ;}
  
  .underline {border-bottom: 1px solid #766C5B;}

  /* clickable boxes */

  .clickable-box {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 rgba(0, 0, 0, 0); /* so that we can add a transition */
    transition: 0.2s all;
    display: block;
  }

  .clickable-box .overlay {
    min-height:10rem;
    padding: 5rem 2rem;
    background-color: rgba(0,0,10,0.6);
    color: white;
  }

  .clickable-box p {
    margin-bottom: 0;
  }

  .clickable-box:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    margin-top:-2px;
  }



/* fancybox gallery */
.mixed-gallery .landscape {
    padding-bottom: 75%;}

.mixed-gallery .bg-image-photography {
    border: 2px solid white;}

a.bg-image-photography {
    display: block;}

.mixed-gallery .portrait {
    padding-bottom: 135%;}


.mixed-gallery .tall-portrait {
    padding-bottom: 153.5%;}


.bg-image-photography {
    background-size: cover;
    background-position: center;
    background-color: #f2eee9;
    background-repeat: no-repeat;  }

.project-gallery a {
    display: block;}

.one-half {
    padding-bottom: 115%;}

.one-third { padding-bottom: 123%;  }

.col-full-width {
    flex-basis: 100%;
    max-width: 100%;}

.full-width {  padding-bottom: 60%;    }


.col-two-thirds {
    flex-basis: 66.66%;
    max-width: 66.66%;}

.two-thirds {  padding-bottom: 60%;}

.video-main {padding-bottom: 60%;}

.col-one-third {
    flex-basis: 33.33%;
    max-width: 33.33333%;}

.col-one-half {
    flex-basis: 50%;
    max-width: 50%;}

.square {padding-bottom: 100%;}



/* Masonry Gallery */

.masonry { /* Masonry container */
  column-count: 3;
  column-gap: 1rem;
}

.masonry .item { /* Masonry bricks or child elements */
  background-color: #eee;
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
}

@media(max-width:767px) {
  .masonry {
    column-count: 2;
  }
  
}

@media(max-width:567px) {
  .masonry {
    column-count: 1;
  }

}

/* pricing cards  */

.card.featured {
  border: 2px solid 2d1f14;
}

.price {
    font-size: 3rem;
    font-weight: 300;
}

.pricing-name {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(120,120,125);
}

.card .button {
  margin-top:2rem;
}

/* Responsive video */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container.vertical {
  padding-bottom: 162.25%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Accordian slides */

  .accordion{
    border: solid 1px  #766c5b;
    margin: 0.5%;
    }

 .accordion h4 {margin: 0;}

 .accordion p {
   margin: 0% 1% 1% 1%;
   padding: 1%;
   border-left: 2px solid #c1b9ac;}

 .accordion:hover{
   cursor: pointer;
   transition: all 0.5s;}

  .plus h4 {
    line-height: 1;
    padding: 2%;
    font-size: 1.3rem;
    font-weight: 200;
    cursor: pointer;}

 .plus h4:hover {  transform: scale(1.02);
   transition: all 0.5s;}


 .plus h4::before {
   content: "＋";
   font-size: 1.2rem;

 }
 .active h4::before {
   content: "－";
   -webkit-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
   font-size: 1.2rem;
   transition: all 0.5s ease-in;
 }


.accordion1, .accordion2, .accordion3, .accordion4, .accordion5, .accordion6, .accordion7, .accordion8, .accordion9 p {color: rgb(90, 90, 95);}

/* Accordian slides */
.panel1, .panel2, .panel3, .panel4, .panel5, .panel6, .panel7, .panel8, .panel9 {display: none;}


/* .panel1, .panel2, .panel3, .panel4, .panel5, .panel6, .panel7, .panel8, .panel9 p {
  padding: 0% 1%;
  font-size: 0.8rem;
} */

@media(max-width: 1024px){

  .bump-up-line {margin-top: -3.8rem;}
  .big-text h3 {font-size: 3.4rem;}

.device-preview-wrapper {
  position: relative;
  margin-bottom: 2%;
}

}

.home-arrow {

  margin-bottom: 0;
  font-size: 1.5rem;
  color: #766c5b;
  margin-bottom: -34px;
}

@media(min-width:769px){
    .desktop-hide {display: none;}
    

}
/* This media query kicks into action at the gridlex sm breakpoint */
@media(max-width:768px) {

   /* ---SHOP--- */
   .shopify-button 
   {
   top: 1rem;
   right: 32%;
   }

  .web-portfolio h1 {
   font-size: 5rem;
  padding-left: 0%;
  text-align: center;}

  .mob-hide {
    display: none;
    }

  .hamburger {
    display: block;
    font-size: 2rem;
  }

  .cross {
    top:0;
    right:0;
    z-index: 10;
    font-size: 0.9rem;
    padding:0% 1%;
    border-radius: 0%;
    margin: 6%;
    position: fixed;
    font-weight: bold;
    color: black;
  }

  h1 {font-size: 2rem;}
  h3 {font-size: 1.4rem;}
  h4 {font-size: 1.2rem;}

  .home-h3 
   {font-size: 2rem;}

  .big-text h3 {font-size: 2.4rem;}

  .web-dev h1 {font-size: 1.8rem;}
  .services {
    padding: 0% 3% 0% 3%;
    font-size: 0.9rem;}

  .sm-bold { font-size: 2rem;}
  .bold {
    font-size: 7rem;
    font-weight: 200;
    margin-bottom: 0.8rem;}

  .small-font{ font-size: 0.8rem}

  .margin-neg {margin-bottom: -0.5%;}

  .margin-social {margin: 3%;}

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

  .padded-top {  padding-top: 5%;  }
  .padded-bottom {padding-bottom: 2%;}
  .padded-1 {padding: 0.7rem;}

  .bg-height 
    {
    min-height: 50vh;    
    background-size: cover;
    background-repeat: no-repeat;
    }



  .border-grey {
    border: 1px solid grey;
    padding: 2rem 1rem 2rem 1rem;}

  .border {border: solid white 5px;}

  .border-top-right-bottom {
    border-top: solid white 5px;
    border-right: solid white 5px;
    border-bottom: solid white 5px;
                }

  .bump-right {
    margin-top: 0.5rem;
    margin-left: 5rem;
    margin-bottom: 0.5rem;
    margin-right: -6rem;
    z-index: 1;
    position: relative;
            }

  .bump-left {
    margin-left: -5rem;
  }

  .bump-up-line {
    margin-top: -1.8rem;
}

.device-preview-wrapper {
  
  margin-bottom: 23%;
}

  .bump-up {
    margin-top: -3.5rem;
            }
  
  .s-bump-up {
    margin-top: -8rem; }

  .bump-up-portfolio {
  margin-top: -1.5rem;}  

  .plus h4 {
      line-height: 1.5;
      font-size: 1.1rem;}

  .button {
    text-decoration: none;
    color: white;
    border: 1px solid #c1b9ac;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.7rem;
    background-color: #c1b9ac;
      }

  .arrow {
    font-size: 1rem;
    line-height: 1.3rem;
    min-width: 2.5rem;
    padding: 0.5rem;

    }

  .vertical {
    top: 18rem;
    }

  .input-text {
    font-size: 1rem;
    line-height: 1;
    padding: .5rem 0 .5rem;
    }


  .vertical-form-text {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    font-size: 2rem;
    position: absolute;
    white-space: nowrap;
    top: 9rem;
    left: -2rem;
    }


  .service-banner {  margin-bottom: -3rem;}

  .video-main {padding: 30%;}

  .blog-item-wide .bg-image{
    padding-bottom: 60%;
      }

 .blog-page {padding: 5%;}
  #body .text-bump {
    margin: -0.5rem;
  }

  .capped-width {
    width: 100%;
  }
  .flex-flip{
    flex-direction: row;
  }

  .reviews {
    font-size: 1.6rem;}

 .review img {
      max-width: 33%;
     
    }  

  .v-bump-right {
    margin-left: 11rem;}

   .sm-bump-left {
      margin-left: -3.5rem;}


}
/* end media query */


/* This media query kicks into action at the gridlex xs breakpoint */
@media(max-width:576px){

  .bg-image-content {padding-bottom: 60%;}

  /* ---- SHOP---- */
 .shopify-button 
  {
  top: 0rem;
  right: auto;
  }


  /* ------HOSTING ------  */
  .hosting-price 
    { 
    font-size: 1rem;
    }
  

  .hosting-list 
    {
    font-size: 0.8rem;
    padding: 0.5%;
    z-index: 1;
    }

  p {font-size: 0.9rem;}

  .mob-hide {
    display: none;
    }

  .small-text {font-size: 0.8rem;}
  .small-text-2 {font-size: 1.4rem;}
  .big-text h3 { font-size: 1.7rem;}

  h1 {font-size: 1.7rem;}
  h2 {font-size: 2rem;}
  h3 {font-size: 1.2rem;}
  h4 {font-size: 1.1rem;}
  .home-h3 
   { font-size: 1.4rem;    }

 

  .rotate {

    transform: rotate(-180deg);}


  .small-font{ font-size: 0.7rem}
  .web-dev h1 {font-size: 1.1rem;}

  /* portfolio  */

  .reviews {
    font-size: 1.3rem;}

  .review {font-size: 2rem;}  

  .review img {
      max-width: 50%;
    } 
  .stars 
    {
    font-size: 1rem;
    color: #2f2f2e;
    }

  .radius-100-portfolio {padding: 0.5rem;}

  .enquire-portfolio a {font-size: 1.7rem;}
  .enquire-home a {font-size: 1.2rem;}

   .enquire a {font-size: 3.2rem;} 

   .v-bump-right {
     margin-left: 4rem;}
    
   .home-bump-right {    margin-left: -2.4rem;}  

     .bump-up-line {
      margin-top: 0rem;
    }
  

  .sm-bump-left {
    margin-right: 0rem;
    margin-left: 0rem;}
  /* .services {
    padding: 0% 1.6% 0% 1.6%;
  font-size: 0.6rem;} */

  .padded-top {  padding-top: 5%;  }
  .padded-bottom {padding-bottom: 2%;}
  .padded-2 {padding: 1rem 2rem 1rem 2rem;}
  .padded-1 {padding: 0.4rem;}
  .padded-top-left-bottom {padding: 0%;}
  .margin-neg {margin-bottom: -1%;}


  .border-grey {
    border: 1px solid grey;
    padding: 1rem 1rem 1rem 1rem;}

  .border {border: solid white 2.5px;}

  .bg-height 
    {
    min-height: 30vh;    
    background-size: cover;
    background-repeat: no-repeat;
    }



  .border-top-right-bottom {
    border-top: solid white 2.5px;
    border-right: solid white 2.5px;
    border-bottom: solid white 2.5px;
      }

  .bump-left {
    margin-top: -26rem;
    margin-left: 0rem;
    margin-bottom: 0rem;
    margin-right: 0rem;
    position: relative;}

  .bump-right {
    margin-top: 0rem;
    margin-left: 0rem;
    margin-bottom: 0rem;
    margin-right: 0rem;
    position: relative;}

  .bump-up {
      margin-top: -2.5rem;
              }

  .s-bump-up {
    margin-top: -4rem;  } 

  .bump-up-portfolio
  {
  margin-top: 0rem;
    }
    
    .portfolio-2 hr {
      padding-bottom: 10rem; 
  }

  .banner-social {
      background-size: cover;
      background-position: center;
      min-height: 0vh;}

  .service-banner {  margin-bottom: 0.2rem;}

  .video-main {
    background-size: cover;
    padding-bottom: 50%;}

  .arrow {
    font-size: 1rem;
    line-height: 1.3rem;
    min-width: 2.5rem;
    padding: 0.5rem;

  }

  .small-centered{
    text-align: center;
    font-size: 0.9rem;
    }


  .vertical {
    top: 34rem;
    left: 10.5rem;
  }

  .vertical-form-text {
    font-size: 1.5rem;
    left: -1rem;}

  .input-text {
    font-size: 1rem;}

 select {
      font-size: 1rem;}
      
  .bold {
    font-size: 4rem;}

 .footer-nav {
   font-size: 0.6rem;
   padding: 0% 5% 0% 5%;
}

 .sub-footer {
   font-size: 0.7rem;
   border-top: solid 1px;
  padding-top: 1rem;}
}

@media(max-width:375px) {

  .big-text h3 { font-size: 1.2rem;}

}


/* end media query */