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

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

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

@charset "utf-8";
/* CSS Document */

body {margin:0; min-width:980px; max-width:1500px; padding:0; font-family:Georgia, "Times New Roman", Times, serif; background:url(images/paraclete-logo.jpg) fixed 45px 60px no-repeat;}
.float-left {float:left;	margin:0 0 0 20px;}
.float-right {float: right;	margin: 0 20px 0 0;}
.center {font-size:2.5em; padding: 80px 0; text-align:center;}
#nav {list-style:none; position:fixed; left:0px; top:240px; z-index:1000; }
#nav li {margin:0; background:#fff; border-bottom:#ddd solid 1px; display:block; text-align:right; font-family:Georgia, "Times New Roman", Times, serif; font-size:0.9em; font-style:italic; width:150px;}
/*#nav li a {color:#fff; text-decoration:none; display:block; padding:20px 10px 5px 20px; -moz-box-shadow:1px 1px 1px #888; -webkit-box-shadow: 1px 1px 1px #888; box-shadow: 1px 1px 1px #888;} #nav li a:hover {background:#eee; color:#888;}*/
#nav li a {color:#a9303c; text-decoration:none; display:block; padding:12px 8px 8px 20px; line-height:1.1em;} #nav li a:hover {background:#a9303c; color:#fff;}

#intro {color:#222; width:1009px; padding:120px 0 0 0;}
#second {background:url(images/red-cherry-bg1.png) #a9303c no-repeat fixed 0px; color:#fff; height:2900px; width:1009px; overflow:hidden; padding:60px 0 60px 0; position:relative;}
#third {background:url(images/david-bg1.jpg) no-repeat fixed 0px; color:white;	height:1900px; padding:350px 0 0 50px; width:959px; margin:0; position:relative;}
#fourth {background:url(images/contact-bg.png) no-repeat fixed 0px; height:1665px; width:1009px; padding:50px 0 0 0;}
#fourth .bg {background:url(images/contact-bg-from.png) 0 no-repeat fixed;	margin:0 0 0 250px;	padding:0; position:absolute;	width:741px; height:500px;	z-index:9000;}
#fourth .bg2 {background:url(images/contact-bg-called.png) 0 no-repeat fixed;	margin:0 0 0 250px;	padding:0; position:absolute; width:741px; height:500px;	z-index:9000;}

#white-logo {width:170px; height:3140px; background:url(images/paraclete-logo.png) no-repeat 45px 60px fixed; left:20px; top:0px; position:absolute;}
#white-logo2 {width:170px; height:2250px; background:url(images/paraclete-logo.png) no-repeat 45px 60px fixed; left:20px; top:0px; position:absolute;}

.content {margin:0 0 0 250px; width:600px;}



