@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
	}
	
html, body {
	background-image: url(../images/Fotolia_107351180_M.jpg);
	background-position:left top;
	background-size:cover;
	padding-top:50px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#000;
	}
	
#wrap {
	margin: 0 auto;
	max-width:980px;
	background-color:rgba(255,255,255,0.7);
	padding:10px;
	box-sizing:border-box;
	}

.header-li {
	width:70%;
	max-width:980px;
	float:left;
	}
	.header-li img {
		width:100%;
		height:auto;
		}
		
.header-re {
	width:30%;
	max-width:420px;
	float:left;
	}
	.header-re img {
		width:100%;
		height:auto;
		}
		
.clear-both {clear:both;}

.content-li {
	float:left;
	width:65%;
	padding: 20px 0 20px 40px;
	}

.content-re {
	width:30%;
	margin-left:70%;
	}

.pad_20px {
	padding:20px;
	}

h1, h2, h3, h4, h5 {
	color: #005ba9;
	}
	
h1, h2 {margin-bottom:20px;}
h3 {margin-bottom: 10px;}

p {
	margin-bottom:15px;
	}
	
.content-li a,
.content-li a:link,
.content-li a:visited,
.content-li a:active {
	color: #000;
	}
	.content-li a:hover {
		color: #005ba9;
		}
		
.content-re a,
.content-re a:link,
.content-re a:visited,
.content-re a:active {
	color: #000;
	}
	.content-re a:hover {
		color: #005ba9;
		}

table tr td p {margin: 0;}

.content-li ul {
	margin: 0 0 15px 17px;
	}
	.content-li ul li {
		margin-bottom: 3px;
		}

.footer {
	background-color:#005ba9;
	padding:20px;
	color:#fff;
	font-size:0.85em;
	}
	.footer-re {
		float:right;
		}
	.footer a,
	.footer a:link,
	.footer a:visited,
	.footer a:active {
		color: #fff;
		text-decoration:none;
		}
		.footer a:hover {
			text-decoration:underline;
			}
			
/* ######################## RESPONSIVE STYLES ##########################*/
/* ######################## RESPONSIVE STYLES ##########################*/

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

html, body {
	padding-top:15px;
	}

.content-li {
	float:left;
	width:65%;
	padding: 20px 0 20px 20px;
	}
	
}

@media screen and (max-width: 655px) {

html, body {
	padding-top:0px;
	}

.header-li {
	display:none;
	}
	
.header-re {
	width:100%;
	background-color:#fff;
	max-width:655px;
	float:none;
	text-align:center;
	}
	.header-re img {
		width:50%;
		height:auto;
		}

.content-li {
	float:none;
	width:90%;
	padding: 20px 0 20px 20px;
	}
	
.content-re {
	width:90%;
	margin-left:0%;
	}
	
.footer {
	text-align:center;
	font-size: 1.25em;
	}
	
.footer-re {
	float:none;
	margin-bottom:25px;
	}
	
}

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

#wrap {
	padding:0px;
	}

.content-li {
	float:none;
	width:90%;
	padding: 20px 0 20px 20px;
	}
	
}