@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #fff;
}

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

  .brick img {
    margin: 0;
    display: block;
  }


#intro-banner {
padding-top:6em;
}

.brand-logo {
width:6rem;
height:auto;
}

.section-title {

}
/* Navbar */

.navbar {
  background-color: #fff;
  padding-top:16px;
  padding-bottom:16px;
  padding-left:72px;
  height: 5rem;
}

.navbar-collapse {
  background-color: #fff;
}
.navbar-collapse ul {
  text-align: center;
}

.navbar-brand, .nav-link {
  font-family: 'Josefin Sans', serif;
  font-weight: 400;
}
.nav-link {
  transition: all .3s ease-in-out;
}
.nav-link:hover {
  color:#3D7E8F!important;

}
.navbar-toggler {
border-color: rgba(0,0,0,0) !important;
}
.nav-item {
  padding-right:1.5rem;
  font-size: 1.2rem;
}
.active > .nav-link {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-box-shadow:inset 0px -2px 0px 0px #3D7E8F;
      -moz-box-shadow:inset 0px -2px 0px 0px #3D7E8F;
      box-shadow:inset 0px -2px 0px 0px #3D7E8F;
      color:#3D7E8F!important;
}

/* Sub Menu */

ol.sub-menu li {
  padding-top:0.5rem;
}

ol.sub-menu li a{
  color:#3D7E8F;
  text-decoration: underline;
}

ol.sub-menu li a:hover {
    color:#75792F;
      text-decoration: none;
}

/* Recent Work Styles */

#recent-yonder {
  background-image: url('../img/work-one.png');
}
#recent-simply {
  background-image: url('../img/test.png');
}
#recent-abbey {
  background-image: url('../img/abbeyfield-belfast-ida.jpg');
}






#primary-navigation {

}
.meta-data-info {

}
.meta-data {
  font-size: 0.75rem;
  color:gray;
  display: inline;
}

h1, h2, h3,h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
}

h4 {
  font-size: 1.5rem;
}

h1 {
  font-size: 3.052rem;
}
h2 {
  font-size: 2.441rem;
}
h3 {
  font-size: 1.953rem;
}

p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.25rem;
}

li {
  font-family: 'Lato', sans-serif;
  list-style: none;
}
p.small {
  font-size: 1rem;
}
p.large {
  font-size:1.5rem;
}
span.xsmall {
  font-size:0.8rem;
}

#work::before {
  display: block;
  content: " ";
  margin-top: -50px;
  height: 50px;
  visibility: hidden;
  pointer-events: none;
}

.summary-text {

}
.header-text {
  font-size: 1.5rem;
}
.header-text-large {
  font-size: 2rem;
}

.text-link {
  color:#3D7E8F;
  text-decoration: underline;
  transition: all .3s ease-in-out;
}
.text-link:hover{
  color:#75792F;
    text-decoration: none;
}
.text-highlight {
  color:#3D7E8F;
  font-weight: 600;
}
.highlight {
  color:#3D7E8F;
}

.arrow {
    text-align: center;
    --animate-duration: 1s;
}
.arrow img {
  width:5rem;
  height:auto;

}

.home-case-study-box {
  padding-bottom:30px;
}

.case-study-display {
    animation-timing-function:ease-in-out;
}

.case-study-display:hover {

}

.small-container {
display:inline-block;
word-wrap: normal;
width:auto;
}

.project-detail {
  background-color:rgba(61, 126, 143, 0.1);
  color:#3D7E8F;
  padding:0.5rem;
  border-radius: 4px;
margin-right:0.5rem;
margin-bottom:0.5rem;
}



hr.ruler-blue {
border-top: 2px solid #3D7E8F !important;
}
hr.ruler-light {
border-top: 1px solid #3D7E8F !important;
max-width:50%;
}
.layout-center {
  text-align: center;
}
.image-container {
width:60%;
height:auto;
}
.image-container img {
width:100%;
height:auto;
text-align: center;
}
.logohover {
  transition: 0.3s ease-in-out;
  text-align: center;
}
.logohover:hover {
  transform: translateY(-0.5rem);
}
.imghover {
  transition: 0.3s ease-in-out;
  text-align: center;
}
.imghover:hover {
  transform: scale(1.05);
}


.artContainer img {
  margin-bottom: 2rem;
}
.artworkContainer {
  width:100%;
  height:auto;
}
.artworkContainer img {
  width:100%;
  height:auto;
  text-align: center;
  border-radius: 10px;
}
.logoContainer {
  text-align: center;
  margin-bottom: 2rem;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.035);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.035);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.035);
  border-radius:6px;
  margin-right:2rem;
  background-color: #ffffff;
}

