/* Base Styles */
host, :root {
    --rem: 15.5;
}
html {
    font-size: 16px; /* 1rem = 16px */
    /*    line-height: 1.5;*/
    box-sizing: border-box;
}

body {
    margin: 0;

}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Global Width Restriction for .slide */
.slide {
    width: 100%;
    max-width: 2880px;
    margin: 0 auto;

}

/* Responsive Adjustments from Mobile to Large Monitors */



/* Mobile Screens - 480px to 579px */
@media (min-width: 0px) and (max-width: 1023px)and (orientation: portrait) {

    html {
        font-size: 13.8px;
    }
    .slide{
        height: auto;
        aspect-ratio: auto;
        width: 100%;
        padding: 0% 0% 0% 0%;
        min-height: 768px;
        min-width: 375px !important;
    }
    .type1.slide,.type2.slide{
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
        min-height: min(90dvh, 768px);
        aspect-ratio: 9 / 16;


    }

    .type1.slide .contentWrapper,.type2.slide .contentWrapper{
        justify-content: center;
    }

    .type1.slide{
        min-height: auto;
    }
    #relearning {
        min-height: min(90dvh, 981px);
        aspect-ratio: 8 / 19;
    }
    /* Menu */
    .header {
        padding: 1% 4.3% 1% 4.3%;
        width: 100%;
    }
    .logo {
        width: 3.5rem;
        height: 2.5rem;
    }
    .menuIcon {
        width: 2rem;
        height: 2.5rem;
    }
    .menuWrapper ul{
        padding: 1rem 0.5rem;
    }
    .menuWrapper ul li a {
        padding: 0.3rem 1rem;
    }
    .bold a {
        font-weight: 600 !important;
        -webkit-font-smoothing: antialiased;
    }


    /* POV1 Slide */
    #pov_1 .textWrapper {
        display: flex;
        margin-left: 3.3%;
        flex-wrap: wrap;
    }

    #pov_1 .flexBox {
        flex-basis: 100%;
    }

    #pov_2 .flexBox {
        margin: 3% 3.3% 3% 3.3%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #pov_2 .flexBox img:first-of-type {
        content: url("../media/zno_1.png");
        width: 200%;
        object-fit: cover;
        object-position: top;
    }
    #pov_2 .flexBox img:last-of-type {
        display: inline-block;
        width: 110%;
        object-fit: cover;
        object-position: top;
    }

    /* Type  1 */
    .type1 .contentWrapper {
        width: 90%;
    }
    .type1 .title{
        font-size: 2rem;
        line-height: 1.5;
    }
    .type1 .title span {
        font-family: "produkt", Helvetica,courier new;
        font-size: 2.1rem;
        font-weight: 600;
        margin-bottom: 9%;
    }
    .type1 .bigText p {
        font-family: "produkt", Helvetica,courier new;
        font-size: 1.4rem;
        font-weight: 200;
        line-height: 1.3;
    }
    .type1 .smallText p {
        font-family: "produkt", Helvetica,courier new;
        font-size: 1.2rem;
        font-weight: 400;
        margin-top: 16%;
        margin-bottom: 3%;
    }

    .type1 .contentWrapper {
        display: flex;
        padding-top: 32%;
        margin: 0% 5%;
    }



    /* Type  2 */
    .type2 .title {
        font-size: 3rem;
    }
    .type2 .contentWrapper {
        padding-top: 25%;
    }



    /* Type  3 */
    .type3 .contentWrapper {
        width: 100%;
    }
    .type3 .textWrapper {
        padding: 5%;
        padding-top: 5%;
    }
    .type3 .contentWrapper  > .flexBox{
        flex-direction: column;
    }
    .type3 .contentWrapper  > .flexBox > img {
        width: 100%;
        object-fit: cover;
        max-height: 51dvh;

    }
    /* Clockman Wrapper */
    #clockmanWrapper{
        height: 41rem;
        min-height: 41rem;
    }

    /* Faces */
    #facesWrapper{
        height: 41rem;
        min-height: 41rem;
    }
    #faces {
        background-position: bottom;
        min-height: 41rem;
    }


    /* Universe Slide */
    #universe .contentWrapper  > .flexBox > img {
        width: 100%;
        object-fit: cover;
        max-height: 65dvh;
        object-position:bottom;
    }
    #universe .type3 .contentWrapper  > .flexBox > img {
        object-position: top left;
    }


    /* Purspose Slide */
    #purpose .type3 .contentWrapper  > .flexBox > img {
        object-position: top left;
    }




    /* Why Fuse Slide*/
    #whyFuse .bigText > span p:first-of-type {
        width: 1rem;
        height: 4rem;
    }
    #whyFuse .bigText p {
        font-family: "produkt",helvetica, courier new;
        font-size: 1.3rem;
        margin: 2% 0% 3% 0%;
    }
    #whyFuse .extraSmall {
        font-size: 0.45rem;
    }

    /* Karmic Journey */
    #karmicJourney.slide{
        min-height: 768px;
    }
    #karmicJourney{
        background: none ;

    }
    #karmicJourney .contentWrapper {
        letter-spacing: normal
    }
    #karmicJourney .contentWrapper {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        height: 100%;
        margin: auto;
        padding-top: 0rem;
        padding-left: 0rem;
        flex-direction: column;
    }
    #karmicJourneyBgImg{
        display: block;
        width: 110%;
        margin-left: 2%;
    }
    #karmicJourney .bigText p:nth-of-type(1),#karmicJourney .bigText p:nth-of-type(2){
        font-family: "produkt", Helvetica, courier new;
        background: none !important;
        font-weight: 500;
        color: #fff;
        font-size: 2.2rem;
        padding-left: 0;
        margin-left: auto;
        line-height: 1.4;
        padding-right: 0;
        text-align: center;
        margin-right: auto;
        max-width: 100%;
    }

    #karmicJourney .textWrapper{
        text-align: center;
        padding: 2% 2%;
        padding-bottom: 3%;
        box-sizing: border-box;
    }
    #karmicJourney .smallText p:nth-of-type(1)
    ,#karmicJourney .smallText p:nth-of-type(2)
    , #karmicJourney .smallText p:nth-of-type(3),
    #karmicJourney .smallText p:nth-of-type(4){
        background: none  !important;
        font-weight: 500;
        color: #fff;
        font-size: 0.95rem;
        padding-left: 0rem;
        margin-left: 0rem;
        padding-right: 0rem;
        text-wrap: auto;
    }

    #karmicJourneyBgImg{
        display: block;
    }

    /* Connected Slide */
    #connected .contentWrapper {
        width: 70%;
        margin: auto;
        padding-top: 17%;
    }
    #connected  .bigText p:last-of-type {
        margin-bottom: 19rem !important;
    }
    /* Clockman Slide */
    #clockman {
        background: url(../media/man_clock.png) no-repeat;
        background-size: cover;
        background-position: 35%;
    }

    /* Reflection Slide*/
    #reflection .smallImg {
        width: 100%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    /* footer */
    .footerNote {
        margin: 3%;
        box-sizing: border-box !important;
        width: 94% !important;
    }

    .table_companies tbody {
        font-size: 1.1rem;
    }
    .table_companies th {
        color: #535860;
        padding-bottom: 2rem;
        text-align: left;
        font-size: 1.3rem;
        padding: 0% 3% 0% 0%;
        text-wrap: wrap;
        font-weight: bold;
    }
    .table_companies table {
        width: 100%;
    }
    .table_companies tr:first-of-type {
        height: 6rem;
    }

    .table_companies tr td:nth-of-type(1) {
        width:20%;
    }
    .table_companies tr td:nth-of-type(2) {
        width:65%;
    }
}

