/* Color */

body {
    background-color: #131314;
}

a img {border: 0;}



/* FONTS */


@font-face {
    font-family: 'lavanderia_delicatedelicate';
    src: url('fonts/lavanderia_delicate.eot');
    src: url('fonts/lavanderia_delicate.eot?#iefix') format('embedded-opentype'),
         url('fonts/lavanderia_delicate.woff') format('woff'),
         url('fonts/lavanderia_delicate.ttf') format('truetype'),
         url('fonts/lavanderia_delicate.svg#lavanderia_delicatedelicate') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'livory_regularregular';
    src: url('fonts/livory-regular.eot');
    src: url('fonts/livory-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/livory-regular.woff') format('woff'),
         url('fonts/livory-regular.ttf') format('truetype'),
         url('fonts/livory-regular.svg#livory_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'livoryregular_italic';
    src: url('fonts/livory-regularitalic.eot');
    src: url('fonts/livory-regularitalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/livory-regularitalic.woff') format('woff'),
         url('fonts/livory-regularitalic.ttf') format('truetype'),
         url('fonts/livory-regularitalic.svg#livoryregular_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'socialicoregular';
    src: url('fonts/socialico.eot');
    src: url('fonts/socialico.eot?#iefix') format('embedded-opentype'),
         url('fonts/socialico.woff') format('woff'),
         url('fonts/socialico.ttf') format('truetype'),
         url('fonts/socialico.svg#socialicoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}
 
.icon-mail{ content: '\e800'; } /* '� �' */


/* TYPOGRAPHY */
h1{ font-size: 50px; font-family: 'livory_regularregular', Georgia, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; color: #949494; font-weight: normal; }
h1, ul {-webkit-font-smoothing: antialiased; }
h2{ font-size: 21px; }
h3{ font-size: 16px; }
h4{ font-size: 14px; }
h5{ font-size: 13px; font-family: 'livoryregular_italic', TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; color: #3E3E3E; font-weight: normal; text-align: center;letter-spacing: 2px; }
h6{ font-size: 11px; }

p{ margin-bottom: 16px; line-height: normal; }


/* Selection colours (easy to forget) */

::selection 	 	{background: rgba(0,0,0,0.3);}
::-moz-selection 	{background:  rgb(223, 217, 216);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(102,76,51);}


/* NAVIGATION */
a{ color: #785435; text-decoration: none; }
a:hover{ 
color: #fff;
-webkit-transition: all 0.4s;  
-moz-transition: all 0.4s;  
-o-transition: all 0.4s;  
transition: all 0.4s;
}
.logo{ background: url(../images/jacobwalsh-logo.png) no-repeat; display: block; width: 250px; height: 100px; padding-top: 0px;  }

a, span.link {
  color: #46609d;
}

a:active, span.active {
   /*color: #46609d;*/
}


a:hover {
    color: #df50a1;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

h1 {
    font-weight: 500;
    line-height: 1.2em;
    color: #131314;
    float: left;
    vertical-align: baseline;
}

h2 {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 15px;
    color: #131314;
    padding: 200px 0px 0px 0px;

}

h3 {
    font-family: 'livory_regularregular', Georgia, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size: 16px;
    color: #131314;
    float: left;
    clear: left;
    padding-top: 10px;

}

h4 {
    font-family: 'livory_regularregular', Georgia, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.3em;
    color: #131314;
    
}

.about h4 {
    margin-top: 1em;
}

p {
		font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style:normal;
    font-size: 16px;
    line-height: 24px;
    margin: 20px 20px 0px 0px;
    color: #131314;
}

ul {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style:normal;
    font-size: 16px;
    line-height: 24px;
    margin-top:12px;
}

nav a {
    text-decoration: none;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style:normal;
    font-size: 16px;
}

/* Composition */

#here {
    padding-top:90px;
� � � � -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;

}
.animated.fadeIn {
    -webkit-animation-name:fadeIn;
    -moz-transition: fadeIn;
    transition: fadeIn;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

nav {
    float: right;
    word-spacing: 70px;
}

header {
    height: 70px;
    position: fixed;
    max-width: 960px;
    width: 100%;
    padding: 20px 0px 10px 0px;
}


.concept-statement h4{
   width: 95%;
	height: 500px;
	vertical-align: middle;
	text-align: left;
    color: white;
}

.about {
    margin: 190px auto;
    height: 400px;
}

#sources-list li p {
    visibility: hidden;
    margin-top:-22px;

}

#sources-list li:hover p{
    visibility: visible;
    background-color:white;
    margin-top:-22px;
}

#sources-list li:hover a{
    visibility: hidden;
}

#buildthings {

}

#buildthings:hover span{
    display: none;
}

#buildthings:hover:after{
    color: #a5a6ac;
    content:" beautiful";
}


ul {
    text-decoration: none;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style:normal;
    font-size: 16px;
    float: right;   
}

#sources-list li {
    margin-top: 18px;
}

/* Sections */

.learning-section {
    margin-bottom: 20px;
    height: 500px;
}

.currently-learning {
    width: 60%;
    float: left;
}

.learning-list {
    width: 40%;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style:normal;
    font-size:16px;
}

.past-section {
    margin-bottom: 20px;margin-left:20px;
    height: 600px;
}

.past-projects {
    width: 60%;
    float: left;  
}

.projects-list {
    width: 40%;
}

.sources-section {
    margin-bottom: 90px;

}

.sources {
    width: 60%;
    float: left;
    height:900px;  
}

#sources-list {
    width: 40%;
}

