/*

Theme Name: Silymarin
Theme URI: https://drap.hr
Description: Silymarin web site theme
Author: Drap d.o.o.
Author URI: https://www.drap.hr
Version: 1.0

*/

#cmplz-cookies-overview .cmplz-dropdown summary, #cmplz-document .cmplz-dropdown summary, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown summary,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose, #cmplz-document .cmplz-dropdown .cookies-per-purpose, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header,
#cmplz-cookies-overview .cmplz-dropdown h5, #cmplz-document .cmplz-dropdown h5, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown h5,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
  background: transparent !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown .cookies-per-purpose div {
  padding: 5px;
}


* { forced-color-adjust: none; }

/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: 'Roboto', sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: rgba(86,175,49,0.05);
  --text: #222;
  --text-light: #555;
  --border: rgba(86,175,49,0.2);
  --accent: rgb(86,175,49);
  --code: #ccc;
  --preformatted: #444;
  --marked: #fd3;
  --disabled: #eee;
  --signature: #b11cab;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
	--bg: #012610;
	--accent-bg: #2b2b2b;
	--text: #dcdcdc;
	--text-light: #ababab;
	--border: rgba(86,175,49,0.2);
	--accent: rgb(86,175,49);
	--code: #666;
	--preformatted: #ccc;
	--disabled: #111;
  }
  /* Add a bit of transparancy so light media isn't so glaring in dark mode */
  img,
  video {
	opacity: 0.8;
  }
}

img { max-width: 100%; height: auto; }

html {
  /* Set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns:
	1fr min(45rem, 90%) 1fr;
  margin: 0;
}

body>* {
  grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body > header {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
  text-align: center;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

body > header h1 {
  max-width: 1200px;
  margin: 1rem auto;
}

body > header p {
  max-width: 40rem;
  margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and nav */
main {
  padding-top: 1.5rem;
}

body > footer {
  margin-top: 4rem;
  padding: 2rem 1rem 1.5rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* Format headers */
h1 {
  font-size: 3rem;
  color: var(--signature);
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
  color: var(--accent);
}

h3 {
  font-size: 2rem;
  margin-top: 3rem;
  color: var(--accent);
}

h4 {
  font-size: 1.44rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 0.96rem;
}

strong {
  color: var(--signature);
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
  line-height: 1.1;
  font-family: 'Roboto Condensed', sans-serif;
}

/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
  h1 {
	font-size: 2.5rem;
  }

  h2 {
	font-size: 2.1rem;
  }

  h3 {
	font-size: 1.75rem;
  }

  h4 {
	font-size: 1.25rem;
  }
}

/* Format links & buttons */
a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: none;
  border-radius: 5px;
  background: var(--accent);
  font-size: 1rem;
  color: var(--bg);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
}

button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
  cursor: default;
  opacity: 0.5;
  cursor: not-allowed;
}

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  background-color: var(--disabled);
}

input[type="range"] {
  padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
  cursor: help;
}

button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
  filter: brightness(1.4);
  cursor: pointer;
}

/* Format navigation */
nav {
  font-size: 1rem;
  line-height: 2;
}

nav a,
nav a:visited {
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  color: #fff;
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
  transition: all .3s linear;
}

nav a:hover {
  border-bottom-color: #fff;
}

nav a:last-child {
  margin-right: 0;
}

/* Reduce nav side on mobile */
@media only screen and (max-width: 750px) {
  nav a {
	border: none;
	padding: 0;
	color: var(--accent);
	text-decoration: underline;
	line-height: 1;
  }
}

/* Format the expanding box */
details {
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 1rem;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.6rem 1rem;
}

details[open] {
  padding: 0.6rem 1rem 0.75rem 1rem;
}

details[open] summary + * {
  margin-top: 0;
}

details[open] summary {
  margin-bottom: 0.5rem;
  padding: 0;
}

details[open] > *:last-child {
  margin-bottom: 0;
}

