@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ */

body {
	margin: 0;
	top: 0;
	left: 0;
	bottom: 0;
	right:0;}

.section a:hover { 
	border: 0;}



/* Mobile Layout: 480px and below. */
@media screen and (min-width:320px) and (max-width:737px) and (orientation: landscape) {}

@media only screen and (orientation:portrait) and (min-width: 320px) and (max-width: 768px) {

/* Section One : Rotating A - START */
.intro img { /* ROTATING A */
	position: absolute;
	top: 50%%;
	bottom: 0;
	left: 0%;
	right: 0;
	margin: 0% 0% 0% 0%;
	height: auto;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION ONE : BACKGROUND DOTS START */
.holderdots {
    width: 85%;
    height: 88%;
    margin: 10% 6% 0% 1%;
    background-color: #;
    position: fixed;
    top: 0%;
    bottom: 0;
    opacity: .5;}
 /* SECTION ONE : BACKGROUND DOTS END */
#scrollarrow { visibility: hidden;}
.regulartext, .regulartext a:hover { visibility:hidden; }

/* SIDE CATEGORIES */
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: left;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -10px;
	line-height: 5px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* SECTION TWO : PROJECT SECTIONS START */ 
#brandleft { position: absolute; float: left; z-index: 30; height: 40%; top: 10%; left: 20%;}
#brandright { position: absolute; float: right; right: 20%; z-index: 50; height: 50%; top: 40%;}

#promoleft { position: absolute; float: left; z-index: 70; height: 40%; top: 50%; left: 10%; z-index: 600;}
#promomid { position: absolute; float:right; height: 40%; top:15%; max-width: 100%; margin: 0 0 0 40%; z-index: 50;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#promoright { position: absolute; float: right; right: 12%; z-index: 80; height: 40%; top: 30%; z-index: 400;}

#publeft { position: absolute; float: left; z-index: 70; height: 30%; top: 10%; left: 15%;}
#pubmid { position: absolute; z-index: 100; height: 45%; left: 50%; top: 27.5%; max-width: 100%; margin: 0 0% 0% 0%;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#pubright { position: absolute; float: right; right: 15%; z-index: 50; height: 30%; top: 60%;}

#infog { width: 40%; margin: 0 30% 0 30%;}
#ill { width: 70%; margin: 0% 15% 0 15%; }
#pack {	width: 100%; margin: 0 0% 0 0%; 
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);}

#anim { width: 70%; margin: 0 15% 0 15%; }
/* SECTION TWO : PROJECT SECTIONS END */ 
/* SECTION TWO : TEXT SECTIONS START */ 
.tooltip {
	display: inline;
	font-size: 30px;}

.tooltip:hover:after {
	background: ;
	color: #fff;
	content: attr(title);
	position: absolute;
	width: 70%;
	margin: 0 15% 0 15%;
	line-height: 40px;
	top: 50%;
	font-weight: 400;
	display: block;
	z-index: 1000000;
	opacity: .95;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION TWO : TEXT SECTIONS END */ 


}

/* Desktop Layout: 769px to a max of 768px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 480px) and (orientation:landscape) {

/* SECTION ONE : BACKGROUND DOTS START */
.holderdots {
    width: 90%;
    height: 80%;
    margin: 7% 6% 0% 1%;
    background-color: #;
    position: fixed;
    top: 0%;
    bottom: 0;
    opacity: .5;}
 /* SECTION ONE : BACKGROUND DOTS END */

/* Section One : Rotating A - START */
.intro img { /* ROTATING A */
	position: absolute;
	top: 50%%;
	bottom: 0;
	left: 0%;
	right: 0;
	margin: 0% 15% 0% 15%;
	height: auto;
	width: 70%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

#intro {
	padding: 0% 0% 0 0%;
	text-align: left;}

#scrollarrow { /* SCROLL DOWN SECTION */
	position: absolute;
	text-align: center;
	width: 10%;
	margin: 0% 45% 0 45%;
	bottom: 25px;
	color: rgba(40,40,40,1.00);
	-webkit-animation: arrow-jump 3s infinite; /* Safari 4+ */
	-moz-animation:    arrow-jump 3s infinite; /* Fx 5+ */
	-o-animation:      arrow-jump 3s infinite; /* Opera 12+ */
	 animation:        arrow-jump 3s infinite; /* IE 10+, Fx 29+ */
	 visibility: hidden;}

