/* www.lafrattacreative.co.uk */
/* Green:#4eb3cc, dark green: #368194  

/************************************************************************************
RESETS
************************************************************************************/
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var
{background: transparent;border: 0 none;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline; }

/************************************************************************************
PAGE SETUP
************************************************************************************/
body {background:url(../images/bg2.jpg) repeat;font-family:"Helvetica Neue",Arial, Helvetica, sans-serif;padding: 0;text-align: center;color:#666;font-size:100%;}
ol, ul {list-style: none inside;}
a {outline: none;color:#666;}
a:hover {color:#000;}
a img {border: none;}

/* set image max width to 100% */
img{max-width: 100%;height: auto;width: auto\9; /* ie8 */}
a img{max-width: 100%;height: auto;width: auto\9; /* ie8 */}

/************************************************************************************
HTML5 SETUP
************************************************************************************/
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/************************************************************************************
HEADINGS / STYLES
************************************************************************************/

#logo {display: block;width: 130px;height: 50px;float: left;margin:3px 0 0 30px;padding:0;background:url('../images/logo.png') no-repeat;text-indent:-9999px} /* This is the logo */
h1, h2 {font-family:'Podkova', "Helvetica Neue",Arial, Helvetica, sans-serif;color:#4eb3cc;padding:2px 0 8px 0;margin-bottom:12px;line-height:40px;text-transform:capitalize;font-weight:normal}
h3 {color:#ccc;font-weight:normal;float:right;margin:20px 30px 0 0;} /* This is for the right header text */
h4 {font-weight:bold;color:#4eb3cc;}
h4 a {text-decoration:none;color:#4eb3cc;}
h4 a:hover {color:#666666;}
p.subheading {font-style:italic;color:#999999}
hr {color:#ccc;border-bottom:1px dotted;border-top:0;height:1px;margin:5px 0 15px;}

/** FONT SIZES **/

h1, h2 {font-size:2.5em;}/* 30px / 16px */
p, h4, contact_form label, ul.ticks li {font-size:1em;line-height:30px;}
nav ul {font-size:0.875em;} /* 13px / 16px */ 
h3, footer {font-size:0.75em;} /* 12px / 16px */

/* Rounded Corners and shadow */
.box {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-khtml-border-radius: 5px;behavior: url(PIE.htc);
	-moz-box-shadow: 0px 1px 1px #666;-webkit-box-shadow: 0px 1px 1px #666;box-shadow: 0px 1px 1px #666;}
.rounded {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-khtml-border-radius: 5px;}

/************************************************************************************
CLEAR TOOLS
************************************************************************************/
.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;padding:0;margin:0;}
.clear-right {clear: right;}
.clear-left {clear: left;}

/************************************************************************************
PAGE LAYOUT
************************************************************************************/
#container {width: 1140px;margin: 0 auto;text-align: left;}

/* Header */
header {position: fixed;top: 0;left: 0;width: 100%;z-index:9999;filter:alpha(opacity=85);-moz-opacity:0.85;-khtml-opacity: 0.85;opacity: 0.85;height: 60px;background-color:#000;float:left;}
#header-container {margin:0 auto;width:1140px;padding:0;}

/* Navigation */
nav ul{list-style:none;margin:20px 0 0 20px;padding:0;text-align:center;float:left;}
nav ul li{display:inline;}
nav ul li a{display:inline-block;padding:0 20px 0;text-decoration:none;color:#999999;}
nav ul li a:hover{color:#ffffff;}
body#portfolio a#portfolio-nav, body#about a#about-nav, body#contact a#contact-nav{color:#ffffff;text-decoration:none;}
.new-1 {position:absolute;right:-10px;top:10px;}

/* Content */

#content, #content-nopaddingright {margin:77px 0 15px 0;line-height: 25px;min-height:300px;background:#ffffff url('../images/content-bg.jpg') repeat;}

#content {padding: 30px 2.63157% 40px;position:relative;}
#content-nopaddingright {padding:30px 0 40px 2.6%;position:relative;}

#photo-box p, #content p, #content ul, #content-nopaddingright p, #content-nopaddingright ul {margin-bottom: 15px;}

#intro {border-bottom:1px #cccccc solid;margin:0 2.63157% 30px 0;padding:0 0 10px 0;}
.intro-text {float:none;text-align:center;width:100%;margin:0 0 30px 0}
.intro-buttons {float:none;text-align:center;margin:0 0 20px 0;width:100%;font-family:'Podkova', "Helvetica Neue",Arial, Helvetica, sans-serif;}
.intro-buttons a.one {margin:0 10px 0 0;}
.intro-buttons a.two {margin:0 0 0 10px;float:none;}

.photocaption {font-size:0.8em;font-style:italic;color:#999;text-align:center;}
.photocaption a {text-decoration:none;}
.photocaption a:hover {text-decoration:underline;}


/* Columns */
.left {width: 60%;float: left;padding:0;}
.left img {padding:0 0 20px 0;}
.right {width: 33%;float: right;margin-right:30px;}
.right p {padding-bottom:15px;}
.right a, .left a {color:#666666;text-decoration:none;border-bottom:1px dotted #666666}
.right a:hover, .left a:hover {color:#4eb3cc;text-decoration:none;}


/* Features */
#features {overflow: hidden;}
#features article {list-style-type: none;float: left;margin: 0 2.63157% 30px 0;border-bottom:1px solid #cccccc;width:47.2%;padding:0 0 10px 0;}
#features article.last {float:right;}
.features-text {float:right;width:85%;}

/* Portfolio Images */
#gallery {overflow: hidden;}
#gallery article {list-style-type: none;float: left;margin: 0 30px 30px 0;border-bottom:1px solid #cccccc;width:340px;}
#gallery article.last {margin-right:0;}
#gallery img {margin:0 0 10px 0;opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;}

#gallery img:hover {opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;}


/* List with ticks */
ul.ticks li {background:url(../images/tick.png) no-repeat 2px 6px;padding:0 0 5px 35px;}
.col {float:left;width:50%;}

/* Social Links */
.social-links {float:left;color:#666666;padding:20px 2.63157%;width:43.86%;background-color:#cccccc;position:relative;}
	
	.social-links.facebook2 {background:#314a73 url('../images/facebook-bg.jpg') repeat;margin:0 0 15px 0;}
	.social-links.facebook2 h2 {color:#758fba;margin:0;padding:0;}
	.social-links.twitter {float:right;margin:0 0 15px 0;background:#53d4ff url('../images/twitter-bg.jpg') repeat;}
	.social-links.twitter h2 {color:#6ab0b4;margin:0;padding:0;}
	
	.left-side {float:left;width:45%;}
	.right-side {float:right;width:40%;text-align:right;margin:10px 0 0 0;}

/*Social buttons on portfolio pages */
.facebook-button {width:100px;float:left;}
.twitter-button {width:100px;margin:0 20px 0 0;float:left;}


/* Instagram */
#photo-box {float:left;color:#666666;padding:10px 2.63157% 15px;width:94.74%;;background-color:#ffffff;position:relative;margin:0 0 15px 0;line-height:25px;}

#photo-box h2 {margin:0;}

	ul#instagram-gallery li{display:inline;margin:0 10px 10px 0;width:60px;height:60px;}
	ul#instagram-gallery li a{border-bottom:none;}
	#instagram-logo {margin:0;position:absolute; top:0;left:;;width:46px;height:80px;z-index:90;background:url(../images/instagram-logo.png) no-repeat;}
	
	
/************************************************************************************
FOOTER
************************************************************************************/
aside {color:#cccccc;text-align:left;padding:30px 2.63157% 40px;line-height:25px;background:url('../images/footer-bg.jpg') repeat;position:relative;}
aside a.btn, footer a.btn:hover {border:none;text-decoration:none;}
aside a:hover {color:#4eb3cc;border-bottom:1px dotted #4eb3cc;text-decoration:none;}
aside a {color:#cccccc;border-bottom:1px dotted #cccccc;text-decoration:none;}

aside section {width:22.91666%;float:left;margin:0 2.7777777% 0 0;}
aside section.last {margin:0;float:right;}
aside h2, aside h2 a, aside h2 a:hover {color:#cccccc;text-decoration:none;border:none;}
#backtop a {position:absolute;width:36px;height:36px;background:url(../images/arrow-up.jpg) no-repeat;text-indent:-9999px;right:10px;bottom:0;border:none;text-decoration:none;}
#backtop a:hover {border:none;text-decoration:none;}

/* Footer */
footer { color:#666666;text-align:center;margin:20px 30px;}
footer a {color:#666666;text-decoration:none;}
footer a:hover {color:#333;text-decoration:none;}

/* Calendar Badges */
.datetime {font-family:"Helvetica Neue",Arial, Helvetica, sans-serif;width:48px;height:51px;background:url(../images/calendar.png) no-repeat;float:left;margin:4px 11px 0 0;padding:0;text-align:center;line-height:10px;}
.top {font-size:0.6875em; /* 11px / 16px */ color:#ffffff;padding:5px 0 0 0;margin:0}
.date {font-size:1.4em;font-family:'Podkova', "Helvetica Neue",Arial, Helvetica, sans-serif; /* 18px / 16px */ font-weight:bold;color:#ffffff;padding:10px 0 0 0;margin:0;}

/************************************************************************************
CONTACT FORM
************************************************************************************/
.contact_form label, .contact_form input, .contact_form textarea, .contact_form select{ width:95%; }
.contact_form label { text-align:left; color:#4eb3cc;margin:0;font-weight:bold}
.contact_form input, .contact_form textarea { margin:10px 0 0 0; padding:10px; font-size:1.2em; font-family:"Helvetica Neue",Arial, Helvetica, sans-serif; ;-webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px; }
.contact_form select {font-size:0.9375em;margin:10px 0 0 0; /* 15px / 16px */ }
.contact_form input.submit {font-family:'Podkova', "Helvetica Neue",Arial, Helvetica, sans-serif;width:auto;float:left; border:none;color: #ffffff;background:none;text-decoration:none;font-weight:normal;cursor:pointer;margin:3px 0 0 0;font-size:1em;}/* 15px / 16px */
.contact_form input.submit:focus { border:none; text-decoration:none; outline:none; }
.contact_form p input.submit {padding:0;}
.contact_form input, .contact_form textarea { border: 1px solid #bbbbbb;background-color:#dddddd;outline:none; }
.contact_form input:focus, .contact_form textarea:focus { border: 1px solid #4eb3cc;background-color:#eeeeee; }

.checkboxes input {width:50px;}
.error-box {background-color:#ffdede;color:#d20a0a;border:1px solid #d97676;padding:10px;width:95%;line-height:21px;margin:0 0 20px 0;font-size:0.8em;}
.success-box {background-color:#eff7d9;color:#5d793d;border:1px solid #b7db58;padding:10px;width:95%;line-height:21px;margin:0 0 20px 0;font-size:0.8em;}
.mand {font-size:1em;color:#d20a0a;}


/************************************************************************************
BUTTONS
************************************************************************************/
.button {font-family:'Podkova', "Helvetica Neue",Arial, Helvetica, sans-serif;display: inline-block;outline: none;cursor: pointer;margin: 0;position: relative;top: 0px;left: 0px; padding:10px 30px;font-size:1.2em;
	-moz-border-radius: 5px; 														
  	-webkit-border-radius: 5px; 													
   	border-radius: 5px;behavior: url(PIE.htc); 															
   	                                                                                
	-moz-box-shadow: 0px 4px 0px #368194; 											
  	-webkit-box-shadow: 0px 4px 0px #368194; 										
	box-shadow: 0px 4px 0px #368194; 												
	
	-moz-transition: all 0.05s ease-in;
   	-o-transition: all 0.05s ease-in;
  	-webkit-transition: all 0.05s ease-in;
 	-ms-transition: all 0.05s ease-in;
   	transition: all 0.05s ease-in;
}
.button:hover, .social-icons a:hover {top: 2px;left: 0px; 
	-moz-box-shadow: 0px 2px 0px #368194;
  	-webkit-box-shadow: 0px 2px 0px #368194;
	box-shadow: 0px 2px 0px #368194;}
	
a.color {color: #ffffff;background: #4eb3cc;text-decoration:none;font-weight:normal;;border:none;}
a.color:hover {background: #4eb3cc;color:#ffffff;}
a.color:active {color: #ffffff;}

.color {color: #ffffff;background: #4eb3cc;text-decoration:none;font-weight:normal;}
.color:hover {background: #4eb3cc;color:#ffffff;}
.color:active {color: #ffffff;}

/* Social buttons on contact page */
.social-icons {padding:0;float: left;}
.bottom.social-icons {margin:10px 0 0 0;}
.bottom.social-icons a {margin:0 10px 15px 0;border:none;}	
.social-icons a {text-indent: -9999%;cursor: pointer;float: left;margin: 0 20px 5px 0;position: relative;top: 0px;left: 0px; width: 48px;height: 48px;														
   	           -moz-border-radius: 5px; 														
		  	-webkit-border-radius: 5px; 													
		   	border-radius: 5px;behavior: url(PIE.htc);
		                                                                     
	-moz-box-shadow: 0px 4px 0px #368194; 											
  	-webkit-box-shadow: 0px 4px 0px #368194; 										
	box-shadow: 0px 4px 0px #368194; 												
	
	-moz-transition: all 0.05s ease-in;
   	-o-transition: all 0.05s ease-in;
  	-webkit-transition: all 0.05s ease-in;
 	-ms-transition: all 0.05s ease-in;
   	transition: all 0.05s ease-in;  
	}

.right .social-icons a, .left .social-icons a {border-bottom:none}
.social-icons a#facebook {background: url(../images/social-sprite.png) no-repeat 0 0 #4eb3cc;}		
.social-icons a#lastfm {background: url(../images/social-sprite.png) no-repeat -48px 0 #4eb3cc;}
.social-icons a#skype {background: url(../images/social-sprite.png) no-repeat -96px 0 #4eb3cc;}
.social-icons a#instagram {background: url(../images/social-sprite.png) no-repeat -144px 0 #4eb3cc;}
.social-icons a#twitter {background: url(../images/social-sprite.png) no-repeat -144px -48px #4eb3cc;}

.social-icons a#graphic {background: url(../images/social-sprite.png) no-repeat -192px 0 #4eb3cc;}
.social-icons a#web {background: url(../images/social-sprite.png) no-repeat -240px 0 #4eb3cc;}
.social-icons a#email {background: url(../images/social-sprite.png) no-repeat -288px 0 #4eb3cc;}
.social-icons a#mobile {background: url(../images/social-sprite.png) no-repeat -336px 0 #4eb3cc;}
.social-icons a#location {background: url(../images/social-sprite.png) no-repeat -384px 0 #4eb3cc;}	

.social-icons a#previous {background: url(../images/social-sprite.png) no-repeat 0 -48px #4eb3cc;}
.social-icons a#all {background: url(../images/social-sprite.png) no-repeat -48px -48px #4eb3cc;}
.social-icons a#next {background: url(../images/social-sprite.png) no-repeat -96px -48px #4eb3cc;}


/*------------------------------------*\
  CHART
\*------------------------------------*/
#chart{width:100%;}

#chart dt{
  width:37%;
  float:left;
  margin:0 3% 5px 0;
  padding:2px 0;
  display:inline;
  font-weight:normal;
  text-align:left;
}

#chart dd{width:60%;float:left;margin-bottom:5px;display:inline;}
#chart dd span{color:#fff;background:#4eb3cc;text-align:left;padding:2px 10px 2px 10px;display:block; font-weight:bold;font-size:14px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;}

#bedford{width:4%;}
#mk{width:10%;}
#london{width:20%;}
#bristol{width:30%;}
#ny{width:60%;}
#tokyo{width:90%;}

#bedford{-webkit-animation-name:bar-one;}
#mk{-webkit-animation-name:bar-two;}
#london{-webkit-animation-name:bar-three;}
#bristol{-webkit-animation-name:bar-four;}
#ny{-webkit-animation-name:bar-five;}
#tokyo{-webkit-animation-name:bar-six;}

#bedford,#mk,#london,#ny,#tokyo{
  -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%{width:0%;}
  100%{width:2%;}
}
@-webkit-keyframes bar-two{
  0%{width:0%;}
  100%{width:10%;}
}
@-webkit-keyframes bar-three{
  0%{width:0%;}
  100%{width:20%;}
}
@-webkit-keyframes bar-four{
  0%{width:0%;}
  100%{width:30%;}
}
@-webkit-keyframes bar-five{
  0%{width:0%;}
  100%{width:60%;}
}
@-webkit-keyframes bar-six{
  0%{width:0%;}
  100%{width:90%;}
}

/************************************************************************************
MEDIA QUERIES
************************************************************************************/
/************************************************************************************
smaller than 1140
*************************************************************************************/
@media screen and (max-width: 1140px) {

	#container, #header-container {width: 95%;}
	
	
	h2 {font-size:1.875em;}
	#content, #content-nopaddingright {margin-top:77px;}

	ul.ticks li {background:url(../images/tick.png) no-repeat 2px 7px;} 
	
	.col {float:left;width:50%}
	

	.social-icons a {margin: 0 10px 10px 0;}
	

p, h4, ul.ticks li, .contact_form label{font-size:0.875em;line-height:25px;}



.contact_form label, .contact_form input, .contact_form textarea, .contact_form select { width:95%; }
.checkboxes input {width:50px;}
.error-box { width:90%;font-size:0.8em;} 
	#gallery article{width:30%;margin:0 2.6% 30px 0;}
	

	
}


/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

	#container, #header-container {width: 95%;}


	header {margin:0 0 20px 0;padding:0 0 20px 0;width: 100%;height: 110px;background-color:#000;}
	#content {margin-top:0;padding:150px 30px 30px;}
	#content-nopaddingright {margin-top:0;padding:150px 30px 30px 30px;}
	/* List with ticks */
	ul.ticks li {background:url(../images/tick.png) no-repeat 2px 3px;padding:0 0 5px 35px;} /* 14px / 16px */
	.col {float:left;width:50%}
	
	.social-icons a {margin: 0 10px 10px 0;}
	
	
	
	#logo {display: block;width: 130px;height: 50px;float: none;margin:0 auto;;padding:0;background:url(../images/logo-mobile.png) no-repeat;text-indent:-9999px} /* This is the logo */

h3 {float:none;margin:0 auto;padding:15px 0 0 0;}

.left {width: 100%;float:none;}
.right {margin:0;	width: 100%;float: none;}

nav ul{margin:0;padding:0;float:none;font-size:0.875em; /* 14px / 16px */ }
nav ul li a{padding:8px 20px 0;}



#intro {margin-right:0px;}
.intro-text {float:none;text-align:center;width:100%;}
.intro-buttons {float:none;text-align:center;margin:0 0 20px 0;width:100%;}
.intro-buttons a.one {margin:0 10px 0 0;}
.intro-buttons a.two {margin:0 0 0 10px;float:none;}

.contact_form label, .contact_form input, .contact_form textarea, .contact_form select { width:95%; }
.checkboxes input {width:50px;}
.error-box { width:95%;font-size:0.8em;} 
	#gallery article{width:30%;margin:0 2.6% 30px 0;}
	
	#features {margin:0 00px 0 0;float:none;}
	#features article {width:100%;float:left;}
	#features article.last {float:left;margin:0 0 30px 0;}
	.features-text {float:right;width:87%;}
	
	aside {padding:30px;}
	aside section {width:auto;margin:0 0 30px 0;float:none;}
	aside section.last {float:none;width:auto;}
	.social-links {float:none;width:auto;padding:10px 30px;}
	.social-links.twitter {margin-left:0;float:none;}
	#photo-box {float:none;width:auto;padding:15px 30px;}
	#photo-box .left-side {float:left;width:40%;}
	#photo-box .right-side {float:right;width:150px;text-align:right;margin:10px 0 0 0;}
	#backtop a, #backtop a:hover  {display:none;}
}

/************************************************************************************
smaller than 650 (ipad)
*************************************************************************************/
@media screen and (max-width: 650px) {
	p, h4, ul.ticks li, .contact_form label {font-size:1em;line-height:30px;}
	#container, #header-container {width: 95%;}
    .left {width: 100%;float:none;}
    .contact_form {margin:0 0 30px 0;}
	.right {margin:0;	width: 100%;float: none;}
	aside section {width:100%;margin:0 0 30px 0;}
	.col {width: 100%;float:none;}
	.checkboxes input {width:50px;}
	header {position: relative;width: auto;z-index:9999;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;height: auto;float:none}
	
	#content, #content-nopaddingright {margin-top:0;padding:30px 30px 30px 30px;}
	#gallery article {width:100%;text-align:center;}
	
	#gallery article.last {margin-right:0;}
	
	#features article {width:100%;text-align:left;}
	#features, #intro {margin-right:0;}
	
	.features-text {float:right;width:80%;}
	
	.flexslider-container {display:none;}
	#photo-box .left-side, #photo-box .right-side {float:none;width:auto;}
	#photo-box .right-side {text-align:left;margin:30px 0 0 0;}
	.social-icons a {margin: 0 10px 20px 0}

	h2 {font-size:2.2em;/* 30px / 16px */ padding:2px 0 8px 0;margin-bottom:12px;font-weight:normal;line-height:45px;}
	.social-links h2, #photo-box h2 {text-align:left;}
	.social-links h2 {font-size:2em;} 
	
	/*Social buttons on portfolio pages */
	.facebook-button {width:100%;float:none;margin:0 0 20px 0;}
	.twitter-button {width:100%;margin:0 20px 0 0;float:none}
}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	
	
	
	#container, #header-container {width: 95%;}
	html {-webkit-text-size-adjust: none;}
	.social-icons a {margin: 0 10px 20px 0;}

.checkboxes input {width:50px;}

	
	.features-text {float:right;width:70%;}

	.intro-buttons a.one {margin:0 10px 20px;}
	.intro-buttons a.two {margin:0 10px 0;}
	

	}