/********** Template CSS **********/
:root {
    --primary: #00B3E3;
    --secondary: #C8E6F5;
    --light: #F8F8F8;
    --dark: #000000;
    --white: #ffffff;
}
html {
    scroll-behavior: smooth;
}
a{color: var(--primary);}
.bg-dark {
    background-color: var(--dark) !important;
}
.bg-light {
    background-color: var(--light) !important;
}
.bg-white {
    background-color: var(--white);
}
.text-light{color: var(--white);}
.color-primary {
    color: var(--primary);
}
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: normal;
    color: #707070;
    font-weight:300;
}
@media (max-width: 572px) {
    body {
        font-size: 1.0rem;
    }
}
.navbar {
    padding-top: .875rem;
    padding-bottom: .875rem;
}
    .navbar-brand img {
    width: 277px;
}
@media only screen and (max-width: 480px) {
.navbar-brand img {
   width:150px;
    }
}
.nav-link {
    color: var(--primary);

}

.nav-link:hover {
    text-decoration: underline;

}

.navbar-nav .dropdown-menu
{
    border:1px #fff solid;
    box-shadow: 8px 6px 14px #e3e3e3;

    padding:20px 0;
}

.navbar-nav .dropdown-menu ul
{

}

.navbar-nav .dropdown-menu ul li
{
    list-style:none;
    padding: 10px 0;
}

.navbar-nav .dropdown-menu ul li:hover
{
    background-color:#fff;
}

.navbar-nav .dropdown-menu ul li a{
    color: var(--primary);
    padding:.25rem 0;
}

.navbar-nav .dropdown-menu ul li a:hover{
    text-decoration:underline;
    background-color:#fff;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
.navbar-toggler:focus{
    outline:none;
    border:none;

}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 179, 227, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.main:before {
    height: 100px;
    content: "";
    display: block;
}

.bg-blue {
    background-image: url("../images/bg-blue.svg");
    background-repeat: repeat;
    background: linear-gradient(0deg, rgba(0,88,113,1) 0%, rgba(0,94,120,1) 25%, rgba(0,176,225,1) 100%);
}
@media (max-width: 991px) {
    .bg-blue{
    background: linear-gradient(0deg, rgba(0,88,113,1) 0%, rgba(0,94,120,1) 25%, rgba(0,176,225,1) 100%);
}}
    .bg-grey {
        background-image: url("../images/bg-grey.svg");
        background-repeat: repeat;
    }

@media (max-width: 991px) {
    .bg-grey {
        background: linear-gradient(0deg, rgba(95,92,93,1) 0%, rgba(175,172,172,1) 100%);
    }
}

h2 span {
    border-bottom: 2px solid;
    padding-bottom: 3px;
}

    .borderPrimary {
        border-color: var(--primary);
    }

    #sectionMechanismAction ul li {
        list-style: none;
        background-color: rgba(200, 230, 245, 0.3);
        padding: 0.5rem 2rem;
        margin-bottom: 0.5rem;
    }
