@charset "UTF-8";
/* CSS Document */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html {font-size: 16px; text-align: center;}

body {
  font-family: verdana;
  max-width: 1020px;
	margin: 0 auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background-color: #0c98a4;
	display: inline-block;
	text-align: left;
}

.yang-logo {
  width: 25%;
  text-align: left;
  /*border: 1px dashed #cacaca;*/
  padding: 10px;
  padding-bottom: 20%;
  float: left;
  display: inline-block;
}
.yang-logo img {
  width: 100%;
  display: block;
}

.yang-logo-secondary {
  width: 20%;
  text-align: left;
  /*border: 1px dashed #cacaca;*/
  padding: 10px;
  padding-bottom: 10%;
  float: left;
  display: inline-block;
}

.yang-header, .yang-header-secondary, .yang-header-movements, .yang-header-contact, .yang-header-weapons, .yang-header-products {
  width: 100%;
  text-align: left;
  /*border: 1px dashed #cacaca;*/
  display: block;
  margin-bottom: 0;
  overflow: hidden;
}
.yang-header h2, .yang-header-secondary h2, .yang-header-movements h2, .yang-header-contact h2, .yang-header-weapons h2, .yang-header-products h2 {
  margin: 20px;
  border: 1px dashed #cacaca;
  display: inline-block;
  font-size: 19px;
  color:#fff;
}