#scrollarrow p {
	font-size: 20pt;
	font-weight: 200;
	margin: -10px 0 0 0;
	padding: 0;
	text-align: center;
	/* Safari */-webkit-transform: rotate(90deg);
	/* Firefox */-moz-transform: rotate(90deg);
	/* IE */-ms-transform: rotate(90deg);
	/* Opera */-o-transform: rotate(90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

@-webkit-keyframes arrow-jump {
  	0%   { opacity: 0;}
  	50% { opacity: 1;}
  	100% { opacity: 0;
  	-webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -0-transform: translateY(40px);
    transform: translateY(40px);}}

.regulartext, .regulartext a:hover {
	font-size: 10pt;
	border-bottom: 0pt solid #000000;
	text-decoration: none;
	margin: 0;
	font-weight: 200;
	visibility: hidden;}
/* Section One : Rotating A - END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS LAYOUT START */
.section {
	display: absolute;
	width: 100%;
	height: 100%;}

.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 12px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: left;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -10px;
	line-height: 5px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* SECTION TWO : PROJECT SECTIONS LAYOUT END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS START */ 
#brandleft { position: absolute; float: left; z-index: 30; height: 50%; top: 25%; left: 20%;}
#brandright { position: absolute; float: right; right: 20%; z-index: 50; height: 60%; top: 20%;}

#promoleft { position: absolute; float: left; z-index: 70; height: 50%; top: 40%; left: 10%; z-index: 600;}
#promomid { position: absolute; float:right; height: 60%; top:15%; max-width: 100%; margin: 0 0 0 50%; z-index: 500;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#promoright { position: absolute; float: right; right: 12%; z-index: 50; height: 60%; top: 25%; z-index: 400;}

#publeft { position: absolute; float: left; z-index: 70; height: 40%; top: 30%; left: 15%;}
#pubmid { position: absolute; z-index: 100; height: 55%; top: 22.5%; max-width: 100%; margin: 0 0% 0 45%;
-webkit-transform: translateX(-45%); -ms-transform: translateX(-45%); transform: translateX(-45%);}
#pubright { position: absolute; float: right; right: 15%; z-index: 50; height: 40%; top: 30%;}

#infog { width: 25%; margin: 0 37.5% 0 37.5%;}
#ill { width: 40%; margin: 0% 30% 0 30%; }
#pack {	width: 50%; margin: 0 25% 0 25%; }
#anim { width: 60%; margin: 0 20% 0 20%; }

/* SECTION TWO : PROJECT SECTIONS END */ 
/* SECTION TWO : TEXT SECTIONS START */ 
.tooltip {
	display: inline;
	font-size: 35px;}

.tooltip:hover:after {
	background: ;
	color: #fff;
	content: attr(title);
	position: absolute;
	width: 70%;
	margin: 0 15% 0 15%;
	line-height: 40px;
	top: 50%;
	font-weight: 400;
	display: block;
	z-index: 1000000;
	opacity: .95;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION TWO : TEXT SECTIONS END */ 
/*********************************************************************/

}
@media screen and (min-width:769px) and (max-width: 1279px) {
/* SECTION ONE : BACKGROUND DOTS START */
.holderdots {
    width: 93%;
    height: 88%;
    margin: 4% 6% 0% 1%;
    background-color: #;
    position: fixed;
    top: 0%;
    bottom: 0;
    opacity: .5;}
 /* SECTION ONE : BACKGROUND DOTS END */

/* Section One : Rotating A - START */
.intro img { /* ROTATING A */
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0% 15% 0 15%;
	width: 70%;
	height: auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

#intro {
	padding: 0% 0% 0 0%;
	text-align: left;}

#scrollarrow { /* SCROLL DOWN SECTION */
	position: absolute;
	text-align: center;
	width: 10%;
	margin: 0% 45% 0 45%;
	bottom: 25px;
	color: rgba(40,40,40,1.00);
	-webkit-animation: arrow-jump 3s infinite; /* Safari 4+ */
	-moz-animation:    arrow-jump 3s infinite; /* Fx 5+ */
	-o-animation:      arrow-jump 3s infinite; /* Opera 12+ */
	 animation:         arrow-jump 3s infinite; /* IE 10+, Fx 29+ */
	visibility: visible;}

