/*
Theme Name: 	Elana Schlenker
Theme URI: 		http://elanaschlenker.com
Description: 	based on Starkers http://viewportindustries.com/products/starkers
Version: 		1.1
Author: 		Eric Jacobsen
Author URI: 	http://whiskyvangoghgo.com
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

@font-face {
    font-family: Agipo;
    src: url("fonts/agipo_mono.otf") format("opentype");
}

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; }
body 				{ background:#fff; }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ 
  font-family:'leightonregular', serif; 
  font-size:20px;
}

/*
div { font-family:"Apercu Regular", 'Calibri', sans-serif; font-size-adjust:0.508; font-weight:normal; font-style:normal; }
div { font-family:'Stanley-RegularIta', serif; font-size-adjust:0.5; font-weight:normal; font-style:normal; }
div { font-family:"Apercu Bold", 'Calibri', sans-serif; font-size-adjust:0.508; font-weight:bold; font-style:normal; }
*/





body {
  background-color:rgb(25,21,89);
  color:white;
  text-rendering:optimizeLegibility;
  -webkit-transition:background 1.5s linear;
  -webkit-font-smoothing:antialiased;
}

a {
  color:white;
  border-bottom:1px solid black;
  text-decoration:none;
  -webkit-transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out;
          transition:background-color 0.15s ease-in-out, border 0.15s ease-in-out;
}
a:hover, .projects li:hover a {
  text-decoration:none;
  border-bottom:0px solid transparent;
}

header a, header a:hover, header a:visited {
    text-decoration:none !important;
    color:black !important;
    border-color:black !important;
}

header h1 span {
  display:inline-block;
  min-width:3px;
}

header h1:hover span, header h1.touched span {
  animation: bounce 0.275s;
  animation-direction:alternate;
  animation-iteration-count: infinite;
}

h1 span:nth-child(4n+1) {
  animation-delay:0.0s !important;
}

h1 span:nth-child(4n+2) {
  animation-delay:0.1s !important;
}

h1 span:nth-child(4n+3) {
  animation-delay:0.2s !important;
}

h1 span:nth-child(4n+4) {
  animation-delay:0.3s !important;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, -5px, 0); }
}

#masonry {
  opacity:0;
  -webkit-transition:opacity 0.5s ease-in/* , box-shadow 0.1s ease-in */;
          transition:opacity 0.5s ease-in/* , box-shadow 0.1s ease-in */;
}

#masonry.on {
  opacity:1;
}

img {
    -webkit-transition:opacity 0.3s ease-in/* , box-shadow 0.1s ease-in */;
            transition:opacity 0.3s ease-in/* , box-shadow 0.1s ease-in */;
}

a img.hovery {
    position:absolute;
    z-index:99;
    opacity:0;
    height:0px;
    width:0px;
    overflow:hidden;
    margin-top:20px;
    margin-left:20px;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    transition-duration:0.3s;
}   

a img.rotatey.article_nav {
    position:absolute;
    z-index:99;
    margin-top:0;
    margin-left:0;
    bottom:40px;
    left:0px;
    transform-origin:left bottom;
    transform:rotateZ(-90deg);
    opacity:0;
    -webkit-transition:opacity 0.15s ease-in, -webkit-transform 0.3s ease-in-out;
            transition:opacity 0.15s ease-in, transform 0.3s ease-in-out;
}

a img.rotatey.article_nav.right {
    left:auto;
    right:0px;
    transform-origin:right bottom;
    transform:rotateZ(90deg);
    opacity:0;
}

a {
  outline:0;
  position:relative;
}

#btn_next.waypoint_on a img.rotatey,
a:hover img.rotatey {
    opacity:1 !important;
    transform:rotateZ(0deg) !important;
}

a:hover img.hovery {
  opacity:1;
  width:inherit;
  height:inherit;
}

*:focus  {  
    outline: none !important;  
} 

:focus {
    /* -webkit-focus-ring-color = '#5B9DD9' */
    outline: -webkit-focus-ring-color auto 0px !important;
}

i, em {
    font-family:'leightonregular', serif; 
}


header {
  font-size:0.75em;
  position:fixed;
  z-index:15;
  top:10px;
  left:20px;
}

header h1 {
  display:inline;
}

  header a {
    border-bottom:0px;
  }
    header a:hover {background-color:transparent !important; }

header nav {
  display:block;
  position:fixed;
  z-index:15;
  right:20px;
  top:40px;
}

@media only screen and (min-width:375px) {
  header nav {top:10px; }
}

  header li {
    display:inline-block;
    margin-left:3px;
  }

