/* notebooks landing page callout styles.

   developer:   tajudeen
   requires:    /notebooks/css/notebook.css.fr, 
                /common/framework/css/framework.fr.css
   ========================================================================== */

:root {
    --arrow-right-gap: -17px;
    --arrow-left-gap: 4px;
}
html {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.pointer {
    border-top: 2px #008bad solid;
    position: absolute;
    z-index: 999;
    width: 2.6875rem;
}
.pointer.arrow-right:after {
    background-image: url(/notebooks/img/arrowhead-right.svg);
    right: -9px;
    top: -7px;
    background-size: 10px 12px;
    content: ' ';
    height: 12px;
    position: absolute;
    width: 10px;
    z-index: 999;
}
.pointer.arrow-left:after {
    background-image: url(/notebooks/img/arrowhead-up.svg);
    left: -9px;
    top: -6px;
    background-size: 10px 10px;
    content: ' ';
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 999;
    transform: rotate(270deg);
}
#how-notebooks-work .pointer.pointer-input {
    right: 94.9%;
    top: 4%;
    width: 6%;
}
#how-notebooks-work .pointer.pointer-output {
    right: 94.9%;
    top: 5.055%;
    width: 6%;
}
#how-notebooks-work .pointer.pointer-inout {
    top: 4.5%;
    left: 96.5%;
    width: 4%;
    right: 0;
}
#how-notebooks-work .pointer.pointer-r-resize {
    right: 88.5%;
    top: 24.2%;
    width: 12.5%;
}
#how-notebooks-work .pointer.pointer-singlequote {
    right: 93.5%;
    top: 35.5%;
    width: 7%;
}
#how-notebooks-work .pointer.pointer-chatassist {
    right: 93.5%;
    top: 37.8%;
    width: 7%;
}
#how-notebooks-work .pointer.pointer-codefrom {
    right: 94%;
    top: 48.2%;
    width: 7%;
}
#how-notebooks-work .pointer.pointer-realtime {
    right: 89.5%;
    top: 78.9%;
    width: 11%;
}
#how-notebooks-work .pointer.pointer-chatinput {
    top: 35.5%;
    left: 92.5%;
    width: 7%;
    right: 0;
}
/* ===================================== */
#how-notebooks-work .feature-main-l .shift-enter {
    padding: 11px 14px 11px 14px;
    height: auto;
    width: auto;
    max-width: 116px !important;
}
#how-notebooks-work .feature-main-l .shift-enter, 
#how-notebooks-work .feature-main-l .code-note {
    border-radius: 9px;
    border: 1px solid #E5E5E5;
    background: #f5f5f5;
    font-size: 0.8125rem;
    font-weight: 400;
    text-align: center;
    max-width: 201px;
}
#how-notebooks-work .feature-main-l .code-note {
    color: #646464;
    padding: 11px 14px;
}

#how-notebooks-work .shift-enter p {
    line-height: 1.2;
}

#how-notebooks-work .shift-enter p:last-of-type {
    margin: 0 0 0.3125rem;
}

#how-notebooks-work .shift-enter > img {
    height: auto;
    width: 95%;
}
#how-notebooks-work .shift-enter p,
#how-notebooks-work .feature-main-l .shift-enter {
    color: #646464 
}
.feature-main-l .text,
.feature-main-r .text {
    color: #3187B4;
    font-size: 0.875rem;
    font-weight: 600;
}
.feature-main-l, .feature-main-r {
    position: relative;
}
.feature-main-l > div,
.feature-main-r > div {
    position: absolute;
}
.feature-main-l .text {
    text-align: right;
    margin-right: 12px;
}
.feature-main-r .text {
    text-align: left;
    margin-left: 12px;
}

/* ==========================================================================
    How Notebooks Work
   ========================================================================== */

#how-notebooks-work .text.real-time {
    top: 78.1%;
    max-width: 170px;
}
#how-notebooks-work .code-note {
    top: 72.8%;
/*    left: 21px;*/
    width: 158px;
}
#how-notebooks-work .text.code-from {
    top: 47.455%;
    max-width: 195px;
}
#how-notebooks-work .text.chat-assist {
    top: 37.1%;
    max-width: 347px;
}
#how-notebooks-work .text.single-quote {
    top: 34.69999%;
    max-width: 194px;
}
#how-notebooks-work .text.rotate-resize {
    top: 23.467888%;
    max-width: 130px;
/*    left: 75px;*/
}
#how-notebooks-work .shift-enter {
    top: 6%;
}
#how-notebooks-work .text.output-text {
    top: 4.66%;
    right: 0%;
}
#how-notebooks-work .text.input-text {
    top: 3.56%;
    right: 0%;
}
#how-notebooks-work .text.chat-input {
    top: 34.6999%;
    max-width: 145px;
}
#how-notebooks-work .text.in-out {
    top: 3.69%;
    max-width: 126px;
}

/* ==========================================================================
    Features
   ========================================================================== */

