body {
    background-image: url("../images/background_3.jpg");
    background-position: left;
    background-repeat: no-repeat;
}
#container {
    width: 1145px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    border: 4px dotted #007954;
    border-radius: 10px 10px 10px 10px;
}
#title {
    width: 1145px;
    margin: auto;
    background-color: #6EFF21;
    border-bottom: 2.5px solid #000033;
    padding: 0.1px;
    border-radius: 7px 7px 0px 0px;
}
#title h1 {
    font-size: 300%;
    font-family: calibri;
    text-align: center;
    color: #0000cc;
}
#nav {
    width: 225px;
    float: right;
    background-color: #21FFBC;
    font-family: calibri;
    margin-right: 65px;
    color: #e60000;
    margin-left: 20px;
}
#nav hr {
    background-color: #000000;
    height: 1px;
    border: none;
}
#nav h3 {
    font-size: 150%;
}
#nav li {
    font-size: 125%;
    color: #000000;
}
#nav a:link {
    text-decoration: none;
    color: #0033cc;
}
#nav a:visited {
    text-decoration: none;
    color: #cc0099;
}
#display {
    background-color: #CDFF21;
    width: 735px;
    float: right;
    padding: 50px;
    font-family: calibri;
    border-radius: 0px 0px 0px 7px;
    margin-left: -10px;
    border-right: solid 1px;
}
#display h1 {
    text-align: center;
    font-size: 220%;
}
#display hr {
    background-color: #000000;
    height: 1px;
    border: none;
}
#display p {
    font-size: 110%;
}
#img1 {
    float: right;
    border-radius: 10%;
}
#wrap {
    width: 1145.5px;
    background-color: #21FFBC;
    border-radius: 0px 0px 7px 7px;
    margin-right: 45px;
}
#video {
    display: block;
    margin: 0 auto;
    border: 2px solid #0000e6;
}
.pagination a {
    transition: background-color 1.5s;
}
.pagination a:hover:not(.active) {
    background-color: #00C98C;
}
.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
}
.bounceInLeft {
    animation-name: bounceInLeft;
}
.bounceInRight {
    animation-name: bounceInRight;
}
.rubberBand {
    animation-name: rubberBand;
}
.rollIn {
    animation-name: rollIn;
}
/*Code for the page animations*/

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
    }
}
@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
    75% {
        transform: translate3d(0, 10px, 0);
    }
    90% {
        transform: translate3d(0, -5px, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}
@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}