.Page {
    max-width: 63.5em;
    margin: 0 auto;
}

p {
    font-size: 14px;
}
p b{
    font-weight: bold !important;
}

h1 {
    font-size: 140%;
    text-align: center;
}
h2 {
    font-size: 125%;
    text-align: center;
    margin:20px;
}

#BasicInfo{
    text-align:center;
}
    #BasicInfo p {
        margin: 0 20px 0 20px;
    }

.mobile .ScreenImage {
    border-radius: 25px;
    margin: 0 auto;
    width: 100%;
    z-index: -1;
}
.desktop .ScreenImage {
    border-radius: 25px;
    margin: 0 auto;
    width: 600px;
    height: 410px;
    z-index: -1;
}

#TryPanel{
    align-items:center;
}
    #TryPanel > #TryButton > span {
        padding: 8px 15px 8px 15px;
        background-color: #00bdd7;
        font-weight: bold;
        color: white;
        border-radius: 25px;
        width: -moz-max-content;
        width: max-content;
    }

#Footer {
    background-color: #e4eff1;
    position: relative;
    margin-bottom: 7em;
}
    #Footer #SingleCoffeLine {
        text-align: center;
    }
#Footer > div {
    margin: 0 auto;
}
    #Footer #Text2{
        margin: 10px 30px 51px 30px;
    }
    #Footer #FooterImageHolder:after {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100px;
        max-width: 741px;
        background-image: url('../Images/HomeProtrusion.png');
        background-repeat: no-repeat;
        background-size: contain;
        align-self: start;
    }

#BankAccounts, #Contracts, #Insurances, #Credits, #Directives, #Employee{
    align-items:center;
}
    #BankAccounts > .mobile, #Contracts > .mobile, #Insurances > .mobile, #Credits > .mobile, #Directives > .mobile, #Employee > .mobile {
        max-width: 36em;
        width: 100%;
    }

@media only screen and (min-width: 480px) {
    h1 {
        font-size: 200%;
    }
    #Footer h1 {
        text-align: start;
    }
    #Footer {
        margin-bottom: 10em;
    }
}

@media only screen and (min-width: 600px) {
    #Header h1 {
        font-size: 250%;
    }

    #Footer h1 {
        text-align: start;
    }

    #TryPanel > #TryButton > span {
        padding: 13px 27px 13px 27px;
    }
}

@media only screen and (min-width: 800px) {
    #Header h1 {
        font-size: 300%;
    }
}

