html {
    font-size:90%;
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

#bodyContent, a, button, #menuList li, #practiceAreaMenuList, #mobileNavList li a, #main_nav_link_list li a,
table tr td:last-of-type{
    cursor: pointer;
}

.rich-bio-pic-test {
  background-image: url("assets/rich_toon_and_billie.jpg") !important;
  background-position-y: -51px !important;
  background-size: 300% !important;
  background-position-x: -96px !important;
}

.bioLarge img {
  max-width: 400px !important;
}

.scroller {
    pointer-events: none;
    overflow-x:hidden;
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    scroll-snap-points-y: repeat(100%);
    scroll-snap-type: mandatory;
    scroll-snap-destination: 100% 0%;
}

.loading {
    /* animation: goingGone .7s ease 1 forwards; */
    animation:fadeIn;
    position: fixed;
    height: 100%;
    width: 100%;
    top:0;
    background: #fff;
    display: flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    z-index: 100000000;
    opacity:1;
    -webkit-transition: all 0.8s linear;
    -ms-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;
    transition: all 0.8s linear;
    color: #000;

}
#loader img {
    width:30px;
    margin-right:15px;
}
.loading h1 {
    font-size:1.5vh;
    animation: fadeIn 1s ease;
}

.glitter {
    opacity:0;
    -webkit-transition: all 0.8s linear;
    -ms-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;
    transition: all 0.8s linear;
}

.goneGirl {
    display:none;
}



@-ms-keyframes goingGone{0%{opacity: 1;} 99%{opacity: 0;} 100%{display: none;}}
@-moz-keyframes goingGone{0%{opacity: 1;} 99%{opacity: 0;} 100%{display: none;}}
@-webkit-keyframes goingGone{0%{opacity: 1;} 99%{opacity: 0;} 100%{display: none;}}
@keyframes goingGone{0%{opacity:1;} 99%{opacity: 0;} 100%{display: none;}}

p, span, a, section, h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}
body {
    background-color: #fff;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
div, span, input, button, section, table, td, tr,
form, a, p {
    box-sizing: border-box;

    -webkit-transition: all 0.3s ease!important;
    -moz-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}

.afterWrap {
    height:84vh;
    display: flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    text-align:left;
    margin:3vh;
    border:2px solid #272725;
    padding:4vh;
    background-color: rgba(255,255,255,1);
}

.afterWrap a {
    letter-spacing: 2px;
}

.afterWrap h1{
    font-size:1.5rem;
    margin-bottom: 0px;
    margin-top:3vh;
}
.strongest {
    font-weight:700;
}
.afterWrap h2{
    font-size: 1rem;
    font-weight:300;
    line-height:3vh;
    margin-top: .75vh;
    padding: 0;
}
.afterWrap:hover {
    background-color: rgba(244, 244, 246,1);
    border:2px solid #27272500;
}
.flexyCase {
    max-width:650px;

}
.flexyCase a {
    cursor:pointer;
    color: #fff;
    display:block;
    font-size:1.25vh;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
}
.flexyCase a:first-of-type {
    background-color: #272725;
    padding: 1vh 3vh 1vh 0;
    border: 1px solid #272725;
    width:70%;
    margin-bottom: 3vh;
margin-top: 3vh;

}

.invis {
    visibility:hidden;
}

.flexyCase a:first-of-type:hover, #thankYouMessage button:hover {
    background: url('assets/diagonal-lines.svg');
    background-repeat: repeat;
    background-size: 3px;
    border: 1px solid rgba(0,0,0,0);
}
button#closeWin {
    background: #272725;
    color: #fff;
}

.flexyCase a span, #thankYouMessage button:hover span {
    padding:0 1rem;
}
.flexyCase a:first-of-type:hover span, #thankYouMessage button:hover span {
    background-color: #fff;
    color: rgba(39, 39, 37,1);
    display:inline-block;
    margin-left: -1px;
}

.tween {
    transition: all 0.2s ease !important;
    -webkit-transition: all 0.2s ease!important;
    -moz-transition: all 0.2s ease !important;
    -o-transition: all 0.2s ease !important;
}
a {
    color: rgba(0,0,0,0);
    text-decoration: none;
}
.fade_in {
    animation: fadeIn .3s ease 1;
    -webkit-animation: fadeIn .3s ease 1;
    -moz-animation: fadeIn .3s ease 1;
    -o-animation: fadeIn .3s ease 1;
}
#smallMarker {
    height: 2vh;
    vertical-align:middle;
    opacity: 1;
    margin-right:1vh;
    margin-top:2px;
}

#topNav {
    height: 3.5vh;
    background: #272725;
    line-height: 3vh;
    font-size: .7rem;
    padding: 0 4vh 0 4vh;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.208);
    border-bottom: 1px solid #000;
    position:fixed;
    left:0;
    right:0;
    top: 0;
    z-index: 1;

}
.toon_address {
    vertical-align: middle;
}
#topNav p, #topNav div {
    display: inline-block;
    color: rgba(255,255,255,1);
    margin: 0 0 0 0;
    line-height: 3.5vh;
}
#topNavContact {
    float: right;
}

.phone {
    font-weight: 100;
    letter-spacing:2px;

}
#searchWrap {
    display: none;
}
.phone::before {
    content: '|';
    margin-left: 3vh;
    margin-right: 3vh;
    color: #fff !important;
}

#topNavContact a, #topNav a  {
    color: rgba(255,255,255,.79);
    font-weight: 500;
    font-size: .85rem;
}

#topNavContact a:hover, #topNav a:hover {
    color: rgba(255,255,255,1);
}
a {
    text-decoration: none !important;

}
#main_nav {
    background-color: rgb(255,255,255);
    height: 7vh;
    padding: 0 4vh 0 4vh;
    letter-spacing: 3px;
    position: fixed;
    width: 100vw;
    top: 3.5vh;
    z-index: 5;
    box-shadow: 2px 2px 5px rgba(255,255,255,.2);
}
#main_nav h1 {
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    vertical-align: middle;
    line-height: 7vh;
    letter-spacing: 5px;
    font-size:1.7vh;
}

#mobileNav {
    display: none;
}
#mobileNavList {
    list-style-type: none;
    padding:0 0 0 0;
    margin: 0 0 0 0;
    text-align: right;
}
#mobileNavList li a {
    color: rgba(39, 39, 37, 0);
    transition: all 0.4s ease;

}
#main_nav h1 a {
    /* color : #fff; */
   color: rgba(39, 39, 37,1);;
}

h1 {
    white-space: nowrap;
}

h1 img {
    max-width:20px;
    margin-left:-.5vh;
    opacity: .9;
}
.logoLawFirm {
    font-weight:300 !important;
}
ul#main_nav_link_list{

    margin:0 0 0 0;
    padding: 0 0 0 0;
    float: right;

}
ul#main_nav_link_list li {
    display: inline-block;
    list-style-type: none;
    padding-right:3vw;
}

ul#main_nav_link_list li:last-of-type {
    padding-right: 0px;
}
ul#main_nav_link_list li a {
    line-height: 7vh;
    font-weight: 500;
    line-height: 7vh;
    text-transform: uppercase;
    font-size: 1.45vh;
    color: rgba(39, 39, 37, 1);
    -webkit-font-smoothing: antialiased;
    letter-spacing: 1px !important;
}

