@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
@font-face {
    font-family: "Nunito Sans ExtraLight";
    src: local('Nunito Sans ExtraLight'), url(../fonts/NunitoSans-ExtraLight.ttf);
}


body {
	font-family: 'Nunito Sans', sans-serif;
}
body.front-page {
    background: linear-gradient(180deg, rgba(0,164,249,0) 550px, #00A4F9 100%);
    background-size: 100% 800px;
	background-repeat: no-repeat;
	overflow-x: hidden;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(0,0,0,0.3) !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(0,0,0,0.3) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: rgba(0,0,0,0.3) !important;
}
/*** region left-side menu ***/
.left-side-menu { 
	box-shadow: 5px 3px 6px 0px rgba(0, 0, 0, 0.04);
    padding-top: 0em;
    border-radius: 10px 10px 0 0;
}
@media (min-width: 1199px) {
	.left-side-menu .left-side-menu-items {
		padding-left: 5.5em;
	}
}
.left-side-menu h6.dropdown-header { /* section name */
	cursor: pointer;
	font-size: 1.2em;
	font-weight: bold;
    color: rgba(0,0,0,0.7);
	border-radius: 10px 10px 0 0;
    margin: -1 -1px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
	padding-left: 0;
}
.left-side-menu h6.dropdown-header + div {
	display: none;
}
.left-side-menu h6.dropdown-header.active + div { /* expanded submenu of active section */
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 1em;
}
.left-side-menu h6.dropdown-header.active { /* selected section name */
	cursor: default;
	pointer-events: none;
	border-bottom: none;
}
.left-side-menu h6.dropdown-header::after,
.left-side-menu h6.dropdown-header.active::after {
	content: '';
    width: 0.7em;
    height: 0.7em;
    background-image: url(../../images/arrow_right.svg);
    background-size: contain;
    position: absolute;
    right: 1em;
	margin-top: 0.3em;
}
.left-side-menu h6.dropdown-header.active::after {
    background-image: url(../../images/arrow_down.svg);
}
.left-side-menu .dropdown-item {
	line-height: 1.75;
    white-space: normal;
    padding: .3em 2.5em .3em .5em;
    font-size: 0.85em;
    font-weight: bold;
    opacity: 0.8;
}

.left-side-menu .dropdown-item, .left-side-menu .dropdown-item { /* menu item of section submenu */

}

.left-side-menu .dropdown-item:hover { /* hovered menu item */
	background-color: rgba(0,0,0,0.05);
}

.left-side-menu .dropdown-item.active,
.left-side-menu .dropdown-item:focus { /* current menu item of section submenu */
    color: #00A4F9;
    text-decoration: none;
	cursor: default;
	background-color: transparent;
}
.left-side-menu a.dropdown-item.active {
	pointer-events: none;
}
.left-side-menu + div {
	padding-left: 2em;
}
.left-side-menu .dropdown-header {
	padding: 0.7em 1.5em;
}
/*** end region ***/

/*** region search ***/
body.front-page .search-form-container {
	display: none;
}
.search-form-container input.form-control {
	box-shadow: none !important;
    background: linear-gradient(0deg, rgba(253,253,253,0) 0%, #FAFAFA 100%);
    border-color: #EEE !important;
    border-width: 0 0 1px 0;
	padding-left: 0;
	padding-right: 2.7em;
    height: 3.5em;
}
@media (min-width: 1199px) {
	.search-form-container input.form-control {
		padding-left: 5.5em;
	}
}

.search-form-container span.input-group-text {
    width: 2.5em;
    background: transparent;
    border: none;
    position: absolute;
    right: 0;
    height: 3.5em;	
}
.search-form-container span.input-group-text::before {
	content: '';
	background-image: url('../../images/search.svg');
	background-size: contain;
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0.8em;
}



/*** end region ***/

/*** region page-title ***/
.page-title-container {
	height: 250px;
	width: 100%;
	background: linear-gradient(180deg, rgba(0,200,255,0) 0%, rgba(0,200,255,0.03) 86.25%, rgba(0,164,249,0.09) 100%);
	position: relative;
	z-index: -1;
}
.page-title-content {
	position: absolute;
    opacity: 0.6;
    color: rgba(51,70,102,0.9);
    font-family: "Nunito Sans ExtraLight";
    font-size: 3rem;
    bottom: 2rem;
    margin-left: 2rem;
}
.page-title {
	position: static;
}


/*** end region ***/


.color-blue {
	color: #00A4F9;
}
.color-grey {
	color: rgba(199, 199, 199, 0.74);
}

.navbar.top-navbar {
	font-size: 0.7rem;
	padding: 0;
}
.navbar.top-navbar li {
	position: relative;
}
.navbar.top-navbar .navbar-brand {
	padding: 0;
}
.navbar.top-navbar .navbar-brand img {
	height: 2rem;
}

.navbar.top-navbar .navbar-nav .nav-link {
text-transform: uppercase;
    color: rgba(51,70,102,0.94);
    font-size: 1em;
    letter-spacing: 0.07em;
    font-weight: 800;
    line-height: 1.8em;
    margin: 0 2em;
    padding: 0;
}
.navbar.top-navbar .navbar-nav .nav-link.active::before {
	content: '';
    background: #00A4F9;
    opacity: 0.2;
    position: absolute;
    bottom: -1em;
    top: -2.5em;
    right: 0.5em;
    left: 0.5em;
}
.navbar.top-navbar .navbar-toggler {
	float:right;
}

.menu-container {
	position: relative;
}


.container.content {
	min-height: calc(100% - 10rem);
}

.working-with-streams-container {
	height: 44em;
}
.working-with-streams {
	position: absolute;
	left: 0;
	right: 0;
	top: -1.5em;
	height: 44em;
	border-radius: 0.75em 0.75em 0 0;
	background-color: #FFFFFF;
	box-shadow: 0 -0.75em 1.7em -0.94em rgba(86,187,240,0.82);
}
.working-with-streams h2, .how-it-works h2, .get-logrange h2 {
	margin-top: 2.4em;
	margin-bottom: 1.8em;
	color: rgba(51,70,102,0.95);
	font-size: 2.5em;
	font-weight: bold;
	line-height: 1.2em;
}
.working-with-streams img, .how-it-works-media .slide-num {
	width: 3em;
    padding: 0.5em;
    box-shadow: 0 0.5em 0.5em -0.13em rgba(0,164,249,0.22);
    border-radius: 0.25em;
    display: block;
    margin-bottom: 0.8em;
	background: linear-gradient(180deg, rgba(0,164,249,0.05) 0%, rgba(0,164,249,0) 100%);	
}
.working-with-streams p {
	font-size: 0.88em;
}
.working-with-streams h4 {
	color: #334666;
	font-weight: bold;
	line-height: 1.4em;
	font-size: 1em;
}
.container.front-page {
	background: url(../../images/front-page-bg.svg);
    height: 670px;
    background-position-y: 0;
    background-position-x: right;
    background-size: 1141px 670px;
    margin: 0;
    max-width: inherit;
    background-repeat: no-repeat;
}
.container.front-page > .row.front-page {
	height: 750px;
}

.how-it-works {
	background: linear-gradient(0deg, rgba(0,200,255,0) 0%, rgba(0,200,255,0.03) 58.11%, rgba(0,200,255,0.05) 84.46%, rgba(0,164,249,0.24) 100%);
	margin-left: -2%;
    width: 104%;
}

.how-it-works h2 {
	margin-bottom: 1.2em;
}

.how-it-works > container {
	position: absolute;
	top: 0;
}
.how-it-works .ellipsis {
	margin-bottom: 2.2em;
}	
.how-it-works .ellipsis div {
	width: 0.25em;
    height: 0.25em;
    margin: 0.25em;
    background-color: #00A4F9;
    border-radius: 50%;
    display: inline-block;
}

.how-it-works-media {
	width: 100%;
	position: relative;
}

.how-it-works-media .top-block {
	text-align: center;
	font-size: 1.13em;
	font-weight: 600;
	color: rgba(0,0,0,0.7);	
}

.how-it-works-media .ar-left, .how-it-works-media .ar-right {
	position: absolute;
}
.how-it-works-media .ar-left {
    top: 215px;
    left: 15%;
    width: 23%;
}
.how-it-works-media .ar-right {
    top: 230px;
    right: 18%;
    width: 20%;
}
.how-it-works-media .ar-right img, .how-it-works-media .ar-left img {
	width: 100%;
}
.how-it-works-media .slide-num {
	font-size: 1.5em;
    font-weight: 900;
    color: #00A4F9;
    width: 2em;
    height: 2em;
    line-height: 1em;
    margin: 0.5em auto;
}
.how-it-works-media p {
	color: rgba(0,0,0,0.75);
	letter-spacing: -0.03em;
	line-height: 1.34em;
	text-align: center;
}	
.get-logrange {
	height: 700px;
	background: linear-gradient(180deg, #0097E6 0%, #005BA3 100%);
	margin-left: -2%;
    width: 104%;
}
.get-logrange h2 {
	color: white;
}

.get-logrange p.get-logrange-intro {
	color: #FFFFFF;
	font-size: 1.38em;
	font-weight: 500;
	letter-spacing: -0.0015em;
	line-height: 1.45em;
	text-align: left;
}
.get-logrange .screen {
	height: 500px;
	width: 2000px;
	border-radius: 0.5em 0 0 0;
	background: linear-gradient(180deg, #F8F8F8 0%, #F6F6F6 100%);
	box-shadow: -1.7em 0 1.7em -0.17em rgba(37,61,102,0.48);
	font-size: 0.75rem;
}
.get-logrange .screen .tabs {
	padding-left: 2.6em;
}
.get-logrange .screen .tabs .nav-tabs .nav-item{
	margin-bottom: 0;
}
.get-logrange .screen .tabs .nav-link {
	padding: 1em 2em;
	color: #AAA;
	font-size: 1em;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.7em;
	border: none;
}
.get-logrange .screen .tabs .nav-link.active {
	box-shadow: inset 0 -0.25em 0 0 rgba(0,164,249,0.7);
	background-color: rgba(0,200,255,0.09);
	color: #334666;
}
.get-logrange .screen .nav.nav-tabs {
	border: 0;
}
.get-logrange .tab-info {
	height: 100%;
	width: 2000px;
	border-radius: 0.09em;
	background: linear-gradient(45.32deg, #2E2E2E 0%, #383838 55.41%, #2E2E2E 100%);
	box-shadow: inset 0 0 0 0.5em rgba(0,0,0,0.12);
	margin-left: 2.5em;
	text-align: left;
	padding: 2.5em;
}
.get-logrange .tab-info {
	color: #1ad708;
	font-family: "Courier New";
	font-size: 1.1em;
}
.get-logrange .tab-info b:before {
	content: "$";
	color: #c6c80d;
	margin-right: 1em;
}
.tab-pane {
    position: absolute;
    width: calc(100% - 3em);
}
h3 {
	font-size: 2em;
	color: #334666;
	font-weight: bold;
	letter-spacing: -0.02em;
	line-height: 1.5em;
}
.contact-us {
	padding-top: 6em;
	padding-bottom: 6em;
	background-color: #F9F9F9;
}
.contact-us .button-container {
	height: 3em;
}

.container.docs-page, .container.blog-page, .container.download-page {
	padding-top: 4em;
}


@media (min-width: 576px) {
	.navbar.top-navbar {
		position: relative;
	}
	.navbar.top-navbar .navbar-collapse {
		position: absolute;
		right: 0;
		top: 1em;
	}
	.navbar.top-navbar .container {
		position: absolute;
		left: 0;
		right: 0;
		top: 1rem;
	}
}

.left-side-menu .dropdown-menu {
	position: static;
	width: 100%;
}

.top-navbar .active, .footer .active {
	pointer-events: none;
	cursor: default;	
}

.front-page-intro-block {
	position: absolute;
	font-size: 16px;
	top: 170px;
	width: 445px;
	right: 55%;
}
.front-page-intro-block h1 {
    font-size: 4em;
    color: rgba(51,70,102,0.9);
    font-weight: bold;
    letter-spacing: -0.025em;
    line-height: 1.125em;
}
.front-page-intro-block h2 {
	font-size: 3em;
	color: rgba(51,70,102,0.9);
	font-weight: bold;
	letter-spacing: -0.013em;
	line-height: 1.17em;
}
.front-page-intro-block p {
	font-size: 1.13em;
	color: rgba(0,0,0,0.7);
	letter-spacing: -0.018em;
	line-height: 1.55em;
}

.front-page-intro-block .button-container {
    font-size: 16px;
    margin-top: 2em;
}
.github-logo {
    width: 2em;
    height: 2em;
    background: url(../../images/github_logo.svg);
    background-size: 2em 2em;
    display: inline-block;
    float: left;
    margin-top: -0.3em;
    margin-right: 0.8em;
}
/*** inputs ***/
input.form-control {
	height: 3em;
	margin-bottom: 0.75em;
	border-radius: 0.125em;
	background: linear-gradient(180deg, #FDFDFD 0%, #FFFFFF 100%);
	box-shadow: 0 0.125em 0.375em 0 rgba(0,0,0,0.14);
	color: rgba(0,0,0,0.4);
	font-size: 1em;	
	letter-spacing: -0.02em;
	line-height: 1.5em;
}

textarea.form-control {
	height: 13em;
	border-radius: 2px;
	background: linear-gradient(180deg, #FDFDFD 0%, #FFFFFF 100%);
	box-shadow: 0 0.125em 0.375em 0 rgba(0,0,0,0.14);
	color: rgba(0,0,0,0.4);
	font-size: 1em;
	letter-spacing: -0.02em;
	line-height: 1.5em;
}

input.form-control:hover, textarea.form-control:hover {
	box-shadow: inset 0 -0.125px 0.375em 0 rgba(0,0,0,0.07), 0 0.25em 0.625em 0 rgba(0,0,0,0.1);
}
input.form-control:focus, textarea.form-control:focus {
	color: rgba(0,0,0,0.75);
	box-shadow: inset 0 -0.125px 0.375em 0 rgba(0,0,0,0.07), 0 0.25em 0.625em 0 rgba(0,0,0,0.1);
	border-color: #ced4da;
}

.contact-us textarea {
	height: 13em;
}

.footer {
	background: linear-gradient(180deg, #2E3F5C 0%, #334666 50.68%, #334666 100%);
	height: 10em;
	text-align: center;
	padding: 3.5em 0;
	position: relative;
}

.footer ul.navbar-nav {
	display: inline-block;
    margin-left: 5em;
}

.footer li.nav-item {
    display: inline-block;
	margin: 0 1.5em;
	padding-top: 0.25em;
}

.footer li.nav-item a {
	color: white;
    text-transform: uppercase;
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: 0.2em;
	padding: 0.25em 0;
}



/*** buttons ***/
.btn.btn-logrange.btn-logrange-primary,
.btn.btn-logrange.btn-logrange-primary-alt,
.btn.btn-logrange.btn-logrange-outline {
	height: 3em;
	font-size: 0.75em;
	color: #FFFFFF;
	font-family: "Nunito Sans";
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.7em;
	padding: 1.17em 2em;
	border-radius: 0.17em;
	background: linear-gradient(0deg, #00A4F9 0%, #00B8FC 66.52%, #00C8FF 100%);
	box-shadow: 0 0.92em 0.92em -0.08em rgba(0,164,249,0.22);
	text-transform: uppercase;
	height: 4em;
	transition: margin 0.2s;
}
.btn.btn-logrange.btn-logrange-primary-alt {
	color: #334666;
	background: white;
	box-shadow: 0 0.75em 1em -0.63em rgba(0,0,0,0.41) !important;
}
.btn.btn-logrange.btn-logrange-primary-alt:hover,
.btn.btn-logrange.btn-logrange-primary:hover {
	margin-top: -0.42em;
	box-shadow: 0 0.92em 1.5em -0.33em rgba(0,164,249,0.22);
}
.btn.btn-logrange.btn-logrange-outline {
	background: transparent;
/*	box-shadow: inset 0 0 0 0.08em rgba(51,70,102,0.5);	
	transition: box-shadow 0.2s;*/
	color: #334666;	
	transition: color 0.2s;
	
	border: 1px solid rgba(51,70,102,0.5);
	border-radius: 0;
	transition: border-color 0.2s;
}
.btn.btn-logrange.btn-logrange-outline:hover {
	background: transparent;
/*	box-shadow: inset 0 0 0 0.08em #00C8FF;*/
	color: #00C8FF;
	
	border: 1px solid #00C8FF;
}

.smooth-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s linear 0.4s;
}

label.error {
	color: red;
	margin-top: -0.7em;
}
.footer .copyright {
	position: absolute;
	bottom: 5px;
	right: 1em;
	font-size: 0.7em;
	color: white;
}
.footer .copyright a {
	color: #DDD !important
}

.markdown-body {
	padding: 2em 2em 2em 3.5em;
}