:root {
  --vg-orange: #ff9100;
  --vg-red: #aa0909;
  --vg-pink: #aa0987;
  --vg-brown: #765d4b;
  --vg-yellow: #f0bb00;
  --vg-yellowwhite: #fff7e1;
  --vg-cream: #e0d5be;
  --vg-gold: #ffcc00;
  --vg-yellowwhite: #f3ecce;
  --vg-rosegold: #c6807e;
  --vg-mulberry: #5c0323;
  --vg-gunmetal: #655742;
  --vg-brightpink: #ff007e;
  --vg-chocolate: #8e4d1e;
  --vg-purple: #6d09aa;
  --vg-green: #0caa09;
  --vg-cyan: #00aad9;
  --vg-redwhite: #f3cece;
  --vg-darkcyan: #004c62;
  --vg-bluewhite: 176, 226, 240;
  --vg-bluewhite2: #8ae4f4;
  --vg-greenwhite: #cef3ec;
  --vg-blue: #092caa;
  --vg-darkblue: #0a1d5c;
  --vg-silver: #c0c0c0;
  --vg-black: #090b0b;
  --vg-white: #fff;
  --vg-gray: #ccc;
  --vg-gray-800: #535859;
  --vg-gray-600: #73797b;
  --vg-gray-400: #bcc9cc;
  --vg-gray-300: #cedcdf;
  --vg-gray-200: #dcebee;
  --vg-gray-100: #f9fafb;

  --vg-font-base: 1rem;
  --vg-font-10: 0.625rem;
  --vg-font-12: 0.75rem;
  --vg-font-14: 0.875rem;
  --vg-font-16: 1rem;
  --vg-font-18: 1.125rem;
  --vg-font-20: 1.25rem;
  --vg-font-24: 1.5rem;
  --vg-font-28: 1.75rem;
  --vg-font-32: 2rem;
  --vg-font-36: 2.25rem;
  --vg-font-40: 2.5rem;
  --vg-font-44: 2.75rem;
  --vg-font-48: 3rem;
  --vg-font-56: 3.5rem;
  --vg-font-64: 4rem;
  --vg-font-72: 4.5rem;
  --vg-font-80: 5rem;
  --vg-font-96: 6rem;
  --vg-font-120: 7.5rem;
  --vg-font-bold: bold;
  --vg-font-normal: normal;
  --vg-font-family: "Roboto" ,Meiryo, "Open Sans", Helvetica, Arial, sans-serif;

  --vg-w-1: 8.33333333%;
  --vg-w-2: 16.66666667%;
  --vg-w-25: 29.16666667%;
  --vg-w-3: 25%;
  --vg-w-4: 33.33333333%;
  --vg-w-5: 41.66666667%;
  --vg-w-6: 50%;
  --vg-w-7: 58.33333333%;
  --vg-w-8: 66.66666667%;
  --vg-w-9: 75%;
  --vg-w-10: 83.33333333%;
  --vg-w-11: 91.66666667%;
  --vg-w-12: 100%;

  --vg-align-center: center;

  --vg-display-flex: flex;
  --vg-display-gird: grid;
  --vg-display-block: block;

  --vg-gutter: 0.625rem;
}
/* CSS Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, hr { padding: 0; margin: 0; box-sizing: border-box; font-family: var(--vg-font-family); color: var(--vg-black); } 
table { border-collapse: collapse; border-spacing: 0; } 
fieldset,img { border: 0; } 
address, caption, cite, code, dfn, em, th, var { font-weight: normal; font-style: normal; } 
input, button, select, option, textarea{ font-family: var(--vg-font-family); background: none; }
ol,ul { list-style: none; } 
caption, th { text-align: left; }
h1, h2, h3, h4, h5 { font-weight: bold; font-size: 100%; }
q:before,q:after { content:''; } 
abbr, acronym { border: 0; }
a, button, input[type=submit], input[type=button], input[type=image] { border: none; cursor:pointer; color: var(--vg-black); }
html { font-size: var(--vg-font-16, 1rem); -webkit-text-size-adjust: none; } /* Font Size Hack */
a { text-decoration: underline; }
a:hover, a:focus, a:active { text-decoration: none; color: var(--vg-darkblue); }
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--vg-font-family); font-size: var(--vg-font-16, 1rem); }
main { flex-grow: 1; width: 100%; }
/* reset bootrap css */
.btn-link { margin: 0; padding: 0; border: none; color: var(--vg-black); }
.btn-link:hover, .btn-link:hover *, .btn-link:focus,  .btn-link:focus * { text-decoration: none; outline: none; color: var(--vg-darkblue); }

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { --vg-gutter-y: 0; width: 100%; padding-right: calc(var(--vg-gutter) * 1); padding-left: calc(var(--vg-gutter) * 1); margin-right: auto; margin-left: auto; }
.row { --vg-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--vg-gutter-y)); margin-right: calc(-1 * var(--vg-gutter)); margin-left: calc(-1 * var(--vg-gutter)); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--vg-gutter) * 1); padding-left: calc(var(--vg-gutter) * 1); margin-top: var(--vg-gutter-y); }
.col { flex: 1 0 0%; }
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
.row-cols-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
.row-cols-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
.row-cols-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: var(--vg-w-1); }
.col-2 { flex: 0 0 auto; width: var(--vg-w-2); }
.col-3 { flex: 0 0 auto; width: var(--vg-w-3); }
.col-4 { flex: 0 0 auto; width: var(--vg-w-4); }
.col-5 { flex: 0 0 auto; width: var(--vg-w-5); }
.col-6 { flex: 0 0 auto; width: var(--vg-w-6); }
.col-7 { flex: 0 0 auto; width: var(--vg-w-7); }
.col-8 { flex: 0 0 auto; width: var(--vg-w-8); }
.col-9 { flex: 0 0 auto; width: var(--vg-w-9); }
.col-10 { flex: 0 0 auto; width: var(--vg-w-10); }
.col-11 { flex: 0 0 auto; width: var(--vg-w-11); }
.col-12 { flex: 0 0 auto; width: var(--vg-w-12); }
.offset-1 { margin-left: var(--vg-w-1); }
.offset-2 { margin-left: var(--vg-w-2); }
.offset-3 { margin-left: var(--vg-w-3); }
.offset-4 { margin-left: var(--vg-w-4); }
.offset-5 { margin-left: var(--vg-w-5); }
.offset-6 { margin-left: var(--vg-w-6); }
.offset-7 { margin-left: var(--vg-w-7); }
.offset-8 { margin-left: var(--vg-w-8); }
.offset-9 { margin-left: var(--vg-w-9); }
.offset-10 { margin-left: var(--vg-w-10); }
.offset-11 { margin-left: var(--vg-w-11); }

/* xs */
@media (max-width: 576px) { 
  .container-sm, .container { max-width: 100%; }
  .col-xs { flex: 1 0 0%; }
  .row-cols-xs-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xs-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-xs-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-xs-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xs-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xs-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xs-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xs-auto { flex: 0 0 auto; width: auto; }
  .col-xs-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-xs-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xs-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-xs-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-xs-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-xs-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-xs-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-xs-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-xs-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-xs-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-xs-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-xs-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-xs-0 { margin-left: 0; }
  .offset-xs-1 { margin-left: var(--vg-w-1); }
  .offset-xs-2 { margin-left: var(--vg-w-2); }
  .offset-xs-3 { margin-left: var(--vg-w-3); }
  .offset-xs-4 { margin-left: var(--vg-w-4); }
  .offset-xs-5 { margin-left: var(--vg-w-5); }
  .offset-xs-6 { margin-left: var(--vg-w-6); }
  .offset-xs-7 { margin-left: var(--vg-w-7); }
  .offset-xs-8 { margin-left: var(--vg-w-8); }
  .offset-xs-9 { margin-left: var(--vg-w-9); }
  .offset-xs-10 { margin-left: var(--vg-w-10); }
  .offset-xs-11 { margin-left: var(--vg-w-11); }
}