#content_wrap {
  z-index:10;
  min-height:100vh;
}

article {
  margin:80px auto 30px auto;
}
  


.projects {
  text-align:left;
  font-size:0.75em;
}

  .projects li {
    text-align:center;
  }
  
  .projects a.for_img {
    display:block;
    width:100%;
    height:100%;
  }
    
  .projects img {
    width:100%;
    height:auto;
  }
      .projects a:hover img {opacity:0;}
      
  .projects video {
    width:100%;
    height:auto;
  }

  .projects h1 {
    font-size:1em;
    margin-top:1em;
  }
  
  .projects h1 a {
    position:relative;
  }
  
  .projects h1 a.viewed:after {
    position:absolute;
    right:-25px;
    content:'✔';
  }
  
  .projects h2 {
    font-family:'leightonregular', serif; 
    font-size:1em;
    margin-top:0.2em;
  }
  
  .projects li a {
      border-bottom:0px;
  }
  .projects li h1 a {
      background-color:transparent !important;
  }
  
  



.single_project {
  text-align:center;
}

  .single_project h1, .single_project p {
    font-size:1em;
    line-height:1.45em;
    margin:auto auto 2.2em auto;
    padding:0px 20px;
  }
  .single_project h1 {
    font-size:1em;
  }

  .single_project div.credits, .single_project h2 {
    font-family:'leightonregular', serif;  
    font-size:0.75em;
  }
  
  div.credits p {
    margin:0 auto;
    line-height:1.7em;
  }
  
  .single_project ol {
    margin-top:40px;
  }
  
  .single_project ol li {
    margin-bottom:40px;
  }
  .single_project ol li span {
    display:block;
    margin:auto;
  }
  
@media only screen and (max-width:768px) {
    .single_project ol li span {
        max-width:440px;
        height:auto !important;
    }
}

@media only screen and (max-width:736px) {
    .single_project ol li span {
        max-width:440px;
        height:auto !important;
    }
}

@media only screen and (max-width:667px) {
    .single_project ol li span {
        max-width:440px;
        height:auto !important;
    }
}

@media only screen and (max-width:568px) {
    .single_project ol li span {
        max-width:440px;
        height:auto !important;
    }
}

@media only screen and (max-width:440px) {
    .single_project ol li span {
        max-width:440px;
        height:auto !important;
    }
}

@media only screen and (max-width:414px) {
    .single_project ol li span {
        max-width:414px;
        height:auto !important;
    }
}

@media only screen and (max-width:375px) {
    .single_project ol li span {
        max-width:375px;
        height:auto !important;
    }
}

@media only screen and (max-width:320px) {
    .single_project ol li span {
        max-width:320px;
        height:auto !important;
    }
}


@-webkit-keyframes loading_gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes loading_gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


  .single_project img {
    max-width:280px;
    height:auto;
  }
  
@media only screen and (min-width:500px) {
    .single_project img {
        max-width:440px;
    }
}

  .single_project h2 {
    line-height:1.45em;
    margin:60px auto 20px auto;
  }
  
  .single_project p.tags {
    line-height:1.6em;
    font-size:19px;
    font-family:Agipo;
    width:280px;
  }
  
  .single_project p.tags a {
    display: inline-block;
    margin: 3px 5px 0px 5px;
    line-height:1em;
  }

  #article_nav {display:none; }

.words {}

  p.projects_head {
    margin:auto auto 40px auto;
    text-align:center;
  }

  p.projects_head span {
    display:inline-block;
    padding:6px 12px;
    font-family:Agipo;
    font-size: 19px;
/*     font-size:1em; */
/*     background-color:rgb(211,0,255); */
    cursor:pointer;
  }
  
  .btn_close, .sticky_close {
    margin:auto auto 0.2em auto;
    font-size:1.2rem;
    cursor:pointer;
    text-align:center;
    font-weight: bold;
  }
    .sticky_close {
      margin:auto auto 5px auto;
      transform-origin: 50% 55%;
      font-weight: normal;
    }
    
    .sticky_close:hover {
      animation: spin 0.65s infinite linear;
    }

      @keyframes spin {
          from {transform:rotate(0deg);}
          to {transform:rotate(360deg);}
      }

  #tags_index {
    width:280px;
    margin-left:20px;
    -webkit-column-count:2;
    -webkit-column-gap:30px;
  }
  
    .tag_group span {
      font-family:'leightonregular', serif;  
      font-size:0.75em;
      
    }
    
    .tag_group {
      padding-bottom:2em;
      -webkit-column-break-inside:avoid;
      -moz-column-break-inside:avoid;
      -o-column-break-inside:avoid;
      -ms-column-break-inside:avoid;
      column-break-inside:avoid;
    }
    
    .tag {
      font-size:19px;
      font-family:Agipo;
      margin-top: 0.2em;
      line-height: 1.5em;
    }


  .about {
    width:280px;
    margin-left:20px;
    font-size:1em;
    line-height:1.5em;
  }
  
    .about>div {
      margin-bottom:1.5em;
    }
  
    .about h1, .about h2, p.tiny {
      font-family:'leightonregular', serif; font-size-adjust:0.5; 
      font-size:0.75em;
    }
  
    .about h1, .about h2 {
      margin-top:2em;
    }
    
    .about h1:first-of-type, .about li:first-of-type h2 {
      margin-top:0;
    }
    
    .tweet {
      margin-bottom:1em;
    }
    
    .tweet a:hover {
      color:yellow;
    }

