p {
    font-family:'Open Sans', serif;
}

h4 {
   font-family: 'Alegreya SC', serif;
}

h2 {
    font-size: 42px;
    font-weight: 800;
    font-family:'Open Sans', serif;
}

.kond {
    color:orangered;
}

.vent {
    color:#1E69B8;
}

.montag {
    color:limegreen;
}

.navbar-collapse li {
    margin-right:25px;
}

.top-menu {
    background-color:#f5f5f5;
    width:100%;
    border-top:1px #E2E6E7 solid;
    border-bottom:1px #E2E6E7 solid;
    font-size: 0.85em;
    line-height:2.5em;
}

.top-menu .left-side li a {
    color: #999;
    padding-right:15px;
    border-right: 1px #E2E6E7 solid;
}

.top-menu .right-side li a {
    color: #999;
    padding-left:15px;
    border-left: 1px #E2E6E7 solid;
}

.top-menu .toggle-contact li a {
    color:black;
}

.top-menu li a:hover {
    text-decoration:underline;
}



.carousel-caption h3 {
    font-weight:900;
    font-size:3.2rem;
    -webkit-text-stroke: 0.5px dimgrey;
    text-shadow:4px 4px 6px black, 0 0 2em white;
}

.carousel-caption p {
    font-size:2.2rem;
    -webkit-text-stroke: 0.1px white;
    text-shadow:4px 4px 6px black, 0 0 2em white;
    font-weight: bolder;
}

.carousel-caption .btn.up-to-992 {
    border:3px white solid;
    color:white;
    padding:1rem 3rem 1rem 3rem;
    font-size:1.5rem;
    margin-top: 4rem;
    text-shadow:4px 4px 6px black, 0 0 2em white;
}

@media (max-width: 768px) {
.carousel-caption h3 {
    font-weight:900;
    font-size:1.7rem;
    text-shadow:2px 2px 3px black;
}
}

.caption-mobile {
    background-color:#f5f5f5;
    text-align:center;
    padding:3rem 1rem 3rem 1rem;
    letter-spacing:0.1rem;
}

.caption-mobile .far, .carousel-caption .btn .far {
    margin-right:1rem;    
}




.top-menu .fas {
    margin-right:15px;
}

.fab:hover, .cart-shop .fas:hover {
    color:dimgrey;
}

.carousel-caption .fas {
    margin-bottom:2rem;
    -webkit-text-stroke: 0.5px dimgrey;
    text-shadow:4px 4px 6px black, 0 0 2em white;
}


.why-we h3, .recommend h3, .our-services h3 {
    margin-top:2rem;
    margin-bottom:2rem;
}

.why-we h3::after, .recommend h3::after, .our-services h3::after, .full-cycle h3::after {
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: block;
    content: "";
    background: #1E69B8;
    height: 2px;
}

.we-work-with p, .full-cycle p, .p-first {
    color:#777;
    font-size: 1.2rem;
    line-height:1.8rem;
    margin-top: 2.1rem;
}

.why-we .fas {
    color:#1E69B8
}

.we-work-with li {
    list-style-type:none;
    color:#777;
    line-height: 1.5rem;
    font-size:0.8rem;
}

.icon-brand li::before {
    font-family:FontAwesome;
    content: "\f00c";
    margin-right:10px;
    color:#1E69B8;
}

.full-cycle li {
    position: relative;
    float: left;
    width: 390px;
    background: #FFF;
    padding-bottom: 30px;
    overflow: hidden;
}

.full-cycle h5::before {
    float:right;
    font-family:FontAwesome;
    content: "\f105";
    color:#1E69B8;
}

.full-cycle h5 {
    background-color: #f5f5f5;
    color: #333;
    font-weight: bold;
    font-family: 'Open Sans';
    padding: 0.9rem 0rem 0.9rem 2rem;
    text-transform: uppercase;
    transition: color 0.5s;
}

.full-cycle h5:hover {
    color:#777;
}

