/* Theme Name: THE WEREHAUS Theme URI: http://www.thewerehaus.com Description: Wordpress Theme for THE WEREHAUS. Version: 3.0 Author: Mark Grothman Author URI: http://www.thewerehaus.com */ /* T A B L E O F C O N T E N T S ........................................................................................................................................ 1. Reset Defaults 2. Grid 3. Base Styles 4. Typography 5. Headings 6. Links 7. Lists 8. Forms 9. Images 10. Other Elements 11. Portfolio Slider 12. Header 13. Pages 14. Home Template 15. Portfolio Project 16. Shortcodes 17. 404 Page 18. Footer 19. Internet Explorer 20. Tiny Screens */ /* 1. R E S E T D E F A U L T S ........................................................................................................................................ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } :focus { outline: none; } ol, ul { list-style: none inside none; } blockquote, q { quotes: none; } ins { background-color: #eff3f4; text-shadow: none; color: #465458; text-decoration: none; } mark { background-color: #dbebef; text-shadow: none; color: #465458; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } /*- tables still need 'cellspacing="0"' in the markup ----------*/ caption, th, td { text-align: left; font-weight: normal; } input, textarea, button { border: none; } input, select { vertical-align: middle; } /* 2. G R I D ........................................................................................................................................ */ body { min-width: 960px; } .container_12 { margin-left: auto; margin-right: auto; width: 960px; } .grid_3, .grid_5, .grid_6, .grid_12 { display: inline; float: left; } .container_12 .grid_3 { width:231px; margin: 0 0 12px 12px; } .container_12 .grid_5 { width:308px; margin: 0 0 12px 12px; } .container_12 .grid_6 { width:474px; margin: 0 0 12px 12px; } .container_12 .grid_12 { width:960px; } .container_12 .alpha { margin-left: 0; clear: left; } /* 3. B A S E S T Y L E S ....................................................................................................................................... */ html { overflow-y: scroll; /* always force a scrollbar in non-IE */ overflow-x: hidden; } body { overflow-y: hidden; background: #e4e4e4 url('images/layout/bg.png') repeat; } #overlay { z-index: 9999; visibility: hidden; left: 50%; top: 50%; width: 150px; margin-left: -57px; height: 114px; position: fixed; background: url('images/layout/loading.gif') no-repeat center center; } /* self-clearing floats */ .clear { clear: both; } /* * Non-semantic helper classes */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; } /* for image replacement */ .word-break { white-space: -moz-pre-wrap; /* Mozilla */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ } .hidden { display: none; visibility: hidden; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ /* Hide only visually, but have it available for screenreaders: www.webaim.org/techniques/css/invisiblecontent/ */ .visuallyhidden { position:absolute !important; clip: rect(1px, 1px, 1px, 1px); } .invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */ /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix - only with a different class name to make it more semantic */ .group:before, .group:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .group:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ /* 4. T Y P O G R A P H Y ........................................................................................................................................ */ body, input, button, textarea { font: 18px/26px "Open Sans", Arial, Helvetica, sans-serif; color: #858B96; } p, h1, h2, h3, h4, h5, h6, fieldset, pre, #main ul, #main ol, #main dt, #main dd, #main table, #main caption, #main img, .page-content ul, .page-content ol, .page-content dt, .page-content dd, .page-content table, .page-content caption, .page-content img, .sidebar .widget, #footer .widget, .post-content ul, .post-content ol, .post-content dt, .post-content dd, .post-content table, .post-content caption, .post-content img, .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth, .contact-info-shortcode, .item-categories, .item-metadata { margin-bottom: 20px; } .item-description .one_half, .item-description .one_third, .item-description .two_third, .item-description .three_fourth, .item-description .one_fourth, .item-description .one_fifth, .item-description .two_fifth, .item-description .three_fifth, .item-description .four_fifth, .item-description .one_sixth, .item-description .five_sixth { margin-bottom: 0; } .item-description .one_half:nth-last-child(-n+4) p:last-child, .item-description .one_third:nth-last-child(-n+4) p:last-child, .item-description .two_third:nth-last-child(-n+4) p:last-child, .item-description .three_fourth:nth-last-child(-n+4) p:last-child, .item-description .one_fourth:nth-last-child(-n+4) p:last-child, .item-description .one_fifth:nth-last-child(-n+4) p:last-child, .item-description .two_fifth:nth-last-child(-n+4) p:last-child, .item-description .three_fifth:nth-last-child(-n+4) p:last-child, .item-description .four_fifth:nth-last-child(-n+4) p:last-child, .item-description .one_sixth:nth-last-child(-n+4) p:last-child, .item-description .five_sixth:nth-last-child(-n+4) p:last-child { margin-bottom: 0; } .share-this, #main .comment-list li { padding-top: 26px; } .share-this { padding-bottom: 20px; margin-bottom: 20px; } .footer-meta img, .footer-meta p { margin-bottom: 0; } .section-title, #related-posts > h2, #search-results .page-name { margin-bottom: 30px; } .footer-meta { padding: 0 0 50px; } .project-title { padding: 0; margin-bottom: 23px; float: left; } #footer .widget, .sidebar .widget, #search-results .blog-post, .comments_navigation { margin-bottom: 40px; } .post { line-height: 1; } .item-description { margin: -4px 0 37px 0; } .item-categories, .item-metadata { padding-bottom: 16px; } .container { margin-bottom: 12px; } .portfolio-border { margin-bottom: 39px; } #filter { margin-bottom: 12px; } h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 26px; } h4 { font-size: 24px; } h5 { font-size: 22px; } h6 { font-size: 20px; } html { -webkit-font-smoothing: antialiased; } /* maxvoltar.com/archive/-webkit-font-smoothing */ table { font-size: inherit; font: 100%; } p { font-size: 1em; } blockquote { font-size: 1.1em; padding-left: 28px; background: url('images/layout/quote-mark.png') no-repeat left top; } input { font-size: .9em; } small { font-size: 85%; } strong, th { font-weight: 800; text-transform: uppercase; color: #212121; } sub { font-size: smaller; } sup { font-size: smaller; } pre, code, kbd, samp { font-family: monospace, sans-serif; } /* normalize monospace sizing */ .widget_archive li, .widget_categories li, .widget_nav_menu li, .widget_links li, .widget_pages li, .widget_recent_entries li, .widget_recent_comments li, .widget_rss li, .widget_meta li { border-bottom: 1px solid #e5e5e5; } .slide-out-div .widget_archive li, .slide-out-div .widget_categories li, .slide-out-div .widget_nav_menu li, .slide-out-div .widget_links li, .slide-out-div .widget_pages li, .slide-out-div .widget_recent_entries li, .slide-out-div .widget_recent_comments li, .slide-out-div .widget_rss li, .slide-out-div .widget_meta li { position: relative; border-bottom: 1px dotted #424244; } .slide-out-div .widget_archive li:after, .slide-out-div .widget_categories li:after, .slide-out-div .widget_nav_menu li:after, .slide-out-div .widget_links li:after, .slide-out-div .widget_pages li:after, .slide-out-div .widget_recent_entries li:after, .slide-out-div .widget_recent_comments li:after, .slide-out-div .widget_rss li:after, .slide-out-div .widget_meta li:after { content: ' '; position: absolute; width: 100%; height: 1px; border-bottom: 1px dotted #424244; bottom: 1px; } .project-title, .item-categories, .item-metadata { background-position: left bottom; } .single-post .share-this { position: relative; } .single-post .share-this:after { content: " "; display: block; position: absolute; z-index: 1; width: 100%; left: 0; bottom: 0; height: 6px; background: url('images/layout/border-img.png') 0 0 repeat-x; } /* top border */ /* 5. H E A D I N G S ....................................................................................................................................... */ h1, h2, h3, h4, h5, h6 { font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif; color: #212121; text-transform: uppercase; letter-spacing: 0.1em; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #main-headline { text-transform: none; line-height: 40px; font-size: 21px; margin-bottom: 70px; } /* main headline at the top of the landing page */ #main-headline a { color: #6b879c; border-bottom: 2px solid #fff; font-weight: 800; } #main-headline a:hover, #main-headline .current { color: #212121; border-bottom: 2px solid #212121; } #main-headline strong { font-size: 32px; font-family: "Yanone Kaffeesatz"; letter-spacing: 4px;} .project-link + h3 a { display: block; } #footer .widgettitle { text-transform: uppercase; letter-spacing: 0.1em; } #single-item h3 { color: #212121; font-weight: bold; letter-spacing: 0.1em; } /* 6. L I N K S ....................................................................................................................................... */ a { text-decoration: none; color: #6b879c; } a:visited { color: #6b879c; } a:hover { color: #212121; } #main-wrapper a:active { color: #6b879c; position: relative; top: 1px; } a:hover, a:active { outline: none; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ h1 a, h2 a, h3 a, h4 a, h5 a { font-style: normal; } .csstransitions a, .csstransitions a img, .csstransitions input[type="submit"], .csstransitions button { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* 7. L I S T S ....................................................................................................................................... */ #main ol, .page-content ol { list-style-type: decimal; } #main ul, .page-content ul { list-style-type: circle; } #main ol ol, .page-content ol ol, #main ul ul, .page-content ul ul { margin-left: 28px; } /* indent the lists wrapped by other lists */ .portfolio-gallery ul, .portfolio-gallery { list-style: none; margin-bottom: -10px; } /* 8. F O R M S ........................................................................................................................................ */ input[type="text"] { margin: 0; width: 90%; } /* webkit browsers add a 2px margin outside the chrome of form elements */ textarea { margin: 0; width: 90%; } select { margin: 0; width: 93.5%; } input[type="text"] { padding: 7px; } textarea { padding: 2%; } button, input, textarea, select { font-family: inherit; font-size: 16px; font-weight: 100; } label { display: inline-block; margin-bottom: 5px; } label, input[type=button], input[type=submit], button { cursor: pointer; color: #212121; } /* hand cursor on clickable input elements */ /* buttons */ input[type="submit"], button, input[type="button"] { padding: 8px 10px; display: block; color: #e4e4e4; background: #6b879c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-transform: uppercase; font-weight: 600; } input[type="submit"]:hover, button:hover, input[type="button"]:hover { background: #fff; color: #6b879c; } input[type="submit"]:active, button:active, input[type="button"]:active { position: relative; top: 1px; } input[type="submit"] { display: inline; vertical-align: top; } /* CSS3 submit buttons (with the help of modernizer classes - start */ input[type="submit"]:active, button:active, input[type="button"]:active { position: relative; top: 1px; } /* CSS3 submit buttons - end */ /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } /* transitions */ .csstransitions input:not([type=submit]):not([type=file]), .csstransitions textarea { -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } /* form elements */ .contact-form input:not([type=submit]):not([type=file]), .contact-form textarea, .contact-form select, .contact-form input:not([type=submit]):not([type=file]):focus, .contact-form textarea, #mc_embed_signup input[type="email"] { padding: 8px 8px; max-width: 450px; display: block; background: #e4e4e4; border: none; color: #212121; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .page-template-template-contact-php .post-content input:not([type=submit]):not([type=file]), .page-template-template-contact-php .post-content textarea, #mc_embed_signup input[type="email"] { background: #fff; } /* text inputs on focus */ #dropdown-wrapper input:not([type=submit]):not([type=file]):focus, #dropdown-wrapper textarea:focus { background: #fff; } .page-template-template-contact-php input:not([type=submit]):not([type=file]):focus, .page-template-template-contact-php textarea:focus, #mc_embed_signup input[type="email"]:focus { background: #e4e4e4; } /* 9. I M A G E S ........................................................................................................................................ */ .csstransitions img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /* wordpress built-in image-related classes */ img.alignright, .wp-caption.alignright { float: right; margin: 0 0 1em 1em; } img.alignleft, .wp-caption.alignleft { float: left; margin: 0 1em 1em 0; } img.aligncenter, .wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; } img.aligncenter { margin-top: 20px; } a img.alignright { float: right; margin: 0 0 1em 1em; } a img.alignleft { float: left; margin: 0 1em 1em 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } #main img ~ img, #portfolio-item-meta img ~ img { margin-left: 20px; } .wp-caption img{ width:960px; height: auto; } img.alignnone{ width:960px; height: auto; } .wp-caption { text-align: center; background-color: #212121; margin-bottom: 20px; max-width: 960px;} .wp-caption img, .wp-caption img a { margin: 0 !important; padding: 0; border: 0 none; } .wp-caption .wp-caption-text { padding: 10px 5px 10px; margin: 0; } .wp-smiley { max-height: 13px; margin: 0 !important; } .gallery { margin: auto; float: left; width: 100%; list-style-type: none !important; } .gallery-image { border: 1px solid #efefef; margin-left: 0; } .gallery-icon a { display: block; } .gallery-caption { padding: 0 4px 5px; font-style: italic; margin-bottom: 0 !important; display: block; } .gallery-item { float: left; text-align: center; margin-left: 0; } .gallery-item { width: auto; float: left; margin: 10px 0 0 0; } .gallery-item img { margin: 0 !important; padding: 0; } .gallery-item a { float: left; border: none; margin: 0; padding: 0; } /* 10. O T H E R E L E M E N T S ........................................................................................................................................ */ td, td img { vertical-align: top; } td { padding: 2px 4px; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera */ width: 99%; word-wrap: break-word; /* IE */ } pre { font-size: .9em; border: 1px solid #e9e9e9; line-height: 20px; background: #E4E4E4 url('images/layout/pre-code-bg.png') repeat left top; overflow: auto; overflow-y: hidden; /* Hides vertical scroll created by IE */ } pre code { font-family: Consolas, "Courier New", Courier, monospace; margin: 0 0 0 40px; padding: 18px 0; display: block; } dt { font-size: 1.5em; font-weight: bold; } dd { display: list-item; list-style: square inside none; } #main table, .page-content table, .post-content table { border: 1px solid #e9e9e9; border-collapse: collapse; background: #E4E4E4; } #main tr:nth-of-type(odd), .page-content tr:nth-of-type(odd), .post-content tr:nth-of-type(odd) { background-color: #eff3f4; } /* zebra style table */ #main th, #main td, .page-content th, .page-content td, .post-content th, .post-content td { border: 1px solid #e9e9e9; padding: 9px 22px; } #main th, .page-content th, .post-content th { font-variant: small-caps; text-transform: lowercase; } #main caption, .page-content caption, .post-content caption { font-size: 1.2em; font-weight: bold; font-family: "PT Sans Narrow", sans-serif; } /* 11. P O R T O F O L I O S L I D E R ....................................................................................................................................... */ /* Web/Print */ #slides { position: relative; margin: 0 auto; clear: both; display: none; } .csstransitions #slides a { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; } .web-url a { font-size: 12px; font-weight: 100; text-transform: uppercase; letter-spacing: 1px; } /* slider pagination */ .slidesjs-pagination { text-align: center; position: absolute; bottom: 0; left: 50%; z-index: 20; } .home .slidesjs-pagination { bottom: 20px; } .slidesjs-pagination li { float: left; margin: 0 1px; display: block; } .slidesjs-pagination li a { display: block; width: 13px; height: 0; overflow: hidden; float: left; padding-top: 13px; background-image: url('images/layout/circle.svg'); background-size: 13px 13px;} .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-image: url('images/layout/circle-c.svg'); } .slidesjs-pagination li a:hover { background-image: url('images/layout/circle-h.svg'); } .navbar { overflow: hidden } .slide { position: relative; width: 100%; overflow: hidden; height: auto; } .slide img { margin-bottom: 0; } .slidesjs-navigation { visibility: hidden; } #single-item { width: 960px; } #single-item .slide { width: 960px; height: auto; } #single-item .container { margin-bottom: 6px; } #single-item #slides { margin-bottom: -30px; padding: 0; } .single-web #slides { padding-bottom: 30px !important; } .single-design #slides { padding-bottom: 20px !important; } #single-item .slider-img { display: block; } #single-item figure { display: block; } /* Featured Work Slider */ .featured-wrapper { position: absolute; width: 100%; display: block; z-index: 50; top: 0; cursor: pointer; background: rgba(0,0,0,0.75); opacity: 1; -webkit-transition: opacity .3s ease-in;-moz-transition: opacity .3s ease-in;-o-transition: opacity .3s ease-in;-ms-transition: opacity .3s ease-in;transition: opacity .3s ease-in; } .featured-wrapper:hover { opacity: 0; } .featured-info { position: absolute; top: 50%; right: 0; padding: 0 2%; text-align: center; width: 96%; margin-top: -40px;} .featured-info p { color: #fff; line-height: 1.5; } .featured-info .featured-title { color: #fff; font-size: 38px; line-height: 1; font-weight: 800; margin-bottom: 5px; font-family: "Open Sans"; letter-spacing: 1px; text-transform: uppercase;} #about h4 { color: #fff; font-size: 20px; line-height: 1; font-weight: 100; margin-bottom: 20px; font-family: "Open Sans"; letter-spacing: 1px;} .featured-info p.skill { color: #fff; font-size: 18px; font-style: italic; margin: -5px 0 10px; font-weight: 100; } .featured-info p.empty { margin-bottom: 0px; } .videoWrapper { position: relative; padding-bottom: 45%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Photos */ #photos { position: relative; margin: 0 auto; width: 972px !important; } .single-portfolio #photos { margin: 40px auto -24px; } #photos img { float: left; margin: 0 12px 12px 0; } #photos img.single { margin: 0 0 12px; } #photos img.last { margin-right: 0; } #photos img.bottom { margin-bottom: 0; } /* 12. H E A D E R ........................................................................................................................................ */ header { background: #fff; position: fixed; width: 100%; z-index: 1000;} .site-header {padding: 30px; background-color: #fff; height: 57px; } #logo a { display: block; } #logo img { position: relative; top: 0; width: 75px; height: auto; } #logo, .headline { float:left; } .headline { padding: 15px 30px; text-transform: uppercase; color: #858b96; } .headline span { margin-left: 20px; font-weight: 100; letter-spacing: 1px; } /* top nav */ #topnav { position: relative; float: right; text-align: left; display: inline; margin: 0; padding: 0; list-style: none; } #topnav li { float: left; text-transform: uppercase; font-size: 16px; font-weight: 800; display: inline-block; margin-right: -4px; position: relative; padding: 15px 25px 46px; background: #fff; cursor: pointer; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #topnav li a:hover, #topnav li.current-menu-item a, #topnav li.current-menu-parent a, #topnav li.current-menu-parent li a:hover { color: #212121; } #topnav li ul { padding: 0; position: absolute; top: 87px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } #topnav li ul li { background: #efefef; display: block; padding: 10px 25px; font-weight: 400; text-transform: none; width: 44px; -webkit-transiton: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; -transition: all 0.2s; } #topnav li ul li:hover { background: #fff; } #topnav li.current-menu-parent li a { color: #6b879c; } #topnav li li.current-menu-item a { color: #212121; } #topnav li:hover ul { display: block; opacity: 1; visibility: visible; } /* search form */ #search-form-container { height:40px; margin: 13px 0 0 30px; float: left; } .searchform [type="search"] { -moz-appearance: textfield; -webkit-appearance: textfield; } form.searchform { width:294px; margin:0 auto; } .searchform input[type="search"]{ padding:2px 15px 2px 25px; background: url('images/layout/search.png') no-repeat 8px 7px; background-size: 16px; width: 294px; color:#858b96; font-size: 12px; border:1px solid #eee; background-color:#e4e4e4; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; } .searchform input[type="search"]:focus { background-color:#eee; } /* 13. P A G E S ........................................................................................................................................ */ /* reel page */ .page-template-template-reel-php .reel-container p { margin-bottom: 0;} /* contact page */ #contact { clear:both; } .contact-content p strong { color: #212121; } .contact-content img { float: left; margin: 0 40px 50px 0; } #main-wrapper { margin-top: 117px;} /* 14. H O M E T E M P L A T E ........................................................................................................................................ */ #archive { float: left; margin: -22px 0 47px 0; padding: 20px 0 0 0; } #filter { float: right; margin-top: -5px; font-size: 10px; font-weight: 700; } #filter li { float: left; margin-left: 5px; } #filter a { display: block; color: #595959; position: relative; text-transform: uppercase; } #filter .active a, #filter .active .term-name, #filter .active a:hover .term-name { color: #e4e4e4; background: #212121; } #filter .term-name { position: relative; display: block; background: #fff; color: #6b879c; padding: 0 7px; z-index: 10; font-size: 10px; } #filter a:hover .term-name { background: #6b879c; color: #fff; } #filter .triangle-down { position: absolute; left: 50%; bottom: -3px; margin-left: -4px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 3px solid #e3e3e3; } #filter .active .triangle-down { border-top: 3px solid #6b879c; } .csstransitions #filter .term-name { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .project { position: relative; } .project-link { position: relative; display: block; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); /* Prevent the thumbnails from flickering on hover */ } .project-link img { display: block; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); } .project-link .project-content { width: 474px; height: 267px; position: absolute; overflow: hidden; top: 0; left: 0; } .project-link img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); } .project-link:hover img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } .project-link .project-caption { position: absolute; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0; text-align: center; padding: 17px 10px 8px 10px; margin: 0; background: rgba(33,33,33,0.9); text-transform: uppercase; width: 454px; color: #fff; bottom: 0; height: 50px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; } .project-link .project-caption span { color: #fff; font-size: 12px; text-transform: none; font-style: italic; font-weight: 100; } .csstransitions .project-link img { -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .no-csstransitions.opacity .project-caption { opacity: 0; } .seperator { clear: both; background: #212121; height: 2px; width: 40px; margin: 0 auto 75px; } .bottom { clear: both; float: left; width: 100%; } h2.subcat { text-align: center; margin-top: 70px; } .single-web h2.subcat { line-height: 15px; } /* make sure the columns are properly aligned, when the projects are filtered on the portfolio page, by clearing the floats on items that contain a class of "alpha" */ .portfolio-item.alpha { clear: both; } .portfolio-item { overflow: hidden; } .item-heading h2 { margin-bottom: 7px; } .client-logos { clear: both; } .client-logos li { float: left; margin: 0 8px 8px 0; height: 84px; } .client-logos li:nth-child(6),.client-logos li:nth-child(12), .client-logos li:nth-child(18), .client-logos li:nth-child(24) { margin: 0; } .client-logos li:nth-child(7),.client-logos li:nth-child(13), .client-logos li:nth-child(19), .client-logos li:nth-child(25) { clear: left; } .client-logos li img { width: 153px; height: auto; display: block; } #the-team h3 { font-family: "Open Sans", Arial, Helvetica, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: normal; text-align: center; margin-bottom: 10px; } #the-team .grid_5 p { clear: left; font-size: 14px; line-height: 1.6; margin: 0px 29px 20px; color: #212121; } .team-social img { width: 25px; height: auto; position: relative; top: 5px; } #day-in-the-life #instagram { width: 474px; float: left; margin-right: 12px; } #day-in-the-life .facebook { position: relative; float: left; background: #fff; } /* BLOG */ #happenings { line-height: 1;} .post-content { width: 394px; height: 344px; background: rgba(33,33,33,0.1); padding: 50px 40px 30px; float: left; color: #212121; position: relative; margin-left: 12px; } .omega .post-content { margin-left: 0; } .omega .post-image { float: right; } .post-content h3 { margin-bottom: 0; } .single-post h2.subcat, #marketing h2 { line-height: 15px; } .single-post h2.subcat span, .keep-up span { font-size: 12px; letter-spacing: 1px; } .meta small { font-size: 12px; font-style: italic; line-height: 1; margin-bottom: 20px; color: #212121; } .post-content p, .blog-content p, .page-content p { font-size: 15px; line-height: 1.4; font-weight: 100; } .page-content { color: #212121; } .blog-content p { font-size: 16px; line-height: 1.6; color:#212121} .blog-content p:last-child, .blog-content img:last-child, .page-content p:last-child, .page-content img:last-child { margin-bottom: 0; } .blog-content a { font-weight: bold; } .blog-content ul { margin: 0 0 20px 20px; line-height: 1.6; font-size: 14px; color: #212121; } .post-content .read-more, .mainblog-nav { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: bold; } .wp-caption p{ color:#e4e4e4; font-size: 14px; } #happenings .see-all { position: absolute; bottom: 20px; text-align: center; width: 394px; } #happenings .see-all a { font-size: 12px; background: #6b879c; padding: 4px 10px; } #happenings .see-all a:hover { background: #fff; color: #6b879c; } .blog-nav { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-top: 45px; padding-bottom: 5px; } .blog-nav .prev, .blog .prev { float: left; } .blog-nav .next, .blog .next { float: right; } .author-info { margin-top: 50px; } .author-image { float: left; margin-right: 40px; text-align: center; } .author-bio { float: left; width: 720px; font-size: 20px; line-height: 1.6; font-weight: 100; color: #212121; font-style: italic; } .blog-comments { clear:both; float: left; margin-top: 10px; } .blog-comments .comment-form { font-weight: 100; font-size: 11px; margin-top: -10px; color: #212121; } .blog-comments .comment-notes, .blog-comments .logged-in-as { margin-bottom: 30px; font-style: italic; } .blog-comments .comment-form-comment label { font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 0.1em; } .blog-comments .form-allowed-tags { line-height: 1.4; } .blog-comments .comment-form-url { display: none; } .comment-form-author label, .comment-form-email label { font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; width: 50px; } .blog-comments .comment-form input[type="text"] { width: 256px; } .blog-comments .comment-form input[type="text"], .blog-comments .comment-form textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #e4e4e4; } .blog-comments .comment-form input[type="text"]:focus, .blog-comments .comment-form textarea:focus { background: #fff; } .blog-comments .form-submit { margin-bottom: 4px; } .blog-comments .comment-list { margin: 40px; } .blog-comments .comment-list .comment { margin-bottom: 30px; } .blog-comments .comment-body { font-weight: 100; line-height: 1.4; color: #212121; } .blog-comments .comment-body p { font-size: 15px; } .blog-comments .comment-meta { font-size: 12px; margin-bottom: 20px; font-style: italic; } .blog-comments .comment-author .fn { text-transform: uppercase; font-style: normal; font-weight: bold; font-size: 18px; } .blog-comments .comment-author img { display: none; } /* 15. P O R T F O L I O P R O J E C T ........................................................................................................................................ */ #project-wrapper { overflow: visible; } #scroll:before { display: block; content: " "; margin-top: -46px; height: 46px; visibility: hidden; } .post-nav .close-current-post { cursor: pointer; } .post-nav { padding: 0; position: relative; } .post-nav li { float: right; margin-left: 7px; } .csstransitions .post-nav a, .post-nav span { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all 0.3s ease-in-out; } .post-nav a, .post-nav span { display: block; text-indent: -9999px; width: 24px; height: 24px; background: url('images/layout/nav-buttons.png') no-repeat; } .opacity .post-nav a, .opacity .post-nav span { opacity: 0.93; } .opacity .post-nav a:hover, .opacity .post-nav span:hover { opacity: 0.5; } .post-nav .prev-portfolio-post { background-position: -31px 0; } .post-nav .next-portfolio-post { background-position: -63px 0; } .portfolio-shared { padding: 46px 0 0 0; } .project-title a { font-size: 0.75em; float: right; width: 30px; height: 30px; text-indent: -9999px; position: relative; top: -4px; } .project-title a[rel="next"] { background: url('images/layout/prev-post.png') no-repeat left top; } .project-title a[rel="prev"] { background: url('images/layout/next-post.png') no-repeat left top; margin-left: 7px; } #single-item { text-align: left; position: relative; } .single-video { margin-bottom: 70px; } #single-item #slides { height: 540px; } #single-item iframe, #single-item .single-img-loader { background: url('images/layout/loading.gif') no-repeat 50% 50%; } #single-item .single-img-loader { position: absolute; left: 0; top: 0; z-index: -1; } #single-item .single-img-ajax { opacity: 0; } #related-posts { margin-bottom: 30px; padding-top: 30px; } .item-categories li, .item-metadata li { margin-bottom: 15px; } .item-categories li:first-child, .item-metadata li:first-child { font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; } .item-term, .item-metadata li:last-child { display: block; padding: 3px 5px 2px; background: #f2f2f2; background: rgba(0, 0, 0, .03); } .borderradius .item-term, .borderradius .item-metadata li:last-child { -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } #portfolio-item-meta .item-metadata:last-child { margin-bottom: 36px; } #portfolio-item-meta h2 { font-size: 20px; } .portfolio-border { clear: both; height: 6px; background: url('images/layout/border-img.png') 0 0 repeat; } .wp-video, .mejs-video, .wp-video-shortcode { width: 960px !important; height: 640px;} .mejs-layers, .mejs-controls { display: none !important; } .mejs-container, .mejs-embed, .mejs-embed body { background: #fff !important; } .web-scroll-wrapper { background: url('images/layout/macbook-scroll-bg.jpg') 0 0 no-repeat; position: relative; width: 960px; height:540px; overflow: hidden;} .web-mobile-wrapper { background: url('images/layout/mobile-scroll-bg.jpg') 0 0 no-repeat; position: relative; width: 960px; height:540px; overflow: hidden;} .web-scroll { position: absolute; top: 61px; left: 176px; width: 608px; height: 380px; overflow: hidden; } .ipad-scroll { position: absolute; top: 121px; left: 116px; width: 392px; height: 300px; overflow: hidden; } .iphone-scroll { position: absolute; top: 117px; left: 706px; width: 173px; height: 307px; overflow: hidden; } .macbook-overlay { background: url('images/layout/macbook-overlay.png') 0 0 no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;} .web-scroll img { position: relative; -webkit-animation-name: webscroll; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0s; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: webscroll; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0s; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: webscroll; -ms-animation-timing-function: ease; -ms-animation-iteration-count: infinite; -ms-animation-direction: normal; -ms-animation-delay: 0s; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: webscroll; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0s; animation-play-state: running; animation-fill-mode: forwards; } .ipad-scroll img { position: relative; -webkit-animation-name: ipadscroll; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0s; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: ipadscroll; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0s; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: ipadscroll; -ms-animation-timing-function: ease; -ms-animation-iteration-count: infinite; -ms-animation-direction: normal; -ms-animation-delay: 0s; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: ipadscroll; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0s; animation-play-state: running; animation-fill-mode: forwards; } .iphone-scroll img { position: relative; -webkit-animation-name: iphonescroll; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0s; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: iphonescroll; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0s; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -ms-animation-name: iphonescroll; -ms-animation-timing-function: ease; -ms-animation-iteration-count: infinite; -ms-animation-direction: normal; -ms-animation-delay: 0s; -ms-animation-play-state: running; -ms-animation-fill-mode: forwards; animation-name: iphonescroll; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0s; animation-play-state: running; animation-fill-mode: forwards; } #video-list li { text-align: center; } #video-list li span { font-size: 12px; } #video-list li p { line-height: 1.2; } .all-videos { clear: left; width: 117px; margin: 20px auto 0; } a.button { padding: 7px 10px 7px 13px; color: #e4e4e4; background: #6b879c; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 16px; } a.button:hover { background: #fff; color: #6b879c; } /* 16. S H O R T C O D E S ........................................................................................................................................ */ /* Fluid Column Shortcodes */ .one_half { width: 48%; } .one_third { width: 30.66%; } .two_third { width: 65.33%; } .one_fourth { width: 22%; } .three_fourth { width: 74%; } .one_fifth { width: 16.8%; } .two_fifth { width: 37.6%; } .three_fifth { width: 58.4%; } .four_fifth { width: 67.2%; } .one_sixth { width: 13.33%; } .five_sixth { width: 82.67%; } .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position: relative; margin-right: 4%; float: left; } .last { margin-right: 0 !important; clear:right; } .clearboth {clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; } /* contact info */ .contact-info-shortcode { list-style: none !important; } .contact-info-shortcode li { min-height: 33px; padding-top: 4px; position: relative; margin: 0 0 15px 0; } .contact-info-shortcode li.my-mail { margin-bottom: 0; } .contact-info:before { content: " "; width: 33px; height: 33px; display: block; position: absolute; top: 0; left: 0; } .street-address, .city-zip, .state { display: block; } /* contact form */ .success { color: #212121; } .error { color: #ce1010; } .form-status { display: none; max-width: 400px; padding: 16px 10px; position: relative; margin-top: 35px; } .contact-form .loading-img { position: absolute; left: 50%; bottom: 0px; border: none; margin: 0 0 0 -60px; width: 60px;} /* loading gif at the end of the contact form */ .invalid-field { border-color: #edaaaa; } .contact-form label { font-size: 12px; font-weight: 800; text-transform: uppercase; } /* mobile menu */ #zilla-mobile-menu { display: none; } /* 17. 4 0 4 P A G E .......................................................................................................................................... */ #not-found { text-align: center; } #not-found-heading { font-size: 150px; font-weight: bold; } #not-found-img { border: none; } #not-found-form input { width: 500px; margin: 0 auto; } .search-no-results h4 { font-size: 40px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; } .search-no-results #filterable-gallery { margin-top: 20px; } /* 18. F O O T E R ........................................................................................................................................ */ /* footer overlay widgets area */ .slide-out-div { left: 0px; bottom: 0px; position: fixed; z-index: 1000; background-image: url('images/layout/overlay-bg.png'); width: 100%; display: none; } .multiplebgs .slide-out-div { border-bottom: 3px solid transparent; background: url('images/layout/border-img.png') 0 5px repeat-x, url('images/layout/border-img.png') left bottom repeat-x, url('images/layout/overlay-bg.png'); } #overlay-handle, #back-to-top { width: 61px; height: 59px; display: block; position: absolute; z-index: 1000; } #overlay-handle { left: -1px; top: -59px; background: url('images/layout/overlay-handle.png'); cursor: pointer; } #slide-out-container .widgets-handle.closed { background-position: 0 0; } #slide-out-container .widgets-handle.closed:hover { background-position: 0 -59px; } #slide-out-container .widgets-handle.opened { background-position: -61px 0; } #slide-out-container .widgets-handle.opened:hover { background-position: -61px -59px; } .csstransitions #overlay-handle { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; } #back-to-top { display: none; width: 38px; height: 38px; } .opacity #back-to-top { opacity: 0.95; } .csstransitions #back-to-top .inner { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .borderradius #back-to-top .inner { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background: #fff; width: 46px; height: 46px; display: block; position: absolute; z-index: -1; margin: -4px 0 0 -4px; } .borderradius #back-to-top:hover .inner { margin: -7px 0 0 -7px; padding: 3px; } #back-to-top.main-top-button { top: -49px; right: 10px; } #back-to-top.alternative-top-button { position: fixed; bottom: 15px; right: 10px; } #footer .grid_10 { width: 790px; margin-right: 0; } #social-networking li { float: left; margin-bottom: 20px; } #social-networking a { display: block; padding: 0 10px 0 0; position: relative; } #social-networking li:last-child a { padding: 0; } #social-networking span { width: 30px; height: 30px; display: block; } #social-networking .social-icon { background-repeat: no-repeat; } .opacity #social-networking .social-icon { opacity: 0.85; } .opacity #social-networking a:hover .social-icon { opacity: 0.95; } #social-networking .facebook { background: url('images/layout/social/facebook.svg'); } #social-networking .flickr { background: url('images/layout/social/flickr.svg'); } #social-networking .vimeo { background: url('images/layout/social/vimeo.svg'); } #social-networking .youtube { background: url('images/layout/social/youtube.svg'); } #social-networking .twitter { background: url('images/layout/social/twitter.svg'); } #social-networking .linkedin { background: url('images/layout/social/linkedin.svg'); } #social-networking .googleplus { background: url('images/layout/social/google.svg'); } #social-networking .tumblr { background: url('images/layout/social/tumblr.svg'); } #social-networking .pinterest { background: url('images/layout/social/pinterest.svg'); } #social-networking .instagram { background: url('images/layout/social/instagram.svg'); } #social-networking .skype { background: url('images/layout/social/skype.svg'); } #social-networking .rss { background: url('images/layout/social/rss.svg'); } .csstransitions #social-networking .inner { -moz-transition: all .1s linear; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; } .borderradius #social-networking .inner { -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background: #fff; width: 36px; height: 36px; display: block; position: absolute; z-index: 0; margin: -3px 0 0 -3px; } .borderradius #social-networking a:hover .inner { margin: -6px 0 0 -6px; padding: 3px; } .csstransitions #social-networking a, .csstransitions #social-networking .social-icon { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all 0.3s ease-in-out; } #marketing { clear: both; position: relative; width: 960px; margin: 0 auto 40px; height: 43px; } /* social networking */ #social-networking { margin: 20px 0; width: 230px; margin: 0 auto; } #mc-embedded-subscribe-form { width: 395px; margin: 0 auto; clear: both; } #mc-embedded-subscribe-form input, #mc-embedded-subscribe-form label, #youtube span, #youtube a.button { float: left; } #mc-embedded-subscribe-form label { display: none; } #mc-embedded-subscribe-form input[type="submit"] { margin-left: 12px; width: 108px; } #mce-EMAIL { width: 259px; } #youtube { width: 231px; margin: 20px auto; } #youtube span { display: block; width: 101px; height: 40px; background: url('images/layout/marketing.png') top left no-repeat; text-indent: -9999px; margin: 3px 12px 0 0; } #youtube a.button { margin: 3px 0 20px; } #footer p { font-size: 14px; } .addy { clear: both; text-align: center; } .copy { margin-top: 60px; } /* 19. I N T E R N E T E X P L O R E R .......................................................................................................................................... */ .ie button, .ie input[type="submit"] { width: auto; overflow: visible; } /* make buttons play nicely in ie */ .ie textarea { overflow: auto; } /* remove textarea scrollbars */ .ie .post-time { font-size: 0.95em; } /* IE 8 */ .ie8 #social-networking { margin: 0; } .ie8 #social-networking .inner, .ie8 #back-to-top .inner { display: none; } .ie8 #social-networking a { padding: 0 8px 0 0; } .ie8:after { display: none; } .ie8 #single-item .single-portfolio-img { background: url('images/layout/loading.gif') no-repeat 50% 50%; } .ie8 #next-prev-links img { visibility: hidden; } .ie8 .view-button { background: #1e1e1e; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='1e1e1e') progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; } .ie8 #social-networking a { background: #fdfdfd; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='fdfdfd') progid:DXImageTransform.Microsoft.Alpha(opacity=85)"; } .ie8 #social-networking a:hover { background: #fdfdfd; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='fdfdfd') progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; } .ie8 #back-to-top img { background: #fdfdfd; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='fdfdfd') progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; } .ie8 #back-to-top img:hover { background: #fdfdfd; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='fdfdfd') progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; } /* 20. T I N Y S C R E E N S .......................................................................................................................................... */ @media only screen and (max-width: 1165px) { .headline, #search-form-container { display: none; } } @media only screen and (max-width: 768px) { body { min-width: 320px; } input { -webkit-appearance: none; } p { font-size: 16px; line-height: 1.2; } h2 { font-size: 18px; line-height: 1; } h3 { font-size: 18px; line-height: 1; } blockquote { padding-left: 40px; width: 260px; margin: 0; } .container_12 { margin-left: auto; margin-right: auto; width: 320px; } .container_12 .grid_3 { width:158px; margin: 0 0 4px 4px; } .container_12 .grid_6 { width:320px; margin: 0 0 4px 0; } .container_12 .grid_12 { width:320px; } .container_12 .alpha { margin-left: 0; } .container_12 .grid_3:nth-child(odd) { margin-left: 0; } #header-bg { height: 216px; } #header { margin-top: 0; } #mc-embedded-subscribe-form label, #filter, .project-link .image-overlay, .footer-meta small { display: none; } #single-item { width: 320px; } #single-item #slides { height: 180px; } .home #slides iframe, .home #slides .slide img, iframe#vimeo, .reel-container { width: 100%; height: auto; } iframe#vimeo, .reel-container { margin-bottom: 0; } .featured-wrapper { height: 100%; } .featured-info { margin-top: -23px; } .featured-info .featured-title { font-size: 12px; } #about h4 { font-size: 18px; } .featured-info p.skill { font-size: 10px; } .featured-info p { font-size: 12px; line-height: 1.4; } .pagination { bottom: -39px; } #intro-section, #blog-post { width: 300px; margin: 0 auto; } #blog-post .grid_12 { width: 300px; } #footer p.keep-up { float: none; width: 300px; margin: 0 0 12px 0; text-align: center; } #youtube { float: none; height: 40px; width: 228px; margin: 0 auto 12px; } #marketing { width: 300px; } #mc-embedded-subscribe-form, #mc-embedded-subscribe-form label, #logo, #intro-section, .copy, .addy { float: none !important; } #dropdown-trigger { padding: 0; background: none; } .site-header { padding: 0 30px 30px; } #zilla-menu-dropdown { background: url(images/menu-icon.gif) 95% 50% no-repeat; border-bottom: none; cursor: pointer; display: block; position: absolute; height: 42px; left: 0; top: 0; width: 100%; z-index: 20; } #zilla-mobile-menu { margin-bottom: 30px; } ul#zilla-mobile-menu ul { padding: 0; } #zilla-mobile-menu-wrap { margin-top: 30px; } #zilla-mobile-menu li { display: block; float: none; } .ie8 #zilla-mobile-menu li { margin-left: 20px; margin-right: 20px; } #zilla-mobile-menu li a { border: none; display: block; line-height: 2; text-decoration: none; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 16px; } #zilla-mobile-menu a:hover, #zilla-mobile-menu .current-menu-item a { } #zilla-mobile-menu li a:hover .sub-menu { margin: 0; } ul#zilla-mobile-menu ul.sub-menu li a { font-weight: 100; text-transform: none; } #topnav { display: none; } #mc-embedded-subscribe-form, #mc_embed_signup { margin-bottom: 10px; width: 320px; } #mce-EMAIL { width: 180px; } .copy { text-align: center; margin-top: 40px;} .copy p { font-size: 11px !important; } #logo { width: 75px; margin: 0 auto; } #search-form-container { float: none; margin: 0 auto; position: relative; top: 65px; } #intro-section { text-align: center; } #main-headline { margin: 0; float: none; letter-spacing: 0; font-size: 17px; } #main-headline p { line-height: 1.4; } #main-headline strong { font-size: 24px; } #sentence { top: 5px; position: relative; } #footer p { font-size: 11px; line-height: 2; } .project-link img, .project-link .image-overlay, .project-link .project-content { width: 320px; height: 180px; } .csstransitions .project-link .project-caption { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .project-link .project-caption { width: 300px; font-size: 12px; } #day-in-the-life #instagram { width: 320px; margin-right: 0; } #about { width: 280px; height: auto; padding: 20px 20px 0; } .facebook iframe, .facebook span { width: 320px !important; height: 290px !important; } .client-logos li img { width: 110px; } .clients { margin: 0; padding-top: 0; } .client-logos li { margin: 0 25px 10px !important; } #single-item .slider-img, .single-portfolio-img { width: 320px; height: 238px; } .opacity #slides #next-prev-links img { opacity: 1 !important; } .project-title { margin-bottom: 20px; font-size: 18px; float: none; } .post-nav { padding: 7px 40px !important; float: left; clear: both; margin: 0; } .post-nav li { float: right; margin: 7px 7px 0 0; } .vimeo-wrapper { clear: both; } #photos { width: 320px !important; } #photos img { margin: 0 0 5px; width: 320px; height: auto; } .contact-form { font-size: 16px; } .one_half { width: 100%; margin-right: 0; float: none; } .map-container, .gmap { height: 180px !important; } .contact-info { font-size: 16px; } .contact-info-shortcode strong, .dropdown-page strong, .page-template-template-contact-php .one_half last strong { font-size: 100%; } #overlay { display: none !important; } .footer-meta { padding: 0; } .fb-like { display: none !important; } .addy { width: 300px; margin: 0 auto; } #blog-posts .post-image { float: none; } #blog-post .seperator { margin: 0; } .blog-content iframe, .blog-content img, .post-image img { width: 320px; height: auto; } .wp-caption { max-width: 320px; margin: 0 0 4px -10px; } .author-image { width: 200px; float: none; margin: 0 auto 20px; } .author-image img { width: 200px; } .author-bio { width: 300px; margin-bottom: 30px; font-size: 16px; text-align: center; } .post-content { width: 280px; height: auto; margin: 4px 0 4px 0; float: none; padding: 20px; } }