/* small */
@media (min-width: 576px) { 
  .container-sm, .container { max-width: 540px; }
  .col-sm { flex: 1 0 0%; }
  .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-sm-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-sm-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-sm-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-sm-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-sm-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-sm-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-sm-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-sm-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-sm-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-sm-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-sm-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-sm-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-sm-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-sm-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-sm-0 { margin-left: 0; }
  .offset-sm-1 { margin-left: var(--vg-w-1); }
  .offset-sm-2 { margin-left: var(--vg-w-2); }
  .offset-sm-3 { margin-left: var(--vg-w-3); }
  .offset-sm-4 { margin-left: var(--vg-w-4); }
  .offset-sm-5 { margin-left: var(--vg-w-5); }
  .offset-sm-6 { margin-left: var(--vg-w-6); }
  .offset-sm-7 { margin-left: var(--vg-w-7); }
  .offset-sm-8 { margin-left: var(--vg-w-8); }
  .offset-sm-9 { margin-left: var(--vg-w-9); }
  .offset-sm-10 { margin-left: var(--vg-w-10); }
  .offset-sm-11 { margin-left: var(--vg-w-11); }
}
/* Medium */
@media (min-width: 768px) {
  .container-md, .container-sm, .container { max-width: 720px; }
  .col-md { flex: 1 0 0%; }
  .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-md-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-md-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-md-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-md-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-md-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-md-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-md-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-md-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-md-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-md-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-md-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-md-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-md-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-md-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-md-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-md-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: var(--vg-w-1); }
  .offset-md-2 { margin-left: var(--vg-w-2); }
  .offset-md-3 { margin-left: var(--vg-w-3); }
  .offset-md-4 { margin-left: var(--vg-w-4); }
  .offset-md-5 { margin-left: var(--vg-w-5); }
  .offset-md-6 { margin-left: var(--vg-w-6); }
  .offset-md-7 { margin-left: var(--vg-w-7); }
  .offset-md-8 { margin-left: var(--vg-w-8); }
  .offset-md-9 { margin-left: var(--vg-w-9); }
  .offset-md-10 { margin-left: var(--vg-w-10); }
  .offset-md-11 { margin-left: var(--vg-w-11); }
}
/* Large */
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container { max-width: 960px; }
  .col-lg { flex: 1 0 0%; }
  .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-lg-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-lg-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-lg-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-lg-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-lg-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-lg-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-lg-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-lg-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-lg-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-lg-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-lg-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-lg-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: var(--vg-w-1); }
  .offset-lg-2 { margin-left: var(--vg-w-2); }
  .offset-lg-3 { margin-left: var(--vg-w-3); }
  .offset-lg-4 { margin-left: var(--vg-w-4); }
  .offset-lg-5 { margin-left: var(--vg-w-5); }
  .offset-lg-6 { margin-left: var(--vg-w-6); }
  .offset-lg-7 { margin-left: var(--vg-w-7); }
  .offset-lg-8 { margin-left: var(--vg-w-8); }
  .offset-lg-9 { margin-left: var(--vg-w-9); }
  .offset-lg-10 { margin-left: var(--vg-w-10); }
  .offset-lg-11 { margin-left: var(--vg-w-11); }
}
/* X-Large */
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; }
  .col-xl { flex: 1 0 0%; }
  .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xl-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-xl-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-xl-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xl-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xl-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-xl-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xl-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-xl-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-xl-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-xl-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-xl-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-xl-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-xl-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-xl-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-xl-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-xl-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-xl-0 { margin-left: 0; }
  .offset-xl-1 { margin-left: var(--vg-w-1); }
  .offset-xl-2 { margin-left: var(--vg-w-2); }
  .offset-xl-25 { margin-left: var(--vg-w-25); }
  .offset-xl-3 { margin-left: var(--vg-w-3); }
  .offset-xl-4 { margin-left: var(--vg-w-4); }
  .offset-xl-5 { margin-left: var(--vg-w-5); }
  .offset-xl-6 { margin-left: var(--vg-w-6); }
  .offset-xl-7 { margin-left: var(--vg-w-7); }
  .offset-xl-8 { margin-left: var(--vg-w-8); }
  .offset-xl-9 { margin-left: var(--vg-w-9); }
  .offset-xl-10 { margin-left: var(--vg-w-10); }
  .offset-xl-11 { margin-left: var(--vg-w-11); }
}
/* XX-Large */
@media (min-width: 1440px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1440px; }
  .col-xxl { flex: 1 0 0%; }
  .row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }
  .row-cols-xxl-1 > * { flex: 0 0 auto; width: var(--vg-w-12); }
  .row-cols-xxl-2 > * { flex: 0 0 auto; width: var(--vg-w-6); }
  .row-cols-xxl-3 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xxl-4 > * { flex: 0 0 auto; width: var(--vg-w-3); }
  .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xxl-6 > * { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 auto; width: var(--vg-w-1); }
  .col-xxl-2 { flex: 0 0 auto; width: var(--vg-w-2); }
  .col-xxl-3 { flex: 0 0 auto; width: var(--vg-w-3); }
  .col-xxl-4 { flex: 0 0 auto; width: var(--vg-w-4); }
  .col-xxl-5 { flex: 0 0 auto; width: var(--vg-w-5); }
  .col-xxl-6 { flex: 0 0 auto; width: var(--vg-w-6); }
  .col-xxl-7 { flex: 0 0 auto; width: var(--vg-w-7); }
  .col-xxl-8 { flex: 0 0 auto; width: var(--vg-w-8); }
  .col-xxl-9 { flex: 0 0 auto; width: var(--vg-w-9); }
  .col-xxl-10 { flex: 0 0 auto; width: var(--vg-w-10); }
  .col-xxl-11 { flex: 0 0 auto; width: var(--vg-w-11); }
  .col-xxl-12 { flex: 0 0 auto; width: var(--vg-w-12); }
  .offset-xxl-0 { margin-left: 0; }
  .offset-xxl-1 { margin-left: var(--vg-w-1); }
  .offset-xxl-2 { margin-left: var(--vg-w-2); }
  .offset-xxl-3 { margin-left: var(--vg-w-3); }
  .offset-xxl-4 { margin-left: var(--vg-w-4); }
  .offset-xxl-5 { margin-left: var(--vg-w-5); }
  .offset-xxl-6 { margin-left: var(--vg-w-6); }
  .offset-xxl-7 { margin-left: var(--vg-w-7); }
  .offset-xxl-8 { margin-left: var(--vg-w-8); }
  .offset-xxl-9 { margin-left: var(--vg-w-9); }
  .offset-xxl-10 { margin-left: var(--vg-w-10); }
  .offset-xxl-11 { margin-left: var(--vg-w-11); }
}

/* web style */
.vg-d-block { display: var(--vg-display-block); }
.vg-d-flex { display: var(--vg-display-flex); }
.vg-d-gird { display: var(--vg-display-gird); }
.vg-d-inline-block { display: inline-block; }

.vg-orange { color: var(--vg-orange); }
.vg-red { color: var(--vg-red); }
.vg-yellow { color: var(--vg-yellow); }
.vg-purple { color: var(--vg-purple); }
.vg-cyan { color: var(--vg-cyan); }
.vg-darkcyan { color: var(--vg-darkcyan); }
.vg-bluewhite { color: rgba(var(--vg-bluewhite), 1); }
.vg-blue { color: var(--vg-blue); }
.vg-darkblue { color: var(--vg-darkblue); }
.vg-black { color: var(--vg-black); }
.vg-gold { color: var(--vg-gold); }
.vg-white { color: var(--vg-white); }
.vg-gray { color: var(--vg-gray); }
.vg-gray-800 { color: var(--vg-gray-800); }
.vg-gray-400 { color: var(--vg-gray-400); }
.vg-gray-300 { color: var(--vg-gray-300); }
.vg-gray-200 { color: var(--vg-gray-200); }
.vg-gray-100 { color: var(--vg-gray-100); }

.vg-mat-40 { margin-top: calc(var(--vg-gutter) * 4); }
.vg-mat-30 { margin-top: calc(var(--vg-gutter) * 3); }
.vg-mat-25 { margin-top: calc(var(--vg-gutter) * 2.5); }
.vg-mat-20 { margin-top: calc(var(--vg-gutter) * 2); }
.vg-mat-15 { margin-top: calc(var(--vg-gutter) * 1.5); }
.vg-mat-10 { margin-top: var(--vg-gutter); }
.vg-mat-5 { margin-top: calc(var(--vg-gutter) / 2); }

.vg-mat-r-40 { margin-right: calc(var(--vg-gutter) * 4); }
.vg-mat-r-30 { margin-right: calc(var(--vg-gutter) * 3); }
.vg-mat-r-20 { margin-right: calc(var(--vg-gutter) * 2); }
.vg-mat-r-15 { margin-right: calc(var(--vg-gutter) * 1.5); }
.vg-mat-r-10 { margin-right: var(--vg-gutter); }
.vg-mat-r-5 { margin-right: calc(var(--vg-gutter) / 2); }

.vg-mat-l-40 { margin-left: calc(var(--vg-gutter) * 4); }
.vg-mat-l-30 { margin-left: calc(var(--vg-gutter) * 3); }
.vg-mat-l-20 { margin-left: calc(var(--vg-gutter) * 2); }
.vg-mat-l-15 { margin-left: calc(var(--vg-gutter) * 1.5); }
.vg-mat-l-10 { margin-left: var(--vg-gutter); }
.vg-mat-l-5 { margin-left: calc(var(--vg-gutter) / 2); }

.vg-mat-b-40 { margin-bottom: calc(var(--vg-gutter) * 4); }
.vg-mat-b-30 { margin-bottom: calc(var(--vg-gutter) * 3); }
.vg-mat-b-20 { margin-bottom: calc(var(--vg-gutter) * 2); }
.vg-mat-b-15 { margin-bottom: calc(var(--vg-gutter) * 1.5); }
.vg-mat-b-10 { margin-bottom: var(--vg-gutter); }
.vg-mat-b-5 { margin-bottom: calc(var(--vg-gutter) / 2); }

