/*This CCS is global*/
/*Main elements*/

html{
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    font-size: 15px;
}
body {
    background-color: #fff;
    color: #000000;
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    letter-spacing: normal;
    font-family: 'Primary', sans-serif;
    font-weight: normal;
    line-height: 1.4em;
    font-size: 15px;
    overflow-x: hidden;
    margin: 0;
    vertical-align: top;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-style: normal;
  font-stretch: normal;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  vertical-align:top;
}
pre,
xmp,
plaintext,
listing {
  white-space: pre-wrap;
  margin: 0;
}
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
::selection {
  background: #00A9E0;
  color: #fff;
}
::-moz-selection {
  background: #00A9E0;
  color: #fff;
}
::-webkit-selection {
  background: #00A9E0;
  color: #fff;
}
::-webkit-input-placeholder {
  color: #b3b3b3;
}
::-moz-placeholder {
  color: #b3b3b3;
}
::-moz-placeholder {
  color: #b3b3b3;
}
::-ms-input-placeholder {
  color: #b3b3b3;
}
*:focus,
input:focus,
textarea:focus,
button:focus {
  outline: none;
  color: inherit;
  -webkit-appearance: none;
}

/* Fonts */

@font-face {
  font-family: 'Mono';
  font-style: normal;
  font-weight: 300;
  src: url('../font/Mono-Light.woff2') format('woff2'),
       url('../font/Mono-Light.woff') format('woff');
}
@font-face {
  font-family: 'Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../font/Mono.woff2') format('woff2'),
       url('../font/Mono.woff') format('woff');
}
@font-face {
  font-family: 'Primary';
  font-style: normal;
  font-weight: 300;
  src: url('../font/Light.woff') format('woff');
}
@font-face {
  font-family: 'Primary';
  font-style: normal;
  font-weight: 400;
  src: url('../font/Regular.woff') format('woff');
}
@font-face {
  font-family: 'Primary';
  font-style: normal;
  font-weight: 600;
  src: url('../font/Medium.woff') format('woff');
}
@font-face {
  font-family: 'Primary';
  font-style: normal;
  font-weight: 800;
  src: url('../font/Bold.woff') format('woff');
}


/*User elements*/

p, p.big {
  font-family: 'Primary', sans-serif;
  font-weight: 300;
  line-height: 1.4em;
  font-size: 16px;
  margin: 0 0 1em 0;
}
p.big {
  font-size: 18px;
}
b {
  font-weight: normal;
}
ul{
    margin: 20px 0;
    padding: 0;
}
li{
    list-style: none;
    position: relative;
    display: block;
    padding: 5px 0 5px 20px;
    margin: 0;
}
li.no-style{
    padding: 0;
}
li:after{
    position: absolute;
    top: 12px;
    left: 0;
    content: "";
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color:#00C0FF;
}
li.no-style:after{
    content: "";
    height: 0;
    width: 0;
    background-color: none;
}
li.check:after{
    top: 10px;
    height: 13px;
    width: 13px;
    background-image: url(../img/check.svg);
    background-repeat: no-repeat;
    background-position: left 0px;
    background-size: 100% auto;
     background-color:transparent;
    border-radius: 0;
}
li.nr-li{
    list-style:decimal;
    position: relative;
    display: block;
    padding: 10px 30px 10px 25px;
    margin: 0;
}
li.nr-li b{
    height: 24px;
    width: 24px;
    padding-left: 1px;
    position: absolute;
    left: 0px;
    top: 7px;
    font-family: 'Mono';
    text-align: left;
    line-height: 25px;
    font-size: 13px;
}
li.nr-li:after{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    content: "";
    height: 0;
    width: 0;
    border-radius: 0%;
    background-color:transparent;
}
input {
  border-radius: 0;
  border: 0;
  padding: 0;
}
button,
button:active,
button:focus,
button:target {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
video {
    max-width: 100%;
    height: auto;
    border: 0;
}
.nocopy{
    user-select:none;
}

/*Headings and text styles*/

h1 {
  font-size: 57px;
  line-height: 1em;
  letter-spacing: -0.029em;
  margin: 0px 0 15px -2px;
  position: relative;
  font-weight: 800;
}
@media screen and (max-width: 1000px) {
  h1 {
    font-size: 45px;
  }
}
h2 {
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1em;
  letter-spacing: -0.01em;
  margin: 0px 0 15px;
}
h2.small {
  font-weight: 300;
}
h2.big {
  font-weight: 800;
  font-size: 44px;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  margin: 0px 0 20px;
}
h3 {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0px 0 10px;
  letter-spacing: -0.02em;
}
h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0px 0 10px;
}

