.alert.success{background-color: rgba(4, 214, 137, 0.522); color: #008000;} .alert.info{background-color: rgba(0, 116, 208, 0.62); color: #0000ff;} .alert.warning{background-color: rgba(255, 152, 0, 0.729); color: #ff5400;} .closebtn{margin-left: 15px; color: #ffffff; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s;} .closebtn:hover{color: black;} @media only screen and (max-width: 600px){.hero-wrap.hero-bread{padding: 3em 0;}} .imgbrand:hover .overlaybrand{opacity: 1;} .overlaybrand{position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 0.5s ease; background-color: #ffa45c;} .brandname{color: white; font-size: 15px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;} .l-radio{padding: 3px; border: 1px solid; border-radius: 50px; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; cursor: pointer; transition: background 0.2s ease; margin: 5px 0; -webkit-tap-highlight-color: transparent;} .l-radio:has(input:checked){background: #ffa45c; border: 1px solid #ffa45c; color: #fff;} .l-radio:hover, .l-radio:focus-within{background: rgba(159, 159, 159, 0.1);} .l-radio input{vertical-align: middle; background: none; border: 0; box-shadow: inset 0 0 0 1px #9f9f9f; box-shadow: inset 0 0 0 1.5px #9f9f9f; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; margin: 0; transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25); pointer-events: none;} .l-radio input:focus{outline: none;} .l-radio span{vertical-align: middle; display: inline-block; line-height: 20px; padding: 0 8px; font-size: 13px;} .search{position: relative; margin: 0 auto; width: 100%;} .search input{font-size: 11px; letter-spacing: 1px; text-transform: uppercase; height: 50px; width: 100%; padding: 0 12px 0 25px; background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 19px no-repeat; border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;} .search input:focus{outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);} .search input:focus + .results{display: block;} .search .results{display: none; position: absolute; top: 55px; left: 0; right: 0; font-size: 12px; z-index: 10; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2; background-color: #ffffff; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);} .search .results li{display: block;} .search .results li:first-child{margin-top: -1px;} .search .results li:first-child:before, .search .results li:first-child:after{display: block; content: ""; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent;} .search .results li:first-child:before{border-bottom: 5px solid #c4c7d7; top: -11px;} .search .results li:first-child:after{border-bottom: 5px solid #fdfdfd; top: -10px;} .search .results li:first-child:hover:before, .search .results li:first-child:hover:after{display: none;} .search .results li:last-child{margin-bottom: -1px;} .search .results a{display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px;} .search .results a span{font-weight: 200;} .search .results a:before{content: ""; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; background: url(/tdg_web/static/src/css/../images/search.png) 0 0 no-repeat;} .search .results a:hover{text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); background-color: #ffa45c;} :-moz-placeholder{color: #a7aabc; font-weight: 200;} ::-webkit-input-placeholder{color: #a7aabc; font-weight: 200;} .lt-ie9 .search input{line-height: 26px;} .tooltip{position: relative; display: inline-block; border-bottom: 1px dotted black;} .tooltip .tooltiptext{visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1;} .tooltip:hover .tooltiptext{visibility: visible;} .first a:hover{color: #ffa45c !important;} .active-1{color: #ffa45c !important;} .breadcrumb > li + li:before{content: "" !important;} .breadcrumb{font-size: 9px; color: #aaa !important; letter-spacing: 1px; border-radius: 5px !important;} .first{background-color: white !important;} .text-uppercase1{text-transform: uppercase !important; color: #a89898;} a:focus, a:active{outline: none !important; box-shadow: none !important;} .fa-caret-right{vertical-align: middle; font-size: 14px !important;} @media (max-width: 767px){.breadcrumb{font-size: 10px;}.breadcrumb-item + .breadcrumb-item{padding-left: 0;}.fa{font-size: 9px !important;}.breadcrumb{letter-spacing: 1px !important;}.fa-caret-right:before{content: "\f0da"; vertical-align: super !important;}} .product-image{float: left; width: 12%;} .product-details{float: left; width: 30%;} .product-price{float: left; width: 16%; text-align: center;} .product-quantity{float: left; width: 10%; text-align: center;} .product-quantity1{float: left; width: 14%; text-align: center;} .product-removal{float: left; width: 16%; text-align: center;} .product-removal-hide{float: left; width: 16%; text-align: center; visibility: hidden;} .product-line-price{float: left; width: 16%; text-align: center;} .product-line-discount{text-align: center;} .group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before, .group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after{content: ""; display: table;} .group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after{clear: both;} .group, .shopping-cart, .column-labels, .product, .totals-item{zoom: 1;} .column-labels label{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 4px solid #adadad; font-weight: bold;} .column-labels .product-image, .column-labels .product-removal{text-indent: -9999px;} .product .product-image{text-align: center;} .product .product-image img{width: 100px;} .product .product-details .product-title{margin-right: 20px;} .product .product-details .product-description{margin: 5px 20px 5px 0; line-height: 1.4em;} .product .product-quantity input{width: 40px; text-align: center;} .product .product-quantity1 input{width: 40px; text-align: center;} .product-title{font-weight: bold;} .totals .totals-item{float: right; clear: both; width: 100%; margin-bottom: 10px;} .totals .totals-item label{float: left; clear: both; width: 79%; text-align: right;} .totals .totals-item .totals-value{float: right; width: 21%; text-align: right;} .checkout{float: right; border: 0; padding: 6px 25px; background-color: #6b6; color: #fff; font-size: 25px; border-radius: 3px;} @media screen and (max-width: 760px){.shopping-cart{margin: 0; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #eee;}.column-labels{display: none;}.product-image{float: left; width: auto; padding-right: 20px; height: 120px;}.product-details{float: none; width: auto !important;}.product-price{width: fit-content;}.product-quantity{width: 65px; float: right;}.product-quantity1{width: 100px; padding: 0px !important; text-align: left;}.product-quantity:before{content: "x";}.product-quantity1:after{content: "x";}.product-removal{width: fit-content;}.product-remove{width: auto !important;}.product-line-price{float: right; width: 100px; height: 0; visibility: hidden;}.distri1{display: block !important;}.bundle-name{width: 100% !important;}.procuct-rmv{float: right !important;}.price{align-items: baseline !important;}} @media screen and (max-width: 350px){.product-removal{float: right;}.product-line-price{float: right; clear: left; width: auto; margin-top: 10px;}.product .product-image{width: 80px;}.totals .totals-item label{width: 60%;}.totals .totals-item .totals-value{width: 40%;}} .shopping-cart-wrap{padding: 20px; padding-top: 0px; padding-bottom: 0px; color: #888; background-color: white;} .shopping-cart-wrap button{cursor: pointer; border-radius: 0px; transition: all 0.25s; padding: 0;} .shopping-cart-wrap .cart-wrap-header{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: baseline; justify-content: space-between;} .shopping-cart-wrap .cart-wrap-header .heading{font-weight: 700; font-size: 20px; color: #000; margin-bottom: 0; margin-top: 0;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-wrap-header .heading{font-size: 16px;}} .shopping-cart-wrap .cart-wrap-header .closed-btn{font-size: 20px; color: #666;} .shopping-cart-wrap .cart-wrap-header .closed-btn:hover{color: red;} .shopping-cart-wrap .cart-total-amount{background-color: #cbcbcb; margin-left: -20px; margin-right: -20px; padding: 10px;} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between;} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-title{font-weight: 500; color: #444; margin-bottom: 0;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-title{font-size: 16px;}} .shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-no{color: #000; font-weight: 700;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-total-amount .cart-total-amount-inner .amount-no{font-size: 16px;}} .shopping-cart-wrap .shopping-cart-items{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; margin-top: 10px;} .shopping-cart-wrap .cart-item{display: -webkit-box; display: -webkit-flex; display: flex; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #e6e3e3; align-items: center;} .shopping-cart-wrap .cart-item .product-thumb{width: 100px; height: 100px; overflow: hidden; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-thumb{width: 80px; height: 80px;}} .shopping-cart-wrap .cart-item .product-thumb:hover > button:before{width: 100%; left: 0; right: auto;} .shopping-cart-wrap .cart-item .product-thumb:hover > button > span{margin-bottom: 0; opacity: 1; visibility: visible;} .shopping-cart-wrap .cart-item .product-thumb > button{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 24px;} .shopping-cart-wrap .cart-item .product-thumb > button:before{position: absolute; content: ""; right: 0; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.35); transition: all 0.3s;} .shopping-cart-wrap .cart-item .product-thumb > button > span{transition: all 0.35s; margin-bottom: 50px; opacity: 0; visibility: 0; color: #ffffff; position: relative; z-index: 1;} .shopping-cart-wrap .cart-item .product-info{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; padding-left: 15px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info{display: block; width: 100%;}} .shopping-cart-wrap .cart-item .product-info .info-left .title{font-size: 14px; font-weight: 500; line-height: 1.4em; color: #444; margin-bottom: 5px; margin-top: 0;} .shopping-cart-wrap .cart-item .product-info .info-left .unit-price{font-size: 14px; font-weight: 500;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .info-left .unit-price{font-size: 14px;}} .shopping-cart-wrap .cart-item .product-info .price-count{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding-left: 15px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count{padding-left: 0px; align-items: center;}} .shopping-cart-wrap .cart-item .product-info .price-count .s-product-price{color: #000; font-weight: 600; margin-bottom: 0px;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count .s-product-price{font-size: 16px;}} .shopping-cart-wrap .cart-item .product-info .price-count .count-product{background-color: #000; border-radius: 5px; color: #ffffff; font-size: 14px; font-weight: 500; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); transition: all 0.25s;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product:hover{box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > button{border: 0px solid; background-color: transparent; color: inherit; height: 30px !important; width: 30px; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; transition: all 0.25s; font-size: 10px; padding: 0px;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > button:hover{color: red;} .shopping-cart-wrap .cart-item .product-info .price-count .count-product > .count-no{min-width: 30px; padding: 0 5px; text-align: center;} @media only screen and (max-width: 575px){.shopping-cart-wrap .cart-item .product-info .price-count .count-product{margin-right: 5px;}} .check-field [type="checkbox"]{position: absolute !important; left: -9999px;} .check-field [type="checkbox"] + label{position: relative !important; padding-left: 2rem !important; cursor: pointer !important;} .check-field [type="checkbox"] + label:before{content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border: 4px solid deeppink;} .check-field [type="checkbox"] + label:after{content: ""; position: absolute; width: 12px; height: 12px; top: 14px; left: 6px; font-size: 1.3em; line-height: 0.8; background-color: deeppink; transition: all 0.2s;} .check-field [type="checkbox"]:not(:checked) + label:after{opacity: 0; transform: scale(0);} .check-field [type="checkbox"]:checked + label:after{opacity: 1; transform: scale(1);} .cart-footer{background: #cbcbcb;} .distributor{font-size: medium; font-weight: bold;} .price2{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: flex-end;} .checkout-price{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .check-total-price{font-weight: bold; color: black;} .checkmark{position: absolute; margin-top: 10px; left: 0; height: 17px; width: 17px;} .select-wrapper{padding-top: 10px; position: relative; user-select: none; width: 100%;} .select{position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .select__trigger{position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 5px 22px; font-size: 14px; font-weight: 500; color: #ffffff; min-height: 40px; height: fit-content; background: #ff4b4b; cursor: pointer;} .custom-options{position: absolute; display: block; top: 100%; left: 0; right: 0; text-align: center; border-top: 0; background: #f3f3f3; transition: all 0.5s; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2;} .select.open .custom-options{opacity: 1; visibility: visible; pointer-events: all;} .custom-option{position: relative; display: block; padding: 5px 10px 5px 10px; font-size: 14px; font-weight: 500; color: #3b3b3b; cursor: pointer; transition: all 0.5s;} .custom-option:hover{cursor: pointer; background-color: #ffa45c;} .custom-option.selected{color: #000000; background-color: #ffa45c;} .info-delivery{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between;} .card-sameday{background-color: #f5f5f5; padding: 30px;} .border-line{border-right: 1px solid gray;} @media screen and (max-width: 575px){.border-line{border-right: none; border-bottom: 1px solid #eeeeee;}} .tracking-detail{padding: 3rem 0;} #tracking{margin-bottom: 1rem;} [class*="tracking-status-"] p{margin: 0; font-size: 1.1rem; color: #fff; text-transform: uppercase; text-align: center;} [class*="tracking-status-"]{padding: 1.6rem 0;} .tracking-status-intransit{background-color: #65aee0;} .tracking-status-outfordelivery{background-color: #f5a551;} .tracking-status-deliveryoffice{background-color: #f7dc6f;} .tracking-status-delivered{background-color: #4cbb87;} .tracking-status-attemptfail{background-color: #b789c7;} .tracking-status-error, .tracking-status-exception{background-color: #d26759;} .tracking-status-expired{background-color: #616e7d;} .tracking-status-pending{background-color: #ccc;} .tracking-status-inforeceived{background-color: #214977;} .tracking-item{border-left: 1px solid #e5e5e5; position: relative; padding: 1rem; font-size: 0.8rem; margin-left: 3rem; min-height: 5rem;} .tracking-item:last-child{padding-bottom: 4rem;} .tracking-item .tracking-date{margin-bottom: 0.5rem;} .tracking-item .tracking-date span{color: #888; font-size: 85%; padding-left: 0.4rem;} .tracking-item .tracking-content{padding: 0.5rem 0.8rem; background-color: #f4f4f4; border-radius: 0.5rem;} .tracking-item .tracking-content span{display: block; color: #888; font-size: 85%;} .tracking-item .tracking-icon{position: absolute; left: -11px; width: 1.3rem; height: 1.3rem; text-align: center; border-radius: 50%; font-size: 1.3rem; background-color: transparent; color: transparent;} .tracking-item .tracking-icon.status-sponsored{background-color: #ffa45c;} .tracking-item .tracking-icon.status-delivered{background-color: #ffa45c;} .tracking-item .tracking-icon.status-outfordelivery{background-color: #ffa45c;} .tracking-item .tracking-icon.status-deliveryoffice{background-color: #ffa45c;} .tracking-item .tracking-icon.status-attemptfail{background-color: #ffa45c;} .tracking-item .tracking-icon.status-exception{background-color: #ffa45c;} .tracking-item .tracking-icon.status-inforeceived{background-color: #ffa45c;} .tracking-item .tracking-icon.status-intransit{color: #e5e5e5; border: 1px solid #e5e5e5; font-size: 0.6rem;} @media (min-width: 992px){.tracking-item{margin-left: 10rem;}.tracking-item .tracking-date{position: absolute; left: -10rem; width: 7.5rem; text-align: right;}.tracking-item .tracking-date span{display: block;}.tracking-item .tracking-content{padding: 0; background-color: transparent;}} .rating{font-size: 20px;} #notfound{position: relative; height: 100vh;} #notfound .notfound{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound{max-width: 520px; width: 100%; line-height: 1.4; text-align: center;} .notfound .notfound-404{position: relative; height: 200px; margin: 0px auto 55px; z-index: -1;} .notfound .notfound-404 h1{font-family: "Varela Round", sans-serif; font-size: 200px; font-weight: 100; margin: 0px; color: #211b19; text-transform: uppercase; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound .notfound-404 h2{font-family: "Montserrat", sans-serif; font-size: 28px; font-weight: 400; text-transform: uppercase; color: #211b19; background: #fff; padding: 10px 5px; margin: auto; display: inline-block; position: absolute; bottom: -40px; left: 0; right: 0;} .notfound a{font-family: "Montserrat", sans-serif; display: inline-block; font-weight: 700; text-decoration: none; color: #fff; text-transform: uppercase; padding: 18px 28px; background: #ffa45c; font-size: 20px; -webkit-transition: 0.2s all; transition: 0.2s all;} .notfound a:hover{color: #ffa45c; background: #211b19;} @media only screen and (max-width: 767px){.notfound .notfound-404 h1{font-size: 148px;}} @media only screen and (max-width: 480px){.notfound .notfound-404{height: 148px; margin: 0px auto 10px;}.notfound .notfound-404 h1{font-size: 86px;}.notfound .notfound-404 h2{font-size: 16px;}.notfound a{padding: 7px 15px; font-size: 14px;}} .product-notfoud{width: 100%;} .lead{background-color: #ffa55c36; padding: 20px; border-radius: 10px;} .thumb-produk-detail{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center;} .img-detail-produk{height: fit-content;} .a-dark{color: gray;} .a-dark-normal-fonts{color: gray; font-weight: 500;} .filterapply{white-space: nowrap; overflow: auto; font-size: 13px;} .Filtersbtn{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;} .filteration{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: end; justify-content: flex-end; padding-top: 10px; padding-bottom: 10px;} @media only screen and (max-width: 767px){.Filtersbtn{display: block; padding-bottom: 20px;}} @media only screen and (max-width: 767px){.reset-fil{width: 100%;}} @media only screen and (max-width: 767px){.two-grid-mobile-view-left{width: 50%; padding-right: 5px;}.two-grid-mobile-view-right{width: 50%; padding-left: 5px;}} .heading-section{font-weight: 600;} .card-cat{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: all 0.3s;} .card-cat:hover{transform: scale(1.2); color: orange;} .card-cat .category-title{font-size: 14px; color: #fff; margin-bottom: 1rem;} .card-cat .article-title{font-size: 13px; font-weight: 600; text-align: center;} .card-cat .article-header{margin-bottom: auto;} .blog-slider{width: 100%; position: relative; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 625px; transition: all 0.3s;} @media screen and (max-width: 1200px){.blog-slider{width: 100%; position: relative; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 500px; transition: all 0.3s;}} @media screen and (min-width: 1200px){.blog-slider{width: 100%; position: relative; max-width: 900px; margin: auto; background: #fff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); padding: 25px; border-radius: 25px; height: 625px; transition: all 0.3s; transform: translateX(105px);}} @media screen and (max-width: 768px){.blog-slider{min-height: 500px; height: auto; margin: 180px 0px -35px 0px;}} @media screen and (max-height: 500px) and (min-width: 992px){.blog-slider{height: 350px;}} .blog-slider__item{display: -webkit-box; display: -webkit-flex; display: flex; align-items: center;} @media screen and (max-width: 768px){.blog-slider__item{-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;}} .blog-slider__item.swiper-slide-active .blog-slider__img img{opacity: 1; transition-delay: 0.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *{opacity: 1; transform: none;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1){transition-delay: 0.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2){transition-delay: 0.4s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3){transition-delay: 0.5s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4){transition-delay: 0.6s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5){transition-delay: 0.7s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6){transition-delay: 0.8s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7){transition-delay: 0.9s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8){transition-delay: 1s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9){transition-delay: 1.1s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10){transition-delay: 1.2s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11){transition-delay: 1.3s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12){transition-delay: 1.4s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13){transition-delay: 1.5s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14){transition-delay: 1.6s;} .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15){transition-delay: 1.7s;} .blog-slider__img{width: 450px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, #ffa45c 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 20px; transform: translateX(-130px); overflow: hidden;} @media screen and (min-width: 1199px){.blog-slider__img{width: 450px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, #ffa45c 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 25px; transform: translateX(-235px); overflow: hidden;}} @media screen and (max-width: 1200px){.blog-slider__img{width: 350px; flex-shrink: 0; background-image: linear-gradient(147deg, #fe8a39 0%, #ffa45c 74%); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); border-radius: 25px; transform: translateX(0px); overflow: hidden;}} .blog-slider__img:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 25px; opacity: 0.8;} .blog-slider__img img{width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s;} @media screen and (max-width: 768px){.blog-slider__img{transform: translateY(-50%); width: 90%;}} @media screen and (max-width: 576px){.blog-slider__img{width: 100%;}} @media screen and (max-height: 500px) and (min-width: 992px){.blog-slider__img{height: 270px;}} .blog-slider__content{padding: 30px;} @media screen and (max-width: 768px){.blog-slider__content{margin-top: -185px; text-align: center; padding: 0 30px;}} @media screen and (max-width: 576px){.blog-slider__content{padding: 0;}} @media screen and (min-width: 1200px){.blog-slider__content{transform: translateX(-110px);}} .blog-slider__content > *{opacity: 0; transform: translateY(25px); transition: all 0.4s;} .blog-slider__code{color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500;} .blog-slider__title{font-size: 24px; font-weight: 700; color: #0d0925; margin-bottom: 20px;} .blog-slider__text{color: #4e4a67; margin-bottom: 30px; line-height: 1.5em;} .blog-slider__button{display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; background-image: linear-gradient(#000000 0%, #000000 74%); padding: 15px 35px; border-radius: 50px; color: #fff; text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px;} @media screen and (max-width: 576px){.blog-slider__button{width: 100%;}} .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction{bottom: 10px; left: 0; width: 100%;} .blog-slider__pagination{position: absolute; z-index: 21; right: 20px; width: 11px !important; text-align: center; left: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%);} @media screen and (max-width: 768px){.blog-slider__pagination{transform: translateX(-50%); left: 50% !important; top: 205px; width: 100% !important; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}} .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin: 8px 0;} @media screen and (max-width: 768px){.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px; visibility: hidden;}} .blog-slider__pagination .swiper-pagination-bullet{width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all 0.3s;} .blog-slider__pagination .swiper-pagination-bullet-active{opacity: 1; background: #ffa45c; height: 30px;} @media screen and (max-width: 768px){.blog-slider__pagination .swiper-pagination-bullet-active{height: 11px; width: 30px;}} .bundle-pr-images{width: 100%; border-radius: 18px; padding: 5px;} @media (max-width: 576px){.bundle-pr-images{width: 100%; border-radius: 18px;}} @media (max-width: 768px){.bundle-pr-images{width: 100%; border-radius: 18px;}} .card-slider-bundle{border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; transition: 0.2s; margin: 0;} .card-slider-bundle:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .card-feature{min-width: 250px; height: 180px; border-radius: 18px; background-color: #ffaf6b; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s;} .card-feature .article-title{font-size: 17px; font-weight: 600; line-height: initial;} .card-feature .article-header{margin-bottom: auto; color: black;} .card-feature:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .box-feature{padding: 5px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; transition: all 0.3s;} .feature-icon{font-size: 30px;} @media (max-width: 768px){.card-feature{min-width: auto; height: 220px; border-radius: 18px; background-color: #ffaf6b; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s;}} .card-product{height: 360px; border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s; margin: 0;} .card-product-list{border-radius: 18px; background-color: #ffffff; box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; padding: 1rem; transition: 0.2s; margin: 0;} .card-product-list:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .card-product:hover{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.03); box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} .box-product{padding: 5px;} .box-product-list{padding: 0;} .prod-home-title{font-size: 17px; font-weight: 600;} .box-heading-bundle{width: 200px;} .white{background: white;} a.blantershow-chat{background: #fff; color: #000000; position: fixed; display: -webkit-box; display: -webkit-flex; display: flex; height: 40px; font-weight: 600; justify-content: space-between; z-index: 98; bottom: 25px; right: 30px; font-size: 12px; padding: 10px 20px; border-radius: 30px; box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);} a.blantershow-chat svg{transform: scale(1.2); margin: 0 10px 0 0;} .alert-form{font-size: 12px; color: red; font-weight: 500;} .swiper-container-nav{margin: auto;} @media (min-width: 576px){.swiper-container-nav{max-width: 630px;}} @media (min-width: 768px){.swiper-container-nav{max-width: 810px;}} @media (min-width: 992px){.swiper-container-nav{max-width: 1050px;}} @media (min-width: 1200px){.swiper-container-nav{max-width: 1250px;}} .swiper-button-next, .swiper-button-prev{position: absolute; top: 50%; width: 30px !important; height: 30px !important; margin-top: -10px !important; z-index: 1 !important; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 10px 14px !important; background-position: center; background-repeat: no-repeat; background-color: white; box-shadow: 0 0px 5px rgba(32, 33, 36, 0.28); border-radius: 50px;} .swiper-container{margin: auto;} @media (min-width: 576px){.swiper-container{max-width: 540px;}} @media (min-width: 768px){.swiper-container{max-width: 720px;}} @media (min-width: 992px){.swiper-container{max-width: 960px;}} @media (min-width: 1200px){.swiper-container{max-width: 1140px;}} .swiper-container-kelebihan{margin: auto; overflow-x: hidden; padding: 5px;} @media (min-width: 576px){.swiper-container-kelebihan{max-width: 540px;}} @media (min-width: 768px){.swiper-container-kelebihan{max-width: 720px;}} @media (min-width: 992px){.swiper-container-kelebihan{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-kelebihan{max-width: 1140px;}} .swiper-container-product{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-product::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-product{max-width: 540px;}} @media (min-width: 768px){.swiper-container-product{max-width: 720px;}} @media (min-width: 992px){.swiper-container-product{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-product{max-width: 1140px;}} .sub ol{list-style-type: none; counter-reset: item; margin: 0; padding: 0;} .sub li{display: table; counter-increment: item; margin-bottom: 0.6em;} .sub li:before{content: counters(item, "."); display: table-cell; padding-right: 0.6em; font-weight: bold;} .sub li li{margin: 0;} .sub li li:before{content: counters(item, ".") " "; font-weight: 600;} .alpha{font-weight: 600;} .head-detail{font-size: 17px; font-weight: bold; color: black;} @media (max-width: 575.98px){.input-group-btn-detail{text-align: center !important;}} .swiper-button-next:after, .swiper-button-prev:after{content: "" !important;} .mySwiper2{width: 100%; box-shadow: 0px 0px 5px rgba(32, 33, 36, 0.1);} .mySwiper{box-sizing: border-box; padding: 10px 3px;} .mySwiper .swiper-slide{width: 25%; height: 100%; opacity: 0.4;} .mySwiper .swiper-slide-thumb-active{opacity: 1;} .detail-prod img{display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0px 0px 5px rgba(32, 33, 36, 0.1);} .video-product{transition: 0.2s; position: absolute; top: 60px; right: 12px;} .toggle-password{position: relative; float: right; cursor: pointer; margin-right: 10px; margin-top: -32px;} .mobile-menu-button .menu-toggle{all: unset; width: 30px; height: 30px; cursor: pointer; vertical-align: middle;} .mobile-menu-button .menu-toggle span{background-color: #555555; height: 2px; width: 100%; display: block;} .mobile-menu-button .menu-toggle span:nth-child(2){margin: 5px 0 5px auto; width: 75%; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all;} .mobile-menu-button .menu-toggle span:nth-child(3){margin-left: auto; width: 45%; -webkit-transition: 0.6s all; -moz-transition: 0.6s all; -o-transition: 0.6s all; transition: 0.6s all;} .mobile-menu-button .menu-toggle:hover span:nth-child(2), .mobile-menu-button .menu-toggle:hover span:nth-child(3){width: 100%;} .side-menu{width: 80%; position: fixed; right: 0; top: 0; z-index: 1610; height: 100vh; background-color: #ffffff; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; overflow-y: auto;} .side-menu.side-menu-active{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .side-menu .inner-wrapper{padding: 30px 30px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: flex-start; text-align: left; -webkit--webkit-flex-wrap: wrap; flex-wrap: wrap; -ms--webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;} .side-menu .btn-close{position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; cursor: pointer;} .side-menu .btn-close:before{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(45deg);} .side-menu .btn-close:after{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(-45deg);} .side-nav-menu{list-style-type: none; margin: 0; padding: 0 0 30px;} .side-nav-menu > .menu-item{position: relative; padding: 0 25px 0 0;} .side-nav-menu > .menu-item:not(:last-child){margin-bottom: 15px;} .side-nav-menu > .menu-item > .arrow{position: absolute; right: 0; width: 15px; height: 15px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #555555; border-right: 1px solid #555555; transform: rotate(45deg); cursor: pointer;} .side-nav-menu > .menu-item > .arrow.open{transform: rotate(225deg);} .side-nav-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .menu-item > .sub-menu{list-style-type: none; margin: 10px 0 0; padding: 0 0 0 15px; display: none;} .side-nav-menu > .menu-item > .sub-menu > .menu-item:not(:last-child){margin-bottom: 5px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .custom-menu-item .button.custom-button-link{display: inline-block;} .side-menu-bg{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; display: none; z-index: 1031; opacity: 0.5; cursor: pointer;} @media only screen and (max-width: 1199px){.main-header-bar{padding: 15px 0;}.main-header-right{display: none;}.side-menu{width: 50%;}} @media only screen and (max-width: 767px){.button{padding: 11px 30px;}.side-menu{width: 90%;}.side-menu .inner-wrapper{padding: 20px 20px;}.side-nav-menu > .menu-item > .arrow{width: 10px; height: 10px;}.side-nav-menu > .menu-item > .menu-link, .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{font-size: 14px;}} @media only screen and (max-width: 1199px){nav ul{background: #1b1b1b; height: 100%; width: 100%; list-style: none; padding: 10px;}nav ul li{line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1);}nav ul li:last-child{border-bottom: 1px solid rgba(255, 255, 255, 0.05);}nav ul li a{position: relative; color: white; text-decoration: none; font-size: 13px; padding-left: 14px; font-weight: 500; display: block; width: 100%; border-left: 3px solid transparent;}nav ul li.active a{color: #ffaf6b; background: #1e1e1e; border-left-color: #ffaf6b;}nav ul li a:hover{background: #1e1e1e;}.feat-show{transition: all 0.5s;}nav ul li.active ul{transition: all 0.5s;}nav ul ul{position: static; display: none;}nav ul.show{display: block; transition: all 0.5s;}nav ul ul li{line-height: 42px; border-top: none;}nav ul ul li a{font-size: 12px; color: #e6e6e6;}nav ul li.active ul li a{color: #e6e6e6; background: #1b1b1b; border-left-color: transparent;}nav ul li a span{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 15px; transition: transform 0.4s;}nav ul li a span.rotate{transform: translateY(-50%) rotate(-180deg);}.content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #202020; z-index: -1; text-align: center;}} .white-popup{position: relative; background: #fff; padding: 50px 20px 10px 20px; width: auto; max-width: 500px; margin: 20px auto; transition: 1s all;} .mfp-fade.mfp-bg{opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out;} .mfp-fade.mfp-bg.mfp-ready{opacity: 0.8;} .mfp-content{position: fixed; left: 0; top: 250px;} .mfp-fade.mfp-bg.mfp-removing{opacity: 0;} .mfp-fade.mfp-wrap .mfp-content{opacity: 0; transition: all 0.4s ease-out;} .mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity: 1;} .mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity: 0;} .mfp-fade.mfp-wrap{overflow: hidden !important; position: fixed !important;} .notice-btn{background-color: #ff4b4b !important; border: 1px solid #ff4b4b !important; color: white !important;} .mainbox{z-index: 1; transition: 0.2s; position: absolute; top: 15px; right: 60px;} label.share{text-align: center; color: lightgray; cursor: pointer; transition: all 0.3s ease;} #check{display: none;} #check:checked ~ label.share::before{opacity: 1;} .media-icons{position: absolute; left: 50%; top: 0px; transform: translateX(-50%); background: #fff; width: 105px; height: 120px; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: space-around; padding: 4px; z-index: 1; opacity: 0; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #check:checked ~ .media-icons{opacity: 1; pointer-events: auto; top: 50px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);} .media-icons::before{content: ""; width: 18px; height: 18px; position: absolute; left: 50%; background: #fff; top: -9px; transform: translateX(-50%) rotate(45deg); z-index: -1;} .accordion{display: block; cursor: pointer; padding: 7px 7px 7px 0px; width: 100%; border: none; text-align: left; outline: none; font-size: 13px; transition: 0.4s;} .panel{padding: 0 18px; display: none; background-color: white; overflow: hidden;} .price-input{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex;} .price-input .field{width: 100%; height: 45px; align-items: center;} .field input{width: 90%; height: 70%; outline: none; font-size: 13px; border-radius: 5px; text-align: center; border: 1px solid #999; -moz--webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit--webkit-appearance: none; -moz-appearance: none; appearance: none;} .radio-toolbar input[type="radio"]{opacity: 0; position: fixed; width: 0;} .radio-toolbar label{color: gray; font-size: 13px;} .radio-toolbar input[type="radio"]:checked + label{color: orange;} .copy{cursor: pointer; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; opacity: 0.9; transition: all 0.1s ease;} .copy:hover{transform: translateY(-4px); opacity: 1;} .tooltip{position: absolute; top: 0px; left: -30px; background: #373737; padding: 5px 10px; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; color: #fff; font-size: 14px; border-radius: 4px; letter-spacing: 1px; opacity: 0;} .tooltip.appear{animation: appear 1s ease;} @keyframes appear{0%{opacity: 0;}20%{transform: translateY(10px); opacity: 1;}80%{transform: translateY(0px); opacity: 1;}100%{opacity: 0;}} @media screen and (max-width: 1024px){.overlay{position: absolute; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.85); opacity: 0; transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;}.overlay .social{position: fixed; bottom: 0; width: 100%; background-color: #fff; padding: 10px 10px 10px; box-sizing: border-box; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.22), 0px 14px 56px rgba(0, 0, 0, 0.25); transform: translate(0, 100%); transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 100ms;}.overlay:target{display: block; position: fixed; top: 0; opacity: 1; z-index: 1111;}.overlay:target .social{transform: translate(0, 0); z-index: 9;}.overlay:target .btn-close{display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; outline: 0 none; transform: scale(1, 1);}} @media screen and (min-width: 1024px){.overlay{display: none !important;}.overlay .social{display: none !important;}.overlay:target{display: none !important;}.overlay:target .social{display: none !important;}.overlay:target .btn-close{display: none !important;}} .no-border{border: none !important;} .button{display: block; background-color: #ffa45c; font-size: 14px; height: 42px; line-height: 42px; text-align: center; color: white; text-decoration: none; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border-radius: 10px;} .button:hover{background-color: white; color: #ffa45c; border: 1px solid #ffa45c;} .search-container{position: relative; display: inline-block; margin: 4px 2px; height: 42px; width: 42px; vertical-align: bottom;} .mglass{display: inline-block; pointer-events: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .searchbutton{position: absolute; font-size: 22px; width: 100%; margin: 0; padding: 0;} .search{position: absolute; left: 49px; background-color: #efefef; outline: none; border: none; padding: 0; width: 0; height: 100%; z-index: 10; transition-duration: 0.4s; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; border-bottom: 1px solid #000000;} .search:focus{width: 300px; padding: 0 6px 0 0;} .expandright{left: auto; right: 45px;} .expandright:focus{padding: 0 0 0 16px;} @media (min-width: 768px){.brand-mobile-search{visibility: hidden; display: none;}} @media only screen and (min-width: 767px){.filter-no-brand{display: none; visibility: hidden;}} @media (max-width: 768px){.filter-brand{visibility: hidden; display: none;}} @media (min-width: 768px){.dekstop-view{visibility: visible; display: block;}} 

/* /tdg_web/static/src/css/custom-style.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .cart-line-name{color: #444 !important;} .cart-alert{font-size: 85%;} .cart-list{overflow-x: unset !important;} .line-through{text-decoration: line-through;} .tf-invalid-feedback{width: 100%; margin-top: 0.25rem; font-size: 80%; color: #dc3545;} .rating{color: #ffa45c;} .rating-clickable:hover{cursor: pointer;} #notfound{position: relative; height: 80vh;} #notfound .notfound{position: absolute; left: 50%; top: 35%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound{max-width: 520px; width: 100%; line-height: 1.4; text-align: center;} .notfound .notfound-404{position: relative; height: 200px; margin: 0px auto 55px; z-index: -1;} .notfound .notfound-404 h1{font-family: 'Varela Round', sans-serif; font-size: 200px; font-weight: 100; margin: 0px; color: #211b19; text-transform: uppercase; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .notfound .notfound-404 h2{font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 400; text-transform: uppercase; color: #211b19; background: #fff; padding: 10px 5px; margin: auto; display: inline-block; position: absolute; bottom: -40px; left: 0; right: 0;} .notfound a{font-family: 'Montserrat', sans-serif; display: inline-block; font-weight: 700; text-decoration: none; color: #fff; text-transform: uppercase; padding: 18px 28px; background: #ffa45c; font-size: 20px; -webkit-transition: 0.2s all; transition: 0.2s all;} .notfound a:hover{color: #ffa45c; background: #211b19;} @media only screen and (max-width: 767px){.notfound .notfound-404 h1{font-size: 148px;}} @media only screen and (max-width: 480px){.notfound .notfound-404{height: 148px; margin: 0px auto 10px;}.notfound .notfound-404 h1{font-size: 86px;}.notfound .notfound-404 h2{font-size: 16px;}.notfound a{padding: 7px 15px; font-size: 14px;}} .notfound .notfound-404 h3{font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #211b19; background: #fff; padding: 10px 5px; margin: auto; display: inline-block; position: absolute; bottom: -80px; left: 0; right: 0; font-size: 24px;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit--webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;} input[type=number]{-moz--webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;} button.add-to-cart{background: #000000; font-size: 13px; color: #fff; text-transform: uppercase; font-weight: 300; width: 100%; border: none; cursor: pointer;} button.add-to-cart i{font-size: 16px;} button.add-to-cart:hover{background: #ffa45c; color: #fff;} .center-heading-bundle{margin: auto 0;} .grecaptcha-badge{display: none !important;} .fb-share-button > span > iframe{border-radius: 50px;} 

/* /tdg_web/static/src/css/swiper-bundle.min.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 @font-face{font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal;} :root{--swiper-theme-color: #007aff;} .swiper{margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;} .swiper-vertical > .swiper-wrapper{-webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .swiper-wrapper{position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: flex; transition-property: transform; box-sizing: content-box;} .swiper-android .swiper-slide, .swiper-wrapper{transform: translate3d(0px, 0, 0);} .swiper-pointer-events{touch-action: pan-y;} .swiper-pointer-events.swiper-vertical{touch-action: pan-x;} .swiper-slide{flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform;} .swiper-slide-invisible-blank{visibility: hidden;} .swiper-autoheight, .swiper-autoheight .swiper-slide{height: auto;} .swiper-autoheight .swiper-wrapper{align-items: flex-start; transition-property: transform,height;} .swiper-backface-hidden .swiper-slide{transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;} .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper{perspective: 1200px;} .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper{transform-style: preserve-3d;} .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top{position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;} .swiper-3d .swiper-slide-shadow{background: rgba(0, 0, 0, 0.15);} .swiper-3d .swiper-slide-shadow-left{background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);} .swiper-3d .swiper-slide-shadow-right{background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);} .swiper-3d .swiper-slide-shadow-top{background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);} .swiper-3d .swiper-slide-shadow-bottom{background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);} .swiper-css-mode > .swiper-wrapper{overflow: auto; scrollbar-width: none; -ms-overflow-style: none;} .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar{display: none;} .swiper-css-mode > .swiper-wrapper > .swiper-slide{scroll-snap-align: start start;} .swiper-horizontal.swiper-css-mode > .swiper-wrapper{scroll-snap-type: x mandatory;} .swiper-vertical.swiper-css-mode > .swiper-wrapper{scroll-snap-type: y mandatory;} .swiper-centered > .swiper-wrapper::before{content: ''; flex-shrink: 0; order: 9999;} .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child{margin-inline-start: var(--swiper-centered-offset-before);} .swiper-centered.swiper-horizontal > .swiper-wrapper::before{height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after);} .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child{margin-block-start: var(--swiper-centered-offset-before);} .swiper-centered.swiper-vertical > .swiper-wrapper::before{width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after);} .swiper-centered > .swiper-wrapper > .swiper-slide{scroll-snap-align: center center;} .swiper-virtual .swiper-slide{-webkit-backface-visibility: hidden; transform: translateZ(0);} .swiper-virtual.swiper-css-mode .swiper-wrapper::after{content: ''; position: absolute; left: 0; top: 0; pointer-events: none;} .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height: 1px; width: var(--swiper-virtual-size);} .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width: 1px; height: var(--swiper-virtual-size);} :root{--swiper-navigation-size: 44px;} .swiper-button-next, .swiper-button-prev{position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color));} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity: .35; cursor: auto; pointer-events: none;} .swiper-button-next:after, .swiper-button-prev:after{font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1;} .swiper-button-prev, .swiper-rtl .swiper-button-next{left: 10px; right: auto;} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{content: 'prev';} .swiper-button-next, .swiper-rtl .swiper-button-prev{right: 10px; left: auto;} .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{content: 'next';} .swiper-button-lock{display: none;} .swiper-pagination{position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10;} .swiper-pagination.swiper-pagination-hidden{opacity: 0;} .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 10px; left: 0; width: 100%;} .swiper-pagination-bullets-dynamic{overflow: hidden; font-size: 0;} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform: scale(0.33); position: relative;} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform: scale(1);} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform: scale(1);} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform: scale(0.66);} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform: scale(0.33);} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform: scale(0.66);} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform: scale(0.33);} .swiper-pagination-bullet{width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);} button.swiper-pagination-bullet{border: none; margin: 0; padding: 0; box-shadow: none; -webkit--webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .swiper-pagination-clickable .swiper-pagination-bullet{cursor: pointer;} .swiper-pagination-bullet:only-child{display: none !important;} .swiper-pagination-bullet-active{opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color));} .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets{right: 10px; top: 50%; transform: translate3d(0px, -50%, 0);} .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block;} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top: 50%; transform: translateY(-50%); width: 8px;} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display: inline-block; transition: .2s transform,.2s top;} .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);} .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left: 50%; transform: translateX(-50%); white-space: nowrap;} .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition: .2s transform,.2s left;} .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition: .2s transform,.2s right;} .swiper-pagination-progressbar{background: rgba(0, 0, 0, 0.25); position: absolute;} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top;} .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin: right top;} .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width: 100%; height: 4px; left: 0; top: 0;} .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar{width: 4px; height: 100%; left: 0; top: 0;} .swiper-pagination-lock{display: none;} .swiper-scrollbar{border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1);} .swiper-horizontal > .swiper-scrollbar{position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%;} .swiper-vertical > .swiper-scrollbar{position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%;} .swiper-scrollbar-drag{height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0;} .swiper-scrollbar-cursor-drag{cursor: move;} .swiper-scrollbar-lock{display: none;} .swiper-zoom-container{width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; align-items: center; text-align: center;} .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg{max-width: 100%; max-height: 100%; object-fit: contain;} .swiper-slide-zoomed{cursor: move;} .swiper-lazy-preloader{width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent;} .swiper-slide-visible .swiper-lazy-preloader{animation: swiper-preloader-spin 1s infinite linear;} .swiper-lazy-preloader-white{--swiper-preloader-color: #fff;} .swiper-lazy-preloader-black{--swiper-preloader-color: #000;} @keyframes swiper-preloader-spin{100%{transform: rotate(360deg);}} .swiper .swiper-notification{position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000;} .swiper-free-mode > .swiper-wrapper{transition-timing-function: ease-out; margin: 0 auto;} .swiper-grid > .swiper-wrapper{-webkit-flex-wrap: wrap; flex-wrap: wrap;} .swiper-grid-column > .swiper-wrapper{-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function: ease-out;} .swiper-fade .swiper-slide{pointer-events: none; transition-property: opacity;} .swiper-fade .swiper-slide .swiper-slide{pointer-events: none;} .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events: auto;} .swiper-cube{overflow: visible;} .swiper-cube .swiper-slide{pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%;} .swiper-cube .swiper-slide .swiper-slide{pointer-events: none;} .swiper-cube.swiper-rtl .swiper-slide{transform-origin: 100% 0;} .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events: auto;} .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev{pointer-events: auto; visibility: visible;} .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top{z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .swiper-cube .swiper-cube-shadow{position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0;} .swiper-cube .swiper-cube-shadow:before{content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px);} .swiper-flip{overflow: visible;} .swiper-flip .swiper-slide{pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1;} .swiper-flip .swiper-slide .swiper-slide{pointer-events: none;} .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events: auto;} .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top{z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .swiper-creative .swiper-slide{-webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform,opacity,height;} .swiper-cards{overflow: visible;} .swiper-cards .swiper-slide{transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden;} 

/* /tdg_web/static/src/css/swiper.min.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .swiper-container{margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1;} .swiper-container-no-flexbox .swiper-slide{float: left;} .swiper-container-vertical > .swiper-wrapper{-webkit-box-orient: vertical; -moz-box-orient: vertical; -ms--webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit--webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} .swiper-wrapper{position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} .swiper-container-android .swiper-slide, .swiper-wrapper{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate(0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .swiper-container-multirow > .swiper-wrapper{-webkit-box-lines: multiple; -moz-box-lines: multiple; -ms--webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit--webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;} .swiper-container-free-mode > .swiper-wrapper{-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto;} .swiper-slide{-webkit-flex-shrink: 0; -ms--webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative;} .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height: auto;} .swiper-container-autoheight .swiper-wrapper{-webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform,height;} .swiper-container .swiper-notification{position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000;} .swiper-wp8-horizontal{-ms-touch-action: pan-y; touch-action: pan-y;} .swiper-wp8-vertical{-ms-touch-action: pan-x; touch-action: pan-x;} .swiper-button-next, .swiper-button-prev{position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 27px 44px; background-position: center; background-repeat: no-repeat;} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity: .35; cursor: auto; pointer-events: none;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto;} .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");} .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");} .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto;} .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");} .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");} .swiper-pagination{position: absolute; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10;} .swiper-pagination.swiper-pagination-hidden{opacity: 0;} .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 10px; left: 0; width: 100%;} .swiper-pagination-bullet{width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2;} button.swiper-pagination-bullet{border: none; margin: 0; padding: 0; box-shadow: none; -moz--webkit-appearance: none; -moz-appearance: none; appearance: none; -ms--webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit--webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .swiper-pagination-clickable .swiper-pagination-bullet{cursor: pointer;} .swiper-pagination-white .swiper-pagination-bullet{background: #fff;} .swiper-pagination-bullet-active{opacity: 1; background: #007aff;} .swiper-pagination-white .swiper-pagination-bullet-active{background: #fff;} .swiper-pagination-black .swiper-pagination-bullet-active{background: #000;} .swiper-container-vertical > .swiper-pagination-bullets{right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate(0, -50%); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);} .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 5px 0; display: block;} .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px;} .swiper-pagination-progress{background: rgba(0, 0, 0, 0.25); position: absolute;} .swiper-pagination-progress .swiper-pagination-progressbar{background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top;} .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top;} .swiper-container-horizontal > .swiper-pagination-progress{width: 100%; height: 4px; left: 0; top: 0;} .swiper-container-vertical > .swiper-pagination-progress{width: 4px; height: 100%; left: 0; top: 0;} .swiper-pagination-progress.swiper-pagination-white{background: rgba(255, 255, 255, 0.5);} .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background: #fff;} .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background: #000;} .swiper-container-3d{-webkit-perspective: 1200px; -moz-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px;} .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper{-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;} .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top{position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;} .swiper-container-3d .swiper-slide-shadow-left{background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);} .swiper-container-3d .swiper-slide-shadow-right{background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);} .swiper-container-3d .swiper-slide-shadow-top{background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);} .swiper-container-3d .swiper-slide-shadow-bottom{background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);} .swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper{-ms-perspective: 1200px;} .swiper-container-cube, .swiper-container-flip{overflow: visible;} .swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide{pointer-events: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; z-index: 1;} .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide{pointer-events: none;} .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events: auto;} .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top{z-index: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;} .swiper-container-cube .swiper-slide{visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%;} .swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0;} .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev{pointer-events: auto; visibility: visible;} .swiper-container-cube .swiper-cube-shadow{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0;} .swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;} .swiper-container-fade .swiper-slide{pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity;} .swiper-container-fade .swiper-slide .swiper-slide{pointer-events: none;} .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events: auto;} .swiper-zoom-container{width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center;} .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg{max-width: 100%; max-height: 100%; object-fit: contain;} .swiper-scrollbar{border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1);} .swiper-container-horizontal > .swiper-scrollbar{position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%;} .swiper-container-vertical > .swiper-scrollbar{position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%;} .swiper-scrollbar-drag{height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0;} .swiper-scrollbar-cursor-drag{cursor: move;} .swiper-lazy-preloader{width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite;} .swiper-lazy-preloader:after{display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat;} .swiper-lazy-preloader-white:after{background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");} @-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform: rotate(360deg);}} @keyframes swiper-preloader-spin{100%{transform: rotate(360deg);}} 

/* /tdg_website_sale/static/src/css/coupon.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .coupon .kanan{border-left: 1px dashed #ddd; width: 40% !important; position: relative;} .coupon .kanan .info::after, .coupon .kanan .info::before{content: ''; position: absolute; width: 20px; height: 20px; background: #f8f9fa; border-radius: 100%;} .coupon .kanan .info::before{top: -10px; left: -10px;} .coupon .kanan .info::after{bottom: -10px; left: -10px;} .coupon .time{font-size: 1.6rem;} .text-muted{font-size: 13px;} .card-coupon{background-color: white; border: none; font-size: 13px;} @media (max-width: 768px){.img-voucher-sm{width: 80px !important;}} 

/* /tdg_website_event/static/src/css/style.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .bg-mc{background: #121212 !important;} .swiper-container-bootcamp{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-bootcamp::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-bootcamp{max-width: 540px;}} @media (min-width: 768px){.swiper-container-bootcamp{max-width: 720px;}} @media (min-width: 992px){.swiper-container-bootcamp{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-bootcamp{max-width: 1140px;}} .sub ol{list-style-type: none; counter-reset: item; margin: 0; padding: 0;} .sub li{display: table; counter-increment: item; margin-bottom: 0.6em;} .sub li:before{content: counters(item, "."); display: table-cell; padding-right: 0.6em; font-weight: bold;} .sub li li{margin: 0;} .sub li li:before{content: counters(item, ".") " "; font-weight: 600;} .alpha{font-weight: 600;} .head-detail{font-size: 17px; font-weight: bold; color: black;} @media (max-width: 575.98px){.input-group-btn-detail{text-align: center !important;}} .swiper-button-next:after, .swiper-button-prev:after{content: "" !important;} .mySwiper2{width: 100%; box-shadow: 0px 0px 5px rgba(32, 33, 36, 0.1);} .mySwiper{box-sizing: border-box; padding: 10px 3px;} .mySwiper .swiper-slide{width: 25%; height: 100%; opacity: 0.4;} .mySwiper .swiper-slide-thumb-active{opacity: 1;} .detail-prod img{display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0px 0px 5px rgba(32, 33, 36, 0.1);} .video-product{transition: 0.2s; position: absolute; top: 60px; right: 12px;} .toggle-password{position: relative; float: right; cursor: pointer; margin-right: 10px; margin-top: -32px;} .mobile-menu-button .menu-toggle{all: unset; width: 30px; height: 30px; cursor: pointer; vertical-align: middle;} .mobile-menu-button .menu-toggle span{background-color: #555555; height: 2px; width: 100%; display: block;} .mobile-menu-button .menu-toggle span:nth-child(2){margin: 5px 0 5px auto; width: 75%; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all;} .mobile-menu-button .menu-toggle span:nth-child(3){margin-left: auto; width: 45%; -webkit-transition: 0.6s all; -moz-transition: 0.6s all; -o-transition: 0.6s all; transition: 0.6s all;} .mobile-menu-button .menu-toggle:hover span:nth-child(2), .mobile-menu-button .menu-toggle:hover span:nth-child(3){width: 100%;} .side-menu{width: 80%; position: fixed; right: 0; top: 0; z-index: 1610; height: 100vh; background-color: #ffffff; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, -o-transform 0.5s ease-in-out; overflow-y: auto;} .side-menu.side-menu-active{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .side-menu .inner-wrapper{padding: 30px 30px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: flex-start; text-align: left; -webkit--webkit-flex-wrap: wrap; flex-wrap: wrap; -ms--webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;} .side-menu .btn-close{position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; cursor: pointer;} .side-menu .btn-close:before{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(45deg);} .side-menu .btn-close:after{content: ""; height: 30px; width: 2px; background-color: #555555; display: block; position: absolute; left: 50%; top: 0; transform: rotate(-45deg);} .side-nav-menu{list-style-type: none; margin: 0; padding: 0 0 30px;} .side-nav-menu > .menu-item{position: relative; padding: 0 25px 0 0;} .side-nav-menu > .menu-item:not(:last-child){margin-bottom: 15px;} .side-nav-menu > .menu-item > .arrow{position: absolute; right: 0; width: 15px; height: 15px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #555555; border-right: 1px solid #555555; transform: rotate(45deg); cursor: pointer;} .side-nav-menu > .menu-item > .arrow.open{transform: rotate(225deg);} .side-nav-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .menu-item > .sub-menu{list-style-type: none; margin: 10px 0 0; padding: 0 0 0 15px; display: none;} .side-nav-menu > .menu-item > .sub-menu > .menu-item:not(:last-child){margin-bottom: 5px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{color: #555555; font-size: 18px;} .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link:hover{color: #7b7b7b; text-decoration: none;} .side-nav-menu > .custom-menu-item .button.custom-button-link{display: inline-block;} .side-menu-bg{position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; display: none; z-index: 1031; opacity: 0.5; cursor: pointer;} @media only screen and (max-width: 1199px){.main-header-bar{padding: 15px 0;}.main-header-right{display: none;}.side-menu{width: 50%;}} @media only screen and (max-width: 767px){.button{padding: 11px 30px;}.side-menu{width: 90%;}.side-menu .inner-wrapper{padding: 20px 20px;}.side-nav-menu > .menu-item > .arrow{width: 10px; height: 10px;}.side-nav-menu > .menu-item > .menu-link, .side-nav-menu > .menu-item > .sub-menu > .menu-item > .menu-link{font-size: 14px;}} @media only screen and (max-width: 1199px){nav ul{background: #1b1b1b; height: 100%; width: 100%; list-style: none; padding: 10px;}nav ul li{line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1);}nav ul li:last-child{border-bottom: 1px solid rgba(255, 255, 255, 0.05);}nav ul li a{position: relative; color: white; text-decoration: none; font-size: 13px; padding-left: 14px; font-weight: 500; display: block; width: 100%; border-left: 3px solid transparent;}nav ul li.active a{color: #ffaf6b; background: #1e1e1e; border-left-color: #ffaf6b;}nav ul li a:hover{background: #1e1e1e;}.feat-show{transition: all 0.5s;}nav ul li.active ul{transition: all 0.5s;}nav ul ul{position: static; display: none;}nav ul.show{display: block; transition: all 0.5s;}nav ul ul li{line-height: 42px; border-top: none;}nav ul ul li a{font-size: 12px; color: #e6e6e6;}nav ul li.active ul li a{color: #e6e6e6; background: #1b1b1b; border-left-color: transparent;}nav ul li a span{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 15px; transition: transform 0.4s;}nav ul li a span.rotate{transform: translateY(-50%) rotate(-180deg);}.content{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #202020; z-index: -1; text-align: center;}} .white-popup{position: relative; background: #fff; padding: 50px 20px 10px 20px; width: auto; max-width: 500px; margin: 20px auto; transition: 1s all;} .mfp-fade.mfp-bg{opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out;} .mfp-fade.mfp-bg.mfp-ready{opacity: 0.8;} .mfp-content{position: fixed; left: 0; top: 250px;} .mfp-fade.mfp-bg.mfp-removing{opacity: 0;} .mfp-fade.mfp-wrap .mfp-content{opacity: 0; transition: all 0.4s ease-out;} .mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity: 1;} .mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity: 0;} .mfp-fade.mfp-wrap{overflow: hidden !important; position: fixed !important;} .notice-btn{background-color: #ff4b4b !important; border: 1px solid #ff4b4b !important; color: white !important;} .mainbox{z-index: 1; transition: 0.2s; position: absolute; top: 15px; right: 60px;} label.share{text-align: center; color: lightgray; cursor: pointer; transition: all 0.3s ease;} #check{display: none;} #check:checked ~ label.share::before{opacity: 1;} .media-icons{position: absolute; left: 50%; top: 0px; transform: translateX(-50%); background: #fff; width: 105px; height: 120px; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; align-items: center; justify-content: space-around; padding: 4px; z-index: 1; opacity: 0; pointer-events: none; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #check:checked ~ .media-icons{opacity: 1; pointer-events: auto; top: 50px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);} .media-icons::before{content: ""; width: 18px; height: 18px; position: absolute; left: 50%; background: #fff; top: -9px; transform: translateX(-50%) rotate(45deg); z-index: -1;} .accordion{display: block; cursor: pointer; padding: 7px 7px 7px 0px; width: 100%; border: none; text-align: left; outline: none; font-size: 13px; transition: 0.4s;} .panel{padding: 0 18px; display: none; background-color: white; overflow: hidden;} .price-input{width: 100%; display: -webkit-box; display: -webkit-flex; display: flex;} .price-input .field{width: 100%; height: 45px; align-items: center;} .field input{width: 90%; height: 70%; outline: none; font-size: 13px; border-radius: 5px; text-align: center; border: 1px solid #999; -moz--webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit--webkit-appearance: none; -moz-appearance: none; appearance: none;} .radio-toolbar input[type="radio"]{opacity: 0; position: fixed; width: 0;} .radio-toolbar label{color: gray; font-size: 13px;} .radio-toolbar input[type="radio"]:checked + label{color: orange;} .copy{cursor: pointer; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; opacity: 0.9; transition: all 0.1s ease;} .copy:hover{transform: translateY(-4px); opacity: 1;} .tooltip{position: absolute; top: 0px; left: -30px; background: #373737; padding: 5px 10px; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; color: #fff; font-size: 14px; border-radius: 4px; letter-spacing: 1px; opacity: 0;} .tooltip.appear{animation: appear 1s ease;} @keyframes appear{0%{opacity: 0;}20%{transform: translateY(10px); opacity: 1;}80%{transform: translateY(0px); opacity: 1;}100%{opacity: 0;}} #faq{max-width: 850px; margin: auto; text-align: center;} section.faq{padding-top: 2em; padding-bottom: 3em;} #faq ul{text-align: left;} .transition, p, ul li i:before, ul li i:after{transition: all 0.3s;} #faq .no-select, #faq h2{-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;} #faq h1{color: #000; margin-bottom: 30px; margin-top: 0;} #faq h2{color: #ff8d00; font-size: 18px; line-height: 34px; text-align: left; padding: 15px 25px 0; text-transform: none; font-weight: 300; letter-spacing: 1px; display: block; margin: 0; cursor: pointer; transition: 0.2s;} #faq p{color: #333; text-align: left; font-size: 16px; line-height: 1.45; position: relative; overflow: hidden; max-height: 250px; will-change: max-height; contain: layout; display: inline-block; opacity: 1; transform: translate(0, 0); margin-top: 5px; margin-bottom: 15px; padding: 0 50px 0 25px; transition: 0.3s opacity, 0.6s max-height; hyphens: auto; z-index: 2;} #faq ul{list-style: none; perspective: 900; padding: 0; margin: 0;} #faq ul li{position: relative; overflow: hidden; padding: 0; margin: 0; background: #fff; box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent;} #faq ul li + li{margin-top: 15px;} #faq ul li:last-of-type{padding-bottom: 0;} #faq ul li i{position: absolute; transform: translate(-6px, 0); margin-top: 28px; right: 15px;} #faq ul li i:before{content: ""; position: absolute; background-color: #ff8d00; width: 3px; height: 9px;} #faq ul li i:after{content: ""; position: absolute; background-color: #ff8d00; width: 3px; height: 9px;} #faq ul li i:before{transform: translate(-2px, 0) rotate(45deg);} #faq ul li i:after{transform: translate(2px, 0) rotate(-45deg);} #faq ul li input[type="checkbox"]{position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation;} #faq ul li input[type="checkbox"]:checked ~ h2{color: #000;} #faq ul li input[type="checkbox"]:checked ~ p{max-height: 0; transition: 0.3s; opacity: 0;} #faq ul li input[type="checkbox"]:checked ~ i:before{transform: translate(2px, 0) rotate(45deg);} #faq ul li input[type="checkbox"]:checked ~ i:after{transform: translate(-2px, 0) rotate(-45deg);} .img-sold{opacity: 30%;} .accordion-header{padding: 1.5em 1.5em; background: #ffffff; box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1); color: black; cursor: pointer; letter-spacing: 0.1em; transition: all 0.3s; text-transform: uppercase;} .accordion-header:hover{position: relative; z-index: 5;} .accordion-body{background: #fcfcfc; color: #353535; display: none;} .accordion-body__contents{padding: 1.5em 1.5em;} .accordion__item.active:last-child .accordion-header{border-radius: none;} .accordion:first-child > .accordion__item > .accordion-header{border-bottom: 1px solid transparent;} .accordion__item > .accordion-header:after{content: "\f3d0"; font-family: IonIcons; float: right; position: relative; top: -2px; transition: 0.3s all; transform: rotate(0deg); color: #ff8d00; font-size: 20px;} .accordion__item.active > .accordion-header:after{transform: rotate(-180deg);} .accordion__item.active .accordion-header{background: #ffffff;} .accordion__item .accordion__item .accordion-header{background: #f1f1f1; color: #353535;} @media screen and (max-width: 1000px){.accordion{width: 100%;}} .bootcamp-modal-content{position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms--webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border-radius: 0.3rem; outline: 0;} .bootcamp-modal-header{display: -webkit-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; background-color: #ff9a00;} .bootcamp-modal-header .close{padding: 1rem 1rem; margin: -1rem -1rem -1rem auto;} .bootcamp-modal-title{margin-bottom: 0; line-height: 1.5;} .bootcamp-modal-body{position: relative; -webkit-box-flex: 1; -ms--webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; color: white; background: black;} #tbc-float{width: 100%;} #floated{float: left; width: 200px;} .product span.sisa-tiket{position: absolute; top: 15px; left: 15px; padding: 2px 15px; border-radius: 15px; color: #ffffff; font-weight: bold; background: #ffa45c;} .product .text .bottom-area a.add-to-cart-tbc, .product .text .bottom-area a.buy-now{font-size: 13px; color: #000000; text-transform: uppercase; font-weight: 300;} .product .text .bottom-area a.add-to-cart-tbc i, .product .text .bottom-area a.buy-now i{font-size: 16px;} .product .text .bottom-area a.add-to-cart-tbc{background: #ffa45c; color: #fff;} .product .text .bottom-area a.add-to-cart-tbc:hover{background: #ffffff; color: #000000;} @media (max-width: 992px){.tbc-addtocart-mobile{position: relative !important; top: 0 !important; opacity: 0; padding-top: 0.5rem !important;}} @media (max-width: 992px){.tbc-text{padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 1px !important;}} @media (max-width: 768px){.product .text .bottom-area a.add-to-cart-tbc{border-radius: 15px;}} @media (max-width: 992px){.product span.sisa-tiket{font-size: 10px; padding: 1px 5px;}.tiket-sold{font-size: 10px; padding: 1px 5px;}} @media (max-width: 768px){.tbc-sm{font-size: 13px !important;}} .card-mentors{background-color: dodgerblue; color: white; padding: 1rem; height: 4rem;} .cards-mentors{margin: 0 auto; display: grid; grid-gap: 1rem;} @media (max-width: 991px){.cards-mentors{grid-template-columns: repeat(2, 2fr);}} @media (min-width: 991px){.cards-mentors{grid-template-columns: repeat(5, 2fr);}} .hr-mentor{background-color: white;} #buttoncontainer{display: -webkit-box; display: -webkit-flex; display: flex; justify-content: space-evenly;} .btn-masterclass{width: 140px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid orange;} .img-rounded-masterclass{border-radius: 30px 30px 0 0;} .box-rounded-masterclass{border-radius: 0 0 30px 30px;} .toggled{background: linear-gradient(to right, #ffa45c, #ff8829);} .module-content:hover, .module-content:active{opacity: 0.9; cursor: pointer;} .unit-wrapper, .unit-copy-wrapper{z-index: 4; flex-grow: 0; position: relative;} .unit-wrapper{position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; justify-content: center; margin-right: auto; margin-left: auto; padding-top: 44px;} .unit-copy-wrapper{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 24px;} .collection-module{position: relative; --grid-layout-gap: 12px; --grid-column-count: 2; --grid-item--min-width: 230px; --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap)); --grid-item--max-width: calc( (100% - var(--total-gap-width)) / var(--grid-column-count)); display: grid; grid-template-columns: repeat(auto-fill, minmax(Max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); grid-gap: var(--grid-layout-gap); margin: 10px; text-color: #1d1d1f;} .accordion-header-masterclass{padding: 1.5em 1.5em; background: #ffffff; box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.1); color: black; cursor: pointer; letter-spacing: .1em; transition: all .3s; text-transform: uppercase; font-weight: bold;} .accordion-header-masterclass:hover{position: relative; z-index: 5;} .accordion-body-masterclass{background: #f9f9f9; color: #979797; display: none;} .accordion-body__contents{padding: 1.5em 1.5em;} .accordion__item.active:last-child .accordion-header{border-radius: none;} .accordion:first-child > .accordion__item > .accordion-header{border-bottom: 1px solid transparent;} .accordion__item > .accordion-header-masterclass:after{content: "\f3d0"; font-family: IonIcons; float: right; position: relative; top: -2px; transition: .3s all; transform: rotate(0deg); color: #ff8d00; font-size: 20px;} .accordion__item.active > .accordion-header-masterclass:after{transform: rotate(-180deg);} .accordion__item.active .accordion-header{background: #ffffff;} .accordion__item .accordion__item .accordion-header{background: #ffffff; color: gray;} @media screen and (max-width: 1000px){.accordion{width: 100%;}} @media screen and (max-width: 1024px){.overlay{position: absolute; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.85); opacity: 0; transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;}.overlay .social{position: fixed; bottom: 0; width: 100%; background-color: #fff; padding: 10px 10px 10px; box-sizing: border-box; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.22), 0px 14px 56px rgba(0, 0, 0, 0.25); transform: translate(0, 100%); transition: all 450ms cubic-bezier(0.32, 1, 0.23, 1) 100ms;}.overlay:target{display: block; position: fixed; top: 0; opacity: 1; z-index: 1111;}.overlay:target .social{transform: translate(0, 0); z-index: 9;}.overlay:target .btn-close{display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; outline: 0 none; transform: scale(1, 1);}} @media screen and (min-width: 1024px){.overlay{display: none !important;}.overlay .social{display: none !important;}.overlay:target{display: none !important;}.overlay:target .social{display: none !important;}.overlay:target .btn-close{display: none !important;}} @media screen and (min-width: 1024px){.swiper-wrapper-masterclass{justify-content: center !important;}} .mc-shdw{box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.07);} .mc-shdw2{box-shadow: 0px 0px 2px rgba(32, 33, 36, 0.28);} .btn.btn-primary-mc{background: #ffffff; border: 1px solid #ffa45c; color: #fff;} .btn.btn-primary-mc:hover{border: 1px solid #ffa45c; background: #ffa45c; color: #ffa45c;} 

/* /tdg_website_event/static/src/css/tbc2.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 @media (min-width: 767.98px){.navbar-brand-tbc{width: 220px;}} @media (max-width: 767.98px){.navbar-brand-tbc{width: 120px;}} .hero-container{position: relative; overflow: hidden; width: 100%; height: 100vh; z-index: 0;} .hero-shapes{position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; margin: auto; z-index: 1;} .circles{position: absolute; top: 0; width: 100%; height: 100%; z-index: 3;} .shape--circle{position: absolute; border-radius: 100%;} #circ-1{bottom: -200px; left: -50px; width: 200px; height: 600px; animation: slideFromLeft 2s cubic-bezier(0.83, 0.14, 0.21, 1.01) forwards;} #circ-2{top: -100px; right: -50px; width: 300px; height: 300px; animation: slideFromRight 2s cubic-bezier(0.83, 0.14, 0.21, 1.01) forwards;} @media (max-width: 767.98px){.motion-water{width: 250px !important;}} @media (max-width: 767.98px){#circ-1{height: 470px !important;}} @media (max-width: 767.98px){#circ-2{width: 250px;}} .hero-content{position: relative; top: 0; z-index: 4; height: 100%;} .owl-carousel.home-slider .slider-item .slider-text .subheading{color: #000000 !important;} @media (min-width: 992px){.owl-carousel.home-slider .slider-item .slider-text .subheading{color: #000000 !important;}} @media (max-width: 991.98px){.owl-carousel.home-slider .slider-item .slider-text p{color: #000000 !important; font-size: 16px;}} .owl-carousel.home-slider .slider-item .slider-text h1{font-size: 80px !important;} @media (min-width: 992px){.owl-carousel.home-slider .slider-item .slider-text .one-forth .text{top: 40% !important; max-width: 100%;}} @media (max-width: 767.98px){.owl-carousel.home-slider .slider-item .slider-text h1{font-size: 40px !important;}} @media (max-width: 991.98px){.owl-carousel.home-slider .slider-item .slider-text .one-forth{width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow-y: hidden !important;}} .motion-water{-webkit-animation: spin 6s linear infinite; -moz-animation: spin 60s linear infinite; animation: spin 60s linear infinite;} @-moz-keyframes spin{100%{-moz-transform: rotate(360deg);}} @-webkit-keyframes spin{100%{-webkit-transform: rotate(360deg);}} @keyframes spin{100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}} .panel{padding: 15px; position: relative; width: 100%; z-index: 1;} .pricing-table{box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;} @media (min-width: 900px){.pricing-table{flex-direction: row;}} .pricing-table *{text-align: center;} .pricing-plan{border-bottom: 1px solid #dbdbdb; padding: 15px;} .pricing-plan:last-child{border-bottom: none;} @media (min-width: 900px){.pricing-plan{border-bottom: none; border-right: 1px solid #dbdbdb; flex-basis: 100%; padding: 10px;}.pricing-plan:last-child{border-right: none;}} .pricing-header{color: #000000; font-weight: 700; letter-spacing: 1px;} .pricing-features{font-weight: 600; margin: 25px 0 25px; list-style-type: none;} .pricing-features-item{border-top: 1px solid #ffe5cf; font-size: 14px; line-height: 1.5; padding: 10px;} .pricing-features-item:last-child{border-bottom: 1px solid #ffe5cf;} .pricing-price{color: #016FF9; display: block; font-size: 32px; font-weight: 700;} .mc-shdw{box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);} .mc-kelas{box-shadow: 0px 0px 7px rgba(32, 33, 36, 0.28);} @media (max-width: 991.98px){.mobile-download{display: none !important; visibility: hidden !important;}} @media (max-width: 991.98px){.mobile-download{display: none !important; visibility: hidden !important;}} @media (min-width: 991.98px){.dekstop-download{display: none !important; visibility: hidden !important;}} @media (min-width: 991.98px){.dekstop-download{display: none !important; visibility: hidden !important;}} @media (max-width: 992px){.product span.sisa-tiket{font-size: 17px;}.tiket-sold{font-size: 17px;}} @media (max-width: 768px){.tbc-sm{font-size: 15px !important;}} @media (max-width: 992px){.tbc-text{padding-left: 10px !important; padding-right: 10px !important; padding-bottom: 1px !important;}} 

/* /tdg_website_customer_upsell/static/src/css/style.css defined in bundle 'tdg_web.toffin_assets_frontend' */
 .swiper-container-product-upsell{margin: auto; overflow-x: hidden; padding: 5px;} .swiper-container-product-upsell::-webkit-scrollbar{width: 0 !important;} @media (min-width: 576px){.swiper-container-product-upsell{max-width: 540px;}} @media (min-width: 768px){.swiper-container-product-upsell{max-width: 720px;}} @media (min-width: 992px){.swiper-container-product-upsell{max-width: 960px;}} @media (min-width: 1200px){.swiper-container-product-upsell{max-width: 1140px;}} .product span.status-add-to-cart{position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -25%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); padding: 5px 15px; font-weight: bold; background: #ffa45c; color: white; border-radius: 15px; width: 89%; text-align: center;} @media (min-width: 576px){.upsell{max-width: 1100px; margin: 1.75rem auto;}}