@media (max-width: 1920px) {

	#practice { min-height: 1400px; }

}

@media (max-width: 1685px) {

	#presentation .steps .screens { bottom: 1px; }

}

@media (max-width: 1679px) {

	#presentation .steps .screens { bottom: 2px; }

}

@media (max-width: 1600px) {
	
	#practice { min-height: 1320px; }

	header .col_logo {
		padding-left: 0;
		padding-right: 0;
	}

	header .logo {
		padding-left: 0;
		padding-right: 0;
	}
		
}

@media (max-width: 1280px) {

	#practice { min-height: 1270px; }
		
}

@media (max-width: 1199px) {

	header nav ul {
		top: 0;
		z-index: 1;
		padding: 0;
		max-height: 0;
		width: 300px;
		right: -15px;
		overflow: hidden;
		position: absolute;
		background: #151825;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		transition: 0.5s;
	}

		header nav ul.active {
			padding-top: 72px;
			max-height: 500px;
		}

			.fixed header nav ul.active { padding-top: 61px; }

		header nav ul li {
			width: 100%;
			display: block;
		}

			header nav ul li a {
				width: 100%;
				font-size: 18px;
				font-weight: 600;
				padding-left: 38px;
				padding-right: 38px;
				border-bottom: 1px solid #2e2f34;
			}

				header nav ul li:first-child a { border-top: 1px solid #2e2f34; }

	header nav .nav_target {
		z-index: 2;
		display: block;
		position: relative;
	}

	#boxes .row_table { margin-bottom: -110px; }

		#boxes .col .box {
			top: -110px;
			padding: 17px 22px;
		}

	#presentation .data::after {
		width: 478px;
		height: 77px;
		bottom: -77px;
	}

	#presentation .steps { min-height: 520px; }

		#presentation .steps .screens {
			width: 640px;
			height: 279px;
		}

}

@media (max-width: 1099px) {

	#about .references .item .popup {
		max-width: 800px;
	}

		#about .references .item .popup .text { padding: 30px 40px; }

			#about .references .item .popup .text .content_scroll {
				left: 40px;
				top: 100px;
			}

}

@media (max-width: 1023px) {

	#practice { min-height: 1220px; }

	header .col_nav { position: static; }

		header nav ul {
			left: 0;
			right: 0;
			width: auto;
		}

			header nav ul li a { text-align: center; }

		header .logo {
			z-index: 2;
			position: relative;
		}

}

@media (max-width: 991px) {

	.teaser .large {
		font-size: 80px;
		line-height: 80px;
	}

	#about .references {
		float: left;
		white-space: normal;
	}

	#boxes .row_table { margin-bottom: -110px; }

		#about .references .item {
			width: 25%;
			float: left;
			margin-bottom: 20px;
		}

		#boxes .col .box {
			top: -110px;
			padding: 15px 20px;
		}

			#boxes .col .box .title {
				font-size: 42px;
				line-height: 42px;
			}

			#boxes .col .box .desc { line-height: 18px; }

	#practice { padding-top: 80px; }

	#presentation .steps {
		height: auto;
		min-height: none;
	}

		#presentation .steps .screens {
			width: 90%;
			bottom: 3px;
			height: 400px;
			display: block;
			position: relative;
		}

		#presentation .steps .col { text-align: center !important; }

		#presentation .steps .col:first-of-type p { max-width: none; }
		#presentation .steps .col:nth-of-type(2) p { max-width: none; }
		#presentation .steps .col:last-of-type p { max-width: none; }

	#presentation .communication .container { background-size: 75%; }

}

@media (max-width: 899px) {

	#about .references .item .popup { max-width: 700px; }

		#about .references .item .popup .close {
			top: 10px;
			right: 10px;
		}
		
	#practice { min-height: 1120px; }

	#presentation .steps .screens { height: 350px; }

	#presentation .communication .container .row {
		margin-left: 0;
		margin-right: 0;
	}

	#modal {
		width: 80%;
		max-width: none;
	}

}

