/*////////////////////////////////////////////////////////////////////////////////*/
/* общие стили для движущихся баннеров на страицах услуг */

#serv_banner-box{
    
}
#serv_banner{
    width: 100%;
    max-width: 980px;
    height: calc(100vh - 130px);
    position: absolute;
    z-index: 4;
    top: 100px;
    right: 0;
    box-sizing: border-box;
}
#serv_banner svg {
    display: block;
    height: 100%;
    width: auto;
    position: absolute;
    right: 0;
}
#serv_banner svg svg,
#serv_banner svg svg:hover{
    transition: 600;
    transform: rotate(0deg);
}
#sup0b {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right;
}
#sup1b,#sup2b,#sup3b,#sup4b,#sup5b{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

/*////////////////////////////////////////////////////////////////////////////////*/
/* для отдельных страниц */

.kontext #sup0b{
    background-size: contain;
    background-image:url(../images/serv/kontext-0.svg);
}
.kontext #sup1b{
    background-position: 15% 35%;
    background-size: 33vh;
    background-image: url(../images/serv/kontext-1.svg);
}
.kontext #sup2b{
    background-position: 15% 75%;
    background-size: 33vh;
    background-image: url(../images/serv/kontext-2.svg);
}

/*////////////////////////////////////////////////////////////////////////////////*/

#seo #sup0b{
    background-size: contain;
    background-image:url(../images/serv/seo2.svg);
}
#seo #sup1b {
    background-position: 39% -8%;
    background-size: 55vh;
    background-image: url(../images/serv/seo1.svg);
}
 
/*////////////////////////////////////////////////////////////////////////////////*/

.support #sup0b{
    background-size: auto 90%;
    background-image:url(../images/serv/supbanner-0.svg);
}
.support #sup1b{
    background-position: 15% 0%;
    background-size: 25vh;
    background-image:url(../images/serv/supbanner-1.svg);
}
.support #sup2b{
    background-position: 90% 0%;
    background-size: 28vh;
    background-image:url(../images/serv/supbanner-2.svg);
}
.support #sup3b{
    background-position: 20% 73%;
    background-size: 18vh;
    background-image:url(../images/serv/supbanner-3.svg);
}
.support #sup4b{
    background-position: 40% 45%;
    background-size: 25vh;
    background-image:url(../images/serv/supbanner-4.svg);
}
.support #sup5b{
    background-position: 90% 95%;
    background-size: 25vh;
    background-image:url(../images/serv/supbanner-5.svg);
}

/*////////////////////////////////////////////////////////////////////////////////*/

.sitedev #sup0b {
    background: radial-gradient(68.03% 80.97% at 34.51% 18.11%, #31ca8c 0%, #00D37F 100%);
    border-bottom: 7px solid #fff;
    border-left: 3px solid #fff;
    box-sizing: border-box;
}
.sitedev #sup1b {
    background-position: 67% 83%;
    background-size: 60vh;
    background-image: url(../images/serv/sitedev1.png);
    z-index: 2;
}
.sitedev #sup2b {
    background-position: 13% 61%;
    background-size: 23vh;
    background-image: url(../images/serv/sitedev2.png);
    z-index: 3;
}
.sitedev #sup3b {
    background-position: 117% 26%;
    background-size: 53vh;
    background-image: url(../images/serv/sitedev3-2.png);
    z-index: 1;
}
.sitedev #sup4b {
    background-position: 26% 24%;
    background-size: 24vh;
    background-image: url(../images/serv/sitedev4.png);
    z-index: 1;
}
.sitedev #sup5b {
    background-position: left;
    background-size: cover;
    background-image: url(../images/serv/sup_imghelp.svg);
    z-index: 2;
}

@media(max-width: 1630px){
    .sitedev #sup1b {
        background-position: 90% 83%;
        background-size: 53vh;
    }
    .sitedev #sup2b {
        background-position: 19% 70%;
        background-size: 19vh;
    }
    .sitedev #sup3b {
        background-position: 119% 29%;
        background-size: 38vh;
    }
    .sitedev #sup4b {
        background-position: 34% 35%;
        background-size: 20vh;
    }
}

@media(max-width: 1450px){
    
    
.sitedev #sup1b {
    background-position: 70% 113%;
    background-size: 61vh;
}
.sitedev #sup2b {
    background-position: 28% 87%;
    background-size: 22vh;
}
.sitedev #sup3b {
    background-position: 119% 33%;
    background-size: 55vh;
}
.sitedev #sup4b {
    background-position: 34% 35%;
    background-size: 25vh;
}


}

