@charset "utf-8";
/* CSS Document */



#preloader {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#728d2f; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


html {
	overflow:hidden;
}

body {	
	width: 100%;
	height: 100%;	
	margin: 0;
	padding: 0;
	position: absolute;	
	top: 0;
	left: 0;
}


#site_wrapper {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top : 0;
	left: 0;
	overflow: hidden;
}


#content_wrapper {
	width: 15900px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}


.page {
	display: inline-block;
	float: left;
	width: 2650px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
	left: 0;
}

.panel {	
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
}

.hidden {	
	display:none;
}

.shown {	
	display:block;
}



/*********************************************************************************************************/
/************************************************ CONTENT ************************************************/
/*********************************************************************************************************/

.panel_title {
	position:absolute;
	left:930px;
	top:10%;
	z-index:90;
	opacity:0;
}

.sauce_splash {	
	position:absolute;
	left:840px;
	top:6%;
	z-index:68;
	opacity:0;
}

/****************************************/
/************ PAGE 1 - HELLO ************/
/****************************************/

#hello_logo {
	position:absolute;
	left:1120px;
	top:12%;
	z-index:69;
	opacity:0;
}

#hello_produced {
	position:absolute;
	left:1600px;
	top:0px;
	z-index:68;
	opacity:0;
}

#hello_basket {
	position:absolute;
	left:1090px;
	bottom:-30px;
	z-index:65;
	opacity:0;
}

#hello_cloud {
	position:absolute;
	margin:0;
	padding:0;
	left:830px;
	top:-70px;
	z-index:67;
	opacity:0;
}

#hello_balloon_gluten {
	position:absolute;
	left:970px;
	top:15%;
	z-index:90;
	opacity:0;
}

#hello_balloon_lactose {
	position:absolute;
	left:790px;
	top:13%;
	z-index:90;
	opacity:0;
}

#hello_balloon_shellfish {
	position:absolute;
	left:1570px;
	top:14%;
	z-index:90;
	opacity:0;
}

#hello_balloon_suitable {
	position:absolute;
	left:1750px;
	top:14%;
	z-index:90;
	opacity:0;
}


#hello_birds {
	position:absolute;
	left:840px;
	bottom:180px;
	z-index:50;
}

#hello_awards {
	position:absolute;
	left:900px;
	top:74%;
	z-index:90;
	opacity:0;
}

/*******************************************/
/************ PAGE 2 - MY STORY ************/
/*******************************************/

#story_textboard {
	position:absolute;
	top:19%;
	left:985px;
	z-index:67;
	opacity:0;
}
                    
#story_sshhh {
	position:absolute;
	left:1570px;
	top:-60px;
	z-index:68;
	opacity:0;
}


/*********************************************/
/************ PAGE 3 - WHATS GOOD ************/
/*********************************************/

#good_signpost {
	position:absolute;
	bottom:15px;
	left:1212px;
	z-index:67;
	opacity:0;
}

#good_greener {
	position:absolute;
	margin:0;
	padding:0;
	left:880px;
	top:-80px;
	z-index:67;
	opacity:0;
}

#good_finest {
	position:absolute;
	left:1555px;
	top:-40px;
	z-index:68;
	opacity:0;
}

#good_balloon_gluten {
	position:absolute;
	left:1220px;
	top:12%;
	z-index:90;
	opacity:0;
}

#good_balloon_lactose {
	position:absolute;
	left:1115px;
	top:25%;
	z-index:90;
	opacity:0;
}

#good_balloon_shellfish {
	position:absolute;
	left:1380px;
	top:14%;
	z-index:90;
	opacity:0;
}

#good_balloon_suitable {
	position:absolute;
	left:1520px;
	top:19%;
	z-index:90;
	opacity:0;
}


/********************************************/
/************ PAGE 4 - MY FAMILY ************/
/********************************************/

#family_image_map {
	position:absolute;
	left:839px;
	bottom: 0px;
	z-index:99;
	opacity:0;
}


