body, html {
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
   
    font-family: 'Poppins',sans-serif;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-color: #142435;
}

html {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}

section {background-color: white; border: none;}


  
@font-face {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default;
}
@media (min-width: 768px) {.footer-col.padding {margin-top: 15px;}}
@media (min-width: 950px) {.button.right.whatwedo {margin-top: -30px;}}
/* TEXT CSS */

p span {font-weight: 700; padding-bottom: 20px!important;}
h1 {font-size: 3.5em; font-weight: 800; text-transform: uppercase; color: rgb(34, 60, 83);}
h2 {font-size: 2.5rem; font-weight: 700; color: #223C53; text-transform: none;}
p {font-size: 16px; color:#303030; font-family: 'Poppins',sans-serif; line-height: 1.8;}
h3 {font-size: 19px; font-weight: 700; }
h5 {font-size: 18px; font-weight: 700; background: linear-gradient(to bottom right,rgb(198, 99, 45),rgb(196, 125, 90)); line-height: 1.3;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;; text-align: center;}

@media (max-width: 768px) { h1 {font-size: 35px!important}}

@media (max-width: 768px) { h2 {font-size: 30px!important;}}
@media (max-width: 768px) { p {font-size: 14px; color:#303030;}}
@media (max-width: 768px) { h5 {font-size: 15px!important;}}

@media (min-width: 768px) and (max-width: 1600px) { h1 {font-size: 50px!important}}

@media (min-width: 768px) and (max-width: 1600px) { h2 {font-size: 35px!important;}}
@media (min-width: 768px) and (max-width: 1600px) { p {font-size: 15px; color: #303030;}}
@media (min-width: 768px) and (max-width: 1600px){ h5 {font-size: 16px!important;}}
@media (min-width: 650px) and (max-width: 1600px){ h3 {font-size: 17px!important;}}

/* SITE ANIMATIONS */

@media screen and (orientation:landscape) { @media (hover:none) {.hovereffect p.portfolio-links {top: 51%!important;}} }

@media screen and (orientation:landscape) {  @media (hover:none) {.banner-text {margin-top: 20px!important;}} }

@media (hover:none) {
  img.logos {display: none!important;}
  .hovereffect.hover:hover p  {display: none!important;}
  .hovereffect.hover:hover p.portfolio-links {display: block!important; top: 54%;}
}

/* BUTTON CSS */

.button-container {
        height: 5em;
        max-width: 1400px;
        width: 100%;
       
        margin: auto;
        display: flex;
       
      }
     .button-portfolio {
       display: none;
        position: absolute;
        top: 65%!important;
        left: 48%!important;
        transform: translate(-50%, -50%);
       width: 100%!important;
       margin: auto;
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 20px;
    transition: 0.5s;
    color: #c47d5a!important;

      }
      .button-portfolio:hover {
       
     color: white!important;
     cursor: pointer;
 
       }

     @media (min-width: 1200px) { .button-containers {
          display: flex;
      }
      .button-lefts {float: left; width: auto; margin-right: 10px;}
      .button-rights {float: right; width: auto; margin-left: 10px;}}

button {cursor: pointer;}

@media (max-width: 768px) {.button-container {
    
        
        width: 100%;
        
        margin: auto;
       
      }
    .client-container.software {width: 100%!important;} #app-software {padding: 10px!important;}
  .col-sm-2.logo {width: 50%!important;} .client-logo.app {width: 65%!important; margin: auto!important;}
}

.medium-button {
    background: transparent; transition: 0ms;}

    .medium-button.portfolio {
        background: transparent; transition: 0ms; color: white!Important; border-color: white!important;}
        .medium-button.portfolio:hover {
            transition: ease-in all 0.3s; color: white!Important; border-color: #C47D5A!important;}

    .contact-button.ethos { border: solid 1px white!important; color: white;}

    .medium-button {
    width: 100%;
    padding: 1rem 3rem;
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-size: 15px;
    transition: 0.5s;
    color: #223C53;
    border: solid 1px #223C53;
   /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
   }

   @media (max-width: 768px) { .medium-button {
   font-size: 14px!important; padding: 1em 3em; margin-top:150px;}}

   @media (max-width: 768px) { .contact-button {
    font-size: 14px!important; width: 200px!important; height: 55px!important;}}

    @media (min-width: 768px) { .service-grid.button-container {margin-top: 0px!important}} 

    @media (max-width: 650px) {.ethos-right {display: none;}}
    @media (min-width: 650px) {.ethos-left.mobile {display: none;}}
    .ethos-left.mobile li {font-family: 'Poppins', sans-serif; font-size: 15px; color: #717171; letter-spacing: 0px; line-height: 1.2; font-weight: 700;}

   .contact-button {
    text-align: center; 
    width: 250px;
    text-transform: uppercase; 
    font-weight: 700; 
    margin: 0;
    font-size: 15px;
    transition: 0.5s;
    background-color: transparent;
    background: transparent;
    color: #223C53;
    height: 60px;
    border: solid 1px #223C53;
    margin-top: 15px;
   /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
   }

   @media (max-width: 1600px) and (min-width: 900px) {
    .contact-button {
      text-align: center; 
      width: 190px!important;
      height: 50px!important;
      font-size: 13.5px!important;
   }
}
@media (min-width: 640px) and (max-width: 900px) {
  .large-container.remote {flex-direction: column;}
  .remote-right, .remote-new {width: 100%!important;}
  .remote-new {order: 1;}
}
@media (min-width: 900px) {
  .remote-new {padding-right: 50px;}
  .remote-new {width: 45%; display: flex; align-items: center; margin-bottom: auto;}
  .remote-right {width: 70%;}
}
.remote-new img {border-radius: 20px;}

   .accordion {
    padding: 1rem 3rem;
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
    margin: 0;
    font-size: 15px;
    transition: 0.5s;
    background-color: transparent;
    background: transparent;
    color: #223C53;
    border: solid 1px #223C53;
    margin-top: 15px;
   /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
    cursor: pointer;
   
  }

  .accordion::after {display: none;}

.medium-button:hover {border: solid 1px #C47D5A; background-color: #C47D5A; color: white;
}

.contact-button:hover {border: solid 1px #C47D5A; background-color: #C47D5A; color: white;
}

.accordion:hover {border: solid 1px #C47D5A; background-color: #C47D5A; color: white;
}

.contact-button.ethos:hover {border: none!important; background-color: #C47D5A; color: white;
}

.medium-button-centre{
    margin: 0;
    position: absolute;
    top: 84%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  @media (min-width: 650px) {.large-container.services .button-container {
      max-width: 1400px;
      width: 50%;
  }}

  @media (max-width: 768px) {.large-container.services.collage {
    padding-bottom: 0em!important; padding-top: 0em!important;
}
.what-we-do-intro {width: 100%!important;}}
.what-we-do-intro h3 {font-size: 20px!important;}

.large-container.services.collage {
  padding-bottom: 0em!important; padding-top: 0em!important;}



  @media (min-width: 650px) {.button-left {
    position: absolute;
    top: 84%;
    left: 50%;
    transform: translate(18%, -50%);
    width: 100px!important;
  }}

  .button-center {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


 @media (max-width: 768px)  {.button-center {
    position: absolute;
top: auto;
    left: 50%;
    transform: translate(-50%, -50%); 
    margin-bottom: -10%;
  }}

  @media (min-width: 1200px) {
      .button-center {margin-top: -40px;}
  }

  @media (max-width: 650px) {.large-container.services .button-container {
    max-width: 1400px;
    width: 100%!important;
  }}

  @media (max-width: 900px) and (min-width: 650px) {.large-container.services .button-container {
    margin-top: 50px!important;
  }}

  @media (min-width: 650px) { .button-right {
    position: absolute;
    top: 84%;
    left: 50%;
    transform: translate(-120%, -50%);
   
  }}

  @media (max-width: 650px) { .button-right {
    position: absolute;

    left: 50%;
    transform: translate(-50%, -50%);

  }}
  @media (max-width: 650px) { .button-left {
    position: absolute;
    
    left: 50%;
    transform: translate(-50%, -50%);
  }}

  @media (max-width: 650px) { .button-container.mob {
    margin-bottom: -70px!important;
  }}

header {
    display: block;
}

/* Dropdown Button */
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 0px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  height: 40px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #223C53;
  border: solid 1px #c47d5a;
  min-width: 160px;
  margin-left: 15px;
  margin-top: 10px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white!important;
  padding: 2px 16px;
  text-decoration: none;
  font-size: 16px!important;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {color: #bbb!important;}
.dropdown-content a:hover {text-decoration: none!important; border-bottom: none!important;}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block; animation: fadeIn 0.75s;}
.dropdown-content:hover .dropdown-content {display: block;}


ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px!important;
}

header.head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 9999;
      animation: preFade 1s;
}

@media (max-width: 768px) {header.head {height: 100px;}}

.banner-text hr {
    max-width: 175px; left: -43.4%; position: relative; border-bottom: solid 3px #C47D5A!important; border: none; background-color: #223C53; height: 10px; margin-top: 10px;}

@media (max-width: 768px) {.banner-text hr {
    max-width: 75px; left: -39.5%; position: relative; border-bottom: solid 2px #C47D5A!important; border: none; background-color: #223C53; height: 8px; margin-top: 10px;}}

header.head .nav-bar {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    height: 100%;
    animation: preFade 1s;
}

.nav-bar, .nav-bar-section li a:not(.button), .nav-bar-section ul {
    background: 0 0;
}

.nav-bar {
    height: 50px;
    position: relative;
    margin-bottom: 1.875em;
}

.head img.top {
    width: 90px;
    height: auto;
}

@media (max-width: 768px) {.head img.top {
    width: 80px; margin-top: -5px; margin-left: -7.5px;
}}

@media (max-width: 768px) {.head.scroll img.top {
    width: 70px; margin-top: 0px;
}}



@media (min-width: 768px) {.head.scroll img.top {
    width: 75px;
    transition: all 250ms linear;
}}

@media only screen and (min-width: 768px) {
nav.nav-bar .title-area {
    float: left;
    animation: preFade 0.5s;
}}


    .top-bar-section {
        float: right;
    }


@media (min-width: 650px) and (max-width: 950px) {
    #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
        width: 25px;
        height: 40px;
        position: absolute;
        left: 90%!important;
        top: 20%;
}}

    #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
        width: 25px;
        height: 40px;
        position: absolute;
        left: 85%;
        top: 20%;
        margin: 0px auto;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 3000000!important;
      }

      @media (max-width: 950px) {
        #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { margin-top: 7.5px!important;}
      }

      @media (max-width: 768px) {
       header.head.scroll #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { margin-top: 0px!important;}
      }
    
      #nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
        display: block;
        position: absolute;
        height: 1.75px;
        width: 100%;
        background: #ffffff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
      }
      
      #nav-icon1 span:nth-child(1) {
        top: 0px;
      }
      
      #nav-icon1 span:nth-child(2) {
        top: 10px;
      }
      
      #nav-icon1 span:nth-child(3) {
        top: 20px;
      }
      
      #nav-icon1.open span:nth-child(1) {
        top: 12px;
        margin-bottom: 10px!important;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
      }
      
      #nav-icon1.open span:nth-child(2) {
        opacity: 0;
        margin-bottom: 10px!important;
        left: -60px;
      }
      
      #nav-icon1.open span:nth-child(3) {
        top: 12px;
        margin-bottom: 10px!important;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
      }
      

    header.head.scroll  #nav-icon1 span, #nav-icon3 span, #nav-icon4 span  {background: #223C53!important; margin-top: 8px;}


    .fa.fa-bars {font-size: 30px!important; font-weight: 100; -webkit-text-stroke: -30px white;}


@media (min-width: 925px) {#nav-icon1 {display: none;}}

@media only screen and (min-width: 58.75em)
{
nav.nav-bar .title-area {
    padding: 20px 0 0!important;
    height: 100%;
}}

@media only screen and (max-width: 58.75em)
{
nav.nav-bar .title-area {
    padding: 20px 0 0!important;
    height: 100%;
    float: left;
}}

@media only screen and (min-width: 58.75em)
{
    .top-bar-section  {
    padding: 0px 0 0!important;
    height: 100%;
}}

@media only screen and (max-width: 768px)
{
    .top-bar-section  {
    padding: 42px 0 0!important;
    height: 100%;
}}

/* MOBILE NAV */

@media (min-width: 925px) {.mobileNav {display: none;}}

@media (max-width: 925px) { header.head.scroll {display: none;} .top-bar-section {display: none; animation: ease-out all 1.5s!important;}}
.mobileNav p {padding: 6px; margin: 0; text-align: left!important;}
  
.mobileNav {
  overflow: hidden;
  transition: 0.4s; 
  position: fixed; 
  max-width: 100vw!important;
  width: 100%!important;
  margin: 0 0rem;
  left: 0%;
  top: 0%; 
  z-index: 1000;
background-color:#223c53e6; 
transition: all 0.5s ease!important;}

/* Hide the links inside the navigation menu (except for logo/home) */
.mobileNav #myLinks {
  display: none;
  margin: auto;
  margin-top: 20vh;
  height: 100vh;
  left: 0%;


}

@media (max-width: 768px) { .footer-container.preFade {animation: none!important; transition: none!important; opacity: 1!important;}}

/* Style navigation menu links */
.mobileNav a {
  color: white;
  padding: 10px;
  text-align: center;
  font-family: 'Poppins' 'Sans Serif';
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
}

/* Style the hamburger menu */



/* Add a grey background color on mouse-over */

/* Style the active link (or home/logo) */
.mobactive {
  background-color: white;
  color: white;
}


/* The subnavigation menu */
.subnav {
    float: left;
    overflow: hidden;
  }
  
  /* Subnav button */
  .subnav .subnavbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  /* Add a red background color to navigation links on hover */
  .navbar a:hover, .subnav:hover .subnavbtn {
    background-color: red;
  }
  
  /* Style the subnav content - positioned absolute */
  .subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: red;
    width: 100%;
    z-index: 1;
  }
  
  /* Style the subnav links */
  .subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
  }
  
  /* Add a grey background color on hover */
  .subnav-content a:hover {
    background-color: #eee;
    color: black;
  }
  
  /* When you move the mouse over the subnav container, open the subnav content */
  .subnavbtn:hover .subnav-content {
    display: block;
  }

