/* latin */ @font-face { font-family: 'Encode Sans Semi Condensed'; font-style: normal; font-display: swap; font-weight: 400; src: local('Encode Sans Semi Condensed Regular'), local('EncodeSansSemiCondensed-Regular'), url(https://fonts.gstatic.com/s/encodesanssemicondensed/v2/3qT4oiKqnDuUtQUEHMoXcmspmy55SFWrXFRp9FTOG1yW9MQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Encode Sans Semi Condensed'; font-style: normal; font-display: swap; font-weight: 500; src: local('Encode Sans Semi Condensed Medium'), local('EncodeSansSemiCondensed-Medium'), url(https://fonts.gstatic.com/s/encodesanssemicondensed/v2/3qT7oiKqnDuUtQUEHMoXcmspmy55SFWrXFRp9FTOG1Rl19FAZ9U.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Encode Sans Semi Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: local('Encode Sans Semi Condensed SemiBold'), local('EncodeSansSemiCondensed-SemiBold'), url(https://fonts.gstatic.com/s/encodesanssemicondensed/v2/3qT7oiKqnDuUtQUEHMoXcmspmy55SFWrXFRp9FTOG1RJ0NFAZ9U.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Kodchasan'; font-style: normal; font-display: swap; font-weight: 400; src: local('Kodchasan Regular'), local('Kodchasan-Regular'), url(https://fonts.gstatic.com/s/kodchasan/v1/1cXxaUPOAJv9sG4I-DJWiHGF.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------- aos -----------*/ [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,500px,0);transform:translate3d(0,500px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-500px,0);transform:translate3d(0,-500px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-500px,0,0);transform:translate3d(-500px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(500px,0,0);transform:translate3d(500px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-500px,500px,0);transform:translate3d(-500px,500px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(500px,500px,0);transform:translate3d(500px,500px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-500px,-500px,0);transform:translate3d(-500px,-500px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(500px,-500px,0);transform:translate3d(500px,-500px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,500px,0) scale(.6);transform:translate3d(0,500px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-500px,0) scale(.6);transform:translate3d(0,-500px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-500px,0,0) scale(.6);transform:translate3d(-500px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(500px,0,0) scale(.6);transform:translate3d(500px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,500px,0) scale(1.2);transform:translate3d(0,500px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-500px,0) scale(1.2);transform:translate3d(0,-500px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-500px,0,0) scale(1.2);transform:translate3d(-500px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(500px,0,0) scale(1.2);transform:translate3d(500px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-500%,0,0);transform:translate3d(-500%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-500deg);transform:perspective(2500px) rotateY(-500deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-500deg);transform:perspective(2500px) rotateX(-500deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}} body, html { background-color: #e8e7e7; color:#242830; font-family: 'Encode Sans Semi Condensed', sans-serif; font-size: 1em; font-weight: 400; margin:0px; padding:0px; } body { background-attachment: fixed; background-image: url(../img/productBg.jpg); background-position: center top; background-size: cover; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, img { display:block } table { border:none; border-collapse:collapse } a { cursor:pointer; text-decoration:none; outline:none; } p, form, input, ul, ol, h1, h2, h3, h4, h5, h6, figure, hr, span, blockquote, fieldset { margin:0px; padding:0px; } ul li { list-style-type:none; list-style-position:outside } ol li { list-style-position: inside } img { border:0px; display:inline-block } input, textarea, select { border-radius:0px; color:#2a363d; font-family: 'Encode Sans Semi Condensed', sans-serif; font-size: 1em; font-weight: 400; border:none; outline: none; resize:none; } strong { font-weight: 600 } input[type='text'], input[type='password'], input[type='button'], input[type='submit'], textarea, select { -webkit-appearance:none; -moz-appearance: none; } input[type="submit"], input[type="button"] { cursor:pointer } input::-moz-focus-inner { border:0; padding:0 } fieldset { border: 0 } input[type="radio"] { background-color: #fff; border:1px solid #c3c3c3; border-radius: 50%; cursor: pointer; height: 14px; margin-right: 9px; position: relative; outline: none; top: 1px; width: 14px; -webkit-appearance: none; -moz-appearance: none; } input[type="radio"]:hover { background-color: #efefef } input[type="radio"]:checked { background-color: #6981c0; border:3px solid #fff; box-shadow: 0 0 1px 1px rgba(15,15,15,0.4); } input[type="checkbox"] { background-color: #fff; border:1px solid #c3c3c3; cursor: pointer; height: 14px; margin-right: 8px; position: relative; top: 1px; width: 14px; -webkit-appearance: none; -moz-appearance: none; } input[type="checkbox"]:checked { background-color: #6981c0; border:3px solid #fff; box-shadow: 0 0 1px 1px rgba(15,15,15,0.3); } ::selection { background:#000; color:#fff; padding:20px } ::-moz-selection { background:#000; color:#fff } * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } hr { background-color: #ddd; border: 0; height: 1px; margin: 16px 0; width: 100%; } .generalWrap { margin:auto; max-width:1280px; position:relative; width: inherit; z-index: 1000; } .generalWrap.mid { max-width:1080px } .generalWrap.small { max-width:820px } @media only screen and (max-width:1336px) { .generalWrap { margin:0 22px } } @media only screen and (max-width:1320px) { .generalWrap.mid { margin-left: auto !important; margin-right: auto !important } .generalWrap.small { margin-left: auto !important; margin-right: auto !important } } @media only screen and (max-width:1120px) { .generalWrap.mid { margin-left: 20px !important; margin-right: 20px !important } } @media only screen and (max-width:860px) { .generalWrap.small { margin-left: 20px !important; margin-right: 20px !important } } /* ----------- header -----------*/ header { position: fixed; top: 42px; transition:all 0.3s ease; width: 100%; z-index: 10000; } header:after { background: -moz-linear-gradient(top, rgba(23,27,36,0.6) 0%, rgba(23,27,36,0) 100%); background: -webkit-linear-gradient(top, rgba(23,27,36,0.6) 0%,rgba(23,27,36,0) 100%); background: linear-gradient(to bottom, rgba(23,27,36,0.6) 0%,rgba(23,27,36,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99171b24', endColorstr='#00171b24',GradientType=0 ); content: ""; height: 170px; opacity: 0; position: absolute; top: -42px; transition:all 0.3s ease; width: 100%; z-index: -1; } header.change:after, header.blackBg:after { opacity: 1 } #topMenu { color: #fff; display: grid; font-size: .9em; font-weight: 500; grid-template-columns: auto auto; grid-gap: 22px; justify-content: end; height: 42px; margin: 0 42px; left: 0; position: absolute; right: 0; top: -42px; } #topMenu.two { grid-template-columns: auto auto auto } #topMenu > a, #topMenu .exchange { color: #fff; display: block; height: 42px; line-height: 40px; text-shadow: 0 0 15px rgba(60,60,60,0.45); transition:all 0.3s ease; } #topMenu .exchange .tx2 { display: none; } #topMenu > a:hover { color: #bfd730 } #topMenu i { color: #bfd730; margin-right: 8px; } #topMenu .logo { display: none; left: 27px; position: absolute; top: 7px; z-index: 200; } #topMenu .logo img { width: 90px } #topMenu .submenu { height: 42px; line-height: 42px; position: relative; z-index: 1000; } #topMenu .submenu ul { background-color: #fff; border-radius: 4px; box-shadow: 0 0 24px rgba(74,74,74,0.4); display: none; left: 50%; line-height: initial; min-width: 190px; padding: 8px 18px; position: absolute; top: 42px; transform: translateX(-50%); } #topMenu .submenu li:hover ul { display: block } #topMenu .submenu ul:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 4px; margin-left: -4px; } #topMenu .submenu ul li { position: relative } #topMenu .submenu p { cursor: pointer; transition:all 0.3s ease; } #topMenu .submenu p:hover { color: #d9ed61 } #topMenu .submenu ul a { border-bottom: 1px solid #ddd; color: #242830; display: block; font-weight: 500; font-size: .9em; padding: 9px 0; text-transform: uppercase; transition:all 0.3s ease; } #topMenu .submenu ul li:last-of-type a { border-bottom: none } #topMenu .submenu ul a:hover { color: #6981c0 } #topMenu .fa-chevron-down { color: #bebebe; font-size: .8em; margin-left: 7px; margin-right: 0; } @media only screen and (max-width:1366px) { #topMenu { margin: 0 22px } } @media only screen and (max-width:1000px) { header { background-color: rgba(35,58,118,.95); height: 52px; top: 0 } header:after { display: none } #topMenu { top: 5px } #topMenu .logo { display: block } } @media only screen and (max-width:980px) { #topMenu { grid-gap: 18px; grid-template-columns: auto auto } #topMenu.two { grid-template-columns: auto auto auto } #topMenu .exchange .tx1 { display: none } #topMenu .exchange .tx2 { display: inline-block } } @media only screen and (max-width:760px) { #topMenu .submenu ul { left: initial; right: -2px; transform: initial } #topMenu .submenu p span { display: none } #topMenu .fa-chevron-down { margin-left: 0 } #topMenu .submenu ul:after { left: initial; right: 23px } } @media only screen and (max-width:640px) { #topMenu a i { margin-right: 0 } #topMenu a span { display: none } } /* ----------- nav -----------*/ #navButton { color: #fff; display:none; font-size: 1.2em; left:4px; height: 42px; line-height: 42px; position:fixed; text-align: center; top:4px; width: 42px; z-index: 10000; } #closeMenu { color: #c5cbce; display: none; font-size: 1.2em; height: 46px; left:13px; line-height: 46px; position: absolute; text-align: center; top:0px; width: 46px; z-index: 9999999 } #homeBtn { display: none; font-size: 1.2em; height: 46px; line-height: 46px; position: absolute; right:13px; text-align: center; top:0px; width: 46px; z-index: 9999999 } #homeBtn a { color: #a2adb4 } header nav { height: 98px; margin: 0 42px; position: relative; transition:all 0.2s ease; } header.change nav { height: 78px } header.change nav:after { background-color: #455c96; bottom: -1px; content: ""; height: 1px; position: absolute; width: 100%; } nav > ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 320px 1fr 1fr 1fr 1fr; height: 100%; } nav > ul > li:nth-child(3) { display: none } nav > ul.three { grid-template-columns: 1fr 1fr 1fr 1fr 320px 1fr 1fr 1fr 1fr } nav > ul.three > li:nth-child(1), nav > ul.three > li:nth-child(5), nav > ul.three > li:nth-child(8), nav > ul.three > li:nth-child(9), nav > ul.three > li:nth-child(10) { display: none } nav > ul.three > li:nth-child(3) { display: block } nav > ul > li { position: relative } nav > ul > li > a, nav > ul > li > a:hover.current, header.change nav > ul > li > a:hover.current { align-items: center; background-color: rgba(35,58,118,.92); border-right: 1px solid #455c96; color: #fff; display: grid; font-size: .78em; font-weight: 500; height: 100%; padding-left: 10px; padding-right: 10px; position: relative; text-align: center; text-transform: uppercase; transition:all 0.2s ease; width: 100%; } nav > ul > li > a:not([href]) { cursor: default } nav > ul > li:nth-child(10) > a, nav > ul.three > li:nth-child(14) > a { border-right: none } nav > ul.three > li:nth-child(11) > a { border-right: 1px solid #455c96 } header.change nav > ul > li > a { background-color: rgba(35,58,118,.96) } nav > ul > li > a:hover, nav > ul > li:hover > a, nav > ul > li.productsLi:hover > a.current, header.change nav > ul > li > a:hover, header.change nav > ul > li:hover > a, header.change nav > ul > li.productsLi:hover > a.current { background-color: rgba(255,255,255,0.96); color: #233a76 } nav > ul > li.wrapLogo > a:hover, header.change nav > ul > li.wrapLogo > a:hover { background-color: rgba(27,31,41,0.9) } nav > ul > li > a.current { cursor: default } nav > ul > li > a.current:after { background-color: #bfd730; bottom: -5px; content: ""; height: 5px; left: 0; position: absolute; width: 100%; z-index: 100; } nav > ul > li.productsLi:hover > a.current:after { display: none } nav > ul > li:first-child > a, nav > ul.three > li:nth-child(2) > a { border-radius: 4px 0 0 0 } nav > ul > li:nth-child(10) > a, nav > ul.three > li:nth-child(14) > a { border-radius: 0 4px 0 0 } nav > ul.three > li:nth-child(11) > a { border-radius: 0 } nav > ul > li > a img { margin-top: 2px; max-width: 178px; transition:all 0.3s ease; } header.change nav > ul > li > a img { max-width: 160px } nav > ul > li > a .svg { fill: #fff; max-height: 32px; margin: 0 0 2px 0; transition:all 0.3s ease; width: 50px } nav > ul > li > a:hover .svg, nav > ul > li:hover > a .svg { fill: #233a76 } header.change nav > ul > li > a .svg { max-height: 24px } nav > ul > li > a.current .svg, nav > ul > li > a.current p { color: #bfd730; fill: #bfd730; } nav > ul > li > a.current:hover .svg, nav > ul > li > a.current:hover p { color: #bfd730; fill: #bfd730; } nav > ul > li > a .number { background-color: #bfd730; border-radius: 50%; color: #242830; font-weight: 600; height: 27px; line-height: 27px; margin: -10px 0 0 28px; position: absolute; width: 27px; } nav > ul > li > a.current .number { background-color: #fff } nav > ul > li > ul { background-color: rgba(255,255,255,0.96); box-shadow: 10px 10px 14px rgba(100,100,100,0.15); border-radius: 0 0 4px 4px; left: 0; min-width: 249px; opacity: 0; position: absolute; top: 98px; transition:all 0.2s ease; visibility: hidden; z-index: 200; } nav > ul > li > ul.right { background-color: rgba(255,255,255,1); box-shadow: -10px 10px 14px rgba(100,100,100,0.15); left: initial; padding: 20px; right: 0; width: 300px; } header.change nav > ul > li > ul { top: 78px } nav > ul > li:hover > ul { opacity: 1; transition-delay: 0s, 0s; visibility: visible; } nav > ul > li > ul > li > a { border-bottom: 1px solid #dddddd; color:#233a76; display: block; font-size: .86em; font-weight: 500; padding: 14px 24px; position: relative; transition:all 0.3s ease; } nav > ul > li > ul > li > a:hover { background-color: #f1f1f1 } nav > ul > li > ul > li:last-child > a { border-bottom: none; border-radius: 0 0 4px 4px; } #cartHover #wrapScroll { height: 192px; margin-top: 10px; } #cartHover .product { border-bottom: 1px solid #ddd; color: #242830; display: block; padding: 10px 0; } #cartHover .product .title { color: #233a76; font-size: .9em; font-weight: 600; margin-bottom: 4px; transition:all 0.3s ease; } #cartHover .product:hover .title { color: #6981c1 } #cartHover .product .descrip { font-size: .8em; margin-top: 4px; } /*#cartHover .product figure { display: grid; justify-items: center; } #cartHover .product figure img { display: block; max-height: 84px; max-width: 100%; }*/ #cartHover .product span { color: #a7bd24; display: block; font-size: .85em; font-weight: 600; } #cartHover .product span em { color: #afafaf; font-style: normal; padding-left: 4px; } #cartHover .total { background-color: #fff; box-shadow: 0 0 16px rgba(100,100,100,0.24); color: #233a76; font-weight: 500; padding: 12px 10px; text-align: center; } #cartHover i { color: #bbcbf1; margin-right: 12px; } #cartHover .finish { background-color: #233a76; border-radius: 4px; color: #fff; display: block; font-size: .9em; font-weight: 600; margin-top: 12px; padding: 9px 16px; text-align: center; text-transform: uppercase; transition:all 0.3s ease; width: 100%; } #cartHover .finish:hover { background-color: #3c579c } @media only screen and (max-width:1710px) { nav > ul { grid-template-columns: 1fr 1fr 1fr 1fr 250px 1fr 1fr 1fr 1fr } } @media only screen and (max-width:1366px) { nav { margin: 0 22px } nav > ul { grid-template-columns: 1fr 1fr 1fr 1fr 196px 1fr 1fr 1fr 1fr } nav > ul.three { grid-template-columns: 1fr 1fr 1fr 1fr 196px 1fr 1fr 1fr 1fr } nav > ul > li > a { font-size: .7em } nav > ul > li > a .svg { max-height: 28px; width: 40px } header nav { margin: 0 20px } header nav > ul > li > a img { max-width: 150px } header.change nav > ul > li > a img { max-width: 136px } } @media only screen and (max-width:1000px) { #navButton, #closeMenu, #homeBtn { display: block } nav { height: auto !important; z-index: 999999 } header.rMenu .backMenu { background-color: rgba(27,31,41,0.6); content: ""; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000 } nav > ul { background-color: rgba(27,31,41,.96); display: block; height:100vh; left:-100%; max-width: 270px; overflow-y: auto; padding:47px 0 60px 0; position:fixed; top:0px; width:80%; z-index:20000 } nav > ul > li > a { background-color: transparent !important; border-right: none !important; border-top: 1px solid #3a3f4d; display: block; color: #fff !important; font-size: .84em !important; height: auto; padding: 14px 16px !important; position: relative; text-align: left !important; width: 100%; } nav > ul > li:nth-child(6) > a { display: none } nav > ul.three > li:nth-child(6) > a { display: block } nav > ul.three > li:nth-child(7) > a { display: none } nav > ul > li > a .svg { max-height: 20px } nav > ul > li > a:hover .svg, nav > ul > li:hover > a .svg { fill: #fff } nav > ul > li > a > div { align-items: center; display: grid; grid-template-columns: 44px auto; grid-column-gap: 6px; } nav > ul > li > a:hover:after, nav > ul > li:hover > a:after { height: 100%; width: 4px; } nav > ul > li > a.current:after { height: 100%; top: 0; width: 4px; } nav > ul > li > ul { background-color: transparent; border-radius: 0; box-shadow: none; display: none; opacity: 1; padding: 0 20px 14px 20px; position: static; visibility: visible; } nav > ul > li.open > ul { display: block } nav > ul > li > ul > li > a { border-bottom: none; color: #a2adb4; font-size: .9em; padding: 10px 0 10px 61px; } nav > ul > li > ul > li > a:before { background-color: #bfd730; content: ""; height: 2px; left: 46px; position: absolute; top: 19px; width: 6px; } nav > ul > li > ul > li > a:hover { background-color: transparent } nav > ul > li > a .number { height: 25px; line-height: 25px; margin: 0px 0 0 114px; text-align: center; width: 25px; } } /* ----------- footer -----------*/ footer { background-color: #1b1f29; padding: 34px 0; } footer .generalWrap { align-items: center; display: grid; grid-template-columns: auto auto auto auto; grid-column-gap: 46px; justify-content: left; } footer p, footer a { color: #fff; font-weight: 500; line-height: 1.3em; padding: 2px 0; transition:all 0.3s ease; } footer a:hover { color: #bfd730 } footer p i, footer a i { color: #bfd730; margin-right: 10px; } footer p svg, footer a svg { fill: #fff; width: 114px; } #social { position: absolute; right: 0; } #social a { color: #fff; font-size: 1.8em; padding: 2px; transition:all 0.3s ease; } #social a:hover { color: #bfd730 } #novaq { background-color: #1b1f29; border-top: 1px solid #2a2f3c; padding: 14px 0; text-align: center; } #novaq a { display: block; position: relative; } #novaq a svg { fill: #898f9d; max-width: 94px; transition:all 0.3s ease; } #novaq a:hover svg { fill: #fff } @media only screen and (max-width:922px) { footer .generalWrap { grid-template-columns: auto auto; grid-row-gap: 10px } } @media only screen and (max-width:700px) { #novaq { padding: 14px 0 56px 0 } } @media only screen and (max-width:580px) { footer .generalWrap { grid-template-columns: auto; justify-content: center; text-align: center } #social { position: relative } } /* ----------- misc -----------*/ .lineH1 { color: #fff; font-size: 1.6em; grid-column: span 2; margin-bottom: 28px; overflow: hidden; position: relative; text-align: center; text-shadow: 0 0 8px rgba(15,19,26,0.6); } .lineH1.prod { margin-left: 332px } .lineH1 span:before, .lineH1 span:after { background-color: #fff; content: ""; height: 1px; opacity: 0.5; position: absolute; width: 50%; width: calc(50% - 18px); } .lineH1 span:before { margin: 18px 0 0 -50% } .lineH1 span:after { margin: 18px 0 0 20px } .lineH1 a { color: #94aae4; margin-right: 12px; transition:all 0.3s ease; } .lineH1 a:hover { color: #b8c8f1 } .imgCover { background-repeat: no-repeat; background-position: center center; background-size:cover; } .embedContainer { height: 100%; margin-bottom: 22px; max-width: 100%; overflow: hidden; position: relative; } .embedContainer.v2 { height: initial; margin-bottom: 0; padding-bottom: 22% } .embedContainer.v3 { height: initial; margin-bottom: 0; padding-bottom: 56.25% } .embedContainer iframe, .embed-container object, .embed-container embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .loading { align-items: center; display: none; left: 0; height: 100%; position: absolute; text-align: center; top: 0; width: 100%; z-index: 1000; } .loading div { background-color: rgba(27,31,41,0.4); border-radius: 50%; margin: 0 auto; padding: 30px; } .loading i { color: #fff; font-size: 4em; } .col50, .col33, .col25 { display: grid; grid-column-gap: 24px; } .col50 { grid-template-columns: repeat(2,1fr) } .col33 { grid-template-columns: repeat(3,1fr) } .col25 { grid-template-columns: repeat(4,1fr) } .span2 { grid-column: span 2 } .marB22 { margin-bottom: 22px } .topBorder { border-top: 1px solid #e7e7e7; padding-top: 22px; } .acenter { text-align: center !important } .aRight { text-align: right !important } .midTxt { font-size: 1.1em !important; margin-bottom: 34px !important; } .wrapPs { background-color: #fff; padding: 32px 34px 0 34px; position: relative; z-index: 200; } .wrapPs.borderR { border-radius: 4px 4px 0 0 } .wrapPs.v2 { padding: 0 34px 12px 34px; } .wrapPs i { color: #6981c0; font-size: 1em; left: 49px; position: absolute; top: 48px; z-index: 20; } .wrapPs.v2 i { top: 16px } .wrapPs a { background-color: #6981c0; border-radius: 3px; color: #fff; display: block; font-size: .8em; font-weight: 600; height: 28px; line-height: 28px; padding: 0 12px; position: absolute; right: 45px; top: 42px; transition:all 0.3s ease; z-index: 20; } .wrapPs a:hover { background-color: #768ece } .wrapPs.v2 a { top: 10px } .productSearch { border: 1px solid #6981c0; font-size: .9em; padding: 12px 100px 16px 40px; position: relative; width: 100%; z-index: 10; } .productSearch:focus + i { color: #bfd730 } .productSearch::-webkit-input-placeholder { color:#5e6a71 } .productSearch::-moz-placeholder { color:#5e6a71; opacity:1 } #chargerInit { color: #bfd730; font-size: 1.8em; margin-top: 4px; text-align: center; } .exportExcel { background-color: rgba(31,35,45,.8); border-radius: 4px; color: #bfd730; display: table; font-size: .8em; font-weight: 600; margin: 0 0 12px auto; padding: 10px 16px; text-transform: uppercase; transition: all 0.3s ease; } .exportExcel i { margin-right: 9px } .exportExcel:hover { background-color: rgba(50,55,68,.85); color: #bfd730; } @media only screen and (max-width:1320px) { .lineH1.prod { margin-left: 298px } } @media only screen and (max-width:1020px) { .embedContainer.v2 { padding-bottom: 42% } } @media only screen and (max-width:980px) { .lineH1.prod { margin-left: 0 } } @media only screen and (max-width:800px) { .wrapPs { padding: 24px 24px 0 24px } .wrapPs i { left: 39px; top: 40px } .wrapPs a { right: 35px; top: 34px } .wrapPs.v2 i { left: 49px } .wrapPs.v2 a { right: 45px } } @media only screen and (max-width:770px) { .embedContainer { padding-bottom: 56.25% } } @media only screen and (max-width:710px) { .embedContainer.v2 { padding-bottom: 60% } } @media only screen and (max-width:550px) { .col50, .col33, .col25 { grid-template-columns: repeat(1,1fr) } .span2 { grid-column: span 1 } } @media only screen and (max-width:540px) { .wrapPs.v2 { padding: 0 22px 12px 22px } .wrapPs.v2 i { left: 39px } .wrapPs.v2 a { right: 35px } } /* ----------- slider -----------*/ #wrapMainB { height: 100vh; position: relative; } #mainBanner > div { display: grid; height: 100vh; position: relative; } #mainBanner .text { align-items: center; color: #fff; display: grid; height: 88%; max-width: 1000px; left: 60%; opacity: 0; position: absolute; text-align: center; transform: translateX(-50%); width: 100%; z-index: 200; } #mainBanner .text .title { font-size: 2.7em; font-weight: 600; text-shadow: 1px 1px 140px rgba(15,19,26,1), 1px 1px 120px rgba(15,19,26,1), 1px 1px 20px rgba(23,27,36,.6); } #mainBanner .text .title:after { background-color: #bfd730; content: ""; display: table; height: 5px; margin: 10px auto 10px auto; position: relative; width: 200px; } #mainBanner .text .small { font-size: 1.2em; font-weight: 500; text-shadow: 1px 1px 140px rgba(15,19,26,1), 1px 1px 120px rgba(15,19,26,1), 1px 1px 20px rgba(23,27,36,.6); } #mainBanner .text a { background-color: #bfd730; border-radius: 4px; color: #242830; display: table; font-size: .8em; font-weight: 600; margin: 14px auto 0 auto; padding: 8px 14px; position: relative; text-transform: uppercase; transition:all 0.3s ease; z-index: 100; } #mainBanner .text a:hover { background-color: #1b1f29; color: #fff; } #mainBanner .linkBox { height: 50%; max-width: 1200px; left: 50%; position: absolute; top: 150px; transform: translateX(-50%); width: 100%; z-index: 200; } #mainBanner .gradient { background: -moz-linear-gradient(top, rgba(23,27,36,0) 20%, rgba(23,27,36,0.86) 100%); background: -webkit-linear-gradient(top, rgba(23,27,36,0) 20%,rgba(23,27,36,0.86) 100%); background: linear-gradient(to bottom, rgba(23,27,36,0) 20%,rgba(23,27,36,0.86) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00171b24', endColorstr='#c2171b24',GradientType=0 ); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 100; } #mainBanner .topGradient { background: -moz-radial-gradient(center, ellipse cover, rgba(23,27,36,0.52) 0%, rgba(23,27,36,0) 68%); background: -webkit-radial-gradient(center, ellipse cover, rgba(23,27,36,0.52) 0%,rgba(23,27,36,0) 68%); background: radial-gradient(ellipse at center, rgba(23,27,36,0.52) 0%,rgba(23,27,36,0) 68%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85171b24', endColorstr='#00171b24',GradientType=1 ); content: ""; height: 730px; margin: -365px -315px 0 0; position: absolute; right: 0; transition:all 0.3s ease; width: 730px; z-index: 1; } #mainBanner.change .topGradient { display: none } #mainBanner .sImage { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; position: relative; transition:all 0.3s ease; width: 100%; } @media only screen and (max-width:1370px) { #mainBanner .text { height: 100%; padding-top: 120px } } @media only screen and (max-width:1000px) { #wrapMainB { height: auto; margin-top: 52px } #mainBanner > div { height: auto } #mainBanner .sImage { padding-bottom: 54% } #mainBanner .text .title { font-size: 2.3em; text-shadow: 1px 1px 10px rgba(23,27,36,.5) } #mainBanner .text .small { font-size: 1em; text-shadow: 1px 1px 10px rgba(23,27,36,.5) } } @media only screen and (max-width:860px) { #mainBanner .text .title { font-size: 1.9em } #mainBanner .text .small { font-size: .9em } } @media only screen and (max-width:650px) { #wrapMainB { background-color: rgba(35,58,118,1) } #mainBanner .text { bottom: 0; height: auto; left: 0; opacity: 1; padding: 18px 20px 24px 20px; transform: initial; } #mainBanner .text a { display: none } } @media only screen and (max-width:600px) { #mainBanner .text .title { font-size: 1.5em } #mainBanner .text .title:after { height: 3px } } /*! lightslider - v1.1.6 - 2016-10-25 * https://github.com/sachinchoolur/lightslider * Copyright (c) 2016 Sachin N; Licensed MIT */ /*! lightslider - v1.1.3 - 2015-04-14 * https://github.com/sachinchoolur/lightslider * Copyright (c) 2015 Sachin N; Licensed MIT */ /** /!!! core css Should not edit !!!/**/ .lSSlideOuter { overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } #mainContent .lSSlideOuter { /* fcc */ border-left: 5px solid #fff; border-right: 5px solid #fff; border-top: 5px solid #fff; border-radius: 80px 0 0 0; } #mainContent.v2 .lSSlideOuter { /* fcc */ border: none; border-radius: 50px 0 50px 0; } #msContent .lSSlideOuter { /* fcc */ margin-bottom: 20px } #microsite .lSSlideOuter { /* fcc */ border-radius: 0 60px 0 0; } @media only screen and (max-width:880px) { #microsite .lSSlideOuter { border-radius: 0 30px 0 0 } } @media only screen and (max-width:600px) { #mainContent .lSSlideOuter { border-left: 3px solid #fff; border-right: 3px solid #fff; border-top: 3px solid #fff; border-radius: 30px 0 0 0; } #mainContent.v2 .lSSlideOuter { border-radius: 30px 0 30px 0 } } .lightSlider:before, .lightSlider:after { content: " "; display: table; } .lightSlider { overflow: hidden; margin: 0; } .lSSlideWrapper { max-width: 100%; overflow: hidden; position: relative; } .lSSlideWrapper > .lightSlider:after { clear: both; } .lSSlideWrapper .lSSlide { -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lSSlideWrapper .lSFade { position: relative; } .lSSlideWrapper .lSFade > * { position: absolute !important; top: 0; left: 0; z-index: 9; margin-right: 0; width: 100%; } .lSSlideWrapper.usingCss .lSFade > * { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } #mainContent .lSSlideWrapper.usingCss .lSFade > *, #msContent .lSSlideWrapper.usingCss .lSFade > * { transition:all 0.6s ease !important } .lSSlideWrapper .lSFade > *.active { z-index: 10; } .lSSlideWrapper.usingCss .lSFade > *.active { opacity: 1; } /** /!!! End of core css Should not edit !!!/**/ /* Pager */ .lSSlideOuter .lSPager.lSpg { bottom: 14px; margin: 10px 0 0; padding: 0; position: absolute; right: 14px; text-align: center; z-index: 200 } .lSSlideOuter .lSPager.lSpg > li { cursor: pointer; display: inline-block; padding: 0 6px; } .lSSlideOuter .lSPager.lSpg > li a { background-color: rgba(255,255,255,0.4); border-radius: 30px; box-shadow: 0 0 1px 2px rgba(30,40,45,1); display: inline-block; height: 12px; overflow: hidden; text-indent: -999em; width: 12px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { background-color: #eb3e2e; } .lSSlideOuter .media { opacity: 0.8; } .lSSlideOuter .media.active { opacity: 1; } /* End of pager */ /** Gallery */ .lSSlideOuter .lSPager.lSGallery { list-style: none outside none; padding-left: 0; margin: 0; overflow: hidden; transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lSSlideOuter .lSPager.lSGallery li { overflow: hidden; -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; transition: border-radius 0.12s linear 0s 0.35s linear 0s; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { border-radius: 5px; } .lSSlideOuter .lSPager.lSGallery img { display: block; height: auto; max-width: 100%; } .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { content: " "; display: table; } .lSSlideOuter .lSPager.lSGallery:after { clear: both } /* End of Gallery*/ /* slider actions */ .lSAction > a { background-color: rgba(14,23,27,0.6); border:1px solid rgba(255,255,255,0.3); border-radius: 50%; color: #bfd730; cursor: pointer; font-size: 1.74em; display: block; height: 50px; line-height: 1.64em; margin-top: -19px; opacity: 0.9; position: absolute; text-align: center; transition:all 0.3s ease; top: 50%; width: 50px; z-index: 99; } .lSAction > a:hover { background-color: rgba(14,23,27,0.8); color: rgba(255,255,255,0.95); } .lSAction > .lSPrev { left: 28px; outline: none; } .lSAction > .lSNext { outline: none; right: 28px; } .lSAction > .lSPrev i { padding-right: 2px } .lSAction > .lSNext i { padding-left: 2px } .lSAction > a.disabled { pointer-events: none } .cS-hidden { height: 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } @media only screen and (max-width:700px) { .lSAction > a { font-size: 1.2em; height: 30px; line-height: initial; margin-top: -14px; width: 30px } .lSAction > a i { line-height: 1.6em } } /* vertical */ .lSSlideOuter.vertical { position: relative; } .lSSlideOuter.vertical.noPager { padding-right: 0px !important; } .lSSlideOuter.vertical .lSGallery { position: absolute !important; right: 0; top: 0; } .lSSlideOuter.vertical .lightSlider > * { width: 100% !important; max-width: none !important; } /* vertical controlls */ .lSSlideOuter.vertical .lSAction > a { left: 50%; margin-left: -14px; margin-top: 0; } .lSSlideOuter.vertical .lSAction > .lSNext { background-position: 31px -31px; bottom: 10px; top: auto; } .lSSlideOuter.vertical .lSAction > .lSPrev { background-position: 0 -31px; bottom: auto; top: 10px; } /* vertical */ /* Rtl */ .lSSlideOuter.lSrtl { direction: rtl } .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager { padding-left: 0; list-style: none outside none; } .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager { padding-right: 0 } .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li { float: left } .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li { float: right !important } /* Rtl */ @-webkit-keyframes rightEnd { 0% { left: 0 } 50% { left: -15px } 100% { left: 0 } } @keyframes rightEnd { 0% { left: 0 } 50% { left: -15px } 100% { left: 0 } } @-webkit-keyframes topEnd { 0% { top: 0 } 50% { top: -15px } 100% { top: 0 } } @keyframes topEnd { 0% { top: 0 } 50% { top: -15px } 100% { top: 0 } } @-webkit-keyframes leftEnd { 0% { left: 0 } 50% { left: 15px } 100% { left: 0 } } @keyframes leftEnd { 0% { left: 0 } 50% { left: 15px } 100% { left: 0 } } @-webkit-keyframes bottomEnd { 0% { bottom: 0 } 50% { bottom: -15px } 100% { bottom: 0 } } @keyframes bottomEnd { 0% { bottom: 0 } 50% { bottom: -15px } 100% { bottom: 0 } } .lSSlideOuter .rightEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } .lSSlideOuter .leftEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.vertical .rightEnd { -webkit-animation: topEnd 0.3s; animation: topEnd 0.3s; position: relative; } .lSSlideOuter.vertical .leftEnd { -webkit-animation: bottomEnd 0.3s; animation: bottomEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .rightEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .leftEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } /*/ GRab cursor */ .lightSlider.lsGrab > * { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lightSlider.lsGrabbing > * { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } @media only screen and (max-width:560px) { .lSSlideOuter .lSPager.lSpg { display: none } } /* ----------- Paginator -----------*/ .paginatorPage { margin-top: 20px; text-align: center; } .paginatorPage a { background-color: #fff; border-radius: 4px; color: #515151; display: inline-block; font-size: .9em; height: 32px; line-height: 30px; margin-bottom: 6px; margin-right: 4px; text-align: center; transition:all 0.3s ease; width: 34px; } .paginatorPage a:hover { background-color: #f4f4f4; } .paginatorPage .active a { background-color: #233a76; color: #fff; font-weight: 600; } /* ----------- Magnific -----------*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 200000; overflow: hidden; position: fixed; background-color: #1b1f29; opacity: 0.58; filter: alpha(opacity=58); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 200002; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { background-color: transparent; overflow: visible; cursor: pointer; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0 } .mfp-close { cursor: pointer; font-size: 13px; height: 34px; line-height: 33px !important; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; width: 34px; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close-btn-in .mfp-close { color: #a8b1b6 } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; text-shadow: 0 0 10px rgba(0,0,0,0.9); width: 100%; } .mfp-counter { color: #334b98; font-size: 12px; position: absolute; top: 7px; right: 10px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 14px rgba(41, 41, 41, 0.4); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0 } .mfp-bottom-bar { margin-top: -40px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { color: #fff; font-size: 13px; font-weight: 400; min-height: 34px; text-align: left; line-height: 18px; word-wrap: break-word; padding: 8px 36px 10px 14px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 16px; padding-right: 16px; } } /* ----------- modalBox -----------*/ .modalBox { background: #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(64,64,64,0.2); margin: 26px auto; max-width: 900px; position: relative; } .modalBox.v2 { max-width: 500px } .modalBox.v3 { max-width: 700px } .modalBox.v4 { max-width: 800px } .modalBox h1 { color: #233a76; font-size: 1.5em; font-weight: 500; text-align: center; } .modalBox .aloneImg img { display: block; width: 100%; } .modalBox .mailto { color: #233a76; font-size: 1.1em; font-weight: 500; margin-bottom: 18px; } .modalBox .mailto a { color: #a7bd24; font-size: 1.3em; margin-right: 12px; position: relative; top: 2px; transition:all 0.3s ease; } .modalBox .mailto a:hover { color: #6981c0 } .modalBox .success { color: #a7bd24; font-size: 1em; font-weight: 600; padding-top: 20px; text-align: center; } .modalBox .success i { margin-right: 6px } .modalBox .formPad { padding: 34px 38px; } .modalBox .formPad h1 { margin-bottom: 14px } .modalBox .formPad p { line-height: 1.4em; margin-bottom: 18px; } .modalBox label { color: #879197; display: block; font-size: .84em; font-weight: 600; margin-bottom: 6px; } .modalBox input[type="text"], .modalBox textarea { border: 1px solid #d6d6d6; color: #2a363d; font-size: .9em; margin: 0 0 18px 0; outline:0; padding: 8px 10px; width:100%; } .modalBox input[type="text"]:focus, .modalBox textarea:focus { border-color: #6981c0 } .modalBox input[type="text"].error, .modalBox textarea.error { background-color: #fff1f0; border: 1px solid #d8aba6; } .modalBox .captchaTxt { background-repeat: no-repeat; background-size: contain; background-position: right top; } .modalBox input[type="text"].requiredField, .modalBox textarea.requiredField { background-color: #fff4f3; border-color: #ffa39a; } .modalBox input[type="submit"] { background-color: #233a76; border-radius: 4px; color: #fff; display:block; font-weight: 600; padding: 8px 30px; text-transform: uppercase; transition: all 0.4s ease; width: 100%; } .modalBox input[type="submit"]:hover, .modalBox input[type="submit"]:hover:focus { background-color:#3c579c; } .modalBox .wrapNomore { padding: 10px; } .modalBox .noMore { border: 1px solid #233a76; border-radius: 4px; color: #233a76; display: table; font-weight: 600; margin: auto; padding: 8px 30px; transition: all 0.4s ease; } .modalBox .noMore:hover { border-color: #395baf; color: #395baf; } .modalBox #noMore i { margin-right: 8px; } /* ----------- distributorDetail -----------*/ #distributorDetail { display: grid; grid-template-columns: auto 42%; } #distributorDetail.oneCol { grid-template-columns: 100% } #distributorDetail .info { padding: 26px 38px } #distributorDetail .info.v2 { padding: 0 } #distributorDetail .type { color: #879197; display: block; font-size: .8em; font-weight: 500; margin-bottom: 16px; position: relative; text-transform: uppercase; } #distributorDetail .info > .detail > p { font-size: .96em; line-height: 1.5em; padding: 1px 0 1px 30px; position: relative; word-wrap: break-word; word-break: break-word; } #distributorDetail .info > .detail > p i { color: #6981c0; left: 0; position: absolute; top: 5px; } #distributorDetail .info > .detail > p a { color: #6981c0 } #distributorDetail .info > .detail > p a:hover { text-decoration: underline } #distributorDetail .info > .detail > hr { margin: 12px 0 } #distributorDetail .waze { display: none } #distributorDetail .waze svg { fill: #6981c0; height: 44px; } #distributorDetail .authorized { color: #a7bd24; font-size: 1.3em; position: absolute; right: 38px; top: 26px; } .dSlider { margin-bottom: 20px !important } .dSlider img { border-radius: 4px } @media only screen and (max-width:770px) { #distributorDetail { grid-template-columns: 100% } #distributorDetail :nth-child(1) { grid-row: 2 } #distributorDetail.oneCol :nth-child(1) { grid-row: 1 } } @media only screen and (max-width:680px) { #distributorDetail .waze { display: block } } /* ----------- adviserBtn -----------*/ #adviserBtn { align-items: center; background-color: #bfd730; border-radius: 4px 4px 0 0; bottom: 0; color: #242830; display: grid; font-size: .94em; font-weight: 600; grid-template-columns: repeat(2,auto); padding: 10px 16px 10px 15px; position: fixed; right: 74px; transition:all 0.3s ease; z-index: 5000; } #adviserBtn:hover { background-color: #12161e; color: #bfd730; } #adviserBtn p { line-height: 1.1em } #adviserBtn i { font-size: 1.4em; margin-right: 9px; } /* ----------- cdtop -----------*/ .cdTop { background-color: #fff; border-radius: 4px 4px 0 0; bottom: 0; box-shadow: 0 0 20px rgba(27,31,41,0.2); color: #233a76; font-size: 1.5em; height: 40px; line-height: 38px; opacity: 0; position: fixed; right: 20px; text-align: center; transition: opacity .3s 0s, visibility 0s .3s; visibility: hidden; width: 40px; z-index: 9988; } .cdTop:hover { color: #a1b720 } .cdTop.cd-is-visible, .cdTop.cd-fade-out, .no-touch .cdTop:hover { transition: opacity .3s 0s, visibility 0s 0s } .cdTop.cd-is-visible { visibility: visible; opacity: 1; } .no-touch .cdTop:hover { color: #a1b720; opacity: 1; } /* ----------- holi -----------*/ #holi { background-image: url(../img/chainsaw.gif); background-size: cover; bottom: 0px; height: 159px; left: 0; position: fixed; transform: rotate(-35deg); width: 500px; z-index: 40000; animation-name: aniHoli; animation-duration: 4.2s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes aniHoli { 0% { bottom: -300px } 30% { bottom: 0px; left: 0 } 100% { left: 104% } } /* ----------- mainServices -----------*/ #wrapMainS { bottom: 36px; margin: auto; left: 0; position: absolute; width: 100%; z-index: 100; } .generalWrap.serv { background-color: red; border-bottom: 4px solid red; } #wrapMainS h1 { color: #fff; font-size: 1.6em; margin-bottom: 26px; text-align: center; } #wrapMainS h1 span:before, #wrapMainS h1 span:after { background-color: #fff; content: ""; height: 1px; opacity: 0.5; position: absolute; width: calc(50% - 18px); } #wrapMainS h1 span:before { margin: 18px 0 0 -50% } #wrapMainS h1 span:after { margin: 18px 0 0 20px; width: calc(39% - 70px) } #wrapMainS #arrows { display: grid; grid-template-columns: repeat(2,1fr); position: absolute; right: 0; top: 0; } #wrapMainS #arrows a { color: #fff; display: block; font-size: 1.74em; padding: 0 10px; transition:all 0.3s ease; } #wrapMainS #arrows a:hover { color: #bfd730 } .wrapServ { margin: auto; max-width: 1280px; overflow: hidden; position: relative; } #mainServices a { color: #fff; font-weight: 600; position: relative; text-align: center; transition:all 0.3s ease; } #mainServices a:hover { color: #f1f1f1 } #mainServices a figure { background-color: rgba(27,31,41,0.5); background-size: cover; background-position: center center; border-bottom: 8px solid #bfd730; border-radius: 4px 4px 0 0; padding-bottom: 46%; position: relative; transition:all 0.3s ease; } #mainServices a:hover figure { border-bottom-color: #233a76; filter: brightness(1.24); } #mainServices a p { padding-top: 10px } @media only screen and (max-width:1370px) { #wrapMainS { background-color: #1b1f29; bottom: 0; padding: 30px 40px; position: relative; } } @media only screen and (max-width:1200px) { #wrapMainS h1 span:after { width: calc(37% - 70px) } } @media only screen and (max-width:1070px) { #wrapMainS h1 span:after { width: calc(34% - 70px) } } @media only screen and (max-width:890px) { #wrapMainS h1 span:after { width: calc(31% - 70px) } } @media only screen and (max-width:770px) { #wrapMainS h1 span:after { width: calc(100% - 18px) } #wrapMainS #arrows a { display: none } } /* ----------- indexProducts -----------*/ .wrapProducts { padding: 80px 0 } .wrapProducts h1 { color: #233a76; font-size: 1.6em; margin-bottom: 30px; overflow: hidden; position: relative; text-align: center; } .wrapProducts h1 span:before, .wrapProducts h1 span:after { background-color: #c3c3c3; content: ""; height: 1px; position: absolute; width: 50%; } .wrapProducts h1 span:before { margin: 18px 0 0 -51.5% } .wrapProducts h1 span:after { margin: 18px 0 0 20px } #indexProducts { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 52px 32px; } #indexProducts a { background-color: #fff; border-radius: 4px; box-shadow: 0 0 30px rgba(100,100,100,.2); color: #5e6a71; font-weight: 600; overflow: hidden; position: relative; text-align: center; } #indexProducts a figure { background-color: #cbcbcb; background-size: cover; background-position: center center; padding-bottom: 58%; transition:all 0.3s ease; } #indexProducts a:hover figure { filter: brightness(1.24); transform: scale(1.08); } #indexProducts a p { border-top: 8px solid #bfd730; padding: 10px 18px 12px 18px; position: relative; transition:all 0.3s ease; } #indexProducts a:hover p { border-top-color: #233a76; color: #233a76; } @media only screen and (max-width:1370px) { .wrapProducts { padding: 64px 0 80px 0 } } @media only screen and (max-width:1058px) { #indexProducts { grid-template-columns: repeat(2, 1fr) } } @media only screen and (max-width:540px) { #indexProducts { grid-gap: 22px } #indexProducts a figure { padding-bottom: 60% } #indexProducts a p { font-size: .9em } } /* ----------- distributorBanner -----------*/ #distributorBanner { align-items: center; background-color: #233a76; color: #fff; display: grid; min-height: 324px; overflow: hidden; position: relative; text-align: center; transition:all 0.3s ease; } #distributorBanner:before { background-image: url(../img/crMap.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; content: ""; height: 100%; left: 0; position: absolute; transition:all 0.3s ease; top: 0; width: 100%; z-index: 100; } #distributorBanner:hover:before { transform: scale(1.06) } #distributorBanner div { position: relative; z-index: 100; } #distributorBanner:hover div { margin-top: -10px } #distributorBanner:after { background-color: #3c5eb7; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition:all 0.3s ease; width: 100%; } #distributorBanner:hover:after { opacity: 0.2 } #distributorBanner svg { height: 120px; transition:all 0.3s ease; } #distributorBanner:hover svg { height: 100px } #distributorBanner svg .circle { transition:all 0.3s ease } #distributorBanner:hover svg .circle { fill: #fff; opacity: 0.3 } #distributorBanner p { font-size: 1.6em; font-weight: 500; padding-top: 6px; text-shadow: 0 0 16px rgba(27,31,41,0.5); } @media only screen and (max-width:1136px) { #distributorBanner { min-height: 224px } #distributorBanner svg { height: 80px } #distributorBanner p { font-size: 1.3em } } @media only screen and (max-width:400px) { #distributorBanner { min-height: 180px } #distributorBanner svg { height: 70px } } /* ----------- internalBanner -----------*/ #internalBanner { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 416px; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } #internalBanner:after { background: -moz-linear-gradient(top, rgba(23,27,36,0) 20%, rgba(23,27,36,0.86) 100%); background: -webkit-linear-gradient(top, rgba(23,27,36,0) 20%,rgba(23,27,36,0.86) 100%); background: linear-gradient(to bottom, rgba(23,27,36,0) 20%,rgba(23,27,36,0.86) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00171b24', endColorstr='#c2171b24',GradientType=0 ); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } #internalBanner .radial { background: -moz-radial-gradient(center, ellipse cover, rgba(23,27,36,0.52) 0%, rgba(23,27,36,0) 68%); background: -webkit-radial-gradient(center, ellipse cover, rgba(23,27,36,0.52) 0%,rgba(23,27,36,0) 68%); background: radial-gradient(ellipse at center, rgba(23,27,36,0.52) 0%,rgba(23,27,36,0) 68%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85171b24', endColorstr='#00171b24',GradientType=1 ); content: ""; height: 730px; margin: -365px -300px 0 0; position: absolute; right: 0; transition:all 0.3s ease; width: 730px; z-index: 1; } @media only screen and (max-width:980px) { #internalBanner { height: 330px } #internalBanner.v2 { height: 260px } } /* ----------- productsLayout -----------*/ .productsLayout { align-items: start; display: grid; grid-template-columns: 280px auto; grid-column-gap: 52px; margin: 217px auto 106px auto; } .productsLayout.assessor { display: block } @media only screen and (max-width:1320px) { .productsLayout { grid-template-columns: 260px auto; grid-column-gap: 38px; margin: 217px 20px 106px 20px; } } @media only screen and (max-width:1000px) { .productsLayout { margin: 100px 20px 40px 20px } } @media only screen and (max-width:980px) { .productsLayout { grid-template-columns: auto } .productsLayout h1 { grid-column: span 1 } } /* ----------- whiteBox -----------*/ .whiteBox { background-color: #fff; border-radius: 4px; box-shadow: 1px 1px 30px rgba(100,100,100,.2); min-height: 310px; padding: 32px 34px; position: relative; } .whiteBox.top { border-radius: 0 0 4px 4px } .whiteBox.noPad { padding: 0 0 32px 0 } .whiteBox h2 { color: #233a76; font-size: 1.6em; font-weight: 500; text-align: center; } @media only screen and (max-width:800px) { .whiteBox { min-height: auto; padding: 22px 24px } } @media only screen and (max-width:540px) { .whiteBox.noPad { padding: 0 0 18px 0 } } /* ----------- detailLayout -----------*/ .pName { background: -moz-linear-gradient(top, rgba(255,255,255,0) 31%, rgba(242,242,242,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 31%,rgba(242,242,242,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 31%,rgba(242,242,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=0 ); position: relative; text-align: center; z-index: 100; } .detailLayout { display: grid; grid-template-columns: 50% auto; grid-column-gap: 38px; } .detailLayout .mainImg { border: 1px solid #ddd; margin-bottom: 36px; margin-top: 13px; position: relative; } .detailLayout .mainImg .promo { background-color: #bfd730; border-radius: 4px; color: #242830; font-size: .76em; font-weight: 600; left: 10px; padding: 4px 8px; position: absolute; text-transform: uppercase; top: 10px; z-index: 100; } .detailLayout #image.videoShow:before { color: rgba(255,255,255,0.85); content: "\f144"; font-family: "Font Awesome 5 Free"; font-size: 46px; font-weight: 400; height: 52px; line-height: 50px; position: absolute; text-align: center; text-shadow: 0 0 18px rgba(60,60,60,0.5); width: 52px; z-index: 200; } .detailLayout #image { align-items: center; border:20px solid #fff; display: grid; height: 100%; position: relative; justify-items:center; } .detailLayout .mainImg img { max-height: 100%; max-width: 100%; transition:all 0.3s ease; } .detailLayout .mainImg .videoShow img { max-height: initial; max-width: initial; width: 100%; } .detailLayout .mainImg img:hover { opacity: 0.85 } .imgGrid { display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 0; margin-top: 24px; position: relative; } .imgGrid .gTitle { color: #8a8a8a; font-size: .74em; font-weight: 600; position: absolute; text-transform: uppercase; top: -22px; } .imgGrid a { background-position: center center; background-repeat: no-repeat; background-size: contain; border:14px solid transparent; margin-left: -1px; margin-bottom: -1px; outline: 1px solid #ddd; outline-offset: -1px; padding-bottom: 52%; position: relative; transition:all 0.3s ease; } .imgGrid a:hover { outline: 1px solid #c1c1c1; z-index: 100; } .imgGrid a.current { background-color: #f7f7f7; background-blend-mode: multiply; outline: 1px solid #b1b1b1; position: relative; z-index: 110; } .tabContent { display: none; margin: 0 34px; min-height: 460px; position: relative; z-index: 100; } .tabContent.current { display: grid } #detailLayout h2 { font-size: 2.2em; line-height: 1.3em; padding: 23px 124px 0 124px; } #detailLayout .brand { color: #5e6a71; font-size: .8em; font-weight: 500; margin-bottom: 14px; text-transform: uppercase; } .textProduct { margin-top: 8px } .textProduct p { line-height: 1.4em; margin-bottom: 18px; word-wrap: break-word; word-break: break-word; } .textProduct p:last-of-type { margin-bottom: 0 } .textProduct p a { color: #6981c0; } .textProduct > ul, .textProduct > ol { margin: 18px 0 12px 0 } .textProduct > ol { counter-reset: myCounter } .textProduct > ul > li, .textProduct > ol > li { line-height: 1.4em; padding: 0 0 12px 18px; position: relative; } .textProduct > ol > li { counter-increment: myCounter; list-style: none; padding: 0 0 12px 32px; } .textProduct > ul > li:before { background-color: #233a76; border-radius: 50%; content: ""; height: 8px; left: 0; position: absolute; top: 7px; width: 8px; } .textProduct > ol > li:before { content: counter(myCounter)"."; font-weight: 500; left: 0; position: absolute; text-align: right; top: 0px; width: 22px; } .textProduct .price { color: #a7bd24; font-size: 1.3em; font-weight: 600; line-height: 1.3em; margin-bottom: 18px; } .textProduct .pTitle { color: #8a8a8a; display: block; font-size: .58em; line-height: 1em; padding-bottom: 3px; text-transform: uppercase; } .textProduct .stock { display: block; font-size: .74em; font-weight: 500; line-height: 1em; padding-bottom: 8px; text-transform: uppercase; } .textProduct .oldPrice { color: #8a8a8a; display: block; font-size: .8em; font-weight: 500; line-height: 1.4em; padding-top: 2px; text-decoration: line-through; } .textProduct .agency { color: #6981c1; display: block; font-size: .8em; font-weight: 500; padding: 2px 0 2px 0; } .textProduct .agency em { background-color: #6981c1; border-radius: 3px; color: #fff; font-size: .82em; font-style: normal; margin-right: 4px; padding: 4px 8px; } .textProduct .legend { font-size: .64em; } .textProduct .notInclude { color: #8a8a8a; font-size: .8em; line-height: 1.15em; margin-bottom: 2px; position: relative; top: -15px; } .textProduct table { margin-bottom: 18px; width: 100% } .textProduct table + h3 { margin: 0 0 8px 0 } .textProduct table td { background-color: #fff; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; font-size: .9em; padding: 10px 0; vertical-align: top; white-space: normal; } .textProduct table td:first-of-type { padding-right: 14px; white-space: nowrap; } .textProduct table tr:last-of-type td { border-bottom: none } .textProduct .addCart { background-color: #233a76; border-radius: 4px; color: #fff; display: inline-block; font-size: .8em; font-weight: 600; padding: 10px 16px; text-shadow: 0 0 2px rgba(50,50,50,0.2); text-transform: uppercase; transition:all 0.3s ease; } .textProduct .addCart:hover { background-color: #6981c0 } .textProduct .addCart.grey { background-color: #5e6a71; margin: 10px 0 0 4px; } .textProduct .addCart.grey:hover { background-color: #737d83 } .textProduct .addCart i { margin-right: 8px } .textProduct h3 { border-top: 1px solid #ddd; color: #5e6a71; font-size: 1em; font-weight: 600; margin: 30px 0 8px 0; padding-top: 27px; text-transform: uppercase; } .textProduct .quantity { align-items: center; border:1px solid #ddd; cursor: pointer; display: grid; grid-template-columns: 22px auto 22px; max-width: 104px; justify-content: start; padding: 6px 10px; text-align: center; } .textProduct .quantity em { color: #b5bcc1; font-size: .8em; transition:all 0.3s ease; } .textProduct .quantity em:hover { color: #6f818e } .textProduct .quantity input[type="text"] { border:none; color: #6981c0; font-weight: 600; margin-bottom: 0; padding: 0; text-align: center; width: 40px; } .textProduct h3 i { margin-right: 8px } .downloads a { color: #5e6a71; display: block; font-size: .94em; font-weight: 500; padding: 2px 0 2px 38px; position: relative; } .downloads a:hover { text-decoration: underline } .downloads a:before { background-color: #a6b1b7; content: ""; height: 2px; left: 24px; position: absolute; top: 11px; width: 7px; } #pTabs { border-bottom: 1px solid #ddd; margin: 24px 0; } #pTabs a { border-left: 1px solid transparent; border-radius: 4px 4px 0 0; border-right: 1px solid transparent; border-top: 1px solid transparent; color: #879197; display: inline-block; font-size: .8em; font-weight: 600; padding: 12px 18px; position: relative; text-transform: uppercase; top: 1px; transition:all 0.3s ease; } #pTabs a:hover { color: #6981c0 } #pTabs a .short { display: none } #pTabs a.current { background-color: #fff; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #ddd; color: #6981c0; font-weight: 600; } #shareTools { display: grid; grid-template-columns: repeat(1,1fr); position: absolute; right: 34px; top: 28px; } #shareTools a { border: 1px solid #ddd; color: #a0adb5; display: block; height: 34px; line-height: 1.92em; margin-right: -1px; text-align: center; transition:all 0.3s ease; width: 34px; } #shareTools a:hover { color: #233a76 } .specifications { align-content: start; display: grid; grid-template-columns: auto auto; grid-column: span 2; } .specifications p { border-top: 1px solid #ddd; font-size: .9em; padding: 11px 0; } .specifications p:nth-child(1), .specifications p:nth-child(2) { border-top: none } .specifications p:nth-child(odd) { padding-right: 14px } @media only screen and (max-width:1110px) { .detailLayout { grid-template-columns: 42% auto; grid-column-gap: 36px } } @media only screen and (max-width:980px) { .tabContent { min-height: auto } } @media only screen and (max-width:860px) { #detailLayout h2 { font-size: 1.9em } } @media only screen and (max-width:700px) { .detailLayout { grid-template-columns: auto } .imgGrid { margin-top: 32px } .textProduct { margin-top: 14px } #detailLayout h2 { padding: 23px 24px 0 24px } #shareTools { grid-template-columns: repeat(2,auto); justify-content: end; position: relative; right: initial; top: initial; } } @media only screen and (max-width:540px) { .tabContent { margin: 0 22px } } @media only screen and (max-width:490px) { #pTabs a { font-size: .76em; margin-right: -4px; padding: 9px 14px } #pTabs a .short { display: block } #pTabs a .long { display: none } } @media only screen and (max-width:390px) { .textProduct .quantity { margin-bottom: 14px } } /* ----------- kitsBox -----------*/ #kitsBox { background-color: #f6f6f6; border-radius: 4px; margin: 18px 0 8px 0; padding: 14px 18px; } #kitsBox .title { color: #6981c0; font-size: .82em; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; } #kitsBox .row { align-items: center; display: grid; font-size: .84em; grid-gap: 10px 20px; grid-template-columns: repeat(3,auto); justify-content: start; padding: 6px 0; } #kitsBox .row label { cursor: pointer; padding: 0 0 0 25px; position: relative; } #kitsBox .row label input { left: 0; position: absolute; top: 1px; } #kitsBox .row .pr { color: #a7bd24; font-weight: 600; } #kitsBox .row .pr em { color: #8a8a8a; font-style: normal; font-weight: 500; font-size: .9em; margin: 0 5px 2px 0; text-decoration: line-through; } #kitsBox .row .pr i { font-size: .7em; position: relative; top: -2px; } #kitsBox .row a { color: #8a8a8a; font-size: .9em; font-weight: 600; text-transform: uppercase; transition:all 0.3s ease; } #kitsBox .row a:hover { color: #6981c1; } @media only screen and (max-width:520px) { #kitsBox .row { grid-gap: 0; grid-template-columns: repeat(1,1fr) } #kitsBox .row .pr { padding: 4px 0 4px 25px } #kitsBox .row a { padding: 4px 0 20px 25px } #kitsBox .row a:last-of-type { padding: 4px 0 0 25px } } @media only screen and (max-width:430px) { #kitsBox { margin: 18px 0 18px 0 } } /* ----------- accessories -----------*/ .accessoriesBox { align-content: start; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 40px 16px; padding-top: 10px; } .accessoriesBox a { font-size: .9em; font-weight: 500; text-align: center; } .accessoriesBox a:not([href]) { cursor: default } .accessoriesBox a p { margin-top: 7px } .accessoriesBox a figure { background-position: center center; background-repeat: no-repeat; background-size: contain; padding-bottom: 50%; } #wrapAccesories { border-top: 1px solid #ddd; grid-column: span 2; margin-top: 40px; padding-top: 32px; } #wrapAccesories .accessoriesBox { grid-gap: 40px 0 } #wrapAccesories .title { color: #6981c0; font-weight: 600; padding-bottom: 16px; text-align: center; } #wrapAccesories .accessoriesBox a { border-right: 1px solid #ddd; color: #242830; padding: 10px 0; transition:all 0.3s ease; } #wrapAccesories .accessoriesBox a:hover { background-color: #f7f7f7; color: #233a76; } #wrapAccesories .accessoriesBox a:last-child { border-right: none } #wrapAccesories .accessoriesBox a figure { background-blend-mode: multiply; border-left: 30px solid transparent; border-right: 30px solid transparent; transition:all 0.3s ease; } #wrapAccesories .accessoriesBox a:hover figure { background-color: #f7f7f7; } @media only screen and (max-width:776px) { .accessoriesBox { grid-template-columns: repeat(3,1fr) } } @media only screen and (max-width:700px) { #wrapAccesories { grid-column: span 1; margin-top: 28px; padding-top: 26px } #wrapAccesories .title { padding-bottom: 0 } } @media only screen and (max-width:660px) { .accessoriesBox { grid-template-columns: repeat(2,1fr) } } @media only screen and (max-width:450px) { .accessoriesBox { grid-template-columns: repeat(1,1fr) } #wrapAccesories .accessoriesBox a { border-right: none } } /* ----------- internalCats -----------*/ #catBanner { background-size: cover; background-position: center center; border-radius: 4px 4px 0 0; box-shadow: 0 0 30px rgba(100,100,100,.2); overflow: hidden; padding-bottom: 36%; position: relative; z-index: 100; } #catBanner:after { background: -moz-linear-gradient(top, rgba(23,27,36,0) 1%, rgba(23,27,36,0.86) 100%); background: -webkit-linear-gradient(top, rgba(23,27,36,0) 1%,rgba(23,27,36,0.86) 100%); background: linear-gradient(to bottom, rgba(23,27,36,0) 1%,rgba(23,27,36,0.86) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00171b24', endColorstr='#c2171b24',GradientType=0 ); bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } #catBanner > div { bottom: 0; color: #fff; padding: 0 30px 26px 30px; position: absolute; width: 100%; z-index: 100; } #catBanner > div .title { color: #bfd730; font-size: 1.6em; font-weight: 600; text-transform: uppercase; } #catBanner > div p.descrip { font-weight: 500; margin-top: 7px; } @media only screen and (max-width:820px) { #catBanner { padding-bottom: 42% } } @media only screen and (max-width:680px) { #catBanner { padding-bottom: 58% } } @media only screen and (max-width:540px) { #catBanner { padding-bottom: 68% } #catBanner > div p.descrip { font-size: .9em; font-weight: 400 } } @media only screen and (max-width:470px) { #catBanner { padding-bottom: 80% } } @media only screen and (max-width:380px) { #catBanner { padding-bottom: 86% } } h2.banner { background: -moz-linear-gradient(top, rgba(255,255,255,1) 31%, rgba(242,242,242,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 31%,rgba(242,242,242,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 31%,rgba(242,242,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=0 ); border-radius: 4px 4px 0 0; color: #233a76; font-size: 1.6em; font-weight: 500; margin-bottom: 0; padding: 20px; position: relative; text-align: center; text-shadow: none; z-index: 10; } h2.banner a { color: #94aae4; margin-right: 12px; position: relative; top: -1px; transition:all 0.3s ease; } h2.banner a:hover { color: #b5bbbf } #internalCats { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; } #internalCats a { border-radius: 4px 4px 0 0; color: #5e6a71; font-size: .94em; font-weight: 600; overflow: hidden; position: relative; text-align: center; } #internalCats a figure { background-color: #cbcbcb; background-size: cover; background-position: center center; padding-bottom: 66%; transition:all 0.3s ease; } #internalCats a:hover figure { filter: brightness(1.24); transform: scale(1.08); } #internalCats a p { background-color: #fff; border-radius: 0 0 4px 4px; border-top: 8px solid #bfd730; padding: 10px 18px 12px 18px; position: relative; transition:all 0.3s ease; } #internalCats a:hover p { border-top-color: #233a76; color: #233a76; } @media only screen and (max-width:1178px) { #internalCats { grid-template-columns: repeat(2, 1fr) } } @media only screen and (max-width:800px) { h2.banner { font-size: 1.3em; padding: 15px 18px } } @media only screen and (max-width:540px) { #internalCats { grid-gap: 22px } #internalCats a { font-size: .9em } #internalCats a p { padding: 8px 0 0 0 } #internalCats a figure { padding-bottom: 70% } } /* ----------- assessorCats -----------*/ #assessorCats { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 32px; } #assessorCats.notBreadcrumb { margin-top: 46px } #assessorCats a { border-radius: 4px 4px 0 0; color: #5e6a71; font-size: .94em; font-weight: 500; overflow: hidden; text-align: center; } #assessorCats a:hover { color: #233a76 } #assessorCats a figure { background-color: #cbcbcb; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 70%; transition:all 0.3s ease; } #assessorCats a:hover figure { filter: brightness(1.24); transform: scale(1.08); } #assessorCats a p { background-color: #fff; border-top: 8px solid #bfd730; padding: 8px 0 0 0; position: relative; transition:all 0.3s ease; } #assessorCats a:hover p { border-top-color: #233a76; } .asTitle { background-color: #bfd730; border-radius: 4px 4px 0 0; color: #242830; font-size: 1em; font-weight: 500; margin-bottom: 32px; left: 0; padding: 14px 20px; position: absolute; text-align: center; top: 0; width: 100%; } .wrapAsResults { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: 20px; } .asResults { background-color: #233a76; border-radius: 4px; color: #fff; display: table; font-size: .8em; font-weight: 600; margin: auto; padding: 10px 18px; text-transform: uppercase; } .asSelection { align-items: center; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; display: grid; grid-template-columns: repeat(4,1fr); grid-column-gap: 32px; margin: 46px 0 30px 0; position: relative; } .asSelection a { color: #242830; font-size: .9em; font-weight: 600; list-style: none; padding: 16px; position: relative; text-align: center; transition:all 0.3s ease; } .asSelection a.current { color: #334e94 } .asSelection a:hover { background-color: #f6f6f6 } .asSelection .arrow { color: #bfd730; font-size: 2em; left: -21px; position: absolute; top: 50%; transform: translateY(-50%); } .asSelection a:first-child .arrow { display: none } .asSelection .change { color: #6981c0; display: block; font-size: .84em; font-weight: 500; margin-top: 2px; } .asSelection a.current .change { color: #5e6a71 } .recommend { color: #5e6a71; font-size: 1.5em; font-weight: 500; margin-bottom: 24px; text-align: center; } @media only screen and (max-width:980px) { .asSelection { grid-template-columns: repeat(1,1fr) } .asSelection a { padding: 14px 0; text-align: left } .asSelection a:hover { background-color: #fff } .asSelection .arrow { font-size: 1.2em; left: 2px; transform: rotate(90deg); top: -10px } .asSelection .change { display: inline-block; padding-left: 10px; text-decoration: underline } } @media only screen and (max-width:900px) { #assessorCats { grid-template-columns: repeat(3, 1fr) } } @media only screen and (max-width:740px) { #assessorCats { grid-gap: 22px; grid-template-columns: repeat(2, 1fr) } } /* ----------- submenu -----------*/ #submenu { background-color: rgba(27,31,41,0.98); border-radius: 4px; box-shadow: 1px 1px 30px rgba(100,100,100,.2); position: sticky; top: 160px; } #submenu .title { color: #bfd730; font-size: .8em; font-weight: 600; padding: 14px; text-align: center; } #submenu .title span { display: none; position: absolute; right: 16px; top: 14px; } #submenu .title span:before { font-family: "Font Awesome 5 Free"; font-size: 1.1em; font-weight: 900; content: "\f067"; } #submenu .title.open span:before { content: "\f068" } #submenu > ul > li, #submenu > ul > li > ul > li { position: relative } #submenu > ul > li > a { border-top: 1px solid #3a3f4d; color: #fff; display: block; font-size: .94em; font-weight: 500; padding: 14px 22px; position: relative; transition:all 0.3s ease; } #submenu > ul > li:hover > a, #submenu > ul > li > a.active { background-color: #bfd730; color: #242830; } #submenu > ul > li > a:hover + .plus, #submenu > ul > li > a.active + .plus { color: #242830 } #submenu > ul > li > .plus { cursor: pointer; color: #fff; font-size: 1.2em; line-height: 2.3em; min-height: 46px; position: absolute; right: 0; text-align: center; top: 1px; transition:all 0.3s ease; width: 52px; } #submenu > ul > li > .plus:hover { background-color: #d0e744; color: #242830; } #submenu > ul > li > .plus:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107"; } #submenu > ul > li > .plus.symbol:after { content: "\f106"; } #submenu > ul > li > ul { display: none; padding: 12px 0; position: relative; } #submenu > ul > li > ul:before { background-color: #bfd730; content: ""; height:calc(100% - 40px); left: 22px; margin-bottom: 20px; margin-top: 20px; position: absolute; top: 0; transition:all 0.3s ease; width: 3px; } #submenu > ul > li > ul > li > a { color: #bfd730; display: block; font-size: .86em; font-weight: 600; line-height: 1.45em; padding: 5.8px 22px 5.8px 38px; position: relative; transition:all 0.3s ease; } #submenu > ul > li > ul > li > a span { border-bottom: 1px solid transparent; padding-bottom: 3px; transition:all 0.3s ease; } #submenu > ul > li > ul > li > a:hover span { border-bottom-color: rgba(191,215,48,0.6); } #submenu > ul > li > ul > li > a.current span { border-bottom-color: #bfd730 } #submenu > ul > li > ul > li > a:hover:before, #submenu > ul > li > ul > li > a.active:before { background-color: #d3d3d3 } #submenu > ul > li > ul > li .plus2 { cursor: pointer; color: #d3d3d3; font-size: 1.1em; height: 27px; line-height: 1.6em; position: absolute; right: 0; text-align: center; top: 1px; transition:all 0.3s ease; width: 52px; } #submenu > ul > li > ul > li .plus2:hover { color: #6b787f } #submenu > ul > li > ul > li .plus2:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107"; } #submenu > ul > li > ul > li .plus2.symbol:after { content: "\f106"; } #submenu > ul > li > ul > li > ul { display: none; padding: 4px 0; } #submenu > ul > li > ul > li > ul > li > a { color: #fff; display: block; font-size: .86em; font-weight: 500; padding: 5px 22px 5px 51px; position: relative; } #submenu > ul > li > ul > li > ul > li > a span { border-bottom: 1px solid transparent; padding-bottom: 2px; transition:all 0.3s ease; } #submenu > ul > li > ul > li > ul > li > a:hover span { border-bottom-color: #696f7f } #submenu > ul > li > ul > li > ul > li > a.current span { border-bottom-color: #fff } #submenu > ul > li > ul > li > ul > li > a:before { background-color: #bfd730; content: ""; height: 2px; left: 38px; position: absolute; top: 12px; width: 6px; } #submenu > ul > li > ul > li > ul > li > ul > li > a { color: #b4bcce; display: block; font-size: .86em; font-weight: 400; padding: 5px 22px 5px 60px; position: relative; } #submenu > ul > li > ul > li > ul > li > ul > li > a span { border-bottom: 1px solid transparent; padding-bottom: 2px; transition:all 0.3s ease; } #submenu > ul > li > ul > li > ul > li > ul > li > a:hover span { border-bottom-color: #696f7f } #submenu > ul > li > ul > li > ul > li > ul > li > a.current span { border-bottom-color: #b4bcce } #submenu > ul > li > ul > li > ul > li > ul > li > a:before { background-color: #696f7f; content: ""; height: 1px; left: 48px; position: absolute; top: 14px; width: 6px; } @media only screen and (max-width:980px) { #submenu { margin-bottom: 20px; position: relative; top: 0 } #submenu > ul { display: none } #submenu .title span { display: block } } /* ----------- listProduct -----------*/ #listProduct .item { align-items: center; background-color: #fff; border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 30% auto 142px; position: relative; transition:all 0.3s ease; } #listProduct.login .item { grid-template-columns: 20% 32% auto 142px 130px } #listProduct .item.legend { color: #879197; cursor: default; font-size: .8em; font-weight: 600; padding-bottom: 12px; text-transform: uppercase; } #listProduct .item.legend span.stock { padding-left: 18px; text-align: center; } #listProduct .item.legend span.price { padding-right: 24px; text-align: right; } #listProduct .item:last-child { border-bottom: none } #listProduct .item figure { background-position: center center; background-repeat: no-repeat; background-size: contain; background-blend-mode: multiply; border-bottom: 20px solid transparent; border-left: 10px solid transparent; border-right: 30px solid transparent; border-top: 20px solid transparent; border-radius: 4px; padding-bottom: 70%; position: relative; transition:all 0.3s ease; } #listProduct.login .item figure { border-right: 20px solid transparent } #listProduct .item > div { transition:all 0.3s ease } #listProduct .item .title { color: #233a76; display: table; font-size: 1em; font-weight: 600; transition:all 0.3s ease; } #listProduct .item .title:hover { color: #6981c0; } #listProduct .item .promo { background-color: #bfd730; border-radius: 4px; color: #242830; font-size: .76em; font-weight: 600; left: 0; padding: 4px 8px; position: absolute; text-transform: uppercase; top: -6px; } #listProduct .item .desc { color: #242830; font-size: .94em; font-weight: 400; } #listProduct.login .item .desc { font-size: .86em } #listProduct .item .cat, #listProduct .item .number { color: #879197; font-size: .8em; font-weight: 500; padding-left: 18px; text-align: center; } #listProduct .item .number span { display: none; padding-right: 4px; } #listProduct .item .cat { margin-bottom: 4px; padding-left: 0; text-align: left; } #listProduct .item .price { color: #a7bd24; font-size: 1em; font-weight: 600; padding-right: 24px; text-align: right; } #listProduct .item.legend .price { color: #879197 } #listProduct .item .pTitle { color: #8a8a8a; display: none; font-size: .75em; line-height: 1em; margin-top: 12px; padding-bottom: 3px; text-transform: uppercase; } #listProduct .item .oldPrice { color: #8a8a8a; display: block; font-size: .8em; font-weight: 500; text-decoration: line-through; } #listProduct .item .oldPrice.blue { color: #233a76 } #listProduct .item .agency { color: #6981c1; display: block; font-size: .8em; font-weight: 500; padding: 6px 0 4px 0; } #listProduct .item .agency em { background-color: #6981c1; border-radius: 3px; color: #fff; font-style: normal; margin-right: 4px; padding: 2px 5px; } #listProduct .quantity { align-items: center; border:1px solid #ddd; cursor: pointer; display: grid; grid-template-columns: 22px auto 22px; justify-content: center; padding: 6px 10px; text-align: center; } #listProduct .quantity em { color: #b5bcc1; font-size: .8em; transition:all 0.3s ease; } #listProduct .quantity em:hover { color: #6f818e } #listProduct .quantity input[type="text"] { background-color: transparent; border:none; color: #6981c0; font-size: .9em; font-weight: 600; margin-bottom: 0; padding: 0; text-align: center; width: 32px; } #listProduct .add { background-color: #233a76; border-radius: 4px; color: #fff; cursor: pointer; display: block; font-size: .8em; font-weight: 600; margin-top: 6px; padding: 8px 16px; text-align: center; transition:all 0.3s ease; } #listProduct .add i { margin-right: 8px } #listProduct .add:hover { background-color: #2f4d9d } #listProduct .transit { background-color: #5e6a71; border-radius: 4px; color: #fff; cursor: pointer; display: block; font-size: .8em; font-weight: 600; margin-top: 6px; padding: 8px 16px; text-align: center; text-transform: uppercase; transition:all 0.3s ease; } #listProduct .transit:hover { background-color: #737d83 } #listProduct .transit i { margin-right: 8px } #listProduct .inventory { background-color: #262b36; border-radius: 4px; color: #fff; cursor: pointer; display: block; font-size: .8em; font-weight: 600; margin-top: 6px; padding: 8px 16px; text-align: center; text-transform: uppercase; transition:all 0.3s ease; } #listProduct .inventory:hover { background-color: #3b4354 } #listProduct .inventory i { margin-right: 8px } @media only screen and (max-width:1140px) { #listProduct .item .desc { font-size: .88em } #listProduct .item > :nth-child(2) { padding: 14px 0 } #listProduct.login .item { grid-template-columns: 20% 20% auto 142px 130px } #listProduct .item:hover figure { margin-left: 0 } #listProduct .item:hover > div { padding-left: 0 } } @media only screen and (max-width:980px) { #listProduct.login .item { grid-template-columns: 20% 30% auto 142px 130px } } @media only screen and (max-width:860px) { #listProduct .item, #listProduct.login .item { grid-template-columns: auto; padding: 26px 0 } #listProduct .item.legend { display: none } #listProduct .item .pTitle { display: block } #listProduct .item > :nth-child(2) { padding: 0 } #listProduct .item figure { border: 0; padding-bottom: 32% } #listProduct .item:hover, #listProduct .item:hover figure { background-color: #fff } #listProduct .item .title { font-size: 1.2em; margin: 7px auto 4px auto } #listProduct .item .desc { font-size: .94em; text-align: center } #listProduct .item .cat { padding-left: 0; text-align: center } #listProduct .item .price { padding-right: 0; padding-top: 8px; text-align: center } #listProduct .item .number { color: #242830; margin-top: 10px; padding-left: 0 } #listProduct .item .number span { display: inline-block } #listProduct .item .promo { top: 0 } #listProduct .quantity { margin-top: 20px } } @media only screen and (max-width:560px) { #listProduct .item figure { padding-bottom: 62% } } /* ----------- aboutUs -----------*/ #aboutIntro { align-items: center; background-color: #1b1f29; background-attachment: fixed; background-position: center center; background-size: cover; display: grid; height: 80vh; position: relative; text-align: center; } #aboutIntro:after { background-color: rgba(27,31,41,0.4); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #aboutIntro p { margin: 140px auto 0 auto; max-width: 500px; position: relative; text-shadow: 0 0 140px rgba(15,19,26,.4), 0 0 120px rgba(15,19,26,.4), 1px 1px 20px rgba(23,27,36,.4); z-index: 10; } #aboutIntro p .title { color: #fff; font-size: 2.7em; font-weight: 600; } #aboutIntro p .title:after { background-color: #bfd730; content: ""; display: table; height: 6px; margin: 20px auto; position: relative; width: 200px; } #aboutIntro p span { display: block } #aboutIntro p .txt { color: #fff; font-size: 1.8em; } #aboutUs .bsBox { align-items: start; align-content: center; display: grid; height: 74vh; grid-template-columns: repeat(2,1fr); overflow: hidden; padding: 50px 0; position: relative; } #aboutUs .bsBox .img { background-attachment: fixed; background-position: center center; background-size: cover; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0; width: 100%; } #aboutUs .bsBox:nth-child(3n+1) { background-color: #fff } #aboutUs .bsBox:nth-child(3n+1) .title { color: #233a76 } #aboutUs .bsBox:nth-child(3n+2) { background-color: #233a76; color: #fff; } #aboutUs .bsBox:nth-child(3n+2) .title { color: #bfd730 } #aboutUs .bsBox:nth-child(3n+3) { background-color: #1b1f29; color: #fff; } #aboutUs .bsBox:nth-child(3n+3) .title { color: #bfd730 } .bsBox .title { font-size: 2.5em; font-weight: 600; position: relative; width: 100%; z-index: 100; } .bsBox .text { position: relative; width: 100%; z-index: 100; } #aboutUs .bsBox:nth-child(2n+1) .title { padding-left: 46%; padding-right: 50px; text-align: right; } #aboutUs .bsBox:nth-child(2n+2) .title { padding-left: 50px; padding-right: 46%; text-align: left; } #aboutUs .bsBox:nth-child(2n+1) .text { padding-right: 40% } #aboutUs .bsBox:nth-child(2n+2) .text { padding-left: 40%; text-align: right; } .bsBox p { font-size: 1.1em; line-height: 1.5em; margin-bottom: 20px; } .bsBox p:last-of-type { margin-bottom: 0 } #aboutUs .bsBox:nth-child(1) .text div { border-left: 6px solid #bfd730; padding-left: 30px; } #aboutUs .bsBox:nth-child(2) .text div { border-right: 6px solid #818f97; padding-right: 30px; } #aboutUs .bsBox:nth-child(3) .text div { border-left: 6px solid #233a76; padding-left: 30px; } #aboutUs .bsBox:nth-child(4) .text div { border-left: 0; border-right: 6px solid #bfd730; padding-right: 30px; } #aboutUs .bsBox:nth-child(5) .text div { border-left: 6px solid #818f97; padding-left: 30px; } #aboutUs .bsBox:nth-child(6) .text div { border-right: 6px solid #233a76; padding-right: 30px; } #aboutUs .bsBox:nth-child(7) .text div { border-left: 6px solid #bfd730; padding-left: 30px; } .bsBox .floatImg { bottom: -150px; max-width: 600px; position: absolute; transition:all 0.3s ease; z-index: 1; } .bsBox .floatImg img { max-width: 100% } #aboutUs .bsBox:nth-child(2n+1) .floatImg { left: 20% } #aboutUs .bsBox:nth-child(2n+2) .floatImg { right: 20% } @media only screen and (max-width:1440px) { #aboutUs .bsBox { height: 84vh } .bsBox .title { font-size: 2em } #aboutUs .bsBox:nth-child(2n+1) .title { padding-left: 34% } #aboutUs .bsBox:nth-child(2n+2) .title { padding-right: 34% } #aboutUs .bsBox:nth-child(2n+1) .text { padding-right: 20% } #aboutUs .bsBox:nth-child(2n+2) .text { padding-left: 20% } #aboutUs .bsBox:nth-child(2n+1) .floatImg { left: 6% } #aboutUs .bsBox:nth-child(2n+2) .floatImg { right: 6% } .bsBox .floatImg { max-width: 500px } } @media only screen and (max-width:1280px) { .bsBox .floatImg { max-width: 380px } #aboutUs .bsBox:nth-child(2n+1) .floatImg { left: -4% } #aboutUs .bsBox:nth-child(2n+2) .floatImg { right: -4% } } @media only screen and (max-width:1050px) { #aboutUs .bsBox { height: auto; padding: 80px 0 } #aboutIntro p { text-shadow: 1px 1px 10px rgba(23,27,36,.5) } #aboutIntro:after { background-color: rgba(27,31,41,0.5) } .bsBox .title { font-size: 1.8em } .bsBox p { font-size: 1em } .bsBox .floatImg { max-width: 310px } } @media only screen and (max-width:740px) { #aboutIntro { height: auto; padding-bottom: 74px } #aboutIntro p { margin: 120px auto 0 auto } #aboutIntro p .title { font-size: 2.2em } #aboutIntro p .title:after { height: 4px; margin: 14px auto } #aboutIntro p .txt { font-size: 1.4em; padding: 0 36px } #aboutUs .bsBox { grid-template-columns: repeat(1,1fr); padding: 60px 0 200px 0 } .bsBox .title { font-size: 1.6em } #aboutUs .bsBox:nth-child(2n+1) .title { padding-left: 44px; padding-right: 44px; text-align: center } #aboutUs .bsBox:nth-child(2n+2) .title { grid-row: 1; padding-left: 44px; padding-right: 44px; text-align: center } #aboutUs .bsBox:nth-child(2n+1) .floatImg { left: 16% } #aboutUs .bsBox:nth-child(2n+2) .floatImg { right: 16% } #aboutUs .bsBox .text div { margin-top: 26px } #aboutUs .bsBox:nth-child(2n+1) .text { padding-left: 30px; padding-right: 30px } #aboutUs .bsBox:nth-child(2n+2) .text { padding-left: 30px; padding-right: 30px } .bsBox .floatImg { bottom: -280px } } /* ----------- map -----------*/ .mapLayout { background-color: rgba(27,31,41,0.6); padding: 240px 0 146px 0; overflow: hidden; position: relative; text-align: center; } .mapLayout.v2 { background-color: rgba(27,31,41,0.7) } .mapLayout .title { color: #bfd730; font-size: 1.6em; font-weight: 500; margin-bottom: 24px; text-shadow: 1px 1px 20px rgba(23,27,36,.6); } #wrapMap { position: relative } #crMap { height: 650px; opacity: 0.85; } #crMap path { fill: #5e6a71; fill: #233A76; stroke: #bac1c5; stroke-width: 1.4; stroke-linecap: round; transition:all 0.3s ease; } #crMap path:hover { fill:#bfd730 } #infoBox { bottom: 34%; color: #fff; font-size: 1.5em; font-weight: 500; left: 50%; padding-right: 80px; position: absolute; text-transform: uppercase; transform: translateX(-50%); text-shadow: 1px 1px 20px rgba(23,27,36,.6); } #crMap path.pinmap { fill: #ffffff; stroke: none; pointer-events: none; transform-origin: center top; } #crMap .ping path { animation: simpleMove 1s infinite } @keyframes simpleMove { 0% {transform: scale(1, 1)} 50% {transform: scale(1, 1.03)} 100% {transform: scale(1, 1)} } @media only screen and (max-width:1370px) { .mapLayout { padding: 180px 0 100px 0 } #crMap { height: 480px } } @media only screen and (max-width:1000px) { .mapLayout { padding: 100px 0 60px 0 } .mapLayout .title { font-size: 1.4em } } @media only screen and (max-width:560px) { #crMap { height: auto; margin: 0 20px } } /* ----------- dListing -----------*/ .dListing { margin-top: 20px } .dListing a, .dListing p { align-items: center; border-top: 1px solid #ddd; color: #242830; display: grid; font-size: .9em; grid-template-columns: 26% 16% 19% 15% 24%; padding: 20px 0; position: relative; transition:all 0.3s ease; } .dListing p.header { background-color: #6981c0; color: #fff; font-size: .8em; font-weight: 600; padding: 8px 0; text-transform: uppercase; } .dListing a:last-child { border-bottom: 1px solid #ddd } .dListing a:nth-child(odd) { background-color: #eef3ff } .dListing a:hover { border-top: 1px solid #6981c0; color: #2b4484; } .dListing a:after { background-color: #6981c0; bottom: -1px; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; transition:all 0.3s ease; width: 100%; z-index: 100; } .dListing a:hover:after { opacity: 1 } .dListing a span { padding-right: 14px; transition:all 0.3s ease; } .dListing a:hover span { padding-left: 10px } .dListing .name { color: #233a76; font-weight: 600; padding-left: 44px; } .dListing p.header .name { color: #fff } .dListing .name i { color: #bfd730; font-size: 1.2em; left: 14px; position: absolute; top: 50%; transform: translateY(-50%); transition:all 0.3s ease; } .dListing a:hover .name { padding-left: 54px } .dListing a:hover .name i { left: 24px } .aLegend { padding-left: 15px; padding-top: 14px; } .aLegend.v2 { margin-top: -28px; position: absolute; } .aLegend i { color: #bfd730 } .aLegend em { color: #879197; font-style: normal; padding: 0 7px; } .aLegend span { font-size: .8em } .provinceSelect { background-color: #f6f6f6; background-image: url(../img/arrow.png); background-position: right center; background-repeat: no-repeat; background-size: 23px; border: 1px solid #ddd; color: #6981c0; cursor: pointer; font-size: .8em; font-weight: 600; padding: 5px 29px 5px 8px; position: absolute; right: 34px; text-transform: uppercase; top: 30px; } .provinceSelect option { color: #242830 } @media only screen and (max-width:950px) { .dListing p.header { display: none } .dListing a, .dListing p { grid-template-columns: auto } .dListing a:nth-child(odd) { background-color: #fff } .dListing a span { padding-bottom: 1px; padding-left: 28px; padding-top: 1px } .dListing a:hover span { padding-left: 28px } .dListing a .name { padding-left: 28px } .dListing a:hover .name { padding-left: 28px } .dListing a .name i { left: 0; top: 30px } .dListing a:hover .name i { left: 0 } .aLegend { padding-left: 0 } } @media only screen and (max-width:570px) { .provinceSelect { margin-top: 18px; position: relative; right: initial; top: initial; width: 100%; } .aLegend.v2 { margin-top: 0; position: relative } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block !important; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-dots { bottom: -21px !important } .slick-dots li { margin: 0 0 !important } .slick-dots li button::before { color: #5e6a71 !important; font-size: 8px !important } .slick-dots li.slick-active button::before { color: #233a76 !important } .slick-next::before, .slick-prev::before { font-size: 32px !important } .slick-next, .slick-prev { height: 32px !important; width: 32px !important; z-index: 10; } .slick-prev { left: 20px !important } .slick-next { right: 20px !important } /* ----------- release -----------*/ .releaseLayout { background-color: rgba(27,31,41,0.94); padding: 0 0 100px 0; overflow: hidden; position: relative; text-align: center; } .releaseLayout h1 { position: absolute; top: 280px; width: 100%; } .releaseImg { background-color: #1b1f29; padding-top: 150px; position: relative; } .releaseImg:nth-child(even) { direction: rtl } .releaseImg:first-of-type { padding-top: 270px } .releaseImg:last-of-type { margin-bottom: 120px } .releaseImg .text { align-items: center; background-color: rgba(27,31,41,0.94); border-radius: 4px 4px 0 0; color: #bfd730; display: grid; font-size: 1.9em; font-weight: 500; margin-left: auto; margin-right: 30%; padding: 30px 94px 34px 34px; position: relative; text-align: center; top: 91px; width: 32%; z-index: 100; } .releaseImg:first-of-type .text { top: 80px; z-index: 200 } .releaseImg:nth-child(even) .text { background-color: rgba(35,58,118,0.94); color: #fff; margin-right: auto; margin-left: 30%; padding: 30px 34px 34px 94px; } .releaseImg .text p { position: relative; z-index: 200; } .releaseImg .img { display: block; position: relative; top: 220px; z-index: 100; } .releaseImg:first-of-type .img { top: 20px } .releaseImg .img img { box-shadow: 0 0 420px rgba(27,31,41,0.2), 0 0 120px rgba(27,31,41,0.2); display: block; transition:all 0.3s ease; width: 68%; } .releaseImg .img:hover img { filter: brightness(1.14) } .releaseImg .img span { background-color: #fff; color: #242830; content: ""; line-height: 1.3em; padding: 64px 44px 64px 82px; position: absolute; right: 40px; text-align: justify; top: -7%; transition:all 0.3s ease; width: 32%; z-index: -1; } .releaseImg .img:hover span { background-color: #f0f0f0 } .releaseImg:nth-child(even) .img span { left: 40px; padding: 64px 82px 64px 44px; right: initial; direction:ltr; } .releaseImg .img span em { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; color: #233a76; display: table; font-size: .8em; font-style: normal; font-weight: 600; margin-top: 20px; padding: 8px 24px; text-transform: uppercase; transition:all 0.3s ease; } .releaseImg .img span:hover em { border-color: #233a76 } .releaseImg:nth-child(even) .img span em { margin-right: auto } .bgColor { background-attachment: fixed; background-position: center center; background-size: cover; height: 100%; left: 0; opacity: 0.4; position: absolute; top: 0; width: 100%; } @media only screen and (max-width:1150px) { .releaseImg .text { width: 38% } .releaseImg .img span { padding: 28px 38px 28px 76px } .releaseImg:nth-child(even) .img span { padding: 28px 76px 28px 38px } } @media only screen and (max-width:1000px) { .releaseLayout { padding: 0 0 0 0 } .releaseLayout h1 { top: 100px } .releaseImg:first-of-type { padding-top: 160px } .releaseImg { padding-top: 70px } .releaseImg .text { margin-right: initial; top: initial; width: 100% } .releaseImg:first-of-type .text { top: 0 } .releaseImg .img span { padding: 28px 38px; right: 0; top: 0 } .releaseImg:nth-child(even) .img span { left: 0; padding: 28px 38px } .releaseImg .img, .releaseImg:first-of-type .img { padding-bottom: 70px; top: initial } .releaseImg:last-of-type { margin-bottom: 0 } } @media only screen and (max-width:880px) { .releaseImg .text, .releaseImg:nth-child(2n) .text { font-size: 1.6em; padding: 22px 26px } .releaseImg .img img { width: 100% } .releaseImg .img span { display: block; padding: 20px 26px; position: relative; width: 100% } .releaseImg:nth-child(even) .img span { padding: 20px 26px } } /* ----------- brandsLayout -----------*/ .brandsLayout { background-color: rgba(27,31,41,0.7); overflow: hidden; position: relative; } .brandContainer { margin: 0 auto; max-width: 1050px; overflow: hidden; padding-top: 250px; position: relative; } .brandContainer h1 { margin-bottom: 58px } .brandGrid { display: grid; grid-template-columns: 40% 60%; margin-bottom: 160px; position: relative; } .brandContainer .brandGrid:nth-child(odd) { direction: rtl } .brandContainer .logo { background-color: #fff; margin-left: auto; padding: 27px 34px; position: relative; width: 60%; z-index: 100; } .brandContainer .logo img { display: block; width: 100%; } .brandContainer .brandGrid:nth-child(odd) .logo { margin-left: initial; margin-right: auto } .brandContainer .text { align-items: center; background-color: #efefef; display: grid; line-height: 1.3em; min-height: 380px; padding: 34px 48px; position: relative; text-align: justify; z-index: 200; } .brandContainer .brandGrid:nth-child(odd) .text { direction: ltr } .brandContainer .text p { margin-bottom: 20px } .brandContainer .text p:last-of-type { margin-bottom: 0 } .brandContainer .text a { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; color: #233a76; display: table; font-size: .8em; font-style: normal; font-weight: 600; margin-top: 22px; padding: 8px 24px; text-transform: uppercase; transition: all 0.3s ease; } .brandContainer .text a:hover { border: 1px solid #233a76 } .brandContainer .img { background-color: rgba(27,31,41,0.4); background-position: center center; background-size: cover; box-shadow: 0 0 120px rgba(27,31,41,0.4), 0 0 80px rgba(27,31,41,0.4); grid-column: 2; grid-row: 1 / 3; left: -50px; position: relative; top: 34px; z-index: 50; } .brandContainer .brandGrid:nth-child(odd) .img { left: initial; right: -50px } @media only screen and (max-width:1090px) { .brandContainer { margin: 0 20px } } @media only screen and (max-width:1000px) { .brandGrid { grid-template-columns: auto } .brandGrid:last-of-type { margin-bottom: 90px } .brandContainer { padding-top: 100px } .brandContainer h1 { margin-bottom: 78px } .brandContainer .logo { max-width: 150px; padding: 18px 22px; position: absolute; top: -36px } .brandContainer .text { min-height: auto; padding: 20px 25px } .brandContainer .img { grid-column: 1; grid-row: 1 / 2; left: initial; padding-bottom: 50%; top: initial } .brandContainer .brandGrid:nth-child(odd) .img { right: initial } } @media only screen and (max-width:500px) { .brandContainer .img { padding-bottom: 66% } } /* ----------- serviceBoxes -----------*/ #serviceBoxes { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 50px 32px; margin-top: 38px; } #serviceBoxes a { background-color: #fff; box-shadow: 0 0 30px rgba(100,100,100,.2); border-radius: 4px; color: #5e6a71; font-weight: 600; overflow: hidden; position: relative; text-align: center; } #serviceBoxes a figure { background-color: #cbcbcb; background-position: center center; background-repeat: no-repeat; background-size: cover; padding-bottom: 46%; position: relative; transition:all 0.3s ease; } #serviceBoxes a:hover figure { filter: brightness(1.24); transform: scale(1.05) } #serviceBoxes a p { border-top: 8px solid #bfd730; font-size: 1.2em; padding: 10px 16px 14px 16px; position: relative; transition:all 0.3s ease; } #serviceBoxes a:hover p { border-top: 8px solid #233a76; color: #233a76; } .serviceLayout .pName { background: initial; background-color: #fff; border-radius: 4px 4px 0 0; } .serviceLayout .pName h2 { border-bottom: 1px solid #ddd; font-size: 1.9em; padding: 16px 24px 19px 24px; } .serviceLayout .pName h2 a { color: #94aae4; margin-right: 15px; position: relative; top: -1px; transition:all 0.3s ease; } .serviceLayout .pName h2 a:hover { color: #b5bbbf } .serviceLayout .pName h2 i { font-size: .9em } .serviceLayout .media { overflow: hidden; position: relative; } .sSlider .item { background-color: #cbcbcb; background-position: center center; background-size: cover; display: block !important; padding-bottom: 48%; position: relative; transition:all 0.3s ease; } .sSlider .item:hover { filter: brightness(1.18); transform: scale(1.03); } .sSlider a.videoShow:before { color: rgba(255,255,255,0.85); content: "\f144"; font-family: "Font Awesome 5 Free"; font-size: 60px; font-weight: 400; height: 64px; left: 50%; line-height: 64px; position: absolute; text-align: center; text-shadow: 0 0 18px rgba(60,60,60,0.5); top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 200; } .serviceLayout .textProduct { margin-top: 0; padding: 27px 36px 0 36px; } .serviceLayout .textProduct p:last-of-type { margin-bottom: 0 } .serviceLayout .textProduct h3 { color: #6981c0 } @media only screen and (max-width:830px) { #serviceBoxes a p { font-size: 1em } #serviceBoxes a figure { padding-bottom: 58% } } @media only screen and (max-width:720px) { #serviceBoxes { grid-gap: 22px; margin-top: 20px } .sSlider .item { padding-bottom: 58% } } @media only screen and (max-width:640px) { .serviceLayout .pName h2 { font-size: 1.6em; padding: 14px 24px 16px 24px } } @media only screen and (max-width:540px) { #serviceBoxes a p { font-size: .9em } .serviceLayout .textProduct { padding: 18px 22px 0 22px } } /* ----------- map -----------*/ .contactLayout { background-color: rgba(27,31,41,0.6); box-shadow: 1px 1px 30px rgba(100,100,100,.2); padding: 240px 0 0 0; overflow: hidden; position: relative; text-align: center; } #wrapContact { display: grid; grid-template-columns: 40% 30% 30%; margin: 0 auto 115px auto; max-width: 1280px; } #wrapContact h1 { grid-column: span 3 } #wrapContact.v2, #wrapContact.v3, #wrapContact.v4 { display: block; } #wrapContact.v2 { max-width: 800px } #wrapContact.v3 { max-width: 700px } #wrapContact.v4 { max-width: 1280px } #wrapContact .text { color: #fff; grid-column: span 3; margin: 0 auto 40px auto; max-width: 700px; } #wrapContact .text p { font-size: 1.1em; font-weight: 500; line-height: 1.5em; margin-bottom: 24px; text-shadow: 0 0 2px rgba(50,50,50,0.2); } #wrapContact .text p:last-of-type { margin-bottom: 0 } #wrapContact .img { background-color: rgba(27,31,41,0.5); background-position: center center; background-size: cover; border-radius: 4px 0 0 4px; } #wrapContact .info { background-color: rgba(27,31,41,0.85); color: #fff; padding: 36px 40px; text-align: left; } #wrapContact .info p, #wrapContact .info a { color: #fff; display: block; font-size: .96em; line-height: 1.5em; padding: 1px 0 1px 30px; position: relative; transition:all 0.3s ease; } #wrapContact .info a:hover { color: #9db1e7 } #wrapContact .info p i, #wrapContact .info a i { color: #6981c0; left: 0; position: absolute; top: 5px; } #wrapContact .info hr { background-color: #434755; margin: 14px 0 } #wrapContact .form { background-color: #fff; border-radius: 0 4px 4px 0; padding: 36px 40px; position: relative; text-align: left; } #wrapContact.v2 .form { border-radius: 4px; margin: 0 auto; max-width: 800px; } #wrapContact.v3 .form { border-radius: 4px; margin: 0 auto; max-width: 500px; } #wrapContact.v4 .form { border-radius: 0 0 4px 4px; margin: 0 auto; } #wrapContact .form h3 { color: #233a76; font-size: 1.6em; font-weight: 500; line-height: 1.1em; margin-bottom: 24px; text-align: center; } @media only screen and (max-width:1320px) { #wrapContact { grid-template-columns: 32% 32% 36%; margin: 0 20px 115px 20px } #wrapContact.v2, #wrapContact.v3 { margin: 0 auto 115px auto } } @media only screen and (max-width:1020px) { #wrapContact { grid-template-columns: auto } #wrapContact h1 { grid-column: span 2 } #wrapContact .text { grid-column: span 2 } #wrapContact .text p { font-size: 1em; line-height: 1.4em } #wrapContact .img { border-radius: 4px 4px 0 0; grid-column: span 2; padding-bottom: 40% } #wrapContact .form { border-radius: 0 0 4px 0 } } @media only screen and (max-width:1000px) { .contactLayout { padding: 100px 0 0 0 } #wrapContact { margin: 0 20px 60px 20px } } @media only screen and (max-width:840px) { #wrapContact.v2, #wrapContact.v3 { margin: 0 20px 60px 20px } } @media only screen and (max-width:790px) { #wrapContact h1 { grid-column: span 1 } #wrapContact .text { grid-column: span 1 } #wrapContact .img { grid-column: span 1; padding-bottom: 56% } #wrapContact .form { border-radius: 0 0 4px 4px; padding: 20px 24px } #wrapContact .info { padding: 20px 24px } } @media only screen and (max-width:540px) { #wrapContact.v3 { margin: 0 20px 60px 20px } } /* ----------- mainForm -----------*/ .mainForm { position: relative; } .mainForm .title { color: #879197; display: block; font-size: .8em; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; } .mainForm .title2 { color: #6981c0; display: block; font-size: .9em; font-weight: 500; margin-bottom: 8px; } .mainForm .title2.v2 { margin-bottom: 22px } .mainForm .txtMandatory { color: #879197; font-size: .8em; font-weight: 500; padding-left: 15px; position: absolute; right: 0; text-transform: uppercase; top: -1px; } .mainForm .txtMandatory:before { content: "*"; color: #a7bd24; font-size: 1.6em; font-weight: 600; margin: -1px 0 0 -14px; position: absolute; } .mainForm .mandatory:after { content: "*"; color: #a7bd24; font-size: 1.6em; font-weight: 600; margin: -5px 0 0 6px; position: absolute; } .mainForm input[type="text"], .mainForm input[type="password"], .mainForm textarea, .mainForm select { border: 1px solid #cecece; color: #2a363d; font-size: .9em; margin: 0 0 20px 0; outline:0; overflow: hidden; overflow-y: auto; padding: 8px 10px; transition:all 0.3s ease; width: 100%; } .mainForm input[type="text"]:disabled, .mainForm input[type="password"]:disabled, .mainForm textarea:disabled, .mainForm select:disabled { background-color: #f8f8f8; font-weight: 500; } .mainForm select { background-image: url(../img/arrow.png); background-position: right center; background-repeat: no-repeat; background-size: 23px; } .mainForm input[type="text"]:focus, .mainForm textarea:focus { border-color: #233a76 } .mainForm input[type="text"].error, .mainForm input[type="password"].error, .mainForm select.error, .mainForm textarea.error { background-color: #fff1f0; border: 1px solid #d8aba6; } .mainForm .radio { color: #2a363d; display: table; font-size: .9em; padding: 5px 0 5px 20px; } .mainForm .checkbox { color: #2a363d; cursor: pointer; display: table; font-size: .9em; padding: 5px 0; } .mainForm .radio.v2 { padding: 5px 0 5px 0 } .mainForm .radio.inline { display: inline-table; } .mainForm .captcha { background-repeat: no-repeat; background-size: contain; background-position: right top; } .mainForm input[type="submit"], .mainForm input[type="button"], .mainForm .abtn { background-color: #233a76; border-radius: 4px; color: #fff; display: block; font-weight: 600; padding: 8px 16px; text-align: center; transition:all 0.3s ease; width: 100%; } .mainForm input[type="submit"].v2, .mainForm input[type="button"] { text-transform: initial; } .mainForm input[type="submit"].grey { background-color: #5e6a71 } .mainForm input[type="submit"].lblue, .mainForm .lblue.abtn { background-color: #6981c0 } .mainForm input[type="submit"]:hover { background-color: #3c579c } .mainForm input[type="button"], .mainForm .abtn { background-color: #5e6a71 } .mainForm input[type="button"]:hover, .mainForm .abtn:hover { background-color: #737d83 } .mainForm .fLine { margin-bottom: 10px } .mainForm .fLine:before { border-bottom: 1px solid #242830; content: ""; left: 247px; position: absolute; top: 17px; width: 350px; } @media only screen and (max-width:688px) { .mainForm .fLine { margin-bottom: 40px } .mainForm .fLine:before { left: 0; top: 47px; width: 100% } } .mainForm .forget { color: #879197; display: block; font-size: .8em; font-weight: 600; margin-top: 16px; text-align: center; text-transform: uppercase; } .mainForm .forget span { border-bottom: 1px solid #fff; padding-bottom: 4px; transition:all 0.3s ease; } .mainForm .forget span:hover { border-bottom: 1px solid #879197 } .mainForm .success { color: #a7bd24; display: none; font-size: 1em; font-weight: 600; padding-top: 20px; text-align: center; } .mainForm .success i { margin-right: 6px } .mainForm .errorTxt { color: #d25118; display: none; font-size: 1em; font-weight: 600; margin-top: -8px; text-align: center; } .mainForm .errorTxt2 { color: #d25118; display: none; font-size: 1em; font-weight: 600; margin-top: -8px; text-align: center; } .mainForm .titleLine { border-bottom: 1px solid #6981c0; color: #6981c0; font-size: .9em; font-weight: 600; margin-bottom: 18px; margin-top: 26px; padding-bottom: 7px; text-align: center; text-transform: uppercase; } .mainForm .titleLine:first-of-type { margin-top: 0 } .mainForm p { font-size: .9em; line-height: 1.4em; margin-bottom: 22px; position: relative; } .ulCol { font-size: .9em; margin-bottom: 24px; } .ulCol li { line-height: 1.4em; padding: 5px 0 5px 18px; position: relative; } .ulCol li:before { background-color: #6981c0; content: ""; height: 2px; left: 0; position: absolute; top: 15px; width: 8px; } @media only screen and (max-width:630px) { .mainForm .txtMandatory { display: block; padding-left: 0; position: relative; text-align: center; top: -10px } } @media only screen and (max-width:550px) { .mainForm input[type="button"], .mainForm .abtn, .mainForm input[type="submit"] { margin-top: 10px } } /* ----------- videoBox -----------*/ #videoBox { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1px; margin-top: 1px; } #videoBox a { box-shadow: 1px 1px 30px rgba(27,31,41,.5); overflow: hidden; position: relative; } #videoBox figure { background-position: center center; background-size: cover; padding-bottom: 64%; position: relative; transition:all 0.3s ease; } #videoBox a:hover figure { filter: brightness(1.24); transform: scale(1.05); } #videoBox figure:before { background-image: linear-gradient(rgba(27,31,41,0), rgba(27,31,41,0.6)); bottom: 0; content: ""; height: 80%; left: 0; position: absolute; width: 100%; } #videoBox figure:after { content: "\f144"; color: rgba(255,255,255,0.8); font-family: "Font Awesome 5 Free"; font-size: 3em; font-weight: 400; height: 60px; left: 50%; position: absolute; text-align: center; text-shadow: 0 0 16px rgba(27,31,41,0.4); top: 50%; transform: translate(-50%, -50%); transition:all 0.3s ease; width: 60px; } #videoBox a:hover figure:after { color: rgba(255,255,255,0.9) } #videoBox figure p { bottom: 0; color: #fff; font-size: 1.2em; font-weight: 500; left: 0; padding: 0 22px 22px 22px; position: absolute; text-align: center; text-shadow: 0 0 8px rgba(15,19,26,0.5), 0 0 28px rgba(15,19,26,0.8); width: 100%; } @media only screen and (max-width:810px) { #videoBox { grid-template-columns: repeat(1,1fr) } #videoBox figure { padding-bottom: 64% } #videoBox figure:after { font-size: 2em } } /* ----------- results -----------*/ .results { margin-top: 20px } .results a { border-bottom: 1px solid #ddd; color: #242830; display: block; padding: 24px 0; transition:all 0.3s ease; } .results .title { color: #233a76; display: block; font-weight: 600; transition:all 0.3s ease; } .results .text { font-size: .94em; transition:all 0.3s ease; } .results a:hover .title { color: #6981c0 } .results a:hover .text { color: #6981c0 } @media only screen and (max-width:800px) { .results { margin-top: 26px } .results a { padding: 18px 0 } .results a:hover { background-color: #fff } } /* ------------------------------------------------- Datepicker ------------------------------------------------- */ .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #dedede } .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { color: #c5c5c5 } .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- { color: #dedede } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #a2ddf6; } .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { background: #8ad5f4 } .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.1); color: #cccccc; } .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.2); } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Datepicker cells ------------------------------------------------- */ .datepicker--cells { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .datepicker--cell { border-radius: 4px; box-sizing: border-box; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 32px; z-index: 1; } .datepicker--cell.-focus- { background: #f0f0f0 } .datepicker--cell.-current- { color: #a7bd24 } .datepicker--cell.-current-.-focus- { color: #4a4a4a } .datepicker--cell.-current-.-in-range- { color: #4EB5E6 } .datepicker--cell.-in-range- { background: rgba(92, 196, 239, 0.1); color: #4a4a4a; border-radius: 0; } .datepicker--cell.-in-range-.-focus- { background-color: rgba(92, 196, 239, 0.2) } .datepicker--cell.-disabled- { cursor: default; color: #aeaeae; } .datepicker--cell.-disabled-.-focus- { color: #aeaeae } .datepicker--cell.-disabled-.-in-range- { color: #a1a1a1 } .datepicker--cell.-disabled-.-current-.-focus- { color: #aeaeae } .datepicker--cell.-range-from- { border: 1px solid rgba(92, 196, 239, 0.5); background-color: rgba(92, 196, 239, 0.1); border-radius: 4px 0 0 4px; } .datepicker--cell.-range-to- { border: 1px solid rgba(92, 196, 239, 0.5); background-color: rgba(92, 196, 239, 0.1); border-radius: 0 4px 4px 0; } .datepicker--cell.-range-from-.-range-to- { border-radius: 4px } .datepicker--cell.-selected- { color: #fff; border: none; background: #6981c0; } .datepicker--cell.-selected-.-current- { color: #fff; background: #6981c0; } .datepicker--cell.-selected-.-focus- { background: #6981c0 } .datepicker--cell:empty { cursor: default } .datepicker--days-names { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 8px 0 3px; } .datepicker--day-name { color: #7d93cc; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; text-transform: uppercase; font-size: .8em; } .datepicker--cell-day { width: 14.28571% } .datepicker--cells-months { height: 170px } .datepicker--cell-month { width: 33.33%; height: 25%; } .datepicker--years { height: 170px } .datepicker--cells-years { height: 170px } .datepicker--cell-year { width: 25%; height: 33.33%; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #dedede } .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { color: #c5c5c5 } .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- { color: #dedede } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #a2ddf6; } .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { background: #8ad5f4 } .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.1); color: #cccccc; } .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.2) } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Datepicker ------------------------------------------------- */ .datepickers-container { position: absolute; left: 0; top: 0; } @media print { .datepickers-container { display: none } } .datepicker { background: #fff; border: 1px solid #dbdbdb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 4px; box-sizing: content-box; font-family: Tahoma, sans-serif; font-size: 14px; color: #4a4a4a; width: 250px; position: absolute; left: -100000px; opacity: 0; transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; z-index: 100; } .datepicker.-from-top- { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .datepicker.-from-right- { -webkit-transform: translateX(8px); transform: translateX(8px); } .datepicker.-from-bottom- { -webkit-transform: translateY(8px); transform: translateY(8px); } .datepicker.-from-left- { -webkit-transform: translateX(-8px); transform: translateX(-8px); } .datepicker.active { opacity: 1; -webkit-transform: translate(0); transform: translate(0); transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; } .datepicker-inline .datepicker { border-color: #d7d7d7; box-shadow: none; position: static; left: auto; right: auto; opacity: 1; -webkit-transform: none; transform: none; } .datepicker-inline .datepicker--pointer { display: none } .datepicker--content { box-sizing: content-box; padding: 4px; } .-only-timepicker- .datepicker--content { display: none } .datepicker--pointer { position: absolute; background: #fff; border-top: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; width: 10px; height: 10px; z-index: -1; } .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer { top: calc(100% - 4px); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer { right: calc(100% - 4px); -webkit-transform: rotate(225deg); transform: rotate(225deg); } .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer { bottom: calc(100% - 4px); -webkit-transform: rotate(315deg); transform: rotate(315deg); } .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer { left: calc(100% - 4px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer { left: 10px } .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer { right: 10px } .-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer { left: calc(50% - 10px / 2) } .-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer { top: 10px } .-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer { bottom: 10px } .-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer { top: calc(50% - 10px / 2) } .datepicker--body { display: none } .datepicker--body.active { display: block } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #dedede } .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { color: #c5c5c5 } .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- { color: #dedede } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #a2ddf6; } .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { background: #8ad5f4 } .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.1); color: #cccccc; } .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.2) } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Navigation ------------------------------------------------- */ .datepicker--nav { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #efefef; min-height: 32px; padding: 4px; } .-only-timepicker- .datepicker--nav { display: none } .datepicker--nav-title, .datepicker--nav-action { display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .datepicker--nav-action { width: 32px; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .datepicker--nav-action:hover { background: #f0f0f0 } .datepicker--nav-action.-disabled- { visibility: hidden } .datepicker--nav-action svg { width: 32px; height: 32px; } .datepicker--nav-action path { fill: none; stroke: #9c9c9c; stroke-width: 2px; } .datepicker--nav-title { border-radius: 4px; padding: 0 8px; } .datepicker--nav-title i { font-style: normal; color: #9c9c9c; margin-left: 5px; } .datepicker--nav-title:hover { background: #f0f0f0 } .datepicker--nav-title.-disabled- { cursor: default; background: none; } .datepicker--buttons { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 4px; border-top: 1px solid #efefef; } .datepicker--button { color: #4EB5E6; cursor: pointer; border-radius: 4px; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 32px; } .datepicker--button:hover { color: #4a4a4a; background: #f0f0f0; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #dedede } .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover { color: #c5c5c5 } .-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- { color: #dedede } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #a2ddf6; } .-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- { background: #8ad5f4; } .-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.1); color: #cccccc; } .-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- { background-color: rgba(92, 196, 239, 0.2) } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ----------- wrapCart -----------*/ #wrapCart { margin-bottom: 22px } .cartLine { align-items: center; border-bottom: 1px solid #ddd; display: grid; grid-template-columns: 32px 140px 36% auto 104px 122px; margin-bottom: 0; padding: 14px 0; } .cartLine.head { color: #879197; cursor: default; font-size: .8em; font-weight: 600; padding-bottom: 12px; text-transform: uppercase; } .cartLine:first-of-type { padding-top: 0 } .cartLine:last-of-type { border-bottom: none } .cartLine .delete a { color: #b5bcc1; display: block; padding: 4px 7px; transition:all 0.3s ease; } .cartLine .delete a:hover { color: #df401b } .cartLine .product img { width: 100% } .cartLine .name a { color: #233a76; display: block; font-size: 1.1em; font-weight: 600; padding-left: 22px; transition:all 0.3s ease; } .cartLine .name a:hover { color: #6981c0 } .cartLine .name a em { color: #242830; display: block; font-style: normal; font-size: .84em; font-weight: 400; margin-top: 4px; } .cartLine.head :nth-child(3){ padding-left: 22px } .cartLine .inventory { color: #879197; font-size: .8em; font-weight: 500; text-align: center; } .cartLine .inventory em { display: none; font-style: normal; margin-right: 4px; } .cartLine.head :nth-child(4){ text-align: center } .cartLine .quantity { align-items: center; border:1px solid #ddd; cursor: pointer; display: grid; grid-template-columns: 22px auto 22px; justify-content: start; padding: 6px 10px; text-align: center; } .cartLine.head :nth-child(5){ text-align: center } .cartLine .quantity.v2 { border:none } .cartLine .quantity em { color: #b5bcc1; font-size: .8em; transition:all 0.3s ease; } .cartLine .quantity em:hover { color: #6f818e } .cartLine .quantity input[type="text"] { border:none; color: #6981c0; font-weight: 600; margin-bottom: 0; padding: 0; text-align: center; width: 40px; } .cartLine .price { font-weight: 500; line-height: 1.2em; position: relative; text-align: right; } .cartLine.head :nth-child(6){ text-align: right } .cartLine:last-of-type .price { color: #a7bd24; font-weight: 600; } .cartLine .price i { color: #8a8a8a; display: none; font-size: .75em; line-height: 1.5em; margin-top: 10px; text-transform: uppercase; } .cartLine .green { color: #a7bd24; font-weight: 600; } .cartLine .agency { color: #6981c1; display: block; font-size: .85em; font-weight: 500; padding: 6px 0 4px 0; } .cartLine .agency em { background-color: #6981c1; border-radius: 3px; color: #fff; font-style: normal; margin-right: 4px; padding: 2px 5px; } .cartLine .oldPrice { color: #8a8a8a; display: block; font-size: .85em; font-weight: 500; text-decoration: line-through; } .cartLine .price i, .cartLine .price em { font-style: normal; position: relative; } .cartLine .price .emTotal:before { color: #8a8a8a; content: "TOTAL:"; display: block; font-weight: 500; left: -56px; position: absolute; } .mainForm #wrapCart p { margin-bottom: 0 } #wrapCart .midTxt { margin-top: 16px } @media only screen and (max-width:940px) { .cartLine { grid-template-columns: 32px 140px 26% auto 104px 122px } } @media only screen and (max-width:768px) { #wrapCart { margin-bottom: 0 } .cartLine { border-bottom: 1px solid #a1a1a1; grid-template-columns: auto; text-align: center } .cartLine.head { display: none } .cartLine .product img { max-width: 250px } .cartLine .name a { font-size: 1.16em; margin: 5px 0 6px 0; padding-left: 0 } .cartLine .inventory { color: #242830; font-size: .9em; margin-bottom: 12px } .cartLine .inventory em { display: inline-block } .cartLine .quantity { margin: 0 auto; max-width: 140px; justify-content: center } .cartLine .price { font-size: 1.05em; font-weight: 600; margin-top: 8px; text-align: center } .cartLine .price i { display: block } .cartLine:last-of-type .price { margin-top: 0 } .cartLine .price em:before { display: inline-block; left: initial; padding-right: 6px; position: relative } } /* ----------- hRow -----------*/ .hRow { align-items: center; border-bottom: 1px solid #ddd; color: #242830; display: grid; grid-template-columns: 35% 24% 24% 17%; padding: 16px 0; transition:all 0.3s ease; } .hRow:hover { background-color: #f9f9f9 } .hRow .title { color: #233a76; font-weight: 500; padding-left: 14px; } .hRow .title em.id { display: block; font-size: .94em; font-style: normal; font-weight: 500; margin-top: 2px; } .hRow .title em.date { color: #879197; display: block; font-size: .9em; font-style: normal; font-weight: 400; margin-top: 6px; } .hRow .status { font-size: .9em } .hRow .number { font-size: .9em; padding-right: 14px; text-align: center; } .hRow.v2 { border-bottom: 2px solid #6981c0; padding: 0 0 7px 0; } .hRow.v2:hover { background-color: #fff } .hRow.v2 .title, .hRow.v2 .status, .hRow.v2 .number { color: #6981c0; font-size: .8em; font-weight: 600; } .hRow .bt { background-color: #233a76; border-radius: 4px; color: #fff; display: block; font-size: .8em; font-weight: 600; margin-right: 10px; padding: 8px 16px; text-align: center; text-transform: uppercase; transition: all 0.3s ease; } .hRow .bt:hover { background-color: #3c579c } @media only screen and (max-width:836px) { .hRow { grid-template-columns: 31% 24% 24% 21% } } @media only screen and (max-width:660px) { .hRow { grid-template-columns: auto } .hRow:hover { background-color: #fff } .hRow:nth-child(2) { padding: 0 0 16px 0 } .hRow.v2 { display: none } .hRow .title { color: #6981c0; padding-left: 0 } .hRow .status { margin-top: 10px } .hRow .number { text-align: left } .hRow .bt { margin-top: 12px } } /* ----------- tCart -----------*/ .tH2 { color: #233a76; margin-bottom: 2px; text-align: center; } .dCart { font-size: .9em; text-align: center; } .dCart span { color: #ddd; padding: 0 5px; } .tCart { margin-top: 26px; width: 100%; } .tCart th { border-bottom: 2px solid #6981c0; color: #6981c0; font-size: .8em; padding: 0 0 8px 0; text-transform: uppercase; } .tCart td { border-bottom: 1px solid #ddd; font-size: .9em; padding: 12px 0; } .tCart .total td { border-bottom: none; } /* ----------- warrantyH -----------*/ .warrantyH > div { border-bottom: 1px solid #ddd; padding: 16px 0; position: relative; } .warrantyH p { color: #233a76; font-weight: 500; } .warrantyH p span { color: #879197; display: block; font-size: .9em; font-style: normal; font-weight: 400; margin-top: 3px; } .warrantyH a { background-color: #233a76; border-radius: 4px; color: #fff; display: block; font-size: .8em; font-weight: 600; padding: 8px 16px; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 50%; transform: translateY(-50%); transition: all 0.3s ease; } .warrantyH a:hover { background-color: #3c579c; } @media only screen and (max-width:430px) { .warrantyH a { display: table; margin-top: 16px; position: relative; top: initial; transform: initial; } } /*************** SCROLLBAR BASE CSS ***************/ .scroll-wrapper { height: 100%; overflow: hidden !important; padding: 0 !important; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element { display: none } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /*************** SCROLLBAR MAC OS X ***************/ .scrollbar-macosx > .scroll-element, .scrollbar-macosx > .scroll-element div { background: none; border: none; margin: 0; padding: 0; position: absolute; z-index: 10040; } .scrollbar-macosx > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-macosx > .scroll-element .scroll-element_track { display: none; } .scrollbar-macosx > .scroll-element .scroll-bar { background-color: #4f4f4f; display: block; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .scrollbar-macosx:hover > .scroll-element .scroll-bar, .scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=60); opacity: 0.5; } .scrollbar-macosx > .scroll-element.scroll-x { bottom: 0px; height: 0px; left: 0; min-width: 100%; overflow: visible; width: 100%; } .scrollbar-macosx > .scroll-element.scroll-y { height: 100%; min-height: 100%; right: 0px; top: 0; width: 0px; } /* scrollbar height/width & offset from container borders */ .scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px } .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 9px } .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px } .scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px } .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px } .scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px } /* update scrollbar offset if both scrolls are visible */ .scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px } .scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px } @media only screen and (max-width:800px) { .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { display: none; left: -14px; border-bottom: 12px solid #efefef; border-top: 12px solid #efefef; width: 4px } } @media print { header, footer, #distributorBanner, #adviserBtn, .cdTop, .mainForm input[type="submit"], .mainForm input[type="button"], #novaq { display: none !important; } .lineH1 { text-shadow: none } .contactLayout { box-shadow: none; padding: 0 0 0 0 } } /*-----------invoiceDetail-----------*/ .invoiceDetail { display: none; grid-template-columns: 24% 53% 23%; margin: 30px 0 40px 31px; } .invoiceDetail.open { display: grid; } .invoiceDetail span { border-bottom: 1px dashed #ddd; font-size: .9em; padding: 12px 10px 12px 0; position: relative; } .invoiceDetail span:nth-child(1), .invoiceDetail span:nth-child(2), .invoiceDetail span:nth-child(3) { border-bottom: 2px solid #6981c0; color: #6981c0; font-size: .8em; font-weight: 500; padding: 0 10px 7px 0; text-transform: uppercase; } .invoiceDetail span:nth-child(3n+3) { text-align: center; } .viewInvoice { background-color: #f6f6f6; border-radius: 4px; color: #6981c0; cursor: pointer; font-size: .8em; font-weight: 600; padding: 5px 14px; position: absolute; right: 0; text-transform: uppercase; top: -1px; transition:all 0.3s ease; } .viewInvoice:hover { background-color: #6981c0; color: #fff; } .subtitulo { color: #505458; font-size: 15px; text-align: center; } .bloqueCodigo { display: grid; grid-gap: 9px; grid-template-columns: repeat(6, auto); justify-content: center; text-align: center; } .bloqueCodigo input[type="text"]{ font-size: 15px; height: initial; padding: 9px !important; text-align: center; text-transform: uppercase; width: 39px; } @media only screen and (max-width:660px) { .invoiceDetail { grid-template-columns: auto; position: relative; } .invoiceDetail span { border-bottom: none; padding: 3px 0 3px 70px; } .invoiceDetail span:nth-child(1), .invoiceDetail span:nth-child(2), .invoiceDetail span:nth-child(3) { display: none } .invoiceDetail span:nth-child(3n+1) { padding: 12px 0 3px 70px; } .invoiceDetail span:nth-child(3n+3) { border-bottom: 1px dashed #ddd; padding: 3px 0 12px 70px; text-align: left; } .invoiceDetail .code:before, .invoiceDetail .name:before, .invoiceDetail .quantity:before { color: #6981c0; font-size: .8em; font-weight: 600; left: 0; position: absolute; text-transform: uppercase; top: 6px; width: 70px; } .invoiceDetail .code:before { content: "Código:" } .invoiceDetail .name:before { content: "Nombre:" } .invoiceDetail .quantity:before { content: "Cantidad:" } } @media only screen and (max-width:560px) { .viewInvoice { display: table; margin-top: 10px; position: relative; top: 0; } } /* ----------- hRow Consignacion -----------*/ .hRowC { align-items: center; border-bottom: 1px solid #ddd; color: #242830; display: flex; grid-template-columns: 35% 24% 24% 17%; padding: 16px 0; transition:all 0.3s ease; justify-content: space-between; } .hRowC:hover { background-color: #f9f9f9 } .hRowC .title { color: #233a76; font-weight: 500; padding-left: 14px; } .hRowC .title em.id { display: block; font-size: .94em; font-style: normal; font-weight: 500; margin-top: 2px; } .hRowC .title em.date { color: #879197; display: block; font-size: .9em; font-style: normal; font-weight: 400; margin-top: 6px; } .hRowC.v2 { border-bottom: 2px solid #6981c0; padding: 0 0 7px 0; } .hRowC.v2:hover { background-color: #fff } .hRowC.v2 .title, .hRowC.v2 .status, .hRowC.v2 .number { color: #6981c0; font-size: .8em; font-weight: 600; } .hRowC .bt { background-color: #233a76; border-radius: 4px; color: #fff; display: block; font-size: .8em; font-weight: 600; margin-right: 10px; padding: 8px 16px; text-align: center; text-transform: uppercase; transition: all 0.3s ease; } .hRowC .bt:hover { background-color: #3c579c } @media only screen and (max-width:836px) { .hRowC { grid-template-columns: 31% 24% 24% 21% } } @media only screen and (max-width:660px) { .hRowC { grid-template-columns: auto } .hRowC:hover { background-color: #fff } .hRowC:nth-child(2) { padding: 0 0 16px 0 } .hRowC.v2 { display: none } .hRowC .title { color: #6981c0; padding-left: 0 } .hRowC .status { margin-top: 10px } .hRowC .number { text-align: left } .hRowC .bt { margin-top: 12px } } /*loading*/ .loadingTmp{ position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); width: 80px; height: 80px; z-index: 999999; display: none; } .loadingTmp img{ width: 100%; height: 100%; } /* ----------- consignment -----------*/ .consignment { display: flex; gap: 30px; margin-bottom: 1.5rem; } .consignment > div { flex: 1 0 0%; } .consignment > div a { border: 1px solid #fff; display: flex; height: 100%; padding: 2.2rem; } .consignment > div a:hover { border: 1px solid #e6e6e6; } .consignment > div a.active { border: 1px solid #455c96; } .consignment img { margin: auto; max-height: 110px; max-width: 200px; } .consignTitle { font-weight: 500; font-size: .95em; margin-bottom: 14px; text-align: center; } .cTable { margin-bottom: 20px; width: 100%; } .mainForm .cTable select { margin: 0; } .mainForm .cTable input[type="checkbox"]{ margin-right: 0; } .cTable th { border-bottom: 1px solid #ddd; color: #879197; font-size: .8em; font-weight: 600; padding: 10px; } .cTable td { border-bottom: 1px solid #ddd; font-size: .82em; padding: 8px 10px; } .txCenter { text-align: center; } @media (max-width:992px) { .consignment { flex-direction: column; gap: 15px } .consignment img { max-height: 80px; max-width: 150px } .consignment > div a { padding: 1.4rem } .cTable thead { display: none; } .cTable tr { border: 1px solid #c7cfdc; border-bottom-width: 2px; display: block; margin-bottom: 20px; padding: 2px 14px; } .cTable tr:last-child { margin-bottom: 0 } .cTable td { display: block; padding: 8px 10px 14px 10px; text-align: left !important; } .cTable td:before { color: #333e50; content: attr(data-label); display: block; font-weight: 600; position: relative; margin: 4px 0; } .cTable td:last-child { border-bottom: none; } .cTable .hideMobile { display: none } } /* ----------- modalProduct -----------*/ .modalProduct { color:#242830; display: flex; gap: 20px; padding: 32px; } .modalProduct img { transition:all 0.3s ease; width: 330px; } .modalProduct:hover img { opacity: .9; } .modalProduct h3 { color: #233a76; font-size: 1.7em; margin-bottom: 2px; transition:all 0.3s ease; } .modalProduct:hover h3 { color: #6981c0; } .modalProduct .pBrand { color: #879197; font-size: .85em; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; } .modalProduct .pDescrip { line-height: 1.4em; transition:all 0.3s ease; } .modalProduct:hover .pDescrip { color: #233a76; } .modalProduct .pNumber { color: #a7bd24; font-size: 1.2em; font-weight: 600; margin-top: 10px; } .modalProduct .pNumber .oldPrice { color: #8a8a8a; display: block; font-size: .8em; font-weight: 500; line-height: 1.4em; padding-top: 2px; text-decoration: line-through; } .mText { padding: 22px 22px 0 22px; } .mText p { font-size: 1.12em; line-height: 1.4em; margin-bottom: 18px; } @media (max-width:768px) { .modalProduct { flex-direction: column; text-align: center; } .modalProduct img { max-width: 330px; width: 100%; } }