echoIP/assets/css/main.css

.mapboxgl-ctrl button:not(:disabled):hover {
    background-color: rgba(0, 0, 0, .05)
}

.mapboxgl-ctrl-group button:focus:focus-visible {
    box-shadow: 0 0 2px 2px #0096ff
}

.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
    box-shadow: none
}


/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */

.button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.button,
.input {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 1rem;
    height: 2.5em;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 1.5;
    padding-bottom: calc(.5em - 1px);
    padding-left: calc(.75em - 1px);
    padding-right: calc(.75em - 1px);
    padding-top: calc(.5em - 1px);
    position: relative;
    vertical-align: top
}

.button:active,
.button:focus,
.input:active,
.input:focus {
    outline: 0
}

body,
h3,
html,
p {
    margin: 0;
    padding: 0
}

h3 {
    font-size: 100%;
    font-weight: 400
}

button,
input {
    margin: 0
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*,
::after,
::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td {
    padding: 0
}

td:not([align]) {
    text-align: inherit
}

html {
    background-color: #fff;
    font-size: 14px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body,
button,
input {
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

body {
    color: #4a4a4a;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5
}

table td {
    vertical-align: top
}

table td:not([align]) {
    text-align: inherit
}

.button {
    background-color: #fff;
    border-color: #dbdbdb;
    border-width: 1px;
    color: #363636;
    cursor: pointer;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: calc(.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(.5em - 1px);
    text-align: center;
    white-space: nowrap
}

.button:hover {
    border-color: #b5b5b5;
    color: #363636
}

.button:focus {
    border-color: #3273dc;
    color: #363636
}

.button.is-focused:not(:active),
.button:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25);
    box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25)
}

.button:active {
    border-color: #4a4a4a;
    color: #363636
}

.button.is-white.is-focused:not(:active),
.button.is-white:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25);
    box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25)
}

.button.is-black.is-focused:not(:active),
.button.is-black:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25);
    box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25)
}

.button.is-light.is-focused:not(:active),
.button.is-light:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(245, 245, 245, .25);
    box-shadow: 0 0 0 .125em rgba(245, 245, 245, .25)
}

.button.is-dark.is-focused:not(:active),
.button.is-dark:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(54, 54, 54, .25);
    box-shadow: 0 0 0 .125em rgba(54, 54, 54, .25)
}

.button.is-primary.is-focused:not(:active),
.button.is-primary:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(0, 209, 178, .25);
    box-shadow: 0 0 0 .125em rgba(0, 209, 178, .25)
}

.button.is-link.is-focused:not(:active),
.button.is-link:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25);
    box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25)
}

.button.is-info.is-focused:not(:active),
.button.is-info:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(50, 152, 220, .25);
    box-shadow: 0 0 0 .125em rgba(50, 152, 220, .25)
}

.button.is-success.is-focused:not(:active),
.button.is-success:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(72, 199, 116, .25);
    box-shadow: 0 0 0 .125em rgba(72, 199, 116, .25)
}

.button.is-warning.is-focused:not(:active),
.button.is-warning:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(255, 221, 87, .25);
    box-shadow: 0 0 0 .125em rgba(255, 221, 87, .25)
}

.button.is-danger.is-focused:not(:active),
.button.is-danger:focus:not(:active) {
    -webkit-box-shadow: 0 0 0 .125em rgba(241, 70, 104, .25);
    box-shadow: 0 0 0 .125em rgba(241, 70, 104, .25)
}

.button.is-fullwidth {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.container {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: auto
}

@media screen and (min-width:1024px) {
    .container {
        max-width: 960px
    }
}

@media screen and (min-width:1216px) {
    .container:not(.is-max-desktop) {
        max-width: 1152px
    }
}

.table {
    background-color: #fff;
    color: #363636
}

.table td {
    border: 1px solid #dbdbdb;
    border-width: 0 0 1px;
    padding: .5em .75em;
    vertical-align: top
}

.table tbody {
    background-color: rgba(0, 0, 0, 0)
}

.table tbody tr:last-child td {
    border-bottom-width: 0
}

.input {
    background-color: #fff;
    border-color: #dbdbdb;
    border-radius: 4px;
    color: #363636
}

.input::-moz-placeholder {
    color: rgba(54, 54, 54, .3)
}

.input::-webkit-input-placeholder {
    color: rgba(54, 54, 54, .3)
}

.input:-moz-placeholder {
    color: rgba(54, 54, 54, .3)
}

.input:-ms-input-placeholder {
    color: rgba(54, 54, 54, .3)
}

.input:hover {
    border-color: #b5b5b5
}

.input:active,
.input:focus {
    border-color: #3273dc;
    -webkit-box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25);
    box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25)
}