ul#main_nav_link_list li a:hover {

    color: rgba(39, 39, 37,.51);
}

.marginWrapper {
    padding: 10vh 3vh 3vh 3vh;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* margin-top: 8vh; */
}


#bodyContent {
    background-image: url(assets/toonlawfirm_medium.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size:cover;
   height: 100%;
    -moz-box-shadow:   inset 0px 0px 30px 10px rgba(39, 39, 37, 0.5);
    -webkit-box-shadow: inset 0px 0px 30px 10px rgba(39, 39, 37, 0.5);
    box-shadow:  inset 0px 0px 30px 10px rgba(39, 39, 37, 0.5);
}
#bodyContent h1 {
    /* color: rgba(255,255,255,1); */
    color: rgba(39, 39, 37,1);
    font-size:5vh;
    letter-spacing:.25em;
}
#outlines a, #outlines span{
    font-weight: 700;
    color: rgba(255,255,255,1);
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    /* border-bottom: 2px solid rgba(0,0,0,0); */
    display: block;
}
#outlines a {
    font-size:3vh;
    margin-top:4vh;
}
#outlines span {
    font-size: 10vh;
    line-height:9vh;
}
#outles span {
    font-size:10vh !important;
    height:auto;
}
.blurb {
    background: linear-gradient(rgba(39, 39, 37, 0.5), rgba(22, 22, 21, 0.67));
    height:100%;
    bottom: 0;
    left:0;
    right: 0;
    width: 100%;
    -moz-box-shadow:   inset 0px 0px 30px 10px rgba(22, 22, 21, 0.67);
    -webkit-box-shadow: inset 0px 0px 30px 10px rgba(22, 22, 21, 0.67);
    box-shadow: inset 0px 0px 30px 10px rgba(22, 22, 21, 0.67);
    padding:36vh 2vh 2vh 2vh;
    text-align:center;
}
/* .blurb:hover {
    -moz-box-shadow:   inset 0px 0px 30px 10px rgba(0,0,0,0);
    -webkit-box-shadow: inset 0px 0px 30px 10px rgba(0,0,0,0);
    box-shadow: inset 0px 0px 30px 10px rgba(0,0,0,0);
    background-color: rgba(0, 0, 0, 0.7);
}

.blurb:hover #outlines a {
    color: rgba(255,255,255,1);
    padding-top:3vh;
    text-decoration: none;
}

.blurb:hover #outlines span {
    color: rgba(0,0,0,0);
    display: none;
    height: 0px;
}

.blurb:hover #outlines span:first-of-type {
    border-top: 2px solid rgba(0,0,0,0);
} */
#outlines span {
    display: block;
}


#outlines {
    display: inline-block;
    margin:0 auto;
    text-align: left;
    padding:0 0 0 0;
}

#outlines a {
    color: rgba(255,255,255,0);
    /* opacity:0; */

}
#outlines::before {
    content: '';
    display: block;
    background-color:#f4f4f6;
    margin-bottom:2vh;
    border-radius:11px;
    height:8px;
    width:100%;

}
.blurb:hover #outlines {
    border-top: 0px solid rgb(0,0,0);
}

.blurb:hover #outlines a{
    color: rgba(255,255,255,1);
    opacity: 1;
}
/* ++++++++++++++ PRACTICE AREAS ****************** */

#welcome {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

}

#practiceAreaMenuList{
    height:0;
    opacity: 0;
    clear:both;
}

#areaMenu {
    opacity:0;
    height:0;
    position:fixed;
    top: 10vh;
    left:0;
    background-color: #fff;
    width:100%;
    transition-delay: 2s;
    z-index:4;
    -webkit-user-select: none;

}

#areaMenu.hello {
    background-color: #f4f4f6 !important;
    height:4vh !important;
    opacity:1 !important;
    transition-delay: 1s !important;
    top: 10.49vh;
    -webkit-user-select: none;
    text-align:right;
}
#areaMenu.hello:hover #showMenu {
    color: rgba(39, 39, 37,1) !important;

}

#showMenu {


    border: 0px;
    text-transform: uppercase;
    background-color: rgba(0,0,0,0);
    line-height: 4vh;
    font-size: .75rem;
    letter-spacing: 2px;
    padding: 0 0 0 0;
    text-align:right;
    padding-right:4vh;
    color: #272725;
    float:right;
}

/* .callNow {
    height: 5.5vh;
    line-height: 5vh;
    padding:0 2vh 0 2vh;
    background-color: rgba(0,0,0,0);
    color: #fff;
    border: 2px solid #fff;
    border-radius:40px;
    font-size:2vh;
    letter-spacing: 1px;
    font-size: 1rem;
    min-width:200px;
    width:25vh;
    max-width:400px;
    white-space:nowrap;

}



.callNow:hover {

    border: 2px solid #27272500;
    padding-left: 4vh;
    padding-right: 5vh;
    background-color: rgba(0,0,0,.5);
    transition: all 0.25s ease;
}

.callNow svg {
    width: 0;
    opacity: 0;
    padding-left: 0;
    transition: all 0.25s ease;
}

.callNow:hover svg {
    opacity:1;
    width:auto;
    padding-left:1.25vh;
    transition: all 0.25s ease;
} */

#practice_header p, #practiceBody {
   margin:3vh;
   padding:1vh;
   text-align:center;

}

div#practiceWrap::before {
    content: '';
    display: block;
    background: #2727257a;
    height: 1px;
    margin: 0 3vh 0 3vh;
}


#practice_header {
    text-align: center;
    padding: 15vh 10vh;
    height:100%;
    display:flex;
}

#practice_header p {
    color: rgba(0,0,0,1);
    font-weight: 300;
    font-size:2vh;
    margin: 10vh 0 0 0;
    display: inline-block;
    width:70vw;
    display: block;
    margin: 6vh auto;
    line-height:3vh;
}

.areaClosed {
    /* height:0; */
    /* opacity:0 ; */
    margin:1vh 0 0 0;
    color: rgba(0,0,0,0);
    font-weight:300;
    font-size: 1rem;
    line-height: 1.85rem;
    max-height:0px;
    z-index: -4;
    pointer-events: none;
    border-top: 1px solid rgba(0,0,0,0);
    clear:both;
    visibility:hidden;
    -webkit-transition:all 0.4s linear !important;
    transition: all 0.4s linear !important;


}

.areaClosed span.links, .areaClosed .areaDetailBold {
    color: rgba(0,0,0,0);
    -webkit-transition:all 0.4s linear !important;
    transition: all 0.4s linear !important;
}

.openThis {
    /* opacity: 1 !important; */
    opacity: 1;
    max-height:500px;
    color: rgba(39, 39, 37,1);
    margin:1vh 0 0 0;
    padding-top:1vh;
    border-top:1px solid rgba(221, 221, 221,1);
    clear:both;
    visibility:visible;
    -webkit-transition:all 0.2s linear !important;
    transition: all 0.2s linear !important;
    /* -webkit-animation: fadeIn 1s linear;
    animation: fadeIn 1s linear; */


}

.openThis span.links, .openThis .areaDetailBold {
    color: rgba(39, 39, 37,1);
    font-weight:700;
}

