/********************************************/
/****** Temporary Development Settings ******/
/********************************************/
body{
    /*background-color: #93939366;*/
    background-color: #fff;
      overflow-x: hidden;
}

/********************************************/
/************** Home Section ****************/
/********************************************/

header {
    /* height: 100vh;
    overflow: hidden; */
}
a{
    cursor: pointer;
}
.nav-pills .nav-link{
    color: #fff !important;
}

h2{
    font-weight: 400;
}

.home-para-1 {
    /*background-image: url(https://pro1electric.com/wp-content/uploads/2017/01/50577541_l-1.jpg);*/
    background-image: url(../../resources/images/pat-testing_new.jpg);
    height: 58vh !important;
}

.home-para-2 {
    /*background-image: url(https://assets.yellow.co.nz/file/v1-qyI5o8NE6gp6l0lH5pQJVw-XmEnl6nC8RgbeqngK2ltMH_Q4qR8T2drznbuREl8q5RfkwIX1gJsmdnATKaSocGe5a0PoO15aEZzs5GyA4_eha3l5G1l5F2PkUURQihAdqODowoKIpfulSzHAlXeY4w/2.jpg);*/
    background-image: url(../../resources/images/zoom_slide1.jpg);
    height: 65vh !important;
}

.home-para-3 {
    /*background-image: url(../../resources/images/electrician_shutterstock_260161955_electrician_electric_electricity_hardware_wire_maintenance_cutter_electronic_stripper_tech.jpg);*/

}

.home-para-4 {
    background: url(../../resources/images/hanging-lightbulbs-one-lit-shutterstock_258097682.jpg);
}

.bloque.texto {
    padding: 4em 0;
    padding: 2em;
    text-align: left;
    color: #111;
}

.bloque {
    background-color: #f2f2f2;
}

.bloque.home-para{
    background-color: #e5e0cd;
    background-repeat: no-repeat;
    position: relative;
    height: 500px;
}

@keyframes animLight {
    0%   {filter: grayscale(0)}
    100% {filter: grayscale(1)}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animLight {
    0%   {filter: grayscale(0)}
    100% {filter: grayscale(1)}
}
.flash-light{
    animation: animLight 0.9s infinite;
}

.content-bg{
/*    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://irp-cdn.multiscreensite.com/eb491d6e/dms3rep/multi/desktop/iStock-483076419-4288x2848.jpg);*/
}

.logo {
    background-size: 70% !important;
    min-height: 2rem;
    min-width: 10rem;
    background: url(../../resources/images/jmclogo.png) no-repeat center center;
}
/********************************************/
/*************** navigation *****************/
/********************************************/
.bg-light{
    background-color: transparent !important;
}
.nav-section{
    position: fixed;
    top: 0;
    background-color: #007bff66;
}


#page {
    width: 100%;
    /*height: 100%;*/
    top: 0%;
    /*margin-top: 1.5%;*/
    position: absolute;
    /*visibility: hidden;*/
    /*    -webkit-transition: 1.5s all ease-in-out;
        -moz-transition: 1.5s all ease-in-out;
        -ms-transition: 1.5s all ease-in-out;
        -o-transition: 1.5s all ease-in-out;
        transition: 1.5s all ease-in-out;*/
    /*right: 100%;*/
    z-index: 0;
    /*overflow: hidden;*/
    display: none;
}

.services .container-fluid{
    margin-top: 3.5%;
}

.menuActive {
    color: #37f608 !important;
}

.inactive {
    visibility: hidden;
}

.activePage {
    /*visibility: visible !important;*/
    /*color: #37f608 !important;*/
/*    left: 0 !important;
    position: absolute !important;
    z-index: 1;
    -webkit-transition: 1.5s all ease-in-out;
    -moz-transition: 1.5s all ease-in-out;
    -ms-transition: 1.5s all ease-in-out;
    -o-transition: 1.5s all ease-in-out;
    transition: 1.5s all ease-in-out;*/
    webkit-animation: activeAnim 1.5s 1; /* Safari 4.0 - 8.0 */
    animation: activeAnim 1.5s 1;
}

.inactivePage {
/*    left: -100% !important;
    -webkit-transition: 1.4s all ease-in-out;
    -moz-transition: 1.4s all ease-in-out;
    -ms-transition: 1.4s all ease-in-out;
    -o-transition: 1.4s all ease-in-out;
    transition: 1.4s all ease-in-out;
    z-index: 0;*/
    webkit-animation: inactiveAnim 1.4s 1; /* Safari 4.0 - 8.0 */
    animation: inactiveAnim 1.4s 1;
}

