body{margin:0}
.top {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);} 
.top {background-color: white; position: fixed; top: 0; width: 100%;}
.top a { font-size: 20px;}
.logo {letter-spacing: .1rem; padding: 0 0 0 10px;}
.init{font-size: 30px;}
.nav-button{
border:none;
display:inline-block;
padding:10px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:inherit;
background-color:inherit;
text-align:center;
cursor:pointer;
white-space:nowrap;
}
.nav-button{white-space:normal}
.nav-button:hover{color:#000;background-color:#ccc;}
.right{float:right;}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
  
li {
    float: right;
    border-right:1px solid #bbb;
}
  
li:last-child {
    border-right: none;
}
  
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
li a:hover:not(.active) {
    background-color: #111;
}
  
.active {
    background-color: #4CAF50;
}




hr {
  box-sizing: content-box;
  height: 0;
}

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.container .row:first-of-type {
  margin-top: -30px;
}
.container .row:first-of-type .columns {
  padding-top: 30px;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

@media (min-width: 1000px) {
  .columns:first-child {
    padding-left: 4%;
  }
}
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
@media (min-width: 1000px) {
  .container {
    width: 80%;
  }

  .column,
  .columns {
    margin-left: 4%;
  }

  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.66667%;
  }

  .two.columns {
    width: 13.33333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.66667%;
  }

  .five.columns {
    width: 39.33333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.66667%;
  }

  .eight.columns {
    width: 65.33333%;
  }

  .nine.columns {
    width: 74%;
  }

  .ten.columns {
    width: 82.66667%;
  }

  .eleven.columns {
    width: 91.33333%;
  }

  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.66667%;
  }

  .two-thirds.column {
    width: 65.33333%;
  }

  .one-half.column {
    width: 48%;
  }

  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66667%;
  }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.33333%;
  }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.66667%;
  }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.33333%;
  }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.66667%;
  }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.33333%;
  }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78%;
  }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.66667%;
  }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.33333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.66667%;
  }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.33333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.column {
    margin-left: 52%;
  }
}
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}
















.timeline {
  min-height: 10px;
}

.timeline h4 {
  text-align: center;
}

.timeline:after {
  display: none;
}

@media (min-width: 1000px) {
  .timeline {
    border-right: 1px solid red;
    min-height: 300px;
  }

  .timeline h4 {
    text-align: left;
  }

  .timeline:after {
    content: "-";
    background-color: red;
    color: red;
    font-size: 0;
    width: 15px;
    height: 15px;
    display: block;
    position: relative;
    top: -45px;
    left: 12px;
    float: right;
    border: 4px solid #ffffff;
    box-shadow: 0px 0px 0px 3px red;
    border-radius: 100%;
  }
}
.skills,
.education,
footer {
  border-top: 1px solid red;
  padding: 35px 0;
}

.skills span {
  padding: 5px 10px;
  background-color: red;
  color: #ffffff;
  margin: 0 20px 20px 0;
  display: inline-block;
  text-align: center;
}

footer {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 26px;
  margin-bottom: 5px;
}

h3 {
  font-size: 20px;
  color: #E5B61D;
  margin-bottom: 5px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

p {
  margin-top: 0;
}








.footer {

    width: 100%;    
    color: white;
    text-align: center;
    
}