#themenu {position:fixed;background-color:var(--ab-color-green);width:100vw;height:100vh;top:0;left:0;overflow:hidden;z-index:0;opacity:0;display:grid;grid-template-columns:var(--ab-sides) repeat(12,1fr) var(--ab-sides);align-items: center;grid-template-rows: repeat(3, 1fr);pointer-events: none;}
#themenu.activa{z-index:10;opacity:1;pointer-events: all;}

#logotop .ab_blanco{display:none;}
#logotop .ab{display:block;}
#logotop .otros{display:block;}
#logotop.activa .ab_blanco{display:block;height:15px;}
#logotop.activa .ab{display:none;}
#logotop.activa .otros{display:none;}

#mainMenu{grid-column: 3/8;grid-row: 2/2;margin:0;padding-left:0;list-style: none;}
#mainMenu li{margin-bottom:3.385vw;position:relative;opacity:.5;transition:all 0.3s ease-in-out;}
#mainMenu li:before{content:'';display:block;width:14px;height:14px;background-color:var(--ab-color-white);border-radius:100px;position:absolute;top:50%;left:0;transform:translateY(-50%);opacity:0;transition:all 0.3s ease-in-out;z-index:1;}
#mainMenu li:hover{transform:translateX(50px);opacity:1;}
.page-porfolio #mainMenu .port{opacity:1;padding-left: 50px;}
.page-el-estudio #mainMenu .estu{opacity:1;padding-left: 50px;}
.page-talento #mainMenu .tale{opacity:1;padding-left: 50px;}
.page-porfolio #mainMenu .port:before{content:'';opacity:1;}
.page-el-estudio #mainMenu .estu:before{content:'';opacity:1;}
.page-talento #mainMenu .tale:before{content:'';opacity:1;}
#mainMenu li:hover:before{content:'';opacity:1;transform: translate(-50px, -50%)}
#mainMenu li:last-child{margin-bottom:0;}
#mainMenu a{color: var(--ab-color-white);text-decoration:none;}
#themenu .pajarito{display: none;}

#infoMenu{grid-column: 10/13;grid-row: 2/2;align-self: end;}
#infoMenu h7{display:block;}
#infoMenu h7.email{margin-top:75px;margin-bottom:10px;}

.ab_bg{display:block;position: absolute; right: 0; top: 50%; transform: translateY(-50%);height:49.074vh;}

@media (max-width: 1023px) {
  .ab_bg{display:none;}
  #infoMenu{display: none;}
  #mainMenu{grid-column: 1/15;}
  #mainMenu li{text-align: center;padding-left:0;}
  #mainMenu li:before{content:unset;}
  #mainMenu li:hover{opacity:1;transform: translateX(0);}
  #mainMenu li:hover:before{opacity:0;}

  .page-porfolio #mainMenu .port{opacity:1;padding-left: 0;}
  .page-el-estudio #mainMenu .estu{opacity:1;padding-left: 0;}
  .page-talento #mainMenu .tale{opacity:1;padding-left: 0;}
  .page-porfolio #mainMenu .port:before{content:unset;opacity:1;}
  .page-el-estudio #mainMenu .estu:before{content:unset;opacity:1;}
  .page-talento #mainMenu .tale:before{content:unset;opacity:1;}

  #themenu .pajarito{display: block;position:absolute;left:0;bottom:18.376vw;}
}