body{
    background-color: white;
    background-image: url(IMG/Tablas\ de\ piso\ 2.jpeg);
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    cursor: url(IMG/Mancha2.png) 0 32,auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    height: 100vh;
    
}

#Mantenimiento{
    margin: 0 auto;
    margin-top: 100px;
    width: 600px;
    height: 350px;
    background-color: white;
    
    border: 1px solid black;
    text-align: center;
    align-content: center;
    
}

#Mantenimiento h2{
    text-align: justify;
    padding: 20px;
    font-size: 25px;
}
#Mantenimiento h1{
    font-size: 50px;
}
#Mantenimiento h1 img{
    width: 50px;
    padding-bottom: 7px;
}

.clearfix{
    float: none;
    clear: both;
}
/*FUENTES*/

@font-face{
    font-family: "TrebuchetMS";
    src: url(fonts/TrebuchetMS.ttf);
    font-weight: normal;
    font-style: normal;
}

.sedgwick-ave-regular {
  font-family: "Sedgwick Ave", cursive;
  font-weight: 400;
  font-style: normal;
}

@font-face{
    font-family: "BebasNeue";
    src: url(fonts/BebasNeue.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "WebSymbolsRegular";
    src: url(fonts/websymbols-regular-webfont.eot);
    src: url(fonts/websymbols-regular-webfont.eot?#iefix) format(embedded-opentype),
         url(fonts/websymbols-regular-webfont.woff) format(woff),
         url(fonts/websymbols-regular-webfont.ttf) format(truetype),
         url(fonts/websymbols-regular-webfont.svg#WebSymbolsRegular) format(svg);
    font-weight: normal;
    font-style: normal;
}

/*GENERALES*/
*{
    margin: 0px;
    padding: 0px;
}

/*
body{
    background: url(../IMG/pattern.png);
}
*/

.wrap{
    width: 1207px;
    margin: 0px auto;
}

.gear, .icon{
    font-family: "WebSymbolsRegular";
}

.clearfix{
    float: none;
    clear: both;
}


/*CABECERA*/

#header{
    width: 100%;
    height: 70px;
    background-color: black;
    font-family: "BebasNeue";
    color: white;
}

#header #Carrito img{
    margin-top: 1px;
    height: 68px;    
}




#logotipo{
    float: left;
    background-color: white;
    width: 200px;
    height: 51px;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 8px;
    margin-left: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms;
    color: #c9fa02;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
}



#logotipo .gear{
    /*display: block;*/
    /*float: left;*/
    margin: 0;
    font-size: 30px;
    /*margin-top: 8px;*/
    /*margin-left: 26px;*/
    color: white;

    

    /*animacion (1) "TUERCA GIRA"*/
    animation-name: rotate-gear;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#logotipo .gear img{
    max-width: 40px;
    height: auto;
}

@keyframes rotate-gear{/*animacion (1) "TUERCA GIRA"*/
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

#logotipo:hover .gear{ /*Animación (2) "Tuerca sube"*/
    animation: frombellow 500ms linear;
}

@keyframes frombellow{/*Animación (2) "Tuerca sube"*/
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(200%);
    }
    100%{
        transform: translateY(0%);
    }
}




#logotipo h3{
    font-size: 20px;
    margin: 0;
    color: #c9fa02;
    font-family: "Merienda", cursive;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    text-shadow: -2px 2px #000;
    text-shadow: 2px -2px #000;
    text-shadow: -2px -2px #000;
    
    
}

#logotipo:hover{
    border-radius: 2px;
    color: black;
    background-color: #ccc;
}   

#logotipo:hover h3{/*animación (3) Blog entra por la derecha*/
    animation: fromright 500ms linear;    
}

#logotipo h3 a{
 text-decoration: none;
 color: inherit;   
}

@keyframes fromright{
    from{
        transform: translateX(200%);
    }
    to{
        translate: translatex(0%);
    }

}

#tienda{
    float: left;
    
    width: 135px;
    height: 51px;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 8px;
    margin-left: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms;
    color: #c9fa02;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
}

