*{
    padding:0 0;
    margin:0px auto;
    /*fuentes:
    font-family: 'Patua One', cursive;
    font-family: 'Bitter', serif;
    font-family: 'Righteous', cursive;
    font-family: 'Pacifico', cursive;
*/
    font-family: 'IBM Plex Serif', serif !important;
    font-family: 'Roboto Slab', serif !important;
    list-style: square !important;
}

html{
    scroll-behavior: smooth;
}

/********background me*/

.background-me{
    background-image:url('../images/code.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#carga{
    position:absolute;
    width:200px;
    height:200px;
}

.menu{
    width:100%;
    height:auto;
    box-sizing:border-box;
    /*background:#0D9ED0;*/
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    visibility: visible;
}

.menu a{   
    color:#ffffff;
    width:120px;
    transition: ease-in-out 0.5s;
    text-transform: uppercase;
    display:block;
    text-align: center;
}

.pegajoso{
    position:sticky;
    top:0px;
    z-index:80;
}

.menu a:hover, .menu a:active{
    color:#ff3b92;

}

#toggle-menu{
    display:none;
    float:left;
}

#mini-toggle{
    visibility:hidden;
}

.in-data {
    max-width:400px;
    margin:0px auto;
    padding:110px 50px;
    position:relative;
    text-align: center;
    color:#FFFFFF;
}

.in-data img{
    width:150px;
    height:150px;
    border-radius: 100%;
    background-size:contain;
    display:block;
    margin:0px auto;
}

.developer-text{
    width:100%;
    margin:50px auto;
    padding: 12px 34px;
    border:solid #FFFFFF 2px;

    
}

.my-name{
    margin-top:30px;
    margin-bottom:10px;
    font-family: 'Roboto Slab', serif;
    font-size:26px;
}

.technologi{
    font-family: 'IBM Plex Serif', serif;
}

.talk{
    width: 120px;
    height: 40px;
    border-radius: 10px;
    background-color: #0D9ED0;
    color: white;
    font-size: 14px;
    font-style: italic;
    border:solid #00688c 1px;
    transition:ease-out 0.4s;
}

.talk:hover {
    background:#25c6fd;
}

/**************seccion 2 */

.out-body2{
    position: relative;
    display: block;
}

.body2{
    max-width: 100%;
    /*left: 100%;*/
    position: relative;
    /*animation-name: body2;*/
    /*animation-iteration-count: 2;*/
    animation-duration: 4s;
}

@keyframes body2{
    from{
         left: 100%;
    }to{
        left: 100%; 
    }
}

.body2 h3{
    font-family: 'IBM Plex Serif', serif;
    text-align: center;
    color:#0D9ED0;
}

.contenedor-body2{
    max-width:1280px;
}

.img-body2 img{
    max-height:441px;
}

.parrafos-body2{
    padding:10px;
    font-family: 'Roboto Slab', serif;
}

/*********body3*/

.body3{
    max-width:100%;
    background:black;
    position:relative;
    z-index: 0;
    padding-top: 38px;
    margin-top: 70px;
    
}

.body3-in{
    max-width: 1280px;
    margin:0 auto;
    padding:0 0;
}

.body3 h3 {
    width:100%;
    text-align: center;
    color: #0D9ED0;
}

.body3-in .box-body3{
    
    min-width: 300px;
    padding:10px 10px 10px 10px;
}

.box-body3-in img{
    /*filter:blur(2px);*/
    transition: ease-out 0.5s;
    display: inline-block;
}

.box-body3-in img:hover{
    filter:blur(2px);
    
}

.box-body3-in h6{
    position: relative;
    color: white;
    display: inline-block;
    bottom: 18px;
    left: 10px;
    font-size: 20px;
}
.box-body3-in p{
    color: #FFFFFF;
    float: right;
    position: relative;
    margin-top: 18px;
}
/**************Icons and bar programs*****************************/
.bar1{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #77c9f7;
}

.bar1 span{
    height:4px;
    float: left;
    background:#77c9f7;
}

.photoshop{
    width:90%;
    animation: photoshop 8s;
}

@keyframes photoshop{
    0%{
        width:0%;
    }
    100%{
        width:90%;
    }
}

.bar2{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #afd4ea;
}

.bar2 span{
    height:4px;
    float: left;
    background:#afd4ea;
}

.lightroom{
    width:82%;
    animation: lightroom 6S;
}

@keyframes lightroom{
    0%{
        width:0%;
    }
    100%{
        width:82%;
    }
}

