/* Alternative colors: 76d1ac / 2D8654 bright green; #02243C/022481 midnight blue; #005DB3 endeavour; #5195CE/#242395 danube; 99ccff? span e60d44 */

/* -------- Main defaults -------- */

@font-face {
	font-family: OpenSans-Regular;
	src: url(/default/fonts/Open_Sans/OpenSans-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: OpenSans-Light;
	src: url(/default/fonts/Open_Sans/OpenSans-Light.ttf);
	font-weight: normal;
}

@font-face {
	font-family: OpenSans-Semibold;
	src: url(/default/fonts/Open_Sans/OpenSans-Semibold.ttf);
	font-weight: normal;
}

@font-face {
	font-family: OpenSans-Bold;
	src: url(/default/fonts/Open_Sans/OpenSans-Bold.ttf);
	font-weight: normal;
}

body {
	background-color: white;
	color: #022481;
	font: normal 16px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;
}

/* -------- Top layout -------- */

#logindetails {
	padding: 5px 0;
	width: 1170px;
	color: #999999;
	margin: 0 auto;
	font-size: 90%;
}

/* -------- Area for all content -------- */

div.global {
	margin: 0 auto;
	border-radius: 0;
	background-color: white;
	width: 100%;
	padding-bottom: 0;
}

#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer, #footercontainer {
	width: 1170px;
	margin: 0 auto;
}

#sectioncontainer {
	margin-bottom: 20px;
}

div#searchSite {
	right: 5px;
	top: 10px;
}

/* -------- Figure border -------- */

figure {
	border: 1px #e8e8e8 solid;
}

/* -------- Contact us / support -------- */

#support1 .form {
	margin: 0 auto;
}

/* -------- Menu stuff -------- */

#menucontainer, #submenucontainer {
	background-color: #2D8654;
	border-radius: 0;
	font-family: 'OpenSans-Light', Verdana, Helvetica, sans-serif;
	width: 100%;
}

nav#submenucontainer.private {
	background-color: #999999;
}

/* div.activeMenu:nth-child(1), div.inactiveMenu:nth-child(1) {
	display: none;
} */

#subMenuitems div.activeMenu:nth-child(1), #subMenuitems div.inactiveMenu:nth-child(1),
#subMenuitems.private div.activeMenu:nth-child(1), #subMenuitems.private div.inactiveMenu:nth-child(1) {
	display: inline-table;
}

.activeMenu, .inactiveMenu {
	font-size: 120%;
	padding: 0;
}

.inactiveMenu a, .inactiveMenu a:link, .inactiveMenu a:visited {
	color: white;
	background-color: #2D8654;
}

.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {
	color: white;
	background-color: #242395;
}

#subMenuitems div.activeMenu a, #subMenuitems div.inactiveMenu a:hover {
	color: white;
	background-color: #005DB3;
	font-size: 80%;
}

#subMenuitems div.inactiveMenu a {
	color: white;
	background-color: #242395;
	font-size: 80%;
}

.activeMenu a.private, .activeMenu a.private:link, .activeMenu a.private:visited, .inactiveMenu a.private:hover {
	color: white;
	background-color: #999999;
}

.activeOptionsMenu, .inactiveOptionsMenu  {
	font-size: 100%;
}

.inactiveOptionsMenu a, .inactiveOptionsMenu a:link, .inactiveOptionsMenu a:visited {
	color: gray;
	border: 1px solid gray;
	background-color: white;
}

.activeOptionsMenu a, .activeOptionsMenu a:link, .activeOptionsMenu a:visited, .inactiveOptionsMenu a, .inactiveOptionsMenu a:hover {
	color: white;
	border: 1px solid gray;
	background-color: gray;
}

#subMenuitems div.activeMenu a.private, #subMenuitems div.inactiveMenu a.private:hover {
	background-color: gray;
}

#subMenuitems div.inactiveMenu a.private {
	background-color: #999999;
}

