/*

font-family: 'Source Sans Pro', sans-serif;
font-family: 'Source Code Pro', monospace;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Cutive Mono', monospace;
font-family: 'Comfortaa', cursive;


Grey:       #f6f6f6
Stone 1:    #8fabad
Stone 2:    #abab9a rgba(171,171,154,1.0)
*/

body {font-family: 'Source Sans Pro', sans-serif;background:#f9fbfc;}
.bg-body {background:#f9fbfc;}

/* -------------------
    TYPE
--------------------- */
a:link {color: #abab9a;}
a:visited {color:#abab9a;}
a:hover {text-decoration: none;}
a:active {}
::selection {background: #8fabad; color:#fff;}

.btn.btn-outline-primary, .btn.btn-outline-primary:link, .btn.btn-outline-primary:visited { background-color:#fff; border: 1px solid rgba(171,171,154,1); }
.btn.btn-outline-primary:hover { background-color:#abab9a; color:#fff; }
.btn.btn-outline-primary:active { background-color:#abab9a !important; color:#fff; }

p a:hover, a.link:hover, span a:hover {text-decoration: underline;}
p {line-height:1.75;}

.link-outer {color:#8fabad;}

.text-stone1 {color:#8fabad;}
.text-stone2 {color:#abab9a;}
.text-stone1 a, .text-stone1 a:link, .text-stone1 a:visited {color:#8fabad;}
.text-stone2 a, .text-stone2 a:link, .text-stone2 a:visited {color:#abab9a;}

.text-large {font-size:1.1em;}
.text-vlarge {font-size:1.25em;}
.text-small {font-size:.75em;}
.text-vsmall {font-size:.5em;}

.tagline {}
.caption { line-height:1.35; font-size:1em;}

.source-pro {font-family: 'Source Sans Pro', sans-serif;}
.cutive {font-family: 'Cutive Mono', monospace;}
.josefin {font-family: 'Josefin Sans', sans-serif;}

h1, h2, h3, h4, h5, h6 {font-weight:normal; margin-bottom:.25em;}
h1 {font-size:2.5em;}
h2 {font-size:2em;}
h3 {font-size:2em;}
h4 {font-size:2em;}
h5 {font-size:1.5em;}
h6 {font-size:1.1em;}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {font-weight:100; text-transform: uppercase; font-family: 'Cutive Mono', monospace;}
.display-1 {font-size: 2.25em;}
.display-2 {font-size: 1.75em;}
.display-3 {font-size: 2em;}
.display-4 {font-size: 2em;}
.display-5 {font-size: 1.5em;}
.display-6 {font-size: 1.1em;}

.sub-head {display:block; font-size: 1em; color:#abab9a;font-family: 'Cutive Mono', monospace;}

/* -------------------
    THEME & LAYOUT
--------------------- */
.extents { max-width:1250px; margin: auto; }
.extents-wide { max-width:1500px; margin: auto; }

.make-relative {position: relative;}
.img-fluid {width:100%;}
.boxed760 {max-width:760px;}
.boxed800 {max-width:800px;}
.boxed850 {max-width:850px;}
.bg-grey {background-color: #f6f6f6;}
.bg-stone1 {background-color: #8fabad;}
.bg-stone2 {background-color: #abab9a;}
.bg-44 {background-color: #e6ebef;}.bg-44 {background-color: #faffff;}
.bg-opac-white {background:#fff; background-clip: padding-box; border:20px solid rgba(0,0,0,0.3);}

.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color:#abab9a;}

.bg-1 {background-image: url(images/simon-bradford-design.jpg);}
.bg-2 {background-image: url(images/local-architect-services-burton-on-trent.jpg);}
.bg-3 {background-image: url(images/simon-bradford-architecture-design.jpg);}

.title-outer {margin:auto; position:relative;}
.title-inner {margin:auto; padding:1.5em 0 1em 0;}
.titlebox-left {height:20px; width:20px; border-top:1px solid #000; border-left:1px solid #000; position: absolute; top:0; left:0;}
.titlebox-right {height:20px; width:20px; border-bottom:1px solid #000; border-right:1px solid #000; position: absolute; bottom:0; right:0;}
.titlebox-white-left {height:20px; width:20px; border-top:1px solid #fff; border-left:1px solid #fff; position: absolute; top:0; left:0;}
.titlebox-white-right {height:20px; width:20px; border-bottom:1px solid #fff; border-right:1px solid #fff; position: absolute; bottom:0; right:0;}
.testimonial-outer {padding: 4em 3em;}
.testimonial-inner {padding:10px; margin:auto;}
.testimonial-inner-border { padding:1.5em; border: 2px solid #000;}

ul.whatwedo {list-style:none; margin:0; line-height:1.2; font-family: 'Josefin Sans', sans-serif;}
ul.whatwedo li {margin-bottom:1em;}

.project-grid-outer {position:relative;}
.project-grid-inner {position: absolute; bottom:1em; left:0; width:100%;}
.project-grid-outer a {color:#000}

.img-caption-outer {display:inline-block; background:#000; padding: 5px;}
.-img-caption-border {border: 2px solid #000; padding:6px 12px;}
.img-caption-inner {font-size:1.1em; color:#fff;}

.profile img {width:100%; max-width:200px; border: 1px solid rgba(0,0,0,5);}

.hero-outer {position:relative;}
.hero-inner span {display:block; text-align:center}

.icon {width:30px; height:30px; margin:auto; background-size:cover; background-repeat: no-repeat; background-position: top;}
.icon.icon-design {background-image:url(icons/001.png);}
.icon.icon-planning {background-image:url(icons/002.png);}
.icon.icon-regulations {background-image:url(icons/003.png);}

.iconbox-outer {background-color:#fff;}
.iconbox-inner {border:1px solid rgba(171,171,154,0.5); padding:1em;}

form label {font-family: 'Josefin Sans', sans-serif;}
form button {display:block; width:100%; background-color:rgba(171,171,154,0.8); color:#fff; padding:5px;font-family: 'Josefin Sans', sans-serif; cursor: pointer;}
form button:hover {background-color:rgba(171,171,154,0.6);}
textarea {height:200px; width:100%; resize: none; overflow: auto;}

.btn-button {display:block; width:100%; background-color:rgba(171,171,154,0.8); color:#fff; padding:5px;font-family: 'Josefin Sans', sans-serif; cursor: pointer;}
.btn-button:hover {background-color:rgba(171,171,154,0.6);}

/* -------------------
    HEADER & NAV
--------------------- */
header { max-width:1600px; margin: auto;}
.logo-standin {display:block; color:#000; font-size:30px; margin:0; padding:0; line-height:22px;font-family: 'Comfortaa', cursive; letter-spacing:-1px;}
header .logo-standin {color:#000;}
button.navbar-toggler {outline:none; border:0;}

##page-home header .navbar a {color:#fff;}

#page-home .white-on-home {color:#fff;}

/* -------------------
    FOOTER
--------------------- */
footer {margin-top:90px;}
footer ul {list-style:none; margin:0; padding:0;}
.base {margin-top:90px;}

a.special {display:inline-block; position:relative; top:-6px; left:6px; background:#fff; color:#abab9a; font-size:.7em; padding:2px 4px; border-radius:6px; border:1px solid rgba(171,171,154,0.5);}
a.special, a.special:link, a.special:visited, a.special:hover, a.special:active {color:#abab9a; text-decoration: none;}
#page-home .special {display:none;}

/* -------------------
    MQueries
--------------------- */
@media only screen and (min-width: 576px) { /* Small */}
@media only screen and (min-width: 768px) { /* Medium */
.title-outer {max-width:700px;}
.testimonial-inner {max-width:760px;}
}
@media only screen and (min-width: 992px) { /* Large */
.hero-inner {position:absolute; bottom:0; left:0; width:100%;}
.hero-inner span {display:inline; text-align:left;}
.hero-inner span span.copy:before {content:'// ';}
}
@media only screen and (min-width: 1200px) { /* X Large */
.extents {padding-top:3em;}
ul.whatwedo { line-height:1.2; font-size:1.2em;}
footer {border-top: 1px solid rgba(171,171,154,0.4);}
}
@media only screen and (min-width: 1800px) { /* XX Large */
}