@keyframes activeAnim {
    0%   {right: -100%}
/*    20% {transform: scale(0)}
    65% {transform: scale(0.8)}*/
    100% {right: 0}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes activeAnim {
    0%   {right: -100%}
/*    20% {transform: scale(0)}
    65% {transform: scale(0.8)}*/
    100% {right: 0}
}

@keyframes inactiveAnim {
    0%   {right: 0%}
    100% {right: 100%}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes inactiveAnim {
    0%   {right: 0%}
    100% {right: 100%}
}

 .home {
    /*background-color: #fffff;*/
}

.home .container-fluid .row{
    /*color: rgba(206, 232, 255, 0.78) !important;*/
}

.home .quoteBtn{
    font-size: 2em;
}

/********************************************/
/************** About Section *************/
/********************************************/
.text-center {
    text-align: center !important;
}
.about-row-2{
    margin-top: 8%;
    margin-bottom: 8%;
}
section h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
  }

  section h3.section-subheading {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 75px;
    text-transform: none;
    
  }

.timeline {
    position: relative;
    padding: 0;
    list-style: none;
  }
  
  .timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 2px;
    margin-left: -1.5px;
    content: '';
    background-color: #e9ecef;
  }
  
  .timeline > li {
    position: relative;
    min-height: 50px;
    margin-bottom: 50px;
  }
  
  .timeline > li:after, .timeline > li:before {
    display: table;
    content: ' ';
  }
  
  .timeline > li:after {
    clear: both;
  }
  
  .timeline > li .timeline-panel {
    position: relative;
    float: right;
    width: 100%;
    padding: 0 20px 0 100px;
    text-align: left;
  }
  
  .timeline > li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
  }
  
  .timeline > li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
  }
  
  .timeline > li .timeline-image {
    position: absolute;
    z-index: 100;
    left: 0;
    width: 80px;
    height: 80px;
    margin-left: 0;
    text-align: center;
    color: white;
    border: 7px solid #e9ecef;
    border-radius: 100%;
    background-color: #fed136;
  }
  
  .timeline > li .timeline-image h4 {
    font-size: 10px;
    line-height: 14px;
    margin-top: 12px;
  }
  
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 20px 0 100px;
    text-align: left;
  }
  
  .timeline > li.timeline-inverted > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
  }
  
  .timeline > li.timeline-inverted > .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
  }
  
  .timeline > li:last-child {
    margin-bottom: 0;
  }
  
  .timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit;
  }
  
  .timeline .timeline-heading h4.subheading {
    text-transform: none;
  }
  
  .timeline .timeline-body > ul,
  .timeline .timeline-body > p {
    margin-bottom: 0;
  }
  
  .timeline > li .navy-colour{
      background-color: #246085;
      color: #e5e0cd;
  }

  .timeline > li .navy-colour > h4{
      /* margin-top: 45%; */
    color: #e5e0cd;
}

  /* media queries */
  @media (min-width: 768px) {

    .timeline:before {
      left: 50%;
    }
    .timeline > li {
      min-height: 100px;
      margin-bottom: 100px;
    }
    .timeline > li .timeline-panel {
      float: left;
      width: 41%;
      padding: 0 20px 20px 30px;
      text-align: right;
    }
    .timeline > li .timeline-image {
      left: 50%;
      width: 100px;
      height: 100px;
      margin-left: -50px;
    }
    .timeline > li .timeline-image h4 {
      font-size: 13px;
      line-height: 18px;
      margin-top: 16px;
    }
    .timeline > li.timeline-inverted > .timeline-panel {
      float: right;
      padding: 0 30px 20px 20px;
      text-align: left;
    }
  }
  
  @media (min-width: 992px) {

    .timeline > li {
      min-height: 150px;
    }
    .timeline > li .timeline-panel {
      padding: 0 20px 20px;
    }
    .timeline > li .timeline-image {
      width: 150px;
      height: 150px;
      margin-left: -75px;
    }
    .timeline > li .timeline-image h4 {
      font-size: 18px;
      line-height: 26px;
      margin-top: 30px;
    }
    .timeline > li.timeline-inverted > .timeline-panel {
      padding: 0 20px 20px;
    }
  }
  
  @media (min-width: 1200px) {

    .timeline > li {
      min-height: 170px;
    }
    .timeline > li .timeline-panel {
      padding: 0 20px 20px 100px;
    }
    .timeline > li .timeline-image {
      width: 170px;
      height: 170px;
      margin-left: -85px;
    }
    .timeline > li .timeline-image h4 {
      margin-top: 40px;
    }
    .timeline > li.timeline-inverted > .timeline-panel {
      padding: 0 100px 20px 20px;
    }
  }

