html, body, div, p, h1, h2, h3, ul, li, table, tr, td, form, input, textarea {margin:0px;padding:0px;}
body {font-family:'Roboto', sans-serif;font-weight:400;background:#fff;display: flex;flex-flow: row wrap;margin:0px auto;}
a, select, input, textarea {font-size:1.0em;outline:none;}
a, a:active, a:visited {text-align:left;text-decoration:none;color:#222e6c;}
a:hover {text-decoration:underline;color:#ff8d00;}
.blue {color:#222e6c;}
h1, h2 {font-weight:700;font-style:italic;color:#222e6c;}
h1 {font-size:55px;text-align:center;}
h2 {font-size:30px;text-align:center;margin:20px auto;}
h3 {text-align:left;}
h3 {font-size:12px;color:#222e6c;padding:2px 0 2px 10px;border-bottom:1px solid #fff;background:url(/images/ueback.png) left top repeat-x #0076bd;}
p {font-size:1.0em;color:#555;text-align:left;}
ul {line-height:18px;}
ul, li {list-style-type:none;}
strong {color:#003c6c;}
img {border:0px;}
iframe {min-width:300px;}
#wrapper {margin:0px auto;width:100%;}
#header {max-width:1200px;margin:10px auto;padding:10px 0 0 10px;}
#mainpic {margin:0px auto;height:550px;background:url(/images/buero1.jpg); background-repeat: no-repeat;
 background-size: cover; background-position: center center;border-bottom:1px solid #fff;}
#navigation {margin:0px auto;background: #003c6c;}
#maincontent {max-width:1200px;margin:0px auto;background:#fff;}
#footer {margin:0px auto;background: #003c6c;}
#footernav {margin:0px auto;font-size:1.0em;padding:40px 0 10px;text-align:center;}
#footernav li {display:inline;padding:0 7px 0 10px;}
#footernav li a {color:#fff;font-weight:400;}
#footernav li.first {color:#fff;border:0;padding:0 7px 0 0;}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
* {
    box-sizing: border-box;
}
/* Header/logo Title */
.header {
    padding: 60px;
    text-align: center;
    background: #1abc9c;
    color: #fff;
}
/* Style the top navigation bar */
.navbar {
	max-width:1200px;
	margin:0px auto;
    display: flex; 
    justify-content: space-around;
    flex-direction: row;
    background: #003c6c;
}
/* Style the navigation bar links */
.navbar a {
    color: #fff;
    padding: 14px 0;
    text-decoration: none;
    text-align: center;
}
/* Change color on hover */
.navbar a:hover {
    color: #006ec5;;
}
/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
}
.norow {  
    display: flex;
    flex-wrap: row wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 10%;
    background: #f1f1f1;
    padding: 20px 10px;
}
/* Main column */
.main {
    flex: 50%;
    background: #fff;
    padding: 20px 10px;
}
.main p {
    text-align: center;
	line-height: 150%;
}
.logo {
    flex: 50%;
    background: #fff;
}
.logo img {
    padding-top:2px;
}
.left {
    flex: 33%;
    padding: 50px 10px 20px 10px;
}
.left p, .middle a, .middle p, .right p {
    line-height: 150%;
    color: #fff;
}
.middle {
    flex: 34%;
    padding: 50px 10px 20px 10px;
}
.right {
    flex: 33%;
    padding: 50px 10px 20px 10px;
}
.fix {
    max-width:1200px;
	margin:0px auto;
}
/* Main column */
.tel {
    flex: 50%;
    background: #fff;
	text-align:left;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
	#mainpic {max-height: 200px;}
	h1 {font-size:25px;}
	h2 {font-size:20px;}
	.logo img {width: 95%;}
	.tel {margin-left:10px}
	.tel a, .tel p {font-size:0.75em;font-weight:bold;}
	.row, .navbar {flex-direction: column;}
	.navbar a {border-bottom:1px solid #fff;}
	.left p, .left a, .middle p, .right p {text-align: center;}
	}