:root{
	--angle90:polygon(50% 49%, 1% 0, 99% 0);
	--angle120:polygon(100% 0, 100% 20%, 50% 49%, 0 20%, 0 0);
	--angle45:polygon(50% 49%, 30% 0, 70% 0);
	--angle22:polygon(0 0, 100% 0, 53% 100%, 44% 100%);

	--color1:#8200B4;
	--color2:#BD0078;
	--color3:#68FFC2;
	--color4:#DCDDDE;

	--color1a:#4B0068;
	--color2a:#720048;
	--color3a:#38B281;
	--color3c:#245441;

	--color1b:rgba(130,0,180,0.1);
	--color2b:rgba(189,0,120,0.1);
	--color3b:rgba(48,117,87,0.1);

	--gradient1:linear-gradient(330deg, var(--color1a) 50%, var(--color1) 100%);
	--gradient2:linear-gradient(330deg, var(--color2a) 50%, var(--color2) 100%);
	--gradient3:linear-gradient(330deg, var(--color3a) 50%, var(--color3) 100%);
	--gradient4:linear-gradient(-160deg, #888 20%, #222 100%);

	--gradientBW1:linear-gradient(-45deg, rgba(0,0,0,1) -50%, rgb(130, 130, 130) -0%,  rgba(255,255,255,1) 60%);
	--gradientBW2:linear-gradient(120deg, rgba(0,0,0,1) -150%, rgba(255,255,255,1) 70%);


	/* --slice2:polygon(0 0, 100% 0, 100% 49%, 0 49%); *//* 180deg */
	--slice2:polygon(100% 0, 100% 49%, 50% 49%, 0 49%, 0 0);/* 180deg */
	--slice3:polygon(100% 0, 100% 20%, 50% 49%, 0 20%, 0 0);/* 120deg */
	--slice4:polygon(100% 0, 99% 0, 50% 49%, 1% 0, 0 0);/* 90deg */
	--slice5:polygon(100% 0, 86% 0, 50% 49%, 14% 0, 0 0);/* 72deg */
	--slice6:polygon(50% 49%, 22% 0, 78% 0);/* 60deg */
	--slice7:polygon(100% 0, 73.5% 0, 50% 49%, 26.5% 0, 0 0);/* 51.4deg */
	--slice8:polygon(100% 0, 70% 0, 50% 49%, 30% 0, 0 0);/* 45deg */
	--slice9:polygon(100% 0, 67.6% 0, 50% 49%, 32.4% 0, 0 0);/* 40deg */
	--slice10:polygon(100% 0, 66% 0, 50% 49%, 34% 0, 0 0);/* 36deg */
}
@font-face {
	font-family: GT-light;
	src: url('../font/GT-Eesti-Display-Light.woff');
	font-weight: lighter;
  }
  @font-face {
	font-family: GT-regular;
	src: url('../font/GT-Eesti-Display-Regular.woff');
	font-weight: lighter;
  }
  @font-face {
	font-family: GT-bold;
	src: url('../font/GT-Eesti-Display-Bold.woff');
	font-weight: lighter;
  }
  @font-face {
	font-family: GT-Med;
	src: url('../font/GT-Eesti-Display-Medium.woff');
	font-weight: lighter;
  }
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: GT-light;
	list-style: none;
}
body{
	background: rgb(186,186,186);
	background: linear-gradient(328deg, rgba(186,186,186,1) 0%, rgba(222,222,222,1) 50%, rgba(252,252,252,1) 90%, rgba(255,255,255,1) 100%);
	position: relative;
}
main{
	width:100%;
	height:100vh;
	margin: auto;	
	display: flex;
	align-items: center;
    justify-content: space-around;	
	overflow: hidden;
}
.circle-container{
	width:50vw;
	height: 50vw;
	max-width:80vh;
	max-height:80vh;
	display: flex;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	align-items: center;
    justify-content: space-evenly;
}

#logo{
	height: auto;
	height: 3vw;
	width: 9vw;
	background: url('../IMG/1x/logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90%;
	position: absolute;
	right:1em;
	top:1em;
}
/***************************************************************/
/****** breadcrumbs menu *****/
/***************************************************************/

#crumbs{
	/* width:100%; */
	display: none;
	padding:5px;
	position: absolute;
	top:10px;
	left: 10px;
	align-items: center;
}
#back-btn,#home-btn{
	width:20px;
	height:20px;
	margin-right: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
	top:1vw;
	left: 1vw;
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
}
#back-btn{
	border: 2px solid #222;
	background: url('../IMG/1x/back.png');
	background-repeat: no-repeat;
	background-size: 25%;
	background-position: center;
	transform: scaleX(-1);
	
}
#home-btn{
	background: url('../IMG/1x/home.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	
}
#back-btn:hover{
	transform: scaleX(-1.1) scaleY(1.1);
}
#home-btn:hover{
	transform: scale(1.1);
}

