/* Header  */
header {
    position: relative;
    background-color: black;
    height: 75vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
  }
  
  header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  
  header .container {
    position: relative;
    z-index: 2;
  }
  
  header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
  }
  
  
/* CEO Message  */

/* Skill Bar  */
/* CSS Skill*/

#SkillBox {
  font-size: 20px;
  /* font-family: 'Indie Flower', cursive; */
  width: 70%;
  height: 70% auto;
  margin: 40px auto;
  background-color: rgb(190, 190, 190);
  border: 1px solid #ffffff;
  padding: 10px;
  border-radius:20px;
  -o-border-radius:20px;
  -webkit-border-radius:20px;
  -ms-border-radius:20px;
  -moz-border-radius:20px;  
}
.SkillBar {
  width: 90%;
  height: 50px;
  position: relative;
  background: rgba(17, 17, 17, .3);
  margin: 20px auto;
}
#Skill-HTML {
  width: 85%;
  animation: Animate-HTML 4s;
  -webkit-animation: Animate-HTML 4s;
  -moz-animation: Animate-HTML 4s;
  -o-animation: Animate-HTML 4s;
  height: 50px;
  position: absolute;
  background-color: #1d00a0;
}
@keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-webkit-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-moz-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-o-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 85%}
}#Skill-CSS {
  animation: Animate-CSS 5s;
  -webkit-animation: Animate-CSS 5s;
  -moz-animation: Animate-CSS 5s;
  -o-animation: Animate-CSS 5s;
  width: 63%;
  height: 50px;
  position: absolute;
  background-color: #55a69f;
}
@keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 63%}
}@-webkit-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 63%}
}@-moz-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 63%}
}@-o-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 63%}
}#Skill-jQuery {
  animation: Animate-jQuery 5s;
  -webkit-animation: Animate-jQuery 5s;
  -moz-animation: Animate-jQuery 5s;
  -o-animation: Animate-jQuery 5s;
  width: 90%;
  height: 50px;
  position: absolute;
  background-color: #1d00a0;
}
@keyframes Animate-jQuery {
  from {
  width: 10px;
}
to {
  width: 90%}
}@-webkit-keyframes Animate-jQuery {
  from {
  width: 10px;
}
to {
  width: 90%}
}@-moz-keyframes Animate-jQuery {
  from {
  width: 10px;
}
to {
  width: 90%}
}@-o-keyframes Animate-jQuery {
  from {
  width: 10px;
}
to {
  width: 90%}
}#Skill-JS {
  animation: Animate-JS 4s;
  -webkit-animation: Animate-JS 4s;
  -moz-animation: Animate-JS 4s;
  -o-animation: Animate-JS 4s;
  width: 95%;
  height: 50px;
  position: absolute;
  background-color: #55a69f;
}
@keyframes Animate-JS {
  from {
  width: 10px;
}
to {
  width: 95%}
}@-webkit-keyframes Animate-JS {
  from {
  width: 10px;
}
to {
  width: 95%}
}@-moz-keyframes Animate-JS {
  from {
  width: 10px;
}
to {
  width: 95%}
}@-o-keyframes Animate-JS {
  from {
  width: 10px;
}
to {
  width: 95%}
}#Skill-XML {
  animation: Animate-XML 4s;
  -webkit-animation: Animate-XML 4s;
  -moz-animation: Animate-XML 4s;
  -o-animation: Animate-XML 4s;
  width: 80%;
  height: 50px;
  position: absolute;
  background-color: #1d00a0;
}
@keyframes Animate-XML {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-XML {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-XML {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-XML {
  from {
  width: 10px;
}
to {
  width: 80%}
}#Skill-C {
  animation: Animate-C 4s;
  -webkit-animation: Animate-C 4s;
  -moz-animation: Animate-C 4s;
  -o-animation: Animate-C 4s;
  width: 30%;
  height: 50px;
  position: absolute;
  background-color: #970cc1;
}
@keyframes Animate-C {
  from {
  width: 10px;
}
to {
  width: 30%}
}@-webkit-keyframes Animate-C {
  from {
  width: 10px;
}
to {
  width: 30%}
}@-moz-keyframes Animate-C {
  from {
  width: 10px;
}
to {
  width: 30%}
}@-o-keyframes Animate-C {
  from {
  width: 10px;
}
to {
  width: 30%}
}#Skill-JAVA {
  animation: Animate-JAVA 4s;
  -webkit-animation: Animate-JAVA 4s;
  -moz-animation: Animate-JAVA 4s;
  -o-animation: Animate-JAVA 4s;
  width: 25%;
  height: 50px;
  position: absolute;
  background-color: #8e930c;
}
@keyframes Animate-JAVA {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-webkit-keyframes Animate-JAVA {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-moz-keyframes Animate-JAVA {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-o-keyframes Animate-JAVA {
  from {
  width: 10px;
}
to {
  width: 25%}
}#Skill-PHP {
  animation: Animate-PHP 4s;
  -webkit-animation: Animate-PHP 4s;
  -moz-animation: Animate-PHP 4s;
  -o-animation: Animate-PHP 4s;
  width: 50%;
  height: 50px;
  position: absolute;
  background-color: #5A69A6;
}
@keyframes Animate-PHP {
  from {
  width: 10px;
}
to {
  width: 50%}
}@-webkit-keyframes Animate-PHP {
  from {
  width: 10px;
}
to {
  width: 50%}
}@-moz-keyframes Animate-PHP {
  from {
  width: 10px;
}
to {
  width: 50%}
}@-o-keyframes Animate-PHP {
  from {
  width: 10px;
}
to {
  width: 50%}
}#Skill-SQL {
  animation: Animate-SQL 4s;
  -webkit-animation: Animate-SQL 4s;
  -moz-animation: Animate-SQL 4s;
  -o-animation: Animate-SQL 4s;
  width: 80%;
  height: 50px;
  position: absolute;
  background-color: #23b1db;
}
@keyframes Animate-SQL {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-SQL {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-SQL {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-SQL {
  from {
  width: 10px;
}
to {
  width: 80%}
}#Skill-VBNET {
  animation: Animate-VBNET 4s;
  -webkit-animation: Animate-VBNET 4s;
  -moz-animation: Animate-VBNET 4s;
  -o-animation: Animate-VBNET 4s;
  width: 35%;
  height: 50px;
  position: absolute;
  background-color: #f8a51e;
}
@keyframes Animate-VBNET {
  from {
  width: 10px;
}
to {
  width: 35%}
}@-webkit-keyframes Animate-VBNET {
  from {
  width: 10px;
}
to {
  width: 35%}
}@-moz-keyframes Animate-VBNET {
  from {
  width: 10px;
}
to {
  width: 35%}
}@-o-keyframes Animate-VBNET {
  from {
  width: 10px;
}
to {
  width: 35%}
}.Skill-Area {
  z-index: 1;
  float: left;
  margin-top: 15px;
  margin-left: 15px;
  text-shadow: none;
  color: #fff;
  font-family: Lato-Regular, sans-serif;
  font-size: 18px;
  /* position: absolute !important; */
}
.PercentText {
  z-index: 3;
  position: relative;
  padding-right: 15px;
  margin-top: 15px;
  float: right;
  text-shadow: none;
  color: #fff;
  font-family: Lato-Regular, sans-serif;
  font-size: 18px;
}

/* Policy Tabs  */


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1 !important;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(69, 115, 243);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(121, 121, 121);
}

/* Style the tab content */
.tabcontent {
  display: none;
  background-color: white !important;
  color: black;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Client Slider */