@font-face {
  font-family: 'Circe';
  src: url("./fonts/Circe.otf");
}
@font-face {
  font-family: 'Circe ExtraBold';
  src: url("./fonts/Circe-extrabold.ttf");
}
@font-face {
  font-family: 'HelveticaNeueCyr-Roman';
  src: url("./fonts/HelveticaNeueCyr-Roman.otf");
}
@font-face {
    font-family: 'WarnockProBold';
    src: url('./fonts/WarnockProBold.eot');
    src: url('./fonts/WarnockProBold.eot') format('embedded-opentype'),
         url('./fonts/WarnockProBold.woff2') format('woff2'),
         url('./fonts/WarnockProBold.woff') format('woff'),
         url('./fonts/WarnockProBold.ttf') format('truetype'),
         url('./fonts/WarnockProBold.svg#WarnockProBold') format('svg');
}
@font-face {
    font-family: 'NotoSerif-Bold';
    src: url('./fonts/NotoSerif-Bold.eot');
    src: url('./fonts/NotoSerif-Bold.eot') format('embedded-opentype'),
         url('./fonts/NotoSerif-Bold.woff') format('woff'),
         url('./fonts/NotoSerif-Bold.ttf') format('truetype'),
         url('./fonts/NotoSerif-Bold.svg#NotoSerif-Bold') format('svg');
}

