@font-face {
    font-family: ProximaNovaRegular; 
    src: url(../fonts/ProximaNovaRegular.otf);
}

@font-face {
    font-family: ProximaNovaRegularItalic; 
    src: url(../fonts/ProximaNovaRegularItalic.otf);
}

@font-face {
    font-family: ProximaNovaBold; 
    src: url(../fonts/ProximaNovaBold.otf);
}

@font-face {
    font-family: ProximaNovaExtraCondensedBlack; 
    src: url(../fonts/ProximaNovaBlack.otf);
}

@font-face {
    font-family: ProximaNovaCondensedBold; 
    src: url(../fonts/ProximaNovaCondensedBold.otf);
}

@font-face {
    font-family: ProximaNovaLightItalic; 
    src: url(../fonts/ProximaNovaLightItalic.otf);
}

@font-face {
    font-family: ProximaNovaLight;
    src: url(../fonts/ProximaNovaLight.otf);
}


/*------------------------------------------------------------*
**  Главная
**------------------------------------------------------------*/

/* CSS Document */


html, body {
font-size: 16px;
font-family: ProximaNovaRegular;
color:#222;
margin:0px;
background:#f1f1f1;
}

a {
text-decoration:none;
color:#2c3e50;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}

a:hover {
text-decoration:none;
color:#2c3e50;
}

.clear {
clear:both;
}

input:not([type=checkbox]):not([type=radio]),
textarea, 
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin:0px;
    padding:0px;
    font-size:100%;
}

ul, p, img {
margin:0px;
padding:0px;
border:0px;
list-style:none;
}

.site-width {
max-width:100%;
width:100%;
margin:0 auto;
}

#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #e3ecfd;
    z-index:99999999999;
}

#page-preloader .spinner {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('../images/mortphing-shape-gif-preloader.gif') no-repeat 50% 50%;
    margin: -150px 0 0 -200px;
    z-index:99999999999;
}

#wrapper {
margin:0px 0 0 0;
}

#wrapper .site-width {
display:table;
height: 100vh;
top:0px;
}

.td-width1 {
display:table-cell;
}

.td-width2 {
display:table-cell;
}

#wrapper .sidebar {
display:table-cell;
vertical-align:top;
width:250px;
min-width:250px;
-moz-box-shadow: 5px 0px 15px rgba(0,0,0,.15);
-webkit-box-shadow: 5px 0px 15px rgba(0,0,0,.15);
box-shadow: 5px 0px 15px rgba(0,0,0,.15);
position:relative;
z-index:9999;
background:#222;
}

#wrapper .container {
display:table-cell;
vertical-align:top;
padding:70px 25px;
position:relative;
max-width:1170px;
}

#wrapper .sidebar .logo {
padding:15px 10px;
text-align:center;
color:#fff;
text-transform:lowercase;
margin:0 0 15px 0;
}

#wrapper .sidebar .logo a {
font-size:35px;
text-transform:uppercase;
font-family: ProximaNovaBold;
color:#fff;
}

#wrapper .sidebar .logo a:hover {
text-decoration:none;
}

#wrapper .account-menu li {
padding:15px 10px 15px 15px;
display:table;
width:100%;
position:relative;
}

#wrapper .account-menu li:after {
content:"";
border-bottom:1px #333 solid;
height:1px;
width:90%;
display:block;
margin:0 auto;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}

#wrapper .account-menu li.active {
padding:15px 10px 15px 10px;
border-left:5px #007baf solid;
}

#wrapper .sidebar .account-menu li a {
font-size:16px;
display:block;
float:left;
font-family: ProximaNovaLight;
color:#fff;
}

#wrapper .sidebar .account-menu li a:hover {
text-decoration:none;
}

#wrapper .account-menu li:hover a {
color:#007baf;
}

#wrapper .account-menu li.active a {
color:#007baf;
font-size:18px;
}

#wrapper .account-menu li:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
width:26px;
height:26px;
float:left;
margin:-5px 15px 0 0;
font-size:26px;
color:#fff;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}

#wrapper .account-menu li:nth-child(1):before {
content: "\f015";
}

#wrapper .account-menu li:nth-child(2):before {
content: "\f1c5";
}

#wrapper .account-menu li:nth-child(3):before {
content: "\f086";
}

#wrapper .account-menu li:hover:before, #wrapper .account-menu li.active:before {
color:#007baf;
}

#wrapper .sidebar .block-support {
margin:30px 10px 0 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color:#fff;
padding:15px;
position:relative;
background:#222;
-moz-box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
}

#wrapper .sidebar .block-support .title {
}

#wrapper .sidebar .block-support .title i, #wrapper .sidebar .block-support .title p {
display:inline-block;
margin:0 5px;
font-size:18px;
}