/* -------- General links -------- */

a {
	color: #2D8654;
	text-decoration: none;
}

a.private {
	font-style: italic;
}

a:hover {
	color: #022481;
}

/* -------- Commonly used classes for layout -------- */

.subtitle {
	color: #909090;
}

/* -------- Defining common elements -------- */

p {
	font-size: 100%;
	line-height: 150%;
}

i {
	color: #022481;
}

b {
	font-family: 'OpenSans-Semibold', Verdana, Helvetica, sans-serif;
}

h1 {
	color: #022481;
	font-size: 180%;
	font-family: 'OpenSans-Light', Verdana, Helvetica, sans-serif;
}

.greeting h1#sectionHeading {
	visibility: hidden;
	margin: 0;
	display: none;
}

div.solution h1 {
	font-size: 125%;
}

h2 {
	color: #022481;
	font-size: 150%;
	font-family: 'OpenSans-Light', Verdana, Helvetica, sans-serif;
	line-height: 125%;
}

h3 {
	color: #022481;
	font-size: 125%;
	font-family: 'OpenSans-Light', Verdana, Helvetica, sans-serif;
	line-height: 125%;
}

h4 {
	font-weight: normal;
	color: #022481;
	font-size: 110%;
	font-family: 'OpenSans-Regular', Verdana, Helvetica, sans-serif;
}

img.logo {
	margin: 0 auto;
	display: block;
}

img.right {
	float: right;
}

img.left, .left {
	float: left;
}

.emphasis {
	font-size: 145%;
	text-align: center;
	padding: 5px 0;
}

.annotation {
	float: none;
	width: 80%;
/*	padding: 10px 20px;
	margin: 10px auto;
	text-align: center; */
}

.generic4 p.annotation {
	margin: 0 auto;
	text-align: center;
}

.opening {
    padding: 1% 10%;
	text-align: center;
	min-height: 225px;
}

.introduction {
	font-size: 125%;
}

/* -------- Main sidebar formatting -------- */

#sidebar {
	border-left: 1px #e8e8e8 solid;
	line-height: 140%;
}

#sidebar p {
	font-size: 90%;
}

#sidebar i {
	color: red;
}

/* -------- About section -------- */

div.about {
	background-color: white;
	border-radius: 10px;
	border: 1px solid #242395;
	padding: 10px 0;
	margin: 10px 0;
	width: 70%;
	text-align: center;
	margin: 5px auto;
}

div.about p {
	color: #242395;
	font-size: 140%;
}

div.compare ul {
	margin: 10px 120px;
}

div.compare li {
	margin: 5px 0 40px 5px;
	list-style: none;
	line-height: 180%;
}

div.compare img {
	margin: 5px;
}

/* -------- 2-Add content -------- */

div.numbers {
	font-size: 200%;
	float: left; 
	width: 42px; 
	height: 42px; 
	color: white; 
	text-align: center;
	margin: 10px 10px 10px 0;
	background-color: #2D8654; 
	border-radius: 10px;
}

div.content-points {
	margin: 10px 0;
	padding: 10px;
}

img.screenshot, img.admin {
	padding: 30px;
	margin: 30px auto;
	display: block;
	border: 1px solid #cccccc;
	border-radius: 10px;
}

div.add-content {
	width: 90%;
	margin: 0 auto;
}

/* -------- Content layouts -------- */

.generic13 tr {
	width: 100%;
}

