@import url('base.css');

body {
    font-feature-settings: kern;
    direction: ltr;
    font-synthesis: none;
    background: #efefef;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh
}
a:hover {
    text-decoration: none;
    border-bottom: 1px solid
}
hr {
    border-top: 1px solid #efefef;
    margin: 6em;
    margin-top: 3em;
    margin-bottom: 2em;
}

ul {
    list-style: none;
    padding: 0;
}


section {
    background: #fff;
    padding: 5em;
    padding-top: 2em;
    text-align: center;
    margin-top: 1em
}

strong {
    font-weight: bold
}

h1 {
    font-size: 3em;
    font-weight: 300;
    line-height: 1.04167;
    letter-spacing: .006em;
    margin-top: .7em;
    margin-bottom: 1em
}
h2 {
    line-height: 1.2em;
}

h3 {
    text-transform: uppercase;
    font-weight: 800;
    color: #5d5d5d;
    text-align: center;
    margin-bottom: 1em;
    letter-spacing: 0.05em;
    word-spacing: 0.5em;
}

h3.assistant::after {
    background: url('../images/assistant.png');
    background-size: cover;
    display: block;
    width: 100px;
    height: 100px;
    content: '';
    margin: auto;
}

h3.terra::after {
    background: url('../images/terra_.png');
    background-size: cover;
    display: block;
    width: 100px;
    height: 100px;
    content: '';

    margin: auto;
}

h1.title {
    width: 365px;
    margin: auto;
    line-height: 1em;
    text-align: right;
}
h1.title span {
    display: block;
    font-size: 0.5em;
    text-align: right;
    margin-top: 0.5em;
}

h2.wow {
    font-size: 3em;
    font-weight: 100;
    text-align: center
}

#zaz--app-navbar-container {
    width: 100%;
    background: #ff7212;
    height: 42px;
    text-align: center;
}

#zaz--app-navbar-container .logo-terra {
    width: 85px;
    height: 25px;
    display: inline-block;
    margin-top: 5px;
    background-image: url('data:image/png;base64,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');
    background-size: 100% 100%;
    text-indent: -99999px;
}

#zaz--app-navbar-container .logo-terra:hover {
    border-bottom: 0px;
}

.header img, .header .title {
    opacity: 0;
    animation-duration: .6s;
    animation-name: intro;
    animation-timing-function: cubic-bezier(0.71,-0.24, 0.18, 0.91);
    animation-fill-mode: forwards;
}
.header .title {
    animation-delay: 300ms
}

.call {
    font-weight: 100;
    font-size: 1.5em;
    margin-top: 1em;
    line-height: 1.3em;
}
.center {
    text-align: center
}
.know {
    display: flex;
    flex-flow: row;
    align-content: space-between;
    margin: auto;
    margin-top: 6em;
    text-align: left;
    max-width: 1280px;
}
.know .step {
    flex-grow: 1;
    flex-basis: 0;

    margin-right: 3em;
}
.step.middle {
    border-left: 1px solid #dee1e4;
    margin-right: 0;
    padding-left: 3em;
}
.end {
    margin-left: 0;
    margin-right: 0 !important;
}
.badge {
    margin: 5px;
    display: inline-block;
}

.user-request {
    display: inline-block;
    color: #929292;
    letter-spacing: 0.05em;
    font-weight: 300;
    line-height: 1.1em;
    /* font-size: 1em; */
    /* font-size: 0.9em; */
    /* padding: 5px 15px; */
    /* border-radius: 1em; */
    text-align: left;
    margin-bottom: 1em;
    quotes: "“" "”" "‘" "’";
}

.user-request:before {
    content: open-quote;
    font-size: 2em;
    color: #a5a5a5;
    font-family: serif;
    margin-right: 0.2em;
    display: inline-block;
    transform: translateY(0.2em);
}
.user-request:after {
    content: close-quote;
    font-size: 2em;
    color: #a5a5a5;
    font-family: serif;
    margin-left: 0.2em;
    display: inline-block;
    transform: translateY(0.2em);
}

.prediction {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    /* place-content: end ; */
    margin-top: 1em;
}
.prediction .text {
    padding-left: 2em;
    text-align: left;
}

section.even {
    background: #fbfbfb;
}
.conversation {
    display: flex;
    max-width: 1280px;
    margin: auto;
}
.conversation>div {
    flex-grow: 1;
    flex-basis: 0;
}

#phone {
    margin-left: 0;
}


