/* Add here all your CSS customizations */
p{
text-align:justify;}

.pos-rel {position:relative; }
.pos-abs {position:absolute; top:0; bottom:0; left:0; right:0;}
.main-cin { 
    background-image: url(../img/bgms.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;}

.msin-cii img{height:100%; width:100%;}
#footer {margin-top:0;}
 
.orkng {
    background-image: url(../img/bg3.webp);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
	padding: 100px 0px;
}


.orkng h1{ background-color: rgba(255,255,255,.7); border-radius:35px; position:relative;  width:40%; right:30%; left:30% }

.home-demo item {}

.home-demo img {background-color: rgba(255,255,255,.7);height:100px!important; max-height:100px; width:auto!important; max-width:auto!important; Padding:10px;margin:18px;}




.at-item { 
  animation-name: scale-in-br;
  animation-duration: 3.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: scale-in-br 3.2s ease 0s 1 normal none;
  */ 
}
@keyframes scale-in-br {
  0%{
    transform: scale(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100%{
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}



.at-item1 { 
  animation-name: rotate-center;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: rotate-center 3.2s ease 1s 1 normal none;
  */ 
}
@keyframes rotate-center {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}



.at-item2 { 
  animation-name: rotate-center;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: rotate-center 3.2s ease 1s 1 normal none;
  */ 
}
@keyframes rotate-center {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}

.at-item3 { 
  animation-name: rotate-center;
  animation-duration: 2.3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: rotate-center 3.2s ease 1s 1 normal none;
  */ 
}
@keyframes rotate-center {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}









.at-item4 { 
  animation-name: shutter-in-left;
  animation-duration: 4.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: shutter-in-left 2.2s ease 0s 1 normal none;
  */ 
}
@keyframes shutter-in-left {
  0%{
    transform: rotateY(100deg);
    transform-origin: left;
    opacity: 0;
  }
  100%{
    transform: rotateY(0);
    transform-origin: left;
    opacity: 1;
  }
}




.at-item5 { 
  animation-name: shutter-in-left;
  animation-duration: 2.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: shutter-in-left 2.2s ease 0s 1 normal none;
  */ 
}
@keyframes shutter-in-left {
  0%{
    transform: rotateY(100deg);
    transform-origin: left;
    opacity: 0;
  }
  100%{
    transform: rotateY(0);
    transform-origin: left;
    opacity: 1;
  }
}



.at-item6 { 
  animation-name: shutter-in-bottom;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: shutter-in-bottom 1s ease 0s 1 normal none;
  */ 
}
@keyframes shutter-in-bottom {
  0%{
    transform: rotateX(100deg);
    transform-origin: bottom;
    opacity: 0;
  }
  100%{
    transform: rotateX(0);
    transform-origin: bottom;
    opacity: 1;
  }
}




.at-item7 { 
  animation-name: bounce-in-zoomin;
  animation-duration: .5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: bounce-in-zoomin .5s ease 0s 1 normal none;
  */ 
}
@keyframes bounce-in-zoomin {
  0%{
    transform: scale(7);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  35%{
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55%{
    transform: scale(1.5);
    animation-timing-function: ease-in;
  }
  70%{
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  80%{
    transform: scale(1.24);
    animation-timing-function: ease-in;
  }
  90%{
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  95%{
    transform: scale(1.04);
    animation-timing-function: ease-in;
  }
  100%{
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}


.at-item8 { 
  animation-name: scale-in-hor-right;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.6s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
  animation-fill-mode: none;
  /* shorthand 
  animation: scale-in-hor-right 1s ease 0.6s 2 alternate-reverse none;
  */ 
}
@keyframes scale-in-hor-right {
  0%{
    transform: scaleX(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100%{
    transform: scaleX(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}



.at-item9 { 
  animation-name: scale-in-ver-bottom;
  animation-duration: 2.7s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: scale-in-ver-bottom 3.2s ease 0s 1 normal none;
  */ 
}
@keyframes scale-in-ver-bottom {
  0%{
    transform: scaleY(0);
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100%{
    transform: scaleY(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}

.at-item10 { 
  animation-name: scale-in-ver-bottom;
  animation-duration: 3.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: scale-in-ver-bottom 3.2s ease 0s 1 normal none;
  */ 
}
@keyframes scale-in-ver-bottom {
  0%{
    transform: scaleY(0);
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100%{
    transform: scaleY(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}




.at-item11 {
  animation-name: tilt-in-right-1;
  animation-duration: 7.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  /* shorthand 
  animation: tilt-in-right-1 7.2s ease 0s 1 normal none;
  */ 
}
@keyframes tilt-in-right-1 {
  0%{
    transform:   translateX(300px);
    opacity: 1;
  }
  100%{
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}




.carousel-caption.aa1 {top:25%; right:50px; text-align:right;}
.slah {font-family: 'Anton', sans-serif; color:#fff; font-size:5vw; margin-bottom:10px;}
.slap { color:#fff; text-align:right;font-size:3vw; line-height:4vw;}

.carousel-caption.ab1 {top:22%;   text-align:center;}
.slbh {font-family: 'Anton', sans-serif; color:#fff; font-size:5vw; margin-bottom:10px;}
.slbp {  color:#fff; text-align:center;font-size:3vw; line-height:4vw;}
.slbp.ab1 {  color:#fff;  ;font-size:3vw;; text-align:center; line-height:4vw; margin-bottom:10px;}


.carousel-caption.ac1 {top:25%; left:50px; text-align:left;}
.slch {font-family: 'Anton', sans-serif; color:#fff; font-size:5vw; margin-bottom:10px;}
.slcp { color:#fff; text-align:left;font-size:3vw; line-height:4vw;}

.carousel-caption.ad1 {top:25%; left:50px; text-align:left;}
.sldh {font-family: 'Anton', sans-serif; color:#fff; font-size:10vw; line-height:76px; margin-bottom:10px;}
.sldp { color:#fff; text-align:left;font-size:3vw; line-height:4vw;}



.carousel-caption.sf1 {top:23%; left:50px; text-align:left;}



.slfp { color:#fff; text-align:left;font-size:3vw; line-height:4vw;}

@media (max-width: 679px) { 


.carousel-caption.aa1 {top:23%; right:50px; text-align:right;}
.slah {font-family: 'Anton', sans-serif; color:#fff; font-size:25px; margin-bottom:0;}
.slap { color:#fff; text-align:right;font-size:3vw; line-height:4vw;}



.carousel-caption.ab1 {top:15%;   text-align:center;}
.slbh {font-family: 'Anton', sans-serif; color:#fff; font-size:4vw; margin-bottom:10px;}
.slbp {  color:#fff; text-align:center;font-size:3vw; line-height:4vw;}
.slbp.ab1 {  color:#fff;  ;font-size:3vw;; text-align:center; line-height:4vw; margin-bottom:10px; margin-top:-20px}



.carousel-caption.ac1 {top:20%; left:50px; text-align:left;}
.slch {font-family: 'Anton', sans-serif; color:#fff; font-size:5vw; margin-bottom:10px;}
.slcp { color:#fff; text-align:left;font-size:3vw; line-height:4vw;  margin-top:-20px}

.carousel-caption.ad1 {top:5%; left:50px; text-align:left;}
.sldp { color:#fff; text-align:left;font-size:3vw; line-height:4vw; margin-top:-30px}


.carousel-caption.sf1 {top:5%; left:50px; text-align:left; margin-top:-30px}
.slfp { color:#fff; text-align:left;font-size:3vw; line-height:4vw; margin-top:-30px}
}