/********************** Media Queries **********************/

@media screen and (max-width: 1023px) {
	.banner-novarto {
		text-align: center;
	}
	.banner-novarto img {
		display: inline-block;
		margin: 0 auto;
	}
	footer {
		text-align: center;
	}
	footer .float-left,
	footer .float-right {
		float: none !important;
	}
	footer .socials {
		margin-bottom: 15px;
	}
	.hero .hand-image {
	    right: -70px;
		bottom: 0;
	}
	.hero-content {
		width: 75%;
	}
}

@media screen and (max-width: 768px) {
	.tutorials{
		margin-top: 0;
	}
	.hero-content {
		width: 60%;
	}
	.hero {
		height: 55vh;
		overflow: hidden;
	}
	.hero .hand-image {
	    right: -25px;
		bottom: 0;
	}
	.tripple-block {
		flex-direction: column;
	}
	.tripple-block .box {
		width: 100%;
	}
	.tripple-section .title {
		text-align: center;
	}
	.tripple-block .box {
		margin: 0;
	}
	.tripple-block .box:first-of-type {
		margin: -2.6em 0 0 0;
	}
	.tripple-block .box:last-of-type {
		margin: 0 0 -2.6em 0;
	}
	.image-section {
		min-height: unset;
	}
	.image-section .image-holder {
		width: 100%;
		transform: translateX(-50%);
		top: -75px;
	}
	.image-section.leftaligned .image-holder {
		left: 50%;
	}
	.image-section.rightaligned .image-holder {
		left: 0%;
		right: auto;
		top: -100px;
		transform: none;
	}
	.image-section .hand-image, .image-section.rightaligned .hand-image {
		width: 45%;
	}

	.image-section.leftaligned .container {
		padding: 0 15px;
	}
	.image-section .container > .float-left {
		float: none !important;
		padding-top: 53%;
	}
	.image-section.leftaligned .container > .float-left {
	    padding-top: 50%;
	}
	.image-section.rightaligned .float-left {
		width: 100%;
	}
	footer .socials i {
		font-size: 1.3em;
	}
	#sendButton {
		margin: 0 auto;
		display: block;
		padding: 10px 40px;
	}
	.video {
		width: 100% !important;
	}
}

@media screen and (max-width: 575px) {

	.container {
		width: 100%;
	}
	.hero {
	    height: auto;
	    overflow: hidden;
	}
	.hero .hero-title {
		margin-top: 0 !important;
		font-size: 1.4em;
		line-height: 1.2;
		width: 85%;
	}
	.hero .hand-image {
	    height: 40vh;
		bottom: 0;
	}
	.hero-content {
		width: 100%;
	}
	.hero-content > p {
		width: 72%;
		line-height: 1.15em;
	}
	.hero-content > .btn {
		width: 70%;
	}
	.top-section p {
		width: 100%;
	}
	header .logo {
	    display: block;
	    margin: 0 auto 30px auto;
	}
	header .container-fluid.my-5 {
		margin: 2.5em 0 !important;
	}
	.topnav-buttons {
	    float: none !important;
	    display: block;
	    text-align: center;
	}
	footer .contacts {
		margin-bottom: 15px;
	}
	.section-title {
		font-size: 2em;
	}
	.section-suptitle {
		font-size: 1.8em;
		margin-bottom: 20px;
	}
	.tripple-section .title {
		font-size: 1.9em;
	}

}

@media screen and (max-width: 474px) { 
	.form-row input, .form-row input:active {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 0.9rem;
	}
}

@media screen and (max-width: 412px) {
	.hero .hand-image {
	    height: 40vh;
	    right: 5px;
		bottom: 0;
	}
}

@media screen and (max-width: 411px) {
	.hero .hand-image {
	    height: 25vh;
		bottom: 0;
	}
}

@media screen and (max-width: 384px) and (max-height: 640px) {
	.hero .hand-image {
	    height: 35vh;
		bottom: 0;
	}
}

@media screen and (max-width: 375px) {
	.hero .hand-image {
	    height: 35vh;
		bottom: 0;
	}
}

@media screen and (max-width: 360px) and (max-height: 640px) {
	.hero .hand-image {
	    height: 40vh;
		bottom: 0;
	}
}

@media screen and (max-width: 280px) {
	.hero .hand-image {
	    height: 25vh;
		bottom: 0;
	}
}