:root {
  --the_width: 800px; /*var(--the_width)*/
}


.head1 {
    color: #003e57;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 10px;
    text-align: center;
}

.section1 {
  text-align: center;
  display: block;
  width: 80%;
  padding-top: 20px;
  padding-bottom: 50px;
  margin: auto;
}


.section1 .cross {
  width: 16px;
}

.section1 .kml {
  max-width: 100%;
}

p {
  
  text-align: center;
  font-size: 64px;
}

#media-bg {
  position:relative;
}

.video-js {
	/*position: absolute;*/
	margin: 0 auto;
}

.video-list {
  width: 95%;
  margin: auto;
  text-align:center;

  display: flex;
  display: -webkit-flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.video-list a:hover {
  border: 2px blue solid;
}

.video-list img {
  max-width: 100%;
}

#video-container-bg {
  display: none;
  
  position:absolute;
  top: 0px;
  left: 0px;
  margin: auto;
  position: fixed;
  overflow: hidden;

  width: 100%;
	height: 100%;
  z-index: 99;
  
  background: rgba(241,210,194, 0.9);
/*
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
*/
  //learn lightbox by: https://tympanus.net/Tutorials/CSS3Lightbox/
}

#video-container-bg a.video-close{
	background: rgba(27,54,81,0.8);
	z-index: 1001;
	color: #fff;
	position: absolute;
	top: 0px;
	
	font-size: 15px;
//	line-height: 26px;
	text-align: center;
	width: 50px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 10;
	filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

.video-container {
  width: 98%;
  margin: auto;

  display: flex;
  display: -webkit-flex;
  overflow: hidden;
  
}

.subtitle {

  border: 1px black solid;
  overflow-y: scroll;
  
  text-align: center;
  //overflow: hidden;
  
  font-family: Arial,Helvetica,sans-serif;
  scrollbar-width: thin;  /*for Firefox. auto/thin/none;*/
  scrollbar-color: blue;  /*auto/dark/light/<color>*/

  font-size: 24px;
}

  
@media (orientation: landscape), (min-width: 800px) {
  body {
    background-color: yellowgreen;
  }
  
  
  .video-list a {
    display: inherit;
    width: 49%;
    border: 2px white solid;
    padding: 1px;
  }


  
  .video-container {
    height: 100vh;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    //border: 1px blue solid;
  }
  
  .video-bg {
    width: 40%;
    background: rgba(195,195,240, 0.68);
  }
  
  .my-player {
    width: 100%;
  }
  
  .subtitle {
    width: 60%;
    height: 100%;
    //padding-bottom: 28%;  /*if the padding value is a percentage, it means the height will be the 30% of the it's parent's width*/
  }
  
  #video-container-bg a.video-close{
    left: 38%;
  }
    
  /*
  .my-player.separate-left {  //There's no space between two classes, 这表示同时有这两个classes时选中。 如果有空格，表示在第一个class的内部有第二个class的选中
    width: 40%;
  }
  .subtitle.separate-left {
    width: 60%;
    height: 0;
    padding-bottom: 22.5%;
  }
  
  .my-player.separate-right {
    width: 60%;
  }
  .subtitle.separate-right {
    width: 40%;
    height: 0;
    padding-bottom: 33.7%;
  }
  */
}



@media (orientation: portrait), (max-width: 799px) {
  body {
    background-color: lightgreen;
  }
  
  
  .video-list a {
    display: inherit;
    width: 100%;
    border: 2px white solid;
    padding: 2px;
  }

  .video-container {
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    height: 100%;
  }
  
  .video-bg {
    width: 100%;
  }
  
  .my-player {
    width: 100%;
  }

  .subtitle {
    width: 100%;
    height: 100%;
    //margin: 5px 0;
    padding-top: 50px;
  }
  
  #video-container-bg a.video-close{
    left: 92%;
  }
}



.subtitle a {
  text-decoration: none;
}
.subtitle a:visited {
  text-decoration: none;
}

.currentsub {
  text-shadow: 5px 1px 22px red;
  font-weight: bold;
}



.subtitle div {
  padding: 10px;
}

/*scrollbar setting for Chrome*/
.subtitle::-webkit-scrollbar {
  width: 8px;
  background: #f0f0f0c0;
}

.subtitle::-webkit-scrollbar-thumb {
  background: #c1c1c1f0;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.subtitle::-webkit-scrollbar-corner {
  background: #000;
}