/* Grid 
   ===================================*/

:root {
    --cp-grid-gutter: 1em;
}

.cp-grid {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--cp-grid-gutter));
    list-style: none;
}

.cp-grid>* {
    margin: 0;
}

.cp-grid>*> :last-child {
    margin-bottom: 0;
}

.cp-grid>* {
    padding-left: var(--cp-grid-gutter);
    padding-bottom: var(--cp-grid-gutter);
}

.cp-grid-small {
    --cp-grid-gutter: 0.5em;
}

.cp-grid-large {
    --cp-grid-gutter: 2em;
}

.cp-grid-collapse {
    margin-left: 0;
}

.cp-grid-collapse>* {
    --cp-grid-gutter: 0;
}

.cp-grid-match>*,
.cp-grid-item-match {
    display: flex;
    flex-wrap: wrap;
}

.cp-grid-match>*> :not([class*='cp-width']),
.cp-grid-item-match> :not([class*='cp-width']) {
    box-sizing: border-box;
    width: 100%;
    flex: auto;
}


/* Button 
   ===================================*/

:root {
    --cp-button-background: #000;
    --cp-button-color: #fff;
}

[class*="cp-button"] {
    border: 0;
    border-radius: 0;
    display: inline-block;
    background-color: var(--cp-button-background);
    color: var(--cp-button-color);
    font-size: 1em;
    cursor: pointer;
    padding: .6em 2em;
    line-height: inherit;
    text-decoration: none;
    text-align: center;
    appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.cp-button-outline {
    background: transparent;
    color: currentColor;
    border: 1px currentColor solid;
}

.cp-button-secondary {
    --cp-button-background: #fff;
    --cp-button-color: #000;
}

button[disabled],
input[disabled] {
    cursor: default
}


/* Display 
   ===================================*/

.cp-block {
    display: block !important
}

.cp-inline {
    display: inline !important
}

.cp-inline-block {
    display: inline-block !important
}


/* Position 
   ===================================*/

.cp-relative {
    position: relative !important
}

.cp-absolute {
    position: absolute !important
}

.cp-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* Float 
   ===================================*/

.cp-float-l {
    float: left !important
}

.cp-float-r {
    float: right !important
}

.cp-clearfix::before,
.cp-clearfix::after {
    content: " ";
    display: table;
}

.cp-clearfix::after {
    clear: both;
}


/* Alignment 
   ===================================*/

.cp-align-l {
    text-align: left !important
}

.cp-align-c {
    text-align: center !important
}

.cp-align-r {
    text-align: right !important
}

.cp-align-j {
    text-align: justify !important
}

.cp-align-s {
    text-align: start !important
}

.cp-align-e {
    text-align: end !important
}

.cp-align-m {
    vertical-align: middle !important
}

.cp-align-t {
    vertical-align: top !important
}

.cp-align-b {
    vertical-align: baseline !important
}

@media (max-width: 767px) {
    /* small */
    .cp-align-l\@s {
        text-align: left !important
    }
    .cp-align-c\@s {
        text-align: center !important
    }
    .cp-align-r\@s {
        text-align: right !important
    }
    .cp-align-j\@s {
        text-align: justify !important
    }
    .cp-align-s\@s {
        text-align: start !important
    }
    .cp-align-e\@s {
        text-align: end !important
    }
    .cp-align-m\@s {
        vertical-align: middle !important
    }
    .cp-align-t\@s {
        vertical-align: top !important
    }
    .cp-align-b\@s {
        vertical-align: baseline !important
    }
}

@media (min-width: 768px) {
    /* medium */
    .cp-align-l\@m {
        text-align: left !important
    }
    .cp-align-c\@m {
        text-align: center !important
    }
    .cp-align-r\@m {
        text-align: right !important
    }
    .cp-align-j\@m {
        text-align: justify !important
    }
    .cp-align-s\@m {
        text-align: start !important
    }
    .cp-align-e\@m {
        text-align: end !important
    }
    .cp-align-m\@m {
        vertical-align: middle !important
    }
    .cp-align-t\@m {
        vertical-align: top !important
    }
    .cp-align-b\@m {
        vertical-align: baseline !important
    }
}

@media (min-width: 1200px) {
    /* large */
    .cp-align-l\@l {
        text-align: left !important
    }
    .cp-align-c\@l {
        text-align: center !important
    }
    .cp-align-r\@l {
        text-align: right !important
    }
    .cp-align-j\@l {
        text-align: justify !important
    }
    .cp-align-s\@l {
        text-align: start !important
    }
    .cp-align-e\@l {
        text-align: end !important
    }
    .cp-align-m\@l {
        vertical-align: middle !important
    }
    .cp-align-t\@l {
        vertical-align: top !important
    }
    .cp-align-b\@l {
        vertical-align: baseline !important
    }
}

@media (min-width: 1600px) {
    .cp-align-l\@xl {
        text-align: left !important
    }
    .cp-align-c\@xl {
        text-align: center !important
    }
    .cp-align-r\@xl {
        text-align: right !important
    }
    .cp-align-j\@xl {
        text-align: justify !important
    }
    .cp-align-s\@xl {
        text-align: start !important
    }
    .cp-align-e\@xl {
        text-align: end !important
    }
    .cp-align-m\@xl {
        vertical-align: middle !important
    }
    .cp-align-t\@xl {
        vertical-align: top !important
    }
    .cp-align-b\@xl {
        vertical-align: baseline !important
    }
}


/* Spacing 
   ===================================*/

:root {
    --cp-spacing-small: 0.5em;
    --cp-spacing-medium: 2em;
    --cp-spacing-large: 4em;
}


/** margins **/

.cp-m {
    margin-bottom: var(--cp-spacing-medium)
}

*+.cp-m {
    margin-top: var(--cp-spacing-medium) !important
}

.cp-m-top {
    margin-top: var(--cp-spacing-medium) !important
}

.cp-m-bottom {
    margin-bottom: var(--cp-spacing-medium) !important
}

.cp-m-left {
    margin-left: var(--cp-spacing-medium) !important
}

.cp-m-right {
    margin-right: var(--cp-spacing-medium) !important
}

.cp-m-small {
    margin-bottom: var(--cp-spacing-small)
}

*+.cp-m-small {
    margin-top: var(--cp-spacing-small) !important
}

.cp-m-small-top {
    margin-top: var(--cp-spacing-small) !important
}

.cp-m-small-bottom {
    margin-bottom: var(--cp-spacing-small) !important
}

.cp-m-small-left {
    margin-left: var(--cp-spacing-small) !important
}

.cp-m-small-right {
    margin-right: var(--cp-spacing-small) !important
}

.cp-m-large {
    margin-bottom: var(--cp-spacing-large)
}

*+.cp-m-large {
    margin-top: var(--cp-spacing-large) !important
}

.cp-m-large-top {
    margin-top: var(--cp-spacing-large) !important
}

.cp-m-large-bottom {
    margin-bottom: var(--cp-spacing-large) !important
}

.cp-m-large-left {
    margin-left: var(--cp-spacing-large) !important
}

.cp-m-large-right {
    margin-right: var(--cp-spacing-large) !important
}

.cp-m-remove {
    margin: 0 !important
}

.cp-m-remove-top {
    margin-top: 0 !important
}

.cp-m-remove-bottom {
    margin-bottom: 0 !important
}

.cp-m-remove-left {
    margin-left: 0 !important
}

.cp-m-remove-right {
    margin-right: 0 !important
}

.cp-m-remove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cp-m-remove-adjacent+* {
    margin-top: 0 !important
}

.cp-m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}


