*{
    box-sizing: border-box;
}

body{
    background-image:url("../portfolio_img/10.jpg");
    background-attachment:scroll;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Amaranth', sans-serif;
}

body::-webkit-scrollbar{
display: none;}
h1,h2,h3,h4,h5{
    font-family: 'Amaranth', sans-serif;
}

/*--Aviso que es un proyecto conceptual y ficticio--*/

.aviso_proyecto_conceptual{
font-size: 16px!important;
}

/*--BLOQUE MENU--*/

#botonmenu{
    padding:5px;
    position:fixed;
    top:20px;
    right:20px;
    cursor:pointer;
    color:  #D06505;
    font-size: 180%;
    z-index: 10;
}
#botonmenu:hover{
    color:white;
}

#menu{
    width:0%;
    height:100%;
    top: 0px;
    right: 0px;
    background-color: #a5c2d2d9;
    position: fixed;
    opacity: 1;
    text-align: center;
    transition: width 1s ease;
    z-index: 9;
}

#menu img{
    width:15%;
}
@keyframes salida {
    0%{width:0;}
    100%{width: 30%;}
}
.menuentra{
    width: -30% !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    animation: salida .1s linear 1 forwards;
}

#menu ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#menu li{
    width: 100%;
}

#menu a{
    width: 100%;
    display: block;
    line-height: 10vh;
    text-decoration: none; 
    font-size: 20px;
    color: black;
}

#menu a:hover{
 color: #CF6706;
}

.fa-house-user{
    font-size: 30px;
}

/*--BLOQUE INICIO--*/

#bloqueinicio{
    width: 100vw;
    height: 100vh;
    display: flex ;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.quiensoy{
    width: 100%;
    text-align: right;
}

.quiensoy h1{
    font-size: 3.5em;
    margin-bottom: 0px;
    text-align: center;
}

.foto{
    width: 90%;
    text-align:left;
}

.foto img{
    width: 85%; 
    transition: linear .1s;
}

.foto img:hover{
   transform: scale(1.1) ;
}


a:visited /*--Para que los enlaces no se queden morados una vez que los pinches--*/  {
    color: black;
}

/*--animacion letras diseño grafico y web--*/
  
.content /*--cambio de diseño grafico a web */ {
    display: flex;
    justify-content: center;
    font-size: 30px;
    line-height: 40px;
    color: #fee7c2;
    margin-bottom: 2%;
    margin-top: 2%;  
}

.content__container /*--se esconden las demas palabras para que solo se vea una "web o grafico" */ {
    overflow: hidden;
    height: 40px;
    padding: 0 40px;
}

.content__container__text /*--bloque texto "diseño" que esta separado del web y grafico */ {
    display: inline;
    float: left;
    margin: 0;
    font-size: 30px !important;
}

.content__container__list{
    margin-top: 0;
    padding-left: 160px;
    list-style: none;
    text-align: start;
        
    -webkit-animation-name: change;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

  
@keyframes change {
    0%, 12.66%, 100% {transform:translate3d(0,0,0);}
    16.66%, 29.32% {transform:translate3d(0,-25%,0);}
    33.32%,45.98% {transform:translate3d(0,-50%,0);}
    49.98%,62.64% {transform:translate3d(0,-75%,0);}
    66.64%,79.3% {transform:translate3d(0,-50%,0);}
    83.3%,95.96% {transform:translate3d(0,-25%,0);}
}



/*--Botón scroll BLOQUE INICIO--*/

#section10 a { /*--texto de debajo del boton "scroll"--*/
    padding-top: 60px;
    color: black;
    left: 44%;
}

#section10 a span { /*--circulo del boton--*/
    position: absolute;
    top: 0;
    left: 45%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid black;
    border-radius: 50px;
    box-sizing: border-box;
}
 
#section10 a span::before { /*--bolita que esta dentro del circulo que esta dentro del boton--*/
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: black;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
}

@keyframes sdb10 {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    80% {
      transform: translate(0, 20px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
}

.demo a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: black;
    font: normal 400 20px/1 'Montserrat', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition:    opacity 1;
    -webkit-transition:    opacity 1;
    -moz-transition:    opacity 1;
    -ms-transition:    opacity 1;
    -o-transition:    opacity 1;
    -webkit-transition: opacity .3;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

.demo a:hover {
    opacity: 0.5;
}

section {
    position: relative;
}


/*--BLOQUE FORMACIÓN--*/

#bloqueformacion{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
}

#formacion{
    display: flex;
    width: 100%;
    height: fit-content;
}



