/** Generated: Tuesday, 24th of June 2025, 12:37:55 PM // Powered by AIOM+ (All In One Minify) created by FlipZoom Media Inc. - David Karich (flipzoom.de) **/
/**
 * Created by Ben Byford
 *
 * main.css
 *
	Variables
	General HTML tags
	Masthead area
	Main content and sidebar
	Footer
	Helper Classes
	Print
 *
 */
/*********************************************************************
* Variables
*
*/
/*********************************************************************
* Animation
*
*/
p a,
.client-logo h2 {
  transition: all 0.2s ease-out;
}
.expanded.client-logo h2 {
  transition: all 0.8s ease-in-out;
  padding-bottom: 1.2em;
}
@keyframes fadeOut {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0%;
    transform: translateY(-10px);
  }
  100% {
    opacity: 100%;
    transform: translateY(0px);
  }
}
@keyframes navBlockAnimation {
  0% {
    opacity: 0%;
    transform: translateY(40vh);
  }
  50% {
    opacity: 100%;
  }
  72% {
    transform: translateY(40vh);
  }
  100% {
    transform: translateY(0);
  }
}
.logo svg .extra-text {
  animation: fadeOut 0.5s 1s ease-in-out forwards;
}
.logo:hover svg .extra-text {
  animation: fadeIn 0.5s 0s ease-in-out forwards;
}
.fadeInDown {
  animation: fadeInDown 0.8s 0s ease-in-out forwards;
}
.fadeIn {
  animation: fadeIn 1s 0s ease-in-out forwards;
}
.fadeOut {
  animation: fadeOut 0.3s 0s ease-in-out forwards;
}
.nav_block_animation {
  animation: navBlockAnimation 4s 0s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/*********************************************************************
* General HTML tags
*
*/
* {
  box-sizing: border-box;
}
::-moz-selection {
  background: #fcf7b3;
  text-shadow: none;
}
::selection {
  background: #fcf7b3;
  text-shadow: none;
}
html,
body {
  scroll-behavior: smooth;
}
body {
  padding: 0;
  margin: 0 auto;
  background: #f2f2f2;
}
body,
td,
input,
textarea {
  font-family: 'Times new roman', times, serif, serif;
  font-size: 13px;
  line-height: 1.5em;
  color: #1a1a1a;
  font-style: italic;
}
textarea {
  min-height: 160px;
}
img {
  width: 100%;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 120%;
  word-break: keep-all;
  font-family: 'Time new roman', times, serif;
  letter-spacing: 0.05px;
}
h1 {
  font-size: 1.6em;
  margin: 0.8em 0 1em 0;
}
h2 {
  font-size: 1.4em;
  margin: 1.6em 0 1.2em 0;
}
h3 {
  font-size: 1.3em;
  margin: 1.2em 0 1em 0;
}
h4 {
  font-size: 1.2em;
  margin: 1em 0 0.8em 0;
}
h5 {
  font-size: 1.1em;
  margin: 0.8em 0 0.6em 0;
}
h6 {
  margin-bottom: 2em;
}
@media all and (min-width: 786px) {
  h1 {
    margin: 1.2em 0 1em 0;
  }
  h2 {
    font-size: 1.8em;
    margin: 1.6em 0 1.4em 0;
  }
  h3 {
    font-size: 1.7em;
    margin: 1.2em 0 1em 0;
  }
  h4 {
    font-size: 1.6em;
    margin: 1em 0 0.8em 0;
  }
  h5 {
    font-size: 1.3em;
    margin: 0.8em 0 0.6em 0;
  }
  h6 {
    margin-bottom: 2em;
  }
}
a {
  color: #1a1a1a;
  word-break: break-word;
}
a:visited {
  color: #171717;
}
a:hover {
  opacity: 0.8;
}
a:hover img {
  transform: translateY(-1px);
}
a:active,
a:focus {
  color: #1d1d1d;
}
a:active img,
a:focus img {
  transition: all 0.1s ease-in-out;
  opacity: 1;
  transform: translateY(1px);
}
p a {
  text-decoration: none;
  border-bottom: 1px solid black;
  padding-bottom: 0.1em;
}
p a:hover {
  padding-bottom: 0em;
}
p a:active {
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1em;
}
small {
  font-size: 0.75em;
  opacity: 0.75;
}
blockquote {
  font-size: 110%;
  line-height: 160%;
  padding: 6%;
  margin: 3em 0;
  font-family: georgia, serif;
  border-left: 5px solid #1a1a1a;
  background: #eee;
}
blockquote p:last-child {
  margin: none;
}
pre,
code {
  background: #eee;
  border: 1px solid #ddd;
}
pre {
  font-size: 14px;
  line-height: 1.4em;
  padding: 1em;
  border-left: 4px solid #ddd;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #f2f2f2;
  margin: 1em 0;
  padding: 0;
  max-width: 50%;
}
.spacer {
  background: #f2f2f2;
  height: 2px;
  width: 50%;
  max-width: 100px;
  margin: 1em auto;
  display: block;
  clear: both;
}
form input,
form textarea {
  display: inline-block;
  margin: 0 5px 10px;
  text-align: left;
  padding: 2em 1.6em;
  border: 2px solid #f2f2f2;
  width: 100%;
  vertical-align: top;
  line-height: 1em;
}
form input:focus,
form textarea:focus {
  border: 2px solid #d9d9d9;
}
form input[type="submit"] {
  color: white;
  background-color: #1b3040;
  box-shadow: 0 4px 0 #46d7c8;
  cursor: pointer;
  border: 0;
  transform: translateY(2px);
  max-width: 200px;
  text-align: center;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
  transform: translateY(1px);
  background-color: #2a4b64;
  box-shadow: 0 5px 0 #46d7c8;
}
form input[type="submit"]:active {
  transform: translateY(3px);
  background-color: #0c151c;
  box-shadow: 0 2px 0 #46d7c8;
}
/*********************************************************************
 * 2. nav area
 *
 */
.logo {
  width: 40px;
  display: block;
  margin: 0;
}
@media all and (min-width: 460px) {
  .logo {
    width: 40px;
    position: sticky;
    top: 2em;
  }
}
header {
  width: 100%;
}
header h1 {
  text-align: center;
}
article {
  width: 80%;
}
@media all and (min-width: 920px) {
  article {
    max-width: 300px;
  }
}
form.search {
  margin: 0;
  padding-bottom: 0.4em;
}
form.search input {
  margin: 0;
  border: 0;
  color: white;
  text-align: right;
  background: transparent;
  border-bottom: 3px solid #f2f2f2;
}
form.search input:active,
form.search input:hover,
form.search input:focus {
  background: rgba(22, 22, 22, 0.2);
}
@media all and (min-width: 786px) {
  form.search {
    width: 100%;
    float: right;
  }
}
form.search button {
  display: none;
}
/*********************************************************************
 * 3. Main content and sidebar
 *
 */
#page {
  padding-top: 2em;
}
@media all and (min-width: 460px) {
  #page {
    display: grid;
    grid-template-columns: 25% 75%;
  }
}
@media all and (min-width: 920px) {
  #page {
    display: grid;
    grid-template-columns: 33.33% 66.666%;
  }
}
.container {
  min-width: 320px;
  position: relative;
  margin: 0 auto;
  width: 92%;
  max-width: 1200px;
}
@media all and (min-width: 460px) {
  .container {
    width: 96%;
  }
}
.text-container {
  max-width: 720px;
}
#main {
  clear: both;
}
@media all and (max-width: 460px) {
  #main {
    margin-top: 2em;
  }
}
nav {
  border-top: #1a1a1a dotted 1px;
}
nav a {
  text-decoration: none;
  display: inline;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding-top: 0.9em;
  margin-top: -0.6em;
  border-right: 1px dotted #1a1a1a;
}
nav > a:last-child {
  border-right: 0;
}
#social-links {
  border-top: 0;
  position: absolute;
  top: 2.4em;
  right: 0;
}
@media all and (min-width: 460px) {
  #social-links {
    position: fixed;
    bottom: 2em;
    right: auto;
    top: auto;
  }
}
#social-links a {
  width: 20px;
  height: 20px;
  border: 0;
}
#social-links a.instagram-svg {
  background: url(/site/templates/img/instagram.svg) no-repeat;
}
#social-links a.linkedin-svg {
  background: url(/site/templates/img/linkedin.svg) no-repeat;
  width: 17px;
}
.align_left {
  /* for images placed in rich text editor */
  float: left;
  margin: 0 1em 0.5em 0;
  position: relative;
  top: 0.5em;
  max-width: 50%;
}
.align_right {
  /* for images placed in rich text editor */
  float: right;
  margin: 0 0 0.5em 1em;
  max-width: 50%;
}
.align_center {
  /* for images placed in rich text editor */
  display: block;
  margin: 1em auto;
  position: relative;
  top: 0.5em;
}
.client-logo img {
  width: 50%;
  max-width: 100px;
  z-index: 3;
}
.client-logo h2 {
  position: relative;
  z-index: 3;
  cursor: pointer;
}
.client-logo h2:hover {
  opacity: 0.8;
}
.client-logo h2:after {
  content: "+";
  font-size: 60%;
  clear: both;
  display: inline-block;
  float: right;
}
.expanded.client-logo h2:after {
  content: "-";
}
/*********************************************************************
 * 4. Footer
 *
 */