#tienda h3{
    font-size: 20px;
    margin: 0;
    color: #c9fa02;
    font-family: "Merienda", cursive;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    text-shadow: -2px 2px #000;
    text-shadow: 2px -2px #000;
    text-shadow: -2px -2px #000;
    
    
}




#menu{
    float: left;
    height: 70px;
    background-color: transparent;
}

#menu ul{
    padding: 0px !important;
}
#menu ul li{
    font-size: 24px;
    display: inline-block;
    margin: 0px 20px 0px 20px;
    text-align: center;
    /*line-height: 70px;*/
    letter-spacing: 1px;

}

#menu ul li a{
    display: block;
    color: white;
    text-decoration: none;
    transition: all 200ms;
}

#menu ul li a:hover{
    color: #c9fa02;
    transform: scale(1.2, 1.2);
    /*transform: scale(1.2, 1.2);*/
}

/*BANNER*/

#banner{
    width: 95%;
    background: url(../IMG/bakbaner.png);
    background-position: -327px -133px;
    height: 100px;
    border: 10px solid antiquewhite;
    box-shadow: 0px 0px 2px gray;
    margin: 20px auto;
    overflow: hidden;

    /*Animación (4) FONDO DEL Banner */
    /*animation: backbanner 10s linear; también puede ser escrita así*/
    animation: backbanner;
    animation-duration: 10s;
    animation-timing-function: linear ;
}
    @keyframes backbanner{/*Animación (4) FONDO DEL Banner */
        0%{
            background-position: 0px 0px;
        }
        100%{
            background-position: -327px -133px;
        }
    }



#banner h1{
    display: block;
    width: 850px;
    font-family: "BebasNeue";
    font-size: 45px;
    letter-spacing: 2px;
    color: #c9fa02;
    text-align: center;
    margin: 0 auto;
    line-height: 80px;
    font-weight: normal;
    text-shadow: 2px 2px 1px black;

    /*Animación (5) Texto del banner*/
    animation: showtext 10s linear;
}

/*@keyframes showtext{/*Animación (5) Texto del banner*//*
    0%{transform: translateX(-600%) scale(5,5); opacity: 1;}
    50%{transform: translateX(600%) scale(5,5); opacity: 1;}
    75%{transform: translateX(-600%) scale(5,5); opacity: 0; text-shadow: none;color: transparent;}
    100%{transform: translateX(0%) scale(1,1); opacity: 1;text-shadow: 2px 2px 1px black;color: white;}
}
*/


/*---------------------------------------------------------------------------------------------------------*/
.Carruseles{
    margin-top: 100px;
    margin-bottom: 100px;
}

/*-------------------------------------------------INICIO CAJA CARRUSEL 1 -----------------------------------------------*/
#BT-IR{
    color: gold;
}

#slider1{
    height: 250px;
    width: 600px;
    overflow: hidden;
}

.carousel-item .carrusel1{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#slider1 img{
    margin-left: 5%;
    max-height: 100%;
    max-width: 90%;
}

/*CAJA de CARRUSEL*/

.CAJA_DE_CARRUSEL1{
    float: left;
    margin-left: 19px;
    
}
/*-------------------------------------------------FIN CAJA CARRUSEL 1 -----------------------------------------------*/
/*-------------------------------------------------INICIO CAJA CARRUSEL 2 -----------------------------------------------*/


#ContenedorCarruselInner2{
background-color: rgb(134, 19, 19);
height: 100%;
width: 76%;
margin-left: 30px;
margin-right: 30px;
}
#slider2{
    height: 250px;
    width: 250px;
    overflow: hidden;    
}

.carousel-item .carrusel2{
    
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#slider2 h3{
    padding-top: 3%;
    width: 100%;
    align-items: center;
    text-align: center;
    color: white;   
}

#slider2 img{
    margin-left: 5%;
    max-height: 100%;
    max-width: 90%;
}

/*CAJA de CARRUSEL*/

.CAJA_DE_CARRUSEL2{
    display: flex;
    float: left;
    margin-left: 19px;
    
}
/*------------------------------------------------- FIN CAJA CARRUSEL 2 -----------------------------------------------*/


