body{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
  background-color: #F8F4F1;
}
#container{
  width: 1200px;
  width: 100%;
}
.logo img{
  width: 60px;
  height: auto;
  position: relative;
  top: 50px;
  left: 7%;
}
.nav{
  text-align: center;
}
.nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.nav li{
  display: inline;
}

.nav li a{
  font-size: 16px;
  color: black;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-block;
  padding: 20px 30px;
  position: relative;
}

a.effect-underline:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1.5px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}

a.effect-underline:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.foto img{
  height: 750px;
  width: auto;
}
.foto{
  position: absolute;
  right: 0;
  top:0;
}
.about img{
  width: 500px;
  height: auto;
}
.about{
  position: absolute;
  top: 600px;
  right: 200px;
}
.aboutme{
  width: 600px;
  line-height: 2;
  letter-spacing: 2px;
  left: 7%;
  position: absolute;
  top:30%;
}
.line {
   width: 80%;
   position: absolute;
   overflow: hidden;
   top: 90%;
   right: 8%;
}

.line:before {
   content: '';
   position: absolute;
   top: 0;
   left: 47%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.mark img{
   width: 70px;
   height: 70px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
}
.mark{
   transform: translateX(70px);
   z-index: 9999
   margin-top: 20px;
}

.timeline-content {
   margin-top: 20px;
   width: 100%;
   padding: 0 120px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
   width: 200%;
}
#skill { 
  list-style: none;
  width: 35%;
  position: absolute;
  line-height: 2em;
  padding: 3% 0;
  top:90%;
  left: 8%;
  padding-bottom: 150px;
}

#skill li { 
  margin-bottom:50px;
  height:20px; 
  border-radius:10px; 
  background-color: #F8F4F1;
}

#skill li p { 
  color: #676767;
  font-size: 15px;
  position:relative; 
  top:-40px;
  font-family: roboto, sans-serif;
}

.bar { 
  height:18px; 
  margin:1px 2px;  
  position:absolute;
  border-radius:10px;   
}

.graphic-design {
  width:100%; 
  -moz-animation:graphic-design 4s ease-out;
  -webkit-animation:graphic-design 4s ease-out;
  background-color: #2E4285;
}

.html-css {
  width:90%;
  -moz-animation:html-css 4s ease-out;
  -webkit-animation:html-css 4s ease-out;
  background-color: #E26846;
}
.jquery {
  width:65%;
  -moz-animation:jquery 4s ease-out;
  -webkit-animation:jquery 4s ease-out;
  background-color: #E9A9A7;
}

.wordpress {
  width:80%;
  -moz-animation:wordpress 4s ease-out;
  -webkit-animation:wordpress 4s ease-out;
  background-color: #E9AA4F
  
}

@-moz-keyframes graphic-design {0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes graphic-design       { 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes html-css        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes wordpress   { 0%  { width:0px;} 100%{ width:80%;}  }




@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}
.scroll-downs {
  position: absolute;
  top: 60%;
  left: 8%;
  margin: auto;
  
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid black;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: black;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}