@font-face {
    font-family: 'MontserratSemiBold';
    src: url('../fonts/Montserrat-SemiBold.eot');
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
    url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-SemiBold.woff') format('woff'),
    url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'MontserratBold';
    src: url('../fonts/Montserrat-Bold.eot');
    src: local('Montserrat Bold'), local('Montserrat-Bold'),
    url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Bold.woff') format('woff'),
    url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'MontserratRegular';
    src: url('../fonts/Montserrat-Regular.eot');
    src: local('Montserrat Regular'), local('Montserrat-Regular'),
    url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Regular.woff') format('woff'),
    url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MontserratExtraBold';
    src: url('../fonts/Montserrat-ExtraBold.eot');
    src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
    url('../fonts/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-ExtraBold.woff') format('woff'),
    url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'MontserratMedium';
    src: url('../fonts/Montserrat-Medium.eot');
    src: local('Montserrat Medium'), local('Montserrat-Medium'),
    url('../fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Montserrat-Medium.woff') format('woff'),
    url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
body{
    font-family: 'MontserratRegular', sans-serif;
    line-height: 1.4;
    color: white;
    background-color: #0C0C25;
}
.home_page{
    overflow: hidden;
    position: relative;
}
.home_page:after{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: "";
    background-image: url("../img/main.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}

.heartBeat{
    animation: heartBeat 2s infinite;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}


.home_rel{
    position: relative;
    z-index: 2;
}
footer{
    position: relative;
    z-index: 2;
}
.text_page{
    background-image: url("../img/page.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
.portfolio_page{
    background-image: url("../img/portfolio.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
.quiz_page{
    background-image: url("../img/quiz.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
.card_page{
    background-image: url("../img/card.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}
section{
    position: relative;
}
section .container{
    position: relative;
    z-index: 10;
}
.line{
    position: absolute;
}
.line1{
    top: 0;
    left: 24.7rem;
    width: 26.333rem;
    z-index: 1;
}
.line2 {
    top: 23.8rem;
    left: 0;
    width: 16.389rem;
    z-index: 2;
}
.line3 {
    top: 25.1rem;
    left: 0;
    width: 8.722rem;
    z-index: 1;
}
.line4 {
    top: 0;
    left: 0;
    width: 42.722rem;
}
.line5 {
    top: 10.8rem;
    right: 0;
    width: 8.111rem;
}
.line6 {
    top: 25rem;
    right: 0;
    width: 19.111rem;
}
.line7{
    top: 25rem;
    right: 0;
    width: 19.111rem;
}
.btn{
    font-family: MontserratSemiBold, sans-serif;
    border-radius: 5px;
    padding: 0.55rem 1.35rem;
    position: relative;
    overflow: hidden;
    color: white;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    background: linear-gradient(360deg, #48BAFF 0%, #6578FF 31.25%, #AA2AFF 69.79%, #DA15FF 100%);
}
.btn:after{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: linear-gradient(180deg, #48BAFF 0%, #6578FF 31.25%, #AA2AFF 69.79%, #DA15FF 100%);
    transition: all 0.5s;
}
.btn:hover{
    color: white;
}
.btn:hover:after{
    opacity: 0;
}
.btn span{
    position: relative;
    z-index: 1;
}
.container {
    width: 66rem;
}
header{
    position: absolute;
    padding: 3.3rem 0;
    font-family: MontserratSemiBold, sans-serif;
}
.header_phone{
    display: flex;
    align-items: center;
    margin-right: 6.3rem;
}
.header_phone img{
    width: 1.111rem;
    margin-right: 0.6rem;
}
.header_phone a:hover{
    opacity: 0.5;
}
.logo {
    width: 22.889rem;
    margin: 0 auto;
    margin-bottom: 3.6rem;
}
.logo img{
    width: 100%;
}
.logo_text h1 {
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.25;
}
#box-1{
    padding-top: 22.9rem;
    text-align: center;
    padding-bottom: 10rem;
}
#box-2 {
    padding-top: 5.9rem;
}
.section_title{
    text-transform: uppercase;
    text-align: center;
    font-size: 1.667rem;
    margin-bottom: 1.1rem;
}
.services{
    width: 30.944rem;
    margin: 0 auto;
    margin-bottom: 2rem;
    height: 30.944rem;
    position: relative;
}
.service_item{
    position: absolute;
}
.service_item h4 {
    font-family: 'MontserratSemiBold', sans-serif;
    font-size: 1.222rem;
}
.service_item p {
    margin: 0;
    font-family: 'MontserratSemiBold', sans-serif;
    font-size: 0.944rem;
    line-height: 1.3;
}
.s1 {
    left: calc(100% + 1rem);
    bottom: 15.5rem;
    width: 18.2rem;
}
.go_to_quiz {
    position: relative;
    height: 9rem;
    width: 35.2rem;
    margin: 0 auto;
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.111rem;
    padding-bottom: 0.9rem;
    background: #21204E;
}
.go_to_quiz_box{
    position: relative;
    left: -0.4rem;
    text-align: center;
}
.go_to_quiz p {
    margin-bottom: 1.3rem;
}
.go_to_quiz .btn{
    padding: 0.15rem 2.1rem;
    font-size: 0.833rem;
}
.left_after {
    position: absolute;
    height: 100%;
    right: 100%;
    top: 0;
}
.go_to_quiz_anim{
    position: absolute;
    top: 50%;
    left: -8.5rem;
    transform: translateY(-50%);
    z-index: 1;
    width: 7.167rem;
}
#box-3 {
    padding-top: 3.1rem;
}
.portfolio{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -0.5rem;
}
.portfolio_item{
    width: calc(50% - 1rem);
    margin: 0 0.5rem;
    margin-bottom: 1rem;
    height: 42.299rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.port_top{
    margin: 0 -0.5rem;
}
.port_top_item{
    width: calc(50% - 1rem);
    margin: 0 0.5rem;
    height: 14.4rem;
    background: linear-gradient(360deg, #151630 0%, #5260AB 36.98%, #855BC2 68.75%, #161732 96.46%);
    border: 0.5px solid rgba(164, 164, 164, 0.5);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
/*.card_text3{*/
/*    font-family: MontserratMedium, sans-serif;*/
/*    width: 32rem;*/
/*}*/
.port_full{
    height: 26.9rem;
    background: linear-gradient(360deg, #151630 0%, #5260AB 36.98%, #855BC2 68.75%, #161732 96.46%);
    border: 0.5px solid rgba(164, 164, 164, 0.5);
    border-radius: 5px;
    position: relative;
    display: block;
    overflow: hidden;
}
.port_top_item:after, .port_full:after{
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: linear-gradient(180deg, #151630 0%, #5260AB 36.98%, #855BC2 68.75%, #161732 96.46%);
    transition: all 0.5s;
}
.port_top_item:hover:after, .port_full:hover:after{
    opacity: 0;
}
.port_anim {
    position: absolute;
    right: 11.1rem;
    top: -3.1rem;
    width: 7.333rem;
    z-index: 3;
    pointer-events: none;
}
.port_top_item.iphone .port_rel{
    align-items: flex-end;
}
.port_top_item.iphone img{
    width: 9.1rem;
}
.port_top_item.macbook .port_rel{
    padding-top: 1.5rem;
}
.port_top_item.macbook img{
    width: 14.556rem;
}

.port_top_item.samsung .port_rel{
    align-items: flex-end;
}
.port_top_item.samsung img{
    max-width: 9.444rem;
}

.port_top_item.notebook .port_rel{
    align-items: flex-end;
}
.port_top_item.notebook img{
    max-width: 13.778rem;
}

.port_top_item.iphone .port_rel{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.port_top_item.iphone img{
    width: 9.1rem;
}

.mac_full .port_rel{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1.7rem;
    padding-left: 0.8rem;
}
.mobile_full .port_rel{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mobile_full img{
    width: 17.833rem;
}
.mac_full img{
    width: 21.333rem;
}
.port_full_text{
    position: absolute;
    bottom: 1.8rem;
    left: 1.3rem;
    right: 1.3rem;
    font-family: MontserratSemiBold, sans-serif;
    line-height: 1.3;
    z-index: 1;
}
.port_full_text h4 {
    font-size: 1.278rem;
    margin-bottom: 0.8rem;
}
.android_icon {
    position: absolute;
    right: 1.6rem;
    bottom: 3.1rem;
    pointer-events: none;
}
.android_icon img {
    max-width: 1.3rem!important;
    max-height: 1.3rem;
    object-fit: scale-down;
    margin-left: 0.35rem;
}
.port_rel{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.link_to_port {
    text-align: center;
    padding-top: 0.4rem;
}
.link_to_port a{
    display: inline-block;
    font-family: MontserratSemiBold, sans-serif;
    background: linear-gradient(180deg, #4FAFFF 21.05%, #6185FF 32.16%, #8654FF 37.35%, #CF1AFF 51.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.link_to_port a:hover{
    background: linear-gradient(360deg, #4FAFFF 21.05%, #6185FF 32.16%, #8654FF 37.35%, #CF1AFF 51.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
#box-4 {
    padding-top: 5.9rem;
}
.video{
    height: 28.7rem;
    width: 51.5rem;
    margin: 0 auto;
    margin-top: 2.7rem;
    position: relative;
    display: block;
    background: black;
}
.video:hover .video_bg{
    opacity: 0.7;
}
.video_bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transition: all 0.5s;
}
.video_play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6.833rem;
    z-index: 1;
}
.video_form h4{
    text-align: center;
    font-size: 0.944rem;
    background: linear-gradient(180deg, #52A9FF 9.02%, #6779FF 15.88%, #9445FF 22.34%, #C81EFF 28.69%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 0.7rem;
}
.video_form{
    padding-top: 1.6rem;
}
.video_form_box{
    width: 34.1rem;
    margin: 0 auto;
    background: rgba(14, 14, 46, 0.9);
    padding: 1.6rem 1rem;
    position: relative;
}
.form_anim2 {
    position: absolute;
    right: -13.6rem;
    bottom: 3.5rem;
    width: 9.278rem;
    z-index: 1;
    pointer-events: none;
}
.form_flex .form-group{
    width: 42.6%;
}
.form-control2{
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    width: 100%;
    color: white;
    font-family: MontserratRegular, sans-serif;
    font-size: 0.889rem;
    padding: 0.2rem 0;
    border-radius: 0;
}
.form-control2::placeholder{
    color: rgba(255, 255, 255, 0.5);
}
.video_form_box .btn{
    font-size: 0.833rem;
    padding: 0.3rem 0.9rem;
}
.form_btn_box{
    text-align: center;
    margin-top: 0.9rem;
    position: relative;
}
.gr_link{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.667rem;
    color: #B231FF;
}
#box-5 {
    padding-top: 10.6rem;
}
.part_flex{
    margin: 0 -0.5rem;
    align-items: center;
    margin-top: 1.3rem;
}
.part_item{
    width: calc(20% - 1rem);
    margin: 0 0.5rem;
    display: block;
    text-align: center;
    margin-bottom: 1.8rem;
}
.part_item img{
    max-width: 100%;
}
#box-6 {
    padding-top: 10.8rem;
    padding-bottom: 9.8rem;
}

.box6_form {
    background: rgba(14, 14, 46, 0.9);
    border-radius: 10px;
    position: relative;
    padding: 2.4rem 2.1rem;
    text-align: center;
}
.form_anim{
    position: absolute;
    right: 11rem;
    bottom: 2.5rem;
    width: 6.722rem;
}
.box6_form_text h4{
    font-size: 1.056rem;
    text-transform: uppercase;
    background: linear-gradient(180deg, #52A9FF 9.02%, #6779FF 15.88%, #9445FF 22.34%, #C81EFF 28.69%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-family: MontserratExtraBold, sans-serif;
}
.box6_form_text p{
    margin: 0;
    font-size: 0.944rem;
    color: rgba(176, 246, 255, 0.6);
    font-family: MontserratSemiBold, sans-serif;
}
.box6_form_text p a{
    color: rgba(176, 246, 255, 0.6);
}
.box6_form_text p a:hover{
    color: white;
}
.box6_form .form_flex {
    margin-top: 2.3rem;
}
.box6_form .form-control2{
    font-size: 1rem;
    padding: 0.1rem 0;
}
.box6_form .form_flex .form-group{
    width: 39.1%;
}
.box6_form .btn{
    font-size: 1rem;
    padding: 0.4rem 1.1rem;
}
.box6_form .form_btn_box{
    margin-top: 5rem;
}
.footer_text{

}
.footer_text p{
    margin: 0;
    font-family: MontserratSemiBold, sans-serif;
    font-size: 1.111rem;
    line-height: 1.25;
}
.footer_border{
    height: 2px;
    background: linear-gradient(180deg, #4DB3FF 0%, #6A6CFF 35.42%, #C317FF 70.31%, #D615FF 100%);;
}
.footer_logo{
    display: block;
    width: 13.167rem;
    margin-bottom: 1.9rem;
}
.footer_box{
    padding-top: 2.5rem;
    font-family: MontserratSemiBold, sans-serif;
    padding-bottom: 1.7rem;
}
.f_title{
    font-size: 1.556rem;
    margin-top: -0.4rem;
    display: inline-block;
    padding-bottom: 0.45rem;
    margin-bottom: 1.3rem;
    margin-left: 1.6rem;
    padding-right: 0.7rem;
    position: relative;
}
.f_title:after{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    content: "";
    background: linear-gradient(180deg, #F3A6FF 0%, #6A6CFF 35.42%, #C317FF 70.31%, #D615FF 100%);
}
.footer_contacts .header_phone{
    margin: 0;
}
.phone_text{
    margin-top: 2rem;
    font-size: 1.111rem;
}
.footer_flex img{
    margin-right: 0.3rem;
    width: 1.278rem;
}
.footer_flex{
    font-size: 1.111rem;
}
.footer_contacts{
    position: relative;
    left: -0.3rem;
}
.footer_link{
    font-size: 0.889rem;
    display: block;
    width: max-content;
    margin-top: 2.2rem;
    color: #B231FF;
}
.footer_flex p{
    margin: 0;
    width: calc(100% - 1.578rem);
}
.footer_address{
    width: calc(100% + 2rem);
    position: relative;
    left: -1.8rem;
}
.footer_socials .f_title{
    margin-left: 0;
    margin-bottom: 1.7rem;
}
.footer_socials {
    padding-left: 0.8rem;
}
.page{
    min-height: 100vh;
}
.page.page_404{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
}
.page.page_404 h1{
    font-size: 3rem;
}
.socials a{
    display: flex;
    align-items: center;
    font-size: 1.111rem;
    margin-bottom: 1rem;
}
.socials a:hover span{
    opacity: 0.5;
}
.socials a span{
    transition: all 0.5s;
}
.footer_flex a:hover{
    color: #B231FF;
}
.socials a img{
    max-width: 100%;
}
.s_icon{
    width: 2.111rem;
    margin-right: 1rem;
}

#service_svg{
    pointer-events: none;
}

#ss-1, #ss3, #ss2{
    pointer-events: painted;
    cursor: pointer;
}
.disabled_svg{
    fill: rgba(39, 25, 45, 0.7)
}
.to_op{
    transition: all 0.35s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
.to_op.active{
    opacity: 1;
}
#si_img3, #sm_img2, #s_img{
    pointer-events: none;
}
.s1_line{
    display: flex;
    justify-content: space-between;
}
.s1 .s1_line{
    margin-top: 0.5rem;
    position: relative;
}
.s1_line:after {
    position: absolute;
    top: 50%;
    height: 3px;
    left: 0;
    right: 100%;
    content: "";
    background-color: #C15FF4;
    transform: translateY(-50%);
    transition: all 0.5s;

}
.service_item.active .s1_line:after{
    transition-delay: 0.5s;
    right: 0;
}
.s_dot{
    width: 0.944rem;
    height: 0.944rem;
    border-radius: 50%;
    background-color: #C15FF4;
    transition: all 1s;
    opacity: 0;
}
.sd1{

}
.service_item.active .sd2{
    transition-delay: 1s;
}
.service_item.active .s_dot{
    opacity: 1;
}
.sc_item {
    position: absolute;
    left: 50.3%;
    top: 49%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.sc_item.active{
    opacity: 1;
    visibility: visible;
}
.sc_item img{

}
.sc_item h4 {
    margin: 0;
    font-size: 1.222rem;
    color: #CD5AF3;
    line-height: 1.2;
    margin-top: 0.9rem;
}
.s11 img{
    width: 3.611rem;
}
.s22 h4{
    color: #4DB2FF;
}
.s22 img{
    width: 2.944rem;
}

.s33 h4{
    color: #854DFE
}
.s33 img{
    width: 2.944rem;
}
.s2 {
    left: 100%;
    bottom: -3rem;
    width: 21rem;
}
.s2_line{
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-top: 0.5rem;
}

.s2f {
    position: absolute;
    left: -6.5rem;
    top: -4.6rem;
}
.s2_line:after{
    position: absolute;
    top: 50%;
    height: 3px;
    left: 0;
    right: 100%;
    content: "";
    background-color: #7271F0;
    transform: translateY(-50%);
    transition: all 0.5s;
}
.s2_line:before {
    position: absolute;
    top: -2rem;
    height: 3px;
    left: -7.15rem;
    width: 8rem;
    content: "";
    background-color: #7271F0;
    transform: rotate(37deg);
    transition: all 0.5s;
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
}
.service_item.active .s2_line:after{
    transition-delay: 1s;
    right: 0;
}
.service_item.active .s2_line:before{
    transition: all 2s;
    transition-delay: 0.5s;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.s2_line .s_dot{
    background-color: #7271F0;
}
.s3 {
    right: calc(100% + 1rem);
    bottom: 17rem;
    width: 18rem;
}
.s3_line{
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-top: 0.5rem;
}
.s3_line .s_dot{
    background-color: #884EFE;
}

.s3_line:after{
    position: absolute;
    top: 50%;
    height: 3px;
    right: 24.3%;
    width: 0;
    content: "";
    background-color: #884EFE;
    transform: translateY(-50%);
    transition: all 0.5s;
}
.s3_line:before {
    position: absolute;
    top: 2.3rem;
    height: 3px;
    right: -1.25rem;
    width: 6.3rem;
    content: "";
    background-color: #884EFE;
    transform: rotate(37deg);
    transition: all 0.5s;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.service_item.active .s3_line:before{
    transition: all 2s;
    transition-delay: 0.5s;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.service_item.active .s3_line:after{
    transition-delay: 1s;
    width: 75.7%;
}
.s3f {
    position: absolute;
    right: -1.3rem;
    top: 4rem;
}

.service_item{
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}
.service_item.active{
    opacity: 1;
    visibility: visible;
}

#sm_img2, #si_img3, #s_img1{
    opacity: 1;
    transition: all 0.5s;
}
#sm_img2.active, #si_img3.active, #s_img1.active{
    opacity: 0;
}

.sc_item img{
    animation: slideOutUp 1s;
}

.sc_item.active img{
    animation: slideInDown 0.5s;;
}

.sc_item h4{
    animation: slideOutDown 1s;
}

.sc_item.active h4{
    animation: slideInUp 0.5s;;
}

.service_item_box{
    opacity: 0;
    transition: all 0.5s;
    animation: fadeOutUp 1s;
}

.service_item_box.active{
    opacity: 1;
    animation: fadeInDown 0.7s;
}

.service_item.active .sd4{
    transition-delay: 1.5s;
}

.service_item.active .sd5{
    transition-delay: 1.5s;
}
.page {
    padding-top: 9.7rem;
    padding-bottom: 3rem;
}
.portfolio_page{
    padding-top: 12rem;
    padding-bottom: 5rem;
}
.quiz_page{
    padding-top: 7.3rem;
    padding-bottom: 5rem;
}
.page h1{
    font-size: 1.265rem;
    color: #B231FF;
    margin-bottom: 2.4rem;
}
.content h2 {
    font-size: 1rem;
    margin-bottom: 1.3rem;
    color: #53A1FF;
}
.content a{
    color: #B231FF;
}
.content a:hover{
    color: #53A1FF;
}

.quiz_left{
    width: 33.7rem;
    position: relative;
}
.quiz_right {
    width: calc(100% - 33.7rem);
    padding-left: 3.1rem;
    padding-top: 2.4rem;
}
.quiz_question {
    width: 100%;
    padding: 1.4rem;
    background: linear-gradient(180deg, #0F0F3D 0%, rgba(15, 15, 61, 0) 100%);
    height: 20.8rem;
    position: relative;
    z-index: 2;
}
.quiz_question_box{
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #359EB6 0%, rgba(15, 15, 61, 0) 100%, rgba(53, 158, 182, 0) 100%);
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.quiz_question_box h4 {
    margin: 0;
    width: 100%;
    font-size: 1.944rem;
    padding-top: 1rem;
    display: none;
}
.quiz_question_box h4.active{
    display: block;
}
.quiz_bottom_box{
    width: 25.222rem;
    margin: 0 auto;
    margin-top: -1.1rem;
    position: relative;
}
.quiz_form_box{
    display: none;
}
.quiz_anim {
    position: absolute;
    right: 0.7rem;
    bottom: 2.6rem;
    z-index: 6;
    width: 6.944rem;
}
.alert_box{
    font-family: 'MontserratSemiBold', sans-serif;
    font-size: 1rem;
    color: red;
    margin-bottom: 1rem;
}
.alert_box p{
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s;
    animation: fadeOutUp 0.35s;
}
.alert_box.active p{
    opacity: 1;
    animation: fadeInDown 0.35s;
}
.quiz_lables {
    display: none;
}
.quiz_lables.active{
    display: block;
}
.quiz_lables label{
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1.8rem;
    font-family: 'MontserratSemiBold', sans-serif;
    font-size: 1.6rem;
}

.quiz_lables input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 2rem;
    height: 2rem;
    border: 2px solid #47ABDC;
    border-radius: 50%;
    position: relative;
}
.quiz_lables input:after{
    left: 100%;
    top: 100%;
    bottom: 100%;
    right: 100%;
    content: "";
    background-color: #47ABDC;
    position: absolute;
    border-radius: 50%;
    transition: all 0.25s;
}
.quiz_lables input:checked:after{
    left: -1px;
    top: -1px;
    bottom: -1px;
    right: -1px;
}
.quiz_lables span {
    width: calc(100% - 2rem);
    padding-left: 1.7rem;
    transition: all 0.35s;
}
.quiz_lables label:hover span{
    opacity: 0.7;
}
.quiz_btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: all 0.35s;
}
.quiz_btn.active{
    opacity: 0;
    pointer-events: none;
}
.quiz_rel {
    position: relative;
    height: 29rem;
}
.quiz_btn_rel:hover .b_star{
    opacity: 0;
}
.quiz_btn_rel .btn{
    font-size: 1.389rem;
    padding: 0.4rem 2.3rem;
    position: relative;
    z-index: 2;
}
.b_img1 {
    position: absolute;
    left: -1rem;
    bottom: -1rem;
    width: 5.556rem;
    z-index: 3;
    pointer-events: none;
    transition: all 0.35s;
}
.quiz_btn_rel:hover .b_img1{
    opacity: 0;
    left: -2rem;
    bottom: -2rem;
}
.b_img2 {
    position: absolute;
    left: 0.3rem;
    bottom: 2.1rem;
    width: 4.944rem;
    z-index: 1;
    pointer-events: none;
    transition: all 0.35s;
}
.quiz_btn_rel:hover .b_img2{
    opacity: 0;
    left: -1.3rem;
    bottom: 3.1rem;
}
.b_img3 {
    position: absolute;
    left: 4.1rem;
    bottom: 1.5rem;
    width: 3.222rem;
    z-index: 1;
    pointer-events: none;
    transition: all 0.35s;
}
.quiz_btn_rel:hover .b_img3{
    opacity: 0;
    left: 6.1rem;
    bottom: 1.5rem;
}
.b_img4 {
    position: absolute;
    left: 4rem;
    bottom: -1.6rem;
    width: 4.778rem;
    z-index: 1;
    pointer-events: none;
    transition: all 0.35s;
}
.quiz_btn_rel:hover .b_img4{
    opacity: 0;
    left: 5rem;
    bottom: -2.6rem;
}
.b_img5 {
    position: absolute;
    left: 6rem;
    bottom: -1.2rem;
    width: 3.889rem;
    z-index: 3;
    pointer-events: none;
    transition: all 0.35s;
}
.quiz_btn_rel:hover .b_img5{
    opacity: 0;
    left: 7rem;
    bottom: -2.2rem;
}
.b_star {
    position: absolute;
    z-index: 4;
    left: -1.8rem;
    top: -1.4rem;
    width: 13.5rem;
    pointer-events: none;
    transition: all 0.5s;
}
.prev_quiz_box{
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}
.prev_quiz_box.active{
    opacity: 1;
    pointer-events: painted;
}
.quiz_form {
    background: rgba(14, 14, 46, 0.9);
    padding: 1.9rem 1.3rem;
    padding-bottom: 1rem;
    width: 26.9rem;
}
.quiz_group {
    margin-bottom: 1.9rem;
}
.quiz_group input{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    color: white;
    padding: 0.2rem 0;
}
.quiz_group input::placeholder{
    color: rgba(255, 255, 255, 0.5)
}
.quiz_form_btn{
    margin-top: 2rem;
}

.success_quiz{
    background: linear-gradient(180deg, #704EA7 0%, rgba(53, 158, 182, 0) 100%, rgba(112, 78, 167, 0) 100%);
}
.quiz_star {
    position: absolute;
    left: -7.6rem;
    top: -1.8rem;
    z-index: 5;
    pointer-events: none;
    width: 35.778rem;
}

.card_page h1{
    font-size: 3.333rem;
    background: linear-gradient(180deg, #49AFFF 17.01%, #6273FF 33.05%, #8F42FF 44.64%, #CF15FF 59.79%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 3.8rem;
}
.card_page {
    padding-top: 14.8rem;
    padding-bottom: 0.5rem;
}
.card_text {
    font-family: MontserratMedium, sans-serif;
    font-size: 1.556rem;
    width: 28rem;
    line-height: 1.2;
}
.card_icons {
    padding-top: 0.6rem;
    margin-bottom: 2.1rem;
}
.card_icons img{
    margin-right: 1rem;
}
.card_text2 p{
    margin-bottom: 2.7rem;
}
.card_img {
    width: 37.111rem;
    padding-left: 0;
    margin-top: -8.4rem;
    margin-right: -1.1rem;
}
.card_text3 p{
    font-size: 1.333rem;
}
.card_text3 h2{
    font-size: 1.75rem;
    margin-bottom: 0;
}
.card_text3{
    padding-top: 5rem;
}
.card_full_img {
    width: 57.778rem;
    margin: 0 auto;
    margin-top: 3rem;
}

.card_bottom_left {
    border: 0.85rem solid #ffffff;
    width: 32.3rem;
    height: 18.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;
    background: #140E15;
}

.card_bottom_left:after {
    height: 0.5rem;
    bottom: -1.3rem;
    left: -0.85rem;
    right: -0.85rem;
    content: "";
    background-color: #EEC2D2;
    position: absolute;
}

.card_bottom_left h4 {
    margin: 0;
    font-size: 3.333rem;
    margin-top: 1.2rem;
    background: linear-gradient(180deg, #49AFFF 17.01%, #6273FF 33.05%, #8F42FF 44.64%, #CF15FF 59.79%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.card_bottom{
    margin-top: 9.9rem;
    margin-left: -6.5rem;
    /*margin-right: -6.5rem;*/
}
.card_anim {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3.8rem;
    width: 7.333rem;
}
.card_bottom_right {
    width: calc(100% - 32.3rem);
    padding-left: 4.4rem;
    padding-top: 3.4rem;
}
.card_bottom_right h4 {
    font-size: 1.44rem;
    /*font-family: MontserratMedium, sans-serif;*/
    background: linear-gradient(180deg, #4FADFF 10.53%, #726BFF 25.4%, #9247FF 37.26%, #C71EFF 49.12%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.card_bottom_right h4 img {
    width: 3.056rem;
    margin-left: 3.9rem;
    position: relative;
    top: -0.9rem;
}
.card_anim2 {
    width: 9.833rem;
    margin-right: 1.1rem;
}
.alsies_page .card_img {
    width: 36.15rem;
    padding-left: 0;
    margin-top: -2.9rem;
    margin-right: 0.4rem;
}
.alsies_page  .card_full_img {
    width: 68.278rem;
}
.card_text1{
    min-height: 12.2rem;
}
.rafting_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -5.7rem;
    left: -6.9rem;
}
.rafting_page .card_img img{
    width: 43.667rem;
}
.rafting_page .card_full_img {
    width: 52.667rem;
}


.altynalmas_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -8.3rem;
    left: 1.1rem;
}
.altynalmas_page .card_img img {
    width: 43.222rem;
}
.altynalmas_page .card_full_img {
    width: 65.5rem;
}

.alpha_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -5.1rem;
    left: -8.5rem;
}
.alpha_page .card_img img {
    width: 48.833rem;
}
.alpha_page .card_full_img {
    width: 59.278rem;
}


.arasan_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -5.7rem;
    left: -6.9rem;
}
.arasan_page .card_img img{
    width: 43.667rem;
}
.arasan_page .card_full_img {
    width: 61.611rem;
    margin-top: 1rem;
    margin-left: 4.2rem;
}

.McDonald_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -10.2rem;
    left: -17.7rem;
}
.McDonald_page .card_img img {
    width: 58.389rem;
}
.McDonald_page .card_full_img {
    width: 57rem;
    margin-top: -1.3rem;
    margin-left: 1.4rem;
}

.ProsperPay_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -9.1rem;
    left: 13.8rem;
}
.ProsperPay_page .card_img img {
    width: 40.278rem;
}
.ProsperPay_page .card_full_img {
    width: 39.111rem;
    margin-top: 2rem;
    margin-left: 11.4rem;
}

.GreenGo_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -6.9rem;
    left: 3.9rem;
}
.GreenGo_page .card_img img {
    width: 30.778rem;
}
.GreenGo_page .card_full_img {
    width: 60.333rem;
    margin-top: 2rem;
    margin-left: 2.7rem;
}

.Carlsberg_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -11.3rem;
    left: 8.4rem;
}
.Carlsberg_page .card_img img {
    width: 22.056rem;
}
.Carlsberg_page .card_full_img {
    width: 61.5rem;
    margin-top: 2rem;
    margin-left: 2.3rem;
}

.lombard_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -4.3rem;
    left: 11.1rem;
}
.lombard_page .card_img img {
    width: 15.944rem;
}
.lombard_page .card_full_img {
    width: 59.722rem;
    margin-top: 2rem;
    margin-left: 3.3rem;
}

.Sparta_page .card_img {
    margin: 0;
    position: relative;
    margin-top: -6.8rem;
    left: 0.3rem;
}
.Sparta_page .card_img img {
    width: 35.333rem;
}
.Sparta_page .card_full_img {
    width: 56.944rem;
    margin-top: 2rem;
    margin-left: 4.3rem;
}


.mobile_page .card_bottom_left {
    border: none;
    width: 18.7rem;
    height: 19.8rem;
    left: 7.2rem;
    background-image: url("../img/Blue.png");
    background-size: 100% 100%;
    background-color: transparent;
}
.mobile_page .card_bottom_left:after{
    display: none;
}
.mobile_page .card_anim {
    top: -3.3rem;
}
.page{
    overflow: hidden;
}
.mobile_page .card_bottom_left h4 {
    font-size: 1.633rem;
}

.mob_box {

}
.mob_box .box6_form {
    background: rgba(14, 14, 46, 0.9);
    border-radius: 10px;
    position: relative;
    padding: 3.7rem 2.9rem;
    text-align: center;
}
.mob_box .box6_form .form_flex {
    margin-top: 3.6rem;
}
.mob_box .box6_form .form_btn_box {
    margin-top: 3rem;
}
.mob_box .box6_form .form_flex .form-group {
    width: 44%;
}
.mob_box .form_anim {
    position: absolute;
    right: 5.8rem;
    bottom: 2.3rem;
    width: 8.111rem;
}
.mob_box .box6_form .gr_link {
    position: static;
    display: block;
    margin-top: 2.2rem;
}

.close {
    width: 2rem;
    height: 2rem;
    right: 1.3rem;
    top: 1.3rem;
    z-index: 5;
}
.close:before, .close:after {
    width: 1.4rem;
    height: 2px;
    background-color: #fff;
}
.post_slider_class{
    cursor: pointer;
}
.port_top_name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1rem;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.port_top_name span {
    font-size: 0.9rem;
}
.port_top_name .android_icon{
    position: static;
}
.shakeY{
    animation: shakeY 3s infinite;
}
.flash{
    animation: headShake 2s infinite;
}
.swing{
    animation: swing 2s infinite;
}
.index_services{
    margin-top: 2.8rem;
}
.index_service_item {
    margin: 0 3rem;
}
.isi1 a img{
    width: 2.944rem;
}
.isi2 a img{
    width: 3.944rem;

}
.isi3 a img{
    width: 4.556rem;
}
.sm_logo{
    display: block;
    width: 8.056rem;
}
.sm_logo:hover{
    opacity: 0.7;
}

.new_service_img img{
    width: 100%;
}
.v_center {
    position: absolute;
    top: 3.3rem;
    left: 1.7rem;
    width: 19rem;
}
.v1 {
    position: absolute;
    top: 0.7rem;
    left: -1.5rem;
    width: 6.778rem;
    z-index: 1;
}
.v2 {
    position: absolute;
    top: 0;
    left: 3.2rem;
    z-index: 2;
    width: 3.333rem;
}

.v3{
    position: absolute;
    top: -0.2rem;
    left: 7.7rem;
    z-index: 1;
    width: 4.222rem;
}
.v4 {
    position: absolute;
    top: 1.3rem;
    right: -0.4rem;
    z-index: 1;
    width: 13.667rem;
}
.v5 {
    position: absolute;
    top: 0.2rem;
    right: 2rem;
    z-index: 2;
    width: 2rem;
}
.v6 {
    position: absolute;
    top: 4.4rem;
    right: -1.4rem;
    z-index: 2;
    width: 4.444rem;
}
.v7 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 4.556rem;
}
.v8 {
    position: absolute;
    bottom: 1.1rem;
    right: 3.5rem;
    z-index: 1;
    width: 10.222rem;
}
.v9 {
    position: absolute;
    bottom: 0.9rem;
    right: 3.5rem;
    z-index: 3;
    width: 4.444rem;
}
.v10 {
    position: absolute;
    bottom: 0;
    left: 1.1rem;
    z-index: 3;
    width: 5.722rem;
}
.v11 {
    position: absolute;
    bottom: 2.6rem;
    left: 0.8rem;
    z-index: 4;
    width: 3.167rem;
}
.v_circle{
    position: absolute;
    width: 0.444rem;
}
.v12 {
    bottom: 3.6rem;
    left: 8.9rem;
}
.v13 {
    bottom: 2rem;
    left: 14.8rem;
}
.v14 {
    top: 6.8rem;
    right: -0.4rem;
}
.v15 {
    top: 0.1rem;
    right: 7.2rem;
}
.v16 {
    top: 6.8rem;
    left: -0.1rem;
}

.x1 {
    position: absolute;
    top: 2.1rem;
    left: 1.4rem;
    width: 16.556rem;
    z-index: 3;
}
.x_circle{
    position: absolute;
}
.x2 {
    left: 2.4rem;
    bottom: 7.7rem;
    width: 2rem;
}
.x3 {
    left: 1.8rem;
    bottom: 6.7rem;
    width: 1.222rem;
}
.x4 {
    left: 3rem;
    bottom: 6.4rem;
    width: 1.333rem;
}
.x5 {
    right: 2.8rem;
    bottom: 2.1rem;
    width: 1.722rem;
}
.x6 {
    position: absolute;
    left: 2.4rem;
    top: 5.3rem;
    width: 0.778rem;
}
.x7 {
    position: absolute;
    left: 5rem;
    top: 12.5rem;
    width: 0.833rem;
}
.x8 {
    position: absolute;
    right: 1.4rem;
    bottom: 1.5rem;
    width: 0.833rem;
}
.x9 {
    position: absolute;
    left: 4.4rem;
    top: 12rem;
    width: 7px;
}
.x10 {
    position: absolute;
    left: 3.3rem;
    bottom: 0.5rem;
    width: 7px;
}
.x11 {
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 14.5rem;
}
.x12 {
    position: absolute;
    left: 0.3rem;
    top: 1.6rem;
    width: 12.222rem;
}

.x13 {
    position: absolute;
    left: 0.9rem;
    top: 4rem;
    width: 15.944rem;
}
.x14 {
    position: absolute;
    left: 6rem;
    top: 1rem;
    width: 4.556rem;
}
.x15 {
    position: absolute;
    left: 0.5rem;
    top: 2rem;
    width: 15.111rem;
}
.z {
    position: absolute;
    left: -0.6rem;
    top: 2.1rem;
    width: 13.778rem;
    z-index: 1;
}
.z1 {
    position: absolute;
    left: 1.8rem;
    bottom: 6rem;
    width: 5.056rem;
    z-index: 2;
}
.z2 {
    position: absolute;
    right: 1rem;
    bottom: 3.7rem;
    width: 7.111rem;
    z-index: 2;
}
.z3 {
    position: absolute;
    right: -0.4rem;
    top: 1.7rem;
    width: 18.556rem;
}


.new_service_item {
    width: 22rem;
/*    height: 22.2rem;*/
    display: flex!important;
    flex-direction: column;
/*    justify-content: space-between;*/
    margin: 0 auto;
}
.new_service_img {
    height: 17.9rem;
    position: relative;
    transition: all 0.5s linear;
    transition-delay: 0.5s;
    transform-origin: center center;
    margin-bottom: 3rem;
}
.new_services {
    padding-top: 6.2rem;
/*    margin-bottom: 5rem;*/
    padding-bottom: 4rem;
    overflow: hidden;
    width: calc(100% + 6rem);
    position: relative;
    left: -3rem;
}
.nsi1{
    width: 17rem;
}
.nsi3{
    width: 16rem;
}
.new_service_text{
    width: 35rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    transition: all 0.5s;
    opacity: 0;
    top: 2rem;
}
.new_service_text h5{
    font-size: 0.9rem;
}
.new_service_text p{
    font-size: 0.8rem;
}
.new_service_item h4 {
    font-size: 1.38rem;
    margin-bottom: 1rem;
    color: #854DFE;
    
}
.new_services_slider{
    width: 22rem;
    margin: 0 auto;
}
.new_services_slider .slick-list{
    overflow: unset;
    margin: 0 -20px;
}
.new_slide_item{
    margin: 0 20px;
    transition: all 0.5s;
    opacity: 0.5;
}
.new_slide_item.slick-current{
    opacity: 1;
}

.new_slide_item.slick-current .new_service_text{
    opacity: 1;
    top: 0;
}
.nsi2 .new_service_img{
    transform: scale(0.8);
}
.slick-current .nsi2 .new_service_img{
    transform: scale(1);
}
.slick-current .nsi1 .new_service_img, .slick-current .nsi3 .new_service_img{
    transform: scale(1.2);
}
.v2, .v11, .v4, .v3, .v5, .v6, .v9, .v1 {
    transition: 0.35s;
    transition-delay: 0.5s;
}
.slick-current .v2{
    transition-delay: 1s;
    top: -2rem;
}

.slick-current .v11 {
    transition-delay: 1s;
    left: -2.2rem;
}
.slick-current .v4 {
    transition-delay: 1s;
    right: -2.4rem;
}
.slick-current .v3 {
    transition-delay: 1s;
    top: 0.3rem;
    left: 7rem;
}
.slick-current .v5 {
    transition-delay: 1s;
    right: 4rem;
}
.slick-current .v6 {
    transition-delay: 1s;
    right: 0.6rem;
}
.slick-current .v9 {
    transition-delay: 1s;
    bottom: -0.4rem;
    right: 2.5rem
}
.slick-current .v1 {
    transition-delay: 1s;
    top: 1.2rem;
}
.v_circle{

}
.slick-current .v12{
    animation: flickerAnimation 3s infinite;
}
.slick-current .v13{
    animation: flickerAnimation 4s infinite;
}
.slick-current .v14{
    animation: flickerAnimation 5s infinite;
}
.slick-current .v15{
    animation: flickerAnimation 2s infinite;
}
.slick-current .v16{
    animation: flickerAnimation 4s infinite;
}

.slick-current .x11{
    animation: flickerAnimation 3s infinite;
}
.slick-current .x12{
    animation: flickerAnimation 4s infinite;
}
.slick-current .x13{
    animation: flickerAnimation 5s infinite;
}
.slick-current .x14{
    animation: flickerAnimation 2s infinite;
}


.z2, .z1, .x5, .x2, .x3, .x4, .x6, .x8, .x9, .x10{
    transition: 0.35s;
    transition-delay: 0.5s;
}

.slick-current .x9 {
    transition-delay: 1s;
    left: 3.3rem;
    top: 17rem;
}
.slick-current .x10 {
    transition-delay: 1s;
    left: 4.4rem;
    bottom: 5.5rem;
}

.slick-current .x6 {
    transition-delay: 1s;
    left: 14.8rem;
    top: 15.6rem;
}
.slick-current .x8 {
    transition-delay: 1s;
    right: 13.8rem;
    bottom: 11.8rem;
}

.slick-current .z2 {
    transition-delay: 1s;
    right: 7rem;
    bottom: 7.4rem
}
.slick-current .z1 {
    transition-delay: 1s;
    left: 9rem;
    bottom: 1.6rem;
}
.slick-current .z2 img{
    animation: swing 1s infinite;
    animation-delay: 1.5s;
}

.slick-current .x5 {
    transition-delay: 1s;
    right: 1.8rem;
    bottom: 10.1rem;
}

.slick-current .x2 {
    transition-delay: 1s;
    left: 2.4rem;
    bottom: 5.7rem;
}
.slick-current .x3 {
    transition-delay: 1s;
    left: 1.8rem;
    bottom: 7.4rem;
}
.slick-current .x4 {
    transition-delay: 1s;
    left: 3rem;
    bottom: 7.8rem;
}
.slick-current .x3 img{
    -webkit-animation: rotating 1.5s linear infinite;
    -moz-animation: rotating 1.5s linear infinite;
    -ms-animation: rotating 1.5s linear infinite;
    -o-animation: rotating 1.5s linear infinite;
    animation: rotating 1.5s linear infinite;
    animation-delay: 1.5s;
}
.slick-current .x4 img{
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    animation-delay: 1.5s;
}
.slick-current .x5 img{
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    animation-delay: 1.5s;
}
.slick-current .x2 img{
    -webkit-animation: rotating 3s linear infinite;
    -moz-animation: rotating 3s linear infinite;
    -ms-animation: rotating 3s linear infinite;
    -o-animation: rotating 3s linear infinite;
    animation: rotating 3s linear infinite;
    animation-delay: 1.5s;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}