::-webkit-scrollbar{
    border-radius: 10px;
    width: .6rem;
   
}::-webkit-scrollbar-thumb{
    background-color: rgba(255, 255, 255, 0.663);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{background-color: white;}
html{scroll-behavior: smooth;}
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    box-sizing: border-box;
}
:root{
    --backgroundBodyPad: #070a15;
    --backgroundYellow: #D4D925;
    --colorAzulClaro: rgb(209, 209, 255);
    --colorDarkBlack: #241414;
    --fontSizeIconsPequeno: 27px;
    --marginRightContent: 3rem;
    --transitionPadr: 0.3s;

    --Z-index-extrem: 200;
    --Z-index-alto: 100;
    --Z-index-medio: 80;
    --Z-index-baixo: 50;

    --box-shadow-botao: 4px 4px;
    --box-shadow-botao-dafalt: translate(4px, 4px);

    --box-shadow-container-medio: 5px 5px;
}

@font-face {
    font-family: displayPixel;
    src: url(/Assets/fonts/DisplayOTF.otf);
}
body{
    background-color: var(--backgroundBodyPad);
    display: flex;
    justify-content: end;
    position: relative;
    
    
}

.displayNone{
    display: none;
}


/* ---------------------------------EXTRACONTAINER--------------------------------- */
.lineNav{
    background-color: var(--backgroundYellow);
    border-radius: 10px;
    height: 100%;
    left: 70px;
    position: absolute;
    top: 280px;
    width: 3px;
}
.fogueteGuia{
    left: 46px;
    position: absolute;
    top: 200px;
    transform: rotate(180deg);
    transition: var(--transitionPadr);
    width: 50px;
    z-index: var(--Z-index-baixo);
}
.PAGE{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100% - 130px);
}
@media (max-width: 600px){
    .PAGE{width: calc(100% - 60px);}
    .lineNav{
        left: 30px;
        width: 3px;
    }
    .fogueteGuia{
        left: 12px;
        width: 40px;
    }
}
/* ---------------------------------SECTIONHOME--------------------------------- */
.myHome{
    width: 100%;
    padding: 13% 0;
    display: flex;
    align-items: center;
    justify-content: start;
}
@media (max-width: 1400px){
    .myHome{
        height: 100vh;
    }
}
.myHome_content{
    align-items: center; 
    display: flex;
    margin-right: var(--marginRightContent);
}
.myHome_content img{
    border-radius: 50%;
    box-shadow: var(--box-shadow-container-medio) rgb(128, 128, 9);
    height: 260px;
    margin-right: 2rem;
    width: 260px;
}
.myHome_content h2{font-size: 1.3rem;}
.myHome_content h1{
    font-size: 2.6rem;
}
.myHome_content h1::after{
    animation: pisca 0.7s linear infinite;
    color: rgb(241, 241, 241);
    content: "|";
    opacity: 0;
}@keyframes pisca {
    0%, 100%{
        opacity: 0;
    }50%{
        opacity: 1;
    } 
}
.myHome_content p{
    color: var(--colorAzulClaro);
    font-size: 1.2rem;
}
.myHome_content button{
    background-color: var(--backgroundYellow);
    border-radius: 15px;
    border: none;
    box-shadow: var(--box-shadow-botao) #828621;
    color: var(--colorDarkBlack);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    margin-top: 2rem;
    padding: 5px 40px;
    transition: var(--transitionPadr);
}.myHome_content button:hover{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
.myHome_content ul i{
    align-items: center;
    background-color: rgb(209, 209, 255);
    border-radius: 50%;
    box-shadow: var(--box-shadow-botao) #7c71b5;
    color: var(--colorDarkBlack);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fontSizeIconsPequeno);
    height: 50px;
    justify-content: center;
    margin-right: 1rem;
    transition: var(--transitionPadr);
    width: 50px;
}.myHome_content ul a:hover i{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
@media (max-width: 850px){
    .myHome_content{
        flex-direction: column;
        align-items: flex-start;
    }.myHome_content img{
        margin-bottom: 1rem;
        width: 260px;
        height: 260px;
    }
}
@media (max-width: 700px){
    body{
        zoom: 1;
    }
    .myHome_content h2{
        font-size: 1.3rem;
        margin-bottom: 10px;
    } .myHome_content h1{
        font-size: 2.6rem;
        line-height: 2.3rem;
    }.myHome_content p{
        font-size: 1.3rem;
        margin-top: 7px;
    }.myHome_content button{font-size: 1.7rem;}
    
}
@media (max-width: 500px){ 
    .myHome_content h2{
        font-size: 1.1rem;
        margin-bottom: 5px;
    } .myHome_content h1{
        font-size: 2.3rem;
        line-height: 2rem;
    }.myHome_content p{
        font-size: 1rem;
        margin-top: 7px;
    }.myHome_content button{
        font-size: 1.2rem;
    }.myHome_content ul i{
        width: 40px;
        height: 40px;
        font-size: 25px;
    }.myHome_content img{
        width: 220px;
        height: 220px;
    }
}
/* ---------------------------------SECTIONTECNOLOGIAS--------------------------------- */
.Tecnologias{
    max-height: 4000px;
    padding: 0vw 0 10vw 0;
    width: 100%;
}.Tecnologias_content{margin-right: var(--marginRightContent)}
.titlesPAG{
    color:var(--backgroundYellow);
    display: inline;
    font-size: 2.6rem;
    position: relative;
    text-shadow: 3px 3px #666827;
}.titlesPAG::after{
    background-color: var(--backgroundYellow);
    box-shadow: 2px 2px rgb(125, 142, 10);
    content: "";
    height: 3px;
    margin: auto;
    position: absolute;
    right: 0;
    top: -6px;
    width: 40%;
}.titlesPAG::before{
    background-color: var(--backgroundYellow);
    bottom: -6px;
    box-shadow: 2px 2px rgb(125, 142, 10);
    content: "";
    height: 3px;
    left: 0;
    margin: auto;
    position: absolute;
    width: 40%;
}
.blocks_techs{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.3rem;
    margin-top: 2rem;
}.blocks_techs li{
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin: 0.7rem;
    padding: 8px;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    font-weight: bold;
    border: 2px solid var(--backgroundYellow);
    box-shadow: 3px 3px var(--backgroundYellow);
}
.blocks_techs li:nth-child(1){
    border: 2px solid var(--backgroundYellow);
    box-shadow: 3px 3px var(--backgroundYellow);
    color: var(--backgroundYellow);
}.blocks_techs li:nth-child(1) p{color: var(--backgroundYellow);}
.blocks_techs li:nth-child(2){
    border: 2px solid var(--colorAzulClaro);
    box-shadow: 5px 5px  var(--colorAzulClaro);
}.blocks_techs li:nth-child(2) p{color: var(--colorAzulClaro)}
.blocks_techs li:nth-child(3){
    box-shadow: 5px 5px #55d30c;
    border: 2px solid #55d30c;
}.blocks_techs li:nth-child(3) p{color: #55d30c;}
.blocks_techs li:nth-child(4){
    box-shadow: 5px 5px #f07f23;
    border: 2px solid #f07f23;
}.blocks_techs li:nth-child(4) p{color: #f07f23;}
.blocks_techs li:nth-child(5){
    box-shadow: 5px 5px #6795f1;
    border: 2px solid #6795f1;
}.blocks_techs li:nth-child(5) p{color: #6795f1;}
.blocks_techs li:nth-child(6){
    box-shadow: 5px 5px #e367c4;
    border: 2px solid #e367c4;
}.blocks_techs li:nth-child(6) p{color: #e367c4;}
.blocks_techs li:nth-child(7){
    box-shadow: 5px 5px #ff0000;
    border: 2px solid #ff0000;
}.blocks_techs li:nth-child(7) p{color: #ff0000;}
.blocks_techs li:nth-child(8){
    box-shadow: 5px 5px #524deb;
    border: 2px solid #5f38fa;
}.blocks_techs li:nth-child(8) p{color: #5f38fa;}
.blocks_techs li:hover{
    box-shadow: none;
    transform: translate(3px, 3px);
}
.translateY{
    transform: translateY(-100vh);
}
.containerInfos{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100%;
    background-color: #070a15fd;
    /* backdrop-filter: blur(8px); */
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    padding: 10% 5%;
    transition: 0.3s;
}
.containerInfos h2{
    font-size: 2rem;
    color: var(--backgroundYellow);
    margin-bottom: 1.5rem;
}.containerInfos p{
    font-size: 1.4rem;
}.containerInfos article button{
    background-color: var(--backgroundYellow);
    border: 1.5px solid var(--backgroundYellow);
    color: black;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 5px 1rem;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 20px;
}.containerInfos article button:hover{
    background-color: transparent;
    color: var(--backgroundYellow);
}

.containerInfos article a{
    font-size: 1.2rem;
    margin-left: 3rem;
    position: relative;
    padding: 5px 1rem;
    cursor: pointer;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.792);
    transition: 0.3s;

}
.containerInfos article a::before{
    content: "";
    position: absolute;
    background-color: blue;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    z-index: -1;
    transition: 0.3s;
}.containerInfos article a:hover::before{
    width: 100%;
}.containerInfos article a:hover{
    color: white;
}


.containerInfos article{
    margin-top: 2rem;
    display: flex;
    align-items: center;
}
.blockScroll{
    overflow-y: hidden;
}









.Blocos_Cenario{
    align-items: center;
    display: flex;
    margin-top: 100px;
    position: relative;
    width: 100%;
    flex-wrap: nowrap;
}
.mario{
    animation: movimentation 0.4s ease-out infinite;
    position: absolute;
    right: 23px;
    top: -66px;
    transform: rotateY(360deg);
    width: 40px;
    z-index: var(--Z-index-baixo);
}@keyframes  movimentation{
    0%, 100%{
        transform: translateY(0px);
    }50%{
        transform: translateY(10px);
    }
}
.moeda{
    width: 40px;
    position: absolute;
    top: -60px;
    right: 26px;
    z-index: var(--Z-index-baixo);
    transition: var(--transitionPadrão);
    animation: fluter 3s linear infinite;
}@keyframes fluter {
    0%, 100%{
        top: -60px;
        transform: rotateY(0deg);
    }
    50%{
        top: -80px;
        transform: rotateY(360deg);
    }
}
.block i{
    color: black;
    font-size: 50px;
}
.block{
    align-items: center;
    display: flex;
    height: 75px;
    justify-content: center;
    margin-right: 3rem;
    position: relative;
    width: 75px;
}
.block::before{
    content: "";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
    width: 15px;
}
.block::after{
    content: "";
    height: 15px;
    left: -0px;
    position: absolute;
    top: -15px;
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.5s;
    width: 100%;
}.block i{font-size: 60px;}
.color_blockHTML{
    background-color: #ff9b05;
    animation: tremer 0.4s ease-out infinite;
    z-index: 5;
}
.color_blockHTML::after{background-color: #ffd82a;}
.color_blockHTML::before{background-color: rgb(136, 139, 22);}
.color_blockCSS{
    background-color: #5991fa;
    margin-top: -1rem;
    z-index: 4;
}
.color_blockCSS::after{background-color: #a2c2fd;}
.color_blockCSS::before{background-color: #1361f3;}

.color_blockJS{
    background-color: #fced22;
    z-index: 3;
}
.color_blockJS::after{background-color: #fff56a;}
.color_blockJS::before{background-color: #b6ab0d;}
.color_blockBS{
    background-color: #e82323;
    z-index: 2;
}
.color_blockBS::after{background-color: #f76363;}
.color_blockBS::before{background-color: #b02828;}
.color_blockJQ{
    background-color: #02297e;
    margin-top: -2rem;
    z-index: 1;
}
.color_blockJQ i{color: white;}
.color_blockJQ::after{background-color: #0446d6;}
.color_blockJQ::before{background-color: #021847;}
@keyframes  tremer{
    0%, 100%{
        transform: translateY(0px);
    }50%{
        transform: translateY(20px);
    }
}
.colorBar1{background-color: #ff9b05; box-shadow: 3px 3px #835106;}
.colorBar2{background-color: #5991fa; box-shadow: 3px 3px #0a3c99;}
.colorBar3{background-color: #fced22; box-shadow: 3px 3px #958b05;}
.colorBar4{background-color: #e82323; box-shadow: 3px 3px #6a0b0b;}
.colorBar5{background-color: #02297e; box-shadow: 3px 3px #051d51;}

.colorIcon1{color: #ff9b05}
.colorIcon2{color: #5991fa}
.colorIcon3{color: #fced22}
.colorIcon4{color: #e82323}
.colorIcon5{color: #02297e}

.estatics_techs-used{
    margin-top: 5rem;
    width: 100%;
 
}
.estatics_techs-used li{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    margin-left: 1rem;
}
.estatics_techs-used li .bar_percent_module{
    width: calc(100% - 150px);
    height: 23px;
    margin-left: 1rem;

}
.estatics_techs-used li .bar_percent_module .bar_percent-tech{
    width: 23px;
    height: 100%;
    position: relative;
    transition: .3s;
}

 .boll_init-tech{
    border-radius: 50%;
}
.estatics_techs-used li .techs_name{
    width: 150px;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}.estatics_techs-used li .techs_name i{
    font-size: 2rem;
    margin-left: .5rem;

}
.estatics_techs-used h1{
    font-size: 1.9rem;
    margin-bottom: 2.4rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.867);
}

.estatics_techs-used li .percent_legend{
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    right: -2.5rem;
    font-size: 1.2rem;
}

.barTechs-total{
    margin-top: 3rem;
    max-width: 70%;
    min-width: 400px;
    display: flex;
    height: 23px;
    transition: .3s;

}

.barTechs-total div{
    height: 100%;
    position: relative;
}
.legend_tech-hover{
    position: absolute;
    width: 100px;
    top: 2rem;
    transition: 0.6s;
}



@media (max-width: 730px){
    .estatics_techs-used h1{
        font-size: 1.6rem;
    }
    .estatics_techs-used li .techs_name{
        font-size: 1.2rem;
    }
    .blocks_techs li{
        font-size: 1.3rem;
        margin: 5px;
        letter-spacing: 1px;
    }
}
@media (max-width: 700px) {
    .block{margin-right: 1rem;}
    .Tecnologias{padding: 0vw 0 30vw 0;}
}
@media (max-width: 500px){ 
    .estatics_techs-used li .percent_legend{
        right: -2rem;
    }
    .estatics_techs-used h1{
        font-size: 1.4rem;
    }
    .barTechs-total{
        min-width: 100%;
    }
    .estatics_techs-used li .techs_name{
        font-size: 1rem;
    }
    .estatics_techs-used li{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 1.2rem;
    }
    .estatics_techs-used li .bar_percent_module{
        width: 100%;
        margin-left: 0;
        margin-top: .2rem;
    }.estatics_techs-used li .techs_name i{
        display: none;
    }.estatics_techs-used li .percent_legend{
        font-size: 1rem;
    }
    .containerInfos h2{
        font-size: 1.7rem;
    }.containerInfos p{
        font-size: 1.2rem;
    }
    .titlesPAG{font-size: 2.2rem;}
    .blocks_techs li{
        font-size: 1rem;
        margin: 5px;
        padding: 7px;
    }.block{
        width: 50px;
        height: 50px;
        margin-right: 3px;
    }.block i{
        font-size: 40px;
    }.mario{
        width: 30px;
        top: -55px;
        left: 0px;
    }.moeda{
        width: 30px;
        left: 0;
    }
    @keyframes fluter {
        0%, 100%{
            top: -50px;
            transform: rotateY(0deg);
        }
        50%{
            top: -70px;
            transform: rotateY(360deg);
        }
    }
}
/* ---------------------------------SECTIONPORTIFOLIO--------------------------------- */
.Portifolio{
    width: 100%;
    max-height: 7000px;
    padding: 10vw 0 10vw 0;
}
.Portifolio_content{margin-right: var(--marginRightContent);}
.Portifolio_content ul{
    display: flex;
    margin-top: 100px;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}
.butfil{
    margin: 10px;
    font-size: 1.3rem;
    letter-spacing: 2px;
    padding: 10px;
    cursor: pointer;
    transition: var(--transitionPadr);
    font-weight: bold;
    color: #0a0928;
    text-align: center;
}.butfil:hover{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
@media (max-width: 730px){
    .butfil{margin: 10px;}
    .sonic{top: -38px;}
}
@keyframes shake {
    10%, 90% {transform: translate3d(-1px, 0, 0);}
    20%, 80% {transform: translate3d(2px, 0, 2px);}
    30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
    40%, 60% {transform: translate3d(4px, 0, 0);}
}
.tremer{
    animation: shake 0.2s linear infinite;
    position: relative;
    transition: var(--transitionPadr);
}.tremer::after{
    background-image: url(/Assets/Persons_Gif/sonic_correndo.gif);
    background-position: center;
    background-size: contain;
    content: "";
    height: 64px;
    left: 0;
    margin: auto; 
    position: absolute;
    right: 0;
    top: -58px;
    width: 64px;
}
@keyframes rodar {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.butfil:nth-child(1){
    background-color: #f7cb2d;
    box-shadow: var(--box-shadow-botao) #b38d02;
}.butfil:nth-child(2){
    background-color: #ff2247;
    box-shadow: var(--box-shadow-botao) #9a0230;
}.butfil:nth-child(3){
    background-color: #1ca2fb;
    box-shadow: var(--box-shadow-botao) #5c25c3;
}.butfil:nth-child(4){
    background-color: #66f033;
    box-shadow: var(--box-shadow-botao) #2e7f11;
}.butfil:nth-child(5){
    background-color: #ff8018;
    box-shadow: var(--box-shadow-botao) #904605;
}
.container_portfolio{
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;

    margin-top: 5rem;
    width: 100%;
    transition: all .3s;
}
.rotateArrowUp{
    transform: rotate(180deg);
}

.visibilityHiddenCont{
    overflow-y: hidden;
    height: 60vh;
}
.visibility_port{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}
.visibility_port div{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.5rem 2rem;
    border-radius: 40px;
}
.visibility_port .visibility_display{
    font-size: 1.4rem;
    text-transform: uppercase;
}.visibility_port .icon_indication{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #66f033;
    margin-left: 1rem;
    color: black;
    font-size: 1.6rem;
}
.cards_sites{
    align-items: center;
    cursor: pointer;
    display: flex;
    margin: 1rem;
    max-height: 500px;
    position: relative;
    transition: var(--transitionPadr);
    width: 400px;
}.cards_sites:hover{transform: scale(0.9);}
.cards_sites::before{
    content: "";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
    width: 15px;
}.cards_sites::after{
    content: "";
    height: 15px;
    left: -0px;
    position: absolute;
    top: -15px;
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.5s;
    width: 100%;
}
.translateY-right-box{
    transform: translateX(-2000px);
    opacity: 0
}
.translateY-left-box{
    transform: translateX(2000px);
    opacity: 0
}
.translateX-box{
    transform: scale(0);
    opacity: 0
}
.cards_sites img{width: 100%;}

.borderNetF::after{background-color: rgb(242, 26, 26);}
.borderNetF::before{background-color: rgb(146, 6, 6);}
.borderGerad::before{background-color: rgb(9, 42, 83);}
.borderGerad::after{background-color: rgb(19, 82, 159);}

.borderIMob::before{background-color: rgb(176, 182, 189);}
.borderIMob::after{background-color: rgb(229, 237, 245);}

.borderRoup::before{background-color: rgb(138, 141, 143);}
.borderRoup::after{background-color: rgb(201, 202, 204);}

.borderVelh::before{background-color: rgb(6, 46, 73);}
.borderVelh::after{background-color: rgb(9, 48, 127);}

.bordercommerce::after{background-color: rgb(245, 249, 2);}
.bordercommerce::before{background-color: rgb(163, 155, 9);}

.borderficha::after{background-color: #81a2e9;}
.borderficha::before{background-color: #384d78;}
@media (max-width: 700px) {
    .butfil{
        font-size: 1.3rem;
    }
    .tremer::after{
        width: 50px;
        height: 50px;
        top: -45px
    }
    .Portifolio{
        padding: 0 0 30vw 0;
    }
}
@media (max-width: 600px) {
    .butfil{
        margin: 3px;
        font-size: 1rem;
        
    }.Portifolio_content ul{
        margin-top: 50px;
    }
    
}






.aviso{
    position: fixed;
    top: 50vh;
    z-index: 90;
    right: 0;
    background-color: var(--backgroundYellow);
    padding: 1rem 2rem 1rem 2rem;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    box-shadow: 3px 3px rgb(124, 124, 2);
    transform: translate(100vw);
    transition: 0.3s;
}.aviso p{
    font-size: 1.3rem;
    color: black;
    font-weight: bold;
}

/* ---------------------------------POPINFOS--------------------------------- */

.display_quantityProjetos{
    margin-top: 2rem;
    font-size: 1.7rem;
    font-family: displayPixel, Arial;
}.display_quantityProjetos span{
    font-family: displayPixel, Arial;
    color: yellow;
}
.pop_project{
    position: fixed;
    right: 0;
    top: 50vh;
    background-color: white;
    max-width: calc(100vw - 100px);
    border-bottom-left-radius: 70px;
    border-top-left-radius: 70px;
    box-shadow: var(--box-shadow-container-medio) rgb(197, 171, 171);
    z-index: 99;
    transition: 0.3s;
}
.pop_proj-content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 2rem 1rem 4rem;
    position: relative;
    
}.pop_proj-content span{
    color: black;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: bold;
    background-color: rgb(248, 248, 11);
    padding: 2px 1.3rem;
}

.pop_proj-content h1{
    color: black;
    font-size: 2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.7rem;
    margin-right: 4rem;
    text-transform: uppercase;
}.pop_proj-content i{
    color: black;
    font-size: 2.4rem;
}
.pop_proj-content img{
    width: 120px;
}
.pop_proj-content article nav{
    display: flex;
    align-items: center;
}
.hiperlink-access{
    /* font-weight: bold; */
    letter-spacing: 1px;
    color: black;
    text-transform: uppercase;
    font-size: 1.3rem;
    padding: 5px 1.4rem;
    background-color: var(--backgroundYellow);
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 3px 3px rgb(224, 103, 5);
    margin-right: 1rem;
}
.accessLinkButton{
    background-color: #74c7ff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 3px 3px #0c66a2;
    cursor: pointer;
    transition: .2s;
}
.accessLinkButton i{
    font-size: 1.6rem;
}.accessLinkButton:hover, .hiperlink-access:hover{
    box-shadow: none;
    transform: translate(3px, 3px);
}
.pop_proj-content article ul{
    margin-top: 1rem;
}
.fecha_pop{
    background-color: var(--backgroundYellow);
    position: absolute;
    left: -150px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 3px 3px rgb(213, 91, 9);

}.fecha_pop i{
    color: black;
    font-size: 2.5rem;
    transition: 0.2s;
}.fecha_pop:hover i{
    transform: translate(10px);
}

@media (max-width: 700px){
    .pop_proj-content h1{
        font-size: 1.8rem;
        margin-right: 1rem;
    }.pop_proj-content article a{
        font-size: 1rem;
    }.fecha_pop{
        width: 50px;
        height: 50px;
    }.fecha_pop i{
        font-size: 1.9rem;
    }.pop_proj-content img{
        width: 110px;
    }
    
} 
@media (max-width: 490px){
    .display_quantityProjetos{
        font-size: 1rem;
    }
    .pop_project{
        max-width: 100vh;
       margin-left: 2rem;
    }
    .fecha_pop{
        left: -80px;
    }
    .pop_proj-content h1{
        font-size: 1.4rem;
    }.pop_proj-content article a{
        font-size: 0.9rem;
    }.pop_proj-content ul{
        margin-top: .2rem;
    }
    .pop_proj-content ul i{
        font-size: 1.7rem;
    }
    .pop_proj-content img{
        width: 90px;
    }.accessLinkButton{
        width: 30px;
        height: 30px;
    }.accessLinkButton i{
        font-size: 1.3rem;
    }
} */
/* ---------------------------------SECTIONCONTATO--------------------------------- */
.Contato{
    width: 100%;
    max-height: 5000px;
    padding: 10vw 0 10vh 0;
}
.Contato_content{margin-right: var(--marginRightContent);}
.cardsRedes{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 180px));
    justify-content: start;
    gap: 40px;
}
.cardRed{
    align-items: center;
    background-color: rgb(25, 17, 69);
    border-radius: 10px;
    box-shadow: var(--box-shadow-botao) rgb(33, 21, 98);
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    
}

.cardRed a{
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: white;
    color: black;
    padding: 3px 20px;
    margin-top: 1rem;
    border-radius: 10px;
    letter-spacing: 2px;
    box-shadow: var(--box-shadow-botao) rgb(162, 153, 153);
    transition: var(--transitionPadr);
}.cardRed a:hover{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
.cardRed i{font-size: 44px;}
.cardRed h3{font-size: 1.5rem;}
.bxs-envelope{
    color: red;
    filter: drop-shadow(3px 3px rgb(155, 22, 22))
}
.bxl-whatsapp{
    color: rgb(14, 244, 14);
    filter: drop-shadow(2px 2px rgb(4, 154, 4))
}
.bxl-telegram{
    color: blue;
    filter: drop-shadow(3px 3px rgb(10, 10, 134))
}
.form_content{width: 100%;}
.imputsForms{
    width: 100%;
    max-height: 4000px;
}
.form_content p{
    margin-top: 2rem;
    font-size: 1.4rem;
}
.form_content input, textarea{
    border-radius: 10px;
    border: none;
    box-shadow: var(--box-shadow-container-medio) rgb(123, 117, 117);
    color: black;
    font-size: 1.2rem;
    padding: 10px;
    transition: var(--transitionPadr);
    width: 700px;
}
.form_content input:focus, textarea:focus{
    box-shadow: none;
    outline: none;
    transform: translate(5px, 5px);
}
textarea{
    display: block;
    height: 200px;
}
#submit{
    margin-top: 2rem;
    width: 200px;
    font-size: 1.2rem;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #78a7ff;
    box-shadow: var(--box-shadow-botao) #2a67d9;
    transition: var(--transitionPadr);
}#submit:hover{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
@media (max-width: 940px) {
    .form_content input, textarea{width: 100%;}
}
@media (max-width: 800px) {
    .form_content input, textarea{
        width: 100%;
        font-size: 1.3rem;
    }
    
}@media (max-width: 700px) {
    .Contato{padding: 0vw 0 30vh 0;}
}@media (max-width: 425px) {
    
    .cardRed i{font-size: 40px;}
    .cardRed h3{font-size: 1.2rem;}
    .cardRed a{
        font-size: 1rem;
    }
    .form_content input, textarea{
        width: 90%;
        font-size: 1rem;
    }
    .cardsRedes{
        grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    }
    .form_content p{font-size: 1.3rem;}
}
/* ---------------------------------VIDEOPORT--------------------------------- */
.video_port{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #0c265e88;
    backdrop-filter: blur(20px);
    z-index: var(--Z-index-extrem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#iframe{
    width: 70%;
    height: 80%;
    box-shadow: var(--box-shadow-container-medio) rgb(77, 77, 56);
    border-radius: 30px;
}
.buttonSairIf{
    font-size: 1.5rem;
    background-color: #6af41a;
    color: black;
    text-transform: uppercase;
    padding: 8px 40px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--box-shadow-botao) #3EC70B;
    margin-bottom: 1rem;
    transition: 0.2s;
}.buttonSairIf:hover{
    box-shadow: none;
    transform: var(--box-shadow-botao-dafalt);
}
@media (max-width: 800px){
    #iframe{width: 100%;}
    .closeIframe{font-size: 40px;}
}
@media (max-width: 500px){
    #iframe{
        width: 100%;
        height: 300px;
        margin-top: 3rem;
    }
    .closeIframe{font-size: 40px;}
    .video_port{align-items: flex-start;}
    .buttonSairIf{font-size: 20px;}
}