@charset "UTF-8"; /*LENGUAJE DE ESTILOS DEL SITIO*/

/*GENERAL*/
.classIcon{display:flex; align-items:center; justify-content:center; font-family:softicon;}
.textMin{font-size: 0.5em; letter-spacing: 5px; padding:0px 20px; color: var(--color-white);}
.separator{width: 70px; height: 3px; background-color: var(--color-sec);}

.sectionPadding{ padding:3% 13% 0% 13%; width: 74%;}
.sectionMargin{ margin: 7% 13% 0% 13%; }
.sectionMarginSimple{ margin: 7% 0% 0% 0%; }
.sectionMarginInvested{ margin: 0% 13% 0% 13%; width: 74%;}
.sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 5% 13% 0% 13%; }

/*PAGINA PRINCIPAL ------------------------------------------------------------------------------------------------------------------------------*/
    .mainHead{position: relative; overflow:hidden; height: 85%;}

        .mainLogo{ position: absolute; top:5%; right: 13%; }
        .mainConten{position: absolute; top:30%; right: 13%; overflow:hidden; text-align: right;}
            .MainTitle{ color: var(--color-black); }
            .MainDescription{font-family: bold; color: var(--color-black); opacity: 0.5; padding: 10px 0px 30px 0px; width: 100%;}
            .MainButton{font-family: bold; font-size: 0.9em; padding: 15px 30px; border-radius: 30px; border: solid 2px var(--color-black); background-color: var(--color-black); color: var(--color-white); transition:0.2s Ease-in-out; cursor: pointer;}
            .MainButton:hover{background-color: transparent; color: var(--color-black); }

    .mainWhoIs{text-align: center;}
        .mainWhoIsDesc{color: var(--color-black); opacity: 0.5; padding: 30px 20% 0px 20%; width: 60%;}

    .mainHowtoUse{background-color: #d7e0ed; text-align: center; padding-bottom: 5%;}
        .mainHtuCard{background-color: var(--color-white); width: 30%; height: 550px; border-radius: 10px;
            box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25);
             }

        .mainFooter{ display: block; background-color: var(--color-black); position: absolute; bottom: 0px; width: 100%;}
            .mainFooterPanel{background-color: var(--color-white); color: var(--color-lihgt); border-radius: 0px 0px 10px 10px; padding: 20px 5%; font-size: 0.7em;}
            .mainFooterInfo{padding: 10px 5%; text-align: center; color: var(--color-white); font-size: 0.8em; opacity: 0.3; width: 90%;}
            .mainFooterInfo a{color: var(--color-white);}

    /*para medidas tableta*/
    @media only screen and (max-width : 898px){ 
        .mainHead{height: 95%;}
            .mainConten{top:60%;}
                .MainTitle{ font-size: 0.7em; }
        
            .mainWhoIsDesc{padding: 30px 10% 30px 10%; width: 80%;}
        }

    /*para dispositivos moviles*/    
    @media only screen and (max-width : 539px){
        
        }