.full-cycle a:hover {
    text-decoration:none;
}

.full-cycle img {
    filter: brightness(100%);
    transition: filter 0.5s;
}

.full-cycle img:hover {
    filter: brightness(110%);
}

.recommend {
    background-image:url("../img/background-vidguk2.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center 0;
    color:white;
    min-height:375px;
}

.recommend-768 {
    background-image:url("../img/background-vidguk-768.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center 0;
    color:white;
    min-height:375px;
}

.recommend p {
    margin-top:1.5rem;
    margin-bottom:1.5rem;
    font-style: italic;
    line-height: 2.1rem;
    font-size: 1.4rem;
}

.recommend p::after {
    display: block;
    content: "";
    background: #E2E6E7;
    width: 40px;
    height: 1px;
    margin:45px auto 11px auto;
}

.our-services h5 {
    text-transform: uppercase;
    color:#333;
    font-weight: 600;
    font-size: 1.1rem;
}

.awesome-icon {
    float: left;
    clear: both;
    margin-top: 23px;
    color:#1E69B8;
    font-size:3rem;
}


.p-card {
    font-family: 'Open Sans';
    font-size: 14px;
    line-height: 24px;
    padding: 0;
    margin-top: 16px;
    margin-left: 78px;
}

.portfolio img {
    filter: brightness(60%);
    transition: filter 1.5s;
}

.portfolio img:hover {
    filter: brightness(110%);
}

.portfolio .img-1 {
    animation-name: carousel-1;
    animation-duration: 5s;
    animation-delay: 30s;
}
@keyframes carousel-1 {
  0% {filter: brightness(60%);}
  50% {filter: brightness(110%);}
  100% {filter: brightness(60%);}
}


.portfolio .img-2 {
    animation-name: carousel-2;
    animation-duration: 5s;
    animation-delay: 36s;
}
@keyframes carousel-2 {
  0% {filter: brightness(60%);}
  50% {filter: brightness(110%);}
  100% {filter: brightness(60%);}
}


.portfolio .img-3 {
    animation-name: carousel-3;
    animation-duration: 5s;
       animation-delay: 42s;
}
@keyframes carousel-3 {
  0% {filter: brightness(60%);}
  50% {filter: brightness(110%);}
  100% {filter: brightness(60%);}
}


.portfolio .img-4 {
    animation-name: carousel-4;
    animation-duration: 5s;
    animation-delay: 48s;
}
@keyframes carousel-4 {
  0% {filter: brightness(60%);}
  50% {filter: brightness(110%);}
  100% {filter: brightness(60%);}
}



.mission h3 {
    font-weight:300;
    font-size: 2.4rem;
}

.mission h3:after {
    display: block;
    content: "";
    background: #1E69B8;
    width: 40px;
    height: 2px;
    margin-top: 13px;
}

.mission p {
    line-height: 2.5rem;
    font-size: 1.2rem;
    margin-bottom: 3rem;
}

.mission .card-body {
    font-size:1.2rem;
}

.brands .up-to-768 img {
    margin: 0rem 2rem 0rem 2rem;
}

.brands .till-to-768 img {
    margin: 0rem 1rem 0rem 1rem;
}

.brands .up-to-768 .carousel-control-next, .brands .up-to-768 .carousel-control-prev {
    background: #444;
    padding: 6px;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    top: 50px;
}

.footer {
    background:#73767A;
}

.footer p {
    padding: 0;
    margin-top: 16px;
    margin-left: 78px;
    color:#fff;
    font-size:1.2rem;
    font-family:'Open Sans'
}

.footer .fas {
    color:#AEAFB0;
}

.footer a {
    color:#fff;
}

.footer a:hover {
    text-decoration:none;
}


@media (max-width: 768px) {
.up-to-768 {
  display: none;
}
}

@media (max-width: 992px) {
.up-to-992{
  display: none;
}
}

@media (min-width: 768.01px) {
.till-to-768 {
     display: none; 
}
}