#Calculator {
    background-image: url(../images/index/Chainstay-Calculator.png);
    background-repeat: no-repeat;
    background-color: #eee;
    background-size: 80px;
    position: fixed;
    top: 60%;
    left: -70px;
    margin: 0;
    border: 1px solid #fff;
    padding: 10px;
    width: 70px;
    height: 60px;
    border-radius: 0px 10px 10px 0;
    color: #f7921e;
}

#Calculator:hover {
    background-color: #ffb764;
    left: 0px;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #fff;
}

#SpanID {
    position: absolute;
    padding: 25px 0 25px 65px;
    z-index: 0;
}

#window {
    background-color: #fee8d0f0;
    display: none;
    position: fixed;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 70%;
    z-index: 300;
    border-radius: 10px;
    overflow-y: none;
}

.chainstayContent {
    background-color: #ffffffbd;
    margin: 0;
}

.Calculator_title {
    position: relative;
    height: 80px;
}

.Calculator_title img {
    height: 60%;
    float: left;
    padding: 2% 3% 0 20%;
}

#Calculator_title {
    padding-top: 2%;
    text-align: left;
    font-size: 50px;
    color: #f7921e;
    text-shadow: 5px 3px 0 #fff;
}

#floating {
    background-color: #f7921e;
    position: absolute;
    border: 0;
    top: 30%;
    right: 3%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: #fff;
    border-radius: 5px;
}

#floating:hover {
    background-color: #aa5b00;
    width: 29px;
    height: 29px;
}

input#button,
input#reset {
    background-color: #ddd;
    border: 0;
    border-bottom: 5px solid #eee;
    margin-left: 50px;
    padding: 2%;
    text-align: center;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

input#button:hover,
input#reset:hover {
    background: #f7921e;
    border-bottom: 5px solid #ffb764;
    transition: all 0.3s ease;
    color: #fff;
}

.enterData {
    float: left;
    width: 35%;
    padding: 30px 0;
}

.enterData table {
    width: 100%;
    margin: 20px 0;
    font-size: 14px;
    text-align: right;
}

.enterData table tr {
    border-bottom: 1px solid #eee;
}

.enterData table td {
    padding: 5px 0;

}

.enterData table td span {
    background: #ffc388;
    padding: 2px 30px;
    font-family: 'Montserrat Alternates', sans-serif;
}

.enterData table input[type=text] {
    width: 50px;
    border: 1px solid #aaa;
    background: #fff;
    letter-spacing: 1px;
    padding: 3px;
    text-align: center;
    margin-left: 5px;
}

.enterData table #tireSize {
    margin-left: 10px;
}

.enterData table #gearRatioRadio,
.enterData table #teethRadio {
    width: 20px;
    height: 20px;
}