header.head  a {color: white; text-decoration: none; margin: 15px; font-size: 18px; font-weight: 600; text-transform: uppercase; margin-top: 20px; }
@media (min-width: 850px) {.top-bar-section a:hover {border-bottom: 1px solid #C47D5A;  transition: ease-in 0.5s;}}
@media (min-width: 900px) { a.active {border-bottom: 1px solid #C47D5A;}}
header.head.scroll  a {color: #223C53; text-decoration: none; margin: 15px; font-size: 18px;}
header.head.scroll a:hover {background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;}

header.head .top-bar-section {padding-top: 52px!important; transition: all 300ms linear;}
header.head.scroll .top-bar-section {padding-top: 37px!important; transition: all 300ms linear;}
header.head.scroll .title-area {padding-top: 2px!important; transition: all 300ms linear;}


@media (max-width: 768px) { header.head.scroll .top-bar-section {padding: 30px 0 0!important;}}
header.head.scroll .title-area {padding: 10px 0 0!important; transition: all 300ms linear;}
@media (max-width: 768px) { header.head.scroll .title-area {padding: 7.5px 0 0!important;}}
#home-introduction  p {line-height: 1.8;}

.header-inner.scroll {background-color: rgb(255, 255, 255); height: 95px!important; transition: all 300ms linear;box-shadow: rgba(51, 51, 51, 0.28) 0px 5px 9px 0px;}
header.head.scroll {
overflow-y: visible;
box-sizing: border-box;
color: rgb(0, 0, 0)!important;
cursor: default;
display: block;
font-family: Poppins, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
height: 95px;
left: 0px;
line-height: 16px;
position: fixed;
right: 0px;
top: 0px;
transition: all 300ms linear;
width: 100%;
z-index: 99999;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 650px) and (max-width: 900px) { .header-inner.scroll 
    {height: 90px!important; background-color: rgb(255, 255, 255); transition: all 300ms linear;box-shadow: rgba(51, 51, 51, 0.28) 0px 5px 9px 0px;}
  }

    @media (max-width: 650px)  { .header-inner.scroll 
      {height: 85px!important; background-color: rgb(255, 255, 255); transition: all 300ms linear;box-shadow: rgba(51, 51, 51, 0.28) 0px 5px 9px 0px;}

    }

    @media (max-width: 768px)
{.header-inner.scroll #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
    margin-top: 0px!important;
}
.nav-bar {height: 85px!important;}
}

      


 
#home-banner {
    z-index: 0;
    width: 100%;
    padding: 0!important;
    background-color: rgb(0, 0, 0);
}

.banner-container {
    overflow: hidden;
    width: 100%;
    height: 103vh;
    margin-top: -3vh;
    background: rgb(0, 0, 0);
    background-color: black;
    opacity: 1;
    
}

@media (max-width: 700px) {
    .banner-container {
        height: 90vh;
    }  
}

.banner-container.page {
    overflow: hidden;
    width: 100%;
    height: 65vh!important;
    margin-top: -3vh;
    background: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    opacity: 1;
}

.banner-container.website  {
  overflow: hidden;
  width: 100%;
  height: 65vh!important;
  margin-top: -3vh;
  background: linear-gradient(to right,#142435,#223C53);
  opacity: 1;
}

.banner-container.contact {
    overflow: hidden;
    width: 100%;
    height: 65vh!important;
    background: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    opacity: 1;
}
.banner-container.portfolio {
    overflow: hidden;
    width: 100%;
    height: 65vh!important;
    margin-top: 0vh;
    background: rgb(20, 36, 53);
    background-color: #142435;
    opacity: 1;
}

.banner-container.whatwedo {
    overflow: hidden;
    width: 100%;
    height: 60vh!important;
    margin-top: -3vh;
    background: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    opacity: 1;
}

.banner-container.contact {
    
    background: #0e1925;
    background-color: #060d16;
    opacity: 1;
}


.banner-wave-wrap {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 150px;
    z-index: 3;
    transform: translateZ(0);
    animation: preFade 1s;
}

.banner-wave-divider {
    width: 100%;
    left: 0;
    bottom: -1px;
    height: 100%;
    position: absolute;
    fill: #FFFFFF;
}

.banner-wave-divider.home {
    fill: #ffffff;
}


.banner-image {
    background: url(../images/home_banner_overlay.jpg) no-repeat center center;    
    background-position-y: 50%;
    background-size: cover;
    height: 103vh;
    background-color: #223c532d;
background-blend-mode: overlay;
    padding: 0;
   
}

@media (max-width: 650px) {
  .banner-image.white { transform: scale(1.2);} 
  .banner-image.page {
    background: url(../images/who_we_are.jpg) no-repeat center center;    
    background-position-y: 20%!important;
    background-size: cover;
    height: 65vh;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}
}
@media (min-width: 650px) and (max-width: 960px) {
    .banner-image.white { transform: scale(1);}}
.banner-image.page {
    background: url(../images/who_we_are.jpg) no-repeat center center;    
    background-position-y: 30%;
    background-size: cover;
    height: 65vh;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}

.banner-image.apps {
    background: url(../images/apps_banner.jpg) no-repeat center center;    
    background-position-y: 30%;
    background-size: cover;
    height: 70vh;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}

.banner-image.white {
  background: url(../images/portfolio_banner.jpg) no-repeat center center; 
  background-size: cover;  background-position-y: 30%;
  background-size: cover;
  height: 65vh;
   /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
  padding: 0;}


@media (min-width: 768px) {.about-picture.zone img {margin-top: 50%;}}

.banner-image.content {
  background: url(../images/content_banner.jpg) no-repeat center center; 
    background-size: cover; background-position-y: 80%;
    height: 65vh;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}

@media (min-width: 650px) {.device {width: 80%;  margin:
auto;} .iphone {margin-top: 30px!important; width: 95%;} .ipad-device {width: 90%; margin-top: 20px; margin-left: 60px;} .imac {margin-bottom: -30px!important;}}

@media (min-width: 650px) {
  .device.iphone {width: 60%!important;}
}

.banner-image.contact {
    background: url(../images/lets_talk_banner.jpg) no-repeat center center;    
    background-size: cover;
    height: 65vh;
    background-position-y: 85%!important;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}

.banner-image.zone {
  background: url(../images/zone_secure_banner.jpg) no-repeat center center;    
  background-size: cover;
  height: 65vh;
  background-position-y: 45%;
  /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
  padding: 0;
}

@media (min-width: 1600px) {
    .banner-image.contact {
        transform: scale(1);
    }
}

.web-apps {background-color: #f4f4f4;}
.banner-image.micad {background: linear-gradient(to right,#142435,#223C53) ; height: 65vh;}

.banner-image.whatwedo {
    background: url(../images/what_we_do_banner.jpg) no-repeat center center;    
    background-position-y: 89%;
    background-size: cover;
    height: 65vh!important;
    /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
    padding: 0;
}
@media (max-width: 768px) {
  .banner-image.whatwedo { background-position-x: 85%;
}}

@media (min-width: 768px) and (max-width: 1300px) {
  .banner-image.whatwedo { background-position-x: 95%;
}}

.banner-image.websites {
  background: url(../images/website_banner.jpg) no-repeat;  
  background-position-y: 5%;
  background-size: cover;
  background-position-X: 100%;
  height: 65vh!important;
  background-color: #0000004e;
  background-blend-mode: overlay;
  /*clip-path: polygon(00% 00%, 0% 90%, 50% 99%, 100% 90%, 100% 0%);*/
  padding: 0;
}



.logo-client.staff.specific {filter: grayscale(100)!important;}

@media (max-width: 768px) {
  .about-picture.stc {padding: 0em!important; width: 60%!important; margin: auto;}
  #contact.mobile {border-top: solid 2px #eaeaea;}
}


@media (max-width: 768px) {
  .banner-text.website {
    margin-top: -20%;
}}
@media (min-width: 767px) and (max-width: 900px) {
    .banner-text.website {
      margin-top: -10%;
  }
  .large-container.services.home {margin-bottom: -9em;}
  .full-container.portfolio {margin-bottom: -7em;}
.slideshow-container.stc {height: 500px!important; margin-bottom: 50px;}}

#contact {border-bottom: solid 2px #C47D5A!important;}

.banner-image.claire {
    background: url(../images/claire_penn_banner.jpg) no-repeat center center; background-position-y: 70%; background-size: cover; }
@media (max-width: 1200px) {.banner-image.claire {
      background: url(../images/claire_penn_banner.jpg) no-repeat center center; background-position-y: 70%; background-position-x: 68%; background-size: cover; }}

      @media (max-width: 768px) {.banner-image.claire {
        background: url(../images/claire_penn_banner.jpg) no-repeat center center; background-position-y: 70%; background-position-x: 50%; background-size: cover; }}

    .banner-image.brackley {
        background: url(../images/brackley_page_banner.jpg) no-repeat center center; background-position-y: 58%!important; background-size: cover; height: 65vh; }
        @media (max-width: 768px) {  .banner-image.apps {
         background-position-x: 60%!important;}}

        .banner-image.stc {
          background: url(../images/silverstone_banner.jpg) no-repeat center center; background-position-y: 3%; background-size: cover; height: 65vh; }

@media only screen and (min-width: 768px)
{
.banner-text {
    position: relative;
    width: 100%;
}}

.banner-text {
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: left;
    color: #fff!important;
max-width: 1400px;
width: 90%;
margin: 0 auto;
    padding-left: 15px;
    animation: preFade 2s;
    transition-delay: 0.5s;
}

.client-heading {max-width: 1400px; width: 90%; margin: auto; padding-top: 20px}

@media (min-width: 650px) {.office img {border-radius: 15px; box-shadow: rgba(51, 51, 51, 0.28) 0px 5px 9px 0px;}}
@media (max-width: 650px) {.office img {box-shadow: rgba(51, 51, 51, 0.28) 0px 5px 9px 0px;}
.banner-image.brackley {
  background: url(../images/brackley_page_banner.jpg) no-repeat center center; background-position-y: 45%!important; background-size: cover; height: 65vh; }}

.banner-text h1 {
    color: #fff!important; font-size: 3vw;    
}

.banner-text p {

    color: #fff!important;
}

section, .section {
    position: relative;
    width: 100%;


}

@media (min-width: 768px) {.small-container {
    max-width: 900px;
    padding: 0;
    width: 80%;
    margin: auto;
}}

@media (max-width: 768px) {.small-container {
    padding: 0;
    width: 85%;
    margin: auto;
}
.web-photo.content {width: 100%!important;}}

@media (max-width: 650px) {
    .large-container {
      display: flex;
      flex-direction: column;
        max-width: 1250px;
        padding: 0;
        margin: auto;
    position: relative;
            width: 75%;}
            .about-picture.stc {padding: 0em!important; width: 80%!important; margin: auto;}
           .button-right.home {
            top: 89.5%;
          }
          .button-left.home {
            top: 94%
          }
          }

@media (min-width: 650px) and (max-width: 900px) {
    .large-container {
      display: flex;
      
        max-width: 1250px;
        padding: 0;
        margin: auto;
    position: relative;
            width: 75%;}}

            @media (min-width: 650px) {
              .large-container.contentbuttons {
                display: flex;
                
                  max-width: 1250px;
                  padding: 0;
                  margin: auto;
              position: relative;
                      width: 75%;}}


            @media (min-width: 650px) and (max-width: 900px) {
              .large-container.icons {
                display: flex;
                
                  max-width: 1250px;
                  padding: 0;
                  margin: auto;
              position: relative;
                      width: 100%;}
                     
                    .about-picture.content {width: 70%!important; padding: 0em!important; margin: auto; padding-top: 2em!important;}}

@media (min-width: 768px) {
.large-container {
    padding: 0;
    margin: auto;
position: relative;
        width: 80%;
        max-width: 1250px;
}}


@media (min-width: 768px) { .full-container {
    
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    background-color: #223c53;
}}

@media (min-width: 768px) { .full-container.ethos{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    background: linear-gradient(to bottom right,#142435,#223C53); 
}}

@media (min-width: 768px) and (max-height: 1000px) { .full-container.ethos{
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  background: linear-gradient(to bottom right,#142435,#223C53); 
}}

@media (max-width: 768px) { .full-container {
    
    width: 100vw;
   
}}

@media (max-width: 768px) { .full-container.ethos{
    width: 100%;
    
}}



#home-banner a {
    padding-top: 60px;
  }
  #home-banner a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }
  #home-banner a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
  #home-banner a span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb03 3s infinite;
    animation: sdb03 3s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
@media (max-width: 768px) {
    .demo a {
        bottom: 10px!important; 
        font : normal 400 14px/1 'Josefin Sans', sans-serif!important;
        left: 47%!important;
        visibility: hidden;
}}
.demo a {
    position: absolute;
    left: 48.7%;
    bottom: 30px;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    font : normal 400 18px/1 'Poppins', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
    animation: preFade 3s;
  }
  .demo a:hover {
    opacity: .5;
  }


a.anchor {
    display: block;
    position: relative;
    top: -300px;
    visibility: hidden;
}

section.pad, .section.pad {
    padding: 5.8em 0;
}

@media (min-width: 768px) and (max-width: 1600px) { section.pad, .section.pad {
    padding: 4.8em 0;
}}

@media (max-width: 768px) {
  
section.pad, .section.pad {
    padding: 4.8em 0;
}  
}

@media (max-width: 650px) {
  
  section.pad, .section.pad {
      padding: 4em 0;
  }  
  }

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

#services-overview {
    margin: 0 -2em;
 
}





#services-overview {
    margin-top: -8rem;
    padding-bottom: 9em;
}


@media (min-width: 650px) and (max-width: 900px) {#services-overview {
    margin-top: -5rem;
    padding-bottom: 1em;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}}

@media (max-width: 650px ) {#services-overview {
    margin-top: -6rem;
    padding-bottom: 1em!important;
}
.about-picture.content {width: 90%!important; padding: 0em!important; margin: auto; padding-top: 2em!important;}}
@media (min-width: 768px) {.about-picture.content {margin-top: 40px;}}

@media (max-width: 768px) {
    .client-container {
        max-width: 1500px!important;
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        align-items: center;
        padding: 0.5em 0em;
        margin: auto;
    
    }
}

.client-container {
    max-width: 1500px;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    padding: 2em 0em;
    margin: auto;

}

.col-sm-services {display: flex; float: left; width: 25%; justify-content: center;     text-align: center;
}
@media (max-width: 500px) {
  .col-sm-services {float: left; width: 50%!important; flex: 50%; justify-content: center; text-align: center; padding: 10px;
  }
  .services-container {max-width: 1500px!important;
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    padding: 0em 0em;
    margin: auto;
  padding-bottom: 2em; margin-top: 0!important;}
}
@media (min-width: 500px) {.services-container {max-width: 1000px; margin-top: -2em; width: 90%; padding-bottom: 4em; display: flex; justify-content: center;}}

.services-image {height: auto; width: 90px; height: 90px; margin: auto!important;}
.client-container.webs {
  max-width: 900px;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0em 0em;
  margin: auto;
  margin-top: -3em!important;

}



@media (min-width: 650px) {
    .large-container.services.home {
        padding-bottom: 9em!important; 
}}

.large-container.services {
    max-width: 1500px!important;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    padding: 6em 0em;

}

@media (min-width: 768px) and (max-width: 1600px) {
    .large-container.services {
        padding: 4.8em 0em;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
  .large-container.services.collage {
      padding-bottom:0em!important;
  }
}
@media (max-width: 800px) { section#app-features {padding: 2.5em 0!important}
.app-picture.icon {margin-top: 0em!important;}}

@media (max-width: 768px) { .large-container.services { width: 100%;
}
section.mobile-pad {padding: 1.5em 0em!important;}}

@media (min-width: 768px) { .large-container.clients {

        width: 100%;

}

}



.large-container-2 {
    max-width: 1300px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
}

@media (min-width: 650px) {#services-overview .service {
    width: 24.9%;
    float: left;
    text-align: center;
}}

@media (max-width: 650px)
{ #services-overview .service {
    width: 50%!important;
    padding: 1em;
    margin: auto;
    float: left;
    text-align: center;

}}

.client-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1400px;
    width: 100%;
    margin-top: 40px;
}
.client-grid.web {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
  max-width: 1400px;
  width: 100%;
  margin-top: 0px
}

@media (max-width: 768px) {.client-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1500px;
    width: 100%;
    margin-top: 20px;
}}


.company {
    border: solid 1.5px #e8e8e8;
padding: 20px;
    position: relative;
    margin: 0 0 60px;
}

@media (max-width: 768px) {.company {
padding: 10px!important;
margin: 0 0 20px;

}}

.logo-client {position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -0%);
width: 100%;}