.bar3{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #eeb830;
}

.bar3 span{
    height:4px;
    float: left;
    background: #eeb830;
}

.brigh{
    width:84%;
    animation: brigh 6S;
}

@keyframes brigh{
    0%{
        width:0%;
    }
    100%{
        width:84%;
    }
}

.bar4{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #e68630;
}

.bar4 span{
    height:4px;
    float: left;
    background:#e68630;
}

.ilsutrator{
    width:92%;
    animation: ilsutrator 6S;
}

@keyframes ilsutrator{
    0%{
        width:0%;
    }
    100%{
        width:92%;
    }
}

.bar5{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #ff3b92;
}

.bar5 span{
    height:4px;
    float: left;
    background:#ff3b92;
}

.indesign{
    width:88%;
    animation: indesign 6S;
}

@keyframes indesign{
    0%{
        width:0%;
    }
    100%{
        width:88%;
    }
}

.bar6{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #ffd300;
}

.bar6 span{
    height:4px;
    float: left;
    background:#ffd300;
}

.fireworks{
    width:94%;
    animation: fireworks 6S;
}

@keyframes fireworks{
    0%{
        width:0%;
    }
    100%{
        width:94%;
    }
}

.bar7{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #c1e700;
}

.bar7 span{
    height:4px;
    float: left;
    background:#c1e700;
}

.muse{
    width:80%;
    animation: muse 6S;
}

@keyframes muse{
    0%{
        width:0%;
    }
    100%{
        width:80%;
    }
}

.bar8{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #de70f9;
}

.bar8 span{
    height:4px;
    float: left;
    background:#de70f9;
}

.premierpro{
    width:84%;
    animation: premierpro 6S;
}

@keyframes premierpro{
    0%{
        width:0%;
    }
    100%{
        width:84%;
    }
}

.bar9{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #c790ff;
}

.bar9 span{
    height:4px;
    float: left;
    background:#c790ff;
}

.aftereffects{
    width:64%;
    animation: aftereffects 6S;
}

@keyframes aftereffects{
    0%{
        width:0%;
    }
    100%{
        width:64%;
    }
}

.bar10{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #b3aae0;
}

.bar10 span{
    height:4px;
    float: left;
    background:#b3aae0;
}

.encoder{
    width:90%;
    animation: encoder 6S;
}

@keyframes encoder{
    0%{
        width:0%;
    }
    100%{
        width:90%;
    }
}

.bar11{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #00e4bb;
}

.bar11 span{
    height:4px;
    float: left;
    background:#00e4bb;
}

.audition{
    width:80%;
    animation: audition 6S;
}

@keyframes audition{
    0%{
        width:0%;
    }
    100%{
        width:80%;
    }
}

.bar12{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #FFFFFF;
}

.bar12 span{
    height:4px;
    float: left;
    background:#FFFFFF;
}

.ableton{
    width:76%;
    animation: ableton 6S;
}

@keyframes ableton{
    0%{
        width:0%;
    }
    100%{
        width:76%;
    }
}

.bar13{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #00eaea;
}

.bar13 span{
    height:4px;
    float: left;
    background:#00eaea;
}

.maya{
    width:64%;
    animation: maya 6S;
}

@keyframes maya{
    0%{
        width:0%;
    }
    100%{
        width:64%;
    }
}

.bar14{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #FD2DCA;
}

.bar14 span{
    height:4px;
    float: left;
    background:#FD2DCA;
}

.xd{
    width:80%;
    animation: xd 6S;
}

@keyframes xd{
    0%{
        width:0%;
    }
    100%{
        width:80%;
    }
}

.bar15{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #00e498;
}

.bar15 span{
    height:4px;
    float: left;
    background:#00e498;
}

.dimension{
    width:90%;
    animation: xd 6S;
}

@keyframes xd{
    0%{
        width:0%;
    }
    100%{
        width:80%;
    }
}

