/*
  Theme Name: Imperial
  Theme URL: https://bootstrapmade.com/imperial-free-onepage-bootstrap-template/
  Author: BootstrapMade
  Author URL: https://bootstrapmade.com
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Goldman&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');

  @font-face {font-family: arnel_extrude; src: url('design_fuentes\\Arnel-ExtrudeRight.otf');}
  @font-face {font-family: back_bones; src: url('design_fuentes\\BlackbonesDEMORegular.otf');}
  @font-face {font-family: gamebox_otf; src: url('design_fuentes\\GameBox-Regular.otf');}
  @font-face {font-family: super_drift_3d; src: url('design_fuentes\\Super Drift 3D.otf');}
  @font-face {font-family: beyond_control; src: url('design_fuentes\\BeyondControl.ttf');}
  @font-face {font-family: bad_mofo; src: url('design_fuentes\\BadMofo.ttf');}
  @font-face {font-family: dayger; src: url('design_fuentes\\Dayger.ttf');}
  @font-face {font-family: flashback; src: url('design_fuentes\\Flashback.ttf');}
  @font-face {font-family: gamebox_ttf; src: url('design_fuentes\\GameBox-Regular.ttf');}
  @font-face {font-family: golden_varsity; src: url('design_fuentes\\Golden Varsity Outline.ttf');}
  @font-face {font-family: golden_var_reg; src: url('design_fuentes\\Golden Varsity Regular.ttf');}
  @font-face {font-family: golden_var_reg_sc; src: url('design_fuentes\\Golden Varsity Script.ttf');}
  @font-face {font-family: hang_the_dj; src: url('design_fuentes\\HangTheDJ.ttf');}
  @font-face {font-family: house_paint_sha; src: url('design_fuentes\\House-Paint-Shadow.ttf');}
  @font-face {font-family: house_paint_slab; src: url('design_fuentes\\House-Paint-Slab.ttf');}
  @font-face {font-family: maus; src: url('design_fuentes\\maus____.ttf');}
  @font-face {font-family: sf_funk_obli; src: url('design_fuentes\\SF Funk Master Oblique.ttf');}
  @font-face {font-family: sf_funk; src: url('design_fuentes\\SF Funk Master.ttf');}
  @font-face {font-family: strengthen; src: url('design_fuentes\\Strengthen.ttf');}
  @font-face {font-family: strengthen_fil; src: url('design_fuentes\\StrengthenFilled.ttf');}
  @font-face {font-family: super_cube_blo; src: url('design_fuentes\\Super Cube Blod.ttf');}
  @font-face {font-family: super_cube; src: url('design_fuentes\\Super Cube.ttf');}
  
  @font-face {font-family: blockbusta; src: url('design_fuentes\\FTBLOCKB.TTF');}
  @font-face {font-family: suggested_3d; src: url('design_fuentes\\Suggested3D.ttf');}
  @font-face {font-family: suggested; src: url('design_fuentes\\Suggested.ttf');}
  @font-face {font-family: failed; src: url('design_fuentes\\Failed-Italic.ttf');}
  @font-face {font-family: edit_points; src: url('design_fuentes\\EditPointsFilled.ttf');}
  @font-face {font-family: affichage; src: url('design_fuentes\\Affichage.ttf');}
  @font-face {font-family: 3dlet; src: url('design_fuentes\\3dlet.ttf');} 
  
  
  
 /****** IZQUIERDA *******/
 /****** IZQUIERDA *******/
 /****** IZQUIERDA *******/  
  
    /*** 1. NODERBOOK ***/
    :root {
        --noderbook-top: 30px;
        --noderbook-right: none;
        --noderbook-left: 10px;
        --noderbook-float: left;
        --noderbook-margin-right: none;
        --noderbook-margin-left: 120px;
    }
    /*** 2. BIENESIS ***/
    :root {
        --bienesis-top: 90px;
        --bienesis-right: none;
        --bienesis-left: 10px;
        --bienesis-float: left;
        --bienesis-margin-right: none;
        --bienesis-margin-left: 120px;
    }
    /*** 3. PLANIWER ***/
    :root {
        --planiwer-top: 150px;
        --planiwer-right: none;
        --planiwer-left: 10px;
        --planiwer-float: left;
        --planiwer-margin-right: none;
        --planiwer-margin-left: 120px;
    }
    /*** 4. GESTORLINES ***/
    :root {
        --gestorlines-top: 210px;
        --gestorlines-right: none;
        --gestorlines-left: 10px;
        --gestorlines-float: left;
        --gestorlines-margin-right: none;
        --gestorlines-margin-left: 120px;
    }
    /*** 5. TRAMIDEX ***/
    :root {
        --tramidex-top: 270px;
        --tramidex-right: none;
        --tramidex-left: 10px;
        --tramidex-float: left;
        --tramidex-margin-right: none;
        --tramidex-margin-left: 120px;
    }
    /*** 6. UNIVERSUIT ***/
    :root {
        --universuit-top: 330px;
        --universuit-right: none;
        --universuit-left: 10px;
        --universuit-float: left;
        --universuit-margin-right: none;
        --universuit-margin-left: 120px;
    }
    /*** 7. ALERTIMES ***/
    :root {
        --alertimes-top: 390px;
        --alertimes-right: none;
        --alertimes-left: 10px;
        --alertimes-float: left;
        --alertimes-margin-right: none;
        --alertimes-margin-left: 120px;
    }
    /*** 8. DEVELOZTER ***/
    :root {
        --develozter-top: 450px;
        --develozter-right: none;
        --develozter-left: 10px;
        --develozter-float: left;
        --develozter-margin-right: none;
        --develozter-margin-left: 120px;
    }
    /*** 9. WEBSERVICENTER ***/
    :root {
        --webservicenter-top: 510px;
        --webservicenter-right: none;
        --webservicenter-left: 10px;
        --webservicenter-float: left;
        --webservicenter-margin-right: none;
        --webservicenter-margin-left: 120px;
    }




