/*
Project Name : Simui
Description : Simui Pure CSS/JS Web dev frontend Framework
Autho : Siphamandla Mbokazi
Version : v1.0
Licence : MIT Open Source
*/
.su-align__center,.su-align__center--center{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__center--top{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__center--bottom{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-align__left,.su-align__left--top{display:-ms-grid;display:grid;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__left--center{display:-ms-grid;display:grid;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__left--bottom{display:-ms-grid;display:grid;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-align__space-between,.su-align__space-between--top{display:-ms-grid;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__space-between--center{display:-ms-grid;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__space-between--bottom{display:-ms-grid;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-align__space-around,.su-align__space-around--top{display:-ms-grid;display:grid;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__space-around--center{display:-ms-grid;display:grid;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__space-around--bottom{display:-ms-grid;display:grid;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-align__space-evenly,.su-align__space-evenly--top{display:-ms-grid;display:grid;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__space-evenly--center{display:-ms-grid;display:grid;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__space-evenly--bottom{display:-ms-grid;display:grid;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-align__right,.su-align__right--top{display:-ms-grid;display:grid;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-ms-flex-line-pack:start;align-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.su-align__right--center{display:-ms-grid;display:grid;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.su-align__right--bottom{display:-ms-grid;display:grid;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-ms-flex-line-pack:end;align-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.su-background{background-attachment:scroll;background-position:center;background-repeat:no-repeat;background-size:cover}.su-background--fixed{background-attachment:fixed}.su-background--repeat{background-repeat:repeat}.su-background--repeat-x{background-repeat:repeat-x}.su-background--repeat-y{background-repeat:repeat-y}.su-background--contain{background-size:contain}.su-slide-button{position:relative;border:1px solid #333;color:#333}.su-slide-button::after{position:absolute;content:'';top:0;left:0;bottom:0;right:0;width:0;-webkit-transition:all 300ms linear;-o-transition:all 300ms linear;transition:all 300ms linear;background:blue}.su-slide-button:hover::after{width:100%}:root{--color-white:#fefefe;--color-black:#333;--color-primary:#80a3b1;--color-secondary:#7812ff}.su-background-color--primary{background-color:var(--color-primary)}.su-background-color--secondary{background-color:var(--color-secondary)}.su-color--primary *{color:var(--color-primary)}.su-color--secondary *{color:var(--color-secondary)}.su-background-color--black{background-color:var(--color-black)}.su-color--black *{color:var(--color-black)}.su-background-color--white{background-color:var(--color-white)}.su-color--white *{color:var(--color-white)}.su-display--none{display:none}.su-display--block{display:block}.su-display--grid{display:-ms-grid;display:grid}.su-display--flex{display:-webkit-box;display:-ms-flexbox;display:flex}.su-display--inline{display:inline}.su-display--inline-block{display:inline-block}.su-dropdown,.su-slide-toggle{position:relative;overflow-y:auto;overflow-x:hidden}.su-dropdown>.su-dropdown__content,.su-dropdown>.su-dropdown__content--x,.su-dropdown>.su-dropdown__content--y,.su-slide-toggle>.su-slide-toggle__content,.su-slide-toggle>.su-slide-toggle__content--x,.su-slide-toggle>.su-slide-toggle__content--y{position:absolute;left:0;top:100%;width:100%;overflow-y:auto;-webkit-transition:all 500ms linear;-o-transition:all 500ms linear;transition:all 500ms linear}.su-slide-toggle>.su-slide-toggle__content,.su-slide-toggle>.su-slide-toggle__content--x,.su-slide-toggle>.su-slide-toggle__content--y{top:0%}.su-dropdown>.su-dropdown__content--x,.su-slide-toggle>.su-slide-toggle__content--x{-webkit-transform:translateX(-300%);-ms-transform:translateX(-300%);transform:translateX(-300%)}.su-dropdown>.su-dropdown__content--y,.su-slide-toggle>.su-slide-toggle__content--y{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.su-dropdown:hover>.su-dropdown__content,.su-dropdown:hover>.su-dropdown__content--x,.su-dropdown:hover>.su-dropdown__content--y,.su-slide-toggle:hover .su-slide-toggle__content--y,.su-slide-toggle:hover .su-slide-toggle__content--x,.su-slide-toggle:hover .su-slide-toggle__content{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.su-grid--fr1{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}.su-grid--fr2{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}.su-grid--fr3{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}.su-grid--fr4{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}.su-grid--fr5{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}.su-grid--fr6{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}.su-grid--fr7{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}.su-grid--fr8{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}.su-grid--fr9{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}.su-grid--fr10{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}.su-grid--fr11{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}.su-grid--fr12{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}.su-grid--a1{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[1];grid-template-columns:repeat(1,auto)}.su-grid--a2{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[2];grid-template-columns:repeat(2,auto)}.su-grid--a3{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[3];grid-template-columns:repeat(3,auto)}.su-grid--a4{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[4];grid-template-columns:repeat(4,auto)}.su-grid--a5{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[5];grid-template-columns:repeat(5,auto)}.su-grid--a6{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[6];grid-template-columns:repeat(6,auto)}.su-grid--a7{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[7];grid-template-columns:repeat(7,auto)}.su-grid--a8{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[8];grid-template-columns:repeat(8,auto)}.su-grid--a9{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[9];grid-template-columns:repeat(9,auto)}.su-grid--a10{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[10];grid-template-columns:repeat(10,auto)}.su-grid--a11{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[11];grid-template-columns:repeat(11,auto)}.su-grid--a12{display:-ms-grid;display:grid;-ms-grid-columns:(auto)[12];grid-template-columns:repeat(12,auto)}.su-image--full-width{width:100%;height:auto;display:block}.su-order--1st img{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}picture img{width:100%}.su-max-width{margin:auto}.su-max-width--left{margin:auto;margin-left:0}.su-max-width--right{margin:auto;margin-right:0}.su-max-widthfull{max-width:100%;margin:auto}.su-max-widthfull--left{max-width:100%;margin:auto;margin-left:0}.su-max-widthfull--right{max-width:100%;margin:auto;margin-right:0}.su-max-width600px{max-width:600px;margin:auto}.su-max-width600px--left{max-width:600px;margin:auto;margin-left:0}.su-max-width600px--right{max-width:600px;margin:auto;margin-right:0}.su-max-width700px{max-width:700px;margin:auto}.su-max-width700px--left{max-width:700px;margin:auto;margin-left:0}.su-max-width700px--right{max-width:700px;margin:auto;margin-right:0}.su-max-width800px{max-width:800px;margin:auto}.su-max-width800px--left{max-width:800px;margin:auto;margin-left:0}.su-max-width800px--right{max-width:800px;margin:auto;margin-right:0}.su-max-width900px{max-width:900px;margin:auto}.su-max-width900px--left{max-width:900px;margin:auto;margin-left:0}.su-max-width900px--right{max-width:900px;margin:auto;margin-right:0}.su-max-width1000px{max-width:1000px;margin:auto}.su-max-width1000px--left{max-width:1000px;margin:auto;margin-left:0}.su-max-width1000px--right{max-width:1000px;margin:auto;margin-right:0}.su-max-width1200px{max-width:1200px;margin:auto}.su-max-width1200px--left{max-width:1200px;margin:auto;margin-left:0}.su-max-width1200px--right{max-width:1200px;margin:auto;margin-right:0}.su-max-width1300px{max-width:1300px;margin:auto}.su-max-width1300px--left{max-width:1300px;margin:auto;margin-left:0}.su-max-width1300px--right{max-width:1300px;margin:auto;margin-right:0}.su-max-width1400px{max-width:1400px;margin:auto}.su-max-width1400px--left{max-width:1400px;margin:auto;margin-left:0}.su-max-width1400px--right{max-width:1400px;margin:auto;margin-right:0}.su-max-width1500px{max-width:1500px;margin:auto}.su-max-width1500px--left{max-width:1500px;margin:auto;margin-left:0}.su-max-width1500px--right{max-width:1500px;margin:auto;margin-right:0}.su-max-width1600px{max-width:1600px;margin:auto}.su-max-width1600px--left{max-width:1600px;margin:auto;margin-left:0}.su-max-width1600px--right{max-width:1600px;margin:auto;margin-right:0}.su-max-width1700px{max-width:1700px;margin:auto}.su-max-width1700px--left{max-width:1700px;margin:auto;margin-left:0}.su-max-width1700px--right{max-width:1700px;margin:auto;margin-right:0}.su-max-width1800px{max-width:1800px;margin:auto}.su-max-width1800px--left{max-width:1800px;margin:auto;margin-left:0}.su-max-width1800px--right{max-width:1800px;margin:auto;margin-right:0}.su-max-width1900px{max-width:1900px;margin:auto}.su-max-width1900px--left{max-width:1900px;margin:auto;margin-left:0}.su-max-width1900px--right{max-width:1900px;margin:auto;margin-right:0}.su-max-width2000px{max-width:2000px;margin:auto}.su-max-width2000px--left{max-width:1200px;margin:auto;margin-left:0}.su-max-width2000px--right{max-width:1200px;margin:auto;margin-right:0}.su-full-width{width:100%}.su-overlay__self__fixed{position:fixed}.su-overlay,.su-overlay--self{position:relative}.su-overlay--self::after{position:absolute;top:0;left:0;right:0;bottom:0;content:''}.su-overlay__container{position:relative}.su-overlay__content{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}:root{--spacing-sm:20px;--spacing:50px;--spacing-lg:100px}.su-padding{padding:var(--spacing)}.su-padding--lg{padding:var(--spacing-lg)}.su-padding--sm{padding:var(--spacing-sm)}.su-padding-x{padding-left:var(--spacing);padding-right:var(--spacing)}.su-padding-x--lg{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.su-padding-x--sm{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.su-padding-y{padding-top:var(--spacing);padding-bottom:var(--spacing)}.su-padding-y--lg{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.su-padding-y--sm{padding-top:var(--spacing-sm);padding-bottom:var(--spacing-sm)}.su-margin{margin:var(--spacing)}.su-margin--lg{margin:var(--spacing-lg)}.su-margin--sm{margin:var(--spacing-sm)}.su-margin-x{margin-left:var(--spacing);margin-right:var(--spacing)}.su-margin-x--lg{margin-left:var(--spacing-lg);margin-right:var(--spacing-lg)}.su-margin-x--sm{margin-left:var(--spacing-sm);margin-right:var(--spacing-sm)}.su-margin-y{margin-top:var(--spacing);padding-bottom:var(--spacing)}.su-margin-y--lg{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.su-margin-y--sm{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.su-gap{gap:var(--spacing)}.su-gap--lg{gap:var(--spacing-lg)}.su-gap--sm{gap:var(--spacing-sm)}.su-gap-x{-webkit-column-gap:var(--spacing);-moz-column-gap:var(--spacing);column-gap:var(--spacing)}.su-gap-x--lg{-webkit-column-gap:var(--spacing-lg);-moz-column-gap:var(--spacing-lg);column-gap:var(--spacing-lg)}.su-gap-x--sm{-webkit-column-gap:var(--spacing-sm);-moz-column-gap:var(--spacing-sm);column-gap:var(--spacing-sm)}.su-gap-y{row-gap:var(--spacing)}.su-gap-y--lg{row-gap:var(--spacing-lg)}.su-gap-y--sm{row-gap:var(--spacing-sm)}.su-text-align--left{text-align:left}.su-text-align--center{text-align:center}.su-text-align--right{text-align:right}.su-text-align--justify{text-align:justify}.example{display:-ms-grid;display:grid;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:-webkit-gradient(linear,left top,left bottom,from(white),to(black));background:-o-linear-gradient(top,white,black);background:linear-gradient(to bottom,white,black)}