@charset "UTF-8";
/* =============================================================================
   STRUCTURAL STYLES
   ========================================================================== */

body {
	font-family: 'Doppio One', sans-serif;
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	cursor: default;
}
#target {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background: #eeeeee;
	overflow: hidden;
}
#background {
	position: absolute;
	width:2476px;
	height:1704px;
	background: url(../img/background.jpg) no-repeat left bottom;
	left: -438px!important;
	top: -650px!important;
	z-index: 1;	
}
#hand {
	position: absolute;
	width:1115px;
	height:940px;
	background: url(../img/hand.png) no-repeat right top;
	left: -680px!important;
	top: 30px!important;
	z-index: 2;	
}
#vignette {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;	
}
#vignette img {
	position: absolute;
	width: 100%;
	height: 100%;
}
#lastfm-container {
	position: relative;
	display: block;
	width: 200px;
	height: 400px;
	margin-left: 1450px!important;
	top: 700px!important;
}
#mobile {
	position: absolute;
	width:1115px;
	height:940px;
	left: -680px!important;
	top: 30px!important;
	z-index: 4;	
}
#mobile #interface {
	position: absolute;
	width: 208px;
	height: 311px;
	background: #000000;
	top: 134px;
	right: 74px;
}
#content-container {
	position: absolute;
	width: 550px;
	height: 500px;
	left: 450px!important;
	top: 80px!important;
	z-index: 5;	
}
/* =============================================================================
   GENERAL TYPOGRAPHY STYLING
   ========================================================================== */
a {
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	padding:0;
	margin:0;
}
img {
	border:0;
}
/* =============================================================================
   IPHONE LAYER
   ========================================================================== */
   
#iphone-scrollcontainer {
	height:311px;
	width:208px;
	position: relative;
	background-color:#000000;
}
#finger-tips {
	position: absolute;
	right: 0;
	top: 146px;
	background: url(../img/finger_tips.png) no-repeat top left;
	z-index: 100;
	width: 7px;
	height: 159px;
}
/* =============================================================================
   LOCK SCREEN STYLES
   ========================================================================== */

#iphone-lock {
	overflow: hidden;
	height:100%;
	width:100%;
	background: #000 url(../img/lock_screen.jpg) no-repeat top left;
}
#lock-menu-bar {
	position: relative;
	width: 100%;
	height: 12px;
	background: url(../img/lock-menu.png) no-repeat left top;
	z-index: 5;
}
#unlock-top {
	position: relative;
	height:62px;
	background-image:url(../img/lock-top.png);
}
#unlock-spacer {
	height:175px; /* Total height = 461px - 95px (top) - 94px (bottom) */
}
#unlock-bottom {
	position: relative;
	height:62px;
	background-image:url(../img/lock-bottom.png);
}
#slide-to-unlock {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height:62px;
	background-image:url(../img/slide-to-unlock.gif);
}
#unlock-slider-wrapper {
	padding-left:37px;
	padding-top:15px;
}
#unlock-slider {
	width:134px;
	height:50px;
}
#unlock-handle {
	position: absolute;
	z-index: 10;
	height: 34px;
	width: 48px;
	top: 0px;
	left: 0px;
	background-image: url(../img/lock-slider.png);
	cursor: hand;
}
#unlock-top .time {
	text-align:center;
	color:#FFFFFF;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size:38px;
	line-height: 38px;
	padding:4px 0 0 0;
	text-shadow: 0px -1px 1px #1f4161;
}
#unlock-top .date {
	text-align:center;
	color:#FFFFFF;
	font-family: Helvetica, Arial, sans-serif;
	font-size:11px;
	line-height: 11px;
	text-shadow: 0px -1px 1px #1f4161;
}
.ui-slider {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
}
.ui-slider-handle {
	margin-left: -24px;
	height: 34px;
} /* Centres the slider handle */
/* =============================================================================
   IPHONE NAVIGATION STYLES
   ========================================================================== */

