﻿/* standard css */
body {font-family: 'PT Sans', sans-serif; font-size: 18px; color: #000000; background-color: #fff; margin: 0px; padding: 0px}
h1 {color: #333333}
h2 {color: #002172}
h3 {color: #514746; font-size: 24px}
a {color: #A51F01}


/* public.master */
#template {margin-top:40px}


/* header */
header {border-bottom: 0px solid #BEACA2}
.top-header {text-align: right ;padding: 0; margin: 0}
    .top-header > li {display: inline-block}
    .top-header > li:nth-child(2) {padding: 0 25px 0 25px; background-color: #002374; color: #fff}
    .social-media li {display: inline-block; padding: 0 5px 0 5px}
.btn-social-icon {color: #C2C2C2}
    header img {position: relative; z-index: 5; margin: 0; padding: 10px/*border: 2px dashed purple*/}
.logo {width: 35%}
#navigation {position:relative; width: 65%; text-align:right; height: auto; z-index: 3; margin-top: -39px; float: right}
.click-nav {position: absolute; float: right; display: none; width: 100%; padding-top: 5px; z-index: 6/*border: 2px dashed black*/}
.click-nav span {padding: 10px 12px 10px 12px; background-color: #002374; border-radius: 5px; color: #fff}
.click-nav span:hover {background-color: #DCC47D}
.click-nav > ul {list-style-type: none; padding: 0 5% 0 5%; /*border: 2px dashed green*/}
.click-nav > ul > li {float:right; text-align: right; /*border: 2px dashed blue*/}
.click-nav > ul > li > ul {width: 200px; background-color: #002374; list-style-type: none; padding: 0; margin-top: 10px; text-align: center; /*border: 2px dashed green*/}
.click-nav > ul > li > ul a {line-height:40px; font-family: 'PT Sans', sans-serif; font-size: 22px; text-decoration: none; color: #fff;  padding: 0; margin: 0; /*border: 2px dashed red*/}
.click-nav > ul > li > ul a li {padding: 5px; margin: 0; align-content: center; border-bottom: 1px solid #D1D1D1 /*border: 2px dashed orange*/}
.click-nav > ul > li > ul a li:hover {background-color: #DCC47D}


/* default css */
.container {width:100%; margin:0; padding:0}
.row {width:100%; margin:0; padding:0}
.divider {width:100%; position: relative; background-color: #F5F5F5; padding: 0; margin: 0}
#textcont {text-align: center; padding: 2% 0 0% 0}
.default-cont0 {position: relative; height: 550px; width: 30%; padding: 0; margin: 1% 5% 1% 15%; border: 1px solid #DCC47D}
    .default-cont0 > p {font-size: 14px; color: #BEACA2; text-align: center}
    .default-subcont00 {padding-bottom: 10px; /*border-bottom: 1px solid #DCC47D*/}
        .default-subcont00 img {padding: 10px}
    .default-subcont0 {background-color: #514746; color: #fff; font-size: 28px; padding: 5px 0 5px 0; text-align: center /*text-align: center*/}
        .default-subcont0 span {font-size: 16px}
    .default-subcont1 {padding: 0 25px 20px 25px}
        .default-subcont1 a {text-decoration: none}
.default-cont00 {position: relative; height: 550px; width: 30%; padding: 0 0 10px 0; margin: 1% 15% 1% 5%; /*border: 1px dashed blue*/}
    .default-cont00 img {height: auto; width: 100%}
    .default-cont00 p {padding-top: 15px}
.default-cont1 {position: relative; min-height: 575px; width: 30%; padding: 0 0 10px 0; margin: 1% 15% 1% 5%; /*border: 1px dashed blue*/}
    .default-cont1 img {height: auto; width: 100%}
    .default-cont1 p {padding-top: 15px}
.default-cont2 {position: relative; min-height: 575px; width: 30%; padding: 0 0 10px 0; margin: 1% 5% 1% 15%; /*border: 1px dashed blue*/}
    .default-cont2 img {height: auto; width: 100%}
    .default-cont2 p {padding-top: 15px}
.grow {transition: all .2s ease-in-out}
    .grow:hover {transform: scale(1.075)}
.image-wrapper0 {position: relative; width: 100%}
    .image-wrapper0 h2 {position: absolute; top: 30%; left: 20%; right: 10%; width: 60%; margin: 0; padding: 10px 20px 10px 20px; font-size: 32px; font-weight: 900; 
                       color: #fff; border: 6px solid #fff; border-radius: 5px; text-transform: uppercase; text-align: center}
.image-wrapper {position: relative; width: 100%}
    .image-wrapper h2 {position: absolute; top: 30%; left: 20%; right: 10%; width: 60%; margin: 0; padding: 10px 20px 10px 20px; font-size: 32px; font-weight: 900; 
                       color: #fff; border: 6px solid #fff; border-radius: 5px; text-transform: uppercase; text-align: center}



/* estate planning & administration (not using) */
.estate-cont0 {position: relative; height: auto; width: 30%; padding: 0; margin: 1% 1% 1% 15%; border: 1px dashed green}
    .estate-cont0 img {width: 100%}
.estate-cont1 {position: relative; min-height: 350px; width: 38%; padding: 0; margin: 1% 15% 1% 1%; border: 1px dashed green}
    .estate-cont1 p {padding: 20px 10px 10px 10px}
.estate-subcont0 {background-color: #514746; color: #fff; font-size: 36px; padding: 10px 0 10px 0; margin: 0px; text-align: center}
.estate-cont2 {position: relative; height: auto; width: 70%; padding: 20px 10px 10px 10px; margin: 1% 15% 1% 15%; border: 1px dashed green}
    .estate-cont2 p {padding-top: 10px}


/* practice areas */
.practice-area-cont0 {position: relative; min-height: 700px; width: 70%; padding: 0; margin: 1% 15% 1% 15%; /*border: 1px dashed green*/}
    .practice-area-cont0 img {width: 60%; float: left; padding: 0 20px 20px 0}
    .practice-area-cont0 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center; /*border: 1px dashed blue*/}
    .practice-area-cont0 p {padding: 10px}


/* business transactional law (not using this) */
.business-cont0 {position: relative; height: auto; width: 30%; padding: 0; margin: 1% 1% 1% 15%; border: 1px dashed green}
    .business-cont0 img {width: 100%}
.business-cont1 {position: relative; min-height: 350px; width: 38%; padding: 0; margin: 1% 15% 1% 1%; border: 1px dashed green}
.business-subcont0 {background-color: #514746; color: #fff; font-size: 36px; padding: 10px 0 10px 0; margin: 0px; text-align: center}
    .business-cont1 p {padding: 20px 10px 10px 10px}


/* our attorneys */
.attorney-cont0 {position: relative; min-height: 800px; width: 70%; padding: 0; margin: 1% 15% 1% 15%; /*border: 1px dashed green*/}
    .attorney-cont0 img {width: 40%; float: left; padding: 0 20px 20px 0}
    .attorney-cont0 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center; /*border: 1px dashed blue*/}
    .attorney-cont0 p {padding: 10px}
    .attorney-cont0 a {text-decoration: none}
.attorney-cont1 {position: relative; min-height: 800px; width: 70%; padding: 0; margin: 1% 15% 1% 15%}
    .attorney-cont1 img {width: 80%; float: left; padding: 0 20px 20px 0}
    .attorney-cont1 p {width: 80%; float: left; clear: both; padding: 10px}
    .attorney-cont1 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center}
    .attorney-cont1 ul {list-style-type: none; padding: 15px; margin: 0; text-align: center}
    .attorney-cont1 li {padding-top: 20px; font-weight: 600}
    .attorney-cont1 a {text-decoration: none}
.attorney-cont2 {position: relative; min-height: 800px; width: 70%; padding: 0; margin: 1% 15% 1% 15%}
    .attorney-cont2 img {width: 70%; float: left; padding: 0 20px 20px 0}
    .attorney-cont2 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center}
    .attorney-cont2 ul {list-style-type: none; padding: 15px; margin: 0; text-align: center}
    .attorney-cont2 li {padding-top: 10px; font-weight: 600}
    .attorney-cont2 a {text-decoration: none}
.attorney-cont3 {position: relative; min-height: 800px; width: 70%; padding: 0; margin: 1% 15% 1% 15%}
    .attorney-cont3 img {width: 80%; float: left; padding: 0 20px 20px 0}
    .attorney-cont3 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center}
    .attorney-cont3 ul {list-style-type: none; padding: 15px; margin: 0; text-align: center}
    .attorney-cont3 li {padding-top: 20px; font-weight: 600}
    .attorney-cont3 a {text-decoration: none}


/* contact */
.google-maps {position: relative; padding-bottom: 75%; /* This is the aspect ratio */ height: 0; overflow: hidden; border: 4px solid #514746}
.google-maps iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important}

.contact-cont0 {position: relative; height: auto; width: 40%; padding: 10px; margin: 2% 30% 2% 30%}
.contact-cont1 {position: relative; height: auto; width: 30%; padding: 0 0 10px 0; margin: 2% 15% 2% 5%}
    .contact-cont1 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center}
    .contact-cont1 address {text-align: center; padding: 15px; font-weight: 500}
    .contact-cont1 img {height: auto; width: 100%}
    .contact-cont1 p {padding-top: 10px}
.contact-cont2 {position: relative; height: auto; width: 30%; padding: 0 0 10px 0; margin: 2% 5% 2% 15%}
    .contact-cont2 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0; text-align: center}
    .contact-cont2 address {text-align: center; padding: 15px; font-weight: 500}
    .contact-cont2 img {height: auto; width: 100%}
    .contact-cont2 p {padding-top: 15px}
.contact-cont3 {position: relative; height: auto; width: 70%; padding: 10px 0 10px 0; margin: 2% 15% 2% 15%; text-align: center}
    .contact-cont3 img {width: 70%; margin: 0 15% 0 15%}


/* privacy */
.privacy-cont1 {position: relative; height: auto; width: 70%; padding: 10px 0 10px 0; margin: 1% 15% 1% 15%}
    .privacy-cont1 h1 {background-color: #514746; color: #fff; font-size: 36px; padding: 20px; margin: 0 0 2% 0; text-align: center}
    .privacy-cont1 p {padding: 10px 0 10px 0}
    .privacy-cont1 a {text-decoration: none}
    


/* footer */
footer {position: relative; clear: both; background-color: #000000; color: #807448; min-height: 80px; font-size: 16px; padding: 20px}
    footer ul {list-style-type: none}
    footer a {text-decoration: none; color: #DCC47D} /* for the privacy section link */
    footer a:hover {color: #A51F01; text-decoration: none}
    footer address {font-size: 14px; color: #989898; width: 200px; margin: auto}
        footer address p {font-size: 18px}
        footer address span {color: #DCC47D}
        footer > p {font-size: 14px; text-align: center; padding: 40px 0 0 0}


/* responsive site */
@media (max-width: 1788px) {
    .image-wrapper0 h2 {font-size: 26px}
    .image-wrapper h2 {font-size: 26px}
}

@media (max-width: 1507px) {
    .image-wrapper0 h2 {left: 10%; right: 10%; width: 80%}
    .image-wrapper h2 {left: 10%; right: 10%; width: 80%}
}

@media (max-width: 1336px) {
    .attorney-cont2 {height: auto; width: 80%; margin: 5% 10% 2% 10%}
    .attorney-cont2 img {width: 100%; float: none; padding: 0; margin: auto}
    .attorney-cont2 h1 {font-size: 28px; margin: 5% 0 0 0}
    .attorney-cont2 li {padding-top: 15px}

    .attorney-cont3 {height: auto; width: 80%; margin: 5% 10% 2% 10%}
    .attorney-cont3 img {width: 100%; float: none; padding: 0; margin: auto}
    .attorney-cont3 h1 {font-size: 28px; margin: 5% 0 0 0}
    .attorney-cont3 li {padding-top: 15px}
}

@media (max-width: 1359px) {
    #navigation {margin-top: -33px}
}

@media (max-width: 1292px) {
    .image-wrapper0 h2 {font-size: 22px}
    .image-wrapper h2 {font-size: 22px}
}

@media (max-width: 1203px) {
    .attorney-cont1 {height: auto; width: 80%; margin: 5% 10% 2% 10%}
    .attorney-cont1 img {width: 100%; float: none; padding: 0; margin: auto}
    .attorney-cont1 p {width: 100%; float: none; padding: 0; margin: auto}
    .attorney-cont1 h1 {font-size: 28px; margin: 5% 0 0 0}
    .attorney-cont1 li {padding-top: 15px}
}

@media (max-width: 1126px) {
    .image-wrapper0 h2 {font-size: 18px}
    .image-wrapper h2 {font-size: 18px}
}

@media (max-width: 1083px) {
    .default-subcont0 {font-size: 24px}
}

@media (max-width: 991px) {
    .default-subcont1 p {font-size: 89%}
    .default-cont00 p {font-size: 89%}
    .default-cont1 {height: auto; width: 80%; margin: 1% 10% 1% 10%}
    .default-cont2 {height: auto; width: 80%; margin: 1% 10% 1% 10%}
    .image-wrapper h2 {top: 32%; left: 20%; right: 10%; width: 60%; font-size: 32px}

    .estate-cont0 {height: auto; width: 80%; margin: 3% 10% 2% 10%}
    .estate-cont1 {height: auto; width: 80%; margin: 1% 10% 1% 10%}
    .estate-subcont0 {font-size: 28px}
    .estate-cont2 {width: 80%; margin: 1% 10% 1% 10%}

    .practice-area-cont0 {height: auto; width: 80%; margin: 5% 10% 2% 10%}
    .practice-area-cont0 img {width: 100%; float: none; padding: 0; margin: auto}
    .practice-area-cont0 h1 {font-size: 28px; margin: 5% 0 0 0}

    .attorney-cont0 {height: auto; width: 80%; margin: 5% 10% 2% 10%}
    .attorney-cont0 img {width: 100%; float: none; padding: 0; margin: auto}
    .attorney-cont0 h1 {font-size: 28px; margin: 5% 0 0 0}

    .contact-cont0 {width: 60%; margin: 2% 20% 2% 20%}
    .contact-cont1 {width: 60%; margin: 2% 20% 2% 20%}
        .contact-cont1 h1 {font-size: 28px}
    .contact-cont2 {width: 60%; padding: 0 0 40px 0; margin: 5% 20% 2%   20%}
    .contact-cont2 h1 {font-size: 28px}
    .contact-cont3 {width: 60%; padding: 10px 0 10px 0; margin: 2% 20% 5% 20%}
    .contact-cont3 img {width: 100%; margin: 0}

    .privacy-cont1 {width: 60%; margin: 1% 20% 1% 20%}
    .privacy-cont1 h1 {font-size: 28px}
    .privacy-cont1 h2 {font-size: 24px}
    .privacy-cont1 p {font-size: 16px}
    .privacy-cont1 ul {font-size:16px}

    .business-cont0 {height: auto; width: 80%; margin: 3% 10% 2% 10%}
    .business-cont1 {height: auto; width: 80%; margin: 1% 10% 1% 10%}
    .business-subcont0 {font-size: 28px}
}

@media (max-width: 883px) {
    #navigation {display: none}
    header img {padding: 20px}
    .logo {width: 100%}
    .click-nav {display: inline}

    .default-cont0 {height: auto; width: 80%; margin: 2% 10% 2% 10%}
    .default-subcont0 {font-size: 28px}
    .default-subcont1 p {font-size: 100%}
    .default-cont00 {height: auto; width: 80%; margin: 2% 10% 2% 10%}
    .default-cont00 p {font-size: 100%}
    .default-cont1 {margin: 2% 10% 2% 10%}
    .default-cont2 {margin: 2% 10% 2% 10%}
    .image-wrapper0 h2 {top: 32%; left: 20%; right: 10%; width: 60%; font-size: 32px}
}

@media (max-width: 768px) {
    footer ul {width: 150px; padding: 0; margin: 1% 0 1% 3%}
    footer address {width: 175px; padding: 0; margin: 1% 25% 1% 0%}
}

@media (max-width: 640px) {
    .image-wrapper0 h2 {top: 28%; left: 10%; right: 10%; width: 80%; font-size: 26px}
    .image-wrapper h2 {top: 28%; left: 10%; right: 10%; width: 80%; font-size: 26px}

    footer ul {display: none}
    footer address {display: none}
    footer > p {padding: 0 0 0 0}
}

@media (max-width: 640px) {
    .image-wrapper0 h2 {font-size: 22px}
    .image-wrapper h2 {font-size: 22px}
}

@media (max-width: 423px) {
    .image-wrapper0 h2 {top: 23%; font-size: 18px}
    .image-wrapper h2 {top:23%; font-size: 18px}
}

@media (max-width: 320px) {
    .image-wrapper0 h2 {top: 20%; font-size: 16px}
    .image-wrapper h2 {top:20%; font-size: 16px}
}

@media (max-width: 304px) {
    .google-maps {display: none}
    .contact-cont3 p {font-size: 16px}
}

@media (max-width: 292px) {
    .practice-area-cont0 h1 {font-size: 24px}
}

@media (max-width: 283px) {
    .top-header > li:nth-child(2) {padding: 0 10px 0 10px}
    .social-media li {display: inline-block; padding: 0 2px 0 2px}
}