a.replay {
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.phone {
    width: 300px;
    height: 700px;
    background-image: url('../images/iphone.png');
    background-position: bottom, left -120px;
    background-size: cover;
    position: relative;
    margin: auto;
}

.phone.angle {
    background-image: url('../images/mi-angle-2.png');
    perspective(1250);
    width: 800px;
    height: 370px;
    z-index: 10;
}

img.angle {
    transform: translateX(-20px) translateY(-818px) rotateY(8deg) rotateX(73deg) rotateZ(40deg);
}
.redmi {
    /* transform: translateY(100px); */
    background-image: url('../images/redmi.png');
    display: block;
    width: 300px;
    height: 550px;
    margin: auto;
}
.redmi video {
    width: 235px;
    height: 417px;
    transform: translate(2px, 60px);
}
.preview {
    display: block;
    width: 250px;
    flex-shrink: 0;
}

.screen {
    font-size: 0.9em;
    line-height: 1.1em;
    position: relative;
    overflow: hidden;
    background: #fff;
    /* display: flex; */
    flex-direction: column;
    border: 1px solid #eaeaea;
    padding: 0px 0px 10px 0px
}
.side {
    flex-grow: 2 !important;
    margin-left: 3em;
}
.phone .screen {
    border: none;
    top: 95px;
    height: 410px;
    width: 264px;
    left: 16px;
}

.dialog {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: 1em;
    margin-left: 10px;
    margin-right: 10px;
}
.dialog .card {
    border: 1px solid #edf0ed;
    margin-top: 1em;
}
.dialog .card .text {
    line-height: 1.1em;
    padding: 1em 0.7em;
}
.dialog .card h2 {
    font-size: 1em;
    margin-bottom: 0;
}
.dialog .card span {
    font-size: 0.8em;
    color: #929292;
}
.dialog .card p {
    font-size: 0.9em;
    margin-top: 0.5em;
    line-height: 1.3em;
}

.dialog .card .image {
    background: #edf0ed;
    text-align: center;
}

.dialog-bot .bubble {
    margin-left: 3em;
    border: 1px solid #edf0ed;
}

.dialog-bot .bubble::before {
    position: absolute;
    content: '';
    transform: translate(-3.8em, -0.35em);
    background-image: url('../images/terra.png');
    background-size: cover;
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    vertical-align: middle;
    margin-right: 0.4em;
}
.dialog-user {
    text-align: right;
    flex-direction: row-reverse;
}

.dialog-user .bubble {
    background: #edf0ed
}
.dialog .bubble {
    font-size: 0.9em;
    max-width: 195px;
    padding: 6px 12px;
    /* border: 1px solid #edf0ed; */
    border-radius: 1em;
    display: inline-block;
    vertical-align: middle
}


.anim {
    transform: translateY(600px);
    opacity: 0;
}

.seq-1 { animation-delay: 0.5s }
.seq-1-5 { animation-delay: 0.8s }
.seq-2 { animation-delay: 1.5s }
.seq-3 { animation-delay: 1.8s }
.seq-4 { animation-delay: 2.3s }


.visible .seq-1,
.visible .seq-1-5,
.visible .seq-2,
.visible .seq-3,
.visible .seq-4 {
    opacity: 1;
    animation-duration: .6s;
    animation-name: slidein;
    animation-timing-function: cubic-bezier(0.21, 1.03, 0.82, 0.98);
    animation-fill-mode: forwards;
}

footer {
    /* background: #8f9399; */
    background: #d7d7d7;
    color: #444;
    padding: 3em 1em 6em;

}

footer a {
    color: #444;
}

footer a:hover {
    text-decoration: none;
    color: #222
}

footer ul.menu {
    margin: auto;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    columns: 3;
    max-width: 800px;
}

footer ul.menu li {
    padding: 0.3em;
}
footer ul.menu li.divider {
    background: #fff;
}

@keyframes intro {
    from {
        transform: translateY(70px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slidein {
    from {
        transform: translateY(300px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


@media(max-width:736px) {
    .text {
        text-align: justify
    }
    section {
        padding: 1em;
        padding-bottom: 3em
    }
    h1 {
        font-size: 2.3em
    }
    h1.title {
        width: 280px;
    }
    footer {
        margin-top: 1em
    }

    #mi-angle {
        width: 600px;
        height: 279px;
    }
}

@media(max-width:415px) {
    section {
        padding: 1em;
        padding-bottom: 2.5em
    }
    .know .step.middle {
        margin-left: 0;
        padding-left: 0;
        border: 0
    }
    .conversation {
        flex-direction: column-reverse;
    }
    .conversation .prediction {
        flex-direction: column;
    }
    .conversation .prediction .text {
        padding-left: 0;
    }
    .conversation .phone {
        margin-top: 2em;
        border-top: 1px solid #efefef;
    }
    .conversation>div {
        margin: auto
    }
    .conversation .preview {
        margin: auto
    }
    h2.wow {
        font-size: 1.6em;
        font-weight: 300;
    }
    #mi-angle {
        width: 380px;
        height: 176px;
    }
    .step {
        margin-right: 0 !important
    }
    .middle {
        margin: 0em;
        margin-top: 2em
    }
    .end {
        margin-left: 0
    }
    footer ul.menu {
        columns: 2;
    }
    .know {
        flex-flow: column;
    }

}
@media(max-width:375px) {
    #mi-angle {
        width: 320px;
        height: 148px;
    }
}
@media(max-width:360px) {
    #mi-angle {
        width: 250px;
        height: 116px;
    }
}