/*----------------- Reset CSS -----------------*/
html {
  -webkit-text-size-adjust: none;
  height: -webkit-fill-available;
}

body {
  width: 100%;
  overflow-x: hidden;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

/* ol, ul {
  list-style: none;
}
 */
blockquote, q {
  quotes: none;
}

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

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

img {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
  /* IE6 & 7 */
  zoom: 1;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

:before,
:after {
  position: relative;
}

:focus {
  outline-color: transparent;
  outline-style: none;
  outline: 0px !important;
}

/*----------------- Tag a No Underline -----------------*/
a {
  cursor: pointer;
  transition: all 0.2s ease-in;
}

a:focus {
  text-decoration: none !important;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

/*----------------- Clear Float -----------------*/
.clear {
  clear: both;
  width: 0px;
  height: 0px;
}

.cf {
  *zoom: 1;
}

.cf:before, .cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

/*----------------- Grayscale Fillter -----------------*/
.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .2s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

.grayscale:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}

/*----------------- animate berger to close btn -----------------*/
.cmn-toggle-switch {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.cmn-toggle-switch:focus {
  outline: none;
}

.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 14px;
  left: 0;
  right: 15px;
  height: 3px;
  width: 100%;
  background: #234985;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #234985;
  content: "";
  box-shadow: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.cmn-toggle-switch span::before {
  top: -10px;
}

.cmn-toggle-switch span::after {
  bottom: -10px;
}

.cmn-toggle-switch__htx {
  background-color: transparent;
}

.cmn-toggle-switch__htx span {
  transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0;
}

.cmn-toggle-switch__htx span::before {
  transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active span {
  background: none;
}

.cmn-toggle-switch__htx.active span::before {
  top: 0;
  transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  transition-delay: 0, 0.3s;
}

/*----------------- Show Hide Content -----------------*/
.Lpc {
  display: block !important;
}

.Lpc-tablet {
  display: block !important;
}

.Ltablet {
  display: none !important;
}

.Ltablet-mobile {
  display: none !important;
}

.Lmobile {
  display: none !important;
}

.Lpc-mobile {
  display: block !important;
}

.Lmobile-l {
  display: none !important;
}

.Lmobile-p {
  display: none !important;
}

.clear {
  clear: both;
  width: 0px;
  height: 0px;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.mC {
  margin: 0px auto;
}

.dB {
  display: block;
}

.dN {
  display: none;
}

.p-R {
  position: relative;
}

.p-A {
  position: absolute;
}

.p-Ft {
  position: fixed;
  top: 0px;
}

.p-Fb {
  position: fixed;
  bottom: 0px;
}

.fullWidth {
  width: 100% !important;
}

/* ---------------------------------------------------**** Tablet Portrait ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  /*----------------- Show Hide Content -----------------*/
  .Lpc {
    display: none !important;
  }
  .Lpc-tablet {
    display: block !important;
  }
  .Ltablet {
    display: block !important;
  }
  .Ltablet-mobile {
    display: block !important;
  }
  .Lmobile {
    display: none !important;
  }
  .Lpc-mobile {
    display: none !important;
  }
}

/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {
  /*----------------- Show Hide Content -----------------*/
  .Lpc {
    display: none !important;
  }
  .Lpc-tablet {
    display: none !important;
  }
  .Ltablet {
    display: none !important;
  }
  .Ltablet-mobile {
    display: block !important;
  }
  .Lmobile {
    display: block !important;
  }
  .Lpc-mobile {
    display: block !important;
  }
  .fl {
    float: none;
  }
  .fr {
    float: none;
  }
}

/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */