/*//////////////////*/
/*     HELPERS      */
/*//////////////////*/

.centered-content {
	display: flex;
    justify-content: center;
    align-items: center;
}

/*//////////////////*/
/*     GENERAL      */
/*//////////////////*/

@font-face {
    font-family: 'Arial-rounded';
    src: url("/_assets/Fonts/arial-rounded.ttf") format("truetype");
}
@font-face {
    font-family: 'Arial-rounded-bold';
    src: url("/_assets/Fonts/arial-rounded-mt-bold.ttf") format("truetype");
}
html {
  scroll-behavior: smooth;
}
body {
    /*font-family: 'Arial-rounded';*/
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}
body b {
    /*font-family: 'Arial-rounded-bold';*/
    font-family: 'Open Sans', sans-serif;
}

/* //////////// */
/*  CARROUSEL   */
/* //////////// */
.text-primary, .text-danger {
    font-weight: bold;
}
#main-carousel .image-container {
    height: 84vh;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.image-container h2 {
    text-align: center;
    color: white;
    text-shadow: 0px 2px 2px black;
}
.carousel-control-container {
    background-color: #ffffff59;
    padding: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.carousel-control-next, .carousel-control-prev {
    width: 10%;
}

/*//////////////////*/
/*    UPPERMENU     */
/*//////////////////*/

.bg-secondary {
    background-color: #ffffff !important;
}
#mainNav .navbar-nav li.nav-item a.nav-link {
    color: #58595b;
}
.menu-logo {
    float: left;
    width: 10%;
}
.menu-logo img {
    width: auto;
    max-width: 100%;
    max-height: 30px;
}

.menu-items {
    display: flex;
    justify-content: space-around;
    width: 80%;
}
.menu-items a {
    color: black !important;
}

.menu-search {
    float: right;
    width: 10%;
}

.btn-outline {
    padding: 5px 25px;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;

}
.btn-outline:hover {
    background-color: #e8e8e8;
}

.menu-anchor {
  display: block;
  position: relative;
  top: -50px; 
  visibility: hidden;
}

.uppermenu-search {
    top: 54px;
}

#trigger-menu {
    display: none;
}

.uppermenu-mobile {
    background-color: white;
    z-index: 9;
    position: fixed;
    width: 100%;
    padding-top: 75px;
}
.uppermenu-mobile ul {
    padding: 0px;
    margin-bottom: 0px;
}
.uppermenu-mobile li {
    list-style: none;
    padding: 5px 14px;
    border-bottom: 1px solid #d8d8d8;
}
.uppermenu-mobile li a {
    color: black;
    display: block;
}

/* ////////////// */
/*   BACKGROUNDS  */
/* ////////////// */

.black-background {
    background-color: black;
}
.white-background {
    background-color: white;
}
.yellow-background {
    background-color: #FBB03B;
}


/* ////////////	*/
/*  CONTAINER   */
/* ////////////	*/


.info-container {
    padding: 20px 6%;
}
.info-container.small {
    padding: 10px 6%;
}

.section-title {
    font-size: 12.5vw;
}
.section-title.yellow {
    color: #feefd8;
}

.information{
    padding: 0px 5%;
    margin-top: -80px;
    line-height: 20px;
}
.title {
    color: #FBB03B;
}
.product.title {
    font-size: 60px;
}
.information-image {
    padding: 20px 0px;
    width: 90%;
    margin: 0px 5%;
}

