html {
	min-width: 800px;
}

body {background: #e0f9f1;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTBmOWYxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjQlIiBzdG9wLWNvbG9yPSIjYjVjNmQwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZGVlY2VkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjYjVjNmQwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UwZjlmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #e0f9f1 0%, #b5c6d0 24%, #deeced 50%, #b5c6d0 75%, #e0f9f1 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e0f9f1), color-stop(24%,#b5c6d0), color-stop(50%,#deeced), color-stop(75%,#b5c6d0), color-stop(100%,#e0f9f1));
background: -webkit-linear-gradient(-45deg,  #e0f9f1 0%,#b5c6d0 24%,#deeced 50%,#b5c6d0 75%,#e0f9f1 100%);
background: -o-linear-gradient(-45deg,  #e0f9f1 0%,#b5c6d0 24%,#deeced 50%,#b5c6d0 75%,#e0f9f1 100%);
background: -ms-linear-gradient(-45deg,  #e0f9f1 0%,#b5c6d0 24%,#deeced 50%,#b5c6d0 75%,#e0f9f1 100%);
background: linear-gradient(135deg,  #e0f9f1 0%,#b5c6d0 24%,#deeced 50%,#b5c6d0 75%,#e0f9f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f9f1', endColorstr='#e0f9f1',GradientType=1 );

background-color: #e5eeff;
	background-attachment: fixed;
	background-repeat: no-repeat;
	display:block;
	width: 100%;
	height: 100%;
min-width: 800px;
}


.back1 {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
	min-width: 800px;
}

.TitleBar {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 50px;
	background: transparent;
	text-align: center;
}

.TButtons {
	position: relative;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	text-align: center;
}

.TButtons button {
	float: left;
	-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
	background:-moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:-ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf',GradientType=0);
	background-color:#63b8ee;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:30px;
	font-weight:bold;
	text-align: center;
	padding:5px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
	
}

.TButtons button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee));
	background:-moz-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-webkit-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-o-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:-ms-linear-gradient(top, #468ccf 5%, #63b8ee 100%);
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee',GradientType=0);
	background-color:#468ccf;
}
.TButtons button:active {
	position:relative;
	top:1px;
}


#content1 {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px;
	display: none;
	visibility: hidden;
 -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
    }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
    }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#content2 {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0px;
	display: none;
	visibility: hidden;
	 -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}

#button3 {
	width: 450px;
	position: relative;
	visibility: visible;
	-webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}

#button4 {
	width: 225px;
	position: relative;
	visibility: hidden;
	display: none;
	-webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}

#button5 {
	width: 225px;
	position: relative;
	visibility: hidden;
	display: none;
	-webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}

.foot {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	text-align: center;
}

.main {
	position: absolute;
	top: 50px;
	left: 0px;
	right: 0px;
	bottom: 40px;
	background: transparent;
	z-index: 1;
	display: block;
	font-family: "Times New Roman", Georgia, Arial;
}
/** for intro **/
.Intro {
	position: absolute;
	top: 50px;
	left: 20px;
	right: 20px;
	bottom: 10px;
	min-width: 760px;
	text-align: center;
	display: inherit;
	visibility: inherit;
}

.words {
	position: relative;
	width: 100%;
	min-width: 760px;
	text-align: center;
	font-size: 64px;
	display: inherit;
	visibility: inherit;
}

.line {
	position: relative;
	width: 100%;
	height: 10px;
	background-color: red;
	display: inherit;
	visibility: inherit;
}

.words2 {
	position: relative;
	width: 100%;
	min-width: 760px;
	text-align: center;
	font-size: 36px;
	display: inherit;
	visibility: inherit;
}
/** for title on top and words below**/
.page1 {
	position: absolute;
	top: 0px;
	left: 20px;
	right: 20px;
	bottom: 10px;
	min-width: 760px;
	text-align: center;
	display: inherit;
	visibility: inherit;
}

.words3 {
	position: relative;
	width: 100%;
	min-width: 760px;
	text-align: center;
	font-size: 56px;
	display: inherit;
	visibility: inherit;
}

.line1 {
	position: relative;
	width: 100%;
	height: 10px;
	background-color: red;
	display: inherit;
	visibility: inherit;
}

.words4 {
	position: relative;
	width: 100%;
	min-width: 760px;
	text-align: left;
	font-size: 48px;
	display: inherit;
	visibility: inherit;
}