@media (max-width: 767px) {

	.teaser {
		padding-left: 20px;
		padding-right: 20px;
	}

	#boxes { padding-top: 15px; }

	#boxes .row_table {
		display: table;
		margin-bottom: 0;
	}

	#boxes .col {
		float: left;
		height: auto;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 15px;
		display: inline-block;
	}

	#boxes .col .box {
		top: 0;
		height: auto;
	}

	#boxes .col .box .desc { padding-bottom: 15px; }

	#boxes .download p {
		line-height: 19px;
		padding: 40px 20px;
	}

	#presentation .data::after {
		width: 368px;
		height: 55px;
		bottom: -55px;
	}

	#about {
		padding-left: 20px;
		padding-right: 20px;
	}

		#about .border {
			border-left: 0;
			padding-left: 15px;
			padding-right: 15px;
		}

		#about h1 { padding-bottom: 0; }

		#about h2 { margin-bottom: 30px; }

		#about h3 {
			padding-top: 15px;
			text-align: center;
			display: inline-block;
		}

		#about .references .item .popup { max-width: 600px; }

			#about .references .item .popup .text .title { padding-right: 20px; }

			#about .references .item .popup .text { padding: 20px 30px; }

				#about .references .item .popup .text .content_scroll {
					left: 30px;
					top: 80px;
					right: 20px;
					bottom: 30px;
				}

	#solution .samples .col {
		float: left;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 15px;
		display: inline-block;
	}

	#practice .title { height: auto; }

		#practice .title span.part_01 {
			width: 197px;
			height: 57px;
		}

		#practice .title span.part_02 {
			width: 269px;
			height: 62px;
			margin-top: 8px;
		}

	#practice { min-height: 1020px; }

	#practice h2 { padding-top: 20px; }

	#practice .preview { margin-top: 45px; }

	#practice .logo_hive { margin-top: 45px; }

	#solution { padding-top: 50px; }

		#solution .head {
			font-size: 50px;
			line-height: 52px;
			margin-bottom: 20px;
		}

			#solution .samples .col .box .title { margin-bottom: 5px; }

	#presentation .steps .screens { display: none; }

	#presentation .steps .col {
		padding-top: 20px;
		border-bottom: 1px solid #637bdc;
	}

		#presentation .steps .col:last-of-type { margin-bottom: 4px; }

		#presentation .steps .col .screen {
			height: 250px;
			display: block;
			margin-top: 30px;
		}

			#presentation .steps .col:last-of-type .screen.screen_03 { margin-bottom: -1px; }

		#presentation .steps .col p {
			margin: auto;
			display: block;
			max-width: 400px !important;
		}

	#presentation .communication .container {
		padding: 40px 0;
		background-size: 65%;
	}

	footer .container {
		padding-left: 30px;
		padding-right: 30px;
	}

	#modal { width: 90%; }

}

@media (max-width: 639px) {

	#section { background-position: top right 40%; }

	header .left_nav_target span.full { display: none; }
	header .left_nav_target span.small { display: inline-block; }

	header .logo {
		padding-top: 27px;
		padding-bottom: 27px;
	}

		.fixed header .logo {
			padding-top: 21px;
			padding-bottom: 13px;
		}

		header .logo span {
			width: 130px;
			height: 20px;
		}

	.teaser .large {
		font-size: 60px;
		line-height: 60px;
		margin-bottom: 5px;
	}

	.teaser .medium { font-size: 23px; }

	.teaser .line { margin: 10px 0; }

	#about .references .item .popup { max-width: 500px; }
	
		#about .references .item .popup .text .title {
			font-size: 30px;
			line-height: 32px;
		}

		#about .references .item .popup .text { padding: 20px 20px; }

			#about .references .item .popup .text .content_scroll {
				top: 70px;
				left: 20px;
				right: 10px;
				bottom: 20px;
			}

	#practice { padding-bottom: 150px; }

	#practice .title span.part_01,
	#practice .title span.part_02 {
		float: none;
		margin: auto;
		display: block;
	}

		#practice .title span.part_01 { margin-bottom: 15px; }

	#solution .samples { padding-bottom: 30px; }

	#presentation .head h2 {
		font-size: 50px;
		margin: 20px 0 30px;
		letter-spacing: -2px;
	}

		#presentation .head h2 strong {
			font-size: 38px;
			letter-spacing: -1px;
		}

	#presentation .head .claim {
		height: 48px;
		padding: 0 20px;
		font-size: 35px;
		line-height: 48px;
		margin: 35px 0 80px;
		letter-spacing: -2px;
	}

	#presentation .communication .container {
		padding-bottom: 430px;
		background-size: 100%;
	}

	#presentation .communication h4,
	#presentation .communication p {
		max-width: none;
		text-align: center;
	}

		#presentation .communication h4 { margin-bottom: 20px; }

	#presentation .data img { width: 100%; }

	#modal {
		max-height: 555px;
		padding: 30px 40px;
	}

	#modal .title { margin-bottom: 20px; }

	#modal .close {
		top: 5px;
		right: 5px;
	}

	#modal button { padding: 0 30px; }

	#modal .modal_scroll {
		top: 100px;
		left: 35px;
		right: 20px;
		bottom: 30px;
	}

}

