@font-face {
    font-family: Minion Pro Regular;
    src: url(../fonts/MinionPro-Regular.otf);
}

h3 {
    font-size: 1.2rem;
    margin: 1rem 0;
}

a {
    color: #000;
}

a:hover {
    color: #5FA3D4;
}

body {
    font-size: 13px;
    font-family: 'Minion Pro Regular ', sans-serif;
}

.layout-flex-basic {
    display: flex;
    align-items: flex-end;
}

.left-col {
    align-self: flex-start;
}

.right-col {
    align-self: flex-start;
    max-width: 700px;
    margin: 4rem 2rem;
}

.txt-note {
    font-size: 10px;
    padding: 0 1rem 1rem;
   
    text-align: center;
}

#buttom-image {
    max-width: fit-content;
    margin: auto;
}

.block-title {
    margin: 20px 0;
}

#logo-in {
    max-width: 200px;
    margin-top: 30px;
}

.center-flex-basic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content {
    align-self: center;
    width: 900px;
    margin-bottom: 30px;
}

/* --- footer --- */

.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 10px auto;
    max-width: 920px;
}

.column {
    flex: 1;
    padding: 10px;
    &:first-child {
        margin-left: 0;
    }
    &:last-child {
        margin-right: 0;
    }
}

#column-1 {
    text-align: center;
}

#column-2 {
    margin-right: 2%;
}

#column-3 {
    text-align: right;
}

#central-footer-container {
    max-width: 200px;
}

footer {
    font-size: 11px;
    padding: 0 15px;
    background-color: #f8f8f7;
    border: 1px solid #DEE2E6;
}

#copyright-text {
    text-align: center;
    margin-top: 20px;
}

@media screen and (max-width: 980px) {
    .columns .column {
        margin-bottom: 5px;
        flex-basis: 40%;
        &:nth-last-child(2) {
            margin-right: 0;
        }
        &:last-child {
            flex-basis: 100%;
            margin: 0;
        }
    }
    .main-content {
        padding: 0 2%;
    }
}

@media screen and (max-width: 680px) {
    .columns .column {
        flex-basis: 100%;
        margin: 0 0 5px 0;
    }
    #column-3 {
        text-align: left;
    }
}

@media screen and (max-width:50em) {
    .layout-flex-basic {
        flex-wrap: wrap;
        /* allow two rows */
        justify-content: space-between;
        /* move the images to opposite ends of their row */
    }
    .layout-flex-basic {
        flex: 1 0 100%;
        /* make it wrap to its own line */
        order: 1;
        /* move to the end */
        margin-bottom: 0;
        border-bottom: none;
        border-top: 1px solid #ccc;
    }
    .layout-flex-basic .small {
        order: 0;
        /* move back to its normal spot */
    }
    .left-col {
        order: 2;
    }
    .right-col {
        order: 1;
    }
}