.featuredBanner {
width:100%;
height:500px;
background-color: red;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#work-one {
  background-image: url('../img/work-one.png');
  background-color: ;
}
.bg-parent {
  position: relative;
  text-align: center;
  width:100%;
  height:auto;
}
.bg-color {
  text-align: center;
  height:80%;
  width:100%;
  left:0;
  top:10%;
  position: absolute;
  z-index: -1;
  border-radius:2px;
  -webkit-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25);
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25);
transition: all .5s ease-in-out;
}

.bg-up {
  transform: skewY(3deg);
}
.bg-up:hover {
  transform: skewY(2deg);
}
.bg-down {
  transform: skewY(-3deg);
}
.bg-down:hover {
  transform: skewY(-2deg);
}
.bg-blue {
  background-image: linear-gradient(0deg, #3D7E8F 0%, #3D7E76 100%);
}
.bg-green {
  background-image: linear-gradient(0deg, #76B19A 0%, #548F78 100%);
}
.bg-yellow {
  background-image: linear-gradient(0deg, #EEC94E 0%, #F8D665 100%);
}
.bg-red {
  background-image: linear-gradient(0deg, #CA5941 0%, #E8735A 100%);
}

.bg-break {
  background-color: #f6fafb;
/*  background-color:   #f0f4ff; */
/*  background-color: rgba(61, 126, 143, 0.4) */

}
.imgPosition {
  position:relative;
  text-align: center;
  z-index: 1;
  top:0;
  left:0;
  display: inline-block;
}
.artwork-bg {
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
  border-radius:3px;
}
.no-link {
  cursor:default!important;
  -webkit-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25);
box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25)!important;
}
.no-link:hover {
  transform: scale(1);
  -webkit-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25);
box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.25)!important;
}

.imgPosition img{
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.25);
  border-radius:3px;
}
.imgPosition img:hover{
  -webkit-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.40);
box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.40);
}
.imgPosition:hover > div.featured-work {

}
.bg-parent:hover > .bg-color {

}

.category-icon {
padding-right: 1rem;
}

.featured-work {
transition: all .3s ease-in-out;
}

.featured-work:hover {
transform: scale(1.05);
  cursor: pointer;
}

/* Overlay Styles */


.content {
    position: relative;
    width: 100%;
    height:auto;
    margin: auto;
    overflow: hidden;
}

.content .content-overlay {
    background: rgba(61, 126, 143, 0.95);
    position: absolute;
    height: auto;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    border-radius:3px;
}

.content:hover .content-overlay, .content:focus {
    opacity: 1;
}

.content img {
  width:100%;
  height:auto;
}

.content-image {
  border-radius: 3px;
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1;
}

.content-details h3 {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-size:1.25rem;
}

.content-details p {
    color: #fff;
    font-size: 1rem;
}
.gallery-icon {
  color:#fff;
}

.fadeIn-bottom {
    top: 80%;
}


.industry-list {
  display:none;
}
.img-resizer {
  width:100%;
  height:auto;
}
#contactButton {
}
.btn {
  border-radius: 1px;
}
.btnLong {
  padding: 5px 20px!important;
}

.btnPrimary {
  background-color:#3D7E8F;
  border:2px solid #3D7E8F;
  color:#fff;
  transition: 0.3s;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
.btnPrimary:hover {
  background-color:#f6fafb;
  border:2px solid #3D7E8F;
  color:#3D7E8F;
  transition: 0.3s;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.btnSecondary {
  background-color:#fff;
  border:2px solid #3D7E8F;
  color:#3D7E8F;
  transition: 0.3s;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}
.btnShadow {
}

label, input {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
}
small {
  font-family: 'Josefin Sans', sans-serif;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(61, 126, 143, 1);
}
figure {

}
figcaption {
  font-size: 0.75rem;
  color:#A0A0A0;
  padding-top:.5rem;
  padding-bottom:.5rem;
}

.halfForm {
  width:60%;
}

/* Work Card Styles */

.grey-bg {
  /* background-color: #fafafa; */
  background-color: #f0f4ff;
  width:100%;
  height:auto;
  border: 1px solid rgba(234, 234, 234, 0.5);

}

.workCard-active {
  height:auto;
  width:100%;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
  border-radius:6px;
  transition: all .3s ease-in-out;
  background-color: #fff;
}
.workCard-active:hover{
  transform: scale(1.01);
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.3);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.3);
}
.workCard {
  height:auto;
  width:100%;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.05);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.05);
  border-radius:6px;
  transition: all .3s ease-in-out;
  background-color: #fff;
}