@media only screen and (min-width: 1024px) {
    #Header{
        margin-top:3em;
    }
    #Header h1 {
        font-size: 325%;
    }
        #Header h2 {
            font-size: 160%;
            line-height: 29px;
            color: #000000;
            font-family: "Rubik";
            font-weight: 500;
            text-align: center;
            margin: 1rem;
        }

    .ArrowButton{
        margin-top: 3em;
        align-items:center;
    }
        .ArrowButton img{
            width: 49px;
        }
        .ArrowButton > div:after {
            content: "";
            position: absolute;
            width: 1928px;
            height: 1080px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url(../Images/BackgroundWood.png);
            left: -936px;
            top: -3.3em;
            z-index: -1;
        }

    #BasicInfo {
            margin-top: 50px;
        }
        #BasicInfo p {
            line-height: 29px;
            font-size: 16px;
            font-family: "Rubik";
            font-weight: 400;
        }

    .SectionTextLeft{
        text-align:start;
        align-items:flex-start;
        justify-content:center;
        
    }
    .SectionTextRight {
        text-align: start;
        align-items: flex-start;
        justify-content: center;
    }
        .SectionTextLeft p, .SectionTextRight p {
            font-size: 75%;
            line-height: 20px;
            color: #000000;
            font-family: "Montserrat";
            font-weight: 300;
        }

    .SectionLeft {
        margin-top: 100px;
    }
        .SectionLeft h2 {
            font-size: 24px;
            font-family: "Rubik";
            font-weight: 700;
            margin-left: 0;
        }
        .SectionLeft .desktop {
            width: 100%;
        }
        .SectionLeft .ScreenImage {
            transform: translateX(135px) scale(1.05);
            box-shadow: 0px 5px 21px rgba(0,0,0,0.16);
            border: 4px solid #f7f7f7;
        }
        .SectionLeft .ImageSection .Symbol {
            position: absolute;
            top: -2em;
            left: -3em;
            z-index: 2;
        }
        .SectionLeft .ImageSection div {
            position: absolute;
            top: -3em;
            left: 7em;
            width: 102px;
            height: 102px;
            border-radius: 44px;
            box-shadow: 0px 5px 21px rgba(0,0,0,0.16);
            background-color: #fefdfb;
            justify-content: center;
            align-items: center;
            z-index:1;
        }
            .SectionLeft .ImageSection div > span {
                font-size: 36px;
                color: #999999;
                font-family: "Rubik";
                font-weight: 700;
            }

    .SectionRight {
        margin-top: 100px;
    }
        .SectionRight h2 {
            font-size: 24px;
            font-family: "Rubik";
            font-weight: 700;
            margin-left: 0;
        }
        .SectionRight .desktop {
            width: 100%;
        }
        .SectionRight .ScreenImage {
            transform: translateX(-100px) scale(1.05);
            box-shadow: 0px 5px 21px rgba(0,0,0,0.16);
            border: 4px solid #f7f7f7;
        }
        .SectionRight .ImageSection .Symbol {
            position: absolute;
            top: -1.2em;
            left: 3.3em;
            z-index: 2;
        }
        .SectionRight .ImageSection div {
            position: absolute;
            top: -2em;
            left: 26em;
            width: 102px;
            height: 102px;
            border-radius: 44px;
            box-shadow: 0px 5px 21px rgba(0,0,0,0.16);
            background-color: #fefdfb;
            justify-content: center;
            align-items: center;
        }
            .SectionRight .ImageSection div > span {
                font-size: 36px;
                color: #999999;
                font-family: "Rubik";
                font-weight: 700;
            }

    #TryPanel{
        margin-top:13em;
        margin-bottom: 20em;
    }
        #TryPanel > .desktop p{
            line-height: 150%;
            font-family: "Montserrat";
            font-weight: 300;
        }

    #Footer {
        margin-bottom: 15em;
    }
    #Footer h1 {
        text-align: start;
        font-size: 56px;
        line-height: 62px;
        font-family: "Rubik";
        font-weight: 700;
    }
    #Footer p {
        font-size: 20px;
        line-height: 29px;
        font-family: "Montserrat";
        font-weight: 400;
    }
    #Footer #SingleCoffeLine {
        font-size: 14px;
        line-height: 21px;
        font-family: "Montserrat";
        font-weight: 300;
        text-align: start;
    }
    #Footer .HeaderSection{
        margin-top:80px;
        margin-bottom: 10px !important;
    }
    #Footer #Text2 {
        margin: 10px 30px 70px 30px;
    }
    #Footer #FooterImageHolder:after {
        content: "";
        position: absolute;
        width: 100vw;
        height: 140px;
        max-width: 741px;
        background-image: url('../Images/HomeProtrusion.png');
        background-repeat: no-repeat;
        background-size: contain;
        align-self: normal;
        left: -5em;
    }
    #Footer > div:after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        max-width: 741px;
        background-image: url('../Images/FooterCoffee.png');
        background-repeat: no-repeat;
        background-size: contain;
        left: 31em;
        top: 4em;
    }

    /*Lines and arrows*/
    #BankAccounts .desktop:before {
        content: "";
        position: absolute;
        width: 600px;
        height: 100vh;
        background-image: url('../Images/ArrowProperties1.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: -12em;
        top: -34em;
        z-index: -2;
    }
    #Contracts .desktop:before {
        content: "";
        position: absolute;
        width: 13em;
        height: 100vh;
        background-image: url('../Images/ArrowProperties2.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: 35.6em;
        top: -8em;
        z-index: -2 !important;
    }
    #Insurances .desktop:after {
        content: "";
        position: absolute;
        width: 21em;
        height: 100vh;
        background-image: url('../Images/ArrowProperties3.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: 9.5em;
        top: -7.5em;
        z-index: -2 !important;
    }
    #Credits .desktop:after {
        content: "";
        position: absolute;
        width: 21em;
        height: 100vh;
        background-image: url('../Images/ArrowProperties4.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: 8.5em;
        top: -11.5em;
        z-index: -2 !important;
    }
    #Directives .desktop:after {
        content: "";
        position: absolute;
        width: 1197px;
        height: 1800px;
        background-image: url('../Images/ArrowProperties5.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: -10.5em;
        top: -10.5em;
        z-index: -2 !important;
    }
    #TryPanel .desktop::after {
        content: "";
        position: absolute;
        width: 20em;
        height: 20em;
        background-image: url('../Images/PencilHome1.png');
        background-repeat: no-repeat;
        background-size: contain;
        transform: rotate(60deg);
        top: 8.5em;
        left: 34em;
    }

    .ArrowButton:after {
        content: "";
        position: absolute;
        width: 380px;
        height: 170px;
        background-image: url('../Images/Glasses.png');
        background-repeat: no-repeat;
        background-size: contain;
        top: -7em;
        left: 72em;
    }
    .ArrowButton:before {
        content: "";
        position: absolute;
        width: 128px;
        height: 128px;
        max-width: 741px;
        background-image: url('../Images/PaperClip.png');
        background-repeat: no-repeat;
        background-size: contain;
        top: -3.3em;
        left: 70em;
        cursor: default;
    }
}