@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
a, a:visited, a:hover { text-decoration: none; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; font-size: 62.5%; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

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

a, a:visited, a:hover { text-decoration: none; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; font-size: 62.5%; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

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

Body { font-family: "PT Sans", sans-serif; }

p { font-family: "PT Sans", sans-serif; }

h1, h2, h3, h4, h4 { font-family: "Roboto Slab", serif; }

body { background-color: #e4e4e4; }

.containerStech { text-align: center; width: 100%; margin: auto; *zoom: 1; }
.containerStech:after { content: ''; display: table; line-height: 0; clear: both; }

.containerHalf { width: 50%; margin: auto; *zoom: 1; text-align: center; }
.containerHalf:after { content: ''; display: table; line-height: 0; clear: both; }

.header { height: 90px; z-index: 999; background-color: #ffffff; border-radius: 10px; margin-top: 20px; -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); }
.header .logo { margin: -25px 0px 20px 20px; float: left; }
.header .nMenu { float: right; font-size: 1.5rem; }
.header .nMenu ul li { float: left; text-transform: uppercase; margin-top: 55px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; }
.header .nMenu ul li a, .header .nMenu ul li a:visited { color: #b5b5b5; }
.header .nMenu ul li a:hover { color: #f14736; }

#sHero { margin-top: 55px; color: #ffffff; }
#sHero .fold { border-radius: 10px; height: 400px; background-color: #f14736; }
#sHero h2 { font-size: 5.5rem; font-weight: 600; padding-top: 35px; }
#sHero h2 span { font-size: 13rem; display: block; clear: both; text-transform: uppercase; font-weight: 500; transform: scale(1, 1.2); -webkit-transform: scale(1, 1.2); /* Safari and Chrome */ -moz-transform: scale(1, 1.2); /* Firefox */ -ms-transform: scale(1, 1.2); /* IE 9+ */ -o-transform: scale(1, 1.2); /* Opera */ padding-top: 20px; }
#sHero .quote { height: 80px; width: 332px; display: block; position: absolute; left: 50%; margin: 10px  0px 0px -166px; background-image: url("../images/hQuote.png"); background-repeat: no-repeat; text-indent: -9999px; }

#sAbout { margin-top: 100px; }
#sAbout h2 { color: #ffffff; font-size: 7.2rem; font-weight: 900; text-align: right; text-transform: uppercase; with: 100%; background-image: url("../images/resume.png"); background-repeat: no-repeat; }
#sAbout h2 span { color: #f14736; }
#sAbout .content { margin-top: 25px; *zoom: 1; font-family: "PT Sans", sans-serif; }
#sAbout .content:after { content: ''; display: table; line-height: 0; clear: both; }
#sAbout .resume { width: 300px; height: 350px; float: left; background-color: #ffffff; border-top: 5px #f14736 solid; border-left: 1px #a8a8a8 solid; border-right: 1px #a8a8a8 solid; border-bottom: 1px #a8a8a8 solid; border-radius: 0px 0px 15px 0px; -moz-border-radius: 0px 0px 15px 0px; -webkit-border-radius: 0px 0px 15px 0px; text-align: left; }
#sAbout .resume p { font-size: .8rem; padding: 15px; font-style: italic; margin-left: 20px; line-height: 1.1rem; }
#sAbout .resume p span { margin-left: -25px; display: block; clear: both; font-weight: bold; color: #f14736; text-transform: uppercase; font-style: normal; font-size: .9rem; margin-bottom: 10px; line-height: 100%; }
#sAbout .about { text-align: left; width: 675px; float: left; }
#sAbout .about p { font-size: 1rem; width: 100%; color: #787878; padding-left: 40px; margin-bottom: 30px; line-height: 1.3rem; font-style: italic; }

#sSteps { background-color: #ffffff; border-top: 5px #f14736 solid; margin-top: 50px; text-align: center; }
#sSteps .title { color: #f14736; font-size: 7.2rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 0px; }
#sSteps .subTitle { font-size: .8rem; padding: 15px; font-style: italic; margin-left: 20px; margin-bottom: 20px; line-height: 1.1rem; color: #b5b5b5; width: 90%; }
#sSteps .subStep { margin: 50px 0px 25px 0px; width: 33.3%; float: left; min-width: 320px; }
#sSteps .subStep p { text-align: left; font-size: .8rem; padding: 30px; line-height: 1.1rem; color: #b5b5b5; width: 90%; }

#sWorks { margin-top: 50px; text-align: center; }
#sWorks .title { color: #f14736; font-size: 7.2rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; }
#sWorks .subTitle { font-size: .8rem; font-style: italic; margin-bottom: 25px; line-height: 1.1rem; color: #787878; padding: 20px; }
#sWorks .subPort img { border: 5px solid white; margin: 15px; }

#sContact { background-color: #353434; border-top: 5px #f14736 solid; margin-top: 100px; text-align: center; margin-bottom: 10px; }
#sContact .title { color: #b5b5b5; font-size: 7.2rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 0px; }
#sContact .subTitle { font-size: .8rem; padding: 15px; font-style: italic; margin-left: 20px; margin-bottom: 20px; line-height: 1.1rem; color: #b5b5b5; width: 90%; }
#sContact .cForm { background-color: #f2f2f2; width: 100%; margin-bottom: 5px; width: 640px; padding-top: 20px; padding-bottom: 20px; }
#sContact .cForm h2 { font-size: 1.5rem; text-align: left; background-image: url("../images/contact.png"); background-repeat: no-repeat; padding-left: 40px; margin-bottom: 25px; padding-top: -15px; color: #a1a1a1; font-weight: 300; margin-left: 20px; }
#sContact .cForm .oneLine { width: 320px; float: left; text-align: left; }
#sContact .cForm .txtBx { border: 1px solid #b5b5b5; border-left: 4px solid #f14736; height: 25px; width: 250px; padding: 5px; font-size: 1rem; float: left; margin-bottom: 20px; font-weight: 500; margin-left: 20px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; }
#sContact .cForm .txtArea { width: 270px; border: 1px solid #b5b5b5; border-left: 4px solid #f14736; height: 110px; margin-left: 20px; }
#sContact .cForm .chBox li { float: left; margin-left: 20px; font-size: .8rem; font-weight: 600; color: #a1a1a1; margin-top: 10px; }
#sContact .cForm .formError { color: #f14736; margin-top: 10px; font-weight: 600; font-size: .8rem; *zoom: 1; }
#sContact .cForm .formError:after { content: ''; display: table; line-height: 0; clear: both; }
#sContact .cForm .cSubmit { font-weight: 900; width: 236px; height: 50px; display: block; margin: auto; border: 1px solid #b5b5b5; color: #f14736; font-size: 2.2rem; text-transform: uppercase; *zoom: 1; padding: 0px 0px 25px 0px; font-family: "Roboto Slab", serif; background-color: transparent; }
#sContact .cForm .cSubmit:after { content: ''; display: table; line-height: 0; clear: both; }

#sFooter { text-align: center; }
#sFooter .fMenu { display: inline-block; font-size: .8rem; }
#sFooter .fMenu li { float: left; margin: 25px 20px 50px 20px; text-transform: uppercase; }
#sFooter .fMenu li a, #sFooter .fMenu li a:visited { color: #787878; }
#sFooter .fMenu li a:hover { color: #f14736; }

@media screen and (min-width: 999px) { .container { width: 1000px; margin: auto; *zoom: 1; text-align: center; }
  .container:after { content: ''; display: table; line-height: 0; clear: both; } }
/*TABLET MOCKUP*/
/*----------------------------------------------------------------------------------------*/
@media screen and (max-width: 999px) { .container { width: 640px; margin: auto; *zoom: 1; text-align: center; }
  .container:after { content: ''; display: table; line-height: 0; clear: both; }
  .header { height: 90px; z-index: 999; background-color: #ffffff; border-radius: 10px; margin-top: 20px; -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); }
  .header .logo { margin: -25px 0px 20px 20px; float: left; }
  .header .nMenu { float: right; font-size: 1.1rem; }
  .header .nMenu ul li { float: left; text-transform: uppercase; margin-top: 55px; margin-right: 10px; margin-bottom: 0px; margin-left: 10px; }
  .header .nMenu ul li a, .header .nMenu ul li a:visited { color: #b5b5b5; }
  .header .nMenu ul li a:hover { color: #f14736; }
  #sHero .fold { border-radius: 10px; height: 275px; background-color: #f14736; }
  #sHero h2 { font-size: 3.5rem; font-weight: 600; padding-top: 25px; }
  #sHero h2 span { font-size: 7.8rem; font-weight: 600; padding-top: 20px; }
  #sAbout h2 { color: #ffffff; font-size: 5.2rem; font-weight: 900; text-transform: uppercase; background-image: none; }
  #sAbout .resume { width: 100%; height: auto; padding-bottom: 10px; margin-bottom: 20px; }
  #sAbout .about { text-align: left; float: left; }
  #sAbout .about p { font-size: 1rem; color: #787878; margin-bottom: 10px; line-height: 1.3rem; padding: 0px; width: 90%; padding: 10px; }
  #sSteps { background-color: #ffffff; border-top: 5px #f14736 solid; margin-top: 50px; text-align: center; }
  #sSteps .title { color: #f14736; font-size: 5.3rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; }
  #sSteps .subStep { margin: 50px 0px 25px 0px; width: 32.3%; float: left; min-width: 320px; }
  #sSteps .subStep p { text-align: left; font-size: .8rem; padding: 15px; line-height: 1.1rem; color: #b5b5b5; }
  #sSteps .subStep:nth-child(5n) { float: none; display: inline-block; }
  #sWorks { margin-top: 50px; text-align: center; }
  #sWorks .title { color: #f14736; font-size: 5.3rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; }
  #sContact { border-top: 5px #f14736 solid; margin-top: 50px; text-align: center; }
  #sContact .title { font-size: 5.3rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; } }
/*MOBIE MOCKUP*/
/*----------------------------------------------------------------------------------------*/
@media screen and (max-width: 650px) { .container { width: 320px; margin: auto; *zoom: 1; text-align: center; }
  .container:after { content: ''; display: table; line-height: 0; clear: both; }
  .header { height: 320px; z-index: 999; background-color: #ffffff; border-radius: 10px; margin-top: 20px; -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35); }
  .header .logo { float: none; display: inline-block; }
  .header .nMenu { text-align: center; float: none; font-size: 1.3rem; }
  .header .nMenu ul { display: inline-block; width: 90%; }
  .header .nMenu ul li { float: none; margin: 0px 0px 0px 0px; text-transform: uppercase; border-bottom: 1px solid #b5b5b5; display: block; padding-bottom: 10px; padding-top: 10px; }
  .header .nMenu ul li a, .header .nMenu ul li a:visited { color: #b5b5b5; }
  .header .nMenu ul li a:hover { color: #f14736; }
  #sHero .fold { border-radius: 10px; height: 175px; background-color: #f14736; }
  #sHero h2 { font-size: 1.7rem; font-weight: 600; padding-top: 10px; }
  #sHero h2 span { font-size: 4rem; font-weight: 600; padding-top: 10px; }
  #sAbout h2 { color: #ffffff; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; background-image: none; text-align: center; }
  #sAbout .resume { width: 100%; height: auto; padding-bottom: 10px; margin-bottom: 20px; }
  #sAbout .about { width: 100%; }
  #sAbout .about p { font-size: 1rem; color: #787878; margin-bottom: 10px; line-height: 1.3rem; padding: 0px; padding: 10px; }
  #sSteps { background-color: #ffffff; border-top: 5px #f14736 solid; margin-top: 50px; text-align: center; }
  #sSteps .title { color: #f14736; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; }
  #sSteps .subTitle { font-size: .8rem; font-style: italic; line-height: 1.1rem; color: #b5b5b5; width: 80%; display: inline-block; }
  #sSteps .subStep { margin: 50px 0px 25px 0px; width: 32.3%; float: left; min-width: 320px; }
  #sSteps .subStep p { text-align: center; font-size: .8rem; padding: 15px; line-height: 1.1rem; color: #b5b5b5; }
  #sSteps .subStep:nth-child(5n) { float: none; display: inline-block; }
  #sWorks { margin-top: 50px; text-align: center; }
  #sWorks .title { color: #f14736; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; }
  #sContact { border-top: 5px #f14736 solid; margin-top: 50px; text-align: center; }
  #sContact .title { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; margin: 25px 0px 0px 20px; }
  #sContact .cForm { background-color: #f2f2f2; width: 100%; margin-bottom: 5px; padding-top: 20px; padding-bottom: 20px; }
  #sContact .cForm h2 { font-size: 1.1rem; text-align: left; background-image: url("../images/contact.png"); background-repeat: no-repeat; padding-left: 40px; margin-bottom: 25px; padding-top: -15px; color: #a1a1a1; font-weight: 300; margin-left: 20px; }
  #sContact .cForm .oneLine { width: 320px; float: left; text-align: left; }
  #sContact .cForm .txtBx { border: 1px solid #b5b5b5; border-left: 4px solid #f14736; height: 25px; width: 250px; padding: 5px; font-size: 1rem; float: left; margin-bottom: 20px; font-weight: 500; margin-left: 20px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; }
  #sContact .cForm .txtArea { width: 270px; border: 1px solid #b5b5b5; border-left: 4px solid #f14736; height: 110px; margin-left: 20px; }
  #sContact .cForm .chBox li { float: left; margin-left: 20px; font-size: .8rem; font-weight: 600; color: #a1a1a1; margin-top: 10px; }
  #sContact .cForm .cSubmit { font-weight: 900; width: 236px; height: 50px; display: block; margin: auto; border: 1px solid #b5b5b5; margin-top: 20px; color: #f14736; font-size: 2.2rem; text-transform: uppercase; *zoom: 1; padding: 0px 0px 25px 0px; font-family: "Roboto Slab", serif; background-color: transparent; }
  #sContact .cForm .cSubmit:after { content: ''; display: table; line-height: 0; clear: both; }
  #sFooter { text-align: center; }
  #sFooter .fMenu { display: inline-block; font-size: 1.3rem; width: 100%; }
  #sFooter .fMenu li { float: none; margin: 15px 10px 0px 10px; text-transform: uppercase; border-bottom: 1px solid #787878; display: block; padding-bottom: 20px; }
  #sFooter .fMenu li a, #sFooter .fMenu li a:visited { color: #787878; }
  #sFooter .fMenu li a:hover { color: #f14736; } }