*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{min-height:100%;font-size:16px;}
body{margin:0;color:#000000;background: #fff;font-family: 'Roboto', sans-serif;line-height:1.6}
p{margin:0 0 1.5em 0;}
form{padding:0;margin:0}
a{color:#000;}
a img{border:none;}
a:focus{outline: none;}

h1{font-size:2.50em;line-height:1.2;font-weight:300;margin:1em 0 .50em 0; text-align: center;}
h2{font-size:2.00em;line-height:1.2;font-weight:300;margin:1em 0 .50em 0;color:#4db4f9;}
h3{font-size:1.25em;line-height:1.2;font-weight:300;margin:1em 0 .25em 0;}
h4{font-size:1.00em;line-height:1.2;font-weight:300;margin:1em 0 .05em 0;}

table{margin-bottom:1.5em;}

.clear:after{content:"";display:block;clear:both;}


/*******************************************************/
/* Wrapper
/*******************************************************/

.site-wrapper{}
.content-container{max-width:1100px;margin:0 auto}

/*******************************************************/
/* Content
/*******************************************************/

.content-wrapper{}
.content{padding:40px 0}
.content *:first-child{margin-top:0}

.heading-grid{display:flex;align-items:center;align-items:flex-end;margin:2em 0 1em 0}
.heading-grid .heading-grid-text{width:100%}
.heading-grid .heading-grid-text h2{margin:0 0 .15em 0}
.heading-grid .heading-grid-text p{color:#8a8a8a}
.heading-grid .heading-grid-text *:first-child{margin-top:0}
.heading-grid .heading-grid-text *:last-child{margin-bottom:0}
.heading-grid .heading-grid-tools{width:70%;text-align:right;}

ol.form.settings{display:flex;justify-content:space-between;}

ol.form{margin:0;padding:0;list-style:none;}
ol.form li{margin:0 20px 0 0;padding:0;list-style:none;width:100%;}
ol.form li:last-child{margin:0}
ol.form li label{font-size:.9em;color:#8a8a8a}

ol.form.form-labels-above label{display:block;margin:0 0 .25em 0;}
ol.form.form-labels-above input,ol.form.form-labels-above select{width:100%;}
ol.form.form-labels-left label{}

select.field-select{font-family:courier,'courier new',serif;font-size:.9em;padding:4px 8px !important;height:auto !important;line-height:1.3 !important;min-width:90px;margin:0;border:1px solid #dddddd;-webkit-appearance:none;-webkit-border-radius:0px;background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 24 24'><path fill='#bebebe' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");background-position: 99% 3px;background-repeat:no-repeat;}
textarea.field-textarea{font-family:courier,'courier new',serif;font-size:1em;width:100%;padding:10px 8px;font-size:.9em;line-height:1.3;margin:0;border:1px solid #dddddd;-webkit-appearance:none;-webkit-border-radius:0px;}

.code{display:flex;justify-content:space-between;}
.code .code-label{position:absolute;top:0;right:0;background-color:#4db4f9;color:#fff;font-size:.8em;padding:.35em .5em}
.code-html{width:49.5%;position:relative}
.code-css{width:49.5%;position:relative}

.preview{border:1px solid #dddddd;background:rgba(0,0,0,0.01);padding:20px 30px}
.preview-items{float:right}

.flex-container{display:flex;min-height:200px}
.flex-container .flex-item{border:1px solid #dddddd;padding:20px 50px;background:#fff;}

.help{margin:25px 0 0 0;border:1px solid #4db4f9;background:#f4fbff;padding:30px 30px}
.help *:first-child{margin-top:0}
.help h2{}

dl.definitions{display:flex;flex-flow:row wrap;justify-content:space-between;border:1px dotted #4db4f9;border-bottom:none;background:#fff}
dl.definitions dt{width:20%;margin:0;padding:10px 20px;border-bottom:1px dotted #4db4f9;font-weight:bold}
dl.definitions dd{width:80%;margin:0;padding:10px 20px;border-bottom:1px dotted #4db4f9}


/*******************************************************/
/* Mobile
/*******************************************************/

@media (min-width : 320px) and (max-width : 480px) {

html{font-size:14px;}

h1{font-size:1.75em;}
h2{font-size:1.50em;}
h3{font-size:1.25em;}
h4{font-size:1.00em;}

.content-container{max-width:100%;}

.header{text-align:center;padding:10px 30px}

.social{position:relative;top:inherit;right:inherit;}

.nav ul{display:block}
.nav ul li{display:block;}

.content{padding:30px 30px}

ol.form.settings{display:block}
ol.form.settings li{margin:0 0 10px 0}

.preview{overflow:hidden}

dl.definitions{display:block}
dl.definitions dt{width:auto;border:none;padding-bottom:0}
dl.definitions dd{width:auto}

.footer{padding:30px 30px;text-align:center}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}