body {
    background-color: #333;
}

/* PopUps */
.white-popup {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    max-width: 200px;
    margin: 20px auto;
    text-align: center;
}

.white-popup-80 {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    max-width: 80%;
    margin: 20px auto;
    text-align: center;
}

/* Sections */
.section-120 {
    height: 120vh;
}

.section-110 {
    height: 110vh;
}

.full-section {
    height: 100vh;
}

.section-90 {
    height: 90vh;
}

.section-50 {
    height: 50vh;
}

/* Colors */
.cool-black-background {
    background: #333;
}

.blue-background {
    background: #05518B;
}

.blue-dark-background {
    background: #003056;
}

.blue-light-background {
    background: #00A0D9;
}

/* Portfolio grid */
.portfolio-item {
    margin: 0 0 30;
}

.portfolio-img {
    -webkit-filter: grayscale(100%);

    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    -webkit-transition-duration: 0.4s;

    /* Safari */
    transition-duration: 0.4s;
}

.portfolio-link {
    display: block;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;

    /* background-color: #00A0D9; */
    background-color: rgb(0, 160, 217, .8);
}

.overlay-text {
    color: white;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.portfolio-item:hover .overlay {
    /* opacity: 1; */
}

.portfolio-item:hover .portfolio-img {
    -webkit-filter: grayscale(0%);

    /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

/* Portfolio PopUp */
.width-100 {
    width: 100%;
}

/* Social Buttons */
.btn-social {
    border-radius: 50%;
    border: 2px #fff solid;
    width: 50px;
    height: 50px;
    font-size: 20px;
    background-color: transparent;
    color: #fff;
    -webkit-transition-duration: 0.4s;

    /* Safari */
    transition-duration: 0.4s;
}

.btn-social:hover {
    color: #333;
}

.btn-facebook:hover {
    background-color: #3B5998;
}

.btn-gitlab:hover {
    background-color: #fc6d26;
}

.btn-github:hover {
    background-color: #4078c0;
}

.btn-linkedin:hover {
    background-color: #00a0dc;
}

.btn-itchio:hover {
    background-color: #fa5c5c;
}

.btn-email:hover {
    background-color: #46D9BF;
}

/* Circular  Progress Bar  */
svg.radial-progress {
    height: auto;
    max-width: 200px;
    /* padding: 1em; */
    transform: rotate(-90deg);
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}

svg.radial-progress circle {
    fill: rgba(0,0,0,0);
    stroke: #fff;
    stroke-dashoffset: 219.91148575129;
    stroke-width: 10;
}

svg.radial-progress circle.incomplete {
    opacity: 0.25;
}

svg.radial-progress circle.complete {
    stroke-dasharray: 219.91148575129;
}

svg.radial-progress text {
    fill: #fff;
    text-anchor: middle;
}

svg.radial-progress .title {
    fill: #fff;
}

/* Primary */
svg.radial-progress:nth-of-type(6n+1) circle {
    stroke: #a2ed56;
}

/* Secondary */
svg.radial-progress:nth-of-type(6n+2) circle {
    stroke: #83e4e2;
}

/* Tertiary */
svg.radial-progress:nth-of-type(6n+3) circle {
    stroke: #fd6470;
}

/* Quaternary */
svg.radial-progress:nth-of-type(6n+4) circle {
    stroke: #fca858;
}

/* Quinary */
svg.radial-progress:nth-of-type(6n+5) circle {
    stroke: #fddc32;
}

svg a:hover{
  text-decoration: none;
  outline: none;
}

svg a:visited, a:active, a:focus{
  text-decoration: none;
  outline: none;
}

/* Section About */
#about p {
    color: #fff;
}

/* Profile Pic */
.profile-picture {
  margin: auto 0;
  border-radius: 50%;
}

/* Sections Responsiveness */
/* Extra Small */
@media screen and (max-width: 575px) and (min-width: 0px){
    #intro {
        /* height: 120vh; */
    }

    #intro h1 {
        font-size: 3.0rem;
        text-align: center;
    }

    #intro h2 {
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }

    #portfolio,
    #skills,
    #about,
    #education,
    #contact {
        height: 100%!important;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #portfolio h1,
    #skills h1,
    #about h1,
    #education h1 ,
    #contact  h1 {
        font-size: 2.5rem;
    }

    #about p {
        text-align: left!important;
    }
}

/* Small */
@media screen and (max-width: 767px) and (min-width: 576px){
    #intro h1 {
        font-size: 4.0rem;
        text-align: center;
    }

    #intro h2 {
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }

    #portfolio,
    #skills,
    #about,
    #education,
    #contact {
        height: 100%!important;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #portfolio h1,
    #skills h1,
    #about h1,
    #education h1 ,
    #contact  h1 {
        font-size: 3.0rem;
    }

    #about p {
        text-align: left!important;
    }
}

/* Medium */
@media screen and (max-width: 991px) and (min-width: 768px){
    #intro h1 {
        font-size: 5.0rem;
        text-align: center;
    }

    #intro h2 {
        font-size: 2.0rem;
        text-align: center;
        width: 100%;
    }

    #portfolio,
    #skills,
    #about,
    #education,
    #contact {
        height: 100vh;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /*#portfolio h1,
    #skills h1,
    #about h1,
    #education h1 ,
    #contact  h1 {
        font-size: 3.0rem;
    }

    #about p {
        text-align: left!important;
    } */
}

/* Carousel With Thumbs */
#myCarousel .list-inline {
    white-space: nowrap;
    overflow-x: auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: 100%;
    margin-left: initial;
    margin-top: 15px;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}

#myCarousel .portrait-thumb {
    height: 100px !important;
    width: auto !important;
}

/* Footer */
footer {
    text-align: center;
    background-color: #333;
    height: 20%;
    color: #fff;
}

/* Portfolio Page */

#portfolio-page footer {
  text-align: center;
  background-color: transparent;
  height: 5%;
  color: black;
  margin-top:20px;
}

#portfolio-page #game-details p {
  text-align: left;
}

#portfolio-page section header{
  margin-bottom: 20px;
}

/* Skill Page */

#skill-page footer {
  text-align: center;
  background-color: transparent;
  height: 5%;
  color: black;
  margin-top:20px;
}

#skill-page footer p {
  text-align: center;
}

#skill-page p {
  text-align: left;
}

#skill-page section header{
  margin-bottom: 20px;
}