@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url(jquery.mCustomScrollbar.css);
@import url(owl.carousel.min.css);
@import url(jquery.fancybox.min.css);

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    border: none;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

::selection {
    color: #fff;
    background: #333
}

::-moz-selection {
    color: #fff;
    background: #333
}

::placeholder {
    color: #aaa;
    font-size: 16px;
    font-weight: 300;
    opacity: 1; 
}

:-ms-input-placeholder {
    color: #aaa;
    font-size: 16px;
    font-weight: 300
}

::-ms-input-placeholder {
    color: #aaa;
    font-size: 16px;
    font-weight: 300
}

body {
    --color-orange:  #f89939;
    --color-orange-deep:  #ee5123;
    --color-blue:  #21409a;
    --color-red: #d02027;
    --color-red-drop: #d13a44;
    --color-green: #00a651;
    --color-black: #283845;
    --color-white: #fff;
    --color-white-drop: rgb(255, 255, 255, 0.5);
    --color-333: #333;
     --color-444: #444;
    --color-555: #555;
    --color-aaa: #aaa;
    --color-666: #666;
    --color-777: #777;
    --color-888: #888;
    --color-999: #999;
    --color-f0f0f0: #f0f0f0;
    --color-fcfcfc: #fcfcfc;
    --color-f5f5f5: #f5f5f5;
    --color-f3f3f3:  #f3f3f3;
    --color-f9f9f9: #f9f9f9;
    --color-border: #e5e5e5;
    --color-footer: #294766;
    --color-dddddd: #ddd;
    --color-eee: #eee;
    --color-ccc:#ccc;
    --color-e5e5e5: #e5e5e5;
    --color-e9e9e9: #e9e9e9;
    --color-line-gray: #ededed;
    --color-gray-mini: #adb4bb;
    
    font-family: 'Sarabun', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-444);
    line-height: 1.6;
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden
}
a,
a:active,
a:focus,
a:hover,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent
}

input {
    font-family: 'Sarabun', Arial, Helvetica, sans-serif;
    color: var(--color-black);
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

input[type=email],
input[type=password],
input[type=text],
select,
textarea {
    height: 44px;
    padding: 10px;
    border: 1px solid var(--color-eee);
    background: var(--color-eee);
    border-radius: 4px; 
}

input[type=email]:focus,
input[type=password]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
    border: 1px solid var(--color-red)
}

button {
    width: 100%;
    font-family:  'Sarabun', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-red);
    cursor: pointer;
    transition: all .3s ease;
    border-radius: 90px
}

button:hover {
   /* box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);*/
    transition: all .3s ease;
    background: var(--color-red-drop);
}

option,
select,
textarea {
    font-family:  'Sarabun', Arial, Helvetica, sans-serif;
    color: var(--color-555);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

select {
    height: 44px;
    padding: 6px 18px 6px 10px;
    font-size: 18px;
    border-radius: 4px;
    background: var(--color-white) url(../images/icon-select.svg) no-repeat right center !important;
    background-size: 20px !important
}

select option {
    font-size: 17px;
    line-height: 1;
    padding-bottom: 0
}

select option:hover {
    border: none
}

textarea {
    width: 100%;
    font-size: 17px
}

[type=file] {
    position: absolute;
    opacity: 0;
    width: 100%;
    left: 0;
    top: 0
}

[type=file]+label {
    display: block;
    position: relative;
    width: 100%;
    height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 11px 10px 8px 10px;
    margin: 0;
    left: 0;
    text-align: left;
    border: 1px solid var(--color-e5e);
    top: 0;
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    transition: all .3s ease
}

[type=file]+label:hover {
    border: 1px solid var(--color-orange-deep);
    transition: all .3s ease
}

,
a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
tfoot,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

:focus {
    outline: 0
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

body,
html {
    height: 100%
}

a {
    display: block;
    color: var(--color-444);
    transition: all .3s ease;
    user-select: none
}

a:hover {
    color: var(--color-red)
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: all .3s ease
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 600
}

h1 {
    font-size: 36px;
}

h1 span {
    font-weight: 400
}

h2 {
    font-size: 36px
}

h2 span {
    font-weight: 400
}

h3 {
    font-size: 24px
}

h3 span {
    font-weight: 400
}

h4 {
    font-size: 20px
}

h4 span {
    font-weight: 400
}

h5 {
    font-size: 18px
}

h5 span {
    font-weight: 400
}

h6 {
    font-size: 16px
}

h6 span {
    font-weight: 400
}

p {
    margin-bottom: 16px
}

small {
    font-size: 14px;
    color: var(--color-aaa)
}

b,
strong {
    font-weight: 700
}

section {
    position: relative;
    width: 100%;
    padding: 100px 0
}

figure {
    position: relative
}

time {
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-dddddd);
    z-index: 1
}

label {
    display: inline-flex;
    padding-bottom: 5px
}


.container {
    position: relative;
    width: 100%;
    overflow-x: hidden
}

.warpper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1240px;
    height: inherit;
    padding: 0 20px
}
.warpper-1170 {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
    height: inherit;
    padding: 0 
}

.warpper-960 {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    height: inherit;
    padding: 0 
}

.header-less {
    height: 134px !important;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, .1) !important;
    transition: all .2s ease !important
}


.header-fixed {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
   height: 120px;
    padding:  0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 -2px 5px 0 transparent;
    /*border-bottom: 4px solid #808285;*/
    overflow: inherit;
    z-index: 9999;
    transition: all .2s ease;
/*    border-bottom: 1px solid var(--color-efefef);*/
}

.header-fixed .top-zone { position: relative; z-index: 1; width: 100%; height: 60px; background: var(--color-orange); }
.header-fixed .top-zone aside { display: flex; flex-wrap: wrap; margin-left: auto; }
.header-fixed .top-bar { width: 100%; height: 100%; }

.header-fixed .warpper {
    padding-top: 0;
    padding-bottom: 0
}
.header-less .logo {  width: 60px !important;  transition: all .2s ease;}

.header-fixed .box-logo-slocan-con { display:flex; flex-wrap:wrap; width: 100%; height:100% ; align-items: center;}
.header-fixed .logo {
    display: flex;
    width: 120px;
    padding: 0;
    z-index: 9;  transition: all .2s ease;
}
.header-fixed .box-logo-slocan-con .slocan { text-align: center; margin:auto; width: 100%; max-width:480px; }
.header-fixed .box-logo-slocan-con .slocan h1 { font-size:30px; margin:0; padding: 0 }
.header-fixed .box-logo-slocan-con .contact-top { font-family:Inter; line-height:1.2; margin-top:auto; margin-bottom:auto; font-weight:400 }
.header-fixed .box-logo-slocan-con .contact-top .phone,.header-fixed .box-logo-slocan-con .contact-top .line { display:flex; flex-wrap:wrap; align-items:center; margin:8px 0; }
.header-fixed .box-logo-slocan-con .contact-top .phone a:nth-child(3),.header-fixed .box-logo-slocan-con .contact-top .phone a:nth-child(4),.header-fixed .box-logo-slocan-con .contact-top .phone a:nth-child(5) { display:none; }
.header-fixed .box-logo-slocan-con .contact-top i { display:inline-block; width: 40px; height: 40px; border-radius:50%; margin-right:10px; }
.header-fixed .box-logo-slocan-con .contact-top i.icon-phone { background:var(--color-red) url(../images/icon-phone-white.svg) no-repeat center; background-size:60%; }
.header-fixed .box-logo-slocan-con .contact-top i.icon-line { background:#00b900 url(../images/icon-line@-white.svg) no-repeat center; background-size:80%; }

.header-fixed .logo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

.header-fixed .logo figure {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: all .2s ease
}

.header-fixed .logo figure:before {
    display: none
}

.header-fixed .logo img {
    position: relative;
    width: 100%;
    height: initial;
    transition: all .2s ease
}

.header-fixed .logo span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px
}

.header-fixed nav {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 8
}

.header-fixed nav ul {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 -20px
}

.header-fixed nav li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    padding: 0 20px;
    text-align: center
}


.header-fixed nav li a {
    position: relative;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    color: var(--color-444);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2
}

.header-fixed nav li a:hover {
    color: var(--color-red)
}

.header-all { background: var(--color-f9f9f9); }
.header-less nav li a,.header-all nav li a { color:var(--color-black); }

/*.header-fixed nav li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--color-blue);
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    transition: all .6s cubic-bezier(.45,0,.55,1);
    opacity: 0
}

.header-fixed nav li a:hover:after {
    width: 100%;
    opacity: 1;
    transition: all .10s cubic-bezier(.45,0,.55,1);
}
*/
.header-fixed nav li a.current {
    color: var(--color-red)
}

/*.header-fixed nav li a.current:after {
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    background: var(--color-orange);
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
     width: 100%;
    opacity: 1;
    transition: all .10s cubic-bezier(.45,0,.55,1); z-index: 1;
}
*/
.header-fixed nav li a span {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%
}

/*.header-fixed nav li a span:before {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    left: 0;
    bottom: 0;
    margin-top: auto;
    background: var(--color-orange);
    transition: all .3s ease
}
*/
.header-fixed nav li a.current span:before {
    width: 100%;
    transition: all .3s ease
}

.header-fixed nav li span {
    position: relative;
    width: 100%;
    vertical-align: middle;
    z-index: 1
}
.header-fixed nav li dt {
    display: none;
}
.header-fixed nav li:hover>dl {
    visibility: visible;
    opacity: 1;
    transition: all .3s ease
}
.header-fixed nav li:hover>dl dt {  display: block; }
/*.header-fixed nav li:not(:hover) >dl { opacity: 0; display: none; }*/
.header-fixed nav li:hover>a:after {
    width: 100%;
    opacity: 1;
    transition: all .2s ease
}

/*.header-fixed nav li:hover>a {
    color: var(--color-red)
}
*/
.header-fixed .onsubmenu:hover > .submenu {  visibility: visible; opacity:1 ; transition: all .3s ease }

.submenu { visibility: hidden; opacity: 0; position:absolute; width: 100%; left: 0; padding: 0 20px; top: 100%; z-index:0 }
.submenu .box { border-top: 1px solid var(--color-orange); width: 100%; background: var(--color-white);  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1) ; }
/*.header-less .submenu .box { border-top: 1px solid var(--color-orange);}*/
.submenu .box ol { display:flex; flex-wrap:wrap; margin:0; }
.submenu .box ol li { display: block; width: 50% !important; height: inherit !important; position:relative; padding: 40px 50px !important; margin: 0 !important; text-align: left; border-right:1px solid var(--color-line-gray); border-bottom:1px solid var(--color-line-gray);}
.submenu .box ol li:nth-child(even) { border-right:none; }
.submenu .text-cat { display: block; padding-bottom: 20px; color:var(--color-999); font-size:18px; font-weight: 400; text-transform:uppercase; }
.submenu p { font-size:16px; font-weight: 600; margin-bottom:6px }
.submenu p span { display: inline-block !important; width: inherit !important; font-size:14px; font-weight:400 }
.submenu p a { display:inline-block !important; color:var(--color-black) !important; text-transform:inherit !important; }
.submenu p a:hover { color:var(--color-orange) !important; }

.header-fixed nav ul dl {
    visibility: visible;
    opacity: 1;
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    top: 100%;
    left: 0;
    background: var(--color-white);
    /*box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);*/
    border-radius: 0;
    transition: all .3s ease;
    z-index: 999
}

/*.header-fixed nav ul dl:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--color-blue);
    left: 0;
    top: 0
}*/

.header-fixed nav ul dl dt {
    position: relative;
    width: 100%;
    height: inherit;
    padding: 0;
    text-align: left
}

.header-fixed nav ul dl a {
    position: relative;
    height: inherit;
    padding: 20px 20px 20px 50px;
    text-transform: inherit !important;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    background: 0 0
}
.header-fixed nav ul dl dt:last-child a { border-bottom: none; }

.header-fixed nav ul dl a:after {
    display: none
}

.header-fixed nav ul dl a:hover:before {
    background: var(--color-blue);
    transition: all .3s ease
}


.header-fixed nav ul dl a:hover {
    color: var(--color-white) !important;
    background: var(--color-orange);
}

.header-fixed nav ul dl a.current:before {
    background: var(--color-orange);
    transition: all .3s ease
}

.header-fixed nav ul dl dt i { position: absolute; width: 30px; height: 30px; border-radius: 50%; left: 12px; top: 0; bottom: 0; margin: auto 0 auto auto; transition: all .3s ease;  }
.header-fixed nav ul dl dt i:after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: url(../images/icon-arrow-next-white.svg) no-repeat; background-position: center center; background-size: 50%; left: 0; top: 0; bottom: 0; right: 0; margin: auto;  }
.header-fixed nav ul dl dt i:before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;/* background: var(--color-orange);*/ left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform: scale(1); transition: all .6s cubic-bezier(0.47, 1.64, 0.41, 0.8); }
.header-fixed nav ul dl dt a:hover i { left: 20px; transition: all .3s ease; }
.header-fixed nav ul dl dt a.current { background: var(--color-orange); color: var(--color-white); }

.header-fixed nav ul dl figure {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-golddrop)
}

.header-fixed nav ul dl figure:before {
    display: none
}

.box-menu-search-social { display:flex; flex-wrap: wrap; width: 100%; height: 50px; margin: 0 auto; align-items: center; background:var(--color-e9e9e9); }

.box-menu-search-social i {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    border-radius: 50%;
   /* transition: .2s;*/
}

.header-fixed aside {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    width: auto;
    align-items: center
}

.header-fixed aside .btn-book {
}

.header-fixed aside .btn-book a {
    height: 40px;
    padding: 5px 30px 7px 30px;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-555);
    font-weight: 500;
    border-radius: 90px;
}

.header-fixed aside .btn-book a:hover {
    background: var(--color-orange-deep);
    color: var(--color-white)
}
.header-fixed aside .btn-book i { position: relative; width: 30px; height: 30px; margin-left: 10px; border-radius: 50%; opacity: 1 !important; }
.header-fixed aside .btn-book i:after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: url(../images/icon-arrow-next-sky.svg) no-repeat; background-position: center center; background-size: 50%; left: 0; top: 0; bottom: 0; right: 0; margin: auto;  }
.header-fixed aside .btn-book i:before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform: scale(1); transition: all .6s cubic-bezier(0.47, 1.64, 0.41, 0.8); }
.header-fixed aside .btn-book a:hover i:before {  transform: scale(1.5); transition: all .6s cubic-bezier(0.47, 1.64, 0.41, 0.8); }

.header-fixed aside ul {
    display: flex;
    flex-wrap: wrap; padding-right: 30px;
}

.header-fixed aside ul li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 5px;
    font-weight: 500
}
.header-fixed aside ul li:first-child { font-size: 18px; font-weight: 300; padding-right: 15px; }
.header-fixed aside ul li a { color: var(--color-white); }
.header-fixed aside .social-line { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); }
.header-fixed aside .social-line:hover { border: 1px solid rgba(255, 255, 255, 1.0); }
.header-fixed aside .social-facebook { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); }
.header-fixed aside .social-facebook:hover { border: 1px solid rgba(255, 255, 255, 1.0); }


