/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap')


h1, h2, h3 {
 font-family: 'Roboto', sans-serif !important;
}

.title-tizer {
	font-family: "Roboto Condensed" !important;
	line-height: 1.3;
	padding: 0 5px;
}

.roboto-thin {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: italic;
}


.page-title-text {
	text-align: center;
}
a.img--is-clickable > img.solo-image, a.img--is-clickable > picture > img.solo-image {
	width: auto !important;
}
.vvjs.br-576 .vvjs-hero-content.d-middle {
	border: 1px solid #fff;
	box-shadow: 0 0 10px #fff;
}
.hero-text {
	text-shadow: 1px 1px 1px #fff;
}
.site-logo-img {
	max-width: 320px;
}
.vvjs .nav-dots-numbers.dots > .dots-numbers-button {
	color: gray;
}
.hero-title {
	text-align: center;
}

/* страница товара */

/* карточка товара */
.color-parametr {
	padding: 5px 10px;
	border-bottom: 1px dashed #9b9b9b;
	margin: 0 !important;
}
.color-parametr label {
	color: black;
}
.color-parametr div {
	color: darkblue;
	float: right;
}
.color-parametr:hover {
	background: #eee;
}
.category-cont {
	font-size: 24px;
	padding: 0 0 15px 0;
}
.image-cont {
	display: table;
        margin: 0 auto;
	padding-top: 30px;
}
.carta-cena {
	font-size: xxx-large;
	color: grey;
}
.form-content-title {
	text-align: center;
	font-size: x-large;
	color: crimson;
}

/* тизеры товаров */

@media (min-width: 62rem) {
.try-it-now {
    padding: var(--solo-px12) var(--solo-px32);
    border-radius: 24px;
  }
}
.try-it-now {
	display: inline-block;
	background: linear-gradient(180deg,#0369c1 0%,#023371 100%);
	padding: var(--solo-px8) var(--solo-px12);
	text-align: center;
	text-decoration: none;
	border-radius: 24px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	transition: transform 0.2s ease,box-shadow 0.2s ease;
	width: 100%;
	margin-top: 20px;
}
.try-it-now:hover {
	background: linear-gradient(180deg,#0481e0 0%,#03459b 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}
.try-it-now a {
	color: #fff !important;
	text-shadow: 1px 1px 1px #000 !important;
}
.try-carusel {
	width: max-content;
	margin: 0 auto;
	margin-bottom: 8px;
} 
.tizery-img-cat img {
	margin: 0 auto;
	/*border: 1px solid #ccc;
	padding: 5px;
	border-radius: 3px;*/
} 
.views-view-responsive-grid__item {
	border: 1px solid #e3e3e3;
	padding: 5px;
	box-shadow: 0px 0 5px #1f456e;
	transition: 1.3s;
	border-radius: 5px;
}
.views-view-responsive-grid__item:hover {
	border: 1px solid #fff;
	box-shadow: 0 0 34px #1f456e;
	/*margin: -5px;*/
	transition: 0.4s;
}

/* подкатегории */

.term-title {
	position: absolute;
	background: #800000;
	z-index: 9;
	top: 37%;
	opacity: 0.8;
	padding: 15px;
	box-shadow: 0 0 17px #000;
	border-right: 20px solid #1f456e;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-radius: 0 10px 10px 0;
	font-size: 28px;
}
.term-title a {
	color: white !important;
	text-shadow: 1px 1px 3px #000;
}







.main-foot {
	display: flex;
}
.main-foot div {
	display: block;
}
#block-decordo-adres, #block-decordo-telefonielpochta {
	font-size: x-large;
	color: #008080;
}
#block-decordo-telefonielpochta p {
	padding: 0;
	margin: 0;
}
#block-decordo-adres {
	margin: 0 auto;
}
.gslide-image img.zoomable {
	transition: 1s;
}
.glightbox-clean .gslide-media {
	box-shadow: none;
}
.carta-cena {
	font-size: xxx-large;
	color: grey;
}
.cena-tizer {
	color: white;
	background: forestgreen;
	padding: 10px;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	float: left;
	border-radius: 5px;
	box-shadow: 3px 3px 3px #000;
	/*border: 1px solid #fff;*/
}
.suffiks {
	float: none;
	/* padding: 0 10px; */
	background: #1f456e;
	border-radius: 5px;
	margin: 5px;
	box-shadow: none;
}
.carusel-image img {
	margin: 0 auto;
}
.search-button-open {
	padding: 10px 0 0 10px;
}
.glightbox-clean .gslide-description {
	background: none;
}
.gslide-desc {
	text-shadow: 0px 0px 3px #dfdfdf;
	text-align: center;
	font-size: x-large !important;
	color: #000;
	font-weight: bold;
}

#main-menubar {
	box-shadow: 0 0 10px #000;
	border: 1px solid #032c56;
}
#main-menubar a {
	text-shadow: 1px 1px 1px #000;
}
.slick-arrow::before {
	color: #1f456e;
}
.page-wrapper input:not(.button) {
	border-color: #bbb;
	border-radius: 4px;
}
.page-wrapper select {
	border-color: #939393;
	border-radius: 4px;
}
.block-carusel-home-title h2 {
	text-align: center;
	background: darkorange;
	padding: 20px;
	margin-bottom: -20px;
	text-shadow: 1px 1px 2px #fff;
}
.foot-menu li {
	display: block;
}
.flex-around {
	display: flex;
	justify-content: space-around;
        align-items: flex-end;
}
.dp-flex {
	display: flex;
}