/* @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%;} }