:root {

	--main-dark-color: #000;

	--main-light-color: #fff;

	--col-padding: 40px;}

* {

	padding: 0;

	margin: 0;

	box-sizing: border-box;}

body {

	font-family: "QuickSand", sans-serif;

	font-size: 20px;}

section, nav, footer, header {

	position: relative;}

img {

	max-width: 100%;

	border-radius: 20px;}

h1 {

	font-weight: 500;

	font-size: 80px;}

h2 {

	font-weight: 500;

	font-size: 80px;}

h3 {

	font-size: 30px;}

h4 {

	font-size: 20px;}

p {

	opacity: 0.75;

	line-height: 1.5;}

a {

	text-decoration: none;}

fieldset {

	border: none;}

input {

	width: 100%;

	padding: 18px;

	text-align: center;

	font-weight: 500;

	border: none;

	background-color: rgba(0, 0, 0, 0.2);

	font-size: 18px;

	outline: none;

	font-family: "QuickSand", sans-serif;

	border-radius: 10px;}

input[type="submit"] {

	color: #fff;

	font-weight: 600;

	cursor: pointer;

	box-shadow: 0px 3px 33px rgba(0, 0, 0, 0.33);

	transition: all 0.3s ease-in-out;

	background-color: #000;}

input[type="submit"]:hover {

	opacity: 0.75;}

input[type="radio"] {

	width: auto;

	float: left;

	margin-top: 5px;

	margin-right: 10px;}

input[type="checkbox"] {

	float: left;

	margin: 7px 10px 0 0;

	width: auto;}

.color-white {

	color:  #fff;}

.text-underline {
	
	text-decoration: underline;}

.img-shadow {

	box-shadow: 0px 0px 100px rgba(255, 255, 255, 0.33);}

.simple-section {

	overflow: hidden;

	padding: 120px 0;}

.container {

	margin: 0px auto;

	width: 1600px;}

.w-full, .add-to-cart.w-full, .place-order.w-full {

	width: 100%;}

.row {

	display: flex;

	flex-wrap: wrap;

	position: relative;

	z-index: 1;

	width: calc(100% + var(--col-padding) + var(--col-padding));

	margin-left: calc(var(--col-padding)*-1);

	margin-right: calc(var(--col-padding)*-1);}

.vertical-center {

	align-items: center;}

.row.row-small {

	width: calc(100% + var(--col-padding));

	margin-left: calc(var(--col-padding)*-0.5);

	margin-right: calc(var(--col-padding)*-0.5);}

.row:not(:first-child) {

	margin-top: calc(var(--col-padding)*2);}

.col {

	padding-right: var(--col-padding);

	padding-left: var(--col-padding);

	position: relative;}

.row-small .col {

	padding-right: calc(var(--col-padding)/2);

	padding-left: calc(var(--col-padding)/2);}

.text-center {

	text-align: center;}

.text-right {

	text-align: right;}

.mrg-top-10 {

	margin-top: 10px;}

.mrg-top-20 {

	margin-top: 20px;}

.mrg-top-30 {

	margin-top: 30px;}

.mrg-top-40 {

	margin-top: 40px;}

.mrg-top-50 {

	margin-top: 50px;}

.mrg-top-60 {

	margin-top: 60px;}

.mrg-top-70 {

	margin-top: 70px;}

.mrg-top-80 {

	margin-top: 80px;}

.mrg-btn-10 {

	margin-bottom: 10px;}

.mrg-btn-20 {

	margin-bottom: 20px;}

.mrg-btn-30 {

	margin-bottom: 30px;}

.mrg-btn-40 {

	margin-bottom: 40px;}

.mrg-btn-50 {

	margin-bottom: 50px;}

.mrg-btn-60 {

	margin-bottom: 60px;}

.mrg-btn-70 {

	margin-bottom: 70px;}

.mrg-btn-80 {

	margin-bottom: 80px;}

.col-sm-2 {

	width: 16.6666%;}

.col-sm-3 {

	width: 25%;}

.col-sm-4 {

	width: 33.3333%;}

.col-sm-5 {

	width: 41.6666%;}

.col-sm-6 {

	width: 50%;}

.col-sm-7 {

	width: 58.3333%;}

.col-sm-8 {

	width: 66.6666%;}

.col-sm-9 {

	width: 75%;}

.col-sm-10 {

	width: 83.3333%;}

.col-sm-12 {

	width: 100%;}

.col-sm-2_4 {

	width: 20%;}

.first-section {

	padding-top: 240px;}

.section-light {

	background-color: var(--main-light-color);

	color: var(--main-dark-color);}

.section-dark {

	background-color: var(--main-dark-color);

	color: var(--main-light-color);}

.bg-light {

	background-color: var(--main-light-color);

	color: var(--main-dark-color);}

.bg-dark {

	background-color: var(--main-dark-color);

	color: var(--main-light-color);}

.btn {

	text-align: center;

	outline: none;

	-moz-outline: none;

	-webkit-outline: none;

	border: none;

	font-weight: 700;

	display: inline-block;

	min-width: 180px;

	cursor: pointer;

	transition: all 0.3s ease-in-out;

	border-radius: 10px;}

.btn:hover {

	opacity: 0.75;}

.btn.bg-light {

	box-shadow: 0px 3px 33px rgba(255, 255, 255, 0.33);}

.btn.bg-dark {

	box-shadow: 0px 3px 33px rgba(0, 0, 0, 0.33);}

.btn-default {

	padding: 15px 45px;}

.btn-small {

	font-size: 0.75em;

	padding: 12px 36px;}

.btn-large {

	font-size: 1.25em;

	padding: 18px 60px;}

.main-header {

	position: fixed;

	box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.3);

	transition: all 0.3s ease-in-out;

	width: 100%;

	z-index: 99;}

.mobile-btn {

	display: none;

	cursor: pointer;

	margin-left: auto;

	margin-right: 5px;

	font-size: 28px;

}

.main-header.poz-top {

	box-shadow: none;

	background-color: transparent;}

.inner-header {

	padding: 5px 0;

	display: flex;

	align-items: center;

	transition: all 0.3s ease-in-out;

	flex-wrap: wrap;}

.main-header.poz-top .inner-header {

	padding: 40px 0;}

.inner-header nav {

	width: calc(100% - 240px);

	text-align: right;}

.inner-header nav ul li {

	display: inline-block;}

.inner-header nav ul li:last-child a {

	padding-right: 0;}

.inner-header nav ul li a {

	opacity: 0.75;

	line-height: 68px;

	transition: all 0.3s ease-in-out;

	padding: 0 20px;

	font-weight: 500;

	color: var(--main-light-color);}

.inner-header nav ul li a:hover {

	opacity: 1;}

.inner-header .logo {

	width: 240px;}

.inner-header .logo img {

	width: auto;

	transition: all 0.3s ease-in-out;

	max-width: 240px;

	border-radius: 0;

	filter: brightness(0) invert(1);

	height: 40px;}

.main-header.poz-top .inner-header .logo img {

	height: 68px;}

.left-splotch::before {

	content: "";

	position: absolute;

	left: -300px;

	top: -300px;

	background-color: #fff;

	width: 1000px;

	height: 1000px;

	border-radius: 50%;

	z-index: 0;

	opacity: 0.25;

	filter: blur(1000px);}

.right-splotch::before {

	content: "";

	position: absolute;

	right: -500px;

	top: -300px;

	background-color: #fff;

	width: 1000px;

	height: 1000px;

	border-radius: 50%;

	z-index: 0;

	opacity: 0.25;

	filter: blur(1000px);}

.image-switcher div {

	border-radius: 20px;

	box-shadow: 0px 0px 100px rgba(255, 255, 255, 0.33);

	position:absolute;

	z-index: 1;

	width: calc(100% - var(--col-padding)*2);

	top: 0;}

.image-switcher p {

	position: absolute;

	font-size: 40px;

	text-align: center;

	opacity: 1;

	width: 100%;

	color: #000;

	padding: 0 40px;

	text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.9);

	top: 48%;}

