body {
	font-family: 'Roboto', sans-serif !important;
	background-color: #eef7fa;
}

h1{
	text-align: center;
}

p {
	font-size: 1.1em;
}

a {text-decoration: none !important;}

#header{
	background-color: white;
}

.navbar {
	background-color: white;
}

.navbar li a {
	font-size: 1.5em;
}

.nav {
    float:none;
    border: none;
}

.nav li {
    display:inline-block;
    float:none;
    border: none;
}

ul.nav li a {
    border: none;
    margin-top: 25px;
    color: #184892 !important;
}

ul.nav a:hover { 
    background-color: transparent !important; 
}

ul.nav li.active a { 
    background-color: transparent !important; 
    color: #ED1B24 !important;
}

.icon-bar {
    color: #FFFF00;
}

#footer {
	background-color: #184892;
	height: 120px;
	padding-top: 20px;
	border-top: 2px solid #CCCCCC;
}

#footer a {
	color: white !important;
}

#footer a:hover {
	color: #ED1B24 !important;
	text-decoration: none;
}

#content {
	margin-top: 80px;
}

.aboutBox {
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 2px;
    border: 1px solid #F49660;
    background-color: #FFFFFF;
    width: 100%;
    margin-top: 30px;
}

.box-content{
    padding: 20px;
}

.box-content li {
    font-size: 1.25em;
}

.aboutBoxTitle {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 2em;
    background-color: #F49660;
    color: #FFFFFF;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#acredDiv {
	background-color: white;
	border-top: 1px solid #184892;
	padding-top: 25px;
	padding-bottom: 15px;
}

#breadcrumbs{
    margin-top: 30px;
}

#breadcrumbs a {
    color: #184892 !important; 
}

#a, #b, #c, #d {
    display: inline;
}

.serviceBtn {
    width: 100%;
    padding: 10px;
    font-size: 1.5em;
    background-color: #184892;
    color: white !important;
    border: none;
    text-align: center;
}

.serviceDiv a {
    text-decoration: none;
}

.serviceDiv:hover .serviceBtn {
    background-color: #ED1B24;
    text-decoration: none;
}

.serviceHover1 {
    background-color: #184892; 
    color: white; 
    font-size: 2em; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    text-align: center;
    text-decoration: none;
}

.serviceHover2 {
    background-color: #25AAE2; 
    color: white; 
    font-size: 2em; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    text-align: center;  
    text-decoration: none;
}

.serviceHover3 {
    background-color: #ED1B24; 
    color: white; 
    font-size: 2em; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    text-align: center;  
    text-decoration: none;
}

.serviceHover1:hover, .serviceHover2:hover, .serviceHover3:hover {
    background-color: black;  
    text-decoration: none;  
}

.banner {    
    background: url("../img/mdt-electrical-cardiff.jpg") center top;
    background-size: cover;
    height: 60vh;
    position: relative;
}

.recentClients {
    margin-top: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #ED1B24;
}

.recentClients .serviceDiv:hover .serviceBtn {
    background-color: #000000;
}

.bannerText {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 50px;
    margin-right: 150px;
    background: rgba(0, 0, 0, .8);
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-radius: 5px;
}

.banner p {
    font-size: 2em;
    color: white;
}

#callBanner{
    top: 0;
    position: fixed;
    float: none !important;
    margin: 0 auto;
    background-color: #184892;
    width: 100%;
    height: 60px;
    z-index: 10300;
}

#callBanner a {
    background-color: #ED1B24;
    color: white !important;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    height: 40px;
    margin-top: 10px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 40px;
    width: 80%;
}

.homeTag {
    font-size: 1.75em; 
    font-weight: bold;
}

.redCheck {
    font-size: 1.5em; 
    font-weight: bold; 
    color: white; 
    margin-top: 20px;
}

#bottomContact {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #184892;
}

#bottomContact a {
    background-color: #ED1B24;
    color: white !important;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    height: 40px;
    margin-top: 10px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 40px;
    width: 80%;
}

