/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/* Global */
body { color:#7f7f7f;font-family:Arial, sans-serif;font-size:14px;}
h1 {font-size:30px; }
h2 { font-size:24px;}
h3 { font-size:20px;}
a { color:#0da5ba;text-decoration:none;}
hr { border:1px solid #ccc;border-bottom:0;}
strong { font-weight:bold;}
.wrapper {margin:0 auto;max-width:1200px;min-width:380px;width:100%; }
.page-content { margin:30px;}

/*Sprited images*/
.sprite { background:url(../images/sprite.png);}
.mail-dark {background-position:0 0; height:8px;width:15px;}
.phone-dark {background-position:0 -13px;height:20px;width:10px; }
.marker-dark {background-position:0 -35px;height:19px;width:10px; }
.mail-light {background-position:0 -88px;height:13px;width:23px; }
.phone-light {background-position:0 -59px;height:24px;width:11px; }
.marker-light {background-position:0 -106px;height:26px;width:17px; }

/* Header*/
header { background:url(../images/top-banner.jpg) no-repeat;background-size:100%;font-family:Georgia;height:150px;margin:50px auto 0;position:relative;max-width:1145px;width:100%;}
header h1 { color:#fff;position:absolute;right:145px;top:38%;}
header h1 span { font-weight:normal;padding:0 20px;}

.contact { right:145px;position:absolute;top:115px;}
.contact li { float:left;line-height:24px;padding-left:20px;}
.contact li:first-child { padding-left:0;}
.contact li span { display:inline-block;padding-right:5px;}
.contact li p { display:inline-block;position:relative;}
.contact .phone p { top:-5px;}
.contact .marker p { top: -2px; }
.contact li a { color:#7f7f7f;}


/*footer*/
footer { background:url(../images/bottom-banner.jpg) no-repeat;background-size:100%;color:#fff;font-family:Georgia;height:150px;margin:50px 0 10px;position:relative;max-width:1200px;width:100%;}
footer .contact { right:80px;top:50px;}
footer .contact li { border-left:1px solid #fff;line-height:55px;padding-right:20px;}
footer .contact li:first-child { border:none;}
footer .contact li a { color:#fff;}

/*projects*/
article h3 { margin-bottom:20px;}
.project-triggers { margin:20px 0;}
.project-triggers a {border-left:1px solid #ccc;font-size:15px;line-height:30px; padding:0 11px;}
.project-triggers a.active { font-weight:bold;}
.project-triggers a:first-child { border:none;padding-left:0;}
.project-triggers a:last-child { padding-right:0;}
.project-content { padding-top:20px;}
.project-content article { display:none;}
.project-content article.active { display:block;}
.details { box-sizing:border-box;-moz-box-sizing:border-box;float:left;padding-right:50px;width:290px}
.details p { color:#999;font-size:12px;padding-bottom:20px;word-wrap:break-word;}
.details p strong { color:#7f7f7f;display:block;font-size:15px;padding-bottom:5px;}
.screens { float:left;width:835px;}

/*screens*/
.screen-triggers { margin-bottom:20px;}
.screen-triggers a { padding-right:10px;}
.screen-triggers a.active { font-weight:bold;}
.screenshots {max-width:834px; }
.screenshots img { display:none;max-width:835px;}
.screenshots img.active { display:block;}

.clear { clear:both;float:none;}

@media screen and (max-width:1200px) {
	.details { width:30%;}
	.screens {width:70%; }
	.screenshots img { max-width:100%;}
	.project-triggers a { font-size:14px;padding:0 9px;}
}

@media screen and (max-width:1170px) {
	header h1 { top:37%;}
	
}
@media screen and (max-width:1070px) {
	header h1 { top:34%;}
	
}
@media screen and (max-width:1000px) {
	header h1 { color:#7f7f7f;top:65%;}
	.contact { top:93%;}
	footer .contact { top:30px;}
	
}

@media screen and (max-width:775px) {
	.details,
	.screens {width:100%; }
	.details { margin-bottom:20px;}
	.details p strong { display:inline-block;}
	header h1 { left:30px;right:auto;top:68%;}
	.contact {left:30px;right:auto; }
	footer .contact { left:auto;right:20px;top:30px;}
	footer .contact li { line-height:40px;}
	
}

@media screen and (max-width:710px) {
	footer .contact {left:auto; position:absolute;right:10px;top:30px;}
	footer .contact li { font-size:16px;float:left;line-height:20px;padding:0 10px;}
	footer .contact li span,
	footer .contact li.marker { display:none;}
	footer .contact .phone p { top:0;}
}

@media screen and (max-width:500px) {
	header { height:180px;}
	header h1 { font-size:23px;top:65px;position:relative;}
	header h1 span { padding:0 5px;}
	.contact { top:70px;position:relative;}
	.contact li { float:none;padding-left:0;}
	footer .contact li {font-size:11px; }
	footer .contact { top:14px;}
	
}