@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Ubuntu:700');
/* CSS Document */
a{ display:block;}
@media (min-width:769px){
.sp{ display:none;}
}
@media (max-width:768px){
img{ max-width:100%; height:auto;}
.pc{ display:none;}
}
.ls-2{letter-spacing:-2px;}

#wrapper{width:100%;}
header{width:95%;margin:15px auto;}
#logoLeft{float:left;}
	#logoLeft span{font-size:12px; color:#777777;}
#logoRight{float:right; max-width:250px; text-align:right;}
	#logoRight a{    color: #c7c7c7;}
	#logoRight .fa{ margin-right:6px;}
#logoLeft img,#logoRight img {vertical-align:middle; max-width:100%;}
@media (max-width:767px){
#logoLeft{width:50%;}
#logoRight{width:40%;}
#logoLeft img { zoom:.5;}
	#logoLeft span{font-size:10px; display:block; margin-top:5px;}
}

/**MENU
*****************************************/
nav{z-index: 700;background-color: rgba(206, 206, 206, 0.3); padding: 1em 0;}
	nav li{ line-height:1.6; }
	nav li a { color: #056fb7; }
	nav li a.active { background-color: #056fb7; color: #fff; }
	nav li a:hover { background-color: rgba(5, 111, 183, 0.5); }
	nav li:first-letter { font-weight:600; margin-right:1px;}
@media (min-width:768px){
nav{position: fixed;right: 0px; top: 150px;}
	nav li{font-size: .9rem; margin-bottom: 15px;   }
	nav li a {padding:0 1em;}
	nav li:first-letter {font-size:1.8rem;}
}
@media (max-width:767px){
	nav ul{ display:table; width:100%;}
	nav li{ display: table-cell;font-size: .7rem;text-align: center;}
	nav li:first-letter {font-size:1.5rem;}
}


h1{ font-size:30px; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;font-weight: bold; line-height: 1.2; margin-bottom: 20px; letter-spacing: 2px;}
@media (max-width:736px){
h1{ font-size:25px;}
}
address{padding:1.5em 0;text-align:center; font-size:13px; color:#0e6eb8;}
@media (max-width:736px){
address{ font-size:10px;}
}


#movieArea{ position:relative; width:100%; height:90vh;}
@media (max-width:736px){
#movieArea{height:80vh;}
}
@media (max-width:768px){
#apArea img{width:100%; max-width:inherit;}
}
#video-controls{ position:absolute; bottom: 2%; z-index: 999;right: 2%;}
.fa-volume-up,
.fa-volume-off{ font-size:20px;}
	#copy{ position:absolute; left:5%; top:10%;max-width:50%; z-index:3;}
	@media (max-width:768px){
	#copy{max-width:90%;bottom: 5%; top:inherit;}
	}


/*	#yt_background,
	#yt_overlay {position: absolute; top: 0; left: 0; width: auto; min-width: 100%; height: auto; min-height: 100%;}
	#yt_background {z-index: -1;}
	#yt_overlay {z-index: 0;}*/


.video-texture { width: 100%; height: 100%; position: absolute; display: block; top: 0; left: 0; z-index: 2; /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAU+jEh8HwYGhi0wATAHJAkSgHNAAgBV7gNRSeLXuAAAAABJRU5ErkJggg==) repeat;    background-color: rgba(0, 0, 0, 0.4);*/}
.main-visual { height: 90%;    max-height: 900px; background-size: cover; text-align:center; position: relative; overflow: hidden; background:url(../img/opa.png) repeat;} 
.main-visual video { margin:0 auto; z-index: 1; width:100%; }

#video-controls{ position:absolute; bottom: 2%; z-index: 999;right: 2%;}
.fa-volume-up,
.fa-volume-off{ font-size:20px;}


#intro{width:85%; margin:50px auto 100px; font-size:1.1rem; line-height:1.8;}


.yycountdown-box{
	text-align:left;
	margin:10px 0;
	color:#000000;
	font-family: "Arial", sans-serif;
	font-weight: bold;
}
.yyc-day,
.yyc-hou,
.yyc-min,
.yyc-sec{
  color:#ffffff;font-size: 60px;}
@media (max-width:736px){
.yyc-day,
.yyc-hou,
.yyc-min,
.yyc-sec{
  color:#ffffff;font-size: 40px;}
}

.yyc-day-text,
.yyc-hou-text,
.yyc-min-text,
.yyc-sec-text{ margin:0 10px;}




/********************************************************
HISTORY
********************************************************/
#history ,#history .content{overflow-x: hidden;}
#history .content{position: relative; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d3edf99e), color-stop(0.00, #bfe8fb)); background: -webkit-linear-gradient(#bfe8fb, #d3edf99e); background: -moz-linear-gradient(#bfe8fb, #d3edf99e); background: -o-linear-gradient(#bfe8fb, #d3edf99e); background: -ms-linear-gradient(#bfe8fb, #d3edf99e); background: linear-gradient(#bfe8fb, #d3edf99e); width: 100%; box-sizing: border-box;background-color:#bfe8fb;}

	.wave{ position:absolute;}/*装飾　波*/
		.wave01{ top:6%; left:40%;}
		.wave02{ top:9%;	right:0%;}
		.wave03{ top:10%; left:16%;}
		.wave04{ top:12%;	right:25%;}
		.wave05{ top:17%;	right:15%;}
		.wave06{ top:21%; left:40%;}
		.wave07{ top:28%;	right:20%;}
		.wave08{ top:30%;	right:0%;}
		.wave09{ top:36%;	right:10%;}
		.wave10{ top:42%; left:50%;}
		.wave11{ top:49%;	right:5%;}
		.wave12{ top:53%; left:36%;}
		.wave13{ top:54%;	right:8%;}
		.wave14{ top:58%; left:50%;}
		.wave15{ top:60%;	right:10%;}
		.wave16{ top:67%;	right:5%;}
		.wave17{ top:74%;	right:15%;}
		.wave18{ top:83%;	right:2%;}
		.wave19{ top:85%; left:50%;}
		.wave20{ top:90%;	right:40%;}

	.vehicle{ position:absolute;z-index: 0;}/*装飾　船など*/
		.vehicle02{ top: 53%; right: 2%;}
		.vehicle03{ top:48%;	right:30%;}
		.vehicle04{ top:58%;	right:20%;}
		.vehicle05{ top:79%; left:75%;}
		.vehicle06{ top:80%; left:80%;}
		.vehicle09{ top:83%;	right:10%;}
		.vehicle10{ top:89%; left:60%;}
		.vehicle11{ top:92%; right:10%;}

	#history h1{font-family: sans-serif, Helvetica, Arial;color: #056fb7; font-weight: 600; font-size:1rem; margin-bottom: 0;    padding: 40px 0 0 40px;}
	#history h1:first-letter { font-weight:600; font-size:1.8rem; margin-right:3px;}
		#history h1 > span{font-weight: 600; font-size:3rem;letter-spacing: -2px;}

	.chronology{ color:#056fb7; line-height:1.6; font-size:.9rem; width:83%; position:relative;}
		.box12{padding: 2em 1.5em; margin: 2em 40px;box-sizing:border-box;    background-color: rgba(255, 255, 255, .8);font-size: .75rem; line-height: 1.5;    color: #333;}
			#history h2{font-size: 1.2rem; font-weight: 600; margin: 0 0 1em; padding: 0 .5em 5px 0; letter-spacing: 1px; border-bottom: 1px solid #056fb7; display: inline-block;}
			#history.english h2{ line-height:1.3;}

		.yearBox{ font-size: .75rem;}
			.year{ font-weight:600;font-family: 'Ubuntu', sans-serif;letter-spacing: -3px; font-size: 2.5rem;line-height: 1;}
				.year>span { font-size: .85rem; letter-spacing: 1px; margin-left: 6px;}
			.list:before{ content:"●"; display:inline-block; margin-right:3px;margin-left: 3px;}
				.list span{color:#ea6d61; font-weight: 600;}



		.img img{ max-width: 200px; }
		a.colorbox { display: inline-block; color: #056fb7; }
		a.colorbox:hover { background-color: rgba(5, 111, 183, 0.5); color: #FF0000; }
			a.colorbox .fa-picture-o{ margin-left: 1em; font-size: 1.5em; }

@media (min-width:1159px){ 
#bgRoad{ position:relative; width:100%;left:0;padding-top: 200px;}
	.box12{width:80%; max-width:800px; }
	.boxIn{ position:absolute;}
	.yearBox { width: 100%;position:absolute; z-index:500;}
		.img{position: absolute;top: -35%;}
		#year1918 .img{ left:520px; }
		#year1947 .img{ left: 340px; }
		#year1954 .img{ left: 510px; }
		#year1961 .img{ left: 470px; }
		#year1971 .img{ left: 400px; }
		#year1979 .img{ left: 530px; }
		#year1990 .img{ left: 370px; }
		#year1998 .img{ left: 360px; }
		#year2011 .img{ left: 410px; }
	
		#year1918{top:10px;left:40px;}
		#year1919{top:80px;left:40px;}
		#year1923{top: 170px; left: 60px;}
		#year1924{top: 240px; left: 80px;}
		#year1930{top:310px;left:110px;}
		#year1932{top: 380px; left: 160px;}
		#year1934{top: 460px; left: 310px;}
		#year1937{top: 550px; left: 400px;}
		#year1939{top: 660px; left: 430px;}
		#year1942{top:770px;left:430px;}
		#year1945{top: 880px; left: 390px;}

		#period2{ top: 970px; left: 10%;}
		.english #period2{ top: 1220px; left: 20%;}

		#year1946{top: 1180px; left: 350px;}
		#year1947{top: 1270px; left: 390px;}
		#year1948{top:1360px; left: 500px;}
		#year1949{top:1470px; left: 500px;}
		#year1950{top:1540px; left: 490px;}
		#year1951{top:1630px; left: 460px;}
		#year1954{top:1700px; left:400px;}

		#period3{ top: 1790px; left: 5%;}
		.english #period3{ top: 2160px; left: 20%;}

		#year1959{top: 2000px; left: 290px;}
		#year1961{top: 2120px; left: 190px;}
		#year1962{top: 2200px; left: 160px;}
		#year1968{top: 2290px; left: 160px;}
		#year1971{top: 2380px; left: 160px;}
		#year1972{top: 2470px; left: 160px;}
		#year1973{top: 2540px; left: 160px}

		#period4{ top: 2620px; left: 5%;}
		.english #period4{ top: 3140px; left: 20%;}

		#year1974{top: 2870px; left: 210px;}
		#year1979{top: 2960px; left: 210px;}
		#year1980{top: 3050px; left: 210px;}
		#year1986{top: 3140px; left: 210px;}
		#year1990{top: 3270px; left: 210px;}
		#year1997{top: 3360px; left: 230px;}
		#year1998{top: 3440px; left: 280px;}
		#year2001{top: 3530px; left: 380px;}
		#year2002{top: 3600px; left: 420px;}
		#year2003{top: 3670px; left: 430px;}
		#year2007{top: 3760px; left: 430px;}
		#year2009{top: 3830px; left: 430px;}
		#year2010{top: 3900px; left: 430px;}
		#year2011{top: 3970px; left: 430px;}
		#year2012{top: 4050px; left: 430px;}
		#year2013{top: 4120px; left: 430px;}
		#year2016{top: 4190px; left: 430px;}
		#year2017{top: 4280px; left: 430px;}
		#year2018{top: 4350px; left: 430px;}
		.english #year1986{top:3820px;left:500px;}
		.english #year1990{top:4020px;left:500px;}
		.english #year1998{top:4100px;left:500px;}
		.english #year2001{top:4180px;left:500px;}
		.english #year2003{top:4290px;left:500px;}
		.english #year2010{top:4420px;left:500px;}
		.english #year2011{top:4520px;left:500px;}

		#period5{ top: 4540px; left: 5%; text-align: center;}
}

@media (min-width:769px) and (max-width:1158px){
.chronology{background: url(history/img/history-01.png); background-size: contain; background-repeat: no-repeat;min-height: 5374px;}
	#bgRoad img{ max-width: inherit; display:none;}
	.boxIn{ position:static;}
	.yearBox{ background-color:rgba(255,255,255,0.2);padding: 1em;position:relative;margin-bottom:10px;box-sizing: border-box;}
		.img {float: right; margin-left: 1em; }

		#year1918{margin-left:1%;}
		#year1919{margin-left:2%;}
		#year1923{margin-left:10%;}
		#year1924{margin-left:30%;}
		#year1930{margin-left:32%;}
		#year1932{margin-left:35%;}
		#year1934{margin-left:32%;}
		#year1937{margin-left:30%;}
		#year1939{margin-left:30%;}
		#year1942{margin-left:35%;}
		#year1945{margin-left:40%;}

		#period2{margin-left:10%;}

		#year1946{margin-left:40%;}
		#year1947{margin-left:40%;}
		#year1948{margin-left:35%;}
		#year1949{margin-left:30%;}
		#year1950{margin-left:25%;}
		#year1951{margin-left:20%;}
		#year1954{margin-left:20%;}

		#period3{margin-left: 5%;}

		#year1959{margin-left:20%;}
		#year1961{margin-left:20%;}
		#year1962{margin-left:20%;}
		#year1968{margin-left:20%;}
		#year1971{margin-left:20%;}
		#year1972{margin-left:20%;}
		#year1973{margin-left:20%;}

		#period4{ margin-left: 5%;}

		#year1974{margin-left:25%;}
		#year1979{margin-left:35%;}
		#year1980{margin-left:40%;}
		#year1986{margin-left:40%;}
		#year1990{margin-left:40%;}
		#year1997{margin-left:40%;}
		#year1998{margin-left:40%;}
		#year2001{margin-left:40%;}
		#year2002{margin-left:40%;}
		#year2003{margin-left:40%;}
		#year2007{margin-left:40%;}
		#year2009{margin-left:40%;}
		#year2010{margin-left:40%;}
		#year2011{margin-left:40%;}
		#year2012{margin-left:40%;}
		#year2013{margin-left:40%;}
		#year2016{margin-left:40%;}
		#year2017{margin-left:40%;}
		#year2018{margin-left:40%;}

		#period5{margin-left: 5%; text-align: center;}	
	
}
@media (max-width:768px){
#history.english .content{padding-bottom: 300px;}
#history.english h2{font-size: 1rem;}

.vehicle{ max-width:30%}
	.vehicle02{ display:none;}
	.vehicle03{ display:none;}
	.vehicle04{ display:none;}
	.vehicle05{ display:none;}
	.vehicle06{ display:none;}
	.vehicle10{ display:none;}

.wave{ max-width:30%}

#history h1{padding: 20px 1em 0;}
#history h1 > span{font-size:1.5rem;}
.chronology{ width:100%;background: url(history/img/history-01.png); background-size: contain; background-repeat: no-repeat; height: 100%;}
	#bgRoad img{ display:none;}
	.box12{width: 94%; margin: 2em 3%; }
	.yearBox{ background-color:rgba(255,255,255,0.5);padding: 1em;margin:0 auto 10px;width: 94%;box-sizing: border-box;}
		.year{font-size: 1.5rem;}
}
@media (width:768px){
.box12,.yearBox{width: 80%; margin: 2em 0 2em 3%;}
	.img{ float:right; margin-left: 1em;}
}
@media (max-width:767px){
	.yearBox{ display:-webkit-box; display: -webkit-flex; display:-ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
		.img{-webkit-box-ordinal-group:3; -ms-flex-order:3; -webkit-order:3; order:3;margin: auto;}
		.year{-webkit-box-ordinal-group:1; -ms-flex-order:1; -webkit-order:1; order:1;}
		.list{-webkit-box-ordinal-group:2; -ms-flex-order:2; -webkit-order:2; order:2;}
}
@media (max-width:360px){
#history h1{ font-size:	10px;}
	.box12{ font-size:12px;margin: 1em 0;width: 100%; box-sizing: border-box;}
		#history h2{font-size: 14px; letter-spacing: -1px;}
	.yearBox{ width: 100%;}
		.img img {max-width: 150px;}
		.year { font-size: 1.3rem; }
}
/********************************************************
CREW
********************************************************/
#crew .content{position: relative; width: 100%; box-sizing: border-box; background:url(crew/img/pt.png) repeat #0e6eb8;}
	#titleband{ width:100%; background-color:#d3edf99e;}
		#crew h1{font-family: sans-serif, Helvetica, Arial;color: #056fb7; font-weight: 600; font-size:1rem; margin-bottom: 0;    padding: 60px 0 0 40px; line-height:0;}
		#crew h1:first-letter { font-weight:600; font-size:1.8rem; margin-right:3px;}
		#crew h1 > span{font-weight: 600; font-size:3rem;letter-spacing: -2px;}
	#contain2 { width: 90%; margin: auto; }
		#crew #intro{ margin: 20px auto; }
			#crew #intro p{ margin-top: -36px; font-size: 12px; }

#staffCircle{text-align: center; padding: 50px 0 100px; max-width:1040px; margin:auto;}
	#staffCircle div{position: relative;display:inline-block; vertical-align:bottom;}
		#staffCircle a{display:inline-block;}
		#staffCircle a:hover{-ms-filter: "alpha(opacity=80)"; /* IE 8,9 */ -moz-opacity:0.8; /* FF , Netscape */ opacity:0.8;}
		#staffCircle img{margin: auto; border: solid 10px #fff;-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;-moz-box-shadow: 0 0 0 10px rgba(216, 216, 216, .7); box-shadow: 0 0 0 15px rgba(216, 216, 216, .7);max-width: 180px;}
		#staffCircle .circleCopy{ width:200px; height:200px; display:table-cell; border: solid 10px #fff;-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;-moz-box-shadow: 0 0 0 10px rgba(216, 216, 216, .7); box-shadow: 0 0 0 15px rgba(216, 216, 216, .7);margin: auto; background-color:#FFFFFF; vertical-align:middle; color:#056fb7;line-height: 1.5; font-size: 1.2rem;    box-sizing: border-box;font-weight: 600;}
		#staffCircle .party{position: absolute; bottom:8%; left: 0; right: 0; margin: auto; background: rgba(0, 140, 206, .8); color: #FFFFFF; width:70%; height: 20%; font-size:12px; line-height:1.2;}
		#staffCircle .party.peColor{background: rgba(145, 0, 44, .8);}
		#staffCircle .party.osColor{background: rgba(0, 138, 131, .8);}
		#staffCircle .party.lgColor{background: rgba(0, 54, 134, .8);}
		#staffCircle a:hover .party{bottom:6%;}
			#staffCircle .party span{ position: absolute; top:50%; transform:translateY(-50%); left:0; right:0; margin:auto;}

@media (max-width:767px){ 
		#crew h1{padding: 20px 1em 0;}
		#crew h1 > span{font-size:1.5rem;}
		#crew #intro{width:100%;}
			#crew #intro p{ margin-top: -26px; }
#staffCircle div{width:49%;}
		#staffCircle a{max-width:165px;}
		#staffCircle img{ box-sizing:border-box;}
		#staffCircle .circleCopy{ width:165px; height:165px;font-size:14px;}
		#staffCircle .party{font-size:10px;}
}
@media (max-width:360px){ 
	#crew ,
	#crew .content{ overflow-x:hidden;}
	#staffCircle img{max-width: 150px; border: solid 5px #fff; -moz-box-shadow: 0 0 0 7px rgba(216, 216, 216, .7); box-shadow: 0 0 0 7px rgba(216, 216, 216, .7);}
		#staffCircle .circleCopy{ width:150px; height:150px; border: solid 5px #fff; -moz-box-shadow: 0 0 0 7px rgba(216, 216, 216, .7); box-shadow: 0 0 0 7px rgba(216, 216, 216, .7)}
}


/*スタッフ個別
**************************************/
#staffImg{position: relative; margin-top: 40px;}
	#staffImg img{width:100%; height:auto;}
	.circle { position: relative; background: rgba(10, 64, 144, 0.8);color:#FFFFFF; }
		.circleArea {font-size:12px;letter-spacing:1px;line-height: 1.4;}
			.decimal {color: #41699e; background-color: #fff; padding: 0; margin: 0 0 0 3px; width: 15px; height: 15px; line-height: 15px; text-align: center; display: inline-block; border-radius: 50%; vertical-align: middle; font-weight: 600;}
			.name{ font-size: 2em; font-weight: 600; display: block; margin: 5px 0 1rem; line-height:1;}
			.circleArea b{ font-size: 1.2em; font-weight: 600; display: block; margin: 0 0 10px; line-height:1;}

#crew article{ max-width: 980px; margin: 20px auto 80px; padding: 2rem; box-sizing: border-box;}
	#crew h2{ font-size: 1.4rem; font-weight: 600; margin: 0 0 1em; padding: 0 .5em 5px 0; letter-spacing: 1px; color: #056fb7;}
	#crew article p{ line-height:1.8; margin-bottom:2rem;}
	.imgArea{ margin:0 0 4rem;width:100%;}
		.imgArea span{ display:inline-block; margin:0 1rem;}
#crew h3{font-weight: 600; font-size:2rem;letter-spacing: -2px; text-align:center; margin-bottom:1em;    color: #056fb7;}
#staffList{text-align: center; font-size: 0; width: 100%; max-width: 1230px; margin: auto;}
	#staffList li{ display:inline-block;}
.hoverMask { overflow: hidden; position: relative; border-radius: 50%; }
	.hoverMask .caption { width: 100%; height: 100%; visibility: hidden; font-size: 130%; color: #fff; top: 0; left: 0; position: absolute; text-align: center; -webkit-transition: all 0.4s step-end; transition: all 0.4s step-end; }
	.hoverMask:hover .caption { visibility: visible; }
		.hoverMask .caption p { font-size: 14px; padding-top: 50%; color: #fff; opacity: 0; max-width: 100%; }
		.hoverMask:hover .caption p { opacity: 1; }
	.hoverMask .mask1,
	.hoverMask .mask2 { width: 100%; height: 50%; position: absolute; left: 0; background-color: rgba(0,0,0,0.4); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
	.hoverMask .mask1 { top: -50%; }
	.hoverMask:hover .mask1 { top: 0; }
	.hoverMask .mask2 { bottom: -50%; }
	.hoverMask:hover .mask2 { bottom: 0; }


@media (min-width:769px){
#crew article{border-left: 2px solid #056fb7;}
}
@media (min-width:736px){
	#staffImg > div{position: absolute; max-width: 980px; margin: auto; top:50%;left: 0; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform:translateY(-50%);}
	#RightBox{ text-align:right;}
	.circle { position: relative; display: inline-block; width: 250px; height: 250px; border-radius: 50%;}
		.circleArea { position: absolute; display: inline-block; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60%; margin: auto; text-align:center;}
	#staffList li{ margin:0 1rem 2rem;}
}
@media (max-width:768px) and (min-width:736px){
	#LeftBox{left: 5%;}
	#RightBox{right: 5%;}
	.imgArea{display:table;}
		.imgArea span{ display: table-cell; margin:0 0;}
}
@media (max-width:735px){
	#staffImg img{object-fit: cover;height: 300px; object-position: 100% 100%;}
	#staffImg.left0 img{object-position: 0% 100%;}
	#staffImg.left80 img{object-position: 80% 100%;}
	#staffImg.left90 img{object-position: 90% 100%;}
		.circleArea { padding:1rem 1.5rem; display:block;}
	#crew h2{line-height: 1.5;}
		.imgArea span{ margin:1rem 0;}
	#staffList li{margin: 0 1% 1rem; width: 23%;}
}
/********************************************************
ABOUT
********************************************************/
#about .content{position: relative; width: 100%; box-sizing: border-box; background:url(crew/img/pt.png) repeat;}
#titleband{ width:100%; background-color:#d3edf99e;}

#about h1{font-family: sans-serif, Helvetica, Arial;color: #056fb7; font-weight: 600; font-size:1rem; margin-bottom: 0;    padding: 60px 0 0 40px; line-height:0;}
#about h1:first-letter { font-weight:600; font-size:1.8rem; margin-right:3px;}
#about h1 > span{font-weight: 600; font-size:3rem;letter-spacing: -2px;}
@media (max-width:767px){ 
#about h1{padding: 20px 1em 0;}
#about h1 > span{font-size:1.5rem;}
}
/********************************************************
CHANNEL
********************************************************/
#channel {
    width: 80%;
    margin: auto;
    padding: 40px 0 100px;
}
#channel h2{
	font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1em;
    padding: 0 .5em 5px 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #056fb7;
}
div#videoArea {
    width: 100%;
}
div#videoArea video {
    width: 100%;
	height: auto;
}

#channel article{
	margin-bottom: 100px;
}
.caption p{
	display: inline-block;
	font-size: 0;
	margin: 0 1% 30px;
	max-width: 17%;
	text-align: center;
	vertical-align: top;
}
.caption p img{
	max-width: 100%;
	height: auto;
	margin-bottom: 8px;
	vertical-align: top;
}
.caption p a{
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width:767px){ 
.caption p{
	max-width: 30%;
}
.caption p a{
	font-size: 10px;
}
}
@media (min-width:770px){ 
	.thumb {
		max-width: 37%;
	}
	}
.thumb {
	width: 100%;
    /*background: url(img/thumbGallery.png) no-repeat;*/
	background-size: contain;
	position: relative;
    margin: 0;
    padding: 0;
    height: auto;
}
.thumb a {
    display: block;
}
.thumb span {
    background: url(img/img-play.png) no-repeat center center;
    display: block;
    height: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    text-indent: -9000px;
    width: 84px;
}
.thumb img {
    width: 100%;
    height: auto;
}
#overlay {
    background:#000000; 
    opacity: 0.8 ;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80) ;
    height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    z-index:100;
}

#lightbox{
    border:5px solid #fff;
    border-radius:4px; 
}

@media screen and (max-width:414px){
#lightbox{
	max-width: 90%;
	margin: auto;
	left: 0!important;
	right: 0;}
iframe {
	width: 100%;
	height: auto;
}
}
#lightbox > a {
    display:block; 
    font-size:45px!important;
    font-weight:bold;
    height:45px; 
    outline:none; 
    position:absolute; 
    font-family: arial, Helvetica,sans-serif;
    text-decoration: none ;
    top:-40px; 
    right:-20px; 
    width:30px;
}
#lightbox > a:hover{
    color:#c4c5c2;
}
#lightbox-inner{background:#fff;}