#family_cloud {
	position:absolute;
	left:1560px;
	top:-15%;
	z-index:71;
	opacity:0;
}

#family_textboard {
	position:absolute;
	top:-11%;
	left:1070px;
	z-index:77;
	opacity:0;
}

#family_select_hill {
	position:absolute;
	bottom:-35px;
	left:1075px;
	z-index:90;
	opacity:0;	
}

#family_cajun_label {
	position:absolute;
	bottom:175px;
	left:750px;
	z-index:89;
	opacity:0;
}

#family_piripiri_label {
	position:absolute;
	bottom:215px;
	left:850px;
	z-index:89;
	opacity:0;
}

#family_garlic_label {
	position:absolute;
	bottom:240px;
	left:955px;
	z-index:89;
	opacity:0;	
}

#family_southwest_label {
	position:absolute;
	bottom:266px;
	left:1090px;
	z-index:89;
	opacity:0;	
}

#family_sweet_label {
	position:absolute;
	bottom:278px;
	left:1215px;
	z-index:89;
	opacity:0;	
}

#family_barbecue_label {
	position:absolute;
	bottom:295px;
	left:1330px;
	z-index:89;
	opacity:0;	
}

#family_taco_label {
	position:absolute;
	bottom:290px;
	left:1445px;
	z-index:89;
	opacity:0;	
}

#family_pepper_label {
	position:absolute;
	bottom:260px;
	left:1550px;
	z-index:89;
	opacity:0;	
}

#family_secret_label {
	position:absolute;
	bottom:225px;
	left:1665px;
	z-index:89;
	opacity:0;	
}

#family_tikka_label {
	position:absolute;
	bottom:180px;
	left:1770px;
	z-index:89;
	opacity:0;	
}

#family_cajun_bottle {
	position:absolute;
	bottom:-150px;
	left:700px;
	z-index:81;
	opacity:0;	
}

#family_piripiri_bottle {
	position:absolute;
	bottom:-140px;
	left:798px;
	z-index:81;
	opacity:0;	
}

#family_garlic_bottle {
	position:absolute;
	bottom:-140px;
	left:890px;
	z-index:82;
	opacity:0;	
}

#family_southwest_bottle {
	position:absolute;
	bottom:-140px;
	left:1000px;
	z-index:83;
	opacity:0;	
}

#family_sweet_bottle {
	position:absolute;
	bottom:-130px;
	left:1110px;
	z-index:84;
	opacity:0;	
}

#family_barbecue_bottle {
	position:absolute;
	bottom:-120px;
	left:1215px;
	z-index:83;
	opacity:0;	
}

#family_taco_bottle {
	position:absolute;
	bottom:-120px;
	left:1310px;
	z-index:85;
	opacity:0;	
}

#family_pepper_bottle {
	position:absolute;
	bottom:-120px;
	left:1410px;
	z-index:86;
	opacity:0;	
}

#family_secret_bottle {
	position:absolute;
	bottom:-135px;
	left:1510px;
	z-index:85;
	opacity:0;	
}

#family_tikka_bottle {
	position:absolute;
	bottom:-140px;
	left:1610px;
	z-index:85;
	opacity:0;	
}

#back_button {
	position:absolute;
	left:930px;
	top:15%;
	z-index:99;
	opacity:0;
}


/******************************************************/
/************ PAGE 4 - SAUCE PANEL CLASSES ************/
/******************************************************/

.sauce_bottle {
	position:absolute;
	bottom:-20px;
	left:730px;
	z-index:82;
	opacity:0;	
}

.sauce_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

.sauce_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}



/********************************************/
/************ PAGE 4 - PIRI-PIRI ************/
/********************************************/

#piri_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#piri_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#piri_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#piri_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/**********************************************/
/************ PAGE 4 - GARLIC MAYO ************/
/**********************************************/

#garlic_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#garlic_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#garlic_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#garlic_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/********************************************/
/************ PAGE 4 - SOUTHWEST ************/
/********************************************/