.yang-header {
  background-image: url(images/yang-header-bknd-image.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0px;
}
.yang-header-secondary {
  background-image: url(images/yang-header-bknd-image-class.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0px;
}
.yang-header-movements {
  background-image: url(images/yang-header-bknd-image-movements.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0px;
}
.yang-header-contact {
  background-image: url("images/yang-header-bknd-image-connect.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0px;
	padding-bottom: 7%;
}
.yang-header-weapons {
	background: rgb(6,54,74);
  background: -moz-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
  background: linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06364a",endColorstr="#06364a",GradientType=1);
	/*background-image: url("images/weapons-animals.png");
  background-repeat: no-repeat;*/
	/*background-size: 52%; background-position: 58%;*/
}
.yang-header-products {
  background-image: url("images/china-mountain.png");
  background-repeat: no-repeat;
	/*height: 350px;*/ /*background-color: #ffb618;*/ background-color: #94eff7; background-size: 100%; background-position: 0 0;
}
.yang-logo-secondary img {
  width: 100%;
  display: block;
}

.yang-content {
  padding:20px;
  /*border-top: 12px solid #ad1919;*/
  /*border-bottom: 14px solid #ad1919;*/
  display: inline-block;
  overflow: hidden;
	background-color: #fff;
	margin-bottom: -3px;
}
.yang-content h1 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.4rem;
	line-height: 1.4;
  color:#00698C;
}
.yang-content h2 {
  font-size: 1.3rem;
	line-height: 1.3;
  color: #ad1919;
}
.yang-content h3 {
  font-size: 1.1rem;
	line-height: 1.1;
  color: #000;
}
.yang-content p {
  font-size: 1rem;
	line-height: 1.2;
}
.yang-content ul li, .yang-content ol li {
  font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 0.9rem;
}
.yang-content .floatleft {
  float: left;
  margin: 4px 20px 10px 0;
	width: 300px;
	border: 1px solid #cacaca;
}
.yang-content .floatright {
  float: right;
  margin: 4px 0 10px 20px;
	width: 300px;
}

.floatleft.smallImage, .floatright.smallImage {
  width: 150px;
}

.yang-footer {
  background-color:#003d56;
  color:#fff;
  padding:10px 3% 20px 3%;
  background: rgb(0,62,83);
  background: linear-gradient(180deg, rgba(0,62,83,1) 0%, rgba(0,105,140,1) 40%, rgba(0,105,140,1) 60%, rgba(0,62,83,1) 100%);
	display: inline-block;
}
.yang-footer p {
  font-size: 0.9rem;
	line-height: 1.0;
}
.yang-footer a, .yang-footer a:visited, .yang-footer a:active {
  color: #fff;
}
.yang-footer img {
  width: 15%;
	float: right;
	margin: 0 0 10px 20px;
}

table.daoTable {
  border: 1px solid #000;
	border-top: none;
	width: 100%;
	padding: 5px;
	font-size: 0.8em;
	background-color: #00698c;
	margin-top: -5px;
}
.daoTable td {
  padding: 2px;
}
.daoTable tr {
  background-color: #fff;
}
.DaoJian {
  display: block;
	float: right;
	color: #ffc832;
	font-size: 4.7em;
	font-weight: bold;
  vertical-align: baseline;
	margin: 20px 30px 30px 60px;
}
.yang-menu {
  /*background-color:#ad1919;*/
  background-color:#00698C;
  padding:5px 5px 5px 0;
  vertical-align: middle;
  border-top:2px solid #003e53;
  border-bottom:2px solid #003e53;
  background: rgb(0,62,83);
  background: linear-gradient(180deg, rgba(0,62,83,1) 0%, rgba(0,105,140,1) 40%, rgba(0,105,140,1) 60%, rgba(0,62,83,1) 100%);
 }
.yang-menu span {
  margin-left: 2%;
}
.yang-menu span a {
  color:#fff;
  text-decoration: none;
	font-size: 1.0rem;
	line-height: 1.7;
}
.yang-menu span a:hover {
  color:#ffcf18;
}
.goldRibbon {
  height: 15px;
	background-color: #000;
	background-image: url("images/gold-ribbon.png");
	background-repeat: repeat-x;
	background-size: 15px;
}
.redRibbon {
  height: 15px;
	background-color: #000;
	background-image: url("images/red-ribbon.png");
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 15px;
}

.yang-content a.button {
color: antiquewhite;
background-color: #ad1919;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
text-decoration: none;
display: inline-block;
padding: 5px 8px 5px 8px;
border-radius: 5px;
font-size: 1.0rem;
line-height: 1.4;
margin-top: 7px
}

.yang-content  a.button:hover {
text-decoration: none;
color: #fff;
background-color: #000;
}


.ad-section {
width: 100%;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
border-radius: 5px;
padding: 0 20px 10px 20px;
background-color: #003d56;
color: #fff;
margin-bottom: 10px;
display: inline-block;
}

.ad-section h3 {color: antiquewhite; text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.9);}

.ad-section p {
font-size: 1.0rem;
line-height: 1.3;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.ad-section .ad-image-wrap {
padding: 10px;
border: 1px solid #000;
background: #fff;
border-radius: 5px;
float: right;
width: 170px;
margin: 20px 0 20px 20px;
}

.ad-section .ad-image-wrap img {
width: 100%;
margin-bottom: -2px;
}

.ad-section img.ad-image-logo {
float: left;
margin: 0 10px 10px 0;
width: 80px;
}

.yang-content .ad-section a.button {
color: antiquewhite;
/*background-color: #06364a;*/
/*border: 2px solid #fff;*/
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
text-decoration: none;
display: inline-block;
padding: 5px 8px 5px 8px;
border-radius: 5px;
font-size: 1.0rem;
line-height: 1.4;
margin-top: 7px;
background-color: #004662;
}

.yang-content .ad-section a.button:hover {
/*border: 2px solid lime;*/
text-decoration: none;
color: #fff;
background-color: #ad1919;
}



.ad-callout {
  background-color: #06364a; /* Primary color scheme */
  background: rgb(0,62,83);
  background: linear-gradient(180deg, rgba(0,62,83,1) 0%, rgba(0,105,140,1) 40%, rgba(0,105,140,1) 60%, rgba(0,62,83,1) 100%);
  color: white;
  padding: 10px 20px 0 20px;
  float: right;
  margin-left: 20px;
	margin-bottom: 20px;
  width: 190px; /* Adjust based on your layout */
  box-shadow: -4px 6px 14px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
	/*opacity: 0.8;*/
}

.ad-callout h2 {
  margin-top: 0;
	margin-bottom: 7px;
	font-size: 1.11rem;
	line-height: 1.3;
	color: #fff;
}

.ad-callout ul {
  list-style: none;
  padding: 0;
	margin-top: 0;
}

.ad-callout ul li {
  margin-bottom: 6px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ad-callout ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.ad-callout ul li a:hover,
.ad-callout ul li a:focus {
  color: #00aeef; /* Highlight color on hover */
}

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-left {
margin-top: -15px;
  width: 49%;
  /*border: 1px dashed #000;*/
  display: inline-block;
	padding: 20px 0 0 0;
  float: left;
}
.video-right {
  width: 49%;
  /*border: 1px dashed #000;*/
  display: inline-block;
	padding: 20px 0 0 0;
  float: right;
}

.halfvideoright {
width:48%;
float: right;
margin: 0 0 20px 20px;
border: 1px solid #00698C;
display: inline-block;
background-color: antiquewhite;
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.6);
border-radius: 5px;
overflow: hidden;
}

.halfvideoright iframe {
display: block;
}

p.vidCaption {
font-size: 0.9rem;
line-height: 1.0rem;
margin-left: 14px;
margin-right: 14px;
margin-top: 10px;
}

.connectContact {
border: 1px solid #cacaca;
padding: 20px;
border-radius: 5px;
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.6);
display: inline-block;
margin-bottom: 20px;
}

.connectContact h3 {
margin-top: 0;
color: #ad1919;
font-size: 1.1rem;
line-height: 1.2;
}

.connectContact p {
margin-top: 0;
color: #000;
font-size: 0.9rem;
line-height: 1.1;
}

.connectContact img {
float: right;
width: 300px;
margin: 0 0 0 20px;
border: 1px solid #cacaca;
border-radius: 5px;
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.6);
border-left: none;
border-bottom: none;
}

.connectContact a.button {
color: antiquewhite;
/*background-color: #06364a;*/
/*border: 2px solid #fff;*/
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
text-decoration: none;
display: inline-block;
padding: 5px 8px 5px 8px;
border-radius: 5px;
font-size: 1.0rem;
line-height: 1.3;
margin-top: 7px;
background-color: #00698C;
}

.connectContact a.button:hover {
/*border: 2px solid lime;*/
text-decoration: none;
color: #fff;
background-color: #ad1919;
}

.lineage-container {
    max-width: 100%;
}

.lineage-entry {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    align-items: flex-start; /* Align items to the start of the flex container */
		border: 1px solid #000;
		padding: 10px;
		border-radius: 5px;
		background-color: floralwhite;
}

.lineage-image {
    flex: 0 1 auto; /* flex-grow | flex-shrink | flex-basis */
    max-width: 110px; /* Maximum width of the image */
    width: 100%; /* Make width responsive */
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px;
    border: 1px solid #000;
    border-radius: 5px;
}

.lineage-text {
    flex: 1;
}

.lineage-text h3 {
    margin-top: 0;
		font-size: 1.0rem;
}

.lineage-text ul li {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
		
.lineage-text ul li ul li {
        font-size: 0.75rem;
        margin-bottom: 3px;
				margin-top: 8px;
    }
		
.lineage-connector {
    font-size: 1rem;
		display: block;
		text-align: center;
		width: 100%;
		margin-bottom: 0;
		margin-top: -3px;
}

.trainingWrap {
border: 1px solid #cacaca;
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 5px;
margin-bottom: 10px;
clear: both;
display: inline-block;
width: 100%;
}

.trainingWrap h4 {
margin-top: 0;
color: #00688b;
}

.trainingWrap ul {
margin-left: 0;
overflow: hidden;
}

.trainingWrap ul li {
margin-bottom: 6px;
}

.trainingWrap h4 a, .trainingWrap h4 a:visited {
color: #00688b;
}

.trainingWrap img {
display: inline-block;
overflow: hidden;
}






@media screen and (min-width: 0px) and (max-width: 780px) {

.ad-callout {
    position: relative;
    width: 100%;
		margin-left: 0;
		float: left;
}

}

 @media screen and (max-width: 768px) {
.lineage-table th, .lineage-table td {
    padding: 4px;
    font-size: smaller;
}
}

@media screen and (min-width: 0px) and (max-width: 679px) {

.DaoJian {
  display: none;
}

.video-left, .video-right, .halfvideoright {
  width: 100%;
	float: none;
	margin:0 auto;
}

.connectContact img {
float: none;
width: 100%;
box-shadow: none;
margin: 0;
margin-bottom: 15px;
}

.connectContact a.button {
font-size: 0.9rem;
}

/*.yang-header-weapons {
  display: none;
}*/

}


@media screen and (min-width: 0px) and (max-width: 500px) {

.yang-content .floatright {
  float: none;
  margin: 0;
	margin-top: 10px;
	width: 100%;
}

.yang-content .floatleft {
  float: none;
  margin: 0;
	margin-top: 10px;
	width: 100%;
}


}

@media (max-width: 480px) {
    .lineage-entry {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lineage-image {
        max-width: 50%;
        margin: 0 0 10px 0;
    }

    .lineage-text {
        order: -1;
    }

    .lineage-text ul {
        text-align: left; /* Ensure the list itself is aligned left for proper bullet display */
				list-style: disc;
    }

    .lineage-text ul li {
        width: 100%; /* Make each list item take full width of the container */
    }
}