/* SB CSS responsive */

/* screen less than 1200px */
@media screen and (max-width: 1200px) {
	
section.title, section.content, section.box {
	width:100%;
}
	
}

/* screen less than 1000px */
@media screen and (max-width: 1000px) {
	
main, .projects ul {
	padding:100px 50px 100px 300px;
}
section.content img, section.projects ul li a img, section.content img[src*=".gif"] {
	max-width: none;
	width:100%;
	max-height:none;
	height:auto;
}

}

/* screen less than 800px */
@media screen and (max-width: 800px) {
	
main, .projects ul {
	padding:203px 50px 100px 50px;
}
main.home {
	padding:0;
}
section.content img, section.projects ul li a img, section.content img[src*=".gif"] {
	max-width: none;
	width:100%;
	max-height:none;
	height:auto;
}
header {
	padding:100px 50px 50px 50px;
	width:100%;
	top:0;
	left:0;
	height:auto;
}
header h1 {
	margin:-31px 0 0 0;
}
#trigger-overlay {
	margin-top:13px;
	clear:none;
	float:right;
}
header .box {
	height: calc(100% - 203px);
	top:203px;
	left:50px;
}
header .box.open {
	width:calc(100% - 100px);
}
header p br {
	display:none;
}

}

/* tablet landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

main, .projects ul {
	padding:100px 50px 100px 300px;
}
.projects ul {
	height:auto;
	overflow:visible;
}
section.content img, section.projects ul li a img, section.content img[src*=".gif"] {
	max-width: 100%;
}
}

/* tablet portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

.projects ul {
	height:auto;
	overflow:visible;
}


}

/* phone landscape */
@media only screen 
and (max-device-width : 678px)
and (orientation : landscape) {

main, .projects ul {
	padding:48px 25px 25px 200px;
}
main.home {
	padding:0;
}
header {
	padding:0;
	top:25px;
	left:25px;
	width:150px;
}
header h1 {
	margin:0 0 50px 0;
	width:150px;
	height:63px;
}
header h1 a {
	width:150px;
	height:63px;
}
#trigger-overlay {
	margin-top:30px;
	clear:both;
	float:none;
}
header .box {
	height:100%;
	top:0;
	left:200px;
	padding:35px 0 0 0;
}
header .box.open {
	width:calc(100% - 225px);
}
h1, h2, h3, h4, h5, h6, .title h2 {
	margin:0 0 25px 0;
}
.title.offer h2 {
	margin:25px 0 0 0;
}
h4.date {
	margin:0 0 50px;
}
section.content img {
	margin:25px 0;
}
section.content img.project_image {
	margin:50px 0;
}
section.content img.sig {
	margin-bottom:50px;
}
section.content p + img.project_image {
	margin:50px 0 50px 0;
}
.title + .title h2 {
	margin-top:20px !important;
}
.projects ul {
	height:auto;
	overflow:visible;
}
.projects ul li {
	padding:0 0 100px 0;
}
h1 {
	font-size:30px;
}
h2 {
	font-size:25px;
}
h3 {
	font-size:20px;
}
header p br {
	display:none;
}
.title h2, .projects ul li a h2 {
	padding:11px 15px 12px 15px;
}
.title.offer h2 a {
	padding:11px 50px 12px 15px;
}
.title.offer h2 {
	padding:0;
}
h4.project_meta {
	padding:7px 15px 8px 90px;
}
h4.project_meta strong {
	text-indent:-75px;
}
h4.practice_contact, h4.client, h4.date {
	padding:7px 15px 8px 15px;
}
.projects ul .tab {
	bottom:-48px;
}
.call-out {
	padding:25px 25px 5px 25px;
	margin:25px 0;
}

}

/* phone portrait */
@media only screen 
and (max-device-width : 480px)
and (orientation : portrait) {

main, .projects ul {
	padding:113px 25px 25px 25px;
}
main.home {
	padding:0;
}
header {
	padding:25px;
	width:100%;
	height:auto;
	top:0;
	left:0;
}
header h1 {
	margin:0;
	width:150px;
	height:63px;
}
header h1 a {
	width:150px;
	height:63px;
}
#trigger-overlay {
	margin-top:30px;
	clear:none;
	float:right;
}
header .box {
	height: calc(100% - 113px);
	top:113px;
	left:25px;
}
header .box.open {
	width:calc(100% - 50px);
}
h1, h2, h3, h4, h5, h6, .title h2 {
	margin:0 0 25px 0;
}
.title.offer h2 {
	margin:25px 0 0 0;
}
h4.date {
	margin:0 0 50px;
}
section.content img {
	margin:25px 0;
}
section.content img.project_image {
	margin:50px 0;
}
section.content p + img.project_image {
	margin:50px 0 50px 0;
}
section.content img.sig {
	margin-bottom:50px;
}
.title + .title h2 {
	margin-top:20px !important;
}
.projects ul {
	height:auto;
	overflow:visible;
}
.projects ul li {
	padding:0 0 100px 0;
}
h1 {
	font-size:30px;
}
h2 {
	font-size:25px;
}
h3 {
	font-size:20px;
}
header p br {
	display:none;
}

.title h2, .projects ul li a h2 {
	padding:11px 15px 12px 15px;
}
.title.offer h2 a {
	padding:11px 50px 12px 15px;
}
.title.offer h2 {
	padding:0;
}
h4.project_meta {
	padding:7px 15px 8px 90px;
}
h4.project_meta strong {
	text-indent:-75px;
}
h4.practice_contact, h4.client, h4.date {
	padding:7px 15px 8px 15px;
}
blockquote {
	padding:75px 0 50px 0;
}
h4.client {
	margin:0 0 25px 0;
}
.projects ul .tab {
	bottom:-48px;
}
.call-out {
	padding:25px 25px 5px 25px;
	margin:25px 0;
}

}