/*fonts*/
@font-face {
  font-family: "Plain-Ultralight";
  src:url("fonts/Plain-Ultralight.ttf") format("truetype");
}
@font-face {
  font-family:"Plain-Medium";
  src:url("fonts/Plain-Medium.ttf") format("truetype");
}
@font-face {
  font-family:"Plain-Bold";
  src:url("fonts/Plain-Bold.ttf") format("truetype");
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plain-Ultralight', Arial, sans-serif !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}
p {
  color: #A2AFB4 !important;
}
p a {
  color: #009ee3 !important;
}
p a:hover {
  color: #0b7cc1 !important;
}

/*page*/
body {
  font-family: "Plain-Ultralight" !important;
  font-size: 20px  !important;
  background-color: #191919;
}

/*logo*/
.mediateam-logo {
  margin-top: 8px !important;
}
.mediateam-logo [class*=zpimage-size].zpimage-tablet-fallback-original figure img {
  width: 100% !important;
}
.mediateam-logo figure {
  z-index:50;
}

/*page header*/
.page-header {
  position: relative;
  z-index:50;
  padding-top: 20vh;
}
/*hero-caption*/
.hero-caption {
  position: relative;
  z-index:50;
  animation-duration: 2.5s;
  animation-delay: 1.5s;
}
.hero-caption h6 {
  font-family:"Plain-Medium" !important;
  font-size: 60pt !important;
}

/*mega menu*/
#mega-menu {
  display: none;
  background-color: rgb(0 0 0 / 95%);
  position: fixed;
  z-index: 85;
  top: 0;
	width:100%;
  height: 100vh;
}
.header-board {
  display: flex;
  height: 100vh;
  justify-content: center;
}
#xburgermenu {
  position:relative;
  z-index:90;
  top: 36px;
  left: -16px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background-color: transparent;
}
#menu-nav {
  margin: 10%;
}
#menu-nav ul {
  width: 250px;
}
#menu-nav li {
  display:none;
  list-style: none;
  padding: 12px 0px;
}
#menu-nav a {
  font-size: 17pt;
  font-weight: 600;
  color:#FFFFFF;
  text-decoration: none;
  transition: margin 0.5s ease;
  margin-left: 0px;
}
#menu-nav a:hover {
  margin-left: 8px;
}

/*socials*/
#social-icon {
  margin: 10%;
}
#social-icon li {
  display:none;
  list-style: none;
  padding: 15px 0px;
}
#social-icon a {
  color: #AAAAAA;
  font-size: 20pt;
  transition: color 0.5s ease;
}
#social-icon a:hover {
  color: #FFFFFF;
}

/*hero-section*/
.hero-section {
  height: 100vh;
}
.hero-zpcol {
  height: 100vh;
}
.zpvideo-bg-container video {
  display: block !important;
}
.slide-caption {
  position: absolute;
  bottom: 6em;
}

/*hero banner*/
.hero-banner {
  position: relative;
  height: 100vh;
}
.hero-banner::before {
  background-image: url('images/patterns/heroA.svg');
  background-position: top left;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 10;
  content: "";
  display: block;
  width:100%;
  height: 100vh;
}
.hero-banner::after {
  background-image: url('images/patterns/heroB.svg');
  background-position: bottom right;
  background-repeat: no-repeat;
  position: absolute;
  content: "";
  display: block;
  z-index: 10;
  width: 100%;
  height: 100vh;
  top: 0;
}

/*profile*/
.intro {
  position: relative;
  padding: 30px;
}
.intro:before {
  position: absolute;
  content: '';
  border-top: 4px solid #bd0019;
  border-left: 4px solid #bd0019;
  width: 25%;
  height: 80%;
  top: 0px;
  left: 0px;
}
.intro:after {
  position: absolute;
  content: '';
  border-bottom: 4px solid #2969A8;
  border-right: 4px solid #2969A8;
  width: 25%;
  height: 80%;
  bottom: 0px;
  right: 0px;
}