#features .pointer.pointer-visualization {
    top: 96.55%;
    width: 12%;
    left: 88%;
    right: 0;
}
#features .pointer.pointer-mathematica {
    top: 76.2%;
    width: 59%;
    left: 41%;
    right: 0;
}
#features .pointer.pointer-typing {
    top: 51.8%;
    width: 52%;
    left: 48.5%;
    right: 0;
}
#features .pointer.pointer-hovering {
    top: 54.25%;
    width: 56%;
    border-left: 2px #008bad solid;
    height: 0.5%;
    left: 44.4%;
    right: 0;
}
#features .pointer.pointer-type {
    top: 46.65%;
    width: 70%;
    border-left: 2px #008bad solid;
    height: 1%;
    left: 29.9%;
    right: 0;
}
#features .pointer.pointer-type.arrow-left:after {
    left: -5.888888px;
    top: 85%;
    transform: rotate(180deg);
}
#features .pointer.pointer-hovering.arrow-left:after {
    left: -5.888888px;
    top: 69%;
    transform: rotate(180deg);
}
#features .pointer.pointer-closed {
    top: 31.5%;
    width: 6%;
    left: 94%;
    right: 0;
}
#features .pointer.pointer-structure {
    top: 18.56%;
    width: 49%;
    left: 51%;
    right: 0;
}
#features .pointer.pointer-cell {
    top: 2.9%;
    width: 4%;
    left: 96.2%;
    right: 0;
}
#features .pointer.pointer-narrative {
    top: 6.63%;
    width: 10%;
    right: 90.5%;
}
#features .pointer.pointer-builtin {
    top: 9%;
    width: 15%;
    right: 86%;
}
#features .pointer.pointer-desc {
    top: 17.95%;
    width: 11%;
    right: 90%;
}
#features .pointer.pointer-interactive {
    top: 32.25%;
    width: 11%;
    right: 89.5%;
}
#features .pointer.pointer-enable {
    top: 46.23%;
    width: 11%;
    right: 89.4%;
}
#features .pointer.pointer-millions {
    top: 48.46%;
    width: 10.5%;
    right: 90%;
}
#features .pointer.pointer-info.arrow-right {
    top: 57.2%;
    width: 12%;
    right: 88.5%;
}
#features .pointer.pointer-translate {
    top: 78.15%;
    width: 20%;
    right: 80.5%;
}
#features .pointer.pointer-instant {
    top: 84.4%;
    width: 5%;
    right: 95%;
}
#features .text.input-narrate {
    top: 6.45%;
}
#features .text.builtgraphics {
    top: 8.6%;
    max-width: 155px;
}
#features .text.describe {
    top: 17.58%;
    max-width: 170px;
}
#features .text.createinteractive {
    top: 31.7%;
    max-width: 188px;
}
#features .text.enabler {
    top: 46.05%;
    max-width: 184px;
}
#features .text.computable {
    top: 48%;
    max-width: 184px;
}
#features .text.information {
    top: 56.6%;
    max-width: 186px;
}
#features .text.translate {
    top: 77.8%;
    max-width: 177px;
}
#features .text.instantly {
    top: 84%;
    max-width: 146px;
}
#features .text.instanta {
    top: 96.2%;
    max-width: 150px;
}
#features .text.mathematicatype {
    top: 75.8%;
    max-width: 160px;
}
#features .hovering {
    top: 53.8%;
    max-width: 149px;
}
#features .typeimg, #features .typingImg {
    border: 1px solid #E5E5E5;
    background: #f5f5f5;
    max-width: 201px;
    padding: 11px 14px;
    border-radius: 9px;
}
#features .typingImg {
    max-width: 210px;
    height: auto;
    top: 55.35%;
}
#features .typingImg > * {
    color: #646464;
    font-size: 0.8125rem;
    font-weight: 400;
}
#features .typeimg {
    top: 47.4%;
    height: auto;
}
#features .text.typingfunction {
    top: 51.4%;;
    max-width: 160px;
}
#features .text.typed {
    top: 46.3%;
    width: 181px;
    max-width: 100%;
}
#features .text.closedcell {
    top: 31.15%;
    max-width: 145px;
}
#features .text.structureddata {
    top: 18%;
    max-width: 170px;
}
#features .text.cellbracket {
    top: 2.554%;
    max-width: 133px;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */


/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
    /*=========================== #how-notebooks-work */
    img.notebook-img {
        width: 689px;
    }
    .feature-main-l .text, .feature-main-r .text {
        font-size: 0.775rem;
    }
    #how-notebooks-work .feature-main-l .shift-enter, 
    #how-notebooks-work .feature-main-l .code-note {
        font-size: 0.7125rem;
    }
    #how-notebooks-work .text.single-quote, 
    #how-notebooks-work .text.chat-assist {
        font-size: 11px !important;
    }
    *=========================== #features */
    .text.typed {
        top: 46.5%;
        max-width: 142px;
    }

}

/* styles for large screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    #how-notebooks-work .feature-main-l .shift-enter {
        font-size: .875rem;
        padding: 5px 7px 2px 7px;
    }
}