/*

@Author: Themezinho
@URL: http://www.themezinho.net

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


	// Table of contents //

		01. GOOGLE FONTS
		02. BODY
		03. HTML TAGS
		04. CUSTOM TAGS
		05. SECTIONS
		06. CONTENT
		07. ODOMETER
		08. EQUALIZER
		09. REVEAL EFFECT
		10. PAGE TRANSITION
		11. PRELOADER
		12. PAGE LOADED
		13. TEXT ROTATER
		14. PERSPECTIVE 
		15. SOCIAL BAR
		16. HEADER
		17. DROPDOWN
		18. SLIDER
		19. SLIDER FRACTION
		20. SLIDER BUTTONS
		21. SLIDER CONTENT
		22. SLIDER LINKS
		23. INT HERO
		24. ABOUT STUDIO
		25. WORKS
		26. WORKS FILTER
		27. WORKS FIGURE
		28. ICON FEATURES
		29. TEAM MEMBERS
		30. CLIENTS
		31. SIDE IMAGE CONTENT
		32. AWARDS
		33. JOURNAL
		34. CONTACT
		35. FOOTER
		36. SCROLL DOWN
		37. RESPONSIVE TABLET FIXES
		38. RESPONSIVE MOBILE FIXES
		39. RESPONSIVE MEDIUM FIXES


*/
/* GOOGLE FONTS */
/*@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Poppins:300,400,600,800&display=swap");*/

@font-face {
  font-family: 'Gamer';
  src: url('../fonts/Gamer.ttf') format('truetype');
}

@font-face {
  font-family: 'Game Time';
  src: url('../fonts/Game_Time.ttf') format('truetype');
}

@font-face {
  font-family: 'Double Feature20';
  src: url('../fonts/DoubleFeature20.ttf') format('truetype');
}

/* BODY */
* {
  outline: none !important;
}

model-viewer.asset-view {
  margin: 0 auto;
  position: relative;
  border-radius: 5px;
  background: #282828;
  margin:4px;  
  /*border:1px solid white;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(176, 176, 176) 100%);
  */
  }

model-viewer.asset-view:hover {
	box-shadow: 0px 0px 5px #FFF;
-webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;}

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  background: #1d1e22;
}

/* HTML ELEMENTS */
img {
  max-width: 100%;
}

img.icon {            
	min-width: 10px;
	max-width: 60px;
	width: 38px;
	height: auto; /* Maintain aspect ratio */
}

.fl-icon {
  width: 16px;
  height: 16px;
  background-image: url('../images/icons/freelancer-icon-white.png');
  background-size: 16px 11px;
  background-repeat: no-repeat;
  background-position: 0px 6px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.fl-icon a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /* Ensure the link is positioned correctly */
}

.fl-icon a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/icons/freelancer-icon-pink.png');
  background-size: 16px 11px;
  background-repeat: no-repeat;
  background-position: 0px 6px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.fl-icon a:hover::after {
  opacity: 1;
}

.cara-icon {
  background-image: url('../images/icons/cara-black.png');
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center center;
}

.cara-icon a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; /* Ensure the link is positioned correctly */
}

.cara-icon a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/icons/cara-white.png');
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.cara-icon a:hover::after {
  opacity: 1;
}


/* LINKS */
a {
  color: #222327;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
a:hover {
  text-decoration: underline;
  color: #222327;
}

#nav-hover-image {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

#nav-hover-image img {
  /*max-width: 200px;
  max-height: 200px;*/
  max-width: 100px;
  max-height: 100px;
}

select#audioSelect {font-size: 67%;}

/* CUSTOM CLASSES */
.accordion {margin:35px 0 20px 0;}

.overflow {
  overflow: hidden;
}

.productionComplexity {text-align: center;color:#FFF}
#accordionGameTiers .fa-circle-plus {color: #FF9699;margin-right: 13px;}
.card {border:1px solid rgb(185, 185, 185);}
.card-body ul {/*margin-left: -5%;*/padding-left: 0;}
.card-body ul li:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}