.input {
    -webkit-box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
    box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
    max-width: 100%;
    width: 100%
}

.is-medium.input {
    font-size: 1.25rem
}

.select.is-white:not(:hover)::after {
    border-color: #fff
}

.select.is-black:not(:hover)::after {
    border-color: #0a0a0a
}

.select.is-light:not(:hover)::after {
    border-color: #f5f5f5
}

.select.is-dark:not(:hover)::after {
    border-color: #363636
}

.select.is-primary:not(:hover)::after {
    border-color: #00d1b2
}

.select.is-link:not(:hover)::after {
    border-color: #3273dc
}

.select.is-info:not(:hover)::after {
    border-color: #3298dc
}

.select.is-success:not(:hover)::after {
    border-color: #48c774
}

.select.is-warning:not(:hover)::after {
    border-color: #ffdd57
}

.select.is-danger:not(:hover)::after {
    border-color: #f14668
}

.control {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    font-size: 1rem;
    position: relative;
    text-align: inherit
}

@media screen and (min-width:1024px) {
    .navbar-link.is-active:not(:focus):not(:hover),
    a.navbar-item.is-active:not(:focus):not(:hover) {
        background-color: rgba(0, 0, 0, 0)
    }
}

.column {
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    padding: .75rem
}

/* @media screen and (min-width:769px), */
@media all and (orientation : landscape),
print {
    .column.is-6 {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 50%
    }
    .column.is-offset-6 {
        margin-left: 50%
    }
    .column.is-12 {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 100%
    }
}

.columns {
    margin-left: -.75rem;
    margin-right: -.75rem;
    margin-top: -.75rem
}

.columns:last-child {
    margin-bottom: -.75rem
}

.columns:not(:last-child) {
    margin-bottom: calc(1.5rem - .75rem)
}

.columns.is-multiline {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.columns.is-vcentered {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

/* @media screen and (min-width:769px), */
@media all and (orientation : landscape),
print {
    .columns:not(.is-desktop) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.has-text-centered {
    text-align: center!important
}

.hero {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.hero.is-fullheight .hero-body {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.hero.is-fullheight .hero-body>.container {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1
}

.hero.is-fullheight {
    min-height: 100vh
}

.hero-body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 3rem 1.5rem
}

p {
    font-family: Roboto, sans-serif
}

::-moz-selection {
    background: #8c8cf9;
    color: #fff
}

::selection {
    background: #8c8cf9;
    color: #fff
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: hidden!important
}

div,
div:active,
div:focus {
    outline: 0!important
}

.button:active,
.button:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

@font-face {
    font-family: 'Nexa Light';
    src: url(../fonts/text/nexa/NexaLight.woff) format("woff"), url(../fonts/text/nexa/NexaLight.ttf) format("truetype")
}

@font-face {
    font-family: 'Nexa Bold';
    font-weight: 700;
    src: url(../fonts/text/nexa/NexaBold.woff) format("woff"), url(../fonts/text/nexa/NexaBold.ttf) format("truetype")
}

::-webkit-input-placeholder {
    color: #cecece
}

::-moz-placeholder {
    color: #cecece
}

:-ms-input-placeholder {
    color: #cecece
}

:-moz-placeholder {
    color: #cecece
}

body::-webkit-scrollbar {
    width: 10px
}

body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, .2)
}

.hero.is-app-grey {
    background-color: #f5f6fa
}

.hero-body {
    position: relative;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    z-index: 6
}

.hero-body .is-subheader-caption {
    padding-bottom: 60px
}

.button {
    -webkit-transition: all .5s;
    transition: all .5s
}

.button.button-cta {
    padding: 22px 40px!important
}

.button.no-lh {
    line-height: 0!important
}

.button.raised:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)!important;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)!important;
    opacity: .8
}

.button.is-bold {
    font-weight: 500
}

.button:focus {
    border-color: #ccc
}

.button.is-fullwidth {
    display: block!important;
    width: 100%!important;
    text-align: center!important
}

.button.primary-btn {
    outline: 0;
    border-color: #8c8cf9;
    background-color: #8c8cf9;
    color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s
}

.button.primary-btn:hover {
    color: #fff
}

