@media (max-width:1100px){  /*---FOR PHONES---*/
	.aavamenu_left {  /*category menu ON THE BOTTOM*/
	z-index:1; background-color:#26272b; position:fixed; bottom:0rem; left:0rem; width:100%; height:5.0rem; display:flex; justify-content:center;
	font-size: 15px; color:white; border-top: 0px dashed black; border-radius:0px; box-shadow: 0 0 3px; overflow-x:auto;
	}
	.iconcontainer {
	width:3.0rem; height:3.0rem; border:0px solid green; border-radius:12px; overflow:hidden;white-space:pre-wrap;
	}
	.icon2 {
	width:100%; height:100%; background-size:cover; transform: scale(1.0); border:0px solid gray; background-position: center;
	}
   	.iconcontainer:hover {
    	transform: scale(1.25); transition: all 0.1s ease-out;
    	}
    	.icon_active {
    	height:4.0rem; width:4.0rem; border:0px solid rgb(091,103,124); border-radius:8px; background-size:cover !important; background-position:50% 30% !important;
    	background-repeat:no-repeat !important; background-color:#313338;
    	}
    	.icon:hover {
    	transform: scale(1.25); transition: all 0.1s ease-out;
    	}
	.menucatcontainsomething { /*contains all the icons*/
	display:flex; flex-direction:row; margin:auto; margin-top:0.5rem; margin-bottom:0.5rem; border-radius:6px; border:0px solid gray;
	}
    	/*.menucatcontain {
    	width:75%; display:flex; flex-direction:row; align-items:center; justify-content:space-around; border:0px solid black;
    	}*/
	.aavamenuimg_container {
    	display:flex; margin-left:0.5rem; margin-right:0.5rem; flex-direction:column; font-size:13px; align-items:center; margin-top:0rem; border:0px solid red;
    	}
    	.aavamenuimg_official {  /*menu buttons*/
    	border:2px solid transparent; border-radius:8px; height:3.5rem; width:3.5rem; margin-bottom:0.25rem; cursor:pointer;
    	}
    	.aavamenuimg_official:hover { border:2px solid rgb(091,103,124); filter:brightness(150%); transition:all 0.1s ease-out; }
	.aavamenuimg_horizontal {  /*menu buttons*/
	border:2px solid transparent; border-radius:8px; background-color:#313338; height:3.0rem; width:3.0rem; margin-bottom:0.25rem; cursor:pointer;
	}
	.aavamenuimg_horizontal:hover { border:2px solid rgb(091,103,124); filter:brightness(150%); transition:all 0.1s ease-out; }
}


@media (min-width:1101px){	/*---DESKTOP---*/
	.aavamenu_left {	/*category menu ON THE LEFT*/
	background-color:#26272b; position:fixed; top:0rem; left:0rem;  /* margin is due to the upper block*/
	display:flex; flex-direction:column; float:left; height:100%; width:7.0rem; font-family: Arial, sans-serif; font-size:15px; color:#E9EDF2;
    	border-right: 0px dashed gray; border-radius:0px; margin-top:0rem; overflow-y:auto;
	}
	.menucatcontainsomething {  /*contains all of the menu items*/
	float:left; margin-left:0.5rem; margin-right:0.5rem; margin-top:3.0rem; width:auto; padding-bottom:1rem; border:0px solid gray;
	}
    	.menucatcontain { /*obsolete*/
    	height:62.5%; margin-top:2.5rem; margin-bottom:auto; display:flex; flex-direction:column; border:1px solid black;
    	}
	.aavamenuimg_container {  /*contains icon + text*/
    	width:fit-content; display:flex; flex-direction:row; align-items:center; margin-top:1.25rem; border:0px solid red;
    	}
	.iconcontainer {
	width:2.5rem; height:2.5rem; border-radius:12px; overflow:hidden;white-space:pre-wrap; border:0px solid green; 
	}
	.icon2 {
	width:100%; height:100%; background-size:cover; transform: scale(1.0); border:0px solid gray; background-position: center;
	}
   	.iconcontainer:hover {
    	transform: scale(1.25); transition: all 0.1s ease-out;
    	}

    	.icon_active {
    	height:5.0rem; width:4.0rem; border:0px solid rgb(091,103,124); border-radius:8px; background-size:cover !important; background-position:50% 30% !important;
    	background-repeat:no-repeat !important; background-color:#313338;
    	}
    	.icon:hover {
    	transform: scale(1.25); transition: all 0.1s ease-out; filter:grayscale(0%);
    	}
	/*.icon:hover { border:0px solid rgb(091,103,124); filter:brightness(125%); transition:all 0.1s ease-out; }*/
    	.aavamenuimg_official {  /*menu buttons*/
    	border:2px solid transparent; border-radius:8px; height:3.0rem; width:3.0rem; margin-bottom:0.25rem; cursor:pointer;
    	}
    	.aavamenuimg_official:hover { border:2px solid rgb(091,103,124); filter:brightness(150%); transition:all 0.1s ease-out; }
	.aavamenuimg_horizontal {  /*menu buttons*/
	border:2px solid transparent; border-radius:8px; background-color:#313338; height:3.0rem; width:3.0rem; margin-bottom:0.25rem; cursor:pointer;
	}
	.aavamenuimg_horizontal:hover { border:2px solid rgb(091,103,124); filter:brightness(150%); transition:all 0.1s ease-out; }
}