@font-face {
    font-family: open_sanslight; 
    src: url(../fonts/OpenSans-Light.ttf); 
}
@font-face {
    font-family: open_sansregular; 
    src: url(../fonts/OpenSans-Regular.ttf); 
}
@font-face {
    font-family: open_sansbold; 
    src: url(../fonts/OpenSans-Semibold.ttf); 
}
@font-face {
    font-family: ttdrugs; 
    src: url(../fonts/TTDrugs-Thin.otf); 
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.container-max {
    max-width: 2560px;
    margin: 0 auto;
}
#loading {    
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    width: 100%;
    flex-direction: column;
}
.to-top-wrap {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 70px;
    height: 70px;
    z-index: 99999999999;
}
.to-top-wrap .to-top {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 70px;
    height: 70px;
    z-index: 999;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: url(../images/to-top.png);
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
}
.to-top-wrap:hover .to-top {

}


/* ----------------------------------------------------------- FONTS: ---------------------------------------------------------- */
.aboutPeople .item .tag,
#worksList .tag,
#homeServices .info .subtitle,
#worksList .worksItem a {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 0.8em;    
}
#blogs .item .cat,
footer,
.budgetDescr,
.thanks p {
    font-size: 1em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
}
#blogs .item .tl-tag,
.blogtImg .heading .cat,
.blogtImg .heading .tag a,
#homeSlider .tag,
#homeServicesList .subtitle,
#homeServicesList .icons,
#ourPerks .subtitle,
#ourPerks .icons p:last-of-type,
#ourSocial .text p,
#contactForm form input,
#contactForm form textarea, 
#contactForm form select,
#contactForm form label,
.contactsContent .text {
    font-size: 1em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
}
.aboutQuality .item .txt,
#homeServicesList .buttons a,
#ourPerks .buttons a,
#contactForm form input[type="submit"],
.serviceHeading .right .price,
.serviceHeading .right .buttons a {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 1em;    
}
.serviceMenu a p {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 1em;   
}
.aboutImg .text,
.aboutDescr .text, 
.aboutStory .text,
.aboutAwards p,
.blogText,
.blogText p,
#projects a .tag,
#projects-menu a .tag,
.projectDescr .projectText,
.projectDescr .value,
.projectPlan,
.projectBudget,
.serviceHeading .right .text,
.aboutDescr p,
.aboutStory p { 
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 1em;
} 
.aboutImg .heading .buttons a {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 1.1em;
}
.projectDescr .tag,
#ourPerks .icons p:first-of-type,
header .navbar ul li span,
header .navbar ul li a,
.pushy .menu a,
.pushy .menu span {
    font-size: 1em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
}
.aboutPeople .item .tit {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 2em;
}
.aboutQuality .item .tit {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 2.2em;
}
#homeServices .info .title {
    font-size: 2.2em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
}
#homeSlider .name,
#ourPerks .title,
#ourSocial .title,
#ourAwards .title,
#contactForm .title,
.contactsContent .tit {
    font-size: 2.45em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    text-transform: uppercase;
}
.aboutImg .tit,
.aboutAwards .tit,
.aboutDescr .tit,
.aboutStory .tit,
.blogtImg .heading .tit,
#projects a .name,
#projects-menu a .name,
.projectDescr .name,
#homeServicesList .title,
#worksList .name,
.serviceHeading .right .tit{
    font-size: 2.6em;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    text-transform: uppercase;
}

@media (min-width: 320px) {
    .aboutPeople .item .tag {
        font-size: 0.5em; 
    }
    #homeServices .info .subtitle,
    #worksList .tag {
        font-size: 0.8em;
    }
    .aboutImg .text,
    .aboutImg .heading .buttons a,
    .aboutDescr .text,
    .aboutQuality .item .txt,
    .aboutStory .text,
    .aboutAwards p,
    .blogText,
    .blogText p,
    #projects a .tag,
    #projects-menu a .tag,
    .projectDescr .projectText,
    .projectDescr .value,
    .projectPlan,
    .projectBudget,
    #homeSlider .tag,
    #homeServicesList .subtitle,
    #homeServicesList .icons,
    #ourPerks .subtitle,
    #ourPerks .icons p:last-of-type,
    #ourSocial .text p,
    #contactForm form input,
    #contactForm form textarea, 
    #contactForm form select,
    #contactForm form label,
    .contactsContent .text,
    footer,
    .serviceHeading .right .text,
    #homeServicesList .buttons a,
    .aboutStory p,
    .thanks p {
        font-size: 0.8em;
    }
    #ourPerks .buttons a,
    #contactForm form input[type="submit"],
    .serviceHeading .right .price,
    .serviceHeading .right .buttons a {
        font-size: 1em;
    }
    #blogs .item .tit {
        font-size: 1.6em;
    }
    .aboutPeople .item .tit {
        font-size: 1.5em;
    }
    .aboutQuality .item .tit {
        font-size: 1.6em;
    }
    .serviceHeading .right .tit {
        font-size: 1.8em;
    }
    #projects a .name {
        font-size: 2em;
    }
    #projects-menu a .name {
        font-size: 2em;
    }
    #homeServices .info .title {
        font-size: 2.2em;
    }
    #worksList .name,
    #ourPerks .title{
        font-size: 2.25em;
    }
    .aboutImg .tit,
    .aboutAwards .tit,
    .aboutDescr .tit,
    .aboutStory .tit,
    .blogtImg .heading .tit,
    .projectDescr .name,
    #homeServicesList .title,
    #homeSlider .name,
    #ourSocial .title,
    #ourAwards .title,
    #contactForm .title,
    .contactsContent .tit {
        font-size: 2.45em;
    }
}
@media (min-width: 425px) {
    #blogs .item .tit {
        font-size: 1.8em;
    }
}
@media (min-width: 576px) {
    #blogs .item .tit {
        font-size: 1em;
    }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .aboutQuality .item .txt {
        font-size: 0.8em;
    }
    #homeServices .info .subtitle,
    #worksList .worksItem a {
        font-size: 1em;
    }
    .blogText,
    .blogText p,
    .aboutDescr p,
    .aboutImg .text,
    .aboutDescr .text,
    .aboutStory .text,
    .aboutStory p,
    .aboutAwards p a,
    .thanks p {
        font-size: 1em; 
    }
    .projectDescr .projectText,
    .projectDescr .value,
    .projectPlan,
    .projectBudget,
    #homeServicesList .subtitle,
    #homeServicesList .icons,
    #ourPerks .subtitle,
    #ourPerks .icons p:last-of-type,
    #ourSocial .text p,
    #contactForm form input,
    #contactForm form textarea,
    #contactForm form select,
    .contactsContent .text,
    footer,
    .serviceHeading .right .text,
    #contactForm form label {
        font-size: 1em;
    }
    #contactForm form input[type="submit"],
    #ourPerks .buttons a,
    #homeServicesList .buttons a,
    .serviceHeading .right .price,
    .serviceHeading .right .buttons a {
        font-size: 1.1em;
    }
    #ourPerks .icons p:first-of-type {
        font-size: 1.6em;
    }
    #worksList .name,
    #homeServices .info .title,
    .serviceHeading .right .tit,
    .aboutImg .tit,
    .aboutAwards .tit,
    .aboutDescr .tit,
    .aboutStory .tit,
    .blogtImg .heading .tit,
    .projectDescr .name,
    #homeServicesList .title,
    #homeSlider .name,
    #ourPerks .title,
    #ourSocial .title,
    #ourAwards .title,
    #contactForm .title,
    .contactsContent .tit {
        font-size: 2.6em;
    }
    .serviceMenu a p {
        font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
        font-size: 1em;   
    }
}
@media (min-width: 1100px) {
    .aboutPeople .item .tag {
        font-size: 0.6em; 
    }
    .aboutPeople .item .tit {
        font-size: 1.6em;
    }
}
@media (min-width: 1200px) {
    .aboutQuality .item .txt {
        font-size: 1em;  
    }
    #projects a .tag {
        font-size: 1em;
    }
    #projects-menu a .tag {
        font-size: 1em;
    }
    .serviceHeading .right .tit,
    #projects a .name {
        font-size: 2.6em;
    }
    #projects-menu a .name {
        font-size: 2.6em;
    }
}
@media (min-width: 1440px) {
    #blogs .item .tit {
        font-size: 1.6em;
    }
}
@media (min-width: 1600px) {
    .aboutPeople .item .tag {
        font-size: 0.8em; 
    }
}
@media (min-width: 1920px) {
    
}
/* ----------------------------------------------------------- :FONTS ---------------------------------------------------------- */

