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

  8888888b.                  888    888             888888b.   d8b          8888888b.                    888 
  888   Y88b                 888    888             888  "88b  Y8P          888  "Y88b                   888 
  888    888                 888    888             888  .88P               888    888                   888 
  888   d88P 888d888 .d88b.  888888 888888 888  888 8888888K.  888  .d88b.  888    888  .d88b.   8888b.  888 
  8888888P"  888P"  d8P  Y8b 888    888    888  888 888  "Y88b 888 d88P"88b 888    888 d8P  Y8b     "88b 888 
  888        888    88888888 888    888    888  888 888    888 888 888  888 888    888 88888888 .d888888 888 
  888        888    Y8b.     Y88b.  Y88b.  Y88b 888 888   d88P 888 Y88b 888 888  .d88P Y8b.     888  888 888 
  888        888     "Y8888   "Y888  "Y888  "Y88888 8888888P"  888  "Y88888 8888888P"   "Y8888  "Y888888 888 
                                              888                     888                                  
  *   Portfolio of Jonathan Andrew       Y8b d88P                Y8b d88P   *  Twitter: @epixelstudio                      
  *   Copyright 2011                      "Y88P"                  "Y88P"    *  http://www.prettybigdeal.co.uk   


  *   Colour Palletes:
      - Dark Green:     #9ad53d;
      - Light Green:    #f6fbee;
      - Dark Blue:      #59bee4;
      - Light Blue:     #ecfaff;

  --- Background textures supplied by: subtlepatterns.com

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

/* (Font (heidy)!) */

@font-face {
    font-family: 'CabinRegular';
    src: url('font/Cabin-Regular-webfont.eot');
    src: url('font/Cabin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Cabin-Regular-webfont.woff') format('woff'),
         url('font/Cabin-Regular-webfont.ttf') format('truetype'),
         url('font/Cabin-Regular-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* --- This is also nice.
@font-face {
    font-family: 'FamiliarProBold';
    src: url('font/Familiar_Pro-Bold-webfont.eot');
    src: url('font/Familiar_Pro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Familiar_Pro-Bold-webfont.woff') format('woff'),
         url('font/Familiar_Pro-Bold-webfont.ttf') format('truetype'),
         url('font/Familiar_Pro-Bold-webfont.svg#FamiliarProBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/


/* Webkit Animation Goodness */

@-webkit-keyframes slide-fade-in-top-down {
    0%      {opacity: 0; top: -90px;}
    100%    {opacity: 1; top: 0px;}
}
@-webkit-keyframes fade-in-items {
    0%      {opacity: 0;}
    50%     {opacity: 0;}
    100%    {opacity: 1;}
}

@-webkit-keyframes arrow-pulsate {
    0%      { background-color: #ccc; }
    50%     { background-color: #adadad; }
    100%    { background-color: #ccc; }
}

.small-screen {
	display: none;

}


body {
	margin: 0;
	padding: 0;
	background:  #f6f6f6;
	background-image: url(background-cs.jpeg);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
 
#rotate {
	display: inline;
}
 
#nav {
	margin: 36px 20px 0 0;
	float: right;
}
 
#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
#nav li {
 
	height: 20px;
	float: left;
}
 
#nav li a {
	line-height: 20px;
	padding: 9px 0;
	width: 150px;
	height: 20px;
	text-align: center;
	margin: 0;
	display: block;
	text-decoration: none;
	color: #666;
	font-size: 16px;	
	
	-moz-transition-property: background-color, border-top;
	-moz-transition-duration: .5s;
	-webkit-transition-property: background-color, border-top;
	-webkit-transition-duration: .5s;
	-o-transition-property: background-color, border-top;
	-o-transition-duration: .5s;
	transition-property: background-color, border-top;
	transition-duration: .5s;

}
 
#nav li a:hover  , nav li.active a {
 
	color: #f8f8f8;
	-moz-transition-property: background-color, border-top;
	-moz-transition-duration: .5s;
	-webkit-transition-property: background-color, border-top;
	-webkit-transition-duration: .5s;
	-o-transition-property: background-color, border-top;
	-o-transition-duration: .5s;
	transition-property: background-color, border-top;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease-in-out;
}
 
 
#nav li.port a:hover , #nav li.port.active a {
	background: #ecfaff;
	color:  #59bee4;
	border-top: 3px solid #59bee4;
}
 
 
#nav li a {
	font-family: 'CabinRegular', Arial, sans-serif;
	border-top: 3px solid #fff;
	background: #fff;
}

#nav li.about a:hover ,  #nav li.about.active a {
	background-color: #f6fbee;
	border-top: 3px solid #9ad53d;
	color: #9ad53d;
}
 
