/*---------------------------------------

	BREAKPOINTS

-----------------------------------------*/

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

html { background: #FFF; padding: 0; }

#header, .scrolled #header { left: 0; top: 0px; right: 0; height: 52px; border-top: none; background: #FFF; border-bottom: 2px solid #DEDEDE; }
#logo, .scrolled #logo { left: 14px; width: 136px; background-size: 136px 30px; } 
#toggle_nav { position: absolute; top: 0px; right: 0px; display: block; width: 52px; height: 52px; border-left: 1px solid #DEDEDE; background-image: url(../img/list.svg); background-position: center center; background-repeat: no-repeat; }

#nav { position: absolute; top: 52px; left: 0; width: 100%; height: auto; background: #FFF; border-top: 1px solid #DEDEDE; border-bottom: 2px solid #DEDEDE; margin: 0; display: none; }
#nav li { display: block; height: auto; margin: 0; text-align: left; border-bottom: 1px solid #DEDEDE; }
#nav li a, .scrolled #nav li a { display: block; line-height: normal; padding: 10px 14px; }
#nav a:link, #nav a:visited { color: #444; text-decoration: none; }
#nav a:hover, #nav a:active, #nav .current a:link, #nav .current a:visited { color: #444; text-decoration: none; }
#nav #contact_tab a, .scrolled #nav #contact_tab a { background: #FFF; padding: 10px 14px; margin-left: 0; }
#nav #contact_tab a:link, #nav #contact_tab a:visited { color: #444; text-decoration: none; }
#nav #contact_tab a:hover, #nav #contact_tab a:active { color: #444; text-decoration: none; }


.scrolled #nav { margin-top: 0; padding-right: 0; }

.columns { margin: 0 auto; max-width: 1200px; padding: 0; overflow: hidden; }
.column_50, .column_25, .column_33, .column_20 { float: none; width: auto; }
.column { padding: 0; }


.bio_columns { max-width: 900px; padding-top: 30px; text-align: left;  }
#graham { display: none; }
h1 { font-size: 21px; }
h2 { font-size: 27px; }
h3 { font-size: 21px; }
p { font-size: 13px; }
ul { color: #222; font-size: 13px; line-height: 140%; margin: 0 0 18px 22px; }
.section { padding: 30px 14px; }

#intro { position: relative; height: auto; padding: 80px 14px 30px 14px; }
#intro h2 { font-size: 27px; color: #be1e2d; margin: 0 0 12px 0; }
#intro h1, #intro p { text-align: center; max-width: none; }
#welcome { position: relative; bottom: auto; left: auto; width: auto; text-align: center; }
#welcome_intro { position: relative; margin: 0 auto; max-width: 900px; padding: 0; }
#time { position: relative; bottom: auto; right: auto; z-index: 100; margin: 0 auto 20px auto; }

/*---------------------------------------

	WHY US

-----------------------------------------*/

#why_us { background-color: #F7F7F7; padding: 30px 14px; }

#why_us ul { list-style: none; margin: 0 auto; max-width: 1100px; }
#why_us ul li { display: inline-block; vertical-align: top; width: auto; text-align: center; padding-top: 20px; }
#why_us ul div { margin: 0; }
#why_us h3 { margin-bottom: 4px; }

#clients ul { list-style: none; margin: 0 auto; max-width: 1100px; }
#clients ul li { display: inline-block; vertical-align: top; width: auto; text-align: center; padding-top: 20px; }
#clients ul div { padding: 0; border-right: none; }
#clients h4:after { margin: 18px auto 0 auto;}

#services { padding: 30px; }
#services ul { margin: 0 auto 30px auto; max-width: 400px; text-align: left; }

/* Contact */

.contact_point p { font-size: 21px; }
.contact_point span { font-size: 15px; }

#contact { border-bottom: none; padding: 30px 14px; }
#contact_left, #contact_right { float: none; width: 100%; }

#contact_form label { font-size: 17px; text-align: center; }
#contact_form input, #contact_form textarea { display: block; font-size: 15px; width: 230px; margin: 0 auto 12px auto; }

button { display: block; width: 250px; margin: 0 auto 12px auto; }


}