/* ----------------------------------------------------------- ELEMENTS: ---------------------------------------------------------- */
.btn-light {
    background-color: white;
    border: 2px solid black;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    width: 90%;
    margin: 0 auto;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 1.1em;
}
.btn-light:hover {
    text-decoration: none;
    background-color: black;
    border: 2px solid black;
    color: white;
}
.fancybox-button.fancybox-custom {
    top: 0;
    width: 30%;
    height: 100%;
    background: none;
}
.fancybox-button__prev {
    left: 0;
}
.fancybox-button__next {
    right: 0;
}
.fancybox-toolbar {
    z-index: 99998!important;
}
.fancybox-navigation .fancybox-button div {
    width: 46px;
    height: 100%;
}
.fancybox-navigation .fancybox-button.fancybox-button__prev div {
    float: left;
}
.fancybox-navigation .fancybox-button.fancybox-button__next div {
    float: right;
}
.img-responsive {
    width: 100%;
    height: 100%;
    display: block;
}
@media (min-width: 992px) {
    .btn-light {
        width: 426px;
    }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1300px;
  }
}
/* ----------------------------------------------------------- :ELEMENTS ---------------------------------------------------------- */

/* ----------------------------------------------------------- MENU: ----------------------------------------------------------- */
.main {
    padding-top: 49px;
}
header {    
    background: #000;
    height: 49px;
    position: fixed;
    z-index: 100;
}
header button {
    background: none;
    border: 0px;
}
header .navbar ul {
    margin:0px;
    padding:0px;
}
header .navbar ul:not(.dropdown-menu) {
    display: flex
}
header .navbar ul li {
    position: relative;
    float: left;
    margin-left: 25px;
    border-radius: 4px; 
    list-style: none;
    display: flex;
}
header .navbar ul.dropdown-menu li {
    margin-left: 0px;
}
header .navbar ul li a,
header .navbar ul li span {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0px;
}
header .navbar ul li span {
    cursor: default
}
header .navbar ul li a:hover,
header .navbar ul li span:hover {
    color: #b2b2b2;
}
header .nav-link.disabled {
    color: white;
}
header .navbar ul li .dropdown-menu {
    background: black;
    padding: 15px 12px 12px 12px;
    margin-left: -11px;
    width: 240px;
}
header .navbar .lang .dropdown-menu {
    max-width: 58px;
    min-width: auto;
}
header .navbar ul li .dropdown-menu a {
    text-transform: none
}
header .navbar ul li .dropdown-menu li {
    width: 100%;
}
header .navbar ul li .dropdown-menu li:last-child {
    margin-right: 0px;
    float: left;    
}
header .navbar ul li .dropdown-menu li:first-child {
    margin-left: 0;
}
nav:not(.hide-mobile) li.down:hover .dropdown-menu {
    display: block;
}
.pushy .menu a,
.pushy .menu span {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    float: left;
}
.pushy .menu ul li {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pushy .menu .dropdown-menu a {
    text-transform: initial
}
.pushy .menu a.dropdown-toggle {
    float: right;
    width: 58px;
}
.pushy .menu ul .dropdown-menu {border: 0px;}

@media (min-width: 576px) {
    header {
        position: relative;
    }
    .main {
        padding-top: 0;
    }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    header {
        height: auto;
    }
}

@media (min-width: 1200px) {}
/* ----------------------------------------------------------- :MENU ----------------------------------------------------------- */


/* ----------------------------------------------------------- MAIN PAGE: ------------------------------------------------------ */
#homeSlider {
    background: black;
}
#homeSlider ul.slick-dots {
    list-style: none;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    bottom: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#homeSlider ul.slick-dots li {
    float: left;
    margin: 10px;
    cursor: pointer
}
#homeSlider ul.slick-dots button {
    font-size: 0;
    background: none;
    border-radius: 25px;
    width: 10px;
    height: 10px;
    outline: none;
    cursor: pointer;
    border: 2px solid #fff;
    text-indent: -9999px;
    padding: 0px;
}
#homeSlider ul.slick-dots button[aria-selected="true"] {
    background: white;
}
#homeSlider .tag {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-transform: uppercase;
    color: white;
    position: absolute;
    bottom: 154px;
    left: -116px;
    width: 300px;
    letter-spacing: 2px;
}
#homeSlider .name {
    float: right;
    color: white;
    position: absolute;
    bottom: 16px;
    left: 81px;
    line-height: 54px;
    text-transform: initial;
    z-index: 99999;
}
#homeSlider .name a {
    color: white;
    text-decoration: none;
}
#homeSlider .name a:hover {
    color: #ccc;
}
#homeSlider .homeSlide {
    height: 500px;
}
#homeSlider .slick-slide img {
    max-width: fit-content;
    height: 100%;
    margin-right: 0%;
}
#homeSlider .slick-arrow {
    width: 150px;
    position: absolute;
    height: 100%;
    padding: 0;
    z-index: 1;
    top: 0;
}
#homeSlider .slick-arrow:hover .slick-prev,
#homeSlider .slick-arrow:hover .slick-next {
    background-color: rgba(0, 0, 0, 0.5); 
}
#homeSlider .slick-arrow:hover .slick-prev {
    background-image: url(../images/slide-left.png);
    
}
#homeSlider .slick-arrow:hover .slick-next {
    background-image: url(../images/slide-right.png);
}
#homeSlider .slick-arrow button {
    width: 100%;
    background-color: rgba(0, 0, 0, 0); 
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    border: 0px;
    outline: none;
}
#homeServices {
    background: black;
}
#homeServices .info {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: background-color 0.2s linear;
}
#homeServices .info:hover {
    background-color: rgba(0, 0, 0, 0);
}
#homeServices .info .subtitle {
    text-transform: uppercase;
}
#homeServicesList {
    background: url('../images/services-list.jpg') no-repeat;
    background-size: cover;
    color: white;
    padding: 81px 0px 100px 0px;
}
#homeServicesList .subtitle {
    padding: 60px 0;
    text-align: left !important
}
#homeServicesList .icons {
    margin: 24px 0px 25px 0px;
}
#homeServicesList .icons img {
    margin-bottom: 24px;
}
#homeServicesList .buttons a {
    background-color: white;
    border: 2px solid white;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    width: 100%;
}
#homeServicesList .buttons a:hover {
    background-color: #fff;
    border: 2px solid white;
    color: #000;
}