.manage {
	background-color: white;
	margin: 0 auto;
	padding: 0 5px;
	min-width: 125px;
	text-align: center;
	z-index: 100;
	position: fixed!important;
	left: 10px;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.manage ul {
	text-align: left;
	list-style-type: none;
	font-size: 100%;
	padding: 2px;
	line-height: 160%;
}

.manage a:hover {
	color: black;
}

.manage h3 {
	text-align: left;
	margin-top: 5px;
	padding-top: 5px;
}

.generic11 img.screenshot {
	padding: 0;
	margin: 5px;
	float: left;
	border-radius: 5px;
	border: 1px solid silver;	
}

/* -------- FAQs blog -------- */

div.blogYear, div.blogMonth, div.blogCount, div.commentCount, div.blogContributors {
	padding: 0 3px;
}

.blogContent {
	height: auto;
	border: 0;
	padding: 20px;
	background-color: #efefef;
}

.blogContent:after {
	height: auto;
}

.blog1 div.blogMonthSummary {
	display: none;
}

/* -------- Self-help -------- */

div.manual {
	margin: 0 auto;
	padding: 0 5px;
	max-width: 140px;
	z-index: 100;
	position: fixed!important;
	left: 0;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	background-color: white; 
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.manual ul {
	text-align: right;
	list-style-type: none;
	font-size: 75%;
	padding: 2px;
	line-height: 160%;
}

.manual li {
	margin-bottom: 5px;
}

.manual a:hover {
	color: black;
}

div.manualNav {
	display: none;
	text-align: center;
	font-size: 125%;
}

.manual h3 {
	text-align: left;
	margin-top: 5px;
	padding-top: 5px;
}

.generic6 article {
	margin: 0 auto;
	width: 90%;
}

.generic6 article img.admin {
	display: block;
	margin: 0 auto;
}

img.social-icon {
	float: left;
	margin: 5px 10px 10px 0;
}

.generic6 section {
	margin: 30px auto;
}

#generic4 div.tabular div div.normal, #sectionTypes div.tabular div div.normal2 {
    width: 15%;
}

#sectionTypes div.tabular div div.extraWide {
	width: 60%;
}

div.tabular div div.lineItem.manual-admin {
	width: 75%;
}

/* -------- Section types -------- */

div#section-types div.tabular div div.extraWide {
    width: 50%;
}

div.sectionTypesNav {
	font-size: 125%;
	text-align: center;	
	margin: 0 auto;
	padding: 20px 0;
	width: 80%;
}

.generic19 section {
	border-top: 1px solid #cccccc;
}

.generic19 section:nth-child(1) {
	border-top: 0;
}

div.sectionTypes {
	float: left;
	width: 30%;
	margin: 1%;
}

.generic19 img.right {
    float: right;
	padding: 0 0 10px 10px;
}

div.sectionTypes h3 {
	text-align: center;
	font-size: 110%;
    margin-top: 30px;
}

p.right {
	padding-right: 20px;
}

div.sectionTypes ul {
	margin-left: 20px;
}

div.sectionTypes li {
	list-style-type: square;
	font-size: 75%;
}

div.sectionTypes a img {
    width: 100%;
	margin: 0;
	border: 1px solid #efefef;
	border-radius: 10px;
}

div.information {
	min-height: 580px;
}

div#blank div.information {
	min-height: 400px;
}

.generic19 span.subtitle {
	font-size: 100%;
	font-family: 'OpenSans-Light', Verdana, Helvetica, sans-serif;
}

/* -------- Checklist and Payment plans -------- */

div.payment-plans {
	float: left;
	width: 100%;
	margin: 0 auto;
}

div.attributes {
	width: 52%;
	float: left;
}

div.plan {
	width: 16%;
	float: left;
}

div.plan .blockCenter, div.checklist .blockCenter {
	margin-bottom: 0;
	text-align: center;
}

div.plan div.tabular div div.lineItem, div.attributes div.tabular div div.lineItem {
	width: 98%;
}

div.attributes div.tabular div div.lineItem, div.checklist div.tabular div div.lineItem {
	text-align: right;
}

div.payment-plans div.all-plans p {
	background-color: #f5f5f5;
}

div.checklist {
	float: left;
	width: 50%;
	padding-bottom: 40px;
}

div.checklist div.tabular div div.lineItem, div.checklist div.tabular div div.firstLineItem {
	width: 90%;
}