#southwest_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#southwest_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#southwest_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#southwest_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/***********************************************/
/************ PAGE 4 - SWEET CHILLI ************/
/***********************************************/

#sweet_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#sweet_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#sweet_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#sweet_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/*******************************************/
/************ PAGE 4 - BARBECUE ************/
/*******************************************/

#barbecue_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#barbecue_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#barbecue_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#barbecue_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/***************************************/
/************ PAGE 4 - TACO ************/
/***************************************/

#taco_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#taco_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#taco_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#taco_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/*****************************************/
/************ PAGE 4 - PEPPER ************/
/*****************************************/

#pepper_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#pepper_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#pepper_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#pepper_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/***********************************************/
/************ PAGE 4 - LOW CAL MAYO ************/
/***********************************************/

#lowcal_bottle {
	position:absolute;
	/*bottom:-20px;*/
	top:20%;
	left:780px;
	z-index:82;
	opacity:0;	
}

#lowcal_textboard {
	position:absolute;
	top:4%;
	left:965px;
	z-index:81;
	opacity:0;
}

#lowcal_cloud {
	position:absolute;
	left:1560px;
	top:4%;
	z-index:82;
	opacity:0;
}

#lowcal_recipe {
	position:absolute;
	top:40%;
	left:1250px;
	z-index:90;
	opacity:0;
}


/***************************************************/
/************ PAGE 5 - WHERE TO FIND ME ************/
/***************************************************/

#where_text {
	position:absolute;
	top:19%;
	left:825px;
	z-index:68;
	opacity:0;
}

#where_fsdu {
	position:absolute;
	bottom:30px;
	left:1410px;
	z-index:67;
	opacity:0;
}

#where_mag_glass {
	position:absolute;
	left:1050px;
	top:14%;
	z-index:75;
	opacity:0;
}


/******************************************/
/************ PAGE 6 - CALL ME ************/
/******************************************/


#call_textboard1 {
	position:absolute;
	top:9%;
	left:910px;
	z-index:67;
	opacity:0;
}

#call_textboard2 {
	position:absolute;
	top:9%;
	left:1430px;
	z-index:67;
	opacity:0;
}

/******************************************/
/************ PAGE 7 - Taste to Win ************/
/******************************************/


#taste_textboard {
	position:absolute;
	top:18%;
	left:1000px;
	z-index:87;
	opacity:0;
}

#taste_sshhh {
	position:absolute;
	top:-25%;
	left:1580px;
	z-index:87;
	opacity:0;
}


/*********************************************************************************************************/
/************************************************ HILLS **************************************************/
/*********************************************************************************************************/

.fields_back {
	position:absolute;
	left:0;
	bottom:-14px;
	z-index:50;
}

.fields_back img {	
	height:414px;
	width:2650px;
	margin:0;
	padding:0;
}

.fields_front {
	position:absolute;
	left:0;
	bottom:-14px;
	z-index:80;
}

.fields_front img {
	height:200px;
	width:2650px;
	margin:0;
	padding:0;
}



/*********************************************************************************************************/
/************************************************ FIELDS *************************************************/
/*********************************************************************************************************/

#hills1 {
	width:100%;
	overflow:hidden;
	padding: 0;
	margin: 0;
	position:fixed;
	left:0;
	bottom:40px;
	z-index:30;
}

#hills2 {
	width: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	position:fixed;
	left:0;
	bottom:10px;
	z-index:40;
}

#hills-far	{
	width: 6000px;
	height: 100%;
	padding: 0;
	margin: 0;
}

#hills-close {
	width: 6000px;
	height: 100%;
	padding: 0;
	margin: 0;
}



/*****************************************************************************************************/
/************************************************ SKY ************************************************/
/*****************************************************************************************************/

#sky {
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:-100;
}

#sky.animate {
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@keyframes sky {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}