/*--Botón Curriculum BLOQUE FORMACION --*/
#botones_inicio{
    text-align: center;
    height: fit-content;
    display: block;
    margin: 0;
    padding: 0;
}

.botoncurriculum {
    display: block;
     padding: 1em 2em;
     font-size: 17px;
     background: transparent;
     border: none;
     position: relative;
     z-index: 0;
}
    
 .botoncurriculum::after,.botoncurriculum::before {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: -99999;
     transition: all .4s;
 }
    
 .botoncurriculum::before {
     transform: translate(0%, 0%);
     width: 100%;
     height: 100%;
     background: #fee7c2;
     border-radius: 50px;
 }
    
 .botoncurriculum::after {
     transform: translate(0px, 0px);
     width: 10px;
     height: 10px;
     background: #D06505;
     backdrop-filter: blur(5px);
     border-radius: 50px;
 }
    
 .botoncurriculum:hover::before {
     transform: translate(5%, 20%);
     width: 10px;
     height: 10px;
 }
    
 .botoncurriculum:hover::after {
     border-radius: 50px;
     transform: translate(0, 0);
     width: 100%;
     height: 100%;
 }
    
 .botoncurriculum:active::after {
     transition: 0s;
     transform: translate(0, 5%);
 }
 
 .botoncurriculum a{
     text-decoration: none;
     color: black;
     font-size: 18px;
 }
 

/*--BLOQUE FORMACIÓN: apartado informacion sobre mi--*/

.sobremi{
    width: 50%;
   padding: 0% 8%;
   box-sizing: border-box;
}

.sobremi h1{
    font-size: 25px;
    text-decoration: underline #CF6706 5px ;
    -webkit-text-decoration-line: underline #CF6706 5px ;
    margin: 0;
}



.sobremi p{
    font-size: 18px;
    text-align: justify;
    margin-top: 5%;
}


/*--BLOQUE FORMACIÓN: apartado grafico habilidades--*/      

.habilidades{
    width: 50%;
    padding:0% 8%;
    --lightblue: #fee7c2;
    --transition-delay: 0.3s;
    --transition-delay-step: 0.3s;
    --skills-width: 120px;
}

.habilidades h1{
  font-size: 25px;
    text-decoration: underline #CF6706 5px ;
    -webkit-text-decoration-line: underline #CF6706 5px ;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  .position-relative {
    position: relative;
  }
  

  /* CHART
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .chart-wrapper {
    width: 100%;
    max-width: 500px;
    margin-top: 2%;
  }
  
  .chart-wrapper .chart-skills li::before,
  .chart-wrapper .chart-skills li::after {
    content: "";
    position: absolute;
    top: 25%;
    left: var(--skills-width);
    height: 50%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 0;
  }
  
  .chart-wrapper .chart-skills li::after {
    width: calc(100% - var(--skills-width));
    background: rgba(211, 211, 211, 0.3);
  }
  
  .chart-wrapper .chart-skills li::before {
    width: 0;
    background: var(--lightblue);
    transition: width 0.65s ease-out;
  }
  
  .chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
    width: calc(80% - var(--skills-width));
    transition-delay: var(--transition-delay);
  }
  
  .chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
    width: calc(65% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step)
    );
  }
  
  .chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
    width: calc(80% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step) * 2
    );
  }
  
  .chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
    width: calc(70% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step) * 4
    );
  }
  
  .chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
    width: calc(70% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step) * 5
    );
  }
  .chart-wrapper.in-view .chart-skills li:nth-child(6)::before {
    width: calc(65% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step) * 6
    );
  }
  .chart-wrapper.in-view .chart-skills li:nth-child(7)::before {
    width: calc(60% - var(--skills-width));
    transition-delay: calc(
      var(--transition-delay) + var(--transition-delay-step) * 7
    );
  }


  .chart-wrapper .chart-skills span {
    display: inline-block;
    padding: 15px 0px;
  }
  
  
  .scroll-down {
    transition: all 0.5s;
    height: 0;
}
  
  .scroll-down.is-hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .scroll-down::after {
    content: "";
    display: block;
    margin: 3px auto 0;
    width: 1px;
    height: 60px;
    background: var(--black);
    transform-origin: bottom;
    animation: pulse 3.5s infinite linear; 
}


/*--BLOQUE PROYECTOS--*/

