@media screen and (min-width : 320px) and (max-width : 767px) { .header{ position: static; } .logo a{ color: #ff0101; } .social-links i, .upperheader p, #main-menu ul li.current-menu-item > a, #main-menu ul li.current_page_item > a{ color: #5b5b5b; } .sidebar-area { border-left: none; padding: 0; } #main-menu ul li a:before,.menu-header { content: none; position: static; } button.menu-toggle:focus, a.open-search-form:focus { outline: 3px solid #ffbc00 !important; text-decoration: none !important; } .menu-toggle, .dropdown-toggle { display: inline-block; font-size: 20px; font-weight: 600; background: #ff0101; color: #fff; border: none; } #main-menu ul li a,.logo span{ color: #000000; } #main-menu{ display: none; } .header.toggled #main-menu{ display: block; z-index: 999999; margin-bottom: 10px; } button.close-menu{ display: inline-block; background: #ff0101; border: none; color: #fff; } #main-menu ul li { float: left; width: 100%; } #main-menu ul li:nth-child(even) {background: #f5f5f5} #main-menu ul li:nth-child(odd) {background: #e5e5e5} #main-menu > li > ul.children, #main-menu > li > ul.sub-menu { position: absolute; top:-100%; background: #fff; } #main-menu li.focus > ul.children, #main-menu li.focus > ul.sub-menu , #main-menu li:hover > ul.children, #main-menu li:hover > ul.sub-menu , #main-menu li:focus > ul.children, #main-menu li:focus > ul.sub-menu { width: 100%; top:0; left: 0 !important; position: relative; } #main-menu ul { padding: 0; float: none; } #main-menu ul.children li a , #main-menu ul.sub-menu li a { padding: 0; line-height:53px; color: #4a5053; } #main-menu ul li.menu-item-has-children:after { content: ''; position: absolute; border: solid #4a5053; right: 10px; top: 50%; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; -webkit-transform: translate(0,-50%) rotate(-45deg); transform: translate(0,-50%) rotate(-45deg); } #main-menu ul.children li, #main-menu ul.sub-menu li { width: 100%; font-size: 12px; padding-left: 10px; } #main-menu ul li.menu-item-has-children:hover:after , #main-menu ul li.menu-item-has-children:focus:after, #main-menu ul li.menu-item-has-children.focus:after { top: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #main-menu a:hover, #main-menu ul li a:hover, #main-menu li:hover > a, #main-menu a:focus, #main-menu ul li a:focus, #main-menu li.focus > a, #main-menu li:focus > a, #main-menu ul li.current-menu-item > a, #main-menu ul li.current_page_item > a, #main-menu ul li.current-menu-parent > a, #main-menu ul li.current_page_ancestor > a, #main-menu ul li.current-menu-ancestor > a { background:none; } .header-image-box { height: 200px; background-size: cover !important; } .header-image-box h1 { font-size: 35px; } .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: 100% !important; } } @media screen and (min-width : 768px) and (max-width : 1023px) { .header{ position: static; } .logo a{ color: #ff0101; } .logo span{ color: #000000; } .social-links i, .upperheader p, #main-menu ul li.current-menu-item > a, #main-menu ul li.current_page_item > a,.social-links span{ color: #5b5b5b; } .upperheader { border-bottom: solid 1px #5b5b5b; } #main-menu ul li a { font-size: 14px; color: #000000; } .post-box:hover img,.post-box.box img{ transform: none; } .post-box .box { border-radius: 10px 10px 0 0; } .header-image-box { background-size: cover !important; height: 350px; } } @media screen and (min-width : 992px) and (max-width : 2560px) { .fixed-header { position: fixed !important; top: 0; left: 0; width: 100%; background: #fff; box-shadow: 2px 2px 10px 0px #2d2d2d; z-index: 9999; } .admin-bar .fixed-header{ margin-top: 30px !important; } } /* HOME PAGE MEDIA CSS */ @media screen and (min-width: 320px) and (max-width: 720px){ .photographer-elementor-banner-text-section h2{ font-size: 21px !important; } .photographer-elementor-banner-text-section { padding-left: 40px; } .services-know-more-section { margin-left: 2px; margin-right: 2px; margin-top: 18px; } } @media screen and (min-width: 721px) and (max-width: 991px){ .photographer-elementor-banner-text-section h2{ font-size: 32px !important; } .services-know-more-section{ width: 45.333% !important; margin-top: 19px; } } @media screen and (min-width: 992px) and (max-width: 1024px){ .services-know-more-section{ width: 31% !important; margin-top: 19px; } }