/* /////////////////////////////////////// INICIO Botones bajos del carrusel //////////////////////////////// */
  /* Cambiar el color de fondo de los botones inactivos*/


/*
.carousel-indicators button {
    background-color: rgb(45, 143, 160) !important; /* Color rojo */
  /*  border: none; /* Eliminar bordes grises */
   /* width: 12px; /* Ajustar tamaño */
   /* height: 12px;
    opacity: 0;
}
*/
  
  /* Cambiar el color del botón activo */
  /*.carousel-indicators .active {
    background-color: blue !important; /* Color azul para el activo */
  /*  opacity: 1 !important; /* Asegurar que el color sea visible */
  /*}

*/
.carousel-indicators.carrusel2 button{
    background-color: rgb(160, 81, 45) !important; /* Color rojo */
    border: none; /* Eliminar bordes grises */
    width: 12px; /* Ajustar tamaño */
    height: 12px;
    opacity: 0;
}

.carousel-indicators.carrusel2 button.active{
    background-color: rgb(68, 160, 45) !important; /* Color rojo */
    opacity: 0;
}

/* 
  [data-bs-theme="light"] .carousel-indicators button {
    filter: none !important; /* Elimina posibles filtros de Bootstrap
  } */

/* /////////////////////////////////////// FIN Botones bajos del carrusel //////////////////////////////// */


/* /////////////////////////////////////// INICIO Botones laterales del carrusel //////////////////////////////// */
 .I-Prev-next-claudio{
    background-color: rgb(45, 143, 160) !important;
}
 
/* .I-Prev-next-claudio span{
    background-color: rgb(160, 158, 45) !important;
    color: black !important;
} */ 

/* Cambiar el color del ícono a rojo escarlata */
.I-Prev-next-claudio .carousel-control-prev-icon,
.I-Prev-next-claudio .carousel-control-next-icon {
    filter: invert(13%) sepia(98%) saturate(7494%) hue-rotate(-5deg) brightness(110%) contrast(125%);
}


.carousel-control-prev,
.carousel-control-next {
    width: 30px !important;   /* aquí defines el ancho que quieras */
    
}

/*
#slider2 .carousel-control-prev,
#slider2 .carousel-control-next {
    margin-right: 30px !important;   /* aquí defines el ancho que quieras */
    
/*}
*/

/* Cambiar el color del ícono a rojo */
/* .I-Prev-next-claudio .carousel-control-prev-icon,
.I-Prev-next-claudio .carousel-control-next-icon {
    filter: invert(100%);
} */

/* Cambiar el color del ícono a rojo */
/* .I-Prev-next-claudio .carousel-control-prev-icon,
.I-Prev-next-claudio .carousel-control-next-icon {
    filter: invert(23%) sepia(94%) saturate(7484%) hue-rotate(357deg) brightness(103%) contrast(119%);
} */



/* .I-Prev-next-claudio .carousel-control-prev-icon,
.I-Prev-next-claudio .carousel-control-next-icon {
    background-color: rgb(255, 36, 0);  /* Rojo escarlata
    color: rgb(255, 36, 0);  /* Rojo escarlata
} */

/* /////////////////////////////////////// FIN Botones laterales del carrusel //////////////////////////////// */






#jumbotron2{
    background-color: #f8f9fa;
}


#jumbotron3{
    background-color: #f8f9fa;
}

/*---------------------------------------------------------------------------------------------------------*/




/*TARJETAS*/

.card{
    width: 100%;
    height: auto !important;
    
    float: left;
    /*overflow: hidden;*/
    margin: 0px;
    margin-top: 0px;
    margin-right: 0px;
    background-color: rgb(134, 19, 19) !important;
    cursor: pointer;
    border-radius: 0% !important;
    border: none !important;
}

.card:hover{
    background-color: black;
}

.card .icon{
    display: block;
    width: 100%;
    height: 100px;
    font-size: 50px;
    text-align: center;
    line-height: 100px;
    margin: 0px auto;
    transition: all 300ms;
    color: white;
}

.card:hover .icon{
    font-size: 70px;
    color: #37bcf9;
    /*Animación (6) Muestra icono de etiquetas*/
    animation: showicon 300ms linear;
} 

