/* ========== FLEX-DIRECTION START ========== */
.row-10,.row-01,.row-010,.row-101,.row-01010{display: flex;flex-direction: row;align-items: center}
.col-10,.col-01,.col-010,.col-101,.col-01010{display: flex;flex-direction: column;align-items: center}
/* ========== FLEX-DIRECTION END ==========*/



/* ========== JUSTIFY-CONTENT START ==========*/
.row-10,.col-10{justify-content: flex-start}
.row-01,.col-01{justify-content: flex-end}
.row-010,.col-010{justify-content: center}
.row-101,.col-101{justify-content: space-between}
.row-01010,.col-01010{justify-content: space-around}
/* ========== JUSTIFY-CONTENT END ==========*/



/* ========== ALIGN-ITEMS START ==========*/ 
.-top,.-left{align-items: flex-start}
.-bot,.-right{align-items: flex-end}
.-line{align-items: baseline}
.-stretch{align-items: stretch}
/* ========== ALIGN-ITEMS END ==========*/ 



/* ========== FLEX-WRAP + ALIGN-CONTENT START ==========*/
.wrap-10 {flex-wrap: wrap;align-content: flex-start}
.wrap-01 {flex-wrap: wrap;align-content: flex-end}
.wrap-010 {flex-wrap: wrap;align-content: center}
.wrap-101 {flex-wrap: wrap;align-content: space-between}
.wrap-01010 {flex-wrap: wrap;align-content: space-around}
/* ========== FLEX-WRAP + ALIGN-CONTENT END ==========*/







/*GRID SYSTEM START*/

.gap-1 {margin: -.1rem 0 0 -.1rem;}
.gap-2 {margin: -.25rem 0 0 -.25rem;}
.gap-3 {margin: -.5rem 0 0 -.5rem;}
.gap-4 {margin: -1rem 0 0 -1rem;}
.gap-5 {margin: -1.5rem 0 0 -1.5rem;}
.gap-6 {margin: -2rem 0 0 -2rem;}

.gap-1 > * {padding: .1rem 0 0 .1rem;}
.gap-2 > * {padding: .25rem 0 0 .25rem;}
.gap-3 > * {padding: .5rem 0 0 .5rem;}
.gap-4 > * {padding: 1rem 0 0 1rem;}
.gap-5 > * {padding: 1.5rem 0 0 1.5rem;}
.gap-6 > * {padding: 2rem 0 0 2rem;}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12{
    width:100%;
}

.grid-1  > * {width:  100%;}
.grid-2  > * {width: 50%;}
.grid-3  > * {width: 33.333%;}
.grid-4  > * {width: 25%;}
.grid-5  > * {width: 20%;}
.grid-6  > * {width: 16.666%;}
.grid-7  > * {width: 14.285%;}
.grid-8  > * {width: 12.5%;}
.grid-9  > * {width: 11.111%;}
.grid-10 > * {width: 10%;}
.grid-11 > * {width: 9.091%;}
.grid-12 > * {width: 8.333%;}


@media (max-width: 1000px) {

    .GAP-1 {margin: -.1rem 0 0 -.1rem;}
    .GAP-2 {margin: -.25rem 0 0 -.25rem;}
    .GAP-3 {margin: -.5rem 0 0 -.5rem;}
    .GAP-4 {margin: -1rem 0 0 -1rem;}
    .GAP-5 {margin: -1.5rem 0 0 -1.5rem;}
    .GAP-6 {margin: -2rem 0 0 -2rem;}

    .GAP-1 > * {padding: .1rem 0 0 .1rem;}
    .GAP-2 > * {padding: .25rem 0 0 .25rem;}
    .GAP-3 > * {padding: .5rem 0 0 .5rem;}
    .GAP-4 > * {padding: 1rem 0 0 1rem;}
    .GAP-5 > * {padding: 1.5rem 0 0 1.5rem;}
    .GAP-6 > * {padding: 2rem 0 0 2rem;}


    .GRID-1  > * {width:  100%;}
    .GRID-2  > * {width: 50%;}
    .GRID-3  > * {width: 33.333%;}
    .GRID-4  > * {width: 25%;}
    .GRID-5  > * {width: 20%;}
    .GRID-6  > * {width: 16.666%;}
    .GRID-7  > * {width: 14.285%;}
    .GRID-8  > * {width: 12.5%;}
    .GRID-9  > * {width: 11.111%;}
    .GRID-10 > * {width: 10%;}
    .GRID-11 > * {width: 9.091%;}
    .GRID-12 > * {width: 8.333%;}

}

/*GRID SYSTEM END*/









.SpaceApp:hover {
    -webkit-animation:SpaceApp 1s infinite;
    -ms-animation:SpaceApp 1s infinite;
    -o-animation:SpaceApp 1s infinite;
    animation:SpaceApp 1s infinite;
}

@keyframes SpaceApp {
    0% {color: #ff0000;}
    10% {color: #ff8000;}
    20% {color: #ffff00;}
    30% {color: #80ff00;}
    40% {color: #00ff00;}
    50% {color: #00ff80;}
    60% {color: #00ffff;}
    70% {color: #0080ff;}
    80% {color: #0000ff;}
    90% {color: #8000ff;}
    100% {color: #ff0080;}
}



.-helper,.-helper * {
    outline: 1px dashed rgba(255, 0, 0, 0.2);
}





body > *,
.-short{
    width: 100%;
    max-width:1000px;
    min-width:300px;
}

.-wide{
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}


[grid]{
    height: 100%;
}




.-img{
    background: no-repeat center;
}

.-img2{
    background: no-repeat center / contain;
}

.-img3 {
    background-position: center;
    background-size: cover;
}

.-imgA > img{
    width:100%;
}

.-parallax{
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.-flowCenter{
    left: 0px;
    right: 0px;
    margin:auto;
}



.overflowY{
    overflow-y: hidden;
}

.overflowYA{
    overflow-y: auto;
}

.overflowX{
    overflow-x: hidden;
}

.overflowXA{
    overflow-x: auto;
}





@media (hover: none) {
    .-parallax {
        background-attachment: scroll!important;
    }
}