.vg-f-10 { font-size: var(--vg-font-10); }
.vg-f-12 { font-size: var(--vg-font-12); }
.vg-f-14 { font-size: var(--vg-font-14); }
.vg-f-16 { font-size: var(--vg-font-16); }
.vg-f-18 { font-size: var(--vg-font-18); }
.vg-f-20 { font-size: var(--vg-font-20); }
.vg-f-24 { font-size: var(--vg-font-24); }
.vg-f-28 { font-size: var(--vg-font-28); }
.vg-f-32 { font-size: var(--vg-font-32); }
.vg-f-36 { font-size: var(--vg-font-36); }
.vg-f-40 { font-size: var(--vg-font-40); }
.vg-f-44 { font-size: var(--vg-font-44); }
.vg-f-48 { font-size: var(--vg-font-48); }
.vg-f-56 { font-size: var(--vg-font-56); }
.vg-f-64 { font-size: var(--vg-font-64); }
.vg-f-72 { font-size: var(--vg-font-72); }
.vg-f-80 { font-size: var(--vg-font-80); }
.vg-f-96 { font-size: var(--vg-font-96); }
.vg-f-120 { font-size: var(--vg-font-120); }
.vg-f-bold { font-weight: var(--vg-font-bold); }
.vg-f-normal { font-weight: var(--vg-font-normal); }

.vg-frame-color { display: var(--vg-display-block); overflow: hidden; width: 36px; height: 36px; padding: 5px; border: 1px solid transparent; border-radius: 18px; cursor: pointer; }
.vg-frame-color:hover { padding: 3px; border-color: var(--vg-gray-600); border-radius: 20px; }
.vg-frame-color:hover * { border-radius: 14px; }
.vg-frame-color-active { border-width: 2px; padding: 4px; border-color: var(--vg-black); cursor: auto; }
.vg-frame-color-active:hover { padding: 4px; border-width: 2px; border-color: var(--vg-black); }
.vg-frame-color * { display: var(--vg-display-block); width: 100%; height: 100%; text-indent: -1000px; border-radius: 12px; }
.vg-more { display: var(--vg-display-block); overflow: hidden; width: 24px; height: 24px; padding: 2px 0 0 2px; border: 1px solid var(--vg-gray-600); border-radius:50%; cursor: pointer; }
.vg-more:hover { background-color: var(--vg-black); color: var(--vg-white); }

.vg-frame-color-black { background-color: var(--vg-black); }
.vg-frame-color-pink { background-color: var(--vg-pink); }
.vg-frame-color-clear { border: 1px solid var(--vg-gray-600); background: linear-gradient(225deg, var(--vg-greenwhite) 27.6%, rgba(224,236,220,0)); }
.vg-frame-color-blue { background-color: var(--vg-blue); }
.vg-frame-color-purple { background-color: var(--vg-purple); }
.vg-frame-color-green { background-color: var(--vg-green); }
.vg-frame-color-red { background-color: var(--vg-red); }
.vg-frame-color-rainbow { background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(13,110,253,1) 60%, rgba(127,18,211,1) 70%, rgba(217,70,239,1) 80%, rgba(252,176,69,1) 90%, rgba(255,0,0,1) 100% ); background-size: 200% 100%; transition: all 0.3s ease; }
.vg-frame-color-gold { background-color: var(--vg-gold); }
.vg-frame-color-white { border: 1px solid var(--vg-gray-600); background-color: var(--vg-white); }
.vg-frame-color-cream { border: 1px solid var(--vg-gray-600); background-color: var(--vg-cream); }
.vg-frame-color-multicolor { background: conic-gradient(var(--vg-red) 0deg 45deg, var(--vg-blue) 45deg 135deg, var(--vg-green) 135deg 225deg, var(--vg-yellow) 225deg 315deg, var(--vg-red) 315deg 360deg); }
.vg-frame-color-orange { background-color: var(--vg-orange); }
.vg-frame-color-grey { background-color: var(--vg-gray-600); }
.vg-frame-color-yellow { background-color: var(--vg-yellow); }
.vg-frame-color-sliver { background: linear-gradient(225deg, var(--vg-gray-200) 25%, var(--vg-gray-400) 50%, var(--vg-gray-200) 75%); }
.vg-frame-color-rose-gold { background-color: var(--vg-rosegold); }
.vg-frame-color-burgundy { background-color: var(--vg-mulberry); }
.vg-frame-color-gunmetal { background-color: var(--vg-gunmetal); }
.vg-frame-color-matt { background-color: var(--vg-gray-800); }
.vg-frame-color-brown { background-color: var(--vg-brown); }
.vg-frame-color-bright-pink { background-color: var(--vg-brightpink); }
.vg-frame-color-chocolate { background-color: var(--vg-chocolate); }
.vg-frame-color-cyan { background-color: var(--vg-cyan); }
.vg-frame-color-darkcyan { background-color: var(--vg-darkcyan); }
.vg-frame-color-bluewhite { background-color: rgba(var(--vg-bluewhite), 1); }
.vg-frame-color-darkblue { background-color: var(--vg-darkblue); }
.vg-frame-color-silver { background-color: var(--vg-silver); }
.vg-frame-color:hover .vg-frame-color-clear, .vg-frame-color:hover .vg-frame-color-white, .vg-frame-color:hover .vg-frame-color-cream { border: none; }
.vg-card-color-list .vg-more { margin-top: 6px; margin-left: 6px; }

.vg-icon-trans { position: relative; display: inline-block; width: 24px; height: 24px; }
.vg-icon-trans * { position: absolute; top: 0; left: 0; transition: all 0.2s ease-in-out; }
.vg-icon-trans-c { z-index: 1; opacity: 1; }
.vg-icon-trans-h { z-index: 2; opacity: 0; }
.vg-icon-trans:hover .vg-icon-trans-c, .vg-icon-trans:active .vg-icon-trans-h { opacity: 0; }
.vg-icon-trans:hover .vg-icon-trans-h, .vg-icon-trans:active .vg-icon-trans-h { opacity: 1; }

.vg-item-center { align-items: center; justify-content: center; }
.vg-item-top { align-items: flex-start; }
.vg-align-center { text-align: center; }
.vg-align-left { text-align: left; }
.vg-align-right { text-align: right; }

.vg-link { text-decoration: underline; cursor: pointer; }
.vg-link:hover { text-decoration: none; color: var(--vg-darkblue); }

.vg-card { position: relative; height: 100%; padding: var(--vg-gutter); border-radius: calc(var(--vg-gutter) * 1.5); background-color: var(--vg-gray-100); transition: margin 0.5s; }
.vg-card:hover { margin: 0 calc(-1 * var(--vg-gutter) / 2); }
.vg-card .vg-image { display: var(--vg-display-flex); overflow: hidden; height: 300px; border-radius: calc(var(--vg-gutter) * 1.5); background-color: var(--vg-white); }
.vg-card .vf-card-name { margin: calc(var(--vg-gutter) * 1.5) 0; font-weight: var(--vg-font-normal); font-size: var(--vg-font-18); }
.vg-card:hover .vf-card-name a { color: var(--vg-darkblue); }
.vg-card-color-list { margin: var(--vg-gutter) 0; gap: calc(var(--vg-gutter) / 2); }
.vg-card-base-line { position: absolute; top: calc(var(--vg-gutter) * 2); left: 0; justify-content: space-between; width: 100%; padding: 0 calc(var(--vg-gutter) * 2); }
.vg-card-info { justify-content: space-between; margin: var(--vg-gutter) 0; height: var(--vg-font-24); line-height: var(--vg-font-24); }
.vg-card-badge { gap: calc(var(--vg-gutter) / 2); }
.vg-card-badge span { height: var(--vg-font-24); padding: 0 var(--vg-gutter); color: var(--vg-gray-800); border-radius: calc(var(--vg-gutter) * 1.5); line-height: var(--vg-font-24); }
.vg-card-badge span.vg-card-badge-latest { background-color: var(--vg-greenwhite); }
.vg-card-badge span.vg-card-badge-best { background-color: var(--vg-redwhite); }
.vg-card-badge span.vg-card-badge-popular { background-color: var(--vg-yellowwhite); }

.vg-card-rows-container { overflow: hidden; }
.vg-card-rows-wrap { display: var(--vg-display-flex); margin: 0; padding: 0; transition: transform 0.3s ease; }
.vg-card-rows-item { flex-shrink: 0; max-width: 100%; padding-right: calc(var(--vg-gutter)* 1); padding-left: calc(var(--vg-gutter)* 1); margin-top: var(--vg-gutter-y); flex: 0 0 auto; }
.vg-card-rows-pager { gap: var(--vg-gutter); }
.products { position: relative; }

.vg-loading { width: 40px; min-height: 20px; position: relative; }

