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


@font-face{ font-family: 'tusj'; src: url('tusj/tusj.eot'); src: url('tusj/tusj.eot?iefix') format('eot'), url('tusj/tusj.woff') format('woff'), url('tusj/tusj.ttf') format('truetype'), url('tusj/tusj.svg#webfont') format('svg'); } 

body, html {
  height: 100%;
  font-family: sans-serif;
}

.parallax [class*="bg__"] {
  position: relative;
  height: 20em;
  text-indent: -9999px;
  background-attachment: fixed;
  background-position: top center;
  
}
.parallax [class*="bg__"]:nth-child(2n) {
  box-shadow: inset 0 0 1em #111;
}
.parallax .bg__one, .bg__three, .bg__five  {
  height: 8em;
}
.parallax .bg__two, .bg__four {
  height: 14em;
}


.parallax .bg__one {
  background-image: url(wrench-1.jpg);
}
.parallax .bg__two {
  background-image: url(wrench-1.jpg);
}
.parallax .bg__three {
  background-image: url(wrench-5.jpg);
}
.parallax .bg__four {
  background-image: url(map.jpg);
}
.parallax .bg__five {
  background-image: url(text-wrench.png);
}


.parallax .bg__break2 {
  box-shadow: inset 0 0 1em #111;
  background-image: url(irene.jpg);
  height: 4em;
    position: relative;
    z-index: -2;
}
.parallax .bg__break {
  box-shadow: inset 0 0 1em #111;
  background-image: url(tenderness.png);
  height: 7em;
}

.parallax .capture {
  float: left;
    position: relative;
    z-index: -2;
  width: 12em;
  margin-top: -1em;
    margin-left: 1em;
  text-indent: 0;
   font-family: 'tusj';
    font-size: 1.3em;
    letter-spacing: .1em;
  color:#FFF;
  text-shadow: #000 0.1em 0.1em 0.2em;
  text-align: center;
    background-color: #fff;
  background-image:url(tenderness.png);
  box-shadow: 0 1px 0.125em #333;
}

.parallax .capture2 {
  float: left;
    position: relative;
    z-index: -2;
  width: 28em;
  margin-top: -1em;
    margin-left: 1em;
  text-indent: 0;
   font-family: 'tusj';
    font-size: 1.3em;
    letter-spacing: .1em;
  color:#FFF;
  text-shadow: #000 0.1em 0.1em 0.2em;
  text-align: center;
    background-color: #fff;
  background-image:url(tenderness.png);
  box-shadow: 0 1px 0.125em #333;
}

article .container {
  max-width: 600px;
  min-width: 250px;
  margin: 0 auto;
}

article .container2 {
  max-width: 600px;
  min-width: 250px;
  margin: 0 auto;
}

article .container3 {
    max-width: 475px;
    min-width: 250px;
    padding: 0;
    margin: 0 auto;
}

article .container4 {
  max-width: 550px;
  min-width: 250px;
  margin-left: 50px;
}

article .imagecontainer {
  float: right;
  padding: .5em;
  margin: -16em -20em 0 0;
}

article header {
  position: relative;
  margin: -5em 0 0 0;
  padding: .7em;
  text-align: left;
  font-size: 2em;
  color: #333;
  background-image:url(tenderness.png);
  box-shadow: 0 1px 0.125em #333;
  
}

article nav {
  position: relative;
  margin: -5em 0 0 0;
}


article h1 {
  margin: 0 0 -0.4em;
  font-size: 2.3em;
  font-family: 'tusj';
  color:#666;
  text-shadow: #CCC 0.1em 0.1em 0.1em;
}


article h3 {
  margin: 0 2em -0.4em;
  font-family: 'tusj';
  color:#FFF;
    opacity: 0.7;
  text-shadow: #000 0.1em 0.1em 0.2em;
  text-align: left;
}



article h4 {
  font-family: 'tusj';
  font-size: 1.575em;
    opacity: 0.5;
    letter-spacing: .15em;
    margin-left: 2em;
    margin-top: -1em;
    margin-bottom: -1em;
}

article h5 {
  font-size: 1.25em;
    color:#28a4a4;
    opacity: 0.3;
    margin-left: 2.5em;
    margin-bottom: .1em;
    margin-top: .3em;
}

article h6 {
    font-size: 1em;
    opacity: 0.3;
    margin-left: 4em;
    font-weight: 100;
    line-height: 130%;
}

article section {
  padding: 3em;
}
article section.parallax {
  margin: 0;
  padding: 0;
}

.aside {
    margin: 0 -2em 0 3em;
    line-height: 100%;
    font-weight: 300;
    font-size: 1.25em;
    padding: 0.5em;
    text-align: left;
}