#wrapper .sidebar .block-support a {
display:block;
color:#fff;
padding:0 0 0 30px;
margin:15px 0 0 0px;
}

#wrapper .sidebar .block-support a:hover {
color:#007baf;
}

#wrapper .sidebar .block-support a.icq {
background:url(../images/icq.png) no-repeat 0 0;
height:20px;
}

#wrapper .sidebar .block-support a.skype {
background:url(../images/skype.png) no-repeat 0 0;
height:20px;
}

#wrapper .sidebar .block-support a.vk {
background:url(../images/vk.png) no-repeat 0 0;
height:20px;
}

#wrapper .sidebar .block-support a.mail {
background:url(../images/email.png) no-repeat 0 0;
height:20px;
}

#wrapper .sidebar .counter {
margin:20px 0 0 0;
text-align:center;
}

#wrapper .page-home-statistics {
margin:0 0 50px 0;
}

#wrapper .title-page {
font-size:35px;
position:relative;
display:table;
margin:0 auto;
padding:0 0 5px 40px;
text-transform:uppercase;
font-family: ProximaNovaBold; 
}

#wrapper .title-page span {
color:#007baf;
}

#wrapper .title-page:after {
content:"";
display:block;
height:2px;
width:50%;
margin:0 auto;
position:absolute;
bottom:0px;
left:0px;
right:0px;
background:#007baf;
}

#wrapper .page-home-statistics .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f080";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-home-statistics ul {
display:table;
margin:30px auto 0 auto;
}

#wrapper .page-home-statistics ul li {
display:table-cell;
width:25%;
text-align:center;
padding:0 20px;
}

#wrapper .page-home-statistics ul li span {
font-size:80px;
color:#007baf;
font-family: ProximaNovaBold; 
}

#wrapper .page-home-statistics ul li p {
font-size:20px;
}

#wrapper .page-home-advantages {
margin:0 0 50px 0;
background:#ссс;
padding:30px 10px;
}

#wrapper .page-home-advantages img {
max-width:100%;
height:100px;
}

#wrapper .page-home-advantages .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f064";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-home-advantages ul {
display:table;
margin:45px auto 0 auto;
}

#wrapper .page-home-advantages ul li {
display:table-cell;
width:33.333%;
text-align:center;
padding:0 20px;
}

#wrapper .page-home-advantages ul li span {
font-family: ProximaNovaBold;
font-size:20px;
}

#wrapper .page-home-advantages ul li p {
margin:5px 0 0 0;
}

#wrapper .page-home-work .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f164";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-home-work ul {
display:table;
margin:45px auto 0 auto;
width:100%;
}

#wrapper .page-home-work ul li {
display:table-cell;
width:25%;
text-align:center;
padding:0 10px;
position:relative;
}

#wrapper .page-home-work ul li .radius {
border:2px #222 solid;
display:table;
margin:0 auto;
padding:50px 0 0 0;
width:100%;
max-width:200px;
height:200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100%;
}

#wrapper .page-home-work ul li:hover .radius {
border:2px #007baf solid;
color:#007baf;
}

#wrapper .page-home-work ul li i {
display:block;
font-size:60px;
}

#wrapper .page-home-work ul li span {
display:block;
text-transform:uppercase;
font-family: ProximaNovaBold;
margin:10px 0 0 0;
}

#wrapper .page-home-work ul li:hover .hover {
display:block;
}

#wrapper .page-home-work ul li .hover {
display:none;
position:absolute;
bottom:225px;
left:50%;
margin:0 0 0 -100px;
width:200px;
background:#007baf;
color:#fff;
padding:10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index:999999;
font-size:14px;
}

#wrapper .page-home-work ul li .hover:after {
content:"";
display:block;
border: 20px solid transparent;	
border-top: 20px solid #007baf;
position:absolute;
bottom:-40px;
left:50%;
margin:0 0 0 -20px;
z-index:9999;
}

#wrapper .page-home-portfolio {
margin:0 0 50px 0;
}

#wrapper .page-home-portfolio .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f1c5";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-home-portfolio ul {
margin:30px 0 0 0;
}

#wrapper .page-home-portfolio li {
float:left;
width:20%;
height:290px;
padding:0 5px;
overflow:hidden;
}

#wrapper .page-home-portfolio li .image {
height:290px;
overflow:hidden;
background-size:cover !important;
border:2px #007baf solid;
}

#wrapper .page-home-portfolio .all-button {

}

#wrapper .page-home-portfolio .all-button a {
background:#007baf;
color:#fff;
text-transform:uppercase;
display:table;
margin:30px auto 0 auto;
padding:10px 20px;
}

#wrapper .page-home-portfolio .all-button a:hover {
background:#222;
}

#wrapper .page-gallery-portfolio {
margin:0 0 50px 0;
}