/******* MORNING SKY *******/
.sky1{
    background-image: -ms-linear-gradient(top, #8C9ABD 0%, #9EACCF 7.000000000000001%, #BBC1D9 26%, #C6C8DD 33%, #D1D0DE 39%, #D8D6E1 44%, #DCD3D8 50%, #EDDED9 56.99999999999999%, #F6DFCD 64%, #FFDEBB 70%, #FED9AD 75%, #FFD193 81%, #FFB96B 88%, #FFB55E 91%, #FEAD51 94%, #FEAD51 95%, #FE9E48 97%, #FE8043 100%);
	background-image: -moz-linear-gradient(top, #8C9ABD 0%, #9EACCF 7.000000000000001%, #BBC1D9 26%, #C6C8DD 33%, #D1D0DE 39%, #D8D6E1 44%, #DCD3D8 50%, #EDDED9 56.99999999999999%, #F6DFCD 64%, #FFDEBB 70%, #FED9AD 75%, #FFD193 81%, #FFB96B 88%, #FFB55E 91%, #FEAD51 94%, #FEAD51 95%, #FE9E48 97%, #FE8043 100%);
	background-image: -o-linear-gradient(top, #8C9ABD 0%, #9EACCF 7.000000000000001%, #BBC1D9 26%, #C6C8DD 33%, #D1D0DE 39%, #D8D6E1 44%, #DCD3D8 50%, #EDDED9 56.99999999999999%, #F6DFCD 64%, #FFDEBB 70%, #FED9AD 75%, #FFD193 81%, #FFB96B 88%, #FFB55E 91%, #FEAD51 94%, #FEAD51 95%, #FE9E48 97%, #FE8043 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8C9ABD), color-stop(0.07, #9EACCF), color-stop(0.26, #BBC1D9), color-stop(0.33, #C6C8DD), color-stop(0.39, #D1D0DE), color-stop(0.44, #D8D6E1), color-stop(0.5, #DCD3D8), color-stop(0.57, #EDDED9), color-stop(0.64, #F6DFCD), color-stop(0.70, #FFDEBB), color-stop(0.75, #FED9AD), color-stop(0.81, #FFD193), color-stop(0.88, #FFB96B), color-stop(0.91, #FFB55E), color-stop(0.94, #FEAD51), color-stop(0.95, #FEAD51), color-stop(0.97, #FE9E48), color-stop(1, #FE8043));
	background-image: -webkit-linear-gradient(top, #8C9ABD 0%, #9EACCF 7.000000000000001%, #BBC1D9 26%, #C6C8DD 33%, #D1D0DE 39%, #D8D6E1 44%, #DCD3D8 50%, #EDDED9 56.99999999999999%, #F6DFCD 64%, #FFDEBB 70%, #FED9AD 75%, #FFD193 81%, #FFB96B 88%, #FFB55E 91%, #FEAD51 94%, #FEAD51 95%, #FE9E48 97%, #FE8043 100%);
	background-image: linear-gradient(to bottom, #8C9ABD 0%, #9EACCF 7.000000000000001%, #BBC1D9 26%, #C6C8DD 33%, #D1D0DE 39%, #D8D6E1 44%, #DCD3D8 50%, #EDDED9 56.99999999999999%, #F6DFCD 64%, #FFDEBB 70%, #FED9AD 75%, #FFD193 81%, #FFB96B 88%, #FFB55E 91%, #FEAD51 94%, #FEAD51 95%, #FE9E48 97%, #FE8043 100%);
}


/******* DAYTIME SKY *******/
.sky2{
	background-image: -ms-linear-gradient(top, #90C1FC 0%, #A3D5FE 33%, #B0DEFD 66%, #C1E8FE 100%);
	background-image: -moz-linear-gradient(top, #90C1FC 0%, #A3D5FE 33%, #B0DEFD 66%, #C1E8FE 100%);
	background-image: -o-linear-gradient(top, #90C1FC 0%, #A3D5FE 33%, #B0DEFD 66%, #C1E8FE 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #90C1FC), color-stop(0.33, #A3D5FE), color-stop(0.66, #B0DEFD), color-stop(1, #C1E8FE));
	background-image: -webkit-linear-gradient(top, #90C1FC 0%, #A3D5FE 33%, #B0DEFD 66%, #C1E8FE 100%);
	background-image: linear-gradient(to bottom, #90C1FC 0%, #A3D5FE 33%, #B0DEFD 66%, #C1E8FE 100%);
}


/******* EVENING SKY *******/
.sky3{
	    background-image: -ms-linear-gradient(top, #63829F 0%, #7392AF 13%, #7FA3BD 25%, #98B3C8 37%, #AFC1C5 50%, #D7DDDB 62%, #F5F3E7 75%, #F7DCB1 87%, #E6AA6C 94%, #D18B67 97%, #D18B67 98%, #8C6F61 100%);
	background-image: -moz-linear-gradient(top, #63829F 0%, #7392AF 13%, #7FA3BD 25%, #98B3C8 37%, #AFC1C5 50%, #D7DDDB 62%, #F5F3E7 75%, #F7DCB1 87%, #E6AA6C 94%, #D18B67 97%, #D18B67 98%, #8C6F61 100%);
	background-image: -o-linear-gradient(top, #63829F 0%, #7392AF 13%, #7FA3BD 25%, #98B3C8 37%, #AFC1C5 50%, #D7DDDB 62%, #F5F3E7 75%, #F7DCB1 87%, #E6AA6C 94%, #D18B67 97%, #D18B67 98%, #8C6F61 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #63829F), color-stop(0.13, #7392AF), color-stop(0.25, #7FA3BD), color-stop(0.37, #98B3C8), color-stop(0.50, #AFC1C5), color-stop(0.62, #D7DDDB), color-stop(0.75, #F5F3E7), color-stop(0.87, #F7DCB1), color-stop(0.94, #E6AA6C), color-stop(0.97, #D18B67), color-stop(0.98, #D18B67), color-stop(1, #8C6F61));
	background-image: -webkit-linear-gradient(top, #63829F 0%, #7392AF 13%, #7FA3BD 25%, #98B3C8 37%, #AFC1C5 50%, #D7DDDB 62%, #F5F3E7 75%, #F7DCB1 87%, #E6AA6C 94%, #D18B67 97%, #D18B67 98%, #8C6F61 100%);
	background-image: linear-gradient(to bottom, #63829F 0%, #7392AF 13%, #7FA3BD 25%, #98B3C8 37%, #AFC1C5 50%, #D7DDDB 62%, #F5F3E7 75%, #F7DCB1 87%, #E6AA6C 94%, #D18B67 97%, #D18B67 98%, #8C6F61 100%);
}



/********************************************************************************************************/
/************************************************ CLOUDS ************************************************/
/********************************************************************************************************/

#clouds{
	padding: 100px 0;
}

/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-o-border-radius: 200px;
	-ms-border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
	z-index:20;
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-o-border-radius: 100px;
	-ms-border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	
	transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 225s linear infinite;
	-moz-animation: moveclouds 225s linear infinite;
	-ms-animation: moveclouds 225s linear infinite;
	-o-animation: moveclouds 225s linear infinite;
	opacity: 0.6;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 20%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);	
	-o-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.8; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 265s linear infinite;
	-moz-animation: moveclouds 265s linear infinite;
	-ms-animation: moveclouds 265s linear infinite;
	-o-animation: moveclouds 265s linear infinite;
}

.x3 {
	left: -50%; top: -10%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);	
	-o-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 260s linear infinite;
	-moz-animation: moveclouds 260s linear infinite;
	-ms-animation: moveclouds 260s linear infinite;
	-o-animation: moveclouds 260s linear infinite;
}

.x4 {
	left: 40%; top: -12%;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	-ms-transform: scale(0.75);	
	-o-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 258s linear infinite;
	-moz-animation: moveclouds 258s linear infinite;
	-ms-animation: moveclouds 258s linear infinite;
	-o-animation: moveclouds 258s linear infinite;
}

.x5 {
	left: -25%; top: -8%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);	
	-o-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 280s linear infinite;
	-moz-animation: moveclouds 280s linear infinite;
	-ms-animation: moveclouds 280s linear infinite;
	-o-animation: moveclouds 280s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: calc(100% + 500px);}
	100% {margin-left: -400px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: calc(100% + 500px);}
	100% {margin-left: -400px;}
}
@-ms-keyframes moveclouds {
	0% {margin-left: calc(100% + 500px);}
	100% {margin-left: -400px;}
}

@-o-keyframes moveclouds {
	0% {margin-left: calc(100% + 500px);}
	100% {margin-left: -400px;}
}



/*****************************************************************************************************/
/************************************************ SUN ************************************************/
/*****************************************************************************************************/

#sun {
	position:fixed;
	top:5%;
	right:3%;
	z-index:10;
}


/*
#sun img {
	-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
} 
	
#sun img:hover {
	-webkit-transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	-ms-transform: rotate(25deg);
	-o-transform: rotate(25deg);
	transform: rotate(25deg);
}
*/



/*****************************************************************************************************/
/************************************************ NAV ************************************************/
/*****************************************************************************************************/

#nav_wrapper {
	padding: 0;
	margin: 0;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%; 
	text-align: center;		
	z-index:1000;
	opacity: 0;
}

#nav_options {
}

#nav_options ul {
	margin: 0px; 
	padding: 12px; 
	list-style-type: none;
	background-color: #cf4728;
	width:750px;
	margin-left: auto;
	margin-right: auto;
} 
 
#nav_options ul li {
	display: inline; 
} 

#nav_options ul li a { 
	text-decoration: none; 
	padding: .06em 0.6em;
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 400;
	font-size: 13pt;
}

#nav_options ul li a span{
	color: #faaf4c; 
	background-color: #cf4728;
}

#nav_options ul li a span span{
	color: #fff; 
	background-color: #cf4728;
}

#nav_options ul li a span span span{
	color: #faaf4c; 
	background-color: #cf4728;
}