.arealist p, .arealist p:active, .areaClosed:active, .openThis:active, .changeIcon:active, ul li:active {
    -webkit-transition:all 0.5s linear !important;
    transition: all 0.5s linear !important;
}

.openThis a {
    color: rgba(39, 39, 37,1);
}


span.links {
    display:block;
    font-weight:700;
    margin:2vh 0 0 0;
    font-size: .85rem;

}

span.links a {
    margin-right: 10px;

    /* padding: .3rem .5rem; */
    line-height: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    padding: 0 .5rem;
    font-size: .57rem;
    border-radius: 2px;
    font-weight: 600;
}



span.links a{
    background-color: rgba(39, 39, 37,1);
    color: rgba(244, 244, 246,1);
}

/* p span.links:last-of-type {
    margin-top:6vh;
    border-top: 1px solid #ddd;
    padding-top: 3vh;
} */

span.links a:hover {
    background-color: rgba(244,244,246,1);
    color: rgba(39,39,37,1);
}



.callOut {
    font-weight:700;
    color: rgba(0,0,0,1);
}

span.makebolder {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



#welcome span.makebolder {

    font-size: 3.75vh;
    font-weight: 300 !important;

    color: #fff;
    max-width: 500px;
    min-width:200px;
    text-align:left;
   opacity: 0;
}

#welcome span.makebolder::before {
    content: '';
    display: block;
    background-color: #fff;
    margin-top:3vh;
    border-radius:11px;
    height:7px;
    width:100%;
    border-top: 0px !important;
}

.spacer {
    padding-top:0vh;
}
#practice_header:hover .spacer {
    padding-top:3vh;
    display:block;
}

#practice_header:hover #welcome span.makebolder {
    opacity: 1;
    transition: all 0.3s ease;
}

#practice_header:hover {
    background-color: rgba(33, 33, 33, 0.9);
}

#menuWrapper {
    padding:0 0 0 0;
    margin:0 auto 0 auto;
    width:30vw;
    min-width:200px;
    max-width:500px;
    border-radius:10px;
    position: relative;
    display:none;

}

.thisAreaOpen {
   padding-left:0vh;
   padding-right:0vh;
    color: rgba(39, 39, 37,1) !important;
    visibility: visible;
    -webkit-transition: all 0.4s linear !important;
    transition: all 0.4s linear !important;

}
section.area ul li {
    height:2rem;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.4s linear !important;
    transition: all 0.4s linear !important;
}
section.area ul li.changeIcon {
    padding-bottom:3vh;
    -webkit-backface-visibility: hidden;
    visibility:visible;
    -webkit-transition: all 0.4s linear !important;
    transition: all 0.4s linear !important;
}

li.changeIcon::before {

    /* float:right; */
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition:all 0.4s linear;
}
span.buttontext
{
    display: inline-block;
    margin-right: 4vh;
}

#menuWrapper button {
    display: inline-block;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    font-size: 1.5vh;

    color: rgba(39, 39, 37,.91);
    line-height: 3vh;
    font-family: "pill-gothic-900mg";
    margin:0px;
    background: rgba(0,0,0,0);
    width:100%;
    padding:0 0 0 0;
    line-height: 5vh;

}
button:focus {
    outline: none !important;
}
button .menuIcon svg {
    transform: rotate(360deg);
    transition: all 0.5s ease;
}

button.expanded .menuIcon svg {
    transition: all 0.5s ease;
    transform: rotate(180deg);

}

button.expanded .menuIcon svg.svg-inline--fa.fa-arrow-down.fa-w-14 {
    fill:#272725 !important;
}
.menuIcon {

    position:absolute;
    right: 0;
    color: rgba(255,255,255,1);
    background-color: #d9d9d6;
    display:inline-block;

    border-radius: 50%;
    height:4vh;
    width: 4vh;
    line-height: 4vh;
padding-top: 0.1vh

}

#practiceWrap.changePadding {
    padding-top:0 !important;
    transition:all .9s ease !important;
    transition-delay:.3s !important;
}

#welcome {

    width:100%;
}

.welcomeBody {
    line-height:5vh;
    width:70%;
    display: inline-block;
}


/* **** PRACTICE AREA MENU ******* */


span.contactMenu {
    color: rgba(255,255,255,1);
    text-align: right;
    width: 100%;
    display: inline-block;
    padding-right: 12vw;
    padding-top: 1vw;
    line-height: 6vw;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 3vw;
    white-space:nowrap;
}




.marginWrapper.flow {
    background-image: url('assets/tlf_richtoonandbilluedoor.jpg');
    margin: 10.5vh 3vh 3vh 3vh;
    padding: 0 0 0 0;
    height: 55vh;
    width: auto;
    background-size: cover;
    background-position: center center;

}



.opac {
    -moz-animation: fadeOut .7s ease .3s 1 forwards;
      -webkit-animation: fadeOut .7s ease .3s 1 forwards;
      -ms-animation: fadeOut .7s ease .3s 1 forwards;
      animation: fadeOut .7s ease .3s 1 forwards;
}



#angle {
    margin-left:2vh;
    animation: flipOver .5s linear 1;
    transform:rotate(0deg);
    -webkit-transition: all 0.5s linear !important;
    transition: all 0.5s linear !important;
}
#angle.rotator {
    animation: flip .5s linear 1;
    transform:rotate(180deg);
    -webkit-transition: all 0.5s linear !important;
    transition: all 0.5s linear  !important;
}
#areaMenu #practiceAreaMenuList{
    display: inline-block;
    text-align: right;
    height: 0;
    overflow: scroll;
    opacity: 0;
    color: rgba(0,0,0,0);
    font-weight: 300;
    line-height:0;
    font-size:0;
    width:20vw;
    min-width:300px;
    max-width:500px;
    background-color: #ffffff;
    padding: 2vh 3.5vh 2vh 2vh;
    background: rgba(255,255,255,0);
   margin-top:1px;
    margin-right:3.5vh;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    transition: all 0.3s linear !important;
    -webkit-transitionL: all 0.3s linear !important;
    -o-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s linear !important;
}

#areaMenu.hello  #practiceAreaMenuList.openUp {
    height:80vh;
    opacity: 1;
    line-height:2rem;
    color: rgba(0,0,0,.7);
    transition: all 0.3s linear ;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    background: rgba(255,255,255,1);


}
#practiceAreaMenuList ul {
    list-style-type: none;
    margin:0 0 0 0;
    padding:0 0 0 0;
    opacity:0;
}
#practiceAreaMenuList.openUp ul {
    list-style-type: none;
    display: inline-block;
    padding-left: 0px;
    margin: 0 0 0 1vh;
    opacity: 1;
    line-height:2rem;
}

#practiceAreaMenuList.openUp ul li {
    height:2rem;
    line-height:2rem;
}

#practiceAreaMenuList ul, #practiceAreaMenuList h4, #practiceAreaMenuList .blockline {
    opacity: 0;
}

#practiceAreaMenuList.openUp h4, #practiceAreaMenuList.openUp ul, #practiceAreaMenuList .blockline {
    opacity: 1;
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
}

#practiceAreaMenuList.openUp ul li {
    font-size:.75rem;
    line-height:1.5rem;

}

.personalInjury {
    margin-bottom: 0px;
}