/*about us*/
.emblem {
  position: relative;
  top:-110px;
  filter: drop-shadow(0px 0px 9px #000);
}
.company img {
  position: relative;
  top:-3px;
}

/*highlights*/
.highlights {
}

/*statistics*/
.projects h2 {
  font-size: 65px;
}
.clientbase h2 {
  font-size: 65px;
}
.experience h2 {
  font-size: 65px;
}

/*relationship*/
.relationship {
  background-size:cover;
}
.aboutsvg {
  background-image: url('/images/patterns/AboutBar.svg');
}

/*directors*/
.photograph img {
  border-radius: 10em;
}
.svgphoto {
  position:absolute;
  width: 100%;
  top: 57px;
  left:-1px;
}
.photocurve {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.circphoto{
  animation: drawcirc 1.5s linear forwards;
  animation-delay:0.5s;
}
@keyframes drawcirc {
  100% {
    stroke-dashoffset: 0;
  }
}

/*video modal box*/
.videoplay {
  position: relative;
  top: -64px;
  width: 65px;
  padding: 7px 0px;
  text-align: center;
  background-color: #ed1c24;
  color: #FFF;
  font-size: 20pt;
  cursor: pointer;
  transition: all 0.4s;
}
.videoplay:hover {
  background-color: #BBBBBB !important;
}
.videoplay:hover .zpicon-common svg {
  fill: #000000 !important;
}
#modalvideo {
  display: none;
  position: fixed;
  z-index: 95;
  top: 10%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  width: 1000px;
  height: 563px;
  padding: 3px;
  background-color: #000000;
  
  background-image: url('images/icons/spinner.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80px 80px;
}
#closevideo {
  position: absolute;
  top: -30px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}

/*virtual reality*/
#xrframeslider {
  width: 800px;
  margin: auto;
  border: 6px solid #494949;
  border-radius: 10px;
}

/*virtual production*/
.media-virtual {
  position: relative;
  padding: 20px 25px 10px 25px;
}
.media-virtual:before {
  position: absolute;
  content: '';
  border-top: 2px solid #bd0019;
  border-left: 2px solid #bd0019;
  width: 10%;
  height: 80%;
  top: 0px;
  left: 0px;
}
.media-virtual:after {
  position: absolute;
  content: '';
  border-bottom: 2px solid #2969A8;
  border-right: 2px solid #2969A8;
  width: 10%;
  height: 80%;
  bottom: 0px;
  right: 0px;
}
#partners-virtual {
  text-align: center;
}
#partners-virtual img {
  display: inline-block;
  width: 150px;
  filter: brightness(0) invert(1);
  margin: 0px 25px;
  border: 1px solid rgba(255,255,255,0);
}
#ICVFX-Adjacent, #XR-Adjacent, #Virtual-Studio-Adjacent {
  display: block;
}
#ICVFX-Stack, #XR-Stack, #Virtual-Studio-Stack {
  display: none;
}
.iconset {
  position: relative;
  padding: 10px 25px 25px 25px !important;
  border-left: 7px solid #414141;
}
.icvfx .iconset {
  height: 315px;
}
.extended-reality .iconset {
  height: 290px;
}
.virtual-studio .iconset {
  height: 345px;
}

/*clientele*/
#clientele {
  position: relative;
  margin-top: 20px;
}
#clientele ul {
}
#clientele li {
  display: inline-block;
}
#clientele img {
  width: 150px;
  margin-right: 80px;
}
#clientele .slick-slide div div {
  height: 156px;
  display: flex !important;
  align-items: center;
}
.spot-light {
  position: absolute;
  z-index:80;
  width:100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0.7) 25%, rgba(255,255,255,0) 50%, rgba(18,18,18,0.7) 75%, rgba(18,18,18,1) 100%);
}
.customers figure {
  margin-bottom: 60px;
}