#iphone-menu {
	display: none;
	overflow: hidden;
	height:100%;
	width:100%;
	background: url(../img/nav-bg.jpg) no-repeat left bottom;
}
#iphone-menu #menu-bar {
	position: relative;
	width: 100%;
	height: 12px;
	background: url(../img/menu.png) no-repeat left top;
	z-index: 5;
}
#iphone-menu #menu-bar .time {
	text-align:center;
	color:#d0d0d0;
	font-family: Helvetica, Arial, sans-serif;
	font-size:9px;
	line-height: 9px;
	font-weight: bold;
	padding:1px 0 0 0;
}
#iphone-menu #navigation {
	position: relative;
}
#iphone-menu #navigation ul {
	display: block;
	padding-top: 67px;
}
#iphone-menu #navigation ul li a {
	display: block;
	background: url(../img/nav-gradient.png) no-repeat left 0px;
	height: 38px;
	font-size: 22px;
	line-height: 24px;
	font-weight: 400;
	padding: 18px 30px 2px 15px;
	text-decoration: none;
}
#iphone-menu #navigation ul li#nav1 a {
	color: #d5dfe8;
	text-shadow: 0px -1px 1px #1f4161;
}
#iphone-menu #navigation ul li#nav2 a {
	color: #dddce6;
	text-shadow: 0px -1px 1px #3a365a;
}
#iphone-menu #navigation ul li#nav3 a {
	color: #e1dbe5;
	text-shadow: 0px -1px 1px #493255;
}
#iphone-menu #navigation ul li#nav4 a {
	color: #e4dae3;
	text-shadow: 0px -1px 1px #5c3358;
}
#iphone-menu #navigation ul li#nav1 a:hover, #iphone-menu #navigation ul li#nav2 a:hover, #iphone-menu #navigation ul li#nav3 a:hover, #iphone-menu #navigation ul li#nav4 a:hover {
	background: url(../img/nav-gradient.png) no-repeat left -58px;
	color: #ffffff;
}
#iphone-menu #navigation ul li#nav1 a:active, #iphone-menu #navigation ul li#nav2 a:active, #iphone-menu #navigation ul li#nav3 a:active, #iphone-menu #navigation ul li#nav4 a:active {
	background: url(../img/nav-gradient.png) no-repeat left -116px;
	color: #ffffff;
}
#iphone-menu #navigation ul li#nav1.active a, #iphone-menu #navigation ul li#nav2.active a, #iphone-menu #navigation ul li#nav3.active a, #iphone-menu #navigation ul li#nav4.active a {
	background: url(../img/nav-gradient.png) no-repeat left -174px;
	color: #ffffff;
}
#iphone-menu #navigation ul li#nav1.active a:active, #iphone-menu #navigation ul li#nav2.active a:active, #iphone-menu #navigation ul li#nav3.active a:active, #iphone-menu #navigation ul li#nav4.active a:active {
	background: url(../img/nav-gradient.png) no-repeat left -232px;
	color: #ffffff;
}
#iphone-menu #navigation ul li#logo {
	position: absolute;
	display: block;
	width: 208px;
	height: 76px;
	top: 0;
	left: 0;
	z-index: 6;
}
#iphone-menu #navigation ul li#logo a {
	display: block;
	width: 208px;
	height: 76px;
	text-indent: -999px;
	background: url(../img/nav-logo.png) no-repeat left top;
	padding: 0;
	margin: 0;
}
#iphone-menu #navigation ul li#logo a:hover, #iphone-menu #navigation ul li#logo.active a {
	background: url(../img/nav-logo.png) no-repeat left -100px;
}
#iphone-menu #navigation ul li#logo a:active {
	background: url(../img/nav-logo.png) no-repeat left -200px;
}
/* =============================================================================
   HOMEPAGE CONTENT PANEL
   ========================================================================== */
   
