@font-face{
        font-family: Old Script;
        src: url("Old Script.ttf") format("truetype");
        }
        @font-face{
        font-family: Nonserif;
        src: url("Nonserif.ttf") format("truetype");
        }
        @font-face{
        font-family: RomanSerif;
        src: url("RomanSerif.ttf") format("truetype");
        }

body, html
{
	background-color: #FFFFFF;
	font-family: Nonserif, helvetica, sans-serif;
    height:100%;
	width: 100%;
	margin-left: 0;
}

#wrapper
{
	min-height:100%;
    position:relative;
}
        
header
{
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 100%;
    height: 130px;
    color: #000000;       
}

#logo
{
	position: absolute;
	margin-left: 14%;
	top: 0px;
}

h1
{
	margin-left: 8%;
	margin-top: 8px;
	font-family: Old Script;
	font-size: 84px;
}

h2
{ 
	margin-left: 13%;
	margin-top: -115px;
	font-family: Old Script;
	font-size: 84px;
}

#title
{
	position: absolute;
	top: 20px;
	font-family: Nonserif, helvetica, sans-serif;
	font-size: 28px;
	margin-left: 24%;
	line-height: .8;	
	font-style: oblique; 
}

#phone
{
	position: absolute;
	top: 69px;
	font-family: Nonserif, helvetica, sans-serif;
	font-size: 20px;
	margin-left: 63%;
	font-style: oblique;
}

#map
{
	position: absolute;
   font-size: 20px;
   width: 80px;
   text-align: center;
   top: 50px;
   margin-left: 90%;
   height: 34px;
   cursor: pointer;   
   color: white;
   background-color: #666;
   -webkit-transition: background-color 3s linear; 
   -moz-transition: background-color 3s linear;   
}
#map:hover
{
	 background-color: #74AC38;
            -webkit-transition: background-color 1s linear;
            -moz-transition: background-color 1s linear;
}

.fa
{
	position: absolute;
   font-size: 16px;
   width: 40px;
   text-align: center;
   text-decoration: none;
   top: 5px;
   border-radius: 50%;
}

.fa:hover
{
	-webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
}

.fa-facebook
{
   margin-left: 76%;
   background: #3B5998;
  	color: white;
}

.fa-linkedin 
{	
  margin-left: 80%;
  background: #007bb5;
  color: white;
}

.logon
{
	position: absolute;
	top: 4px;
	font-size: 15px;
	margin-left: 87%;
	color: #000000;
	
}

.logon:hover
{
	font-weight: bolder;
	color: #F26B21;
}

#main-nav
{
    position: absolute;
    top: 120px;
    left: 0px;
    width: 100%;
    height: 245px;
    background-color: #666;
}

#main-nav a
{
	width: 50%;
    height: 35px;
    font-size: 18px;
    font-weight: bold;
    text-align: left; 
}

#main-nav a:first-child
{
    position: absolute;
    top: 0px;
    left: 10%;
    text-indent: 3%;
    background-color: #F26B21;
}

#main-nav a:nth-child(2)
{
    position: absolute;
    top: 35px;
    left: 15%;
    text-indent: 3%;
    background-color: #0086CD;
}

#main-nav a:nth-child(3)
{
    position: absolute;
    top: 70px;
    left: 20%;
    text-indent: 5.5%;
    background-color: #6959E4;
}

#main-nav a:nth-child(4)
{
    position: absolute;
    top: 105px;
    left: 25%;
    text-indent: 15.7%;
    background-color: #74AC38;
}

#main-nav a:nth-child(5)
{
    position: absolute;
    top: 140px;
    left: 30%;
    text-indent: 20%;
    background-color: #FCEE21;
}

#main-nav a:nth-child(6)
{
    position: absolute;
    top: 175px;
    left: 35%;
    text-indent: 20.5%;
    background-color: #898CA5;
}

#main-nav a:nth-child(7)
{
    position: absolute;
    top: 210px;
    left: 40%;
    text-indent: 23%;
    background-color: #53177A;
}

h4
{
	font-size: 34px;
 	font-weight: lighter; 
 	font-style: oblique;
}
.blogHeader
{
	font-size: 26px;
	font-weight: bold;
	font-style: oblique;
}
h3
{
	font-size: 34px;
 	font-weight: bold; 
 	font-style: oblique;
 	font-family: Nonserif, helvetica, sans-serif;
}

#content-home, #content-about
{
	margin-top: -710px;
	padding-left: 30%;
	width: 50%;
	text-align: left;
	font-size: 18px;
	font-family: RomanSerif, helvetica, sans-serif;
}

.introPhoto
{
	padding-top: 365px;
	padding-left: 0;
	padding-right: 20%
}

#practiceAreaHeader
{
    padding-top: 0;
    padding-right: 20%;
    padding-left: 0;   
}

