@charset "UTF-8";

@font-face{
	font-family: bebasNeueBook;
	src:url(../fonts/BebasNeueBook.otf);
}

@font-face{
	font-family: bebasNeue;
	src:url(../fonts/BebasNeue.otf);
}

#contentMainBackground{
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
}

.contentMainPharagraph01{
	width: 1200px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

.contentMainPharagraph01 h1{
	text-align: center;
	margin: 0px;
}

.contentMainPharagraph01 p{
	width: 580px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-bottom: 40px;
	margin-bottom: 0px;
}

.contentMainPharagraph02{
	width: 680px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	text-align: center;
}

.contentMainPharagraph02 h2{
	margin: 0px;
	color: #594850;
	font-size: 32px;
	display: inline-block;
	letter-spacing: 2px;
}

.contentFooterPhraseBold{
	font-family: bebasNeue;
	color: #e70f8a;
}

.contentLineDivisor{
	width: 700px;
	height: auto;
	margin-top: 40px;
	border-bottom: solid;
	border-bottom-width: 1px;
	border-bottom-color: #82777b;
	margin-left: auto;
	margin-right: auto;
}

#contentMainInfograph02{
	width: calc(100% - 20px);
	height: auto;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

.contentMainInfograph02Parts{
	display: inline-block;
	width: auto;
	height: auto;
}

.contentMainInfograph02Parts img{
	height: auto;
	width: calc(80% - 40px);
	margin-left: auto;
	margin-right: auto;
}

.contentReelsBackground{
	width: 100%;
	height: auto;
	margin-top: 40px;
	text-align: center;
}

.contentReelTitleContainer{
	display: inline-block;
	width: 240px;
	height: 70px;
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: top;
}

.contentReelTitle{
	width: 100%;
	height: 50px;
	margin-top: 10px;
	padding: 0px;
}

.contentReelTitle h1{
	color: #FFFFFF;
	padding-top: 12px;
	padding-bottom: 0px;
	letter-spacing: 2px;
	margin: 0px;
}

#contentReelTitle01{
	background-color: #e71089;
}

#contentReelTitle02{
	background-color: #5fba46;
}

.contentReelContainer{
	display: inline-block;
	width: 520px;
	height: 70px;
	margin-left: 0px;
	margin-right: 0px;
}

.contentMainImageFullBackground{
	width: 100%;
	height: auto;
	margin-top: 20px;
}

.contentMainImageFull{
	width: 680px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding: 0px;
}

.contentMainImageFull img{
	width: 680px;
	height: auto;
	margin: 0px;
	padding: 0px;
}


/* Responsive Breakpoints */
/* Breakpoint 01 */ 
@media (max-width: 1200px){
	
	.contentMainPharagraph01{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}

}

/* Breakpoint 02 */ 
@media (max-width: 700px){
	
	.contentLineDivisor{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.contentMainPharagraph01 p{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.contentMainPharagraph02{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 40px;
	}
	
	.contentMainPharagraph02 h2{
		font-size: 28px;
	}
	
	.contentMainInfograph02Parts img{
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.contentMainImageFull{
		width: 100%;
	}

	.contentMainImageFull img{
		width: 100%;
	}
	
}

/* Breakpoint 03 */ 
@media (max-width: 520px){
	
	.contentMainPharagraph01 h1{
		font-size: 18px;
	}
	
	.contentMainPharagraph02 h2{
		font-size: 22px;
	}
	
	.contentMainPharagraph01 p{
		font-size: 12px;
	}
	
	.contentReelTitleContainer{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.contentReelContainer{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}

}

/* Breakpoint 04 */ 
@media (max-width: 400px){
	

}