/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21/08/2020, 06:58:44 AM
    Author     : alonso
*/
@font-face {
  font-family: 'DINPro-Bold';
  src: url('../../fonts/DINPro-Bold_13934.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Myriad-Pro-Light';
  font-style: normal;
  font-weight: normal;
  src: url('../../fonts/Myriad-Pro-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Myriad-Pro-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/MyriadPro-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica-Neue-Light';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Helvetica-Neue-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/helvetica-neue-lt-std-75-bold-590b9e7229917.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica-Neue-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Helvetica/HelveticaNeueRegular.ttf') format('truetype');
}
::-webkit-scrollbar {
    display: none;
}
/*******HEADER********/
/************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************/
/************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************/
/************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************COMENTAR EL HEADER COMPLETOOOOOOOOOO*************/
/*header{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255);
    border-bottom: 3px solid rgba(218, 41, 28);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;    
    z-index: 10;
    visibility: visible;
    transition: 0.5s;
}*/
.cabezera{
    height: 100%;
    overflow: hidden;
}
.header1{
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header1.personalizado{
    padding: 5px 0!important;
}
.header1.personalizado img{
    max-height: 100%;
}
.header1.personalizado img:first-child{
    
}
.header1.personalizado img:last-child{
    height: 70%;
}
.header1.personalizado div{
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header2 .img1{
    width: 60px;
    height: 60px;
}
.header2 .img2{
    height: 20px;
}
.header2 .img3{
    height: 20px;
}
.header3 .titulo .tituloPrincipal{
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
}
.header3 .titulo .tituloSecundario{
    font-size: 10px;
}
.proyect_titles {
    display: grid;
    align-items: center;
    padding: 5px;
}
.proyect_title_top {
    font: bold 14px Arial !important;
    padding-top: 0px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    text-align: end;
    display: none;
}
.proyect_title_bot {
    font: normal 12px Arial !important;
    padding-bottom: 2px;
    text-align: end;
    display: none;
}
.header-tituloSegmento{
    font-size: 20px;
    color: #000;
    font-weight: bold;
    padding: 15px 0;
    display: none;
}
.header4{
    display: flex;
    justify-content: space-between;
}

.header4 .nombre{
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.header4 .nombre .usuario{
    font-size: 12px;
}

.header4 .toggle-btn{
    height: 100%;
}

.header4 .toggle-btn button{
    background-color: transparent;
    border: none;
    height: 100%;
    width: 60px;
}

.header4 .toggle-btn button span{
    font-size: 40px;
    font-weight: bold;
    background-color: transparent;
    color: rgb(0, 0, 0);
    border: none;
    margin-top: -4px;
}
.iconServicios{
    color:black;
    width:25px !important;
    height:25px;
    margin: auto 10px;
    float:left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
/********FIN DE HEADER********/
/********MENU SERVICIOS********/
.menuServicios{
    position: fixed;
    top: 60px;
    width: 100%;
    background-color: black;
    z-index: 100;
    display: none;
    right: 0;
    transition: 0.3s;
}
#menuServiciosComerciales{
    position: fixed;
    /*top: 88px;*//*AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP*/
    /*top: 88px;*//*AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP*/
    /*top: 88px;*//*AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP**AQUIIIIII CAMBIAAAAARRRR EEEELLLL TTTTOOOOOOPPPPPPPPPPPPP*/
    top: 60px;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background-color: rgba(255, 255, 255, .6);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    display: none;
    height:auto;
}
#menuServiciosComerciales .paddles{
    display: none;
}
.menuSerciciosActive{
    display: block;
}

.menuServicios ul{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    padding: 2px 0 0 0 !important;
    margin: 0;
}
#menuServiciosComerciales ul .vinculos{
    margin-bottom: 5px !important;
    border-bottom: 1px solid #000;
}
#menuServiciosComerciales ul div a{
    cursor: pointer;
    color: #000;
}
#menuServiciosComerciales ul div span{
    font-size: 11px;
    margin: 0 1.5%;
}
#menuServiciosComerciales ul div span.casos{
    color:#565656;
}
#menuServiciosComerciales ul div hr{
    border:none;
    border-left:1px solid #000;
    height:10px;width:1px;
    display: inline;
    margin:0 5px;
}
.menuServicios ul li{
    list-style: none;
    margin: 0 0px;
    width: 85px;

}

.menuServicios ul li a{
    text-align: center;
}

.menuServicios ul li div{
    text-align: center;
    /*border: 1px solid white;*/
    width: auto;
    height: 35px;
    /*border-radius: 10px;*/
}

.menuServicios ul li label{
    display: block;
    color: white;
    font-size: 14px;
}
#menuServiciosComerciales ul li label{
    display: block;
    color: black;
    font-size: 11px;
    margin-bottom: 1px;
    margin-top: 5px;
    line-height: 13px;
}
#menuServiciosComerciales button {
    outline: inherit;
    background-color: rgba(211, 208, 205, .2)!important;
}
#menuServiciosComerciales ul#ulhdrempresa li label br,
#menuServiciosComerciales ul#ulhdrgobierno li label br{
    display: none;
}
img{
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
#menuServiciosComerciales img{
    /*filter:invert(1);*/
    width: 35px;
    
}
#menuServiciosComerciales .imgActive{
    /*filter: invert(0);
    background-color: black;
    border-radius: 30px;*/
}
/********FIN DE HEADER********/

