@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,400i,500,600,700,700i,800,900');


/* General Tweaks */
* {box-sizing:border-box;}

body,html,div,img,h1,h2,h3,h4,section,header,main,nav {margin:0;padding:0;position:relative;z-index:1;border:0}
body,html {height:100%;font:400 .9em/1.6em Raleway,arial,verdana,sans-serif;color:#fff;}

h2 {letter-spacing:.4rem;font-weight:400;font:2.5rem Raleway,arial,verdana,sans-serif;text-align:center;display:block}
h3 {letter-spacing:.4rem;text-transform:uppercase;font-weight:200;font:1.6rem Raleway,arial,verdana,sans-serif}
h4 {letter-spacing:.4rem;text-transform:uppercase;font-weight:100;font:1.2rem Raleway,arial,verdana,sans-serif}

hr {border:0;border-bottom: 1px dashed #efefef;}

table, tr, td {border:0}

.info td {display:block;}
.info td.l {text-align: center;}



a, a *, button[type="submit"] {
  -webkit-transition: color .2s,background .2s,border-bottom .2s;
  -moz-transition: color .2s,background .2s,border-bottom .2s;
  -ms-transition: color .2s,background .2s,border-bottom .2s;
  -o-transition: color .2s,background .2s,border-bottom .2s;
  transition: color .2s,background .2s,border-bottom .2s;
}

fieldset {padding:0;}
input, textarea, button {font:1rem/1.8rem Raleway,arial,verdana,sans-serif;padding: .5rem 1rem;}



/* General Classes */

.nosel {cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
a.nosel {cursor:pointer;}
.hiddenform {background:#fff}

.bgimg{position:relative;opacity:0.95;background:transparent center no-repeat fixed;background-size:cover}
.bgimg1{text-align:center;height:100%;min-height:100%}
.extra_above{position:relative;background:#fff}

.center {text-align:center;}
.image_embed, .image_embed img {width:100%;height:auto;text-align: center;}
.image_embed img {max-width:26rem;margin:0 auto;}

.blurb {font-size:1.8rem;line-height: 2.6rem;font-weight: 300;text-align: center;}

hr.break {page-break-after:always;display:none;clear:left}


.clearfix:before,.clearfix:after {
  content:" ";
  display:table;
}

.clearfix:after {
  clear:both;
}


.circle {border-radius:50%;width:4rem;height:4rem;display:inline-block;}

.quote {display:inline-block;width:1em;height:54px}


/* Header */



header.top {font-size:.9em;text-align:center;width:100%;background:rgba(40,55,25,0.9);position:fixed;z-index:2;padding:0.3rem;display:block;border-bottom:solid 2px #c4a22e}
header.top h1 {display:none}

header.top img {margin:1em auto;vertical-align:bottom;text-align:center;width: 100%;max-width:12em;}
header.top nav {display:block;}

header.top nav a {line-height:1.8rem;letter-spacing:.4rem;display:inline-block;margin:0 1.8em;color:#fff;text-transform:uppercase;text-decoration:none;border-bottom:solid 1px transparent}
header.top nav a:hover {border-bottom:dotted 1px rgba(240,191,43,.2);color:rgba(240,191,43,1);}
header.top nav i {display:none}

header.bgimg {padding:4rem 2rem;}


/* Slogan */
div#slogan{display:block;width:100%}
section.slogan {height:100%;font-size:2rem;display:table;padding:0;width:100%;text-align:center;line-height:2.0em;font-weight:500;color:#fff;letter-spacing:0.4rem;}
section.slogan h3 {display:none}
section.slogan div.wrap {display:table-cell;vertical-align:middle;height:100%}
section.slogan div.wrap b{color:#c4a22e;font-size:2em}

/* Services Links*/

.services_links header {/*background:#6e642e;*/width:100%;text-align:center;height:auto}
.services_links a {display:inline-block;width:14rem;text-align:center;text-decoration:none;color:#4d4625;padding:4rem 2rem;}
.services_links a h3 {font-weight:300;}
.services_links a:hover h3 {color:rgba(240,191,43,1);}
.services_links a:hover .circle {background:rgba(240,191,43,1);}
.services_links div{display:inline-block;text-align:center;margin:0 auto 0.2em auto}
.services_links div{font-size:2.2em;line-height:1.8em;color:#fff;vertical-align:middle}
.services_links div img {width:50%;height:50%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;fill:#fff;vector-effect:non-scaling-stroke}

.c .circle {background:#ddd6b1}
.m .circle {background:#bbb070}
.d .circle {background:#8c8454}
.i .circle {background:#4d4625}


/* Articles */

div.main {display:block;background:rgba(255,255,255,0.9);width:100%;margin:0 auto;color:#392411;padding:1rem;}
div.main h2 {text-transform:uppercase;text-align:left;color:#726531}

article header {width:100%;text-align:center;}

/* About */


/* Services */

article#Services {height:auto}
article#Services div.main .info {height:auto;width:100%;border:0}
article#Services div.main .info td {border-top:solid 2em transparent;vertical-align:top}
article#Services div.main .info td.l {text-align:center}
article#Services div.main .info td.r {width:100%}
article#Services div.main .info .circle {width:9rem;height:9rem;margin:0 auto 0.3em auto}
article#Services div.main .info .circle {font-size:5.0em;line-height:1.7em;color:#fff;vertical-align:middle}
article#Services div.main .info img {width:50%;height:50%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;fill:#fff;vector-effect:non-scaling-stroke}
article#Services div.main .info p {margin-left:1em}


/* People */

article#People div.main .info {height:auto;width:100%;}
article#People div.main .info td {border-top:solid 2em transparent;vertical-align:top}
article#People div.main .info td.l {padding-right:2em}
article#People div.main .info .circle {background:transparent center no-repeat;background-size:cover;width:15rem;height:15rem;margin:1em auto}
article#People div.main .info .headshot {border-radius:50%;background:transparent 0 0 no-repeat;background-size:cover;width:15rem;height:15rem;margin:1em auto}
article#People div.main .info h3 {}
article#People div.main .info h4 {font-style: italic;}


/* Clients */

#Clients .main {text-align: center;}

.client {margin:1rem 0;height:5rem;width:100%;display:block;text-align:center;}
.client img {height:100%;}
.client {background-position:center center;background-repeat:no-repeat;background-size:contain;}


/* Contact */

fieldset {border: 0;}


#Contact button[type="submit"] {
  font-size:1rem;
  font-family: Raleway;
  border: 0;
  background: #998a47;
  color: #fff;
  cursor: pointer;
}

#Contact button[type="submit"]:hover {
  background:#b3a774;
}

#Contact label, #Contact textarea, #Contact input, #Contact button {display:block;width: 100%;padding:.5rem 1rem;}

.contact-details {padding: 3rem 0;}

/* footer */

footer {width:100%;height:2rem;background:rgba(40,55,25,0.9);color:#fff;position:fixed;bottom:0;left:0;z-index:2;border-top:solid 2px #c4a22e}
footer div {font-size:0.7rem;line-height: 2rem; text-align:center;margin:0 auto}


/* Breakpoints */

@media only screen and (min-width:10rem){
 header.top img {display:inline-block;margin:1em 2em;vertical-align:middle;}
 header.top nav {display:inline-block;margin:0 2em}
 section.slogan {font-size:1.5rem;padding-top:4em}
 .services_links a{padding:2rem}
}

@media only screen and (min-width:25em){

  #Clients .main {width:90%;}
  section.slogan {font-size:2rem;padding-top:2.5em}
  header.top {font-size:.9rem;}
  
}

@media only screen and (min-width:50em){
  
  
  header.top {font-size:1rem;}
  
  body,html {font-size:1em;}

  #Clients .main {width:80%;}
  .info td {display:table-cell;}
  
  .contact-details .column-2col { width: 50%; float: left;}
  
  div.main {padding:3rem;width:90%;}

  section.slogan {font-size:2.5rem;vertical-align: middle;height:100%;padding:0}
  section.slogan div.wrap {width:100%;height:100%;vertical-align: middle;}
  
}


@media only screen and (min-width:60em){
  div.main {padding:3rem;width:80%;}
  section.slogan div.wrap {width:100%;}
  section.slogan {font-size:3rem;padding:0}
}