/* @the 960px grid
********************************************************************************************
********************************************************************************************/

.container,.container-out {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding:0;
overflow:hidden;
position:relative;
	
-webkit-transition: all 1.1s ease;
-moz-transition: all 1.1s ease;
-o-transition: all 1.1s ease;
transition: all 1.1s ease;
}

.container_wrap{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding:0;
overflow:hidden;
position:relative;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol,.fifthcol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol,.warpbox {
margin-left:0;
float: left;
min-height: 1px;
overflow:hidden;
}

.threecol{
margin:0 3% 30px 0;
width:21.1%;
}

.threecol_spec{
margin:0 1px 1px 0;
width:24.84%;
max-width:238px;
padding:0;
float:left;
overflow:hidden;
}

.fourcol {
width:29.15%;
margin:0 3% 30px 0;
float:left;
}

.fourcol_spec{
margin:0 1px 1px 0;
width:33.22%;
max-width:318px;
padding:0;
float:left;
overflow:hidden;
}

.eightcol {
width: 67%;
padding-right:0;
padding-left:0;
float:left;
}

.sixcol {
width:45.4%;
margin:0 2.8% 30px 0;
padding:4px;
float:left;
background:url(../images/transparent-light.png);
}

.eightcol .sixcol{ background:none !important;}

.twelvecol {
width: 90%;
float: left;
}

.first {
margin-left: 0px;
}

object, embed {
max-width: 100%;
}

img {
	height: auto;
}


/* iPad Landscape */

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

.section{ background-attachment:scroll !important;}
	
.section .container,
#footer .container{padding: 40px 2%; width:96%;}

.section h2,
.section_text{ margin:25px 10% 20px 10%; width:80%;}

.mainflex ul li iframe,
.loading,
.loading_full{ height:570px;}
  
}

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

#header .container-out,
#header .container{ margin:0 0; max-width:100%;width:100%;}

.flexslider{ overflow:hidden; width:100%;}

#header{
	position: relative !important;
	top: auto;
	left: auto;
	margin:0;
	width:100%;
}

.top_fix{ padding-top:30px !important;}

.stuff{margin:0 10% !important; left:auto;text-align:left !important;}

#portfolio-list{ width:101%;}

.item_height2{ height: 220px;}

#foliocontent,
h1.itemtitle,
.entryfull{ margin-left:20px; margin-right:20px;}

a.mainbutton_folio{ margin-right:20px !important; margin-bottom:20px !important;}

.mainflex ul li iframe,
.loading,
.loading_full{ height:430px;}
	
}


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

.item_height2{ height: 205px;}

.fourcol_spec{ width:33%}

img.attachment-gallery_slider,
#foliocontent iframe{ max-width:100%;}

}

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

.item_height2{ height: 190px;}

.twocol-one img,.threecol-one img,.threecol-two img,.fourcol-one img,.fourcol-two img,.fourcol-three img,.fivecol-one img,.fivecol-two img,.fivecol-three img,.fivecol-four img,.sixcol-one img,.sixcol-two img,.sixcol-three img,.sixcol-four img,.sixcol-five img{ width:100% !important;}

}

/*iPad Portrait */

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

ul.scroll, ul.navi { float:left; width:100%;}

.stuff { margin:0 5% !important; padding:0 0 4% 0;}

.stuff h1{ font-size:250%; letter-spacing:-1px !important; margin-bottom:8px;}

.stuff a.tmnf-sc-button,
.stuff p{ font-size:90% !important; margin-bottom:5px; line-height:1.3 !important;}  

.resmode-No{ display:none; visibility:hidden;}

#portfolio-filter{ width:96%; padding:30px 2%;}

#portfolio-filter ul li{ margin-right:4px;}

#portfolio-filter ul li a {padding: 8px 9px;}

.section_template .container{padding:40px 2%;}
.section_template .container h2{ margin:25px 10% 20px 10%; width:80%;}

.loop{ width:101%; padding:0 2%;}

.section .loop{ width:104%;}

.comment-form-author,
.comment-form-email,
.comment-form-url{ width:29.3%;}

.item_height2{ height: 175px;}

#servicesbox li{ width: 18.5%;margin: 2px 1% 5px 0;}

#servicesbox li p{ height:200px;}

li.pricing_four{ width: 22%;margin: 2px 1% 5px 0;}
li.pricing_three{ width: 30%;margin: 2px 1% 5px 0;}

li.staff p{font-size: 80%;line-height: 1.2;}

ul.staff_social li{ width:24px;}

#clientsbox{ margin:0 0 0 0;}

#clientsbox li img{ width:100%;}


}

/* Mobile */



