@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
html, body {
height: 100%
width: 100%
font-family: 'Poppins:', sans-serif; color: #;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar-brand {
  padding: 5px 0px 5px 0px;
}

.navbar-custom {
    background-color: #1D1D1D;
}
.navbar {
  padding: 0px;
}

.navbar-nav li{
  padding-right: 10px;
  padding-top: 50px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel-inner img{
  width: 100%;
  min-height:400px;
}

.carousel-caption {
  position: absolute;
  top: 42%;

}

.textshadow {
  text-shadow: 10px 10px 25px #000000;
}
/*
.carousel-caption h1 {
  font-size: 400%;

  text-shadow: 10px 10px 15px #000;
  padding: 0px 0px 0px 0px;
}

.carousel-caption h2 {
  font-size: 150%;
  text-shadow: 10px 10px 15px #000;
  padding: 0px 0px 0px 0px;
}

.carousel-caption h3 {
  font-size: 200%;
  font-weight: 500;
  text-shadow: 1px 1px 10px  #000;
  padding: 0px 0px 0px 0px;
}
.carousel-caption h4 {
  font-size: 130%;
  text-shadow: 10px 10px 15px #000;
  padding: 0px 0px 0px 0px;
}
--*/

.btn-primary {
  background-color: #6648b1;
  border: 1px solid #563d7c;
}

.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #6648b1;
}

.jumbotron {
  padding: 1rem;
  border-radius: 0;
}

.mypad1 {
  margin-bottom: 90px;
}

.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 0;
}

.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 90%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}
.fa-code {
  color: #e54d26;
}
.fa-bold {
  color: #563d7c;
}

}
.fa-css3 {
  color: #2163af;
}
.fa-code, .fa-bold, .fa-css3 {
  font-size: 4em;
  margin: 1rem;
}

.fun {
  width: 100%;
  margin-bottom: 2rem;
 }

.gif {
  max-width: 20%;
}

.social a {
  font-size: 4.5em;
  padding: 3rem;
}
.fa-facebook {
  color: #3b5998;
}

}
.fa-twitter {
  color: #00aced;
}

.fa-google-plus-g {
  color: #dd4b39;
}

.fa-instagram {
  color: #517fa4;
}

.fa-youtube {
  color: #bb0000;
}

.fa-facebook:hover,
.fa-twitter:hover,
.fa-google-plus-g:hover,
.fa-instagram:hover,
.fa-youtube:hover {
  color: #d5d5d5;
}

.email-color{
  color: #d5d5d5;
}

footer {
  background-color: #1D1D1D;
  color: #d5d5d5;
  padding-top: 2rem;
}

.custom-text {
  font-size: 400%;
}

hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: .8rem;
  margin-bottom: 1 rem;

}

hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1 rem;
}
/*---Media Queries --*/
@media (max-width: 992px) {
 .social a {
   font-size: 4em;
   padding: 2rem;
 }

  }

@media (max-width: 768px)
{
  .carousel-caption {
    top: 30%;
  }
  .carousel-caption h1 {
    font-size: 250%;
  }

  .carousel-caption h2 {
    font-size: 100%;
  }

  .carousel-caption h3 {
    font-size: 150%;
  }

  .carousel-caption h4 {
    font-size: 100%;
  }

.carousel-caption .btn {
  font-size: 95%;
  padding: 8px 14px;
}

.img-fluid {
       min-width: 100%;

     }
.display-4 {
  font-size: 200%;
  font-weight: 200;
}

.social a {
  font-size: 2.5em;
  padding: 1.2rem;
}
}

@media (max-width: 576px)
{

  .navbar-nav li{

    padding-top: 0px;
  }


  .mypad1 {
    margin-bottom: 20px;
}
  .img-fluid {
         min-width: 100%;

       }


  .carousel-caption {
    top: 25%;
  }



  .carousel-caption h1 {
    font-size: 160%;
  }

  .carousel-caption h2 {
    font-size: 105%;
  }

  .carousel-caption h3 {
    font-size: 100%;
  }

  .carousel-caption h4 {
    font-size: 120%;
  }

  .carousel-caption h6 {
    font-size: 104%;
  }

  .carousel-caption .btn {
    font-size: 90%;
    padding: 4px 8px;
  }

  .display-4 {
    font-size: 200%;
    font-weight: 200;
  }

  .social a {
    font-size: 1.5em;
    padding: .7rem;
  }

}


/*---Firefox Bug Fix
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;--*/
}
/*--- Fixed Background Image
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
#fixed {
  background-image: url('img/mac.png');
  height: 600px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}--*/

/*--- Bootstrap Padding Fix
[class*="col-"] {
    padding: 1rem;
}
 --*/




/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/