.container {
    width: 100%; max-width:1500px;
    box-sizing: border-box;
    margin: 0 auto;
    left:0; right:0;
}

.container-fluid {
    width: 100% !important;
    box-sizing: border-box;
}

.row {
    --cp-gutter-x: 24px !important;
    --cp-gutter-y: 0 !important;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--cp-gutter-y)) !important;
    margin-right: calc(var(--cp-gutter-x) * -.5) !important;
    margin-left: calc(var(--cp-gutter-x) * -.5) !important;
}

.row>* {
    flex-shrink:0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--cp-gutter-x) *.5 );
    padding-left: calc(var(--cp-gutter-x) *.5 );
    margin-top: var(--cp-gutter-y);
}

.gx-0 { --cp-gutter-x:0 !important;}

.ratio-1-1 {aspect-ratio: 1/1 !important;}
.ratio-1-25 {aspect-ratio: 1.25/1 !important;}
.ratio-16-9 {aspect-ratio: 16/9 !important;}
.ratio-3-4 {aspect-ratio: 3/4 !important;}
.ratio-9-6 {aspect-ratio: 9/6 !important;}
.ratio-0-5 {aspect-ratio: 2/1 !important;}

.btn { border:0;
    display:inline-block;
    font-weight:bold;
    border-radius:5px; cursor: pointer; padding: 5px 10px 5px 10px;
    color:white;
    background-color: #0050a0;
    -webkit-transition: background-color .1s ease-out, font-size .2s ease-out;
    -moz-transition: background-color .1s ease-out, font-size .2s ease-out;
    -o-transition: background-color .1s ease-out, font-size .2s ease-out;
    transition: background-color .1s ease-out, font-size .2s ease-out;
}

.btn:hover { color:white; background-color:#0090e0; }
.btn-lg { font-size:1.2em !important; padding: 10px 20px 10px 20px !important; }

.w-20 {width:20% !important;}
.w-25 {width:25% !important;}
.w-33 {width:33.33% !important;}
.w-40 {width:40% !important;}
.w-50 {width:50% !important;}
.w-60 {width:60% !important;}
.w-75 {width:75% !important;}
.w-80 {width:80% !important;}
.w-100 {width:100% !important;}

.h-20 {height:20% !important;}
.h-25 {height:25% !important;}
.h-33 {height:33.33% !important;}
.h-40 {height:40% !important;}
.h-50 {height:50% !important;}
.h-60 {height:60% !important;}
.h-75 {height:75% !important;}
.h-80 {height:80% !important;}
.h-100 {height:100% !important;}

.col { flex: 0 0 auto; width: 100% !important; padding-left: .75rem !important; padding-right: .75rem !important;}
.col-5p { flex: 0 0 auto; width: 5% !important; padding-left: .75rem; padding-right: .75rem;}
.col-10p { flex: 0 0 auto; width: 10% !important; padding-left: .75rem; padding-right: .75rem; }
.col-15p { flex: 0 0 auto; width: 15% !important; padding-left: .75rem; padding-right: .75rem; }
.col-20p { flex: 0 0 auto; width: 20% !important; padding-left: .75rem; padding-right: .75rem; }
.col-25p { flex: 0 0 auto; width: 25% !important; padding-left: .75rem; padding-right: .75rem;}
.col-30p { flex: 0 0 auto; width: 30% !important; padding-left: .75rem; padding-right: .75rem;}
.col-33p { flex: 0 0 auto; width: 33.3333% !important; padding-left: .75rem; padding-right: .75rem;}
.col-35p { flex: 0 0 auto; width: 35% !important; padding-left: .75rem; padding-right: .75rem; }
.col-40p { flex: 0 0 auto; width: 40% !important; padding-left: .75rem; padding-right: .75rem; }
.col-45p { flex: 0 0 auto; width: 45% !important; padding-left: .75rem; padding-right: .75rem; }
.col-50p { flex: 0 0 auto; width: 50% !important; padding-left: .75rem; padding-right: .75rem;}
.col-55p { flex: 0 0 auto; width: 55% !important; padding-left: .75rem; padding-right: .75rem; }
.col-60p { flex: 0 0 auto; width: 60% !important; padding-left: .75rem; padding-right: .75rem; }
.col-65p { flex: 0 0 auto; width: 65% !important; padding-left: .75rem; padding-right: .75rem; }
.col-70p { flex: 0 0 auto; width: 70% !important; padding-left: .75rem; padding-right: .75rem; }
.col-75p { flex: 0 0 auto; width: 75% !important; padding-left: .75rem; padding-right: .75rem; }
.col-80p { flex: 0 0 auto; width: 80% !important; padding-left: .75rem; padding-right: .75rem; }
.col-85p { flex: 0 0 auto; width: 85% !important; padding-left: .75rem; padding-right: .75rem; }
.col-90p { flex: 0 0 auto; width: 90% !important; padding-left: .75rem; padding-right: .75rem; }
.col-95p { flex: 0 0 auto; width: 95% !important; padding-left: .75rem; padding-right: .75rem; }



.mx-auto {margin-right: auto; margin-left:auto;}

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--c-particle); margin-bottom: var(--c-particle); }
.my-2 { margin-top: calc(2*var(--c-particle)); margin-bottom: calc(2*var(--c-particle)); }
.my-3 { margin-top: calc(3*var(--c-particle)); margin-bottom: calc(3*var(--c-particle)); }
.my-4 { margin-top: calc(5*var(--c-particle)); margin-bottom: calc(5*var(--c-particle)); }
.my-5 { margin-top: calc(7.5*var(--c-particle)); margin-bottom: calc(7.5*var(--c-particle)); }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-0-5 { margin-left: calc(var(--c-particle)*0.5); margin-right: calc(var(--c-particle)*0.5); }
.mx-1 { margin-left: var(--c-particle); margin-right: var(--c-particle); }
.mx-2 { margin-left: calc(2*var(--c-particle)); margin-right: calc(2*var(--c-particle)); }
.mx-3 { margin-left: calc(3*var(--c-particle)); margin-right: calc(3*var(--c-particle)); }
.mx-4 { margin-left: calc(5*var(--c-particle)); margin-right: calc(5*var(--c-particle)); }
.mx-5 { margin-left: calc(7.5*var(--c-particle)); margin-right: calc(7.5*var(--c-particle)); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--c-particle); }
.mt-2 { margin-top: calc(2*var(--c-particle)); }
.mt-3 { margin-top: calc(3*var(--c-particle)); }
.mt-4 { margin-top: calc(5*var(--c-particle)); }
.mt-5 { margin-top: calc(7.5*var(--c-particle)); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--c-particle); }
.mb-2 { margin-bottom: calc(2*var(--c-particle)); }
.mb-3 { margin-bottom: calc(3*var(--c-particle)); }
.mb-4 { margin-bottom: calc(5*var(--c-particle)); }
.mb-5 { margin-bottom: calc(7.5*var(--c-particle)); }