@media handheld, only screen and (max-width: 740px) {

body {
font-size: 16px;
-webkit-text-size-adjust: none;
}

body {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0;
padding-right: 0;
margin-top:0;
}

.slider_full:after {
display:none; visibility: hidden;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol,.fifthcol,
#foliocontent{
width: auto;
float: none !important;
padding-left: 20px;
padding-right: 20px;
margin-left: 0;
margin-right: 0;
}

#servicesbox{ width:100%;}

.fourcol,.threecol {
padding: 0 !important;
max-width: 290px;
float:none;
margin:0 auto 30px auto !important;
}

.threecol{max-width: 217px;}

.item_height2{ height: 150px;}

.sixcol{
padding: 0 !important;
float:none;
margin:0 auto 30px auto;
}

#clientsbox li,
#servicesbox li,
li.pricing_four,
li.pricing_three{
padding: 0 !important;
width: 290px;
float:none;
margin:0 auto 30px auto !important;
}

#servicesbox li p{ height:auto; padding:0 20px 20px 20px;}

.last{ margin-right:auto !important;}

.threecol_spec{ width:33%}

.warpbox,
.loop{ width:100% !important; padding:10px 0 !important; background: none !important;}

#copyright{ padding:0 5%;}

#clientsbox{ width:100%; margin:0 0;}

.pagination{ margin-bottom:40px; height:35px;}

a#navtrigger{ display:block;}

#navigation{ display:none;}

.scroll,
ul.navi{ padding:20px 0 0 0 !important; float:none;}

.scroll>li,
.navi li{width:100%; text-align:center;}

.scroll>li>a,
.navi li a{ font-size:18px !important; padding:14px 0 !important; }

.sub-menu,
.children{ z-index:9999;}

li.scrollparent>a{ padding-left:12px !important;}

#footer .fourcol {
width:290px;
}

.mainflex ul li iframe,
.loading,
.loading_full{ height:410px;}

}


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

.item_height2{ height: 130px;}

.scrollTo_top{ visibility:hidden; display:none}

.tmnf-sc-quote.left,
.tmnf-sc-quote.right{ width:100%; float:none; margin-left:0; margin-right:0}


.contact-form .forms textarea,
.contact-form .forms input.txt{ width:100%; float:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0}

.contact-form .forms label{ margin-bottom:10px}

.contact-form .forms .buttons .submit,
.contact-form .forms input#sendCopy{ margin-left:0;}

.twocol-one,.threecol-one,.threecol-two,.fourcol-one,.fourcol-two,.fourcol-three,.fivecol-one,.fivecol-two,.fivecol-three,.fivecol-four,.sixcol-one,.sixcol-two,.sixcol-three,.sixcol-four,.sixcol-five{ width:100% !important;}

.section>.container>h2,
h2.itemtitle,
h1.itemtitle{ font-size:30pt !important; letter-spacing:-2px;}

#clientsbox li{ width:50%;}

#clientsbox li img{ width:100%}

.section>.container>p {
	   -moz-column-count: 1;
       -moz-column-gap:30px;
       -webkit-column-count: 1;
       -webkit-column-gap:30px;
	   margin-bottom:25px;
	   overflow:hidden;
}

iframe{width:100%; max-height:400px}

ul.medpost>li>.meta,
ul.medpost>li>.entry{ text-align:left; width:100%;}

ul.medpost>li>.meta{height:20px; overflow:hidden;}


.comment-form-author,
.comment-form-email,
.comment-form-url{ width:28.6%;}

#respond textarea{ width:94%;}

img.alignleft,
img.alignright,
img.aligncenter,
img..alignnone,
.attachment-folio_slider,
.main-single,
.wp-caption,
.wp-caption img{ width:100%; margin:5px 0 30px 0;}

#portfolio-filter ul{ padding:0 0 2px 0;}
#portfolio-filter ul li{ margin:0 -1px -1px 0;}

.mainflex ul li iframe,
.loading,
.loading_full{ height:355px;}

} 

@media only screen and (max-width: 570px) {
	
.fourcol_spec,
.threecol_spec{
padding: 0 !important;
width: 340px;
float:none;
margin:0 auto 30px auto !important;
}

.item_height2{ height:235px;}


.entry_item p{
 -moz-column-count: 1;
 -webkit-column-count: 1;
 }
 
 .stuff { width:90% !important;}
 
 .mainflex ul li iframe,
 .loading,
 .loading_full{ height:320px;}

}

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

iframe{max-height:280px}

.comment-form-author,
.comment-form-email,
.comment-form-url{ width:102%;}

#respond textarea{ width:91.5%;}

.mainflex ul li iframe,
.loading,
.loading_full{ height:240px;}

}


@media only screen and (max-width: 340px) {
	
.stuff h1{ font-size:180%;}	

.stuff h2,
.stuff h3{ font-size:100%;}	
	
}