#nav_options ul li a span span span span{
	color: #fff; 
	background-color: #cf4728;
}

#nav_options ul li a span span span span span{
	color: #faaf4c; 
	background-color: #cf4728;
}

#nav_options ul li a:hover{
	background-color: #fff;
	font-weight: 400;
}

#nav_options ul li a:hover span{ 
	color: #faaf4c; 
	background-color: #fff; 
}
 
#nav_options ul li a:hover span span{ 
	color: #728c37; 
	background-color: #fff;
}
 
#nav_options ul li a:hover span span span{ 
	color: #faaf4c; 
	background-color: #fff;
}
 
#nav_options ul li a:hover span span span span{ 
	color: #728c37; 
	background-color: #fff;
}

#nav_options ul li a:hover span span span span span{ 
	color: #faaf4c; 
	background-color: #fff;
}



#nav_options ul li a.selected{
	background-color: #fff;
	font-weight: 400;
}

#nav_options ul li a.selected span{ 
	color: #faaf4c; 
	background-color: #fff; 
}
 
#nav_options ul li a.selected span span{ 
	color: #728c37; 
	background-color: #fff;
}
 
#nav_options ul li a.selected span span span{ 
	color: #faaf4c; 
	background-color: #fff;
}
 
#nav_options ul li a.selected span span span span{ 
	color: #728c37; 
	background-color: #fff;
}