.words4a {
	text-align: left;
	font-size: 24px;
}

.words4b {
	text-align: left;
	font-size: 24px;
	border-style: solid;
    border-width: 15px;
	border-color: white;
}

/**references**/
.picWrap5 {
	position: absolute;
	width: 100%;
	top: 200px;
	right: 0px;
	min-width: 234px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
	text-align: center;
}

.pic5 {
	position: relative;
	width: 80%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	max-height: 600px;
}

/** for title on top with words and picture below**/
.page2 {
	position: absolute;
	top: 0px;
	left: 20px;
	right: 20px;
	bottom: 10px;
	min-width: 760px;
	text-align: center;
	display: inherit;
	visibility: inherit;
}

.wordWrap {
	position: absolute;
	width: 50%;
	top: 0px;
	left: 0px;
	min-width: 380px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.words5 {
	position: relative;
	width: 100%;
	min-width: 380px;
	margin: 0px;
	text-align: center;
	font-size: 48px;
	display: inherit;
	visibility: inherit;
}

.line2 {
	position: relative;
	width: 100%;
	height: 10px;
	left: 0px;
	background-color: red;
	display: inherit;
	visibility: inherit;
}

.words6 {
	position: relative;
	width: 100%;
	min-width: 380px;
	text-align: left;
	font-size: 24px;
	display: inherit;
	visibility: inherit;
}

.words6a {
	text-align: left;
	font-size: 24px;
}

.words6b {
	text-align: left;
	font-size: 24px;
}

.picWrap {
	position: absolute;
	width: 50%;
	top: 0px;
	right: 0px;
	min-width: 380px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.pic {
	position: relative;
	width: 100%;
	height: 100%;
	top: 40px;
	left: 40px;
	max-width: 500px;
	max-height: 600px;
}

/** for title on top with words and picture below line**/
.page3 {
	position: absolute;
	top: 0px;
	left: 20px;
	right: 20px;
	bottom: 10px;
	min-width: 760px;
	text-align: center;
	display: inherit;
	visibility: inherit;
}

.words7 {
	position: relative;
	width: 100%;
	min-width: 380px;
	margin: 0px;
	text-align: center;
	font-size: 48px;
	display: inherit;
	visibility: inherit;
}

.line3 {
	position: relative;
	width: 100%;
	height: 10px;
	left: 0px;
	background-color: red;
	display: inherit;
	visibility: inherit;
}

.wordWrap2 {
	position: absolute;
	width: 40%;
	top: 100px;
	left: 0px;
	min-width: 300px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.wordWrap3 {
	position: absolute;
	width: 50%;
	top: 100px;
	left: 0px;
	min-width: 380px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.wordWrap4 {
	position: absolute;
	width: 70%;
	top: 100px;
	left: 0px;
	min-width: 546px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.wordWrap3a {
	position: absolute;
	width: 50%;
	top: 200px;
	left: 0px;
	min-width: 380px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.words8 {
	position: relative;
	width: 100%;
	min-width: 300px;
	margin: 0px;
	text-align: center;
	font-size: 24px;
	display: inherit;
	visibility: inherit;
}

.words8a {
	position: relative;
	width: 100%;
	min-width: 300px;
	margin: 0px;
	text-align: left;
	font-size: 24px;
	display: inherit;
	visibility: inherit;
}

.words8b {
	position: relative;
	width: 100%;
	min-width: 380px;
	margin: 0px;
	text-align: left;
	font-size: 24px;
	display: inherit;
	visibility: inherit;
}

.picWrap2 {
	position: absolute;
	width: 60%;
	top: 100px;
	right: 0px;
	min-width: 460px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.picWrap3 {
	position: absolute;
	width: 50%;
	top: 100px;
	right: 0px;
	min-width: 380px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.picWrap4 {
	position: absolute;
	width: 30%;
	top: 100px;
	right: 0px;
	min-width: 234px;
	margin: 0px;
	display: inherit;
	visibility: inherit;
}

.pic2 {
	position: relative;
	width: 100%;
	height: 100%;
	top: 40px;
	left: 60px;
	max-width: 500px;
	max-height: 600px;
}

.pic3 {
	position: relative;
	width: 100%;
	height: 100%;
	top: 3px;
	left: 30px;
	max-width: 500px;
	max-height: 600px;
}