@media (max-width: 520px) {

	#about .references .item .popup.active { width: 90%; }

	#about .references .item .popup .image { display: none; }

	#about .references .item .popup .text { width: 100%; }

	#practice { min-height: 1020px; }

	#presentation .communication .container { padding-bottom: 350px; }

}

@media (max-width: 499px) {

	#section { background-position: top right 32%; }

	header {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	#presentation .data::after {
		left: 0;
		right: 0;
		margin: auto;
		width: 294px;
		height: 44px;
		bottom: -44px;
	}

	#about .references .item { width: 33.33%; }

	#solution .head {
		font-size: 40px;
		line-height: 42px;
		margin-bottom: 10px;
	}

	#solution .samples { margin-top: 35px; }

	#solution .samples .col .box { padding: 20px 20px; }

	#presentation .head h2 {
		font-size: 40px;
		margin: 15px 0 25px;
		letter-spacing: -2px;
	}

		#presentation .head h2 strong {
			font-size: 30px;
			letter-spacing: -1px;
		}

	#presentation .head .claim {
		height: 43px;
		padding: 0 15px;
		font-size: 30px;
		line-height: 43px;
		margin: 30px 0 70px;
		letter-spacing: -2px;
	}

	#presentation .data { padding: 30px 0; }

	#presentation .communication h4,
	#presentation .data h4 {
		font-size: 40px;
		line-height: 40px;
	}

		#presentation .data h4 strong {
			font-size: 70px;
			line-height: 74px;
		}

	footer .container {
		padding-left: 20px;
		padding-right: 20px;
	}

	#modal {
		height: 90%;
		max-height: 540px;
		padding: 20px 30px;
	}

		#modal .title { margin-bottom: 10px; }

		#modal p { margin-bottom: 20px; }

		#modal button { padding: 0 15px; }

		#modal .modal_scroll {
			top: 80px;
			left: 25px;
			right: 10px;
			bottom: 20px;
		}


}

@media (max-width: 399px) {

	header {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

		header .col_target,
		header .col_nav {
			padding-left: 0;
			padding-right: 0;
		}

		header .left_nav_target,
		header nav .nav_target {
			padding-left: 25px;
			padding-right: 25px;
		}

			header .left_nav_target i { margin-right: 0; }

		header nav .nav_target { margin-right: 0; }

		header .left_nav_target span.small { display: none; }

	header .col_target,
	header .col_nav { width: 25%; }

	header .col_logo { width: 50%; }

	.teaser,
	#about {
		padding-left: 10px;
		padding-right: 10px;
	}

	#about .references .item { width: 50%; }

	#practice h2 {
		font-size: 22px;
		line-height: 24px;
		padding-bottom: 0;
	}

	#practice h3 {
		font-size: 20px;
		line-height: 22px;
	}

	#practice .logo_hive {
		width: 185px;
		height: 52px;
	}

	#solution .samples .col .box { padding: 15px; }

	#presentation .head h2 { margin-top: 0; }

	#presentation .head .claim {
		font-size: 25px;
		margin-bottom: 50px;
		letter-spacing: -1px;
	}

	#presentation .communication .container {
		padding-top: 20px;
		padding-bottom: 270px;
	}

	#presentation .communication h4,
	#presentation .data h4 {
		font-size: 30px;
		line-height: 30px;
	}

		#presentation .data h4 strong {
			font-size: 50px;
			line-height: 54px;
		}

	#modal .col-xs-6 { width: 100%; }

	#modal .title {
		font-size: 35px;
		line-height: 35px;
		letter-spacing: -1.5px;
	}

	#modal input,
	#modal textarea { margin-bottom: 5px; }

	#modal {
		max-height: 690px;
	}

	#modal button {
		width: 100%;
		margin-top: 5px;
	}

}

