.page_1 {
    background: #f3f3ee;
    width: 100%;
    height: 100vh;
    max-height: 1000px;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.page_1 img {
    /*width: 50%;*/
    /*z-index: 0;*/
}

.page_1 .background {
    position: relative;
    width: 100%;
    height: 1024px;
    z-index: 0;
}

.page_1 .offsetTitle {
    margin-top: 40%;
    position: relative;
}

.page_1 .title {
    width: 100%;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    position: relative;
}

.page_1 .offsetTitle::before {
    content: '';
    width: 100%;
    height: 792px;
    position: absolute;
    right: 85%;
    background-image: url("../img/page1_left.png");
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    top: -207px;
}

.page_1 .pattern_right {
    position: relative;
    right: 0;
    height: 554px;
    width: 100%;
    overflow-x: hidden;
    top: -150px;
}

.page_1 .pattern_right img {
    position: absolute;
    right: -559px;
    width: 79%;
    height: 627px;
    top: -108px;
}

.page_1 .paragraf {
    font-size: 18px;
    position: absolute;
    text-align: center;
    width: 60%;
    /* The code below is required to horizontally and vertically center the <p> element */
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-weight: 300;
}

.page_1 .logo {
    width: 138px;
    position: absolute;
    top: -262px;
}

.page_1 .mobile_pattern {
    width: 100%;
    height: 500px;
    position: absolute;
    bottom: 0;
    background-image: url("../img/page1_mobile2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    overflow: hidden;
}

@media only screen and (min-width: 320px) {
    .page_1 .offsetTitle:before {
        display: none;
    }
    .page_1 .offsetTitle:after {
        display: none;
    }
    .page_1 .logo {
        display: none;
    }
    .page_1 .title {
        font-size: 22px;
    }
    .page_1 .paragraf {
        font-size: 15px;
        width: 85%;
    }
    .page_1 .offsetTitle {
        margin-top: 25%;
    }
    .page_1 {
        min-height: 768px;
    }
    .page_1 .pattern_right {
        display: none;
    }
    .page_1 .mobile_pattern {
        height: 210px;
    }
}

@media only screen and (min-width: 375px) {
    .page_1 .mobile_pattern {
        height: 245px;
    }
}

@media only screen and (max-width:424px) {
    .page_1 .paragraf {
        font-size: 14px;
        top: 75px;
    }
    .page_1 .mobile_pattern {
        height: 150px;
    }
}

@media only screen and (min-width: 600px) {
    .page_1 .mobile_pattern {
        height: 275px;
    }
}

@media only screen and (min-width: 768px) {
    .page_1 .mobile_pattern {
        height: 480px;
    }
}

@media only screen and (min-width:768px) {
    .page_1 .offsetTitle {
        margin-top: 15%;
    }
    .page_1 .mobile_pattern {
        height: 375px;
    }
}

@media only screen and (min-width: 1024px) {
    /* .page_1{
        min-height: 768px;
    } */
    .page_1 .title {
        font-size: 25px;
    }
    .page_1 .offsetTitle {
        margin-top: 30%;
    }
    .page_1 .paragraf {
        width: 52%;
        font-size: 16px;
    }
    .page_1 .offsetTitle::before {
        width: 70%;
        height: 580px;
        right: 80%;
        top: -23px;
        display: block;
    }
    .page_1 .logo {
        display: block;
    }
    .page_1 .mobile_pattern {
        display: none;
    }
    .page_1 .pattern_right {
        display: block;
    }
    .page_1 .pattern_right img {
        right: -619px;
        width: 882px;
        height: 581px;
        top: -83px;
    }
}

@media only screen and (min-width: 1200px) {
    .page_1 .offsetTitle {
        margin-top: 25%;
    }
    .page_1 .logo {
        left: -4px;
    }
    .page_1 .offsetTitle::before {
        width: 75%;
        height: 669px;
        right: 82%;
        top: -82px;
    }
    .page_1 .pattern_right img {
        right: -592px;
        width: 919px;
        height: 655px;
        top: -133px;
    }
}

@media only screen and (min-width: 1400px) {
    .page_1 .pattern_right img {
        right: -525px;
    }
}

@media only screen and (min-width: 1600px) {
    .page_1 .logo {
        left: -56px;
    }
    .page_1 .offsetTitle::before {
        width: 83%;
        height: 670px;
        right: 85%;
        top: -20px;
    }
    .page_1 .pattern_right {
        height: 900px;
    }
    .page_1 .pattern_right img {
        right: -500px;
        width: 984px;
        height: 779px;
        top: -133px;
    }
}

@media only screen and (min-width: 1900px) {
    .page_1 .logo {
        left: -45px;
        top: -320px
    }
    .page_1 .offsetTitle {
        margin-top: 30%;
    }
    .page_1 .offsetTitle::before {
        width: 95%;
        right: 48vw;
        height: 800px;
    }
    .page_1 .pattern_right {
        top: -243px;
    }
    .page_1 .pattern_right img {
        right: -400px;
        top: -20px;
    }
}

@media only screen and (min-width: 2150px) {
    .page_1 .logo {
        left: -16%;
        /*top:-320px*/
    }
    .page_1 .offsetTitle {
        margin-top: 30%;
    }
    .page_1 .offsetTitle::before {
        width: 100%;
        right: 50vw;
        height: 800px;
    }
    .page_1 .pattern_right img {
        right: -354px;
        top: -40px;
    }
}

@media only screen and (min-width: 2560px) {
    .page_1 .title {
        font-size: 41px;
    }
    .page_1 .paragraf {
        width: 58%;
        font-size: 26px;
    }
    .page_1 .logo {
        width: 200px;
    }
    .page_1 .offsetTitle::before {
        width: 106%;
        right: 39vw;
        height: 850px;
        top: 100px;
    }
    .page_1 .pattern_right {
        top: -335px;
        overflow: hidden;
    }
    .page_1 .pattern_right img {
        width: 1139px;
        height: 950px;
        top: -40px;
    }
    .page_1 {
        max-height: 1260px;
        min-height: 1200px
    }
}

@media only screen and (min-width: 3840px) {
    .page_1 .title {
        font-size: 53px;
    }
    .page_1 .paragraf {
        font-size: 37px;
        width: 95%;
        top: 200px;
    }
    .page_1 .logo {
        left: -57%;
        top: -540px;
        width: 280px;
    }
    .page_1 .offsetTitle {
        margin-top: 50%;
    }
    .page_1 .pattern_right {
        height: 1231px;
    }
    .page_1 .offsetTitle::before {
        width: 1227px;
        right: 37vw;
        height: 1086px;
        top: -120px;
    }
    .page_1 .pattern_right {
        top: -335px;
        overflow: hidden;
    }
    .page_1 .pattern_right img {
        width: 1400px;
        height: 1100px;
        top: -58px;
    }
    .page_1 {
        height: 1440px;
        max-height: 1440px;
    }
}

@media only screen and (orientation: landscape) {
    .page_1 .mobile_pattern {
        height: 240px;
    }
}

@media only screen and (orientation: landscape) and (max-width:600px) {
    .page_1 .mobile_pattern {
        height: 200px;
    }
}