html, body {
  height: 100%;
}

body {
  margin: 0;
  position:static;
}

#container {
    max-width:100%;
}

a, a:visited, a:active, a:hover {
    cursor:pointer;    
    color:#222;
    text-decoration:none;
}

#top {
    float:left;
    width:100%;
    padding:10px;
    margin:0;
    background:#fff;
    color:#222;
    box-sizing:border-box;
}

.icon {
  float:left;
  width:200px;
  border-radius:50%;
}

.icon img {
    float:left;
    width:100%;
}

#top ul {
    padding:0;
    margin:0;
    text-align:right;
}

#top ul li {
    display:inline-block;
    text-align:center;
    padding:0;
    margin:0 10px;
    text-transform:uppercase;
    font-size:1;
    font-weight:normal;
}

#top ul li a, footer ul li a:visited {
    color:#444;
    transition:all 1s;
}

#top ul li a:hover, footer ul li a:active {
    cursor:pointer;    
    color:#222;
    text-decoration:none;}


h1 {
    text-transform:uppercase;
    font-family: 'Open Sans',sans-serif;    
    font-size:16px;
    color:#222;
    text-align:left;
    float:left;
        margin:0;
}

h2 {
    text-transform:uppercase;
    font-family: 'Open Sans', sans-serif;    
    font-size:16px;
    color:#222;
    padding:5px;
    text-align:center;   

}

#main {
    float:left;

    padding:0 10px;
    margin:0 0 40px 0;
}

#cv h2 {
    text-align:left;
    padding:0;
    margin:20px 0;
    float:left;
    width:100%;
}

.year {
    float:left;
    width:100%;
    margin:0 0 10px 0;
}

.year h3 {
    font-size:16px;
    float:left;
    margin:0;
}

.year ul {
    float:left;
    list-style-type:none;
    padding:0 0 0 20px;
    margin:0;
}

.year ul li {
    padding:0 0 5px 0;
}

.cv-year {
    font-weight:bold;
        width:100px;
}

.cv-desc {
    font-weight:normal;
}



    .project {
      float:left;
      width:100%;
  }
  
.img-full {

    width:100%;
}
  
  .grid {
      float:left;
      width:33.33%;
      margin:2% 0;
  }
  
  .grid img {
      float:left;
      width:100%;
  }
  
.menu {
    float:left;
    width:25%;
}

.menu ul {
    float:left;
    list-style-type:none;
}

.gallery {
    float:left;
    width:75%;
}

.gallery-item {
    float:left;
    width:100%;
    margin:0 0 20px 0;
}

.gallery img {
    float:left;
    width:100%;
}

.caption {
    float:left;
    width:100%;
    font-size:.8em;
    font-style:italic;
    padding:10px 0;
}

.description {
        display:block;
        width:96%;
        padding:0 2%;
        color:#fff;
        font-family:Arial, sans-serif;
        font-size:0.9em;
        font-style:italic;
    }

.description a {
    color:#de72e8;
}



.mailinglist {
    float:left;
    width:80%;
    margin:20px 10% 0 10%;
    box-sizing:border-box;
    padding:10px 20px;
    background:#fff;
    text-align:left;
    font-size:.9em;
}

.mailinglist input {
    margin:5px 0; 
    padding:5px;
}

.submit-button {
    background:#fff;
       box-shadow:none;
       border:none;
       	-webkit-transition: all 1s; /* Safari */
	transition: all 1s;	
	font-size:1em;
}

.submit-button:hover {
    background:#222;
    color:#fff;
}

footer {
    float:left;
    width:100%;
    margin:20px 0 40px 0;
}

footer ul {
    padding:0;
    margin:0 0 20px 0;
    list-style-type:none;
    text-align:center;
}

footer ul li {
    display:inline-block;
    text-align:center;
    padding:5px 10px;
    margin:0 10px;
    text-transform:uppercase;
    font-size:.8em;
    font-weight:bold;
}

footer ul li a, footer ul li a:visited {
    color:#444;
    transition:all 1s;
}

footer ul li a:hover, footer ul li a:active {
    cursor:pointer;    
    color:#222;
    text-decoration:none;}



@media (min-width:900px) {

    #top {
        padding:10px 0;
    }
  #container {
  float:none;
  width:900px;
  margin:0 auto;
  }
  
  
  #main {
      width:100%;
      padding:0;
  }
  
  .project {
      float:left;
      width:100%;
      padding:0;
  }
  
  .img-full-wrap {
      float:none;
      width:600px;
      margin:0 auto;
  }
  
  .grid {
      float:left;
      width:32%;
      margin:.5%;
  }
  
  .grid img {
      float:left;
      width:100%;
  }
  

#about {
    position:static;
    display:block;
    top:0;
}

.function-name {
    display:initial;
}



#info {
    display:none;
}
}