/* SECTIONS FROM TOP */

body, html {
	height: 100%;
	}

section.title {
	background-color: white;
/*	background-image: url(tile1.jpg); */

	padding-top: 5em;
	min-height: 5em;
	height: 100%;
/*	animation:         title 15s infinite; /* CSS3 */
/*	-moz-animation:    title 15s infinite; /* Firefox */
/*	-webkit-animation: title 15s infinite; /* Webkit */

	position:relative;
	z-index:1;
     
}

@keyframes borderr { /* CSS3 */
	0%   { border-color:solid;: #2b1ac1; }
	10%	 { border-color: #2737fb; }
	70%  { border-color: #3327fb; }
	50%  { border-color: #0618fd; }
	100% { border-color: #2b1ac1; }
}

@-moz-keyframes borderr { /* Firefox */
	0%   { border-color:solid;: #2b1ac1; }
	10%	 { border-color: #2737fb; }
	70%  { border-color: #3327fb; }
	50%  { border-color: #0618fd; }
	100% { border-color: #2b1ac1; }
}

@-webkit-keyframes borderr { /* Webkit */
	0%   { border-color:solid;: #2b1ac1; }
	10%	 { border-color: #2737fb; }
	70%  { border-color: #3327fb; }
	50%  { border-color: #0618fd; }
	100% { border-color: #2b1ac1; }
}


@keyframes title { /* CSS3 */
	0%   { background-color: #2b1ac1; }
	10%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}

@-moz-keyframes title { /* Firefox */
	0%   { background-color: #2b1ac1; }
	10%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}
@-webkit-keyframes title { /* Webkit */
	0%   { background-color: #2b1ac1; }
	10%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}

@keyframes title1 { /* CSS3 */
	0%   { background-color: #2b1ac1; }
	5%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}

@-moz-keyframes title1 { /* Firefox */
	0%   { background-color: #2b1ac1; }
	5%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}
@-webkit-keyframes title1 { /* Webkit */
	0%   { background-color: #2b1ac1; }
	5%	 { background-color: #2737fb; }
	50%  { background-color: #3327fb; }
	70%  { background-color: #0618fd; }
	100% { background-color: #2b1ac1; }
}


@keyframes text { /* CSS3 */
	0%   { color: #2b1ac1; }
	10%	 { color: #2737fb; }
	70%  { color: #3327fb; }
	50%  { color: #0618fd; }
	100% { color: #2b1ac1; }
}

@-moz-keyframes text { /* Firefox */
	0%   { color: #2b1ac1; }
	10%	 { color: #2737fb; }
	70%  { color: #3327fb; }
	50%  { color: #0618fd; }
	100% { color: #2b1ac1; }
}
@-webkit-keyframes text { /* Webkit */
	0%   { color: #2b1ac1; }
	10%	 { color: #2737fb; }
	70%  { color: #3327fb; }
	50%  { color: #0618fd; }
	100% { color: #2b1ac1; }
}

section.title p.logo {
	text-align: center;
	/*max-width: 7.5em;*/
	margin: auto;
	color: #fff;
	font: 700 3em/5vh 'UnifrakturCook', cursive;
	/*text-shadow: 2px 3px 2px 1px black; */
	animation:         text 15s infinite; /* CSS3 */
	-moz-animation:    text 15s infinite; /* Firefox */
	-webkit-animation: text 15s infinite; /* Webkit */

}

section.title h1 {
	text-align: center;
	max-width: 7.5em;
	margin: auto;
	color: #fff;
	font: 700 5em/25vh 'Josefin Sans', Helvetica, sans-serif;
	/*text-shadow: 3px 4px 3px black; */
	animation:         text 15s infinite; /* CSS3 */
	-moz-animation:    text 15s infinite; /* Firefox */
	-webkit-animation: text 15s infinite; /* Webkit */


	
}

section.title p {
	text-align: center;
	max-width: 10em;
	margin: auto;
	color: #fff;
	font: 400 2em/25vh 'Josefin Sans', Helvetica, sans-serif;
	/*text-shadow: 1px 2px 1px black; */
	animation:         text 15s infinite; /* CSS3 */
	-moz-animation:    text 15s infinite; /* Firefox */
	-webkit-animation: text 15s infinite; /* Webkit */

}


/*INTRO*   #FACFD7;  #C2EAE9  background-image: url(tile1.jpg) */

section.intro {
	/*background-color: #FACFD7;
	/*background-image: url(tile1.jpg);*/
	padding-top: 5em;
	min-height: 5em;
	height:50%;
		position:relative;
	z-index:1;
	}

 section.intro {
/*	animation:         title 15s infinite; /* CSS3 */
/*	-moz-animation:    title 15s infinite; /* Firefox */
/*	-webkit-animation: title 15s infinite; /* Webkit */

/*	-webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
	
*/
} 

section.intro p {
	text-align: center;
	max-width: 65vw;
	margin: auto;
	margin-top:5vh;	
	color: black;
	font: 300 2em/5vh 'Josefin Sans', Helvetica, sans-serif;
	/*text-shadow: 1px 2px 1px black; */
}

section.options em {
	animation:         text 15s infinite; /* CSS3 */
	-moz-animation:    text 15s infinite; /* Firefox */
	-webkit-animation: text 15s infinite; /* Webkit */
	}

.circle {
	border-radius: 50%;
	width: 5vw;
	height: 5vw; 
	background-image: url(tile1.jpg);
	margin:auto;
	padding-top:0em;
	/* width and height can be anything, as long as they're equal */
}



/* OPTIONS */

section.options {
	background-color: white;
	padding-top: 0em;
	min-height: 5em;
	height: auto;
	position:relative;
	z-index:1;
	animation:         borderr 15s infinite; /* CSS3 */
	-moz-animation:    borderr 15s infinite; /* Firefox */
	-webkit-animation: borderr 15s infinite; /* Webkit */
	border-left-style:dotted;
	border-right-style:dotted;
	border-width:2px;

}

section.options p {
	text-align: left;
	max-width: 65vw;
	margin: auto;
	margin-top: 1em;
	color: black;
	font: 300 1.3em/1 'Josefin Sans' Helvetica, sans-serif;
	/*-webkit-column-count:2; /* Chrome, Safari, Opera */
	/*-moz-column-count:2; /* Firefox */
	/*column-count:2;
*/
	

}

.logo2 {
	font: 100 1em/1'UnifrakturCook', cursive;
	color:black;
	}

	
/*blackness*/

/*section.blackness {
	background:black;
	min-height: 5em;
	color:white;
	font: 100 1em/1'UnifrakturCook', cursive;
	text-align: center;
	}*/

/*ORDER*/

section.order {
	animation:         title 15s infinite; /* CSS3 */
	-moz-animation:    title 15s infinite; /* Firefox */
	-webkit-animation: title 15s infinite; /* Webkit */
	font: 300 3em/1em 'Josefin Sans' Helvetica, sans-serif;
	margin:auto;
	padding-top: 1em;
	padding-bottom:1em;
	text-align: center;
	z-index:1;
}

section.order a {
	color:white;
	
	}

/*DOWNLOAD*/

section.download {
	z-index:3;
	animation:         title 14s infinite; /* CSS3 */
	-moz-animation:    title 14s infinite; /* Firefox */
	-webkit-animation: title 14s infinite; /* Webkit */
	font: 300 3em/1em 'Josefin Sans' Helvetica, sans-serif;
	margin:auto;
	padding-top: 1em;
	padding-bottom:1em;
	text-align: center;
}


section.download a {
	color:white;
	
	}
	
/*READY*/

section.ready {
	animation:         title 13s infinite; /* CSS3 */
	-moz-animation:    title 13s infinite; /* Firefox */
	-webkit-animation: title 13s infinite; /* Webkit */
	font: 300 3em/1em 'Josefin Sans' Helvetica, sans-serif;
	margin:auto;
	padding-top: 1em;
	padding-bottom:1em;
	text-align: center;
	z-index:3;
}

p.rr {
	font: 300 0.5em/1 'Josefin Sans' Helvetica, sans-serif;
	}
section.ready a {
	color:white;
	
	}
/*ONLINE*/

section.online {
	background-color: white;
	padding-top: 0em;
	min-height: 5em;
	height: auto;
	position:relative;
	z-index:3;
	animation:         borderr 15s infinite; /* CSS3 */
	-moz-animation:    borderr 15s infinite; /* Firefox */
	-webkit-animation: borderr 15s infinite; /* Webkit */
	border-left-style:dotted;
	border-right-style:dotted;
	border-width:2px;
}

section.online p {
	text-align: left;
	max-width: 65vw;
	margin: auto;
	margin-top: 1em;
	color: black;
	z-index:3;
	font: 300 1em/1 'Josefin Sans' Helvetica, sans-serif;
	/*-webkit-column-count:2; /* Chrome, Safari, Opera */
	/*-moz-column-count:2; /* Firefox */
	/*column-count:2;
*/
	}


#wrap p {
	text-align: left;
	max-width: 65vw;
	margin: auto;
	margin-top: 1em;
	color: white;
	font: 300 0.5em/1 'Josefin Sans' Helvetica, sans-serif;
	/*-webkit-column-count:2; /* Chrome, Safari, Opera */
	/*-moz-column-count:2; /* Firefox */
	/*column-count:2;
*/
}


/*SPACE*/

section.space {
	background-color: white;
/*	background-image: url(tile1.jpg); */

	padding-top: 5em;
	min-height: 5em;
	height: 100%;
/*	animation:         title 15s infinite; /* CSS3 */
/*	-moz-animation:    title 15s infinite; /* Firefox */
/*	-webkit-animation: title 15s infinite; /* Webkit */

	position:relative;
	z-index:1;
     
}


/*beginning*/

section.beginning {
	/*background: -webkit-linear-gradient(#FFFFFF, #FFFFE8);
	*/
	padding-top: 5em;
}

section.middle {
	/*background: -webkit-linear-gradient(#FFFFE8, #E8F1FF);
	*/
	padding-top: 5em;
}

section.end {
	/*background: -webkit-linear-gradient(#E8F1FF, #FFE8E8);
	*/
	padding-top: 5em;
	padding-bottom: 5em;
}

p.paragraph {
	text-align: justify;
	max-width: 60vw;
	margin: auto;
	color: black;
	font: 400 1.2em/2 'Crimson Text', serif;
	margin-bottom: 1em;
	}
	
p.header {
	text-align: justify;
	max-width: 60vw;
	margin: auto;
	animation:         text 15s infinite; /* CSS3 */
	-moz-animation:    text 15s infinite; /* Firefox */
	-webkit-animation: text 15s infinite; /* Webkit */
	}

p.speech {
	text-align: justify;
	max-width: 50vw;
	margin: auto;
	color: black;
	font: 400 1.2em/2 'Josefin Slab', serif;
	margin-bottom: 1em;
	}


.hash {
	text-align: justify;
	color: grey;
	font: 400 1em/2 'Josefin Slab', serif;
	font-style: italic;
	margin-bottom: 0;
	}
	

.blues {
	width: 100%;
	animation:         title 15s infinite; /* CSS3 */
	-moz-animation:    title 15s infinite; /* Firefox */
	-webkit-animation: title 15s infinite; /* Webkit */
	height: 2px;
	border:none;
}

.gradient {
	width:100%;
	position:fixed;
	opacity:0;
	height:20vh;
	bottom:0px;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.01)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 100%); /* W3C */
	z-index:0;
	}



 /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
      border-top:;
      border-bottom: ; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background:; }
   a.hideLink {
      background:; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }



@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

.gradient {
	display: none;
	}

section.title {
	background-color: white;
/*	background-image: url(tile1.jpg); */

	padding-top: 2em;
	height: 568px;
/*	animation:         title 15s infinite; /* CSS3 */
/*	-moz-animation:    title 15s infinite; /* Firefox */
/*	-webkit-animation: title 15s infinite; /* Webkit */

	position:relative;
	display:block;
	z-index:0;
     
}


section.title p.logo {
	text-align: center;
	/*max-width: 7.5em;*/
	margin: auto;
	color: #fff;
	font: 700 3em/1em 'UnifrakturCook', cursive;
	display: block;
}

section.title h1 {
	text-align: center;
	max-width: 7.5em;
	margin: auto;
	color: #fff;
	font: 700 5em/2em 'Josefin Sans', Helvetica, sans-serif;
	display: block;
}

section.title p {
	text-align: center;
	max-width: 10em;
	margin: auto;
	color: #fff;
	font: 400 4em/1em 'Josefin Sans', Helvetica, sans-serif;
	display: block;
}

body, html {
	height: 568px;
	}

}


/*

font-family: 'Josefin Sans', sans-serif;

light 300
normal 400
bold 700

font-family: 'Josefin Slab', serif;

normal 400
normal 400 italic

font-family: 'UnifrakturCook', cursive;

bold 700

font-family: 'Goudy Bookletter 1911', serif;

normal 400

font-family: 'Cabin', sans-serif;

font-family: 'Crimson Text', serif;

<link href='http://fonts.googleapis.com/css?family=Cabin:400,700|Crimson+Text:400,400italic' rel='stylesheet' type='text/css'>
*/