body {
    font-family: 'Roboto', sans-serif;
    background-color: grey;
}
strong {
    font-weight: 900;
}
.rem-blue {
    color: #0689C3;
}
.dot { 
    height: 4px;
    width: 4px;
    background-color: #bbb;
    border-radius: 50%;
}
h1 {
    font-size: 36px;
    font-weight: 700;
    font-style: normal;
}
p {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
}
.container { 
    padding-right: 0px;
    padding-left: 0px;
    background-color: #fff;
    width: 992px;
}
.page-wrapper {
    margin: 0px 35px;
}
.sm-2 {
    margin-top: 16px;
}
.sm-2_5 {
    margin-top: 24px;
}
.sm-3 {
    margin-top: 32px;
}
.bg-color {
    background-color: #c8e4f4;
}
/* */


/* */
#header {
    padding-top: 35px;
}
.header-top .logo {
    display: flex;
}
.header-top .logo img {
    width: 79px;
    height: auto;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.header-top .info {
    display: flex;
    align-items: center;
    width: calc(100% - 79px);
    justify-content: flex-end
}
.header-top .info span {
    font-size: 13px;
}
.header-top .info span.spacing {
    padding-left: 10px;
    padding-right: 10px;
}
.header-top .info span.spacing:last-child {
    padding-right: 0px;
}
.header-bottom {
    margin-top: 24px;
    border-top: 4px solid #0689C3;
    border-bottom: 4px solid #0689C3;
}
.header-bottom p {
    margin: 6px 0px;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #8f8d8e;
    line-height: 130%;
}
/* */
#intro {
    margin-top: 24px;
}
#intro .textWrapper p {
    font-size: 15px;
    line-height: 120%;
}
#intro .textWrapper .row div:first-child  {
    padding-right: 60px;
}
#intro .textWrapper .row div:nth-child(2)  {
    padding-left: 60px;
}
#intro h1 {
    font-size: 24px;
    font-weight: 500;
}
#intro .headerWrapper {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 4px;
}
#intro .textWrapper {
    padding: 0px 30px;
}
#intro > .row {
    align-items: center;
}
/* */
#earthquake .row > div:first-child  {
    padding-right: 36px;
}
#earthquake .row > div:nth-child(2)  {
    padding-left: 36px;
}
#earthquake p {
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 110%;
}
#earthquake-left p  {
    font-weight: 900;
    font-size: 25px;
    line-height: 1.1em;
    letter-spacing: 0.02rem;
}
#earthquake {
    margin-top: 24px;
}
#earthquake h1 {
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: #0689C3;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: none;
    text-underline-offset: 8px;
    margin-bottom: 16px;
}
#earthquake img {
    width: 100%;
}
#earthquake-left .image-crop {
    height: 450px;
    overflow: hidden;
    position: relative;
}
#earthquake .image-legend {
    position: absolute;
    font-weight: 700;
    font-size: 19px;
    padding: 6px 10px;
    margin-bottom: 0px;
}
#earthquake .image-legend:first-child  {
    background-color: #0c8cc4;
    color: white;
    bottom: 13.8%;
    left: 8%;
}
#earthquake .image-legend:nth-child(2)  {
    color: #0c8cc4;
    background-color: white;
    bottom: 7%;
    left: 8%;
}
/* */
#contact {
    margin-top: 24px;
    background-color: #0689C3;
    padding: 0px;
}
.contact {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;
}
.contact .text {
    display: flex;
    align-items: center;
}
.contact .text p {
    color: #FFFFFF;
    font-size: 24px;
    margin: 0px;
}
.contact .seperator {
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-left: 3px solid #FFFFFF;
    height: unset;
}
.contact .button-wrapper button {
    font-size: 24px;
    font-weight: 700;
    background: #FFFFFF;
    color: #0689C3;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    padding: 8px 80px 8px 80px;
}
/* */
#result {
    margin-top: 72px;
}
#result p {
    font-size: 15px;
    line-height: 1.2em;
    letter-spacing: -0.01em;
}
#result h1 {
    font-size: 15px;
    margin-bottom: 16px;
}
#result .row > div:first-child  {
    padding-right: 40px;
}
#result .row > div:nth-child(2) {
    padding-left: 16px;
    padding-right: 16px;
}
#result .row > div:nth-child(3)  {
    padding-left: 32px;
}
/* */
#info-cs {
    padding-bottom: 0px;
    margin-top: 24px;
}
.infoBottom {
    display: flex;
    justify-content: space-evenly;
}
.infoBottom .legend {
    text-align: center;
}
.infoBottom .legend p {
    font-weight: 500;
    font-size: 22px;
    color: black;
    text-decoration: underline;
    text-decoration-color: black;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    text-underline-offset: 8px;
}
/* */
#form {
    margin-top: 24px;
}
#form .page-wrapper > div {
    justify-content: space-around
}
#form .field {
    margin-bottom: 16px;
}
#form .field label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}
#form .field label:after { 
    content: "*" 
}
#form .field input {
    border: 1px solid #ccc;
    border-radius: 10px;
    line-height: 30px;
    width: 90%;
}
#form .field .form__message label:after {
    content: "" 
}
#form .field input#message {
    border: 1px solid #ccc;
    border-radius: 10px;
    line-height: 120px;
    width: 100%;
}
#form .submit .form__submit label:after { 
    content: "" 
}
#form .submit .submit-wrapper { 
    display: flex;
    justify-content: space-between;
    align-items: center
}
#form .submit .submit-wrapper .submit__check label { 
    margin-bottom: 0px;
    font-size: 14px;
}
#form .submit .button-wrapper button {
    font-size: 14px;
    background: #FFFFFF;
    color: #0689C3;
    border: none;
    border-radius: 10px;
    padding: 6px 30px 6px 30px;
    cursor: pointer;
    border: 1px #0689C3 solid;
}
/* */
footer {
    margin-top: 24px;
}
footer .logos {
    display: flex;
    justify-content: center;
    padding-bottom: 10px
}
footer .logos .logo {
    display: inline-block;
    padding: 0px 4px;
}
footer .logos .logo img {
    width: 25px;
    height: auto;
}
footer .text {
    text-align: center;
}
footer .text p {
    font-size: 16px;
}
footer .text p::before {
    content: "\00a9";
}
/* responsives */

