/*
CSS for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

html{margin: 0; padding: 0;}
body{
	margin: 0;
	min-width: 960px;
	padding: 0;
}
p, ul{
	margin: 0;
	padding:0;
}
img{
	border: 0;
}
.float-left{
	float: left;
}
.float-right{
	float: right;
	text-align:right;
}
#nav{
	list-style: none;
	position: fixed;
	width:130px;
	padding:30px 15px;
	background:url(images/menu_bg.png) no-repeat;
	z-index:999;
	text-align:center;
}
#nav li{
	margin: 0;
	padding: 0;
}
	#nav li.bullet	{
		height: 10px;
		margin-top: -11px;
	}
#nav .social {
	font: 20px/20px Arial, sans-serif;
	letter-spacing: 0;
	color:#F9D29F;
	margin:20px 0 10px 0;
	}
#header{
	background:url(images/bg_home.jpg) repeat fixed;
	margin:0 auto;
	height: 780px;
}
#header .story{
	background:url(images/header_new.png) top no-repeat;
	height: 780px;
	/*margin-top: 105px;*/
}
#header h1 a {
	margin: 18px 0 0 0;
	float: left;
	width: 90px;
	height:90px;
	text-indent:-5000px;
	overflow:hidden;
	}
.story{
	margin: 0 auto;
	padding:0;
	min-width: 960px;
	width: 960px;
	height:800px;
	border:1px solid transparent;
	position:relative;
	}
.story .float-left, .story .float-right{
	padding: 0;
	position: relative;
	width: 350px;
	margin:0;
}
#intro p {
	margin: 780px 0 0 120px;
	float:left;
}
#ten p {
	margin: 880px 0 0 350px;
	float:left;
	color:#333;
	text-align:right;
}
/* BGS */
#parmalat_1992 .story {background: url(images/img_1992.png) top no-repeat;}
#parmalat_1993a .story {background:url(images/img_1993a.png) top no-repeat;}
#parmalat_1993b .story {background:url(images/img_1993b.png) top no-repeat;}
#parmalat_1994 .story {background:url(images/img_1994.png) top no-repeat;}
#parmalat_1996 .story {background:url(images/img_1996.png) top no-repeat;}
#parmalat_1997 .story {background:url(images/img_1997.png) top no-repeat;}
#parmalat_1998 .story {background:url(images/img_1998.png) top no-repeat;}
#parmalat_1999 .story {background:url(images/img_1999.png) top no-repeat;}
#parmalat_2000 .story {background:url(images/img_2000.png) top no-repeat;}


.ads	{
	width:1020px;
	height:150px;
	margin:0 0 0 -50px;
	position: absolute;
	z-index: 999;
	bottom: -115px;
}

/* SEÇÔES */
/* 1992 */
#parmalat_1992{
	background:url(images/bg_1992.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

/* 1993 */
#parmalat_1993a {
	background:url(images/bg_1993a.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}
#parmalat_1993a .polaroid{
	background: url(images/polaroid_1993.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 200;
}
/* 1993b */
#parmalat_1993b {
	background: url(images/bg_1993b.jpg) repeat fixed;
	height: 780px;
	padding: 0;
}
#parmalat_1993b .polaroid{
	background: url(images/polaroid_1993b.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 300;
}
	#parmalat_1993b .polaroid a	{
		display: block;
		width: 262px;
		height: 310px;
		margin-top: 176px;
		margin-left: 107px;
	}

/* 1994 */
#parmalat_1994 {
	background: url(images/bg_1994.jpg) repeat fixed;
	height: 780px;
	padding:0;
}
#parmalat_1994 .polaroid{
	background: url(images/polaroid_1994.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 400;
}
	#parmalat_1994 .polaroid a	{
		display: block;
		width: 262px;
		height: 310px;
		margin-top: 176px;
		margin-left: 107px;
	}
/* 1996 */
#parmalat_1996  {
	background: url(images/bg_1996.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	padding: 0;
}
#parmalat_1996 .polaroid{
	background: url(images/polaroid_1996.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 500;
}
	#parmalat_1996 .polaroid a	{
		display: block;
		width: 290px;
		height: 324px;
		margin-top: 283px;
		margin-right: 5px;
		float: right;
	}

/* 1997 */
#parmalat_1997{
	background: url(images/bg_1997.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	padding: 0;
}
#parmalat_1997 .polaroid{
	background: url(images/polaroid_1997.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 600;
}
/* 1998 */
#parmalat_1998 {
	background: url(images/bg_1998.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	padding: 0;
}
#parmalat_1998 .polaroid{
	background: url(images/polaroid_1998.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	margin-top: -21vh;
	margin-right: -2rem;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 700;
}
/* 1999 */
#parmalat_1999 {
	background: url(images/bg_1999.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	padding: 0;
}
#parmalat_1999 .polaroid{
	background: url(images/polaroid_1999.png) no-repeat;
	height: 780px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 800;
	margin-top: -26vh;
	margin-left: -2rem;
}