#worksList .worksItem a {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: background-color 0.2s linear;
}
#worksList .worksItem a:hover {
    background-color: rgba(0, 0, 0, 0);
}
#worksList .worksItem a:hover .tag,
#worksList .worksItem a:hover .name {
    opacity: 0
}
#worksList .worksItem img {
    width: 100%;
}
#worksList .tag {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-transform: uppercase;
    color: white;
    position: absolute;
    width: 239px;
    letter-spacing: 2px;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    opacity: 1;
    bottom: 133px;
    left: -82px;
}
#worksList .name {
    float: right;
    color: white;
    position: absolute;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    opacity: 1;
    top: 15px;
    left: 27px;
    line-height: 44px;
    text-transform: initial;
    max-width: 157px;
}
#worksList .arrow {
    position: absolute;
    bottom: 22px;
    right: 22px;
}
#ourPerks {
    background: url('../images/perks-bg.jpg') no-repeat; 
    color: white;
    padding: 81px 0px 100px 0px;
}
#ourPerks .subtitle {
    padding: 60px 0;
    text-align: left !important;
}
#ourPerks .icons {
    color: #000;
}
#ourPerks .icons img {
    margin-right: 0px;
}
#ourPerks .icons.first {
    margin: 0px;
}
#ourPerks .icons.second {
    margin: 0px 0px 64px 0px;
}
#ourPerks .icons p:last-of-type {
}
#ourPerks .buttons a {
    background-color: black;
    border: 2px solid black;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    width: 100%;
}
#ourPerks .buttons a:hover {
    background-color: black;
    border: 2px solidblack;
    color: #fff;
}
#ourPerks .icons div {
    margin-top: 30px;
}

#ourSocial {
    background: url('../images/social-bg.jpg') no-repeat;
    background-size: cover;
    color: white;
    /* padding: 81px 0px 0px 0px; */
}
#ourSocial .phone {
    background: url(../images/social-phone.png) no-repeat bottom center;
    min-height: 440px;
    order: 2;
    background-size: auto 86%;
}
#ourSocial .right {
    padding: 62px 34px 0px 58px;
    order: 1;  
}
#ourSocial .title {
    line-height: 50px;
    text-transform: initial;
}
#ourSocial .text p {
    margin: 20px 0;
}
#ourSocial .text {
    margin: 21px 0px;
}
#ourSocial .icons {
    
}
#ourSocial .icons a {
    display: flex;
    height: 50px;
}
#ourSocial .icons .ig a {
    background: url("../images/ig.png") no-repeat left center;
}
#ourSocial .icons .ig a:hover {
    background: url("../images/ig-hover.png") no-repeat left center;
}
#ourSocial .icons .be a {
    background: url("../images/be.png") no-repeat left center;
}
#ourSocial .icons .be a:hover{
    background: url("../images/be-hover.png") no-repeat left center;
}
#ourSocial .icons .pi a {
    background: url("../images/pi.png") no-repeat left center;
}
#ourSocial .icons .pi a:hover {
    background: url("../images/pi-hover.png") no-repeat left center;
}
#ourSocial .icons .vk a {
    background: url("../images/vk-main.png") no-repeat left center;
}
#ourSocial .icons .vk a:hover {
    background: url("../images/vk-main-hover.png") no-repeat left center;
}
#ourSocial .icons .fb a {
    background: url("../images/fb-main.png") no-repeat left center;
}
#ourSocial .icons .fb a:hover {
    background: url("../images/fb-main-hover.png") no-repeat left center;
}

#ourAwards {
    background: white;
    color: black;
    padding: 81px 0px 100px 0px;
}
#ourAwards .icons {
    margin: 63px 0px 0px 0px;
}
#ourAwards .icons img {
    margin-bottom: 24px;
}

#contactForm {
    background: url('../images/form-bg.jpg') no-repeat center center;
    color: white;
    padding-top: 80px;
    padding-bottom: 100px;
    background-size: cover;
    display: flex;
    align-items: center;
}
#contactForm form {
    margin-top: 60px;
}
#contactForm form input,
#contactForm form textarea,
#contactForm form select,
#contactForm .selectric,
#contactForm .selectric-items li {
    background: black;
    border: 0px;
    padding: 20px;
    color: #ccc;
    width: 100%;
    outline: none;
    height: 64px;
}
#contactForm form select {
    -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none; 
   background: url('../images/arr-down.png') #000 96% center no-repeat;
}
#contactForm form label {
    background: black;
    color: white;
    float: left;
    padding: 10px 33px;
    cursor: pointer;
}
#contactForm form textarea {
    height: 150px;
}
#contactForm form input[type="file"] {
    background: none;
    float: left;
    width: 52%;
    padding: 8px 45px;
    height: auto;
    cursor: pointer;
}
#contactForm form input::-webkit-input-placeholder,
#contactForm form textarea::-webkit-input-placeholder {
    color: #ccc;
}
#contactForm form input[type="submit"] {
    background: white;
    border: 2px solid white;
    color: black;
    text-decoration: none;
    font-family: "open_sansregular";
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    border-radius: 2px;
    margin-top: 45px;
    width: 100%;
}
#contactForm form input[type="submit"]:hover {
    background-color: white;
    border: 2px solid white;
    color: black;
}
#contactForm .field_optional::placeholder {
    color: #707070;
}
#contactForm input[name=work-email] {
    padding: 0;
    margin: 0;
    border: none;
    max-width: 0;
    max-height: 0;
}
.thanks {
    padding: 136px 0px 87px 0px;
    display: none;
}
.thanks img {
    margin-bottom: 39px;
}
@media (min-width: 320px) {
    #ourPerks {
        background:none;
        background-position: top center;
        color: black;
    }
    #ourAwards .icons img {
        max-width: 80%;
    }
    #contactForm form label {
        padding: 10px 19px; 
        width: 100%;
    }
    #homeSlider .name {
        bottom: 5px;
        left: 65px;
    }
}
@media (min-width: 500px) {
    #homeServicesList .subtitle {
        text-align: center !important
    }
    #homeServicesList .buttons a {
        background-color: rgba(255, 255, 255, 0);
        color: #fff;
    }
    #ourPerks .subtitle {
        text-align: center !important;
    }
    #ourPerks .buttons a {
        background-color: rgba(255,255,255,0);
        color: black;
    }
}

@media (min-width: 576px) {}

@media (min-width: 745px) {
    #worksList .tag {
        bottom: 133px;
        left: -82px;
    }
    #worksList .name {
        top: 15px;
        left: 27px;
        line-height: 44px;
    }
}

@media (min-width: 768px) {
    #ourPerks .buttons a {
        width: 426px;
    }
    #contactForm form label {
        width: auto;
    }
    #contactForm form input[type="submit"] {
        width: 426px;
    }
}

@media (min-width: 772px) {
    #homeSlider .tag {
        bottom: 232px;
        left: -60px;
    }
    #homeSlider .name {
        bottom: 84px;
        left: 132px;
    }
    #homeSlider .homeSlide {
        height: 717px;
    }
    .slick-slide img {
        max-width: 100%;
        height: auto;
        margin-left: 0%;
    }
}


@media (min-width: 992px) {
    #homeServicesList .buttons a {
        width: 426px;
    }
    #ourPerks .icons div {
        margin-top: 0px
    }
    #ourSocial .phone {
        order: 1
    }
    #ourSocial .right {
        padding: 0px;
        order: 2;  
    }
}

@media (min-width: 1024px) {}

@media (min-width: 1200px) {
    #worksList .tag {
        bottom: 133px;
        left: -82px;
    }
    #worksList .name {
        top: 15px;
        left: 27px;
        line-height: 54px;
    }
    #ourPerks {
        background: url('../images/perks-bg.jpg') no-repeat; 
        background-size: auto;
        background-position: top center;
        color: white
    }
    #ourPerks .icons.first {
        margin: 222px 0px 64px 0px;
    }
    #contactForm form input[type="submit"] {
        background: rgba(255,255,255,0);
        color: white;
    }
    #homeSlider .slick-slide img {
        height: auto;
        width: 100%;
    }
    #homeSlider .homeSlide {
        height: auto;
    }
}
@media (min-width: 1280px) {
    #ourSocial .right {
        /* padding-bottom: 82px;  */
    }
}
@media (min-width: 1600px) {
    #ourPerks .icons img {
        margin-right: 30px;
    }
}
@media (min-width: 2560px) {
    #worksList .tag {
        bottom: 165px;
        left: -51px;
    }
    #worksList .name {
        top: 56px;
        left: 58px;
    }
    #ourPerks {
        background-size: contain;
    }
    #ourPerks .icons img {
        margin-right: 0px;
    }
    #ourPerks .icons img {
        margin-right: 0px;
    }
}
/* ----------------------------------------------------------- :MAIN PAGE ----------------------------------------------------------- */


/* ----------------------------------------------------------- :PROJECTS GRID ------------------------------------------------------- */
#projects img {
    width: 100%;
    /* border: 4px solid white; */
}
#projects .grid-sizer, #projects .grid-item {
   width: calc(100% - 16px);
   margin-bottom: 8px;
   margin-left: 8px;
   margin-right: 8px;
}
#projects a {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    transition: background-color 0.2s linear;
}
#projects a:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
#projects a .tag,
#projects a .name {
    opacity: 0
}
#projects a:hover .tag,
#projects a:hover .name {
    opacity: 1
}
#projects a .name {
    text-transform: initial;
}
#projects a .tag {
    text-transform: uppercase;
}
#projects-menu .grid-item {
    position: relative;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
}
#projects-menu a {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    transition: background-color 0.2s linear;
}
#projects-menu a:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
#projects-menu a .tag,
#projects-menu a .name {
    opacity: 0
}
#projects-menu a:hover .tag,
#projects-menu a:hover .name {
    opacity: 1
}
#projects-menu a .name {
    text-transform: initial;
}
#projects-menu a .tag {
    text-transform: uppercase;
}


@media (min-width: 320px) {
    #projects a .tag,
    #projects a .name {
        opacity: 1
    }
    #projects a {
        height: auto;
        bottom: 10px;
        align-items: flex-end;
    }
    #projects div {
        text-align: left !important;
    }
    #projects-menu a .tag,
    #projects-menu a .name {
        opacity: 1
    }
    #projects-menu a {
        height: auto;
        bottom: 10px;
        align-items: flex-end;
    }
    #projects-menu div {
        text-align: left !important;
    }
}

@media (min-width: 576px) {}

@media (min-width: 768px) {
    #projects .grid-sizer, #projects .grid-item {
       width: calc((100% - 16px) / 3);
       margin-left: 0;
       margin-right: 0;
    }
    #projects-menu .grid-item {
        width: calc((100% - 32px) / 2);
        margin: 8px;
    }
}

