/* _ _ _ _ _ ___ ____ _ / \ | \ | || \ | | / _ \ | _ \ ___ ___ (_) __ _ _ __ / _ \ | \| || \| || | | | | | | | / _ \/ __|| | / _` || '_ \ / ___ \ | |\ || |\ || |_| | | |_| || __/\__ \| || (_| || | | | /_/ \_\|_| \_||_| \_| \___/ |____/ \___||___/|_| \__, ||_| |_| |___/ */ /* SCREEN SIZES & RESPONSIVENESS Smartphones General Portrait : min-width: 321 max-width: 320 Landscape: min-widtg: 481 max-width: 480 iPad Landscape : 1024 iPad Portrait : 768 @media (min-width: 1200px) { @media (max-width: 1199px) { @media (max-width: 980px) { @media (max-width: 979px) { @media (min-width: 980px) { @media (min-width: 768px) and (max-width: 979px){ @media (min-width: 768px) { @media (max-width: 767px) { @media (max-width: 480px) { * DEFAULT COLORS #000000 - Black (Logo) #F0F7F7 - Anno blue background business card OLD Site #A7BFBC - Blue Background #809A97 - Dark Blue (ads background) * COMPLEMENT COLORS & Adobe 779C97 - dark Anno blue 51847D - Darker Anno Blue F8F9F9 - Anno White D6E0DF - Anno Offwhite 243F3C - Dark ocean green 383F3F - Dark Ocean Gray ANNO COLORS #bbbbbb - Dotted lines around products, dividers, product page, etc ********************************************************************************/ /********************************************************************************* * * FONTS * /********************************************************************************/ /*** Import Univers Font */ /* General Univers 45 Light */ @font-face { font-family: 'Univers45'; src: url('../annotheme/fonts/univers-lt-45-light.eot?') format('eot'), url('../annotheme/fonts/univers-lt-45-light.woff') format('woff'), url('../annotheme/fonts/univers-lt-45-light.ttf') format('truetype'); } /* Roman Univers 55 */ @font-face { font-family: 'Univers55'; src: url('../annotheme/fonts/univers-lt-55.eot?') format('eot'), url('../annotheme/fonts/univers-lt-55.woff') format('woff'), url('../annotheme/fonts/univers-lt-55.ttf') format('truetype'); } /* Univers Black 75 */ @font-face { font-family: 'Univers75'; src: url('../annotheme/fonts/univers75.eot?') format('eot'), url('../annotheme/fonts/univers75.woff') format('woff'), url('../annotheme/fonts/univers75.ttf') format('truetype'); } /************************************************************************************** * * GLOBAL WP CSS * /**************************************************************************************/ body, p { font-family: "Univers45", "Helvetica", sans-serif; } h1,h2,h3,h4,h5,h6 { font-family: "Univers55", Helvetica, sans-serif; } h1 { font-family: "Univers75", Helvetica, sans-serif; /*text-transform:uppercase;*/ } strong { font-weight: bold; font-family:"Univers55", "Helvetica", sans-serif; } .page-title, .post .title, .page .title { font-family: "Univers75", "Helvetica", sans-serif; } hr { padding: 0 0 0 0; background-color: #fff; border-top: #bbb 2px dotted; } /* Global Links *******************/ a:link { color: #422DBC; text-decoration: none; } a:visited { color: #609; text-decoration: none; } .entry a:visited { color: #609; } .entry, .entry p { font-family: "Univers45", "Helvetica", sans-serif; } /* Blockquote icon *******************/ .entry blockquote:before { content: "\f10d"; position: absolute; top: 0.6em; left: 0; font-size: 1.5em; color: #888; font-family: "FontAwesome"; font-style: normal; } /* Responsive img class */ .img-responsiv { max-width:100%; width:auto; height:auto; } /* Images in content */ .entry img, img.thumbnail, #portfolio .group.portfolio-img img { border: none; padding-top: 0px; } /* Images in galleries */ .gallery img { border: 2px solid #F5F5F5 !important; } .widget { font: 300 14px/1.4em "Univers45", "Helvetica", sans-serif; } .widget p, .widget .textwidget { font: 300 15px/1.5em "Univers45", "Helvetica", sans-serif; } .widget h3 { font: bold 16px/1.2em "Univers45", Helvetica, sans-serif; } /* Youtube embeds */ .embed-youtube { max-width:1024px; } /********************************************************************************* * * GLOBAL CANVAS * /*********************************************************************************/ #logo .site-title, #logo .site-title a { font-family: "Univers75", Helvetica, sans-serif; } #logo .site-description{ font-family: "Univers45", Helvetica, sans-serif; } /* Adjust spacing of sidebar compared to content */ /* If size of H3 is changed this needs to be adjusted as well!!! */ #wrapper #sidebar { margin-top: 3px; } body.home { background-image:url(images/bollen-background.png); background-repeat:repeat-x; background-position:top left; background-attachment:scroll; border-top:0px solid #000000; } /* CODE BELOW: * is to compensate for the transparant Bollen background that has been set above * Areas like content, footer, etc need to be in white instead of transparant */ .home #content { background-color:#ffffff !important; } /************************************************************************************** * * TOP NAVIGATION * /**************************************************************************************/ #top-nav { float: right; } #top ul.nav li.current_page_item a, #top ul.nav li.current_page_parent a, #top ul.nav li.current-menu-ancestor a, #top ul.nav li.current-cat a, #top ul.nav li.current-menu-item a { color: #FFFfff; } #top ul.nav li a { font-family: "Univers45", Helvetica, sans-serif !important; color: #ffffff; padding-top: 0.3em !important; padding-bottom: 0.3em !important; } /************************************************************************************** * * HEADER WIDGET * /**************************************************************************************/ .header-widget .widget { margin-bottom: 0; margin-top: 1em; } /************************************************************************************** * * PRIMARY NAVIGATION * /**************************************************************************************/ /* Remove pull down arrow from parent items */ #navigation .nav li.parent > a:after { content: none !important; } /* correction of size of side-nav in navigation menu * Otherwise the email icon will display under the cart icon */ #navigation .menus.nav-icons-1 .side-nav { width: 6em; } /* Set font and spacing for navigation - non-homepage pages * Note: the margin-bottom value for all pages PLUS homepage * is linked to the marketing banner (introduced via a hook!) * See also css code below for this banner */ #navigation { font-family: "Univers55", Helvetica, sans-serif; margin-bottom: 0.7em; /* was 3em */ } /* Correction for spacing on homepage only */ .home #navigation { margin-bottom: 1em; /* was 3em */ } /* Set font for parent items */ /* Watch out. The font size will have impact on the hovering accury of the submenu. See below for canvas cart hover correction! */ #navigation ul.nav li a { font:300 13px/1.2em "Univers55", Helvetica, sans-serif !important; text-transform:uppercase; color: #333333 !important; } #navigation ul.nav li a:hover { color: #ffffff; } /* Spacing of each parent item */ #navigation ul.nav li a { padding: 0.5em 0.9em; } /*******************************************************************/ /* Special styling items for Navigation * The class has to be added to the CSS field in Wordpress > Menu's */ /* SALE menu item */ #navigation ul.nav li.nav-sale a { color:#333333 !important; } #navigation ul.nav li.nav-sale a:hover { color:#ffffff !important; } /* Alle artikelen in category */ #navigation ul.nav li.nav-cursief a{ font-style: italic !important; } /************************************************************************* * SUB MENU NAVIGATION *************************************************************************/ /* Parent item border radius ON hover */ #navigation ul li:first-child { border-radius: 6px 0 6px 0; */ -moz-border-radius: 6px 0 6px 0; -webkit-border-radius: 6px 0 6px 0; } /* Border on submenu dropdown */ #navigation ul.nav li ul { -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } /*Sub menu case */ #navigation ul.nav li ul li a { text-transform:initial; /*font-size:1em;*/ } /*Sub menu case */ #navigation ul.nav li ul li a:hover { color:#ffffff !important; text-decoration:none; } /* Width of submenu's*/ ul.nav ul { width: 15em; } /* Set top right border ON hover for Cart in navigation */ #navigation ul.cart a.cart-contents { border-radius: 0 6px 0 0 !important; -moz-border-radius: 0 6px 0 0 !important; -webkit-border-radius: 0 6px 0 0 !important; color:#ffffff; /* Color of cart icon */ } #navigation ul.cart a.cart-contents + ul { -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; width: 20em; /* Width of cart submenu - was 12 em*/ } /************************************************************************* * NAVIGATION CATEGORY IMAGES *************************************************************************/ ul.nav li ul li.nav-icon-tafels a { display: block; background: url('images/nav-icon-tafels.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-banken a { display: block; background: url('images/nav-icon-banken.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-buiten a { display: block; background: url('images/nav-icon-buiten.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-lampen a { display: block; background: url('images/nav-icon-lampen.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-stoelen a { display: block; background: url('images/nav-icon-stoelen.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-accessoires a { display: block; background: url('images/nav-icon-accessoires.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } ul.nav li ul li.nav-icon-kasten a { display: block; background: url('images/nav-icon-kasten.png') no-repeat center bottom !important; height: 60px; text-indent: -9000px; } /************************************************************************* * NAVIGATION CANVAS ICONS *************************************************************************/ /* email icon in Navigation */ #navigation ul.rss li.sub-email a:before { font-size: 1.1em; color:#333333; } /* eMail icon hover */ #navigation ul.rss li.sub-email a:hover:before { color: #ffffff;} /* Height of email and rss icon */ #navigation ul.rss li a:before { line-height: 2.8; } /* Size of Cart icon */ #navigation ul.cart a.cart-contents:before { font:300 1.4em/0.93em "FontAwesome"; color:#1BA9AB; } /* Position of submenu. Workaround for submenu hover accurucy for the cart*/ /* Watch out with changing this otherwise the hovering will not function nicely */ /* If font size of parent nav items is changed, this needs to be changed also*/ #navigation ul.cart a.cart-contents { padding: 0.9em 1em 1em 1em; /*top: 1px;*/ } /************************************************************************* * NAVIGATION - CART WIDGET *************************************************************************/ /* Link to product in cart */ #navigation ul.cart .cart_list a { color: #ffffff; } /* Styling of each product in cart */ #navigation ul.cart_list li.mini_cart_item { border-top:2px solid rgba(0, 0, 0, 0.05);; } /************************************************************************************** * MARKETING BANNER * * Position is set as a Canvas Hook! **************************************************************************************/ .marketing-top { font: 300 12px/1.5em Univers45, Helvetica, sans-serif; background-color: #fff; color: #ffffff; text-align: center; width: 100%; margin-bottom:3em; } .home .marketing-top { margin-top: -0.5em; margin-bottom: 0em; padding-bottom: 3.6em; } .marketing-top div { background-color:#b1b1b1; } /************************************************************************************** * * BREADCRUMBS - CANVAS * /**************************************************************************************/ .breadcrumbs a { color:#444; } /************************************************************************************** * * HOME PAGE * /**************************************************************************************/ /* Remove the default "You are here:" text from breadcrumb */ .breadcrumb-title { display: none; } /* Remove breadcrumbs from your home page */ .home .breadcrumb { display: none; } /* Color of last Breadcrumb item */ .trail-end { color:#888888; } /* Remove title of page on the homepage */ .home .title {display:none;} .home h2 { font: bold 18px/1.2em "Univers55", Helvetica, sans-serif; } /************************************************************************************** * * SIDEBAR * /**************************************************************************************/ /* Spacer for top of sidebar. Can be added with a Text Widget with the following code:

 

* */ .anno-spacer-sidebar { margin-top:0em; } /************************************************************************************** * * SIDEBAR - WIDGETS * /**************************************************************************************/ /* Category Widget - remove bullets */ /* Link colors */ .widget { margin: 0 0 5em 0; } .widget ul li a { padding: 0; line-height: 22px; text-decoration: none; color: #666; } #sidebar .widget_product_categories ul { list-style-type: none; } /* SEARCH WIDGET */ #sidebar .widget_product_search { margin-top:7em; } /************************************************************************************** * * FOOTER * /**************************************************************************************/ #footer { border-top: 0px solid #e6e6e6; } #footer, #footer p { font: 300 13px/1.4em "Univers45", Helvetica, sans-serif; } #footer-widgets { background-color: #000000; border-top: 1px solid #000000; font: 300 13px/1.3em "Univers45", Helvetica, sans-serif; } #footer-widgets .widget { font: 300 13px/1.3em "Univers45", Helvetica, sans-serif; } #footer-widgets .widget h3 { margin: 0 0 0.8em 1em; color:#ffffff; border-bottom: 2px dotted #dddddd; width:80% /* Beperk ruimte op verzoek van Sylvia */ } #footer-widgets .widget ul { margin: 0 0 0.8em 1em; list-style:none; } #footer-widgets .widget .textwidget { margin: 0 0 0.8em 1em; color:#ffffff; } #footer-widgets .widget p, .widget .textwidget { font: 300 13px/1.4em "Univers45", "Helvetica", sans-serif; } #footer-widgets a { color: #ffffff; } .footer-anno-icons { display: block; margin-left: auto; margin-right: auto; text-align: center; } /************************************************************************************** * * FORMS * /**************************************************************************************/ /* Search form - Homepage only!! */ .home form#searchform input#s { background-color: #ffffff; } /* Search icon - Homepage only */ .home .fa-search:before { content: "\f002"; } /* Style of button under Search icon */ .submit { display: inline-block; padding: .40em 0.40em; border-radius: 14px; background: #333333; } /* Search form & button position ONLY in header widget */ .header-widget form#searchform input#s { margin-left: 5em; /* This the max margin because of responsiveness */ /* This needs to be tweaked with responsive code!! */ width: 40%; } } /************************************************************************************** * * WIDGETS * /**************************************************************************************/ .widget h3 { font-family: "Univers55", Helvetica, sans-serif; border-bottom: 2px dotted #dddddd; } .widget p { font-family: "Univers45", Helvetica, sans-serif; } /************************************************************************************** * * GLOBAL WOOCOMMERCE * /**************************************************************************************/ /* On Sale icon */ .onsale { padding: 25px 25px; background: url("images/icon-sale.png") no-repeat !important; border-radius: 0px; color: #4E4F4F !important; font-weight: bold; font-style:italic; position: absolute; top: 11px; left: 6px; } /* Product images on categories */ ul.products li.product a img { border-right: 2px dotted #bbb; border-bottom: 2px dotted #bbb; } /* Disable underlining on product links (cat pages, etc ul.products li.product-category a , .woocommerce ul.products li a { text-decoration: none; } /* And enable underlining again on product texts. #tab-description a:link , .single-product .summary a:link { text-decoration:underline; } /* And disable the underlining again on product meta... .single-product .product_meta a:link { text-decoration:none; } /* Swatches on product variations */ /*.swatch-wrapper { width: 50px; height: 50px; } */ /* * WOOCOMMERCE BUTTONS */ /* Add to cart button icon */ button.button.alt:before, .woocommerce input.button.alt:before, .woocommerce #respond input#submit.alt:before { content:"\f07a"; font-family:"FontAwesome"; padding-right:1em; font-size:1.2em; } /* Add to Cart buttons */ button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background-color: #A83998 !important; color: #292929; } /******* * WOOCOMMERCE INFO / ERROR MESSAGES ************/ .woocommerce_message, .woocommerce_info, .woocommerce_error, .woocommerce-message, .woocommerce-info, .woocommerce-error { color: rgba(0, 0, 0, 1); } /* Woocommerce info message, for example "No products found on this page ...."*/ .woocommerce_info:before, .woocommerce-info:before { content: "\f05a"; color: rgba(0, 0, 0, 0.4); font-size: 1.3em; } /* Styling of icon displayed in Info messages, before text -> font size (above) is depending on spacing below */ .woocommerce_message:before, .woocommerce_info:before, .woocommerce_error:before, .woocommerce-message:before, .woocommerce-info:before, .woocommerce-error:before { top: 0.85em; left: 0.5em; } .woocommerce_error:before, .woocommerce-error:before, .woocommerce_message:before, .woocommerce-message:before { font-size: 1.3em; } /**************************************************************************************/ /*** Breadcrumbs Woocommerce */ .breadcrumb { border-bottom: 0px dotted rgba(0, 0, 0, 0.1); margin-bottom: 1em; } /************************************************************************************** * * CART PAGE - WOOCOMMERCE * /**************************************************************************************/ /* Change Remove item icon */ table.cart a.remove { color: #fff; background: #c00; display: inline-block; height: 1.3em; width: 1.36em; line-height: 1.2; text-align: center; border-radius: 100%; } /* Remove wc-cart-shipping-notice from cart page */ .woocommerce .wc-cart-shipping-notice { display:none; } /************************************************************************************** * * CATEGORY PAGE WOOCOMMERCE * /**************************************************************************************/ /* Product title on category page */ ul.wcspt-products h2 { font: 18px/1.2em "Univers55", Helvetica, sans-serif; color: #222222; } /* SUBCAT ONLY !!! Image styling subcat on category page */ ul.products li.product-category a img { border-right: 0px dotted #bbb; border-bottom: 0px dotted #bbb; background:#FBFBFB; } ul.products li.product-category a img:hover { opacity:0.5; background:#000000; } /* Change product title color on hovering over product image */ ul.products li.product a:hover h3 { color:#1BA9AB; } /* Change Price color on hovering over product image */ ul.products li.product:hover span { color:#1BA9AB; } /* Change "Vanaf" text color on hovering over product image */ ul.products li.product:hover span.price { color:#1BA9AB; } .term-description img { margin-top:20px; padding-top:10px; padding-bottom:10px; border-top:2px dotted #ccc; border-bottom:2px dotted #ccc; } /************************************************************************************** * * PRODUCT PAGE WOOCOMMERCE * /**************************************************************************************/ /* Product title on product page */ .woocommerce .summary h1.product_title { margin-bottom: 0.5em; font-family: "Univers55", Helvetica, sans-serif; } /* Price display product page */ .woocommerce .summary p.price { font-weight: normal; font-size: 1.2em; border: none; padding: 0; margin-bottom: .8em; } /* Title of Variations block * See also functions.php for the hook that insert the html */ .woo-variations-title { display:block; text-transform:uppercase; border-top: 2px dotted #bbb; } .woo-variations-title h3 { color: #5e5e5e; font-family: "Univers45", Helvetica, sans-serif; font-size: 1em; padding-left:1em; padding-top:1em; } /* End of Variations Block /* Borders (top/bottom) for variations and cart button block */ .woocommerce .summary form { border-bottom: 2px dotted #bbb; border-top: 0px dotted #bbb; /* See variations title above */ margin-bottom:0.5em; /* Adjust bottom margin to decrease space between summary block and the meta custom text. See below. */ } /* Variations table (default without swatches) */ .woocommerce .summary table.variations { border: 0px solid rgba(0, 0, 0, 0.1); margin-bottom: 1em; background:#e5e5e5; } .woocommerce .summary table.variations tr td { border-right: 0px dotted rgba(0, 0, 0, 0.1); } /* Variations table (variable products) * THIS CODE DOES NOT WORK PROPERLY: * When selecting a variations the size of the box varies and moves the text left or right */ .woocommerce .summary .variations-table { margin-bottom: 1em; width:100%; background:#e5e5e5; } .woocommerce .summary .variations-table tr td { border: 0; padding: 0.857em 1.387em; border-right: 0px dotted rgba(0, 0, 0, 0.1); text-align: left; vertical-align: top; } /* Styling of individual variations inside table */ .variations-table td.label { padding-right:2em; padding-top:1em; } .variations-table tr { margin-bottom:2em; } /* Single variation price */ .woocommerce div.product span.price { font-family: "Univers65",Helvetica,sans-serif; font-size: 1.6em; font-weight: bold; } /* Above code changes Upsells & Related product price styling * So we need to revert it on these prices. Watch out! This changes the styling of all prices on all category pages!!! */ .woocommerce ul.products li.product .price { color: #000; font-weight: normal; font-size: 1.1em; } /* Spacing between attribute price and Buy button */ .woocommerce .summary .single_variation { margin-top: 1em; margin-bottom: 1em; } /* Remove "In voorraad" text under the price display * Woocommerce setting does not remove this text (Woocommerce > Settings > Product > Voorraad) * Or the setting "Voorraad weergave notatie" only displays the actual variation amount * This css will remove the text globally on the whole shop. An exception cannot be made on a per * product basis */ .woocommerce-variation-availability {display:none;} /* Reset selection text for variations */ # variations_clear a { font-size:0.5em; } /*** Product Meta Box */ /* Remove extra spacing between text (see css below) and variations block */ .woocommerce .product_meta { padding: 0.0em 0; } /* Add text at the top of the meta box. See also code in * functions.php for the hook that injects the custom text */ div.woo_text_before_product_meta{ color:#676767; font-size:0.8em; margin-bottom:4em; } .posted_in {display:none;} /* Woocommerce Tabs on single product pages */ /* Hide all woocommerce tabs */ .woocommerce .woocommerce_tabs ul.tabs, .woocommerce .woocommerce-tabs ul.tabs { display: none; } /* Remove border from product description/woocommerce tabs */ .woocommerce .woocommerce_tabs, .woocommerce .woocommerce-tabs { border-top: 0px solid rgba(0, 0, 0, 0.1); } /* Product Long Description */ .woocommerce .woocommerce-tabs .panel h2 { border-bottom:2px dotted #ccc; } /************************************************************************************** * * PRODUCT PAGE - THUMBNAILS WOOCOMMERCE * /**************************************************************************************/ /************************************************************************************** * * PLUGINS - WOOCOMMERCE * /**************************************************************************************/ /* New Product Icon */ ul.products li.product .wc-new-badge { padding: 17px 8px; /*font-size: 0.8em; /* text-transform: uppercase; */ color: transparent; background: url("images/icon-new-product.png") no-repeat; /* display: inline-block; /* font-weight: 700; */ /* border-radius: 0px; */ position: absolute; top: 2px; right: 3px; } /**** YITH Brands Plugin */ /* Change size of brand logo This should be done using the "simple Images Sizes" plugin and changing the Max. Height to your desired px. */ /**** Standard Widget Extension */ /* Making widgets by default collapsable */ /* change postition of + and - sign */ #sidebar .widget .hm-swe-collapsed { background: url(images/plus-icon.png) no-repeat right top; } #sidebar .widget .hm-swe-expanded { background: url(images/minus-icon.png) no-repeat right top !important; } /************************************************************************************** * * FORMS - WOOCOMMERCE * /**************************************************************************************/ .woocommerce_ordering, .woocommerce-ordering { margin-bottom: 10px; } /************************************************************************************** * * CHECKOUT - WOOCOMMERCE * /**************************************************************************************/ /* Payment options styling */ .woocommerce-checkout #payment { background: #ffffff !important; } /* Active selected payment option styling */ .woocommerce-checkout #payment div.payment_box { background-color: #DADADA !important; color: #222 !important; padding: 20px 20px 4px 10px; } /* Remove silly "What is PayPal" link from PAyPal Payment options */ .about_paypal { display: none; } /******************************************************************************** * * RESPONSIVENESS * * DO NOT PUT ANY IMPORTANT CODE BEHIND THE RESPONSIVE CODE. * IT WILL BE IGNORED !!! */ /********************************************************************************/ @media only screen and ( min-width: 981px ) { } /*-------------------[960px]------------------*/ @media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { /*-------------------[Sliders]------------------*/ /*-------------------[Portfolio]------------------*/ /*-------------------[Sidebar]------------------*/ /*-------------------[Menu]------------------*/ } /*-------------------[768px]------------------*/ @media only screen and ( max-width: 980px ) { /*-------------------[Portfolio]------------------*/ /*-------------------[Sliders]------------------*/ /*-------------------[Menu]------------------*/ } @media only screen and ( min-width: 768px ) and ( max-width: 980px ) { } @media screen and ( max-width: 782px ) { } /*-------------------[480px]------------------*/ @media only screen and ( max-width: 767px ) { /* ---------------- HEADER --------------------*/ /* Hide the header right widget on small screens */ @media only screen and (max-width: 767px) { /* Decrease distance between logo, search bar and slider on homepage for ipad */ #content { padding-top: 0.5em; } .header-widget2 { display: none; } .header-widget { margin: 0em 0 0; } .header-widget .widget { margin-top: 0em; } } .header-widget .widget { margin-top: 0em; } /* Hide images or other css selectors on small screens */ @media only screen and (max-width: 767px) { .hide-tablet { display:none;} } /*-------------------[320px]------------------*/ @media only screen and ( max-width: 479px ) { }