@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,423;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,423;1,500;1,600;1,700&family=PT+Sans+Narrow:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

html {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    height: 95vh;
    width: 100%;
}

nav {
    background-color: #333333;
    height: 100%;
    width: 180px;
    position: fixed;
}

.nav-index {
    background-color: #333333;
    height: 100%;
    width: 180px;
    position: relative;
}

nav ul {
    padding-top: 40%;
    text-align: center;
}

nav ul a {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 24px;
    text-decoration: none;
    color: white;
}

nav ul a:hover {
    color: #05c66e;
}

#logo-container {
    height: 35%;
    background-color: #333333;
    padding-top: 30%;
    padding-bottom: 20%;
    text-align: center;
}

.logo {
    width: 100%;
    height: 100%
} */

/* .content-body {
    margin-left: 180px;
    width: 100%;
    display: block;
} */

.content-header {
    position: relative;
    width: 100%;
    background-color: brown;
    height: 40%;
}

.content-header img {
    width: 100%;
    height: 100%;
}

.content-header h1 {
    position: absolute;
    color: white;
    bottom: 0;
    padding-left: 2%;
    font-family: 'Open Sans', sans-serif;
    Font-size: 60px;
}

.text-content {
    background-color: white;
    display: block;
    width: 100%;
    height: calc(100% - 5vh);
}

.text-content h1 {
    font-family: 'Open Sans', sans-serif;
    padding-top: 3%;
    padding-left: 5%;
}

.text-content p {
    padding-left: 2%;
    padding-right: 5%;
    font-family: 'Open Sans', sans-serif;
    text-align: justify;
}

.text-content h2 {
    font-family: 'Open Sans', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

#introduction {
    display: inline-block;
    color: black;
    width: 99%;
    background-color: white;
    max-height: 500px;
    margin-top: 20px;
}

#introduction p {
    padding-right: 1%;
}

#maquinado {
    margin-left: 0.5%;
    margin-right: 0.5%;
    display: inline-block;
    color: white;
    width: 99%;
    background-color: #646F4B;
    max-height: 700px;
    margin-top: 20px;
}

#maquinado p {
    padding-bottom: 2%;
}

#maquinado h2 {
    padding-top: 2%;
    padding-left: 2%;
}

#corte_laser {
    margin-left: 0.5%;
    margin-right: 0.5%;
    display: inline-block;
    color: white;
    width: 99%;
    background-color: #1282A2;
    max-height: 700px;
    margin-top: 20px;
}

#corte_laser p {
    padding-bottom: 2%;
}

#corte_laser h2 {
    padding-top: 2%;
    padding-left: 2%;
}

#router_cnc {
    margin-left: 0.5%;
    margin-right: 0.5%;
    display: inline-block;
    color: white;
    width: 99%;
    background-color: #494368;
    max-height: 700px;
    margin-top: 20px;
}

#router_cnc p {
    padding-bottom: 2%;
}

#router_cnc h2 {
    padding-top: 2%;
    padding-left: 2%;
}

#no_ferrosos {
    margin-left: 0.5%;
    margin-right: 0.5%;
    display: inline-block;
    color: white;
    width: 99%;
    background-color: teal;
    max-height: 200px;
    margin-top: 20px;
    margin-bottom: 50px;
}

#no_ferrosos p {
    padding-bottom: 2%;
}

#no_ferrosos h2 {
    padding-top: 2%;
    padding-left: 2%;
}

.text-int {
    display: flex;
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
}

.mision {
    /* margin: 1%; */
    background-color: rgb(39, 39, 39);
    /* width: 30%; */
    /* height: auto; */
    /* text-align: center; */
}

.mision h1 {
    color: white;
    font-family: 'Do Hyeon', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

.mision p {
    color: white;
    padding-left: 3%;
    padding-right: 3%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 10;
    text-align: justify;
}

.mision h2 {
    color: white;
    font-family: 'Open Sans', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

.vision {
    /* margin: 1%; */
    background-color: rgb(188, 175, 156);
    /* width: 30%; */
    /* height: auto; */
    /* text-align: center; */
}

.vision h1 {
    color: white;
    font-family: 'Do Hyeon', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

.vision p {
    color: white;
    padding-left: 3%;
    padding-right: 3%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 10;
    text-align: justify;
}

.vision h2 {
    color: white;
    font-family: 'Open Sans', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

.valores {
    /* margin: 1%; */
    background-color: rgb(16, 126, 125);
    /* width: 30%; */
    /* height: auto; */
    /* text-align: center; */
}

.valores h1 {
    color: white;
    padding-top: 3%;
    padding-left: 3%;
}

.mision h2,
.vision h2,
.valores h2 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;

}

.valores p {
    color: white;
    padding-left: 3%;
    padding-right: 3%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 10;
    text-align: justify;
}

.valores h2 {
    color: white;
    font-family: 'Open Sans', sans-serif;
    padding-top: 3%;
    padding-left: 3%;
}

footer {
    width: 100%;
    height: 5vh;
    background-color: black;
    text-align: center;
    font-family: Poppins;
    color: white;
    position: fixed;
    bottom: 0;
}

footer a {
    color: white;
}


/*exclusive classes for contacto.html*/

#content {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 100vh;
    padding-top: 3%;
    background-image: url(/img/fachada.PNG);
    background-size: cover;

}

#content:before {
    content: "";
    width: 93%;
    height: 90%;
    padding: 4%;
    border-radius: 44px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 0;
}

#child-content {
    display: flex;
    justify-content: space-around;
    background-color: rgba(103, 117, 117, 0.5);
    width: 90%;
    height: 79%;
    margin: auto;
    border-radius: 44px;
    z-index: 100;
}