@media (max-width: 349px) {

	.teaser .large {
		font-size: 50px;
		margin-bottom: 0;
		line-height: 50px;
	}

	.teaser .medium { font-size: 21px; }

	.teaser .large {
		font-size: 50px !important;
		line-height: 50px !important;

	}

	.teaser .line { margin: 5px 0; }

	#modal { padding: 15px 25px; }

}

/* height */

@media (max-height: 849px) {

	.teaser { margin-top: 330px; }

	#left_nav ul li a span.logo {
		width: 53px;
		height: 53px;
	}

}

@media (max-height: 799px) {

	.teaser { margin-top: 270px; }

	#left_nav {
		width: 280px;
		left: -280px;
	}

		#left_nav ul li { height: 80px; }

		#left_nav ul li a span.logo {
			width: 43px;
			height: 43px;
		}

}

@media (max-height: 749px) {

	.teaser { margin-top: 220px; }

}

@media (max-height: 699px) {

	.teaser p { max-width: 640px; }

}

@media (max-height: 649px) {

	#left_nav {
		width: 250px;
		left: -250px;
	}

		#left_nav ul li { height: 70px; }

		#left_nav ul li a span.logo {
			width: 35px;
			height: 35px;
		}

		#left_nav ul li a span { font-size: 18px; }

}

@media (max-height: 649px) and (min-width: 640px) {

	.teaser .large {
		font-size: 80px;
		line-height: 80px;
	}

	.teaser { margin-top: 180px; }

}

@media (max-height: 599px) {

	.teaser { margin-top: 120px; }

}

@media (max-width: 1024px) and (max-height: 549px) {

	.teaser .large {
		font-size: 60px;
		line-height: 60px;
	}

	.teaser .large { margin-bottom: 5px; }

	.teaser .line { margin: 10px 0; }

}

@media (max-width: 1023px) and (max-height: 549px) {

	header nav ul li a {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

}

@media (max-width: 1023px) and (max-height: 449px) {

	header nav ul li a {
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}

}

@media (max-width: 1023px) and (max-height: 349px) {

	header nav ul li a {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

}

@media (max-width: 767px) and (max-height: 649px) {

	.teaser { margin-top: 220px; }

}

@media (max-width: 767px) and (max-height: 479px) {

	.teaser { margin-top: 200px; }

}

@media (max-width: 767px) and (max-height: 449px) {

	.teaser { margin-top: 160px; }

}

@media (max-width: 767px) and (max-height: 399px) {

	.teaser { margin-top: 110px; }

}

@media (max-width: 767px) and (max-height: 349px) {

	.teaser { margin-top: 80px; }

}

@media (max-width: 549px) and (max-height: 449px) {

	.teaser { margin-top: 120px; }

}

@media (max-width: 549px) and (max-height: 399px) {

	.teaser { margin-top: 100px; }

	.teaser .large {
		font-size: 45px;
		line-height: 45px;
	}

}

@media (max-width: 449px) and (max-height: 549px) {

	.teaser { margin-top: 160px; }

}

@media (max-width: 449px) and (max-height: 449px) {

	.teaser { margin-top: 100px; }

}

@media (max-width: 399px) and (max-height: 399px) {

	.teaser { margin-top: 80px; }

}

@media (max-width: 349px) and (max-height: 499px) {

	.teaser { margin-top: 100px; }

}