@charset "utf-8";
/* CSS Document */
/* @viewport {
max-width: device-width; 
min-zoom: 0.30;
max-zoom: 0.60; } */



/* MAIN THING IS JUST SINGLE COLUMN CONTENT + UPDATED NAVIGATION  */ 

body {
background-color: transparent; 
font-size: 0.5em;} /* background transparent content doesn't even show up */ 

h1 {
font-size: 24px; /*  */}

header, nav, footer, body { /* May need to increase the logo and headertext as well to match this */
width: 100%;
 } 



.rightservices, .leftservices {
float:  none; 
clear: both; 
overflow: hidden;
margin: 0 auto; } 

 .headingleft, .headingright {
margin-bottom: 20px; 
float: none; 
clear: both;
margin: 0 auto;
margin-bottom: 5px;  }


p.servicesright, p.servicesleft { 
float: none; 
clear: both;
margin: 0 auto; } 

header {
font-size: 0.9em; } /* Was 0.8em */

nav {
font-size: 1em; }


    #menu-icon {

        display:inline-block;}
ul { } 

nav ul, nav:active ul {
display: none; 
border: 2px solid white; 
/* Dom't add width as ul already has one? */
}

nav ul {
min-height: 100px; }

nav:active ul {
height: auto; }

.separator {
border-right: none; 
float: clear; /* maybe remove this too? Just wanting to get rid of border on separator */
} 

nav ul li {
display: block; 
text-align: center; 
width: 100%; 
padding: 10px auto; 
margin: 0; 
}

nav:hover ul {

display: block; }


 footer {
font-size:  0.5em; }



/* img {  
width: 50%; 
height: 50%; } */ /* May affect logo and other elements, may not include this */ 

/* MAIN THING FOR IMAGES IS TO HAVE THEM IN SINGLE COLUMN VIEW ON MOBILE. REMOVE ALL FLOATS AS THEY DO NOT WORK */



#content {
width: 100%;  }


/* HOME PAGE STYLES */  

			.leftservices	{
			 max-width: none;
			 padding: 20px; 
			 float: none;
		/*	 margin-right: 20px; */
		/*	 margin-left: 10px; */
		margin: 0 auto;
			/* margin-bottom: 100px; */ /* Have got <br> tags in the html because the white background doesn't extend otherwise. When this is fixed we will have to add a margin--bottom tag */ 
			/* max-height: 10%; */
			 clear: both;
			}	
			
			.rightservices { 
			 max-width: none;
			 padding: 20px; 
			 float: none;
		/*	 margin-right: 20px; */
		/*	 margin-left: 10px; */
		margin: 0 auto;
			/* margin-bottom: 100px; */ /* Have got <br> tags in the html because the white background doesn't extend otherwise. When this is fixed we will have to add a margin--bottom tag */ 
			/* max-height: 10%; */
			 clear: both;
			}	



h4 {
 height: auto ; /* Having height + line height the same keeps the text on the same line */
			 line-height: auto ; /* height + line height were 5 em before adding duplicate fields in h4 a */
			 /* Line height same as height means text is centered */ 
			 width: auto;
			/* box-shadow: none; */
			 font-size: 2em;
			 		background-color: #070091; /* Old browsers */ 
			 background: linear-gradient(30deg, #070091, #2072f2);
			  background: webkit-linear-gradient(30deg, #070091, #2072f2);
			  background: moz-linear-gradient(30deg, #070091, #2072f2);
			   background: ms-linear-gradient(30deg, #070091, #2072f2);
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	-ms-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;

			  /* was 16 */ 
			 
}
			 			h4 a {
 			 	padding: auto; 
				height: auto ; 
				line-height: auto ; 
				width: auto; 
				font-size: 2em;
  				text-decoration: none; } /* Padding and text-decoration none makes it like a button */


.linebreaks .crazybreaks {
margin-bottom: none; }

.logo {
display: none; 
} 

.logo2 {
			width: 50% !important;
			 height: 100%;
			 padding: auto;
			  border-right: white solid 2px; /* Causing issues */
			 display: inline-block;
			 position: relative;
			 z-index: 13;
			 margin: 0 auto;
			 float: left !important;
} 

/* OUR FIRM PAGE STYLES */
/* AREAS OF PRACTICE PAGE STYLES */ 
.sidebar { } /* Will be in a UL table view on desktop, so can use same trick done for the header to make it responsive for the mobile view. */



/* CONTACT PAGE STYLES */ 
#leftform {
clear: both; 
}

#rightiframe { }