/* ========================================================================== RESPONSIVE LAYOUT STYLES Website Design & Development by Richard the Brave Email for more information at info@richardthebrave.com Copyright (c) 2015 RICHARD THE BRAVE WEBSITE & PRINT MEDIA DEVELOPMENT All Rights Reserved ========================================================================== */ /* ========================================================================== */ /* X-LARGE --- UP TO & INCLUDING 900PX */ /* ========================================================================== */ @media only screen and (max-width: 900px) { /* main navigation links auto-width */ .parent_li { width: auto; } .parent_li.w_child > a { padding-right: 0; } .parent_li > a { padding: 12px 0 0 0; text-align: center; position: relative; } .parent_li > a .icon { text-align: center; position: absolute; top: auto; bottom: 2px; right: 50%; left: 50%; width: 20px; margin-left: -10px; text-shadow: 0 2px 0 #fff; } #parent1 { width: 23%; } #parent2 { width: 22%; } #parent3 { width: 25%; } #parent4 { width: 16%; } #parent5 { width: 14%; } /* tighten up the page title a touch */ #page_title { font-size: 3em; letter-spacing: 5px; top: 48px;} #page_title:after { margin-top: 35px; } /* more room for the 4 random galleries */ #random_galleries { margin-left: 10px; margin-right: 10px; } /* display 2 portfolio galleries in a row */ .listing.thumbnail { width: 50%; } .count_4 #no_1, .count_4 #no_2, .count_4 #no_3, .count_4 #no_4 { clear: none; margin-left: 0; margin-right: 0; } /* display 3 portfolio album thumbs in a row */ #gallery_thumbs .thumbnail { width: 33.3333%; } /* split the footer nav on to 2 rows */ #menu .menu_col { width: 33.33%; } #menu .menu_col_3 { clear: left; } /* techniques & finishes section */ #tfs .tf { padding-left: 230px; } #tfs .tf_thumb { width: 200px; } .tf_gallery li { max-width: 332px; } .tf_gallery.count2 { max-width: 664px; } .tf_gallery.count5 li { width: 25%; } /* ========================================================================== */ } /*END*/ /* ========================================================================== */ /* LARGE --- UP TO & INCLUDING 759PX */ /* ========================================================================== */ @media only screen and (max-width: 759px) { /* slightly smaller navigation links */ #nav { font-size: 0.875em; } /* less height on the slider */ .home #title, #hero, .rslides li { height: 360px; } /* trim the lead photo height so as to not display background colour */ #title { height: 280px; } /* less top and bottom padding in the deck */ #deck { padding-top: 30px; padding-bottom: 0; } /* single column for the homepage services */ .service { border-bottom: 1px solid #B6B6B6; float: none; margin-left: auto; margin-right: auto; max-width: 320px; padding-bottom: 30px; width: auto; } .service.omega { border: 0; padding-bottom: 0; } /* convert the 2-column sideXside region to 1 column */ .sidexside_left, .sidexside_right { float: none; width: 100%; padding-left: 0; padding-right: 0; } .sidexside_left { border-bottom: 1px solid #B6B6B6; padding-bottom: 15px; margin-bottom: 45px; } /* display the random galleries 2 per row */ #random_galleries { margin-bottom: 5px; margin-left: 20px; margin-right: 20px; } .random.thumbnail { width: 50%; } .random.thumbnail a { margin: 0 10px 20px 10px; } /* display the call to action icons 2 per row, with smaller icon */ #cta_icons { max-width: 360px; } #cta_icons li { width: 50%; } #cta_icons p.cta_icon { width: 75px; } /* less side padding for the portfolio albums listing */ #portal { padding-left: 30px; padding-right: 30px; } /* less side padding for the features region */ .features { padding-left: 15px; padding-right: 15px; } /* smaller map icons on the contact page */ .feature_icon.is_map { width: 200px; } /* techniques & finishes section */ .table_wrap { padding: 15px 30px 30px 30px; } #tfs .tf { padding: 25px 20px 25px 220px; } #tfs .tf_deck p { font-size: 16px; line-height: 24px; } #tf_glance { padding: 30px; } .tf_applications { font-size: 16px; line-height: 24px; } .tf_app a { height: 140px; } .tf_gallery_wrap { padding: 30px 20px 10px 20px; } .tf_gallery li { padding: 0 10px 20px 10px; } .tf_gallery li, .tf_gallery.count4 li, .tf_gallery.count5 li { width: 33.3333%; } #tf_prevnext { font-size: 15px; line-height: 20px; } #tf_prevnext li a::after { margin-top: -7px; } /* ========================================================================== */ } /*END*/ /* ========================================================================== */ /* MEDIUM --- UP TO & INCLUDING 679PX */ /* ========================================================================== */ @media only screen and (max-width: 679px) { /* remove all padding from the header */ header { height: 285px; padding: 0; } /* center the logo */ #logo { float: none; margin: 15px auto 10px auto; } #logo, #logo a { width: 220px; } /* push the slogan on its own line */ #logo .vcs { top: 12px; } #logo .slogan { display: none; } #slogan { clear: both; display: block; } /* display the contact button/request a quote button on its own row */ .contact_btns { clear: left; float: none; height: 70px; margin: 0 auto 15px auto; width: 280px; } .btn_contact { height: 40px; padding-top: 11px; } .btn_quote { font-size: 13px; } /* slightly smaller nav links */ #nav { font-size: 0.8125em; } .child_ul { width: 150px; } /* center the main navigation with fixed tab widths */ #nav_wrapper { margin: 0 auto; width: 519px; } /* remove the padding from drop-downs with arrows */ .parent_li > a, .parent_li.w_child > a { padding-right: 0; } /* stack the page title above the lead photo */ #title { height: auto; max-height: 360px; overflow: hidden; } #page_title { background: #fff; border-top: 1px solid #B6B6B6; border-bottom: 1px solid #B6B6B6; color: #3C3C3C; font-size: 1.875em; letter-spacing: 3px; margin: 0; padding: 30px 30px 22px 30px; position: relative; top: 0; } #page_title:after { display: none; } #lead_photo img { opacity: 1; position: static; } /* smaller gallery title */ #gallery_title { font-size: 1.875em; letter-spacing: 3px; margin: 0; } #gallery { padding: 30px 30px 20px 30px; } #gallery.no_deck { padding-bottom: 20px; } /* less top and bottom padding in the deck */ #deck { padding: 20px 30px; } #deck p, #gallery p { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.1250em; margin: 0; } #gallery p { margin-top: 5px; } /* push the slider down to accommodate the taller header */ #hero { top: 285px; } /* less height on the slider */ .home #title, #hero, .rslides li { height: 320px; } /* smaller h2 text_heading */ .text_heading { font-size: 1.8750em; } /* smaller portfolio listing font size */ .listing h3 { bottom: 0; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.1250em; padding: 15px; } .listing .sub_heading:before { margin: 10px auto; } /* align the random gallery labels to the bottom */ .random .label { bottom: 0; } /* reposition the form error */ .form_msg { top: 90px; } /* single column on all form rows */ #form .sidexside {margin: 0; } #form .sidexside .form_row { float: none; padding: 0; width: 100%; } /* display small icon rows in a single column */ .count2 .small_icon { float: none; width: 100%; } /* smaller blockquote banner */ .quote { padding: 30px; } .quote .blockquote p { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.1250em; margin: 0; } /* less side padding for the features region */ .features { padding-left: 10px; padding-right: 10px; } .feature_pad { padding: 0 10px; } /* split the footer nav on to 3 rows */ #menu .menu_col { width: 50%; } #menu .menu_col_2, #menu .menu_col_4 { clear: left; } #menu .menu_col_3 { clear: none; } /* techniques & finishes section */ .tf_protip .face { left: 50%; right: 50%; margin-left: -40px; top: -130px; } .tf_protip { margin-bottom: -15px; margin-left: -15px; margin-right: -15px; margin-top: 160px; } .tf_protip .face:after, .tf_protip .face:before { right: auto; top: auto; bottom: -31px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .tf_protip .face:after { border-color: rgba(222, 222, 222, 0); border-bottom-color: #f1f1f1; border-width: 20px; margin-left: -20px; } .tf_protip .face:before { border-color: rgba(166, 166, 166, 0); border-bottom-color: #a6a6a6; border-width: 21px; margin-left: -21px; } .tf_applications { margin-left: -20px; margin-right: -20px; } .tf_app { width: 50%; } #tf_footer { padding: 45px 30px 15px 30px; } #tf_prevnext { margin-bottom: 30px; } #tf_prevnext li { padding: 0 5px 0 0; } #tf_prevnext li.next { padding: 0 0 0 5px; } /* footer copyright on separate lines */ footer .bullet { display: none; } footer .rtb, footer .footer-address { display: block; } /* ========================================================================== */ } /*END*/ /* ========================================================================== */ /* SMALL --- UP TO & INCLUDING 559PX */ /* ========================================================================== */ @media only screen and (max-width: 559px) { /* shorter header area */ header { height: 205px; } /* pull the slider up to accommodate the taller header */ #hero { top: 205px; } /* float the logo so the mobile menu button has a place */ #logo { float: left; margin-left: 30px; margin-bottom: 15px; } /* hide drop-down navigation and show the mobile menu button */ #nav_wrapper { display: none; } #mobile { display: block; } /* hide the slogan */ #slogan { display: none; } /* adjust the contact us button */ .contact_btns { border-top: 1px solid #DEDEDE; width: 100%; } .btn_contact { width: 260px; margin-left: auto; margin-top: 15px; margin-right: auto; } /* tighten up the page title letter-spacing */ #page_title { letter-spacing: 1px; border-top-color: #CECECE; } #gallery_title { letter-spacing: 1px; } /* smaller call to action icons */ #cta { padding: 30px 30px 0 30px; } #cta_icons { font-size: 0.93750em; max-width: 320px; } #cta_icons li { width: 50%; } #cta_icons p.cta_icon { width: 50px; } #cta_icons p.cta_icon { margin-bottom: 7px; } /* reduce the padding and margins in the single_icon region */ .single_icon { padding: 30px 30px 0 30px; } .icon_src { width: 150px; } .single_icon h2.alpha { margin: 30px 0; } .sidexside_left { padding-bottom: 0; margin-bottom: 30px; } /* reduce padding in the services region */ .services { padding: 30px 30px 0 30px; } /* single column of features */ .features { padding: 30px 30px 0 30px; } .feature_icon { margin-bottom: 15px; } .feature h3 { margin-bottom: 10px; } .count2 .feature { width: 100%; } .count3 .feature { width: 100%; } /* single column of random albums */ #rand_gallery { padding: 30px 0 15px 0; } #rand_gallery p { margin-bottom: 25px; } .random.thumbnail { float: none; margin-left: auto; margin-right: auto; max-width: 320px; width: 100%; } .random.thumbnail a { margin-bottom: 10px; } /* reduce padding in the form areas */ #form { padding: 30px 30px 0 30px; } #form form { padding: 15px 15px 0 15px; } #form h2.alpha { margin-bottom: 30px; } /* reposition the form error */ .form_msg { top: 205px; } /* reduce padding in the main text area */ #main { padding: 30px 30px 0 30px; } /* reduce padding in the secondary text area */ .secondary { padding: 30px 30px 0 30px; } /* reduce padding in the image block area */ .image { padding: 30px; } /* reduce padding in the small_icons region */ .small_icons { padding: 30px 30px 0 30px; } /* reduce padding in the gallery listing */ #portal { padding: 30px 35px 10px 35px; } #portal h2.alpha { margin-bottom: 30px; } .listing.thumbnail a { margin: 0 5px 10px 5px; } /* reduce padding in the gallery thumbs */ #portal.thumb_portal { padding: 30px 30px 0 30px; } #gallery_thumbs .thumbnail { width: 50%; } /* reduce padding in the single image view and switch to full-screen image */ #single { padding: 0 30px; } #image_title { float: none; margin-bottom: 25px; width: 100%; text-align: center; } #image_title .image_count { line-height: 18px; margin-top: 10px; } #album_nav { display: none; } #single_image { box-shadow: none; margin-left: -30px; margin-right: -30px; min-height: 100px; } #single_image img { border-top: 1px solid #B6B6B6; border-bottom: 1px solid #B6B6B6; } #prev_next .next_link a { border-right: 0; right: 0; } #prev_next .prev_link a { border-left: 0; left: 0; } #prev_next_below { margin-left: -5px; margin-right: -5px; } #prev_next_below li { padding: 0 5px; } /* adjustments to the 403, 404, and thank-you page */ #simple_title { font-size: 1.875em; letter-spacing: 1px; padding-top: 30px; } #simple #simple_logo { width: 80px; } /* smaller back to top button */ #toTop a { border-right: 0; padding-top: 0; padding-left: 2px; width: 40px; height: 40px; right: 0; } /* techniques & finishes section */ #tfs .tf { padding: 100px 20px 20px 20px; } #tfs .tf_thumb { left: 0; top: 0; bottom: auto; right: 0; height: 80px; width: auto; } .tf_glances p { border-left: 0; border-top: 1px solid #CECECE; width: 100%; } .tfpage hr { margin: 30px 0; } .tf_protip { margin-bottom: 30px; margin-left: 0; margin-right: 0; } #tf_footer { padding: 30px 30px 0 30px; } .tf_applications { margin-left: -5px; margin-right: -5px; } .tf_gallery li { margin-left: auto; margin-right: auto; max-width: 200px !important; float: none; width: auto !important; } .tf_gallery_wrap { padding: 20px 20px 0 20px; } /* ========================================================================== */ } /*END*/ /* ========================================================================== */ /* X-SMALL --- UP TO & INCLUDING 479PX */ /* ========================================================================== */ @media only screen and (max-width: 479px) { /* smaller font sizes */ .text_heading { font-size: 1.5em; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; } h2, h3 { font-size: 1.250em; margin: 20px 0; } h4 { font-size: 1.1250em; margin: 20px 0; } p { font-size: 0.93750em; margin-bottom: 15px; } ul,ol { font-size: 0.93750em; margin-bottom: 15px; } blockquote { margin: 0 0 15px 15px; padding: 10px 15px; } #form h3 { margin: 5px 0 20px 0; } #form label, #form .form_label { font-size: 0.8125em; } /* shorter header area */ header { height: 185px; } /* pull the slider up to accommodate the shorter header */ #hero { top: 185px; } /* smaller main title and gallery heading font */ #page_title { font-size: 1.5em; padding-left: 15px; padding-right: 15px; } #gallery_title { font-size: 1.5em; } /* less padding/leading in the deck */ #deck { padding: 20px; } #deck p, #gallery p { line-height: 1.333333333; } /* less side-padding on textile lists */ .textile ul, .textile ol { padding-left: 25px; } /* smaller logo and mobile navigation button */ #logo, #logo a { height: 60px; width: 170px; } #logo img { height: 60px; width: 60px; } #logo .vcs { font-size: 15px; left: 70px; line-height: 18px; top: 5px; } #mobile { line-height: 55px; width: 60px; } #mobile a { height: 60px; } #mobile i { display: block; float: none; font-size: 24px; } #mobile .mobile_label { display: none; } /* reduce side padding in various regions */ .small_icons, .single_icon { padding: 20px 20px 5px 20px; } #portal { padding: 20px 25px 0 25px; } .image { padding: 20px; } #gallery_thumbs { padding-bottom: 10px; } #portal.thumb_portal { padding: 20px 20px 0 20px; } #form { padding: 20px 10px 0 10px; } #form form { margin-bottom: 20px; } #main, .secondary { padding: 25px 20px 5px 20px; } /* reposition the form error */ .form_msg { top: 185px; } /* less spacing on the features */ .features { padding: 30px 20px 0 20px; } .feature { margin-bottom: 20px; } /* less spacing on the services */ .services { padding: 30px 20px 0 20px; } .service { margin-bottom: 20px; padding-bottom: 20px; } /* reduce size of the single icon in the single_icon region */ .single_icon h2.alpha { margin: 20px 0; } .sidexside_left { padding-bottom: 5px; margin-bottom: 20px; } .icon_src { width: 100px; } /* smaller blockquote banner */ .quote { padding: 20px 20px; } /* less spacing on the cta region */ #cta { padding: 30px 20px 5px 20px; } /* smaller font in the CTA region */ #cta p { font-size: 15px; } #cta_icons { font-size: 13px; } #cta_icons li { margin-bottom: 15px; } /* reduce padding in the random galleries region */ #rand_gallery { padding: 25px 0 5px 0; } #rand_gallery p { margin: 10px 0 20px 0; } #random_galleries { margin-left: 10px; margin-right: 10px; } /* single column in the gallery listing */ .listing.thumbnail { float: none; margin-left: auto !important; margin-right: auto !important; max-width: 320px; width: 100%; } /* smaller small icons/social icons */ .small_icon.icon_only .small_icon_src { width: 50px; } .small_icons.footer_social .small_icon_link { width: 50px; } /* single column of portfolio image navigation */ #prev_next_below { margin-bottom: 25px; } #prev_next_below li { float: none; margin-bottom: 5px; width: 100%; } #prev_next_below a { padding: 10px 5px; } #prev_next_below .null { padding: 10px 5px; } /* single column in the footer navigation */ #menu { padding: 0 20px 20px 20px; } #menu h3 { border-color: #CECECE; margin: 0; } #menu .menu_col { border-top: 1px solid #CECECE; border-left: 0; margin: 10px 0 0 0; padding: 10px 15px 0 15px; float: none; width: 100%; } #menu .menu_col.alpha { border: 0; margin-top: 0; } #menu .menu_col_2, #menu .menu_col_4 { clear: none; } /* less padding in the social footer icons */ .small_icons.footer_social { padding: 20px 15px 10px 15px; } /* techniques & finishes section */ .table_wrap { padding: 10px 20px 20px 20px; } #tfs .tf { margin: 10px 0 0 0; } #tfs .tf_deck p { font-size: 15px; line-height: 22px; } .tf_app { float: none; width: 100%; padding: 0; margin: 5px 0 0 0; } .tf_app a { height: 100px; } .tf_app .title { bottom: 0; } #tf_prevnext li { display: block; float: none; width: 100%; padding: 5px 0 0 0 !important; } /* ========================================================================== */ } /*END*/