#content-container #home {
}
#content-container #home .profile-pic {
	display: block;
	width: 222px;
	height: 249px;
	margin: 0 2px 0 0;
	float: left;
	opacity: 0.85;
	filter: alpha(opacity=85); /* For IE8 and earlier */
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
#content-container #home .profile-pic:hover {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
#content-container #home .welcome {
	display: block;
	width: 300px;
	height: 249px;
	float: left;
}
#content-container #home .welcome h2 {
	display: inline-block;
	padding: 8px 15px;
	font-weight: 400;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
}
#content-container #home .welcome h2.title-row1 {
	font-size: 48px;
	line-height: 48px;
	color: #d5dfe8;
	background-color: rgb(30, 84, 135);
	background-color: rgba(30, 84, 135, 0.9);
	margin-top: 53px;
	text-shadow: 0px -1px 1px #1f4161;
}
#content-container #home .welcome h2.title-row2 {
	font-size: 26px;
	line-height: 26px;
	color: #dddce6;
	background-color: rgb(73, 67, 125);
	background-color: rgba(73, 67, 125, 0.9);
	text-shadow: 0px -1px 1px #3a365a;
}
#content-container #home .welcome h2.title-row3 {
	font-size: 26px;
	line-height: 26px;
	color: #e1dbe5;
	background-color: rgb(98, 60, 116);
	background-color: rgba(98, 60, 116, 0.9);
	text-shadow: 0px -1px 1px #493255;
}
#content-container #home .welcome h2.title-row4 {
	font-size: 26px;
	line-height: 26px;
	color: #e4dae3;
	background-color: rgb(115, 56, 109);
	background-color: rgba(115, 56, 109, 0.9);
	text-shadow: 0px -1px 1px #5c3358;
}
#content-container #home .welcome h2.title-row1:hover {
	color: #ffffff;
	background-color: rgba(30, 84, 135, 1);
}
#content-container #home .welcome h2.title-row2:hover {
	color: #ffffff;
	background-color: rgba(73, 67, 125, 1);
}
#content-container #home .welcome h2.title-row3:hover {
	color: #ffffff;
	background-color: rgba(98, 60, 116, 1);
}
#content-container #home .welcome h2.title-row4:hover {
	color: #ffffff;
	background-color: rgba(115, 56, 109, 1);
}
#content-container #home .welcome ul#welcome-rotation  {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	-webkit-transform: translateZ(0);
}
#content-container #home .welcome ul#welcome-rotation li {
	position: absolute;
	opacity: 0;
	overflow: hidden;
	-webkit-animation: rotateWord 30s linear infinite 0s;
	-moz-animation: rotateWord 30s linear infinite 0s;
	-o-animation: rotateWord 30s linear infinite 0s;
	-ms-animation: rotateWord 30s linear infinite 0s;
	animation: rotateWord 30s linear infinite 0s;
	z-index: 1;
}
#content-container #home .welcome ul#welcome-rotation li:nth-child(2) { 
    -webkit-animation-delay: 5s; 
	-moz-animation-delay: 5s; 
	-o-animation-delay: 5s; 
	-ms-animation-delay: 5s; 
	animation-delay: 5s; 
}
#content-container #home .welcome ul#welcome-rotation li:nth-child(3) { 
    -webkit-animation-delay: 10s; 
	-moz-animation-delay: 10s; 
	-o-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
}
#content-container #home .welcome ul#welcome-rotation li:nth-child(4) { 
    -webkit-animation-delay: 15s;
	-moz-animation-delay: 15s; 
	-o-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
}
#content-container #home .welcome ul#welcome-rotation li:nth-child(5) { 
    -webkit-animation-delay: 20s;
	-moz-animation-delay: 20s; 
	-o-animation-delay: 20s; 
	-ms-animation-delay: 20s; 
	animation-delay: 20s; 
}
#content-container #home .welcome ul#welcome-rotation li:nth-child(6) { 
    -webkit-animation-delay: 25s;
	-moz-animation-delay: 25s; 
	-o-animation-delay: 25s; 
	-ms-animation-delay: 25s; 
	animation-delay: 25s; 
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; z-index: 1;}
    2% { opacity: 1; z-index: 2;}
    16% { opacity: 1; z-index: 2;}
	18% { opacity: 0; z-index: 1;}
    100% { opacity: 0; z-index: 1;}
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; z-index: 1;}
    2% { opacity: 1; z-index: 2;}
    16% { opacity: 1; z-index: 2;}
	18% { opacity: 0; z-index: 1;}
    100% { opacity: 0; z-index: 1;}
}
@-o-keyframes rotateWord {
   	0% { opacity: 0; z-index: 1;}
    2% { opacity: 1; z-index: 2;}
    16% { opacity: 1; z-index: 2;}
	18% { opacity: 0; z-index: 1;}
    100% { opacity: 0; z-index: 1;}
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; z-index: 1;}
    2% { opacity: 1; z-index: 2;}
    16% { opacity: 1; z-index: 2;}
	18% { opacity: 0; z-index: 1;}
    100% { opacity: 0; z-index: 1;}
}
@keyframes rotateWord {
    0% { opacity: 0; z-index: 1;}
    2% { opacity: 1; z-index: 2;}
    16% { opacity: 1; z-index: 2;}
	18% { opacity: 0; z-index: 1;}
    100% { opacity: 0; z-index: 1;}
}
#welcome-ie { display: none; }
x:-o-prefocus, #welcome-ie {
    display: block;
}
/* =============================================================================
   LATEST TWEET STYLES
   ========================================================================== */
   
#latest-tweet {
	font-size: 14px;
	line-height: 18px;
	display: inline-block;
	width: 345px;
	background-color: rgb(233, 233, 233);
	background: rgba(233, 233, 233, 0.9) url(../img/twitter-bird.png) no-repeat 15px 15px;
	margin-top: 50px;
	padding: 10px 15px 10px 100px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	min-height: 55px;
}
#latest-tweet:hover {
	background-color: rgba(233, 233, 233, 1);
}
#latest-tweet {
	color: #a1a1a1;
	text-shadow: 0px 1px 1px #ffffff;
}
#latest-tweet ul {
	list-style: none;
}
#latest-tweet a {
	color: #a1a1a1;
}
#latest-tweet a:hover {
	text-decoration: none;
}
#latest-tweet .tweet_time {
	font-size: 11px;
	display: block;
}
/* =============================================================================
   SOCIAL MEDIA PANEL STYLES
   ========================================================================== */
   
