@charset "UTF-8";
:root {
  /* font-family: "Roboto", Arial, sans-serif; */
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.25722;
  --font-color: #000000;
  /* --color-gray: #767676; */
  --color-gray: #707070;
  --color-yellow-light: #FFF3E5;
  --color-yellow: #FDC419;
  --color-green: #69A341;
  --color-blue: #2033DA;
  --color-red: #f76b8a;
  --background-color: #FFFFFF;
  --max-width-wrapper: 1240px;
  --width--sidebar: 250px;
  --color-facebook: #0866FF;
  --color-telegram: #229ED9;
  --color-x-twitter: #000;  
    /* #3D5A98 */
}
/* 26px = 1.444445rem; */
/* 25px = 1.38889rem */

body {font-weight: 400; color: var(--font-color);}

/* header[role="banner"] */
.region-highlighted {background-color: var(--color-yellow-light);}
/* .region-highlighted .wrapper > div:not(.hidden) {margin-top: 20px; padding: 20px 0;} */
div[data-drupal-messages] {background-color: var(--color-yellow-light); padding: 20px 0;}

.region-sidebar {position: sticky; top: 0; margin-bottom: 1rem;}

.main-block {display: flex;}

/* header .logo, */
/* nav#block-cattown-main-menu {float: left;} */
header .logo {position: relative; z-index: 1; float: left;}
header .region-header {position: relative;}
nav#block-cattown-main-menu {width: calc(100% - 250px);
  position: absolute;
  left: 250px;
  top: 0;
  right: 0;
}
#block-languageswitcher {
  /* float: right; margin-top: 6px; */
  position: absolute; right: 0; top: 10px; }
#block-languageswitcher li {font-size: 16px; font-weight: 300; /*margin-right: 8px;*/}
#block-languageswitcher li a,
#block-languageswitcher li .nolink {
  padding: 7px 12px;
  color: var(--font-color);
  border-radius: 30px;
}
#block-languageswitcher li span.nolink {color: var(--color-gray);}
#block-languageswitcher li a {border: 1px solid transparent;}
#block-languageswitcher li a.is-active {background-color: var(--color-yellow-light);}
#block-languageswitcher li a:not(.is-active) {border: 1px solid transparent;}
#block-languageswitcher li a:hover {border: 1px solid var(--color-yellow);}
#block-languageswitcher li a:hover:not(.is-active) {
  background-color: var(--color-yellow-light);
   transition: .75s ease;
   border: 1px dotted var(--color-yellow);}
#block-languageswitcher .contextual .trigger {right: -25px;}

aside.layout-sidebar {max-width: var(--width--sidebar); margin-right: 60px;}
main {width: calc(100% - var(--width--sidebar));}

footer[role="contentinfo"] {margin: 20px 0 0; padding: 20px 0; border-top: var(--color-yellow-light) solid 16px;}

/* .layout-container {width: 100%; background: var(--background-gradient-body);} */

/* .region-header .wrapper {}
.region-highlighted {max-width: var(--max-width-wrapper); margin: 0 auto;} */

.wrapper {max-width: var(--max-width-wrapper); margin: 0 auto; padding: 0 20px;}

/* .region-header .wrapper {
  max-width: var(--max-width-wrapper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.11111rem;
  font-weight: 400;
  margin: 0 auto;
  padding: 0;
} */

h2 {font-size: 1.5rem;}
h3 {font-size: 1.17rem;}

.font-weight-bold {font-weight: 600;}

a {color: var(--color-blue); text-decoration: none;}
a:hover {text-decoration: underline;}
/* a.button,
.button.order {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 16px;
} */
    /* background-color: var(--color-gradient-start);
    border: 1px solid var(--background-blue); */
.italic {font-style: italic;}
.align-left {margin-right: 20px;}

.button.order {cursor: pointer;}
a.button,
.button.order {display: inline-block;
  font-weight: bold;
  color: var(--font-color);
  background-color: var(--color-yellow-light);
  border: 1px solid var(--color-yellow);
  padding: 5px 15px;
  border-radius: 16px;
  margin: 10px 10px 10px 0;
}
a.button.invert {background-color: var(--color-yellow);}
a.button:hover,
.button.order:hover {background-color: var(--color-yellow); text-decoration: none;}
a.button.invert:hover {background-color: var(--color-yellow-light);}
a.button img {vertical-align: middle; margin-right: 5px;}
a.button.rotate:hover {animation: rotateAnimation ease-in-out 0.5s;}