/****** DERECHA *******/
/****** DERECHA *******/
/****** DERECHA *******/  

    /*** 1. PLUSCOUNTER ***/
    :root {
        --pluscounter-top: 30px;
        --pluscounter-right: 10px;
        --pluscounter-left: none;
        --pluscounter-float: right;
        --pluscounter-margin-right: 120px;
        --pluscounter-margin-left: none;
    }
    /*** 2. DOCENWORK ***/
    :root {
        --docenwork-top: 90px;
        --docenwork-right: 10px;
        --docenwork-left: none;
        --docenwork-float: right;
        --docenwork-margin-right: 120px;
        --docenwork-margin-left: none;
    }
    /*** 3. CONTABLIZER ***/
    :root {
        --contablizer-top: 150px;
        --contablizer-right: 10px;
        --contablizer-left: none;
        --contablizer-float: right;
        --contablizer-margin-right: 120px;
        --contablizer-margin-left: none;
    }
    /*** 4. SCALERGO ***/
    :root {
        --scalergo-top: 210px;
        --scalergo-right: 10px;
        --scalergo-left: none;
        --scalergo-float: right;
        --scalergo-margin-right: 120px;
        --scalergo-margin-left: none;
    }
    /*** 5. UBICONTAINER ***/
    :root {
        --ubicontainer-top: 270px;
        --ubicontainer-right: 10px;
        --ubicontainer-left: none;
        --ubicontainer-float: right;
        --ubicontainer-margin-right: 120px;
        --ubicontainer-margin-left: none;
    }
    /*** 6. FINANSERVER ***/
    :root {
        --finanserver-top: 330px;
        --finanserver-right: 10px;
        --finanserver-left: none;
        --finanserver-float: right;
        --finanserver-margin-right: 120px;
        --finanserver-margin-left: none;
    }
    /*** 7. HOSTAMEDIC ***/
    :root {
        --hostamedic-top: 390px;
        --hostamedic-right: 10px;
        --hostamedic-left: none;
        --hostamedic-float: right;
        --hostamedic-margin-right: 120px;
        --hostamedic-margin-left: none;
    }
    /*** 8. SERVIDAY ***/
    :root {
        --serviday-top: 450px;
        --serviday-right: 10px;
        --serviday-left: none;
        --serviday-float: right;
        --serviday-margin-right: 120px;
        --serviday-margin-left: none;
    }
    /*** 9. SPACERWEB ***/
    :root {
        --spacerweb-top: 510px;
        --spacerweb-right: 10px;
        --spacerweb-left: none;
        --spacerweb-float: right;
        --spacerweb-margin-right: 120px;
        --spacerweb-margin-left: none;
    }
    

    
 /****** IZQUIERDA *******/
 /****** IZQUIERDA *******/
 /****** IZQUIERDA *******/      
    
    
    