/* SITE STYLING */
h1 {color:#222; font-size:3em; font-weight:bold; letter-spacing:-0.05em; font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; margin:0 0 20px 0; padding:0}
h2 {color:#222; font-size:0.7em; font-weight:bold; margin:0; font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;}
p {font-family:Georgia, "Times New Roman", Times, serif;	font-size:0.8em ;margin:0 0 15px 0; color:#222; line-height:1.3em;}
ul {font-family:Georgia, "Times New Roman", Times, serif;	font-size:0.8em ;margin:0 0 15px 0; color:#222; line-height:1.3em; margin:0; padding:15px}
ul li {list-style:circle; margin:0 0 7px 0; padding:0}
p.helvetica {font-family:'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:0.7em;}
blockquote {font-size:1.4em; color:#a9303c; padding:0 20px 30px 0; margin:0; line-height:1.5em;}
.red-small {color:#a9303c; font-size:0.9em; font-style:italic;}
.white {color:#fff; opacity:1;}
img {border:0;}

#second p {color:#fff;}

.container {border-top:#222 solid 1px; padding:25px 0 50px 0; position:relative;}
.container a {font:"Helvetica Neue", Helvetica, Arial; text-decoration:none; color:#222;} .container a:hover {color:#a9303c;}
.photo {background:url(images/david-portrait.jpg) no-repeat; height:350px; width:550px; margin:0 auto; padding:0; position:absolute; z-index:0; left:208px; bottom:-16px;}
.col-1 {width:126px; float:left; display:inline;}
.col-2 {width:268px; float:left; display:inline; z-index:300;}
.col-3 {width:410px; float:left; display:inline;}
.col-4 {width:600px; float:left; display:inline;}

.gutter {margin:0 16px 0 0;}
.margin0 {margin:0;}
.padding0 {padding:0;}
.clear {clear:both;}



/* Intro */
.title {font-family:Georgia, "Times New Roman", Times, serif; font-size:3em; font-style:italic;}
.height300 {height:360px;}


/* CV ///////////*/
.job {padding:10px 0; margin:0 0 20px 0; color:#fff; width:48%; margin-left:1.5%; display:inline-block; vertical-align:top;}
.job:nth-child(2n+1) {margin-left:0;}
.job-fullwidth {padding:10px 0; margin:0 0 20px 0; color:#fff; width:100%;}
#second p.job-heading {font-size:1.2em; color:#a9303c; font-style:italic; background:#fff; padding:10px 10px 7px 10px; color:#222; line-height:1.2em; margin:0 0 20px 0; -webkit-border-radius:5px 5px 15px 5px; -moz-border-radius:5px 5px 15px 5px; border-radius:5px 5px 15px 5px;}
.job-date {margin:0 0 10px 0; padding:5px 0 3px 0; border-top:1px #fff solid; color:#fff; font-family:"Helvetica Neue", Helvetica, Arial; font-size:0.6em; font-weight:bold; }
.job-title {padding:0; color:#fff; margin:0 0 3px 0; font-size:1.1em; line-height:1.1em;}
.job-section {padding:0; color:#fff; margin:0 0 13px 0; font-size:1.4em; line-height:1.1em;}


.job-pos {font-family:Georgia, "Times New Roman", Times, serif; font-size:0.8em; color:#a9303c; font-style:italic; background:#fff; padding:1px 3px;}
.job ul, .job-fullwidth ul {font-size:0.75em; color:#fff; margin:0 0 0 20px; padding:0;}
.job ul li {margin:0 0 5px 0;}



/* Supplementary ///////////*/
.container-sup {padding:20px 0 30px 0; margin:0 0 50px 0; background:#000; width:100%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=50); -moz-opacity:0.6; -khtml-opacity:0.6; opacity:0.6;}
.container-sup p {color:#fff; background:none; opacity:1;}
p.sup-heading {font-family:Georgia, "Times New Roman", Times, serif; font-size:3em; color:#fff; font-style:italic; letter-spacing:-0.02em; line-height:1em; padding:0 20px;}
.container-sup ul {font-size:0.75em; color:#fff; margin:0 0 0 20px; padding:0;}
.container-sup ul li {margin:0 0 5px 0;}
.next {margin:10px 0 0 0;}
.next a {color:#fff; background:#a9303c; padding:2px 5px; font-weight:bold; font-family:"Helvetica Neue", Helvetica, Arial; text-decoration:none;}
.next a:hover {background:#fff; color:#a9303c;}



/* Contact ///////////*/
.content-contact {margin:0 0 0 600px; width:350px; padding:150px 0 0 0;}
.content-contact .col-1 {border-top:#a9303c solid 1px; padding:5px 0 0 0; margin-bottom:20px;}
.content-contact h2 {color:#a9303c;}
.content-contact a {color:#a9303c; text-decoration:none;} .content-contact a:hover {background:#a9303c; color:#fff;}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	
.photo {display:none; }
.photo-m {background-image:url(images/david-portrait.jpg); background-position: 40px 0; background-size:cover; background-repeat: no-repeat;height:340px; width:400px; margin:0; padding:0; position:absolute; z-index:0; right:0; bottom:0px; }

}