:root{ --c1: #036eb3; --c2: #00afef; --red: #FF0000FF; --font-icon: "Font Awesome 6 Pro"; } @font-face { font-family: Roboto; src: url(../css/fonts/Roboto-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: Roboto; src: url(../css/fonts/Roboto-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: Roboto; src: url(../css/fonts/Roboto-Medium.ttf) format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: Roboto; src: url(../css/fonts/Roboto-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; } /* vietnamese */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../css/fonts/7cHqv4kjgoGqM7E30-8s6FospT4.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../css/fonts/7cHqv4kjgoGqM7E30-8s6VospT4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../css/fonts/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*taskbar*/ ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#F5F5F5}::-webkit-scrollbar{width:8px;background-color:#F5F5F5}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555} /*option css*/ img{max-width:100%;height:auto}.big-img img,img.big-img,.full-img img,img.full-img{width:100%;height:auto;vertical-align:middle;object-position:center;object-fit:cover}ul{margin-bottom:0;padding-left:0}small{font-size:75%}big{font-size:125%}a,.fa,button,option{-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;transition:all 300ms ease}button{cursor:pointer}ul{list-style-position:inside}.aligncenter,div.aligncenter{display:block;margin:5px auto 15px auto}.alignright{float:right;margin:5px 0 20px 20px}.alignleft{float:left;margin:5px 20px 20px 0}a img.alignright{float:right;margin:5px 0 20px 20px}a img.alignnone{margin:5px 20px 20px 0}a img.alignleft{float:left;margin:5px 20px 20px 0}a img.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:100%;text-align:center}.wp-caption.alignnone{margin:5px 20px 20px 0}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}.wp-caption p.wp-caption-text{font-size:15px;line-height:17px;margin:10px 0 0 0;padding:5px;background:#ddd}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.fa{font-family:"Font Awesome 6 Pro"}.clear{width:auto;clear:left}.found404{text-align:center;padding:60px 0}img{max-width:100%}.success,.warning,.attention,.information{padding:7px 10px 7px 33px;color:#555}.success{background:#fff url(../img/success.png) 20px center no-repeat;color:#313942}.border{border:solid #ccc 1px}.author-avata img{border-radius:50%}.design{overflow:hidden;background-color:#cccccc59}.h-box marquee *{display:inline;font-size:14px;margin:0 5px;padding:0;line-height:20px;color:currentColor;font-weight:400}.h-box marquee{text-align:left;background:none;color:currentColor;line-height:30px;font-size:13px;display:block}.copyright{line-height:30px} #BackToTop { overflow: hidden; position: fixed; z-index: 90; right: 10px; bottom: 10px; display: none; width: 44px; height: 44px; color: #fff; text-align: center; background-color: rgba(121, 121, 121, .65); font-size: 22px; line-height: 40px; cursor: pointer; -webkit-transform: translateZ(0); border-radius: 2px; transition: all .5s; border-radius: 50% } #BackToTop i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translateX(-50%, -50%); -o-transform: translateX(-50%, -50%); -moz-transform: translateX(-50%, -50%); -webkit-transform: translateX(-50%, -50%) } /*tab*/ .tabcontent { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 0.6s; display: none } .tablinks{cursor: pointer} @keyframes fadeInOpacity{0%{opacity:0}50%{opacity:.5}100%{opacity:1}} .tabcontent.current { display: block } /* call botton */ a.draggable{touch-action:none;position:fixed;bottom:100px;left:20px;visibility:hidden;background-color:#fff0;width:100px;height:100px;cursor:pointer;z-index:200000!important;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s;visibility:visible}.draggable.is-pointer-down .draggable-icon,.draggable:hover .draggable-icon{background-color:#7fe6a0}.draggable.is-pointer-down .draggable-bd,.draggable:hover .draggable-bd{background-color:rgb(18 242 0 / .5)}.draggable.is-pointer-down .draggable-bg,.draggable:hover .draggable-bg{border:2px solid #12f200}a.draggable .draggable-icon{width:55px;height:55px;top:24px;left:23px;position:absolute;background:red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;opacity:.7;box-sizing:initial;-webkit-animation:draggable-circle-img-anim 1s infinite ease-in-out;-moz-animation:draggable-circle-img-anim 1s infinite ease-in-out;-ms-animation:draggable-circle-img-anim 1s infinite ease-in-out;-o-animation:draggable-circle-img-anim 1s infinite ease-in-out;animation:draggable-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}a.draggable .draggable-bd{width:90px;height:90px;top:7px;left:5px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;opacity:.75!important;background-color:rgb(255 87 34 / .62);border-radius:100%;opacity:.1;-webkit-animation:draggable-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:draggable-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:draggable-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:draggable-circle-fill-anim 2.3s infinite ease-in-out;animation:draggable-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.draggable-bg{width:100px;height:100px;top:0;left:0;position:absolute;background-color:#fff0;-webkit-border-radius:100%;-moz-border-radius:100%;opacity:.5;border-radius:100%;border:2px solid red;opacity:.1;-webkit-animation:draggable-circle-anim 1.2s infinite ease-in-out;-moz-animation:draggable-circle-anim 1.2s infinite ease-in-out;-ms-animation:draggable-circle-anim 1.2s infinite ease-in-out;-o-animation:draggable-circle-anim 1.2s infinite ease-in-out;animation:draggable-circle-anim 1.2s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.phone_text{position:absolute;bottom:-4px;left:50%;width:max-content;background:#ffe800;color:#000;padding:2px 9px;border-radius:4px;font-size:13px;transform:translateX(-50%);-os-transform:translateX(-50%);-o-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%)} /*keyframes*/ @-moz-keyframes draggable-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}50%{-moz-transform:rotate(0) scale(1) skew(1deg)}100%{-moz-transform:rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes draggable-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@-o-keyframes draggable-circle-img-anim{0%{-o-transform:rotate(0) scale(1) skew(1deg)}10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}50%{-o-transform:rotate(0) scale(1) skew(1deg)}100%{-o-transform:rotate(0) scale(1) skew(1deg)}}@-moz-keyframes draggable-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-webkit-keyframes draggable-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-o-keyframes draggable-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@keyframes draggable-circle-fill-anim{0%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-moz-keyframes draggable-circle-anim{0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}}@-webkit-keyframes draggable-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}@-o-keyframes draggable-circle-anim{0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}}@keyframes fadeInUp{from{transform:translate3d(0,40px,0)}to{transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes fadeInUp{from{transform:translate3d(0,40px,0)}to{transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translatey(-30px);-moz-transform:translatey(-30px);-o-transform:translatey(-30px);transform:translatey(-30px)}to{opacity:1;-webkit-transform:translatey(0);-moz-transform:translatey(0);-o-transform:translatey(0);transform:translatey(0)}}@-moz-keyframes fadeInDown{from{opacity:0;-webkit-transform:translatey(-30px);-moz-transform:translatey(-30px);-o-transform:translatey(-30px);transform:translatey(-30px)}to{opacity:1;-webkit-transform:translatey(0);-moz-transform:translatey(0);-o-transform:translatey(0);transform:translatey(0)}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translatey(-30px);-moz-transform:translatey(-30px);-o-transform:translatey(-30px);transform:translatey(-30px)}to{opacity:1;-webkit-transform:translatey(0);-moz-transform:translatey(0);-o-transform:translatey(0);transform:translatey(0)}}@keyframes fadeInOpacity{0%{opacity:0}50%{opacity:.5}100%{opacity:1}} a { color: #111; text-decoration: none; transition: all .3s; } i{transition: all .3s;} a:hover { text-decoration: none; color: var(--c1); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; margin-top: 0; line-height: 1.25; font-size: 20px; font-family: var(--font); color: var(--c1); } .title{ color: var(--c2); } .container { max-width: 1270px; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .video-area{padding-top:450px;position:relative}.video-container{position:absolute;width:100%;height:100%;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.video-container iframe{width:100%;height:100%;z-index: 10 ; position: relative} .row0{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:0;margin-left:0}.row0>[class*="col-"]{padding-right:0;padding-left:0}.row1{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1px;margin-left:-1px}.row1>[class*="col-"]{padding-right:1px;padding-left:1px}.row2{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-2px;margin-left:-2px}.row2>[class*="col-"]{padding-right:2px;padding-left:2px}.row3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-3px;margin-left:-3px}.row3>[class*="col-"]{padding-right:3px;padding-left:3px}.row4{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-4px;margin-left:-4px}.row4>[class*="col-"]{padding-right:4px;padding-left:4px}.row5{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.row5>[class*="col-"]{padding-right:5px;padding-left:5px}.row6{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-6px;margin-left:-6px}.row6>[class*="col-"]{padding-right:6px;padding-left:6px}.row7{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-7px;margin-left:-7px}.row7>[class*="col-"]{padding-right:7px;padding-left:7px}.row8{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-8px;margin-left:-8px}.row8>[class*="col-"]{padding-right:8px;padding-left:8px}.row9{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-9px;margin-left:-9px}.row9>[class*="col-"]{padding-right:9px;padding-left:9px}.row10{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.row10>[class*="col-"]{padding-right:10px;padding-left:10px}.row12{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-12px;margin-left:-12px}.row12>[class*="col-"]{padding-right:12px;padding-left:12px}.row15{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.row15>[class*="col-"]{padding-right:15px;padding-left:15px}.row20{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-20px;margin-left:-20px}.row20>[class*="col-"]{padding-right:20px;padding-left:20px}@media screen and (min-width:1200px){.col-5-item{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.col-7-item{-webkit-box-flex:0;-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}} .text1line,.text2line,.text3line,.text4line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.text2line{-webkit-line-clamp:2}.text3line{-webkit-line-clamp:3}.text4line{-webkit-line-clamp:4} .c1, .c1>*{ color: var(--c1) !important } .c2 { color: var(--c2) !important } .c3{ color: var(--c3) !important } .c4, .c4>*{ color: var(--c4) !important } .c3:hover { color: var(--c3) !important } .c1-hover:hover { color: var(--c1) !important } .c2-hover:hover { color: var(--c2) !important } .c3-hover:hover { color: var(--c3) !important } .red { color: var(--red); } .bg-c1 { background-color: var(--c1) !important } .bg-c2 { background-color: var(--c2) !important } .bg-c3 { background-color: var(--c3) !important } .bg-c1-hover:hover{ background-color: var(--c1) !important } .bg-c2-hover:hover{ background-color: var(--c2) !important } .bg-c3-hover:hover{ background-color: var(--c3) !important } .text-white-h:hover{ color: #fff !important; } .zoom-image .thumbnail { position: relative; overflow: hidden } .zoom-image .thumbnail img { max-width: 100%; width: 100%; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out } .zoom-image:hover .thumbnail img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05) } .thumbnail-fill{ position: relative; overflow: hidden; padding-bottom: 66%; } .fill-140{padding-bottom: 140%;} .fill-120{padding-bottom: 120%;} .fill-110{padding-bottom: 110%;} .fill-100{padding-bottom: 100%;} .fill-90{padding-bottom: 90%;} .fill-80{padding-bottom: 80%;} .fill-70{padding-bottom: 70%;} .fill-60{padding-bottom: 60%;} .fill-58{padding-bottom: 58%;} .thumbnail-fill img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); height: 100%; width: 100%; vertical-align: middle; object-position: center; object-fit: cover; } .text-small { font-size: 14px !important } .text-small2 { font-size: 13px !important } .text-small3 { font-size: 12px !important } .text-big { font-size: 18px !important } .text-big2 { font-size: 20px !important } .text-big3 { font-size: 24px !important } .text-big4 { font-size: 29px !important } .text-big5 { font-size: 35px !important } .text-big6 { font-size: 40px !important } .text-big7 { font-size: 48px !important } .text-big8 { font-size: 60px !important } .text-big9 { font-size: 102px !important } .text-normal { font-size: 16px !important; } @media screen and (max-width:992px) { .text-big { font-size: 17px !important } .text-big2 { font-size: 18px !important } .text-big3 { font-size: 21px !important } .text-big4 { font-size: 23px !important } .text-big5 { font-size: 28px !important } .text-big6 { font-size: 32px !important } .text-big7 { font-size: 36px !important } .text-big8 { font-size: 40px !important } .text-big9 { font-size: 45px !important } } .weight-300 { font-weight: 300 !important } .weight-400 { font-weight: 400 !important } .weight-500 { font-weight: 500 !important } .weight-600 { font-weight: 600 !important } .weight-700 { font-weight: 700 !important } .weight-900 { font-weight: 900 !important } .x20{width: 20px !important;min-width: 20px;} .x25{width: 25px !important;min-width: 25px;} .x30{width: 30px !important;min-width: 30px;} .x35{width: 35px !important;min-width: 35px;} .x40{width: 40px !important;min-width: 40px;} .x44{width: 44px !important;min-width: 44px;} .x50{width: 50px !important;min-width: 50px;} .x60{width: 60px !important;min-width: 60px;} .x70{width: 70px !important;min-width: 70px;} .x80{width: 80px !important;min-width: 80px;} .x90{width: 90px !important;min-width: 90px;} .x100{width: 100px !important;min-width: 100px;} .x120{width: 120px !important;min-width: 120px;} .x150{width: 150px !important;min-width: 150px;} .x200{width: 200px !important;min-width: 200px;} .x300{width: 300px !important;min-width: 300px;} .y20{height: 20px !important;min-height: 20px;} .y25{height: 25px !important;min-height: 25px;} .y30{height: 30px !important;min-height: 30px;} .y35{height: 35px !important;min-height: 35px;} .y40{height: 40px !important;min-height: 40px;} .y44{height: 44px !important;min-height: 44px;} .y50{height: 50px !important;min-height: 50px;} .y60{height: 50px !important;min-height: 60px;} .y70{height: 70px !important;min-height: 70px;} .y80{height: 80px !important;min-height: 80px;} .y90{height: 90px !important;min-height: 90px;} .y100{height: 100px !important;min-height: 100px;} .y108{height: 108px !important;min-height: 108px;} .y150{height: 150px !important;min-height: 150px;} .y200{height: 200px !important;min-height: 200px;} .rounded2{ border-radius: 8px !important; } .rounded3{ border-radius: 15px !important; } .rounded4{ border-radius: 20px !important; } .rounded5{ border-radius: 25px !important; } .rounded6{ border-radius: 30px !important; } .rounded7{ border-radius: 45px !important; } .rounded-top{ border-top-left-radius: .25rem; border-top-right-radius: .25rem; } .meta{ color: #999999; } .max-w-100{ max-width: 100%; } .center-absolute{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .center-item{ display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bttn, .wp-element-button{ padding: 9px 20px; background-color: var(--c1); border-radius: 7px; border: none; color: #fff; height: auto; min-width: 100px; transition: all 0.3s; font-weight: 600; outline: none; } .bttn:hover , .wp-element-button:hover{ box-shadow: 2px 1px 10px 1px #72727273; background-color: var(--c1); color: #fff; } .bttn-c3 { padding: 9px 20px; background-color: var(--c3); color: #fff; border-radius: 7px; border: none; height: auto; min-width: 100px; transition: all 0.3s; font-weight: 600; } .bttn-c3:hover { box-shadow: 2px 1px 10px 1px #72727273; color: #fff; } .bttn-outline{ font-weight: 500; padding: 10px 20px; border-radius: 30px; border: 1px solid var(--c1); color: var(--c1); transition: all 0.3s; display: inline-block; } .bttn-outline:hover{ border: 1px solid var(--c1); background-color: var(--c1); color: #fff !important; } .btn-shadow{ transition: all 0.3s } .btn-shadow:hover{ box-shadow: 0px 1px 20px 2px rgb(0 0 0 / 31%); } .bg-black { background-color: #000 } .bttn-form{ position: absolute; top: 5.5px; right: 7px; } .bttn-e{ display: inline-block; padding: 18px 35px; cursor: pointer; user-select: none; color: #fff; position: relative; overflow: hidden; z-index: 1; line-height: 1.223; border-radius: 50px; text-align: center; border: 1px solid var(--c1); background-color: var(--c1); font-size: 18px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .bttn-e:hover{ color: #fff; } .bttn-e::before, .bttn-e::after { content: ""; border-radius: 50%; position: absolute; background-color: #000; width: 100%; aspect-ratio: 1; z-index: -1; opacity: 0.03; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .bttn-e::before { bottom: 10px; right: -45%; } .bttn-e::after { bottom: -15%; right: -30%; } .bttn-e:active::before, .bttn-e:hover::before, .bttn-e:focus::before { transform: scale(1.5); } .bttn-e:active::after, .bttn-e:hover::after, .bttn-e:focus::after { transform: scale(3); } .bttn-e:hover i{ -webkit-animation: toRightFromLeft 0.5s forwards; -moz-animation: toRightFromLeft 0.5s forwards; animation: toRightFromLeft 0.5s forwards; } @-webkit-keyframes toRightFromLeft{49%{-webkit-transform:translateX(100%)}50%{opacity:0;-webkit-transform:translateX(-100%)}51%{opacity:1}}@-moz-keyframes toRightFromLeft{49%{-moz-transform:translateX(100%)}50%{opacity:0;-moz-transform:translateX(-100%)}51%{opacity:1}}@keyframes toRightFromLeft{49%{transform:translateX(100%)}50%{opacity:0;transform:translateX(-100%)}51%{opacity:1}} .shadow{ -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 19%) !important; -moz-box-shadow: 0 0 10px rgb(0 0 0 / 19%) !important; box-shadow: 0 0 10px rgb(0 0 0 / 19%) !important; } .shadow2{ -webkit-box-shadow: 0 0 9px rgb(153 153 153 / 19%) !important; -moz-box-shadow: 0 0 9px rgb(153 153 153 / 19%) !important; box-shadow: 0 0 9px rgb(153 153 153 / 19%) !important; } .shadow3{ -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } .text-grey { color: #838383 } .text-gray { color: #031b4e } .text-black { color: #222 !important; } .underline{ text-decoration: underline; } .top-0{top:0} .left-0{left:0} @media screen and (min-width: 992px){ .col-lg-6-5{ -ms-flex: 0 0 53%; flex: 0 0 53%; max-width: 53%; } .col-lg-5-5{ -ms-flex: 0 0 47%; flex: 0 0 47%; max-width: 47%; } } .show { display: block } .modal-close { position: absolute; z-index: 9; height: 26px; width: 26px; left: auto; right: -13px; bottom: auto; top: -13px; padding: 0; color: #fff; font-family: Arial; font-weight: 100; font-size: 24px; line-height: 24px; border: 2px solid #fff; border-radius: 26px; box-shadow: 0 0 15px 1px rgba(2, 2, 2, .75); text-shadow: 0 0 0 rgba(0, 0, 0, .23); background-color: rgba(0, 0, 0, 1); outline: none !important } .font2 { font-family: var(--font2) } .font3 { font-family: var(--font3) } .popup.active { opacity: 1; visibility: visible; z-index: 99999; } .popup{ position: fixed; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; align-items: center; display: flex; justify-content: center; transition: all 0.3s; user-select: none; } .popup .backdrop{ position: fixed; z-index: 0; background: rgb(0 0 0 / 80%); width: 100%; height: 100%; top: 0; left: 0; } .content-popup{ width: 1100px; max-width: 95%; margin: 0 AUTO; border-radius: 20px; overflow: hidden; position: relative; } .content-popup.popup-md{ width: 400px; } .content-popup.popup-xl{ width: 800px; } .popup-area{ background-color: #fff;; } .popup .closepopup{ position: absolute; right: 8px; top: 8px; cursor: pointer; z-index: 9; } .closepopup.black rect{ fill: #000; } .notification{ position: fixed; z-index: 9999; bottom: -5px; left: 15px; width: fit-content; min-width: 250px; } .notification .item{ background: #fff; display: block; transition: all ease 2s; margin-bottom: -100%; position: relative; padding-right: 30px !important; } .notification.active .item{ margin-bottom: 20px; } .notification i{ position: absolute; right: 5px; top: 5px; cursor: pointer; width: 18px; height: 18px; text-align: center; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: #fff; } .notification i:hover{ background: #111; color: #fff } .title-line { line-height: 1.2; } select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea { display: inline-block; padding: 8px 10px; height: 40px; outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: #fff; border-color: #ddd; color: #000; font-size: 14px; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none } textarea { height: 80px; } .bg-grey { background-color: #edf0f3; } .bg-gray{ background-color: #edf0f3; } .bg-gradient{ background: rgb(0,113,183); background: linear-gradient(90deg, rgba(0,113,183,1) 0%, rgba(41,22,111,1) 100%); } .border-c1{ border: 1px solid var(--c1); } .border-c2{ border: 1px solid var(--c2); } .border-dashed-bottom{ border-bottom: 1px dashed #b5b5b5; } .border-dashed{ border: 1px dashed #b5b5b5; } .border-dotted-bottom{ border-bottom: 1px #d3d3d3 dotted; } .border-bottom-last:last-child{ border-bottom: none !important; } .border-right-last:last-child{ border-right: none !important; } .border-right-last:last-child{ border-right: none !important; } .mb-last:last-child{ margin-bottom: 0 !important; } .mr-last:last-child{ margin-right: 0 !important; } .pb-last:last-child{ padding-bottom: 0 !important; } .bg-cover{ background-size: cover !important; } /*LET START*/ html { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } body{ font-family: "Roboto", sans-serif; font-weight: normal; font-size: 16px; margin: 0; line-height: 1.5; color: #333; -webkit-font-smoothing: antialiased; } .font2{ font-family: "Barlow", sans-serif; } /*head*/ .head { align-items: center; width: 100%; position: relative; } .head-wapper{ color: var(--c1); background-color: #fff; position: relative; z-index: 999; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .container-head{ width: 100% !important; max-width: 1270px; } .fixmenu .head-wapper { position: fixed; left: 0; top: 0; width: 100%; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; z-index: 999; height: auto; border-bottom-width: 0; padding: 0; box-shadow: 5px 10px 20px rgb(0 0 0 / 15%); } .fixmenu .after-head { height: 75px; display: block } @media screen and (min-width: 768px){ .fixmenu .head-fix { display: block !important; } .fixmenu .head-body{ display: none; } .fixmenu .main-header{ position: relative; background: #fff; } .fixmenu .main-header-box{ margin-top: 0px; background: #fff; } .fixmenu .main-menu a{ color: var(--c1); } .fixmenu .head-search svg{ fill: var(--c1); } } .top-bar a{ color: var(--c1); } .top-bar .name{ color: #111 } .top-bar .icon{ border: 1px dotted var(--c1); color: var(--c1); transition: all 0.3s; } .top-bar a:hover{ color: var(--c2) !important; } .top-bar a:hover .name{ color: var(--c2); } .top-bar a:hover .icon{ color: #fff; background-color: var(--c2); } .head .logo img{ max-height: 70px; max-width: 210px; height: auto; width: auto; } .head-hotline .icon{ background-color: #FFF; mask: url(../images/support.svg) no-repeat center / contain; -webkit-mask: url(../images/support.svg) no-repeat center / contain; width: 45px; height: 45px; margin-right: 10px; } .main-header{ position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999; } .main-header-box{ margin-top: -25px; background: var(--c1); border-radius: 10px; -webkit-border-radius: 10px; } /*search mobile*/ .search-wrapper{position:relative;width:100%}.search-box{box-shadow:1px 1px 4px rgba(0,0,0,.2);transition:transform .4s;border-radius:5px;display:flex}.search-wrapper .search-input,.search-wrapper .search-quantity{position:relative;padding:10px 16px;box-sizing:content-box;border:none;background:none;border-radius:6px;height:27px;display:flex;align-items:center}.search-wrapper input{font-size:14px;background:transparent;border:0;box-shadow:none;padding:0;height:auto;border-radius:0!important;color:#333}.search-wrapper input:focus{box-shadow:none;border-color:inherit;outline:none}.search-wrapper input::placeholder{color:#fff}.search-wrapper input:-ms-input-placeholder{color:#fff}.search-wrapper input::-ms-input-placeholder{color:#fff}.search-quantity input{max-width:75px} /*search desktop*/ .head-search{ position: relative; } .head-search .icon{ cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; font-size: 20px; transition: all 0.3s; color: #000; } .head-search .icon svg{ transition: all 0.3s; } .head-search:hover .icon svg{ -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .head-meta .meta-dropdown { position: absolute; top: calc(100% + 15px); left: auto; right: -15px; z-index: 9999999; min-width: 280px; width: 100%; overflow: hidden; padding: 20px 15px; border-radius: 3px; color: #677279; background: #fff; border: solid 1px #dfe3e8; box-shadow: 0 1px 5px 2px rgb(0 0 0 / 10%); visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s, -webkit-transform 0.25s ease-in-out; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s, -webkit-transform 0.25s ease-in-out; will-change: transform; } .head-meta:hover .meta-dropdown { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1); transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear; transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1); } .head-meta .tt { font-size: 17px; color: #252a2b; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 20px; font-weight: 500; padding: 6px 10px; padding-top: 0; text-align: center; border-bottom: 1px solid #ededed; } .head-search input { width: 100%; height: 50px; } .head-search button svg { width: 22px; } .head-search button { position: absolute; top: 0; right: 0; height: 43px; width: 43px; border: none; background: transparent; line-height: 0; cursor: pointer; outline: none; } .head-meta .meta-dropdown { position: absolute; top: calc(100% + 8px); left: auto; right: -15px; z-index: 9999999; min-width: 280px; width: 100%; overflow: hidden; padding: 20px 15px; border-radius: 3px; color: #677279; background: #fff; border: solid 1px #dfe3e8; box-shadow: 0 1px 5px 2px rgb(0 0 0 / 10%); visibility: hidden; opacity: 0; -webkit-transform: scale(.9); transform: scale(.9); transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s, -webkit-transform 0.25s ease-in-out; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, max-height 0s linear 0.25s, -webkit-transform 0.25s ease-in-out; will-change: transform } .head-meta:hover .meta-dropdown { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); transition: opacity 0.4s cubic-bezier(0, 1, .4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(.18, 1.25, .4, 1); transition: opacity 0.4s cubic-bezier(0, 1, .4, 1), transform 0.4s cubic-bezier(.18, 1.25, .4, 1), visibility 0.4s linear; transition: opacity 0.4s cubic-bezier(0, 1, .4, 1), transform 0.4s cubic-bezier(.18, 1.25, .4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(.18, 1.25, .4, 1) } .head-meta .tt { font-size: 17px; color: #252a2b; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 20px; font-weight: 500; padding: 6px 10px; padding-top: 0; text-align: center; border-bottom: 1px solid #ededed } .head-search button svg { width: 22px } .head-search button { position: absolute; top: 0; right: 0; height: 50px; width: 50px; border: none; background: transparent; line-height: 0; cursor: pointer; outline: none } /* main menu*/ .main-menu ul.menu>li { letter-spacing: .2px; display: flex; position: relative; } .main-menu a { font-weight: 700; transition: all .3s; text-decoration: none; font-size: 16px; position: relative; padding: 10px 18px; color: #fff; } .main-menu ul.menu>li>a{ padding: 12px 30px; } .main-menu ul.menu>li:after { content: ""; position: absolute; border-right: 1px solid #0d5889; height: 60%; right: 0; top: 20%; } .main-menu .menu>.menu-item-has-children>a:after { content: "\f107"; font-family: "Font Awesome 6 Pro"; margin-left: 5px; font-size: 13px; opacity: 0.6; } .main-menu .sub-menu { display: block; background-color: #fff; opacity: 0; filter: alpha(opacity=0); visibility: hidden; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; -webkit-transition: .2s ease-out; -ms-transition: .2s ease-out; transition: .2s ease-out; -moz-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); border: none; border-radius: 0; box-shadow: 5px 10px 20px rgba(0, 0, 0, .15); min-width: 250px; font-size: 14px; text-align: left; list-style: none; float: left; position: absolute; top: 100%; left: 0; z-index: 1000 } .main-menu .sub-menu .sub-menu { top: 0; left: 100% } .main-menu .menu-item-has-children:hover>.sub-menu { opacity: 1; filter: alpha(opacity=100); visibility: visible; -moz-transition: .3s ease-in; -o-transition: .3s ease-in; -webkit-transition: .3s ease-in; -ms-transition: .3s ease-in; transition: .3s ease-in; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); display: block; margin-top: 0 } .main-menu .sub-menu li { width: 100%; background: #fff; color: #a5b4be } .main-menu .sub-menu li:last-child { border-bottom: none } .main-menu .sub-menu a { font-size: 14px; text-transform: none; font-weight: 500; display: block; padding: 12px 15px; transition: all 0.3s; height: auto; color: #333; opacity: 0.8; position: relative; border-bottom: 1px solid #ccc; transition: all 0.3s; } .main-menu .sub-menu a:hover { padding-left: 20px; } /*trigger*/ .trigger { position: absolute; z-index: 99; top: 50%; left: 15px; transform: translateY(-50%); -os-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%) } .trigger span { display: block; height: 3px; width: 31px; background: var(--c1); margin-bottom: 4px; border-radius: 5px; } .trigger span:last-child { margin-bottom: 0 } .trigger span:nth-child(2) { width: 20px; } .head .mini-cart{ position: absolute; z-index: 99; top: 50%; right: 15px; transform: translateY(-50%); -os-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%) } .head .mini-cart .count{ border: 2px solid #fff; border-radius: 0; color: #fff; font-size: 1em; font-weight: 700; height: 28px; margin: .3em 0; position: relative; text-align: center; vertical-align: middle; width: 28px; display: inline-block; } .head .mini-cart .count:after { border: 2px solid #fff; border-bottom: 0; border-top-left-radius: 99px; border-top-right-radius: 99px; bottom: 100%; content: " "; height: 8px; left: 50%; margin-bottom: 0; margin-left: -7px; pointer-events: none; position: absolute; transition: height .1s ease-out; width: 14px; } /*menu-mobile*/ .menu-mobile.opened .main-menu-mobile{transform:translateX(0)}.menu-mobile .main-menu-mobile{position:fixed;z-index:99999;background-color:#fff;transition:transform .5s cubic-bezier(.7,0,.3,1) 0s;width:20rem;max-width:100%;bottom:0;text-align:left;top:0;overflow-y:auto;transform:translateX(-20rem);left:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1.25rem;padding-right:38px}.menu-mobile .bg{transition:all 0.3s;opacity:0;visibility:hidden;content:"";position:fixed;background:#0b0b0b96;left:0;top:0;width:100%;height:100%;z-index:0}.menu-mobile.opened .bg{transition:all 0.3s;opacity:1;visibility:visible;z-index:9999}.menu-mobile .close{position:absolute;right:10px;top:10px}.menu-mobile ul{list-style:none}.menu-mobile ul.menu li{display:block;width:100%;position:relative;padding:5px 0;font-size:16px;border-bottom:1px solid #ededed38;}.menu-mobile ul.menu li:last-child{border-bottom:none}.menu-mobile .sub-menu{visibility:hidden;display:none;opacity:0;padding:0;margin-left:20px}.menu-mobile .show>.sub-menu{visibility:visible;opacity:1;animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:1s}.menu-mobile ul.menu i{position:absolute;right:0;top:0;z-index:999;width:35px;height:35px;line-height:35px;text-align:center;transition:all 0.3s;font-size:17px}.menu-mobile ul.menu>li .show i{transform:rotate(90deg)}.menu-mobile ul.menu i:after{content:"\f107";display:inline-block;font-family:"Font Awesome 6 Pro";font-style:normal}.menu-mobile ul.menu a{color:#333;font-weight:500}.menu-mobile ul.menu>li>a{position:relative}.menu-mobile a:hover,.menu-mobile .current-menu-item>a,.menu-mobile .current-menu-ancestor>a{color:#bf7033} .page-title{ font-size: 25px; font-weight: 600; color: var(--c2); border-bottom: 0; position: relative; } @media screen and (max-width: 992px){ .page-title{ font-size: 23px; } } /*page-banner*/ .page-banner { padding-top: 140px; padding-bottom: 140px; background: #000; color: #fff; text-align: left; overflow: hidden; position: relative; z-index: 1 } @media screen and (max-width: 992px) { .page-banner { padding-top: 100px; padding-bottom: 100px } } .banner-title { color: #fff; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 30px #474747; width: 100%; line-height: 1.3; position: relative; z-index: 5 } .page-banner .bg { background-repeat: no-repeat; background-position: center; position: absolute; background-size: cover; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; transition: background 0s !important; } .page-banner .breadcrum { z-index: 2; position: relative; font-weight: 500; font-size: 16px; } .page-banner:before { background-color: rgb(9 46 101 / 33%); height: 100%; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; zoom: 1; -moz-opacity: 1; content: ""; z-index: 3 } .page-banner .container { position: relative; z-index: 4 } /*breadcrum*/ .breadcrum { font-weight: 500 } .breadcrum a { text-decoration: none; opacity: 1; font-weight: 300; } .breadcrum a:hover{ color: var(--c1) } .breadcrum span:not(:last-child) a:after { /*content: "\f105";*/ content: "/"; font-family: var(--font-icon); margin: 0 10px; font-size: 12px; color: #fff; } .page-banner .breadcrum a { color: #fff } .page-banner .breadcrum a:hover { color: var(--c1); } .content-body{ /*background-color: #f5f5f5;*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .main{ padding-top: 40px; padding-bottom: 40px; } /*product*/ .product-gallery{ width: 100%; } .gallery-thumbnails{ } .gallery-slide{ position: relative; background: #fff; } .tabs-control .nav-link{ background: #fff; color: var(--c1); border: 1px solid #ccc; } .tabs-control .nav-link.active{ background: var(--c1); color: #fff; } .product-content ul { list-style: none } .product-content ul li { margin-bottom: 4px } .product-content ul li:before { content: "\f058"; font-family: "Font Awesome 6 Pro"; margin-right: 4px; color: var(--c2) } .product-form-simple p { margin: 0 } .product-form-simple p { margin: 0 } .star-rating { position: relative; display: inline-block; overflow: hidden; line-height: 14px; height: 18px } .star-rating::before { font-family: "Font Awesome 6 Pro"; content: "\f005\f005\f005\f005\f005"; letter-spacing: 3px; color: #dad9e9; font-weight: 900; height: 18px } .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; height: 18px } .star-rating span::before { font-family: "Font Awesome 6 Pro"; content: '\f005\f005\f005\f005\f005'; letter-spacing: 3px; color: var(--c2); font-weight: 900; z-index: 9; height: 18px } .gallery-thumbnails { position: relative } .gallery-thumbnails .item img{ border: 1px solid #ccc; cursor: pointer; opacity: .7; transition: all 0.3s; padding: 8px; overflow: hidden; border-radius: 10px; } .gallery-thumbnails .slick-slide.slick-current img { opacity: 1; border-color: var(--c1) } .product-price .price{ gap: 10px; align-items: center; } .price del { opacity: .6; font-size: 70%; font-weight: 400; order: 2; color: #333; } .price ins { text-decoration: none } .form-product-quantity .qty{ border-top: 0; border-bottom: 0; width: 40px; height: 30px; } .form-product-quantity .qty::-webkit-outer-spin-button, .form-product-quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; -moz-appearance: textfield; } .form-product-quantity .quantity button{ border: none; box-shadow: none; background: transparent; outline: none; padding: 0 10px; } .form-product-quantity .quantity button:hover{ color: var(--c1); } .product-list .added_to_cart { display: none } .add_to_cart.loading .lte-btn-after>i { animation-name: fa-spin; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 1s; animation-direction: normal; animation-delay: 0s } .add_to_cart.loading .lte-btn-after>i:before { content: "\f3f4" } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .add_to_cart.added .lte-btn-after>i:before { content: "\f00c" } .box-view-more{ overflow: hidden; position: relative; padding-bottom: 50px !important; } .btn-view-more{ position: absolute; z-index: 1; bottom: 14px; left: 50%; transform: translateX(-50%); -os-transform: translateX(-50%); -o-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); } .box-view-more:not(.expanded):not(.no-body){ height: 400px; overflow: hidden; position: relative; } .box-view-more:not(.expanded) .entry-content:before { content: ""; position: absolute; display: block; width: 100%; height: 100%; background: linear-gradient(180deg,hsla(0,0%,100%,0) 20%,#fff); } .box-view-more p{margin-bottom: 5px} .btn-view-more .more, .box-view-more.expanded .btn-view-more .less{ display: block; } .box-view-more.expanded .btn-view-more .more, .box-view-more .btn-view-more .less{ display: none; } .box-view-more.no-body .entry-content:before, .box-view-more.no-body .btn-view-more{ display: none !important;} .box-view-more.no-body .entry-content{ height: auto !important; overflow: visible; } .entry-content table{ width: auto; margin-bottom: 1rem; color: #212529; margin: 15px 0; } .entry-content table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } .entry-content table td, .entry-content table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; } /*comment-item*/ .comment-item img{border-radius:50%;height:48px!important;width:48px!important;float:left}.comment-item .author-info{display:inline-block}.comment-item .author-name{font-weight:900;line-height:1.25}.comment-item .author-info span{font-size:90%}.review-content{margin-top:.75rem;color:#555!important}.review-star{color:#ffb025}.review-star .fa{margin-right:1px}#star{border:none;float:left}#star>input{display:none}#star>label:before{margin-right:5px;padding:0 2px;font-size:1.5em;font-weight:700;font-family:"Font Awesome 6 Pro";display:inline-block;content:"\f005"}#star>.half:before{content:"\f089";position:absolute}#star>label{color:#ddd;float:right;cursor:pointer}#star>input:checked~label,#star:not(:checked)>label:hover,#star:not(:checked)>label:hover~label{color:gold}#star>input:checked+label:hover,#star>input:checked~label:hover,#star>label:hover~input:checked~label,#star>input:checked~label:hover~label{color:#FFED85} /*product-list*/ .product-list { position: relative; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .product-list:after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; bottom: -50%; background-image: linear-gradient(to top, #00000080 50%, transparent); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: 1; } .product-list:hover:after{ bottom: 0; } .product-list .see-details { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); color: var(--c3); } .product-list:hover .see-details { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .product-list .body-item{ position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; z-index: 2; transition: all 0.3s; } .product-list:hover .body-item { transform: translateY(-50px); -webkit-transform: translateY(-50px); } span.ltx-border-top { content: ""; pointer-events: none; padding: 0; z-index: 3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } span.ltx-border-top:before { border-left: 5px solid var(--c1); -webkit-transform: scaleY(0) !important; -moz-transform: scaleY(0) !important; -ms-transform: scaleY(0) !important; -o-transform: scaleY(0) !important; transform: scaleY(0) !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } span.ltx-border-top:after{ border-top: 5px solid var(--c1); -webkit-transform: scaleX(0) !important; -moz-transform: scaleX(0) !important; -ms-transform: scaleX(0) !important; -o-transform: scaleX(0) !important; transform: scaleX(0) !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; left: 0; } span.ltx-border-bottom:before{ border-right: 5px solid var(--c1); -webkit-transform: scaleY(0) !important; -moz-transform: scaleY(0) !important; -ms-transform: scaleY(0) !important; -o-transform: scaleY(0) !important; transform: scaleY(0) !important; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } span.ltx-border-bottom:after{ border-bottom: 5px solid var(--c1); -webkit-transform: scaleX(0) !important; -moz-transform: scaleX(0) !important; -ms-transform: scaleX(0) !important; -o-transform: scaleX(0) !important; transform: scaleX(0) !important; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } span.ltx-border-top:before, span.ltx-border-top:after, span.ltx-border-bottom:before, span.ltx-border-bottom:after{ content: ""; pointer-events: none; padding: 15px; z-index: 3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .product-list:hover span.ltx-border-top:before, .product-list:hover span.ltx-border-top:after, .product-list:hover span.ltx-border-bottom:before, .product-list:hover span.ltx-border-bottom:after{ -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; -ms-transform: scale(1) !important; -o-transform: scale(1) !important; transform: scale(1) !important; } /* SECTION */ .section { padding-top: 50px; padding-bottom: 40px; position: relative } .title-section { font-size: 26px; font-weight: 600; color: var(--c2); position: relative } .section-bg { background-position: center center; background-size: cover; background-repeat: no-repeat } .section-bg-left{ background-repeat: no-repeat; background-position: left center; } .gioithieu-box .image2{ position: absolute; bottom: 0; left: 0; width: calc(50% + 3px); height: 220px; background-color: #fff; border-top: 4px solid #fff; border-right: 4px solid #fff; } .gioithieu-box .image3{ position: absolute; bottom: 0; right: 0; width: calc(50% + 3px); height: 320px; background-color: #fff; border-top: 4px solid #fff; border-left: 4px solid #fff; } .about-box .text-box{ border-left: 3px solid #fff; } .line-1{ line-height: 1.2; } @media screen and (min-width: 765px) { .about-wapper{ position: absolute; left: 0; top: 0; width: 100%; z-index: 3; transform: translateY(-50%); -os-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } } /*services*/ .item-services .box-text{ position: absolute; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(to top, #003456, rgba(0, 52, 86, 0.8), rgba(255, 255, 255, 0)); transition: all 0.3s; transform: translateY(120px); -webkit-transform: translateY(120px); } .item-services:hover .box-text{ transform: translateY(0px); -webkit-transform: translateY(0px); } .box-faq .card-head{ background-image: url(../images/2607293_4981.jpg); background-blend-mode: multiply; background-size: cover; background-position: center; padding: 10px; cursor: pointer; color: #000; transition: all 0.3s; } .box-faq .item-card:not(.active) .card-head:hover{ background-color: #cccccc7d; } .box-faq .active .card-head{ background-color: #036eb3; color: #fff; } .box-faq .arrow{ transition: all 0.3s; color: #000; } .box-faq .active .arrow{ transform: rotate(180deg); color: #fff; } .box-faq .card-desc{ display: none; } .box-faq .active .card-desc{ display: block; } .box-faq .active .card-head img{ filter: brightness(0) invert(1); } .video-button a{ background-color: var(--c2); transition: all 0.3s; } .video-button a:hover{ background-color: red; } .video-button a:before{ animation: ripple 2s linear 1s infinite; } .video-button a:after{ animation: ripple 2s linear infinite; } .video-button a:after, .video-button a:before{ content: ""; display: block; position: absolute; top: 0; right: 0; z-index: -1; bottom: 0; left: 0; border-radius: 50%; border: 1px solid #036eb3; } @keyframes ripple { 0% { transform: scale(1) } 75% { transform: scale(1.75); opacity: 1 } to { transform: scale(2); opacity: 0 } } .contact-area{ margin-bottom: -30px; position: relative; z-index: 90; } .form-contact .bttn{ position: absolute; top: 7px; right: 7px; padding: 17px 20px; width: auto; font-weight: 300; border-radius: 10px; background-color: var(--c1); font-size: 16px; } .form-contact .wpcf7-text{ box-shadow: none; border: none; outline: none; font-size: 16px; } .wpcf7 form .wpcf7-response-output{ background: #fff; } /*partner*/ .partner-item { text-align: center; height: 0 !important; padding-top: 100px; position: relative } .partner-item img { margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translateX(-50%, -50%); -o-transform: translateX(-50%, -50%); -moz-transform: translateX(-50%, -50%); -webkit-transform: translateX(-50%, -50%); max-height: 95%; width: 80%; } /*sidebar*/ .sidebar-wrapper { margin-bottom: 30px; background: #f5f5f5; } .title-widget{ line-height: 30px; display: inline-block; padding: 0 0 0px 40px !important; position: relative; } .title-widget:before { content: ""; width: 20px; height: 5px; position: absolute; left: 0; top: 14px; background: #036eb3; display: inline-block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .title-widget:after { content: ""; width: 5px; height: 5px; position: absolute; left: 23px; top: 14px; background: #036eb3; display: inline-block; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; } .title-widget span { display: block; line-height: 1.4; } .widget-body li{ list-style-type: none; margin-bottom: 3px; } .widget-body li:before{ content: "\f105"; font-family: var(--font-icon ); display: inline-block; margin-right: 6px; } .network-social{ display: flex; align-items: center; } .network-social a{ width: 35px; height: 35px; line-height: 35px; border: 1px solid var(--c1); color: var(--c1); text-align: center; margin-right: 8px; border-radius: 8px; transition: all .5s ease-in-out; } .network-social a:hover{ border-color: var(--c2); color: var(--c2); } .title-related { padding-bottom: 5px; margin-bottom: 15px; position: relative; font-size: 20px; color: #043d1e; font-weight: 600 } .alert.alert-success a { float: right } .alert a { padding: 0 !important; background: none !important; color: var(--c1) !important; outline: none !important; box-shadow: none !important } /*widget_categories*/ .product-categories{ background-color: var(--c1); font-weight: 400; } .product-categories li{ padding: 5px 5px 5px 15px; border-bottom: 1px solid #ffffff40; position: relative; list-style: none; display: inline-block; width: 100%; transition: all 0.3s; } .product-categories li:hover, .product-categories li.show{ background-color: var(--c3); } .product-categories li a{ padding: 6px 0; display: block; color: #fff; } .product-categories li a:hover{ color: #fff; } .product-categories ul a{ display: inline-block; font-size: .9em; padding: 3px 0; } .product-categories ul>li{ border-bottom: none; padding: 3px 5px 3px 15px; } .product-categories li:last-child{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; } ul.product-categories ul.children { display: none; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; border-left: 1px solid #fff; margin-bottom: 5px !important; } ul.product-categories li.show>ul.children { display: block; } ul.product-categories .cat-parent i { position: absolute; color: #fff; top: 11px; right: 0; display: block; font-style: normal; transition: all 0.3s; user-select: none; cursor: pointer; padding: 0 10px; } ul.product-categories .cat-parent i:after { content: "\f107"; font-family: "Font Awesome 6 Pro"; font-size: 15px } ul.product-categories .cat-parent.show>i { transform: rotate(90deg) } a.icon-active i:before{ content: "\f14a"; } input[type='range'] { width: 100%; height: 3px; background-color: var(--c2); cursor: pointer; outline: none; } input[type='range']::-webkit-slider-thumb { background: var(--c2); -webkit-appearance: none; cursor: ew-resize; /*box-shadow: -80px 0 0 80px var(--c2);*/ } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 1px; background: var(--c2); } input[type='range']:nth-child(2)::-webkit-slider-runnable-track { background: none; } input[type='range']::-webkit-slider-thumb { position: relative; height: 17px; width: 17px; margin-top: -8px; background: #000; border-radius: 25px; z-index: 1; } input[type='range']:nth-child(1)::-webkit-slider-thumb { z-index: 2; } .rangeslider { position: relative; width: 100%; display: inline-block; user-select: none; } .rangeslider input { position: absolute; } .rangeslider span { position: absolute; margin-top: 24px; left: 0; } .rangeslider .right { position: relative; float: right; margin-right: -5px; } .filter-btn { display: inline-block; color: #000; border: 1px solid #000; padding: 2px 4px; } .filter-btn:hover { color: #fff; background: #000; } /*post*/ .blog-list { opacity: 0; transition: all 0.3s } .entry-title { font-size: 22px; font-weight: 600; color: var(--c2); border-bottom: 0 } .meta-post{ color: #999999; border-bottom: 1px dashed #DEE0EA; } .category-list a { color: var(--c2) } .tagcloud a { border: 1px solid #000; background: #fff; padding: 2px 10px; margin-right: 8px; color: #000; font-size: 16px !important; transition: all 0.3s; margin-bottom: 8px } .tagcloud a:hover { background: #000; color: #fff } .post-detail { padding-bottom: 30px } .post-detail table th { background: #f6f6f6 } .post-detail table th, .post-detail table td { border: 1px solid #dcdcdc; padding: 10px; text-align: left } .post-detail table tr:nth-child(even), .post-detail table tr:nth-child(even) { background: #f6f6f6 } .list-post.item .post-date{ padding: 12px 15px 12px 0px; background-color: #fff; position: absolute; top: 0; z-index: 1; transform: translateY(-100%); -os-transform: translateY(-100%); -o-transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; } .list-post.item .post-date:before{ position: absolute; left: -1px; top: -26px; content: ""; height: 26px; width: 20px; border-bottom-left-radius: 10px; box-shadow: 0 20px 0 0 #fff; } .list-post.item .post-date:after{ position: absolute; right: -20px; bottom: 0; content: ""; height: 33px; width: 20px; border-bottom-left-radius: 10px; box-shadow: 0 20px 0 0 #fff; } .list-post.item .title ,.list-post.item .post-date i{ position: relative; z-index: 1; transition: all 0.3s; } .list-post.item .title:hover{ color: var(--c1) !important; } /*pagination*/ .pagination { width: 100%; text-align: center; display: inline-block; padding: 30px 0 } .pagination .page-numbers { display: inline-block; margin: 0 auto; } .pagination .page-numbers>li { display: inline-flex } .pagination .page-numbers>li>a, .pagination .page-numbers>li>span { width: 35px; height: 35px; line-height: 35px; text-align: center; border: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c1); border-radius: 50%; } .pagination .page-numbers .current, .pagination .page-numbers>li>a:hover, .pagination .page-numbers>li>span:hover { color: #fff !important; background-color: var(--c1); } .pagination .page-numbers .next, .pagination .page-numbers .prev { color: #000; border: 1px solid var(--c1); transition: all 0.3s } .pagination .page-numbers>li>a:focus, .pagination .page-numbers>li>a:hover, .pagination .page-numbers>li>span:focus, .pagination .page-numbers>li>span:hover { z-index: 2; color: var(--c1) } /*share icon*/ .share>a{padding:4px 7px;border:1px solid;border-radius:3px;color:#fff;font-size:11px;display:inline-block;margin-top:0;transition:all 0.3s}.share>a:hover,.share>a:hover .fa{background:transparent;color:#222;text-decoration:none}.share>a .fa{color:#fff;margin-right:3px}.share .facebook{background:#1877f2;border-color:#1877f2}.share .twitter{border-color:#55acee;background-color:#55acee}.share .google{border-color:#dd4d42;background-color:#dd4d42} .share-icons { display: flex; align-items: center; margin-left: auto; margin-right: auto } .share-icons>a { width: 34px; height: 34px; display: inline-block; text-align: center; padding-left: 0; padding-right: 0; opacity: 1; border: 2px solid #585858; background-color: transparent; border-radius: 50%; object-fit: cover; font-size: 15px; line-height: 30px; position: relative; margin-right: 4px; color: #585858; } .share-icons>a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } .facebook:hover { color: #3a589d; border-color: #3a589d; } .twitter:hover { color: #2478ba; border-color: #2478ba; } .email:hover { color: #111; border-color: #111; } .pinterest:hover { color: #cb2320; border-color: #cb2320; } .linkedin:hover { color: #0072b7; border-color: #0072b7; } /*footer*/ #footer{ position: relative; } .footer-bg{ background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; width: 100%; height: 100%; z-index: -1; } .about-footer, .main-footer{ position: relative; z-index: 2; } #footer .textwidget>ul{ list-style: none; } #footer .textwidget>ul>li{ margin-bottom: 10px; } #footer .textwidget ul>li:before{ content: "\f058"; font-family: var(--font-icon); color: var(--c1); margin-right: 8px; font-weight: 900; } .main-footer { padding-top: 40px; /*padding-bottom: 40px;*/ background-size: cover; background-position: center; background-repeat: no-repeat; border-top: 1px solid #ddd; } .f-border-bottom{ border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .title-footer { font-size: 20px; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; color: var(--c1); } .footer .widget_text { margin-bottom: 30px } .error { border-color: red } .wpcf7-form { position: relative } .wpcf7-form.submitting { /*opacity: .6*/ } .wpcf7-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -os-transform: translateX(-50%, -50%); -o-transform: translateX(-50%, -50%); -moz-transform: translateX(-50%, -50%); -webkit-transform: translateX(-50%, -50%) } /*group-button{*/ .group-button{position:fixed;bottom:90px;left:20px;z-index:99999}.group-button.right{right:3px;left:auto;bottom:60px}.group-button .item{position:relative;left:10px;margin-bottom:10px}.group-button .item:before{content:"";border:1px solid var(--c2);background-color:rgba(27,127,204,.8);border-radius:100%;display:block;position:absolute;z-index:-1;height:100%;width:100%;opacity:1;-moz-animation:sonar 1.25s linear infinite;-o-animation:sonar 1.25s linear infinite;-webkit-animation:sonar 1.25s linear infinite;animation:sonar 1.25s linear infinite}@-webkit-keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(2);transform:scale(2);opacity:0}}.group-button.right .item{right:10px;left:auto}.group-button .item img{width:45px;height:45px;border-radius:50%}.group-button .item .text{opacity:0;visibility:hidden;text-align:center;border-radius:5px;white-space:nowrap;width:auto;line-height:25px;padding:5px 10px;position:absolute;top:4px;font-size:12px;color:#fff;cursor:pointer;background-color:#314282b3;left:110%}.group-button.right .item .text{right:110%;left:auto}.group-button .item .text:before{content:"";position:absolute;top:50%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent #314282b3 transparent transparent!important;right:100%;display:unset!important}.group-button.right .item .text:before{right:auto;left:100%;transform:rotateZ(-180deg)}.group-button .item:hover .text{visibility:visible;opacity:1}@media only screen and (max-device-width:991px){.group-button .item .text{display:none}} /*social*/ .social{margin-bottom:15px}.social a{width:30px;height:30px;border:1px solid #ccc;border-radius:50%;display:block;text-align:center;line-height:28px;color:#fff}.social a:hover{-webkit-box-shadow:inset 0 0 200px rgba(0,0,0,.15);box-shadow:inset 0 0 200px rgba(0,0,0,.15)}.social ul{margin:0!important;padding:0!important}.social ul li{padding:0 0 0 2px!important;margin-top:0!important;border:none!important}.social ul>li:before{display:none}.social a.twitter{background:#1da1f2;border-color:#1da1f2}.social a.facebook{background:#365493;border-color:#365493}.social a.pinterest{background:#e60023;border-color:#e60023}.social a.github{background:#fff}.social a.github i{color:#000}.social a.linkedin{background:#0077b5;border-color:#0077b5}.social a.google{background:#db4437;border-color:#db4437} /*woocommerce*/ .button, .submit { padding: 11px 20px; background-color: var(--c1); border-radius: 30px; border: none; color: #fff; height: auto; min-width: 100px; transition: all 0.3s; } .button:hover, .submit:hover { box-shadow: 2px 1px 10px 1px #72727273; color: #fff; background-color: var(--c1) } .woocommerce table.shop_table { border: 1px solid rgba(0, 0, 0, .1); margin: 0 -1px 24px 0; text-align: left; width: 100%; border-collapse: separate; border-radius: 5px } .shop_table .coupon { margin-bottom: 15px } #add_payment_method table.cart td, #add_payment_method table.cart th, .woocommerce-cart table.cart td, .woocommerce-cart table.cart th, .woocommerce-checkout table.cart td, .woocommerce-checkout table.cart th { vertical-align: middle } .woocommerce table.shop_table th { font-weight: 700; padding: 9px 12px } .woocommerce table.shop_table td { border-top: 1px solid rgba(0, 0, 0, .1); vertical-align: middle } #add_payment_method table.cart .product-thumbnail, .woocommerce-cart table.cart .product-thumbnail, .woocommerce-checkout table.cart .product-thumbnail { min-width: 32px } .woocommerce #content table.cart td.actions, .woocommerce table.cart td.actions, .woocommerce-page #content table.cart td.actions, .woocommerce-page table.cart td.actions { text-align: right } .woocommerce a.remove { display: block; font-size: 1.5em; height: 1em; width: 1em; text-align: center; line-height: 1; border-radius: 100%; color: red; text-decoration: none; font-weight: 700; border: 0 } .woocommerce a.remove:hover { color: #fff; background: red } #add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img { width: 32px; -webkit-box-shadow: none; box-shadow: none } .quantity .qty { width: 3.631em; padding: 5px; text-align: center } #add_payment_method table.cart input, .woocommerce-cart table.cart input, .woocommerce-checkout table.cart input { margin: 0; vertical-align: middle; line-height: 1 } .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled] { color: inherit; cursor: not-allowed; opacity: .5 } .woocommerce table.shop_table tbody:first-child tr:first-child td, .woocommerce table.shop_table tbody:first-child tr:first-child th { border-top: 0 } #add_payment_method .cart-collaterals .cart_totals tr td, #add_payment_method .cart-collaterals .cart_totals tr th, .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th, .woocommerce-checkout .cart-collaterals .cart_totals tr td, .woocommerce-checkout .cart-collaterals .cart_totals tr th { border-top: 1px solid #ebe9eb } #add_payment_method .cart-collaterals .cart_totals table td, #add_payment_method .cart-collaterals .cart_totals table th, .woocommerce-cart .cart-collaterals .cart_totals table td, .woocommerce-cart .cart-collaterals .cart_totals table th, .woocommerce-checkout .cart-collaterals .cart_totals table td, .woocommerce-checkout .cart-collaterals .cart_totals table th { vertical-align: top; border-left: 0; border-right: 0; line-height: 1.5em } #add_payment_method .cart-collaterals .cart_totals table th, .woocommerce-cart .cart-collaterals .cart_totals table th, .woocommerce-checkout .cart-collaterals .cart_totals table th { width: 40% } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: #ebe9eb; border-radius: 5px } #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { text-align: left; padding: 1em; border-bottom: 1px solid #d3ced2; margin: 0; list-style: none outside } #add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li { line-height: 2; text-align: left; margin: 0; font-weight: 400 } #add_payment_method #payment ul.payment_methods li input, .woocommerce-cart #payment ul.payment_methods li input, .woocommerce-checkout #payment ul.payment_methods li input { margin: 0 1em 0 0 } #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 1em; margin: 1em 0; font-size: .92em; border-radius: 2px; line-height: 1.5; background-color: #dfdcde; color: #515151 } #add_payment_method #payment div.payment_box p:last-child, .woocommerce-cart #payment div.payment_box p:last-child, .woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0 } #add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row { padding: 1em } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0; outline: 0; line-height: 1 } .woocommerce form .form-row textarea { height: 4em; line-height: 1.5; display: block; -webkit-box-shadow: none; box-shadow: none; min-width: 350px } #customer_details input[type=text], #customer_details input[type=number], #customer_details input[type=email], #customer_details input[type=tel], #customer_details textarea { padding: 6px; border-radius: 2px; border: 1px solid #ccc } .woocommerce-order li { list-style: none } .woocommerce-mini-cart__empty-message { margin: 0 15px } .woocommerce-checkout label { min-width: 200px } /*nivoSlider*/ .nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}.nivoSlider img{position:absolute;top:0;left:0;max-width:none}.nivo-main-image{display:block!important;position:relative!important;width:100%!important}.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}.nivo-box img{display:block}.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.nivo-caption p{padding:5px;margin:0}.nivo-caption a{display:inline!important}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0}.nivo-nextNav{right:0}.nivoSlider:hover .nivo-directionNav>a{opacity:1}.nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0;left:0;display:none;min-height:250px;vertical-align:middle;object-position:center;object-fit:cover}.nivoSlider a{border:0;display:block}.nivo-controlNav{text-align:center;position:absolute;bottom:0;width:100%;z-index:6}.nivo-controlNav a.active{background-color:var(--c1)}.nivo-controlNav a{display:inline-block;width:15px;height:15px;text-indent:-9999px;border:0;margin:0 2px;cursor:pointer;background-color:#ccc;border-radius:50%;position:relative;z-index:1}.nivo-controlNav a.active{background-position:0 -22px}.nivo-directionNav a{opacity:0;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out}.nivoSlider:hover .nivo-directionNav a{opacity:1}a.nivo-nextNav{background-position:-30px 0;right:15px}a.nivo-prevNav{left:15px}.nivo-directionNav>a{font:normal normal normal 14px/1 "Font Awesome 6 Pro";width:35px;height:35px;font-size:22px;display:inline-block;white-space:nowrap;overflow:hidden;color:transparent;line-height:34px;text-align:center;background:#00000087;border-radius:50%;user-select:none;color:#fff!important}.nivo-directionNav>a:hover{color:var(--c1)}.nivo-directionNav .nivo-prevNav:before{content:"\f104"}.nivo-directionNav .nivo-nextNav:before{content:"\f105";position:relative;right:-1px}.nivo-caption a{color:#fff;border-bottom:1px dotted #fff}.nivo-caption a:hover{color:#fff}.nivo-controlNav.nivo-thumbs-enabled{width:100%}.nivo-controlNav.nivo-thumbs-enabled a{width:auto;height:auto;background:none;margin-bottom:5px}.nivo-controlNav.nivo-thumbs-enabled img{display:block;width:120px;height:auto} /*Slider slick*/ .slide-center5:not(.slick-vertical) { margin-right: -5px; margin-left: -5px } .slide-center5:not(.slick-vertical) .slick-slide { padding-right: 5px; padding-left: 5px } .slide-center10:not(.slick-vertical) { margin-right: -10px; margin-left: -10px } .slide-center10:not(.slick-vertical) .slick-slide { padding-right: 10px; padding-left: 10px } .slide-center15:not(.slick-vertical) { margin-right: -15px; margin-left: -15px } .slide-center15:not(.slick-vertical) .slick-slide { padding-right: 15px; padding-left: 15px } .slide-center5.slick-vertical { margin-top: -5px; margin-bottom: -5px } .slide-center5.slick-vertical .slick-slide { padding-top: 5px; margin-bottom: 5px } .slide-center10.slick-vertical .slick-slide { padding-top: 10px; margin-bottom: 10px } .slide-center10.slick-vertical { margin-top: -10px; margin-top: -10px } .slide-center10.slick-vertical .slick-slide { padding-top: 10px; padding-top: 10px } .slick-loading .slick-list { background: #fff url(../img/ajax-loader.gif) center center no-repeat } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25 } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } [dir='rtl'] .slick-prev { right: -25px; left: auto } .slick-prev:before { content: '←' } [dir='rtl'] .slick-prev:before { content: '→' } [dir='rtl'] .slick-next { right: auto; left: -25px } .slick-next:before { content: '→' } [dir='rtl'] .slick-next:before { content: '←' } /* Slider */ .slick-slider { position: relative; cursor: grab; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto } .slick-track:before, .slick-track:after { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [dir='rtl'] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-prev { left: 15px } .slick-next { right: 15px } .slick-next, .slick-prev { position: absolute; display: block; line-height: 0; font-size: 0; cursor: pointer; color: transparent; top: 50%; transform: translateY(-50%); padding: 0; outline: none; box-shadow: 0 0 7px -4px #000; width: 40px; height: 40px; border-radius: 50%; transition: all .3s ease-in-out; z-index: 1; background: rgba(0, 0, 0, .7); color: #fff; width: 30px; height: 30px; color: #000; background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) } .slick-next:not(.slick-disabled):hover, .slick-prev:not(.slick-disabled):hover { outline: none; box-shadow: 0 0 5px 0 rgba(246, 94, 57, .5) } .arrow-out .slick-prev { left: -10px; } .arrow-out .slick-next{ right: -10px; } @media screen and (min-width: 765px){ .arrow-out .slick-prev { left: -35px; } .arrow-out .slick-next{ right: -35px; } } .slick-arrow.slick-hidden { display: none } .slick-next.slick-disabled, .slick-prev.slick-disabled { opacity: 0 } .slick-next:before, .slick-prev:before { font-family: "Font Awesome 6 Pro"; font-size: 1.4rem; color: #000; transition: all 0.3s } .slick-next:hover:before, .slick-prev:hover:before { color: var(--c1) } .slick-next:before { content: "\f105" } .slick-prev:before { content: "\f104" } .slick-vertical .slick-prev{ top: -9px; left: 50%; transform: translate(-50%, -20%); } .slick-vertical .slick-prev:before{ content: "\f106"; } .slick-vertical .slick-next{ top: 100%; left: 50%; transform: translate(-50%, -40%); } .slick-vertical .slick-next:before{ content: "\f107"; } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { font-size: 0; line-height: 0; display: block; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent } .slick-dots li button:hover, .slick-dots li button:focus { outline: none } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1 } .slick-dots li button:before { font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 12px; height: 12px; content: ""; text-align: center; opacity: .25; color: #000; background-color: #000; border-radius: 50%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: all 0.3s } .slick-dots li.slick-active button:before { opacity: .75; background: var(--c1) }