@media (min-width: 992px) {}
@media (min-width: 1200px) {
    #projects .grid-sizer, #projects .grid-item {
       width: calc((100% - 24px) / 4);
    }
    #projects a .tag,
    #projects a .name {
        opacity: 0
    }
    #projects a {
        height: 100%;
        bottom: auto;
        align-items: center;
    }
    #projects div {
        text-align: center !important;
    }
    #projects-menu .grid-item {
        width: calc((100% - 64px) / 4);
        margin: 16px 8px;
    }
    #projects-menu a .tag,
    #projects-menu a .name {
        opacity: 0
    }
    #projects-menu a {
        height: 100%;
        bottom: auto;
        align-items: center;
    }
    #projects-menu div {
        text-align: center !important;
    }
}
/* ----------------------------------------------------------- :PROJECTS GRID ------------------------------------------------------- */


/* ----------------------------------------------------------- PROJECT: ------------------------------------------------------------- */
.projectImg img {
    width: 100%;
}
.projectDescr .tag {
    color: white;
    background: black;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    padding: 5px 20px;
    float: left;
}
.projectDescr .iconBlock,
.projectDescr .valueBlock {
    align-items: center;
    display: flex;
}
.budgetText {
    display: flex;
    align-items: flex-end;
}
.budgetCoins {opacity: 0.5}
.budgetCoins.opacity {opacity: 1}
.projectPlan img {
    display: block;
    margin: 0 auto;
}
.projectPlan .rooms {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.cdProject img {
    display: block;
    margin: 0 auto;
}
.cdProject_VR_iframe iframe {
    height: 480px!important;
}
.budgetCoins:hover ~ .budgetDescr div {
    opacity: 1
}
.budgetDescr div {
    opacity: 0;
    border: 1px solid #959595;
    border-radius: 4px;
    padding: 1px 7px;
    margin-left: 4px;
    margin-top: -29px;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
}
.projectDescr .visulalLinks {
    display: none;
}
.projectDescr .visulalLinks button,
.projectDescr .visulalLinks .dropdown-menu a {
    background: none !important;
    color: black !important;
    border: 0px !important;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    outline: none !important;
    box-shadow: none !important;
}
.projectDescr .visulalLinks button {
    padding: 10px 0 0 0;
}
.projectDescr .visulalLinks button:after {
    background-image: url(../images/arrDown.jpg);
    border: 0px;
    width: 14px;
    height: 9px;
    position: relative;
    top: 3px;
    margin-left: 9px;
}
.projectDescr .visulalLinks .dropdown-menu {
    padding: 0;
    border: 0px;
    background: none;
    right: 0px !important;
    left: auto !important;
}
.projectDescr .visulalLinks .dropdown-menu a {
    padding: 2px 22px 0px 0px;
    text-align: right;
}
.projectDescr .visulalLinks .dropdown-menu a:hover {
    color: #727272 !important;
}
.close {
    display: none;
}
#contactFormModal .close {
    display: block;
    font-size: 3rem;
    font-weight: 100;
    line-height: 1;
    color: #fff;
    text-shadow: none;
    opacity: .7;
    right: 30px;
    top: 10px;
    position: absolute;
}
#contactFormModal .close:focus {
    outline:0;
}
.modal-dialog {
    max-width: 100%;
    margin: 0;
}
.modal-content {

}
.formAlert {
    margin-top: 80px;
    margin-bottom: 120px;
}
.formAlert .alert-text {
    text-transform: uppercase;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 32px;
    text-align: center;
    margin-bottom: 24px;
}
.cdProject_Text_Full p {
    margin: 50px 0;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 16px;
    
}
@media (min-width: 576px) {

}

@media (min-width: 768px) {
    .modal-dialog,.modal-content,#contactForm {
        height: 100%;
    }
}

@media (min-width: 992px) {
    .formAlert .alert-text {
        font-size: 36px;
        text-align: left;
        float: left;
        margin: 0;
    }
    .cdProject_VR_iframe iframe {
        height: 600px!important;
    }
}

@media (min-width: 1200px) {
    .projectDescr .visulalLinks {
        display: block;
    }
    .cdProject_VR_iframe iframe {
        height: 1040px!important;
    }
}
@media (min-width: 2000px) {
    .cdProject_VR_iframe iframe {
        height: 1580px!important;
    }
}
/* ----------------------------------------------------------- :PROJECT -------------------------------------------------------------- */


/* ----------------------------------------------------------- BLOG GRID: ------------------------------------------------------------ */
#blogs {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    background-color: #f7f7f7;
}
#blogs a {
    text-decoration: none;
    float: left;
    width: 100%;
    position: relative;
    z-index: 999;
}
#blogs img {
    width: 100%;
}
#blogs .item {
    padding: 7px;
}
#blogs .item .inner {
    border: 2px solid #f7f7f7;
    background: white;
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
}
#blogs .item .inner:hover {
    border: 2px solid #000;
}
#blogs .item.pic a {
    width: 100%;
    border: 2px solid #f7f7f7;
}
#blogs .item.pic:hover a {
    border: 2px solid #000;
}
#blogs .item .info,
#blogs .item .tag {
    background: white;
}
#blogs .item .cat {
    line-height: 40px;
    color: #4d4d4d;
}
#blogs .item .tit {
    padding-bottom: 10px;
    color: #4d4d4d;
    text-transform: uppercase;
    min-height: 105px;
}
#blogs .item .tl-tag {
    line-height: 20px;
    color: #4d4d4d;
    text-transform: lowercase;
    width: auto;
    margin-left: 10px;
    padding-bottom: 8px;
}
#blogs .item .tl-tag:hover {
    color: black;
}
#blogs .item .tag {
    position: relative;
    bottom: 0;
    width: 100%;
}
#blogs .top-tag {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    position: relative;
    float: left;
    margin: 17px 8px 8px 8px;
    border: 1px solid #000;
    padding-left: 15px;
    padding-right: 15px;
    width: 250px;
    font-size: 16px;
    height: 40px;
    line-height: 38px;
}
#blogs .top-tag:hover {
    background-color: black;
    color: white;
}
#blogs .tag-cross {
    background: url('../images/tag-cross-black.png') no-repeat center center;
    cursor: pointer;
    position: relative;
    float: right;
    height: 40px;
    width: 9px;
}
#blogs .top-tag:hover .tag-cross {
    background: url('../images/tag-cross-white.png') no-repeat center center;
}
#blogs .tag-cross:hover {
    background: url('../images/tag-cross-white.png') no-repeat center center;
}
}
@media (min-width: 576px) {}

@media (min-width: 768px) {
    /* #blogs .item {
        min-height: 386px;
    } */
    #blogs .item .tag {
        position: absolute;
    }
}

@media (min-width: 992px) {
    /* #blogs .item {
        min-height: 355px;
    } */
}
@media (min-width: 1440px) {
    /* #blogs .item {
        min-height: 476px;
    } */
}