code {
  font-family:'Mono', monospace;
  direction: ltr;
  text-align: left;
  word-spacing: normal;
  word-break: break-word;
  font-size: 13px;
  color: #000;
  display: inline-block;
  background-color: #E8F6FA;
  line-height: normal;
  margin-top: 3px;
  max-width: 100%;
}
pre {
  font-family:'Mono', monospace;
  direction: ltr;
  text-align: left;
  word-spacing: normal;
  word-break: break-word;
  font-size: 13px;
  color: #000;
  max-width: 560px;
  background-color: #E8F6FA;
  padding: 30px 33px 40px 30px;
  margin: 30px 0;
  box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.05);
}
/*Layout elements*/

.container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.container-s{
  width: 90%;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.container-xs{
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}
.container-large {
    width: 90%;
    max-width: 1120px;
    margin: 0px auto;
    position: relative;
    display: block;
}
.container-xl {
    width: 96%;
    max-width: 1280px;
    margin: 0px auto;
    position: relative;
    display: block;
}
.container-xxl {
    width: 96%;
    max-width: 1440px;
    margin: 0px auto;
    position: relative;
    display: block;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
  clear: both;
}
@media screen and (max-width: 965px) {
    .row{
        margin-right: 0;
        margin-left: 0;
    }
}
.col-xs-12,.col-12 {
  width: 100%;
}
.col-xs-11,.col-11 {
  width: 91.66666667%;
}
.col-xs-10,.col-10 {
  width: 83.33333333%;
}
.col-xs-9,.col-9 {
  width: 75%;
}
.col-xs-8,.col-8 {
  width: 66.66666667%;
}
.col-xs-7,.col-7 {
  width: 58.33333333%;
}
.col-xs-6,.col-6 {
  width: 50%;
}
.col-xs-5,.col-5 {
  width: 41.66666667%;
}
.col-xs-4,.col-4 {
  width: 33.33333333%;
}
.col-xs-3,.col-3 {
  width: 25%;
}
.col-xs-2,.col-2 {
  width: 16.66666667%;
}
.col-xs-1,.col-1 {
  width: 8.33333333%;
}
.col-xs-1,.col-1,
.col-xs-2,.col-2,
.col-xs-3,.col-3,
.col-xs-4,.col-4,
.col-xs-5,.col-5,
.col-xs-6,.col-6,
.col-xs-7,.col-7,
.col-xs-8,.col-8,
.col-xs-9,.col-9,
.col-xs-10,.col-10,
.col-xs-11,.col-11,
.col-xs-12,.col-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
@media screen and (max-width: 965px) {
    .col-xs-1,.col-1,
    .col-xs-2,.col-2,
    .col-xs-3,.col-3,
    .col-xs-4,.col-4,
    .col-xs-5,.col-5,
    .col-xs-6,.col-6,
    .col-xs-7,.col-7,
    .col-xs-8,.col-8,
    .col-xs-9,.col-9,
    .col-xs-10,.col-10,
    .col-xs-11,.col-11,
    .col-xs-12,.col-12 {
      float: none;
      width: 100%;
      padding-right: 0px;
      padding-left: 0px;
    }
}
.clear,
.clear-space-minimal, .clear-10,
.clear-20,
.clear-space-min, .clear-30,
.clear-space, .clear-60,
.clear-90,
.clear-space-big, .clear-120{
    clear: both;
}
.clear-space-minimal, .clear-10{
    padding: 5px;
}
.clear-20{
    padding: 10px;
}
.clear-space-min, .clear-30{
    padding: 15px;
}
.clear-space, .clear-60{
    padding: 30px;
}
.clear-90{
    padding: 45px;
}
.clear-space-big, .clear-120{
    padding: 60px;
}
.busunge{
    display: block;
}
@media screen and (max-width: 965px){
    .busunge{
        display: none;
    }
}
@media screen and (max-width: 965px){
    .hide-if-cell,
    .hide-if-small{
        display: none;
    }
}


/*Buttons and links*/

a {
  text-decoration: none;
  color: #D000B7;
  cursor: pointer;
}
a:hover {

}
a.big{
  font-family: 'Primary';
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3em;
  padding:0 30px 5px 0;
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
a.big:before{
  position: absolute;
  content: "";
    right: 5px;
    top: 10px;
    height: 0;
    width: 17px;
    border-bottom: 1px solid;
    transition: all ease .3s;
}
a.big:after{
  position: absolute;
  content: "";
    right: 5px;
    top: 6px;
    transform: rotate(-45deg);
    height: 9px;
    width: 9px;
    border-bottom: 1px solid;
    border-right: 1px solid;
    transition: all ease .3s;
}
a.big:hover:before,
a.big:hover:after{
    right: 0;
}
.btn,
.btn:focus,
.btn:target,
.btn:active{
    height: 45px;
    line-height: 45px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    border: 1px solid #6818bb;
    transition: all .3s ease;
    background-color: transparent;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    color: #6818bb;
}
.btn:hover{
    transform: translateY(-2px);
}
.btn-line-white,
.btn-line-white:focus,
.btn-line-white:target,
.btn-line-white:active{
    height: 45px;
    line-height: 45px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    border: 1px solid #fff;
    transition: all .3s ease;
    background-color: transparent;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
}
.btn-line-white:hover{
    transform: translateY(-2px);
}
.btn-main,
.btn-main:target,
.btn-main:focus{
    height: 45px;
    line-height: 47px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    transition: all .3s ease;
    background-color: #6818bb;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    margin-right: 5px;
    cursor: pointer;
    color: #fff;
    border: none;
}
.btn-main.disabled,
.btn-main[disabled],
.btn-primary.disabled{
    opacity: 0.1;
    cursor: default;
    pointer-events: none;
}
.btn-main:hover{
    transform: translateY(-2px);
}
.btn-main:active{
    background-color: #503A8A;
    transform: translateY(0px);
}
.btn-main.disabled:hover,
.btn-primary.disabled:hover{
    transform: translateY(0px);
}
.btn-green,
.btn-green:focus,
.btn-green:target,
.btn-green:active{
    height: 45px;
    line-height: 47px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    transition: all .3s ease;
    background-color: #2AECC2;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    color: #000;
}
.btn-green:hover{
    transform: translateY(-2px);
}
.btn-blue,
.btn-blue:focus,
.btn-blue:target{
    height: 45px;
    line-height: 47px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    transition: all .2s ease;
    background-color: #0071DB;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
}
.btn-blue:hover{
    transform: translateY(-2px);
}
.btn-blue:active{
    transform: translateY(0px);
    background-color: #083FCE;
}

.btn-small{
    height: 45px;
    line-height: 47px;
    display: inline-block;
    margin: 10px 0;
    position: relative;
    padding: 0px 20px;
    border-radius:45px;
    transition: all .3s ease;
    background-color: #fff;
    font-family: 'Primary';
    font-weight: 400;
    font-size: 15px;
    margin-right: 5px;
    cursor: pointer;
    color: #000;
}
.btn-small:hover{
    transform: translateY(-2px);
}
.btn-copy-script {
  position: absolute;
  margin: 10px 0;
  bottom: 0;
  right: 10px;
}
.btn-copy{
    height: 35px;
    line-height: 36px;
    display: inline-block;
    padding: 0px 15px;
    border-radius:30px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all .3s ease;
    background-color: #0071DB;
    cursor: pointer;
    color: #00207E;
    font-size: 12px;
    text-transform: uppercase;
}
.btn-copy:hover{
    background-color: #00C0FF;
}
.btn-primary,
.btn-primary:focus,
.btn-primary:target,
.btn-primary:active {
  border-radius: 30px;
  height: 54px;
  line-height: 54px;
  padding: 0 30px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #D000B7;
  opacity: 1;
  left: 0;
  display: inline-block;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 0px 0;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
  margin-right: 5px;
}
.btn-primary:hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.btn-secondary {
  border-radius: 30px;
  height: 52px;
  line-height: 52px;
  padding: 0 30px;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05), -1px 0 0 rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(0, 0, 0, 0.05);
  background: #fff;
  opacity: 1;
  left: 0;
  display: inline-block;
  font-size: 16px;
  letter-spacing: -0.005em;
  margin: 0px 0;
  cursor: pointer;
  color: #000;
  transition: all 0.2s ease;
  margin-right: 5px;
}
.btn-secondary:hover {
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.15), -1px 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.15), 0 -1px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/*Forms, checkboxex and radio buttons*/

