chota/dist/chota.css

:root{
    --primary-color:#1a9f60;
    --lightGrey-color:#ddd;
    --grid-maxWidth:120rem;
    --grid-gutter:2rem;
    --font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
}

*{
    box-sizing:border-box;
}

html{
    font-size:62.5%;
    line-height:1.15;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}

body{
    letter-spacing:.01em;
    line-height:1.6;
    font-size:1.6rem;
    font-weight:400;
    font-family:var(--font-family);
    margin:0;
    padding:0;
}

h1,h2,h3,h4,h5,h6{
    font-weight:500;
    margin:.35em 0 .7em;
}

h1{
    font-size:2em;
}

h2{
    font-size:1.75em;
}

h3{
    font-size:1.5em;
}

h4{
    font-size:1.25em;
}

h5{
    font-size:1em;
}

h6{
    font-size:.85em;
}

a{
    color:var(--primary-color);
}

a:hover:not(.button){
    opacity:.6;
}

p{
    margin-top:0;
}

blockquote{
    background-color:#f3f3f3;
    padding:1.5rem 2rem;
    border-left:3px solid var(--lightGrey-color);
}

dl dt{
    font-weight:700;
}

hr{
    background-color:var(--lightGrey-color);
    height:1px;
    margin:1rem 0;
}

hr,table{
    border:none;
}

table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    text-align:left;
}

td,th{
    vertical-align:middle;
    padding:1.2rem .4rem;
}

thead{
    border-bottom:2px solid var(--lightGrey-color);
}

tfoot{
    border-top:2px solid var(--lightGrey-color);
}

code,kbd,pre,samp,tt{
    font-family:monaco,Consolas,Lucida Console,monospace;
}

code,kbd{
    padding:0 .4rem;
    font-size:90%;
    white-space:pre-wrap;
    border-radius:4px;
    color:#c62424;
    padding:.2em .4em;
}

code,kbd,pre{
    background-color:#f7f7f7;
}

pre{
    font-size:1em;
    padding:1rem;
}

pre code{
    background:none;
}

abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted;
}

img{
    max-width:100%;
}

fieldset,iframe{
    border:1px solid var(--lightGrey-color);
}

.container{
    max-width:var(--grid-maxWidth);
    margin:0 auto;
    width:96%;
    padding:0 calc(var(--grid-gutter) / 2);
}

.row{
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;
    margin-left:calc(var(--grid-gutter) / -2);
    margin-right:calc(var(--grid-gutter) / -2);
}

.col{
    flex:1;
}

.col,[class*=" col-"],[class^=col-]{
    margin-bottom:var(--grid-gutter);
    margin-left:calc(var(--grid-gutter) / 2);
    margin-right:calc(var(--grid-gutter) / 2);
}

.col-1{
    width:calc((100% / (12/1)) - var(--grid-gutter));
}

.col-2{
    width:calc((100% / (12/2)) - var(--grid-gutter));
}

.col-3{
    width:calc((100% / (12/3)) - var(--grid-gutter));
}

.col-4{
    width:calc((100% / (12/4)) - var(--grid-gutter));
}

.col-5{
    width:calc((100% / (12/5)) - var(--grid-gutter));
}

.col-6{
    width:calc((100% / (12/6)) - var(--grid-gutter));
}

.col-7{
    width:calc((100% / (12/7)) - var(--grid-gutter));
}

.col-8{
    width:calc((100% / (12/8)) - var(--grid-gutter));
}

.col-9{
    width:calc((100% / (12/9)) - var(--grid-gutter));
}

.col-10{
    width:calc((100% / (12/10)) - var(--grid-gutter));
}

.col-11{
    width:calc((100% / (12/11)) - var(--grid-gutter));
}

.col-12{
    width:calc((100% / (12/12)) - var(--grid-gutter));
}

@media screen and (max-width:768px){
    .container{
        width:100%;
    }
    
    .col,[class*=" col-"],[class^=col-]{
        flex-basis:100%;
    }
}

fieldset{
    padding:.5rem 2rem;
}