#nav li.blog a:hover {
	background-color: #9ad53d;
 
}
 
 
.logo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: normal;
	letter-spacing: -0.01em;
	float: left;
	width: 250px;
	margin: 10px 0 0 10px;
	text-shadow: 0px  1px 1px #fff;
	color: #666;
}
 
.logo strong {
	-moz-transition-property: color;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color;
	-o-transition-duration: 0.7s;
	transition-property:  color;
	transition-duration: 0.7s;
}
 
.logo:hover strong {
	color: #59bee4;
}
 
.header {
	-webkit-animation-name: slide-fade-in-top-down;
	-webkit-animation-duration: 0.7s;
	background: #fff;
	top: 0;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.header h1 {
	font-family: 'CabinRegular', Arial, sans-serif;/*
	font-family: 'FamiliarProBold', Arial, sans-serif;
	font-weight: normal; */
}
 
.wrapper {
	width: 1200px;
	margin: auto;
	margin-top: 140px;
	position: relative;
}
 
 
h1 {
	float: left;
	color: #666;
	text-shadow: none;
	font-weight: normal;
	font-size: 26px;
	background: #fff;
	margin: 0 0 0 18px;
	padding: 10px 10px 6px 10px;
	display: block;
 
}
 
h1 em {
	color: #59bee4;
	font-style: normal;
	text-shadow: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-transition-property: color;
	-moz-transition-duration: 1.5s;
	-webkit-transition-property: color;
	-webkit-transition-duration: 1.5s;
	-o-transition-property: color;
	-o-transition-duration: 1.5s;
	transition-property: color;
	transition-duration: 1.5s;
}
 
body.green h1 em {
	color: #9ad53d;
	-moz-transition-property: color;
	-moz-transition-duration: 1.5s;
	-webkit-transition-property: color;
	-webkit-transition-duration: 1.5s;
	-o-transition-property: color;
	-o-transition-duration: 1.5s;
	transition-property: color;
	transition-duration: 1.5s;
}
 
.header-container {
	width: 1165px;
	margin: auto;
}

.loading-warning {
	background: url(darksquares.jpeg);
	width: 650px;
	margin: auto;
	padding: 30px;
	color: #333;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #ccc;
	display: none;
}
 
.item-container {

	-webkit-animation-name: fade-in-items;
	-webkit-animation-duration: 2.5s;
	width: 1165px;
	height: 400px;
	margin: 20px auto 100px auto;
}
 
.item-container:hover .item-pagination li.next {
	-webkit-animation-name: arrow-pulsate;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
}

.item-pagination {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
}
 
 
.item-pagination li {
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	margin: 3px 0;
	background: #fff;
	cursor: pointer;
}
 

 
.item-pagination li:first-child {
	margin: 0;
	border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
}
 
.item-pagination li:last-child {
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-bottom-radius: 4px;
}
 
.item-pagination li.previous , .item-pagination li.next {
	background-color: #ccc;
	color: #59bee4;
	font-weight: bold;
	-moz-transition-property: background-color;
	-moz-transition-duration: 1.5s;
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 1.5s;
	-o-transition-property: backgroud-color;
	-o-transition-duration: 1.5s;
	transition-property: background-color;
	transition-duration: 1.5s;
}
 
.item-pagination li.previous {
	background-image: url(arrows.png);
}
 
.item-pagination li.next {
	background-image: url(arrows.png);
	background-position: 0 -28px;
}
 



 
.item-pagination li.previous:hover , .item-pagination li.next:hover {
	background-color: #666;
}
 
.item-pagination li.previous:hover {
	background-image: url(arrows.png);
}
 
.item-pagination li.next:hover {
	background-image: url(arrows.png);
	background-position: 0 -28px;
}
 
 
 
.item-pagination li.active , .item-pagination li.active:hover {
	background: #59bee4;
	/*background: #1ac0bc;*/
	color: #fff;
	font-weight: bold;
}
 
.item-pagination li:hover {
	background: #ecfaff;
	color: #59bee4;
}
 
.item-viewport {
	float: left;
	padding: 4px;
	width: 882px;
	height: 400px;
	background: #fff;
	/* background: #000; */
	overflow: hidden;
	border: 1px solid #ccc;
 
	position: relative;
 
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-bottom-radius: 4px;
 
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-right-bottom-radius: 4px;
 
}
 
.item-viewport ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
.item-viewport ul li {
	position: absolute;
	top: -404px;
	height: 400px;
	overflow: hidden;
}
 
.item-viewport ul li.first {
	top: 4px;
}
 
.item-viewport img {
	width: 882px;
}
 
.item-meta {
	width: 230px;
	padding: 8px;
	background: #fff;
	color: #666;
	float: left;
	border: 1px solid #ccc;
	border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-left: 0px;
	border-bottom: 0px;
}
 
.item-meta h1 {
	font-size: 20px;
	line-height: 23px;
	padding: 0 0 8px 0;
	margin: 0;
	width: 230px;
	background: none;
	font-family: 'CabinRegular', Arial, sans-serif;
}
 
.item-meta p {
	line-height: 18px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
 
.item-meta ul {
	/*margin: 0 0 0 15px;*/
	padding: 0 0 0 15px;
	list-style-type: square;
}
 
.item-meta li {
	font-size: 11px;
	padding: 0;
	line-height: 14px;
}
 
.item-live {
	width: 246px;
	float: left;
	padding: 0;
	margin: 0;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	background: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	border-left: 0;
 
}
.item-live a {
	display: block;
	width: 246px;
	padding: 8px 0px 8px 0px;
	background: #ecfaff;

	color: #59bee4;
	text-align: center;
	text-shadow: 1px 1px #fff;
	text-transform: uppercase;
	text-decoration: none;
 
	-moz-transition-property: background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  background;
	-o-transition-duration: 0.7s;
	transition-property:  background;
	transition-duration: 0.7s;
}
 
.item-live a:hover {
	background: #59bee4;
	
	color: #fff;
	text-shadow: 1px 1px #59bee4;
}
 
/*
.item-offline  {
	background: #EBEEF4;
	display: block;
	width: 230px;
	padding: 8px;
	margin: 0;
	color: #999;
	float: left;
	text-align: center;
	text-shadow: 1px 1px #fff;
	text-transform: uppercase;
	text-decoration: none;
}
*/
 
.item-offline {
	width: 246px;
	float: left;
	padding: 8px 0px 8px 0px;
	margin: 0;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	background: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	border-left: 0;
	color: #999;
	/* background: #EBEEF4; */
	/*background-color: rgba(0, 0, 0, 0.046875);*/
	background: url(darksquares.jpeg);
	text-align: center;
	text-shadow: 1px 1px #fff;
	text-transform: uppercase;
}
 
#about {
	/*background:  #9ad53d;*/
	width: 1150px;
	height: 485px;
	margin: auto;
	line-height: 18px;
}

#aboutCont {
	background: url(darksquares.jpeg);
	padding: 40px 0 0 0;
}
 
