
// Mixins
@mixin box-sizing($type) {
  -webkit-box-sizing: $type;
     -moz-box-sizing: $type;
      -ms-box-sizing: $type;
       -o-box-sizing: $type;
          box-sizing: $type;
}


.menu--fade {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  -webkit-transform: scale(1.10);
  -ms-transform: scale(1.10);
  transform: scale(1.10);
  opacity: 0;
    z-index:150;	
  
}

/* ----------- Mascara negra ----------------*/

.menu__content {
	position: fixed;
    z-index:150;	
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(2px);
	z-index:100;
	
}

/* ----------- Alinhamento dos icone ----------------*/

.ico {
  position: fixed;
  top: 10%;
  width: 70%;
  height: 70%;
  left: 15%;
  
} 

.menu__close {

}

.menu__close:focus,
.menu__close:hover,
.menu__close:active {
    text-decoration: none;
}

.menu__close:after {

}

#pop1:target {
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    width: 100%;
    height: 100%;
	padding: 1.5rem;
}

#pop2:target {
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    width: 100%;
    height: 100%;
	padding: 1.5rem;
}

#pop3:target {
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    width: 100%;
    height: 100%;
	padding: 1.5rem;
}

#page1:target .menu--fade {
	-webkit-transition: opacity 1s, -webkit-transform 1s, width 0s ease 1s, height 0s ease 1s;
    transition: opacity 1s, transform 1s, width 0s ease 1s, height 0s ease 1s;
	padding: 1.5rem;
}


#page2:target .menu--fade {
	-webkit-transition: opacity 1s, -webkit-transform 1s, width 0s ease 1s, height 0s ease 1s;
    transition: opacity 1s, transform 1s, width 0s ease 1s, height 0s ease 1s;
	padding: 1.5rem;
}

#page3:target .menu--fade {
	-webkit-transition: opacity 1s, -webkit-transform 1s, width 0s ease 1s, height 0s ease 1s;
    transition: opacity 1s, transform 1s, width 0s ease 1s, height 0s ease 1s;
	padding: 1.5rem;
}
