/* Base space attributes */
.base-space {
    height: auto;
    position: relative;
}
.space-nowrap {
    flex-wrap: nowrap;
    display: flex;
}
.space-wrap {
    flex-wrap: wrap;
    display: flex;
}

.space-center {
    margin: auto;
}





/* DYNAMIC SPACES*/
/* Space 100 uses the whole browser width */
.space-100 {
    width: 100%;
    /*background-color: rgb(0, 0, 0);  remove */
}
/* Space 50 uses 50% of the browser width */
.space-50 {
    width: 50%;
}
/* Space 33 uses 33% of the browser width */
.space-33 {
    width: 33.33%;
   /* background-color: rgb(255, 66, 246);  remove */
}
/* Space 25 uses 25% of the browser width */
.space-25 {
    width: 25%;
}

/* FIX SPACES*/
/* Space 1920 uses a HD browser width */
.space-1920 {
    width: 1920px;
    background-color: rgb(160, 255, 239); /* remove */
}
/* Space 960 uses 1/2 HD browser width */
.space-960 {
    width: 960px;
}
/* Space 640 uses a 1/3 HD browser width */
.space-640 {
    width: 640px;
    background-color: rgb(250, 136, 244); /* remove */
}
/* Space 480 uses a 1/4 HD browser width */
.space-480 {
    width: 480px;
    background-color: #0D0D0D; /* remove */
}



/* COMP SPACES*/
/* Space-100-1920 subtract 1920px of 100%  */
.space-100-1920 {
    width: calc(100% - 1920px);
}
/* Space-100-1440 subtract 1440px of 100%  */
.space-100-1440 {
    width: calc(100% - 1440px);
}
/* Space-100-1280 subtract 1280px of 100%  */
.space-100-1280 {
    width: calc(100% - 1280px);
}
/* Space-100-960 subtract 960px of 100%  */
.space-100-960 {
    width: calc(100% - 960px);
}
/* Space-100-640 subtract 640px of 100%  */
.space-100-640 {
    width: calc(100% - 640px);
}
/* Space-100-480 subtract 480px of 100%  */
.space-100-480 {
    width: calc(100% - 480px);
}
/* Space-480-75 subtract 480px of 75%  */
.space-480-75 {
    width: calc(75% - 480px);
}


/* MEDIA */
@media (max-width: 1024px) {
    .space-50 {
        width: 100%;
    }
    }
@media (max-width: 1080px) {
    .space-33 {
        width: 100%;
    }
}
@media (max-width: 640px) {
 
}