legend{
    text-transform:uppercase;
    font-size:.8em;
    letter-spacing:.1rem;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{
    font-family:inherit;
    padding:.7rem 1rem;
    border-radius:4px;
    border:1px solid var(--lightGrey-color);
    font-size:1em;
    transition:all .2s ease;
    display:block;
    width:100%;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{
    border-color:#aaa;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{
    outline:none;
    border-color:var(--primary-color);
}

select{
    -webkit-appearance:none;
    background-color:#fafafa;
    border:1px solid var(--lightGrey-color);
    background-position:100%;
    background-repeat:no-repeat;
    background-size:1ex;
    background-origin:content-box;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
}

[type=checkbox],[type=radio]{
    -webkit-appearance:none;
    width:1.6rem;
    height:1.6rem;
    margin:-.2rem .2rem;
    border:1px solid #aaa;
}

[type=radio]{
    border-radius:50%;
    box-shadow:inset 0 0 0 3px #fff;
}

[type=radio]:checked{
    background-color:var(--primary-color);
}

[type=checkbox]:checked{
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;
    background-size:1rem;
}

.button,[type=button],[type=reset],[type=submit],button{
    padding:1rem 2.5rem;
    color:#333;
    background:#e6e6e6;
    border-radius:4px;
    border:none;
    font-size:1.5rem;
    line-height:1;
    transition:all .2s ease;
    text-decoration:none;
    transform:scale(1);
    transition:all .3s;
    display:inline-block;
}

.button+.button{
    margin-left:1rem;
}

.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{
    opacity:.8;
}

.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{
    transform:scale(.98);
}

input[disabled]{
    opacity:.4;
    cursor:not-allowed;
}

.button.primary,[type=submit]{
    color:#fff;
    background:var(--primary-color);
}

.button.outline{
    background-color:transparent;
    border:1px solid var(--lightGrey-color);
}

.button.outline.primary{
    border-color:var(--primary-color);
    color:var(--primary-color);
}

.button.clear{
    background-color:transparent;
    border-color:transparent;
    color:var(--primary-color);
}

.nav{
    min-height:5rem;
    align-items:stretch;
}

.nav,.nav>.container{
    display:flex;
}

.nav-center,.nav-left,.nav-right{
    display:flex;
    flex-basis:0;
    flex-grow:1;
    flex-shrink:0;
}

.nav-left{
    justify-content:flex-start;
}

.nav-right{
    justify-content:flex-end;
}

.nav-center{
    justify-content:center;
}

@media screen and (max-width:480px){
  .nav,.nav>.container{
    flex-direction:column;
  }
  .nav-center,.nav-left,.nav-right{
    flex-basis:100%;
    justify-content:center;
    flex-shrink:1;
    flex-grow:0;
    flex-wrap:wrap;
  }
}

.nav .brand{
    margin:0;
}

.nav .brand,.nav a{
    display:flex;
    align-items:center;
}

.nav a{
    text-decoration:none;
    cursor:pointer;
}

.card,.nav a{
    padding:1rem 2rem;
}

.card{
    border-radius:4px;
    box-shadow:0 0 2px rgba(0,0,0,.4);
}

.card header>*{
  margin-top:0;
  margin-bottom:1rem;
}

.tabs{
    display:flex;
}

.tabs a{
    text-decoration:none;
}

.tabs>a{
    padding:1rem 2rem;
    flex:1;
    color:#555;
    border-bottom:2px solid var(--lightGrey-color);
    text-align:center;
}

.tabs>a.active,.tabs>a:hover{
    border-bottom:2px solid #555;
}

.tabs>a.active{
    border-color:var(--primary-color);
}

.pull-right{
    float:right;
}

.pull-left{
    float:left;
}

.is-text-center{
    text-align:center;
}

.is-text-left{
    text-align:left;
}

.is-text-right{
    text-align:right;
}

.is-text-uppercase{
    text-transform:uppercase;
}

.is-text-lowercase{
    text-transform:lowercase;
}

.is-text-capitalize{
    text-transform:capitalize;
}

.is-full-screen{
    width:100%;
    min-height:100vh;
}

.is-full-width{
    width:100%;
}

.is-vertical-align{
    display:flex;
    align-items:center;
}

.is-center,.is-horizontal-align{
    display:flex;
    justify-content:center;
}

.is-center{
    align-items:center;
}

.is-right{
    justify-content:flex-end;
}

.is-left,.is-right{
    display:flex;
    align-items:center;
}

.is-left{
    justify-content:flex-start;
}

.is-fixed{
    position:fixed;
    width:100%;
}

.clearfix{
    content:"";
    display:table;
    clear:both;
}

@media screen and (max-width:480px){
    .hide-phone{
        display:none;
    }
}

@media screen and (max-width:768px){
    .hide-tablet{
        display:none;
    }
}