#bloqueproyectos{
    width: 100%;
    height: 100vh;
}

#bloqueproyectos h1{
    text-align: center;
}

 /*--menu proyectos--*/    
#proyectosmenu{  /*--menu proyectos: grafico, web, audiovisual--*/ 
    width:60%;
    height: 80px;
    margin: auto;
}

#proyectosmenu ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#proyectosmenu a{
    width: 33.33%;
    display: block;
    line-height: 10vh;
    text-decoration: none; 
    text-align: center;
    float: left;
    font-size: 20px;
    color: black;
    cursor: pointer;
}

#proyectosmenu a:hover{
    color: rgb(55, 55, 55);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

#proyectosgaleria{
    width: 75%;
    height: 80vh;
    margin: auto;    
}

 /*--galeria proyectos--*/ 

#proyectosgaleria a{
    width: 33.3%;
    height: 50%;
    display: none;
    float: left;
    opacity: 1;
    padding: 1%;
}

.grafico{
    display: block !important;
    text-decoration: underline orange 3px !important;
    -webkit-text-decoration-color:  orange  !important;
    -webkit-text-decoration-line: underline  !important;
    -webkit-text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
    -webkit-ubderline-offset: 5px !important;
}
#proyectosgaleria img{
    width: 100%;
    height: 100%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

#proyectosgaleria img:hover{
    opacity: 0.8 ;
    transform: scale(1.05);
}

   /*-- proyectos TODOS--*/ 

 #fondopopup {
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
    width: 100%;
    height: 100vh;
    top: 0%;
    left: 0%;
    padding: 2%;
    display: none;  
}

.x{
    color: white;
    z-index: 2;
    font-size: 30px;
    background: none;
    cursor: pointer;
    border: none;
    transition: .5s;
}
.x:hover{
    transform: scale(1.3);
}



.amongus,.spoti,.bladerunner, .newsletter, .packaging_starbucks, .revista, .cartel, .triptico, .manual_corporativo_v, .corto_cafe, .corto_delayplease, .corto_trucco{
    width: 80vw;
    height: 87vh;
    background-color: white;
    margin: auto;
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    display: none;
}

.aparece{
    display: block !important;
}
.desaparece{
    display: none !important;
}
.noscroll{
    overflow: hidden;
}


.amongus h1, .spoti h1, .bladerunner h1, .newsletter h1, .packaging_starbucks h1, .revista h1, .cartel h1, .triptico h1, .manual_corporativo_v h1, .corto_cafe h1, .corto_delayplease h1, .corto_trucco h1{
    color: black;
    font-size: 2.75em;
    margin-top: 4%;
    font-family: 'Amaranth', sans-serif;
}

.contenidoamongus, .contenidospoti, .contenidosnewsletter, .contenidosbladerunner, .contenidospackaging_starbucks, .contenido_revista, .contenido_cartel, .contenido_triptico, .contenido_manual_corporativo_v, .contenido_corto_cafe, .contenido_corto_delayplease, .contenido_corto_trucco {
    width: 90%;
    height: 70%;
    margin: auto;
    display: flex;
}

.slideramongus, .sliderspoti, .sliderbladerunner, .slidernewsletter, .sliderpackaging_starbucks,.slider_revista, .slider_cartel, .slider_triptico, .slider_manual_corporativo_v, .slider_corto_cafe, .slider_corto_delayplease, .slider_corto_trucco{
    margin-left: 0;
    width: 70%;
    margin: auto;
}
.slider_corto_cafe, .slider_corto_delayplease, .slider_corto_trucco{
    height: 100%;
}
.amongus_parrafo, .spoti_parrafo, .bladerunner_parrafo, .newsletter_parrafo, .packaging_starbucks_parrafo, .revista_parrafo, .cartel_parrafo, .triptico_parrafo, .manual_corporativo_v_parrafo, .corto_cafe_parrafo, .delayplease_parrafo, .trucco_parrafo {
    color: black;
    margin-left: 5%;
    margin-top: 1%;
    width: 30%;
    font-size: 20px !important;
    text-align: center;
}

