html {
  width:100%;
  height:100%;
}
body {
  font-family:Helvetica, Helvetica Neue, Verdana, Arial, sans-serif;
  font-size:12px;
  background-image:url(background.jpg);
  background-size:100% 100%;
  background-repeat:repeat-y;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  overflow-y:scroll;
}
body>section {
  background:#fff;
  min-height:100%;
  width:65%;
  max-width:980px;
  margin:0 auto;
}
header {
  border-bottom:2px #b6a283 inset;
  padding:1em; 
}
header>a {
  text-decoration:none;
}
header>a>h1 {
  margin:0;
  background:url(jk-law.png) no-repeat top left;
  padding:15px 0 0 76px;
  height:60px;
  font-size:20px;
  letter-spacing:.1em;
  color:#000;
}
header>a>h1>address {
  font-size:14px;
  letter-spacing:normal;
  font-weight:normal;
}
header>aside {
  float:right;
  text-align:right;
  font-size:125%;
  line-height:1.5em;
}
header>aside>strong {
}
nav {
  border-bottom:2px #b6a283 inset;
}
nav>ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
nav>ul>li {
   display:inline-block;
   width:19%;
   width:calc(20% - 2px);
   margin:0;
   padding:.25em 0;
   text-align:center;
   border-right:2px #b29e80 solid;
}
nav>ul>li:last-child {
  width:20%;
  border-right:none;
}
nav>ul>li:hover {
  background-color:#ffe3b8;
  cursor:pointer;
}
nav>ul>li>a {
  color:#50483a;
  text-decoration:none;
  display:block;
}
br.clear {
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
  clear: both;
}
article {
  background:#fff;
  width:100%;
  height:calc(100% - 145px);
}
article>section, article>div>section {
  padding:1em;
}
article>section>div>h2, article>div>section>div>h2 {
  margin:0;
  padding-left:244px;
  text-align:center;
  color:#fff;
  font-size:400%;
  position:relative;
  top:50px;
}
#meet-jan-kelly>div>.green-button {
  text-align:center;
  position:relative;
  top:75px;
  left:122px;
  width:250px;
  white-space:nowrap;
  display: block;
  margin: 0 auto;
}
article>section>div>h3, article>div>section>div>h3 {
  color:#fff;
  font-size:300%;
  margin:0;
  padding-left:244px;
  text-align:center;
  position:relative;
  top:50px;
  font-style:italic;
}
#contact-phone-email {
  display:none;
}
#meet-jan-kelly {
  height:calc(300px - 2em);
  background:url(article-bg.jpg);
  background-size:100% 300px;
  overflow:hidden;
}
article>section>p, article>div>section>p {
  font-size:125%;
}
#page-header-content {
  position:relative;
  top:-300px;
}
#jan-img {
  position:relative;
  left:144px;
  float:left;
  height:calc(300px - 1em);
}
footer {
  width:100%;
  max-width:980px;
  text-align:center;
  border-top:2px #b6a283 inset;
  position:fixed;
  top:calc(100% - 2em);
  width:65%;
  max-width:980px;
  background:#fff;
  height:2em;
}
article>section, article>div>section {
}
.green-button {
  display: inline-block;
  padding: .5em 1em;
  background: #6ABD45;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin-right: 1em;
  font-size: 125%;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: .1em;
  box-shadow:4px 4px 4px transparent;
}
.green-button:hover {
  box-shadow:4px 4px 4px rgba(255, 255, 255, .25);
}
#education {
  margin-bottom:100px;
}
#education, #admissions {
  float:right;
  clear:right;
  width:45%;
}
#education h2, #admissions h2 {
  text-align:center;
  color:#255a9e;
}
#education ul, #admissions ul {
  line-height:1.5em;
}
section>h1:first-child {
  font-size:200%;
  text-align:center;
  margin:0;
}
section>h1 + ul {
  float:left;
  width:50%;
  vertical-align:top;
}
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
  #jan-img {
    display:none;
  }
  article>section>div>h2, article>section>div>h3, article>div>section>div>h2, article>div>section>div>h3 {
    padding-left:0;
  }
  #meet-jan-kelly>div>.green-button {
    display:block;
    margin:auto;
    left:0;
  }
}
@media only screen and ( max-width: 767px ) {
  header>a>h1 {
    font-size:12px;
  }
  #jan-img {
    width:35%;
    height:65%;
    top:40%;
  }
  #page-header-content {
    font-size:50%;
    display:inline-block;
  }
  #meet-jan-kelly>div>.green-button {
    left:10px;
    font-size:200%;
    width:200px;
  }
  article>section>div>h2, article>section>div>h3 {
    padding-left:0;
  }
  #contact>p:nth-child(2) {
    width:75% !important;
  }
}
@media only screen and ( max-width: 580px ) {
  header>aside {
    display:none;
  }
  #jan-img {
    display:none;
  }
  #page-header-content {
    width:100%;
  }
  #meet-jan-kelly {
    height:calc(200px - 2em);
  }
  #admissions, #education {
    float:none;
    clear:none;
    width:100%;
    margin-bottom:1em;
  }
  article>section>div>h2, article>section>div>h3 {
    top:25px;
  }
  section>h1 + ul {
    width:90%;
  }
  #contact>form:nth-child(4) {
    width:90% !important;
  }
  #contact-phone-email {
    display:block;
    text-align:center;
  }
  body>section {
    width:90%;
  }
  footer {
    width:90%;
  }
}