.sticky {display:none; }

.really_simple_twitter_widget li {margin-bottom:1em;}

.twitter-timestamp {
  display:block;
  font-family: 'leightonregular', serif;
  font-size-adjust: 0.5;
  font-size: 0.7em;
}


.tagged_projects {
  display:block;
  max-width:960px;
  margin:auto 20px 2em 20px;
}

.tagged_projects li {
  border-top:1px solid black;
  display:flex;
  font-size:14px;
}

  .tagged_projects h1 {
    width:30%;
    flex:6;
  }
    .tagged_projects h1 a {
      text-decoration:none;
      border-bottom:0px;
    }
  .tagged_projects li > * {
    padding:40px 20px;
  }
  .tagged_projects li div.count {
    flex:0.25;
    padding:40px 0;
    font-family:Agipo;        
  }
  .tagged_projects li div.img {
    flex:3;
    padding:40px 20px;
  }

  .tagged_projects li div.tags {
    display:none;
    flex: 12;
    line-height:1.6em;
    font-family:Agipo;
  }

.tagged_projects li:last-of-type {
  border-bottom:1px solid black;
}


/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* horizontal iPhone omg */
@media only screen and (min-width: 480px) {

  article {
    width:440px;
    margin:60px auto 30px auto;
  }

    .projects li {
      width:200px;
    }

  #tags_index {
    width:inherit;
    margin-left:auto;
    -webkit-column-count:3;
    -webkit-column-gap:20px;
  }

  .about {
    width:440px;
    margin-left:auto;
    text-align:center;
  }
  
    .about>div {
      vertical-align:top;
      display:inline-block;
      margin-left:10px;
      font-size:0.8em;
    }
    
    #bio p {
      margin-top:1em;
    }
    
    #bio p:first-child {
      margin-top:0em;
    }
    
    #col_1 {
      width:165px;
      margin-right:20px;
      float:none;
    }
    
    #col_2, #col_3 {
      width:100px;
      margin-left:45px;
      float:none;
      clear:right;
    }

    #col_3 {
      margin-top:0;
    }


}