/*PÁGINA DE PERFILES--------------------------------------------------------------------------------------------------------------------------*/
    /*PAGINA PRINCIPAL*/
    .profileHead{width: 100%; height: 80%; overflow: hidden; position: relative; background-color: var(--color-black);        
        /*background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(51,51,51,1) 100%);*/
        }
        .profileShadownImg{ height: 100%; width: 100%; position: absolute;
            background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 30%);}
        
        .profileInf{position: absolute; bottom: 5%; width: 90%; height: 20%; padding: 0% 5%; color: var(--color-white);}
            .profileInf img{height: auto; width: auto;}
            
        /*SVG Curve*/
        #curve{position: absolute; bottom: -1px; width: 100%;}
        #curve path{ fill: var(--color-white);}


    /* POR SI YA NO ES VIGEMTE EÑ ÉRFIL*/
    .profilevalidity{position:fixed; height:100%; width: 100%; right: 0%; overflow:hidden; z-index: 99; color: var(--color-white);
                    background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 100%);}
        .profilevalidityMsg{font-family: light; font-size: 3em; text-align: center;}
        .profilevalidityName{padding: 10px 0px 50px 0px; opacity: 0.5; font-size: 0.7em;}

        .profilevalidity img{opacity: 0.5; cursor: pointer; transition:0.2s Ease-in-out;}
        .profilevalidity img:hover{opacity: 1;}

    /*INFORMACIÓN DEL PERFIL*/
    .profileInformation{text-align: center; color: var(--color-black); padding: 0% 5%; position: relative;}

        .profilePrevBto, .profileNextBto{position: absolute; width: 40px; height: 40px; top: 70%; color: var(--color-white); background-color: var(--color-black); opacity: 0.2; transition:0.2s Ease-in-out;}
        .profilePrevBto:hover, .profileNextBto:hover {opacity: 1;}
        .profilePrevBto{left: 0px; border-radius: 0px 20px 20px 0px;}
        .profileNextBto{right: 0px; border-radius: 20px 0px 0px 20px;}

        .pinfoName{padding-top: 20px;}
        .pinfoName, .pinfoSecondName{ font-family: bold; font-size: 1.5em;}
        .pinfoPosition{font-family: bold; font-size: 0.5em; opacity: 0.3; padding: 5px 0px 30px 0px;}
        .pinfoDescription{font-size: 0.9em; opacity: 0.6; padding-bottom: 20px; line-height: 1.3;}
        
        .pinfViews{padding: 30px 0px;}
            .pinfColumn{width: 30%;}
            .pinfDescr{font-family: bold; font-size:0.6em; opacity: 0.3;}
            .pinfValue{font-size: 1.1em; font-family: bold; padding-top: 5px;}

            .profileBtoSM{padding: 10px; width: 25px; height: 25px; margin: 10px 10px 0px 0px; border-radius: 40px; color:var(--color-white); background-color: var(--color-black); font-size: 1.3em; opacity: 0.15; cursor: pointer; transition:0.2s Ease-in-out;}
                .profileBtoSM:last-child{margin: 10px 0px 0px 0px; }
            /*REDES SOCIALES ----------------------------------------**/
            ._facebook{color:var(--color-white); letter-spacing: 10px; font-size: 1.7em;}
            ._twitter{color:var(--color-white);}
            ._instagram{color:var(--color-white); letter-spacing: 3px; font-size: 1.7em;}
            ._youtube{color:var(--color-white);}
            ._whatsapp{color:var(--color-white);}
            ._telefono{color:var(--color-white);}
            ._mail{color:var(--color-white);}

            ._facebook:hover{opacity:1; color:var(--color-white); background-color:var(--color-facebook);}
            ._twitter:hover{opacity:1; color:var(--color-white); background-color:var(--color-twitter);}
            ._instagram:hover{opacity:1; color:var(--color-white); background-color:var(--color-instagram);}
            ._youtube:hover{opacity:1; color:var(--color-white); background-color:var(--color-youtube);}
            ._whatsapp:hover{opacity:1; color:var(--color-white); background-color:var(--color-whatsapp);}
            ._telefono:hover{opacity:1; color:var(--color-white); background-color:var(--color-whatsapp);}
            ._mail:hover{opacity:1; color:var(--color-white); background-color:var(--color-mail);}
            /*----------------------------------------**/

            .profInfMore{font-size: 2em; cursor: pointer; animation-name: moreInformation; animation-duration: 0.5s; animation-iteration-count: infinite;}
                @keyframes moreInformation {
                    0%   {padding: 0px 0px 10px 0px; opacity: 0;}
                    /*50%  {padding-top: 10px;}*/
                    100% {padding: 10px 0px 0px 0px; opacity: 1;}
                    }

    /*PERFIL ELEMENTOS ADICIONALES -----------------------------------------------------------------------------------------------------------*/
    .sourceMenssaje{padding:5% 5%;}
        .pQuote{position: absolute; font-size: 5em; opacity: 0.2;}
        .pMenssaje{font-family:'Times New Roman', Times, serif; font-size: 2em; padding-top: 20px; font-style: oblique;}
        .pFirma{font-family: regular; font-size: 0.8em; padding-top: 20px;}

    .sourceImagen{padding-top: 5% 0%;}

    .sourceVideo{margin: 5% 0%; width: auto; height: auto; padding: 0 auto; background-color: var(--color-black);}
    
    
    /*---------------------------------------------------------------------------------------------------------------------------------------*/

    /* SECTION ALL SOCIAL MEDIA*/
    .SectionAllMedia{padding: 30px 5%;}
        .btoElements{margin: 20px; cursor: pointer;}
            .btoMedia{width: 70px; height: 70px; font-size: 2.3em; background-color:var(--color-lihgt); color: var(--color-white); border-radius: 30px;}
            .btoName{ font-family: bold; font-size: 0.9em; padding-top: 10px; opacity: 0.5;}


            .sfacebook{ background-color:var(--color-black); transition:0.2s Ease-in-out; letter-spacing: 12px;}
            .syoutube{  background-color:var(--color-black); transition:0.2s Ease-in-out;}
            .stwitter{  background-color:var(--color-black); transition:0.2s Ease-in-out;}
            .sinstagram{background-color:var(--color-black); transition:0.2s Ease-in-out; letter-spacing: 5px;}
            .swhatsapp{ background-color:var(--color-black); transition:0.2s Ease-in-out; letter-spacing: 5px;}
            .stelefono{ background-color:var(--color-black); transition:0.2s Ease-in-out; letter-spacing: 5px;}
            .smail{     background-color:var(--color-black); transition:0.2s Ease-in-out; letter-spacing: 5px;}

            .sfacebook:hover{ background-color:var(--color-facebook); color: var(--color-white); box-shadow: 0px 0px 15px 0px rgba(59,89,152,0.5);}
            .syoutube:hover{  background-color:var(--color-youtube); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(230,33,23,0.5);}
            .stwitter:hover{  background-color:var(--color-twitter); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(0,172,238,0.5);}
            .sinstagram:hover{background-color:var(--color-instagram); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(221,42,123,0.5);}
            .swhatsapp:hover{ background-color:var(--color-whatsapp); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(37,211,102,0.5);}
            .stelefono:hover{ background-color:var(--color-whatsapp); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(37,211,102,0.5);}
            .smail:hover{     background-color:var(--color-mail); color: var(--color-white); box-shadow: 0px 0px 10px 0px rgba(0,172,238,0.5);}

        .btoLinksGenerals{background-color: var(--color-black); color: var(--color-white); padding: 15px 0px; margin-bottom: 20px; width: 100%; text-align: center; border-radius: 5px; border: 2px solid var(--color-black); cursor: pointer; transition:0.2s Ease-in-out;}
        .btoLinksGenerals:hover {background-color: var(--color-white); color: var(--color-black); }

    /*SECCIÓN QR*/
    .SectionQR{padding: 30px 5%; color: var(--color-black);}
            .pcodeQrDef{font-family: regular; font-size: 0.8em; color: var(--color-black); opacity: 0.5; padding: 5px 5px 15px 0px;}
            .pcodeQrPag{font-family: bold; font-size: 0.9em; color: var(--color-black); opacity: 0.5; line-height: 1;}
            .pcodeQrCod{font-family: light; font-size: 2em; line-height: 1; cursor: pointer;}
                .pcodeQrCod>.classIcon{font-size: 0.7em; padding: 5px 0px 0px 10px;}

        .pCodeQr img{width: 100%; height: auto; cursor: pointer; animation-name: qrAnimation; animation-duration: 4s; animation-iteration-count: infinite;}
            @keyframes qrAnimation {
                5%   {transform: rotate(5deg);}
                10%  {transform: rotate(-5deg);}
                15%  {transform: scale(1.1);}
                20%  {transform: scale(1);}
                25%  {transform: scale(1); transform: rotate(0deg);}
                }

    /*FOOTER paginas alternas*/
    .footerProfile{position:relative; height: 70%; background-color: var(--color-black); color: var(--color-white); text-align: center; overflow: hidden;}
        /*SVG Curve*/
        #burve{position: absolute; top: -1px; left:0px; width: 100%;}
        #burve path{ fill: var(--color-white); }

        .footerInf{width: 100%;}
            .footerLinkBio{ margin-top: 30px; opacity: 0.4;}
            .pinfoSoftsites{font-size: 0.7em; opacity: 0.2;}

