@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500');

/* Define mobile styles */
@media only screen {
	
	body, h1, h2, h3, h4, h5, h6, p, a, table, li { font-family: 'M PLUS 1p', sans-serif; }
	
	#pre_banner { background: #444; text-align: center; }
	#co_banner, #co_banner a { color: #fff; }
	#co_banner .logo img { max-width: 200px; }
	#co_banner .contact { font-size: 1.2rem; }
	#co_banner .contact [class^="fi-"]:before { margin-right: 0.6rem; }
	
	#banner { background: #333; }
	.top-bar-section [href="/home-double-glazing/double-glazed-doors/"],
	.top-bar-section [href="/home-double-glazing/double-glazed-windows/"] { cursor: default; }
	
	#main_copy { margin-bottom: 2rem;  }
	.callout { position: relative; }
	.callout h3 { position: absolute; background: #eb1e23; color: #fff; z-index: 100; top:0; left: 0; right: 0; padding: 0.5rem 0; text-align: center; margin: 0; transition: background-color 0.5s, padding 0.5s; box-shadow: 0 3px 6px rgba(0,0,0,0.2); }
	.callout:hover h3 { font-size: 1.6rem; background: #8d1215; padding-top: 2rem; }
	
	#post_main_wrapper { background-color: #d7d7d7; padding: 3rem 0; }
	#testimonial { width: 80%; max-width: 500px; margin: 0 auto; }
	blockquote { border: 0; }
	#testimonial p { color: #8d1215; }
	#testimonial cite a { padding-left: 1.25rem; }
	
	#bridge_wrapper { background: #333 url(/sites/www.mtmunits.co.uk/images/diamond.jpg) fixed; padding: 6rem 0; color: #fff; font-size: 1.6rem; }
	#call_to_action { text-align: center; }
	
	#extended_footer_wrapper { background: #eb1e23; padding-top: 3rem; padding-bottom: 3rem; color: #fff; }
	#extended_footer_wrapper a { color: #fff; }
	#extended_footer_navigation { list-style: none; margin: 0; }
	#extended_footer_wrapper [class^="fi-"]:before { margin-right: 0.6rem; }
	
	#company_details_wrapper { background: #333; color: #fff; padding: 1rem; }
	#company_details_wrapper a { color: #fff; }
	
	.top-bar {
	}
	.top-bar.expanded .title-area {
	}
	.top-bar-section {
	}
	
	.top-bar .toggle-topbar.menu-icon a {
		
	}
	
	.top-bar.expanded .toggle-topbar a {
		
	}
	
	.top-bar .toggle-topbar.menu-icon a span::after {
		/* box-shadow: 0 0 0 1px #555, 0 7px 0 1px #555, 0 14px 0 1px #555; */
	}
	
	.top-bar.expanded .toggle-topbar.menu-icon a span::after {
		/* box-shadow: 0 0 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff; */
	}
	
	.top-bar-section ul li > a {
		text-transform: uppercase;
		font-family: 'M PLUS 1p', sans-serif;
	}
	
	/* nav a */
	.top-bar-section li:not(.has-form) a:not(.button) {
		transition: background-color 0.5s;
	}
	
	/* nav a hover */
	.top-bar-section li:not(.has-form) a:not(.button):hover {
		background: #000;
	}
	
	/* nav a active */
	.top-bar-section li.active:not(.has-form) a:not(.button) {
		background: #eb1e23;
	}
	
	/* nav a active hover */
	.top-bar-section li.active:not(.has-form) a:not(.button):hover {
		background: #eb1e23;
	}
	
	/* nav a dropdown contents */
	.top-bar-section .dropdown {
		/* clip: auto; */
		overflow: visible;
	}
	
	/* nav a dropdown contents */
	.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
		
	}
	
	/* nav a with dropdown triangle */
	.top-bar-section .has-dropdown > a:after {
		/* border-color: rgba(80,80,80,0.5) transparent transparent transparent; */
	}
	
	.top-bar-section .has-dropdown > a:after {
		
	}
	
	.top-bar-section .has-dropdown > a:hover:after {
	}
	
	.top-bar-section ul li {
	}
	
	.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
		
	}
} 

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
	
} 

 /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
	
	#co_banner { text-align: left; }
	#co_banner .logo img { max-height: 100px; margin: 1rem 0; }
	#co_banner .contact { text-align: right; margin-top: 2rem; }
	#call_to_action .tel { font-size: 4rem; }
	
	.top-bar-section .dropdown { background-color: #fff; }
	
	.top-bar-section li>ul>li:not(.back) { background-color: #fff; color: #333; display: block; float: left; width: auto!important; padding-top: 1rem; }
/* 	.top-bar-section li:hover { clip: auto; } */
	.top-bar-section li>ul>li:not(.back) ul { display: block; position: relative!important; left: 0; }
	
	.top-bar-section li>ul>li>ul.dropdown { position: relative!important; left: 0!important; width: auto!important; padding: 1rem; }
	.top-bar-section li>ul>li>ul>li { float: none!important; padding-top: 0!important; }
	.top-bar-section li>ul>li>ul>li a { text-transform: none!important;  }
	.top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button) { background: #fff; color: #444; line-height: 1.6rem; }
	
	.top-bar-section ul li .has-dropdown.hover>.dropdown, .top-bar-section ul li .has-dropdown.not-click:hover>.dropdown { position: relative!important; }
	.top-bar-section .has-dropdown .dropdown li.has-dropdown>a:after { content: ''; }
	.top-bar-section .dropdown li:not(.has-form):not(.active):hover>a:not(.button) { background-color: #fff; color: #444; }
	.top-bar-section li>ul>li>ul>li:hover a { background: #444!important; color: #fff!important;}
}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
}

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
}

/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) {
	
}

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
	
}

/* min-width 1921px, xxlarge screens */
@media only screen and (min-width: 120.063em) {
	
}