/* Medium Layout: 1280px. */ @media only screen and (min-width: 992px) and (max-width: 1200px) {} /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) {} /* Mobile Layout: 320px. */ @media only screen and (max-width: 991px) { .slicknav_menu { display: block; } .menu-bar { position: relative; left: 0; top: 0; } .npaper.search-box { margin-bottom: 7px; } h1 { font-size: 35px; } h1.page-title { font-size: 20px; } h2 { font-size: 28px; } nav#site-navigation { display: none; } /* Mobile Menu style*/ .mobile-menu-bar { background: #333; display: block; } .mobile-menu-bar button { display: flex; justify-content: flex-end; margin-left: auto; padding: 8px 30px; margin: 5px 0 5px auto; border-radius: 0; background: var(--color-primary); color: var(--color-white); border: none; cursor: pointer; font-weight: 600; font-size: 16px; transition: all 0.3s ease; } .mobile-menu-bar button:hover { background: var(--color-primary-130); } .mobile-menu-bar button:focus { outline: 2px solid var(--color-primary-70); outline-offset: 2px; } nav#mobile-navigation { position: relative; } .wsm-menu nav div>ul { box-shadow: 0px 5px 42px -6px rgb(92 91 92); padding: 20px; margin-bottom: 10px; background: var(---light-body); position: absolute; left: auto; right: 0; top: 80px; z-index: 99999; visibility: hidden; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.5s ease; background: #fff; } .wsm-menu nav.menu-active div>ul { top: 40px; visibility: visible; opacity: 1; max-height: 1000px; min-width: 250px; } .wsm-menu div>ul { margin: 0; padding: 0; } .wsm-menu ul li a { padding: 7px 10px; text-decoration: none; border-bottom: 1px solid #eee; display: block; color: var(--color-secondary); transition: all 0.3s ease; } .wsm-menu ul li a:hover { background: var(--color-primary-40); color: var(--color-primary); padding-left: 15px; } .wsm-menu ul li.current-menu-item > a { background: var(--color-primary-40); color: var(--color-primary); font-weight: 600; } .mobile-navigation ul { list-style: none; } .menu-item-has-children { display: flex; flex-flow: row wrap; } .menu-item-has-children>a { width: 80%; min-width: 250px; } .menu-item-has-children .sub-menu { display: block; width: 100%; } span.mclose { display: none; } .menu-item-has-children>i { padding: 10px 15px; margin-left: auto; } /* CSS-only dropdown arrow for mobile menu */ .menu-item-has-children > i.mobile-dropdown-arrow { padding: 10px 15px; margin-left: auto; position: relative; cursor: pointer; } .menu-item-has-children > i.mobile-dropdown-arrow:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--color-desc-one); transition: transform 0.3s ease; } /* Arrow rotation when menu is open */ .menu-item-has-children.clicked > i.mobile-dropdown-arrow:before, .menu-item-has-children.focus > i.mobile-dropdown-arrow:before { transform: translate(-50%, -50%) rotate(180deg); } /* Focus state for mobile dropdown arrows */ .menu-item-has-children > i.mobile-dropdown-arrow:focus:before { border-top-color: var(--color-black); } #wsm-menu ul ul.sub-menu { visibility: hidden; max-height: 0; height: auto; opacity: 0; transition: 0.5s; padding-left: 0 !important; background: #f9f9f9; border-left: 3px solid var(--color-primary); margin: 5px 0; } #wsm-menu ul ul.sub-menu li a { padding-left: 25px; font-size: 14px; border-bottom: 1px solid #e0e0e0; } #wsm-menu ul ul.sub-menu li a:hover { padding-left: 30px; } #wsm-menu ul .menu-item-has-children.clicked>ul.sub-menu, #wsm-menu ul .menu-item-has-children.focus>ul.sub-menu { max-height: 1000px; visibility: visible; opacity: 1; height: auto; } } /* Wide Mobile Layout: 480px. */ @media only screen and (max-width: 767px) { h1 { font-size: 35px; } h1.page-title { font-size: 24px; } h2 { font-size: 30px; } .menu-bar.is-fixed { position: inherit; } .home-all-content { flex-direction: column; } .home-intro .content h1 { font-size: 40px; } } /* Wide Mobile Layout: 480px. */ @media only screen and (max-width: 479px) { }