/*общее*/

*{outline: none;}
html,body{
	margin:0;	font-size:20px;	font-family:'PT Sans', sans-serif;	color:#333;    height:100%;    min-height:100%;}
.clearfix:after {    content: "";    display: table;    clear: both;}
h1{	text-align:center;	font-size:36px;	color:#555;	margin:30px 0;	text-transform:uppercase;	margin-bottom:110px;	display: block;	padding-top: 40px;	position: relative;    margin-top: 0;}
h2{	color:#444;}
.page h1:after{	content: "";	position: absolute;	width:120px;	height: 3px;	background: #bbb;	top:90px;	left:50%;	margin-left: -60px;}
a,a:visited{	color:#26619d;}
ul{	padding: 0;	margin: 0;	list-style: none;}
button{display:block;border-style:solid;border-color: #999;background-color: transparent;padding: 10px 30px;font-size: 0.875em;width: auto;margin:auto;margin-top: 1.875em;transition: all 150ms ease 0s;text-transform: uppercase;cursor:pointer;}
button:hover{	border-color:#d0eff0;}
/*общее*/


#mainwrap{    width: 100%;    height: 100%;    position: relative;    transition: all 0.2s;    left: 0;}
.wrap{	width:1150px;	margin:auto;	position:relative;}
.wrapbig{	width:1200px;	margin:auto;}
#banner{	width:100%;	height:100%;	margin-top:0px;	background:url(../images/main3.jpg) center bottom;    background-size: cover;	position:relative;}
#biglogo{position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -100px;width: 500px;height: 200px;text-align: center;font-size: 26px;color: #568d3e;}
#biglogo img{width: 100%}
#content{min-height:300px;padding:40px 35px 50px 35px;line-height:24px;}

/*HEADER*/
#header{height:125px;width:100%;position:fixed;background:#FFF;top:0;-moz-transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;z-index:100;}
#header.min{height:55px;box-shadow: 0 2px 2px rgba(0,0,0,.2);}
#header #logo{	display:block;
	position:absolute;
	left:10px;
	top:35px;
	width:258px;
	height:40px;
	transition:all 0.2s;
}
#header #phone{
	position:absolute;
	top:40px;
	right:10px;
	font-size:22px;
	border-bottom:1px dotted;
	transition:all 0.2s;
}
#logophone{
	position:relative;
	width:100%;
}
#header.min #logo{width:220px;height:33px;top:7px;}
#header.min #phone{top:10px;}
#header.min #menu{padding-top:6px;}
#header.min #mobmenubutton{top:16px;}
/*HEADER*/

/*MENU*/
#menu{
	width:700px;
	padding-top:40px;
	padding-left:325px;
	transition: all 0.2s ease-in-out 0s;
}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	text-align:center;
}
#menu > ul > li{
	position: relative;
	display:block;
	float:left;
	width:150px;
	transition: all 0.2s ease-in-out 0s;
	border-top:3px solid;
}
#menu > ul > li:nth-child(1){
	border-top-color:#db041a;
	box-shadow:0px -12px 15px -15px rgba(219, 4, 26, 0.3);
}
#menu > ul > li:nth-child(2){
	border-top-color:#9960f6;
	box-shadow:0px -12px 15px -15px rgba(153, 96, 246, 0.3);
}
#menu > ul > li:nth-child(3){
	border-top-color:#3f5dfb;
	box-shadow:0px -12px 15px -15px rgba(63, 93, 251, 0.3);
}
#menu > ul > li:nth-child(4){
	border-top-color:#019fff;
	box-shadow:0px -12px 15px -15px rgba(1, 159, 255, 0.3);
}

#menu > ul > li:after{
	content:"";
	position:absolute;
	display:block;
	width:1px;
	height:70px;
	top:-30px;
	right:-1px;
	background:url(../images/menuline.jpg) no-repeat;
}
#menu > ul > li:last-child:after{
	content:"";
	display:none;
}
#menu > ul > li a{
	display:block;
	height:35px;
	color:#777;
	text-decoration:none;
	font: 18px 'PT Sans', sans-serif;  letter-spacing: 0.05em/*80*/;
	line-height:35px;
	padding:0px 10px 25px;
	transition:color 0.3s ;
}
#menu ul li a:hover{color: #000;}
#menu > ul > li a.active{color: #555;font-weight: bold;}
#menu li:hover > ul, .nav li.et-hover > ul {
	-moz-transition: opacity .2s ease-in-out;
	-webkit-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}