.enterData button {
    float: right;
    margin-right: 24%;
    border: 0;
    color: #f7921e;
    background: #fff;
    padding: 2%;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.enterData button:hover {
    color: #fff;
    background: #f7921e;
}

.enterData button:nth-of-type(3) {
    background-color: #ddd;
    border: 0;
    border-bottom: 5px solid #eee;
    text-align: center;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
}

.enterData button:nth-of-type(3):hover {
    background: #f7921e;
    border-bottom: 5px solid #ffb764;
    color: #fff;
}

.results {
    float: right;
    width: 65%;
}

.results strong {
    font-size: 24px;
    vertical-align: top;
    font-family: arial;
}

.results strong::before {
    content: "";
    position: absolute;
    right: 0px;
    width: 15px;
    height: 15px;
    overflow: hidden;
    background: url("../images/arrowImg.png") 0 0 no-repeat;
}

.results li span {
    font-size: 16px;
    text-align: center;
}

.results strong,
.results li span {
    display: inline-table;
    text-align: center;
}

.results strong:first-child,
.results li span:first-child {
    width: 50%;
    height: 30px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

.results strong:nth-child(2),
.results li span:nth-child(2) {
    width: 13%;
}

.results strong:nth-child(3),
.results strong:nth-child(4),
.results strong:nth-child(5),
.results li span:nth-child(3),
.results li span:nth-child(4),
.results li span:nth-child(5) {
    width: 18%;
}

.results strong:last-child,
.results li span:last-child {
    width: 23%;
}

.results li {
    padding: 5px 0;
}

.results li:nth-child(even) {
    background: #fcdab2;
}

.resultsTitle {
    padding: 5px 10%;
}

.resultsTitle::before,
.resultsTitle::after {
    content: '';
    display: table;
}

.resultsTitle::after {
    clear: both;
}

.resultsTitle strong {
    float: left;
    /*  margin: 2.5px 5%;  */
}

.resultsTitle span {
    display: inline-block;
    float: left;
    width: 45%;
    height: 35px;
    padding: 9px 0px 5px 0px;
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    box-sizing: border-box;
}

.resultsTitle:nth-of-type(odd) strong {
    color: #fff;
    background: #f7921e;
    border-bottom: 5px solid #ffb764;
}

.resultsTitle:nth-of-type(odd) span {
    /*  color: #fff; */
    /*  background: #ffb764;  */
    border-bottom: 5px solid #ffb764;
}

.resultsTitle:nth-of-type(even) strong {
    background: #ddd;
    border-bottom: 5px solid #eee;
}

.resultsTitle:nth-of-type(even) span {
    /*	background: #eee;  */
    border-bottom: 5px solid #eee;
}

.resultsMessage {
    background: #eee;
    height: 50px;
    font-size: 14px;
    padding: 13px 30px;
    text-align: right;
    border-top: 2px solid #f7921e;
    box-sizing: border-box;
}

.resultsMessage span {
    color: #333;
    display: inline-block;
    margin-right: 30px;
    vertical-align: 5px;
}

.resultsMessage button {
    color: #333;
    border: 0;
    background: #eee;
    cursor: pointer;
    font-size: 25px;
}

.resultsMessage button:hover {
    color: #f7921e;
}

.chainstayContent .resultsTitle:last-child {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px dashed #ddd;
}

.chainstayContent .resultsTitle:last-child strong {
    /*  color: #000; */
    background-color: #ff6837;
    border-bottom: 5px solid #ff6837;
}

.chainstayContent .resultsTitle:last-child span {
    /*  background-color: #ff9063;  */
    border-bottom: 5px solid #ff9063;
}

#Download {
    margin: 10px 100px;
}

#Download a {
    text-decoration: underline;
    color: #000;
    font-size: 20px;
}

#Download a:hover {
    color: #fff
}

@media screen and (max-width: 1680px) {
    .Calculator_title {
        height: 80px;
    }

    .Calculator_title img {
        height: 60%;
        padding: 2% 3% 0 20%;
    }

    #Calculator_title {
        font-size: 50px;
    }
}

@media screen and (max-width: 1280px) {
    .Calculator_title img {
        padding: 2% 3% 0 12%;
    }

    .enterData {
        width: 45%;
    }

    .results {
        width: 55%;
    }

    .results strong {
        font-size: 22px;
    }
}

@media screen and (max-width: 980px) {
    #window {
        overflow-y: auto;
    }

    .Calculator_title {
        height: 60px;
    }

    .Calculator_title img {
        height: 60%;
    }

    #Calculator_title {
        font-size: 30px;
        text-shadow: 3px 1px 0 #fff;
    }

    input#button,
    input#reset {
        margin-left: 20px;
    }

    .results strong {
        font-size: 16px;
    }

}

@media screen and (max-width: 736px) {
    .Calculator_title img {
        padding: 2% 3% 0 10%;
    }

    input#reset {
        margin-left: 120px;
    }

    input#button {
        margin-left: 60px;
    }

    .enterData {
        width: 100%;
    }

    .enterData table {
        width: 80%;
    }

    .results {
        background-image: linear-gradient(to right, #000, #000, transparent 50%);
        background-size: 30px 3px;
        background-repeat: repeat-x;
        margin: 0 10%;
        padding: 5% 0;
        width: 80%;
    }

    .results strong {
        font-size: 18px;
    }

    .results strong:first-child,
    .results li span:first-child {
        clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 5% 100%);
    }

}

@media screen and (max-width: 480px) {
    .Calculator_title {
        height: 45px;
    }

    .Calculator_title img {
        height: 45%;
        padding: 4.5% 3% 0 3%;
    }

    #Calculator_title {
        padding-top: 4.5%;
        font-size: 20px;
    }

    input#button,
    input#reset {
        margin-left: 15px;
    }

    .enterData table {
        width: 90%;
    }

    .results strong {
        font-size: 14px;
    }

    #Download {
        margin: 10px 30px;
    }

    #Download a {
        font-size: 14px;
    }
}