/* Colors */
.base-color {background-color: rgb(44, 62, 80);}
.theme-color {background-color: rgb(41, 128, 185);}
.accent-color {background-color: rgb(231, 76, 60);}
.bg-red {background: #f84535;}
.bg-green {background: #2fb828;}
.bg-blue {background: #1766c8;}
.bg-yellow {background: #d1ca08;}
.bg-purple {background: #58048d;}
.bg-orange {background: #ad6904;}
.bg-pink {background: #e232c1;}
.bg-teal {background: #069783de;}

/* ==========================================
   Background-Image Utilities
   ========================================== */
.bg-hero        { background-image: url('../assets/images/pat.jpg'); }
.bg-pattern     { background-image: url('../assets/images/floral.jpg'); }
.bg-profile     { background-image: url('../assets/images/paris.jpg'); }
.bg-no-repeat   { background-repeat: no-repeat; }
.bg-repeat      { background-repeat: repeat; }
.bg-cover       { background-size: cover; }
.bg-contain     { background-size: contain; }
.bg-center      { background-position: center center; }
.bg-top         { background-position: top center; }
.bg-bottom      { background-position: bottom center; }
.bg-left        { background-position: center left; }
.bg-right       { background-position: center right; }

/* DIFFERENT HEIGHTS */
.h20 {height: 20%;}
.h30 {height: 30%;}
.h40 {height: 40%;}
.h50 {height: 50%;}
.h60 {height: 60%;}
.h70 {height: 70%;}
.h80 {height: 80%;}
.h90 {height: 90%;}
.h100 {height: 100%;}