/*************************** PANEL NODERBOOK ***************************/
/*************************** PANEL NODERBOOK ***************************/
/*************************** PANEL NODERBOOK ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_noderbook">*/
    /**** PANEL ****/
    .class_noderbook_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_noderbook_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_noderbook_panel_info.popup-ani {
            margin-right: var(--noderbook-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--noderbook-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_noderbook_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--noderbook-right);
            left: var(--noderbook-left);
            top: var(--noderbook-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_noderbook_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--noderbook-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_noderbook_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_noderbook_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_noderbook_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_noderbook_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/
    
  
    

/*************************** PANEL BIENESIS ***************************/
/*************************** PANEL BIENESIS ***************************/
/*************************** PANEL BIENESIS ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_bienesis">*/
    /**** PANEL ****/
    .class_bienesis_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_bienesis_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_bienesis_panel_info.popup-ani {
            margin-right: var(--bienesis-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--bienesis-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_bienesis_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--bienesis-right);
            left: var(--bienesis-left);
            top: var(--bienesis-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_bienesis_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--bienesis-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_bienesis_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_bienesis_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_bienesis_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_bienesis_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/    
    
    
    
/*************************** PANEL PLANIWER ***************************/
/*************************** PANEL PLANIWER ***************************/
/*************************** PANEL PLANIWER ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_planiwer">*/
    /**** PANEL ****/
    .class_planiwer_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_planiwer_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_planiwer_panel_info.popup-ani {
            margin-right: var(--planiwer-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--planiwer-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_planiwer_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--planiwer-right);
            left: var(--planiwer-left);
            top: var(--planiwer-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_planiwer_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--planiwer-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_planiwer_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_planiwer_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_planiwer_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_planiwer_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/    
    
    
    
    
/*************************** PANEL GESTORLINES ***************************/
/*************************** PANEL GESTORLINES ***************************/
/*************************** PANEL GESTORLINES ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_gestorlines">*/
    /**** PANEL ****/
    .class_gestorlines_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_gestorlines_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_gestorlines_panel_info.popup-ani {
            margin-right: var(--gestorlines-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--gestorlines-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_gestorlines_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--gestorlines-right);
            left: var(--gestorlines-left);
            top: var(--gestorlines-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_gestorlines_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--gestorlines-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_gestorlines_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_gestorlines_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_gestorlines_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_gestorlines_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/      
    
    
    
/*************************** PANEL tramidex ***************************/
/*************************** PANEL tramidex ***************************/
/*************************** PANEL tramidex ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_tramidex">*/
    /**** PANEL ****/
    .class_tramidex_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_tramidex_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_tramidex_panel_info.popup-ani {
            margin-right: var(--tramidex-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--tramidex-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_tramidex_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--tramidex-right);
            left: var(--tramidex-left);
            top: var(--tramidex-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_tramidex_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--tramidex-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_tramidex_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_tramidex_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_tramidex_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_tramidex_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/   
    
    
    
/*************************** PANEL universuit ***************************/
/*************************** PANEL universuit ***************************/
/*************************** PANEL universuit ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_universuit">*/
    /**** PANEL ****/
    .class_universuit_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_universuit_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_universuit_panel_info.popup-ani {
            margin-right: var(--universuit-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--universuit-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_universuit_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--universuit-right);
            left: var(--universuit-left);
            top: var(--universuit-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_universuit_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--universuit-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_universuit_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_universuit_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_universuit_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_universuit_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/      
    
    
    
/*************************** PANEL alertimes ***************************/
/*************************** PANEL alertimes ***************************/
/*************************** PANEL alertimes ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_alertimes">*/
    /**** PANEL ****/
    .class_alertimes_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_alertimes_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_alertimes_panel_info.popup-ani {
            margin-right: var(--alertimes-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--alertimes-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_alertimes_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--alertimes-right);
            left: var(--alertimes-left);
            top: var(--alertimes-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_alertimes_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--alertimes-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_alertimes_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_alertimes_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_alertimes_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_alertimes_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/      
    
    
    
/*************************** PANEL develozter ***************************/
/*************************** PANEL develozter ***************************/
/*************************** PANEL develozter ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_develozter">*/
    /**** PANEL ****/
    .class_develozter_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_develozter_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_develozter_panel_info.popup-ani {
            margin-right: var(--develozter-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--develozter-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_develozter_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--develozter-right);
            left: var(--develozter-left);
            top: var(--develozter-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_develozter_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--develozter-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_develozter_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_develozter_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_develozter_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_develozter_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/    
    
    
    
/*************************** PANEL webservicenter ***************************/
/*************************** PANEL webservicenter ***************************/
/*************************** PANEL webservicenter ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_webservicenter">*/
    /**** PANEL ****/
    .class_webservicenter_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_webservicenter_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_webservicenter_panel_info.popup-ani {
            margin-right: var(--webservicenter-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--webservicenter-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_webservicenter_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--webservicenter-right);
            left: var(--webservicenter-left);
            top: var(--webservicenter-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_webservicenter_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--webservicenter-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_webservicenter_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_webservicenter_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_webservicenter_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_webservicenter_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/      
    
    
    
    
    
    
    
    
    
/****** DERECHA *******/
/****** DERECHA *******/
/****** DERECHA *******/    


/*************************** PANEL pluscounter ***************************/
/*************************** PANEL pluscounter ***************************/
/*************************** PANEL pluscounter ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_pluscounter">*/
    /**** PANEL ****/
    .class_pluscounter_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_pluscounter_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_pluscounter_panel_info.popup-ani {
            margin-right: var(--pluscounter-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--pluscounter-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_pluscounter_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--pluscounter-right);
            left: var(--pluscounter-left);
            top: var(--pluscounter-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_pluscounter_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--pluscounter-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_pluscounter_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_pluscounter_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_pluscounter_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_pluscounter_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/   
    
    
    
/*************************** PANEL docenwork ***************************/
/*************************** PANEL docenwork ***************************/
/*************************** PANEL docenwork ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_docenwork">*/
    /**** PANEL ****/
    .class_docenwork_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_docenwork_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_docenwork_panel_info.popup-ani {
            margin-right: var(--docenwork-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--docenwork-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_docenwork_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--docenwork-right);
            left: var(--docenwork-left);
            top: var(--docenwork-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_docenwork_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--docenwork-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_docenwork_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_docenwork_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_docenwork_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_docenwork_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/       
    
    
    
/*************************** PANEL contablizer ***************************/
/*************************** PANEL contablizer ***************************/
/*************************** PANEL contablizer ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_contablizer">*/
    /**** PANEL ****/
    .class_contablizer_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_contablizer_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_contablizer_panel_info.popup-ani {
            margin-right: var(--contablizer-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--contablizer-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_contablizer_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--contablizer-right);
            left: var(--contablizer-left);
            top: var(--contablizer-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_contablizer_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--contablizer-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_contablizer_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_contablizer_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_contablizer_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_contablizer_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/    
    
    
    
/*************************** PANEL scalergo ***************************/
/*************************** PANEL scalergo ***************************/
/*************************** PANEL scalergo ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_scalergo">*/
    /**** PANEL ****/
    .class_scalergo_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_scalergo_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_scalergo_panel_info.popup-ani {
            margin-right: var(--scalergo-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--scalergo-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_scalergo_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--scalergo-right);
            left: var(--scalergo-left);
            top: var(--scalergo-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_scalergo_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--scalergo-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_scalergo_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_scalergo_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_scalergo_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_scalergo_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/       
    
    
    
/*************************** PANEL ubicontainer ***************************/
/*************************** PANEL ubicontainer ***************************/
/*************************** PANEL ubicontainer ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_ubicontainer">*/
    /**** PANEL ****/
    .class_ubicontainer_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_ubicontainer_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_ubicontainer_panel_info.popup-ani {
            margin-right: var(--ubicontainer-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--ubicontainer-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_ubicontainer_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--ubicontainer-right);
            left: var(--ubicontainer-left);
            top: var(--ubicontainer-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_ubicontainer_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--ubicontainer-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_ubicontainer_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_ubicontainer_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_ubicontainer_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_ubicontainer_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/   



/*************************** PANEL finanserver ***************************/
/*************************** PANEL finanserver ***************************/
/*************************** PANEL finanserver ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_finanserver">*/
    /**** PANEL ****/
    .class_finanserver_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_finanserver_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_finanserver_panel_info.popup-ani {
            margin-right: var(--finanserver-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--finanserver-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_finanserver_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--finanserver-right);
            left: var(--finanserver-left);
            top: var(--finanserver-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_finanserver_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--finanserver-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_finanserver_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_finanserver_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_finanserver_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_finanserver_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/     
    
    
    
/*************************** PANEL hostamedic ***************************/
/*************************** PANEL hostamedic ***************************/
/*************************** PANEL hostamedic ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_hostamedic">*/
    /**** PANEL ****/
    .class_hostamedic_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_hostamedic_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_hostamedic_panel_info.popup-ani {
            margin-right: var(--hostamedic-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--hostamedic-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_hostamedic_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--hostamedic-right);
            left: var(--hostamedic-left);
            top: var(--hostamedic-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_hostamedic_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--hostamedic-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_hostamedic_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_hostamedic_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_hostamedic_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_hostamedic_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/  
    
    
    
/*************************** PANEL serviday ***************************/
/*************************** PANEL serviday ***************************/
/*************************** PANEL serviday ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_serviday">*/
    /**** PANEL ****/
    .class_serviday_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_serviday_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_serviday_panel_info.popup-ani {
            margin-right: var(--serviday-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--serviday-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_serviday_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--serviday-right);
            left: var(--serviday-left);
            top: var(--serviday-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_serviday_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--serviday-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_serviday_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_serviday_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_serviday_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_serviday_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/       
    
    
    
/*************************** PANEL spacerweb ***************************/
/*************************** PANEL spacerweb ***************************/
/*************************** PANEL spacerweb ***************************/

    /*//<editor-fold defaultstate="collapsed" desc="PANEL: panel_spacerweb">*/
    /**** PANEL ****/
    .class_spacerweb_panel_info {
            width: 0px;/* tamaño al inicio sin desplegar */
            height: 280px; /* Aqui se modifico para acortar area texto */
            background-color: lightgray;/*#fff;*/
            border-radius: 15px;
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .15);
            font-family: 'Roboto', sans-serif;
            text-align: center;
            margin: 0 0 10px 0;
            overflow: hidden;
            opacity: 0;
    }
    .class_spacerweb_panel_info.open {
            width: 270px; /* tamaño despúes de desplegar, amtes abia height*/
            opacity: 1;
    }
    .class_spacerweb_panel_info.popup-ani {
            margin-right: var(--spacerweb-margin-right);/* Aqui se aumento, recorrer derecha*/
            margin-left: var(--spacerweb-margin-left); /* Aqui se aumento, recorrer izquierda*/
            /* PAraTrasladar movimientos vertical y horizontal*/
            -webkit-transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
            transition: all .6s cubic-bezier(0.32, 0.175, 0.885, 1.275);
    }
    /**** BOTON GEN ****/
    .class_spacerweb_boton_info_gen {
            position: absolute;/* Aqui se Modifico */
            display: inline-block;
            right: var(--spacerweb-right);
            left: var(--spacerweb-left);
            top: var(--spacerweb-top);/*125px;*/
            z-index: 1000;
    }
    /**** BOTON ****/
    .class_spacerweb_boton_info {
            width: 105px;
            /*height: 65px;*/
            /*background-color: #00aeef;*/
            border-radius: 20px;
            float: var(--spacerweb-float);
            box-shadow: 0px 12px 45px rgba(0, 0, 0, .3);
            z-index: 5;
            position: relative;
    }
    .class_spacerweb_boton_info .img-fab {
            height: 30px;
            width: 30px;
            margin: 15px auto;
            background-image: url("https://4.bp.blogspot.com/-1J75Et4_5vc/WAYhWRVuMiI/AAAAAAAAArE/gwa-mdtq0NIqOrlVvpLAqdPTV4VAahMsQCPcB/s1600/barrel-we-love-subscribers-img.png");
            background-position: -1px -53px;
    }

    .class_spacerweb_boton_info .wrap {
            transform: rotate(0deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_spacerweb_boton_info .ani {
            transform: rotate(45deg);
            -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
            transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23);
    }
    .class_spacerweb_boton_info .close {
            background-position: -2px 1px;
            transform: rotate(-45deg);
            float: none;
            opacity: 1;
    }
    /*//</editor-fold>*/