::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }

/* ==========================================================================
   Custom styles
   ========================================================================== */

html, body { margin: 0; color: #000; font-size: 15px; line-height: 140%; background-color: #333; }

body { margin: 0; text-align: center; max-width: 100%; overflow-x: hidden; }

body, p, ul, ol, td, th, form, input, select { font-family: 'Montserrat', sans-serif; font-weight: 300; }

p, ul, ol, td, th, form { margin: 0.8em 0 0 0; line-height: 145%; }
h4, h5, h6, .h4style, .h5style, .h6style { font-family: 'Montserrat', sans-serif; font-weight: 300; color: #000; }
h1, h2, h3, .h1style, .h2style, .h3style, .font1 { font-family: 'Dosis', sans-serif; font-weight: 400 !important; color: #000; }
p strong, ul strong, ol strong, td strong, th strong, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .h1style strong, .h2style strong, .h3style strong, .h4style strong, .h5style strong, .h6style strong { font-family: 'Montserrat', sans-serif; font-weight: 600; }

h1, .h1style { font-size: 2.00em; line-height: 115%; margin-top: 0.65em; margin-bottom: 0.55em; }
h2, .h2style { font-size: 1.85em; line-height: 120%; margin-top: 0.68em; margin-bottom: 0.60em; }
h3, .h3style { font-size: 1.60em; line-height: 125%; margin-top: 0.71em; margin-bottom: 0.65em; }
h4, .h4style { font-size: 1.45em; line-height: 130%; margin-top: 0.74em; margin-bottom: 0.70em; }
h5, .h5style { font-size: 1.30em; line-height: 135%; margin-top: 0.77em; margin-bottom: 0.75em; }
h6, .h6style { font-size: 1.15em; line-height: 140%; margin-top: 0.80em; margin-bottom: 0.80em; }

@media (min-width: 768px) {
	h1, .h1style { font-size: 2.50em; }
	h2, .h2style { font-size: 2.25em; }
	h3, .h3style { font-size: 2.00em; }
	h4, .h4style { font-size: 1.75em; }
	h5, .h5style { font-size: 1.50em; }
	h6, .h6style { font-size: 1.25em; }
}
@media (min-width: 992px) {
	h1, .h1style { font-size: 2.8em; }
	h2, .h2style { font-size: 2.5em; }
	h3, .h3style { font-size: 2.2em; }
	h4, .h4style { font-size: 1.9em; }
	h5, .h5style { font-size: 1.6em; }
	h6, .h6style { font-size: 1.3em; }
}

.home_bigger { font-size: 1.03em; }
.services_bigger { font-size: 1.03em; }
.services_spacing { margin: 1.1em 0; }
@media (min-width: 768px) {
	.home_bigger { font-size: 1.07em; }
    .services_bigger { font-size: 1.09em; }
}

hr { display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1em 0; padding: 0; }
img { max-width: 100%; }

a { color: #336699; text-decoration: none; outline: 0; }
a:hover { color: #000; text-decoration: underline; outline: 0; }
a:focus { outline: 0; }

a.reverse { color: #FFF; text-decoration: none; outline: 0; }
a.reverse:hover { color: #336699; text-decoration: none; outline: 0; }
a.reverse:hover i { border-color: #336699; }

a.dotbutton { color: #FFF; font-size: 1.1em; line-height: 120%; display: inline-block; border: 1px solid #FFF; border-radius: 3em; padding: 11px; }
a.dotbutton:hover { color: #336699; border-color: #336699; }
#home header a.dotbutton:hover { color: #FFF; border-color: #FFF; }
#home header a.dotbutton i { position: relative; top: -2px; }

a.button1, .button1 a { display: inline-block; padding: 0.7em 3em; color: #336699; border: 1px solid #336699; text-decoration: none; outline: 0; }
a.button1:hover, .button1 a:hover { color: #FFF; background-color: #336699; text-decoration: none; outline: 0; }
a.button2, .button2 a { display: inline-block; padding: 1.1em 2.5em; color: #FFF; background-color: #336699; border: 2px solid #336699; text-decoration: none; outline: 0; font-weight: 600; }
a.button2:hover, .button2 a:hover { color: #336699; background-color: #FFF; text-decoration: none; outline: 0; }
@media (min-width: 400px) {
	a.button2, .button2 a { padding: 1.5em 4em; }
}
.livelink { cursor: pointer; }

.nm { margin: 0; }
.ntm { margin-top: 0; }
.nbm { margin-bottom: 0; }
.stm { margin-top: 0.5em; }
.sbm { margin-bottom: 0.5em; }
.btm { margin-top: 1.1em; }
.bbm { margin-bottom: 1.1em; }
.vbtm { margin-top: 1.6em; }
.vbbm { margin-bottom: 1.6em; }
.vvbtm { margin-top: 2em; }
.vvbbm { margin-bottom: 2em; }
.fl { float: left; }
.fr { float: right; }
.cll { clear: left; }
.clr { clear: right; }
.cl { clear: both; }

.alleft { text-align: left; }
.alcenter { text-align: center; }
.alright { text-align: right; }
.upper { text-transform: uppercase; }

.reverse, .white { color: #FFF; }
.grey { color: #919189; }
.black { color: #000; }

.blue { color: #336699; }
.lblue { color: #5b84ad; }

.bggrey { background-color: #919189; }
.bgdgrey { color: #FFF; background-color: #333; }
.bgblue { background-color: #336699; }
.bglblue { background-color: #5b84ad; }

#master_container { background-color: #FFF; position: relative; }

.form-control, .btn, .dropdown-menu, .input-group-addon { border-radius: 0 !important; }
#contact_form .form-control, #contact_form .btn { border: 0; }
#contact_form .form-group.has-error input { background-color: #f6ddde; }
#contact_form .form-group.has-error label { color: #FFF; }
#contact_form .btn { display: block; width: 100%; padding: 12px; color: #FFF; background-color: #575752; font-weight: 700; font-size: 1.1em; }
#contact_form .btn:hover { background-color: #336699; }
@media (min-width: 992px) {
    #contact_form .btn { width: 30%; float: right; }
    #contact_form #contact_code { float: left; }
    #contact_form p.small { float: right; }
}

header { background-color: #336699; position: relative; color: #FFF; overflow: hidden; }
header #header_colour { background-color: #336699; width: 100%; height: 100%; }
header .container { position: relative; }
header #logo { text-align: left; padding-top: 1.5em; padding-bottom: 1.9em; }
header #logo a { display: block; font-family: 'Dosis', sans-serif; font-weight: 400; color: #FFF; font-size: 20px; }
header #logo a:hover { text-decoration: none; }
header #logo a img { width: 90px; display: block; margin: 0 0 0.3em 0; }
header.home { height: 600px; }
header.home #header_colour { background-color: rgba(51,102,153,0.8); z-index: 102; position: relative; }
header.home #header_slider { position: absolute; width: 100%; height: 100%; z-index: 101; }
header.home #header_slider > div { height: 100%; background-repeat: no-repeat; background-size: cover; }
header.home video { display: none; }
header.home #logo { position: absolute; top: 50%; margin: -50px auto 0 auto; left: 0; right: 0; padding: 0; text-align: center; }
header.home #logo a { font-size: 22px; }
header.home #logo a img { width: 120px; margin: 0 auto 0.3em auto; }
header.home .btm_center { z-index: 102; }
@media (min-width: 768px) {
    header #logo { text-align: right; }
    header #logo a img { margin: 0 0 -1.2em 0; }
    header.home #logo a { font-size: 28px; }
}
@media (min-width: 992px) {
    header.home video { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 101; overflow: hidden; }
}

#htop { border-bottom: 1px solid #5b84ad; }
#htopl { float: left; }
#htopl p { height: 47px; margin: 0; padding: 12px 0 0 0; }
#htopl i { display: inline-block; font-size: 1.35em; margin-right: 0.5em; }
#htopl a { display: inline-block; color: #FFF; margin-right: 0.7em; }
#htopl a span { display: none; }
#htopr { float: right; }
@media (min-width: 768px) {
    #htopl i { font-size: 1em; }
    #htopl a { margin-right: 1em; }
    #htopl a span { display: inline-block; }
    #htopl a:hover span { text-decoration: underline; }
}

#hsocial { height: 47px; margin: 0 50px 0 0; padding: 6px 0 0 0; list-style: none; list-style-type: none; }
#hsocial li { display: inline-block; margin: 0 3px 0 0; }
#hsocial li:last-child { margin-right: 0; }
#hsocial li a { display: block; font-size: 1.4em; color: #FFF; padding: 0.24em 0.15em; }
#hsocial li a:hover { color: #000; }
#hsocial li a i { position: relative; top: 1px; }
#hsocial li a.linkedin i { top: 0; left: 1px; }
@media (min-width: 400px) {
    #hsocial li { margin-right: 7px; }
}
@media (min-width: 800px) {
    #hsocial { margin-right: 22px; }
}

#navbars, #navclose, #toTop { color: #FFF; background-color: #336699; height: 47px; padding: 12px 8px 0 8px; position: fixed; top: 0; right: 0; cursor: pointer; z-index: 103; }
#navbars i, #navclose i, #toTop i { font-size: 25px; line-height: 90%; }
#navbars:hover, #navclose:hover, #toTop:hover { background-color: #000; }
#toTop { display: none; top: auto; bottom: 0; background-color: rgba(51,102,153,0.8); }

#navmain { display: none; background-color: #000; background-color: rgba(0,0,0,0.9); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 103; }
#navmain ul { margin: -11em 0 0 0; padding: 0; list-style: none; list-style-type: none; position: absolute; top: 50%; width: 100%; }
#navmain ul li { font-family: 'Dosis', sans-serif; font-weight: 400; font-size: 2.6em; margin: 1em 0; }
#navmain ul li a:link, #navmain ul li a:visited { color: #5b84ad; text-decoration: none; display: block; }
#navmain ul li a:hover, #navmain ul li a:active { color: #FFF; text-decoration: none; }

.icon_points { padding-left: 16px; padding-right: 16px; }
.icon_points h2 { margin: 0; }
.icon_points .icon { float: left; width: 33.3333%; margin-top: 2em; }
.icon_points .icon { color: #FFF; }
.icon_points .icon i { font-size: 3em; }
.icon_points .icon h3 { font-family: 'Dosis', sans-serif; font-weight: 400; font-size: 1.4em; margin-bottom: 0; }
@media (min-width: 768px) {
    .icon_points .icon { margin-top: 3em; }
    .icon_points .icon i { font-size: 5em; }
    .icon_points .icon h3 { font-size: 1.7em; }
}

#clients_fav { position: relative; margin-top: 0.8em; margin-bottom: 0.8em; }
.client_fav { height: 90px; margin: 0 -1%; width: 48%; display: inline-block; vertical-align: top; font-size: 1.5em; line-height: 110%; color: #666; background-color: transparent; position: relative; }
.client_fav a { height: 90px; display: block; vertical-align: top; position: relative; }
.client_fav strong { display: block; background-repeat: no-repeat; background-size: contain; background-position: center center; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
@media (min-width: 500px) {
	.client_fav, .client_fav a { height: 150px; }
}
@media (min-width: 650px) {
	#clients_fav { margin-left: -2%; margin-right: -2%; }
	.client_fav { width: 31%; margin: 1%; }
}
@media (min-width: 992px) {
	#clients_fav { margin-left: -1%; margin-right: -1%; }
	.client_fav { width: 23%; }
}
@media (min-width: 1200px) {
	#clients_fav { margin-left: -1.5%; margin-right: -1.5%; }
	.client_fav { width: 22%; margin: 1% 1.5%; }
}

#general_feed { background-color: #EAEAEA; }
#general_feed .item { width: 100%; height: 270px; position: relative; background-color: #5b84ad; margin: 0; }
#general_feed .item-sizer { width: 100%; }
#general_feed .item a { display: block; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#general_feed .item a span { display: block; height: 100%; padding: 20px; text-align: left; font-size: 0.95em; line-height: 140%; }
#general_feed .item a span strong { display: block; color: #5b84ad; font-family: 'Dosis', sans-serif; font-weight: 400; font-size: 1.8em; line-height: 110%; margin-bottom: 0.1em; }
#general_feed .item a:hover span { display: block; }
#general_feed .item.img a span { display: none; background-color: rgba(40,40,40,0.9); }
#general_feed .item.img a:hover { text-decoration: none; color: #FFF; }
#general_feed .item.img a:hover span { display: block; }
#general_feed .item.text a { color: #FFF; }
#general_feed .item.text a:hover { text-decoration: none; }
#general_feed .item.text a:hover span { background-color: #222; color: #FFF; }
@media (min-width: 500px) {
    #general_feed .item { float: left; width: 50%; height: 260px; }
    #general_feed .item-sizer { width: 50%; }
}
@media (min-width: 768px) {
    #general_feed .item { height: 270px; }
}
@media (min-width: 992px) {
	#general_feed .item { width: 33.333333%; height: 270px; }
    #general_feed .item-sizer { width: 33.333333%; }
    #general_feed .item.item_large { width: 66.666666%; height: 540px; }
}
@media (min-width: 1200px) {
	#general_feed .item { height: 300px; }
	#general_feed .item a span { padding: 25px; }
    #general_feed .item.item_large { height: 600px; }
}
@media (min-width: 1350px) {
	#general_feed .item { height: 350px; }
    #general_feed .item.item_large { height: 700px; }
}

#contact { background-color: #EAEAEA; }
#contact_form { margin: 1.8em 0; }
.contactpara { margin: 2em 0; }
@media (min-width: 768px) {
	.contactpara { margin: 3em 0; }
}

#map { height: 350px; width: 100%; text-align: left; }
.map_marker1 { width: 0; height: 0; position: relative; }
.map_marker1:after { font-family: 'Font Awesome 5 Pro'; content: "\f60d"; color: #336699; font-size: 4em; line-height: 100%; font-weight: lighter; position: absolute; bottom: 0; left: -0.25em; }
@media (min-width: 768px) {
    #map { height: 450px; }
}
@media (min-width: 1200px) {
    #map { height: 500px; }
}

#fsocial { margin: 1.8em 0; padding: 0; list-style: none; list-style-type: none; }
#fsocial li { display: inline-block; margin: 0 0.7em 0 0; }
#fsocial li:last-child { margin-right: 0; }
#fsocial li a { display: block; font-size: 1.5em; color: #FFF; background-color: #336699; border-radius: 3em; padding: 0.33em 0.20em; }
#fsocial li a i { position: relative; top: 1px; }
#fsocial li a.linkedin i { top: 0; left: 1px; }
#fsocial li a.instagram i { top: 0; }
#fsocial li a:hover { background-color: #000; }
@media (min-width: 768px) {
	#fsocial { margin: 2.1em 0; }
	#fsocial li a { font-size: 1.9em; }
}

#footer_base { background-color: #333; padding: 0.8em 0; }
#footer_base p { font-size: 0.80em; color: #CCC; }

#navfooter { margin: 0; padding-left: 0; list-style: none; list-style-type: none; }
#navfooter li a { display: block; padding: 0.3em 0.4em; font-size: 0.85em; font-weight: 700; color: #CCC; }
#navfooter li a:hover { color: #336699; text-decoration: none; }
@media (min-width: 768px) {
    #navfooter li { display: inline-block; }
	#navfooter li a { padding: 0.3em 0.5em; font-size: 0.90em; }
}

a.anchor { display: block; visibility: hidden; line-height: 0; height: 0px; }

#loading { position: fixed; top: 0; width: 100%; height: 100%; background-color: #336699; z-index: 9999; }
#loading i { color: #FFF; font-size: 2em; position: absolute; top: 50%; margin-left: -0.4em; margin-top: -0.4em; }

/* ==========================================================================
   Legacy Spacing classes
   ========================================================================== */

#areas { text-align: left; margin-bottom: 3em; }
.area_v_space_1 { padding-top: 1em; padding-bottom: 1em; }
.area_v_space_2 { padding-top: 2em; padding-bottom: 2em; }
.area_v_space_3 { padding-top: 2.5em; padding-bottom: 2.5em; }
.area_v_space_4 { padding-top: 3em; padding-bottom: 3em; }
.fw_statement1 { font-size: 2.5em; font-weight: 700; margin: 2em 0; }
.fw_statement2 { font-size: 2em; font-weight: 700; margin: 1.5em 0; }
.fullcol-50, .fullcol-100 { position: relative; }
.fullcol-50 img, .fullcol-100 img { width: 100%; }
.btm_center { position: absolute; bottom: 20px; width: 100%; text-align: center; margin: 0; }
.btm_center h6 { margin: 0.6em 0; text-shadow: 0px 0px 2px #000; font-family: 'Dosis', sans-serif; font-weight: 400; }
.title_tag { line-height: 120%; letter-spacing: 0.05em; text-transform: uppercase; }
@media (min-width: 768px) {
	.area_v_space_1 { padding-top: 3em; padding-bottom: 3em; }
    .area_v_space_2 { padding-top: 5em; padding-bottom: 5em; }
    .area_v_space_3 { padding-top: 6.5em; padding-bottom: 6.5em; }
    .area_v_space_4 { padding-top: 8em; padding-bottom: 8em; }
    .area_h_space_1 { padding-left: 5%; padding-right: 5%; }
	.area_pad_right { padding-right: 10%; }
	.fw_statement1 { font-size: 3.3em; margin: 2.5em 0; }
	.fw_statement2 { font-size: 3.0em; margin: 1.5em 0; }
	.fullcol-50 { width: 50%; float: left; }
	.btm_center { bottom: 30px; }
	.btm_center h6 { margin: 0.8em 0; }
}
@media (min-width: 992px) {
    .area_h_space_1 { padding-left: 10%; padding-right: 10%; }
	.area_pad_right { padding-right: 15%; }
	.fw_statement1 { font-size: 3.8em; }
}
@media (min-width: 1200px) {
    .area_h_space_1 { padding-left: 15%; padding-right: 15%; }
	.area_pad_right { padding-right: 15%; }
}

/* ==========================================================================
   Spacing classes
   ========================================================================== */

.areaspace_vertical_min { padding-top: 1em; padding-bottom: 2em; }
.areaspace_vertical { padding-top: 2em; padding-bottom: 3em; }
.areaspace_vertical_max { padding-top: 2.5em; padding-bottom: 3.5em; }
.areaspace_vertical_mega { padding-top: 7em; padding-bottom: 8em; }
.areaspace_above_max { padding-top: 2.5em; }
.areaspace_above { padding-top: 2em; }
.areaspace_above_min { padding-top: 1em; }
.areaspace_below_min { padding-bottom: 2em; }
.areaspace_below { padding-bottom: 3em; }
.areaspace_below_max { padding-bottom: 3.5em; }
.areaspace_minheight { min-height: 400px; }
@media (min-width: 576px) {
	.areaspace_minheight { min-height: 500px; }
}
@media (min-width: 768px) {
	.area_min_height { min-height: px; }
    .areaspace_vertical_min { padding-top: 1.5em; padding-bottom: 2.5em; }
    .areaspace_vertical { padding-top: 2.5em; padding-bottom: 3.5em; }
    .areaspace_vertical_max { padding-top: 4em; padding-bottom: 5em; }
    .areaspace_vertical_mega { padding-top: 9em; padding-bottom: 10em; }
    .areaspace_above_max { padding-top: 4em; }
    .areaspace_above { padding-top: 2.5em; }
	.areaspace_above_min { padding-top: 1.5em; }
	.areaspace_below_min { padding-bottom: 2.5em; }
    .areaspace_below { padding-bottom: 3.5em; }
    .areaspace_below_max { padding-bottom: 5em; }
    .areaspace_horizontal { padding-left: 2%; padding-right: 2%; }
    .areaspace_horizontal_max { padding-left: 7%; padding-right: 7%; }
    .areaspace_horizontal_max2 { padding-left: 8%; padding-right: 8%; }
	.areaspace_minheight { min-height: 600px; }
}
@media (min-width: 992px) {
    .areaspace_horizontal { padding-left: 6%; padding-right: 6%; }
    .areaspace_horizontal_max { padding-left: 15%; padding-right: 15%; }
	.areaspace_horizontal_max2 { padding-left: 21%; padding-right: 21%; }
}
@media (min-width: 1200px) {
    .areaspace_vertical_min { padding-top: 2em; padding-bottom: 3em; }
    .areaspace_vertical { padding-top: 3em; padding-bottom: 4em; }
    .areaspace_vertical_max { padding-top: 5em; padding-bottom: 6em; }
    .areaspace_vertical_mega { padding-top: 10em; padding-bottom: 11em; }
    .areaspace_above_max { padding-top: 5em; }
    .areaspace_above { padding-top: 3em; }
	.areaspace_above_min { padding-top: 2em; }
	.areaspace_below_min { padding-bottom: 3em; }
    .areaspace_below { padding-bottom: 4em; }
    .areaspace_below_max { padding-bottom: 6em; }
    .areaspace_horizontal { padding-left: 12%; padding-right: 12%; }
    .areaspace_horizontal_max { padding-left: 18%; padding-right: 18%; }
    .areaspace_horizontal_max2 { padding-left: 22%; padding-right: 22%; }
	.areaspace_minheight { min-height: px; }
}

@media (min-width: 992px) {
	.wide_margins .row, .row.wide_margins { margin-left: -30px; margin-right: -30px; }
	.wide_margins .row .column, .row.wide_margins .column { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 1200px) {
	.wide_margins .row, .row.wide_margins { margin-left: -40px; margin-right: -40px; }
	.wide_margins .row .column, .row.wide_margins .column { padding-left: 40px; padding-right: 40px; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print { 
	*, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}