html, body {
    height: 100%;
    line-height: 1;
    background-color: #f2f1f1;
    font: 14px "GothamProRegular", "Arial", "Helvetica", sans-serif;
}
.wrapper {
    min-height: calc(100vh - 100px);
}
section {
    padding: 40px 0;
}
label.form-error-field {
    display: block;
    width: 100%;
    top: 100%;
    color: red;
}
input.form-error-field {
    border: 2px solid red;
}
input.form-valid-field {
    border: 2px solid green;
}
.box {
    max-width: 1170px;
    padding: 0px 15px;
    margin: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.link {
    color: #6456b8;
    line-height: 1.8;
}
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 11;
}
.to_top {
    width: 73px;
    height: 73px;
    background: url(../images/to-top.png) no-repeat;
    position: fixed;
    right: 5%;
    bottom: 3%;
    z-index: 999;
    display: none;
}
.loader {
    background: none repeat scroll 0 0 #fff;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.loader_inner {
    background-image: url("../images/load.gif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 138px;
    width: 138px;
    margin-top: -69px;
    margin-left: -69px;
    left: 50%;
    top: 50%;
    position: absolute;
}
.btn-trans.btn-load {
    border: 1px solid rgba(100, 86, 184, .3);
    color: #6456b8;
}
.btn-trans.btn-load:hover {
    background-color: #8950b1;
    color: #ffffff;
    border: 1px solid transparent;
}
.btn-trans {
    padding: 22px 40px;
    font-size: 21px;
    color: #ffffff;
    border: 2px solid #fff;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    background-color: transparent;
    opacity: .9;
}
.btn-trans:hover {
    background-color: #8950b1;
    border-color: transparent;
    opacity: 1;
}
.btn-purp {
    border: 2px solid #7c30a9;
    -moz-border-radius: 14px / 12px;
    -webkit-border-radius: 14px / 12px;
    border-radius: 14px / 12px;
    background-color: transparent;
    color: #7c30aa;
    height: 65px;
    line-height: 65px;
    text-align: center;
}
.btn-purp:hover {
    background-color: #8950b1;
    border-color: transparent;
    color: #fff;
}
.text-anounce {
    text-align: center;
    font-size: 16px;
    line-height: 21px;
}
.link:hover {
    color: #8950b8;
    text-decoration: underline;
}
.sect-grey {
    background-color: #f2f1f1;
}
.sect-white {
    background-color: #fff;
}
.slider-info h2 {
    position: relative;
   /* -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;*/
    color: #ffffff;
    font: 3.7em/1.2 'Ledger', serif;
    word-spacing: 1px;
    margin-bottom: 20px;
}
.section h2 {
    font-size: 2em;
    color: #333333;
    text-transform: uppercase;
    text-align: center;
}
.section h2:after {
    content: "";
    display: block;
    width: 73px;
    height: 3px;
    background-color: #7c30aa;
    margin: 25px auto;
}
h3 {
    font-size: 1.8em;
    line-height: 1.3;
    font-weight: bold;
    text-transform: none;
    margin-bottom: 20px;
}
.top-line {
    background-color: #2B2643;
    padding: 10px 0;
}
.header-contacts-info .phone,
.header-contacts-info .email,
.header-contacts-info .phone span,
.header-contacts-info .email span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.header-contacts-info .phone span,
.header-contacts-info .email span,
.header-contacts-info .phone a,
.header-contacts-info .email a {
    color: #ffffff;
    font-size: 16px;
}
.header-contacts-info .phone {
    margin-right: 40px;
}
.phone .ico,
.email .ico {
    margin-right: 5px;
}
.soc-sety li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}
.soc-sety li a:hover .ico {
    opacity: 0.9;
}
.soc-sety li:last-child {
    margin-right: 0px;
}
.soc-sety .ico {

    transition: all .2s ease;
}
/* иконки */
.ico {
    display: inline-block;
    vertical-align: middle;
}
.ico.ico-vk {
    width: 22px;
    height: 21px;
    background: url("../images/icons/vk.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-instagram {
    width: 18px;
    height: 18px;
    background: url("../images/icons/instagram.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-mobile {
    width: 18px;
    height: 18px;
    background: url("../images/icons/mobile.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-email {
    width: 16px;
    height: 16px;
    background: url("../images/icons/email.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-user {
    width: 14px;
    height: 13px;
    background: url("../images/icons/user.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-envelope {
    width: 14px;
    height: 14px;
    background: url("../images/icons/envelope.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-search-plus {
    width: 30px;
    height: 35px;
    background: url("../images/icons/zoom.svg") no-repeat;
    background-size: 100%;
}
.ico.ico-plus {
    width: 12px;
    height: 12px;
    background: url("../images/icons/plus.svg") no-repeat;
    background-size: 100%;
}
/*-----------*/

.header-middle {
    background-color: #fdfdfd;
}
.logo {
    padding-top: 10px;
}
.logo img {
	transition:0.5s;
}
.logo img.img-s {
	width:180px;	
}
.top-mnu li {
    float: left;
    margin-right: 40px;
    /*perspective: 1000px; */
}
.top-mnu li a {
    display: block;
    position: relative;
    color: #34383d;
    font-size: 16px;
    vertical-align: middle;
}
.top-mnu li a:after {
    content: "";
    opacity: 0;
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #803eaf;
}
.top-mnu li.active a:after {
    opacity: 1;
    -webkit-transition: all 1s ease;
}
.top-mnu li a:hover:after {
    opacity: 1;
}
.top-mnu > li > a:hover {
    color: #803eaf;
}
.top-mnu li:last-child {
    margin-right: 0;
}
.slider-box {
    height: 470px;
    position: relative;
    background: url(../images/background/header-bg.jpg) center center repeat, #172236;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 10;
}
.slider-img-box img {
    max-width: 500px;
    margin: auto;
}
.slider-info {
    text-align: center;
    margin-top: 50px;
}
.slider-info .price {
    position: relative;
    font: 30px/30px "GothamProRegular";
    color: #ffffff;
    margin: 30px 0;
}
.slider-box .price span {
    opacity: 1;
    font-size: 40px;
    line-height: 45px;
}
.slider-box .price i {
    font: 45px/45px sans-serif;
    opacity: .7;
}
.grid {
    /*text-align: center;*/
}
.grid-item {
    padding: 0;
    text-align: center;
    margin-bottom: 30px;
    opacity: 0;
    -khtml-opacity:0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: translateY(25px);
    -ms-transform: translateY(25px);
    transform: translateY(25px);
}
.grid-item.on {
    opacity: 1;
    -khtml-opacity:1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.grid-sizer {
    width: 30%;
}
.grid-item-2 {
    width: 555px;
}
.grid-item:nth-of-type(3n) {
    margin-right: 0;
}
/*---skills-list---*/

.section-service .btn-sect {
    width: 320px;
    margin: auto;
    display: block;
    font-size: 18px;
}
.skills-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;

    margin-bottom: 15px;
    position: relative;
    min-height: 45px;
    padding-left: 60px;
    /*padding-top: 10px;*/
    font-size: 16px;
    line-height: 23px;
    opacity: 0;
}
.skills-list li .dec {
    position: absolute;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 21px;
    line-height: 28px;
    text-align: center;
    padding-top: 9px;
    left: 0;
    top: 0;
    background: url(../images/background/sprite.png) 0 -85px;
}
.service-item-wrap {
    background-color: #fff;
    padding: 20px;
    transition: all 0.8s ease;
}
.service-item-wrap:hover {
    transform:scale(1.1);
}
.service-item-wrap.off {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    opacity: 0;
}
.service-item-wrap.on {
    opacity: 1;
}
.service-list-wrap {
    margin-top: 40px;
    -webkit-perspective: 600px;
    perspective: 600px;
}
.service-item {
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(100, 86, 184, .3);
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
}
.service-body {
    padding: 20px 15px;
}
.service-bottom .btn {
    display: block;
    font-size: 18px;
    color: #6456b8;
    border-top: 1px solid rgba(100, 86, 184, .3);
    height: 55px;
    line-height: 55px;
}
.service-bottom .btn:hover {
    background-color: #8950b1;
    color: #ffffff;
}
.service-item h3 {
    font-size: 22px;
    font-weight: bold;
    text-transform: none;
    margin-bottom: 20px;
}
.service-item h3:after {
    content: "";
    display: block;
    width: 43px;
    height: 1px;
    background-color: #7c30aa;
    margin: 30px auto;
}
.service-list {
    margin: 20px 0;
}
.service-list li {
    margin-bottom: 10px;
    line-height: 1.5;
}
.service-list li:last-child {
    margin-bottom: 0;
}
.price-wrap {
    color: #6456b8;
}
.price-wrap {
    font-size: 24px;
}
.price-wrap .price,
.price-wrap .rub {
    font-size: 34px;
}
.price-wrap .price {
    font-weight: bold;
}
.rub {
    font-family: "ALS Rubl";
}
/*---contacts-list---*/

.contacts-list {
    margin-top: 30px;
}
.contacts-item {
    text-align: center;
    padding-top: 65px;
    min-height: 184px;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px);
}
.contacts-item.on:hover {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.contacts-item.on {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.contacts-title {
    font-family: "NotoSerifItalic", sans-serif;
    color: #313131;
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}
.contacts-list .contacts-info {
    font-size: 21px;
    color: #000;
    word-wrap: break-word;
}
.phone-item {
    background: url(../images/background/phone-bg.svg) no-repeat 50%;
}
.email-item {
    background: url(../images/background/email-bg.svg) no-repeat 50%;
}
.skype-item {
    background: url(../images/background/skype-bg.svg) no-repeat 50%;
}
.vk-item {
    background: url(../images/background/vk-bg.svg) no-repeat 50%;
}
.vk-item a {
    color: #000;
}
/*---form-pup---*/

.form-pup {
    max-width: 390px;
    border: 3px solid #8b5ee6;
    background-color: #fff;
    padding: 25px 35px;
    min-height: 250px;
}
.form-pup .success_send_text {
    display: block;
    width: 100%;
    font-size: 1.54em;
    font-weight: bold;
    color: red;
    margin-bottom: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*#vacancies-upload-progressbar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background-color: #d1a77b; 
}*/
.file-delete {
    display: none;
}
.title-form {
    display: block;
    text-transform: uppercase;
    font-size: 18px;
    margin: 15px 0;
    text-align: center;
}
.form-pup .mfp-close {
    top: -25px;
}
.form-pup .mfp-close,
.attr-gallery .mfp-close {
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    background: url(../images/background/close1.svg) center no-repeat, #8b5ee6;
}
.attr-gallery .mfp-close {
    top: -40px;
}
.field-box {
    position: relative;
}
.row-elem {
    /*position: relative;*/
    margin-bottom: 15px;
}
.form-pup .ico {
    color: #8b5ee6;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    left: 11px;
    z-index: 1;
}
.field-upload .ico {
    left: 15px;
}
.field-item {
    width: 100%;
    height: 100%;
    border: 2px solid #d0d0d0;
    padding: 10px;
}
.field-text {
    text-indent: 25px;
    height: 50px;
}
.field-texratea-box {
    height: 160px;
}
/*.file-form-wrap {
	padding-bottom:10px;
}
.upload-data {
	padding-top:10px;
}*/
.file-upload input[type="file"] {
    display: none;
}
.file-upload {
    text-indent: 35px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    height: 50px;
    line-height: 48px;
    background: #ffffff;
    color: #8b5ee6;
    border: 1px solid #8b5ee6;
}
.field-upload {
    position: relative;
}
.file-upload:hover {
    color: #fff;
    background-color: #8b5ee6;
}
.file-upload:hover .ico.ico-plus {
    background: url("../images/icons/plus_w.svg");
    background-size: 100%;
}
.form-pup .btn-form {
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background-color: #8b5ee6;
    border-bottom: 3px solid #5e3f9e;
}
.form-pup .btn-form:hover {
    background-color: #5e3f9e;
}
/*---form-pup-work---*/

.form-pup-work {
    max-width: 650px;
}
.work-info {
    padding: 20px;
}
.work-info svg {
    position: absolute;
    left: 0;
}
.work-info span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
    font-size: 1.08em;
    line-height: 1.23em;
}
.work-info p {
    position: relative;
    margin-bottom: 20px;
}
.work-info p:last-child {
    margin-bottom: 0;
}
.grid-link {
    display: block;
    position: relative;
    overflow: hidden;
}
.grid-link img {
    display: block;
}
.hover-box {
    text-align: center;
    position: absolute;
    color: #fff;
    left: 0;
    top: 0%;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    transition: opacity .3s ease;
}
.grid-link:hover > .hover-box {
    top: 0;
    opacity: 1;
}
.grid-link:hover > .hover-box .ico {
    opacity: 1;
    top: 50%;
}
.hover-box .ico {
    top: 30%;
    left: 50%;
    opacity: 0;
    font-size: 30px;
    position: absolute;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*---footer---*/

footer {
    padding: 5px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    align-items: center;
    -webkit-align-items: center;
    font-size: 18px;
    color: #fff;
    background-color: #2B2643;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
footer .box {
    width: 100%;
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    flex-wrap: wrap;
}
footer p {
    line-height: 1.5;
}
/* Переопределение стилей */

.owl-theme .owl-dots .owl-dot span {
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    border: 2px solid #7d23a1;
}
.attr-gallery .mfp-arrow-right,
.attr-gallery .mfp-arrow-left {
    background: url(../images/background/sprite.png) no-repeat;
    width: 58px;
    height: 40px;
    position: absolute;
    top: 50%;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 9999999;
}
.attr-gallery .mfp-arrow-left {
    background-position: 0 -42px;
    left: 40px;
}
.attr-gallery .mfp-arrow-right {
    background-position: -59px -42px;
    right: 40px;
}
/*.attr-gallery .mfp-close {

    }*/
.attr-gallery .mfp-arrow-right:before,
.attr-gallery .mfp-arrow-right:after,
.attr-gallery .mfp-arrow-left:before,
.attr-gallery .mfp-arrow-left:after {
    display: none;
}
.mfp-wrap ~ * {
	filter: blur(4px);
}
.mfp-bg {
	background: rgba(7, 2, 16, 0.9) !important;
}
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.9 !important;
}