/* vertical ipad and desktop */
@media only screen and (min-width: 768px) {

  .tagged_projects li div.tags { display:block; }
  
  .tagged_projects {
    margin:auto;
    padding-top:80px;
  }

  header {
    font-size:1.05em;
    position:fixed;
    z-index:15;
    top:0px;
    left:0px;
  }
  
    header h1 {
      position:fixed;
      display:block;
      z-index:10;
      top:46px;
      left:20px;
    }
    
      header a {
        border-bottom:0px;
      }
    
    header nav {
      display:block;
      position:fixed;
      z-index:10;
      top:46px;
      right:20px;
      left:auto;
    }
  
    header li {
      margin-left:8px;
      margin-right:0px;
    }
  
  
  /* work index */
  
  article {
    width:740px;
    margin:140px auto 30px auto;
  }
  article.single_project {
    margin:47px auto 30px auto;
  }

    .projects li {
      width:320px;
    }

    .projects li.doublewide {
      width:740px;
    }

  
  
  /* individual project */

  .single_project h1, .single_project h2, .single_project p {
    width:65%;
  }
  .single_project h1 {
    font-size:1em;
    position:fixed;
    z-index:14;
    text-align:center;
    width:100%;
    left:0px;
    margin:0;
    padding:0px;
  }
  
  .copy > p {
    padding-top:75px;
  }
  
  .single_project img {
    max-width:700px;
    height:auto;
  }
  
  .single_project p.tags {
    width:430px;
  }

  .single_project ol li span {
    max-width:700px;
  }

  .single_project ol li span {
/*     background: linear-gradient(45deg, rgb(255,205,205), rgb(230,211,242)); */
    background-size: 400% 400%;
    
/*
    -webkit-animation: loading_gradient 1.5s linear infinite;
            animation: loading_gradient 1.5s linear infinite;
*/
  }

  /* tags page */
  
  .words {
    margin-top:60px;
  }

  #tags_index {
    width:inherit;
    margin-left:auto;
    padding-top:80px;
    -webkit-column-count:3;
    -webkit-column-gap:40px;
  }
  
  
  
  /* about page */
  
  .about {
    width:740px;
    margin-left:auto;
  }
  
    .about>div {
      vertical-align:top;
      display:inline-block;
/*       margin-left:40px; */
      font-size:1em;
    }
    
    #bio p {
      margin-top:1em;
    }
    
    #bio p:first-child {
      margin-top:0em;
    }
    
    #col_1 {
      float:left;
      width:505px;
      margin-left:0px !important;
    }
    
    #col_2, #col_3 {
      width:295px;
      float:right;
      clear:right;
    }
    
    #col_3 {
      margin-top:2em;
      margin-bottom:30px;
    }
    
  .sticky {
    display:block;
    position:absolute;
/*     box-shadow:3px 3px 5px rgba(0,0,0,0.5); */
    padding:10px 20px 20px 20px;
    text-align:center;
    width:180px;
  }
    .single_project .sticky p, .sticky p {
      font-size:14px;
      font-family:Agipo;
      line-height:1.5em;
      width:auto;
      margin-bottom:0;
    }
        .sticky a:hover {background-color:transparent !important; border-bottom:1px solid black;}

    #col_1 {
      width:340px;
      float:none;
    }
    
    #col_2, #col_3 {
      width:300px;
      float:none;
      clear:right;
    }

    #col_3 {
      margin-top:0;
    }


}



/* horizontal ipad and desktop */
@media only screen and (min-width: 960px) {

  header h1 {
    left:50px;
  }
  
  header nav {
    right:50px;
  }

  /* work index */

  article {
    width:940px;
    padding-bottom:100px;
  }

    .projects li {
      width:420px;
    }

    .projects li.doublewide {
      width:940px;
    }

  
  
  /* individual project */

  .single_project h2, .single_project p {
    width:65%;
  }
  
  .single_project ol li span {
    max-width:none;
  }
    .single_project img {
      max-width:800px;
      height:auto;
    }
  
  #article_nav {
    display:block;
    position:fixed;
    bottom:75px;
    left:0px;
    width:100%;
    height:0px;
  }
    #article_nav div {
      position:absolute;
      z-index:20;
    }
      #btn_next {
        right:50px;
      }
      #btn_prev {
        left:50px;
      }
      #article_nav a {
        display:block;
        border-bottom:0px;
        background-color:transparent !important;
      }
      
      #btn_next span, #btn_prev span {
        display:block; 
      }
      
      #btn_next.waypoint_on span {
        animation: arrow_bounce 0.5s ease-in-out infinite;
      }

@keyframes arrow_bounce {
  0%   {transform:translateX(0px);  }
  50%  {transform:translateX(-20px);}
  100% {transform:translateX(0px);  }
}
  
  /* tags, about page */
  
    #col_1 {
      width:570px;
      float:none;
    }
    
    #col_2, #col_3 {
      width:299px;
      float:none;
      clear:right;
    }

    #col_3 {
      margin-top:0;
    }

  .about {
/*     width:940px; */
  }

}

/* horizontal ipad and desktop */
@media only screen and (min-width: 1060px) {

  article, .projects  {
    width:960px;
  }

    .projects li {
      width:430px;
    }

    .projects li.doublewide {
      width:960px;
    }

}


@media only screen and (min-width: 1200px) {

  .projects.home  {
    width:1100px;
  }

    .projects li {
      width:300px;
    }

    .projects li.doublewide {
      width:700px;
    }

}


@media only screen and (min-width: 1550px) {

  .projects.home {
    width:1490px;
  }
  
    .projects li {
      width:430px;
    }

    .projects.home li.doublewide {
      width:960px;
    }

/*
    .projects.tagged_projects {
      margin-left:-254px;
    }
*/

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {
}


footer {
  background-color:white;
  text-align:center;
  padding:50px 0;
}

footer img {
  margin-top:25px;
}