/***
* Всплывающее окно оповещения
***/
.tooltip, .arrow:after {
background: #e4e4e4;
border: 2px solid #7b7b7b;
}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: black;
border-radius: 20px;
margin-top: 20px;
text-align: center;
font: bold 11px Arial;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {
opacity: 0;
margin-top: -20px;
}
/***
* Шрифт
***/
/***
* Сброс стилей
***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
img {border: none;}
input {vertical-align: middle;}
table {border-collapse: collapse; border-spacing: 0;}
table td {padding: 0;}
/***
* Основные стили
***/
body {
font: 15px Arial;
width: 100%;
color: #595858;
background: #dcdcdc url('../images/bg.png') repeat center top;
}
a {color: #406e99; outline: none; text-decoration: underline;}
a:hover {text-decoration: none;}
h1 {}
h1.title {
margin-bottom: 5px;
padding: 0;
height: 23px;
line-height: 23px;
text-indent: -9999px;
background: url('../images/titles.png') no-repeat;
}
h1.title-new-works {background-position: center 0;}
h1.title-new-articles {background-position: center -23px;}
h1.title2 {
margin-bottom: 5px;
padding: 0;
height: 26px;
line-height: 23px;
text-indent: -9999px;
background: url('../images/titles2.png') no-repeat;
}
h1.title-new-works2 {background-position: center 0;}
h1.title-new-articles2 {background-position: center -27px;}
h1.title3 {
margin-bottom: 5px;
padding: 0;
height: 26px;
line-height: 23px;
text-indent: -9999px;
background: url('../images/titles3.png') no-repeat;
}
h1.title-new-works3 {background-position: center 0;}
h1.title-new-articles3 {background-position: center -27px;}
/***
* Навигация
***/
.nav .left {background-position: right 0;}
.nav .right {background-position: left 0;}
.nav ul li {float: left; width: 215px; height: 51px;}
.nav ul li a {
display: block;
width: 215px; height: 51px;
text-indent: -9999px;
background: url('../images/menu.png') no-repeat center 0;
}
.nav ul li a.portfolio {background-position: center 0;}
.nav ul li a.portfolio:hover {background-position: center -51px;}
.nav ul li a.blog {background-position: center -102px;}
.nav ul li a.blog:hover {background-position: center -153px;}
.nav ul li a.about {background-position: center -204px;}
.nav ul li a.about:hover {background-position: center -255px;}
.nav ul li a.contacts {background-position: center -306px;}
.nav ul li a.contacts:hover {background-position: center -357px;}
.nav .left ul {float: right; margin-right: 48px;}
.nav .right ul {float: left; margin-left: 48px;}
/***
* Шапка
***/
.header {position: relative; height: 178px;}
.header .topline .left, .header .topline .right {float: left; width: 50%; height: 8px; background: #525252 url('../images/topline.png');}
.header .topline .left {background-position: right 0;}
.header .topline .right {background-position: left -8px;}
.header .arr {
position: absolute;
left: 50%; top: 87px; width: 96px; height: 91px;
margin-left: -48px;
background: url('../images/nav.png') no-repeat 0 -87px;
}
.header .nav .left, .header .nav .right {
float: left;
width: 50%; height: 87px;
background: #353535 url('../images/nav.png');
}
.header .nav {margin-top: 1px;}
.header .nav ul {margin-top: 20px;}
.header .logo {
position: absolute;
left: 50%; top: 0; width: 146px; height: 91px;
margin-left: -74px;
text-indent: -9999px;
background: url('../images/logo.png') no-repeat;
}
/***
* Подвал
***/
.footer {position: relative;}
.footer .left, .footer .right {float: left; width: 50%; height: 123px; background: #353535 url('../images/footer.png');}
.footer .left {background-position: right 0;}
.footer .right {background-position: left 0;}
.footer .nav ul {margin-top: 40px;}
.footer .arr {
position: absolute;
left: 50%; top: 0; width: 96px; height: 123px;
margin-left: -48px;
background: url('../images/footer.png') no-repeat 0 -123px;
}
.footer .design {
position: absolute;
left: 50%; bottom: 0; width: 152px; height: 20px;
margin-left: -76px;
text-indent: -9999px;
background: url('../images/design.png') no-repeat;
}
/***
* Мобильная шапка
***/
.m-header {
display: none;
height: 77px;
background: #65a2d3 url('../images/m-header.png') repeat center top;
}
.m-header .btn-menu {
float: left;
width: 106px; height: 77px;
background: url('../images/m-header.png') no-repeat 0 -77px;
}
.m-header .btn-menu:hover {
background-position: -106px -77px;
}
.m-header .btn-menu-active, .m-header .btn-menu-active:hover {
background-position: -212px -77px;
}
.m-header .btn-x {
float: right;
width: 70px; height: 77px;
background: url('../images/m-header.png') no-repeat -318px -77px;
}
.m-header .btn-x:hover {
float: right;
width: 70px; height: 77px;
background: url('../images/m-header.png') no-repeat -433px -77px;
}
.m-header .btn-i {
float: right;
width: 45px; height: 77px;
background: url('../images/m-header.png') no-repeat -388px -77px;
}
.m-header .btn-i:hover {
float: right;
width: 45px; height: 77px;
background: url('../images/m-header.png') no-repeat -503px -77px;
}
/***
* Мобильный подвал
***/
.m-footer {
display: none;
height: 48px;
font: 13px/48px Arial;
color: #fff;
text-align: center;
background: #a7a7a7 url('../images/m-footer.png') repeat-x center top;
border-top: 1px solid #929292;
}
/***
* Основная часть
***/
.content {width: 100%; max-width: 1180px; margin: -50px auto 0 auto;}
.content .left, .content .right {float: left; width: 50%; max-width: 590px; padding-bottom: 25px;}
.content .left {background: url('../images/vr.png') repeat-y right bottom;}
.content .column {width: 486px; margin: 0 auto;}
/* Работа */
.content .work-wrapper p {
font-family: Arial;
}
.content .work-wrapper .title {
margin-bottom: 5px;
font-weight: bold;
font-size: 17px;
}
.content .work-wrapper .image {
padding: 10px 10px 6px 10px;
background: #d7d7d7 url('../images/bg-dark.png');
border: 1px solid #acacac;
border-radius: 2px;
}
.content .work-wrapper .image img {
width: 462px; height: 310px;
border: 1px solid #acacac;
border-radius: 2px;
}
.content .work-wrapper2 .image2 {
padding: 10px 10px 6px 10px;
border: 1px solid #acacac;
border-radius: 2px;
}
.content .work-wrapper2 .image2 img {
width: 150px; height: 150px;
border: 1px solid #acacac;
border-radius: 2px;
}
.content .work-wrapper .meta {
margin-top: 4px;
font-size: 14px;
}
.content .work-wrapper .meta p {
float: left;
}
.content .work-wrapper .meta .price {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #595858;
}
.content .work-wrapper .meta .date {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #595858;
}
.content .work-wrapper .meta .get {
float: right;
}
/* Статья */
.content .article-wrapper .meta {
margin-bottom: 17px;
font: 17px Arial;
}
.content .article-wrapper .meta .title {
float: left;
}
.content .article-wrapper .meta .date {
float: right;
}
.content .readmore a {
float: right;
width: 153px; height: 38px;
text-indent: -9999px;
background: url('../images/readmore.png') no-repeat 0 0;
}
.content .readmore a:hover {
background-position: 0 -38px;
}
/* Кнопка Показать еще */
.content .show-more {
display: block;
margin: 35px 0;
font: 18px/50px Arial;
color: #5b5b6b;
text-align: center;
text-decoration: none;
background: #d7d7d7 url('../images/bg-dark.png'); border: 1px solid #9c9c9c; border-radius: 2px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.content .show-more:hover {
color: #406e99;
border-color: #acacac;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.15);
}
/***
* Горизонтальный разделить
***/
.hr {height: 29px; background: url('../images/hr.png') no-repeat center center;}
.hr-tall {height: 75px;}
/***
* Текстовый блок
***/
.text {margin-bottom: 25px; line-height: 1.5em; color: #4c5e6e;}
.text h1 {margin-top: 30px;}
.text h1:first-child {margin-top: 0;}
.text h2 {margin: 24px 0 10px; font-size: 20px; font-weight: normal;}
.text h3 {margin: 15px 0 0 0; font-size: 18px; font-weight: normal;}
.text p {margin: 10px 0; line-height: 1.5em;}
.text ul li {list-style-type: disc; margin: 3px 0 3px 35px; line-height: 1.25em;}
.text ol li {list-style-type: decimal; margin: 3px 0 3px 35px; line-height: 1.25em;}
.text table {width: 100%; border-collapse: collapse;}
.text table th, .text table td {padding: 4px; border: 1px solid #000538;}
.text table th {font-weight: bold; text-align: center;}
.text strong {font-weight: bold;}
.text em {font-style: Arial;}
/***
* Вспомогательные стили
***/
.clear {clear: both;}
.blur {color: #7089bc;}
.hidden {display: none;}
@media screen and (max-width: 1024px)
{
.header {display: block;}
.content .column {width: 400px;}
.content .work-wrapper .image img {width: 376px; height: 252px;}
.content .work-wrapper .meta .get {float: left;}
}
@media screen and (max-width: 960px)
{
.header .nav ul {margin-top: 28px;}
.footer .nav ul {margin-top: 50px;}
.nav ul li {width: 143px; height: 34px;}
.nav ul li a {width: 143px; height: 34px; background-image: url('../images/menu-small.png');}
.nav ul li a.portfolio {background-position: center 0;}
.nav ul li a.portfolio:hover {background-position: center -34px;}
.nav ul li a.blog {background-position: center -68px;}
.nav ul li a.blog:hover {background-position: center -102px;}
.nav ul li a.about {background-position: center -136px;}
.nav ul li a.about:hover {background-position: center -170px;}
.nav ul li a.contacts {background-position: center -204px;}
.nav ul li a.contacts:hover {background-position: center -238px;}
}
@media screen and (max-width: 880px)
{
.content {margin-top: 0;}
.content .left, .content .right {float: none; width: 486px; margin: 0 auto;}
.content .left {background: none;}
.content .column {width: 486px;}
.content .work-wrapper .image img {width: 462px; height: 310px;}
.footer {margin-top: 20px;}
.footer .arr {background-position: 0 -246px;}
.content .work-wrapper .meta .get {float: right;}
}
@media screen and (max-width: 680px)
{
.header {height: auto; background: #2b2b2b url('../images/dark.png');}
.header .nav .left, .header .nav .right {background: none;}
.nav .left ul {margin-right: 0;}
.nav .right ul {margin-left: 0;}
.header .arr {display: none;}
.header .logo {display: none;}
.footer .arr {display: none;}
.content {margin-top: 20px;}
}
@media screen and (max-width: 680px)
{
.nav ul {float: none; width: 100%;}
.nav ul li {float: none; display: block; width: 100%;}
.nav ul li a {display: block; width: 100%;}
.header .nav ul {margin-top: 10px;}
.footer .nav ul {margin-top: 30px;}
}
@media screen and (max-width: 500px)
{
.m-header {display: block;}
.m-footer {display: block;}
.header {display: none; padding: 0 10px;}
.header .topline {display: none;}
.header .nav {margin-top: 0;}
.header .nav .left, .header .nav .right {float: none; width: 100%; height: auto;}
.header .nav ul {margin-top: 0;}
.footer {display: none;}
.content {margin-bottom: 10px;}
.content .left, .content .right {width: auto;}
.content .column {width: 400px;}
.content .work-wrapper .image img {width: 376px; height: 252px;}
.content .work-wrapper .meta p,
.content .work-wrapper .meta .price,
.content .work-wrapper .meta .date,
.content .work-wrapper .meta .get {float: none; margin: 0; padding: 0; border: 0;}
.hr-tall {height: 29px;}
}
@media screen and (max-width: 410px)
{
.content .column {width: 250px;}
.content .work-wrapper .image {padding: 5px 5px 1px 5px;}
.content .work-wrapper .image img {width: 236px; height: 162px;}
}
@media screen and (max-width: 250px)
{
.m-header .btn-i {display: none;}
.content .column {width: 180px;}
.content .work-wrapper .image {padding: 2px 2px 0px 2px;}
.content .work-wrapper .image img {width: 172px; height: 116px;}
}