@font-face {
    font-family: Poppins;
    src: url('/fonts/Poppins-Regular.woff2') format('truetype');
}

@font-face {
    font-family: Nunito;
    src: url('/fonts/Nunito-Regular.woff2') format('truetype');
}

@font-face {
    font-family: NunitoSans;
    src: url('/fonts/NunitoSans-Regular.woff2') format('truetype');
}

@font-face {
    font-family: NunitoSansLight;
    src: url('/fonts/NunitoSans-Light.woff2') format('truetype');
}

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    width: 1920px;
    margin: 0 auto;
    font-family: "Nunito", Nunito, sans-serif;
    padding: 0 0 5%;
    line-height: 1.8;
    font-size: 22px;
    color: #4D4C4C;
}

.main {
    max-width: 1920px;
    /*max-width: 1624px;*/
    padding: 5% 8% 0;
}

h3 {
    font-family: "Poppins", Poppins, sans-serif;
    font-size: 48px;
    margin: 0;
    padding: 0;
    color: #1F1E1E;
}

h4 {
    font-weight: normal;
    position: relative;
    margin: 0;
    padding: 10px 0 20px;
    font-size: 22px;
    line-height: 32px;

}

h5 {
    font-family: "Poppins", Poppins, sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    color: #000000;
}
/*img{*/
/*    overflow-clip: 0;*/
/*    object-fit: fill;*/
/*}*/
p {
    font-size: 32px;
    font-family: "Nunito", Nunito, sans-serif;
    line-height: normal;
}
.p_black {
    color: #000000;
}
span {
    font-family: "Poppins", Poppins, sans-serif;
    color: black;
    font-weight: bold;
    font-size: 16px;
}

.image_span_container {
    display: flex;
    flex-direction: column;
}

.span_under_image {
    align-self: end;
    padding-right: 9%;
    padding-top: 4%;
    color: #4D4C4C;

}

.list_span {
    font-size: 15px;
    font-weight: 300;
}

h4:after {
    content: "";
    background: #E5E4E3;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 35%;

}

