/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}



html{
	padding: 0;
	margin: 0 auto;
	font-family: 'Space Mono', sans-serif;
	font-size:large;
	color:white;
	background-color:#ccccff;
	overflow-x:hidden;
}
/* General
***********************/
#tag{ width:100px;
      position: relative;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      font-size:.5em;
background-color:#ffff99;
padding:15px;
padding-top:20px;
float:left;
margin:5px;
}

    #tag:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-right: 26px solid red;
      border-bottom: 13px solid transparent;
      animation:run 5s infinite;
    } 
    
    @keyframes run{
    0% {top: 26px;}
	33% {top:60px;}
	66% {top:80px;}
	100%{top:26px;}
    }
    
body {
	margin:0 auto;
	text-align:center;
	background: #f8f699;
	height: auto;
		font-family: 'Space Mono';
	font-weight: normal;
	font-style: normal;
}

	
a {
	color: #fff;
	text-decoration: none;
}

h1, h2, h3 {
	text-shadow: 0 1px 0 #3333ff;
	text-align:center;
}

h1{font-size:2em;}
p {font-size: 14px;
	line-height: 18px;
}

/* --Clearfix */
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

.toggle { margin: 2px 0 0 14px; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.toggle li { float: left; }
.toggle li a {width: 50px; padding: 6px 0; text-align: center; display: block; text-shadow: 1px 1px 0 #fff; font-size: 12px; font-weight: 600; color: #666; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; 

box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;

}
.toggle li:first-child a {-webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}
.toggle li a:hover { background: #ededed; color: #222; }
.toggle li a.active { background: #c8e0f3; color: #325874; cursor: default; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); }

.slider { margin: 50px 0 10px!important;}
#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}



/* Loading
***********************/
.loading #container {opacity: 0;}
.loading:before  { content: 'LOADING'; display: block; margin: 100px 0 0; text-align: center; color: #fff; font-weight: bold; font-size: 60px; opacity: 0.3; }
body {width: 100%; float: left; opacity: 1; -webkit-transition: opacity 1s ease;}

/* Layout
***********************/
#container {padding: 60px 40px 100px;}
header {width: 380px; float: left;
margin:5px;
}
#main {overflow: hidden;
margin:5px;
}
aside p {color:#ea623d;
margin-bottom:30px;}
aside{margin:20px;}

span ul li {color:#3333ff;
margin-bottom:15px;
padding:5px;}

.alist  {
text-align:left;
padding-bottom:20px;}

.blist{
text-align:right;}

/* Header
***********************/
header h2 { animation: slide 2s infinite alternate; margin: 0 0 30px; font: normal 22px Geogrotesque-regular, Helvetica, Arial, sans-serif; text-shadow: 0 1px 1px #ea623d; color: #fff; }
nav {margin: 60px auto; 
		position: relative;
		width: 50%;
		padding:10px;
		background-color:rgba(243,184,182,0.6);
		  border-radius:25px;
	}	

	nav li {
		margin: 0;
	
		margin-bottom: 30px; 
		
	}
	nav ul li a  { border: none!important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
	nav li a:hover  { text-decoration: underline; 
	animation: slide 1s infinite;}
	
	@keyframes slide{
	0%{color:#ea623d;}
	33%{color:#ccccff;}
	66%{color:#3333ff;}
	100%{color:#ccccff;}}
	
.stripe{border-radius:25px;}	

.content{
 margin: 50px 0 60px;
 margin-left:160px;
  background: #fff;
  border: 10px dashed #333fff;
  border-radius:25px;
  position: relative;
  zoom: 1;
  max-width:750px;
 }
.content img{width:750px;
}

/* Media Queries
***********************/
@media screen and (max-width: 960px) {
  #container {padding: 35px;}
  header {width: 380px;}
  #main {}
  aside h3  {
  	float: none;
  	font-size: 20px;
  }
  .toggle  {
  	margin-left: 0;
  	float: none;
  }
}
@media screen and (max-width: 768px) {
  #container {padding: 20px 30px;}
  header {width: 100%; float: none; text-align: center;}

  header h1  { margin: 0 auto 10px; font-size: 32px; }
  header h2  { font-size: 16px; }
  header .button  { margin-bottom: 28px; }

  #main {margin-left: 0;
  margin-right: 0;}

  nav {
		position: relative;
		
		min-height: 46px;
		margin: 20px 30px 0;
		width: 100%;
	}	
	
	

	nav li {
		margin: 0 auto;
		display:inline-block;
		padding-right:30px;
	}