/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/**************************************** General Start ****************************************/
html {
	width: 100%;
	height: 100%;
}
body {
	font-family: 'Muli', sans-serif;
	width: 100%;
	min-height: 100%;
	overflow: hidden;
}
.padding-1 {
	padding-top: 7.5rem;
	padding-bottom: 7.5rem;
}
.padding-2 {
	padding-top: 10rem;
	padding-bottom: 10rem;
}
.padding-3 {
	padding-top: 15rem;
	padding-bottom: 15rem;
}
.container-fluid.side-padding {
	padding-left: 6rem;
	padding-right: 6rem;
}
.serif-font {
  	font-family: 'Merriweather', serif;
}
.very-serif-font { 
	font-family: 'Playfair Display', serif;
}
h1 {
	font-weight: 700;
	font-size: 4em;
}
h1.odometer {
	font-size: 6rem;
}
h2 {
	font-size: 2.5rem;
}
h3 {
	font-size: 1.8rem;
}
h3 i {
	font-size: 1em !important;
	position: relative;
	top: 0.15em;
}
h4 {
  	font-size: 1.3rem;
}
h4 i {
	font-size: 1.2rem !important;
	position: relative;
	top: 0.18em;
}
.primary-color {
  	color: #430099;
}
.secondary-color {
  	color: #ff3f34;
}
.bg-darker {
	background-color: #333;
}
::-moz-selection {
	color: #ff3f34;
	background: rgba(255, 63, 52,0.05);
}
::selection {
	color: #ff3f34;
	background: rgba(255, 63, 52,0.05);
}
a {
  	color: #ff3f34;
}
a.contact-link {
	color: #333;
}
a:hover, a:focus, a:active {
	color: #430099;
}
button a:hover, button a:focus, button a:active {
	text-decoration: none;
}
html, .contact {
	--scrollbarBG: #eee;
	--thumbBG: #aaa;
	--thumbHoverBG: #888;
}
body::-webkit-scrollbar, .contact::-webkit-scrollbar {
 	width: 8px;
}
body, .contact {
 	scrollbar-width: thin;
 	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track, .contact::-webkit-scrollbar-track {
  	background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb, .contact::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 6px;
	border: 1px solid var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb:hover, .contact::-webkit-scrollbar-thumb:hover {
 	 background-color: var(--thumbHoverBG) ;
}
button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}
button:focus {
 	outline: none;
}
button.button-with-arrow {
	height: 3rem;
}
button.button-with-arrow a, button.button-with-arrow div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
button.button-with-arrow .circle {
	-webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	-o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: #282936;
	border-radius: 1.625rem;
}
button.button-with-arrow.button-with-arrow-white .circle {
	background: #ffffff;
}
button.button-with-arrow  .circle .icon {
	-webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	-o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}
button.button-with-arrow.button-with-arrow-white .circle .icon {
	background: #282936;
}
button.button-with-arrow  .circle .icon.arrow {
	-webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	-o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}
button.button-with-arrow .circle .icon.arrow::before {
	position: absolute;
	content: '';
	top: -0.25rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	-webkit-transition: border 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	-o-transition: border 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	transition: border 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
button.button-with-arrow.button-with-arrow-white .circle .icon.arrow::before {
	border-top: 0.125rem solid #282936;
	border-right: 0.125rem solid #282936;
}
button.button-with-arrow .button-text {
	-webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	-o-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	margin: 0 2rem 0 4rem;
	color: #282936;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	text-transform: uppercase;
	display: block;
	position: relative;
}
button.button-with-arrow.button-with-arrow-white .button-text {
	color: #fff;
}
button.button-with-arrow:hover .circle {
	width: 100%;
	background: #430099;
}
button.button-with-arrow.button-with-arrow-white:hover .circle {
	background: #ff3f34;
}
button.button-with-arrow:hover .circle .icon.arrow {
	background: #fff;
	-webkit-transform: translate(1rem, 0);
	-ms-transform: translate(1rem, 0);
	    transform: translate(1rem, 0);
}
button.button-with-arrow.button-with-arrow-white:hover .circle .icon.arrow {
	background: #fff;
}
button.button-with-arrow.button-with-arrow-white:hover .circle .icon.arrow::before {
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
}
button.button-with-arrow:hover .button-text {
  	color: #fff;
}
button.button-with-arrow.button-with-arrow-white:hover .button-text {
	color: #fff;
}
.top-right-logo {
	background: url("../img/logo-circle.svg");
	position: absolute;
	top: 0;
	right: 0;
	width: 20rem;
	height: 20rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 4rem -4rem;
}
.page-title-col {
	padding-right: 20rem;
}
.footer-right {
	border-left: 1px solid white;
	padding-left: 3rem;
}
/**************************************** General End ****************************************/

/**************************************** Home Load Animation Start ****************************************/
.home-load-animation {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #083e62;
	z-index: 2000;
}
.home-load-animation h1 {
	font-size: 7rem;;
}
.home-load-animation .logo {
	height: 8.5rem;
	margin-left: 3rem;
	margin-bottom: 1.5rem;
}


.loader {
    display: inline-block;
	position: relative;
	width: 250px;
    height: 250px;
}
.left,
.right {
    margin-top: -250px;
    margin-left: -250px;
    position: absolute;
    clip: rect(0, 500px, 500px, 250px);
}
.right {
    clip: rect(0px, 250px, 500px, 0px);
}
.left span,
.right span {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    position: absolute;
    border: 3px solid #fff;
}
.left span {
    clip: rect(0px, 250px, 500px, 0px);
    -webkit-animation: rotate-left 5s infinite linear forwards;
    animation: rotate-left 5s infinite linear forwards;
}
.right span {
    clip: rect(0, 500px, 500px, 250px);
    -webkit-animation: rotate-right 5s infinite linear forwards;
    animation: rotate-right 5s infinite linear forwards;
}
/* rotate-left */
@-webkit-keyframes rotate-left {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@keyframes rotate-left {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
    100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
/* rotate-right */
@-webkit-keyframes rotate-right {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@keyframes rotate-right {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
/**************************************** Home Load Animation End ****************************************/

/**************************************** Load Animation Start ****************************************/
.load-animation {
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	width: 142vmax;
	height: 142vmax;
	z-index: -1;
}
.load-animation.load-in, .load-animation.load-out {
  	z-index: 2000;
}
.load-animation .load-animation-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	border-radius: 50%;
}
.load-animation.load-in .load-animation-circle {
  	-webkit-transition: border-width 0.6s ease-out;
  	-o-transition: border-width 0.6s ease-out;
  	transition: border-width 0.6s ease-out;
}
.load-animation.load-out .load-animation-circle {
  	-webkit-transition: border-width 0.6s ease-in;
  	-o-transition: border-width 0.6s ease-in;
  	transition: border-width 0.6s ease-in;
}
.load-animation .load-animation-circle.circle-1 {
	border: 0vmax solid #430099;
	z-index: 1;
}
.load-animation .load-animation-circle.circle-2 {
	border: 0vmax solid #333;
	z-index: 2;
}
.load-animation.load-in .load-animation-circle.circle-1 {
  	display: none;
}
.load-animation.load-out .load-animation-circle.circle-2 {
 	 -webkit-transition-delay: 0.2s;
 	      -o-transition-delay: 0.2s;
 	         transition-delay: 0.2s;
}
.load-animation.pre-load-in .load-animation-circle, .load-animation.load-out .load-animation-circle {
 	 border-width: 71vmax;
}
div.load-overlay-item {
	display: inline-block;
}
.load-overlay-item {
	position: relative;
}
.load-overlay {
	position: absolute;
	left: 0;
	right: 100%;
	height: 100%;
	background: #eee;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.load-overlay-item-dark .load-overlay {
	background: #636e72;
}
.load-overlay.show {
	right: 0;
}
.load-overlay.hide {
	left: 100%;
}
.load-fade-item {
	opacity: 0;
	-webkit-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.load-fade-item.show {
	opacity: 1;
}

/**************************************** Load Animation End ****************************************/

/**************************************** Navbar Start ****************************************/
/* Nav Back Link Start */
nav > a {
	position: absolute;
	top: 3rem;
	left: 5.6rem;
	z-index: 5;
	padding: 0;
	border: none;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	vertical-align: middle;
	-webkit-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	font-weight: 700;
	color: #333;
}
nav > a::after {
	content: "";
	position: absolute;
	margin-bottom: -0.4rem;
	bottom: 0;
	right: 0;
	height: 2px;
	opacity: 0.8;
	width: 0;
	background: #333;
	-webkit-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}
nav > a:hover, nav > a:focus, nav > a:active {
	color: #333;
	opacity: 0.8;
	text-decoration: none;
}
nav > a:hover::after, nav > a:focus::after, nav > a:active::after  {
	width: calc(100% - 1.5rem);
}
/* Nav Back Link End */

/* Nav Button Start */
nav button {
	position: fixed;
	top: 4vw;
	left: 4vw;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	z-index: 5;
	padding: 0;
	border: none;
	display: inline-block;
	border-radius:  50%;
	height: 70px;
	width: 70px;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
nav button:hover {
 	background: #eee;
}
nav button .icon-bar-wrapper {
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: 33px;
}
nav button .icon-bar {
	width: 30px; 
	height: 2px;
	border-radius: 3px;
	background-color: #333;
	display: block;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
nav button .icon-bar:nth-child(2) {
	width: 20px;
}
nav button .icon-bar:nth-child(3) {
	width: 10px;
}
nav button .icon-bar:nth-child(2), nav button .icon-bar:nth-child(3) {
  	margin-top: 7px;
}
nav button:hover .icon-bar {
 	width: 33px;
}

nav.hero-style button {
	opacity: 1;
	visibility: visible;
}
nav.hero-style.show-logo button {
	opacity: 0;
	visibility: hidden;
}
nav.hero-style .logo {
	opacity: 0;
	position: fixed;
	display: none;
}
nav.hero-style.show-logo .logo {
	display: block;
	top: 2vw;
	left: 2vw;
	opacity: 1;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
nav.hero-single-style.show-logo .logo {
	z-index: 2;
}
nav.hero-style.show-logo .logo img {
	height: 3rem;
}
nav.hero-style.white-nav button .icon-bar {
	background-color: #f8f9fa;
}
nav.hero-style.white-nav button:hover {
	background: none;
}
nav.hero-style.white-nav .dark-button .icon-bar {
	background-color: #333;
}
nav.hero-style.white-nav .dark-button:hover {
	background: #eee;
}

/* Nav Button End */
/* Nav Drawer Start */
nav .drawer {
	height: 100%;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	padding: 9rem 6rem 3rem 3rem;
	padding-left: calc(4vw - 1rem);
	z-index: 4;
}
nav .drawer.show {
 	-webkit-transform: translateX(0);
 	    -ms-transform: translateX(0);
 	        transform: translateX(0);
}
nav .drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav .drawer ul li {
	margin-bottom: 1em;
	font-size: 1.5rem;
}
nav .drawer ul li a {
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	color: #999;
	position: relative;
	line-height: 0;
}
nav .drawer ul li a > span {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
nav .drawer ul li a.active, nav .drawer ul li a:hover, nav .drawer ul li a:active, nav .drawer ul li a:focus {
	color: #333;
	text-decoration: none;
}
nav .drawer ul li a.active > span, nav .drawer ul li a:hover > span, nav .drawer ul li a:active > span, nav .drawer ul li a:focus > span {
	opacity: 1;
}
/* Nav Drawer End */
/* Nav Overlay Start */
nav .overlay {
	position: fixed;
	visibility: hidden;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: none;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 3;
}
nav .overlay.show {
	visibility: visible;
	background-color: rgba(240, 240, 240, 0.6);
}
/* Nav Overlay End */
/**************************************** Navbar End ****************************************/

/**************************************** Homepage Start ****************************************/
/* Hero Start */
.hero {
	height: 100vh;
	width: 100vw;
	margin: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	z-index: 1;
}
.hero.fade {
	opacity: 0;
	z-index: -1;
}
.hero h1 {
	font-size: 7rem;
	margin-bottom: 3rem;
}
.hero .row {
	z-index: 5;
}
.hero-project {
	opacity: 0;
	height: 100%;
	width: 100%;
    position: absolute;
    background-position: center top;
	background-size: cover;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.hero-project.show {
	opacity: 1;
}
.hero-project-overlay {
	z-index: 4;
	background: rgba(0,0,0,0.5);
}
.hero-project-1 {
	background-image: url("../img/hero/project-1.jpg");
	z-index: 3;
}
.hero-project-2 {
	background-image: url("../img/hero/project-2.jpg");
	z-index: 2;
}
.hero-project-3 {
	background-image: url("../img/hero/project-3.jpg");
	z-index: 1;
}
.hero-text {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	display: none;
}
.hero-text.show {
	opacity: 1;
	display: inline-block;
}
.hero .row:last-child {
  	padding-bottom: 5vh;
}
.hero-arrow {
	position: absolute;
	cursor: pointer;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 6;
	opacity: 0.8;
	-webkit-transition: opacity 0.15s ease-in-out;
	-o-transition: opacity 0.15s ease-in-out;
	transition: opacity 0.15s ease-in-out;
	visibility: visible;
	line-height: 1;
}
.hero-arrow:hover {
	opacity: 1;
}
.hero-arrow.hide {
	opacity: 0;
	visibility: hidden;
}
.hero-arrow-up {
	top: 1rem;
}
.hero-arrow-down {
	bottom: 1rem;
}
.hero-arrow i {
	font-size: 2.5rem;
}
.below-hero {
	margin-top: 225vh;
	height: 50vh;
}
/* Hero End */
/* Expertise Start */
.home-expertise-column {
	padding: 2rem 3rem;
}
.home-expertise-item {
	-webkit-box-shadow: 0 2.5rem 3rem 0.1rem rgba(0,0,0,0.1);
	        box-shadow: 0 2.5rem 3rem 0.1rem rgba(0,0,0,0.1);
	height: 100%;
	background: white;
	padding: 3rem;
}
.home-expertise-item .col-md-6 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.home-expertise-item h3 {
	font-weight: 700;
}
/* Expertise End */
/* Difference Start */
.cd-title {
	position: relative;
	height: 160px;
	line-height: 230px;
	text-align: center;
}
.cd-title h1 {
	font-size: 2.4rem;
	font-weight: 700;
}
.cd-words-wrapper-container {
	width: 4.5em;
	display: inline-block;
}
.cd-words-wrapper {
	display: inline-block;
	position: relative;
	text-align: left;
}
.cd-words-wrapper i {
  	font-style: normal;
}
.cd-words-wrapper b {
	display: inline-block;
	position: absolute;
	white-space: nowrap;
	font-family: inherit;
	left: 0;
	top: 0;
}
.cd-words-wrapper b.is-visible {
  	position: relative;
}
.no-js .cd-words-wrapper b {
  	opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  	opacity: 1;
}
.cd-headline.type .cd-words-wrapper {
	vertical-align: top;
	overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
	/* vertical bar */
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	bottom: auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	height: 90%;
	width: 1px;
	background: #333;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
	-webkit-animation: cd-pulse 1s infinite;
	animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  	background: rgba(255, 63, 52,0.05);
}
.cd-headline.type .cd-words-wrapper.selected::after {
  	visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  	color: #ff3f34;
}
.cd-headline.type b {
  	visibility: hidden;
}
.cd-headline.type b.is-visible {
  	visibility: inherit;
}
.cd-headline.type i {
	position: absolute;
	visibility: hidden;
	font-family: inherit;
}
.cd-headline.type i.in {
	position: relative;
	visibility: inherit;
}

@-webkit-keyframes cd-pulse {
	0% {
		-webkit-transform: translateY(-50%) scale(1);
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-50%) scale(0.9);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(-50%) scale(0);
		opacity: 0;
	}
}
@keyframes cd-pulse {
	0% {
		-webkit-transform: translateY(-50%) scale(1);
		-ms-transform: translateY(-50%) scale(1);
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-50%) scale(0.9);
		-ms-transform: translateY(-50%) scale(0.9);
		transform: translateY(-50%) scale(0.9);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(-50%) scale(0);
		-ms-transform: translateY(-50%) scale(0);
		transform: translateY(-50%) scale(0);
		opacity: 0;
	}
}
.home-difference-image {
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translate(-5%, -50%);
	    -ms-transform: translate(-5%, -50%);
	        transform: translate(-5%, -50%);
	height: 85%;
	max-width: 90%;
	-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	-webkit-animation: home-difference-bob 4s infinite ease-in-out;
	        animation: home-difference-bob 4s infinite ease-in-out;
}
.home-difference-bg {
	background-size: cover;
	background-color: #C3C2E8;
	width: 100%;
	height: 100%;
}
.home-difference-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
}
@-webkit-keyframes home-difference-bob {
	0% {
		-webkit-transform: translate(-5%, -49%);
		        transform: translate(-5%, -49%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
	50% {
		-webkit-transform: translate(-5.5%, -51%);
		        transform: translate(-5.5%, -51%);
		-webkit-filter: drop-shadow( 0.15rem 3rem 0.15rem rgba(0, 0, 0, 0.07));
		filter: drop-shadow( 0.15rem 2rem 0.15rem rgba(0, 0, 0, 0.07));
	}
	100% {
		-webkit-transform: translate(-5%, -49%);
		        transform: translate(-5%, -49%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
}
@keyframes home-difference-bob {
	0% {
		-webkit-transform: translate(-5%, -49%);
		        transform: translate(-5%, -49%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
	50% {
		-webkit-transform: translate(-5.5%, -51%);
		        transform: translate(-5.5%, -51%);
		-webkit-filter: drop-shadow( 0.15rem 3rem 0.15rem rgba(0, 0, 0, 0.07));
		filter: drop-shadow( 0.15rem 2rem 0.15rem rgba(0, 0, 0, 0.07));
	}
	100% {
		-webkit-transform: translate(-5%, -49%);
		        transform: translate(-5%, -49%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
}
/* Difference End */

/* Portfolio Start */
.home-portfolio-image {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-40%, -50%);
	    -ms-transform: translate(-40%, -50%);
	        transform: translate(-40%, -50%);
	height: 55%;
	max-width: 75%;
	-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	-webkit-animation: home-portfolio-bob 4s infinite ease-in-out;
	        animation: home-portfolio-bob 4s infinite ease-in-out;
}
.home-portfolio-bg {
	position: absolute;
	height: 80%;
	top: 50%;
	left: 50%;
	max-width: 75%;
	-webkit-transform: translate(-55%, -50%);
	    -ms-transform: translate(-55%, -50%);
	        transform: translate(-55%, -50%);
}
@-webkit-keyframes home-portfolio-bob {
	0% {
		-webkit-transform: translate(-42%, -44%);
		        transform: translate(-42%, -44%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
	50% {
		-webkit-transform: translate(-42.5%, -46%);
		        transform: translate(-42.5%, -46%);
		-webkit-filter: drop-shadow( 0.15rem 3rem 0.15rem rgba(0, 0, 0, 0.07));
		filter: drop-shadow( 0.15rem 2rem 0.15rem rgba(0, 0, 0, 0.07));
	}
	100% {
		-webkit-transform: translate(-42%, -44%);
		        transform: translate(-42%, -44%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
}
@keyframes home-portfolio-bob {
	0% {
		-webkit-transform: translate(-42%, -44%);
		        transform: translate(-42%, -44%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
	50% {
		-webkit-transform: translate(-42.5%, -46%);
		        transform: translate(-42.5%, -46%);
		-webkit-filter: drop-shadow( 0.15rem 3rem 0.15rem rgba(0, 0, 0, 0.07));
		filter: drop-shadow( 0.15rem 2rem 0.15rem rgba(0, 0, 0, 0.07));
	}
	100% {
		-webkit-transform: translate(-42%, -44%);
		        transform: translate(-42%, -44%);
		-webkit-filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
		filter: drop-shadow( 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.1));
	}
}
/* Portfolio End */

/**************************************** Homepage End ****************************************/

/**************************************** For All Pages (Excluding Homepage) Start ****************************************/
.sticky-fixed {
	position: fixed;
	top: 120px;
}
.sticky-end {
	position: absolute;
	bottom: 120px;
}
/**************************************** For All Pages (Excluding Homepage) End ****************************************/

/**************************************** About Us Page Start ****************************************/
.partner-logo {
	max-width: 100%;
	max-height: 6rem;
	-o-object-fit: contain; /* maintain aspect ratio (opera) */
	object-fit: contain; /* maintain aspect ratio (other browsers) */
	margin: 0 2.5rem 4rem 2.5rem;
}
.award img {
	width: 100%;
}
/**************************************** About Us Page End ****************************************/

/**************************************** Development Page Start ****************************************/
.pills a {
	padding: 0 1rem;
	border-right: 2px solid #cccaec;
	transform: translateX(-1rem);
	color: #333;
}
.pills a:first-child {
	padding-left: 0;
}
.pills a:last-child {
	border-right: none;
}
.pills > a > span {
	position: relative;
}
.pills > a > span::after {
	content: "";
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 0;
	height: 2px;
	background: #430099;
	transition: width 0.3s ease-in-out;
}
.pills a:hover, .pills a:active, .pills a:focus {
	text-decoration: none;
}
.pills a:hover span::after {
	width: 100%;
}
.venn-container {
	min-height: 40rem;
}
.venn {
	border: 2px dashed #ccc;
	text-align: center;
	border-radius: 50%;
	width: 20rem;
	height: 20rem;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -5rem;
	color: #333;
}
.venn-1 {
	top: 0;
	left: 10rem;
}
.venn-2 {
	top: 10rem;
	left: 0;
}
.venn-3 {
	top: 10rem;
	left: 20rem;
}
.venn-4 {
	top: 20rem;
	left: 10rem;
}
.venn:hover, .venn:active, .venn:focus {
	color: #333;
}
.venn:hover {
	cursor: pointer;
	text-decoration: none;
}
.venn-1:hover {
	background: rgba(67, 0, 153, 0.05);
}
.venn-2:hover {
	background: rgba(24, 220, 255, 0.05);
}
.venn-3:hover {
	background: rgba(255, 175, 64, 0.05)
}
.venn-4:hover {
	background: rgba(95, 255, 63, 0.05)
}
.hexagon {
	position: relative;
	width: 15rem; 
	height: 8.6605rem;
	background-color: #64C7CC;
	margin: 4.33rem 4.33rem 4.33rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 1rem;
}
.hexagon:before,
.hexagon:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 7.5rem solid transparent;
	border-right: 7.5rem solid transparent;
	left: 0;
}
.hexagon:before {
	bottom: 100%;
	border-bottom: 4.33rem solid #64C7CC;
}
.hexagon:after {
	top: 100%;
	width: 0;
	border-top: 4.33rem solid #64C7CC;
}
.hexagon > p {
	display: none;
}
.development-graphic {
	-webkit-filter: drop-shadow( 0.1rem 0.5rem 0.5rem rgba(0, 0, 0, 0.12));
	filter: drop-shadow( 0.1rem 0.5rem 0.5rem rgba(0, 0, 0, 0.12));
	max-width: 100%;
}
/**************************************** Development Page End ****************************************/

/**************************************** Collaboration Page Start ****************************************/
.hero-single {
	background-size: cover;
	background-position: center;
}
.hero-single-70 {
	height: 70vh;
}
.below-hero-single {
	margin-top: 65vh;
	height: auto;
}
.text-grey {
	opacity: 0.7
}
.odometer {
	font-family: 'Muli', sans-serif !important;
	font-weight: 300;
}
.odometer-digit {
	background: #ecf4fd;
	color: #1f8cf7;
	border-radius: 0.3rem;
	margin: 0 0.2rem;
}
.odometer-digit, .odometer-ribbon {
	padding: 0.8rem 1.2rem 0.6rem;
}
.odometer-formatting-mark {
	display: none;
}
.youtube-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	-webkit-box-shadow: 0 2.5rem 3rem 0.1rem rgba(0,0,0,0.1);
	        box-shadow: 0 2.5rem 3rem 0.1rem rgba(0,0,0,0.1);
}
.youtube-embed iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.workplace-back {
	margin-left: -0.3rem;
}
.workplace-slide {
	transition: all 0.3s ease-in-out;
	padding: 1.5rem 3rem;
}
.workplace-slide.animate {
	opacity: 0;
	visibility: hidden;
}
.workplace-slide-left.animate {
	transform: translateX(-30%);
}
.workplace-slide-right.animate {
	transform: translateX(30%);
}
.workplace-back > i {
	vertical-align: bottom;
}
.workplace-back::after {
	content: "";
	position: absolute;
	margin-bottom: -0.4rem;
	bottom: 0;
	right: 0;
	height: 2px;
	opacity: 0.8;
	width: 0;
	background: #333;
	-webkit-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}
.workplace-back:hover, .workplace-back:focus, .workplace-back:active {
	color: #333;
	opacity: 0.8;
	text-decoration: none;
}
.workplace-back:hover::after, .workplace-back:focus::after, .workplace-back:active::after  {
	width: calc(100% - 1.5rem);
}
.workplace-details-height-adjust {
	transition: all 0.5s ease-in-out;
	max-height: 1500px;
}
.workplace-details {
	margin-top: 4.5rem;
	visibility: hidden;
	position: absolute;
	width: 100%;
	bottom: 0;
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s ease-in-out;
}
.workplace-details.animate {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}
.workplace-details-inner > .row > .col-lg-4:nth-child(3n + 1) {
	padding: 0 1rem 1rem 15px;
}
.workplace-details-inner > .row > .col-lg-4:nth-child(3n + 2) {
	padding: 0 0.5rem 1rem 0.5rem;
}
.workplace-details-inner > .row > .col-lg-4:nth-child(3n) {
	padding: 0 15px 1rem 0.5rem;
}
.workplace-details-inner h5 {
	font-weight: 700;
}
/**************************************** Collaboration Page End ****************************************/

/**************************************** Portfolio Page Start ****************************************/
section {
	z-index: 4;
}
.portfolio-top .row {
	min-height: 80vh;
	padding: 7rem 0;
}
.portfolio-triangle-1 {
	position: absolute;
	right: 0;
	top: 0;
	width: 0; 
	border-bottom: 100vh solid transparent;
	border-right: 110vh solid #430099;
	opacity: 0.3;
	z-index: 0;
}
.portfolio-triangle-2 {
	position: absolute;
	right: 0;
	top: 0;
	width: 0; 
	height: 0; 
	border-top: 100vh solid transparent;
	border-right: 70vh solid #b8d4f3;
	opacity: 0.3;
	z-index: 0;
}
.portfolio-card-columns {
	-webkit-column-count: 2;
	   -moz-column-count: 2;
	        column-count: 2;
	-webkit-column-gap: 10%;
	   -moz-column-gap: 10%;
	        column-gap: 10%;
	margin-top: 12rem;
}
.portfolio-item-card {
	border: none;
	background: none;
	padding: 5rem 2rem 5rem 0;
	margin-top: 6rem;
	-webkit-transform: translateY(-8rem);
	    -ms-transform: translateY(-8rem);
	        transform: translateY(-8rem);
}
.portfolio-item-card:first-child {
	margin-top: -6rem;
}
.portfolio-item {
	overflow: visible;
}
.portfolio-item img {
	width: 90%;
	-webkit-box-shadow: 0 4rem 5rem 0.7rem rgba(0,0,0,0.15);
	        box-shadow: 0 4rem 5rem 0.7rem rgba(0,0,0,0.15);
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 0.3rem;
}
.portfolio-item-text {
	position: absolute;
	border-radius: 0.2rem;
	min-width: 50%;
	max-width: 80%;
	bottom: 0;
	right: 0;
	padding: 1.5rem;
	color: #333;
	background: #fff;
	-webkit-box-shadow: 0 2rem 5rem 0.3rem rgba(0,0,0,0.15);
	        box-shadow: 0 2rem 5rem 0.3rem rgba(0,0,0,0.15);
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-item:hover, .portfolio-item:active, .portfolio-item:focus {
	cursor: pointer;
	color: initial;
}
.portfolio-item:hover img {
	-webkit-box-shadow: 0 0.3rem 0.4rem 0.3rem rgba(0,0,0,0.03);
	        box-shadow: 0 0.3rem 0.4rem 0.3rem rgba(0,0,0,0.03);
	-webkit-transform: translateY(-0.6rem);
	    -ms-transform: translateY(-0.6rem);
	        transform: translateY(-0.6rem);
}
.portfolio-item:hover .portfolio-item-text {
	-webkit-box-shadow: 0 0.2rem 0.4rem 0.3rem rgba(0,0,0,0.03);
	        box-shadow: 0 0.2rem 0.4rem 0.3rem rgba(0,0,0,0.03);
	-webkit-transform: translateY(-1.2rem);
	    -ms-transform: translateY(-1.2rem);
	        transform: translateY(-1.2rem);
}
.portfolio-icon > .load-overlay-item {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	vertical-align: middle;
}
.portfolio-icon i {
	margin-right: 0.7em;
}
.portfoio-top-screenshot {
	padding: 0 3rem;
}
.portfoio-top-screenshot {
	max-height: 80vh;
}
.portfoio-top-screenshot img {
	max-height: 100%;
}
.portfolio-screenshot {
	max-width: 100%;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.portfolio-screenshot.with-shadow {
	-webkit-box-shadow: 0 0 7rem 1rem rgba(0,0,0,0.07);
	        box-shadow: 0 0 7rem 1rem rgba(0,0,0,0.07);
}

/**************************************** Portfolio Page End ****************************************/

/**************************************** Contact Start ****************************************/
.contact {
	position: fixed;
	width: 100%;
	max-width: 576px;
	height: 100%;
	overflow: auto;
	right: 0;
	top: 0;
	transform: translateX(100%);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 12;
}

.contact.show {
	transform: translateX(0);
}

.contact-close-button {
	background: #333;
	color: #fff;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	position: absolute;
	top: 2rem;
	right: 2rem;
	transition: all 0.15s ease-in-out;
}

.contact-close-button:hover, .contact-close-button:active, .contact-close-button:focus {
	background-color: #2D0067;
	opacity: 0.9;
}

.contact-close-button > i {
	line-height: inherit;
	font-size: 2rem;
}

.contact-text {
	padding-right: 4rem;
}

.spamblocker {
	display: none;
}

.contact_success, .contact_failure {
	display: none;
	font-weight: 700;
}

.contact_success {
	color: #27ae60;
}

.contact_failure {
	color: #e74c3c;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group > input, .form-label-group > textarea {
	height: auto;
	padding: 0.75rem;
	border: 1px solid #ccc;
	color: #333;
	margin-bottom: 1.1rem;
}

.form-label-group > input:focus, .form-label-group > textarea:focus {
	border: 1px solid #aaa;
	-webkit-box-shadow: none;
			box-shadow: none;
	color: #282936;
}

.form-label-group > label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	margin-bottom: 0; /* Override default `<label>` margin */
	line-height: 1.5;
	padding: 0.75rem;
	color: #777;
	border: 1px solid transparent;
	transition: all .1s ease-in-out;
	font-weight: 700;
}

.form-label-group input::-webkit-input-placeholder, .form-label-group textarea::-webkit-input-placeholder { color: transparent; }
.form-label-group input:-ms-input-placeholder, .form-label-group textarea:-ms-input-placeholder { color: transparent; }
.form-label-group input::-ms-input-placeholder, .form-label-group textarea::-ms-input-placeholder { color: transparent; }
.form-label-group input::-moz-placeholder, .form-label-group textarea::-moz-placeholder { color: transparent; }
.form-label-group input::placeholder, .form-label-group textarea::placeholder  { color: transparent; }

.form-label-group input:not(:placeholder-shown) ~ label, .form-label-group textarea:not(:placeholder-shown) ~ label {
	top: -0.5rem;
	left: 0.35rem;
	padding: 0 0.4rem;
	font-size: 0.75rem;
	color: #282936;
	background: #fff;
}

textarea {
  	min-height: 3em;
}

button.btn.btn-primary {
	padding: 0.75rem 2rem;
	border-radius: 3rem;
	margin-top: 0.5rem;
	background: #430099;
	font-weight: 700;
	border: none;
}
button.btn.btn-primary:hover, button.btn.btn-primary:active {
	background: #2D0067;
}
button.btn.btn-primary:focus {
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	background: #6229AB !important;
}
/* Contact Overlay Start */
.contact-overlay {
	position: fixed;
	visibility: hidden;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: none;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 11;
}
.contact-overlay.show {
	visibility: visible;
	background-color: rgba(240, 240, 240, 0.6);
}
/* Contact Overlay End */
/**************************************** Contact End ****************************************/

/**************************************** Responsive Start ****************************************/
@media (max-width: 1549px), (max-height: 680px) { /* xl but not hd */
	.hero h1 {
		font-size: 5.5rem;
	}
	.hero h3 {
		font-size: 1.7rem;
	}
	.partner-logo {
		margin: 0 2rem 2rem 2rem;
	}
}
@media (max-width: 1199px), (max-height: 580px) { /* lg */
	html {
		font-size: 15px;
	}
	.padding-2 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .padding-3 {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
	.portfoio-top-screenshot {
		margin-top: 3rem;
		padding: 0 15px;
	}
	.partner-logo {
		margin: 0 2rem 2rem 2rem;
	}
}
@media (min-width: 992px) and (max-width: 1500px) {
	.home-expertise-item .col-md-6 {
		display: block;
	}
}
@media (max-width: 1100px) and (max-height: 620px) {
	html {
		font-size: 14px;
	}
}
@media (max-width: 991px) { /* md */
	h2 {
		font-size: 2rem;
	}
	.hero h1 {
		font-size: 4.5rem;
		margin-bottom: 1.8rem;
	}
	.hero h1 .load-overlay-item {
		width: 100%;
	}
	.hero .hero-text {
		margin-top: 1.5rem;
	}
	.md-mb-5 {
		margin-bottom: 3rem !important;
	}
	nav button, nav button:hover {
		top: 3rem;
		left: 3rem;
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
		background: #eee !important;
	}
	nav button .icon-bar {
		background: #333 !important;
	}
	nav.hero-style.show-logo button {
		visibility: visible;
		opacity: 1;
	}
	nav.hero-style.show-logo .logo {
		left: auto;
		top: 3rem;
		right: 3rem;
	}
	nav.hero-style.show-logo .logo img {
		height: 60px;
		margin-top: 5px;
	}
	nav .drawer {
		width: 100%;
		padding-left: 0;
		padding-right: 0; 
		text-align: center;
	}
	.container-fluid {
		overflow: hidden;
	}
	.container-fluid > .row {
		padding-left: 6rem;
		padding-right: 6rem;
	}
	.container-fluid.side-padding {
		padding-left: 15px;
		padding-right: 15px;
	}
	.padding-2 {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.padding-3 {
		padding-top: 7.5rem;
		padding-bottom: 7.5rem;
    }
    .home-graphic-col {
        height: 70vw;
    }
    .home-graphic-col-text {
        padding-top: 0;
    }
    .home-difference-image {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: none;
        height: 70%;
    }
    .home-portfolio-image {
        top: 50%;
        left: 50%;
        transform: translate(-45%, -50%);
        animation: none;
    }
    .home-difference-bg {
        display: none;
    }
	.page-title-col {
		padding-right: 14rem;
	}
	.page-title-col {
		padding-top: 50px;
	}
	.partner-logo {
		margin: 0 1.7rem 1.7rem 1.7rem;
	}
	.portfolio-card-columns {
		-webkit-column-count: 1;
		   -moz-column-count: 1;
		        column-count: 1;
		margin-top: 0;
	}
	.portfolio-item-card:first-child {
		margin-top: 0;
	}
	.portfolio-item-card {
		-webkit-transform: translateY(0);
		    -ms-transform: translateY(0);
		        transform: translateY(0);
		padding-top: 0;
	}
	.workplace-slide {
		border-right: none !important;
		padding: 0 15px;
	}
	.workplace-slide:first-child {
		padding-bottom: 3rem;
		margin-bottom: 3rem;
		border-bottom: 1px solid #dee2e6;
	}
	.workplace-details {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		margin-top: 0;
	}
	.workplace-details-inner {
		height: 100%;
		overflow-y: auto;
	}
	.workplace-details-inner > .row > .col-lg-4:nth-child(3n + 1), .workplace-details-inner > .row > .col-lg-4:nth-child(3n + 2), .workplace-details-inner > .row > .col-lg-4:nth-child(3n) {
		padding: 0;
	}
	.workplace-details-inner > .row > .col-lg-4:nth-child(2n + 1) {
		padding: 0 1rem 1rem 15px;
	}
	.workplace-details-inner > .row > .col-lg-4:nth-child(2n) {
		padding: 0 15px 1rem 1rem;
	}
	.pills {
		display: none;
	}
	.venn-container {
		min-height: 38rem;
		transform: translateY(8rem);
	}
}
@media (max-width: 767px), (max-width: 991px) and (max-height: 580px) { /* sm */
	.hero h1 {
		font-size: 4rem;
		margin-bottom: 1rem;
	}
	.hero h3 {
		font-size: 1.5rem;
	}
	nav > a {
		left: 2.6rem;
	}
	.container-fluid > .row {
		padding-left: 3rem;
		padding-right: 3rem;
	}
    .home-graphic-col {
        height: 80vw;
	}
	h1.odometer {
		font-size: 3.8rem;
	}
	.venn-container {
		min-height: 30rem;
	}
	.venn {
		width: 15rem;
		height: 15rem;
	}
	.venn-1 {
		top: 0;
		left: 7.5rem;
	}
	.venn-2 {
		top: 7.5rem;
		left: 0;
	}
	.venn-3 {
		top: 7.5rem;
		left: 15rem;
	}
	.venn-4 {
		top: 15rem;
		left: 7.5rem;
	}
}
@media (max-width: 575px), (max-width: 690px) and (max-height: 580px) { /* xs */
	h1 {
		font-size: 2.5rem;
	}
	h2 {
		font-size: 1.8rem;
	}
	nav > a {
		left: 1.6rem;
	}
	.text-justify {
		text-align: left !important;
	}
	.padding-1 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.container > .row, .container-fluid > .row {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.hero h1 {
		font-size: 3rem;
		margin-bottom: 0.5rem;
		overflow-wrap: break-word;
	}
	.hero h3 {
		font-size: 1.3rem;
	}
	.home-expertise-column {
		padding: 3rem 0;
	}
	.home-expertise-item {
		-webkit-box-shadow: none;
		        box-shadow: none;
		background: none;
		padding: 0;
		text-align: center;
	}
	.home-expertise-item .col-md-6 {
		padding-bottom: 2rem;
		display: block;
	}
	.home-expertise-item:not(.no-bottom-border) .col-md-6:last-child {
		border-bottom: 1px solid #ccc;
		padding-bottom: 6rem;
    }
    .home-graphic-col {
        height: 90vw;
    }
	.page-title-col {
		padding-top: 80px;
	}
	.partner-logo {
		margin: 0 0.5rem 1rem 0.5rem;
	}
	.portfolio-item-card {
		padding: 0 0 5rem 0;
	}
	.portfolio-item-text {
		padding: 1rem;
	}
	.portfolio-item img {
		width: 95%;
	}
	.portfolio-item-text h3 {
		font-size: 1.5rem;
	}
	.venn-container {
		min-height: 20rem;
	}
	.venn {
		width: 10rem;
		height: 10rem;
	}
	.venn-1 {
		top: 0;
		left: 5rem;
	}
	.venn-2 {
		top: 5rem;
		left: 0;
	}
	.venn-3 {
		top: 5rem;
		left: 10rem;
	}
	.venn-4 {
		top: 10rem;
		left: 5rem;
	}
	.award {
		border: none !important;
		margin-bottom: 2rem;
	}
	.footer-left {
		margin-bottom: 2rem;
	}
	.footer-right {
		border-left: none;
		padding: 2rem 15px 0 15px;
	}
}

@media (max-width: 440px), (max-height: 440px) { /* smaller than xs */
	nav button {
		height: 60px;
		width: 60px;
	}
	nav button, nav button:hover {
		top: 2.5rem;
		left: 2.5rem;
	}
	nav.hero-style.show-logo .logo {
		top: 2.5rem;
		right: 2.5rem;
	}
	nav.hero-style.show-logo .logo img {
		height: 50px;
	}
	.hero h1 {
		font-size: 2.4rem;
	}
	.hero h3 {
		font-size: 1.2rem;
	}
	h1.odometer {
		font-size: 2rem;
	}
	.odometer-digit, .odometer-ribbon {
		padding: 0.6rem 1rem 0.4rem;
	}
}

@media (max-width: 350px) { /* super very small */
	html {
		font-size: 13px;
	}
	nav > a {
		left: 0.6rem;
	}
	.container > .row, .container-fluid > .row {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	h1.odometer {
		font-size: 1.7rem;
	}
	.odometer-digit, .odometer-ribbon {
		padding: 0.4rem 0.8rem 0.2rem;
	}
	.footer-left {
		margin-bottom: 1rem;
	}
	.footer-right {
		border-left: none;
		padding: 1rem 15px 0 15px;
	}
}


/**************************************** Responsive End ****************************************/