/* 2000 */
#parmalat_2000 {
	background: url(images/bg_2000.jpg) repeat fixed;
	height: 780px;
	margin: 0 auto;
	padding: 0;
}
#parmalat_2000 .polaroid{
	background: url(images/polaroid_2000.png) no-repeat;
	height: 800px;
	margin: 0 auto;
	margin-top: -13vh;
	margin-left: -2rem;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 902;
}
	#parmalat_2000 .polaroid a	{
		display: block;
	    width: 280px;
	    height: 370px;
	    margin-top: 415px;
	    margin-left: 130px;
	}
#parmalat_2000 .polaroid2{
	background: url(images/polaroid_2000b.png) no-repeat;
	height: 852px;
	margin: 0 auto;
	margin-top: -1vh;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 901;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body{
		min-width: 100%;
	}
	#nav {
		display: none;
	}

	#header {
		height: 46vh;
	}

	.story{
		min-width: 100%;
		width: 100%;
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1992,
	#parmalat_1992,
	#parmalat_1993a,
	#parmalat_1993b,
	#parmalat_1994,
	#parmalat_1996,
	#parmalat_1997,
	#parmalat_1998,
	#parmalat_1999,
	#parmalat_2000
	{
		height: 46vh;
	}
	#header .story {
		height: 46vh;
		background-size: cover;
	}
	#parmalat_1992 .story {
		background-size: cover;
		height: 46vh;
	}

	#parmalat_1993a .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1993a .polaroid {
		display: none;
	}

	#parmalat_1993b .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1993b .polaroid {
		display: none;
	}
	#parmalat_1993b .polaroid a{
		display: none;
	}

	#parmalat_1994 .polaroid {
		display: none;
	}
	#parmalat_1994 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1994 .polaroid a {
		display: none;
	}

	#parmalat_1996 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1996 .polaroid {
		display: none;
	}

	#parmalat_1997 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1997 .polaroid {
		display: none;
	}

	#parmalat_1998 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1998 .polaroid {
		display: none;
	}

	#parmalat_1999 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_1999 .polaroid {
		display: none;
	}
	#parmalat_2000 .story {
		background-size: cover;
		height: 46vh;
	}
	#parmalat_2000 .polaroid{
		display: none;
	}
	#parmalat_2000 .polaroid2 {
		height: auto;
	}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	#header,
	#parmalat_1992,
	#parmalat_1992,
	#parmalat_1993a,
	#parmalat_1993b,
	#parmalat_1994,
	#parmalat_1996,
	#parmalat_1997,
	#parmalat_1998,
	#parmalat_1999,
	#parmalat_2000
	{
		height: 80vh;
	}
	.story{
		min-width: 100%;
		width: 100%;
		background-size: cover;
		height: 80vh;
	}
	#header .story {
		height: 80vh;
		background-size: cover;
	}
	#header .story,
	#parmalat_1992 .story,
	#parmalat_1993a .story,
	#parmalat_1993b .story,
	#parmalat_1994 .story,
	#parmalat_1996 .story,
	#parmalat_1997 .story,
	#parmalat_1998 .story,
	#parmalat_1999 .story,
	#parmalat_2000 .story
	{
		background-size: cover;
		height: 80vh;
		background-position-x: center;
		background-position-y: center;
	}

}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	#header,
	#parmalat_1992,
	#parmalat_1992,
	#parmalat_1993a,
	#parmalat_1993b,
	#parmalat_1994,
	#parmalat_1996,
	#parmalat_1997,
	#parmalat_1998,
	#parmalat_1999,
	#parmalat_2000
	{
		height: 90vh;
		background-position-
	}
	.story{
		min-width: 100%;
		width: 100%;
		background-size: cover;
		height: 90vh;
	}
	#header .story,
	#parmalat_1992 .story,
	#parmalat_1993a .story,
	#parmalat_1993b .story,
	#parmalat_1994 .story,
	#parmalat_1996 .story,
	#parmalat_1997 .story,
	#parmalat_1998 .story,
	#parmalat_1999 .story,
	#parmalat_2000 .story
	{
		background-size: cover;
		height: 90vh;
		background-position-x: center;
		background-position-y: center;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	#header,
	#parmalat_1992,
	#parmalat_1993a,
	#parmalat_1993b,
	#parmalat_1994,
	#parmalat_1996,
	#parmalat_1997,
	#parmalat_1998,
	#parmalat_1999,
	#parmalat_2000
	{
		height: 114vh;
	}
	.story{
		min-width: 100%;
		width: 100%;
		background-size: contain;
		height: 114vh;
	}
	#header .story,
	#parmalat_1992 .story,
	#parmalat_1993a .story,
	#parmalat_1993b .story,
	#parmalat_1994 .story,
	#parmalat_1996 .story,
	#parmalat_1997 .story,
	#parmalat_1998 .story,
	#parmalat_1999 .story,
	#parmalat_2000 .story
	{
		background-size: contain;
		height: 114vh;
		background-position-x: center !important;
		background-position-y: center !important;
	}
	#parmalat_1993a .polaroid,
	#parmalat_1993b .polaroid,
	#parmalat_1994 .polaroid,
	#parmalat_1996 .polaroid,
	parmalat_1997 .polaroid,
	#parmalat_1998 .polaroid,
	parmalat_1999 .polaroid,
	#parmalat_2000 .polaroid,
	#parmalat_2000 .polaroid2
	{
		width: 100%;
	}
}