/********CERRAR SESION********/
.cerrarSesion{
    overflow:scroll;
    /*		position: fixed;
                    height: calc(100% - 90px);
                    top: 60px;
                    right: 0px;
                    background-color: rgba(255, 255, 255);
                    z-index: 1000;
                    width: 0%;
                    transition: 0.6s;
                    overflow: hidden;*/
}

.cerrarSesion .titulo{
    width: 100%;
    height: 5%;
    background-color: #da291c;
    padding: 5px;
    display: none;
}

.cerrarSesion .titulo .titulo-seg{
    font-size: 16px;
    color: #fff;
}

.cerrarSesion .perfil{
    width: 100%;
    height: auto;
    background-color: whitesmoke;
    overflow-y: auto;
}

.cerrarSesion .perfil .foto{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding: 10px;
}

.cerrarSesion .perfil .foto .foto-perfil{
    width: 150px;
    border-radius: 100%;
    height: 100%;
    overflow: hidden;
    min-width: 50%;
}

.cerrarSesion .perfil .datos{
    width: 100%;
    height: auto;
    /*display: flex;*/
}

.cerrarSesion .perfil .paquete{
    font: bold 0.85rem Arial;
    height: 10%;
    max-height: 10%;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cerrarSesion .perfil .datos .info{
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 10px 5px;
    text-align: center;
}

.cerrarSesion .perfil .datos .info p{
    margin-bottom: 0;
}

.cerrarSesion .perfil .datos .info .nombre,
.cerrarSesion .perfil .datos .info .correo,
.cerrarSesion .perfil .datos .info .ubicacion{
    color: #000;
}

.cerrarSesion .perfil .datos .info .nombre{
    font-size: 20px;
    margin: 0;
    padding: 0 5px;
    color: #da291c;
}

.cerrarSesion .perfil .datos .info .correo{
    font-size: 14px;
    padding: 0 5px;
    line-height: 1.4;
}

.cerrarSesion .perfil .datos .info .ubicacion{
    font-size: 13px;
    padding: 0 5px;
    line-height: 1.4;
}

.cerrarSesion .perfil .datos .semaforo{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cerrarSesion .perfil .btn-perfil{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cerrarSesion .perfil .btn-perfil .boton-perfil{
    display: block;
    width: 230px;
    height: 40px;
    border: 2px solid #da291c;
    border-radius: 30px;
    color: #da291c;
    display: flex;
    justify-content: center;
    align-items: center;
}
.colorS {
    border-radius: 15px;
    width: 15px;
    height: 15px;
    /* background: transparent; */
    border: solid #000 1px;
    margin: 2px;
}
.cerrarSesion .navegacion{
    width: 100%;
    height: auto;
    background-color: whitesmoke;
    /*border-bottom: 2px solid #2b2b2b;*/
    border-top: 2px solid #2b2b2b;
}

.cerrarSesion .navegacion nav{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.cerrarSesion .navegacion nav .segInv{
    border-radius: 10px;
    border: 1px solid #000;
    margin: 10px 0px 0px 0px;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    padding: 0px;
    display: none;
}
.cerrarSesion .navegacion nav #perfilInvitacionP{
    background-image: url(https://assets.claro360.com/base/Persona_01.png);
}
.cerrarSesion .navegacion nav #perfilInvitacionE{
    background-image: url(https://assets.claro360.com/base/Empresa_02.png);
}
.cerrarSesion .navegacion nav #perfilInvitacionC{
    background-image: url(https://assets.claro360.com/base/Corporativo_03.png);
}
.cerrarSesion .navegacion nav #perfilInvitacionG{
    background-image: url(https://assets.claro360.com/base/Gobierno_04.png);
}
.cerrarSesion .navegacion nav .segPerf{
    margin: 10px 0px 0px 0px;
    display:none;
}
.cerrarSesion .navegacion nav .segPerf .logoPrfl{
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #000;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px;
}
.cerrarSesion .navegacion nav .segPerf #logoPrflP{
    background-image: url(https://assets.claro360.com/base/Claro360_Logo_Header_negro.png);
    /*background-image: url(https://assets.claro360.com/base/360_logo.png);*/
}
.cerrarSesion .navegacion nav .segInv .segTxt{
    padding: 15px 10px;
}.cerrarSesion .navegacion nav .segPerf .segTxt{
    padding: 5px 10px;
}
.cerrarSesion .navegacion nav .segInv .segTxt h5,
.cerrarSesion .navegacion nav .segPerf .segTxt h5{
    font-size: 18px;
    margin-bottom: 0px;
}
.cerrarSesion .navegacion nav .segInv .segTxt hr{
    margin:2px 0px;
    background-color: #000;
}
.cerrarSesion .navegacion nav .segInv .segTxt p,
.cerrarSesion .navegacion nav .segPerf .segTxt p{
    font-size: 14px;
    line-height: normal;
    margin-bottom: 5px;
}
.cerrarSesion .navegacion nav .segInv .segTxt a{
    font-size: 14px;
    color: #fff;
    background-color: #d92f11;
    border-radius: 10px;
    padding: 4px 15px;
}
.cerrarSesion .navegacion nav .segInv .segImg{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px;
}
.cerrarSesion .navegacion nav .menu-sesion,
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios,
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos{
    padding: 0;
}

.cerrarSesion .navegacion nav .menu-sesion li{
    display: block;
    padding: 5px 20px;
    border-bottom: 1px solid #2b2b2b;
    /* cursor: pointer; */
    padding: 0;
    min-height: 30px;
    padding-left: 15px !important;
    display: flex;
    align-items: center
}

.cerrarSesion .navegacion nav .menu-sesion div{
    color : red;
    border-bottom: 1px solid #2b2b2b;
}
.cerrarSesion .navegacion nav .menu-sesion div a{
    color : red;
}

.cerrarSesion .navegacion nav .menu-sesion li,
.cerrarSesion .navegacion nav .menu-sesion li a{
    color: #000;
}

.cerrarSesion .navegacion nav .menu-sesion li a{
    display: block;
    text-decoration: none;
    width: 100%;
}

.cerrarSesion .navegacion nav .menu-sesion .menu-servicios li a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding-left: 15px;
    width: 100%;
    filter: invert(1);
    color: white;
}
.cerrarSesion .navegacion nav .menu-sesion li a:hover {
    color:white;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-servicios li a:hover {
    filter: invert(0);
}

.cerrarSesion .navegacion nav .menu-sesion .menu-servicios li a .icono{
    height: 100%;
}

.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos li a{
    display: block;
    padding-left: 15px;
    text-decoration: none;
    font-size: 14px;
}
.cerrarSesion .navegacion nav .menu-sesion .menu-segmentos li a:hover{
    color:white;
}

.cerrarSesion .btn-sesion{
    width: 100%;
    height: 5%;
    background-color: whitesmoke;
}

.cerrarSesion .btn-sesion .boton-sesion{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #000;
    text-decoration: none;
}
/********FIN DE CERRAR SESION********/
header{
    position: fixed;
    height: 60px;
    /*background: white;*/
    width: 100%;
    /*border-bottom: solid 3px #da291c;*/
    transition: 0.5s;
}

.hidetoogle{
    height: calc( 100% - 90px)!important;
}
#toggle{
    background-color: white;
    color: #5a5a5a;
    font: 16px Arial;
    padding: 17px;
    border-bottom: solid 4px #ff8200;
    margin: 0 !important;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 51px;
    position: relative;
    height: 50px;
    background: white;
    align-items: center;
    text-align: center;
    position: relative;
    display: grid;
}

.segmentos .toggleactive{
    /*height: 50% !important;*/
    /*color: black;*/
}
/*.header1{
    width: 20%;
    max-width: 20%;
    text-align: center;
    padding: 10px;
    min-width: 20%;
    height: 60px;
}*/
.header2 .menu {
    padding: 0;
    height: 100%;
    width: 100%;
}
.header3{
    width: 10%;
    max-width: 10%;
    text-align: end;
    padding: 2px;
    /*    padding-right: 75px;
        background: #f5f5f5;*/
    display: table;
    margin: 0;
    padding-right: 50px;
    transition: 0.5s;
    color: white;
    /* margin-right: 50px; */
}
.segmento.menuServicios{
    width: 10%;
    max-width: 10%;
    text-align: end;
    padding: 2px;
    /*    padding-right: 75px;
        background: #f5f5f5;*/
    margin: 0;
    padding: 0;
    transition: 0.5s;
    color: white;
    /* margin-right: 50px; */
}
#user{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font: bold 1rem Arial;
    width: calc(100% - 75px);
}
.containerHeader4{
    display: table-cell;
    vertical-align: middle;
    font: 12px arial;
}

#T1Header{
    font: 16px arial;
    font-weight: bold;
    margin-top: 9px;
    margin-bottom: 2px;
}
#T2Header{
    font: 9px arial;
    margin-top: 2px;
}
#T3Header{
    font: 14px arial;
    font-weight: bold;
    margin-top: 9px;
    margin-bottom: 0;
    text-align: right;
    margin-right: 3px;
}
#T4Header{
    font: 9px arial;
    margin-top: 2px;
    text-align: right;
    padding: 5px;
    border-right: solid 1px #979a9c;
}
#T5Header{
    font: 10px arial;
    margin-top: 2px;
    padding: 5px;
}
.menuModalIcon.segmento, .segmento .cabezera li:hover {
    width: 50px;
}
.menuModalIcon{
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 50px;
    padding:0px 0px;
    z-index: 1024;
    transition: 0.5s;
    display: none;
}

