.BackgroungWoodImage {
    position: absolute;
    top: 15em;
    left: 0;
    width: 100%;
    height: 80em;
    background-image: url(../Images/BackgroundWood.png);
    z-index: -1;
    background-repeat: repeat-x;
}

/*#region Header*/
.ArrowHolder {
    align-items: center;
    height: 5em;
}

    .ArrowHolder > img:first-child {
        width: 100%;
        max-width: 741px;
        z-index: 0;
    }

.Header > .Content {
    box-shadow: 2.572px -1.545px 18px rgba(0,0,0,0.15);
    background-color: #e4eff1;
}

    .Header > .Content > div {
        max-width: 64em;
    }

.Header .ScreenImage{
    display:none;
}


/*#endregion*/

/*#region Footer*/
.Footer {
    position: relative;
}

    .Footer > .Content {
        background-color: #e4eff1;
    }

        .Footer > .Content > div {
            max-width: 25em;
        }

    .Footer > img {
        max-width: 385px;
        z-index: -1;
        transform: translateY(-50vh);
    }

    .Footer span {
        max-width: 24rem;
    }
/*#endregion*/

/*#region Content*/
.PageContent > div {
    margin-bottom: 40px;
}

.BankCard, .ContractCard, .InsuranceCard, .EmployeeCard {
    flex-direction: column;
    align-items: center;
    margin: 15px 15px 20px 15px;
    z-index:4;
}

    .BankCard > div:first-of-type, .ContractCard > div:first-of-type, .InsuranceCard > div:first-of-type, .EmployeeCard > div:first-of-type {
        background-color: white;
        border-radius: 40px;
        box-shadow: 2.572px -1.545px 18px rgba(0,0,0,0.15);
        width: 8rem;
        height: 8rem;
        margin-bottom: 1em;
    }

    .BankCard > div:last-of-type, .ContractCard > div:last-of-type, .InsuranceCard > div:last-of-type, .EmployeeCard > div:last-of-type {
        text-align: center;
    }

    .BankCard img, .InsuranceCard img {
        width: 55%;
        height: 55%;
    }

    .ContractCard img {
        width: 70%;
        height: 70%;
    }

    .EmployeeCard img {
        width: 45%;
        height: 45%;
    }

.ScreenShotContent > div:first-child {
    margin: 10px;
}

.ScreenShotContent .ScreenShotArrows{
    display: none;
}
/*#endregion*/

/*#region Images*/
.HomeArrow1 {
    display: none;
}

.HomeArrow2 {
    display: none;
}
.HomeArrow3 {
    display: none;
}
.Pencil1 {
    display: none;
}
.Pencil2 {
    display: none;
}
.Pencil3 {
    display: none;
}
.Coffee1 {
    display: none;
}
/*#endregion*/

