*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}
.container-fluid{
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.row{
    padding: 3% 0;
    margin: 0;
}
h2{
    width: 50%;
    border-bottom: 2px solid #f4942c;
    font-weight: 300;
}
h3{
    font-size: 2rem;
    color: white;
    line-height: 3rem;
}
h4{
    font-weight: 300; 
}
#inicio,footer{
    width: 100%;
    background-image: url(../img/bg.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
}
a{
    text-decoration: none !important;
}

/* HEADER */
header{
    position: absolute;
    overflow: hidden;
    background-color:rgba(0,0,0,0.2);
    z-index: 998;
}
nav li a{
    color: white !important;
    margin: 0px 10px;
    transition: 1s;
    border-bottom: 1px solid transparent;
}
nav li a:hover{
    border-bottom: 1px solid white;
}
.bg-light{
    background-color: transparent !important;
}
.navbar-toggler{
    border-color: #f4942c !important;
    font-size: 1.7rem;
    border: none;
}
.navbar-toggler:focus{
    border: none;
    box-shadow: none;
    outline: none;
}
.navbar-toggler:focus-visible{
    border: none;
    box-shadow: none;
    outline: none;
}
.navbar-brand{
    height: 70px;
}
.navbar-toggler-icon{
    background-image: none !important;
    color: #f4942c;
}
li.nav-item {
    display: flex;
    justify-content: center;
}
li.nav-item .nav-link{
    width: fit-content;
}
.negro{
    background-color: rgba(0,0,0,0.9);
}

/* INICIO */
.autor{
    font-size: 19px;
    font-weight: 300;
}
.caja-redes{
    z-index: 999;
    right: 0;
    bottom: 10%;
    min-width: 200px;
}

.redes{
    background-color: black;
    border-top-left-radius: 2.5em;
    border-bottom-left-radius: 2.5em;
    z-index: 999;
    padding: 6% 8%;
}

.fa-stack{
    color: white;
    transition: 0.5s;
}
.fa-stack:hover{
    color: #F99528;
}
.ico{
    color: black !important;
}

/* SOBRE MI  */
#sobre-mi{
    width: 100%;
    background-image: url(../img/bg-02.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.figcaption{
    width: 100%;
    height: 100%;
}
figure .foto {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
figure .mascara{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#sobre-mi p{
    line-height: 30px;
}

/* TECNOLOGIAS */
.skill {
    box-sizing: border-box;
    width: 100%;
    height: 20px;
    float: left;
    display: block;
    background-color: #FCD200;
    }
    .skill .skill-bar {
    background-color: #F99528;
    width: 0;
    height: 4px;
    -moz-transition: all 4s;
    -o-transition: all 4s;
    -webkit-transition: all 4s;
    transition: all 4s;
    height: 100%;
    }
    .skills .fab{
    width: 10%;
    margin-right: 3%;
    text-align: center;
    color: #290e49;
    font-size: 3em;
    }
    .skills .fas{
    color: #f4942c ;
    }


/* PORTAFOLIO */
#portafolio{
    width: 100%;
    background-image: url(../img/portafolio.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
}
.card-columns{
    padding-bottom: 27%;
}
figure{
    position: relative;
    margin: 0;
}
figure figcaption{
    position: absolute;
    z-index: 888;
    background-color: rgba(0,0,0,0.9);
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    opacity: 0;
    transition: 1s;
}
figure figcaption p{
    margin: 0;
}
figure figcaption a{
    color: #f4942c;
    transition: 1s;
    border: 1px solid transparent;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    width: fit-content;
    margin: 15px auto;
}
figure figcaption a:hover{
    color: #f4942c;
    border: 1px solid #f4942c;
    text-decoration: none;

}
.card:hover figcaption{
    opacity: 1;
}

/* CONTACTO */
#contacto{
    width: 100%;
    background-image: url(../img/contacto.jpg), url(../img/bg.jpg);
    background-repeat: no-repeat, repeat;
    background-size: 100%;
    background-position: top ,bottom;
    margin-top: -1px;  
}
input[type=text], input[type=email],textarea{
    border-radius: 0 !important;
    border: 1px solid white !important;
    background-color: transparent !important;
    color: white !important;
}
#enviar{
    width: 50%;
    background-color: white;
    color: #290e49;
    border: 0;
    margin: 0 auto; 
    font-weight: 900;
    transition: 0.5s;
}
#enviar:hover{
    background-color:#290e49;
    color: white;
}
.form-group{
    margin: 0;
}

/* FOOTER */
footer{
    margin-top: -1px !important;
}
footer hr{
    border: 1px solid #f4942c;
}

/* MEDIA QUERYS */
/* // Medium devices (tablets, 991px and up) */ 
@media (max-width: 991px) { 
    .card-columns{
        column-count: 2;
    }
    figure figcaption{
        padding: 20px 30px;
    }
    figure figcaption a{
        border-color: #f4942c;
    }
    #inicio{
        height: 90% !important;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 768px) { 
    .wf{
        display: none;
    }
    .card{
        border-radius: 10px;
        overflow: hidden;
    }
    figure{
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    figure figcaption{
        position: relative;
        z-index: 888;
        background-color: #320344;
        /* top: 0; */
        width: 100%;
        height: fit-content;
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        text-align: center;
        color: white;
        opacity: 1;
        transition: 1s;
        margin: auto 0;
        bottom: 0;
        padding-top: 20px;
    }
}
/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    #inicio{
        height: 100%;
    }
    h2{
        width: 100%;
    }
    .skills .fab{
        font-size: 2.5em;
    }
    .card-columns{
        column-count: 1;
    }
    figure figcaption p{
        font-size: 12px;
    }
    figure figcaption h4{
        font-size: 20px;
    }
    
 }