#social-media {
	display: inline-block;
	list-style: none;
	background-color: rgb(218, 217, 217);
	background-color: rgba(218, 217, 217, 0.9);
	margin: 2px 0 0 0;
	padding: 0;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	clear: both;
}
#social-media:hover {
	background-color: rgba(218, 217, 217, 1);
}
#social-media h3 {
	background: url(../img/social-media-title.png) no-repeat left center;
	display: block;
	float: left;
	font-size: 14px;
	font-weight: 400;
	line-height: 33px;
	color: rgb(255, 255, 255);
	color: rgba(255, 255, 255, 0.5);
	padding: 10px 17px 10px 15px;
	margin: 0;
	width: 65px;
}
#social-media:hover h3 {
	color: rgba(255, 255, 255, 1);
}
#social-media ul {
	display: block;
	float: left;
}
#social-media li {
	display: block;
	float: left;
	padding: 10px 3px 10px 3px;
	margin: 0;
}
#social-media li a {
	display: block;
	width: 32px;
	height: 33px;
	text-indent: -999px;
}
#social-media li#twitter-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
#social-media li#twitter-icon a:hover {
	background-position: 0px -50px;
}
#social-media li#twitter-icon a:active {
	background-position: 0px -100px;
}
#social-media li#facebook-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: -40px 0px;
}
#social-media li#facebook-icon a:hover {
	background-position: -40px -50px;
}
#social-media li#facebook-icon a:active {
	background-position: -40px -100px;
}
#social-media li#linkedin-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: -80px 0px;
}
#social-media li#linkedin-icon a:hover {
	background-position: -80px -50px;
}
#social-media li#linkedin-icon a:active {
	background-position: -80px -100px;
}
#social-media li#googleplus-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: -120px 0px;
}
#social-media li#googleplus-icon a:hover {
	background-position: -120px -50px;
}
#social-media li#googleplus-icon a:active {
	background-position: -120px -100px;
}
#social-media li#dribbble-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: -160px 0px;
}
#social-media li#dribbble-icon a:hover {
	background-position: -160px -50px;
}
#social-media li#dribbble-icon a:active {
	background-position: -160px -100px;
}
#social-media li#lastfm-icon a {
	background-image:url(../img/social-media-buttons.png);
	background-repeat: no-repeat;
	background-position: -200px 0px;
	padding-right: 12px;
}
#social-media li#lastfm-icon a:hover {
	background-position: -200px -50px;
}
#social-media li#lastfm-icon a:active {
	background-position: -200px -100px;
}
/* =============================================================================
   INFO PANEL STYLES
   ========================================================================== */

#info {
}
#info h2 {
	display: inline-block;
	padding: 8px 15px;
	font-size: 36px;
	line-height: 36px;
	font-weight: 400;
	color: #d5dfe8;
	background-color: rgb(30, 84, 135);
	background-color: rgba(30, 84, 135, 0.9);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
	text-shadow: 0px -1px 1px #1f4161;
}
#info h2:hover {
	color: #ffffff;
	background-color: rgba(30, 84, 135, 1);
}
#info #info1, #info #info2, #info #info3, #info #info4 {
	display: block;
	width: 502px;
	height: 400px;
}
#info p {
	display: block;
	width: 470px;
	font-size: 16px;
	line-height: 20px;
	color: #d5dfe8;
	background-color: rgb(30, 84, 135);
	background-color: rgba(30, 84, 135, 0.9);
	padding: 15px;
	margin: 0 0 2px 0;
	text-shadow: 0px -1px 1px #1f4161;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
#info p:hover {
	color: #ffffff;
	background-color: rgba(30, 84, 135, 1);
}
#info1 .experience {
	display: block;
	width: 472px;
	padding:15px;
	text-align: center;
	height: 320px;
	overflow: hidden;
	background-color: rgb(233, 233, 233);
	background-color: rgba(233, 233, 233, 0.9);
}
#info1 .experience:hover {
	background-color: rgba(233, 233, 233, 1);
}
#info1 .experience img {
	opacity: 0.7;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}
#info1 .experience:hover img {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}


#info2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 502px;
	overflow: hidden;
}
#info2 ul li {
	display: block;
	float: left;
	margin: 0 2px 2px 0;
}
#info2 ul li a {
	display: block;
	width: 249px;
	height: 102px;
	background-color: rgb(233, 233, 233);
	background-color: rgba(233, 233, 233, 0.9);
	text-indent: -999px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