/* .about {
    background-color: #ffffff !important;
} */
/* .about .container-fluid .row{
    color: rgba(206, 232, 255, 0.78) !important;
} */

/* .about-row {
    margin-top: 8%;
    border-left: 0.5px solid #ced4da;
    border-top: 0.5px solid #ced4da;
    border-right: 0.5px solid #ced4da;
} */

/* .left-about-background,
.right-about-background{
    background-color: #ffffff;
    
   
} */
/* .left-about-background > img{
   max-height: 100%;
   max-width: 100%;
} */

/* .right-about-background > p{
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 10%;
    color: #6c757d;
} */
/* .image-left{
    float: left;
} */

/* row2 */

/* .about-row-2{
    margin-top: 12.5%;
    border-left: 0.5px solid #ced4da;
    border-bottom: 0.5px solid #ced4da;
    border-right: 0.5px solid #ced4da;
} */

/* .right-about-background-2 > img{
    max-width: 100%;
    max-height: 100%;
} */

/* .left-about-background-2 > p{
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 10%;
    color: #6c757d;
} */
/* .image-right-2{
    float: right;
} */


/*********** Quotes ***************/
blockquote{
    border-left:none
}

.quote-badge{
    background-color: rgba(0, 0, 0, 0.2);   
}

.quote-box{
    
    overflow: hidden;
    margin-top: -50px;
    padding-top: -100px;
    border-radius: 0px;
    background-color: rgba(74, 223, 203, 0.452);
    color:white;
    width: 325px;
    box-shadow: 2px 2px 2px 2px #E0E0E0;
    margin: 0 auto;
    margin-top: 25px;
    
}

.quotation-mark{
    
    margin-top: -10px;
    font-weight: bold;
    font-size:100px;
    color:white;
    font-family: "Times New Roman", Georgia, Serif;
    
}

.quote-text{
    
    font-size: 19px;
    margin-top: -65px;
}


/***************************************************/
/****************** Contact Section ****************/
/***************************************************/
.contact {
    overflow: hidden;
    background-color: #ffffff;
}
/* .contact .container-fluid .row{
    color: rgba(206, 232, 255, 0.78) !important;
} */

/**************** Contact Form Layout ***************/

.contact-row{
    margin-top: 12.5%;
}

.center-contact-info{
    width: 50%;
    margin: 0 auto;
    margin-top: 5%;
}

#page .container-fluid .row .img-fluid{
    width: 100%
}

.center-contact-info > h3{
    font-weight: 400;
    color: #ced4da;
}
.center-contact-info > h2{
    font-weight: 300;
    color: #ced4da;
}


.center-contact-info > p, h4{
    font-weight: 400;
    color: #6c757d;;
}

/************* Contact Form Border **************/

.form-control{
    border-radius: 0;
}


.message-form-spacing{
    margin-bottom: 2rem !important;
}

/********************************************/
/*************** Services Section****************/
/********************************************/

.services {
    background-color: #fff;
}
.services .container-fluid .row{
    color: rgb(78, 78, 78);
}

.services .container{
    /*    width: 70%;
        margin: 0.5% auto 0;*/
    margin-top: 2%;
}

.services-thumbnails img{
    /*width: 100% !important;*/
}

.services .images-row{
    margin-top: 5%;
}

.group-images-service:hover p{
    bottom: 1%;
    margin-bottom: 0;
    -webkit-transition: 0.6s all ease-in;
    -moz-transition: 0.6s all ease-in ;
    -ms-transition: 0.6s all ease-in;
    -o-transition: 0.6s all ease-in;
    transition: 0.6s all ease-in;
    opacity: 1;
    z-index: 2;
}
.group-images-service img:hover{
    z-index: 1;
    border: solid 5px #f0f0f0;
    filter: grayscale(0.7);
    position: absolute;
    top: -13%;
    transition-property: filter;
    transition-duration: 1s;

    -webkit-transition: 0.6s all ease-in;
    -moz-transition: 0.6s all ease-in ;
    -ms-transition: 0.6s all ease-in;
    -o-transition: 0.6s all ease-in;
    transition: 0.6s all ease-in;
}
.group-images-service img{
    top: 0;
    -webkit-transition: 0.6s all ease-out;
    -moz-transition: 0.6s all ease-out ;
    -ms-transition: 0.6s all ease-out;
    -o-transition: 0.6s all ease-out;
    transition: 0.6s all ease-out;
}

