/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */
body { font-size: 18px; font-weight: 300; line-height: 1.6; text-align: unset; color: #000; }
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 700; line-height: 1.2; text-transform: uppercase; }
h2 { font-size: 33px; }
h3 { font-size: 24px; color: #004bac; }
p { margin-bottom: 30px; }
ul li { margin-bottom: 30px; }
img { display: block; max-width: 100%; }


/* ### content container ### */
.site_content { width: 100%; }
.content { width: 100%; }
.centered { margin: 0 auto; padding-right: 15px; padding-left: 15px; max-width: 1230px; }

/* ### top ### */
.headingBox { padding-top: 25px; padding-bottom: 25px; text-align: center; background-color: #163e64; }
.headingBox h2 { color: #fff; }
.headingBox.inner { background-color: #000; }


/* ### caseBox ### */
.caseBox { padding-bottom: 60px; background-color: #fff; }
.caseBox .holder { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.caseBox .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.caseBox .left { width: 60%; }
.caseBox .intro { padding: 10px 0; }
.caseBox h3 { margin-bottom: 30px; font-size: 35px; }
.caseBox .intro strong { font-weight: 600; }
.caseBox ul li { padding-left: 40px; position: relative; }
.caseBox .list-icon { position: absolute; top: 0; left: 0; width: 30px; height: 30px; }
.caseBox .list-icon img { width: 100%; object-fit: cover; }
.caseBox .right { display: flex; justify-content: center; width: 34.7%; }
.caseBox. .right img { width: 100%; }
.caseBox.inner .holder { margin-top: 20px; }
.caseBox.large p { font-size: 25px; }

/* ### Collaboration ### */
.collaboration-bottom { padding: 10px 0; background-color: #000; }
.collaboration-item-holder { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

/* ### impactBox ### */
.impactBox { background-color: #fff; }
.impactBox .holder { margin-top: 20px; }
.impactBox .intro { margin-bottom: 20px; display: block; font-size: 22px; font-weight: 600; text-align: center; }
.impactBox .info { padding-bottom: 30px; display: flex; gap: 50px; align-items: center; }
.impactBox .left { width: 60%; font-size: 22px; }
.impactBox .left strong { font-weight: 600; }
.impactBox .right { display: flex; justify-content: center; width: 40%; }


/* ### digitalBox ### */
.digitalBox { background-color: #fff; }
.digitalBox .wrap { margin-top: 50px; display: flex; justify-content: space-between; }
.digitalBox .left { width: 35%; }
.digitalBox .right { width: 55%; }
.digitalBox .intro { margin-top: 25px; padding-bottom: 70px; font-size: 22px; text-align: center; }


/* ### ticketBox ### */
.ticketBox { background-color: #fff; }
.ticketBox .wrap { margin-top: 40px; display: flex; gap: 50px; justify-content: space-between; }
.ticketBox .item { padding-bottom: 40px; width: 50%; }
.ticketBox .text { text-align: center; }
.ticketBox .text strong { font-weight: 600; }
.ticketBox .image { display: flex; justify-content: center; }
.ticketBox.inner .text { font-size: 22px; }


/* ### merchandiseBox ### */
.merchandiseBox { background-color: #fff; }
.merchandiseBox .holder { margin-top: 70px; padding-bottom: 40px; position: relative; }
.merchandiseBox .text { padding-left: 250px; font-size: 22px; }
.merchandiseBox .image-upper { position: absolute; top: 0; left: 0; }
.merchandiseBox .image { margin-top: 230px; }
.merchandiseBox strong { font-weight: 600; }


/* ### utilityBox ### */
.utilityBox { background-color: #fff; }
.utilityBox .text { margin-top: 60px; padding-bottom: 70px; font-size: 22px; text-align: center; }
.utilityBox strong { font-weight: 600; }
.utilityBox .wrap { padding-bottom: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.utilityBox h3 { font-weight: 700; text-align: center; color: #000; }
.utilityBox .item { width: 20%; }
.utilityBox .image { display: flex; align-items: center; justify-content: center; height: 100%; }
.utilityBox .arrow { display: flex; align-items: center; justify-content: center; width: 20%; }
.utilityBox .arrow-phone { display: none; }

/* ### timingBox ### */
.timingBox { background-color: #fff; }
.timingBox .holder { padding-top: 30px; padding-bottom: 50px; display: flex; gap: 20px; }
.timingBox .item { display: grid; width: 33.33%; }
.timingBox .image { margin-bottom: 15px; display: flex; justify-content: center; }
.timingBox .wrap { margin-top: auto; display: flex; justify-content: center; }
.timingBox .link { font-size: 20px; text-transform: uppercase; color: #25446b; }
.timingBox .link:hover { text-decoration: underline; }

/* ### approachBox ### */
.approachBox { background-color: #fff; }
.approachBox .holder { margin-top: 60px; }
.approachBox .subtitle { font-size: 25px; text-align: center; }
.approachBox .wrap { margin-top: 25px; padding-bottom: 50px; display: flex; gap: 100px; }
.approachBox .item { position: relative; width: 50%; }
.approachBox .item:last-child:before { position: absolute; top: 0; left: -40px; width: 5px; height: 70%; background-color: #fd7413; content: ''; }
.approachBox .image { margin-bottom: 20px; display: flex; justify-content: center; }
.approachBox strong { font-weight: 600; }


/* ### step-first ### */
.step-first { background-color: #fff; }
.step-first .holder { margin-top: 20px; padding-bottom: 40px; }
.step-first .subtitle { margin-bottom: 20px; padding-bottom: 20px; font-size: 35px; font-weight: 700; text-align: center; text-transform: uppercase; color: #25446b; }
.step-first .wrap { display: flex; gap: 20px; justify-content: space-between; }
.step-first .item { width: 33.33%; }
.step-first .item p { margin-bottom: 20px; font-size: 22px; text-align: center; }
.step-first .item strong { font-weight: 700; }
.step-first .image { display: flex; justify-content: center; }

/* ### step-second ### */
.step-second { background-color: #fff; }
.step-second .holder { margin-top: 20px; padding-bottom: 40px; }
.step-second .subtitle { margin-bottom: 20px; padding-bottom: 20px; font-size: 35px; font-weight: 700; text-align: center; text-transform: uppercase; color: #25446b; }
.step-second .wrap { display: flex; gap: 20px; justify-content: space-between; }
.step-second .item p { margin-bottom: 20px; font-size: 22px; text-align: center; }
.step-second .item strong { font-weight: 700; }
.step-second .image { display: flex; justify-content: center; }
.step-second .arrow { display: flex; align-items: center; justify-content: center; }
.step-second .arrow-phone { display: none; }

/* ### productBox ### */
.productBox { background-color: #fff; }
.productBox .holder { margin-top: 50px; padding-bottom: 30px; }
.productBox .wrap { display: flex; gap: 20px; }
.productBox .left { width: 25%; }
.productBox .right { width: 75%; }
.productBox .right p { font-size: 24px; }
.productBox .cards { display: flex; justify-content: center; }

/* ### funnelBox ### */
.funnelBox { background-color: #fff; }
.funnelBox .holder { padding-top: 120px; padding-bottom: 50px; }
.funnelBox .wrap { padding-bottom: 60px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.funnelBox .item { display: flex; align-items: center; justify-content: center; }
.funnelBox .subtitle { font-size: 35px; line-height: 1.6; text-align: center; }

/* ### newBox ### */
.newBox { background-color: #fff; }
.newBox .holder { padding-top: 50px; padding-bottom: 100px; }
.newBox .text { margin-left: auto; max-width: 800px; font-size: 25px; text-transform: uppercase; }
.newBox strong { font-weight: 600; }


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

@media only screen and (max-width: 992px) {
	.merchandiseBox .image { margin-top: 150px; }
	.utilityBox .wrap { display: block; }
	.utilityBox .item { margin-bottom: 30px; width: 100%; }
	.utilityBox h3 { margin-bottom: 10px; }
	.utilityBox .text { padding-bottom: 30px; }
	.utilityBox .arrow { display: none; }
	.utilityBox .arrow-phone { margin-bottom: 30px; display: flex; align-items: center; justify-content: center; }
	.productBox .right p { font-size: 20px; }
}

@media only screen and (max-width: 767px) {
	.title h2 { font-size: 25px; }
	.caseBox { padding-bottom: 40px; }
	.caseBox .left { width: 100%; }
	.caseBox .right { width: 100%; }
	.caseBox .right img { width: unset; }
	.caseBox.large p { font-size: 20px; }
	.impactBox .info { display: block; font-size: 22px; }
	.impactBox .left { width: 100%; font-size: 18px; }
	.impactBox .right { width: 100%; }
	.digitalBox .wrap { display: block; }
	.digitalBox .left { margin-bottom: 25px; display: flex; justify-content: center; width: 100%; }
	.digitalBox .right { display: flex; justify-content: center; width: 100%; }
	.digitalBox .intro { padding-bottom: 40px; font-size: 18px; }
	.ticketBox .wrap { display: block; }
	.ticketBox .item { width: 100%; }
	.merchandiseBox .text { padding-left: 0; font-size: 20px; }
	.merchandiseBox .image-upper { position: unset; }
	.merchandiseBox .image { margin-top: 20px; }
	.timingBox .holder { display: block; }
	.timingBox .item { padding-bottom: 30px; width: 100%; }
	.timingBox .image { margin-bottom: 0; }
	.approachBox .wrap { padding-bottom: 0; display: block; }
	.approachBox .item { padding-bottom: 30px; width: 100%; }
	.step-first .wrap { display: block; }
	.step-first .item { padding-bottom: 50px; width: 100%; }
	.step-first .item p { margin-bottom: 10px; }
	.step-second .wrap { display: block; }
	.step-second .item { padding-bottom: 50px; width: 100%; }
	.step-second .item p { margin-bottom: 10px; }
	.step-second .arrow { display: none; }
	.step-second .arrow-phone { margin-bottom: 30px; display: flex; align-items: center; justify-content: center; }
	.productBox .wrap { display: block; }
	.productBox .left { margin-bottom: 20px; display: flex; justify-content: center; width: 100%; }
	.productBox .right { width: 100%; }
	.funnelBox .holder { padding-top: 50px; display: block; }
	.funnelBox .wrap { padding-bottom: 30px; display: block; }
	.funnelBox .item { padding-bottom: 150px; }
	.funnelBox .item.secondary { padding-right: 200px; padding-bottom: 0; padding-left: 50px; transform: rotate(90deg); }
	.funnelBox .item.secondary img { max-width: 150px; }
	.funnelBox .item:last-child { padding-bottom: 20px; }
	.funnelBox .subtitle { font-size: 25px; }
}