#child-content h1 {
    font-family: 'Encode Sans Condensed', sans-serif;
    font-size: 2.5rem;
}

.col-md-4 {
    padding: 30px 10px;
    width: 350px;
    background-color: transparent;
}

.col-md-4 h2 {
    font-family: 'Encode Sans Condensed Bold', sans-serif;
    font-weight: 100;
}

.col-md-4 {
    font-family: 'Do-Hyeon', sans-serif;
    text-decoration: none;
    color: black;
    font-weight: 550;
}

.whatsapp {
    font-family: 'Do-Hyeon', sans-serif;
    text-decoration: none;
    color: black;
    font-weight: 550;
}

.whatsapp:hover {
    color: #05c66e;
}

form {
    margin-top: 10px;
    width: 100%;
}

label {
    font-family: 'Encode Sans Condensed', sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.text-box {
    display: block;
    padding: 7px;
    width: 100%;
    border-radius: 8px;
    border: solid 1pt;
    font-family: 'Poppins', sans-serif;
}

form textarea {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: solid 1pt;
    font-family: 'Poppins', sans-serif;
    padding: 7px;
}

#enviar {
    margin-top: 10px;
    padding: 5px;
    display: block;
    width: 100%;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 15px;
    border-radius: 8px;
    background-color: #28464b;
    color: white;
    border: none;
    transition: 0.3s;
}

#enviar:hover {
    background-color: #1b6e77;
}

.paragraph {
    padding-top: 25px;
    color: black;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 18px;
}

iframe {
    padding-top: 15px;
    padding-right: 10px;
    width: 100%;
    height: 240px;

    ;
}


/*end of classes of contacto.html*/


/*Accordion jquery*/

#bloque--h {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bloque-hijo--h {
    width: 100%;
    height: 200px;
}

.bloque-hijo--h img {
    width: 100%;
    z-index: 1;
}

.bloque-hijo--h h1 {
    position: absolute;
    right: 3%;
    color: white;
    font-family: 'Do Hyeon', sans-serif;
    font-size: 30px;
    z-index: 1000;
}


.bloque-hijo--h:first-of-type {
    background-color: #05c66e;
}

.bloque-hijo--h:nth-of-type(2) {
    background-color: #494368;
}

.bloque-hijo--h:nth-of-type(3) {
    background-color: bisque;
}

.bloque-hijo--h:nth-of-type(4) {
    background-color: coral;
}

.bloque-hijo--h:nth-of-type(5) {
    background-color: darkgreen;
}



[class*="container-accordion--h"] {
    display: none;
}

@media only screen and (min-width: 768px) {
    #bloque--h {
        display: none;
    }

    /* For desktop: */
    .container-accordion--h {
        display: inline-flex;
        background-color: aqua;
        width: calc(100% - 180px);
        padding-left: 38px;
    }

    .acc-item {
        position: relative;
        height: 100vh;
        width: 100%;
        -webkit-box-shadow: 6px 10px 13px 7px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 6px 10px 13px 7px rgba(0, 0, 0, 0.75);
        box-shadow: 6px 10px 13px 7px rgba(0, 0, 0, 0.75);
        -webkit-transition: width 0.6s;
        transition: width 0.6s;
    }

    .acc-item .js-active-accordion {
        width: 100%;
    }

    .acc-item img {
        width: 100%;
        height: 100%;
        position: fixed;
    }

    .child--h {
        position: absolute;
        /* -ms-transform: rotate(-90deg); */
        /* IE 9 */
        /* -webkit-transform: rotate(-90deg); */
        /* Chrome, Safari, Opera*/
        transform: rotate(-90deg);
        transform-origin: bottom left;
        background-color: #28464b;
        color: white;
        bottom: 0;
        left: 0;
        /* bottom: -29px; */
        width: 100vh;
        padding-left: 50px;
        font-family: 'Do hyeon';
        font-size: 22px;
    }

}




/* .acc-item:first-of-type {
    background-color: blue;
}

.acc-item:nth-of-type(2) {
    background-color: yellow;
}

.acc-item:nth-of-type(3) {
    background-color: orange;
}

.acc-item:nth-of-type(4) {
    background-color: gray;
}

.acc-item:nth-of-type(5) {
    background-color: green;
} */




/*End of accordion */

.images-container {
    padding-right: 5%;
    padding-left: 5%;
    margin-bottom: 20%;
    width: 66%;
    text-align: center;
    height: calc(100%-5hv);
    margin: 60px auto 60px;
}

.container-enlarge {
    display: inline-block;
    position: relative;
    z-index: 0;
    margin: 15px;
}

.container-enlarge>img {
    height: auto;
    max-width: 100%;
    width: 150px;
    border-radius: 5px;
}

.container-enlarge span {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

.container-enlarge span img {
    border-radius: 10px;
}

.container-enlarge:hover span {
    top: -320px;
    left: -75px;
    width: 300px;
}

.container-enlarge a {
    display: block;
    font-family: 'PT Sans Narrow';
    font-size: 14px;
    text-decoration: none;
}


/* demo stuff */

.zoom-area {
    max-width: 390px;
    margin: 50px auto 80px;
    font-size: 19px;
    color: #999;
}

.link-container {
    text-align: center;
}


/*Div FadeIn from bottom


div {
    
    top: 50%;
    /*left: 50%; falta cierre de comentario
    /*transform: translateX(-50%) translateY(-50%); falta cierre de comentario
    
}

h1 {
    font-size: 4.3em;
    letter-spacing: -4px;
    font-weight: 700;
    color: white;
    text-align: center;
}

.cssanimation, .cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.fadeInBottom { animation-name: fadeInBottom }
@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
}
fin de código de prueba*/


.card--h {
    background-color: #1283a24d;
    padding: 20px;
    border-radius: 50px;


}