div.whatdosection
{
	position: relative;
	background-color: #ffffff;
/*	height: 40rem;*/
	width: 100%;
	z-index: 20;
	text-align: center;
}

div.whatdosectionhead
{
	color: #00a4de;
}

div.whatdointrocontain
{
	display: inline-block;
	width: 75%;
}

div.whatdointro1
{
	text-align: center;
	/*font-size: 2.5rem;*/
	/*font-weight: lighter;*/
}

span.whatdointro1high
{
	/*font-family: LatoBold;*/
/*	font-weight: bold;*/
	color: #00a4de;
}

div.whatdointro2
{
	text-align: center;
	padding: 0.25rem 0rem;
	/*font-size: 1.2rem;*/
	color: #777777;
}

div.whatdointro3
{
	text-align: center;
	padding: 0.25rem 0rem;
	/*font-size: 1.2rem;*/
	/*font-family: LatoBold;*/
/*	font-weight: bold;*/
	color: #777777;
}

div.whatdointro2over
{
	color: #000000;
}

div.whatdointro3over
{
	color: #000000;
}

div.whatdoinfocontain
{
	position: relative;
	width: 100%;
	text-align: center;
}

div.whatdoinfobox
{
	position: relative;
	display: inline-block;
	width: 25rem;
	height: 25rem;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

img.whatdoinfoboximg
{
	position: absolute;
	width: 100%;
	left: 0%;
	top: 0%;
	opacity: 1.0;
	transition: top 0.5s ease-in-out, left 0.5s ease-in-out, width 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

img.whatdoinfoboximgover
{
	width: 80%;
	left: 10%;
	top: 10%;
	opacity: 0.25;
}

div.whatdoinfoboxtitle
{
	position: absolute;
	width: 100%;
	left: 0%;
	top: -25%;
	/*font-size: 2em;*/
	/*font-family: LatoRegular;*/
/*	font-weight: bold;*/
	color: #333333;
	opacity: 0.0;
	transition: top 0.5s ease-in-out, opacity 0.5s linear;
}

div.whatdoinfoboxtitleover
{
	top: 25%;
	opacity: 1.0;
}

div.whatdoinfoboxtext
{
	position: absolute;
	width: 23rem;
	left: 1rem;
	top: 100%;
	/*font-size: 1rem;*/
	color: #666666;
	opacity: 0.0;
	transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

div.whatdoinfoboxtextover
{
	top: 50%;
	opacity: 1.0;
}


@media only screen and (min-width: 1600px)
{
/*	div.whatdosection {height: 45rem;}*/
	/*div.whatdointro1 {font-size: 3rem;}*/
	/*div.whatdointro2 {font-size: 1.5rem;}*/
	/*div.whatdointro3 {font-size: 1.5rem;}*/
	div.whatdoinfobox {width: 30rem; height: 30rem;}
	/*div.whatdoinfoboxtitle {font-size: 2.5em;}*/
	/*div.whatdoinfoboxtext {width: 28rem; left: 1rem; font-size: 1.25rem;}*/
	div.whatdoinfoboxtext {width: 28rem; left: 1rem;}
}

@media only screen and (max-width: 800px)
{
/*	div.whatdosection {height: 62rem;}*/
	div.whatdointrocontain {display: block; width: 90%; margin: 0rem auto;}
	/*div.whatdointro1 {font-size: 2rem;}*/
	/*div.whatdointro2 {font-size: 1rem;}*/
	/*div.whatdointro3 {font-size: 1rem;}*/
	div.whatdoinfobox {width: 15rem; height: 15rem;}
	img.whatdoinfoboximg {width: 150%; left: -25%; top: -25%;}
	img.whatdoinfoboximgover {width: 100%; left: 0%;	top: 0%;}
	/*div.whatdoinfoboxtitle {font-size: 1.5em;}*/
	/*div.whatdoinfoboxtext {width: 100%; left: 0rem; font-size: 1rem;}*/
	div.whatdoinfoboxtext {width: 100%; left: 0rem;}
}