.button.primary-btn.raised:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(140, 140, 249, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(140, 140, 249, .2)!important;
    box-shadow: 0 14px 26px -12px rgba(140, 140, 249, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(140, 140, 249, .2)!important;
    opacity: .9 .5
}

.button.primary-btn:focus {
    border-color: #8c8cf9
}

.flex-card {
    position: relative;
    background-color: #fff;
    border: 1px solid #fcfcfc;
    border-radius: .1875rem;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    -webkit-transition: all .5s;
    transition: all .5s
}

.input {
    -webkit-box-shadow: none!important;
    box-shadow: none!important
}

.input {
    color: #878787;
    font-family: Roboto, sans-serif;
    font-size: .95rem;
    height: 36px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-color: #dee2e6
}

.input.is-medium {
    height: 44px
}

.input:hover {
    border-color: #d3d3d3
}

.input:active,
.input:focus {
    border-color: #d6d6d6
}

.input:focus {
    -webkit-box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, .06)!important;
    box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, .06)!important
}

.field>label {
    font-family: Roboto, sans-serif;
    padding-bottom: 4px;
    color: #5d6c84
}

.table {
    width: 100%
}

.switch[type=checkbox]:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25);
    box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25)
}

.switch[type=checkbox]:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25);
    box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25)
}

.switch[type=checkbox].is-small:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25);
    box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25)
}

.switch[type=checkbox].is-small:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25);
    box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25)
}

.switch[type=checkbox].is-medium:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25);
    box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25)
}

.switch[type=checkbox].is-medium:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25);
    box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25)
}

.switch[type=checkbox].is-large:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25);
    box-shadow: 0 0 0 .125em rgba(237, 237, 237, .25)
}

.switch[type=checkbox].is-large:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25);
    box-shadow: 0 0 0 .125em rgba(135, 135, 135, .25)
}

.switch[type=checkbox].is-primary:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(140, 140, 249, .25);
    box-shadow: 0 0 0 .125em rgba(140, 140, 249, .25)
}

.switch[type=checkbox].is-secondary:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(127, 0, 255, .25);
    box-shadow: 0 0 0 .125em rgba(127, 0, 255, .25)
}

.switch[type=checkbox].is-accent:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(173, 92, 255, .25);
    box-shadow: 0 0 0 .125em rgba(173, 92, 255, .25)
}

.switch[type=checkbox].is-info:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(3, 155, 229, .25);
    box-shadow: 0 0 0 .125em rgba(3, 155, 229, .25)
}

.switch[type=checkbox].is-success:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(6, 214, 160, .25);
    box-shadow: 0 0 0 .125em rgba(6, 214, 160, .25)
}

.switch[type=checkbox].is-warning:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(237, 165, 20, .25);
    box-shadow: 0 0 0 .125em rgba(237, 165, 20, .25)
}

.switch[type=checkbox].is-danger:checked:focus:not(:active)+label::before {
    -webkit-box-shadow: 0 0 0 .125em rgba(249, 43, 96, .25);
    box-shadow: 0 0 0 .125em rgba(249, 43, 96, .25)
}

.hero {
    position: relative
}

.carousel-wrap .testimonials-solo-carousel .hero-form .testimonial-item .field .control .input:not(:focus),
.hero-form .carousel-wrap .testimonials-solo-carousel .testimonial-item .field .control .input:not(:focus),
.hero-form .flex-card .field .control .input:not(:focus),
.hero-form .network-grid .network-card .field .control .input:not(:focus),
.hero-form .profile-card .field .control .input:not(:focus),
.hero-form .project-card .field .control .input:not(:focus),
.network-grid .hero-form .network-card .field .control .input:not(:focus) {
    border-color: #dee2e6
}

.mapbox-hero {
    position: relative
}

.contact-page-form {
    display: block;
    padding: 40px;
    border: 1px solid #eaecef;
    -webkit-box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, .06);
    box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, .06);
    border-radius: 6px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    text-align: left
}

.contact-page-form>h3 {
    font-family: "Nexa Bold", sans-serif;
    font-size: 1.4rem;
    color: #444f60
}

.contact-page-form>p {
    color: #8e9baf;
    margin-bottom: 2rem
}

.contact-page-form .column {
    padding: .5rem
}

.contact-page-form .field>label {
    font-size: .95rem
}

.contact-page-form .field .control .input {
    font-size: 1.1rem
}

@media (max-width:768px) {
    #main-hero {
        max-height: 100vh;
        background-position-x: 55%!important
    }
}

/* @media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .columns {
        padding: 0 10%
    }
} */

@font-face {
    font-family: slick;
    src: url(/assets/fonts/slick.eot);
    src: url(/assets/fonts/slick.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/slick.woff) format("woff"), url(/assets/fonts/slick.ttf) format("truetype"), url(/assets/fonts/slick.svg#slick) format("svg");
    font-weight: 400;
    font-style: normal
}