.iconbox1 {
	background-image:url("../img/pic1.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #e4ae42;	
}
.iconbox2 {
	background-image:url("../img/pic2.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #d5822a;	
}
.iconbox3 {
	background-image:url("../img/pic3.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #b39919;	
}
.iconbox4 {
	background-image:url("../img/pic4.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #92a682;	
}
.iconbox5 {
	background-image:url("../img/pic5.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #d36e4c;	
}
.iconbox6 {
	background-image:url("../img/pic6.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #8a9c44;	
}
.iconbox7 {
	background-image:url("../img/pic7.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #e4ae42;	
}
.iconbox8 {
	background-image:url("../img/pic8.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #d5822a;	
}
.iconbox9 {
	background-image:url("../img/pic9.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #92a682;	
}
.iconbox10 {
	background-image:url("../img/pic10.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #b39919;	
}
.iconbox11 {
	background-image:url("../img/pic11.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #8a9c44;	
}
.iconbox12 {
	background-image:url("../img/pic12.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #d36e4c;	
}

/*
* {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

* {box-sizing: border-box}

.effectJ {
 -webkit-filter: invert(1) sepia(1) hue-rotate(30deg);
  filter: invert(1) sepia(1) hue-rotate(30deg);
}
.effectJ2 {
 -webkit-filter: invert(0) sepia(0) hue-rotate(0deg);
  filter: invert(0) sepia(0) hue-rotate(0deg);
	 -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

.iconboxextra {
box-shadow: inset 0 0 0 14px rgba(255, 255, 255, 0.6);
}
.brightness {-webkit-filter: brightness(0.65);}



#wrapper {
	position: absolute;
	left: 0;
	top: 0;
	heigth: 100%;
	width: 100%;
 }
#blueboxX {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	background: linear-gradient(90deg, rgba(123,123,123,0) 21%, rgba(52,53,53,0.3) 32%, rgba(18,19,20,0.3) 34%, rgba(10,13,14,0.4) 40%) no-repeat 50% 50% / 100% 100%;
}	
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: 0;
	margin-bottom: -56px;
	left: 0;
	z-index: 151;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: rgba(245,14,18,0);
}
#picicons {
	position: relative;
	width: 40.5%;
	height: 1000px;

	background-color: rgba(25,192,217,0.0);
	left: 64%;
	margin-left: -2px;
	bottom: 0px;
	margin-bottom: 0px;
	overflow: visible;
}
.iconbox {
	border-radius: 4px;
	background-size: 85px;
	cursor: pointer;
	width: 100%;
}
.iconwrapper {
	width: 90%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(1, 100%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 60px;
	}
.with-height {
  height:200%;
}	
#loadingx {
	visibility: hidden;
	height: 0px;
	pointer-events: none;
	}
#booksub {
	position: fixed;
	top: 0;
	margin-top: 25px;
	width: 61.5%;
	height: 100%;
	height: calc(100% - 110px);
	left: 0;	
	margin-left: 1%;
	z-index: 165;
	background-image:url(../img/studio.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	pointer-events: none;
	background-color: rgba(160,161,41,0.0);
		 -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


	
@media only screen and (min-width: 640px) {
	
	
 #iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: 0;
	margin-bottom: -63px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
#picicons {
	width:370px;
	height: 100%;
	background-color: rgba(25,192,217,0.0);
	left: 68%;
	margin-left: -176.5px;
	bottom: 0;
	margin-bottom: 0px;
}

.iconwrapper {
	width: 100%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(3, 33%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 10px;
	}
.with-height {
  /*height: 100%;*/
	height: calc(100% - 53px);
/*	max-height: 500px;*/
}
.iconbox {
	border-radius: 2px;
	background-size: 45px;
}	
#booksub {
	top: 0px;
	margin-top: 0px;
	width: 44%;
	min-width: 200px;
	max-width: 410px;
	height: calc(100% - 74px);
	left: 30%;
	margin-left: -228px;
	background-image:url(../img/studio.svg);
	background-size: 86%;
	background-position: 100% 100%;
	background-color: rgba(92,49,216,0.0);
}
	
@media  (min-height: 320px) {
	.iconbox {
	border-radius: 2px;
	background-size: 55px;
}
	}
	
@media  (min-height: 560px) {
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: -68%;
	margin-bottom: 300px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
#picicons {
	width:370px;
	height: 100%;
	background-color: rgba(25,192,217,0.0);
	left: 68%;
	margin-left: -179.5px;
	bottom: 0;
	margin-bottom: 0px;
}
.iconbox {
	border-radius: 4px;
	background-size: 75px;
}
.iconwrapper {
	width: 100%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(3, 33%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 5px;
	}
.with-height {
	/*height: calc(50% - 10px);*/
	height: 417px;
/*	max-height: 500px;*/
}	
#loadingx {
	position: absolute;
	font-family: "proxima-soft", sans-serif;
font-weight: 300;
font-style: normal;
	color:#D2D2D1;
	font-size: 1.4em;
	text-decoration: none;
	letter-spacing: 0.06em;
	line-height: 0.8em;		
	width: calc(100% + 12px);
	height: 30px;
	left: 0;
	margin-left: 0px;	
	/*top: 100%0;*/
	margin-top: 0px;
	z-index: 19998;
	text-align: left;
	padding-top: 0.3em;
	padding-bottom: 1.15em;
	padding-right: 0px;
	padding-left: 10px;
	border-radius: 0;
	background-color: rgba(54, 53, 50, 0.8);
	visibility: visible;
	pointer-events: none;
	}
#booksub {
	top: 0px;
	margin-top: 0px;
	width: 44%;
	min-width: 200px;
	max-width: 410px;
	height: calc(68% + 100px);
	left: 30%;
	margin-left: -228px;
	background-image:url(../img/studio.svg);
	background-size: 86%;
	background-position: 100% 100%;
	background-color: rgba(160,161,41,0.0);
}
		
	}/* min height 560*/
}/*min width 640*/


/*/////////////////////////////////////////////////////////////////*/

@media only screen and (min-width: 736px) {
	
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: 0;
	margin-bottom: -63px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
#picicons {
	width:417px;
	height: 100%;
	background-color: rgba(25,192,217,0.0);
	left: 70%;
	margin-left: -214.5px;
	bottom: 0;
	margin-bottom: 0px;
}
.iconwrapper {
	width: 100%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(3, 33%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 10px;
	}
.with-height {
	height: calc(100% - 53px);
}	
.iconbox {
	border-radius: 3px;
	background-size: 48px;
}
#booksub {
	top: 0px;
	margin-top: 0px;
	width: 44%;
	min-width: 200px;
	max-width: 4230px;
	height: calc(100% - 74px);
	left: 28%;
	margin-left: -238px;
	background-image:url(../img/studio.svg);
	background-size: 70%;
	background-position: 100% 100%;
	background-color: rgba(15,85,187,0.0);
}		
	
	
@media  (min-height: 320px) {
	.iconbox {
	border-radius: 3px;
	background-size: 60px;
}
	#booksub {
	top: 100%;
	margin-top: -35px;
	transform: translateY(-100%);
	width: 40%;
	min-width: 240px;
	max-width: 490px;
	height: calc(100% - 70px);
	left: 30%;
	margin-left: -228px;
	background-image:url(../img/studio.svg);
	background-size: 86%;
	background-position: 100% 50%;
	background-color: rgba(221,0,158,0.0);
}		
	
}
	
	
	
	
@media  (min-height: 560px) {
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: -68%;
	margin-bottom: 300px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
#picicons {
	width:417px;
	height: 100%;
	background-color: rgba(25,192,217,0.0);
	left: 70%;
	margin-left: -214.5px;
	bottom: 0;
	margin-bottom: 0px;
}
.iconbox {
	border-radius: 4px;
	background-size: 75px;
}
.iconwrapper {
	width: 100%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(3, 33%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 5px;
	}
.with-height {
	height: 417px;
}
	

	#booksub {
	top: 0px;
	margin-top: 10px;		  
	transform: translateY(0%);
	width: 44%;
	min-width: 200px;
	max-width: 4230px;
	height: calc(68% + 100px);
	left: 28%;
	margin-left: -238px;
	background-image:url(../img/studio.svg);
	background-size: 86%;
	background-position: 100% 100%;
	background-color: rgba(1,199,163,0.0);
}		
}/* min height 560*/
}/*min width 736*/



/*/////////////////////////////////////////////////////////////////*/




@media only screen and (min-width: 768px) {
	

	
@media  (min-height: 320px) {
	.iconbox {
	border-radius: 3px;
	background-size: 70px;
}
}
	
	
@media  (min-height: 560px) {
	
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: -80%;
	margin-bottom: 290px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
#picicons {
	width:45%;
	max-width: 800px;
	height: 100%;
	background-color: rgba(25,192,217,0.0);
	left: 50%;
	margin-left: -20px;
	bottom: 0;
	margin-bottom: 0px;
}
.iconwrapper {
	width: 100%;
	display: grid;
    grid-gap:0.25em;
	grid-template-columns: repeat(4, 25%);
	background-color: rgba(161,15,224,0.0);
    margin-bottom: 0em;
	padding-bottom: 5px;
	}
.with-height {
	height:40%;
	min-height: 300px;
	max-height: 350px;
}
.iconbox {
	border-radius: 4px;
	background-size: 70px;
}

	#booksub {
	top: 0px;
	margin-top: -30px;		  
	transform: translateY(0%);
	width: 44%;
	min-width: 390px;
	max-width: 410px;
	height: calc(68% + 100px);
	left: 37%;
	margin-left: -310px;
	background-image:url(../img/studio.svg);
	background-size: 86%;
	background-position: 100% 100%;
	background-color: rgba(210,123,4,0.0);
}	
		
}/* min height 560*/

	
@media  (min-height: 840px) {
		
#booksub {
	top: 0px;
	margin-top: 0px;
	width:  calc(48% + 17px);
	min-width: 100px;
	max-width: 800px;
	height: calc(80% - 304px);
	left: 50%;
	margin-left: -36px;
	background-image:url(../img/studio.svg);
	background-size: 100%;
	background-position: 0% 100%;
	background-color: rgba(41,11,213,0.0);
}	
	
	}/* min height 840*/
}/* min width 768*/






@media only screen and (min-width: 1024px) {
	
#booksub {
	top: 50%;
	margin-top: -50px;	
	width: 46%;
	max-width: 630px;
	float:left;
	left: 22%;
	margin-left: -210px;
	height: 200px;
	background-image:url(../img/studio2.svg);
	background-size: 100%;
	background-position: 100% 0%;
	background-color: rgba(6,131,223,0.0);
}
	
@media  (min-height: 320px) {
	.iconbox {
	border-radius: 4px;
	background-size: 75px;
}
	#booksub {
	top: 100%;
	margin-top: -68px;
	transform: translateY(-100%);
	width: 38%;
	min-width: 340px;
	max-width: 340px;
	height: calc(65% + 94px);
	left: 50%;
	margin-left: -370px;
	background-image:url(../img/studio.svg);
	background-size: 100%;
	background-position: 100% 100%;
	background-color: rgba(195,197,0,0.0);
}
}
	


