html {
color: #222222
}
:root {
--main-color: #ef0032;
--extra-color: #105aa8;
--black-color: #23232B;
--body-color: #f6f6f6
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
legend,
input,
button,
textarea,
p,
blockquote {
margin: 0;
padding: 0
}
body {
font: 14px/18px Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
margin: 0;
padding: 0;
width: 100%;
background: #ffffff
}
.fieldset {
margin: 0;
padding: 10px
}
th,
td {
margin: 0
}
a {
color: #333;
text-decoration: none;
-moz-transition: all 0.2s ease-in 0;
-webkit-transition: all 0.2s ease-in;
-webkit-transition-delay: 0;
transition: all 0.2s ease-in 0
}
a:hover {
color: #ED1C24
}
table {
border-collapse: collapse;
border-spacing: 0
}
.red,
.label_error {
color: red
}
.redborder {
border: 1px solid red
}
.bold {
font-weight: bold
}
img {
border: 0;
max-width: 100%
}
address,
caption,
cite,
code,
dfn,
em,
th,
var,
optgroup {
font-style: inherit;
font-weight: inherit
}
del,
ins {
text-decoration: none
}
li {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: baseline
}
sub {
vertical-align: baseline
}
legend {
color: #000000;
font-weight: bold;
padding: 0 8px
}
figure {
margin: 0;
text-align: center;
margin-bottom: 12px
}
.figcaption {
font-style: italic
}
input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
outline: none
}
input,
button,
textarea,
select {
*font-size: 100%
}
table {
font: 100%;
border-collapse: collapse
}
pre,
code,
kbd,
samp,
tt {
font-family: monospace;
*font-size: 108%;
line-height: 100%
}
select {
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
background-position: calc(100% - 13px) calc(0.8em + 0px), calc(100% - 8px) calc(0.8em + 0px), 100% 0;
background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
background-repeat: no-repeat
}
select:focus {
background-image: linear-gradient(45deg, #000 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #000 50%), linear-gradient(to right, #fff, #fff);
background-position: calc(100% - 9px) 0.8em, calc(100% - 14px) 0.8em, 100% 0;
background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
background-repeat: no-repeat;
border-color: grey;
outline: 0
}
.clear,
.clearfix {
clear: both
}
.cls::after {
content: '';
display: block;
clear: both
}
.hidden,
.hide,
.hiden {
display: none
}
.pagination {
text-align: center;
margin-top: 20px
}
.pagination .current {
background: none repeat scroll 0 0 var(--main-color);
color: #FFFFFF;
display: inline-block;
font-size: 14px;
margin-right: 8px;
padding: 6px 13px;
border-radius: 4px
}
.pagination a,
.pagination b {
background: none repeat scroll 0 0 #F5F5F5;
color: #4C4C4C;
display: inline-block;
font-size: 14px;
margin-right: 8px;
padding: 6px 13px;
border-radius: 4px;
text-decoration: none
}
.pagination a:hover,
.pagination b:hover {
background: none repeat scroll 0 0 var(--main-color);
color: #FFFFFF;
-webkit-transition: 0.15s ease-in-out all;
transition: 0.15s ease-in-out all
}
.next-page {
padding: 6px 15px 6px !important
}
.pre-page {
padding: 6px 15px 6px !important
}
.next-page:hover {
-webkit-transition: 0.15s ease-in-out all;
transition: 0.15s ease-in-out all
}
.pre-page:hover {
-webkit-transition: 0.15s ease-in-out all;
transition: 0.15s ease-in-out all
}
.left {
float: left
}
.right {
float: right
}
.page_title {
border-bottom: 2px solid #EEE;
color: #0E5FA3;
margin-bottom: 20px !important;
text-transform: none;
padding-bottom: 4px;
margin-top: 5px
}
.page_title span {
color: var(--main-color);
border-bottom: 2px solid var(--main-color);
font-size: 17px;
font-weight: normal;
padding-bottom: 4px;
margin-bottom: 0px;
text-transform: uppercase
}
.page_title h1 {
font-weight: normal
}
.fr {
float: right
}
.fl {
float: left
}
.benmarch {
display: none
}
.hide {
display: none
}
.submit_bt,
.reset_bt {
padding: 5px 14px;
border-radius: 4px;
font-size: 15px;
cursor: pointer
}
.submit_bt {
border: 1px solid var(--main-color);
background: var(--main-color);
color: #FFF
}
.submit_bt:hover {
border: 1px solid #C90008;
background: #C90008
}
.reset_bt {
border: 1px solid #b3b1b1;
background: #f9f9f9;
color: #000
}
.reset_bt:hover {
border: 1px solid #b3b1b1;
background: #cecdcd
}
.redborder {
border-color: #ED1C24 !important
}
.scroll-bar::-webkit-scrollbar-track {
border-radius: 15px;
background-color: #EBEBEB
}
.scroll-bar::-webkit-scrollbar {
width: 5px;
background-color: #EBEBEB;
border-radius: 15px
}
.scroll-bar::-webkit-scrollbar-thumb {
border-radius: 15px;
background: var(--main-color);
border: 1px solid #EBEBEB
}
.right-col {
width: 290px;
float: right;
position: relative
}
.main-area-2col-right {
width: -webkit-calc(100% - 290px);
width: -moz-calc(100% - 290px);
width: calc(100% - 290px);
float: left;
padding-right: 20px;
box-sizing: border-box
}
.container {
width: 1168px;
max-width: 100%;
margin: 0 auto
}
.lazy {
display: none
}
.header_wrapper_wrap {
min-height: 52px
}
.header_wrapper {
background: #EEEEEE;
width: 100%;
z-index: 100;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1)
}
.header-l {
float: left;
width: 48%;
background: var(--main-color)
}
.regions_search {
float: right;
width: calc(100% - 245px);
padding-top: 9px;
padding-right: 0px;
box-sizing: border-box
}
.regions_search .block_regions {
width: 99px;
float: left
}
.regions_search select {
border: none;
height: 35px;
box-sizing: border-box;
background: #EEE;
border-radius: 4px 0 0 4px;
font-size: 13px;
display: inline-block;
font: inherit;
padding: 10px;
width: 89px;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%), linear-gradient(to right, #eee, #eee);
background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
background-repeat: no-repeat
}
.regions_search select:focus {
background-image: -webkit-linear-gradient(bottom left, #333 50%, transparent 50%), -webkit-linear-gradient(top left, transparent 50%, #1f1f1f 50%), -webkit-linear-gradient(left, #eee, #eee);
background-image: -o-linear-gradient(bottom left, #333 50%, transparent 50%), -o-linear-gradient(top left, transparent 50%, #1f1f1f 50%), -o-linear-gradient(left, #eee, #eee);
background-image: linear-gradient(to top right, #333 50%, transparent 50%), linear-gradient(to bottom right, transparent 50%, #1f1f1f 50%), linear-gradient(to right, #eee, #eee);
background-position: calc(100% - 12px) 16px, calc(100% - 17px) 16px, 100% 0;
background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
background-repeat: no-repeat;
border-color: grey;
outline: 0
}
.regions_search_mb {
float: right;
width: 200px;
margin-top: 6px
}
.regions_search_mb select {
border: none;
height: 40px;
box-sizing: border-box;
background: #EEE;
border-radius: 4px;
padding: 0 5px;
float: right;
margin-right: 5px
}
.header .logo {
display: grid;
float: left;
padding: 11px 0px;
padding-left: 10px
}
.header .logo img {
width: 199px;
height: auto;
object-fit: contain
}
.address_header,
.header .hotline {
margin-top: 31px
}
.address_header_head,
.header .hotline {
position: relative;
padding-left: 41px
}
.header .hotline>li:first-child {
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
color: #5D5A5C
}
.address_header label {
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
color: #5D5A5C;
margin-top: 10px
}
.address_header:hover label {
color: #000
}
.address_header_head::before,
.header .hotline::before {
position: absolute;
content: ' ';
width: 33px;
height: 31px;
top: 4px;
left: 0px
}
.support_phone li {
margin-bottom: 10px;
border-bottom: 1px solid #f9f9f9;
padding-bottom: 10px;
position: relative;
padding-left: 39px
}
.support_phone li::before {
position: absolute;
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
content: ' ';
width: 33px;
height: 33px;
top: 1px;
left: 0px;
border: 1px solid #ddd;
border-radius: 50%;
box-sizing: border-box;
background-position: center
}
.support_phone li:last-child {
margin-bottom: 0px;
border-bottom: none;
padding-bottom: 10px
}
.address_header_head::before {
background-position: -133px 1px
}
.header .hotline::before {
background-position: -35px 1px
}
.header .more_info {
color: #999999;
font-size: 12px;
margin-top: 0px;
position: relative;
padding-right: 23px
}
.header .more_info::before {
position: absolute;
content: ' ';
width: 10px;
height: 10px;
top: 3px;
right: 0px;
background-position: -45px -70px;
background-repeat: no-repeat;
z-index: 100;
background-color: #FFF
}
.header .hotline {
margin-right: 30px
}
.sb-toggle-left {
float: right;
padding: 4px 2px 0 9px;
cursor: pointer;
margin-top: 12px;
margin-right: 11px;
cursor: pointer;
display: none
}
.navicon-line {
width: 24px;
height: 4px;
border-radius: 1px;
margin-bottom: 4px;
background-color: #FFF
}
.modal-menu-full-screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: none
}
.text-compare {
margin-top: 4px;
text-align: right
}
.text-compare a {
color: #999999;
display: block;
font-size: 12px
}
.slideshow_countdown {
margin-top: 15px;
display: flex;
flex-wrap: wrap
}
@media only screen and (max-width: 736px) {
.slideshow_countdown {
margin-top: 2px
}
}
.slideshow_countdown .slideshow {
max-width: 68.67%;
float: left;
width: 800px
}
@media only screen and (max-width: 1100px) {
.slideshow_countdown .slideshow {
max-width: 67.67%
}
}
.slideshow_countdown>.countdown {
width: 30.00%;
float: right;
margin-left: 15px
}
@media only screen and (max-width: 800px) {
.slideshow_countdown>.countdown {
display: none
}
}
.slideshow_countdown>.countdown .block {
margin-top: 15px
}
.slideshow_countdown>.countdown .block .banners {
height: 152px
}
.slideshow_countdown>.countdown .block .banners img {
height: 100%
}
.slideshow_countdown>.countdown .block:first-child {
margin-top: 0px
}
.price {
color: #FF3333;
font-weight: 600;
font-size: 16px
}
.old_price {
color: #b5b5b5;
text-decoration: line-through
}
.home_pos {
margin-top: 24px;
overflow: hidden
}
@media only screen and (max-width: 768px) {
.home_pos_0 {
margin-top: 4px !important
}
}
.block_banner_3_colunm {
margin-left: -15px;
margin-right: -15px
}
.block_banner_3_colunm .banner_item {
display: block;
float: left;
width: 33.333%;
box-sizing: border-box;
padding: 0 15px;
overflow: hidden
}
.block_banner_3_colunm .banner_item img {
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s
}
@media only screen and (min-width: 768px) {
.pos_mixed {
margin-top: 15px
}
}
.pos_mixed_left {
float: left;
width: 57.365%
}
.pos_mixed_right {
float: right;
width: 40.24%
}
.pos_mixed .block_title {
background: #FBFBFB;
border: 1px solid #ECECEC;
line-height: 48px;
margin-bottom: 12px
}
.pos_mixed .block_title span {
margin-left: 31px;
text-transform: uppercase;
font-size: 17px;
font-weight: normal;
margin-top: 10px
}
.pos_mixed .block_content {
border: 1px solid #E7E7E7;
padding: 15px
}
.main_wrapper .left-col .block,
.main_wrapper .right-col .block {
margin-bottom: 20px;
border: 1px solid #EBEBEB
}
.right-col .block_title,
.left-col .block_title {
color: #2080CA;
cursor: pointer;
font-size: 16px;
border-bottom: 1px #F5F5F5 solid;
text-transform: uppercase;
padding: 10px 20px;
font-weight: 500
}
footer {
background: #222222;
margin-top: 20px;
color: #FFF;
font-size: 13px
}
footer .container {
padding-top: 17px;
padding-bottom: 17px
}
footer .address_regions a {
color: #CCCCCC
}
footer .menu_footer {
width: 67%;
box-sizing: border-box;
padding: 0 20px 0 0px;
float: left
}
footer .regions #regions_footer {
height: 34px;
background: #f3f3f3;
border: none;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box
}
.region_name {
text-transform: uppercase;
margin-top: 18px;
font-weight: bold
}
.footer_title {
text-transform: uppercase;
margin-bottom: 13px;
font-size: 17px
}
.address_regions ul {
margin-top: 10px;
color: #CCCCCC;
position: relative;
padding-left: 18px
}
.address_regions ul:before {
width: 9px;
height: 20px;
display: inline-block;
margin-right: 10px;
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
top: 2px;
left: 0px;
content: ''
}
.address_regions ul li:nth-child(1) i {
width: 9px;
height: 20px;
display: inline-block;
margin-right: 10px;
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
position: absolute;
top: 4px;
left: 0
}
.address_regions ul li:nth-child(2) {
color: #CCCCCC
}
.address_regions ul li:nth-child(2) a {
color: #CCCCCC
}
.address_regions>span {
margin-right: 10px
}
.share_fast i {
width: 34px;
height: 34px;
display: inline-flex
}
.share_fast a {
display: inline-flex;
margin-right: 16px;
margin-right: 9px;
display: block;
width: 35px;
height: 35px;
background: #3c3c3d;
border-radius: 50%;
padding: 6px;
box-sizing: border-box;
color: #FFF;
text-align: center;
-moz-transition: all 0.2s ease-in 0;
-webkit-transition: all 0.2s ease-in;
-webkit-transition-delay: 0;
transition: all 0.2s ease-in 0;
float: left
}
.share_fast a:hover {
background: #5f5f60
}
.footer_l {
width: 27%
}
.footer_r {
width: 27%
}
.footer_r_w {
float: right;
width: 73%
}
@media only screen and (max-width: 650px) {
.footer_r_w {
width: 100%
}
}
footer .tags {
margin-top: 25px
}
footer .tags,
footer .tags a {
color: #CCC
}
.footer2 {
background: #1b1b1b;
color: #CCC;
padding: 8px 0;
text-align: center;
border-top: 1px solid #7d7d7d
}
#menu-fixed-bar {
width: 52%;
z-index: 99999;
transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
float: right
}
@media only screen and (max-width: 1140px) {
#menu-fixed-bar {
transition: unset
}
}
.slide-down {
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
.slide-up {
-ms-transform: translateY(0);
transform: translateY(0)
}
.m-slide-down {
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
.m-slide-up {
-ms-transform: translateY(0);
transform: translateY(0);
background: #fdfdfd;
z-index: 1000;
box-shadow: 0px 0px 2px 2px #CCC
}
.m-menu-fix#menu-fixed-bar {
position: fixed;
top: 52px
}
#fixed-bar {
position: fixed;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.9);
height: 45px;
border-top: 2px #f2f2f2 solid;
z-index: 999
}
#fixed-bar>div {
float: left;
max-width: 22%;
cursor: pointer;
text-align: center;
text-transform: uppercase;
font-size: 11px;
width: 80px
}
#fixed-bar>div .wrap_icon {
margin-top: 5px;
margin-bottom: 3px
}
#fixed-bar>div .wrap_icon i {
padding: 5px 15px
}
#fixed-bar .buy_now_bt .wrap_icon i {
background-position: 0px -351px
}
#fixed-bar .call .wrap_icon i {
background-position: -34px -351px
}
#fixed-bar #bar-inner .wrap_icon i {
background-position: -64px -351px
}
.certified_bct {
background-position: 0px -92px;
content: ' ';
height: 36px;
display: block;
margin-top: 11px;
padding-top: 12px;
width: 131px
}
.suntory-alo-phone {
background-color: transparent;
cursor: pointer;
height: 120px;
position: fixed;
transition: visibility 0.5s ease 0s;
width: 120px;
z-index: 200000 !important;
display: none;
left: 0px;
bottom: -25px
}
.suntory-alo-ph-circle {
animation: 1.2s ease-in-out 0s normal none infinite running suntory-alo-circle-anim;
background-color: transparent;
border: 2px solid rgba(30, 30, 30, 0.4);
border-radius: 100%;
height: 100px;
left: 0px;
opacity: 0.1;
position: absolute;
top: 0px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 100px
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle {
border-color: #0067BE;
opacity: 1
}
.suntory-alo-ph-circle-fill {
animation: 2.3s ease-in-out 0s normal none infinite running suntory-alo-circle-fill-anim;
border: 2px solid transparent;
border-radius: 100%;
height: 70px;
left: 15px;
position: absolute;
top: 15px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 70px
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-circle-fill {
background-color: rgba(0, 103, 190, 0.9)
}
.suntory-alo-ph-img-circle {
border: 2px solid transparent;
border-radius: 100%;
height: 50px;
left: 25px;
position: absolute;
top: 25px;
transform-origin: 50% 50% 0;
width: 50px
}
.suntory-alo-phone.suntory-alo-green .suntory-alo-ph-img-circle {
background-color: rgba(0, 103, 190, 0.86)
}
.suntory-alo-ph-img-circle svg {
position: absolute;
top: 13px;
left: 13px
}
.description a {
color: var(--main-color)
}
.description a:hover {
color: #057bb1
}
@keyframes suntory-alo-circle-anim {
0% {
opacity: 0.1;
transform: rotate(0deg) scale(0.5) skew(1deg)
}
30% {
opacity: 0.5;
transform: rotate(0deg) scale(0.7) skew(1deg)
}
100% {
opacity: 0.6;
transform: rotate(0deg) scale(1) skew(1deg)
}
}
@keyframes suntory-alo-circle-img-anim {
0% {
transform: rotate(0deg) scale(1) skew(1deg)
}
10% {
transform: rotate(-25deg) scale(1) skew(1deg)
}
20% {
transform: rotate(25deg) scale(1) skew(1deg)
}
30% {
transform: rotate(-25deg) scale(1) skew(1deg)
}
40% {
transform: rotate(25deg) scale(1) skew(1deg)
}
50% {
transform: rotate(0deg) scale(1) skew(1deg)
}
100% {
transform: rotate(0deg) scale(1) skew(1deg)
}
}
@keyframes suntory-alo-circle-fill-anim {
0% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg)
}
50% {
opacity: 0.2;
transform: rotate(0deg) scale(1) skew(1deg)
}
100% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg)
}
}
#cfacebook .fchat {
float: left;
width: 100%;
height: 270px;
overflow: hidden;
display: none;
background-color: #fff
}
#cfacebook .fchat .fb-page {
margin-top: -130px;
float: left
}
#cfacebook a.chat_fb:hover {
color: #ff0;
text-decoration: none
}
#cfacebook {
position: fixed;
bottom: 13%;
left: 0;
z-index: 99999;
height: auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden
}
@media only screen and (max-width: 650px) {
#cfacebook {
left: auto;
bottom: 15%;
right: 10px
}
}
#cfacebook a.chat_fb {
float: left;
padding: 6px 6px 0px 6px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
background-repeat: repeat-x;
background-size: auto;
background-position: 0 0;
background-color: #3a5795;
border: 0;
z-index: 9999999;
font-size: 15px;
box-sizing: border-box;
text-align: center;
font-weight: bold;
border-radius: 50%;
display: block;
position: relative
}
#cfacebook a.chat_fb:after {
display: block;
width: 19px;
height: 19px;
color: #FFF;
content: "2";
position: absolute;
top: 0px;
right: 0px;
background: red;
border-radius: 50%;
font-size: 13px;
line-height: 18px
}
#cfacebook a.chat_fb svg {
width: 45px;
height: 45px
}
@media only screen and (max-width: 650px) {
#cfacebook a.chat_fb {
padding: 4px 4px 0px 4px
}
#cfacebook a.chat_fb svg {
width: 38px;
height: 38px
}
}
#cfacebook a.chat_fb span {
display: none
}
#cfacebook .fchat .fb-page {
margin-top: 0px;
float: left
}
#cfacebook a.chat_fb_openned {
border-radius: 0;
width: 100%
}
#cfacebook a.chat_fb_openned svg {
display: none
}
#cfacebook a.chat_fb_openned i {
display: none
}
#cfacebook a.chat_fb_openned::after {
display: none
}
#cfacebook a.chat_fb_openned span {
display: block
}
.fixed_icons {
position: fixed;
right: 0;
top: 40%;
transform: translate(0, -50px);
z-index: 100
}
.fixed_icons .icon_v1 {
width: 36px;
height: 36px;
display: inline-block;
background-color: var(--main-color);
border-radius: 4px 0 0 4px
}
.address_header .more_info {
position: relative
}
.address_header .more_info::before {
position: absolute;
content: ' ';
width: 10px;
height: 10px;
top: 3px;
right: 0px;
background-position: -45px -70px;
background-repeat: no-repeat;
z-index: 100;
background-color: #FFF
}
.address_header {
display: none
}
.address_fixed_popup {
margin-top: 6px
}
.hotline_fixed_popup,
.address_fixed_popup {
position: relative
}
.hotline_fixed_popup .icon_v1 {
background: var(--main-color)
}
.hotline_fixed_popup .icon_v1:after {
content: '';
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
width: 28px;
height: 28px;
display: block;
margin: 5px
}
.address_fixed_popup .icon_v1 {
background: var(--main-color)
}
.address_fixed_popup .icon_v1:after {
content: '';
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
width: 28px;
height: 28px;
display: block;
margin: 3px 5px 3px 8px
}
.hotline_fixed_popup_content,
.address_header {
position: absolute;
width: 260px;
top: 0;
right: 100%;
padding-right: 10px;
display: none;
margin-top: 0
}
.hotline_fixed_popup:hover .hotline_fixed_popup_content {
display: block
}
.address_fixed_popup:hover .address_header {
display: block
}
.add_full,
.support_phone {
position: relative;
width: 100%;
right: 0;
background: #FFF;
border: 1px solid #F5F5F5;
padding: 10px;
border-radius: 0 0 4px 4px;
border-top: 3px solid var(--main-color);
z-index: 101;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
box-sizing: border-box
}
.add_full ul {
position: relative;
padding-left: 18px;
margin-bottom: 10px
}
.add_full ul::before {
position: absolute;
content: ' ';
width: 14px;
height: 20px;
top: 4px;
left: 0px;
position: absolute;
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
content: ' ';
top: 1px;
left: 0px
}
.add_full ul li:nth-child(2) {
color: #999999;
font-size: 13px;
margin-top: 2px
}
.support_phone ul li .name {
font-weight: bold
}
.support_phone ul li .phone {
color: #afafaf;
font-size: 15px;
margin-top: 6px
}
.support_phone ul li .phone a {
color: #777;
font-size: 13px
}
.address_header:hover .add_full {
display: block !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease
}
.header .hotline:hover .support_phone {
display: block !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease
}
.arrow_box {
position: relative;
background: #FFF;
border: 1px solid #F5F5F5
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #FFF;
border-width: 8px;
margin-top: -8px
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #F5F5F5;
border-width: 9px;
margin-top: -9px
}
@media only screen and (max-width: 1180px) {
.container {
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box
}
}
.logo_img,
.logo_img_small {
display: none
}
@media only screen and (min-width: 1141px) {
.logo_img {
display: block
}
}
@media only screen and (max-width: 1140px) {
.header_wrapper_wrap {
min-height: 50px;
position: relative;
z-index: 99999
}
#menu-fixed-bar {
width: 100%
}
.footer_r {
display: none
}
.footer_l {
width: 100%
}
.logo_img_small {
display: block
}
.header_wrapper .container {
padding: 0;
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
z-index: 1000
}
.header-l {
float: left;
width: 100%
}
.header .logo {
padding: 6px 0px;
margin-bottom: 1px;
padding-left: 10px
}
.header .logo img {
height: 40px;
width: 40px
}
.regions_search {
width: 400px;
padding-top: 8px;
margin: 0 auto;
float: none
}
.address_header,
.header .hotline {
margin-top: 19px
}
.address_header_head::before,
.header .hotline::before {
top: -6px;
left: 0px
}
.header .more_info {
display: none
}
.header .hotline li:first-child {
font-size: 14px
}
.address_header label {
text-transform: none
}
.sb-toggle-left {
display: block
}
.right-col {
display: none
}
.main-area-2col-right {
width: 100%;
padding-right: 0
}
.text-compare {
display: none
}
}
@media only screen and (max-width: 880px) {
.pos_mixed_left {
float: none;
width: 100%
}
.pos_mixed_right {
float: none;
width: 100%;
margin-top: 15px
}
}
@media only screen and (max-width: 780px) {
.slideshow_countdown .slideshow {
width: 100%;
float: left;
max-width: 100%
}
.slideshow_countdown>.countdown {
width: 100%;
clear: both;
margin-top: 10px
}
.regions {
width: 40%
}
footer .menu_footer {
width: 60%
}
}
@media only screen and (max-width: 650px) {
.address_header {
display: none
}
.regions {
width: 100%;
box-sizing: border-box
}
.regions_search {
width: calc(100% - 112px);
float: right
}
footer .menu_footer {
width: 100%;
margin-top: 20px;
padding: 0
}
.suntory-alo-phone {
display: block
}
}
@media only screen and (min-width: 650px) {
#fixed-bar {
display: none !important
}
}
@media only screen and (max-width: 450px) {
.regions_search .block_regions {
width: 80px
}
}
.banner-home-top {
margin-top: 10px
}
.developer {
text-align: right;
margin-top: 30px
}
.developer a {
display: inline-block;
color: #fff
}
@keyframes rotate-2 {
0% {
transform: rotateY(0deg) translate(0px, -50%)
}
50% {
transform: rotateY(180deg) translate(0px, -50%)
}
100% {
transform: rotateY(360deg) translate(0px, -50%)
}
}
.main-area-2col-left {
width: calc(100% - 270px);
float: right;
padding-left: 15px;
box-sizing: border-box;
padding-bottom: 30px
}
@media screen and (max-width: 860px) {
.main-area-2col-left {
width: 100%;
float: none;
padding-left: 0;
margin-left: 0;
border-left: none;
padding-right: 0;
padding-bottom: 5px
}
}
.left-col {
width: 270px;
float: left;
box-sizing: border-box
}
.left-col .block {
background: #FFF;
border: none;
box-sizing: border-box;
margin-bottom: 20px;
margin-bottom: 20px
}
.left-col .block .block_title {
color: var(--main-color);
font-weight: normal;
border-bottom: 1px solid #e3dfdfa8;
padding: 15px 15px;
text-transform: uppercase;
font-weight: 600;
background: #F4F4F4;
font-size: 18px;
margin-bottom: 0px;
position: relative
}
.left-col .block .block_title:after {
content: '';
width: 76px;
height: 3px;
background: var(--extra-color);
position: absolute;
bottom: -1px;
left: 0px;
left: 15px;
width: 68px;
height: 2px
}
.left-col .block ul>li a {
color: #333;
display: block;
font-size: 14px;
margin-bottom: 1px;
padding: 4px;
text-decoration: none;
font-weight: 500;
padding-left: 30px;
position: relative;
text-transform: uppercase
}
.description a {
color: -webkit-link
}
@media all and (max-width: 768px) {
.description .scroll_table {
overflow-x: auto;
overflow-y: hidden
}
}
.description img {
height: auto !important
}
@media all and (max-width: 768px) {
.description iframe {
width: 100% !important
}
}
.description table {
min-width: 70%;
max-width: 100%
}
@media all and (max-width: 768px) {
.description table {
width: 730px !important
}
}
.description table p {
margin-bottom: 0px
}
.description table tr {
border: 1px solid #dadada
}
.description table tr:hover {
background-color: #ddd
}
.description table tr:nth-child(even) {
background-color: #e8e8e8
}
.description table td {
padding: 5px 0px;
padding-left: 10px
}
.summary_cod {
margin-top: 15px;
border-top: 1px solid #eee;
padding-top: 15px
}
.description a,
.cat_summary a,
.summary a {
color: #0087c1
}
.description ul,
.cat_summary ul,
.summary ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 20px;
margin: 0px 0px
}
.description p,
.cat_summary p,
.summary p {
margin: 0.4em 0 0.4em 0px
}
.description ul li,
.cat_summary ul li,
.summary ul li {
list-style-type: disc;
line-height: 28px;
font-size: 14px;
margin: 0.5em 0 0.5em 20px
}
.description blockquote,
.cat_summary blockquote,
.summary blockquote {
font-style: italic;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
font-style: italic;
font-size: 14px;
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px
}
/*# sourceMappingURL=template.css.map */
.repair_detail_bt .numbers-row {
overflow: hidden;
width: 110px;
height: 42px;
border: 1px solid #CCCCCC;
border-radius: 3px;
float: left;
box-sizing: border-box
}
.address_product {
margin: 10px 0px
}
.repair_detail_bt1 {
display: flex
}
.info-bootom {
text-align: left
}
.repair .detail_button .buy-now,
.repair .detail_button .calendar_fixed {
background: #ED1C24;
background: #ED1C24;
margin-left: 10px;
float: left;
border-radius: 4px;
color: #FFFFFF;
display: inline-block;
padding: 7px 12px;
width: 50%;
text-align: center;
text-transform: uppercase;
line-height: 20px;
font-size: 16px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
margin: 8px 7px 0px 0px;
cursor: pointer;
width: 50%;
-moz-transition: background-color 0.05s linear;
-webkit-transition: background-color 0.05s linear;
transition: background-color 0.05s linear
}
.repair .detail_button .buy-now a,
.repair .detail_button .calendar_fixed a {
color: #fff
}
.repair .detail_button {
text-align: center
}
.repair .detail_button .large {
font-size: 18px;
text-transform: initial;
font-weight: bold
}
.repair .detail_button .small {
font-size: 12px;
text-transform: initial;
color: #ffffffe0
}
.repair .detail_button .calendar_fixed {
background: var(--main-color);
margin-right: 0px
}
.repair .detail_button .calendar_fixed:hover {
background: #056bd8
}
.repair .detail_button .buy-now:hover {
background: var(--main-color)
}
.buy-now .btn-buy svg {
float: left;
width: 20px;
height: 20px;
margin-top: 9px;
fill: #fff;
margin-right: 2px
}
th,
td {
margin: 0px
}
tr:nth-child(odd) {
background-color: #fbfbfb
}
tr:hover {
background-color: #f3f3f3
}
tr:first-child {
background: #f1f1f1
}
tr:first-child td,
tr:first-child th {
color: #000;
width: 20%;
padding: 10px 0px
}
tr:first-child td p,
tr:first-child th p {
margin-top: 0px;
text-align: left
}
td,
th {
border: 1px solid #ddd;
padding: 5px;
text-align: center
}
td p,
th p {
margin-top: 0px !important
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white
}
.price_mobile {
color: #e83d16;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px
}
@media screen and (max-width: 414px) {
.price_mobile {
font-size: 15px;
margin-bottom: 11px
}
}
.access_table_mb .accessories_incentives label {
font-size: 18px;
font-weight: bold
}
.access_table_mb .clearfix {
display: flex;
flex-wrap: wrap
}
.access_table_mb .clearfix .item {
width: calc(50% - 10px);
padding: 5px 0px
}
#repair_page .section_bottom .repair_list {
margin-bottom: 15px
}
#repair_page .section_bottom .repair_list .block_title {
margin-bottom: 0px;
border-bottom: 0px;
padding: 10px 5px;
background: #fafafa;
font-size: 16px;
text-transform: uppercase
}
#repair_page .section_bottom .repair_list .block_title:after {
content: '';
width: 76px;
height: 3px;
background: var(--extra-color);
position: absolute;
bottom: -1px;
left: 0px
}
p span {
font-size: 15px !important;
line-height: 27px
}
.repair_tags {
margin-top: 15px;
line-height: 25px
}
.center-2col-left {
width: 100%;
float: unset
}
.repair_base {
color: #20282b
}
.right-col .block .block_title {
margin-bottom: 0px
}
@media all and (max-width: 768px) {
#box_warranty {
margin-top: 10px
}
}
._warrity_product .title {
background: var(--main-color);
text-align: center;
padding: 12px 0px;
color: #fff;
font-weight: bold;
font-size: 16px
}
._warrity_product .main_warranty {
background-color: #e7e7e736;
margin-bottom: 5px;
padding: 0px 10px 20px
}
._warrity_product .title_main {
font-size: 15px;
font-weight: bold;
text-align: center;
padding: 10px 0px;
display: block
}
._warrity_product .main_summary {
background-color: #fff;
padding: 8px 5px;
text-align: center;
font-size: 13px;
margin-bottom: 15px;
border: 1px solid #eee;
line-height: 25px
}
._warrity_product .image_warranty {
display: flex;
flex-wrap: wrap
}
._warrity_product .image_warranty img {
width: 40px;
height: 40px;
border-radius: 50px
}
._warrity_product .image_warranty span {
width: 20%;
max-height: 40px
}
._warrity_product .image_warranty span svg {
width: 35px;
height: 35px;
fill: #909090
}
._warrity_product .image_warranty span .icon_svg {
position: relative;
padding: 4px;
border: 1px solid #5555;
box-sizing: border-box;
display: block;
width: 41px;
height: 41px;
max-height: unset;
display: flex;
border-radius: 50px;
align-items: center
}
._warrity_product .image_warranty .no_warranty {
position: relative
}
._warrity_product .image_warranty .no_warranty:before {
position: absolute;
content: '';
background-color: #87202070;
left: 20px;
width: 2px;
height: 100%;
transform: rotateZ(-45deg)
}
._warrity_product .content {
font-size: 13px;
text-align: center;
margin: 15px 0px
}
._warrity_product .info_warranty {
text-align: center;
font-weight: bold;
color: var(--main-color);
font-size: 15px
}
._warrity_product .detail {
text-align: center;
margin-top: 7px
}
._warrity_product .detail a {
display: block;
background: var(--main-color);
padding: 6px 0px;
border-radius: 5px;
color: #fffc
}
._warrity_product .detail a:hover {
background-color: #cc0012
}
.promotion {
border: 1px solid #efefef;
border-radius: 5px;
padding: 21px 15px 19px;
position: relative;
margin: 25px 0px;
margin-bottom: 20px;
background: #fbfbfb
}
.promotion p {
font-weight: 500;
position: relative;
font-size: 14px;
line-height: 25px
}
.promotion legend {
text-transform: uppercase;
font-weight: 600;
position: absolute;
top: -13px;
font-size: 13px;
left: 14px;
padding-left: 32px;
background: red;
color: #FFF;
font-weight: bold;
border-radius: 3px;
font-weight: normal;
padding: 4px 8px
}
.price {
color: #e83d16;
font-size: 18px;
font-weight: bold
}
@media screen and (max-width: 414px) {
.price {
font-size: 16px
}
}
.status {
color: #00a810;
padding-left: 20px
}
.repair_name ul li {
margin-left: 11px;
line-height: 31px;
position: relative
}
.repair_name ul li:before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
background: #989898;
top: 15px;
left: -10px
}
.accessories {
position: relative;
padding-top: 10px
}
.accessories hr {
width: 76%;
position: absolute;
top: 18px;
right: 0px;
border-width: 0.5px
}
.accessories span {
font-weight: bold;
font-size: 16px
}
.accessories i {
color: #00a810;
padding-right: 10px;
font-size: 20px
}
.accessories .text {
padding-top: 10px
}
.mesage a {
color: white
}
.contact {
margin-top: 15px
}
.contact>a {
color: white;
width: calc(50% - 5px);
box-sizing: border-box;
border-radius: 5px;
padding: 10px 0px 7px 44px
}
@media screen and (max-width: 870px) {
.contact>a {
width: calc(50% - 5px)
}
}
.contact .phone {
background: #e83d16;
float: left
}
.contact .phone:hover {
background: var(--main-color)
}
.contact i {
position: absolute;
font-size: 24px;
left: 16px;
top: 8px
}
.contact .mesage {
background: #4267b2;
float: right
}
.contact .mesage:hover {
background: var(--main-color)
}
.contact .mesage i {
left: 12px;
top: 5px
}
.contact .position {
position: relative;
cursor: pointer
}
.contact span {
font-size: 16px;
font-weight: 600
}
.contact p {
margin-top: 2px;
color: #ffffffe0;
font-size: 12px
}
.info-detail i {
width: 31px;
height: 31px;
text-align: center;
color: white;
background: #20282b;
border-radius: 50%;
padding-top: 7px;
box-sizing: border-box;
font-size: 17px
}
.info-detail {
color: #333333;
padding-bottom: 10px
}
.info-detail ul li {
padding-bottom: 10px
}
.info-detail ul li:last-child {
padding-bottom: 0px
}
.info-detail p {
display: inline-block
}
.repair_tags a {
color: var(--main-color);
font-size: 17px
}
.repair_tags font {
font-size: 18px
}
.video_wrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0
}
.video_wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.main_wrapper_normal .center-1col {
padding: 0
}
.repair {
position: relative
}
.frame_left {
float: left;
margin: 0 0 30px;
width: 35%;
box-sizing: border-box;
padding-right: 20px
}
.frame_head_right {
float: left;
width: 62.2%;
box-sizing: border-box;
padding: 17px 20px 16px
}
.repair .frame_left_inner {
float: left;
box-sizing: border-box;
padding: 10px
}
.repair .frame_center {
float: left;
margin: 0px 0 30px;
width: 42.6%
}
@media only screen and (max-width: 600px) {
.repair .frame_center {
margin-bottom: 10px
}
}
.hotline_detail {
margin-top: 17px;
position: relative;
padding-left: 33px;
font-size: 14px;
text-align: left
}
.hotline_detail label {
display: block;
margin-bottom: 7px;
font-size: 16px;
position: relative;
margin-top: 7px;
font-weight: bold;
padding-right: 17px
}
.hotline_detail::before {
position: absolute;
content: "\f098";
font-family: FontAwesome;
left: 0;
font-size: 21px;
top: -1px;
color: #fd0000;
background: #ffffff;
border-radius: 50%;
width: 26px;
height: 26px;
text-align: center;
box-sizing: border-box;
line-height: 26px
}
.frame_right {
float: right;
width: 20.72%
}
@media only screen and (max-width: 870px) {
.frame_right {
float: none;
width: 100%;
clear: both
}
}
@media only screen and (max-width: 870px) {
.frame_right #sticky_right {
max-width: none
}
}
.repair .name_mb {
display: none
}
.repair h1,
.repair .name_mb {
font-size: 20px;
font-weight: 700;
line-height: 28px;
margin-bottom: 8px;
margin-top: 14px;
font-weight: bold
}
@media only screen and (max-width: 414px) {
.repair h1,
.repair .name_mb {
margin-top: 0px;
font-size: 18px;
text-transform: initial;
line-height: 24px;
margin-bottom: 9px
}
}
.rate_head {
line-height: 14px;
display: inline-block
}
.rate_head i {
font-size: 15px;
font-style: normal;
margin-right: 4px
}
.stock {
margin-top: 5px
}
.stock .manufactory a {
color: var(--main-color)
}
.stock .sepa {
color: #EEE;
padding: 0 10px
}
.repair_base {
padding: 10px 29px 0px 0px
}
.repair_base .summary p {
margin-bottom: 12px;
font-weight: 500;
padding-left: 18px;
position: relative;
margin-top: 3px;
font-size: 14px
}
.repair_base .summary p:before {
position: absolute;
content: "\f00c";
font-family: FontAwesome;
left: 0;
font-size: 11px;
top: 3px;
color: #a5a5a5
}
.repair_base .numbers-row {
display: inline-block;
margin-right: 10px
}
@media only screen and (max-width: 1050px) {
.repair_base .numbers-row {
display: block;
margin-right: 0px
}
}
.repair_base .numbers-row form {
border: 1px solid #DFDFDF;
height: 37px;
line-height: 34px;
border-radius: 3px;
display: inline-block
}
.repair_base .numbers-row form #buy_count {
border: 1px solid #DFDFDF;
border-width: 0 1px;
width: 36px;
text-align: center;
display: inline-block;
height: 37px
}
.repair_base .numbers-row form .button {
width: 29px;
display: inline-block;
text-align: center;
font-size: 19px;
cursor: pointer
}
.repair_base #buy-now,
.repair_base .btn-tragop,
.repair_base #buy-now-2 {
display: inline-block;
width: 45%;
width: calc(100% - 180px);
color: #FFF;
box-sizing: border-box;
text-transform: uppercase;
text-align: center;
background: #FF3945;
box-sizing: border-box;
border-radius: 3px;
color: #FFF !important;
text-decoration: none !important;
position: relative;
float: right
}
@media only screen and (max-width: 1050px) {
.repair_base #buy-now,
.repair_base .btn-tragop,
.repair_base #buy-now-2 {
clear: both;
float: none;
margin-top: 10px;
margin-bottom: 15px;
padding-right: 10px;
width: auto
}
}
.repair_base #buy-now:hover,
.repair_base .btn-tragop:hover,
.repair_base #buy-now-2:hover {
background: #c30808
}
.repair_base #buy-now span,
.repair_base .btn-tragop span,
.repair_base #buy-now-2 span {
display: block;
padding: 9px 0px 9px 10px;
border-left: 1px solid #ffffff94;
margin-left: 40px;
text-align: left
}
.info-bootom .info-detail .type {
color: var(--main-color);
font-weight: bold
}
.buy_fast {
border-radius: 4px;
margin-top: 10px;
text-align: center
}
.buy_fast label {
display: inline-block;
margin-bottom: 13px;
font-size: 16px;
position: relative;
margin-top: 7px;
font-weight: bold;
padding-right: 17px;
color: #222222
}
.buy_fast label:after {
content: "\f101";
font-family: FontAwesome;
font-size: 18px;
top: 2px;
font-weight: normal;
position: absolute;
right: 2px
}
.buy_fast .buy_fast_body {
position: relative;
margin: 16px 0px
}
.buy_fast .button-buy-fast {
width: 136px;
border: none;
color: #ffffff;
border-radius: 0 4px 4px 0;
float: right;
cursor: pointer;
position: absolute;
right: 0;
outline: none;
line-height: 42px;
text-transform: uppercase;
background: var(--main-color);
font-weight: normal
}
@media only screen and (max-width: 980px) {
.buy_fast .button-buy-fast {
text-transform: none;
padding-left: 10px;
padding-right: 10px;
width: auto
}
}
.buy_fast .button-buy-fast:hover {
background: #DF0909;
color: #FFF
}
.buy_fast #checked_pemisstion {
width: calc(100% - 64px);
float: left;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
outline: none;
border: 1px solid #0003;
line-height: 40px
}
.rate_head .rate_count {
margin-left: 5px;
font-size: 14px;
font-weight: normal;
color: #8a8a8a
}
.rate_head span.star {
width: 13px;
display: inline-block;
color: #FF9727
}
@media only screen and (max-width: 414px) {
.rate_head span.star {
width: 12px
}
}
.rate i,
#ratings i {
width: 14px;
height: 14px;
display: inline-flex;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s
}
.rate .star_on,
#ratings .star_on {
background-position: -377px -2px
}
.rate .star_off,
#ratings .star_off {
background-position: -393px -2px
}
#ratings {
display: block;
float: left;
margin-top: 5px
}
#ratings i {
cursor: pointer
}
.rating_area {
margin-bottom: 14px
}
.rating_note {
background: #ED1C24;
color: #FFF;
padding: 4px 10px;
position: relative;
font-size: 13px;
border-radius: 0 4px 4px 0;
display: inline-block;
float: left;
margin-left: 28px
}
.rating_note::after {
content: '';
display: block;
clear: both;
width: 0;
height: 0;
border-style: solid;
border-width: 13px 12px 13px 0;
border-color: transparent #ED1C24 transparent transparent;
position: absolute;
top: 0;
left: -12px
}
.manufactory font {
color: #764D29
}
.rate_count {
margin-left: 5px
}
.is_stock {
margin-left: 17px;
position: relative;
padding-left: 20px;
color: #764D29;
font-size: 14px
}
.stock_on:before {
font-family: FontAwesome;
content: "\f046";
font-size: 16px;
position: absolute;
content: "\f058";
left: 0px;
top: 1px
}
.is_stock i {
display: block;
width: 16px;
height: 17px;
color: #b6af96;
content: " ";
position: absolute;
top: 1px;
left: 0;
background-position: -410px -2px
}
.frame_dt {
border: #e9e9e98a 1px solid;
padding: 10px;
position: relative;
border-radius: 3px;
margin-bottom: 15px;
font-size: 13px
}
.promotion label {
position: relative;
background: #FFF;
padding: 0 10px 5px;
padding-left: 25px;
background-size: 240px;
color: #FF0000;
font-weight: normal;
text-transform: uppercase;
border-bottom: 1px solid #e4e4e4;
display: block;
margin-bottom: 10px;
font-weight: bold
}
.promotion label:before {
position: absolute;
content: "\f06b";
font-family: FontAwesome;
left: 0;
font-size: 20px;
top: 0px;
color: #EB3135;
font-weight: normal
}
._color {
display: block;
margin-bottom: 10px
}
._color label {
position: relative;
float: left;
margin-top: 5px;
margin-right: 10px
}
._color .Selector {
display: inline-block !important
}
._color .Selector .color_item {
display: inline-block !important;
border: 1px solid #d2d2d2;
height: 25px;
width: 39px;
margin-right: 4px;
visibility: visible !important;
cursor: pointer;
border-radius: 5px;
background-position: -105px -158px;
background-repeat: no-repeat;
position: relative
}
._color .Selector .color_item font {
position: absolute;
top: -32px;
z-index: 10000;
background: var(--main-color);
color: #FFF;
padding: 3px 10px;
left: -96%;
border-radius: 4px;
min-width: 67px;
display: none;
text-align: center
}
._color .Selector .color_item font::after {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #2080CA;
display: inline-block;
width: 0;
height: 0;
position: absolute;
left: 39%;
top: 23px;
vertical-align: top;
content: ''
}
._color .Selector.active .color_item,
._color .Selector:hover .color_item {
border: 1px solid red
}
._color .Selector.active .color_item::after,
._color .Selector:hover .color_item::after {
position: absolute;
content: "\f00c";
font-family: FontAwesome;
left: 14px;
font-size: 12px;
top: 3px;
color: #00ADEF;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #7b7b7b
}
._color .Selector:hover .color_item font {
display: block
}
._attributes select {
padding: 7px 10px;
border-radius: 3px;
color: #7a7a7a;
font-size: 10pt;
background-position: calc(100% - 10px) calc(12px + 0px), calc(100% - 6px) calc(12px + 0px), calc(100% - 0.5em) 0.5em;
width: 50%;
margin: 0px 0px 0px;
float: left;
box-sizing: border-box;
border: #e9e9e9 1px solid
}
._attributes select:focus {
background-position: calc(100% - 9px) 0.8em, calc(100% - 14px) 0.8em, 100% 0
}
._attributes .wapper_price {
margin-top: 20px
}
.price_warranty {
font-size: 16px;
margin-top: 10px
}
.price_warranty #text_warranty {
font-size: 16px
}
.price_warranty #price_warranty {
color: #ff0000;
font-weight: 700;
font-size: 18px
}
.warranty_aq {
position: relative;
float: left;
display: none
}
.title_compare {
font-weight: 700;
font-size: 16px;
line-height: 1.4em
}
.advantage_content .accessories_incentives .item {
margin-bottom: 10px
}
.advantage_content .accessories_incentives .item a {
color: var(--main-color)
}
.advantage_content .accessories_incentives {
border: 0px;
margin-bottom: 0px
}
.warranty_aq font {
display: block;
width: 30px;
height: 33px;
position: absolute;
top: -8px;
left: 0;
background-repeat: no-repeat
}
.warranty_aq i {
display: block;
width: 30px;
height: 28px;
content: " ";
background-position: -385px -128px;
background-repeat: no-repeat;
margin-top: 9px
}
.warranty_popup {
display: none;
position: absolute;
top: -37px;
background: #764D29;
color: #FFF;
width: 240px;
left: -120px;
padding: 5px 10px;
text-align: center;
border-radius: 5px
}
.warranty_aq:hover .warranty_popup {
display: block
}
.repair_button2 {
margin-top: 20px;
clear: both;
display: block;
border-top: 1px solid #EEE;
padding-bottom: 20px;
padding-top: 20px
}
.repair_button2 figure {
float: left;
width: 150px
}
.repair_button2_info {
float: left;
width: 25%
}
.repair_button2_info h3 {
font-size: 16px;
padding-right: 25px;
line-height: 24px
}
.button2_wrap {
float: left;
width: calc(100% - 25% - 200px)
}
.button2_wrap #buy-now-2,
.button2_wrap .btn-tragop {
margin-top: 10px;
padding: 15px 0
}
.button2_wrap #buy-now-2 span,
.button2_wrap .btn-tragop span {
margin-bottom: 10px;
font-weight: bold
}
.button2_wrap #buy-now-2 font,
.button2_wrap .btn-tragop font {
font-size: 14px;
text-transform: none;
margin-top: 5px
}
.button2_wrap .btn-tragop span::before {
display: none
}
.repair_button2_info .price_current {
color: #ED1C24;
font-size: 19px;
font-weight: 600;
margin-top: 17px;
display: inline-flex
}
.warranty_popup::after {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #2080CA;
display: inline-block;
width: 0;
height: 0;
position: absolute;
left: 126px;
top: 31px;
vertical-align: top;
content: ''
}
.warranty_popup a {
color: #FFF
}
.advantage .address_info {
text-align: left
}
.advantage,
.accessories_incentives,
.repairs-list-related-vertical {
border: #e9e9e98a 1px dashed;
padding: 10px;
margin-bottom: 15px
}
.advantage label::after,
.accessories_incentives label::after,
.promotion_info .type::after {
display: inline-block;
left: 31%;
top: 27px;
vertical-align: top;
content: '';
border-bottom: 1px solid #B4BCC4;
width: 38%;
position: absolute
}
.advantage label,
.accessories_incentives label,
.repairs_orders label,
.repairs-list-related-vertical label,
.promotion_info .type {
text-align: center;
display: block;
position: relative;
margin-bottom: 25px;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
color: #333333
}
@media only screen and (max-width: 414px) {
.advantage label,
.accessories_incentives label,
.repairs_orders label,
.repairs-list-related-vertical label,
.promotion_info .type {
text-align: left
}
.advantage label::after,
.accessories_incentives label::after,
.repairs_orders label::after,
.repairs-list-related-vertical label::after,
.promotion_info .type::after {
left: 12%;
top: 23px;
width: 20%
}
}
.repairs-list-related-vertical span {
font-size: 23px
}
#repairs_orders {
line-height: 27px;
padding: 6px 0;
font-size: 14px;
max-height: 234px
}
.mz-loading.shown {
opacity: 0 !important
}
.repairs_orders label span {
color: #764D29
}
.repairs_orders label:before {
display: inline-block;
left: 0;
vertical-align: top;
content: '';
width: 0%;
position: absolute;
background: var(--main-color);
height: 3px;
bottom: -1px;
-moz-transition: all 0.5s ease-in 0;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in 0;
animation: 6s ease-in-out 0s normal none infinite running change-color-animate
}
@keyframes change-color-animate {
0% {
transform: rotateY(0deg) scale(1) skew(1deg)
}
15% {
width: 100%;
right: 0
}
30% {
width: 0%
}
100% {
transform: rotateY(0deg) scale(1) skew(1deg)
}
}
.advantage_content p {
position: relative;
margin-bottom: 13px;
font-size: 13px
}
.advantage_content p b,
.advantage_content p strong,
.promotion b,
.promotion strong {
font-weight: 500
}
.advantage_content .ship::before {
background-position: -335px -105px
}
.advantage_content .warranty_exchange::before {
background-position: -367px -105px
}
.advantage_content .warranty_time::before {
background-position: -394px -106px
}
.advantage_content .warranty_ensure::before {
background-position: -335px -130px
}
.advantage_content .warranty_commitment::before {
background-position: -363px -130px
}
.accessories_incentives .item {
margin-bottom: 20px
}
.accessories_incentives .item img {
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 100px
}
.accessories_incentives .item .name {
font-weight: normal;
margin-bottom: 2px;
max-height: 54px;
overflow: hidden
}
.accessories_incentives .item .price {
font-weight: normal;
font-size: 14px
}
.buy_area #buy-now {
float: left;
background: #EB3135
}
.btn-tragop {
background: var(--main-color);
float: right
}
#prodetails_tab1 {
border: 2px solid #eee;
border-width: 0px 1px 1px;
margin-bottom: 30px;
padding: 5px;
padding-top: 15px
}
@media only screen and (max-width: 870px) {
#prodetails_tab1 {
margin-bottom: 0px
}
}
.buy_area #buy-now span,
.btn-tragop span {
position: relative;
padding-left: 27px
}
.btn-tragop span {
padding-left: 18px
}
.buy_area #buy-now span::before {
position: absolute;
content: "\f218";
font-family: FontAwesome;
left: 0;
font-size: 20px;
top: 0px;
color: #ffffff;
font-weight: normal
}
.btn-tragop span::before {
position: absolute;
content: "\f155";
font-family: FontAwesome;
left: 0;
font-size: 20px;
top: 0px;
color: #ffffff;
font-weight: normal
}
.promotion_info {
margin-top: 20px
}
.btn-tragop:hover {
background: #0498dc
}
#buy-now font,
#buy-now-2 font,
.btn-tragop font {
display: block;
text-transform: uppercase;
margin-bottom: 1px;
font-size: 16px
}
#buy-now span,
#buy-now-2 span,
.btn-tragop span {
font-size: 15px;
font-weight: normal
}
#buy_fast_form {
text-align: left
}
.repair .repair_base .price {
line-height: 20px;
padding-bottom: 15px
}
.repair .repair_base .price .price_current {
overflow: hidden;
font-size: 21px;
color: #ED1C24;
margin-bottom: 10px;
font-weight: bold
}
.repair_base span.sepa {
color: #CCC;
padding: 0 9px
}
#smartTab {
z-index: 1;
width: 100%;
background: #f7f7f7
}
.repair .repair_tabs_ul {
list-style: none
}
.repair .repair_tabs_ul li {
background: #f7f7f7;
margin-right: 1px;
float: left
}
.repair .repair_tabs_ul a {
display: inline-block;
padding: 10px 18px 11px;
white-space: nowrap;
font-size: 16px;
border-right: 1px solid #fff
}
@media screen and (max-width: 414px) {
.repair .repair_tabs_ul a {
padding: 15px 10px 9px;
text-transform: uppercase;
font-weight: bold
}
}
.repair .repair_tabs_ul li.active a,
.repair .repair_tabs_ul li:hover a {
color: #FFF;
text-decoration: none;
background: var(--main-color)
}
#box_conten_linfo {
/*max-height: 400px;*/
transition: height 75ms;
overflow: hidden
}
@media screen and (max-width: 414px) {
#box_conten_linfo {
margin: 0px
}
}
.cb_more {
text-align: center;
display: block;
margin-top: 20px;
margin-bottom: 28px
}
@media screen and (max-width: 990px) {
.cb_more {
margin-bottom: 15px
}
}
.cb_more>span {
color: #0183BF;
padding: 10px 60px 10px 40px;
border-radius: 5px;
position: relative;
cursor: pointer;
-moz-transition: all 0.2s ease-in 0;
-webkit-transition: all 0.2s ease-in;
-webkit-transition-delay: 0;
transition: all 0.2s ease-in 0;
display: inline-block;
border: 1px solid #e9e9e98a
}
.cb_more>span:after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #FFF;
display: inline-block;
width: 0;
height: 0;
position: absolute;
right: 27px;
top: 12px;
vertical-align: top;
content: ''
}
.cb_more>span:before {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0183BF;
display: inline-block;
width: 0;
height: 0;
position: absolute;
right: 27px;
top: 15px;
vertical-align: top;
content: '';
border-radius: 3px
}
.cb_more>span:hover {
background: #f3f3f3
}
.cb_more>span:hover:after {
border-top: 10px solid #056c9c
}
.cb_more>span font {
position: relative;
padding-right: 25px
}
.cb_more>span font::after {
font-family: FontAwesome;
font-size: 23px;
top: -2px;
font-weight: normal;
position: absolute;
right: 0
}
.cb_more>span .closed_content::after {
content: "\f103"
}
.cb_more>span .opened_content::after {
content: "\f102"
}
.cb_more>.closed .opened_content,
.cb_more>.opened .closed_content {
display: none
}
.hit_share {
margin-top: 20px;
text-align: center
}
.repairs-list-related {
margin-bottom: 15px
}
.modal {
display: none
}
.modal-dialog {
width: 100%;
position: fixed;
top: 0;
background: rgba(14, 14, 14, 0.74);
z-index: 100;
left: 0;
bottom: 0
}
.modal-dialog .modal-content {
width: 850px;
max-width: 100%;
margin: 0 auto;
background: #FFF;
box-sizing: border-box;
z-index: 100;
margin-top: 100px;
border-radius: 5px
}
.modal-header {
position: relative;
border: none;
padding-bottom: 1px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #EEE
}
.modal-header button {
position: absolute;
right: 7px;
top: 5px;
border: none;
background: #f34d54;
font-size: 19px;
font-weight: bold;
color: #FFF;
text-align: center;
padding: 0 7px 1px;
border-radius: 50%;
cursor: pointer
}
.modal-title {
padding-bottom: 6px;
font-weight: 500;
font-size: 16px;
color: var(--black-color);
padding: 9px 15px;
text-align: center
}
.modal-body {
padding: 14px 15px 15px
}
.modal-full-screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: -1
}
.group_field {
background: #EEE;
text-align: center
}
.group_field b {
font-weight: 600
}
.compare_table {
line-height: 26px;
height: 100%;
overflow-x: scroll
}
.modal-content .content {
overflow-y: scroll;
height: 80vh
}
.title_charactestic {
font-weight: 500
}
.charactestic_table .title_charactestic {
background: #F7F7F7
}
#readmore_chareactestic {
color: #764D29;
font-weight: bold;
padding-left: 8px;
cursor: pointer
}
#tab_videos ._left {
width: 50%;
float: left;
box-sizing: border-box;
padding-right: 10px
}
#tab_videos ._right {
width: 50%;
float: right;
box-sizing: border-box;
padding-left: 10px
}
#tab_videos ._right iframe,
#tab_videos ._left iframe {
max-width: 100%
}
.description img {
max-width: 100%;
height: auto !important
}
@keyframes border-pulsate {
0% {
border-color: var(--main-color)
}
50% {
border-color: #c30808
}
100% {
border-color: var(--main-color)
}
}
.repairs_orders {
color: #764D29;
font-size: 15px;
line-height: 21px;
margin-top: 15px;
border: #e9e9e9 1px solid;
padding: 10px 10px;
border-radius: 2px;
margin-bottom: 15px;
overflow: hidden
}
.repairs_orders span {
color: red
}
#repairs_orders li {
position: relative;
padding-left: 0px
}
.section_bottom {
margin: 20px 0px
}
.section_bottom .repair_list {
float: right;
width: 20.72%
}
@media only screen and (max-width: 870px) {
.section_bottom .repair_list {
display: none
}
}
.section_bottom .repair_list .block_title {
margin-bottom: 0px;
padding: 10px 5px;
position: relative;
color: #20282a;
font-size: 16px;
font-weight: normal;
background: #fafafa
}
.repair_tabs {
float: left;
box-sizing: border-box;
width: 79.28%;
padding-right: 30px
}
@media only screen and (max-width: 870px) {
.repair_tabs {
width: 100%;
padding: 0px 0
}
}
.title_icon::before {
content: '';
position: absolute;
top: 0px;
right: -19px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 19px;
border-color: transparent transparent transparent var(--main-color)
}
.title_icon i {
position: absolute;
content: ' ';
width: 29px;
height: 26px;
top: 13px;
left: 11px;
z-index: 10;
background-position: -256px 0px
}
.tab_label {
margin-bottom: 12px
}
.tab_label strong {
font-weight: 500
}
.tab_label .statistic {
font-style: italic;
font-weight: bold
}
#characteristic-label .title_icon i {
background-position: -413px -129px
}
#spect_title span:before {
content: "\f185"
}
.tab_content_right_bg {
background: #FFF;
border: 1px solid #e8e8e8;
padding: 10px
}
.col-modal-l {
border-right: 1px solid #EEEEEE;
border-bottom: none;
margin-bottom: 0;
width: 50%;
float: left;
box-sizing: border-box;
padding-right: 15px
}
.col-modal-r {
width: 50%;
float: right;
padding-left: 15px;
box-sizing: border-box
}
#modal_buy_now .media-box {
float: left;
width: 40%;
border-right: 1px solid #EEE;
padding-right: 15px;
box-sizing: border-box
}
#eshopcart_info .name {
margin-top: 8px
}
.price-modal-cart {
color: red;
font-family: RobotoBold;
font-size: 19px;
margin-top: 10px
}
.mt10 {
margin-bottom: 10px
}
#eshopcart_info .input_info {
float: left;
width: 60%;
padding-left: 15px;
box-sizing: border-box
}
#eshopcart_info .input_item {
margin-bottom: 12px
}
#eshopcart_info .address {
margin-top: 5px;
margin-top: 0px;
padding-top: 0px;
border-top: unset
}
.media-body {
float: right;
width: 65%
}
.media-body h2 {
margin-bottom: 6px
}
#modal_buy_now .media-body select {
width: 100%;
margin-bottom: 10px;
height: 28px;
border: 1px solid #EEE
}
#modal_buy_now .media-body .quantity_modal {
border: 1px solid #EEE;
text-align: center;
width: 50px;
padding: 5px 10px
}
#modal_buy_now .price_modal {
font-weight: 700;
color: #e20000;
font-size: 18px;
font-weight: bold;
margin-top: 9px
}
.input_text_wrap {
margin-bottom: 15px
}
#modal_buy_now .input_text {
display: block;
width: 100%;
padding: 5px 10px;
box-sizing: border-box;
border: 1px solid #EEE
}
.btn {
display: inline-block;
padding: 6px 25px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0px
}
.other_info .hot_line {
float: right
}
.other_info a svg {
width: 15px;
height: 15px;
fill: var(--main-color)
}
#modal_buy_now .btn-default {
background: var(--main-color);
color: #FFF;
text-transform: uppercase;
display: block;
cursor: pointer;
text-align: center;
padding: 9px;
border-radius: 5px;
margin-top: 26px;
font-family: Roboto;
font-size: 16px;
border: none;
width: 100%
}
#modal_buy_now .reset-default {
background-color: #A9A9A9;
border: medium none;
border-radius: 0;
color: #fff
}
#modal_buy_now .other_info {
border-top: 1px solid #EEEEEE;
padding-top: 16px;
text-align: center
}
.compare_box {
background: #F5F5F5;
padding: 10px;
margin-bottom: 15px
}
.compare_box label {
font-weight: 500
}
.compare_box input {
padding: 11px 10px;
width: 100%;
box-sizing: border-box;
border: none;
font-size: 13px;
margin-top: 12px;
margin-bottom: 10px
}
.autocomplete-suggestions-compare {
position: absolute;
top: 4px;
right: -5px;
margin: 6px 0 0 6px;
_background: none;
_margin: 1px 0 0 0
}
.autocomplete-suggestions-compare {
border: 1px solid #ececec;
background: #fff;
cursor: default;
overflow: auto;
margin: 0 0px 6px -30px;
width: 100%;
top: 31px;
left: 101px;
margin-left: -97px
}
.autocomplete-suggestions-compare div {
cursor: pointer;
width: 100%;
display: inline-block;
clear: both;
padding: 0;
margin: 0;
margin-bottom: -5px
}
.autocomplete-suggestions-compare .autocomplete-group {
padding: 8px 3%;
width: 100%;
background: #f9f9f9;
box-sizing: border-box
}
.autocomplete-suggestions-compare div a,
.autocomplete-suggestions-compare div a:link,
.autocomplete-suggestions-compare div a:visited {
display: inline-block;
margin: 0;
padding: 6px 3%;
width: 100%;
font-size: 13px;
color: #333;
background: #fff;
clear: both;
border-bottom: 1px solid #eee;
box-sizing: border-box
}
.autocomplete-suggestions-compare div a:hover {
background: #ececec
}
.autocomplete-suggestions-compare div a img {
width: 64px;
float: left;
margin-right: 20px
}
.autocomplete-suggestions-compare div a label {
font-weight: normal;
cursor: pointer;
margin: 0
}
.autocomplete-suggestions-compare div a span {
clear: both;
cursor: pointer;
margin: 0;
padding: 0
}
.autocomplete-suggestions-compare div a span.price {
color: #fd0000;
padding-top: 10px
}
.autocomplete-suggestions-compare div.last {
border: none
}
.autocomplete-suggestions-compare strong {
font-weight: 500;
color: #0083bf
}
.autocomplete-suggestions-compare::-webkit-scrollbar-track {
border-radius: 15px;
background-color: #EBEBEB
}
.autocomplete-suggestions-compare::-webkit-scrollbar {
width: 5px;
background-color: #EBEBEB;
border-radius: 15px
}
.autocomplete-suggestions-compare::-webkit-scrollbar-thumb {
border-radius: 15px;
background: var(--main-color);
border: 1px solid #EBEBEB
}
@media only screen and (max-width: 768px) {
.autocomplete-suggestions-compare {
top: 30px;
left: 10px
}
}
.default_news_inner .item-related {
box-sizing: border-box;
display: block;
clear: both;
margin-bottom: 10px
}
.default_news_inner .item-related>a {
text-align: center;
overflow: hidden;
float: left;
display: block;
width: 30%;
margin-right: 10px
}
.default_news_inner .item-related img {
width: 100%;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s
}
.default_news_inner .item-related:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.5
}
.default_news_inner .item-related .title-item-related {
font-weight: normal
}
#prodetails_tab50 {
overflow: hidden;
margin-bottom: 30px
}
.default_news {
padding: 0px;
border: unset
}
.repair_grid_wrap .repair_grid {
overflow: hidden
}
.repair_grid_wrap .repair_grid .item {
width: calc(25% - 10px);
border: none !important
}
.repair_grid_wrap .repair_grid .item img {
transition: all .3s ease-out
}
.repair_grid_wrap .repair_grid .item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
.fw_wrap {
border-width: 1px 1px 1px 1px
}
.repair_vertical .item figure {
width: 90px;
float: left;
margin-right: 10px
}
.repair_vertical .item .frame_inner {
padding: 0 10px
}
.repair_vertical .item h2 a {
font-weight: normal;
line-height: 17px
}
.repair_vertical .item .price_current {
color: red
}
@media only screen and (max-width: 960px) {
.default_news_inner .item-related {
width: 33.333%
}
.default_news_inner .item-related:nth-child(4) {
clear: left
}
}
@media only screen and (max-width: 870px) {
.repair .frame_left {
width: 50%
}
.repair .frame_center {
width: 50%
}
.button2_wrap #buy-now-2,
.button2_wrap .btn-tragop {
width: 100%
}
}
@media only screen and (max-width: 600px) {
.repair .name_mb {
display: block
}
.frame_head_right {
width: 100%;
padding: 17px 0px 16px
}
.repair .repair_base h1 {
display: none
}
.repair .frame_left {
width: 100%;
margin-right: 0;
padding-right: 0;
border-right: 0;
padding: 20px 0;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 15px
}
.repair .frame_left .frame_left_inner {
float: none;
border: none;
padding: 0px
}
.repair .frame_center {
width: 100%;
margin-left: 0;
border-left: 0;
padding-right: 0
}
.repair .frame_center .repair_base {
padding: 10px 0 10px 0px
}
}
@media only screen and (max-width: 600px) and (max-width: 870px) {
.repair .frame_center .repair_base {
padding: 0px
}
}
@media only screen and (max-width: 600px) {
.repair .frame_right {
float: none;
width: 100%;
clear: both;
padding: 12px 0
}
.autocomplete-suggestions-compare {
margin-left: -10px;
max-width: 100%
}
}
@media only screen and (max-width: 500px) {
.default_news_inner .item-related {
width: 100%;
margin-bottom: 15px
}
.default_news_inner .item-related:nth-child(2n+1) {
clear: left
}
.default_news_inner .item-related:nth-child(4) {
clear: none
}
#tab_videos ._left {
width: 100%;
padding-right: 0px
}
#tab_videos ._right {
width: 100%;
padding-left: 0px;
margin-top: 15px
}
.repair_button2 figure,
.repair_button2_info {
display: none
}
.button2_wrap {
width: 100%
}
}
@media screen and (max-width: 1024px) {
.right-col {
display: none
}
.center-2col-right {
width: 100%
}
}
@media screen and (max-width: 870px) {
.contact>a {
width: 100%;
margin-bottom: 10px
}
}
.solution {
/*max-height: 155px;*/
transition: height 75ms;
overflow: hidden
}
.solution table {
margin-bottom: 0px
}
#readmore_desc2 {
margin: 0px 0px 10px;
border: 1px solid #e5e5e5;
border-top: 0px
}
#readmore_desc2 span {
border: unset;
font-weight: bold
}
#readmore_desc2 span:hover {
background: unset
}
#readmore_desc2 .opened:before {
border-bottom: 8px solid #0183BF;
border-top: unset;
top: 15px
}
#readmore_desc2 .opened:after {
border-bottom: 8px solid #FFF;
border-top: unset;
top: 17px
}
#readmore_desc2 .opened:hover:after {
border-bottom: 10px solid #0183BF
}
.wrapper_news {
margin-bottom: 15px
}
.wrapper_news .title_new_video ul {
display: flex;
flex-wrap: wrap;
border: 2px solid #eee
}
.wrapper_news .title_new_video ul li {
width: 50%;
box-sizing: border-box;
padding: 10px;
font-weight: bold;
color: var(--main-color);
font-size: 16px
}
.wrapper_news .title_new_video ul .one {
border-right: 2px solid #eee
}
.wrapper_news .wrapper_item {
display: flex;
flex-wrap: wrap;
border: 1px solid #efefef;
border-top: unset
}
.wrapper_news .wrapper_item .item_video {
width: 55%;
box-sizing: border-box
}
@media screen and (max-width: 700px) {
.wrapper_news .wrapper_item .item_video {
width: 100%
}
}
.wrapper_news .wrapper_item .item_video iframe {
width: 100%;
padding: 10px 10px 10px 0px;
box-sizing: border-box
}
@media screen and (max-width: 700px) {
.wrapper_news .wrapper_item .item_video iframe {
padding: 10px
}
}
.wrapper_news .wrapper_item .item_new {
box-sizing: border-box;
width: 45%
}
@media screen and (max-width: 700px) {
.wrapper_news .wrapper_item .item_new {
width: 100%
}
}
.wrapper_news .wrapper_item .default_news {
padding: 10px
}
.wrapper_news .wrapper_item .title_one {
color: var(--main-color)
}
.wrapper_news .wrapper_item .title_new {
border-right: unset;
border-left: 0px solid #efefef
}
.wrapper_news .wrapper_item .title_video {
border-right: 0px solid #efefef
}
.relate_title {
text-transform: unset
}
#sticky_right1 {
margin-bottom: 15px
}
.note_save {
font-size: 15px;
margin: 15px 0px 10px;
color: #000;
line-height: 25px
}
.tab-title {
margin-top: 20px;
margin-bottom: 10px;
box-sizing: border-box;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 48px;
border: 1px solid #e7e7e77d;
margin-bottom: 0px
}
.tab-title span {
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
font-weight: bold;
margin-left: 28px
}
.wrapper_item .tab-title {
margin-top: 0px
}
table {
margin: 20px auto
}
table {
font-size: inherit;
border-collapse: collapse
}
.description {
line-height: 24px
}
.advantage_content li {
line-height: 22px
}
.repair .hit_share {
text-align: center;
margin: 15px auto 0px;
height: 20px;
display: flex;
justify-content: center
}
@media screen and (max-width: 830px) {
.repair .hit_share {
width: 200px
}
}
.repair .hit_share .fb_iframe_widget {
display: inline-block;
position: relative;
height: 20px;
width: 80px;
float: left
}
.repair .hit_share .fb-like {
margin-right: 10px;
margin-left: 10px
}
@media screen and (max-width: 600px) {
.repair .hit_share .fb-like {
margin-left: 0px
}
}
.title_icon {
width: 40px;
height: 50px;
float: left;
background: var(--main-color);
margin-left: -1px;
margin-top: -1px;
margin-bottom: -1px;
position: relative
}
@media only screen and (max-width: 500px) {
.title_icon {
height: 42px
}
}
.title_icon:before {
content: '';
position: absolute;
top: 0px;
right: -19px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 19px;
border-color: transparent transparent transparent var(--main-color)
}
@media only screen and (max-width: 500px) {
.title_icon:before {
border-width: 21px 0 21px 16px;
right: -16px
}
}
.title_icon svg {
display: inline-block;
height: 28px;
color: #FFF;
fill: #FFF;
top: 50%;
transform: translate(0px, -50%);
position: absolute;
left: 2px;
-webkit-animation: rotate-2 3.0s ease-in infinite;
animation: rotate-2 3.0s ease-in infinite
}
@media only screen and (max-width: 500px) {
.title_icon svg {
height: 22px
}
}
.title_icon i {
position: absolute;
content: ' ';
width: 29px;
height: 26px;
top: 13px;
left: 11px;
z-index: 10;
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat
}
#prodetails_tab50 .tab-title {
margin-bottom: 10px
}
.block_repairs .tab-title {
margin-top: 0px
}
.address_info .arrow_box {
border: unset
}
/*# sourceMappingURL=repair.css.map */
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s
}
@-webkit-keyframes bounce {
0%,
100%,
20%,
53%,
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%,
43% {
-webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
@keyframes bounce {
0%,
100%,
20%,
53%,
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
40%,
43% {
-webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
-webkit-transform: translate3d(0, -30px, 0);
-ms-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0)
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
-webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0)
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
-ms-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0)
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom
}
@-webkit-keyframes flash {
0%,
100%,
50% {
opacity: 1
}
25%,
75% {
opacity: 0
}
}
@keyframes flash {
0%,
100%,
50% {
opacity: 1
}
25%,
75% {
opacity: 0
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
-ms-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
-ms-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
-ms-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
-ms-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
-ms-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
-ms-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand
}
@-webkit-keyframes shake {
0%,
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
@keyframes shake {
0%,
100% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
-ms-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg)
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg)
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg)
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg)
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg)
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg)
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg)
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg)
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg)
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg)
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
10%,
20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes tada {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
10%,
20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada
}
@-webkit-keyframes wobble {
0% {
-webkit-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100% {
-webkit-transform: none;
transform: none
}
}
@keyframes wobble {
0% {
-webkit-transform: none;
-ms-transform: none;
transform: none
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100% {
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble
}
@-webkit-keyframes bounceIn {
0%,
100%,
20%,
40%,
60%,
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes bounceIn {
0%,
100%,
20%,
40%,
60%,
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-ms-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
-ms-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
-ms-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
-ms-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
-ms-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes bounceInDown {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
100% {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInDown {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
-ms-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
-ms-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0)
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
-ms-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0)
}
100% {
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown
}
@-webkit-keyframes bounceInLeft {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
100% {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInLeft {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
-ms-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
-ms-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0)
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
-ms-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
100% {
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft
}
@-webkit-keyframes bounceInRight {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
100% {
-webkit-transform: none;
transform: none
}
}
@keyframes bounceInRight {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
-ms-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
-ms-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0)
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
-ms-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
-ms-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
100% {
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight
}
@-webkit-keyframes bounceInUp {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
@keyframes bounceInUp {
0%,
100%,
60%,
75%,
90% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
-ms-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
-ms-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
-ms-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0)
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
-ms-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
-ms-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-ms-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
-ms-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
-ms-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
-ms-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
-ms-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
-ms-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
-ms-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0)
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
-ms-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
-ms-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
-ms-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
-ms-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
-ms-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
-ms-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
-ms-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
-ms-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
-ms-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes fadeOutUp {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
-ms-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0)
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
-ms-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
100% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px)
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px)
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
-webkit-animation-duration: .75s;
animation-duration: .75s
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0
}
60% {
-webkit-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1
}
80% {
-webkit-transform: skewX(-5deg);
-ms-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1
}
100% {
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
@-webkit-keyframes lightSpeedOut {
0% {
opacity: 1
}
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0
}
}
@keyframes lightSpeedOut {
0% {
opacity: 1
}
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-ms-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
-ms-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
-ms-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
-ms-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
-ms-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
-ms-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
opacity: 1
}
100% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
-ms-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
-ms-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
-ms-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
-ms-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
-ms-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
-ms-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
-ms-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1
}
100% {
-webkit-transform: translate3d(0, 700px, 0);
-ms-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn
}
@-webkit-keyframes rollOut {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
@keyframes rollOut {
0% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-ms-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
50% {
opacity: 1
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown
}
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft
}
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight
}
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp
}
@-webkit-keyframes zoomOut {
0% {
opacity: 1
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
100% {
opacity: 0
}
}
@keyframes zoomOut {
0% {
opacity: 1
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-ms-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
100% {
opacity: 0
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
-ms-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
-ms-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp
}
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
visibility: visible
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes slideInRight {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
visibility: visible
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%)
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%)
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%)
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
.tab {
overflow: hidden;
border-bottom: 2px solid var(--main-color);
background-color: #f4f4f4;
color: #4d4d4d;
display: flex;
font-size: 16px
}
.tab button {
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 32px;
transition: 0.3s;
font-size: 16px;
position: relative;
width: 33.33%;
background: none;
color: #4d4d4d
}
@media screen and (max-width: 414px) {
.tab button {
padding: 8px 0px 8px
}
.tab button:first-child {
width: 30%
}
.tab button:nth-child(2) {
width: 40%
}
.tab button:nth-child(3) {
width: 30%
}
}
@media screen and (max-width: 375px) {
.tab button {
padding: 3px 0px 0px
}
}
.tab-boder {
border-right: 1px solid #E9E9E9 !important
}
.tab .icon {
font-size: 28px;
position: absolute;
top: 13px;
left: 20px
}
.tab .icon1 {
font-size: 24px;
position: absolute;
top: 14px;
left: 20px
}
span.text {
padding-left: 24px
}
@media screen and (max-width: 700px) {
span.text {
padding-left: 0px
}
}
.tab button:hover {
background: var(--main-color);
color: white
}
.tab button.active {
background: var(--main-color);
color: #fff
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #E9E9E9;
border-top: none;
text-align: justify
}
@media screen and (max-width: 375px) {
.tabcontent {
padding: 0px 0px
}
}
/*# sourceMappingURL=tab.css.map */
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel .owl-refresh .owl-item {
display: none
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-item img {
-webkit-transform-style: preserve-3d
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
-webkit-transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-ms-transition: opacity 400ms ease;
-o-transition: opacity 400ms ease;
transition: opacity 400ms ease
}
.owl-carousel .owl-item img {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
-webkit-transition: scale 100ms ease;
-moz-transition: scale 100ms ease;
-ms-transition: scale 100ms ease;
-o-transition: scale 100ms ease;
transition: scale 100ms ease
}
.owl-carousel .owl-video-play-icon:hover {
-webkit-transition: scale(1.3, 1.3);
-moz-transition: scale(1.3, 1.3);
-ms-transition: scale(1.3, 1.3);
-o-transition: scale(1.3, 1.3);
transition: scale(1.3, 1.3)
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
-webkit-transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-ms-transition: opacity 400ms ease;
-o-transition: opacity 400ms ease;
transition: opacity 400ms ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1
}
/*# sourceMappingURL=owl.carousel.css.map */
/*
Magic Zoom Plus v5.0.3
Copyright 2015 Magic Toolbox
Buy a license: https://www.magictoolbox.com/magiczoomplus/
License agreement: https://www.magictoolbox.com/license/
*/
/**
* Core styles
*/
@font-face {
font-family: "magictoolbox-thin";
font-weight: normal;
font-style: normal;
src: url("fonts/magictoolbox-thin.eot");
src: url("fonts/magictoolbox-thin.eot?#iefix") format("embedded-opentype"),
url("fonts/magictoolbox-thin.woff") format("woff"),
url("fonts/magictoolbox-thin.ttf") format("truetype"),
url("fonts/magictoolbox-thin.svg#magictoolbox-thin") format("svg");
}
.MagicZoom,
.mz-figure,
.mz-lens,
.mz-zoom-window,
.mz-loading,
.mz-hint,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage,
.mz-expand .mz-image-stage>figure .mz-caption,
.mz-thumb img,
.mz-expand-thumbnails,
.mz-expand-controls,
.mz-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.MagicZoom,
.mz-figure {
display: inline-block;
outline: 0 !important;
font-size: 0 !important;
line-height: 100% !important;
direction: ltr !important;
position: relative;
z-index: 1;
overflow: hidden;
margin: 0 auto;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.MagicZoom {
-webkit-transform: translate3d(0, 0, 0);
-ms-touch-action: pan-y;
touch-action: pan-y;
}
figure.mz-figure {
-webkit-perspective: 300px;
perspective: 300px;
margin: 0 !important;
}
figure.mz-figure a {
display: none !important;
}
.MagicZoom img,
.mz-figure img {
border: 0 !important;
margin: 0 !important;
outline: 0 !important;
padding: 0 !important;
}
.MagicZoom>img,
.mz-figure>img {
width: 100%;
height: auto;
}
.ie8-magic .MagicZoom>img,
.ie8-magic .mz-figure>img {
width: 100%;
max-width: none !important;
}
.mz-figure.mz-no-zoom.mz-no-expand,
.mz-expand .mz-figure.mz-no-zoom {
cursor: default !important;
}
.mz-figure.mz-active,
.mz-expand {
-ms-touch-action: none;
touch-action: none;
}
.mz-lens,
.mz-zoom-window {
position: absolute !important;
overflow: hidden !important;
pointer-events: none !important;
}
.mz-lens img,
.mz-zoom-window img {
position: absolute !important;
max-width: none !important;
max-height: none !important;
}
.mz-zoom-window {
z-index: 2000000000;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mz-zoom-window.mz-magnifier {
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-mask-clip: content;
cursor: none;
}
.mz-zoom-window.mz-magnifier.mz-expanded {
z-index: 2147483647;
}
.mz-zoom-window img {
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto !important;
-ms-transform-origin: 50% 50% !important;
-webkit-transform-origin: 50% 50% !important;
transform-origin: 50% 50% !important;
}
.mz-zoom-window.mz-preview img {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
-webkit-transform: none !important;
transform: none !important;
width: 100% !important;
height: auto !important;
}
.lt-ie9-magic .mz-zoom-window img {
margin: 0 !important;
}
.mz-expand-controls {
z-index: 2147483647;
}
.mz-fade {
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.mz-hidden {
opacity: 0;
}
.mz-visible {
opacity: 1;
}
.mobile-magic .mz-expand .mz-expand-bg {
-webkit-transform-style: flat !important;
transform-style: flat !important;
}
.mobile-magic .mz-expand .mz-image-stage>figure .mz-caption {
display: none !important;
}
.mobile-magic .mz-expand-controls.mz-fade {
transition: none !important;
}
.mobile-magic .mz-expand .mz-zoom-window {
top: 0 !important;
left: 0 !important;
}
/**
* Main figure
*/
.mz-figure.mz-active {
background: #fff;
}
.mz-figure.mz-no-zoom,
.mz-figure.mz-click-zoom,
.mz-figure.mz-active {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mz-figure.mz-active.mz-no-expand {
cursor: crosshair;
}
.mz-figure.mz-active.mz-click-zoom.mz-no-expand {
cursor: crosshair;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
.mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand {
cursor: none;
}
.mz-figure.mz-active>img {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(80%) opacity(60%);
filter: grayscale(80%) opacity(60%);
}
.no-cssfilters-magic .mz-figure.mz-active>img {
opacity: 0.6;
}
.lt-ie10-magic .mz-figure.mz-active>img {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=0.6);
}
.mz-figure.mz-active.mz-inner-zoom,
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom>img {
opacity: 0;
}
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom,
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom>.mz-zoom-window {
opacity: 1;
}
.lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom,
.lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom>img {
filter: alpha(opacity=0);
}
.ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom {
background: transparent;
}
/**
* Zoom lens
*/
.mz-lens {
border: 1px solid #aaa;
border-color: rgba(170, 170, 170, 0.7);
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
cursor: none;
z-index: 10;
opacity: 0;
}
.mz-figure.mz-active .mz-lens {
opacity: 1;
-webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
}
.mz-figure.mz-active.mz-magnifier-zoom .mz-lens {
border-radius: 50%;
opacity: 0;
cursor: none;
}
/**
* Zoom window
*/
.mz-zoom-window {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.mz-zoom-window.mz-magnifier {
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, .3);
}
.mz-zoom-window.mz-magnifier:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 100%;
border: 1px solid rgba(170, 170, 170, 0.7);
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
background: transparent;
z-index: 1;
}
.lt-ie9-magic .mz-zoom-window {
border: 1px solid #e5e5e5;
}
.mz-zoom-window.mz-inner {
border: none;
box-shadow: none;
}
/* Caption in zoom window */
.mz-zoom-window .mz-caption {
background: #777;
color: #fff;
font-size: 10pt;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 150;
padding: 3px;
width: 100%;
line-height: normal !important;
text-align: center !important;
}
.lt-ie9-magic .mz-zoom-window .mz-caption {
filter: alpha(opacity=80);
}
.mz-zoom-window.caption-bottom .mz-caption {
top: auto;
bottom: 0;
}
.mz-zoom-window.mz-expanded>.mz-caption {
display: none;
}
/* Zoom window animations */
.mz-zoom-window.mz-deactivating,
.mz-zoom-window.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-deactivating {
-webkit-transition-duration: .25s, .25s, .25s;
transition-duration: .25s, .25s, .25s;
}
.mz-zoom-window.mz-p-right,
.mz-zoom-window.mz-p-left,
.mz-zoom-window.mz-p-top,
.mz-zoom-window.mz-p-bottom {
opacity: 0;
z-index: -100;
}
.mz-zoom-window.mz-p-right {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mz-zoom-window.mz-p-left {
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
.mz-zoom-window.mz-p-top {
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
.mz-zoom-window.mz-p-bottom {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
/* Inner mode animation */
.mz-zoom-window>img {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-zoom-window.mz-p-inner.mz-deactivating>img,
.mz-zoom-window.mz-p-inner.mz-activating>img {
-webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
/* Magnifier mode animation */
.mz-zoom-window.mz-p-magnifier {
-webkit-transform: scale(.1);
transform: scale(.1);
}
/* Preview mode animation */
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-preview.mz-activating,
.mz-zoom-window.mz-custom.mz-deactivating,
.mz-zoom-window.mz-custom.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-custom.mz-deactivating {
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.mz-zoom-window.mz-p-preview,
.mz-zoom-window.mz-p-custom {
opacity: 0;
}
/**
* Hint & Loading
*/
.mz-hint,
.mz-loading {
color: #eee;
background: rgba(49, 51, 61, 0.7);
font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
direction: ltr;
display: inline-block;
margin: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mz-hint {
bottom: 8px;
left: 0;
right: 0;
padding: 0 10%;
background-color: transparent;
-webkit-transition: opacity 0.25s ease, z-index 0.25s ease;
transition: opacity 0.25s ease, z-index 0.25s ease;
}
.mz-hint-message {
display: inline-block;
background: rgba(49, 51, 61, 0.7);
border-radius: 2em;
padding: .7em 1.1em;
}
.mz-hint-message:before {
content: '\02295';
font-family: serif;
font-size: 1.5em;
speak: none;
text-align: center;
vertical-align: -2px;
margin-right: 6px;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mobile-magic .mz-hint-message:before {
display: none;
}
.mz-hint-hidden {
opacity: 0;
z-index: -1;
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
/* Hint in the expanded view on mobile */
.mobile-magic .mz-expand .mz-hint {
font-size: 18px;
line-height: 1.1em;
top: 50%;
bottom: auto;
margin: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.mobile-magic .mz-expand .mz-hint-message {
padding: 1.1em;
}
.mobile-magic .mz-expand .mz-hint-message:before {
display: none;
}
.mobile-magic .mz-expand .mz-hint-hidden {
-webkit-transition-delay: 1s;
transition-delay: 1s;
opacity: 0;
}
/* Loading indicator */
.mz-loading {
font-size: 0;
border-radius: 100%;
opacity: 0;
padding: 0;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mz-loading:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 24px;
height: 24px;
margin: auto;
text-indent: -9999em;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 1);
border-top-color: transparent;
box-sizing: border-box;
}
.mz-loading.shown {
opacity: 1;
z-index: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.mz-loading.shown:after {
-webkit-animation: spin-loading .9s infinite linear;
animation: spin-loading .9s infinite linear;
}
@-webkit-keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lt-ie10-magic .mz-loading {
font-size: 12px;
padding: .7em 1.1em;
width: auto;
height: auto;
}
.lt-ie10-magic .mz-loading:after {
content: 'Loading...';
text-indent: 0;
border: none;
position: relative;
}
.lt-ie9-magic .mz-loading {
filter: alpha(opacity=0);
right: 0;
left: 0;
width: 126px;
margin: auto;
}
.lt-ie9-magic .mz-hint-message,
.lt-ie9-magic .mz-loading.shown {
background: transparent !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#7c31333D', EndColorStr='#7c31333D');
}
.lt-ie9-magic .mz-hint-hidden {
filter: alpha(opacity=0);
}
/**
* Expanded view
*/
.mz-expand,
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg>img,
.mz-expand .mz-expand-bg>svg,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg>img,
.mz-expand .mz-expand-bg>svg {
width: auto !important;
height: auto !important;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg>svg {
min-width: 100% !important;
min-height: 100% !important;
}
.mz-expand {
background-color: rgba(0, 0, 0, 1);
text-align: center;
vertical-align: middle;
display: block;
overflow: hidden;
z-index: 2100000000;
position: fixed;
width: auto;
height: auto;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-overflow-style: none;
}
.mz-expand>div>a {
display: none;
}
/* Expanded view background */
.mz-expand .mz-expand-bg {
display: inline-block;
vertical-align: middle;
margin: auto;
z-index: -100;
max-width: none !important;
max-height: none !important;
-webkit-transform: translate3d(0, 0, 0) scale(10) rotate(0.01deg);
-ms-transform: translate(0, 0) scale(10, 10) rotate(0.01deg);
transform: translate3d(0, 0, 0) scale(10) rotate(0.01deg);
-webkit-perspective: 600px;
perspective: 600px;
background-repeat: no-repeat;
background-size: cover;
}
.mz-expand .mz-expand-bg>img {
margin: auto;
filter: url("data:image/svg+xml;utf8,#blur");
-webkit-filter: blur(20px) brightness(60%);
filter: blur(20px) brightness(60%);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-bg>svg {
margin: auto;
opacity: .6;
}
.lt-ie10-magic .mz-expand .mz-expand-bg {
display: none !important;
}
.lt-ie9-magic .mz-expand {
background: #1f1f1f;
}
/** Plain backgrounds: dark-bg, white-bg **/
.mz-expand.plain-bg .mz-expand-bg,
.mz-expand.dark-bg .mz-expand-bg,
.mz-expand.white-bg .mz-expand-bg {
display: none !important;
}
.mz-expand.dark-bg {
background-color: #1f1f1f;
background-color: rgba(31, 31, 31, .96);
}
.mz-expand.white-bg {
background-color: #fff;
}
/* Expanded view stage */
.mz-expand .mz-expand-stage {
z-index: 2100000000;
padding: 0;
}
.mz-expand .mz-expand-stage .mz-image-stage {
z-index: 50;
left: 120px;
right: 120px;
padding: 20px 0 40px 0;
margin: 0;
text-align: center;
vertical-align: middle;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding-bottom: 120px;
}
.mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding: 0 !important;
left: 0;
right: 0;
}
.mz-expand .mz-image-stage>figure:before,
.mz-expand .mz-image-stage:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
font-size: 0;
line-height: 100%;
width: 0;
}
.mz-expand .mz-image-stage>figure {
width: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 100%;
position: relative;
}
.mz-expand .mz-figure {
overflow: visible;
max-width: 100% !important;
}
.mz-expand .mz-figure>img {
max-width: 100%;
width: auto;
height: auto;
}
.mz-expand .mz-zoom-in .mz-image-stage>figure,
.mz-expand .mz-zoom-in .mz-image-stage>figure .mz-figure.mz-activating,
.mz-expand .mz-zoom-in .mz-image-stage>figure .mz-figure.mz-active {
width: 100%;
height: 100%;
}
.mz-expand .mz-figure {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mz-expand .mz-figure.mz-active {
cursor: crosshair;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
/* When inner zoom is always shown */
.mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage>figure>figure>img {
z-index: 1;
position: absolute !important;
top: -5000px !important;
bottom: -5000px !important;
left: -5000px !important;
right: -5000px !important;
margin: auto !important;
}
.lt-ie10-magic .mz-zoom-window.mz-expanded img {
filter: alpha(opacity=100);
}
.lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom {
overflow: hidden;
filter: alpha(opacity=100);
}
/* Caption in expanded view */
.mz-expand .mz-caption {
color: #fff;
text-shadow: 0px 0px 46px #000;
padding: 10px 4px;
font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-align: center;
width: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.mz-expand .mz-caption.mz-show {
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
opacity: 1;
}
.mz-expand .mz-caption a {
color: inherit;
cursor: pointer;
}
.mz-expand.white-bg .mz-caption {
color: #555;
text-shadow: none;
}
.lt-ie9-magic .mz-expand .mz-caption {
top: 100%;
}
.mz-expand .mz-zoom-window {
box-shadow: none;
background: transparent;
}
.lt-ie9-magic .mz-expand .mz-zoom-window {
border: 0;
}
/* Expanded view on mobile */
.mobile-magic .mz-expand-stage .mz-expand-thumbnails,
.mobile-magic .mz-expand-stage .mz-image-stage {
left: 0px;
right: 0px;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs {
bottom: 0px;
}
.mobile-magic .mz-expand-stage .mz-image-stage {
padding: 0;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding: 5px 0 60px;
}
.mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding-top: 0;
}
.mobile-magic .mz-expand .mz-expand-thumbnails {
padding: 0;
height: 60px;
}
/**
* Buttons & Arrows
*/
.mz-expand-controls,
button.mz-button {
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
}
button.mz-button {
color: #b4b4b4 !important;
font: 900 34px/1 'magictoolbox-thin' !important;
cursor: pointer;
z-index: 90 !important;
background-color: transparent !important;
border: 1px solid rgba(180, 180, 180, 0) !important;
border-radius: 100% !important;
box-shadow: none !important;
position: absolute !important;
text-transform: none !important;
text-align: center;
speak: none;
-webkit-font-smoothing: antialiased;
width: 60px !important;
height: 60px !important;
}
button.mz-button.mz-button-prev,
button.mz-button.mz-button-next {
margin: auto 10px !important;
top: 0 !important;
bottom: 0 !important;
overflow: hidden !important;
}
button.mz-button.mz-button-prev {
left: 0 !important;
}
button.mz-button.mz-button-next {
right: 0 !important;
}
button.mz-button.mz-button-close {
font-size: 30px !important;
margin: 10px !important;
top: 0 !important;
right: 0 !important;
z-index: 95 !important;
}
:root:not(.mobile-magic) button.mz-button {
color: rgba(180, 180, 180, .75) !important;
-webkit-transform: scale(.85) !important;
transform: scale(.85) !important;
-webkit-transition: color .25s, border-color .25s, -webkit-transform .25s !important;
transition: color .25s, border-color .25s, transform .25s !important;
}
:root:not(.mobile-magic) button.mz-button:hover {
color: rgba(180, 180, 180, 1) !important;
border-color: rgba(180, 180, 180, .6) !important;
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
.mobile-magic button.mz-button {
-webkit-transition: -webkit-transform .1s !important;
transition: transform .1s !important;
}
.mobile-magic button.mz-button:active {
border-color: rgba(180, 180, 180, .6) !important;
-webkit-transform: scale(.95) !important;
transform: scale(.95) !important;
}
button.mz-button.mz-button-close:before {
content: "\a001";
}
button.mz-button.mz-button-prev:before {
content: "\a002";
}
button.mz-button.mz-button-next:before {
content: "\a003";
}
@media screen and (max-device-width: 767px) {
button.mz-button-prev,
button.mz-button-next {
display: none !important;
}
.mobile-magic .mz-expand button.mz-button {
background: rgba(255, 255, 255, .12) !important;
border-color: rgba(180, 180, 180, .3) !important;
}
}
.lt-ie9-magic button.mz-button {
border: 0;
filter: alpha(opacity=75);
}
.lt-ie9-magic button.mz-button:hover {
filter: alpha(opacity=100);
}
/**
* Thumbnails
*/
/* Thumbnails on the page */
.mz-thumb,
.mz-thumb:focus {
display: inline-block;
line-height: 0;
outline: none;
}
.mz-thumb img {
border: 0;
box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
}
.mz-thumb:hover:not(.mz-thumb-selected) img {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
.mz-thumb-selected img {
/* -webkit-filter: brightness(50%);
filter: brightness(50%);*/
}
.no-cssfilters-magic .mz-thumb {
background: #000;
}
.no-cssfilters-magic .mz-thumb:hover:not(.mz-thumb-selected) img {
opacity: .7;
filter: alpha(opacity=70);
}
.no-cssfilters-magic .mz-thumb-selected img {
opacity: .5;
filter: alpha(opacity=50);
}
.ie9-magic .mz-thumb img {
box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
}
/* Thumbnails in expanded view */
.mz-expand-thumbnails {
z-index: 50;
position: absolute;
/*bottom: 0;*/
left: 65px;
/*right: 65px;*/
/*height: 80px;*/
padding: 10px 0;
width: 100px;
box-sizing: border-box;
}
.mz-expand-thumbnails .magic-thumbs .magic-thumb {
padding: 10px 2px;
}
.mz-expand-thumbnails .magic-thumb>img {
cursor: pointer;
height: 92px;
/*box-shadow:0 0 5px 1px rgba(0,0,0,0.3);*/
border: 4px solid #fff;
}
.mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected)>img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
.mz-expand-thumbnails .magic-thumb-selected img {
/* -webkit-filter: brightness(50%);
filter: brightness(50%);*/
border: 4px solid #5E5E5E;
}
.mz-expand-thumbnails .magic-thumbs .magic-thumbs-button {
box-shadow: none;
}
.mz-expand-thumbnails .magic-thumbs .magic-thumbs-button-disabled {
opacity: 0;
}
.no-cssfilters-magic .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected) img {
opacity: .7;
filter: alpha(opacity=70);
}
.no-cssfilters-magic .mz-expand-thumbnails .magic-thumb-selected img {
opacity: .5;
filter:
alpha(opacity=50);
}
.magic-thumbs,
.magic-thumbs .magic-thumbs-wrapper,
.magic-thumbs ul,
.magic-thumbs li,
.magic-thumbs li:before,
.magic-thumbs li:after,
.magic-thumbs li img,
.magic-thumbs .magic-thumbs-button {
margin: 0;
padding: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.magic-thumbs {
direction: ltr;
overflow: visible;
z-index: 100;
position: relative;
left: 0;
top: 0;
padding: 0 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: none;
touch-action: none;
}
.magic-thumbs {
width: 100%;
height: 100%;
white-space: nowrap;
}
.magic-thumbs.no-buttons {
padding: 0 !important;
}
.magic-thumbs-wrapper {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.magic-thumbs ul {
list-style: none;
font-size: 0;
display: inline-block;
vertical-align: middle;
height: 100%;
position: relative;
white-space: nowrap;
}
.magic-thumbs.no-buttons ul {
padding: 0 !important;
-webkit-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
left: 0 !important;
}
.magic-thumbs ul li {
margin: 0 4px;
height: 100%;
width: auto;
vertical-align: top;
line-height: 0;
display: inline-block;
}
.magic-thumbs ul li:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.magic-thumbs ul li>img {
width: auto;
height: auto;
max-height: 100%;
vertical-align: middle;
}
.ie8-magic .magic-thumbs ul li>img {
max-width: none !important;
max-height: none !important;
}
/* vertical */
.magic-thumbs.magic-thumbs-vertical {
height: 100%;
}
.magic-thumbs-vertical {
padding: 30px 0;
}
.magic-thumbs-vertical ul {
height: auto;
width: 100%;
white-space: normal;
}
.magic-thumbs-vertical ul li {
width: 100%;
height: auto;
}
.magic-thumbs-vertical ul li {
margin: 4px 0;
}
.magic-thumbs-vertical ul li>img {
max-width: 100%;
max-height: none;
}
.ie8-magic .magic-thumbs-vertical ul li>img {
width: 100%;
}
/**
* Buttons
*/
.magic-thumbs .magic-thumbs-button {
cursor: pointer;
z-index: 90;
background-repeat: no-repeat;
background-color: transparent;
background-image: none;
border: 0;
border-radius: 0;
overflow: hidden;
position: absolute;
font-family: "magictoolbox-thin";
font-style: normal;
font-weight: 200;
font-variant: normal;
text-transform: none !important;
speak: none;
line-height: 1;
text-align: center;
color: #bbb;
-webkit-font-smoothing: antialiased;
font-size: 30px;
width: 30px;
height: 100%;
top: 0;
bottom: 0;
}
.magic-thumbs .magic-thumbs-button-prev {
left: 0;
}
.magic-thumbs .magic-thumbs-button-next {
right: 0;
}
.magic-thumbs .magic-thumbs-button-prev:before {
content: "\a002";
}
.magic-thumbs .magic-thumbs-button-next:before {
content: "\a003";
}
.magic-thumbs-button:before {
-webkit-transition: opacity .25s;
transition: opacity .25s;
opacity: .6;
}
.magic-thumbs .magic-thumbs-button:hover:before {
opacity: 1;
}
/* Vertical buttons */
.magic-thumbs-vertical .magic-thumbs-button {
width: 100%;
height: 30px;
left: 0;
right: 0;
top: auto;
bottom: auto;
}
.magic-thumbs-vertical .magic-thumbs-button-prev {
top: 0;
}
.magic-thumbs-vertical .magic-thumbs-button-next {
bottom: 0;
}
.magic-thumbs-vertical .magic-thumbs-button-prev:before {
content: "\a005";
}
.magic-thumbs-vertical .magic-thumbs-button-next:before {
content: "\a004";
}
.magic-thumbs.no-buttons .magic-thumbs-button {
display: none !important;
}
.magic-thumbs-button-disabled {
opacity: 0.2;
filter: alpha(opacity=20);
}
.frame_img {
display: block;
background: white;
text-align: center;
position: relative;
overflow: hidden;
}
.frame_img img:hover,
#colorbox img:hover {
opacity: 1;
}
.frame_img_inner {
max-height: 1500px;
}
#sync1_wrapper {
display: none;
}
#sync1 .item {
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item {
padding: 2px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
border: 1px solid #EAE8E1;
background: #FFF;
margin: 0 2px;
}
#sync2 .item:hover,
#sync2 .owl-item.current .item {
border: 1px solid #AAA;
}
#sync2 .item h1 {
font-size: 18px;
}
#sync2 .synced .item {
background: #0c83e7;
}
.owl-nav {}
.owl-height {}
#sync1 .owl-prev,
#sync1 .owl-next {
display: inline-block;
padding: 0PX;
text-align: center;
position: absolute;
top: 35% !important;
width: 20px;
height: 35px;
font-size: 12px;
margin: 5px;
padding: 3px 10px;
border-radius: 4px;
background: rgba(1, 131, 191, .77);
font-size: 46px;
color: #fff;
line-height: 29px;
}
#sync1:hover .owl-prev,
#sync1:hover .owl-next {
display: inline-block !important;
}
#sync1 .owl-prev {
left: 0px;
}
#sync1 .owl-next {
right: 0px;
}
#sync1 .owl-prev:hover {
right: 4px;
}
#sync1 .owl-next:hover {
right: 4px;
}
#sync1.owl-carousel .owl-item img {
transform-style: preserve-3d;
display: inherit;
width: auto;
max-width: 350px;
}
/*********THUMBNAIL***********/
.repair_image .thumbs {
padding: 0 25px;
margin-top: 18px;
}
.thumbs .owl-carousel .owl-stage {
text-align: center;
margin: 0 auto;
}
#sync2 .owl-prev,
#sync2 .owl-next {
display: inline-block;
zoom: 1;
position: absolute;
padding: 6px 0 0;
margin: 0;
border-radius: 0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: rgba(1, 131, 191, 0.67);
width: 24px;
height: 27px;
text-align: center;
font-size: 46px;
color: #fff;
font-family: -webkit-body;
line-height: 12px;
top: 9px;
}
#sync2:hover .owl-prev,
#sync2:hover .owl-next {
display: inline !important;
}
#sync2 .owl-prev {
left: -16px;
}
#sync2 .owl-next {
right: -16px;
}
#sync2 .owl-prev:hover {}
#sync2 .owl-next:hover {}
.repair .frame_left #sync1_wrapper {
border: 1px solid #EEE;
}
@media screen and (max-width:600px) {
.repair .frame_left .magic_zoom_area {
display: none;
}
.repair .frame_left #sync2 {
display: none;
}
.frame_img {
padding: 0px;
}
.frame_img_inner {
padding: 0px;
}
.repair .frame_left #sync1_wrapper {
display: block;
}
}
#address_buy_fast {
text-align: right;
text-indent: 70px;
padding-left: 0px
}
.modal_calendar {
display: none;
position: fixed;
top: 90px;
z-index: 9999;
left: 32%;
width: 36%;
box-shadow: 0px 0px 8px #0000002b
}
@media only screen and (max-width: 768px) {
.modal_calendar {
left: 0px;
width: 100%
}
}
.block {
display: block !important
}
.full_screen {
position: fixed;
width: 100%;
height: 999px;
z-index: 1001;
background: rgba(0, 0, 0, 0.48);
display: none;
top: 0px;
left: 0px
}
.body-calendar-modal ::placeholder {
color: black;
opacity: 1
}
.body-calendar-modal :-ms-input-placeholder {
color: black
}
.body-calendar-modal ::-ms-input-placeholder {
color: black
}
.body-calendar-modal .block_title {
text-align: center;
box-sizing: border-box;
margin-bottom: -5px;
position: relative
}
.body-calendar-modal .item {
background: #fff;
padding: 20px 25px;
border-radius: 4px
}
.body-calendar-modal .text {
font-weight: bold;
font-size: 18px;
margin-bottom: 20px
}
.body-calendar-modal input,
.body-calendar-modal select {
display: block;
border: 1px solid #ccc;
height: 48px;
width: 100%;
box-sizing: border-box;
padding: 0px 20px 0px 70px;
margin-bottom: 18px;
border-radius: 4px;
position: relative
}
.body-calendar-modal .btn_calendar {
text-align: center
}
.body-calendar-modal .btn-sm {
padding: 13px 35px;
color: #fff;
font-size: 18px;
background: var(--main-color);
border: none;
border-radius: 4px;
font-weight: bold;
transition: 0.5s;
cursor: pointer
}
.body-calendar-modal .btn-sm:hover {
background: var(--extra-color)
}
.body-calendar-modal button:last-child {
display: none
}
.body-calendar-modal .phone {
position: relative
}
.body-calendar-modal .phone:before {
position: absolute;
top: 10px;
width: 30px;
height: 30px;
left: 10px;
z-index: 2;
content: "";
background: url('data:image/svg+xml;utf8,\a\a');
background-repeat: no-repeat
}
.body-calendar-modal .day {
position: relative
}
.body-calendar-modal .day:before {
position: absolute;
top: 10px;
width: 30px;
height: 30px;
left: 10px;
z-index: 2;
content: "";
background: url('data:image/svg+xml;utf8,\a\a');
background-repeat: no-repeat
}
.body-calendar-modal .name {
position: relative
}
.body-calendar-modal .name:before {
position: absolute;
top: 10px;
width: 30px;
height: 30px;
left: 10px;
z-index: 2;
content: "";
background: url('data:image/svg+xml;utf8,\a\a');
background-repeat: no-repeat
}
.body-calendar-modal .center {
position: relative
}
.body-calendar-modal .center:before {
position: absolute;
top: 10px;
width: 30px;
height: 30px;
left: 10px;
z-index: 2;
content: "";
background: url('data:image/svg+xml;utf8,\a \a\a \a');
background-repeat: no-repeat
}
.body-calendar-modal .hotline-aq {
float: right;
color: var(--extra-color);
font-weight: bold;
font-size: 16px;
font-style: italic;
margin-top: 10px;
position: relative
}
.body-calendar-modal .hotline-aq:before {
position: absolute;
content: "\f2a0";
font: normal normal normal 24px/1 FontAwesome;
color: var(--main-color);
top: -3px;
left: -24px
}
@media screen and (max-width: 768px) {
.body-calendar-modal .block_title {
margin-bottom: 10px
}
.body-calendar-modal .block_title:before {
font: normal normal normal 22px/1 FontAwesome
}
.body-calendar-modal .text {
font-size: 14px
}
.body-calendar-modal .btn-sm {
padding: 10px 20px;
font-size: 14px
}
.body-calendar-modal .item {
padding: 10px
}
.body-calendar-modal .hotline-aq {
font-size: 14px
}
.body-calendar-modal .hotline-aq:before {
font: normal normal normal 18px/1 FontAwesome;
top: 0px;
left: -18px
}
.body-calendar-modal input,
.body-calendar-modal select {
margin-bottom: 10px;
padding-left: 60px
}
.body-calendar-modal select {
text-indent: 50px
}
}
/*# sourceMappingURL=modal_calendar.css.map */
.xdsoft_datetimepicker {
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
background: #fff;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 8px;
padding-left: 0;
padding-top: 2px;
position: absolute;
z-index: 9999;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: none
}
.xdsoft_datetimepicker.xdsoft_rtl {
padding: 8px 0 8px 8px
}
.xdsoft_datetimepicker iframe {
position: absolute;
left: 0;
top: 0;
width: 75px;
height: 210px;
background: transparent;
border: 0
}
.xdsoft_datetimepicker button {
border: none !important
}
.xdsoft_noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none
}
.xdsoft_noselect::selection {
background: transparent
}
.xdsoft_noselect::-moz-selection {
background: transparent
}
.xdsoft_datetimepicker.xdsoft_inline {
display: inline-block;
position: static;
box-shadow: none
}
.xdsoft_datetimepicker * {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0
}
.xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
display: none
}
.xdsoft_datetimepicker .xdsoft_datepicker.active,
.xdsoft_datetimepicker .xdsoft_timepicker.active {
display: block
}
.xdsoft_datetimepicker .xdsoft_datepicker {
width: 224px;
float: left;
margin-left: 8px
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
float: right;
margin-right: 8px;
margin-left: 0
}
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
width: 256px
}
.xdsoft_datetimepicker .xdsoft_timepicker {
width: 58px;
float: left;
text-align: center;
margin-left: 8px;
margin-top: 0
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
float: right;
margin-right: 8px;
margin-left: 0
}
.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
margin-top: 8px;
margin-bottom: 3px
}
.xdsoft_datetimepicker .xdsoft_monthpicker {
position: relative;
text-align: center
}
.xdsoft_datetimepicker .xdsoft_label i,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC)
}
.xdsoft_datetimepicker .xdsoft_label i {
opacity: .5;
background-position: -92px -19px;
display: inline-block;
width: 9px;
height: 20px;
vertical-align: middle
}
.xdsoft_datetimepicker .xdsoft_prev {
float: left;
background-position: -20px 0
}
.xdsoft_datetimepicker .xdsoft_today_button {
float: left;
background-position: -70px 0;
margin-left: 5px
}
.xdsoft_datetimepicker .xdsoft_next {
float: right;
background-position: 0 0
}
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_today_button {
background-color: transparent;
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: block;
height: 30px;
opacity: .5;
-ms-filter: "alpha(opacity=50)";
outline: medium none;
overflow: hidden;
padding: 0;
position: relative;
text-indent: 100%;
white-space: nowrap;
width: 20px;
min-width: 0
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
float: none;
background-position: -40px -15px;
height: 15px;
width: 30px;
display: block;
margin-left: 14px;
margin-top: 7px
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
float: none;
margin-left: 0;
margin-right: 14px
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
background-position: -40px 0;
margin-bottom: 7px;
margin-top: 0
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
height: 151px;
overflow: hidden;
border-bottom: 1px solid #ddd
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
background: #f5f5f5;
border-top: 1px solid #ddd;
color: #666;
font-size: 12px;
text-align: center;
border-collapse: collapse;
cursor: pointer;
border-bottom-width: 0;
height: 25px;
line-height: 25px
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:first-child {
border-top-width: 0
}
.xdsoft_datetimepicker .xdsoft_today_button:hover,
.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_prev:hover {
opacity: 1;
-ms-filter: "alpha(opacity=100)"
}
.xdsoft_datetimepicker .xdsoft_label {
display: inline;
position: relative;
z-index: 9999;
margin: 0;
padding: 5px 3px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
background-color: #fff;
float: left;
width: 182px;
text-align: center;
cursor: pointer
}
.xdsoft_datetimepicker .xdsoft_label:hover>span {
text-decoration: underline
}
.xdsoft_datetimepicker .xdsoft_label:hover i {
opacity: 1.0
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 30px;
z-index: 101;
display: none;
background: #fff;
max-height: 160px;
overflow-y: hidden
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
right: -7px
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
right: 2px
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
color: #fff;
background: #ff8000
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
padding: 2px 10px 2px 5px;
text-decoration: none !important
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
background: #3af;
box-shadow: #178fe5 0 1px 3px 0 inset;
color: #fff;
font-weight: 700
}
.xdsoft_datetimepicker .xdsoft_month {
width: 100px;
text-align: right
}
.xdsoft_datetimepicker .xdsoft_calendar {
clear: both
}
.xdsoft_datetimepicker .xdsoft_year {
width: 48px;
margin-left: 5px
}
.xdsoft_datetimepicker .xdsoft_calendar table {
border-collapse: collapse;
width: 100%
}
.xdsoft_datetimepicker .xdsoft_calendar td>div {
padding-right: 5px
}
.xdsoft_datetimepicker .xdsoft_calendar th {
height: 25px
}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
width: 14.2857142%;
background: #f5f5f5;
border: 1px solid #ddd;
color: #666;
font-size: 12px;
text-align: right;
vertical-align: middle;
padding: 0;
border-collapse: collapse;
cursor: pointer;
height: 25px
}
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
width: 12.5%
}
.xdsoft_datetimepicker .xdsoft_calendar th {
background: #f1f1f1
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
color: #3af
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
background: #ffe9d2;
box-shadow: #ffb871 0 1px 4px 0 inset;
color: #000
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
background: #c1ffc9;
box-shadow: #00dd1c 0 1px 4px 0 inset;
color: #000
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
background: #3af;
box-shadow: #178fe5 0 1px 3px 0 inset;
color: #fff;
font-weight: 700
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_time_box>div>div.xdsoft_disabled {
opacity: .5;
-ms-filter: "alpha(opacity=50)";
cursor: default
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
opacity: .2;
-ms-filter: "alpha(opacity=20)"
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
color: #fff !important;
background: #ff8000 !important;
box-shadow: none !important
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
background: #3af !important;
box-shadow: #178fe5 0 1px 3px 0 inset !important;
color: #fff !important
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_disabled:hover {
color: inherit !important;
background: inherit !important;
box-shadow: inherit !important
}
.xdsoft_datetimepicker .xdsoft_calendar th {
font-weight: 700;
text-align: center;
color: #999;
cursor: default
}
.xdsoft_datetimepicker .xdsoft_copyright {
color: #ccc !important;
font-size: 10px;
clear: both;
float: none;
margin-left: 8px
}
.xdsoft_datetimepicker .xdsoft_copyright a {
color: #eee !important
}
.xdsoft_datetimepicker .xdsoft_copyright a:hover {
color: #aaa !important
}
.xdsoft_time_box {
position: relative;
border: 1px solid #ccc
}
.xdsoft_scrollbar>.xdsoft_scroller {
background: #ccc !important;
height: 20px;
border-radius: 3px
}
.xdsoft_scrollbar {
position: absolute;
width: 7px;
right: 0;
top: 0;
bottom: 0;
cursor: pointer
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
left: 0;
right: auto
}
.xdsoft_scroller_box {
position: relative
}
.xdsoft_datetimepicker.xdsoft_dark {
box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
background: #000;
border-bottom: 1px solid #444;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-top: 1px solid #333;
color: #ccc
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
border-bottom: 1px solid #222
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div {
background: #0a0a0a;
border-top: 1px solid #222;
color: #999
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
background-color: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select {
border: 1px solid #333;
background: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
color: #000;
background: #007fff
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
background: #c50;
box-shadow: #b03e00 0 1px 3px 0 inset;
color: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==)
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
background: #0a0a0a;
border: 1px solid #222;
color: #999
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
background: #0e0e0e
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
color: #c50
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
background: #ffe9d2;
box-shadow: #ffb871 0 1px 4px 0 inset;
color: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
background: #c1ffc9;
box-shadow: #00dd1c 0 1px 4px 0 inset;
color: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
background: #c50;
box-shadow: #b03e00 0 1px 3px 0 inset;
color: #000
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
color: #000 !important;
background: #007fff !important
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
color: #666
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright {
color: #333 !important
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a {
color: #111 !important
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover {
color: #555 !important
}
.xdsoft_dark .xdsoft_time_box {
border: 1px solid #333
}
.xdsoft_dark .xdsoft_scrollbar>.xdsoft_scroller {
background: #333 !important
}
.xdsoft_datetimepicker .xdsoft_save_selected {
display: block;
border: 1px solid #ddd !important;
margin-top: 5px;
width: 100%;
color: #454551;
font-size: 13px
}
.xdsoft_datetimepicker .blue-gradient-button {
font-family: "museo-sans", "Book Antiqua", sans-serif;
font-size: 12px;
font-weight: 300;
color: #82878c;
height: 28px;
position: relative;
padding: 4px 17px 4px 33px;
border: 1px solid #d7d8da;
background: -moz-linear-gradient(top, #fff 0, #f4f8fa 73%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(73%, #f4f8fa));
background: -webkit-linear-gradient(top, #fff 0, #f4f8fa 73%);
background: -o-linear-gradient(top, #fff 0, #f4f8fa 73%);
background: -ms-linear-gradient(top, #fff 0, #f4f8fa 73%);
background: linear-gradient(to bottom, #fff 0, #f4f8fa 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f4f8fa', GradientType=0)
}
.xdsoft_datetimepicker .blue-gradient-button:hover,
.xdsoft_datetimepicker .blue-gradient-button:focus,
.xdsoft_datetimepicker .blue-gradient-button:hover span,
.xdsoft_datetimepicker .blue-gradient-button:focus span {
color: #454551;
background: -moz-linear-gradient(top, #f4f8fa 0, #FFF 73%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f8fa), color-stop(73%, #FFF));
background: -webkit-linear-gradient(top, #f4f8fa 0, #FFF 73%);
background: -o-linear-gradient(top, #f4f8fa 0, #FFF 73%);
background: -ms-linear-gradient(top, #f4f8fa 0, #FFF 73%);
background: linear-gradient(to bottom, #f4f8fa 0, #FFF 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f8fa', endColorstr='#FFF', GradientType=0)
}
.comments .star {
width: 13px;
display: inline-block;
color: #FF9727
}
.comments .reply_area {
padding: 10px;
background: #FFF;
box-sizing: border-box;
margin-right: 10px;
margin-top: 5px;
border-radius: 3px
}
.comments #comment_add_form {
margin-top: 20px
}
.comments #comment_add_form .label_form {
font-weight: 600;
margin-bottom: 15px;
display: block;
font-size: 15px
}
.comments ._textarea {
float: none;
width: 100%;
padding-right: 0px
}
.comments ._textarea textarea {
display: block;
overflow: hidden;
background: #fff;
min-height: 123px;
border: 1px solid #EEEEEE;
padding: 10px;
color: #333;
width: 100%;
box-sizing: border-box
}
.comments .wrap_r {
float: none;
width: 96%;
padding-left: 0px;
position: fixed;
top: 130px;
z-index: 100;
left: 2%;
display: none
}
@media only screen and (min-width: 768px) {
.comments .wrap_r {
width: 40%;
left: 30%
}
}
.comments .comment_keyword_wrapper {
border: 1px solid #EEE;
max-width: 100%;
color: #333;
box-sizing: border-box;
width: 400px;
margin-bottom: 10px;
position: relative;
border-radius: 3px
}
.comments .comment_keyword_wrapper #comment_keyword {
display: block;
padding: 8px;
font-size: 14px;
width: 100%;
border: none;
box-sizing: border-box
}
.comments .comment_keyword_wrapper .button-search {
width: 42px;
height: 32px;
position: absolute;
background: #ffffff;
border: none;
right: 0px;
top: 0px;
border-radius: 0 4px 4px 0;
cursor: pointer
}
.comments .comment_keyword_wrapper .button-search svg {
width: 18px;
color: var(--main-color)
}
.comments .wrap_loginpost {
display: block;
overflow: hidden;
background: #fff;
position: relative
}
.comments .wrap_loginpost ._left {
float: left;
overflow: hidden;
width: 100%;
border-right: 1px solid #d8d8d8
}
@media only screen and (min-width: 600px) {
.comments .wrap_loginpost ._left {
width: 55%
}
}
.comments .wrap_loginpost ._left label {
display: block;
font-size: 14px;
color: #666;
margin-bottom: 10px;
padding-right: 5px
}
.comments .wrap_loginpost ._left a {
overflow: hidden;
margin-right: 2px
}
.comments .wrap_loginpost ._left a i {
background-repeat: no-repeat;
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
vertical-align: middle
}
.comments .wrap_loginpost ._left a ._facebook {
background-position: 0 0;
width: 110px;
height: 37px
}
.comments .wrap_loginpost ._left a ._googleplus {
background-position: 0 -40px;
width: 110px;
height: 37px
}
.comments .wrap_loginpost ._left a ._mobileworld {
background-position: 0 -80px;
width: 130px;
height: 37px
}
.comments .wrap_loginpost ._left ._noaccount {
display: block;
padding: 10px 0;
font-size: 14px;
color: #999
}
.comments .wrap_loginpost ._left ._noaccount a {
color: var(--main-color)
}
.comments .wrap_loginpost ._right {
float: right;
overflow: hidden;
width: 100%
}
.comments .wrap_loginpost ._right label {
display: block;
font-size: 14px;
color: #666;
margin-bottom: 10px
}
.comments .wrap_loginpost ._right .txt_input {
display: block;
padding: 8px;
width: 96%;
margin: 10px 2%;
height: 35px;
border: 1px solid #dadada;
background: #fff;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box
}
.comments .wrap_loginpost ._right ._btn_comment {
display: block;
padding: 7px 10px;
border: 1px solid #EEE;
font-size: 14px;
margin-bottom: 10px;
width: 100%;
color: #333;
box-sizing: border-box
}
.comments .wrap_submit {
display: block;
overflow: hidden;
background: #fff;
position: relative;
text-align: center;
padding-bottom: 10px
}
.comments .wrap_submit .userinfo {
font-size: 14px;
color: #2a2a2a;
text-align: center;
font-weight: 600;
max-width: 250px;
padding: 11px 0 10px;
cursor: pointer;
background: #fff;
position: absolute;
left: 20px;
padding-right: 64px
}
.comments .wrap_submit .userinfo.in {
right: 280px
}
.comments .wrap_submit .userinfo .avaS {
margin-top: -4px;
float: left;
width: 25px;
height: 25px;
margin-right: 7px
}
.comments .wrap_submit .userinfo .uname {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
float: left;
text-align: left
}
.comments .wrap_submit .userinfo a {
color: var(--main-color);
font-weight: 300;
float: left;
position: absolute;
right: -3px
}
.comments .wrap_submit ._close_comment {
background: none repeat scroll 0 0 #f1f1f1;
border: none;
font-size: 15px;
padding: 8px 24px 9px;
margin-left: 10px;
border-radius: 2px;
display: inline-block;
cursor: pointer
}
.comments .wrap_submit .txt_input {
width: 96px;
border: 1px solid #B3B3B3;
height: 30px;
padding: 10px;
line-height: 30px;
color: #333333;
float: left
}
.comments .wrap_submit .code-view {
float: left
}
.comments .wrap_submit ._btn_comment {
display: block;
width: 96%;
margin-left: 2%;
margin: 0 auto 10px;
padding: 8px;
height: 40px;
font-size: 14px;
color: #fff;
text-transform: uppercase;
border: 1px solid var(--main-color);
border-radius: 4px;
background: var(--main-color);
cursor: pointer
}
.comments ._contents ._level_0 {
margin-bottom: 10px;
margin-top: 15px
}
.comments ._contents ._level_0 p ._avatar {
float: left;
width: 25px;
height: 25px;
background: #ccc;
margin-right: 7px;
text-align: center;
color: #666;
text-transform: uppercase;
font-size: 12px;
line-height: 26px;
font-weight: 600
}
.comments ._contents ._level_0 p ._name {
color: #22221D;
font-weight: bold;
float: left;
line-height: 28px;
margin-right: 20px
}
.comments ._contents ._level_0 p ._img {
float: left;
margin-right: 5px
}
.comments ._contents ._level_0 p ._img img {
width: 28px;
height: 28px;
border-radius: 50px;
border: 1px solid #e6e6e6;
box-sizing: border-box
}
.comments ._contents ._level_0 p ._level {
float: left;
background: #EFBB47;
text-transform: uppercase;
padding: 2px 10px 0;
border-radius: 4px;
font-size: 12px;
margin-top: 2px
}
.comments ._contents ._level_0 ._wrap {
padding-bottom: 10px;
padding-left: 32px
}
.comments ._contents ._level_0 ._wrap ._content {
color: #606060;
margin-bottom: 11px
}
.comments ._contents ._level_0 ._wrap ._control {
font-size: 13px
}
.comments ._contents ._level_0 ._wrap ._control .button_reply {
color: #498FE1
}
.comments ._contents ._level_0 ._wrap ._control .dot {
padding: 0 5px;
font-size: 30px;
height: 6px;
line-height: 0;
display: inline-block;
color: #B3B5B2
}
.comments ._contents ._level_0 ._wrap ._control .favorite {
display: none
}
.comments ._contents ._level_0 ._wrap ._control .date {
color: #B3B5B2
}
.comments ._contents ._level_0 ._level_1 {
background: #f1f1f196;
padding-top: 10px;
margin-left: 35px;
padding-left: 10px;
border-radius: 4px;
margin-bottom: 10px
}
.comments ._contents ._level_0 ._level_2 {
padding-left: 33px
}
.rate i,
#ratings1 i {
width: 17px;
height: 17px;
display: inline-flex;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
background-repeat: no-repeat
}
.star_on {
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat
}
.star_off {
background: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat
}
#ratings1 {
display: block;
float: left;
margin-top: 5px
}
#ratings1 i {
cursor: pointer
}
.rating_area {
margin-bottom: 14px
}
.rating_note {
background: var(--main-color);
color: #FFF;
padding: 4px 10px;
position: relative;
font-size: 13px;
border-radius: 0 4px 4px 0;
display: inline-block;
float: left;
margin-left: 28px
}
.rating_note::after {
content: '';
display: block;
clear: both;
width: 0;
height: 0;
border-style: solid;
border-width: 13px 12px 12px 0;
border-color: transparent var(--main-color) transparent transparent;
position: absolute;
top: 0;
left: -12px
}
.manufactory font {
color: #0183BF;
margin-right: 13PX
}
.rate_count {
margin-left: 5px
}
.tab_label {
margin-bottom: 15px;
margin-top: 11px
}
.btn-comment-mb,
.btn-comment-mb-rep {
background-color: var(--main-color);
border: none;
font-size: 15px;
color: #fff;
padding: 8px 12px 9px;
border-radius: 2px;
cursor: pointer;
margin-top: 10px;
display: block
}
@media screen and (max-width: 550px) {
.btn-comment-mb,
.btn-comment-mb-rep {
width: 55%;
border-radius: 5px;
margin: 10px auto;
margin-bottom: 20px
}
}
.display-open {
display: block !important
}
.full-screen-mobile {
background: #00000070;
z-index: 99;
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: none
}
.title-mb {
overflow: hidden;
padding: 13px 0 10px 10px;
font-size: 16px;
color: #333;
font-weight: bold;
text-transform: uppercase;
background: #fff;
border-bottom: 1px solid #e6e3e3;
position: relative;
display: block
}
.title-mb .close-md-comment {
position: absolute;
right: 10px;
top: 10px;
font-weight: normal;
cursor: pointer
}
/*# sourceMappingURL=default.css.map */
.repair_grid {
display: flex;
flex-flow: row wrap;
margin: 5px -5px 10px -5px
}
.repair_grid .row_inner {
display: flex
}
.repair_grid .item {
float: left;
width: calc(25% - 10px);
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
overflow: hidden;
border: 1px solid #F4F4F4;
text-align: center;
margin: 5px
}
.repairs-list-related .repair_grid .item {
border-bottom: 1px solid #E7E7E7
}
.repair_grid .item .frame_inner {
padding: 0px 17px 0px;
position: relative
}
.repair_grid .item .repair_image {
position: relative;
text-align: center
}
.repair_grid .item .summary {
display: none;
opacity: 0;
position: relative;
position: absolute;
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
top: 0;
padding-left: 17px;
padding-right: 17px;
left: -17px;
color: #000;
overflow: hidden;
border-bottom: 1px dashed #E7E7E7;
border-bottom-style: dashed;
text-align: justify;
font-family: tahoma;
z-index: 99;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0)
}
.repair_grid .item .summary_inner {
padding-top: 10px
}
.frame_inner>h2 {
margin-bottom: 8px;
margin-top: 16px;
overflow: hidden
}
.repair_grid .name {
color: #333333;
line-height: 19px;
font-weight: normal;
font-weight: bold;
max-height: 38px;
overflow: hidden;
display: block
}
.repair_grid .discount {
background: url(https://fonesmart.com.vn/templates/fonesmart/images/bg_discount.png) no-repeat scroll right -3px;
color: #FFFFFF;
height: 21px;
left: -11px;
padding: 0px 14px 0 9px;
position: absolute;
top: -14px;
width: 45px;
display: inline-block
}
.price_arae {
position: relative
}
.repair_grid .item .price_old {
color: #888888;
font-size: 13px;
font-weight: normal;
margin-bottom: 7px;
position: absolute;
right: 0;
top: 3px;
display: none
}
.repair_grid .item .price_old span {
text-decoration: line-through
}
.repair_grid .item .price_current {
color: #F40014;
font-size: 15px;
font-weight: normal;
margin-top: 9px;
font-family: 600
}
.repair_grid .status {
margin-bottom: 18px
}
.repair_grid .status li {
color: #606060;
font-size: 11px;
list-style: disc inside none
}
.repair_grid .button-cart {
display: none
}
.repair_grid .button-detail {
display: none;
background: var(--main-color);
color: #FFF;
border-radius: 4px;
padding: 8px 16px 8px 33px;
font-size: 13px;
position: relative;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
-ms-transition: all 1.0s ease;
transition: all 1.0s ease;
transform: translate(0, 0px);
-webkit-transform: translate(0, 0px);
-moz-transform: translate(0, 0px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-450px, -50%);
z-index: 2;
min-width: 62px
}
.repair_grid .button-detail:before {
content: "\f218";
position: absolute;
left: 13px;
top: 9px;
font-family: FontAwesome;
font-size: 16px
}
.tab_type {
padding-left: 10px;
border-bottom: 1px solid #F4F4F4;
margin-top: 17px;
padding-bottom: 8px
}
.tab_type li {
display: inline;
position: relative;
font-size: 15px;
padding: 0 2px;
margin: 0 8px
}
.tab_type li.activated a {
color: var(--main-color)
}
.tab_type li.activated a::before,
.tab_type li:hover a::before {
position: absolute;
width: 100%;
height: 2px;
background: var(--main-color);
content: '';
left: 0;
bottom: -9px
}
.repair_grid .item_break:nth-child(8n) {
display: block;
height: 0;
clear: both;
width: 100%
}
.repair_grid .button_area {
text-align: center;
position: absolute;
bottom: 0px;
width: 100%;
margin: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
z-index: 1;
transform: translate(0, 200px)
}
.repair_grid .item:hover .button_area {
transform: translate(0, 0)
}
.repair_grid .button_area a {
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 14px;
height: 38px;
line-height: 38px;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
width: 38px;
background-color: var(--green-color);
color: #fff;
display: none
}
.repair_grid .button_area a::before,
.repair_grid .button_area a::after {
bottom: 0;
font-family: FontAwesome;
font-size: 16px;
height: 100%;
line-height: 38px;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
width: 100%;
float: left;
color: #ffffff;
font-size: 19px
}
.repair_grid .button_area .add_cart::before {
content: "\f07a"
}
.repair_grid .button_area .add_cart::after {
content: "\f07a"
}
.repair_grid .button_area .detail_button::before {
content: "\f00e"
}
.repair_grid .button_area .detail_button::after {
content: "\f00e"
}
.repair_grid .button_area a::before {
bottom: 0
}
.repair_grid .button_area .add_cart::after {
content: "\f07a"
}
.repair_grid .button_area a::after {
bottom: 100%;
pointer-events: none;
position: absolute;
width: 100%;
left: 0
}
.repair_grid .button_area a:hover:before {
transform: translateY(100%);
-webkit-transform: translateY(100%)
}
.repair_grid .button_area a:hover:after {
bottom: 0
}
.repair_type {
position: absolute;
top: 0;
left: 0;
background: var(--main-color);
color: #FFF;
padding: 1px 8px;
border-radius: 3px 3px 3px 0;
font-size: 12px;
line-height: 18px
}
.repair_type {
position: absolute;
top: 0;
left: 0;
background: var(--main-color);
color: #FFF;
padding: 1px 8px;
border-radius: 3px 3px 3px 0;
font-size: 12px;
line-height: 18px
}
.repair_type:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: #0183BF transparent transparent transparent
}
.repair_type_moi {
background: var(--main-color);
color: #FFF;
padding: 1px 8px;
border-radius: 3px 3px 3px 0;
font-size: 12px
}
.repair_type_moi:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: #0183BF transparent transparent transparent
}
.repair_type_hot,
.repair_type_sale {
background: #FF0000;
color: #FFF;
padding: 1px 8px;
border-radius: 3px 3px 3px 0;
font-size: 12px
}
.repair_type_hot:after,
.repair_type_sale:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: #FF0000 transparent transparent transparent
}
.repair_type_order_0 {
top: -13px;
left: 7px
}
.repair_type_order_1 {
top: 14px;
left: 7px
}
.repair_type_order_2 {
top: -123px;
left: 7px
}
.repair_type_qua-tang {
background-image: url(https://fonesmart.com.vn/templates/fonesmart/images/icon_v1.png);
background-repeat: no-repeat;
background-position: -215px 0;
background-color: transparent;
width: 35px;
height: 33px;
text-indent: -999px;
left: 198px;
top: -12px
}
.repair_type_qua-tang:after {
border-color: transparent
}
@media screen and (max-width: 1197px) {
.repair_grid {
display: flex;
flex-flow: row wrap;
margin: 5px 0px 10px 0px
}
}
@media screen and (max-width: 1100px) {
.main_wrapper .repair_grid .item {
border-bottom: 1px solid #E7E7E7
}
}
@media screen and (max-width: 480px) {
.main_wrapper .repair_grid .item {
width: calc(50% - 10px)
}
.repair_grid .item .frame_inner {
padding: 0px 10px 0px
}
.repair_grid .item .price_old {
display: none
}
}
.promotion_cat {
opacity: 0;
width: 100%;
height: 100%;
bottom: -100%;
position: absolute;
color: #000;
box-sizing: border-box;
text-align: left;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease
}
.promotion_cat .promotion_cb {
padding: 5px;
background: #dfdfdff2;
height: 50%
}
.promotion_cat .price_hover {
background: #fff;
height: 50%;
padding: 5px
}
.promotion_cat .price_hover .detail_hover {
margin-top: 15px;
background: var(--main-color);
display: inline-block;
padding: 5px 15px;
color: #fff;
font-weight: bold
}
.promotion_cat .not_price {
height: 100%
}
.promotion_cat ul li {
list-style-type: square;
line-height: 18px;
font-size: 14px;
color: #000;
margin: 0.5em 0 0.5em 20px
}
.repair_grid .item:hover .promotion_cat {
bottom: 0px;
opacity: 1
}
/*# sourceMappingURL=repairs.css.map */
#sticky_right1 {
max-width: 270px;
border: 1px solid #eaeaea;
padding: 10px
}
@media only screen and (max-width: 414px) {
#sticky_right1 {
max-width: 100%
}
}
.block-repairs-vertical .row {
border-bottom: 1px solid #efefef7a;
padding: 13px 0px 10px
}
.block-repairs-vertical .row .frame_img_cat {
float: left;
margin: 0 12px 5px 0;
border: 1px solid #EFEFEF !important;
padding: 5px;
width: 34%;
box-sizing: border-box;
overflow: hidden;
position: relative
}
.block-repairs-vertical .row:hover .frame_img_cat {
border: 1px solid #CCC
}
.block-repairs-vertical .row:hover .frame_img_cat img {
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
transition: all .3s ease-out
}
.block-repairs-vertical .row .price {
color: #ED1C24;
font-size: 15px;
font-weight: 500;
text-align: left;
margin-top: 5px;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #7b7b7b;
font-style: italic
}
.block-repairs-vertical .row .frame_title {
font-size: 13px
}
.block-repairs-vertical .row .frame_title a {
display: block;
max-height: 57px;
overflow: hidden;
text-align: justify
}
.title_list_pro {
padding: 18px 0px 12px 15px;
background: #f4f4f4;
margin-top: 20px;
font-size: 16px;
font-family: RobotoBold;
text-transform: uppercase;
position: relative
}
.title_list_pro span {
width: 23px;
height: 23px;
margin-left: 2px;
display: inline-block;
margin-right: 10px;
float: left
}
/*# sourceMappingURL=vertical.css.map */
.search-contain {
width: calc(100% - 15px);
max-width: 100%;
box-sizing: border-box;
float: left;
border: 1px solid #efefef;
border-radius: 50px;
padding: 0px 15px;
background: #fff
}
.search-contain .search-content {
border-radius: 4px;
border: none
}
.search-contain input[type="text"] {
border: none;
background: #FFF;
width: 100%;
height: 35px;
box-sizing: border-box;
font-size: 13px
}
#search_form {
position: relative
}
#search .button-search {
width: 42px;
height: 35px;
position: absolute;
background: unset;
border: none;
right: -15px;
outline: none;
top: 0px;
border-radius: 0 4px 4px 0;
cursor: pointer
}
#search .button-search svg {
width: 16px;
background: transparent;
color: var(--main-color);
padding: 10px 10px
}
.button-search i {
width: 26px;
height: 29px;
background-position: 0px 0px;
display: block;
margin-left: 11px;
margin-top: 4px
}
.autocomplete-suggestions {
position: absolute;
top: 4px;
right: -5px;
margin: 6px 0 0 6px;
_background: none;
_margin: 1px 0 0 0
}
.autocomplete-suggestions {
border: 1px solid #ececec;
background: #fff;
cursor: default;
overflow: auto;
margin: 0 0px 6px -1px;
width: 100%;
top: 31px;
left: 101px;
z-index: 999999 !important
}
@media only screen and (min-width: 1180px) {
.autocomplete-suggestions {
width: 360px !important
}
}
.autocomplete-suggestions div {
cursor: pointer;
width: 100%;
display: inline-block;
clear: both;
padding: 0;
margin: 0;
margin-bottom: -5px
}
.autocomplete-suggestions .autocomplete-group {
padding: 8px 3%;
width: 100%;
background: #f9f9f9;
box-sizing: border-box
}
.autocomplete-suggestions div a,
.autocomplete-suggestions div a:link,
.autocomplete-suggestions div a:visited {
display: inline-block;
margin: 0;
padding: 6px 3%;
width: 100%;
font-size: 13px;
color: #333;
background: #fff;
clear: both;
border-bottom: 1px solid #eee;
box-sizing: border-box
}
.autocomplete-suggestions div a:hover {
background: #ececec
}
.autocomplete-suggestions div a img {
width: 64px;
float: left;
margin-right: 20px
}
.autocomplete-suggestions div a label {
font-weight: normal;
cursor: pointer;
margin: 0;
float: left
}
.autocomplete-suggestions div a span {
display: block;
clear: both;
cursor: pointer;
margin: 0;
padding: 0
}
.autocomplete-suggestions div a span.price {
color: #fd0000;
padding-top: 10px
}
.autocomplete-suggestions div.last {
border: none
}
.autocomplete-suggestions strong {
font-weight: 500;
color: #0083bf
}
.autocomplete-suggestions::-webkit-scrollbar-track {
border-radius: 15px;
background-color: #EBEBEB
}
.autocomplete-suggestions::-webkit-scrollbar {
width: 5px;
background-color: #EBEBEB;
border-radius: 15px
}
.autocomplete-suggestions::-webkit-scrollbar-thumb {
border-radius: 15px;
background: var(--main-color);
border: 1px solid #EBEBEB
}
@media only screen and (max-width: 450px) {
.search-contain {
width: 100%
}
.search-contain input[type="text"] {
border-radius: 4px
}
}
@media only screen and (max-width: 768px) {
.autocomplete-suggestions {
top: 30px;
left: 10px
}
}
/*# sourceMappingURL=search.css.map */
.mainmenu_wrapper {
height: 52px
}
#custom-menu-selector {
width: 1168px;
max-width: 100%;
margin: 0 auto
}
.mainmanu li a {
padding: 0;
color: #FFF
}
.quick-access {
margin: 26px 0 0 0;
float: right
}
.push-button {
display: none
}
.push-button a {
height: 36px;
width: 38px;
display: inline-block;
text-indent: -9999px
}
.mainmanu {
position: relative
}
.mainmanu>li.level_0 {
padding-left: 9px;
float: left;
list-style: none;
line-height: 18px;
margin-right: 1px;
padding: 0px 12px
}
.mainmanu>li:hover {
background: var(--main-color);
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all
}
.mainmanu .level_0>a {
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
display: inline-block;
padding: 7px 0px;
color: #333;
letter-spacing: -0.3px
}
.mainmanu .level_0:hover>a {
color: #FFF
}
.mainmanu .level_0:hover svg {
fill: white
}
.mainmanu .level_0>a span.icon_svg.cls {
display: block;
text-align: center;
margin-bottom: -2px
}
.mainmanu .level_0>a span.icon_svg.cls svg {
height: 20px
}
.mainmanu .level_0>a i {
content: ' ';
width: 22px;
height: 24px;
top: -1px;
left: 0px;
z-index: 10;
display: block;
text-align: center;
margin: 0 auto
}
#menu-dien-thoai>a i {
background-position: -228px -164px
}
#menu-dien-thoai:hover>a i {
background-position: 0px -38px
}
#menu-may-tinh-bang>a i {
background-position: -247px -164px
}
#menu-may-tinh-bang:hover>a i {
background-position: -17px -38px
}
#menu-phu-kien>a i {
background-position: -270px -164px
}
#menu-phu-kien:hover>a i {
background-position: -43px -40px
}
#menu-khuyen-mai>a i {
background-position: -300px -164px
}
#menu-khuyen-mai:hover>a i {
background-position: -71px -39px
}
#menu-su-kien>a i {
background-position: -329px -164px
}
#menu-su-kien:hover>a i {
background-position: 0px -40px
}
#menu-tin-tuc>a i {
background-position: -362px -164px
}
#menu-tin-tuc:hover>a i {
background-position: -132px -40px
}
#menu-review>a i {
background-position: -328px -164px
}
#menu-review:hover>a i {
background-position: -99px -40px
}
#menu-thay-man>a i {
background-position: -392px -164px
}
#menu-thay-man:hover>a i {
background-position: -160px -39px
}
#menu-sua-chua>a i {
background-position: -415px -164px
}
#menu-sua-chua:hover>a i {
background-position: -187px -40px
}
.wrapper_children_level_0 {
position: absolute;
background: #FFF;
border: 1px solid #CCC;
z-index: 100;
color: red;
padding: 12px;
box-sizing: border-box;
transition: 0.2s all ease
}
.wrapper_children_level_0 ul li a {
color: #333 !important;
font-size: 13px
}
@media only screen and (min-width: 951px) {
.level_0:hover .wrapper_children_level_0 {
display: block;
transition: 0.6s all ease;
visibility: visible !important;
opacity: 1 !important
}
}
.mainmanu .menu_col {
float: left;
width: 100%
}
.mainmanu .field_label {
color: #17b0e4;
font-size: 17px;
line-height: 24px;
margin-bottom: 5px;
text-transform: uppercase
}
.mainmanu .menu_col .field_name {
margin-bottom: 15px
}
.mainmanu .menu_col .field_item {
float: left;
width: 25%;
line-height: 24px;
margin-bottom: 6px
}
.mainmanu #menu_col_1 .field_item {
line-height: 24px;
margin-bottom: 6px
}
.mainmanu .field_item a {
text-decoration: none;
color: #333;
transition: 0.5s all ease;
font-size: 13px
}
.mainmanu .field_item:hover a,
.wrapper_children_level_0 ul li:hover a {
color: var(--main-color) !important;
padding-left: 5px;
transform: translate(0.5em, 0px);
text-decoration: none
}
.wrapper_children_level_0 li {
line-height: 24px;
margin-bottom: 10px
}
.wrapper_children_sub_level_0 {
margin-bottom: 5px
}
.wrapper_children_sub_level_0 li.level_1 {
width: 100%;
color: #17b0e4;
font-size: 17px;
line-height: 24px;
margin-bottom: 5px;
text-transform: uppercase
}
.wrapper_children_sub_level_0 li.level_1 a {
color: #17b0e4 !important;
font-size: 17px
}
.wrapper_children_sub_level_0 li.level_2 {
width: 33.33%
}
.sb-submenu li {
float: left;
width: 50%
}
.mb_arrow {
text-align: center;
color: #FFF;
position: absolute;
cursor: pointer;
-moz-transition: all 0.2s ease-in 0;
-webkit-transition: all 0.2s ease-in;
-webkit-transition-delay: 0;
transition: all 0.2s ease-in 0;
right: 0px;
height: 18px;
border-left: rgba(248, 253, 255, 0.3) solid 1px;
display: none;
top: 0px;
padding: 10px 25px 12px 42px
}
.mb_arrow::before {
display: inline-block;
width: 0;
height: 0;
position: absolute;
top: 9px;
vertical-align: top;
content: '';
border-radius: 3px;
right: 27px
}
.level_0 .closed::before {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FFF;
display: inline-block;
width: 0;
height: 0;
position: absolute;
right: 27px;
top: 9px;
vertical-align: top;
content: '';
border-radius: 3px
}
.mb_arrow::after {
display: inline-block;
width: 0;
height: 0;
position: absolute;
right: 29px;
top: 9px;
vertical-align: top;
content: ''
}
.level_0 .closed::after {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #188ec5
}
.level_0:hover .mb_arrow::before {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #FFF;
top: 13px
}
.level_0:hover .mb_arrow::after {
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid var(--main-color);
top: 10px;
left: 22px
}
.wrapper_children_level_0 .arrow_box {
display: none
}
@media only screen and (max-width: 1180px) {
.mainmanu>li.level_0 {
padding-left: 13px;
padding-right: 13px;
position: relative
}
.level_0 .wrapper_children_level_0 {
max-width: 670px
}
}
@media only screen and (max-width: 1156px) {
.mainmanu>li.level_0 {
padding-left: 11px;
padding-right: 11px
}
.level_0 .wrapper_children_level_0 {
max-width: 629px
}
}
@media only screen and (max-width: 1090px) {
.mainmanu>li.level_0 {
padding-left: 9px;
padding-right: 9px
}
}
@media only screen and (max-width: 1060px) {
.mainmanu>li.level_0 {
padding-left: 9px;
padding-right: 9px
}
.level_0 .wrapper_children_level_0 {
max-width: 597px;
max-height: 400px;
overflow-y: scroll
}
}
@media only screen and (max-width: 1040px) {
.mainmanu .level_0>a i,
.mainmanu .level_0 .icon_svg {
display: none !important
}
.mb_arrow {
display: block
}
.mainmanu>li.level_0 {
float: none;
line-height: 38px;
border-bottom: 1px solid rgba(255, 255, 255, 0.66)
}
.mainmanu .level_0>a {
display: block;
width: calc(100% - 70px);
color: #FFF;
padding: 2px 0px;
letter-spacing: normal
}
.mainmenu_wrapper {
position: absolute;
z-index: 1000;
top: 53px;
height: auto;
width: 100%;
background: rgba(1, 131, 191, 0.91);
box-shadow: #CCC 0px 5px 8px -2px;
display: none;
border-top: 1px solid #ffffffad
}
.wrapper_children_level_0 {
width: 100% !important;
padding: 10px;
position: relative;
display: none;
opacity: 1 !important;
visibility: visible !important
}
.wrapper_children_sub_level_0 li.level_2 {
width: 50%
}
.mainmanu #menu_col_0 {
width: 100%
}
.mainmanu #menu_col_1 {
float: right;
width: 100%
}
.sb-submenu li {
float: left;
width: 50%;
box-sizing: border-box
}
.sb-submenu li:nth-child(odd) {
padding-right: 5px
}
.sb-submenu li:nth-child(even) {
padding-left: 5px
}
.mainmanu #menu_col_0 .field_item {
width: 50%
}
.mainmanu #menu_col_1 .field_item {
float: left;
width: 50%
}
.wrapper_children_level_0 ul::after {
content: '';
display: block;
clear: both
}
}
/*# sourceMappingURL=default.css.map */
.breadcrumbs_wrapper {}
.breadcrumb {
padding: 12px 0 12px 0;
}
.breadcrumb::after {
display: block;
clear: both;
content: " "
}
.breadcrumb__item {
display: inline-block;
margin-right: 20px;
list-style: none;
color: #131518;
position: relative;
}
.breadcrumb__item a {
color: #999999;
text-decoration: none;
}
.breadcrumb__item a:hover {
color: #000;
}
.breadcrumb__item::after {
display: block;
width: 14px;
height: 15px;
color: #b6af96;
content: "›";
position: absolute;
top: 0;
right: -22px;
}
.breadcrumb__item:last-child a {
color: #5a5a5a;
}
.breadcrumb__item:last-child::after {
content: "" !important;
display: none;
}
@media screen and (max-width:400px) {
.breadcrumb__item {
font-size: 13px;
}
}
@media screen and (max-width:360px) {
.breadcrumb__item {
font-size: 12px;
}
}
ul.menu-bottom li.level0 {
float: left;
width: 50%;
padding-right: 25px;
box-sizing: border-box
}
ul.menu-bottom li.level0>a,
ul.menu-bottom li.level0>span {
text-transform: uppercase;
margin-bottom: 17px;
font-size: 17px;
color: #FFF;
display: block
}
ul.menu-bottom li.level0 ul {
margin-top: 4px
}
ul.menu-bottom li.level0 ul li {
margin-bottom: 12px
}
ul.menu-bottom li.level0 ul li a {
color: #CCCCCC
}
ul.menu-bottom li.level0 ul li a:hover {
color: #FFF
}
ul li.level1 a:hover,
ul li.level1 span:hover {
color: #0066b2
}
ul.menu-bottom li.level0 span.click-mobile {
background: transparent url("https://fonesmart.com.vn/blocks/mainmenu/assets/images/icon-click.png") no-repeat scroll center;
position: absolute;
cursor: pointer;
padding: 0;
right: 8px;
top: 11px;
display: none;
content: '';
width: 15px;
height: 15px;
z-index: 12
}
ul.menu-bottom li.level0 span.click-mobile.active {
background: transparent url("https://fonesmart.com.vn/blocks/mainmenu/assets/images/icon-click-active.png") no-repeat scroll center
}
.menu-bottom ul li.mid-sitem>span i {
background-position: 0px -92px;
content: ' ';
height: 36px;
display: block;
margin-top: 11px;
padding-top: 12px;
width: 131px
}
@media screen and (max-width: 768px) {
ul.menu-bottom li.level0 {
float: left;
width: 100%;
border: 1px solid #e3e3e3;
margin-bottom: 10px;
position: relative
}
ul.menu-bottom li.level0 span.click-mobile {
display: block
}
ul.menu-bottom li.level0>a,
ul.menu-bottom li.level0>span {
display: block;
padding: 8px;
margin-bottom: 0
}
ul.menu-bottom li.level0 ul {
display: none
}
ul li.level1 {
border-top: 1px solid #5d5a5a;
padding: 8px 0px 7px 0px;
margin-left: 22px
}
ul.menu-bottom li.level0 ul li {
margin-bottom: 8px
}
ul li.level1.first-sitem,
ul li.level1:first-child {
border-top: 0
}
}
/*# sourceMappingURL=bottommenu.css.map */
#newsletter_form input {
border: none;
height: 40px;
background: #414141;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
box-sizing: border-box;
color: #CCC
}
#newsletter_form button {
height: 40px;
padding: 0 20px;
background: var(--main-color);
border: none;
color: #FFF;
text-transform: uppercase;
margin-bottom: 14px
}
.price_old {
font-size: 22px;
font-weight: normal;
color: #555;
margin-left: 15px;
text-decoration: line-through;
}
.csbh {
margin-top: 10px;
}
.csbh a {
color: blue;
}
/*# sourceMappingURL=newsletter.css.map */