@charset "utf-8";
/* CSS Document */

/* Font */
@font-face {font-family: 'GingerPro-Bold'; src: url(../font/GingerPro-Bold.woff2) format('woff2'), url(../font/GingerPro-Bold.woff) format('woff'), url(../font/GingerPro-Bold.eot) format('eot');}
@font-face {font-family: 'GingerPro-Regular'; src: url(../font/GingerPro-Regular.woff2) format('woff2'), url(../font/GingerPro-Regular.woff) format('woff'), url(../font/GingerPro-Regular.eot) format('eot');}

/* Body */
body {color: #000; font-family: 'GingerPro-Regular', Helvetica, Arial, "sans-serif"; font-weight: normal; font-size: 18px; line-height: 1.4em;}
b, strong {font-family: 'GingerPro-Bold' !important; font-weight:  400 !important;}
a {outline: 0px;}

p.body-small {font-size: 0.9em; line-height: 1.3em;}
p.body-large {font-size: 1.3em; line-height: 1.4em;}
p.body-extra-large {font-family: 'GingerPro-Bold'; font-size: 2em; line-height: 1.4em}

h1 {font-family: 'GingerPro-Bold'; font-size: 5.5em; line-height: 1em; letter-spacing: -2px;}
h2 {font-family: 'GingerPro-Bold'; font-size: 1.8em; line-height: 1.1em; letter-spacing: -1px; margin-bottom: 0.5em;}
h3 {font-family: 'GingerPro-Bold'; font-size: 1.4em; line-height: 1.4em;}
h4 {}
h5 {}
h6 {}

h1.h1-small {font-size: 4.5em;}
h2.h2-small {font-size: 1.3em; letter-spacing: -0.5px;}
h2.h2-medium {font-size: 3.1em;}
h2.h2-large {font-size: 3.6em; margin-bottom:0.25em;}

h2.h3-small, h3.h3-small  {font-size: 1.5em;}
h3.h3-body-size {font-size: 1em;}

.half-size {font-size: 0.5em;}

/* Link */
a:link {color: #000; text-decoration: none;}
a:visited {color: #000; text-decoration: none;}
a:hover {color: #0000ff; text-decoration: none;}
a:active {color: #000; text-decoration: none;}

a.nav-link:link {color: #fff; text-decoration: none;}
a.nav-link:visited {color: #fff; text-decoration: none;}
a.nav-link:hover {color: #0000ff; text-decoration: none;}
a.nav-link:active {color: #fff; text-decoration: none;}

.navbar-toggler {border: 0px; color: #fff; outline: 0px !important; font-size:  2em;}

/* Colour Variables  */ 

.bg-grey {background: #f4f4f4;}
.bg-midgrey {background: #e5e5e5;}
.bg-midgrey-box {background: #d9d9d9;}
.bg-white {background: #fff;}
.bg-blue {background: #b8c3c9;}
.bg-black {background: #000;}
.bg-cyan {background: #afe5d5;}

.white {color: #fff !important;}
.white a {color: #fff !important; transition: 0.4s;}
.white a:hover {color: #0000ff !important;}

/* Button Variables  */ 

a.button-black, a.button-black-small, a.button-blue, a.button-border-white, a.button-white {background: #000; border: none; border-radius: 50px; color: #fff !important; cursor: pointer; display: inline-block; font-family: GingerPro-Bold; transition: 0.4s; margin-top: 10px; outline: 0px; padding: 10px 25px !important;}
a.button-black-small {font-size: 0.8em; padding: 7px 20px;}
a.button-black:hover, a.button-black-small:hover {background: #0000ff;}
a.button-blue {background: #0000ff; border: 2px solid #0000ff; margin-top: -1px; padding: 8px 25px !important;}
a.button-blue:hover {background: #000; border: 2px solid #000;}
a.button-white {background: #fff; border: 2px solid #fff; color: #000 !important; margin-top: -1px; padding: 8px 25px !important;}
a.button-white:hover {background: #0000ff; color: #fff !important; border-color: #0000ff;}
a.button-black i {margin-right: 5px;}
a.button-border-white {background: transparent; border: 2px solid #fff;}
a.button-border-white:hover {background: #fff;}

a.email-button, a.phone-button {min-width: 190px; text-align: center;}
a.email-button:hover i:before {content: '\f2b6';}
a.phone-button:hover i {animation: shake 1s; animation-iteration-count: infinite;}

@keyframes shake {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(-7deg); }
  10% { transform: rotate(0deg); }
  15% { transform: rotate(7deg); }
  20% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Core Styles  */ 

.overflow-hidden {overflow: hidden;}

.border-rounded {border-radius: 5px; overflow: hidden;}

.container-large, .nav-max-width {max-width: 1440px !important;}
.nav-max-width {margin: 0 auto;}

.center {text-align: center;}
.layer-padding, .layer-padding-top {padding-top: 6%; padding-bottom: 6%;}
.layer-padding-top {padding-bottom: 0px;}
.layer-padding-medium {padding-top: 4%; padding-bottom: 4%;}
.layer-padding-bottom {padding-bottom: 6%;}
.layer-padding-small {padding-top: 1%; padding-bottom: 1%;}

.rounded-box {border-radius: 10px; padding: 5.5% 7.5%;}
.rounded-box-no-padding {border-radius: 10px; overflow: hidden;} .rounded-box-text-padding {padding: 10% 5.5%}

.divider {margin: 20px 0px;}

.footer-main h4 {margin-bottom: 20px;}
.footer-main .body-large {letter-spacing: 0.15em;}
.footer-copyright {padding-bottom: 40px;}

form label {display: block; width: 100%; position: relative;}
form label i.fas {position: absolute; left: 15px; top: 0px; line-height: 53px;}
input, textarea {
  border: 0px; 
  border-radius: 12px;
  color: #000; 
  display: block; 
  font-size: 18px; 
  padding: 14px 14px 14px 40px;
  outline: 0px;
  width: 100%;
}
form a.w-100 {text-align: center}
form [type=reset], form [type=submit], form button, form [type=button] {-webkit-appearance: none;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #000;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #000;}
input::placeholder, textarea::placeholder {color: #000;}

.g-recaptcha > div {margin:  5px auto 10px;}

.grey-form input, .grey-form textarea {background: #f2f2f2;}

.modal-header {border-bottom: 0px; padding-bottom: 0px;}
button.close {outline: 0px;}

#contactPopup .modal-header {padding: 10% 10% 0px;}
#contactPopup .modal-body {padding: 15px 10% 10%;}
#contactPopup .modal-body input, #contactPopup .modal-body textarea {border: 1px solid #000;}

/* Nav */
.navbar-brand {padding: 0.8% 2% 0.8% 0%}

.navbar-brand:hover img {opacity: 0;}
.navbar-brand .logo-holder {display: block; background: url("../img/dt-logo-hover.png") top center;}
.navbar-brand:hover .logo-holder {
  -webkit-animation: play 1.4s steps(40) 0.2s 0.5 forwards;
  animation: play 1.4s steps(40) 0.2s 0.5 forwards;
}

@-webkit-keyframes play{100%{background-position:0 -3920px}}
@keyframes play{100%{background-position:0 -3920px}}

.menu-large {position: static !important;}
.megamenu {font-size: 1em; padding: 20px 20px;  width: 100%;}
.megamenu > div > li > ul {padding: 0; margin: 0;}
.megamenu > div > li > ul > li {list-style: none;}
.megamenu .card:hover,
.megamenu .card:focus {
    outline: 1px solid #000;
}
.megamenu > div > li > ul > li > a {
  display: block;  padding: 3px 0px;  clear: both;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}
.dropdown-menu {border: 0px;}
.dropdown-header {color: #000; font-size: 1em; padding-left: 0px;}
.dropdown-item {padding: 15px; white-space: inherit;} .dropdown-item:hover {background: transparent;}
@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu > li {
    margin-bottom: 30px;
  }
  .megamenu > li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}

/* By Page */

/**** Menu ****/
.main-menubar {-ms-flex-pack: center; justify-content: center;}
.dropdown-menu {margin-top: 0px;}

.navbar {padding-bottom: 0px; padding-top: 0px;}

.dropdown-toggle::after {display:  none; bottom:  -3px; margin-left:  0px; position: relative;}

/**** Home ****/
 
.home-hero {padding: 120px 0px 0px; overflow:  hidden;}
.home-hero .hero-container {background-image: url('../img/hero-bg.jpg'); background-size:  cover; padding: 9% 30px;}
.home-hero .hero-container h1 {max-width: 950px;} 
.home-hero .hero-container h3 {max-width: 700px; margin: 25px 0px 35px;} 

.portfolio-boxes .row {margin-bottom: -30px;}
.portfolio-boxes .col-md-4 {margin-bottom: 30px;}

.pricing-table table {border-collapse: separate; border-spacing: 0px 20px; width: 100%;}
.pricing-table th {font-weight: 400; width: 33.33%;}
.pricing-table th p {color: #b2b2b2; font-size: 1.3em; max-width: 290px; margin: 0px auto;}
.pricing-table th b {color: #000; display: block;}

.pricing-table tbody tr td {background: #f0f0f0; font-size: 1.3em; padding: 10px; line-height: 1.5em;}
.pricing-table tbody tr td:first-child {border-radius: 100px 0px 0px 100px; font-family: 'GingerPro-Bold';}
.pricing-table tbody tr td:last-child {border-radius: 0px 100px 100px 0px;}

.navbar-spacer {height: 120px;}

.contact-page {padding: 7% 30px;}
.contact-page h2 {max-width: 375px; margin-bottom: 0px;}

.contact-footer h2 {font-size: 4.5em; line-height: 1.1em;}

#markerLayer {
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
#markerLayer:hover {
        animation-name: bouncePin;
        animation-timing-function: ease;
}
@keyframes bouncePin {
  0%   { transform: scale(1,1)    translateY(0); }
  10%  { transform: scale(1.1,.9) translateY(0); }
  30%  { transform: scale(.9,1.1) translateY(-100px); }
  50%  { transform: scale(1,1)    translateY(0); }
  57%  { transform: scale(1,1)    translateY(-7px); }
  64%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}

.c2a-banner p {font-size: 17px;}

/* Responsive */

@media (min-width: 1200px){
  .navbar-collapse {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  .navbar-expand-xl .navbar-nav .nav-link {padding-left:  0.7em; padding-right:  0.7em;}
  .navbar-nav li:hover > ul.dropdown-menu {display: block; transition: 0.8s;}
  .navbar-nav.d-flex > li {cursor: pointer; display: -ms-flexbox; display: flex;}
  .navbar-nav.d-flex > li > a {-ms-flex-item-align: center; align-self: center;}

  .navbar.customActive {background-color: #fff;}
  .navbar.customActive .navbar-brand {-webkit-filter: invert(1); filter: invert(1);}

  .navbar.customActive a.nav-link:link {color: #000; text-decoration: none;}
  .navbar.customActive a.nav-link:visited {color: #000; text-decoration: none;}
  .navbar.customActive li:hover > a.nav-link {color: #0000ff; text-decoration: none;}
  .navbar.customActive a.nav-link:active {color: #000; text-decoration: none;}

  .dropdown:after{
      content: ''; 
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transition: opacity .15s ease-in-out;
      opacity: 0;
      visibility:hidden;
      background-color: rgba(0,0,0,.7);
      pointer-events: none;
      top: 145px;
  }
  .dropdown.show .nav-link{position:relative; z-index:12;}
  .dropdown.show:after{z-index:10; opacity:1; visibility:visible; position: fixed;}

  .mobile-phone-icon {display: none;}
}


@media(max-width: 1200px){
  h1 {font-size: 4.5em;}

  .navbar-brand {margin: 0px;}

  .megamenu {padding: 0px;}
  .megamenu .col-md-3 {width: 50%;}
  
  .navbar-collapse {overflow-y: scroll; max-height:  calc(100vh - 140px); -ms-overflow-style: none; scrollbar-width: none;}
  .navbar-collapse > .navbar-nav {padding-bottom: 20px;}

  .mobile-phone-icon {position: absolute; right: 60px; top: 46px; font-size: 22px; margin-right: 25px;}
  .mobile-phone-icon a {color: #fff;}

  .navbar-brand {padding: 10px 0px;}

  .home-hero {padding: 118px 0px 0px;}
}

@media (max-width: 992px) {
  h2.h2-large {font-size: 3.5em;}
  h2.h2-medium {font-size: 2.25em;}

  .h4, h4 {font-size: 1.25em;}

  .megamenu {font-size: 0.85em; line-height: 1.3em;}
}

@media (max-width: 768px) {
  body {font-size: 16px;}
  h1 {font-size: 4em;}

  .layer-padding, .layer-padding-top {padding-top: 45px; padding-bottom: 45px;}
  .layer-padding-top {padding-bottom: 0px;}
  .layer-padding {padding-top: 30px; padding-bottom: 30px;}
  .layer-padding-bottom {padding-bottom: 45px;}
  .layer-padding-small {padding-top: 20px; padding-bottom: 20px;}

  .home-team {background-size: 150%; background-repeat: no-repeat; padding-bottom:  43%;}

  .mb-sm-5, .my-sm-5 {margin-bottom: 2rem !important;}

  p.body-extra-large {font-size: 1.2em;}
}

@media (max-width: 576px) {
  h1 {font-size: 3em;}

  .mb-5, .my-5 {margin-bottom: 2rem !important;}
  .mb-xs-5 {margin-bottom: 2rem !important;}
  .mt-xs-3 {margin-top: 1rem !important;}

  h2.h2-large {font-size: 2.5em;}

  .rounded-box-no-padding img {width: 100%;}

  .megamenu .col-md-3 {width: 100%;}

  .footer-copyright .pl-5 {padding-left:  1em !important;}

  a.email-button, a.phone-button {min-width: 160px;}

  .smaller-p-mobile p {font-size: 0.9em;}
}