.icon-background {
    color: black !important;
}
.icon-background .fas{
    background-color: #00000026;
    padding: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
a.icon-background .fas:hover {
    background-color: #00000040;
    cursor: pointer;
}

.generic-text { 
    margin-bottom: 0px;
}

.staircase-effect {
    height: 50px;
}

.btn-primary {
    padding: 5px 25px;
    background-color: #FBB03B;
    border-color: #FBB03B;
    border-radius: 20px;
    color: black;
}
.btn-primary:hover, .btn-primary:active {
    color: black !important;
    background-color: #da9935 !important;
    border-color: #da9935 !important;
}
.btn.big {
    font-size: 20px;
}
.btn.center {
    margin: auto 0;
}


.thumbnail-information {
    margin-left: 120px;
}

/* ///////////// */
/*    PRODUCTS   */
/* ///////////// */

.products-container {
    display: flex;
    flex-wrap: wrap;
}
.product-container {
    width: 25%;
    padding: 10px 1%;
}
.product-item {
    position: relative;
    height: 100%;
}
.product-image-container {
    position: relative;
    background-color: #F9F9F9;
    height: 200px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.0);
}
.product-link {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}
.product-information-container {
    padding: 10px 8px;
    text-align: center;
}
.fast-shadow-transition::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 300ms;
}
.product-item .actions {
    padding-top: 15px;
    position: absolute;
    height: 100%;
    width: 60px;
    right: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.action-button {
    background-color: white;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: 5px 10px;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
    z-index: 2;
    cursor: pointer;
}
.action-button small {
    position: absolute;
    left: -90px;
    background-color: white;
    padding: 4px 8px;
    margin-top: -4px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: black;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.fast-shadow-transition:hover::before {
    opacity: 1;
}
.product-item:hover .actions {
    opacity: 1;
}
.action-button:hover {
    background-color: #FBB03B;
    color: white;
}
.action-button:hover small {
    opacity: 1;
    left: -80px;
}


.product-primary {
    width: 100%;
    background-color: #F9F9F9;
}
.product-thumbnail-container {
    width: 100px;
    padding: 10px 5px;
}
.product-thumbnail-container .product-image-container {
    height: 100px;
}
.product-thumbnail {
    height: 100%;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.activable-thumbnail {
    cursor: pointer;
}

/* ///////////// */
/*    QUERIES    */
/* ///////////// */

@media (min-width: 1200px) {
    .section-title {
        font-size: 9.5rem;
    }
}
@media (max-width: 1315px) {
    #trigger-search span {
        display: none;
    }
}
@media (max-width: 768px) {
    .section-title {
        text-align: center;
    }
    .information {
        margin-top: 0px;
    }
    .staircase-effect {
        height: 0px;
    }
    .product-container {
        width: 33%;
    }
    .product-container.small {
        width: 20%;
    }
}
@media (max-width: 680px) {
    .uppermenu .menu-items a {
        display: none;
    }
    #trigger-menu {
        display: block;
    }
    .menu-logo {
        width: 20%;
    }
    .products-container {
        justify-content: center;
    }
    .product-thumbnail-container {
        width: 75px;
        padding: 5px 2px;
    }
    .product-thumbnail-container .product-image-container {
        height: 75px;
    }
}
@media (max-width: 425px) {
    .image-container h2 {
        margin-top: -100px;
    }
    .product-container {
        width: 100%;
    }
}


/*///////////////////   solution tools  */
/*menu nav*/
.ImageMainNav {
    max-height: 60px;
}

.babyblue {
    background-image: url("/_assets/Images/home/blue_background.jpg"); 
    /*background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('/_assets/Images/home/blue_background.jpg');*/
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}
.supply_chain {
    background-image: url("/_assets/Images/home/supply-chain.jpg"); 
    background-repeat: no-repeat;
}
.quality {
    background-image: url("/_assets/Images/home/quality.jpg"); 
    background-repeat: no-repeat;
}
.social {
    background-image: url("/_assets/Images/about_us/tecnology.png"); 
    background-repeat: no-repeat;
}

.bg-gray {
    background-color: #E3DFDE !important;
}
.bg-primary {
    background-color: #044DA2 !important;
}
.text-primary {
    color: #044DA2 !important;
}
.text-baby-blue {
    color: #549ADD !important;
}
.section-bg-img {
    background-image: url("/_assets/Images/banner_supply_chain.jpg");   
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*min-height: 25vh;*/
    min-height: 18vw;
    display: flex; 
    margin: auto; 
}

.col-bg-img {
    background-repeat: no-repeat;
    background-size: cover;
}
.text-top{
    vertical-align: -webkit-baseline-middle;
}
.slash {
    font-size: 62px;
}
body {
    /*min-height: 100vh;*/
    margin: 0;
}

footer {
    position: sticky;
    /*bottom: 0;*/
    width: 100%;
}

.col-bg-slash {
    /*background-color: #ff0000;*/
    /*height: 100%;*/

    width: 40%;
    background-repeat: no-repeat;
    background-size: cover;
}

.col-non-slash {
    /*background-color: #00ff00;*/
    height: 100%;
    width: 60%;
}

.card-header{min-height: 75px;}
.card-header a{color: #fff;}

/*@media (max-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}*/
.bg-default {display: block;}
.bg-mobile {display: none;}

@media (max-width: 576px) {
    .card-columns {
        column-count: 2;
    }
    .col-xs-6 {
        width: 50%!important;
        margin-bottom: 25px;
    }
    .cap-text {
        /*font-size: max(3vw, 15px)!important;*/
    }
    /*.col-bg-img {
        min-height: 250px;
        margin-left: 45px;
        margin-right: 45px;
    }*/
    /*.bg-default {display: none;}
    .bg-mobile {display: block!important; min-height: 250px;}*/
}
@media (min-width: 577px) {
    .card-columns {
        column-count: 4;
    }
}

/*CAPABILITIES*/
.default-container {
    background-image: url('/_assets/Images/Automotive/automotive_01.png');     background-size: auto 80%; background-repeat: no-repeat; background-position-y: bottom;
}
.cap-text {
        /*font-size: 5vw;*/
        font-size: max(3vw, 20px);
}

@media (max-width: 767px) { 
    .bg-gray {
        background-color: inherit !important;
    }
    .bg-default {display: none;}
    .bg-mobile {display: block!important;}
    .default-container {
        background-image: none;
    }
    .over-img {
        position: relative;
        margin-top: -89%;
        width: 60%;
        margin-left: -75px;
    }
    /*.cap-text {
        font-size: 2vw;
    }*/

}
@media (min-width: 1024px) { 
    .default-container {
        padding-right: 10%;
        background-size: auto 90%;
    }
}

.col-bg-slash {
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}