.astroid-offcanvas {width: 320px;} .astroid-offcanvas .dropdown-menus {width: 320px !important;}.st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}.astroid-offcanvas-opened .astroid-wrapper{background:rgb(173, 181, 189);}.st-effect-2.astroid-offcanvas{z-index:0 !important;}.st-effect-2.astroid-offcanvas-open .st-effect-2.astroid-offcanvas{visibility: visible; -webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}.st-effect-2.astroid-offcanvas::after{display:none;}.offcanvasDirRight .st-effect-2.astroid-offcanvas-open .astroid-content{-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}.mobilemenu-slide.astroid-mobilemenu{visibility:visible;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}.mobilemenu-slide.astroid-mobilemenu-open .mobilemenu-slide.astroid-mobilemenu {visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}.mobilemenu-slide.astroid-mobilemenu::after{display:none;}#ac-211539321230222{color:rgb(255, 255, 255);}#ac-211539321230222 a{color:rgb(255, 255, 255);}#ac-211539321230222 a:hover{color:rgb(0, 184, 216);}#ac-1091539321232502{color:rgb(255, 255, 255);}#ac-1091539321232502 a{color:rgb(255, 255, 255);}#ac-1091539321232502 a:hover{color:rgb(0, 184, 216);}#ac-211539321230222{color:rgb(255, 255, 255);}#ac-211539321230222 a{color:rgb(255, 255, 255);}#ac-211539321230222 a:hover{color:rgb(0, 184, 216);}#ac-1091539321232502{color:rgb(255, 255, 255);}#ac-1091539321232502 a{color:rgb(255, 255, 255);}#ac-1091539321232502 a:hover{color:rgb(0, 184, 216);}#ts-551539321230222{background-color:rgb(44, 46, 54);}#hss-1529739480502{background-color:rgb(248, 249, 250);}#ac-761597702108905{background-color:rgb(23, 90, 137);background-image:url(https://vscl.com.sa/images/bg/inspiration-geometry.png);background-repeat:repeat-y;background-size:contain;background-attachment:fixed;background-position:center center;color:rgb(255, 255, 255);}#ac-761597702108905 a{color:rgb(255, 255, 255);}#ac-761597702108905 a:hover{color:rgb(196, 24, 60);}#ac-761597702108905{background-color:rgb(23, 90, 137);background-image:url(https://vscl.com.sa/images/bg/inspiration-geometry.png);background-repeat:repeat-y;background-size:contain;background-attachment:fixed;background-position:center center;color:rgb(255, 255, 255);}#ac-761597702108905 a{color:rgb(255, 255, 255);}#ac-761597702108905 a:hover{color:rgb(196, 24, 60);}#s2ws-1529739392758{background-color:rgb(248, 249, 250);}#s3jl-1529739392463{background-image:url(https://vscl.com.sa/images/bg/bg7.jpg);background-size:cover;background-attachment:fixed;background-position:center center;}#ac-521597702297113{color:rgb(52, 103, 154);}#ac-521597702297113 a{color:rgb(73, 80, 87);}#ac-521597702297113 a:hover{color:rgb(0, 184, 216);}#ac-521597702297113{color:rgb(52, 103, 154);}#ac-521597702297113 a{color:rgb(73, 80, 87);}#ac-521597702297113 a:hover{color:rgb(0, 184, 216);}#s4c-1529739392157{background-image:url(https://vscl.com.sa/images/bg/home.png);background-size:cover;background-attachment:fixed;background-position:center center;}#cs-1528971561366{background-image:url(https://vscl.com.sa/images/bg/645.png);background-size:cover;background-attachment:fixed;background-position:center center;}#bs-1529739293881{background-image:linear-gradient(rgb(255, 255, 255),rgb(159, 201, 235));color:rgb(52, 103, 154);}#bs-1529739293881 a{color:rgb(52, 103, 154);}#bs-1529739293881 a:hover{color:rgb(204, 203, 203);}#fs-1528971627712{background-color:rgb(159, 201, 235);color:rgb(255, 255, 255);}#fs-1528971627712 a{color:rgb(255, 255, 255);}#fs-1528971627712 a:hover{color:rgb(52, 103, 154);}#astroid-preloader{background:rgb(255, 255, 255);height:100%;left:0;position:fixed;top:0;width:100%;z-index:99999}.preloader-image{ background-image:url(https://vscl.com.sa/images/logo/frontlogo.png);background-repeat:no-repeat;background-size:inherit;background-position:center center;height:100%;width:100% }@font-face { font-family: "DIN Next LT Arabic Light"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/DINNextLTArabic-Light.ttf");}body, .body{font-weight:500;text-transform:none;font-size:1em;letter-spacing:0em;line-height:1.7em;font-family:DIN Next LT Arabic Light, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h1, .h1{font-weight:500;text-transform:none;font-size:3.5em;letter-spacing:0em;line-height:1.2em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h2, .h2{color:rgb(52, 103, 154);font-weight:600;text-transform:none;font-size:2em;letter-spacing:0em;line-height:1.2em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h3, .h3{color:rgb(52, 103, 154);font-weight:500;text-transform:none;font-size:1.8em;letter-spacing:0em;line-height:1.2em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h4, .h4{font-weight:500;text-transform:none;font-size:1.4em;letter-spacing:0em;line-height:1.5em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h5, .h5{font-weight:500;text-transform:none;font-size:1.4em;letter-spacing:0em;line-height:1.2em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}h6, .h6{font-weight:200;text-transform:none;font-size:1.333em;letter-spacing:0em;line-height:1.2em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "Dima Hall Fetica Bold"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/ArbFONTS-DimaHallFetica.ttf");}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-weight:700;text-transform:none;font-size:1.461em;letter-spacing:0em;line-height:1.7em;font-family:Dima Hall Fetica Bold, Arial, Helvetica, sans-serif;}@font-face { font-family: "DIN Next LT Arabic Light"; src: url("https://vscl.com.sa/templates/astroid_template_zero/fonts/DINNextLTArabic-Light.ttf");}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-weight:500;text-transform:none;font-size:1.15em;letter-spacing:0em;line-height:2em;font-family:DIN Next LT Arabic Light, Arial, Helvetica, sans-serif;}body{background-color:rgb(255, 255, 255);color:rgb(44, 46, 54);}body a{color:rgb(44, 46, 54);}body a:hover{color:rgb(52, 103, 154);}header{color:rgb(52, 103, 154);}.astroid-header-section, .astroid-sidebar-header{background-color:rgb(255, 255, 255);}.astroid-logo-text .site-title{color:rgb(94, 100, 106);}.astroid-logo-text .site-tagline{color:rgb(44, 46, 54);}#astroid-sticky-header{background-color:rgb(255, 255, 255);}#astroid-sticky-header .astroid-nav .nav-link{color:rgb(44, 46, 54);}#astroid-sticky-header .astroid-nav .nav-link:hover{color:rgb(73, 80, 87);}#astroid-sticky-header .astroid-nav .nav-link:active, #astroid-sticky-header .astroid-nav .nav-link.active{color:rgb(29, 88, 117);}.astroid-nav .nav-link, .astroid-sidebar-menu .nav-link{color:rgb(21, 59, 96);}.astroid-nav .nav-link:hover, .astroid-sidebar-menu .nav-link:hover{color:rgb(159, 201, 235);}.astroid-nav .nav-link:focus, .astroid-sidebar-menu .nav-link:focus{color:rgb(159, 201, 235);}.astroid-nav .nav-link:active, .astroid-nav .nav-link.active, .astroid-sidebar-menu .nav-link:active, .astroid-sidebar-menu .nav-link.active{color:rgb(255, 0, 0);}.megamenu-container{background-color:rgb(255, 255, 255);}.megamenu-container .nav-submenu .nav-submenu{background-color:rgb(255, 255, 255);}.has-megamenu.open .arrow{border-bottom-color:rgb(255, 255, 255);}.megamenu-container li.nav-item-submenu > a{color:rgb(0, 0, 0);}.megamenu-container li.nav-item-submenu > a:hover{color:rgb(255, 255, 255);background-color:rgb(159, 201, 235);}.megamenu-container li.nav-item-submenu > a:active, .megamenu-container li.nav-item-submenu > a.active{color:rgb(255, 255, 255);background-color:rgb(52, 103, 154);}.astroid-offcanvas, .astroid-offcanvas .burger-menu-button, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .dropdown-menus{ background-color: rgb(255, 255, 255) !important;}.astroid-offcanvas { color: rgb(0, 0, 0) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item a, .astroid-offcanvas .menu-indicator{ color: rgb(0, 0, 0) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > a, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active > .nav-header, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a, .astroid-offcanvas .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active > a + .menu-indicator{ color: rgb(159, 201, 235) !important;}.astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.active, .astroid-offcanvas .astroid-mobilemenu-container .astroid-mobilemenu-inner .menu-item.nav-item-active { background-color: rgb(255, 255, 255) !important;}.header-offcanvas-trigger.burger-menu-button .inner, .header-offcanvas-trigger.burger-menu-button .inner::before, .header-offcanvas-trigger.burger-menu-button .inner::after{background-color: rgb(29, 88, 117);}.header-mobilemenu-trigger.burger-menu-button .inner, .header-mobilemenu-trigger.burger-menu-button .inner::before, .header-mobilemenu-trigger.burger-menu-button .inner::after{background-color: rgb(159, 201, 235);}.astroid-contact-info i[class*="fa-"]{color:rgb(255, 255, 255);}/* works steps*/
        .service-box{
            position: relative;
            overflow: hidden;
            margin-bottom:10px;
            perspective:1000px;
            -webkit-perspective:1000px;
        }
        .service-icon{
            width: 100%;
            height: 220px;
            padding: 20px;
            text-align: center;
            transition: all .5s ease;
        }

        .service-content{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            width: 100%;
            height: 220px;
            padding: 20px;
            text-align: center;
            transition: all .5s ease;
            background-color: #474747;
            backface-visibility:hidden;
            transform-style: preserve-3d;
            -webkit-transform: translateY(110px) rotateX(-90deg);
            -moz-transform: translateY(110px) rotateX(-90deg);
            -ms-transform: translateY(110px) rotateX(-90deg);
            -o-transform: translateY(110px) rotateX(-90deg);
            transform: translateY(110px) rotateX(-90deg);
        }
        .service-box .service-icon .front-content{
            position: relative;
            top:80px;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .service-box .service-icon .front-content i {
            font-size: 50px;
            color: #fff;
            font-weight: normal;
        }

        .service-box .service-icon .front-content h3 {
            font-size: 25px;
            color: #fff;
            text-align: center;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .service-box .service-content h3 {
            font-size: 17px;
            font-weight: 700;
            color: #fff;
            margin-bottom:10px;
            text-transform: uppercase;
        }
        .service-box .service-content p {
            font-size: 23px;
            color: #fff;
            margin:0;
        }
        .yellow{background-color: #bbe1fa;}
        .orange{background-color: #a6dcef;}
        .red{background-color: #3282b8;}
        .grey{background-color: #0f4c75;}
        .service-box:hover .service-icon{
            opacity: 0;
            -webkit-transform: translateY(-110px) rotateX(90deg);
            -moz-transform: translateY(-110px) rotateX(90deg);
            -ms-transform: translateY(-110px) rotateX(90deg);
            -o-transform: translateY(-110px) rotateX(90deg);
            transform: translateY(-110px) rotateX(90deg);
        }
        .service-box:hover .service-content {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            -ms-transform: rotateX(0);
            -o-transform: rotateX(0);
            transform: rotateX(0);
        }
        
        /* border div*/
        .bord{
      border-bottom: 4px solid #9fc9eb;
    
}
        
        
        /* font */ 
        .whi{
            color: white;
        }
        /* padding*/
        
        .padservbox{
            padding: 10px 10px 10px 10px;
        }
        
         .padcontactvbox{
            padding: 10px 20px 41px 20px;
        }
        
        .padbuttomsection{
            padding-top: 10px;
        }
        
        /* underline */
        
.linetitle{
     border-bottom: 5px solid red;
     width: 30%;
     padding-bottom: 10px;
}

.mlinetitle{
     border-bottom: 5px solid red;
     width: 50%;
     padding-bottom: 10px;
     font-size: 1.3em;
}

    
        /* text */
  .maps{
   font-size: 1.3em;
  }
        
        
  .pbottom{
   font-size: 1.1em;
   text-align: center;
   text-align: justify;
   text-align-last: center;
}

  .p8{
   font-size: 1.3em;
   text-align: center;
   text-align: justify;
   text-align-last: center;
}

.pcareer{
   color:#fff;
   font-size: 1.8em;
   text-align: right;
   text-align: justify;
   text-align-last: right;
}

.mpcareer{
   color:#fff;
   font-size: 1.4em;
   text-align: right;
   text-align-last: right;
}

  .pbottom1{
   font-size: 1.1em;
   text-align: center;
   text-align-last: center;
}

/* right*/
.pright{
 text-align: right;   
  font-size: 1.1em;
   text-align: justify;
   text-align-last: right;
}

.left{
 text-align: left;   
  font-size: 1.1em;
   text-align: justify;
   text-align-last: left;
}

.pbottom2{  
    list-style-type: none;
    columns: 2;
    padding: 2px 2px 2px 2px;
   font-size: 0.9em;
   text-align: right;
   text-align: justify;
}
        
  .aligntext{
    text-align: center;
    border-bottom: 3px solid #bbe1fa;
     width: 60%;
     padding-bottom: 3px;
}      
        
        /* button*/
.button4 {
        border-radius: 12px;
          font-size: 1.3em;
}

.buttonserv {
        border-radius: 12px;
          font-size: 1.1em;
}
        
        /* floating image */
.avatar {
	overflow: hidden;
	box-shadow: 0 0 0 0 rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;

}
@keyframes float {
	0% {
		box-shadow: 0 0 0 0 rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 0 0 0 rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}


/* services font */

.carouselck_caption_title{
    font-size: 1.1em;
}

.carouselck_caption_desc{
font-size: 0.7em;
}


/* cards */

.cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.card {
  margin: 30px auto;
  width: 300px;
  height: 300px;
  border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: 0.4s;
}

.card .card_image {
  width: inherit;
  height: inherit;
  border-radius: 40px;
}

.card .card_image img {
  width: inherit;
  height: inherit;
  border-radius: 40px;
  object-fit: cover;
}

.card .card_title {
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  font-weight: bold;
  font-size: 23px;
  margin-top: -80px;
  height: 40px;
}

.card:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
    -5px -5px 30px 15px rgba(0,0,0,0.22);
}

.title-white {
  color: white;
}

.title-black {
  color: black;
}

@media all and (max-width: 500px) {
  .card-list {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}


/*
.card {
  margin: 30px auto;
  width: 300px;
  height: 300px;
  border-radius: 40px;
  background-image: url('https://i.redd.it/b3esnz5ra34y.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  transition: 0.4s;
}
*/


/* service title animation */


.stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  position: relative;
  color: #fff;
  font-size: 1.8rem;
  padding-top: 0.65rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.2rem;
}
.slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  transform-origin: center center;
  width: 0.10rem;
  height: 145%;
  background: fff;
  z-index: 4;
  animation: slash 6s ease-in infinite;
}
.slash:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.10rem;
  height: 120%;
  background: #fff;
  z-index: -1;
}
.slash:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2395f3;
}
.sides {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.sides .side {
  position: absolute;
  background: #fff;
}
.sides .side:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(-101%);
  animation: side-top ease 6s infinite;
}
.sides .side:nth-child(2) {
  top: 0;
  right: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(-101%);
  animation: side-right ease 6s infinite;
}
.sides .side:nth-child(3) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(101%);
  animation: side-bottom ease 6s infinite;
}
.sides .side:nth-child(4) {
  top: 0;
  left: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(101%);
  animation: side-left ease 6s infinite;
}
.text {
  position: relative;
}
.text--backing {
  opacity: 0;
}
.text--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.text--left .inner {
  transform: translateX(100%);
  animation: text-left 6s ease-in-out infinite;
}
.text--right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.text--right .inner {
  transform: translateX(-200%);
  animation: text-right 6s ease-in-out infinite;
}
@-moz-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-webkit-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-o-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-moz-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-o-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-moz-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-webkit-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-o-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-moz-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-webkit-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-o-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-moz-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-webkit-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-o-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-moz-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-webkit-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-o-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-moz-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@-webkit-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@-o-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}


.buttons {
    background: rgba(0,0,0,0.70);
    color: white;
    border: none;
    padding: 5px 20px;
    font-size: 20px;
    cursor: pointer;
}@media (max-width: 991.98px) {body, .body{font-size:1em;letter-spacing:0em;line-height:1.7em;}h1, .h1{font-size:3.5em;letter-spacing:0em;line-height:1.2em;}h2, .h2{font-size:2em;letter-spacing:0em;line-height:1.2em;}h3, .h3{font-size:1.8em;letter-spacing:0em;line-height:1.2em;}h4, .h4{font-size:1.6em;letter-spacing:0em;line-height:1.2em;}h5, .h5{font-size:1.4em;letter-spacing:0em;line-height:1.2em;}h6, .h6{font-size:1.2em;letter-spacing:0em;line-height:1.2em;}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-size:1em;letter-spacing:0em;line-height:1.7em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-size:1em;letter-spacing:0em;line-height:2em;}}@media (max-width: 767.98px) {body, .body{font-size:1em;letter-spacing:0em;line-height:1.7em;}h1, .h1{font-size:3.5em;letter-spacing:0em;line-height:1.2em;}h2, .h2{font-size:1.5em;letter-spacing:0em;line-height:1.2em;}h3, .h3{font-size:1.8em;letter-spacing:0em;line-height:1.2em;}h4, .h4{font-size:1.6em;letter-spacing:0em;line-height:1.2em;}h5, .h5{font-size:1.4em;letter-spacing:0em;line-height:1.2em;}h6, .h6{font-size:1.2em;letter-spacing:0em;line-height:1.2em;}.astroid-nav > li > a, .astroid-sidebar-menu > li > a{font-size:1em;letter-spacing:0em;line-height:1.7em;}.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu{font-size:1em;letter-spacing:0em;line-height:2em;}}