.order .field--name-field-images {display: block; float: left; margin-right: 20px;}

.noborder,
.noborder iframe {border: 0;}
.border.blue iframe {border: 1px solid var(--color-blue);}


/* main_menu & menu.sidebar & menu-local-task */
aside ul.menu.sidebar {list-style: none; margin-top: 62px; padding-left: 0;}
aside ul.menu.sidebar li {width: 250px; text-align: center; margin-bottom: 20px;}
aside ul.menu.sidebar li a {display: block; /*width: 100%; max-width: 250px; text-align: center;*/}
ul.menu-main,
#block-cattown-primary-local-tasks > ul,
#block-languageswitcher ul.links {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0;
}
#block-cattown-primary-local-tasks > ul {flex-wrap: wrap;}
ul.menu-main {font-size: 1.11111rem; margin: 50px 0 0 0px;} /* 30px */
ul.menu-main li {margin-right: auto;}
ul.menu-main li:last-child {margin: 0;}
ul.menu a {
  color: var(--font-color);
  background-color: var(--color-yellow-light);
  padding: 16px;
  border: 2px solid transparent;
  border-radius: 30px;
  transition: border 0.5s ease;
}
ul.menu a.is-active {background-color: var(--color-yellow);}
ul.menu-main a {padding: 6px 20px;}
ul.menu-main a.is-active,
ul.menu.sidebar a.is-active {font-weight: 500;}
ul.menu a:hover {
  /* background-color: var(--color-yellow); */
  border: 2px solid var(--color-yellow);
}


/* SVG */
.soc_vote svg,
.social svg {width: 45px; height: 45px; fill: var(--color-gray);}
/* a:hover svg {fill: var(--color-yellow);} */
a:hover svg {
  /* fill: var(--color-yellow-light); */
  transition: fill 0.5s ease;
  fill: var(--color-yellow);
  stroke: transparent;
}
.instagram a svg {
  fill: transparent;
  stroke: var(--color-gray);
  stroke-width: 2.5;
  transition: stroke 0.5s ease;
}
.instagram a:hover svg {
  stroke: var(--color-yellow);
}
li.facebookG {margin-right: 14px;}

