﻿
/* font-family: 'Abel', sans-serif; */
/*@import url('https://fonts.googleapis.com/css?family=Abel');*/
/* font-family: 'Chau Philomene One', sans-serif; font-family: 'Mitr', sans-serif; */
/*@import url('https://fonts.googleapis.com/css?family=Chau+Philomene+One|Mitr');*/
/* font-family: "Lato"; */
@import url('https://fonts.googleapis.com/css?family=Lato');
/* font-family: "Quick"; */
/*@import url('https://fonts.googleapis.com/css?family=Quicksand');*/
/* font-family: 'Open Sans', sans-serif */
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans');*/
/* font-family: 'Oxygen', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Oxygen');

/* font-family: Cairo */
@import url('https://fonts.googleapis.com/css?family=Cairo:400,300,300italic,400italic,700,700italic,900,900italic');

:root {
    --Color-1: #1f628c;
    --Color-2: #033265;
    /* Red */
    --Color-3: #b63d32;
    /* Yellow */
    --Color-4: #f6d330;
    --Color-5: #333d47;
    --Color-6: #14283c;
}

/* Default */
html {
    
    scroll-behavior: smooth;
}

body {
    /*padding-top: 110px;*/
    /*background-image: linear-gradient(lightcoral, salmon);*/
    font-family: Lato;/*Cairo;*/
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .row {
    margin: 0px;
    padding: 0px;
}

a {
    color: var(--Color-5);
    font-size: 16px;
}

    a:hover {
        color: var(--Color-3);
        font-size: 16px;
    }

img {
    max-width: 100%;
    height: auto;
}

textarea {
    resize: none;
}

.PageWrraper {
    background-color: white;
}

.PageFrame {
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.PageHedaer {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.PageContent {
    padding-bottom: 40px;
    margin-bottom: 40px;
}


/*.container-fluid {
}
*/
.container {
    /*padding-left: 10px;
    padding-right: 10px;*/
}

.ExtraModule {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Header */

.navbar {
    z-index: 2;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-colored {
    /*background-image: linear-gradient(var(--Color-6), var(--Color-6));*/
    background-color: var(--Color-4);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.nav-transparent {
    background-color: transparent;
}

.Logo {
    width: auto;
    height: 90px;
}

.navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 600;
    color: red;
}
.navbar-light .navbar-nav .nav-link {
    color: white;
}

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: var(--Color-3);
        border-bottom: 3px solid var(--Color-3);
    }

    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
        color: var(--Color-3);
        border-bottom: 3px solid var(--Color-3);
    }


.dropdown-menu a {
    color: dimgrey;
    font-size: 16px;
}

.dropdown-item {
    text-align: left;
}

    .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: var(--Color-4);
    }

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a {
        color: grey;
        font-size: 16px;
    }

        .dropdown-submenu a::after {
            transform: rotate(-90deg);
            position: absolute;
            right: 6px;
            top: .8em;
        }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }


/*.navbar-collapse {
    background-color: var(--Color-2);
}*/

/* Carousel */

.carousel {
    margin-top: -110px;
    z-index: 1;
    background-color: #f8f3ef;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    position: absolute;
    z-index: 1;
    left: 0;
    right: unset;
    top: 0;
    padding-top: 35%;
    /*padding-bottom: 20px;*/
    padding-left: 10%;
    text-align: left;
    content: '\A';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

    .carousel-caption h1 {
        margin-top: -50px;
        margin-left: 20px;
        margin-right: 20px;
        color: white;
        font-size: 70px;
        font-weight: bold;
        font-family: Oxygen;
    }

    .carousel-caption p {
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        font-weight: bold;
        color: var(--Color-5);
        font-size: 42px;
    }

/* Declare heights because of positioning of img element */
.carousel-item {
    /*height: 32rem;*/
    height: 800px;
}

    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 100%;
        /*--image-filter: grayscale(30%);
        background: rgba(0,0,0,0.3);*/
        /*height: 32rem;*/
    }

/* Home Page */

/* Home Abou Us */

.HomeAboutUsWrraper {
    background-color: #efefef;
    padding-top: 70px;
    padding-bottom: 20px;
}

.HomeAboutUsBlockTitle {
    text-align: center;
    color: var(--Color-3);
    font-weight: 600;
    font-size: 45px;
    margin-bottom: 50px;
}

/*.HomeAboutUsLeft {
    text-align: center;
    padding-bottom: 60px;
}

.HomeAboutUsLeft img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.HomeAboutUsRight {
    padding-left: 40px;
}*/

.HomeAboutUsItemDetails {
    color: black ;
    margin-bottom: 50px;
}

    /*.HomeAboutUsItemDetails a {
        font-size: 16px;
        color: var(--Color-1);
    }

        .HomeAboutUsItemDetails a:hover {
            font-size: 16px;
        }*/


/* Home Why Us */

.HomeWhyUsWrraper {
    padding-top: 50px;
    padding-bottom: 50px;
}

.HomeWhyUsBlockTitle {
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: 45px;
    margin-bottom: 100px;
}

.HomeWhyUsBlock {
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .HomeWhyUsBlock img {
        width: 75px;
        height: auto;
        margin-bottom: 10px;
    }

.HomeWhyUsBlock span {
    color: black;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 40px;
}

.HomeWhyUsBlock p {
    color: gray;
    font-weight: 500;
    font-size: 16px;
}

/* Home Product Categories */

.HomePCWrraper {
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 500px;
}

.HomePCBlock {
    padding-top: 150px;
    padding-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px;
}

.HomePCDesc {
    color: black;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 40px;
}

.HomePCLink {
    background-color: var(--Color-3);
    color: white;
    font-size: 16px;
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

    .HomePCLink:hover {
        font-size: 18px;
        color: white;
    }

/* Our Clients */

.HomeOurClientsWrraper {
    padding-top: 100px;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

.HomeOurClientsTitle {
    text-align: center;
    /*text-transform: uppercase;*/
    color: var(--Color-6);
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 50px;
}

.HomeOurClientImage {
    /*border: 1px solid #e1e1e1;*/
    margin-left: 15px;
    margin-right: 15px;
    padding: 15px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

.HomeOurClientImage:hover {
    -webkit-box-shadow: 0px 3px 10px 0 rgba(50,50,50,.2);
}

.HomeOurClientImage div {
    height: 100px;
}

/* Home Product Extra Categories */

.HomePCEBlock {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}

    .HomePCEBlock img {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }

.HomePCETitle {
    color: black;
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 20px;
}

.HomePCEDesc {
    text-align: left;
    color: gray;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
    height: 200px;
}

/* Home Testimonial Categories */

.HomeTestimonialWrraper {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #f8f3ef;
}

.HomeTestimonialBlockTitle {
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: 45px;
    margin-bottom: 50px;
}

.HomeTestimonialBlock {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
}

.HomeTestimonialDesc {
    padding-right: 10px;
    color: gray;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
}

.HomeTestimonialSeaperator {
    height: 170px;
    padding-top: 70px;
    width: 3px;
    background-color: #f1f1f1;
}

.HomeTestimonialSeaperatorInside {
    background-color: salmon;
    height: 30px;
}

    .HomeTestimonialImage img {
    border-radius: 25px;
    width: 100%;
    height: auto;
    padding-bottom: 10px;
}

.HomeTestimonialName {
    padding-right: 10px;
    padding-left: 10px;
    color: black;
    font-weight: 500;
    font-size: 18px;
}

/* Home Request Quote */

.HomeRequestQuoteWrraper {
    position: relative;
    background-color: #c1d2ea;
}

.HomeRequestQuoteImage {
    background-image: url(HomeRequestQuote.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.HomeRequestQuoteForm {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Home Facts */

.Home-Facts-Wrraper {
    background-color: #444a4d;
    padding-top: 60px;
    padding-bottom: 60px;
    /*margin-bottom: 50px;*/
    /*background-color: rgba(0,0,0,0.08);*/
    /*background-attachment: fixed;*/
    /*border-bottom: 10px solid var(--Color-Color2);*/
}

.Home-Facts-Header-Block {
    background: url(Facts-BG.png) no-repeat;
    height: 300px;
    background-size: contain;
    margin-bottom: 30px;
}

.Home-Facts-Items-Wrraper {
    background: #53595d;
    /*background-size: 50% auto;
    background-position: center;*/
}

.Home-Facts-Block {
    /*text-align: center;*/
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.Home-Facts-Item-Title {
    color: var(--Color-2);
    font-size: 46px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.Home-Facts-Item-Prefix-Desc {
    color: #d5d5d5;
    /*text-align: center;*/
    font-size: 20px;
    font-weight: 600;
    /*margin-bottom: 10px;*/
    height: 30px;
}

.Home-Facts-Item-Value {
    color: white;
    /*text-align: center;*/
    font-size: 60px;
    font-weight: 600;
    font-family: 'Abel', sans-serif;
    /*margin-bottom: 10px;*/
}

.counter-count {
    color: white;
    /*text-align: center;*/
    font-size: 60px;
    font-weight: 600;
    font-family: 'Abel', sans-serif;
    /*margin-bottom: 10px;*/
}

.Home-Facts-Item-Suffix-Desc {
    color: #d5d5d5;
    /*text-align: center;*/
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/*.ftco-animate {
    opacity: 0;
    visibility: hidden;
}*/
/* Inner Page */

/* Solutions */

.Solution-Block {
    /*padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;*/
}

    .Solution-Block:hover {
        /*background-color: #fdfdfd;*/
    }

        .Solution-Block:hover .Solution-Item-Number {
            color: var(--Color-3);
        }

.Solution-Block {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.Solution-Item-Number {
    color: var(--Color-5);
    font-size: 46px;
    font-weight: 600;
    margin-bottom: 10px;
}

.Solution-Item-Name {
padding-top: 20px;
    color: black;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.Solution-Item-Desc {
    color: black;
    font-size: 20px;
    margin-bottom: 20px;
}

.Solution-Item-Image {
    width: 100%;
    height: 300px;
}

.Solution-Item-Rating {
    border-left: solid 3px var(--Color-3);
    padding-left: 5px;
    color: var(--Color-5);
    font-size: 20px;
    margin-bottom: 4px;
}

.Empty-Rating {
    display: inline-block;
    width: 30px;
    height: 10px;
    background-color: #f3f3f3;
    margin-right: 1px;
    /*border: solid 1px #dbd8d8*/
}

.Filled-Rating {
    display: inline-block;
    width: 30px;
    height: 10px;
    background-color: rgb(0, 145, 190);
    margin-right: 1px;
    /*border: solid 1px #dbd8d8*/
}

/* Scoll */

.ScrollBox {
    text-align: center;
    background: url('ScrollBG.jpg') repeat-y center;
}

    .ScrollBox span {
        margin-top: -3px;
        font-size: 40px;
        color: #f2f5f9;
    }

.Solution-Block:hover .ScrollBox {
    background: url('HoverScrollBG.jpg') repeat-y center;
}

    .Solution-Block:hover .ScrollBox span {
        color: var(--Color-3);
    }

/* Industries */


.Industry-Block {
    /*margin: 10px;*/
}

.Industry-Item-More {
    text-align: center;
}

    .Industry-Item-More a {
        font-size: 12px;
        color: var(--Color-Color2);
        background-color: ghostwhite;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        border: none;
        border-radius: 20px;
    }

        .Industry-Item-More a:hover {
            color: ghostwhite;
            background-color: var(--Color-Color4);
            text-decoration: none;
        }

.Industry-Frame-Image {
    /*background: var(--Color-Color4);
    background-size: 100% 100%;
    background-repeat: no-repeat;*/

    /*background-color: white;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 10px;*/
    /*box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);*/
}

.Industry-Image {
    width: 100%;
    height: 300px;
    /*margin-top: 30px;
    margin-bottom: 30px;*/
}

.Industry-Front-Title {
    /*margin-top: -100px;*/
    text-align: center;
}

    .Industry-Front-Title h2 {
        padding: 10px;
        font-size: 22px;
        color: black;
        background-color: lightgray;
        opacity: 0.6;
    }

.Industry-Back-Title {
    padding: 10px;
}

    .Industry-Back-Title h2 {
        font-size: 22px;
        text-align: center;
        color: ghostwhite;
        border-bottom: solid 3px ghostwhite;
        padding-bottom: 10px;
    }

    .Industry-Back-Title p {
        font-size: 16px;
        color: white;
        text-align: center;
    }

.Industry-Block:hover .Industry-Block-Flipper, .Industry-Block.hover .Industry-Block-Flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.Industry-Block-Flipper {
    transition: .6s;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -o-transition: .6s;
    -ms-transition: .6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    position: relative;
}

.Industry-Block-Front, .Industry-Block-Back {
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    position: relative;
    top: 0;
    left: 0;
}

.Industry-Block-Front {
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
}

.Industry-Block-Back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    position: absolute;
    background-color: var(--Color-3);
    height: 100%;
    width: 100%;
    padding: 10px;
    /*border-radius: 10px;*/
    /*box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -o-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    -ms-box-shadow: 0px 0px 10px rgba(0,0,0,0.08);*/
}

/*  Projects */

.Client-Block-Title {
    text-align: center;
    text-transform: uppercase;
    color: var(--Color-3);
    font-weight: 600;
    font-size: 40px;
    margin-bottom: 50px;
}

.Client-Block {
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    border: 3px solid beige;
}

.Client-Image {
    text-align: center;
}

    .Client-Image img {
        width: auto;
        height: 100px;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
        transform: translateX(0px);
    }

        .Client-Image img:hover {
            transform: translateX(10px);
        }

.Client-Name {
    padding-right: 10px;
    padding-left: 10px;
    color: var(--Color-6);
    /*font-weight: 600;*/
    font-size: 14px;
    text-align: center;
    height: 60px;
}

/* Products */

.ProductBlock {
    padding: 20px;
    margin: 10px;
    border: 3px solid beige;
    border-radius: 15px;
}

.ProductImages {
    padding-right: 20px;
}

.ProductImage {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    transform: translateX(0px);
}

    .ProductImage:hover {
        transform: translateX(10px);
    }

.ProductTitle {
    color: black;
    font-weight: 600;
    font-size: 26px;
    height: 60px;
}

.ProductDesc {
    color: var(--Color-1);
    font-size: 22px;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 5px solid var(--Color-3);
}

.ProductSpecSection {
    color: var(--Color-6);
    font-size: 20px;
    margin-bottom: 50px;
    padding-left: 10px;
    border-left: 5px solid var(--Color-3);
}

.ProductSpecTitle {
    color: var(--Color-1);
    font-size: 36px;
    margin-bottom: 20px
}

.ProductSpec {
    color: darkslategray;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 10px;
}

.ProductLink {
    background-color: var(--Color-3);
    color: white;
    font-size: 16px;
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

    .ProductLink:hover {
        font-size: 18px;
        color: white;
    }

.ProductLinkNotAvailable {
    background-color: gray;
    color: white;
    font-size: 16px;
    letter-spacing: normal;
    font-weight: 400;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/*.ProductLink {*/
    /*background: #fd0054;
    background: -moz-linear-gradient(-45deg, #fd0054 0%, #fd6b00 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #fd0054), color-stop(100%, #fd6b00));
    background: -webkit-linear-gradient(-45deg, #fd0054 0%, #fd6b00 100%);
    background: -o-linear-gradient(-45deg, #fd0054 0%, #fd6b00 100%);
    background: -ms-linear-gradient(-45deg, #fd0054 0%, #fd6b00 100%);
    background: -webkit-linear-gradient(315deg, #fd0054 0%, #fd6b00 100%);
    background: -o-linear-gradient(315deg, #fd0054 0%, #fd6b00 100%);
    background: linear-gradient(135deg, #fd0054 0%, #fd6b00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd0054', endColorstr='#fd6b00', GradientType=1 );*/
    /*background-image: linear-gradient(var(--Color-3), var(--Color-4));
    color: white;
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: normal;
    font-weight: 600;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ProductLink:hover {
    font-size: 20px;
    color: white;
}*/

/* Related Items */

.RelatedItemsWrraper {
    border: 3px solid beige;
    margin-top: 90px;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 50px;
}

.RelatedItemsBlockTitle {
    font-size: 25px;
    font-weight: 600;
    color: black;
    margin-bottom: 20px;
}

.RelatedItemLeft {
    text-align: center;
    padding: 5px;
}

    .RelatedItemLeft img {
        width: 100%;
        height: auto;
    }

.RelatedItemRight {
    padding: 5px;
    padding-top: 10px;
}

    .RelatedItemName a {
        font-size: 20px;
        color: steelblue;
        font-weight: 500;
    }

.RelatedItemAvailableSize {
    font-size: 12px;
    color: gray;
    font-weight: 500;
}

.RelatedItemCategoryName a {
    font-size: 14px;
    color: darkslategrey;
    font-weight: 600;
}

/* Related Items Categories */

.RICWrraper {
    border: 3px solid beige;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 50px;
}

.RICBlockTitle {
    font-size: 25px;
    font-weight: 600;
    color: black;
    margin-bottom: 20px;
}

.RICName {
    border-bottom: 1px solid beige;
    padding-top: 10px;
    padding-bottom: 10px;
}

.RICName a {
    font-size: 20px;
    color: darkslategrey;
    font-weight: 600;
}

/* Item */
.ItemTitleWrraper {
    margin-bottom: 50px;
}

.ItemPageTitle {
    font-size: 36px;
    font-weight: 600;
    color: var(--Color-5);
    /*text-transform: uppercase;*/
    text-align: center;
   /* padding-bottom: 5px;*/
    /*border-bottom: 4px solid var(--Color-3);*/
    /*line-height: 2;*/
    /*display: inline;*/
}

.ItemTitle {
    font-size: 14px;
    font-weight: 700;
    color: lightcoral;
    text-transform: uppercase;
}

.Item a {
    font-size: 14px;
    font-weight: 500;
    color: gray;
}

.ItemPostDate {
    font-size: 11px;
    margin-bottom: 30px;
}

.ItemFileDescrption {
    font-size: 14px;
    color: gray;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.ItemDetails {
    /*text-align: justify;*/
    padding-top: 30px;
    font-size: 18px;
}

.ProductImageBox {
    text-align: center;
    margin-bottom: 50px;
}

    .ProductImageBox img {
        width: 100%;
        height: auto;
    }

.Float {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* Map */

.Map-Wrraper {
    /*height: 700px;*/
    /*background: #faf9f9 url(Map.png);
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;*/

    background-color: #faf9f9;
    position: relative;
}

    .Map-Wrraper img {
        
    }
    /*.Map-Wrraper:hover {
        -webkit-animation-name: pulse;
        animation-name: pulse
    }*/
    .Map-Wrraper span {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50px;
        /*top: 50%;
        left: 20%;*/
        background-color: #e73731;
        animation: Highlight 1.5s linear infinite;
        animation-delay: .5s;
        cursor: pointer;
        z-index: 2;
    }

@keyframes Highlight {
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.HideMarker1 {
    display: none;
}

.Marker1:hover + .HideMarker1 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker2 {
    display: none;
}

.Marker2:hover + .HideMarker2 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker3 {
    display: none;
}

.Marker3:hover + .HideMarker3 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker4 {
    display: none;
}

.Marker4:hover + .HideMarker4 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker5 {
    display: none;
}

.Marker5:hover + .HideMarker5 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker6 {
    display: none;
}

.Marker6:hover + .HideMarker6 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker7 {
    display: none;
}

.Marker7:hover + .HideMarker7 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

.HideMarker8 {
    display: none;
}

.Marker8:hover + .HideMarker8 {
    display: block;
    top: 10%;
    left: 10%;
    position: absolute;
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 3px solid lightgray;
}

/* Hover Marker 1 */

/*.Marker1:hover ~ span {
    background-color: transparent;
}*/

.Marker1:hover {
    background-color: transparent;
}

/*    .Marker2:hover ~ span {
        background-color: transparent;
    }*/

.Marker2:hover {
    background-color: transparent;
}

.Marker3:hover {
    background-color: transparent;
}

.Marker4:hover {
    background-color: transparent;
}

.Marker5:hover {
    background-color: transparent;
}

.Marker6:hover {
    background-color: transparent;
}

.Marker7:hover {
    background-color: transparent;
}

.Marker8:hover {
    background-color: transparent;
}


/* Hover Marker 2 */

    /*.Marker2:hover .Marker1 {
        background-color: transparent;
    }

    .Marker2:hover {
        background-color: transparent;
    }

    .Marker2:hover .Marker3 {
        background-color: transparent;
    }

    .Marker2:hover .Marker4 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker5 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker6 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker7 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker8 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker9 {
        background-color: transparent;
    }

    .Marker2:hover ~ .Marker10 {
        background-color: transparent;
    }*/

/* Hover Marker 3 */

    /*.Marker3:hover ~ .Marker1 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker2 {
        background-color: transparent;
    }

    .Marker3:hover {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker4 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker5 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker6 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker7 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker8 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker9 {
        background-color: transparent;
    }

    .Marker3:hover ~ .Marker10 {
        background-color: transparent;
    }*/

/* Hover Marker 4 */

    /*.Marker4:hover ~ .Marker1 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker2 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker3 {
        background-color: transparent;
    }

    .Marker4:hover {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker5 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker6 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker7 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker8 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker9 {
        background-color: transparent;
    }

    .Marker4:hover ~ .Marker10 {
        background-color: transparent;
    }*/


/*.MapWrapper {
    padding-top: 50px;
    padding-bottom: 75px;
}

.MapBlockTitle {
    text-align: center;
    color: black;
    font-weight: 600;
    font-size: 45px;
    margin-bottom: 50px;
}

.MapDetailsTitle {
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 40px;
    color: black;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 20px;
}

.MapDetails {
    padding-left: 40px;
    padding-right: 40px;
    color: gray;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
}*/
/* Footer */
.FooterWrapper {
    margin-top: 30px;
    background-color: var(--Color-4);
    padding-top: 50px;
    padding-bottom: 30px;
}

.Footer {
    /*padding-bottom: 40px;*/
}

.FooterTitle {
    color: ghostwhite;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

    .FooterTitle a {
        color: ghostwhite;
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 10px;
        text-transform: none;
        text-transform: uppercase;
    }

.FooterDetails {
    color: #eaeaea;
    padding-right: 30px;
    font-size: 16px;
    margin-bottom: 20px;
}

    .FooterDetails a {
        color: #eaeaea;
        text-decoration: none;
    }

        .FooterDetails a:hover {
            text-decoration: underline;
        }

.BottomFooterWrapper {
    background-color: #111111;
}

.BottomFooter {
    color: #eaeaea;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    text-align: center;
}

.BottomFooter a {
    color: #eaeaea;
    font-size: 14px;
}

.BottomFooterPoweredBy {
    text-align: right;
}

/* Social Media */

.SocialMediaIcon {
    opacity: 0.7;
    margin: 4px;
    display: inline-block;
}

    .SocialMediaIcon:hover {
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    }

    .SocialMediaIcon span {
        font-size: 40px;
        color: ghostwhite;
    }

/* Navigation */

.NavigationWrapper {
    background-color: whitesmoke ;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.Navigation {
    color: darkslategray;
}

    .Navigation a {
        color: darkslategray;
        font-weight: bold;
        /*text-transform: uppercase;*/
    }

.FormHeader {
    color: var(--Color-3) ;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 40px;
}

.form-control {
    width: 100%;
    font-size: 16px;
    border: 1px solid lightgray ;
    color: gray ;
}

.alert {
    font-size: 18px;
}

.alert-danger {
    background-color: aliceblue ;
}

.RequiredIcon {
    color: red ;
    font-size: 16px;
}

.RequiredField {
    color: red ;
}

.Result {
    color: red ;
    font-size: 18px;
}

.FieldIcon {
    background-color: lightcoral ;
    padding: 4px;
}

    .FieldIcon i {
        color: white ;
        padding: 5px;
    }

/* AutoComplete flyout */

.autocomplete_completionListElement {
    background-color: white ;
    border: solid 1px lightgray ;
    color: gray ;
    cursor: pointer;
    overflow: auto;
    list-style-type: none;
    height: 200px;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    background-color: lightgray ;
    color: black ;
    padding: 5px;
    font-size: 14px;
    margin-left: -30px;
}

/* AutoComplete item */

.autocomplete_listItem {
    background-color: white ;
    color: black ;
    padding: 5px;
    font-size: 14px;
    margin-left: -30px;
}

/* Checkbox */

input[type='checkbox'] {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    cursor: pointer;
}

/* Radio Button List */

input[type='radio'] {
    width: 15px;
    height: 15px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

/* Hidden */
.Hidden {
    display: none;
}

/* Language Area */

.LanguageArea {
}

/* Share Media  */

.ShareMedia {
    width: 100%;
    padding-top: 40px;
}

/* Custom button style */

.Button {
    font-size: 16px;
    color: white;
    background-color: var(--Color-3);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    border: none;
    border-radius: 5px;
    /*border: solid 1px lightcoral;*/
}

    .Button:hover {
        color: white;
        background-color: var(--Color-5);
        /*background-image: linear-gradient(var(--Color-1), var(--Color-2));*/
        text-decoration: none;
        /*background-color: white;*/
    }

.Button2 {
    font-size: 16px;
    color: white;
    background-image: linear-gradient(var(--Color-1), var(--Color-2));
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    border: none;
    border-radius: 3px;
    /*border: solid 1px lightcoral;*/
}

    .Button2:hover {
        color: white;
        background-image: linear-gradient(var(--Color-1), var(--Color-2));
        text-decoration: none;
        /*background-color: white;*/
    }

.Button3 {
    font-size: 16px;
    color: white;
    background-image: linear-gradient(var(--Color-1), var(--Color-2));
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    border: none;
    border-radius: 3px;
    /*border: solid 1px lightcoral;*/
}

    .Button3:hover {
        color: white;
        background-image: linear-gradient(var(--Color-2), var(--Color-1));
        text-decoration: none;
        /*background-color: white;*/
    }

.LinkButton {
    font-size: 16px;
    color: lightcoral ;
    margin-right: 20px;
}

    .LinkButton:hover {
        /*color: lightcoral;
        background-color: white;*/
    }

/* Lines */

.HDottedLine {
    border-top: solid 1px lightgray ;
}

.HSolidLine {
    border-top: solid 1px lightgray ;
}

.HSpaceLine {
    height: 10px;
}

.HSpaceLine2 {
    height: 20px;
}

.HSpaceLine4 {
    height: 40px;
}

.HSeperator {
    margin-top: 5px;
    border-top: solid 1px lightgray ;
    margin-bottom: 5px;
}

/* Quick Search */

.QuickSearchBox {
}

/* Waiting Modal */

.ModalWaiting {
    /*background-color: gray;
    filter: alpha(opacity= 70);
    opacity: 0.7;
    padding-top: 250px;
    position: absolute;
    
    width: 100%;
    height: 100%;
    z-index: auto;
    display: block;*/
    padding-top: 275px;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    z-index: 200;
    text-align: center;
}

/* Transition elsements */

a, div, .btn, .navbar, input, textarea, .form-control {
    -webkit-transition: all 0.425s ease-in-out 0s;
    -moz-transition: all 0.425s ease-in-out 0s;
    -ms-transition: all 0.425s ease-in-out 0s;
    -o-transition: all 0.425s ease-in-out 0s;
    transition: all 0.425s ease-in-out 0s;
}

.None {
    display: none;
}

.thumb-image {
    float: left;
    width: 100px;
    position: relative;
    padding: 5px;
}

.Padding0 {
    padding: 0px;
}

.Padding2 {
    padding: 2px;
}

.Padding4 {
    padding: 4px;
}

.Padding5 {
    padding: 5px;
}

.Padding10 {
    padding: 10px;
}

.Center {
    text-align: center;
}

.Clear {
    clear: both;
}

/* Responsive */

/* Large desktops and laptops */
@media (min-width: 1200px) {

    /* auto list sub menu */
    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .nav-link {
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .navbar .nav-item .dropdown-menu {
        margin-top: 0;
    }

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

    /* auto list sub menu */

    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .nav-link {
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .navbar .nav-item .dropdown-menu {
        margin-top: 0;
    }

    /* Home Product Extra Categories */

    .HomePCEDesc {
        height: 280px;
    }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

    .carousel-item {
        /*height: 32rem;*/
        height: 600px;
    }

    .ProductLink {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

        .ProductLink:hover {
            font-size: 14px;
        }

    .ProductLinkNotAvailable {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Home Product Extra Categories */

    .HomePCEDesc {
        height: 300px;
    }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

    body {
        
    }
    
    /*.navbar-collapse {
        background-image: unset; 
    }*/

    .carousel-item {
        /*height: 32rem;*/
        /*height: 450px;*/
    }

    .carousel-caption {
        padding-top: 75%;
    }

        .carousel-caption h1 {
            font-size: 40px;
        }

        .carousel-caption p {
            font-size: 32px;
            color: white;
        }

    .ProductLink {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

        .ProductLink:hover {
            font-size: 14px;
        }

    .ProductLinkNotAvailable {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Home Product Extra Categories */

    .HomePCEDesc {
        height: unset;
    }

    .HomeTestimonialBlock {
        border-bottom: 3px solid salmon;
    }

    .HomeTestimonialSeaperator {
        display: none;
    }

    /*.ProductImages {
        padding-right: 0px;
    }*/

    /*.ProductImageBox img {
        height: 250px;
    }*/

    .ScrollBox {
        display: none;
    }
}

/* Portrait phones and smaller */
@media (max-width: 575.98px) {

    .carousel {
        margin-top: unset;
    }

    .navbar {
        background-color: var(--Color-4);
    }

    .navbar-toggler {
        background-color: white;
    }

    /*.navbar-nav {
        background-color: gainsboro;
        padding: 10px;
    }*/



    .ProductLink {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

        .ProductLink:hover {
            font-size: 14px;
        }

    .ProductLinkNotAvailable {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .BottomFooterCopyrights {
        text-align: center;
    }

    .BottomFooterPoweredBy {
        padding-top: 20px;
        text-align: center;
    }
}