.header-fixed aside i {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    text-indent: -9999px;
    border-radius: 50%;
    transition: all .2s ease
}

.header-fixed aside a {
    display: flex;
    align-items: center;
    position: relative
}

.header-fixed aside a:hover i {
    transition: all .2s ease
}

.header-fixed .social span {
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    z-index: 1
}


.header-fixed .top-search { padding: 0 10px;  }
.header-fixed .top-search .icon-search { position: relative; display: block; height: 40px; width: 40px; overflow: hidden; cursor: pointer; text-indent: -9999px; }


.header-fixed aside .social-sum { cursor: pointer; }
.header-fixed aside .show-top-social:hover > .top-social { visibility: visible; opacity: 1; transition: all 0.2s ease; }

.header-fixed aside .top-social { visibility: hidden; opacity: 0; position: absolute; width: 60px; top: 100%; left: -50%; right: -50%; margin-left: auto; margin-right: auto; padding: 8px 5px; z-index: 1;  background: var(--color-e5e); border-radius: 30px; transition: all 0.2s ease; }
.header-fixed aside .top-social:after { content:""; position: absolute; width: 0; height: 0;  bottom: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; border: solid transparent; pointer-events: none; border-bottom-color: var(--color-e5e); border-width: 5px; }

.header-fixed aside .top-social .icon-link { padding: 3px 0; }
.header-fixed aside .top-social a { position: relative; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; text-indent: -999px; border-radius: 50%; margin: 0 auto; overflow: hidden; }