@media only screen and (max-width: 500px) {
    .banner{display: none;}
    .navbar-header img {width: 60%; margin-right: auto; margin-left: auto; display: block;}
    .navbar-fixed-top {position: relative; top: auto; margin-top: 60px;}
    .navbar-collapse {height: auto; background-color: #FFFFFF;}
    .nav {margin-bottom: -2px; margin-top: -2px;}
    .nav li {display:block; float:none; text-align: left; border-bottom: 1px solid #184892; margin-top: -10px;}
    .nav li a{margin: 0; padding: 0; margin-bottom: 15px; margin-left: 10px;}
    .navbar-toggle .icon-bar{background-color: #184892 !important;}
    .navbar-toggle{border: 1px solid  #184892 !important;}
    .navbar-toggle:active{background-color: #FFFFFF !important;}
    #content {margin-top: -30px;}
   .homeTag {font-size: 1.5em;} 
   .redCheck {font-size: 1.3em;}
   #acredDiv{display: none;}
   #footer {height: 230px;}
   #clientDesk{display: none;}
   .serviceBtn{font-size: 1.1em;}
   .recentClients {padding-top: 20px;}
   .aboutBoxTitle { font-size: 1.45em;}
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
    .banner{display: none;}
    .navbar-header img {width: 60%; margin-right: auto; margin-left: auto; display: block;}
    .navbar-fixed-top {position: relative; top: auto; margin-top: 60px;}
    .navbar-collapse {height: auto; background-color: #FFFFFF;}
    .nav {margin-bottom: -2px; margin-top: -2px;}
    .nav li {display:block; float:none; text-align: left; border-bottom: 1px solid #184892; margin-top: -10px;}
    .nav li a{margin: 0; padding: 0; margin-bottom: 15px; margin-left: 10px;}
    .navbar-toggle .icon-bar{background-color: #184892 !important;}
    .navbar-toggle{border: 1px solid  #184892 !important;}
    .navbar-toggle:active{background-color: #FFFFFF !important;}
    #content {margin-top: -30px;}
   .homeTag {font-size: 1.5em;} 
   .redCheck {font-size: 1.3em;}
   #acredDiv{display: none;}
   #footer {height: 210px;}
   #clientDesk{display: none;}
   .serviceBtn{font-size: 1.1em;}
   .recentClients {padding-top: 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
    #callBanner, #clientMob, #bottomContact, .mobileNav, #acredDiv{display: none;}
    .navbar-header img {width: 200px; float: left; margin-bottom: 0; padding-top: 10px;}
    .navbar li a {font-size: 1.05em; margin-top: 0; padding-top: 0;}
   .homeTag {font-size: 1.5em;} 
   .redCheck {font-size: 1.3em;}
   .serviceBtn{font-size: 1.3em;}
   .banner {height: 40vh;}
   .banner p {font-size: 1.2em;}
   #content {margin-top: 0px;}
   .tabletImage{display: none;}
}

@media only screen and (min-width: 995px) and (max-width: 1200px) {
    #callBanner, #clientMob, #bottomContact, .mobileNav{display: none;}
    .navbar-header img {width: 200px; float: left; margin-bottom: 0; padding-top: 10px;}
    .navbar li a {font-size: 1.05em; margin-top: 0; padding-top: 0;}
    #content {margin-top: 0px;}
    .serviceBtn{font-size: 1.3em;}
}

@media only screen and (min-width: 1200px) {
    nav.navbar.shrink {min-height: 35px;}
    nav.shrink li a {padding-top: 5px !important; padding-bottom: 5px !important; font-size: 1.5em; margin-top: 10px;}
    nav.shrink .navbar-brand {font-size: 25px;}
    nav.shrink .navbar-toggle {padding: 4px 5px; margin: 8px 15px 8px 0; }
    nav.shrink img {width: 50%;}
    #callBanner, #clientMob, #bottomContact, .mobileNav{display: none;}
}

@media only screen and (min-width: 1600px) {
    nav.navbar.shrink {min-height: 35px;}
    nav.shrink li a {padding-top: 5px !important; padding-bottom: 5px !important; font-size: 1.5em; margin-top: 10px;}
    nav.shrink .navbar-brand {font-size: 25px;}
    nav.shrink .navbar-toggle {padding: 4px 5px; margin: 8px 15px 8px 0; }
    nav.shrink img {width: 50%;}
    #callBanner, #clientMob, #bottomContact, .mobileNav{display: none;}
}

@media only screen and (min-width: 1800px) {
    nav.navbar.shrink {min-height: 35px;}
    nav.shrink li a {padding-top: 5px !important; padding-bottom: 5px !important; font-size: 1.5em; margin-top: 10px;}
    nav.shrink .navbar-brand {font-size: 25px;}
    nav.shrink .navbar-toggle {padding: 4px 5px; margin: 8px 15px 8px 0; }
    nav.shrink img {width: 50%;}
    #callBanner, #clientMob, #bottomContact, .mobileNav{display: none;}
}