body { background-color: #4b4b4b; margin: 0; padding: 0; } #eyecatcher { width: 100%; background-color: #000000; position: relative; } #eyecatcher>.eyecatcherfill { height: 300px; background-color: #000000; } #eyecatcher>img { opacity: 1; width: 100%; height: auto; } #eyecatcherl { display: block; } #eyecatcherp { display: none; } @media (max-width: 767px) { #eyecatcherl { display: none; } #eyecatcherp { display: block; } } #eyecatchercaption { position: absolute; left: 0; bottom: 0; width: 100%; } .sqreyecatchernav { position: absolute; left: 0; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; box-sizing: border-box; height: 85px; } .sqreyecatchernav a { display: inline-block; color: #ffffff; text-decoration: none; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 5px 0; margin-right: 10px; transition: border-bottom-color 0.3s, color 0.3s; vertical-align: middle; } .sqreyecatchernav .sqrcontact a { margin-right: 5px; } .sqreyecatchernav .sqrcontact svg { width: 15px; height: 15px; } .sqreyecatchernav a:hover { color: #c8c8c8; } .sqrmodenav .sqreyecatchernav a[href="#sqrmodenav"] { border-bottom-color: #ffffff; } .sqrmodesearch .sqreyecatchernav a[href="#sqrmodesearch"] { border-bottom-color: #ffffff; } .sqreyecatchernav svg { display: inline; vertical-align: middle; } .sqreyecatchernav span { display: inline; vertical-align: middle; font-size: 15px; text-transform: uppercase; margin-left: 8px; } .sqreyecatchernav em.ngshopcartindicator { display: none; color: #ffffff; font-style: normal; border-radius: 12px; margin-left: 4px; font-weight: bold; } .sqreyecatchernav em.ngshopcartindicatoractive { display: inline-block; } @media (max-width: 767px) { .sqreyecatchernav .sqrcontact { display: none; } } .sqreyecatchernav img { display: block; width: 180px; height: auto; margin: 0 auto; } #eyecatchercaption h1 { display: block; max-width: 900px; margin: 0 auto; color: #ffffff; padding: 20px 20px 40px 20px; box-sizing: border-box; } #maincontainer { max-width: 1400px; margin: 0 auto; } #main { background-color: #969696; padding: 40px 0; } #sidebarleft, #content, #sidebarright { min-height: 1px; } #header { padding: 20px 0; background-color: #000000; } #footer { padding: 20px 0; background-color: #ffffff; } .sqrnav { position: absolute; top: 85px; left: -99999px; z-index: 1000; transform: translate3d(0,-15px,0); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; width: 100%; } .sqrbreadcrumbs { padding: 0 0 30px 0; font-size: 13px; text-transform: uppercase; background-color: #969696; color: #000000; } .sqrbreadcrumbs>a { color: #ffffff; text-decoration: none; } .sqrnav>ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 20px; width: 100%; box-sizing: border-box; background-color: #969696; } .sqrnavfader { width:100%; height:80px; background-image: linear-gradient(180deg, rgba(150,150,150,255), rgba(150,150,150,0)); } .sqrmodenav .sqrnav { left: 0; transform: translate3d(0,0,0); opacity: 1; } .sqrnav>ul>li { display: block; margin: 0; padding: 20px 10px; width: 25%; box-sizing: border-box; } @media (max-width: 1023px) { .sqrnav>ul>li { width: 50%; } } @media (max-width: 767px) { .sqrnav>ul>li { width: 100%; } } .sqrnav>ul a { color: #000000; text-decoration: none; font-size: 15px; text-transform: uppercase; display: block; padding: 10px; transition: background-color 0.2s, color 0.2s; } .sqrnav>ul>li>a { font-weight: bold; } .sqrnav>ul a span { display: block; } .sqrnav > ul > li em.ngshopcartindicator { display: none; background-color: #000; color: #ffffff; font-style: normal; padding-right: 8px; padding-left: 8px; border-radius: 8px; margin-left: 8px; font-weight: normal; } .sqrnav > ul > li em.ngshopcartindicatoractive { display: inline-block; } .sqrnav>ul a:hover { background-color: #4b4b4b; color: #ffffff; } .sqrnav>ul a img { display: block; width: 100%; height: auto; margin-top: 10px; transition: opacity 0.2s; } .sqrnav>ul a:hover img { opacity: 0.8; } .sqrnav>ul>li>ul { display: block; margin: 0; padding: 0; list-style: none; } .sqrsearch { position: absolute; top: 85px; margin: 0; padding: 30px; background-color: #969696; width: 100%; box-sizing: border-box; left: -99999px; z-index: 1000; transform: translate3d(0,-15px,0); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } .sqrmodesearch .sqrsearch { left: 0; transform: translate3d(0,0,0); opacity: 1; } .sqrsearch form { display: flex; padding: 0; margin: 0; border: 1px solid #4b4b4b; box-sizing: border-box; background-color: #969696; } .sqrsearch form input { margin: 0; padding: 0; border: none; outline: none; flex-grow: 1; padding: 14px 30px; font: 16px Montserrat,Verdana,Helvetica,sans-serif; line-height: 22px; color: #000000; background-color: #969696; } .sqrsearch form button { border-style: none; display: block; float: right; cursor: pointer; outline: none; -webkit-appearance: none; background-color: transparent; margin: 0; padding: 0; color: #000000; } @media (min-width: 1024px) { .sqrallwaysboxed, .sqrmobilefullwidth, .sqrdesktopboxed { box-sizing: border-box; padding-left: 20px; padding-right: 20px; max-width: 900px; margin-left: auto; margin-right: auto; } .sqrallwaysboxed .sqrallwaysboxed, .sqrdesktopboxed .sqrdesktopboxed, .sqrmobilefullwidth .sqrallwaysboxed, .sqrdesktopboxed .sqrallwaysboxed, .sqrdesktopboxed .sqrmobilefullwidth, .sqrdesktopremovebox .sqrallwaysboxed, .sqrdesktopremovebox .sqrmobilefullwidth { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmain2col>div { box-sizing: border-box; width: 48%; float: left; margin-right: 4%; } .sqrmain2col>div:last-child { margin-right: 0; } .sqrmain3col>div { box-sizing: border-box; width: 30.6666666666%; float: left; margin-right: 4%; } .sqrmain3col>div:last-child { margin-right: 0; } .sqrmain3collr>div { box-sizing: border-box; width: 50%; float: left; } .sqrmain3collr>div:first-child { width: 21%; margin-right: 4%; } .sqrmain3collr>div:last-child { width: 21%; margin-left: 4%; } .sqrmain2coll>div { box-sizing: border-box; width: 75%; float: left; } .sqrmain2coll>div:first-child { width: 21%; margin-right: 4%; } .sqrmain2colr>div { box-sizing: border-box; width: 75%; float: left; } .sqrmain2colr>div:last-child { width: 21%; margin-left: 4%; } .sqrmain3col:after, .sqrmain2col:after, .sqrmain3collr:after, .sqrmain2coll:after, .sqrmain2colr:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .sqrdesktophidden { display: none; } .sqrallwaysfullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } } @media (max-width: 1023px) { .sqrallwaysboxed, .sqrmobileboxed { box-sizing: border-box; padding-left: 20px; padding-right: 20px; } .sqrallwaysboxed>.sqrallwaysboxed, .sqrallwaysboxed>.nguiparagraphcontainer>.sqrallwaysboxed { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmobileboxedimportant { padding-left: 20px !important; padding-right: 20px !important; } .sqrmobilehidden { display: none; } .sqrallwaysfullwidth .sqrsuppressborders, .sqrmobilefullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } } footer { background-color: #000000; margin: 0; padding: 10px 30px; font-size: 14px; text-transform: uppercase; color: #ffffff; } footer a { color: #ffffff; text-decoration: none; transition: color 0.2s; } footer a:hover { color: #ffffff; } .sqrfooter { margin: 10px 0; text-align: center; color: #ffffff; } .sqrcommonnavhierarchical { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 10px 0; font-size: 13px; } .sqrcommonnavhierarchical>li { display: block; margin: 0; padding: 10px; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .sqrcommonnavhierarchical>li { width: 50%; } } @media (min-width: 1024px) { .sqrcommonnavhierarchical2col>li { width: 50%; } .sqrcommonnavhierarchical3col>li { width: 33.3333333%; } .sqrcommonnavhierarchical4col>li { width: 25%; } .sqrcommonnavhierarchical5col>li { width: 20%; } } .sqrcommonnavhierarchical>li>span { display: block; padding: 5px 0; } .sqrcommonnavhierarchical>li>ul { display: block; margin: 0; padding: 0; } .sqrcommonnavhierarchical>li>ul>li { display: block; margin: 0; padding: 5px 0; } .sqrcommonnav { display: block; list-style: none; margin: 0; padding: 10px 0; text-align: center; font-size: 13px; } .sqrcommonnav>li { display: inline-block; margin: 0; padding: 0 10px; } .sqrcontact { padding: 0 10px; text-align: center; } .sqrcontact { padding: 10px; text-align: center; } .sqrcontact svg { width: 16px; height: 16px; border: 0; padding: 0; margin: 4px; } @media (max-width: 768px) { .sqreyecatchernav { padding: 0 20px; } .sqrnav>ul { padding: 0; } .sqrbreadcrumbs { padding: 0 20px 30px 20px; } footer { padding: 10px 10px; } .sqrfooter { margin: 10px 10px; } } @media (max-width: 480px) { .sqreyecatchernav img { width: 120px; } } #btnup, #btnback { position: fixed; bottom: 20px; background-position: right center; background-repeat: no-repeat; width: 45px; height: 45px; transition: all .25s ease-in-out; } #btnup { right: 20px; transform: scale(2) rotate(180deg); background-image: url(./../../styles/lebanon/img/?f=morechevrondown&ca=ffffff); } #btnback { left: 20px; transform: scale(2) rotate(180deg); background-image: url(./../../styles/lebanon/img/?f=morechevronright&ca=ffffff); } #btnup:hover, #btnback:hover { cursor: pointer; transform: scale(2.25) rotate(180deg); }