html, body {width: 100%;min-height: 100%;display: flex;flex-direction: column;flex: 1 0 auto;margin: 0px;color: var(--grey-light);font-family: 'Roboto Condensed', sans-serif;font-size: 14px;background: var(--background);scroll-behavior: smooth;letter-spacing: 1px;}

/* Színek */

:root {
	--background: #000000;
	--grey-dark: #111111;
	--grey: #575757;
	--grey-2: #353535;
	--grey-light: #9b9b9b;
	--grey-lighter: #e5e5e5;
	--light: #ffffff;
	--site-color: #e60012;
	--site-color-2: #ed9915;
}

a, .close, .product-button {-webkit-tap-highlight-color: transparent;}
a:focus, a:visited, a:active, .close:focus, .close:visited, .close:active, .product-button:focus, .product-button:visited, .product-button:active {outline: none;}

a {color: var(--grey);text-decoration: none;text-transform: uppercase;font-weight: 700;transition: all 0.3s;}
a img {transition: all 0.3s;}
a:hover {color: var(--site-color);}
a:hover img {filter: invert(14%) sepia(75%) saturate(6322%) hue-rotate(0deg) brightness(102%) contrast(230%);}

h1 {position: relative;display: block;margin: 0px;font-size: 36px;font-weight: 100;color: var(--light);z-index: 2;}

form {position: relative;margin: 0px;}
input {outline: none;}

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

table {width: 100%;border-spacing: 0px;}
table tr {transition: all 0.2s;}
table tr:hover {background: var(--grey-2);}
table td:first-child {padding: 10px;color: var(--ligth-grey);font-weight: 400;}
table td {padding-right: 40px;color: var(--site-color-2); font-weight: 700; border-bottom: 1px solid var(--grey-2);}

.close {position: absolute;width: 35px;height: 35px;top: 25px;right: 25px;display: flex;justify-content: center;align-items: center;cursor: pointer;transition: all 0.5s;z-index: 99;}
.menu-open-close {position: relative;top: auto;right:auto;margin: 10px;}
.close:hover {transform: rotate(180deg)  scale(1.5);}
.close svg {width: 30px;height: 30px;}
.popup-close .x-icon, .menu-open-close .x-icon {fill: var(--grey-lighter);transition: all 0.5s;}
.popup-close:hover .x-icon {fill: var(--light);}
.menu-open-close:hover .x-icon {fill: var(--site-color);}

