html, body{
	margin:0;
	padding:0;
	/*background-color:#d8d8d8;*/
}

img{
	border:0;
}

.cb{clear:both;}

#container{
	width: 970px;
	height: 418px;
	position:absolute;
	top:0;
	left:0;
}

#bg-exit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    border:0;
        background-color: transparent;
}

#collapsed{
	width:970px;
	height: 90px;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	/*display:none;*/
}

#collapsed-photo-wrapper{
	position:relative;
	top:0px;
	left:485px;
	height:90px;
	width:200px;
	overflow:hidden;
}

#expand_btn {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    cursor: pointer;
    z-index: 300;
    border: 0;
}

#headline{
	position:absolute;
	top: 23px;
	left:145px;
	z-index:98;
	width: 338px;
	height: 49px;
	background: transparent url(collapsed-headline.png) no-repeat top left;
	opacity:0;
	-webkit-animation: fadeIn 0.5s ease-in 1.4s normal forwards;
	animation: fadeIn 0.5s ease-in 1.4s normal forwards;
}

#cta{
	position:absolute;
	width: 163px;
	height: 29px;
	top: 35px;
	right: 121px;
	z-index:99;
	background: transparent url(cta.png) no-repeat top left;
}

#frame {
	position:absolute;
    width: 970px;
    height: 90px;
    opacity: 1;
    z-index: 100;
    top: 0;
    left: 0;
    background: transparent url(collapsed-frame.png) no-repeat top left;
}

#bg{
	position:absolute;
	top:0;
	left:0;
	width:970px;
	height:90px;
	opacity:1;
	z-index:0;
	background: transparent url(bg-collapsed.jpg) no-repeat top left;
}

#expanded {
  width:970px;
  height:418px;
  display:none;
  z-index:2;
  background: transparent url(bg-expanded.jpg) no-repeat top left;
  /*background: transparent url(GUIDE.jpg) no-repeat top left;*/
  -webkit-transition: opacity .7s linear .5s;
	transition: opacity .7s linear .5s;
  opacity:1;
  position:absolute;
  top:0;
}

#photo-wrapper{
	position:relative;
	width:310px;
	height:200px;
	float:left;
	top: 175px;
	left: 15px;
}

#grill-wrapper{
	width:660px;
	height:100%;
	float:left;
	position:relative;
}

#expanded-carousel{
    width: 970px;
    height: 418px;
    z-index: 0;
    background: transparent url(bg_expanded.jpg) no-repeat top left;
    display:none;
    position:absolute;
    -webkit-transition: opacity .7s linear 0s;
	transition: opacity .7s linear 0s;
	opacity:0;
}

p {
  color:#fff;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size:44px;
  text-align:center;
  margin-top:30px;
  font-weight: bold;
}


/*---------------- SHUFFLE STYLING -----------------*/

.photo, .c-photo{
	background-color:#000000;
	border-top: 5px;
	border-left: 3px;
	border-right: 3px;
	border-bottom:20px;
	border-color:#ffffff;
	border-style:solid;
	-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
	-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
	box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
	margin:10px;
	position:absolute;
}

.c-photo{
	width:140px;
	height:100px;
	top: -175px;
	left: 5px;
}

.c-photo.active {
	z-index:2;
	/*-webkit-animation: moveCard .3s linear 1;
    -moz-animation: moveCard .3s linear 1;
    animation: moveCard .3s linear 1;*/
}

#c-photo-2{
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
	left: 18px;
	z-index:3;
	animation: moveCard 0.5s ease-out 1s 1 normal forwards;
}

#c-photo-1{
	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	transform: rotate(-25deg);
	left: 10px;
	z-index:1;
	animation: moveCard 0.5s ease-out 0s 1 normal forwards;
}

#c-photo-3{
	-webkit-transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	transform: rotate(25deg);
	left:25px;
	z-index:2;
	animation: moveCard 0.5s ease-out 0.5s 1 normal forwards;
}

.c-plate{
	opacity:1;
	width:100%;
	height:100%;
}

/*-------------------- START OF SCENE 2 STYLES ---------------------*/

.photo{
	width:110px;
	height:90px;
}

#photo-1{
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	transform: rotate(-15deg);
	left:3px;
}