/* Format tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

td,
th {
  border: 1px solid var(--border);
  text-align: left;
  padding: 0.5rem;
}

th {
  background: var(--accent-bg);
  font-weight: bold;
}

tr:nth-child(even) {
  /* Set every other cell slightly darker. Improves readability. */
  background: var(--accent-bg);
}

table caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Format forms */
textarea,
select,
input {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: none;
  box-sizing: border-box;
  width: 60%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Add arrow to drop-down */
select {
  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
	linear-gradient(135deg, var(--text) 51%, transparent 49%);
  background-position: calc(100% - 20px), calc(100% - 15px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select[multiple] {
  background-image: none !important;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: bottom;
  position: relative;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
}

input[type="checkbox"]:checked::after {
  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
  content: " ";
  width: 0.1em;
  height: 0.25em;
  border-radius: 0;
  position: absolute;
  top: 0.05em;
  left: 0.18em;
  background: transparent;
  border-right: solid var(--bg) 0.08em;
  border-bottom: solid var(--bg) 0.08em;
  font-size: 1.8em;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  /* creates a colored circle for the checked radio button  */
  content: " ";
  width: 0.25em;
  height: 0.25em;
  border-radius: 100%;
  position: absolute;
  top: 0.125em;
  background: var(--bg);
  left: 0.125em;
  font-size: 32px;
}

/* Make the textarea wider than other inputs */
textarea {
  width: 80%;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
  textarea,
  select,
  input {
	width: 100%;
  }
}

/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

/* do not show border around file selector button */
input[type="file"] {
  border: 0;
}

/* Misc body elements */
hr {
  color: var(--border);
  border-top: 1px;
  margin: 1rem auto;
}

mark {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--marked);
}

main img,
main video {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

figure {
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

blockquote {
  margin: 2rem 0 2rem 2rem;
  padding: 0.4rem 0.8rem;
  border-left: 0.35rem solid var(--accent);
  color: var(--text-light);
  font-style: italic;
}

cite {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: normal;
}

/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp {
  font-family: var(--mono-font);
  color: var(--code);
}

kbd {
  color: var(--preformatted);
  border: 1px solid var(--preformatted);
  border-bottom: 3px solid var(--preformatted);
  border-radius: 5px;
  padding: 0.1rem;
}

pre {
  padding: 1rem 1.4rem;
  max-width: 100%;
  overflow: auto;
  overflow-x: auto;
  color: var(--preformatted);
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* Fix embedded code within pre */
pre code {
  color: var(--preformatted);
  background: none;
  margin: 0;
  padding: 0;
}

/* ############################################################################# */

.home h1 { margin-top: 60px; }
h1 a { color: var(--signature) !important; text-decoration: none; }
.navigation { background-color: var(--signature); }
nav { border-bottom: 5px solid #fff; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav li { display: flex; line-height: 60px; }
nav li img { width: 130px; height: 60px; margin-right: 1rem; }
nav > input { display: none; }
nav a { display: flex; text-decoration: none; }
nav .logo a { border: none; }
hr { border: none; border-top: 1px solid var(--border); width: 100%; }

.gradient { background: linear-gradient(135deg, rgb(86,175,49) 35%, rgb(0,150,64) 50%, rgb(1,38,16) 100%); }

.articles { display: flex; margin: 0 -1.3rem; flex-wrap: wrap; justify-content: center; }
article { width: calc(100% / 3 - 2.6rem); padding: 1.3rem; position: relative; }
article a { display: block; z-index: 1; }
article a::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ' '; transition: all .3s linear; }
article a:hover::after { box-shadow: 0 0 20px rgba(0,0,0,0.2); }
article h3 { font-size: 1.3rem; margin: 1.3rem 0; }
article p { font-size: 1rem; line-height: 1.2; }
article img { width: 100%; }
.datum { font-size: 80%; color: var(--text-light); }

.hero > div { display: flex; align-items: center; flex-direction: row-reverse; max-width: 991px; margin: 50px auto; }
.hero > div p img { width: 50%; }
.hero > div p { color: #fff; width: 50%; font: bold 4.5rem/1 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.1rem; text-align: left; }
.lang-mk .hero > div p { font-size: 3rem; }

.hamburger { display: none; color: #fff; }

#breadcrumbs { font-size: 12px; text-transform: uppercase; margin-top: 3rem; }
#breadcrumbs a { text-decoration: none; margin-right: 10px; }
#breadcrumbs > span > span span { margin-left: 10px; }

.row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.row .column { width: 50%; line-height: 1.2; }
.row .column strong { display: block; margin-top: 10px; }
.row .col { width: 33%; }

.negative-top5 { margin-top: -30px; }
.negative-top10 { margin-top: -60px; }

.text-center { text-align: center; }

/* ################# BANNER ############## */

.banner { position: relative; height: 30vw; width: 60%; }
.banner > div { position: absolute; right: 0; top: 0; height: 100%; width: 100vw; }
.banner > div > img { position: absolute; width: auto; }

.banner .jetra,
.banner .bolesna { height: 25vw; width: auto; top: 0; right: 7vw; }
.banner .bolesna { opacity: 0; }
.banner.active .bolesna { animation: ill 2s ease-out 1.3s forwards, heal 0.7s ease-out 4.3s forwards; }
.banner .swiper { height: 30vw; width: auto; bottom: 0.5vw; right: -2vw; transform-origin: center top; }
.banner.active .swiper { animation: swipe 1.3s ease-in 3.7s forwards; }

.banner .alcohol { height: 10vw; width: auto; top: 10vw; right: 33vw; opacity: 0; }
.banner.active .alcohol { animation: grow 1s ease-out 1.3s forwards, die 1s ease-out 4s forwards; }
.banner .hepatitis { height: 6.5vw; width: auto; top: 10vw; right: 16vw; opacity: 0; }
.banner.active .hepatitis { animation: grow 1s ease-out 1.6s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza3 { height: 4vw; width: auto; top: 12vw; right: 26vw; opacity: 0; }
.banner.active .ciroza3 { animation: grow 1s ease-out 1.7s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza2 { height: 4.5vw; width: auto; top: 3vw; right: 29vw; opacity: 0; }
.banner.active .ciroza2 { animation: grow 1s ease-out 1.9s forwards, die 1s ease-out 4s forwards; }
.banner .ciroza1 { height: 6vw; width: auto; top: 0vw; right: 13vw; opacity: 0; }
.banner.active .ciroza1 { animation: grow 1s ease-out 2s forwards, die 1s ease-out 4s forwards; }

.banner .t-alkohol { height: 2vw; width: auto; top: 19vw; right: 34vw; opacity: 0; }
.banner.active .t-alkohol { animation: grow 1s ease-out 1.4s forwards, die 1s ease-out 4s forwards; }
.banner .t-ciroza { height: 1.55vw; width: auto; top: 8vw; right: 26vw; opacity: 0; }
.banner.active .t-ciroza { animation: grow 1s ease-out 1.8s forwards, die 1s ease-out 4s forwards; }
.banner .t-hepatitis { height: 1.6vw; width: auto; top: 7vw; right: 13vw; opacity: 0; }
.banner.active .t-hepatitis { animation: grow 1s ease-out 1.7s forwards, die 1s ease-out 4s forwards; }

@keyframes grow { 0% { opacity: 0; transform: translateY(-1vw); } 100% { opacity: 1; transform: translateY(0vw); } }
@keyframes die { 0% { opacity: 1; transform: translateY(0vw); } 100% { opacity: 0; transform: translateY(-1vw); } }
@keyframes swipe { 0% { transform: rotate(0deg) translateX(0vw) scaleX(1); } 59% { transform: rotate(40deg) translateX(-30vw) scaleX(1); } 60% { transform: rotate(40deg) translateX(-30vw) scaleX(-1); } 99% { transform: rotate(0deg) translateX(0vw) scaleX(-1); } 100% { transform: rotate(0deg) translateX(0vw) scaleX(1); } }
@keyframes ill { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heal { 0% { opacity: 1; } 100% { opacity: 0; } }

h1 > span { text-transform: none; }

.oj { display: flex; }
.oj img { width: 100%; height: auto; }
.oj p { text-align: center; font-size: 12px; }
.oj span { display: flex; flex-direction: column; }
.oj span:after { content: '›'; font-size: 30px; line-height: 1; display: block; padding: 30px 10px; }
.oj span.double:after { content: '›'; font-size: 30px; line-height: 1; display: block; padding: 0 10px 15px 10px; }
.oj span.double:before { content: '‹'; font-size: 30px; line-height: 1; display: block; padding: 15px 10px 0 10px; }

.video-container { position: relative; padding-bottom: 56.25%; }
.video-container iframe,
.video-container:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.video-container iframe { width: 100%; height: 100%; }

/* ################# MEDIA QUERIES ############## */

@media screen and (min-width: 990px) {

	.oj { margin-left: -100px; margin-right: -100px; }
}

@media screen and (min-width: 769px) {

	nav ul { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px){

	.articles { margin: 0 -1.2rem; }
	article { width: calc(100% - 2.6rem); }
	.hero > div { flex-direction: column; margin: 30px auto; }
	.hero > div p img { height: 4rem; width: auto; }
	.hero > div p { width: calc(100% - 50px); font-size: 3.2rem; text-align: center; }
	nav { padding: 20px; display: flex; flex-direction: row-reverse; justify-content: space-between; }
	nav input { width: 100%; }
	nav li svg { height: 36px; }
	nav > input { width: 100% !important; background: none !important; border: none !important; }
	nav input[type="checkbox"]:checked ~ ul .menu-item { margin-top: 20px; height: 40px; }
	nav input[type="checkbox"]:checked ~ ul .menu-item a { color: rgba(255,255,255,1); }
	nav input[type="checkbox"]:checked::after { display: none; }
	.hamburger { display: block; font-size: 36px; line-height: 1; text-decoration: none; }
	.menu-item { overflow: hidden; margin-top: 0px; height: 0px; transition: all .3s linear; }
	.menu-item a { color: rgba(255,255,255,0); transition: all .3s linear; }

	.banner { height: 50vw; width: 100%; }
	.banner > div { right: 0; top: 0; height: 100%; width: 100vw; }

	.banner .jetra,
	.banner .bolesna { height: 50vw; top: 0; right: 14vw; }
	.banner .swiper { height: 60vw; top: -3vw; right: 0vw; }

	.banner .alcohol { height: 20vw; top: 20vw; right: 66vw; }
	.banner .hepatitis { height: 13vw; top: 20vw; right: 32vw; }
	.banner .ciroza3 { height: 8vw; top: 24vw; right: 52vw; }
	.banner .ciroza2 { height: 9vw; top: 6vw; right: 58vw; }
	.banner .ciroza1 { height: 12vw; top: 0vw; right: 26vw; }

	.banner .t-alkohol { height: 4vw; top: 38vw; right: 68vw; }
	.banner .t-ciroza { height: 3.1vw; top: 16vw; right: 52vw; }
	.banner .t-hepatitis { height: 3.2vw; top: 14vw; right: 26vw; }

  li.logo.logo-belupo.menu-item { position: absolute; z-index: 2; top: 0; margin: 15px 0 !important; right: 43px; overflow: visible; }
  .logo-silymarin img { margin-top: -3px; margin-bottom: -6px; }
  nav li img { width: 115px; height: 50px; }
}

@media (max-width: 767px){

	.oj { flex-direction: column; align-items: center; width: 70%; margin: 0 auto; }
	.oj p { font-size: 14px; }
	.oj span { transform: rotate(90deg); }
	.oj span:after { font-size: 40px;}
	.oj span.double:after { font-size: 40px; }
	.oj span.double:before { font-size: 40px; }

  .row .column,
  .row .col { width: 100%; }
}

@media (max-width: 600px){

  .hero > div p { font-size: 2rem; letter-spacing: 0; }
  .home .negative-top5 { margin-top: 20px; }
}