/*
Distinction Base CSS
*/

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

/* #Custom Fonts
================================================== */

@font-face {
  font-family: DINWebPro;
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro.ttf') format('truetype')
}

@font-face {
  font-family: DINWebPro-Ita;
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Ita.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Ita.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Ita.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Ita.ttf') format('truetype')
}


@font-face {
  font-family: DINWebPro-Bold;
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Bold.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Bold.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Bold.ttf') format('truetype')
}

@font-face {
  font-family: DINWebPro-Medium; 
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Medium.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Medium.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Medium.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-Medium.ttf') format('truetype')
}

@font-face {
  font-family: DINWebPro-MediumIta;
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-MediumIta.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-MediumIta.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-MediumIta.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-MediumIta.ttf') format('truetype')
}


@font-face {
  font-family: DINWebPro-BoldIta;
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-BoldIta.eot');
  src: url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-BoldIta.eot?#iefix') format('embedded-opentype'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-BoldIta.woff') format('woff'),
    url('https://www.stateofflux.co.uk/stateofflux/media/site/fonts/DINWebPro-BoldIta.ttf') format('truetype')
}

.alrightsanslight {
  font-family: "Alright Sans Light Light";
  font-style: normal;
  font-weight: normal;
}

.InfoLabel {
  color:#00A590;
  color:rgb(0,165,144);
  font-weight:bold;
}


/* #Basic Styles
================================================== */
body {
  position: relative;
  background: #fff;
  position: relative;
  font-family: "DINWebPro";
  font-size: 16px;
  line-height: 26px;
  text-rendering: optimizeLegibility;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
}


/* #Typography
================================================== */




h1, h2, h3, h4, h5, h6 {
  color: #00AEEF;
  font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-smoooth:always }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 30px; line-height: 40px; margin-bottom: 15px; text-transform:uppercase;}