/** paddings **/

.cp-p {
    padding: var(--cp-spacing)
}

.cp-p-small {
    padding: var(--cp-spacing-small) !important
}

.cp-p-large {
    padding: var(--cp-spacing-large) !important
}

.cp-p-remove {
    padding: 0 !important
}

.cp-p-remove-top {
    padding-top: 0 !important
}

.cp-p-remove-bottom {
    padding-bottom: 0 !important
}

.cp-p-remove-left {
    padding-left: 0 !important
}

.cp-p-remove-right {
    padding-right: 0 !important
}

.cp-p-remove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cp-p-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Size 
   ===================================*/

[class*="cp-child-w-"]>*,
[class*="cp-w-"] {
    box-sizing: border-box;
    width: 100%;
}

.cp-child-w-1-1>* {
    width: 100%
}

.cp-child-w-1-2>* {
    width: 50%
}

.cp-child-w-1-3>* {
    width: calc(100% * 1 / 3.001)
}

.cp-child-w-1-4>* {
    width: 25%
}

.cp-child-w-1-5>* {
    width: 20%
}

.cp-child-w-1-6>* {
    width: calc(100% * 1 / 6.001)
}

.cp-child-w-expand>* {
    width: 1px;
}

.cp-child-w-expand> :not([class*='cp-width']) {
    flex: 1;
}