.connect-section {
    height: 675px;
    margin-bottom:20px;margin-left:20px;
    margin-top:100px;
}

.contact-title {
    width: 60%;
    float: left;
}

.connect-section p {
    width: 481px;
    float: left;
}

.connect-list {
    width: 40%;
}

/* Footer */
footer {
   position:fixed;
   bottom:0px;
   height:60px;
   width: 960px;
   margin: 0 auto;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}


/* Images */
footer img {
    width: 3%;
    min-width: 15px;
    padding-left: 0px;
}

.first {
  -webkit-transition:all 0.7s ease-out;
  -moz-transition:all 0.7s ease-out;
  -ms-transition:all 0.7s ease-out;
  -o-transition:all 0.7s ease-out;
  transition:all 0.7s ease-out;
}

.first:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}


@media only screen and (max-width: 1000px){
 .container {
        width: 100%;
    }

    header {
    padding: 20px 20px 10px 20px;
    }

    .story {
        margin: 0px 20px 80px 20px;
    }
    
    .sources-section {
    margin-bottom: 90px;

}

		.sources {
    width: 60%;
    float: left; 
    height:900px; 
	}
	
	#sources-list {
    width: 40%;
    margin-bottom:90px;
}

    footer img {
    padding-left: 20px;
    }

}

.connect-section p {
         margin-bottom:90px;
    }

@media only screen and (max-width: 900px){
    .container {
        width: 100%;
    }

    header {
    padding: 20px 20px 10px 20px;
    }

    nav {
        padding-right: 40px;
    } 

    .story {
        margin: 0px 20px 80px 20px;
    }

    h4 {
        font-size: 1.9em;
    }
   
    .currently-learning {
        width: 40%;
    }

    .past-projects {
        width: 40%;
        float: left;  
    }

.sources {
    width: 60%;
    float: left; 
    height:900px; 
	}
	
	#sources-list {
    width: 40%;
    margin-bottom:90px;
}

    .contact-title {
        width: 40%;
    }

    .connect-section p {
        width: 38%;
        float: left;
        clear: left;
        margin-bottom:90px;
    }

    footer img {
    padding-left: 20px;
    }

}

@media only screen and (max-width: 768px){
    .container {
        width: 100%;
    }
    header {
    padding: 20px 20px 10px 20px;
    }

    nav {
        display: none;
    }

    .story {
        margin: 0px 20px 80px 20px;
    }

    h4 {
        font-size: 1.5em;
        padding: 0px;
    }

    ul {
        text-decoration: none;
        font-family: 'Roboto Slab'; font-weight:300; font-style:normal;
        font-size: 16px;
        float: left;
        clear: left;
        padding-top: 20px;  
    }

    .learning-list {
        width: 90%;
    }

    .past-projects {
        width: 90%;
        float: left;  
    }

   	.sources {
    width: 60%;
    float: left; 
	}
	
	 #sources-list {
    width: 90%;
    margin-bottom:90px;
}
  
    .sources-list li {
        margin-top: 18px;
        width:90%;
    }

    .contact-title {
        width: 80%;
     
    }

    .connect-section p {
        width: 75%;
        float: left;
        clear: left;
        margin-bottom:90px;
    }

    .connect-list {
        width: 80%;
    }


@media only screen and (max-width: 480px) {
    body {
        width: 100%;
    }
    
    header {
    padding: 20px 20px 10px 20px;

    }
    
     nav {
        display: none;
    }
	    .story {
        margin: 0px 20px 80px 20px;
    }

    h4 {
        font-size: 1.5em;
        padding: 0px;
    }

    ul {
        text-decoration: none;
        font-family: 'Roboto Slab'; font-weight:300; font-style:normal;
        font-size: 16px;
        float: left;
        padding-top: 20px;  
    }

    .learning-list {
        width: 295px;
    }

    .past-projects {
        width: 90%;
        float: left;  
    }
    
    .projects-list {
    width: 90%;
    margin-bottom:90px;
}

    #sources-list {
    width: 90%;
    margin-bottom:90px;
}
    
    .sources-list li {
        margin-top: 18px;
        width:90%;
    }

    .contact-title {
        width: 340px;
        float: left;
    }

    .connect-section p {
        width: 90%;
        float: left;
        margin-bottom:90px;
    }

    .connect-list {
        width: 320px;
    }

}

@media only screen and (min-width: 320px) and (max-width: 400px){
    body {
        width: 100%;
    }

    header {
    padding: 20px 20px 10px 20px;
    }

    nav {
        display: none;

    }

    .story {
        margin: 0px 20px 80px 20px;
    }

    h1 {
        float: left;
        vertical-align: baseline;
    }

    h2 {
        padding: 200px 0px 0px 0px;
    }

    h3 {
        float: left;
        clear: left;
        padding-top: 10px;
    }

    h4 {
        font-size: 1.5em;
        padding: 0px;
    }

    ul {
        text-decoration: none;
        font-family: 'Roboto Slab'; font-weight:300; font-style:normal;
        font-size: 16px;
        float: left;
        padding-top: 20px;  
    }

    .past-projects {
        width: 320px;
        float: left;  
    }

    .sources-list li {
        margin-top: 18px;
        width:90%;
    }
    
    .contact-title {
        width: 320px;
        float: left;
    }

    .connect-list {
        width: 320px;
    }