.intro-text {

    text-align: left;
}

.hero-img {
    padding-top: 50px
}

@media (min-width: 768px) {
    .hero-img {
        padding-top: 75px
    }

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

    
}

/* ------------------ font difference main page start ------------------ */
 .elev {
    font-family: 'GT-Walsheim-Pro-Light', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.05em;
}
/* font difference main page end */

/* ------------------ crosshairs around col- ------------------ */
.crosshairs {
    padding: 50px;
    margin-bottom: 50px;
}

 .crosshairs p:nth-child(-n+4):before, .crosshairs p:nth-child(-n+4):after {
  position: absolute;
  content: ' ';
  left:12px;
  height: 28px;
  width: 5px;
  background-color: #333;
}
.crosshairs p:before {

}
.crosshairs p:nth-child(-n+4):after {
  transform: rotate(-90deg);
}

.crosshairs p:nth-child(-n+4) {
    position:absolute;
    width:30px;
    height: 30px;

}
.crosshairs p:nth-child(1){
    top:0;
    left: 30px;

}
.crosshairs p:nth-child(2){
    top:0;
    right: 30px;

}
.crosshairs p:nth-child(3){
    bottom:0;
    left: 30px;

}
.crosshairs p:nth-child(4){
    bottom:0;
    right: 30px;

}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}


.pull-right {
  float: right !important;
}


.underline {
    border-top: solid 3px #000; 
    margin: 35px 0 45px 0;
}

/*.intro-parra {
   margin-top: 1.15384616em;
  margin-bottom: 0.38461539em;
}

@media (min-width: 768px) {
  .intro-parra {
    margin-top: 1.03125em;
    margin-bottom: 0.34375em;

  }
}

@media (min-width: 992px) {
  .intro-parra {
    margin-top: 1.03125em;
    margin-bottom: 0.34375em;
  }
}
*/

/* need to sort the padding out and margins when goes down to mobile

also there is a breakpoint issue

*/

.intros {
    padding:0;
    margin:0;
}

/* **************************** Special Styles for the contact page as differnt colour **************************** */

.contact-back {
    background: #330047;
}

.contact-back h1, .contact-back h2, .contact-back p, .contact-back a {
    color: #fff;
}

/* Pull quote reuses the case-study .cs-quote pattern; lift the cite off the
   default dark ink so it stays legible on the purple contact-back ground. */
.contact-back .cs-quote cite {
    color: rgba(255, 255, 255, 0.72);
}

/* About page portrait — circular crop with space before the contact details.
   Full width on mobile, 70% from tablet up. Scoped under .contact-back to
   outrank Modernizr's .svg img { width:100% }. */
.contact-back .about-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 24px;
}
@media (min-width: 768px) {
    .contact-back .about-photo {
        width: 70%;
    }
}

a:hover {
    color: red;
    cursor: pointer;
}


.fadez {
    -webkit-animation: fade-in 2s ease forwards;
    animation: fade-in 2s ease forwards;
    
}

video {
    width: 100%;
}




.footer {
    padding:20px;
    background-color: #330047;
    color:#ffffff;
    border-top: solid 2px #fff;
    display: block;
    overflow: auto;
}

@media (min-width: 768px) {
    .footer {
    padding: 30px;
    }

}

.company-info {
    padding-top:10px;
}
.footer-address-detail {
    margin-top:0;
}

.footer p, .footer a{
    font-size: 1em;

}

img.block-logo {
    width:75px;
}

.footer-logo {
    float: left;
    
}

.footer-address {
    float:left;
    text-align: left;
}

@media (min-width: 768px) {
    .footer-address {
        float:right;
        text-align: right;
    }
}

/*Helpers*/
.pad-0 {
    padding-top: 0!important;
    padding-bottom: 0!important;
}