/* =================================
1. Common Styles
2. Base Info Wrapper Styles
3. UPS Icons Wrapper Styles
4. App Info Wrapper Styles
5. UPS Description Wrapper Styles
6. UPS Types Wrapper Styles
7. UPS Parameters Wrapper Styles
8. Wave Type Wrapper Styles
9. UPS Ports Description Wrapper Styles
10. Check Other Models Wrapper Styles

================================= */

/* Common Styles - BEGIN */
.main-ups-container {
    padding-top: 0;
    font-size: 16px;
    background-color: #080808;
}

.main-ups-container .ps-section-title {
    font-weight: 300;
    font-size: 8rem;
}

.main-ups-container ul,
.main-ups-container p {
    font-size: 2.5rem;
}

.main-ups-container ul > li {
    line-height: 1.4;
}

.main-ups-container ul > li::before {
    margin-right: 5px;
    content: '-';
}

.full-size-img-wrapper {
    display: flex;
    justify-content: center;
}

.full-size-img-wrapper > img {
    max-width: 100%;
    height: auto;
}

.main-ups-container img.--desktop-and-tablet-display {
    display: block;
}

.main-ups-container img.--mobile-display {
    display: none;
}

@media (max-width: 1025px) {
    .main-ups-container .ps-section-title {
        font-size: 4rem;
    }

    .main-ups-container ul,
    .main-ups-container p {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .main-ups-container .ps-section-title {
        font-size: 3.2rem;
    }

    .main-ups-container img.--desktop-and-tablet-display {
        display: none;
    }

    .main-ups-container img.--mobile-display {
        display: block;
    }
}

/* Common Styles - END */

/* Base Info Wrapper Styles - BEGIN */
.base-info-wrapper {
    width: 85%;
    margin: 4% auto 2%;
    text-align: center;
}

.base-info-wrapper p {
    margin-bottom: 5%;
}

.base-info-wrapper ul > li {
    font-weight: 300;
}

.base-info-wrapper ul > li:first-child {
    margin-top: 15px;
}

@media (max-width: 1025px) {
    .base-info-wrapper {
        width: 100%;
    }

    .base-info-wrapper p {
        padding-right: 4%;
        padding-left: 4%;
    }

    .base-info-wrapper ul > li {
        margin-bottom: 6px;
    }
}

@media (max-width: 767px) {
    .base-info-wrapper {
        width: 95%;
    }
}

/* Base Info Wrapper Styles - END */

/* UPS Icons Wrapper Styles - BEGIN */
.ups-usage-icons-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 85%;
    margin: 3% auto 6%;
}

.ups-usage-icons-wrapper .single-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.single-icon-wrapper img {
    max-width: 65px;
    height: auto;
}

.single-icon-wrapper span {
    margin-top: 10px;
    font-weight: 400;
    font-size: 2rem;
    text-align: center;
}

@media (max-width: 1025px) {
    .ups-usage-icons-wrapper {
        flex-wrap: wrap;
        width: 75%;
        margin-top: 6%;
    }

    .ups-usage-icons-wrapper .single-icon-wrapper {
        flex: 1 0 30%;
        margin-bottom: 5%;
    }

    .single-icon-wrapper span {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    .ups-usage-icons-wrapper {
        width: 90%;
    }

    .ups-usage-icons-wrapper .single-icon-wrapper {
        flex: 1 0 48%;
    }
}

/* UPS Icons Wrapper Styles - END */

/* App Info Wrapper Styles - BEGIN */
.app-info-wrapper {
    width: 80%;
    margin: 4% auto 0;
    text-align: center;
}

.app-info-wrapper p {
    margin-bottom: 2%;
}

.app-info-wrapper ul {
    margin-bottom: 4%;
}

.app-info-wrapper ul > li {
    font-weight: 300;
}

.app-info-wrapper ul > li:first-child {
    margin-top: 15px;
}

.app-info-wrapper > a {
    display: block;
    min-width: 260px;
    max-width: 300px;
    margin: 20px auto 15px;
    padding: 15px 25px;
    color: #fff;
    font-weight: 300;
    font-size: 20px;
    background-color: #8c0;
    border-radius: 5px;
    cursor: pointer;
}

@media (max-width: 1025px) {
    .app-info-wrapper {
        width: 94%;
    }

    .app-info-wrapper ul {
        margin-top: 8%;
        margin-bottom: 6%;
    }

    .app-info-wrapper ul > li {
        margin-bottom: 8px;
    }
}

@media (max-width: 767px) {
    .app-info-wrapper {
        margin-top: 10%;
        margin-bottom: 10%;
    }

    .app-info-wrapper ul {
        margin-top: 10%;
        margin-bottom: 8%;
    }
}

/* App Info Wrapper Styles - END */

/* UPS Description Wrapper Styles - BEGIN */
.ups-description-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin: 8% 0 4%;
}

.ups-description-wrapper > div {
    width: 50%;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
}

.ups-description-wrapper img {
    width: 45%;
}

@media (max-width: 1025px) {
    .ups-description-wrapper > div {
        width: 55%;
    }

    .ups-description-wrapper img {
        width: 40%;
    }
}

@media (max-width: 767px) {
    .ups-description-wrapper {
        flex-direction: column;
        margin-top: 10%;
    }

    .ups-description-wrapper img.--mobile-display {
        width: 100%;
        height: auto;
        margin-bottom: 10%;
    }

    .ups-description-wrapper > div {
        width: 90%;
    }
}

/* UPS Description Wrapper Styles - END */

/* UPS Types Wrapper Styles - BEGIN */
.ups-types-wrapper {
    width: 85%;
    margin: 5% auto 3%;
    text-align: center;
}

