/*************** // TYPO // ****************/

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600&subset=latin-ext');

/*************** // BODY, CONTAINER // ****************/

html, body { 
display:block;font-family:'Titillium Web', sans-serif;font-size:16px;line-height:1.5em;color:#000000;font-weight:400;font-style:normal;letter-spacing:normal;
}

/*************** // BANNER // ****************/

div.banner {
display:block;width:1580px;height:500px;position:relative;overflow:hidden;z-index:1;background:#f0f5f9;background:-moz-linear-gradient(top, #f0f5f9 0%, #a6cee8 100%);background:-webkit-linear-gradient(top, #f0f5f9 0%,#a6cee8 100%);background:linear-gradient(to bottom, #f0f5f9 0%,#a6cee8 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f5f9', endColorstr='#a6cee8',GradientType=0 );
}
div.banner div#particles-js {
height:100%;width:100%;position:absolute;opacity:0.8;
}
div.banner div.parallax {
height:100%;width:100%;position:absolute;
}
div.banner div.parallax div.layer {
height:100%;width:100%;position:absolute;
}
div.banner div.parallax div.layer div.layer-rotate {
height:100%;width:100%;position:absolute;animation:rotate 10s 0.5s infinite linear reverse;
}
div.banner div.parallax div.layer div.layer-rotate div.box {
border-radius:100%;position:absolute;z-index:3;cursor:grab;background-color:#F3F8FE;color:#A7A9A8;
}
div.banner div.parallax div.layer div.layer-rotate div.box:active {
border-radius:100%;position:absolute;z-index:3;cursor:grabbing;
}
div.banner div.parallax div.layer div.layer-rotate div.box.scale {
animation:scale 2.5s infinite alternate;
}
div.banner div.parallax div.layer div.layer-rotate div.box figure {
position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:70%;height:70%;
}
div.banner div.parallax div.layer div.layer-rotate div.box figure svg {
width:100%;max-width:100%;height:100%;max-height:100%;
}
div.banner div.parallax div.layer div.layer-rotate div.box figure svg path {
fill:#AAABAD; 
}
div.banner div.parallax div.layer div.layer-rotate div.box.active figure svg path {
fill:#FFFFFF; 
}

div.banner div.parallax div.layer div.layer-rotate div.dot {
border-radius:100%;width:15px;height:15px;background-color:#FFFFFF;position:absolute;z-index:2;
}
div.banner div.parallax div.layer div.layer-rotate div.line {
width:2px;height:2px;background-color:#FFFFFF;position:absolute;z-index:2;
}

div.banner div.parallax div.layer div.layer-rotate div.box.size-xxl {
width:150px;height:150px;
}
div.banner div.parallax div.layer div.layer-rotate div.box.size-xl {
width:130px;height:130px;
}
div.banner div.parallax div.layer div.layer-rotate div.box.size-l {
width:110px;height:110px;
}
div.banner div.parallax div.layer div.layer-rotate div.box.size-m {
width:90px;height:90px;
}
div.banner div.parallax div.layer div.layer-rotate div.box.size-s {
width:70px;height:70px;
}

div.banner div.parallax div.layer div.layer-rotate div.box.color-blue {
background-color:#266FB3;color:#FFFFFF;
}
div.banner div.parallax div.layer div.layer-rotate div.box.color-blue-light {
background-color:#1D8DCD;color:#FFFFFF;
}
div.banner div.parallax div.layer div.layer-rotate div.box.color-blue-lighter {
background-color:#93C9EB;color:#FFFFFF;
}
div.banner div.parallax div.layer div.layer-rotate div.box.color-green {
background-color:#60C7C6;color:#FFFFFF;
}


@keyframes scale {
from {transform:scale(1);}to{transform:scale(0.75);}
}
@-webkit-keyframes rotate {
0% {transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);}
100% {transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);}
}
@keyframes rotate {
0% {transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);}
100% {transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);}
}

/*************** // BANNER TOOLTIP // ****************/


[aria-label][role~="tooltip"]::after {
  background: rgba(255, 255, 255, 0.9);
  background: var(--microtip-background-color, rgba(255, 255, 255, 0.9));
  border-radius: 4px;
  color: #AAABAD;
  color: var(--microtip-text-color, #AAABAD);
  content: attr(aria-label);
  font-size: var(--microtip-font-size, 13px);
  font-weight: var(--microtip-font-weight, normal);
  
}

[role~="tooltip"][data-microtip-position|="top"]::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28255,%20255,%20255,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  height: 6px;
  width: 18px;
  margin-bottom: 5px;
}