#reading ul , .content-box ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: left;
}
 
#reading ul li ,  .content-box ul li {
	float: left;
	/*border: 4px solid  #F5F6F7;*/
	margin: 0 10px 0 0;
	padding: 0;
	height: 114px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
 
#reading ul li:hover {
	/*border: 4px solid  #fff;*/
}
 
 
#reading {
	width: 400px;
	height: 250px;
	float: left;
}
 
#reading h2 , #contact h2 , #biography h2 , .content-box h2 {
	font-weight: normal;
	font-size: 18px;
	text-shadow: 0px  1px 1px #fff;
}

#biography {
	width: 320px;
	height: 250px;
	margin: 0 50px 0 20px;
	text-shadow: 0px  1px 1px #fff;
	float: left;
}

/*
#biography {
	width: 720px;
	height: 250px;
	margin: 0 40px 0 0;
	text-shadow: 0px  1px 1px #fff;
	float: left;
}

*/


#biography ul {
	float: left;
	display: block;
	width: 120px;
	margin: 0;
	padding: 0;
}

#biography ul.left {
	width: 180px;
}

#biography ul li {
	width: 150px;
}

#biography p {
	font-size: 13px;
}

#contact {
	width: 360px;
	height: 400px;
	overflow: hidden;
	text-shadow: 0px  1px 1px #fff;
	float: left;
}
 

