* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans";
}

a {
	color: #31313F;
	text-decoration: none;
}

h1, h2 {
	color: #31313F;
	font-weight: 300;
}

h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 1.8rem;
}

.float-box {
	overflow: hidden;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.wrapper {
	max-width: 1920px;
	margin: 0 auto;
}

.header-row {
	width: 100%;
}

.logo {
	padding: 13px 0;
	font-size: 0;
	width: 100%;
	text-align: center;
	padding-bottom: 24px;
	background: url(i/zig_zag_top.gif) 0 100% repeat-x;
}
.logo img {
	width: 228px;
}

.large-video {
	position: relative;
	cursor: pointer;
}

.large-video .shadow {
	position: absolute;
	top: 0;
	left: 0;
	background: url(i/shadow.png) 0 0 repeat-x;
	width: 100%;
	height: 10px;
}
.large-video .large-video-mobile {
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 270px;
}
.large-video video {
	display: none;
}

.menu-with-icons {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 15px 0;
	background-color: #D2F7EF;
}
.menu-with-icons li {
	list-style: none;
	padding: 0 20px;
}

.menu-with-text {
	display: none;
	padding: 23px 0;
	padding-right: 23px;
}

.menu-with-text li {
	list-style: none;
	padding: 0 20px;
}

.menu-with-text li a {
	font-size: .94rem;
}
.menu-with-text li a:hover {
	color: #FE6357;
}

.phone-banner {
	display: none;
	font-size: 0;
}

.large-video{
	width: 100%;
	background: url("i/static_img.png") 50% 50% no-repeat;
	background-size: cover;
}
.large-video video{
	 /*height: 270px;*/
 }
.phone-banner-mobile {
	text-align: center;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 20px;
}
.phone-banner-mobile img {
	max-width: 300px;
}

.videos {

}
.videos .line-top {
	padding-top: 10px;
	background: #F7F7F7 url("i/zig_zag5.png") 0 0 repeat-x;
}
.videos .line-bottom {
	padding-bottom: 10px;
	background: #F7F7F7 url("i/zig_zag1.png") 0 100% repeat-x;
}
.videos .container {
	padding: 15px;
	padding-bottom: 50px;
}

.videos .title {
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.videos .title h1 {
	display: inline-block;
	font-size: 2rem;
	margin: 0;
	padding: 15px 0;
	padding-right: 35px;
	background: url("i/arrow.png") 100% 90% no-repeat;
}
.video-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.video {
	position: relative;
	width: 100%;
	margin-top: 20px;
	max-width: 450px;
	cursor: pointer;
}
.video .play-icon {
	position: absolute;
	left: 0%;
	right: 0%;
}
.video img {
	width: 100%;
}

.how-to-work .container {
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}

.how-to-work .container > p {
	margin: 40px auto;
}
.how-to-work .container .row .item {
	margin-top: 50px;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}
.how-to-work .container .row .item:first-child {
	margin-top: 0;
}
.how-to-work .container .row p {
	color: #66667F;
}
.how-to-work .container .title-img {
	width: 160px;
}
.how-to-work h2 {
	margin: 10px 0;
}
.who-are-we h1, .what-is-offer h1, .contacts .title h1 {
	font-size: 1.8rem;
}
.who-are-we {
	margin-top: 50px;
}
.who-are-we p{
	color: #66667F;
	line-height: 1.7rem;
	margin-top: 0;
	padding: 0 5%;
}
.who-are-we .container {
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 40px;
}
.who-are-we .line-top {
	padding-top: 10px;
	background: url("i/zig_zag2.png") 0 0 repeat-x;
}

.who-are-we .title {
	text-align: center;
	padding: 1px;
}

.what-is-offer {
	background-color: #F0543B;
}
.what-is-offer .container {
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 40px;
}
.what-is-offer .line-top {
	padding-top: 10px;
	background: url("i/zig_zag3.png") 0 0 repeat-x;
}
.what-is-offer .title {
	text-align: center;
	padding: 1px;
}
.what-is-offer .title h1{
	color: #FFF;
}
.what-is-offer p {
	margin: 0;
	padding: 15px 0;
	color: #FFF;
	line-height: 1.7rem;
	padding: 0 5%;
}

.contacts {
	background-color: #142936;
}
.contacts .line-top {
	background: url("i/zig_zag4.png") 0 0 repeat-x;
}
.contacts .container {
	position: relative;
	padding-bottom:230px;
}

.contacts .title {
	text-align: center;
	padding: 1px;
}
.contacts .title h1 {
	color: #FFF;
}
.contacts .contacts-icons {
	display: flex;
	justify-content: center;
}
.contacts .contacts-icons .text {
	display: none;
}
.contacts .contacts-icons .phone {
	margin-right: 20px;
}
.contacts .social-icons {
	width: 220px;
	margin: 40px auto;
}
.contacts .social-icons .facebook, .contacts .social-icons .youtube {
	margin-right: 20px;
}
.contacts .form {
	background-color: #23485F;
	padding: 30px;
	text-align: center;
	position: relative;
	z-index: 10;
	box-shadow: 0 0 10px 1px rgba(0,0,0,0.5);
	margin-bottom: 40px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.contacts .form .form-col {
	width: 100%;
}
.contacts .form input {
	height: 35px;
}
.contacts .form input, .contacts .form textarea {
	width: 100%;
	margin-top: 20px;
	outline: 0;
	border: 3px solid #23485F;
	padding: 5px 10px;
}
.contacts .form input:first-child {
	margin-top: 0;
}
.contacts .form input:focus, .contacts .form textarea:focus {
	border-color: #00B2B2;
}
.contacts .form textarea {
	height: 300px;
	resize: none;
}
.contacts .form button {
	margin-top: 20px;
	background-color: #F0543B;
	border: 1px solid #F0543B;
	border-radius: 3px;
	color: #FFF;
	padding: 10px 40px;
}
.contacts p {
	color: #FFF;
	text-align: center;
	font-size: 1rem;
	position: relative;
	z-index: 10;
}
.contacts .df-row-1{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.contacts .df-row-1 .vl{flex:0 1 auto;padding:0 10px;color:#00B2B2;}
@media (max-width:680px) {
	.contacts .container{padding-bottom:30px;}
	.contacts .df-row-1{display:block;}
	.contacts .df-row-1 .vl{display:none;}
	.contacts .itti-logo{margin:10px 0;}
}

.contacts .copyright {
	flex:0 1 auto;
	color: #B8B8C7;
	text-align: center;
	font-size: 0.8rem;
	position: relative;
	z-index: 10;
}
.contacts .itti-logo {
	flex:0 1 auto;
	text-align: center;
	position: relative;
	z-index: 10;
}

.contacts .line-bottom {
	background:#EEE url("i/zig_zag6.png") 0 0 repeat-x;
}
.contacts .line-bottom .container{
	position: relative;padding:10px 0;
}

.contacts .df-row-2{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;margin-left:280px;}
.contacts .df-row-2 > div{flex:0 1 auto;}
@media (max-width:768px) {
	.contacts .df-row-2{margin-left:38%;}
}
@media (max-width:680px) {
	.contacts .df-row-2{margin:0;justify-content:center;}
	.contacts .df-row-2 > div{width:220px;}
}

a.vision-itti-link,
a.studio-itti-link{display:inline-block;box-sizing:border-box;line-height:20px;padding:6px 0;margin:5px 10px;font-size:13px;color:#777777;}
a.vision-itti-link span,
a.studio-itti-link span{padding-left:10px;}
a.vision-itti-link{background:url(/css/i/logo-visual-solutions.png) 0 50% no-repeat;background-size:62px auto;padding-left:62px;}
a.studio-itti-link{background:url(/css/i/logo-web-solutions.png) 0 50% no-repeat;background-size:58px auto;padding-left:58px;}
@media (max-width:680px) {
	a.vision-itti-link{background:url(/css/i/logo-visual-solutions.png) 0 50% no-repeat;background-size:52px auto;padding-left:52px;}
	a.studio-itti-link{background:url(/css/i/logo-web-solutions.png) 0 50% no-repeat;background-size:48px auto;padding-left:48px;}
}
@media (max-width:680px) {

}

.frog-gif {position: absolute;bottom: 0;left: 0;z-index: 1;}
.frog-gif img {vertical-align: bottom;max-width:100%;max-height:100%;}
@media (max-width:768px) {
	.frog-gif{width:36%;max-width:272px;}
}
@media (max-width:680px) {
	.frog-gif{display:none;}
}

.errors {
	text-align: left;
	padding:  10px;
	color: #FE4980;
}


#youtube-video {
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 20;
}

#youtube-video .youtube-video-wrap {
	width: 80%;
	height: 88%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 1920px;
	max-height: 1080px;
}

#youtube-video .youtube-video-iframe {
	width: 100%;
	height: 100%;
	/*padding-right: 40px;*/
}

#youtube-video .youtube-video-close {
	text-align: right;
	cursor: pointer;
}

@media (min-width: 768px) {
	.logo {
		width: auto;
		background: none;
		padding-top: 24px;
		padding-left: 15px;
	}
	.menu-with-icons {
		width: auto;
		float: right;
		background: none;
	}
	.large-video .large-video-mobile {
		display: none;
	}
	.large-video video {
		display: block;
	}
	.phone-banner-mobile img{
		max-width: none;
	}
	.large-video video{
		height: auto;
	}
	.videos .title h1 {
		display: block;
		width: 350px;
		margin: 0 auto;
		font-size: 2.5rem;
	}

	.videos .video-row {
		margin-top: 20px;
		justify-content: center;
		align-content: space-around;
	}
	.videos .video {
		width: 50%;
		max-width: 450px;
		padding: 20px;
		margin-top: 0;
	}
	.who-are-we h1, .what-is-offer h1, .contacts .title h1 {
		font-size: 2rem;
	}
	.how-to-work .row {
		display: flex;
		flex-wrap: wrap;
	}
	.how-to-work .container .row .item{
		width: 50%;
		margin-top: 20px;
		padding: 20px;
	}
	.how-to-work .container .row .item:first-child {
		margin-top: 20px;
	}
	.contacts .form {
		padding: 50px;
	}
	.contacts .contacts-icons {
		justify-content: center;
	}
	.contacts .contacts-icons img {
		vertical-align: middle;
	}
	.contacts .contacts-icons span {
		display: block;
		background-color: #23485F;
	}
	.contacts .contacts-icons a > span {
		border-radius: 30px;
	}
	.contacts .contacts-icons .phone a > span {
		padding-right: 5px;
	}
	.contacts .contacts-icons .mail a > span {
		padding-left: 5px;
	}
	.contacts .contacts-icons .text {
		display: inline;
		color: #FFF;
		padding: 0 15px;
	}
}

@media (min-width: 992px) {
	.large-video {
		/*height: 694px;*/
	}
	.how-to-work .container .title-img {
		width: 220px;
	}
	.how-to-work h1 {
		margin-top: 50px;
		margin-bottom: 30px;
	}
	.how-to-work .container .row .item {
		/*padding: 10px;*/
	}
	.who-are-we .container, .what-is-offer .container {
		width: 970px;
		margin: 0 auto;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 60px;
	}
	.who-are-we p, .what-is-offer p {
		padding-left: 0;
		padding-right: 0;
	}
	.contacts .container {
		padding-top: 20px;
	}
	.contacts .container {
		width: 970px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 170px;
	}
	.contacts .form  {
		text-align: right;
		width: 970px;
		margin-left: auto;
		margin-right: auto;
		padding: 40px;
		max-width: none;
	}
	.contacts .form .form-col {
		width: 55%;
		padding: 10px;
	}
	.contacts .form .form-col:first-child {
		width: 45%;
	}
	.contacts .form textarea {
		margin-top: 0;
		height: 255px;
	}
	.contacts .social-icons {
		margin: 40px auto;
	}

}

@media (min-width: 1200px) {
	.menu-with-icons {
		display: none;
	}
	.menu-with-text, .phone-banner {
		display: block;
	}
	.phone-banner-mobile {
		display: none;
	}
	.videos {
		position: relative;
		background-color: #F7F7F7;
	}
	.videos .line-top {
		background: none;
	}

	.videos .top-shadow {
		display: block;
		position: absolute;
		top: 0%;
		left: 0%;
		background: url(i/shadow.png) 0 0 repeat-x;
		width: 100%;
		height: 10px;
	}
	.videos .title {
		display: none;
	}
	.videos .video-row {
		margin-top: 0;
	}
	.videos .video {
		width: 25%;
	}
	.how-to-work .container > p {
		width: 998px;
		margin: 60px auto;
	}
	.how-to-work .row {
		justify-content: center;
		max-width: 1600px;
		margin: 0 auto;
	}
	.how-to-work .container .row .item {
		width: 26%;
		padding-left: 4%;
		padding-right: 4%;
		max-width: none;
	}
}