@media (max-width: 1365px){
    
.sitedev #sup1b,
.sitedev #sup0b,
.sitedev #sup3b,
.sitedev #sup2b,
.sitedev #sup4b,
.sitedev #sup5b{
    opacity: 0;
}

}

/*////////////////////////////////////////////////////////////////////////////////*/

#design #sup0b{

}
#design #sup0b svg{
    max-width: 100%;
}
#design #sup0b svg path{
    transform-origin: 50% 50%;
}
.dhand1{
    transform: translate(0px, 0px);
    animation: dhand1 1700ms ease-in-out infinite;
}
@keyframes dhand1{
 0%{ transform: translate(0px, 0px); }
 50%{ transform: translate(3px, 0px); }
 100%{ transform: translate(0px, 0px); }
}
.dhand2{
    transform: rotate(1deg) translate(10px, 0px);
    animation: dhand2 8000ms ease-in-out infinite;
}
@keyframes dhand2{
 0%{ transform: rotate(1deg) translate(10px, 0px); }
 10%{ transform: rotate(1deg) translate(10px, 10px); }
 20%{ transform: rotate(0.5deg) translate(2px, 15px); }
 30%{ transform: rotate(1deg) translate(2px, 15px); }
 40%{ transform: rotate(1.5deg) translate(10px, 10px); }
 50%{ transform: rotate(1deg) translate(10px, 10px); }
 60%{ transform: rotate(1deg) translate(7px, 7px); }
 70%{ transform: rotate(1.5deg) translate(10px, 10px); }
 80%{ transform: rotate(1deg) translate(7px, 7px); }
 90%{ transform: rotate(1deg) translate(14px, 0px); }
 100%{ transform: rotate(1deg) translate(10px, 0px); }
}
.dhead1{
    transform: translate(0px, 0px);
    animation: dhead1 3000ms ease-in-out infinite;
}
@keyframes dhead1{
 0%{ transform: translate(0px, 0px); }
 50%{ transform: translate(1px, 1px); }
 100%{ transform: translate(0px, 0px); }
}
.dpig{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    animation: dpig 1400ms ease-in-out infinite;
}
@keyframes dpig{
 0%{ transform: rotate(0deg); }
 50%{ transform: rotate(5deg); }
 100%{ transform: rotate(0deg); }
}
#design #sup1b {
    background-position: 6% 30%;
    background-size: 11vh;
    background-image: url(../images/serv/diz-b1.svg);
}
#design #sup2b {
    background-position: 31% 17%;
    background-size: 8vh;
    background-image: url(../images/serv/diz-b2.svg);
}
#design #sup3b {
    background-position: 97% 27%;
    background-size: 17vh;
    background-image: url(../images/serv/diz-b3.svg);
}
@media(max-width: 1600px){
    #design #sup1b {
        background-size: 10vh;
    }
    #design #sup2b {
        background-size: 7vh;
    }
    #design #sup3b {
        background-size: 15vh;
    }
}
@media(max-width: 1450px){
    #design #sup1b {
        opacity: 0;
    }
}
g.doblako{
    animation: doblako 8000ms ease-in-out;
}
@keyframes doblako{
 0%{ transform: translate(0px, 0px); }
 10%{ transform: translate(-18px, 34px); }
 20%{ transform: translate(-18px, 34px); }
 40%{ transform: translate(10px, 0px); }
 60%{ transform: translate(7px, 7px); }
 80%{ transform: translate(7px, 7px); }
 90%{ transform: translate(14px, 0px); }
 100%{ transform: translate(0px, 0px); }
}
.ddetail1{
    fill: rgb(70, 211, 176);
}
.ddetail1_act{
    fill: rgb(187, 86, 255);
    transition: 300ms;
}
path.dcoffe{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    animation: dcoffe 2000ms ease-in-out infinite;
}
@keyframes dcoffe{
 0%{ transform: rotate(0deg); }
 33%{ transform: rotate(-4deg); }
 66%{ transform: rotate(4deg); }
 100%{ transform: rotate(0deg); }
}

/*////////////////////////////////////////////////////////////////////////////////*/