#twitter {
	border: 1px solid #ccc;
	color: #666;
	width: 300px;
	background: #fff url(icons/twitterbird.png) no-repeat 290px bottom;
	padding: 8px 20px 8px 8px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	margin: 0 0 30px 0;
}
 
#twitter a {
	text-decoration: none;
	color: #59bee4;
}
 
#twitter a em {
	color: #59bee4;
	font-style: normal;
}
 
#twitter em {
	font-style: italic;
	color: #999;
}
 
#getsocial ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
#getsocial ul li {
	/* background: #e1ddd0; */
	background: #F5F6F7;
	border: 0;
	float: left;
	margin: 0 10px 0 0;
	padding: 0;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
 
#getsocial ul li a {
	color: #666;
	padding: 5px;
	display: block;
	text-decoration: none;
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.7s;
	transition-property:  color , background;
	transition-duration: 0.7s;
 
}
 
input , textarea {
	outline: none;
	background-color: rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.06);
	margin: 0 0 10px 0;
	padding: 10px;
	width: 300px;
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.7s;
	transition-property:  color , background;
	transition-duration: 0.7s;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	resize: none;
}
 
input:focus {
	border: 1px solid #ccc;
	background-color: #fff;
	color: #666;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

input[type="text"].error , textarea.error {
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid #9ad53d;
   	-moz-box-shadow:inset 0 0 15px rgba(177, 233, 89, 0.5);
   	-webkit-box-shadow:inset 0 0 15px rgba(177, 233, 89, 0.5);
  	 box-shadow:inset 0 0 15px rgba(177, 233, 89, 0.5);
}

input.reset {
	background: #7f8585;
	color: #f8f8f8;
	text-shadow: none;
	width: 70px;
}



input.submit {
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.7s;
	transition-property:  color , background;
	transition-duration: 0.7s;
	background: #7c8383;
	color: #fff;
	text-shadow: none;
	width: 70px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0 90px 0 0;
	cursor: pointer;
}

input.submit:hover {
	background: #9AD53D;
}

input.name , input:focus.name {
	background-image: url(icons/name.png);
	background-repeat: no-repeat;
	background-position: 7px 10px;
	padding-left: 30px;
}

input.email , input:focus.email  {
	background-image: url(icons/mail.png);
	background-repeat: no-repeat;
	background-position: 7px 10px;
	padding-left: 30px;
}

input.link , input:focus.link {
	background-image: url(icons/link.png);
	background-repeat: no-repeat;
	background-position: 7px 10px;
	padding-left: 30px;
}

 
textarea {
	height: 120px;
	background-color: rgba(0, 0, 0, 0.06);
	background-image: url(icons/message.png);
	background-repeat: no-repeat;
	background-position: 7px 10px;
	padding-left: 30px;
}

textarea:focus {
	background-color: #fff;
	background-image: url(icons/message.png);
	background-repeat: no-repeat;
	background-position: 7px 10px;
	padding-left: 30px;
}
 
#getsocial ul li a em {
	font-style: normal;
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.7s;
	transition-property:  color , background;
	transition-duration: 0.7s;
}
 
