.quote-btn {position: fixed; top: 64%; right: -40px; transform: rotate(270deg); z-index: 100;} .quote-btn a {display: block; padding: 14px 22px; border-radius: 5px;} /* TOP BAR */ .th_top-bar {background-color: var(--clr-white); height: 34px; --_clr-grey-dk: #424242;} .th_top-bar .th_bar-links {display: flex; align-items: center; justify-content: space-between;} .th_top-bar ul {display: inline-flex; align-items: center; padding-block: 8px;} .th_top-bar ul:nth-child(1) svg {width: 16px; margin-right: 5px; fill: var(--clr-grey-dk); transition: var(--transition);} .th_top-bar ul:nth-child(1) li {padding-inline: 10px;} .th_top-bar ul:nth-child(1) li:first-child {border-right: 1px solid var(--clr-grey-dk);} .th_top-bar ul:nth-child(1) a {display: flex; align-items: center; color: var(--_clr-grey-dk)!important; transition: var(--transition);} .th_top-bar ul:nth-child(2) svg {width: 16px; height: 16px; fill: var(--_clr-grey-dk); transition: var(--transition);} .th_top-bar ul:nth-child(2) li {padding-inline: 6px;} .th_top-bar ul:nth-child(1) a:hover {color: var(--clr-red);} .th_top-bar ul:nth-child(1) a:hover > svg {fill: var(--clr-red);} .th_top-bar ul:nth-child(2) a:hover > svg {fill: var(--clr-red); transform: scale(1.15);} .ul.pagination.loop-pagination { display:flex; } /* Nav BAR */ .th_navbar {position: sticky; top: 0; z-index: 100; background: #fff;} .th_navbar .wrapper {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 0;} .th_navbar .th_logo img {width: 170px; transition: var(--transition);} .th_navbar .th_btn {display: flex; align-items: center; margin-inline: auto 48px;} .th_navbar .th_btn li {padding-right: 20px; transition: var(--transition);} .th_navbar .th_btn li:last-child {padding: 0;} .th_navbar .th_btn a {display: flex; align-items: center; gap:5px} .th_navbar .th_btn a div > * {display: block} .th_navbar .th_btn a strong {font-size: var(--fs-18); font-weight: var(--fw-600); transition: var(--transition);} .th_navbar .th_btn a span {font-size: var(--fs-14); margin-top: 5px; transition: var(--transition);} .th_navbar .th_btn a:hover > svg {fill: var(--clr-red);} .th_navbar .th_btn svg {width: 40px; height: 40px; margin-right: 8px; fill: var(--clr-blue-dk); transition: var(--transition);} .th_navbar .th_contact-btn {display: flex; align-items: center; font-weight:700; font-size: var(--fs-24); color: #fff; border-radius: 5px; padding: 12px;} .th_navbar .th_contact-btn svg {width: 22px; height: 22px; margin-right: 8px; padding-right: 8px; fill: #fff; border-right: 1px solid #fff;} /* Nav BAR menu */ .th_nav .th_nav-links {padding-bottom: 10px; background-color: #fff; z-index:10; position: relative; display: flex; align-items: center; justify-content: space-between;} .th_nav .th_nav-links button {display: none; background: none; border: none; cursor: pointer;} .th_nav .th_nav-links button svg {width: 30px; height: 30px; fill: var(--clr-red);} .th_nav .th_nav-links .th_links {display: inline-flex; align-items: center; justify-content: center;} .th_nav .th_nav-links li svg {width: 8px; height: 8px; margin-left: 4px; fill: var(--clr-black);} .th_nav .th_nav-links .th_dropdown-btn > li > a svg {width: 24px; height: 24px; margin: 0 10px 0 0;} .th_nav .th_nav-links .th_dropdown-btn > li > a {background-color: var(--clr-white); padding: 15px 26px; transition: var(--transition); font-size: 16px; display: flex; align-items: center;} .th_nav .th_nav-links .menu-item {position: relative;} .th_nav .th_nav-links .menu-item a {display: flex; align-items: center; padding: 15px 25px; font-weight: var(--fw-700); font-size: 16px; border-top: 1px solid transparent} .th_nav .th_nav-links .menu-item:has(.dropdown-menu):after {position: absolute; top: 20px; right: 10px; width: 10px; height: 10px; background: no-repeat center/cover url('https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images/icons/caret-down-fill.svg'); filter: brightness(0); content: '';} .th_nav .th_nav-links .th_mega-dropdown-menu {display: none; grid-template-columns: repeat(4, 1fr); position: absolute; top: 55px; width: 100%; height: fit-content; background-color: #fff; border: 1px solid var(--clr-grey-lt);} .th_nav .th_nav-links .th_mega-dropdown-menu img {width: 34px; height: 34px;} .th_nav .th_nav-links .th_dropdown {position: relative;} .th_nav .th_nav-links .dropdown-menu {display: none; position: absolute; top: 46px; width: 220px; height: fit-content; background-color: #fff; border: 1px solid var(--clr-grey-lt);} .th_nav .th_nav-links .dropdown-menu a {font-weight: var(--fw-600); padding: 15px; transition: var(--transition);} .th_nav .th_nav-links .th_mega-dropdown-menu a {display: flex; align-items: center; padding: 15px 25px;} .th_nav .th_search-bar {position: relative; transition: var(--transition);} .th_nav .th_search-bar input[type="search"] {width: 100%; height: 51px; border: 1px solid var(--clr-grey-lt);border-radius: 10px; padding-inline: 10px 60px; font-size: var(--fs-16); transition: var(--transition);} .th_nav .th_search-bar input[type="submit"] {position: absolute; top: 10px; right: 13px; background: no-repeat center/cover transparent url(https://emenacpackaging.ca/wp-content/themes/epca_new/assets/images/icons/search.svg); border: none; height: 25px; width: 25px; cursor: pointer;} .th_nav .th_nav-links .th_dropdown-btn > li > a:hover {background-color: #000; color: #fff; border: none;} .th_nav .th_nav-links .th_dropdown-btn > li > a:hover > svg {fill: #fff;} .th_nav .th_nav-links .th_mega-dropdown-menu a:hover, .th_nav .th_nav-links .th_dropdown-menu a:hover, .dropdown-item:hover {background: var(--clr-white); border: none; color: var(--clr-black); padding-top: 15px;} .th_nav .th_nav-links .menu-item:hover > a {color: var(--clr-red); border-top: 1px solid var(--clr-red);} .th_nav .th_nav-links .menu-item:hover:has(.dropdown-menu):after {filter: var(--filter-red);} .th_nav .th_nav-links .menu-item .dropdown-menu li a {border: none} /* Media Quries */ @media only screen and (min-width: 991px) { .th_nav .th_nav-links .menu-item:hover .dropdown-menu {display: block;} .th_nav .th_nav-links .th_mega-dropdown:hover ul {display: grid;} } @media only screen and (max-width: 1400px) { .th_nav .th_nav-links .th_links a {padding: 15px 18px;} .th_nav .th_nav-links .menu-item:has(.dropdown-menu):after {right: 5px;} } @media only screen and (max-width: 1300px) { .th_nav .th_nav-links .th_links a {padding: 15px 10px;} .th_nav .th_nav-links .menu-item:has(.dropdown-menu):after {right: -3px;} } @media only screen and (max-width: 1200px) { .container {padding-inline: var(--container-px);max-width: 1140px!important;} .section__h2 {font-size: var(--fs-28);} .th_nav .th_nav-links ul a {font-size: var(--fs-15); padding-inline: 12px;} .th_nav .th_nav-links .th_links a {font-size: 15px} .th_nav .th_nav-links .th_links :nth-child(n+5) {display: none;} .th_nav .th_nav-links .menu-item:has(.dropdown-menu):after {right: 0; width: 8px; height: 8px;} } @media only screen and (max-width: 991px) { .section__h2 {font-size: var(--fs-24);} .th_nav {background-color: #f5f5f5;} .th_nav .container {background-color: #fff;} .th_navbar, .th_nav .th_nav-links button {display: block;} .th_nav {position: relative; z-index: 200;} .th_navbar .th_logo img {width: 160px;} .th_nav .th_nav-links .th_links {display: none; height: auto;} .th_nav .th_nav-links .th_links li {padding-left: 12px;} .th_nav .th_nav-links .th_links > li:first-child > a {margin-right: 0px;} .th_nav .th_nav-links .th_links a {padding: 0; height: 54px; width: 100%; font-size: var(--fs-16);} .th_nav .th_nav-links .th_dropdown-btn {display: none;} .th_nav .th_nav-links .th_dropdown-menu {z-index:1;width: 100%; left: 0; z-index: 10;} .th_nav .th_nav-links .th_mega-dropdown-menu {top: 95px; left: 0; right: 0; margin-inline: auto; z-index: 10;} .th_nav .th_nav-links .th_mega-dropdown:hover > .th_mega-dropdown-menu {grid-template-columns: repeat(2, 1fr); position: unset;} .th_nav .th_nav-links .th_dropdown-btn > li > a {height: 54px; padding: 0 15px;} .th_navbar .th_btn li {padding-right: 10px;} .th_navbar .th_btn a strong {font-size: var(--fs-16);} .th_nav .th_nav-links .dropdown-menu {position: unset; width: 100%;} .th_nav .th_nav-links .th_dropdown-btn > li > a {background-color: #fff;} .quote-btn {right: -36px;} .quote-btn a {padding: 10px 16px;} .th_navbar .th_btn {margin-right: 8px;} } @media only screen and (max-width: 767px) { .section__h2 {font-size: var(--fs-20);} .th_navbar .th_logo img {width: 150px;} .th_navbar .th_btn > li:last-of-type {display: none;} .th_navbar .th_btn li {padding: 0;} .th_navbar .th_contact-btn svg {display: none;} } @media only screen and (max-width: 575px) { .section__h2 {font-size: var(--fs-18); margin-bottom: 15px;} .section__p {font-size: var(--fs-15);} .th_top-bar .th_bar-links {justify-content: center;} .th_top-bar ul:nth-child(2) {display: none;} .th_navbar .th_contact-btn {font-size: var(--fs-22)-2;} .quote-btn {right: -34px;} .quote-btn a {padding: 6px 12px;} .th_navbar .th_contact svg ,.th_navbar .th_btn div{display: none;} .th_navbar .th_logo img {width: 130px;} .th_navbar .th_logo video {width: 150px;} .th_nav .th_search-bar input[type="search"] {font-size: var(--fs-14); padding-inline: 8px;} }