.vg-loading:before { font-family: "FontAwesome"; content: "\f110"; font-size: 24px; color: var(--vg-darkblue); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: fa-spin 1s infinite linear; }
.modal .vg-loading-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 1rem); flex-direction: column; }
.modal .vg-loading { margin-bottom: 10px; }
.modal .vg-loading:before { color: rgba(var(--vg-bluewhite), 0.8); }
.modal .vg-loading-text { color: var(--vg-darkwhite); }
#glassesInfoModal.modal.in .modal-dialog { transform: translateY(33%); }
.vg-itemEditModal-modal.modal.in .modal-dialog { transform: translateY(33%); }

.vg-loading-text { position: relative; display: block; width: auto; min-width: 60px; text-align: center; margin: 0 auto; font-size: 14px; color: #666; }

.vg-loading-text:after { content: ''; animation: dots 1.5s infinite ease-in-out;  }

@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }
@keyframes fa-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/*.vg-frame-list { grid-template-columns: repeat(6, 1fr); gap: calc(var(--vg-gutter) * 2); }*/
.vg-frame-list .vg-frame-item { text-align: center; }
.vg-frame-list .vg-frame-item img { padding: 1px; border-radius: calc(var(--vg-gutter) * 1.5); background-color: rgba(var(--vg-bluewhite), 1); }
.vg-frame-list .vg-frame-item:hover img { padding: 0; border: 1px solid var(--vg-gray-800); background-color: rgba(var(--vg-bluewhite), 0.5);}
.vg-face .vg-frame-list .vg-frame-item img { background: var(--vg-white); }

.vg-swiper-container { position: relative; overflow: hidden; z-index: 1; }
.vg-swiper-wrapper { gap: calc(var(--vg-gutter) * 2); transition: transform 0.3s ease; }
.vg-swiper-slide { overflow: hidden; border-radius: calc(var(--vg-gutter) * 1.5); flex: 0 0 1232px; }
.vg-swiper-pagination { display: inline-block; height: 16px; margin: 0 5px; }
.vg-swiper-pagination span { overflow: hidden; display: inline-block; width: 16px; height: 16px; margin: 0 5px; text-indent: -100px; border-radius: 50%; border: 1px solid var(--vg-gray-600); background-color: transparent; transition: background-color 0.2s ease-in-out; cursor: pointer; }
.vg-swiper-pagination span.vg-swiper-pagination-active, .vg-swiper-pagination span:hover { border-width: 1px; border-color: var(--vg-black); background-color: var(--vg-black); }
.vg-swiper-buttion:hover { color: var(--vg-black); background-color: transparent; }



.vg-swiper-buttion, .vg-close-btn, .vg-card-rows-button { position: relative; display: inline-block; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vg-black); font-size: var(--vg-font-16); font-weight: var(--vg-font-bold); line-height: 28px; text-align: center; background-color: var(--vg-black); color: var(--vg-white); text-indent: -1000px; transition: background-color 0.2s ease-in-out; cursor: pointer; }
.vg-close-btn::before, .vg-close-btn::after { content: ""; position: absolute; width: 2px; height: 12px; background-color: var(--vg-white); top: 9px; left: 14px; transition: background-color 0.2s ease, transform 0.2s ease; }
.vg-close-btn::before { transform: rotate(45deg); }
.vg-close-btn::after { transform: rotate(-45deg); }
.vg-close-btn:hover { border-color: var(--vg-black); background-color: var(--vg-white); color: var(--vg-black); }
.vg-close-btn:hover::before { background-color: var(--vg-black); transform: rotate(-45deg); }
.vg-close-btn:hover::after { background-color: var(--vg-black); transform: rotate(45deg); }
.vg-close-btn:active::before,.vg-close-btn:active::after { transform: rotate(-45deg) scale(0.8); }
.vg-close-btn:active::after { transform: rotate(45deg) scale(0.8); }
.vg-button-prev::before, .vg-button-prev::after, .vg-button-next::before, .vg-button-next::after { content: ""; position: absolute; width: 2px; height: 8px; background-color: var(--vg-white); top: 7px; left: 11px; transition: background-color 0.2s ease, transform 0.2s ease; }
.vg-button-prev::before { transform: rotate(45deg); transform-origin: 50% 100%; }
.vg-button-prev::after { top: 15px; transform: rotate(-45deg); transform-origin: 50% 0%; }
.vg-button-prev:hover, .vg-button-next:hover { border-color: var(--vg-black); background-color: var(--vg-white); color: var(--vg-black); }
.vg-button-prev:hover::before { background-color: var(--vg-black); transform: rotate(135deg); }
.vg-button-prev:hover::after { background-color: var(--vg-black); transform: rotate(-135deg); }
.vg-button-prev:active::before,.vg-button-prev:active::after { transform: rotate(135deg) scale(0.8); }
.vg-button-prev:active::after { transform: rotate(-135deg) scale(0.8); }
.vg-button-next::before { left: 17px; transform: rotate(-45deg); transform-origin: 50% 100%; }
.vg-button-next::after { top: 15px; left: 17px; transform: rotate(45deg); transform-origin: 50% 0%; }
.vg-button-next:hover::before { background-color: var(--vg-black); transform: rotate(-135deg); }
.vg-button-next:hover::after { background-color: var(--vg-black); transform: rotate(135deg); }
.vg-button-next:active::before,.vg-button-next:active::after { transform: rotate(-135deg) scale(0.8); }
.vg-button-next:active::after { transform: rotate(135deg) scale(0.8); }

.vg-card-rows-button-disabled, .vg-card-rows-button-disabled:hover { border: 1px; background-color: var(--vg-gray-200); cursor: auto; color: var(--vg-gray-400); }
.vg-card-rows-button-disabled::before, .vg-card-rows-button-disabled::after, .vg-card-rows-button-disabled:hover::before, .vg-card-rows-button-disabled:hover::after { color: var(--vg-gray-400); background-color: var(--vg-gray-400); }
/* header */ 
                
