*{
	font-family: 'Mea Culpa', cursive;
}

.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
  margin:17% 0% 0% 0%; 
  font-weight:bold;
  font-size:25px;
}

.img1 {
  height:120px;
  width:170px;
  margin:2% 2% 1% 2%;
  border-width:5px;
  border-style:outset;
  border-color:black;
}

.section3 {
  padding: 10px;
  border: 3px solid black;
  height:330px;
  width:870px;
  margin-left:16%;
  margin-top:5%;
}

.div2 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
  margin:0% 2% 3% 0%; 
  font-weight:bold;
  font-size:25px;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
  margin:0% 80% 3% 0%; 
  font-weight:bold;
  font-size:25px;
}

.img2 {
  height:120px;
  width:170px;
  margin:2% 2% 2% 2%;
  border-width:5px;
  border-style:outset;
  border-color:black;
}

.section4 {
  padding: 10px;
  border: 3px solid black;
  clear: left;
   height:330px;
  width:870px;
  margin-left:16%;
}

.clearfix::after {
  content: "";
  clear: both;
   display: table;
}

.box {
  float: left;
  width: 26.5%;
  padding: 30px;
}

.img3 {
  height:250px;
  float: left;
  width:300px;
  margin:0% 0% 0% 0%;
  border-width:15px;
  border-style:outset;
  border-color:black;
}

.section1{
	font-size:30px;
	line-height: 20px;
	border-style:dotted;
	border-width:10px;
	border-color:black;
	padding-left:3%;
	padding-top:3%;
	background-image:url("Image/8.png");
	background-repeat:no-repeat;
	background-attachment:scroll;		/*scroll, fixed*/
	background-size:cover;
	color:white;
	background-position:center;	
	counter-reset: section;
	font-weight:bold;
	margin-top:5%;
}

p::before {
   counter-increment: section;
  content: " " counter(section) ". ";
}

				.A{
					color:green;
					/*font-size:20px;*/
					display:block;	
					float:left;
					font-family: 'Mea Culpa', cursive;
					font-weight:bold;
				}
				.B{
					height:220px;
					width:500px;
					border-radius:30px;
					border:5px solid black;
					margin:20% 0% 0% 0%;
					background-color:white;
					padding-bottom:-20%;;
				}
				.C{
					height:150px;
					width:150px;
					padding:18% 0% 0% 0%;
					float:left;
					clear:fixed;
				}
				.D{
					display:none;
					margin:-35% 0% 30% 32%;
					float:left;
				}
				.B:hover .D{
					display:block;
				}
				.E{
					float:left;
					margin:0% 0% 0% 6%;
				}
				
.b1{
	 line-height: 1cm;
	 font-size:0.5cm;
}

.b2{
	  line-height: 10mm;
	   font-size: 5mm;
}

.b3{
	 line-height: 0.4in;
	   font-size: 0.2in;
}

.b4{
	line-height: 25pt;
	 font-size: 15pt;
}

.b5{
	  line-height: 2pc;
	   font-size: 1.5pc;
}

.b6{
	  line-height: 2em;
	    font-size: 1em;
}

.b7{
	 font-size: 5ex;
}

.b8{
	 font-size: 2ch;
}

.b9{
	font-size: 1.5rem;
}

.b10{
	 font-size: 2vw;
}

.b11{
	font-size: 5vh;
}

.b12{
	  font-size: 5vmin;
}

.b13{
	  font-size: 5vmin;
}

.b14{
	  font-size: 150%;
}

				.A1{
					color:red;
					/*font-size:20px;*/
					display:block;	
					float:right;
					font-family: 'Mea Culpa', cursive;
					font-weight:bold;
				}
	
.section6{
	font-size:25px;
	margin-top:5%;
	margin-bottom:10%;
}

			#myid {
				background-color: skyblue ;
			}

			.myclass {
			  background-color: lightgray ;
			}

			 strong{
			  background-color: pink !important;
			}
			
.Calc{
	height:110px;
	border-style:dotted;
	border-width:7px;
	border-color:skyblue;
	margin-bottom:3%;
	float:left;
	width: calc(100% - 100px);
}

.Max{
	height:110px;
	border-style:dotted;
	border-width:7px;
	border-color:lightgrey;
	margin-bottom:3%;
	float:left;
	width: max(70%, 300px);
}
.Min{
	height:110px;
	border-style:dotted;
	border-width:7px;
	border-color:pink;
	margin-bottom:10%;
	float:left;
	 width: min(70%, 900px);
}

.Story{
	margin-bottom:10%;
	width:1040px;
	float:left;
}

.Story2 {
  float: left;
  width:100px;  
  word-wrap: break-word;
  border: 3px solid #73AD21;
  margin:0% 80% 3% 0%; 
  font-weight:bold;
  font-size:25px;
}

h1.Storytitle{
	 white-space: nowrap;
	 overflow: hidden;
}

.Storystart1{
	text-overflow: ellipsis;
}

.Storystart2{
	text-overflow: clip;
}

h1.Storytitle:hover{
	overflow: visible; 
}

.keep-all{
	word-break: keep-all;
	height:660px;
	float:left;
	width:200px;
	margin-right:2%;
	border: 3px solid #73AD21;
}

.break-all{
	word-break: break-all;
	height:500px;
	width:200px;
	float:left;
	margin-right:2%;
	border: 3px solid #73AD21;
	color:#73AD21;
	box-shadow: 0px 0px 30px currentcolor;
	border: 5px solid currentcolor;
}

.horizontal-tb{
	writing-mode: horizontal-tb; 
	margin-top:4%;
	border: 3px solid #73AD21;
	margin-left:44%;
}

.vertical-rl{
	writing-mode: vertical-rl; 
	border: 3px solid #73AD21;
	margin-left:20%;
	background-color: transparent;
}

b {
  border: inherit;
}

.img4{
	height:200px;
	width:300px;
}

.div4{
	height:130px;
	width:280px;
	margin-top:2%;
	border: 3px solid #73AD21;
	padding-left:3%;
	
}

.max{
	font-size:32px;
	font-weight:bold;
}

.img5{
	height:200px;
	width:300px;
}

.div5{
	height:130px;
	max-width:300px;
	margin-top:2%;
	border: 3px solid #73AD21;
}

.img6{
	height:400px;
	width:300px;
	margin-top:5%;
}

.div6{
	height:130px;
	width:280px;
	margin-top:2%;
	border: 3px solid #73AD21;
	padding-left:3%;
	margin-bottom:30%;
}

.max{
	font-size:32px;
	font-weight:bold;
}

.img7{
	height:400px;
	width:300px;
	margin-top:5%;
}

.div7{
	max-height:130px;
	width:300px;
	margin-top:2%;
	border: 3px solid #73AD21;
	margin-bottom:30%;
}