cover.css

/*
 * Globals
 */

/* Links */


/* Custom default button */
/**.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` *
  background-color: #fff;
  border: .05rem solid #fff;
}**/


/*
 * Base structure
 */

/**html,
body {
  height: 100vh;
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("cover1.jpg");
} **/
body a {
  color: black;

}



.profile-photo {
  border-radius: 80px;
  width: 20vh;
}

.section {
  
  padding-top: 50px;
  padding-bottom: 50px;
}

.skill {
  text-align:center;
  
  height: 300px;
}

.bg-clubkit {
  background-color: #0070DE !important
}

.nav-bg-black {
  background-color: rgba(0,0,0,0.8);
  opacity: 3;
  font-size: .8rem;

}

.bold {
  font-size:4rem;
  font-weight: 900;
  text-shadow: 3px 3px #000;
}

.box{
  background-image: url("background.jpg");
  min-height: 100%;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  padding: 100px;
    perspective: 1px;
  transform-style: preserve-3d;

  overflow-x: hidden;
  overflow-y: scroll;
}


.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

.scroll {
	animation-name: scroll;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
	animation-iteration-count: infinite;
	transform-origin: 50% 20.5px;
	will-change: transform;
}

@keyframes scroll {

	0%, 20% {
		transform: translateY(0) scaleY(1);
	}

	10% {
		opacity: 1;
	}

	100% {
		transform: translateY(36px) scaleY(2);
		opacity: 0.01;
	}

}


body, html {
  height: 100%;
  margin: 0;
  color: whitesmoke;
  font-family: 'Overpass', sans-serif;
}

.bgimg-1, .bgimg-2, .bgimg-3, .box {
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


}
.bgimg-1 {
  background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4) ), url("background.jpg");
  min-height: 100vh;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  -webkit-box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);
  -moz-box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);
  box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);
  
  background-color: #fff;
}


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-width: 990px) {
  .bgimg-1, .bgimg-2 {
      background-attachment: scroll;
  }
}

/* .bgimg-1 a,
a:focus,
a:hover {
  color: #fff;
} */

.bgimg-2 {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("background.jpg");
  min-height: 300px;
  -webkit-box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);
  -moz-box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);
  box-shadow: inset 10px -58px 208px 90px rgba(0,0,0,0.53);

}

.bgimg-3 {
  background-image: url("coford/banner1.jpg");
  min-height: 300px;
}

.caption {
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 40px;
  font-size: 25px;
  letter-spacing: 10px;
}



/* Turn off parallax scrolling for tablets and phones *
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
**/
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05rem;
  color: #5a5a5a;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  
  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

.cover-container {
  max-width: 80em;
}


/*
 * Header
 */
.masthead {
  //margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
  margin-top: 10px;
  font-size: 1rem;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: #fff;
  color: #fff;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
 * Footer
 */
.mastfoot {
  color: rgba(255, 255, 255, .5);
}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 5px;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }
	
	
	
	
.hidden {
  opacity: 0;
}

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.3s;
}

.shade {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );
  position: absolute;
  top: 0;
  left: 0;
}

.doormat {
	//max-width:31%;
position: relative;
	display:inline-flex;
	

}

@media (min-width: 768px) {
	.doormat{
		max-width: 31%;
			margin:6px;

	}
}


@media (max-width: 767px) and (min-width:576px) {
	
	.doormat {
		max-width: 47%;
		margin: 6px;
		margin-bottom: 15px;
	}
}

@media (max-width: 575px) {
	
	.doormat {
	min-width: 92%;
	margin-bottom: 20px;
	margin-left:15px;
	margin-right:15px;
	}
}

.show-text {
	transition: .5s ease;
  	opacity: 0;
    position: absolute;
    top: 0;
   // bottom:25%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  
}

.card-text {
  color: white;
  font-size: 1rem;
}

.card-title {
	transition: .5s ease;
	  //right: 0;
  //bottom: ;
  left: 50;
 // padding: 1.25rem;
}

.card-img {
	  //opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.doormat:hover .card-img {
  opacity: 0.7;
}

.doormat:hover .show-text {
  opacity: 1;
}

.doormat:hover .card-title {
	opacity:0;
	
}

#SkillBox {
  font-size: 18px;
  //font-family: 'Indie Flower', cursive;
  width: 95%;
  height: auto;
  margin: 15px auto;
  opacity:1;
 
}
#SkillBox img {
  width: 20%;
  height: 10%;
  margin: auto 35%;
  
}
.SkillBar {
  width: 90%;
  height: 25px;
  position: relative;
  background: rgba(17, 17, 17, .3);
  margin: 20px auto;
}
#Skill-HTML {
  width: 100%;
  animation: Animate-HTML 4s;
  -webkit-animation: Animate-HTML 4s;
  -moz-animation: Animate-HTML 4s;
  -o-animation: Animate-HTML 4s;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 100%}
}@-webkit-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 100%}
}@-moz-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 100%}
}@-o-keyframes Animate-HTML {
  from {
  width: 10px;
}
to {
  width: 100%}
}#Skill-CSS {
  animation: Animate-CSS 5s;
  -webkit-animation: Animate-CSS 5s;
  -moz-animation: Animate-CSS 5s;
  -o-animation: Animate-CSS 5s;
  width: 80%;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-CSS {
  from {
  width: 10px;
}
to {
  width: 80%}
}

