/* --------------------------------------------------- Undo - Styles for Mobile Devices --------------------------------------------------- */ /* Standard 980 (devices and browsers) */ @media only screen and (min-width: 1004px) and (max-width: 1230px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ header { width: 990px; padding: 0px;} .top-header { width: 990px; padding: 0px;} .header-adv { width: 980px; padding: 0 5px;} .wrap { width: 980px; padding: 0 5px;} .logo-icon { margin-left: 5px;} #searchform2 { margin-right: 13px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Content ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Home Featured Posts -- */ ul.featured-home-posts { margin-bottom: 40px;} ul.featured-home-posts li{ width: 100%; height: 197px; margin: 0 0 0 20px;} ul.featured-home-posts li img { width: 100%; height: 133px;} ul.featured-home-posts li.big { width: 460px; height: 383px; } ul.featured-home-posts li.big img { width: 460px; height: 315px; } ul.featured-home-posts li h2 { font-size: 12px; padding:18px 35px 0 10px; } ul.featured-home-posts li.big h2 { font-size: 15px; padding:18px 40px 0 10px;} /*----------------------------------------------------------------------------- ----------------------------- 3.b - Shop ------------------------------------- -----------------------------------------------------------------------------*/ ul.products li { width: 229px !important; margin: 0 8px 30px 8px !important; } ul.products li img { width: 230px; height: 230px;} a.add_to_cart_button { width: 207px !important; } .woocommerce .added:before { top: -165px !important;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Sidebar -------------------------------------- -----------------------------------------------------------------------------*/ .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Footer -------------------------------------- -----------------------------------------------------------------------------*/ .footer-content { width: 980px; padding: 25px 5px 0 5px;} .footer-content-bottom { width: 980px; padding: 25px 5px;} .footer-bottom { width: 980px; padding: 0 5px;} .footer-content-bottom .widget { margin-left: 20px; } div.footer-posts { width: 320px; } ul.footer-posts { width: 320px; } ul.footer-posts li { width: 120px; margin-right: 30px;} ul.footer-posts li img { width: 120px; height: 75px; margin-top: -25px;} ul.footer-posts li:last-child { display: none;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 710px; } .top-header { width: 710px; padding: 0 30px; position: inherit;} .header-adv { width: 650px; padding: 0 30px 30px 30px;} .wrap { width: 650px; padding: 0 30px; } .logo-icon { margin-left: 0px;} .logo { display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 45px; margin-top: 0px !important;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ .banner728 { display: none;} /* -- Search -- */ #searchform2 { width: 230px; height: auto; float: right; margin: 0 0 0 0; } #searchform2 #s { width: 200px; font-weight: bold; height: 45px; float: left; border: none; background: #FFF; padding: 0 15px; font-size: 13px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #searchform2 .buttonicon { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Content ------------------------------------- -----------------------------------------------------------------------------*/ /* -- Home Featured Posts -- */ ul.featured-home-posts { margin-bottom: 20px;} ul.featured-home-posts li{ width: 325px; height: 267px; margin: 0 0 0 0;} ul.featured-home-posts li img { width: 325px; height: 180px;} ul.featured-home-posts li.big { width: 650px; height: 542px; } ul.featured-home-posts li.big img { width: 650px; height: 445px; } ul.featured-home-posts li h2 { font-size: 13px; padding:18px 35px 0 30px; } ul.featured-home-posts li.big h2 { font-size: 18px; padding:18px 40px 0 30px;} /*----------------------------------------------------------------------------- ----------------------------- 3.b - Shop ------------------------------------- -----------------------------------------------------------------------------*/ ul.products li { width: 299px !important; margin: 0 25px 30px 0 !important; } ul.products li img { width: 300px; height: 300px;} a.add_to_cart_button { width: 277px !important; } .woocommerce .added:before { top: -235px !important;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; width:200px; height:45px; border: none; background-color: #fcc71f; color: #FFF; font-size: 13px; font-weight: bold; padding: 15px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { width: 650px; padding: 25px 30px 0 30px;} .footer-content-bottom { width: 650px; padding: 25px 30px 25px 30px;} .footer-bottom { width: 650px; padding: 0 30px;} .company-info { width: 620px; float: left;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 760px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 450px; } .top-header { width: 450px; padding: 0 30px; position: inherit;} .header-adv { width: 390px; padding: 0 30px 30px 30px;} .wrap { width: 390px; padding: 0 30px;} .logo { display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 45px; margin-top: 0px !important;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ .banner728 { display: none;} /* -- Search -- */ #searchform2 { width: 230px; height: auto; float: right; margin: 0 0 0 0; } #searchform2 #s { width: 200px; font-weight: bold; height: 45px; float: left; border: none; background: #FFF; padding: 0 15px; font-size: 13px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #searchform2 .buttonicon { display: none;} /*----------------------------------------------------------------------------- 3 - Content ----------------------------------------------------------------------------- */ /* -- Home Featured Posts -- */ ul.featured-home-posts { margin-bottom: 0px;} ul.featured-home-posts li{ width: 390px; height: 320px; margin: 0 0 0 0;} ul.featured-home-posts li img { width: 390px; height: 216px;} ul.featured-home-posts li.big { width: 390px; height: 325px; margin-bottom: 58px; } ul.featured-home-posts li.big img { width: 390px; height: 267px; } ul.featured-home-posts li h2 { font-size: 15px; padding:18px 35px 0 10px; } ul.featured-home-posts li.big h2 { font-size: 15px; padding:18px 40px 0 10px; font-weight: bold;} /* -- Blog 2 with pagination -- */ .blog-content { width: 390px; } .blog-post { width: 390px; height: 370px; } .home-post { width: 390px; height: 300px; } .single-media img { width: 390px; height: 210px;} .content { width: 390px;} .widget-left, .featured-mobile-rundown { width: 390px;} .widget-right { width: 390px; float: left;} .widget-first img, .featured-mobile-rundown img { width: 390px; height: 226px;} ul.widget-list { width: 390px; } ul.widget-list li { width: 390px; } .widget-list img { width: 55px; height: 55px; } ul.widget-list .meta-date { width: 100%; height: 24px; } .post iframe { width: 100%; height: 210px; } .entry img { width: auto;} img.alignleft { float: none; width: auto !important;; margin: 20px 0 10px 0;} img.alignright { float: none; width: auto !important;; margin: 20px 0 10px 0;} /* -- Pagination -- */ .wp-pagenavi, .defaultpag { width: 365px; } /* -- Banners -- */ .banner468, .banner468-top { display: none;} .banner250_md { display: block; margin-left: 70px; } /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 350px; } .accordionContent { width: 390px; } .accordionContent ul.tags { width: 390px; } /* -- Single - Latest posts -- */ ul.single-posts { width: 390px; } ul.single-posts li { width: 164px; float: left; height: 180px;} ul.single-posts li img { width: 164px; height: 103px; margin-top: -25px;} /* -- slider -- */ .blog-slider img { width:390px; height:auto;} /*----------------------------------------------------------------------------- ----------------------------- 3.b - Shop ------------------------------------- -----------------------------------------------------------------------------*/ ul.products li { width: 390px !important; margin: 0 0 40px 0 !important; } ul.products li img { width: 390px; height: 390px;} a.add_to_cart_button { width: 368px !important; } .woocommerce .added:before { top: -325px !important;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 5 - Comments ----------------------------------------------------------------------------- */ #comments { width: 390px; } ul.comment { width: 390px;} .comment li { width: 360px;} #respond { width: 390px; } #commentform textarea { width: 225px; height:159px; } body.logged-in #commentform textarea { width: 390px !important; } #commentform #author, #commentform #email, #commentform #url { width:125px; height:30px; border-radius: 3px; border-radius: 3px; } /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; width:100px; height:45px; border: none; background-color: #fcc71f; color: #FFF; font-size: 13px; font-weight: bold; padding: 15px 10px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- 7 - Contact form ----------------------------------------------------------------------------- */ .one_half_c, .one_half_last_c { float:left; width:380px; margin-right:0px; clear: both; } .one_half_last_c { margin-right:0;} .one_full_c { float:left; width:380px;} /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:380px;} #contactform #subject { width: 380px;} #contactform textarea { width: 380px;} /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { width: 390px; padding: 25px 30px 0 30px;} .footer-content-bottom { width: 390px; padding: 25px 30px 25px 30px;} .footer-bottom { width: 390px; padding: 0 30px;} .footer-posts { display: none;} .footer-content .widget { } .company-info { width: 360px; margin: 0; } ul.footer-menu { display: none;} .copyright { text-align: center; float: none; margin: 0;} /*----------------------------------------------------------------------------- 9 - shortcodes ----------------------------------------------------------------------------- */ /* -- Columns -- */ .one_half, .one_half_last { float:left;width:390px; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width:390px; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- 1 - Layout ----------------------------------------------------------------------------- */ html body { background-color: #f1f1f1;} header { width: 100%; } .top-header { width: 100%; padding: 0; margin: 0 5px; position: inherit;} .header-adv { width: 100%; padding: 0 30px 30px 30px;} .wrap { width: 92%; padding: 0 4%;} .logo { display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 45px; margin-top: 0px !important;} #background { display: none;} /*----------------------------------------------------------------------------- 2 - Header ----------------------------------------------------------------------------- */ .banner728 { display: none;} /* -- Search -- */ #searchform2 { width: 70px; height: auto; float: right; margin: 0 0 0 0; } #searchform2 #s { width: 60px; font-weight: bold; height: 45px; float: left; border: none; background: #FFF; padding: 0 5px; font-size: 13px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } #searchform2 .buttonicon { display: none;} /*----------------------------------------------------------------------------- 3 - Content ----------------------------------------------------------------------------- */ /* -- Home Featured Posts -- */ ul.featured-home-posts { display: none;} /* -- Blog 2 with pagination -- */ .blog-content { width: 100%; } .blog-post { width: 100%; height: 320px; } .home-post { width: 100%; height: 230px; } .single-media img { width: 100%; height: 163px;} .content { width: 100%;} .widget-left, .featured-mobile-rundown { width: 100%;} .widget-right { width: 100%; float: left;} .widget-first img, .featured-mobile-rundown img { width: 100%; height: 163px;} ul.widget-list { width: 100%; } ul.widget-list li { width: 100%; } .widget-list img { width: 55px; height: 55px; } ul.widget-list .meta-date { width: 100%; height: 24px; } .post iframe { width: 100%; height: 129px; } .entry img { width: auto;} img.alignleft { float: none; width: auto !important;; margin: 20px 0 10px 0;} img.alignright { float: none; width: auto !important;; margin: 20px 0 10px 0;} /* -- Pagination -- */ .wp-pagenavi, .defaultpag { width: 100%; padding-right: 0; } /* -- Banners -- */ .banner468, .banner468-top { display: none;} .banner250_md { display: block; } /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 200px; } .accordionContent { width: 100%; } .accordionContent ul.tags { width: 100%; } /* -- Single - Latest posts -- */ ul.single-posts { width: 100%; } ul.single-posts li { width: 230px; float: left; height: 220px; margin-right: 0;} ul.single-posts li img { width: 230px; height: 145px; margin-top: -25px;} /* -- slider -- */ .blog-slider img { width: 100%; height:auto;} /*----------------------------------------------------------------------------- 4 - Sidebar ----------------------------------------------------------------------------- */ .sidebar { display: none;} .sidebar-midle { display: none;} /*----------------------------------------------------------------------------- 5 - Comments ----------------------------------------------------------------------------- */ #comments { width: 100%; } ul.comment { width: 100%;} .comment li { width: 210px;} #respond { width: 238px; } #commentform textarea { width: 233px; height:159px; float: left;} body.logged-in #commentform textarea { width: 240px !important; } #commentform #author, #commentform #email, #commentform #url { width:235px; height:30px; border-radius: 3px; border-radius: 3px; } #commentform .submitcomm { margin: 25px 0 0 0; display: block; width: 100%;} /*----------------------------------------------------------------------------- 6 - Menu ----------------------------------------------------------------------------- */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; width:109px; height:45px; border: none; background-color: #fcc71f; color: #FFF; font-size: 13px; font-weight: bold; padding: 15px 10px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- 7 - Contact form ----------------------------------------------------------------------------- */ .one_half_c, .one_half_last_c { float:left; width: 100%; margin-right:0px; clear: both; } .one_half_last_c { margin-right:0;} .one_full_c { float:left; width: 100%;} /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:232px;} #contactform #subject { width: 232px;} #contactform textarea { width: 232px;} #contactform .sendemail { margin: 25px 0 0 0; width: 100%; } /*----------------------------------------------------------------------------- 8 - Footer ----------------------------------------------------------------------------- */ .footer-content { display: none;} .footer-content-bottom { width: 92%; padding: 25px 4%;} .footer-bottom { width: 92%; padding: 0 4%; } .footer-posts { display: none;} .footer-content .widget { display: none;} .footer-links li { width: 100%; margin-left: 0px;} .company-info { width: 210px; margin: 0; } ul.footer-menu { display: none;} .copyright { text-align: center; float: none; margin: 0;} /*----------------------------------------------------------------------------- 9 - shortcodes ----------------------------------------------------------------------------- */ /* -- Columns -- */ .one_half, .one_half_last { float:left;width: 100%; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width: 100%; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} } /* BRANDISH HEALY MOBILE NAV STYLES */ @media only screen and (max-width: 1000px) { .logo-icon, .header-adv, .top-header #searchform2, .banner250_md, .phone-only { display: none; } .mobile-control { display: block; background: #fff; height: 70px; } .mobile-control a { display: block; line-height: 0; } .mobile-control img { margin: 16px 0 0 5px; } header { height: 70px; background: #fff; } .top-header { background: #fff url(../images/logo-mobile.png) no-repeat left 20px; padding: 0; position: fixed; height: auto; } .jquerycssmenu { border: 0; width: 100%; } .jquerycssmenu.active { display: block; } .jquerycssmenu ul li { float: none; background-image: url(../images/bg-top.png); display: block; width: 100%; border: 0; } .jquerycssmenu ul li a { line-height: 30px; } .jquerycssmenu ul li ul { box-shadow: 0; -webkit-box-shadow: 0; right: 0; } .jquerycssmenu ul li ul li a { border: 0; } .downarrowclass { top: 16px; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; border: 0; background: 0; outline: 0; position: absolute; right: 5%; top: 20px; z-index: 300; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #000; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 300ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); } #priorityNav { color: #fff; text-transform: uppercase; overflow: hidden; font-weight: bold; font-size: .75em; border-bottom: 1.5em solid #fff; } #priorityNav li { display: block; float: left; width: 32%; text-align: center; background: #000; border-radius: 5px; margin: 0 .5%; } #priorityNav li.first-child { border: 0; } #priorityNav li a { color: #fff; } #priorityNav li a:active, #priorityNav li a:hover { color: #fcc71f!important; } .footer-bottom { height: auto; } #back-top: { opacity: 0.6; } } @media only screen and (max-width: 480px) { .page-id-2124 center img { width: 100%; height: 100%; } .single h1.article-title { font-size: 22px; line-height: 26px; clear: both; padding-top: 15px; } .single .entry { margin-top: 15px; } .single .category-albums .single-media img { width: 150px; height: 150px; margin: auto; display: block; } .phone-only { display: block; } .top-header.active { top: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; background: rgba(255,255,255,0.5); } .featured-mobile-rundown h3 { border-top: 2px solid #232323; border-bottom: 1px dotted #232323; font-size: 15px; font-weight: bold; margin-bottom: 20px; padding: 5px 0; text-transform: uppercase; } .featured-mobile-rundown a, .featured-mobile-rundown .entry .category a { background: #000; color: #FFF !important; } .featured-mobile-rundown .category a { font-size: 12px; text-transform: uppercase; font-weight: bold; display: inline-block; padding: 5px 20px; position: relative; float: left; } .featured-mobile-rundown .media-image { width: 32px; height: 32px; float: left; background: url(../images/media-image.png); position: relative; background-color: #fcc71f !important; } .featured-mobile-rundown h2 { font-size: 15px; font-weight: bold; line-height: 24px; margin: 10px 0; } .featured-mobile-rundown img.attachment-thumbnail { margin-top: -32px; } } @media only screen and (min-width: 1000px) { .mobile-only { display: none; } .jquerycssmenu { display: block!important; } }