@import "foundry-font.css";
@import "jotia.css";

* {
  padding: 0;
  margin: 0;
}

html, body {
  font-family: "FoundrySterling", Arial, sans-serif;
  font-weight: 400;
  height: 100%;
  width: 100%;
}

body {
  background: #edf2f5;
  color: #333;
  font-size: 14px;
}

h1 {
  font-family: "Jotia", Arial, sans-serif;
  font-size: 18px;
  margin: 15px 0;
}

h3 {
  font-size: 16px;
  margin: 15px 0 0;
}

p {
  line-height: 1.7em;
}

ul {
  margin: 0 0 15px 20px;
}

li {
  list-style-type: disc;
  line-height: 1.7em;
}

hr {
  border: 1px solid #c02424;
  margin: 10px 0;
  text-align: left;
  width: 10%;
}

.contain {
  margin: 0 auto;
  max-width: 1120px;
  position: relative;
}

.clearfix {
  display: block;
}

.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* Automatically created css */
.st0 {
  fill:#EEF2F4;
}

.st1 {
  fill:url(#radial-colour);
}

.st4 {
  fill:#FFFFFF;
}

.st12 {
  fill:none;
  stroke:#BBBDBF;
  stroke-width:2.528;
  stroke-miterlimit:10;
}

.st13 {
  opacity: 0.1;
  filter: alpha(opacity=10);
}

.st14 {
  fill:#231F20;
}

.st15 {
  fill:none;
}

.active .st16,
.highlighted .st16 {
  fill:#c496c6;
}

.st17 {
  fill:#404041;
}

.active .st18,
.highlighted .st18 {
  fill:#93a4d8;
}

.active .st19,
.highlighted .st19 {
  fill:#83cdf1;
}

.active .st20,
.highlighted .st20 {
  fill:#96d3d7;
}

.active .st21,
.highlighted .st21 {
  fill:#9ccd90;
}

.active .st22,
.highlighted .st22 {
  fill:#b5d68c;
}

.active .st23,
.highlighted .st23 {
  fill:#d5e289;
}

.active .st24,
.highlighted .st24 {
  fill: #eede83;
}

.active .st25,
.highlighted .st25 {
  fill: #efb285;
}

.active .st26,
.highlighted .st26 {
  fill:#f48482;
}

/* User defined css */
.lifecycle,
.cluster,
.practice-values {
  cursor: pointer;
  mix-blend-mode: multiply;
  /*opacity: 0.6;*/
}

.cluster.active,
.cluster.highlighted {
  mix-blend-mode: normal;
}

.cluster.highlighted circle {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
  #practising-circle,
  #understanding-circle,
  #contributing-circle,
  #implementing-circle,
  #designing-circle,
  #developing-circle,
  #optimising-circle,
  #facilitating-circle,
  #managing-circle,
  #academic-circle,
  #academic-circle {
    opacity: 0.6;
    filter: alpha(opacity=60);
  }
}

.svg-container {
  width: 100%;
  height: 100%;
}

svg {
  float: left;
  height: auto;
  width: 60%;
}

.content {
  float: right;
  position: relative;
  width: 40%;
  margin: 30px 0;
}

.content__info {
  display: table;
  height: 100%;
}

.content__info__inner-cont {
  display: table-cell;
  padding: 0 20px;
  vertical-align: middle;
}

.content__info__inner-cont p {
  margin-bottom: 15px;
}

.breadcrumb, .breadcrumb button {
  font-size: 12px;
}

.breadcrumb button {
  background: transparent;
  border: 0;
  font-size: 12px;
  font-family: "FoundrySterling", Arial, sans-serif;
  color: #c02424;
  text-decoration: underline;
  cursor: pointer;
}

.gradient-bg {
  height: 95%;
  position: absolute;
  right: 0;
  width: 74%;
  margin: 1.5% 0 2.5%;
  z-index: -1;
  transition: all 1s ease;
}