#crumbs-list{
	display: flex;
	align-items: center;
	padding-top: 5px;
}
#crumbs-list li{
	margin-left: 30px;
	position: relative;
	line-height: 150%;
	cursor: pointer;
	padding: 1px 7px;
	border-radius: 10px;
}
#crumbs-list li:hover{
	background: rgba(0,0,0,0.03);
}
#crumbs-list li:last-child{
	pointer-events: none !important;
}
#crumbs-list li::before{
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	background: url('../IMG/1x/back.png');
	background-repeat: no-repeat;
	background-size: 30%;
	background-position: center;
	left:-25px;
}


/***************************************************************/
/****** side menu *****/
/***************************************************************/

nav{
	width: 80vh;
	height: 30px;
	/* background: #333; */
	position: absolute;
	left:0;
	top:5vh;
	display: flex;
	justify-content: space-around;
	transform-origin: left bottom;
	transform: rotate(90deg);
	animation: slide 0.3s ease-in;
}
nav ul{
	width: 100%;
	display: flex;
	justify-content: space-around;
}

nav ul li{
	padding:10px;
	background: #fff;
	box-shadow: 0 -10px  15px -10px rgba(0,0,0,0.5);
	color: #333;
	font-size: 0.8em;
	text-align: center;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	transition: all 0.2s ease-in;
}
nav ul .nav-li{
	width:110px;
}
nav ul .nav-li:hover{
	cursor: pointer;
	background-color: #333;
	color:#fff;
	/* font-size: 1.2em;
	margin-top: -5px; */
}

/***************************************************************/
/***** All categories NAV *****/
/***************************************************************/

#all-categories{
	position: relative;
	width:150px;
	font-weight: bold;
	margin-top: -5px;
	padding: 12px;
}
li#all-categories:hover{
	background: rgb(0,0,0);
	background: linear-gradient(45deg, rgb(59, 59, 59) 0%, rgb(179, 178, 178) 100%);
	margin-top: -120px;
    padding-top: 120px;
}
li#all-categories:hover #all-categories-wrapper{
	display: flex;
}
#all-categories-wrapper{
	display: none;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	border-radius: 1.5vw;
	position: absolute;
	left: 140px;
	bottom:50px;
	transform-origin: left bottom;
	transform: rotate(-90deg);
	
	/* padding:5px; */
	/* width:100px; */
	animation: grow-and-speen-90 0.3s ease-in;
	
}
#all-categories-wrapper li{
	box-shadow: none;
}
#all-categories-wrapper>li{
	border-radius: 1vw;
	margin: 10px;
	font-size: 1.2em;
	padding: 2px;
}

#all-categories-wrapper>li:hover{
	background: #ddd;
}

li#matrices-nav:hover{
	padding-top: 10px;
}
#matrices-nav ul{
	display: none;
	flex-direction: column;
	justify-content: space-between;
	padding: 2px;
	
}

#matrices-nav:hover ul{
	display: flex;
	transition: all 0.3s ease-in;
}

#matrices-nav>ul>li{
	border-radius: 0.8vw;
	margin: 5px;
	font-size: 1em;
	padding: 2px;
	background:#ccc;
	font-weight: 300;
	
}
#matrices-nav>ul>li:hover{
	background:#aaa ;
}

/***************************************************************/
/***** COLORS CLASSES *****/
/***************************************************************/

.color-1{
	background: var(--color1);
	background: var(--gradient1);
	color:#fff;
}
.color-2{
	background: var(--color2);
	background: var(--gradient2);
	color:#fff;
}
.color-3{
	background: var(--color3);
	background: var(--gradient3);
	color:var(--color3c);
}
.color-4{
	background: var(--color4);
	background: var(--gradient4);
	color:#fff;
}

@keyframes grow {
	from {transform: scale(0);}
	to {transform: scale(1);}
  }

  

  @keyframes grow-and-speen-45 {
	from {transform:rotate(0deg) scale(0);}
	to {transform:rotate(-45deg) scale(1);}
  }
  @keyframes grow-and-speen-22 {
	from {transform:rotate(-90deg) scale(0);}
	to {transform:rotate(0deg) scale(1);}
  }

  @keyframes grow-and-speen-90 {
	from {transform:rotate(-180deg) scale(0);}
	to {transform:rotate(-90deg) scale(1);}
  }

  @keyframes slide {
	from {left:-50px;}
	to {left:0;}
  }

  @keyframes slide2 {
	from {
		opacity: 0;
		bottom:-150px;}
	to {
		opacity: 1;
		bottom:50px;}
  }

  @keyframes fade {
	from {
		opacity: 0;}
	to {
		opacity: 1;}
  }