#hamburgerMenu{
    text-align: center;
    align-items: center;
    height: 100%;
}

#menuToggle
{
    display: inline-grid;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input
{
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

#menuToggle span
{
    display: block;
    width: 29px;
    height: 3px;
    margin-bottom: 4px;
    position: relative;
    /*background: #1a202d;*/
    border-radius: 3px;
    z-index: 1;
    transform-origin: -2px 1px;
    transition: transform 0.5s 
        cubic-bezier(0.77,0.2,0.05,1.0), 
        background 0.5s 
        cubic-bezier(0.77,0.2,0.05,1.0), 
        opacity 0.55s ease;
}

#menuToggle span:first-child
{
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    /*background: #232323;*/
    width: 21px;
    left: 3px;
    top: 2px;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
    transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
    position: fixed;
    width: 25%;
    margin: 0;
    padding: 0;
    background: whitesmoke;
    list-style-type: none;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.3s cubic-bezier(1,0.5,0.5,1.0);
    top: 60px;
    right: 0;
    height: calc( 100% - 60px );
    opacity: 0;
    transition: 0.5s;
    overflow: hidden;
    padding: 5px;
    text-align: left;
}

#menuToggle input:checked ~ ul
{
    transform: none;
    opacity: 1;
}


.amenu {
    padding: 12px;
    border-bottom: solid 1px #d3d3d3;
    color: #474848;
    font: bold 16px arial;
    margin-top: 3px;
    justify-content: center;
    transition: color 0.5s ease;
}

.amenu:hover{
    border-bottom: solid 1px #737373;
    color:black ;
    text-decoration: none;
}

#title_textologin {
    color: #40474f;
    font: bold 16px arial;
    border-bottom: solid 1px #d3d3d3;
    padding-bottom: 4%;
}

#textologin {
    vertical-align: middle;
    font-size: 15px;
    color: #929799;
    height: 35%;
    overflow: auto;
}

