html { /* Для плавной прокрутки всей страницы */
    scroll-behavior: smooth;
  }
  
  /* Или для определенного элемента с прокруткой */
  .scrollable-container {
    overflow-y: auto; /* Или scroll */
    scroll-behavior: smooth;
  }

html, body {
    overflow-x: hidden;
}

body {
    font-family:"ArianAMURegular",sans-serif;
    font-weight:400;
    font-size:14px;
    min-width:320px;
    position:relative;
    line-height:1.42857;
    -webkit-font-smoothing:antialised
    }
    
    body input:focus:required:invalid,body textarea:focus:required:invalid {
    color:red
    }
    
    body input:required:valid,body textarea:required:valid {
    color:green
    }
    
    .hidden {
    display:none
    }
    
    section,.main_head {
    position:relative
    }
    
    section h3,.main_head h3 {
    text-align:center;
    text-transform:uppercase;
    font-weight:400;
    font-size:12px;
    margin-top:0;
    margin-bottom:35px
    }
    
    section {
    padding:70px 0 80px
    }
    
    section h2 {
    text-align:center;
    font-size:24px;
    text-transform:uppercase;
    margin:0 0 15px;
    letter-spacing:1px
    }
    
    section .personal_header {
    font-size:13px;
    text-align:left;
    margin-bottom:30px;
    color:#555
    }
    
    .s_descr_wrap {
    text-align:center
    }
    
    .s_descr_wrap .s_descr {
    display:inline-block;
    text-transform:uppercase;
    font-size:12px;
    position:relative;
    margin-bottom:130px
    }
    
    .s_descr_wrap .s_descr::after {
    content:"";
    width:150px;
    height:1px;
    position:absolute;
    left:50%;
    margin-left:-75px;
    margin-top:60px
    }
    
    .main_head {
    min-height:620px;
    padding-top:20px
    }
    
    .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(../img/preloader/preloader2.gif);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:#fff;
    height:85px;
    width:85px;
    margin-top:-50px;
    margin-left:-45px;
    left:50%;
    top:50%;
    position:absolute
    }
    
    .logo_container {
    float:left;
    margin-top:-4px;
    margin-left:20px
    }
    
    svg {
    height:65px;
    width:65px;
    z-index:100;
    position:relative
    }
    
    .toggle_mnu {
    background-color:#222;
    border-radius:3px;
    border:1px solid #FAFAFA;
    width:48px;
    height:48px;
    float:right;
    position:fixed;
    z-index:100;
    right:20px;
    top:20px;
    opacity: .75
    }
    
    .toggle_mnu span {
    display:block
    }
    
    .sandwich {
    width:34px;
    height:3px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:200
    }
    
    .sw-topper {
    position:relative;
    top:-12px;
    width:34px;
    height:3px;
    background:#e1e1e1;
    border:none;
    border-radius:4px 4px 4px 4px;
    -webkit-transition:top 0.2s,-webkit-transform .5s;
    transition:top 0.2s,-webkit-transform .5s;
    transition:transform 0.5s,top .2s;
    transition:transform 0.5s,top 0.2s,-webkit-transform .5s;
    display:block;
    -webkit-transition-delay:0,2s,0;
    transition-delay:0,2s,0
    }
    
    .sw-bottom {
    position:relative;
    width:34px;
    height:3px;
    top:-3px;
    background:#e1e1e1;
    border:none;
    border-radius:4px 4px 4px 4px;
    -webkit-transition:top 0.2s,-webkit-transform .5s;
    transition:top 0.2s,-webkit-transform .5s;
    transition:transform 0.5s,top .2s;
    transition:transform 0.5s,top 0.2s,-webkit-transform .5s;
    -webkit-transition-delay:0,2s,0;
    transition-delay:0,2s,0
    }
    
    .sw-footer {
    position:relative;
    width:34px;
    height:3px;
    top:6px;
    background:#e1e1e1;
    border:none;
    border-radius:4px 4px 4px 4px;
    -webkit-transition:all .5s;
    transition:all .5s;
    -webkit-transition-delay:.1s;
    transition-delay:.1s
    }
    
    .sandwich.active .sw-topper {
    top:0;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
    }
    
    .sandwich.active .sw-bottom {
    top:-3px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
    }
    
    .sandwich.active .sw-footer {
    opacity:0;
    top:0;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg)
    }

    .sandwich, .sw-topper, .sw-bottom, .sw-footer {
    will-change: transform;
    }
    
    .top_mnu {
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    z-index:50;
    right:0;
    top:0;
    display:none
    }
    
    .top_mnu ul,.top_mnu li {
    list-style-type:none;
    padding:0;
    margin:0
    }
    
    .top_mnu ul {
    /*margin-top:180px;*/
    text-align:center
    }
    
    .top_mnu ul li:nth-child(1) a {
    -webkit-animation-duration:.8s;
    animation-duration:.8s
    }
    
    .top_mnu ul li:nth-child(2) a {
    -webkit-animation-duration:1s;
    animation-duration:1s
    }
    
    .top_mnu ul li:nth-child(3) a {
    -webkit-animation-duration:1.6s;
    animation-duration:1.6s
    }
    
    .top_mnu ul li:nth-child(4) a {
    -webkit-animation-duration:2.1s;
    animation-duration:2.1s
    }
    
    .top_mnu ul li:nth-child(5) a {
    -webkit-animation-duration:2.6s;
    animation-duration:2.6s
    }
    
    .top_mnu ul a {
    color: #FAFAFA;
    display:block;
    text-transform:uppercase;
    font-size:14px;
    opacity:0;
    position:relative;
    height:60px;
    outline:none
    }
    
    .top_mnu ul a span {
    display:block;
    position:relative;
    top:-40px;
    left:0;
    height:100%;
    -webkit-transition:all .5s ease;
    transition:all .5s ease
    }
    
    .top_mnu ul a span:hover {
    background-color:rgba(255,255,255,0.08)
    }
    
    .top_wrapper {
    display:table;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:10
    }
    
    .top_wrapper .top_descr {
    display:table-row
    }
    
    .top_wrapper .top_descr .top_centered {
    display:table-cell;
    text-align:center;
    vertical-align:middle
    }
    
    .top_wrapper .top_descr .top_centered p {
    text-decoration:underline 2px;
    font-size:16.5px
    }
    
    .top_wrapper .top_text {
    display:inline-block
    }
    
    .top_wrapper .top_text p {
    margin:0;
    text-transform:uppercase;
    -webkit-animation-delay:1.5s;
    animation-delay:1.5s
    }
    
    .top_wrapper .top_text h1 {
    display:inline-block;
    padding:10px 35px;
    color:#FAFAFA;
    border:7px solid #FAFAFA;
    text-transform:uppercase;
    font-weight:700;
    font-size:2.7em;
    background-color:rgba(0,0,0,0.4);
    margin-left:20px;
    margin-right:20px;
    -webkit-animation-delay:1s;
    animation-delay:1s
    }
    
    .h_opacify {
    opacity:.3;
    -webkit-transition:all .2s ease;
    transition:all .2s ease
    }
    
    .main_footer {
    padding:35px 0;
    font-size:13px;
    font-weight:300
    }
    
    .main_footer .social_wrap {
    float:right;
    line-height:0
    }
    
    .main_footer .social_wrap ul {
    margin:0
    }
    
    .person {
    text-align:center;
    margin-bottom:35px
    }
    
    .person img {
    max-width:220px;
    display:inline-block;
    border-radius:50%
    }
    
    .personal_info li span {
    color:#222;
    font-size:16px
    }
    
    .s_about p {
    margin-bottom:25px;
    font-size:15px
    }
    
    .s_about ul,.s_about li {
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:15px
    }
    
    .s_about li {
    margin-bottom:10px
    }
    
    .s_about .social_wrap {
    margin-bottom:25px;
    margin-top:25px
    }
    
    .social_wrap li {
    display:inline-block;
    font-size:27px;
    padding:0 4px
    }
    
    .social_wrap li a:hover {
    -webkit-transition:.25s;
    transition:.25s;
    color: #688eac
    }
    
    .resume_container .left {
    text-align:right;
    border-right:#d2d2d2 1px solid
    }
    
    .resume_container .left h3 {
    text-align:right
    }
    
    .resume_container .right {
    text-align:left
    }
    
    .resume_container .right h3 {
    text-align:left
    }
    
    .resume_container h3 {
    margin-top:30px;
    letter-spacing:0;
    font-size:16px;
    font-weight:600
    }
    
    .resume_container .year {
    color: #FAFAFA;
    font-weight:600;
    font-style:italic
    }
    
    .resume_container strong {
    font-weight:600;
    font-style:normal;
    text-transform:uppercase
    }
    
    .resume_icon {
    font-size:40px;
    margin-bottom:35px
    }
    
    .year {
    display:inline-block;
    margin-bottom:15px;
    padding:0 10px
    }
    
    .resume_description {
    font-style:italic
    }
    
    .resume_item {
    margin-bottom:35px
    }
    
    .resume_item p {
    margin-top:10px
    }

    .resume_item a {
        text-decoration: underline;
        font-weight: 700;
        transition: .5s ease;
    }

    .resume_item a:hover {
        color: #e00404;
    }
    
    .resume_item:last-child {
    margin-bottom:0
    }
    
    .resume_item:last-child p {
    margin-bottom:0
    }
    
    .s_portfolio ul,.s_portfolio li {
    list-style-type:none;
    padding:0;
    margin:0;
    text-align:center
    }
    
    .s_portfolio li {
    display:inline-block;
    margin:0 10px;
    text-transform:uppercase;
    font-size:12px;
    cursor:pointer;
    line-height:2
    }
    
    .s_portfolio ul {
    margin-bottom:50px
    }
    
    .portfolio_item {
    display:none;
    padding:0
    }
    
    .portfolio_item img {
    width:100%;
    height:100%
    }

    .opacity_port {
        opacity: .82;

    }
    
    .portfolio_item .port_item_cont {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);
    text-align:center;
    padding-top:15%;
    opacity:0;
    -webkit-transition:all .5s;
    transition:all .5s
    }
    
    .portfolio_item:hover .port_item_cont {
    opacity:1;
    padding-top:20%
    }
    
    .portfolio_item h3 {
    color: #FAFAFA;
    margin-bottom:0
    }
    
    .portfolio_item a {
    background-color:transparent;
    border: #FAFAFA 1px solid;
    padding:2px 10px;
    display:inline-block
    }
    
    .podrt_descr {
    background-color: #FAFAFA;
    max-width:500px;
    margin:auto
    }
    
    .podrt_descr p,.podrt_descr h3 {
    padding:20px;
    padding-bottom:0
    }
    
    .podrt_descr h3 {
    margin-bottom:0;
    text-align:center;
    text-transform:uppercase;
    font-weight:400;
    margin-top:20px;
    padding-top:25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d0d0d0;
    }
    
    .podrt_descr p {
    margin-top:0;
    border-top: 1px solid #d0d0d0;
    }
    
    .podrt_descr img {
    width:100%;
    margin-top:10px
    }
    
    .modal-box-content {
    position:relative
    }
    
    .modal-box-content a {
    display:block;
    font-size: 18px;
    text-align:center;
    margin-top: 10px;
    transition: .9s ease;
    opacity: .75;
    }

    .modal-box-content a:last-of-type {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .modal-box-content a:hover {
        background-color: #688eac;
        color: #FAFAFA;
    }
    
    .modal-box-content p {
    text-align:center
    }

    .temp {
        margin-bottom: 6px!important;
    }
    
    .contact_box {
    margin-bottom:30px
    }
    
    .contact_box h3 {
    text-align:left;
    color:#000;
    margin-bottom:0;
    font-size:14px
    }
    
    .contact_box .contacts_icon {
    font-size:30px
    }
    
    .contact_box p {
    margin-top:5px;
    margin-bottom: 0;
    }

    .contact_box p:first-of-type {
        margin-bottom: 5px;
    }

    .last_contact {
        margin-top: 1px;
    }

    .contact_box a {
        font-size: 17px;
        transition: .5s ease;
    }

    .contact_box a:hover {
    text-decoration: underline;
    color: red;
    }
    
    .main_form button {
    border:none;
    color: #FAFAFA;
    line-height:40px;
    padding:0 25px;
    font-size:13px;
    text-transform:uppercase;
    font-weight:600;
    margin-top:10px;
    float:right;
    border-radius: 3px
    }
    
    .form-group {
    display:block;
    margin-bottom:20px
    }
    
    .form-group input,.form-group textarea {
    display:block;
    width:100%;
    border:1px solid #ccc;
    margin-top:10px;
    line-height:40px;
    text-indent:12px;
    font-size:12px;
    background-color:transparent
    }
    
    #s_top {
    cursor:pointer;
    position:fixed;
    opacity:.4;
    right:4px;
    bottom:4px;
    z-index:1;
    margin-bottom:30px;
    margin-right:8px
    }
    
    .top_button {
    width:35px;
    height:35px;
    background-color:#222;
    font-size:17px;
    padding:0;
    bottom:0;
    border-radius:3px;
    border:medium none;
    bottom:20px
    }
    
    .top_button:hover {
    -webkit-transition:all .5s;
    transition:all .5s
    }
    
    .direction_item {
    border:1px #FAFAFA solid
    }
    
    .bg_direction {
    color: #FAFAFA
    }
    
    .bg_direction .s_descr::after {
    background-color:#FAFAFA
    }
    
    .view {
    float:left;
    overflow:hidden;
    position:relative;
    text-align:center;
    border:1px #FAFAFA solid;
    cursor:default
    }

    .opacity_dir {
        opacity: .93;
    }
    
    .view .mask,.view .content {
    height:300px;
    width: 100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0
    }
    
    .view img {
    display:block;
    position:relative
    }
    
    .view h2 {
    text-transform:uppercase;
    color: #FAFAFA;
    text-align:center;
    position:relative;
    font-size:17px;
    padding:8px;
    background:rgba(0,0,0,0.8);
    margin:15px 0 0
    }
    
    .view p {
    font-family:Georgia,serif;
    font-style:italic;
    font-size:14px;
    position:relative;
    color: #FAFAFA;
    padding:10px 10px 5px;
    text-align:center
    }
    
    .view a.info {
    display:inline-block;
    text-decoration:none;
    padding:7px 14px;
    background:#000;
    color: #FAFAFA;
    text-transform:uppercase;
    box-shadow:0 0 1px #000
    }
    
    .view a.info:hover {
    box-shadow:0 0 5px #000
    }
    
    .view-fifth img {
    transition:all .3s ease-in-out
    }
    
    .view-fifth .mask {
    background-color:rgba(183,224,243,0.5);
    transform:translateX(-300px);
    opacity:1;
    transition:all .4s ease-in-out
    }
    
    .view-fifth h2 {
    background:rgba(255,255,255,0.5);
    color:#000;
    box-shadow:0 1px 3px rgba(255,255,255,0.5)
    }
    
    .view-fifth p {
    opacity:0;
    color:#333;
    transition:all .2s linear
    }

    .view-fifth ul {
    padding: 0;
    margin: 20px 0;   
    font-size: 14px;
    }

    .view-fifth ul li {
    color: #222;
    list-style-type: none;
    padding: 0;
    margin-top: 2px;
    }
    
    .view-fifth:hover .mask {
    transform:translateX(0px)
    }
    
    .view-fifth:hover img {
    transform:translateX(300px);
    transition-delay:.1s
    }
    
    .view-fifth:hover p {
    opacity:1;
    transition-delay:.4s
    }

    .copyright {
        display: contents;
        font-size: 14px;
    }

    .footer_copyright {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

/* Fix for tool container */
#directions_grid {
 /* Отменяем стили MixItUp (если они применяются) */
 display: block !important;
 opacity: 1 !important;
 transform: none !important;
 /* Доп. стили, если необходимо */
 position: relative; /* стили для позиционирования */
}

#directions_grid .mix {
 display: block !important; /* элементы всегда видны */
}

/* Fix for Parallax */
.image-parallax {
    left: 0;
    right: 0;
    max-width: 100vw;
}

/* fade in popup */
.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.3s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: scale(1);
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
    transform: scale(0.98);
}