.icon-fb a { background: url(../images/icon-facebook-white.svg) no-repeat center; background-size: 70%; }
.icon-fb a:hover { background: url(../images/icon-facebook-white.svg) no-repeat center; background-size: 70%; }
.icon-yt a { background: var(--color-blue) url(../images/icon-youtube-white.svg) no-repeat center; background-size: 70%; }
.icon-yt a:hover { background: #fe0000 url(../images/icon-youtube-white.svg) no-repeat center; background-size: 70%; }
.icon-tw a { background: var(--color-blue) url(../images/icon-twitter-white.svg) no-repeat center; background-size: 70%; }
.icon-tw a:hover { background: #1da1f3 url(../images/icon-twitter-white.svg) no-repeat center; background-size: 70%; }
.icon-line a { background: var(--color-blue) url(../images/icon-line-white.svg) no-repeat center; background-size: 70%; }
.icon-line a:hover { background: #00b900 url(../images/icon-line-white.svg) no-repeat center; background-size: 70%; }

.header-fixed .icon-phone {
    background-image: url(../images/icon-phone-white.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}

.header-fixed .icon-line {
    background-image: url(../images/icon-line-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-instagram {
    background-image: url(../images/icon-instagram-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-facebook {
    background-image: url(../images/icon-facebook-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-less .icon-facebook,.header-all .icon-facebook {
    background-image: url(../images/icon-facebook-black.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-twitter {
    background-image: url(../images/icon-twitter-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-tiktok {
    background-image: url(../images/icon-tiktok-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-youtube {
    background-image: url(../images/icon-youtube-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.header-fixed .icon-search {
    background-image: url(../images/icon-search-white.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center
}

.header-less .icon-search,.header-all .icon-search {
    background-image: url(../images/icon-search-black.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center
}

.header-fixed .icon-social {
    background-image: url(../images/icon-social.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}


.header-full {
    background: #fff !important
}

.header-full nav li a {
    position: relative;
    display: table-cell;
    height: 100%;
    color: #333 !important;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    vertical-align: middle
}

.header-full li a:hover {
    color: #0089eb !important
}

.header-full li a.current {
    color: #0089eb !important
}

.header-full nav li a span:before {
    opacity: 0 !important;
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    right: 0;
    bottom: -10px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    background: #1b1464;
    transition: all .3s ease
}

.open-nav {
    opacity: 1;
    visibility: visible;
    right: 0 !important;
    transition-timing-function: cubic-bezier(.76, .22, .38, .9);
    transition-duration: .5s;
    webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.show-nav {
    right: 0 !important;
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}

.list-nav {
    display: none;
    float: left;
    position: relative;
    width: 115px;
    height: 50px;
    margin-left: 5px;
    text-align: center;
    text-transform: uppercase;
    background: #fff
}

.list-nav a {
    display: inline-table;
    position: relative;
    width: 100%;
    height: 100%;
    color: #333;
    padding: 6px 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer
}

.current-nav {
    background: #333
}

.current-nav a {
    color: #fff
}

.current-nav .menu-icon::before {
    background: var(--color-black)
}

.nav {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;
    height: 40px;;
    overflow: hidden;
    cursor: pointer; margin-left: 15px; 
}

.nav .menu {  position: relative; display: flex; align-items: center; }

/*.nav:hover .menu-icon { background: var(--color-orange);  }*/
.nav:hover .menu-icon.is-clicked { background: var(--color-white); transition: all 0s ease;  }
.nav:hover .menu-icon::before, .nav:hover .menu-icon::after { background: var(--color-red);  transition: all 0.3s ease; }

.less-nav .nav-mobile:before {
    height: 100px !important;
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}

.menu-icon {
    position: relative;
   display: flex;
    right: 0;
    width: 30px;
    height: 2px;
background: var(--color-444);
    transition: all .3s ease;
    text-indent: -99999px;
}

.menu-icon::after,
.menu-icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--color-444);
    right: 0;
    -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
    transition: all .3s ease
}
.menu-icon::before {
    top: -8px
}

.menu-icon::after {
    top: 8px
}

.menu-icon.is-clicked {
    background: rgb(235, 0, 139, 0);
    background: linear-gradient(220deg, rgba(235, 0, 139, 0) 0, rgba(243, 113, 37, 0) 0)
}

.menu-icon.is-clicked::before {
    background: var(--color-red);
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu-icon.is-clicked::after {
    background: var(--color-red);
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

/*.header-less .menu-icon::before,.header-less .menu-icon::after,.header-all .menu-icon::before,.header-all .menu-icon::after { background:var(--color-444); }*/

.menu-text {
    position: relative;
    margin-right: auto; 
    padding-right: 10px;
    color: var(--color-black);
    font-size: 20px; text-transform: uppercase; font-weight: 600;
}

.gray-menu .menu-icon.is-clicked::after,
.gray-menu .menu-icon.is-clicked::before {
    background: var(--color-black)
}

.nav-overay {
    opacity: 0;
    visibility: hidden
}

.nav-overay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 888;
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease
}

.active-nav-overay {
    opacity: 1;
    visibility: visible;
    transition: all .4s ease
}

.nav-mobile {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 100px 0 0 0;
    margin: 0;
    right: -100%;
    top: 0;
    overflow: hidden;
    z-index: 999;
    background: var(--color-444);
    -webkit-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -moz-transition: all .8s cubic-bezier(1, .1, .2, 1);
    -o-transition: all .8s cubic-bezier(1, .1, .2, 1);
    transition: all .8s cubic-bezier(1, .1, .2, 1)
}

.nav-mobile .warpper {
    display: block;
    padding-top: 0;
    padding-bottom: 0
}

.nav-mobile aside {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    overflow: auto
}

.nav-mobile aside nav ul li {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .2)
}

.nav-mobile aside nav ul li .expend-sub span {
    display: inherit;
    padding: 0;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600; user-select: none;
    text-transform: uppercase; cursor: pointer; transition: all 0.3s ease;
}



.nav-mobile aside nav ul li:last-child {
    border-bottom: none;
}

.nav-mobile aside nav ul li>a {
    display: inherit;
    padding: 0;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase
}


.nav-mobile aside nav ul li>a:hover,.nav-mobile aside nav ul li .expend-sub span:hover { color: var(--color-red);  transition: all 0.3s ease;}
.nav-mobile aside nav ul li>a.current,.nav-mobile aside nav ul li .current span { color:var(--color-ccc); }

.nav-mobile .m-btn-book { display: none; }

.nav-mobile-fix {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden
}

.mCSB_buttonUp {
    display: none !important
}

.mCSB_buttonDown {
    display: none !important
}

.mCSB_scrollTools a+.mCSB_draggerContainer {
    margin: 0
}

.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
    background-color: rgba(255, 255, 255, 0)
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, .2)
}

.nav-mobile aside .toggle-subnav {
    display: none;
    padding: 0 0 10px 15px
}

.nav-mobile aside .toggle-subnav dt:first-child {
    margin-top: 5px
}

.nav-mobile aside .toggle-subnav dt { position: relative;
    padding: 5px 0
}

.nav-mobile aside .toggle-subnav a {
    position: relative;
    display: block;
    text-transform: inherit;
    color: var(--color-white);
    font-size: 16px;

}
.nav-mobile aside .toggle-subnav a:before { content: ''; position: absolute; width: 10px; height: 10px; left: -15px; top: 5px; bottom: 0;  background: url(../images/icon-next-orange.svg) no-repeat center; background-size: 80%; }

.nav-mobile aside .toggle-subnav span {
    position: relative;
    width: 100%
}

.nav-mobile aside .toggle-subnav p { position:relative; margin-bottom:5px; padding-left:15px; }
.nav-mobile aside .toggle-subnav p a span { font-size: 14px; font-weight:300 }
.nav-mobile aside .text-cat { color:var(--color-orange); line-height: 1.1; font-weight: 600; font-size: 20px; padding-bottom: 10px; text-transform:uppercase; }
.nav-mobile aside .toggle-subnav p a:hover { color:var(--color-orange); }

.nav-mobile aside small {
    color: var(--color-white-drop)
}

.nav-mobile .book-lang {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 10px
}

.nav-mobile .book-lang .btn-book {
    position: relative;
    flex: 1;
    padding-right: 20px
}

.nav-mobile .book-lang .btn-book a {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 10px 15px;
    color: var(--color-red);
    text-transform: uppercase;
    font-weight: 500;
    background: var(--color-white);
    border-radius: 4px;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%)
}

.nav-mobile .book-lang .btn-lang {
    width: 44px;
    height: 44px
}

.nav-mobile .book-lang .btn-lang .show-top-lang {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: relative;
    align-content: center;
    border-radius: 4px;
    border: 1px solid var(--color-minigreen);
    transition: all .3s ease
}

.nav-mobile .book-lang .btn-lang ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.nav-mobile .book-lang .btn-lang ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: max-content;
    margin-left: 7px
}

.nav-mobile .book-lang .btn-lang a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: 'Inter';
    font-size: 14px;
    color: var(--color-black);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2
}

.nav-mobile .book-lang .btn-lang a:hover {
    color: var(--color-green)
}

.nav-mobile .book-lang .btn-lang .btn-lang {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 7px 0;
    font-family: 'Inter';
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
    color: var(--color-white)
}

.nav-mobile .book-lang .btn-lang .btn-lang:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-dropgreen);
    z-index: 1;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto
}

.nav-mobile .book-lang .top-lang {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 40px;
    margin-top: 5px;
    top: 100%;
    left: -50%;
    right: -50%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    z-index: 1;
    background: var(--color-white);
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
    border-radius: 4px;
    transition: all .3s ease
}

.nav-mobile .book-lang .top-lang .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 0
}

.nav-mobile .book-lang .top-lang a {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding-left: 1px;
    font-size: 14px;
    color: var(--color-black)
}

.nav-mobile .book-lang .top-lang a:hover {
    color: var(--color-orange)
}

.nav-mobile .book-lang .top-lang .box:first-child {
    border-bottom: 1px solid var(--color-e5e)
}

.nav-mobile .book-lang .show-top-lang:hover>.top-lang {
    visibility: visible;
    opacity: 1;
    transition: all .2s ease
}

.nav-mobile .m-phone {
    text-align: left;
    color: var(--color-white)
}

.nav-mobile .m-phone ul {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0
}

.nav-mobile .m-phone li {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0;
    border: none
}

.nav-mobile .m-phone h4 {
    margin: 0
}

.nav-mobile .m-phone a {
    font-family: 'Inter';
    font-size: 18px;
    font-weight: 400;
    color: var(--color-white)
}

.nav-mobile .m-phone a:hover {
    color: var(--color-white)
}

.nav-mobile .follow {
    position: relative;
    padding: 15px 0;
    color: var(--color-white)
}

.nav-mobile .follow ul {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    margin: 0 -5px
}

.nav-mobile .follow li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 5px;
    border: none
}

.nav-mobile .follow i {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    background-color: var(--color-757575);
    border-radius: 50%;
    transition: all .2s ease
}

.nav-mobile .icon-line {
    background-image: url(../images/icon-line-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.nav-mobile .icon-instagram {
    background-image: url(../images/icon-instagram-color.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}

.nav-mobile .icon-facebook {
    background-image: url(../images/icon-facebook-white.svg);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center
}

.nav-mobile .icon-twitter {
    background-image: url(../images/icon-twitter-color.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center
}

.nav-mobile .icon-tiktok {
    background-image: url(../images/icon-tiktok-color.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}

.nav-mobile .icon-youtube {
    background-image: url(../images/icon-youtube-color.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center
}

.nav-mobile .follow small {
    font-style: normal
}

.subplus {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0;
    top: 15px;
    background: url(../images/icon-arrow-down.svg) no-repeat center;
    background-size: 100%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    transition: all .3s ease
}

.subplus-rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: all .3s ease
}

.nav-mobile .break {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid
}

.toggle--sub .pc-nonexpend {
    display: block
}

.toggle--sub .mobile-expend {
    display: none
}
.toggle--sub .current { color: var(--color-orange) !important; }


.header-fixed .call-lang {
    position: absolute;
    top: 15px;
    right: 65px;
    display: flex;
    flex-wrap: wrap;
    z-index: 99999;
    transition: all .2s ease
}

.header-fixed .call {
    position: relative
}

.header-fixed .call:before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: -2px;
    left: -25px;
    background: url(../images/icon-phone-2.svg) no-repeat center;
    background-size: 60%;
    border-radius: 50%;
    border: 1px solid var(--color-green)
}

.header-fixed .call ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.header-fixed .call ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: max-content;
    padding: 0 8px;
    border-left: 1px solid #9aafb2
}

.header-fixed .call ul li:first-child {
    border-left: 0
}

.header-fixed .call ul li a {
    font-family: 'Inter';
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 15px;
    color: var(--color-green)
}

.header-fixed .lang {
    position: relative;
    margin-left: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all .3s ease
}

.header-fixed .lang .show-top-lang {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: relative;
    align-content: center
}

.header-fixed .lang ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.header-fixed .lang ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: max-content;
    margin-left: 7px
}

.header-fixed .lang a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: 'Inter';
    font-size: 14px;
    color: var(--color-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.header-fixed .lang a:hover {
 
    border: 1px solid rgba(255, 255, 255, 1);
}

.header-fixed .lang .btn-lang {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    font-family: 'Inter';
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
}

.header-fixed .top-lang .box { display: flex; align-items: center; justify-content: center; width: 100%; padding: 4px 0}

.nav-mobile .contact-top {  font-family:Inter; line-height:1.4; margin-top:30px; margin-bottom:auto; font-weight:400 }
.nav-mobile .contact-top a { display: block; color:var(--color-white); }
.nav-mobile .contact-top .email { display:flex; flex-wrap:wrap; margin:8px 0; align-items:center;  }
.nav-mobile .contact-top .phone { display:flex; flex-wrap:wrap; margin:8px 0; }
.nav-mobile .contact-top .line {  display:flex; flex-wrap:wrap; margin:8px 0; align-items:center; }
.nav-mobile .contact-top i { display:inline-block; width: 40px; height: 40px; border-radius:50%; margin-right:10px; }
.nav-mobile .contact-top i.icon-phone { background:var(--color-white) url(../images/icon-phone-black.svg) no-repeat center; background-size:60%; }
.nav-mobile .contact-top i.icon-line { background:var(--color-white) url(../images/icon-line@-black.svg) no-repeat center; background-size:80%; }
.nav-mobile .contact-top i.icon-email { background:var(--color-white) url(../images/icon-email-black.svg) no-repeat center; background-size:60%; }


.first-section { padding-top: 176px}

.subject { width: 100%; text-align:center; }
.subject h2 { margin-top:0; color:var(--color-red); }
.subject p { font-size:20px; }

.motto { width: 100%; text-align:center; padding-bottom:20px; }
.motto h1 { color:var(--color-red); }
.motto h2 { color:var(--color-red); font-weight: 600; }
.motto p { margin-top:0; font-size:20px; }

.text-subject { margin-bottom:40px; padding-bottom:10px }
.text-subject:before { content:''; position:absolute; width: 1px; height: 30px; border-left:1px dashed var(--color-red-drop); left: 6px; top:100%; }
.text-subject:after { content:''; position:absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-red-drop); left: 2px; top:100%; }

.img-hover { position:relative; width: 100%; height: 100%; }
.img-hover:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.06); left: 0; bottom: 0; transform: scale(0); transition: all 0.4s ease; z-index: 1; }
a:hover .img-hover:before { transform: scale(1); transition: all 0.5s ease }

.mt-header { margin-top: 170px; }

.banner-home { position: relative;  padding: 0; width: 100%; /*background: var(--color-f5f5f5)*/}
.banner-home h1 { position: absolute; z-index: 1; top: -100px; color: var(--color-white);}
.banner-home .owl-theme .owl-dots .owl-dot span { width: 12px; height: 12px; background:var(--color-444);  }
.banner-home .owl-theme .owl-dots .owl-dot.active span { width: 40px; background: var(--color-red);}
.banner-home .owl-theme .owl-dots .owl-dot:hover span { background: var(--color-red); }
.banner-home .owl-theme .owl-nav.disabled+.owl-dots { bottom:-30px; }

.customNavigation span { position: absolute; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;opacity: 1;  box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); margin-top: auto; margin-bottom: auto; top: 0; bottom: 0; cursor: pointer; z-index: 1;}
.customNavigation .prev-owl-banner{ left: 0px; overflow: hidden; text-indent: -9999px; background: var(--color-white) url(../images/icon-arrow-left-black.svg) no-repeat center; background-size: 70%; border-radius: 50%; transition: all .3s ease}
.customNavigation .prev-owl-banner:hover{ background: var(--color-white) url(../images/icon-arrow-left-black.svg) no-repeat center;  background-size: 70%; border-radius: 50%; transition: all .3s ease}
.customNavigation .next-owl-banner{ right: 0px; overflow: hidden; text-indent: -9999px; background: var(--color-white) url(../images/icon-arrow-right-black.svg) no-repeat center; background-size: 70%; border-radius: 50%; transition: all .3s ease}
.customNavigation .next-owl-banner:hover { background: var(--color-white) url(../images/icon-arrow-right-black.svg) no-repeat center; background-size: 70%; border-radius: 50%; transition: all .3s ease}

.home-process {  }
.home-process .motto {  }
.home-process .lists { width: 100%; padding-top:30px; }
.home-process .lists ul { display:flex; flex-wrap:wrap; margin: -15px -30px; }
.home-process .lists li { position:relative; width: 25%; padding: 15px 30px; border-right:1px solid var(--color-dddddd); }
.home-process .lists li:last-child { border-right:none; }
.home-process .lists li p { margin-bottom:0 }
.home-process .lists li p span { display:block; position:relative; padding-left:5px; text-align:left; }
.home-process .lists li p span:before { content:''; position:absolute; width: 5px; height: 5px; background:var(--color-ccc); border-radius:50%; left: -8px; top: 8px; }
.home-process .box { position:relative; display:flex; flex-wrap:wrap; flex-direction:column;  align-items:center;  text-align: center;}
.home-process .box h3 { margin-top: 0; font-size:20px; color:var(--color-red); }
.home-process .icon { width: 120px; height: 120px; margin:0 auto; }
.home-process .icon figure { position: relative; width: 100%; height: 100%;  }
.home-process .icon img { object-fit: cover; position: relative; height: 100%; width: 100%;top: 0;  left: 0; margin: auto; }
.home-process .text { display:flex; flex-wrap:wrap; flex-direction:column;  align-items:center;  text-align: center; }
.home-process .foot-process { position: relative; width: 100%; text-align:center; }


.home-why { background:var(--color-red-drop);  }
.home-why h2 { color:var(--color-white); }
.home-why .lists { width: 100%; padding-top:30px; color:var(--color-white); }
.home-why .lists ul { display:flex; flex-wrap:wrap; margin: -15px -30px; }
.home-why .lists li { position:relative; width: 33.3333%; padding: 15px 30px; }
.home-why .box { position:relative; display:flex; flex-wrap:wrap; flex-direction:column;  align-items:center;  text-align: center;}
.home-why .box h3 { margin-top: 20px; font-size: 20px; font-weight:500 }
.home-why .icon { width: 106px; height: 106px; margin:0 auto; border-radius:50%; overflow:hidden; border:1px dashed rgba(255, 255, 255, .6); }
.home-why .icon figure { position: relative; width: 100%; height: 100%; padding: 14px; overflow: hidden; border: 4px solid var(--color-red-drop); background:var(--color-white); border-radius:50%;  }
.home-why .icon img { object-fit: cover; position: relative; height: 100%; width: 100%;top: 0;  left: 0; margin: auto; }


/* Cover */
.cover { position:relative; width: 100%; padding-bottom: 0; overflow: hidden; }
.cover .warpper { z-index: 3; align-items: center; height: 360px; }
.cover h1 { color:var(--color-white); margin-bottom:40px; margin-left:auto; margin-right:auto; }
.cover:after { content:''; position:absolute; width: 100%; height: 100%; background:rgba(0, 0, 0, .3); left: 0; top: 0; z-index:1 }
.cover .img-cover { position: absolute; width: 100%; height: 360px; bottom: 0; left: 0; overflow: hidden; }
.cover img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; margin: 0 auto; }

/*.subject-page { position:relative; display:flex; flex-wrap:wrap; align-items:center; width: 100%; }
.subject-page h1 { font-size:60px; margin-top:0 }
.navigation { position: relative; display: flex; flex-wrap: wrap; width: max-content; height: max-content; padding-top: 20px; padding-bottom: 30px; margin-left: auto; font-size: 14px; font-weight: 400}
.navigation:after { content:''; position:absolute; width: 14px; height:3px; background: var(--color-orange); top: 0; right:0; }
.navigation span { position: relative; padding-left: 30px; color: var(--color-gray-mini);  }
.navigation span:first-child { padding-left:0 }
.navigation span:first-child:after { display:none; }
.navigation span a { color: var(--color-gray-mini); min-width: 30px;
    max-width: 200px;
    vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.navigation span a:hover { color: var(--color-black); }
.navigation span:after { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-gray-mini); top: 50%; left: 10px; opacity: 0.6 }
.navigation i { margin-right: 5px; width: 20px; height: 20px; background: url(../images/icon-arrow-next-slim-blue-deep.svg) no-repeat center; background-size: 50%; }*/

.navigation { width: 100%; display: flex; flex-wrap: wrap; padding-bottom: 20px; color: var(--color-999); font-size: 14px; font-weight: 400; }
.navigation a { color: var(--color-999); }
.navigation a:hover { color: var(--color-444); }
.navigation span { position: relative; }
.navigation span:first-child { padding-right: 10px; }
.navigation span:nth-child(2) { padding-left: 30px; }
.navigation span:nth-child(2):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-dddddd); top: 50%; left: 0; }
.navigation span:nth-child(2):after { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-dddddd); top: 50%; left: 10px; }
.navigation span:nth-child(2) { text-transform: uppercase; }
.navigation span:nth-child(3) { padding-left: 30px; min-width: 30px;max-width: 300px; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation span:nth-child(3) a { min-width: 30px;max-width: 300px; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation span:nth-child(3):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-dddddd); top: 50%; left: 10px; }
.navigation span:nth-child(4) { padding-left: 30px; }
.navigation span:nth-child(4) a { min-width: 30px;max-width: 300px; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation span:nth-child(4):before { content: ''; position: absolute; width: 10px; height: 1px; background: var(--color-dddddd); top: 50%; left: 10px; }
.navigation .icon-home { display: inline-flex; width: 20px; height: 20px; background: url(../images/icon-home-v2.svg) no-repeat center; background-size: 100%; }


/*About Us*/
.aboutus { padding-top:0 }
.aboutus .motto { width: 100%; text-align:center; padding-bottom:20px; }
.aboutus .timeline { position:relative; width: 100%; }
.aboutus .timeline:before { content:''; position:absolute; width: 1px; height: 100%; border-left:2px dashed var(--color-red-drop); left:1px; right:0; margin: 0 auto; }
.aboutus .timeline ul { display:flex; flex-wrap:wrap; }
.aboutus .timeline li { display:flex; flex-wrap:wrap; width: 100%; margin-top:-80px; }
.aboutus .timeline li:first-child { padding-top:120px; }
.aboutus .timeline li:last-child { padding-bottom:60px; }
.aboutus .timeline li:nth-child(odd) .photo { margin-left:auto; padding-left:100px }
.aboutus .timeline li:nth-child(odd) .photo:before { left: 0; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; }
.aboutus .timeline li:nth-child(odd) .photo:after { left: -10px; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; }
.aboutus .timeline li:nth-child(odd) .year { left: 20px; }
.aboutus .timeline li:nth-child(even) .photo { margin-right:auto; padding-right:100px }
.aboutus .timeline li:nth-child(even) .photo:before { right: 0; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; }
.aboutus .timeline li:nth-child(even) .photo:after { right: -10px; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; }
.aboutus .timeline li:nth-child(even) .year { right:20px; }
.aboutus .timeline .photo { position:relative; width: 50%; }
.aboutus .timeline .photo:before { content:''; position:absolute; width: 100px; height: 1px; border-bottom:1px dashed var(--color-red-drop);  }
.aboutus .timeline .photo:after { content:''; position:absolute; width: 16px; height:16px; background:var(--color-white); border-radius:50%; border:2px solid var(--color-red-drop); }
.aboutus .timeline .photo .box { position:relative; padding: 20px; border-radius: 10px; border:1px dashed var(--color-red-drop); background:var(--color-white); }
.aboutus .timeline .photo .year { position:absolute; width: 90px; height: 36px; border-radius: 90px; font-weight: 600; color: var(--color-white); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: var(--color-red-drop); top: -20px; z-index:1 }
.aboutus .timeline .photo figure { position: relative; width: 100%; height: 0; padding: 30%; overflow: hidden; }
.aboutus .timeline .photo figure img { border-radius:7px; object-fit: cover; position: absolute; height: 100%; width: 100%;  top: 0; left: 0; margin: auto; }
.aboutus .dotted { position:absolute; width: 14px; height: 14px; border-radius:50%; background:var(--color-red-drop); top: 0; left: 0; right:0; margin-left:auto; margin-right:auto; }
.aboutus .arrow-down { position:absolute; display: flex; justify-content: center; width: 20px; height: 20px; background: var(--color-white) url(../images/arrow-down.svg) no-repeat center center; bottom: 0; left: 0; right:0; margin-left:auto; margin-right:auto; }
.aboutus .arrow-down span { position:absolute; margin: auto; width: 70px; display: flex; justify-content: center; align-items: center; bottom:-40px; font-weight:600; }

/*Products*/
.product-category { padding-top:0 }
.product-category h1 { color:var(--color-red); }
.product-category p { margin-top: 0; font-size:20px; }
.product-category .motto { width: 100%; text-align:center; }
.product-category .lists { position:relative; width: 100%; }
.product-category .lists ul { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap:30px; }
.product-category .lists li { text-align:center; }
.product-category .lists h3 { font-size:18px; margin-top:0; }

.product-why { padding-top:0  }
.product-why .lists { width: 100%; background:var(--color-f5f5f5); border-radius:10px; padding:30px; }
.product-why .lists ul { display:flex; flex-wrap:wrap; margin: -15px; }
.product-why .lists li { position:relative; width: 25%; padding: 15px ; }
.product-why .lists li p { margin-bottom:0 }
.product-why .lists li p span { display:block; position:relative; padding-left:5px; text-align:left; }
.product-why .lists li p span:before { content:''; position:absolute; width: 5px; height: 5px; background:var(--color-ccc); border-radius:50%; left: -8px; top: 8px; }

.product-why .box { position:relative; display:flex; flex-wrap:wrap; }
.product-why .box h3 { margin-top: 20px; margin-bottom: 10px; font-size:20px; color:var(--color-red); }
.product-why .text { flex:1; padding-left:10px; }
.product-why figure { position: relative; width: 80px; height: 80px;  }
.product-why img { object-fit: cover; position: relative; height: 100%; width: 100%;top: 0;  left: 0; margin: auto; }


/*BAG Material*/
.bag-material { padding-top:0 }
.bag-material .motto { width: 100%; text-align:center; }
.bag-material .lists { position:relative; width: 100%; padding-top:30px; }
.bag-material .lists ul { display:flex; flex-wrap:wrap; margin:-20px 0; }
.bag-material .lists li { position:relative; width: 100%; display:flex; flex-wrap:wrap; padding:20px 0 ; border-bottom:1px dashed var(--color-dddddd); }
.bag-material .lists li:nth-child(even) .photo { order:2 }
.bag-material .lists li:nth-child(even) .text { order:1 } 
.bag-material .lists li:last-child { border-bottom:none; }
.bag-material .box { position:relative; display:flex; flex-wrap:wrap; margin:0 -30px; padding: 20px 0 }
.bag-material .photo { width: 50%; padding: 0 30px; }
.bag-material .text { width: 50%; padding: 0 30px; }
.bag-material .text h3 { margin-bottom:40px; padding-bottom:5px }
.bag-material .text h3:before { content:''; position:absolute; width: 1px; height: 30px; border-left:1px dashed var(--color-red-drop); left: 6px; top:100%; }
.bag-material .text h3:after { content:''; position:absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-red-drop); left: 2px; top:100%; }

/*Products*/
.bag { padding: 30px 0 100px 0 }
.bag main { display:flex; flex-wrap:wrap; width: 100%; }

.bag-filter { width: 300px; padding: 15px 30px; border-radius: 10px; background:var(--color-f5f5f5); }
.bag-filter .text { position: relative; padding-top: 0;  font-size:24px; font-weight:600; padding-bottom:15px; }
.bag-filter .toggle-filter { display:none; position:absolute; width: 40px; height: 40px; right:-12px; top: 0; bottom: 0; margin-top:auto; margin-bottom:auto; /*background: url(../images/icon-plus-black.svg) no-repeat center; background-size:70%;*/ }
.bag-filter .toggle-filter:before {   content:''; position:absolute; width: 14px;height: 2px; background:var(--color-red); left: 0; right:0; top: 0; bottom: 0; margin:auto; }
.bag-filter .toggle-filter:after {   content:''; position:absolute; width: 2px;height: 14px; background:var(--color-red); left: 0; right:0; top: 0; bottom: 0; margin:auto; }
.bag-filter .set-hide { position: relative; padding-top: 20px; margin-top: 10px; border-top:1px dashed var(--color-dddddd);  }
.bag-filter .bag-type { margin-bottom:10px; font-weight:700; position:relative; }
.bag-filter .bag-type a.current { color:var(--color-red); }
/*.bag-filter .bag-type:before { content:''; position:absolute; width: 1px; height: 30px; border-left:1px dashed var(--color-red-drop); left: 6px; top:100%; }
.bag-filter .bag-type:after { content:''; position:absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-red-drop); left: 2px; top:100%; }*/
.no-data-fillter { width: 100%; display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center; text-align:center; }
.no-data-fillter img { width: 200px; margin:0 auto; }
.no-data-fillter button { width: max-content; padding: 10px 20px; border-radius:4px; }
.no-data-fillter span { display: inline-block; padding: 15px 0; color:var(--color-999); }

.subfillter { width: 100%; padding-bottom:20px; }
.subfillter label { width: 100%; display:inline; font-weight:500; }
.subfillter small { color:#ff0000; font-size:14px; }
.subfillter p { font-weight:700 }
.subfillter .box-set { display:flex; flex-wrap:wrap; }
.subfillter .set-check { width: 100%; position:relative; padding:3px 0; }
.clear-multi { width: 100%; padding-bottom: 20px;  margin-bottom: 0; }
.clear-multi button { width: 100%; padding: 10px; border-radius: 4px; font-size: 14px; }
.search-mo { display:none; }

.bag-lists { flex:1; position:relative; padding-left:30px; }
.bag-lists .lists { position:relative; width: 100%; padding-top:30px; }
.bag-lists .lists ul { display:flex; flex-wrap:wrap; margin:-10px; }
.bag-lists .lists li { width: 25%; position:relative; padding: 10px; }
.bag-lists .lists h3 { font-size:18px; margin-top:10px; }
.bag-lists .lists li figure { border:1px solid var(--color-eee); border-radius:10px; overflow:hidden; }
.bag-lists .lists li a:hover figure { border:1px  dashed var(--color-dddddd); }

.product-detail { position: relative; width: 100%; padding-bottom: 0; padding-top:30px; }
.product-detail h1 { margin-top: 0; margin-bottom:10px; padding-bottom:0; font-size:36px; color:var(--color-red); }
.product-detail .code-product { position: relative; width: 100%; margin-bottom: 30px; padding-bottom: 10px; color:var(--color-999); font-size:20px; font-weight:400 }
.product-detail .code-product:before { content:''; position:absolute; width: 1px; height: 30px; border-left:1px dashed var(--color-red-drop); left: 6px; top:100%; }
.product-detail .code-product:after { content:''; position:absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-red-drop); left: 2px; top:100%; }
.product-detail .box-inside { display: flex; flex-wrap: wrap; width: 100%; padding: 20px 0 60px 0 }
.product-detail .box-photo { position: relative; width: 50%; padding-right: 30px; }
.product-detail .box-photo a { position: relative; height: 100%; }
.product-detail .box-detail { width: 50%; padding-left: 30px; }

.product-gallery { position: relative; width: 100%; }
.product-gallery .fix-border { margin-bottom: 15px; /* border: 1px solid var(--color-dddddd); */ border-radius:10px; overflow:hidden;}
.product-gallery .carousel { }
.product-gallery .carousel-cell { width: 100%; height: 550px; margin-right: 10px; background: var(--color-white);  counter-increment: carousel-cell; }
.product-gallery .carousel-nav .carousel-cell {  width: 80px; height: 80px; border: 1px solid var(--color-white); border-radius:6px; overflow:hidden; }
.product-gallery .carousel-nav .carousel-cell.is-nav-selected { border: 1px dashed var(--color-red-drop); }
.product-gallery .carousel-nav img { object-fit:contain; }
.product-gallery .carousel button { border:1px solid var(--color-e5e5e5); }

.product-other { position:relative; width: 100%; padding-bottom:100px }
.product-other h2 { text-align:center; font-size:30px; margin-bottom:30px; }
.product-other ul { display:flex; flex-wrap:wrap; margin:-10px; }
.product-other li { width: 25%; position:relative; padding: 10px; text-align:center; }
.product-other h3 { font-size:18px; margin-top:10px; }
.product-other li figure { border:1px solid var(--color-eee); border-radius:10px; overflow:hidden; }
.product-other li a:hover figure { border:1px  dashed var(--color-dddddd); }

/*Contact*/
.contactus { padding-top:0 }
.contactus .motto { width: 100%; text-align:center; }

.contact-googlemap { padding-top:0 }
.contact-googlemap h2 { margin:0 auto; padding-bottom:30px; }
.google-map { position: relative; width: 100%; height: 400px;  }
.google-map iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0;   }
.google-map .btn-download { z-index: 8; position: absolute; bottom: 20px; right: 60px; }
.google-map .btn-download a { display: flex; flex-wrap: wrap; align-items: center; font-size: 16px; background: var(--color-999); color: var(--color-white); padding: 10px 30px; border-radius:90px; }
.google-map .btn-download a:hover { background:var(--color-orange); }
.google-map .btn-download i { display: block; position: relative; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; z-index: 1; }
.google-map .btn-download i:after { content: ''; position: absolute; width: 27px; height: 27px; border-radius: 50%; background: url(../images/icon-download-white.svg) no-repeat; background-position: center center; background-size: 70%; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform: scale(1); transition: all .6s cubic-bezier(0.47, 1.64, 0.41, 0.8); }
.google-map .btn-download a:hover i:after { transform: scale(1.4); transition: all .6s cubic-bezier(0.47, 1.64, 0.41, 0.8); }

.contact-localmap { padding-top:0 }
.contact-localmap h2 { margin:0 auto; padding-bottom:30px; }

.contactus .row { display:flex; flex-wrap:wrap; margin:0 -30px; }
.contactus .address { width: 50%; padding: 0 30px; }
.contactus .address h1 { font-size:36px; margin-top:0 }
.contactus .address h2 { font-size:24px; margin-bottom: 0; }
.contactus .address h3 { font-size:20px; margin-top:15px }
/*.contactus .address h2:before { content:''; position:absolute; width: 1px; height: 30px; border-left:1px dashed var(--color-red-drop); left: 6px; top:100%; }
.contactus .address h2:after { content:''; position:absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--color-red-drop); left: 2px; top:100%; }*/
.contactus .address a { display:inline-block;  }
.contactus .address p.phone { padding: 15px 0; font-weight:600 }
.contactus .address p.big-text { font-weight:600 }
.contactus .address .addline a { border-radius:5px; padding: 4px 12px 8px 12px; background:#00b900; color:var(--color-white); }
.contactus .address .addemail a { border-radius:5px; padding: 4px 12px 8px 12px; background: #808285; color:var(--color-white); }

.contactus .address .contact-top { font-family:Inter; line-height:1.4; margin-top:auto; margin-bottom:auto; font-weight:400 }
.contactus .address .contact-top a { display: block; }
.contactus .address .contact-top .email { display:flex; flex-wrap:wrap; margin:8px 0; align-items:center;  }
.contactus .address .contact-top .phone { display:flex; flex-wrap:wrap; margin:8px 0; }
.contactus .address .contact-top .line {  display:flex; flex-wrap:wrap; margin:8px 0; align-items:center; }
.contactus .address .contact-top i { display:inline-block; width: 40px; height: 40px; border-radius:50%; margin-right:10px; }
.contactus .address .contact-top i.icon-phone { background:var(--color-red) url(../images/icon-phone-white.svg) no-repeat center; background-size:60%; }
.contactus .address .contact-top i.icon-line { background:#00b900 url(../images/icon-line@-white.svg) no-repeat center; background-size:80%; }
.contactus .address .contact-top i.icon-email { background:#0b50af url(../images/icon-email-white.svg) no-repeat center; background-size:60%; }

.contact-form {  width: 50%; padding: 0 30px; }
.contact-form h2 { text-align:left; font-size:24px; }
.contact-form ul { display: flex; flex-wrap: wrap; margin: 0 -30px; }
.contact-form li { display: flex; flex-wrap: wrap;  flex-direction: column; width: 100%; padding: 10px 30px}
.contact-form textarea { height: 110px}
.contact-form label { font-size: 16px }
.contact-form .check-acc label { padding-left: 30px }
.contact-form .btn-submit button { max-width: 260px; }


/*Cookie*/
.cookie-policy { padding-top:0 }

/*Prev Next*/
.prev-next { padding: 40px 0; background: var(--color-eee); }
.prev-next .box { display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
.prev-next .box a { display: block; width: 100%; font-size: 19px; }
.prev-next .box a i { position: absolute; width: 50px; height: 100%; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.prev-next .inbox { display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 0 60px; min-height: 60px;  }
.prev-next .t-less { min-width: 30px; max-width: 250px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; }
.prev-next .box .number { position: absolute;  font-family: 'Questrial', sans-serif; font-size: 60px; color: rgba(0, 0, 0, 0.05); }
.prev-next .icon-prev { left: 0; background: url(../images/icon-prev-black.svg) no-repeat center; background-size: 100%; }
.prev-next .icon-next { right: 0; background: url(../images/icon-next-black.svg) no-repeat center; background-size: 100%; }
.prev-next .btn-left { position: relative; width: 340px; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.prev-next .btn-center { position: relative; width: 60px; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.prev-next .btn-center a { position: relative; width: 46px; height: 46px; overflow: hidden; transition: all 0.3s ease;}
.prev-next .btn-center a:after { content: ''; position: absolute; width: 20px; height: 20px; background: var(--color-orange); left: 0; top: 0; transition: all 0.3s ease;}
.prev-next .btn-center a:before { content: ''; position: absolute; width: 20px; height: 20px; background: var(--color-555); right: 0; top: 0; transition: all 0.3s ease;}
.prev-next .btn-center span { position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; }
.prev-next .btn-center span:after { content: ''; position: absolute; width: 20px; height: 20px; background: var(--color-555); left: 0; bottom: 0; transition: all 0.3s ease;}
.prev-next .btn-center span:before { content: ''; position: absolute; width: 20px; height: 20px; background: var(--color-orange); right: 0; bottom: 0; transition: all 0.3s ease;}
.prev-next .btn-center a:hover:after { background: var(--color-555); transition: all 0.3s ease; }
.prev-next .btn-center a:hover:before { background: var(--color-orange); transition: all 0.3s ease; }
.prev-next .btn-center a:hover span:after { background: var(--color-orange); transition: all 0.3s ease; }
.prev-next .btn-center a:hover span:before { background: var(--color-555); transition: all 0.3s ease; }
.prev-next .btn-right { position: relative; width: 340px; display: flex; flex-wrap: wrap; }
.prev-next .btn-right .inbox { justify-content: flex-end; text-align: right;  }
.prev-next .btn-left .number { right: -30px }
.prev-next .btn-right .number { left: -30px }

/*Cookie*/
.cookie { padding: 0; }
.cookie:before,.cookie .line-left:after,.cookie .line-left:before,.cookie .line-right:after,.cookie .line-right:before { opacity: 0.7 }
.cookie .detail { padding: 100px 0; width: 100%; max-width: 1170px; margin: 0 auto; position: relative; z-index: 1; }
.cookie .detail h1,.cookie .detail h2 { margin:  0 auto; margin-top: 0; margin-bottom: 30px; font-size: 21px; font-weight: 500;  }
.cookie .detail h3.subject { color: var(--color-orange); font-size: 25px; font-weight: 600; }
.cookie .detail h5 { font-weight: 500; }
.cookie .detail b { font-weight: 600; }

.hotline {
    padding: 30px 0;
    background: #e0e4ea
}

.hotline .warpper {
    justify-content: center
}

.hotline .phone {
    margin: 0 20px
}

.hotline .phone a {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 30px;
    font-family: 'Inter';
    color: var(--color-white);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 8px;
    background: var(--color-gold)
}

.hotline .phone a:hover {
    background: var(--color-green)
}

.hotline .phone span {
    padding-top: 2px
}

.hotline .icon-hotline {
    display: inline-flex;
    margin-right: 5px;
    width: 30px;
    height: 30px;
    background: url(../images/icon-hotline.svg) no-repeat center;
    background-size: 100%
}

.hotline .line {
    margin: 0 20px
}

.hotline .line a {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 10px 30px;
    font-family: 'Inter';
    color: var(--color-white);
    font-size: 24px;
    line-height: 1;
    border-radius: 8px;
    background: #00b900
}

.hotline .line a:hover {
    background: #00a500
}

.hotline .icon-line {
    display: inline-flex;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: url(../images/icon-line-2.svg) no-repeat center;
    background-size: 100%
}


footer {  position: relative; padding: 60px 0; color: var(--color-white); background: var(--color-444); }

footer .logo-footer { display: flex; flex-wrap: wrap; width: 50%; align-items: center;  }
footer .address { width: 65%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; padding-bottom: 30px; text-align:left; }
footer .address .text {  }
footer .address .data {  }
footer .address .data a { display: block; color:var(--color-ccc); margin:5px 0 }
footer .address .data a:hover { color:var(--color-eee); }
footer .address .data .less-subfooter { display: block; padding-left:15px; }
footer .address .data .less-subfooter a { position:relative; }
footer .address .data .less-subfooter a:before { content:''; position:absolute; width: 5px; height:1px; background:var(--color-ccc); left: -10px; top: 12px; }
footer .address h4 { margin-top:20px; margin-bottom:10px; }
footer .address a { display:inline-block; }
footer .address p { margin-bottom:5px; color:var(--color-ccc); }
footer .address p.phone { padding: 15px 0; font-weight:700; font-size:20px; }
footer .address p.big-text {font-weight:600; }

footer .contact-social { width: 35%; }
footer .contact-social .facebook-page { position:relative; display: block; overflow:hidden; }
footer .contact-social .phone { display:flex; flex-wrap: wrap; justify-content:flex-end; font-family:Inter; line-height:1.2; margin-top: 40px; font-weight:400; font-size:18px; }
footer .contact-social .phone a { color:var(--color-white); }
footer .contact-social .phone .phone,footer .contact-social .phone .line { display:flex; flex-wrap:wrap; align-items:center; margin:8px 0; }
footer .contact-social .phone i { display:inline-block; width: 60px; height: 60px; margin-right:10px; }
footer .contact-social .phone i.icon-phone { background:url(../images/icon-phone-white.svg) no-repeat center top; background-size:80%; }

footer .contact-social .footer-social { display:flex; flex-wrap:wrap; justify-content:flex-end; margin-top:20px; }
footer .contact-social .footer-social a { display: flex;
    align-items: center;
    position: relative;
    margin: 0 8px;     width: 48px;
    height: 48px;
    border-radius: 50%; background: var(--color-white);
    overflow: hidden}
footer .contact-social .footer-social a:last-child { margin-right:0 }
footer .contact-social .footer-social i {
    position: relative;
    display: block;
 width: 100%; height: 100%;
    text-indent: -9999px;
    border-radius: 50%;
    background: 0 0;
    transition: all .2s ease
}
footer .contact-social .footer-social .icon-line {
background: url(../images/icon-line@-black.svg) no-repeat center; background-size:80%;
}

footer .contact-social .footer-social .icon-instagram {
    background-image: url(../images/icon-instagram-black.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center
}

footer .contact-social .footer-social .icon-facebook {
    background-image: url(../images/icon-facebook-black.svg);
    background-repeat: no-repeat;
    background-size: 45%;
    background-position: center
}

footer .policy-copy { border-top: 1px solid var(--color-555);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%; padding-top: 40px;
    color: var(--color-white);
}
footer .dotline { position:relative; width: 100%; max-width:600px; margin:0 auto; justify-content:center; align-items:center; }
footer .dotline span { display: flex; margin: 0 auto; width: 40px; height:40px; border-radius:50%; background:var(--color-blue); }
footer .dotline:after { content:''; position:absolute; width: 40px; height: 40px; border-radius:50%; top: 0; left: 0; background:var(--color-green); }
footer .dotline:before { content:''; position:absolute; width: 40px; height: 40px; border-radius:50%; top: 0;  right: 0;  background:var(--color-red); }

footer .link-policy {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
}

footer .link-policy span {
    margin-right: 15px
}

footer .link-policy a {
    color: var(--color-white); font-size: 16px;
}

footer .link-policy a:hover {
    color: var(--color-white)
}

footer .copy {
    display: flex;
    flex-wrap: wrap; margin-left: auto; color: var(--color-white);
}

footer .copy p {  margin-bottom: 0; font-size:16px; }

footer .copy p span { font-family:'Inter' }
footer .siteby { display: flex; justify-content: center; margin-left: auto; width: 100%; font-family:'Inter'; padding-top:60px; }
footer .siteby a { color: var(--color-dddddd); font-weight: 300; font-size:16px; }
footer .siteby a:hover { color: var(--color-red); }


/*Owl*/
.carousel-nav { z-index: 1; }
.carousel-nav .carousel-cell { display: flex; align-items: center; justify-content: center; width: auto;/* height: 140px;*/ margin: 0 4px; background: none;   }
.carousel-nav .carousel-cell .name { position: relative; padding: 10px 25px; color: var(--color-black); background: var(--color-border); border-radius: 50px; border: 1px solid var(--color-dfe); font-size: 20px; font-weight: 400; text-transform: inherit; white-space: nowrap; z-index: 2; cursor: pointer; -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;   user-select: none;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.carousel-nav .carousel-cell .name:hover { color: var(--color-white); background: var(--color-blue); border: 1px solid var(--color-blue); }
.carousel-nav .carousel-cell.is-nav-selected:before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  }
.carousel-nav .carousel-cell.is-nav-selected .name { color: var(--color-white); background: var(--color-sky); border: 1px solid var(--color-sky); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;  } 
/*.carousel-nav .carousel-cell.is-nav-selected .name:before { content: ''; position: absolute; width: 100%; height: 3px; bottom: 0; background: var(--color-blue); }*/
.carousel-nav .carousel-cell.is-nav-selected { background: none }
/*.carousel-nav .carousel-cell.is-nav-selected {  background: ; }*/
 .carousel-nav .flickity-slider { }


.slick-prev::before {
    content: '' !important;
    display: inline-flex;
    width: 100%;
    height: 100%;
    background: var(--color-999) url(../images/icon-arrow-left-white.svg) no-repeat center;
    background-size: 70%; border-radius: 50%;
    transition: all .3s ease
}

.slick-next::before {
    content: '' !important;
    display: inline-flex;
    width: 100%;
    height: 100%;
    background: var(--color-999) url(../images/icon-arrow-right-white.svg) no-repeat center;
    background-size: 70%; border-radius: 50%;
    transition: all .3s ease
}

.slick-prev:hover:before { background: var(--color-orange) url(../images/icon-arrow-left-white.svg) no-repeat center; background-size: 70%; } 
.slick-next:hover:before { background: var(--color-orange) url(../images/icon-arrow-right-white.svg) no-repeat center;  background-size: 70%;}

.cookie-consent {
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    padding: 10px 10px 10px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-333);
    border-radius: 4px;
    box-shadow: 0 1px 8px 1px rgb(12 23 83 / 20%);
    z-index: 9
}

.cookie-consent .box {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    padding: 0
}

.cookie-consent .text {
    flex: 1;
    padding-right: 20px;
    color: var(--color-white);
}

.cookie-consent .text p {
    margin-bottom: 0
}

.cookie-consent .text a {
    display: inline-flex;
    text-decoration: underline;
    color: var(--color-white);
}

.cookie-consent .text a:hover {
  text-decoration: none;
}

.cookie-consent .btn-consent {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap
}

.cookie-consent .btn-consent span {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    width: 150px;
    height: 40px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
    background: var(--color-red);
    border-radius: 4px;
    transition: all .3s ease
}

.cookie-consent .btn-consent span:hover {
    background: var(--color-red-drop);
    transition: all .3s ease
}

.landing-page {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 30px 0;
    background: var(--color-555) url(../images/bg-landing.png) repeat
}

.landing-page article {
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
    padding: 30px 0
}

.landing-page-img {
    width: 100%;
    max-width: 940px;
    padding: 0 20px
}

.landing-page-img img {
    min-width: inherit !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    box-shadow: 0 1em 2em 0 rgba(0, 0, 0, .3)
}

.enter-site {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px
}

.enter-site a {
    display: block;
    width: 180px;
    padding: 10px 15px;
    margin: 0 5px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 90px;
    background: var(--color-orange)
}

.enter-site a:hover {
    background: var(--color-orange-deep);
    box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%)
}

.share-social {
    display: flex;
    align-items: center;
    margin-left: auto;
    text-transform: uppercase; padding-top: 30px;
}

.share-social .text-share {
    margin-right: 10px;
    font-size: 16px
}

.share-facebook {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 34px;
    margin: 0 4px;
    padding: 0;
    text-align: center
}

.share-facebook a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color-black);
    text-indent: -99999px;
    background: var(--color-e5e) url(../images/icon-facebook-color.svg) no-repeat center; 
    background-size: 50%;
    border-radius: 50%
}
.share-facebook a:hover {  background: #2c7bf2 url(../images/icon-facebook.svg) no-repeat center; background-size: 50%; }
.share-facebook a path {
    fill: #4267b2;
    transition: all .3s ease
}

.share-facebook a:hover path {
    fill: #2c7bf2;
    transition: all .3s ease
}

.share-facebook svg {
    width: 16px;
    height: 34px
}

.share-facebook span {
    display: inline-block;
    padding: 0 0 0 5px
}

.share-facebook sup {
    position: absolute;
    background: red;
    z-index: 1
}

.share-twitter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 34px;
    margin: 0 4px;
    padding: 0;
    text-align: center
}

.share-twitter a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color-black);
    text-indent: -99999px;
    background: var(--color-e5e) url(../images/icon-twitter-color.svg) no-repeat center;
    background-size: 70%;
    border-radius: 50%
}

.share-twitter a:hover {
    background: #55afee url(../images/icon-twitter-white.svg) no-repeat center;
    background-size: 70%;
}

.share-twitter a path {
    fill: #03a9f4;
    transition: all .3s ease
}

.share-twitter a:hover path {
    fill: var(--color-white);
    transition: all .3s ease
}

.share-twitter svg {
    display: inline-block;
    width: 16px;
    height: 34px
}

.share-twitter span {
    display: inline-block;
    padding: 0 0 0 5px
}

.share-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 34px;
    margin: 0 0 0 4px;
    padding: 0;
    text-align: center
}

.share-line a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color-black);
    text-indent: -99999px;
    background: var(--color-e5e) url(../images/icon-line-color.svg) no-repeat center;
    background-size: 70%;
    border-radius: 50%
}

.share-line a:hover {
    background: #00b800 url(../images/icon-line-white.svg) no-repeat center;
    background-size: 70%;
}


.share-line a path {
    fill: #00b900;
    transition: all .3s ease
}

.share-line a:hover path {
    fill: var(--color-white);
    transition: all .3s ease
}

.share-line svg {
    display: inline-block;
    width: 16px;
    height: 34px
}

.share-line span {
    display: inline-block;
    padding: 0 0 0 5px
}

.editor a {
    display: inline-block;
    color: var(--color-red);
    text-decoration: underline
}

.editor a:hover {
    color: var(--color-444)
}

.editor ul {
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 15px
}

.editor ul li {
    list-style: circle;
    padding: 4px 0
}

.editor ol {
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 15px;
    counter-reset: item
}

.editor ol li {
    list-style: decimal;
    padding: 4px 0
}

.editor ol li ul li {
    list-style: circle
}

.editor p {
    position: relative;
    z-index: 1
}

.editor u {
    text-decoration: underline
}

.editor i {
    font-style: italic
}

/*.editor b,
.editor strong {
    font-weight: 700
}*/

.editor img {
    min-width: inherit !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto
}

.editor blockquote {
    position: relative;
    margin: 20px 0;
    padding: 15px 30px;
    background: var(--color-efefef);
    border-radius: 15px
}

.editor blockquote p:first-child {
    margin-top: 15px
}

.editor h2.normal {
    font-weight: 400;
    margin-top: 0
}

.editor h2.normal big {
    font-weight: 600
}

.editor .detail-box-line {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border)
}

.editor .detail-box-photo {
    position: relative;
    width: 100%;
    margin: 40px 0;
    padding: 40px 0 0 0
}

.editor .detail-box-photo:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 40%;
    height: 90%;
    background: var(--color-dropwhitefooter)
}

.editor .detail-box-photo figure {
    position: relative;
    width: 52%
}

.editor .detail-box-photo figure:last-child {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.editor .fix-font {
    position: absolute;
    width: max-content;
    padding: 10px 20px;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 20px;
    background: rgba(22, 37, 112, .7);
    color: var(--color-white)
}

.editor .images-overflow {
    position: relative;
    overflow: hidden
}

.editor .table-s1 {
    position: relative;
    width: 100%;
    margin: 25px 0;
    border: 1px solid var(--color-border)
}

.editor .table-s1 ul {
    padding: 0 !important
}

.editor .table-s1 li {
    display: flex;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    list-style: none !important
}

.editor .table-s1 li:last-child {
    border-bottom: none
}

.editor .table-s1 li .left {
    position: relative;
    padding: 15px;
    min-width: 200px;
    background: var(--color-dropwhite)
}

.editor .table-s1 li .left:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: var(--color-dropwhite);
    border-width: 8px;
    margin-top: -8px
}

.editor .table-s1 li .right {
    padding: 15px
}

.editor table {
    width: 100%;
    margin: 25px 0; font-size: 14px;
    border: 1px solid var(--color-border)
}

.editor table thead tr {
    background: #f3f5f7
}

.editor table thead tr th {
    padding: 15px;
    text-align: left; 
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border)
}

.editor table tbody tr {
    border-bottom: 1px solid var(--color-border)
}

.editor table tbody tr td {
    padding: 15px;
    vertical-align: top;
    text-align: left;
    border-right: 1px solid var(--color-border)
}

.editor table tbody tr td:first-child {
    background: var(--color-dropwhite)
}

.editor .line-bottom { padding-bottom: 30px; border-bottom: 1px solid var(--color-dddddd); }

.color-blue-deep { color: var(--color-orange-deep); }
.color-sky { color: var(--color-sky); }
.color-orange { color: var(--color-orange); }

.color-gold {
    color: var(--color-gold)
}

.color-pink {
    color: var(--color-green)
}

.color-aaa {
    color: var(--color-aaa)
}

.color-red {
    color: var(--color-red)
}

.color-yellow {
    color: var(--color-yellow)
}

.color-green {
    color: var(--color-green)
}

.color-green span {
    color: initial
}

.line-hr {
    display: flex;
    position: relative;
    width: 100%;
    margin-top: 15px
}

.line-hr:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--color-border);
    top: 0;
    bottom: 0;
    left: 0;
    margin-top: auto;
    margin-bottom: auto
}