#getsocial ul li a:hover {
	background: #fff;
}
 
#getsocial ul li a:hover em {
	color: #59bee4;
}
 
#intro {
	float: left;
}
 
#return {
	width: 250px;
	height: 50px;
	margin: auto;
}
 
#return a {
	text-decoration: none;
	color: #666;
	line-height: 50px;
	text-align: center;
	display: block;
	width: 250px;
	height: 50px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;


 	background-color: #d9d9d9;
	background: #d9d9d9 url(darksquares.jpeg);
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.7s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.7s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.7s;
	transition-property:  color , background;
	transition-duration: 0.7s;
}
 
#return a:hover {
	background: #9ad53d;
	color: #fff;
}
 
#me {
	background: #fff;
	float: left;
	margin: 0 0 0 20px;
	padding: 0 10px 10px 10px;
	clear: left;
}
 
#me ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
#me ul li {
	float: left;
	margin: 0 20px 0 0;
}
 
#me ul li.linked {
	width: 77px
}
 
#me ul li.cv {
	width: 97px
}
 
#me ul li a {
	display: block;
	line-height: 19px;
	text-decoration: none;
	color: #999;
 
	-moz-transition-property: color , background;
	-moz-transition-duration: 0.5s;
	-webkit-transition-property:  color , background;
	-webkit-transition-duration: 0.5s;
	-o-transition-property:  color, background;
	-o-transition-duration: 0.5s;
	transition-property:  color , background;
	transition-duration: 0.5s;
}
 
#me ul li a:hover {
	color: #59bee4;
}
 
#me ul li.linked a {
	display: block;
	width: 50px;
	height: 19px;
	line-height: 19px;
	padding: 0 0 0 27px;
 
	background: url(linked.png) no-repeat;
}

#me ul li.phone a {
	display: block;
	width: 120px;
	height: 19px;
	line-height: 19px;
	padding: 0 0 0 27px;
 
	background: url(phone.png) no-repeat;
}

 
body.green #me ul li a:hover {
	color: #9ad53d;	
}
 
body.green #me ul li.linked a {
	display: block;
	width: 50px;
	height: 19px;
	line-height: 19px;
	padding: 0 0 0 27px;
 
	background: url(linked.png) 0 -63px no-repeat;
}
 
body.green #me ul li.twitter a {
	background: url(twitter.png) 0 -63px no-repeat;
}
 
body.green #me ul li.twitter a:hover {
	background: url(twitter.png) 0 -95px no-repeat;
}

body.green #me ul li.phone a {
	background: url(phone.png) 0 -63px no-repeat;
}
 
body.green #me ul li.phone a:hover {
	background: url(phone.png) 0 -95px no-repeat;
}
 
body.green #me ul li.cv a {
	background: url(cv.png) 0 -63px no-repeat;
}
 
body.green #me ul li.cv a:hover {
	background: url(cv.png) 0 -95px no-repeat;
}
 
 
body.green #me ul li.linked a:hover {
	background: url(linked.png) 0 -95px no-repeat;
}
 
 
#me ul li.linked a:hover {
	background: url(linked.png) 0 -32px no-repeat;
}

#me ul li.phone a:hover {
	background: url(phone.png) 0 -32px no-repeat;
}
 
#me ul li.twitter a {
	display: block;
	width: 40px;
	height: 19px;
	line-height: 19px;
	padding: 0 0 0 27px;
 
	background: url(twitter.png) no-repeat;
}
 
#me ul li.twitter a:hover {
	background: url(twitter.png) 0 -32px no-repeat;
}
 
