* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
.clearfix:before , .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; }
strong { font-weight: bold; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
body { font: 14px 'Open Sans', Arial, sans-serif; color: #999; font-weight: 300; background: #dcddde; }
.wrapper { max-width: 980px; margin: auto; }
.container { margin: 0 20px; }
.col { float: left; margin-right: 4.25531914893617%; }
.col-half { width: 47.87234042553192%; }
.last-col { margin-right: 0 !important; }
.underline { text-decoration: underline; }
.uppercase { text-transform: uppercase; }
.align-right { float: right; }
.text-right { text-align: right; }
.infobox { width: 49%; margin: 0 2% 20px 0; float: left; color: #000; font-size: 12px; padding: 40px 15px 0; background: url(../images/dots.gif) 95% 7% no-repeat #dcddde; }
.infobox h2 { text-transform: uppercase; display: inline-block; font-weight: 400; font-size: 14px; margin-bottom: 15px; background: url(../images/headline-dots.png) left bottom repeat-x; padding: 0 15px 10px 20px; position: relative; left: -20px; }
.infobox p { float: left; }
.infobox-darkgrey { background-image: url(../images/dots-darker.gif); background-color: #d1d2d4; background-position: 5% 7%; }
.infobox-darkgrey h2 { left: auto; right: -20px; padding: 0 20px 10px 15px; }
#header { background: #fff; height: 120px; }
#logo { position: relative; top: 10px; left: -10px; z-index: 99; }
#logo img { border: 1px solid #c5c5c5; }
#mainmenu-container { float: right; }
#mainmenu li, #mainmenu a, #metamenu li, #metamenu a { float: left; }
#mainmenu a, #metamenu a { text-transform: uppercase; font-size: 12px; }
#mainmenu li { margin-left: 15px; height: 120px; padding: 50px 10px 0; text-align: center; }
#mainmenu a { color: #999; text-decoration: none; border-left: 1px solid #999; padding-left: 10px; }
#mainmenu li.active-menu-item { background: #fff; }
#mainmenu li.active-menu-item a { color: #000; border-color: #000; }
#menu-toggle { display: none; width: 50px; padding: 10px; cursor: pointer; position: absolute; top: 17px; right: 20px; }
#menu-toggle span { width: 35px; height: 4px; background: #999; display: block; margin-bottom: 5px; }
#menu-toggle span:last-child { margin-bottom: 0; }
.close-menu { font-size: 50px; cursor: pointer; display: block; width: 40px; text-align: center; margin: auto; }
#eyecatcher .slide { padding: 15px 0 35%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; }
#eyecatcher .slide a { outline: none; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#map { padding: 15px 0 35%; position: relative; }
#map-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#content { padding: 40px 0 70px; background: #fff; }
#content h1 { text-transform: uppercase; border-left: 2px solid #999; padding-left: 18px; font-size: 24px; line-height: 1.5; margin-bottom: 20px; margin-left: 10px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
#content p, #content ul, #content ol, table { margin-bottom: 1.5em; line-height: 1.7; }
#content a { color: #000; text-decoration: none; }
#content a:hover { text-decoration: underline; }
#openings td { width: 40%; }
#timeline { background: url(../images/timeline.png) top center repeat-y; padding: 30px 0 0; font-size: 14px; }
#timeline.timeline-team img { float: left; margin: 0 20px 20px 0; }
#timeline.timeline-team h2 { float: left; }
#timeline h2 { text-transform: uppercase; font-size: 14px; color: #666; margin-bottom: 10px; }
.timeline-wrapper { margin-bottom: 40px; }
.tl-item { float: left; width: 50%; padding-right: 70px; }
.timeline-service .tl-item { padding-top: 20px; }
.tl-item-right { padding: 0 0 0 70px; }
.tl-item-right { float: right; }
.tl-item-serperator { position: relative; }
.tl-item-serperator:after { content: ''; position: absolute; right: -28px; top: 0; width: 56px; height: 57px; display: block; background: url(../images/timeline-serperator.png) no-repeat; }
.tl-item-right.tl-item-serperator:after { right: auto; left: -28px; }
#footer { background: #dcddde; }
#footer .container { background: url(../images/dots.gif) left center no-repeat; }
#metamenu { float: right; }
#metamenu li { margin-left: 20px; padding: 10px 15px; text-align: center; }
#metamenu li.active-menu-item { background: #fff; }
#metamenu a { color: #aaa; text-decoration: none; border-left: 1px solid #aaa; padding-left: 10px; }

/* Media Queries */
@media screen and (max-width: 640px){
    #menu-toggle { display: block; }
    #mainmenu { display: none; }
}

@media screen and (max-width: 600px){
    #mainmenu li { margin-left: 10px; }
}

@media screen and (max-width: 580px){
    #timeline { padding: 0; background: none; }
    #timeline .text-right { text-align: left; }
    .timeline-wrapper { margin-bottom: 20px; }
    .tl-item { float: none; width: 100%; padding: 0; }
    .tl-item-serperator:after { content: none; }
    #timeline.timeline-team img, #timeline.timeline-team h2 { float: none; }
}

@media screen and (max-width: 480px){
    #content h1 { font-size: 18px; }
    .col-half, .infobox { float: none; width: 100%; margin-right: 0; }
    .infobox h2, .infobox p { float: none; }
    .infobox { padding-bottom: 5px; }
    .infobox h2 { position: static; padding: 0 10px 10px; }
}

@media screen and (max-width: 420px){
    #logo img { width: 100px; }
}

@media screen and (max-width: 380px){
    #metamenu li { margin-left: 0; padding: 5px 15px; }
}

@media screen and (max-width: 320px){
    #logo img { width: 80px; }
}