body { background-color: #d3cfd1; margin: 0; padding: 0; } .sqroutercontainer { background-color: #ffffff; min-height: 100vh; margin: 0; } @media (min-width: 1600px) { .sqroutercontainer { max-width: 1560px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); margin: 0 auto; } } .sqrtopcontainer { background-color: #f4f2f3; max-width: 1560px; margin: 0 auto; } .sqrtopcontainer > div { max-width: 1200px; margin: 0 auto; padding: 30px; box-sizing: border-box; } .sqrpicascrolled > div { padding: 20px 30px 10px 30px; } .sqrtopcontainer > div > .sqrsearch form { box-sizing: border-box; background-color: #ffffff; width: 100%; border: 1px solid #d3cfd1; padding: 0; margin: 0; outline: none; border-radius: 0; -webkit-appearance: none; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); } .sqrtopcontainer > div > .sqrsearch form input[type=text] { font: 15px 'Open Sans', Tahoma, Helvetica, sans-serif; line-height: 20px; height: 32px; width: calc(100% - 32px); float: left; box-sizing: border-box; padding: 6px; margin: 0; border: 0; -webkit-appearance: none; color: #000000; } .sqrtopcontainer > div > .sqrsearch form input[type=submit] { border: none; width: 32px; height: 32px; float: right; box-sizing: border-box; padding: 6px; cursor: pointer; outline: none; border-radius: 0; margin: 0; -webkit-appearance: none; background: #ef474f url(./../../styles/pica/img/?f=search&ca=ffffff) no-repeat center center; } .sqrtopcontainer > div > .sqrsearch form input[type=submit]:hover { background-color: #333333; } .sqrtopcontainer > div > .sqrsearch form:after { content: ""; display: table; clear: both; } .sqrtopcontainer > div > .sqrcontact { text-align: right; font-size: 14px; } .sqrtopcontainer > div > .sqrcontact a { text-decoration: none; -webkit-text-size-adjust: none; display: inline-block; color: #333333; transition: color 0.2s; } .sqrtopcontainer > div > .sqrcontact a:hover { color: #ef474f; } .sqrtopcontainer > div > .sqrcontact svg { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.2em; margin-right: 0.1em; margin-left: 0.1em; border: 0; padding: 0; } @media (min-width: 1024px) { .sqrindent { display: block; margin-left: var(--sqrindentleft); margin-right: var(--sqrindentright); } .sqrtopcontainer { border-bottom: 1px solid #d3cfd1; } .sqrtopcontainer > div { display: table; width: 100%; table-layout: fixed; } .sqrtopcontainer > div > .sqrlogo { display: table-cell; vertical-align: middle; box-sizing: border-box; width: 25%; } .sqrtopcontainer > div > .sqrsearch { width: 50%; display: table-cell; padding: 0 30px; vertical-align: middle; } .sqrtopcontainer > div > .sqrcontact { width: 25%; display: table-cell; vertical-align: middle; } .sqrtopcontainer > div > .sqrlogo img { display: block; border: 0; max-height: 34px; max-width: 75%; } } @media (max-width: 1023px) { .sqrtopcontainer > div > .sqrsearch { padding: 20px 0; } .sqrtopcontainer > div > .sqrlogo img { display: block; border: 0; max-height: 24px; max-width: 100%; } .sqrtopcontainer > div { padding-bottom: 10px; } } .sqrnav { display: block; margin: 0; padding: 0; position: relative; } @media (min-width: 1024px) { .sqroutercontainer { padding-top: 138px; } .sqrtopcontainer > div { transition: padding 0.2s ease; } .sqrfixedcontainer { position: fixed; z-index: 1000; width: 100%; } .sqrnav .sqrnavshow, .sqrnav .sqrnavhide { display: none; } .sqrnav > ul { display: block; list-style: none; margin: 0 auto; padding: 0 30px; max-width: 1200px; box-sizing: border-box; } .sqrnav > ul:after { content: ""; display: table; clear: both; } .sqrnav > ul > li { display: block; margin: 0; float: left; padding: 0 20px 0 0; } .sqrnav > ul > li > a { display: block; color: #333333; text-decoration: none; padding: 10px 0; border-bottom: 3px solid transparent; transition: border-bottom-color 0.5s; } .sqrnav > ul > li.active > a { border-bottom: 3px solid #333333; } .sqrnav > ul > li:hover > a { border-bottom: 3px solid rgba(239,71,79, 0.2); } .sqrnav > ul > li.sqrnavopen > a { border-bottom: 3px solid #ef474f; } .sqrnav > ul > li.sqrnavhome > a > span { display: none; } .sqrnav > ul > li.sqrnavhome > a { background-image: url(./../../styles/pica/img/?f=home&ca=333333); background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; } .sqrnav > ul > li > div { display: block; position: absolute; width: 100%; background-color: #ebe5e8; border-bottom: 1px solid #d3cfd1; border-top: 1px solid #d3cfd1; margin: 0; padding: 0; line-height: 20px; z-index: 1000; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2); display: none; } .sqrnav > ul > li.sqrnavopen > div { left: 0; display: block; } .sqrnav > ul > li > div > div { display: block; margin: 0 auto; max-width: 1200px; box-sizing: border-box; padding: 0 30px; } .sqrnav > ul > li > div > div > ul { display: block; list-style: none; padding: 0; margin: 0; background-color: #ebe5e8; min-height: 261px; position: relative; box-sizing: border-box; } .sqrnav > ul > li.sqrnavopen > div > div > ul { animation: 0.3s navanimate; } .sqrnav > ul > li > div > div > ul > li { display: block; margin: 0; padding: 5px 15px; box-sizing: border-box; width: 30%; transition: background-color 0.2s; } .sqrnav > ul > li > div > div > ul > li > a { display: block; padding: 5px 0; text-decoration: none; color: #333333; transition: color 0.2s; } .sqrnav > ul > li > div > div > ul > li:hover > a { color: #ef474f; } .sqrnav > ul > li > div > div > ul > li:first-child { padding-bottom: 15px; padding-top: 15px; } .sqrnav > ul > li > div > div > ul > li:first-child > a { color: #000000; padding-left: 0; border-bottom: solid 1px #d3cfd1; } .sqrnav > ul > li > div > div > ul > li.sqrnavmore > a { background: url(./../../styles/pica/img/?f=more&ca=333333) no-repeat right center; } .sqrnav > ul > li > div > div > ul > li.sqrnavmore:hover { background-color: rgba(255,255,255, 0.4); } .sqrnav > ul > li > div > div > ul > li.sqrnavopen, .sqrnav > ul > li > div > div > ul > li.sqrnavopen:hover { background-color: #ffffff; } .sqrnav > ul > li > div > div > ul > li > ul { position: absolute; right: 0; top: 0; width: 70%; height: 100%; background-color: #ffffff; display: block; padding: 0 15px; margin: 0; list-style: none; box-sizing: border-box; display: none; } .sqrnav > ul > li > div > div > ul > li.sqrnavopen > ul { display: block; } @keyframes navanimate { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .sqrnav > ul > li > div > div > ul > li > ul > li { display: block; margin: 0; width: 50%; float: left; padding: 5px 15px; box-sizing: border-box; } .sqrnav > ul > li > div > div > ul > li.sqrnavopen > ul > li { animation: 0.2s navanimate; } .sqrnav > ul > li > div > div > ul > li > ul:after { content: ""; display: table; clear: both; } .sqrnav > ul > li > div > div > ul > li > ul > li > a { display: block; text-decoration: none; color: #333333; padding: 5px 0; transition: color 0.3s; } .sqrnav > ul > li > div > div > ul > li > ul > li:hover > a { color: #ef474f; } .sqrnav > ul > li > div > div > ul > li > ul > li:first-child { width: 100%; padding-bottom: 15px; padding-top: 15px; } .sqrnav > ul > li > div > div > ul > li > ul > li:first-child > a { width: 100%; color: #000000; border-bottom: solid 1px #d3cfd1; } } @media (max-width: 1023px) { .sqrpanoramicbackground { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;; } .sqrnav .sqrnavshow { display: block; background: url(./../../styles/pica/img/?f=menu&ca=333333) no-repeat right center; padding-right: 40px; } .sqrnav a { display: block; padding: 8px 30px; color: #333333; text-decoration: none; border-bottom: solid 1px #d3cfd1; } .sqrnav li { display: block; margin: 0; padding: 0; } .sqrnav .sqrnavhide { display: none; background: url(./../../styles/pica/img/?f=close&ca=333333) no-repeat right center; padding-right: 40px; } .sqrnavopen > a.sqrnavshow { display: none; } .sqrnavopen > a.sqrnavhide { display: block; } .sqrnav li.sqrnavopen > ul { display: block; } .sqrnav ul { display: none; margin: 0 auto; padding: 0; list-style: none; } .sqrnav ul ul { display: none; background-color: #ffffff; } .sqrnav ul ul ul { background-color: #f4f2f3; } .sqrnav li li a { padding-left: 45px; } .sqrnav li li li a { padding-left: 60px; } .sqrnav li.sqrnavmore > a { background: url(./../../styles/pica/img/?f=moremobile&ca=333333) no-repeat right center; padding-right: 40px; } .sqrnav li.sqrnavopen > a { background: url(./../../styles/pica/img/?f=openmobile&ca=333333) no-repeat right center; padding-right: 40px; } .sqrnavopen > ul, .sqrnavopen > div > div > ul { display: block; } } .sqrnav li em.ngshopcartindicator { display: none; background-color: #ef474f; color: #ffffff; font-style: normal; padding-right: 6px; padding-left: 6px; border-radius: 4px; margin-left: 8px; font-weight: normal; } .sqrnav > ul li em.ngshopcartindicatoractive { display: inline-block; } .sqreyecatcher { position: relative; overflow: hidden; margin: 0; height: 0; width: 100%; border-bottom: 1px solid #d3cfd1; } .sqreyecatcher > .sqreyecatcherimagecontainer > img { width: 100%; display: block; border: 0; position: absolute; height: 100%; } .sqreyecatcher > .sqreyecatcherimagecontainer > img.headersliderpri { z-index: 1; transition: none; -webkit-transition: none; opacity: 1; } .sqreyecatcher > .sqreyecatcherimagecontainer > img.headerslidersec { z-index: 2; transition: none; opacity: 0; transform: scale3d(1.1,1.1,0);} .sqreyecatcher > .sqreyecatcherimagecontainer > img.headerslidersecout { transition: opacity 0.3s linear, transform 0.3s ease; opacity: 1; transform: scale3d(1,1,1);} .sqreyecatcher > .sqreyecatcherbulletcontainer { z-index: 3; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; line-height: 40px; text-align: center; } .sqreyecatcher > .sqreyecatcherbulletcontainer > a { width: 40px; height: 40px; display: inline-block; color: #ffffff; transition: color 1s; } .sqreyecatcher > .sqreyecatcherbulletcontainer > a.active { color: #d02e31; } #sidebarleft, #content, #sidebarright { min-height: 1px; } #header { padding: 30px 0 0 0; } #footer { padding: 0 0 30px 0; } #main { padding: 30px 0; } @media (min-width: 1024px) { .sqrdesktopboxed .sqrpanoramicbackgroundboxed { padding-left: 20px; padding-right: 20px; } .sqrallwaysboxed, .sqrmobilefullwidth, .sqrdesktopboxed { box-sizing: border-box; padding-left: 30px; padding-right: 30px; max-width: 1200px; 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; } .sqrallwaysfullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } .sqrdesktophidden { display: none; } } @media (max-width: 1023px) { .sqrallwaysboxed, .sqrmobileboxed { box-sizing: border-box; padding-left: 30px; padding-right: 30px; } .sqrallwaysboxed > .sqrallwaysboxed, .sqrallwaysboxed > .nguiparagraphcontainer > .sqrallwaysboxed { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmobileboxedimportant { padding-left: 30px !important; padding-right: 30px !important; } .sqrmobilehidden { display: none; } .sqrallwaysfullwidth .sqrsuppressborders, .sqrmobilefullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } } .sqrcommon { max-width: 1200px; padding: 30px; margin: 0 auto; box-sizing: border-box; font-size: 14px; font-size-adjust: none; } ul.sqrcommonnavhierarchical { display: block; list-style: none; margin: 0; padding: 0 0 15px 0; } ul.sqrcommonnavhierarchical > li { display: block; margin: 0; padding: 0 15px 15px 0; box-sizing: border-box; } ul.sqrcommonnavhierarchical:after { content: ""; display: table; clear: both; } @media (min-width: 768px) { ul.sqrcommonnavhierarchical > li { float: left; } } @media (min-width: 768px) and (max-width: 1023px) { ul.sqrcommonnavhierarchical > li { width: 50%; } ul.sqrcommonnavhierarchical > li:nth-child(2n+1) { clear: both; } } @media (min-width: 1024px) { ul.sqrcommonnavhierarchical > li { float: left; } ul.sqrcommonnavhierarchical2col > li { width: 50%; } ul.sqrcommonnavhierarchical3col > li { width: 33.33%; } ul.sqrcommonnavhierarchical4col > li { width: 25%; } ul.sqrcommonnavhierarchical5col > li { width: 20%; } } ul.sqrcommonnavhierarchical em { display: block; font-style: normal; text-transform: uppercase; color: #000000; padding-bottom: 8px; } ul.sqrcommonnavhierarchical > li > ul { display: block; margin: 0; padding: 0; list-style: none; } ul.sqrcommonnavhierarchical > li > ul > li { display: block; margin: 0; padding: 0; } ul.sqrcommonnavhierarchical > li > ul > li > a { display: block; text-decoration: none; color: #333333; padding: 2px 0; transition: color 0.2s; } ul.sqrcommonnavhierarchical > li > ul > li > a:hover { color: #ef474f; } ul.sqrcommonnav { display: block; list-style: none; text-align: center; margin: 0; padding: 0 0 30px 0; } ul.sqrcommonnav > li { display: inline-block; list-style: none; text-align: center; } ul.sqrcommonnav > li > a { display: block; text-decoration: none; color: #333333; padding: 0 5px; transition: color 0.2s; } ul.sqrcommonnav > li > a:hover { color: #ef474f; } .sqrcommonfooter { text-align: center; } .sqrbreadcrumbs { padding: 0; margin: 0; font-size: 13px; font-size-adjust: none; color: #333333; } .sqrbreadcrumbs > a { color: #ef474f; text-decoration: none; font-weight: normal; } .sqrbreadcrumbs > a:hover { color: #ef474f; text-decoration: underline; font-weight: normal; }