#info2 ul li a:hover {
	background-color: rgba(233, 233, 233, 1);
}
#info2 ul li.prudential a {
	background-image: url(../img/info-pru-logo.png);
	background-repeat: no-repeat;
	background-position: center 35px;
}
#info2 ul li.prudential a:hover {
	background-position: center -65px;
}
#info2 ul li.vs a {
	background-image: url(../img/info-vs-logo.png);
	background-repeat: no-repeat;
	background-position: center 28px;
}
#info2 ul li.vs a:hover {
	background-position: center -72px;
}
#info2 ul li.diageo a {
	background-image: url(../img/info-diageo-logo.png);
	background-repeat: no-repeat;
	background-position: center 35px;
}
#info2 ul li.diageo a:hover {
	background-position: center -65px;
}
#info2 ul li.guinness a {
	background-image: url(../img/info-guinness-logo.png);
	background-repeat: no-repeat;
	background-position: center 18px;
}
#info2 ul li.guinness a:hover {
	background-position: center -82px;
}
#info2 ul li.johnmenzies a {
	background-image: url(../img/info-johnmenzies-logo.png);
	background-repeat: no-repeat;
	background-position: center 22px;
}
#info2 ul li.johnmenzies a:hover {
	background-position: center -78px;
}
#info2 ul li.walkers a {
	background-image: url(../img/info-walkers-logo.png);
	background-repeat: no-repeat;
	background-position: center 3px;
}
#info2 ul li.walkers a:hover {
	background-position: center -197px;
}
#info3 .info3_details {
	display: block;
  	width: 470px;
	background-color: rgb(233, 233, 233);
  	background-color: rgba(233, 233, 233, 0.9);
	font-size: 16px;
	line-height: 20px;
	color: #a1a1a1;
	text-shadow: 0px 1px 1px #ffffff;
	padding: 15px 15px 40px 15px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	overflow: auto;
}
#info3 .info3_details:hover {
  	background-color: rgba(233, 233, 233, 1);
	color: #a1a1a1;
}
#info3 .info3_details h3 {
	color: rgba(30, 84, 135, 1);
	font-size: 18px;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(30, 84, 135, 0.2);
}
#info3 #chart dt{
  width:100px;
  float:left;
  margin:0 20px 5px 0;
 
  padding:2px 0;
  display:inline;
  text-align:right;
}

#info3 #chart dd{
 	width:340px;
  	float:left;
 	margin-bottom:5px;
  	display:inline;
  	background: -moz-linear-gradient(top, rgba(196,196,196,0.6) 0%, rgba(206,206,206,0.6) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,196,196,0.6)), color-stop(100%,rgba(206,206,206,0.6))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(196,196,196,0.6) 0%,rgba(206,206,206,0.6) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(196,196,196,0.6) 0%,rgba(206,206,206,0.6) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(196,196,196,0.6) 0%,rgba(206,206,206,0.6) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(196,196,196,0.6) 0%,rgba(206,206,206,0.6) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6c4c4c4', endColorstr='#e6cecece',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	overflow: hidden;
}
#info3 .info3_details:hover dd {
	background: -moz-linear-gradient(top, rgba(196,196,196,1) 0%, rgba(206,206,206,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,196,196,1)), color-stop(100%,rgba(206,206,206,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(196,196,196,1) 0%,rgba(206,206,206,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(196,196,196,1) 0%,rgba(206,206,206,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(196,196,196,1) 0%,rgba(206,206,206,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(196,196,196,1) 0%,rgba(206,206,206,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6c4c4c4', endColorstr='#e6cecece',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.65);
	-moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.65);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.65);
}
#info3 #chart dd span.data{
	color: rgb(255,255,255);
	color: rgba(255,255,255, 0.75);
	background:#09f;
 	text-align: center;
	padding:3px 0;
 	display:block;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	background: -moz-linear-gradient(top, rgba(147,169,192,0.9) 0%, rgba(126,150,177,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,169,192,0.9)), color-stop(100%,rgba(126,150,177,0.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(147,169,192,0.9) 0%,rgba(126,150,177,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(147,169,192,0.9) 0%,rgba(126,150,177,0.9) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(147,169,192,0.9) 0%,rgba(126,150,177,0.9) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(147,169,192,0.9) 0%,rgba(126,150,177,0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e693a9c0', endColorstr='#e67e96b1',GradientType=0 ); /* IE6-9 */
  	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
#info3 #chart dd span.data:hover{
	color: rgba(255,255,255,1);
	background-color: rgb(75,113,149); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(75,113,149,1) 0%, rgba(30,84,135,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(75,113,149,1)), color-stop(100%,rgba(30,84,135,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(75,113,149,1) 0%,rgba(30,84,135,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(75,113,149,1) 0%,rgba(30,84,135,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(75,113,149,1) 0%,rgba(30,84,135,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(75,113,149,1) 0%,rgba(30,84,135,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b7195', endColorstr='#1e5487',GradientType=0 ); /* IE6-9 */
}
#info3 #chart dd span.data span.hover {
	display: none;
}
#info3 #chart dd span.data:hover span.hover {
	display: inline;
}
#info3 #chart dd span.data:hover span.percentage {
	display: none;
}
#info3 #data-one {
	width:100%;
}
#info3 #data-two {
	width:95%;
}
#info3 #data-three {
	width:90%;
}
#info3 #data-four {
	width:95%;
}
#info3 #data-five {
	width:95%;
}
#info3 #data-six {
	width:75%;
}
#info3 #data-seven {
	width:100%;
}
#info3 #data-one {
	-webkit-animation-name:bar-one; /* Give the bar an animation with a
    unique name */
}
#info3 #data-two {
	-webkit-animation-name:bar-two; /* Give the bar an animation with a
    unique name */
}
#info3 #data-three {
	-webkit-animation-name:bar-three; /* Give the bar an animation with a
    unique name */
}
#info3 #data-four {
	-webkit-animation-name:bar-four; /* Give the bar an animation with a
    unique name */
}
#info3 #data-five {
	-webkit-animation-name:bar-five; /* Give the bar an animation with a
    unique name */
}
#info3 #data-six {
	-webkit-animation-name:bar-six; /* Give the bar an animation with a
    unique name */
}
#info3 #data-seven {
	-webkit-animation-name:bar-seven; /* Give the bar an animation with a
    unique name */
}
#info3 #data-one, #info3 #data-two, #info3 #data-three, #info3 #data-four, #info3 #data-five, #info3 #data-six, #info3 #data-seven { /* Define animation styles for all three
    bars at once */
  -webkit-animation-duration:0.5s; /* Animation duration in seconds */
  -webkit-animation-iteration-count:1; /* Amount of times to loop */
  -webkit-animation-timing-function:ease-out; /* Ease in, out etc. */
}
  @-webkit-keyframes bar-one{
  0%{ /* Define bar-one styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-one styles at 100% (0.5 seconds) */
    width:100%;
  }
}
  @-webkit-keyframes bar-two{
  0%{ /* Define bar-two styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-two styles at 100% (0.5 seconds) */
    width:95%;
  }
}
  @-webkit-keyframes bar-three{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:90%;
  }
}
 @-webkit-keyframes bar-four{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:95%;
  }
}
 @-webkit-keyframes bar-five{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:95%;
  }
}
 @-webkit-keyframes bar-six{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:75%;
  }
}
@-webkit-keyframes bar-seven{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:100%;
  }
}