/* FOOTER */
footer a {color: #333;}
.footer1 {display: flex; justify-content: space-between;}
ul.social,
ul.footerlinks {list-style: none; padding-left: 0;}

ul.social {display: flex;gap: 40px 150px; flex-wrap: wrap;}
ul.social li a {display:inline-flex; align-items: center; gap: 8px;}
ul.social li span {max-width: 150px; font-size: 13px;}
ul.footerlinks {/*flex-direction: column; display: flex; justify-content: space-evenly;*/ font-size: 16px;}
ul.footerlinks {min-width: max-content;}
ul.footerlinks li {margin-bottom: 20px;}
.social-media__link:hover img {filter: sepia(1);}
.copyright {text-align:center; border-top: 2px solid var(--color-yellow-light); padding-top: 20px; color: #666;}


/* ETC */
iframe {max-width: 100%;}
.aspect-ratio_9_16 {aspect-ratio: 9/16;}
.aspect-ratio_16_9 {aspect-ratio: 16/9;}
iframe.align-right {margin: 20px 0 20px 20px;}
iframe.align-left {margin: 20px 20px 20px 0;}
blockquote {
  overflow: hidden;
  font-style: italic;
  background-color: var(--color-yellow-light);
  border-left: 5px solid var(--color-yellow);
  padding: 5px 20px;
  margin: 18px 0;
}
/* #block-cattown-content */
article li {list-style-image: url("../img/leaf.png");}
article li li {list-style-image: none;}
#cboxClose {top: 0;}
/* 🌿 */
/* <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.1H30V0.0999998H0V30.1Z" fill="black" /></svg> */

/* .copyright a {color: #333;} */
/* COLORBOX */
/* #cboxPrevious,
#cboxNext {top: 50%;} */

.soc_vote {margin: 10px 0;}
.soc_vote a:hover {text-decoration: none; filter: saturate(0.4);}
.soc_vote a:hover .x-twitter {fill: var(--color-gray);}
svg use.facebook {fill: var(--color-facebook);}
svg use.telegram {fill: var(--color-telegram);}
svg use.x-twitter {fill: var(--color-x-twitter);}
/* .soc_vote a:hover img {filter:opacity(.5);}
.soc_vote a:hover img.facebook {filter:opacity(.75);} */

#block-cattown-youtubebyplaylistid {text-align: center;}
.youtube-playlist {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 100px;
  flex-direction: row;
  justify-content: space-evenly;
}
.youtube-channel .items,
.youtube-playlist .items {max-width: 40%;}


/* ARTICLE */
article img {max-width: 100%; height: auto;}

.time_category {display: flex; align-items: center;}
.time_category time {margin-right: 20px;}
/* time */
.time_category {color: var(--color-gray);}
.path-node .time_category {margin-bottom: 24px;}

/* tag */
.field--label-inline {margin: 20px 0;}
.field--label-inline .field__label {display: inline;}
.field--label-inline .field__label::after {content: ":";}
/* .field--label-inline .field__items {display: inline-block;} */
/* .field--label-inline .field__item  */

.field--label-inline .field__item:not(:last-child) a span::after,
.field--label-inline.field--name-field-team .field__item:not(:last-child) a::after {content: ",";}
/* .field--label-inline .field__item:not(:last-child) a span::after {content: ",";} */
/* .field--label-inline .field__item:not(:last-child) a span::after {content: ",\00a0";} */
 /* \00a0 - space */
.field__items .field__item,
.field--label-inline .field__items,
.field.field--label-inline .field__item {display: inline-block; padding: 1px 5px;}

/* .page-node-type-article */
.article .field--name-field-category {display: flex;}
/* .page-node-type-article .field--name-field-category .field__item:not(:first-child) {margin-left: 8px;} */
/* .page-node-type-article .field--name-field-category .field__item:not(:first-child)::before {content: ", ";} */
/* .article  */
figure {display: table!important; margin: 0;}
figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  font-size: 0.88889rem; /* 16px */
  color: var(--color-gray);
  /* background-color: var(--color-yellow-light); */
  border: 1px solid var(--color-yellow);
  border-top: none;
  margin-top: -6px;
  padding: 5px 10px;
}
figure.align-center figcaption {text-align: center;}

/* .page-node-type-gallery  */
.field--name-field-images {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 32px;}
/* .field--name-field-images figure {display: table !important;} */
.field--name-field-images figcaption {
  text-align: center;
  background-color: var(--color-yellow-light);
  padding: 5px;
}


/* SHOP */
/* .product .field--name-field-images {display: block;} */
.field--name-field-out-of-stock {
  display: table;
  font-weight: 500;
  padding: 2px 8px;
  color: var(--background-color);
  background-color: var(--color-red);
}
article.out-of-stock {opacity: .5;}
.views-row article.out-of-stock:hover {opacity: .7;}
body:not(.path-node) article.product.out-of-stock .field--name-field-images::after {
  position: absolute;
  top: 18px;
  left: 12px;
  color: white;
  text-shadow: 1px 1px 3px black;
  content: "Out of Stock";
}
html[lang="uk"] body:not(.path-node) article.product.out-of-stock .field--name-field-images::after {content: "Нема на складі";}
/* html[lang="en"] .path-shop article.product.out-of-stock .field--name-field-images::after {content: "Out of Stock";} */

.product .field__items .field__item {padding: 0;}
.product .field--name-field-images {
  position: relative; /* for :after text */
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  float: left;
  max-width: 220px;
  margin-right: 20px;
  line-height: 0;
}
/* body:not(.path-node) .product .field--name-field-images img {padding: 6px; background-color: var(--color-yellow)}
body:not(.path-node) .product.out-of-stock .field--name-field-images img {background-color: var(--color-red);} */
body:not(.path-node) .product .field--name-field-images img {padding: 0; border: 6px solid var(--color-yellow)}
body:not(.path-node) .product.out-of-stock .field--name-field-images img {border-color: var(--color-yellow-light);}
body.path-shop .product .field--name-field-images img,
body.path-taxonomy .views.shop .product .field--name-field-images img {border: none;}


/* Views */
/* .path-taxonomy article,
.path-shop  */
.taxonomy-term header {width: 100%; text-align: start; margin-bottom: 30px;}
.taxonomy-term header img,
.taxonomy-term header .field--name-field-photo img {float: left; margin-right: 20px; margin-bottom: 20px;}
.views-row article {display: grid; margin-bottom: 30px;}
.views-row article a {color: var(--font-color);}
.views-row article a:hover {text-decoration: none;}
.views-row article a:hover img {filter: drop-shadow(2px 4px 6px var(--color-gray)); border-color: transparent!important;}
.views-row article a:hover .node-title {text-decoration: underline;}
.views-row article img {float: left; margin-right: 20px;}
.path-shop .views-row article img {margin-right: 0;}
.views-row article.node-sticky img {padding-right: 5px; margin-right: 5px; border-right: 10px solid var(--color-yellow);}
.views-row article h2 {margin: 0;}
.views-row h2.node-title,
.views-row .field--name-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word; /* regardless of the language */
  word-wrap: break-word; /* used for non-English languages */
}
.views-row .field--name-body {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
/* justify-content: space-between; */
.taxonomy-term.gallery {display: flex; flex-wrap: wrap; align-items: flex-end; text-align: center;}
.taxonomy-term.gallery > .views-row {margin: 0 auto;}
.taxonomy-term.gallery .views-row article.node-sticky img {float:none; padding: 0; border: none;}
.taxonomy-term.gallery h2.node-title {max-width: 228px; font-size: 1.38889rem; -webkit-line-clamp: 3; line-clamp: 3;}

.views-exposed-form {margin: 20px 0;}


/* Pager */
nav.pager {width: 100%;}
ul.js-pager__items {list-style: none; text-align: center; padding: 0;}
ul.js-pager__items li {display: inline-flex; margin: 5px 0;}
ul.js-pager__items li a {
  color: var(--font-color);
  margin: 0;
  padding: 6px 12px;
  border: 2px solid var(--color-yellow);
  border-radius: 5px;
}
ul.js-pager__items li.is-active a {font-weight: bold; background-color: var(--color-yellow-light);}
ul.js-pager__items li a:hover {
  color: #fff;
  background-color: var(--color-yellow);
  text-decoration: none;
}
ul.js-pager__items li.pager__item--previous {margin: 0 4px;}
ul.js-pager__items li.pager__item--last {margin-left: 4px;}


/* MENU */
.mobonly,
.menu960,
.menu-ticker,
.btn-menu,
#block-cattown-main-menu ul.sidebar {display: none;}
/* ul.menu-main li.item-home:first-child  */


/* ETC */
/* FORM */
.form-item {
  margin: 10px 0;
}

input[name="quantity"] {
  max-width: 50px;
}

/* Login */
.user-login-form .form-item-name,
.user-login-form .form-item-pass {
  margin: 20px 0;
}

/* Admin */
#block-cattown-primary-local-tasks ul {
  border-bottom: 1px solid var(--color-yellow-light);
  border-collapse: collapse;
  height: auto;
  line-height: normal;
  list-style: none;
  margin: 5px;
  padding: 0 0 0 1em;
  white-space: nowrap;
}