.ul-wrapper {
    padding: 15px 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.list {
    max-width: 328px;
}

li {
    font-size: 20px;
    line-height: 32px;
}

.list-wrapper {
    width: 50%;
    padding-right: 10%;
}

.competitors-table {
    width: 100%;
    height: 600px;
}

.competitors-table_item {
    height: 100%;
    width: 100%;
}

.ppal-container {
    /*max-width: 1624px;*/
    /*margin: 5% 8% 5%;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10%;
    /*min-height: fit-content;*/
    /*background-image: linear-gradient(to right, white 38%, #E5E4E3 20%);*/
}

.container {
    width: 100%;
    padding-bottom: 10%;
}

.features {
    line-height: 40px;
}

.ppal-text {
    max-width: 500px;
}
.ppal-text_column {
    max-width: 500px;
    padding-top: 5%;
}

.ppal-image {
    width: 385px;
    height: 650px;
    /*background-color: #E5E4E3;*/
}
.ppal-image_column {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /*background-color: #E5E4E3;*/
}
.ppal-image_column_box{
    width: 550px;
    height: 400px;
    margin-bottom: 5%;
}
.ppal-image_full_screen {
    width:1384px;
    height: 700px;
}
/*.ppal-image-wrapper {*/
/*    width: 1080px;*/
/*    justify-content: end;*/
/*    display: flex;*/
/*    gap: 50px;*/
/*    !*background-color: rgba(250, 249, 248, 1);*!*/
/*    !*background-color: #E5E4E3;*!*/
/*}*/

.ppal-image-wrapper_box {
    /*width: 80%;*/
    display: flex;
    flex-direction: row;
    justify-content: end;
}
.ppal-image-wrapper_box_column{
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.ppal-image-item {
    /*width: 50%;*/
}

.ppal-image-back-front-box {
    padding: 0;
    width: 812px;
    height: 565px;
    position: relative;
    z-index: 9;
    margin-left: -30px;
}

.ppal-image-back {
    width: inherit;
    height: inherit;
    /*object-fit: fill;*/
}

.ppal-image-front {
    bottom: 0;
    right: -5%;
    width: 277px;
    height: 509px;
    position: absolute;
    z-index: 10;
}

.ppal-container_no-background {
    display: flex;
    flex-direction: row;
    padding: 30px 0 30px;
}

.list_and_image_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 1600px) and (max-width: 2560px) {
    body {
        /*padding: 5% 8% 5%;*/
        line-height: 44.8px;
        font-size: 32px;
    }

    .main {
        max-width: 1920px;
        /*max-width: 1624px;*/
        padding: 5% 0 5%;
    }

    h3 {
        font-size: 72px;
        line-height: 86.4px;
    }

    h4 {
        font-size: 32px;
        padding: 35px 0 30px;
        line-height: 44.8px;
    }

    span {
        font-size: 22px;
    }
    .span_under_image {
        padding-right: 5%;
    }

    li {
        font-size: 32px;
        line-height: 44.8px;
        max-width: 560px;
    }

    .competitors-table {
        height: 820px;
    }

    .list_padding {
        margin-left: 10%;
    }

    .list_span {
        font-size: 22px;
        font-weight: 300;
    }

    .list {
        max-width: 500px;
    }

    .container {
        height: 920px;
        padding-top: 8%;
        /*padding: 5% 8% 0;*/
    }

    .ppal-container {
        height: 920px;
        margin: 0;
        padding-top: 8%;
        /*justify-content: space-evenly;*/
    }

    .ppal-text {
        max-width: 700px;
    }

    .features {
        line-height: 67.2px;
    }

    p {
        font-size: 48px;
    }

    span {
        font-size: 22px;
    }

    .ppal-image-back-front-box {
        margin: 0;
        padding: 0;
        width: 1312px;
        height: 815px;
        position: relative;
        z-index: 9;
    }
    .ppal-image_column_box{
        width: 600px;
        height: 440px;
    }

    .ppal-container_no-background {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30px 0 30px;
        height: max-content;
    }

    .ppal-image {
        width: 445px;
        height: 820px;
    }

    .ppal-image-wrapper_box {
        width: 100%;
        justify-content: end;
        gap: 5%;

    }
    .ppal-image_full_screen {
        width: 1920px;
        height: 1080px;
    }

}

@media screen and (min-width: 769px) and (max-width: 1199px) {
    /*h3 {*/
    /*    text-align: left;*/
    /*}*/
    /*h4 {*/
    /*    font-size: 28px;*/
    /*}*/
    /*.ul-wrapper {*/
    /*    display: flex;*/
    /*    width: 100%;*/
    /*    flex-direction: column;*/
    /*    justify-content: center;*/
    /*}*/
    /*.list-wrapper {*/
    /*    width: 100%;*/
    /*    padding-right: 0;*/
    /*}*/
}

@media screen and (min-width: 320px) and (max-width: 440px) {
    body {
        /*padding: 5% 8% 5%;*/
        line-height: 20px;
        font-size: 16px;
    }

    .main {
        max-width: 320px;
        /*max-width: 1624px;*/
        padding: 4% 0 1%;
        margin: 0 auto;
    }

    h3 {
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }

    h4 {
        font-size: 18px;
        padding: 10px 0 10px;
        line-height: 32px;
        text-align: center;
    }

    span {
        text-align: center;
        width: 100%;
    }
    .span_under_image {
        padding-right: 0;
        align-self: center;
    }

    p {
        font-size: 24px;
        text-align: center;
    }

    .ul-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container, .ppal-container, .ppal-image-wrapper_box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .ppal-image {
        max-width: 280px;
        max-height: 550px;
    }

    .ppal-image-back-front-box {
        margin: 0;
        padding: 0;
        width: 300px;
        height: 180px;
    }

    .ppal-container_no-background {
        flex-direction: column;
        justify-content: center;
        padding: 5px 0 5px;
        align-items: center;
    }
    .ppal-image_full_screen {
        width:320px;
        height: 170px;
    }

    .list-wrapper {
        width: 100%;
        padding-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .competitors-table {
        width: 100%;
        height: 130px;
    }

    .competitors-table_item {
        height: 100%;
        width: 100%;
    }

    .ppal-image-wrapper_box {
        /*width: 80%;*/
        justify-content: center;
        align-items: center;
    }
}