@charset "utf-8";

body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 12px; color: #888; background-color: #dcdcd9; line-height: 1; }
strong { font-weight: 600; }
img { display: block; position: relative; padding: 0; max-width: 100%; height: auto; overflow: hidden; background: #fff; }
h1 { text-align: center; margin: 0 auto; }
h1 > img { border: 0; margin: 0 auto; }
h2 { margin: 5px 0 10px 0; padding: 0; color: #444; font-weight: 300; line-height: 55px; font-size: 44px; /* 27px; */ }
h3 { margin: 0 0 0 0; font-size: 18pt; font-weight: 300; padding: 14px 0 10px 0; line-height: 25px; color: #dd7700; border-bottom: solid 1px #e4e4e4; }
h4 { margin: 0 0 5px 0; padding: 0; font-size: 16px; line-height: 25px; font-weight: 400; color: #444; }
p  { margin: 0 0 16px 0; padding: 0; font-size: 16px; line-height: 25px; font-weight: 400; color: #666; }
a { color: #cc6600; text-decoration: none; -webkit-transition: color 0.1s ease 0s; -moz-transition: color 0.1s ease 0s; -o-transition: color 0.1s ease 0s; transition: color 0.1s ease 0s; }
a:hover { text-decoration: none; color: #ff9900; }

header { padding: 41px 40px 0 40px; width: 720px; position: relative; min-height: 26px; }
.row { display: block; clear: both; padding: 0 40px 20px 40px; width: 720px; position: relative; background-color: white; }

.welcome { padding-bottom: 0; }
.welcome p { color: #444; }
.contact { padding-top: 10px; line-height: 26px; color: #444; margin-bottom: 25px; }
.col-wide { width: 700px; margin: 0 10px; float: none; position: relative; }
.col1-2 { width: 340px; margin: 0 10px; float: left }
.col1-3 { width: 220px; margin: 0 10px; float: left }
.col2-3 { width: 460px; margin: 0 10px; float: left }

.footer { font-size: 14px; font-weight: 300; margin-top: 40px; padding-bottom: 40px;}
.col-footer { border-top: solid 1px #ddd; padding-top: 20px; text-align: center; }
.col-footer > p { line-height: 24px; margin: 0 0 8px 0; }
.col-footer > p > .separator { color: #ddd; }

.wrapper { width: 800px; margin:0 auto; -webkit-box-shadow:0 0 30px rgba(0, 0, 0, 0.1); -moz-box-shadow:0 0 30px rgba(0, 0, 0, 0.1); box-shadow:0 0 30px rgba(0, 0, 0, 0.1); background-color:#fff; }

/* Columns */
/*
.col1-4 { width:170px; margin: 0 10px; float: left; }
.col3-4 { width:510px; margin: 0 10px; float: left; }
.col1-5 { width:136px; margin: 0 10px; float: left; }
.col4-5 { width:544px; margin: 0 10px; float: left; }
.col1-6 { width:113px; margin: 0 10px; float: left; }
.col5-6 { width:567px; margin: 0 10px; float: left; }
.col1-8 { width: 85px; margin: 0 10px; float: left; }
.col7-8 { width:595px; margin: 0 10px; float: left; }
*/
/* 1/5 */
.col-a { width:136px; margin: 0 10px; float: left; }
.col-b { width:544px; margin: 0 10px; float: left; }

/* Responsive stuff */
@media only screen and (max-width: 900px) {
    body { background: #fff; }
    .wrapper { width: 100%; margin: 0 auto; background-color: #fff; float: none; }
    header { padding: 41px 0 0 0; width: 720px; position: relative; margin: 0 auto; }
    .row { padding: 0 0 20px 0; width: 720px; position: relative; margin: 0 auto; }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
    .footer span { display: block; margin: 0 auto; }
    .footer .separator { display: none; }
    h2 { line-height: 45px; font-size: 38px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .row { padding: 0 0 20px 0; width: 440px; position: relative; margin:0 auto;  overflow: visible !important; }
    header { padding: 41px 0 8px 0; width: 440px; position: relative; margin: 0 auto; }
    .col-wide, .col1-3, .col2-3, .col1-2 { width:420px; margin: 0 10px; }
    .col1-3, .col2-3 { width: 420px; margin: 0 10px; }
    .col1-4, .col3-4 { width: 420px; margin: 0 10px; }
    .col1-5, .col4-5 { width: 420px; margin: 0 10px; }
    .col1-6, .col5-6 { width: 420px; margin: 0 10px; }
    .col1-8, .col7-8 { width: 420px; margin: 0 10px; }
    .col-a, .col-b { width: 420px; margin: 0 10px; }
}
@media only screen and (max-width: 479px) {
    .row { width: 320px; position: relative; margin: 0 auto; overflow: visible !important; }
    header {padding: 41px 0 8px 0; width: 320px; position:relative; margin: 0 auto; }
    .col-wide, .col1-3, .col2-3, .col1-2 { width: 300px; margin: 0 10px; }
    .col1-3, .col2-3 { width: 300px; margin: 0 10px; }
    .col1-4, .col3-4 { width: 300px; margin: 0 10px; }
    .col1-5, .col4-5 { width: 300px; margin: 0 10px; }
    .col1-6, .col5-6 { width: 300px; margin: 0 10px; }
    .col1-8, .col7-8 { width: 300px; margin: 0 10px; }
    .col-a, .col-b { width: 300px; margin: 0 10px; }
    h2 { line-height: 35px; font-size: 28px; }
}

.heading { padding-top: 30px; }
.photo { padding-top: 20px; padding-bottom: 30px; }
.photo > .col-wide > img { width: 100%; }
.illustration > .col-wide > img { margin: 0 auto; }