/*
 * This file is part of the Cyclers (https://cyclers.tech)
 * Copyright (c) 2019 Umotional (https://umotional.com)
 */

 html, body, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: 'Prompt', sans-serif; font-style: normal; font-weight: normal; }

 /* 
     ~ ~ ~ Basic typography ~ ~ ~
 */
 body { background: #ffffff; }
 .pure-g { letter-spacing: initial; }
 .first-half { background: linear-gradient(180deg, #ffffff, #ffffff); }
 /* body { background: #ffffff; } */
 p { font-size: 14px; margin: 0; padding: 0; line-height: 24px; }
 .h1 { font-size: 54px; line-height: 81px; }
 .h2 { font-size: 42px; line-height: 64px; }
 .h3 { font-size: 24px; line-height: 40px; }
 .h4 { font-size: 42px; line-height: 63px; }
 .h5 {  }
 .h6 {  }
 .lead { font-size: 18px; line-height: 32px; }
 .intermezzo, .intermezzo2 { font-size: 24px; line-height: 40px; }
 .citation { font-size: 24px; line-height: 40px; }
 .intermezzo { padding: 100px 0; }
 .intermezzo2 { padding: 0 45px; }
 b, .bold { font-weight: bold; }
 i, .italic { font-style: italic; }
 .uppercase { text-transform: uppercase; }
 .weight-300 { font-weight: 300; }
 .weight-400 { font-weight: 400; }
 .weight-500 { font-weight: 500; }
 .weight-600 { font-weight: 600; }
 .text-center { text-align: center; }
 .margin-auto { margin: auto; }
 .text-left { text-align: left; }
 .text-right { text-align: right; }
 .button { font-size: 16px; line-height: 10px; border-radius: 24px; padding: 11px 35px; border: 0; }
 button.button { height: 46px; }
 .block { display: block; }
 .inline-block { display: inline-block; }
 .inline { display: inline; }
 ul, ol, li { margin: 0; padding: 0; }
 li { list-style-type: none; }
 .container { max-width: 100vw; margin: auto; overflow: hidden; }
 .column { width: 100vw; max-width: 1000px; margin: auto; }
 .large-column { width: 100vw; max-width: 1100px; margin: auto; }
 .x-large-column { width: 100vw; max-width: 1200px; margin: auto; }
 .pull-right { float: right; }
 .pull-left { float: left; }
 .relative { position: relative; }
 .absolute { position: absolute; }
 .fixed { position: fixed; }
 .pure-form input, .pure-form select, .pure-form textarea { border-radius: 0 !important; box-shadow: none !important; background-color: #F7F8F8; border: none !important; color: black; }
 .pure-form textarea, .pure-form input { font-size: 14px; padding: 7px 20px !important; }
 .pure-form textarea { padding: 16px 20px !important; }
 .pure-form input { height: 49px; line-height: 24px; }
 .pure-form label { font-size: 14px; line-height: 24px; }
 .no-decoration { text-decoration: none; }
 a:hover, a:focus, a:active { filter: brightness(125%); }
 /* a.color-white:hover, a.color-white:focus, a.color-white:active { filter: brightness(95%); } */
 .pointer { cursor: pointer; }
 .nextgen-img-2 { margin-top: 0px; }
 .nextgen-img-3 { margin-top: 70px; }
 .nextgen-imgs-container { min-height: 746px; }
 form.success input, form.success textarea, form.success select { background-color: #dfffdf; }
 form.error input, form.error textarea, form.error select { background-color: #ffdfdf; }
 form.readonly input, form.readonly textarea, form.readonly select, form.readonly button { pointer-events: none; }
 
 .container.with-map { overflow: visible; }
 
 /* 
     ~ ~ ~ Colors ~ ~ ~
 */
 .color-white { color: white; }
 .color-dark { color: #203C30; }
 .color-dark-alt { color: #446054; }
 .color-light { color: #D5E8DB; }
 .color-light-alt { color: #A4B6AF; }
 .color-primary { color: #277A3E; }
 .color-primary-alt { color: #719183; }
 .color-warning { color: #FFA901; }
 .bg-primary { background-color: #277A3E; }
 .bg-warning { background-color: #FFA901; }
 .bg-light { background-color: #D5E8DB; }
 .bg-light-alt { background-color: #A4B6AF; }
 .border-white { border: 3px solid white; }
 
 /* 
     ~ ~ ~ Buttons, shadows, borders ~ ~ ~
 */
 .border-top-1px { border-top: 1px solid #F2F5F3; }
 .border-bottom-1px { border-bottom: 1px solid #F2F5F3; }
 .only-desktop, .only-tablet, .only-mobile { display: none; }
 .badge { border-radius: 8px; padding: 3px 10px; font-size: 12px; }
 
 /* 
     ~ ~ ~ More specific elements ~ ~ ~
 */
 .triangle { right: 0; bottom: 0; }
 .learn-more-launch-demo { line-height: 45px; }
 .learn-more { margin-right: 15px; }
 .menu-item { font-size: 16px; }
 .menu-item a { padding: 20px 30px; margin: 10px 0px; line-height: 65px; }
 .menu { overflow-x: auto; max-width: 100%; white-space: nowrap; }
 .logo-hero, .logo-hero2 { margin-bottom: -30px; margin-left: -20px; }
 .logo-hero2 { margin-top: -5px; }
 .logo { font-size: 20px; padding: 30px 0; }
 .nav { height: 90px; }
 .row-why { padding-left: 185px; }
 .row-why:first-of-type { margin-top: 18px; }
 .why-bullet { left: calc(185px - 40px - 23px); top: 0; z-index: 1; }
 .why-map { left: calc(185px - 60px - 23px); top: 0; }
 .side-map { right: 0; margin-top: -100px; z-index: -1; }
 .nextgen-item, .sdk-item { padding: 14px 45px 14px 45px; overflow: hidden; }
 .nextgen-item.active, .sdk-item.active { background-color: white; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.05); }
 .nextgen-item.active:before, .sdk-item.active:before { content: ""; position: absolute; top: -63px; right: -63px; height: 100px; width: 100px; background: #2A843C; transform: rotate(45deg); }
 .sdk-item.active:before { right: initial; left: -63px; }
 .demo-banner { padding: 65px 0; background-color: rgba(42, 132, 60, 0.9); overflow: hidden; }
 .launch-demo-wrapper { margin: 35px 0 0 45px; }
 .launch-demo svg { margin: 0 0 0 15px; top: 3px; }
 .green-map { top: -28px; left: calc(50% + 220px); }
 .sdk-img { margin-right: 0px; float: right; }
 .vehicles { padding: 75px 50px; white-space: nowrap; overflow-x: auto; }
 .vehicles::-webkit-scrollbar { width: 0 !important }
 .vehicles { overflow: -moz-scrollbars-none; }
 .vehicles { -ms-overflow-style: none; }
 .data-img:not(:first-of-type) { margin-left: 15px; }
 .data-img:not(:last-of-type) { margin-right: 15px; }
 .data-img.active { background-color: rgba(42, 132, 60, 0.9); border-radius: 24px; }
 .data { margin: 30px 0 0 60px; }
 .reference { margin-left: 60px; }
 .people { margin: 20px 0 0 0; }
 .people .person:not(:last-of-type) { margin-right: -35px; }
 .people .name { font-size: 16px; line-height: 24px; top: -18px; left: 15px; }
 .tab { font-size: 24px; line-height: 40px; padding: 40px 26px; /*width: 25%;*/ }
 .paper { background-color: white; box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.05); padding: 60px 80px; max-width: 1000px; margin: auto; }
 .segment { padding: 0 60px 0 80px; }
 .segment-first { padding: 0 60px 0 80px; }
 .segment-first p { font-size: 16px; }
 .segment-bullet { left: 25px; top: 0; z-index: 1; }
 .segment-map { left: 0; top: 0; }
 .segment-img { margin-left: -30px; }
 .row-quickstart { padding-left: 185px; }
 .row-quickstart:first-of-type { margin-top: 18px; }
 .quickstart-bullet { left: calc(185px - 40px - 23px); top: -5px; z-index: 1; }
 .quickstart-map { left: calc(185px - 60px - 25px); top: -15px; }
 .quickstart-num { font-size: 54px; }
 .contact-us-launch-demo { line-height: 45px; }
 .contact-us { margin-right: 15px; }
 .source-code { top: 20px; left: -760px; z-index: -1; }
 .contact { padding: 85px 105px; overflow: hidden; }
 .contact:before { content: ""; position: absolute; bottom: -120px; right: -120px; height: 200px; width: 200px; background: white; transform: rotate(45deg); }
 .form { padding: 60px 0px 60px 60px; }
 .form input, .form textarea { width: 100%; }
 .form textarea { height: 100px; }
 .form-box { padding: 10px; }
 .form-box.only-horizontal { padding: 0 10px; height: 20px; }
 .send-message { padding: 11px 30px; }
 .info-text { font-size: 14px; line-height: 24px; }
 .form-bottom { padding: 7px 0 0 10px; }
 .footer { padding: 70px 85px; margin: 70px 0; background-color: #0C3D16; }
 .footer-p { font-size: 24px; line-height: 40px; }
 .umo { font-size: 20px; margin-left: 8px; }
 .footer-map { right: 0; top: 70px; margin-top: -15px; z-index: 10; }
 footer { overflow: hidden; }
 
 .hexagon { position: relative; width: 28px;  height: 16.17px; background-color: #26763b; margin: 8.08px 0; text-align: center; color: white; display: inline-block; }
 .hexagon:before,
 .hexagon:after { content: ""; position: absolute; width: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; }  
 .hexagon:before { bottom: 100%; border-bottom: 8.08px solid #26763b; margin-left: -12px; }  
 .hexagon:after { top: 100%; width: 0; border-top: 8.08px solid #26763b; margin-left: -16px; }
 
 .tab:after { content: " "; width: 20px; height: 20px; border-radius: 10px; display: inline-block; position: absolute; left: calc(50% - 10px); bottom: -10px; }
 .tab.color-primary:after { background-color: #277A3E; }
 .tab:not(.color-primary):after {  background-color: #f7f7f7;}
 .tab:not(.color-primary):hover { color: #277A3E; }
 
 .footer:after { content: " "; position: absolute; left: calc(100% - 1px); top: 0; bottom: 0; width: 1000px; background-color: #0C3D16; display: inline-block; }
 
 /* <data box - comparison> */
 
 .data-box { width: 134px; height: 147px; border-radius: 24px; background-color: #F3F7F5; }
 .data-box { vertical-align: top; margin-top: 42px; }
 .data-box .title { font-size: 16px; color: #5F7967; margin-top: 30px; }
 .data-box .progress { background: rgba(255, 255, 255, 0.3); border-radius: 3px; width: 100px; height: 4px; margin-top: 8px; margin-bottom: 13px; border-radius: 3px; overflow: hidden; }
 .data-box .progress .filler { height: 100%; background: linear-gradient(90.29deg, #FFB801 49.91%, #FFCD01 115.93%); }
 .data-box .divider { border-bottom: 1px dashed #E6EEE9; width: 100%; height: 0px; }
 .data-box .perc { color: #5F7967; font-size: 20px; margin-top: 16px; }
 .data-box:not(:first-of-type) { margin-left: 15px; }
 .data-box:not(:last-of-type) { margin-right: 15px; }
 
 .data-box.highlighted { margin-top: 0; background-color: rgba(42, 132, 60, 0.9); height: 188px; background: linear-gradient(180deg, rgb(58, 131, 72) 32.31%, rgb(48, 118, 62) 71.97%); }
 .data-box.highlighted .title { color: white; margin-top: 12px; }
 .data-box.highlighted .progress { margin-top: 10px; margin-bottom: 11px; }
 .data-box.highlighted .perc { color: white; margin-top: 12px; }
 .data-box.highlighted .divider { border-color: #33944E; }
 .data-box.highlighted .cycler-wrapper { height: 55px; overflow: hidden; margin-top: 10px; }
 /* .data-box.highlighted .inner { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32.31%, rgba(3, 52, 17, 0.17) 71.97%); } */
 
 /* Analytics-specific */
 body.analytics .row-quickstart { padding-left: 0; }
 body.analytics .with-toggle { padding-right: 70px; }
 body.analytics .toggle { right: 0; bottom: 13px; z-index: 10; padding: 10px; font-size: 12px; font-weight: bold; /*background-color: white;*/ }
 body.analytics .expandable.expanded .toggle .plus { display: none; }
 body.analytics .expandable:not(.expanded) .toggle .minus { display: none; }
 body.analytics .expandable:not(.expanded) { cursor: pointer; }
 body.analytics .expandable .toggle .plus, 
 body.analytics .expandable .toggle .minus { padding: 5px 25px; font-size: 13px; }
 
 body.analytics .modal { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; z-index: 999; }
 body.analytics .modal img { width: auto; height: auto; max-width: 80%; max-height: 90%;  }
 body.analytics .modal .modal-close { position: absolute; right: 20px; top: 10px; color: white; font-size: 30px; }
 
 body.analytics .expandable { padding: 30px 0; }
 /* body.analytics .expandable:not(.first) { border-top: 1px solid #E2EFE6; } */
 body.analytics .expandable:not(.expanded) .inner { max-height: 115px; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.05); }
 body.analytics .expandable:not(.expanded) .img-title { display: none; }
 body.analytics .img-title { font-weight: 500; font-size: 12px; line-height: 25px; padding-left: 40px; }
 body.analytics .img-title .line { left: 0; top: 0; width: 2px; height: 50px; }
 body.analytics .expandable-pic { border-radius: 10px; margin-top: 29px; overflow: hidden; }
 body.analytics .expandable:not(.expanded) .expandable-pic { height: 86px; }
 body.analytics .expandable:not(.expanded):not(:hover) .expandable-pic { filter: grayscale(100%); }
 body.analytics .expandable:not(.expanded) .expandable-pic img { transform: translateY(calc(86px/2 - 50%)); }
 /* body.analytics .expandable:not(.expanded) .expandable-pic:hover { filter: grayscale(0%); } */
 
 /* body.is-not-scrolled nav.nav .logo { display: none; } */
 body nav.nav { position: fixed; top: 0; left: 0; right: 0; height: auto; background-color: white; box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.05); z-index: 100; }
 body nav.nav .logo { position: absolute; left: 5px; top: calc(50% - 21px); padding: 10px; font-size: 20px;  }
 
 body.scroll-down .primary-menu { display: none; }
 body.scroll-up .secondary-menu { display: none; }
 .menu-item-bradius a { border-radius: 0 0 0 24px; }
 body header { padding-top: 60px; }
 
 /* Cyclers Motivate 0.0.1 */
 .apps-wrapper {  }
 .apps-wrapper .one-app { padding: 20px 20px; border: 1px dotted red; width: 100px; }
 img.disciplines, img.cloud, img.flow { width: 100%; height: auto; }
 img.flow { padding: 30px 30px; }
 img.flow { width: 100%; height: auto; max-width: calc(100vw - 2 * 30px); padding: 30px 30px; }
 .one-concept { padding: 10px 20px; }
 .one-concept b { margin: 10px 0 10px 0; }
 img.apps { max-width: 100%; width: 400px; }
 a.button { white-space: nowrap; }
 .button.border-white { padding: 8px 30px; }
 
 @media screen and (max-width: 1024px) {
     .expandable-pic { text-align: center; }
     .expandable-pic img { width: calc(100% - 20px); height: auto; }
 }
 @media screen and (max-width: 768px) {
     body.analytics .expandable:not(.expanded) .expandable-pic { display: none; } 
     /* body.analytics .toggle { right: 5px; top: 35px; } */
     /* body.analytics .expandable.expanded .toggle { right: 5px; top: 25px; } */
     body.analytics .img-title { padding-left: 15px; }
     body.analytics .with-toggle { padding-right: 0; }
 }
 
 @media screen and (min-width: 1920px) {
     .container { max-width: 1920px; overflow: visible; }
     .footer-map { top: 0; }
 }
 @media screen and (min-width: 1660px) {
     .green-map { left: initial; right: 0; }
 }
 @media screen and (min-width: 1280px) {
     .column { width: 1000px; margin: auto; }
     .large-column { width: 1100px; margin: auto; }
     .x-large-column { width: 1200px; margin: auto; }
 }
 
 @media screen and (max-width: 1279px) {
     .form { padding: 60px; }
     .side-map { display: none; }
     .companies-wrapper { overflow-x: auto; }
     .nextgen-imgs-container, .sdk-imgs-container { text-align: center; }
     .sdk-img { float: none; }
 }
 @media screen and (max-width: 1279px) {
     .data { text-align: center; }
     .footer-map { width: 400px; height: auto; top: 76px; }
 }
 @media screen and (min-width: 1024px) {
     .only-desktop { display: initial; }
     div.only-desktop { display: block; }
     .first-slide { min-height: 700px; display: flex; align-items: center; justify-content: center; }
     body.is-not-scrolled nav { position: absolute; top: 0; right: 0; }
     body header { padding-top: 0; }
 }
 @media screen and (max-width: 1023px) {
     .tablet-center { text-align: center; }
     .only-tablet { display: initial; }
     div.only-tablet { display: block; }
     .banner1 { padding: 0 80px 0 30px; }
     .tablet-padding { padding-left: 20px; padding-right: 20px; }
     .nextgen-img { max-width: 500px; height: auto; }
     .nextgen-imgs-container { min-height: initial; }
     .intermezzo2 { padding-right: 100px; }
     .data { margin: 30px 0 0 0; }
     .tab { padding: 10px 10px; font-size: 20px; width: 100%; text-align: center; }
     .tab:after { display: none; left: 35px; top: 20px; }
     .footer-map { display: none; }
     .source-code { display: none; }
     .send-message { margin-left: 20px; }
     .logo-hero { margin-left: 0; }
     .segment-img { margin-left: 0; }
     .green-map { display: none; }
 }
 @media screen and (max-width: 850px) {
     .menu-item { font-size: 14px; }
     .menu-item a { padding: 20px 20px; margin: 10px 0px; line-height: 65px; }
     body.is-scrolled nav.nav .logo { padding: 15px 0 15px 30px; }
 }
 @media screen and (max-width: 750px) {
     body.is-scrolled nav.nav .logo { display: none; }
     .data-img { margin: 5px 10px !important; }
     .data-box { margin: 5px 10px !important; }
 }
 @media screen and (max-width: 600px) {
     .menu-item { font-size: 11px; display: inline-block; }
     .menu-item a { padding: 10px 10px; line-height: 50px; }
 }
 @media screen and (max-width: 500px) {
     .menu-item { font-size: 9px; }
     .menu-item a { padding: 10px 5px; line-height: 30px; }
     .only-mobile { display: initial; }
     div.only-mobile { display: block; }
     .only-tablet { display: none; }
     .h1 { font-size: 44px; line-height: 71px; }
     .h2 { font-size: 32px; line-height: 54px; }
     .h3 { font-size: 20px; line-height: 30px; }
     .h4 { font-size: 32px; line-height: 53px; }
     .learn-more { margin-right: 0; }
     .row-why, .row-quickstart { padding-left: 65px; padding-right: 5px; }
     .why-bullet, .quickstart-bullet { left: 12px; top: -4px; }
     .why-map, .quickstart-map { left: 2px; }
     .nextgen-img, .nextgen-img-alt { max-width: 100vw; height: auto; }
     .reference { margin-left: 10px; }
     .contact { padding: 25px 25px; }
     .footer { padding: 40px 40px; margin-bottom: 0; margin-top: 25px; }
     .paper { padding: 20px 0px; }
     .segment-img { max-width: 100vw; height: auto; }
     .segment { padding: 0 5px 0 45px; }
     .segment-bullet { left: -10px; }
     .segment-content { width: calc(100% - 30px); padding-left: 15px; }
     .segment-map { left: -20px; }
     .contact-us-launch-demo { padding: 0 !important; }
     .contact-us { margin-right: 0; }
     .form { padding: 40px 20px; }
     .launch-demo-1, .launch-demo-2 { display: block; }
     .banner1 { padding: 0 20px 0 20px; }
     .triangle { right: -65px; bottom: -65px; }
     .intermezzo { padding: 50px 0; }
     .mobile-left { text-align: left; }
     .mobile-left-padding-15 { padding-left: 15px; }
     .nextgen-item, .sdk-item { padding: 14px 15px 14px 15px; }
     .intermezzo2 { padding: 0 20px; }
     /* .green-map { top: 302px; left: calc(50% + 220px); z-index: 0; width: 450px; height: auto; } */
     .info-text { font-size: 12px; line-height: 24px; position: relative; top: -2px; opacity: .9; }
     .sdk-item.active:before { opacity: .5; }
     .segment-first { padding: 0 30px 0 30px; }
     .tab { padding: 10px 0px; }
     .menu-item-bradius a { border-radius: 0 0 0 0px; }
     .launch-demo-wrapper { margin: 0; text-align: center; }
     .launch-demo-wrapper a.button { display: inline-block; text-align: center; margin: 10px 0 10px 0; }
 }
 @media (max-width: 400px) {
     .logo { display: none; }
 }