.franchise { color: var(--primary-color); text-align: center; font-family: Raleway;  -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;}
.page-width {margin: auto; width: 800px;}
.page-franchise h1 {color: #FDF6E3; margin: 18px 0 0 0; padding: 0; font-weight: 700; line-height: 1;}
.page-franchise h1 span {color: white; display: block; font-weight: 200; font-size: 25px;}

.page-franchise h1 span#span-two {color: var(--secondary-color); width: 65%; text-align: center; margin: auto; }

.page-franchise h1 span#span-two::before,
.page-franchise h1 span#span-two::after {background-color: var(--secondary-color);
	  content: "";
	  display: inline-block;
	  height: 1.5px;
	  position: relative;
	  vertical-align: middle;
	  width: 50%;}
.page-franchise h1 span#span-two::before {
		right: 0.5em;
		margin-left: -20%;
	  }
	  
.page-franchise h1 span#span-two::after{
		left: 0.5em;
		margin-right: -20%;
	  }
.page-franchise h1 div{ color: #F7DC92; font-size: 55px; font-weight: 800; background-image: linear-gradient(180deg, #F7DC92 , #F3C650 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;}
.page-franchise h2 {color: var(--primary-color); text-transform: uppercase; font-weight: 700; width: 60%; display: flow-root; float: none; margin: 0 auto 20px auto; line-height: 1;}

.page-franchise .page-top { border-top: 10px solid var(--tertiary-color); border-bottom: 10px solid var(--tertiary-color); display: block; 	margin: 0 0 40px 0;}
.page-top-image {width: 100%; float: left; border-top: 10px solid var(--secondary-color); border-bottom: 10px solid var(--secondary-color); background-image: url(../images/franchise-bg-top.webp); background-repeat: no-repeat; background-size: cover; display: block; background-position: top center; background-color: var(--primary-color);}
.page-franchise .page-top-content {width: 900px; margin: auto;}
.page-franchise .page-top .left-col {width: 40%; float: left; margin:  0 0 0 40px;}
.page-franchise .page-top .left-col a {display: block; width: 300px;}
.page-franchise .page-top-content .left-col p {color: var(--secondary-color); font-weight: 700; font-size: 20px; margin: 0; padding: 0; line-height:1;}
.page-franchise .page-top-content .left-col i {color: white; font-size: 20px;}
.page-franchise .page-top .right-col {width: 50%; height: 300px; float: right; background-image: url(../images/franchise-bg-illustration.webp); background-repeat: no-repeat; background-size: 100%; background-position: center center; align-items: center; display: flex; justify-content: center;}
.page-franchise .page-top .right-col img {width: 300px; height: auto;}

/* S1 */
.page-franchise .section-one {width: 75%; display: block; margin: auto auto 80px auto; }
.page-franchise .section-one h2 {margin: 0 auto 20px auto;}
.page-franchise .section-one p { line-height: 1.3; margin: auto;}
.page-franchise .section-one .franchise-companies-section h2 { margin: 40px auto 0 auto; line-height: .7; }
.page-franchise .section-one .franchisees-section h2 { margin: 40px auto 0 auto; line-height: .7; color: var(--tertiary-color);}
.page-franchise .section-one .franchise-companies-content { margin: 0 auto 0 auto; display: inline-block; border: 3px solid var(--primary-color); border-radius: 15px;}
.page-franchise .section-one .franchisees-content { margin: 0 auto 0 auto; display: inline-block; border: 3px solid var(--tertiary-color); border-radius: 15px; color: var(--tertiary-color);}
.page-franchise .section-one .franchise-companies-content ul, .page-franchise .section-one .franchisees-content ul {width: 48%; position: relative; display: table-cell; text-align: left; margin: 0; padding: 0; }
.page-franchise .section-one .franchise-companies-content ul:first-child {background-color: var(--primary-color); border-radius: 12px; color: white;}
.page-franchise .section-one .franchisees-content ul:first-child {background-color: var(--tertiary-color); border-radius: 12px; color: white;}
.page-franchise .section-one .franchise-companies-content ul:first-child b, .page-franchise .section-one .franchisees-content ul:first-child b {color: white;}
.page-franchise .section-one .franchise-companies-content ul li, .page-franchise .section-one .franchisees-content ul li { width: 85%; line-height: 1; margin: 0 0 20px 40px; }
.page-franchise .section-one .franchise-companies-content ul b, .page-franchise .section-one .franchisees-content ul b { font-size: 22px; margin: 0 0 0 20px; }
.page-franchise .section-one h2#one-partner {margin: 80px auto 20px auto; width: 100%; letter-spacing: 1.5px;}


/* S2 - S3 - S4 */
.page-franchise .section-two, .page-franchise .section-three, .page-franchise .section-four {width: 100%; position: relative; margin: 40px 0 0 0; display: block; }
.title-section {font-size: 18px; line-height: 1.1; width: 250px; padding: 40px; text-align: left; position: relative; display: inline-grid; justify-content: center;}
.title-section b {text-transform: uppercase; font-weight: 700; font-size: 25px; position: relative; display: inline-grid; justify-content: center;}
.page-franchise .section-two ul, .page-franchise .section-three ul, .page-franchise .section-four ul {width: 600px; list-style: none; position: relative; display: inline-table; margin: 40px 0;}
.section-content {margin: auto; display: flex; align-items: center; background: linear-gradient(90deg,rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0.01) 30%, rgba(255, 255, 255, 0.01) 100%)}
.page-franchise .section-two li, .page-franchise .section-three li, .page-franchise .section-four li  {width: 155px; font-size: 13px; line-height: 1.1; margin: 20px 10px; position: relative; display: inline-grid; justify-content: center;}
.page-franchise .section-three li, .page-franchise .section-four li  {color: white;}
.page-franchise .section-two b, .page-franchise .section-three b, .page-franchise .section-four b {margin: 0 0 7px 0;}