#nav_options ul li a.selected span span span span span{ 
	color: #faaf4c; 
	background-color: #fff;
}


.shadow {
	-moz-box-shadow: 3px 3px 4px #777777;
	-webkit-box-shadow: 3px 3px 4px #777777;
	box-shadow: 3px 3px 4px #777777;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#777777');
}





/**********************************************************************************************************/
/**********************************************************************************************************/

.animated{
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;	
	animation-fill-mode: forwards;
	
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-ms-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
	
}

@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
	}
	
	70% {
		-webkit-transform: scale(.9);
	}
	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-moz-transform: scale(1.05);
	}
	
	70% {
		-moz-transform: scale(.9);
	}
	
	100% {
		-moz-transform: scale(1);
		opacity: 1;
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-o-transform: scale(1.05);
	}
	
	70% {
		-o-transform: scale(.9);
	}
	
	100% {
		-o-transform: scale(1);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	
	70% {
		transform: scale(.9);
	}
	
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}


@-webkit-keyframes bounceInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}	
	
	60% {
		opacity: 1;
		-webkit-transform: translateY(-30px);
	}
	
	80% {
		-webkit-transform: translateY(10px);
	}
	
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}
@-moz-keyframes bounceInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateY(-30px);
	}
	
	80% {
		-moz-transform: translateY(10px);
	}
	
	100% {
		-moz-transform: translateY(0);
		opacity: 1;
	}
}