.bar16{
    background:#353b48;
    display:block;
    height:4px;
    border:1px solid rgba(0,0,0,0,3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #ffe600;
}

.bar16 span{
    height:4px;
    float: left;
    background:#ffe600;
}

.spark{
    width:90%;
    animation: xd 6S;
}

@keyframes xd{
    0%{
        width:0%;
    }
    100%{
        width:90%;
    }
}

.bar-in-1{
    width:50px;
    height:50px;
    border-radius:100%;
    float: left;
    border:solid 1px red;
}

.new{
    width:50%;
    height:50%;
    animation: new 4s;
}

@keyframes new{
    0%{
        width:0px;
    }
    100%{
        width:60px;
    }
}

.content-body3-other{
    display:block;
}

.box-body3-other{

}

.box-body3-other-in{
    position:relative;
    width:100%;
    height:200px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:black;
    color:white;
    margin-top:16px;
}

.box-body3-other-in:before{
    content: '';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:#ffffff;
    z-index: -1;
}

.box-body3-other-in:after{
    content: '';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:#ffffff;
    z-index:-2;
    filter: blur(40px);
}

.box-body3-other-in:before,.box-body3-other-in:after{
    background:linear-gradient(235deg, #89ff00, #060c21, #00bcd4)
}

.box-body3-other-in-in{

}

/*********************MATERIALIZE CLASS*/

.parallax-container{
    height: 100vh;
    display:flex;
    align-items: center;
  }

  .parallax-items{

  }

  /***********************Body 4 Portafolio*******/
.title-experience{
    color:black;
    font-size: 20px;
}

.briefcase{

}

/***********************slider testimonials*/

.testimonials{
    display:block;
    padding-top: 50px;
}

.slider-contenedor-out{
    width:90%;
    height:400px;
    overflow:hidden;
    margin:auto;
    text-align: center;
    border-bottom: solid rgba(11, 7, 8, 0.1);
    margin-bottom:60px;
 
    
}

.slider-contenedor{
    display:flex;
    height:100%;
    width:100%;
    align-items:center;

}

.slider-test{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    width:100%;
    height:100%;
    flex-shrink: 0;
    align-items: center;

}
    /***********************Body 5 contactos***

.body5{
   min-width:100%;
   text-align: center;
}
****/
.body5 h3{
    font-family: 'IBM Plex Serif', serif;
    text-align: center;
    color:#0D9ED0;
}

.form{
    width:80%;
    margin:0px auto;
}

footer{
    height:70px;
    background:#1c1c1c !important;
    padding:0px;
}

.footer-copyright{
    margin-top:70px;
}

footer .row{
    margin-bottom: 0px;
}

.page-footer{
    padding-top: 0px;
}

.footer-left{
    text-align: left;
}

.footer-right{
    text-align: right;
}

.footer-right a{
    color:#ffffff;
}

.footer-right a:hover{
    color:#0D9ED0;
}

.card-content p{
    text-align: justify;
}





/*******Menu dispositivo**************************/
.menu-dispositivo{
    width:100vw;
    height:100vh;
    z-index: 10;
    position:fixed;
    background: #00B4DB;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/**************Boton up*******************/
.up-buttom{
    visibility: hidden;
    max-width: 70px;
    max-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position:fixed;
    bottom:100px;
    right:50px;
    z-index: 95;  
    cursor:pointer;
    transition: all 300ms ease; 
}

.up-buttom:hover{
    transform:scale(1.1);  
}

.up-buttom img:hover{
    border-color:rgba(0,0,0,0.1);
}

/**********Scrolll*****/
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-corner{
    background:blue;
}

::-webkit-scrollbar-thumb{
    background:#0D9ED0;
    height:80px;
}

/****************************@Media Queries******************************/

@media screen and (max-width: 768px){
    /***********Menu****/
    .menu {
        width: 0px;
        height: 0px;
        align-items: center;
        background: #00B4DB;  /* fallback for old browsers */
        visibility: hidden;
        z-index: 96;
        animation-duration: 2s;
    }

    @keyframes mini-menu{
        from{
            
            clip-path:circle(0% at 0 0);
        }to{
            clip-path:circle(140% at 0 0);
        }
    }
    
    @keyframes mini-menu-off{
        from{
            clip-path:circle(140% at 0 0);
            
        }to{
            clip-path:circle(0% at 0 0);
        }
    }

    .menu a{
        padding:10px 0px;
        width:100%;
    }
    /*OTHER MENU***************************/
    .menu-cell1, .menu-cell2, .menu-cell3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
      }
      
      .change .menu-cell1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
      }
      
      .change .menu-cell2 {opacity: 0;}
      
      .change .menu-cell3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
      }

    /*****************************/
    #mini-toggle{        
        visibility:visible;
        position:sticky;
        top:20px;
        z-index:99;        
    }

    /**********formulario*******/
    .form{
        width:100%;
    }

    /**************Pie pagina**********/
    .footer-left{
        display:none;
    }

    /*********Boton up*****/
    .up-buttom{
        right:10px;
        bottom:30px;
    }



}/*Finaliza queries*/