.p-0 { padding: 0 !important;}
.p-0-5 { padding: calc(var(--spacer-x)*0.5) !important; }
.p-1 { padding: calc(var(--spacer-x)*1) !important; }
.p-2 { padding: calc(var(--spacer-x)*2) !important; }
.p-3 { padding: calc(var(--spacer-x)*3) !important; }
.p-4 { padding: calc(var(--spacer-x)*4) !important; }
.p-5 { padding: calc(var(--spacer-x)*5) !important; }


.px-0 { padding-right: 0 !important; padding-left: 0 !important;}
.px-1 { padding-right: calc(var(--spacer-x)*1) !important; padding-left: calc(var(--spacer-x)*1) !important;}
.px-2 { padding-right: calc(var(--spacer-x)*2) !important; padding-left: calc(var(--spacer-x)*2) !important;}
.px-3 { padding-right: calc(var(--spacer-x)*3) !important; padding-left: calc(var(--spacer-x)*3) !important;}
.px-4 { padding-right: calc(var(--spacer-x)*4) !important; padding-left: calc(var(--spacer-x)*4) !important;}
.px-5 { padding-right: calc(var(--spacer-x)*5) !important; padding-left: calc(var(--spacer-x)*5) !important;}

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important;}
.py-1 { padding-top: calc(var(--spacer-x)*1) !important; padding-bottom: calc(var(--spacer-x)*1) !important;}
.py-2 { padding-top: calc(var(--spacer-x)*2) !important; padding-bottom: calc(var(--spacer-x)*2) !important;}
.py-3 { padding-top: calc(var(--spacer-x)*3) !important; padding-bottom: calc(var(--spacer-x)*3) !important;}
.py-4 { padding-top: calc(var(--spacer-x)*4) !important; padding-bottom: calc(var(--spacer-x)*4) !important;}
.py-5 { padding-top: calc(var(--spacer-x)*5) !important; padding-bottom: calc(var(--spacer-x)*5) !important;}

.ps-0 { padding-left: 0 !important;}
.ps-1 { padding-left: calc(var(--spacer-x)*1) !important;}
.ps-2 { padding-left: calc(var(--spacer-x)*2) !important;}
.ps-3 { padding-left: calc(var(--spacer-x)*3) !important;}
.ps-4 { padding-left: calc(var(--spacer-x)*4) !important;}
.ps-5 { padding-left: calc(var(--spacer-x)*5) !important;}


.pe-0 { padding-right: 0 !important;}
.pe-1 { padding-right: calc(var(--spacer-x)*1) !important;}
.pe-2 { padding-right: calc(var(--spacer-x)*2) !important;}
.pe-3 { padding-right: calc(var(--spacer-x)*3) !important;}
.pe-4 { padding-right: calc(var(--spacer-x)*4) !important;}
.pe-5 { padding-right: calc(var(--spacer-x)*5) !important;}

.pt-0 { padding-top: 0 !important;}
.pt-1 { padding-top: calc(var(--spacer-x)*1) !important;}
.pt-2 { padding-top: calc(var(--spacer-x)*2) !important;}
.pt-3 { padding-top: calc(var(--spacer-x)*3) !important;}
.pt-4 { padding-top: calc(var(--spacer-x)*4) !important;}
.pt-5 { padding-top: calc(var(--spacer-x)*5) !important;}

.pb-0 { padding-bottom: 0 !important;}
.pb-1 { padding-bottom: calc(var(--spacer-x)*1) !important;}
.pb-2 { padding-bottom: calc(var(--spacer-x)*2) !important;}
.pb-3 { padding-bottom: calc(var(--spacer-x)*3) !important;}
.pb-4 { padding-bottom: calc(var(--spacer-x)*4) !important;}
.pb-5 { padding-bottom: calc(var(--spacer-x)*5) !important;}