.crm #sup0b{
    background-size: contain;
    background-image:url(../images/serv/crm-0.svg);
}
.crm #sup1b{
    background-position: 13% 24%;
    background-size: 17vh;
    background-image:url(../images/serv/crm-1.svg);
}
.crm #sup2b{
    background-position: 48% 32%;
    background-size: 12vh;
    background-image:url(../images/serv/crm-2.svg);
}
.crm #sup3b{

}
.crm #sup3bimg {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 118px;
    max-width: 115px;
    left: 60%;
    top: 60%;
}
.crm #sup3bimg svg{
    max-height: 100%;
}
.sup3bimg1{

}
.sup3bimg2{

}
/*//////////////////////////////////////*/
.sup3bimg2,
.sup3bimg1{
    animation: graf1 5000ms ease-in-out infinite;
}
@keyframes graf1{
 0%{ transform: scaleY(1) translateY(0%); }
 45%{ transform: scaleY(0.9) translateY(11%); }
 100%{ transform: scaleY(1) translateY(0%); }
}
.sup3bimg3{
    animation: graf2 5000ms ease-in-out infinite;
}
@keyframes graf2{
 0%{ transform: translateY(0%); }
 45%{ transform: translateY(9%); }
 100%{ transform: translateY(0%); }
}
/*//////////////////////////////////////*/
.sup3bimg4,
.sup3bimg6{
    animation: graf3 4000ms ease-in-out infinite;
}
@keyframes graf3{
 0%{ transform: scaleY(1) translateY(0%); }
 45%{ transform: scaleY(0.9) translateY(9%); }
 100%{ transform: scaleY(1) translateY(0%); }
}
.sup3bimg5{
    animation: graf4 4000ms ease-in-out infinite;
}
@keyframes graf4{
 0%{ transform: translateY(0%); }
 45%{ transform: translateY(6%); }
 100%{ transform: translateY(0%); }
}
/*//////////////////////////////////////*/
.sup3bimg7,
.sup3bimg8{
    animation: graf5 3000ms ease-in-out infinite;
}
@keyframes graf5{
 0%{ transform: scaleY(1) translateY(0%); }
 45%{ transform: scaleY(0.9) translateY(8%); }
 100%{ transform: scaleY(1) translateY(0%); }
}
.sup3bimg9{
    animation: graf6 3000ms ease-in-out infinite;
}
@keyframes graf6{
 0%{ transform: translateY(0%); }
 45%{ transform: translateY(5%); }
 100%{ transform: translateY(0%); }
}
/*//////////////////////////////////////*/
.sup3bimg10,
.sup3bimg11{
    animation: graf7 2000ms ease-in-out infinite;
}
@keyframes graf7{
 0%{ transform: scaleY(1) translateY(0%); }
 45%{ transform: scaleY(0.96) translateY(2%); }
 100%{ transform: scaleY(1) translateY(0%); }
}
.sup3bimg12{
    animation: graf8 2000ms ease-in-out infinite;
}
@keyframes graf8{
 0%{ transform: translateY(0%); }
 45%{ transform: translateY(0.5%); }
 100%{ transform: translateY(0%); }
}

/*////////////////////////////////////////////////////////////////////////////////*/

@media(max-width: 1630px){
    
    #serv_banner {
        width: 100%;
        max-width: 830px;
    }
    .support #sup0b {
        background-size: contain;
    }
    .support #sup1b{
        background-position: 21% 5%;
        background-size: 22vh;
    }
    .support #sup2b{
        background-position: 86% 12%;
        background-size: 24vh;
    }
    .support #sup3b{
        background-position: 23% 75%;
        background-size: 15vh;
    }
    .support #sup4b {
        background-position: 48% 50%;
        background-size: 20vh;
    }
    .support #sup5b{
        background-position: 90% 83%;
        background-size: 21vh;
    }
    
    
    
}

@media(max-width: 1450px){

    #serv_banner {
        width: 100%;
        max-width: 770px;
    }
    
    
    

}

@media(max-width: 1365px){
    #serv_banner {
        max-width: 100%;
    }
    .serv_banner-opacity {
        position: absolute;
        bottom: 0;
        right: -20px;
        background: rgba(255, 255, 255, 0.79);
    }
    #sup0b{
        left: 20px !important;
    }

    
    
}

@media(max-width: 767px){
.sitedev #sup1b {
	opacity: 0.2;
}
.sitedev #sup1b {
	background-position: 20% 13%;
	background-size: 61vh;
}
}