/* CSS Document */

*, html {margin:0; padding:0;}
.clear {clear:both;}
body { 
	font:17px/25px sans-serif;
    font-family: HelveticaNeue-Light;
    /*font-family: HelveticaNeue-Thin;*/
    /*font-family: HelveticaNeue-Regular;*/
	font-weight: 100;
	color: #777; 
	/*background:#FFF url('../images/tattoo/bg0.gif') repeat-x top;*/
}
.container { 
    max-width:1200px;
    margin:0 auto;
	width:100%; 
	clear:both;
    -webkit-box-shadow: 0 0 106px rgba(0,0,0,.16);
    -moz-box-shadow: 0 0 106px rgba(0,0,0,.16);
    box-shadow: 0 0 106px rgba(0,0,0,.16);
}
.container:after {content:""; display:block; line-height: 0; height:0; clear:both; visibility:hidden;}
.content {
    max-width:calc(1200px - 100px);
    margin:0 auto;
}
/*.content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}*/
img, embed, object, video, iframe {max-width: 100%;}

H1, H2 {
	font:bold italic 54px "droid_serifbold_italic", Georgia, Times, serif;
}
H1 {
    display: inline-block;
	color: #333;
}
#first H1 {padding: 4.5% 0 6%;}
H1 em {
    color:#BEAA73; 
    display: block;
    font:italic 0.7em "droid_serifitalic", Georgia, Times, serif;
}
H2 {
    font:italic 45px "droid_serifitalic", Georgia, Times, serif;
    color: #444;
    padding:20px 0 20px;
    text-align: center;
}
H3 {font:30px robotolight, Arial, sans-serif; text-transform: none; color:#EE7B04;}
H4 {
	color: #FFF;
	font-size: 25px;
	font-weight: 100;
	border-bottom: 1px solid #FFF;
	margin-bottom: 10px;
}
p {
}
a {color: inherit;}
a:hover {text-decoration: none;}

														/* HEADER */
#HEADER .content {
    max-width:1200px;
    display: flex;
    justify-content: space-between; /* горизонтальное распределение */
    align-items: flex-end; /* выравнивание по вертикали */
    margin-bottom: 20px;
    padding: 0;
}
#logo { 
	width:267px;
	height:100px;
	display: block;
    margin-top: 60px;
	background: url('../images/tattoo/logo.gif') no-repeat left bottom;
}
#tel {display: none;}

											/* MAIN-NAV */
#main-nav {
    width: calc(100% - 268px);
}
#main-nav ul {
	margin: 0 auto; 
	width: 100%;
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
    border-bottom: 19px solid #231f20;
}
#main-nav li {
    /*display: inline-block;*/
    position: relative;
    overflow: hidden;
}
#main-nav a {
	display: block; 
	color: #555; 
	padding: 10px 15px; 
	text-decoration: none; 
	font: 1.2em sans-serif;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#main-nav li:hover {overflow: visible;}
#main-nav a:hover {background: #231f20; color: #FFF;}

											/* submenu */
#main-nav li ul {
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
    padding-top: 19px;
	z-index:10;
	/*display:none;*/
	opacity:0;
    border: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#main-nav li ul li {
	display:block;
	border-left: none;
	width:100%;
}
#main-nav li ul li a {
	display:block;
	padding: 10px 10px 10px 10px;
	margin:0;
	text-align:left;
	text-transform: none;
	border-bottom: 1px solid #777;
    background: #231f20;
    color: #999;
    font-size: 1.0em;
}
#main-nav li ul a:hover {
	background-color: #333;
	color:#EEE !important;
}
#main-nav li:hover ul, .nav li.over ul {
	display: block;
	opacity:1;
	top:43px;
}



#main-img {
    max-width: 100%;
	background:#FFF url('../images/tattoo/top-bg.gif') repeat 0 50px;
    border-top: 90px solid #FFF;
}
#main-img div {
    max-width: 1200px;
    margin: 0 auto 0;
    padding-bottom: 90px;
    background: #FFF;
    position: relative;
    z-index: 5;
    margin-top: -90px;
}

															/* CONTENT */
#CENTER .content:first-of-type {}
#CENTER .content {
    /*float: left;
    max-width: calc(75% - 100px);*/
    margin: 0 50px;
    max-width: 1100px;
    padding-bottom: 50px;
}
#benefits {
}
ol {
    padding-bottom: 50px;
    margin: 0 -50px;
    counter-reset: wslist1;/*сбрасываем счетчик списка*/
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    justify-content: center;
    align-items: flex-end; /* выравнивание по вертикали */
}
ol li {
	width: 33%;
	padding-left: 100px;
    margin:25px 2%;
	font-size: 18px;
	color: #555;
	position: relative;
	list-style: none;
}
ol li:before {
    display: inline-block;
    height: 22px;
    width: 22px;
	position: absolute;
    top: -5px;
    left: 0px;
    font:italic 43px/22px "droid_serifitalic", Georgia, Times, serif; 
    color: #fff;
    content: counter(wslist1);/* вывод счетчика*/
    counter-increment: wslist1;/*значение счетчика увеличиваем на один */
    background: #444;
    border-radius: 50%;
    padding: 34px;
    text-align: center;
}

                                                                /* SIDE BLOCK */
