/*Section width*/

.container-full-width {
    width: 100%;
    max-width: 2500px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width {
    width: 100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width-wide {
    width: 100%;
    max-width: 1440px;
    margin-left:auto;
    margin-right:auto;
}

.container-page-width-small {
    width: 100%;
    max-width: 900px;
    margin-left:auto;
    margin-right:auto;
}


/*Section styling*/
.container-flex-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
}

.flex--center {
    display: flex;
    justify-content: center;
}
.flex--left {
    display: flex;
    justify-content: flex-start;
}
.flex--right {
    display: flex;
    justify-content: flex-end;
}
.flex--top {
    display: flex;
    align-items: flex-start;
}
.flex-bottom {
    display: flex;
    align-items: flex-end;
}
.flex--middle {
    display: flex;
    align-items: center;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media only screen and (min-width: 992px) {
        :root {
        --container-width: 960px;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --container-width: 1140px;
    }
}

@media only screen and (min-width: 1400px) {
    :root {
        --container-width: 1320px;
    }
}

@media only screen and (min-width: 1700px) {

    :root {
        --container-width: 1640px;
    }

    .container-wide {
        max-width: var(--container-width);
    }
}