body {
	background: url('/images/ZFS-background.png');
  background-repeat: no-repeat;
  background-size: cover;		
	}
.button {
  background-color: #009695 !important;
}

a {
  color: #009695 !important;
}



#wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 0 0;
  overflow: hidden;
}

#frame {
  width: 100%;
  margin: 0 auto;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #frame {
    width: 768px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #frame {
    width: 992px;
  }
}



header {
  padding: 0 0 5px 0;
}
nav {
  clear: both;
  width: 100%;
  height: 20px;
  padding: 10px 0 10px 0;
  margin: 0 0 40px 0;
}

label {
      	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
        color: #fff;
}

.tagline {
        	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 2.75rem;
        padding-top: 1rem;
        display: inline-block;
				font-style: normal;
        color: #fff;
    
            background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   
  
    transition: background-image .25s ease-in-out;
}
.box {
  background: #009693;
background: radial-gradient(circle,rgba(0, 150, 147, 1) 0%, rgba(18, 91, 120, 1) 100%);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  color: #fff;

  border: 4px solid #fff;
  border-radius: 15px;
}

.box-reverse {
  background: #009693;
background: radial-gradient(circle, rgba(18, 91, 120, 1) 0%, rgba(0, 150, 147, 1) 100%);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  color: #fff;

  border: 4px solid #fff;
  border-radius: 15px;
}

.box-played {
  background-color: #b9d3d4 !important;
  height: 160px;
  text-align: center;
}

.box-unplayed {
  background-color: #009695 !important;
  height: 160px;
  text-align: center;
}

.box-active {
  background-color: #009695 !important;
  height: 160px;
  text-align: center;
}

.box-resume{
  color: white;
  height: 160px;
  text-align: center;
 /* background: repeating-linear-gradient(45deg, #b9d3d4, #b9d3d4 10px, #009695 10px, #009695 20px);*/
  background: radial-gradient(circle, rgba(18, 91, 120, 1) 0%, rgba(0, 150, 147, 1) 100%);
}

.box-played h2 {
    	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  color: #009695 !important;
}
.box-played h3 {

    	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  color: #fff !important;
}

.box-played h5 {
  color:#fff;
  font-size:2rem;
  margin-top:10px;
  font-weight:bold;
}
.box-resume h4,
.box-played h4 {
    	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  margin: 0;
}

.box-resume h4 {
  margin-bottom: 10px;
}
.box-played h4 {
    	
  margin: 0;
}
.box-active h2,
.box-active h3 {
    	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  color: #fff !important;
}

table th {
  color: #000;
}


#interactiveModal {

  height: 98%;
  border: 10px solid #009695 !important;
  border-radius: 15px;
}

.error-message {
  color: #f00;
  font-weight: bold;
}

ul.links {
  margin: 0;
  list-style: none;
  color: #009695 !important;
}

nav ul.header-nav li {
  	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  float: left;
  margin: 0;
  padding: 2px 0 10px 0;
  position: relative;
  color: #009695;
}
ul.links li {
  line-height: 1em;
  list-style: none;
  display: inline;
  color: #000;
}

nav ul.header-nav li a,
nav ul.header-nav li a:visited {

				color: #fff !important;
          font-weight: bold;
  margin: 0 25px 0 0;
    float: left;
  display: block;
}



footer {
  float: left;
  width: 100%;
  margin: 0 auto;
}

.footer-bottom {
  float: left;
  width: 100%;
  margin: 0 auto;
}

.footer-left {
}

.footer-links {
  width: 100%;
  text-align: center;
  padding: 30px 0 20px 0;
}

footer ul.footer-nav {
  margin: 0 auto;
}

footer ul.footer-nav li {
  font-size: small;
  color: #4c3726;
}

footer ul.footer-nav li a {
  font-size: small;
  color: #fff !important;
}

ul.links li {
  line-height: 1em;
  list-style: none;
  display: inline;
}
.dialog h2 {
  font-size: 1.5em;
  margin: 10px 0;
      	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
        text-transform: uppercase;
  color: #009693 !important;
}
.dialog label.score,
.dialog label.text {
  font-size: 1em;
  width: auto;
}
.dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(100, 100, 100, 0.5);
}