div.checklist img {
	margin: 5px 0;
}

div.checklist .headerRecord {
	height: 5px;
}

/* -------- Features and videos -------- */

div.features div.point, div.videos div.point {
	min-height: 200px;
}

div.videos div.point {
	height: 350px;
}

div.features div.content {
	padding: 0 30px 0 300px;
}

div.videos div.content {
	padding: 0 0 0 450px;
}
	
span {
	color: #990000;
}

div.features img {
	border-radius: 20px;
}

iframe.video-wxd {
	width: 420px;
	height: 260px;
}

/* -------- Greeting page formatting -------- */

.welcomeText, .welcomeText p {
	font-size: 110%;
	line-height: 150%;
}

section.information {
	overflow: hidden;
	width: 100%;
	text-align: center;
}

div.home {
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	overflow: hidden;
	display: inline-block;
	margin: 20px;
	padding: 10px;
	height: 320px;
	width: 300px;
	float: none;
	line-height: 248px;
}

img.home-info {
	margin: 0;
	border: 1px solid #efefef;
	border-radius: 10px;
}

div.proposition {
	margin: 50px auto 0;
	min-height: 375px;
}

div.solution {
	float: left;
	width: 50%;
	height: 380px;
	margin-right: 1%;
}

.html5-video-player {
	background-color: white;
}

div.presentation {
	float: right;
	margin: 10px auto;
}

div.presentation p {
	font-size: 75%;
	margin: 10px auto;
	text-align: center;
}

div.presentation iframe {
	width: 420px;
	height: 275px;
	display: block;
    margin: 30px auto 0;
}

section.clients {
	overflow: hidden;
	width: 100%;
	text-align: center;
	margin: 20px auto;
}

div.client {
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	overflow: hidden;
	display: inline-block;
	border: 1px solid silver;
	border-radius: 10px;
	margin: 20px;
	padding: 10px;
	height: 182px;
	width: 300px;
	float: none;
	line-height: 248px;
	-webkit-transform: scale(1.0) rotate(0deg);
	-ms-transform: scale(1.0) rotate(0deg);
	-moz-transform: scale(1.0) rotate(0deg);
	-o-transform: scale(1.0) rotate(0deg);
	transform: scale(1.0) rotate(0deg);
	-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;  
	-ms-transition: -ms-transform 0.5s ease-in-out 0.2s;  
	-moz-transition: -moz-transform 0.5s ease-in-out 0.2s;  
	-o-transition: -o-transform 0.5s ease-in-out 0.2s;  
	transition: transform 0.5s ease-in-out 0.2s;
}

div.client div.clientLogo {
	clear: both;
	width: 100%;
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	overflow: hidden;
}

div.client.txt div.clientLogo {
	z-index: -100;
}

div.client div.clientLogo img {
	border: 0;
	padding: 0;
	margin: 10px auto;
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
	-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;  
	-ms-transition: -ms-transform 0.5s ease-in-out 0.2s;  
	-moz-transition: -moz-transform 0.5s ease-in-out 0.2s;  
	-o-transition: -o-transform 0.5s ease-in-out 0.2s;  
	transition: transform 0.5s ease-in-out 0.2s;
}

div.client.txt div.clientLogo img {
	-webkit-transform: translate(-275px,-275px);
	-ms-transform: translate(-275px,-275px);
	-moz-transform: translate(-275px,-275px);
	-o-transform: translate(-275px,-275px);
	transform: translate(-275px,-275px);
	-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;  
	-ms-transition: -ms-transform 0.5s ease-in-out 0.2s;  
	-moz-transition: -moz-transform 0.5s ease-in-out 0.2s;  
	-o-transition: -o-transform 0.5s ease-in-out 0.2s;  
	transition: transform 0.5s ease-in-out 0.2s;
}