@media (min-width: 1200px) {}
@media (min-width: 2560px) {
    /* #blogs .item {
        min-height: 639px;
    } */
}
@media (max-width: 1280px) {
    #blogs .item.pic a:last-child {height: 100%}
    #blogs .item.pic img {
        width: fit-content;
        align-self: center;
        height: 100%;
        object-fit: cover;
    }
}
/* ----------------------------------------------------------- :BLOG GRID ----------------------------------------------------------- */


/* ----------------------------------------------------------- BLOG: ---------------------------------------------------------------- */
.blogtImg {
    background-size: cover;
    background-position: center center;
}
.blogtImg .heading {
    padding: 56px;
    bottom: 0px;
}
.blogtImg .heading .cat {
    color: #fff;
    text-transform: uppercase;
}
.blogtImg .heading .tit {
    margin-top: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: white;
}
.blogtImg .heading .tag a {
    color: #fff;
    text-decoration: none;
}
.blogtImg .heading .tag a:hover {
    color: #ccc;
}
/* .blogImages,
.blogImages2 {
    background: black;
} */
.blogImages .slick-slide,
.blogImages2 .slick-slide {
    outline: none !important;
    max-height: 441px;
    height: 441px;
}
.blogImages .slick-prev,
.blogImages .slick-next,
.blogImages2 .slick-prev2,
.blogImages2 .slick-next2 {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    border: 0;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    outline: none !important;
}
.blogImages .slick-prev,
.blogImages2 .slick-prev2 {
    background-image: url(../images/slide-left.png);
}
.blogImages .slick-next,
.blogImages2 .slick-next2 {
    background-image: url(../images/slide-right.png);
}
.blogImages .slick-arrow[aria-disabled="true"],
.blogImages2 .slick-arrow[aria-disabled="true"] {
    opacity: 0.6;
    cursor: default;
}
.blogImages .slick-arrow,
.blogImages2 .slick-arrow {
    cursor: pointer;
}
.slick-slide img {
    align-self: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.slick-slide a {
    display: flex;
    height: 100%;
    outline: none !important;
}
.sharing {
    display: flex;
    float: right;
    align-items: center;
    margin-top: 12px;
    justify-content: flex-end;
}
.sharing__title {
    padding-right: 12px;
}
.ya-share2 li {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
@media (min-width: 576px) { 
    .blogtImg {}
}
@media (min-width: 768px) { 
    .blogtImg {}
}
@media (min-width: 992px) { 
    .blogtImg {}
}
@media (min-width: 1200px) { 
    .blogtImg {min-height: 600px;}
}
/* ----------------------------------------------------------- :BLOG ---------------------------------------------------------------- */


/* ----------------------------------------------------------- ABOUT: --------------------------------------------------------------- */
.aboutImg {
    min-height: 1000px;
    background-position: center center;
    background-size: cover;
    color: white;
}
.aboutAwards, 
.aboutDescr, 
.aboutStory {
    padding: 100px 0px;
}
.aboutImg .heading {}
.aboutImg .heading .text {
    margin-top: 79px;
}
.aboutImg .heading .buttons {
    display: flex;
    justify-content: center;
    margin-top: 79px;
}
.aboutImg .heading .buttons a {
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid white;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 65px;
    transition: background-color 0.2s linear;
}
.aboutImg .heading .buttons a:hover {
    background-color:white;
    color: black;
}
.aboutAwards .tit, 
.aboutDescr .tit, 
.aboutStory .tit {
    margin: 0px 0 62px 0;
}
.aboutDescr {}
.aboutDescr p {}
.aboutQuality {}
.aboutQuality .item {}
.aboutQuality .item .cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: background-color 0.2s linear;   
    padding: 15% 47px 0px 47px;
}
.aboutQuality .item img {}
.aboutQuality .item .tit {
    margin-bottom: 40px;
}
.aboutQuality .item .txt {}
.aboutStory {}
.aboutStory p {}
.aboutPeople {}
.aboutPeople .item .cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.0);
    text-decoration: none;
    transition: background-color 0.2s linear;
}
.aboutPeople .item .cover:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
.aboutPeople .item .cover:hover .tag,
.aboutPeople .item .cover:hover .tit {
    opacity: 1;
}
.aboutPeople .item img {}
.aboutPeople .item .cover .tag {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-transform: uppercase;
    color: white;
    position: absolute;
    width: 239px;
    letter-spacing: 2px;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    top: 55px;
    left: -82px;
    opacity: 0;
    text-align: right;
}
.aboutPeople .item .tit {
    float: right;
    color: white;
    position: absolute;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    bottom: 18px;
    left: 27px;
    line-height: 44px;
    opacity: 0;
}
.aboutAwards .img-cont {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutAwards p {
    line-height: 1.2em;
    margin: 13px 0px 44px 0px;
    color: black;
    transition: all 0.3s;
}
.aboutAwards a {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0;
}
.aboutAwards div:hover > p {
    color: #727272;
}
.aboutAwards.projectPublications .tit {
    text-transform: inherit;
    text-align: center;
}
.aboutAwards.projectPublications .spaceBetween {
    justify-content: space-between;
}
@media (min-width: 320px) {
    .aboutImg .heading .text {
        text-align: left;
        margin-top: 33px;
    }
    .aboutImg {
        min-height: 100%;
        padding: 79px 10px;
    }
    .aboutImg .heading .buttons a {
        width: 100%;
        padding: 10px 40px;
        background: white;
        color: black;
    }
    .aboutImg .heading .buttons {
        margin-top: 37px;
    }
    .aboutAwards, 
    .aboutDescr, 
    .aboutStory {
        padding: 49px 10px;
    }
    .aboutQuality .item {
        height: 300px;
        overflow: hidden;
    }
    .aboutQuality .item .cover {
        padding: 15% 21px 0px 21px;
    }
    .aboutQuality .item .tit {
        margin-bottom: 20px;
    }
    .aboutAwards .tit, 
    .aboutDescr .tit, 
    .aboutStory .tit {
        margin: 0px 0 39px 0;
    }
    .aboutPeople .item .cover {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .aboutPeople .item .cover .tag {
        opacity: 1;
        top: 127px;
        left: -89px;
    }
    .aboutPeople .item .cover .tit {
        opacity: 1;
        bottom: 22px;
        left: 22px;
        line-height: 1em;
    }
    .aboutAwards img {
        max-width: 84%;
    }
    .aboutAwards.projectPublications {
        padding: 49px 10px 64px 10px;
    }
}

@media (min-width: 576px) {}

@media (min-width: 768px) {
    .aboutImg .heading .buttons a {
        width: auto;
    }
    .aboutImg .heading .text {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .aboutPeople .item .cover .tag {
        top: 127px;
    }
    .aboutQuality .item .cover {
        padding: 34% 13px 0px 13px;
    }
    .aboutQuality .item .tit {
        margin-bottom: 14px;
    }
    .aboutQuality .item {
        height: auto;
    }
    .aboutPeople .item .cover {
        background-color: rgba(0, 0, 0, 0);
    }
    .aboutPeople .item .cover .tag {
        opacity: 0;
    }
    .aboutPeople .item .cover .tit {
        opacity: 0;
    }
    .aboutAwards.projectPublications .row.mb-30 {
        margin-bottom: 30px;
    }
}

@media (min-width: 1440px) {
    .aboutQuality .item .cover {
        padding: 37% 47px 0px 47px;
    }
}

@media (min-width: 1600px) {
    .aboutQuality .item .cover {
        padding: 30% 57px 0px 57px;
    }
    .aboutPeople .item .cover .tag {
        top: 128px;
    }
}
@media (min-width: 2000px) {
    .aboutQuality .item .cover {
        padding: 40% 100px 0px 95px;
    }
}
/* ----------------------------------------------------------- :ABOUT --------------------------------------------------------------- */


/* ----------------------------------------------------------- CONTACTS: ------------------------------------------------------------- */
.contactsContent {
    padding: 50px 0;
}
#map {
    height: 500px;
}
[class*="ymaps-2"][class*="-ground-pane"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
}
.contactsContent .icons a {
    display: flex;
    height: 50px;
}
.contactsContent .icons .ig a {
    background: url("../images/insta.png") no-repeat left center;
}
.contactsContent .icons .ig a:hover {
    background: url("../images/insta_under.png") no-repeat left center;
}
.contactsContent .icons .be a {
    background: url("../images/behance.png") no-repeat left center;
}
.contactsContent .icons .be a:hover{
    background: url("../images/behance_under.png") no-repeat left center;
}
.contactsContent .icons .vk a {
    background: url("../images/vk.png") no-repeat left center;
}
.contactsContent .icons .vk a:hover {
    background: url("../images/vk_under.png") no-repeat left center;
}
.contactsContent .icons .fb a {
    background: url("../images/facebook.png") no-repeat left center;
}
.contactsContent .icons .fb a:hover {
    background: url("../images/facebook_under.png") no-repeat left center;
}
.contactsContent .icons .pi a {
    background: url("../images/pinterest.png") no-repeat left center;
}
.contactsContent .icons .pi a:hover {
    background: url("../images/pinterest_under.png") no-repeat left center;
}
@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}
/* ----------------------------------------------------------- :CONTACTS ------------------------------------------------------------- */


/* ----------------------------------------------------------- SERVICES: ------------------------------------------------------------- */
.serviceMenu {
    background: #202020;
    padding: 53px 0px 25px 0px;
}
.serviceMenu a {
    text-decoration: none;
}
.serviceMenu a p {
    color: white;
    text-decoration: none;
    line-height: 1em;
}
.serviceInfo {
    padding: 50px 0px;
}
.advantagesInfo {
    padding-bottom: 50px;
}
.serviceMenu a:hover p {
    color: #b2b2b2;
}
.serviceMenu img {
    margin-bottom: 13px;
}
.serviceHeading {
    color: white;
}
.serviceHeading .right {
    padding: 120px 0px 128px 24px;
}
.serviceHeading .right .tit {}
.serviceHeading .right .text {
    margin: 38px 0px;
}
.serviceHeading .right .price {}
.serviceHeading .right .buttons a {
    background: white;
    border: 2px solid white;
    color: black;
    text-decoration: none;
    font-family: "open_sansregular";
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    border-radius: 2px;
    margin-top: 45px;
}
.serviceHeading .right .buttons a:hover {
    background: rgba(0, 0, 0, 0);
    color: white;
}
.advantagesInfo .item, .serviceInfo .item {
    text-align: center;
    margin-bottom: 50px;
}
.advantagesInfo .consistHeading, .serviceInfo .consistHeading {
    font-size: 27px;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    text-align: center;
    padding-bottom: 50px;
    max-width: 280px;
    margin: 0 auto;
}
.advantagesInfo .consistTitle, .serviceInfo .consistTitle {
    font-size: 16px;
    font-family: "open_sansregular";
    max-width: 166px;
    margin: 14px auto 0;
}
.advantagesInfo .consistIcon img, .serviceInfo .consistIcon img {
    width: 65px;
    height: 65px;
}
.subserviceHeader {
    height: 600px;
    background-color: #1f1f1f;
}
.subserviceHeader_background {
    display: block;
    width: 100%;
    height: 600px;
    position: absolute;
    z-index: 0;
    transform: scale(-1, 1);
    right: 0;
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
.subserviceHeader_background:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
}
.subserviceHeader h1 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 34px;
    padding-top: 250px;
    text-transform: uppercase;
    max-width: 500px;
    text-align: center;
}
.breadcrumbs {
    list-style: none;
    display: flex;
    padding: 16px 0;
    font-family: open_sansregular;  
    font-size: 10px;
}
.breadcrumbs-item a {
    text-decoration: none;
    color: #212529;
}
.breadcrumbs-item {
    color: #212529;
    padding-right: 8px;
}
.breadcrumbs-item:not(:first-child) {
    padding-left: 8px;
}
.subserviceDescription, .subserviceComposition, .subserviceAdvantages, .subserviceDescription_second, .subserviceNotConsist, .subserviceDownload, .subserviceLinks {
    margin-bottom: 80px;
}
.subserviceDescription .content, .subserviceDescription_second .content {
    font-family: open_sansregular;  
}
h2.heading {
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 50px;
}
.subserviceConsist_item {
    margin-bottom: 40px;
}
.subserviceConsist_item__icon {
    text-align: left;
    margin-bottom: 16px;
}
.subserviceConsist_item__title {
    font-size: 21px;
    font-family: open_sanslight; 
}
.subserviceConsist_item__desc {
    font-size: 16px;
    font-family: open_sansregular; 
}
.subserviceAdvantages {
    background: url(../images/subservice-advantages-bg.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 60px 0;
}
.subserviceAdvantages_item {
    margin-bottom: 40px;
}
.subserviceAdvantages_item__title {
    font-size: 21px;
    text-transform: lowercase;
    font-family: open_sanslight; 
}
.subserviceAdvantages_item__icon {
    margin-bottom: 16px;
}
.subserviceAdvantages_item__desc {
    font-size: 16px;
    font-family: open_sanslight; 
}
.subserviceNotConsist {
    text-align: center;
}
.subserviceNotConsist_item__icon {
    margin-bottom: 20px;
}
.subserviceNotConsist_item {
    margin-bottom: 40px;
}
.btn {
    background: white;
    border: 1px solid black;
    border-radius: 0;
    color: black;
    text-decoration: none;
    font-family: "open_sansregular";
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
}
.btn:hover {
    background: black;
    color: white;
}
.subserviceLinks {
    margin-top: 120px;
}
.subserviceLinks_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #000;
    padding: 10px 16px 10px 28px;
    text-decoration: none;
    margin-bottom: 30px;
}
.subserviceLinks_item__title {
    color: #000;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 22px;
    max-width: 280px;
}
.subserviceLinks_item__icon img {
    max-width: 100px;
}
.subserviceLinks_item:hover {
    text-decoration: none;
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
}
/* Implementaion */
.implementationHeader {
    height: 600px;
    background-color: #1f1f1f;
}
.implementationHeader_background {
    display: block;
    width: 100%;
    height: 600px;
    position: absolute;
    z-index: 0;
    right: 0;
}
.implementationHeader_background:after {
    content:'';
    background-color:rgba(0,0,0,0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    
}
.implementationHeader h1 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: "Arial Narrow", Arial, 'open_sansregular', sans-serif;
    font-size: 42px;
    padding-top: 250px;
    text-transform: uppercase;
    text-align: center;
}
.implementationDescription {
    padding-top: 15px;
}
.implementationDescription p {
    margin-bottom: 20px;
}
.implementationDescription h2.heading {
    margin-top: 8px;
    margin-bottom: 16px;
}
.projectConsist {
    margin: 40px 0;
}
.projectConsist_item {
    text-align: center;
    margin-bottom: 30px;
}
.projectConsist_item__icon {
    margin-bottom: 16px;
}
.projectPics_item__subtitle {
    padding-top: 6px;
}
.projectPics {
    margin-top: 30px;
    margin-bottom: 30px;
}
.projectPics_item {
    text-align: center;
    margin-bottom: 30px;
}
@media (min-width: 320px) {
    .serviceHeading .left {
        min-height: 400px;
    }
    .serviceHeading .right {
        padding: 75px 0px 75px 24px;
    }
}
@media (min-width: 375px) {
    .breadcrumbs {
        font-size: 12px;
    }
}
@media (min-width: 576px) {
    .subserviceHeader_background {
        width: 60%;
    }
    .subserviceHeader_background:before {
        display: none;
    }
    .advantagesInfo .consistHeading, .serviceInfo .consistHeading {
        font-size: 36px;
        max-width: none;
        margin: 0;
    }
    .serviceInfo {
        padding: 110px 0px;
    }
    .advantagesInfo {
        padding-bottom: 110px;
    }
    .breadcrumbs {
        font-size: 14px;
    }
    .subserviceHeader h1 {
        text-align: left;
        font-size: 42px;
    }
    .subserviceConsist_item__icon {
        text-align: center;
    }
    .subserviceAdvantages {
        padding: 150px 0;
    }
    .subserviceLinks_item {
        padding: 16px 44px 16px 54px;
    }
    .subserviceLinks_item__title {
        font-size: 28px;
    }
    .subserviceLinks_item__icon img {
        max-width: 130px;
    }
    .implementationHeader h1 {
        text-align: left;
        padding-top: 450px;
    }
    .projectPics {
        margin-top: 60px;
        margin-bottom: 60px;
    }
}