.line-hr small {
    position: relative;
    padding: 0 15px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--color-aaa);
    background: var(--color-white);
    z-index: 1
}

.line-hr .btn-etcmore {
    position: absolute;
    padding-left: 15px;
    right: 0;
    top: -5px;
    z-index: 1;
    background: var(--color-white)
}


.icon-plus {
    width: 15px;
    height: 15px;
    background: url(../images/icon-plus.svg) no-repeat center;
    background-size: 80%
}

.icon-less {
    width: 15px;
    height: 15px;
    background: url(../images/icon-less.svg) no-repeat center;
    background-size: 80%
}

.icon-copy {
    width: 15px;
    height: 15px;
    background: url(../images/icon-copy.svg) no-repeat center;
    background-size: 100%
}

.icon-trash {
    width: 15px;
    height: 15px;
    background: url(../images/icon-trash.svg) no-repeat center;
    background-size: 100%
}

.fa-eye {
    background: url(../images/icon-eye.svg) no-repeat center;
    background-size: 18px
}

.fa-eye-slash {
    background: url(../images/icon-eye-hide.svg) no-repeat center;
    background-size: 18px
}

.fa-eye:before {
    display: none
}

.fa-eye-slash:before {
    display: none
}

.xdsoft_disabled {
    display: none !important;
    visibility: hidden
}