.vg-page-header { position: sticky; top: 0; left: 0; z-index: 101; margin: 0; padding: 0; border: none; background-color: var(--vg-white); transition: all 0.2s ease; will-change: height; }
.vg-page-header .container { height: 80px; padding-top: var(--vg-gutter); padding-bottom: var(--vg-gutter); transition: all 0.05s ease; }
.vg-header-completely-sticky { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.vg-header-completely-sticky .vg-top-links { display: none; }
.vg-nav-side-w, .vg-nav-side-w > * { height: 100%; }
.vg-page-header .vg-search { flex: 1; }
.vg-page-header .vg-search .input-group { width: 70%; transition: all 0.2s ease; }
.vg-page-header .vg-search .input-group:focus-within { width: 80%; }
.vg-page-header .vg-search .input-group .form-control { width: 100%; border-radius: 17px 0 0 17px; }
.vg-page-header .vg-search .input-group .btn { border-radius: 0 17px 17px 0; }
.vg-top-nav { display: flex; position: relative; z-index: 101; }
.vg-page-header .vg-nav-side { width: 220px; height: 100%; }
.vg-page-header .vg-logo { max-width: 220px; transition: transform 0.2s ease; transform-origin: left center; }
.vg-header-completely-sticky .vg-logo { }
.vg-logo-parent, .vg-next-container { transition: all 0.05s ease; }
.vg-page-header-flow .vg-logo { max-width: 180px; }
.vg-page-header-flow { max-width: 100%; height: 60px; padding-top: var(--vg-gutter); padding-bottom: var(--vg-gutter); border-bottom: 1px solid var(--vg-gray-400); }

.vg-page-body { position: relative; transition: padding-top 0.2s ease !important; will-change: padding-top; }
.vg-page-body-flow { padding-top: 20px; padding-bottom: 20px; background-color: rgba(var(--vg-bluewhite), 0.2); }

.vg-top-sticky { position: fixed; width: var(--vg-w-12); }
.vg-top-sticky .container {  }
.vg-top-sticky .vg-top-menu .container { padding-top: 0; padding-bottom: 0; }

.vg-top-links { width: 100%; }

.sidebar { position: fixed; top: 0; right: 0; width: 300px; height: 100%; background-color: white; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 1000; padding: 20px; overflow-y: auto; }
.sidebar.active { transform: translateX(0); }
.sidebar .vg-close-btn { position: absolute; z-index: 1; top: 15px; right: 15px; }
.vg-nav-side-w .dropdown-menu { min-width: auto; }

.vg-top-links { height: 40px; padding: 8px 0; font-size: var(--vg-font-16, 1rem); color: var(--vg-gray-800); background: rgba(var(--vg-bluewhite), 1); }

.vg-top-menu { position: relative; z-index: 100; max-height: 40px; border-top: 1px solid var(--vg-gray-400); border-bottom: 1px solid var(--vg-gray-400); background-color: var(--vg-gray-100); }
.vg-top-menu .container { height: 38px; }

.vg-nav-side { margin-top: 5px; align-items: center; justify-content: flex-end; gap: calc(var(--vg-gutter) * 1.5); }
.vg-nav-side .btn-group { position: static; }
.vg-nav-side .btn-group .vg-nav-side-info { padding: calc(var(--vg-gutter) / 2) calc(var(--vg-gutter) / 2); }
.vg-nav-side > div { position: relative; }
.vg-nav-side > div .vg-nav-side-link { height: 60px; cursor: pointer; }
.vg-nav-side > div .vg-nav-side-link:after { position: absolute; bottom: -6px; left: 0; z-index: 1; display: var(--vg-display-block); content: ''; width: 0; height: 4px; background: var(--vg-darkblue); transition: width 0.5s; -webkit-transition:width 0.5s; }
.vg-nav-side > div:hover .vg-nav-side-link:after { width: var(--vg-w-12); }
.vg-nav-side .btn-group .dropdown-menu { width: 100%; top: calc(100% - 4px); z-index: 0; padding: 0; border-radius: 0; }
.vg-nav-side .vg-nav-side-currency .vg-nav-side-info button { text-align: left; }
.vg-nav-side .vg-nav-side-ico, .vg-nav-side .vg-nav-side-txt { line-height:; font-size: var(--vg-font-24); font-weight: var(--vg-font-bold); }
.vg-nav-side .vg-nav-side-txt { font-size: var(--vg-font-14); }
.vg-nav-side-link { flex-direction: column; }
.vg-nav-side-link a { text-decoration: none; }
.vg-nav-side-link a:hover { color: var(--vg-black); }
.vg-nav-side .vg-nav-side-info .vg-f-18 { display: var(--vg-display-block); height: 30px; line-height: 30px; }
.vg-nav-side .vg-nav-side-info.sidebar .vg-close-btn { left: 250px; right: auto; }

.vg-top-menu .container { padding-top: 0; padding-bottom: 0; }
.vg-top-menu .navbar { height: 38px; min-height: auto; margin-bottom: 0; border: none; line-height: 38px; }
.vg-top-menu .navbar-nav > li > a { padding-top: 0; padding-bottom: 0; line-height: 38px; }
.vg-top-menu .navbar-nav .dropdown { height: 38px; }

.vg-service { grid-template-columns: repeat(6, 1fr); gap: var(--vg-gutter); overflow-x: auto; overflow-y: hidden; border-radius: 5px; }
.vg-service div { display: flex; flex-direction: column; min-width: 200px; min-height: 70px; max-height: 72px; padding: calc(var(--vg-gutter) / 2) calc(var(--vg-gutter) / 2); border-radius: 8px; background-color: var(--vg-gray-100); }
.vg-service div.vg-service-fso { background-color: var(--vg-darkblue); }
.vg-service div:not(.vg-service-fso):hover { padding: calc(var(--vg-gutter) / 2 - 1px) calc(var(--vg-gutter) / 2 - 1px); border: 1px solid var(--vg-gray-300); }
.vg-service div .f-24 { line-height: var(--vg-font-24); }

.vg-bestseller, .vg-popular, .vg-latest { padding-top: calc(var(--vg-gutter) * 4); padding-bottom: calc(var(--vg-gutter) * 4); background: url(../image/bestseller-bg.png); }
.vg-popular { background: url(../image/hypnotize.webp); }
.vg-latest { background: url(../image/wormz.webp); }

#carousel-0 .vg-swiper-container { position: relative; overflow: hidden; z-index: 1; }
#carousel-0 .vg-swiper-wrapper { gap: calc(var(--vg-gutter) * 2); transition: transform 0.3s ease; }
#carousel-0 .vg-swiper-slide { overflow: hidden; gap: calc(var(--vg-gutter) * 2); justify-content: space-between; border-radius: calc(var(--vg-gutter) * 1.5); flex: 0 0 600px; }

.vg-product-img .vg-swiper-viewport { flex-direction: row-reverse; justify-content: flex-end; width: 100%; }
.vg-product-img .vg-swiper-container { width: 800px; }
.vg-product-img .vg-swiper-slide { flex: 0 0 100%; }
.vg-product-img .vg-swiper-pagination { width: 120px; margin: 0; }
.vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { display: flex; width: 100px; height: 50px; margin-bottom: 10px; margin-left: 0; border-radius: 3px; text-indent: 0; text-align: center; align-items: center; justify-content: center; background: none; }
.vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button:hover { background: none; }

.vg-star-rating { position: relative; }
.vg-star-rating > * { width: 100%; }
.vg-star-rating .vg-stars-container .fa-star { color: var(--vg-gray-300); }
.vg-star-rating .vg-stars-fill { position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; }
.vg-star-rating .vg-stars-fill .fa-star, .review-rating-selected, .review-rating-hover { color: var(--vg-gold); }

.vg-product-rating { padding: 3px 8px; border-radius: 8px; background-color: var(--vg-yellowwhite); }
.vg-product-rating strong { margin: 0 5px; }

.vg-glasses-data-img { max-width: 800px; max-height: 400px; position: relative; display: flex; }
.vg-glasses-data-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.vg-svg-txt { position: absolute; padding: 3px 5px 2px; border-radius: 8px; line-height: var(--vg-font-14); font-size: var(--vg-font-14); background-color: var(--vg-white); }

.modal.modal-center .modal-content { box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.modal.modal-center .modal-body { max-height: 70vh; overflow-y: auto; }
.modal.modal-center .modal-header { min-height: 60px; line-height: 20px; }
.modal.modal-center { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1050; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: 0; background: rgba(0, 0, 0, 0.5); }
.modal.modal-center .modal-dialog { width: auto; max-width: 700px; margin: 100px auto 20px; padding: 0 15px; }
.modal.modal-center .modal-content { background-color: #fff; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 20px; }

.vg-glasses-option { height: 30px; }
.vg-glasses-option label { width: 50px; height: 30px; line-height: 30px }
.vg-glasses-option .form-group { margin-bottom: 0; }
.vg-glasses-option div { flex: 1; }
.vg-glasses-option div select { border-radius: 0; }
.vg-glasses-option div:nth-child(2) select { border-left: 1px solid var(--vg-gray); }
.vg-glasses-option div:nth-child(3) select { border-left: 1px solid var(--vg-gray); border-right: 1px solid var(--vg-gray); }
.vg-glasses-option div:nth-child(4) select { border-right: 1px solid var(--vg-gray);  }
.vg-glasses-option div select:focus-within, .vg-glasses-option div select:nth-child(2):focus-within, .vg-glasses-options .vg-glasses-option:nth-child(4) div select:focus-within { border-color: #66afe9; }

.vg-glasses-option div:nth-child(2).has-error select { border-left-color: #a94442; }
.vg-glasses-option div:nth-child(4).has-error select { border-right-color: #a94442; }
.vg-glasses-option div:nth-child(3).has-error select { border-left-color: #a94442; border-right-color: #a94442; }
.vg-glasses-options .vg-glasses-option:nth-child(4) div.has-error select { border-right: 1px solid #a94442; border-color: #a94442; }

.vg-glasses-options .vg-glasses-option:nth-child(2) div.has-error select { border: 1px solid #a94442; padding-bottom: 0; }
.vg-glasses-options .vg-glasses-option:nth-child(3) div.has-error select { border: 1px solid #a94442; }

.vg-glasses-options .vg-glasses-option:nth-child(2) div select { border-bottom: none; padding-bottom: 1px; }

.vg-glasses-options .vg-glasses-option:nth-child(2) div:nth-child(2) select { border-radius: 3px 0 0 0; }
.vg-glasses-options .vg-glasses-option:nth-child(2) div:nth-child(4) select { border-radius: 0 3px 0 0; }

.vg-glasses-options .vg-glasses-option:nth-child(3) div:nth-child(2) select { border-radius: 0 0 0 3px; }
.vg-glasses-options .vg-glasses-option:nth-child(3) div:nth-child(4) select { border-radius: 0 0 3px 0; }
.vg-glasses-options .vg-glasses-option:nth-child(4) div select { border-radius: 3px; border: 1px solid var(--vg-gray); }
.vg-glasses-options { border-radius: 8px; padding: calc(var(--vg-gutter) * 2); background-color: var(--vg-gray-100); }

.glasses-info { cursor: pointer; }
.glasses-info:hover { color: var(--vg-darkblue); }

.form-group .vg-card-color-list { margin: 0;  flex-wrap: wrap; }
.form-group .vg-card-color-list > span { display: inline-block; }

.btn-primary { padding: 0; height: 34px; padding: 0 15px; border-radius: 25px; line-height: 34px; background-color: var(--vg-darkblue); border-color: var(--vg-darkblue); }
.btn-primary.focus, .btn-primary:focus, .btn-primary:hover, .btn-primary:active:focus { color: var(--vg-darkblue); background-color: var(--vg-bluewhite2); border-color: var(--vg-bluewhite2); }
.btn-default { border-radius: 25px; }
.btn-info { border-radius: 100px; border-color: #6a5f6c; background-color: #6a5f6c; }
.btn-info.focus, .btn-info:focus, .btn-info:hover, .btn-info:active:focus { border-color: #8d7d90; background-color: #8d7d90; }

.nav-tabs { padding-left: calc(var(--vg-gutter) * 4); border-top: 1px solid var(--vg-gray-400); border-bottom: 1px solid var(--vg-gray-400); }
.nav-tabs > li { margin-top: -1px; }
.nav-tabs > li:hover, .nav-tabs > li > a:hover, .nav-tabs > li > a { height: 40px; line-height: 20px; background: none; border: none; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-radius: 0; border-top: 4px solid var(--vg-darkblue); border-left: 1px solid var(--vg-gray-400); border-right: 1px solid var(--vg-gray-400); padding-top: 6px; background-color: var(--vg-gray-100); }
.tab-content > .active { background-color: var(--vg-gray-100); }
.tab-pane { padding: 20px 40px; }
#tab-specification > div { flex-wrap: wrap; gap: calc(var(--vg-gutter) * 4); }
#tab-specification ul li { height: 24px; margin-top: 10px; line-height: 24px; }
#tab-specification ul li img { margin-right: calc(var(--vg-gutter) * 2); }

.vg-top-border { border-top: 1px solid var(--vg-gray-400); }

.vg-footer-newsletter {  }
.vg-footer-newsletter .vg-item-center { height: 74px; padding: 20px 0; gap: calc(var(--vg-gutter) * 4); }
.vg-footer-newsletter .form-control { min-width: 350px; border-radius: 25px; transition: all 0.2s ease; }
.vg-footer-newsletter .form-control:focus-within { min-width: 400px; }
.vg-footer-newsletter .btn-primary { width: 80px; height: 28px; margin-left: -83px; padding: 0 8px; font-weight: bold; font-size: 12px; line-height: 26px; }
.vg-footer-help { padding: 20px 0; background: linear-gradient(0deg, var(--vg-gray-200) 0%, var(--vg-gray-100) 45.33%, var(--vg-white) 100%); }
.vg-footer-help ul li { overflow: hidden; white-space: nowrap; height: 24px; margin-top: 10px; line-height: 24px; }
.vg-footer-copyright { padding: 10px 0 5px; background-color: rgba(var(--vg-bluewhite), 0.3); }

.vg-filter { position: sticky;; }
.vg-filter .list-group { margin-bottom: 0; overflow-y: auto; background-color: var(--vg-gray-100); }
.vg-filter .list-group .list-group-item:first-child { border-top: none; }
.vg-filter-group input[type=checkbox] { position: static; width: 20px; height: 20px; margin: 0 10px 0 0; }
.vg-filter-group-title, .vg-filter-group-subTitle { margin-bottom: 10px; padding-top: 20px; padding-left: 35px; }
.vg-filter-group-subTitle:first-child { margin-top: -10px; }
.vg-filter .list-group-item { border-bottom: none; border-left: 0; border-right: none; border-top: 1px solid var(--vg-gray-400); }
.vg-filter-group, .list-group-item { padding: 0; background-color: var(--vg-gray-100); }
.vg-filter-group .vg-frame-color { width: 18px; height: 18px; margin: 0 5px 0 10px; padding: 0px; border-width: 0; border-radius: 9px; }
.vg-filter-group .vg-frame-color * { border-radius: 8px; }
.vg-filter-group .vg-frame-color[data=Clear], .vg-filter-group .vg-frame-color[data=Cream], .vg-filter-group .vg-frame-color[data=White] { border-width: 1px; border-color: var(--vg-gray-600); }
.vg-filter-group .vg-frame-color[data=Clear] *, .vg-filter-group .vg-frame-color[data=Cream] *, .vg-filter-group .vg-frame-color[data=White] * { border: none; }
.vg-filter-group .checkbox { display: flex; width: 100%; margin: 0 0 10px 0; padding: 0 20px; }
.vg-filter-group .checkbox label { display: flex; width: 100%; height: 32px; padding: 0 15px; line-height: 32px; align-items: center; border-radius: 16px; }
.vg-filter-group .checkbox label:hover { background-color: var(--vg-gray-200); }
.vg-filter-heading { position: relative; padding-bottom: 10px; }
.vg-button-hide-filter { position: absolute; top: 0px; right: 0px; }

.vg-category-sub { padding: 10px 20px; gap: calc(var(--vg-gutter) * 2); background-color: var(--vg-gray-100); border-bottom: 1px solid var(--vg-gray-400); }
.vg-product-filter { flex-wrap: wrap; row-gap: 10px; column-gap: 20px; padding-top: 15px; }
.vg-product-filter .product-filter-item { position: relative; height: 30px; padding: 0 30px 0 15px; border: 1px solid var(--vg-black); font-weight: var(--vg-font-bold); line-height: 28px; border-radius: 100px; cursor: pointer; }
.vg-product-filter .product-filter-item:hover { background-color: var(--vg-black); color: var(--vg-white); }
.product-filter-item::before, .product-filter-item::after { content: ""; position: absolute; width: 2px; height: 12px; background-color: var(--vg-black); top: 8px; right: 16px; transition: background-color 0.2s ease, transform 0.2s ease; }
.product-filter-item::before { transform: rotate(45deg); }
.product-filter-item::after { transform: rotate(-45deg); }
.product-filter-item:hover::before { background-color: var(--vg-white); transform: rotate(-45deg); }
.product-filter-item:hover::after { background-color: var(--vg-white); transform: rotate(45deg); }
.product-filter-item:active::before,.product-filter-item:active::after { transform: rotate(-45deg) scale(0.8); }
.product-filter-item:active::after { transform: rotate(45deg) scale(0.8); }
.vg-product-filter .product-filter-clear, .vg-product-filter .product-filter-show { padding-right: 15px; }
.vg-product-filter .product-filter-clear::before, .vg-product-filter .product-filter-clear::after, .vg-product-filter .product-filter-show::before, .vg-product-filter .product-filter-show::after { display: none; width: 0; height: 0; }
.vg-header-completely-sticky ~ .vg-page-body .vg-filter-sub h1 { padding-top: 20px; }

.checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox .checkmark { position: relative; display: inline-block; width: 20px; height: 20px; background-color: var(--vg-gray-100); border: 2px solid var(--vg-gray-400); border-radius: 4px; transition: all 0.3s ease; cursor: pointer; vertical-align: middle; }
.checkbox input:checked + .checkmark { background-color: var(--vg-darkblue); border: none; }
.checkbox .checkmark::after { content: ""; position: absolute; display: none; left: 7px; top: 4px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: all 0.2s ease; }
.checkbox input:checked + .checkmark::after { display: block; }
.checkbox:hover input:not(:checked) + .checkmark { border-color: #60a5fa; background-color: #e0f2fe; }
.checkbox input:focus + .checkmark { box-shadow: 0 0 0 3px rgba(59, 130, 246, 1); }
.checkbox input:disabled + .checkmark { opacity: 0.5; cursor: not-allowed; background-color: #e2e8f0; border-color: #cbd5e1; }
.checkbox-label { font-size: 16px; color: #334155; cursor: pointer; }

.radio input[type="radio"] { display: none; }
.radio .radio-label { align-items: center; cursor: pointer;padding: 8px 12px 8px 12px; position: relative; border-radius: 4px; border: 1px solid rgba(var(--vg-bluewhite), 0.5); transition: all 0.2s ease; font-weight: normal; }
.radio .radio-label::before { content: "\f00c"; font-family: "FontAwesome"; color: rgba(var(--vg-bluewhite), 0.5); font-size: 16px; position: absolute; right: 12px; top: 20px; transform: translateY(-50%); }
.radio input[type="radio"]:checked + .radio-label { border-color: var(--vg-darkblue); background-color: rgba(var(--vg-bluewhite), 0.01); }
.radio input[type="radio"]:checked + .radio-label::before { color: var(--vg-darkblue); font-size: 18px; animation: checkPulse 0.3s ease; }
.radio input[type="radio"]:not(:checked) + .radio-label:active { border-color: var(--vg-darkblue); background-color: rgba(var(--vg-bluewhite), 0.2); }
.radio input[type="radio"]:checked + .radio-label:active { border-color: var(--vg-darkblue); background-color: rgba(var(--vg-bluewhite), 0.2); }
.radio input[type="radio"]:not(:checked) + .radio-label:hover { border-color: var(--vg-darkblue); }
@keyframes checkPulse { 0% { transform: translateY(-50%) scale(0.8); } 50% { transform: translateY(-50%) scale(1.2); } 100% { transform: translateY(-50%) scale(1); } }
.radio input[type="radio"]:disabled + .radio-label { cursor: not-allowed; opacity: 0.7; }
.radio input[type="radio"]:disabled:checked + .radio-label { border-color: #ddd; }
.radio input[type="radio"]:disabled + .radio-label::before { color: #ccc; }


.radio.radio-loading input[type="radio"]:checked + .radio-label::before, .radio.radio-loading .radio-label::before { content: "\f110"; color: var(--vg-darkblue); bottom: -5px; right: 5px; animation: fa-spin 1s infinite linear; }

.vg-filter-sub { position: sticky; z-index: 10; background-color: var(--vg-white); }
.vg-product-other { padding: 0; min-height: calc(var(--vg-gutter) * 3.5); line-height: calc(var(--vg-gutter) * 2); border-bottom: 1px solid var(--vg-gray-400); }
.dropdown-menu li>* { padding: 3px 20px; }
.dropdown-menu { min-width: 200px; }
.vg-product-lens-price { padding: calc(var(--vg-gutter) * 2); background-color: rgba(var(--vg-bluewhite), 0.2); border-radius: 8px; transition: all 0.2s ease; }
.vg-product-lens-price.has-error { background-color: var(--vg-redwhite); color: var(--vg-red); }

.vg-cart-card { padding: 20px; background-color: var(--vg-white); border-radius: 8px; }
.vg-cart-item .vg-cart-item-option { width: 100%; }
.vg-cart-item .vg-cart-item-option span { flex: 1; }
.vg-cart-item .vg-cart-item-option span:first-child { width: 20%; flex: none; }
.vg-cart-item-options { padding: 20px; background-color: var(--vg-gray-100); border-radius: 8px; }

.vg-top-borderLine { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--vg-gray-400); }
.vg-bottom-borderLine { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--vg-gray-400); }

.vg-cart-item-price { padding: calc(var(--vg-gutter) * 2); background-color: rgba(var(--vg-bluewhite), 0.2); border-radius: 8px; transition: all 0.2s ease; }
.vg-cart-item-title { min-height: 26px; line-height: 26px; }
.vg-cart-item-title .vg-gray { display: inline-block; width: 3px; height: 16px; margin-top: 3px; background-color: var(--vg-gray-400); }

.vg-left-column { display: flex; flex-direction: column; flex: 1; }
.vg-left-item { display: flex; align-items: center; height: 40px; line-height: 40px; }
.vg-right-item { display: flex; align-items: center; justify-content: flex-end; height: 40px; line-height: 40px; }
.vg-left-item .input-group .form-control { float: none; height: 30px; }
.vg-left-item button { height: 30px; }
.vg-cart-item .input-group { width: 100%; }
.vg-cart-item .input-group input { flex: 1;  }
.vg-cart-item .input-group .input-group-btn { width: 60px; }
.vg-cart-item button { display: flex; width: 30px; align-items: center; justify-content: center; }

.buttons .btn { width: 100%; }

.modal-dialog  .vg-close-btn { position: absolute; top: 15px; right: 15px; }
.vg-cart-total { position: sticky; top: 0; }

.vg-glasses-option div.vg-product-info-save { flex: 2; margin: 0; line-height: 30px; }
.vg-cart-item-title .vg-alert { width: 100%; font-size: 16px; font-weight: normal; }
.vg-alert { border-radius: 8px; padding: 8px; font-size: 14px; font-weight: normal; }
.vg-alert.has-success { color: #3c763d; background-color: #dff0d8; }
.vg-alert.has-error { color: #a94442;background-color: #f2dede; }
.vg-product-info-list .btn-primary { margin-top: 15px; height: 50px; line-height: 50px; }

#checkout-checkout .btn-primary { height: 50px; line-height: 50px; color: var(--vg-white); }

.input-wrapper .vg-alert, .select-wrapper .vg-alert { position: absolute; top: 40px; font-weight: 400; }
.form-title { margin-bottom: 30px; color: #333; text-align: center; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 8px; color: #555; font-weight: 500; }
.input-wrapper, .select-wrapper { position: relative; }
.icon-left { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vg-gray); z-index: 1; }
.asterisk { position: absolute; top: 50%; transform: translateY(-50%); color: var(--vg-gray); z-index: 1; font-size: 10px; }
.input-wrapper .asterisk { right: 10px; }
.select-wrapper .asterisk { right: 36px; }
.select-arrow { position: absolute; right: 8px; top: 40%; transform: translateY(-50%); color: #666; pointer-events: none; z-index: 1; font-size: 10px; }
.select-wrapper::after { content: ""; position: absolute; right: 26px; top: 1px; bottom: 1px; width: 1px; background-color: var(--vg-gray); z-index: 1; }
.has-icon input { padding-left: 40px; }
.has-asterisk input { padding-right: 30px; }
.has-icon select { padding-left: 40px; }
.has-asterisk select { padding-right: 75px; }
.select-wrapper:not(.has-asterisk) select { padding-right: 50px; }
select.form-control { line-height: normal; appearance: none; -webkit-appearance: none; background: var(--vg-white); border-color: var(--vg-gray); }
.input-wrapper.has-success .asterisk, .select-wrapper.has-success .asterisk { font-size: 14px; color: #3c763d; }
.input-wrapper.has-error .asterisk, .select-wrapper.has-error .asterisk { color: #a94442; }
.input-wrapper.has-error input { color: #a94442; }
.input-wrapper.has-error.has-icon .icon-left { color: #a94442; }
.input-wrapper.has-success .form-control, .select-wrapper.has-success .form-control { border-color: var(--vg-gray); }
.select-wrapper.has-error .form-control { color: #a94442; }
.select-wrapper.has-error .form-control option { color: #555; }
.input-wrapper.has-error .form-control:focus, .input-wrapper.has-error .form-control:active, .input-wrapper.has-error .form-control:hover { color: #555; }
.input-wrapper.has-success .form-control:focus, .input-wrapper.has-success .form-control:active, .input-wrapper.has-success .form-control:hover, .select-wrapper.has-success .form-control:focus, .select-wrapper.has-success .form-control:active, .select-wrapper.has-success .form-control:hover { border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) }
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder { color: var(--vg-gray); opacity: 1 !important; }

.has-error .form-control::-webkit-input-placeholder { color: #a94442 !important; }
.has-error .form-control:-moz-placeholder { color: #a94442 !important; }
.has-error .form-control::-moz-placeholder { color: #a94442 !important; }
.has-error .form-control:-ms-input-placeholder { color: #a94442 !important; }
.has-error .form-control::-ms-input-placeholder { color: #a94442 !important; }
.has-error .form-control:focus::-webkit-input-placeholder { color: #a94442 !important; }

.vg-checkout-address .vg-d-flex div:first-child input { border-radius: 4px 0 0 4px; }
.vg-checkout-address .vg-d-flex div:nth-child(2) input { border-radius: 0 4px 4px 0; }
.vg-checkout-address .vg-d-flex div:first-child select { border-radius: 4px 0 0 4px; }
.vg-checkout-address .vg-d-flex div:nth-child(2) select { border-radius: 0 4px 4px 0; }

.vg-checkout-addressList.form-group { margin-top: 0; margin-bottom: 45px; }
.vg-checkout-addressList.form-group:first-child {}
.vg-checkout-addressList.radio .radio-label { display: flex; flex: 1; margin-right: 0; margin-bottom: 0; padding: 8px 12px; cursor: pointer; }
.vg-checkout-addressList.radio .radio-label address { flex: 1; margin: 0; padding: 0; }
.vg-checkout-addressList.radio .radio-label::before { top: inherit; bottom: -5px; right: 15px; left: inherit; }
.vg-checkout-addressList.radio .radio-label button { position: absolute; top:8px; right: 10px; }

.vg-checkout-coupon .form-group { position: relative; }
.vg-checkout-coupon input.form-control { width: 100%; border-radius: 50px; }
.vg-checkout-coupon input.btn { position: absolute; right: 12px; top: 2px; height: 30px; font-size: 12px; font-weight: bold; color: var(--vg-white); }
.vg-checkout-addNew, .vg-checkout-editAddress { font-size: 14px; font-weight: bold; }

.vg-checkout-email .form-group { margin-bottom: 0; }
.vg-checkout-address .vg-d-flex:last-of-type .form-group { margin-bottom: 0; }
.vg-page-header-flow { z-index: 1; }
.vg-checkout-viewCart { position: absolute; top: -70px; right: 10px; }

.vg-user-card, .vg-article-card { padding: 15px; border-radius: 8px; background-color: var(--vg-gray-100); }

.vg-user-addressList .radio-label { height: 100%; align-items: flex-start; }
#account-order .pagination { margin-top: 0; margin-bottom: 10px; }
.vg-user-menu, .vg-article-menu { position: sticky; top: 0; right: 0; }

#search { min-width: 250px; }
.vg-page-header .vg-nav-side { width: auto; }


@media (max-width: 350px) {
  .vg-nav-side-help, .vg-nav-side-currency { display: none; }
  .vg-product-other .vg-product-sort { float: left !important; }
  .vg-product-other .vg-product-sort .pull-right button { padding-left: 0; padding-right: 20px; }
  .vg-product-other .vg-product-sort .pull-right>.dropdown-menu { left: 0; }

  .vg-product-img .vg-swiper-container { order: 1; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { width: 50px; }
  .vg-product-img .vg-swiper-pager { width: 100%; order: 2; display: flex; margin-top:10px; }
  .vg-product-img .vg-swiper-pagination { display: flex; gap: 10px; width: 100%; flex-direction: row; }
  .vg-product-img .vg-swiper-viewport { flex-wrap: wrap; flex-direction: column; max-width: 100%; }
  .vg-product-img .vg-swiper-container { max-width: 100%; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { margin:0 }
}

@media (max-width: 576px) { 
  .vg-page-header { padding-bottom: 40px; }
  .vg-page-header .container { height: 50px; padding: 5px 10px; }
  .vg-top-menu .container { height: 0; padding: 0; }
  .vg-top-nav { display: flex; align-items: center; flex-wrap: wrap; z-index: 1; background-color: var(--vg-white); }

  .vg-nav-side { order: 2; margin-left: auto; }
  #search { width: 100%;  order: 3;  }
  .vg-page-header .vg-search .input-group { width: 96% }
  .vg-page-header .vg-search .input-group:focus-within { width: 100%; }

  .vg-footer-newsletter .vg-item-center { height: auto; flex-direction: column; gap: 10px; }
  .vg-footer-newsletter .vg-item-center .form-group { position: relative; margin: 0; width: 100%; }
  .vg-footer-newsletter .vg-item-center .btn { position: absolute; right: 3px; top: 3px; }

  .vg-top-menu { z-index: 2; border: none; background: none; }
  .vg-footer-newsletter .form-control, .vg-footer-newsletter .form-inline { min-width: 100%; }
  .vg-page-header .vg-logo { max-width: 120px; order: 1; width: 150px; margin-right: auto; margin-left: 40px; }
  .vg-top-menu .navbar { position: absolute; z-index: 199; bottom: 0px; width: 40px; height: 40px; text-indent: -1000px; overflow:hidden; }
  .vg-top-menu .navbar:before { position: absolute; left: 1010px; top:0; font-family:"FontAwesome"; content: "\f0c9"; font-size: 24px; }
  .navbar-collapse {    position: fixed;display: block;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;}
  .navbar-collapse.active {
      display: block;
    transform: translateX(0);}
  .vg-top-menu .navbar-nav .dropdown { height: auto; min-height: 38px; }
  .vg-nav-side > div .vg-nav-side-link:after { bottom: 10px; }

  .vg-filter { position: fixed;display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
  }

  .vg-product-img .vg-swiper-container { order: 1; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { width: 50px; height: 50px; }
  .vg-product-img .vg-swiper-pager { width: 100%; order: 2; display: flex; margin-top:10px; }
  .vg-product-img .vg-swiper-pagination { display: flex; gap: 10px; width: 100%; height: 50px; flex-direction: row; }
  .vg-product-img .vg-swiper-viewport { flex-wrap: wrap; flex-direction: column; max-width: 100%; }
  .vg-product-img .vg-swiper-container { max-width: 100%; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { margin:0 }


  .vg-product-info-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--vg-gray-400);; }

  #checkout-cart .vg-cart-item h3 { margin-top: 10px; }

  #checkout-checkout #shipping-methods { margin-top: 20px; }
  #checkout-checkout #checkout > div.col-sm-4:last-of-type { margin-top: 20px; }
}


@media (min-width: 576px) and (max-width: 768px) { 
  .vg-page-header { padding-bottom: 40px; }
  .vg-page-header .container { height: 50px; padding: 5px 10px; }
  .vg-top-menu .container { height: 0; padding: 0; }
  .vg-top-nav { display: flex; align-items: center; flex-wrap: wrap; z-index: 1; background-color: var(--vg-white); }

  .vg-nav-side { order: 2; margin-left: auto; }
  #search { width: 100%;  order: 3;  }
  .vg-page-header .vg-search .input-group { width: 96% }
  .vg-page-header .vg-search .input-group:focus-within { width: 100%; }

  .vg-footer-newsletter .vg-item-center { height: auto; flex-direction: column; gap: 10px; }
  .vg-footer-newsletter .vg-item-center .form-group { position: relative; margin: 0; width: 100%; }
  .vg-footer-newsletter .vg-item-center .btn { position: absolute; right: 3px; top: 3px; }

  .vg-top-menu { z-index: 2; border: none; background: none; }
  .vg-footer-newsletter .form-control, .vg-footer-newsletter .form-inline { min-width: 100%; }
  .vg-page-header .vg-logo { max-width: 120px; order: 1; width: 150px; margin-right: auto; margin-left: 40px; }
  .vg-top-menu .navbar { position: absolute; z-index: 199; bottom: 0px; width: 40px; height: 40px; text-indent: -1000px; overflow:hidden; }
  .vg-top-menu .navbar:before { position: absolute; left: 1010px; top:0; font-family:"FontAwesome"; content: "\f0c9"; font-size: 24px; }
  .navbar-collapse {    position: fixed;display: block;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;}
  .navbar-collapse.active {
      display: block;
    transform: translateX(0);}
  .vg-top-menu .navbar-nav .dropdown { height: auto; min-height: 38px; }
  .vg-nav-side > div .vg-nav-side-link:after { bottom: 10px; }

  .vg-filter { position: fixed;display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
  }

  .vg-product-img .vg-swiper-container { order: 1; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { width: 80px; height:  50px; }
  .vg-product-img .vg-swiper-pager { width: 100%; order: 2; display: flex; margin-top:10px; }
  .vg-product-img .vg-swiper-pagination { display: flex; gap: 10px; width: 100%;  height:  50px; flex-direction: row; }
  .vg-product-img .vg-swiper-viewport { flex-wrap: wrap; flex-direction: column; max-width: 100%; }
  .vg-product-img .vg-swiper-container { max-width: 100%; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { margin:0 }

  .vg-product-info-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--vg-gray-400);; }

  .vg-footer-help .row > div:nth-child(3), .vg-footer-help .row > div:nth-child(4) { padding-top: 20px; }

  #checkout-cart .vg-cart-item h3 { margin-top: 10px; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .vg-page-header .vg-logo { max-width: 150px; }
  .vg-page-header .vg-search .input-group { width: 90%; }
  .vg-page-header .vg-search .input-group:focus-within { width: 96%; }
  .vg-top-menu .navbar, .vg-page-header .navbar-collapse.collapse .vg-close-btn { display: none; }
  .vg-page-header .navbar-collapse.collapse { position: static; width: 100%; background-color: transparent; padding: 0; transform: none; box-shadow: none; display: flex !important; align-items: center; justify-content: center; }

  .vg-filter { position: fixed;display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 20px;
  }
  .vg-product-img .vg-swiper-container { order: 1; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { width: 50px; height:  50px; }
  .vg-product-img .vg-swiper-pager { width: 100%; order: 2; display: flex; margin-top:10px; }
  .vg-product-img .vg-swiper-pagination { display: flex; gap: 10px; width: 100%;  height:  50px; flex-direction: row; }
  .vg-product-img .vg-swiper-viewport { flex-wrap: wrap; flex-direction: column; max-width: 100%; }
  .vg-product-img .vg-swiper-container { max-width: 100%; }
  .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { margin:0 }

  .vg-footer-newsletter .vg-item-center { height: auto; flex-direction: column; gap: 10px; }
  .vg-footer-newsletter .vg-item-center .form-group { position: relative; margin: 0; width: 100%; }
  .vg-footer-newsletter .vg-item-center .btn { position: absolute; right: 3px; top: 3px; }

  #checkout-cart .vg-cart-item h3 { margin-top: 10px; }
  #checkout-confirm #content .vg-cart-card:first-child .col-sm-12:last-of-type h3 { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--vg-gray-400); }
}

@media (min-width: 992px) and (max-width: 1200px)   {
  .vg-page-header .vg-logo { max-width: 150px; }
  .vg-page-header .vg-search .input-group { width: 90%; }
  .vg-page-header .vg-search .input-group:focus-within { width: 96%; }
  .vg-top-menu .navbar, .vg-page-header .navbar-collapse.collapse .vg-close-btn { display: none; }
  .vg-page-header .navbar-collapse.collapse { position: static; width: 100%; background-color: transparent; padding: 0; transform: none; box-shadow: none; display: flex !important; align-items: center; justify-content: center; }

 .vg-product-img .vg-swiper-pagination .vg-swiper-pagination-button { width: 80px; }
 .vg-product-img .vg-swiper-pagination { width: 90px; }
}

@media (min-width: 1200px) {
  .vg-page-header .vg-logo { max-width: 150px; }
  .vg-page-header .vg-search .input-group { width: 90%; }
  .vg-page-header .vg-search .input-group:focus-within { width: 96%; }
  .vg-top-menu .navbar, .vg-page-header .navbar-collapse.collapse .vg-close-btn { display: none; }
  .vg-page-header .navbar-collapse.collapse { position: static; width: 100%; background-color: transparent; padding: 0; transform: none; box-shadow: none; display: flex !important; align-items: center; justify-content: center; }
}