@-o-keyframes bounceInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateY(-30px);
	}
	
	80% {
		-o-transform: translateY(10px);
	}
	
	100% {
		-o-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateY(-30px);
	}
	
	80% {
		transform: translateY(10px);
	}
	
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.bounceInUp {
	-webkit-animation-name: bounceInUp;
	-moz-animation-name: bounceInUp;
	-o-animation-name: bounceInUp;
	animation-name: bounceInUp;
}

@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
	}
	
	80% {
		-webkit-transform: translateY(-10px);
	}
	
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateY(30px);
	}
	
	80% {
		-moz-transform: translateY(-10px);
	}
	
	100% {
		-moz-transform: translateY(0);
		opacity: 1;
	}
}

@-o-keyframes bounceInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateY(30px);
	}
	
	80% {
		-o-transform: translateY(-10px);
	}
	
	100% {
		-o-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateY(30px);
	}
	
	80% {
		transform: translateY(-10px);
	}
	
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}








@-webkit-keyframes bounceOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
	
	25% {
		-webkit-transform: scale(.95);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: scale(1.1);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}	
}

@-moz-keyframes bounceOut {
	0% {
		opacity: 1;
		-moz-transform: scale(1);
	}
	
	25% {
		-moz-transform: scale(.95);
	}
	
	50% {
		opacity: 1;
		-moz-transform: scale(1.1);
	}
	
	100% {
		opacity: 0;
		-moz-transform: scale(.3);
	}	
}

@-o-keyframes bounceOut {
	0% {
		opacity: 1;
		-o-transform: scale(1);
	}
	
	25% {
		-o-transform: scale(.95);
	}
	
	50% {
		opacity: 1;
		-o-transform: scale(1.1);
	}
	
	100% {
		opacity: 0;
		-o-transform: scale(.3);
	}	
}

@keyframes bounceOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	
	25% {
		transform: scale(.95);
	}
	
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	
	100% {
		opacity: 0;
		transform: scale(.3);
	}	
}

.bounceOut {
	-webkit-animation-name: bounceOut;
	-moz-animation-name: bounceOut;
	-o-animation-name: bounceOut;
	animation-name: bounceOut;
}



@-webkit-keyframes bounceOutUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
}

@-moz-keyframes bounceOutUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
}

@-o-keyframes bounceOutUp {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
}

@keyframes bounceOutUp {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		transform: translateY(-2000px);
	}
}

.bounceOutUp {
	-webkit-animation-name: bounceOutUp;
	-moz-animation-name: bounceOutUp;
	-o-animation-name: bounceOutUp;
	animation-name: bounceOutUp;
}



@-webkit-keyframes bounceOutDown {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}
}

@-moz-keyframes bounceOutDown {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
}

@-o-keyframes bounceOutDown {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(2000px);
	}
}

@keyframes bounceOutDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		transform: translateY(2000px);
	}
}

.bounceOutDown {
	-webkit-animation-name: bounceOutDown;
	-moz-animation-name: bounceOutDown;
	-o-animation-name: bounceOutDown;
	animation-name: bounceOutDown;
}


.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

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

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

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

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

.bbq_video {
	position:absolute;
	left:0;
	bottom:-14px;
	z-index:50;
}