main{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.collectionsMenuContainer{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.collectionsMenuContainer .menu{
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0;
  transform: scale(0,0);
  top: 100vh;
}
.collectionsMenuContainer .menu.active{
  transform: scale(1,1);
  top: 0vh;
  opacity: 1;
  -webkit-animation: FadeIn 0.3s forwards;
  -moz-animation: FadeIn 0.3s forwards;
  -o-animation: FadeIn 0.3s forwards;
  animation: FadeIn 0.3s forwards;
}
.collectionsMenuContainer .collectionSelection{
  position: relative;
  height: 100%;
  padding: 0;
  background-size: cover;
  background-position: center;
}
.collectionsMenuContainer .collectionSelection .overlay{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  overflow: hidden;
}
.collectionsMenuContainer .collectionSelection .overlay.hovered{
  background-color: rgba(0,0,0,0);
}
.collectionsMenuContainer .collectionSelection h1{
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translate(0%, -50%);
  padding: 25vh 0;
}
.collectionsMenuContainer .collectionSelection h1:hover{
  cursor: pointer;
}


/* MOBILE BREAKDOWN*/
@media (min-width: 0px) and (max-width: 767px) and (orientation: portrait), (orientation: portrait){
  .collectionsMenuContainer .mainMenu .collectionSelection{
    height: 50vh;
  }
  .collectionsMenuContainer .fabricMenu .collectionSelection{
    height: 33.4vh;
  }

  .overlay{
    background-color: rgba(0,0,0,0) !important;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

/*  ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px*/
@media (min-width: 481px) and (max-width: 767px) {

}

/*  ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {

}