/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2018-02-12, 15:39:41
    Author     : marcin
*/

@media (min-width:900px){
.navbar-header{
      margin-top: -35px;
}
}

/* nav logo */ 
header svg{
    width: 350px;
}
#background, #K, #V, #P, #KVP, #KVP-Large {
  opacity:0;
}

#background{
     animation-name: fadeUp;
    animation-duration: 1s;
  animation-delay:.25s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-20px, 0px);
}
#K{
     animation-name: fadeUp;
    animation-duration: 1s;
  animation-delay:.55s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-20px, 0px);
}
#V{
     animation-name: fadeUp;
    animation-duration: 1s;
  animation-delay:.75s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-20px, 0px);
}
#P{
     animation-name: fadeUp;
    animation-duration: 1s;
  animation-delay:.95s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-20px, 0px);
}
#KVP{
     animation-name: fadeUp;
    animation-duration: 1s;
  animation-delay:1s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-20px, 0px);
}
#KVP-Large {
       animation-name: fadeUp;
    animation-duration: 1.25s;
  animation-delay:1s;
    z-index: 1;
      animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-45px, 0px);
}

@keyframes opacity {
    0%{
      opacity:0;
    }
    100%{
       opacity:1;
       transform: rotate(0deg);
    }
}
@keyframes fadeUp {
    0%{
      opacity:0;
    }
    100%{
       opacity:1;
  transform: translate(0, 0px);
    }
}
@keyframes fadeRight {
    0%{
      opacity:0;
    }
    100%{
       opacity:1;
  transform: translate(0, 0px);
    }
}

@media (min-width: 1200px){
.banner .caption .text, .slider .caption .text {
    max-width: unset;
}}


@media (max-width:768px){
  .callback-form label p {
    margin-top: 4px!important;
}
}

.callback-form label {
    display: flex;
}
.callback-form label p{
  margin-top: 12px;
}

/* footer */
@media (max-width:768px){
.footer-top .col-sm-7, .footer-top .col-sm-4{
  width:100%;
}
.footer-top .col-sm-4{
  margin-left:0px;
}
.bg-left-content{
  text-align: center;
}
}

#map{
  display:none;
}

.slider .item:after {
content: "";
    height: 100vh!important;
    background: #9ca4a7;
    z-index: 0;
    left: 0;
    top: 0;
    opacity: 1;
    width: 4vw;
    height: inherit;
    position: absolute;
    filter: blur(55px);
}
.slider .item:after {
animation-name: fadeInRight;
    animation-duration: 1s;
    animation-delay: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translate(-55px, 0px) rotate(-45deg);
}
@keyframes fadeInRight {
    0%{
      opacity:0;
    }
    100%{
     opacity:0.5;
  transform: translate(0, 0px);  
    }
}

/*Colors
Blue #4472c4
*/

.breadcrumb{
  display:none;
}

/* metal buttons */
.custom3,.custom2,.custom1{
  position:relative;
  overflow:hidden;
}
.btn, .btn.custom3, .btn.custom3:hover {
  background-image: -webkit-repeating-linear-gradient(top, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(top, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(top, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%)!important;;
  
  border:none!important;
}

.btn:hover{
     transition: ease .4s;
    transform: scale(1.1);
    box-shadow: 0px 2rem 0.5rem -32px rgba(10,10,10,.1);
  }

.custom3:after, .custom1:after ,.custom2:after{
 animation: shine 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: -110%;
  left: -410%;
  width: 350%;
  height: 200%;
  opacity: 0;
    transform: rotate(117deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
@keyframes shine{
  50% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}


/* CTA Banner */
.row-centre {
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-image-gradient {
  background-color: rgb(68 114 196 / 80%);
}
.banner {
  height: initial;
  transition: box-shadow 0.2s ease-in-out;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  background-image: url(https://www.kvpltd.co.uk/webroot/files/ckeditor/General/CTA.jpg?time=1598517777417); /*Change background image */
  background-size: cover;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 2em;
}
.banner .content {
  text-align: left;
  padding: 3em 3em 3em 0;
}
.content-text .banner .row {
  margin-bottom: 0px !important;
}

.project-name img {
    max-width: 80%!important; /* Set if the logo is large*/
}
.project-image-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
}
.project-name {
  font-weight: 200;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 0 10px;
}
.project-name strong,
.project-name h4,
.project-name a {
  color: #ecf3f7;
  font-weight: 800;
}
.banner a:not(.btn) {
  background-color: unset !important;
  margin: 0px !important;
}
.project-name strong {
  font-size: 2em;
}
.project-name a {
  width: auto;
}
.project-name .row {
  display: flex;
}
.project-name p {
  margin-bottom: 0px;
  color: #fff;
  margin-bottom: 5px;
}
.project-name .banner-logo {
  margin: 20px 0;
}
.content-text .row {
  margin-bottom: 30px !important;
}

@media (max-width: 425px) {
  .project-name p:last-child {
    margin-bottom: 25px;
  }
  .project-name .row {
    display: block;
  }
  .banner .content {
    text-align: center;
    padding: 0em 2em;
  }
  .banner .col-md-3 {
    padding: 2em 0em 0em;
  }
}

/*Subpage Fonts*/
.heading, h1, h2, h3, h4, h5, h6 {
    color: #4472c4;
      font-weight: 500;
}
.content-text h1 {
    position: relative;
    padding-bottom: 23px;
}
.content-text h1:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 85px;
    height: 3px;
    background-color: #4472c4;
}
.content-text ul li:before {
    font: normal normal normal 9px/1 FontAwesome;
      margin-right: 17px;
}