.amongus_parrafo p, .spoti_parrafo p, .bladerunner_parrafo p, .newsletter_parrafo p .packaging_starbucks_parrafo p, .revista_parrafo p,.cartel_parrafo p, .triptico_parrafo p, .manual_corporativo_v_parrafo p, .corto_cafe_parrafo p, .delayplease_parrafo p, .trucco_parrafo p{
    font-size: 20px;
    padding: 5%;
}
.iconostools{
    text-align: center;
    padding: 5%;
    width: 100%;
}

.amongus_parrafo i, .spoti_parrafo i, .bladerunner_parrafo i, .newsletter_parrafo i {
    font-size: 30px;
    padding: 1%;
    margin-left: 3%;
}

.packaging_starbucks_parrafo img,.revista_parrafo img, .cartel_parrafo img, .triptico_parrafo img, .manual_corporativo_v_parrafo img, .corto_cafe_parrafo img, .delayplease_parrafo img, .trucco_parrafo img{
    width: 50px;  
 
}
.amongus_parrafo i:last-child {
    padding-left: 2%;
}

.amongus_parrafo h3, .spoti_parrafo h3, .bladerunner_parrafo h3, .newsletter_parrafo h3, .packaging_starbucks_parrafo h3, .revista_parrafo h3, .cartel_parrafo h3, .triptico_parrafo h3, .manual_corporativo_v_parrafo h3, .corto_cafe_parrafo h3, .delayplease_parrafo h3, .corto_parrafo h3, .trucco_parrafo h3{
    font-size: 1.5em;
    padding: 2%;
}

.amongus_parrafo_boton a, .spoti_parrafo_boton a, .bladerunner_parrafo_boton a, .newsletter_parrafo_boton a, .packaging_starbucks_parrafo_boton a, .revista_parrafo_boton a, .cartel_parrafo_boton a, .triptico_parrafo_boton a, .manual_corporativo_v_parrafo_boton a {
    margin-top: 10%;
    text-decoration: none;
    display: block;
    color: white !important;
    padding: 5%;
    text-align: center;
    font-size: 20px !important;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background-color: black;
    cursor: pointer;
}

 /*--Proyecto AMONG US--*/ 
 .amongus_parrafo_boton a:hover{
    color: black !important;
    background-color: #B0C5CD;
}

 /*--Proyecto SPOTIFY--*/ 
.spoti_parrafo_boton a:hover{
    color: black !important;
    background-color: #e7738f;
}

 /*--Proyecto BLADE RUNNER--*/ 
 .bladerunner_parrafo_boton a:hover{
    color: black !important;
    background-color: #CF6706;
}

 /*--Proyecto PACKAGING --*/ 
 .packaging_starbucks_parrafo_boton a:hover{
    color: black !important;
    background-color: #c12700;
 }

 /*--Proyecto REVISTA--*/ 
  .revista_parrafo_boton a:hover{
    color: black !important;
    background-color:  #BDB2A8;
}

 /*--Proyecto CARTEL--*/ 
 .cartel_parrafo_boton a:hover{
    color: black !important;
    background-color:  #CF6706;
}

 /*--Proyecto MANUAL DE IDENTIDAD--*/ 
 .manual_corporativo_v_parrafo_boton a:hover{
    color: black !important;
    background-color:  #76BC21;
 }

/*--Proyecto TRIPTICO--*/ 
.triptico_parrafo_boton a:hover{
    color: black !important;
    background-color:  #AF997E;
}

 .show{
     display: block !important;
 }
 /* .btn.grafico{
     text-decoration: underline orange ;
 } */
 .quitalinea{
    text-decoration: none !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.ponlinea{
    text-decoration: underline orange 3px !important;
    -webkit-text-decoration-color:  orange  !important;
    -webkit-text-decoration-line: underline  !important;
    -webkit-text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
    -webkit-ubderline-offset:5px !important;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

footer{
    width: 100%;
    position: relative;
    /* padding: 2%; */
}
#contactofooter1{
    text-align: center;
} 
#contactofooter1 i{
    font-size: 25px;
    padding: 2%;
}
#contactofooter1 i:hover{
color: #fee7c2;
}
#contactofooter{
    text-align: center;
    background: #7399aa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8vh;
}
#contactofooter p{
    color: black;
}

.rrss{
    width: 20%;
    padding: 2%;
    
}
#contactofooter p{
    padding-left: 5%;
    color: rgb(59, 59, 59);
}
#contactofooter i{
    font-size: 25px;
    padding: 2%;
}