@font-face {
  font-family: 'SairaSemiCondLight';
  src: url('../fonts/SairaSemiCondensed-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'SairaSemiCondMedium';
  src: url('../fonts/SairaSemiCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
html { background: #000; font-size:16px; }
body {
	color: #ddd;
  font-size:1em;
  line-height: 1.333em;
  font-family: "SairaSemiCondLight", sans-serif;
}
h1, h2, h3 { color:#fff; font-family: "SairaSemiCondMedium", sans-serif; }
h1 { font-size:1.75em; }
h2, h3 { font-size:1.4em; }
ul { padding-left: 1em; }
.uk-text-small { font-size: 1rem; }

.section-header h1 { margin-top:0; }
.section-header p { font-size:1.333em; line-height:1.25em; }

a { color:#ddd; text-decoration: none; display: inline-block; border-bottom: 0.075em solid rgba(255,0,0,1); transition: .2s ease-in-out; transition-property: border-color color; }
a:hover { color:#fff; text-decoration: none; border-color: #fff; }
a.btn { color: #fff; border-bottom:none; border-top: 0.12em solid rgba(255,0,0,1); font-family: "SairaSemiCondMedium", sans-serif; text-transform: uppercase; transition: .2s ease-in-out; transition-property: border-color color; }
a.btn:hover { border-color:#fff; }
a.nostyle, footer a, header .logo { border:none; }
#totop svg { width: 1em; height: 1em; fill: #ddd; transition: .2s ease-in-out; transition-property: fill; margin-right: 4em; }
#totop:hover svg { fill: #fff; }

header  { margin:1em 0 6em 0; }
section { margin:0; }
footer  { margin:3em 0 1em 0; line-height: 1.5em; }
header .uk-container, section .uk-container, footer .uk-container { padding:0 1em; }
section.glass .uk-container, .filter-items .glass, .filter-control > .uk-container { padding-top:1.5em; padding-bottom:1.5em; }

section.glass { margin-top:3em; margin-bottom:3em; }
section.intro.home { margin-bottom: 5.5em; }
section.intro.home > .uk-container { text-align:center; }
.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); }

/* header */
.logo img { width:14em; }
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { margin-left: 2em; font-family: "SairaSemiCondMedium", sans-serif; }
nav li.active a { border-color:#fff; color: #fff; }
.menu-toggler { color:#fff; }
nav.state-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 1em;
}
nav.state-open ul { text-align: right; clear: both; margin-top: 2.5em; font-size: 1.75em; line-height: 1.25em; }
nav.state-open li { display: block; float: none; margin-top: 1em; }
#menu-toggler-2 { float: right; }
nav.state-open #menu-toggler-1 { display: none; }

canvas {
	height: 100vh;
	width: 105vw;
	max-width: none;
	opacity: 0.5;
	position: fixed;
	z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  min-width: 2000px;
}

.ervo-grid > div > a { border-bottom:none; border-top: 0.25em solid rgba(255,0,0,1); transition: .2s ease-in-out; transition-property: border-color; display: block; }
.ervo-grid > div > a:hover { border-color: #fff; }
.ervo-grid img { background-color: rgba(255,255,255,0.1); }

/* slider */
.uk-slider { margin-top: 2em; overflow: hidden; }
.uk-slider h2 { margin:0.75em 0 0.5em 0; }
.uk-slider p { margin:0; }
.uk-grid-column-medium > *, .uk-grid-medium > * { padding-left: 1.25em; }
.uk-grid-column-medium, .uk-grid-medium { margin-left: -1.25em; }
.uk-dotnav { margin: 1.5em 0 -1.125em 0; }
.uk-dotnav > * { padding-left: 0; padding-right: 0.5em; }
.uk-dotnav > * > :hover { background-color: #fff; }
.uk-dotnav > * > * { width: .5em; height: .5em; background-color: #f00; border: 0; }
.uk-dotnav > .uk-active > * { background-color: #fff; border: 0; }

/* list */
.filter-control>.uk-container { padding-bottom: 1em !important; }
.filter-items .glass + .glass { margin-top:1em; }
.filter-items img { margin-top: 0.25em; }
.subnav { padding: 0; }
.subnav li { display:inline-block; margin-right:0.5em; margin-bottom:0.25em; }
.subnav .uk-active .btn { border-color:#fff; color: #fff; }

/* modal */
.uk-modal, .uk-modal h2 { color:#333; }

/* table */
.uk-table th { color: #ddd; vertical-align: top; }

/* detail */
/*.product-img { max-width: 400px; width: 100%; }*/


/* responsive  */
@media (min-width: 480px) {
  html { font-size:17px; }
  h1 { font-size:2em; }
  section { margin: 0 1em 0 1em; }
  header { margin: 2em 1em 6em 1em; }
  footer { margin:3em 1em 2em 1em; }
  header .uk-container, section .uk-container, footer .uk-container { padding:0 1.5em; }
  section.glass .uk-container, .filter-items .glass, .filter-control > .uk-container { padding-top:1.75em; padding-bottom:1.75em; }
  nav.state-open { padding: 2em 2.5em; }
}
@media (min-width: 640px) {/* uikit s */
  html { font-size:18px; }
  header .uk-container, section .uk-container, footer .uk-container { padding:0 2em; }
  section.glass .uk-container, .filter-items .glass, .filter-control > .uk-container { padding-top:2em; padding-bottom:2em; }
  nav.state-open { padding-right:3em; }
  .btn-more { position: absolute; top: 0; right: 0; margin: 0.25em 0 0 0; }
}
@media (min-width: 960px) {/* uikit m */
  html { font-size:20px; }
  .menu { display: inline-block !important; }
  .menu-toggler { display:none; }
  .uk-text-small { font-size: 0.875rem; }
  /*.product-img { max-width: none; }*/
}
@media (min-width: 1200px) {/* uikit l */
  html { font-size:21px; }
}
@media (min-width: 1600px) {/* uikit xl */
  html { font-size:22px; }
  header, section, footer { margin-right: auto; margin-left: auto; max-width: 1480px; }
}