.cd-h-timeline__events {
  position: relative;
}

.cd-h-timeline__event {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

.cd-h-timeline__event--selected { // selected event info
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}

.cd-h-timeline__event--enter-right, 
.cd-h-timeline__event--leave-right { // animate event info
   animation-name: cd-enter-right;
}

.cd-h-timeline__event--enter-left,  
.cd-h-timeline__event--leave-left { // animate event info
   animation-name: cd-enter-left;
}

.cd-h-timeline__event--leave-right, 
.cd-h-timeline__event--leave-left {
   animation-direction: reverse;
}

@keyframes cd-enter-right {
   0% {
      opacity: 0;
      transform: translateX(100%);
   }

   100% {
      opacity: 1;
      transform: translateX(0%);
   }
}

@keyframes cd-enter-left {
   0% {
      opacity: 0;
      transform: translateX(-100%);
   }

   100% {
      opacity: 1;
      transform: translateX(0%);
   }
}

.meter {
    box-sizing: content-box;
	height: 20px;
	position: relative;
	/* margin: 20px 0 20px 0; */
	background: #555;
	border-radius: 25px;
	padding: 0px;
	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
/*
.animate > span:after {
  display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
} */

.orange > span {
  background-image: linear-gradient(#f1a165, #f36d0a);
}

.red > span {
  background-image: linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}

#page-wrap {
  width: 490px;
  margin: 80px auto;
}


    .wrapper{
        width: 400px;
        font-family: 'Roboto', sans-serif;
	margin:0 auto;
    }
    .skill {
        margin-bottom: 15px;
        position: relative;
			overflow-x:hidden;
			
    }
    .skill > p {
        
        font-weight: 700;
        color: #1a1716;
        margin: 0;
    }
    .skill:before{
        width: 100%;
        height: 5px;
        content: "";
        display: block;
        position: absolute;
        background: #959595;
        bottom: 0;
    }
    .skill-bar {
        width: 100%;
        height: 5px;
        background:#f4392f;
        display: block;
        position: relative;
    }

    /* SKILL 1 */
    .skill1{
        width: 35%;
			
    }
    .skill-bar span{
        position: absolute;
        border-top: 5px solid #f4392f;
        top: -30px;
        padding: 0;
        font-size: 15px;
        padding: 3px 0;
		font-weight: 700;
        color: #1a1716;
    }
    .skill-bar {
        position: relative;
			
    }

    .skill1 .skill-count1 {
        right: 0;
    }
    /* SKILL 2 */
    .skill2{
        width: 85%;
    }

    .skill2 .skill-count2 {
        right: 0;
    }
    /* SKILL 3 */
    .skill3{
        width: 75%;
    }
    .skill3 .skill-count3 {
        right: 0;
    }

    /* SKILL 4 */
    .skill4{
        width: 65%
    }

    .skill4 .skill-count4 {
        right: 0;
    }

    /* SKILL 5 */
    .skill5{
        width: 80%;
    }

    .skill5 .skill-count5 {
        right: 0;
    }

    /* SKILL 6 */
    .skill6{
        width: 90%
    }

    .skill6 .skill-count6 {
        right: 0;
    }
	
	.progress {
    background-color: #e4c465;
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
}

@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}
	
/* GITHUB SOURCE STYLE  */
.github-source{
	float:right;
	display:block;
	color:#fff;
	margin:0 20px;
	position: relative;
	z-index:999999;
	top:0;
}
.github-source i{
	font-size:50px;
	color:#000
}

/*  */

.js .cd-h-timeline__date {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
}


  
  button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none; }