.submenu{top:10px;width:100%;margin-top: -40px;margin-bottom: 55px;box-sizing:border-box;min-height:50px;}
.submenu_inner{max-width:1100px;margin:auto;}
.submenu li{display:inline-block;}
.submenu a{text-decoration: none;color: #777;font-size: 23px;}
.submenu a.active{color: #000000;border-bottom: 2px dotted #ccc;}
.submenu a:hover{color: #000;}
.submenu ul{width: 100%;text-align:center;margin: 0;padding:10px 0;list-style: outside none none;}
.submenu li a{	font-weight:normal;	text-align:left;	padding:0px;	line-height:normal;	height:20px;}
.submenu li{	padding:0px 15px;	margin:5px 0px;}
/*MENU*/

.page{line-height:28px;padding-bottom: 100px;min-height: 500px;}
.page.nobanner{	padding-top:125px;}

#portfoliomain{	width:960px;	margin: auto;	padding-top: 50px;}
.portfoliomain-item{	float:left;	position:relative;	margin:10px;	width:300px;	height:300px;	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);	overflow: hidden;}
.portfoliomain-item img{	height: 100%;}
.portfoliomain-item:hover .portfoliomain-title{	visibility:visible;	opacity:1;}
.portfoliomain-title{	visibility:hidden;	opacity:0;	position:absolute;	left:0px;	top:0px;	width:300px;	height:300px;	transition:all 0.4s;	color:#444;	padding:30px;	padding-top: 100px;
	font-size:21px;	box-sizing:border-box;	/*background: url(images/black70.png);*/	background-color: rgba(250, 250, 250, 0.9);	text-transform:uppercase;	text-align: center;}

/*scrollTop*/
#scrollTop{	position:fixed;	bottom:30px;	right:30px;	width:60px;	height:100px;	cursor:pointer;}
#scrollTop:after {	position: absolute;	content: "";	border: 15px solid transparent;	border-bottom-color:#aaa;	left: 15px;	top: 50%;	margin-top: -15px;}
#scrollTop:hover:after{	border-bottom-color:#777;}
/*scrollTop*/

#counter{position:absolute;left:-100px;top:0;}

#studio h1{margin-bottom:110px;display: block;padding-top: 40px;color: #fff;position: relative;}
#studio h1:after{content: "";position: absolute;width:180px;height: 3px;background: rgba(255, 255, 255, 0.5);top:90px;left:50%;margin-left: -90px;}
#tips{padding-top:55px;}
#tips h2,#portfoliomain h2{text-align:center;margin: 35px auto;}
.tip-item{width:50%;float:left;box-sizing:border-box;padding:0 50px;position:relative;text-align: center;}
.tip-title{font-size:26px;text-transform: uppercase;}
.tip-icon{width:70px;height:70px;margin: 20px auto;}
.tip-icon.tip1{background:url(../images/studioicons1.png);}
.tip-icon.tip2{background:url(../images/studioicons2.png);}
.tip-icon.tip3{background:url(../images/studioicons3.png);}
.tip-icon.tip4{background:url(../images/studioicons4.png);}
#contacts h1{margin-bottom:80px;}
#contacts div{width:400px;margin:10px auto;font-size:24px;}
#contacts span{display:inline-block;width:100px;text-align:right;padding-right:10px;font-size:16px;color:#666;}
.serviceblock{margin-bottom: 60px;}
.serviceblock .left{width: 40%; float: left; text-align: right}
.serviceblock .right{width: 60%; float: right;}
.serviceblock ul li{position: relative;margin-left: 14px;}
.serviceblock ul li::before{display: block;	content: '';	position: absolute;	top: 13px;	left: -14px;	height: 5px;	width: 5px;	background-color: #79b822;}
.serviceblock:nth-of-type(1) .left img {width: 160px;}
.serviceblock:nth-of-type(2) .left img {width: 160px;}
.serviceblock:nth-of-type(3) .left img {width: 120px; margin-right: 20px;}
.serviceblock .right .services-text{padding-left: 40px; padding-top: 1px;}
.serviceblock .right .services-text h2{margin-top: 0;}
.studiobanner{width:100%;min-height: 500px;background: url("/images/studio.jpg") center;   background-size: cover;}
#about{width:1150px;margin: auto;color: #fff;box-sizing: border-box;text-shadow: 0px 0px 2px rgba(55, 55, 55, 0.9);overflow: hidden;padding-bottom: 30px;}
#about img{opacity: 0.6;float:left; margin:0px 45px 30px;}
#abouttext{float: right; width: calc(100% - 330px); margin-top: -18px}

.pf-grid-sizer{width: 345px}
.pf-item { position: relative; width: 345px; height: 242px; float: left;  margin-bottom: 10px;}
.pf-item--width2 { width: 700px; height: 700px}
.pf-item img{width: 100%; height: 100%}

.pf-item.hovered .pf-itemtitle{visibility:visible;opacity:1;}
.pf-item {
	display:block;position:relative;width:260px;height:185px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;
	-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:none;transition:none
}
.pf-itemtitle{opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;transition: all 250ms ease-in-out;color:#333;
	box-sizing:border-box;background-color: #fff;text-align: center;z-index: 111;}
.pf-itemtitle .textbox{transition: all .3s .1s cubic-bezier(.455,.03,.515,.955); position: absolute; left: 0; transform: translateY(-50%); top: 50%; padding: 30px; box-sizing: border-box;width: 100%;}
.pf-itemtitle .title{margin-bottom:10px;font-size:26px;font-weight: bold;text-transform:uppercase;transform: translate(0,15px);
	transition: all .15s 75ms cubic-bezier(.25,.46,.45,.94);opacity: 0;}
.pf-itemtitle .descr{font-size: 18px; color:#777; transition: all .15s 75ms cubic-bezier(.25,.46,.45,.94); opacity: 0; text-transform: uppercase;}

.pf-item:hover .pf-itemtitle{opacity: .9; }
.pf-item:hover .pf-itemtitle .textbox{}
.pf-item:hover .pf-itemtitle .title{opacity: 1;transition: all .3s .1s cubic-bezier(.455,.03,.515,.955);transform: translate(0,0);}
.pf-item:hover .pf-itemtitle .descr{opacity: 1;transition: all .3s .25s cubic-bezier(.455,.03,.515,.955);}



.pf-item .loader_img {display:none}
.pf-item.is-loading .pf-item__image {background-image:url(/local/templates/.default/markup_nota2/dist/images/loader.gif)!important;background-size:auto}
.pf-item__image {
	z-index:1;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;
	-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;}
.pf-item__image,.pf-item__overlay {position:absolute;top:0;left:0;right:0;bottom:0}
/*.pf-item:hover .pf-item__image {-webkit-transform:scale(1.1);transform:scale(1.1)}*/

.projectpage-top{position: relative;text-align: center;margin-left: auto;margin-right: auto; height: 750px}
.projectpage-description{	padding-top: 150px;	color: #fff;z-index: 10;}
.projectpage-title{font-size: 52px;color: #fff;font-weight: 600; margin-bottom: 35px;}
.projectpage-subtitle{color: #fff;text-transform: uppercase;font-size: 20px;}
.projectpage-text{margin: auto;text-align: center;}
.projectpage-link a{ color: #fff; text-transform: uppercase}
.projectpage-content{ max-width: 1000px; margin: auto; margin-top: -300px;position: relative;text-align: center}
.projectpage-content img{ z-index: 20;width: 100%}
.projectpage-content img.mob{ max-width: 450px;}

.prevproject,.nextproject{position: fixed;top: 50%;margin-top: -25px;z-index: 100;width: 100px;height: 42px;}
.prevproject{left: 0;}
.prevproject::after{
	content: '';position: absolute;left: 40px;top: 0;width: 24px;
    height: 42px;background: url('/images/arrows.svg') no-repeat;
    background-size: 48px 84px;background-position: 0 0;cursor: pointer;
}
.nextproject{right: 0;}
.nextproject::after{
	content: '';
	position: absolute;
	right: 40px;
	top: 0;
	width: 24px;
	height: 42px;
    background: url('/images/arrows.svg') no-repeat;
    background-size: 48px 84px;
    background-position: -24px 0;
	cursor: pointer;
}
.nextproject:hover::after{background-position: -24px -42px;}
.prevproject:hover::after{background-position: 0 -42px;}
.prevproject a,.nextproject a{
	display: block;
	height: 100%;
	line-height: 41px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
.projects-nav-title{
	display: block;
    position: absolute;
	height: 42px;
	width: 200px;
	opacity: 0;
}
.prevproject .projects-nav-title{left: 63px;}
.nextproject .projects-nav-title{right: 63px;}

.prevproject:hover .projects-nav-title,.nextproject:hover .projects-nav-title{
	opacity: 1;
    color: #fff;
	background: #333;
}
img.withshadow{
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.projectscreentext{font-size: 24px;}


/*
.main #header{background: none}
.main #menu > ul > li a{color: #eee}
.main #menu > ul > li a:hover{color: #bbb}
.main #menu > ul > li::after{opacity: 0.1}

.main #phone{color: #eee}
*/


.icon-burger:after{content:"";display:block;position:absolute;top:-15px;left:-15px;bottom:-15px;right:-15px}
.icon-burger{position:relative;top:3px;margin-left:24px}
.icon-burger{position:relative;display:inline-block;width:28px;height:24px}
.icon-burger i{top:9px}
.icon-burger i,.icon-burger i:after,.icon-burger i:before{position:absolute;left:0;display:block;width:100%;height:4px;background-color: #888;transition:background-color .3s ease}
/*.main .icon-burger i,.main .icon-burger i:after,.main .icon-burger i:before{background-color: #eee;}*/
.icon-burger i:after,.icon-burger i:before{content:""}
.icon-burger i:before{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
.icon-burger i:after{-webkit-transform:translateY(10px);transform:translateY(10px)}
.closebutton .icon-burger i{opacity:1;background-color:transparent;transition-delay:0ms}
.closebutton .icon-burger i:before{-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg)}
.closebutton .icon-burger i:after{-webkit-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg)}


#mobmenubutton{display: none;position: absolute; left: 10px; top: 40px; cursor: pointer; transition: all 0.2s;}
#mobmenu{width: 250px; height:100%; position: fixed; top:0; background: #222; overflow: auto; display: none; transform: translateX(-250px); padding: 30px; box-sizing: border-box; z-index: 101}
#mobmenu ul li a{
    position: relative;
    color: rgba(255,255,255,0.6);
    padding: 9px 0;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 16px !important;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
}
#mobmenu ul li a:hover{color: #fff}
#mobmenu ul li a.active{color: #fff}
#mobmenu.opened{transform: translateX(0px);}
#mainwrap.mobMenuOpened{/*transform: translateX(250px);*/ left: 250px;}
#mobmenu{transition: transform .2s ease}

.pushed-left #wrap, .pushed-left #footer {
    -webkit-transform: translate3d(-200px, 0px, 0px);
    transform: translate3d(-200px, 0px, 0px);
}




#footer{border-top: 1px solid #ddd; height: 110px;padding-top: 30px;}
#footer .copy{width: 250px; height: 78px; background: url(../images/logofooter.png) no-repeat left top; float: left; color: #999; padding-left: 140px;font-size: 16px;}
#footer .socials{width: 150px; float: right;}
.socials .btn{display:inline-block;width:35px;height:35px;margin-bottom:5px;transition:background 0.4s;cursor:pointer;}
.btn-vk{background:#DADADA url(../images/socicon1w.png) center center no-repeat;}
.btn-vk:hover{    background:#2c4666 url(../images/socicon1w.png) center center no-repeat;}
.btn-facebook{    background:#DADADA  url(../images/socicon2w.png) center center no-repeat;}
.btn-facebook:hover{    background:#264078 url(../images/socicon2w.png) center center no-repeat;}
.btn-telegram{    background:  url(../images/telegram.png) center center no-repeat;}