/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --primary: #fff; }

/* global class */
.container { display: block; width: auto; max-width: 1400px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; color: #fff; transition: all .5s ease; }
body { background: #232323; color: var(--primary); font: normal 15px 'Inter', sans-serif; overflow-x: hidden; }
body.search-results,
body.category { margin-top: 150px; }
input, textarea, select, button { font: normal 15px 'Inter', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; transition: all .3s ease; }
select, button { cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }

/* flex */
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.flex-col { flex-direction: column; }

/* grid */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* header */
.header { position: fixed; z-index: 1000; top: 20px; left: 20px; width: calc(100% - 40px); height: 80px; padding: 0px 30px; border-radius: 20px; background-color: rgba(0,0,0,.6); backdrop-filter: blur(10px); transition: all .3s ease; }
.header span.logo img { width: 100px; }
.header .left,
.header .right { gap: 50px; }
.header .left ul { gap: 30px; }
.header .left ul li a { position: relative; }
.header .left ul li a.active::before { position: absolute; top: -15px; left: 50%; width: 5px; height: 5px; background-color: #fff; border-radius: 100%; transform: translateX(-50%); content: ''; }
.header .right nav { gap: 30px; }
.header .right ul { gap: 40px; }
.header .right ul li { font-size: 17px; }
.header .right input { width: 260px; height: 40px; padding: 0px 20px; background-color: #232323; border-radius: 20px; color: #fff; }
.header .right span.theme small { font-size: 20px; }
.header .right span.theme { cursor: pointer; padding: 8px; border-radius: 50%; transition: background-color 0.2s ease; }
.header .right span.theme:hover { background-color: rgba(255,255,255,0.1); }

  /* header -> top */
  .header.top { top: 0px; left: 0px; width: 100%; border-radius: 0px; }

  /* header -> toggle menu */
  span.toggle-menu { display: none; position: absolute; top: 29px; right: 24px; width: 24px; height: 20px; border-top: 2.5px solid #fff; transition: all .3s ease; cursor: pointer; }
  span.toggle-menu::before { position: absolute; top: 6px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .3s ease; content: ''; }
  span.toggle-menu::after { position: absolute; top: 15px; left: 0px; width: 100%; height: 2px; background-color: #fff; transition: all .3s ease; content: ''; }
  span.toggle-menu.on { border-top: transparent; }
  span.toggle-menu.on::before { top: 10px; transform: rotate(45deg); }
  span.toggle-menu.on::after { top: 10px; transform: rotate(-45deg); }

/* feature */
#feature { margin-top: 120px; padding: 0px 20px; }
#feature section { grid-gap: 20px; }
#feature section article { position: relative; width: 100%; height: calc(35vh - 10px); min-height: (250px - 10px); background-color: #000; border-radius: 20px; overflow: hidden; }
#feature section article img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: all .3s ease; }
#feature section article figcaption { position: absolute; z-index: 3; bottom: 0px; left: 0px; width: 100%; height: auto; padding: 40px; }
#feature section article figcaption h1 { display: block; margin-bottom: 10px; font-weight: 700; font-size: 24px; line-height: 1.1; }
#feature section article figcaption p { display: none; line-height: 1.6; }
#feature section article:first-of-type { height: 70vh; min-height: 500px; grid-column: 1/3; grid-row: 1/3; }
#feature section article:first-of-type h1 { font-size: 48px; }
#feature section article:first-of-type p { display: block; }
#feature section article:first-of-type small { display: block; margin-top: 10px; } 
#feature section article:hover img { opacity: .7; }

/* lastest */
#lastest { margin: 50px 0px; padding: 0px 20px; }
#lastest header h6 { display: block; margin-bottom: 40px; font-weight: 600; font-size: 30px; }
#lastest section { grid-gap: 20px; }
#lastest section article { padding: 15px; border-radius: 20px; background-color: #191919; overflow: hidden; }
#lastest section article figure { position: relative; width: 100%; height: 200px; border-radius: 16px; overflow: hidden; }
#lastest section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#lastest section article h2 { display: block; height: auto; margin: 14px 0px 10px 0px; font-weight: 600; font-size: 18px; line-height: 1.2; }
#lastest section article small { display: block; font-size: 13px; }
body.search-results #lastest header h6,
body.category #lastest header h6 { font-size: 60px; text-align: center; }

/* reviews */
#reviews { margin-bottom: 50px; padding: 0px 20px; }
#reviews header h6 { display: block; margin-bottom: 40px; font-weight: 600; font-size: 30px; }
#reviews section { width: 100%; padding: 0px 40px; }
#reviews section .slick-list { overflow: visible; }
#reviews section article { position: relative; width: 100%; height: 450px; margin: 0px 15px; border-radius: 20px; background-color: #000; overflow: hidden; }
#reviews section article img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: all .3s ease; }
#reviews section article figcaption { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; padding: 20px; }
#reviews section article figcaption h2 { display: block; font-weight: 600; font-size: 18px; line-height: 1.2; }
#reviews section article figcaption small { display: block; margin-top: 20px; font-size: 13px; }
#reviews section article:hover img { opacity: .7; }
#reviews .slick-dots { display: flex; margin-top: 20px; justify-content: center; }
#reviews .slick-dots li { margin: 0 10px; }
#reviews .slick-dots li button { width: 30px; height: 10px; border-radius: 30px; background-color: #aaa; border: none; outline: none; cursor: pointer; text-indent: -9999em;; }
#reviews .slick-dots li.slick-active button { width: 10px; background-color: #fff; }

/* cover */
#cover { width: 100%; height: auto; margin: 140px 0px 40px 0px; padding: 0px 100px; }
#cover small { display: block; margin-bottom: 20px; text-align: center; }
#cover h1 { display: block; width: 80%; margin: 0px auto 20px auto; text-align: center; font-weight: 700; font-size: 48px; line-height: 1.2; }
#cover abbr { display: block; margin-bottom: 40px; text-align: center; }
#cover figure { width: 100%; height: 45vh; border-radius: 20px; overflow: hidden; }
#cover figure img { width: 100%; height: 100%; object-fit: cover; }

/* single */
#single { padding: 0px 100px; align-items: flex-start; }
#single section { width: 70%; padding: 60px; background-color: #191919; border-radius: 20px; }
#single section img { display: block; width: auto; max-width: 100%; height: auto; margin: 0px auto 20px auto; border-radius: 15px; }
#single section p { display: block; margin-bottom: 20px; line-height: 1.6; font-size: 17px; }
#single section :where(h1, h2, h3, h4) { display: block; margin-bottom: 20px; font-weight: 700; font-size: 30px; }
#single section h2 { font-size: 24px; }
#single section h3 { font-size: 20px; }
#single section h4 { font-size: 18px; }
#single section b,
#single section strong { font-weight: 700; }
#single section ul { display: block; margin-bottom: 20px; padding-left: 40px; }
#single section ul li { position: relative; display: block; margin-bottom: 20px; line-height: 1.4; }
#single section ul li::before { position: absolute; top: 7px; left: -20px; width: 5px; height: 5px; border-radius: 100%; background-color: #fff; content: ''; }
#single section ol { display: block; margin-bottom: 20px; padding-left: 40px; counter-reset: item; }
#single section ol li { position: relative; display: block; margin-bottom: 20px; line-height: 1.4; counter-increment: item; }
#single section ol li::before { position: absolute; top: 0px; left: -30px; content: counter(item) "."; font-weight: 700; }
#single aside { width: 30%; padding-left: 30px; }
#single aside h5 { display: block; margin-bottom: 30px; font-weight: 700; font-size: 24px; }
#single aside li a { display: flex; align-items: center; margin-bottom: 20px; padding: 15px; background-color: #191919; border-radius: 20px; }
#single aside li a img { width: 40%; height: 120px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
#single aside li a span { padding-left: 20px; }
#single aside li a span strong { font-weight: 600; font-size: 17px; line-height: 1.2; }
#single aside li a span small { display: block; margin-top: 7px; font-size: 12px; }
.wp-caption { width: 100% !important; }

/* next */
#next { position: relative; width: 100%; height: 400px; margin-top: 60px; }
#next img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
#next figcaption { position: absolute; top: 50%; left: 50%; width: 1000px; height: auto; transform: translate(-50%, -50%); text-align: center; }
#next figcaption small { display: block; margin-bottom: 10px; font-weight: 700; font-size: 12px; letter-spacing: 5px; text-transform: uppercase; }
#next figcaption h2 { display: block; font-weight: 700; font-size: 48px; line-height: 1.1; }

/* sidebar */
#sidebar { position: fixed; z-index: 9999; top: 20px; left: -300px; width: 250px; height: calc(100% - 40px); background-color: rgba(0,0,0,.7); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0px 40px 40px rgba(0,0,0,.4); transition: all .3s ease; }
#sidebar.on { left: 20px; }
#sidebar span.logo img { display: block; width: 100px; height: auto; margin: 50px auto; }
#sidebar form input { width: calc(100% - 60px); height: 40px; margin: 0px 30px 30px 30px; padding: 0px 20px; background-color: #232323; border-radius: 20px; font-size: 14px; color: #fff; }
#sidebar ul.menu li a { display: block; padding: 15px 30px; font-size: 15px; }
#sidebar ul.social { position: absolute; bottom: 40px; left: 0px; display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%; height: auto; text-align: center; }
#sidebar ul.social li a { font-size: 17px; color: #fff; }


/* theme white */
html.theme-white body { background-color: #f3f3f3; color: #222; }
html.theme-white a { color: #222; }
html.theme-white .header { background-color: rgba(0,0,0,.8); }
html.theme-white .header a { color: #fff; }
html.theme-white .header .right span.theme small { color: #fff; }
html.theme-white .header .right input { background-color: #fff; color: #222; }
html.theme-white #feature section article figcaption h1,
html.theme-white #feature section article figcaption p,
html.theme-white #feature section article figcaption small { color: #fff; }
html.theme-white #lastest section article { background-color: #e7e7e7; }
html.theme-white #reviews section article figcaption h2,
html.theme-white #reviews section article figcaption small { color: #fff; }
html.theme-white #single section { background-color: #e7e7e7; }
html.theme-white #single aside li a { background-color: #e7e7e7; }
html.theme-white #next { background-color: #000; }
html.theme-white #next figcaption small,
html.theme-white #next figcaption h2 { color: #fff; }