#practiceAreaMenuList h4 {
    color: rgba(0,0,0,0);
}

#practiceAreaMenuList.openUp h4 {
    margin: 1.5vh 0;
    font-size: 1rem;
    color: rgba(0,0,0,.7);
}

#practiceAreaMenuList.openUp h4:hover {
    color: rgba(0,0,0,.2);
}

#practiceAreaMenuList.openUp .blockLine {
    border-bottom:1px solid #272725;
    display:inline-block;
    padding-bottom: .35vh;
    line-height: 1.6rem;

}


#practiceAreaMenuList.openUp ul li, #practiceAreaMenuList.openUp h4 {
    cursor: pointer;
}


#practiceAreaMenuList.openUp ul li:hover span{
    color: rgba(0,0,0,1);
    font-weight: 500;
    padding-right:.5vh;

}


/* ************************* PRACTICE AREAS ************************ */

span.bullet, section h4 {
    display: inline-block;
    margin: 0 0 .5vh 0;

}

section h4 {
    font-size : 2.5rem;
    margin-bottom:2vh;
}


span.bullet {
    font-weight:900;
    margin-right: .5vh;
    display:none;
}


#practiceBody h2 {
width:33%;
max-width:600px;
display:inline-block;
vertical-align:top;
margin-top:10vh;
}


#sectionsWrap {
display:inline-block;
max-width:500px;
}

section.area {
    display: block;
    margin:9vh 0 0 0;
    text-align: left;
    transition:all 0.3s ease;

}

section.area:first-of-type {
    margin-top:3vh !important;
}

.description {
    font-weight:300;
    color: rgba(39, 39, 37,.91) !important;
    font-size: 1rem;
    margin: 0 0 0 0;
    line-height:2rem;
}
.scriptHead {
    color: rgba(39, 39, 37,1);
    font-weight:600;
    /* display: none; */

}
 span.scripthead{
    display: block !important;
}
section.area ul {
    list-style-type:none;
    margin:2vh 0 0 0;
    padding:0 0 0 0;

}
section.area ul li {
   height:2rem;
   border-bottom: 1px solid rgba(255,255,255,0);
    -webkit-transition: all 0.4s linear;
    transition: all 0.5s linear;
}

section.area ul li:hover {
    border-bottom:1px solid rgba(0, 0, 0, 0.061);
}

section.area ul li.changeIcon:hover {
    border-bottom:1px solid rgba(255,255,255,0);
}

section ul li span.arealist {
    font-size: 1rem;
    font-weight:300;
    line-height:1.7rem;
    color: rgba(39, 39, 37,.91);
    cursor:pointer;
    float:left;
    padding:0 3vh 0 0;
    line-height:2rem;
    height:2rem;
}

section ul li::before {
    content: '+';
    color: rbga(0,0,0,1);
    line-height:1.9rem;
    height:2rem;
    font-size:.75rem;
    font-weight:500;
   text-align: center;
   width: 10px;
   display: none;
   /* float:right; */

}

.arealist {
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear !important;
}

section ul li:hover .arealist{
    color: rgba(39, 39, 37,1);

    padding-left:1vh;
    -webkit-transition: 0.4s linear;
    transition: all 0.4s linear;

}

section ul li.changeIcon:hover .arealist {
    padding-left:0vh;
}
section ul li:hover::before {
    -webkit-backface-visibility: hidden;
    animation: blink 1s ease 1 2s;
}

section ul li:hover section ul li::before {
    color: rgba(0,0,0,0) !important;
}




#navListWrap #mobileNavList li a.active-link, #main_nav_link_list li a.active-link-desk {
    font-weight:700 !important;
    color: rgba(39, 39, 37,1) !important;
}



#navListWrap #mobileNavList li a.active-link::before {
    content: '\00bb';
    color: #ddd;
    display: inline-block;
    margin-right:10px;
}

#practiceWrap {
    position:relative;
    padding-bottom: 20vh;
}



}
/* ************************ STAFF *************************** */


svg.svg-inline--fa.fa-search.fa-w-16{

    float:right;
    vertical-align: middle;
    height: 31px;
    line-height: 33px;
    color: #ccc;
    margin-right:5px;
    font-size: .6rem;
}


#staffWrap {
    width:70%;
    max-width:1100px;
    margin: auto;
}



.fullBio {
    width:60%;
    float:left;
}


.fullBio p {
    text-indent:3vh;
}

.fullBio p:first-of-type {
    text-indent: 0vh;
}
.bioBreak {
    height:60vh;
    margin-bottom:35vh;

    border: 5px solid rgba(39, 39, 37,1);
    border-radius:1px;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
    flex-direction: column;

}
.bioBreak h1{
    display:inline-block;
    font-size:2rem;
    margin:0 0 0 0;
    color: rgba(39,39,37,1);
    opacity:1;
}

.bioBreak h1:last-of-type, .bioBreak:hover h1:first-of-type {
    color:rgba(0,0,0,0);
    height:0px;
    opacity:0;
    padding-bottom:0vh;

}
.lighter {
    display: block;
    font-weight: 100;
}

.bioBreak:hover {
    background: rgba(39,39,37,1);
    color: rgba(244, 244, 246,1);
    border-radius:10px;

}

.bioBreak:hover  h1:last-of-type {
    opacity:1;
    color: rgba(244,244,246,1);
    padding-bottom:3vh;
    transition: all 0.4s ease;
}

.fullBio p, .educationDetails {
    font-size:1rem;
    font-weight:300;
    line-height:4.5vh;
    color: rgba(39, 39, 37,.81);

    display:inline-block;
}
.fullBio p {
    line-height: 2.4rem !important;
}

.educationDetails P {
    font-size: .75rem;
    line-height: 2rem;
}
.fullBio p:first-of-type:first-letter {
    color: rgba(39, 39, 37,1);
    font-weight:900;
    font-family: 'pill-gothic-300mg', sans-serif;
    float:left;
    vertical-align: bottom;
    font-size: 9rem;
    line-height: 5rem;
    margin-bottom: 0px;

    margin-right:2vh;
}

.educationDetails {
    width: 30%;
    padding:0 3vh;
    line-height: 2.5vh;
    vertical-align:top;
    float:right;
}

span.space {
    display: block;
    height: 1rem;
}

.educationDetails h5 {
    color: rgba(39, 39, 37,1);
    margin-bottom: 0;
}
.educationTitle {
    display:block;

}

span.honor {
    display:block;

}
.honor::after {
    width:40px !important;
    height:1px;
    background: #eee;
    margin:2vh 0;
    display:block;
    content: ''
}
.marginWrapper.multiple {
    -webkit-overflow-scrolling: touch;
    overflow:scroll;
}
.threeColumn {

    margin:35vh auto;
}
.bioLarge {
    margin: auto;
    padding-top:15vh;
    height: 100%;
    overflow:scroll;
}
.bioLarge img {
    width:100%;
    line-height: 0;
    border-radius:7px;
}