#SIDEBLOCK {
    float: left;
    width: 25%;
    padding-top: 75px;
    display: none;
}
#sidenav H2 {
    display: none;
}
#sidenav li {
    list-style: none;
    border-bottom: 1px solid #CCC;
}
#sidenav li:first-of-type {
    border-top: 1px solid #CCC;
}
#sidenav a {
    display: block;
    text-decoration: none;
    padding: 10px 0 10px 20px;
    position: relative;
    color: #555;
    color:#BEAA73; 
    font: 1.1em droid_serifitalic, Georgia, sans-serif;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#sidenav a:before {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    left: 5px;
    top: 12px;
    content: "\f105";
    font: 20px "fontawesome";
}
#sidenav a:hover {
    color: #555;
    background: #EEE;
}

																/* GALLERY */
#fotogal {clear: both;}
#fotogal ul {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    list-style: none;
}
#first #fotogal ul {padding:90px 0 50px;}
#first #fotogal H2 {display: none;}
#fotogal li {
    flex-basis: 33.333333%;
    position: relative;
	text-align:left;
	font:1.1em sans-serif;
    cursor: pointer;
    overflow: hidden;
}
#fotogal img {
    display: block;
    background-color: black;
    opacity: 0.95;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#fotogal li:before {
    /*content:""; 
    display:block;
    width: 100%;
    height:100%; 
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;*/
}
#fotogal li:hover:before {
    /*opacity: 0.2;*/
}
#fotogal li:hover img {
    opacity: 1;
    transform: scale(1.05);
}
#fotogal span {display: none;}

                                                                    /* FOOTER */
.container.FOOTER {
	width: 100%;
    max-width: 100%;
    background: #000;
	/*background-blend-mode: color;*/
	color: #777;
    min-height: 120px;
}
.FOOTER .container {max-width: 100%;}
.FOOTER .container:first-of-type {
	background: #000 url('../images/tattoo/foot-img.jpg') no-repeat right top;
	background-size: cover;
	margin-bottom: -120px;
}
.FOOTER .container:last-of-type {
	border-top: 1px solid rgba(255, 255, 255, .5);
	background: rgba(0, 0, 0, .75);
}
.FOOTER .content {max-width: 1200px;}
.FOOTER .content:after {content:""; display:block; line-height: 0; height:0; clear:both; visibility:hidden;}
.FOOTER H2 {
	color: #CCC;
	padding: 50px 0;
}
.FOOTER p {margin-bottom: 10px; color: #777;}
.FOOTER a {color: #FFF;}

#footer-L, #footer-R {
	float:left;
	width: 50%;
	height: 80px;
	padding-top: 40px;
}
#footer-L {margin-left: 0; }
#footer-L a {
    width: 100px;
    color: #EEE;
    height: 50px;
    display: inline-block;
    background: url(http://pi-arts.ru/pix/pi-arts.png) no-repeat center bottom;
    text-align: center;
    font:100 12px sans-serif;
    opacity: 0.5;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#footer-L a:hover {opacity: 1;}
#footer-R {text-align: right;}


													/* FEEDBACK FORM */
#request {
    /*width: 300px;
    background: #EEE;*/
    float: none;
	clear: both;
	width: 50%;
    padding: 0 0 150px;
    background: none;
}
input, textarea {
    width: 30%;
    display: block;
    float: left;
	font-size: 18px;
	color: #555;
	padding: 10px 15px;
	margin:0 10px 10px 0;
	border-width: 0px;
	outline: 1px solid rgba(0, 0, 0, .3);
	outline-offset: -1px;
	background: rgba(0, 0, 0, .1);
}
input:nth-of-type(3) {margin-right: 0;}
.FOOTER input, .FOOTER textarea {
	width: calc(100% - 30px);
	margin:0 0px 10px 0;
    float: none;
}
.FOOTER input, .FOOTER textarea {
	color: #777;
	background: rgba(0, 0, 0, .75);
	outline: 1px solid rgba(255, 255, 255, .2);
}
textarea {
    width: calc(100% - 40px);
}
#request p {clear: both;}
input:hover, textarea:hover {
	/*border: 1px solid rgba(52, 152, 219, 1);*/
	/*box-shadow: 1px 1px 3px 1px rgba(52, 152, 219, 0.2) inset;*/
	outline: 1px solid rgba(0, 0, 0, .5);
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.FOOTER input:hover, .FOOTER textarea:hover {
	outline: 1px solid rgba(255, 255, 255, .5);
}
input:focus, textarea:focus {
	/*background: rgba(255, 255, 255, .99);*/
}

::-webkit-input-placeholder {color:#777;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}
::-moz-placeholder {color:#777;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 19+ */
:-moz-placeholder {color:#777;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 18- */
:-ms-input-placeholder {color:#777;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}

:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

#buttn {
	width: auto;
    clear: both;
	padding:15px 30px;
	margin: 0 auto;
	text-transform: uppercase;
	cursor: pointer;
}
.FOOTER #buttn:hover {
	border-color: #AAA;
	background: rgba(255, 255, 255, .1);
	color: #FFF;
}
#buttn:hover {
	border-color: rgba(0, 0, 0, .9);
	background: rgba(0, 0, 0, .9);
	color: #FFF;
}
													/* SOCIAL */
.social {
	width: 200px;
    text-align: right;
    display: inline-block;
}
#header .social {
    padding: 80px 0px 95px;
	float: right;
}
.social a {
	display: inline-block;
	width: 44px;
	height: 44px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-image: url('../images/social.gif');
	background-repeat: no-repeat;
	background-position-y: -44px;
	opacity: .8;
}
.social a:hover {background-position-y: 0px; opacity: 1;}
.social a#soc-vk {background-position-x: -44px;}
.social a#soc-yt {background-position-x: -88px;}
.social a#soc-in {background-position-x: -132px;}