
div.solutionsection
{
	position: relative;
	background-color: #ffffff;
	height: 45rem;
	width: 100%;
	z-index: 20;
}

div.solutionimage
{
	position: absolute;
	top: 0px;
	left: 0%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	background-image: url('images/ffrf-optimised.jpg');
	background-size: cover;
	background-position: 50% 50%;
}

div.solutionmainbody
{
	position: absolute;
	top: 0px;
	height: 100%;
	left: 50%;
	width: 50%;
	overflow: hidden;
}

div.solutionheadcontain
{
	position: relative;
	top: 3rem;
	text-align: center;
}

div.solutionheadtitle
{
	margin-bottom: 0.25em;
}

div.solutionheadtext
{
	font-size: 1.5em;
}

div.solutioninfocontain
{
	position: absolute;
	width: 100%;
	height: 72%;
	top: 28%;
}

div.solutionimagecontain
{
	position: relative;
}
div.solutiontextcontain
{
	position: relative;
}

div.solutionslidebutton
{
	border-color: #000000;
	width: 0.75rem;
	height: 0.75rem;
	margin: 0.5rem;
}
div.solutionbody
{
    text-align: center;
	position: absolute;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	width: 100%;
	left: 100%;
	top: 0%;
}
img.solutionimagecircle
{
	border-style: solid;
	border-radius: 1000px;
	border-color: #00FFFF;
	background-color: transparent;
	border-width: 0px;
	color: #FF00FF;
	width: 20rem;
}

div.solutioninfotitle
{
	font-size: 1.35em;
	margin-top: 0.5em;
}

div.solutioninfotext
{
	font-size: 1.15em;
	margin-top: 0.5em;
	width: 25rem;
	margin-left: auto;
	margin-right: auto;
	color: #777777;
}

div.solutionbuttonscontain
{
	position: absolute;
	top: 85%;
	width: 100%;
	margin: auto;
}


@media only screen and (min-width: 1600px)
{
	div.solutionsection {height: 55rem;}
	div.solutionheadcontain {top: 4rem;}
	img.solutionimagecircle {width: 25rem;}
	div.solutioninfocontain {height: 75%; top: 25%;}
	div.solutioninfotitle {font-size: 2.0rem;}
	div.solutioninfotext {font-size: 1.6rem; width: 30rem;}
	div.solutionslidebutton {width: 0.9rem; height: 0.9rem; margin: 0.6rem;}
}

@media only screen and (max-width: 800px) and (orientation:portrait)
{
	div.solutionsection {height: 45rem;}
	div.solutionimage {width: 100%; height: 15rem;}
	div.solutionmainbody {top: 15rem; height: 30rem; left: 0px; width: 100%;}
	div.solutionheadtext {font-size: 1.0em;}
	div.solutionheadcontain {top: 1.5rem;}
	div.solutioninfocontain {height: 75%; top: 25%;}
	img.solutionimagecircle {width: 12rem;}
	div.solutioninfotext {width: 15rem; font-size: 1.0em; margin-top: 0.25em;}
}

@media only screen and (min-width: 600px) and (max-width: 800px) and (orientation:portrait)
{
	div.solutioninfocontain {height: 70%; top: 30%;}
	div.solutionimagecontain {position: absolute; right: 50%; top: 0px; width: 17rem;}
	div.solutiontextcontain {position: absolute; left: 50%; top: 1.5rem; width: 17rem;}
	img.solutionimagecircle {width: 15rem;}
	div.solutioninfotext {width: 15rem; font-size: 1.0em; margin-top: 1.0em;}
}

@media only screen and (max-width: 800px) and (orientation:landscape)
{
	div.solutionsection {height: 36rem;}
	div.solutionimage {width: 100%; height: 15rem;}
	div.solutionmainbody {top: 15rem; height: 21rem; left: 0px; width: 100%;}
	div.solutionheadtext {font-size: 1.0em;}
	div.solutionheadcontain {top: 1.5rem;}
	div.solutioninfocontain {height: 65%; top: 35%;}
	div.solutionimagecontain {position: absolute; right: 50%; top: 0px; width: 12rem;}
	div.solutiontextcontain {position: absolute; left: 50%; top: 0.75rem; width: 12rem;}
	img.solutionimagecircle {width: 10rem;}
	div.solutioninfotext {width: 12rem; font-size: 1.0em; margin-top: 0.25em;}
	div.solutionbuttonscontain {top: 75%;}
}