/* Table of Content

==================================================

	#Font-Face

	#Site Styles

	#Media Queries */



/* #Font-Face

================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');





/* #Site Styles

================================================== */



/* ### general ### */

html,

body { width: 100%; font-family: 'Montserrat', sans-serif; font-size: 16px; color: #fff; }

body { background: url('../images/bg.jpg') repeat; }

body.is-open-menu { overflow: hidden; position: relative; }

img { display: block; border: 0; }

:focus { outline: none; }

p { line-height: 2.3; }

h1,

h2,

h3,

h4,

h5,

h6 { font-weight: 400; }

h1 { font-size: 72px; }

h2 { font-size: 60px; }



/* ### global classes ### */

.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }

.center { margin: 0 auto; position: relative; max-width: 1200px; }

.container { max-width: 1310px; }

.btn { padding: 12px 20px; font-size: 15px; font-weight: 700; color: #000; background: #fff; }

.btn.btn-outline-primary { color: #fff; border-color: #fff; background: transparent; }

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,

.show > .btn-outline-primary.dropdown-toggle:focus,

.btn.btn-outline-primary:hover { color: #000; border-color: #fff; background-color: #fff; outline: none; box-shadow: none; }

.btn-outline-primary.focus,

.btn-outline-primary:focus { outline: none; box-shadow: none; }

.btn-lg { padding: 15px 30px; font-size: 18px; }

.btn.btn-outline-dark { color: #000; border-color: #000; background: transparent; }

.btn.btn-outline-dark:hover { color: #fff; background-color: #000; }

.modal-backdrop { background: #2c2c2c; }

.modal-backdrop.show { opacity: 0.95; }

.modal-dialog .close { padding: 0; position: relative; z-index: 15; width: 16px; height: 16px; transition: 0.2s; cursor: pointer; overflow: hidden; }

.modal-dialog .close:focus { box-shadow: none; border: 0; outline: none; }

.modal-dialog .close span { position: absolute; top: 50%; right: 0; left: 0; display: block; height: 3px; font-size: 0; color: transparent; text-indent: -9999px; transition: 0.2s; }

.modal-dialog .close span:before,

.modal-dialog .close span:after { position: absolute; left: 0; display: block; width: 100%; height: 2px; background-color: #2c2c2c; transition-delay: 0s, 0.2s; transition-duration: 0.2s, 0.2s; content: ''; }

.viewBox.modal-dialog .close span:before,

.viewBox.modal-dialog .close span:after { background-color: #fff; }

.modal-dialog .close span:before { top: 0; transform: rotate(45deg); }

.modal-dialog .close span:after { bottom: 1px; transform: rotate(-45deg); }

.red-bg { padding-top: 125px; background: url('../images/red-bg.svg') center bottom no-repeat; background-size: 100% 101%; }

.square-bg { margin-left: -1345px; position: absolute; top: 1490px; left: 50%; z-index: 2; width: 2000px; height: 1000px; }

.square-bg .square-inner { z-index: 2; width: 2000px; height: 1000px; background: #2c2c2c; transform: rotate(30deg); }

.triangle-bg { margin-left: -768px; position: absolute; top: 1660px; left: 50%; z-index: 1; }

.overlay1 { margin-left: -2150px; position: absolute; top: 600px; left: 50%; width: 2232px; height: 1900px; background: url('../images/overlay1.png') center center no-repeat; }

.overlay5,

.overlay4,

.overlay3,

.overlay2,

.overlay1 { opacity: 0.05; }

.overlay2 { margin-left: -1550px; position: absolute; top: 1050px; left: 50%; z-index: 2; width: 2232px; height: 1900px; background: url('../images/overlay1.png') center center no-repeat; }

.overlay3 { margin-left: -170px; position: absolute; top: 1380px; left: 50%; z-index: 3; width: 602px; height: 765px; background: url('../images/overlay2.png') center center no-repeat; }

.overlay4 { margin-left: 80px; position: absolute; top: 2580px; left: 50%; z-index: 3; width: 648px; height: 648px; background: url('../images/overlay3.png') center center no-repeat; }

.overlay5 { margin-left: -1010px; position: absolute; top: 2005px; left: 50%; z-index: 3; width: 788px; height: 634px; background: url('../images/overlay4.png') center center no-repeat; }



/* ### wrapper ### */

#wrapper { padding-bottom: 30px; position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }



/* ### main container ### */

#mainCntr { width: 100%; }



/* ### header container ### */

#headerCntr { padding-top: 80px; padding-bottom: 10px; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; }

#headerCntr .mobileMenu { margin: -10px 0 0 18px; position: relative; z-index: 15; width: 24px; height: 22px; transition: 0.2s; cursor: pointer; overflow: hidden; }

#headerCntr .mobileMenu span { position: absolute; top: 50%; right: 0; left: 0; display: block; height: 3px; text-indent: -9999px; border-radius: 5px; transition: 0.2s; }

#headerCntr .mobileMenu span:before,

#headerCntr .mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 3px; background: #fff; transition: all 0.3s; content: ''; }

#headerCntr .mobileMenu span:before { top: -5px; }

#headerCntr .mobileMenu span:after { bottom: -4px; width: 19px; }

.is-open-menu #headerCntr .mobileMenu span:before { top: 0; transform: rotate(45deg); }

.is-open-menu #headerCntr .mobileMenu span:after { bottom: 0; width: 100%; transform: rotate(-45deg); }



/* ### nav Bar ### */

.navbar { padding: 0 0 0 331px; overflow: hidden; position: fixed; top: 0; right: 0; left: 0; z-index: 5; align-content: space-between; max-width: 526px; height: 100vh; background-color: #2c2c2c; transform: translateX(-100%); transition: all 0.3s; }

.navbar:before { position: absolute; top: 142px; left: 140px; z-index: 2; opacity: 0.03; width: 776px; height: 842px; background: url('../images/menu-overlay.png') no-repeat; content: ''; }

.navbar .mid:after { position: fixed; top: 0; left: -20px; z-index: 3; width: 526px; height: 150px; background-color: #2c2c2c; content: ''; }

.is-open-menu .navbar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); }

.navbar .mid { padding: 192px 15px 50px 0; position: relative; z-index: 2; width: 100%; height: 100vh; overflow: auto; }

.navbar ul { margin: 0 0 90px; padding: 0; position: relative; z-index: 3; width: 100%; list-style: none; }

.navbar li { margin-bottom: 30px; display: flex; align-content: center; align-items: center; width: 100% !important; border: 0; }

.navbar .slick-list { width: 100% !important; height: auto !important; }

.navbar .slick-track { width: 100% !important; height: auto !important; transform: none !important; }

.navbar li a { padding: 0; display: flex; align-content: center; align-items: center; text-decoration: none; color: #fff; }

.navbar li a img { margin-right: 12px; }

.navbar .login { position: relative; z-index: 3; display: inline-flex; align-items: center; text-decoration: none; color: #fff; }

.navbar .login:before { margin-right: 12px; display: inline-block; width: 30px; height: 30px; background: url('../images/login-icn.png') center center no-repeat; content: ''; }



/* ### banner Box ### */

.bannerBox { margin-bottom: 200px; position: relative; z-index: 4; }

.bannerBox .container { max-width: 1540px; }

.bannerBox .image { margin-left: -890px; top: -15px; left: 50%; max-width: 840px; }

.bannerBox .text { margin: 0 auto; padding-top: 150px; z-index: 2; max-width: 770px; }

.bannerBox h1 { margin-bottom: 70px; line-height: 80px; }

.bannerBox h1 span {color: #2c2c2c; }

.bannerBox cite { font-style: normal; }



/* ### content container ### */

#contentCntr { width: 100%; }



/* ### television box ### */

.televisionBox { padding-bottom: 190px; position: relative; z-index: 4; }

.televisionBox .holder { margin: auto; max-width: 1045px; }

.televisionBox .left { position: relative; z-index: 2; }

.televisionBox .left img { margin-left: -70px; width: calc(100% + 56px); }

.televisionBox .right { margin-top: 63px; position: relative; z-index: 2; }

.televisionBox p { margin-bottom: 27px; }



/* ### catalog box ### */

.catalogBox { margin-bottom: 40px; padding-top: 110px; padding-bottom: 50px; position: relative; z-index: 4; min-height: 960px; }

.catalogBox .holder { margin: auto; max-width: 1020px; }

.catalogBox h2 { margin-bottom: 38px; }

.catalogBox h2:after { margin-top: 15px; margin-left: 5px; display: block; width: 73px; height: 3px; background-color: #fff; content: ''; }

.catalogBox p { margin-bottom: 43px; margin-left: 4px; }

.catalogBox p a { color: #fff; }

.catalogBox p a:hover { color: #fff; text-decoration: none; }

.catalogBox img { margin-right: 25px; margin-left: 5px; display: inline-block; }

.catalogBox .button { padding: 12px 18px; font-size: 15px; letter-spacing: -0.1px; }

.catalogBox .button.second { margin-left: 18px; }

.catalogBox .slick-prev,

.catalogBox .slick-next { padding: 0; position: absolute; top: 63%; z-index: 9; display: block; line-height: 0; color: transparent; border: none; background-color: transparent; transform: translate(0, -50%); transition: 0.3s; cursor: pointer; outline: none; }

.catalogBox .slick-slide img { display: inline-block; }

.catalogBox .slick-prev { right: auto; left: -330px; }

.catalogBox .slick-next { right: -140px; left: auto; }

.catalogBox .slick-prev:before,

.catalogBox .slick-next:before { display: inline-block; width: 40px; height: 20px; background-repeat: no-repeat; background-size: contain; content: ''; }

.catalogBox .slick-prev:before { background-image: url('../images/prev-arrow.png'); }

.catalogBox .slick-next:before { background-image: url('../images/next-arrow.png'); }



/* ### form box ### */

.formBox { margin-bottom: 145px; position: relative; z-index: 4; }

.formBox .container { max-width: 970px; }

.formBox .form { margin-left: auto; max-width: 590px; }

.formBox p { margin-right: 41px; margin-bottom: 35px; }

.formBox .form-control { margin-bottom: 22px; padding: 10px 15px; height: 48px; font-size: 15px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; background-color: transparent; }

.formBox input::placeholder { color: #fff; }

.formBox input:focus { background-color: transparent; box-shadow: none; }

.formBox input[type='checkbox'] { display: inline-block; width: 24px; height: 24px; line-height: 28px; text-align: center; vertical-align: middle; background: url('../images/checkbox-border.png') no-repeat; appearance: none;   -webkit-appearance: none;-moz-appearance: none;appearance: none; content: ''; cursor: pointer; background-color:transparent; border:0; }

.formBox .check:checked:before { display: inline-block; width: 14px; height: 14px; background: url('../images/checkbox-active.png') no-repeat; content: ''; }

.formBox label { margin-bottom: 17px; padding-left: 10px; display: inline-block; font-size: 15px; cursor: pointer; }

.formBox .left { margin-top: 5px; padding-left: 67px; }

.formBox .right { padding-left: 28px; }

.formBox .button { margin-right: 40px; padding: 11px 23px; font-size: 15px; color: #fff; background-color: transparent; }

.formBox .button:hover { color: #000; background-color: #fff; }



/* ### login box ### */

.loginBox { border: 0; border-radius: 0; }

.loginBox .modal-body { padding: 15px 50px 0; }

.loginBox .modal-footer { padding: 0 50px 50px; border: 0; }

.loginBox .modal-header { padding: 50px 50px 30px; border: 0; }

.loginBox .form-control { margin-bottom: 20px; padding: 10px 15px; height: 46px; border: 1px solid #d5d5d5; }

.loginBox .form-control:focus { outline: inherit; box-shadow: inherit; }

.loginBox input::placeholder { color: #000; }

.loginBox .button { padding: 12px 18px; font-size: 15px; color: #000; border: 1px solid #000; background-color: transparent; }

.loginBox .button:hover { color: #fff; background-color: #000; }

.loginBox .link { margin-top: 13px; display: inline-block; float: right; font-size: 12px; font-weight: 700; text-align: right; color: #000; }



/* ### view box ### */

.modal-dialog.viewBox { max-width: 920px; }

.modal-dialog.viewBox .modal-content { border: 0; border-radius: 0; background-image: linear-gradient(to top, rgba(236, 101, 87, 1), rgba(233, 73, 80, 1)); box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); }

.viewBox .text { padding: 60px 20px 80px 60px; }

.viewBox img { margin-bottom: 35px; }

.viewBox p { margin-bottom: 30px; }

.viewBox ul { margin-bottom: 40px; padding: 0; list-style: none; }

.viewBox li { line-height: 32px; }

.viewBox li:before { margin-right: 4px; color: #fff; vertical-align: middle; content: '-'; }

.viewBox a { text-decoration: none; color: #fff; }

.viewBox .button { margin-right: 20px; padding: 12px 20px; font-size: 15px; }

.viewBox .button:last-child { margin-right: 0; }



/* ### footer Box ### */

.footerBox { margin-bottom: 20px; position: relative; z-index: 9; }

.footerBox .left p { color: #737373; }

.footerBox p { margin-bottom: 0; font-size: 12px; line-height: 2; }

.footerBox p a { color: #737373; }

.footerBox a { font-size: 12px; text-decoration: none; color: rgba(255, 255, 255, 0.6); }

#video-modal.modal {
	display: flex !important;
	justify-content: center;
	align-items: center;
	z-index: -1;
}

.modal-open #video-modal.modal {
	z-index: 1050;
 }

#video-modal .modal-dialog {
	max-width: 100%;
    width: auto !important;
    display: inline-block;
	margin: 0;
}

#video-modal .modal-content {
	background-color: transparent;
    border: 0;
}

#video-modal .modal-body img {
	position: relative;
    z-index: 100;
    max-width: 100%;
	pointer-events: none;
}

#video-modal .modal-body video {
    position: absolute;
	top: 15%;
    left: 11%;
    width: 61%;
    height: 59%;
    background-color: #232727;
}


/* #Media Queries

================================================== */

@media only screen and (max-width: 1759px) {

	.catalogBox .slick-prev { left: -20%; }

	.catalogBox .slick-next { right: 29%; }

	.footerBox .right a { display: inline-block; width: 120px; line-height: 24px; }

}



@media only screen and (max-width: 1439px) {

	#headerCntr .mobileMenu { margin-left: 0; }

	.navbar .mid { padding-top: 192px; }

	.navbar { padding-left: 70px; max-width: 306px; }

	.navbar .mid:after { width: 306px; }

	.navbar:before { left: -270px; }

	.container { max-width: 1090px; }

	.catalogBox .slick-prev,

	.catalogBox .slick-next { top: -60px; }

	.catalogBox .slick-prev { left: 0; }

	.catalogBox .slick-next { left: 12%; }

	.triangle-bg { top: 1620px; }

	.televisionBox .holder { max-width: 1060px; }

	.televisionBox .left img { margin-left: -50px; width: calc(100% + 50px); }

}



@media only screen and (max-width: 1199px) {

	.container { max-width: 870px; }

	.catalogBox:before { margin-right: -1055px; top: -225px; }

	.viewBox p br { display: none; }

	.navbar { padding-left: 65px; max-width: 302px; }

	.navbar .mid { padding-top: 150px; padding-left: 65px; max-width: 302px; }

	.navbar .mid:after { width: 302px; }

	.navbar:before { left: -350px; }

	.formBox { margin-bottom: 115px; }

	.formBox .form { padding-right: 120px; max-width: 700px; }

	.triangle-bg { margin-left: -738px; top: 1600px; transform: translateY(30px) rotate(3deg) !important; }

	.triangle-bg.aos-animate { transform: translateY(0) rotate(3deg) !important; }

	.televisionBox .left img { margin-left: -70px; width: calc(100% + 160px); }

	.televisionBox .right { max-width: 43%; }

	.catalogBox { min-height: 960px; }

}



@media only screen and (max-width: 979px) {

	.navbar-expand-lg > .container,

	.navbar-expand-lg > .container-fluid,

	.navbar-expand-lg > .container-lg,

	.navbar-expand-lg > .container-md,

	.navbar-expand-lg > .container-sm,

	.navbar-expand-lg > .container-xl { padding-right: 20px; padding-left: 20px; }

	.bannerBox .container,

	.container { max-width: 670px; }

	.bannerBox .text { max-width: 560px; }

	.bannerBox .image { margin-left: -800px; }

	.square-bg { top: 1413px; }

	.triangle-bg { margin-left: -910px; top: 1480px; }

	.triangle-bg.aos-animate { transform: translateY(0) rotate(7deg) !important; }

	.modal-dialog.viewBox { max-width: 688px; }

	.overlay1 { top: 550px; }

	.overlay2 { top: 980px; }

	.overlay3 { top: 1310px; width: 520px; background-size: 100% auto; }

	.overlay4 { top: 2500px; }

	.navbar:before { left: -390px; }

	.catalogBox { margin-top: 30px; min-height: 860px; }

	.televisionBox { padding-bottom: 200px; }

	.televisionBox .right { margin-top: 0; }

	.televisionBox .left { padding-top: 15px; }

	.televisionBox .left img { margin-left: -40px; width: calc(100% + 115px); }

	.formBox { min-height: 430px; }

	.formBox .form { margin: 0 auto; padding-right: 0; max-width: 600px; }

}



@media only screen and (max-width: 767px) {

	h2 { font-size: 40px; }

	#headerCntr { padding-top: 30px; }

	#headerCntr .container { max-width: 100%; }

	.formBox .container,

	.bannerBox .container,

	.container { padding-right: 30px; padding-left: 30px; max-width: 320px; }

	.catalogBox:before { margin-right: -1183px; top: 70px; }

	.catalogBox .slick-next { left: 20%; }

	.catalogBox .slick-prev,

	.catalogBox .slick-next { top: -70px; }

	.catalogBox .slick-prev:before,

	.catalogBox .slick-next:before { background-size: 22px auto; }

	.catalogBox { margin-top: 10px; margin-bottom: 170px; }

	.catalogBox .btn { margin-bottom: 15px; width: 100%; }

	.catalogBox img { display: none; }

	.catalogBox p br { display: none; }

	.viewBox .text { padding: 40px 30px; }

	.viewBox .btn { margin-bottom: 15px; padding: 10px 17px; display: block; width: 100%; font-size: 15px; }

	.navbar { padding-left: 30px; max-width: 288px; }

	.navbar .mid:after { width: 288px; height: 100px; }

	.btn-lg { padding: 10px 15px; font-size: 15px; }

	.televisionBox .right { padding-right: 30px; max-width: 100%; }

	.televisionBox .left { margin-right: -60px; margin-bottom: 30px; padding-top: 20px; padding-right: 0; width: calc(100% + 60px); }

	.televisionBox { padding-top: 40px; }

	.square-bg { margin-left: -1116px; top: 1573px; width: 2232px; height: 756px; }

	.square-bg .square-inner { width: 2232px; height: 756px; }

	.triangle-bg {     margin-left: -1359px;top: 1650px;bottom: auto;width: 2315px;height: auto;transform: translateY(30px) rotate(0) !important; }

	.triangle-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

	.triangle-bg.aos-animate { transform: none !important; }

	.red-bg { padding-top: 75px; min-height: 1440px; }

	.formBox { margin-bottom: 135px; }

	.formBox p br { display: none; }

	.formBox .left { padding-left: 15px; }

	.formBox .right { padding-left: 15px; }

	.formBox .form { padding-right: 0; }

	.formBox p { margin-right: 0; }

	.footerBox .right a { width: auto; }

	.footerBox p { margin-bottom: 15px; }

	.footerBox a { color: #737373; }

	.bannerBox h1 { margin-bottom: 45px; font-size: 34px; line-height: 1.4; }

	.bannerBox .text { padding-top: 80px; }

	.bannerBox .image { margin-left: -530px; top: 40px; max-width: 660px; }

	.bannerBox .image img { max-width: 100%; }

	.modal-dialog { margin: 20px; }

	.loginBox .modal-header img { margin: 0 auto; width: 124px; }

	.loginBox .modal-header { padding-bottom: 10px; justify-content: center; }

	.loginBox .modal-header .close { position: absolute; top: 30px; right: 30px; }

	.overlay1 { margin-left: -2200px; top: 360px; }

	.overlay2 { margin-left: -1640px; top: 500px; }

	.overlay4 { margin-left: 0; top: 2000px; }

	.overlay3 { margin-left: -300px; top: 1160px; width: 602px; }

	.navbar:before { left: -390px; width: 660px; background-size: 660px auto; }

	.televisionBox .left img { margin-left: 0; width: calc(100% + 5px); }

	.lang { right: 0; top: 68px; }

	.lang button {height: 44px; border-radius: 0;}

}



@media only screen and (max-width: 480px) {

	.catalogBox:before { top: 240px; }

	.navbar { max-width: 320px; }

	.navbar .imd { padding-top: 130px; }

	.navbar .mid:after { width: 320px; height: 100px; }

	.loginBox .modal-body,

	.loginBox .modal-footer,

	.loginBox .modal-header { padding-right: 30px; padding-left: 30px; }

}