#menuContainer {
    height: 55%;
    max-height: 55%;
    overflow: scroll;
}

#closeSession{
    height: 10%;
}

#botonsesion {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    /* border-radius: 16px; */
    background-color: transparent;
    /*color: #da291c;*/
    color: inherit;
    text-align: center;
    border-color: transparent;
    font: bold 16px arial;
    border-top: solid 1px #d3d3d3;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

.modalText {
    font: 12px Arial;
}

#LoadingLottie{
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    height: 100%;
}

.Paneblock{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #1f1f1f;
    transition: 0.3s;
    transform: translate(-50%, -50%);
    display: none;
}
.menu li {
    padding: 0;
    width: auto;
}
.header3 .btn-registrate, .btn-ingresa {
    background-color: #da291c;
    width: 130px;
    font-size: 12.5px;
    border-radius: 30px;
    padding: 3px;
    margin: 0;
    /*position: fixed;*/
    top:0px;
    right: 0px;
    /*border: 1px solid white;*/
}
.menuServicios ul li a {
    text-align: center;
    display: block;
    cursor: pointer;
}

#menu_perfil{
    position: absolute;
    height: 40%;
    width: 100%;
    top: 0;
    left: 0;
}

#menu_modulos{
    position: absolute;
    height: calc(65% - 60px);
    width: 100%;
    left: 0;
    top: 35%;
    overflow: scroll;
}
#menu_perfil{
    position: absolute;
    height: 35%;
    width: 100%;
    top: 0;
    left: 0;
}
#menu_perfil .perfil{
    position: relative;
    width: 100%;
    height: 100%;
}
.img_perfil{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
}
.img_perfil_user{
    background: black;
    position: absolute;
    padding: 15%;
    border-radius: 50%;
    margin: 5%;
    top: 0;
    left: 34.5%;
}
.info_perfil{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    text-align: left;
    padding: 0 10px;
}
.miperfil360{
    width: 80%;
    padding: 3px;
}
.card_servicio{
    height: 130px;
    background: white;
    border-radius: 25px;
    margin: 8px 0;
}
.card_servicio .tittle{
    height: 30px;
    padding: 0 30px;
    border-bottom: solid 1px #dee2e6;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    font: bold 0.9rem Arial;
}
.card_servicio .body{
    height: 100px;
    padding: 0 20px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    font: normal 0.9rem Arial;
}
.btn-registro{
    width: 70%;
    padding: 5px;
    font: normal 1rem Arial;
}
#registro_nuevo_modulo strong{
    color: red;
}
.segmento{
    /*background: white;*/
    color: black;
}
.segmento .header1 a{
    text-align: right;
    background-image: url(https://assets.claro360.com/base/Claro360_Logo_Header_negro.png);
    /*background-image: url(https://assets.claro360.com/base/360_logo.png);*/
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.segmento .header1 .headEmpresa{
    display: none;
}
.segmento .header1 .img360{
    text-align: right;
    background-image: url(https://assets.claro360.com/base/360360a.png);
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    display: none;
}
.segmento .header1 .txtlogo{
    padding: 0 3px 0 0;
    border-right: 2px solid #000;
    text-align: right;
    margin: auto;
    display: none;
}
.segmento .header1 .imgEmpresa{
    text-align: right;
    border-right: 2px solid #000;
    background-image: url(https://assets.claro360.com/base/360360a.png);
    height: 90%;
    width: 100%;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    display: none;
}
.segmento .header3, .segmento.menuServicios{
    background-color: white;
    color: #000;
    /*width: 25%;*/
}
.segmento.menuServicios {
    position: fixed;
    top: 60px;
    width: 100%;
    background-color: #ffffff;
    z-index: 1001;
}
.menu-sesion ul li{
    background: whitesmoke;
}
.menu-sesion ul li:hover {
    color:white;
}
/*--------HOME---------HOME----------HOME*/
.segmento .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.segmento .header2 .menu li:hover{
    background-color: #C8C5C2;
    width: auto;
}
.segmento .header2 .menu li a:hover{
    color: #000;
    width: auto;
}
.segActivo{
    background-color: #C8C5C2;
    width: auto;
}
.segActivo a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
    font-weight: bold;
}
.menuModalIcon.segmento{
    background-color: transparent;
}
.segmento #menuToggle span{
    background-color: #000;
}
.segmento .header2 .menu .activo{
    background-color:#C8C5C2;
    width: auto;
}
.segmento .header2 .menu .activo a{
    color: #000;
}
.segmento .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.segmento .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #000;
    color: #fff;
}
.segmento .menu-sesion ul li:hover{
    background-color: #000;
    color: #fff;
}
.segmento .toggleActiveS{
    background-color: #000;
    color: white !important;
}    
.segmento #user{
    /*color: white;*/
}
/*-----PERSONA-------PERSONA------PERSONA-------*/
.persona .header3, .persona.menuServicios{
    background-color: #da291c;
}
.persona #sesionSegmento{
    background-color: #da291c;
}
.persona #sesionSegmento a{
    color: #fff;
}
.persona .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.persona .header2 .menu li:hover {
    background-color: #da291c;
    width: auto;
}
.persona .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.persona .menuModalIcon .segmento {
    background-color: #da291c;
}
.menuModalIcon.segmento.persona{
    background-color: #da291c;
}
.persona #menuToggle span{
    background-color: #fff;
}
.persona .header2 .menu .activo{
    background-color: #da291c;
    width: auto;
}
.persona .header2 .menu .activo a{
    color: #fff;
}
.persona .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.persona .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #da291c;
    color: #fff;
}
.persona .menu-sesion ul li:hover{
    background-color: #da291c;
    color: #fff;
}
.persona .toggleActiveS{
    background-color: #da291c;
    color: white !important;
} 
.persona .btn-registrate, .persona .btn-ingresa{
    border: 1px solid white;
}
.persona .iconServicios{
    color:white;
    width:25px !important;
    height:25px;
    margin: auto 10px;
    float:left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.persona #user{
    color: white;
}
/*-----EMPRESA-------EMPRESA------EMPRESA-------*/
.empresa .header3, .empresa.menuServicios{
    background-color: #A4A2A2;
}
.empresa #sesionSegmento{
    background-color: #A4A2A2;
}
.empresa #sesionSegmento a{
    color: #fff;
}
.empresa .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.empresa .header2 .menu li:hover {
    background-color: #A4A2A2;
    width: auto;
}
.empresa .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.empresa .menuModalIcon .segmento {
    background-color: #A4A2A2;
}
.menuModalIcon.segmento.empresa{
    background-color: #A4A2A2;
}
.empresa #menuToggle span{
    background-color: #fff;
}