div.client div.clientText {
	display: inline-block;
	line-height: normal;
	width: 100%;
	z-index: 10;
	opacity: 0;
	transition: all 0.5s ease-in-out 0.2s;
}

div.client.txt div.clientText {
	opacity: 1;
	transition: all 0.5s ease-in-out 0.2s;

}	

div.client.txt {
	-webkit-transform: scale(1.0) rotate(0deg);
	-ms-transform: scale(1.0) rotate(0deg);
	-moz-transform: scale(1.0) rotate(0deg);
	-o-transform: scale(1.0) rotate(0deg);
	transform: scale(1.0) rotate(0deg);
	-webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;  
	-ms-transition: -ms-transform 0.5s ease-in-out 0.2s;  
	-moz-transition: -moz-transform 0.5s ease-in-out 0.2s;  
	-o-transition: -o-transform 0.5s ease-in-out 0.2s;  
	transition: transform 0.5s ease-in-out 0.2s;
}

div.client:hover, div.client.txt div.clientLogo img, div.client div.clientLogo img {
	transition-delay: 0.2s;
}

div.site {
	width: 30%;
}

div.site img {
	border-radius: 10px;
}

div.clients {
	height: 400px;
}

/* -------- Footer amendments -------- */

#footercontainer {
	margin: 0 auto;
	border: 0;
	background-color: #2D8654;	
	font-size: 85%;
	height: 175px;
	width: 100%;
	color: white;	
}

.footerContent {
	border: 0;
	padding: 5px 0;
	margin: 0 auto;
	width: 1170px;
}

.footerContent h3 {
	color: white;
}

.footerContent a {
	color: #cccccc;
}

.footerContent a:hover {
	color: #242395;
}

/* -------- Classes used with divs for screen layout -------- */

.form {
	border: 1px solid gray;
	background-color: #fffffa;
}

/* -------- Highlight news and main newsitem module -------- */

.newsDate {
	font-style: italic;
}

.newsTitle {
	font-weight: bold;
}

.newsContent {
	font-size: 90%;
}

.item {
	border-bottom: 1px #e8e8e8 solid;
}

.generic div.item {
	border-bottom: 0;
}

.newsitems p {
	line-height: 150%;
}

/* -------- Used at top of listings -------- */

.headerRecord, .headerRecord a {
	font-weight: bold;
	color: gray;
}

/* -------- Paypal payment page -------- */

body#donate div#freestyle div.blockCenter.form.columnsWide2, body#pay div#freestyle div.blockCenter.form.columnsWide2 {
	border-radius: 20px;
}

input.paypalButton {
	width: auto;
}

/* -------- Administration documents groups -------- */

#documents1 div.tabular div div.normal {
    min-width: 130px;
}

/* -------- Smartphones (portrait and landscape) from 0 - 319px -------- */

