/* general settings */
html {
  min-height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  position:relative;
  width:100%;
}
body {
  background-color:#e6e6e6;
  color:#FFF;
  font-weight:100;
  margin:0;
  min-height:100%;
  width:100%;
}
a {
  text-decoration:none;
}
a img {
  border:none;
}
h1 {
  font-size:3em;
  font-weight:100;
}
p {
  font-size:1.4em;
}
ul, li {
  font-size:1.1em;
}


.wrap {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin:0 auto;
  /* max-width:1420px; */
  overflow:hidden;
  padding:2em 5% 2em;
  position:relative;
  width:100%;
}
.wrap:before {
  content:'';
  display:inline-block;
  height:100%;
  margin-right:-0.25em;
  vertical-align:middle;
}

/* header section */
/*
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px;}
*/

header {
    text-align: justify;
    height: 8em;
    padding: 2em 5%;
    background: #2c3e50;
    color: #fff;
}

header::after {
    content: '';
    display: inline-block;
    width: 100%;
}

header > div,
header > div:before,
header nav,
header > div h1 {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

header > div {
    height: 100%;
}

header > div:before {
    content: '';
    height: 100%;
}

header > div h1,
header > div h1 a  {
    font-size: 2.0em;
    font-style: italic;
    color: #fff;
}

header nav a {
    padding: 0 0.6em;
    white-space: nowrap;
    letter-spacing: 1px;
    color: #fff;
    font-size: 1.2em;
}

header nav a:last-child {
    padding-right: 0;
}

header nav a.activeSmall {
  color:#c33c3a;
}

@media screen and (max-width: 720px){
    
    header {
        height: auto;
    }
    
    header > div,
    header > div h1,
    header nav {
        height: auto;
        width: auto;
        display: block;
        text-align: center;
    }
}

/* footer section */
footer .copyright {
  color:#adadad;
  margin-bottom:3em;
  margin-top:3em;
  text-align:center;
}

/* other objects */
.projectObj {
  color:#fff;
  display:block;
  padding-top: 4em;
}
.projectObj .title {
  /* float:left; */
  /* font-size:3em; */
  /* position:absolute; */
  /* width:65%; */
  display:block;
  margin-top:0%;
}

.projectObj .content {
  /* float:left; */
  font-size:1em;
  font-weight:100;
  /* position:absolute; */
  /* width:65%; */
}

.projectObj .img {
  float:right;
  margin-bottom:5%;
  margin-top:5%;
  margin-left:5%;
  margin-right:5%;
  max-width: 30%;
  /* width:30%; */
}
@media screen and (max-width: 640px){
  .projectObj .img {
    float:left;
    margin-bottom:5%;
    margin-top:5%;
    margin-left:0%;
    margin-right:5%;
    max-width: 95%;
  }
}

.view-enter,.view-leave {
  -moz-transition:all .5s;
  -o-transition:all .5s;
  -webkit-transition:all .5s;
  transition:all .5s;
}

.view-enter,.view-leave {
  -moz-transition:all .5s;
  -o-transition:all .5s;
  -webkit-transition:all .5s;
  transition:all .5s;
}
.view-enter {
  left:20px;
  opacity:0;
  position:absolute;
  top:0;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}
.view-leave {
  left:0;
  opacity:1;
  position:absolute;
  top:0;
}
.view-leave.view-leave-active {
  left:-20px;
  opacity:0;
}