#photo-2{
	/*-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	left:60px;*/
	left:65px;
	z-index:2;
	width:142px;
	height:122px;
}

#photo-3{
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	transform: rotate(15deg);
	left:170px;
}

.plate{
	opacity:1;
	width:100%;
	height:100%;
}

#photo-wrapper.active #photo-1{
	-webkit-animation:spin1 .3s linear 1;
    -moz-animation:spin1 .3s linear 1;
    animation:spin1 .3s linear 1;
}

#photo-wrapper.active #photo-2{
	-webkit-animation:spin2 .3s linear 1;
    -moz-animation:spin2 .3s linear 1;
    animation:spin2 .3s linear 1;

}

#photo-wrapper.active #photo-3{
	-webkit-animation:spin3 .3s linear 1;
    -moz-animation:spin3 .3s linear 1;
    animation:spin3 .3s linear 1;

}

#photo-wrapper.active .plate{
	/*-webkit-animation:showHide .3s linear 1;
    -moz-animation:showHide .3s linear 1;
    animation:showHide .3s linear 1;*/
}

/*-------------------- HEADLINE STYLING ----------------*/

#headline-text{
	margin: 20px 0 0 55px;
	opacity:1;
}

#headline-text.removeHeadline{
	opacity:0;
	-webkit-animation:removeHeadline .3s linear 1;
    -moz-animation:removeHeadline .3s linear 1;
    animation:removeHeadline .3s linear 1;
}

/*---------------- GRILLS WRAPPER STYLING ------------------- */

.grill-container, .activeBtn{
	opacity: 1;
	-webkit-transition: opacity .3s linear 0s;
    transition: opacity .3s linear 0s;
}

.grill-click{
	/*margin:10px;*/
}

.grill{
	position:absolute;
}

#grill-1{
	top:125px;
	left:40px;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

#grill-1.activeGrill{
	top:40px;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

#grill-2{
	top:85px;
	left:235px;
	z-index:2;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

#grill-2.activeGrill{
	top:38px;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

#grill-3{
	top:125px;
	right:15px;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

#grill-3.activeGrill{
	top:40px;
	-webkit-transition: top .3s linear 0s;
	transition: top .3s linear 0s;
}

/*--------------- SEE MORE BUTTON STYLING -----------------*/

.see-more-btn{
	display:none;
	position:absolute;
	top:280px;
}

.see-more-btn.activeBtn{
	display:block;
}

#see-more-btn-1{
	left:105px;
}

#see-more-btn-2{
	left:297px;
}

#see-more-btn-3{
	right:77px;
}

/*---------------------- recipe area styling ----------------------*/

.recipeContainer {
  position: relative;
  display: block;
  width: 300px;
  height: 418px;
}

.recipeContainer ul {
  list-style-type: none;
  width: 300px;
  height: 387px;
  padding: 0;
  margin: 0;
  left: 236px;
  top: 30px;
  position: absolute;
  z-index:15;
  cursor:pointer;
}

li {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
}

.recipe li:first-child {
  position: relative;
}

/*---------------------------- slide styling -----------------------*/

.slide {
  opacity: 0;
  transition: opacity 1.2s;
}

.active {
  opacity: 1;
}

.recipe1 {
  z-index: 60;
}

.recipe2 {
  z-index: 50;
}

.recipe3 {
  z-index: 40;
}

/*------------------------------ slide controls ------------------------*/

.controls {
  display: block;
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: 999;
}

.left, .right {
  position: absolute;
  top: 185px;
  z-index: 100;
   width: 40px;
  height: 40px;
}

.left {
  left: 585px;
  background: url(arrowLeft.png) no-repeat 5px 13px;
}

.right {
  right: 0px;
  /*text-align: right;*/
  background: url(arrowRight.png) no-repeat 16px 13px;
}

/*------------------------- Grills CSS -------------------------*/

.grillContainer {
  position: absolute;
}

.grillContainer {
  position: absolute;
  overflow: hidden;
  width:387px;
  height:377px;
  top: 40px;
  right: 0px;
  z-index:150;
}

.grills {
  position: absolute;
  width:275px;
  height:377px;
}
.grillContainer ul {
  position: absolute;
  padding: 0;
  list-style: none;
  width: 1170px;
}
.grillContainer ul li {
  position: relative;
  display: block;
  float: left;
  width:387px;
  z-index:140;
  cursor: pointer;
  background-color: rgba(255,255,255,0);
  background-color:transparent;  
}

