/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* #Spinner
================================================== */

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 40px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* #background fade-in
================================================== */

#cycle
{
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  

background:red;
animation:myfirst 20s;
-moz-animation:myfirst 20s; /* Firefox */
-webkit-animation:myfirst 20s; /* Safari and Chrome */
-o-animation:myfirst 20s; /* Opera */
    
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

@keyframes myfirst
{
0%   {background:#C2A7BA;}
25%  {background:#9B75B1;}
50%  {background:#BDBB47C;}
75% {background:#D59B71;}
100%   {background:#C2A7BA;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:#C2A7BA;}
25%  {background:#9B75B1;}
50%  {background:#BDBB47C;}
75% {background:#D59B71;}
100%   {background:#C2A7BA;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:#C2A7BA;}
25%  {background:#9B75B1;}
50%  {background:#BDBB47C;}
75% {background:#D59B71;}
100%   {background:#C2A7BA;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:#C2A7BA;}
25%  {background:#9B75B1;}
50%  {background:#BDBB47C;}
75% {background:#D59B71;}
100%   {background:#C2A7BA;}
}


/* #Page Styles
================================================== */
.text {
	position: absolute;
	top: -100px;
}

#slidr-div {
	width: 600px;
	height:400px;
}
#slidr-img {
	width: 600px;
	height:400px;
}
#panel1 {
	width: 600px;
	height:400px;
	background: #FFC794;
}
#panel2 {
	width: 600px;
	height:400px;
	background: #FCF6E6;
	}
#panel3 {
	width: 600px;
	height:400px;
	background: #48A4AD;
	}
#panel4 {
	width: 600px;
	height:400px;
	background: #C73A53;
	}
#panel5 {
	width: 600px;
	height:400px;
	background: #FF6C57;
}
#panel6 {
	width: 600px;
	height:400px;
	background: #FCF996;
}
/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

	@font-face {
	    font-family: 'BLOKKRegular';
	    src: url('../fonts/BLOKKRegular.eot');
	    src: url('../fonts/BLOKKRegular.eot?iefix') format('eot'),
	         url('../fonts/BLOKKRegular.woff') format('woff'),
	         url('../fonts/BLOKKRegular.ttf') format('truetype'),
	         url('../fonts/BLOKKRegular.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }