chota/dist/chota.css

/*! chota.css | MIT License | github.com/jenil/chota */
: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:Segoe UI,Helvetica Neue,san-serif;
    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);
    text-decoration:none;
}
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;
    padding:0;
}
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:0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}
.col-1{
    flex:0 0 calc((100% / (12/1)) - var(--grid-gutter));
    max-width:calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2{
    flex:0 0 calc((100% / (12/2)) - var(--grid-gutter));
    max-width:calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3{
    flex:0 0 calc((100% / (12/3)) - var(--grid-gutter));
    max-width:calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4{
    flex:0 0 calc((100% / (12/4)) - var(--grid-gutter));
    max-width:calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5{
    flex:0 0 calc((100% / (12/5)) - var(--grid-gutter));
    max-width:calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6{
    flex:0 0 calc((100% / (12/6)) - var(--grid-gutter));
    max-width:calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7{
    flex:0 0 calc((100% / (12/7)) - var(--grid-gutter));
    max-width:calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8{
    flex:0 0 calc((100% / (12/8)) - var(--grid-gutter));
    max-width:calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9{
    flex:0 0 calc((100% / (12/9)) - var(--grid-gutter));
    max-width:calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10{
    flex:0 0 calc((100% / (12/10)) - var(--grid-gutter));
    max-width:calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11{
    flex:0 0 calc((100% / (12/11)) - var(--grid-gutter));
    max-width:calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12{
    flex:0 0 calc((100% / (12/12)) - var(--grid-gutter));
    max-width:calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width:768px){
    .container{
        width:100%;
    }
    
    .col,[class*=" col-"],[class^=col-]{
        flex:0 1 100%;
        max-width: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;
    text-align:center;
    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);
}
button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
    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{
    display:flex;
    min-height:5rem;
    align-items:stretch;
}
.nav img{
    max-height:3rem;
}
.nav>.container{
    display:flex;
}
.nav-center,.nav-left,.nav-right{
    display:flex;
    flex:1;
}
.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-wrap:wrap;
        justify-content:center;
    }
}
.nav .brand,.nav a{
    text-decoration:none;
    display:flex;
    align-items:center;
    padding:1rem 2rem;
}
.nav .brand{
    margin:0;
    padding-top:0;
    padding-bottom:0;
}
.nav .brand a{
    padding:0;
}
.nav .button{
    margin:auto 1rem;
}
.card{
    padding:1rem 2rem;
    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:0 1 auto;
    color:#555;
    border-bottom:2px solid var(--lightGrey-color);
    text-align:center;
}
.tabs>a.active,.tabs>a:hover{
    opacity:1;
    border-bottom:2px solid #555;
}
.tabs>a.active{
    border-color:var(--primary-color);
}
.tabs.is-full a{
    flex:1;
}
.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%;
}
.is-paddingless{
    padding:0 !important;
}
.is-marginless{
    margin:0 !important;
}
.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;
    }
}