.xdsoft_scrollbar {
    display: none
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    display: none
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    display: none
}

.btn-s1 {
    display: flex
}

.btn-s1 a {
    position: relative;
    padding: 10px 40px;
    text-align: center;
    font-weight: 400;
    border-radius: 90px;
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 5px 5px 0 transparent;
    text-shadow: none;
    overflow: hidden
}

.btn-s1 a span {
    padding-right: 10px
}

.btn-s1 a:hover {
    color: var(--color-green);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2)
}

.btn-s1 a:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icon-arrow-right-green.svg) no-repeat center;
    background-size: 100%;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1
}

.btn-s2 {
    display: flex
}

.btn-s2 a {
    padding: 10px 40px;
    font-weight: 400;
    border-radius: 90px;
    color: var(--color-white);
    background: linear-gradient(180deg, #eb008b 0, #f37125 100%);
    transition: all .3s ease;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
    transition: all .3s ease
}

.btn-s2 a:hover {
    color: var(--color-white)
}

.btn-b1 {
    padding-top: 10px
}

.btn-b1 a {
    position: relative;
    width: max-content;
    padding: 10px 40px;
    text-align: center;
    font-weight: 400;
    border-radius: 90px;
    background: var(--color-green);
    color: var(--color-white);
    box-shadow: 0 5px 5px 0 transparent;
    border: 1px solid var(--color-dropgreen);
    text-shadow: none;
    overflow: hidden
}

.btn-b1 a span {
    padding-right: 10px
}

.btn-b1 a:hover {
    color: var(--color-green);
    background: var(--color-white);
    border: 1px solid var(--color-white);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2)
}

