.mbtne {
    height: 110px;
    width: 110px;
    padding: 10px;
    border: 3px solid #FFE342;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;
    background-image: linear-gradient(to top, #EA7507, #ffff00);
    box-shadow: 0 0 18px 1px #ffff00;
    color: #000;
    
}

.mbtne:hover {
    height: 110px;
    width: 110px;
    padding: 10px;
    border: 3px solid #FFE342;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;
    background-image: linear-gradient(to top, #EA7507, #ffff00);
    box-shadow: 0 0 28px 2px #ffff00;
    color: #000;
}



.mbtnd {
    height: 110px;
    width: 110px;
    padding: 10px;
    border: 3px solid #FFE342;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;
    background-image: linear-gradient(to top, #9D3C00, #EA7507);
    color: #000;
    
}

.mbtnd:hover {
    height: 110px;
    width: 110px;
    padding: 10px;
    border: 3px solid #FFE342;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;
    background-image: linear-gradient(to top, #9D3C00, #EA7507);
    box-shadow: 0 0 26px 1px #EA7507;
    color: #FFE342;
}


.imgboton {
    height: 70px;
    width: 70px;
    
} 


.circulo {
    border: #DE6C06 3px solid;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    box-shadow: 0 0 14px 1px #EA7507;
    

}
.contenedorSKILLS {
    position: relative;
    height: 90px;
    width: 110px;
  
}

.SOIMG1 {
    position: absolute;
    height: 85px;
    width: 112px;
    background:url(../IMGS/Red_Hat_logo.png);
    background-size: cover;
    clip-path: polygon(0 0, 21% 0, 21% 100%, 0 100%);
    animation: mover 12s;
} 

.SOIMG2 {
    position: absolute;
    height: 85px;
    width: 112px;
    background:url(../IMGS/Red_Hat_logo.png);
    background-size: cover;
    clip-path: polygon(20% 0%, 41% 0, 41% 100%, 20% 100%);

    animation: mover 13s;
} 


.SOIMG3 {
    position: absolute;
    height: 85px;
    width: 112px;
    background:url(../IMGS/Red_Hat_logo.png);
    background-size: cover;
    clip-path: polygon(40% 0, 61% 0, 61% 100%, 40% 99%);
    animation: mover 14s;
} 

.SOIMG4 {
    position:absolute;
    height: 85px;
    width: 112px;
    background:url(../IMGS/Red_Hat_logo.png);
    background-size: cover;
    clip-path: polygon(60% 0, 81% 0, 81% 100%, 60% 100%);
    animation: mover 15s ;
} 

.SOIMG5 {
    position:absolute;
    height: 85px;
    width: 112px;
    background:url(../IMGS/Red_Hat_logo.png);
    background-size: cover;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
    animation: mover 16s ;
} 

@keyframes mover {

    0% {transform:rotateY(200deg);background: url(../IMGS/debian.png); width: 90px;  height: 90px;
         background-size: cover;}
    20% {transform:rotateY(200deg);background: url(../IMGS/debian.png);  width: 90px;  height: 90px;
        background-size: cover;}
    100% {transform:rotateY(0);background: url(../IMGS/Red_Hat_logo.png); width: 112px;  height: 85px;
        background-size: cover;}
        
}


.CONIMG1 {
    position: absolute;
    height: 85px;
    width: 100px;
    background:url(../IMGS/dockerl.png);
    background-size: cover;
    clip-path: polygon(0 0, 21% 0, 21% 100%, 0 100%);
    animation: mov 12s;
} 

.CONIMG2 {
    position: absolute;
    height: 85px;
    width: 100px;
    background:url(../IMGS/dockerl.png);
    background-size: cover;
    clip-path: polygon(20% 0%, 41% 0, 41% 100%, 20% 100%);
    animation: mov 13s;
} 


.CONIMG3 {
    position: absolute;
    height: 85px;
    width: 100px;
    background:url(../IMGS/dockerl.png);
    background-size: cover;
    clip-path: polygon(40% 0, 61% 0, 61% 100%, 40% 99%);
    animation: mov 14s;
} 

.CONIMG4 {
    position:absolute;
    height: 85px;
    width: 100px;
    background:url(../IMGS/dockerl.png);
    background-size: cover;
    clip-path: polygon(60% 0, 81% 0, 81% 100%, 60% 100%);
    animation: mov 15s;
} 

.CONIMG5 {
    position:absolute;
    height: 85px;
    width: 100px;
    background:url(../IMGS/dockerl.png);
    background-size: cover;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
    animation: mov 16s;
} 

@keyframes mov {

    0% {transform:rotateY(200deg);background: url(../IMGS/Kub.png); width: 90px; height: 90px;
         background-size: cover;}
    20% {transform:rotateY(200deg);background: url(../IMGS/Kub.png);  width: 90px; height: 90px;
        background-size: cover;}
    100% {transform:rotateY(0);background: url(../IMGS/dockerl.png); width: 100px; height: 85px;
        background-size: cover;}
}

.DBIMG1 {
    position: absolute;
    height: 85px;
    width: 90px;
    background:url(../IMGS/postgresql.png);
    background-size: cover;
    clip-path: polygon(0 0, 21% 0, 21% 100%, 0 100%);
    animation: movdb 12s;
} 

.DBIMG2 {
    position: absolute;
    height: 85px;
    width: 90px;
    background:url(../IMGS/postgresql.png);
    background-size: cover;
    clip-path: polygon(20% 0%, 41% 0, 41% 100%, 20% 100%);
    animation: movdb 13s;
} 


.DBIMG3 {
    position: absolute;
    height: 85px;
    width: 90px;
    background:url(../IMGS/postgresql.png);
    background-size: cover;
    clip-path: polygon(40% 0, 61% 0, 61% 100%, 40% 99%);
    animation: movdb 14s;
} 

.DBIMG4 {
    position:absolute;
    height: 85px;
    width: 90px;
    background:url(../IMGS/postgresql.png);
    background-size: cover;
    clip-path: polygon(60% 0, 81% 0, 81% 100%, 60% 100%);
    animation: movdb 15s;
} 

.DBIMG5 {
    position:absolute;
    height: 85px;
    width: 90px;
    background:url(../IMGS/postgresql.png);
    background-size: cover;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
    animation: movdb 16s;
} 


@keyframes movdb {

    0% {transform:rotateY(200deg);background: url(../IMGS/mysql.png); width: 90px;  height: 90px;
         background-size: cover;}
    20% {transform:rotateY(200deg);background: url(../IMGS/mysql.png);  width: 90px;  height: 90px;
        background-size: cover;}
    100% {transform:rotateY(0);background: url(../IMGS/postgresql.png); width: 90px;  height: 85px;
        background-size: cover;}
}

.bashIMG1 {
    position: absolute;
    height: 85px;
    width: 80px;
    background:url(../IMGS/bash.png);
    background-size: cover;
    clip-path: polygon(0 0, 21% 0, 21% 100%, 0 100%);
    animation: movbash 12s;
} 

.bashIMG2 {
    position: absolute;
    height: 85px;
    width: 80px;
    background:url(../IMGS/bash.png);
    background-size: cover;
    clip-path: polygon(20% 0%, 41% 0, 41% 100%, 20% 100%);
    animation: movbash 13s;
} 


.bashIMG3 {
    position: absolute;
    height: 85px;
    width: 80px;
    background:url(../IMGS/bash.png);
    background-size: cover;
    clip-path: polygon(40% 0, 61% 0, 61% 100%, 40% 99%);
    animation: movbash 14s;
} 

.bashIMG4 {
    position:absolute;
    height: 85px;
    width: 80px;
    background:url(../IMGS/bash.png);
    background-size: cover;
    clip-path: polygon(60% 0, 81% 0, 81% 100%, 60% 100%);
    animation: movbash 15s;
} 

.bashIMG5 {
    position:absolute;
    height: 85px;
    width: 80px;
    background:url(../IMGS/bash.png);
    background-size: cover;
    clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%);
    animation: movbash 16s;
} 


@keyframes movbash {

    0% {transform:rotateY(200deg);background: url(../IMGS/pngimg.png); width: 90px;  height: 90px;
         background-size: cover;}
    20% {transform:rotateY(200deg);background: url(../IMGS/pngimg.png);  width: 90px;  height: 90px;
        background-size: cover;}
    100% {transform:rotateY(0);background: url(../IMGS/bash.png); width: 80px;  height: 85px;
        background-size: cover;}
}


.tecimgc {
    height: 90px;
    width: 90px;
} 

.ctmimg {
    height: 45px;
    width: 45px;   
    
}

.ctmimg:hover {
    height: 45px;
    width: 45px; 
    box-shadow: 0 0 26px 1px #EA7507;
}
.aboutme-p {
    padding: 5px;
    font-family: "Reddit Sans", sans-serif;
    font-style: normal;

}
.aboutme-photo-p {
    color:#F4B404 ;
    font-family: "Reddit Sans", sans-serif;
    font-size: 15px;
    
}

.contacme-p {
    font-family: "Reddit Sans", sans-serif;
    margin: 0%;
}

.aboutme-h3 {
    color: #E26F06;
    text-shadow:#F4B404 1px 4px 6px;
    font-family: "Reddit Sans", sans-serif;
    font-weight: 450;
    margin-top: 0% ;
}
.aboutme-h1 {
    color: #E26F06;
    font-family: "Reddit Sans", sans-serif;
    font-weight: 350;
    margin-bottom: 1%;
    text-shadow:#F4B404 1px 4px 6px;

}

.pdfview{
    margin: auto;
    display: block;
    width: 1100px;
    height: 500px;

}

.conteiner-modal {
    position: fixed;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    top: 0; left: 0;
    background-color: rgba(144, 148, 150, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;

}
.contenido-modal{
    width: 100%;
    height: 550px;
    padding: 10px;
    max-width: fit-content;
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
 
    position: relative;
    transition: transform 1s;
    transform: translateY(0%);
}
.modal-close {
   transform: translateY(-200%); 
}

.cerrar-modal {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
}
.openmodal{

}
.close-modal {
    background: red;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.3rem;
    border-radius: 50%;
    cursor: pointer;
    margin: 1px;
}

.closem {
    display: flex;
    justify-content: right;
}

.modalbody {
    width: 100%;
    height: 550px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.imgunder {
    width: 400px;
    height: 400px;
    background-image: url("../IMGS/unconstruccion.png");
    background-size: cover;
    background-position: center;
    
}