.grillContainer ul li img {
  position: absolute;
  right: 0;
}

/*------------------ CLOSE BTN -----------------------*/
#close_btn{
  position:absolute;
  top:12px;
  right:11px;
  width:22px;
  height:24px;
  background: transparent url(close.png) no-repeat top left;
  cursor:pointer;
  z-index:520;
  border:0;
}

/*--------------------- KEYFRAMES ----------------------*/


@-moz-keyframes fadeIn { 
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes fadeIn { 
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn { 
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes moveCard { 
	0% {top: -175px;}
	100% {top: -10px;}
}

@-webkit-keyframes moveCard { 
	0% {top: -175px;}
	100% {top: -10px;}
}

@keyframes moveCard { 
	0% {top: -175px;}
	100% {top: -10px;}
}

@-moz-keyframes spin1 { 
	0%{left:3px; -moz-transform: rotate(-15deg);}
	50%{left: 75px; -moz-transform: rotate(0deg);}
	100% {left:3px; -moz-transform: rotate(-15deg); } 
}
@-webkit-keyframes spin1 { 
	0%{left:3px; -webkit-transform: rotate(-15deg);}
	50%{left: 75px; -webkit-transform: rotate(0deg);}
	100% {left:3px; -webkit-transform: rotate(-15deg); } 
}
@keyframes spin1 { 
	0%{left:3px; -webkit-transform: rotate(-15deg); transform:rotate(-15deg);}
	50%{left: 75px; -webkit-transform: rotate(0deg); transform:rotate(0deg);}
	100% {left:3px; -webkit-transform: rotate(-15deg); transform:rotate(-15deg);} 
}

@-moz-keyframes spin2 { 
	0%{z-index:2;width:142px;height:122px;left:65px;}
	50%{z-index:0;width:110px;height:90px;left:85px;}
	100% {z-index:2; /*-moz-transform: rotate(360deg);*/ } 
}
@-webkit-keyframes spin2 { 
	0%{z-index:2;width:142px;height:122px;left:65px;}
	50%{z-index:0;width:110px;height:90px;left:85px;}
	100% {z-index:2; /*-webkit-transform: rotate(360deg);*/} 
}
@keyframes spin2 { 
	0%{z-index:2;width:142px;height:122px;left:65px;}
	50%{z-index:0;width:110px;height:90px;left:85px;}
	100% {z-index:2; /*-webkit-transform: rotate(360deg); transform:rotate(360deg); width:132px;height:102px;left:26px;*/} 
}

@-moz-keyframes spin3 { 
	0%{left:170px;-moz-transform: rotate(15deg);}
	50%{left: 55px;-moz-transform: rotate(0deg);}
	100% {left:170px; -moz-transform: rotate(15deg);} 
}
@-webkit-keyframes spin3 { 
	0%{left:170px; -webkit-transform: rotate(15deg);}
	50%{left: 55px; -webkit-transform: rotate(0deg);}
	100% {left:170px; -webkit-transform: rotate(15deg);} 
}
@keyframes spin3 { 
	0%{left:170px; -webkit-transform: rotate(15deg); transform:rotate(15deg);}
	50%{left: 55px; -webkit-transform: rotate(0deg); transform:rotate(0deg);}
	100% {left:170px; -webkit-transform: rotate(15deg); transform:rotate(15deg); } 
}

@-moz-keyframes showHide { 
	0%{opacity:1;}
	30%{opacity:0;}
	100% {opacity:1;width:100%; } 
}

@-webkit-keyframes showHide { 
	0%{opacity:1;}
	30%{opacity:0;}
	100% {opacity:1;width:100%; } 
}
@keyframes showHide { 
	0%{opacity:1;}
	30%{opacity:0;}
	100% {opacity:1;width:100%;} 
}

@-moz-keyframes removeHeadline { 
	0%{opacity:1;}
	100% {opacity:0;} 
}

@-webkit-keyframes removeHeadline { 
	0%{opacity:1;}
	100% {opacity:0;} 
}
@keyframes removeHeadline { 
	0%{opacity:1;}
	100% {opacity:0;} 
}