.btn-b1 a:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icon-arrow-right-white.svg) no-repeat center;
    background-size: 100%;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1
}

.btn-b1 a:hover:before {
    background: url(../images/icon-arrow-right-green.svg) no-repeat center;
    background-size: 100%
}

.btn-readmore {
    position: relative;
    padding-bottom: 15px
}

.btn-readmore span {
    position: relative;
    padding-right: 20px
}

.btn-readmore span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--color-green);
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    left: 100%;
    z-index: 1;
    transition: all .2s ease
}

.btn-readmore span:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    background: var(--color-greendrop);
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    left: 100%
}


.btn-readmore a:hover span:before {
    width: 100px;
    transition: all .2s ease
}

.textcenter {
    text-align: center
}

.marginauto {
    margin: 0 auto;
    justify-content: center
}

.tiptop {
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    padding: 10px 15px;
    color: #fff;
    font-size: 12px;
    background: rgb(0, 0, 0, .8);
    border-radius: 4px
}

.pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin:  0;
    padding: 15px 0 0 0; 
    font-weight: 500
}

.pagination span {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    justify-content: center;
    align-items: center;
    font-family: 'Inter';
    border-radius: 50%;
    background: var(--color-f0f0f0)
}

.pagination a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    line-height: 1;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-family: 'Inter';
    font-size: 16px;
    color: var(--color-555);
    border-radius: 50%;
    background: var(--color-f0f0f0)
}

.pagination a:first-child {
    margin-left: 0
}

.pagination a:last-child {
    margin-right: 0
}

.pagination a svg {
    fill: var(--color-555);
    width: 15px;
    height: 15px
}

.pagination a:hover {
    color: var(--color-white);
    background: var(--color-red)
}

.pagination a.current {
    background: var(--color-red);
    color: var(--color-white)
}

.pagination .prve {
    text-indent: -9999px;
    background: var(--color-f0f0f0) url(../images/icon-back-black.svg) no-repeat center;
    background-size: 50%;
    cursor: pointer;
    transition: all .3s ease
}

.pagination .prve:hover {
    background: var(--color-f0f0f0) url(../images/icon-back-black.svg) no-repeat center;
    background-size: 50%;
    transition: all .3s ease
}

.pagination .next {
    text-indent: -9999px;
    background: var(--color-f0f0f0) url(../images/icon-next-black.svg) no-repeat center;
    background-size: 50%;
    cursor: pointer;
    transition: all .3s ease
}

.pagination .next:hover {
    background: var(--color-f0f0f0) url(../images/icon-next-black.svg) no-repeat center;
    background-size: 50%;
    transition: all .3s ease
}

.pagination .none-border {
    border: none;
    padding-left: 0
}

.pagination .none-border a:hover {
    border: nene
}

.pagination .disable {
    pointer-events: none !important;
    cursor: default;
    opacity: .5
}

.pagination .dott {
    width: 20px; background: none;
}

.tags-search {
    position: relative;
    width: 100%;
    max-width: 960px;
    padding: 0 15px 0 0;
    margin: 0 auto
}

.tags-search a {
    display: inline-block;
    margin: 4px 0 4px 0;
    padding: 8px 15px;
    font-size: 14px;
    color: var(--color-green);
    background: var(--color-golddroptwo);
    border-radius: 3px
}

.tags-search a:hover {
    background: var(--color-golddrop)
}

.lazy-loaded {
    transition: all .3s ease;
    opacity: 1
}

img[data-src] {
    opacity: 0
}

img.lazyloaded {
    opacity: 1;
    transition: all .3s ease
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    padding-top: 15px
}

.select-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    position: relative;
    padding-bottom: 30px;
    z-index: 5
}

.select-filter h5 {
    margin: 0
}

.select-filter select {
    margin-left: auto;
    min-width: 200px
}

.select-filter .chosen-container {
    margin-left: auto
}

.select-filter .chosen-container-single .chosen-single {
    border: 1px solid var(--color-e5e);
    border-radius: 4px
}

.select-filter .chosen-container-single .chosen-single:hover {
    border: 1px solid var(--color-gold)
}

.select-filter .chosen-container:hover .chosen-single {
    border: 1px solid var(--color-gold)
}

.select-filter .chosen-container .chosen-results li {
    padding: 10px 6px !important
}

.select-filter .chosen-container-single .chosen-drop {
    z-index: 999;
    border: 1px solid var(--color-gold);
    border-top: none !important;
    margin-top: -3px;
    border-radius: 0 0 4px 4px
}

.select-filter .mini-class {
    min-width: 150px
}

.box-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -60px
}

.box-colum-100 {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    padding: 0 60px
}

.box-colum-50 {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 50%;
    padding: 0 60px
}

.box-colum-33 {
    display: flex;
    position: relative;
    width: 33.3333%;
    padding: 0 60px
}

.box-colum-25 {
    display: flex;
    position: relative;
    width: 25%;
    padding: 0 60px
}

.box-colum-20 {
    display: flex;
    position: relative;
    width: 20%;
    padding: 0 60px
}

.editor-row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px -30px;
    padding: 30px 0
}

.editor-colum-50 {
    position: relative;
    width: 50%;
    padding: 30px
}

.editor-colum-33 {
    position: relative;
    width: 33.3333%;
    padding: 30px
}

.img-lineheri-color:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background: var(--color-green);
    left: 0;
    top: 0;
    z-index: 1
}

.image-preview img {
    margin-top: 2px;
    border-radius: 4px;
    border: 1px solid var(--color-border)
}

.display-block {
    display: block
}

.youtube-embed {
    position: relative;
    display: block;
    height: 0;
    padding: 0 0 56.25%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 1em 2em 0 rgb(24 29 89 / 20%)
}

.youtube-embed iframe {
    position: absolute;
    display: block;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0
}

.btn-search {
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0
}

.btn-search button {
    position: relative; text-indent: -999px; overflow: hidden;
    width: 60px;
    height: 60px;
    background: url(../images/icon-search.svg) no-repeat center;
    background-size: 30px
}


.btn-line- {
    position: relative;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px
}

.btn-line- img {
    position: relative;
    z-index: 1
}

.btn-line- a {
    position: relative;
    display: inline-block;
    width: 258px;
    border-radius: 60px;
    background: #01b901;
    overflow: hidden;
    border: 4px solid var(--color-white)
}

.btn-line- a:hover {
    border: 4px solid var(--color-yellow)
}

.btn-line- a:before {
    animation: sleft 2s infinite;
    position: absolute;
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    left: -60%;
    z-index: 0;
    background: #01b901;
    background: linear-gradient(90deg, rgba(1, 185, 1, 0) 18%, #16ff00 49%, rgba(1, 185, 1, 0) 76%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    transition-timing-function: cubic-bezier(.17, .67, .83, .67);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn-line- a:after {
    animation: rleft 3s infinite;
    position: absolute;
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    left: -60%;
    z-index: 0;
    background: #01b901;
    background: linear-gradient(90deg, rgba(1, 185, 1, 0) 18%, #16ff00 49%, rgba(1, 185, 1, 0) 76%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    transition-timing-function: cubic-bezier(.17, .67, .83, .67);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn-playgame {
    position: relative;
    padding: 20px 0
}

.btn-playgame a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    padding: 0;
    color: var(--color-white);
    border-radius: 4px;
    background: var(--color-gold)
}

.btn-playgame a:hover {
    color: var(--color-black);
    background: var(--color-yellow)
}

.btn-playgame span {
    position: relative
}

.btn-playgame .icon-choice {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: url(../images/icon-choice.svg) no-repeat center;
    background-size: 100%
}

.btn-playgame-after {
    position: relative;
    padding: 20px 0
}

.btn-playgame-after a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    padding: 0;
    color: var(--color-black);
    border-radius: 4px;
    background: var(--color-border)
}

.btn-playgame-after a:hover {
    color: var(--color-black);
    background: var(--color-yellow)
}

.btn-playgame-after span {
    position: relative
}

a.btn-more {
    display: inline-flex
}

.more-btn {
    display: flex;
    justify-content: center;
    width: 100%
}

.button-readmore {
    position: relative;
    padding: 20px 0
}

.button-readmore a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 46px;
    padding: 0;
    color: var(--color-white);
    border-radius: 4px;
    background: var(--color-gold)
}

.button-readmore a:hover {
    color: var(--color-black);
    background: var(--color-yellow)
}

.button-readmore span {
    position: relative
}

.button-readmore-two {
    position: relative;
    padding: 20px 0
}

.button-readmore-two a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 46px;
    padding: 0;
    color: var(--color-white);
    border-radius: 4px;
    background: var(--color-666)
}

.button-readmore-two a:hover {
    color: var(--color-black);
    background: var(--color-yellow)
}

.button-readmore-two span {
    position: relative
}

.button-auto {
    position: relative;
    width: inherit;
    display: inline-flex;
    padding: 20px 0
}

.button-auto a {
    position: relative;
    height: 46px;
    padding: 0 40px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: var(--color-white) !important;
    line-height: 45px;
    text-transform: uppercase;
    background: var(--color-green)
}

.button-auto a:hover {
    color: var(--color-gold) !important
}

.button-auto span {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.button-auto span svg {
    width: 18px;
    height: 18px;
    margin-right: 15px
}

.button-auto a:hover path {
    fill: var(--color-white);
    transition: all .3s ease
}

.button-auto a path {
    fill: var(--color-gold);
    transition: all .3s ease
}

.button-auto span:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 1px;
    background: var(--color-green);
    top: 50%;
    right: -30px
}

.button-auto span:after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    top: 50%;
    left: 180px;
    transition: all .3s ease
}

.button-auto a:hover span:after {
    width: 30px;
    transition: all .3s ease
}

.button-auto a:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 1px;
    background: var(--color-gold);
    top: 50%;
    right: 0
}

.button-con {
    position: relative;
    width: inherit;
    display: inline-flex;
    padding: 20px 0
}

.button-con a {
    position: relative;
    min-width: 180px;
    height: 46px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: var(--color-green) !important;
    line-height: 45px;
    text-transform: uppercase;
    background: var(--color-white);
    border: 1px solid var(--color-green)
}

.button-con a:hover {
    color: var(--color-gold) !important
}

.button-con span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.button-con span svg {
    width: 18px;
    height: 18px;
    margin-right: 15px
}

.button-con a:hover path {
    fill: var(--color-white);
    transition: all .3s ease
}

.button-con a path {
    fill: var(--color-gold);
    transition: all .3s ease
}

.button-outsize {
    position: relative;
    width: inherit;
    display: inline-flex;
    padding: 0
}

.button-outsize a {
    position: relative;
    height: 46px;
    padding: 0 0;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: var(--color-green) !important;
    line-height: 45px;
    text-transform: uppercase
}

.button-outsize a:hover {
    color: var(--color-gold) !important
}

.button-outsize span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.button-outsize span svg {
    width: 18px;
    height: 18px;
    margin-right: 15px
}

.button-outsize a:hover path {
    fill: var(--color-green);
    transition: all .3s ease
}

.button-outsize a path {btn-submit
    fill: var(--color-gold);
    transition: all .3s ease
}

.btn-submit {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 20px 0 15px 0
}

.btn-submit button {
    min-width: 260px;
    height: 56px;
    margin: 0 10px
}

.btn-submit button:hover {
    background: var(--color-444)
}

.btn-submit button.cancel {
    margin-left: 10px;
    color: var(--color-black);
    font-weight: 400;
    background: var(--color-border)
}

.btn-submit button.cancel:hover {
    background: var(--color-dddddd)
}

.btn-submit span {

}

.btn-submit span a {
    display: inline-flex;
    min-width: 260px;
    justify-content: center;
    height: 56px;
    padding: 0 15px;
    align-items: center;
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid var(--color-e5e);
    border-radius: 4px
}

.btn-submit span a:hover {
    border: 1px solid var(--color-green);
    color: var(--color-green)
}

.btn-etcmore span {
    width: inherit;
    padding: 0
}

.btn-etcmore span a {
    display: inline-flex;
    min-width: 80px;
    height: 32px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--color-border);
    border-radius: 4px
}

.btn-etcmore span a:hover {
    background: var(--color-golddrop);
    color: var(--color-black)
}

.btn-etcmore button {
    width: auto;
    min-width: inherit;
    height: 32px;
    padding: 0 15px;
    font-size: 16px
}

.btn-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 30px 0 10px 0
}

.btn-set span {
    width: inherit;
    padding: 0 10px
}

.btn-set span:last-child a {
    font-size: 16px;
    font-weight: 400;
    background: var(--color-gold);
    color: var(--color-white)
}

.btn-set span:last-child a:hover {
    color: var(--color-white);
    background: var(--color-green)
}

.btn-set span a {
    display: inline-flex;
    width: 100%;
    min-width: 200px;
    height: 40px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--color-border);
    border-radius: 4px
}

.btn-set span a:hover {
    background: var(--color-golddrop);
    color: var(--color-black)
}

.btn-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    margin-bottom: 10px
}

.btn-upload span {
    width: inherit;
    padding: 0
}

.btn-upload span a {
    position: relative;
    display: inline-flex;
    height: 32px;
    padding: 0 15px 0 40px;
    align-items: center;
    font-size: 14px;
    color: var(--color-white);
    background: var(--color-gold);
    border-radius: 4px
}

.btn-upload span a:hover {
    background: var(--color-green)
}

.btn-upload span a:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icon-upload.svg) no-repeat center;
    background-size: 100%;
    left: 12px;
    top: 6px
}

.btn-upload button {
    width: auto;
    min-width: inherit;
    height: 32px;
    padding: 0 15px 0 15px;
    font-size: 14px
}

.btn-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    margin-left: 5px
}

.btn-proof span {
    width: inherit;
    padding: 0
}

.btn-proof span a {
    position: relative;
    display: inline-flex;
    height: 32px;
    padding: 0 15px 0 40px;
    align-items: center;
    font-size: 14px;
    color: var(--color-white);
    background: var(--color-gold);
    border-radius: 4px
}

.btn-proof span a:hover {
    background: var(--color-green)
}

