.icon.blue1.shadow, .icon.blue2.shadow, .icon.blue3.shadow, .icon.blue4.shadow, .icon.blue5.shadow
{
	height:120px;
}

.diagram-container
{
	
	text-align: center;
}

.diagram
{
	max-width: 1300px;
	display: inline-block;
}

.category
{
	display: flex;
	/* flex-wrap: wrap; */
	height: 120px;
	margin-bottom: 20px;
}

.shadow
{
	box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4);
}

.icon
{
	width: 120px;
	flex-shrink: 0;
	border-radius: 50%;
}

.icon > img
{
	margin-top: 10px;
 	margin-left:10px;   }

.linespacer
{
	width: 4%;
}

.howto
{
	width: 35%;
	font-size: 18pt;
	line-height: 75px;
}

.details
{
	width: 55%;
	max-width: 55%;
	font-size: 12pt;
}

.box
{
	border-radius: 25px;
	padding: 25px;
	/* justify-content: center; */
	/* display: table-cell;
    vertical-align: middle; */
}



.blue1
{
	background-color: rgb(218, 227, 242);
}

.blue2
{
	background-color: rgb(181, 199, 229);
}

.blue3
{
	background-color: rgb(144, 170, 217);
}

.blue4
{
	background-color: rgb(51, 85, 148);
	color: white;
}

.howto.blue3
{
    padding-top: 1em;
    padding-bottom: 0;
    line-height: 1.5em; 
}

.blue5
{
	background-color: rgb(34, 56, 98);
	color: white;
}

.linespacer
{
	background: linear-gradient(0deg, 
	                          #88888800 0%,
							  #88888800 45%,
							  #888888ff 46%,
							  #888888ff 54%,
							  #88888800 55%,
							  #88888800 100%);
}


.topthing
{
	width: 100%;
	display: flex;
	margin-bottom:15px;
}

.topthing-text
{
	display: inline-block;
	font-size: 24px;
}

.emptyicon
{
	width: 10%;
}

.emptyspacer
{
	width: 5%;
}

.topthing-text-left
{
	margin-left: 20px;
	width: 35%;
	text-align: center;
}

.topthing-text-right
{
	width: 55%;
	text-align: center;
}

#details1, #details3
{
	margin-top: 20px;
}

#details2
{
	margin-top: 10px;
}

#details4
{  	margin-top: -20px;
    color: white; 
    margin-left: -15px;
    margin-right: -15px;     }  

#details4 > a
{
	margin-top: 0;
 	color: white;
 }  

#details5

{
	margin-top: -10px;
 	color: white;
}

#details5 > a

{
 	color: #beccff
}   

.bottomthing
{
	width: 100%;
	display: flex;
	margin-top:15px;
}

.bottomthing-text
{
	display: inline-block;
	font-size: 12pt; 
}

.bottomthing-text-left
{
	margin-left: 20px;
	width: 35%;
	text-align: center;
}

.bottomthing-text-right
{
	width: 55%;
	text-align: center;
}

@media screen and (max-width: 1050px)
{
	.topthing
	{
		display: none;
	}

	.category-container
	{
		max-width: none;
	}

	.category
	{
		/* flex-wrap: wrap; */
		display: block;
		width: 100%;
		height: auto;
	}

	.howto, .icon, .details, .linespacer
	{
		margin-left: auto;
		margin-right: auto;
		/* height: auto;
		margin-top: auto;
		margin-bottom: auto; */
		/* background-color: red; */
	}


	.linespacer
	{
		display: block;
		height: 30px;
		width: 15%; 
		background: linear-gradient(90deg, 
	                          #88888800 0%,
							  #88888800 45%,
							  #888888ff 46%,
							  #888888ff 54%,
							  #88888800 55%,
							  #88888800 100%);
	}

	.category-container
	{
		height: 470px;
	}

	#details1, #details2, #details3
	{
		margin-top: 10px;
	}


	@media screen and (max-width: 850px)
	{
		.howto, .details
		{
			width: 80%;
			max-width: none;
		}

		

		.box
		{
			padding: 10px;
		}

		.category-container
	{
		height: 420px;
	}
	}
}