/* CSS Document */

/* Start with a CSS reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Default social media colours, assuming FontAwesome icons used */

.fab.fa-twitter-square { color: #1C449C; }
.fab.fa-facebook-square { color: #1C449C; }
.fab.fa-linkedin { color: #1C449C; }
.fas.fa-phone-square { color:#1c449c; }
.fas.fa-envelope-square { color:#1c449c; }

/* Transitions */

.wmbtFadeIn { /* this works on iOS */ opacity: 0; transition: opacity ease-in-out 2s, transform ease-in-out 2s; }
.wmbtFadeIn.wmbtRun { opacity: 1; }
.wmbtSlideIn { transform: translateX(-2em); transition: opacity ease-in-out 2s, transform ease-in-out 2s; }
.wmbtSlideIn.wmbtRun { transform: translateX(0em); }

/* Basic layout */

body, html { width: 100%; height: 100%; min-height: 100%; }

#divWrapper { position: relative; width: 100%; min-height: 100%; }

#divHeaderTop { position:fixed; top:0; left:0; width:100%; /*height:40px;*/ background-color:#DE5A26; z-index:999;  }
#divHeaderWrapper { position: fixed; top: 36px; left: 0px; width: 100%; height: 90px; border-bottom: 1px solid; z-index:999; background-color:#ffffff;}
#divTopBar { position:relative; height:100%; width:1200px; max-width:100%; margin: 0 auto; }
#divHeader { position: relative; height: 100%; width: 1200px; max-width: 100%; margin: 0px auto; }
#divLogo { position: absolute; left: 10px; top: 10px; width: 25%; bottom: 10px; background-image:url(../images/logo.png);
	background-position: center left; background-size: contain; background-repeat: no-repeat; }
#navTop {  }

#divContentWrapper { width: 100%; height: 100%; padding-top: 84px; /*padding-bottom: 40px;*/ }
#divContent, #divContent2, #divContent3, #divNVQs, #divPM, #divCSCS, #divNews, #divTestimonial, #divAccreditations, #divContentContact { height:100%; width:1200px; max-width:100%; margin:0px auto; }
#divContent a , #divNVQs a, #divContent3 a { color: #000000 !important; font-weight:700 !important; }
.divContent2 a  { color:#000000; font-weight:700 !important; }
.divContent2 a:hover { color:#000000; }
.divContent2 { height:100%; width:1200px; max-width:100%; margin:0 auto; padding:2em; }
.divContentWrapper2 { width:100%; height:100%; }
#divContent ul, .divContentWrapper2 ul { list-style:disc; margin-left:1em; }

#divFooterWrapper { /*position: absolute;*/ left: 0px; bottom: 0px; width: 100%; background-color: #464646; border-top:4px solid #DE5A26;  }
#divFooter, #divFooterCopyright { position: relative; height: 100%; width: 1200px; max-width: 100%; margin: 0px auto; color:#ffffff; }
#divBoilerPlate { padding: 2em 0;}
#navBot {  }

/* Overall font and text styles */

body, html { font-family: sans-serif; }

h1, h2, h3, h4, h5, h6, p, a, li, input, textarea, blockquote, label { line-height: 1.5em; font-style: normal; font-variant: normal; }
h1, h2, h3, h4, h5, h6, p { margin: 15px 0px; }

h1 { font-size: 1.9em !important; font-weight: 400; color: #DE5A26 !important; }
h2 { font-size: 1.8em !important; font-weight: 400 !important; color: #DE5A26 !important; }
h3 { font-size: 1.6em !important; font-weight: 400 !important; color: #DE5A26 !important; }
h4 { font-size: 1.8em; font-weight: 400; }
h5 { font-size: 1.5em; font-weight: 400; }
h6 { font-size: 1.2em; font-weight: 400; }

p, a, li, input, textarea, label { font-size: 1em; font-weight: 400; }

a { color: inherit; text-decoration: none; }

/* Useful structural things */

.clear { clear: both; }

/* Header */

.email, .tele { float:right; margin:6px;}
.email i, .tele i { font-size:1.5em;}
.email a, .tele a { color:#ffffff;}


/* Top navigation */
#navTop ul { list-style: none; }
#navTop ul li a { color:#000000; }
#divTopBar ul li, #navTop ul li { display: inline-block; padding: 0px 0.25em; }
#divTopBar .navSocial { font-size: 1.5em; margin-bottom:0 !important; }
#navTop .navMenu { position: absolute; right: 10px; bottom: 10px; }
#navTop .current-menu-item { color: rgba(100,0,1,1); }


.fill ul li a { position:relative; padding:5px; }
.fill ul li a:after { position:absolute; bottom:0; left:0; right:0; margin:auto; width:0%; content:'.'; color:transparent; background: #aaa; height:1px;}
.fill ul li a { transition: all 2s !important;}
.fill ul li a:after { text-align:left; content: '.'; margin:0; opacity:0; }
.fill ul li a:hover { color:#ffffff !important; text-decoration:none;  z-index:1; }
.fill ul li a:hover:after { z-index:-10; animation: fill 1s forwards; -webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity:1; }

@-webkit-keyframes fill {
	0% {
    	width: 0%;
    	height: 1px;
  	}
  	50% {
    	width: 100%;
    	height: 1px;
  	}
  	100% {
    	width: 100%;
    	height: 100%;
    	background: #DE5A26;
  		}
}

#sideNav { position:fixed; width: 60px; background-color: rgb(255,255,255); top:40%; right:0; box-shadow: 0px 0px 5px; z-index:1000; }
#sideNav ul { margin-bottom:0; }
#sideNav ul li { border-bottom:1px solid #1c449c; padding:5px 0; }
#sideNav ul li .fa, #sideNav ul li .fas { color:#de5a26; font-size:2em; padding:6px 16px; cursor:pointer; }

#divSearch { position:absolute; right:0.5em; top:0.5em; bottom:0.5em; vertical-align:middle; }
#divSearch input[type=search] { }
#divSearch button { color:rgb(255,255,255); }

.overlay { position:fixed; top:0; bottom:0; left:0; right:0; background: rgba(0,0,0,0.7); transition: opacity 500ms; visibility: hidden; opacity:0; z-index:999;}
.overlay:target { visibility: visible; opacity:1; }
.popup { margin: 70px auto; padding:20px; background: #fff; border-radius:5px; position:relative; top:35%; transition: all 5s ease-in-out; width:400px; max-width:90%; }
.popup p { font-size: 1.5em; margin:0px; }
.popup .close { position:absolute; top:20px; right:30px; transition: all 200ms; font-size:30px; font-weight:bold; text-decoration:none; color:#000; line-height:1.2em;}
.popup .close:hover { color: #000000; }
.popup i { font-size:1.5em; color: rgb(0,0,0); vertical-align:middle; }


/* Footer */

#divFooter i { color:#de5a26; transition:0.5s; }
#divFooter i:hover { color:#ffffff; transition:0.5s;}
#divFooter a { color:#ffffff;}

#divFooterCopyrightWrapper { background-color:#DE5A26;}
#divFooterCopyrightWrapper p { margin-bottom:0; padding: 0.5em 0; color:#ffffff;}
.siteBy { text-align:right;}
.siteBy a { color:#ffffff !important; 	}

.brochure { padding:10px; text-align:center; background-color: #de5a26; margin: 15px 0 0 0; width:94.7%; }
.brochure i { color:#ffffff !important; }

/* Bottom navigation */
#navBot ul { list-style: none; font-size: 0.8em; }
#navBot ul li { display: inline-block; padding: 0px 0.25em; }
#navBot .navMenu { position: absolute; left: 10px; top: 10px; }
#navBot .current-menu-item { color: rgba(100,0,1,1); }

/* Content */

img { max-width:100%; }

#divContent, #divNVQs, #divPM, #divCSCS, #divNews, #divTestimonial, #divAccreditations, #divContent2, #divContent3 { padding: 2em; text-align:center; }
#divContent h2, #divNVQs h2, #divPM h2, #divCSCS h2, #divNews h2, #divTestimonial h2, #divAccreditations h2, #divContent2 h2, #divContent3 h2 { text-align:left; }
#divContentContact { padding:2em; }

/*.greyImageBG { background-image:url("../images/DLR-Canary-Wharf-GS.jpg"); background-position: bottom center; height:auto; }*/

#headerImage { height:15em; }

.bgGrey { background-color:rgba(233,233,233,0.7); height:auto; }
.bgGrey a { color:#000000; }
.bgGrey a:hover { color:#000000; }
.bgBlue { background-color:rgba(28,68,156,0.7); color:#ffffff; }
.bgBlue a { color:#ffffff; }
.bgBlue a:hover { color:#ffffff; }
.bgBlue .icon { color:#DE5A26; background-color:#ffffff; transition:0.5s ease-in-out; }
.bgOrange { background-color:rgba(222,90,38,0.7); color:#ffffff; }
.bgOrange a { color:#ffffff; }
.bgOrange a:hover { color:#ffffff; }
.bgOrange .icon { color:#1c449c; background-color:#ffffff; transition:0.5s ease-in-out; }
.bgOrange h2 { color:#ffffff !important; }
.bgOrange h3 { color:#ffffff !important; }
.iconBlue .icon { background-color:#1C449C; color:#ffffff; transition:0.5s ease-in-out; }
.iconOrange .icon { background-color:#DE5A26; color:#ffffff; transition:0.5s ease-in-out; }
.iconWhite .icon { background-color:#ffffff; }

.iconOrange .icon:hover { color:#1C449C; transition:0.5s ease-in-out; }
.iconBlue .icon:hover { color:#DE5A26; transition:0.5s ease-in-out; }
.bgBlue .icon:hover { transition:0.5s ease-in-out; color:#1c449c; }
.bgOrange .icon:hover { transition:0.5s ease-in-out; color:#de5a26; }



.icon { border-radius: 150px; width:150px; height:150px; margin:0 auto; position:relative; }
.icon i { position:absolute; top:33%; bottom:0; left:0; right:0; font-size:3em; }

/* News */

.newsBlock { transition: transform 0.5s; margin-bottom:1em; padding-bottom: 2em; background-color: white; }
.newsBlock::after { position:absolute; top:0; left:0; width:100%; height:100%; transition: opacity 2s cubic-bezier(0.165,0.84, 0.44,1); box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.15); content:""; opacity:0; z-index:-1; }
.newsBlock:hover::after, .newsBlock:focus::after { opacity: 1;}
.newsBlock a { color:#000000; }
.newsBlock a:hover { color:#000000 !important; text-decoration:none !important; }

#divNews h2 { margin-bottom:1em; }
.newsImage img { max-width:100%; height:250px; }
.newsImage { position:relative;}
.newsDate { background-color:#de5a26; padding:10px; color:#ffffff; text-align:left; }
.newsAuthor, .newsItem, .newsTitle { text-align:left;}

.newsAuthor { color:#c5c5c5; font-size:0.8em; margin-bottom:5px;}
.newsItem { font-size:0.8em; margin-top:5px; }
.news { padding:15px; background-color:#ffffff; height:300px; }

#testimonialBG { background-image:url("../images/Severn-Bridge-Grey-Scale.jpg"); background-position:bottom center; height:24em; }
#divTestimonialWrapper { background-color:rgba(233,233,233,0.7);  height:24em; }
#divTestimonialWrapper .testimonial { color:#000000; vertical-align: middle; position:relative !important;}
#divTestimonial { padding: 7em 2em; }

.testimonial-inner p{ color:#000000; }

.testimonial small { font-style: italic; color:#de5a26;}

.testimonial:before { content: '\f10d'; font-family:"FontAwesome"; position:absolute; left:0em; top:0em; font-size:2em; color:rgb(222, 90, 38); }
.testimonial:after { content: '\f10e'; font-family:"FontAwesome"; position:absolute; right:0em; font-size:2em; bottom:-1em; color:rgb(222, 90, 38);}

.wpmslider-viewport { height:150px !important; }

.footerSocial li { display:inline-block; margin:1em 0.1em; font-size:2em; }

.caldera-grid .btn-default { color:#fff !important; background-color:#de5a26 !important; border-color:transparent !important; border-radius:0 !important; width:100%; padding: 10px 20px !important; }

.wmbtImage { max-width:100%; }
.bgImage { background-position:center; background-size:cover; background-repeat: no-repeat; height:auto; }
.bgImage .wmbtImage { display:none; }

#divMap { margin-bottom:-6px; }
#divMap p { margin-bottom:0; }

/** About Page **/

.informationBox { margin-bottom:10px; }
.staff { text-align:center; }

.testimonials p { margin-bottom:0;}
.testimonials { margin-bottom:1em; border-bottom:1px solid #000000; padding-bottom:1em; }
.testimonials small { font-style: italic; }
.bioBox { margin-top:1em; padding:0 40px; }

/** Blog **/

#blog a { color:#000000 !important; font-weight:400 !important; text-align:left; }
#blog ul li { text-align:left; }

.formTemplate { text-align:left !important; }
.caldera-grid { margin-top: 2em; margin-bottom:-0.9em;  }
.staff .staffBox { margin:0 auto; }

.formTemplate ol { list-style:decimal !important; }
.formTemplate ol li { font-weight:600; font-size:1.4em; }

.news-posts { list-style:disc; margin-left:1em; }
.news-posts li { margin-bottom:1em; }


/* Media Queries */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) { 
	.row { margin-right:0 !important; margin-left:0 !important; }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) { 


}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) { 
	#navTop, #desktop { display:none; }
	#divHeaderTop { height:80px; position:fixed; z-index:999; }
	#divHeaderWrapper { top:50px; height:90px;}
	#divLogo { top:0; bottom:0; left:0; right:0; margin: 0 auto; }
	.testimonial:before { top:-1.1em; left:0;}
	#divFooter, #divFooterCopyright, .siteBy { text-align:center; }
	.brochure { margin:10px auto;}
	
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) { 
	#divLogo { width:60%; }
	#divTestimonialWrapper, #testimonialBG { height:32em;}
	#divBoilerPlate .col-xs-12 { margin:1em 0; }
	h1 { font-size:1.6em !important; margin-bottom:1em !important; }
	h2 { font-size:1.4em !important; margin-bottom:1em !important; }
	.popup .close { top:0; right:0; margin-top:-40px; }
	#sideNav { display:none; }
	.news { height: auto !important; }
}

/* Very small indeed */
@media (max-width: 350px) { 
	
	
}