p {
    font-weight: 100;
    line-height: 130%;
}


.more {
      display: none;
}
 
   a.showLink, a.hideLink {
      background: transparent no-repeat left; }
   a.hideLink {
      background: transparent no-repeat left; }


a:link {color:#CC9999; text-decoration:none; text-shadow: #FFF 0em 0em .6em;}
a:visited {color:#CCCCCC; text-decoration:none; text-shadow: #000 0em 0em .5em;}
a:hover {color:#FFFFFF; text-decoration:none; text-shadow: #000 0em 0em .5em;}

img {
    box-shadow: 0 1px 0.25em #333;
}


 /* Slideshow container */
.slideshow-container {
  width: 475px;
  position: relative;
  margin: auto;
}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  width: auto;
    margin-right: -1em;
    margin-left: -1em;
  top: 20%;
  padding-left: 5px;
    padding-right: 5px;
    padding-top: 40px;
    padding-bottom: 40px;
  color: black;
  opacity: 0.3;
  font-size: 4em;
  transition: 0.6s ease;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #cccccc;
  opacity: 0.6; 
  box-shadow: 0 1px 0.25em #333;
}

/* Caption text */
.text {
  color: #000000;
  opacity: 0.4;    
  max-width: 400px;
  background-color: #cccccc;
  font-size: 15px;
  padding: 25px 10px 10px 25px;
  position: absolute;
  bottom: -35px;
  right: 0;
  width: 100%;
  text-align: left;
  box-shadow: 0 1px 0.25em #333;
}




ul.topnav {
    position: fixed;
    right: 0;
    list-style-type: none;
  margin: -5em;
    padding-top: .5em;
    padding-right: .5em;
    overflow: hidden;
      margin: -5em 0 0 0;
}

ul.topnav li {
  float:left;
}

ul.topnav li a {
  display:block; padding:0.1em; color:#CC9999; font-size: 1.5em; text-decoration:none; text-shadow: #FFF 0em 0em .6em;
}


ul.topnav li a:hover {
  color:#FFFFFF; padding:0.1em; text-decoration:none; font-size: 1.75em; text-shadow: #000 0em 0em .5em;
}

ul.topnav li.icon {display: none; font-size: 1.5em; padding: 0; margin: 0;}




  ul.topnav li {display: none;}
  ul.topnav li.icon {
    display: block;
    right: 0;
      padding: 2em;
  }




  ul.topnav.responsive {position: fixed; 
    right: 0; top: 6em;
    background-color: rgba(242, 242, 242, 1.0);
      border-top-left-radius: 2em;
   border-bottom-left-radius: 2em; 
    box-shadow: 0 1px 0.3em #333;
      padding-right: 1em;
      z-index: 1005;
    }
  ul.topnav.responsive li.icon {
      display: none;
    right: 0;
    top: 0;
  }
    
      ul.topnav.responsive li.icon2 {
          font-size: 3em;
      padding: 0;
      margin-bottom: -.75em;
    }
    
  ul.topnav.responsive li {
    float: none;
    display: block;
  }
    


@media screen and (max-width:480px) {
  ul.topnav.responsive {position: fixed; 
    right: 0; top: 6em;
    background-color: rgba(242, 242, 242, 1.0);
      border-top-left-radius: 2em;
   border-bottom-left-radius: 2em; 
    box-shadow: 0 1px 0.3em #333;
      padding-right: 1em;
      width: 60%;
      z-index: 1005;
    }
  ul.topnav.responsive li.icon {
    display: none;
    right: 0;
    top: 0;
  }
    
      ul.topnav.responsive li.icon2 {
          font-size: 3em;
      padding: 0;
      margin-bottom: -.75em;
    }
    
  ul.topnav.responsive li {
    float: none;
    display: block;
  }
    
}








#loader{
position:fixed;
top:0;
width:100%;
height:100%;
background-color:white;
text-align:center;
margin:0;
padding:0;
overflow:hidden;
z-index:1000;
}

#loader2 {
    position: relative;
    display: block;
    left: 40%;
    top: 40%;
    width: 12em;
    height: 12em;
    margin: -75px 0 0 -75px;
    border: 150px solid transparent;
    border-top-color: #eaf6f6;
    border-radius: 50%;
    z-index: 1500;
    -webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}

#loader2:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 30px solid transparent;
    border-top-color: #f6f8f8 ;
    border-radius: 50%;
    -webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}

#loader2:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 15px solid transparent;
    border-top-color: #74b7b6;
    border-radius: 50%;
    -webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}