/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root{
    --header-height: 3rem;
    --font-medium: 500;
}

/*===== Colores =====*/
:root{
    --first-color: #787878;
    --white-color: #FAFAFF;
    --dark-color: #2A3B47;
    --text-color: #697477;
}

/*===== Fuente y tipografia =====*/
:root{
    --body-font: 'Montserrat', sans-serif;
    --big-font-size: 6.25rem;
    --medium-font-size: 3rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
}
@media screen and (min-width: 768px){
    :root{
        --big-font-size: 10.5rem;
        --h2-font-size: 2rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
    }
}

/*===== Margenes =====*/
:root{
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
}

/*===== z index =====*/
:root{
    --z-fixed: 100;
}

/*===== BASE =====*/
*,::before,::after{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
    line-height: 1.6;
}
h1,h2,p{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--text-color);
}
img{
    max-width: 100%;
    height: auto;
    display: block;
}
/*====== Loader ======*/
.preload{
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10,1);;
    z-index: 300;
    position: fixed;
    transition: opacity 0.5s ease ;

}
.preload-finish{
    opacity: 0;
    pointer-events: none;
}
.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(243, 106, 106, 0.8);
  letter-spacing: 0.2em;
}

.loader::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: rgba(243, 106, 106, 0.8);
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
}

.loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: rgba(243, 106, 106, 0.8);
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
}

.loader::before{
    top: 0;
}

.loader::after{
    bottom: 0;
}



@keyframes load {
  0% { left: 0; height: 30px; width: 15px }
  50% { height: 8px; width: 40px }
  100% { left: 235px; height: 30px; width: 15px}
}
/*======== Main CSS =======*/
.l-main{
    overflow: hidden;
    
}

/*===== CLASS CSS ===== */
.section{
    padding: 9rem 0;
}
.section-title{
    position: relative;
    font-size: var(--h2-font-size);
    color: var(--dark-color);
    margin: var(--mb-4) 0;
    text-align: center;
}
.section-title::after{
    position: absolute;
    content: "";
    width: 32px;
    height: .18rem;
    left: 0;
    right: 0;
    margin: auto;
    top: 2rem;
    background-color: var(--first-color);
}

/*===== LAYOUT =====*/
.bd-grid{
    max-width: 1024px;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
}
.l-header{
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: rgba(10, 10, 10, 0.7);
}

