/* home caroudel */
#home-slide-show{
    border-bottom: solid #3d68ad;
}

#home-slide-show .carousel-control-prev-icon, #home-slide-show .carousel-control-next-icon {
    background-image: none;
    color: rgb(66, 176, 120);
}

#home-slide-show .carousel-indicators li{
    background-color: rgb(66, 176, 120);
}


/* picture hover */
.img-hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    /* cursor: pointer; */
}

.img-hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    padding: 25% 0%;
}

.img-hovereffect img {
    display: block;
    position: relative;
    max-width: none;
    width: 100%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.img-hovereffect h3 {
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    text-shadow: 2px 2px 10px #000;
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    margin-bottom: 0rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0));
}

.img-hovereffect h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.img-hovereffect .overlay p {
    color: #FFF;
    font-size: 1rem;
    margin: 0rem;
    text-shadow: 2px 2px 10px #000;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0));
}



@media (hover: hover){
    .img-hovereffect:hover img{
        opacity: 0.8;
        filter: alpha(opacity=40);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .img-hovereffect:hover h3:after{
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .img-hovereffect:hover .overlay * {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

/* card */
.card {
    margin: 1rem 0rem;
}

.head-message{
    border: solid white;
}

.head-message p{
    text-align: justify;
    margin: 0.5rem;
}

.card-header{
    background: rgb(40,103,178);
    color: white;
    text-align: center;
}

.card-header h4{
    padding: 0px;
    margin: auto;
}

/* career history */

#work-history [class*="col-"] img{
    max-width: 200px;
    max-height: 200px;
    margin-top: 0.5rem;
}

/* reference projects */
#typical-projects .row [class*="col-"]{
    margin-bottom: 2rem;
}

.img-hovereffect-project {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.img-hovereffect-project .overlay {
    width: 100%;
    height: auto;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    padding: 0;
}

.img-hovereffect-project img {
    display: block;
    position: relative;
    max-width: none;
    width: 100%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.img-hovereffect-project h3 {
    color: #fff;
    font-size: 1rem;
    text-align: center;
    text-shadow: 2px 2px 10px #000;
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0));
    margin: 0rem;
}

.img-hovereffect-project .overlay p {
    color: #FFF;
    font-size: 1rem;
    opacity: 0;
    text-shadow: 2px 2px 10px #000;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    margin-bottom: 0rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0));
}

.img-hovereffect-project .overlay p:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}


@media (hover: hover){
    .img-hovereffect-project:hover img {
        opacity: 0.8;
        filter: alpha(opacity=40);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .img-hovereffect-project:hover p:after {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .img-hovereffect-project:hover .overlay * {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

@media only screen and (max-width: 768px){
    .head-message h3{
        font-size: 1.1rem;
    }
    
    #programming .card-header p{
        text-align: justify;
    }

    .img-hovereffect h3{
        font-size: 1rem;
    }

    @keyframes changeColor {
        0% {color: white;}
        25% {color: rgb(66, 176, 120);}
        50% {color: rgb(66, 176, 120);}
        100% {color: white;}
    }

    .img-hovereffect h3 .fa, .img-hovereffect-project h3 .fa {
        animation-name:changeColor;
        /* animation-timing-function: linear; */
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
}

@media (hover: hover){
    .img-hovereffect h3 .fa, .img-hovereffect-project h3 .fa{
        display: none;
    }
}


@media only screen and (max-width: 320px){

    body{
      font-size: smaller;
    }
  
    h2{
      font-size: 1.5rem;
    }
  
    h3{
      font-size: 1.2rem;
    }
  
    h4{
      font-size: 1.1rem;
    }
  
    .h5{
      font-size: 0.8rem;
    }

    .img-hovereffect-project h3{
        font-size: smaller;
    }
  }