/*service carousel*/
#servicedesk {
  width: 1110px;
  position: relative;
  margin: auto;
}
#service-carousel{
  position: relative;
}
.slick-track {
}
.slick-slide {
}
.slick-slide img {
  max-inline-size: none !important;
}
.slick-slide a {
  display: block;
  position: relative;
}
.slick-active .glass {
  position: absolute;
  z-index:60;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 150%;
  background-color: rgba(0,0,0,0.7);
}
.slick-center .glass {
  background-color: transparent;
}
.slick-slide label {
  position: absolute;
  display:none;
  z-index:70;
  bottom: 55px;
  background-color: rgba(0,0,0,0.5);
  padding: 2px 30px 8px 30px;
  font-size: 18pt;
  color: #999;
  cursor: pointer;
  text-align:left;
}
.slick-center label {
  display:inline-block;
  color: #FFF;
  font-size: 22pt;
  left: 100px;
  width: auto;
  border-left: 5px solid #ed1c24;
}
.vrlabel {
  width: 310px !important;
}
.slick-center {
  position:relative;
  left: -190px;
  z-index: 80;
  border: 0px solid yellow;
}

#geometric {
}
#svgbatchA {
  position: absolute;
  top: 0px;
  left: 90px;
  border: 0px solid #666;
}
._mx_redA {
  animation: redA 1.8s;
}
@keyframes redA {
  from {
    opacity: 0; 
    transform: translate3d(-60px, 280px, 0px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
._mx_blueA {
  animation: blueA 1.5s;
}
@keyframes blueA {
  from {
    opacity: 0; 
    transform: translate3d(45px, -200px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
#svgbatchB {
  position: absolute;
  top: 0px;
  right: 90px;
  border: 0px solid #666;
}
._mx_redB {
  animation: redB 1.5s;
}
@keyframes redB {
  from {
    opacity: 0;
    transform: translate3d(60px, -280px, 0px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
._mx_blueB {
  animation: blueB 1.5s;
}
@keyframes blueB {
  from {
    opacity: 0;
    transform: translate3d(-45px, 200px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#svgmask {
  height:0px;
}
.slick-center img {
  object-fit: cover;
  clip-path: url(#clipmask);
  border: 0px solid yellow;
}

.slick-dots {
  bottom: -45px !important;
}
.slick-dots li button:before {
  color: white !important;
  opacity: 0.5 !important;
  font-size: 8px !important;
}
.slick-dots li.slick-active button:before {
  color: white !important;
  opacity: 1 !important;
  font-size: 12px !important;
}

/*testimonial*/
.client-photo {
  position: relative;
  left: 70px;
  z-index: 60;
}
.quote {
  position: relative;
  top:-20px;
}

/*partners*/
.partner .zpimage-container {
  background: rgb(255 255 255 / 20%);
  border-radius: 20px;
  margin-bottom: 20px;
  transition: background 0.5s;
}
.partner .zpimage-container:hover {
  background: rgb(255 255 255 / 28%);
}
.partner img {
  transition: transform 0.5s;
}
.partner img:hover  {
  transform: scale(0.95, 0.95);
}
.techlogo .zpimage-container {
  background: rgb(255, 255, 255);
  border-radius: 13px;
  padding: 10px 0px;
  margin-bottom: 20px;
}
.techlogo img {
  transition: transform 0.5s;
}
.techlogo img:hover  {
  transform: scale(0.95, 0.95);
}

/*services*/
.service-card {
  margin-bottom: 80px;
}

/*solutions*/
.zplink-type-horizontal.zplink-iconstyle-03 .zplink-list-container .zplink-list .zplink-text:before {
  color: #ed1c24 !important;
  inset-inline-end: -16px !important;
}
.servicepic {
  position: relative;
}
.servicepic img {
  object-fit: cover;
  clip-path: url(#serviceclip);
}
.svgmask {
  height: 0;
}
#servicebar {
  position: absolute;
  top: 20px;
  left: -50px;
}
.zpapp .zplink-text {
  font-size: 18px !important;
}

/*contact us*/
.head-office {
  position: relative;
  top:-60px;
  z-index: 65;
}

/*location fader*/
.contact-banner {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#venue {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
.location div {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}
#kochi {
  background-image: linear-gradient(to bottom, rgba(30, 34, 45, 0.7), rgba(30, 34, 45, 0.7)), url('images/locations/Kochi.jpg');
  animation: vnAfade 30s linear 0s infinite;
}
@keyframes vnAfade {
  0%, 16% {
    opacity: 1;
  }
  20% {
    opacity:0;
  }
  96% {
    opacity: 0;
  }      
  100% {
    opacity: 1;
  }
}
#chennai {
  background-image: linear-gradient(to bottom, rgba(30, 34, 45, 0.7), rgba(30, 34, 45, 0.7)), url('images/locations/Chennai.jpg');
  animation: vnBfade 30s linear 0s infinite;
}
@keyframes vnBfade {
  0%, 16% {
    opacity: 0;
  }      
  20% {
    opacity:1;
  }
  36% {
    opacity:1;
  }
  40%, 100% {
    opacity:0;
  }
}
#mumbai {
  background-image: linear-gradient(to bottom, rgba(30, 34, 45, 0.7), rgba(30, 34, 45, 0.7)), url('images/locations/Mumbai.jpg');
  animation: vnCfade 30s linear 0s infinite;
}
@keyframes vnCfade {
  0%, 36% {
    opacity: 0;
  }      
  40% {
    opacity:1;
  }
  56% {
    opacity:1;
  }
  60%, 100% {
    opacity:0;
  }
}
#hyderabad {
  background-image: linear-gradient(to bottom, rgba(30, 34, 45, 0.7), rgba(30, 34, 45, 0.7)), url('images/locations/Hyderabad.jpg');
  animation: vnDfade 30s linear 0s infinite;
}
@keyframes vnDfade {
  0%, 56% {
    opacity: 0;
  }      
  60% {
    opacity:1;
  }
  76% {
    opacity:1;
  }
  80%, 100% {
    opacity:0;
  }
}
#trivandrum {
  background-image: linear-gradient(to bottom, rgba(30, 34, 45, 0.7), rgba(30, 34, 45, 0.7)), url('images/locations/Trivandrum.jpg');
  animation: vnEfade 30s linear 0s infinite;
}
@keyframes vnEfade {
  0%, 76% {
    opacity: 0;
  }      
  80% {
    opacity:1;
  }
  96% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

/*google map box*/
.modalgooglemap {
  display: none;
  position: fixed;
  z-index: 95;
  top: 10%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  width: 75%;
  height: 75%;
  padding: 8px;
  background-color: #393939;
  background-image: url('images/icons/spinner.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80px 80px;
}
.modalgooglemap iframe {
  border: 0px;
}
.closemap {
  position: absolute;
  top: -30px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}

/*footer*/
.zpnewsletter-container h2 span {
  font-size: 20px !important;
}
.quick-links a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c1";
  font-size: 14px;
  color: #DDDDDD;
  font-weight: 900;
  opacity: 0;
  transition: all 0.5s;
}
.quick-links .zpelem-button {
  display: table;
}
.quick-links .zpelem-button:hover a:before {
  opacity: 1;
}
.quick-links span {
  margin-left: -10px;
  transition: all 0.7s;
}
.quick-links .zpelem-button:hover span {
  margin-left: 4px;
}
.social-anchor li {
  list-style: none;
  text-align: left;
  display: inline-block;
  margin-left: 20px;
}
.social-anchor img {
  color: #FFFFFF;
  transition: all 0.5s;
  margin: 5px;
}
.social-anchor img:hover {
  transform: scale(1.12, 1.12);
}

/*blog heading*/
.blog-featured figure {
  border-left: 6px solid #bd0019;
  display: inline-block !important;
}
.theme-blog-cover-img-container-inner {
  background-color: #2D2D2D !important;
}
.blog-area {
  padding-block-start: 100px !important;
  padding-block-end: 100px !important;
}
.theme-blog-container-column .theme-blog-container {
  border: 0px !important;
}
.theme-blog-h1 {
  display: none !important;
}
h6.theme-blog-heading {
  height: 135px;
}
.theme-blog-container-column .theme-blog-container .theme-blog-part {
  padding-inline-start: 0px !important;
}
.single-post-category-tag {
  justify-content: flex-start !important;
}
.blog-anchor a {
  font-family: "Plain-Ultralight" !important;
  color: #FFF !important;
  font-size: 23px !important;
  text-align: left;
  padding-block-start: 0px !important;
  padding-block-end: 0px !important;
}
.blog-anchor a:hover {
  background: linear-gradient(45deg, rgb(253 66 74 / 85%) 0%, rgb(0 155 223 / 70%) 100%);
  background-clip: text;
  color: transparent !important;
  background-size: 200% 200%;
  animation: textshade 2s ease infinite;
}
.share-article {
  color: #FFF;
}
.social-list {
  display: inline-block;
}
svg.zpsocial-icon-20px {
  fill: white !important;
}
.zpsocial-share-container.zpsocial-share-align-right .zpsocial-share-item {
    margin-right: 15px !important;
}

/*gradient font*/
.media-font {
  background: linear-gradient(45deg, rgb(253 66 74 / 85%) 0%, rgb(0 155 223 / 70%) 100%);
  background-clip: text;
  color: transparent !important;
  line-height: 1.3 !important;
}

/*gradient caption*/
.media-caption > * {
  display: inline-block;
  cursor: pointer;
  line-height: 1.3 !important;
}
.media-caption > style {
  display: none;
}
.media-caption > *:hover {
  background: #f09433;
  background: linear-gradient(45deg, rgb(253 66 74 / 85%) 0%, rgb(0 155 223 / 70%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  background-size: 200% 200%;
  animation: textshade 2s ease infinite;
}
@keyframes textshade {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*zoho button*/
.zpbutton.zpbutton-type-secondary.zpbutton-outline:hover {
  background: #2D2D2D;
}

/*about button*/
.aboutbtn a {
  color: #a2afb4 !important;
  padding-block-start: 7px !important;
  padding-block-end: 7px !important;
  padding-inline-start: 25px !important;
  padding-inline-end: 25px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.aboutbtn span {
  background: url('images/icons/red-dots.png') no-repeat;
  padding: 6px 0px 6px 30px;
  display: inline-block;
}
.aboutbtn:hover a {
  color: #FFFFFF !important;
}

/*service Button*/
.servicebtn a {
  color: #a2afb4 !important;
  padding-block-start: 6px !important;
  padding-block-end: 6px !important;
  padding-inline-start: 22px !important;
  padding-inline-end: 22px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.servicebtn a:before {
  font-family: "Bootstrap-Icons";
  content: "\F1C8";
  font-size: 28px;
  color: #ed1c24;
  vertical-align: middle;
}
.servicebtn span {
  display: inline-block;
  padding: 7px 0px 0px 10px;
}
.servicebtn:hover a {
  color: #FFFFFF !important;
}

/*virtual Button*/
.virtualbtn a {
  color: #a2afb4 !important;
  padding-block-start: 6px !important;
  padding-block-end: 6px !important;
  padding-inline-start: 22px !important;
  padding-inline-end: 22px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.virtualbtn a:before {
  font-family: "Bootstrap-Icons";
  content: "\F1C0";
  font-size: 28px;
  color: #ed1c24;
  vertical-align: middle;
}
.virtualbtn span {
  display: inline-block;
  padding: 7px 0px 0px 10px;
}
.virtualbtn:hover a {
  color: #FFFFFF !important;
}

/*client Button*/
.clientbtn a {
  color: #a2afb4 !important;
  padding-block-start: 6px !important;
  padding-block-end: 6px !important;
  padding-inline-start: 22px !important;
  padding-inline-end: 22px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.clientbtn a:before {
  font-family: "Bootstrap-Icons";
  content: "\F4D0";
  font-size: 28px;
  color: #ed1c24;
  vertical-align: middle;
}
.clientbtn span {
  display: inline-block;
  padding: 7px 0px 0px 10px;
}
.clientbtn:hover a {
  color: #FFFFFF !important;
}

/*globe Button*/
.globebtn a {
  color: #a2afb4 !important;
  padding-block-start: 6px !important;
  padding-block-end: 6px !important;
  padding-inline-start: 22px !important;
  padding-inline-end: 22px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.globebtn a:before {
  font-family: "Bootstrap-Icons";
  content: "\F3EE";
  font-size: 28px;
  color: #ed1c24;
  vertical-align: middle;
}
.globebtn span {
  display: inline-block;
  padding: 7px 0px 0px 10px;
}
.globebtn:hover a {
  color: #FFFFFF !important;
}

/*connect button*/
.connectbtn a {
  color: #a2afb4 !important;
  padding-block-start: 10px;
  padding-block-end: 10px;
  padding-inline-start: 20px !important;
  padding-inline-end: 20px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.connectbtn span {
  padding-left: 7px;
}
.connectbtn a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a9";
  color: #0b7cc1;
  font-weight: 600;
  transition: all 0.5s;
  position: relative;
  left: 0px;
}
.connectbtn:hover a {
  color: #FFFFFF !important;
}
.connectbtn:hover a:before {
  left: 5px;
}

/*learn button*/
.learnbtn a {
  color: #a2afb4 !important;
  padding-block-start: 8px !important;
  padding-block-end: 5px !important;
  padding-inline-start: 20px !important;
  padding-inline-end: 17px !important;
  border: 1px solid #a2afb4 !important;
  border-radius: 10px;
  transition: all 0.5s;
}
.learnbtn span {
  padding-right: 7px;
}
.learnbtn a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f35a";
  font-size: 22px;
  color: #a2afb4;
  font-weight: 600;
  position: relative;
  left: -2px;
  transition: all 0.5s;
}
.learnbtn:hover a {
  color: #FFFFFF !important;
}
.learnbtn:hover a:after {
  color: #FFFFFF !important;
  left: 2px;
}

/*explore button*/
.explorebtn a {
  font-size: 22px !important;
  color: #a2afb4 !important;
  transition: all 0.5s;
}
.explorebtn span {
  padding-left: 45px;
}
.explorebtn a:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background: url('https://mediateam.zohosites.in/images/icons/arrow.png') no-repeat;
  transition: all 0.5s ease-out;
}
.explorebtn:hover a {
  color: #FFFFFF !important;
}
.explorebtn:hover a:before {
  transform: translate(3px,-3px);
}

/*image turn effect*/
.imgturn {
  overflow: hidden;
}
.imgturn img {
  transition: all 0.8s;
}
.imgturn img:hover {
  transform: scale(1.1, 1.1) rotate(-1deg);
}

/*image xbar effect*/
.imgxbar {
  position: relative;
  overflow: hidden;
}
.imgxbar::before, .imgxbar::after {
  content: "";
  display: block;
  width: 50px;
  height: 0%;
  position: absolute;
  z-index: 50;
  opacity: 0.8;
}
.imgxbar::before {
  background-color: #ed1c24;
  transition: all 0.8s;
  left: 5px;
}
.imgxbar::after {
  background-color: #247acc;
  transition: all 0.5s;
  left: 60px;
  bottom: 0;
}
.imgxbar:hover::before,
.imgxbar:hover::after {
  height: 90%;
}
.imgxbar figure {
  display: block !important;
}
.imgxbar img {
  position: relative;
  left: -15%;
  cursor:pointer;
  transition: all 0.8s;
}
.imgxbar:hover img {
  filter: grayscale(80%);
}

/*webpage-loader*/
#screenloader {
  position:fixed;
  z-index: 105;
  top:0;
  left:0;
  width:100%;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.95);
}
.wave {
  width: 8px;
  height: 150px;
  background: linear-gradient(45deg, rgba(13,85,132,1) 0%, rgba(237,28,36,1) 100%);
  margin: 10px;
  animation: wave 1.5s linear infinite;
  border-radius: 20px;
}
.wave:nth-child(2) {
  animation-delay: 0.1s;
}
.wave:nth-child(3) {
  animation-delay: 0.2s;
}
.wave:nth-child(4) {
  animation-delay: 0.3s;
}
.wave:nth-child(5) {
  animation-delay: 0.4s;
}
.wave:nth-child(6) {
  animation-delay: 0.5s;
}
.wave:nth-child(7) {
  animation-delay: 0.6s;
}
.wave:nth-child(8) {
  animation-delay: 0.7s;
}
.wave:nth-child(9) {
  animation-delay: 0.8s;
}
.wave:nth-child(10) {
  animation-delay: 0.9s;
}
.wave:nth-child(11) {
  animation-delay: 1.0s;
}
.wave:nth-child(12) {
  animation-delay: 1.1s;
}
.wave:nth-child(13) {
  animation-delay: 1.2s;
}
.wave:nth-child(14) {
  animation-delay: 1.3s;
}
.wave:nth-child(15) {
  animation-delay: 1.4s;
}

@keyframes wave {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


/*miscellaneous*/
.centered {
  text-align: center !important;
}
.justified,
.justified h3, .justified h4, .justified h5 {
  text-align: justify !important;
}
.darktext,
.darktext h3 {
  color: #282828 !important;
}
.greypng img {
  filter: saturate(500%) contrast(800%) brightness(500%) invert(80%) sepia(50%) hue-rotate(120deg);
}
.topzlayer {
  position: relative;
  z-index: 80;
}

#screenglass {
  display: none;
  position:fixed;
  z-index: 90;
  top:0;
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);
}


/* -------------------- ANIMATION EFFECTS ----------------- */

._fx {
  animation-duration: 1.5s;
  animation-fill-mode: both;
}
._dur-500ms {
  animation-duration: 500ms;
}
._dur-800ms {
  animation-duration: 800ms;
}
._dur-1s {
  animation-duration: 1s;
}
._dur-15h {
  animation-duration: 1.5s;
}
._dur-2s {
  animation-duration: 2s;
}
._dur-25h {
  animation-duration: 2.5s;
}
._dur-3s {
  animation-duration: 3s;
}
._dur-4s {
  animation-duration: 4s;
}
._dur-5s {
  animation-duration: 5s;
}
_infinite {
  animation-iteration-count: infinite;
}
._delay-300ms {
  animation-delay: 300ms;
}
._delay-500ms {
  animation-delay: 500ms;
}
._delay-800ms {
  animation-delay: 800ms;
}
._delay-1s {
  animation-delay: 1s;
}
._delay-15h {
  animation-delay: 1.5s;
}
._delay-2s {
  animation-delay: 2s;
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.fadeSlow {
  animation-name: fadeSlow;
  animation-duration: 3s;
}
@keyframes fadeSlow {
  to {
    opacity: 1;
  }
}
.fadeSemi {
  animation-name: fadeSemi;
}
@keyframes fadeSemi {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.sliteUp {
  animation-name: sliteUp;
}
@keyframes sliteUp {
  from { 
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sliteDown {
  animation-name: sliteDown;
}
@keyframes sliteDown {
  from { 
    transform: translateY(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sliteLeft {
  animation-name: sliteLeft;
}
@keyframes sliteLeft {
  from { 
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.sliteRight {
  animation-name: sliteRight;
}
@keyframes sliteRight {
  from { 
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.focusIn {
  animation-name: focusIn;
}
@keyframes focusIn {
  from {
    transform: scale(1.3);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* ------------------- RESPONSIVE MEDIA ----------------------------- */


@media only screen and ( max-width: 1400px )
{
}

@media only screen and ( max-width: 1200px )
{
  .blank-col.zpcol-md-1 {
    width: 4%;
  }
  .hero-caption h6,
  .hero-caption h6 span {
    font-size: 50pt !important;
  }
  .hero-banner::before {
    left: -100px;
  }
  #servicedesk {
    width: 960px;
  }
  #svgbatchA {
    left: 15px;
  }
  #svgbatchB {
    right: 15px;
  }
  .slick-center {
    left: -215px;
  }
  #modalvideo {
    width: 96%;
  }
  #modalvideo iframe {
    width: 100%;
  }
  .icvfx .iconset {
    height: 370px;
  }
  .extended-reality .iconset {
    height: 370px;
  }
  .virtual-studio .iconset {
    height: 370px;
  }
}

@media only screen and ( max-width: 991px )
{
  .hero-banner::before {
    left: -225px;
  }
  #xburgermenu {
    left:0;
  }
  .menu-column {
    display: inline-block;
    width: 16%;
  }
  .logo-column {
    display: inline-block;
    width: 84%;
  }
  .slide-caption {
    margin-inline-start: 20px !important;
    top: 18em !important;
  }
  .slide-caption span {
    font-size: 50px !important;
  }
  #xrframeslider {
    width: 100%;
  }
  #servicedesk {
    width: 95%;
  }
  .slick-center {
    left: 0;
  }
  #geometric, #svgmask {
    display: none !important;
  }
  #servicebar, .svgmask {
    display: none !important;
  }
  .testimonial {
    padding-inline-start: 35px !important;
    padding-inline-end: 35px !important;
  }
  .client-photo {
    left: 0;
    top: 25px;
  }
  .customership {
    background-image: url('/images/patterns/about-customer-lite.jpg') !important;
  }
  .imgxbar .zpimage-container figure {
    overflow: visible;
  }
  .partners .zpelem-col {
    width: 280px;
  }
  #ICVFX-Adjacent, #XR-Adjacent, #Virtual-Studio-Adjacent {
    display: none;
  }
  #ICVFX-Stack, #XR-Stack, #Virtual-Studio-Stack {
    display: block;
  }
  .icvfx .iconset {
    height: auto;
  }
  .extended-reality .iconset {
    height: auto;
  }
  .virtual-studio .iconset {
    height: auto;
  }
}

@media only screen and ( max-width: 768px)
{
  .hero-caption h6,
  .hero-caption h6 span {
    font-size: 45pt !important;
  }
  .imgxbar img {
    left: 0;
  }
  #servicebar, #serviceclip {
    display: none;
  }
  .under-construction {
    background: none !important;
  }
}

@media only screen and ( max-width: 576px)
{
  .hero-banner::before {
    display:none;
  }
  .hero-caption h6,
  .hero-caption h6 span {
    font-size: 40pt !important;
  }
  .header-board {
    margin-top: 140px;
  }
  #menu-nav, #social-icon {
    margin: 0;
  }
  body {
    font-size: 19px  !important;
  }
  h1, h1 span {
    font-size: 45px !important;
  }
  h2, h2 span {
    font-size: 35px !important;
  }
  h3, h3 span {
    font-size: 30px !important;
  }  
  h4, h4 span {
    font-size: 25px !important;
  }
  .slick-center label {
    left: 60px;
  }
  .modalgooglemap {
    width: 90%;
  }
  .quote {
    visibility: hidden;
  }
}

@media only screen and (max-width: 420px)
{
  .hero-caption h6,
  .hero-caption h6 span {
    font-size: 30pt !important;
  }
  .vrlabel {
    width: 280px !important;
  }
  .slick-center label {
    left: 30px;
    font-size: 20pt;
  }
}