@keyframes watchPassionMove {
    from {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
    to {
        transform: translateX(10px) translateY(0px);
        opacity: 1;	
    }
}
@keyframes factsArea {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;	
    }
}

@keyframes moveCar {
    from {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
    to {
        transform: translateX(-700px) translateY(0px);
        opacity: 1;	
    }
}

@keyframes moveDesign {
    from {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
    to {
        transform: translateX(10px) translateY(10px);
        opacity: 1;	
    }
}

@keyframes footer-area {
    from {
        opacity: 0;
        color: #f8f8f8;
    }
    to {
        opacity: 1;
        color: #ffffff;	
    }
}
@keyframes qualifications-area {
    from {
        opacity: 0;
        color: #cccccc;
    }
    to {
        opacity: 1;
        color: #000000;	
    }
}

.passion {
    animation-duration: 1s;
    animation-name: watchPassionMove;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.passion2 {
    animation-duration: 1s;
    animation-name: watchPassionMove;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.fact1 {
    animation-duration: 4s;
    animation-name: factsArea;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.fact2 {
    animation-duration: 6s;
    animation-name: factsArea;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.fact3 {
    animation-duration: 8s;
    animation-name: factsArea;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.fact4 {
    animation-duration: 10s;
    animation-name: factsArea;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.car {
    animation-duration: 5s;
    animation-name: moveCar;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.design {
    animation-duration: 5s;
    animation-name: moveDesign();
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.about-me-qualifications {
    animation-duration: 10s;
    animation-name: qualifications-area;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/*
.about-me-footer {
    animation-duration: 10s;
    animation-name: footer-area;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

*/
.imageHolder {
    height: 550px;
    background-color: #f9f9f9;
    text-align: center;

}
.imageHolder img {
    transition: all 1s ease;
    margin-top: 10px;
}
.imageHolder img:hover {
    transform: scale(0.95);
}
.works {
    color: black;
}
.works:hover {
    text-decoration: underline;
    color: black;
}
.works p {
    font-weight: bold; 
    text-align: left; 
    position: relative; 
    bottom: 15px; 
    font-size: 17px; 
}

.works-heading {
    text-align: center;
    padding-bottom: 0px;
    
}

.perWork {
    height: 200px;

}
.titleProjectOne {
    position: relative;
    right: 40px;
    top: 0px;
}
.titleProjectTwo {
    position: relative;
    margin-top: 100px;
    right: 160px;
}

.jdCGnb {
    background-color: blue;
}
.red-button {
    background: #FB3640;
    line-height: 42px;
  padding-left: 30px;
  padding-right: 30px;
  border: none;
  color: #ffffff;
  display: inline-block;
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  position: relative;
}
.red-button:hover {
    color: #f8f8f8;
}
.banner-right  img {
    margin-bottom: -18px;
}
@media (max-width: 768px) {
    .imageHolder {
        margin-bottom: 50px;
        margin-top: 30px
    }
    .imageHolder img { 
        height: 80%;
    }

    .perWork {
       display: none;
    }
    .titleProjectTwo {
        position: relative;
        margin-top: 100px;
        right: 60px;
}
header {
    height: 60px;
}
.banner-area .container {
   text-align: center;
}
.banner-right {
    width: 80%;
    text-align: left;
}
.banner-right  img {
    margin-bottom: -20px;

}
.resume {
    text-align: center;
}
@keyframes moveCar {
    from {
        transform: translateX(0px) translateY(0px);
        opacity: 0;
    }
    to {
        transform: translateX(200px) translateY(0px);
        opacity: 1; 
    }
}
/*footer .container {
    text-align: center;
    margin: 0 auto;
}*/
}


@media (max-width: 1024px) {
 .titleProjectTwo {
        position: relative;
        margin-top: 100px;
        right: 80px;
        
}   
}