/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries
	#font-family: 'Oswald', sans-serif; */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* #Site Styles
================================================== */

/* ### general ### */
html,
body { font-family: 'Quicksand', sans-serif; font-size: 15px; color: #fff; line-height: 1.5; }
body { background: #191919; }
input,
select,
textarea { font-family: 'Quicksand', sans-serif; font-size: 16px; color: #fff; }
img { display: block; border: 0; max-width: 100%; }
:focus { outline: none; }
ul,
li { padding: 0; margin: 0; list-style: none; }
a { display: inline-block; text-decoration: none; }

h1 { font-size: 45px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
h2 { font-size: 65px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
h3 { font-size: 25px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
h4 { font-size: 18px; font-family: 'Quicksand', sans-serif; font-weight: 700; line-height: 1.1; }
h5 { font-size: 18px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.25; text-transform: uppercase; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.container { max-width: 1210px; }
.btn { padding: 33px 85px 32px 29px; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 700; border-radius: 0; display: inline-block; transition: all 0.3s; position: relative; }
.btn-primary { background-color: #FFF200; color: #000; border: 0; }
.btn-primary:hover { background-color: #BAB100; color: #000; border: 0; }
.btn-primary:after { position: absolute; top: 29px; right: 29px; font-family: 'Font Awesome 5 Pro', sans-serif; content: '\f178'; font-weight: 400; font-size: 20px; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #191919; border-radius: 50%; }
.title { position: relative; font-size: 45px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.title:before { position: absolute; top: -14px; left: 0; height: 1.5px; width: 44px; content: ''; background-color: #FFF200; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; }
#headerCntr .book { position: absolute; top: 39.5px; right: -10px; width: 248px; height: 128px; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; justify-content: center; background-color: #fff200; color: #191919; transition: all 0.3s; }
#headerCntr .book span { margin-left: 6px; }
#headerCntr .book:hover { background-color: #BAB100; }

/* ### top box ### */
.topBox { padding-top: 9px; padding-bottom: 8px; position: relative; }
.topBox:before { position: absolute; top: 0; left: -106px; background-color: #fff; content: ''; height: 100%; width: calc(100% + 3500px); }
.topBox .contact { display: flex; }
.topBox ul { position: relative; z-index: 1; }
.topBox li { margin-right: 40px; }
.topBox li:last-child { margin-right: 0; }
.topBox li a { color: #191919; font-size: 12px; transition: all 0.3s; }
.topBox li a:hover { color: #fff200;  }
.topBox .social-media li { margin-right: 10px; display: inline-block; }
.topBox .social-media li:last-child { margin-right: 0; }
.topBox .social-media li a { font-size: 16px; }

/* ### header box ### */
.headerBox { padding-top: 14px; padding-bottom: 8px; position: relative; }
.headerBox:before { position: absolute; top: 0; left: -106px; background-color: #191919; content: ''; height: 100%; width: calc(100% + 3500px); }
.headerBox .logo { position: relative; z-index: 1; }
.headerBox .logo img { max-width: 100%; }
.headerBox .social-media { margin-bottom: 5px; margin-right: -52px; position: relative; z-index: 1; text-align: right; }
.headerBox .social-media li { margin-right: 11px; display: inline-block; }
.headerBox .social-media li:last-child { margin-right: 0; }
.headerBox .social-media li a { color: #fff; font-size: 28px; transition: all 0.3s; }
.headerBox .social-media li a:hover { color: #FFF200; }

/* ### menu box ### */
.menuBox { margin-bottom: 5px; padding-left: 38px; position: relative; z-index: 1; }
.menuBox ul > li { margin-right: 41px; display: inline-block; }
.menuBox ul > li:last-child { margin-right: 0; }
.menuBox ul > li > a { font-size: 20px; font-weight: 500; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #fff; transition: all 0.3s; }
.menuBox ul > li > a:hover { color: #FFF200; }
.menuBox .phone { position: fixed; bottom: 0; left: 0; width: 100%; height: 81px !important; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; justify-content: center; background-color: #fff200; color: #191919; transition: all 0.3s; }

/* ### hamburger ### */
.hamburger { position: absolute; top: 101px; right: 137px; z-index: 5; display: none; width: 30px; height: 30px; font-weight: 600; color: #000; transition: all 0.3s; }
.hamburger.active { right: 35px; }
.hamburger span { margin: 4px auto; position: absolute; top: 10px; left: 5px; display: block; width: 21px; height: 3px; background-color: #fff; transition: all 0.3s; }
.hamburger.active span { background: none; }
.hamburger span:before,
.hamburger span:after { position: absolute; display: block; width: 100%; height: 3px; background-color: #fff; transition: all 0.3s; content: ''; }
.hamburger span:before { top: -6px; }
.hamburger span:after { bottom: -6px; }
.hamburger.active span:before { top: 0; width: 100%; transform: rotate(135deg); }
.hamburger.active span:after { bottom: 0; width: 100%; transform: rotate(-135deg); }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### banner box ### */
.bannerBox { position: relative; height: 869px; width: 100%; display: flex; align-items: center; overflow: hidden; }
.bannerBox:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(25,25,25,0.68); content: ''; z-index: 1; }
.bannerBox .content { padding-top: 23px; max-width: 695px; position: relative; z-index: 2; }
.bannerBox h5 { margin-bottom: 15px; color: #fff200; }
.bannerBox h4 { margin-bottom: 20px; color: #fff200; }
.bannerBox .image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.bannerBox img { height: 100%; width: 100%; min-height: 868px; max-height: 868px; object-fit: cover; }
.bannerBox .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); right: 68px; z-index: 2; cursor: pointer; border: 1px solid #FFF200; height: 66px; width: 66px; display: flex; align-items: center; justify-content: center; color: #FFF200; background-color: transparent; border-radius: 50%; font-size: 40px; }
.bannerBox .slick-next { top: 58.6%; }

/* ### date box ### */
.dateBox { margin-bottom: 118px; }
.dateBox .box { padding-top: 68px; padding-bottom: 65px; background-color: #101010; position: relative; }
.dateBox .box:before { width: 106px; height: 100%; background-color: #101010; position: absolute; top: 0; left: -106px; content: ''; }
.dateBox .box:after { background-color: #101010; height: 100%; width: 100vh; position: absolute; top: 0; left: 100%; content: ''; }
.dateBox .item { border-right: 1px solid #272727; width: 100%; }
.dateBox .item:last-child { border-right: 0; }
.dateBox .text { padding-left: 90px; position: relative; z-index: 1; }
.dateBox span { margin-bottom: 1px; display: block; font-size: 14px; color: #FFF200; }
.dateBox h3 { margin-bottom: 14px; }
.dateBox p { margin-bottom: 0; }
.dateBox .date { position: absolute; top: 0; left: 15px; height: 55px; width: 55px; background-color: #fff200; font-size: 18px; font-family: 'Oswald', sans-serif; font-weight: bold; line-height: 1.1; color: #191919; text-transform: uppercase; text-align: center; }
.dateBox .slick-arrow { position: absolute; top: 0; left: -68px; z-index: 1; cursor: pointer; border: 1px solid #FFF; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; color: #FFF; background-color: transparent; border-radius: 50%; font-size: 20px; }
.dateBox .slick-next { top: 37px; }

/* ### bigger box ### */
.biggerBox { margin-bottom: 144px; }
.biggerBox h1 { margin-bottom: 30px; position: relative; }
.biggerBox h1:before { top: -18px; left: 50%; transform: translateX(-50%); height: 1.5px; width: 44px; content: ''; background-color: #FFF200; }
.biggerBox .item { margin-bottom: 45px; }
.biggerBox .image { margin-bottom: 10px; }
.biggerBox .yellow { display: block; font-size: 13px; text-transform: uppercase; color: #FFF200; }
.biggerBox h3 { margin-bottom: 3px; }
.biggerBox p { margin-bottom: 20px; }
.biggerBox .gray { color: #9A9A9A; }

/* ### shot box ### */
.shotBox .title { margin-bottom: 80px; }
.shotBox .title:before { left: 50%; transform: translateX(-50%); }
.shotBox .image { background: linear-gradient(to bottom, rgba(235,235,235,1) 0%, rgba(118,118,118,1) 100%); overflow: hidden; cursor: pointer; }
.shotBox .image:hover .text { transform: translateY(0); }
.shotBox .image:hover h3 { margin-bottom: 10px; }
.shotBox .image img { mix-blend-mode: multiply; width: 100%; height: 100%;  min-height: 610px; object-fit: cover; }
.shotBox .text { padding: 10px 15px 31px 29px; transform: translateY(125px); position: absolute; bottom: 0; left: 0; width: 100%; transition: all 0.3s; }
.shotBox h3 { margin-bottom: 32px; transition: all 0.3s; }
.shotBox p { margin-bottom: 10px; max-width: 235px; font-size: 18px; }
.shotBox .link { border: 1px solid #fff200; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; color: #fff200; background-color: transparent; border-radius: 50%; font-size: 20px; }
.shotBox .gallery-text  {color:#FFFFFF;}
.shotBox a {display: block;}
/* ### logo box ### */
.logoBox { padding-top: 93px; padding-bottom: 194px; position: relative; }
.logoBox .js-logo-slider { z-index: 1; }
.logoBox .slide { padding: 0 10px; }
.logoBox .slide img { margin: 0 auto; }
.logoBox .slick-list { margin: 0 -10px; }
.logoBox .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; }
.logoBox .image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* ### story box ### */
.storyBox { margin-bottom: 181px; }
.storyBox .content { padding-top: 125px; padding-right: 15px; }
.storyBox .title { margin-bottom: 26px; max-width: 410px; line-height: 1.3; }
.storyBox p { margin-bottom: 30px; }
.storyBox .text { margin-bottom: 38px; }
.storyBox .text ul { margin-bottom: 0; }
.storyBox li { margin-bottom: 2px; }
.storyBox li:last-child { margin-bottom: 0; }
.storyBox li span { font-weight: 500; display: block; }
.storyBox .counting { margin-bottom: 18px; padding-left: 15px; }
.storyBox .counting li { list-style: auto; }
.storyBox .dots li { padding-left: 20px; position: relative; }
.storyBox .dots li:before { position: absolute; top: 8px; left: 0; height: 6px; width: 6px; background-color: #fff200; border-radius: 50%; content: ''; }
.storyBox .image { margin-top: -121px; max-width: 540px; margin-left: auto; position: relative; }
.storyBox img { width: 100%; min-height: 375px; object-fit: cover; margin: 0 0 40px; }
.storyBox .music { position: absolute; top: 0; left: -121px; height: 121px; width: 121px; display: flex; align-items: center; justify-content: center; background-color: #fff200; color: #191919; font-size: 80px; }

/* ### footer container ### */
#footerCntr { width: 100%; }

/* ### footer box ### */
.footerBox { padding-top: 122px; padding-bottom: 120px; position: relative; background: linear-gradient(to bottom, rgba(235,235,235,1) 0%, rgba(118,118,118,1) 100%); }
.footerBox .content { max-width: 845px; padding: 106px 20px 83px 95px; position: relative; z-index: 1; background-color: #191919; margin-left: auto; }
.footerBox .content:after { background-color: #191919; height: 100%; width: 100vh; position: absolute; top: 0; left: 100%; content: ''; }
.footerBox .title { margin-bottom: 28px; position: relative; color: #fff; }
.footerBox .title:before { top: -21px;  }
.footerBox p { margin-bottom: 4px; color: #fff; }
.footerBox .contact li { margin-bottom: 3px; }
.footerBox .contact li:last-child { margin-bottom: 0; }
.footerBox a { color: #fff; transition: all 0.3s; }
.footerBox a:hover { color: #fff200; }
.footerBox .social-media { position: absolute; top: 0; left: -80px; }
.footerBox .social-media li { margin-bottom: 1px; }
.footerBox .social-media li a { height: 80px; width: 80px; background-color: #FFF200; color: #191919; font-size: 35px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.footerBox .social-media li a:hover { background-color: #BAB100; }
.footerBox .image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; mix-blend-mode: multiply; }
.footerBox img { width: 100%; height: 100%; object-fit: cover; }

/* ### copyright box ### */
.copyrightBox { padding-top: 25px; padding-bottom: 23px; }
.copyrightBox li { margin-right: 38px; display: inline-block; }
.copyrightBox li a { color: #fff; transition: all 0.3s; font-size: 12px; }
.copyrightBox li a:hover { color: #fff200; }
.copyrightBox .social-media li { margin-right: 3px; }
.copyrightBox .social-media li:last-child { margin-right: 0; }
.copyrightBox p { margin-bottom: 0; color: #fff; font-size: 12px; }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1800px) {
	.headerBox { padding-right: 100px; }
	.headerBox .social-media { margin-right: 0; }
}

@media only screen and (max-width: 1500px) {
	#headerCntr .book { width: 200px; }
	.headerBox .social-media { text-align: left; }
	.dateBox .slick-arrow { bottom: -50px; top: auto; left: 50%; transform: translateX(-50%); }
	.dateBox .slick-next { margin-left: 38px; }
	.dateBox .slick-prev { margin-right: 38px; }
	.shotBox .text { padding: 10px 15px 31px 18px; }
	.shotBox h3 { font-size: 20px; }
	.shotBox p { font-size: 16px; }
}

@media only screen and (max-width: 1199px) {
	h1 { font-size: 40px; }
	h2 { font-size: 50px; }
	.headerBox { padding-right: 195px; }
	.headerBox .social-media { text-align: right; }
	.menuBox ul > li { margin-right: 19px; }
	.headerBox .social-media li a { font-size: 22px; }
	.bannerBox { height: 750px; }
	.bannerBox img { min-height: 750px; }
	.bannerBox .slick-arrow { right: 15px; }
	.bannerBox .slick-next { top: 60%; }

}

@media only screen and (max-width: 991px) {
	#headerCntr .book { right: 0; height: 106px; width: 150px; font-size: 20px; }
	.headerBox { padding-right: 150px; }
	.headerBox .logo img { max-width: 73px; }
	.menuBox { padding-left: 15px; }
	.menuBox ul > li { margin-right: 14px; }
	.menuBox ul > li > a { font-size: 16px; }
	.bannerBox { height: 600px; }
	.bannerBox img { min-height: 600px; }
	.bannerBox .slick-next { top: 63%; }
	.dateBox .box { padding-top: 44px; padding-bottom: 112px; }
	.dateBox .item { margin-bottom: 40px; border-right: 0; }
	.dateBox .item:last-child { margin-bottom: 0; }
	.dateBox .text { padding-left: 70px; }
	.dateBox .date { left: 0; }
	.biggerBox { margin-bottom: 59px; }
	.storyBox { margin-bottom: 100px; }
	.storyBox .title { font-size: 30px; }
	.storyBox .content { padding-top: 80px; padding-right: 0; }
	.footerBox .content { max-width: 645px; }

}

@media only screen and (max-width: 767px) {
	h1 { font-size: 30px; }
	h2 { font-size: 30px; }
	h3 { font-size: 22px; }
	h4 { font-size: 14px; }
	h5 { font-size: 14px; }
	.title { font-size: 30px; }
	.btn { padding: 19px 50px 18px 20px; font-size: 16px; }
	.btn-primary:after { height: 25px; width: 25px; font-size: 16px; top: 18px; right: 15px; }
	.container { padding-left: 35px; padding-right: 35px; }
	#headerCntr .book { padding: 25px 10px; display: block; align-items: inherit; justify-content: inherit; text-align: center; width: 111px; top: 63px; font-size: 22px; line-height: 1.3; }
	#headerCntr.active .book { display: none; }
	#headerCntr .book span { margin-left: 0; display: block; width: 100%; }
	.headerBox { padding-top: 12px; padding-bottom: 3px; padding-right: 0; }
	.headerBox .logo { z-index: 2; }
	.headerBox .logo img { max-width: 79px; }
	.headerBox .social-media { display: none; }
	.topBox li { margin-right: 15px; }
	.topBox { padding-top: 12px; padding-bottom: 15px; }
	.topBox .contact { display: block; }
	.topBox li { margin-right: 0;  display: block; line-height: 1.2; }
	.topBox li a { font-size: 10px; }
	.topBox .social-media { padding-top: 3px; }
	.menuBox { margin: 0 -35px; padding: 143px 37px 85px; position: absolute; top: 0; left: 0; width: calc(100% + 70px); height: 100vh; background-color: #191919; opacity: 0; visibility: hidden; transition: all 0.3s; }
	.menuBox.active { opacity: 1; visibility: visible; }
	.menuBox ul > li { display: block; margin-bottom: 20px; margin-right: 0; }
	.menuBox ul > li:last-child { margin-bottom: 0; }
	.menuBox ul > li > a { display: block; font-size: 20px; }
	.hamburger { display: block; }
	.bannerBox { height: 552px; }
	.bannerBox img { min-height: 552px; }
	.bannerBox .content { padding-top: 170px; }
	.bannerBox h4 { margin-bottom: 18px; }
	.bannerBox h5 { display: none; }
	.bannerBox .slick-arrow { height: 40px; width: 40px; font-size: 25px; top: auto; bottom: 20px; transform: translateY(0); }
	.bannerBox .slick-next { right: 35px; }
	.bannerBox .slick-prev { left: 35px; }
	.dateBox { margin-bottom: 65px; }
	.dateBox h3 { margin-bottom: 6px; }
	.dateBox span { font-size: 12px; }
	.dateBox p { font-size: 12px; }
	.dateBox .slick-arrow { left: 44%; bottom: -65px; }
    /*.dateBox .slide {width: 100% !important; margin-bottom: 30px;}*/
	.biggerBox .item { margin-bottom: 15px; }
	.biggerBox .image img { margin: 0 auto; }
	.biggerBox h1 { margin-bottom: 10px; }
	.biggerBox .yellow { font-size: 12px; }
	.biggerBox p { margin-bottom: 10px; font-size: 12px; }
	.biggerBox .gray { font-size: 12px; }
	.biggerBox .view-all { width: calc(100% + 20px); margin: 0 -10px; }
	.shotBox .title { margin-bottom: 56px; }
	.logoBox { padding-top: 70px; padding-bottom: 70px; }
	.storyBox { margin-bottom: 0; }
	.storyBox .content { margin-bottom: 40px; padding-top: 61px; }
	.storyBox .image { max-width: 100%; margin-top: 0; }
	.storyBox img { min-height: 439px; width: 100%; }
	.storyBox .music { height: 66px; width: 66px; left: 0; font-size: 40px; }
	.storyBox p { font-size: 12px; }
	.storyBox li { font-size: 12px; }

	.footerBox { padding: 60px 20px 0; background: transparent; }
	.footerBox .container { padding-left: 25px; padding-right: 25px; }
	.footerBox .title:before { top: -15px; }
	.footerBox .content { padding: 0 0 35px; }
	.footerBox p { margin-bottom: 15px; font-size: 12px; }
	.footerBox strong { font-size: 12px; }
	.footerBox .contact li a { font-size: 12px; }
	.footerBox .social-media { left: 0; }
	.footerBox .social-media li a { height: 66px; width: 66px; font-size: 25px; display: flex; }
	.footerBox .image { position: relative; top: auto; left: auto; background: linear-gradient(to bottom, rgba(235,235,235,1) 0%, rgba(118,118,118,1) 100%); mix-blend-mode: unset; }
	.footerBox img { height: 439px; object-fit: cover; mix-blend-mode: multiply; }
	.copyrightBox .info { margin-bottom: 12px; width: 100%; }
	.copyrightBox li { margin-right: 25px; }
	.copyrightBox p { width: 100%; }

}

@media only screen and (max-width: 480px) {
	.copyrightBox ul { width: 100%; }
	.copyrightBox li { margin-bottom: 2px; display: block; margin-right: 0; }
	.copyrightBox .social-media li { margin-bottom: 0; display: inline-block; }
}