/* CSS Reset v2.0 (http://meyerweb.com/eric/tools/css/reset/) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; *behavior: url(/css/boxsizing.htc); }


/* CSS Document */
body { font: 1.357em/1.1 "Colaborate", Ariel, Helvetica, sans-serif; font-weight: 200; color: #666;  }
h1 { font: 1.818em "Museo", serif; color: #8C7ED2; }
h2 { font: 1.273em "Museo", serif; color: #666; margin-bottom: 0.5em; }
strong { font-weight: 400; }
a {
	color: #8C7ED2;
	text-decoration: none;

	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
a:hover {
	color: #3D2E81;

	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.section { padding: 60px 0; border-bottom: 1px solid #ddd; }
.section.last { border-bottom: none; }

.scroll-top { display: none; width: 40px; height: 40px; position: fixed; bottom: 20px; right: 20px; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; }
.scroll-top a { display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; color: #fff; text-align: center; line-height: 38px; background-color: #333; }
.scroll-top a:hover { background-color: #8C7ED2; }

#header { height: auto; min-height: 500px; background: url(../images/bkg.png) center bottom repeat; background-size: cover; }
#logo-nav { padding: 50px 0; }
#logo { display: block; width: 200px; height: 35px; float: left; background: url(../images/triple_right_logo.png) no-repeat; }
#nav { display: block; height: 35px; float: right; }
#nav ul { }
#nav ul li { display: block; float: left; }
#nav a { display: block; height: 35px; padding: 0 20px; font: 1em/35px "Museo", serif; font-weight: 300; color: #666; text-transform: lowercase; }
#nav a:hover { color: #333; }

#intro { padding-top: 80px; }

#services .section .content { position: relative; min-height: 200px; }
#services .section .glyph { display: block; width: 201px; height: 200px; position: absolute; top: 0; background: url(../images/glyphs.png) no-repeat; }
#services #magento .glyph { background-position: 0 0; }
#services #applications .glyph { background-position: 0 -200px; }
#services #design .glyph { background-position: 0 -400px; }
#services .section .glyph { left: 0; }
#services .section .content { padding-left: 260px; }
#services .section.right .glyph { left: auto; right: 0; }
#services .section.right .content { padding-left: 0; padding-right: 260px; }

#contact-us .email { padding: 1em 0; }
#contact-us .social-icons a { display: inline-block; width: 30px; height: 30px; line-height: 32px; margin-right: 10px; text-align: center; }
#contact-us .social-icons a:hover { }

#footer { background: url(../images/bkg.png) center top repeat; background-size: cover; }
#copyright { font: 0.545em Arial, Helvetica, sans-serif; color: #999; text-align: center; padding: 20px 0; }

@media screen and (max-width: 1280px) {
	.container { width: 90%; }
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 960px) {
	h1 { font-size: 1.636em; }
}

@media screen and (max-width: 768px) {
	#header { min-height: 100px; padding-bottom: 60px; }
	#logo-nav { padding: 60px 0; }
	#logo { float: none; margin: 0 auto; }
	#nav { display: none; }
    #intro { text-align: center; padding-top: 0; }

	.scroll-top { display: none !important; }
}

@media screen and (max-width: 600px) {
	h2 { text-align: center; }
	#services .section .glyph { position: relative; top: auto; left: auto; margin: 0 auto; }
	#services .section .content, #services .section.right .content { padding: 0; min-height: auto; }
	#services .section .content h2 { margin-top: 1em; }
	#contact-us .email, #contact-us .social-icons { text-align: center; }
	#contact-us .email { font-size: 0.9em; }

}

@media screen and (max-width: 480px) {

	h1 { font-size: 1.273em; }
}

@media screen and (max-width: 320px) {

}