/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 /* #header{ background: red !important; } */
@import url('https://fonts.googleapis.com/css?family=Lato');

html, body, h1, h2, h3, h4, h5, h6, p{
  font-family: 'Lato', sans-serif !important;
}

.bg-gray-iform{
  background: #F4F4F4;
}

.logo img{
  width: 180px;
}
/* .stickUpHolder, .stickUpHolder span, .stickUpHolder i{
  color: white;
} */
.header-absolute{
  background: rgba(255,255,255, 1);
  padding-top: 0 !important;
}
.custom_title {
	padding: 1rem 0 1rem;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
	color: #585858 !important;
	font-size: 1.65rem;
	margin: 1rem 0 2rem;
}
.custom_title::before {
	content: " ";
	width: 100%;
	height: 3px;
	background-color: #e85407;
	position: absolute;
	top: 2.1rem;
	z-index: -1;
}
.custom_title_155_r {
	padding-top: 1rem;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
	color: #585858 !important;
	font-size: 1.4rem;
	margin: 1rem 0 2rem;
}
.custom_title_155_r::before {
	content: " ";
	width: 155%;
	height: 3px;
	background-color: #e85407;
	position: absolute;
	top: 1.8rem;
	z-index: -1;
}
@media (min-width: 576px)
.custom_title_155_r::before {
	width: 100%;
}

.custom_title_155_l {
	padding-top: 1rem;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
	color: #585858 !important;
	font-size: 1.4rem;
	margin: 1rem 0 2rem;
	height: 34px;
}
.custom_title_155_l::before {
	content: " ";
	width: 155%;
	height: 3px;
	background-color: #e85407;
	position: absolute;
	top: 1.8rem;
	z-index: -1;
  left:-55%;
}
.custom_title_span {
	z-index: 99;
	background-color: #fff;
	padding-right: 10px;
}
.c_t_right {
	padding-left: 10px;
	float: right;
	padding-right: 0;
}
.custom_header{
padding: 2rem 0 3rem;
}
.custom_header p{
padding:0;
margin:0;
text-align: right;
text-transform: uppercase;
font-size: 1rem;
}

p{
color: #585858;
}

#stopka {
	margin-left: 10%;
	margin-right: 10%;
	font-size: 15px;
}

@media (max-width: 480px) {

	#stopka{
		font-size: 13px;
	}

}

@media (min-width: 1500px)
.mb-xxl-5, .my-xxl-5 {
    margin-bottom: 0;
}
@media (min-width: 992px)
.mb-lg-4, .my-lg-4 {
    margin-bottom: 0;
}
@media (min-width: 768px)
.mb-md-3, .my-md-3 {
    margin-bottom: 0;
}
.mb-2, .my-2 {
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #585858;
	margin-top: 15px;
	margin-bottom: 15px;
	line-height: 1.1;
	color: inherit;
}

.h1, h1 {
	text-align: center;
	padding-bottom: 20px;
}

.mb-2, .my-2 {
    margin-bottom: 0 !important;
}

.jxml-html-info {
  padding: 0rem;
}
.jxml-html-info ul{
  padding: 3rem 0 3rem 0;
}


.color-left-structure{
  text-align: right;
color: #505050;
  font-size: 36px;
}
.color-right-structure{
color: #EA5806;
  font-size: 36px;
}


@media (min-width: 576px){

}
@media (min-width: 768px){
.color-left-structure{
width: 20%;
}
}
@media (min-width: 992px){
.color-left-structure{
width: 30%;
}
}
@media (min-width: 1200px){
.color-left-structure{
width: 40%;
}
}

.model .img-responsive {
	width:195px;
}

.textSize16 {
	font-size:16px;
}
.transition {
	position: relative;
	width: 50%;
}

.transitionOverlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: #2C2A29;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}

.overlay4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #262D57; /* Ciemna nakładka */
    opacity: 0; /* Początkowa przezroczystość */
    transition: opacity 0.5s ease; /* Efekt przejścia */
    display: flex;
    justify-content: center;
    align-items: center;
}

.transition:hover .transitionOverlay {
	bottom: 0;
	height: 100%;
}

.transitionText {
	white-space: nowrap;
	color: white;
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.transitionUnderText {
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	display: none;
}

@media (max-width: 1024px) {

	.transitionUnderText {
		display:block;
	}
	.transitionUnderText-menu {
		/* display:block; */
	}
}

.img-hover-zoom {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.img-hover-zoom img {
	transition: transform 2s, filter 1.5s ease-in-out;
	transform-origin: center center;
}

.img-hover-zoom:hover img {
	transform: scale(1.2);
}

.accesoriesText {
	font-weight: 100;
}

.accesoriesText:hover {
	font-weight: bold;
}

.accesoriesContent {
	width: 380px;
	height: 330px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}

@media (max-width: 480px) {

	.media-title-model480{
		text-align: center;
	}

	.media-model480{
		display: flex;
		flex-wrap:nowrap;
		overflow-x: auto;
	}


	.media-stopka-product480{
		
		display: flex;
		flex-wrap:nowrap;
		overflow-x: auto;
		max-width:none; 
		margin-left:auto;
		margin-right:auto;
	}

	.media-hide{
		display:none;
	}

}



@media (max-width: 768px) {

	.media-stopka-product768 {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	.media-hide768 {
		display: none;
	}
}

#instructionHidden {
	display: none;
	margin: 20 auto 20 auto;
	background: #ebe7e7;
}

#instructionBlock {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	width: 1290px;
	margin: auto;
	background: #e0dbdb;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

:checked + #instructionHidden {
	display: block;
}

#instructionSectionLeft {
	width: 50%;
	text-align: left;
	font-size: 20px;
}

#instructionSectionRight {
	width: 50%;
	text-align: right;
	font-size: 20px;
}

#instructionRow {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 2px solid black;
}

#instructionRow:hover {
	background: #c7c2c2;
}

#instructionImg {
	margin: 0 0 0 20px !important;
	padding: 0 !important;
	max-height: none !important;
	height: 20px !important;
}