@charset "utf-8";

/*==========Common Styles==========*/
*,html {font-size: 100%; -webkit-text-size-adjust: none; font-family: 'ProximaNova-Regular', Arial, sans-serif;} 
*{margin:0;}
html, body{margin: 0;padding: 0;}
body{min-width:1000px;}

/*==========General text==========*/
h1, h2, h3, h4, h5, h6{font-weight: normal;}
p{padding-bottom: 18px;}
.s10{font-size:0.625em;}
.s11{font-size:0.688em;}
.s12{font-size:0.75em;}
.s13{font-size:0.813em;}
.s14{font-size:0.875em;}
.s15{font-size:0.938em;}
.s16{font-size:1em;}
.s18{font-size:1.125em;}
.s20{font-size:1.25em; line-height:1.4em;}
.orange{color:#EF3E35;}
.darkgrey{color:#333;}
.clear{clear: both;}
.left{float: left;}
.right{float: right;}
a img{border: 0;}
a .alt {display: none;}

/*==========Wrappers==========*/
#main_wrapper{width:940px; margin:50px auto 0 auto;}
#logo{display:block; width:154px; height:72px; background:url(../assets/logo_eng.png) top left no-repeat; margin-bottom:48px;}

#footer{clear:both; padding:20px 0 14px 0; font-size:0.75em; color:#999; text-align:right;}

.border_wrap{clear:both; padding-bottom:18px;}
.border_l{display:block; float:left; width:288px; height:1px; border-bottom:1px solid #D6D6D6; margin-right:36px;}
.border_r{display:block; float:left; width:616px; height:1px; border-bottom:1px solid #D6D6D6;}

.section{clear:both; padding-bottom:60px; overflow-x:hidden; overflow-y:auto;}
.section > .title{font-size:1.25em; padding-bottom:30px; color:#EF3E35; text-transform:uppercase;}
.section > .subtitle{font-family: 'ProximaNova-Bold', Arial, sans-serif; font-size:0.75em; padding-bottom:15px; color:#EF3E35; text-transform:uppercase;}

.featured {clear:both; padding-bottom:40px; overflow-x:hidden; overflow-y:auto;}
.featured > .l_col{width:290px; margin-right:35px; float:right;}
.featured > .r_col{width:615px; float:right;}
.featured > .l_col > .title{font-size:1.75em; color:#333;}
.featured > .l_col > .subtitle{font-size:0.875em; color:#333; padding-bottom:10px;}
.featured > .l_col > .desc{width:288px; font-size:0.875em; line-height:1.375em; color:#333; padding:14px 0 6px 0;}
.featured a{font-size:0.875em; color:#EF3E35; text-decoration:none;}
a.arr{display:inline-block; zoom:1; *display:inline; background:url(../assets/icon_arrow.png) right center no-repeat; padding-right:15px; padding-bottom:2px; border-bottom:1px dashed transparent;}
a.arr:hover{border-bottom:1px dashed #EF3E35;}

.iphone{display:block; float:left; width:183px; height:322px; background:url(../assets/iphone_bg.png) top left no-repeat; padding:54px 12px 62px 12px; margin-right:65px;}
.iphone:first-child{margin-left:65px;}
.iphone > img{border:1px solid #E2E2E2;}

.recent{clear:both; padding-bottom:40px; overflow-x:hidden; overflow-y:auto;}
.recent > .project{width:292px; float:left; margin-left:32px;}
.recent > .project:first-child{margin-left:0;}
.recent > .project > .title{font-size:1.25em; color:#333; padding-bottom:6px;}
.recent > .project > .desc{font-size:0.875em; line-height:1.375em; color:#333; padding-bottom:6px;}
.recent > .project a{font-size:0.875em; color:#EF3E35; text-decoration:none;}
.recent > .project > .thumb{display:block; width:288px; height:210px; padding:2px 2px 3px 2px; background:url(../assets/recentproject_bg.png) top left no-repeat; margin-bottom:18px; overflow:hidden;}
.recent > .project > .thumb > a{display:block; width:288px; height:210px; background-position:0 0;}
.recent > .project > .thumb > a:hover{background-position:288px 0;}

.contact > .title{width:324px; float:left;}
.contact > .col{float:left; display:block; font-size:0.875em; color:#EF3E35;}
.contact > .col a{color:#EF3E35; text-decoration:none; padding-bottom:2px; border-bottom:1px dashed transparent;}
.contact > .col a:hover{border-bottom:1px dashed #EF3E35;}
.contact .mail{background:url(../assets/icon_mail.png) left 4px no-repeat; padding:4px 0 0 45px; margin-right:27px;}
.contact .location{background:url(../assets/icon_location.png) top left no-repeat; padding:4px 0 0 35px; height:26px; margin-right:27px;}
.contact .phone{background:url(../assets/icon_phone.png) top left no-repeat; padding:4px 0 0 30px; height:22px;}


/*---For retina display---*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#logo{background-image:url(../assets/logo_eng@2x.png); background-size:154px 72px;}
	a.arr{background-image:url(../assets/icon_arrow@2x.png); background-size:6px 11px;}
	.contact .mail{background-image:url(../assets/icon_mail@2x.png); background-size:27px 18px;}
	.contact .location{background-image:url(../assets/icon_location@2x.png); background-size:21px 31px;}
	.contact .phone{background-image:url(../assets/icon_phone@2x.png); background-size:19px 26px;}
}