@media (max-width: 991px) {
	.branding {
		margin-top: 10px;
	}

	#js-scrollspy .js-scrollspy-nav {
		display: none !important;
		bottom: 0;
		right: 0;
		padding: 0 15px;
		box-shadow: 0 8px 5px 6px #333;
	}
}

@media (max-width: 860px) {
	.header-logo {
		width: 29%;
	}

	.header-links {
		width: 69%;
	}
}

@media (max-width: 767px) {
	#reset-key .reset-key {
		margin: 0 auto;
		margin-top: 10px !important;
	}

	.edit-profile-section, .edit-account-settings-section .edit-account .form-field input {
		width: calc(100% - 1rem);
	}

	.chart-js-container {
	  padding: 0 80px;
	}
}

@media (max-width: 696px) {
	h1, h2, h3 {
		padding-left: 5px;
		padding-right: 5px;
	}
	.header-container {
		max-width: 100%;
		width: 100%;
	}
	.header-logo {
		width: auto;
		display: flex;
		justify-content: center;
		margin-top: 1rem;
		margin-left: 0;
		position: relative;
		top: 7px;
	}
	.header-container .wrap {
		max-width: 100%;
	}
	.header div:last-child {
		width: 100%;
		padding: 0;
	}
	.header .nav {
		text-align: center;
	}
	.header .nav .links {
		display: flex;
		/*flex-direction: column;*/
		align-items: center;
		border-top: 1px solid #424242;
		margin-bottom: 0;
	}
	.header .nav .links li {
		display: inline;
		width: 100%;
		/*padding: 10px 0;*/
		border-bottom: 1px solid #5a5a5a;
		margin: 0;
		padding: 0;
	}
	.header .nav .links li a {
		width: 100%;
		display: block;
		padding: 10px 0;
		margin: 0;
	}
	.header .nav .links li .button {
		border: none;
		margin: 0;
		padding: 10px 0;
	}
	.header .nav .links li .button.filled {
		border: none;
		background: none;
		color: #fff;
		margin: 0;
		padding: 10px 0;
	}
	.header .nav .links li.divider {
		display: none;
	}

	.centered.section.signup {
		padding: 50px 0;
	}
	.centered.section.signup h2 {
		font-size: 28px;
	}
	.centered.section.signup p {
		font-size: 18px;
	}
	.centered.section.signup p.pricing {
		font-size: 18px;
	}
	.centered.section.signup .button {
		margin: 20px 0;
	}

	.section.offer .offer-container > p {
		font-size: 1.5em;
	}

	.doc-nav-secondary {
		text-align: center;
		border-top: 0;
	}
	.doc-nav-secondary li {
		margin: 0;
		/*padding: 16px 0;*/
		border-bottom: 1px solid #dcdcdc;
	}
	.doc-nav-secondary li a {
		/*text-decoration: none !important;*/
		padding: 16px 0;
	}

	.pricing-box:first-child {
		margin-right: 10px;
	}
	.pricing-box:last-child {
		margin-left: 10px;
	}

	.wrap .doc-body-bottom .box h1, .wrap .doc-body-bottom .box h2 {
		font-size: 1.3em;
	}
	.main.wrap.container-fluid form {
		margin-bottom: 2em;
	}

	.account-body a {
		margin-left: 0;
	}

	#api-key {
		font-size: 16px;
	}
	#docs-contents ul li:first-child a {
		font-weight: 300;
	}
	footer nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	footer nav ul li {
		width: 100%;
		margin-left: 0;
		padding: 15px 0;
	}
	footer nav ul li a {
		display: block;
	}
	.chart-js-container {
	  padding: 0 15px;
	}

	/* netatmo responsive styles */
	#netatmo-container h1 {
		margin-top: 15%;
		margin-bottom: 5px;
	}

	#netatmo-container p {
		font-size: 4vw;
		margin-top: 5px;
	}

	#netatmo-container button {
		padding-top: 7px;
		padding-bottom: 7px;
	}

}

@media (max-width: 500px) {
	#footer ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#footer ul li {
		margin: 15px 0;
	}
}

@media (max-width: 415px) {
	h1, h2, h3, ul, p {
		/*margin: 0 5px !important;*/
	}
	#companyWall {
		flex-direction: column;
	}
	#companyWall .company {
		margin: 20px 0;
	}
	.consumption {
		font-size: 13px;
	}
}

@media (max-width: 370px) {
	#footer ul {
		margin: 0 20px;
	}
}

@media screen and (min-width: 1250px) {
	.fullscreen-bg {
		bottom: 0;
		filter: opacity(50%) grayscale(20%);
		height: 100%;
		left: 0;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 0;
	}

	.fullscreen-bg__video {
		height: auto;
		min-height: 100%;
		min-width: 100%;
		position: relative;
		top: 50%;
		width: auto;
	}
}