.card-body ul li {list-style-type:none;border-bottom: 1px dotted #000;margin: 13px 25px;padding-bottom: 12px;}
.card-body ul li span {font-weight: bold;}

.centered {text-align:center}

.costs-reqs-resonate {width: 65px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  rotate: -136deg;
  position: relative;
  top: 22px;
  left: 8px;  
}

.btn-get-estimate {background: #000;
  border-radius: 7px;
  box-shadow: 0px 0px 6px #FFF;
  display: inline;
padding: 13px 16px 11px 17px;}

.btn-get-estimate:hover {box-shadow: 0px 0px 6px #d6369c;background: #FFF;}

.accordion > .card .card-header h2 button {font-family:'Fjalla One','Poppins';font-size:1.2rem;color:#FFF}

.accordion > .card .card-header img {max-width: 15px;
  margin-left: 6px;
  position: relative;
  top: -3px;
  left: 5px;}

.btn-hero-gallery {}
.btn-hero-gallery:hover{text-decoration:none}
.benefits-hero {text-align: center;padding: 0;margin: 17px 0;display: table;}
.benefits-hero li {
  display: inline-block;
  text-align: center;
  padding: 4px 8px 4px 0;
  border-radius: 6px;
  margin: 2px 2px;
  margin: 0 auto;
  color: #ffba00;
  background: #000;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0px 0px 6px #f8ce12;
  align-self: center;  
  margin: 6px 0;
}
.benefits-hero li i {margin:0 10px}
.benefits-hero li span.benefits {color: #e2e2e2;font-weight: 900;text-transform: uppercase;}
.expandToMillions {color:#FFF;padding: 40px 20px;width: 100vw;}
.expandToMillions h3 {font-weight:600}
.expandToMillions .statsYear {font-weight: 900;  color:yellow;font-size: 3rem;}
.statsYear, .refLink {text-align:center}
.home-title {color: #FFF;  text-align: center;  font-size: 1rem;  margin-bottom: 1rem;}

.introStatsHead  {background:#00000087;}
.introStatsHead > h4 {font-weight:100}  
.introStatsHead > h4 > span {font-weight:100}  

.did-you-know {margin-top: 2rem; color:#FFF;}

.did-you-know-ul {text-align: left;  margin-top: 1rem;  list-style-type: none;  padding-left: 0;}	
.did-you-know-ul li i {
	padding:5px 5px;
	width: 35px;
  text-align: right;}
  
.gradient-purple {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(139, 32, 117) 100%);}

.gradient-yellow {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(255, 239, 174) 100%);}

.gradient-green {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(188, 249, 153) 100%);}

.gradient-blue {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(164, 221, 255) 100%);}

.gradient-gray {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(255, 255, 255) 0%, rgb(151, 147, 147) 100%);}

.gradient-gray-Header{background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(151, 147, 147) 100%);}

.gradient-cyan {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(2, 129, 168) 100%);}

.gradient-gold {background: rgb(61,61,61);
background: linear-gradient(148deg, rgb(0, 0, 0) 0%, rgb(96, 62, 18) 100%);}

figure {
}

/* Star Rating */
.star-rating li {
	padding: 5px 0 10px 0;
}
.star-rating i {
	font-size: 19px;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	  background-clip: border-box, border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: -1px -1px 0px #ffcb00;
}


/* Loading Heart Pulse */
.pulse {
   width: 40px;
   height: 40px;
   color: #dc0202;
   background: radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
         radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
         linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
         linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
   background-size: 50% 50%;
   background-repeat: no-repeat;
   position: relative;
   left: 6.5rem;
   top: -3rem;
   margin: 0 auto;
}

.pulse:after {
   content: "";
   position: absolute;
   inset: 0;
   background: inherit;
   opacity: 1;
   animation: pl3 0.8s infinite;
}

@keyframes pl3 {
   to {
      transform: scale(1.8);
      opacity: 0;
   }
}

	.loadingDiv {
		margin:1em auto;		
	}
	.loadingDiv span {
		font-size:3em;
		color:#0bafdf;
		/*background:#262B37;*/
		display:table-cell;
		/*box-shadow:inset 0 0 5px rgba(0,0,0,0.3), 0 5px 0 #ccc;*/
		padding: 0 12px;
		line-height: 67px;
		animation:jumb 2s infinite;
		font-family: 'Gamer', verdana;
		/*text-transform: uppercase;*/
	}
	@keyframes jumb {
		0% {
			transform:translateY(0px)
		}
		50% {
			transform:translateY(-30px);
			box-shadow:0 15px 0 rgb(250, 250, 250);
		}
		100% {
			transform:translateY(0px)	
		}
	}
	.loadingDiv span:nth-child(1) {
		animation-delay:0s;
	}
	.loadingDiv span:nth-child(2) {
		animation-delay:.1s;	
	}
	.loadingDiv span:nth-child(3) {
		animation-delay:.2s;
	}
	.loadingDiv span:nth-child(4) {
		animation-delay:.3s;	
	}
	.loadingDiv span:nth-child(5) {
		animation-delay:.4s;
	}
	.loadingDiv span:nth-child(6) {
		animation-delay:.5s;	
	}
	.loadingDiv span:nth-child(7) {
		animation-delay:.6s;
	}

.studio-steps {background:#fff;}	
	
.refLink a {color:yellow}	

/* Scrolldown Arrow Pulse */
        .scroll-arrow {
			position: inherit;
			width: 30px;
			height: 30px;
			border-left: 5px solid #94d0e6;
			border-bottom: 5px solid #fd57bf;
			transform: rotate(-45deg);
			animation: pulse-arrow 1s infinite;
			margin: 0 auto;
			z-index: 9;
			top: -15vh;
        }
        @keyframes pulse-arrow {
            0% {
                transform: scale(1) rotate(-45deg);
            }
            50% {
                transform: scale(1.2) rotate(-45deg);
            }
            100% {
                transform: scale(1) rotate(-45deg);
            }
        }

	
/* Calculator */
.openCalcBtn {background: #FFF;
  padding: 10px 43px;
  opacity: 0.9;
  box-shadow: 0px 1px 8px #000;}
.openCalcBtn:hover {box-shadow: 0px 0px 4px #00DBFF;}
.calcBtnWrapper {border-radius: 5px;background: rgb(202,0,150);background: linear-gradient(180deg, rgb(121, 151, 222) 0%, rgb(128, 84, 171) 100%);bottom: -7px;  position: relative;  text-align: center;  display: table;  margin: 0 auto;}
.calcBtnWrapper .btn-explore-costs-bottom {color: #fff;
  padding: 1rem 2rem;
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: 0px 0px 20px #000;
  text-shadow: 0px 1px 3px #000;}
.calcBtnWrapper .btn-explore-costs-bottom:hover {
  box-shadow: 0px 0px 20px #00DBFF;
  border-radius: 5px;
}
  
.calcBtnWrapper .btn-explore-costs-bottom a {cursor: pointer;padding:2rem;display: contents;}  
.calc-description {margin: 0 auto;display: table;background: #000000a8;border-radius: 10px; padding: 0 10px;}

.flag {
  width: 16px;
  height: 11px;
  display: inline-block;
  margin-left: 7px;}

.we-got-you-parent {
  background: url('../images/games_footer.jpg');
  background-position: center -3.3rem;
  background-size: 100%;
  min-height: 178px;
  margin:9px 0;
  box-shadow: 0px 0px 10px #00dbff;
  }

.we-got-you-text {background: #0000008a;
  padding: 0 20px;
  width: max-content;
  margin: 0 auto;}

.wizard-img {
  /*float: right;
  left: 2.5rem;*/
  position: relative;
  max-width: 24vw;
}
 

#typeElement {
  color: #8bf5d7;
  /*line-height: 34px;*/
  font-weight: 300;
  font-size: 3rem;
  display: initial;
  line-height: 55px;
  padding: 20px 10px;
  }
  
#typeElement span {
	font-weight:900;
	text-decoration:none;
	background: linear-gradient(270deg, #f7ff00, #ff00ef, #00b6fd);
	background-size: 600% 600%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: GradientAnimateText 10s ease infinite;
	-moz-animation: GradientAnimateText 10s ease infinite;
	animation: GradientAnimateText 10s ease infinite;
}

#typeElement icon {-webkit-text-fill-color: black;}
#typeElement a {font-size:inherit;}
#typeElement a:hover {text-decoration:none}

 .gradient-bottom-1  {border-bottom: 3px solid;
  border-image: linear-gradient(to right, #00c7ff, #ff00cb, black, #7e0606) 1;}
 
 .gradient-bottom-1-reverse  {border-bottom: 3px solid;
  border-image: linear-gradient(to left, #ff36cd, #49eeff, #ffed57, #fff) 1;}


.mission-box {
  text-shadow: 1px 2px 1px #FFF;
  color: #000;
  font-size: 1.7rem;
  line-height: 35px;
  background: #CCC;
  padding: 30px;
  }
.mission-box h3 {color: #a249aa;font-weight:900}  
.mission-box {} 

.mission-box .mission {margin-bottom: 2rem;}

.lightText {
	font-family: "Poppins";
}

.workflow-li {position: relative;   margin: 0 auto;  display: flex; margin: 10px 0 10px 0;}
.workflow-li small {position: absolute;
  opacity: 0.6;
  left: 63px;
  top: 0px;
  background: #FFF;
  padding: 3px;
  font-size: 40px;
  font-weight: 800;}

span.optionalWorks {color: #333;
  font-size: 14px;}
  
/* SECTIONS */
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  background: #1d1e22;
}

section {
  position: relative;
}

aside {
  position: relative;
}

/* FORM ELEMENTS */
input[type=text] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=email] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=search] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=password] {
  max-width: 100%;
  height: 58px;
  border: 1px solid #eee;
  padding: 0 20px;
}

input[type=submit] {
  height: 58px;
  border: none;
  background: #222327;
  color: #fff;
  padding: 0 30px;
  font-weight: 600;
  font-size: 14px;
}

button[type=submit] {
  height: 58px;
  border: none;
  background: #222327;
  color: #fff;
  padding: 0 30px;
  font-weight: 600;
  font-size: 14px;
}

textarea {
  max-width: 100%;
  height: 140px;
  border: 1px solid #eee;
  padding: 20px;
}

/* EQUALIZER */
.equalizer {
  width: 26px;
  height: 30px;
  /*cursor: pointer;*/
  position: relative;
}

.equalizer span {
  background: #fff;
  width: 2px;
  height: 0px;
  bottom: 0;
  left: 0%;
  display: block;
  position: absolute;
  transition: height 0.2s linear;
}

.equalizer span:nth-child(1) {
  margin-left: 8px;
}

.equalizer span:nth-child(2) {
  margin-left: 16px;
}

.equalizer span:nth-child(4) {
  margin-left: 24px;
}

.equalizer.paused span {
  height: 3px !important;
}

a#audioControl {text-decoration:none;margin-bottom:10px;}

/* SPLITTING */
.splitting .word, .splitting .char {
  display: inline-block;
}

.splitting .char {
  position: relative;
}

.animated .char {
  display: inline-block;
  animation: texteffect 0.6s cubic-bezier(0.5, 0, 0.5, 1) both;
  animation-delay: calc(10ms * var(--char-index));
}

/* ODOMETER */
.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  text-indent: -5px;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {
  text-indent: 0;
}

/* PAGINATION */
.pagination {
  width: 100%;
  float: left;
  margin: 50px 0;
}
.pagination .page-item {
  display: inline-block;
  margin-right: 10px;
}
.pagination .page-item .page-link {
  font-weight: 600;
  border-radius: 0 !important;
  font-size: 13px;
  color: #222327;
  line-height: 1;
  padding: 15px 30px;
}

/* REVEAL EFFECT */
.reveal-effect {
  float: left;
  position: relative;
}

.reveal-effect > * {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  position: relative;
}

.reveal-effect > * {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.reveal-effect {
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.reveal-effect {
  -webkit-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal-effect.animated {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.reveal-effect.animated * {
  -webkit-animation-name: show-img-1;
  animation-name: show-img-1;
}

.reveal-effect:after {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.reveal-effect:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.reveal-effect:after {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0.05, 0);
  transform: scale(0.05, 0);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.reveal-effect.masker:after {
  background-color: #CCC; /*#525252; /*#161619;*/
}

.reveal-effect.animated:after {
  -webkit-animation-name: slide-bg-2;
  animation-name: slide-bg-2;
}

/* SWIPER PAGINATION */
.swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  transform: scale(0.4);
  background: #fff;
  opacity: 1;
  border-radius: 50%;
}

.swiper-pagination {
  bottom: 32px;
  left: 0;
  margin: 0 auto;
  position: initial;
  /*position: relative*/;
	}

.swiper-pagination .swiper-pagination-bullet:hover {
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-transform: scale(1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  background: none;
}

.swiper-pagination .swiper-pagination-bullet-active {
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, transform 0.3s ease;
  -webkit-transform: scale(1);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  background: none;
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  background: #a61c78; /*#c760a5;*/
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  overflow: hidden;
  transition-delay: 0.6s;
}
.preloader * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #1c1c1c;
  transition-delay: 0.3s;
}
.preloader .inner {
  /*display: inline-block;*/
  text-align: center;
  position: relative;
  z-index: 2;  
  display: flex;
  /*align-items: center;
  /*max-width: 50%;*/
  margin: 0 auto;
}
.preloader .inner span {
  /*text-transform: uppercase;*/
  font-weight: 800;
  text-align: -moz-center;
  text-align: -webkit-center;
  
}
.preloader .inner figure {
  display: block;
  margin-bottom: 20px;
  transition-delay: 0.1s;
}
.preloader .inner figure img {
  height: 40px;
  transform: translateX(-7px);
}

/* PAGE LOADED REMOVE PRELOADER */
.page-loaded .preloader {
  left: -100%;
}

.page-loaded .preloader .inner figure {
  opacity: 0;
  transform: scale(1.5);
}

.page-loaded .preloader .inner span {
  transform: translateY(20px);
  opacity: 0;
}

.page-loaded .preloader .layer {
  left: -100%;
}

.page-loaded .left-side {
  left: 0;
  opacity: 1;
  background: #00000085;
}

.page-loaded .slider {
  filter: blur(0);
  transform: scale(1);
}

.page-loaded .page-header {
  filter: blur(0);
  transform: scale(1);
}

.page-loaded .all-cases-link {
	right: 2vw;
}

/* PAGE TRANSTION */
.page-transition {
  width: 100%;
  height: 100%;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 13;
  opacity: 0;
  visibility: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  /*background: #c760a5;*/
  background: #a61c78;
}
.page-transition .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #1c1c1c;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.page-transition.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.page-transition.active .layer {
  width: 100%;
}

/* SITE NAVIGATION */
.site-navigation {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  background: #a61c78;
  padding-left: 120px;
}
.site-navigation .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #474747;
  background: linear-gradient(-191deg, rgb(121, 45, 92) 0%, rgb(0, 0, 0) 100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.site-navigation .inner {
  position: relative;
  z-index: 2;
  padding-left: 100px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0.7s;
  opacity: 0;
}
.site-navigation .inner ul {
  margin: 0;
  padding: 0;
  animation-duration: 1s;
}
.site-navigation .inner ul li {
  display: block;
  margin: 5px 0;
  padding: 5px 0;
}
.site-navigation .inner ul li ul {
  margin-top: 0;
  margin-bottom: 10px;
  display: none;
}
.site-navigation .inner ul li ul li {
  display: block;
  margin: 0;
}
.site-navigation .inner ul li ul li a {
  font-size: 26px;
}
.site-navigation .inner ul li i {
  margin-left: 20px;
  font-size: 30px;
  color: #fff;
  display: inline-block;
  line-height: 1;
  transform: translateY(-5px);
  cursor: pointer;
}
.site-navigation .inner ul li small {
  width: 100%;
  display: block;
  color: #fff;
  opacity: 0.7;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  transform: translateY(-15px);
}
.site-navigation .inner ul li a {
  font-size: 43px;
  display: inline-block;
  font-weight: 800;
  color: #fff;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.site-navigation .inner ul li a:hover {
  color: #c760a5;
  text-decoration: none;
}
.site-navigation.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.site-navigation.active .layer {
  width: 100%;
}
.site-navigation.active .inner {
  opacity: 1;
}

/* SECTION TITLES */
.section-title {
  font-family: "Poppins", sans-serif;
  margin: 25px 0 40px 0;
  line-height: 1;
  font-size: 6vw;
  letter-spacing: 0px;
  font-weight:900;
  text-align: center;
}

.section-title span.golden {  
	background-image: linear-gradient(to right, #c36b1e 20%, #ffda11 50%, #ff6c00 85%);
	background-size: 100%;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: goldenrod;
	text-shadow: 1px 1px 10px #000;
	font-weight: 900;
	font-size: 4vw;
	margin-top: 3vh;
	display: inline-block; /* experimental */
  }


/* SOCIAL MEDIA */
.social-media {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 3;
  background: #a61c78;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.social-media .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #161619;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.social-media .inner {
  position: relative;
  z-index: 2;
  padding-left: 100px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0.7s;
  opacity: 0;
  text-align: center;
  width: 100%;
}
.social-media .inner h5 {
  font-size: 3vw;
  font-weight: 600;
  color: #fff;
  margin-bottom: 50px;
}
.social-media .inner ul {
  display: block;
  margin: 0;
  padding: 0;
}
.social-media .inner ul li {
  font-size: 2rem;
  display: inline-block;
  margin: 0 40px;
  padding: 0;
  list-style: none;
}
.social-media .inner ul li a {
  color: #fff;
}
.social-media .inner ul li a:hover {
  color: #c760a5;
  text-decoration: none;
}
.social-media.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.social-media.active .layer {
  width: 100%;
}
.social-media.active .inner {
  opacity: 1;
}

/* ALL CASES */
.all-cases {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: -100%;
  top: 0;
  z-index: 3;
  background: #a61c78; /*#c760a5*/
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.all-cases .layer {
  width: 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #161619;
  background: linear-gradient(149deg, #5eb3ff, #000, #df84d8);
/*  background: linear-gradient(134deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 0%, rgb(123, 0, 69) 100%);*/
  
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.3s;
}
.all-cases .inner {
  position: relative;
  z-index: 2;
  padding-left: 220px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transition-delay: 0.7s;
  opacity: 0;
  width: 100%;
}
.all-cases .inner ul {
  display: block;
  max-height: 500px;
  /*overflow-y: scroll;*/
  margin: 0;
  padding: 0;
  list-style-type:none;
}
.all-cases .inner ul li {
  /*font-size: 8vw;*/
  /*font-weight: 800;*/
  font-size: 1.3vw;
  margin: 0;
  padding: 0;
}

.all-cases .inner ul li img {width: 20px;margin-right: 5px;}

.all-cases .inner ul li a {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  color: transparent;
}
.all-cases .inner ul li a:hover {
  color: #fff;
  text-decoration: none;
}
.all-cases.active {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.all-cases.active .layer {
  width: 100%;
}
.all-cases.active .inner {
  opacity: 1;
}

/* ALL CASES LINK */
.all-cases-link {
  position: absolute;
  display: flex;
  align-items: center;
  right: -100%;
  top: 30px;
  z-index: 5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
}

.flashCoinIcon {box-shadow: 0px 0px 14px pink;
  padding: 10px;
  border-radius: 20px;
  background: #ff42b9;}
/*
.all-cases-link span {
  color: #FFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  background: #000;
  padding: 9px;
  border-radius:10px;
  border:1px solid red;
  cursor: pointer;
  margin-right: 10px;
}
*/
.all-cases-link span {
  color: #FFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  background: #000;
  padding: 9px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}

/* Add the gradient border */
.all-cases-link span::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -4px;
  bottom: -5px;
  border-radius: 10px;
  background: linear-gradient(45deg, black, purple, #0087ff);
  z-index: -1;
}

/* Gradient change on hover */
.all-cases-link span:hover::before {
  /*background: linear-gradient(45deg, black, purple, #0087ff);*/
}

.all-cases-link span.active {
  color: #FFF;
  background: #CCC;
  transform: rotate(6deg) scale(1.2);
  margin-right: 19px;
  text-shadow: 2px 1px 0px #000;
  top: -5px;
}

.all-cases-link b {
  width: 50px;
  height: 50px;
  line-height: 44px;
  font-size: 25px;
  font-weight: 300;
  display: inline-block;
  background: #fff;
  background: url('../images/icons/coin-pixel-170-stroke.png');
  background-size: 50px 49px;
  background-position: 1px 1px;
  color: #222327;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s;
}

.all-cases-link b.active {
  transform: scale(1.5);
}

.all-cases-link b.active:hover {
  transform: scale(1.3);
}

.all-cases-link b.hover {
  transform: scale(0.9) rotate(12deg);
}

/* LEFT SIDE */
.left-side {
  width: 150px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 10;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
  opacity: 0;
}
.left-side .logo {
  display: inline-block;
  margin-bottom: auto;
}
.left-side .logo img {
  /*width: 77px;*/
  width: auto;
}
.left-side .hamburger {
  margin: auto;
  /*height: 120px;*/
}
.left-side .follow-us {
  /*width: 100px;*/
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  text-align: center;
  /*transform: rotate(-90deg);*/
  margin: auto;
  cursor: pointer;
}

.left-side .follow-us i {color:#4bc4ff}

.left-side .follow-us a {color:#FFF;text-decoration:none}

.left-side .equalizer {
  margin: auto;
  margin-bottom: 1rem;
}

/* SLIDER */
.slider {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1.2);
  filter: blur(20px);
  transition-delay: 0.8s;
}
.slider .swiper-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.slider .swiper-container .swiper-slide {
  background-size: cover;
  background-position: center;
  /*overflow: hidden;*/
}

.slider .swiper-container .swiper-slide video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.slider .swiper-container .swiper-slide .video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
	display: flex;
	justify-content: center;
	align-items: center;
  }
		
.slider .gallery-top {
  height: 100%;
  width: 100%;
  background: #222327;
}
.slider .gallery-thumbs {
  width: calc(100% - 240px);
  display: flex;
  flex-wrap: wrap;
  margin: 0 120px;
  padding-bottom: 30px;
  z-index: 9;
  position: absolute;
  bottom: 40vh; /*30%;*/
  right: 0;
  height: auto;
  color: #fff;
}
.slider .gallery-thumbs .swiper-slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: center;
  filter: blur(6px);
}
.slider .gallery-thumbs .swiper-slide span {
  margin-left: 50%;
  transform: translateX(-50%);
  float: left;
  font-size: 5vw;
  line-height: 4.5vw;
  font-weight: 800;
  width: 50vw;
  /*background: #000000a1;*/
  padding: 7px;
}

.slider .gallery-thumbs .swiper-slide span img {max-width:89%}

.slider .gallery-thumbs .swiper-slide a {
  display: none;
  font-size: 20px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  text-shadow: 0px 0px 5px #000;
  background: #000000a1;
  padding: 7px;
}
.slider .gallery-thumbs .swiper-slide a:before {
  content: "";
  width: 20px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.slider .gallery-thumbs .swiper-slide a:hover {
  text-decoration: none;
}
.slider .gallery-thumbs .swiper-slide a:hover:before {
  width: 100%;
}
.slider .gallery-thumbs .swiper-slide-active {
  width: 50%;
  opacity: 1;
  /*transform: scale(1.4);*/
  filter: blur(0px);
}
.slider .gallery-thumbs .swiper-slide-active span {
  /*font-size: 4vw;*/
  text-shadow: 0px 1px 10px #000;
}
.slider .gallery-thumbs .swiper-slide-active a {
  display: inline-block;
}
.slider .swiper-button-prev {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 120px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.slider .swiper-button-next {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 40px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}

.slider .swiper-button-next, .slider .swiper-button-prev {
  text-shadow: 0px 2px 1px #000;
  background: #a6006d;
  padding: 0 12px;
  border: 2px solid black;
  width: auto;}
.slider .slide-progress {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 50%;
  bottom: 8px;
  margin-left: -110px;
  z-index: 3;
  text-align: center;
}
.slider .slide-progress span {
  display: inline-block;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}
.slider .slide-progress .swiper-pagination {
  width: 160px;
  height: 2px;
  margin: auto 10px;
  display: inline-block;
  position: static;
  background: rgba(255, 255, 255, 0.3);
}
.slider .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #fff;
}

/* VIDEO HERO */
.video-hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.video-hero .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #222327;
}
.video-hero .video-bg video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}
.video-hero .inner {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
}
.video-hero .inner span {
  width: 100%;
  float: left;
  font-size: 8vw;
  line-height: 5vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 30px;
}
.video-hero .inner a {
  font-size: 19px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
}
.video-hero .inner a:hover {
  text-decoration: none;
  color: #c760a5;
}

/* CAROUSEL HERO */
.carousel-hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.carousel-hero .carousel-slider {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.carousel-hero .carousel-slider .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  background-size: cover;
  background-position: center;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active .inner {
  opacity: 1;
}
.carousel-hero .carousel-slider .swiper-slide.swiper-slide-active:after {
  opacity: 0.4;
}
.carousel-hero .carousel-slider .swiper-slide:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #222327;
  opacity: 0.7;
}
.carousel-hero .carousel-slider .swiper-slide .inner {
  width: 100%;
  display: block;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.carousel-hero .carousel-slider .swiper-slide .inner h2 {
  width: 100%;
  float: left;
  font-size: 4vw;
  line-height: 5vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.carousel-hero .carousel-slider .swiper-slide .inner a {
  font-size: 19px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 2px solid #fff;
  padding-bottom: 4px;
}
.carousel-hero .carousel-slider .swiper-slide .inner a:hover {
  text-decoration: none;
  color: #c760a5;
}
.carousel-hero .swiper-button-prev {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 120px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.carousel-hero .swiper-button-next {
  height: auto;
  position: absolute;
  left: auto;
  top: auto;
  right: 40px;
  bottom: 30px;
  font-family: "Fjalla One", sans-serif;
  color: #fff;
  background: none;
}
.carousel-hero .slide-progress {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -110px;
  z-index: 3;
  text-align: center;
}
.carousel-hero .slide-progress span {
  display: inline-block;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 14px;
}
.carousel-hero .slide-progress .swiper-pagination {
  width: 160px;
  height: 2px;
  margin: auto 10px;
  display: inline-block;
  position: static;
  background: rgba(255, 255, 255, 0.3);
}
.carousel-hero .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #fff;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: #161619;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1.2);
  filter: blur(20px);
  transition-delay: 0.8s;
}
.page-header .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.page-header .video-bg video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}
.page-header .inner {
  width: 100%;
  padding-left: 220px;
  position: absolute;
  z-index: 2;
}
.page-header .inner h1 {
  color: #fff;
  font-weight: 800;
  font-size: 10vw;
  text-shadow: 2px 2px 12px #bc5196;
}
.page-header .inner p {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* INTRO */
.intro {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 60px 0;
  color: #fff;
  background: #161619;
  background: url('../images/esve-bg.gif');
  padding: 20vh 0px;
}
.intro .col-lg-7 {
  padding-left: 10%;
}
.intro h6 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 19px;
}
.intro h6:after {
  content: "";
  width: 70px;
  height: 1px;
  background: #fff;
  display: inline-block;
  margin-left: 15px;
  margin-bottom: 7px;
}
.intro b {
  font-size: 115px;
  line-height: 1;
  font-family: "Fjalla One", sans-serif;
  float: left;
  font-weight: 400;
  margin-right: 13px;
}
.intro h4 {
  font-weight: 600;
}
.intro p {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 35px;
}
.intro small {
  display: block;
  opacity: 0.7;
  margin-bottom: 32px;
}
.intro a {
  color: #fff;
  font-size: 17px;
  border-bottom: 2px dashed #c760a5;
}
.intro a:hover {
  border-color: #fff;
  border-bottom: 4px solid #c760a5;
  }

/* INTRO IMAGE */
.intro-image {
  padding: 2rem 0 4rem 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 150px;
  position: relative;
  padding-bottom: 2rem;
  color:#FFF;
  background: rgb(255,153,0);
  background: linear-gradient(260deg, rgb(191, 3, 3) 0%, rgb(36, 1, 1) 100%);
  /*background: linear-gradient(260deg, rgb(202, 202, 202) 0%, rgb(40, 74, 255) 100%);*/
}
.intro-image:before {
  content: "";
  width: 100%;
  height: 100px;
  /*background: #161619;*/
  position: absolute;
  left: 0;
  top: 0;
}
.intro-image.light:before {
  /*background: #fff;*/
}
.intro-image .office-slider, 
.intro .office-slider {
  width: 99%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  margin: 6vh 0 0 0px;
  border-radius: 5px;
}
.intro-image figure, 
.intro figure {
  width: 100%;
  display: block;
  margin: 0;
  position: relative;
}
.intro-image figure img, 
.intro figure img {
  width: 100%;
  opacity: 1;
}

.intro-image figure a img, 
.intro figure a img {border-radius: 5px;
  /*border: 1px solid #4af6ff;*/}

.intro-image figure figcaption,
.intro figure figcaption {
  position: relative;
  left: 0;
  bottom: 0;
  line-height: 1;
  /*background: #000000b0;*/
  padding: 5px 10px;
  /*margin-bottom: 1rem;*/
  width: 100%;
  border-radius: 0 0 5px 5px;
}
.intro-image figure figcaption h6,
.intro figure figcaption h6 {
  font-size:1.3rem;
  color: #fff;
  font-weight: 600;
}

.office-slider figure figcaption h6 small {display: block;}
.office-slider .swiper-pagination {z-index:8}

figcaption small {color: #FFF;
  position: relative;
  top: -5px;
  display: block;
  font-size:90%;}

/* PROCESS */
.process {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 35px 13px;
  color: #fff;
  text-align: center;
  background: #572c5b;
}
.process .odometer {
  font-family: "Fjalla One", sans-serif;
  font-size: 10vw;
  line-height: 1;
}
.process .symbol {
  width: 100%;
  display: block;
  font-size: 18px;
}
.process small {
  width: 80%;
  display: block;
  margin: 12px 10%;
  font-weight: 600;
  font-size: 1rem;
  min-height: 3rem;
}

/* ICON CONTENT BLOCK */
.icon-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  color: #fff;
  padding: 60px 0;
  background: linear-gradient(180deg, rgb(56, 109, 140) 0%, rgb(0, 32, 90) 100%);
  /*background: linear-gradient(180deg, rgb(68, 49, 162) 0%, rgb(16, 16, 16) 100%);*/
  /*background-image: url('../images/night-sky-background-with-clouds-full-moon-and-stars-vector.png');
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
  background-size: 100vw;
  */
}
.icon-content-block .container {
  position: relative;
  z-index: 2;
}
.icon-content-block .content-block {
  width: 100%;
  display: block;
  margin: 0;
  padding: 10px 5px;
  position: relative;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  background: none;
  border-radius: 10px;
  margin-bottom: 1rem;
}
/*
.icon-content-block .content-block.selected {
  background: #1f538a9c;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
}
.icon-content-block .content-block.selected:before {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: -1;
  /*background: url(../images/dot-pattern.png) right;* /
  background-size: 10px;
}
*/
.icon-content-block .content-block figure {
  width: 100%;
  display: block;
  margin-bottom: 16px;
}
.icon-content-block .content-block figure img {
  height: 75px;
}
.icon-content-block .content-block h6 {
  display: block;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.icon-content-block .content-block ul {
  margin: 0;
  padding: 0;
}
.icon-content-block .content-block ul li {
  padding: 3px 0;
  opacity: 0.7;
  list-style: none;
  font-weight: 300;
}

.icon-content-block .content-block p {margin-top: 0rem;}

.clear-the-way-gallery {
  background: #000;
  width: fit-content;
  padding: 3px 16px;
  rotate: -4deg;
  top: -20px;
  position: relative;
  scale: 1.1;
  font-weight: bold;
  font-size: 5vh;
  left: 20;
}

.gallery-h1 {line-height: 150px;}

/* gallery */
.gallery-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #0d0d0d;
  color: #fff;
  justify-content: center;
  padding: 7vh 7vh;
}

.gallery-grid ul {
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100vw;
}

.gallery-grid ul li {
  display: flex; /* Flexbox for vertical alignment */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically */
  padding: 20px;
  text-align: center;
  list-style: none;
}

.gallery-grid ul li img {
  max-width: 100%; /* Ensure the image is responsive */
  height: auto;
  margin-bottom: 10px; /* Add spacing below the image */
}

.gallery-grid ul li a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.gallery-grid ul > li > span > a > i {color:cyan}

.gallery-bg {background: linear-gradient(182deg, rgb(164, 48, 121) 0%, rgb(0, 28, 53) 100%);}
.gallery-bg a {color: #3fc0ff;}

/* showcase */
.showcase {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 75px 0;
  /*background: #0d0d0d;*/
  color: #fff;
}
.showcase ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  text-align: center;
  padding:0;
}
.showcase ul li {
  width: 31vw;
  display: inline-block;
  margin: 0 auto;
  list-style: none;
  padding: 20px 10px;
}
.showcase ul li:nth-child(2n+2) {
  /*margin-top: 100px;*/
}
.showcase ul li:nth-child(3n+3) {
  /*margin-top: 40px;*/
}
.showcase ul li figure {
  width: 100%;
  display: block;
  /*margin-bottom: 30px;*/
  position: relative;
  z-index: 2;
  /*background: #222327;*/
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.showcase ul li figure:hover {
  /*box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);*/
  transform: translateY(-5px);
}
.showcase ul li figure:hover:before {
  opacity: 1;
}
.showcase ul li figure:before {
  content: "";
  width: 90%;
  height: 30%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: -1;
  /*background: url(../images/dot-pattern.png) right;*/
  background-size: 10px;
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.showcase ul li figure a {
  width: 100%;
  /*background: #222327;*/
  display: block;
  position: relative;
  z-index: 2;
}

.showcase ul li figure img.browsers {max-width: 25vh;
    position: absolute;
    right: 5rem;
    z-index: 10;
    top: 20px;
    rotate: 18deg;
    background: #c2c2c2;
    border-radius: 5px;}

.showcase ul li figure a img {
  width: 100%;
    border-radius: 6px;
}
.showcase ul li h3 {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 26px;
  letter-spacing: -1px;
}
.showcase ul li small {
  display: block;
  font-family: "Fjalla One", sans-serif;
  opacity: 0.7;
}

.showcase video {width: 45vw;height: auto;border-radius: 5px;border:1px solid #000;} /* 3 columnas */

.showcase video:hover {
	box-shadow: 0px 0px 7px #16797D;
   -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;}

.teambg {
  background-image: url('../images/sillouete-female-vr-right.gif');
  background-size: 25vw;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom -5vw;}
    
/* TEXT CONTENT BLOCK */
.text-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 60px 0;
  background: #fff;
  background: url('../images/planning-midres.jpg') no-repeat;
  background-size: cover;
}
.text-content-block .col-md-4 {
  margin: 20px 0;
}
.text-content-block .section-title {
  margin-bottom: 30px;
}
.text-content-block h5 {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  padding-right: 20%;
  margin-bottom: 70px;
}
.text-content-block small {
  font-size: 26px;
  /*font-weight: 800;*/
  margin-bottom: -20px;
  display: block;
}
.text-content-block h6 {
  font-size: 20px;
  font-family: "Fjalla One", sans-serif;
  font-weight: 600;
}
.text-content-block p {
  margin-bottom: 0;
  line-height: 1.5;
  text-align: justify;
  padding-bottom: 20px;
}

/* TESTIMONIALS */
.testimonials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*margin-top: 150px;*/
  color: #fff;
  background: #161619;
  position: relative;
}
.testimonials:before {
  content: "";
  width: 100%;
  height: 50px;
  /*background: #222327;*/
  position: absolute;
  left: 0;
  top: 0;
}
.testimonials .section-title {
  margin-bottom: 1rem;
}
.testimonials .testimonials-slider {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  margin-bottom: 2rem;
}
.testimonials .swiper-pagination {
  width: auto; /*100px;*/
  right: 80px;
  /*left: auto;*/
  bottom: 115px;
  text-align: right;
  /*background: #CCC;*/
  margin: 0 auto;
  color: #F00;
  background: #00000014;
  border-radius: 11px;
  margin-bottom: 2vh;
}
.testimonials .swiper-pagination-bullet {
  background: #ff7ed9;
}
.testimonials .swiper-pagination-bullet:hover {
  border-color: #222327;
}
.testimonials .swiper-pagination-bullet-active {
  border-color: #c760a5;
  background: none;
}

.testimonial-video {margin: 0 auto;}

.testimonials .testimonial {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 29px 50px 10px 50px;
  background: #fff;
  color: #222327;
  box-shadow: inset 0 0 30px #825073;
  border-radius: 9px;
  border: 2px solid #000;
}
.testimonials .testimonial blockquote {
  font-size: 21px;
  line-height: 1.7;
  font-weight: 300;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-image: linear-gradient(to right, #fff, #ffa700, #f6f6f6, #f80046) 1;
  margin: 0 auto;
  padding-bottom: 10px;
  width:100vw;
  text-align: center;
}
.testimonials .testimonial .reviewer {
  /*width: 50vw;*/
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 1.5rem;
}
.testimonials .testimonial .reviewer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  float: left;
}
.testimonials .testimonial .reviewer .reviewer-infos {
  width: calc(100% - 65px);
  float: left;
}
.testimonials .testimonial .reviewer h6 {
  display: block;
  font-weight: 600;
}
.testimonials .testimonial .reviewer small {
  display: block;
}

.testimonials .trustedUsTitle {margin: 7vh 0;}

/* TEAM */
.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 38px;
  /*padding-bottom: 100px;*/
  color: #fff;
  background: #161619;
  background: linear-gradient(128deg, rgb(0, 0, 0) 0%, rgb(25, 59, 139) 100%);
  position: relative;
  z-index: 2;
}
/*
.team:before {
  content: "";
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  /*background: #fff;
}
*/
.team .reveal-effect.masker:after {
  background: #222327;
}
.team h5 {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
}
.team figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 20px;
  color:#fff;
}
.team figure:hover ul {
  visibility: visible;
  opacity:1;
}
.team figure img {
  width: 100%;
  border-radius: 3px 3px 3px 0px;
  /*-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: filter 0.6s;*/
}
.team figure img:hover {}


.team figure {
  display: block;
  margin-top: -5px;
  color: #fff;
  /*background: #3d3d3d;*/
  width: 100%;
  border-radius: 1px 0 5px 5px;
}

.team figure figcaption {
  padding: 9px 1px 0px 14px;
  border-top: 1px solid #a9a9a9;
  height:69px;
}

.team figure figcaption h6 {
  font-weight: 600;
  min-width: 200px;
  font-size:1.1rem;
}

.team figure img {}
.team figure img:hover {}

.team figure figcaption img.watersInProfile {
  width: 20%;
  float: right;
  border-radius: 0;
  top: -6px;
  position: absolute;
  right: -5px;
  opacity: 0.5;
  box-shadow:none;
}

.team figure figcaption small {
  display: inline-block;
  opacity: 0.7;
  font-size: 64%;
  top: -12px;
}
.team figure ul {
  width: 80%;
  display: flex;
  margin: 10%;
  padding: 0;
  background: #FFF;
  background: url('../images/teamProfilesBg.png') 1px;
  position: absolute;
  left: 0;
  bottom: 4rem;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  box-shadow: 0 0 5px rgb(0, 0, 0);
  border-radius: 5px;
  
}
.team figure ul li {
  flex: 1;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  text-align: center;
  border-right: 1px solid #80386b96;
}
.team figure ul li:last-child {
  border-right: 0;
}
.team figure ul li a {
  color: #222327;
  font-size: 18px;
  padding: 5px;
}
.team figure ul li a:hover {
  color: #FFF;
}

.terms {background: rgb(187,75,145);
background: linear-gradient(182deg, rgb(164, 48, 121) 0%, rgb(29, 30, 34) 100%);
padding: 48px 0;}

.terms textarea {
  font-family:"Times New Roman";
  display: block;
  height: 50vh;
  width: 100vw;
  margin: 0 auto;
  margin-top:1rem;
  margin-bottom:1rem;
}

.terms a {color:#74D1FF;margin:10px;}
.terms a:hover {color:#FFF;text-decoration:none;}


/* WORKS */

#artwork-carousel .carousel-indicators li, #worlds-carousel .carousel-indicators li {padding: 4px;
  margin: 0px 4px 1px 4px;}

.works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 35px 0 0 0;
  background: linear-gradient(180deg, rgb(0, 32, 90) 0%, rgb(174, 94, 182) 100%);
  color: #fff;
  text-shadow: 0px 1px 1px #000;
}

.works .works-artwork {background: linear-gradient(180deg, rgb(1, 53, 136) 0%, rgb(245, 245, 245) 100%);background-image: url('images/seamless-western-game-background-horizontal-mountain-desert-landscape.png');
  background-position-y: bottom -3rem;
  background-repeat: no-repeat;
  background-size: 100vw;
padding-bottom: 290px;}

.works ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  text-align: center;
  padding:0;
}
.works ul li {
  width: 30vw;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  padding: 20px 0px;
}
.works ul li:nth-child(2n+2) {
  /*margin-top: 100px;*/
}
.works ul li:nth-child(3n+3) {
  /*margin-top: 40px;*/
}
.works ul li figure {
  width: 100%;
  display: block;
  /*margin-bottom: 30px;*/
  position: relative;
  z-index: 2;
  /*background: #222327;*/
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.works ul li figure:hover {
  /*box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);*/
  transform: translateY(-5px);
}
.works ul li figure:hover:before {
  opacity: 1;
}
.works ul li figure:before {
  content: "";
  width: 90%;
  height: 30%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: -1;
  /*background: url(../images/dot-pattern.png) right;*/
  background-size: 10px;
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.works ul li figure a {
  width: 100%;
  /*background: #222327;*/
  display: block;
  position: relative;
  z-index: 2;
}

.works ul li figure img.browsers {max-width: 25vh;
  max-width: 25vh;
  position: absolute;
  right: 20px;
  z-index: 10;
  top: 16px;
  rotate: 18deg;
  background: #c2c2c2;
  border-radius: 5px;
  transform: scale(0.8);
  }

.works ul li figure a img {
  width: 100%;
    border-radius: 6px;
}
.works ul li h3 {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 26px;
  letter-spacing: -1px;
}

.works ul li caption {background:#000}

.works ul li small {
  display: block;
  /*font-family: "Fjalla One", sans-serif;*/
  opacity: 0.9;
}

.works video {width: 30vw;height: auto;border-radius: 5px;border:0px solid #000;} /* 3 columnas */

.works video:hover {
	box-shadow: 0px 0px 7px #16797D;
   -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;}


#artwork-carousel .carousel-inner
#worlds-carousel .carousel-inner {  
border:1px solid #000;
-webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;}
#artwork-carousel .carousel-inner:hover,
#worlds-carousel .carousel-inner:hover {
	box-shadow: 0px 0px 7px #16797D;
   -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transform: translateY(-5px);
  }

/* WHY US */
.why-us {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 35px 0 0 0;
  /*background: linear-gradient(180deg, rgb(0, 32, 90) 0%, rgb(174, 94, 182) 100%);*/
  color: #fff;
  text-shadow: 0px 1px 1px #000;
  padding: 8vh 10vw;
  background: #000;
}

.loadingText {
	font-size:2rem;
	color: #FFF; 
	float:left; 
	position: absolute/*relative*/;  
	bottom: -15rem;
	margin: 0 auto;
	font-family:'Poppins';
}

/* CASE STUDY */
.case-study {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.case-study h6 {
  font-weight: 600;
  margin-top: 30px;
}
.case-study h5 {
  font-family: "Fjalla One", sans-serif;
  font-size: 5vw;
  text-align: center;
  margin-top: 50px;
  text-transform: uppercase;
}
.case-study p {
  margin-bottom: 20px;
  line-height: 1.5;
}
.case-study figure {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.case-study figure img {
  width: 100%;
}
.case-study figure video {
  width: 100%;
}
.case-study .container-fluid {
  margin-top: 80px;
  padding-left: 30px;
  padding-right: 30px;
}

/* BLOG */
.blog {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #fff;
}
.blog .col-lg-9 {
  padding-right: 60px;
}
.blog .sidebar {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}
.blog .sidebar .widget {
  width: 100%;
  display: block;
  border-left: 1px solid #eee;
  margin-bottom: 40px;
  padding-left: 30px;
  padding-bottom: 10px;
}
.blog .sidebar .widget .title {
  display: block;
  font-weight: 800;
  font-size: 19px;
  padding: 15px 0;
  position: relative;
}
.blog .sidebar .widget .title:before {
  content: "";
  width: 1px;
  height: 100%;
  background: #222327;
  position: absolute;
  left: -31px;
  top: 0;
}
.blog .sidebar .widget p {
  margin: 0;
}
.blog .sidebar .widget form {
  width: 100%;
}
.blog .sidebar .widget form input[type=text] {
  width: 100%;
  margin-bottom: 10px;
}
.blog .sidebar .widget .categories {
  width: 100%;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .categories li {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}
.blog .sidebar .widget .categories li span {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #ccc;
  color: #fff;
  margin-right: 15px;
  margin-left: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}
.blog .sidebar .widget .categories li a {
  color: #222327;
  margin-left: 0;
  font-weight: 600;
}
.blog .sidebar .widget .tags {
  width: 100%;
  display: block;
  margin-bottom: 0;
  padding: 0;
}
.blog .sidebar .widget .tags li {
  display: inline-block;
  list-style: none;
  margin-bottom: 5px;
}
.blog .sidebar .widget .tags li a {
  font-weight: 600;
  font-size: 11px;
  background: #222327;
  color: #fff;
  line-height: 1;
  padding: 3px 6px;
}
.blog .sidebar .widget .tags li a:hover {
  color: #c760a5;
  text-decoration: none;
}
.blog .sidebar .widget .mini-works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .mini-works li {
  width: 33.3333%;
  display: inline-block;
  margin: 0;
  padding: 4px;
  list-style: none;
}
.blog .post {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 50px 0;
}
.blog .post.single {
  position: relative;
}
.blog .post.single .post-image {
  width: 100%;
  margin-bottom: 50px;
}
.blog .post.single .post-content {
  width: 100%;
  padding: 0 60px;
}
.blog .post.single .post-content .post-title {
  font-size: 4vw;
  line-height: 1.4;
}
.blog .post:nth-child(even) {
  position: relative;
}
.blog .post:nth-child(even) .post-image {
  order: 2;
}
.blog .post:nth-child(even) .post-image:before {
  right: auto;
  left: -25px;
}
.blog .post:nth-child(even) .post-content {
  order: 1;
  padding-right: 60px;
  padding-left: 0;
  text-align: right;
}
.blog .post .post-image {
  width: 45%;
  margin: 0;
  position: relative;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
}
.blog .post .post-image img {
  position: relative;
  width: 100%;
}
.blog .post .post-image:before {
  content: "";
  width: 90%;
  height: 60%;
  position: absolute;
  right: -25px;
  bottom: -30px;
  z-index: 0;
  background: url(../images/dot-pattern.png) right;
  background-size: 10px;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  opacity: 0.2;
}
.blog .post .post-content {
  width: 55%;
  padding-left: 60px;
}
.blog .post .post-content h5 {
  font-weight: 600;
  margin-top: 30px;
}
.blog .post .post-content ul {
  margin-bottom: 30px;
  padding-left: 20px;
}
.blog .post .post-content ul li {
  margin: 0;
}
.blog .post .post-content .social-share {
  width: 100%;
  float: left;
  padding: 0;
  margin-bottom: 40px;
  text-align: center;
}
.blog .post .post-content .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
}
.blog .post .post-content .social-share li.facebook a {
  background: #475993;
}
.blog .post .post-content .social-share li.twitter a {
  background: #76a9ea;
}
.blog .post .post-content .social-share li.google-plus a {
  background: #f34a38;
}
.blog .post .post-content .social-share li.linkedin a {
  background: #0077b7;
}
.blog .post .post-content .social-share li.youtube a {
  background: #f61c0d;
}
.blog .post .post-content .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #222327;
  color: #fff;
  border: none;
  border-radius: 0;
}
.blog .post .post-content .image-left {
  width: 40%;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.blog .post .post-content .image-full {
  width: 100%;
  display: block;
  margin: 30px 0;
}
.blog .post .post-content .post-date {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  opacity: 0.5;
}
.blog .post .post-content .post-title {
  width: 100%;
  display: block;
  margin-bottom: 20px;
  font-size: 3vw;
  font-weight: 800;
}
.blog .post .post-content .post-title a {
  color: #161619;
}
.blog .post .post-content .post-title a:hover {
  color: #c760a5;
  text-decoration: none;
}
.blog .post .post-content .post-author {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}
.blog .post .post-content .post-author img {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 15px;
  border-radius: 50%;
}
.blog .post .post-content .post-author span {
  display: inline-block;
  color: #A7A7A7;
}
.blog .post .post-content .post-author span a {
  color: #222327;
  font-size: 15px;
}
.blog .post .post-content .post-author span a:hover {
  color: #222327;
}
.blog .post .post-content .post-categories {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding: 0;
}
.blog .post .post-content .post-categories li {
  display: inline-block;
  list-style: none;
}
.blog .post .post-content .post-categories li a {
  font-weight: 600;
  font-size: 11px;
  background: #222327;
  color: #fff;
  line-height: 1;
  padding: 3px 6px;
}
.blog .post .post-content .post-categories li a:hover {
  color: #c760a5;
  text-decoration: none;
}
.blog .post .post-content .post-link {
  font-family: "Fjalla One", sans-serif;
  border-bottom: 2px solid #222327;
  padding-bottom: 5px;
}
.blog .post .post-content .post-link:hover {
  color: #c760a5;
  text-decoration: none;
}

/* CLIENTS */
.clients {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 73px 0; /*150px 0*/
  background: #fff;
  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.3);
}
.clients ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.clients ul li {
  width: 33.33333%;
  margin: 0;
  padding: 30px;
  list-style: none;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
}

/* CALCULATOR */
.calculator {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 65px;
  margin-bottom:40px;
  background: url(../images/bottom.jpg) bottom center no-repeat;
  background-color: #1d1e22;
  background-size: 101% auto;
  /*min-height: 1200px;*/
  /*box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.3);/*/
}

.calculator h3 {text-shadow: 1px 1px 8px #000;}

.calculator .calcStart {background: #000000bf;color:#FFF;text-shadow: 1px 1px 2px #000;}

/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: #fff;
}
.contact h6 {
  font-weight: 600;
  margin-top: 30px;
}
.contact address {
  display: block;
}
.contact address p {
  margin: 0;
}
.contact address a {
  text-decoration: underline;
}
.contact .contact-form {
  width: 100%;
  display: block;
}
.contact .contact-form #contact {
  display: block;
}
.contact .contact-form #contact .form-group {
  display: block;
  position: relative;
  margin-bottom: 35px;
}
.contact .contact-form #contact .form-group span {
  width: 100%;
  line-height: 58px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 20px;
  z-index: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.contact .contact-form #contact .form-group span.label-up {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group input[type=text] {
  width: 400px;
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group input:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group textarea {
  width: 500px;
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group textarea:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group label.error {
  width: 100%;
  color: red;
  margin-top: 5px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
}
.contact .contact-form #success, .contact .contact-form #error {
  display: none;
  float: left;
}

.contact .contact-form #contact .form-group #submit:disabled {
  opacity: 0.5;
}

.contact .contact-form #error {
  background: red;
  color: #fff;
}
.contact .contact-form #success {
  background: green;
  color: #fff;
}
.contact .contact-form .alert {
  border: none;
  border-radius: 0;
  padding: 20px 30px;
}

.alert-dismissible .close {
  right: -2%;
  top: -15%;
}

.contact .map {
  width: 80%;
  height: 400px;
  display: block;
  background: #222327;
}
.contact .map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* FOOTER */
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: -40px;
  z-index: -1;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  margin-top:25px;
  /*background: url(../images/footer-bg.png) top center no-repeat;*/

}
.footer ul {
  margin: 0;
  padding: 0;
}
.footer ul li {
  display: inline-block;
  margin-left: 10px;
}
.footer ul li a {
  color: #fff;
  font-size: 13px;
}
.footer ul li a:hover {
  color: #c760a5;
}
.footer h6 {
  font-family: "Fjalla One", sans-serif;
  font-size: 2rem;
}
.footer h2 {
  font-size: 3vw;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 33px;
  opacity: 1;
}

.coloredAnimate {
	background: linear-gradient(270deg, #f7ff00, #ff00ef, #00b6fd);
	background-size: 600% 600%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: GradientAnimateText 10s ease infinite;
	-moz-animation: GradientAnimateText 10s ease infinite;
	animation: GradientAnimateText 10s ease infinite;
}

.coloredAnimate-fast {
    background: linear-gradient(270deg, #f7ff00, #ff00ef, #00b6fd);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-animation: GradientAnimateText 5s ease infinite;
    -moz-animation: GradientAnimateText 5s ease infinite;
    animation: GradientAnimateText 5s ease infinite;
}

@-webkit-keyframes GradientAnimateText {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimateText {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimateText {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.footer .link {
  color: #fff;
  font-size: 17px;
  border-bottom: 2px solid #000;
  padding: 11px;
  background: #000000b2;
}
.footer .link:hover {
  border-color: #c760a5;
  text-decoration: none;
  background:#FFF;
  color:#000;
}
.footer .footer-bar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}
.footer .footer-bar .copyright {
  margin: 0;
}
.footer .footer-bar .creation {
  margin-left: auto;
}
.footer .footer-bar .creation a {
  color: #fff;
  text-decoration: underline;
}
.footer .footer-bar .creation a:hover {
  text-decoration: none;
  color: #c760a5;
}

.swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
  /*bottom: -7px;*/
  position: relative;
  /*margin-top:1rem;*/
  scale: 1.5;
}

 .zoom-in-text {}
 .zoom-in-arrow {width: 15vw;
  rotate: -37deg;
  top: -25px;
  position: relative;
 }
	
/* ANIMATIONS */
@keyframes texteffect {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes texteffect {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes show-img-1 {
  0%, 66.6% {
    visibility: hidden;
  }
  100%, 66.7% {
    visibility: visible;
  }
}
@keyframes show-img-1 {
  0%, 66.6% {
    visibility: hidden;
  }
  100%, 66.7% {
    visibility: visible;
  }
}
@-webkit-keyframes slide-bg-2 {
  33.3% {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.05, 1);
    transform: scale(0.05, 1);
  }
  66.6% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  66.7% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
}
@keyframes slide-bg-2 {
  33.3% {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.05, 1);
    transform: scale(0.05, 1);
  }
  66.6% {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  66.7% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
}

.radius5 {border-radius:5px;}
/*# sourceMappingURL=style.css.map */
.white {color:#FFF;}

iframe small b a {display:none}

/* RESPONSIVE CUSTOM CONTAINER */
@media (min-width: 1300px) {
  .container {max-width: 85vw;}
  model-viewer.asset-view {width: 42vh;height: 40vh;margin: 0 20px;}
  .calculator {padding-bottom: 50px;}
}

/* RESPONSIVE max screen 992px to 1299px */
@media (min-width: 992px) and (max-width: 1299px) {
	model-viewer.asset-view {width: 35vh;height: 40vh;}
	.container {max-width: 94vw;}
	.works ul li {width: 31vw;}
	.works video {width: 30vw;}
	
}

/* RESPONSIVE TABLET FIXES 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 4vw;
  }
  
  
  .slider .gallery-thumbs .swiper-slide-active span {
    width: 100%;
	bottom: 35vh;
    font-size: 2.8vw;
    /*line-height: 5vw;*/
  }

  .page-header .inner {
    /*padding-left: 98px;*/
  }

  .all-cases .inner {
    padding-left: 25vw;
  }

  .social-media .inner ul li {
    font-size: 4vw;
  }

  .all-cases .inner ul li {
    font-size: 1.4vw;
  }

  .home-title > p {font-size: 1.3rem;}

  .works {
    padding: 30px 0 30px 0;
  }

  .works ul li {
    /*width: 33.3333%;*/
	width: 49.99%;
  }
  
  .works ul li h3 {font-size: 20px;}
 
  .works video {
	  /*width: 30vw;*/
	  width:45vw;
	  }
  
  .intro .col-lg-7 {
    padding-left: 15px;
    margin-top: 50px;
  }

  .text-content-block {
    padding: 80px 0;
  }

  .intro-image {
    padding: 30px 0 17px 0;
  }

  .icon-content-block .col-lg-3:nth-child(3) {
    margin-top: 0;
  }

  .icon-content-block .content-block {
    padding: 30px 20px;
  }

  .page-header .inner {
  padding-left: 183px;
  }
  

  .process {
    margin-bottom: 28px;
  }

  .process .col-lg-3:first-child {
    margin-bottom: 40px;
  }

  .process .odometer {
    font-size: 8vw;
  }
  
  .section-title {
	font-size: 5vw;
    /*margin: 20px 0 20px 5vw;*/
    text-align: center;
	line-height: 40px;
  }

  .testimonials {
    /*margin-top: 80px;*/
  }
  
  .testimonials:before {
    display: none;
  }

  .testimonials .col-lg-6:first-child {
    order: 2;
  }

  .testimonials .col-lg-6:last-child {
    order: 1;
  }

  .testimonials .testimonials-slider {
    margin-top: 40px;
    width: 100%;
  }

  .testimonials .swiper-pagination {
    bottom: 65px;
  }

  .testimonials .testimonial {
    padding: 40px 50px 10px 50px;
  }


  .team {
    /*padding: 60px 0;*/
  }

  .team:before {
    display: none;
  }

  .team .col {
    width: 33.33333%;
    flex-basis: auto;
    flex-grow: inherit;
  }

  .team figure {
    margin: 0 0 20px 0;
  }

  .team figure figcaption {
    /*color: #fff;*/
	/*  bottom: 8rem; left: 11rem;*/
  }

  .team h5 {
    margin-top: 0;
  }

  .text-content-block small {font-size: 2.5rem;}
  
  .intro {
    padding: 35px 0;
  }

  .clients {
    padding: 30px 0;
  }

  .blog {
    padding: 30px 0;
  }

  .blog .col-lg-9 {
    padding-right: 15px;
  }

  .contact {
    padding: 80px 0;
  }

  .contact .map {
    width: 100%;
    margin: 30px 0;
  }

  .contact .contact-form {
    margin-top: 30px;
  }
  
  .container {max-width: 100vw;}

  .footer h6 {
    font-size: 26px;
  }

  .footer ul {
    width: 100%;
    float: left;
    margin-bottom: 30px;
  }

  .footer ul li {
    margin-left: 0;
    margin-right: 10px;
  }
    /* (min-width: 768px), and (max-device-width: 991px) */
	model-viewer.asset-view {width: 98vh;height: 35vh;}
   .zoom-in-text {rotate: -10deg;}
   
	.slider .swiper-container .swiper-slide {
	  overflow: hidden;
	}
   .wizard-img {max-width: 40vw;}
}

/* RESPONSIVE SMALL-TABLET 600px to 767px */
@media (min-width: 600px) and (max-width: 767px) {

  .benefits-hero li {font-size: 2.6vw;}

  .section-title {
   font-size: 6vw;
   margin: 10px 0 30px 0;
    /*
	margin-left: 8vw;
	*/
    text-align: center;
  }
  
  .slider .gallery-thumbs {
    width: 100%;
    margin: 0;
	bottom: 17vh;
  }
  
  	.slider .swiper-container .swiper-slide {
	  overflow: hidden;
	}
  
  .introStatsHead h3 {font-size: 1rem;    font-weight: 600;}
  .intro-image figure figcaption {position:relative}
  
  .slider .gallery-thumbs .swiper-slide span {font-size: 7vw;line-height: 10vw;max-width: 300px;}

  .page-header .inner p {
    font-size: 17px;
    padding-right: 10%;
  }
  
  .all-cases-link {
  right: 1rem;
  }

  .all-cases .inner {
    padding-left: 140px;
  }
  
  

  .all-cases .inner ul li {
    font-size: 2vw;
  }
  
  .accordion > .card .card-header h2 button {font-size:1rem}
  .card-body ul {/*margin-left: -10%;*/}	
  /*.card-body ul li {font-size: 3vw;}*/

  .container {max-width:95vw}
  
  
  .site-navigation .inner {
    padding-left: 0;
  }

  .site-navigation .inner ul li {
    line-height: 1;
  }

  .site-navigation .inner ul li a {
    font-size: 34px;
  }

  .site-navigation .inner ul li i {
    font-size: 20px;
    margin-left: 13px;
  }

  .site-navigation .inner ul li small {
    display: none;
  }

  .site-navigation .inner ul li ul {
    margin-top: 10px;
  }

  .site-navigation .inner ul li ul li a {
    font-size: 22px;
  }

  .left-side {
    width: 90px;
    border-right: none;
  }

  .left-side .follow-us span {
    display: none;
  }
  
  .left-side .follow-us i {
    font-size:1.5rem;
  }

  .slide-progress {
    display: none;
  }

  .all-cases-link {
    right: 5px;
  }

  .swiper-button-next {
    right: 20px;
  }

  .swiper-button-prev {
    right: 90px;
  }

  .intro {padding: 25px 0;}

  .icon-content-block .col-lg-3:nth-child(3) {
    margin: 50px 0;
  }

  .icon-content-block .content-block {
    padding-bottom: 10px;
  }

  .icon-content-block .content-block.selected {
    background: none;
    box-shadow: none;
  }

  .icon-content-block .content-block.selected:before {
    display: none;
  }

	.page-header .inner {
  padding-left: 100px;;
  }

  .mission-box {font-size: 1.2rem;}
  
  .mission-box h3 {font-size: 1.5rem;}
  
  .mission {margin-bottom: 23px;}

  .testimonials .testimonial {
    padding: 30px 20px;
  }
  
  .testimonials .section-title {margin-bottom: 1rem;line-height: 1.2;}
  
  .testimonials .testimonial blockquote {font-size:15px;}

  .testimonials .swiper-pagination {
    bottom: 85px;
  }
  
  .text-content-block p {padding:10px;}
  .text-content-block small {font-size: 1.5rem;}

  .team .col {
    width: 50%;
  }
  
  .team h5 {font-size: 1rem;
    text-align: center;
    margin-bottom: 2rem;}

  .wizard-img {max-width: 50vw;left: -60px;}

  .works {padding: 40px 0;}

  .works ul li {
    width: 46%;
	margin: 0 auto;
  }
  
  .works ul li h3 {font-size: 20px;}

  .works ul li:nth-child(2n+2) {
    margin-top: 0;
  }

  .works ul li:nth-child(3n+3) {
    margin-top: 0;
  }
  
  .works ul li figure img.browsers {max-width: 35vh;
        top: 44px;
        right: 8rem;}
  
  .works video {  width: 100%; }

  .we-got-you-parent {
		background-position: center -3rem;
		background-size: 100%;
	}
  
  
  .calculator {background-size: 111% auto;}
  .calculator .openCalcBtn {}
  .calcBtnWrapper {bottom: 82px;}
  
  .card-header {padding: .25rem .25rem;}
  
  .clients ul li {
    padding: 30px 20px;
    width: 50%;
  }

  .clients ul li:last-child {
    display: none;
  }

  .blog .post .post-image {
    width: 100%;
    margin-bottom: 40px;
  }

  .blog .post .post-content {
    width: 100%;
    padding: 0 !important;
  }

  .blog .post:nth-child(even) {
    text-align: left;
  }

  .blog .post:nth-child(even) .post-image {
    order: 1;
  }

  .blog .post:nth-child(even) .post-content {
    order: 2;
    text-align: left;
  }

  .blog .post .post-content .post-title {
    font-size: 7vw;
  }

  .blog .post.single .post-content .post-title {
    font-size: 8vw;
  }

  .footer h2 {
    font-size: 7vw;
  }

  .footer h2 br {
    display: none;
  }

  .footer .footer-bar .creation {
    width: 100%;
    display: block;
    margin-top: 5px;
  }
  
  .footer .footer-bar {display:block;text-align: center;}
  
  /* (min-width: 600px), and (max-device-width: 767px) */
  model-viewer.asset-view {width: 90vw;height: 32vh;}
  
  .zoom-in-text {rotate: -10deg;font-size: 2rem;}
  
}

/* Responsive Extra small devices (phones, 561px and down) 
@media (min-width: 576px) {
  .container {max-width: 94vw;}
}
*/

/* Responsive Extra small devices (phones, 312px and 599px) */
@media (min-width: 312px) and (max-width: 599px) {

	model-viewer.asset-view {width: 90vw;height: 32vh;}
	.zoom-in-arrow {/*-webkit-transform: scaleX(-1);transform: scaleX(-1);*/}
	.works ul li {width: 90%; margin: 0 auto;}
	.works ul li figure img.browsers {
        max-width: 200px;
		top: 9px;
		right: 26px;
		transform: scale(0.8);
	}
	.works video {width: 99%;}
	.all-cases .inner {padding-left: 117px;}
	.all-cases .inner ul li {font-size: 3vw;margin-bottom: 3vw;}
	.page-header .inner {padding-left: 140px;} 
	.all-cases-link {    transform: scale(0.8);
    top: 1rem;
    right: 9px;}
	.section-title {line-height: 1.1;font-size:6vw;}
	.section-title span.golden {font-size: 7vw;}
	.wizard-img {left: -30px;max-width: 52vw;}
	.team figure {margin-bottom: 32px;}
	.team figure ul {/*transform: scale(0.7);*/}
	.team figure figcaption {padding: 7px 0px 0px 9px;margin-bottom: 30px;}
	.team figure figcaption h6 {font-size:1.9rem}
	.team figure figcaption small {
    font-size: 1.2rem;
    display: inherit;
    padding-top: 5px;	}
	.star-rating i {font-size:14px}
	.site-navigation .inner ul li a {font-size: 25px;}
	.site-navigation.active .inner {padding-left:60px;}
	.site-navigation .inner ul li small { margin-top: 7px; }
	.left-side {width: 120px;}
	.slider .swiper-container .swiper-slide {
	  overflow: hidden;
	}
	
	.mission-box {font-size: 1rem;}
	
	.gallery ul {
	grid-template-columns: 1fr; /* Stack items in a single column */
	}

	.gallery ul li {
	padding: 10px; /* Adjust padding for smaller screens */
	}

		
	.gallery-h1 {line-height: 36px;}
	.clear-the-way-gallery {
		background: #000;
		width: fit-content;
		padding: 3px 16px;
		rotate: -7deg;
		top: -18px;
		position: relative;
		scale: 0.8;
		left: -20px;
		z-index: -1;
	}
}