@media (min-width: 480px) and (max-width: 579px) and (orientation: portrait) {
    .type1.slide,.type2.slide{
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
        min-height: min(90dvh, 768px);
        aspect-ratio: 9 / 9;

    }
    .type1.slide{
        min-height: auto;
    }
}

/* Tablet Portrait - 580px to 767px */
@media (min-width: 580px) and (max-width: 767px) and (orientation: portrait) {
    html {
        font-size: 16px;
    }
    .slide{
        height: auto;
        aspect-ratio: auto;
        min-width: 100vw;
        width: 100%;
        min-height: 768px;
    }
    .type1.slide,.type2.slide{
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
        min-height: min(90dvh, 768px);
        aspect-ratio: 9 / 9;

    }
    .type1.slide{
        min-height: auto;
    }
    .type1 .title{
        font-size: 2.2rem;
        line-height: 1.5;
    }
    .footerNote p {
        color: #92959a;
        font-size: 0.6rem;
    }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    html {
        font-size: 18px;
    }
    #pov_1 .flexBox {
        flex-basis: 100%;
        flex-direction: row;
    }
    .type3 .contentWrapper > .flexBox > img {
        width: 100%;
        object-fit: cover;
        max-height: 72dvh;
        object-position: top;
    }
    #pov_1 .block {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15%;
        width: 50%;
    }
    .type1 .title{
        font-size: 2.2rem;
        line-height: 1.5;
    }
    .slide{
        height: auto;
        aspect-ratio: auto;
        min-width: 100vw;
        width: 100%;
        min-height: 1024px
    }
    .type1.slide,.type2.slide{
        padding-left: 3%;
        padding-right: 3%;
        display: flex;
        min-height: min(90dvh, 768px);
        aspect-ratio: 9 / 9;

    }
    .type1.slide{
        min-height: auto;
    }
    .footerNote p {
        color: #92959a;
        font-size: 0.55rem;
    }
}