.btn-proof span a:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icon-check-white.svg) no-repeat center;
    background-size: 16px;
    left: 12px;
    top: 6px
}

.btn-proof button {
    width: auto;
    min-width: inherit;
    height: 32px;
    padding: 0 15px 0 15px;
    font-size: 14px
}

.fix-gototop {
    position: fixed;
    width: 26px;
    height: 26px;
    bottom: 12px;
    right: 10px;
    z-index: 7
}

.fix-gototop a {
    display: inline-table;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #fff !important;
    text-align: center;
    text-transform: uppercase;
    background: #666
}

.fix-gototop a:hover {
    color: #fff;
    background: #333
}

.fix-gototop i {
    display: table-cell;
    vertical-align: middle
}

.top-hide {
    bottom: -40px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.top-show {
    bottom: 12px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.icon-top {
    display: table-cell;
    vertical-align: middle;
    background: url(../images/icon-arrow-top.svg) no-repeat;
    background-size: 100%
}

.ui-loader {
    display: none !important;
    visibility: hidden !important
}

.blockPage {
    width: 260px !important;
    left: 0 !important;
    right: 0 !important;
    border: none !important;
    background: 0 0 !important;
    margin: 0 auto !important
}

.blockPage .waiting {
    width: 260px;
    padding: 15px;
    font-size: 15px;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .35);
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .35)
}

.blockPage .waiting img {
    display: inline-block;
    width: 40px;
    height: 40px
}

.hide {
    display: none
}

.error {
    color: #fa5058;
    font-size: 14px;
    font-weight: 400
}

.mt {
    margin-top: 0 !important
}

.mt-10 {
    margin-top: 10px !important
}

.mt-15 {
    margin-top: 15px !important
}

.mt-20 {
    margin-top: 20px !important
}

.mt-30 {
    margin-top: 30px !important
}
.mt-40 {
    margin-top: 40px !important
}

.mb {
    margin-bottom: 0 !important
}

.ml-15 {
    margin-left: 15px !important
}

.mb-30 {
    margin-bottom: 30px !important
}

.mb-60 {
    margin-bottom: 60px !important
}

.mr {
    margin-right: 0 !important
}

.pt {
    padding-top: 0 !important
}

.pt-5 {
    padding-top: 5px !important
}

.pt-10 {
    padding-top: 10px !important
}

.pt-15 {
    padding-top: 15px !important
}

.pt-30 {
    padding-top: 30px !important
}

.pt-60 {
    padding-top: 60px !important
}

.pl {
    padding-left: 0 !important
}

.pl-10 {
    padding-left: 10px !important
}

.pl-15 {
    padding-left: 15px !important
}

.pl-20 {
    padding-left: 20px !important
}

.pl-30 {
    padding-left: 30px !important
}

.pl-40 {
    padding-left: 40px !important
}

.pl-50 {
    padding-left: 50px !important
}

.pb {
    padding-bottom: 0 !important
}

.pb-10 {
    padding-bottom: 10px !important
}

.pb-30 {
    padding-bottom: 30px !important
}


input[type=checkbox],
input[type=radio] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

input[type=checkbox]:focus+label:before,
input[type=checkbox]:hover+label:before,
input[type=radio]:focus+label:before,
input[type=radio]:hover+label:before {
    border-color: var(--color-red-drop);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

input[type=checkbox]+label,
input[type=radio]+label {
    position: relative; padding-top: 2px;
    padding-left: 26px; font-size: 14px;
    padding-bottom: 0;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

input[type=checkbox]+label:before,
input[type=radio]+label:before {
    content: '';
    color: #555;
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-dddddd);

    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
}

input[type=checkbox]+label:after,
input[type=radio]+label:after {
    content: '';
    background-color: var(--color-gold);
    position: absolute;
    top: 0;
    left: 6px;
    width: 15px;
    height: 15px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out
}

input[type=checkbox]+label:after {
    background-color: transparent;
    top: 9px;
    left: 4px;
    width: 8px;
    height: 3px;
    margin-top: 0;
    border-style: solid;
    border-color: var(--color-white);
    border-width: 0 0 2px 2px;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    -webkit-transform: rotate(-45deg) scale(0);
    -ms-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0)
}

input[type=checkbox]:checked+label:after {
    content: '';
    -webkit-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1)
}

input[type=radio]:checked+label:before {
    -webkit-animation: borderscale .3s ease-in;
    animation: borderscale .3s ease-in
}

input[type=radio]:checked+label:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

input[type=radio]+label:after,
input[type=radio]+label:before {
    border-radius: 50%
}

input[type=checkbox]:checked+label:before {
    -webkit-animation: borderscale .3s ease-in;
    animation: borderscale .3s ease-in;
    background: var(--color-red-drop);
    border: 1px solid var(--color-red-drop)
}

input[type=checkbox]:checked+label:after {
    -webkit-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1)
}

@keyframes sleft {
    0% {
        left: -30%
    }

    100% {
        left: 110%
    }
}

@keyframes rleft {
    0% {
        left: -50%
    }

    100% {
        left: 150%
    }
}

.fancybox-content {
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2)
}

.fancybox-navigation .fancybox-button:hover div {
/*    background: var(--color-red)*/
}

.fancybox-thumbs__list a:before {
    border: 4px solid var(--color-red)
}

/*.fancybox-toolbar button:hover {
    background: var(--color-red)
}*/

.fancybox-caption {
    color: var(--color-white);
    font-size: 20px
}

.fancybox-slide--current .animated-modal {
    transform: translateY(0);
    opacity: 1;
    transition-duration: .3s
}

.fancybox-button--close {  top: 20px; right: 20px; }
.fancybox-toolbar .fancybox-button:hover { background: var(--color-red); }
.fancybox-navigation .fancybox-button { background: var(--color-white);  }
.fancybox-navigation .fancybox-button:hover { background: var(--color-red); transition: all 0.3s ease;  }
.fancybox-navigation .fancybox-button div { padding: 0 }
.fancybox-navigation .fancybox-button--arrow_left { left: 20px }
.fancybox-navigation .fancybox-button--arrow_right { right: 20px }
.fancybox-can-zoomIn .fancybox-content { cursor:  }

.fancybox-close-small {
    background: var(--color-555) !important;
    border-radius: 50% !important; transition: all 0.3s ease;
}
.fancybox-close-small:hover { background: var(--color-orange) !important;  transition: all 0.3s ease; }

.fancybox-is-open .fancybox-bg {
    opacity: .7
}

.fancybox-content .close-small {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    text-indent: -99999px;
    background: url(../images/icon-close.svg) no-repeat center;
    background-size: 50%;
    cursor: pointer;
    z-index: 1
}

.fancybox-content .btn-close {
    display: flex;
    justify-content: center
}

.fancybox-content .btn-close span {
    display: flex;
    justify-content: center;
    width: 200px;
    margin: 10px 0;
    padding: 10px 20px;
    border: 1px solid var(--color-e5e);
    background: var(--color-white);
    border-radius: 90px;
    cursor: pointer;
    transition: all .3s ease
}

.fancybox-content .btn-close span:hover {
    background: var(--color-green);
    color: var(--color-white);
    border: 1px solid var(--color-green)
}

.fancybox-slide--html { padding: 20px; }
.fancybox-slide--html .fancybox-close-small {
    top: 15px;
    right: 15px
}

.fancybox-close-small {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    opacity: 1;
    outline: 0;
    text-indent: -9999px;
    overflow: hidden;
    background: 0 0;
    z-index: 10;
    cursor: pointer
}

.fancybox-close-small:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font: 36px/40px Arial, Helvetica Neue, Helvetica, sans-serif;
    color: var(--color-black);
    font-weight: 300;
    text-align: center;
    border-radius: 50%;
    border-width: 0;
    background: url(../images/icon-close-white.svg) no-repeat center;
    background-size: 30%;
    transition: background .25s;
    box-sizing: border-box;
    transition: all .3s ease
}

.fancybox-close-small:hover:after {
    color: var(--color-gold);
    transition: all .3s ease
}

.fancybox-close-small:hover {
    color: var(--color-green)
}

.fancybox-progress {
    background: var(--color-yellow)
}

.fancybox-thumbs {
    background: var(--color-green)
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

.animated-modal {
    max-width: inherit;
    width: auto;
    min-width: 720px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
    transform: translateY(-80px);
    transition: all .5s
}

.left-line {
    padding-left: 20px;
    margin: 15px 0
}

.left-line:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 50%;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    background: var(--color-gold)
}

.text-center {
    text-align: center !important
}

.full {
    width: 100% !important;
    max-width: 100% !important
}
:lang(en) .error {
    font-size: 12px !important;
    color: red
}
.error {
    font-size: 14px !important;
    color: red
}

.carousel-cell {
    width: 100%
}

.flickity-enabled {
    position: relative
}

.flickity-enabled:focus {
    outline: 0
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.flickity-prev-next-button {
    position: absolute;
    top: 50%;
    width: 40px;
    min-width: inherit;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    background: hsla(0, 0%, 100%, .75);
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.flickity-prev-next-button:hover {
    background: #fff
}

.flickity-prev-next-button:focus {
    outline: 0;
    box-shadow: 0 0 0 5px #09f
}

.flickity-prev-next-button:active {
    opacity: .6
}

.flickity-prev-next-button.previous {
    left: 10px
}

.flickity-prev-next-button.next {
    right: 10px
}

.flickity-prev-next-button:disabled {
    opacity: .3;
    cursor: auto
}

.flickity-prev-next-button svg {
    position: absolute;
    left: 11px;
    top: 12px;
    width: 40%;
    height: 40%
}

.flickity-prev-next-button .arrow {
    fill: #3c4542
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
    z-index: 99
}

.flickity-rtl .flickity-page-dots {
    direction: rtl
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer
}

.flickity-page-dots .dot.is-selected {
    background: #007548;
    width: 20px;
    border-radius: 30px
}

.flickity-enabled.is-fade .flickity-slider>* {
    pointer-events: none;
    z-index: 0
}

.flickity-enabled.is-fade .flickity-slider>.is-selected {
    pointer-events: auto;
    z-index: 1
}

dl.resp-tabs-list {
    margin: 0;
    padding: 0 0 60px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 9
}

.resp-tabs-list dt {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px; width: 250px;
    margin: 0 10px ;
    list-style: none;
    cursor: pointer;
    background: var(--color-border);
    border-radius: 50px;
    text-align: center;
    transition: all .3s ease;
    border: 1px solid var(--color-dfe);
}
.resp-tabs-list dt h5 { margin: 0; }
.resp-tabs-list dt span {
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.resp-tabs-list dt:hover {
    color: var(--color-white);
    background: var(--color-orange-deep);
    border: 1px solid var(--color-orange-deep);
}

.resp-tab-active {
    color: var(--color-white);
    border-bottom: none;
    background: var(--color-sky) !important;
    border: 1px solid var(--color-sky) !important;
}


.resp-tab-active dt:hover {
    color: var(--color-white);
    border: 1px solid var(--color-sky);
}

.resp-tabs-container {
    padding: 0;
    clear: left
}

div.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none
}

.resp-tab-active:hover {
    color: var(--color-white) !important
}

.resp-accordion-active,
.resp-content-active {
    display: block
}

.resp-tab-content {
    display: none
}

.resp-tab-content p {
    padding-bottom: 0
}

.resp-tab-content dl dt {
    position: relative;
    padding: 15px 0 0 20px
}

.resp-tab-content dl dt:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    left: 5px;
    top: 24px;
    border-radius: 50%;
    background: #777
}

div.resp-accordion {
    border: 1px solid #eee;
    border-top: 0 solid #d70a0a;
    margin: 0;
    padding: 10px 15px;
    font-size: 19px
}

div.resp-tab-active {
    border-bottom: 0 solid #eee !important;
    margin-bottom: 0 !important;
    padding: 10px 15px !important
}

div.resp-tab-title:last-child {
    border-bottom: 12px solid #eee !important;
    background: pink
}

.resp-vtabs dl.resp-tabs-list {
    float: left;
    width: 30%
}

.resp-vtabs .resp-tabs-list dt {
    display: block;
    padding: 15px 15px !important;
    margin: 0;
    cursor: pointer;
    float: none
}

.resp-vtabs .resp-tabs-container {
    padding: 0;
    background-color: #fff;
    border: 1px solid #eee;
    float: left;
    width: 68%;
    min-height: 250px;
    border-radius: 4px;
    clear: none
}

.resp-vtabs .resp-tab-content {
    border: none
}

.resp-vtabs dt.resp-tab-active {
    border: 1px solid #ddd;
    border-right: none;
    background-color: #fff;
    position: relative;
    z-index: 1;
    margin-right: -1px !important;
    padding: 14px 15px 15px 14px !important
}

.resp-arrow {
    width: 0;
    height: 0;
    float: right;
    margin-top: 10px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #ccc
}

div.resp-tab-active span.resp-arrow {
    border: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #777
}

div.resp-tab-active {
    background: #333 !important
}

.resp-easy-accordion div.resp-accordion {
    display: block
}

.resp-easy-accordion .resp-tab-content {
    border: 1px solid #eee
}

.resp-easy-accordion .resp-tab-content:last-child {
    border-bottom: 1px solid #eee !important
}

.resp-jfit {
    width: 100%;
    margin: 0
}

.resp-tab-content-active {
    display: block
}

div.resp-accordion:first-child {
    border-top: 1px solid #eee !important
}

.cd-horizontal-timeline {
    opacity: 0;
    margin: 0 auto;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.cd-horizontal-timeline::before {
    content: 'mobile';
    display: none
}

.cd-horizontal-timeline.loaded {
    opacity: 1
}

.cd-horizontal-timeline .timeline {
    position: relative;
    height: 100px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto
}

.cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden
}

.cd-horizontal-timeline .events-wrapper::after,
.cd-horizontal-timeline .events-wrapper::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 30px
}

.cd-horizontal-timeline .events-wrapper::before {
    left: 0;
    background-image: -webkit-linear-gradient(left, #fff, rgba(248, 248, 248, 0));
    background-image: linear-gradient(to right, #fff, rgba(248, 248, 248, 0))
}

.cd-horizontal-timeline .events-wrapper::after {
    right: 0;
    background-image: -webkit-linear-gradient(right, #fff, rgba(248, 248, 248, 0));
    background-image: linear-gradient(to left, #fff, rgba(248, 248, 248, 0))
}

.cd-horizontal-timeline .events {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    background: var(--color-border);
    -webkit-transition: -webkit-transform .4s;
    -moz-transition: -moz-transform .4s;
    transition: transform .4s
}

.cd-horizontal-timeline .filling-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-blue-drop);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s
}


.cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 1.3rem;
    padding: 0 0 15px 0;
    color: var(--color-black);
    font-family: 'Questrial', sans-serif;
    font-size: 20px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0)
}

.cd-horizontal-timeline .events a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -7px;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    background-color: #fff;
    -webkit-transition: background-color .3s, border-color .3s;
    -moz-transition: background-color .3s, border-color .3s;
    transition: background-color .3s, border-color .3s
}