@keyframes showicon{/*Animación (6) Muestra icono de etiquetas*/
    from{
        transform: translateY(-200%);
    }
    to{
        transform: translateY(0%);
    }
}


.card .category{
    width: 100%;
    height: 24px;
    font-family: "TrebuchetMS";
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #c9fa02; 
    transition: all 300ms;
    margin-top: 10px;
    /*text-shadow:  2px 2px #000,
                 -2px 2px #000,
                  2px -2px #000,
                 -2px -2px #000;
    */
}

.card:hover .category{
    font-size: 24px;
    color: #c9fa02;
    /*Animación (7) muestra la categoría en las etiquetas*/
    /*animation: showcategory 400ms linear;*/
}

@keyframes showcategory{
    from{
        transform: translateY(-300%);
        color: black;
    }
    to{
        transform: translateY(0%);
        color: white;
    }
}




/*.wrap #info #cards .card .category{} no está mal pero es innecesario*/

.card .description{
    display: none;
    text-align: center;
    color: white;
    font-family: "TrebuchetMS";
    font-size: 15px;
    transition: all 300ms;
    padding: 20px;
}

.card:hover .description{
    display: block;
    color: #c9fa02;
    /*Animación (8) Muestra la descripción de las tarjetas*/
    animation: showdescription 400ms linear ;
}

@keyframes showdescription{
    from{
        transform: translateX(-300%);
        color: black;
    }
    to{
        transform: translateY(0%);
        color: white;
    }
}



/*BARRA LATERAL*/

#lateral{
    width: 300px;
    min-height: 1200 px;
    font-family: "TrebuchetMS";
    float: right;
    margin: 25px;
    margin-top: 0px;
}

aside h3{
    display: block;
    width: auto;
    height: 45px;
    line-height: 49px;
    background: url(../IMG/pxgray.png), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-size: 30px;
    font-family: "BebasNeue";
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

#search{
    width: 90%;
    height: 30px;
    margin: 10px auto;
    background-color: white ;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 4px #ccc inset;
}
#lateral input[type="text"]{
    width: 85%;
    height: 30px;
    border: none;
    padding-left: 5px;
    border-radius: 5px;
    background-color: transparent;
    color: #ccc;
    transition: all 300ms;
}

#lateral input[type="text"]:focus{
    outline: none;
    color: #555;
}


#lateral input[type="button"],
#lateral input[type="submit"]{
    height: 30px;
    width: 11.3%;
    cursor: pointer;
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-left: 1px solid #ccc;
    color: #555;
}


.aside-box{

width: 85%;
height: 240px;
margin: 0px auto;
margin-top: 20px;
padding-top: 2px;
background-color: white;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3),
            0px 3px 7px rgba(0, 0, 0, 0.3),
            0px 1px white inset,
            0px -3px 2px rgba(0, 0, 0, 0.3) inset;
}

#login input[type="email"],
#login input[type="password"]{
    display: block;
    margin: 0px auto;
    margin-top: 20px;
    width: 80%;
    height: 30px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #ccc inset;
    border-radius: 5px;
    padding-left: 35px;
    color: #ccc;
}

#login input[type="email"]:focus,
#login input[type="password"]:focus{
    color: #555;
    box-shadow: 1px 1px 1px gray;
    outline: none;
}

#login #user{
    
    display: block;
    text-align: center;
    position: absolute;
    margin-top: 7px;
    margin-left: 15px;
    height: 30px;
}

#login #password{
    
    display: block;
    text-align: center;
    position: absolute;
    margin-top: 26px;
    margin-left: 19px;
    height: 30px;
    font-size: 20px;
}

#login input[type="submit"],
#login input[type="button"],
#login input[type="reset"],
#login button{
    display: block;
    text-align: center;
    width: 100px;
    height: 35px;
    margin-top: 20px;
    color: white;
    background: linear-gradient(to bottom, #0e5f85 0%,#37bcf9 100%);
    border: 1px solid #156785;
    border-radius: 0px;
    cursor: pointer;
    font-size: 15px;
    font-family: "TrebuchetMS";
    font-weight: lighter;
    margin-left: 18px;
    float: left;
    margin-bottom: 20px;
    transition: all 300ms;
}