.gradient-bg.bg-practising {
  background: -moz-linear-gradient(left, rgba(250,201,200,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(250,201,200,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(250,201,200,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac9c8', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-understanding {
  background: -moz-linear-gradient(left, rgba(248,221,201,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(248,221,201,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(248,221,201,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ddc9', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-contributing {
  background: -moz-linear-gradient(left, rgba(247,240,198,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(247,240,198,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(247,240,198,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0c6', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-implementing {
  background: -moz-linear-gradient(left, rgba(235,241,198,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(235,241,198,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(235,241,198,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1c6', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-designing {
  background: -moz-linear-gradient(left, rgba(217,234,196,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(217,234,196,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(217,234,196,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9eac4', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-developing {
  background: -moz-linear-gradient(left, rgba(203,229,197,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(203,229,197,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(203,229,197,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbe5c5', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-optimising {
  background: -moz-linear-gradient(left, rgba(205,234,236,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(205,234,236,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(205,234,236,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeaec', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-facilitating {
  background: -moz-linear-gradient(left, rgba(200,233,249,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(200,233,249,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(200,233,249,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8e9f9', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-managing {
  background: -moz-linear-gradient(left, rgba(203,211,236,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(203,211,236,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(203,211,236,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd3ec', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-academic {
  background: -moz-linear-gradient(left, rgba(224,200,225,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(224,200,225,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(224,200,225,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0c8e1', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-practice-value {
  background: -moz-linear-gradient(left, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(204,204,204,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(204,204,204,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#00ffffff',GradientType=1 );
}

.gradient-bg.bg-red {
  background: -moz-linear-gradient(left, rgba(192,36,36,0.3) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(192,36,36,0.3) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(192,36,36,0.3) 0%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c02424', endColorstr='#00ffffff',GradientType=1 );
}

.cluster__buttons__group {
  border: solid 1px #bbb;
  border-radius: 4px;
}

.role-btn {
  background: transparent;
  border: 0;
  border-bottom: solid 1px #bbb;
  cursor: pointer;
  font-family: "Jotia", Arial, sans-serif;
  padding: 10px;
  text-align: left;
  width: 100%;
  position: relative;
}

.role-btn:last-child{
  border-bottom: none;
}

.role-btn:hover {
  border-color: #c02424;
  color: #c02424;
}

.role-btn::after {
  border-color: transparent transparent transparent #000333;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  content: "";
  height: 0;
  margin-top: -3px;
  position: absolute;
  right: 15px;
  top: 50%;
  width: 0;
}

.role-btn:hover::after {
  border-color: transparent transparent transparent #c02424;
}

.pop-up {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(237, 242, 245, 0.8);
  box-sizing: border-box;
  padding: 20px;
}

.pop-up__box {
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
  width: 70%;
}

.pop-up__box__header {
  padding: 15px;
  position: relative;
}

.pop-up__box__content{
  margin: 20px;
  position: relative;
  overflow: hidden;
  height: 80%;
}

.pop-up__box__header h1 {
  margin: 0;
  font-size: 22px;
}

.pop-up__box__header h3 {
  margin: 0;
  color: #666;
  font-family: "Jotia", Arial, sans-serif;
}

.pop-up__box__header__close-btn {
  background: #333;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: "FoundrySterling", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 5px 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
}

.pop-up__box__content h2 {
  font-size: 18px;
  margin: 0 20px 0 0;
}

.pop-up__box__content ul {
  margin-right: 20px;
}

.pop-up__box__content__scroll {
  position: absolute;
  bottom: 25px;
  border-top: solid 1px #ddd;
  padding: 5px 10px;
  left: calc(50% - 53px);
  font-style: italic;
}

.managing-colour {
  background-color: #93a4d8;
}

.facilitating-colour {
  background-color:#83cdf1;
}

.optimising-colour {
  background-color:#96d3d7;
}

.developing-colour {
  background-color:#9ccd90;
}

.designing-colour {
  background-color: #b5d68c;
}

.implementing-colour {
  background-color: #d5e289;
}

.contributing-colour {
  background-color: #eede83;
}

.understanding-colour {
  background-color: #efb285;
}

.practising-colour {
  background-color: #f48482;
}

.academic-colour {
  background-color: #c496c6;
}

.ps__rail-y {
  opacity: 0.6;
}

.italic-styled {
  transform: skewX(-12deg);
  display: inline-block;
}