/* Tablet Landscape - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape){
    html {
        font-size: 12px;
    }
}

/* Desktop Screens - 1024px and above */
@media (min-width: 1024px) and (max-width: 1066px) {
    html {
        font-size: 12px;
    }
    .slide{
        min-width: 1024px;
    }
}

/* Responsive Font Scaling from 1067px up to 2880px, every 100px */

@media (min-width: 1067px) and (max-width: 1166px) {
    html {
        font-size: 12.2px;
    }
}

@media screen and (min-width: 1167px) and (max-width: 1266px) {
    html {
        font-size: 13.4px;
    }
}

@media screen and (min-width: 1267px) and (max-width: 1366px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width: 1367px) and (max-width: 1466px) {
    html {
        font-size: 15.5px;
    }
}

@media screen and (min-width: 1467px) and (max-width: 1566px) {
    html {
        font-size: 16.5px;
    }
}

@media screen and (min-width: 1567px) and (max-width: 1666px) {
    html {
        font-size: 18.1px;
    }
}

@media screen and (min-width: 1667px) and (max-width: 1766px) {
    html {
        font-size: 19px;
    }
}

@media screen and (min-width: 1767px) and (max-width: 1866px) {
    html {
        font-size: 20.1px;
    }
}

@media screen and (min-width: 1867px) and (max-width: 1966px) {
    html {
        font-size: 21.3px;
    }
}

@media screen and (min-width: 1967px) and (max-width: 2066px) {
    html {
        font-size: 22.5px;
    }
}

@media screen and (min-width: 2067px) and (max-width: 2166px) {
    html {
        font-size: 23.8px;
    }
}

@media screen and (min-width: 2167px) and (max-width: 2266px) {
    html {
        font-size: 25px;
    }
}

@media screen and (min-width: 2267px) and (max-width: 2366px) {
    html {
        font-size: 26.5px;
    }
}

@media screen and (min-width: 2367px) and (max-width: 2466px) {
    html {
        font-size: 27px;
    }
}

@media screen and (min-width: 2467px) and (max-width: 2566px) {
    html {
        font-size: 28.5px;
    }
}

@media screen and (min-width: 2567px) and (max-width: 2666px) {
    html {
        font-size: 29px;
    }
}

@media screen and (min-width: 2667px) and (max-width: 2766px) {
    html {
        font-size: 29.5px;
    }
}

@media screen and (min-width: 2767px) and (max-width: 2880px) {
    html {
        font-size: 31px;
    }
}
@media screen and (min-width: 2881px) and (max-width: 5000px) {
    html {
        font-size: 31px;
    }
}
/* Restrict .slide width to 2880px on large screens */
.slide {
    width: 100%;
    max-width: 2880px;
    margin: 0 auto;

}