.logo-client.staff {filter: grayscale(0)!important;}
.logo-client.staff:hover {filter: grayscale(0)!important; opacity: 0.8!important; background-color: transparent;}

@media (min-width: 768px) {.col-team.staff h2 {font-size: 21px!important;}}
@media (max-width: 1000px) {.col-sm-6 {
    position: relative;
    width: 100%;
    padding-right: 10px;
  padding-left: 10px;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    float: left;
}}

@media (min-width: 1000px) {.col-sm-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
  padding-left: 15px;
    flex: 0 0 20%;
    max-width: 20%;
    float: left;
}}

.clients-overview {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1100px;
    width: 80%;
    margin-top: 40px;
}


@media (min-width: 1000px)
{#services-overview .service + .service {
    border-left: 1px solid #f0f0f0;
}}

.background  {background-repeat: no-repeat;}

#services-overview .service .icon {
    position: relative;
    width: 4em;
    height: 4em;
    margin: 0 auto 2em;
}


.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f0f0f0 50% 50% no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    text-indent: -999px;
}

.background[style*=".gif"], .background[style*=".png"], .background[style*=".svg"] {
    background-color: transparent;
}

#what-we-do {
    position: relative;
    margin: 0px auto;
}

.svg.top {width: auto; height: auto;}

.full-container {
    
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    background-color: #223c53;
}



.what-we-do-left {
    width: 50%;
    position: relative;
    background-size: cover;
    border: none;

}
@media (max-width: 685px) {.what-we-do-left {
    width: 100%;
    background-size: cover;
    border: none;

}
.what-we-do-image {width: 100%; object-fit: cover; object-position: center center; height: 35vh!important;}
.what-we-do-right {
    width: 80%!important;
    margin: auto;
    padding-bottom: 125px;
    margin-top: 75px;

}
}

@media (min-width: 1050px) {.text-container {position: absolute; top: 20%;}}

@media (max-width: 675px) {
  .project-left {width: 100%!important;}
}

.what-we-do-image {width: 100%; object-fit: cover; object-position: center center; height: 75vh;}

@media (max-height: 875px) and (min-width: 900px) {.what-we-do-image {width: 100%; object-fit: cover; object-position: center center; min-height: 90vh;}}

@media (max-height: 700px) and (min-width: 900px) {.what-we-do-image {width: 100%; object-fit: cover; object-position: center center; min-height: 100vh;}}

@media (min-width: 685px) {.what-we-do-right {
    width: 35%;
    max-width: 850px;
    margin-left: 7rem;
   
    
}}

@media (min-width: 685px) and (max-width: 1200px) {.what-we-do-right {
    
    margin-left: 3rem;
    width: 43%;
    
}}
@media (max-width: 650px) { .large-container.services {padding-top: 3em!important;}}
@media (min-width: 675px) and (max-width: 1200px) {
    .what-we-do-right  p {line-height: 2;font-weight: 600; font-size: 1.4vw!important; }}
    @media (min-width: 650px) and (max-width: 1050px) {
      .what-we-do-right  p {line-height: 2;font-weight: 600; font-size: 18px!important; }}

 @media (min-width: 1200px) and (max-width: 1600px) {
        .what-we-do-right  p {line-height: 2;font-weight: 600; font-size: 1.4vw!important; }}

@media (min-width: 768px) and (max-width: 1600px) {
        .what-we-do-right  h1{font-size: 3.3vw!important; }}
@media (min-width: 768px) {
    .what-we-do-right  p {line-height: 2;font-weight: 600; font-size: 1.1vw;     
   padding-top: 10px; color: white;}

.what-we-do-right  h1 {line-height: 1; margin-top: -1rem;  text-transform:none; background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;  font-weight: 700;}

.what-we-do-right  h4 {line-height: 2; color: white;  background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;}

.what-we-do-right  h3 {line-height: 1.4; margin-top: -1rem; padding-bottom: 1rem; font-size: 0.9vw; font-weight: 300; color: white;}}

