/*! 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:#fafafa no-repeat 100%; background-size:1ex; background-origin:content-box; background-image:url("data:image/svg+xml;utf8,"); } [type=checkbox],[type=radio]{ width:1.6rem; height:1.6rem; } .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-color:#000; 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; color:#555; } .nav .active:not(.button){ color:#000; color:var(--primary-color); } .nav .brand{ font-size:1.75em; padding-top:0; padding-bottom:0; } .nav .button{ margin:auto 1rem; } .card{ padding:1rem 2rem; border-radius:4px; box-shadow:0 0 2px rgba(0,0,0,.4); } .card p:last-child{ margin:0; } .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; } .is-hidden{ display:none !important; } @media screen and (max-width:480px){ .hide-phone{ display:none; } } @media screen and (max-width:768px){ .hide-tablet{ display:none; } }