.popup-container {position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: #00000099;z-index: 99999;opacity: 0;pointer-events: none;transition: all 0.5s;}
.popup-container h1 {padding: 20px;border-bottom: 1px solid var(--grey-light);background: var(--light);color: var(--grey-light);}
.popup-box {position: relative;width: 100%;height: 100%;max-width: 640px;max-height: 480px;display: flex;flex-direction: column;background: var(--grey-lighter);}
.popup-content {position: relative;overflow-y: scroll;}
.popup-shop {position: relative;margin: 10px;padding: 10px;display: flex;align-items: center;background: var(--light);}
.popup-shop .popup-image {position: relative;width: auto;max-width: 100px;height: 70px;margin-right: 20px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.popup-shop .popup-image img {flex-shrink: 0;max-width: 100%;max-height: 100%;}
.popup-shop h2 {margin: 0px;padding-left: 20px;flex: 1 0 0;border-left: 1px solid var(--site-color-2);font-weight: 200;}
.popup-shop .product-button {margin: 0px;}
.popup-shop .where-to-buy::before {content: " ";}

.top {position: sticky;top: 0px;width: 100%;display: flex;flex-wrap: wrap;justify-content: center;background: var(--grey-dark);z-index: 9999;}
.top-container {position: relative; width: 100%; display: flex; max-width: 1440px;}

.logo {position: relative;height: 80px;padding: 10px 4vw;display: flex;justify-content: center; transition: all 0.3s;}
.logo img {height: 100%;}
.logo-scroll-height {height: 50px;}

.menu {position: relative;display: flex;align-items: center;flex: 1 0 0;}
.menu a {position: relative;display: block;box-sizing: border-box;padding: 20px 40px;cursor: pointer;}
.menu a:hover {color: var(--site-color);}

.menu-open {position: absolute;width: 80vw;max-width: 1000px;max-height: 700px;left: 50%;transform: translateX(-50%);margin: auto;height: auto;display: flex;flex-wrap: wrap;box-sizing: border-box;border: 1px solid var(--grey);background: var(--grey-lighter);overflow-x: hidden;overflow-y: hidden;transition: opacity 0.5s;opacity: 0;z-index: 99999;}
.menu-open form {position: sticky;top: 0px;width: 100%;display: flex;align-items: center;background: var(--grey-lighter);z-index: 2;}
.menu-open input[type=text], .search-container input[type=text] {position: relative;width: 100%;margin: 10px;padding: 10px;border: none;border-bottom: 0px;background: var(--grey-2);color: var(--light);text-align: right;}
.menu-open input[type=submit] {;}

.menu-content {position: relative;padding: 10px;display: flex;flex-wrap: wrap;flex-grow: 1;transition: all 0.3s;}
.menu-item {position: relative;display: flex;flex: 0 0 33%;min-width: 230px;margin: 15px 0px;}
.menu-item a {position: relative;padding: 0px;display: flex;align-items: center;}
.menu-picture {position: relative;width: 50px;height: 34px;margin-right: 10px;text-align: center;}
.menu-picture img {height: 100%;}
.menu-text {;}

.search-container {position: relative;display: flex;align-items:center;}

.slider {position: sticky!important;max-height: 800px;z-index: 1;-webkit-transform: translate3d(0,0,0);}
.slider img {display: block;width: auto!important;height: 30vw;min-height: 300px;max-height: 650px;}

.container {position: relative;display: flex;flex-direction: column;flex-wrap: wrap;justify-content: center;align-items: center;flex: 1 1 auto;box-sizing: border-box;background: var(--background);font-size: 16px;z-index: 9998;-webkit-transform: translate3d(0,0,0);}
.title-line {position: relative;width: 100%;padding: 3vw 0px;display: flex;justify-content: center;box-sizing: border-box;overflow: hidden;}
.title-line img {position: absolute;height: 100%;bottom: 0px;}
.content {position: relative;max-width: 1440px;padding: 0px 4vw;display: flex;flex: 1 0 auto;flex-wrap: wrap;box-sizing: border-box;}
.product-page .product > *, .bottom-container {padding: 2vw 4vw;}

.product {position: relative;width: 15%;min-width: 210px;display: flex;flex-direction: column;align-items: flex-end;flex: 1 0 auto;flex-wrap: wrap;margin: 10px;padding: 10px;box-sizing: border-box;border: 1px solid var(--grey);background: var(--grey-dark);cursor: pointer;transition: all 0.5s;}
.product h1 {margin-bottom: 20px;}
.product:hover {border: 1px solid var(--site-color); color: var(--light);}
.product:empty {padding: 0px;border: none;background: none;cursor: auto;}
.product-image {position: relative;width: 100%;height: 150px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: hidden;}
.product-image img {width: auto;height: auto;max-width: 90%;max-height: 100%;cursor: pointer;}
.small-images {position: relative;bottom: 0px;display: flex;justify-content: center;flex-wrap: wrap;box-sizing: border-box;}
.small-images div {position: relative;width: 70px;height: 70px;margin: 10px;display: flex;justify-content: center;vertical-align: middle;/* flex-direction: column; */cursor: pointer;overflow: hidden;}
.small-images img {width: auto;height: auto;max-height: 100%;/* max-width: 100%; */}
.product-title {text-align: center;}
.product-cikkszam {margin-bottom: 20px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-all;}
.product-button-box {flex: 1 0 0;display: flex;align-items: flex-end;justify-content: end;}

.product-button {position: relative;min-width: 95px;display: inline-block;margin: 40px 0px 0px 0px;padding: 12px 10px 10px 15px;color: var(--light);text-align: right;font-size: 15px;font-weight: 400;text-transform: uppercase;cursor: pointer;}
.product-button::before {position: absolute;top: -40%;right: 0px;white-space: nowrap;color: var(--light);font-size: 10px;text-transform: lowercase;}
.product-button .button-effect {position: absolute;top: 0px;left: 120%;width: 0px;height: 100%;background: rgba(0,0,0,0.2);transition: all 0.3s;}
.product-button:hover .button-effect {left: 0px; width: 100%;}
.product-button .button-text {position: relative;text-align: center;}
.product-button > div:first-child {position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;overflow: hidden;}
.recommended-price {background: var(--site-color);}
.recommended-price::before {content: "ajánlott fogyasztói ár";}
.where-to-buy {background: var(--site-color-2);}
.where-to-buy::before {content: "hol vásárolhatom meg";}

.product-page {padding: 0px;}
.product-page .product {width: 100%;margin: 0px;padding: 0px;flex-direction: row;align-items: stretch;justify-content: center;border: none;cursor: auto;background: url("../gfx/bg-image.jpg") no-repeat top right;}
.product-page .product:hover {color: var(--grey-light);}
.product-page .product > * {flex:1 0 50%;box-sizing: border-box;}
.product-page .product > * a {overflow: hidden;text-overflow: ellipsis;}
.product-page .product-title {position: relative;margin-bottom: 20px;display: flex;flex-direction: column;justify-content: flex-start;flex: 1 0 50%;font-size: 40px;font-weight: 100;text-align: left;}
.product-page .product-button {margin: 40px 10px 0px 0px;}
.product-page .recommended-price {;}
.product-page .where-to-buy {;}
.product-page .product-image-container {position: relative;}
.product-page .product-image {height: auto; margin-bottom: 5px;}
.product-page .product-image img {max-height: 350px;}
.product-page .product-specification {position: relative;}

.product-page .product-links {position: relative;display: flex;flex-direction: column;align-items: flex-start;}
.product-page .product-links div {;}
.product-page .product-links svg {width: 20px; margin-right: 10px;}
.product-page .product-links a {display: flex;align-items: center;margin: 5px;padding: 6px;color: var(--grey-light)!important;}
.product-page .product-links a:hover {color: var(--site-color)!important;}
.links-icon {fill: var(--site-color-2)!important;transition: all 0.5s;}
.product-links a:hover .links-icon {fill: var(--site-color)!important;transition: all 0.3s;}

.product-page .product-text {position: relative;font-family: 'Roboto Condensed'!important;}
.product-page .product-text span {color: var(--grey-light)!important;font-size: 14px!important;}
.product-page a {color: var(--site-color);}
.product-page a:hover {color: var(--site-color-2);}

.bottom {position: relative;display: flex;justify-content: center;background: var(--background);}
.bottom-container {position: relative;width: 100%;max-width: 1440px;align-items: center;display: flex;flex-wrap: wrap;box-sizing: border-box;}
.bottom a {margin: 10px 0px 10px 30px;}
.social-icons {height: 30px;display: flex;align-items: center;padding-right: 15px;border-right: 1px solid var(--grey);}
.social-icons a {position: relative;display: block;width: 42px;height: 42px;margin: 0px;background: url("../gfx/new-footer-social-icon.png");transition: all 0.3s;}
.social-icons a:nth-child(2) {background-position-x: -42px}
.social-icons a:nth-child(3) {background-position-x: -84px}
.social-icons a:nth-child(4) {background-position-x: -126px}
.social-icons a:nth-child(5) {background-position-x: -168px}
.social-icons a:hover {background-position-y: -42px; transition: all 0.3s;}

.to-top {position: sticky;width: 40px;height: 40px;bottom: 0px;left: 50%; transform: translateX(-50%); background: var(--grey-2);transition: all 0.3s;cursor: pointer;opacity: 0; z-index: 9999;}
.to-top:hover {background: var(--site-color);transition: all 0.3s;}
.to-top svg {padding: 10px;}
.to-top .to-top-arrow {transition: all 0.3s;}
.to-top:hover .to-top-arrow {fill: white;transition: all 0.3s;}
.to-top-visible {bottom: 100px;opacity: 1;pointer-events: auto;transition: all 0.3s;}

@media screen and (max-width: 700px) {
	.popup-shop .popup-image {height: 30px;}
	.logo {height: 30px!important; z-index: 9998;}
	.menu {position: absolute; width: 100%; height: 100%; justify-content: center;}
	.menu-open {position: absolute;left: 0px;right: 0px;max-height: 100vh;transform: translateX(0px);overflow-y: scroll;z-index: 9999;}
	.menu > a {padding: 10px 10px;}
	.menu-content {flex: 1 1 0;}
	.menu-item {flex: 0 1 auto;}
	.product-page .product > * {max-width: 100vw;flex: 1 0 100%;display: flex;flex-direction: column;}
	.product-button-box {justify-content: center;}
	.bottom-container {justify-content: center;}
	.bottom a {margin: 10px;}
	.social-icons {width: 100%;padding: 20px 0px;justify-content: center;align-items: center;border-top: 1px solid var(--grey); border-right: none;}
}

@media screen and (max-width: 400px) {
	.menu-open {width: auto;}
	.menu-content {;}
	.product {/* width: auto; */}
}