body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: 'Open Sans', sans-serif;}
a[href^=tel] {color:inherit;text-decoration:none;}
a {text-decoration: none;}
a img {border:none;}
img, object, embed, video {max-width: 100%;}
.container {width: 100%;max-width: 1920px;margin: 0px auto;}
.google-maps {position: relative;padding-bottom: 75%; // This is the aspect ratioheight: 0;overflow: hidden;}
.google-maps iframe {position: absolute;top: 0;left: 0;width: 96% !important;height: 100% !important;}
.wrap {margin:0 auto;width:80%;max-width:1300px;}
#header, #footer {width:100%;float:left;}
#header {height:60px;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));color:white;}
#headertelephone {float:left;width:50%;font-size:1.3em;color:white;padding-top:14px;text-align:left;font-weight:400;}
#headeremail {float:left;width:50%;font-size:1.3em;color:white;padding-top:14px;text-align:right;font-weight:400;}
#headeremail a{text-decoration:none;color:white;}

#brandheader {height:100px;background:white;}
#firmname {font-size:2.5em;color:black;line-height:1.5;text-align:center;font-weight:400;font-family: 'Cinzel', serif;text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 6px;}
#birmingham {font-size:1.4em;color:black;line-height:0.8;text-align:center;font-weight:400;font-family: 'Cinzel', serif;}

#footer {min-height:150px;height:auto;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));color:white;font-weight:300;line-height:1.4em;font-size:1.1em;}
#footer a {text-decoration:none;color:black;font-weight:400;}
#footer a:hover {text-decoration:underline;}
#footercolumn {width:31%;margin-left:1%;margin-right:1%;float:left;margin-top:5px;}
#badge {width:31%;margin-left:1%;margin-right:1%;float:left;margin-top:5px;}

#maincontent {width:100%;min-height:500px;background:white;color:black;font-weight:300;font-size:1.2em;line-height:1.9em;padding-bottom:150px;}
#maincontent ul {padding:10px 0px 0px 10%;}
#maincontent a {text-decoration:none;color:#C00;}
#maincontent a:hover {text-decoration:underline;}
#maincontent h1 {font-size:1.6em;color:#C00;text-align:left;font-weight:500;}
#maincontent h2,h3,h4,h5,h6 {font-size:1.4em;color:#C00;text-align:left;font-weight:500;}

#gradborder {height:10px;width:100%;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));}
#gradborderbottom {height:10px;width:100%;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));}
#break {height:5px;width:100%;background-color:#ffffff;clear:both;}
#indexintro{margin: 0px auto;color:black;text-align:left;width:100%;padding-top:10px;font-weight:300;font-size:1.1em;line-height:1.8em;}
#indexintro h1{font-size:1.4em;color:black;font-weight:500;text-align:center;margin: 0 0 0 0;padding:0 0 0 0;}
#contactbox {width:39%;margin-right:4%;padding:15px 3% 15px 3%;float:left;border:1px solid grey;margin-bottom:20px;}


/* START of Image slider */
/*
https://www.quora.com/What-is-the-explanation-for-this-CSS-code
http://thenewcode.com/627/Make-A-Responsive-CSS3-Image-Slider
*/

.cinzel-<uniquifier> {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
@keyframes slidy {
0% { left: 0%; }/*these values are the timing of each slide as a percentage of the total*/
20% { left: 0%; }/*the left percentage refers to the total size of the slides - example had four slides and was 400% - 500% seems tp work with six - expand if more than this*/
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }/*see SH Notaries for an improved version with a 99.99% addition for the last frame*/ 
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;/*100 divided by the number of slides*/ float: left; }
div#slider figure { position: relative;width: 500%;/*100 multiplied by the number of slides*/margin: 0;left: 0;text-align: left;font-size: 0;animation: 40s slidy infinite;/*total animation time*/  }
/* END of Image slider */

/* START of text slider */
@keyframes slidy {
0% { left: 0%; }/*these values are the timing of each slide as a percentage of the total*/
20% { left: 0%; }/*the left percentage refers to the total size of the slides - example had four slides and was 400% - 500% seems tp work with six - expand if more than this*/
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }}
#testimonial {font-size:1.6em;color:black;text-align:center;font-weight:400;margin-top:50px;}
#box {width: 20%;/*100 divided by the number of slides*/ float: left;color:black;height:200px;font-size:1.2em;text-align:center;}
div#textslider { overflow: hidden; width:80%;margin-left:10%;}
div#textslider figure { position: relative;width: 500%;/*100 multiplied by the number of slides*/margin: 0;left: 0;text-align: left;animation: 40s slidy infinite;/*total animation time*/  }
#stars {width:100%;text-align:center;margin-top:10px;}
/* END of text slider */

