@font-face {
    font-family: 'frutiger';
    src: url(fuentes/FrutigerLTStd-Bold.ttf);
}
@font-face{
    font-family: 'rubik';
    src: url(fuentes/Rubik-Bold.ttf);
}
body{
   height: 100vh;
   margin: 0;
   padding: 0;
   color: white;
  font-family: 'frutiger';
  font-weight: 800;
}

.Container {
display: grid ;
grid-template-columns: 1fr 1fr ;
grid-template-rows: 90px 1fr 1fr 100px;
height: 100vh;
}

#logofussetti {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/3;
    grid-row: 1/2;

}

#whatsapp {
    grid-column: 1/3;
    grid-row: 4/5;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hogar {
    grid-column: 1/2;
    grid-row: 2/4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

#motos {
    grid-column: 2/3;
    grid-row: 2/4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
#logosmoto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    margin: 0 6px;

}

#fondohogar {
    grid-column: 1/2;
    grid-row: 1/5;
    display: flex;
    background-image: url('imagenes/fondohogar.gif');
    background-size: cover;
    background-repeat: no-repeat;


}
#fondomotos {
    grid-column: 2/3;
    grid-row: 1/5;
display: flex;
background-image: url('imagenes/fondomotos.gif');
background-size: cover;
background-repeat: no-repeat;
}

.contenedormarcas {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marcas {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}
.marcas>.border {
    margin: 0 15px;

}

.button {
    background-color: transparent;
    border:  solid 2px white;
    border-radius: 24px;
    padding: 1px 12px;
 text-transform: uppercase;
 color: white;
cursor: pointer;
font-size: 14px;
font-family: 'frutiger';

}

.link {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

.encontra {
    text-transform: uppercase;
    display: flex;
}
.imagenfussetti {
    width: 360px;
    height: 60px;

}
.categorias {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 436px;
}
.categoria {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 0 20px; */

}
.Categoriaheader {
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
color: white;
text-shadow: 0 7px 5px black;
font-weight: 800;
font-family: 'rubik'!important;
font-size: 50px;
}
.imagencategoria {
    width: 70px;
    height: 70px;
    margin-bottom: 6px;
    cursor: pointer;

}

.whatsapplogo {
    height: 50px;
    width: 50px;
    margin-right: 10px;

}
.whatsapplink {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 30px;
    font-weight: 700;
    color: white;
}

.contenedorcolumna {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-height: 100%;
    flex-direction: column;
    width: 100%;
}
.border {
    border:  solid 2px;
    border-radius: 21px 21px 21px 0;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.divisor {
    margin: 2px;
}
.flechas{
    height: 20px;
    margin-left: 3px;
    margin-right: 3px;
}
.navegacionmoto {
    display: flex;
}

.bordeheader {
    border:  solid 2px;
    border-radius: 21px 21px 21px 0;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lineas {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 6px;
    width: 62px;
}
.flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;

}
.bordetitulo {
    padding: 5px 25px;
}
@media (max-width: 986px) {
 .divisor {
    margin: 1px 30px;
}
.encontra {
    text-transform: uppercase;
    display: flex;
    margin: 25px;
}   
}

@media (max-width: 800px) {
    body {
        font-size: 13px;
    }
    .Container {
        grid-template-columns: 1fr;
        }
        #logofussetti {
            grid-column: 1/2;
            grid-row: 1/2;
        
        }
        
        #whatsapp {
            grid-column: 1/2;
            grid-row: 4/5;
        }
        
        #hogar {
            grid-row: 2/3;
    
        }
        
        #motos {
            grid-column: 1/3;
            grid-row: 3/4;
        }
   
        
        #fondohogar {
            grid-row: 1/3;
        }
        #fondomotos {
            grid-column: 1/2;
            grid-row: 3/5;
        }




}
@media (max-width: 520px) {
    .imagenfussetti {
    width: 250px;
    height: 70px;
}
.flechas{
    height: 20px;
    margin-left: 3px;
    margin-right: 3px;
}

.button {
font-size: 10px;
}

.imagencategoria {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
}
.categorias{
    max-width: 300px;
}


}