#wrapper .page-gallery-portfolio .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f1c5";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-gallery-portfolio ul {
margin:30px 0 0 0;
}

#wrapper .page-gallery-portfolio li {
float:left;
width:20%;
height:290px;
padding:0 5px;
overflow:hidden;
margin:0 0 10px 0;
}

#wrapper .page-gallery-portfolio li .image {
height:290px;
overflow:hidden;
background-size:cover !important;
border:2px #007baf solid;
}

#wrapper .page-gallery-portfolio .all-button {

}

#wrapper .page-gallery-portfolio .all-button a {
background:#007baf;
color:#fff;
text-transform:uppercase;
display:table;
margin:30px auto 0 auto;
padding:10px 20px;
}

#wrapper .page-gallery-portfolio .all-button a:hover {
background:#222;
}

#wrapper .page-reviews .title-page:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:block;
font-size:26px;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
content: "\f086";
position:absolute;
top:8px;
left:0px;
}

#wrapper .page-reviews ul {
margin:30px 0 0 0;
}

#wrapper .page-reviews li {
background:#555;
padding:20px;
color:#fff;
-moz-box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
box-shadow:inset 0px 0px 15px rgba(0,0,0,.5);
margin:0 0 10px 0;
}

#wrapper .page-reviews li span {
font-family: ProximaNovaBold;
font-size:20px;
display:block;
padding:0 0 5px 0;
}

#wrapper .page-gallery-portfolio .description {
margin:20px 0 0 0;
text-align:center;
}
















@media screen and (min-width:1900px) {

.td-width1 {
display:table-cell;
width:10%;
}

.td-width2 {
display:table-cell;
width:10%;
}

#wrapper .sidebar {
display:table-cell;
vertical-align:top;
}

#wrapper .container {
display:table-cell;
vertical-align:top;
padding:70px 25px;
position:relative;
max-width:1170px;
}



}


@media screen and (max-width:1210px) {

#wrapper .page-home-portfolio li:last-child {
display:none;
}

#wrapper .page-home-portfolio li {
width:25%;
}

#wrapper .page-gallery-portfolio li {
width:25%;
}



}


@media screen and (max-width:1100px) {


}



@media screen and (max-width:1000px) {

#wrapper .sidebar {
display:none;
}

.mobile-console {
display:block;
position:absolute;
top:10px;
left:10px;
z-index:9998;
}

.mobile-console a {
display:block;
width:32px;
height:32px;
background:url(../images/console26.png) no-repeat;
cursor:pointer;
}

#mobile-console {
position:absolute !important;
left:0px;
top:0px;
bottom:0px;
height: 100vh;
}

.mobile-close {
width:20px;
height:20px;
background:url(../images/popup-close.png) no-repeat;
position:absolute;
top:10px;
right:-30px;
cursor:pointer;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;

}

.mobile-close:hover {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.mobile-menu-icon {
display:block;
cursor:pointer;
width:50px;
height:47px;
background:url(../images/mobile-icon.png) no-repeat;
background-size:32px;
margin:9px 0 0 0;
}

#mobile-menu {
display:none;
position:absolute;
top:50px;
left:0px;
min-width:200px;
background:#201a1b;
z-index:9999;
padding:20px;
-moz-box-shadow: 3px 3px 7px rgba(32,26,27,1);
-webkit-box-shadow: 3px 3px 7px rgba(32,26,27,1);
box-shadow: 3px 3px 7px rgba(32,26,27,1);
}


}


@media screen and (max-width:750px) {

#wrapper .page-home-statistics ul li {
width:50%;
display:block;
float:left;
margin:0 0 30px 0;
}

#wrapper .page-home-portfolio li {
width:50%;
margin:0 0 10px 0;
}

#wrapper .page-gallery-portfolio li {
width:50%;
}

#wrapper .page-home-advantages ul li {
display:block;
width:100%;
padding:0 20px;
margin:0 0 30px 0;
}

#wrapper .page-home-work ul li {
display:block;
float:left;
width:50%;
text-align:center;
padding:0 10px;
position:relative;
margin:0 0 20px 0;
}


}




@media screen and (max-width:450px) {

#wrapper .page-home-statistics ul li {
width:100%;
display:block;
float:none;
}

#wrapper .title-page {
font-size: 25px;
text-align:center;
padding: 0 0 5px 0px;
}

#wrapper .title-page:before {
display:none !important;
}

#wrapper .page-home-portfolio li {
width:100%;
margin:0 0 10px 0;
}

#wrapper .page-gallery-portfolio li {
width:100%;
}

#wrapper .page-home-advantages ul li {
display:block;
width:100%;
padding:0 20px;
margin:0 0 30px 0;
}

#wrapper .page-home-work ul li {
display:block;
float:none;
width:100%;
}


}