/* https://webdevtrick.com/css-aspect-ratio/ */
.ratio {text-align: left;}
.indextitle {position: absolute;top: 5%; left: 10%; bottom: 0; right: 0;font-size: 2em;color: black;}
.indexdescr {position: absolute;top: 30%; left: 10%; bottom: 0; right: 0;font-size: 1.2em;color: black;}
.indexlink {position: absolute;top: 80%; left: 10%; bottom: 0; right: 0;font-size: 1.1em;color: black;width:160px;height:30px;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));color:white;padding:6px 10px 5px 30px;}
.indexlink a{text-decoration:none !important;color:white !important;}
.box {width: 49.5%;background: white;position: relative;display: inline-block;vertical-align: top;}
.boxseal {width: 49.5%;background-image: url("images/seal.jpg");position: relative;display: inline-block;vertical-align: top;background-size: cover;}
.boxlibrary {width: 49.5%;background-image: url("images/library.jpg");position: relative;display: inline-block;vertical-align: top;background-size: cover;}
.boxbooks {width: 49.5%;background-image: url("images/books.jpg");position: relative;display: inline-block;vertical-align: top;background-size: cover;border:1px solid black;}
.boxlogo {width: 49.5%;background-image: url("images/notaries-logo.jpg");position: relative;display: inline-block;vertical-align: top;background-size: cover;border:1px solid black;}
.box:before {content: '';display: block;}
.boxseal:before {content: '';display: block;}
.boxlibrary:before {content: '';display: block;}
.boxbooks:before {content: '';display: block;}
.boxlogo:before {content: '';display: block;}
.ratio4-3:before {padding-top: 75%;}