.cd-horizontal-timeline .events a.selected {
    pointer-events: none; color: var(--color-sky);
}

.cd-horizontal-timeline .events a.selected::after {
    background: var(--color-white);
    border-color: var(--color-blue-drop)
}

.cd-horizontal-timeline .events a.older-event::after {
    border-color: var(--color-blue-drop)
}

.cd-horizontal-timeline .events a.older-event { color: var(--color-sky); }

@media only screen and (min-width:1100px) {
    .cd-horizontal-timeline {
        margin: 0
    }

    .cd-horizontal-timeline::before {
        content: 'desktop'
    }
}

.cd-timeline-navigation a {
    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
/*    border: 2px solid var(--color-border);*/
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color .3s;
    -moz-transition: border-color .3s;
    transition: border-color .3s
}

.cd-timeline-navigation a.prev {
    left: 0;
    background: var(--color-f3f5f8) url(../images/icon-arrow-back-sky.svg) no-repeat center;
    background-size: 40%
}

.cd-timeline-navigation a.next {
    right: 0;
    background: var(--color-f3f5f8) url(../images/icon-arrow-next-sky.svg) no-repeat center;
    background-size: 40%
}

.no-touch .cd-timeline-navigation a:hover {
    border-color: var(--color-gold)
}

.cd-timeline-navigation a.inactive {
    opacity: .5
}

.cd-timeline-navigation a.inactive::after {
    background-position: 0 -16px
}

.no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: #dfdfdf
}

.cd-horizontal-timeline .events-content {
    position: relative;
    width: 100%;
    margin: 20px 0 0 0;
    overflow: hidden;
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    transition: height .4s;
    background: url(../images/about-miles-3.jpg) no-repeat top right;
    background-size: cover
}

.cd-horizontal-timeline .events-content:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .8);
    left: 0;
    top: 0
}

.cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.cd-horizontal-timeline .events-content li.selected {
    position: relative;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right
}

.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left
}

.cd-horizontal-timeline .events-content li.leave-left,
.cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse
}

.cd-horizontal-timeline .events-content li>* {
    margin: 0 auto
}

.cd-horizontal-timeline .events-content em {
    display: block;
    font-style: italic;
    margin: 10px auto
}

.cd-horizontal-timeline .events-content em::before {
    content: '- '
}

.cd-horizontal-timeline .events-content em,
.cd-horizontal-timeline .events-content p {
    line-height: 1.6
}

@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

.call-to-action {
    position: fixed;
    width: 45px;
    bottom: 30px;
    right: 15px;
    z-index: 222
}

.call-to-action .box {
    position: relative;
    width: 45px;
    height: 45px
}

.call-to-action .box span {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-green);
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease
}

.call-to-action .box span:hover {
    background: var(--color-green);
    transition: all .3s ease
}

.call-to-action .box:before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    left: -50%;
    top: 0;
    right: -50%;
    bottom: 0;
    margin: auto;
    background-color: #000;
    border-radius: 50%;
    -webkit-animation: sk-scaleout 1.7s infinite ease-in-out;
    animation: sk-scaleout 1.7s infinite ease-in-out
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.click-call {
    position: relative;
    text-indent: -9999px;
    height: 100%;
    cursor: pointer
}

.call-to-action .icon-chat {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-orange-deep) url(../images/call-action/icon-chat.svg) no-repeat center;
    background-size: 70%;
    border-radius: 50%
}

.call-to-action .icon-close {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-333) url(../images/call-action/icon-close.svg) no-repeat center;
    background-size: 50%;
    border-radius: 50%
}

.call-zone-show {
    display: block !important;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1)
}

.call-to-action ul {
    display: none;
    position: absolute;
    width: 45px;
    bottom: 54px;
    right: 0;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1)
}

.call-to-action li {
    position: relative;
    width: 45px;
    padding: 4px 0;
    border-radius: 50%;
    overflow: hidden
}

.call-to-action li a {
    display: block;
    position: relative;
    width: 100%;
    height: 45px;
    border-radius: 50%;
    overflow: hidden
}

.call-to-action li .btn-line {
    display: block;
    position: relative;
    width: 100%;
    height: 45px;
    border-radius: 50%;
    overflow: hidden; cursor: pointer;
}

.call-to-action li a i {
    text-indent: -9999px
}

.call-to-action .icon-ig {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #ed1a6e url(../images/call-action/icon-call-ig.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-youtube {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-youtube.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-fbmessage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-fbmessage.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-facebook {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #0184ff url(../images/call-action/icon-call-facebook.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-line {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #00c300 url(../images/call-action/icon-call-line.svg) no-repeat center;
    background-size: 60%
}

.call-to-action .icon-tel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-orange-deep) url(../images/call-action/icon-call-tel.svg) no-repeat center;
    background-size: 50%
}

.call-to-action .icon-mail {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #ff8935 url(../images/call-action/icon-call-mail.svg) no-repeat center;
    background-size: 50%
}

.call-to-action-box {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2)
}

.call-to-action-box .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    padding: 0;
    background: var(--color-whitedrop)
}

.call-to-action-box .title:before {
    display: none
}

.call-to-action-box .title h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 40px;
}

.call-to-action-box .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 30px
}

.call-to-action-box .box dl {
    display: flex;
    flex-wrap: wrap
}

.call-to-action-box .box dd {
    width: 100%;
    padding-bottom: 10px
}

.call-to-action-box .box a {
    display: inline-flex
}

.call-to-action-box .box img {
    display: block;
    padding: 0
}

.call-to-action-box .box input[type=text] {
    width: 100%
}

.call-to-action-box .box textarea {
    height: 100px
}

.call-to-action-box .box .btn-submit {
    padding-top: 0
}

.call-to-action-box .box .btn-submit button {
    width: 100%;
    min-width: 100%
}

.call-line .title {
    margin-bottom: 0;
    background: #00c300
}

.call-line .title h3 {
    color: #fff
}

.call-line .fancybox-close-small:after {
    color: #fff
}

.call-fbmessage .title {
    background: #0084ff
}

.call-fbmessage .title h3 {
    color: #fff
}

.call-fbmessage .fancybox-close-small:after {
    color: #fff
}

.delay-05 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.delay-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.delay-15 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.delay-2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.delay-25 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s
}

.delay-3 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.delay-35 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s
}

.delay-4 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.delay-45 {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s
}

.delay-5 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.delay-55 {
    -webkit-animation-delay: 5.5s;
    animation-delay: 5.5s
}

.delay-6 {
    -webkit-animation-delay: 6s;
    animation-delay: 6s
}

.delay-65 {
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s
}

.delay-7 {
    -webkit-animation-delay: 7s;
    animation-delay: 7s
}

.delay-75 {
    -webkit-animation-delay: 7.5s;
    animation-delay: 7.5s
}

.delay-s1 {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.delay-s2 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.delay-s3 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.delay-s4 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.delay-s5 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.animated {
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    -o-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated-splash {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp
}

.grecaptcha-badge {
    right: -600px !important
}



/*! lightslider - v1.1.3 - 2015-04-14
* https://github.com/sachinchoolur/lightslider
* Copyright (c) 2015 Sachin N; Licensed MIT */
/** /!!! core css Should not edit !!!/**/ 

.lSSlideOuter { 
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade {
    position: relative;
}
.lSSlideWrapper .lSFade > * {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 9;
    margin-right: 0;
    width: 100%;
}
.lSSlideWrapper.usingCss .lSFade > * {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideWrapper .lSFade > *.active {
    z-index: 10;
}
.lSSlideWrapper.usingCss .lSFade > *.active {
    opacity: 1;
}
/** /!!! End of core css Should not edit !!!/**/

/* Pager */
.lSSlideOuter .lSPager.lSpg {
    position:absolute; margin:auto; bottom:30px; left:0; right:0; z-index:1;
    /*margin: 10px 0 0;*/
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color:#ddd;
    border-radius: 30px;
    display: inline-block;
    height: 16px;
    overflow: hidden;
    text-indent: -999em;
    width: 16px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    border:1px solid #ddd;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #ff6800; border:1px solid #ff6800;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
/* End of pager */

/** Gallery */
.lSSlideOuter .lSPager.lSGallery {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.lSSlideOuter .lSPager.lSGallery li {
    overflow: hidden;
    -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s;
    transition: border-radius 0.12s linear 0s 0.35s linear 0s; border:2px solid #fff; -webkit-transition: all 0.33s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border:2px solid var(--color-orange); -webkit-transition: all 0.33s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}

.lSSlideOuter .lSPager.lSGallery img {
    display: block;
    height: auto;
    max-width: 100%;
}
.lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after {
    content: " ";
    display: table;
}
.lSSlideOuter .lSPager.lSGallery:after {
    clear: both;
}
/* End of Gallery*/

/* slider actions */
.lSAction > a {
    width: 40px;
    display: block;
    top: 50%;
    height: 40px;
   /* background-image: url('../img/controls.png');*/
    cursor: pointer;
    position: absolute;
    z-index: 1;
    margin-top: -22px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    /*background:url(../images/icon-slide.png) no-repeat left center;*/
    left: 30px;
}
.lSAction > .lSPrev:before { content:''; position:absolute; width:0; height:2px; background:#ff6800; left:8px; margin-top:auto; margin-bottom:auto; top:0; bottom:0;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.lSAction > .lSPrev:hover:before { width:30px;  -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }

.lSAction > .lSNext {
    /*background:url(../images/icon-slide.png) no-repeat right center;*/
    right: 30px;
}

.lSAction > .lSNext:before { content:''; position:absolute; width:0; height:2px; background:#ff6800; right:8px; margin-top:auto; margin-bottom:auto; top:0; bottom:0;  -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
.lSAction > .lSNext:hover:before { width:30px; -webkit-transition: all 0.2s ease; -moz-transition: all 02s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }


.lSAction > a.disabled {
    pointer-events: none;
}
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}


/* vertical */
.lSSlideOuter.vertical {
    position: relative;
}
.lSSlideOuter.vertical.noPager {
    padding-right: 0px !important;
}
.lSSlideOuter.vertical .lSGallery {
    position: absolute !important;
    right: 0;
    top: 0;
}
.lSSlideOuter.vertical .lightSlider > * {
    width: 100% !important;
    max-width: none !important;
}

/* vertical controlls */
.lSSlideOuter.vertical .lSAction > a {
    left: 50%;
    margin-left: -14px;
    margin-top: 0;
}
.lSSlideOuter.vertical .lSAction > .lSNext {
    background-position: 31px -31px;
    bottom: 10px;
    top: auto;
}
.lSSlideOuter.vertical .lSAction > .lSPrev {
    background-position: 0 -31px;
    bottom: auto;
    top: 10px;
}
/* vertical */


/* Rtl */
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager {
    padding-right: 0;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lSSlideOuter.lSrtl .lightSlider > *,  .lSSlideOuter.lSrtl .lSGallery li {
    float: right !important;
}
/* Rtl */

@-webkit-keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@keyframes rightEnd {
    0% {
        left: 0;
    }

    50% {
        left: -15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@keyframes topEnd {
    0% {
        top: 0;
    }

    50% {
        top: -15px;
    }

    100% {
        top: 0;
    }
}
@-webkit-keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@keyframes leftEnd {
    0% {
        left: 0;
    }

    50% {
        left: 15px;
    }

    100% {
        left: 0;
    }
}
@-webkit-keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
@keyframes bottomEnd {
    0% {
        bottom: 0;
    }

    50% {
        bottom: -15px;
    }

    100% {
        bottom: 0;
    }
}
.lSSlideOuter .rightEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
.lSSlideOuter .leftEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .rightEnd {
    -webkit-animation: topEnd 0.3s;
    animation: topEnd 0.3s;
    position: relative;
}
.lSSlideOuter.vertical .leftEnd {
    -webkit-animation: bottomEnd 0.3s;
    animation: bottomEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .rightEnd {
    -webkit-animation: leftEnd 0.3s;
    animation: leftEnd 0.3s;
    position: relative;
}
.lSSlideOuter.lSrtl .leftEnd {
    -webkit-animation: rightEnd 0.3s;
    animation: rightEnd 0.3s;
    position: relative;
}
/*/  GRab cursor */
.lightSlider.lsGrab > * {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}


/* Slider */
.slick-loading .slick-list
{
    background:  url('../images/ajax-loading.svg') center center no-repeat;
}

/* Arrows */

.home-banner .slick-prev,
.home-banner .slick-next
{
    position: absolute;
    top: 50%;
    display: block;
    width: 16%;
    height: 100%;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1
}

.slick-prev,
.slick-next
{
    position: absolute;
    top: 50%;
    display: block;
    width: 60px;
    height: 60px;
    padding: 0; overflow: hidden;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .4;
}

.slick-prev:before,
.slick-next:before
{

    opacity: 1;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-banner .slick-prev
{
     left: 0; cursor: url(../images/cursor-prev.svg) 10 15,auto !important; 
}

.slick-prev
{
     left: -50px;
}

[dir='rtl'] .slick-prev
{
    right: 0;
    left: auto;
}
.slick-prev:before
{
    content: '';
}
[dir='rtl'] .slick-prev:before
{
    content: '';
}

.home-banner .slick-next
{
  right: 0; cursor: url(../images/cursor-next.svg) 10 15,auto !important; 
}

.slick-next
{
  right: -50px; 
}

[dir='rtl'] .slick-next
{
    right: auto;
    left: 0;
}
.slick-next:before
{
    content: ''; 
}
[dir='rtl'] .slick-next:before
{
    content: '';
}

/* Dots */
.slick-dotted.slick-slider
{

}

.slick-dots
{
    position: absolute;
    bottom: 15px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    z-index: 9;
}
.slick-dots li
{
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li div
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li div:hover,
.slick-dots li div:focus
{
    outline: none;
}
.slick-dots li div:hover:before,
.slick-dots li div:focus:before
{
    opacity: 1;
}
.slick-dots li div:before
{


    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    content: '';
    text-align: center;
    border-radius: 50%; border: 1px solid #ccc;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 75%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active div:before
{ background: #fff;
}

/* Slider */

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.owl-theme .owl-nav [class*=owl-] {  width: 60px; height: 60px; border-radius:50%; background:var(--color-999);transition: all 0.3s ease }
.owl-theme .owl-nav [class*=owl-]:hover { background:var(--color-orange); transition: all 0.3s ease }
.owl-next:before {
    content: '' ;
    display: inline-flex;
    width: 100%;
    height: 100%;
    background:  url(../images/icon-arrow-right-white.svg) no-repeat center;
    background-size: 70%; border-radius: 50%;
    transition: all .3s ease
}
.owl-next .icon-Next,.owl-next .icon-Previous { text-indent:-999px; }
.owl-prev:before {
    content: '' ;
    display: inline-flex;
    width: 100%;
    height: 100%;
    background:  url(../images/icon-arrow-left-white.svg) no-repeat center;
    background-size: 70%; border-radius: 50%;
    transition: all .3s ease
}