* {
	margin: 0px;
	padding: 0px;
}
body {
	margin: 0px;	
	/*width: 100%;*/
	height: 100%;
	overflow-x: hidden;
    background: linear-gradient(150deg, #e4f3f3 25%, rgba(0, 0, 0, 0) 0%), linear-gradient(110deg, #fbfdfd 70%, #d3ebeb 50%) no-repeat center center fixed;
    background-repeat: no-repeat;
}

#menu {
	background-color: #c1e3e3;
	/*padding-top: 5%;*/
/*	height: 100%;*/
	/*width: 100vw;*/
}
#menu li{
	font-size: 28px;
	line-height: 60px;
	text-align: center;
	font-family: 'Great Vibes', Helvetica, sans-serif;
	list-style-type: none;
	clear: both;
}
#menu a {
	font-size: 28px;
	text-decoration: none;
	color: #333333;
	font-family: 'Great Vibes', Helvetica, sans-serif;
}
#magic button {
	width:100px; 
	height:50px; 
	left:100px;
	margin-right: 5%;
	cursor: pointer;
	font-size: 1.5em;
	border-radius : 4px;
	padding: 5px;
}
button:hover {
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
#beginbutton {
	width: 200px;
	height: 80px;
	color: #fff;
	font-size: 20px;
  	background-color: #8ccbac;
  	border-color: #3c763d;
  	padding: 10px;
  	border-radius: 6px;
  	text-decoration: none;
}
#beginbutton:hover {
	box-shadow: 0 0 3px rgba(0, 0, 0, 1);
}
#beginbuttondiv {
	margin-top: 55px;
}
.zero p {
	margin: 30px;
}
#methodology {
	margin-top: 0px;
}
img {
	margin-top: 6px;
}

a, p, h2,  h6 {
	font-family: sans-serif;
	color: #333333;
	/*font-weight: 100;*/
}

li{
	font-family: sans-serif;
	color: #333333;
	/*font-weight: 100;*/
}
#abouttext a {
	color: #376969;
	font-size: 1em;
	font-family: sans-serif;
}
#abouttext h1 {
	line-height: 2;
	font-family: sans-serif;
    font-weight: bold;
}
#abouttext p {
	font-family: sans-serif;    
}
#abouttext li {
	font-family: sans-serif;
}
#abouttext {
    margin-right: 20px;
}
.title {
	font-family: 'Great Vibes', Helvetica, sans-serif;
	font-size: 7em;
	font-weight: 100;
	font-style: oblique;
	color: #c1e3e3;
	text-shadow: -2px -2px 0px rgba(255,255,255,0.3), 2px 2px 0px rgba(0,0,0,0.8);
}
h3 {
	font-family: 'Great Vibes', Helvetica, sans-serif;
	font-size: 32px;
	font-style: italic;
	color: #333333;
	margin: 0px 0px 20px 0px;
}
h6 {
	text-align: center;
	font-size: 1.5em;
}
/*a {
	font-size: 1em;
}*/
p, li {
	font-size: 1.2em;
	/*line-height: 1.2em;*/
}
li{
   padding:10px 0 10px 0; 
   list-style-type: none;
}
#recap {
	font-size: 9em;
	font-family: sans-serif;
}
#homemain {
	text-align: center;
	height: 100%;
}
#homemain p, a {
	font-size: 1.5em;
}
#homemain h2{
	font-size: 1.5em;
	margin-top: 30px;
}
#homemain h6 {
	font-size: 3em;
}
#abouttext
 {
    margin: 20px;
}
#homebody {
	padding-right: 45px;
	padding-bottom: 10%;
}
#homebody h2, h6 {
	text-align: center;
}
#lessonfinish {
	padding: 5% 9% 0% 5%;
}
#homebody p{
	padding-left: 20px;
}
#main{
/*	background: url("../image/background.png");*/
	width: 100%;
	padding: 3% 7% 7% 7%;
	/*display: inline-block;*/
	/*overflow:auto;*/
	height: 100%;
}

@media screen and (max-width: 600px) {
  #main {
	padding: 0 7%;
  }
}
@media screen and (max-width: 600px) {
  .title h1 {
	margin: 0.2em 0;
  }
}
@media screen and (max-width: 600px) {
  .title {
	font-size: 4em;
  }
}
#note {
	top: 0;
/*	position: fixed;*/
/*	margin-top: 100px;*/
	display: inline-block;
}
svg {
	position: absolute;
	display: inline-block;
	margin-top: 45px;
/*	left: 0;*/
	max-height: 70vh;
	max-width: 70vh;
/*	margin: 0 auto;*/
/*	margin: 0em 10%;*/
/*	height: 100%;*/
/*	margin: 0px 0px 30px 0px;*/
}
.c1 path{
	animation: dash 2.5s linear forwards;
}
.c2 path{
	animation: dash 2.5s 1s linear forwards;
}
.c3 path{
	animation: dash 2.5s 2s linear forwards;
}
.c4 path{
	animation: dash 2.5s 3s linear forwards;
}
.c5 path{
	animation: dash 2.5s 4s linear forwards;
}
.c6 path{
	animation: dash 2.5s 5s linear forwards;
}
.c7 path{
	animation: dash 2.5s 6s linear forwards;
}
.c8 path{
	animation: dash 2.5s 7s linear forwards;
}
.c9 path{
	animation: dash 2.5s 8s linear forwards;
}
.c10 path{
	animation: dash 2.5s 9s linear forwards;
}
path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
	   stroke-dashoffset: 0;
  }
}
.flip {
  -webkit-perspective: 800;
   width: 500px;
   height: 250px;
   margin: 0 auto;
   text-align: center;
}
.flip h5 {
	font-size: 3.2em;
	font-family: sans-serif;
	font-weight: 100;
	margin: 10% auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  margin-top: 30px;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  /*font-family: Georgia;*/
  font-size: 1.2em;
  text-align: center;
  border: 5px solid black;
}
.flip .card .front {
  	position: absolute;
  	z-index: 1;
  	background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: white;
    color: black;
    cursor: pointer;
}
.flip button {
	background-color:#cee8e8; 
	margin-top: 40px;
	text-align: center;
	width:100px; 
	height:50px; 
	padding: 5px;
}
iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#try {
    margin:10px 0 0 0;
}
#note {
    margin: 10px 0 0 0;
}

@media screen and (max-width: 400px) {
  #magic button {
	width: 50px;
  }
}
@media screen and (max-width: 400px) {
  body {
	height: 110%;
  }
}
.yt {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
}