@media (max-width: 767px) {
    /* small */
    .cp-child-w-1-1\@s >* {
        width: 100%
    }
    .cp-child-w-1-2\@s >* {
        width: 50%
    }
    .cp-child-w-1-3\@s >* {
        width: calc(100% * 1 / 3.001)
    }
    .cp-child-w-1-4\@s >* {
        width: 25%
    }
    .cp-child-w-1-5\@s >* {
        width: 20%
    }
    .cp-child-w-1-6\@s >* {
        width: calc(100% * 1 / 6.001)
    }
    .cp-child-w-auto\@s >* {
        width: auto
    }
    .cp-child-w-expand\@s >* {
        width: 1px
    }
    .cp-child-w-expand\@s > :not([class*="cp-w-"]) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 768px) {
    /* medium */
    .cp-child-w-1-1\@m >* {
        width: 100%
    }
    .cp-child-w-1-2\@m >* {
        width: 50%
    }
    .cp-child-w-1-3\@m >* {
        width: calc(100% * 1 / 3.001)
    }
    .cp-child-w-1-4\@m >* {
        width: 25%
    }
    .cp-child-w-1-5\@m >* {
        width: 20%
    }
    .cp-child-w-1-6\@m >* {
        width: calc(100% * 1 / 6.001)
    }
    .cp-child-w-auto\@m >* {
        width: auto
    }
    .cp-child-w-expand\@m >* {
        width: 1px
    }
    .cp-child-w-expand\@m > :not([class*="cp-w-"]) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 1200px) {
    /* large */
    .cp-child-w-1-1\@l >* {
        width: 100%
    }
    .cp-child-w-1-2\@l >* {
        width: 50%
    }
    .cp-child-w-1-3\@l >* {
        width: calc(100% * 1 / 3.001)
    }
    .cp-child-w-1-4\@l >* {
        width: 25%
    }
    .cp-child-w-1-5\@l >* {
        width: 20%
    }
    .cp-child-w-1-6\@l >* {
        width: calc(100% * 1 / 6.001)
    }
    .cp-child-w-auto\@l >* {
        width: auto
    }
    .cp-child-w-expand\@l >* {
        width: 1px
    }
    .cp-child-w-expand\@l > :not([class*="cp-w-"]) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 1600px) {
    .cp-child-w-1-1\@xl >* {
        width: 100%
    }
    .cp-child-w-1-2\@xl >* {
        width: 50%
    }
    .cp-child-w-1-3\@xl >* {
        width: calc(100% * 1 / 3.001)
    }
    .cp-child-w-1-4\@xl >* {
        width: 25%
    }
    .cp-child-w-1-5\@xl >* {
        width: 20%
    }
    .cp-child-w-1-6\@xl >* {
        width: calc(100% * 1 / 6.001)
    }
    .cp-child-w-auto\@xl >* {
        width: auto
    }
    .cp-child-w-expand\@xl >* {
        width: 1px
    }
    .cp-child-w-expand\@xl > :not([class*="cp-w-"]) {
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

.cp-w-1-1 {
    width: 100%
}

.cp-w-1-2 {
    width: 50%
}

.cp-w-1-3 {
    width: calc(100% * 1 / 3.001)
}

.cp-w-2-3 {
    width: calc(100% * 2 / 3.001)
}

.cp-w-1-4 {
    width: 25%
}

.cp-w-3-4 {
    width: 75%
}

.cp-w-1-5 {
    width: 20%
}

.cp-w-2-5 {
    width: 40%
}

.cp-w-3-5 {
    width: 60%
}

.cp-w-4-5 {
    width: 80%
}

.cp-w-1-6 {
    width: calc(100% * 1 / 6.001)
}

.cp-w-5-6 {
    width: calc(100% * 5 / 6.001)
}

.cp-w-auto {
    width: auto
}

.cp-w-expand {
    width: 1px;
    flex: 1;
    min-width: 0;
    flex-basis: 1px;
}

@media (min-width: 767px) {
    .cp-w-1-1\@s {
        width: 100%
    }
    .cp-w-1-2\@s {
        width: 50%
    }
    .cp-w-1-3\@s {
        width: calc(100% * 1 / 3.001)
    }
    .cp-w-2-3\@s {
        width: calc(100% * 2 / 3.001)
    }
    .cp-w-1-4\@s {
        width: 25%
    }
    .cp-w-3-4\@s {
        width: 75%
    }
    .cp-w-1-5\@s {
        width: 20%
    }
    .cp-w-2-5\@s {
        width: 40%
    }
    .cp-w-3-5\@s {
        width: 60%
    }
    .cp-w-4-5\@s {
        width: 80%
    }
    .cp-w-1-6\@s {
        width: calc(100% * 1 / 6.001)
    }
    .cp-w-5-6\@s {
        width: calc(100% * 5 / 6.001)
    }
    .cp-w-small\@s {
        width: @width-small-width
    }
    .cp-w-medium\@s {
        width: @width-medium-width
    }
    .cp-w-large\@s {
        width: @width-large-width
    }
    .cp-w-xlarge\@s {
        width: @width-xlarge-width
    }
    .cp-w-xxlarge\@s {
        width: @width-xxlarge-width
    }
    .cp-w-auto\@s {
        width: auto
    }
    .cp-w-expand\@s {
        width: 1px;
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 768px) {
    .cp-w-1-1\@m {
        width: 100%
    }
    .cp-w-1-2\@m {
        width: 50%
    }
    .cp-w-1-3\@m {
        width: calc(100% * 1 / 3.001)
    }
    .cp-w-2-3\@m {
        width: calc(100% * 2 / 3.001)
    }
    .cp-w-1-4\@m {
        width: 25%
    }
    .cp-w-3-4\@m {
        width: 75%
    }
    .cp-w-1-5\@m {
        width: 20%
    }
    .cp-w-2-5\@m {
        width: 40%
    }
    .cp-w-3-5\@m {
        width: 60%
    }
    .cp-w-4-5\@m {
        width: 80%
    }
    .cp-w-1-6\@m {
        width: calc(100% * 1 / 6.001)
    }
    .cp-w-5-6\@m {
        width: calc(100% * 5 / 6.001)
    }
    /* Auto */
    .cp-w-auto\@m {
        width: auto
    }
    .cp-w-expand\@m {
        width: 1px;
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 1200px) {
    .cp-w-1-1\@l {
        width: 100%
    }
    .cp-w-1-2\@l {
        width: 50%
    }
    .cp-w-1-3\@l {
        width: calc(100% * 1 / 3.001)
    }
    .cp-w-2-3\@l {
        width: calc(100% * 2 / 3.001)
    }
    .cp-w-1-4\@l {
        width: 25%
    }
    .cp-w-3-4\@l {
        width: 75%
    }
    .cp-w-1-5\@l {
        width: 20%
    }
    .cp-w-2-5\@l {
        width: 40%
    }
    .cp-w-3-5\@l {
        width: 60%
    }
    .cp-w-4-5\@l {
        width: 80%
    }
    .cp-w-1-6\@l {
        width: calc(100% * 1 / 6.001)
    }
    .cp-w-5-6\@l {
        width: calc(100% * 5 / 6.001)
    }
    .cp-w-auto\@l {
        width: auto
    }
    .cp-w-expand\@l {
        width: 1px;
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

@media (min-width: 1600px) {
    .cp-w-1-1\@xl {
        width: 100%
    }
    .cp-w-1-2\@xl {
        width: 50%
    }
    .cp-w-1-3\@xl {
        width: calc(100% * 1 / 3.001)
    }
    .cp-w-2-3\@xl {
        width: calc(100% * 2 / 3.001)
    }
    .cp-w-1-4\@xl {
        width: 25%
    }
    .cp-w-3-4\@xl {
        width: 75%
    }
    .cp-w-1-5\@xl {
        width: 20%
    }
    .cp-w-2-5\@xl {
        width: 40%
    }
    .cp-w-3-5\@xl {
        width: 60%
    }
    .cp-w-4-5\@xl {
        width: 80%
    }
    .cp-w-1-6\@xl {
        width: calc(100% * 1 / 6.001)
    }
    .cp-w-5-6\@xl {
        width: calc(100% * 5 / 6.001)
    }
    .cp-w-auto\@xl {
        width: auto
    }
    .cp-w-expand\@xl {
        width: 1px;
        flex: 1;
        min-width: 0;
        flex-basis: 1px;
    }
}

.cp-h-vp {
    min-height: 100vh
}

.cp-h-vp-1-2 {
    min-height: 50vh
}

.cp-h-vp-1-3 {
    min-height: 33vh
}

.cp-h-vp-2-3 {
    min-height: 66vh
}

.cp-h-vp-3-4 {
    min-height: 75vh
}


/* Flex 
   ===================================*/

.cp-flex {
    display: flex !important
}

.cp-flex-inline {
    display: inline-flex !important
}

.cp-flex::before,
.cp-flex::after,
.cp-flex-inline::before,
.cp-flex-inline::after {
    display: none
}

.cp-flex-left {
    justify-content: flex-start
}

.cp-flex-center {
    justify-content: center
}

.cp-flex-right {
    justify-content: flex-end
}

.cp-flex-between {
    justify-content: space-between
}

.cp-flex-around {
    justify-content: space-around
}

.cp-flex-auto {
    flex: auto
}

.cp-flex-expand {
    flex: 1
}

.cp-flex-top {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.cp-flex-middle {
    align-items: center
}

.cp-flex-bottom {
    align-items: flex-end
}

.cp-flex-row {
    flex-direction: row
}

.cp-flex-column {
    flex-direction: column
}

.cp-flex-first {
    order: -1;
}

.cp-flex-last {
    order: 99;
}


/* Visibility 
   ===================================*/

[hidden],
.cp-hidden {
    display: none !important;
}

.cp-invisible {
    visibility: hidden !important;
}


/* Phone landscape and bigger */

@media (min-width: 640px) {
    .cp-hidden\@s {
        display: none !important;
    }
}


/* Tablet landscape and bigger */

@media (min-width: 960px) {
    .cp-hidden\@m {
        display: none !important;
    }
}


/* Desktop and bigger */

@media (min-width: 1200px) {
    .cp-hidden\@l {
        display: none !important;
    }
}


/* Large screen and bigger */

@media (min-width: 1600px) {
    .cp-hidden\@xl {
        display: none !important;
    }
}


/*
 * Visible
 */


/* Phone portrait and smaller */

@media (max-width: 639px) {
    .cp-visible\@s {
        display: none !important;
    }
}


/* Phone landscape and smaller */

@media (max-width: 959px) {
    .cp-visible\@m {
        display: none !important;
    }
}


/* Tablet landscape and smaller */

@media (max-width: 1199px) {
    .cp-visible\@l {
        display: none !important;
    }
}


/* Desktop and smaller */

@media (max-width: 1599px) {
    .cp-visible\@xl {
        display: none !important;
    }
}

.cp-hidden-notouch {
    display: none !important;
}

@media (pointer: coarse) {
    .cp-hidden-notouch {
        display: block !important;
    }
    .cp-hidden-touch {
        display: none !important;
    }
}