.homepage-intro h1,.blog-details h1 {font-family: "Alright Sans Light", Arial, Helvetica, sans-serif; font-size: 40px;text-transform: none; line-height:50px;}
h2 { font-size: 24px; line-height: 30px; margin-bottom: 10px; color: #4d4d4d; }
h3 { font-size: 24px; line-height: 30px; margin-bottom: 10px;font-family: "Alright Sans Light", Arial, Helvetica, sans-serif; }
.main-pods h3 {font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif;}
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px;  }
h5 { font-size: 14px; line-height: 18px; margin-bottom: 10px; color:#4d4d4d; }
h6 { font-size: 14px; line-height: 21px; margin-bottom:5px; }
.subheader { color: #4d4d4d;font-family: "Alright Sans Light", Arial, Helvetica, sans-serif; font-size:23px; line-height:32px; }

p { margin: 0 0 15px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 60%; }

blockquote, blockquote p { font-size: 16px; line-height: 30px; color: #00AEEF;font-family: "Alright Sans Light", Arial, Helvetica, sans-serif; }
blockquote { margin: 20px 0; padding: 20px 20px 1px 19px; background: #f6f6f6; }
blockquote cite { display: block; font-size: 12px; color: #555; text-align:right; text-transform: uppercase; font-style:normal; }
/*blockquote cite:before { content: "\2014 \0020"; }*/
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

.uppercase {text-transform:uppercase;}
.mb-none{ margin-bottom:0;}


/* #Links
================================================== */
a, a:visited { color: #0090D4; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #77CBEA; text-decoration: none; }
p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
ul, ol { margin-bottom: 30px; }
/*ul { list-style: none outside; }*/
ol { list-style: decimal; }
ol { margin-left:40px;}
/*ul.square, ul.circle, ul.disc, .main ul, .EditableTextEdit textarea ul { margin-left: 0; }*/
ul.square, .main ul { list-style: none; }
.main ul li {padding-left: 20px; background: url('https://www.stateofflux.co.uk/stateofflux/media/site/action-arrow-blue.png') 0 2px no-repeat;    background-size: 6px;}
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 5px; }
li { line-height: 24px; margin-bottom: 10px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }

body .EditableTextEdit ul {list-style: disc outside; padding-left: 30px;}

/* #Images
================================================== */

img.scale-with-grid,
section.main img,
section.delve-deeper img {
  max-width: 100%;
  height: auto!important; }

img.scale-with-grid-half {
  max-width: 50%;
  height: auto!important; }

.float-left {
  float: left; 
  margin: 0 30px 10px 0;
}
.float-right { 
  float: right;
  margin: 0 0 10px 30px;
}

img.partner-logo {
  max-width:250px;
}


/* #Buttons
================================================== */
a.button,
span.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background-color: #273C4E;
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/button-arrow.png');
  background-position: 90% 50%;
  background-repeat: no-repeat;  
  border: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  color: #fff !important;
  display: inline-block;
  font-family: DINWebPro, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  /*text-shadow: 0 1px rgba(0, 0, 0, 0.3);*/
  cursor: pointer;
  margin-bottom: 10px;
  line-height: normal;
  padding: 10px 40px 10px 18px;
  text-transform: uppercase;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

a.button:hover,
span.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: #475C6D;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

a.button:active,
span.button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  background-color: #e4e4e4;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

a.button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center; }


/*#Light Buttons#*/

a.button.blue.light {background-color:#77CBEA;background-color:rgb(119,203,234);}
a.button.blue.light:hover { background-color:#0090D4;  background-color:rgb(0,144,212);}
a.button.red.light { background-color:#ED6A5E;  background-color:rgb(237,106,94);}
a.button.red.light:hover {  background-color:#E11F1D;  background-color:rgb(225,31,29);}
a.button.yellow.light {  background-color:#FFDE44;  background-color:rgb(255,222,68);}
a.button.yellow.light:hover {  background-color:#FBB800;  background-color:rgb(251,184,0);}
a.button.green.light {  background-color:#6AC2BF;  background-color:rgb(106,194,191);}
a.button.green.light:hover {  background-color:#00A590;  background-color:rgb(0,165,144);}
a.button.purple.light {  background-color:#9B5DA2;  background-color:rgb(155,93,162);}
a.button.purple.light:hover {  background-color:#77328A;  background-color:rgb(119,50,138);}


/*#Dark Buttons#*/

.pod.brand-blue.light a.button,
a.button.brand-blue.dark { background-color:#273C4E; background-color:rgb(39,60,78);}
.pod.brand-blue.light a.button:hover,
a.button.brand-blue.dark:hover { background-color:#475C6D;  background-color:rgb(71,92,109);}

.pod.blue.light a.button,
a.button.blue.dark {  background-color:#0090D4;  background-color:rgb(0,144,212);}
.pod.blue.light a.button:hover,
a.button.blue.dark:hover {  background-color:#77CBEA;  background-color:rgb(119,203,234);}

.pod.red.light a.button,
a.button.red.dark {  background-color:#E11F1D;  background-color:rgb(225,31,29);}
.pod.red.light a.button:hover,
a.button.red.dark:hover {  background-color:#ED6A5E;  background-color:rgb(237,106,94);}

.pod.yellow.light a.button,
a.button.yellow.dark {  background-color:#FBB800;  background-color:rgb(251,184,0);}
.pod.yellow.light a.button:hover,
a.button.yellow.dark:hover {  background-color:#FFDE44;  background-color:rgb(255,222,68);}

.pod.green.light a.button,
a.button.green.dark {  background-color:#00A590;  background-color:rgb(0,165,144);}
.pod.green.light a.button:hover,
a.button.green.dark:hover {  background-color:#6AC2BF;  background-color:rgb(106,194,191);}

.pod.purple.light a.button,
a.button.purple.dark {  background-color:#77328A;  background-color:rgb(119,50,138);}
.pod.purple.light a.button:hover,
a.button.purple.dark:hover {  background-color:#9B5DA2;  background-color:rgb(155,93,162);}

.pod.green a.button.clean.white { padding:0 40px 0 0; background-color:transparent; color:#fff;}


/* Fix for odd Mozilla border & padding issues */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/* #Forms
================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border: 1px solid #e4e4e4;
  padding: 6px 8px;
  outline: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  color: #666;
  margin: 0;
  width: 140px;
  max-width: 100%;
  display: inline-block;
  margin-bottom: 20px;
  background: #f5f5f5; }
select {
  padding: 0; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #cccccc;
  color: #000;
}
textarea { min-height: 60px; width: 200px;max-width: 90%;}
label,
legend {
  display: inline-block;
  padding-right:10px;
}
select {
  width: 240px;max-width: 90%; }
input[type="checkbox"] {
  display: inline; }
label span,
legend span {
  font-weight: normal;
  font-size: 13px;
  color: #444; }

.EditingFormErrorLabel {margin-top:-20px; margin-bottom:20px; color:red;}
.ErrorLabel {color:red;}
.EditingFormLabelCell { vertical-align:middle; padding-bottom:20px;}

/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }

.container-24 { width: 960px; margin: 0 auto; padding: 0;}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 { display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }

.push-1, .pull-1, .push-2, .pull-2, .push-3, .pull-3, .push-4, .pull-4, .push-5, .pull-5, .push-6, .pull-6, .push-7, .pull-7, .push-8, .pull-8, .push-9, .pull-9, .push-10, .pull-10, .push-11, .pull-11, .push-12, .pull-12, .push-13, .pull-13, .push-14, .pull-14, .push-15, .pull-15, .push-16, .pull-16, .push-17, .pull-17, .push-18, .pull-18, .push-19, .pull-19, .push-20, .pull-20, .push-21, .pull-21, .push-22, .pull-22, .push-23, .pull-23, .push-24, .pull-24 { position: relative; }

.alpha { margin-left: 0; }
.omega { margin-right: 0; }


.grid-1 { width: 20px; }
.grid-2 { width: 60px; }
.grid-3 { width: 100px; }
.grid-4 { width: 140px; }
.grid-5 { width: 180px; }
.grid-6 { width: 220px; }
.grid-7 { width: 260px; }
.grid-8 { width: 300px; }
.grid-9 { width: 340px; }
.grid-10 { width: 380px; }
.grid-11 { width: 420px; }
.grid-12 { width: 460px; }
.grid-13 { width: 500px; }
.grid-14 { width: 540px; }
.grid-15 { width: 580px; }
.grid-16 { width: 620px; }
.grid-17 { width: 660px; }
.grid-18 { width: 700px; }
.grid-19 { width: 740px; }
.grid-20 { width: 780px; }
.grid-21 { width: 820px; }
.grid-22 { width: 860px; }
.grid-23 { width: 900px; }
.grid-24 { width: 940px; }

.push-1 { left: 40px; }
.push-2 { left: 80px; }
.push-3 { left: 120px; }
.push-4 { left: 160px; }
.push-5 { left: 200px; }
.push-6 { left: 240px; }
.push-7 { left: 280px; }
.push-8 { left: 320px; }
.push-9 { left: 360px; }
.push-10 { left: 400px; }
.push-11 { left: 440px; }
.push-12 { left: 480px; }
.push-13 { left: 520px; }
.push-14 { left: 560px; }
.push-15 { left: 600px; }
.push-16 { left: 640px; }
.push-17 { left: 680px; }
.push-18 { left: 720px; }
.push-19 { left: 760px; }
.push-20 { left: 800px; }
.push-21 { left: 840px; }
.push-22 { left: 880px; }
.push-23 { left: 920px; }

.pull-1 { left: -40px; }
.pull-2 { left: -80px; }
.pull-3 { left: -120px; }
.pull-4 { left: -160px; }
.pull-5 { left: -200px; }
.pull-6 { left: -240px; }
.pull-7 { left: -280px; }
.pull-8 { left: -320px; }
.pull-9 { left: -360px; }
.pull-10 { left: -400px; }
.pull-11 { left: -440px; }
.pull-12 { left: -480px; }
.pull-13 { left: -520px; }
.pull-14 { left: -560px; }
.pull-15 { left: -600px; }
.pull-16 { left: -640px; }
.pull-17 { left: -680px; }
.pull-18 { left: -720px; }
.pull-19 { left: -760px; }
.pull-20 { left: -800px; }
.pull-21 { left: -840px; }
.pull-22 { left: -880px; }
.pull-23 { left: -920px; }

@media only screen and (max-width: 959px) and (min-width: 768px)  {
  
  .container-24 {  position: relative; width: 768px; margin: 0 auto; padding: 0;}
  
  .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 { display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }
  
  .push-1, .pull-1, .push-2, .pull-2, .push-3, .pull-3, .push-4, .pull-4, .push-5, .pull-5, .push-6, .pull-6, .push-7, .pull-7, .push-8, .pull-8, .push-9, .pull-9, .push-10, .pull-10, .push-11, .pull-11, .push-12, .pull-12, .push-13, .pull-13, .push-14, .pull-14, .push-15, .pull-15, .push-16, .pull-16, .push-17, .pull-17, .push-18, .pull-18, .push-19, .pull-19, .push-20, .pull-20, .push-21, .pull-21, .push-22, .pull-22, .push-23, .pull-23, .push-24, .pull-24 { position: relative; }
  
  .alpha { margin-left: 0; }
  .omega { margin-right: 0; }
  
  .grid-1 { width: 12px; }
  .grid-2 { width: 44px; }
  .grid-3 { width: 76px; }
  .grid-4 { width: 108px; }
  .grid-5 { width: 140px; }
  .grid-6 { width: 172px; }
  .grid-7 { width: 204px; }
  .grid-8 { width: 236px; }
  .grid-9 { width: 268px; }
  .grid-10 { width: 300px; }
  .grid-11 { width: 332px; }
  .grid-12 { width: 364px; }
  .grid-13 { width: 396px; }
  .grid-14 { width: 428px; }
  .grid-15 { width: 460px; }
  .grid-16 { width: 492px; }
  .grid-17 { width: 524px; }
  .grid-18 { width: 556px; }
  .grid-19 { width: 588px; }
  .grid-20 { width: 620px; }
  .grid-21 { width: 652px; }
  .grid-22 { width: 684px; }
  .grid-23 { width: 716px; }
  .grid-24 { width: 748px; }
  
  .push-1 { left: 32px; }
  .push-2 { left: 64px; }
  .push-3 { left: 96px; }
  .push-4 { left: 128px; }
  .push-5 { left: 160px; }
  .push-6 { left: 192px; }
  .push-7 { left: 224px; }
  .push-8 { left: 256px; }
  .push-9 { left: 288px; }
  .push-10 { left: 320px;}
  .push-11 { left: 352px; }
  .push-12 { left: 384px; }
  .push-13 { left: 416px; }
  .push-14 { left: 448px; }
  .push-15 { left: 480px; }
  .push-16 { left: 512px; }
  .push-17 { left: 544px; }
  .push-18 { left: 576px; }
  .push-19 { left: 608px; }
  .push-20 { left: 640px; }
  .push-21 { left: 672px; }
  .push-22 { left: 704px; }
  .push-23 { left: 736px; }
}

@media only screen and (max-width: 767px) {
  
  .container-24 { width: 300px; }
  
  .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 { margin: 0; width: 300px; }
  
  .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23 { left: 0; }
  
}

@media only screen and (max-width: 767px) and (min-width: 480px)  {
  
  .container-24 { width: 420px; }
  
  .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 { margin: 0; width: 420px; }
  
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }


/*Site Specific Styles*/

/*p { text-align:justify; }*/

blockquote p { text-align: left;}

/*#Colours#*/

/*#Light Colours#*/
.brand-blue.light {
  color:#475C6D;
  color:rgb(71,92,109);
}
.brand-blue.light:hover {
  color:#273C4E;
  color:rgb(39,60,78);
}

.blue.light {
  color:#77CBEA;
  color:rgb(119,203,234);
}
.blue.light:hover {
  color:#0090D4;
  color:rgb(0,144,212);
}

.red.light {
  color:#ED6A5E;
  color:rgb(237,106,94);
}
.red.light:hover {
  color:#E11F1D;
  color:rgb(225,31,29);
}

.yellow.light {
  color:#FFDE44;
  color:rgb(255,222,68);
}
.yellow.light:hover {
  color:#FBB800;
  color:rgb(251,184,0);
}

.green.light {
  color:#6AC2BF;
  color:rgb(106,194,191);
}
.green.light:hover {
  color:#00A590;
  color:rgb(0,165,144);
}

.purple.light {
  color:#9B5DA2;
  color:rgb(155,93,162);
}
.purple.light:hover {
  color:#77328A;
  color:rgb(119,50,138);
}

/*#Dark Colours#*/
.brand-blue.dark {
  color:#273C4E;
  color:rgb(39,60,78);
}
.brand-blue.dark:hover {
  color:#475C6D;
  color:rgb(71,92,109);
}

.blue.dark {
  color:#0090D4;
  color:rgb(0,144,212);
}
.blue.dark:hover {
  color:#77CBEA;
  color:rgb(119,203,234);
}

.red.dark {
  color:#E11F1D;
  color:rgb(225,31,29);
}
.red.dark:hover {
  color:#ED6A5E;
  color:rgb(237,106,94);
}

.yellow.dark {
  color:#FBB800;
  color:rgb(251,184,0);
}
.yellow.dark:hover {
  color:#FFDE44;
  color:rgb(255,222,68);
}

.green.dark {
  color:#00A590;
  color:rgb(0,165,144);
}
.green.dark:hover {
  color:#6AC2BF;
  color:rgb(106,194,191);
}

.purple.dark {
  color:#77328A;
  color:rgb(119,50,138);
}
.purple.dark:hover {
  color:#9B5DA2;
  color:rgb(155,93,162);
}



/*#General Positioning#*/

.spacer {
  clear: both;
  padding: 10px 0;
}

section,
footer {
  position: relative;
  float: left;
  width: 100%;
}

/*#Header Section#*/
header {
  position: relative;
  float: left;
  width: 100%;
  background: #475C6D;
  padding-top:10px;
  height: 120px;
  border-bottom: 1px solid #ccc;
}
.header-wrapper {
  position: relative;
  float: left;
  width: 100%;
  height:68px;
  overflow:hidden;
}
.logo {
  margin: 20px 0;
}
.logo a img {display:inline-block;}

.header-dots {
  position:absolute;
  top:0;
  left:0;
  width:1211px;
  height:68px;
  background:url('https://www.stateofflux.co.uk/stateofflux/media/site/header.png') no-repeat 0 50%;
  background-size: 100%;
}

.top-links{
  position: relative;
  float: left;
  width: 100%;
  font-size: 12px;
  color:#4d4d4d;
  text-transform: uppercase;
  background: #273C4E;
}

.top-links ul {
  display: block;
  float: right;
  position: relative;
  margin-bottom: 0;
}
.top-links ul li {
  position: relative;
  display: block;
  float: left;
  color:#4d4d4d;
  margin-bottom: 0;
  line-height: 30px;
  border-left:1px solid #475C6D;
}

.top-links ul li.top-links-last {
  border-right:1px solid #475C6D; 
}
.top-links ul li.search-holder {
  padding:0;
  line-height:0;
}
.top-links ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  color: #cccccc /*#666*/;
  padding:2px 10px;
}
.top-links ul li a i {
  vertical-align:middle;
  /*color:#475C6D;*/
  color:#cccccc;
}
.top-links ul li a:hover i {
  color:#fff;
}
.top-links ul li a:hover {
  color: #fff;
  background:#77CBEA;
}
.top-search {
  position: relative;
  float: right;
  clear: both;
}

.top-search-button {
  position: absolute;
  top: 8px;
  right: 5px;
}

.top-search input[type="text"] {
  padding: 8px 12px;
  width: 190px;
  margin-bottom: 0;
  background:#475C6D;
  border:1px solid #273C4E;
  color:#BFC0C1;
}

.top-links ul li.top-link-contact a {
  background:#00AEEF;
  padding: 0 15px;
  color: #fff;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  line-height: 31px;
  text-decoration: none;
}

.top-links ul li.top-link-contact a:hover {
  background: rgba(0,0,0,0.5);
}


/*#Navigation#*/

nav {
  position: absolute;
  bottom: 0;
  width: 100%;
}

nav ul {
  display: block;
  float: left;
  margin-bottom: 0;
}
nav ul.nav-mobile {
  width: 100%;
}
nav ul li {
  display: block;
  position: relative;
  float: left;
  margin-bottom: 0;
  margin-right:2px;
}
nav ul.nav-mobile li {
  width: 100%;
  text-align: center;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 8px 15px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
}
nav ul#nav li:hover>a,
nav ul#nav li.HighLighted:hover>a{
  background: #77CBEA;
  color:#fff;
}
nav ul#nav li.HighLighted {
  color:#fff;
  background: #5A6C7C;
}
nav ul#nav li:hover>a:hover {
  color:#fff;
  background: #77CBEA;
}

nav ul#nav li ul li:hover>a:hover {
  color:#475C6D;
  background: #D2D3D3;
}

nav ul#nav li.HighLighted a {
  color: #fff;
}
nav ul#nav li.home a { padding: 8px 10px;}
nav ul#nav li.home a span {
  display: block;
  text-indent: -9999px;
  background: url(https://www.stateofflux.co.uk/stateofflux/media/site/img/home-icon.png) no-repeat;
  background-position:  -20px 0;
  background-size: 40px 20px;
  width: 20px;
  height: 20px;
}
nav ul#nav li.home a:hover span {
  background-position:  -20px 0;
}

nav ul#nav li ul {
  display: none; 
  position: absolute; 
  top: 36px; 
  left: 0; 
  min-width: 200px;
  margin-top: 0;
  padding: 0;
  background: #E9EAE8;
  z-index: 500;
  margin-left: 0;
}

nav ul#nav li ul>span {
  position: relative;
  height:50px;
  padding:3%;
  width: 94%;
}

nav ul#nav li ul li { 
  float: none; 
  cursor: pointer; 
  padding: 0; 
  display: block; 
  width: 100%; 
  margin-bottom: 0; 
}

nav ul#nav li ul li a, 
nav ul#nav li.HighLighted ul li a,
nav ul#nav li ul li a:visited {
  display: block;
  padding: 8px 20px;
  color:#475C6D;
}
nav ul#nav li:hover > ul {
  display: block;
  position: absolute;
  z-index: 6000;
}

/*nav ul#nav li ul li:hover a, 
nav ul#nav li.HighLighted ul li.HighLighted a { 
color: #e1e8ee; 
background: red;
}*/

nav ul#nav li.HighLighted ul li.HighLighted {
  background: #77CBEA;
}
nav ul#nav li.HighLighted ul li.HighLighted a {
  color:#fff;
}
nav ul#nav li.HighLighted ul li.HighLighted a:hover {
  color:#4d4d4d;
}
nav ul#nav li ul li ul { left: 201px; top: -10px;}


.nav-mobile {
  display: none;
}
@media all and (min-width:960px) {
  #nav {
    display:flex!important;
    align-items: center;
  }
  nav ul li {
    max-width:182px;
    text-align:center;
  }
  nav ul li a {
    line-height: 15px;
    min-height: 29px;
    display: flex;
    align-items: center;
  }
  nav ul li ul li {
    text-align:left;
    max-width:100%;
  }
  nav ul li ul li a {
    line-height: 18px;
    min-height:auto;
  }
  nav ul#nav li ul {
      top: 45px;
  }
}

/*#Side Nav#*/
.side-nav { position:relative; float: left; margin-bottom:20px; width:100%;}
aside.side-nav h3 {font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif;font-size:20px;}
aside.side-nav h3 a {
  display:block;
  text-decoration: none;
  border-bottom: 1px solid #e4e4e4;
  padding: 10px 20px;
  text-transform:uppercase;
}

#side-nav,
ul.side-nav {
  position: relative;
  float: left;
  width: 100%;
  list-style:none;
  margin-left:0;
}
#side-nav li,
ul.side-nav li {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 0;
  background: none;
  padding:0;
}
#side-nav li a,
ul.side-nav li a {
  display: block;
  border-bottom: 1px solid #e4e4e4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 20px;
  text-transform:uppercase;
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/action-arrow-grey.png');
  background-repeat:no-repeat;
  background-position: 96% 50%;
  color:#4d4d4d;
}
#side-nav li a:hover,
ul.side-nav li a:hover {
  background-color: #E9EAE8;
  color:#4d4d4d;
}

#side-nav li.HighLighted a,
ul.side-nav li.HighLighted a {
  background : #fff;
  background-image: none;
  color:#0090D4;
}

#side-nav li.HighLighted a:hover,
ul.side-nav li.HighLighted a:hover {
  background : #E9EAE8;
  background-image: none;
}
#side-nav li ul,
ul.side-nav li ul{
  margin:0;
}

#side-nav li ul li a,
ul.side-nav li ul li a {
  padding: 10px 30px;
}

.side-bar h2.uppercase,
.side-bar h3.uppercase {text-transform: uppercase;}

/*#Main Section#*/

section.main-pods {
  position:relative;
  float:left;
  padding: 30px 0 0 0;
  background:#E9EAE8;
}
section.main-pods.main-pods--light {
  background:#f5f5f5;
}

section.main-pods .button {
  margin-bottom:0;
}

section.main {
  padding:  30px 0;
}

/*Home Page*/

.pod-red,.pod-yellow,.pod-blue {
  text-align:center;
  padding-left:10px;
  padding-right:10px;
}
.pod-red h3,.pod-yellow h3,.pod-blue h3 {
  text-transform:uppercase;
  color:#475C6D;
}
.pod-red {
  border-bottom:10px solid #ED6A5E;  
}
.pod-yellow {
  border-bottom:10px solid #FFDE44;
}
.pod-blue {
  border-bottom:10px solid #77CBEA;
}

/*#Hero Section#*/
section.hero {
  padding-top:  30px;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e4;
}
.royalSlider {
  min-height: 300px;
}

.txtHolder {
  position: relative;
  float: left;
  width: 40%;
  margin-right: 5%;
  padding: 10px 0;
}
.vidHolder {
  position: relative;
  float: left;
  width: 55%;
  padding: 10px 0;
}

.vidHolder iframe {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.txtHolder h4 {
  font-size: 35px;
  line-height: 40px;
  margin: 0;
  padding-bottom: 3px;
  text-transform:uppercase;
}
.txtHolder p {
  color: #4d4d4d;
}
.rsDefault .rsArrowIcn { height:40px!important; width:14px!important; background: url(https://www.stateofflux.co.uk/stateofflux/media/site/hero-arrow.png)!important;margin-top: -20px!important;margin-left: -7px!important;}
.rsDefault.rsHor .rsArrowRight .rsArrowIcn {background-color: transparent!important; background-position: -14px 0!important;}
.rsDefault.rsHor .rsArrowLeft .rsArrowIcn {background-color: transparent!important; background-position: 0 0!important;}
.rsDefault .rsArrowIcn:hover {background-color: transparent!important;}

/*#Quick Links#*/

.quick-links {
  position: relative;
  float: left;
  width: 100%;
  margin: 20px 0;
}

.link-item {
  position: relative;
  float: left;
  display: block;
  padding: 20px;
  margin-bottom: 10px;
  border-top: 10px solid #e4e4e4;
}

.link-icon {
  position: relative;
  float: left;
  width: 50px;
  text-align:center;
}
.link-icon i {
  color: #BFC0C1;}
.link-text {
  padding-right: 30px;
  margin-left: 70px;
}
.link-text h3 {
  color:#00AEEF;
  font-size:25px;
}

/*#Quick Links List#*/

ul.quick-link-list {
  position: relative;
  float: left;
  width: 100%;
  list-style:none;
  margin-left:0;
  border-top:1px solid #e4e4e4;
}
ul.quick-link-list li {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 0;
  background:none;
  padding:0;
}
ul.quick-link-list li a {
  display: block;
  border-bottom: 1px solid #e4e4e4;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  padding: 10px 40px 10px 10px;
  text-transform:uppercase;
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/list-arrow-grey.png');
  background-repeat:no-repeat;
  background-position: 96% 50%;
  color:#4d4d4d;
}
ul.quick-link-list li a:hover {
  background-color: #E9EAE8;
  color:#4d4d4d;
}

/*#Section Links#*/
.section-links {
  position: relative;
  float: left;
  display: block;
  border-left: 10px solid #ebeced;
  background: #f5f5f5;
  color: #4d4d4d;
  width: 95%;
  padding: 10px 2%;
  margin: 10px 0 20px 0;
}

.section-links h3,
.section-links li a { color: #4d4d4d; }
.section-content { position:relative; float: left;}
.section-content .align-right { text-align:right; border-top: 10px solid #E9EAE8; margin-bottom: 20px;}
.section-content .align-right a { display: inline-block; text-transform: uppercase; padding: 0px 10px 5px 10px; background: #E9EAE8; text-decoration: none; color:#4d4d4d;}

/*#Delve Deeper#*/
section.delve-deeper {
  position:relative;
  float:left;
  width: 100%;
  padding:40px 0;
  background: #F4F4F4;
}

section.delve-deeper h4 {
  margin-bottom: 30px;
  font-size: 25px;
}

/*#CTA Pods#*/

.pod {
  position: relative;
  float: left;
  padding: 20px 20px 0 20px;
  margin-top:40px;
}
.pod h3,
.pod h4,
.pod h5,
.pod h6,
.pod p {
  color: #fff;
}

.side-bar .pod {
  text-align: center;
}
.pod-clean {
  position: relative;
  float: left;
  padding: 20px 0 0 0;
  margin-top:40px;
  border-top: 10px solid #E9EAE8;
}

.pod-twitter {
  position: relative;
  float: left;
  padding: 0;
  margin-top:40px;
  width:100%;
}

.pod.green.light {
  background:#6AC2BF;
  background:rgb(106,194,191);
  border-bottom: 10px solid #00A590;
  border-bottom: 10px solid rgb(0,165,144);
}
.homepage-events .pod.green.light {
  border-top: 10px solid #00A590;
  border-top: 10px solid rgb(0,165,144);
  border-bottom: none;
}

.pod.red.light {
  background:#ED6A5E;
  background:rgb(237,106,94);
  border-bottom: 10px solid #E11F1D;
  border-bottom: 10px solid rgb(225,31,29);
}

.pod.yellow.light {
  background:#FFDE44;
  background:rgb(255,222,68);
  border-bottom: 10px solid #FBB800;
  border-bottom: 10px solid rgb(251,184,0);
}


.pod.purple.light {
  background:#9B5DA2;
  background:rgb(155,93,162);
  border-bottom: 10px solid #77328A;
  border-bottom: 10px solid rgb(119,50,138);
}

.pod.blue.light {
  background:#77CBEA;
  background:rgb(119,203,234);
  border-bottom: 10px solid #0090D4;
  border-bottom: 10px solid rgb(0,144,212);
}
.pod.brand-blue.light {
  background:#475C6D;
  background:rgb(71,92,109);
  border-bottom: 10px solid #273C4E;
  border-bottom: 10px solid rgb(39,60,78);
}

.pod-image a { margin-bottom:0; background-color: rgb(0,0,0);}

.pod-image {
  position: relative;
  margin-top:50px;
  float: left;
  width:100%;
  background:#E9EAE8;
  border-top: 10px solid #BFC0C1;
  padding-top:25px;
  min-height:110px;
}

.pod-image h2,
.pod-image h3,
.pod-image h4,
.pod-image h5,
.pod-image h6,
.pod-image p { padding-right:75px; padding-left:10px;}

.side-pod-image {
  position:absolute;
  bottom: 0;
  right: 0;
  width:65px;
  overflow:hidden;
}

.side-pod-image img {
  display: block;
}


/*.pod h3 {text-transform:uppercase;}*/


/*#Footer Section#*/
footer {
  padding: 40px 0;
  background: #273C4E;
}

footer p,
footer h3 {
  color: #7D8A95;
}

footer h3 {
  font-size:18px;
}

#footer-nav {
  position: relative;
  float: left;
  width: 100%;
  list-style:none;
  margin-left:0;
  border-top:1px solid #7D8A95;
  margin-top: 35px;
}
#footer-nav li {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 0;
  background: none;
  padding:0;
}
#footer-nav li a {
  display: block;
  border-bottom: 1px solid #7D8A95;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 20px;
  text-transform:uppercase;
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/action-arrow-grey.png');
  background-repeat:no-repeat;
  background-position: 96% 50%;
  color:#7D8A95;
}
#footer-nav li a:hover {
  background-color: #E9EAE8;
  color:#4d4d4d;
}


/*#Image Styling#*/

.float-wide-left {
  position:relative;
  float: left;
  margin-left: -250px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.circle-image {
  margin-top: 20px;
  width: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}


/*#Case Studies#*/
.casestudies-holder {
  position: relative;
}
.casestudy-pod {
  position: relative;
  padding-bottom:20px;
}
.casestudy-pod .pod-sector {
  position: absolute;
  top:0;
  right:0;
  background: #4d4d4d;
  color: #fff;
  padding:2px 6px;
  font-size: 11px;
  text-transform: uppercase;
}

.casestudy-pod h3 a {
  color: #00aeef;
  text-decoration: none;
}
.casestudy-pod:hover img {
  -webkit-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.4);
  box-shadow: 0px 0px 2px rgba(50, 50, 50, 0.4);
}
.pod-fixed {
  position: relative;float:right;width: 180px;
}

.casestudy-intro {
  position: relative;
  float:left;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 30px;
  font-family: "Alright Sans Light", Arial, Helvetica, sans-serif;
}


/*#Leadership and Partner Profiles#*/
.leadership-profile,
.partner-profile {
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

/*#Events#*/

.event-summary-holder {
  padding-top:20px;
  border-top: 1px solid #00A590;
}

.event-details,
.event-preview {
  position:relative;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.event-preview {
  margin-top:10px;
}
.event-details p.header {
  margin-bottom: 0;
}
.EventManagerRegTitle {
  color: #00AEEF;
  font-family: "Open Sans", "Times New Roman", Times, serif;
  font-size: 20px; font-weight: bold; line-height: 25px; margin-bottom: 10px; color: #c0af80; text-transform: uppercase;
  display: block;
}
.EventManagerRegInfo { display: block; margin-bottom: 20px; }
.EventManagerRegError { color: red;}

a.EventManagerOutlookLink { padding: 5px; background: #ccc; color: #fff; }

/*#News#*/
.news-details,
.news-preview {
  position:relative;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.news-preview {
  margin-top:10px;
}

/*#Blog#*/
.blog-summary-holder {
  position:relative;
  float: left;
  padding-left: 90px;
  padding-top:40px;
  border-top:1px solid #f5f5f5;
}

.blog-summary-date {
  position:absolute;
  top:0;
  left:0;
  width: 50px;
  padding:15px 5px;
  background:#e4e4e4;
  text-align:center;
  line-height:16px;
  text-transform: uppercase;
  font-size:14px;
}

.blog-heading { position:relative; float:left; width:100%; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; margin-bottom:20px;}
.blog-heading p {margin-bottom: 0; line-height:40px; color:#e4e4e4;}

/*#Breadcrumbs#*/
.breadcrumbs p { text-transform: uppercase; color: #c2c2c2; }
.breadcrumbs p a { color:#d3d3d3;}

/*#Contact#*/
.googleMap { position:relative; float:left; border: 1px solid #fff; width: 100%; margin-bottom: 20px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }

/*# Cookies#*/
.cookies-holder { position: fixed; width: 100%; bottom:-100px; background: #000; background: rgba(0,0,0,0.9); color: #fff; padding: 10px 0 5px 0; z-index: 101;}
.cookies, .ConsentText { }
.ConsentText,.ConsentButtons { display: block; margin-top:5px; }
.cookies .ConsentText, .cookies .ConsentButtons { display: inline-block; }


/*#Video Styling#*/
.fluid-width-video-wrapper {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  
}


/*#Blog Tags#*/
.blog-tags i {color:#bbb;}
.TagCloud {
  position: relative;
  float: left;
  width: 100%;
  list-style:none;
  margin-left:0;
}
.TagCloud span {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 0;
  background: none;
  padding:0;
}
.TagCloud span a {
  display: block;
  border-bottom: 1px solid #e4e4e4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 20px;
  text-transform:uppercase;
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/action-arrow-grey.png');
  background-repeat:no-repeat;
  background-position: 96% 50%;
  color:#4d4d4d;
}
.TagCloud span a:hover {
  background-color: #E9EAE8;
  color:#4d4d4d;
}

iframe#rufous-sandbox { display: none !important; height: 0px; position: absolute; left: -5000px; }

.santa-holder {
  position:relative;
  margin-left:-20px;
  margin-right: -20px;
  width:980px;
  height:450px;
  z-index:100;
}

.table-holder {font-size:13px;line-height:18px;overflow:auto;margin:30px 0;}
.styled-table th,.styled-table td {padding:10px;border:1px solid #ccc;min-width:81px;}
.styled-table th {background:#e4e4e4;text-align:left;}

.footer-social {text-align:right;margin-bottom:0;}
.footer-social li {display:inline-block;}
.footer-social li a {color:#fff; padding:15px;margin-left:10px;background:#475C6D;-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.footer-social li a:hover { background:#101921;}


input[type="text"].newsletter-input,
input[type="email"].newsletter-input {width:100%;box-sizing:border-box;}

/* #Media Queries
================================================== */


/* Smaller than standard 960 (devices and browsers) */
/*@media only screen and (max-width: 959px) {

}*/

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) and (min-width: 768px)  {
  
  nav ul#nav li.home a {padding: 6px 8px;}
  nav ul li a:link,
  nav ul li a:visited {
    padding: 6px 6px;
    font-size: 11px;
  }
  nav ul#nav li ul {
    top: 32px; 
  }
  
}

/*@media only screen and (min-width: 767px) {
nav ul#nav {
display: block !important;
}
}*/

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  
  header {
    height: auto;
  }
  
  .header-dots {display:none;}
  
  .logo {
    text-align: center;
    margin:15px 0;
  }
  
  .top-links ul li a {padding: 2px 7px;}
  
  .breadcrumbs { display: none; }
  nav {
    position: relative;
  }
  nav ul#nav li {
    width: 100%;
    text-align: center;
  }
  nav ul#nav li a:link,
  nav ul#nav li a:visited {
    border-left: none;
    border-right: none;
  }
  nav ul#nav li:first-child a {
    border-left: none;
  }
  nav ul#nav {
    display: none;
    width: 100%;
  }
  nav.mobile-navigation ul.nav {
    display: block;			
  }
  nav ul.nav-mobile li:first-child a {
    background: #5A6C7C;
    color: #ffffff;
    line-height: 25px;
  }
  .nav-mobile {
    display: block;
  }
  .top-search {
    position: relative;
    width: 100%;
    float: left;
    clear: right;
  }
  .top-search input[type="text"] {
    width: 140px;
  }
  .top-links {
    position: relative;
    text-align: left;
    width: 100%;
    float: left;
    padding-top: 0;
  }
  nav ul#nav li.home a span {
    text-indent: 0;
    background: none;
    width: auto;
    height: auto;
  }
  .txtHolder {
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
  .vidHolder {
    width: 96%;
    padding: 0 2%;
    margin-bottom: 20px;
  }
  nav ul#nav li ul {
    width: 100%;
    -webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none;
    
  }
  nav ul#nav li ul li ul { left:0px; top: 35px;}
  nav ul#nav li ul li { width: 100%; }
  nav ul#nav li ul li a { display: block;}
  
  .pod-fixed {width: 380px; margin: 0 0 20px 0;}
  
  section.main { padding: 10px 0;}
  
  .pod-red, .pod-yellow, .pod-blue { margin-bottom:30px;}
  
  textarea { min-height: 60px; width: 200px;max-width: 90%;}
  select {  width: 200px;max-width: 90%; }
  
  .hidden-mobile {display:none!important;}
  
  
  
  
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) and (min-width: 480px)  {
  .casestudies-holder .grid-8 { width: 48%; margin-left: 1%;margin-right:1%;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  
  .top-search input[type="text"] { width: 50px;}
  
  .pod-fixed {width: 260px; margin: 0 0 20px 0;}
  
}


/*Social Sharing*/
#buttons {
  position:relative;
  float:left;
  width:100%;
  margin-bottom:20px;
}
.s-button {
  background: #DCE0E0;
  position: relative;
  display: block;
  float: left;
  height: 40px;
  margin: 10px 15px 0 0;
  overflow: hidden;
  width: 150px;
}
.s-icon {
  display: block;
  float: left;
  position: relative;
  z-index: 3;
  height: 100%;
  vertical-align: top;
  width: 38px;
  text-align: center;
}
.s-icon i {
  color: #fff;
  line-height: 42px;
}
.s-slide {
  z-index: 2;
  display: block;
  margin: 0;
  height: 100%;
  left: 38px;
  position: absolute;
  width: 112px;
}
.s-slide p {
  font-weight: 400;
  border-left: 1px solid #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 16px;
  left: 0;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 9px;
  width: 100%;
}
.s-button .s-slide {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.facebook iframe {
  display: block;
  position: absolute;
  right: 16px;
  top: 10px;
  z-index: 1;
}
.twitter iframe {
  width: 90px !important;
  right: 5px;
  top: 10px;
  z-index: 1;
  display: block;
  position: absolute !important;
}
.google #___plusone_0 {
  width: 70px !important;
  top: 10px;
  right: 15px;
  position: absolute;
  display: block;
  z-index: 1;
}
.linkedin .IN-widget {
  top: 10px;
  right: 5px;
  position: absolute;
  display: block;
  z-index: 1;
}
.facebook:hover .s-slide {
  left: 150px;
}
.twitter:hover .s-slide {
  top: -40px;
}
.google:hover .s-slide {
  bottom: -40px;
}
.linkedin:hover .s-slide {
  left: -150px;
}
.facebook .s-icon,
.facebook .s-slide {
  background: #305c99;
}
.twitter .s-icon,
.twitter .s-slide {
  background: #00cdff;
}
.google .s-icon,
.google .s-slide {
  background: #d24228;
}
.linkedin .s-icon,
.linkedin .s-slide {
  background: #007bb6;
}


/*#2016 - Ideas and Insights#*/
.tile-holder {
  position:relative;
  float:left;
  width:100%;
  height:calc(100vh - 155px);
}
.tile-holder .tile {
  position: relative;
  float: left;
  height: 50%;
  width: 50%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.5s ease;
  background-size:cover;
  background-repeat:no-repeat;
}
.tile-holder .tile div {
  text-align:center;
  z-index:10;
}
.tile-holder .tile div .title {
  display:block;
  color:#fff;
  text-transform: uppercase;
  font-size:24px;
  font-weight: bold;
}
.tile-holder .tile div .btn {
  clear:both;
  display:inline-block;
  border:1px solid #fff;
  padding:8px 15px;
  margin-top:15px;
  color:#fff;
  text-transform: uppercase;
  transition: all 0.5s ease;
}
.tile-holder .tile:hover div .btn {
  background-color: #fff;
  color:#475C6D;
}
.tile-holder .tile:before {
  content:'';
  background: #475C6D;
  opacity:0.5;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
.tile-holder .tile:hover:before {
  opacity:0.8;
}
.tile-holder .tile-1 {
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/insights-test.jpg');
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}
.tile-holder .tile-2 {
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/insights-test.jpg');
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
}
.tile-holder .tile-3 {
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/insights-test.jpg');
  border-right:2px solid #fff;
  border-top:2px solid #fff;
}
.tile-holder .tile-4 {
  background-image: url('https://www.stateofflux.co.uk/stateofflux/media/site/insights-test.jpg');
  border-left:2px solid #fff;
  border-top:2px solid #fff;
}

@media only screen and (max-width: 767px) {
  .tile-holder .tile div .title {
    font-size:16px;
  }
  .tile-holder .tile div .btn {
    padding:8px 15px;
    margin-top:15px;
    font-size:12px;
  }  
}
@media only screen and (max-height: 500px) {
  .tile-holder {
    height:500px;
  } 
}


/*#2016 - Ideas and Insights / Blog#*/
.grey-bg {
  background-color:#f5f5f5;
}
.item-block {
  position: relative;
  height: 350px;
  background: #fff;
  margin-bottom: 20px;
  overflow: hidden;
  display:block;
}

.item-block figure {
  display: block;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  height: 165px;
  overflow: hidden;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.item-block .details {
  padding: 10px 20px;
  padding-top: 60px;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.item-block .details .date {
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:10px 20px;
  background: #0090d4;
  color:#fff;
}
.item-block .details h4 {
  font-size:20px;
  line-height:24px;
  color:#666;
}
.item-block .details p {
  opacity: 0;
  color:#fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.item-block:hover .details {
  -webkit-transform: translateY(-165px);
  -moz-transform: translateY(-165px);
  -ms-transform: translateY(-165px);
  -o-transform: translateY(-165px);
  transform: translateY(-165px);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  background:#0090d4;
}
.item-block:hover .details h4 {
  color:#fff;
}
.item-block:hover .details p {
  opacity: 1;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.item-block-featured {
  display:flex;
}
.item-block-featured figure {
  position:relative;
  float:left;
  width:66%;
  background-size:cover;
  background-position:50%;
  background-repeat: no-repeat;
}
.item-block-featured figure figcaption {
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  background:#0090d4;
  padding:20px;
}
.item-block-featured figure figcaption h4 {
  color:#fff;
  font-size:20px;
  line-height:24px;
  margin-bottom:0;
}
.item-block-featured .details {
  position:relative;
  float:left;
  width:33%;
  background-color:#fff;
  height:350px;
  padding:20px;
  padding-top:60px;
  box-sizing:border-box;
  color:#666;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.item-block-featured .details .date {
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:10px 20px;
  background: #0090d4;
  color:#fff;
}
.item-block-featured:hover .details {
  background: #0090d4;
}
.item-block-featured:hover .details p {
  color:#fff;
}

@media only screen and (max-width: 767px) {
  .item-block-featured {
    display:block;
  }
  .item-block-featured figure {
    width:100%;
    height:300px;
  }
  .item-block-featured .details {
    width:100%;
    height:auto;
  }
}
/*#2016 - Ideas and Insights / CTA Zone#*/

.cta-zone {
  display:flex;
  background: #f5f5f5;
}
.cta-item {
  width:33.33333333%;
  text-align:center;
  float:left;
  display:inline-block;
  background:#475c6d;
  color:#fff;
  font-size:18px;
  box-sizing: border-box;
}
.cta-item a,
.cta-item span {
  display:block;
  padding:15px;
  color:#fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.cta-linkedin {
  background-color: #475c6d;
}
.cta-newsletter {
  background-color: #0090d4;
}

.cta-item a:hover,
.cta-item span:hover{
  background:#fff;
  color:#0090d4;
  cursor:pointer;
}
.cta-srm {
  background-color: #898989;
}
.cta-signup {
  position:relative;
  float:left;
  width:100%;
  display:none;
  background:#0090d4;
  padding-top: 30px;
  padding-bottom:30px;
}
.cta-signup p {
  color:#fff;
}

/*#2016 - Ideas and Insights / Pagination#*/

.pager {
  display:inline-block;
  text-align:center;
  width:100%;
}

.pager li {
  display:inline-block;
  background:none!important;
  padding:0!important;
}

.pager li a,
.pager li span {
  display:block;
  width:40px;
  line-height:40px;
  text-align:center;
  background:#fff;
  border-radius:50%;
  border:1px solid #0090d4;
  color:#0090d4;
  margin:10px;
}

.pager li span {
  background:#0090d4;
  color:#fff;
}

.pager li a:hover {
  background:#ccc;
  color:#fff;
  cursor:pointer;
}

/*#2016 - Ideas and Insights / Case Study#*/

.casestudy-pod {
  position:relative;
  display:block;
  /*padding-top:40%;*/
  height:120px;
  margin-bottom:15px;
  overflow:hidden;
}
.casestudy-pod-image {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-repeat:no-repeat;
}
.casestudy-pod-image span {
  position:absolute;
  bottom:0;
  left:0;
  background:#666;
  color:#fff;
  text-transform: uppercase;
  padding:2px 10px;
  font-size:14px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.casestudy-pod-details {
  position:absolute;
  vertical-align:bottom;
  top:100%;
  bottom:-100%;
  left:0;
  right:0;
  padding:15px;
  background:rgba(0,174,239,0.8);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.casestudy-pod-details > div {
  position:absolute;
  bottom:10px;
}
.case-study-pod-title {
  display:block;
  font-size:20px;
  color:#fff;
}
.case-study-pod-sector {
  font-size:14px;
  color:#fff;
}
.casestudy-pod:hover .casestudy-pod-image span {
  opacity:0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}
.casestudy-pod:hover .casestudy-pod-details {
  top:0;
  bottom:0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.grid-height-2 {
  height:310px;
}
.grid-height-1 {
  height:155px;
  overflow:hidden;
}
.grid-text-only {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:15px;
  margin-bottom:15px;
}
.grid-text-only span {
  position:absolute;
  bottom:0px;
  left:15px;
  right:15px;
}
.text-pod-blue {
  background:#00AEEF;
}
.text-pod-blue h2,
.text-pod-blue h3,
.text-pod-blue h4,
.text-pod-blue p { color:#fff;}

.text-pod-green {
  background:#6AC2BF;
}
.text-pod-green h2,
.text-pod-green h3,
.text-pod-green h4,
.text-pod-green p { color:#fff;}

.text-pod-dark-grey {
  background:#475C6D;
}
.text-pod-dark-grey h2,
.text-pod-dark-grey h3,
.text-pod-dark-grey h4,
.text-pod-dark-grey p { color:#fff;}

/*#2016 - Ideas and Insights / Landing#*/

.ideas img{
  width:100%;
}

.ideas .content{
  z-index:99;
  top:20%; left:50%;
  position:absolute;
}

.ideas .content h3{
  color:#fff;
  text-transform: uppercase;
  font-family: "DINWebPro-Medium", Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 479px) {
  .ideas .content h3{
    font-size:18px;
    line-height:26px;
  }
}

.ideas:hover{
  cursor:pointer;
}

.ideas .button{
  color:#fff;
  border:1px solid #fff;
  text-transform:uppercase;
  padding:5px 10px;	
  width:auto;
  display:inline-block;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
}

.ideas:hover .button { 
  background-color: #fff; 
  color: #475C6D;
}

.publication-grey {
  padding:50px 0;
  background-color:#e4e4e4;
}
.publication-white {
  padding:50px 0;
  background-color:#ffffff;
}





/* #Website update 2019 07# */

.video-container {
  margin-top:60px;
}



/*#title section#*/
.title-section {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.main .title-section {
  padding-top: 40px;
}
.title-section h2 {
  text-transform: uppercase;
  color:#00AEEF;
  font-size:26px;
}
.title-section .title-section--form {
  margin-bottom:60px;    
  
}
.title-section--form h2 {
  text-transform: none;
}
/* #full width# */
.full-width {
  padding: 70px 0;
  background-color:#f9f9f9;
  /*margin:60px 0;*/
}
.full-width .expandable-panels__bottom-container:after {
  background: linear-gradient(to top, #f9f9f9 40%, rgba(255, 255, 255, 0) 100%);
}

.full-width--sea-green {
  background-color:#6AC2BF;
  border-bottom: 10px solid #00A590;
  margin-bottom:0;
}
.full-width--sea-green a.button.brand-blue.dark {
  background-color:#00A590;
}
.full-width--sea-green a.button.brand-blue.dark:hover {
  background-color:#6AC2BF;
}
.full-width--slate {
  background-color:#273c4e;
  border-bottom: 10px solid #475c6d;
  margin-bottom:0;
}
.full-width--slate a.button.brand-blue.dark {
  background-color:#475c6d;
}
.full-width--slate a.button.brand-blue.dark:hover {
  background-color:#273c4e;
}
.full-width--grey {
  background-color:#bfc0c1;
  border-bottom: 10px solid #273c4e;
  margin-bottom:0;
}
.full-width--grey a.button.brand-blue.dark {
  background-color:#273c4e;
}
.full-width--grey a.button.brand-blue.dark:hover {
  background-color:#bfc0c1;
}
.full-width--dark-slate {
  background-color:#475c6d;
  border-bottom: 10px solid #273c4e;
  margin-bottom:0;
}
.full-width--dark-slate a.button.brand-blue.dark {
  background-color:#273c4e;
}
.full-width--dark-slate a.button.brand-blue.dark:hover {
  background-color:#475c6d;
}
.full-width--sky-blue {
  background-color:#77CBEA;
  border-bottom: 10px solid #0090D4;
  margin-bottom:0;
}
.full-width--sky-blue a.button.brand-blue.dark {
  background-color:#0090D4;
}
.full-width--sky-blue a.button.brand-blue.dark:hover {
  background-color:#77CBEA;
}

.full-width--blue {
  background-color:#0090D4;
  border-bottom: 10px solid #77CBEA;
  margin-bottom:0;
}
.full-width--blue a.button.brand-blue.dark {
  background-color:#77CBEA;
}
.full-width--blue a.button.brand-blue.dark:hover {
  background-color:#0090D44;
}

.full-width--light-grey {
  background-color:#E9EAE8;
  border-bottom: 10px solid #BFC0C1;
  margin-bottom:0;
}
.full-width--light-grey a.button.brand-blue.dark {
  background-color:#BFC0C1;
}
.full-width--light-grey a.button.brand-blue.dark:hover {
  background-color:#E9EAE8;
}

.full-width--coral {
  background-color:#ED6A5E;
  border-bottom: 10px solid #E11F1D;
  margin-bottom:0;
}
.full-width--coral a.button.brand-blue.dark {
  background-color:#E11F1D;
}
.full-width--coral a.button.brand-blue.dark:hover {
  background-color:#ED6A5E;
}

.full-width--sunshine {
  background-color:#ffde44;
  border-bottom: 10px solid #fbb800;
  margin-bottom:0;
}
.full-width--sunshine a.button.brand-blue.dark {
  background-color:#fbb800;
}
.full-width--sunshine a.button.brand-blue.dark:hover {
  background-color:#ffde44;
}

.full-width--light-grey h2, .full-width--light-grey p {
  color:#4d4d4d!important;
}

/* # category strategy #*/

.category-strategy-container {
  margin-top:40px;
}
.category-strategy {
  margin-bottom:40px;
}

@media all and (min-width: 768px) {
  .category-strategy-container .category-strategy:nth-child(even) > .category-strategy__image{
    order:2;
    margin-right:0;
  }
  .category-strategy-container .category-strategy:nth-child(even) > .category-strategy__content{
    margin-right:4%;
  }
  .category-strategy {
    display:flex;
    flex-wrap:wrap;
  }
  .category-strategy .category-strategy__image, .category-strategy .category-strategy__content {
    flex-basis:48%;
    margin-right:4%;
  }
  .category-strategy .category-strategy__content{
    margin-right:0;
  }
}

/* # module #*/
.module-container {
  margin-top:60px;
}
.module .module__image img {
  max-width:100%;
}

.module {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:45px;
}
.module .module__image {
  flex-basis: 18%;
  margin-right:2%;
  text-align:center;
}
.module .module__content {
  flex-basis:80%;
}
@media all and (min-width: 768px) {
  .module .module__image {
    flex-basis: 19%;
    margin-right:4%;
  }
  .module .module__content {
    flex-basis:71%;
  }
}

/*# form #*/

.full-width .form h2, .full-width .form p{
  color:#fff;
}
.form {
  max-width: 700px;
  margin: 0 auto;
}
.form-fields{
  display: flex;
  flex-wrap: wrap;
}
.form-fields .form-fields__item {
  flex-basis:100%;
}
.form-fields .form-fields__item .Error input{
  border-color:#ff0000;
}
.form-fields .form-fields__item label {
  padding:0;
  color:#fff;
}
.form-fields .form-fields__item .EditingFormControlNestedControl input {
  width: 90%;
  padding: 15px 10px;
  border-radius: 3px;
}
.form-fields .form-fields__item .EditingFormControlNestedControl textarea{
  width: 95%;
  border-radius: 3px;
  max-width: 100%;
}
.green input {
  background-color:#00A590;
}
.green input:hover {
  background-color:#048272;
}
@media all and (min-width:768px) {
  .form-fields .form-fields__item {
    flex-basis:50%;
  }
  .form-fields .form-fields__item--long {
    flex-basis:100%;
  }
}

/*#Table#*/
.table-mobile-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin-top:60px;
  
}
.table-mobile-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-mobile-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
  border-radius: 8px;
}
.table-mobile-scroll::-webkit-scrollbar-thumb {
  @include background-grey;
  border-radius: 10px;    
}
.table-support {
  width: 100%;
  border-collapse: collapse;
}
.table-support th {
  background-color: #efefef;
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #000;
  text-align: center;
}
.table-support th:first-child {
  text-align: left;
}
.table-support tr td {
  padding: 15px;
  min-width: 130px;
  line-height: 20px;
  border: 1px solid #ddd;
  text-align: center;
}
.table-support tr td:first-child {
  text-align: left;
}
.table-support__yes {
  background-color: #00aeef;
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  margin: 0 auto;
}
@media all and (min-width:960px) {
  .table-mobile-scroll {
    overflow-x: visible;
  }
}

/*# Key Benefits #*/
.key-benefits {
  margin-top:60px;
}
.key-benefits__item {
  margin-bottom:30px;
}

@media all and (min-width:768px) {
  .key-benefits__item .expandable-panel {
    padding-right:27px;
  }
  .key-benefits__content {
    padding-right:27px;
  }
}
/*#Awards#*/
.casestudy-pod--awards {
  height:200px;
  margin-bottom:40px;
}
.casestudy-pod--awards .portrait {
  background-size:120px;
}
.casestudy-pod--awards .landscape {
  background-size: 200px;
}
.casestudy-pod--awards .casestudy-pod-image {
  background-position: center;
}
/*#Diagram#*/
.diagram {
  margin:60px 0;
}
/*#Epandable pannels#*/
.expandable-panel {
  cursor: pointer;
}
.expandable-panels__content {
  display: block;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.7s ease-in-out;
}
.expandable-panels__content ul{
  
  margin: 1em 0;
}
.expandable-panels__content ul li{
  padding-left: 20px;
  background: url(https://www.stateofflux.co.uk/stateofflux/media/site/action-arrow-blue.png) 0 2px no-repeat;
}
.expandable-panels__content a.button {
  margin-bottom:25px;
}
.expandable-panels--open .expandable-panels__content {
  max-height: 99em;
  transition: max-height 0.7s ease-in-out;
  margin-bottom: 25px;
}
.expandable-panels__bottom-container {
  padding-top: 20px;
  position: relative;
  width:100%;
}
.expandable-panels__bottom-container:after {
  content: " ";
  display: block;
  position: absolute;
  background: linear-gradient(to top, #fff 40%, rgba(255, 255, 255, 0) 100%);
  height: 80px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 0;
  transition: all 0.7s ease-in-out;
}
.expandable-panels__bottom-container p {
  position: relative;
  z-index: 1;
  color:#00AEEF;
}
.expandable-panels__bottom-container:before {
  content: "Expand +";
  position: absolute;
  top: 0;
  color: #2faef0;
  z-index: 1;
  
}
.expandable-panels--open .expandable-panels__bottom-container:before {
  content:"Collapse -";
}
/*#CTA Pods 2019#*/
.cta-pods {
  margin: 60px 0;
}
.cta-pods .cta-pods__pod {
  text-align: center;
  padding:20px;
  margin-bottom:20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
.cta-pods__button {
  align-self: flex-end;
}
.cta-pods .cta-pods__content img{
  max-width:130px;
  margin-bottom:10px;
}
.cta-pods .cta-pods__pod h3, .cta-pods .cta-pods__pod p {
  color:#fff;
}
.cta-pods__pod--sea-green {
  background-color:#6AC2BF;
  border-bottom: 10px solid #00A590;
}
.cta-pods__pod--sea-green .sea-green {
  background-color:#00A590;
}
.cta-pods__pod--sea-green a:hover {
  background-color:#6AC2BF;
}


.cta-pods__pod--blue {
  background-color:#0090D4;
  border-bottom: 10px solid #77CBEA; 
}
.cta-pods__pod--blue .blue {
  background-color:#77CBEA!important;
}
.cta-pods__pod--blue a:hover {
  background-color:#0090D4!important;
}

.cta-pods__pod--coral {
  background-color:#ED6A5E;
  border-bottom: 10px solid #E11F1D;  
}
.cta-pods__pod--coral .coral {
  background-color:#E11F1D;
}
.cta-pods__pod--coral a:hover {
  background-color:#ED6A5E;
}

.cta-pods__pod--sky-blue {
  background-color:#77CBEA;
  border-bottom: 10px solid #0090D4;  
}
.cta-pods__pod--sky-blue .sky-blue {
  background-color:#0090D4;
}
.cta-pods__pod--sky-blue a:hover {
  background-color:#77CBEA;
}

.cta-pods__pod--sunshine {
  background-color:#ffde44;
  border-bottom: 10px solid #fbb800;  
}
.cta-pods__pod--sunshine .sunshine {
  background-color:#fbb800;
}
.cta-pods__pod--sunshine a:hover {
  background-color:#ffde44;
}

.cta-pods__pod--light-grey {
  background-color:#E9EAE8;
  border-bottom: 10px solid #BFC0C1;  
}
.cta-pods__pod--light-grey .light-grey {
  background-color:#9B5DA2;
}
.cta-pods__pod--light-grey a:hover {
  background-color:#77328A;
}

.cta-pods__pod--grey {
  background-color:#bfc0c1;
  border-bottom: 10px solid #273c4e;
}
.cta-pods__pod--slate {
  background-color:#273c4e;
  border-bottom: 10px solid #475c6d;  
}
.cta-pods__pod--slate .slate {
  background-color:#475c6d;
}
.cta-pods__pod--slate a:hover {
  background-color:#273c4e;
}

.cta-pods__pod--dark-slate {
  background-color:#475c6d;
  border-bottom: 10px solid #273c4e;
}
.cta-pods__pod--light-grey h3, .cta-pods__pod--light-grey p {
  color:#4d4d4d!important;
}
@media all and (min-width:768px) {
  .cta-pods {
    display: flex;
    flex-wrap: wrap;
  }
  .cta-pods .cta-pods__pod {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    flex-basis: 26%;
    margin-right:2%;
  }
  .cta-pods .cta-pods__pod:last-child{
    margin-right:0;
  }
}
@media all and (min-width:960px) {
  .cta-pods .cta-pods__pod {
    flex-basis: 27.6%;
  }
}

/*#training diagram#*/
.training-svg .training-svg__disabled:hover {
  opacity: 0.4 !important;
}

.training-svg__svg {
  max-width: 600px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s;
}
[data-group="behavioural"]:hover ~ .behavioural {
  opacity: 1;
}
[data-group="technical"]:hover ~ .technical {
  opacity: 1;
}
@media all and (min-width:900px) {
  .training-svg__svg {
    height:600px;
  }
}
.training-svg__svg:hover > g {
  opacity: 0.4;
}
.training-svg__svg g {
  transition: opacity 0.3s;
}
.training-svg__svg g:hover {
  opacity: 1 !important;
}
/*#Home diagram#*/
.home-diagram__svg {
  max-width: 550px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s;
}
.home-diagram__svg:hover a {
  opacity: 0.4;
}
.home-diagram__svg a {
  transition: opacity 0.3s;
}
.home-diagram__svg a:hover {
  opacity: 1 !important;
}
.home-diagram__svg a:hover ~ .home-diagram__disabled {
  opacity: 1 !important;
}
@media all and (min-width:900px) {
  .home-diagram__svg {
    height:600px;
  }
}
/*#supplier diagram#*/
.supplier-diagram__svg {
  max-width: 800px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.3s;
}
.supplier-diagram__svg svg g {
  transition: opacity 0.3s;
}
.supplier-diagram__svg svg g:hover{
  opacity:1!important;
}
@media all and (min-width:900px) {
  .supplier-diagram__svg {
    height:800px;
  }
}

.home {
  display:none;
}