@media only screen and (min-width: 0px) and (max-width: 319px) {

	body {font: normal 11px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	#sectioncontainer, #menucontainer, #submenucontainer, #logindetails, #bannercontainer, .footerContent {width: 96%;}
	div.global {padding: 0;}
	img.logo {width: 80%; margin-top: 20px;}
	img.sites {width: 100%;}
	div.solution {float: none; height: 375px; margin: auto; width: 95%;}
	div.solution ul {padding-left: 15px;}
	div.presentation {float: none; width: 80%;}
	div.presentation iframe {width: 240px; height: 158px; margin: 0 auto;}
	div.presentation p {width: 90%;}
	div.home {margin: 0 auto; width: 80%; height: 260px;}
	img.home-info {width: 100%;}
	div.client {margin: 20px auto; width: 80%;}
	div.checklist {width: 100%;}
	aside.annotation {width: 90%; font-size: 90%; padding: 1%;}
	div.payment-plans div.record {min-height: 60px;}
	div.plan div.tabular div div.lineItem, div.attributes div.tabular div div.lineItem {
width: 96%; word-wrap: break-word; min-height: 40px; padding: 6px 0;}
	div.attributes .headerRecord {min-height: 40px;}
	div.features img {width: 45%;}
	div.features div.content {width: 45%; float: left; margin: 0 5%; padding: 0;}
	img.screenshot, img.admin {width: 90%; padding: 10px; margin: 10px auto;}
	p.annotation {width: 90%;}
	div.manualNav {display: block;}
	div.manual {display: none;}
	.generic6 article {width: 100%;}
	.generic6 item {padding: 5px 0;}
	.generic6 .blockCenter, .generic6 .blockLeft {padding: 5px 0;}
	div.tabular div div.normal, div#section-types div.tabular div div.normal2 {width: 25%;}
	div.tabular div div.extraWide {width: 65%;}
	.generic6 div.tabular div div.lineItem.manual-admin {width: 65%;}
	#generic6 ul {padding-left: 15px;}
	#generic6 img.screenshot, img.admin {width: 80%;}
	iframe.video-wxd {width: 240px; height: 150px; margin: 10px auto; display: block; float: none;}
	div.videos div.content {padding: 10px;}
	div.compare ul {margin: 10px 10%; padding: 0;}
	#blog1 aside#sidebar {display: none;}
	.footerContent h3 {font-size: 150%;}
	.footerContent p {font-size: 125%;}
	.generic19 img.right {float: none; padding: 0;}
}

/* -------- Smartphones (portrait and landscape) from 320px - 480px -------- */

@media only screen and (min-width: 320px) and (max-width: 480px) {

	body {font: normal 11px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	#sectioncontainer, #menucontainer, #submenucontainer, #logindetails, #bannercontainer {width: 100%;}
	div.global {padding: 0;}
	.footerContent {width: 98%;}
	img.logo {width: 80%; margin-top: 20px;}
	img.sites {width: 100%;}
	div.checklist {width: 100%;}
	div.payment-plans div.record {min-height: 60px;}
	div.plan div.tabular div div.lineItem, div.attributes div.tabular div div.lineItem {
width: 96%; word-wrap: break-word; min-height: 40px; padding: 6px 0;}
	div.attributes .headerRecord {min-height: 40px;}
	div.features img {width: 45%;}
	div.features div.content {width: 45%; float: left; margin: 0 5%; padding: 0;}
	img.screenshot, img.admin {width: 90%; padding: 10px; margin: 10px auto;}
	p.annotation {width: 90%;}
	div.manualNav {display: block;}
	div.manual {display: none;}
	.generic6 article {width: 98%;}
	div.tabular div div.normal, div#section-types div.tabular div div.normal2 {width: 15%;}
	div.tabular div div.extraWide {width: 75%;}
	iframe.video-wxd {width: 240px; height: 150px; margin: 10px auto; display: block; float: none;}
	div.videos div.content {padding: 10px;}
	div.compare ul {margin: 10px 10%; padding: 0;}
	div.blogYear, div.blogMonth, div.blogCount, div.commentCount, div.blogContributors {padding: 1px 3px;}
	.footerContent h3 {font-size: 150%;}
	.footerContent p {font-size: 125%;}
	.generic19 img.right {float: none; padding: 0;}
	div.sectionTypes {float: none; width: 75%; margin: 15px auto;}
	div.sectionTypes li {font-size: 90%;}
}

/* -------- Sizes (portrait and landscape) from 481px - 768px -------- */

@media only screen and (min-width: 481px) and (max-width: 768px) {

	body {font: normal 12px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	#sectioncontainer, #menucontainer, #submenucontainer, #logindetails, #bannercontainer {width: 100%;}
	.footerContent {width: 98%;}
	img.sites {width: 90%;}
	div.proposition {min-height: initial;}
	div.solution {height: inherit;}
	div.presentation iframe {width: 240px; height: 158px;}
	div.checklist {width: 100%;}
	div.payment-plans div.record {min-height: 45px;}
	div.plan div.tabular div div.lineItem, div.attributes div.tabular div div.lineItem {
width: 95%;}
	div.tabular div div.normal, div#section-types div.tabular div div.normal2 {width: 15%;}
	img.screenshot, img.admin {width: 80%;}
	iframe.video-wxd {width: 280px; height: 175px;}
	div.videos div.content {padding: 0 0 0 300px;}
	div.videos div.point {height: 320px;}
	div.compare ul {margin: 10px 10%; padding: 0;}
	#generic3 aside#sidebar {min-height: initial;}
	#blog1 aside#sidebar {display: none;}
	div.sectionTypes {float: none; width: 75%; margin: 15px auto;}
	div.sectionTypes ul {width: 50%; margin: 5px auto;}
	div.sectionTypes a img {width: inherit; margin: 0 auto; display: block;}
	div.information {min-height: 440px;}
	div.sectionTypes li {font-size: 90%;}
}

/* -------- Sizes (portrait and landscape) from 570px - 640px -------- */

@media only screen and (min-width: 570px) and (max-width: 640px) {

	div.solution {float: none; height: 225px; margin: auto; width: 94%;}
	div.presentation {float: none; width: 60%;}
	div.presentation iframe {width: 240px; height: 158px; margin: 0 auto;}
}

/* -------- Sizes (portrait and landscape) from 480px - 569px -------- */

@media only screen and (min-width: 480px) and (max-width: 569px) {

	div.solution {float: none; height: 250px; margin: auto; width: 96%;}
	div.presentation {float: none; width: 60%;}
	div.presentation iframe {width: 240px; height: 158px; margin: 30px auto 0;}
}

/* -------- Sizes (portrait and landscape) from 370px - 479px -------- */

@media only screen and (min-width: 370px) and (max-width: 479px) {

	div.solution {float: none; height: 260px; margin: auto; width: 95%;}
	div.solution ul {padding-left: 15px;}
	div.presentation {float: none; width: 80%;}
	div.presentation iframe {width: 240px; height: 158px; margin: 30px auto 0;}
	div.presentation p {width: 90%;}
}

/* -------- Sizes (portrait and landscape) from 320px - 369px -------- */

@media only screen and (min-width: 320px) and (max-width: 369px) {

	div.solution {float: none; height: 310px; margin: auto; width: 95%;}
	div.solution ul {padding-left: 15px;}
	div.presentation {float: none; width: 80%;}
	div.presentation iframe {width: 240px; height: 158px; margin: 0 auto;}
	div.presentation p {width: 90%;}
	div.home {margin: 0 auto;}
	div.client {margin: 20px auto; width: 90%;}
}

/* -------- Larger tablets (portrait and landscape) from 769px - 960px -------- */

@media only screen and (min-width: 769px) and (max-width: 960px) {

	body {font: normal 14px 'OpenSans-Regular', Verdana, Helvetica, sans-serif;}
	#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer {margin: 0 auto; width: 98%;}
	#logindetails {width: 740px;}
	.footerContent {width: 98%;}
	div.presentation iframe {width: 320px; height: 210px;}
	div.plan div.tabular div div.lineItem, div.attributes div.tabular div div.lineItem {
width: 97%;}
	img.screenshot, img.admin {width: 80%;}
	div.sectionTypes ul {margin-left: 0;}
	div.information {min-height: 520px;}
}

/* -------- Larger monitors from 961px - 1190px -------- */

@media only screen and (min-width: 961px) and (max-width: 1190px) {

	#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer, .footerContent {margin: 0 auto; width: 960px;}
	#logindetails {width: 940px;}
	#menucontainer {width: 100%;}
	div.presentation iframe {width: 320px; height: 210px;}
	.welcomeText, .welcomeText p {font-size: 100%;}
	img.screenshot, img.admin {width: 80%;}
	div.sectionTypes ul {margin-left: 0;}
}

/* -------- */