#info4 .timespent {
	display: block;
	width: 472px;
	height: 295px;
	padding: 40px 15px 15px;
	text-align: center;
	overflow: hidden;
	background-color: rgb(233, 233, 233);
	background-color: rgba(233, 233, 233, 0.9);
}
#info4 .timespent:hover {
	background-color: rgba(233, 233, 233, 1);
}
#info4 .timespent img {
	opacity: 0.7;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}
#info4 .timespent:hover img {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
/* =============================================================================
   SLIDER INTERFACE
   ========================================================================== */
   
.slides {
	position: relative;
	width: 500px;
	height: 400px;
}
.slides .slides_container {
	width:500px;
	display:none;
}
.slides .slides_container div.slide_panel {
	width:500px;
	height:400px;
	display:block;
}
.slides .prev {
	position: absolute;
	right: 52px;
	bottom: -52px;
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../img/arrow-left.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	text-indent: -999px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.slides .prev:hover {
	background: url(../img/arrow-left.png) no-repeat left -50px;
}
.slides .prev:active {
	background: url(../img/arrow-left.png) no-repeat left -100px;
}
.slides .next {
	position: absolute;
	right: 0px;
	bottom: -52px;
	display: block;
	width: 50px;
	height: 50px;
	background-image: url(../img/arrow-right.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	text-indent: -999px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.slides .next:hover {
	background-position: left -50px;
}
.slides .next:active {
	background-position: left -100px;
}
.slides ul.pagination {
	position: absolute;
	left: 0px;
	bottom: -27px;
	display: block;
	list-style:none;
	margin:0;
	padding:0;
}
.slides ul.pagination li {
	display: inline-block;
}
.slides ul.pagination li a {
	text-align: center;
	font-size: 16px;
	line-height: 16px;
	display: inline-block;
	padding: 4px 0 0 0;
	width: 25px;
	height: 21px;
	margin: 0 2px 0 0;
	text-decoration: none;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.slides ul.pagination li a:hover, .slides ul.pagination li.current a {
	color: #ffffff;
}

/* =============================================================================
   INFO PANEL SLIDER STYLES
   ========================================================================== */

#info .slides .prev, #info .slides .next {
	background-color: rgb(30, 84, 135);
	background-color: rgba(30, 84, 135, 0.7);
}
#info .slides .prev:hover, #info .slides .prev:active, #info .slides .next:hover, #info .slides .next:active {
	background-color: rgba(30, 84, 135, 1);
}
#info .slides ul.pagination li a {
	color: #d5dfe8;
	background-color: rgb(30, 84, 135);
	background-color: rgba(30, 84, 135, 0.7);
	text-shadow: 0px -1px 1px #2a5c8b;
}
#info .slides ul.pagination li a:hover, #info .slides ul.pagination li.current a {
	background: rgba(30, 84, 135, 1);
}
/* =============================================================================
   PORTFOLIO PANEL STYLES
   ========================================================================== */

