body {
    font-family: sans-serif;
    
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}

/* Navigation bar */
.topnav {
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #111;
  text-align: center;
  margin-right: 2em;
  margin-top: 1.5em;
  text-decoration: none;
}

.topnav a:hover {
    
}
.menu a{
    padding: 14px 16px;
}
.mobile_logo {
    display: none;
}

.home a.sander {
  float: left;
  display: block;
  text-align: left;
  margin-left: 2em;
  margin-top: 0.5em;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav .icon {
  display: none;
}

.no-list-style,
ul.no-list-style {
  list-style: none; }

/* Misc ---------------------- */
.hide {
  display: none; }

.fill-remainder {
  float: none;
  overflow: hidden; }

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0); }
  to {
    -webkit-filter: hue-rotate(1turn);
    -moz-filter: hue-rotate(1turn);
    -ms-filter: hue-rotate(1turn);
    filter: hue-rotate(1turn); } }

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0); }
  to {
    -webkit-filter: hue-rotate(1turn);
    -moz-filter: hue-rotate(1turn);
    -ms-filter: hue-rotate(1turn);
    filter: hue-rotate(1turn); } }

/* Content */

.content {
	padding: 1em 0 3em;
	max-width: 1440px;
	margin: 0 auto;
}


/* Related demos */

.content--related {
	text-align: center;
	font-weight: bold;
	padding: 0 1em;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.3;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}


.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
}

.caption {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.navigation {
  display: inline-block;
  position: absolute;
  right: 6vw;
  top: 40px; }
  @media screen and (max-width: 766px) {
    .navigation {
      right: 20px;
      top: 35px; } }

.navigation__ul {
  list-style: none;
  margin: 0; }

.navigation__li {
  display: inline-block;
  margin-left: 35px; }
  .navigation__li:first-child {
    margin-left: 0; }

.navigation__button {
  font-weight: 300;
  line-height: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  .navigation__button:hover {
    opacity: 0.8; }
nav{
  display: block; }
a {
  color: #000;
  text-decoration: none;
  position: relative; }
  a.underline:before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    opacity: 0.2; }
  a.underline:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    opacity: 1;
    -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: scale3d(0, 1, 1);
    -moz-transform: scale3d(0, 1, 1);
    -ms-transform: scale3d(0, 1, 1);
    -o-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }
  a.underline:hover:after {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }


.dark h1,
.dark .h1,
.dark h2,
.dark .h2,
.dark h3,
.dark .h3,
.dark h4,
.dark .h4,
.dark h5,
.dark .h5,
.dark h6,
.dark .h6 {
  color: #ffffff; }

.dark a {
  color: #ffffff; }
  .dark a.underline:before {
    background-color: #ffffff; }
  .dark a.underline:after {
    background-color: #ffffff; }

/* Mobile-menu */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.container2{
    max-width: 1200px;
}

.about {
    padding: 5em 1em 3em;
	max-width: 350px;
	float: left;
    display: block;

}

.about_text{
    padding: 1em 1em 3em;
	max-width: 350px;
	float: left;
    display: block;
}

.skills{
        padding: 1em 1em 3em;
	max-width: 160px;
	float: left;
    display: block;
    margin-bottom: 4em;
}

a {
  color: #000;
  text-decoration: none;
  position: relative; }
  a.underline:before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    opacity: 0.2; }
  a.underline:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    opacity: 1;
    -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: scale3d(0, 1, 1);
    -moz-transform: scale3d(0, 1, 1);
    -ms-transform: scale3d(0, 1, 1);
    -o-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }
  a.underline:hover:after {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }

footer {
  position: relative;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 2vw;
  padding: 2vw 0; }
  footer.dark-footer {
    background-color: white; }
    footer.dark-footer a {
      color: black; }
      footer.dark-footer a.underline:before {
        background-color: #ffffff; }
      footer.dark-footer a.underline:after {
        background-color: #ffffff; }
  footer a {
    display: inline-block;
    margin: 0 1vw; }
    @media screen and (max-width: 766px) {
      footer a {
        margin: 0 3vw 30px; } }

.contact-page footer {
  position: fixed;
  left: 0;
  bottom: 0; }

/* Responsive */
@media screen and (max-width: 766px) {
    .topnav a {display: none;}
 .topnav a.icon {
          margin-right: 0em;
          margin-top: 0em;
          text-align: left;
          float: left;
          display: inline-block;
        }
        
        .mobile_logo {
          margin: auto;
          float: middle;
          display: block;
        }
        .menu{
          width:100%;
          display:flex;
        
    }

    .home a.sander {
      float: left;
      display: none;
}


    
}

@media screen and (max-width: 766px) {
    
    .topnav.responsive a {
    margin-right: 0em;
    margin-top: 0em;
    float: none;
    display: block;
    text-align: left;
  }
        .home a.sander {
      float: left;
      display: none;
}

    .content {
	max-width: auto;
}
}