/* Theme Name: Balmoral Paddlesurf Theme URI: http://www.paddlesurfing.com.au Description: Balmoral Paddlesurf's WordPress theme Version: 1.0 Author: Digital Blanket Author URI: http://www.digitalblanket.com.au Tags: */ @import "css/reset.css"; @import url(http://fonts.googleapis.com/css?family=Oswald:400,700); /* site wide defaults */ html, body {width:100%; height:100%;} /*body, div, article, section, header, footer, nav, li {position:relative;} Seems to break the WordPress Mediaelement.JS Video */ /*.group:after {display:block; height:0; clear:both; content:"."; visibility:hidden;} Not even sure what this does */ ::-moz-selection {background:#ff0000; color:#fff;} ::selection {background:#ff0000; color:#fff;} body, input, textarea {font:12px/16px Arial, sans-serif; color:#6d6e71;} h1, h2, h3, h4, h5, h6 {text-transform:uppercase;} a, a:hover {text-decoration:none; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;} input[type="text"], textarea, select, input[type="email"] {background:url('img/bg-input.gif') no-repeat top left #fff; width:185px; height:26px; border:1px solid #aeafb1; padding:5px 5px 0 8px; font-size:1em;} select {width:100%; height:45px;} .clear {clear:both;} /* site styles */ body {background:url('img/bg-page.jpg') no-repeat fixed center top #fff;} /* .red-bar used for header and footer */ .red-bar {width:100%; background:#ff0000;} .red-bar > .inner {width:980px; height:30px; text-align:right; margin:0 auto; color:#fff; font-family: 'Arial Black', Arial, san-serif; font-size:1.25em; line-height:2em; font-weight:900;} .red-bar a {color:#fff;} .red-bar a:hover {color:#939598;} header {width:100%; position:relative;} header .red-bar .content {padding-right:40px;} header .red-bar span {color:#000;} header .red-bar span.phone-no {color:#fff;} header #header-content {width:980px; height:130px; margin:0 auto; background:url('img/bg-header.jpg') repeat-x top center #fff;} #header-content .logo-section {height:97px;} #header-content .logo-section h1 {width:340px; height:78px; float:left; margin-top:10px;} #header-content .logo-section h1 a {width:100%; height:100%; display:block;} #header-content .slogan {width:275px; height:38px; float:left; display:inline-block; text-indent:-99999px; background:url('img/slogan.png') no-repeat center transparent; margin:40px 75px 0 60px;} #header-content .social-search {width:210px; height:95px; float:left;} #header-content .social-search .bps-online a {width:120px; height:48px; float:right; background:url('img/logo-bpsonline.png') no-repeat 0 0 transparent; display:block; margin:5px 10px 5px 0; text-indent:-99999px; opacity:0.8; transition:opacity 1s ease; -webkit-transition:opacity 1s ease;} #header-content .social-search .bps-online a:hover {background:url('img/logo-bpsonline.png') no-repeat 0 -49px transparent; opacity:1; transition:opacity 1s ease; -webkit-transition:opacity 1s ease;} #header-content .social-search .social-icons a {width:32px; height:32px; float:left; background-image:url('img/sprite-social.png'); background-repeat:no-repeat; display:block; margin-left:10px; text-indent:-99999px; opacity:0.8;} #header-content .social-search .social-icons a:first-child {margin-left:0} #header-content .social-search .social-icons a:hover {opacity:1;} #header-content .social-search a.facebook {background-position:0 -33px;} #header-content .social-search a.facebook:hover {background-position:0 0;} #header-content .social-search a.pinterest {background-position:-33px -33px;} #header-content .social-search a.pinterest:hover {background-position:-33px 0;} #header-content .social-search a.youtube {background-position:-66px -33px;} #header-content .social-search a.youtube:hover {background-position:-66px 0;} #header-content .social-search a.instagram {background-position:-99px -33px;} #header-content .social-search a.instagram:hover {background-position:-99px 0;} #header-content .social-search a.twitter {background-position:-132px -33px;} #header-content .social-search a.twitter:hover {background-position:-132px 0;} #header-content .social-search .search {margin-top:7px;} #header-content .mobile-logo-section {display:none;} #mobile-nav {display:none; width:100%; position:absolute; left:0; right:0; margin:0; z-index:999999;} .slicknav_menu {font-size:1.25em; padding:5px 10px !important; background:#ff0000;} .slicknav_nav > li {font-size: 1.25em; line-height: 2em;} .slicknav_row:hover {background:#93959;} .slicknav_nav a {text-transform:uppercase;} .slicknav_nav a:hover {background:#fff; color:#000;} nav#primary {width:750px; height:28px; z-index:99999; position:relative;} nav#primary li {width:115px; height:33px; float:left; margin-left:9px; text-align:center;} nav#primary li a {width:100%; height:100%; display:block; background-image:url('img/bg-menu.png'); background-repeat:no-repeat; background-position:-153px 0; display:block; font-family:Arial, san-serif; font-size:1.1em; line-height:1.8em; font-weight:900; color:#fff;} @media screen and (-webkit-min-device-pixel-ratio:0) { nav#primary li a {font-size:1.15em !important;} } nav#primary li a:hover, nav#primary li.current-menu-ancestor a {background-position:-153px -35px;} nav#primary li:first-child {margin-left:0;} nav#primary li:first-child a {background-position:0 0;} nav#primary li:first-child a:hover, nav#primary li.current-menu-ancestor:first-child a {background-position:0 -35px;} /*nav#primary li:last-child {margin-left:10px;}*/ nav#primary li:last-child a {background-position:-328px 0;} nav#primary li:last-child a:hover, nav#primary li.current-menu-ancestor:last-child a {background-position:-328px -35px;} /* menu hover start */ nav#primary ul.sub-menu {display:none;} /* overridden by Superfish, avoids a flash of the sub-nav */ /*nav#primary ul.sub-menu {visibility:hidden; opacity:0; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;} nav#primary ul li:hover > ul.sub-menu {visibility:visible; opacity:1; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;}*/ nav#primary ul li ul li.menu-item-has-children:hover > ul.sub-menu {/*visibility:visible; opacity:1; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;*/ margin:-39px 0 0 115px;} nav#primary ul.sub-menu li {width:115px; height:auto; margin:0; text-align:left; background-color:#939597;} nav#primary ul.sub-menu li a {width:105px; height:auto; background:none; font-size:1em; line-height:1.5em; font-weight:/*400*/900; padding:10px 5px; color:#000; font-family:Arial, sans-serif;} nav#primary ul.sub-menu li a:hover, nav#primary ul.sub-menu li.current-menu-item a, nav#primary ul.sub-menu li.current-menu-parent a {background:#ff0000;} /* Menu hover end */ .menu {text-transform:uppercase;} #content {width:980px; margin:0 auto; background:#fff;} #page-content {width:735px; float:left; margin-top:10px;} #page-content .inner {padding:0 0 10px 10px;} #page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 {font-weight:normal !important;} /* Homepage and SUP School page. It's after the internal pages so the overrides for page-description etc work */ #home-gallery {width:720px; height:350px; border:6px solid #ff0000; position:relative;} .anythingSlider .panel {background:none !important;} .anythingSlider-default {padding:0 !important;} .anythingSlider-default .anythingWindow {border-top:none !important; border-bottom:none !important;} #home-gallery li {position:relative; display:none;} #home-gallery h2 {font-family: 'Oswald', Arial, sans-serif; font-size:3em; font-weight:normal; line-height:1em; position:absolute; top:20px; left:0; width:98%; padding:0 1%; opacity:0.7;} #home-gallery .slide-prev {width:20px; height:55px; position:absolute; top:42%; left:10px;} #home-gallery .slide-prev .arrow, #home-gallery .slide-prev .arrow a {width:20px; height:55px; outline:none;} #home-gallery .slide-prev a > span {width:20px; height:55px; background:url('img/btn-prev.png') no-repeat center transparent; text-indent:-99999px; display:block;} #home-gallery .slide-next {width:20px; height:55px; position:absolute; top:50%; right:10px;} #home-gallery .slide-next .arrow, #home-gallery .slide-next .arrow a {width:20px; height:55px; outline:none;} #home-gallery .slide-next a > span {width:20px; height:55px; background:url('img/btn-next.png') no-repeat center transparent; text-indent:-99999px; display:block;} .page-headline, .page-signoff {font-family: 'Oswald', Arial, sans-serif; font-size:2.5em; line-height:1.2em; color:#000; margin:15px 0;} .page-description {font-family: Arial, sans-serif; padding:0 10px;} .page-description-mobile {display:none;} .brand-image {margin:25px auto; text-align:center;} .page-signoff {font-size:2.2em;} .page-signoff-mobile {display:none;} /* Info and product pages */ #page-content .inner.internal-pages h1, .page-description h1 {font-family: 'Oswald', Arial, sans-serif; font-size:2.5em; line-height:1em; color:#ff0000; margin:15px 0;} #page-content .inner.internal-pages h1:first-child, .page-description h1:first-child {margin-top:0;} #page-content .inner.internal-pages h2, .page-description h2 {font-family: Arial, sans-serif; font-size:2.15em; line-height:1em; color:#000; font-weight:bold; margin-bottom:10px;} #page-content .inner.internal-pages h3, .page-description h3 {font-family: Arial, sans-serif; font-size:1.75em; line-height:1em; color:#000; font-weight:bold; margin-bottom:10px;} #page-content .inner.internal-pages h4, .page-description h4 {font-family: Arial, sans-serif; font-size:1.25em; line-height:1em; color:#000; font-weight:bold; margin-bottom:10px;} #page-content .inner.internal-pages p, .page-description p {font-family: Arial, sans-serif; font-size:1.2em; line-height:1.2em; margin-bottom:15px;} #page-content .inner.internal-pages img, .page-description img {max-width:100%; height:auto;} #page-content .inner .alignleft {float:left; margin-right:15px;} #page-content .inner .alignright {float:right; margin-left:15px;} #page-content .inner .aligncenter {display: block; margin:0 auto;} #page-content .inner.internal-pages.info ul, .page-description ul {margin-left:35px; margin-bottom:15px;} #page-content .inner.internal-pages.info ul li, .page-description ul li {list-style:disc; font-size:1.2em;} #product-grid {clear:both;} #product-grid .row {width:100%; padding:15px 0 30px; display:block;} #product-grid .product {float:left; font-size:1.1em; line-height:1.25em;} #product-grid .product .inner {padding:0 15px; border-left:1px dashed #98999B;} #product-grid .product:first-child .inner {border-left:none;} #product-grid img {max-width:95% !important; max-height:320px; margin:0 auto; display:block;} #product-grid .name {margin:20px 0 10px; font-family: 'Arial Black', Arial, san-serif; font-weight:900; text-transform:uppercase;} #product-grid .weight, #product-grid .rider-weight {padding-top:15px;} #product-grid .more-info {background:url('img/btn-buy-now.png') no-repeat top right #fff; width:100%; height:38px; line-height:2.5em; margin:15px 0;} #product-grid a .more-info {color:#fff; font-size:0.9em;} #product-grid .more-info .left {color:#ff0000; margin-left:7px;} #product-grid .more-info .right {float:right; margin-right:7px;} #product-grid .clear.clear-2-col-mobile {display:none;} .floating-buy {background:url('img/btn-floating-buy-now.png') no-repeat top center transparent; position:fixed; bottom:0; right:10px; width:171px; height:45px; z-index:999999; text-align:center; transition:height 0.25s linear; -webkit-transition:height 0.25s linear;} .floating-buy:hover {height:70px; transition:height 0.25s linear; -webkit-transition:height 0.25s linear;} a .floating-buy {color:#fff;} .floating-buy h4 {font-family: 'Oswald', Arial, sans-serif; font-size:1em; padding-top:53px; color:#fff !important;} /* SUP News page */ .display_archive {font-family: arial, san-serif; font-size: 1.25em; margin:20px 0;} .campaign {line-height: 125%; margin: 5px 0 5px 20px;} .campaign a {color:#000;} .campaign a:hover {text-decoration:underline;} /* Contact page */ .contact-content {float:left; width:405px;} .google-maps {float:right; margin:0 0 20px 20px;} .google-maps a {color:#000;} .google-maps a:hover {text-decoration:underline;} body.contact .contact-form {margin:15px 0; width:80%;} body.contact .contact-form .wpcf7 {margin:15px 0;} span.wpcf7-form-control-wrap {width:100%;} body.contact .contact-form input[type="text"], body.contact .contact-form input[type="email"], body.contact .contact-form textarea {width:100%; font-size:1em;} body.contact .contact-form textarea {height:130px; padding-top:10px;} body.contact .contact-form input[type="submit"] {background:none; border:none; outline:none; color:#ff0000; font-size:1.15em; text-decoration:underline; float:right;} body.contact .contact-form input[type="submit"]:hover {color:#939598;} .wpcf7 small {font-size:0.75em !important;} .wpcf7-not-valid-tip {border:none !important; background-color:transparent !important; /*left:auto !important; right:10px;*/ margin-top:-20px; text-align:right;} .wpcf7 .your-message .wpcf7-not-valid-tip {position:absolute; top:35px; right:0;} .wpcf7 .wpcf7-validation-errors {display:none !important;} .wpcf7-form.sent p {display:none;} .wpcf7-mail-sent-ok {border:none !important; background-color:transparent !important;} .wpcf7-response-output {font-size:1.5em; color:#6D6E71;} /* Sitemap page */ #sitemap {margin-left:30px;} #sitemap > li {margin:30px 0;} #sitemap a {font-size:1.35em; color:#000; display:block; margin:15px 0;} #sitemap a:hover {text-decoration:underline;} #sitemap ul.children {margin:0 0 10px 20px;} /* Search results page */ body.search-results ol li {margin:25px; display:block;} body.search-results ol li p:nth-last-child(3) {display:inline; margin-right:5px;} a.cta {color:#ff0000; font-weight:bold;} a.cta:hover {color: #939598;} /* 404 page */ body.error404 .internal-pages {padding-top:75px !important; padding-bottom:75px !important;} /* Sidebar */ aside {width:240px; padding-left:5px; float:right;} aside h3 {font-family: 'Arial Black', Arial, san-serif; font-size:1.5em; font-weight:900; color:#fff; margin-bottom:15px;} aside #sidebar-menus {margin-top:10px;} aside .rollover-state-preload {display:none; visibility:hidden;} aside #sidebar-menus > div {margin-bottom:10px;} aside #sidebar-menus > div .inner {padding:10px; margin-left:10px;} aside #sidebar-menus > div a {font-family: Arial, san-serif; font-size:1.1em; color:#000; margin-bottom:10px; display:inline-block; font-weight:900;} @media screen and (-webkit-min-device-pixel-ratio:0) { aside #sidebar-menus > div a {font-size:1.15em !important;} } /* hide everything but the first menu item on all pages except homepage and Lessons page */ aside #sidebar-menus > div li {display:none;} aside #sidebar-menus > div li:first-child {display:block;} aside #sidebar-menus > div li a {padding:0 40px 0 0;} body.home aside #sidebar-menus > div li, body.lessons aside #sidebar-menus > div li {display:block; border-bottom:1px solid #808183;} body.home aside #sidebar-menus > div li:last-child, body.lessons aside #sidebar-menus > div li:last-child {border-bottom:none;} body.home aside #sidebar-menus > div li a, body.lessons aside #sidebar-menus > div li a {margin-top:10px;} body.home aside #sidebar-menus > div li:first-child a, body.lessons aside #sidebar-menus > div li:first-child a {margin-top:0;} aside #sidebar-menus div.starting {background:url('img/bg-menu-starting.png') no-repeat top left transparent; height:100%;} aside #sidebar-menus div.starting:hover {background:url('img/bg-menu-starting-rollover.png') no-repeat top left transparent;} aside #sidebar-menus div.progressing {background:url('img/bg-menu-progressing.png') repeat-y top left transparent; height:100%;} aside #sidebar-menus div.progressing:hover {background:url('img/bg-menu-progressing-rollover.png') repeat-y top left transparent;} aside #sidebar-menus div.hooked {background:url('img/bg-menu-hooked.png') no-repeat bottom left transparent; height:100%;} aside #sidebar-menus div.hooked:hover {background:url('img/bg-menu-hooked-rollover.png') no-repeat bottom left transparent;} aside #sidebar-menus > div li a:hover {background:url('img/side-menu-rollover.png') no-repeat center right transparent;} /* rollover state for the links */ aside .subscribe {} aside .subscribe .inner {padding:10px; margin-left:10px;} aside .subscribe .top {background:url('img/bg-subscribe-top.png') no-repeat bottom left transparent; height:24px;} aside .subscribe .top h3 {font-size:1.2em;} aside .subscribe .middle {background:url('img/bg-subscribe-mid.png') repeat-y bottom left transparent; height:100%;} aside .subscribe .middle .inner {padding-bottom:0;} aside .subscribe .middle input {margin-bottom:10px;} aside .subscribe .bottom {background:url('img/bg-subscribe-bot.png') no-repeat bottom left transparent; height:24px;} aside .subscribe .bottom .inner {padding:0 25px 0 0; float:right;} aside .subscribe .bottom input {background:none; border:none; outline:none; color:#ff0000; font-size:1.15em; text-decoration:underline;} aside .subscribe .bottom input:hover {color:#939598;} #mc-embedded-subscribe {margin-top:0 !important;} aside .facebook-widget {margin:15px 0 15px 10px;} aside .instagram-widget {margin:0 0 15px 10px;} aside .instagram-feed {margin-top:10px;} aside .instagram-feed .image-4 {display:none;} aside .instagram-feed img {width:68px; height:68px; margin-left:8px;} aside .instagram-feed a:first-child img {margin-left:0;} /* Footer */ a.post-edit-link {color:#ff0000;} a.post-edit-link:hover {text-decoration:underline;} footer {width:100%; margin-top:-12px;} footer .signoff {width:980px; margin:0 auto; background:#fff; color:#939597; font-size:0.9em; padding:10px 0;} footer .signoff .inner {width:920px; margin:0 auto;} footer .signoff a {color:#000;} footer .signoff .description {float:left;} footer .signoff .designers {float:right;} footer .signoff .designers a:hover {text-decoration:underline;} footer .red-bar {} footer .red-bar ul {margin-left:140px;} footer .red-bar li {float:left; margin-left:35px; line-height:2.5em; font-size:0.75em;} footer .red-bar li:first-child {margin-left:0;} /* General */ /* Bug fix for the Wordpress video embed player */ .mejs-mediaelement {position:inherit !important;} .wp-video {display:inline-block;} .aligncenter .wp-video {display:block; margin:0 auto;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries -------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* Smartphone - portrait and landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { body {width:100%; background:#fff;} .red-bar > .inner {width:100%; height:auto !important; font-size:1em;} .red-bar .content {padding:5px !important;} header #header-content {width:100%; height:auto !important;} header .logo-section {display:none;} header .mobile-logo-section {width:100%; display:block !important;} header .mobile-logo-section h1 {width:55%; float:left;} header .mobile-logo-section h1 a, header .mobile-logo-section h1 a img {width:100%;} header .mobile-logo-section .mobile-slogan {width:32%; float:right; margin:15px;} header .mobile-logo-section .mobile-slogan img {width:100%;} #mobile-nav {display:block;} nav#primary {display:none;} #content {width:100%; margin:50px 0 0; padding-top:15px;} #page-content {width:100%; line-height:1.5em;} #page-content .inner {width:98% !important; padding:0 1% !important;} #page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content p, #page-content ul {margin-bottom:20px !important;} #page-content h1 {font-size:2.5em !important; line-height:1;} #page-content h2 {font-size:2em !important; line-height:1;} #page-content h3 {font-size:1.75em !important; line-height:1;} #page-content h4 {font-size:1.5em !important;} #page-content h5 {font-size:1.25em !important;} #page-content p {font-size:1.25em !important;} #page-content ul {font-size:1.25em !important; margin-left:40px !important;} #page-content li {font-size:1em !important; padding-left:10px;} #page-content iframe {max-width:100%; height:auto;} #page-content table {width:100% !important;} #page-content .wp-caption, #page-content .wp-caption img {width:100% !important;} #home-gallery {margin:0 auto; width:90%; max-width:300px; height:150px;} #home-gallery ul, #home-gallery li {padding:0 !important; margin:0 !important;} #home-gallery h2 {width:95%; padding:0 10px 10px 10px;} #home-gallery img {width:100% !important; height:150px;} #home-gallery .slide-prev, #home-gallery .slide-next {top:40% !important;} .display_archive {font-size:2.75em;} /* MC newsletter archive */ .page-headline {/*font-size:2em; line-height:1.5em; margin:30px 0;*/display:none;} .page-description {display:none;} body.page-id-28 .page-headline, body.page-id-28 .page-description {display:block;} .page-description-mobile {display:block; font-family: Arial, sans-serif; padding:20px 10px 0; line-height:1.5em;} .page-description-mobile h2 {font-family: 'Oswald', Arial, sans-serif; font-size:1.75em; line-height:1.2em;} .page-description-mobile p {line-height:1.25em; padding:0 15px;} .page-description-mobile p a {color:#ff0000;} .page-description-mobile p img {width:75% !important; height:auto; margin:-20px auto !important;} .brand-image img {width:95%; margin:20px auto;} .page-signoff {display:none;} .page-signoff-mobile {display:block; font-family: 'Oswald', Arial, sans-serif; line-height:2.5em; margin:20px 0;} #sitemap > li {margin:60px 0;} #sitemap a {font-size:2.5em; margin:45px 0;} #sitemap ul.children {margin-left:60px;} #sitemap ul.children li {display:block; margin:30px 0;} .wpcf7-form input[type="text"], .wpcf7-submit {height:50px;} .contact-content {max-width:420px;} .google-maps iframe {width:500px;} /* Hack to make full width images span the full width on phones */ /* Assumes that images not full width will be either left or right aligned. */ /* Therefore we are only targetting images with no alignment class. */ #page-content img {width:90%; margin:0 auto; display:block;} #page-content h1 img, #page-content > img, #page-content .internal-pages p:first-child img {width:95%;} /* designed to grab the header image at top of each page */ #page-content img.alignleft, #page-content img.alignright {width:auto;} /* Then need to override for the product images */ #product-grid img {width:95% !important; height:auto; max-height:999999px; margin:0 auto; display:block;} #product-grid .row {border-top:1px dashed #98999B;} #product-grid .row.single .product {display:block; clear:both;} #product-grid .row.multiple .product {width:50% !important; margin-top:25px;} #product-grid .row .product {margin-top:50px; font-size:2.5em; padding-bottom:50px;} #product-grid .row .product .more-info {font-size:0.5em;} #product-grid .row .product.mobile-col-1 .inner {border-left:none;} #product-grid .row .product.mobile-col-2 .inner {padding-left:30px; clear:right;} #product-grid .clear {display:block;} .floating-buy {display:none;} aside {clear:both; width:100%; padding:20px 0; margin:20px 0 0 0; background:#e3e3e3;} aside h3 {font-size:1.5em !important; margin-bottom:10px;} aside #sidebar-menus {width:90%; margin:0 auto;} aside #sidebar-menus div {background:#ff0000 !important; padding:5px 0;} aside #sidebar-menus > div .inner {padding:5px 10px;} aside #sidebar-menus a {display:block; line-height:1.5em; margin:0 0 0 10px !important;} aside #sidebar-menus > div a {font-size:1.25em !important;} aside .subscribe-social {width:90%; margin:0 auto;} aside .subscribe {width:100%; margin-bottom:40px;} aside .subscribe form {width:100%;} aside .subscribe .top, aside .subscribe .middle, aside .subscribe .bottom {width:100%; background:#000; padding:10px 0 0;} aside .subscribe .inner {width:94%; padding:0 3% !important;} aside .subscribe .middle input {width:90%; font-size:1.25em; padding:3px 5px;} aside .subscribe .bottom input {font-size:1.25em; float:right;} aside .social {width:100%;} aside .facebook-widget {width:60%; float:none; margin:15px auto;} aside .facebook-widget > a img {width:100%;} aside .instagram-widget {width:45%; float:right; margin-top:30px;} aside .instagram-widget > a img {width:100%;} aside .instagram-feed {width:100%;} /*aside .instagram-feed a {width:45%;}*/ aside .instagram-feed img {width:45%; height:auto; margin:0px 0 20px 10%;} aside .instagram-feed .image-3 img {margin-left:0;} aside .instagram-feed .image-4 {display:inline;} footer .signoff {font-size:0.75em; width:100%; margin:10px 0 0;} footer .signoff .inner {width:90%;} footer .signoff .designers {float:left; clear:both; margin:0 0 5px 0;} footer .red-bar {width:100%; height:22px;} footer .red-bar .inner {width:92%; padding:0 4%;} footer .red-bar ul {margin:0; display:block;} footer .red-bar li {margin-left:10px;} } /* Smartphone - landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) and (orientation : landscape) { /* body {} .red-bar > .inner {width:100%; height:85px; font-size:1.5em;} header .mobile-logo-section h1 img {width:1000px;} header .mobile-logo-section .mobile-slogan {margin:15px;} header .mobile-logo-section .mobile-slogan img {width:700px; margin-top:20px;} nav#primary li {margin-left:38px; height:60px;} nav#primary li:last-child {margin-left:38px;} nav#primary li a {height:60px; line-height:2em;} nav#primary li ul.sub-menu {width:100%;} nav#primary li ul.sub-menu li {width:100%; height:80px;} nav#primary li ul.sub-menu li a {height:100%; font-size:3em; line-height:2.75em;} #home-gallery {margin:0 auto; width:1400px; height:865px;} #home-gallery h2 {width:95%; padding:20px;} #home-gallery img {width:1400px !important; height:865px;} .display_archive {font-size:3em;} .page-headline { margin:30px 0;} .page-description {line-height:1.5em; padding:0 30px;} .brand-image img {width:95%; margin:40px auto;} .page-signoff {margin:30px 0;} #product-grid .row.multiple .product {min-height:800px; margin-top:25px;} .display_archive {font-size:2em;} aside h3, aside .subscribe .top h3 {font-size:7em !important; line-height:1em;} aside #sidebar-menus > div a {font-size:6em !important;} aside .subscribe .bottom, aside .subscribe .bottom .inner {height:100px;} aside .subscribe .bottom input {height:100%; font-size:7em; padding-right:45px;} aside .social {width:80%; margin:0 auto;} aside .facebook-widget {width:45%; } aside .facebook-widget > a img {width:100%;} aside .instagram-widget {width:45%; margin-top:120px;} aside .instagram-widget > a img {width:75%; margin:0 auto; display: block;} aside .instagram-feed a {width:40%;} aside .instagram-feed img {width:42%; height:auto;} */ } /* Smartphone - portrait */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) and (orientation : portrait) { .display_archive {font-size:2.75em;} /* MC newsletter archive */ } /* iPad landscape */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } /* iPad portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } @media only screen and (min-width : 768px) { /* ADDED 30/7/2024 to fix 3rd level menu issues */ nav#primary ul ul ul {display:none !important; position:absolute; width:115px;} nav#primary ul ul li.sfHover ul {display:block !important;} }