.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden; }
  .tabs [class^="tab"] label,
  .tabs [class*=" tab"] label {
    color: #60b03f;
    cursor: pointer;
    display: block;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1em;
    padding: 2rem 0;
    text-align: center; }
  .tabs [class^="tab"] [type="radio"],
  .tabs [class*=" tab"] [type="radio"] {
    border-bottom: 1px solid rgba(239, 237, 239, 0.5);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
    .tabs [class*=" tab"] [type="radio"]:hover,
    .tabs [class*=" tab"] [type="radio"]:focus {
      border-bottom: 1px solid #fd264f; }
    .tabs [class^="tab"] [type="radio"]:checked,
    .tabs [class*=" tab"] [type="radio"]:checked {
      border-bottom: 2px solid #fd264f; }
    .tabs [class^="tab"] [type="radio"]:checked + div,
    .tabs [class*=" tab"] [type="radio"]:checked + div {
      opacity: 1; }
    .tabs [class^="tab"] [type="radio"] + div,
    .tabs [class*=" tab"] [type="radio"] + div {
      display: block;
      opacity: 0;
      padding: 2rem 0;
      width: 90%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
  .tabs .tab-2 {
    width: 50%; }
    .tabs .tab-2 [type="radio"] + div {
      width: 200%;
      margin-left: 200%; }
    .tabs .tab-2 [type="radio"]:checked + div {
      margin-left: 0; }
    .tabs .tab-2:last-child [type="radio"] + div {
      margin-left: 100%; }
    .tabs .tab-2:last-child [type="radio"]:checked + div {
      margin-left: -100%; }

	  
	.content-container ol:not([class]) li::before{
        content: none !important;
	}  

.main-meter > p{
	margin:0px auto;
	font-size: 15px;
	padding: 3px 0;
	font-weight: 700;
	color: #1a1716;
}	
.meter { 
    height: 5px;
    position: relative;
    background: #959595;
    overflow: hidden;
	margin-bottom: 15px;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    background-color: #f4392f;
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
}

@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}


/*======== Table Design ================*/

/*	
	Side Navigation Menu V2, RWD
	===================
	License:
	https://goo.gl/EaUPrt
	===================
	Author: @PableraShow

 */

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: #5bb465;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 800px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
  margin-top:20px;
}
 
.table-fill th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

.table-fill th:first-child {
  border-top-left-radius:3px;
}
 
.table-fill th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
.table-fill tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
.table-fill tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
.table-fill tr:first-child {
  border-top:none;
}

.table-fill tr:last-child {
  border-bottom:none;
}
 
.table-fill tr:nth-child(odd) td {
  background: #5BB465;
  color: #fff;
}
 
.table-fill tr:nth-child(odd):hover td {
  background:#4E5066;
}

.table-fill tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
.table-fill tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
.table-fill td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:600;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  
}

.table-fill td:last-child {
  border-right: 0px;
}

.table-fill th.text-left {
  text-align: left;
}

.table-fill th.text-center {
  text-align: center;
}

.table-fill th.text-right {
  text-align: right;
}

.table-fill td.text-left {
  text-align: left;
}

.table-fill td.text-center {
  text-align: center;
}

.table-fill td.text-right {
  text-align: right;
}

/*===================Custom Service Box=================*/


:root{
    --color_1: #60B03F;
    --color_2: #2196F3;
    --color_3: #FFCB05;
    --color_4: #009688;
	--color_5: #E65100;
}
.serviceBox{
    font-family: 'poppins', sans-serif;
    text-align: center;
    padding: 30px 9px 0;
    position: relative;
}
.serviceBox:before,
.serviceBox:after{
    content: "";
    background: var(--color_1);
    width: 25px;
    height: 15px;
    opacity: 0;
    transform: translateX(-50%);
    position: absolute;
    top: 50px;
    left: 50%;
    -webkit-clip-path: polygon(100% 30%, 100% 66%, 50% 100%, 0 66%, 0 30%, 50% 60%);
    clip-path: polygon(100% 30%, 100% 66%, 50% 100%, 0 66%, 0 30%, 50% 60%);
    transition: all 0.3s;
}
.serviceBox:hover:before{
    opacity: 1;
    top: 121px;
}
.serviceBox:hover:after{
    opacity: 1;
    top: 130px;
}
.serviceBox .service-icon{
    color: #fff;
	background: var(--color_1);
	font-size: 30px;
	line-height: 60px;
	width: 60px;
	height: 60px;
	margin: 0 auto 50px;
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	position: relative;
	transition: all 0.3s;
}
.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
    content: "";
    border: 2px solid var(--color_1);
    border-left: 2px dashed var(--color_1);
    border-right: 2px dashed var(--color_1);
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
    transition: all 0.3s;
}
.serviceBox .service-icon:after{
    transform: rotate(-45deg);
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
}
.serviceBox:hover .service-icon:before{ transform:rotate(-40deg); }
.serviceBox:hover .service-icon:after{ transform:rotate(40deg); }
.serviceBox .service-icon i.fa{ transition: all 0.3s; }
.serviceBox:hover .service-icon i.fa{ transform: rotateX(360deg); }
.serviceBox .title{
    color: var(--color_1);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.serviceBox .description{
    color: #606060;
    font-size: 15px;
    text-align: center;
    line-height: 25px;
}
.serviceBox.blue:before,
.serviceBox.blue:after{
    background: var(--color_2);
}
.serviceBox.blue .service-icon{ background: var(--color_2); }
.serviceBox.blue .service-icon:before,
.serviceBox.blue .service-icon:after{
    border-color: var(--color_2);
}
.serviceBox.blue .title{ color: var(--color_2); }
.serviceBox.green:before,
.serviceBox.green:after{
    background: var(--color_3);
}
.serviceBox.green .service-icon{ background: var(--color_3); }
.serviceBox.green .service-icon:before,
.serviceBox.green .service-icon:after{
    border-color: var(--color_3);
}
.serviceBox.green .title{ color: var(--color_3); }
.serviceBox.cgreen:before,
.serviceBox.cgreen:after{
    background: var(--color_4);
}
.serviceBox.cgreen .service-icon{ background: var(--color_4); }
.serviceBox.cgreen .service-icon:before,
.serviceBox.cgreen .service-icon:after{
    border-color: var(--color_4);
}
.serviceBox.cgreen .title{ color: var(--color_4); }

/*=== */
.serviceBox.orange:before,
.serviceBox.orange:after{
    background: var(--color_5);
}
.serviceBox.orange .service-icon{ background: var(--color_5); }
.serviceBox.orange .service-icon:before,
.serviceBox.orange .service-icon:after{
    border-color: var(--color_5);
}
.serviceBox.orange .title{ color: var(--color_5); }

@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 30px; }
}