/*
Theme Name: Custom
Author: Gargamena <milenapetknova@gmail.com>
*/

/* Colors */
:root {
  --background-color: #fafafa;
  --dark-color: #000000;
  --light-color: #899593;
  --border-color: #ebebeb;
  --highlight-color: #B0002E;
}

/* Fonts */
@font-face {
  font-family: "MdGrotesqueRegular";
  src: url('./../fonts/md-grotesque/MDGROTESQUE-Regular.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: "AcariSans";
  src: url('./../fonts/acari-sans/AcariSans-Bold.ttf') format('truetype');
  font-weight: 800;
} 

/* Reset */
*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, p, section, menu, nav, form { margin: 0; padding: 0; font-weight: normal; font-style: normal; }
ol, ul { list-style: none; }
img { max-width: 100%; height: auto; }
input { outline: none; -webkit-appearance: none; }
textarea { outline: none; -webkit-appearance: none; }
input:focus, textarea:focus { outline: none; -webkit-appearance: none; border: none !important; resize: none; }
p, em { font-weight: 500; }
strong, b { font-weight: 800; }

/* General */
*, *::before, *::after, em { font-family: 'MdGrotesqueRegular', sans-serif; }
html, body { background-color: var(--background-color); color: var(--dark-color); font-size: 14px; line-height: 22px; letter-spacing: 0.3px; }
img { display: block; }
a { display: block; text-decoration: none; color: var(--dark-color); opacity: 1; }
a:hover { cursor: pointer; text-decoration: none; transition: opacity 0.3s; }
button { border: none; cursor: pointer; background-color: transparent; }
input,
textarea { width: 100%; font-size: 16px; line-height: 20px; color: var(--dark-color); background: transparent; border: none; border-bottom: 1px solid white; border-radius: 4px; padding: 8px; padding-left: 16px; transition: all 0.3s; }
input:focus,
textarea:focus { border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important; }
::placeholder { font-family: 'MdGrotesqueRegular', sans-serif; opacity: 0.6; font-size: 14px; line-height: 20px; }
:-ms-input-placeholder { font-family: 'MdGrotesqueRegular', sans-serif; opacity: 0.6; font-size: 14px; line-height: 20px; }
::-webkit-input-placeholder { font-family: 'MdGrotesqueRegular', sans-serif; opacity: 0.6; font-size: 14px; line-height: 20px; }
::selection { background-color: var(--dark-color); color: var(--background-color); }
::-moz-selection { background-color: var(--dark-color); color: var(--background-color); }
::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
::-webkit-scrollbar-track { background: var(--background-color); }
::-webkit-scrollbar-thumb { background: var(--light-color); border-radius: 4px; }

/* Buttons */
.btn { cursor: pointer; display: flex; align-items: center; font-size: 10px; line-height: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1; text-align: center; border-radius: 4px; padding: 12px 16px; }
.btn:disabled, 
.btn[disabled] { opacity: 0.42; }
.btn:hover { transition: 0.3s all; }
.btn.is-primary { background: var(--dark-color); border: 1px solid var(--border-color); color: var(--background-color); }
.btn.is-primary:hover, 
.btn.is-primary:active { background: transparent; border: 1px solid var(--border-color); color: var(--highlight-color); }
.btn.is-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--dark-color); }
.btn.is-secondary:hover, 
.btn.is-secondary:active { color: var(--highlight-color); }
.btn.is-tertiary { color: var(--dark-color); padding: 12px 0; }
.btn.is-tertiary:hover, 
.btn.is-tertiary:active { color: var(--highlight-color); }
.btn.is-play { width: 75px; height: 45px; background-color: var(--dark-color); z-index: 3; border-radius: 6px; }
.btn.is-play:before { content: ""; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.btn__icon { height: 10px; margin-left: 10px; margin-bottom: 2px; }
.btn__icon.is-hover { display: none; }
.btn:hover .btn__icon.is-default { display: none; }
.btn:hover .btn__icon.is-hover { display: block; }

/* Utilities */
.background-image { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }
.absolute-center-horizontal { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.absolute-center-vertical { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.hoverable:hover { cursor: pointer; }
.icon-arrow { background-image: url('./../images/icon-arrow.svg'); height: 20px; }
.u-title { font-family: 'AcariSans', sans-serif; letter-spacing: 0; }
.u-desktop { display: flex !important; }
.u-mobile { display: none !important; }
@media(max-width: 1025px) {
  .u-desktop { display: none !important; }
  .u-mobile { display: flex !important; }
}

/* Columns */
.cols { margin: 0 -20px; display: flex; flex-wrap: wrap; }
.col { width: 33.33%; padding: 0 20px; }
@media(max-width: 1025px) {
  .cols { margin: 0; }
  .col { width: 100%; padding: 0; }
}

/* Header */
.header { z-index: 3; width: 100%; position: fixed; top: 0; background-color: var(--background-color); box-shadow: 1px 0 4px rgb(0 0 0 / 4%); display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; }
.header__logo { background-image: url('./../images/logo-black-horizontal.svg'); width: 202px; height: 48px; }
.header__nav { display: flex; }
.header__nav-item { margin-left: 16px; }
.header__nav-item:last-child { display: none; }
@media(max-width: 1025px) {
  .header { padding: 12px 24px; }
  .header__menu-btn { width: 48px; height: 48px; padding: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .header__menu-btn-line { width: 28px; height: 2px; background: var(--dark-color); margin: 2px 0; }
}

/* Navigation */
.navigation { z-index: 2; height: 100vh; width: 280px; position: fixed; top: 0; left: 0; background: var(--background-color); box-shadow: 1px 0 4px rgb(0 0 0 / 4%); padding: 30px; }
.navigation__items { max-height: 200px; padding-top: 72px; }
.navigation__items .search__form { margin-bottom: 24px; }
.navigation__items-item { width: 100%; border-bottom: 1px solid var(--border-color); }
.navigation__items-item:last-child { border: none; }
.navigation__items-item.is-divider { border-color: rgba(0, 0, 0, 0.42); }
.navigation__items-btn { text-align: left; }
@media(max-width: 1300px) {
  .navigation { width: 240px; }
}
@media(max-width: 1025px) {
  .navigation { right: -100%; left: auto; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column; }
  .navigation.active { right: 0; transition: right 0.6s ease-in-out; }
  .navigation__items { padding-top: 48px; }
  .navigation__items-item:first-child { border: none  ; }
  .navigation__close-btn { position: absolute; right: 24px; width: 24px; height: 24px; }
  .navigation__close-btn .line { width: 2px; height: 18px; position: absolute; left: 0; background: var(--dark-color); }
  .navigation__close-btn .line:first-child { transform: rotate(45deg); }
  .navigation__close-btn .line:last-child { transform: rotate(320deg); }
  .navigation__actions { display: flex; justify-content: space-between; }
  .navigation__overlay { display: none; width: 100%; height: 100%; z-index: 4; position: fixed; background: black; opacity: 0.42; }
}

/* Footer */
.footer { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 12px; border-top: 1px solid var(--border-color); padding: 30px 0; }
.footer__logo { height: 90px; width: auto; }
.footer__text { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.footer__text p { line-height: 18px; }
@media(max-width: 1025px) {
  .footer { justify-content: center; padding-bottom: 0; }
  .footer__logo { margin: 12px; order: 2; }
  .footer__text { margin: 12px auto; order: 1; }
}

/* Main */
.main { min-height: 100vh; overflow-x: hidden; position: relative; padding-left: 280px; padding-top: 73px; margin: 0; }
.main__container { width: 100%; max-width: 1500px; min-height: 100vh; padding: 0 100px; padding-top: 60px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: column; }
.main__content { width: 100%; }
.main__heading { width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding: 16px 0; }
.main__title { font-family: 'AcariSans', sans-serif; font-size: 24px; line-height: 24px; font-weight: 600; color: var(--dark-color); margin-right: 6px; }
.main__body { padding: 24px 0; }
.main__body-btn { width: fit-content; }
.main__body div { margin-bottom: 15px; }
.main__body p { margin-bottom: 12px; }
.main__body a { display: inline-block; text-decoration: underline; color: var(--highlight-color) }
.main__body img, .main__body figure { width: 100%; margin: 24px 0; }
.main__container > .a2a_kit { display: none; }
@media(max-width: 1300px) {
  .main { padding-left: 240px; }
  .main__container { max-width: 1160px; padding: 24px 50px 0; }
}
@media(max-width: 1025px) {
  .main { padding-left: 0; }
  .main__container { padding: 24px !important; }
}

/* Search */
.search__form { position: relative; height: 42px; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 4px; }
.search__input { width: 85%; }
.search__btn.btn { border: none; }
.search__form .autocompleter { z-index: 10; top: 100%; background-color: var(--background-color); border: 1px solid var(--border-color); padding: 4px 8px; padding-left: 16px; }
.search__form .autocompleter-item { z-index: 10; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.search__form .autocompleter-item:last-child { border: none; }
@media(max-width: 1025px) {
  .search__form { width: 100%; order: 2; }
}

/* Hero */
.hero { width: 115%; height: 70vh; background-image: url('./../images/cover-img.jpg'); background-position: 100% 100%; position: relative; }
.hero__banner { width: 100%; position: absolute; top: auto; bottom: 120px; left: 0; }
.hero .main__container { min-height: auto; align-items: flex-start; padding-top: 0; }
.hero__text { max-width: 848px; font-family: 'MdGrotesqueRegular', sans-serif; font-size: 36px; line-height: 54px; font-weight: 700; letter-spacing: 2px; color: var(--background-color); text-shadow: 2px 2px 14px rgb(0 0 0 / 50%); }
@media(max-width: 1300px) {
  .hero__banner { bottom: 60px; }
  .hero { width: 100vw; height: 400px; }
  .hero__text { max-width: 700px; font-size: 28px; line-height: 42px; }
}
@media(max-width: 1025px) {
  .hero__banner { top: 42px; }
  .hero__text { font-size: 24px; line-height: 32px; }
}

/* Category */
.category { width: 100%; }
.category__item { margin-bottom: 32px; }
.category__heading { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding: 16px 0; }
.category__actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 24px 0; }
.category__filters { display: flex; flex-wrap: wrap; }
.category__filter-btn { margin-right: 8px; margin-bottom: 8px; }
.category__list { padding: 24px 0; }
@media(max-width: 1025px) {
  .category__filters { width: 100%; order: 1; margin-bottom: 24px; }
}

/* Video */
.video { height: 100%; }
.video__container { width: 100%; max-width: 1420px; padding: 0 100px; }
.video__player { width: 100%; background-color: var(--dark-color); border-radius: 4px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; }
.video__player iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.video__overlay { position: relative; height: 100%; }
.video__overlay:hover .video__metrics { opacity: 0.8; }
.video__overlay:hover .video__thumb { filter: brightness(50%); transition: 0.3s filter; }
.video__thumb { position: absolute; top: 0; left: 0; opacity: 0.75; }
.video__metrics { opacity: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; position: absolute; bottom: 0; padding: 8px 12px; transition: 0.3s opacity; }
.video__metrics-divider { width: 2px; height: 12px; background-color: var(--border-color); margin: 0 8px; }
.video__label { text-transform: lowercase; font-weight: 800; font-size: 12px; line-height: 12px; color: var(--border-color); }
.video__title { font-family: 'AcariSans', sans-serif; font-size: 18px; line-height: 20px; font-weight: 800; margin: 12px 0 4px; }
.video__subtitle { font-size: 12px; line-height: 16px; margin-bottom: 10px; }
.video__media { width: 100%; }
.video__media .wp-video, 
.video__media .wp-video video { width: 100% !important; border-radius: 4px; }
.video__items { width: 100%; padding: 30px 0; }
.video__items .item { display: flex; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.video__items .item:first-child { border-top: 1px solid var(--border-color); }
.video__items .item-key { width: 25%; }
.video__items .item-value { width: 70%; padding: 0 10px; }
.video__share { width: 100%; display: flex; justify-content: flex-end; padding: 30px 0;  }
.video__share .addtoany_content { margin: 0; }
.video__details img { width: 100%; margin-bottom: 25px; }
@media(max-width: 1025px) {
  .video__items .item { flex-wrap: wrap; }
  .video__items .item-key { width: 100%; margin-bottom: 4px; }
  .video__items .item-value { width: 100%; }
}

/* Live */
.live { width: 100%; padding: 12px 0; margin-bottom: 42px; }
.live .main__heading { margin-bottom: 24px; }
.live .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; width: 100%; max-width: 100%; height: auto; }
.live .embed-container iframe,
.live .embed-container object,
.live .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Pages */
body.home .category .main__heading { padding: 6px 0; } 
body.home .main__container { padding-top: 20px; } 
body.search .main__heading { justify-content: flex-start; } 
body.single .main__container { width: 100%; min-height: auto; padding: 0 100px; align-items: flex-start; }
body.single .main__heading { flex-direction: column; align-items: flex-start; padding: 24px 0 12px; margin-bottom: 24px; } 
body.single .main__title { margin-bottom: 4px; }
body.single .video { height: auto; background-color: var(--dark-color); }
body.single .video__metrics { opacity: 1; position: static; justify-content: flex-start; padding: 0; margin-top: 16px; }
body.single .video__label { color: var(--light-color); }
body.single .video__content .main__container { max-width: 980px; }
body.single .video__player { border-radius: 0; }
body.single .footer { margin-top: 42px; }
body.single-pdfs .main__container { max-width: 980px; }
body.page-template-about-page .main__container { max-width: 1280px; }
@media(max-width: 1300px) {
  body.single .main__container { padding: 0 50px; }
}
@media(max-width: 1025px) {
  body.search .main__body-btn { display: none; }
}