/*
THEME NAME: Custom Theme
DESCRIPTION: Bespoke WordPress theme
VERSION: 1.0
AUTHOR: A Story Called
Author URI: https://astorycalled.co.uk
*/


@font-face {
    font-family: 'hk_groteskmedium';
    src: url('fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
         url('fonts/hkgrotesk-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'hk_groteskbold';
    src: url('fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
         url('fonts/hkgrotesk-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,* {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.smooth,input,textarea,a{-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-ms-transition:all 0.2s ease;transition:all 0.2s ease;}
.slow,input,textarea,a{-webkit-transition:all 0.8s ease;-moz-transition:all 0.8s ease;-o-transition:all 0.8s ease;-ms-transition:all 0.8s ease;transition:all 0.8s ease;}


a{text-decoration:none;color:inherit;cursor:pointer;}
p{margin-bottom:20px;}
b,strong{font-weight:bold;color:#006ED3;}
i,em{font-style:italic;}

h1,h2,h3,h4,h5,h6{margin-bottom:20px;color:#006ED3;font-family: 'hk_groteskbold';}
h1{font-size:44px;line-height:48px;}
.bigtext{font-size:68px;line-height:80px}
h2{font-size:28px;line-height:35px;}
h3{font-size:16px;line-height:20px;}

input[type="text"],input[type="email"],textarea{padding:10px;border:1px solid #8998A6;width:100%;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin-bottom:20px;outline:none;}

input[type="button"],input[type="submit"] {-webkit-appearance:none;border-radius:0;cursor:pointer;display:inline-block;background:#006ED3;color:white;padding:12px 30px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
input[type="button"]:hover, input[type="submit"]:hover{background:#8998A6;}

textarea{min-height:220px;}

a.button{background:#8998A6;color:white;padding:12px 30px;font-size:13px;text-transform:uppercase;display:inline-block}
a.button:after{content:url('images/right.svg');padding-left:10px;}
a.button:hover{background:#006ED3;}

#error{margin-top:20px;}

/* - - GRID - - */
[class*='col-'] {float: left;}
.clear:after,.centerColumn:after {content:"";display:table;clear:both;}
[class*='col-'] {padding-left:50px;}
.nudge {margin-left:-50px;}

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

.col-1-6 {width:16.6667%;}
.col-1-5 {width:20%;}
.col-1-4 {width:25%;}
.col-1-3 {width:33.3333%;}
.col-1-2 {width:50%;}
.col-2-3 {width:66.66%;}
.col-3-4 {width:75%;}
.col-4-5 {width:80%;}
.col-1-1 {width:100%;}

.nodesk{display:none;}

html{scroll-behavior: smooth !important;}

body {
font-family: 'hk_groteskmedium';
color:#8998A6;
line-height:26px;
font-size:18px;
background-position: top right;
    background-repeat: no-repeat;
    background-size: 70%;
}

small, .small{font-size:12px;line-height:18px}

img{max-width: 100%;height:auto}

.in{max-width:1350px;margin:auto;overflow:hidden;}
.in2{max-width:1000px;margin:auto;overflow:hidden;}
.pad20{padding:20px;}
.pad020{padding:0 20px;}
.pad2040{padding:20px 40px;}
.nopad{padding:0;}
.nomar{margin:0;}
.tac{text-align:center;}
.tar{text-align:right;}
.row{margin-bottom:20px;}
.bigrow{margin-bottom:50px;}
.biggerrow{margin-bottom:100px;}
.prel{position:relative;}
.ov{overflow:visible;}
.flex{display:flex;}
.vmid{align-items:center;}
.mw660{max-width:660px}


.blue{color:#006ED3;}
.bluebg{background:#006ED3;color:white;}

.white{color:white;}

#wrapper{}

#header{}

.logo img{max-width: 165px;height:auto;}

p.cta_title{font-size:24px;line-height:30px}

section{padding:50px 0;}

#menu{padding-top:3%;}
#menu li{display:inline;list-style-type:none;margin-left:50px;font-size:13px;}
#menu li:first-child{margin-left:0px;}
#menu li a{text-transform:uppercase;border-bottom:2px solid transparent;}
#menu li.current_page_item a,#menu li a:hover{border-bottom:2px solid #006ED3;}

.page_header{position:relative;left:-120%;}

.big_image_cta{margin-bottom:70px;}
.big_image_cta img{width:100%;height:auto}
.big_image_cta .cta{padding:50px 30px;background:#8998A6;color:white;position:absolute;bottom:-70px;right:100px;min-width:33%;z-index:1;opacity:0;}
.big_image_cta .cta .cta_title{margin-bottom:20px;}
.big_image_cta .cta a.button{background:white;color:#8998A6;}
.big_image_cta .cta a.button:hover{background:#006ed3;color:#fff;}
.big_image_cta .cta a.button:after{content:url('images/right-dark.svg');}
.big_image_cta .cta a.button:hover:after{content:url('images/right.svg');}
.big_image_cta .overlay{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;z-index:2}
.big_image_cta .overlay h2{color:white;}

.big_image_cta .grad:before{background-image: -moz-linear-gradient( 0deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 50%);
      background-image: -webkit-linear-gradient( 0deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 50%);
      background-image: -ms-linear-gradient( 0deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 50%);
      mix-blend-mode: multiply;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .image_half{margin-bottom:70px;left:-120%;}
    .image_half .grad:before{background-image: -moz-linear-gradient( 180deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 100%);
      background-image: -webkit-linear-gradient( 180deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 100%);
      background-image: -ms-linear-gradient( 180deg, rgb(0, 110, 211) 0%, rgb(255, 255, 255) 100%);
      mix-blend-mode: multiply;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
.image_half img{width:100%;height:auto;}


.half_half{margin-bottom:70px;}
.hh_overlay{background:#8998A6;color:white;position:absolute;bottom:-70px;left:50%;transform:translateX(-50%);padding:50px 30px;z-index:2;opacity:0;}
.hh_overlay h2{color:white;margin:0;}

.tm .hh_overlay{width:80%;text-align:center;}

.services_summary img{margin-right:15px;}
.service_cont{font-size:12px;line-height:18px}
.service_cont ul{margin-left:30px;}

#footer{border-top:1px solid #D9DEE1;padding-top:80px;font-size:12px;line-height:18px}
.footlogo img{max-width:100px;height:auto}

.footlogo .approval{margin-top:20px;}
.footlogo .approval img{max-width:160px;}

.downer{display:none}
.btt, .downer{position:fixed;bottom:0px;right:50px;background:white;padding:20px;cursor:pointer;z-index:2}
.btt img{margin-left:20px;}

.downer img{transform:rotate(180deg);}

.big_image_cta.active .cta{
animation-name: fadeIn;        
  animation-duration: 1.5s;      
  animation-iteration-count:1;   
  animation-fill-mode: forwards;
}

@keyframes fadeIn { 
  0% {opacity: 0;} 
  100% {opacity: 1;}
  } 


.half_half.active .image_half{
  animation-name: slideIn;        
  animation-duration: 1s;      
  animation-iteration-count:1;   
  animation-fill-mode: forwards;
}

.half_half.active .hh_overlay, .tm.active .hh_overlay{
  animation-delay: 1s;
  animation-name: fadeIn;        
  animation-duration: 1.5s;      
  animation-iteration-count:1;   
  animation-fill-mode: forwards;
}

@keyframes slideIn { 
  0% {left: -120%;} 
  100% {left: 0;}
  } 


.flipcard{border:1px solid #D9DEE1;padding:20px;}



.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  cursor:pointer;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height:100%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}



.flip-card p{margin:0;padding:0 10%;}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Position the front and back side */
.flipper-front, .flipper-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flipper-front {
  border:1px solid #D9DEE1;
}

/* Style the back side */
.flipper-back {
  background-color: #006ED3;
  border:1px solid #006ED3;
  color: white;
  transform: rotateY(180deg);
}
.flip-card img{max-width:50px;max-height:50px;width:100%;height:100%;}
.flipper-back ul{list-style-type:none;}
.socials i:hover{background:#006ED3;}
.socials i{background:#8998A6;width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;line-height:30px}
.socials a{line-height:30px;color:white;text-align:center;}

.team_member h2{font-size:23px;}

input.error,textarea.error{border:1px solid #ec0032;background:#ffdddd;}
#fail,#error{border:1px solid #ec0032;background:#ffdddd;display:none;padding:15px 20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

#success{border:1px solid #4BB543;background:#d7fbd4;display:none;padding:15px 20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}


.hamburger {
  padding: 15px 15px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  outline:none;
  float:right;
  text-transform: none;
  background-color: transparent;
  border: 0;
  position: relative;
    z-index: 2;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #8998A6; }

    .white.hamburger.is-active .hamburger-inner,
  .white.hamburger.is-active .hamburger-inner::before,
  .white.hamburger.is-active .hamburger-inner::after{background-color:white;}

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

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #8998A6;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }

    
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

    .hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

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



.entry-title,.entry-meta {
clear:both;
}

.alignright,img.alignright{
float:right;
margin:1em 0 0 1em;
}

.alignleft,img.alignleft{
float:left;
margin:1em 1em 0 0;
}

.aligncenter,img.aligncenter{
display:block;
margin:1em auto;
text-align:center;
}

div.sidebar h3 {
font-size:1.2em;
}

div.sidebar li {
list-style:none;
margin:0 0 2em;
}

div.sidebar li form {
margin:0.2em 0 0;
padding:0;
}

div.sidebar ul ul {
margin:0 0 0 1em;
}

div.sidebar ul ul li {
list-style:none;
margin:0;
}

div.sidebar ul ul ul {
margin:0em;
}

div.sidebar ul ul ul li {
list-style:none;
}



input#author,input#url,div.navigation div ,.wp-caption {}.wp-caption-text {}.sticky {}.gallery-caption {}.bypostauthor {}

   



@media screen and (max-width:700px){

	body{background-size: 100%;}

.flex,.nodesk{display:block;}
.nomob{display:none;}

.bigtext{font-size: 38px;
    line-height: 45px;}
    .hamburger{display: inline-block;}

.hwm{width:50%;}
.fwm,.hwi {width:100%!important;}

.flip-card{
    max-width: 350px;
    margin: auto;
}

#menu{position:fixed;right:-100%;top:0;padding-top:130px;padding-bottom:100px;background:#006ED3;display:block;z-index:3}
#menu li{display:block;}
#menu li a{display:block;padding:15px 50px;color:white;}

.hamburger{z-index:4}

.tm .hh_overlay{width:100%;text-align:center;}
.tm .biggerrow{margin-bottom: 40px}

.image_half{margin-bottom:120px;}

.big_image_cta .cta, .hh_overlay{position:relative;right:0;width:100%;margin-bottom:0;top:0;}

.footlogo img{margin-bottom:50px;}
#footer{padding-bottom:80px;}

.btt .flex{display:flex;}
}