#login input[type="submit"]:hover,
#login input[type="button"]:hover,
#login input[type="reset"]:hover,
#login button:hover{

    box-shadow: 0px 0px 3px gray;
}

#login a{
    display: block;
    text-decoration: none;
    margin-left: 18px;
    font-size: 14px;
    color: #555;    
}

#login a:hover{
    text-decoration: underline;
    color: #2f78bc;
}



#social a{
    display: block;
    color: black;
    text-decoration: none;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

#social .overlay{ /*Animación (9) efecto de redes sociales*/
    
    display: block;
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0px 0px 1px #ccc;
    border: 3px solid white;  
    box-shadow: 0px 0px 4px #ccc;
    background: #f4f7fe;
    position: absolute;
    padding: 5px;
    margin-left: 70px;
    margin-top: -52px;
    transform: translateX(-80%);
    opacity: 0;
    transition: all 400ms;   
}

#social div:hover .overlay{/*Animación (9) efecto de redes sociales*/
    opacity: 1;
    transform: translateX(0%);
}

#social{
    height: 190px;
}

/*---------------------------------------*/

/*ARTICULOS*/

#articles{
    margin-top: 5%;
    margin-left: 18%;
    width: 857px;
    float: left;
}

#articles h2{
    display: block;
    width: 100%;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    background: url(../IMG/pxgray.png), white;
    margin-top: 30px;
    margin-bottom: 15px;
    box-shadow: 0px 1px 0px #393d3f,
                1px 2px 0px #393d3f,
                2px 3px 0px #393d3f,
                3px 4px 0px #393d3f;
}

#articles article{
    width: 98%;
    height: auto;
    border: 1px solid #ccc;
    margin: 40px auto;
    padding: 10px;
    font-family: "TrebuchetMS";
    background-color: white;
    color: black;
    box-shadow: 1px 1px 2px #ddd;
}

#articles article h4{
    display: block;
    font-size: 23px;
    margin: 3px;
}

#articles article h4 a{
    text-decoration: none;
    color: #00538c;
}

#articles article h4 a:hover{
    text-decoration: underline;
}

#articles .data{
    float: right;
    background-color: #393d3f;
    color: white;
    height: 30px;
    line-height: 30px;
    margin: -10px;
    
    font-size: 13px;
    border-radius: 0px 0px 0px 5px;
    
}

p{
    text-align: justify;
    padding: 20px;
}

#articles h4 a{
    margin-left: 20px;
}


#articles .data span{
    margin: 6px;
}

#articles article p{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
}

#blog{
    height: 100px;
    margin-top: 60px;
    line-height: 100px;
    text-align: center;
    transition: all 1s;
}

#blog a{
    display: block; /*al poner display block al enlace a{, todo el cuadro #blog se vueleve uno*/
    font-family: "BebasNeue";
    text-decoration: none;
    font-size: 40px;
    color: #00538c;
    font-weight: bold;
    letter-spacing: 3px;
    transition: all 1s;
}

/*Animación (10) efecto del boton blog y colores neon
[OJO aquí se muestra donde poner el hover para que funcione tanto la caja como el enlace]*/
#blog:hover{
    background-color: #555;
    border: 10px solid #37bcf9;
    border-radius: 240px;
    box-shadow: 0px 0px 10px gray;
    animation: blinkblink 10s infinite linear;
}

#blog a:hover{
    color: white;
    text-shadow: 1px 1px 1px black,
                 1px 2px 1px black,
                 1px 3px 1px black,
                 1px 4px 1px black,
                 1px 5px 1px black,
                 1px 6px 1px black;
}

@keyframes blinkblink{
    0%{border:10px solid #37bcf9;}
    25%{border:10px solid green;}
    50%{border:10px solid yellow;}
    75%{border:10px solid white;}
    100%{border:10px solid #37bcf9;}
}


/*FOOTER*/

#footer{
    width: 100%;
    height: 350px;
    background-color: black;
    color: white;
    overflow: hidden;
    margin-top: 300px;
}

#footer #wrap div{
    float: left;
    width: 300px;
    height: 370px;
    margin: 40px;
    /*text-align: center;*/
    color: white;
    font-family: "TrebuchetMS";
}