#Skill-Bootstrap {
  animation: Animate-Bootstrap 5s;
  -webkit-animation: Animate-Bootstrap 5s;
  -moz-animation: Animate-Bootstrap 5s;
  -o-animation: Animate-Bootstrap 5s;
  width: 75%;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-Bootstrap {
  from {
  width: 10px;
}
to {
  width: 75%}
}@-webkit-keyframes Animate-Bootstrap {
  from {
  width: 10px;
}
to {
  width: 75%}
}@-moz-keyframes Animate-Bootstrap {
  from {
  width: 10px;
}
to {
  width: 75%}
}@-o-keyframes Animate-Bootstrap {
  from {
  width: 10px;
}
to {
  width: 75%}
}

#Skill-Python {
  animation: Animate-Python 5s;
  -webkit-animation: Animate-Python 5s;
  -moz-animation: Animate-Python 5s;
  -o-animation: Animate-Python 5s;
  width: 65%;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-Python {
  from {
  width: 10px;
}
to {
  width: 65%}
}@-webkit-keyframes Animate-Python {
  from {
  width: 10px;
}
to {
  width: 65%}
}@-moz-keyframes Animate-Python {
  from {
  width: 10px;
}
to {
  width: 65%}
}@-o-keyframes Animate-Python {
  from {
  width: 10px;
}
to {
  width: 65%}
}

#Skill-Django {
  animation: Animate-Django 5s;
  -webkit-animation: Animate-Django 5s;
  -moz-animation: Animate-Django 5s;
  -o-animation: Animate-Django 5s;
  width: 60%;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-Django {
  from {
  width: 10px;
}
to {
  width: 60%}
}@-webkit-keyframes Animate-Django {
  from {
  width: 10px;
}
to {
  width: 60%}
}@-moz-keyframes Animate-Django {
  from {
  width: 10px;
}
to {
  width: 60%}
}@-o-keyframes Animate-Django {
  from {
  width: 10px;
}
to {
  width: 60%}
}

#Skill-Angular {
  animation: Animate-Angular 5s;
  -webkit-animation: Animate-Angular 5s;
  -moz-animation: Animate-Angular 5s;
  -o-animation: Animate-Angular 5s;
  width: 25%;
  height: 25px;
  position: absolute;
  background-color: #007bff;
}
@keyframes Animate-Angular {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-webkit-keyframes Animate-Angular {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-moz-keyframes Animate-Angular {
  from {
  width: 10px;
}
to {
  width: 25%}
}@-o-keyframes Animate-Angular {
  from {
  width: 10px;
}
to {
  width: 25%}
}


#Skill-Problem {
  width: 85%;
  animation: Animate-Problem 4s;
  -webkit-animation: Animate-Problem 4s;
  -moz-animation: Animate-Problem 4s;
  -o-animation: Animate-Problem 4s;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-Problem {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-webkit-keyframes Animate-Problem {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-moz-keyframes Animate-Problem {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-o-keyframes Animate-Problem {
  from {
  width: 10px;
}
to {
  width: 85%}
}#Skill-Time {
  animation: Animate-Time 5s;
  -webkit-animation: Animate-Time 5s;
  -moz-animation: Animate-Time 5s;
  -o-animation: Animate-Time 5s;
  width: 80%;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-Time {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-Time {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-Time {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-Time {
  from {
  width: 10px;
}
to {
  width: 80%}
}

#Skill-Teamwork {
  animation: Animate-Teamwork 5s;
  -webkit-animation: Animate-Teamwork 5s;
  -moz-animation: Animate-Teamwork 5s;
  -o-animation: Animate-Teamwork 5s;
  width: 85%;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-Teamwork {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-webkit-keyframes Animate-Teamwork {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-moz-keyframes Animate-Teamwork {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-o-keyframes Animate-Teamwork {
  from {
  width: 10px;
}
to {
  width: 85%}
}

#Skill-CustomerService {
  animation: Animate-CustomerService 5s;
  -webkit-animation: Animate-CustomerService 5s;
  -moz-animation: Animate-CustomerService 5s;
  -o-animation: Animate-CustomerService 5s;
  width: 80%;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-CustomerService {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-CustomerService {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-CustomerService {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-CustomerService {
  from {
  width: 10px;
}
to {
  width: 80%}
}

#Skill-Communication {
  animation: Animate-Communication 5s;
  -webkit-animation: Animate-Communication 5s;
  -moz-animation: Animate-Communication 5s;
  -o-animation: Animate-Communication 5s;
  width: 85%;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-Communication {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-webkit-keyframes Animate-Communication {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-moz-keyframes Animate-Communication {
  from {
  width: 10px;
}
to {
  width: 85%}
}@-o-keyframes Animate-Communication {
  from {
  width: 10px;
}
to {
  width: 85%}
}

#Skill-TeamPlayer {
  animation: Animate-TeamPlayer 5s;
  -webkit-animation: Animate-TeamPlayer 5s;
  -moz-animation: Animate-TeamPlayer 5s;
  -o-animation: Animate-TeamPlayer 5s;
  width: 80%;
  height: 25px;
  position: absolute;
  background-color: #28a745;
}
@keyframes Animate-TeamPlayer {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-webkit-keyframes Animate-TeamPlayer {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-moz-keyframes Animate-TeamPlayer {
  from {
  width: 10px;
}
to {
  width: 80%}
}@-o-keyframes Animate-TeamPlayer {
  from {
  width: 10px;
}
to {
  width: 80%}
}





.Skill-Area {
  z-index: 1;
  float: left;
  //position: absolute;
  margin-top: 0px;
  margin-left: 15px;
  text-shadow: none;
  color: #fff;
  
  font-size: 16px;
}
.PercentText {
  z-index: 2;
  position: relative;
  padding-right: 15px;
  margin-top: 0px;
  float: right;
  text-shadow: none;
  color: #fff;
  //font-family: Lato-Regular, sans-serif;