@media  (min-height: 560px) {
	
#iconwrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: -58%;
	margin-bottom: 234px;
	left: 0;
	overflow-x: hidden;
	overflow-y:visible;
}
.with-height {
	height:50%;
	min-height: 380px;
	max-height: 500px;
}
	#booksub {
	top: 0px;
	margin-top: 0px;
			transform: translateY(0%);
	width: 38%;
	min-width: 340px;
	max-width: 340px;
	height: calc(65% + 94px);
	left: 50%;
	margin-left: -370px;
	background-image:url(../img/studio.svg);
	background-size: 100%;
	background-position: 100% 100%;
	background-color: rgba(3,159,32,0.0);
}
}/* min height 560*/
	
	
		
@media  (min-height: 680px) {
		
#booksub {
	top: 0px;
	margin-top: 0px;
	width:  calc(44.5% + 18px);
	min-width: 100px;
	max-width: 800px;
	height: calc(56% - 226px);
	left: 50%;
	margin-left: -20px;
	background-image:url(../img/studio2.svg);
	background-size: 100%;
	background-position: 0% 100%;
	background-color: rgba(56,24,241,0.0);
}	
	
	}/* min height 768*/
	
}/* min width 768*/






@media only screen and (min-width: 1366px) {
		
#booksub {
	top: 50%;
	margin-top: 120px;	
	width: 46%;
	max-width: 630px;
	float:left;
	left: 70%;
	margin-left: -868px;
	height: 200px;
	background-image:url(../img/studio2.svg);
	background-size: 100%;
	background-position: 100% 0%;
	background-color: rgba(222,0,132,0.0);
}



@media  (min-height: 560px) {

#booksub {
	top: 0px;
	margin-top: 0px;
	width: 38%;
	min-width: 200px;
	max-width: 500px;
	height: calc(60% + 132px);
	left: 50%;
	margin-left: -540px;
	background-image:url(../img/studio.svg);
	background-size: 100%;
	background-position: 100% 100%;
	background-color: rgba(242,122,6,0.0);
}
}/* min height 560*/
	
	
	
@media  (min-height: 768px) {

#booksub {
	top: 0px;
	margin-top: 0px;
	width:  calc(44.5% + 18px);
	min-width: 100px;
	max-width: 812px;
	height: calc(54% - 206px);
	left: 50%;
	margin-left: -25px;
	background-image:url(../img/studio2.svg);
	background-size: 100%;
	background-position: 0% 100%;
	background-color: rgba(8,244,241,0.0);
}	

}/* min height 768*/
	
	
}/* min width 1366*/