/*! Conchell */
/* main.css 1.0.0
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
/*font-size: 1em;*/
font-size: 16px;
line-height: 1.4;
}
body {
/*position: absolute;*/
position: relative;
/*top: 0;*/
left: 0;
/*height: 100%;*/
/*width: 100vw;*/
/*overflow-y: scroll;*/
font-size: 16px;
/*overflow-x: hidden;*/
}
.wrapper {
max-width: 100vw;
overflow-x: hidden;
position: relative;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.bodyFxd {
/*position: fixed;*/
overflow-y: hidden;
}
.chkOfx {
padding-top: 150px;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: 600;
}
.blue, .big-blue {
color: #387EE1;
}
.yellow {
color: #E89B00;
}
.light-blue {
background: #BFE9F3;
}
.faint-blue {
background: #d2e5f3;
}
.faint-brown {
background: #e8e5e1;
}
.medium-green {
background: #88d0d1;
}
.infopagescontent {
overflow-x: hidden;
}
.hero {
display: flex;
position: relative;
height: 100vh;
flex-direction: row;
justify-content: flex-start;
align-items: center;
max-height: 100vh;
overflow: hidden;
color: #fff;
}
.hero .ui-draggable {
position: initial;
}
.mobileherohome {
display: none;
}
.back-img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
max-width: none;
max-height: 100%;
}
.hero .back-img {
/*max-height: none;*/
/*bottom: -15%;*/
/*right: -10%;*/
/*min-height: 150%;*/
/*top: initial;*/
/*left: initial;*/
max-height: none;
bottom: -10%;
top: initial;
left: initial;
right: 0;
/*max-width: 100%;*/
}
.navbar-mobile-menu {
display: none;
}
.navbar {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
position: absolute;
top: 0;
width: 100%;
padding: 40px 40px;
z-index: 3;
}
.whiteunderbg {
background: #ffffff;
}
.public-content-wrapper .navbar {
z-index: 2;
}
.navbar-logo {
width: 25%;
}
.navbar-logo img {
max-height: 35px;
}
.navbar-logo {
width: 25%;
}
.navbar-menu {
/*position: relative;*/
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.navbar-menu li {
list-style-type: none;
}
.navbar-menu a {
padding: 5px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
color: #ffffff;
margin-right: 50px;
}
.navbar-menu a i {
font-size: 14px;
margin-left: 5px;
}
.navbar-menu a:hover {
text-decoration: none;
}
/*.navbar-menu a:last-child {*/
/*margin-right: 0;*/
/*}*/
.navbar-menu a.navbar-link:hover ~ .dropdown-menu {
display: block;
}
.dropdown-menu {
width: 100%;
margin-top: 10px;
padding: 35px 0;
top: initial;
border-radius: 0;
box-shadow: 0 12px 12px rgb(0 0 0 / 18%);
border: 0;
}
.dropdown-menu a {
margin-right: 0;
font-weight: 600 !important;
font-size: 15px;
}
.dropdown-menu li {
display: block;
float: left;
margin-bottom: 5px;
}
.dropdown-menu .lnkGrp {
display: inline-block;
width: 400px;
vertical-align: top;
padding-left: 20px;
border-right: 2px solid #ebebeb;
}
.dropdown-menu .lnkGrp:last-child {
border-right: 0;
}
.dropdown-menu .lnkGrp li {
width: 100%;
margin: 5px 0;
}
.dropdown-menu .lnkGrp span {
display: block;
color: #7A7A7A;
font-size: 18px;
margin-bottom: 15px;
padding-left: 15px;
}
.navbar-cart-icons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 25%;
}
.navbar-cart-icons a {
padding: 10px;
margin-left: 10px;
}
.navbar-cart-icons a:last-child {
display: none;
}
.dark .navbar-menu a {
color: #000;
}
.dark .logo img, .dark .navbar-cart-icons img {
filter: invert(0%) sepia(99%) saturate(4%) hue-rotate(109deg) brightness(0%) contrast(100%);
}
.hero-child {
position: absolute;
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
margin-top: 50px;
padding: 0 40px;
z-index: 2;
}
.hero-child .left-container {
display: flex;
position: relative;
width: 50%;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.hero-child .left-container:before {
content:"";
background: #fff;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: blur(100px);
opacity: 0.8;
}
.hero-child .left-container .header-container {
margin-bottom: 40px;
width: 100%;
}
.hero-child .left-container .header-container h2 {
display: block;
font-size: 52px;
font-weight: 600;
}
.hero-child .left-container .header-container p {
display: block;
font-size: 24px;
}
.hero-child .left-container .header-stats {
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
}
.hero-child .left-container .header-stat {
display: flex;
width: 33.333%;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
text-align: left;
padding-right: 20px;
}
.hero-child .left-container .header-stat-img {
height: 100px;
}
.hero-child .left-container .header-stat img {
height: 100%;
max-width: none;
}
.hero-child .left-container .header-stat h3 {
font-size: 32px;
font-weight: 600;
}
.hero-child .left-container .header-stat p {
font-size: 20px;
}
.hero-child .left-container .header-buttons {
display: flex;
width: 100%;
margin-top: 40px;
flex-direction: row;
justify-content: flex-start;
align-content: flex-start;
}
.hero-child .left-container .header-buttons a {
display: flex;
align-items: center;
text-transform: uppercase;
font-size: 24px;
/*min-width: 200px;*/
font-weight: 500;
color: #ffffff;
padding: 10px 40px;
margin-right: 80px;
border-radius: 2em;
text-align: center;
}
.hero-child .left-container .header-buttons a:hover {
text-decoration: none;
}
.hero-child.dark {
color: #000;
}
.hero-child.dark img {
filter: invert(0%) sepia(99%) saturate(4%) hue-rotate(109deg) brightness(0%) contrast(100%);
}
/*filter: invert(0%) sepia(99%) saturate(4%) hue-rotate(109deg) brightness(0%) contrast(100%);*/
.ful-grad-col {
background: rgb(84,51,255);
background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(84,51,255,1) 22%, rgba(46,151,214,1) 51%, rgba(32,189,199,1) 83%) !important;
}
.lin-grad-col {
/*position: relative;
box-sizing: border-box;
background: rgba(0,0,0,0.9);
background-clip: padding-box;
border: solid 5px transparent;
/*background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(84,51,255,1) 22%, rgba(46,151,214,1) 51%, rgba(32,189,199,1) 83%);
color: #000000 !important;*/ /*edited out by fongyi*/
}
.lin-grad-col:before {
/*content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;*//*edited out by fongyi*/
/*margin: -5px;*/
/*margin: 0px !important;
border-radius: inherit;
z-index: -1 !important;*/ /*edited out by fongyi*/
/*background: rgba(0,0,0,0.9);*/
/*background: rgb(231 238 242);*//*edited out by fongyi*/
/*background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(84,51,255,1) 22%, rgba(46,151,214,1) 51%, rgba(32,189,199,1) 83%);*/
}
.afterPurchBtn {
color: #fff;
padding: 10px 20px;
border-radius: 24px;
border: 0;
}
.key-strengths {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;
padding: 100px 0;
}
.key-strength, .key-strengths.connectSortable .ui-draggable {
width: 15%;
padding: 0 10px;
text-align: center;
}
.key-strengths.connectSortable .ui-draggable .key-strength {
width: 100%;
}
.key-strength-img {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
.key-strength-img img {
max-width: 100%;
max-height: 100%;
}
.key-strength h3 {
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
line-height: 1.3em;
}
.products-grid {
display: flex;
width: 100%;
margin-top: 40px;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
#product_listing_sortby_box {
display: none;
width: 100%;
}
.products-grid .product {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.prodlisting .products-grid .product {
width: calc(33.333% - 20px);
margin-bottom: 20px;
align-items: initial;
}
.product-pic-div {
max-height: 410px;
height: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.product-pic-div img, .product_pic_div img {
max-width: 100%;
max-height: 100%;
}
.home-best-sellers .container {
width: calc(100% - 40px);
justify-content: initial;
}
.home-best-sellers h2 {
font-size: 52px;
text-transform: uppercase;
font-weight: 700;
}
.home-best-sellers .products-grid {
flex-wrap: initial;
justify-content: initial;
}
.public-content-wrapper .home-best-sellers #best-seller-slider .products-grid { flex-wrap: wrap; }
.home_best_sellers_container .swiper-button-next, .home_best_sellers_container .swiper-button-prev {
filter: invert(0%) sepia(99%) saturate(4%) hue-rotate(109deg) brightness(0%) contrast(100%);
}
.ribbonProduct {
display: block;
width: calc(60% + 20px);
height: 30px;
font-weight: 600;
line-height: 30px;
text-align: center;
margin-left: -40px;
margin-right: -10px;
background: #ffdb43;
position: relative;
top: 20px;
}
.ribbonProduct:before {
content: "";
position: absolute;
}
.ribbonProduct:before {
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-top: 10px solid #1f6ab5;
border-left: 10px solid transparent;
}
.ribbonProduct.black {
background: #000;
color: #ffffff;
margin-bottom: 20px;
margin-top: -80px;
}
.ribbonProduct.black:before {
border-top: 10px solid #000000;
}
.home-best-sellers .top_product, .product {
background: #FAFAFA;
width: calc(25% - 20px);
margin: 0 10px;
padding: 30px;
}
.home-best-sellers .top_product a {
display: inline-block;
color: inherit;
/*min-width: 100%;*/
}
.home-best-sellers .top_product a:hover {
text-decoration: none;
}
.home-best-sellers .top_product .product_name, .product .product_name {
margin-top: 10px;
margin-bottom: 20px;
font-weight: 600;
text-transform: uppercase;
}
.product .product_name a {
color: initial;
}
.home-best-sellers .top_product .product_price {
margin-bottom: 20px;
}
.product .product_price {
margin-bottom: 30px;
}
.conchell-protection {
position: relative;
background: #DCE8EF;
margin-top: 80px;
padding: 180px 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
overflow-x: hidden;
}
.conchell-protection .big-caption {
width: 100%;
position: absolute;
/*top: -90px;*/
top: 0;
font-size: 265px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.3;
}
.conchell-protection-item {
display: block;
width: calc(33.333% - 40px);
margin: 0 20px;
min-height: 30vw;
max-height: 40vw;
}
.conchell-protection.connectSortable .ui-draggable:first-child {
width: 100%;
margin-bottom: 180px;
}
.conchell-protection.connectSortable .ui-draggable {
width: calc(33.333% - 40px);
}
.conchell-protection.connectSortable .ui-draggable .conchell-protection-item {
width: 100%;
}
.conchell-protection.connectSortable .ui-draggable .conchell-protection-item img {
max-width: 100%;
margin: 0;
}
.conchell-protection-item .above-sleeve {
font-size: 32px;
font-style: italic;
}
.conchell-protection-item .img-sleeve {
background: #fafafa;
display: block;
width: 100%;
height: 100%;
text-align: right;
overflow: hidden;
}
.conchell-protection-item .img-sleeve img {
min-height: 100%;
max-height: 100%;
max-width: none;
display: block;
float: right;
}
.add_to_cart a {
padding: 10px 18px 8px 18px;
min-width: 200px;
background: #000;
font-size: 16px;
color: #ffffff !important;
text-transform: uppercase;
font-weight: 600;
border-radius: 24px;
}
.add_to_cart a i {
font-style: normal;
}
.ur-assur-section, .or-assur-section {
background: #000;
padding: 150px 0;
font-size: 18px;
display: flex;
flex-direction: column;
color: #ffffff;
}
.ur-assur-section {
background: url(./images/ur-assurance-bg.jpg ) no-repeat;
}
.ur-assur-section .small-caption, .or-assur-section .small-caption, .testimonals .small-caption, .product-div-11 .caption {
font-size: 28px;
color: #387EE1;
font-weight: 700;
text-transform: uppercase;
}
.ur-assur-section h3, .or-assur-section h3, .testimonals h3 {
font-size: 52px;
font-weight: 700;
}
.or-assur-section .small-caption, .or-assur-section h3 {
width: 100%;
}
.ur-assur-section .white-btn, .science .white-btn {
display: block;
font-size: 20px;
/*background: #ffffff;*/
border-radius: 32px;
padding: 12px 24px;
color: #000;
text-transform: uppercase;
font-weight: 700;
min-width: 300px;
cursor: pointer;
}
.ur-assur-section .white-btn {
margin: 150px auto 0;
}
.science .white-btn {
margin: 80px auto 0;
}
.ur-assur-section .white-btn:hover, .science .white-btn:hover {
text-decoration: none;
}
.or-assur-section {
background: transparent;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
color: inherit;
}
.or-assur-section .or-assur-item, .or-assur-section.connectSortable .ui-draggable {
display: inline-block;
width: calc(30% - 20px);
margin: 0 10px;
padding: 15px;
font-size: 20px;
}
.or-assur-section.connectSortable .ui-draggable:first-child, .or-assur-section.connectSortable .ui-draggable:nth-child(2), .or-assur-section.connectSortable .ui-draggable .or-assur-item {
width: 100%;
}
.or-assur-section .or-assur-item .or-assur-item-img {
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.or-assur-section .or-assur-item .or-assur-item-img img {
max-width: 100px;
/*height: fit-content;*/
height: auto;
}
.or-assur-section .or-assur-item:nth-child(5) .or-assur-item-img img {
max-width: 180px;
}
.or-assur-section .or-assur-item h4 {
font-weight: 700;
font-size: 28px;
}
.testimonals {
background: #DCE8EF;
padding: 100px 0;
}
.testimonial-belt {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 50px;
}
.testimonial-container {
padding-bottom: 50px;
}
.testimonial-belt.connectSortable.ui-sortable .testimonial-belt-grid {
flex-wrap: wrap;
}
.testimonals .testimonial {
display: flex;
width: 400px;
margin-right: 30px;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
-webkit-box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
-moz-box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
padding: 30px 30px;
}
.testimonals .testimonial .caption {
font-size: 24px;
font-weight: 600;
margin-bottom: 30px;
}
.testimonals .testimonial .caption-name {
font-size: 18px;
}
.testimonals .testimonial .caption-place {
font-size: 18px;
color: #898989;
}
.testimonial-belt .swiper-pagination-bullet {
height: 25px;
width: 25px;
box-shadow: 0 0 6px 0 rgba(84, 51, 255, 0.5);
border: solid 3px transparent;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5433ff, #20bdc7);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px #DCE8EF inset;
opacity: 1;
pointer-events: all !important;
}
.testimonial-belt .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: rgb(84,51,255);
/*background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(84,51,255,1) 22%, rgba(46,151,214,1) 51%, rgba(32,189,199,1) 83%) !important;*/
box-shadow: none;
}
.product-hero {
display: flex;
flex-direction: row;
align-items: flex-start;
position: relative;
margin-top: -20px;
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.product-hero:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #e3e2e3;
z-index: -1;
}
.product-hero.childmask-hero-fx {
background: #e6d7ec;
}
.product-hero img {
position: absolute;
/*bottom: -50px;*/
bottom: 0;
right: 0;
/*max-height: 100%;*/
max-height: 100%;
/*min-width: 100%;*/
}
.product-hero img.mh0 {
max-height: none;
max-width: 100%;
}
.product-hero-details {
position: absolute;
/*width: 500px;*/
width: 35vw;
/*left: 10vh;*/
left: 40px;
bottom: 10vh;
font-size: 18px;
}
.product-hero-details p:first-child {
font-size: 32px;
}
.product-hero-details h2 {
font-size: 52px;
font-weight: 700;
margin-top: -5px;
}
.mobileheroimage {
display: none;
}
.row-tool {
right: 20px !important;
z-index: 10;
}
.mask-layer {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 100px 10vh;
overflow-x: hidden;
}
.mask-layer::-webkit-scrollbar {
display:none;
}
.mask-layer .mask-picture {
width: 60%;
padding: 10px;
text-align: center;
}
.mask-picture-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 350px;
}
.mask-picture-inner img {
max-height: calc(100% - 10px);
max-width: calc(100% - 10px);
}
.mask-layer .mask-picture img {
max-width: 60%;
}
.mask-picture-thumbnails {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin-top: 20px;
}
.mask-picture-thumbnails .mask-picture-thumbnail {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin-right: 15px;
border: 1px solid #ebebeb;
cursor: pointer;
}
.mask-picture-thumbnails .mask-picture-thumbnail.active {
border-color: #84A4C1;
}
.mask-picture-thumbnails .mask-picture-thumbnail:last-child {
margin-right: 0;
}
.mask-picture-thumbnails .mask-picture-thumbnail img {
max-height: calc(100% - 5px);
max-width: calc(100% - 5px);
}
.mask-layer .mask-details {
width: 40%;
}
.mask-layer .mask-details h3 {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
}
.mask-layer .mask-details .product_detail_price {
font-size: 28px;
font-weight: 700;
color: #387EE1;
}
.mask-layer .mask-details .product_description_detail {
border-top: 1px solid #ebebeb;
padding-top: 20px;
margin-top: 20px;
}
.mask-layer .mask-details span {
text-transform: uppercase;
font-size: 15px;
}
.product-details-switches {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 15px 0;
}
.product-details-switches span.prod-detail-switch {
background: #E5E5E5;
margin-right: 20px;
font-size: 18px;
font-weight: 600;
color: #848484;
border: 3px solid #BFBFBF;
margin-bottom: 15px;
padding: 8px 20px;
border-radius: 30px;
cursor: pointer;
}
.product-details-switches .prod-detail-switch:hover, .product-details-switches .prod-detail-switch.active {
background: #D1DBE8;
color: #387EE1;
border-color: #84A4C1;
}
.product-div-2 {
position: relative;
margin-bottom: -40px;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
/*min-height: 100vh;*/
font-size: 24px;
color: #fff;
/*padding: 100px 10vh;*/
overflow: hidden;
}
.product-div-2:before, .product-div-5:before, .product-div-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
z-index: 1;
}
.public-content-wrapper .product-div-2:before, .public-content-wrapper .product-div-5:before, .public-content-wrapper .product-div-8:before {
display: none;
}
.product-div-2.big-grey {
color: #6e7377;
}
.product-div-2.big-grey:before {
display: none;
}
.product-div-2 .text-over-layer, .product-div-5 .text-over-layer, .product-div-6 .text-over-layer, .product-div-8 .text-over-layer, .product-div-9 .text-over-layer {
/*padding: 100px 10vh;*/
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.product-div-2 .im-par {
height: 100px;
}
.product-div-2 .im-par img {
max-width: 100%;
}
.product-div-5 .text-over-layer {
height: 80%;
margin-top: 5%;
justify-content: space-between;
color: #fff;
}
.product-div-5 .text-over-layer h3 {
font-size: 32px;
}
.product-div-5.colored-text::before {
display: none;
}
.product-div-5.colored-text h1 {
color: #5433FF !important;
font-weight: 800 !important;
}
.product-div-5.colored-text h2 {
font-size: 48px;
font-weight: 700;
color: #333;
}
.product-div-2 .text-over-layer h1, .product-div-5 .text-over-layer h1 {
/*font-size: 10vw;*/
font-size: 150px;
font-weight: 600;
line-height: 0.9em;
color: rgba(255, 255, 255, 0.9);
}
.product-div-2.big-grey .text-over-layer h1, .product-div-5.big-grey .text-over-layer h1 {
color: #6e7377;
}
.product-div-2 .text-over-layer h2 {
font-size: 64px;
font-weight: 700;
text-transform: uppercase;
}
/*.product-div-2 img {*/
/*position: absolute;*/
/*min-width: 100%;*/
/*}*/
.product-div-3 {
padding: 100px 10vh;
overflow-x: hidden;
margin-bottom: -40px;
}
.product-div-3 .mask-letters {
font-size: 58px;
font-weight: 700;
color: #6E7377;
position: relative;
z-index: 2;
}
.product-div-3 .mask-letters:nth-child(1) {
margin-left: 5%;
margin-right: -5%;
}
.product-div-3 .mask-letters:nth-child(3) {
margin-left: -9%;
}
.product-div-3 .mask-letters .big-letter {
font-size: 180px;
font-weight: 600;
margin-bottom: -40px;
color: #000;
}
.product-div-3 .note {
font-size: 24px;
/*font-weight: 600;*/
}
.product-div-4 {
padding: 100px 10vh;
overflow-x: hidden;
margin-bottom: -40px;
}
.product-div-4 h2 {
font-size: 52px;
}
.product-div-4 .mask-ply img {
max-width: 100%;
}
.product-div-5 {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin-bottom: -40px;
/*padding: 100px 10vh;*/
overfloW: hidden;
}
.eco-friend {
max-height: 80px;
}
.product-div-2 img.backg, .product-div-5 img.backg, .product-div-8 img.backg {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
}
.backg-right {
top: 0;
position: absolute;
right: 0;
max-height: 100%;
}
.product-div-6 {
background: #A7C4E0;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin-bottom: -40px;
/*padding: 100px 10vh;*/
overflow: hidden;
}
.product-div-6 img.backg {
position: absolute;
min-width: 100%;
max-height: 100%;
bottom: 0;
}
.product-div-6 .text-over-layer {
align-items: center;
justify-content: flex-end;
text-align: center;
height: 100%;
padding: 100px 0;
font-size: 24px;
}
.product-div-7 {
padding: 100px 10vh;
margin-bottom: -40px;
overflow-x: hidden;
}
.product-div-8 {
/*padding: 100px 10vh;*/
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
margin-bottom: -40px;
overflow: hidden;
}
.product-div-8 .text-over-layer {
width: 730px;
height: auto;
color: #ffffff;
font-size: 28px;
padding: 0 40px;
margin-right: 50px;
}
.product-div-8 h2 {
font-size: 72px;
}
.product-div-8 .shorten-img {
max-width: 140px;
}
.product-div-8.text-dark:before {
display: none;
}
.product-div-8.text-dark .text-over-layer {
color: inherit;
}
.product-div-8 .learn-more-btn {
right: 40px;
}
.product-div-9 {
/*padding: 100px 10vh;*/
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
margin-bottom: -40px;
overflow: hidden;
}
.product-div-9.triton-features-container {
height: 1150px;
}
.product-div-9 .text-over-layer {
height: 100%;
}
.product-div-9 .text-over-layer h2 {
/*font-size: 8.5vw;*/
font-size: 160px;
font-weight: 700;
text-transform: uppercase;
background: rgb(84,51,255);
background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(165,254,203,1) 62%, rgba(86,242,153,1) 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.product-div-9 img.backg {
max-height: 70%;
width: auto;
position: absolute;
bottom: 0;
}
.product-div-9 .call-outs, .product-div-9 .pulsingDots {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
.product-div-9 .call-out {
width: 320px;
padding: 10px 20px;
background: #fff;
-webkit-box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
-moz-box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
box-shadow: 3px 3px 16px 1px rgba(163,163,163,0.7);
border-radius: 8px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product-div-9 .call-out:nth-child(1) {
/*margin-left: -35%;*/
top: calc(50% - 130px);
left: calc(50% - 580px);
}
.product-div-9 .call-out:nth-child(2) {
/*margin-left: -16%;*/
/*margin-top: 19%;*/
top: calc(50% + 320px);
left: calc(50% - 300px);
}
.product-div-9 .call-out:nth-child(3) {
/*margin-top: 7%;*/
/*margin-left: 17%;*/
top: calc(50% + 120px);
left: calc(50% + 250px);
}
.product-div-9 .call-out h3 {
font-weight: 700;
}
.product-div-9 .pulsingDot {
background: #3347FF;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 rgba(51,71,255, 0.4);
animation: pulse 2s infinite;
}
.product-div-9 .pulsingDot.first {
/*margin-left: -12%;*/
/*margin-top: 3.5%;*/
top: calc(50% + 50px);
left: calc(50% - 214px);
}
.product-div-9 .pulsingDot.second {
/*margin-left: 0.5%;*/
/*margin-top: 15%;*/
top: calc(50% + 280px);
left: calc(50% + 45px);
animation-delay: 300ms;
}
.product-div-9 .pulsingDot.third {
/*margin-top: 12%;*/
/*margin-left: 9%;*/
top: calc(50% + 175px);
left: calc(50% + 140px);
animation-delay: 600ms;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(51,71,255, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(51,71,255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(51,71,255, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(51,71,255, 0.4);
box-shadow: 0 0 0 0 rgba(51,71,255, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 15px rgba(51,71,255, 0);
box-shadow: 0 0 0 10px rgba(51,71,255, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(51,71,255, 0);
box-shadow: 0 0 0 0 rgba(51,71,255, 0);
}
}
.headerProd h2 {
font-size: 265px;
margin-bottom: -85px;
font-weight: 800;
color: #5433FF;
white-space: nowrap;
}
.mask-img img {
width: 100%;
}
.big-blue-letters {
font-size: 100px;
font-weight: 600;
}
.big-blue-letters .big-blue {
font-size: 180px;
}
.percent {
color:#20BDC7;
}
.learn-more-btn {
background: #5433FF;
padding: 15px 30px;
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
/*border-radius: 28px;*/
border-radius: 2em;
position: absolute;
bottom: -100px;
font-weight: 600;
}
.learn-more-btn:hover {
color: #ffffff;
text-decoration: none;
}
.mask-ply-explain {
position: relative;
}
.product-div-10 {
position: relative;
background: #9AD4C7;
padding: 200px 10vh 200px 5vw;
overflow: hidden;
margin-bottom: -40px;
}
.product-div-10 .backg {
position: absolute;
right: 0;
max-height: 75%;
top: 12.5%;
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.product-div-10 .text-over-layer {
color: #ffffff;
font-size: 20px;
}
.icon-list-item {
position: relative;
padding-left: 100px;
}
.icon-list-item-img {
position: absolute;
top: 0;
left: 0;
width: 100px;
text-align: center;
}
.icon-list-item img {
max-height: 50px;
width: auto;
margin: 20px 20px !important;
}
.product-div-11 {
position: relative;
padding: 200px 10vh;
overflow: hidden;
margin-bottom: -40px;
}
.product-div-11 h1 {
font-size: 52px;
}
.product-div-11 .care-instructions {
margin-top: 40px;
}
.product-div-11 .care-instruction {
display: flex;
width: 250px;
font-size: 18px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.product-div-11 .care-instruction .care-instruction-img {
display: flex;
height: 170px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.product-div-11 .care-instruction .care-instruction-img img {
max-width: 100%;
max-height: 100%;
}
.product-div-11 .note {
margin-top: 40px;
font-size: 28px;
}
.product-div-11 .caption {
}
.videoSciPage {
overflow-x: initial;
}
.videoSciPage .product-hero {
margin-top: -62px;
}
.videoSciPage .product-div-2, .videoSciPage .product-div-6, .videoSciPage .product-div-8 {
height: 100vh;
}
#sci1.tempGry {
background-color: #e3e2e3;
}
#sci1.tempGry:before {
content: "";
position: absolute;
top: -10vh;
left: 0;
height: 10vh;
width: 100%;
background: #e3e2e3;
}
.product-quantity-addbtn .product-quantity {
display: block;
float: left;
margin-top: 20px;
margin-right: 20px;
/*border-radius: 50px;*/
border: 1px solid #CBCBCB;
}
.product-quantity-addbtn .product-quantity #quantity {
width: 65px;
border: 0;
padding: 10px 0;
text-align: center;
pointer-events: none;
}
.product-quantity-addbtn .product-quantity input[type=number]::-webkit-inner-spin-button,
.product-quantity-addbtn .product-quantity input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-quantity-addbtn .product-quantity i {
padding: 17px 20px;
cursor: pointer;
}
.product-quantity-addbtn a.btn.addtocart {
display: block;
clear: both;
float: left;
background: #000000;
margin-top: 40px;
border-radius: 50px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
min-width: 250px;
}
.cartparent {
margin-top: 100px;
margin-bottom: 100px;
}
.catlisting {
display: none;
}
.prodlisting {
margin: 200px 0;
}
footer{
position: relative;
background: #141B4D;
padding: 50px 50px;
overflow-y: hidden;
}
.footer-logo img {
max-width: 150px;
}
footer div.footerBlocks {
display: flex;
padding: 20px 0;
color: #fff;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
footer div.footerBlock, footer.connectSortable .ui-draggable {
flex-direction: column;
min-width: 15%;
font-size: 14px;
margin: 0 10px;
}
footer div.footerBlock:nth-child(1), footer div.footerBlocks.connectSortable .ui-draggable:nth-child(1) {
margin-left: 0;
min-width: 30%;
}
footer div.footerBlock:nth-child(2), footer div.footerBlocks.connectSortable .ui-draggable:nth-child(2) {
min-width: 30%;
}
footer div.footerBlock:nth-child(1) .logo, footer div.footerBlock:nth-child(1) p {
margin-bottom: 20px;
}
footer div.footerBlocks.connectSortable .ui-draggable div.footerBlock {
width: 100%;
}
footer div.footerBlock p {
position: relative;
margin-bottom: 10px;
}
footer div.footerBlock i {
width: 30px;
margin-right: 5px;
font-size: 20px;
text-align: center;
color: #132746;
}
footer div.footerBlock h4 {
display: block;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 5px;
}
footer div.footerBlock ul li {
list-style-type: none;
}
footer div.footerBlock a:last-child:before {
display: none;
}
footer div.footerBlock a {
display: block;
margin: 0 0 10px;
color: #ffffff;
}
footer div.footerBlock a:hover {
text-decoration: none;
}
.img6fx .care-instruction {
width: 13%;
}
.science-video {
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
max-height: 100vh;
width: 100%;
z-index: 0;
}
.public-content-wrapper .science-video {
z-index: -1;
}
.science-video video {
max-height: 100%;
max-width: 100%;
}
.footUp {
visibility: hidden;
position: fixed;
right: 50px;
bottom: 25px;
height: 50px;
width: 50px;
background: #141b4d;
color: #fff;
border: 3px solid #fff;
border-radius: 50%;
padding: 14px 16px 16px 15px;
/*padding: 16px;*/
cursor:pointer;
z-index: 10;
}
/******************* Accordion Clue *****************/
.panel-group-parent {
padding: 0 40px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.panel-left-title {
width: 40%;
}
.panel-left-title h3 {
font-size: 32px;
}
#accordionClue, #accordionCluePink, #accordionmob {
/*display: flex;*/
/*flex-direction: row;*/
display: block;
width: 100%;
/*align-content: flex-start;*/
/*justify-content: flex-start;*/
}
#accordionClue .panel, #accordionCluePink .panel, #accordionmob .panel {
display: block;
float: left;
margin-top: -2px;
border-top: 2px solid #E5E5E5;
border-bottom: 2px solid #E5E5E5;
border-left: 0;
border-right: 0;
border-radius: 0;
box-shadow: none;
/*width: 340px;*/
width: 100%;
/*margin-right: 30px;*/
}
#accordionmob .panel {
border-top: 1px solid #787878;
border-bottom: 1px solid #787878;
}
#accordionCluePink .panel {
border-top-color: #ED78A0;
border-bottom-color: #ED78A0;
}
#accordionClue .panel-heading, #accordionCluePink .panel-heading, #accordionmob .panel-heading {
padding: 0;
background: #fff;
position: relative;
}
/*#accordionClue .panel-heading:before,*/
/*#accordionClue .panel-heading:after{*/
/*content: "";*/
/*border-right: 8px solid #bf6026;*/
/*border-bottom: 8px solid transparent;*/
/*border-top: 8px solid transparent;*/
/*position: absolute;*/
/*top: 12px;*/
/*left: -9px;*/
/*}*/
/*#accordionClue .panel-heading:after{*/
/*border-right: 7px solid #fff;*/
/*border-bottom: 7px solid transparent;*/
/*border-top: 7px solid transparent;*/
/*position: absolute;*/
/*top: 13px;*/
/*left: -6px;*/
/*}*/
#accordionClue .panel-title a, #accordionCluePink .panel-title a, #accordionmob .panel-title a {
display: block;
padding: 15px 20px 15px 20px;
border: none;
font-size: 20px;
font-weight: 500;
color: #454545;
text-align: left;
position: relative;
}
#accordionmob .panel-title a {
color: #787878;
margin-top: 5px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
}
#accordionClue .panel-title a:hover, #accordionCluePink .panel-title a:hover, #accordionmob .panel-title a:hover {
text-decoration: none;
}
#accordionCluePink .panel-title a {
color: #ED78A0;
}
#accordionClue .panel-title a:before,
#accordionClue .panel-title a.collapsed:before,
#accordionCluePink .panel-title a:before,
#accordionCluePink .panel-title a.collapsed:before,
#accordionmob .panel-title a:before,
#accordionmob .panel-title a.collapsed:before{
content: "-";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 28px;
color: #1D3869;
text-align: center;
position: absolute;
top: -5px;
right: 0px;
transition: all 0.5s ease 0s;
}
#accordionmob .panel-title a:before,
#accordionmob .panel-title a.collapsed:before {
color: #787878;
}
#accordionCluePink .panel-title a:before,
#accordionCluePink .panel-title a.collapsed:before {
color: #ED78A0;
}
#accordionClue .panel-title a.collapsed:before, #accordionCluePink .panel-title a.collapsed:before, #accordionmob .panel-title a.collapsed:before { content: "+"; }
#accordionClue .panel-body, #accordionCluePink .panel-body, #accordionmob .panel-body {
padding: 0 15px 15px 20px;
border: none;
font-size: 14px;
color: #807e7e;
line-height: 28px;
text-align: left;
}
.clue-identify #accordionClue .panel-body {
display: flex;
flex-direction: row;
}
.clue-identify #accordionClue .panel-body img {
max-width: 85px;
margin-right: 15px;
height: fit-content;
}
.ui-draggable .panel-collapse.collapse {
display: block !important;
}
#accordionClue .panel-body p, #accordionCluePink .panel-body p { margin-bottom: 0; }
/******************* Accordion Clue End *****************/
.sci-belt-grid {
/*position: absolute;*/
background: #ffffff;
/*top: calc(10vh + 197px);*/
/*left: 0;*/
/*width: 100%;*/
/*height: 50%;*/
/*z-index: 2;*/
}
.sci-belt-grid .product-div-8 {
display: block;
}
.sci-container .swiper-button-next, .sci-container .swiper-button-prev {
background: rgb(205 28 28 / 70%);
width: 50px;
height: 60px;
filter: invert(99%) sepia(34%) saturate(0%) hue-rotate(180deg) brightness(111%) contrast(100%);
/*top: 80%;*/
top: 6%;
}
/* ==========================================================================
Helper classes
========================================================================== */
/* CD Cart */
.cd-img-replace {
/* replace text with a background-image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#cd-cart {
width: 500px;
/*height: 100vh;*/
height: 100%;
position: fixed;
margin-top: 0;
right: -100%;
top: 0;
background: #FFF;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: 999;
}
#cd-cart.speed-in {
right: 0;
}
#cd-cart > * {
padding: 0;
}
#cd-cart h2 {
font-size: 14px;
margin: 1em;
}
#cd-cart .cd-cart-items {
/*height: 77.5vh; */
height: calc(100vh - 200px);
overflow-y: scroll;
padding: 0;
}
#cd-cart .cd-cart-items::-webkit-scrollbar {
display: none;
}
#cd-cart .cd-cart-items li {
/*display: inline-block;*/
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
position: relative;
cursor: pointer;
padding: 5px;
width: 100%;
min-height: 100px;
border-top: 1px solid #e0e6ef;
}
#cd-cart .cd-cart-items li:last-child {
border-bottom: 1px solid #e0e6ef;
}
#cd-cart .cd-cart-items li a { color: #000; text-decoration: none; }
/*#cd-cart .cart-quantity, #cd-cart .cart-name, #cd-cart .cart-price, #cd-cart .cart-image {*/
/*position: relative;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
/*-webkit-transform: translateY(-50%);*/
/*-moz-transform: translateY(-50%);*/
/*-ms-transform: translateY(-50%);*/
/*-o-transform: translateY(-50%);*/
/*padding-right: 5px;*/
/*padding-left: 4px;*/
/*}*/
#cd-cart .cart-remove {
font-size: 13px;
}
#cd-cart .cart-remove a {
color: #ab5e31;
}
#cd-cart .cart-price {
text-align: right;
width: 25%;
font-size: 14px;
padding: 6px 6px 6px 0;
}
#cd-cart .cart-name { width: 100%; margin-bottom: 15px; font-size: 15px; letter-spacing: 0.2px; ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; overflow: hidden;}
#cd-cart .cart-quantity {
/*width: 25%;*/
width: 37%;
padding: 4px 9px;
font-size: 0.8em;
border: 1px solid #ebebeb;
text-align: center;
margin-right: 35px;
margin-top: -3px; }
#cd-cart .cart-image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 25%;
/*border-right: 1px solid #ebebeb;*/
text-align: center;
overflow: hidden;
}
#cd-cart .cart-image a, #cd-cart .cart-name a, #cd-cart .cart-quantity a, #cd-cart .cart-price a {
pointer-events: none;
}
#cd-cart .cart-image img {
max-width: 100%;
width: auto;
position: relative;
/*top: 50%;*/
/*transform: translateY(-50%);*/
/*-webkit-transform: translateY(-50%);*/
/*-moz-transform: translateY(-50%);*/
/*-ms-transform: translateY(-50%);*/
/*-o-transform: translateY(-50%);*/
}
#cd-cart .cart-details {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
width: 50%;
height: 100%;
padding: 5px;
}
#cd-cart .cd-qty, #cd-cart .cd-price {
color: #a5aebc;
}
#cd-cart .cd-price {
width: 25%;
text-align: right;
margin-top: .4em;
}
#cd-cart .cd-item-remove {
position: absolute;
right: 1em;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: url(./images/cd-remove-item.png) no-repeat center center;
}
.no-touch #cd-cart .cd-item-remove:hover {
background-color: #e0e6ef;
}
#cd-cart .cd-cart-total {
padding: 10px 15px;
font-weight: bold;
}
#cd-cart .cd-cart-total span {
float: right;
font-weight: bold;
}
#cd-cart .cd-cart-total::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
#cd-cart .viewcart-btn {
width: calc(100% - 25px);
background: transparent;
color: #000;
text-align: center;
position: absolute;
border-radius: 30px;
margin: 0 15px;
height: 20px;
font-size: 16px;
line-height: 20px;
bottom: 65px;
left: 0;
cursor: pointer;
}
#cd-cart .viewcart-btn:hover {
background-color: transparent !important;
}
#cd-cart .checkout-btn {
display: block;
float: left;
position: absolute;
left: 0;
bottom: 0;
/*width: 45%;*/
width: calc(100% - 25px);
border-radius: 30px;
margin: 15px;
height: 45px;
font-size: 14px;
line-height: 45px;
color: #FFF;
cursor: pointer;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}
/*#cd-cart .viewcart-btn:hover*/
#cd-cart .checkout-btn:hover { opacity: 0.8; }
/*#cd-cart .checkout-btn { left: 50%; }*/
.no-touch #cd-cart .checkout-btn:hover {
background: #a2dda8;
}
#cd-cart .cd-go-to-cart {
/*text-align: center;*/
/*margin: 1em 0;*/
}
#cd-cart .cd-go-to-cart a {
/*text-decoration: underline;*/
}
#cd-cart-trigger-2 {
/*display: none;*/
/*position: absolute;*/
/*top: 10px;*/
/*right: 10px;*/
}
#cd-cart-trigger, #cd-cart-trigger-2 {
/*float: right;*/
position: relative;
cursor: pointer;
}
#cd-cart-trigger a, #cd-cart-trigger-2 a {
/*width: 40px;*/
/*height: 20px;*/
/*background-image: url(./images/cd-cart.png);*/
/*background-repeat: no-repeat;*/
/*background-position: center center;*/
/*background-size: 50%;*/
}
.shopcartNumber {
background: #4097ff;
position: absolute;
top: -6px;
right: -6px;
border-radius: 50%;
min-height: 10px;
min-width: 10px;
padding: 0px 6px 0 5px;
font-size: 14px;
font-weight: 600;
color: #fff;
}
#cd-cart .close-cart {
width: 30px;
height: 30px;
font-size: 12px;
color: #fff;
background: #909090;
text-align: center;
border-radius: 20px;
padding: 8px;
float: right;
margin-top: -38px;
margin-right: 5px;
cursor: pointer;
}
/* Shadow Layer */
#cd-shadow-layer {
position: fixed;
min-height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(67, 87, 121, 0.6);
cursor: pointer;
z-index: 17;
display: none;
}
#cd-shadow-layer.is-visible {
display: block;
-webkit-animation: cd-fade-in 0.3s;
-moz-animation: cd-fade-in 0.3s;
animation: cd-fade-in 0.3s;
}
/* end CD Cart */
#slider1 {
margin: 0 auto;
}
.swiper-pic-slider {
padding-top: 20px;
display: none;
}
.desktop-slider {
padding-top: 20px;
}
/* Content Cart */
.shopping-cart-info { width: 100%; margin: 20px auto;}
.shopping-cart-title {
display: none;
width: 100%;
float: left;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
.header-name {
width: 55%;
display: inline-block;
padding-left: 17%;
}
.header-price-qty {
width: 12%;
display: inline-block;
}
.header-qty {
width: 10%;
display: inline-block;
}
.header-points {
display: none;
float: right;
font-size: 0.8em;
padding: 2px 10px;
margin-bottom: 5px;
background: #ddd;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
}
.header-price {
width: 10%;
display: inline-block;
padding-left: 3%;
}
.content-item { background: #f9f9f9; width: 100%; margin: 10px auto; border-bottom: 0; /* border-bottom: 1px solid #d5d5d5; */ /* vertical-align: top; */ padding: 20px 20px; /* max-height: 120px; */ overflow: hidden; position: relative; display: flex; align-items: center; justify-content: flex-start; }
/*.content-item:first-child { border-top: 1px solid #EBEBEB; }*/
.cart-content-item td {padding:5px 0;}
.content-item-img { width: auto; margin: 0; display: inline-block; vertical-align: top; max-height: 100px; overflow: hidden; }
.content-item-img a { display: inline-block; vertical-align: top; }
.content-item-img img { max-width: 100%; padding: 6px 12px; border: 1px solid #707070; }
.content-item-name { display: inline-block; vertical-align: middle; margin: 0 6% 0 2%; width: 30%;}
.content-item-name h4 { padding: 0 0 5px; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.content-item-name a { text-decoration: none; /*text-transform: uppercase;*/ font-size: 18px; font-weight: 700; color: inherit; }
.content-item-name span { font-size: 16px; }
.content-item-price-qty {width: 100px; text-align: right; margin-top: -15px; display: inline-block; position: relative; /* margin-bottom: 20px; */ /* height: 100%; */ padding-right: 20px;}
.content-item-qty { /*display: none;*/ display: inline-block; vertical-align: middle; text-align: center; width: 30%;}
.content-item-qty .qty-field { display: block; float: left; width: 120px; margin-top: -15px; margin-right: 50px; border: 1px solid #bbb; }
.content-item-qty input { text-align: center;}
.content-item-qty input::-webkit-outer-spin-button, .content-item-qty input::-webkit-inner-spin-button {display: none;}
.content-item-qty .cart_remove2 { font-size:; /*position: absolute; left: 0; top: 15px;*/ display: block; float: left; margin-top: -10px; color: inherit; text-decoration: none; }
/*.content-item-qty .cart_remove2:before {*/
/*content:"X";*/
/*font-size: 28px;*/
/*color: #959595;*/
/*}*/
.content-item-qty br { display: none; }
.content-item-price { display: inline-block; width: 15%; margin-top: -21px; text-align: right; float: right; font-size: 24px; font-weight: 700; }
.shopping-cart-summary { display: inline-block; width: 100%;}
.cart-remove-all { width: 79%; /*display: inline-block;*/ display: none; }
#cart_remove2 { font-size: 0.8em; color: #555; }
.shopping-cart-total-qty { /*display: inline-block;*/ display: none; width: 5%; text-align: center;}
.shopping-cart-total-price { display: inline-block; float: right; width: 15%; font-weight: bold; text-align: right; padding-right: 20px; /*margin-right: 65px;*/ }
.shopping-cart-total-price:before {
content: "TOTAL:";
float: left;
margin-left: -100px;
margin-top: 2px;
font-size: 23px;
font-weight: 500;
}
.shopping-cart-apply-discount { margin: 20px auto;}
.shopping-cart-apply-discount input[type="text"] {border: 1px solid #141b4d; border-radius:24px; padding: 5px 100px 5px 20px;}
.shopping-cart-apply-discount td { padding-left: 0;}
.cart-description { margin-top: 100px; margin-bottom: 50px; text-align: center; }
.cart-description h3 { font-size: 32px; font-weight: 700; }
.cart-description p { display: none;}
.ShowCartCheckOutBtn { border: 0;}
.ShowCartChangeQtyBtn { display: none; background: #3f3f3f; color: #fff; border: 0;/* border-radius: 2px;*/}
.ShowCartContinueBtn { background: transparent; color: #000000; border: 0; float: left; font-size: 18px; font-weight: 600; padding-left: 0 !important; padding-right: 0 !important; /*border-radius: 2px;*/}
.shopping-cart-buttons { margin: 20px auto; text-align: right;}
.ShowCartChangeQtyBtn, .ShowCartCheckOutBtn { font-weight: 700; padding: 1% 2%;}
.ShowCartCheckOutBtn { width: 250px; border-radius: 24px; text-transform: uppercase; }
.mobile-shopping-cart-buttons { display: none; text-align: right; margin-bottom: 20px; }
.mobile-shopping-cart-buttons .ShowCartChangeQtyBtn { display: none;}
#coupon { font-size: 16px; }
.DiscountCouponButton{ background: #000; color: #fff; border: 0;}
.primary_button { border: 0;}
.paymentlist { display: inline; float: right; padding-left: 4px; }
.paymentlist #checkoutoptions { display: none!important; padding-top: 10px; position: absolute; margin-left: -55px; }
.content-item-qty input[type="text"] {
width: 50%;
text-align: center;
/*display: block;*/
display: none;
margin: 0 auto;
}
.cart_no_items {
margin: 10px 0;
display: block;
font-size: 1.2em;
}
.ShowCartContinueBtn, .ShowCartChangeQtyBtn, .ShowCartCheckOutBtn {
/*color: #fff;*/
border: none;
padding: 10px 20px;
}
.ShowCartCheckOutBtn, .checkout-form .primary_button, .checkout2-form .primary_button {
font-family:'Inter' !important;
}
.cart-no-item { margin: 0 auto; display: block; }
.cart_total_value2,.cart_total_currency_type2 {
font-size: 24px;
}
#shipping_calculator table tr td table tr td .label { color: #000; }
#shipping_calculator table tr td table tr td {
color: #000;
display: block;
float: left;
width: 100%;
text-align: center;
padding: 3px 0;
}
#shipping_calculator table tr td table tr { padding: 5px 0; }
.ShippingCalculatorButton { background: #3f3f3f; color: #fff; font-weight: 700; border: none; padding: 10px 20px; }
.discount-item { display: inline-block; width: 100%; padding: 10px 0; border-bottom: 1px solid #ebebeb
; }
.discount-item div { width: 12%; display: inline; float: left; padding-right: 50px; border-right: 1px solid #ebebeb;padding-left: 35px;padding-right: 35px;}
.discount-item div:first-child { padding-left: 0; }
.discount-item div:last-child { text-align: right; border-right: 1px solid transparent; }
.discount-info {
width: 53% !important;
}
.discount-qty {
width: 11% !important;
}
.discount-remove {
width: 10% !important;
padding-right: 0px;
}
.discount-value {
width: 13% !important;
}
form[action="checkout3.cfm"] {
margin-top: 40px;
}
/* Content Cart end */
/* checkout */
.checkout1-form{ display:none; }
#logincheckout1{ display:none; }
.checkout-form{ width: calc(50% - 50px);display:inline-block;vertical-align:top;margin-right:50px; margin-top: 50px; border-right: 0; }
.checkout-form *:focus { outline: none; }
.checkout-form input[type="text"], .checkout-form input[type="password"]{ border:0px;padding:5px;width:95%;margin:-4px 1px 0px 1px;background: transparent;}
.checkout-form select{ border:0px;padding:5px;width:95%; }
.checkout-form .formlabel{ display:block;text-align:left;font-size:14px;color:#999;padding-left:5px;white-space:nowrap; }
.checkout-form .formpair{border:1px solid #ccc;border-radius:5px;padding:0px;margin:5px;width:47.3%;/*height:45px;*/height:51px;vertical-align:top;}
.checkout-form .formrow:nth-child(4) .formpair, .checkout-form .formrow:nth-child(5) .formpair, .checkout-form .formrow:nth-child(6) .formpair, .checkout-form .formrow:nth-child(7) .formpair { width:97.5% !important; }
.checkout-form .checkoutform{border:0px;padding:0px;}
.checkout-form .checkoutform h4 { padding-left: 5px; font-weight: 700; text-transform: uppercase; }
.checkout-form .input{width:100%;}
.border-blue{border:1px solid #1990c6!important;}
.checkout-form #shiptodifferentaddress{display:none;}
.checkout-form #customer_registration_link{display:none;}
.checkout-form #customer_registration{display:block;}
.checkout-form #checkout_cart{display:none;}
.checkout-form #checkoutagreement{margin-left:10px;}
.checkout-form .buttonprimarycluster{padding-right:35px;text-align:right;}
/*.checkout-form .primary_button{border:0px;padding:10px 30px !important;border-radius:24px; width: 250px; background: #1D3869 !important;}*/
.checkout-form .primary_button, .checkout2-form-submit .primary_button {border:0px;padding:10px 30px !important;border-radius:24px; width: calc(100% + 10px); margin-left: 10px; background: #1D3869 !important;}
#login-form #login { border:0px;padding:10px 30px !important;border-radius:24px; background: #1D3869 !important; }
.checkout-form .secondary_button{border:0px;background:none;}
.checkout-form .secondary_button:hover{text-decoration:underline;}
.loginsection{text-align:center;}
.checkout-form .subscribenewsletter{display:none;}
.shopping-cart{ width:45%;height:777px;display:inline-block;vertical-align:top;padding: 20px;margin-top: 40px; background-color: #FCF5F8; }
.shopping-cart table{width:100%;}
.shopping-cart table tr:first-child{display:none;}
.shopping-cart .cart-apply-discount { display: none; }
.shopping-cart #coupon{text-decoration:underline;cursor:pointer;padding:10px;}
.shopping-cart .coupon{padding:10px;}
.shopping-cart .applycouponid{text-decoration:underline;}
.applycouponid { text-decoration: none; font-size: 14px; cursor: pointer; margin-left: -75px; text-transform: uppercase; font-weight: 700; color: #1F396D; }
.shopping-cart #discount-coupon-field{padding:5px;}
.shopping-cart .discount-result {display:none;}
.shopping-cart .discount-result, .shopping-cart #discount-coupon-form {text-align: left;}
.shopping-cart input[type="button"], .shopping-cart input[type="submit"]{display:none;}
.shopping-cart .cart_remove2{display:none;}
.shopping-cart .cart_empty_cart2{display:none;}
.shopping-cart .cart_discount_remove2{display:none;}
.register-now{text-align:center;cursor:pointer;padding:10px;}
.register-now:hover{text-decoration:underline;}
.extra-login-option{text-align:center;padding:30px 10px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;width:60%;margin:0 auto;margin-top:20px;margin-bottom:20px;}
.extra-login-option i{background-color:#ccc;width: 40px;height: 40px;text-align: center;padding: 5px;border-radius: 5px;cursor:pointer;margin:5px;}
.fa-facebook:hover{background:#3765A3;color:white;}
.fa-amazon:hover{background:#231F20;color:white;}
.fa-google:hover{background:#DD5044;color:white;}
.guest{text-align:center;padding:10px;width:60%;margin:0 auto;cursor:pointer;}
.guest:hover{text-decoration:underline;}
.checkoutform{min-width:auto!important;}
.checkout-form h1{text-align:center;}
/* the size of the name, quantity and price */
/*.content-item-name, .content-item-price-qty, .content-item-price { font-size: 0.9em; }*/
.or{text-align:center;font-weight:bold;}
#parsley-id-multiple-checkout_agreement{position:absolute;margin-top:50px;}
.cart-tax{padding-right:20px;}
/* checkout 2 */
#multi_cur_form{text-align:right;display:none;}
.checkout2-form h2{font-size:20px;padding-top:0px;}
.checkout2-form{width:49%;display:inline-block;vertical-align:top;margin-left:15px;padding:10px;padding-top:0px;}
.shipping-to-info{list-style-type:none;}
.shipping-method{margin-bottom:30px;}
.shipping-method label{width:96%;padding:15px;border:1px solid #ccc;border-top:0px;font-weight:normal;cursor:pointer;}
.shipping-method label:first-child{border-top:1px solid #ccc;border-top-left-radius:5px;border-top-right-radius:5px;}
.shipping-method label:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.shipping-method input[type='Radio']{margin-right:10px;}
.payment-method{margin-bottom:30px;}
.payment-method label{width:96%;padding:15px;border:1px solid #ccc;border-top:0px;font-weight:normal;cursor:pointer;}
.payment-method label:first-child{border-top:1px solid #ccc;border-top-left-radius:5px;border-top-right-radius:5px;}
.payment-method label:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.payment-method input[type='Radio']{margin-right:10px;}
.billing-address label{width:96%;padding:15px;border:1px solid #ccc;border-top:0px;font-weight:normal;cursor:pointer;}
.billing-address label:first-child{border-top:1px solid #ccc;border-top-left-radius:5px;border-top-right-radius:5px;}
.billing-address label:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.billing-address input[type='Radio']{margin-right:10px;}
#CheckoutForm2 table{display:none;}
.billing-address .checkout-form h4{display:none;}
.billing-address .checkout-form{width:100%;margin:0px;border:0px;display:none;}
.billing-address #checkoutagreement{display:none;}
.billing-address .buttonprimarycluster{display:none;}
.checkout2-form-submit{text-align:right;padding:10px;}
.checkout2-form .primary_button{border:0px;padding:10px!important; margin-right: 10px;}
.cart-shipping-method{text-align:right;padding-right:10px;}
.cart-grand-total{text-align:right;padding-right:10px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding-top:5px;padding-bottom:5px;margin-top:10px;font-size:25px;display:none;}
.cart-tax{text-align:right;font-size:14px;}
/* Payment */
.payment-form{width:49%;display:inline-block;vertical-align:top;border-right:1px solid #ddd;margin-left:15px;padding:10px;padding-top:0px;}
.payment-shopping-cart #coupon{display:none;}
img[src='images/border1.gif'],img[src='images/border2.gif'],img[src='images/border5.gif'],img[src='images/border6.gif']{display:none;}
td[background='images/border1_bg.gif'],td[background='images/border3_bg.gif'],td[background='images/border4_bg.gif'],td[background='images/border5_bg.gif'],.border1_bg_td,.border3_bg_td,.border4_bg_td,.border5_bg_td{
background:none!important;
}
.payment-form .form-horizontal .control-label{width:100%;text-align:left;font-weight:normal;}
/* Shopping Cart */
.shopping-cart{ position: relative;width:45%;height:677px;display:inline-block;vertical-align:top;padding: 20px;margin-top: 40px; background-color: #FCF5F8; }
.shopping-cart table{width:100%;}
.shopping-cart table tbody { display: block; position: relative; height: 570px; overflow-y: scroll; }
.shopping-cart table tr:first-child, .shopping-cart table tbody::-webkit-scrollbar {display:none;}
.shopping-cart .cart-apply-discount { display: none; }
.shopping-cart #coupon{text-decoration:underline;cursor:pointer;padding:10px;}
.shopping-cart .coupon{padding:10px;}
.shopping-cart .applycouponid{text-decoration:underline;}
.applycouponid { text-decoration: none; font-size: 14px; cursor: pointer; margin-left: -75px; text-transform: uppercase; font-weight: 700; color: #1F396D; }
.shopping-cart #discount-coupon-field{padding:5px;}
.shopping-cart .discount-result, .shopping-cart tr.cart-summary-total .cart-total-qty {display:none;}
.shopping-cart .discount-result, .shopping-cart #discount-coupon-form {text-align: left;}
.shopping-cart input[type="button"], .shopping-cart input[type="submit"]{display:none;}
.shopping-cart .cart_remove2{display:none;}
.shopping-cart .cart_empty_cart2{display:none;}
.shopping-cart .cart_discount_remove2{display:none;}
.shopping-cart table tr { position: relative; display: inline-block; width: 100%; }
.shopping-cart table tr.cart-content-item {
border-bottom: 1px solid #cce1ed;
padding: 15px 0;
display: inline-block;
width: 100%;
/*height: 700px;*/
}
.shopping-cart table .cart-content-item-name { display: inline-block; float: left; width: 150px; }
.shopping-cart table .cart-content-item-name h4 { padding: 3px 0; text-transform: uppercase; font-weight: 700; }
.shopping-cart table .cart-content-item-img { background: #ffffff; padding: 5px; border: 1px solid #cce1ed; display: inline-block;
width: 105px; margin-right: 10px; float: left; }
/*.shopping-cart table .cart-content-item-price-qty, .shopping-cart table .cart-content-item-qty { display: none; }*/
.shopping-cart table .cart-content-item-price { display: inline-block; float: left; width: 120px; position: absolute; right: 0; text-align: right; font-weight: 700; }
.shopping-cart table .cart-summary-total, .shopping-cart .cart-summary-total { font-size: 24px; font-weight: 700; position: absolute; left: 0; /*bottom: 155px;*/ bottom: 0; padding-right: 10px; }
.shopping-cart .cart-summary-total .cart-total-price { padding-left: 10px; }
/* Shopping Cart end */
/* Repetition of Currency Converter */
#multi_cur_form {
display: none !important;
float: right;
margin: -15px 0 -15px !important;
padding-left: 20px;
font-size: 10px;
}
#multi_cur_form select {
display: inline;
background: #e5e5e5;
color: #464646;
font-weight: bold;
font-size: 10px;
letter-spacing: 1px;
border: none;
padding: 1px 2px;
margin-left: 8px;
margin-bottom: 0;
}
.cntcpghead {
font-size: 32px;
margin-bottom: 70px;
font-weight: 700;
}
.contact-form tbody {
display: flex;
width: 900px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.contact-form tr {
display: flex;
width: 370px;
margin: 0 40px 10px;
flex-direction: column;
}
.contact-form tr td:first-child {
text-align: left;
font-size: 24px;
padding-bottom: 5px;
}
.contact-form tr td:first-child span.label {
/*color: #213C6D;*/
color: #333;
}
.contact-form tr:nth-child(5) { margin-bottom: 2px; }
.contact-form tr:nth-child(6), .contact-form tr:nth-child(7) { width: 100%; }
.contact-form tr:nth-child(7) {
padding-top: 40px;
}
.contact-form tr:nth-child(7) td {
text-align: center;
}
.contact-form input[type="text"], .contact-form select{
width: 100%;
color: #000;
margin: 0 23px 23px 0;
font-size: 14px;
padding: 12px 10px;
outline: none;
/*border-radius: 8px;*/
border: 1px solid #7F7F7F;
}
.contact-form input[type="reset"]{
display:none;
}
.contact-form textarea{
width: 100%;
color: #000;
font-size: 14px;
resize: none;
height: 185px;
padding: 12px;
outline: none;
/*border-radius: 8px;*/
border: 1px solid #7F7F7F;
}
.contact-form input[type=submit] {
border: none;
color: #ffffff;
padding: 12px 15px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
background: #1D3869;
border-radius: 30px;
width: 200px;
}
.contact-form input[type=submit]:hover {
background: #162A4F;
transition: .5s all;
-webkit-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
-moz-transition: .5s all;
}
.cntcpgbtm {
background: #DCE8EF;
margin-bottom: -20px;
}
.cntcpgblk {
background: #ffffff;
border: 2px solid #1D3869;
padding: 40px 20px;
font-weight: 600;
/*border-radius: 14px;*/
}
.cntcpgbtmlhead {
font-size: 28px;
line-height: 1.2em;
font-weight: 700;
margin-bottom: 20px;
}
.cntcpgbtml p {
font-size: 18px;
margin-bottom: 20px;
/*color: #ffffff;*/
}
.acount-btn{border:0px;}
#newlogin h3,#userlogin h3 {
color: #000;
font-size: 20px;
padding-bottom: 18px;
font-weight: 600;
}
#newlogin p,#userlogin p {
color: inherit;
display: block;
font-size: 1.1em;
margin: 0 0 2em 0;
line-height: 1.5em;
}
#userlogin input[type="submit"]:hover{
opacity: 0.8;
text-decoration:none;
}
#newlogin form, #userlogin form {
padding: 1em 0;
}
#newloginform div,#userlogin form div {
padding: 0 0 2em 0;
}
#newlogin span, #userlogin span {
color: #555;
font-size:1em;
padding-bottom: 0.2em;
display: block;
text-transform: uppercase;
font-weight:normal;
}
#userlogin input[type="text"] {
border: 1px solid #EEE;
outline-color:#CACACA;
width: 96%;
font-size:13px;
padding: 8px;
}
#userlogin input[type="password"] {
border: 1px solid #EEE;
outline-color:#CACACA;
width: 96%;
font-size:13px;
padding: 8px;
}
#userlogin input[type="submit"], .sign-up-form #submitbtnsignup {
color: #FFF;
background: #000;
font-size: 18px;
/* font-style: italic; */
/* padding: 5px 15px 7px; */
height: 40px;
width: 140px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
display: inline-block;
border: none;
outline: none;
}
#userlogin input[type="text"], .sign-up-form input[type="text"] {
border: 1px solid #767082;
outline-color:#CACACA;
width: 350px;
font-size: 13px;
padding: 10px;
}
#userlogin input[type="password"], .sign-up-form input[type="password"] {
border: 1px solid #767082;
outline-color:#CACACA;
width: 350px;
font-size:13px;
padding: 10px;
}
#userlogin input[type="button"] {
background-color:transparent;
border:0px;
color:#337AC4;
}
#userlogin input[type="button"]:hover{
text-decoration:underline;
}
#newlogin{/*display:inline-block;width:49%*/display:none;width:100%;vertical-align:top;}
#userlogin{/*display:inline-block;width:49%*/display:none;width:100%;vertical-align:top;}
#userlogin td{/*padding:10px;*/ padding: 10px 0;}
#userlogin td td, .sign-up-form div {
padding: 10px 0;
/*font-size: 16px;*/
/*color: #4c455c;*/
}
#showQuestion{display:inline-block;}
#maincontent{padding:10px;}
#userlogin span.label{display:none;}
#userlogin table{width:100%;}
.reg .tableheader{
color: #000000;
font-size: 16px;
text-transform: uppercase;
margin: 0px;
font-weight: bold;
}
.reg .tableheader2{
font-family: "PlayfairDisplay-Regular";
font-size:24px;
color:black;
}
.reg td{padding: 0px 0px 22px}
.reg .tablecell{color:#CAC9C9;}
.reg {width:70%;}
.reg input[type="reset"]{display:none;}
.reg select{
width: 100%;
color: #000;
margin: 0px 23px 23px 0px;
font-size: 14px;
padding: 12px 10px;
outline: medium none;
border: 1px solid #E8E8E8;
}
.reg input[type="button"]{
background-color:transparent;
border:0px;
color:#337AC4;
}
.reg input[type="button"]:hover{
text-decoration:underline;
}
.checkout1-form input[type="text"], .checkout1-form input[type="password"] {
border: 1px solid #EEE;
outline-color:#CACACA;
font-size:13px;
padding: 8px;
}
.checkout1-form ul li div:first-child{font-family: "PlayfairDisplay-Regular"; font-size:24px;}
#checkout_popup input[type="text"], #checkout_popup select, #checkout_popup input[type="password"]{
border: 1px solid #EEE;
outline-color:#CACACA;
font-size:13px;
padding: 8px;
}
.checkout1-form ul li div.formlabel{font-size:14px;}
/* My Account */
.login-wrapper{
display: flex;
flex-direction: row;
width: 800px;
margin: 60px auto;
}
.login-wrapper .sign-in {
flex-basis: calc(50% - 20px);
}
.or {
/*display: flex;*/
position: relative;
width: 40px;
/*font-family:'Frutiger Condensed', Arial, serif;*/
color: #4c455c;
margin: 0 20px;
text-align: center;
justify-content: center;
align-items: center;
}
.or:after {
content:"";
background: #4c455c;
height: 100%;
width: 1px;
position: absolute;
top: 0;
left: calc(50% - 1px);
/*transform: translateX(-50%);*/
z-index: 1;
}
.or span {
background: #fafafa;
position: relative;
font-size: 24px;
font-weight: 600;
/*font-style: italic;*/
text-transform: uppercase;
padding-bottom: 10px;
z-index: 2;
}
.login-wrapper .sign-up {
flex-basis: calc(50% - 20px);
}
.login-wrapper h3 {
/*font-family:'Frutiger Condensed', Arial, serif;*/
font-size: 36px;
/*color: #4c455c;*/
}
.login-wrapper .sign-in h3 {
display: none;
}
.login-wrapper .sign-in .login-wrapper h3 {
display: block;
margin-bottom: 30px;
text-transform: uppercase;
font-size: 24px;
font-weight: 600;
}
.or, .sign-up {
display: none;
}
.login-wrapper .login-wrapper .or, .login-wrapper .login-wrapper .sign-up {
display: flex;
}
.login-wrapper .sign-in .sign-in #userlogin {
display: block;
}
.public-content-wrapper [data-aos^=fade][data-aos^=fade] {
opacity: 1;
}
.public-content-wrapper [data-aos=fade-up], .public-content-wrapper [data-aos=fade-left], .public-content-wrapper [data-aos=fade-down], .public-content-wrapper [data-aos=fade-right] {
transform: translate3d(0,0,0);
}
.infpgfx {
margin-top: 150px;
}
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* ==========================================================================
* FONG YI's AMENDMENTS
========================================================================== */
/*******/
/*General*/
/*******/
a, a:hover,
#cd-cart .checkout-btn, #cd-cart .viewcart-btn,
#cd-cart .checkout-btn:hover, #cd-cart .viewcart-btn:hover {
-webkit-transition: background 0.2s, background-color 0.2s, background-image 0.2s, color 0.2s;
-moz-transition: background 0.2s, background-color 0.2s, background-image 0.2s, color 0.2s;
transition: background 0.2s, background-color 0.2s, background-image 0.2s, color 0.2s;
}
.ful-grad-col:hover,
.iesbackgroundcolor3:hover {
background: #051488;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #2b58ff, #051488) !important;
}
.lin-grad-col {
box-shadow: 0 0 6px 0 rgba(84, 51, 255, 0.5);
border: solid 3px transparent;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5433ff, #20bdc7);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 2px 1000px 1px #fff inset;
color: #051488 !important;
}
.ur-assur-section .lin-grad-col:hover, .science .lin-grad-col:hover {
box-shadow: none;
color: #fff !important;
}
/*.ur-assur-section .lin-grad-col:hover {*/
/*background: #051488 !important;*/
/*background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #2b58ff, #051488) !important;*/
/*}*/
.iesbackgroundcolor3 {
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5433ff, #20bdc7);
}
.or-assur-section .or-assur-item {
width: calc(30% - 30px);
margin: 0 15px;
padding: 20px;
font-size: 16px;
}
.home-best-sellers h2, .ur-assur-section h3, .or-assur-section h3, .testimonals h3 {
font-size: 42px;
}
.ur-assur-section .small-caption, .or-assur-section .small-caption, .testimonals .small-caption, .product-div-11 .caption {
font-size: 24px;
}
/*******/
/*Homepage*/
/*******/
.navbar-logo img {
max-height: 28px;
}
.navbar-menu a {
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
}
.dropdown-menu a {
font-weight: 500 !important;
font-size: 14px;
}
.dropdown-menu .lnkGrp span {
margin-bottom: 10px;
}
.dropdown-menu .lnkGrp li {
margin: 8px 0;
}
.hero-child .left-container .header-container {
width: 80%;
text-align: left;
margin-bottom: 20px;
}
.hero-child .left-container .header-stat-img {
height: 56px;
}
.hero-child .left-container .header-container h2 {
font-size: 44px;
margin-bottom: 14px;
line-height: 1.2em;
}
.hero-child .left-container .header-stat {
width: 30%;
padding-right: 35px;
}
.hero-child .left-container .header-stat h3 {
font-size: 35px;
font-weight: 500;
margin-top: 12px;
}
.hero-child .left-container .header-stat p {
font-size: 16px;
width: 80%;
}
.hero-child .left-container .header-container p {
font-size: 18px;
line-height: 1.5em;
}
.hero-child .left-container .header-buttons a {
font-size: 18px;
padding: 10px 60px;
font-weight: 600;
}
.hero-child .left-container .header-buttons a:hover {
background-colour: #051488;
color: white !important;
}
.add_to_cart a {
font-size: 12px;
letter-spacing: 0.05em;
}
.add_to_cart a:hover,
.product-quantity-addbtn a.btn.addtocart:hover,
#cd-cart .viewcart-btn:hover {
background-color: #444444;
}
.hero-child .left-container .header-buttons a:hover {
box-shadow: none;
color: white !important;
}
.key-strength-img {height: 70px;}
.key-strength h3 {font-size: 18px;}
.conchell-protection-item {margin-top: 30px;}
.conchell-protection-item h3 {margin-bottom: 20px;}
.conchell-protection-item .above-sleeve {font-size: 24px;}
/*.ur-assur-section .white-btn:hover,*/ .iesbackgroundcolor3:hover {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #5433ff, #20bdc7);
color: white !important;
}
.mask-ply-explain .learn-more-btn{
display:none;
}
/*******/
/*Product Description General CSS*/
/*******/
.product-hero-details p:first-child {
font-size: 30px;
font-weight: 300;
}
.product-hero-details h2 {
font-size: 44px;
font-weight: 600;
}
.product-div-2, .product-div-6, .product-div-8 {
height: 126vh;
}
.product-div-2 .text-over-layer h2 {
font-size: 50px;
}
.product-div-2 h3 {
font-weight: 700;
font-size: 18px;
line-height: 26px;
}
.product-div-3 .note {
font-size: 20px;
}
.product-div-5 .text-over-layer h3 {
font-size: 22px;
line-height: 1.4em;
}
.product-div-2 h3.bold {
font-size: 20px;
}
.product-div-5 {
height: 130vh;
}
.eco-friend {
max-height: 60px;
}
.product-div-8 img.backg {
max-height: 110%;
}
.product-div-2, .product-div-6 .text-over-layer,
.product-div-4 p,
.product-div-8 p {
font-size: 18px;
}
.product-div-8 p:first-child {
font-size: 22px;
}
.product-div-8 h2 {
font-size: 44px;
}
/*.product-div-8 .text-over-layer {
padding-left: 10%;
}*/
.product-div-9 {
height: 140vh;
}
/**/
.mask-img {
text-align: center;
}
.mask-img img {
width: 75%;
}
.product-div-11 .care-instructions {
margin-top: 80px;
}
.product-div-11 .care-instruction .care-instruction-img {
height: 100px;
margin-bottom: 25px;
}
/*******/
/*Mini Cart*/
/*******/
a.removecartitem {
color: #555 !important;
font-style: italic;
}
a.removecartitem:hover {
text-decoration: underline!important;
}
/*******/
/*Checkout Page*/
/*******/
.cartparent {font-size: 90%;}
.cart-content-item td {padding:5px 14px 5px 0;}
#login-form #login,
.checkout-form .primary_button {
padding: 10px 40px !important;
background: #222222 !important;
}
.checkout2-form .primary_button {
background: #222222!important;
width: calc(100% - 10px);
margin-left: 0;
margin-right: 20px;
}
#login-form #login:hover, .checkout-form .primary_button:hover,
.checkout2-form .primary_button:hover {
background: #000000!important;
}
.shopping-cart {background-color: #eef9ff;}
tr.cart-summary-total {
border-top: 1px #cccccc solid;
}
tr.cart-summary-total td {
font-weight: 700;
padding: 10px 0;
}
.cart_total_value2,.cart_total_currency_type2 {
font-size: 20px;
}
#cd-cart .checkout-btn:hover, #cd-cart .viewcart-btn:hover {
opacity: 1;
}
/*******/
/*View Cart Page*/
/*******/
.shopping-cart-info .content-item-name a,
.content-item-price {
font-size: 16px;
font-weight: 500;
}
.content-item-img img {
padding: 12px;
border: 1px solid #d6d6d6;
}
.ShowCartCheckOutBtn {
width: 200px;
border-radius: 50px;
padding: 15px;
}
/*******/
/*Contact Us Page*/
/*******/
.contact-form input[type=submit] {
font-family: 'Inter', Arial, sans-serif;
}
.cntcpgblk {
border: none;
}
.cntcpgbtml p {
font-size: 16px;
}
.contact-form input[type="text"], .contact-form select, .contact-form textarea {
margin-top: 5px;
border-color: #cccccc;
}
/* ==========================================================================
* FONG YI's AMENDMENTS END
========================================================================== */
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 1921px) {
.science-video video {
min-width: 100%;
}
.ur-assur-section {
background-size: cover;
}
}
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (max-width: 1600px) {
.hero, .product-div-2, .product-div-5 {
height: 110vh;
max-height: 110vh;
}
.hero .back-img {
/*bottom: -15%;*/
bottom: -5%;
/*right: -20%;*/
}
/*.product-div-9 .pulsingDot.first {*/
/*margin-top: 5.5%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(3) {*/
/*margin-top: 12%;*/
/*margin-left: 12%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(2) {*/
/*margin-left: -18%;*/
/*}*/
}
@media only screen and (max-width: 1440px) {
.hero .back-img {
max-width: 110%;
bottom: 0;
/*right: -30%;*/
}
/*.hero,*/ .product-div-2, .product-div-5 {
height: 130vh;
max-height: 130vh;
}
.hero-child .left-container {
width: 60%;
}
.product-div-9 .text-over-layer h2 {
font-size: 130px;
}
.key-strength {
width: 19%;
}
.product-div-2 .text-over-layer h1, .product-div-5 .text-over-layer h1 {
font-size: 120px;
}
.product-hero-details {
width: 45vw;
}
/*.product-div-9 .pulsingDot.third {*/
/*margin-top: 17%;*/
/*margin-left: 9%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(2) {*/
/*margin-left: -20%;*/
/*}*/
/*.hero-child .left-container .header-buttons a {*/
/*padding: 10px 20px;*/
/*}*/
}
@media only screen and (max-width: 1439px) {
.hero .back-img {
max-width: none;
bottom: 0%;
right: 0;
max-height: 100%;
}
}
@media only screen and (max-width: 1380px) {
footer div.footerBlock:nth-child(1), footer div.footerBlock:nth-child(2) {
width: 29%;
min-width: initial;
}
/*.product-div-9 .pulsingDot.first {*/
/*margin-top: 7.5%;*/
/*}*/
/*.product-div-9 .pulsingDot.second {*/
/*margin-left: -4%;*/
/*margin-top: 16%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(1) {*/
/*margin-left: -38%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(3) {*/
/*margin-left: 15%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(2) {*/
/*margin-top: 20%;*/
/*}*/
}
@media only screen and (max-width: 1300px) {
/*.hero,*/ .product-div-2, .product-div-5 {
height: 150vh;
max-height: 150vh;
}
/*.hero .back-img {*/
/*max-width: 120%;*/
/*bottom: 0%;*/
/*right: -5%;*/
/*max-width: none;*/
/*bottom: 0%;*/
/*right: -5%;*/
/*max-height: 100%;*/
/*}*/
.navbar-menu {
width: 60%;
}
.key-strength {
width: 20%;
}
.navbar-cart-icons {
width: 15%;
}
.hero-child .left-container {
width: 70%;
}
footer div.footerBlock:nth-child(1), footer div.footerBlock:nth-child(2){
width: calc(27% - 14px);
}
/*.product-div-9 .call-out:nth-child(1) {*/
/*margin-left: -40%;*/
/*}*/
}
@media only screen and (max-width: 1200px) {
/*.product-div-9 .pulsingDot.second {*/
/*margin-left: -5%;*/
/*margin-top: 18%;*/
/*}*/
/*.product-div-9 .pulsingDot.third {*/
/*margin-top: 20%;*/
/*}*/
/*.product-div-9 .pulsingDot.first {*/
/*margin-left: -14%;*/
/*}*/
.product-div-9 .call-out:nth-child(1) {
/*margin-left: -45%;*/
left: calc(50% - 480px);
}
/*.product-div-9 .call-out:nth-child(2) {*/
/*margin-top: 24%;*/
/*}*/
.product-div-9 .call-out:nth-child(3) {
/*margin-top: 14%;*/
left: calc(50% + 200px);
}
.navbar-menu {
display: none;
}
.navbar {
align-items: center;
}
.navbar-menu {
width: 0;
}
.navbar-logo {
width: 60%;
}
.navbar-cart-icons {
width: 40%;
}
.navbar-cart-icons img {
min-width: 22px;
}
.navbar-cart-icons a:last-child {
display: block;
}
.navbar-mobile-menu {
display: flex;
flex-direction: column;
background: #ffffff;
width: 100%;
padding: 80px 0;
position: absolute;
top: 0;
right: -100%;
height: 100%;
z-index: 10;
}
.navbar-mobile-menu.open {
right: 0;
}
.navbar-mobile-menu li {
width: 100%;
margin-bottom: 30px;
list-style-type: none;
}
.navbar-mobile-menu li a {
width: 100%;
padding: 10px 20px;
font-size: 24px;
text-transform: uppercase;
color: #000000;
}
.navbar-mobile-menu li a i {
font-size: 16px;
display: block;
margin-top: 7px;
float: right;
margin-right: 15px;
}
.navbar-mobile-menu li.open i {
transform: rotate(45deg);
}
.navbar-mobile-menu li .dropdown-menu {
width: 100%;
position: relative;
box-shadow: none;
border: 0;
top: initial;
}
.navbar-mobile-menu li.open .dropdown-menu li {
margin-bottom: 0;
}
.navbar-mobile-menu li.open .dropdown-menu li a {
font-size: 14px;
padding: 10px 15px;
}
.close-mob-menu {
font-size: 36px;
position: absolute;
top: 15px;
right: 15px;
}
}
@media only screen and (max-width: 1100px) {
/*.product-div-9 .pulsingDot.first {*/
/*margin-left: -16%;*/
/*}*/
/*.product-div-9 .pulsingDot.second {*/
/*margin-top: 20%;*/
/*}*/
/*.product-div-9 .pulsingDot.third {*/
/*margin-top: 24%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(1) {*/
/*margin-left: -47%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(2) {*/
/*margin-top: 25%;*/
/*margin-left: -25%;*/
/*}*/
/*.product-div-9 .call-out:nth-child(3) {*/
/*margin-top: 18%;*/
/*}*/
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (max-width: 780px) {
/* ==========================================================================
Added by Fongyi
========================================================================== */
/*******/
/*HomePage*/
/*******/
.hero-child .left-container {
width: 100%;
}
}
@media only screen and (max-width: 1000px) {
.mw100 {
width: 100% !important;
}
.m-ml {
margin-left: 0 !important;
}
.m-mr {
margin-right: 0 !important;
}
.m-txctr {
text-align: center !important;
}
.m-flex-row {
flex-direction: row !important;
}
.m-flex-row-wrap {
flex-direction: row !important;
flex-wrap: wrap !important;
}
.m-text-center {
text-align: center;
}
.dropdown-menu .lnkGrp {
padding-left: 5px;
padding-bottom: 10px;
margin-bottom: 20px;
border-right: 0;
border-bottom: 2px solid #ebebeb;
}
.navbar {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.hero {
background: #22384D;
height: auto;
max-height: none;
/*height: 190vh;*/
/*max-height: 190vh;*/
}
.hero-child .left-container::before {
display: none;
}
.hero .back-img {
/*max-width: 100%;*/
}
.mobileherohome {
/*display: block;*/
}
.desktopherohome, .mobileherohome {
display: none;
}
#cd-cart {
/*right: -200%;*/
width: 100%;
}
#cd-cart .cd-cart-items {
/*height: 69.5vh;*/
height: calc(100vh - 200px);
}
.navbar-logo img {
max-height: 25px;
}
.or-assur-section .or-assur-item:nth-child(5) .or-assur-item-img img {
height: initial;
}
.hero-child {
/*margin-top: 150px;*/
position: relative;
padding: 0 20px;
flex-direction: column;
/*top: 43vh;*/
}
.hero-child .left-container {
width: 100%;
}
.hero-child .left-container .header-container h2, .home-best-sellers h2, .ur-assur-section h3, .or-assur-section h3, .testimonals h3 {
font-size: 32px;
line-height: 1.3em;
}
.hero-child .left-container .header-buttons {
flex-direction: column;
justify-content: center;
}
.hero-child .left-container .header-stat {
position: relative;
width: 100%;
padding-right: 0;
margin-bottom: 20px;
padding-left: 100px;
/*flex-direction: row;*/
}
.hero-child .left-container .header-stat p {
font-size: 18px;
}
.hero-child .left-container .header-stat h3 {
font-size: 24px;
margin-top: 0;
}
.hero-child .left-container .header-buttons a {
margin-right: 0;
font-size: 20px;
margin-bottom: 20px;
justify-content: center;
}
.hero-child .left-container .header-stat-img {
max-width: 80px;
position: absolute;
top: 0;
left: 0;
}
.hero-child .left-container .header-stat-img img {
max-width: 80%;
height: auto;
}
.ur-assur-section .small-caption, .or-assur-section .small-caption, .testimonals .small-caption, .product-div-11 .caption, .or-assur-section .or-assur-item h4 {
font-size: 20px;
}
.hero-child .left-container .header-container p {
font-size: 18px;
line-height: 1.5em;
}
.hero .back-img {
position: absolute;
bottom: initial;
right: initial;
/*max-height: 45vh;*/
max-height: 48vh;
min-height: initial;
top: 0;
/*right: -2%;*/
}
/*.hero-child .left-container .header-buttons a:first-child {*/
/*display: none !important;*/
/*}*/
.hero .hero-child.dark {
color: #ffffff;
}
.hero .hero-child.dark img {
filter: initial;
}
/*.lin-grad-col {*/
/*color: #ffffff !important;*/
/*}*/
.lin-grad-col::before {
background: #22384D;
}
.key-strengths {
flex-wrap: wrap;
}
.key-strengths .key-strength {
width: 50%;
padding: 10px 10px;
}
.key-strength h3 {
font-size: 18px;
}
.home-best-sellers .products-grid {
flex-wrap: initial;
justify-content: initial;
}
.home-best-sellers .container {
width: 100%;
}
.home-best-sellers .top_product {
width: calc(50% - 20px);
/*padding: 10px;*/
margin: 0;
}
.testimonals .testimonial {
margin: 0;
}
.conchell-protection {
padding: 40px 20px 80px 20px;
}
.conchell-protection .big-caption {
display: none;
}
.conchell-protection-item {
width: 100%;
margin: 10px 0 0;
height: 60vh;
min-height: initial;
max-height: none;
overflow: hidden;
}
.conchell-protection .big-caption {
font-size: 180px;
top: -60px;
}
.testimonals .testimonial .caption {
font-size: 20px;
}
.or-assur-section .or-assur-item {
width: 100%;
margin: 10px 0;
font-size: 18px;
}
.product-hero {
height: initial;
max-height: initial;
flex-wrap: wrap;
/*background: transparent !important;*/
}
.bg-cover-right {
background-image: none !important;
}
.videoSciPage .product-hero {
/*margin-top: 30vh;*/
margin-top: 0;
}
.videoSciPage .product-div-8 .text-over-layer {
padding-top: 15px;
}
.videoSciPage {
display: block;
height: 100vh;
}
.product-hero img {
position: relative;
/*max-height: 60vh;*/
left: 50%;
transform: translateX(-50%);
/*margin-left: -50% !important;*/
}
/*.venusta-hero-fx img {*/
/*margin-left: -130% !important;*/
/*}*/
/*.tio-hero-fx img {*/
/*margin-left: -108% !important;*/
/*}*/
/*.childmask-hero-fx img {*/
/*max-height: 60vh !important;*/
/*max-width: none !important;*/
/*}*/
/*.cleantouch-hero-fx img {*/
/*margin-left: -155% !important;*/
/*}*/
.product-hero-details h2 {
font-size: 32px;
}
.product-div-4 h2 {
font-size: 32px;
}
.product-hero-details p:first-child {
font-size: 24px;
}
div[data-iessection="layoutinformationpage"] .product-hero-details {
background: #ffffff;
width: 100%;
padding: 20px;
position: relative;
left: initial;
bottom: initial;
text-align: center;
}
.cleantouch-hero-fx .product-hero-details, .videoSciPage .product-hero-details {
background: transparent !important;
}
.product-div-2 .text-over-layer h1, .product-div-5 .text-over-layer h1 {
font-size: 42px;
}
.mask-layer {
flex-wrap: wrap;
padding: 50px 10px;
/*padding: 100px 10px;*/
overflow: initial;
}
.mask-layer .mask-picture {
width: 100%;
margin-bottom: 40px;
}
.mask-layer .mask-picture img {
max-width: 80%;
}
.mask-layer .mask-details {
width: 100%;
}
.text-over-layer {
width: 100%;
padding: 0 10px;
}
.product-div-2 .text-over-layer h2 {
font-size: 24px;
}
.product-div-3, .product-div-4 {
/*padding: 50px 0px;*/
padding: 100px 10px;
}
.product-div-3 .mask-letters {
font-size: 28px;
}
.product-div-3 .mask-letters .big-letter {
font-size: 48px;
margin-bottom: -10px;
}
.product-div-2 p {
font-size: 18px;
}
.product-div-3 .mask-letters:nth-child(1) {
margin-right: -8%;
}
.product-div-3 .mask-letters:nth-child(3) {
margin-left: -15%;
}
.big-blue-letters .big-blue {
font-size: 80px;
}
.big-blue-letters {
font-size: 40px;
}
.product-div-3 .note {
font-size: 18px;
}
.product-div-8.airwave {
background: #BBD7D8;
flex-direction: column;
height: 121vh;
}
.product-div-8.airwave:before {
display: none;
}
.product-div-8.airwave img.backg {
min-height: auto;
}
.product-div-8 h2 {
font-size: 42px;
}
.sci-belt-grid .product-div-8 h2 {
font-size: 28px;
}
.product-div-8 .text-over-layer {
width: 100%;
font-size: 18px;
padding: 20px 20px;
margin-right: 0;
text-align: center;
}
.product-div-8 .text-over-layer img {
max-height: 40px;
}
.product-div-8 img.backg, .product-div-9 img.backg {
position: relative;
height: 70vh;
}
.product-div-8.autoTxt {
height: 70vh;
}
.product-div-8.autoTxt img.backg {
position: absolute;
right: -100%;
}
.product-div-9 .text-over-layer h2 {
font-size: 52px;
}
.product-div-9 .call-outs {
position: relative;
height: auto;
}
.product-div-9 .call-out {
position: relative;
width: 100%;
box-shadow: none;
text-align: left;
top: initial !important;
left: initial !important;
transform: initial;
margin: 0 !important;
}
.product-div-11 {
/*padding: 200px 20px;*/
padding: 80px 20px;
}
.product-div-5 .text-over-layer {
text-align: center;
}
.product-div-5 .text-over-layer h3 {
font-size: 20px;
/*font-size: 24px;*/
}
.product-div-10 .backg {
position: relative;
max-height: initial;
top: initial;
max-height: 50vh;
}
.product-div-10 {
padding: 80px 20px 80px 20px;
}
.product-div-10 .text-over-layer {
font-size: 18px;
}
.product-div-11 h1 {
font-size: 32px;
}
.headerProd h2 {
font-size: 90px;
}
.prodlisting {
margin: 70px 0;
}
.prodlisting .products-grid .product {
width: calc(50% - 20px);
}
.mask-picture-inner {
height: 250px;
}
.infopagescontent {
overflow: initial;
}
.panel-group-parent {
flex-wrap: wrap;
padding: 0 20px;
}
.panel-left-title {
width: 100%;
margin-bottom: 10px;
}
.panel-left-title h3 {
font-size: 24px;
}
#accordionClue .panel-title a, #accordionCluePink .panel-title a, #accordionmob .panel-title a {
font-size: 18px;
padding: 15px 20px 15px 0px;
}
#accordionClue .panel-body, #accordionCluePink .panel-body, #accordionmob .panel-body {
padding: 0 15px 15px 0px;
}
#cd-cart .cart-details {
position: relative;
}
#cd-cart .cart-quantity {
width: 88px;
position: relative;
z-index: 2;
}
#cd-cart .cart-remove {
position: absolute;
left: 105px;
bottom: 13px;
}
.science-video {
position: absolute;
top: 10vh;
}
.contact-form tbody {
width: 100% !important;
flex-direction: column !important;
}
.contact-form tr {
width: 100%;
margin: 0;
}
.login-wrapper {
flex-direction: column;
width: 100%;
margin-top: 30px;
}
.login-wrapper .or {
display: none;
}
.content-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
padding: 10px 10px 10px 100px;
max-height: none;
}
.content-item-img {
position: absolute;
top: 10px;
left: 10px;
}
.content-item-name {
margin: 0 2% 0 2%;
width: 61%;
}
.content-item-price-qty {
margin: 0;
/*width: 80px;*/
width: 100%;
padding-right: 0px;
}
.content-item-price-qty.price {
width: 100px;
font-weight: 600;
text-align: left;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 10px;
}
.content-item-qty .qty-field {
margin-top: 8px;
margin-right: 0;
margin-left: 6px;
}
.content-item-price {
width: 100%;
font-size: 18px;
text-align: left;
padding-left: 5px;
margin-top: 5px;
}
.content-item-qty {
width: 100%;
}
.content-item-qty .cart_remove2 {
margin-top: 14px;
margin-left: 10px;
}
.desktopheroimage {
display: none;
}
.mobileheroimage {
display: block;
}
.cart-description {
margin-top: 50px;
}
.cart-description h3 {
font-size: 24px;
}
.ShowCartContinueBtn { width: 100%; float: left;}
.shopping-cart-buttons .ShowCartContinueBtn { width: 50%; font-size: 16px; }
.ShowCartChangeQtyBtn { width: 49%; float: right;}
.ShowCartCheckOutBtn { width: 100%; margin: 20px auto; padding: 1em 0;}
.shopping-cart-info { width: 95%;}
.mobile-shopping-cart-buttons .ShowCartCheckOutBtn { padding: 0.7em 0; width: 100%; margin-top: -10px;}
.mobile-shopping-cart-buttons .ShowCartChangeQtyBtn { margin-top: 4em; margin-bottom: 5%; float: right;}
.mobile-shopping-cart-buttons .ShowCartContinueBtn { margin-top: 1em; margin-bottom: 5%;}
.cart-remove-all { width: 70%;}
.shopping-cart-total-qty { width: 10%;}
.paymentlist { float: none; padding-left: 0; }
.cart_redeem_link { right: 14px; display: block; position: absolute; }
.discount-item div {
padding-left: 5px;
padding-right: 5px;
}
.discount-remove {
width: 16% !important;
}
.discount-remove a {
font-size: 12px;
}
.discount-info {
width: 43% !important;
}
.discount-value {
width: 30% !important;
}
.content-item-price {
position: absolute;
top: 5px;
right: 5px;
text-align: right;
width: 40%;
font-size: 15px;
font-weight: 600;
}
.checkout-form {
width: 100%;
margin: 40px 0;
}
.shopping-cart {
width: 100%;
}
.shopping-cart table .cart-content-item-name {
width: 130px;
}
.checkout-form .formpair {
width: 97.5%;
}
.shopping-cart-total-price {
width: 26%;
}
.shopping-cart-total-price:before {
font-size: 20px;
margin-top: 0px;
}
/*.img6fx*/ .care-instruction, .img6fx .care-instruction, .product-div-11 .care-instruction {
width: calc(50% - 20px);
margin: 0 10px 20px 10px;
}
/*.img6fx*/ .care-instruction h3, .img6fx .care-instruction h3, .product-div-11 .care-instruction h3 {
font-size: 18px;
}
.backg-right {
top: -3%;
right: -30%;
max-height: 60%;
}
/*.login-wrapper .sign-in {*/
/*border-bottom: 1px solid #4c455c;*/
/*}*/
footer {
padding: 50px 20px;
}
footer div.footerBlocks {
width: 100%;
}
footer div.footerBlock {
width: 100%;
margin: 10px 0;
}
footer div.footerBlock ul {
padding-left: 0;
}
footer div.footerBlock:last-child {
width: 100%;
text-align: center;
border-top: 1px solid #fff;
padding-top: 30px;
}
footer div.footerBlock:last-child a {
color: #939393;
}
.footUp {
right: 20px;
}
.sci-container div.swiper-slide[data-swiper-slide-index="1"]:before {
content: "1";
position: absolute;
top: 5px;
left: 25px;
background: #333;
z-index: 4;
height: 25px;
width: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.sci-container div.swiper-slide[data-swiper-slide-index="2"]:before {
content: "2";
position: absolute;
top: 5px;
left: 25px;
background: #333;
z-index: 4;
height: 25px;
width: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.sci-container div.swiper-slide[data-swiper-slide-index="3"]:before {
content: "3";
position: absolute;
top: 5px;
left: 25px;
background: #333;
z-index: 4;
height: 25px;
width: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.sci-container div.swiper-slide[data-swiper-slide-index="4"]:before {
content: "4";
position: absolute;
top: 5px;
left: 25px;
background: #333;
z-index: 4;
height: 25px;
width: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.sci-container div.swiper-slide[data-swiper-slide-index="5"]:before {
content: "5";
position: absolute;
top: 5px;
left: 25px;
background: #333;
z-index: 4;
height: 25px;
width: 25px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
}
.product-div-9.triton-features-container img.backg {
left: initial;
height: auto;
max-width: 100%;
}
.product-div-9.triton-features-container {
flex-direction: column;
height: auto;
}
.pulsingDots {
display: none;
}
/* ==========================================================================
Added by Fongyi
========================================================================== */
/*******/
/*HomePage*/
/*******/
.hero {
flex-direction: column;
/*height: 155vh;*/
}
.hero-child {
padding-left: 30px;
padding-right: 30px;
top: initial;
padding-bottom: 60px;
}
.hero-child .left-container .header-container {
width: 100%;
}
.key-strengths {
padding-left: 20px;
padding-right: 20px;
}
.ur-assur-section, .or-assur-section {
padding-left: 20px;
padding-right: 20px;
}
/*******/
/*Product Description General CSS*/
/*******/
.product-div-2, .product-div-5, .product-div-6, .product-div-9 {
height: 100vh;
}
.product-div-2 .text-over-layer h1, .product-div-5 .text-over-layer h1 {
font-size: 48px;
}
.product-div-2 h3 {
font-weight: 700;
font-size: 18px;
}
.product-div-5 img.backg {
height: 100%;
}
.product-div-8 img.backg {
right: 40%;
}
.product-div-8.airwave img.backg {
right: 0;
}
.product-div-8 .text-over-layer {
padding-top: 20%;
padding-bottom:30%;
}
.product-div-11 .headerProd h2 {
display: none;
}
.product-div-11 .care-instructions {
margin-top: 40px;
}
.product-div-11 .care-instruction .care-instruction-img {
margin-bottom: 15px;
}
.product-div-9 img.backg {
left: 40%;
}
.product-div-5.colored-text img { max-width: 100%; }
footer div.footerBlock:nth-child(1), footer div.footerBlock:nth-child(2) {
width: 100%;
}
/* ==========================================================================
End Fong Yi CSS
========================================================================== */
}
@media only screen and (max-width: 767px) {
.mask-ply {
margin-bottom: 40px;
}
.product-hero img {
max-width: 100%;
}
.prodlisting .products-grid .product {
width: calc(100% - 20px);
}
img#washing-machine {/*added by fongyi*/
width: 55%;
}
}
@media only screen and (max-width: 1000px) and (orientation: landscape) {
/*.hero {*/
/*height: 350vh;*/
/*max-height: none;*/
/*}*/
.hero .back-img {
max-height: 180vh;
}
/*.hero-child {*/
/*top: 170vh;*/
/*}*/
.key-strengths .key-strength {
width: 33%;
}
.product-hero img {
max-height: none;
}
.product-div-2, .product-div-5, .product-div-6, .product-div-9 {
height: 200vh;
max-height: none;
}
.home-best-sellers .top_product {
margin: 0 0;
}
.add_to_cart a {
min-width: auto;
width: 100%;
}
.conchell-protection-item {
width: 33.333%;
height: 90vh;
}
.or-assur-section .or-assur-item p {
max-width: 60%;
margin: 0 auto;
}
.product-div-8.airwave {
height: 140vh;
}
.product-div-8 .text-over-layer {
padding-top: 20%;
padding-bottom: 20%;
}
div[data-iessection="layoutinformationpage"] .product-hero-details h2 {
max-width: calc(100% - 40px);
margin: 0 auto 10px;
}
div[data-iessection="layoutinformationpage"] .product-hero-details p {
max-width: calc(100% - 40px);
margin: 0 auto 10px;
}
.care-instruction, .img6fx .care-instruction, .product-div-11 .care-instruction {
width: calc(33.333% - 20px);
}
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
/*.hero {
height: 370vh;
max-height: none;
}*/
.conchell-protection-item {
width: 33.333%;
height: 90vh;
}
.or-assur-section .or-assur-item p {
max-width: none;
}
}
@media only screen and (max-width: 380px) {
/*.hero {*/
/*height: 190vh;*/
/*}*/
/*.product-hero img {*/
/*margin-left: -35% !important;*/
/*}*/
/*.venusta-hero-fx img {*/
/*margin-left: -100% !important;*/
/*}*/
/*.product-div-8.autoTxt img.backg {*/
/*position: absolute;*/
/*right: -60%;*/
/*}*/
/*.cleantouch-hero-fx img {*/
/*margin-left: -108% !important;*/
/*}*/
/*.tio-hero-fx img {*/
/*margin-left: -85% !important;*/
/*}*/
}
@media only screen and (max-width: 320px) {
#cd-cart .cd-cart-items {
height: 63.5vh;
}
}
/* iPad 1, 2, Mini and Air */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
/*.hero .back-img {*/
/*max-height: none;*/
/*max-height: 75vh;*/
/*}*/
/*.hero-child {*/
/*top: 77vh;*/
/*}*/
.key-strengths .key-strength {
width: 20%;
}
.conchell-protection-item {
width: calc(33.333% - 20px);
margin: 0 10px;
height: 35vh;
}
.or-assur-section .or-assur-item {
width: 33.33%;
}
.product-hero img {
max-height: none;
}
.care-instruction, .img6fx .care-instruction, .product-div-11 .care-instruction {
width: calc(33.333% - 20px);
}
}
/* iPad 1, 2, Mini and Air End */
/* iPad 3, 4 and Pro 9.7" */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
/*.hero .back-img {*/
/*max-height: none;*/
/*max-height: 75vh;*/
/*}*/
/*.hero-child {*/
/*top: 77vh;*/
/*}*/
.key-strengths .key-strength {
width: 20%;
}
.conchell-protection-item {
width: 33.333%;
height: 35vh;
}
.or-assur-section .or-assur-item {
width: 33.33%;
}
.product-hero img {
max-height: none;
}
.care-instruction, .img6fx .care-instruction, .product-div-11 .care-instruction {
width: calc(33.333% - 20px);
}
}
/* iPad 3, 4 and Pro 9.7" End */
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.iesfontfamily1{font-family:'Prompt', Arial, serif;}
.iesfontfamily2{font-family:'Inter', Arial, sans-serif;}
.iesfontfamily3{font-family:'Barlow Semi Condensed', Arial, sans-serif;}
.iesbackgroundcolor1 { background: #000; }
.iesbackgroundcolor2 { }
.iesbackgroundcolor3 { background: linear-gradient(90deg, rgba(84,51,255,1) 0%, rgba(84,51,255,1) 22%, rgba(46,151,214,1) 51%, rgba(32,189,199,1) 83%); }
.p20tb {
padding-top: 120px;
padding-bottom: 120px;
}
.pt30 {
padding-top: 30px;
}
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w25 {
width: 25%;
}
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}
.w75 {
width: 75%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
.d-flex {
display: flex;
}
.d-flex-center {
align-items: center;
justify-content: center;
}
.d-flex-center-top {
align-items: flex-start;
justify-content: center;
}
.d-flex-center-bottom {
align-items: flex-end;
justify-content: center;
}
.d-flex-top-left {
align-items: flex-start;
justify-content: flex-start;
}
.d-flex-top-right {
align-items: flex-start;
justify-content: flex-end;
}
.flex-just-start {
justify-content: flex-start;
}
.flex-just-center {
justify-content: center;
}
.d-flex-row {
flex-direction: row;
flex-wrap: wrap;
}
.d-flex-column {
flex-direction: column;
}
.d-flex-space-even {
justify-content: space-evenly !important;
}
.nmr40 {
margin-right: -40%;
}
.ml12-5 {
margin-left: 12.5%;
}
.mr12-5 {
margin-right: 12.5%;
}
.ml10 {
margin-left: 10%;
}
.mr10 {
margin-right: 10%;
}
.ml20 {
margin-left: 20%;
}
.mr20 {
margin-right: 20%;
}
.ml50 {
margin-left: 50%;
}
.mr50 {
margin-right: 50%;
}
.mtop0 {
margin-top: 0 !important;
}
.mbneg20 {
margin-bottom: -20px;
}
.plr0 {
padding-right: 0;
padding-left: 0;
}
.p040 {
padding: 0 40px;
}
.p40 {
padding: 40px;
}
.capitalize {
text-transform: capitalize !important;
}
.biggened-words {
/*font-size: 200px !important;*/
font-size: 130px !important;
}
.biggen-words {
font-size: 52px !important;
}
.nowrap {
white-space: nowrap !important;
}
@media only screen and (max-width: 1000px) {
.biggened-words {
font-size: 90px !important;
}
.hero-back-for-mobile {
height: 50vh;
width: 100%;
}
}
@media only screen and (max-width: 1000px) and (orientation: landscape) {
.hero-back-for-mobile {
height: 100vh;
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.mp10 {
padding: 10px;
}
.biggened-words, .biggen-words {
font-size: 36px !important;
}
}
.loginFx {
max-width: 1000px;
padding-top: 100px;
margin-left: calc((100% - 1000px) * 0.5);
text-align: center;
}
.loginFx .container {
max-width: 100%;
}
.loginFx tr td input[type="submit"], .loginFx tr td input[type="button"], .loginFx form input[type="button"], .loginFx form input[type="submit"]{
border: none;
padding: 12px 28px;
color: #ffffff;
background: #191919;
margin-bottom: 10px;
}
.loginFx input[type="text"] {
border: 1px solid #ccc;
padding: 5px 8px;
margin-bottom: 5px;
}
.loginFx form[action="merchant_login1.cfm"] table td input[type="password"] {
border: 1px solid #ccc;
padding: 5px 8px;
margin-bottom: 5px;
}
/* Loader */
svg#lodSvg {
width: 100%;
max-width: 5rem;
animation: rotate 3.4s linear infinite;
position: absolute;
top: 45%;
left: 68%;
transform: translate(-50%, -50%);
}
circle#circSvg {
fill: none;
stroke: #333;
stroke-width: 4px;
stroke-dasharray: 300;
animation: outline 2s cubic-bezier(0.77,0,0.18,1) infinite;
}
@keyframes outline {
0% {
stroke-dashoffset: 0;
}
5% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 300;
}
95% {
stroke-dashoffset: 600;
}
100% {
stroke-dashoffset: 600;
}
}
@keyframes rotate {
from {
transform: rotate(0turn);
}
to {
transform: rotate(-1turn);
}
}
/* Loader end */