#me ul li.cv a {
	display: block;
	width: 80px;
	height: 19px;
	line-height: 19px;
	padding: 0 0 0 27px;
 
	background: url(cv.png) no-repeat;
}
 
#me ul li.cv a:hover {
	background: url(cv.png) 0 -32px no-repeat;
}
 
#me ul li.start {
	margin: 0 0 0 100px;
}
 
#shadow {
	display: none;
	width: 100%;
	height: 4px;
	background: transparent url(trans.png);
	position: fixed;
	/*opacity: 0.1;*/
	top: 77px;
	z-index: 10;
}
 
.fadeshare {
	opacity: 0.5;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-o-transition-property:  opacity;
	-o-transition-duration: 0.5s;
	transition-property:  opacity;
	transition-duration: 0.5s;
}


footer {
	background: #fff;
	height: 90px;
	border-top: 4px solid #d9d9d9;
}

.footerWrapper {
	width: 1150px;
	margin: auto;
}

.mobile {
	float: right;
	width: 140px;
	padding: 0 0 0 40px;
	background: url(phone.gif) no-repeat;
	height: 32px;
}

#socialicons {
	width: 200px;
	list-style-type: none;
	margin: 0;
	padding: 15px 0 0 0;
	float: left;
}

#socialicons li a {
	display: block;
	width: 32px;
	height: 32px;
}

#socialicons li {
	float: left;
	width: 32px;
	height: 32px;
	opacity: 0.5;
	margin: 0 8px 0 0;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-o-transition-property:  opacity;
	-o-transition-duration: 0.5s;
	transition-property:  opacity;
	transition-duration: 0.5s;
}

#socialicons li:hover {
	opacity: 1;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-o-transition-property:  opacity;
	-o-transition-duration: 0.5s;
	transition-property:  opacity;
	transition-duration: 0.5s;
}
 
#socialicons li.twitter a {
	background: url(icons/twittericon.png) no-repeat;
}
#socialicons li.linkedin a {
	background: url(icons/linkedinicon.png) no-repeat;
}
#socialicons li.skype a {
	background: url(icons/skypeicon.png) no-repeat;
}

.copy {
	float: right;
}

.mag_two {
	background: #22211f;
	colour: #fafafa;
}

.panel {
	float: left;
	width: 80px;
	height: 114px;
	position: relative;			
	-webkit-perspective: 600;	
}

.panel .front {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 250;
	width: inherit;
	height: inherit;
	text-align: center;
	border: 4px solid  #FFFFFF;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

	-webkit-transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.panel.flip .front {
	z-index: 250;	
	-webkit-transform: rotateY(180deg);
}

		
.panel .back {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	padding: 7px;
	z-index: 200;
	width: 66px;
	height: 100px;
	background: #fff;
	border: 4px solid  #FFFFFF;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
		
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateY(0deg);
	box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.largeSocialShare {
	margin: -414px 0 0 0;
	width: 400px;
	padding: 0 0 0 0;
	height: 400px;
	display: block;
}

.largeSocialShare p {
	width: 300px;
}


.largeTwitter , .largeFacebook {
	float: left;
	margin: 30px 0 0 0;
	padding: 0 30px 0 0;
}

.largeTwitter a , .largeTwitter , .largeTwitter a span , .largeFacebook a , .largeFacebook , .largeFacebook a span  {
	width: 64px;
	height: 64px;
	display: block;
}


.largeTwitter a {
	background: url(icons/largeShare.png) -133px -4px no-repeat;
}

.largeFacebook a {
	background: url(icons/largeShare.png)-4px -4px no-repeat;
}

.largeTwitter a span {
	background: url(icons/largeShare.png) -133px -133px no-repeat;
}

.largeFacebook a span {
	background: url(icons/largeShare.png) -4px -133px no-repeat;
}
.largeTwitter {
	padding: 0 0 0 30px;
	margin: 30px 50px 0 20px;
}
.clearfix {
	clear: both;
}

#flickr a {
	border: none;
	text-decoration: none;
}

#flickr img {
	border: 3px solid #fff;
}