﻿body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

#cupid {
    position: relative;
    text-align: center;
    width: 837px;
    margin: 0 auto;
}

.style1 {
    text-align: center;
}

.style3 {
    margin-right: 2px;
}

@-webkit-keyframes change {
    0% {
        background-color: red;
    }

    15% {
        background-color: orange;
    }

    30% {
        background-color: yellow;
    }

    45% {
        background-color: green;
    }

    60% {
        background-color: blue;
    }

    75% {
        background-color: indigo;
    }

    100% {
        background-color: violet;
    }

    100% {
        background-color: red;
    }
}

@-webkit-keyframes move {
    0% {
        margin-left: 40%;
        margin-top: 65px;
    }

    50% {
        margin-left: 50%;
        margin-top: -13px;
    }

    100% {
        margin-left: 40%;
        margin-top: 65px;
    }
}

body {
    background-color: red;
    -webkit-animation-name: change; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
    -webkit-animation: mymove 15s infinite;
    animation-name: change;
    animation-duration: 15s;
}

.moving {
    opacity: 0;
    top: 0;
    height: 100px;
    width: 100px;
    position: absolute;
    margin: 12%;
    z-index: -1;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    margin-left: 45%;
}

#cupid:hover > .moving {
    display: block;
    opacity: 1;
    -webkit-animation-name: move; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    -webkit-animation: mymove 5s infinite;
    animation-name: move;
    animation-duration: 5s;
}
	