.empresa .header2 .menu .activo{
    background-color: #A4A2A2;
    width: auto;
}
.empresa .header2 .menu .activo a{
    color: #fff;
}
.empresa .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.empresa .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #A4A2A2;
    color: #fff;
}
.empresa .menu-sesion ul li:hover{
    background-color: #A4A2A2;
    color: #fff;
}
.empresa .toggleActiveS{
    background-color: #A4A2A2;
    color: white !important;
} 
.empresa .iconServicios{
    color:white;
    width:25px !important;
    height:25px;
    margin: auto 10px;
    float:left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.empresa #user{
    color: white;
}
/*-----CORPORATIVO-------CORPORATIVO------CORPORATIVO-------*/
.corporativo .header3, .corporativo.menuServicios{
    background-color: #282828;
}
.corporativo #sesionSegmento{
    background-color: #282828;
}
.corporativo #sesionSegmento a{
    color: #fff;
}
.corporativo .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.corporativo .header2 .menu li:hover {
    background-color: #282828;
    width: auto;
}
.corporativo .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.corporativo .menuModalIcon .segmento {
    background-color: #282828;
}
.menuModalIcon.segmento.corporativo{
    background-color: #282828;
}
.corporativo #menuToggle span{
    background-color: #fff;
}

.corporativo .header2 .menu .activo{
    background-color: #282828;
    width: auto;
}
.corporativo .header2 .menu .activo a{
    color: #fff;
}
.corporativo .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.corporativo .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #282828;
    color: #fff;
}
.corporativo .menu-sesion ul li:hover{
    background-color: #282828;
    color: #fff;
}
.corporativo .toggleActiveS{
    background-color: #282828;
    color: white !important;
} 
.corporativo .iconServicios{
    color:white;
    width:25px !important;
    height:25px;
    margin: auto 5px;
    float:left;
    cursor: pointer;
    height: 50px;
}
.corporativo #user{
    color: white;
}
/*-----GOBIERNO-------GOBIERNO------GOBIERNO-------*/
.gobierno .header3, .gobierno.menuServicios{
    background-color: #000;
}
.gobierno #sesionSegmento{
    background-color: #000;
}
.gobierno #sesionSegmento a{
    color: #fff;
}
.gobierno .header2 .menu li a{
    color: #000;
    padding: 0 15px;
    height: 60px;
    display: flex;
    align-items: center;
    width: auto;
}
.gobierno .header2 .menu li:hover {
    background-color: #000;
    width: auto;
}
.gobierno .header2 .menu li a:hover{
    color: #fff;
    width: auto;
}
.gobierno .menuModalIcon .segmento {
    background-color: #000;
}
.menuModalIcon.segmento.gobierno{
    background-color: #000;
}
.gobierno #menuToggle span{
    background-color: #fff;
}