#footer a{
    text-decoration: none;
    
    color: #37bcf9;
    transition: all 300ms;
}



#footer h5{
    display: block;
    background: url(../IMG/pxgray.png), white;
    height: 50px;
    letter-spacing: 2px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    line-height: 55px;
    color: black;
    border-radius: 5px;
    margin-bottom: 15px;
}

#footer ul{
    
    margin: 10%;
    margin-top: -20%;
    margin-left: -10%;
    font-size: 25px;
    padding-right: 10%;
}

#footer ul li{
    margin-top: 10px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

#footer ul li a{
    display: block;
    height: 40px;
    transition: all 300ms;
}

#footer ul li:hover a{
    padding-left: 40px;
    color: white;
}

/*-------MAPA------------------*/

#footer iframe{
    width: 100%;
    height: 300px;
    margin-top: 10px;
    border-radius: 5px;
    border: 5px solid white;
    box-shadow: 0px 0px 5px gray;
}

/*----------BROWSERS---------------*/
#footer img{
    width: 200px;
    margin-bottom: 15px;
    
}

#footer #Redes_Sociales img{
    width: 45px;
}

#footer #Escríbenos img{
    width: 150px;
    display: block;
    margin: 0 auto;
}

/*------------------------03CON-----------------------------*/
#Contacto01{
    background-color: white;
    width: 400px;
    
    text-align: center;
    align-items: center;
    padding: 50px;;
    margin: 50px auto;
    margin-top: 100px;
    box-sizing: border-box;
    
}

#Contacto01 form textarea {
    width: 100%;    
    resize: vertical;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid green;
    border-radius: 8px;
    font-size: 16px;
}

textarea {
    min-height: 100px !important;
}

input[type="text"]::placeholder {
    text-align: center;
}

.colorEtiquetas{
    background-color: #000;
    
    float: left;
    
    width: 100%;
   /* height: 51px;*/
    text-align: center;
    letter-spacing: 1px;
    
    
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms;
    color: #c9fa02;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
}

.colorEtiquetas h3{
    font-size: 20px;
    margin: 0;
    color: #c9fa02;
    font-family: "Merienda", cursive;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    text-shadow: -2px 2px #000;
    text-shadow: 2px -2px #000;
    text-shadow: -2px -2px #000;
    
    
}

/*---------------------------CONTENIDO-----------------------------------*/

#Contenido{

    margin-left: 5%;
    margin-right: 5%;

}


/*---------------------------CONTENIDO-->ASIDE---------------------------------*/

#aside{
    background: white;
    width: 15%;
    margin-left: 2%;
    margin-top: 8%;
    float: left;
    
    
}

#aside a{
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
}

#aside a:hover{
    color: #c9fa02;
    text-decoration: none;
    font-weight: bold;
    transform: scale(1.1);
    
    
}

/*----------------------------Cajas------------------------------*/
#cajas{
    float: left;
    width: 80%;
}

/*  ///////      CONTENIDO CETRAL       ////////  */
#content{
    display: grid;
    grid-template-columns:  1fr;
    align-items: start;
    justify-items: space-between;
    
    padding-top: 10%;
    padding-bottom: 0%;
    padding-left: 2%;
    margin-bottom: -15%;
    
    
}


/* /// PROJECTS  /// */

#projects{
    display: grid;
    grid-template-columns: repeat(auto-fill, 230px);
    grid-gap: 10px;
    grid-column-gap: 9px;
    align-items: start;

}

.project{
   
    margin-bottom: 25px;
    margin-right: 20px;
    border: 1px solid #ccc;
    background-color: black
}

.project img{
    width: 100%;
}

.project-info{
    padding: 10px;
    
}

.project-info a{
    font-size: 16px;
    color: cyan;
    transition: all 0.3s ease;
    text-decoration: none;
    
    padding-left: 10%;
}

.project-info a:hover{
    color: #c9fa02;
}

.project-info p{
    font-size: 16px;
    color: gray;
}