* {
margin: 0px;
padding: 0px;
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(fonts/Roboto.woff) format('woff');
}

body {
background-color: #ffffff;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}

#container {
margin: 0 auto;
max-width: 1000px;
text-align: left;
margin-top: 10px;
}

#mainbox {
margin: 0 auto;
max-width: 1000px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 0 0 10px 10px;
margin-top: 20px;
}

#header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #aaaaaa;
}

#logo {
width: 380px;
height: 118px;
margin-bottom: 5px;
}

#navigation {
font-size: 1.4em;
margin-top: auto;
}

#navigation ul {
list-style: none;
}

#navigation ul li {
display: inline-block;
position: relative;
margin-left: 10px;
}

#navigation ul li a {
display: block;
color: #000000;
font-weight: bold;
text-decoration: none;
}

#navigation ul a:hover {
display: block;
color: #bb0000;
font-weight: bold;
text-decoration: none;
}

#current em {
display: block;
color: #cccccc;
font-weight: bold;
text-decoration: none;
cursor: text;
}

#welcome {
display: flex;
align-items: center;
max-width: 1000px;
height: 100px;
background-image: url("images/grid-3227459_1280.jpg");
background-size: cover;
background-repeat: no-repeat;
padding: 0 0 0 30px;

zbackground-image: url("images/grid-3227459_1280.jpg");
zbackground-image: url("images/triangles-3320452_1280.png");
}

#welcome p {
font-size: 250%;
font-weight: bold;
color: #888;
text-shadow: #fff 1px 1px 1px;
}

#header_container {
position: relative;
}

#header_title {
position: absolute;
top: 20px;
left: 0;
font-size: 120%;
font-weight: bold;
color: #000000;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-radius: 0 10px 10px 0;
padding: 10px 20px 10px 20px;
opacity: 0.7;
}

#header_image {
width: 100%;
height: 300px;
clear: both;
}

.subheader {
max-width: 95%;
background-color: #f9f9f9;
color: #002480;
font-size: 130%;
font-weight: bold;
padding: 5px 0 5px 10px;
border-radius: 0 10px 10px 0;
box-shadow: 0 2px 2px -2px #888888;
clear: both;
}

#services {
display: flex;
justify-content: center;
margin: 0 0 20px 0;
}

.service_item {
display: block;
width: 52%;
margin-top: 20px;
margin-bottom: 20px;
clear: both;
}

#tutorials {
margin: 0 0 20px 0;
}

#content {
padding: 20px;
}

p {
color: #000000;
font-size: 100%;
margin: 5px 0 5px 0;
line-height: 1.6em;
}

#copyright {
font-size: 100%;
font-weight: bold;
text-align: center;
margin: 30px 0 50px 0;
}

/*++++++++++++++++++++++++++++++*/

@media (max-width:750px){
    
#header {
display: block;
border-bottom: none;
margin: 0 auto;
}
    
#logo {
display: block;
width: 300px;
height: auto;
margin: 0 auto;
margin-bottom: 20px;
clear: both;
}

#navigation {
display: block;
font-size: 1.4em;
text-align: center;
clear: both;
}

#welcome {
background-size: auto;
background-position: 35% 100%;
zpadding: 20px 10px 20px 10px;
}

#welcome p {
font-size: 200%;
}

#header_image {
width: 100%;
height: auto;
}

.subheader {
max-width: 90%;
}

.service_item {
width: 90%;
}

.service_logo {
width: 100%;
height: auto;
}

p {
font-size: 115%;
}

#copyright {
font-size: 85%;
}

}