@import "_type.css";
@import "_navigation.css?v=2022.03.28.01";
@import "_carousels.css";
@import "_forms.css?v=2022.03.28.01";

body {
    font-family: 'Arial', sans-serif;
    width: 1080px;
    height: 1920px;
    margin: 0 auto;
    background-color: #535353;
}
.header {
    background-color: #fff;
    background-image: url("..//img/main_items/header/racing_header2.jpg");
    background-repeat: no-repeat;
    height: 200px;
}
.footer {
    height: 280px;
    padding: 20px 0;
    background-image: url("..//img/main_items/footer/mercury-racing-footer.png");
    background-repeat: no-repeat;
    position: relative;
    top: -280px;
    z-index: 100;
}
.sterndrive-footer {
    height: 280px;
    padding: 20px 0;
    background-image: url("..//img/main_items/footer/mercury-racing-sterndrive-footer.png");
    background-repeat: no-repeat;
    position: relative;
    top: -280px;
    z-index: 100;
}

.propeller-footer {
    height: 280px;
    padding: 20px 0;
    background-image: url("..//img/main_items/footer/mercury-racing-propeller-footer.png");
    background-repeat: no-repeat;
    position: relative;
    top: -280px;
    z-index: 100;
}

a {
    cursor: pointer;
}
.container {
    width: 1080px;
}
.container-prop-slip-calc {
    height: 1620px;
    padding-top: 50px;
    background-color: #000000;
}
.container-prop-slip-calc button {
    font-size: 30px;
    font-family: "rift", sans-serif;
    font-weight: 400;
    color: #fff;
    font-style: normal;
    background-color: #ff0000;
    border: none;
    width: 200px;
    margin: 0 0 0 700px;
}
.carousel-container {
    animation-delay: 0.3s;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: dotted;
  border-width: 2px;
}




/* ---------------- shorter animated distance ------------------- */


@keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-20%, 0, 0);
        opacity: 0;
        transform: translate3d(-20%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}


@keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(5%, 0, 0);
        opacity: 0;
        transform: translate3d(15%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}


@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 5%, 0);
        opacity: 0;
        transform: translate3d(0, 5%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -5%, 0);
        opacity: 0;
        transform: translate3d(0, -5%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}