html {height: 100%;-webkit-font-smoothing: subpixel-antialiased}
body {margin:0;padding:0;color:#000;font-family:Helvetica, Arial, sans-serif;background:#ff003d;-webkit-font-smoothing:antialiased; font-size: 15px; color: #fff; font-weight: 400; text-transform: uppercase; letter-spacing: .4em; font-size: 15px }

/* common */

.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex;-moz-align-items:center;-ms-align-items:center;-webkit-align-items:center;align-items:center;}
.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;display: flex; }
.flex-center { -ms-justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;align-items:center;-moz-align-items:center;-ms-align-items:center;-webkit-align-items:center;}

.button {border: 2px solid #fff; padding: .3em 1em; color: #fff; text-decoration: none; position: relative; transition:all .3s ease; transform-style: preserve-3d; cursor: pointer;transform: translateZ(100px); display: inline-block}
.button:hover {color: #ff003d}
.button:active {transform: scale(.98)}
.button::before {content: ""; position: absolute; bottom: 0;left: 0; transform: translateZ(-1px); background-color: #fff; width: 100%; transition:all .3s ease; z-index: 0; height: 0; cursor: pointer}
.button:hover::before {transform: translateZ(-1px);height: 100%;}
.bold { font-weight: bold;}
.noscroll {overflow: hidden!important;}

.button-red {border-color:#ff003d; color: #ff003d;}
.button-red:hover {color:#fff;}
.button-red::before { background-color: #ff003d;}

.whiteback { background-color: #fff; color: #000;}
.block {padding: 3em;}
.tcenter {text-align: center;}
.head-regular { font-size: 4em; font-weight: 300; margin: 0; padding: 0; letter-spacing: .4em; margin:.15em 0 .7em;}
.head-small { font-size: 1.2em; font-weight: 400; margin:0; padding:  3em 1em; letter-spacing: .4em; margin:.15em 0 .7em;}
.limit-width {max-width: 910px; margin: auto;}
.limit-width-800 {max-width: 800px; margin: auto;}
.f36 {font-size: 1.25em; font-weight: 340; letter-spacing: .5em}
.fs10 { font-size: .66em}
.mt4 {margin-top: 4em!important}

.button-small {font-size: .66em!important; letter-spacing:.2em; padding: .9em 2.9em; font-weight: 700}
.centered {text-align: center}
.centered>* {margin-left: auto;margin-right: auto; text-align: center}

.items-row {list-style: none;margin: 0; padding: 0;}
.items-row li {display: inline-block; margin: 0 1em 1em}

/* she styles */
.wrp { position: relative;}

.she-logo-intext { text-transform: lowercase; font-weight: bold; letter-spacing: -.12em; display:inline-block; margin-top:-1em;font-size:1.4em;}
.iname .she-logo-intext { font-size:3em; }

.she-logo { position:relative; margin: 2em; text-align: left}
.she-logo h1 strong, .she-logo .she-under-logo strong{ position: absolute; top: 0; left: 0; text-indent: -1000px; overflow: hidden;}
.she-logo h1,.she-logo .she-under-logo { position:relative; font-size: 7.5px; letter-spacing: .3em; font-weight: 400; line-height: 1.1em}

.she-head-notify {position:absolute; top:3.2em; right:3em;}
.she-head-notify::after {content: ""; position: absolute; top: 0; left: 0; background-color: #ff003d; width: 100%; height: 100%; transform: translateZ(-15px)}

.she-pitch h2 {animation: spacing 3s 1.5s ease-out both;}
.she-pitch p { line-height: 1.7em; margin-bottom: 1.7em}
.she-pre-header {height: 461px; position: relative; border-top: 1px solid transparent; box-sizing: border-box;overflow: hidden}
.she-grid::after { content:""; background-image: url(/img/cell.png); background-position: bottom 0% center 0%; background-repeat: repeat; background-size: 16.5px 16.5px; height: calc(100% + 1px); width: 50%; bottom: 0; right: 0; position: absolute; z-index: -1; border-left: .5px solid rgba(255,25,255,.3);animation: unblur 3s ease both;}
.face-of-she::before {content: ""; position: absolute; bottom:-25px; left: 0; height: calc(100% + 26px); width: 100%; background-image: url(/img/she-face.png); background-repeat: no-repeat; background-size: auto 100%; box-sizing: border-box; background-position: center bottom; animation: unblur 3s ease both; }

.she-integr { width: 675px; height: 110px; text-align: left;  position: relative;transition:all .3s ease;}
.she-1st {background: url(/img/chat.png) 23px 33px no-repeat; background-size: 46px 37px;}
.she-1st,.she-3rd,.she-arrows,.she-circle {border: 1px solid #fff; line-height: 1em; letter-spacing: .2em; box-sizing: border-box;width: 203px; height: 103px; padding: 29px 0 0 90px; background-color: #ff003d}
.she-integr>* { position: absolute; top: 5px;left: 0;transition:all .3s ease;}
.she-1st { left: 10px;z-index: 2}
.she-2nd { width: 102px; height: 102px; background-color: #fff;left:270px; z-index: 4;}
.she-3rd {padding-left: 25px; width: 220px; left: 429px;z-index:3;}
.she-logo-red {background:#fff url(/img/she-logo-red.svg) center center no-repeat; background-size: 60px auto; }
.she-arrows {width: 70px; height: 60px; margin: 0 -15px;z-index: 1; background-color: transparent;top: 26px;}
.she-arrows::before,.she-arrows::after,.she-circle::before,.she-circle::after {content: '';position: absolute; top: -7px; left: -7px; width: 13px; height: 13px; background: url(/img/arrow.svg) no-repeat center center; background-size: auto 100%;  }
.she-arrows::before,.she-arrows::after {animation: arrow-move-right 2s forwards linear infinite;}
.she-arrows::after,.she-circle::after { top:auto; left:auto;bottom: -7px; right: -7px; transform: rotateZ(180deg); }
.she-arrows::after {animation-name: arrow-move-left}
.she-arr-1 {left: 195px;}
.she-arr-2 {left: 355px;}
.she-circle {border-radius: 50%; width: 60px; height: 60px; padding: 0; animation: arrow-rotate 3s linear infinite; top: 30px; left: 610px;z-index: 1}
.she-circle::before,.she-circle::after {top: calc(50% - 3px); transform: rotate(-90deg);}
.she-circle::after { transform: rotate(90deg);}



.solution-list { margin:2em; padding:0;}
.solution-list li {margin: 0 1em 2em; padding: 0; background-color: #fff; text-align: center; width: 115px; height: 115px; display: inline-block; background-size:60px 60px; background-position: center 14px; background-repeat: no-repeat; color: #000; font-size: 10px; box-sizing: border-box; padding-top: 90px; text-align: center; padding-top: 78px!important;}
.s-tagging {background-image: url(/img/tagging.png);}
.s-intention {background-image: url(/img/intention.png);}
.s-mood {background-image: url(/img/mood.png);}
.s-priority {background-image: url(/img/priority.png);}
.s-answer {background-image: url(/img/answer.png); }

.child-invisible>* {opacity: 0}
.animate-childs>* {animation: fadeinandscale .3s cubic-bezier(0,.5,.5,1.3) forwards;}
.animate-childs>*:nth-child(1) {animation-delay: .1s;}
.animate-childs>*:nth-child(2) {animation-delay: .2s;}
.animate-childs>*:nth-child(3) {animation-delay: .3s;}
.animate-childs>*:nth-child(4) {animation-delay: .4s;}
.animate-childs>*:nth-child(5) {animation-delay: .5s;}
.animate-childs>*:nth-child(6) {animation-delay: .6s;}
.animate-childs>*:nth-child(7) {animation-delay: .7s;}
.animate-childs>*:nth-child(8) {animation-delay: .8s;}


.she-bench {background-color: #fff; padding: 60px 40px 40px; max-width: 700px; font-size: 10px; margin: 8em auto;}
.i-rows {width:100%; background-color:#000; position: relative; height: 24px; color: #000; width: 0}
.she-ai {background-color: #ff003d; color:#ff003d; margin-bottom:0px;}
.human-oi {margin-bottom: 60px;}
.percnt, .iname { position: absolute; top: -1.5em; opacity:0; text-align: left;}
.iname {left: 0;}
.percnt {right: 0; font-size: 2em;top: -1.15em;}
.she-ai .percnt {font-weight: bold;}
.she-ai .percnt::after,.human-oi .percnt::after {content:'%';}

.animate-100 {animation: move100 1s cubic-bezier(0,.5,.5,1) both;}
.human-oi.animate-100 .iname {animation: fadein .3s .8s ease-out both;}
.human-oi.animate-100 .percnt {animation: fadein .2s .1s ease-out both;}
.animate-99 {animation: move99 1s .3s cubic-bezier(0,.5,.5,1) both;}
.she-ai.animate-99 .iname {animation: fadein .3s 1s ease-out both;}
.she-ai.animate-99 .percnt {animation: fadein .2s .3s ease-out both;}


.she-timeline-block {padding-left: 0;padding-right: 0}
.she-timeline { text-align: left; min-height: 270px; position: relative;}
.she-timeline::before {content: ""; position: absolute; border-bottom: 1px solid #000; width: 100%; left: 0; top: 50%}
.she-timeline  span {display: block;}
.she-timeline>div {border-left: 1px solid #000; display: inline-block; padding-left: 1em; width: 20%;position: relative; min-width: 180px; max-width:400px;margin-top: 1.5em}
.she-timeline span.sdate { margin-bottom: 3em}
.here-now::before{content: "we are here NOW"; position: absolute; background-color: #000; background: url(/img/now.svg) top center no-repeat; background-size: 100% 100%;  color: #fff; bottom: 120px; left: -1px;font-size: .7em; letter-spacing: .5em; padding: .2em 1em; box-sizing: border-box}
.here-now::after { content: ""; position: absolute; top: -30px;left: -1px; width: 0; height: 30px; border-left: 1px solid #000}
.she-before {}
.she-now { width: 25%!important;}
.she-then {}

.animate-child-left>* {animation: leftandfadein .3s cubic-bezier(0,.5,.5,1.3) forwards;}
.animate-child-left>*:nth-child(1) {animation-delay: .1s;}
.animate-child-left>*:nth-child(2) {animation-delay: .2s;}
.animate-child-left>*:nth-child(3) {animation-delay: .3s;}
.animate-child-left>*:nth-child(4) {animation-delay: .4s;}
.animate-child-left>*:nth-child(5) {animation-delay: .5s;}
.animate-child-left>*:nth-child(6) {animation-delay: .6s;}
.animate-child-left>*:nth-child(7) {animation-delay: .7s;}
.animate-child-left>*:nth-child(8) {animation-delay: .8s;}

.animate-child-left>*>*:nth-child(1) {animation: bottomandfadein .3s cubic-bezier(0,.5,.5,1) forwards;}
.animate-child-left>*>*:nth-child(2) {animation: topandfadein .3s cubic-bezier(0,.5,.5,1) forwards;}

.animate-child-left>*:nth-child(1)>*:nth-child(1) {animation-delay: .1s;}
.animate-child-left>*:nth-child(1)>*:nth-child(2) {animation-delay: .15s;}
.animate-child-left>*:nth-child(2)>*:nth-child(1) {animation-delay: .2s;}
.animate-child-left>*:nth-child(2)>*:nth-child(2) {animation-delay: .25s;}
.animate-child-left>*:nth-child(3)>*:nth-child(1) {animation-delay: .3s;}
.animate-child-left>*:nth-child(3)>*:nth-child(2) {animation-delay: .35s;}


.she-footer {min-height: 200px; position: relative;}
.she-footer .she-logo { position: absolute; bottom: 1em; left: 1em}
.she-footer-cc { position: absolute; bottom: 4em; left: 6em; opacity: .5; font-size: .5em; letter-spacing: .3em}

.loader {position:absolute; top:0; left:0; height:5px; width:10%; background-color:#fff; opacity:1; text-align:right; line-height:30px;transition:all 1s cubic-bezier(0,.87,.56,1);}

.popup-wrp {position:fixed; width:100%; height:100%; overflow:scroll; background-color:rgba(0,0,0,.5); /* -webkit-backdrop-filter:blur(10px);  */z-index:10000; top:0; left:0; transform: translateZ(1000px)}
.popup { background-color:#fff; padding:3em; max-width:600px; color:#ff003d; position: relative;transition:all 1s ease; animation: fadeinandscale08 .8s cubic-bezier(0,.5,.5,1.1);}

input[type=text] {width: 100%; border: none; border-bottom: 2px #bbb solid; font-family: helvetica, arial; font-size: 1em; margin: 0 0 1em 0; font-weight: 400; text-transform: uppercase; letter-spacing: .5em; padding: .3em 0; outline: none;transition:all .3s linear; background-color: #f8f8f8}
input[type=text]:focus {border-color:#ff003d; color: #ff003d;}
input[type=text]::-webkit-input-placeholder,input[type=text]::placeholder {animation: placeholder .4s cubic-bezier(0,.5,.5,1.1) backwards; color: #bbb;transition:all .3s ease}
input[type=text]+input[type=text]::placeholder {animation-delay: .1s;}
input[type=text]+input[type=text]+input[type=text]::placeholder {animation-delay: .2s;}
input[type=text]+input[type=text]+input[type=text]+input[type=text]::placeholder {animation-delay: .3s;}
input[type=text]+input[type=text]+input[type=text]+input[type=text]+input[type=text]::placeholder {animation-delay: .4s;}
input[type=text]+input[type=text]+input[type=text]+input[type=text]+input[type=text]+input[type=text]::placeholder {animation-delay: .5s;}
input[type=text]:focus::placeholder {animation-delay: 0s!important; color: #ff003d;}


label {font-size: .5em; /* color: #000; */ letter-spacing: .3em;}
.request-access .button{ font-size: .8em; padding: 1em 2em .9em; margin-top: 3em}
.popup-head {margin-bottom: 2em;}
.popup-head .she-logo-intext { position: relative; left: -3px}
.close-popup {position: absolute; top: 1em; right: 1em; width: 20px; height: 20px; cursor: pointer;transition:all .3s ease; }
.close-popup:hover {transform: rotate(90deg)}
.close-popup::after,.close-popup::before { content: ""; position: absolute; width: 1px; height: 100%; transform: rotateZ(45deg); background-color: #000;transition:all .3s ease; left:50%; top: 0;}
.close-popup::before { transform: rotateZ(-45deg);}
.close-popup:hover::after,.close-popup:hover::before { background-color:#ff003d; }


.green-ok {width:100px; height:100px; border: 4px solid #03f0bc; overflow:hidden; box-sizing:border-box; border-radius: 50%; animation: zoomandscaleandrotate .5s cubic-bezier(0,.5,.5,1.2) forwards;}
.green-ok::after,.green-ok::before { content:""; width: 4px; background-color:#03f0bc; height: 50%; position: absolute; top: 20%; left: 42%;transform: rotateZ(45deg);transform-origin: 100% 100%; animation: scale1 .5s .5s cubic-bezier(0,.5,.5,1.2) both;}
.green-ok::after {transform: rotateZ(-45deg) scaleY(.7); animation-delay: .2s; animation-name: scale07;}
.popup-success { flex-direction: column; color: #03f0bc; text-align: center}
.popup-success .green-ok {margin-bottom: 2em}
.spacing-animate {animation: spacing 1s ease forwards;}
/* .popup .green-ok {position:absolute; left:50%; top:50%;} */

.inactive {background-color: #ebebeb}
.bdisabled {background-color: #cdcdcd!important; color: #222!important; -webkit-animation: bounce-light 1.5s infinite; animation: bounce-light 1.5s infinite; background-image: none;}

span.error {background-color: #000; color: #fff; display: inline-block; padding: .2em .4em; letter-spacing: .3em; font-size: .7em; animation: error .3s ease; }
.valid {background-color: #b9ffd1!important; color: #006423;}
input[disabled] {border-color: #cdcdcd!important;background-color: #cdcdcd!important; color: #222!important;outline-width: 0;outline: none;}

span.error[for='agree'] {margin-bottom: .5em}


@keyframes unblur {
	0%		{filter: blur(5px) ; opacity:0;}
	100%	{filter: blur(0px) ; opacity:1;}
}
@keyframes spacing {
	0%		{letter-spacing:.5em; opacity:0;}
	100%	{letter-spacing:.4em; opacity:1;}
}
@keyframes arrow-move-right {
	0%		{transform: translateX(0);}
	100%	{transform:translateX(100px);}
}
@keyframes arrow-move-left {
	0%		{transform: translateX(0px) rotateZ(180deg);}
	100%	{transform:translateX(-90px) rotateZ(180deg);}
}
@keyframes arrow-rotate {
	0%		{transform: rotateZ(0deg);}
	100%	{transform:rotateZ(360deg);}
}
@keyframes move100 {
	0%		{width: 0%}
	100%	{width: 100%}
}
@keyframes move99 {
	0%		{width: 0%}
	100%	{width: 99%}
}
@keyframes fadein {
	0%		{opacity:0}
	100%	{opacity:1}
}
@keyframes fadeinandscale {
	0%		{opacity:0;transform: scale(.6)}
	100%	{opacity:1;transform: scale(1)}
}
@keyframes fadeinandscale08 {
	0%		{opacity:0;transform: scale(.8)}
	100%	{opacity:1;transform: scale(1)}
}
@keyframes heightandfadein {
	0%		{opacity:0;height: }
	100%	{opacity:1;transform: scale(1)}
}
@keyframes topandfadein {
	0%		{opacity:0;transform: translateY(-20px) }
	100%	{opacity:1;transform: translateY(0px)}
}
@keyframes bottomandfadein {
	0%		{opacity:0;transform: translateY(20px) }
	100%	{opacity:1;transform: translateY(0px)}
}
@keyframes bottomandfadein {
	0%		{opacity:0;transform: translateY(20px) }
	100%	{opacity:1;transform: translateY(0px)}
}
@keyframes leftandfadein {
	0%		{opacity:0;transform: translateX(-20px) }
	100%	{opacity:1;transform: translateX(0px)}
}
@keyframes placeholder {
	0%		{opacity:0; letter-spacing: 1em; }
	100%	{opacity:1; letter-spacing: .5em;}
}
@keyframes placeholder-mobile {
	0%		{opacity:0; letter-spacing: 1em; }
	100%	{opacity:1; letter-spacing: .3em;}
}
@keyframes scale1 {
	0%		{transform: rotateZ(45deg) translateX(0%) translateY(10%) scaleY(0); }
	100%	{transform: rotateZ(45deg) translateX(0%) translateY(0%) scaleY(1);}
}
@keyframes scale07 {
	0%		{transform: rotateZ(-45deg) scaleY(0) translateX(100%) translateY(-200%) }
	100%	{transform: rotateZ(-45deg) scaleY(.7) translateX(100%) translateY(0%)}
}
@keyframes zoomandscaleandrotate {
	0%		{transform: scale(.8) rotateZ(-20deg); opacity:0;}
	40%   {opacity: 1}
	100%	{transform: scale(1) rotateZ(0deg);opacity:1;}
}
@keyframes error {
	0%		{margin-bottom: -1%; transform: scaleY(0);}
	100%	{margin-bottom: -0%; transform: scaleY(1)}
}




@media screen and (max-width: 720px){ 
  .block {padding-left: 1em;padding-right: 1em}
  .she-timeline-block {padding-left: 0;padding-right: 0}
  .she-integr { width: 230px; height: 500px;}
  .she-1st { left: 10px; top: 0;}
  .she-2nd { left:59px; top:160px}
  .she-3rd { left: 0px; top:320px}
  .she-arrows {width: 50px; left: 80px; transform: rotateZ(90deg)}
  .she-arr-1 {top: 90px;}
  .she-arr-2 {top:270px;}
  .she-circle {top:390px; left: 79px}
  .she-timeline {padding: 2em}
  .she-timeline>div {width:30%;padding:2em 0 2em 1em ;margin: 0}
  .here-now::before{width: 90%}
  .she-timeline { flex-direction:column;}
  .she-timeline::before {border-bottom: none;border-left: 1px solid #000; width: 1px; height: 100%; left: 30%; top: 0%; display: none}
  .here-now::after { display: none;}
  .she-timeline span.sdate {margin-bottom: 1em; }
  .here-now::before {bottom: auto; top: 0px; width: 120%}
  .here-now {padding-top: 2em!important; border-left-width: 4px!important}
  .items-row li { margin-bottom:2em}
  .she-pitch h2 {font-size: 3em}
  .she-pitch p {font-size: .8em}
  .popup {padding: 2em}
  .popup .button {width: 100%; box-sizing: border-box; text-align: center}
  .popup .popup-head {margin-right: 2em}
  }
@media screen and (max-width: 550px){ 
  .iname {letter-spacing: 0.5em; }
}
@media screen and (max-width: 505px){ 
  .iname { top: -3em; margin-right: 80px;line-height: 1.35em;}
  .popup .button {letter-spacing: .3em}
  input[type=text]::-webkit-input-placeholder,input[type=text]::placeholder {letter-spacing: .3em; animation-name: placeholder-mobile;}
}
@media screen and (max-width: 370px){ 
  .iname {letter-spacing: 0.2em;}
  div.wrp { min-width: 320px} 
  .solution-list { margin: 0}
}

/* .she-pre-header { background-image: url(/img/she-face.jpg); background-position: bottom center; background-repeat: no-repeat; background-size: auto 100%; height: 461px;} */