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

body {
    font-family: 'Oswald', 'Roboto', Arial;
    overflow-x: hidden;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.navbar img {
    width: 100px;
}

.navbar a,
.links a {
    font-size: 1.4rem;
    background-color: transparent;
    color: #59ad00;
    border: none;
    outline: none;
    text-decoration: none;
    display: inline-block;
}

.mail a {
    display: inline-block;
    background-color: transparent;
    color: #59ad00;
    border: none;
    outline: none;
    text-decoration: none;
}

.navbar a:hover,
.links a:hover,
.mail a:hover {
    color: #488c01;
}

.navbar a::after,
.links a::after,
.mail a::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #488c01;
}

.navbar a:hover::after,
.links a:hover::after,
.mail a:hover::after {
    width: 100%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.hero-body img {
    width: 220px;
    margin: 40px;
    -webkit-animation: tada 6s linear;
    animation: tada 6s linear;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.about {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 173, 0, 0.4)), to(rgba(9, 173, 0, 0.7))), url(images/coding.jpg);
    background: -webkit-linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.7)), url(images/coding.jpg);
    background: -o-linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.7)), url(images/coding.jpg);
    background: linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.7)), url(images/coding.jpg);
    background-size: cover;
}

.about h1,
.about h2 {
    background: transparent;
    color: white;
}

.hero-foot img {
    height: 310px;
    margin: 60px 0px;
}

.experience h2 {
    margin-bottom: 2rem;
}

.design h1,
.coding h1,
.design h2,
.coding h2,
.whyMe h1 {
    background: #59ad00;
    color: #fff;
    padding: 2%;
}

.design p,
.coding p {
    margin-bottom: 1.5rem;
}

.anim1 {
    -webkit-transform: translateX(-100vw);
    -ms-transform: translateX(-100vw);
    transform: translateX(-100vw);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.anim2 {
    -webkit-transform: translateX(+100vw);
    -ms-transform: translateX(+100vw);
    transform: translateX(+100vw);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.anim1.active,
.anim2.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.anim3 {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.anim3.active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.whyMe img {
    width: 150px;
}

.slider .props {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

figure {
    -webkit-box-shadow: 0 0 3px 3px #363636;
    box-shadow: 0 0 3px 3px #363636;
    height: 230px;
    width: 320px;
    border-radius: 8px;
    position: relative;
    margin: auto;
}

figure img {
    border-radius: 8px;
}

figcaption {
    position: absolute;
    height: 230px;
    width: 320px;
    background-color: #1A3300;
    top: 0;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
    border-radius: 8px;
}

.projects {
    margin: 2.5rem auto;
}

.display {
    opacity: 1;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.ndisplay {
    opacity: 0;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

figcaption div {
    font-size: 1.5rem;
    color: #fff;
    height: 60%;
    margin: 5%;
}

figcaption a {
    background-color: #fff;
    padding: 5px;
    border-radius: 8px;
    color: #363636;
}

.links,
.contact p {
    margin: 3% auto;
}

.control,
.links a {
    padding: 0 3%;
}

.design li,
.coding li {
    display: inline-block;
    padding: 1% 3%;
}

footer {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 173, 0, 0.4)), to(rgba(9, 173, 0, 0.8))), url(images/coding.jpg);
    background: -webkit-linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.8)), url(images/coding.jpg);
    background: -o-linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.8)), url(images/coding.jpg);
    background: linear-gradient(rgba(9, 173, 0, 0.4), rgba(9, 173, 0, 0.8)), url(images/coding.jpg);
    background-size: cover;
}

footer .me {
    color: #fff;
    font-size: 1.4rem;
}

.white {
    color: white;
}

.credits {
    font-size: 0.95rem;
}

.credits a {
    color: inherit;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }

    5% {
        opacity: 0.5;
    }

    10% {
        opacity: 1;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        -webkit-transform: translateX(-150px);
                transform: translateX(-150px);
        opacity: 0;
    }
}

@keyframes slide {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }

    5% {
        opacity: 0.5;
    }

    10% {
        opacity: 1;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        -webkit-transform: translateX(-150px);
                transform: translateX(-150px);
        opacity: 0;
    }
}

@-webkit-keyframes svg {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    5% {
        opacity: 0.5;
    }

    10% {
        opacity: 1;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        -webkit-transform: translateX(+150px);
                transform: translateX(+150px);
    }
}

@keyframes svg {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    5% {
        opacity: 0.5;
    }

    10% {
        opacity: 1;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        -webkit-transform: translateX(+150px);
                transform: translateX(+150px);
    }
}

#hire {
    width: 500px;
    -webkit-animation: slide 4s linear infinite;
            animation: slide 4s linear infinite;
}

#svg {
    width: 150px;
    -webkit-animation: svg 4s linear infinite;
            animation: svg 4s linear infinite;

}

@media (max-width: 768px) {
    .navbar-brand {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .about {
        margin-top: -1px;
    }

    .projects {
        text-align: -webkit-center;
    }
}

@media (max-width: 1024px) {
    .image {
        margin: auto;
    }
}