#portfolio h2 {
	display: inline-block;
	padding: 8px 15px;
	font-size: 36px;
	line-height: 36px;
	font-weight: 400;
	color: #dddce6;
	background-color: rgb(73, 67, 125);
	background-color: rgba(73, 67, 125, 0.9);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
	text-shadow: 0px -1px 1px #3a365a;
}
#portfolio h2:hover {
	color: #ffffff;
	background-color: rgba(73, 67, 125, 1);
}
/* =============================================================================
   PORTFOLIO PANEL SLIDER STYLES
   ========================================================================== */

#portfolio .slides .prev, #portfolio .slides .next {
	background-color: rgb(73, 67, 125);
	background-color: rgba(73, 67, 125, 0.7);
}
#portfolio .slides .prev:hover, #portfolio .slides .prev:active, #portfolio .slides .next:hover, #portfolio .slides .next:active {
	background-color: rgba(73, 67, 125, 1);
}
#portfolio .slides ul.pagination li a {
	color: #dddce6;
	background-color: rgb(73, 67, 125);
	background-color: rgba(73, 67, 125, 0.7);
	text-shadow: 0px -1px 1px #2a5c8b;
}
#portfolio .slides ul.pagination li a:hover, #portfolio .slides ul.pagination li.current a {
	background-color: rgba(73, 67, 125, 1);
}
/* =============================================================================
   PORTFOLIO GRID STYLES
   ========================================================================== */

#portfolio .portfolio-panel {
	position: relative;
	display: block;
	float: left;
	width: 249px;
	height: 199px;
	
	margin-right: 2px;
	margin-bottom: 2px;
	overflow: hidden;
	text-align: center;
	cursor: default;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
#portfolio .portfolio-panel.right {
	margin-right: 0px;
}
#portfolio .portfolio-panel .overlay {
	position: absolute;
	width: 249px;
	height: 199px;
	overflow: hidden;
	top: 0;
	left: 0;
	background-color: rgb(233, 233, 233);
	background-color: rgba(233, 233, 233, 0.9);
	display: none;
	/* For IE8 and earlier */
	/*-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;*/

}
#portfolio .portfolio-panel img {
	width: 249px;
	height: 199px;
    display: block;
    position: relative;
	/*-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);*/
	opacity: 0.85;
	filter: alpha(opacity=85); /* For IE8 and earlier */
}
#portfolio .portfolio-panel h3 {
    text-align: center;
    position: relative;
    font-size: 17px;
    padding-bottom: 5px;
	width: 209px;
    background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.8);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    margin: 15px 20px 0px 20px;
    color: rgba(73, 67, 125, 1);
    opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	/*-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);*/
}
#portfolio .portfolio-panel p {
    font-size: 12px;
    position: relative;
    padding: 10px 10px 20px;
    text-align: center;
	color: #333;
    opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	width: 229px;
	/*-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);*/
    
}
#portfolio .portfolio-panel ul {
    font-size: 12px;
    position: relative;
    padding: 10px 10px 20px;
    text-align: center;
	color: #333;
    opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	width: 229px;
	/*-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);*/
    
}
#portfolio .portfolio-panel ul li {
	display: inline-block;
	padding: 3px 6px;
	color: #767676;
	text-shadow: 0px 1px 1px #ffffff;
	background-color: rgb(198,198,198); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(198,198,198,0.9) 0%, rgba(211,211,211,0.9) 10%, rgba(218,217,217,0.9) 70%, rgba(218,217,217,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,198,198,0.9)), color-stop(10%,rgba(211,211,211,0.9)), color-stop(70%,rgba(218,217,217,0.9)), color-stop(100%,rgba(218,217,217,0.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(198,198,198,0.9) 0%,rgba(211,211,211,0.9) 10%,rgba(218,217,217,0.9) 70%,rgba(218,217,217,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(198,198,198,0.9) 0%,rgba(211,211,211,0.9) 10%,rgba(218,217,217,0.9) 70%,rgba(218,217,217,0.9) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(198,198,198,0.9) 0%,rgba(211,211,211,0.9) 10%,rgba(218,217,217,0.9) 70%,rgba(218,217,217,0.9) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(198,198,198,0.9) 0%,rgba(211,211,211,0.9) 10%,rgba(218,217,217,0.9) 70%,rgba(218,217,217,0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6c6c6c6', endColorstr='#e6dad9d9',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 0 0 5px 0;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
	
}

#portfolio .portfolio-panel .overlay a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    color: #dddce6;
	font-size: 14px;
	background-color: rgb(73, 67, 125);
	background-color: rgba(73, 67, 125, 0.75);
    text-transform: uppercase;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
	text-shadow: 0px -1px 1px #3a365a;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
    /* -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);*/
}
#portfolio .portfolio-panel .overlay a:hover {
	color: #ffffff;
	background-color: rgba(73, 67, 125, 1);
    
}
#portfolio .portfolio-panel:hover img {
    /*-webkit-transform: scale(10);*/
    opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
}
#portfolio .portfolio-panel:hover .overlay,
#portfolio .portfolio-panel:active .overlay {
    display: block;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
