<style type="text/css">

{} /*I dont know why we need this {} to make the css work, but it worked.  If I remove this {}, the #immediately after this line will not work but the # second after this line will.  weird*/

	body {
		
		background-image:linear-gradient(to bottom, white, grey);
		
	}


	#subhtml-body-frame-1 {
		
		width:93%;
		height:100% auto;
		background-color:none;
		font-size: 22px;
		padding: 1% 3.5% 1% 3.5%;
		
	}
	
	#subhtml-body-frame-2 {
		
		width:93%;
		height:100% auto;
		background-color:none;
		font-size: 22px;
		padding: 1% 3.5% 3% 3.5%;
		
	}
	
	.subhtml-body-head {
		
		font-size:26px;
		font-weight:bold;
		width:100%;
		height:5%;
		float:left;
		position:relative;
		padding-top: 1.5%;
		padding-bottom:3%;
		
	}
	
	.subhtml-body-head-1 {
		
		font-size:20px;
		font-weight:light;
		width:100%;
		height:5%;
		float:left;
		position:relative;
		padding-top: 5%;
		padding-bottom:1.5%;
		
	}
	
	.subhtml-body-head-3 {
		
		font-size:20px;
		font-weight:light;
		width:100%;
		height:5%;
		float:left;
		position:relative;
		padding-top: 5%;
		padding-bottom:1.5%;
		
	}
	
	.subhtml-body-subframe {
		
		width:32%;
		height:35%;
		background-color:white;
		float:left;
		position:relative;
		margin:0.5% 0.5% 0.5% 0.5%;
		
	}
	
	
	.subhtml-body-subframe-1 {
		
		width:32%;
		height:35%;
		background-color:white;
		float:left;
		position:relative;
		margin:0.5% 0.5% 0.5% 0.5%;
		
	}
	
	.subhtml-body-fullframe {
		
		width:100%;
		height:60%;
		background-color:white;
		float:left;
		position:relative;
		margin:0.5% 0% 0.5% 0%;
		
	}
	
	.subhtml-body-fullframe-1 {
		
		width:93%;
		height:60% auto;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-fullframe-2 {
		
		width:93%;
		height:60% auto;
		background-color:#a82121;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-fullframe-3 {
		
		width:93%;
		height:60% auto;
		background-color:#a82121;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-leftframe {
		
		width:93%;
		height:50% auto;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-rightframe {
		
		width:30%;
		height:50%;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 0% 0.5% 0%;
		
	}
	
	.subhtml-body-leftframe-1 {
		
		width:30%;
		height:50%;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 0% 0.5% 0%;
		
	}
	
	.subhtml-body-leftframe-2 {
		
		width:93%;
		height:50% auto;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 3.5% 3% 3.5%;
		
	}
	
	.subhtml-body-leftframe-3 {
		
		width:93%;
		height:50% auto;
		background-color:#a82121;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-leftframe-4 {
		
		width:93%;
		height:50% auto;
		background-color:#a82121;
		float:left;
		position:relative;
		margin:0.5% 3.5% 3% 3.5%;
		
	}
	
	.subhtml-body-rightframe-1 {
		
		width:93%;
		height:50% auto;
		background-color:#283174;
		float:left;
		position:relative;
		margin:0.5% 3.5% 0.5% 3.5%;
		
	}
	
	.subhtml-body-photo {
		
		width:80%;
		height:50%;
		margin: 20% 10% 10%;
		
	}
	
	.subhtml-body-photo-std {
		
		width:80%;
		height:70%;
		margin: 15% 10% 10% 10%;
		
	}
	
	.subhtml-body-photo-1 {
		
		width:60%;
		height:70%;
		margin: 10% 20% 10%;
		
	}
	
	.subhtml-text {
		
		background-color:#b52020;
		color:white;
		text-align:center;
		font-size:18px;
		font-weight:bolder;
		
	}
	
	.subhtml-text-1 {
		
		background-color:#151cd8;
		color:white;
		text-align:center;
		font-size:18px;
		font-weight:bolder;
		
	}
	
	.cap-text {
		
		font-weight:lighter;
		color:#b52020;
		text-decoration:underline;
		
	}
	
	.cap-text-2 {
		
		font-weight:lighter;
		color:#151cd8;
		text-decoration:underline;
		
	}
	
	.subhtml-msg {
		
		max-width:80%;
		max-height:89% auto;
		text-align:justify;
		font-size:16px;
		position:relative;
		padding: 5% 10% 8% 10%;
		
	}
	
	.subhtml-body-subframe-text {
		
		width:32%;
		height:40% auto;
		background-color:white;
		float:left;
		position:relative;
		margin:0.5% 0.5% 0.5% 0.5%;
		
	}
	
	.subhtml-body-subframe-text-1 {
		
		width:32%;
		height:40% vw;
		background-color:white;
		float:left;
		position:relative;
		margin:0.5% 0.5% 3% 0.5%;
		
	}
	
	.whatsapp {
		
		
		z-index:12;
		
	}
	
/*	#cloud-logo {
		
		width: 13%;
		opacity:50%;
		right:-3%;
		position:fixed;
		z-index:11;
		margin: 30% 0% 0% 10%; */
		
	}
	
	a.cloudy:hover {
		
		text-shadow:2px 2px blue;
		
		
	}
	
	.spacing {
		
		height:3%;
		background-color:none;
		width:100%;
		float:left;
		position:relative;
		
	}
	
	
	.sub-full-photo {
		
		width:100%;
		height:100%;
		float:left;
		position:relative;
		
	}
	
	.sub-full-photo-2 {
		
		width:30%;
		height:50%;
		float:right;
		margin-left:5%;
		
		
	}
	
	.sub-full-photo-3 {
		
		width:30%;
		height:50%;
		float:left;
		margin-right:5%;
		
		
	}
	
	.sub-full-photo-4 {
		
		width:35%;
		height:50%;
		float:left;
		margin-right:5%;
		
		
	}
	
	
	.description {
		
		color:white;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:3% 10% 3% 10%;
		
	}
	
	.description-2 {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:3% 3% 3% 3%;
		
	}
	
		.description-2A {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:3% 3% 0% 3%;
		
	}
	
	.description-3 {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:18px;
		text-align:justify;
		padding:0.5% 3% 0.5% 3%;
		
	}
	
	.description-4 {
		
		color:white;
		width:80%;
		font-weight:normal;
		font-size:18px;
		text-align:justify;
		padding:3% 3% 2% 3%;
		
	}
	
	.description-5 {
		
		color:white;
		width:90%;
		font-weight:normal;
		font-size:18px;
		text-align:justify;
		padding:3% 3% 2% 3%;
		
	}
	
	.description-6 {
		
		color:white;
		width:90%;
		font-weight:normal;
		font-size:18px;
		text-align:justify;
		padding:2.5% 3% 2% 3%;
		
	}
	
	.description-7 {
		
		color:white;
		width:93%;
		float:left;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:0% 3% 3% 3%;
		
	}
	
	.description-8 {
		
		color:white;
		width:50%;
		float:left;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:0% 3% 3% 3%;
		margin: 0 22% 0 22%;
		
	}
	
	.description-9 {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:3% 3% 0% 3%;
		
	}
	
	.description-10 {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:0% 3% 0% 3%;
		
	}
	
	.description-11 {
		
		color:white;
		width:93%;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:0% 14.5% 0% 14.5%;
		
	}
	
	.description-12 {
		
		color:white;
		width:50%;
		float:center;
		font-weight:normal;
		font-size:16px;
		text-align:center;
		padding:0% 13% 3% 13%;
		
	}
	
	#bracket {
		
		background-color:purple;
		width:12%;
		padding-left:0.5%;
		padding-right:0.5%;
		border:2px yellow solid;
		
	}
	
	.small-pic-left {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 1% 1.5% 3%;
		
	}
	
	.small-pic-centre {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 1% 1.5% 1%;
		
	}
	
	.small-pic-right {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 3% 1.5% 1%;
		
	}
	
	.small-pic-left-1 {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 1% 1.5% 14.5%;
		
	}
	
	.small-pic-centre-1 {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 1% 1.5% 1%;
		
	}
	
	.small-pic-right-1 {
		
		float:left;
		position:relative;
		width:22%;
		height:37%;
		margin: 2% 14.5% 1.5% 1%;
		
	}
	
	
	.text-para2-left {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:3%;
		margin-right:1%;
		margin-bottom:3%;
		
	}
	
	.text-para2-centre {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:1%;
		margin-right:1%;
		margin-bottom:3%;
		
	}
	
	.text-para2-right {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:1%;
		margin-right:3%;
		margin-bottom:3%;
		
	}

	.text-para2-left-1 {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:14.5%;
		margin-right:1%;
		margin-bottom:3%;
		
	}
	
	.text-para2-centre-1 {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:1%;
		margin-right:1%;
		margin-bottom:3%;
		
	}
	
	.text-para2-right-1 {
		
		font-weight:normal;
		font-size:16px;
		float:left;
		position:relative;
		width:22%;
		height:auto;
		margin-left:1%;
		margin-right:14.5%;
		margin-bottom:3%;
		
	}	
	
	.www {
		
		width: 15%;
		height:22.5%;
		position: relative;
		padding: 1% 1% 0% 1%;
		
	}
	
	.www-box {
		
		background-color:none;
		font-weight:bold;
		width:13%;
		height:2%;
		position:relative;
		float:left;
		margin: 0% 1% 1.5% 9%;
		
	}
	
	.www-box-mid {
		
		background-color:none;
		font-weight:bold;
		width:13%;
		height:2%;
		position:relative;
		float:left;
		margin: 0% 1.5% 1.5% 3%;
		
	}
	
	.www-box-last {
		
		background-color:none;
		font-weight:bold;
		width:13%;
		height:2%;
		position:relative;
		float:left;
		margin: 0% 1.5% 1.5% 3.5%;
		
	}
	
	.dd-5c-image {
		
		float:left;
		position:relative;
		width:75%;
		margin:0% 12.5% 3% 12.5%;
		
	}
	
	.dd-2c-image {
		
		float:left;
		position:relative;
		width:55%;
		margin:0% 22.5% 3% 22.5%;
		
	}
	
	.dd-3c-image {
		
		float:left;
		position:relative;
		width:55%;
		margin:0% 22.5% 3% 22.5%;
		
	}
	
	.dd-text {
		
		background-color:#701717;
		width:100%;
		color:white;
		font-weight:normal;
		font-size:20px;
		text-align:center;
		position:relative;
		float:left;
		margin: 0% 0% 3% 0%;
		padding: 0.5% 0% 0.5% 0%;
		
	}
	
	.dd2-text {
		
		background-color:#701717;
		width:100%;
		color:white;
		font-weight:normal;
		font-size:20px;
		text-align:center;
		position:relative;
		float:left;
		margin: 5% 0% 3% 0%;
		padding: 0.5% 0% 0.5% 0%;
		
	}
	
	.dd3-text {
		
		background-color:#701717;
		width:100%;
		color:white;
		font-weight:normal;
		font-size:20px;
		text-align:center;
		position:relative;
		float:left;
		margin: 5% 0% 3% 0%;
		padding: 0.5% 0% 0.5% 0%;
		
	}
	
	.dd-table {
		
		color:white;	
		margin: 0 15% 0 15%;
		border: 1px black solid;
		
	}
	
	.dd-table-end {
		
		color:white;	
		margin: 0 15% 5% 15%;
		border: 1px black solid;
		
	}
	
	.dd-table-1c {
		
		width:99%;	
		float:left;
		position:relative;
		border: 1px black solid;
		background-color:#701717;
		
	}
	
	.dd-table-fc {
		
		width:1%;
		border: 1px black solid;
		background-color:#701717;
		
	}
	
	.dd-table-1c-data {
		
		font-weight:normal;
		width:99%;	
		text-align:left;
		text-indent:3%;
		float:left;
		position:relative;
		border: 1px black solid;
		
	}
	
	.dd-table-fc-data {
		
		width:1%;
		border: 1px black solid;
		
	}
	
	.special-space {
		
		color: #A82121;
		
	}
	
	.main-box-0 {
		
		width:50%;
		background-color:#5279e5;
		height: 100%;
		float:left;
		position:relative;
		
	}
	
	.main-box-1 {
		
		width:50%;
		background-color:gold;
		height: 100%;
		float:left;
		position:relative;
		
	}
	
	.main-box-0-1 {
		
		width:50%;
		height: 100%;
		background-color:#bf2222;
		float:left;
		position:relative;
		
	}
	
	.main-box-1-1 {
		
		width:50%;
		background-color:gold;
		height: 100%;
		float:left;
		position:relative;
		
	}
	
	.main-box-text-header {
		
		font-size:100%;
		text-align:center;
		margin: 5% 5% 5% 5%;
		
	}
	
	.main-box-text {
		
		font-size:80%;
		text-align:center;
		margin: 5% 5% 5% 5%;
		
	}
	
	th.th-gap {
		
		font-size:bolder;
		
	}
	
	th.gap {
		
		font-size:light;
		
	}
	
	.paragraph {
		
		margin: 0 3% 0% 3%;
		text-align:center;
		color:black;
		
	}
	
	.final {
		
		text-align:center;
		font-size: 200%;
		font-weight:bolder;
		
	}
	
	.final-0 {
		
		text-align:center;
		font-size: 200%;
		font-weight:bolder;
		margin: 10% 0 10% 0;
		
	}


	
	
	/* from the web css w3s for glowing effect */
	
	.glow {
	  font-size: 18px;
	  color: #002DB3;
	  font-weight:bolder;
	  text-align: center;
	  margin: 32.5% -1% 0% 10%;
	  position:fixed;
	  right:3%;
	  -webkit-animation: glow 1s ease-in-out infinite alternate;
	  -moz-animation: glow 1s ease-in-out infinite alternate;
	  animation: glow 1s ease-in-out infinite alternate;
	  border:1px solid red;
	  z-index:12;
	}

	@-webkit-keyframes glow {
	  from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	  }
	  
	  to {
		text-shadow: 0 0 20px blue, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 100px #ff4da6;
	  }

		/* END from the web css w3s for glowing effect */
		

	
	
</style>