html { height: 100%; }
body { height: 100%; min-width: 320px; }
.body { min-height: 100%; }
.layout { position: relative; }
.da { margin-left: 300px; margin-top: 60px; margin-bottom: 40px; margin-right: 40px; }
.da-minus { margin-left: -280px; margin-top: -15px; margin-right: -40px; margin-bottom: -40px; }

body::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 10px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar { width: 7px; }

header.page { background-color: #333333; display: flex; padding: 10px 40px 10px 40px; justify-content: space-between; align-items: center; }
header.page a { color: #ffffff; text-decoration: none; }
header.page .logo { flex-basis: 130px; }
header.page .logo img { width: 130px; }
header.page .about { font-weight: 700; font-size: 0.8rem; flex-basis: 120px; margin-left: 40px; color: #cccccc; }
header.page .infoline { flex-basis: 250px; text-align: right; }
header.page .infoline .tel { font-size: 1.8rem; }
header.page .infoline .schedule { font-size: 0.7rem; color: #dddddd; }
header.page .sm { flex-grow: 1; text-align: right; }
header.page .sm a { display: inline-flex; width: 34px; height: 34px; opacity: 0.5; transition: opacity 0.2s ease-out 0s; color: #cccccc; border-radius: 19px; text-align: center; justify-content: center; align-items: center; margin-left: 2px; margin-right: 2px; font-size: 1.4rem; }
header.page .sm a:hover { opacity: 1; }

header.advantages { background-color: #298E90; display: flex; padding-top: 5px; padding-bottom: 5px; justify-content: space-between; align-items: center; color: #ffffff; font-size: 0.8rem; line-height: 1.2rem; position: relative; }
header.advantages .item { white-space: nowrap; margin-left: 20px; margin-right: 20px; text-overflow: ellipsis; overflow: hidden; }
header.advantages .item i { font-size: 1.2rem; vertical-align: sub; margin-right: 3px; }



.project-tile { display: block; width: 25%; border: 1px solid transparent; box-sizing: border-box; position: relative; overflow: hidden; }
.project-tile .slide { position: absolute; left: 0; transition: bottom 0.3s ease-out 0s, opacity 0.3s ease-in-out 0s; width: 100%; z-index: 1; bottom: 100%; opacity: 0.1; }
.project-tile .slide footer { position: absolute; padding-left: 20px; padding-right: 20px; padding-bottom: 30px; bottom: 0; }
.project-tile .slide .caption { font-size: 1.6rem; margin-bottom: 0.7rem;; color: #ffffff; word-break: break-word; }
.project-tile .slide .price-click { font-size: 1.2rem; color: #ffffff; line-height: 1.6rem; }
.project-tile .slide .price-click i { margin-right: 5px; font-size: 1.6rem; vertical-align: bottom; }
.project-tile .bg img { width: 100%; vertical-align: middle; }
.project-tile::after { transition: opacity 0.2s linear 0s; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.6); opacity: 0; }
.project-tile:hover .slide { bottom: 0; opacity: 1; }
.project-tile:hover::after { opacity: 1; }
.project-tile-pending { display: none; }

.publication-tile { display: block; width: 25%; border: 1px solid transparent; box-sizing: border-box; position: relative; overflow: hidden; word-break: break-word; }
.publication-tile .wrapper { padding: 40px; }

.project-card { width: 100%; height: calc(100% - 100px); background-color: #333333; }
.project-card .media-txt { overflow: hidden; display: flex; height: 100%; }
.project-card .media-txt .media { width: 50%; padding-right: 10px; box-sizing: border-box; }
.project-card .media-txt .media .square { height: 100%; position: relative; width: 100%; overflow: hidden; }
.project-card .media-txt .media .square .slider-wrapper { position: absolute; top: 0; height: 100%; width: 100%; }
.project-card .media-txt .txt { width: 50%; padding-top: 50px; padding-left: 10px; padding-right: 10px; box-sizing: border-box; padding-bottom: 10px; overflow: auto; scrollbar-width: thin; }
.project-card .media-txt .txt::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 10px; }
.project-card .media-txt .txt::-webkit-scrollbar-track { background: transparent; }
.project-card .media-txt .txt::-webkit-scrollbar { width: 7px; }
.project-card .media-txt .txt h1 { font-weight: normal; margin-bottom: 1em; }
.project-card .media-txt .txt .props-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 20px; }
.project-card .media-txt .txt .props-grid .prop {  }
.project-card .media-txt .txt .props-grid .prop .name { color: #B8B8B8; font-size: 0.7rem; }
.project-card .media-txt .txt .props-grid .prop .value { font-size: 0.8rem;  }
.project-card .media-txt .txt .price { font-size: 2rem; margin-top: 2rem; }
.project-card .media-txt .txt .price i { vertical-align: middle; margin-right: 10px; }
.project-card .media-txt .txt .form {  color: #B8B8B8; background-color: #222222; margin-top: 2rem; padding: 20px 40px; margin-right: 10px; }
.project-card .media-txt .txt .form a { color: #B8B8B8; }
.project-card .media-txt .txt .form header { font-size: 1.375em; text-align: center; margin-bottom: 20px; }
.project-card .infoline { background-color: #222222; height: 100px; position: relative; bottom: 0; right: 0; left: 0; }
.dialog-root .project-card .infoline { position: absolute; }
.project-card .infoline .prev-project { width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color: #000000; cursor: pointer; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; color: #ffffff; text-decoration: none; }
.project-card .infoline .prev-project .label { text-align: left; font-size: 0.750rem; }
.project-card .infoline .prev-project .arrow { width: 100%; }
.project-card .infoline .prev-project .arrow img { width: 80px; }
.project-card .infoline .next-project { width: 100px; height: 100px; position: absolute; top: 0; right: 0; background-color: #000000; cursor: pointer; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; color: #ffffff; text-decoration: none; }
.project-card .infoline .next-project .label { text-align: right; font-size: 0.750rem; }
.project-card .infoline .next-project .arrow { width: 100%; transform: rotateY(180deg); }
.project-card .infoline .next-project .arrow img { width: 80px; }
.project-card .infoline .contacts { position: absolute; left: 100px; right: 100px; height: 100px; display: table; padding-left: 30px; padding-right: 30px; }
.project-card .infoline .contacts .we { width: 350px; height: 100%; float: left; position: relative; }
.project-card .infoline .contacts .we .avatar { line-height: 80px; position: absolute; top: 10px; }
.project-card .infoline .contacts .we .avatar .logo { width: 80px; height: 80px; background-color: #ffffff; border-radius: 40px; text-align: center; }
.project-card .infoline .contacts .we .avatar .logo img { width: 80%; vertical-align: middle; }
.project-card .infoline .contacts .we .avatar .status { position: absolute; width: 10px; height: 10px; background-color: #ffffff; top: 0; right: 0; border-radius: 5px; }
.project-card .infoline .contacts .we .avatar .online { background-color: #00D10F; }
.project-card .infoline .contacts .we .avatar .offline { background-color: #ce0a0a; }
.project-card .infoline .contacts .we .txt { position: absolute; top: 0; bottom: 0; right: 0; left: 100px; display: flex; flex-direction: column; justify-content: center; }
.project-card .infoline .contacts .we .txt .name { font-weight: 700; font-size: 1.500rem; }
.project-card .infoline .contacts .we .txt .workshedule { font-size: 0.750rem; }
.project-card .infoline .contacts .btns { height: 100%; display: table-cell; width: 100%; font-size: 0.75rem; font-weight: 700; vertical-align: middle; text-align: center; }
.project-card .infoline .contacts .btns a { text-decoration: none; padding-left: 20px; padding-right: 20px; padding-top: 7px; padding-bottom: 7px; text-align: center; display: inline-block; margin-top: 5px; margin-bottom: 5px; box-sizing: border-box; }
.btn-tg { border: 1px solid #30A3E6; color: #30A3E6; margin: auto; }
.btn-tg:hover { border-color: #ffffff; color: #ffffff; }
.btn-wa { border: 1px solid #25D366; color: #25D366; margin: auto; }
.btn-wa:hover { border-color: #ffffff; color: #ffffff; }
.btn-vb { border: 1px solid #7360F2; color: #7360F2; margin: auto; }
.btn-vb:hover { border-color: #ffffff; color: #ffffff; }
.btn-tl { border: 1px solid #DBDBDB; color: #DBDBDB; margin: auto; }
.btn-tl:hover { border-color: #ffffff; color: #ffffff; }




.slick-slider { height: 100%; }
.slick-list { height: 100%; }
.slick-track { height: 100%; }
.slick-slide { height: 100%; }
.slick-slide img { object-fit: contain; width: 100%; height: 100%; }
.slick-dots { position: absolute; bottom: 20px; padding: 0; transform: translateX(-50%); left: 50%; }
.slick-dots li { list-style: none; display: inline-block; vertical-align: middle; }
.slick-dots li button { font-size: 0; margin-left: 3px; margin-right: 3px; width: 15px; height: 15px; display: block; background-color: #ffffff; opacity: 0.3; border: none; cursor: pointer; border-radius: 30px; }
.slick-dots .slick-active button { opacity: 1; }




.project-card .media-txt .txt .form .ilabel { position: absolute; top: 0.8rem; left: 1rem; transition: font-size ease-out 0.1s 0s, top ease-out 0.1s 0s, color ease-out 0.1s 0s; border-radius: 3px; white-space: nowrap; font-size: 0.8rem; }
.project-card .media-txt .txt .form input:focus + .ilabel, .project-card .media-txt .txt .form input:not(:placeholder-shown) + .ilabel { top: -0.4rem; font-size: 0.8rem; background-color: #222222; padding-left: 3px; padding-right: 3px; color: #999999; }


/* Dialog */
.dialog-root { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 90%; margin: auto; background-color: #222222; z-index: 100; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.dialog-root::before { content: ""; display: block; position: fixed; background-color: #000000; opacity: 1; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; }
.dialog-root .dialog-close-btn { position: absolute; top: 0; right: 0; cursor: pointer; height: 30px; width: 30px; z-index: 100; border: 1px solid #999999; background-image: url(/images/dialog-close.svg); background-repeat: no-repeat; background-size: 90%; background-position: center; background-color: #333333; }
.dialog-root .dialog-content { position: relative; z-index: 100; height: 100%; }
.dialog-root .dialog-content.pending::before { content: ""; display: block; position: absolute; top: 0; bottom: 100px; left: 0; right: 0; background-color: rgba(0,0,0,0.6); z-index: 100; background-image: url(/images/preloader.svg); background-position: center; background-size: 100px; background-repeat: no-repeat; }



footer.page { display: flex; padding-top: 20px; padding-bottom: 20px; align-items: center; }
footer.page .copyrights { flex-grow: 1; text-align: center; }

footer.page .created-by { flex-basis: 100px; font-size: 0.7rem; width: 100px; margin: auto; }
footer.page .created-by a { color: #ffffff; }
footer.page .created-by .znak { float: left; line-height: 2.4em; margin-right: 20px; }
footer.page .created-by .znak img { vertical-align: middle; }
footer.page .created-by .text { line-height: 1.2em; }

footer.fixed { display: none; position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; background-color: #333333; min-width: 320px; height: 70px; justify-content: center; align-items: center; justify-content: space-around; }
footer.fixed a { display: inline-flex; width: 34px; height: 24px; opacity: 0.5; transition: opacity 0.2s ease-out 0s; color: #cccccc; border-radius: 19px; text-align: center; margin-left: 2px; margin-right: 2px; font-size: 1.6rem; text-decoration: none; }
footer.fixed a:hover { opacity: 1; }

/* Tooltops */
[data-title] { cursor: help; }
[data-title]::after { content: attr(data-title); position: absolute; transition: all 0.3s cubic-bezier(0.15,1,0.8,0.85); display: block; text-align: center; width: 200px; font-size: 0.8rem; background-color: #298E90; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 1; padding: 5px; opacity: 0; visibility: hidden; transform: translateY(-50px); top: 100%; text-decoration: none; color: #ffffff; pointer-events: none; white-space: normal; }
[data-title]:hover::after { opacity: 1; visibility: visible; transform:translateY(0); }


header.advantages .item:nth-child(4)[data-title]::after { right: 0; }

.grecaptcha-badge { visibility: hidden; }
#scroll-into-view-anchor { position: absolute; top: -60px; }
/**************************************************/
/**************************************************/
/**************************************************/

@media (max-width: 1340px) {
    .project-card .media-txt .txt .form { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1240px) {
    .project-card .media-txt .media { width: 40%; }
    .project-card .media-txt .txt { width: 60%; }

    .dialog-root { width: 100%; }
}

@media (max-width: 1024px) {

    header.page { position: fixed; top: 0; padding: 5px 20px 5px 20px; z-index: 101; left: 0; right: 0; height: 60px; box-sizing: border-box; }
    header.page .about { margin-left: 20px; }
    header.page .sm { display: none; }
    header.page .infoline { flex-grow: 1; flex-basis: unset; }
    header.page .infoline .tel { font-size: 1.4rem; }
    header.page .infoline .schedule { font-size: 0.6rem; }

    .advantages { margin-top: 60px; }
    
    .project-card { height: unset; }
    .project-card .media-txt { flex-direction: column; align-items: center; }
    .project-card .media-txt .media { width: 80%; padding-right: 0; }
    .project-card .media-txt .media .square { height: 500px; }
    .project-card .media-txt .txt { width: 80%; padding-left: 0; padding-right: 0; }
    .project-card .media-txt .txt .form { margin-right: 0; }
    .project-card .infoline { height: unset; overflow: hidden; position: relative; }
    .dialog-root .project-card .infoline { position: relative; }
    .project-card .infoline .contacts { position: unset; margin-bottom: 5rem; }
    .project-card .infoline .contacts .we { width: 250px; }
    .project-card .infoline .prev-project { position: fixed; bottom: 0; background-color: #333333; top: unset; height: 70px; z-index: 101; }
    .project-card .infoline .next-project { position: fixed; bottom: 0; background-color: #333333; top: unset; height: 70px; z-index: 101; }
    .project-tile .slide .caption { font-size: 1.2rem; }
    .project-tile .slide .price-click { font-size: 0.8rem; }
    .publication-tile, .project-tile { width: 33.3333%; }
    .publication-tile { font-size: 0.8rem; }
    .publication-tile .wrapper { padding: 25px; }

    footer.fixed { display: flex; }

    .dialog-root { overflow-y: scroll; }
    .body.with-dialog { height: 100%; overflow: hidden; }

}

@media (max-width: 740px) {
    header.page { padding: 5px 10px 5px 10px; }
    header.page .infoline { flex-basis: 200px; }
    header.page .infoline .schedule { font-size: 0.6rem; }

    header.advantages .item span { display: none; }

    .project-card .media-txt .media { width: 100%; padding-right: 0; }
    .project-card .media-txt .txt { width: 100%; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; }
    .project-card .media-txt .txt .form { margin-right: 0; margin-right: -20px; margin-left: -20px; }
    .project-card .infoline .contacts { padding-left: 0; padding-right: 0; }
}

@media (max-width: 660px) {

    header.advantages .item:nth-child(3)[data-title]::after { right: 0; }

    .publication-tile, .project-tile { width: 50%; }
    .project-tile .slide .price-click { font-size: 2.8vw; }
    .project-tile .slide footer { padding-bottom: 15px; padding-left: 10px; padding-right: 10px; }
    .publication-tile .wrapper { padding: 15px; }
    
    footer.page { display: block; padding-bottom: 110px; }
    footer.page .copyrights { margin-bottom: 2rem; }

    
    
    
    .project-card .media-txt .txt .props-grid {  grid-template-columns: 1fr 1fr; }
    .project-card .infoline .contacts { display: block; height: unset; }
    .project-card .infoline .contacts .we { float: unset; margin: auto; height: 80px; width: 200px; }
    .project-card .infoline .contacts .we .avatar { line-height: 50px; }
    .project-card .infoline .contacts .we .avatar .logo { width: 50px; height: 50px; }
    .project-card .infoline .contacts .we .txt { left: 70px; }
    .project-card .infoline .contacts .we .txt .name { font-size: 1rem; }
    .project-card .infoline .contacts .we .txt .workshedule { font-size: 0.5rem; }
    .project-card .infoline .contacts .btns { height: unset; display: block; }
    .project-card .infoline .contacts .btns a { width: 48%; box-sizing: border-box; }
    
}

@media (max-width: 560px) {
    header.page .logo { flex-basis: 80px; }
    header.page .logo img { width: 80px; }
    header.page .about { font-size: 0.6rem; flex-basis: 90px; margin-left: 10px; }

    .project-card .infoline .contacts .btns a { font-size: 0.65rem; }
}

@media (max-width: 460px) {
    
    header.page .infoline .tel { font-size: 1.2rem; }
    header.page .infoline .schedule { font-size: 0.5rem; }
    header.advantages .item { text-overflow: unset; }
    .project-tile .slide .caption { font-size: 0.8rem; }

    .project-card .media-txt .txt .props-grid {  grid-template-columns: 1fr; }
}