.InfoMapPanel {
    text-align: center;
    color: gray;
    text-decoration: underline;
    flex-direction: column;
    margin: 0 auto 7em auto !important;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (min-width: 480px) {
    /*HEADER*/
    .Header .ArrowHolder {
        height: 8em;
    }

    .InfoMapPanel {
        margin: 3em auto 7em auto !important;
    }

    @media only screen and (max-width: 1024px) {
        .Header .Content {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .Header .ArrowHolder > img:first-child {
            width: auto;
        }
    }

    /*CONTENT*/
    .BankCard, .ContractCard, .InsuranceCard, .EmployeeCard {
        flex-direction: row;
    }

        .BankCard > div:last-of-type, .ContractCard > div:last-of-type, .InsuranceCard > div:last-of-type, .EmployeeCard > div:last-of-type {
            text-align: left;
            max-width: 65%;
            margin-left: 1em;
        }
    }

@media only screen and (min-width: 600px) {
    /*FOOTER*/
    .Footer h2 {
        max-width: 40rem;
        font-size: 250%;
    }

    .InfoMapPanel {
        margin: 5em auto 7em auto !important;
    }
}

@media only screen and (min-width: 768px) {
    /*HEADER*/
    .Header .ScreenImage {
        display: flex;
        z-index: 4;
        transform: translateY(38px);
        height: max-content;
        height: -moz-max-content;
    }

        .Header .ScreenImage > img {
            width: 38vw;
        }

    .ArrowHolder > img:first-child {
        width: 100%;
        max-width: 741px;
    }

    /*CONTENT*/
    .PageContent > div {
        align-items: center;
    }

    .InfoMapPanel {
        margin: 6em auto 7em auto !important;
    }

    .BankCard, .ContractCard, .InsuranceCard, .EmployeeCard {
        width: 90%;
        justify-content: center;
    }
}

@media only screen and (min-width: 800px) {
    /*HEADER*/
    .Header .ScreenImage > img {
        width: 40vw;
        max-width: 33em;
    }

    .HeaderTextPanel {
        margin-top: 4em;
    }
}

@media only screen and (min-width: 1024px) {
    /*HEADER*/
    .Header .ArrowHolder > img:last-child {
        top: -6rem;
        z-index: 6;
    }

    /*Cards oblast*/

    .PageContent > div:first-child {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 60em;
        margin-top: 4em;
        margin-bottom: 5em;
    }

    .BankCard, .ContractCard, .InsuranceCard, .EmployeeCard {
        max-width: 45%;
        justify-content: flex-start;
    }

        .BankCard > div:last-of-type, .ContractCard > div:last-of-type, .InsuranceCard > div:last-of-type, .EmployeeCard > div:last-of-type {
            max-width: 50%;
            margin-left: 2em;
        }

        .BankCard > div:first-of-type, .ContractCard > div:first-of-type, .InsuranceCard > div:first-of-type, .EmployeeCard > div:first-of-type {
            width: 10rem;
            height: 10rem;
        }

        .BankCard span, .ContractCard span, .InsuranceCard span, .EmployeeCard span {
            font-size: 75%;
            margin-top: 1em;
        }

        .BankCard h3, .ContractCard h3, .InsuranceCard h3, .EmployeeCard h3 {
            font-weight: 600;
        }

    /*Screens oblast*/

    .ScreenShotContent {
        flex-direction: row;
        align-items: flex-start;
    }

    .ScreenShotContent span {
        max-width: 12em;
    }

        .ScreenShotContent > div:first-child {
            max-width: 16em;
            margin: 3em 2em 1em 1em;
            text-align: left;
        }

        .ScreenShotContent h2 {
            margin-bottom: 1rem;
        }

    .PageContent > div:last-child {
        align-items: flex-start !important;
        margin-bottom: 70px;
    }

        .PageContent > div:last-child .TryFreeButton {
            transform: translate(0em,-7em);
            margin-left:0 !important;
            margin-right: 0 !important;
        }

    .ScreenShotContent .ScreenShotArrows {
        display: flex;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .ScreenShotArrows img {
        margin: 15px 0px 15px 25px !important;
        width: 45px;
    }

    .ScreenShotContent .ScreenImageBorder{
        height: 410px;
    }

    .ScreenShotContent .ScreenImage {
        width: 600px !important;
    }


    /*FOOTER*/
    .Footer {
        margin-bottom: 10em;
    }

    .Footer div {
        text-align: left;
    }

    .Footer > .Content > div {
        margin-top: 7em;
        margin-bottom: 10em;
        /*max-width: 40em;*/
    }

    .InfoMapPanel {
        flex-direction: row;
        width: 70em;
        margin: 0 auto 7em auto !important;
    }

    /*#region Images*/

    .HomeArrow1 {
        display: flex;
        position: absolute;
        transform: scale(1, 0.90);
        left: calc(50% - 457px);
        top: 52px;
        z-index: 3;
    }

    .HomeArrow2 {
        display: flex;
        position: absolute;
        transform: scale(0.95, 0.97);
        left: calc(50% - 420px);
        top: 750px;
        z-index: 3;
    }

    .HomeArrow3 {
        display: flex;
        position: absolute;
        transform: scale(0.9, 0.85);
        left: calc(50% - 330px);
        top: 1500px;
        z-index: 3;
    }

    .Pencil1 {
        display: flex;
        position: absolute;
        left: calc(50% + 170px);
        top: 386px;
        z-index: 3;
    }

    .Pencil2 {
        display: flex;
        position: absolute;
        left: calc(50% - 700px);
        top: 1400px;
        z-index: 0;
    }

    .Pencil3 {
        display: flex;
        position: absolute;
        left: calc(50% - 630px);
        top: 1995px;
        z-index: 1;
    }

    .Coffee1 {
        display: flex;
        position: absolute;
        left: calc(50% - -195px);
        top: 1790px;
        z-index: 1;
    }

    /*#endregion*/
}

@media only screen and (min-width: 1350px) {
    /*HEADER*/
    .Header .ScreenImage {
        transform: translate(-120px,50px);
        max-width: 37em;
        width: 50vw;
    }

    .Header .HeaderTextPanel {
        margin: 6em 0 0 -3em;
    }

        .Header .ScreenImage > img {
            max-width: inherit;
            width: inherit;
        }

    .Header > .Content > div {
        max-width: 64em;
        margin-left: -13em;
        max-height: 24em;
    }

    .Footer h2 {
        font-size: 350% !important;
    }

    .Footer > div > div {
        max-width: 40em !important;
    }

    /*#region Images*/

    .HomeArrow1 {
        position: absolute;
        transform: scale(1.02, 0.97);
        left: calc(50% - 454px);
        top: 76px;
        z-index: 3;
    }

    .HomeArrow2 {
        position: absolute;
        transform: scale(0.90, 0.97);
        left: calc(50% - 420px);
        top: 810px;
        z-index: 3;
    }

    .HomeArrow3 {
        display: flex;
        position: absolute;
        left: calc(50% - 440px);
        transform: scale(1,1);
        top: 1570px;
        z-index: 3;
    }

    .Pencil1 {
        display: flex;
        position: absolute;
        left: calc(50% + 176px);
        top: 432px;
        z-index: 3;
    }

    .Pencil3 {
        display: flex;
        position: absolute;
        left: calc(50% - 761px);
        top: 2100px;
        z-index: 1;
    }

    .Coffee1 {
        display: flex;
        position: absolute;
        left: calc(50% + 200px);
        top: 1900px;
        z-index: 1;
    }
    /*#endregion*/
}