.gobierno .header2 .menu .activo{
    background-color: #000;
    width: auto;
}
.gobierno .header2 .menu .activo a{
    color: #fff;
}
.gobierno .cerrarSesion .navegacion nav .menu-sesion > li:hover,
.gobierno .cerrarSesion .navegacion nav .menu-sesion > li a:hover{
    background-color: #000;
    color: #fff;
}
.gobierno .menu-sesion ul li:hover{
    background-color: #000;
    color: #fff;
}
.gobierno .toggleActiveS{
    background-color: #000;
    color: white !important;
} 
.gobierno .iconServicios{
    color:white;
    /*width:25px !important;*/
    /*height:25px;*/
    /*margin: auto 5px;*/
    /*float:left;*/
    cursor: pointer;
}
.gobierno #user{
    color: white;
}
/* ESTILOS PARA SWEAT ALERT ONBOARDING-------------- */
.alrtRegIni{
    color: #da291c !important;
    justify-content: center;
}
.alrtRegIni h1{
    margin: 0px;
}
.headerComercial{
    background-color: rgba(255, 255, 255, 0.7);
    border-bottom: 3px solid rgba(255, 255, 255, 0.9);
    backdrop-filter:blur(12px);
}
.headerComercial .header3{
    background-color: transparent;
    border-bottom: 3px solid transparent;
}
/* FIN ESTILOS PARA SWEAT ALERT ONBOARDING-------------- */
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    .header1{
        width: 35%;
        min-width: 35%;
    }
    /*.header2{
        max-width: 10%;
    }*/

    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 15%;
    }

}
@media only screen and (min-width : 300px) and (orientation : portrait) {
    .header1{
        width: 100%;
        min-width: 100%
    }

    #menu
    {
        width: 100%;
        /*height: calc( 100% - 140px );*/
    }

    .header3, .segmento.menuServicios{
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

}
@media only screen and (max-width : 480px) {
    .amenu {
        font: bold 13px arial;
        padding: 7px;
    }
}
@media only screen and (min-width : 480px) and (orientation : portrait) {
    .header1{
        width: 20%;
        min-width: 20%
    }
    .header2{
        width: 20%;
        max-width: 20%
    }


    #menu
    {
        width: 50%;
        /*height: calc( 100% - 140px );*/
    }
    .header3, .segmento.menuServicios{
        /*display: none;*/
    }

}
@media only screen and (max-width : 768px) {
    .amenu {
        font: bold 14px arial;
        padding: 10px;
    }


}
@media only screen and (min-width : 768px)  {

    /*.header2{
        max-width: 100%
    }*/
}

@media only screen and (max-width : 768px) and (orientation : landscape) {
    #textologin {
        display: none;
    }
    #menuContainer {
        height: 85%;
        max-height: 85%;
    }
    #closeSession{
        height: 15%;
    }
    footer{
        /*display: none;*/
    }
    header{
        height: 40px;
    }
    .header1 {
        padding: 5px;
    }
    .segmento .header1 a{
        width: 55%;
    }    
    .menuModalIcon {
        width: 40px;
        height: 37px;
        padding: 0px;
    }
    #menu {
        top: 60px;
        width: 50%;
    }

}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 680px) and (max-width: 767px) and (orientation: landscape){
    .segmento .header1 a {
        width: 70%;
    } 
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    aside {
        width: 30%;
    }
    .header1{
        width: 30%;
        min-width: 30%;
    }

    #menu
    {
        width: 30%;
    }
    .header3, .segmento.menuServicios{
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }

}
@media only screen  and (min-width : 1224px) {
    aside {
        width: 25%;
    }
    .header1{
        width: 25%;
        min-width: 25%;
    }

    #menu
    {
        width: 25%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
}
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    .header1{
        width: 25%;
        min-width: 25%;
    }

    #menu
    {
        width: 25%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .amenu {
        font: bold 14px arial;
        padding: 10px;
    } left: 25%;

}
/* Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { 
}
/* Landscape */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    .header1{
        width: 20%;
        min-width: 20%;
    }

    #menu
    {
        width: 20%;
    }
    .header3, .segmento.menuServicios{
        width: 20%;
        max-width: 20%;
        min-width: 20%;
    }

}
@media only screen and (max-width: 600px) and (orientation: portrait){
    .header3 .btn-registrate, .btn-ingresa{
        display: none;
    }
}
@media only screen and (max-width: 424px) and (orientation: landscape){
    #menu{
        width: 100%;
    }
    .header1 {
        width: 35%;
        min-width: 35%;
    }
    .segmento .header1 a {
        width: 85%;
    }
    .header3, .segmento.menuServicios{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        background-color: unset;
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa{
        display: none;
    }
}
@media only screen and (min-width: 425px) and (max-width: 600px) and (orientation: landscape){
    #menu{
        width: 100%;
    }
    .header1 {
        width: 35%;
        min-width: 35%;
    }
    .segmento .header1 a {
        width: 85%;
    }
    .header3, .segmento.menuServicios{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        background-color: unset;
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa{
        display: none;
    }
    
}
/*******************************************************************************************************************/
/******************************************      PORTRAIT     ******************************************************/
/*******************************************************************************************************************/
/***********************PORTRAIT DISPOSITIVO MOVIL CELULAR**********************************************************/
@media only screen and (max-width: 320px) and (orientation: portrait){
    #menu{
        width: 100%;
    }
    .header1 {
        width: 100%;
        min-width: 100%;
    }
    .header2 {
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    } 
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.2rem 0 3rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    #menuServiciosComerciales .servicios .item:first-child {
        margin-left: 0;
    }
    #menuServiciosComerciales .servicios .item {
        display: inline-block;
        width: 100px;
        height: 100%;
        margin-left: 1rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /**********************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 321px) and (max-width: 424px) and (orientation: portrait){
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    #menu{
        width: 100%;
    }
    .header1 {
        width: 100%;
        min-width: 100%;
    }
    .header2 {
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 1.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 425px) and (max-width: 600px) and (orientation: portrait){
    #menu{
        width: 100%;
    }
    .header1 {
        width: 100%;
        min-width: 100%;
    }
    .header2 {
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
/***********************PORTRAIT DISPOSITIVO MOVIL TABLET***********************************************************/
@media only screen and (min-width: 601px) and (max-width: 679px) and (orientation: portrait){
    #menu{
        width: 50%;
    }
    .header2 {
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }   
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.2rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 680px) and (max-width: 767px) and (orientation: portrait){
    #menu{
        width: 45%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2 {
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 1.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
/*******************************IPAD USADA EN LA EMPRESA************************************************************/
@media only screen and (min-width: 768px) and (max-width: 820px) and (orientation: portrait){
    #menu{
        width: 40%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2 {
        width: 80%;
        max-width: 80%;
        text-align: left;
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 95px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 145% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 95px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 95px;
        margin-left: 0rem;
    }
}
/***********************PORTRAIT DISPOSITIVO MOVIL LAPTOP***********************************************************/
@media only screen and (min-width: 821px) and (max-width: 991px) and (orientation: portrait){
    #menu{
        width: 40%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2 {
        width: 80%;
        max-width: 80%;
        text-align: left;
        display: none;
    }
    .header3, .segmento.menuServicios{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 145% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1150px) and (orientation: portrait){   
    #menu{
        width: 40%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 70%;
        max-width: 70%;
        min-width: 70%;
    }
    .header3, .segmento.menuServicios{
        width: 10%;
        max-width: 10%;
        min-width: 10%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 130% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
/***********************PORTRAIT DISPOSITIVO PC ESCRITORIO***********************************************************/
@media only screen and (min-width: 1151px) and (max-width: 1199px) and (orientation: portrait){
    #menu{
        width: 35%;
    }
    .header1 {
        width: 15%;
        min-width: 15%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 35%;
        max-width: 35%;
        min-width: 35%;
    }
}
@media only screen and (min-width: 1200px) and (max-width:3000px) and (orientation: portrait){
    #menu{
        width: 30%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 30%;
        max-width: 30%;
        min-width: 30%;
    }
}
/*******************************************************************************************************************/
/******************************************      LANDSCAPE      ****************************************************/
/*******************************************************************************************************************/
/*********************LANDSCAPE DISPOSITIVO MOVIL CELULAR***********************************************************/
@media only screen and (max-width: 424px) and (orientation: landscape){
    .header2{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }	
    .persona .header3,
    .empresa .header3, 
    .corporativo .header3,
    .gobierno .header3, .segmento.menuServicios{
        background-color: #ffffff;
    }
    .menuModalIcon{
        display: block !important;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
    /*********************************************/
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }      
}
@media only screen and (min-width: 425px) and (max-width: 600px) and (orientation: landscape){
    .header2{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .persona .header3,
    .empresa .header3, 
    .corporativo .header3,
    .gobierno .header3, .segmento.menuServicios{
        background-color: #ffffff;
    }
    .menuModalIcon{
        display: block !important;
    }
    /***************************************************/
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
    /***********************************************/
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }    
}
@media only screen and (min-width: 601px) and (max-width: 679px) and (orientation: landscape){
    .header2{
        display: none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .persona .header3,
    .empresa .header3, 
    .corporativo .header3,
    .gobierno .header3, .segmento.menuServicios{
        background-color: #ffffff;
    }
    .menuModalIcon{
        display: block !important;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.2rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
    /****************************************************************/
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }    
}
@media only screen and (min-width: 680px) and (max-width: 767px) and (orientation: landscape){
    .header2{
        display: none;
    }
    .persona .header3,
    .empresa .header3, 
    .corporativo .header3,
    .gobierno .header3, .segmento.menuServicios{
        background-color: #ffffff;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }
    /****************************************************/
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 143% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 1.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 820px) and (orientation : landscape){
    #menu{
        width: 40%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 80%;
        max-width: 80%;
        min-width: 80%;
        text-align: left;
        display:none;
    }
    .segmento .cabezera li a {
        padding: 0 10px;
    }
    .header3, .segmento.menuServicios{
        width: 0%;
        max-width: 0%;
        min-width: 0%;
        background-color: transparent !important;
    }
    #menuServiciosComerciales {
        background-color: rgba(211, 208, 205, .6) !important;
    }
    .header3 .btn-registrate, .btn-ingresa {
        display: none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    .menuModalIcon.segmento{
        width: 50px;
    }	
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }  
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3rem 0 .5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 95px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 145% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
/*********************LANDSCAPE DISPOSITIVO MOVIL TABLET***********************************************************/
@media only screen and (min-width: 821px) and (max-width: 991px) and (orientation : landscape){
    #menu{
        width: 30%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 80%;
        max-width: 80%;
        min-width: 80%;
        text-align: left;
        display: none;
    }
    .segmento .cabezera li a {
        padding: 0 5px;
    }
    .header3, .segmento.menuServicios{
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        display : none;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 95px;
        display : none;
    }
    .menuModalIcon.segmento {
        /*display: block !important;*/
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    .menuModalIcon.segmento.persona{
        background-color: #ffffff;
    }
    .persona #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.empresa{
        background-color: #ffffff;
    }
    .empresa #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.corporativo{
        background-color: #ffffff;
    }
    .corporativo #menuToggle span{
        background-color: #000;
    }
    .menuModalIcon.segmento.gobierno{
        background-color: #ffffff;
    }
    .gobierno #menuToggle span{
        background-color: #000;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 150% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2.5rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1150px) and (orientation: landscape){
    #menu{
        width: 30%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 45%;
        max-width: 50%;
        min-width: 45%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 120px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
    /***************************************************/
    #menuServiciosComerciales{
        padding: 0 3.5rem 0 1.5rem;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       
    }
    
    #menuServiciosComerciales .servicios{
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #menuServiciosComerciales .servicios .item {
        display: inline-block !important;
        width: 100px;
        height: 100%;
        margin-left: 2rem;
        box-sizing: border-box;
    }
    #menuServiciosComerciales ul#ulhdrgeneral360 .vinculos {
        width: 125% !important;
    }
    .menuServicios ul {
        flex-direction: inherit;
        justify-content: initial;
        margin: 0 0 0 2rem;
    }
    .menuServicios ul li {
        align-items: center;
        border-bottom: inherit;
    }
    #menuServiciosComerciales button{
        background-color: rgba(211, 208, 205, .6);
        border: none;
        color: black;
        padding: 0 1.5rem;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }
    #menuServiciosComerciales .paddles{
        display: block;
    }
    #menuServiciosComerciales .paddle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1rem;
    }
    #menuServiciosComerciales .left-paddle {
            left: 0;
    }
    #menuServiciosComerciales .right-paddle {
            right: 0;
    }
    #menuServiciosComerciales .hidden {
            display: none;
    }
    /************************************************/
    #menuServiciosComerciales ul#ulhdrempresa li label br,
    #menuServiciosComerciales ul#ulhdrgobierno li label br{
        display: block;
    }
    #menuServiciosComerciales ul li label,
    #menuServiciosComerciales ul li label{
        width: 100px;
    }
    #menuServiciosComerciales .servicios .item,
    #menuServiciosComerciales .servicios .item {
        width: 100px;
        margin-left: 0rem;
    }
}
/*********************LANDSCAPE DISPOSITIVO MOVIL LAPTOP***********************************************************/
@media only screen and (min-width: 1151px) and (max-width: 1199px) and (orientation: landscape){
    #menu{
        width: 25%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 110px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }		
}
@media only screen and (min-width: 1200px) and (max-width: 1360px) and (orientation: landscape){
    #menu{
        width: 25%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 50%;
        max-width: 55%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .header3 .btn-registrate, .btn-ingresa {
        background-color: #da291c;
        width: 120px;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }	
}
/*********************LANDSCAPE DISPOSITIVO PC ESCRITORIO***********************************************************/
/*patalla de escritorio utilizado en la empresa*/
@media only screen and (min-width: 1361px) and (max-width: 1899px) and (orientation : landscape){
    #menu{
        width: 25%;
    }
    .header1 {
        width: 25%;
        min-width: 25%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 25%;
        max-width: 25%;
        min-width: 25%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
}
@media only screen and (min-width: 1900px) and (max-width: 2299px) and (orientation : landscape){
    #menu{
        width: 20%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 50%;
        max-width: 50%;
        min-width: 50%;
    }
    .header3, .segmento.menuServicios{
        width: 20%;
        max-width: 20%;
        min-width: 20%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }	
}
@media only screen and (min-width: 2300px) and (max-width: 2599px) and (orientation : landscape){
    #menu{
        width: 20%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 60%;
        max-width: 60%;
        min-width: 60%;
    }
    .header3, .segmento.menuServicios{
        width: 20%;
        max-width: 20%;
        min-width: 20%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }	
}
@media only screen and (min-width: 2600px) and (max-width: 3599px) and (orientation: landscape){
    #menu{
        width: 20%;
    }
    .header1 {
        width: 20%;
        min-width: 20%;
    }
    .header2{
        width: 60%;
        max-width: 60%;
        min-width: 60%;
    }
    .header3, .segmento.menuServicios{
        width: 20%;
        max-width: 20%;
        min-width: 20%;
    }
    .menuModalIcon.segmento{
        width: 50px;
    }
}

.show_servicios{
    height: auto;
    display: block;
    overflow: scroll;
    /* max-height: 350px; */
    /* max-height: calc(100% - 90px); */
}

.service{
    width: 60px;
    height: 60px;
    margin: auto;
    /* background: white; */
    border-radius: 30px;
}
.service_label{
    font: bold 0.8rem Arial;
    color: #000;
    text-align: center;
    padding: 10px 0;
    text-overflow: ellipsis;
    overflow: hidden;
}
.expand_menu{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
    background: #d3d3d3;
    border-top: solid 2px #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #343a40;
    font: bold 0.8rem Arial;
    cursor: pointer;
    bottom: 0;
}

.expanded_menu{
    /* position: absolute; */
    bottom: 0px;
    width: 100%;
    height: 30px;
    background: #d3d3d3;
    border-top: solid 2px #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #343a40;
    font: bold 0.8rem Arial;
    cursor: pointer;
}
#servicios_grid{
    overflow: scroll;
    max-height: 320px;
}

#servicios_grid > div{
    cursor: pointer;
}