/* START of NAV styling */
.toggleMenu {display:  none;background: #ffffff;/* menu button mobile version background colour */padding: 10px 15px;color: #000000;font-weight:300;font-size:1.3em;}
.nav {list-style: none;*zoom: 1;background:#ffffff;/* menu bar background colour */font-weight:300;font-size:1.3em;}
.nav:before,
.nav:after {content: " "; display: table; }
.nav:after {clear: both;}
.nav ul {list-style: none;width: 12em;color: #000000;/* affects width of pop out nav */}
.nav a {padding: 10px 50px;/* affects width nav elements and sub elements */color:#000000;*zoom: 1;}
.nav li {position: relative;}
.nav > li {float: left;border-top: 1px solid #FFFFFF;/* menu button mobile version sub level top border colour (and main nav bar top colour) and single pixel line on top of desktop nav */position: relative;left: 10%;/* this position moves the whole navigation towards the centre on large screens when full width nav used - removed for mobile version below */}
.nav > li > .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: right;}
.nav > li > a {display: block;}
.nav li  ul {position: absolute;left: -9999px;}
.nav > li.hover > ul {left: 0;}
.nav li li.hover ul {left: 100%;top: 0;}
.nav li li a {display: block;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));/* menu bar 1st sub level background colour */position: relative;z-index:100;border-top: 1px solid #175e4c;color: #FFFFFF/* menu bar 1st sub level top border colour */}
.nav li li li a {background:#249578;zoom:1;/* menu bar 2nd sub level background colour */z-index:200;border-top: 1px solid #1d7a62;/* menu bar 1st sub level top border colour */}
/* END of NAV styling */

@media screen and (max-width: 768px) {
/* START of NAV styling */
.active {display: block;}
.nav > li {float: none;position: relative;left: 0%;/* this position moves the whole navigation back to the left on the mobile version*/}
.nav > li > .parent {background-position: 95% 50%;}
.nav li li .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: 95% 50%;}
.nav ul {display: block; width: 100%;}
.nav > li.hover > ul , .nav li li.hover ul {position: static;}
/* END of NAV styling */
.wrap {margin:0 auto;width:90%;}
#header {height:80px;background:rgb(138, 7, 14);color:white;}
#headertelephone {font-size:1.3em;width:100%;padding-top:5px;text-align:center;}
#headeremail {font-size:1.3em;width:100%;padding-top:1px;text-align:center;}
#firmname {font-size:2em;color:black;line-height:1.5;text-align:center;font-weight:400;font-family: 'Cinzel', serif;text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 6px;}
#birmingham {font-size:1.2em;color:black;line-height:0.8;text-align:center;font-weight:400;font-family: 'Cinzel', serif;}
#footercolumn {width:100%;text-align:center;margin-top:5px;margin-left:0%;height:auto;}
#footer {font-size:1.1em}
#badge {width:100%;margin-left:0%;margin-right:0%;float:left;margin-top:5px;text-align:center;}
#testimonial {font-size:1.4em;color:black;text-align:center;font-weight:400;margin-top:50px;}
#box {width: 20%;/*100 divided by the number of slides*/ float: left;color:black;height:200px;font-size:1.1em;text-align:center;}

#indexintro h1{font-size:1.5em;}
#maincontent h1 {font-size:1.2em;}
#maincontent h2,h3,h4,h5,h6 {font-size:1.4em;}
.box {width: 99%;background: white;position: relative;display: inline-block;vertical-align: top;border:1px solid grey;}
.boxseal {display:none;}
.boxbooks {display:none;}
.boxlibrary {display:none;}
.boxlogo {display:none;}
#contactbox {width:93%;margin-right:0;padding:15px 3% 15px 3%;float:left;border:1px solid grey;margin-bottom:20px;}

}
@media screen and (max-width: 480px) {
#header {height:80px;background:rgb(138, 7, 14);color:white;}
#headertelephone {font-size:1.1em;width:100%;padding-top:5px;text-align:center;}
#headeremail {font-size:1.1em;width:100%;padding-top:1px;text-align:center;}
#brandheader {height:90px;background:white;}
#firmname {font-size:1.5em;color:black;line-height:1.5;text-align:center;font-weight:400;font-family: 'Cinzel', serif;text-decoration: underline;text-decoration-thickness: 2px;text-underline-offset: 6px;}
#birmingham {font-size:1.1em;color:black;line-height:0.9;text-align:center;font-weight:400;}
.wrap {margin:0 auto;width:90%;max-width:1300px;}

#gradborder {height:5px;width:100%;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46))}
#gradborderbottom {height:5px;width:100%;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));}
#footercolumn {width:100%;text-align:center;margin-top:5px;margin-left:0%;height:auto;}
#footer {font-size:1.1em}
#badge {width:100%;margin-left:0%;margin-right:0%;float:left;margin-top:5px;text-align:center;}

#testimonial {font-size:1.3em;color:black;text-align:center;font-weight:400;margin-top:50px;}
#box {width: 20%;/*100 divided by the number of slides*/ float: left;color:black;height:600px;font-size:1em;text-align:center;}

#indexintro h1{font-size:1.2em;}
#maincontent h1 {font-size:1.2em;}
#maincontent h2,h3,h4,h5,h6 {font-size:1.2em;}
.box {width: 99%;background: white;position: relative;display: inline-block;vertical-align: top;border:1px solid grey;}
.boxseal {display:none;}
.boxlibrary {display:none;}
.boxbooks {display:none;}
.boxlogo {display:none;}
.indextitle {position: absolute;top: 5%; left: 10%; bottom: 0; right: 0;font-size: 1.4em;color: black;}
.indexdescr {position: absolute;top: 20%; left: 10%; bottom: 0; right: 0;font-size: 1.0em;color: black;}
.indexlink {position: absolute;top: 80%; left: 10%; bottom: 0; right: 0;font-size: 1.1em;color: black;width:160px;height:40px;background:linear-gradient(to left, rgb(88, 18, 31), rgb(223, 50, 46));color:white;padding:6px 10px 5px 30px;}

}