#footer {
  clear: both;
  font-size: 80%;
  padding-bottom: 0.6em;
}
@media all and (min-width: 786px) {
  #footer {
    width: 50%;
  }
}
/*********************************************************************
* Sections
*
*/
section {
  padding: 2em 0 4em;
}
section .left > h2 {
  padding-top: 0;
  margin-top: 0;
}
/*********************************************************************
* blog
*
*/
.post {
  margin-bottom: 4em;
}
/*********************************************************************
* 4. Helper classes
*
*/
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
.hidden,
.hide {
  display: none;
}
.invisible {
  opacity: 0;
}
.not-visible-after::after {
  visibility: hidden;
}
#message,
#address,
#pageId {
  display: none;
}
.no-opacity {
  opacity: 0;
}
.opacity {
  opacity: 1;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.full-width {
  width: 100%;
}
@media screen and (min-width: 460px) {
  .grid {
    display: grid;
    align-items: start;
    align-content: baseline;
  }
}
.grid-item {
  padding: 0.6em 0 0.6em 0;
}
@media all and (min-width: 460px) {
  .grid-item {
    padding: 0.6em 1em 0.6em 0;
  }
}
@media all and (min-width: 786px) {
  .grid-item {
    padding: 0.6em 2em 0.6em 0;
  }
}
.grid-item img {
  max-width: 400px;
}
@supports (grid-column-gap: 10px ) {
  .grid-item {
    padding: 0.6em 0 0.6em 0;
  }
  .three-up {
    grid-column-gap: 15px;
  }
}
.four-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 460px) {
  .four-up {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 786px) {
  .four-up {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 460px) {
  .three-up {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 786px) {
  .three-up {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 460px) {
  .one-up {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 920px) {
  .two-up {
    grid-template-columns: 1fr 1fr;
  }
}
.two-up-mobile {
  grid-template-columns: 1fr 1fr;
}
.flex {
  display: flex;
  justify-content: space-around;
}
.span-two {
  grid-column: auto / span 2;
}
hr.span-two {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.circle {
  border-radius: 500px;
}
.underline {
  border-bottom: 1px dotted #1a1a1a;
  padding-bottom: 0.36em;
}
h2.underline {
  max-width: 80%;
}
.light-text {
  color: white;
}
.light-text h1,
.light-text h2,
.light-text h3,
.light-text h4,
.light-text h5 {
  color: #46d7c8;
}
.light-text a {
  color: #46d7c8;
}
.light-text a:visited {
  color: #54fff0;
}
.light-text a:hover {
  color: #38aca0;
}
.light-text a:active,
.light-text a:focus {
  color: #70ffff;
}
.expand > h2 {
  cursor: pointer;
}
.padding-top {
  padding-top: 0.6em;
}
.margin-top {
  padding-top: 2em;
}
.margin-top-big {
  padding-top: 4em;
}
@media all and (min-width: 786px) {
  .margin-top-big {
    padding-top: 6em;
  }
}
.no-border-top {
  margin-top: 0.2em;
}
.image-grid {
  display: block;
}
.image-grid img {
  padding-bottom: 0.6em;
  cursor: pointer;
}
@media all and (max-width: 786px) {
  .image-grid.margin-top-big {
    padding-top: 1em;
  }
}
.image-grid hr {
  display: none;
}
.image-grid.two-up-mobile {
  display: grid;
}
.image-grid.two-up-mobile hr {
  display: block;
}
.image-grid.two-up-mobile img {
  padding: 0.6em;
}
.image-grid.two-up-mobile img.n0,
.image-grid.two-up-mobile img.n1 {
  padding-top: 0;
}
.image-grid.two-up-mobile img.n0,
.image-grid.two-up-mobile img.n2 {
  padding-left: 0;
  border-right: 1px dotted #1a1a1a;
}
.image-grid.two-up-mobile img.n1,
.image-grid.two-up-mobile img.n3 {
  padding-right: 0;
}
.image-grid.two-up-mobile img.n2,
.image-grid.two-up-mobile img.n3 {
  padding-bottom: 0;
}
@media all and (min-width: 920px) {
  .image-gallery {
    width: 200%;
  }
}
.image-gallery img {
  width: auto;
  max-width: 100%;
  max-height: 96%;
}
.image-gallery img.absolute {
  top: 0;
  left: 0;
}
.image-gallery img.absolute {
  cursor: pointer;
}
.clients-grid > div {
  min-height: 40vw;
}
@media all and (min-width: 460px) {
  .clients-grid > div {
    min-height: 17vw;
  }
}
@media all and (min-width: 786px) {
  .clients-grid > div {
    min-height: 15vw;
  }
}
@media all and (min-width: 920px) {
  .clients-grid > div {
    min-height: 6vw;
  }
}
.clients-grid img {
  padding: 1.2em 0.9em;
}
.fadeOutText {
  position: relative;
}
.fadeOutText:after {
  transition: opacity 0.25s ease-out;
  content: "";
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 2;
  opacity: 1;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(top, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  /* IE6-9 */
}
.expanded .fadeOutText:after {
  transition: opacity 1.2s ease-out;
  opacity: 0;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
  }
  thead {
    display: table-header-group;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  pre,
  blockquote,
  h2,
  h3,
  tr,
  img {
    page-break-after: avoid;
  }
}