#scrollarrow p {
	font-size: 30pt;
	font-weight: 200;
	margin: -15px 0 0 0;
	padding: 0;
	text-align: center;
	/* Safari */-webkit-transform: rotate(90deg);
	/* Firefox */-moz-transform: rotate(90deg);
	/* IE */-ms-transform: rotate(90deg);
	/* Opera */-o-transform: rotate(90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

@-webkit-keyframes arrow-jump {
  	0%   { opacity: 0;}
  	50% { opacity: 1;}
  	100% { opacity: 0;
  	-webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -0-transform: translateY(40px);
    transform: translateY(40px);}}

.regulartext, .regulartext a:hover {
	font-size: 10pt;
	border-bottom: 0pt solid #000000;
	text-decoration: none;
	margin: 0;
	font-weight: 200;
	visibility: visible;}

/* Section One : Rotating A - END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS LAYOUT START */
.section {
	display: absolute;
	width: 100%;
	height: 100%;}

.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 12px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: left;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -10px;
	line-height: 5px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

.section a:hover {
	border: 0;}

/* SECTION TWO : PROJECT SECTIONS LAYOUT END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS START */ 
#brandleft { position: absolute; float: left; z-index: 30; height: 50%; top: 25%; left: 20%;}
#brandright { position: absolute; float: right; right: 20%; z-index: 50; height: 60%; top: 20%;}

#promoleft { position: absolute; float: left; z-index: 70; height: 40%; top: 40%; left: 10%; z-index: 600;}
#promomid { position: absolute; float:right; height: 50%; top:20%; max-width: 100%; margin: 0 0 0 50%; z-index: 500;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#promoright { position: absolute; float: right; right: 12%; z-index: 50; height: 50%; top: 25%; z-index: 400;}

#publeft { position: absolute; float: left; z-index: 70; height: 30%; top: 35%; left: 13%;}
#pubmid { position: absolute; z-index: 100; height: 55%; top: 22.5%; max-width: 100%; margin: 0 0% 0 45%;
-webkit-transform: translateX(-45%); -ms-transform: translateX(-45%); transform: translateX(-45%);}

#pubright { position: absolute; float: right; right: 13%; z-index: 50; height: 30%; top: 35%;}
#infog { width: 30%; margin: 0 35% 0 35%;}
#ill { width: 60%; margin: 0% 20% 0 20%; }
#pack {	width: 60%; margin: 0 20% 0 20%; }
#anim { width: 50%; margin: 0 25% 0 25%; }

/* SECTION TWO : PROJECT SECTIONS END */ 
/* SECTION TWO : TEXT SECTIONS START */ 
.tooltip {
	display: inline;
	font-size: 45px;}

.tooltip:hover:after {
	background: ;
	color: #fff;
	content: attr(title);
	position: absolute;
	width: 70%;
	margin: 0 15% 0 15%;
	line-height: 75px;
	top: 50%;
	font-weight: 400;
	display: block;
	z-index: 1000000;
	opacity: .95;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION TWO : TEXT SECTIONS END */ 
/*********************************************************************/
}

/* Desktop Layout: 1024px to a max of 1279px *//*********************************************************************/
@media screen and (min-width:1024px) and (max-width: 1279px) and (orientation:landscape) {

/* SECTION ONE : BACKGROUND DOTS START */
.holderdots {
    width: 93%;
    height: 88%;
    margin: 4% 6% 0% 1%;
    background-color: #;
    position: fixed;
    top: 0%;
    bottom: 0;
    opacity: .5;}
 /* SECTION ONE : BACKGROUND DOTS END */

/* Section One : Rotating A - START */
.intro img { /* ROTATING A */
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0% 15% 0 15%;
	width: 70%;
	height: auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

#intro {
	padding: 0% 0% 0 0%;
	text-align: left;}

#scrollarrow { /* SCROLL DOWN SECTION */
	position: absolute;
	text-align: center;
	width: 10%;
	margin: 0% 45% 0 45%;
	bottom: 25px;
	color: rgba(40,40,40,1.00);
	-webkit-animation: arrow-jump 3s infinite; /* Safari 4+ */
	-moz-animation:    arrow-jump 3s infinite; /* Fx 5+ */
	-o-animation:      arrow-jump 3s infinite; /* Opera 12+ */
	 animation:         arrow-jump 3s infinite; /* IE 10+, Fx 29+ */
	visibility: visible;}