.dialog p {
    	  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
  color: #009693 !important;
}
.dialog-box {
    border: 5px solid #009695 !important;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 40%;
  margin: -3em 0 0 -300px;
  width: 600px;
  padding: 0.5em 1em 1em 1em;
  z-index: 3000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 3px 5px 3px #333;
  -webkit-box-shadow: 0 3px 5px 3px #333;
  box-shadow: 0 3px 5px 3px #333;
}
.dialog-box label {
  font-size: 0.9em;
  width: 100%;
  line-height: 1.1em;
}
.dialog-box a.close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: url(../images/bgclose.png) no-repeat scroll 0 0 transparent;
  cursor: pointer;
  z-index: 1000;
  text-decoration: none;
}
.dialog-box a.close:hover,
.dialog-box a.close:focus {
  background: url(../images/bgcloseover.png) no-repeat scroll 0 0 transparent;
}
.dialog-box p.recover {
  clear: both;
  padding: 20px 0 0 0;
  font-size: 0.8em;
}
.buttons {
  list-style-type: none;
  margin: 0 auto;
  width: 98%;
}
.button-bar {
    height: 50px;
}
.dialog-buttons {
  margin: 1em auto;
  display: block;
}
.buttons li button,
.buttons li input[type="submit"] {
  float: left;
}
.dialog-buttons button,
.dialog-buttons input[type="submit"] {
  display: block;
  width: 8em;
  height: 2.5em;
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  margin: 0 0.5em;
  padding: 0.4em 0;
  color: #fff;


  border-radius: 15px;
  cursor: pointer;
}
.dialog-buttons button:hover,
.dialog-buttons input[type="submit"]:hover,
.dialog-buttons button:active,
.dialog-buttons input[type="submit"]:active {

  background-color: #323232;
  color: #fff;
}


.orbit-slide.no-motionui.is-active {
  top: 0;
  left: 0;
}


.orbit {
  position: relative;
}

.orbit-container {
  position: relative;
  height: 150px;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.orbit-slide {
  width: 100%;
  height: 150px;
  position: absolute;
}
.orbit-slide.no-motionui.is-active {
  top: 0;
  left: 0;
}

.orbit-figure {
  margin: 0;
}

.orbit-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.orbit-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding: 1rem;
  background-color: rgba(10, 10, 10, 0.5);
  color: #fefefe;
}

.orbit-next, .orbit-previous {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  padding: 1rem;
  color: #fefefe;
}
[data-whatinput=mouse] .orbit-next, [data-whatinput=mouse] .orbit-previous {
  outline: 0;
}
.orbit-next:hover, .orbit-previous:hover, .orbit-next:active, .orbit-previous:active, .orbit-next:focus, .orbit-previous:focus {
  background-color: rgba(10, 10, 10, 0.5);
}

.orbit-previous {
  left: 0;
}

.orbit-next {
  left: auto;
  right: 0;
}

.orbit-bullets {
  position: relative;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  text-align: center;
}
[data-whatinput=mouse] .orbit-bullets {
  outline: 0;
}
.orbit-bullets button {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem;
  border-radius: 50%;
  background-color: #cacaca;
}
.orbit-bullets button:hover {
  background-color: #8a8a8a;
}
.orbit-bullets button.is-active {
  background-color: #8a8a8a;
}




				h1 {
			  font-family: "Lilita One", sans-serif;
				font-weight: 400;
			text-transform: uppercase;
			font-size: 2rem;
				font-style: normal;
				color: #fff;
		}
		h2 {
			  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
				color: #fff;
		}
	h3 {
		margin: 0;
		  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
				color: #fff;
	}
	p, ul, ol, address {       	  font-family: "Lilita One", sans-serif;
				font-weight: 400;

				font-style: normal;
        color: #fff !important;  font-size: 1.25rem;}
	ul.level-links {
		margin: 10px 0px;
		list-style: none;
		width: 100%;
		display: block;
	}

	ul.level-links li {
		line-height: 1em;
		list-style: none;
		display: inline-block;
		width:30%;
		text-align:center;
	}

	ul.level-links li a {
		font-weight: bold;
		text-align: center;
		}

		#puzzlesnav {
			margin: 0 auto;
			text-align: center;
		}
	.button {
		background-color: #009693 !important;
		border:3px solid #fff;
		font-family: "Lilita One", sans-serif;
		font-size: 1.25rem;
		color: #fff !important;
		text-transform: uppercase;
		box-shadow: 5px 5px 0 rgba(0, 0, 0);
	}
	#puzzlesnav li {
		display: inline-block;
		border-radius: 50%;
		background-color: #fff;
		width: 50px;
		height:50px;
		text-align: center;
				background-color: #009693;
		
		border:3px solid #fff;
	}

		#puzzlesnav li a {
		  font-family: "Lilita One", sans-serif;
				font-weight: 400;
				font-size: 1.5rem;
				font-style: normal;
        padding-top: 3px;
				color: #fff !important;
	}

	#puzzlesnav li.completed {
	
		background-color: #fff;
	
	}

	#puzzlesnav li.completed a {
		
		color: #009693 !important;
	}

	.box-resume h3,
	.box-resume h4 {
		background-color: #fff;
		border-radius: 5px;
		color: #000;

	}
	.latest {
		border-color: #000 !important;
	}

.play-button {
  border-radius: 10px !important;
  color: #fff !important;

  padding-left: 1em !important;
  padding-right: 1em !important;
  width: 100%;
}

.reveal p {
  color: #009693 !important;
}