.info-panel {

	display: flex;

	align-items: center;

	height: 100%;

	padding: 60px 10px;

	text-align: center;

	transition: all 0.3s ease-in-out;

	border-radius: 20px;

	background: linear-gradient(210deg, #ffffff3b, #ffffff24);}

.info-panel:hover {

	margin-top: -8px;}

.info-panel p {

	font-size: 0.75em;}

.site-shop {

	position: relative;}

.visible-mobile {

	display: none;

}

.visible-desktop {

	display: block;

}

#ujdonsagok::after {

	width: 512px;

	height: 512px;

	position: absolute;

	bottom: -180px;

	left: 50%;

	content: "";

	opacity: 0.1;

	background-image: url('../img/cube.png');}

.site-shop {

	overflow: hidden;}

.site-shop form {

	top: 0;

	width: 300px;

	z-index: 9;

	left: 0;

	position: absolute;}

.site-shop form fieldset {

	padding: 20px;

	position: relative;

	margin: 20px;

	font-weight: 500;

	font-size: 18px;

	transition: all 0.3s ease-in-out;

	border-radius: 10px;

	left: -340px;

	background-color: rgba(0, 0, 0, 0.5);}

.site-shop form fieldset:nth-child(2) {

	transition: all 0.3s ease-in-out 0.08s;}

.site-shop form fieldset:nth-child(3) {

	transition: all 0.3s ease-in-out 0.16s;}

.site-shop:hover form fieldset {

	left: 0;}

.site-shop form fieldset label {

	display: inline-block;

	width: calc(100% - 50px);

	color: #fff;}

.site-shop form fieldset h5 {

	margin-bottom: 10px;

	color:  #fff;}

.add-to-cart, .place-order {

	width: 260px;

	font-family: "QuickSand", sans-serif;

	font-size: 18px;

	animation: pulse 2s infinite;

	background-color: #000;}

.no-such-product .add-to-cart {
	display: none;}

.no-result {

	width: 100%;

	height: 900px;

	border-radius: 25px;

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: rgba(0, 0, 0, 0.05);}

.pulse:hover {

  animation: none;}

@-webkit-keyframes pulse {

  0% {

    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);

  }

  70% {

      -webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0);

  }

  100% {

      -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);

  }

}

@keyframes pulse {

  0% {

    -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);

    box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);

  }

  70% {

      -moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0);

      box-shadow: 0 0 0 10px rgba(0,0,0, 0);

  }

  100% {

      -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);

      box-shadow: 0 0 0 0 rgba(0,0,0, 0);

  }

}