.feild{
    border-bottom: 1px solid rgba(0,0,0,.0);
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    font-family: 'Primary';
    font-weight: 300;
    width: 100%;
    transition: all .5s ease;
    background: transparent;
}
.feild.alone{
    font-weight: 300;
    font-size: 18px;
    background-color:transparent;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    height: 60px;
    line-height: 60px;
    padding: 0;
    margin-bottom: 5px;
}
.feild.alone.center{
text-align: center;
}
.feild:hover,.feild:active{
    border-bottom: 1px solid rgba(0,0,0,1);
}
.feild.alone:hover,.feild.alone:active{
    border-bottom: 1px solid rgba(0,0,0,1);
}
.feild.clean{
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.radio {
  position: relative;
  float: left;
  clear: left;
  display: block;
  padding-left: 40px;
  margin-bottom: 5px;
  line-height: 26px;
  cursor: pointer;
}
.radio:before {
  background: #fff;
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
input[type="radio"] {
  display: none;
} 
input[type="radio"]:checked + label:before {
  content: "\2022";
    line-height: 17px;
    font-family: Tahoma;
    text-align: center;
    letter-spacing: -1px;
    font-size: 37px;
    color: #fff;
    background-color: #D000B7;
    border: 1px solid #D000B7;
}
.radio-btn {
 display: inline-flex;
    height: 32px;
    vertical-align: middle;
    align-items: center;
    padding: 0 30px 0 40px;
    clear: both;
    position: relative;
    cursor: pointer;
}
.radio-btn:before {
  height: 24px;
  width: 24px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  transition: all .1s ease;
  content: '';
}
.radio-btn.on:before {
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: #D000B7;
}
.radio-btn.on:after {
  height: 14px;
  width: 14px;
  background-color: #fff;
  border: 1px solid #D000B7;
  position: absolute;
  display: block;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  transition: all .1s ease;
  content: '';
}
.check-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-content: center;
  height: 32px;
  vertical-align: middle;
  padding: 0 30px 0 40px;
  clear: both;
  position: relative;
  cursor: pointer;
}
.check-box.action{
    margin: 16px 0;
}
.check-box a{
    margin: 0 5px;
}
.check-box.title {
  font-weight: 800;
}
.check-box:before {
  height: 24px;
  width: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  border-radius: 5px;
  transition: all .1s ease;
  content: '';
}
.check-box.on:before {
  border: 1px solid rgba(0, 0, 0, 0.07);
  background-color: #D000B7;
}
.check-box.on:after {
  height: 12px;
  width: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  display: block;
  top: 7px;
  left: 11px;
  content: '';
  transform: rotate(45deg);
}
.red.check-box:before {
  border: 1px solid #FF2B7E;
  background-color: rgba(255, 43, 126, 0.2);
}
.red.check-box.on:before {
  background-color: rgba(255, 43, 126, 1);
}
.select-menu-wrapper{
    position: relative;
    display: inline-block;
    box-shadow: 0 -1px 0px 0px rgba(0,0,0,0.05), -1px 0 0px 0px rgba(0,0,0,0.05), 1px 0 0px 0px rgba(0,0,0,0.05), 0px 1px 0px 0px rgba(0,0,0,0.05), 0px 2px 1px 0px rgba(0,0,0,0.05);
    border-radius:5px;
    width: 100%;
    margin: 10px 20px 10px 0;
    max-width: 280px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    background-color: #fff;
    z-index: 100;
    margin: 10px 0px 10px 0;
}
.select-menu-wrapper.big{
    max-width: 400px;
}
.select-menu-wrapper:after{
    position: absolute;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    right: 20px;
    top: 19px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
select{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
.select-menu{
  border: 0;
  position: relative;
  display: block;
  height: 54px;
  line-height: 55px;
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
  padding: 0 40px 0 20px;
  font-size: 15px;
  font-family: 'Primary';
  font-weight: 400;
}

/*Images deafult behavior*/

img{
    max-width: 100%;
    height: auto;
    position: relative;
}

/*Header, logo and icons in ClS*/

.header {
  text-align: left;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: block;
  left: 0;
    top: 30px;
    height: 75px;
    z-index: 2100;
    position: absolute;
}
@media screen and (max-width: 965px){
    .header{
        position: relative;
    }
}
.header-container{
    width: 100%;
    max-width: 1330px;
    padding: 0 120px;
    margin: 0 auto;
    position: relative;
}
@media screen and (max-width: 965px){
    .header-container{
    display: none;
    }
}
.header-container .btn{
    border: none;
    background: #6818bb;
    color: #fff;
    line-height: 47px;
    margin-top: 13px;
}
.header-nav-left{
    height: 75px;
    position: relative;
    float: left;
    line-height: 75px;
}
.header-nav-right{
    height: 75px;
    position: relative;
    float: right;
    line-height: 75px;
}
.header-nav-left a,
.header-nav-right a{
    color: #000;
    transition:all .3s ease;
}
.header-nav-left a:hover,
.header-nav-right a:hover{
    opacity: .3;
}
.header-nav-left a{
    margin-right: 30px;
}
.header-nav-right a{
    margin-left: 30px;
}

.logo {
  position: absolute;
  cursor: pointer;
  z-index: 2100;
  left: 3%;
  top: 0px;
  height: 74px;
  width: 75px;
}
.greta-logo{
    width: 21px;
    height: 34px;
    position: absolute;
    display: block;
    top: 20px;
    left: 24px;
    background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='21' height='34' viewBox='0 0 21 34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGroup 4%3C/title%3E%3Cdefs%3E%3Ccircle id='a' cx='10.451' cy='9.07' r='7.493'/%3E%3Ccircle id='b' cx='11.93' cy='25.817' r='7.493'/%3E%3Cpath d='M12.438 26.11v.003h-8.55C1.74 26.113 0 24.37 0 22.218c0-2.15 1.74-3.894 3.887-3.894h8.55v.003c2.075.082 3.732 1.793 3.732 3.89 0 2.1-1.658 3.81-3.732 3.893z' id='c'/%3E%3Ccircle id='d' cx='19.324' cy='1.676' r='1.676'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cuse fill='%23000' xlink:href='%23a'/%3E%3Ccircle stroke='%23000' cx='10.451' cy='9.07' r='6.993'/%3E%3C/g%3E%3Cg%3E%3Cuse fill='%23000' xlink:href='%23b'/%3E%3Ccircle stroke='%23000' cx='11.93' cy='25.817' r='6.993'/%3E%3C/g%3E%3Cg%3E%3Cuse fill='%23000' xlink:href='%23c'/%3E%3Cpath stroke='%23000' d='M12.35 25.613l.068-.003c1.812-.07 3.25-1.567 3.25-3.392 0-1.824-1.438-3.32-3.25-3.39l-.068-.004H3.887c-1.87 0-3.387 1.52-3.387 3.394 0 1.875 1.517 3.395 3.387 3.395h8.463z'/%3E%3C/g%3E%3Cg%3E%3Cuse fill='%23000' xlink:href='%23d'/%3E%3Ccircle stroke='%23000' cx='19.324' cy='1.676' r='1.176'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.toggle-intercom {
  display: block;
  position: relative;
  float: right;
  cursor: pointer;
  z-index: 3000;
  border-radius: 0;
  padding: 15px;
  height: 75px;
  width: 75px;
  background-color: transparent;
  border-left: 1px solid rgba(0,0,0,0.05);
}
@media screen and (max-width: 965px){
    .toggle-intercom{
        display: none;
    }
}
.toggle-intercom:hover{
    background-color: rgba(0,0,0,0.02);
}

.toggle-menu {
  display: block;
    position: absolute;
    right: 3%;
    top: 0;
    cursor: pointer;
    padding: 15px;
    height: 75px;
    width: 75px;
    background-color: transparent;
}
.toggle-menu:hover .toggle-line-1,
.toggle-menu:hover .toggle-line-2,
.toggle-menu:hover .toggle-line-3{
    transform: scale(1.5);
}
.toggle-line-1,
.toggle-line-2,
.toggle-line-3 {
  height: 3px;
  background-color: #000000;
  width: 3px;
  border-radius: 50%;
  position: relative;
  display: block;
  transition: all 0.3s ease;
}
.toggle-line-1 {
  top: 27px;
  left: 21px;
}
.toggle-line-2 {
  top: 10px;
  left: 21px;
}
.toggle-line-3 {
  top: 14px;
  left: 21px;
  opacity: 1;
}

.select-token{
    position: absolute;
    display: inline-block;
    border:1px solid rgba(0,0,0,0.0);
    border-right:1px solid rgba(0,0,0,0.05);
    border-radius:0px;
    height: auto;
    max-height: 75px;
    left: 75px;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    z-index: 100;
    margin:0;
}
@media screen and (max-width: 965px){
   .select-token{
    display: block;
    left: 0;
    top: 75px;
    border:1px solid rgba(0,0,0,0.05);
    max-width: 100%;
    } 
}
.select-token:after{
    position: absolute;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    right: 26px;
    top: 29px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
.select-token.on{
    border:1px solid rgba(0,0,0,0.05);
    border-radius: 0 0 5px 5px ;
    box-shadow:0 5px 10px rgba(0,0,0,0.05);
    max-height: 10000px;
}
.select-token-item{
    padding:22px 40px 22px 22px;
    height: 75px;
    width: 100%;
    line-height: 1.1em;
    background-color: #fff;
    transition: all .3s ease;
}
.select-token-item:hover{
    background-color: #fbfbfb;
}
.select-token-subject{
    font-size: 13px;
    color: #9D9D9D;
}
.add-token{
    line-height: 75px;
    padding: 0 22px;
}

/*Footer*/

footer {
    padding: 0px 0px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
footer .container-large {
    min-height: 75px;
    display: flex;
    align-items: center;
    position: relative;
}
.blog-link-temp {
    position: relative;
    display: inline-block;
    height: 45px;
    width: 45px;
    margin: 0 30px;
    background-image: url(../img/medium-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

/*Menu*/

.main-menu{
    position: absolute;
    top:75px;
    right: 0;
    width: 100%;
    max-width: 360px;
    z-index: 2200;
    background-color: #fff;
    display: none;
    padding:0px;
    border-radius: 0px 0px 0px 5px;
    border:1px solid rgba(0,0,0,0.05);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.02);
}
.main-menu.show{
    display: block;
}
.main-menu a{
    padding: 20px 0px 20px 30px;
    display: inline-block;
    color: #000;
}
.main-menu b a{
    padding: 20px 30px;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.main-menu a:hover{
   color: #D000B7;
}

/* Logged out menu state */

#logged-in-menu,
#account-tab,
#dashboard-tab { display: none; }
#logged-out-menu { display: block; }

/* Logged in menu state */
.is-logged-in #logged-in-menu,
.is-logged-in #account-tab,
.is-logged-in #dashboard-tab { display: block; }
.is-logged-in #logged-out-menu { display: none; }

/*Wrappers*/
.top{
  padding: 180px 0 0;
}
@media screen and (max-width: 965px){
    .top{
        padding: 60px 0 0;
    }
}
.offset-for-absolute-header {
    padding-top: 150px;
}

@media screen and (min-width: 965px) {
    .offset-for-absolute-header {
        padding-top: 75px;
    }
}
.padding-30{
    padding: 30px;
}
.padding-50{
    padding: 50px;
}
@media screen and (max-width: 965px){
    .padding-50{
        padding: 30px;
    }
}
.side-box{
    padding:30px 40px 30px;
    background-color: #FBFBFB;
    position: relative;
    display: block;
    margin: 0 0 30px 0;
    text-align: left;
}
.side-box,
.side-box p{
    font-size: 15px;
    font-family: 'Primary';
    font-weight: 400;
}
.side-box h3{
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 10px;
}
.warning{
    background-color: #FFEAF2;
    color: #FF2B7E;
}
.warning a{
    color: #FF2B7E;
    text-decoration: underline;
}
.message-box{
    background-color: #E8F6FA;
    border-radius: 5px;
    padding: 15px 20px;
    margin: 20px 0;
    position: relative;
    display: none;
    line-height: normal;
    text-align: left;
}
.error-box{
    background-color: #FF2B7E;
    color: #fff;
    border-radius: 5px;
    padding: 15px 20px;
    position: absolute;
    z-index: 3000;
    display: none;
    line-height: normal;
    text-align: left;
}
.error-box:after{
    height: 10px;
    width: 10px;
    background-color: #FF2B7E;
    position: absolute;
    display: block;
    top: -5px;
    left: 12px;
    content: '';
    transform: rotate(45deg);
}
.right.error-box:after{
  right: 20px;
  left: auto;
}
.dev-info {
    letter-spacing: normal;
    font-family: 'Mono';
    font-weight: normal;
    line-height: 1.4em;
    font-size: 13px;
    background-color: #000;
    padding: 40px 50px 50px;
    color: #fff;
    max-width: 460px;
}
.action-box {
    max-width: 540px;
    margin: 30px auto 90px;
}

.card-message{
    padding: 40px;
    color: #9D9D9D;
}
.card-message h2{
    font-size: 53px;
    font-weight: 100;
    font-family: 'Mono';
}

/*Code style*/

.hljs{display:block;overflow-x:auto;padding:0.5em;background:#eaeef3}.hljs{color:#00193a}.hljs-keyword,.hljs-selector-tag,.hljs-title,.hljs-section,.hljs-doctag,.hljs-name,.hljs-strong{font-weight:bold}.hljs-comment{color:#738191}.hljs-string,.hljs-title,.hljs-section,.hljs-built_in,.hljs-literal,.hljs-type,.hljs-addition,.hljs-tag,.hljs-quote,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#0048ab}.hljs-meta,.hljs-subst,.hljs-symbol,.hljs-regexp,.hljs-attribute,.hljs-deletion,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-bullet{color:#4c81c9}.hljs-emphasis{font-style:italic}

.hljs {
  background: inherit !important;
  padding: 0em !important;
}

.hljs-regexp {
  color: inherit !important;
}
.debug{
    position: relative;
    padding:30px 0 1px;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    color: #9D9D9D;
    font-family: 'Roboto Mono';
    font-size: 12px;
    overflow: hidden;
    margin: 0 0 20px;
    user-select:none;
    cursor: default;
}
.debug:before{
    height: 30px;
    width: 100%;
    background-color: #f9f9f9;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 3px 3px 0 0;
}
.debug:after{
    height: 30px;
    border-bottom: 1px solid #0071DB;
    line-height: 30px;
    font-family: sans-serif;
    content: "Console";
    position: absolute;
    padding: 0 10px;
    left: 30%;
    top: 0;
    z-index: 2;
}
.debug a{
    color: inherit;
    text-decoration: underline;
    cursor: default;
}
.debug div{
    padding: 4px 0px 4px 15px;
    border-bottom: 1px solid #fbfbfb;
    white-space:nowrap;
    width: 100%;
    overflow: hidden;
}
.connecting{
    color:#FFC400;
}
.connected{
    color:#19CFA7;
}
.loading-peer{
    color:#00C0FF;
}
.loaded-peer{
    color:#0071DB;
}
.loading-server{
    color:#E98EDD;
}
.loaded-server{
    color:#D000B7;
}
.loading-cache{
    color:#22459E;
}
.loaded-cache{
    color:#00207E;
}
.error-loading{
    color: #FF2B7E;
}
.disconnected{
    color: #D00079;
}

/*Colors*/

.color-lightgray{
    color: #fbfbfb;
}
.bg-color-lightgray{
    background-color: #fbfbfb;
}
.bg-color-brightgray{
    background-color: #f7f7f7;
}
.color-gray{
    color: #B3B3B3;
}
.bg-color-gray{
    background-color: #B3B3B3;
}
.color-darkgray{
    color: #777777;
}
.bg-color-darkgray{
    background-color: #777777;
}
.color-red{
    color: #FF2B7E;
}
.bg-color-red{
    background-color: #FF2B7E;
}
.color-purple{
    color: #D000B7;
}
.bg-color-purple{
    background-color: #D000B7;
}
.color-purple-red{
    color: #D00079;
}
.color-black{
    color: #000;
}
.bg-color-black{
    background-color: #000;
}
.color-white{
    color: #fff;
}
.bg-color-white{
    background-color: #fff;
}
.color-blue-1{
    color: #00207E;
}
.bg-color-blue-1{
    background-color: #00207E;
}
.color-blue-2{
    color: #083FCE;
}
.bg-color-blue-2{
    background-color: #083FCE;
}
.color-blue-3{
    color: #0071DB;
}
.bg-color-blue-3{
     background-color: #0071DB;
}
.color-blue-4{
    color: #00C0FF;
}
.bg-color-blue-4{
    background-color: #00C0FF;
}
.color-blue-5{
    color: #6DDBFF;
}
.color-blue-6{
    color: #CDF3FF;
}
.color-blue-7{
    color: #E9F6FB;
}
.bg-color-blue-7{
    background-color: #E9F6FB;
}
.color-orange{
    color: #FC5630;
}
.color-green{
    color: #2AECC2;
}
.bg-color-green{
    background-color: #2AECC2;
}
.color-yellow{
    color: #FEE900;
}
.bg-color-yellow{
    background-color: #FEE900;
}

/*Align elements*/

.center {
  text-align: center;
}
.right {
  text-align: right;
}
@media screen and (max-width: 965px){
    .right {
      text-align: left;
    }
}
.left {
  text-align: left;
}
.justify {
  text-align: justify;
}
.center-all {
   display: flex;
    align-items: center;
    justify-content: center;
}
.col-xs-8 p,
.col-xs-6 p,
.col-xs-7 p,
.col-xs-8 h1,
.col-xs-6 h1,
.col-xs-7 h1,
.col-xs-6 .column-gutter-right {
    margin-right: 8.33333333%;
}
@media screen and (max-width: 965px){
    .col-xs-8 p,
    .col-xs-6 p,
    .col-xs-7 p,
    .col-xs-8 h1,
    .col-xs-6 h1,
    .col-xs-7 h1,
    .col-xs-6 .column-gutter-right {
        margin-right: 0;
    }
}

/* Greta images */
/* These are used in js/components/Image.js */

.greta-image-container {
  position: relative;
}
.greta-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/*Animations*/

.done-loading {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .4s;
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-delay: 0.5s;
}
@keyframes bounceIn {
  0% {opacity: 0; transform: scale(0);}
  100% {opacity: 1;transform: scale(1);}
}
.bounce-in {
  animation-name: bounceIn;
  animation-fill-mode: both;
  animation-timing-function:cubic-bezier(0, 1.2, 1, 1);;
  animation-duration: .3s;
}
@keyframes moveInDown {
  0% {transform: translateY(-150px);}
  10% {transform: translateY(-150px);}
  100% {transform: translateY(0px);}
}
.move-in-down {
  animation-name: moveInDown;
  animation-fill-mode: both;
  animation-timing-function:cubic-bezier(.49,0,.56,1.02);
  animation-duration: .6s;
}
@keyframes bounce {
  0% {transform: translateY(0px)scaleY(1);}
  30% {transform: translateY(5px)scaleY(.9);}
  85% {transform: translateY(-10px)scaleY(1.05);}
  100% {transform: translateY(0px)scaleY(1);}
}
@keyframes fadeInDown {
  from {opacity: 0;transform: translateY(-10px);}
  to {opacity: 1;transform: translateY(0px);}
}
.fade-in-down {
  animation-name: fadeInDown;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-delay: 0.5s;
}
@keyframes slideInDown {
  0% {opacity: 0; transform: translateY(-200px);}
  100% {opacity: 1; transform: translateY(0px);}
}
.slide-in-down {
  animation-name: slideInDown;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-duration: .9s;
}
@keyframes fadeInUp {
  from {opacity: 0;transform: translateY(10px);}
  to {opacity: 1;transform: translateY(0px);}
}
.fade-in-up {
  animation-name: fadeInUp;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-delay: 0.5s;
}
@keyframes fadeInLeft {
  from {opacity: 0;transform: translateX(10px);}
  to {opacity: 1;transform: translateX(0px);}
}
.fade-in-left {
  animation-name: fadeInLeft;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-delay: 0.5s;
}
@keyframes shake {
  0%,100% {transform: translateX(0px);}
  20%,40%,60%,80% {transform: translateX(-5px);}
  10%,30%,50%,70%,90% {transform: translateX(5px);}
}
.shake {
  animation-name: shake;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .8s;
  animation-delay: .4s;
}
@keyframes bendIn {
  0% {
    transform: matrix3d(0.9, 0, 0.00, 0.0002, 0.00, 0.9, 0.00, 0.0001, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 0.00001;
  }
  100% {
    transform: matrix3d(1, 0, 0.00, 0, 0.00, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1;
  }
}
.bend-in {
  animation-name: bendIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .5s;
}
@keyframes bendInBig {
  0% {
    transform: matrix3d(
1.0428949958661522,	0.05151061324046684,	0,	0.00017323978042963953,
0.03342861899297509,	0.9752068850194977,	0,	-0.00006929056844083165,
0,	0,	1,	0,
15,	20,	0,	1);
    opacity: 0.00001;
  }
  100% {
    transform: matrix3d(1, 0, 0.00, 0, 0.00, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1;
  }
}
.bend-in-big {
  animation-name: bendInBig;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .5s;
}

/*Animation timers*/
.a-1 {
  animation-delay: .3s;
}
.a-2 {
  animation-delay: .4s;
}
.a-3 {
  animation-delay: .5s;
}
.a-4 {
  animation-delay: .6s;
}
.a-5 {
  animation-delay: .7s;
}
.a-6 {
  animation-delay: .8s;
}
.a-7 {
  animation-delay: .9s;
}
.a-8 {
  animation-delay: 1s;
}
.a-9 {
  animation-delay: 1.1s;
}
.a-10 {
  animation-delay: 1.2s;
}



.jawn {
  position: relative;
  background-color: #0071DB;
  width: 10px;
  height: 10px;
  margin: 60px auto;
    border-radius: 50%;
}
  
  .jawn:after, .jawn:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }
  
  .jawn:after {
    left: -10px;
    top: -5px;
    background-color: #D000B7;
    transform-origin: 15px 10px;
    animation: axis 1s linear infinite;
  }
  .jawn:before {
    left: -25px;
    top: -15px;
    background-color: #FF2B7E;
    transform-origin: 30px 20px;
    animation: axis 2s linear infinite;
  }


@keyframes axis {
  0% {
    transform: rotateZ(0deg) translate3d(0,0,0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0,0,0);
  }
}

/*Greta prompt*/
.analytics-puff{
   background: rgb(73,18,83); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(73,18,83,1) 0%, rgba(36,18,83,1) 24%, rgba(36,18,83,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(73,18,83,1) 0%,rgba(36,18,83,1) 24%,rgba(36,18,83,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(73,18,83,1) 0%,rgba(36,18,83,1) 24%,rgba(36,18,83,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #fff;
    padding: 60px 0 ;
    margin-bottom: 90px;
}
.analytics-puff img{
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: block;
    position: relative;
}

/**********************************************************/