/*
STYLESHEET COMPILED USING SASS 3.2.1
CSS files should not be edited directly, as those edits will be overridden next time SASS is compiled.
*/
@font-face {
  font-family: 'TuffyRegular';
  src: url("../fonts/Tuffy/Tuffy-webfont.eot");
  src: url("../fonts/Tuffy/Tuffy-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Tuffy/Tuffy-webfont.woff") format("woff"), url("../fonts/Tuffy/Tuffy-webfont.ttf") format("truetype"), url("../fonts/Tuffy/Tuffy-webfont.svg#TuffyRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'TuffyItalic';
  src: url("../fonts/Tuffy/Tuffy_Italic-webfont.eot");
  src: url("../fonts/Tuffy/Tuffy_Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Tuffy/Tuffy_Italic-webfont.woff") format("woff"), url("../fonts/Tuffy/Tuffy_Italic-webfont.ttf") format("truetype"), url("../fonts/Tuffy/Tuffy_Italic-webfont.svg#TuffyItalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'TuffyBold';
  src: url("../fonts/Tuffy/Tuffy_Bold-webfont.eot");
  src: url("../fonts/Tuffy/Tuffy_Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Tuffy/Tuffy_Bold-webfont.woff") format("woff"), url("../fonts/Tuffy/Tuffy_Bold-webfont.ttf") format("truetype"), url("../fonts/Tuffy/Tuffy_Bold-webfont.svg#TuffyBold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'TuffyBoldItalic';
  src: url("../fonts/Tuffy/Tuffy_Bold_Italic-webfont.eot");
  src: url("../fonts/Tuffy/Tuffy_Bold_Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Tuffy/Tuffy_Bold_Italic-webfont.woff") format("woff"), url("../fonts/Tuffy/Tuffy_Bold_Italic-webfont.ttf") format("truetype"), url("../fonts/Tuffy/Tuffy_Bold_Italic-webfont.svg#TuffyBoldItalic") format("svg");
  font-weight: normal;
  font-style: normal; }
/* ----------------------------------------------------------
    Client Name CSS
    Managed by: Blue State Digital

    TABLE OF CONTENT

    01 - HTML5 Boilerplate
    02 - COMMON STYLES
    03 - LAYOUT
    04 - HOMEPAGE 
    05 - SUBPAGES
    06 - SIDEBAR
    07 - FRAMEWORK
    08 - UTILITY
    09 - PRINT
    
    COLOR GUIDE (Main Site Colors and their Hex Codes)
    
---------------------------------------------------------- */
/* 01 =HTML5 Boilerplate
------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* end HTML5 Boilerplate reset */
/* HTML5 boilerplate base styles */
html {
  overflow-y: scroll; }

body {
  font: 13px/1.231 sans-serif; }

select, input, textarea, button {
  font: 99% sans-serif; }

pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

ul, ol {
  list-style-type: none; }

small {
  font-size: 85%; }

b, strong, th {
  font-weight: bold; }

i, em {
  font-style: italic; }

td, td img {
  vertical-align: top; }

sub {
  vertical-align: sub;
  font-size: smaller; }

sup {
  vertical-align: super;
  font-size: smaller; }

pre {
  padding: 15px;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word; }

textarea {
  overflow: auto; }

.ie6 legend, .ie7 legend {
  margin-left: -7px; }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

.ie7 img {
  -ms-interpolation-mode: bicubic; }

label, input[type=button], input[type=submit], button {
  cursor: pointer; }

button, input, select, textarea {
  margin: 0; }

button {
  width: auto;
  overflow: visible; }

/* end HTML5 boilerplate base styles */
/* BSD base styles */
caption, th {
  text-align: left; }

/* 02 =COMMON STYLES
------------------------- */
body,
html {
  width: 100%;
  height: 100%;
  font-family: "TuffyRegular"; }

select, input, textarea {
  color: #444; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

a {
  text-decoration: none; }

a:hover, a:active {
  outline: none; }

a:link {
  -webkit-tap-highlight-color: #FF5E99; }

/* 04 =HOMEPAGE
------------------------- */
.header {
  width: 80%;
  padding: 20px 10%;
  position: fixed; }
  .header .logo {
    float: left;
    width: 58px;
    height: 58px;
    background: white;
    -webkit-border-radius: 58px;
    border-radius: 58px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear; }
    .header .logo h1 {
      display: inline-block;
      width: 60px;
      height: 60px;
      font: 28px/2.1 "TuffyBold";
      letter-spacing: -1px;
      color: #5cb0a9;
      text-align: center;
      margin-left: -2px; }
    .header .logo:hover:after {
      display: inline-block;
      width: 200px;
      content: 'Stacey Simmons Design';
      font: 14px/1.4 "TuffyRegular";
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.8);
      position: relative;
      right: -120%;
      top: -65%; }
  .header .primary-nav {
    display: inline-block;
    float: right; }
    .header .primary-nav li {
      display: inline-block;
      width: 60px;
      height: 60px;
      -webkit-border-radius: 60px;
      border-radius: 60px;
      -moz-background-clip: padding;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      font: 14px/4.5 "TuffyRegular";
      text-transform: uppercase;
      text-align: center;
      overflow: hidden;
      -webkit-transition: all 0.1s linear;
      -moz-transition: all 0.1s linear;
      -o-transition: all 0.1s linear;
      -ms-transition: all 0.1s linear;
      transition: all 0.1s linear; }
      .header .primary-nav li a {
        display: inline-block;
        width: 100%;
        height: 100%;
        color: rgba(255, 255, 255, 0);
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        transition: all 0.1s linear; }
      .header .primary-nav li.work-link {
        background: url(../images/icon-work.png) no-repeat center center; }
      .header .primary-nav li.contact-link {
        background: url(../images/icon-email.png) no-repeat center center; }
      .header .primary-nav li:hover a {
        color: #5cb0a9;
        background: white; }

h2 {
  width: 80%;
  font: 72px/1 "TuffyRegular";
  color: white;
  text-align: center;
  margin: auto; }

.smooth-link {
  width: 80%;
  display: inline-block;
  padding: 10px 10%;
  font: 14px/1.4 "TuffyRegular";
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .6;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  transition: all 0.1s linear;
  position: fixed;
  top: 86%;
  left: 0; }
  .smooth-link:hover {
    opacity: 1; }

.summary {
  font: 18px/1.6 "TuffyRegular";
  margin: 14px 0;
  text-align: center; }
  .summary a {
    color: #333;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear; }
    .summary a:hover {
      text-decoration: underline;
      color: #5cb0a9; }

.green-btn {
  display: inline-block;
  padding: 6px 10px;
  color: white;
  font: 14px/1.4 "TuffyRegular";
  letter-spacing: 1px;
  text-align: center;
  background: #5cb0a9;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin-top: 20px;
  border: 2px solid #5cb0a9; }
  .green-btn:hover {
    border: 2px solid #5cb0a9;
    background: white;
    color: #5cb0a9; }

section {
  width: 80%;
  padding: 80px 10%; }

.home {
  height: 69%;
  padding: 10%;
  background: #5cb0a9 url(../images/bg-home-090616.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  z-index: 1; }
  .home h2 {
    position: fixed;
    top: 40%; }

.work {
  width: 100%;
  background: white;
  position: relative;
  z-index: 5;
  padding: 40px 0 80px; }
  .work h2 {
    color: #5cb0a9;
    margin: 60px auto 40px; }
  .work ul {
    width: 100%; }
    .work ul .single-project {
      display: block;
      width: 80%;
      padding: 80px 10%; }
      .work ul .single-project img {
        display: inline-block;
        width: 420px;
        height: 290px;
        float: left;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 0 10px;
        box-shadow: rgba(0, 0, 0, 0.15) 0 0 10px; }
  .work .project-details {
    width: 41.66667%;
    float: left;
    padding: 10px 5% 0 5%; }
    .work .project-details h3 {
      font: 22px/1.6 "TuffyBold";
      color: #333; }
    .work .project-details .project-desc {
      font: 18px/1.6 "TuffyRegular";
      margin: 14px 0; }
    .work .project-details .responsibilites {
      font: 14px/1.6 "TuffyBold"; }

.bio {
  width: 60%;
  padding: 80px 20%;
  position: relative;
  z-index: 5;
  background: url(../images/bg-pattern.jpg);
  text-align: center; }
  .bio .bio-photo {
    display: inline-block;
    width: 237px;
    height: 236px;
    -webkit-border-radius: 236px;
    border-radius: 236px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; }
  .bio .bio-text {
    font: 22px/1.6 "TuffyRegular";
    padding: 40px 0; }
  .bio .tldr {
    font-size: 16px;
    color: #5cb0a9; }

.contact {
  background: #5cb0a9;
  text-align: center;
  position: relative;
  z-index: 5; }
  .contact h2 {
    width: 100%; }
  .contact a {
    display: inline-block;
    color: white;
    font: 20px/1.6 "TuffyRegular";
    font-weight: normal;
    letter-spacing: 1px;
    margin-top: 30px;
    border: 2px solid #5cb0a9;
    padding: 10px 20px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
    opacity: .5; }
    .contact a:hover {
      border: 2px solid white;
      opacity: 1; }

/* 08 =UTILITY
------------------------- */
.floatl {
  float: left;
  margin: 0;
  padding: 0 10px 10px 0; }

.floatr {
  float: right;
  margin: 0;
  padding: 0 0 10px 10px; }

.required {
  color: #CC0000; }

.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.hidden {
  display: none;
  visibility: hidden; }

/* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

.clearfix:after {
  clear: both; }

/* 10=RESPONSIVE
------------------------- */
@media (max-width: 700px) {
  .header {
    width: 90%;
    padding: 20px 5%; }

  section {
    width: 90%;
    padding: 20px 5%; }

  .home {
    height: 95%;
    padding: 10% 5%; }
    .home h2 {
      width: 90%;
      top: 35%;
      font: 56px/1 "TuffyRegular"; }
    .home .smooth-link {
      top: 75%; }

  .bio {
    width: 80%;
    padding: 80px 10%; }

  .work {
    width: 90%;
    padding: 20px 5%; }
    .work h2 {
      width: 100%; }
    .work ul .single-project {
      width: 100%;
      padding: 40px 0; }
      .work ul .single-project img {
        width: 100%;
        height: auto; }
    .work .project-details {
      width: 100%;
      padding: 0;
      margin-top: 40px;
      text-align: center; }
      .work .project-details h3 {
        font-size: 23px; }

  .green-btn {
    font: 18px/1.4 "TuffyRegular";
    margin-top: 30px;
    padding: 8px 20px; }

  .contact h2,
  .work h2 {
    font: 52px/1 "TuffyRegular"; }

  .contact {
    padding: 50px 5%; }
    .contact h2 {
      font: 46px/1 "TuffyRegular"; }
    .contact a {
      font-size: 14px;
      border-color: white;
      opacity: 1; } }

/*# sourceMappingURL=styles.css.map */