#practiceAreaHeader2
{
	padding-top: 38%;
    height: 25%;
    width: 20%;
    text-align: center; 
    font-size:16px;
    font-weight: bold; 
	margin-left: -.6%;
}
.practiceHeader, .practiceHeader2
{	
	Display: block;
	float: left;
	white-space: nowrap;
    text-align: center;
    width: 240px;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    border: 2px;
    padding-top: 4px;
    background-color: #FCEE21;
    margin-top: -4px;
}
#practiceHeader3
{
	text-align: center;
	font-size: 22px;
	font-style: normal;
	font-weight: bold;
	background-color: #FCEE21;

}

#practiceAreas
{
	font-size: 18px;
	line-height: 2.5;
	padding-top: 30px;
	margin-left: 0;
	padding-right: 10px;
	text-align: right;
	width: 220px;
	font-style: oblique;
	font-weight: bold;
	border: 5px solid #666;
	background-color: #666;
}

#content-practice
{
	padding-top: 30%;
	padding-left: 25%;
	width: 50%;
	height: 100%;
	text-align: left;
	font-size: 18px;
	font-family: RomanSerif, helvetica, sans-serif;
}

#focus-positioning
{
	padding-top: 33%;
	padding-left: 13%;
	padding-right: 3%;
}

#form1
{
	padding-top: 33%;
	margin-left: 3%;
	width: 46%;
	float:
}
#resource1
{
	padding-top: 33%;
	margin-left: 3%;
	width: 46%;
	float: left;
}
#form2, #resource2
{
	padding-top: 33%;
	margin-left: 50%;
	float:none;
	
	
}
#focus-area a, #resources1 a,  #resources2 a, #forms1 a, #forms2 a, #landing a, .contact a
{
  font-size: 26px;
  display: inline-block;
  text-decoration: none;
  outline: none;
  color: #C0C0C0;
  background-color: #666;
  border: none;
  border-radius: 15px;
  box-shadow: -5px 5px #FCEE21;
  padding-right: 55px;
  padding-left: 55px;
  padding-top: 25px;
  padding-bottom: 25px;
}
#focus-area a:hover, #resources1 a:hover,  #resources1 a:hover, #resources2 a:hover,#forms1 a:hover, #forms2 a:hover, #landing a:hover, .contact a:hover
{opacity: 0.7;
}
#focus-area a:active, #resources1 a:active, #resources2 a:active, #forms1 a:active, #forms2 a:active, #landing a:active, .contact a:active
{transform: translateY(4px);
        
        -webkit-box-shadow: -3px 3px black; /* old browser support */
        -moz-box-shadow: -3px 3px black;
        -o-box-shadow: -3px 3px black;
        -webkit-transform: translateY(4px);
        -moz-transform: translateY(4px);
        -o-transform: translateY(4px);
}

#landing{font-family: nonserif}

#resources a
{
  font-size: 26px;
  display: inline-block;
  text-decoration: none;
  outline: none;
  color: #546A5A;
  background-color: #666666;
  border: none;
  border-radius: 15px;
  box-shadow: -7px 7px #999;
  padding-right: 55px;
  padding-left: 55px;
  padding-top: 25px;
  padding-bottom: 25px;
}
#body
{  
   padding-bottom: 220px; 
}

footer
{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 200px;
    background-color: #666;
    font-size: 15px;
    text-align: left;
    line-height: 2;
}

.column1
{
	width: 15%;
	float: left;
	padding-top: 20px;
	margin-left: 20px;
}
.column2
{
	width: 18%;
	float: left;
	padding-top: 20px; 
	margin-left: 100px;
}
.column3
{
	width: 15%;
	float: left;
	padding-top: 20px; 
	margin-left: 80px;
}
.column4
{
	width: 30%;
	float: right;
	padding-top: 20px; 
}

#main-nav a.current-page
{ font-size: 24px; font-weight:bolder; font-style: oblique; background-image: url("blackPin1.png"); 
	background-repeat: no-repeat; background-position: right center;}


#main-nav a:link{color: #FFFFFF; text-decoration: none;}
#main-nav a:visited{color:#FFFFFF;}
#main-nav a:hover{color:#FFFFFF; -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1); -o-transform: scale(1.1);}        
#logo a:link{color: #666; text-decoration: none;} 
#logo a:hover{color: #666; text-decoration: none;} 
#logo a:visited{color: #666; text-decoration: none;}  
      