#block-cattown-primary-local-tasks ul li a {
  height: auto;
  margin-right: 0.5em;
  padding: 0.25em 1em 0;
  text-decoration: none;
  color: var(--color-gray);
}

#block-cattown-primary-local-tasks li a:hover,
#block-cattown-primary-local-tasks li a.is-active {
  color: var(--font-color);
  background-color: unset;
  /* border: 1px solid var(--background-blue); */
  border-bottom: 1px solid var(--color-yellow);
  /* #B6EEF5; */
}

img[data-entity-uuid="7d64b564-68c7-4c46-ab11-1156d04d737f"] {
  border: 1px solid var(--color-yellow);
}

/* #block-cattown-primary-local-tasks ul li a:hover {text-decoration: underline; color: var(--font-color);} */


/* Animation */
/* .field-spotify {animation: fly-left ease-in-out 1.5s forwards;}
.field-deezer {animation: fly-left ease-in-out 1s forwards;}
.field-apple-cattown {animation: fly-right ease-in-out 1s forwards;}
.field-bandcamp {animation: fly-right ease-in-out 1.5s forwards;}

.cattown-etc .field--type-link:hover a {animation: rotateAnimation 0.5s;}*/

@keyframes rotateAnimation {
  0% {transform: rotateZ(3deg);}
  50% {transform: rotateZ(-3deg);}
  100% {transform: rotateZ(0deg);}
}

@keyframes fly-right {
  from {transform: translateX(100vw);}
  to {transform: translateX(0);}
}
@keyframes fly-left {
  from {transform: translateX(-100vw);}
  to {transform: translateX(0);}
}

/* .cattown-etc .field--type-link a {transition: transform 0.3s ease;} */
/* .cattown-etc .field--type-link:hover a {
  transform: rotateZ(5deg -5deg 0deg);
  transition-duration: .5s;
}
*/