@media (max-width: 1025px) {
    .ups-types-wrapper {
        width: 90%;
        margin: 10% auto;
    }
}

@media (max-width: 767px) {
    .ups-types-wrapper {
        margin: 20% auto;
        text-align: justify;
    }
}

/* UPS Types Wrapper Styles - END */

/* UPS Parameters Wrapper Styles - BEGIN */
.ups-parameters-wrapper > .ups-parameters {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
    margin: 6% auto 4%;
}

.ups-parameters-wrapper > .ups-parameters > div {
    width: calc(96% / 2 - 100px);
    text-align: center;
}

.ups-parameters-wrapper > .ups-parameters > img {
    margin-top: 4%;
    padding-right: 2%;
    padding-left: 2%;
}

.ups-parameters > div > .ps-section-title {
    font-size: 4rem;
}

@media (max-width: 1025px) {
    .ups-parameters-wrapper > .ups-parameters {
        width: 95%;
        margin: 10% auto;
    }

    .ups-parameters-wrapper > .ups-parameters > div {
        width: calc(98% / 2 - 81px);
        text-align: justify;
    }

    .ups-parameters-wrapper > .ups-parameters > img {
        padding-right: 1%;
        padding-left: 1%;
    }

    .ups-parameters > div > .ps-section-title {
        margin-bottom: 4%;
        font-size: 2.8rem;
    }
}

@media (max-width: 767px) {
    .ups-parameters-wrapper > .ups-parameters {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .ups-parameters-wrapper > .ups-parameters > div {
        width: 98%;
        margin-bottom: 10%;
        text-align: center;
    }
}

/* UPS Parameters Wrapper Styles - END */

/* Wave Type Wrapper Styles - BEGIN */
.wave-type-wrapper {
    width: 85%;
    margin: 10% auto 8%;
    text-align: center;
}

.wave-type-wrapper > p > a {
    color: #8c0;
    font-weight: 300;
    cursor: pointer;
}

.wave-type-wrapper > p > a:hover,
.wave-type-wrapper > p > a:focus,
.wave-type-wrapper > p > a:active {
    color: #8c0;
}

/* Wave Type Wrapper Styles - END */

/* UPS Ports Description Wrapper Styles - BEGIN */
.mobile-ups-ports-description-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-ups-ports-descriptions {
    display: none;
}

@media (max-width: 767px) {
    .mobile-ups-ports-descriptions {
        display: block;
        margin-top: 20px;
    }

    .mobile-ups-ports-descriptions > li::before {
        display: inline-block;
        margin-right: 5px;
        color: #8c0;
        font-weight: 500;
        content: '/' !important;
    }
}

/* UPS Ports Description Wrapper Styles - END */

/* Check Other Models Wrapper Styles - BEGIN */
.check-other-models-wrapper {
    margin-top: 5%;
    background-image: linear-gradient(4deg, white 56.7%, #080808 56.8%);
}

.check-other-models-wrapper > a {
    display: block;
    margin-bottom: 5%;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.check-other-models-wrapper > img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.ups-models-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: calc(300px * 3);
    margin: 0 auto 2%;
}

.ups-models-wrapper .single-ups-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 25px 10px;
}

.ups-models-wrapper .single-ups-box::after {
    position: absolute;
    top: 8px;
    right: -10px;
    width: 1px;
    height: 70%;
    background-color: #d7d7d7;
    content: '';
}

.ups-models-wrapper .single-ups-box:nth-child(3n)::after {
    display: none;
}

.ups-models-wrapper .single-ups-box > img {
    max-width: 250px;
    height: auto;
    margin: 10px 15px;
}

.ups-models-wrapper .single-ups-box > p {
    margin-top: 10px;
    color: #111;
    font-weight: 400;
    font-size: 1.8rem;
    text-align: center;
    cursor: default;
}

.ups-models-wrapper .single-ups-box > p > span {
    display: block;
    margin-top: 5px;
    font-size: 2.8rem;
}

.ups-models-wrapper .single-ups-box > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    max-width: 226px;
    height: 40px;
    margin: 10px auto;
    color: #8c0;
    font-weight: 400;
    font-size: 1.8rem;
    background-color: #fff;
    border: 2px solid #8c0;
    border-radius: 8px;
}

.ups-models-wrapper .single-ups-box > a:hover {
    color: #fff;
    background-color: #8c0;
}

@media (max-width: 1025px) {
    .check-other-models-wrapper {
        margin-top: 10%;
        background-image: linear-gradient(4deg, white 69.7%, #080808 69.8%);
    }

    .ups-models-wrapper {
        width: 95%;
    }

    .ups-models-wrapper .single-ups-box {
        width: calc(30% - 50px);
    }

    .ups-models-wrapper .single-ups-box::after {
        height: 60%;
    }

    .ups-models-wrapper .single-ups-box > img {
        width: 100%;
        margin: 10px 5px;
    }

    .ups-models-wrapper .single-ups-box > a {
        width: 95%;
        min-width: unset;
        max-width: unset;
    }
}

@media (max-width: 767px) {
    .check-other-models-wrapper {
        background-image: linear-gradient(4deg, white 83.7%, #080808 83.8%);
    }

    .check-other-models-wrapper > a {
        margin-bottom: 10%;
    }

    .ups-models-wrapper {
        justify-content: space-between;
        margin-top: 8%;
    }

    .ups-models-wrapper .single-ups-box {
        width: calc(50% - 30px);
    }

    .ups-models-wrapper .single-ups-box::after {
        display: none;
    }
}

/* Check Other Models Wrapper Styles - END */