#scrollarrow p {
	font-size: 30pt;
	font-weight: 200;
	margin: -15px 0 0 0;
	padding: 0;
	text-align: center;
	/* Safari */-webkit-transform: rotate(90deg);
	/* Firefox */-moz-transform: rotate(90deg);
	/* IE */-ms-transform: rotate(90deg);
	/* Opera */-o-transform: rotate(90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

@-webkit-keyframes arrow-jump {
  	0%   { opacity: 0;}
  	50% { opacity: 1;}
  	100% { opacity: 0;
  	-webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -0-transform: translateY(40px);
    transform: translateY(40px);}}

.regulartext, .regulartext a:hover {
	font-size: 10pt;
	border-bottom: 0pt solid #000000;
	text-decoration: none;
	margin: 0;
	font-weight: 200;
	visibility: visible;}

/* Section One : Rotating A - END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS LAYOUT START */
.section {
	display: absolute;
	width: 100%;
	height: 100%;}

.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 12px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: left;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -10px;
	line-height: 5px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

.section a:hover {
	border: 0;}

/* SECTION TWO : PROJECT SECTIONS LAYOUT END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS START */ 
#brandleft { position: absolute; float: left; z-index: 30; height: 50%; top: 25%; left: 20%;}
#brandright { position: absolute; float: right; right: 20%; z-index: 50; height: 60%; top: 20%;}

#promoleft { position: absolute; float: left; z-index: 70; height: 40%; top: 40%; left: 10%; z-index: 600;}
#promomid { position: absolute; float:right; height: 50%; top:20%; max-width: 100%; margin: 0 0 0 50%; z-index: 500;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#promoright { position: absolute; float: right; right: 12%; z-index: 50; height: 50%; top: 25%; z-index: 400;}

#publeft { position: absolute; float: left; z-index: 70; height: 30%; top: 35%; left: 13%;}
#pubmid { position: absolute; z-index: 100; height: 55%; top: 22.5%; max-width: 100%; margin: 0 0% 0 45%;
-webkit-transform: translateX(-45%); -ms-transform: translateX(-45%); transform: translateX(-45%);}

#pubright { position: absolute; float: right; right: 13%; z-index: 50; height: 30%; top: 35%;}
#infog { width: 30%; margin: 0 35% 0 35%;}
#ill { width: 60%; margin: 0% 20% 0 20%; }
#pack {	width: 60%; margin: 0 20% 0 20%; }
#anim { width: 50%; margin: 0 25% 0 25%; }

/* SECTION TWO : PROJECT SECTIONS END */ 
/* SECTION TWO : TEXT SECTIONS START */ 
.tooltip {
	display: inline;
	font-size: 45px;}

.tooltip:hover:after {
	background: ;
	color: #fff;
	content: attr(title);
	position: absolute;
	width: 70%;
	margin: 0 15% 0 15%;
	line-height: 75px;
	top: 50%;
	font-weight: 400;
	display: block;
	z-index: 1000000;
	opacity: .95;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION TWO : TEXT SECTIONS END */ 
/*********************************************************************/
}