.to-top {

	position: fixed;

	border-radius: 50%;

	width: 60px;

	height: 60px;

	display: flex;

	transition: all 0.5s ease-in-out 0.5s;

	align-items: center;

	justify-content: center;

	box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.33);

	bottom: 20px;

	z-index: 99;

	right: 20px;}

.to-top.poz-top {

	opacity: 0;

	visibility: hidden;}

.to-top img {

	width: 20px;

	filter: brightness(0) invert(1);}

.site-footer {

	padding: 60px 0;}

.site-footer img {

	border-radius: 0;

	filter: brightness(0) invert(1);
	
}

.site-footer::before {

	content: "";

	position: absolute;

	height: 100%;

	width: 100%;

	top: 0;

	left: 0;

	background-image: url(../img/slide01.jpg);

	opacity: 0.2;}

.site-footer p {

	font-size: 16px;}

.site-footer h4 {

	margin-bottom: 30px;}

.site-footer a {

	display: block;

	line-height: 1.5;

	opacity: 0.75;

	font-size: 16px;

	transition: all 0.3s ease-in-out;

	color: #fff;}

.site-footer a:hover {

	opacity: 1;}

.site-footer .social-icon {

	margin-right: 10px;

	border-radius: 8px;

	width: 34px;}

.flip-box {

  	background-color: transparent;

  	width: 100%;

  	height: 420px;

  	perspective: 1000px;}

.flip-box-inner {

  	position: relative;

  	width: 100%;

  	height: 100%;

  	text-align: center;

  	transition: transform 0.8s;

  	transform-style: preserve-3d;}

.flip-box:hover .flip-box-inner {

  	transform: rotateY(180deg);}

.flip-box-front, .flip-box-back {

  	position: absolute;

  	width: 100%;

  	height: 100%;

  	-webkit-backface-visibility: hidden;

  	backface-visibility: hidden;}

.flip-box-front {

	padding: 0 20px 20px 20px;

  	background-color: #262626;

  	border-radius: 15px;}

.flip-box-front h3 {

	font-size: 24px;

  	margin-bottom: 20px;}

.flip-box-front p {

	font-size: 16px;}

.flip-box-front img {

 	margin-top: -45px;

 	margin-bottom: 15px;

 	width: 80%;}

.flip-box-back img {

	width: 80%;

 	margin-top: -45px;

 	margin-bottom: 15px;}

.flip-box-back {

	border-radius: 15px;

	padding: 0 20px 20px 20px;

	font-size: 12px;

  	background: #262626;

  	transform: rotateY(180deg);}

.modal {

  	display: none;

  	position: fixed;

  	z-index: 9999;

  	padding-top: 150px;

  	padding-bottom: 30px;

  	left: 0;

  	top: 0;

  	width: 100%;

  	height: 100%;

  	overflow: auto;

  	background-color: rgba(0,0,0,0.5);}

.modal-content {

  	position: relative;

  	background-color: #fefefe;

  	margin: auto;

  	padding: 0;

  	border: 1px solid #888;

  	width: 768px;

  	max-width: 90%;

  	border-radius: 15px;

  	box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.25);

  	-webkit-animation-name: animatetop;

  	-webkit-animation-duration: 0.4s;

  	animation-name: animatetop;

  	animation-duration: 0.4s;}

.modal-content .col-sm-6:first-child {
	padding-right: 10px;}

.modal-content .col-sm-6:last-child {
	padding-left: 10px;}

.modal-content .row:not(:first-child) {
	margin-top: 0;}

@-webkit-keyframes animatetop {

  	from {top:-300px; opacity:0;} 

  	to {top:0; opacity:1;}

}

@keyframes animatetop {

  	from {top:-300px; opacity:0;}

  	to {top:0; opacity:1;}

}

.modal-close {

	position: absolute;

	top: -15px;

	right: -15px;

	display: flex;

	align-items: flex-end;

	justify-content: center;

	color: #fff;

	transform: rotate(45deg);

	border-radius: 50%;

	background-color: #000;

	cursor: pointer;

	width: 30px;

	height: 30px;

	font-size: 26px;

	font-weight: 300;}

.modal-body {

	padding: 25px;}

.loader {

  border: 12px solid #fff;

  border-radius: 50%;

  display: none;

  border-top: 16px solid #000;

  width: 80px;

  position: absolute;

  height: 80px;

  top: 50%;

  margin-top: -40px;

  margin-left: -40px;

  left: 50%;

  -webkit-animation: spin 0.75s linear infinite;

  animation: spin 0.75s linear infinite;}

.loader.active {

	display: block;}

@-webkit-keyframes spin {

  0% { -webkit-transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}