@media (max-width:980px){
.et_header_style_split #main-header .mobile_nav {
display: block;
text-align: left;
background-color: white;
border-radius: 5px;
padding: 0px 10px;
} #main-header .logo_container{display:none!important;} #et_mobile_nav_menu .mobile_nav{
position:relative;
display:flex;
align-items:center;
height:56px;
padding:0 56px 0 16px; background:#f3f4f6;
border-radius:12px;
} #et_mobile_nav_menu .mobile_nav .select_page{font-size:0;line-height:0;}
#et_mobile_nav_menu .mobile_nav .select_page::before{
content:"";
display:block;
width:70px;height:70px;
background:url(//www.uxweb.mx/wp-content/uploads/robotlogo.svg) center/contain no-repeat; } #et_mobile_nav_menu .mobile_menu_bar{
position:absolute!important;
right:16px!important;
left:auto!important;
top:50%!important;
transform:translateY(-50%)!important;
margin-top:20px!important;
z-index:5;
}
#et_mobile_nav_menu .mobile_menu_bar:before{font-size:36px;color:#0f3b6a;} #et_mobile_nav_menu .et_mobile_menu{margin-top:8px;}
}  #menu-item-7944>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-menu-servicio-uxweb.webp);
}
#menu-item-7945>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-menu-metodologia-uxweb.webp);
}
#menu-item-7431>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-menu-contacto-uxweb.webp);
}
#menu-item-7940>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-menu-portafolio-uxweb.webp);
} #menu-item-7123 a {
display: flex;
align-items: center;
} .sub-menu li a {
background: transparent !important; transition: background .3s ease, color .3s ease;
color: #0d355e; } .sub-menu li:hover a {
background: #e6f0fa !important; color: #0d355e; } #mobile_menu #menu-item-7123>a::before,
#mobile_menu #menu-item-7427>a::before,
#mobile_menu #menu-item-7432>a::before,
#mobile_menu #menu-item-7629>a::before,
#mobile_menu #menu-item-7939>a::before {
content: '';
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
margin-right: 8px;
display: none;
} #mobile_menu #menu-item-7123>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp);
}
#mobile_menu #menu-item-7427>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-publicidad-uxweb.webp);
}
#mobile_menu #menu-item-7432>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp);
}
#mobile_menu #menu-item-7939>a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp);
} .et_mobile_menu .first-level>a,
.et_mobile_menu .second-level>a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level>a:after,
.et_mobile_menu .second-level>a:after {
font-family: 'ETmodules';
content: '\4c';
position: absolute;
top: 13px;
right: 10px;
font-size: 16px;
}
.et_mobile_menu .first-level>a.icon-switch:after,
.et_mobile_menu .second-level>a.icon-switch:after {
content: '\4d';
} .et_mobile_menu .second-level,
.et_mobile_menu .third-level {
display: none;
transition: all .5s ease;
}
.et_mobile_menu .second-level.reveal-items,
.et_mobile_menu .third-level.reveal-items {
display: block;
background: #fff;
color: transparent;
} @media (max-width: 1024px) {
#mobile_menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-20px);
visibility: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.mobile_nav.opened #mobile_menu {
max-height: 1000px;
opacity: 1;
transform: translateY(0);
visibility: visible;
} #mobile_menu #menu-item-7123>a::before,
#mobile_menu #menu-item-7427>a::before,
#mobile_menu #menu-item-7432>a::before,
#mobile_menu #menu-item-7629>a::before,
#mobile_menu #menu-item-7939>a::before {
display: inline-block;
} #menu-item-7944,
#menu-item-7940,
#menu-item-7945,
#menu-item-7431 {
width: 48%;
border-radius: 12px;
box-shadow: 0 2px 6px;
color:rgba(0, 0, 0, 0.08);
text-align: center;
padding: 16px 8px;
box-sizing: border-box;
transition: width 1s;
}
#menu-item-7944 a,
#menu-item-7940 a,
#menu-item-7945 a,
#menu-item-7431 a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
color: #2A2A2A;
text-decoration: none;
transition: all .5s ease;
}
#menu-item-7944 a::before,
#menu-item-7940 a::before,
#menu-item-7945 a::before,
#menu-item-7431 a::before {
content: '';
display: block;
width: 120px;
height: 120px;
margin-bottom: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: all .5s ease;
}
#mobile_menu .first-level>a:not(.icon-switch)+ul {
display: none !important;
}
#mobile_menu .first-level>a.icon-switch+ul {
display: flex !important;
flex-direction: row;
}
#mobile_menu.expand-menu {
width: 83vw !important;
max-width: 85vw !important;
}
#mobile_menu.expand-menu>#menu-item-7944 {
width: 100%;
}
#mobile_menu .first-level>.sub-menu {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#mobile_menu .second-level.menu-item,
#mobile_menu .first-level>.sub-menu>li {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
width: 47%;
text-align: center;
border-radius: 16px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
#mobile_menu .second-level.menu-item a {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: #2A2A2A;
line-height: 1.3;
text-align: center;
transition: all .5s ease;
}
#mobile_menu .second-level.menu-item a::before {
display: block !important;
width: 60px;
height: 60px;
margin-bottom: 6px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: all .5s ease;
}
#mobile_menu .third-level {
margin-top: 8px;
padding: 0 10px;
text-align: left;
}
#mobile_menu .third-level.menu-item {
width: 100%;
border-bottom: 1px solid; 
color:#E0E0E0;
padding: 12px 0;
box-sizing: border-box;
}
#mobile_menu .third-level.menu-item:last-child {
border-bottom: none;
}
#mobile_menu .third-level.menu-item>a {
position: relative;
display: block;
font-size: 17px;
font-weight: 600;
color: #2A2A2A;
padding-left: 26px;
line-height: 1.4;
text-decoration: none;
}
#mobile_menu .third-level.menu-item>a::before {
font-family: 'ETmodules';
content: '\45';
font-size: 14px;
color: #0076CE;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#mobile_menu .third-level.menu-item>a:hover {
color:#D60B72;
} #mobile_menu .second-level.menu-item.hide-temporal {
display: none !important;
}
#mobile_menu .second-level.menu-item.sub-expand-100 {
display: flex !important;
width: 100% !important;
}
#mobile_menu .second-level.menu-item.sub-expand-100 .third-level {
display: block !important;
}
} @media only screen and (min-width: 981px) and (max-width: 1024px) {
#logo {
width: 25%;
}
} @media only screen and (min-width:1024px){ #top-menu #menu-item-7123>a,
#top-menu #menu-item-7427>a,
#top-menu #menu-item-7432>a,
#top-menu #menu-item-7629>a,
#top-menu #menu-item-7939>a{
display:flex; flex-direction:column; align-items:center; text-align:center;
}
#top-menu #menu-item-7123>a::before{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp); }
#top-menu #menu-item-7427>a::before{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-publicidad-uxweb.webp); }
#top-menu #menu-item-7432>a::before{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp); }
#top-menu #menu-item-7939>a::before{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp); }
#top-menu #menu-item-7123>a::before,
#top-menu #menu-item-7427>a::before,
#top-menu #menu-item-7432>a::before,
#top-menu #menu-item-7629>a::before,
#top-menu #menu-item-7939>a::before{
content:''; display:block; width:100px; height:100px;
background-size:contain; background-repeat:no-repeat; margin-bottom:8px;
} #top-menu li.first-level>ul{
display:grid !important; grid-template-columns:repeat(2,300px) !important; gap:40px; width:auto !important;
}
#top-menu li li a{ padding:20px; width:300px; }
.nav li li ul{
width:900px; display:grid !important; grid-template-columns:repeat(2,350px) !important;
gap:10px; transform:translate(100px,200px);
} #top-menu > li > a{
position:relative; text-decoration:none; transition:color .2s ease;
} @media (hover:hover){
#top-menu > li > a:hover{ color:#D60B72; }
}
#top-menu > li > a:focus-visible{
outline:none;
box-shadow:0 2px 0 0 #2d4f7a;
} #top-menu > li.current-menu-item > a{ color:#2d4f7a; }
#top-menu > li.current-menu-item > a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#2d4f7a;
}  #menu-item-7940, #menu-item-7945, #menu-item-7431 {
position:relative;
}
#menu-item-7940::after,
#menu-item-7945::after,
#menu-item-7431::after{
content:''; position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
width:clamp(120px,12vw,180px); height:clamp(80px,8vw,120px);
background-repeat:no-repeat; background-size:contain; background-position:center;
opacity:0; pointer-events:none; will-change:opacity, transform;
transition:opacity .25s ease, transform .25s ease; z-index:10;
}
@media (hover:hover){
#menu-item-7940:hover::after{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-menu-portafolio-uxweb.webp); opacity:1; transform:translate(-50%,0); }
#menu-item-7945:hover::after{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-menu-metodologia-uxweb.webp);                   opacity:1; transform:translate(-50%,0); }
#menu-item-7431:hover::after{ background-image:url(https://www.uxweb.mx/wp-content/uploads/icono-menu-contacto-uxweb.webp);    opacity:1; transform:translate(-50%,0); }
} @media (prefers-reduced-motion:reduce){
#top-menu > li > a{ transition:none; }
#menu-item-7940::after, #menu-item-7945::after, #menu-item-7431::after{ transition:none; }
}
.sub-menu li a::before {
content: '';
display: block;
width: 100px;
height: 100px;
margin: 0 auto 8px auto;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform .3s ease; } .sub-menu li:hover a::before {
transform: scale(1.3);
} #menu-item-7123 a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-seo-uxweb.webp);
}
#menu-item-7427 a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-web-uxweb.webp);
}
#menu-item-7432 a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/web-ux-3.png);
}
#menu-item-7939 a::before {
background-image: url(https://www.uxweb.mx/wp-content/uploads/icono-ventas-uxweb.webp);
}
}