@media (max-width: 767px) {
    #sectionMechanismAction ul  {
        padding-left:0;
        margin-top:25px;
    }
}

    .contactUs ul li {
        line-height: 2.0rem;
        margin-bottom: 1rem;
    }

        .contactUs ul li i {
            display: inline-block;
            width: 75px;
            vertical-align: top;
            color: var(--primary);
            margin-top: 5px;
        }

        .contactUs ul li span {
            display: inline-block;
        }

    footer {
        border-top: 1px solid var(--primary);
        -webkit-box-shadow: 2px 0 3px 0 var(--primary);
        box-shadow: 2px 0 3px 0 var(--primary);
    }

        footer .links a {
            padding: 0.5rem 1.5rem;
            text-decoration: none;
            display: inline-block;
        }

    @media (max-width: 572px) {
        footer .links a {
            width: 100%;
        }
    }

    footer .text-small {
        font-size: 0.875rem;
    }

    #sectionTechnology, #sectionMechanismAction, #sectionContactUs, #sectionAboutUs {
        scroll-margin-top: 4.0rem;
    }

    .map-responsive {
        overflow: hidden;
        padding-bottom: 40.25%;
        position: relative;
        height: 0;
    }

        .map-responsive iframe {
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }

    video {
        max-width: 100%;
        height: auto;
    }



    @keyframes slideIn {
        0% {
            transform: translateX(500px) scale(0.2);
        }

        100% {
            transform: translateX(0px) scale(1);
        }
    }

    @keyframes slideUp {
        0% {
            transform: translateY(300px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @keyframes expand {
        0% {
            transform: translateX(1400px);
        }

        100% {
            transform: translateX(0px);
        }
    }


    @keyframes slideInFromLeft {
        0% {
            transform: translateX(-25%);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes slideInFromRight {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(0);
        }
    }


    /* make keyframes that tell the start state and the end state of our object */
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .active.animateLeft {
        animation: 1s ease-out 0s 1 slideInFromLeft;
    }

    .active.animateRight {
        display: inline-block;
        animation: 1s ease-out 0s 1 slideInFromRight;
    }

    .fadein {
        opacity: 0;
        /* make things invisible upon start */
        -webkit-animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
        /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
        animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
    }




    .animate.active .animate-in {
        opacity: 0;
        /* make things invisible upon start */
        -webkit-animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
        /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
        animation: fadeIn 0.5s ease-in 0s 1 normal forwards;
    }

        .animate.active .animate-in:nth-child(1n) {
            animation-delay: 0.5s;
            -webkit-animation-delay: 0.5s;
            -moz-animation-delay: 0.5s;
        }

        .animate.active .animate-in:nth-child(2n) {
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
        }

        .animate.active .animate-in:nth-child(3n) {
            animation-delay: 1.5s;
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
        }

        .animate.active .animate-in:nth-child(4n) {
            animation-delay: 2s;
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
        }

        .animate.active .animate-in:nth-child(5n) {
            animation-delay: 2.5s;
            -webkit-animation-delay: 2.5s;
            -moz-animation-delay: 2.5s;
        }

        .animate.active .animate-in:nth-child(6n) {
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
        }

        .animate.active .animate-in:nth-child(7n) {
            animation-delay: 3.5s;
            -webkit-animation-delay: 3.5s;
            -moz-animation-delay: 3.5s;
        }

        .animate.active .animate-in:nth-child(8n) {
            animation-delay: 4s;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
        }

        .animate.active .animate-in:nth-child(9n) {
            animation-delay: 4.5s;
            -webkit-animation-delay: 4.5s;
            -moz-animation-delay: 4.5s;
        }

        .animate.active .animate-in:nth-child(10n) {
            animation-delay: 5s;
            -webkit-animation-delay: 5s;
            -moz-animation-delay: 5s;
        }

    /*.productimg {
        display: none;
    }*/


    #sectionNews a
    {
        font-size: 0.9rem;
    }

      .fordwardlooking
    {
        font-size: 60%; 
        background-color:#C8E6F5;
    }

    main.main:before
    {
        display:inline;
    }


.table-div {
    background-color: transparent;
    color: #707070;
    font-size: 0.875rem;
}

    .table-div .tr-div, .tr-th-div {
        display: flex;
        align-items: center;
    }

    .table-div .tr-th-div div:first-child {
        width: 150px;
    }

    .table-div .tr-div div:first-child {
        height: 65px;
        width: 155px;
        justify-content: flex-start;
    }

    .table-div .tr-div div {
        width: 85px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-div .th-div, .table-div .td-div {
        border: 3px solid #fff;
        padding: 5px 15px;
        height: 65px;
    }

    .table-div .tr-th-div .th-div {
        width: 85px;
        height: 45px;
        padding: 5px 5px;
        text-align: center;
    }

    .table-div .td-div {
        text-align: center;
    }

    .table-div .td-color1 {
        background-color: #039DCB;
    }

    .table-div .td-color2 {
        background-color: #bce0f1;
    }

    .table-div .td-color3 {
        background-color: #676a76;
    }

    .table-div .tr-footer div {
        padding: 5px;
        text-align: right;
        font-size: 0.675rem;
    }


.indicationForUse
{
    font-size: 0.9rem;
    text-decoration: underline;
}

.text-based-card .card {
    padding: 25px 2px 15px;
    text-align: left;
}

.application-areas .card, .text-based-card .card {
    background: none;
    border: 1px solid var(--primary);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    flex-basis: 100%;
}

.text-based-card .card-wrap
{
        flex: 1 1 0px;
}

.animate.active .card-wrap:nth-child(1) {
    animation-name: animBox-1;
    animation-duration: 2s;
    animation-delay: 0.3s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate.active .card-wrap:nth-child(2) {
    animation-name: animBox-1;
    animation-duration: 2s;
    animation-delay: 0.9s;
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate.active .card-wrap:nth-child(3) {
    animation-name: animBox-1;
    animation-duration: 2s;
    animation-delay: 1.5s;
    opacity: 0;
    animation-fill-mode: forwards;
}

@keyframes animBox-1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}