/* FONT FAMILY */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");


body{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.background-image{
    background-image: url(../img/background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 90vh;
    margin-top: 10vh;
}

.background-image p{
    color: #fff;
}

.background-image a{
    color: #fff;
    border: 2px solid #FFF;
    padding: 10px 75px;
    text-transform: uppercase;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.background-image a:hover{
    text-decoration: none;
    background: #fff;
    color: #005587;
}

@media (max-width: 767px) {
    .background-image img{
        width: 50vw;
        height: auto;
    }
}

header .barra-celeste{
    background-color: #005587;
    width: 100%;
    height: 5px;
}

header .barra-negro{
    background-color: #3f3b3c;
    width: 100%;
    height: 2px;
}

header .barra-gris{
    background-color: #727071;
    width: 100%;
    height: 4px;
}

header{
    background-image: url(../img/pagetop_main.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    background-color: #fff;
    box-shadow: 0px 6px 15px #ebebeb;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.padding-header{
    padding-top: 127px;
}

.navbar{
    padding-left: 0px;
    padding-right: 0px;
}

.navbar-brand{
    margin-right: 5rem;
}

#navbarNavDropdown{
    margin-top: 73px;
    text-transform: uppercase;
}

.nav-link{
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-light .navbar-toggler{
    border: none;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
}

.dropdown-menu{
    border: none;
    border-radius: 0px;
    background-color: #005587;
}

.dropdown-item{
    color:#fff;
    font-size: 13px;
    font-weight: bold;
}

@media (max-width: 991px) {
    #navbarNavDropdown{
        margin-top: 0px;
        background-color: #efeded;
        border-radius: 10px;
    }

    .navbar-nav{
        padding: 25px;
        border-top: 10px solid #fff;
    }
}

h1{
    color: #005587;
    font-size: 1.8em;
    font-weight: 700;
    text-transform: uppercase;
}

h2{
    color: #005587;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 30px;
    margin-top: 20px;
}

h5{
    color: #005587;
    font-weight: 600;
    font-size: 20px;
}

/* FOOTER */
footer{
    margin-top: 30px;
}

/* EMPRESA */
.pilars{
    width: 100%;
}

.pilars-container{
    width: 20%;
    display: table-cell;
    padding: 20px 25px;
    /*border-right: 1px solid silver;*/
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    border-radius: 10px;
}

.pilars-container i{
    color: #727071;
    font-size: 30px;
}

.pilars div.pilars-container:nth-child(1){
}

.pilars div.pilars-container:nth-child(5){
    border-right: 0px;
}

.pilars-container:hover{
    background-color: #005587;
    color: #fff;
}

.pilars-container:hover i{
    color: #fff;
}

.pilars-container:hover h5{
    color: #fff;
}

@media (max-width: 990px) {
    .pilars-container{
        display: block;
        width: 100%;
        padding: 0px 0px 25px 0px;
        border-right: 0px;
        border-bottom: 1px solid silver;
        margin-bottom: 20px;
        box-shadow: none;
        border-radius: 0px;
    }

    .pilars div.pilars-container:nth-child(5){
        border-bottom: 0px;
    }
}

/* PRODUCTOS */
.table-heading{
    background-color: #3f3b3c;
    color: #fff;
    font-weight: 700;
}

.table-heading p{
    margin: 7px 0px;
}

.table-heading .bg-celeste{
    background-color: #005587;
    color: #fff
}

.product-description .color-celeste{
    color: #005587;
    font-weight: 700;
}

.product-description a{
    background-color: #005587;
    color: #fff;
    padding: 10px 10px;
    border-radius: 0px;
    display: block;
    width: fit-content;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.product-description a:hover{
    background-color: #1a839b;
    text-decoration: none;
}



@media (max-width: 767px) {
    .product-description .row div::before{
        font-size: 12px;
        color: silver;
        line-height: 14px;
        display: block;
    }

    .product-description .row div:nth-child(1){
        display: none;
    }

    .product-description .row div:nth-child(1)::before{
        content: "Nº";
    }

    .product-description .row div:nth-child(2)::before{
        content: "Nombre";
    }

    .product-description .row div:nth-child(3)::before{
        content: "FAM";
    }
    
    .product-description .row div:nth-child(4)::before{
        content: "%OH";
    }

    .product-description .row div:nth-child(5)::before{
        content: "Uso";
    }

    .product-description .row div:nth-child(6)::before{
        content: "Descripción";
    }

    /* productos poliesteres */
    .product-description.poliesteres .row div:nth-child(1)::before{
        content: "Nº";
    }

    .product-description.poliesteres .row div:nth-child(2)::before{
        content: "Nombre";
    }

    .product-description.poliesteres .row div:nth-child(3)::before{
        content: "FAM";
    }

    .product-description.poliesteres .row div:nth-child(4)::before{
        content: "Uso";
    }

    .product-description.poliesteres .row div:nth-child(5)::before{
        content: "Descripción";
    }

    .product-description.poliesteres .row div:nth-child(6)::before{
        content: none;
    }

    .product-description.reologia .row div:nth-child(4)::before{
        content: "Tipo";
    }

    .product-description .color-celeste p{
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    header{
        background-position: top right 35%;
    }
}

/* CONTACTO */
.contact a{
    color: #212529;
}

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

.contact a:hover i{
    font-size: 45px;
}

.contact a i{
    font-size: 33px;
    color: #005587;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.form-control{
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #ced4da;;
}

.form-control::placeholder{
    font-weight: 300;
    font-size: 14px;
}

.form-group label{
    display: none;
}

.form-group textarea{
}

.btn-success{
    border-radius: 0px;
    background-color: #005587;
    border-color: #005587;
}

.grecaptcha-badge{
    bottom: 105px !important;
}

/* WHATSAPP */
.btn-whatsapp{
    background-color: #25D366;
    color: #FFF;
    font-size: 35px;
    line-height: 60px;
    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    right: 25px;
    bottom: 20px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.btn-whatsapp:hover{
    background-color: #65E093;
    text-decoration: none;
    color: #fff;
}


/* MARGINS */
.mg-t-0{margin-top: 0px !important;}
.mg-t-1{margin-top: 10px;}
.mg-t-2{margin-top: 20px;}
.mg-t-3{margin-top: 30px;}
.mg-t-4{margin-top: 40px;}
.mg-t-5{margin-top: 50px;}
.mg-t-6{margin-top: 60px;}
.mg-t-7{margin-top: 70px;}
.mg-t-8{margin-top: 80px;}
.mg-t-9{margin-top: 90px;}
.mg-t-10{margin-top: 100px;}

.mg-b-0{margin-bottom: 0px !important;}
.mg-b-1{margin-bottom: 10px;}
.mg-b-2{margin-bottom: 20px;}
.mg-b-3{margin-bottom: 30px;}
.mg-b-4{margin-bottom: 40px;}
.mg-b-5{margin-bottom: 50px;}
.mg-b-6{margin-bottom: 60px;}
.mg-b-7{margin-bottom: 70px;}
.mg-b-8{margin-bottom: 80px;}
.mg-b-9{margin-bottom: 90px;}
.mg-b-10{margin-bottom: 100px;}

.pd-t-0{padding-top: 0px !important;}
.pd-t-1{padding-top: 10px;}
.pd-t-2{padding-top: 20px;}
.pd-t-3{padding-top: 30px;}
.pd-t-4{padding-top: 40px;}
.pd-t-5{padding-top: 50px;}
.pd-t-6{padding-top: 60px;}
.pd-t-7{padding-top: 70px;}
.pd-t-8{padding-top: 80px;}
.pd-t-9{padding-top: 90px;}
.pd-t-10{padding-top: 100px;}

.pd-b-0{padding-bottom: 0px !important;}
.pd-b-1{padding-bottom: 10px;}
.pd-b-2{padding-bottom: 20px;}
.pd-b-3{padding-bottom: 30px;}
.pd-b-4{padding-bottom: 40px;}
.pd-b-5{padding-bottom: 50px;}
.pd-b-6{padding-bottom: 60px;}
.pd-b-7{padding-bottom: 70px;}
.pd-b-8{padding-bottom: 80px;}
.pd-b-9{padding-bottom: 90px;}
.pd-b-10{padding-bottom: 100px;}