@media (max-width: 768px) {
    .what-we-do-right  p {line-height: 2;font-weight: 600; font-size: 16px;     
   padding-top: 5px; color: white;}

.what-we-do-right  h1 {line-height: 1; margin-top: -1rem;  text-transform:none; background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;  font-weight: 700;}

.what-we-do-right  h4 {line-height: 2; color: #C47D5A;  background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; margin-top: 50px!important;}

.what-we-do-right  h3 {line-height: 1.4; margin-top: 2rem!important; padding-bottom: 1rem; font-size: 0.9vw; font-weight: 300; color: white;}}

h3.h4 {font-size: 1.3rem; letter-spacing: 2.5px;
    text-transform: uppercase; 
    text-decoration: none!important; 
    background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent;}

    @media (max-width: 768px) { h3.h4 {font-size: 17px;}}





    .services_title p {
        text-align: left!important;
    }



    #services-home:after, #services-home:before {clear: both;}

#services-home 
{
    position: relative;
    margin: 0px auto;
    width: 100%;
    padding: 6em 0;
}

.number-block.home {background: rgb(251, 251, 251); border-bottom: solid 2.5px #c47d5a!important; border-radius: 15px;}
.number-block {border-radius: 15px; }

@media (min-width: 768px) {.services-heading   {width: 60%; padding-bottom: 30px; margin: auto;}}
@media (min-width: 768px) {.services-heading.home   {width: 60%; padding-bottom: 30px; margin-top: -30px;}}
@media (max-width: 768px) {.services-heading   {width: 80%; padding-bottom: 30px; margin: auto;}}

@media (max-width: 768px) {.services-heading h5  {font-weight: 600!important; line-height: 1.3!important;}}
  
.service-description  p {text-align: center; width: 100%; font-size: 15px!important;  padding-bottom: 15px; font-weight: 400; text-rendering:geometricPrecision!important;}
.service-description .button-text {text-align: left; }
.services-heading  h2 {text-align: center; width: 100%;}
.services-heading  h5 {text-align: center; width: 100%;  font-weight: 500; color: #474747!important; letter-spacing: 1.5px; line-height: 1.5;}


.services h5 {text-transform: uppercase; font-size: 18px; margin-bottom: 0rem; font-weight: 600;}



.services img {
    max-height: 80px;
    display: block;
    margin: 0 auto 19px auto;
}

.service-description {max-width: 90%; margin: auto;}

@media (max-width: 768px) {
    .services h3 { font-size: 20px!important;
}}
.services h3 {
    font-size: 24px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none!important;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
    background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-description.home h3 {
  font-size: 30px!important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none!important;
  line-height: 1;
  margin-top: 15px;
  font-weight: 700;
  text-align: left;
  background: linear-gradient(to bottom right,#c6632d,#C47D5A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1600px) and (min-width: 768px) {.service-description.home h3 {
  font-size: 26px!important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none!important;
  line-height: 1;
  margin-top: 15px;
  font-weight: 700;
  text-align: left;
  background: linear-gradient(to bottom right,#c6632d,#C47D5A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}}

.services p {
    
    font-size: 1rem;
    text-align: left;
    line-height: 1.4;
    color: #223C53;
}

.button-text {
    background: linear-gradient(to bottom right,#223C53,#142435); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    text-align: left!important;

}

.button-text:hover { background: linear-gradient(to bottom right,#c6632d,#ffa476);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;}



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

@media (min-width: 1000px) {.col-sm-33 {
    position: relative;
    width: 100%;
    padding-right: 15px;
  padding-left: 15px;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    float: left;
    /*border-bottom: solid 6px #C47D5A;*/
}}

@media (max-width: 650px) {.col-sm-33 {width: 100%!important; 
   }}
   @media (max-width: 1000px) {.col-sm-33.services {width: 100%!important; flex: 100.00%; max-width: 100%;
   }}

   @media (max-width: 650px) {.col-sm-3 {width: 100%!important; 
   }}


   @media (max-width: 1200px) and (min-width: 650px) {.col-sm-3.page {width: 50%!important;
   }
.hovereffect.hover.small {height: auto;}
  }

   @media (max-width: 1200px) and (min-width: 650px) {.col-sm-4.page {width: 50%!important;
   }}
   .img-mobile {display: none!important;} 
@media (max-width: 800px) { .img-mobile {display: block!important;} .img-responsive.show {display: none!important;} .img-responsive.hidden {display: none!important;}}
   @media (max-width: 1200px) and (min-width: 650px) {.col-sm-4.page.pembrokeshire {width: 100%!important; height: 50vh;
   }}

   @media (max-width: 1200px) and (min-width: 650px) {.img-responsive.pembrokeshire {width: 101%!important; height: 50vh;
   }}

   @media (max-width: 800px) { .hovereffect.hover:hover p, .logos {display: none!important;} .overlay2:hover {background-color: transparent!important;}}

   @media   (min-width: 768px) and (max-width: 1000px)  {.col-sm-33 {width: 100%;  flex: 0 0 50%;
        max-width: 50%;padding-right: 15px;
        padding-left: 15px;}}
        
@media (max-width: 1000px) { .number-block { margin: 0 0 80px!important;}}

    .number-block {
    padding: 60px 30px 40px;
    background: #f9f9f9;
    position: relative;
    margin: 0 0 100px;
    border-bottom: solid 2px #C47D5A;
   
    
}
.col-sm-4.webs {padding: 1.5vw;}

@media (min-width: 1600px) { .number-block.margin {
   min-height: 330px; max-height: 330px;
}}

@media (min-width: 1200px) and (max-width: 1400px) { .number-block.margin {
    min-height: 370px; max-height: 370px;
 }}

 @media (min-width: 1000px) and (max-width: 1100px) { .number-block.margin {
    min-height: 400px; max-height: 400px;
 }}

 @media (min-width: 1000px) and (max-width: 1200px) { .number-block.margin {
    min-height: 390px; max-height: 390px;
 }}

 @media (min-width: 650px) and (max-width: 1000px) { .number-block.margin {
    min-height: auto; max-height: auto;
 }}




 @media (min-width: 1600px) { .number-block.equal {
    min-height: 340px; max-height: 340px;
 }}
 
 @media (min-width: 1300px) and (max-width: 1600px) { .number-block.equal {
     min-height: 350px; max-height: 350px;
  }}

  @media (min-width: 1200px) and (max-width: 1300px) { .number-block.equal {
    min-height: 390px; max-height: 390px;
 }}
 
  @media (min-width: 1000px) and (max-width: 1200px) { .number-block.equal {
     min-height: 420px; max-height: 420px;
  }}

  @media (min-width: 850px) and (max-width: 1000px) { .number-block.equal {
    min-height: auto; max-height: auto;
 }}


  
 @media (min-width: 1300px) and (max-width: 1600px) { .number-block.level {
    min-height: 390px!important; max-height: 390px!important;
 }}

 @media (min-width: 1200px) and (max-width: 1300px) { .number-block.level {
   min-height: 430px!important; max-height: 430px!important;
}}

 @media (min-width: 1000px) and (max-width: 1200px) { .number-block.level {
    min-height: 460px!important; max-height: 460px!important;
 }}

 @media (min-width: 850px) and (max-width: 1000px) { .number-block.level {
   min-height: 375px!important; max-height: 375px!important;
}}

@media (min-width: 768px) and (max-width: 850px) { .number-block.level {
   min-height: 430px!important; max-height: 430px!important;
}}
@media (min-width: 1600px) { .number-block.level {
    min-height: 380px!important; max-height: 380px!important;
 }}
.number-block.dark {background-color: #f6f6f6;}
.number-block.light {background-color: #fdfdfd;}
.service-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1500px;
    width: 88%;
    margin-top: 40px;
}

.number-block .number {
    position: absolute;
    left: 40px;
    top: -47px;
    font-size: 5.2rem;
    line-height: 100px;
    font-weight: 700;
    color: #223c53c0;
}
.number-block .number.home{
  position: absolute;
  left: 40px;
  top: -47px;
  font-size: 5.2rem;
  line-height: 100px;
  font-weight: 700;

}


.background.contain-image:hover {transform: scale(1.15); transition: all ease-in 0.3s;}

.number-block .button-text {
  background: linear-gradient(to bottom right,#c6632d,#C47D5A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.number-block .number.smaller {
    position: absolute;
    left: 40px;
    top: -47px;
    font-size: 4rem;
    line-height: 100px;
    font-weight: 700;
    color: #223c53c0;
}
.number-block .number.small {
    position: absolute;
    left: 40px;
    top: -47px;
    font-size: 3rem;
    line-height: 100px;
    font-weight: 700;
    color: #223c53c0;
}

@media (max-width: 768px) {
    .number-block .number { font-size: 50px;   
}
.number-block .number.smaller { font-size: 40px;   
}
.number-block .number.small { font-size: 35px;   
}
}




.col-sm-4 {
    width: 25%;
    float: left;
    padding: 1.5em 0em;
}

.col-sm-4.page {
    width: 25%;
    float: left;
    padding: 0em 0em;
}

.button-container.portfolio {margin-top: 5%;}

@media (max-width: 768px)  {.col-sm-4 {
    width: 100%!important;
    float: left;
    padding: 1.5em 0em;
}}

@media (max-width: 768px)  {.col-sm-4.spare {
   display: none;
}}

@media (max-width: 1200px) {.col-sm-4 {
    width: 50%;
    float: left;
    padding: 0em 0em 0em 0em;
}}



@media (max-width: 1000px) {.portfolio-heading { padding-bottom: 40px; width: 90%!important; margin: auto; padding-top: 30px; margin-top: -30px; line-height: 1.3;
}}

.portfolio-heading p {background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;; text-transform: uppercase; font-weight: 600;}

@media (max-width: 1200px) { .full-container.portfolio  { padding-bottom: 7em!important;
}}
@media (max-width: 650px) { .full-container.portfolio  { padding-bottom: 2em!important;
}}
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

.portfolio-home:after, .portfolio-home:before {clear: both;}

#clients-home:after, #clients-home:before {clear: both;}

#footer:after, #footer-home:before {clear: both;}

#portfolio-home 
{
    position: relative;
    margin: 0px auto;
}


.full-container.portfolio {    width: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center; padding: 6em 0em;
background-color: white;}

@media (max-width: 650px) { .full-container.portfolio {padding: 3.5em 0em;}}

.full-container.portfolio-page {    width: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center; padding: 0em 0em;
background: white;}

.portfolio-intro {max-width: 1400px; width: 85%; margin: auto; padding: 4em;}
.portfolio-intro h3 {text-align: center;  line-height: 1.3; color: #142435; }


.grid.portfolio {background-color: white; margin-left: -0.3em; margin-right: -0.3em; padding-top: 1em;}
@media (min-width: 768px) and (max-width: 1600px){ .full-container.portfolio {padding: 4em 0em;}}
.hovereffect {
    width: 100%;
  height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    z-index: 50;
border: none!important;
  }

  .hovereffect .overlay2 {
    width: 102%;
    height: 102%;
    position: absolute;
    overflow: hidden;
    background-color: #00000039;
    top: 0;
    left: 0;
    padding: 0px 00px;
  }
.hovereffect.hover .img-responsive.hidden {display: none; animation: none!important; background-color: #142435!important;}
.hovereffect.hover:hover .img-responsive.hidden {display: block; animation: none!important; background-color: #142435!important;}
.hovereffect.hover:hover .img-responsive.show {display: none; animation: ease-out all 0.5s;}
  .hovereffect.hover .overlay2 {
    width: 102%;
    height: 102%;
    position: absolute;
    overflow: hidden;
    background-color: #14243532;
    padding: 0px 00px;
   
    top: 0;
    left: 0;
    
  }
  @media (hover: none) {
    .hovereffect.hover .overlay2 { background-color: #1424357a;}
      .hovereffect p {text-align: center!important;
  }}

  .hovereffect.hover .overlay2:hover {
    width: 102%;
    height: 102%;
    position: absolute;
    overflow: hidden;
    background: linear-gradient(to bottom right,#223c53d8,#142435e5);
    animation: ease-in 0.9s!important;
    top: 0;
    left: 0;
    padding: 0px 00px;
  }
  .banner-text.portfolio  h2 {color: #C47D5A; background: linear-gradient(to bottom right,#c6632d,hsl(20, 47%, 56%));   -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; line-height: 1.2;}
    .banner-text.portfolio h3 {color: #eaeaea; line-height: 1.4;}

.overlay2:hover { background-color: #0000002d; border: none;}


  .hovereffect img {
    display: block;
    position: relative;
    max-width: none;
    height: auto;
    width: calc(100% + 20px);
    object-fit: fill;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation: preFade 1.5s;
    opacity: 1;
    
  }

  .hovereffect.hover.navy img {animation: none!important;}

  .hovereffect:hover  {
    opacity: 1;
    filter: alpha(opacity=40);
    transform: scale(1.08);
    transition: all 0.5s;
    z-index: 999;
    box-shadow: rgba(51, 51, 51, 0.28) 0px 12px 16px 0px;
    border: none!important;

  }

  .hovereffect.hover:hover  {
    opacity: 1;
    background-color: #000000;
    filter: alpha(opacity=40);
    transform: none;
    transition: opacity 0.35s, transform 0.35s;
    z-index: 999;
    box-shadow: none!important;
    border: none!important;

  }

  .hovereffect h2 {
      
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    text-align: left;
    font-weight: 600;
    font-size: 1.3vw;
    overflow: hidden;
    background-color: transparent;
    position: absolute;
    top: 42%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: left;
    color: #fff!important;
max-width: 1400px;
width: 90%;
margin: 0 auto;
    padding-left: 25px;
  }
  @media (max-width: 800px) { .hovereffect h2 {top: 43%!important;}}
  .hovereffect.hover:hover .button-portfolio {display: block; animation: preFade 1.5s!important;}
  .hovereffect.hover h2 {display: none;}
  .hovereffect.hover p {display: none;}
  @media (hover: none) {.hovereffect h2 {display: block!important;}
  .hovereffect p {display: block;}}
img.logos {display: none;}
.hovereffect.hover:hover img.logos {display: block; position: absolute; width: 35%; left: 33%; top: 8%; margin: auto;}
.hovereffect.hover:hover img.logos.big {display: block; position: absolute; width: 30%; left: 35%; top: 8%; margin: auto;}
  .hovereffect.hover:hover
    h2 {
       display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: white;
        text-align: left;
        font-weight: 700;
        font-size: 1.8vw;
        overflow: hidden;
        background-color: transparent;
        position: absolute;
        top: 47%;
        left: -5%;
        right: 0;
        transform: translateY(-50%, -50%);
        animation: preFade 1.5s!important;
        text-align: center;
        color: #fff!important;

      }
      @media (max-width: 1600px) {.hovereffect.hover:hover
      h2 {
         display: block;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: white;
          text-align: left;
          font-weight: 700;
          font-size: 1.8vw;
          overflow: hidden;
          background-color: transparent;
          position: absolute;
          top: 50%;
          left: -7.5%;
          right: 0;
          transform: translateY(-50%, -50%);
          animation: preFade 1.5s!important;
          text-align: center;
          color: #fff!important;
  
        }
        .hovereffect.hover:hover p.button { left: -15%;}}
        
        .hovereffect.hover:hover p {
         display: block; 
        top: 55%; left: -8%; text-align: center; font-size: 1vw; transition: all 0.5s!important; animation: preFade 1.5s!important; color: white;}

        .hovereffect.hover:hover
      p.button {
         display: block;
        top: 70%; left: 0%; text-align: center; border: solid 2px white; width: 30%!important; padding: 10px; margin: auto!important; font-size: 0.8vw!important; transition: all 0.5s!important; animation: preFade 1.5s!important; color: white!important;}
        p.button:hover {background-color: #C47D5A; border-color: #C47D5A!important;}

  @media (min-width: 768px) and (max-width: 1600px) {
    .hovereffect h2 {
        font-size: 28px!important;
        letter-spacing: 1px!important;
        left: -7.5%;
    }}

    @media (min-width: 768px) and (max-width: 1600px) {
        .hovereffect p {
            font-size: 14px!important;
            left: -7.5%!important;
            padding-top: 20px;
        }}

  @media (max-width: 650px) {.hovereffect h2 {top: 50%; font-size: 26px!important;}}
  @media (hover: none) {.hovereffect h2 {font-size: 3vw; letter-spacing: 1.5px; width: 100%; max-width: 95%; margin: auto; left: -7.5%; text-align: center; font-weight: 700;} p span {padding-bottom: 50px!important;} .remote-left.brackley {margin-left: 25%;} .remote-left.brackley.two {margin-left: 0%;}  .about-picture.slack {width: 80%!important; margin: auto!important; padding: 0px!important;} .remote-right.slack {text-align: center;} .remote-right.slack h2 {text-align: center;} .col-sm-3.website {width: 50%!important;}}

  @media (hover: none) {.hovereffect.hover:hover h2 {font-size: 3vw; letter-spacing: 1.5px; width: 100%; max-width: 95%; margin: auto; left: -7.5%; text-align: center; font-weight: 700; top: 42%;}}

  @media (hover: none) { @media (max-width: 900px) {.remote-right.brackley {text-align: center!important;} .remote-right.brackley h2, .remote-right.brackley h5 {text-align: center!important;}}}

@media (min-width: 1000px) { .button.right.marginup {margin-top: -35px!important;}}
  #app-features .preFade {display: none!important;}

  .hovereffect p {
    color: white;
    text-align: left;
    position: absolute;
    top: 53%;
    line-height: 1.5;
    font-weight: 600;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: left;
    color: #fff!important;
max-width: 1400px;
width: 90%;
margin: 0 auto;
    padding-left: 25px;
    font-size: 0.7vw;
    overflow: hidden;
    background-color: transparent;
  }
  
  @media (hover: none) { .hovereffect p.portfolio-links { display: block!important; font-size: 16px!important; color: white!important; margin: auto!important; top: 54%; left: -8%!important; text-align: center;}    p.portfolio-links.stc {color: white!important;} }
  @media (hover: hover) {  p.portfolio-links.stc {color: #c47d5a!important;}}

  @media (hover: none) { @media (max-width: 850px) { p.portfolio-links.stcmobile {margin-top:15px!important;}}}

@media (max-width: 768px) {.hovereffect p { display: none;}}

.col-sm-2.contact {display: flex; float: left; width: 50%!important;}
  .portfolio-heading {width: 100%;}
  
  .portfolio-heading p {text-align: center; width: 100%;}
  .portfolio-heading h2 {text-align: center; width: 100%; margin-top: 10px;}

.quote-banner  {background: url(../images/quote_banner.png); width: 100%; height: 45vh; background-size: cover; }

.large-container.contactmobile {display: flex; flex-direction: row;}
.quote-text {    position: absolute;
    top: 40%;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #fff!important;
    max-width: 1400px;
    margin: auto; z-index: 9999;}

.full-container.contact {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        align-items: center;
        background:#C47D5A!important;
    }

    .contact-banner  { width: 100%; height: 11vh;}
    .contact-text {color: white; text-align: center; }
    .contact-text p {color: white; text-align: center;}

   
#footer h2 {background: linear-gradient(to bottom right,#c6632d,#C47D5A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text; font-size: 24px!important; }
#footer p {color: white; line-height: 1.5;}
.logo-footer  {height: 95px;  padding-top: 15px; margin-left: 10px!important; width: auto;}

.footer-col {width: 33.33%; float: left; text-align: center;}

@media (max-width: 768px) {.footer-col {width: 100%; float: left; text-align: center; margin: auto;}}
@media (max-width: 768px) {.footer-row {max-width: 90%; margin: auto; padding: 2em 0em;}}

.footer-row {max-width: 1500px; margin: auto; width: 90%; padding: 3.25em 0em;}

#footer {background-color: #223C53;}

.footer-container {
    max-width: 1550px;
    background-color: #223c53!important; 
    margin: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        align-items: center;
        padding: 0em 0em;
        margin: auto;
}

#footer h5 {line-height: 0.8; margin-bottom: -6px; margin-top: 0px; font-size: 1.4rem; text-transform: uppercase;}
.footer-bottom {background-color: #142435; width: 100%; padding: 0;}
.footer-bottom

{padding: 0.02%;}
.footer-bottom p {padding: 0.9rem; margin: 0; color: #C47D5A; font-size: 0.9rem; text-align: center; font-weight: 400; text-transform: uppercase;}
.fa {color: white; font-size: 1.5rem!important; margin: 0 10px; text-align: center;}
.fa {margin-left: 15px;}

@media (min-width: 1000px) and (max-width: 1600px) {
    .number-block   {min-height: 340px;}
}


/*ABOUT US PAGE*/

    .large-container.about {
    max-width: 1300px;
    width: 85%;
}

@media (max-width: 900px)  {
    .large-container.about {
        display: block;
        max-width: 1300px;
        width: 85%;
    }
}

.large-container.remote {
    display: flex;
    max-width: 1300px;
    width: 85%;
}

.large-container.software {
  display: flex;
  max-width: 900px;
  width: 85%;
}

@media (min-width: 768px) {.large-container.socials {
    display: flex;
    max-width: 1100px;
    width: 85%;
    margin: auto;
}}

.large-container.contact {
    display: flex;
    max-width: 1350px!important;
    width: 85%;
}

.large-container.ethos {
    display: flex;
    max-width: 1300px;
    width: 85%;
}

.client-container.team {
    padding: 3em 0em;
    margin: auto;
    max-width: 1350px!important;
width: 85%;
}
@media (max-width: 768px) {
  .client-container.team {
width: 100%;
}
.col-team h2 {font-size: 16px!important;}}

@media (min-width: 768px) {
.client-container.ios {
    padding: 3em 0em;
    margin: auto;
    max-width: 1000px!important;
width: 80%;
text-align: left;
}}
.client-container.ios h4 {margin-top: 5px; color: #223C53;}
.client-container.web {
    padding: 3em 0em;
    margin: auto;
    max-width: 1350px!important;
width: 95%;
text-align: center!important;

}
.client-container.web h3 {margin-bottom: -10px; color: #C47D5A; background: linear-gradient(to bottom right,#c6632d,#C47D5A); line-height: 1.3;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;}
.client-container.web h4 {color: #223C53; margin-top: 10px;}
@media (min-width: 900px) {

    .large-container.about {
        display: flex;}

.col-sm-2
{float: left;
width: 50%;}
.about-text {
    padding: 0em 4em 0em 0em;
    animation: preFade 1s;
}



  .col-sm-2.photo {
    display: flex; /* Where the mobile part begins */
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  
}}

.about-picture {
    height: auto;
  width: 100%;
  padding: 9em 3.5em;
  
}

@media (min-width: 768px) {.about-picture.office {
  height: auto;
width: 100%;
padding: 9em 0em 9em 2em;

}}

@media (min-width: 768px) {.about-picture.office.zoom {
  height: auto;
width: 100%;
padding: 1.5em 6em 0em 0em!important;

}}

@media (max-width: 768px) {.about-picture.office {
  height: auto;
width: 70%!important;
padding: 0em!important;
margin: auto;
}}
.button-containers.thankyou {display: block;}
.thank-you {background: url(../images/thank_you.jpg) no-repeat center center;
  background-position-y: 0%;  background-color: #00000033; background-blend-mode: overlay; background-size: cover; height: 100vh; }
.thank-you-content {width: 85%; max-width: 1000px; position: absolute;
  top: 29%;
  left: 50%;
  transform: translate(-50%, -50%); text-align: center!important;   padding: 30px;}
  .thank-you-content p {font-size: 19px!important;}

  @media (max-width: 650px) {
    .thank-you-content {width: 100%!important; max-width: 1000px; position: absolute;
      top: 29%;
      left: 50%;
      transform: translate(-50%, -50%); text-align: center!important;   padding: 30px;}
      .contact-button.ethos.thanks {margin-top: -10px;}
      .about-picture.claire {width: 100%!important; margin: auto!important; padding: 0px!important;}
      .thank-you {
        background: url(../images/thank_you.jpg) no-repeat center center;
        background-position-y: 100%;
        background-color: #00000033;
        background-blend-mode: overlay;
        /* background-size: cover; */
        background-size: 1300px;
        height: 100vh;
    }
  }
  @media (max-width: 850px) and (orientation: landscape) { .thank-you-content {width: 70%!important; max-width: 1000px; position: absolute;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%); text-align: center!important; font-size: 16px!important;   padding: 30px;}
    .contact-button.ethos.thanks {margin-top: -10px;}
    .about-picture.claire {width: 100%!important; margin: auto!important; padding: 0px!important;}
    .thank-you {
      background: url(../images/thank_you.jpg) no-repeat center center;
      background-position-y: 100%;
      background-color: #00000033;
      background-blend-mode: overlay;
      /* background-size: cover; */
      background-size: 800px;
      height: 100vh;
  }
.thank-you-content p {font-size: 15px!important} h2 {font-size: 22px!important;}
.contact-button.ethos.thanks {margin-top: 7.5px; height: 50px!important;}}


@media (min-width: 1100px) {  .about-picture.claire {width: 80%!important; padding: 4em 4em 9em 4em!important;}}
 @media (min-width: 900px){ .about-picture.claire {width: 85%!important; padding: 5em 0em 0em 0em!important;}}
  @media (max-width: 900px) and (min-width: 650px) {
    .about-picture.claire {width: 60%!important; margin: auto!important; padding: 0px!important;}
  }

  @media (max-width: 650px) { .responsive-devices.claire {padding-bottom: 7%!important;}}
  .error-container {background: 
    linear-gradient(to right,#142435,#223C53) no-repeat center center;
    background-position-y: 0%;  background-color: #223c53; background-blend-mode: overlay; background-size: cover; height: 100vh; }
  .error-content {width: 80%; max-width: 1000px; position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); text-align: center!important;  border: solid 5px #C47D5A; padding: 40px;}

@media (max-width: 768px) {.about-picture.office.zoom {
  height: auto;
width: 70%!important;
padding: 0em!important;
padding-bottom: 40px!important;
margin: auto;
}}

@media (max-width: 650px) {.about-picture.office.zoom {
  height: auto;
width: 90%!important;
padding: 0em!important;
padding-bottom: 30px!important;
margin: auto;
}}


@media (max-width: 650px) {.about-picture.office {
  height: auto;
width: 90%!important;
padding: 0em!important;
margin: auto;
}
.large-container.ethos { margin-top: -15px!important;}
}

@media (max-width: 768px) {
    .about-picture {
        height: auto;
      width: 100%;
      padding: 3em 3.5em;
}}

@media (max-width: 900px) and (min-width: 768px) {
.about-picture {
    padding: 3em  0em;
}
}

.about-picture img {
    width: 100%;
    height: auto;
    animation: preFade 0.75s;
  }

@media (max-width: 770px) {
    .large-container.remote {
        display: block;}
.large-container.ethos { display: block;}
    .large-container.contact {display: block;}}

    @media (max-width: 950px) {   .large-container.contact {display: block;}}

    @media (min-width: 770px) {   .large-container.contact.contactform {display: flex!important;}}

.about-text h5 {text-align: left; margin-bottom: -20px;}
.about-text h2 {text-align: left; margin-bottom: 40px;}
.about-text p span {color: #223C53;}


@media (max-width: 768px) {
    .about-text {
        padding: 0em 0em 0em 0em;
}
#who-we-are {padding-top: 2em!important;}}


  .specialist-text h5 {text-align: left; margin-bottom: -20px;}
.specialist-text h2 {text-align: left; margin-bottom: 40px;}
.specialist-text p span {color: #223C53;}
  #remote-specialists {background-color: #F6F6F6;}

.remote-left {
    width: 45%;
}
.remote-right {
    width: 55%;
}

@media (max-width: 900px) {
    .remote-left {
        width: 100%!important;
    }
    .remote-right {
        width: 100%!important;
    }
    .about-picture.brackley img {width: 100%!important; margin: auto; left: 50%!important; text-align: center;}
    .remote-right.brackley {margin-top: -10%!important;}
    
    .col-sm-2.store {width: 100%!important; margin-top: 10%!important; padding: 0% 20%;}
    .col-sm-4.brackley  {width: 50%!important;}
    .specialist-text.brackley {margin-bottom: 50px;}
 
}
@media (max-width: 650px) {   .client-logo.brackley {width: 70%!important; padding: 10px;}
.client-container.software.brackley {width: 100%!important;}}
@media (max-width: 900px) and (min-width: 650px) {   .client-logo.brackley {width: 50%!important; padding: 10px;}
.client-container.software.brackley {width: 70%!important;}.client-container.software.stc {width: 70%!important;}}
@media (max-width: 1050px) and (min-width: 900px) {   .client-logo.brackley {width: 65%!important; padding: 10px;} 
.client-container.software.brackley {width: 80%!important;} .client-container.software.stc {width: 80%!important;}}

@media (max-width: 900px) and (min-width: 650px) { .col-sm-2.store {width: 100%!important; margin-top: 5%!important; padding: 0% 30%;} .remote-right.brackley.two {margin-top: 0%!important; padding-bottom: 3em;}
.slideshow-app {width: 45%!important;}
.about-picture.slack {width: 50%!important;}}

@media (min-width: 2000px) {.about-picture.brackley {margin-top: -70px;}}

.panel {
    padding: 0px 0px 0px 0px;
    background-color: #f6f6f6;
    overflow: hidden;
    display: none;
    transition: max-height 0.2s ease-out;
}

@media (max-width: 650px) {.remote-left.brackley {margin-left: 0%;}}

.about-picture.remote {
    height: auto;
  width: 58%;
  margin-left: 70px;
  padding: 3em 0em 0em 0em;
}

@media (max-width: 768px) {
.about-picture.remote {
    height: auto;
    width: 70%;
    margin-left: 70px;
    padding: 1em 3em 0em 0em;}}

    @media (max-width: 650px) {
      .about-picture.remote.mockup {
          height: auto;
          width: 70%;
          margin-left: 70px;
          padding: 0em;}}

.ethos-left {
    width: 70%;
    padding: 2em 2em 2em 2em;
}
.ethos-right {
    width: 30%;
    text-align: left;
    padding: 7em 0em 0em 2em;

}
@media (max-width: 1050px) and (min-width: 768px) {
  .ethos-right {
    padding: 7em 0em 0em 0em;
}
}
@media (max-width: 768px) {
    .ethos-left {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: left!important;
        
    }
    .ethos-right {
        width: 100%;
        padding: 0em 6em;
        margin-top: 50px;
    }
    .ethos-left h2 {text-align: left;}
    .ethos-left h5 {text-align: left;}
}

@media (max-width: 650px) {
  .ethos-right {
    width: 100%;
    padding: 1em 1em!important;
}
}

.ethos-list p {font-size: 18px; color:white; font-weight: 700; text-align: center; line-height: 1.2; text-transform: uppercase; }

.ethos-list {margin: 30px 0px;}
.about-text.ethos {background: #223C53;  padding: 1em 2em 1em 2em; margin-left: 10px; box-shadow: #C47D5A 6px 7px ;
}


.the-team {background-color: #f6f6f6; padding: 1em;}

.col-team {
    position: relative;
    width: 100%;
    padding-right: 10px;
  padding-left: 10px;
    flex: 0 0 20%;
    max-width: 20%;
    float: left;
    text-align: center;
}

.col-team.web {
  position: relative;
  width: 100%;
  padding-right: 10px;
padding-left: 10px;
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  float: left;
  text-align: center;
}

.col-team.app {
  position: relative;
  width: 100%;
  padding-right: 10px;
padding-left: 10px;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  float: left;
  text-align: center;
}
@media (max-width: 650px) { .col-team.app {max-width: 50%!important; flex: 0 0 50%!important;}}

.col-team.content {
  position: relative;
  width: 100%;
  padding-right: 10px;
padding-left: 10px;
  flex: 0 0 50%;
  max-width: 50%;
  float: left;
  text-align: center;
}

@media (max-width: 1000px) {
    .col-team { max-width: 33.3333%; flex: 0 0 33.33333%;}
}
.col-team h2 {font-size: 21px; color: #C47D5A; background: linear-gradient(to bottom right,#c6632d,#C47D5A); line-height: 1.3;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;}

.team-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1400px;
    width: 100%;
    margin-top: 40px;
}

.team-photo:hover {transform: scale(1.05); opacity: 1;}

.team-heading {max-width: 1400px; width: 92%; margin: auto; text-align: center; color: white; padding-top: 10px;}

@media (max-width: 950px)
{ .large-container.contact {text-align: left; } .contact-left {padding: 0rem!important;}  .contact-left.content {padding: 0rem!important;} .contact-right {padding: 0rem!important; padding-top: 10%;} .large-container.contactform {margin-bottom: 60px;}}
#contact {padding: 4em 0;}

#contact-apps {padding: 4em 0;}
@media (min-width: 1050px) {
.contact-right {
    width: 20%;}

.contact-left {
        width: 80%; text-align: left;}
}

@media (max-width: 1150px) and (min-width: 950px) {
  .contact-right {
      width: 20%;}
  
  .contact-left {
          width: 70%; text-align: left;}
  }

@media (min-width: 900px) {
    .contact-right.content {
        width: 40%; animation: preFade all 1.5s;}
    
    .contact-left.content {
            width: 60%; text-align: left;}
}
@media (min-width: 770px) and (max-width: 900px) {
  .contact-right.content {
      width: 50%; margin-top: 70px; animation: preFade all 1.5s;}
  
  .contact-left.content {
          width: 50%; text-align: left;}
  }

.contact-text {text-align: left}

.contact-text h5 {text-align: left; font-weight: 600; font-size: 17px;}

.contact-text h2 {margin-bottom: -10px;}

@media (min-width: 900px) {
.button.right {
    position: absolute; right: 0;
    top: 46%;
}}
@media (min-width: 768px) and (max-width: 900px) {
    .client-logo.android {width: 75%!important; margin: auto;}
    .col-sm-5.ipad {width: 33%!important; flex: 33%!important;}
    .client-logo.app {width: 50%!important;}
    .client-logo.ios-logo {width: 40%!important;}
    .button.right {position: absolute;
      top: 70%;
      left: 60%;
      transform: translate(-50%, -50%);}

    }
    @media (min-width: 650px) and (max-width: 850px) {
      .button-containers.recentwork {margin-top: -100px;}
    }
@media (max-width: 950px) {
    .button.right {position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);}
    .button-container.contact {padding-bottom: 4em!important; width: 50%;  margin: auto;}
    .contact-text {text-align: center;}
    .contact-text h5 {text-align: center; font-weight: 600; font-size: 17px;}
}
#footer a {color: white;}
#footer a:hover {opacity: 0.7;}

.button.left {
    position: absolute; left: 0;
    
}

.button-container.contact {height: auto;}



/* CLAIRE PORTFOLIO PAGE */
.about-picture.project {
    height: auto;
  width: 100%;
  padding: 5em 3.5em;
  
}


.about-picture.project img {
    width: 100%;
    height: auto;
    animation: preFade 0.75s;
  }
  .large-container.responsive {max-width: 1300px;
    width: 85%; display: flex; flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
}
#responsive {background-color: #F6F6F6;}
    
  .col-sm-4.responsive {
    position: relative;
    width: 100%;
    padding-right: 15px;
  padding-left: 15px;
    flex: 0 0 25%;
    max-width: 25%;
    float: left;
    padding: 0em!important;
  }

  @media (max-width: 768px) {
    .col-sm-4.responsive {
        position: relative;
        width: 100%;
        padding-right: 40px;
      padding-left: 40px;
        flex: 0 0 50%;
        max-width: 50%;
        float: left;
        padding: 2em 1em!important;
      }
      .device-image.iphone {padding: 0em 2em 0em 2em; margin-top: -4rem;}
  }

  .responsive-heading {width: 100%;}

  .device-image {
    height: auto;
    width: 100%;
    margin: auto;
    padding: 0em;
  }
  .device-image img {
    width: 100%;
    height: auto;
    animation: preFade 0.75s;
  }
@media (min-width: 768px){
    .device-image.imac {padding: 5em 0em 0em 0em;}
.device-image.macbook {padding: 6em 0em 0em 0em;}
.device-image.iphone {padding: 0em 4em 0em 4em;}
.device-image.ipad {padding: 3em 2em 3em 2em;}
.macbook {width: 110%;}
.imac {width: 105%;}

.devices {padding: 3em 0em 3em 0em; width: 70%; margin: auto;}
}
.responsive-devices {width: 100%; margin: auto!important;}
@media (max-width: 768px) {
    .about-picture.project {
        height: auto;
      width: 100%;
      padding: 3em 0em;
      
    }  
    .responsive-heading {width: 100%; text-align: center;}
}

.clickthrough {display: block;}


/* WEBSITE WHAT WE DO PAGE */
#portfolio-websites-desktop {background: linear-gradient(to bottom,#223C53, #142435);}
@media (min-width: 1300px) {#portfolio-websites-mobile {display: none;}}
@media (max-width: 1300px) {#portfolio-websites-desktop {display: none;}}
@media (max-width: 768px) {.grid-websites {margin-top: 50px!important;}}
 
 @media (max-width: 650px) {.button-containers.recentwork {margin-top: -130px;}}
 @media (max-width: 650px) {.hovereffect.website p {font-size: 12px!important; display: block!important; top: 61%!important;}}

#portfolio-websites-mobile {background: linear-gradient(to bottom,#223C53, #142435);}
.large-container.portfolio {
display:flex;
    max-width: 1300px;
    width: 85%;
}
#web-features {background-color: #eaeaea;}
.col-sm-3 {width: 33.33333%; flex: 0 0 33.33333%; float: left; text-align: center; padding: 0.2vw 0.15vw; }
.col-sm-4.page {width: 25%; flex: 0 0 25%; float: left; text-align: center; padding: 0.205vw 0.15vw; }
@media (min-width: 1100px) {.col-sm-4.page {width: 25%; flex: 0 0 25%; float: left; text-align: center; padding: 0.05vw 0.15vw!important; }}

@media (max-width: 1050px) {.col-sm-3.desktop {display: none!important;}}

@media (min-width: 1050px) {.col-sm-3.ipadfade {display: none!important;}}

.grid-features {
    width: 100%;}
    .grid.websites {width: 100%;}
    .grid.websites h2 {color: white; text-align: center; margin-top: 0; padding-top: 0; padding-bottom: 10px;}
    .col-sm-2.website {padding-left: 20px; padding-right: 20px;}
    .hovereffect.website {box-shadow: rgba(51, 51, 51, 0.28) 0px 9px 13px 0px; }
    @media (min-width: 1600px) {.hovereffect.website h2 {left: 5%; width: 100%; text-align: left; top: 50%;}
    .hovereffect.website p {left: 5%; width: 100%; text-align: left; top: 60%; font-weight: 700;}}
    @media (min-width: 900px) and (max-width: 1600px) {.hovereffect.website h2 {left: 5%; width: 100%; text-align: left; top: 50%;}
    .hovereffect.website p {left: 5%!important; width: 100%; text-align: left; top: 60%; font-weight: 700;}}
@media (min-width: 768px) {.about-picture.matt {padding: 0em 0em 0em 0em;}}
@media (max-width: 768px) {.about-picture.matt {margin-bottom: -60px;}}
@media (min-width: 768px) {.about-picture.websitepage {padding: 5em 0em 0em 0em;}}
@media (max-width: 768px) {.about-picture.websitepage {margin-bottom: -60px;}}
@media (max-width: 650px) {.about-picture.websitepage {padding: 2em;}}


    .about-picture.matt h5 {margin-top: 5px;}

#quote-banner {background: #223c53; color: #eaeaea; text-align: left!important; line-height: 1.5; font-weight: 100!important;}
#quote-banner h5 {text-align: left!important;}
@media (max-width: 900px) {#quote-banner h5 {text-align: center!important;}}
@media (min-width: 768px) {#quote-banner h2 {text-align: left!important; color: white!important; font-size: 18px;}}
@media (max-width: 768px) {#quote-banner h3 {text-align: center!important; color: white!important; font-size: 18px;} }
@media  (max-width: 650px) {.client-logo.ios-logo {width: 60%!important;}}
@media (min-width: 900px) {.portfolio-left {float: left; width: 20%; position: relative; text-align: left!important;}}
@media (min-width: 900px) {.portfolio-left h2 {text-align: left!important;}
.portfolio-left-content { 
  margin-top:40%;
  }}
  .grid.websites {margin-right: 7%!important; margin-left: 7%;}
@media (min-width: 900px) {.portfolio-centre {float: left; width: 40%; padding: 2em;}}
@media (min-width: 900px) {.portfolio-right {float: left; width: 40%; padding: 2em;}}
@media (max-width: 900px) {
  .portfolio-centre, .portfolio-left, .portfolio-right {width: 100%!important; margin-top: 0px!important} .portfolio-left-content {margin-top: 0%!important; text-align: center!important;} .portfolio-left-content .button-containers {margin-top: -130px; margin-bottom: 50px;}
  
  .col-sm-5 {width: 50%!important; flex: 50%!important;}
  .client-logo.graph {width: 50%!important; margin: auto;}
  .col-sm-2.databases {display: none;}
  .col-sm-2.databases-mobile h3 {text-align: center; width: 100%; line-height: 2;}
  .col-sm-2.databases-mobile {width: 100%;}
  .col-sm-2 h3 {text-align: center!important;}
  .col-sm-2.cross {width: 100%;}
  .grid-websites { display: flex; flex-direction: column;}
  .hovereffect.website h2 {text-align: center;}
}
@media (max-width: 650px) {
    .hovereffect.website h2 {text-align: center!important; top: 48%!important;}
    .client-logo.graph {width: 30%!important; margin: auto;}
}
.feature  {
    height: auto;
  width: 100%;
  padding: 0em 0em;
  
}
@media (min-width: 768px) {.col-sm-2.databases-mobile {display: none;}}

.feature h3 {padding: 0; margin: 0; background: linear-gradient(to bottom right,#C47D5A, #c6632d); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; line-height: 1.6; font-size: 18px;}


.feature img {
    width: 100%;
    height: auto;
    animation: preFade 0.75s;
    padding: 1em 7em;
  }

  .col-sm-2.intro {width: 60%;}
  .web-photo {width: 32%;}
  @media (min-width: 850px) {.web-photo.content {width: 40%!important;}}

  #web1 {background-color: #F6F6F6; }
  #web-features {padding: 3em 0!important;}

  /* WHAT WE DO HOME */
  @media (min-width: 650px) {#services-intro .service {
    width: 24.9%;
    float: left;
    text-align: center;
}}

@media (max-width: 650px)
{ #services-intro .service {
    width: 50%!important;
    padding: 1em;
    margin: auto;
    float: left;
    text-align: center;

}}

@media (min-width: 1000px)
{#services-intro .service + .service {
    border-left: 1px solid #f0f0f0;
}}
#services-intro {width: 100%; height: auto;}

#services-intro .service .icon {
    position: relative;
    width: 4em;
    height: 4em;
    margin: 0 auto 2em;
}

section.services-main.build {background-color: #F6F6F6;}

@media (max-width: 650px) {
  #services-intro {padding: 2em;}
}

@media (max-width: 650px) {
  .portfolio-intro {padding: 2em; width: 100%;} h3 {font-size: 18px;}
}
.service.icon  {
    height: auto;
  width: 100%;
  padding: 2em 2em;
  
}

.services-main.left {width: 30%;}
.services-main.right {width: 70%;}

a.service-type {border: solid 2px #223C53; padding: 0.75em 3.5em; margin-bottom: 8rem; color: #223c53; text-transform: uppercase; font-weight: 600;}
a.service-type:hover {border: solid 2px #C47D5A; background-color: #C47D5A; color: white; cursor: pointer;}

.what-we-do {
    padding: 30px 20px 50px 20px;
    background: #f9f9f9;
    position: relative;
    margin: 0 0 0px;
    border-bottom: solid 2px #C47D5A!important;
text-align: center;}

#services-intro h3 {
color: #C47D5A;
text-align: center;
width: 75%;
margin: auto;
animation: preFade 1s;
}

#portfolio-intro h3 {
  color: #C47D5A;
  text-align: center;
  width: 75%;
  margin: auto;
  animation: preFade 1s;
  }

  #portfolio-intro  {
    max-width: 1250px;
    width: 90%;
    margin: auto!important;
    text-align: center!important;
    }

.grid.service-type {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1400px;
    width: 100%;
    margin-top: -9em;
    animation: preFade 0.5s;
}

.service-image  {
    height: auto;
  width: 100%;
  padding: 1em 3em;
  
}



.service-image img {
    width: 100%;
    height: auto;
    animation: preFade 0.75s;
    padding: 0em 0em;
  }

  .service-description.service {margin-top: -20px; padding-bottom: 20px!important;}
  .service-description p {line-height: 1.5; font-weight: 500;}


  /* APP PAGE */
  @media (min-width: 900px) {.app-feature {width: 30%; text-align: center; border-right: solid 1px #C47D5A;}}
  @media (max-width: 768px) {.app-description {padding: 0em!important;}}
  @media (max-width: 768px) {.app-description.left {padding: 0em!important;}}
  .app-picture { 
    height: auto;
    width: 100%;
    padding: 1em 1em;
  }
  .app-picture img {
    
        width: 100%;
        height: auto;
        animation: preFade 0.75s;
        padding: 1em 1em;
  }
  .app-description {width: 100%; padding: 0em 0em 0em 3em;}

  @media (min-width: 900px) {.app-description.left {width: 100%!important; padding: 0em 3em 0em 0em!important; margin: auto;}}
  @media (min-width: 900px) {.app-feature.right {border-left: solid 1px #C47D5A; border-right: none;}}
  @media (max-width: 900px) {.app-feature.right {order: -1!important;}}
.about-text p span {line-height: 1.2!important;}

  #services-intro  h3 {width: 100%!important; margin: auto!important; }


  @media (max-width: 768px) {  .services-home.page {margin-top: -5%;}}

  .number-block.home {margin: 0 0 30px;}
  .button-center.page {margin-top: 1%;}
@media (min-width: 900px) and (max-width: 1100px) {  .services-home.page {margin-top: -1%;}
}

  #app-features.navy {background-color: #f6f6f6; border-top: solid 1px #eaeaea; border-bottom: solid 1px #eaeaea;}
#app-software {background-color: #f6f6f6; padding: 2em; border-top: solid 1px #dddddd;  border-bottom: solid 1px #dddddd;}
  .portfolio-home.white {background-color: #223C53!important;}

  #contact.portfolio {padding-top: 4em!important; background-color: white!important; margin-top: -1%;}

#contact-apps {border-bottom: solid 2px #c47d5a;}
  .portfolio-header.page {max-width: 1400px; width: 90%; margin: auto; padding: 4em;}
  .portfolio-header.page p {text-align: center; color: #f6f6f6; line-height: 1.3;}
  .portfolio-header.page h1 {text-align: center; color: white; font-size: 3vw; margin-top: -3%;}
  .portfolio-header.page h3 { text-align: center; line-height: 1.25;}
    @media (min-width: 1400px) {
        .portfolio-header.page p {text-align: center; color: #f6f6f6; font-size: 19px; }
        .portfolio-header.page h3 {font-size: 25px!important; line-height: 1.4;}
    }
    @media (min-width: 1100px) {.social-icon {height: 190px; width: 190px; margin: auto; padding: 60px 20px;  border: solid 2px #eaeaea;}}
    @media (min-width: 768px) and (max-width: 1100px) {.social-icon {height: 150px; width: 150px; margin: auto; padding: 40px 20px;  border: solid 2px #eaeaea;}}
/*@media (min-width: 768px) { .fa.fa-facebook.social{ height: 200px; width 200px;}}
   @media (min-width: 768px) { .fa.fa-instagram.social{ height: 200px; width: 200px;}}
   @media (min-width: 768px) { .fa.fa-twitter.social{ height: 200px; width: 200px;}}
   @media (min-width: 768px) { .fa.fa-linkedin-square.social{ height: 200px; width: 200px;}}*/
    .fa.fa-facebook.social{font-size: 65px!important; margin: auto!important; color: #616161;}
    .fa.fa-facebook.social:hover {color: #C47D5A; transition: ease-in all 0.3s;}
    .fa.fa-instagram.social{font-size: 65px!important; margin: auto!important; color: #616161;}
    .fa.fa-instagram.social:hover {color: #C47D5A; transition: ease-in all 0.3s;}
    .fa.fa-twitter.social{font-size: 65px!important; margin: auto!important; color: #616161; }
    .fa.fa-twitter.social:hover {color: #C47D5A; transition: ease-in all 0.3s;}
    .fa.fa-linkedin-square.social{font-size: 65px!important; margin: auto!important; color: #616161;}
    .fa.fa-linkedin-square.social:hover {color: #C47D5A; transition: ease-in all 0.3s;}

    .col-sm-4.social {text-align: center;}

    @media (max-width: 768px) {  .col-sm-4.social {margin-top: 10px; margin-bottom: 40px; width: 33%!important; border: none!important;} }

    @media (max-width: 767px) { .grid-features {margin-top: 40px;} }

    @media (max-width: 650px) {.contact-left.content {display: none;}.contact-right.content {margin-top: -50px!important;}}

    .mobile-details {display: flex; flex-direction: row; width: 100%;}
    .contact-details-left {width: 150px; height: 100px;}
    .contact-details-right {width: 73%;}
    @media (min-width: 650px) {#details-mobile {display: none;}
  #contact-mobile {display: none;}
  }

    @media (min-width: 768px) {  .col-sm-4.social {width: 33%!important; padding: 10px;} }

    .socials-heading h1 {text-align: center; margin: auto; margin-top: 0px!important; margin-bottom: 0px!important; padding: 0px!important;   position: absolute;
        left: 0%;
        top: -85px;
        line-height: 100px;
        font-weight: 700; text-transform: none!important;}

/* CONTACT FORM */
#cf-form {
    display:block;
    margin-top: 8%;
}

@media (max-width: 650px) {.footer-content {width: 80%; margin: auto!important;}}
.cf-form-control.name {display: flex;}
@media (min-width: 1600px) {
.contact-button.banner {margin-top: -30px;}
}

@media (min-width: 900px) {.about-picture.zones {padding: 5em 0em 0em 3em!important;}}
@media (max-width: 900px) {.about-picture.zones {padding: 0em 0em 0em 0em!important;}}

@media (max-width: 1600px) {
  .contact-button.banner {margin-top: -10px;}
  }
.cf-form-group {
    margin-bottom: 1rem;
}

.cf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.cf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #223C53;
    background-color: #fafafa;
    background-clip: padding-box;
    border: none;
    border-bottom: solid 2px #C47D5A;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cf-form-control:focus {
    border: 1px solid #313131;
}

.name-field {width: 40%; float: left;}



select.cf-form-control[size], select.cf-form-control[multiple] {
    height: 150%;
}

select#type { color: #223C53;
    background-color: #f8f8f8;
    background-clip: padding-box;
    border: none;
    border-bottom: solid 2px #C47D5A; height: 2.5rem; width: 30%; padding: 10px; text-align: left;}

textarea.cf-form-control {

    height: auto;
}

#social-media {background-color: #f6f6f6; padding: 2em 0!important;}

.contact-text  h2 {text-transform: uppercase;}

section.details {padding: 6rem 0; margin-top: -5.5%;}

label.cf-label {
    display: flex;
    margin-bottom: 0.5rem;
    float: left;
    text-transform: uppercase;
    font-weight: 600;
    color: #223C53;
}


.medium-button.contact {display: block; width: auto; margin: 0;}
@media (max-width: 768px) { .medium-button.contact {display: block; width: 50%; margin: 0;} }
.medium-button.name {display: block; width: 20%; margin: 0; margin-bottom: 3%!important;}

@media (prefers-reduced-motion: reduce) {
    .cf-btn {
        transition: none;
    }
}


input[type="submit"].cf-btn-block, input[type="reset"].cf-btn-block, input[type="button"].cf-btn-block {
    width: 100%;
}

@media (min-width: 1100px) {.contact-right {padding-left: 3rem;}}
@media (min-width: 768px) and (max-width: 1400px) {.contact-right {padding-left: 1em!important;}}
.contact-left {padding-right: 3rem;}
@media (min-width: 1100px) and (max-width: 1400px) {h4.details {font-size: 1.15vw!important;}}
@media (min-width: 650px) and (max-width: 1100px) {h4.details {font-size: 14px!important;}}
@media (hover: hover) {
@media (max-width: 1475px) and (min-width: 1200px) {
.hovereffect.hover.claire p {top: 59%!important;}
}}

@media (hover: hover) {
@media (max-width: 1200px) and (min-width: 768px) {
  .hovereffect.hover.claire p {top: 59%!important;}
  }}
  @media (hover: hover) {
@media (max-width: 1475px) and (min-width: 1200px) {
  .hovereffect.hover.stc h2 {top: 55%!important;}
  .hovereffect.hover.stc p {top: 65%!important;}
  }

  @media (max-width: 1400px) and (min-width: 1200px) {
    .hovereffect.hover.stc .portfolio-links {top: 60%!important;}
    .hovereffect.hover.stc p {top: 58%!important;}
    }


  @media (max-width: 1440px) and (min-width: 1200px) {
    .hovereffect.hover.small p {top: 60%!important;}
    .hovereffect.hover.small .portfolio-links {top: 65%!important;}
    .hovereffect.hover.small h2 {top: 47%!important;}
    }}


.name-container .name-popup  {
    content: "";
    display: table;
  }
  
  .name-container:after {
    clear: both;
  }
  
  .name-popup:after {
    clear: both;
  }
  .name-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0px;
    border: 3px solid #f1f1f1;
    z-index: 500000!important;
    background-color: rgba(0, 0, 0, 0.116);}

    .name-container {
        width: 100vw;
        padding: 100px;
        height: 100vh;
        position: relative;
        background-color: #142435c3;
        z-index: 5000000!important;
      }
     .head.scroll {z-index: 2000!important;}
      .name-container-inner {
        position: absolute;
        width: 50%;
        padding: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        background-color: #ffffff;
        z-index: 500000!important;
      }

      @media (max-width: 1700px) {
        .name-container-inner {
          position: absolute;
          width: 75%;
          padding: 50px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: auto;
          background-color: #ffffff;
          z-index: 50000;
        }
      }

      @media (max-width: 2000px) {
        .name-container-inner {
          position: absolute;
          width: 75%;
          padding: 50px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: auto;
          background-color: #ffffff;
          z-index: 50000;
        }
      }

      @media (max-width: 768px) {
        .name-container-inner {
          position: absolute;
          width: 75%;
          padding: 30px!important;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: auto;
          background-color: #ffffff;
          z-index: 50000;
        }
      }


      @media (max-width: 768px) {
        .name-container-inner {
          position: absolute;
          width: 90%;
          margin: auto!important;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: auto;
          background-color: #ffffff;
          z-index: 50000;
        } .name-container-inner p {font-size: 11px!important;}
        .name-container-inner h1 {font-size: 20px!important; }
        .paginationbutton {font-size: 10px!important; padding: 0px; margin-bottom: 10px!important; margin-top: 10px!important;}
        
        .team-button {font-size: 16px!important;}
  
      }

      @media (max-width: 650px) {.banner-text.portfolio {margin-left: 10%!important;}}
     

    .col-sm-66 {text-align: center!important; width: 20%; flex: 20%; display: flex; float: left; padding: 0.5vw;}
    .team-member {width: 100%; height: auto; margin: auto; justify-content: center; border: solid 1px #223C53; padding: 0px; margin: 0px;}
    .team-member:hover {background-color: #223C53;}
    .team-member:hover h3 {color: white!important;}
      .team-member.active h3 {color: white!important;}
      .team-member.active {background-color: #C47D5A;}
      .paginationbutton {width: 100%; height:max-content;}
    @media (max-width: 1400px) {.col-sm-66 {width: 33%; flex: 33%;}}
    @media (max-width: 1000px) {.col-sm-66 h3 {font-size: 12px!important;}}
    @media (min-width: 1000px) {.col-sm-66 h3 {font-size: 16px!important;}}

      .pagination h3 {color: #223C53!important;}
    


    #details-mobile {background-color: white;}
    .contact-details-left {border-right: solid 1px #eaeaea;}
   
     .staff-member {width: 5%;  margin-left: 5%;}
     .mySlides {
        display: none;}
        @media (max-width: 650px) {#details-mobile .fa {margin-top: 0px!important; margin-left: 45px!important;}}
        .fa.fa-phone.details{font-size: 52px!important; margin: auto!important; color: #223C53;  margin-top: 30px!important;}
        .fa.fa-phone.details:hover {color: #C47D5A; transition: ease-in all 0.3s;}
        .fa.fa-envelope.details{font-size: 50px!important; margin: auto!important; color: #223C53;  margin-top: 30px!important;}
        .fa.fa-envelope.details:hover {color: #C47D5A; transition: ease-in all 0.3s;}

        @media (min-width: 1100px) {
          .fa.fa-phone.details {margin-top: 13%!important;}
          .fa.fa-envelope.details{margin-top: 13%!important;}
          .fa.fa-map.details{margin-top: 32px!important;}
        }

        .fa.fa-map.details{font-size: 45px!important; margin: auto!important; color: #223C53; margin-top: 33px!important;}
        .fa.fa-map.details:hover {color: #C47D5A; transition: ease-in all 0.3s;}
.contact-details h4 {color:#C47D5A; font-weight: 600!important;}
.contact-details-right h4 {color:#C47D5A; font-weight: 600!important;}
.contact-details-right {padding-left: 30px;}
        .col-sm-3.contact {padding: 10px;}
 
        @media (min-width: 770px) and (max-width: 1100px) {.col-sm-3.contact {width: 100%; flex: 100%; padding: 0px; border: none!important; margin-top: -10px;}
      .grid-features.contact {margin-top: -50px;}}

        @media (min-width: 1100px) {  .col-sm-3.contact {border-right: solid 1px #eaeaea;}   .col-sm-3.contact.border {height: 15rem;}
        .col-sm-3.contact {height: 15rem;}
        .details.lower {margin-top: 2.7rem;}}
        .col-sm-3.contact.address {padding: 10px; border-right: none!important;}

      

        @media (max-width: 767px) {.col-sm-3.contact.address {margin-bottom: 90px;}}
        .company.contact {width: fit-content;
            padding: 5rem;     height: 275px; margin: auto!important; border: none!important; }
        
       @media (min-width: 1100px) { .col-sm-3.address h4 {width: 100%; margin-top: 10%!important; border-right: none!important; }}

        .app-picture.apps {padding: 2em 1em 0em 1em;}
      
        .app-picture.icon {padding: 0em 90px 0em 90px; margin-top: 1em;}
        @media (max-width: 1500px) {.app-picture.icon {padding: 0% 30%; margin-top: 1em;}}
        @media (max-width: 1300px) {.app-picture.icon {padding: 0% 25%; margin-top: 1em;}}
        @media (max-width: 768px) {.app-picture.icon {padding: 0px 70% 0px 0px; margin-top: 1em; margin-left: -20px;}}
        @media (max-width: 900px) and (min-width: 768px) {.app-picture.icon {padding: 0px 80% 0px 0px;}}

        @media (min-width: 1600px) { .app-text h2 {color:#223C53; font-size: 2rem;}}
        @media (min-width: 768px) and (max-width: 1600px) { .app-text h2 {color:#223C53; font-size: 28px!important;}}
        section#app-features {padding: 4.8rem 0;}


        .software.left {float: left; width: 50%; padding: 0px 10px; }
        .software.right {float: right; width: 50%; padding: 0px 10px;}
    

        .software.left3 {float: left; width: 33%; padding: 0px 10px;}
        .software.right3 {float: right; width: 33%; padding: 0px 10px;}
        .software.center {float: center; width: 33%; padding: 0px 10px;}
    .col-sm-2.apps {display: flex; text-align: center;}

    .logo-client.app  {
        display: flex;
        height: auto;
      width: 100%;
      margin: auto!important;
      padding: 0em 3em;
      margin-bottom: -20px;
    }
    .logo-client.swift  {
        display: flex;
        height: auto;
      width: 100%;
      margin: auto!important;
      padding: 0em 3em;
      margin-bottom: -20px;
    }



   @media (min-width: 768px){ .logo-client.html5  {
      display: flex;
      height: auto;
    width: 100%;
    margin: auto!important;
    padding: 0em 7em;
    margin-bottom: 20px!important;
  }}

  @media (max-width: 768px){ .logo-client.html5  {
    padding: 0em 1em;}}
    
    .client-logo p {margin-top: -20px;}
    
    .logo-client.app p {margin-top: -20px;}
    
    .logo-client.app img  {
        width: 100%;display:inline-block;
        height: auto;
        margin: auto!important;
        animation: preFade 0.75s;
        padding: 0em 0em;
      }
      .client-logo.ios-logo {height: auto;
        width: 40%;
        margin: auto; margin-bottom: 0px!important;}
        img.logo-client.ios-logo  {height: auto;
            width: 100%!important;
            margin: auto!important;
            padding: 0px 40px 40px 40px;
          }
            .cross-platform {background-color: #fbfbfb;}
.team-grid.first {margin-top:0px;}
      .col-sm-5 {display: flex; width: 25%; flex: 20.0%; text-align: center; padding: 0px 30px;}
      #project, #data, #dev, #testing, #campaign, #enterprise, #design {margin-top: -350px; margin-bottom: 350px;}
      @media (max-width: 768px) { #project, #data, #dev, #testing, #campaign, #enterprise, #design {margin-top: -500px; margin-bottom: 500px;}}

      section.ios {border-bottom: solid 1px #dddddd; background-color: #f2f2f2;}
      @media (min-width: 850px) {.web-apps {border-bottom: solid 1px #dddddd; background-color: #f7f7f7;}
      .cross-platform {border-bottom: solid 1px #dddddd; }
      .col-sm-2.border {border-right: solid 1px #dddddd}
      .project-left {width: 60%;}}

      .col-sm-2.store img {width: 100%; margin: auto;}
      .col-sm-2.store 
       {width: 30%; margin: auto; margin-left: -1.5%; margin-top: 7.5%;}
#app-slideshow {background-color: #f6f6f6;}
#app-slideshow.margin {background-color: #f6f6f6; padding: 2em 0; margin-top: -4em;}
       
.mySlides.banner{
  display: none;}

    /*.mySlides.banner{  width:100% !important;
    height:40vh!important;
    margin: auto;
   background: #223c53!important;
    border: none!important;
    
  }*/
  
  .mySlides.banner a{
    margin:17px;
  }


  .mySlides.banner { height: 30vh; width: 100%;}


  .prev, .next{
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #223C53;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }


  .next{
    right: 0px;
    border-radius: 3px 0 0 3px;
  }
  .prev{
    left: 0px;
    border-radius: 0px 3px 3px 0px;
  }


.text-containter.page {

    box-sizing:border-box;
    color: white!important;
    position: absolute;
    width: 100%;
    text-align: center;
    position: absolute;
  top: 50%;
    left: 50%;
    padding: 3%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

.text-containter.page h3 {font-size: 30px!important; font-weight: 600; color: white!important;} 

.dots-containter{
  position: absolute;
  display:inline-block;
  bottom:25px;
  left:0;
  right:0;
  margin-left:auto !important;
  margin-right:auto !important;
}

.team-button {
  content: "\2715";
  display: flex;
  float: right;
  background-color: transparent;
  border: none;
  font-size: 28px;
  font-weight: 700;
}

.team-button:hover {
  content: "\2715";
  display: flex;
  float: right;
  background-color: transparent;
  border: none;
  font-size: 28px;
  font-weight: 700;
  color: #c47d5a;
}

.dot.page {
  z-index:99 !important;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #C47D5A;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.team {
  z-index:99 !important;
  cursor: pointer;
  height: 15px;
  width: 16.66%;
  flex: 16.666%;
  background-color: #C47D5A;
  border-radius: 50%;
  display: flex;
  float: left;
  transition: background-color 0.6s ease;
}


.dot:hover {
  background-color: #717171;
}

#remote-specialists-zone {display: none;}
@media (min-width: 2000px) { .slideshow-container {margin-top: -50px;}}
.slideshow-container{
    max-width: 1400px!important;
    width: 80%!important;
    position: relative;
    display:block;
    margin: auto;
    
    height:550px!important;       
  }
@media  (max-width: 650px) {.slideshow-app {width: 60%!important;}}
@media (max-width: 900px) and (min-width: 650px) {
  .slideshow-container {height: 650px!important;}}
  
  @media (max-width: 650px) {
  .slideshow-container{ width: 100%!important; margin-top:0%; height: 600px!important;
}
.slideshow-container.brackley{ width: 100%!important; margin-top: 30px; height: 600px!important; margin-bottom: -30px;
}
.slideshow-container.zeta{ width: 100%!important; margin-top:-2%; height: 430px!important;
}
#app-software{ padding: 0.5em!important;
}
.client-container {padding: 1em 0em!important;}
.client-container.stc {padding: 0em 2em!important;}

.grid-features.contact {margin-top: -10px;}
}

@media (max-width: 650px) { 
.banner-text.contact {margin-top: -25%;}
.about-picture.micad  {margin-top: 0px!important; width: 70%!important; padding-bottom: 0em!important; padding-top: 1em!important;}
.responsive-heading h2 {font-size: 22px!important}
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media  (min-width: 650px) and (max-width: 900px) {
  .about-picture {width: 60%; margin: auto!important;}
  .about-picture.micad  {width: 40%!important; margin: auto!important; padding: 0em!important; padding-bottom: 3em!important;}
}

@media (max-width: 768px) { .button.left {position: absolute;
  
  left: 50%!important;
  transform: translate(-50%, -50%); height: auto; width: max-content!important;}
.button-container.micad {margin-top: 70px;}}

@media (min-width: 900px) {.slideshow-container.zeta {height: 35vh!important;}}@media (min-width: 1100px) {.slideshow-container.zeta {height: 50vh!important;}}
@media (min-width: 1100px) {.slideshow-container.zeta.stc {height: 40vh!important;}}

p.description {color: #c47d5a!important; font-weight: 700!important; font-size: 22px!important; letter-spacing: 4px; text-transform: uppercase;}
@media (max-width: 1000px) and (min-width: 640px) {
  p.description {color: #c47d5a!important; font-weight: 700!important; font-size: 18px!important; letter-spacing: 3px; text-transform: uppercase;} 
}
p.link {padding: 10px 0px; border-top: solid 1px #eaeaea9d; border-bottom: solid 1px #eaeaea9d; width: 200px; margin: auto; font-weight: 600;}
p.link:hover {opacity: 0.6; cursor: pointer;}
p.portfolio-links.stc {font-weight: 700!important; margin-top: 11%;}
p.portfolio-links.stc:hover {margin-top: 11%;}
p.portfolio-links:hover {color: white!important; font-weight: 700!important; margin-top: 8%;}
@media (max-width: 650px) { .about-picture.brackley {margin-top: 0px!important; width: 100%!important; padding: 0em 6em 3em 6em}}
@media (max-width: 800px) and (min-width: 650px) { .about-picture.brackley {margin-top: 0px!important; width: 60%!important; margin: auto!important; padding: 0em 6em 3em 6em; margin-bottom: 30px!important;}}
@media (max-width: 768px) {
  .company-logo {width: 70%!important;}

  .logo-client.app {padding: 0px 5px!important;}
  #app-software {margin-top: -5%;}
  #app-software.zone {margin-top: 0%;}
  .large-container.software {width: 100%!important;}
  .col-sm-2.intro {width: 100%!important;}
  .web-photo {width: 100%!important;}
}
@media (max-width: 900px) {.large-container.features {display: flex; flex-direction: column;}}
@media (min-width: 768px) and (max-width: 900px) {
    .web-photo {width: 60%!important; margin: auto!important;}
    .web-photo.websitepage {width: 100%!important; margin: auto!important;}
    .about-picture.micad  {margin-top: 50px!important; width: 50%;}
    .slideshow-container.brackley {margin-top: 30px; margin-bottom: -30px;}
}
.readmore {
  position: relative;
  max-height: 665px;
  overflow: hidden;
  background-image: linear-gradient(to bottom, rgba(246, 246, 246, 0), rgba(246, 246, 246, 0.998));
}

@media (min-width: 1500px) {
  .readmore {max-height: 585px}
}

@media (max-width: 1300px) {
  .readmore {max-height: 630px}
}

@media (max-width: 1250px) {
  .readmore {max-height: 660px!important;}
}

@media (max-width: 1100px) {
  .readmore {max-height: 680px!important;}
}

@media (max-width: 1075px) {

  .readmore {max-height: 700px!important;}
}

@media (max-width: 1050px) {
  .readmore {max-height: 810px!important;}
}

@media (max-width: 1000px) {
  .readmore {max-height: 760px!important;}
}

@media (max-width: 950px) {
  .readmore {max-height: 770px!important;}
}

@media (max-width: 900px) {
  .readmore {max-height: 810px!important;}
}

@media (max-width: 850px) {
  .readmore {max-height: 860px!important;}
}

@media (max-width: 800px) {
  .readmore {max-height: 1000px!important;}
}

@media (max-width: 768px) {
  .readmore {max-height: 650px!important;}
}

@media (max-width: 650px) {
  .readmore {max-height: 680px!important;}
}

@media (max-width: 450px) {
  .readmore {max-height: 830px!important;}
}
@media (max-width: 769px) {.hovereffect.website {margin-bottom: 10px;}}
@media (min-width: 1000px) and (max-width: 1050px) {
  .col-sm-3.space {height: 46vw;}
  
  .hovereffect.stc img {height: 46vw;}
}

@media (min-width: 700px) and (max-width: 800px) {
  .col-sm-3.space {height: 46.9vw;}
  
  .hovereffect.stc img {height: 46.9vw;}
}

@media (max-width: 400px) {
  .readmore {max-height: 930px!important;}
}


@media (min-width: 1600px) {
  .readmore {max-height: 680px}
}

.readmore.expand{
  max-height: 5000px !important;
  transition:max-height 0.35s ease-in-out;
}
@media (max-width: 650px) {
  .readmore-link {
    text-align: center!important;}
   .large-container.contentbuttons {margin-top: -10px;}
   .about-text.brackley h2 {padding-top: 30px;}
   .remote-right.brackley.two {padding-bottom: 20px;}
}
.readmore-link {
  position: absolute;
  bottom: 0;

object-position: 10%;
  display: block;
  width: 100%;
  height: 60px;
  text-align: left;
  color: #223C53;

  margin-top: 30px!important;
  background-image: linear-gradient(to bottom, rgb(246, 246, 246), rgba(246, 246, 246, 0.992));
  font-weight:600;
  text-transform: uppercase;
  font-size: 16px;
  padding:40px 0px;
  cursor: pointer;
  z-index: 100;
  margin-bottom: 0px;


}



@-webkit-keyframes slideUp {
  100% { left: 0; }
}

@keyframes slideUp {
  100% { left: 0; }
}

.readmore-link.expand {
  position: relative;
  background-image: none;
  padding-top:10px;
  height:20px;
}

.readmore-link:after {
  content:"Read more";
  background-color: transparent;
  padding: 15px 30px;
  width: auto;
 top: 50%;
border: solid 1px #223C53;
 z-index: 100000000;
}
.readmore-link.expand:after{
  content:"Read less";
}

.readmore-link.two:after {
  content: none!important;
  
}
.readmore-link.two.expand:after{
  content: none!important;
}

.col-portfolio {
 width: 33.33%;
 flex: 33.333%;
 height: 100%;
 padding: 0px 3px 3px 3px;
 float: left;
}
@media (max-width: 1200px) and (min-width: 640px) {
  .col-portfolio {
    width: 50%;
    flex: 50%;
    height: 100%;
    padding: 2.5px 3px 3px 3px;
    float: left;
   }
}
@media (min-width: 1200px) {
  .col-portfolio.hide {
    display: none;
  }
}
@media (max-width: 640px) {
  .col-portfolio.hide {
    display: none;
  }
  .col-portfolio {
    width: 100%;
    flex: 100%;
    height: 100%;
    padding: 3px 0px;
    float: left; 
  }
}
.hover-grid {
  width: 100%;
  height: 100%;
  position: relative;
}

.center {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
}
.white {color: white!important;}
.copper {color: #c47d5a;}
.hover-grid:hover .hover-text {opacity: 1!important; transition: ease-in 0.2s;}
.hover-image {width: 100%; height: 101%; object-fit: cover; padding: 0;}
.hover-image img {width: 100%; height: 100%; object-fit: cover;}
.portfolio-overlay {background-color: #14243589; position: absolute; top: 0; left: 0;width: 100%; height: 99.5%; z-index: 0;}
.hover-grid:hover .portfolio-overlay {background-color: #142435d1;}
.white {color: white!important;}

@media (hover:none) {
  .hover-text {
    opacity: 1;
  }
}