.group-images-service{
    width: 25%;
    position: relative;
    cursor: pointer;
}
.group-images-service p{
    position: absolute;
    bottom: 120%;
    padding: 2%;
    opacity: 0;
    background-color: #1b1b1b;
    width: 96%;
    left: 2%;
    -webkit-transition: 0.6s all ease-out;
    -moz-transition: 0.6s all ease-out ;
    -ms-transition: 0.6s all ease-out;
    -o-transition: 0.6s all ease-out;
    transition: 0.6s all ease-out;
}

.images-service:hover{
    z-index: 1;
    filter: grayscale(0.7);
    transition-property: filter;
    transition-duration: 1s;
    cursor: pointer;
    -webkit-transition: 0.6s all ease-in;
    -moz-transition: 0.6s all ease-in ;
    -ms-transition: 0.6s all ease-in;
    -o-transition: 0.6s all ease-in;
    transition: 0.6s all ease-in;
}

.list-group-item{
    border: none;
}

.list-group-item{
    background-color: #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.services-banner {
    background: url(http://www.kyjosteel.com/uploads/20171009134049header-background.jpg) no-repeat center 15% #000000;
    width: 100%;
    height: 100%;
    padding: 3.5% 0;
    background-size: cover;
}

.services-banner div {
    width: 0%;
    margin: auto 0;
    margin-left: 47%;
}


/****************************************************/
/*************** Contact Form Button ****************/
/****************************************************/

.application_button{
    text-align: center;
}

.application_submit{
    width: 100%;
}
.btn-default {
    color: #ffffff;
    background-color: #246085;
    padding: 10px 30px;
    /* font-family: 'Raleway', sans-serif; */
    font-weight: 400;
    display: inline-block;
    -webkit-transition: background-color 0.8s, border 0.8s, color 0.2s;
    -o-transition: background-color 0.8s, border 0.8s, color 0.2s;
    transition: background-color 0.8s, border 0.8s, color 0.2s;
}

.btn{
    border-radius: 0 !important;
}
 .btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0 !important;
}

/********************************************/
/*************** Quote Popup ****************/
/********************************************/

.quote_Form .form-group{
    margin-bottom: -2.5%;
}

.quote_Form .application_button {

    margin-top: 4%;

}
.quote_Form .form-control {
    padding: 4%;
    height: unset;
}

.quote_Form .optionBtn::after {
    content: "";
    width: 19px;
    height: 54px;
    line-height: 70px;
    position: absolute;
    right: 32px;
    top: 24px;
    font-family: FontAwesome;
    text-align: center;
    font-size: 34px;
    pointer-events: none;
    color: #fff;
    background-image: url(//www.safetytesting.co.uk/wp-content/themes/safetytesting/img/dropdown.png);
    background-position: 50%;
    background-repeat: no-repeat;
}

.modal-dialog .modal-content{
    background-color: #052639;
}
.modal-dialog .modal-content .modal-header{
    border-bottom: none;
}
.modal-dialog .modal-header .close{
    color: #fff;
}
.modal-dialog .modal-header .modal-title{
    color: #fff;
}
.modal-dialog .modal-content .modal-footer{
    border-top: none;
}

.email-us{

}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

/**
Media queries
 */

@media only screen and (max-width: 600px) {
    .home .quoteBtn{
        font-size: 1.2em;
    }

    .home #carouselExampleIndicators .carousel-inner p {
        display: none;
    }

    .home #carouselExampleIndicators .carousel-inner h1 {
        display: none;
    }

    .logo{
        min-height: 2rem;
        min-width: 5rem;
    }

    #page{
        top: 7.5%;
    }
}
.home #carouselExampleIndicators .carousel-inner .carousel-caption  {
    background: #34343478;
}

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

    .home #carouselExampleIndicators .carousel-inner p {
        /*font-size: ;*/
    }

    .home #carouselExampleIndicators .carousel-inner .text-right h1 {
        font-size: 1em;
    }
.services row:first-child{
    font-size: 1.2em;
}

}

@media only screen and (max-width: 988px) {
    .contact .row .center_form{
        margin-bottom: 17%;
    }

    .about .container{
        margin-bottom: 11%;
    }
}