h1 a:link{color: #000000; text-decoration: none;}
h2 a:link{color: #000000; text-decoration: none;}
h1 a:visited{color: #000000; text-decoration: none;}
h2 a:visited{color: #000000; text-decoration: none;}

#title a:link{color: #000000; text-decoration: none;}
#title a:visited{color: #000000; text-decoration: none;}

#practiceAreas a.current
{ outline: 3px solid #000000; outline-offset: 3px;}
#practiceAreas a:link{color: #FCEE21;	 text-decoration: none;}
#practiceAreas a:visited{color: #FCEE21; text-decoration: none;}
#practiceAreas a:hover{font-weight: bolder; color: #000000;}

#practiceAreaHeader a:link{color: #000000;	 text-decoration: none;}
#practiceAreaHeader a:visited{color: #000000; text-decoration: none;}
#practiceAreaHeader a:hover{font-weight: bolder; color: #FFFFFF;}

#practiceAreaHeader2 a:link{color: #000000;	 text-decoration: none;}
#practiceAreaHeader2 a:visited{color: #000000; text-decoration: none;}
#practiceAreaHeader2 a:hover{font-weight: bolder; color: #FFFFFF;}

#practiceHeader3 a:link{color: #000000;	 text-decoration: none;}
#practiceHeader3 a:visited{color: #000000; text-decoration: none;}
#practiceHeader3 a:hover{font-weight: bolder; color: #FFFFFF;}

footer a{text-decoration: none; color: #000000;}
footer a:hover{color: #FFFF00; text-decoration: none;}


#contact
{
	padding-top: 30%;
	margin-left: 4%;
	max-width: 30%;
	border: 5px;
	padding-left: 5%;
}


input[type=text], textarea, input[type=email], input[type=tel]
{
	padding: 8px;
	border: 3px solid #666;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
}
textarea
{ resize: vertical;}

.error
{ color: #FF0000; }

input[type=submit] 
{
	background-color: #74AC38;
		-webkit-transition: background-color 3s linear; 
   		-moz-transition: background-color 3s linear;   
	color: #FFFFFF;
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
	box-shadow: 2px 2px #000000;
}
input[type=submit]:hover
{ background-color: #666;
	-webkit-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
}

#contactInfo
{
	margin-top: -55%;
	margin-left: 55%;
	padding-left: 3%;
	max-width: 30%;
	padding-right: 0%;
	text-align: left;
	margin-bottom: 35%;
	line-height: 2;
	border-style: solid;
}
.blogNav
{
    
    padding-top: 35%;
    left: 2%;
    height: 25%;
    width: 20%;
    text-align: right; 
    font-size:16px;
    font-weight: bold; 
   
}
.blogNav a
{
	color: #0086CD;	
	text-decoration: none;
	line-height: 1.8;
}
.blogNav a:hover
{
	font-weight:bolder; color: #FFFF00; text-decoration: none;
}
.blogNav a:visited
{
	color: #0086CD; text-decoration: none;
}

.blog
{
    
    margin-top: -55%;
    height: 35%;
    margin-left: 28%; 
    width: 55%;
    text-decoration: none;
    text-align: left;  
    line-height: 1.5; 
}
#coming, #thanks
{
	padding-top: 33%;
	padding-left: 30%;
	width: 50%;
	text-align: left;
	font-size: 18px;
	font-family: RomanSerif, helvetica, sans-serif;
}

#civil, #traffic, #family, #immigration, #criminal, #documents, #refund, #privacy, #serviceTerms
{
	margin-top: -40%;
    height: 35%;
    margin-left: 32%;
	width: 50%;
	text-align: left;
	font-size: 18px;
	font-family: RomanSerif, helvetica, sans-serif;
}


.driverToolTip {
    position: relative;
    display: inline-block;
}

.driverToolTip .driverToolTipText {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 102%;
}

.driverToolTip .driverToolTipText::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.driverToolTip:hover .driverToolTipText {
    visibility: visible;
}
@media screen and (min-width: 1900px)
{
	#focus-positioning, #form1, #resource1, #form2, #resource2
	{
	padding-top: 22%;
	padding-left: 13%;
	}
	.blog
	{
		margin-top: -37%;
		width: 40%;
	}
	.blogNav
	{
		padding-top: 25%;    
	}
	#contact
	{
	padding-top: 25%;
	}
	#contactInfo
	{
	margin-top: -30%;
	margin-bottom: 25%;
	}
	#practiceAreaHeader2
	{
	padding-top: 22%;
	}
	#civil, #traffic, #family, #immigration, #criminal, #documents, #refund, #privacy, #serviceTerms
	{
	margin-top: -20%;
    padding-bottom: 5%;
	}
	#content-about
	{
	padding-bottom: 5%;
	}
	#content-home
	{
	padding-bottom: 10%;
	}
	#coming, #thanks{padding-top: 20%;}
}
@media screen and (min-width: 760px) and (max-width: 1000px)
{
	#logo{margin-left: 4%;}
	#phone{margin-left: 53%}
	#map{margin-left: 85%}
	.fa-facebook{margin-left: 68%}
	.fa-linkedin{margin-left: 74%}
	#payment{margin-left: 81%} 
	#content-home, #content-about{padding-left: 35%}
	#focus-positioning, #form1, #resource1, #form2, #resource2{padding-top: 55%;}
	#focus-area a{padding-left: 25px; padding-right: 25px;}
	#resources1 a,  #resources2 a, #forms1 a, #forms2 a{padding-left: 25px; padding-right: 25px;}
	#contact{padding-top: 55%;}
	#contactInfo{margin-top: -80%;margin-left: 60%; margin-bottom: 45%;}
	.blog{margin-top: -90%;}
	.blogNav{padding-top: 55%;}
	#practiceAreaHeader2{padding-top: 52%;}
	#civil, #traffic, #family, #immigration, #criminal, #documents, #refund, #privacy, #serviceTerms{margin-top: -55%;margin-left: 40%;}
	.column2{width: 15%;}
	.column3{width: 12%;}
	#comin, #thanks{padding-top: 45%;}
}