.workImgContainer {
  width:100%;
  height:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.workImgContainer img {
  width:100%;
  height:auto;
}
.workInfoBox{

}
.workInfoBox p {
  font-size: 1.25rem;
}
.workInfoBox p.meta-data {
  font-size: 1rem;
}
.workInfoBox h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
}

.coming-soon {
  background-color:#f8f9f8;
  /* background-color:rgba(61, 126, 143, 0.1); */
  color:#536353;
  border-radius: 4px;
  margin:0 3rem;
}
.coming-soon p {
  padding-top:0.5rem;
  padding-bottom: 0.5rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
}


/* Current Work Styles */

.currentWorkBox {
  height:auto;
  width:100%;
  border-radius:6px;
  -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.1);
  transition: all .3s ease-in-out;
  background-color: #fff;
  text-align: center;
}


#abbeyfieldworkimg {
  background-image: url(../img/abbeyfield-belfast-ida.jpg);
}
#yonderworkimg {
  background-image: url(../img/thumbnails/yonder.png);
}
#simplypoliticsworkimg {
  background-image: url(../img/thumbnails/yonder.png);
}

/* Contact Form Styles */

#contact-details ul li {
  font-size: 1.5rem;
  padding-bottom:1rem;
}

/* Inline follow Navigation */

.item {
  width: 200px;
  margin: 50px auto;
  max-height: 250px;
  padding: 75px 20px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
.item span {
  display: block;
  font-size: 1rem;
}
.item--primary {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
  background: green;
  z-index: 99999;
}
.item--secondary {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 20px;
  background: red;
}

/* Parallax Styles */

#bg-image-container1 {

  min-height: 400px;
}

.backgroundDark {
  background-color:#3D7E8F;
}
.backgroundDark h2, .backgroundDark h3, .backgroundDark p {
  color:#fff;
}
.backgroundDark hr.ruler-blue {
  border-top: 2px solid #fff !important;
}


/* Colour Animation Styles */


/* Underline From Left */

.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #3D7E8F;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}

/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);

  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3D7E8F;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Fade */
.hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #3D7E8F;
  color: white;
}


/* 404 Styles */

.error404 {
text-align: center;
}
#error404 {
height:100vh;

}
.errorLarge {
  font-size: 6rem;
  color:#3D7E8F;
  border-bottom: 2px solid #3D7E8F;
}

/* Number Counter Styles */


.counter {
  /*  background-color:#f5f5f5; */
    padding: 20px 0;
    border-radius: 5px;
    margin-bottom: 2rem;
}
.count-timer {
margin-top:-0.5rem;
color:#3D7E8F;
}

.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
    color:#3D7E8F;
}

.count-text {
    font-size: 1rem;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
}
.count-number:after {
   content: "+";
   font-size: 1.25rem;
}

/* Masthead Styles */

#masthead-wty {
  background-image: url('../img/work-one.png');
}

span.bg-text {
  background-color:;
  padding:;
}

/* Work Images */

.work-img {
  padding-top: 2rem;
  padding-bottom:2rem;
}

/* Preloader Styles */

.o-page-loader {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity .5s;
    background: #3D7E8F;
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.o-page-loader--content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

svg path.o-page-loader--spinner {
   fill: blue!important;
}

.o-page-loader--message {

}

/* --------------------------------------------------------------------------- */
/* Animation - Loading Spinner
/* --------------------------------------------------------------------------- */

@-webkit-keyframes rotate-plane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes rotate-plane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}


/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 540px) {
  .image-container {
    text-align: center;
  }
  .logoContainer {
    padding-bottom:1rem;
    max-width: 50%;
    margin-right:0rem;
  }
  .logohover {
    padding-bottom:1rem;
    max-width: 40%;
  }
  .navbar {
    padding-left:1rem!important;
  }
  .navbar-brand {
    padding-right:0!important;
  }
  .workImgContainer {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
  }
}

@media screen and (max-width: 768px) {
  .logohover {
    padding-bottom:2rem;
  }
  .logoContainer {
      padding-bottom:1rem;
      max-width: 50%;
      margin-right:0rem
  }
  .workImgContainer {
    border-left-radius: 4px;
    border-bottom-left-radius: 0px;
    border-right-radius: 4px;
    border-bottom-right-radius: 0px;
  }

}