#portfolio .portfolio-panel:hover h3,
#portfolio .portfolio-panel:hover p,
#portfolio .portfolio-panel:hover ul,
#portfolio .portfolio-panel:hover .overlay a{
    /*-webkit-transform: scale(1);*/
    opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
/* =============================================================================
   GALLERY PANEL STYLES
   ========================================================================== */

#gallery h2 {
	display: inline-block;
	padding: 8px 15px;
	font-size: 36px;
	line-height: 36px;
	font-weight: 400;
	color: #e1dbe5;
	background-color: rgb(98, 60, 116);
	background-color: rgba(98, 60, 116, 0.9);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
	text-shadow: 0px -1px 1px #493255;
}
#gallery h2:hover {
	color: #ffffff;
	background-color: rgba(98, 60, 116, 1);
}
#gallery .instagram .instagram-placeholder a {
	position: relative;
	display: block;
	float: left;
	width: 150px;
	height: 150px;
	margin-right: 2px;
	margin-bottom: 2px;
	overflow: hidden;
	text-align: center;
	cursor: default;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
#gallery .instagram .instagram-placeholder a img {
	position: absolute;
	width: 150px;
	height: 150px;
	top: 0;
	left: 0;
	opacity: 0.85;
	filter: alpha(opacity=85); /* For IE8 and earlier */
	z-index: 2;
	
}
#gallery .instagram .instagram-placeholder a:hover img {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	
}
#gallery .instagram .instagram-placeholder a:hover:after {
	background: url(../img/preview_image_icon.png);
    content: " ";
    position: absolute;
    height:61px;
    width:62px;
	top: 43px;
	left: 44px;
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	z-index: 3;
	
}
/* =============================================================================
   CONNECT PANEL STYLES
   ========================================================================== */

#connect h2 {
	display: inline-block;
	padding: 8px 15px;
	font-size: 36px;
	line-height: 36px;
	font-weight: 400;
	color: #e4dae3;
	background-color: rgb(115, 56, 109);
	background-color: rgba(115, 56, 109, 0.9);
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	margin: 0px 0px 2px 0px;
	text-shadow: 0px -1px 1px #5c3358;
}
#connect h2:hover {
	color: #ffffff;
	background-color: rgba(115, 56, 109, 1);
}
#connect p {
	display: block;
	width: 470px;
	font-size: 16px;
	line-height: 20px;
	color: #e4dae3;
	background-color: rgb(115, 56, 109);
	background-color: rgba(115, 56, 109, 0.9);
	padding: 15px;
	margin: 0 0 2px 0;
	text-shadow: 0px -1px 1px #1f4161;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
#connect p:hover {
	color: #ffffff;
	background-color: rgba(115, 56, 109, 1);
}
#connect a {
	color: #e4dae3;
}
#connect p:hover a {
	color: #ffffff;
}
#connect #form {
	display: block;
	width: 470px;
	background-color: rgb(233, 233, 233);
	background-color: rgba(233, 233, 233, 0.9);
	font-size: 16px;
	line-height: 20px;
	color: #a1a1a1;
	text-shadow: 0px 1px 1px #ffffff;
	padding: 15px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);	
}
#connect #form:hover {
	background-color: rgba(233, 233, 233, 1);
}

/* =============================================================================
   FOOTER STYLES
   ========================================================================== */
  
#footer {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background-color: rgb(39, 38, 38);
	background-color: rgba(39, 38, 38, 0.9);
	color: rgb(255, 255, 255);
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	line-height: 13px;
	padding: 5px;
	-webkit-box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);
	z-index: 2;
}
/* =============================================================================
   OTHER STYLING
   ========================================================================== */
* {-webkit-backface-visibility: hidden;}

/* =============================================================================
   MEDIA QUERIES
   ========================================================================== */
   
/* All IOS Devices ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
#background {
	position: relative;
	display:block;
	-webkit-background-size: 2476px 1704px;
	left: -420px!important;
	top: -550px!important;
	z-index: 1;
}
#hand {
	left: -750px!important;
	top: 30px!important;
	z-index: 2;
}
#vignette {
	z-index: 3;
}
#mobile {
	left: -750px!important;
	top: 30px!important;
	z-index: 4;
}
#content-container {
	left: 400px!important;
	top: 80px!important;
	z-index: 5;
}
#iphone-lock {
	display: none;
}
#iphone-menu {
	display: block;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}