/****************
GENERAL

MOBILE NAV

FOOTER

MOBILE STYLES

/****************
 GENERAL STYLES
****************/
@font-face {
    font-family: 'Lato';
    src:url('/assets/fonts/Lato-Regular.ttf');
}

@font-face {
    font-family: 'Playfair Display';
    src:url('/assets/fonts/PlayfairDisplay-Bold.ttf')
}

body {margin:0;overflow-x:hidden;font-family:'Lato', sans;color:#615d6a;margin-bottom: 27vw;position: relative;z-index: 1;margin-top:10vw;}

h1 {font-size:3vw;font-family:'Playfair Display';font-weight:400;}

h2 {font-size:2.2vw;}

h3 {font-size:1.5vw;}

p {font-size: 1.1vw;line-height: 2vw;word-spacing: .2vw;margin: 1.8vw 0;}

.main-content-container li {font-size:1.1vw;line-height: 2vw;word-spacing: .2vw;}

.titlebar {height: 9vw;background-image: url('/assets/images/slide-one-background.jpg');background-position: 50% 40%;background-color:#615d6b;box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,.65);background-size: 105%;color: white;font-size: 3.5vw;font-family: 'Playfair Display';padding: 6vw 25%;text-align: center;text-shadow: 2px 2px black;}

.titlebar2 {height: 16vw;background-image: url('/assets/images/slide-one-background.jpg');background-position: 50% 40%;background-color:#615d6b;box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,.65);background-size: 105%;color: white;font-size: 3.5vw;font-family: 'Playfair Display';padding: 6vw 25%;text-align: center;text-shadow: 2px 2px black;position: relative;overflow: hidden;}

.page-content-wrapper {padding-bottom:3vw;overflow:hidden;}

.main-content-container {
    display: inline-block;
    width: 60vw;
    vertical-align: top;
}

.main-content-container a {color:#d3a000;}

/**********
PROFILE PAGES
*************/

#attorneyProfile {font-size:1.1vw;}

.attorneyProfilePhoto {float: left;margin-right: 2vw;width: 18vw;}

.profile-pictures {width: 51vw;}

.attorney-information {
	height: 21vw;
	font-size: 1.5vw;
	line-height: 2.55vw;
}

a.vcard {
	background: #38a4d9;
	padding: .5vw 2vw;
	position: relative;
	top: 2vw;
	color: white;
	text-decoration:none;
	transition:.2s;
	z-index:1;
	
}
a.vcard:hover {
	transition:.2s;
	color:#ffcc2a;
}

/*******
contact page
************/

.google-map-contact-page {float: left;height: 23vw;width: 29vw;margin-right: 2vw;margin-bottom:2vw;}

.contact-info-div {min-height:23vw;margin-bottom:2vw;}

/************
  sidebar
*************/

.sidebar {
    display: inline-block;
    width: 21%;
    vertical-align: top;
    margin: 3% 3% 0 6%;
    padding: 2% 2%;
    background-color: #38a4d9;
}

.sidebar .container {border: .1vw solid white;padding: 1vw;}

.sidebar a {color: white;text-decoration: none;font-size: 1.3vw;transition:color .3s ease;}

.sidebar a:hover {color:#ffcc2a;}

.sidebar .title {font-size: 1.8vw;color: white;margin: .5vw 0 1.5vw;}

.sidebar .submenu {display:none;padding-left: 1vw;border-left: 1px solid #fbcf41;}

/*************
    TOP NAV
***************/

header {background:white;position: fixed;width: 100%;top: 0;z-index:2;}
header .top {border-bottom: 1px solid #e0e0e2;padding-top: .6vw;font-size: 1vw;overflow:hidden;}
header .top .left {display: inline-block;padding-left: 3vw;}
header .top .left a.email {padding: 0 3vw;}
header .top .left a.email img {width: 1.8vw;margin-right: .5vw;margin-bottom: -.3vw;}
header .top .left span.phones {}
header .top .left span.phones img {width: 1.6vw;margin-bottom: -.4vw;}
header .top .left span.phones a {padding: 0 1vw;color: black;text-decoration: none;}
header .top .left span.phones a:nth-child(2) {padding-left:.5vw;}
header .top .left span.phones span {}
header .top .right {display: inline-block;float: right;margin-right: 4vw;vertical-align:top;margin-top:-.7vw;}
header .top .right a {}
header .top .right a img {width: 1.8vw;margin: 0 .2vw -.4vw;}
header .top .right .form-credit {display:inline-block;}
header .top .right .payButton {background: #615d6b;color: white;padding: .8vw 1vw;text-decoration: none;margin-left: 1vw;display: inline-block;transition:background .3s ease;}
header .top .right .payButton:hover {background:#38a4d9;}
header .bottom {}
header .bottom .left {display: inline-block;}
header .bottom .left img {height: 6.5vw;margin: .5vw 0;width: auto;margin-left: 3vw;}
header .bottom .right {display: inline-block;vertical-align: top;float: right;margin-top: 3vw;margin-right:3.2vw;}
header .bottom .right a {padding: 0.5vw;text-decoration: none;font-size: 1.2vw;color: #615d6a;}
header .bottom .right a:hover {border-bottom: 4px solid #38a4d9;}

/****************
   MOBILE NAV
****************/
header.mobile-header{
  display:none;
  margin-bottom: 0px;
  position: fixed;
  width: 100%;
  top: 0vw;
  z-index: 10;
  background: white;
  height: 13vw;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.mobile-nav .logo-left a {border-bottom: 0px; margin-top:0;margin-bottom:0;padding-bottom:0;margin-right:0;}

section#logo img {
  width: 23.5vw;
  height:auto;
  position: relative;
  bottom: 0vw;
}

.pull-right {
  display: inline-block;
  float: right;
  width: auto;
  height: 7vw;
  margin-top:1vw;
}

.phone {
  color:#534f5e;
  display: inline-block;
  height: 10vw;
  width: 7vw;
  width:12vw;
  vertical-align: top;
}

.mobile-nav .phone a {
  margin-top: .8vw;
  padding-top: 0;
  border-bottom:0px;
  color:#38a4d9;
}

.phone i {
  font-size: 52px;
  color: black;
  font-size: 52px;
  color: black;
  padding: 12px 0 0 53px;
}

.mobile-nav-btn {
  display: inline-block;
  width: 10vw;
  height: 10vw;
}

div.mobile-nav-btn div.nav-dot {
  height: 1.5vw;
  width: 1.5vw;
  border-radius: 4px;
  background-color: #38a4d9;
  margin: .6vw auto;
  opacity: 1;
  transition: opacity .3s ease;
}

div.mobile-nav-btn div.nav-dot:first-child {
  margin: 2vw auto 0;
}

div.mobile-nav-btn .mobile-dotnav-close {
    color:#38a4d9;
    top: 1.5vw;
    position: absolute;
    width: 6vw;
    right: 3vw;
    opacity:0;}

.logo-left {
    display: inline-block;
}

div.mobile-nav-btn:hover div.mobile-nav{display:block;}

div.mobile-nav {
    display: block;
    vertical-align: top;
    position: absolute;
    background: #534f5e;
    padding: 0px;
    right: 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index: 98;
    overflow: scroll;
    height: auto;
    overflow: scroll;
    transition: top .3s ease;
    width: 44%;
    top:-115vw;
    max-height: 90vh;
}

div.mobile-nav ul {
  list-style: none;
  padding:0 30px;
}

div.mobile-nav ul li {
  margin: 20px auto;
  font-size: 17px;
}

div.mobile-nav ul li a {
  border-bottom: 1px solid #e6e6e6;
  width: 100%;
  display: inline-block;
  padding-bottom: 9px;
}

.mobile-nav a {
  font-size: 3vw;
  text-decoration: none;
  display: block;
  margin: 1vw 1vw;
  padding: 1.5vw 0 4vw;
  border-bottom: 1px solid #e1e1e1;
  color:white;
}

header nav.mobile-nav {
  height: 13vw;
  width:100%;
  background-color: white;
  position: relative;
  z-index: 9;
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}

.mobile-nav-practice-areas-menu {display:none;}

div.mobile-nav-screen {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

header > div.sidebar-nav {
  position: relative;
  width: 95%;
  background-color: #534f5e;
  color: white;
  height: auto;
  max-height:78vh;
  top: -90vh;
  z-index: 5;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  border-bottom: 0;
  transition: top .3s ease;
  padding-left: 5%;
  overflow-y: scroll;
  padding-top:6vw;
  padding-bottom:5vw;
}
header > div.sidebar-nav .submenu {padding-left:6vw;}
header > div.sidebar-nav .submenu a {padding-bottom:1vw;}
header .sidebar-nav ul {
    padding-left: 3vw;
    margin-top: 0;
    margin-bottom: 0;
}
header .sidebar-nav li {
    list-style:none;
    margin: 3vw 0;
    padding-bottom: .8vw;
}
.sidebar-nav a {
    color: white;
    text-decoration: none;
    font-size: 4vw;
    line-height:6vw;
    display:block;
}
header > div.button {
  position: fixed;
  top: 13vw;
  z-index: 8;
  width: 100%;
  padding: 2vw;
  text-align: center;
  background-color: #534f5e;
  color: white;
  font-size: 3.7vw;
  height: auto;
  border-bottom: 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

@media (max-width:850px) {
  header {display:none;}
  header.mobile-header {display:block;}
  header.header-post {display:block;}
  body {padding-top:21.4vw;}
}


/**************
 BLOG PAGE
**************/

.main-content-container.blog .post-meta a, .main-content-container.blog .post-meta p, .main-content-container.blog .post-meta {transition:.3s;font-size:1.1vw;display: inline-block;vertical-align: top;color:#534f5e;font-size:inherit;margin:0;line-height:1.1;padding:0 .1vw;}

.main-content-container.blog h2 a{font-size: 3vw;
  color:#534f5e;
  font-family: 'Playfair Display';
  transition:.3s;
  font-weight: 400;}

.main-content-container.blog article{
      border-bottom:1px solid #e0e0e2;
      margin-bottom:3vw;
      padding-bottom:7vw;}

.main-content-container.blog article h2 a:hover{color:#d3a000}

.main-content-container.blog .post-meta a:hover{color:#d3a000}

.main-content-container.blog article .button{
  background-color: #38a4d9;
  color:#fff;
  padding:1vw 2vw;
  text-decoration: none;
  transition:all .3s ease-in-out;
  position: relative;
  top:2vw;
  font-size:inherit;
  font-size:1.1vw;
}

.main-content-container.blog article .button:hover{
  background-color: #d3a000;
}
.main-content-container.blog article:last-of-type{
  border-bottom:none;
}


.sidebar a{
  display: block;
  margin-bottom:1vw;
}


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

.section-form {background: #444;height: 31vw;padding-top: 1px;background-image: url('/assets/images/form-background.jpg');background-size:cover;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);overflow:hidden;}
.section-form .title {color: white;text-align: center;font-size: 2.8vw;margin: 3.5vw auto .5vw;font-family:'Playfair Display';}
.section-form .form-container {width: 100%;height: 24vw;}
.section-form .form-container iframe {width: 100%;padding: 0% 20%;height: 188%;border: 0;}

.sticky-footer {position: fixed;bottom: 0;width: 100%;z-index: -1;}

.footer-info {height: 21vw;padding-top: 1px;background-color: #615d6b;}
.footer-info img.logo {height: auto;width: 22vw;margin: 2vw auto 0;display: block;}
.footer-info .line {height: 1px;background: #554e5e;margin: 2vw auto;width: 32vw;}
.footer-info .social-media {text-align: center;}
.footer-info .social-media a {color: white;padding: 0 .3vw;}
.footer-info .social-media a img {width: 2vw;}
.footer-info .footer-links {text-align: center;margin: 1.5vw;}
.footer-info .footer-links a {color: white;padding: 0 1vw;font-size: 1vw;text-decoration: none;transition:color .3s ease;}
.footer-info .footer-links a:hover{color:#d3a000;}

.copyright {
  padding: 1.5vw 28% 4vw;
  font-size: .8vw;
  background: #615d6b;
  color:white;
  position: relative;
}

.copyright span {
  float:right;
  position: relative;
  bottom:.3vw;
}

.copyright a {
    color:white;
}

.copyright a:hover {color:#d3a000;}

.copyright img {position: relative;top: .2vw;}


/*****************
  MOBILE STYLES
*****************/
@media (max-width:850px) {
  body {padding-top: 21vw;margin-bottom:76vw;margin-top:0;}
  h1{font-size:8vw;}
  h1.page-title {font-size:8vw!important;}
  h2{font-size: 4.7vw;}
  h3 {font-size:3.8vw;}
  p {font-size:4vw;line-height:5vw;}
  #attorneyProfile {font-size:4vw;line-height:5vw;}
  .attorneyProfilePhoto {width:43vw;}
  .main-content-container li {font-size:4vw;line-height:5vw;}
  .titlebar {height:19vw;padding:9vw 9%;font-size:5.5vw;}
  .sidebar {display:none;}
  .main-content-container {display: block;width: 90%;margin:0 auto;}
  .profile-pictures {width: 100%;}
  .copyright {height: 18vw;font-size: 3.5vw;padding-top: 5vw;padding:1.5vw 7% 4vw;text-align: center;}
  .copyright span {float:unset;margin-top:3vw;display: block;}
  .copyright img {width:16vw;}
  .section-form {height:141vw;background-position: 62% 50%;}
  .section-form .form-container iframe {height:141vw;padding:0% 10%;}
  .section-form .title {font-size:8vw;margin: 5.5vw auto;}
  .footer-info {height:54vw;}
  .footer-info img.logo {width: 28vw;}
  .footer-info .line {height:3px;width:32vw;}
  .footer-info .social-media a img {width:9vw;}
  .footer-info .footer-links a {font-size:4vw;line-height:8vw;}
  .attorney-information {height: 53vw;font-size: 3.5vw;line-height: 5.55vw;}
  .main-content-container.blog h2 a{font-size:6vw}
.main-content-container.blog article .button{padding:2vw 4vw}
.main-content-container.blog .post-meta a, .main-content-container.blog .post-meta p, .main-content-container.blog .post-meta {font-size:4vw;}
.main-content-container.blog article .button{font-size:4vw;top:7vw;padding:3vw 5vw;}
.main-content-container.blog article{padding-bottom:18vw;margin-bottom:7vw;}
.main-content-container.blog .post-meta {padding:1vw 0 2vw;}

a.vcard {padding: 2.5vw 7vw;top: 5vw;}

}