.threeColumn a {
    color: rgba(39, 39, 37,1);
    line-height: 0;
}
.bioTop {
    width: 100%;
    display: inline-block;
    padding: 0 0 2vh 0;
    overflow: hidden;
    border-bottom: 1px solid #272725;
    margin-top: 4vh;
    cursor:pointer;
}
.threeColumn img {
    width: 100%;
}
.imageOverlay {
    opacity: 1;
    overflow:hidden;
    display:inline-block;
    box-sizing:border-box;
    background-color: rgba(255,255,255,0);
    transition:all 0.1s ease-out !important;
    /* width:20%; */
}

.bioTop:hover .imageOverlay {
    opacity:.7;
    transition:all 0.1s ease-out !important;
}

span.imageOverlay {
    height:14vh;
    width:14vh;
    border-radius:7px;
    pointer-events:none;
}

.rich-bio-pic {
    background: url("assets/toonlawfirm_richtoon.jpg");
}

.susan-bio-pic {
    background: url("assets/toonlawfirm_susan.jpg");
}

.andrew-bio-pic {
    background: url("assets/andrew-wakeman.jpg");
}

.tony-bio-pic {
    background: url("assets/tony-graham.jpg");
    background-position: top center !important;
}

.tony-pic-large {
    width: auto;
    max-width: 141px;
}

.educationTitle {
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
}

.bio-pic {
    height:100%;
    width:100%;
    background-position:center center;
    background-size:cover;
}

.bioTop:hover .imageOverlay div {
    transform: scale(1.1) !important;
    transition: all 0.1s ease !important;
}
.bolderName {
    font-weight: 700;
    font-size:1.2rem;
    text-transform: uppercase;

}
p.nameTitle  {
    font-weight: 300;
    font-size: 1rem;
    display:inline-block;
    margin:0 0 0 2vh;
    pointer-events: none;
}



.bioLarge p.nameTitle {
    margin: 2vh 0 6vh 0;
    display: block;
    border-bottom: 1px solid #272725;
}

.bioLarge p.nameTitle {
    font-size:.9rem;
    padding-bottom:2vh;
}
.bioLarge p.bolderName {
    font-size:1rem;
}
.toTop {
    height:30vh;
    display:flex;
    align-content:center;
    align-items:center;
    flex-wrap:wrap;
    clear:both;
}

.toTop button, .toTop a {
    display:block;
    text-align:center ;
    width: 100%;
    background-color: rgba(255,255,255,1);
    height:6vh;
    line-height:6vh;
    font-size: .6rem;

}
.toTop a{


    border: 1px solid rgb(221, 221, 221);
    border-radius: 5px;
    transition: all 0.3s ease;

}

.toTop a:hover {
    background-color: rgba(39,39,39,1);
    color: rgba(255,255,255,1);
    transition: all 0.3s ease;
    border: 1px solid rgb(39,39,39);
}

.phoneNumber {
    font-weight: 900;
}

.toTop a:hover .phoneNumber {
    transition: all 0.3s ease !important;
}

.toTop a, .toTop button:last-of-type:hover .backto {
    color: rgba(39, 39, 37,1);

}
.backto  {
    color: #fff;
}

.toTop button {
    margin-top:3vh;
    background-color: #272725;
}


.toTop button:hover {
    background-color: #f4f4f6;
}



@media screen and (max-width: 820px) {
    #practiceBody {
        border-left: 0px dashed #eee;
        border-right:0px dashed #eee;
    }
    #sideBarWrap {
        display: none;
    }

    .bioTop {
        display:block;
        width:100%;


    }
    .fullBio {
        width:100%;
    }
    .fullBio p, .educationDetails {
        display:block;
        width:auto;
        padding-left:0;
    }


    .educationDetails {
        width: 100%;
        font-size: .7rem;
    }

    .honor::after {
        width: 100% !important;
    }

    .educationDetails h5 {
        font-size: .9rem;
    }

    .educationDetails {
        line-height:4.5vh;
    }




    .bioLarge {
        /* padding:4vh; */
        width:100%;
    }

    .bioBreak {
        margin-bottom:35vh;
    }

}

/* ************************ CONTACT *************************** */
#markerInfo {
    min-width:200px;
    max-width:250px;
    margin:auto;
    min-height:100px;
    font-size: .75rem;
    line-height:1.4rem;
    padding:2vh;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#markerInfo p {
    line-height: 1.3rem;

}

.gm-style .gm-style-cc span, .gm-style .gm-style-cc a, .gm-style .gm-style-mtc div {
    display: none;
}
.bigBold {
    font-weight:600;
    color: #272725;
    display:block;
    font-size:1.4rem;
}

span.bigBold::after {
    content: '';
    display: block;
    background: #272725;
    height: 4px;
    border-radius: 120px;
    width: 24%;
    margin-top: 1.5vh;
}

#markerInfo a {
    background-color: rgba(39, 39, 37,1);
    color: rgba(255,255,255,1);
    border-radius: 5px;
    padding:1vh 1.5vh;
    box-sizing: content-box;
    border: 1px solid rgba(39,39,37,0);
    display:block;
    margin-top:1.5vh;
}

#markerInfo a:hover {
    border-radius: 0px;
    background-color: rgba(39,39,37,.1);
    color: rgba(39,39,37,1);

}
.usercontact {
    text-decoration: underline;
}
#thankYouMessage {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000000000000;
    background-color: white;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    text-align:center;
}

#thankYouMessage div {
    margin: auto !important;
    width:40%;
}

#thankYouMessage img {
    width:5%;
    margin-right:2vh
}

#thankYouMessage h2 {
    color: rgba(0,0,0,1);
    display:inline-block;
    font-size:1.3rem;
}
#thankYouMessage p {
    color: rgba(0,0,0,.85);
    line-height:2rem;
    padding-top:20vh;
    margin-bottom:2rem;
    font-size: .75rem;
}
#thankYouMessage img, #thankYouMessage h2 {
    vertical-align:middle;
}
#thankYouMessage button {
    height: 3rem;

    border-radius:100px;
    cursor: pointer;
    width:60%;
    margin: auto;
}
.marginWrapper.mapThang {

 /* z-index:-1; */
  overflow: scroll;

}
#markerClicked {
    width:300px;
    height:200px;
    background-color:white;
    border-radius:5px;
}



  #map {
    position: absolute;
    top: 22vh;
    left: 3vh;
    right: 3vh;
    bottom: 3vh;
    border-radius: 7px;
    cursor:pointer;
}

#mapWrap {
    position: relative;
}
  #contactNav {
    text-align: center;
    position: fixed;
    top: 10vh;
    left:0;
    right:0;
    z-index: 0;
    background-color: #fff;
    padding: 4vh;

    white-space:nowrap;
    display:flex;
    z-index:1;
}
 #contactNav a{
    background-color: #272725;
    color: #ffffff !important;
        padding: 0 3vh;
        height:4vh;
        line-height:4vh;
        border: 1px solid rgba(221, 221, 221, 0);
        width:100%;
        display:block;
        font-size: 1.25vh;
        border-radius:5px;

        letter-spacing:1px;

 }
 #contactNav span {
     content: '';
     width: 2px;
     height:4vh;
     background-color: #ddd;
     display:inline-block;
     margin:0 2vh 0 2vh;
 }
 #contactNav a:hover {
    background-color: #27272508;
    color: #272725 !important;
    border: 1px solid rgba(221, 221, 221, 0);
}
 #findUs h6 a {
     color: #272725;
 }