body {
	font-family: 'Circe';
}
html {
	height: 100%;
}
body {
	height: 100%;
}
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.1s ease;
}
a:hover {
    opacity: 0.7;
}
.header {
	padding: 0 70px 0 70px;
	font-style: 20px;
}
.header .navContainer {
	height: 70px;
	line-height: 70px;
	font-size: 20px;
}
.header .logo {
	float: left;
	cursor: pointer;
}
.header .logo:hover,
.button:hover,
.footer .social > div:hover, 
.nav .list:hover,
.nav .link:hover,
.nav .lang:hover,
.shareButton:hover
{
	opacity: 0.5;
}
.projects .project:hover {
	opacity: 0.7;
}
.header .logo,
.button,
.footer .social > div, 
.nav .list,
.nav .link,
.nav .lang,
.shareButton
{
	-webkit-transition: all 0.2s ease-in-out;
	  -moz-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
}
.projects .project {
	-webkit-transition: all 0.2s ease-in-out;
	  -moz-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
}
.header .logo .part1 {
	color: #333333;
}
.header .logo .part2 {
	color: #b0b0b0;
}
.header .nav {
	float: right;
	color: #ababab;
}
.header .nav .navItem.active {
	color: #333333;
}
.header .nav .navItem {
	display: inline-block;
	margin-right: 15px;
	cursor: pointer;
	text-decoration: none;
    color: inherit;
}
.header .nav .navItem:last-child {
	margin-right: 0;
	cursor: initial;
}
.header .nav .lang {
	font-family: 'HelveticaNeueCyr-Roman';
	font-size: 12px;
	color: #333333;
	border-radius: 50%;
	border: 1px solid #b1b1b1;
	height: 30px;
	width: 30px;
	margin-right: 0;
    line-height: 32px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.header .nav .list {
	height: 20px;
    width: 21px;
    margin-right: 15px;
    background-image: url(../images/list.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    display: none;
    cursor: pointer;
}
.headerImage {
	padding: 0 70px 70px 70px;
	height: 77%;
}
.headerImage .bigImage {
	height: 100%;
	background-size: cover;
	background-position: center;
	position: relative;
	text-align: center;
	/*margin-bottom: 70px;*/
}
.headerImage .bigImage .textBlock {
	position: absolute;
	bottom: 43px;
	width: 100%;
}
.headerImage .bigImage .productText {
	font-size: 22px;
	margin-bottom: 15px;
}
.headerImage .bigImage .productName {
	font-size: 40px;
    font-family: 'NotoSerif-Bold';
    display: block;
    margin-bottom: 8px;
}
.bigImage .button {
	font-size: 14px;
	font-family: 'Circe ExtraBold';
	line-height: 31px;
	padding: 0 18px;
	border: 1px solid #b0b0b0;
	border-radius: 5px;
	display: inline-block;
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 2px;
	text-decoration: none;
}
.projects {
	background-color: #f3efe9;
	padding-bottom: 25px;
	padding-left: 70px;
	padding-right: 70px;
	/*margin-top: 70px;*/
}
.scrollHack {
	background-color: #f3efe9;
	display: block;
}
.projects .content {
	max-width: 1321px;
	margin: auto;
	font-size: 0;
	/* margin-right: -3%; */
	padding-right: -3%;
}
.projects .project .image {
	width: 100%;
	max-width: 300px;
	margin-bottom: 22px;
	display: block;
	margin: auto;
}
.projects .project {
	text-align: center;
	/* height: 400px; */
	display: inline-block;
	/* float: left; */
	width: 22%;
	/* padding: 0 20px 20px 20px; */
	box-sizing: border-box;
	margin-right: 3%;
	cursor: pointer;
}
.projects .project.mobileonly {
	display: none;
}
.project .namesection {
    height: 100px;
    box-sizing: border-box;
    padding-top: 23px;
}
.projects .project .name {
	/* margin-top: 22px; */
	font-size: 23px;
	color: #333333;
	margin-bottom: 7px;
}
.projects .project .for {
	font-size: 16px;
	color: #ababab;
}
.about {
	padding: 70px 70px 0 70px;
	text-align: center;
}
.about .bigImage {
	height: 780px;
	background-size: cover;
}
.about h2 {
	font-size: 40px;
	margin-bottom: 23px;
	line-height: 33px;
	font-family: 'NotoSerif-Bold';
}
.about .text {
	/*padding-top: 280px;*/
	font-size: 16px;
	line-height: 30px;
	width: 65%;
	max-width: 850px;
	margin: auto;
	/* letter-spacing: 0px; */
	margin-bottom: 29px;
}
.footer {
	padding-top: 70px;
	text-align: center;
	font-size: 16px;
	padding-bottom: 60px;
	color: #333333;
}
.footer p {
	text-align: center;
	font-size: 16px;
	line-height: 29px;
	letter-spacing: 0.2px;
	max-width: 85%;
	margin: auto;
}
.footer .social {
	margin-bottom: 20px;
}
.footer .social > a {
	margin: 0 6px 0 6px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: 40px;
	width: 40px;
	display: inline-block;
	cursor: pointer;
}
.footer .social .instagram {
	background: url(../images/instagram.png);
}
.footer .social .pinterest {
	background: url(../images/pinterest.png);
}
.footer .social .mail {
	background: url(../images/mail.png);
}
.footer .social .twitter {
	background: url(../images/twitter.png);
}
.footer .social .facebook {
	background: url(../images/facebook.png);
}
.footer .social .vk {
	background: url(../images/vk.png);
}
.singleproject.wrap {
    padding-top: 8px;
}
.singleproject .content {
	padding: 0 70px 0 70px;
	max-width: 1128px;
	margin: auto;
	font-size: 20px;
}
.singleproject .maintext {
	border-bottom: 1px solid #eeeeee;
}
.features {
	/* padding-bottom: 58px; */
	font-size: 0;
}
.features > div {
	font-size: 20px;
	display: inline-block;
	/* float: left; */
	width: 50%;
	box-sizing: border-box;
	/* margin-right: 0%; */
	vertical-align: top;
	margin-bottom: 58px;
}
.features.fullwidth > div {
	float: none;
	display: block;
	width: 100%;
}
.features .left {
	padding-right: 35px;
	/* width: 48.6%; */
}
.features .right {
	padding-left: 35px;
	padding-top: 19px;
	/* line-height: 34px; */
}
.features li {
	border-bottom: 1px solid #eeeeee;
	line-height: 63px;
	padding-left: 19px;
	padding-bottom: 0px;
	padding-top: 4px;
}
.features .name {
	color: black;
}
.features .value {
	color: darkgray;
}
.features p {
	line-height: 34px;
}
.maintext img {
	width: 100%;
}
.maintext .textblock {
	/*margin-top: -3px;*/
}
.maintext > div {
	margin-bottom: 70px;
}
.maintext {
	padding-bottom: 35px;
	line-height: 30px;
	font-size: 18px;
}
.maintext .double {
    font-size: 0;
    margin-bottom: 0;
}
.maintext .double > div {
	/* float: left; */
	width: 50%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 70px;
	font-size: 18px;
}
.maintext .double .left {
	padding-right: 35px;
	padding-left: 0;
}
.maintext .double .right {
	padding-right: 0;
	padding-left: 35px;
}

.maintext li {
    border-bottom: 1px solid #eeeeee;
    /* padding-left: 19px; */
    color: darkgray;
    line-height: 30px;
    font-size: 18px;
    padding-top: 14px;
    padding-bottom: 15px;
}
.maintext li strong {
	color: black;
}
.maintext .double ul {
	margin-top: -14px;
}
/*.maintext .double li {
	padding-top: 0; 
}*/
.maintext p {
    margin-bottom: 1.6em;
}
.maintext p:last-child {
    margin-bottom: 0;
}
.seealso .content {
	padding-top: 70px;
	/* max-width: 1360px; */
	/* margin: auto; */
}
.share {
	text-align: center;
	font-size: 16px;
	margin-left: -76px;
	margin-top: 45px;
	margin-bottom: 35px;
}
.share span {
	margin-right: 14px;
}
.share .shareButton {
	display: inline-block;
	line-height: 38px;
	width: 118px;
	text-align: center;
	border: 1px solid gray;
	border-radius: 5px;
	margin-right: 6px;
	cursor: pointer;
	margin-bottom: 10px;
}
.share .shareButton.fb {
	border-color: #3b579d;
}
.share .shareButton.tw {
	border-color: #08acee;
}
.share .shareButton.li {
	border-color: #007bb6;
}
.share .shareButton.pi {
	border-color: #dd4c39;
}
.only320 {
	display: none;
}
.mobilemenu {
	position: fixed;
	height: 100%;
	width: 375px;
	right: -375px;
	background-color: white;
	z-index: 10;
}
.mobilemenu.active {
	right: 0;
}
.mobilemenu .closeButton {
	height: 28px;
	width: 28px;
	background-image: url(../images/close.png);
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 40px;
	right: 40px;
	cursor: pointer;
}
.mobilemenu .closeButton:hover {
	opacity: 0.5;
}
.mobilemenu .mobilenav {
	margin-top: 40%;
	text-align: center;
}
.mobilemenu .mobilenav .link {
	margin: auto;
	display: inline-block;
	line-height: 60px;
	cursor: pointer;
	font-size: 24px;
	color: #ababab;
}
.mobilemenu .mobilenav .link.active {
	color: #333333;
}
.mobilemenu .mobilenav .link:hover {
	opacity: 0.5;
}
.mobileOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background-color: black;
	display: none;
	z-index: 9;
}

.contacts {
	/* padding-bottom: 25px; */
	padding-left: 70px;
	padding-right: 70px;
}
.contacts .features {
	display: block;
}
.contacts .content {
	max-width: 1360px;
	margin: auto;
}
.contacts .maintext {
	margin-bottom: 0;
    padding-bottom: 0;
}
.maintext h1, .maintext h2, .maintext h3, .maintext h4, .maintext h5 {
	font-weight: bold;
	margin-bottom: 20px;
}
.maintext h2 {
	font-size: 30px;
	color: #333333;
}
.maintext h3 {
	font-size: 1.1em;
}
.maintext .heading {
	text-align: center;
}
.antimargin	{
	margin-right: -3%;
}

.maintext .maininfo {
	line-height: 32px;
}
.maintext .maininfo.single {
	font-size: 20px;
}
.maintext .maininfo.double > div {
	font-size: 20px;
}
.maintext .maininfo li {
	font-size: 20px;
    padding-top: 16px;
    padding-bottom: 15px;
    line-height: 32px;
}
.maintext .maininfo.double ul {
    margin-top: -16px;
}
.maintext .maininfo p {
    margin-bottom: 1.7em;
}
.maintext .maininfo p:last-child {
    margin-bottom: 0;
}
.maintext .maininfo .right {
    color: #c7a481;
    font-weight: bold;
}

@media ( min-width: 1024px )  {
	.mobileonly {
		display: none;
	}
}
@media ( min-width: 1440px )  {
	.maintext {
		line-height: 34px;
		font-size: 20px;
	}
	.maintext .double > div {
		font-size: 20px;
	}
	.maintext li {
		font-size: 20px;
	    padding-top: 18px;
	    padding-bottom: 17px;
	}
	.maintext .double ul {
	    margin-top: -14px;
	}
	.maintext p {
	    margin-bottom: 1.7em;
	}
	.maintext .maininfo {
		line-height: 36px;
	}
	.maintext .maininfo.single {
		font-size: 22px;
	}
	.maintext .maininfo.double > div {
		font-size: 22px;
	}
	.maintext .maininfo li {
		font-size: 22px;
	    padding-top: 17px;
	    padding-bottom: 17px;
	    line-height: 37px;
	}
	.maintext .maininfo.double ul {
	    margin-top: -17px;
	}
	.maintext .maininfo p {
	    margin-bottom: 1.7em;
	}
	.maintext .maininfo p:last-child {
	    margin-bottom: 0;
	}
}
@media ( max-width: 1023px ) {
	.header .nav > .navItem.link {
		display: none;
	}
	.header .nav > .navItem .list {
		display: inline-block;
	}
	.singleproject.wrap {
	    padding-top: 0;
	}
	.projects .project {
		width: 30%;
		/* padding: 0 10px 20px 10px; */
		margin-right: 3%;
	}
	.projects .antimargin {
		margin-right: -4%;
	}
	.projects {
		background-color: #f3efe9;
		padding-bottom: 25px;
		padding-left: 50px;
		padding-right: 50px;
		margin-top: 0;
		padding-top: 20px;
	}
	
	.headerImage {
		display: none;
	}
	.scrollHack {
		display: none;
	}
	.projects .project.mobileonly {
		display: inline-block;
	}
	.header {
		padding: 0 50px 0 50px;
	}
	.about {
	    padding: 0;
	}
	.about .bigImage {
		height: 480px;
	}
	.singleproject .content {
		padding-left: 50px;
		padding-right: 50px;
	}
	.header {
		font-style: 20px;
	}
	.mobilegray {
		background-color: #f3efe9;
	}
	.features > div {
		width: 100%;
	}
	.features .left, 
	.features .right {
		padding: 0;
	}
	.maintext .double > div {
		width: 100%;
		margin-bottom: 70px;
	}
	.maintext .double .left,
	.maintext .double .right {
		padding-left: 0;
		padding-right: 0;
	}
	.projects .project.project_3 {
		display: none;
	}
	.share {
		margin-left: 0;
	}
	.share span {
		display: block;
	    margin-bottom: 16px;
	}
	.maintext .double > div, .maintext .single {
	    margin-bottom: 40px;
	}
	.maintext .heading {
		text-align: left;
		margin-bottom: 30px;
	}
}
@media ( max-width: 749px ) {
	.projects {
		padding-left: 25px;
		padding-right: 25px;
	}
	.singleproject .content {
		padding-left: 25px;
		padding-right: 25px;
	}
	.header {
		padding: 0 25px 0 25px;
	}
}
@media ( max-width: 639px ) {
	.projects .project {
		width: 45%;
		margin-right: 5%;
	}
	.projects .antimargin {
		margin-right: -5%;
	}
	.projects .project.project_3 {
		display: inline-block;
	}
	.about .text {
	    width: 90%;
	}
	.about .text h2 {
	    display: none;
	}
}
@media ( max-width: 479px ) {
	.projects .project {
		width: 100%;
		/* padding: 0 0 20px 0; */
	}
	.header {
		padding: 0 25px 0 25px;
	}
	.projects .antimargin {
	    margin-right: 0px;
	}
}
@media ( max-width: 390px ) {
	.mobilemenu {
		width: 100%;
	}
}
@media ( max-width: 320px ) {
/*	.singleproject .content {
		padding-left: 25px;
		padding-right: 25px;
	}
	.projects {
		padding-left: 25px;
		padding-right: 25px;
	}
	.header {
		padding: 0 25px 0 25px;
	}*/
	.footer .social .vk {
		display: none;
	}
	.no320 {
		display: none;
	}
	.only320 {
		display: initial;
	}
}