@media (max-width: 992px ) {
    #intro h1 {
        font-size: 20px;
        font-weight: 500;
    }
    #intro .textWrapper .row div:first-child  {
        padding-right: 15px;
    }
    #intro .textWrapper .row div:nth-child(2)  {
        padding-left: 15px;
    }
    #intro .textWrapper {
        padding: 0px 15px;
    }
    #earthquake .row > div:first-child  {
        padding-right: 15px;
    }
    #earthquake .row > div:nth-child(2)  {
        padding-left: 15px;
    }
    #earthquake-left p {
        font-size: 20px;
    }
    #earthquake-left .image-crop {
        height: 650px;
    }
    #earthquake .image-legend {
        font-size: 19px;
        padding: 6px 10px;
    }
    #earthquake .image-legend:first-child  {
        bottom: 11.8%;
        left: 8%;
    }
    #earthquake .image-legend:nth-child(2)  {
        bottom: 7%;
        left: 8%;
    }
    .sm-3 {
        margin-top: 16px;
    }
    .contact .text p {
        font-size: 20px;
    }
    .contact .button-wrapper button {
        font-size: 20px;
    }
    #result .row > div:nth-child(3) {
        padding-left: 16px;
    }
    .infoBottom .legend p {
        font-size: 16px;
    }
    #result {
        margin-top: 24px;
    }
}

@media (max-width: 768px ) {
    #intro .headerWrapper {
        padding-left: 15px;
        padding-right: 15px;

    }
    .contact .text p {
        font-size: 18px;
    }
    .contact .button-wrapper button {
        font-size: 18px;
    }
    .info {
        display: flex;
        flex-direction: column;
        align-items: flex-end !important;
    }
    .dot {
        display: none;
    }
    .header-top .info span.spacing {
        padding-left: 0px;
        padding-right: 0px;
    }
    .header-top .info span.spacing:last-child {
        padding-right: 0px;
    }
    #earthquake-left .image-crop {
        height: 661.8px;
    }
}

@media (max-width: 575px) {
    .container {
        max-width: 100%;
    }
    #form .field input {
        border: 1px solid #ccc;
        border-radius: 8px;
        line-height: 20px;
        width: 100%;
    }
    #form .field label {
        font-size: 13px;
    }
    #form .submit .wrapper .submit__check label { 
        font-size: 13px;
    }
    #form .submit .button-wrapper button {
        font-size: 13px;
    }
    #form {
        padding: 0px;
    }
    .contact .text p {
        font-size: 16px;
    }
    .contact .button-wrapper button {
        font-size: 16px;
        border-radius: 15px;
        padding: 4px 40px 4px 40px;
    }
    #earthquake-left .image-crop {
        height: unset;
    }
    #earthquake .image-legend:first-child  {
        bottom: calc(7% + 32.9px);
        left: 8%;
    }
}

@media (max-width: 450px ) {
    .header-bottom p {
        font-size: 15px;
    }
    #intro h1 {
        font-size: 18px;
    }
    #earthquake-left p {
        font-size: 18px;
    }
    #earthquake h1 {
        text-underline-offset: 2px;
    }
    #form .submit .submit-wrapper .submit__check {
        display: flex;
    }
    #form .submit .submit-wrapper .submit__check label {
        font-size: 12px;
        display: flex;
    }
    .contact .button-wrapper button {
        padding: 4px 20px 4px 20px;
    }
}