/* This file contains all of the global constructs for the site, this would include things like, Quote boxes, default headings, buttons etc, for use uin all screen resolutions, if modification is needed this should be done in the responsive css files */
/** Quote box */
.quotebox, blockquote { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ color: #243843; background-color: #dde2e6; color: #444; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.1em; /* reset the parent */ margin: 0 0 1.5em 0; padding: 0; width: 97%; padding: 2.2em 1.9em 1.9em 1.9em; /* box style options */ /* quote mark colour options */ }
.quotebox:before, blockquote:before { font-family: claranet-glyph; content: "\e80e"; display: block; float: left; margin: -1.5rem 1rem 0 -1rem; font-size: 2.5rem; line-height: 3.5rem; color: #fff; }
.quotebox .end-quote:after, blockquote .end-quote:after { font-family: claranet-glyph; content: "\e811"; margin-left: 0.5rem; font-size: 0.6rem; color: #fff; vertical-align: top; }
.quotebox p, blockquote p { margin-bottom: 1em; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.1em; }
.quotebox p:last-child, blockquote p:last-child { margin-bottom: 0; }
.quotebox .company, .quotebox .Company, blockquote .company, blockquote .Company { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }
.quotebox.light, .quotebox.white, blockquote.light, blockquote.white { background-color: #fff; }
.quotebox.light:before, .quotebox.white:before, blockquote.light:before, blockquote.white:before { color: #e7ecef; }
.quotebox.light .end-quote:after, .quotebox.white .end-quote:after, blockquote.light .end-quote:after, blockquote.white .end-quote:after { color: #e7ecef; }
.quotebox.dark, blockquote.dark { background-color: #253741; }
.quotebox.dark p, blockquote.dark p { color: #fff; }
.quotebox.clear, .quotebox.transparent, blockquote.clear, blockquote.transparent { background-color: transparent; }
.quotebox.marks-red:before, .quotebox.marks-red .end-quote:after, blockquote.marks-red:before, blockquote.marks-red .end-quote:after { color: #e21e26 !important; }
.quotebox.marks-blue:before, .quotebox.marks-blue .end-quote:after, blockquote.marks-blue:before, blockquote.marks-blue .end-quote:after { color: #253741 !important; }

/** Call out buttons (NEW) */
.button { font-family: akzidenz-grotesk,helvetica,arial,sans-serif; display: inline-block; margin: 2em 0 1em 0; padding: 0.375em 0.8em; border: 0; color: #444; font-weight: 500; line-height: 1.25em; cursor: pointer; /* Rounded borders */ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /* style options */ /* size options */ }
.button:hover { text-decoration: none; }
.button:after { font-family: "claranet-glyph"; padding: 0 0 0 0.6em; content: "\e80d"; font-size: 0.95em; vertical-align: top; background: none; display: inline-block; }
.button.red { color: #fff; background-color: #e21e26; }
.button.red:hover { background-color: #cc1a22; }
.button.grey { color: #fff; background-color: #415560; }
.button.grey:hover { background-color: #56707e; }
.button.light-grey { color: #415560; background-color: #e7ecef; }
.button.light-grey:hover { background-color: #c8d4db; }
.button.light-grey:after { color: #fff; }
.button.white { color: #253741; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.25); }
.button.white:hover { background-color: rgba(255, 255, 255, 0.5); }
.button.white:after { color: #e21e26; }
.button.clear, .button.transparent { color: #fff; border: 1px solid; }
.button.clear:hover, .button.transparent:hover { background-color: rgba(255, 255, 255, 0.25); }
.button.outline { color: #253741; border: 1px solid; }
.button.outline:hover { background-color: rgba(255, 255, 255, 0.25); }
.button.outline:after { color: #e21e26; }
.button.text { background-color: transparent; color: #253741; margin: 0; padding: 0; }
.button.text:hover { color: #607d8e; }
.button.text:after { color: #e21e26; }
.button.large { font-size: 1.5rem; }
.button.medium { font-size: 1.2rem; }
.button.small { font-size: 0.9rem; }

/** Call out buttons
//  */
/* WHY CHOOSE? */
.why-choose { background-color: #e7ecef; padding: 1em; font-weight: bold; font-size: 1rem; }
.why-choose ul { padding: 0; margin: 0; }
.why-choose ul li { font-size: 1em; margin-bottom: 0.5em; list-style: none; color: #253741; display: block; margin-left: 2em; }
.why-choose ul li:before { content: ""; display: block; width: 20px; height: 21px; float: left; margin: 0.002em 0 0 -1.8em; background: transparent url('images/sprites-s566abdd177.png') 0 -455px no-repeat; }
.why-choose h2 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.7em; line-height: 1.2em; font-weight: normal; }

/* Lists */
.points { padding: 0; margin: 0; margin-bottom: 2em; }
.points.red li:before, .points ul.red li:before { background-color: #e21e26; border-radius: 50%; }
.points.grey li:before, .points ul.grey li:before { background-color: #b8bfc4; border-radius: 50%; }
.points li { list-style: none; padding: 0; margin: 0 0 0.3em 1em; }
.points li:before { content: " "; display: block; float: left; width: 7px; height: 7px; margin-top: 0.54em; margin-left: -1em; }

.tick { padding: 0; margin: 0; }
.tick li { font-size: 1em; margin-bottom: 0.5em; list-style: none; color: #253741; display: block; margin-left: 2em; }
.tick li:before { font-family: claranet-glyph; content: "\e818"; display: block; float: left; margin: 0.002em 0 0 -1.8em; color: #e21e26; }

/* TABS */
#tab-container { /* A special layout for tabs with Susy */ }
#tab-container h2 { color: #e21e26; font-size: 2.1rem; }
#tab-container ul.etabs { margin: 0 0 2em 0; padding: 0; /* Three tab version for Spain */ }
#tab-container ul.etabs:after { content: ""; display: table; clear: both; }
#tab-container ul.etabs li.tab { padding: 0; margin: 0; list-style: none; float: left; text-align: center; position: relative; /* use our special little tabs */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25%; float: left; padding-left: 0%; padding-right: 0%; }
#tab-container ul.etabs li.tab:last-child { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 25%; float: right; padding-left: 0%; padding-right: 0%; }
#tab-container ul.etabs li.tab.last a:before, #tab-container ul.etabs li.tab.last a:after { display: none; }
#tab-container ul.etabs li.tab a { display: block; background-color: #e7ecef; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-weight: normal; color: #415560; text-transform: uppercase; line-height: 4em; margin-right: 2px; font-size: 80%; }
#tab-container ul.etabs li.tab a:before, #tab-container ul.etabs li.tab a:after { top: 50%; transform: translateY(-50%); right: -17px; border: solid transparent; content: " "; height: 0; width: 0; z-index: 8; position: absolute; pointer-events: none; border-left-color: #E7ECEF; border-width: 10px; margin-left: 0; }
#tab-container ul.etabs li.tab a:after { border-left-color: white; border-width: 13px; margin-left: 0; right: -24px; top: 50%; z-index: 6; }
#tab-container ul.etabs li.tab a.active { background-color: #e21e26; color: #FFF; text-decoration: none; /* arrow */ }
#tab-container ul.etabs li.tab a.active:before { border-left-color: #e21e26; }
#tab-container ul.etabs li.tab a.active:hover { color: #e7ecef; text-decoration: none; }
#tab-container ul.etabs li.tab a:hover { background-color: #415560; color: #fff; text-decoration: none; }
#tab-container ul.etabs li.tab a:hover:before { border-left-color: #415560; }
#tab-container ul.etabs.three li.tab { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 33.33333%; float: left; padding-left: 0%; padding-right: 0%; }
#tab-container ul.etabs.three li.tab:last-child { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 33.33333%; float: right; padding-left: 0%; padding-right: 0%; }

.flowplayer.is-playing { background-color: transparent; }

.flowplayer .fp-progress { background-color: #e21e26; }

.is-paused.flowplayer .fp-ui { background: url("/sites/all/themes/claranet_responsive_2015/images/flowplayer-play.png") center no-repeat; }

/*.is-paused.flowplayer .fp-ui:hover {
background: url("/sites/all/themes/claranet_responsive_2015/images/flowplayer-play-hover.png") center no-repeat;
}*/
select { min-height: 30px; }

.footnote { font-size: 0.8em; color: #AAAAAA; }
.footnote a { color: #AAAAAA; }

.resources-view .views-row { margin-bottom: 3.44828%; width: 18.85246%; float: left; position: relative; }
.resources-view .views-row:nth-child(4n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.resources-view .views-row:nth-child(4n + 2) { margin-left: 27.04918%; margin-right: -100%; clear: none; }
.resources-view .views-row:nth-child(4n + 3) { margin-left: 54.09836%; margin-right: -100%; clear: none; }
.resources-view .views-row:nth-child(4n + 4) { margin-left: 81.14754%; margin-right: -100%; clear: none; }
.resources-view .views-row p { margin-bottom: 3px; }

@font-face { font-family: 'claranet-glyph'; src: url("/sites/all/libraries/font/fontello.eot"); src: url("/sites/all/libraries/font/fontello.svg") format("svg"), url("/sites/all/libraries/font/fontello.ttf") format("truetype"), url("/sites/all/libraries/font/fontello.woff") format("woff"), url("/sites/all/libraries/font/fontello.woff2") format("woff2"); }
/* image render contrast chrome */
img.crisp-edges { image-rendering: -webkit-optimize-contrast; }

/* additional card style */
.grey-cards .card { background-color: #e7ecef; }

/* start fixed menu */
#header-wrapper.pinned-top { position: fixed; width: 100%; top: 0; background-color: #fff; z-index: 110; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

#header-wrapper { transition: box-shadow 0.5s ease; }

/* end fixed menu */
#breadcrumb ul li.last { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* slider */
.vcenter .slick-track { display: flex; }

.vcenter .slick-track .slick-slide { display: flex; height: auto; align-items: center; justify-content: center; }

/* end slider */
.views-bs .view-content { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }

.text-decoration-none { text-decoration: none !important; }

img.leader-glyph, div.leader-glyph img { border: 0.8rem solid transparent; border-radius: 50%; transition: all 0.3s ease; }

a:hover img.leader-glyph, div.leader-glyph a:hover img { border: 0.8rem solid #fff; }

a:hover img.leader-glyph.red, div.leader-glyph.red a:hover img { border: 0.8rem solid #e21e26 !important; }

a:hover img.leader-glyph.grey, div.leader-glyph.grey a:hover img { border: 0.8rem solid #e7ecef !important; }

a:hover img.leader-glyph.darkgrey, div.leader-glyph.darkgrey a:hover img { border: 0.8rem solid #cfd9df !important; }

/* special fix for bens wonky icons on a dark bg */
.bg-dark a img.leader-glyph, .bg-dark .leader-glyph a img { background-color: #fff; border: 0.8rem solid #002d37; }

.active-border { border: 0.8em solid transparent !important; border-radius: 50% !important; transition: all 0.3s ease !important; }
.active-border.white { border: 0.8em solid #fff !important; }
.active-border.grey { border: 0.8em solid #e7ecef !important; }
.active-border.red { border: 0.8em solid #e21e26 !important; }
.active-border:hover { border: 0.8em solid #e21e26; }

/*.services-banner { margin-top: -31px !important;

}
body.front .services-banner {  margin-top: 0 !important;
}*/
.services-banner #block-claranet-2015-menu-services-menu { position: absolute; top: 15px; left: 15px; }

.services-banner #block-claranet-2015-menu-services-menu > .block-inner { margin: 0; }

/*.services-banner img { max-width: 250px;
}*/
.services-banner h1, .services-banner h2, .services-banner p { color: #fff; }

.points.red a { font-weight: 500; }

ul.arrows { padding: 0; margin: 0; margin-bottom: 2em; }

ul.arrows.red li:before { font-family: "claranet-glyph"; content: "\e804"; font-size: 1rem; vertical-align: top; background: none; display: inline; line-height: 1.6em; float: left; color: #e21e26; margin-left: -1em; }

ul.arrows li { list-style: none; padding: 0; margin: 0 0 0.3em 1em; }

.bg-grey, .bg-light { background-color: #e7ecef !important; }

.bg-blue, .bg-dark { background-color: #002d37 !important; }

.bg-red { background-color: #e21e26 !important; }

div.text-light h1, div.text-light h2, div.text-light h3, div.text-light h4, div.text-light h5, div.text-light h6, div.text-light p, .text-light { color: #fff; }

div.text-dark h1, div.text-dark h2, div.text-dark h3, div.text-dark h4, div.text-dark h5, div.text-dark h6, div.text-dark p, .text-dark { color: #253741; }

.subhead { font-size: 1.43rem; line-height: 2.08rem; margin-bottom: 1.2rem; }

.keyline { border-top: 1px solid #ddd; max-width: 900px; width: calc(100% - 30px); margin: 0 auto; }

.extra-services img { max-width: 150px; }

.extra-services h3 { font-size: 1.5rem; line-height: 1.8rem; }

.title-strapline { font-weight: 500; font-size: 3em; line-height: 1em; }

.row > .polaroid { margin-bottom: 2em; }

/*blockquote.white { background-color: #fff;
}
blockquote.white:before { content: ""; display: block; float: left; width: 71px; height: 65px; margin: -1.3em 0.8em 0 -1em; background: transparent url(/sites/all/themes/claranet_responsive_2015/css/images/sprites/quote-grey.png) 0 0px no-repeat;
}
blockquote.dark { background-color: #253741;
}
blockquote.dark p { color: #fff;
}
blockquote.transparent { background-color: transparent;
}*/
.block-webform.token-block { margin: 0; }

.block-webform.token-block > .block-inner { margin: 0; }

.block-webform.token-block input[type="text"], .block-webform.token-block input[type="email"] { min-height: 30px; }

.block-webform.token-block input[type="submit"] { font-size: 1.2rem; margin-bottom: 0; margin-top: 1rem; }

.block-webform.token-block label { font-size: 1rem; }

/*.list-unstyled { padding-left: 0; list-style: none;
}*/
/* cycle2 fix */
.node-type-landing-page .cycle-slide { z-index: 97 !important; }

.node-type-landing-page .cycle-slide.cycle-slide-active { z-index: 98 !important; }

/* tab bar */
.node-type-landing-page .tab-bar > ul > li:hover:not(.active) { transition: color 0.3s ease; color: #e11a22; }
.node-type-landing-page .tab-bar ul { list-style: none; padding: 0; margin: 0; }
.node-type-landing-page .tab-bar ul li { padding: 1rem; font-weight: 500; cursor: pointer; }
.node-type-landing-page .tab-bar ul li.active { background-color: #fff; }
.node-type-landing-page .tab-bar ul li span { font-family: "claranet-glyph"; background: none; margin-right: 0.5rem; font-size: 1rem; vertical-align: top; }
.node-type-landing-page .overview:before { content: "\e80B"; }
.node-type-landing-page .details:before { content: "\e80a"; }
.node-type-landing-page .requirements:before { content: "\e80c"; }
.node-type-landing-page .brochure:before { content: "\f1c1"; }

.row .separator { border-right: 1px solid #ccc; }

.youtubeWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }

.youtubeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.border-top { border-top: 1px solid #ccc; padding-top: 1rem; }

.view-case-studies.industries-cs .views-field-edit-node { position: absolute; top: 0; right: 2rem; }

/* youtube videos */
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.yt-video { position: relative; }

.yt-video:after { cursor: pointer; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ''; background: url(/sites/all/themes/claranet_responsive_2015/images/flowplayer-play.png) center no-repeat; }

.yt-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.yt-container embed, .yt-container iframe, .yt-container object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.de-youtube { line-height: 0; }
.de-youtube > img { width: 100%; }
.de-youtube ~ .yt-disclaimer { padding: 1rem; background-color: #e7ecef; border: 1px solid #bbb; }

.node-type-videos .field-name-body { margin-top: 2rem; }

/* videos content type */
body.node-type-videos .node-content .field-type-file video { margin-bottom: 1rem; }

.scroll-to-contact { text-decoration: none !important; }

/* videojs */
.field-type-youtube { margin-bottom: 1.5rem; }

div.video-js { width: auto !important; /* override the plugin's inline dims to let vids scale fluidly */ height: auto !important; border: 1px solid #ddd; margin-bottom: 1.5rem; }
div.video-js video { position: relative !important; outline: none !important; margin-bottom: -2px !important; }
div.video-js .vjs-poster { background-size: cover; }
div.video-js .vjs-volume-bar { margin: 1.35em 0.45em !important; }
div.video-js .vjs-big-play-button { border: none !important; background: none !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; }
div.video-js .vjs-big-play-button .vjs-icon-placeholder:before { content: ""; background-image: url("/sites/all/themes/claranet_responsive_2018/images/flowplayer-play.png"); background-repeat: no-repeat; background-position: 50% 50%; border: none !important; box-shadow: none !important; }
div.video-js .vjs-button { outline: none !important; }
div.video-js.vjs-has-started.vjs-paused button.vjs-big-play-button { display: block; }

.vjs-slider-horizontal .vjs-volume-level:before { top: -0.333em; }

/* ebook preview */
.preview-shadow .webform-component-node-field img { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; border: 1px solid #ddd; }

/* banner content type */
.node-type-banner #main-content-header { position: absolute; top: 95px; right: 0; }

#content .zebra.section-cybersecurity { background-color: #002d37; }
#content .zebra.section-cybersecurity h1, #content .zebra.section-cybersecurity h2, #content .zebra.section-cybersecurity p { color: #fff !important; }

/* Max widths for every 5% */
.mw-0 { max-width: 0%; }

.mw-5 { max-width: 5%; }

.mw-10 { max-width: 10%; }

.mw-15 { max-width: 15%; }

.mw-20 { max-width: 20%; }

.mw-25 { max-width: 25%; }

.mw-30 { max-width: 30%; }

.mw-35 { max-width: 35%; }

.mw-40 { max-width: 40%; }

.mw-45 { max-width: 45%; }

.mw-50 { max-width: 50%; }

.mw-55 { max-width: 55%; }

.mw-60 { max-width: 60%; }

.mw-65 { max-width: 65%; }

.mw-70 { max-width: 70%; }

.mw-75 { max-width: 75%; }

.mw-80 { max-width: 80%; }

.mw-85 { max-width: 85%; }

.mw-90 { max-width: 90%; }

.mw-95 { max-width: 95%; }

.socks-up { /*margin-bottom: -3em;*/ margin-bottom: -20px; }

/** Animations */
.fadeInUp { animation-name: fadeInUp; animation-duration: 0.5s; animation-timing-function: ease; }

.fadeInDown { animation-name: fadeInDown; animation-duration: 0.5s; animation-timing-function: ease; }

/** Every banner animation */
.services-banner .services-banner__wrapper .justify-content-center div:nth-child(1) { animation-name: fadeInUp; animation-duration: 0.5s; animation-timing-function: ease; }

.services-banner .services-banner__wrapper .justify-content-center div:nth-child(2) { animation-name: fadeInDown; animation-duration: 0.5s; animation-timing-function: ease; }

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); } }
.containerCF .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ }

.logo-container { position: absolute; top: 0; left: 10%; width: 100%; height: 100%; }

.logo-container img { max-width: 35%; align-self: center; }

/* margin-top fix for page background */
.page-views #page > #content-wrapper { background-color: #f9f9f9; margin-top: 0; padding-top: 1rem; }

.containerCF.block-menu ul { padding: 0; }

.containerCF.block-menu li { font-weight: 500; list-style: none; display: inline-block; font-size: 1rem; padding: 4px 8px; border-right: 2px solid; color: #ccc; }

.containerCF.block-menu li a.active-trail { color: #000; }

/*#secondary-content-wrapper > .bs-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
}*/
.containerCF .view-content a { text-decoration: none; }

.containerCF { margin: 0 auto; padding-left: 15px; padding-right: 15px; }

.containerCF .tile img { width: 100%; }

.containerCF h3 { margin-top: 0; font-weight: bold; }

.containerCF .description { padding: 1rem; z-index: 5; }

.containerCF .tile { -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; overflow: hidden; background-color: #fff; margin-bottom: 3rem; position: relative; cursor: pointer; }

.containerCF .tile .button.medium { font-size: 1.1rem; }

.containerCF .tile h3 { font-size: 1.5rem; line-height: 1.3; }

.containerCF .tile h3 a { color: #253741; }

.containerCF .tile > div p { color: #444; font-weight: 300; }

.containerCF .tile.up .description { top: 0 !important; -webkit-transition: none !important; transition: none !important; }

.containerCF .socialContainer:after { content: ''; position: absolute; top: -80px; left: 0; width: 100%; height: 120px; z-index: -1; background: white; background: linear-gradient(0deg, #ffffff 40%, rgba(255, 255, 255, 0) 85%); }

.containerCF .tile:not(.news) .image-container { padding-bottom: 54.5%; height: 0; position: relative; }

.containerCF .videos .image-container:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; background: url(/sites/all/themes/claranet_responsive_2018/images/flowplayer-play.png); height: 93px; width: 93px; z-index: 1; }

.tasks { position: absolute; bottom: 0; width: 100%; z-index: 5; }

.tasks .tile-link { background-color: #e7ecef; padding: 1rem; border-top: 1px solid #ddd; }

.tasks .tile-link:after { font-family: "claranet-glyph"; padding: 0 0 0 0.45em; content: "\e804"; font-size: 1.5em; float: right; }

.tasks .social { text-align: center; display: none; transition: all 0.3s ease; padding: 0.5rem; background-color: #fff; }

.tasks .social img { max-width: 32px; margin: 0 3px; opacity: 0.8; }

.tasks .social img:hover { opacity: 1; }

.tile:hover > .tasks .button.light-grey { background-color: #c8d4db !important; }

@media (min-width: 768px) { .containerCF { max-width: calc(500px + 2.4rem); padding: 0; }
  .containerCF .tile { float: left; width: 250px; height: 350px; margin-right: 1.2rem; margin-bottom: 1.2rem; }
  .containerCF .tile:not(.news) .description { background-color: #fff; position: absolute; top: 137px; height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; }
  .containerCF .mouseIn .description { transform: translate(0px, -137px); }
  .containerCF .mouseIn .social { display: block; }
  /* always feature */
  .containerCF .view-content > div:first-child .tile { width: calc(500px + 1.2rem); height: calc(700px + 1.2rem); }
  .containerCF .view-content > div:first-child .tile .description { top: 284px; }
  .containerCF .view-content > div:first-child .tile h3 { font-size: 2.5rem; }
  .containerCF .view-content > div:first-child .mouseIn .description { transform: translate(0px, -284px); }
  .containerCF .views-exposed-widgets { margin: 0 auto; max-width: 500px; } }
@media (min-width: 992px) { .containerCF { /* 3 tiles and 3 borders */ max-width: calc(750px + 3.6rem); } }
@media (min-width: 1200px) { .containerCF { /* 4 tiles and 4 borders */ max-width: calc(1000px + 4.8rem); } }
#secondary-content-wrapper > .bs-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

.hero-video { overflow: hidden; position: relative; background-color: transparent; height: 0; padding-top: 25%; }

.hero-video .cycle-slideshow, .hero-video video { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: -10; min-width: 100%; width: auto; height: auto; background-size: cover; }

.hero-video h1 { position: absolute; top: 50%; left: 50%; width: 660px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 10; margin: auto auto; color: #fff; text-align: center; font-size: 4.2em; font-family: akzidenz-grotesk,helvetica,arial,sans-serif; font-weight: 500; }

.b-lazy { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; max-width: 100%; opacity: 0; }

.b-lazy.b-loaded { opacity: 1; }

.containerCF .tile.social-banner { background-color: #c8d4db; }

.containerCF .tile.social-banner h2 { font-weight: bold; }

.containerCF .tile.social-banner img { max-width: 110px; }

.containerCF .tile.up .tasks .socialContainer { display: block; transform: translate(0px, 40px); transition: all 0.3s ease; }

.containerCF .tile.up:hover .tasks .socialContainer { transform: translate(0px, -35px); }

.containerCF .tile.up .button { position: absolute; bottom: 0; width: 100%; }

.containerCF .tile.up .social { display: block; }

.containerCF .tile.up .image-container { display: none; }

.containerCF select { -webkit-appearance: none; -moz-appearance: none; background-color: #fff; padding: 0 0.65em; height: 2.2rem; width: 100%; border-radius: 0; border: 1px solid #cdcdcd; cursor: pointer; margin-bottom: 0.5rem; }

.containerCF select:focus { border: 1px solid #d9002a; outline: none; }

.containerCF .views-exposed-widget { width: 100%; margin-bottom: 1rem; padding: 0; }

.containerCF .views-exposed-widget label { display: none; }

#block-menu-menu-ressources li:last-child { border: none; }

.containerCF .views-exposed-widgets { position: relative; }

.containerCF .ajax-progress-throbber { position: absolute; top: 8px; right: 5px; background-color: #fff; z-index: 200; }

.containerCF .views-exposed-form .form-type-select:after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #e21e26; position: absolute; top: calc(50% - 7px); right: 0.65em; z-index: 100; pointer-events: none; }

.containerCF .views-exposed-form .form-type-select { position: relative; }

.containerCF select::-ms-expand { display: none; }

.containerCF select::-ms-value { background: transparent; color: #000000; }

/* NEW block menu */
.containerCF .form-type-select.form-item-jump:after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #e21e26; position: absolute; top: calc(50% - 7px); right: 0.65em; z-index: 100; pointer-events: none; }

.containerCF .form-type-select.form-item-jump { position: relative; display: block; margin: 0 auto; max-width: 500px; }

/* @file global.styles
 Styles you add here will load for all device sizes, they are "global", as opposed to "responsive" styles, which only load for a given breakpoint (media query) that you set in theme settings. See the README for more details.   How to use this file: --------------------  There are many empty selectors and some basic styles to act as a guide. Nothing is set in stone and you can change anything - even delete all of it and start with your own clean slate.  To FORCE PRINT all selectors you can search and replace a single { (opening curly brace) and insert an empty comment. This is very useful in conjuction with FireSass: https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/  See global.base also which includes normalize.css and some additional helper classes and base styles. */
/* ============================================================================= Base ========================================================================== */
/* To preserve theme settings never apply font properties to the HTML element. This is critically important if you are using the Responsive JavaScript feature as this relies on being able to set a pseudo font family on the HTML element. If you need to set default font properties of any kind use the BODY element as these can be overridden using font theme settings. */
html { background: #fff; }

body { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; font-size: 87.5%; }

/* ============================================================================= HTML Elements ========================================================================== */
h1 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 3.5em; line-height: 1.1em; color: #253741; }

h2 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 2.5em; line-height: 1.2em; font-weight: normal; color: #253741; margin-bottom: 0.5em; }

h3 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 2em; line-height: 1.2em; font-weight: normal; color: #253741; margin-bottom: 0.5em; }

h4 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.7em; line-height: 1.2em; font-weight: normal; color: #253741; margin-bottom: 0.5em; }

h5 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.3em; line-height: 1.2em; font-weight: normal; color: #253741; margin-bottom: 0.5em; }

p { color: #253741; font-size: 1.1rem; line-height: 1.5em; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }

ul { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }

li { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }
li.last { float: none; }

.node li { font-size: 1.2rem; }

pre, code, tt, samp, kbd, var { font-family: Consolas, Monaco, "Courier New", Courier, monospace, sans-serif; }

/* ============================================================================= Wrappers ========================================================================== */
/* Outer wrappers: - #page-wrapper: body > #page-wrapper - #page: body > #page-wrapper > #page - .container: body > #page-wrapper > #page.container  The .container class holds the page width value from theme settings. You can style the .container class but do not add width such as border, padding, margins etc. */
#page.container { margin: auto 0; max-width: 1140px; }

/* mega menu */
.tb-megamenu .mega > .mega-dropdown-menu { width: 100%; }

/* New menu 2018 */
#block-tb-megamenu-main-menu .tb-megamenu { background-color: #fff; /* For some reason this is black by defautl? */ }
#block-tb-megamenu-main-menu .tb-megamenu span.caret { display: none; }
#block-tb-megamenu-main-menu .tb-megamenu .btn-navbar { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#block-tb-megamenu-main-menu .tb-megamenu .mega-caption { white-space: normal; }
#block-tb-megamenu-main-menu .tb-megamenu .dropdown-menu { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; background-color: #eee; }
#block-tb-megamenu-main-menu .tb-megamenu .dropdown-menu .active > a { background-image: none; background-color: transparent; }
#block-tb-megamenu-main-menu .tb-megamenu .services-menu li:last-child a { border-bottom: none; }
#block-tb-megamenu-main-menu .tb-megamenu .services-menu a { padding: 0.8rem 0; border-bottom: 1px solid #bcbcbc; font-weight: 200; font-size: 1.5rem; }
#block-tb-megamenu-main-menu .tb-megamenu .services-menu a span { font-size: 0.8em; font-weight: 400; display: block; margin: 0.4rem 0; color: #444; }
#block-tb-megamenu-main-menu .tb-megamenu .level-1 > a { text-transform: uppercase; font-weight: 400 !important; font-size: 0.85rem !important; }
#block-tb-megamenu-main-menu .tb-megamenu a { padding: 0 1em 0 0; border: 0; color: #111; font-size: 1rem; font-weight: 200; }
#block-tb-megamenu-main-menu .tb-megamenu a:hover { color: #e21e26; }
#block-tb-megamenu-main-menu .tb-megamenu .nav .active a { background-color: transparent; }
#block-tb-megamenu-main-menu .tb-megamenu .nav li { /* Why is this red by default.. */ }
#block-tb-megamenu-main-menu .tb-megamenu .nav li.dropdown.active { background-color: none; }

/* New menu 2019 */
#block-claranet-2015-menu-services-menu { position: absolute; bottom: -10px; width: 100%; }
#block-claranet-2015-menu-services-menu .block-inner { margin-left: 0; margin-right: 0; }

#block-tb-megamenu-menu-main-menu-2019- { position: absolute; bottom: -9px; width: 100%; }
#block-tb-megamenu-menu-main-menu-2019- .block-inner { margin-left: 0; margin-right: 0; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu { background-color: white; /* For some reason this is black by defautl? */ /* active colors */ }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .tb-megamenu-item.dropdown-submenu.open > a { background-color: #888; color: white; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.2); margin-top: -2px; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .dropdown-menu .active > a { background-color: #e21e26; color: #fff !important; background-image: none; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .level-2 .dropdown-menu { margin-left: 1px; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .caret { border-top-color: #666; border-bottom-color: #666; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .dropdown_toggle:hover .caret { border-top-color: #e21e26 !important; border-bottom-color: #e21e26 !important; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav > .active > a { background-color: transparent; color: #e21e26; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav li.dropdown.open a:hover .caret, #block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav li.dropdown.animating a:hover .caret { border-top-color: #e21e26 !important; border-bottom-color: #e21e26 !important; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav li.dropdown > .dropdown_toggle:hover .caret { border-top-color: #e21e26; border-bottom-color: #e21e26; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav li.dropdown.active > .dropdown-toggle { color: #e21e26; background-color: white; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav li.dropdown.active > .dropdown-toggle .caret { border-top-color: #e21e26; border-bottom-color: #e21e26; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .level-1.open.dropdown > a { border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: none; background-color: white; position: relative; z-index: 1001; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .nav > li > a { border: 1px solid white; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .level-1 > a { text-transform: uppercase; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .level-1 a { padding: 7px; font-weight: 400 !important; font-size: 0.85rem !important; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu a { color: #111; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu a:hover { color: #e21e26; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .mega-inner { padding: 0; }
#block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .mega-nav > li a, #block-tb-megamenu-menu-main-menu-2019- .tb-megamenu .dropdown-menu .mega-nav > li a { padding: 10px; }

#messages .error { margin-bottom: 1em; }

/* Wraps the main content column */
#content-wrapper { margin-top: 2em; }

/* we should only remove the margin top for landing pages since they have banners at the top */
.node-type-service-page #content-wrapper, .node-type-landing-page #content-wrapper { margin-top: 0; }

/* Wraps the pre-footer content/postfix region */
#pre-footer-content-wrapper { background-color: #59636e; }

#pre-footer-content-wrapper .get-in-touch .disclaimer p, #pre-footer-content-wrapper .get-in-touch .disclaimer label { color: #fff; }
#pre-footer-content-wrapper .get-in-touch .disclaimer a { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; font-weight: 500; }

#pre-footer-content-wrapper .container { max-width: 1140px; padding: 4em 0; }

#pre-footer-content-wrapper .get-in-touch { margin-bottom: 0; }

#pre-footer-content-wrapper .get-in-touch .block-title { text-align: center; color: #fff; margin-bottom: 3rem; }

#pre-footer-content-wrapper .get-in-touch .form-actions { text-align: center; margin-bottom: 0; }
#pre-footer-content-wrapper .get-in-touch .form-actions input { margin-bottom: 0; margin-top: 1rem; }

#pre-footer-content-wrapper .webform-client-form { margin: 0; }

/* Footer wrapper */
#footer-wrapper { /* Debug styles, is this working? */ background: #253741; color: #eee; }
#footer-wrapper a { color: #eee; }
#footer-wrapper a:visited { color: #eee; }
#footer-wrapper a:active { color: #eee; }
#footer-wrapper a:hover { color: #eee; }

/* ============================================================================= Branding ========================================================================== */
/* Site name (h1) */
#site-name { margin: 0; }
#site-name a:link, #site-name a:visited { text-decoration: none; }
#site-name a:hover, #site-name a:focus { text-decoration: underline; }

/* Site slogan (h2) */
#site-slogan { margin: 0; }

/* ============================================================================= Page content header ========================================================================== */
/* Main content header wraps the page title, tabs and actions links */
.node-type-landing-page #main-content-header { position: absolute; top: 95px; right: 0; }

/* HERE Some testing for the Services pagfe */
.grid-row.hero { background-color: #f00; height: 400px; }

.local-menu { display: block; width: 300px; height: 50px; background-color: #444; }

.mock-menu .menu-col { width: 33.33333333%; float: left; background-color: #eee; padding: 1em; box-sizing: border-box; }

/* The main page title (h1) */
#page-title { margin: 0 0 0.6em 0; }

/* ============================================================================= Misc Global Styles ========================================================================== */
/* Feed icons */
/* Aggregator feed source */
#aggregator .feed-source .feed-icon { display: inline; float: none; margin-right: 10px; }

.feed-details dt, .feed-details dd { display: inline; margin: 0; }

/* Generic styles for the more link */
/* Generic styles for links. See the ul.links declaration in node and comment stylesheets */
ul.links { margin: 0; padding: 0; }
ul.links.inline { display: block; }
ul.links li { display: inline; list-style: none; padding: 0 10px 0 0; }

/* Search results are an ordered list so reset the margin */
.search-results { margin: 0; padding: 0; }

/* Attribution message and link */
.attribution { display: block; opacity: 0.65; padding: 1em 0; text-align: center; }
.attribution a { text-decoration: none; color: inherit; }
.attribution a:hover, .attribution a:focus { text-decoration: underline; }

/* ============================================================================= Regions ========================================================================== */
/* Standard region wrapper, don't add width to any regions, you will bork the layout - no margin, padding or borders etc */
/* Regions have an inner div - perfect for adding margin, padding or borders */
/* Regions can be nested, such as when using Panels */
/* #header */
/* Header region, embedded in the #header */
/* Generally used to output Drupals help block, if the help module is enabled */
/* Secondary content */
/* Sits above the main content header, like a content-top region */
/* Sits below the main content, like a content-bottom region */
/* Sidebars - targets both */
/* First sidebar */
/* Second sidebar */
/* Tertiary content */
/* Footer region */
/* ============================================================================= Links ========================================================================== */
a { color: #e21e26; text-decoration: none; }
a:visited { color: #e21e26; }
a:hover, a:focus { text-decoration: underline; }

/* ============================================================================= Primary, Secondary and Menu Bar region menus ========================================================================== */
.nav { clear: both; margin: 10px 0; }
.nav ul, .nav ul.menu { margin: 0; padding: 0; }
.nav li, .nav ul.menu li { display: inline; float: left; list-style: none; margin: 0; padding: 0; }
.nav li a, .nav ul.menu li a { display: block; white-space: nowrap; padding: 0 10px; }
.nav .block { margin-bottom: 0; }

/* ============================================================================= Superfish ========================================================================== */
ul.sf-menu { margin-bottom: 0; }
ul.sf-menu a { border-left: 0; border-top: 0; padding: 0 10px; text-decoration: none; height: 2.5em; line-height: 2.5em; }
ul.sf-menu li:hover, ul.sf-menu li.sfHover { outline: 0; }
ul.sf-menu a:focus, ul.sf-menu a:hover, ul.sf-menu a:active { outline: 0; }

/* Superfish blocks */
.block-superfish ul { margin: 0 !important; padding: 0 !important; }
.block-superfish li { margin: 0 !important; padding: 0 !important; }

/* Vertical style */
.sf-vertical { width: 100%; }
.sf-vertical li { width: 100%; }
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 100%; top: 0; margin: 0; padding: 0; }
.sf-vertical li a { padding: 0 10px; }

/* Navbar style */
.sf-navbar { padding-bottom: 0 !important; }

/* Sensible padding for the default style */
.sf-menu.sf-style-default a { padding: 0 10px; }

/* ============================================================================= Menu Toggles ========================================================================== */
.at-mt .at-menu-toggle, .at-mt .at-menu-toggle ul, .at-mt .at-menu-toggle ul.menu { margin-top: 0; margin-bottom: 0; padding: 0; }
.at-mt .at-menu-toggle-button { margin: 0; }
.at-mt .at-menu-toggle ul a { padding: 0 10px; white-space: nowrap; }

/* ============================================================================= Menus, usually blocks ========================================================================== */
ul.menu { padding-left: 15px; }
ul.menu ul { padding-left: 15px; }
ul.menu li { margin: 0; }

/* If li.content exists it's a problem, so reset the padding */
.block .menu li.content { padding: 0; }

/** Blocks for staff profiles, added for DE */
#block-views-staff-profiles-block { overflow: hidden; *zoom: 1; background-color: #e7ecef; }
#block-views-staff-profiles-block .view-content .views-row { text-align: center; margin-bottom: 4em; }
#block-views-staff-profiles-block .view-content .views-row h3 { margin: 0.7em 0 0.3em; }
#block-views-staff-profiles-block .view-content .views-row h4 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; margin: 0; font-size: 1.2rem; min-height: 2.2em; }
#block-views-staff-profiles-block .view-content .views-row .button { margin-top: 1em; }
#block-views-staff-profiles-block .block-title { /* max-width:1140px; */ /* margin: 1em auto !important; */ }

/* ============================================================================= Book navigation menu ========================================================================== */
.book-navigation .page-up { /* Prevent text wrapping to a new line, assumes English "up" is used (two characters) */ min-width: 2em; white-space: nowrap; }
.book-navigation .menu { margin-left: 0; }

/* ============================================================================= Breadcrumbs ========================================================================== */
/* ============================================================================= Pagers ========================================================================== */
ul.pager { clear: both; margin: 0; text-align: center; }

.item-list ul.pager li { margin: 0; }

ul.pager li { background-image: none; display: inline; list-style-type: none; padding: .5em; }
ul.pager li.pager-current { font-weight: 500; }

.block ul.pager li { margin: 0; }

/* Theme the various states of pager links */
/* ============================================================================= Skip Navigation ========================================================================== */
#skip-link { left: 50%; margin-left: -6.5em; margin-top: 0; padding: 0 0.5em; position: absolute; width: 12em; z-index: 50; }
#skip-link a { background: #444; background: rgba(0, 0, 0, 0.6); color: #fff; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none; }
#skip-link a:link, #skip-link a:visited { background: #444; background: rgba(0, 0, 0, 0.6); color: #fff; display: block; line-height: 2; padding: 0; text-align: center; text-decoration: none; }
#skip-link a:hover, #skip-link a:focus, #skip-link a:active { outline: 0; }

/* ============================================================================= Tabs (local tasks) ========================================================================== */
#tasks { margin-bottom: 15px; }

ul.primary { border-bottom-color: #ccc; margin: 20px 0; padding: 0 0 0 5px; z-index: 210; }
ul.primary li { display: block; float: left; margin: 0 1px -1px; }
ul.primary li a { background-color: #f5f5f5; border-color: #ccc; margin-right: 1px; padding: 0 10px; display: block; float: left; height: 1.5em; line-height: 1.5em; }
ul.primary li a:hover, ul.primary li a:focus { background-color: #eee; border-color: #ccc; }
ul.primary li.active a, ul.primary li.active a:hover, ul.primary li.active a:focus { background-color: #fff; border-bottom-color: #fff; }

ul.secondary { border-bottom: 1px solid #ccc; margin: 1em 0 0; padding: 0 .3em 1em; }
ul.secondary li { border-right: 0; list-style: none; padding: 0 10px 0 0; }
ul.secondary li a:hover, ul.secondary li a.active { border-bottom: none; text-decoration: underline; }

/* ============================================================================= Action links ========================================================================== */
ul.action-links { margin: 20px 0 0; list-style: none; }

/* ============================================================================= Field Styling ========================================================================== */
/* Wrapper for any field */
/* Above and inline classes are on the field wrapper */
/* When labels are set to inline in field display settings the clearfix class is automatically added */
.field-label-inline { /* Remove the margin on inline field lables to preserve vertical formatting */ }
.field-label-inline .field-label { margin: 0; }

/* Labels are h2 in Adaptivetheme. Use a strong selector to mitigate unwanted ineritance issues */
.field-label { font-size: 1em; font-weight: 500; font-family: inherit; line-height: inherit; margin-bottom: 0; }

/* Field types (Core) */
/* Image fields use the <figure> and <figcaption> elements from HTML5 */
/* Removes the top margin on the first element within fields */
.field-items .field-item *:first-child { margin-top: 0; }

/* Taxonomy */
.field-type-taxonomy-term-reference { /* The same bottom margin as p, blockquote, ul, ol and dl */ margin-bottom: 1.5em; }
.field-type-taxonomy-term-reference.field-label-inline .field-items { margin: 0; padding: 0; }
.field-type-taxonomy-term-reference.field-label-inline .field-item { display: inline; list-style: none; padding: 0 10px 0 0; }

/* Text */
/* Long text */
/* Text with summary */
/* File */
/* Number/Integer */
/* Decimal */
/* Number float */
/* List */
/* List boolean */
/* List integer */
/* List float */
/* Field types (Contrib) */
/* Named fields */
/* Underscores in field name are replaced with dashes */
/* Image Alignment Theme Settings - included here so you can easily override */
/* Float none setting */
/* Float left setting */
.ia-l .field-type-image figure, .iat-l .field-type-image figure { margin: 5px 20px 15px 0; }

/* Centered setting */
.ia-c .field-type-image figure, .iat-c .field-type-image figure { margin: 5px auto 15px; }

/* Float right setting */
.ia-r .field-type-image figure, .iat-r .field-type-image figure { margin: 5px 0 15px 20px; }

/* ============================================================================= Block Styling ========================================================================== */
/* Main wrapper for most blocks, block_system_main does not have it */
.block { margin-bottom: 20px; }

/* Inner wrapper for most blocks, good for margin, padding and borders, block_system_main does not have it */
/* The first block in the region */
/* The last block in the region */
/* Zebra striping for each block in the region */
/* Zebra striping for each block in the region */
/* Block title */
.block-title { margin: 0; }

/* Block content wrapper */
/* Match item list and block menu margin and padding */
.block-content ul, .block-content ol { padding: 0 0 0 15px; }
.block-content li { margin: 0; padding: 0; }

/* Block for the latest news items in the first category */
/* Block for the latest news items in the first feed */
/* First block created with "Add block" link */
/* "Recent blog posts" block */
/* "Book navigation" block for the current book's table of contents */
/* "Recent comments" block */
/* "Active forum topics" block */
/* "New forum topics" block */
/* Language switcher block */
/* Custom menu block */
/* "Recent content" block */
/* "Syndicate" block for primary RSS feed; see also page.css's .feed-icon */
/* "Most recent poll" block */
/* "Author information" block for the profile of the page's author */
/* "Search form" block */
#block-search-form #edit-captcha--2 { display: none; }

/* "Shortcuts" block */
/* "Popular content" block */
/* "Main menu" block */
/* "Management" block for Drupal management menu */
/* "Navigation" block for Drupal navigation menu */
/* "User menu" block for Drupal user menu */
/* "System help" block */
/* "Main page content" block */
/* "Powered by Drupal" block */
/* "User login form" block */
/* "Who's new" block for a list of the newest users */
/* "Who's online" block for a list of the online users */
/* ============================================================================= Node Styling ========================================================================== */
.node { margin-bottom: 20px; }
.node .node-title { margin: 0; }

/* All nodes are given a node-FOO class that describes the type of content that it is. If you create a new content type called "my-custom-type", it will receive a "node-my-custom-type" class. */
/* ============================================================================= Comment Styling - Comments, comment wrapper, comment form ========================================================================== */
/* Wrapper for the list of comments and its titles */
#comments { margin: 1.5em 0; }
#comments h2.comment-title { margin: 0; }
#comments h2.comment-form { margin: 0; }

/* Wrapper for a single comment */
.comment { margin-bottom: 20px; }

/* Comment title */
.comment-title { margin: 0; }

/* Comment states */
/* Preview of the comment before submitting new or updated comment */
/* "New" marker for comments that are new for the current user */
.new { color: #c00; }

/* Nested comments are indented */
.indented { margin-left: 40px; }

/* ============================================================================= Forms ========================================================================== */
/* Wrapper for a form element (or group of form elements) and its label */
.form-item input.error, .form-item textarea.error, .form-item select.error { border: 1px solid #c00; }
.form-item label { font-weight: 500; }
.form-item .description { font-size: 0.85em; }

/* Highlight marks and form required mark */
.marker, .form-required { color: #c00; }

/* The submit button */
.container-inline div, .container-inline label { display: inline; }

/* Define consistent borders */
fieldset { border: 1px solid #ccc; }

/* Tips for Drupal's input formats */
/* Buttons used by contrib modules like Media */
/* Password confirmation */
.password-parent, .confirm-parent { margin: 0; }

/* ============================================================================= Tables ========================================================================== */
table { margin: 10px 0; padding: 0; width: 100%; }
table.sticky-header { z-index: 10; }

table, thead, tbody, tr, th, td { border-color: #ccc; }

table, td, th { vertical-align: middle; }

caption, th, td { text-align: left; }

thead tr { font-weight: 500; background-color: #e5e5e5; }

td, th { border-bottom: 0; margin: 0; padding: 5px 7px; }

tbody tr { border-top: 1px solid #ccc; }

tr { /* Table row striping */ }
tr.odd { background: #fff; }
tr.info, tr.even, tr:nth-child(2n+2) { border-bottom: 0; background-color: #f5f5f5; }
tr.odd td.active { background-color: #eee; }
tr.even td.active { background-color: #ebebeb; }

/* Forum tables Core sets white-space to nowrap, which makes no sense */
#forum td.created, #forum td.posts, #forum td.topics, #forum td.last-reply, #forum td.replies, #forum td.pager { white-space: normal; }

/* ============================================================================= Messages ========================================================================== */
div.messages { margin-bottom: 10px; margin-top: 10px; }
div.messages ul { margin-top: 0; margin-bottom: 0; }

/* Unpublished nodes */
.node-unpublished p.unpublished, .comment-unpublished p.unpublished { color: pink; color: rgba(239, 170, 170, 0.4); font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; font-size: 50px; font-weight: 700; line-height: 1.2; height: 0; margin: 0; padding: 0; overflow: visible; text-align: center; text-transform: uppercase; word-wrap: break-word; }

/* ============================================================================= Maintenance pages ========================================================================== */
.maintenance-page .container { padding: 40px 0; }
.maintenance-page #site-name, .maintenance-page #page-title { margin: 0; }

.db-offline .container { margin: 0 auto; padding: 40px 0; width: 100%; max-width: 960px; }
.db-offline div.messages { margin: 20px 0 0; }
.db-offline #content { padding: 20px 0; }

/* ============================================================================= Misc overrides for contrib modules ========================================================================== */
/* Admin menu overrides */
#admin-menu { margin: 0; padding: 0; }

/* Devel Module */
.dev-query { background: #eee; padding: 30px; }

/* Styleguide module tweaks */
#styleguide-header { padding: 0 10px; }
#styleguide-header .item-list { font-family: inherit; margin: 0 20px 20px 0; min-height: 260px; width: auto; }

/*

akzidenzgroteskbqsuper
akzidenzgroteskbqbolditalic
akzidenzgroteskbqbold
akzidenzgroteskbqmediumitalic
akzidenzgroteskbqitalic
akzidenzgroteskbqmedium
akzidenzgroteskbqregular
akzidenzgroteskbqlight
akzidenzgroteskexpbqlightosf
akzidenzgroteskbqitalic

*/
/* Header wrapper  */
#header-wrapper { position: relative; /* directly positioned parent */ /* New menu style test (basic menu) 18-JUN-2018 */ }
#header-wrapper > .container { border-bottom: 1px solid #e7ecef; padding-bottom: 9px; }
#header-wrapper .block { margin: 0; }
#header-wrapper .uk-mega { position: absolute; bottom: 0; margin-bottom: -3px; width: 100%; /* first div */ }
#header-wrapper .uk-mega .block-inner { margin: 0 !important; }
#header-wrapper .uk-mega a { color: #000; font-weight: 400; }
#header-wrapper .uk-mega a:visited { color: black; text-decoration: none; }
#header-wrapper .uk-mega a:hover { color: #e21e26; text-decoration: none; }
#header-wrapper .uk-mega a:active { color: #e21e26; text-decoration: none; }
#header-wrapper .uk-mega a:after { display: block; content: ''; border-bottom: solid 3px #e21e26; transform: scaleX(0); transition: transform 250ms ease-in-out; }
#header-wrapper .uk-mega a:hover:after { transform: scaleX(1); }
#header-wrapper #branding { height: 60px; position: absolute; bottom: 0; }
#header-wrapper #branding #logo { /* affix to the bottom of parent */ position: absolute; bottom: 0.5rem; left: 3px; margin-right: 1em; width: 172px; }
#header-wrapper #branding #logo .site-logo { position: absolute; bottom: 4px; }
#header-wrapper .region-header { position: relative; margin-left: 192px; height: 60px; }
#header-wrapper .login-header-button { width: 200px; float: right; text-align: right; font-size: 0.8rem; font-weight: bold; position: absolute; bottom: 35px; right: 2px; }
#header-wrapper .login-header-button .block-inner { margin: 0; padding: 0; }
#header-wrapper .login-header-button .content { text-align: right; }
#header-wrapper .login-header-button .content p { padding: 0; margin: 0; }
#header-wrapper .login-header-button .content p a { text-transform: uppercase; color: #000; font-weight: 400; font-size: 0.8rem; box-sizing: border-box; }
#header-wrapper .login-header-button .content p a:after { content: ""; display: block; float: right; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -200px no-repeat; margin: 10px 0 0 6px; }

#stickyBar #stickyLogo { margin-top: 3px; width: 172px; }

/*
Blocks for header */
.block-block.country-selector { /*background-color: #eee;*/ padding: 0 0.5em; position: absolute; left: 0; bottom: 0; z-index: 20; }
.block-block.country-selector p { margin: 0; padding: 0; }
.block-block.country-selector .block-inner { padding: 0; margin: 0; }
.block-block.country-selector a.current-country:after { content: " "; border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 2px; margin: 0 0 3px 6px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.block-block.country-selector .dropdown { position: absolute; left: 0; background-color: #eee; padding: 1rem 0.5rem; min-width: 460px; z-index: 101; }
.block-block.country-selector .dropdown h2, .block-block.country-selector .dropdown h3, .block-block.country-selector .dropdown h4, .block-block.country-selector .dropdown h5, .block-block.country-selector .dropdown h6 { font-size: 1.1rem; padding: 0; margin: 0 0 0.5em 6px; }
.block-block.country-selector .hidden { display: none; }

/* ============================================================================= */
/*  1. BLOCKS                                                                    */
/* ============================================================================= */
/* same is true for this one */
#block-claranet-2015-blocks-copyright-info { text-align: center; font-size: 0.9em; }
#block-claranet-2015-blocks-copyright-info p { margin: 0; }

/* Menu blocks */
.block-menu .last { float: none; }

/* */
#block-claranet-2015-blocks-homepage-video { margin: 1px 0 0 0; }
#block-claranet-2015-blocks-homepage-video .block-inner { margin: 0; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video { margin-bottom: 2rem; overflow: hidden; position: relative; background-color: transparent; height: 350px; /* see next line */ padding-top: 0; /* this is a test it seems to work fine probably doesnt though */ }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video h1 { position: absolute; top: 50%; left: 50%; width: 660px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 10; margin: auto auto; color: #fff; text-align: center; font-size: 4.2em; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video h2 { position: absolute; top: 52%; left: 0; z-index: 10; width: 100%; margin: auto 0; color: #fff; text-align: center; font-size: 4.2em; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .cycle-slideshow, #block-claranet-2015-blocks-homepage-video .block-inner .homepage-video video { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); z-index: -10; min-width: 100%; width: auto; height: auto; background-size: cover; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .slide { position: relative; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .slide li { height: 100%; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .slide li img { width: 100%; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .slide ul.slides { padding: 0; }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .cycle-slideshow { z-index: -5;     /*.poster { padding-top: 40.7%; background: url(/sites/all/assets/uk/poster.jpg) no-repeat; background-size: contain;
}*/ }
#block-claranet-2015-blocks-homepage-video .block-inner .homepage-video .cycle-slideshow img { width: 100%; }

#block-claranet-2015-blocks-accreditations p { margin-bottom: 0; }

#block-claranet-2015-blocks-copyright-info a { font-weight: bold; }
#block-claranet-2015-blocks-copyright-info a:hover { text-decoration: underline; }

#block-claranet-2015-blocks-main-menu .last { float: none; }

#block-block-13 p { font-size: 1em; }
#block-block-13 a { line-height: 3em; margin: 0; }

/*body.sidebar-first {
#block-block-15 {
display:none;

}
}*/
#footer-wrapper #block-claranet-2015-blocks-copyright-info { font-size: 0.8em; }
#footer-wrapper #block-claranet-2015-blocks-copyright-info p, #footer-wrapper #block-claranet-2015-blocks-copyright-info a { color: #7F92A1; }
#footer-wrapper p, #footer-wrapper a, #footer-wrapper h2, #footer-wrapper h3, #footer-wrapper h4 { color: #fff; }
#footer-wrapper ul, #footer-wrapper p, #footer-wrapper a { font-size: 1rem; }
#footer-wrapper ul ul { margin: 0; }

.social-media-block .share-button span { cursor: pointer; }

/* artificially increase specifity on this style block by adding two ids the same */
#nav-wrapper #menu-bar#menu-bar { /* block inside menu */ }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu ul { padding: 0; margin: 0; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu ul li { padding: 0; margin: 0 0 0 1em; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu ul li a { padding: 0; line-height: 1.3em; font-size: 90%; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu a.button { line-height: 2em; color: #eee; font-weight: 500; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu a.button:before { display: none; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu h4, #nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu h5 { font-size: 1em; margin: 0; padding: 0; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu h4 { font-size: 1.2em; margin-bottom: 0.7em; }
#nav-wrapper #menu-bar#menu-bar .main-menu-sub-menu h5 { margin-bottom: 0.5em; }

/* ============================================================================= */
/*  2. NODES                                                                     */
/* ============================================================================= */
.zebra { padding: 3em 0; }
.zebra.on { background-color: #e7ecef; }
.zebra.off { background-color: #fff; }
.zebra:first-of-type { padding-top: 0; }
.zebra.dark { background-color: #002d37; }
.zebra.dark h2, .zebra.dark p { color: #fff; }

/* case studies */
.case-study-image-banner { margin-bottom: 0; }
.case-study-image-banner .field-name-field-company-logo { max-width: 1140px; margin: 0 auto; }
.case-study-image-banner .field-name-field-company-logo .field-items { padding-top: 25px; }
.case-study-image-banner .banner-image-background { margin-top: 1px; height: 299px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50% 50%; }
.case-study-image-banner .field { margin-bottom: 0; }

/*

More homepage
 */
body.front .what-we-do, .content-pane4 .what-we-do { margin-bottom: 2em; }
body.front .services, .content-pane4 .services { margin: 1em 0; }
body.front .why-us, .content-pane4 .why-us { margin-bottom: 2em; border-bottom: 1px solid #e7ecef; padding: 1em 0; }
body.front .why-ush2:first-child, .content-pane4 .why-ush2:first-child { text-align: center; }
body.front .why-us .grid-row, .content-pane4 .why-us .grid-row { padding-top: 1.5em; }
body.front .why-us .grid-row.last, .content-pane4 .why-us .grid-row.last { float: clear; /* overrides the .last class */ border-bottom: 1px solid #e7ecef; margin-bottom: 4em; padding-bottom: 2em; }
body.front .solution-container, .content-pane4 .solution-container { margin-top: 2em !important; }
body.front .amazing-things, .content-pane4 .amazing-things { padding-top: 1em; color: #253741; overflow: hidden; *zoom: 1; }
body.front .expertise, .content-pane4 .expertise { border-bottom: 1px solid #e7ecef; padding: 1em 0; margin-bottom: 2em; @clearfix; }
body.front .security, .content-pane4 .security { border-bottom: 1px solid #e7ecef; padding: 1em 0; margin-bottom: 2em; }
body.front .case-study p, .content-pane4 .case-study p { margin: 1em auto; }
body.front .case-study .introduction, .content-pane4 .case-study .introduction { width: 49.15254%; float: left; margin-right: 1.69492%; }
body.front .case-study .introduction:first-child, .content-pane4 .case-study .introduction:first-child { margin-top: 0; }
body.front .case-study .introduction p, .content-pane4 .case-study .introduction p { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.2em; }
body.front .case-study .detail, .content-pane4 .case-study .detail { width: 49.15254%; float: right; margin-right: 0; }
body.front .case-study h2, .content-pane4 .case-study h2 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; font-size: 4em; margin: 0 0 0.5em 0; }
body.front .case-study h2 span, .content-pane4 .case-study h2 span { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; color: #e21e26; }

/* Homepage Articles */
body.front .featured-services { /* Overlay for linking */ }
body.front .featured-services .grid-4 { position: relative; padding: 0 0.8em; box-sizing: border-box; overlay: hidden; }
body.front .featured-services .overlay { background-color: transparent; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; }
body.front .featured-services .overlay:hover ~ img { background-color: #e21e26; }
body.front .featured-services .overlay:hover ~ p .button { background-color: #e21e26 !important; }
body.front .featured-services img { width: auto; background-color: #c6d3db; transition: background-color 0.3s ease; display: block; margin: 0 auto; border-radius: 50%; }
body.front .featured-services h2 { font-size: 1.9rem; margin-top: 0; }
body.front .featured-services h2 a { transition: color 0.4s ease; text-decoration: none; }
body.front .featured-services .button { margin: 0; }

/* Service pages, build manage design etc  */
/*awards page */
div.awards div { text-align: center; width: 32.20339%; float: left; margin-bottom: 3em; }
div.awards div:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
div.awards div:nth-child(3n + 2) { margin-left: 33.89831%; margin-right: -100%; clear: none; }
div.awards div:nth-child(3n + 3) { margin-left: 67.79661%; margin-right: -100%; clear: none; }

.view-blog h2 { margin-bottom: 0.2em; }
.view-blog .blog-image { float: left; margin-right: 1em; max-width: 195px; }
.view-blog .blog-image img { width: 100%; height: auto; }
.view-blog .date-and-time { margin-bottom: 1.2em; font-size: 1.2em; color: #415560; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; }
.view-blog .views-row { overflow: hidden; *zoom: 1; margin-bottom: 3em; }

.node-type-blog .field-type-image { float: left; margin: 0 1em 0 0; }
.node-type-blog .field-type-taxonomy-term-reference { overflow: hidden; *zoom: 1; }
.node-type-blog .field-type-taxonomy-term-reference ul { padding: 0; margin: 0; }
.node-type-blog .field-type-taxonomy-term-reference ul li { list-style: none; padding: 0; float: left; margin: 0; display: inline-block; }
.node-type-blog .field-type-taxonomy-term-reference ul li a { margin-right: 1em; }
.node-type-blog .author-datetime { margin-bottom: 0; }

.which-applications { padding: 2em; text-align: center; overflow: hidden; *zoom: 1; }
.which-applications .second-options { display: none; }
.which-applications .see-apps { border-top: 1px solid #e7ecef; }
.which-applications .see-apps .see-all-applications { cursor: pointer; }
.which-applications p { margin: 0; }
.which-applications .button.text { line-height: 1.4em; }
.which-applications .grid-row { margin: 2em auto; }
.which-applications .option-1 img, .which-applications .option-2 img, .which-applications .option-3 img, .which-applications .option-4 img { max-width: 80%; }
.which-applications .button { margin-bottom: 0; }

.grid-row .soho p { font-size: 1em; }

/* ============================================================================= */
/*  3. GRIDS                                                                     */
/* ============================================================================= */
.grid-1 { width: 21.05263%; float: left; margin-right: 5.26316%; }

.grid-2 { width: 47.36842%; float: left; margin-right: 5.26316%; }

.grid-3 { width: 73.68421%; float: left; margin-right: 5.26316%; }

.grid-4 { width: 100%; float: left; margin-left: 0; margin-right: 0; }

.grid-5 { width: 126.31579%; float: left; margin-right: 5.26316%; }

.grid-6 { width: 152.63158%; float: left; margin-right: 5.26316%; }

.grid-7 { width: 178.94737%; float: left; margin-right: 5.26316%; }

.grid-8 { width: 205.26316%; float: left; margin-right: 5.26316%; }

.grid-9 { width: 231.57895%; float: left; margin-right: 5.26316%; }

.grid-10 { width: 257.89474%; float: left; margin-right: 5.26316%; }

.grid-11 { width: 284.21053%; float: left; margin-right: 5.26316%; }

.grid-12 { width: 310.52632%; float: left; margin-right: 5.26316%; }

.last { margin-right: 0; float: right; }

.grid-row { overflow: hidden; *zoom: 1; }

.gallery { margin-bottom: 2em; overflow: hidden; *zoom: 1; }
.gallery.gallery-1 .item { width: 6.77966%; float: left; }
.gallery.gallery-1 .item:nth-child(12n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-1 .item:nth-child(12n + 2) { margin-left: 8.47458%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 3) { margin-left: 16.94915%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 4) { margin-left: 25.42373%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 5) { margin-left: 33.89831%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 6) { margin-left: 42.37288%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 7) { margin-left: 50.84746%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 8) { margin-left: 59.32203%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 9) { margin-left: 67.79661%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 10) { margin-left: 76.27119%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 11) { margin-left: 84.74576%; margin-right: -100%; clear: none; }
.gallery.gallery-1 .item:nth-child(12n + 12) { margin-left: 93.22034%; margin-right: -100%; clear: none; }
.gallery.gallery-2 .item { width: 15.25424%; float: left; }
.gallery.gallery-2 .item:nth-child(6n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-2 .item:nth-child(6n + 2) { margin-left: 16.94915%; margin-right: -100%; clear: none; }
.gallery.gallery-2 .item:nth-child(6n + 3) { margin-left: 33.89831%; margin-right: -100%; clear: none; }
.gallery.gallery-2 .item:nth-child(6n + 4) { margin-left: 50.84746%; margin-right: -100%; clear: none; }
.gallery.gallery-2 .item:nth-child(6n + 5) { margin-left: 67.79661%; margin-right: -100%; clear: none; }
.gallery.gallery-2 .item:nth-child(6n + 6) { margin-left: 84.74576%; margin-right: -100%; clear: none; }
.gallery.gallery-3 .item { width: 23.72881%; float: left; }
.gallery.gallery-3 .item:nth-child(4n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-3 .item:nth-child(4n + 2) { margin-left: 25.42373%; margin-right: -100%; clear: none; }
.gallery.gallery-3 .item:nth-child(4n + 3) { margin-left: 50.84746%; margin-right: -100%; clear: none; }
.gallery.gallery-3 .item:nth-child(4n + 4) { margin-left: 76.27119%; margin-right: -100%; clear: none; }
.gallery.gallery-4 .item { width: 32.20339%; float: left; }
.gallery.gallery-4 .item:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-4 .item:nth-child(3n + 2) { margin-left: 33.89831%; margin-right: -100%; clear: none; }
.gallery.gallery-4 .item:nth-child(3n + 3) { margin-left: 67.79661%; margin-right: -100%; clear: none; }
.gallery.gallery-5 .item { width: 40.67797%; float: left; }
.gallery.gallery-5 .item:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-5 .item:nth-child(2n + 2) { margin-left: 42.37288%; margin-right: -100%; clear: none; }
.gallery.gallery-6 .item { width: 49.15254%; float: left; }
.gallery.gallery-6 .item:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-6 .item:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; }
.gallery.gallery-7 .item { width: 57.62712%; float: left; }
.gallery.gallery-7 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-8 .item { width: 66.10169%; float: left; }
.gallery.gallery-8 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-9 .item { width: 74.57627%; float: left; }
.gallery.gallery-9 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-10 .item { width: 83.05085%; float: left; }
.gallery.gallery-10 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-11 .item { width: 91.52542%; float: left; }
.gallery.gallery-11 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery.gallery-12 .item { width: 100%; float: left; }
.gallery.gallery-12 .item:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: none; }

.gallery-spaced { margin-bottom: 2em; overflow: hidden; *zoom: 1; }
.gallery-spaced.gallery-4 .item { width: 27.86885%; float: left; }
.gallery-spaced.gallery-4 .item:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery-spaced.gallery-4 .item:nth-child(3n + 2) { margin-left: 36.06557%; margin-right: -100%; clear: none; }
.gallery-spaced.gallery-4 .item:nth-child(3n + 3) { margin-left: 72.13115%; margin-right: -100%; clear: none; }
.gallery-spaced.gallery-6 .item { width: 45.90164%; float: left; }
.gallery-spaced.gallery-6 .item:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.gallery-spaced.gallery-6 .item:nth-child(2n + 2) { margin-left: 54.09836%; margin-right: -100%; clear: none; }

blockquote { clear: both; }

/* ============================================================================= */
/*  4. GENERAL                                                                   */
/* ============================================================================= */
.claranet-red { color: #e21e26; }

.center { text-align: center; }

.left { text-align: left; }

.right { text-align: right; }

.hide { display: none; }

.toback { z-index: -20; }

.lightfont { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }

.boldfont { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; }

.text-uppercase { text-transform: uppercase !important; }

.text-white { color: #fff !important; }

/*.limit-960 { max-width: 960px; display: inline-block;
}
.limit-768 { max-width: 768px; display: inline-block;
}/*

/*.display-5 { font-size: 2rem !important;
}
.display-4 { font-size: 2.5rem !important;
}
.display-3 { font-size: 3rem !important;
}
.display-2 { font-size: 3.5rem !important;
}
.display-1 { font-size: 4rem !important;
}*/
.shadow-square { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; }

.shadow-circle { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; border-radius: 50%; }

.amazing-things { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 1.7em; }
.amazing-things span { color: #e21e26; }

/* webform styles */
/*.styled input[type="text"], .styled input[type="email"], .styled textarea { width: 100%; max-width: 100% !important; box-sizing: border-box; padding: 0.65em; border: 1px solid #cdcdcd; -webkit-transition: border 0.30s ease-in-out; -moz-transition: border 0.30s ease-in-out; -ms-transition: border 0.30s ease-in-out; -o-transition: border 0.30s ease-in-out; outline: none; font-size: 0.85rem;
}
.styled input[type="text"]:focus, .styled input[type="email"]:focus, .styled textarea:focus { border: 1px solid #d9002a;
}
.styled input[type="text"], .styled input[type="email"] { height: 2.2rem;
}
.styled.form-item { margin-top: 0em; margin-bottom: 2em !important;
}
.styled-select select { -webkit-appearance: none; -moz-appearance: none; background-color: #fff; padding: 0 0.65em; height: 2.2rem; width: 100%; border-radius: 0; border: 1px solid #cdcdcd; cursor: pointer; font-size: 0.85rem;
}
.styled-select:after { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #e21e26; position: absolute; top: calc(50% - 4px); right: 0.65em; z-index: 998; pointer-events: none;
}
.styled-select select::-ms-expand { display: none;
}
.styled-select select::-ms-value { background: transparent; color: #000000;
}
.webform-client-form input[type="submit"].button { font-size: 1.5rem; margin-top: 0;
}*/
/* bootstrap cards */
/*.card-img-top { width: 100%; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px);
}
.card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem;
}
.card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.5rem;
}
.card-container .row { margin-bottom: 2rem;
}
.card-container .row:last-child { margin-bottom: 0;
}*/
/* EU Cookie compliance popup */
#sliding-popup { color: #111; }
#sliding-popup.sliding-popup-bottom { background: #e7ecef; padding: 1em; }
#sliding-popup .popup-content #popup-text p { font-size: 1.1em; }
#sliding-popup .popup-content #popup-buttons button { background: #415560; color: #eee; text-shadow: none; box-shadow: none; border-radius: 2px; padding: 10px; border: 0; }
#sliding-popup .popup-content #popup-buttons button.agree-button { background: #e21e26; }
#sliding-popup .popup-content #popup-buttons button:hover { background: #253741; }

.stat-block { position: relative; margin-top: 1em; border-top: 1px solid #ddd; padding-top: 3em; }
.stat-block .image { text-align: right; width: 23.72881%; float: right; margin-right: 0; }
.stat-block .introduction { margin-left: 8.47458%; width: 66.10169%; float: left; margin-right: 1.69492%; }
.stat-block .introduction:before { content: ""; display: block; height: 59px; width: 79px; background: transparent url('images/sprites-s566abdd177.png') 0 -256px no-repeat; position: absolute; top: 2.4em; left: 0.5em; }
.stat-block .introduction p { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; font-size: 2.5em; margin-bottom: 0.4em; }
.stat-block .introduction span { font-size: 2.5em; display: block; margin-right: 0.2em; margin-bottom: -0.1em; float: left; line-height: 1em; color: #e21e26; }
.stat-block .introduction .source { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; font-size: 1.6em; margin-bottom: 1em; margin-bottom: 1em; }
.stat-block .introduction .download { font-size: 1.2em; }

/* fix for stat-block with sidebar */
.one-sidebar .stat-block { padding-top: 2em; }
.one-sidebar .stat-block .introduction { margin-left: 12.60504%; width: 62.18487%; float: left; margin-right: 0.84034%; }
.one-sidebar .stat-block .introduction p { font-size: 2.2em; }
.one-sidebar .stat-block .introduction .source { font-size: 1.6em; }
.one-sidebar .stat-block .introduction .download { font-size: 1.2em; }

/* ============================================================================= */
/*  5. VIEWS                                                                     */
/* ============================================================================= */
/* executive team and bloggers */
.view-executive-team .views-row, .view-bloggers .views-row { margin-bottom: 2em; }
.view-executive-team .views-row h2, .view-bloggers .views-row h2 { margin-top: 0; }
.view-executive-team .views-row:after, .view-bloggers .views-row:after { display: table; content: " "; clear: both; }

/* INDUSTRY PAGE VIEW */
/* this will be a view eventually but not yet */
.industry-content-view div { text-align: center; }
.industry-content-view div.blog:before, .industry-content-view div.news:before { content: url("/sites/all/assets/uk/icon-blog.png"); display: block; margin-bottom: 0.5em; }
.industry-content-view div.events:before { content: url("/sites/all/assets/uk/icon-events.png"); display: block; margin-bottom: 0.5em; }
.industry-content-view div.case.Study:before { content: url("/sites/all/assets/uk/icon-brochures.png"); display: block; margin-bottom: 0.5em; }
.industry-content-view div.brochure:before { content: url("/sites/all/assets/uk/icon-brochures.png"); display: block; margin-bottom: 0.5em; }
.industry-content-view div.whitepaper:before { content: url("/sites/all/assets/uk/icon-whitepaper.png"); display: block; margin-bottom: 0.5em; }
.industry-content-view div h2 { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; margin: 0 0 0.5em 0; font-size: 2.4em; }
.industry-content-view div img { margin-bottom: 0.3em; }
.industry-content-view div p { margin: 0; }
.industry-content-view .button.text { padding-right: 0; margin-top: 0.5em; }

/* events landing page */
.view-id-events.view-display-id-page .pretend_h1 { font-size: 3.5em; }
.view-id-events.view-display-id-page .view-content { margin-bottom: 2em; }
.view-id-events.view-display-id-page .attachment-after { border-top: 1px solid #ddd; }
.view-id-events.view-display-id-page .views-row { position: relative; padding-bottom: 2em; }
.view-id-events.view-display-id-page .views-row p.more-link { position: absolute; margin: 0; bottom: 0; right: 0; }
.view-id-events.view-display-id-page .views-row h2 a { color: #253741; }
.view-id-events.view-display-id-page .Exhibition:before { content: url("/sites/all/assets/uk/exhibition.png"); float: left; margin-right: 2em; }
.view-id-events.view-display-id-page .Conference:before { content: url("/sites/all/assets/uk/conference.png"); float: left; margin-right: 2em; }
.view-id-events.view-display-id-page .Seminar:before { content: url("/sites/all/assets/uk/seminar.png"); float: left; margin-right: 2em; }
.view-id-events.view-display-id-page .Webinar:before { content: url("/sites/all/assets/uk/webinar.png"); float: left; margin-right: 2em; }
.view-id-events.view-display-id-page .Roundtable:before { content: url("/sites/all/assets/uk/seminar.png"); float: left; margin-right: 2em; }

/* Reserch and whitepapers */
.view-id-whitepapers.view-display-id-block_1 { margin-top: 2em; }
.view-id-whitepapers.view-display-id-block_1 h3 { font-size: 1.4em; }
.view-id-whitepapers.view-display-id-block_1 .views-row { text-align: center; margin-bottom: 4em; }
.view-id-whitepapers.view-display-id-block_1 .views-row img { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; max-width: 80%; }

/* brochures */
.view-id-brochures.view-display-id-page .view-content { overflow: hidden; *overflow: visible; *zoom: 1; }
.view-id-brochures.view-display-id-page .views-row { text-align: center; margin-bottom: 4em; }
.view-id-brochures.view-display-id-page .views-row h3 { font-size: 1.4em; }
.view-id-brochures.view-display-id-page .views-row img { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; max-width: 80%; }

/* Vacancies list page */
.view-id-vacancies.view-display-id-page .views-row { padding: 1em; }
.view-id-vacancies.view-display-id-page .views-row-odd { background-color: #FAFAFA; }
.view-id-vacancies.view-display-id-page .views-row .arrow a { font-weight: 400; font-size: 1.2em; }
.view-id-vacancies.view-display-id-page .views-row .arrow a:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -200px no-repeat; margin: 8px 8px 0 0; }

/* News list page */
.view-display-id-page_1 .views-row { padding: 1em; }
.view-display-id-page_1 .views-row-odd { background-color: #FAFAFA; }
.view-display-id-page_1 .views-row .arrow a { font-weight: 400; font-size: 1.2em; color: #253741; }
.view-display-id-page_1 .views-row .arrow { margin-left: 0.7em; font-size: 1.5em; }
.view-display-id-page_1 .views-row .arrow a:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -200px no-repeat; margin: 0.25em 0 0 -0.6em; }
.view-display-id-page_1 .views-field-created { margin-left: 1.2em; font-size: 1.2em; }

.view-id-videos.view-display-id-page .views-row { margin-bottom: 2em; }
.view-id-videos.view-display-id-page .views-row .flowplayer { width: 85%; border: 1px solid #eee; }
.view-id-videos.view-display-id-page .views-row h2 { font-size: 1.8em; }

.view-id-service_announcements .pretend_h1 { font-size: 3.5em; }

/* twitter */
.view-tweets .item-list ul { padding: 0; margin: 0; }
.view-tweets .item-list ul li { list-style: none; padding: 0; margin: 0 0 1.5em 0; font-size: 90%; overflow: hidden; *zoom: 1; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }
.view-tweets .item-list ul li .views-field-profile-image-url { width: 23.72881%; float: left; margin-right: 1.69492%; }

.amazing-things-video { margin-bottom: 0; }
.amazing-things-video .block-inner { margin: 0; }

.page-amazing-things .views-row { border-top: 1px solid #ddd; }
.page-amazing-things .views-row .reveal { display: none; }
.page-amazing-things .revealer.active { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); transition-duration: .1s; }

/* ============================================================================= */
/*  6. REGIONS                                                                   */
/* ============================================================================= */
.region-sidebar-first h2, region-sidebar-last h2 { font-size: 2.2em; }
.region-sidebar-first h3, region-sidebar-last h3 { font-size: 2em; }
.region-sidebar-first h4, region-sidebar-last h4 { font-size: 1.8em; }
.region-sidebar-first h5, region-sidebar-last h5 { font-size: 1.5em; }

.sidebar-first #main-content { margin-right: 2em; }
.sidebar-first h2.block-title { margin-bottom: 0.3em; }

.region-footer { padding-top: 2em; }

/* ============================================================================= */
/*  7. NAVIGATION                                                                */
/* ============================================================================= */
/* Footer nav menu */
#block-claranet-2015-blocks-main-menu { margin-bottom: 4em; font-size: 1.2em; }
#block-claranet-2015-blocks-main-menu ul.menu { margin: 0 0 0 0; /* top level headings */ }
#block-claranet-2015-blocks-main-menu ul.menu li { list-style: none; }
#block-claranet-2015-blocks-main-menu ul.menu li a { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; }
#block-claranet-2015-blocks-main-menu ul.menu li a:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -200px no-repeat; margin: 7px 5px 0 0; }
#block-claranet-2015-blocks-main-menu ul.menu li.last { margin-right: 0; }
#block-claranet-2015-blocks-main-menu ul.menu li ul { padding: 0; /* sub headings */ }
#block-claranet-2015-blocks-main-menu ul.menu li ul li.leaf, #block-claranet-2015-blocks-main-menu ul.menu li ul li.expanded, #block-claranet-2015-blocks-main-menu ul.menu li ul li, #block-claranet-2015-blocks-main-menu ul.menu li ul li.collapsed { width: 100%; float: left; margin-left: 0; margin-right: 0; width: 99%; list-style: none; margin-left: 0.7em; /* sub sub headings */ }
#block-claranet-2015-blocks-main-menu ul.menu li ul li.leaf a, #block-claranet-2015-blocks-main-menu ul.menu li ul li.expanded a, #block-claranet-2015-blocks-main-menu ul.menu li ul li a, #block-claranet-2015-blocks-main-menu ul.menu li ul li.collapsed a { font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 300; }
#block-claranet-2015-blocks-main-menu ul.menu li ul li.leaf a:before, #block-claranet-2015-blocks-main-menu ul.menu li ul li.expanded a:before, #block-claranet-2015-blocks-main-menu ul.menu li ul li a:before, #block-claranet-2015-blocks-main-menu ul.menu li ul li.collapsed a:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -209px no-repeat; margin: 7px 5px 0 0; }
#block-claranet-2015-blocks-main-menu ul.menu li ul li.leaf ul li, #block-claranet-2015-blocks-main-menu ul.menu li ul li.expanded ul li, #block-claranet-2015-blocks-main-menu ul.menu li ul li ul li, #block-claranet-2015-blocks-main-menu ul.menu li ul li.collapsed ul li { display: none; }

/* blocks etc */
#block-claranet-2015-blocks-local-menu ul.menu, .sidebar ul.menu { background-color: #e7ecef; padding: 0; margin: 0; }
#block-claranet-2015-blocks-local-menu ul.menu li, .sidebar ul.menu li { padding: 0; margin: 0; list-style: none; }
#block-claranet-2015-blocks-local-menu ul.menu li a, .sidebar ul.menu li a { display: block; padding: 0.3em 0.8em; font-family: akzidenz-grotesk, helvetica,arial, sans-serif; font-weight: 500; line-height: 2em; border-bottom: 1px solid #FFF; font-size: 1.1em; color: #253741; }
#block-claranet-2015-blocks-local-menu ul.menu li a:before, .sidebar ul.menu li a:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -200px no-repeat; margin: 10px 5px 0 0; }
#block-claranet-2015-blocks-local-menu ul.menu li a:hover, #block-claranet-2015-blocks-local-menu ul.menu li a.active, .sidebar ul.menu li a:hover, .sidebar ul.menu li a.active { background-color: #e21e26; color: #fff; text-decoration: none; }
#block-claranet-2015-blocks-local-menu ul.menu li a:hover:before, #block-claranet-2015-blocks-local-menu ul.menu li a.active:before, .sidebar ul.menu li a:hover:before, .sidebar ul.menu li a.active:before { content: ""; display: block; float: left; width: 5px; height: 9px; background: transparent url('images/sprites-s566abdd177.png') 0 -209px no-repeat; margin: 10px 5px 0 0; }

/**  Claranet newsletter added for Germany  */
.view-id-newsletter .image-style-resources-landing-pdf { max-width: 80%; }
.view-id-newsletter .views-field-title { text-align: center; }
.view-id-newsletter .views-field-field-preview-image { text-align: center; }
.view-id-newsletter .views-field-field-preview-image img { -moz-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; -webkit-box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; box-shadow: rgba(136, 136, 136, 0.55) 8px 8px 16px; }

.cycle-pager { margin-top: 1em; }

.cycle-slide { border: 1px solid transparent; }

/** Re-captcha */
.region-pre-footer .webform-callouts .rc-anchor-compact-footer { display: none; }

/**

MENU
 */
#superfish-1 ul.sf-menu li { float: none; }

#superfish-1 { width: 100%; border: 1px solid #444; height: 400px; background-color: #eee; }
#superfish-1 ul { border: 1px solid red; width: 100%; }
#superfish-1 ul.sf-menu li { float: none; width: 300px; }
#superfish-1 ol { border: 1px solid green; }
#superfish-1 .sf-depth-1 { background-color: #eee; width: 300px; }
#superfish-1 .sf-depth-2 { background-color: aliceblue; width: 300px; }

#leaderboard-wrapper { background-color: #eee; }
#leaderboard-wrapper .container { max-width: 1140px; position: relative; min-height: 2.46rem; }
#leaderboard-wrapper.searchtouch #edit-search-block-form--2 { width: 220px !important; }
#leaderboard-wrapper.searchtouch #edit-search-block-form--2:hover { width: 70px; }
#leaderboard-wrapper.searchtouch #block-tb-megamenu-menu-leaderboard { right: 220px; }

.region-leaderboard { padding: 0; margin: 0; }
.region-leaderboard .block { margin-bottom: 0; }
.region-leaderboard #block-tb-megamenu-menu-leaderboard { position: absolute; right: 2.5rem; bottom: 0.4rem; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.region-leaderboard #block-tb-megamenu-menu-leaderboard .hover { -webkit-transform: translate(-15.5rem, 0); -moz-transform: translate(-15.5rem, 0); -o-transform: translate(-15.5rem, 0); -ms-transform: translate(-15.5, 0); transform: translate(-15.5, 0); }
.region-leaderboard #block-search-form { position: absolute; bottom: 0.25rem; right: 0; width: 225px; /* might have to use a different selector here, the IDs might change*/ }
.region-leaderboard #block-search-form .block-inner { margin: 0; }
.region-leaderboard #block-search-form #edit-search-block-form--2 { height: 32px; margin: 0; border: 1px solid #d4dfe6; width: 32px; position: absolute; right: 15px; bottom: 0; z-index: 10; padding: 0 6px; box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.region-leaderboard #block-search-form .form-submit { margin: 0; position: absolute; bottom: 2px; right: 17px; z-index: 20; background: url("../images/search-icon.png") no-repeat center center; width: 28px; height: 28px; border: none; color: transparent; font-size: 0; }
.region-leaderboard .tb-megamenu .nav li.dropdown.open > .dropdown-toggle .caret, .region-leaderboard .tb-megamenu .nav li.dropdown.active > .dropdown-toggle .caret, .region-leaderboard .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle .caret { border-top-color: #e21e26; border-bottom-color: #e21e26; }
.region-leaderboard .tb-megamenu { background-color: transparent; /* For some reason this is black by defautl? */ }
.region-leaderboard .tb-megamenu span.caret { display: none; }
.region-leaderboard .tb-megamenu .btn-navbar { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.region-leaderboard .tb-megamenu .mega-caption { white-space: normal; }
.region-leaderboard .tb-megamenu .dropdown-menu { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; background-color: #eee; }
.region-leaderboard .tb-megamenu .dropdown-menu .active > a { background-image: none; }
.region-leaderboard .tb-megamenu .dropdown-menu li > a { border-top: none; font-weight: 200; text-transform: uppercase; font-size: 1em; color: #111; }
.region-leaderboard .tb-megamenu .level-1 > a { text-transform: uppercase; font-weight: 200 !important; font-size: 0.8rem !important; }
.region-leaderboard .tb-megamenu a { padding: 0 1em 0 0; border: 0; color: #111; font-size: 1rem; font-weight: 200; }
.region-leaderboard .tb-megamenu a:hover { color: #e21e26 !important; }
.region-leaderboard .tb-megamenu .nav li.dropdown.active > .dropdown-toggle { background-color: transparent !important; color: #e21e26; border-color: none; }
.region-leaderboard .tb-megamenu .nav li > a:focus { background-color: transparent; }
.region-leaderboard .tb-megamenu .nav .active a { background-color: transparent; }
.region-leaderboard .tb-megamenu .nav .level-1.dropdown.open { background-color: #f6f6f6; }
.region-leaderboard .tb-megamenu .nav .mega-dropdown-inner { background-color: #f6f6f6; }
.region-leaderboard .tb-megamenu .nav li { /* Why is this red by default.. */ }
.region-leaderboard .tb-megamenu .nav li a { border-right: none; padding: 0; color: #444; margin: 0.25rem 0.4rem; }
.region-leaderboard .tb-megamenu .nav li a:hover { background-color: transparent; color: #e21e26; }
.region-leaderboard .tb-megamenu .nav li.dropdown .caret { border-top-color: inherit; border-top-bottom: inherit; }
.region-leaderboard .tb-megamenu .nav li.dropdown.open > .dropdown-toggle { background-color: #f6f6f6; }
.region-leaderboard .tb-megamenu .nav li.dropdown.open > .dropdown-toggle .caret { border-top-color: inherit; border-top-bottom: inherit; }
.region-leaderboard .tb-megamenu .nav li.dropdown.active { background-color: transparent; }

/*
Media Queries for new bootstrap stuff */
@media (min-width: 0px) { /* This file is here to help us transition this theme to bootstrap and match their breakpoints */
  /* Fonts */
  h1 { font-size: 2.6em; }
  h1.bighead { font-size: 2.4em; margin-bottom: 1.5rem; }
  h2 { font-size: 1.9em; }
  h2.bighead { font-size: 2.4em; margin-bottom: 1.5rem; }
  h3 { font-size: 1.5em; }
  h3.bighead { font-size: 2.4em; margin-bottom: 1.5rem; }
  h4 { font-size: 1.1em; }
  h5 { font-size: 1em; }
  .subhead { font-size: 1.4rem; }
  .block.bighead h2 { font-size: 2.4em; }
  .claranet-font-p, .cf-p { font-size: 1.2rem !important; }
  .claranet-font-7, .cf-7 { font-size: 1.4rem !important; }
  .claranet-font-6, .cf-6 { font-size: 1.8rem !important; }
  .claranet-font-5, .cf-5 { font-size: 2rem !important; }
  .claranet-font-4, .cf-4 { font-size: 2.5rem !important; }
  .claranet-font-3, .cf-3 { font-size: 3rem !important; }
  .claranet-font-2, .cf-2 { font-size: 3.5rem !important; }
  .claranet-font-1, .cf-1 { font-size: 4rem !important; }
  /* Buttons */
  .button { width: 100%; }
  img.scaled-glyph, img.scaled-glyph.small, div.scaled-glyph img { max-width: 140px; width: 100%; }
  img.leader-glyph.scaled-glyph, img.leader-glyph.scaled-glyph.small, div.leader-glyph.scaled-glyph img { max-width: 165px; width: 100%; }
  #leaderboard-wrapper .container, #header-wrapper .container { /* is this supposed to behave like a bs-conntainer? Surely we need these to be centered and standard padded */ width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } }
@media (min-width: 576px) { /* This file is here to help us transition this theme to bootstrap and match their breakpoints */
  /* Fonts */
  h1 { font-size: 3.5em; }
  h1.bighead { font-size: 3em; }
  h2 { font-size: 2.5em; }
  h2.bighead { font-size: 3em; }
  h3 { font-size: 2em; }
  h3.bighead { font-size: 3em; }
  h4 { font-size: 1.7em; }
  h5 { font-size: 1.3em; }
  .subhead { font-size: 1.43rem; line-height: 2rem; }
  .block.bighead h2 { font-size: 3em; }
  .claranet-font-sm-p, .cf-sm-p { font-size: 1.2rem !important; }
  .claranet-font-sm-7, .cf-sm-7 { font-size: 1.4rem !important; }
  .claranet-font-sm-6, .cf-sm-6 { font-size: 1.8rem !important; }
  .claranet-font-sm-5, .cf-sm-5 { font-size: 2rem !important; }
  .claranet-font-sm-4, .cf-sm-4 { font-size: 2.5rem !important; }
  .claranet-font-sm-3, .cf-sm-3 { font-size: 3rem !important; }
  .claranet-font-sm-2, .cf-sm-2 { font-size: 3.5rem !important; }
  .claranet-font-sm-1, .cf-sm-1 { font-size: 4rem !important; }
  /* Buttons */
  .button { width: auto; }
  img.scaled-glyph, img.scaled-glyph.small, div.scaled-glyph img { max-width: 175px; width: 100%; }
  img.leader-glyph.scaled-glyph, img.leader-glyph.scaled-glyph.small, div.leader-glyph.scaled-glyph img { max-width: 200px; width: 100%; }
  /*img.scaled-glyph.small { max-width: 110px; }*/
  #leaderboard-wrapper .container, #header-wrapper .container { max-width: 540px !important; } }
@media (min-width: 768px) { /* This file is here to help us transition this theme to bootstrap and match their breakpoints */
  /* Fonts */
  h1 { font-size: 2.6em; }
  h1.bighead { font-size: 2.4em; }
  h2 { font-size: 1.9em; }
  h2.bighead { font-size: 2.4em; }
  h3 { font-size: 1.5em; }
  h3.bighead { font-size: 2.4em; }
  h4 { font-size: 1.1em; }
  h5 { font-size: 1em; }
  .subhead { font-size: 1.4rem; }
  .block.bighead h2 { font-size: 2.4em; }
  .claranet-font-md-p, .cf-md-p { font-size: 1.2rem !important; }
  .claranet-font-md-7, .cf-md-7 { font-size: 1.4rem !important; }
  .claranet-font-md-6, .cf-md-6 { font-size: 1.8rem !important; }
  .claranet-font-md-5, .cf-md-5 { font-size: 2rem !important; }
  .claranet-font-md-4, .cf-md-4 { font-size: 2.5rem !important; }
  .claranet-font-md-3, .cf-md-3 { font-size: 3rem !important; }
  .claranet-font-md-2, .cf-md-2 { font-size: 3.5rem !important; }
  .claranet-font-1-md, .cf-md-1 { font-size: 4rem !important; }
  #leaderboard-wrapper .container, #header-wrapper .container { max-width: 720px !important; }
  /* top banners */
  .services-banner__wrapper { height: 350px; }
  img.scaled-glyph, div.scaled-glyph img { max-width: 140px; width: 100%; }
  img.leader-glyph.scaled-glyph, img.leader-glyph.scaled-glyph.small, div.leader-glyph.scaled-glyph img { max-width: 165px; width: 100%; }
  img.scaled-glyph.small { max-width: 110px; }
  .services-banner { margin-top: -31px !important; }
  body.front .services-banner { margin-top: 0 !important; }
  .claranet-history .col-md-3:not(:last-child) h2:after { font-family: claranet-glyph; content: '\f105'; position: absolute; right: -1rem; font-size: 3rem; }
  .views-gallery-5 .col-md { min-width: 20%; max-width: 20%; box-sizing: border-box; } }
@media (min-width: 992px) { /* This file is here to help us transition this theme to bootstrap and match their breakpoints */
  /* Fonts */
  h1 { font-size: 3.5em; }
  h1.bighead { font-size: 3em; }
  h2 { font-size: 2.5em; }
  h2.bighead { font-size: 3em; }
  h3 { font-size: 2em; }
  h3.bighead { font-size: 3em; }
  h4 { font-size: 1.7em; }
  h5 { font-size: 1.3em; }
  .subhead { font-size: 1.43rem; line-height: 2.08rem; }
  .block.bighead h2 { font-size: 3em; }
  .claranet-font-lg-p, .cf-lg-p { font-size: 1.2rem !important; }
  .claranet-font-lg-7, .cf-lg-7 { font-size: 1.4rem !important; }
  .claranet-font-lg-6, .cf-lg-6 { font-size: 1.8rem !important; }
  .claranet-font-lg-5, .cf-lg-5 { font-size: 2rem !important; }
  .claranet-font-lg-4, .cf-lg-4 { font-size: 2.5rem !important; }
  .claranet-font-lg-3, .cf-lg-3 { font-size: 3rem !important; }
  .claranet-font-lg-2, .cf-lg-2 { font-size: 3.5rem !important; }
  .claranet-font-lg-1, .cf-lg-1 { font-size: 4rem !important; }
  #leaderboard-wrapper .container, #header-wrapper .container { max-width: 960px !important; }
  /* as in XL this is incorrect..*/
  /* .page-node .node-content { width: 960px; margin: auto; } */
  /* Services Menu */
  .bobs-menu { font-size: 0.8em; }
  .bobs-menu .menu { width: 310px !important; }
  .bobs-menu .menu-depth-2 ul { left: 310px; }
  .bobs-menu .menu-depth-3 ul { left: 310px; }
  .menu-rollover { left: 310px !important; width: 620px; }
  /* top banners */
  .services-banner__wrapper { height: 400px; }
  img.scaled-glyph, div.scaled-glyph img { max-width: 175px; width: 100%; }
  img.leader-glyph.scaled-glyph, div.leader-glyph.scaled-glyph img { max-width: 200px; width: 100%; }
  img.scaled-glyph.small { max-width: 150px; } }
@media (min-width: 1200px) { /* This file is here to help us transition this theme to bootstrap and match their breakpoints */
  #leaderboard-wrapper .container, #header-wrapper .container { max-width: 1140px !important; }
  /* This is wrong TODO: Review me */
  /* .page-node .node-content { width: 1140px; margin: auto; } */
  /* Services Menu */
  .bobs-menu .menu { width: 370px !important; }
  .bobs-menu .menu-depth-2 ul { left: 370px; }
  .bobs-menu .menu-depth-3 ul { left: 370px; }
  .menu-rollover { left: 370px !important; width: 740px; }
  /*img.scaled-glyph, div.scaled-glyph img { max-width: 200px; }  img.scaled-glyph.small { max-width: 150px; }*/
  .claranet-font-xl-p, .cf-xl-p { font-size: 1.2rem !important; }
  .claranet-font-xl-7, .cf-xl-7 { font-size: 1.4rem !important; }
  .claranet-font-xl-6, .cf-xl-6 { font-size: 1.8rem !important; }
  .claranet-font-xl-5, .cf-xl-5 { font-size: 2rem !important; }
  .claranet-font-xl-4, .cf-xl-4 { font-size: 2.5rem !important; }
  .claranet-font-xl-3, .cf-xl-3 { font-size: 3rem !important; }
  .claranet-font-xl-2, .cf-xl-2 { font-size: 3.5rem !important; }
  .claranet-font-xl-1, .cf-xl-1 { font-size: 4rem !important; } }