/* S2 */
.page-franchise .section-two { background-color: var(--secondary-color); background-image: url(../images/franchise-marketing-services-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.page-franchise .section-two h2 {margin: 50px 0 40px 0;}


/* S3 */
.page-franchise .section-three { 	background-color: var(--primary-color);  background-image: url(../images/franchise-events-experiences-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.page-franchise .section-three h2 {margin: 0 0 40px 0; }

/* S4 */
.page-franchise .section-four { background-color: var(--tertiary-color); background-image: url(../images/franchise-branded-merchandise.webp); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.page-franchise .section-four h2 {margin: 0 0 40px 0;}
.page-franchise .section-four p {width: var(--content-fixed-width); margin: 0 auto 20px auto; line-height: 1.3;}


/* S5 */
.page-franchise .section-five { font-size: 25px; color: var(--primary-color); text-transform: uppercase; font-weight: 700; width: 50%;  float: none; margin: 80px auto; line-height: 1; letter-spacing: 1px; }
.page-franchise .section-five a {display: inline-block; text-decoration: underline; text-transform: lowercase;}

/* S6 */
.page-franchise .section-six { width: 100%; float: left; background-color: var(--secondary-color); text-align: center; font-weight: 900; font-size: 25px; line-height: 1.1; text-transform: uppercase; padding: 40px 0 20px 0; } 
.page-franchise .section-six p {margin: auto; padding: 0 0 15px 0; }

/* S7 */
.page-franchise .section-seven {margin: 40px 0 0 0; width: 100%; }
.section-seven-top {background-color: var(--tertiary-color); color: white; float: left; width: 100%; padding: 4% 0 4% 0;}
.page-franchise .section-seven-top-content {width: var(--content-fixed-width); margin: auto; }
.page-franchise .full-width .main-content {padding: 40px 0 0 0; }


/* S8 */
.page-franchise .section-eight {margin: 90px 0 0 0; padding: 0 0 40px 0; float: left; width: 100%; color: white; background-image: url(../images/Band_BG_Image.webp); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.page-franchise .section-eight-content {width: var(--content-fixed-width); margin: auto; }
.page-franchise .section-eight h2 {color: white; padding: 0; margin: 20px 0;}
.page-franchise .section-eight-content p {margin: 40px 0 20px 0;}

@media (max-width: 1500px) {

}

@media (max-width: 1400px) {

}

@media (max-width: 1300px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 1100px) {
	.page-franchise .section-one {width: 95%;}
	.page-franchise .section-two {width: 100%;}
	.page-franchise .section-four p {width: 85%;}
	.page-franchise .section-five {width: 85%;}
	.page-franchise .section-six p {width: 85%;}
	.page-franchise .section-eight-content {width: 85%; }
}

@media (max-width: 1000px) {

	
}

@media (max-width: 900px) {
	.page-width { width: 100%;}
	.page-franchise h1 div {font-size: 50px;}
	.page-franchise h1 {font-size: 30px; line-height: 1;}
	.page-franchise .page-top .left-col {width: 50%;}
	.page-franchise .page-top .right-col {width: 350px; float: left;}
	.page-franchise .page-top .right-col img {width: 70%;}
	.page-franchise .section-two li {margin: 0;}
	.page-franchise .page-top-content {width: 100%;}
	.page-franchise .section-three-content .s-one, .page-franchise .section-three-content .s-two, .page-franchise .section-three-content .s-three {width: 90%; background-position: right 60px; padding: 0 0 0 20px;}

}

@media (max-width: 800px) {
	.page-franchise h2 {width: 100%;}
	.page-franchise .page-top .left-col {margin: 0;}
	.page-franchise .section-two li {margin: 0;}
	.page-franchise .section-three {margin: 50px 0 0 0;}
	.section-content {background: linear-gradient(90deg,rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 33%, rgba(255, 255, 255, 0.01) 33%, rgba(255, 255, 255, 0.01) 100%)}
	.page-franchise .section-two ul, .page-franchise .section-three ul, .page-franchise .section-four ul {width: 500px;}
}

@media (max-width: 700px) {
	.page-franchise h1 {font-size: 25px;}
	.page-franchise h1 div {font-size: 40px;}
	.page-franchise .page-top .left-col {margin: 0;}
	.page-franchise .page-top .right-col {width: 50%; height: 280px;}
	.page-franchise .page-top .right-col img {width: 60%;}
	.page-franchise .section-six {font-size: 25px; line-height: 1.1;}
	.section-content {background: linear-gradient(90deg,rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 35%, rgba(255, 255, 255, 0.01) 35%, rgba(255, 255, 255, 0.01) 100%)}
}

@media (max-width: 600px) {
	.page-franchise .section-two li {margin: 0 0 30px 20px;}
	.section-content {display: block; background: linear-gradient(180deg,rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, 0.01) 48%, rgba(255, 255, 255, 0.01) 100%); }
	.title-section {width: 100%; background: linear-gradient(90deg,rgba(255, 255, 255, .5) 0%); text-align: center;}
	.page-franchise .section-two ul, .page-franchise .section-three ul, .page-franchise .section-four ul {width: 97%; }
	.page-franchise .section-one .franchise-companies-content ul li, .page-franchise .section-one .franchisees-content ul li { width: 75%; }
	.section-content {background: none;}
}
@media (max-width: 550px) {
	.page-franchise .page-top .left-col {width: 90%; float: none; margin: auto;}
	.page-franchise .page-top .right-col {width: 90%; float: none; margin: auto; height: 180px;}
	.page-franchise .section-three-content p {margin: 40px 0 0 0;}
	.page-franchise .section-three-content ul {margin: 60px 0 0 20px; width: 90%;}
	.page-franchise .page-top .right-col {background-image: none;}
}

@media (max-width: 500px) {
	.page-franchise .section-three-content b {font-size: 22px; line-height: 1.1;}
	.page-franchise .section-three-content p {margin: 20px 0 0 0;}
	.page-franchise .section-three-content ul {margin: 40px 0 0 20px; }
	.case-study-logo {width: 100%;}
	.case-study-intro-title-one {font-size: 22px;}
	.case-study-intro-title-two {font-size: 30px; margin: 0 auto 12% auto;}
	.case-study-logo img {width: 140%; margin: 0 0 0 -60px;}
	.page-franchise .section-one .franchise-companies-content ul, .page-franchise .section-one .franchisees-content ul {width: 100%; display: block; padding: 0 0 10px 0; }
}

@media (max-width: 400px) {
	.page-franchise .section-three-content p {width: 90%;}
	.page-franchise .section-three-content .s-one, .page-franchise .section-three-content .s-two, .page-franchise .section-three-content .s-three {background-position: bottom center; padding: 0 0 0 20px; background-size: 70%; height: 590px;}
}

@media (max-width: 300px) {

}