#contactFormWrap {
    display: none;
    padding:4vh 4vh 8vh 4vh;
    background: #f4f4f6;
    background: url('assets/diagonal-lines-faded.svg');
    background-size:5px;

}


#findUs h6 {
     font-weight:400;
     color: #27272566;
     display:inline-block;
     width: 90%;
     margin:0 0 0 0;
     vertical-align:top;
 }
.borders {
   padding:4vh;
   border:1px solid #ddd;
}

#contact h1 {
    font-size:  1.5rem;
    font-weight:500;
}
#contact {
    padding:10vh;
}
#Layer_1 {
    display:inline-block;
    height:20px;
    vertical-align: top;
    margin-top:4px;
    margin-right: 8px;
}
h6 span {
    border-top: 1px solid #eee;
    display: inline-block;
    padding-top: 10px;
    margin-top: 10px;
}
#numbers {

   padding:25vh 4vh 0 4vh;
    font-weight:400;
    color: rgba(39,39,37,1);
    font-size:1.5vh;
    z-index: -2;
}

#numbers .mediaIcons {
    display: flex;
}
#numbers .mediaIcons a {
    margin: auto;
}
#numbers .mediaIcons a svg {
    transition: all 0.4s ease;
}
#numbers .mediaIcons a svg:hover {
    color: rgba(0,0,0,.4);
}
#numbers table {
    width:100%;

}
table tr {
    height:7vh;
    min-height:50px;
    border-bottom: 1px solid rgba(238, 238, 238,1);
}

#numbers table tr:last-of-type {
    border-bottom: 0px solid;
    height:14vh;
}
#contactUsForm ul li {
    padding:0 5px !important;
}

#contactUsForm ul li:last-of-type {
    padding: 0 0 0 0 !important;
}

#numbers tr td:last-of-type {
    text-align:right;
}

#numbers a {
    color: #272725 !important;
}

#numbers tr td:first-of-type {
    font-weight:500;
}

table {
    border-collapse: collapse;
}
table tr td {
    padding-left:5px !important;
    padding-right: 5px !important;
}
table tr:first-of-type {
    padding:0 0 0 0 !important;
    border-bottom: none !important;
}
tr td:first-of-type, th {
    color: rgba(39, 39, 37,1);
}
th {
    text-align:left;
    font-size:2vh;
    letter-spacing:2px;
    font-weight:400;
    border-bottom: none !important;
}
th::after, #contactUsForm h4::after {
    width: 100%;
    height: 5px;
    background-color: #272725;
    content: '';
    display: block;
    border-radius: 10px;
    margin-top: 2.55vh;
}
#numbers table tr:hover td:last-child {
    color: rgba(0,0,0,1);
}
#numbers .mediaIcons svg {
    color: #3f4148;
    font-size: 2vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
#numbers .mediaIcons {
    white-space:nowrap;
}
#numbers table tr td:last-child, #numbers table tr:hover td:last-child, label, label.cleared, input, textarea, input:focus, textarea:focus, input:hover, textarea:hover {
    -webkit-transition: all 0.4s linear;
    transition: 0.4s linear;
}
/*
~_~_~_~_~_~_~_~_~_~_~_~_~ CONTACT US FORM ~_~_~_~_~_~_~_~_~_~_~_~_~ */
input, textarea, button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 5px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    box-shadow: none !important;
    font-size:1.25vh;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;

}
input {
    height:7vh;
    text-indent: 10px;
}

.topLeft {
    border-top-left-radius: 0px !important;
}



input, textarea {
    background-color: rgba(255,255,255,1);
    border: 1px solid #f3f2f2;
}

input:hover, textarea:hover {
    background: url('assets/diagonal-lines-faded.svg');
    background-size:5px;
    transition: all 0.3s linear;

}

input:focus, textarea:focus, input.ng-touched.ng-invalid:focus, textarea.ng-touched.ng-invalid:focus {
    background: #fff;
    border: 1px solid rgba(0,0,0,.4);
}

input.ng-touched, textarea.ng-touched {
    background: url('assets/diagonal-lines-faded.svg');
    background-repeat: repeat;
    background-size: 3px;
}

input.ng-touched.ng-invalid, textarea.ng-touched.ng-invalid {
    background: url('assets/diagonal-lines.svg');
    background-size:3px;
    background-repeat: repeat;
    border:1px solid red;
}

textarea {
    height:11vh;
    resize:none;
    padding:10px;
    font-family: sans-serif;
}

#contactUsForm button {
    height: 7vh;
    margin-top: 4vh;
    background-color: #272725;
    color: #f4f4f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;

}

#contactUsForm button:hover {
    background-color: #f4f4f6;
    color: #272725;
}
button:hover {
    background-color: #2727251a;
    color: #272725;
    border: none;
}


#contactUsForm ul {
    list-style-type: none;
    padding:0 0 0 0;
    margin:0 0 0 0;
}

label {
    display: inline-block;
    margin-top: 3vh;
    font-weight: 600;
    background-color: #ffffffb0;
    margin-left: 5px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 3px 10px 3px 10px;
    border:1px solid rgba(39, 39, 37,0);
    border-bottom: 0px !important;
    color: #272725;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .75rem;
}

label.cleared {
    color: #fff;
    background-color: rgba(39, 39, 37,1);


}
#contactUsForm {
    margin-top:7vh;

}

#contactUsForm ul li {
    padding:0 0 0 0;
    margin: 0 0 0 0;
}

#contactUsForm h4 {


    text-align: left;
font-size: 2vh;
letter-spacing: 2px;
font-weight: 400;
color: #272725;
}

/* ************************ FOOTER *************************** */


#footer {
    bottom: 0;
}

#footerWrap {
    padding: 2vh 4vh 2vh 4vh;
    background-color: rgba(0,0,0,.95);
}

#footerLeft, #footerRight {
    display: inline-block;
}
#disclaimer {
    background-color: rgba(0,0,0,.9);
    color: rgba(255,255,255,.4);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.208);
}
#disclaimer p {
    font-size: .7rem;
    line-height: 2.1rem;
    padding: 4vh 4vh 4vh 4vh;
}
#disclaimer a {
    color: #fff !important;
}
#bottomBar {
    background-color: rgba(0,0,0,.95);
    color: rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(255,255,255,.09);
    text-align:center;
}

#bottomBar p {
    line-height:5vh;
    font-size:.9rem;
}

#bottomBar a {
    color:rgba(255,255,255,1);
}

#bottomBar a:hover {
    color: rgba(255,255,255,.7);
}



#bottomBar .mediaIcons, #bottomBar p, #bottomBar .makebolder, #disclaimer .makebolder {
    display:inline-block;
    color: rgba(255,255,255,1);

}

#disclaimer .makebolder {
    letter-spacing: 1px;
    font-weight: 800;

}

#bottomBar .mediaIcons {

    text-align: center;

    display:block;
}

#disclaimer .makebolder::before, #footer .makebolder::before {
    display: none;
}

#bottomBar p, #bottomBar, #disclaimer p {
    margin: 0 0 0 0;
    color: rgba(255,255,255,.8);
}

#bottomBar svg {
    display: inline-block;
    margin:2vh 1vh 0vh 1vh;
    height: 1.25vh !important;
    max-height: 1.25vh !important;

}