@media (min-width: 768px) {
    .serviceHeading .right .buttons a {
        width: 333px;
    }
}

@media (min-width: 992px) {
    .serviceHeading .left {
        min-height: auto;
    }
}

@media (min-width: 1200px) {
    .serviceHeading .right {
        padding: 120px 0px 128px 74px;
    }
}
@media (min-width: 1920px) {
    .subserviceHeader_background{
        background-position: 0% 50%;
    }
}
/* ----------------------------------------------------------- :SERVICES ------------------------------------------------------------- */


/* ----------------------------------------------------------- FOOTER: --------------------------------------------------------------- */
footer {
    background: black;
    color: white;
}
footer a img {
    max-width: 80%;
}
footer span {color: #ccc;}
footer .icons a {
    display: flex;
    height: 50px;
    min-width: 50px;
}
footer .icons .ig a {
    background: url("../images/ig.png") no-repeat center center;
}
footer .icons .ig a:hover {
    background: url("../images/ig-hover.png") no-repeat center center;
}
footer .icons .be a {
    background: url("../images/be.png") no-repeat center center;
}
footer .icons .be a:hover{
    background: url("../images/be-hover.png") no-repeat center center;
}
footer .icons .pi a {
    background: url("../images/pi.png") no-repeat center center;
}
footer .icons .pi a:hover {
    background: url("../images/pi-hover.png") no-repeat center center;
}
footer .icons .vk a {
    background: url("../images/vk-main.png") no-repeat center center;
}
footer .icons .vk a:hover {
    background: url("../images/vk-main-hover.png") no-repeat center center;
}
footer .icons .fb a {
    background: url("../images/fb-main.png") no-repeat center center;
}
footer .icons .fb a:hover {
    background: url("../images/fb-main-hover.png") no-repeat center center;
}
.fixed-edit {
    position: fixed;
    right: 0px;
    bottom: 50px;
    background: black;
    padding: 4px 24px;
}
.fixed-edit a {
    color: white;
    font-weight: bold;
}
.footer__logo {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}
.footer__social {
    text-align: center;
    margin-bottom: 20px;
}
.footer__contacts {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 60px;
}
.footer__contacts a {
    text-decoration: none;
    color: #fff;
}
.footer__contacts a:hover {
    border-bottom: 1px dotted #fff;
    color: #fff;
}
@media (min-width: 576px) {
    .footer__logo {
        text-align: left;
    }    
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}
/* ----------------------------------------------------------- :FOOTER --------------------------------------------------------------- */

/* ------------------------------------------------------------- 404: ---------------------------------------------------------------- */
#error {
    padding: 53px 0px 82px 0px;
}
#error .buttons a {
    background-color: black;
    border: 2px solid black;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    transition: background-color 0.2s linear;
    width: 100%;
}
#error .buttons a:hover {
    background-color: rgba(255,255,255,0);
    color: black;
}
/* ------------------------------------------------------------- :404 ---------------------------------------------------------------- */