/*===== NAV =====*/
.nav{
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav img{
    width: 60px;
    height: 25px;
    margin-right: 3px;
    float: left;
    filter: drop-shadow(1px 1px 0.5px  rgba(248, 246, 246, 0.5)); 
}

@media screen and (max-width: 768px){
    .nav__menu{
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 60%;
        height: 60%;
        padding: 2rem;
        background-color: rgba(240,236,236,0.8);
        border-left: 1px solid rgba(243, 106, 106, 0.3);
        border-bottom: 1px solid rgba(243, 106, 106, 0.3);
        transition: .5s;
        backdrop-filter: blur(10px);
    }
}
.nav__item{
    margin-bottom: var(--mb-4);
}
.nav__link{
    position: relative;
    color: var(--dark-color);
}
.nav__link:hover{
    color: white;
    background-color: rgba(243, 106, 106, 0.8);
    border-radius: 5%;
    transition: 0.6s ease;
    filter: drop-shadow(10px 10px 15px  rgba(248, 246, 246, 0.5)); 
}

.nav__logo{
    color: var(--white-color);
}

.nav__logo:hover {
    color: rgba(255, 255, 255, 0.8);
    transition: 0.6s ease;
    filter: drop-shadow(10px 10px 15px  rgba(248, 246, 246, 0.5)); 
}
.nav__toggle{
    color: var(--white-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/*=== Show menu ===*/
.show{
    right: 0;
    
}



/*Active menu*/
.active::after{
    position: absolute;
    content: "";
    width: 100%;
    height: .18rem;
    left: 0;
    top: 2rem;
    ;
}

/*===== HOME =====*/
.home{
    position: relative;
    background-color: var(--first-color);
    overflow: hidden;
}

.pic-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
  }
  
 figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    /*animation*/
    
    animation: slideShow 24s linear infinite 0s;
    -o-animation: slideShow 24s linear infinite 0s;
    -moz-animation: slideShow 24s linear infinite 0s;
    -webkit-animation: slideShow 24s linear infinite 0s;
  }

  .pic-1 {
    opacity: 1;
    background: url(slide/s1.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-2 {
    animation-delay: 6s;
    -o-animation-delay: 6s;
    -moz--animation-delay: 6s;
    -webkit-animation-delay: 6s;
    background: url(slide/s2.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-3 {
    animation-delay: 12s;
    -o-animation-delay: 12s;
    -moz--animation-delay: 12s;
    -webkit-animation-delay: 12s;
    background: url(slide/s3.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .pic-4 {
    animation-delay: 18s;
    -o-animation-delay: 18s;
    -moz--animation-delay: 18s;
    -webkit-animation-delay: 18s;
    background: url(slide/s4.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  @keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}

@-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}

@-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}

@-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}

.home__container{
    height: calc(100vh - var(--header-height));
    row-gap: 5rem;
}
.home__title{
    max-width: 100%;
    align-self: flex-end;
    font-size: 3vw;
    color: rgba(255, 255, 255, 1);
    line-height: .8;
    left: 0;
    text-align: center;
    
}

.home__title span{
    text-shadow: 20px 10px 25px rgba(0, 0, 0, 0.5);
}
.home__scroll{
    align-self: flex-end;
    padding-bottom: var(--mb-4);
    
}
.home__scroll-link{
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    color: var(--white-color);
}
.home__img{
    max-width: 100%;
    height: auto;
    left: 0;
    
}

.home__content{
    position: relative;
    width: 70%; 
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    
}
/* ===== ABOUT =====*/
.about__container{
    justify-items: center;
    row-gap: 2rem;
    text-align: center;

}
.about__subtitle{
    font-size: var(--h2-font-size);
    color: var(--first-color);
    margin-bottom: var(--mb-1);
    text-align: center;
    line-height: initial
}
.about__text{
    margin-bottom: var(--mb-4);
    text-align: justify;
}
.about__profession{
    display: block;
    margin-bottom: var(--mb-4);
    text-align: center;
    font-size: 1vw;
    color: indianred;
    font-size: var(--h2-font-size);
}

.about__box1{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background:indianred;  
    text-align: justify; 
    top: 8px;
}

.about__box1::after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:indianred;
    z-index: -2;
    filter: blur(30px);

}
.about__box1::before,
.about__box1::after{
    background:indianred ;
}

.about__content1{
    padding: 20px;
    box-sizing: border-box;
    color: var(--white-color);
}

.about__box2{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background:indianred; 
    text-align: justify; 
    top: 30px;
    width: 100%;
}

.about__box2::after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:indianred;
    z-index: -2;
    filter: blur(30px);

}
.about__box2::before,
.about__box2::after{
    background:indianred ;
}

.about__content2{
    padding: 20px;
    box-sizing: border-box;
    color: var(--white-color);
    width: 100%;
}

.about__box3{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background:indianred; 
    text-align: justify; 
    top: 50px;
    width: 100%;
}

.about__box3::after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:indianred;
    z-index: -2;
    filter: blur(30px);

}
.about__box3::before,
.about__box3::after{
    background:indianred ;
}

.about__content3{
    padding: 20px;
    box-sizing: border-box;
    color: var(--white-color);
    width: 100%;
}

.about__box4{
    display: flex;
    position: relative;
    justify-content: initial;
    align-items: flex-start;
    text-align: initial;
    top: 110px;
    width: 100%;
}
.about__box4 img{
    width: 40%;
}
.about_box4_content{
    width: 58%;
    margin-left: 20px;
    line-height: 40px;
}

.about__box5{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background:indianred;  
    text-align: justify; 
    top: 170px;
    width: 100%;
}

.about__box5::after{
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:indianred;
    z-index: -2;
    filter: blur(30px);

}
.about__box5::before,
.about__box5::after{
    background:indianred ;
}

.about__content5{
    padding: 20px;
    box-sizing: border-box;
    color: var(--white-color);
    width: 100%;
}

.about__box6{
    display: flex;
    position: relative;
    justify-content: initial;
    align-items: flex-start;
    text-align: initial;
    top: 250px;
    width: 100%;
}
.about__box6 img{
    width: 40%;
}
.about_box6_content{
    width: 58%;
    margin-right: 20px;
    line-height: 30px;
}
.about_box6_content h2{
    margin-top: 20px;
}
.about_box6_content p{
    margin-top: 10px;
}
/* ===== SKILLS =====*/
.skills__container{
    row-gap: 2rem;
}
.skills__subtitle{
    color: var(--first-color);
    margin-bottom: var(--mb-3);
}
.skills__box1 {
        --borderWidth: 3px;
        background:white;
        color: white;
        position: relative;
        border-radius: var(--borderWidth);
      }
      .skills__box1:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #787878, #787878, #3d3a3b, #787878, #787878, #434948, #787878, #787878);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
      }
    .skills_box1_content h2{
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        text-align: center;
    }
    .skills_box1_content p{
        line-height: 30px;
        margin-left: 10px;
        margin-bottom: 20px;
    }
       .skills__box2 {
        --borderWidth: 3px;
        background:white;
        color: white;
        position: relative;
        border-radius: var(--borderWidth);
      }
      .skills__box2:after {
        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #787878, #787878, #3d3a3b, #787878, #787878, #434948, #787878, #787878);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
      }
    
    .skills_box2_content h2{
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 20px;
        text-align: center;
    }
    .skills_box2_content p{
        line-height: 30px;
        margin-left: 10px;
        margin-bottom: 20px;
    }
      @keyframes animatedgradient {
          0% {
              background-position: 0% 50%;
          }
          50% {
              background-position: 100% 50%;
          }
          100% {
              background-position: 0% 50%;
          }
      }

/* ===== PORTFOLIO =====*/
.portfolio{
    background-color: var(--white-color);
}
.portfolio__container{
    justify-items: center;
    row-gap: 2rem;
}
.brandslide1{
    margin-top: 50px;  
}
.brandslide1 img{
    filter: grayscale(1) opacity(.5);
}
.brandslide1 img:hover{
    filter: grayscale(0) opacity(1);
}
.brandslide2{
    margin-top: 50px;
}

.brandslide2 img{
    filter: grayscale(1) opacity(.5);
}
.brandslide2 img:hover{
    filter: grayscale(0) opacity(1);
}

.brandslide3{
    margin-top: 50px;
}

.brandslide3 img{
    filter: grayscale(1) opacity(.5);
}
.brandslide3 img:hover{
    filter: grayscale(0) opacity(1);
}
/* ===== CONTACT =====*/
.contact__container{
    row-gap: 2rem;
}
.contact__subtitle{
    font-size: var(--normal-font-size);
    color: var(--first-color);
}
.contact__text{
    display: inline-block;
    margin-bottom: var(--mb-2);
}
.contact__inputs{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}
.contact__input{
    width: 100%;
    padding: .8rem;
    outline: none;
    border: 1.5px solid var(--dark-color);
    font-size: var(--normal-font-size);
    margin-bottom: var(--mb-4);
    border-radius: .5rem;
}
.contact__button{
    display: block;
    background-color: var(--first-color);
    color: var(--white-color);
    padding: .75rem 2.5rem;
    margin-left: auto;
    border-radius: .5rem;
    border: none;
    outline: none;
    font-size: var(--normal-font-size);
    cursor: pointer;
}

/* ===== FOOTER=====*/
.footer{
    background-color: rgba(10, 10, 10, 0.7);
}
.footer__container{
    row-gap: 2rem;
}
.footer__title{
    font-size: var(--normal-font-size);
    color: var(--white-color);
    margin-bottom: var(--mb-2);
}
.footer__text{
    color: white;
}
.footer__data a{
    color: white;
}
.footer__link{
    padding: .25rem 0;
}

.footer__link:hover{
    color: var(--first-color);
}
.footer__social{
    font-size: 1.4rem;
    margin-right: var(--mb-1);
}
.footer__social:hover{
    color: var(--first-color);
}

/* ===== MEDIA QUERIES =====*/
@media screen and (min-width: 768px){
    body{
        margin: 0;
    }
    .section{
        padding-top: 4rem;
    }
    .section-title{
        margin-bottom: 3rem;
    }
    .section-title::after{
        width: 64px;
        top: 3rem;
    }

    .nav{
        height: calc(var(--header-height) + 1rem);
    }
    .nav__list{
        display: flex;
    }
    .nav__item{
        margin-left: var(--mb-4);
        margin-bottom: 0;
    }
    .nav__toggle{
        display: none;
    }
    .nav__link{
        color: var(--white-color);
    }
    .nav__link:hover{
        color: var(--white-color);
    }
   

    .home__container{
        height: 100vh;
        /*grid-template-rows: 1.7fr 1fr;*/
        row-gap: 0;
    }
 
    .about__container{
        width: 100%;
        /*grid-template-columns: repeat(2, 1fr);*/
        align-items: center;
        text-align: initial;
        padding: 4rem 0;
    }
        
    .skills__container{
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .contact__container{
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
    .contact__form{
        width: 380px;
    }

    .footer__container{
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

@media screen and (min-width: 1024px){
    .bd-grid{
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 768px){

    .about__box4{
        display: block;
        position: relative;
        justify-content: center;
        align-items: flex-start;
        text-align: initial;
        top: 80px;
        width: 100%;
    }
    .about__box4 img{
        width: 100%;
        
    }
    .about_box4_content{
        width: 100%;
        line-height: 30px;
        margin-top: 30px;
        margin-left: 0;
    
    }
    .about_box4_content h2{
        margin-bottom: 10px;
        text-align: center;
    }
    .about__content5 h1{
        text-align: center;
    }
        
    .about__box6{
        display: block;
        position: relative;
        justify-content: center;
        align-items: flex-start;
        text-align: initial;
        top: 200px;
        width: 100%;
    }
    .about__box6 img{
        width: 100%;
    }
    .about_box6_content{
        width: 100%;
        line-height: 20px;
        margin-top: 20px;
    }
    
        
}

@media screen and (max-width: 420px){
    .about__subtitle {
        font-size: 5vw;
    }

    .about__profession{
        font-size: 5vw;
        text-align: justify;
    }
    
}

@media screen and (max-width: 360px){
    .contact__text{
        font-size: small;
    }
}