﻿/*
    azul: #003D68
    rojo: #B11116
    gris: #F6F4F4
    blanco: #FFFFFF

*/


body
{
}

#star {
    font-size:500%;
    color:#B11116;
    text-align: center;
}

#starwhite {
    color:#FFFFFF;
    text-align: center;
}

@media screen and (min-device-width:450px) {
    #header a:hover {
        box-shadow: inset 470px 0 0 0 #B11116 !important;
    }
}

@media only screen and (max-width: 1000px) {
    #menudesktop {
        display: none;
    }


}

@media only screen and (min-width: 1000px) {
    #menumovil {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
    #imagenLat {
        background-size: 85%;
    }

    #imagenLatFleet img{
        padding-left: 0;
        width: 100%; 
        height: 150px; 
        object-fit: cover;
    }

    #imagenLatTools img{
        padding-left: 0;
        width: 100%; 
        height: 150px; 
        object-fit: cover;
    }

    .content {
        border-radius: 0px !important;
    }
}

#menumovil a {
    text-transform: uppercase;
    color: #B11116;
    font-size: 18px;
    font-weight: 500;
    display:flex; justify-content:center;
    box-shadow: inset 0 0 0 0 #B11116;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    padding-bottom: 15px;
    padding-top: 15px;
    
}

#menumovil a:hover {
    box-shadow: inset 400px 0 0 0 #B11116;
    color: #FFFFFF !important ;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
}

#logo {
    max-width:200px;
}

#header a {
    text-transform: uppercase;
    color: #B11116;
    font-size: 18px;
    font-weight: 500;
    display:flex; justify-content:center;
    box-shadow: inset 0 0 0 0 #B11116;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

#header a:hover {
    box-shadow: inset 200px 0 0 0 #B11116;
    color: #FFFFFF !important ;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    cursor: pointer;
}

.content {
    background-color: #003D68;
    color: #FFFFFF;
    font-size: clamp(19px, 3vw, 23px);
    padding: 45px 45px 25px 45px;
    background-image: url('../img/bg.png');
    min-height: 600px;
    border-radius: 5px;
}

#imagenLat {
    background-image: url('../img/cadena.png');
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

#imagenLatFleet img{
    padding-left: 15px;
    padding-top: 15px;
    max-width:100%;
    max-height:100%;
}

#imagenLatTools img {
    padding-left: 15px;
    padding-top: 15px;
    max-width:100%;
    max-height:100%;
}

.content h1{
    font-size: clamp(30px, 3vw, 45px);
    font-weight: bolder;
}

.content p{
    margin-top: 10px;
    text-align: justify;
    padding-left: 5px;
}

#Address {
    font-size:  clamp(25px, 3vw, 50px);
    line-height: 1;
    display: flex;

    align-items: center;
}

#Address a{
    color: white;
}

#Address a:hover{
    color: white;
    text-decoration: underline;
}

#Address a:visited{
    color: white;
}

#footer{
    padding: 25px;
    font-size: 12px;
    text-align: center;
    color: #ababab;
}