@charset "UTF-8";
/* CSS Document */

/* Reset */
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; outline: 0; font-size: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {background-color: #8a1f03; color: #3d3d3d; line-height: 1.5em; margin: 0 auto; font-size: 1em; -webkit-text-size-adjust: 100%;}
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;}

/* For modern browsers */
.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {zoom:1;}

/* IE images */
img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}

/* typography */
h1{color: #8a1f03; font-size: 160%; font-weight: normal; line-height: 130%; margin-bottom: .25em;}
h2{color: #8a1f03; font-size: 145%; font-weight: normal; line-height: 130%; margin-bottom: .25em;}
h3{color: #8a1f03; font-size: 125%; line-height: 130%; margin-bottom: .25em;}
h4{color: #3d3d3d; font-size: 100%; line-height: 130%; margin-bottom: .25em;}
h5{color: #e8941a; font-size: 80%; line-height: 130%; margin-bottom: .25em;}
h6{color: #e8941a; font-size: 70%; line-height: 130%; margin-bottom: .25em;}
.header {font-size: .7em;}
a.header, a:visited.header {color: #3d3d3d; text-decoration: none;}
a, a:visited {color: #8a1f03; text-decoration: none; }
a:hover {text-decoration: underline; }
a[href^=tel]{color:inherit; text-decoration:none;}
.mp_backlinks {margin: 0px;	overflow: visible;	font-size: .9em; float: left; list-style-type:none; padding-right: .5%;}
.mp_backlinks a {font-weight: normal; color: #8a1f03; text-decoration: none;}
.mp_backlinks a:hover {text-decoration: underline;}
.mp_backlinks a:visited {text-decoration: none;}
p {margin: .75em 1em .75em 0;}
.how {margin: 0 68px;}
ul.content {list-style: disc; margin: 1em; padding-left: 1em;}
.detail {font-size: .9em; line-height: 1.5em;}
.footer {font-size: .8em; line-height: 1.25em;}
.copyright {font-size: .7em; line-height: 1.25em;}

/*images*/
#preload { display: none; }
.ads {background: url(../images/work-DCS-ad.png); height: 140px; width: 230px;}
.web2 {background: url(../images/work-Covell-web.png); height: 140px; width: 230px;}
.web1 {background: url(../images/work-DFW-web.png); height: 280px; width: 160px;}
.email {background: url(../images/work-DCS-email.png); height: 140px; width: 160px;}
.event {background: url(../images/work-SWVS2.png); height: 140px; width: 160px;}
.logo {background: url(../images/work-DFW-logo.png); height: 140px; width: 160px;}
.identity {background: url(../images/work-Oneill-ID.png); height: 140px; width: 160px;}
.tradeshow {background: url(../images/work-BancTec-TradeShow.png); height: 140px; width: 230px;}
.brochure {background: url(../images/work-CRSmith-brochure.png); height: 140px; width: 230px;}
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {background-repeat: no-repeat; background-size: 100%;}
.web2:hover {background: url(../images/work-Covell-web_hover.png);}
.ads:hover {background: url(../images/work-DCS-ad_hover.png);}
.web1:hover {background: url(../images/work-DFW-web_hover.png);}
.event:hover {background: url(../images/work-SWVS2_hover.png);}
.email:hover {background: url(../images/work-DCS-email_hover.png);}
.identity:hover {background: url(../images/work-Oneill-ID_hover.png);}
.logo:hover {background: url(../images/work-DFW-logo_hover.png);}
.tradeshow:hover {background: url(../images/work-BancTec-TradeShow_hover.png);}
.brochure:hover {background: url(../images/work-CRSmith-brochure_hover.png);}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {background-repeat: no-repeat; background-size: 100%;}

/* icons */
 @font-face {font-family: 'EntypoSocialRegular'; src: url('font/entypo-social.eot'); src: url('font/entypo-social.eot?#iefix') format('embedded-opentype'), url('font/entypo-social.woff') format('woff'), url('font/entypo-social.ttf') format('truetype'), url('font/entypo-social.svg#EntypoRegular') format('svg'); font-weight: normal; font-style: normal;}
.entypo-social {font-family: 'EntypoSocialRegular'; font-size: 3em; font-weight: normal; line-height: 0;}
.entypo-social.twitter:before{ content:'\F309'; }
.entypo-social.facebook:before{ content:'\F30C'; }
.entypo-social.linkedin:before{ content:'\F318'; }

/* grid 980 */
.wrapper {width: 100%;}
.home-services {background-image: url('../images/rubber-bands.png'); background-position: center top; background-repeat: no-repeat; -webkit-background-size: 1400px 600px; -moz-background-size: 1400px 600px; -o-background-size: 1400px 600px; background-size: 1400px 600px; color: #ffffff; padding-bottom: 1em; padding-top: 1em;}
.container-12 {width: 980px; margin: 0 auto; padding: 0 1%;}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-links, .grid-logo, .grid-nav {display:inline; float: left; padding: 1%;}
.container-12 .grid-1 {width:5.5%;}
.container-12 .grid-2 {width:14%;}
.container-12 .grid-3, .container-12 .grid-logo {width:22.5%;}
.container-12 .grid-4 {width:31%;}
.container-12 .grid-5 {width:39.5%;}
.container-12 .grid-6 {width:48%;}
.container-12 .grid-7 {width:56.5%;}
.container-12 .grid-8 {width:65%;}
.container-12 .grid-9, .container-12 .grid-links, .container-12 .grid-nav {width:73.5%;}
.container-12 .grid-links {padding-bottom: 5.3em;}
.container-12 .grid-10 {width:82%;}
.container-12 .grid-11 {width:90.5%;}
.container-12 .grid-12 {width:98%; margin:0;}
.grid-logo, .grid-nav {padding-bottom: 0;}
#hidden {display: inline;}
#hidden2 {display: none;}
#hidden3 {display: inline;}
#hidden4 {display: none;}
#hidden5 {display: inline;}
#hidden6 {display: none;}
#bio-joel, #bio-courtney {display: none;}
/* MAIN NAVIGATION */
#menu-icon {display: none;}
#nav-list {display: none;}
#nav-bar {float: right; position: relative; z-index: 500; color: #3d3d3d; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px auto 0px 0px; font-size: 1.05em; line-height: 100%;}
#nav-bar ul {list-style-type: none;}
#nav-bar ul li {float: left; position: relative; padding-left: 2em;}
#nav-bar ul li a {display: block; text-align: right; color: #3d3d3d; text-decoration: none; font-weight: normal;}
#nav-bar ul li a:hover {color: #8a1f03; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#nav-bar ul li ul {font-weight: normal; display: none; text-transform: none; font-size: .9em; line-height: 100%; font-weight: normal;}
#nav-bar ul li:hover ul {font-weight: normal; display: block; position: absolute; left: 0; text-align: left;}
#nav-bar ul li:hover ul li a {color: #ffffff; font-weight: normal; background: #e8941a; display: block; border-top: 1px solid #ffffff; width: 12.25em; padding: .625em; text-align: left;}
#nav-bar ul li:hover ul li a:hover {color: #ffffff; background: #8a1f03; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

/* grid 768 to 980 */
@media only screen and (max-width: 979px) {
.container-12 {width: 98%; padding: 0;}
#nav-bar {font-size: 1em; line-height: 100%; padding-top: 1%;}
.container-12 .grid-links {padding-bottom: 4.6em;}
/*images*/
.ads {height: 7em; width: 105%;}
.web2 {height: 7em; width: 105%;}
.web1 {height: 14em; width: 115%;}
.email {height: 7em; width: 115%;}
.event {height: 7em; width: 115%;}
.logo {height: 7em; width: 115%;}
.identity {height: 7em; width: 115%;}
.tradeshow {height: 7em; width: 105%;}
.brochure {height: 7em; width: 105%;}
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {background-position: center; background-size: 110%;}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {background-position: center; background-size: 110%;}
}

/* grid below 768 */
@media only screen and (max-width: 767px) {
.home-services {background-image: none; }
.container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11 {width: 98%;}
.container-12 .grid-links {display: none;}
.container-12 .grid-nav {padding-top: 104px;}
#hidden {display: none;}
#hidden2 {display: inline;}
.footer-small {margin-right: 40%;}
#menu-icon {color: #3d3d3d; width: 40px; height: 40px; background: url(../images/menu-icon.png); background-size: 100%; background-position: top 0 right 0; background-repeat: no-repeat; cursor: pointer; border: none; display: block;}
#nav-bar {display: none;}
#nav-list {color: #ffffff; clear:both; position: relative; background: #e8941a; border: none; display:none;}
#nav {position: relative; z-index: 10000; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0 auto 0 0; font-size: 1em; line-height: 100%;}
#nav ul {list-style-type: none;}
#nav ul li {position: relative; padding: 0;}
#nav ul li a {display: block; width: 100%; text-align: left; color: #ffffff; text-decoration: none; font-weight: normal; padding: 15px;}
#nav ul li a:hover {color: #ffffff; background: #8a1f03; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
#nav ul li ul {display: none;}
#nav ul li:hover ul {display: none;}
#nav ul li:hover ul li a {display: none;}
#nav ul li:hover ul li a:hover {display: none;}
#nav ul ul ul li {display: none;}
#nav ul ul li:hover ul li {display: none;}
/*images*/
.web2 {background: url(../images/work-Covell-web-sm.png);}
.ads {background: url(../images/work-DCS-ad-sm.png);}
.web1 {background: url(../images/work-DFW-web-sm.png);}
.event {background: url(../images/work-SWVS2-sm.png);}
.email {background: url(../images/work-DCS-email-sm.png);}
.identity {background: url(../images/work-Oneill-ID-sm.png);}
.logo {background: url(../images/work-DFW-logo-sm.png);}
.tradeshow {background: url(../images/work-BancTec-TradeShow-sm.png);}
.brochure {background: url(../images/work-CRSmith-brochure-sm.png);}
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {background-position: center; background-size: 110%; float: left; height: 12em; width: 33%;}
.web2:hover {background: url(../images/work-Covell-web-sm_hover.png);}
.ads:hover {background: url(../images/work-DCS-ad-sm_hover.png);}
.web1:hover {background: url(../images/work-DFW-web-sm_hover.png);}
.event:hover {background: url(../images/work-SWVS2-sm_hover.png);}
.email:hover {background: url(../images/work-DCS-email-sm_hover.png);}
.identity:hover {background: url(../images/work-Oneill-ID-sm_hover.png);}
.logo:hover {background: url(../images/work-DFW-logo-sm_hover.png);}
.tradeshow:hover {background: url(../images/work-BancTec-TradeShow-sm_hover.png);}
.brochure:hover {background: url(../images/work-CRSmith-brochure-sm_hover.png);}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {background-position: center; background-size: 110%; float: left; height: 12em; width: 33%;}
}

/* grid 600 and below */
@media only screen and (max-width: 600px) {
#hidden3 {display: none;}
#hidden4 {display: inline;}
.footer-small {margin-right: 1%;}
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {height: 10em;}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {height: 10em;}
}

/* grid 480 and below */
@media only screen and (max-width: 480px) {
.container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11 {padding-bottom: 2%; padding-top: 2%;}
#hidden5 {display: none;}
#hidden6 {display: inline;}
.how {margin: 0;}
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {height: 6em;}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {height: 6em;}
}

/* grid 320 and below */
@media only screen and (max-width: 320px) {
.identity, .ads, .web1, .event, .email, .web2, .logo, .tradeshow, .brochure {height: 4.5em;}
.identity:hover, .ads:hover, .web1:hover, .event:hover, .email:hover, .web2:hover, .logo:hover, .tradeshow:hover, .brochure:hover {height: 4.5em;}
}