@import url('https://fonts.googleapis.com/css?family=Nunito:100,200,300,400,600&display=swap&subset=latin-ext');
.obrys {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding-left: 0px !important;
	padding-right: 0px !important;
	max-width: 1140px;
	margin: 0 auto;
}
/* typography */
html { font-size: 62.5%; } 
.font-costom {
	font-family: 'Nunito', sans-serif;
	font-size: 62.5% !important;
}
.font-bold {
	font-weight: 600 !important;
}
.font-semi {
	font-weight: 400 !important;
}
.font-regular {
	font-weight: 300 !important;
}
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5 {
	font-family: 'Nunito', sans-serif; line-height: 1.5;
	font-weight: 300; 
}
.product-description h1 {
	font-weight: 200;
	color: #fff;
	font-size: 5rem;
	line-height: 5rem;
	text-align: center;
}
.product-description h2 {
	font-weight: 200;
	font-size: 4rem;
	line-height: 4rem;
	text-align: center !important;
	margin-top: 5rem!important;
	margin-bottom: 5rem!important;
}
.product-description h3 {
	font-weight: 400;
	color: #fff;
	font-size: 1.8rem;
	line-height: 2.4rem;
	padding-bottom: .75rem;
	text-align: left;
}
.product-description h4 {
	font-weight: normal;
	color: #888;
	font-size: 1.4rem;
	line-height: 2rem;
	padding-bottom: 6rem;
	text-align: left;
}
.product-description-icon h3 {
	font-weight: 600;
	color: #888;
	font-size: 1.8rem;
	line-height: 2.4rem;
	padding-bottom: .75rem;
}
.product-description-icon h4 {
	font-weight: normal;
	color: #888;
	font-size: 1.4rem;
	line-height: 2rem;
	padding-bottom: 3rem;
	padding-left: 5rem;
	padding-right: 5rem;
}
.product-description p {
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 2.625rem;
	padding-bottom: 2rem;
}
.txt-white {
	color: #fff !important;
}
.txt-gray {
	color: #888 !important;
}
.txt-black {
	color: #000 !important;
}

.product-description .container {
	max-width: 1140px;
}

/* sections */
.bg-black {
	background: rgba(0, 0, 0, 1);
	position: relative;
}
.bg-black img {
	width: 100%;
}
.bg-white, .bg-white2, .bg-white3 {
	background: rgba(255, 255, 255, 1);
	position: relative;
}
.bg-white img {
	max-width: 100%;
	padding: 5rem;
}

.bg-white2 img {
	max-width: 100%;
}
.bg-white3 img {
	max-width: 100%;
	padding-top: 0;
	padding-right: 0rem;
	padding-bottom: 3rem;
	padding-left: 0rem;
}
.bg-fotel {
	background: url("../images/bg-fotel.png") no-repeat;
	background-size: contain;
}

.hr-line {
	background: url("../images/hr-line.jpg") no-repeat;
	margin: 0 auto;
	max-width: 1140px;
}
.icon-chair {
	max-width: 120px!important;
	padding-bottom: 2rem;
	padding-top: 2rem;
}

/* position */

.sm-padding {
	padding: 0rem 8rem 7rem;
}
.sm-padding-2, .sm-padding-360 {
	padding-left: 4rem;
	padding-right: 4rem;
	padding-bottom: 3rem;
}
.sm-padding-white {
	padding: 10rem 10rem 0;
}
.sm-position {
	margin-top: -30rem;
}

/* top */

.video {
	position: relative;
}
.video-text {
	position: absolute;
	bottom: 5rem;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 1;
	display: inline-block;
	width: 100%;
	font-size: 42px;
	color: #fff;
	font-weight: 200;
	text-align: center;
}
.video-text::before {
content: url("../images/logo_x-kom.svg");
max-width: 150px;
width: 150px;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
bottom: 4rem;
}
.video-container {
	position: relative;
	padding-bottom: 56%;
	padding-top: 0px;
	margin: 0px;
	height: 0;
	overflow: hidden;
	border-radius: 0 !important;
	z-index: -1;
}
.video-container::before {
	
	position: absolute;
	top: 0;
	right: 0;
	bottom: -1px;
	left: 0;
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
	background-image: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(85%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0);
	z-index: 2;
	opacity: 1;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
    width: 100% !important;
}

.ov360 {
margin-top:10px;
margin-bottom:30px;
margin-left: auto;
margin-right:auto;
position:relative;
}

/* mobile */

@media screen and (min-width: 768px) and (max-width: 992px) {
	.product-description h1 {
		font-size: 2.125rem;
		line-height: 2.125rem;
	}
}
@media screen and (min-width: 520px) and (max-width: 767px) {
	.product-description h1 {
		font-size: 2.125rem;
		line-height: 2.125rem;
	}
	.video-text {
		bottom: 2rem !important;
	}
}
@media screen and (min-width: 480px) and (max-width: 640px)  {
    .video-text::before {
        bottom: 3rem;
    }
    .video-text{
        font-size: 28px;
    }
}
@media screen and (max-width: 479px)  {
    .video-text::before {
        bottom: 2rem;
    }
    .video-text{
        font-size: 22px;
    }
}

@media screen and (min-width: 320px) and (max-width: 519px) {
	.sm-padding {
		padding: 12rem 3rem 0rem!important;
	}
	.sm-padding-2 {
		padding-left: 0rem !important;
		padding-right: 0rem !important;
	}
    .sm-padding-360 {
		padding: 0rem 1.5rem 0rem!important;
	}
	.sm-padding-white {
		padding: 5rem 5rem 4rem!important;
	}
	.product-description h1 {
		font-size: 2rem;
		line-height: 2rem;
		letter-spacing: .15rem;
	}
	.product-description h2 {
		font-size: 3rem!important;
		line-height: 3rem!important;
		margin-bottom: 2rem !important;
	}
	.video-text {
		bottom: -1rem !important;
	}
	
	.bg-1, .bg-2, .bg-3 {
		height: 80vh;
	}
}

@media screen and (max-width: 992px) {
.ov360 {
height: 300px;  
}} 

@media screen and (max-width: 768px) {
.sm-padding {
	padding: 0rem 5rem 0rem;
}
}