/* Desktop Layout: 1280px and above */ /*********************************************************************/
@media screen and (min-width:1280px) and (orientation:landscape) {

/* SECTION ONE : BACKGROUND DOTS START */
.holderdots {
    width: 95%;
    height: 88%;
    margin: 3% 4% 0% 1%;
    background-color: #;
    position: fixed;
    top: 0%;
    bottom: 0;
    opacity: .5;}
 /* SECTION ONE : BACKGROUND DOTS END */

/* Section One : Rotating A - START */
.intro img { /* ROTATING A */
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	margin: 0 25% 0 25%;
	height: auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

#intro {
	padding: 0% 0% 0 0%;
	text-align: left;}

#scrollarrow { /* SCROLL DOWN SECTION */
	position: absolute;
	text-align: center;
	width: 10%;
	margin: 0% 45% 0 45%;
	bottom: 25px;
	color: rgba(40,40,40,1.00);
	-webkit-animation: arrow-jump 3s infinite; /* Safari 4+ */
	-moz-animation:    arrow-jump 3s infinite; /* Fx 5+ */
	-o-animation:      arrow-jump 3s infinite; /* Opera 12+ */
	 animation:         arrow-jump 3s infinite; /* IE 10+, Fx 29+ */
	visibility: visible;}

#scrollarrow p {
	font-size: 30pt;
	font-weight: 200;
	margin: -15px 0 0 0;
	padding: 0;
	text-align: center;
	/* Safari */-webkit-transform: rotate(90deg);
	/* Firefox */-moz-transform: rotate(90deg);
	/* IE */-ms-transform: rotate(90deg);
	/* Opera */-o-transform: rotate(90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

@-webkit-keyframes arrow-jump {
  	0%   { opacity: 0;}
  	50% { opacity: 1;}
  	100% { opacity: 0;
  	-webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -0-transform: translateY(40px);
    transform: translateY(40px);}}

.regulartext, .regulartext a:hover {
	font-size: 10pt;
	border-bottom: 0pt solid #000000;
	text-decoration: none;
	margin: 0;
	font-weight: 200;
	visibility: visible;}

/* Section One : Rotating A - END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS LAYOUT START */
.section {
	display: absolute;
	width: 100%;
	height: 100%;}

.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 16px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: left;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -10px;
	line-height: 5px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

.section a:hover {
	border: 0;}


/* SECTION TWO : PROJECT SECTIONS LAYOUT END */
/*********************************************************************/
/* SECTION TWO : PROJECT SECTIONS START */ 
#brandleft { position: absolute; float: left; z-index: 30; height: 50%; top: 25%; left: 20%;}
#brandright { position: absolute; float: right; right: 20%; z-index: 50; height: 60%; top: 20%;}

#promoleft { position: absolute; float: left; z-index: 70; height: 40%; top: 40%; left: 10%; z-index: 600;}
#promomid { position: absolute; float:right; height: 50%; top:20%; max-width: 100%; margin: 0 0 0 50%; z-index: 500;
-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#promoright { position: absolute; float: right; right: 12%; z-index: 50; height: 50%; top: 25%; z-index: 400;}

#publeft { position: absolute; float: left; z-index: 70; height: 30%; top: 35%; left: 13%;}
#pubmid { position: absolute; z-index: 100; height: 55%; top: 22.5%; max-width: 100%; margin: 0 0% 0 45%;
-webkit-transform: translateX(-45%); -ms-transform: translateX(-45%); transform: translateX(-45%);}

#pubright { position: absolute; float: right; right: 13%; z-index: 50; height: 30%; top: 35%;}
#infog { width: 25%; margin: 0 37.5% 0 37.5%;}
#ill { width: 40%; margin: 0% 30% 0 30%; }
#pack {	width: 50%; margin: 0 25% 0 25%; }
#anim { width: 40%; margin: 0 30% 0 30%; }

/* SECTION TWO : PROJECT SECTIONS END */ 
/* SECTION TWO : TEXT SECTIONS START */ 
.tooltip {
	display: inline;
	font-size: 50px;}

.tooltip:hover:after {
	background: ;
	color: #fff;
	content: attr(title);
	position: absolute;
	width: 70%;
	margin: 0 15% 0 15%;
	line-height: 75px;
	top: 50%;
	font-weight: 400;
	display: block;
	z-index: 1000000;
	opacity: .95;
	text-align: center;
	text-decoration: underline;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}

/* SECTION TWO : TEXT SECTIONS END */ 
/*********************************************************************/

.mobile {display: none;}

}