#bottomBar .mediaIcons .svg-inline--fa.fa-facebook-f.fa-w-9,
#bottomBar .mediaIcons .svg-inline--fa.fa-google-plus-g.fa-w-20,
#bottomBar .mediaIcons .svg-inline--fa.fa-linkedin-in.fa-w-14,
#bottomBar .mediaIcons .svg-inline--fa.fa-twitter.fa-w-16,
{
    height: 1.25vh !important;
    max-height: 1.25vh !important;
}


#preFoot {
    background-color: rgba(244, 244, 246,1);
    color: rgba(39, 39, 37, 1);
    font-weight:300;
    padding:4vh;
    font-size: .7rem;

}

#preFoot table {
    margin: auto;
    width: 100%;
}

#preFoot table tr {
    line-height: 4rem;
    height:4rem;
    background-color: rgba(255,255,255,0);
    overflow:hidden;
}

#preFoot table tr:first-of-type {
    border-bottom: 1px solid rgba(238, 238, 238,1) !important;
}
#preFoot table tr td:first-child {
    border-top-left-radius:3px;
    border-bottom-left-radius: 3px;
    color: rgba(39,39,37,1);
    letter-spacing:1px;
}
#preFoot table tr td:last-child {
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    color:rgba(39, 39, 37,1);
    font-weight: 300;
}
#preFoot table tr td:last-child a {
    color:rgba(39, 39, 37,1);
    font-weight: 300;
}
#preFoot table tr:hover {
    border-bottom:1px solid rgba(255,255,255,0) !important;
}
#preFoot table tr:hover td:first-child {
    background-color:rgba(39, 39, 37,1);
    color: rgba(255,255,255,1);

}
#preFoot table tr:hover td:last-child {
    background-color: rgba(255,255,255,.6);
    color: rgba(0,0,0,1);
    font-weight:400;
    transition: all 0.4s linear;

}

#preFoot table tr:hover td:last-child a {
    color: rgba(0,0,0,1);
    font-weight: 400;
    transition: all 0.4s linear;

}
#preFoot table tr:hover td:last-child, #preFoot table tr:hover td:first-child {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
#topFooterWrap {
    height:0;
}
#preFoot a {
    color: #272725;
}

#preFoot td {
    height:4rem;
    line-height:4rem;
}
#preFoot table:hover tr {
    border-bottom: 1px solid rgba(0,0,0,0) !important;
}

#preFoot table tr td:first-of-type {
    font-weight:600;
}
#preFoot table tr td:last-of-type {
    text-align:right;
}
/* *********************** UNIVERSAL TYPO ********************** */

.linebreak {
    display: inline-block;
}

#sideBarWrap {
    display: none;
}


li.opener.bold .arealist {
  color: rgba(39, 39, 37, 1);
  font-weight: 600;
  font-size: 16px;
  height: 100%;
  display: inline-block;
  width: 100%;
}

li.opener.bold {
  padding-top: 2px;
  padding-bottom: 2px;
}
@media screen and (min-width:1200px){

    #sideBarDetails {
        margin: 0 0 0 3vh;
        max-width: 123px;
        padding-top: 8vh;
    }

    #sideBarDetails::before {
        content: '';
        height:2px;
        background-color: #272725;
        margin:0 0 8vh;
        display:block;
        width:123px;
    }
    input#searchSpace {
        display: inline-block;
        height:30px;
        display:inline-block;
        background-color: rgba(0,0,0,0);
        width:85%;
        border: 1px solid rgba(0,0,0,0);
        text-indent:5px;

    }

    #searchWrap {
       border-bottom: 2px solid #272725;
       margin-left: 3vh;
        width: 123px;
        margin-bottom:8vh

    }

    #sideBarDetails span {
        display: block;
        font-size: .6rem;
        line-height:1.3rem;
        color: #7d7d7d;
    }

    #sideBarDetails a, #sideBarDetails h5, b, #sideBarWrap ul li {
        transition: all 0.4s linear;
        color: rgba(39, 39, 37,1) !important;
    }
     #sideBarWrap ul li:hover {
         color: rgba(204, 204, 204,1) !important;
     }

    #sideBarDetails a {
        margin-top:3vh;
        font-weight:600;
        text-transform:uppercase;
        display: block;
        font-size: .6rem;

    }

    #sideBarWrap {
        display: inline-block;
        position:absolute;
        left: 0;
        top: 9vh;
        text-align: left;
        font-size:.75rem;
        font-weight:300;
        color: rgba(39, 39, 37,1);
        padding-left:1vh;
        padding-top: 0vh;
        transition: all .5s linear !important;
        -webkit-user-select: none;

    }

    .fixMove {
        padding-top:0vh !important;
    }
    #sideBarWrap.fix {
        position:fixed;
        padding-top:18vh;
        padding-left:1vh;
        margin-left:0;
        transition: all .5s linear !important;

    }
    #sideBarWrap ul {
        list-style-type: none;
        margin:0 0 0 0;
        padding:4vh 0 0 3vh;
        height:auto;
        visibility:visible;
        opacity:1;

    }
    #sideBarWrap ul li {
        height:2rem;
        line-height:2rem;
        cursor:pointer;

    }
    #sideBarWrap.fixMove ul {
        opacity: 0;
        height:0;
        padding-top:0vh;
        visibility:hidden;
        transition: all 0.4s ease !important;
    }
    #sideBarWrap.fixMove #sideBarDetails {
        padding-top:0vh;

}
}
@media screen and (max-width: 730px) {

    #bodyContent {
        background-image: url(assets/toonlawfirm_small.jpg);}
    #staffWrap {
        width:100%;
        padding:4vh;
    }
    html {
        font-size: 62%;
    }
    section.area {
        margin-top:3vh;
    }

    section.area:first-of-type {
        margin-top:3vh;
    }
    #thankYouMessage div {
        width:92%;
    }
    section.area .arealist {
        font-size: 1rem !important;
    }
    #thankYouMessage p {
        padding-top:10vh;
    }

    #thankYouMessage h2 {
        font-size: 2rem;
    }
   #break1 {
        display:none;
    }

    #break2 {
        display:flex;
        margin-top:20vh
    }

    .threeColumn {
        width:100%;
        padding:0 0 0 0 !important;
        margin-bottom:15vh;
    }
    .bioLarge {
        width:100%;
    }
    #main_nav_link_list {
        display: none !important;
    }
    #mobileNav {
        display: inline-block;
        position: absolute;
        height:7vh;
        vertical-align:middle;
        right: 4vh;
        text-align:right;
    }
    #mobileNav svg {
        width:2.25vh;
        margin-top:2.55vh;
        display: block;
        position: fixed;
        right: 4vh;
    }
    #mobileNavList {
        background-color: rgba(255,255,255,0);
        transition: all 0.4s ease;
        border-radius:5px;
        margin-top:5vh;
    }
    #navListWrap {
       position: absolute;
       -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    #mobileNavList li {
        text-align: right;
        padding:0vh;
        transition: all 0.2s ease;
    }
    #mobileNav.dig #mobileNavList li:hover {
        background-color: rgba(0,0,0,.04);
    }
    #mobileNav.dig #mobileNavList li:last-of-type:hover, #mobileNav.dig #mobileNavList li  {
        background-color: rgba(0,0,0,0);
    }

    #mobileNavList li a {
        border-bottom: 1px solid rgba(221,221,221,0);
        line-height:2.5vh;
        letter-spacing: 0px;
        transition: all 0.4s ease;
        text-transform: uppercase;
        font-size: 0vh;
        letter-spacing:0px;
    }
    #mobileNav.dig #mobileNavList {
        opacity: 1;
        transition: all 0.4s ease;
        padding:3vh;
        background-color: rgba(255,255,255,1);
        width: 35vw;
    }
    #mobileNav.dig #mobileNavList li {
        padding:1vh 0vh 1vh 0vh;
        transition: all 0.4s ease;
    }

    #mobileNav.dig #mobileNavList li a {
        color: rgba(39, 39, 37,1);
        transition: all 0.4s ease;
        font-weight:400;
        border-bottom: 1px solid rgba(221, 221, 221, 0.4);
        display: inline-block;
        font-size:1.38vh;
        letter-spacing:1px;
        width:100%;
        transition: all 0.3s ease;
    }
    #mobileNav.dig #mobileNavList li a:hover {
        color: rgba(0,0,0,1);
        border-bottom: 1px solid rgba(221, 221, 221, 0);
        transition: all 0.3s ease;
        background-color: rgba(0,0,0,0);
    }
    .homeLink a {
        text-align:center;
        background-color: rgba(0,0,0,0);
        margin-top:2vh;
        transition: all 0.3s ease;
    }
    #mobileNav.dig .homeLink a {
        border:1px solid  rgba(221, 221, 221, .4);
        text-align:center;
        padding:2vh;
        background-color: rgba(0,0,0,0);
        border-radius:2px;
        margin-top:2vh;
        transition: all 0.3s ease;
    }
    #mobileNav.dig .homeLink a:hover {
        background-color: rgba(39, 39, 37,1) !important;
        border: 1px solid rgb(32, 32, 32);
        color: rgba(255,255,255,1) !important;
        transition: all 0.3s ease;
    }
    section h4 {
        margin-bottom:1vh;
        font-family: 'pill-gothic-300mg', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-transform: uppercase;
    }
    #practiceBody {
        margin:0 0 0 0;
        padding: 0 0 0 0;
    }

    #practiceBody section:first-of-type {
        padding-top:4vh !important;
    }

    #practiceBody section {
        padding:8vh 4vh;
    }

    #insuranceBadFaith, #titleIX {
        background-color: #f4f4f6;
    }
    .description {
        line-height: 2rem;
        font-size: 1rem;
        color: #272725;
        max-width:400px;
    }
    #bottomBar {
        padding: 2vh 4vh 4vh 4vh;
        text-align: center;
    }
    #disclaimer p {
        font-size: 1.35vh;
    }
    #bottomBar .mediaIcons {
        display: inline-block;
        border-bottom: 1px solid rgba(255,255,255,.2);
        width: auto;
        padding: 0 0 1vh 0;
    }
    #bottomBar .mediaIcons svg {
        margin:0 1vh 0 1vh;
        height: .5vh;
        max-height: .5vh;
    }
    #bottomBar p {
        line-height:2vh;
        display:block;
        width:100%;
        padding:0 0 0 0;
        margin-top:1vh;
        font-size: 1.1vh;
        letter-spacing:1px;
    }
    .marginWrapper.flow {
        height: 55vh;
        border-radius:7px;
    }

    #topNavContact {
        text-align:center;
        width:100%;
    }

    #topNav svg, .toon_address, #topNavContact p {
        display:none;
    }

    .phone::before {
        content: 'WE PROVIDE FREE CONSULTATIONS     :     ';
        margin:0 0 0 0;
        color: #fff !important;
        letter-spacing: 1px;
    }
    .phone {
        font-weight:300;
        letter-spacing:2px;
    }
   #sectionsWrap {
       max-width:100vw;

   }

   #numbers a {
    color: #272725 !important;
}

   section.area ul {
       margin: 2vh 0 0 0;
   }
   .areaClosed {
       padding:3vh;
   }
   .openThis {
       padding: 3vh 3vh 3vh 3vh;
   }

   .bioBreak {
       margin-bottom: 0vh;
   }
   span.arealist.thisAreaOpen {
       padding-left:3vh;
   }
}


