div#ExpandingIcons { margin-bottom:30px; margin-top:30px}



div#ExpandingIcons div.icons {display:flex; justify-content:center; background-color:rgba(0,0,0,0.5); padding:8px; flex-wrap:wrap}

div#ExpandingIcons div.icons > * { height:100px; position:relative; width:100px;}
div#ExpandingIcons div.icons > * {border:4px solid rgba(255,255,255,0.8); border-radius:10px; margin:8px}
div#ExpandingIcons div.icons > *  {transition-property:transform,border-color,opacity; transition-duration:0.4s}

div#ExpandingIcons div.icons > * > span {display:block; position:absolute; top:7px; left:7px; right:7px; bottom:7px; background-size:contain; background-position:center center; background-repeat:no-repeat}

div#ExpandingIcons div.icons > a.done {border-color:#99D350}


div#ExpandingIcons div.icons > *:hover  {transform:scale(1.1, 1.1); border-color:white}
div#ExpandingIcons div.icons > a.clicked {transform:translateY(-100px) scale(0.4, 0.4); opacity:0; transition-duration:0.8s}

div#ExpandingIcons div.texts > * > * {max-width:600px;margin-left:auto; margin-right:auto;}


div#ExpandingIcons div.texts > * {padding-left:20px; padding-right:20px}
div#ExpandingIcons div.texts > * {padding-top:0px; padding-bottom:0px; background-color:transparent; line-height:0; overflow:hidden; color:transparent;
								  transition-property:padding-top,padding-bottom,background-color,line-height,color;}

div#ExpandingIcons div.texts > *,
div#ExpandingIcons div.texts > * > h3 {transition-duration:1.1s}

div#ExpandingIcons div.texts > * > h3 {transition-property:margin-bottom; font-size:30px}

div#ExpandingIcons div.texts .selected h3 {margin-bottom:10px;}


div#ExpandingIcons div.texts > .selected {padding:20px; background-color:rgba(0,0,0,0.4); line-height:1.7; font-size:15px; color:black}


	div#ExpandingIcons div.texts h3 { background-position:left top; background-size:30px 100%; padding-left:40px; color:white;
									  background-repeat:no-repeat; width:auto; margin-left:auto; margin-right:auto;
	}


/*
@keyframes Disappear
{
	from {
		width:100px;
	}

	to {
		width:0px!important;
		display:none;
		opacity:0;
	}
}

div#ExpandingIcons > div.icons > a.clicked {animation-name:Disappear; animation-fill-mode:forwards; animation-iteration-count:1; animation-duration:1s;
											animation-direction:normal; animation-play-state:running;
}*/