#section-franchise {background: #f2ebe4; padding-bottom: 100px;}
.box-row {display: flex;}
.blackbox {flex: 1; background-color: #2e2e2d; float: left; width: 50%;}
.whitebox {flex: 1; background-color: #f2ebe4; float: left; width: 50%;}
.blackbox-top {min-height: 540px; padding: 40px 8% 40px 8%; background: url('../img/franchise/franchise/franchise-bg.png') no-repeat 0 0; background-size: 100% auto;}
.blackbox-bottom {padding: 70px 5% 40px 5%;}
.whitebox-top {min-height: 540px; padding: 40px 8% 40px 8%; background: url('../img/franchise/franchise/franchise-international-bg.png') no-repeat 0 0; background-size: 100% auto;}
.whitebox-bottom {padding: 70px 5% 40px 5%;}
.box-image {text-align: center; margin-bottom: 20px;}
.box-title {font-size: 29px; font-family: 'touchebold'; text-align: center; margin-bottom: 10px;}
.blackbox .box-title {color: #ffcc00;}
.whitebox .box-title {color: #2e2d2c;}
.box-decoration {height: 11px; background-size: auto 100%; background-repeat: no-repeat; background-position: top center; margin-bottom: 70px;}
.blackbox .box-decoration {background-image: url('../img/franchise/franchise/franchise-indo-title-decor.png');}
.whitebox .box-decoration {background-image: url('../img/franchise/franchise/franchise-inter-title-decor.png');}
.box-desc {line-height: 1.5em; font-size: 18px; font-family: 'gibsonregular'; margin-bottom: 30px;}
.blackbox .box-desc {color: #FFFFFF;}
.whitebox .box-desc {color: #4a4a49;}
.trapezoid-button-container {cursor: pointer; width: 100%; max-width: 450px; margin: auto; margin-bottom: 20px;}
.blackbox .trapezoid-button-container a {color: #2e2d2c;}
.whitebox .trapezoid-button-container a {color: #ffcc00;}
.trapezoid-button {padding-left: 30px; opacity: 1; letter-spacing: 1px; line-height: 30px; border-left: 0px solid transparent; border-right: 25px solid transparent; height: 0; width: 100%; font-size: 11px; font-family: 'touchebold'; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.trapezoid-button img {margin-right: 7px;}
.blackbox .trapezoid-button {border-bottom: 30px solid #ffcc00;}
.whitebox .trapezoid-button {border-bottom: 30px solid #2e2e2d;}
.trapezoid-border-bottom {opacity: 1; margin-top: 5px; height: 2px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.blackbox .trapezoid-border-bottom {background: #FFFFFF;}
.whitebox .trapezoid-border-bottom {background: #2e2e2d;}
.trapezoid-button-container:hover .trapezoid-button {opacity: 0.7;}
.trapezoid-button-container:hover .trapezoid-border-bottom {opacity: 0.7;}
.trapezoid-font-resize{font-size:10px!important;}

@media all and (max-width: 1100px){
	.blackbox-top, .whitebox-top {min-height: 640px; background-size: 100% 100%;}
}

@media all and (max-width:1050px){
	.trapezoid-font-resize{font-size:9px!important;}
}
@media all and (max-width: 950px){
	.trapezoid-button {font-size: 10px;}
	.trapezoid-button img {height: 13px;}
}

@media all and (max-width:900px){
	.trapezoid-font-resize{font-size:8px!important;}
}

@media all and (max-width: 850px){
	.trapezoid-button {font-size: 8px;}
	.trapezoid-button img {height: 12px;}
	.trapezoid-font-resize{font-size:7px!important;}
}

@media all and (max-width: 800px){
	.box-title {font-size: 26px;}
	.box-desc {font-size: 16px;}
}

@media all and (max-width: 750px){
	.trapezoid-button {padding-left: 15px;}
	.trapezoid-button {font-size: 8px;}
	.trapezoid-button img {height: 11px;}
}

@media all and (max-width: 700px){
	.blackbox, .whitebox {width: 100%;}
	.box-row {flex-direction: column;}
	.trapezoid-button {font-size: 11px; padding-left: 30px;}
	.trapezoid-button img {height: 16px;}
	.box-title {font-size: 29px;}
	.box-desc {font-size: 18px;}
	.blackbox-top, .whitebox-top {min-height: unset;}
	.trapezoid-font-resize{font-size:11px!important;}
}

@media all and (max-width:500px){
	.trapezoid-font-resize{font-size:10px!important;}
}


@media all and (max-width: 450px){
	.box-title {font-size: 26px;}
	.box-desc {font-size: 16px;}
	.trapezoid-button {font-size: 10px; padding-left: 15px;}
	.trapezoid-button img {height: 13px;}
}

@media all and (max-width: 400px){
	.trapezoid-button {font-size: 9px;}
	.trapezoid-button img {height: 12px;}
	.blackbox-bottom, .whitebox-bottom {padding-left: 3%; padding-right: 3%;}

	.trapezoid-font-resize{font-size:9px!important;}
}

@media all and (max-width:360px){
	.trapezoid-button {font-size: 8px;}
	.trapezoid-font-resize{font-size:8px!important;}
}

@media all and (max-width:330px){
	.trapezoid-button {font-size: 7px;}
}