@-ms-keyframes fadeIn{0%{opacity: 0; color:rgba(0,0,0,0);} 100%{opacity: 1; color: rgba(39, 39, 37,1)}}
@-moz-keyframes fadeIn{0%{opacity: 0; color:rgba(0,0,0,0)} 100%{opacity: 1; color: rgba(0,0,0,1)}}
@-webkit-keyframes fadeIn{0%{opacity: 0; color:rgba(0,0,0,0)} 100%{opacity: 1; color: rgba(39, 39, 37,1)}}
@keyframes fadeIn{0%{opacity: 0; color:rgba(0,0,0,0)} 100%{opacity: 1; color: rgba(39, 39, 37,1)}}

@-ms-keyframes fadeOut{0%{opacity: 1; visibility:visible} 100%{opacity: 0; visibility:hidden }}
@-moz-keyframes fadeOut{0%{opacity: 1; visibility:visible} 100%{opacity: 0;   visibility:hidden}}
@-webkit-keyframes fadeOut{0%{opacity: 1; visibility:visible} 100%{opacity: 0;  visibility:hidden}}
@keyframes fadeOut{0%{opacity: 1; visibility:visible} 100%{opacity: 0; visibility:hidden}}

@-ms-keyframes blink{0%{opacity: 1 } 10%{opacity: 0; font-size: .2rem} 20%{opacity: 1; font-size:.75rem} 30%{font-size: .75rem} 100%{opacity:1;}}
@-moz-keyframes blink{0%{opacity: 1 } 10%{opacity: 0; font-size: .2rem} 20%{opacity: 1; font-size:.75rem} 30%{font-size: .75rem} 100%{opacity:1}}
@-webkit-keyframes blink{0%{opacity: 1 } 10%{opacity: 0; font-size: .2rem} 20%{opacity: 1; font-size:.75rem}30%{font-size: .75rem}  100%{opacity:1}}
@keyframes blink{0%{opacity: 1} 10%{opacity: 0; font-size: .2rem} 20%{opacity: 1; font-size:.75rem} 30%{font-size: .75rem} 30%{font-size: .75rem} 100%{opacity:1}}

@-ms-keyframes flip{0%{transform: rotate(0deg)} 100%{transform: rotate(180deg)}}
@-moz-keyframes flip{0%{transform: rotate(0deg)} 100%{transform: rotate(180deg)}}
@-webkit-keyframes flip{0%{transform: rotate(0deg)} 100%{transform: rotate(180deg)}}
@keyframes flip{0%{transform: rotate(0deg)} 100%{transform: rotate(180deg)}}

@-ms-keyframes flipOver{0%{transform: rotate(180deg)} 100%{transform: rotate(0deg)}}
@-moz-keyframes flipOver{0%{transform: rotate(180deg)} 100%{transform: rotate(0deg)}}
@-webkit-keyframes flipOver{0%{transform: rotate(180deg)} 100%{transform: rotate(0deg)}}
@keyframes flipOver{0%{transform: rotate(180deg)} 100%{transform: rotate(0deg)}}