/*para medidas mas grandes que una tableta -en este caso para visualizar el peerfil-*/
@media only screen and (min-width : 898px){ 
    .profileInf{bottom: 10%; padding: 0% 5%; }
    .profileInformation { padding: 0% 30%; }
    /*elementos editables en el administrador*/
    .sourceMenssaje{padding:5% 30%;}
    /*---------------------------------------*/
    .SectionAllMedia{padding: 5% 30% 0% 30%;}
    .SectionQR{padding: 5% 30%;}
    .footerProfile{padding: 0% 30%;}
    }

/*para dispositivos moviles*/    
@media only screen and (max-width : 539px){
    .sourceVideo{margin: 5% 0%; width: 100%; height: auto;}
    }

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ERROR 404 PAGINA NO ENCONTRADA /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.error404{width: 100%; height: 100%; background: var(--color-white); color: var(--color-black); }
    .err404_Icon{font-size: 7em; color: var(--color-black); animation-name: err404_icon; animation-duration: 2s; animation-iteration-count: infinite;}    
    @keyframes err404_icon {
        0%   {transform: scale(1); color: var(--color-gray);}
        50%  {transform: scale(1.2); color: var(--color-black);}
        100% {transform: scale(1); color: var(--color-gray);}
        }
    .err404_Err{font-size: 10em; font-family: bold; line-height: 1; }
    .err404_Details{opacity: 0.6; font-size: 0.9em; padding-bottom: 5px; color: var(--color-gray);}
        #err404_infoURL{opacity: 1; font-family: bold; color: var(--color-black);}
        .err404_Details a{text-decoration: none; color: var(--color-gray); font-family: bold;}
    .err404_img{ padding-top: 30px; color: var(--color-gray); font-family: bold;}
    
/*------------------------------------------------------------------------------------------------*/