/**
* @author: Eywa | Harshul P Patel;
* @created: Apr 22, 2017;
* @modified: Apr 2, 2018;
* @version: 4.0;
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

html {
    font-size: 16px;
}

body {
    letter-spacing: 0;
    line-height: 1;
    margin: 0px;
    --card-width: 834px;
}   

* {
    box-sizing: border-box;
}

/* 
 * 
 * ===== Base =====
 *
 */

body {
    color: #424242;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: 300;
}

h1 {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 2rem 0 0 0;
}

h2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.1;
    margin: 2rem 0 0 0;
}

h3 {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.2;
    margin: 2rem 0 0 0;
}

h4 {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3;
    margin: 2rem 0 0 0;
}

h5 {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.4;
    margin: 2rem 0 0 0;
    text-align: justify;
}

p {
    line-height: 1.5;
    margin-bottom: 0;
    margin-top: 1.618rem;
    text-align: justify;
}

p + ul {
  -webkit-margin-before: 1em;
} 

ul {
  text-align: justify;
  -webkit-margin-before: 1em;
}

ul li {
  line-height: 1.5;
}

ul li ul {
  margin: 1rem 0;
  -webkit-padding-start: 1rem;
}

/* 
 * 
 * ===== Global Layout =====
 *
 */

.e-l-true-center {
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.e-l-img-container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: -webkit-optimize-contrast; /* Safari 6, UC Browser 9.9 */
    image-rendering: -webkit-crisp-edges; /* Safari 7+ */
    image-rendering: -moz-crisp-edges; /* Firefox 3.6+ */
    image-rendering: -o-crisp-edges; /* Opera 12 */
    /*image-rendering: pixelated; /* Chrome 41+ and Opera 26+ */
    -ms-interpolation-mode: nearest-neighbor; /* IE 7+ (non-standard property) */
}

/* Flex Grids / Containers */

.e-l-vcontainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.e-l-hcontainer {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.e-l-vcontainer--justify-center,
.e-l-hcontainer--justify-center {
    justify-content: center;
}

.e-l-hcontainer--justify-space-around,
.e-l-vcontainer--justify-space-around {
    justify-content: space-around; 
}

.e-l-hcontainer--justify-space-evenly,
.e-l-vcontainer--justify-space-evenly {
    justify-content: space-evenly; 
}

.e-l-hcontainer--justify-flex-start,
.e-l-vcontainer--justify-flex-start {
    justify-content: flex-start;
}

.e-l-hcontainer--align-flex-start,
.e-l-vcontainer--align-flex-start {
    align-items: flex-start; 
}

.e-l-hcontainer--align-flex-end,
.e-l-vcontainer--align-flex-end {
    align-items: flex-end; 
}

.e-l-hcontainer--no-wrap,
.e-l-vcontainer--no-wrap {
    flex-wrap: nowrap;
}

/* 
 * 
 * ===== Components & Components' Layouts =====
 *
 */

 /* Sections */ 

.e-sect {
    border-bottom: 0.5px solid #BDBDBD;
}

.e-l-sect {
    padding: 8vw 20vw;
    position: relative;
    z-index: 10;
}

.e-l-sect--no-vpad {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.e-sect__sect-number {
    font-family: 'Archivo Black', sans-serif;
    font-size: 125px;  
    opacity: 0.3;
}

.e-l-sect__sect-number {
    right: 4%; 
    top: 10vw;
}

.e-l-title-box__logo {
    background-image: url(../images/eywa-logo.png);
    height: 100px;
    width: 36%; 
}

.e-l-title-box__content.e-l-hcontainer {
    flex-wrap: nowrap;
    justify-content: flex-start; 
    margin-bottom: 2em;
}

.e-l-title-box__title {
    max-width: 400px;
    padding: 25px 40px;
}

.e-title-box__icon-container {
    border-right: 2px solid #76FF03;
}

.e-l-title-box__icon-container {
    box-sizing: content-box;
    height: 75px;
    padding: 5px 40px;
    width: 75px;
}

.e-l-title-box__icon {
    background-image: url(../images/handshake.png);
    height: 100%;
    width: 100%;
}

.e-l-header__icon {
    height: 90px;
    min-width: 90px;
    width: 90px;
} 

.e-l-header__eywa-e-icon {
    background-image: url('../images/eywa-e.png');
    background-size: 100%; 
}

.e-l-header__idea-icon {
    background-image: url('../images/idea.png');
    background-size: 100%; 
}

.e-l-header__cherrypick-icon {
    background-image: url('../images/captain-america.png');
    background-size: 100%; 
}

.e-l-header__key-icon {
    background-image: url('../images/key.png');
    background-size: 100%;
}

.e-l-header__product-icon {
    background-image: url('../images/product.png');
    background-size: 100%;
}

.e-l-header__investment-icon {
    background-image: url('../images/investment.png');
    background-size: 100%;
}

.e-l-header__showcase-icon {
    background-image: url('../images/showcase.png');
    background-size: 100%;
}

.e-header__content {
    color: #424242;
}

.e-l-header__content {
    padding-left: 0.71em;
}

.e-l-header__content h1 {
    padding-bottom: 0;
}

/* Partnerships */

.e-partnerships__title {
    border-bottom: 1px solid #40C4FF;
}

.e-l-partnerships__partner {
    margin: 10px 5px;
    width: 170px;
}

/* Child Entities */

.e-l-child-company {
    display: flex;    
    justify-content: flex-start;
    margin-top: 1.618rem;
    flex-direction: column;
}

.e-l-child-company__title {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.e-l-child-company__cp-icon {
    background-image: url('../images/cherrypick-icon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 36px; 
    margin-right: 5px;   
    max-width: 36px;
    width: 36px;
}

.e-l-child-company__lm-icon {
    background-image: url('../images/leadmachine-icon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 36px; 
    margin-right: 5px;   
    max-width: 36px;
    width: 36px;
}

.e-l-child-company__dd-icon {
    background-image: url('../images/digitaldrama-icon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 36px; 
    margin-right: 5px;   
    max-width: 36px;
    width: 36px;
}

/* Punch Line */

.e-punch-line {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.4;
}

.e-l-punch-line {
    margin: 3rem 0 0 0;
    padding: 0;
}

/* Stats */

.e-stats__header {
    border-bottom: 1px solid;
}
  
.e-l-stats__header {
    margin: 0 auto;
    padding-bottom: 2.5rem;
    width: 90%;
}

/* Notes */
 
.e-l-note {
    border-radius: 10px;
    margin: 1.0em 0; 
    padding: 1.1em;
}
  
/* Tint */ 

.e-l-tint {
  background-image: url("../images/bg1.png");
  opacity: 0.1;
  z-index: 1;
}

/* ClientBox */

.e-client-box {
    /* color: #9E9E9E; */
    color: #616161;
    font-size: 12px;
}

.e-l-client-box {
    background-color: #ffffff;
    border-top: solid 0.5px #E0E0E0;
    border-right: solid 0.5px #E0E0E0;
    border-bottom: solid 0.5px #E0E0E0;
    padding: 35px 0;  
    width: 33.33%;
    height: 30vh;
}

.e-l-client-box:nth-child(3n+1) {
    border-left: solid 0.5px #E0E0E0;
}

.e-l-client-box:nth-child(n+4) {
    border-top: 0;
}

.e-l-client-box__logo {
    height: 50%;
    width: 50%; 
}

.e-l-client-box__title {
    width: 50%;
}

.e-l-client-box__sub-title {
    height: auto;
    margin-top: 0.5rem;
    width: 50%;    
}
 
/* TechBox */

.e-tech-box {
    color: #9E9E9E;
    font-size: 12px;
    line-height: 1.4;
}

.e-l-tech-box {
    background-color: #ffffff;
    border-top: solid 0.5px #E0E0E0;
    border-right: solid 0.5px #E0E0E0;
    border-bottom: solid 0.5px #E0E0E0;
    width: 25%;
    height: 140px;
}

.e-l-tech-box:nth-child(4n+1) {
    border-left: solid 0.5px #E0E0E0;
}

.e-l-tech-box:nth-child(n+5) {
    border-top: 0;
}

.e-l-tech-box__logo {
    height: 45%;
    width: 100px;
    position: relative;
}

.e-l-tech-box__logo-big {
    height: 45%;
    width: 75%;
}

.e-l-tech-box__title {
    margin-top: 0.5rem;
}

/* Card */

.e-l-card {
  background-color: #FFFFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  height: auto;
  margin: 3rem 0 0 0;
  padding: 0.75em;
  width: 100%;  
}

.e-l-card h2 {
  border-bottom: 1px solid #E0E0E0;
  margin: 0 0 2% 0;
}

.e-l-card p {
    margin-top: 10px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.e-l-card hr {
    background-color: #BDBDBD;
    color: #BDBDBD;
    border: none;
    height: 1px;
}

.e-l-card .e-l-title__logo {
    height: 55px;
}

.e-l-title__logo-limit {
    width: 30%;
    margin: 0 auto;
}

.e-l-card .e-l-title__text {
    height: 42px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.e-l-title__services {
    margin-bottom: 10px;
    margin-top: 15px;
}

.e-l-service-box {
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding: 0 5px 0;
}

.e-l-service {
    background-color: #ffffff;
    height: 75px;
    justify-content: space-evenly;
}

.e-l-text__services {
    margin: 15px 0 15px;
}

.e-l-title__quick-look {
    margin-bottom: 10px;
    margin-top: 15px;
}

/* Screenshots */

.e-l-screenshots {
    height: 300px;
    /* padding-bottom: 15px; */
}

.e-l-screenshot--left {
    height: 100%;
    background-repeat: no-repeat; 
    background-position: top right; 
    /* margin-right: 5px;  */
    /* transform: perspective( 1000px ) rotateY( 30deg );  */
    /* width: 45%; */
}
 
.e-l-screenshot--right { 
    background-repeat: no-repeat;
    height:100%;  
    /* margin-left: 5px;     */
    /* transform: perspective( 1000px ) rotateY( -30deg );  */
    /* width: 45%; */
}

.e-l-screenshots {
    transform-style: preserve-3d;
}

.e-l-screenshot--left,
.e-l-screenshot--right {
    backface-visibility: hidden;
    background-position: center;
    position: absolute;
    width: 100%;
}

.e-l-screenshot--right {
    transform: rotateY(180deg);
}

.mover {
    animation: move 5s infinite;
}
  
@keyframes move {
    0% {
          transform: rotateY(0deg);
    }
    5% {
          transform: rotateY(180deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    55% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.e-l-screenshot__anam-1 {
    background-image: url('../images/anomalybyanam-showcase-1.png'); 
    background-size: contain;
}

.e-l-screenshot__anam-2 {
    background-image: url('../images/anomalybyanam-showcase-2.png'); 
    background-size: contain;
}

.e-l-screenshot__pulsepoint-1 {
    background-image: url('../images/pulsepoint-showcase-1.png'); 
    background-size: contain;
}

.e-l-screenshot__pulsepoint-2 {
    background-image: url('../images/pulsepoint-showcase-2.png'); 
    background-size: contain;
}

.e-l-screenshot__anjappar-1 {
    background-image: url('../images/anjappar-showcase-1.jpg'); 
    background-size: contain;
}

.e-l-screenshot__anjappar-2 {
    background-image: url('../images/anjappar-showcase-2.png'); 
    background-size: contain;
}

.e-l-screenshot__hsb-1 {
    background-image: url('../images/hsb-showcase-1.jpg'); 
    background-size: contain;
}

.e-l-screenshot__hsb-2 {
    background-image: url('../images/hsb-showcase-2.jpg'); 
    background-size: contain;
}

.e-l-screenshot__climacell-1 {
    background-image: url('../images/climacell-showcase-1.png'); 
    background-size: contain;
}

.e-l-screenshot__climacell-2 {
    background-image: url('../images/climacell-showcase-2.png'); 
    background-size: contain;
}

.e-l-screenshot__awrostamani-1 {
    background-image: url('../images/awrostamani-showcase-1.png'); 
    background-size: contain;
}

.e-l-screenshot__awrostamani-2 {
    background-image: url('../images/awrostamani-showcase-2.png'); 
    background-size: contain;
}

.e-l-screenshot__jumpstart-1 {
    background-image: url('../images/jumpstart-showcase-1.jpg'); 
    background-size: contain;
}

.e-l-screenshot__jumpstart-2 {
    background-image: url('../images/jumpstart-showcase-2.jpg'); 
    background-size: contain;
}

/* Table */  
    
table.e-l-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;  
}
      
table.e-l-table tr, th, td {
    border-bottom: 1px solid #F5F5F5;
    line-height: 1.5;
    padding: 0.7em;
}

table.e-l-table tr:first-child {
    border-top: 1px solid #F5F5F5;
}

table.e-l-table td:first-child {
    padding-left: 1.4em;
}
    
table.e-l-table h4 {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

table.e-l-table img {
    max-width: 75px;
    width: 75px;
}

table.e-l-table .e-noborder {
    border: 0;
}

/* Features Table */

.e-l-table--features th:firstchild, 
.e-l-table--features td:firstchild {
    width: 25%;
}
    
.e-l-table--features th:nth-child(2), 
.e-l-table--features td:nth-child(2) {
    width: 75%;
}

/* Cost Table */
      
  table.e-l-scopetable th:first-child,
  table.e-l-scopetable td:first-child {
      width: 20%;
  }
      
  table.e-l-projectstafftable th:first-child,
  table.e-l-projectstafftable td:first-child {
      width: 30%;
  }
      
  table.e-l-costtable {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
  }
      
  table.e-l-costtable tr, th, td {
      border-bottom: 1px solid #F5F5F5;
      line-height: 1.5;
      padding: 0.7em;
  }
      
  table.e-l-costtable td:first-child {
      padding-left: 1.4em;
  }
      
  table.e-l-costtable th:firstchild, 
  table.e-l-costtable td:firstchild {
      width: 50%;
  }
      
  table.e-l-costtable th:nth-child(2), 
  table.e-l-costtable th:nth-child(3), 
  table.e-l-costtable td:nth-child(2), 
  table.e-l-costtable td:nth-child(3) {
      width: 25%;
  }
      
  table.e-l-costtable.e-l-autowidth th:firstchild, 
  table.e-l-costtable.e-l-autowidth td:firstchild {
      width: auto;
  }
      
  table.e-l-costtable.e-l-autowidth th:nth-child(2), 
  table.e-l-costtable.e-l-autowidth th:nth-child(3), 
  table.e-l-costtable.e-l-autowidth td:nth-child(2), 
  table.e-l-costtable.e-l-autowidth td:nth-child(3) {
      width: auto;
  }
      
  table.e-l-costtable td:nth-child(2), 
  table.e-l-costtable td:nth-child(2) p, 
  table.e-l-costtable td:nth-child(2) h5 {
      text-align: center;
  }
      
  table.e-l-costtable td:nth-child(3), 
  table.e-l-costtable td:nth-child(3) p, 
  table.e-l-costtable td:nth-child(3) h5 {
      text-align: center;
  }
      
  table.e-l-costtable td:nth-child(4), 
  table.e-l-costtable td:nth-child(4) p, 
  table.e-l-costtable td:nth-child(4) h5 {
      text-align: center;
  }
      
  table.e-l-costtable h4 {
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }
  
  table.e-l-costtable img {
      max-width: 75px;
      width: 75px;
  }
  
  table.e-l-costtable .e-noborder {
      border: 0;
  }

/* Tech Stack */

.e-l-tech-stack {
    background-image: url('../images/film-shorts-tech-stack.png');
    background-size: 100%;
}

/* Revision */

.e-l-revision {
    border-right: 10px solid #40C4FF;
    position: absolute;
    right: 0;
    width: 100vw; 
    z-index: 9;
}

/* 
 * 
 * ===== Themes =====
 *
 */

/* Blue */

.e-t-blue {
    color: #03A9F4;
}

.e-t-blue a {
    color: #03A9F4;
}

.e-t-blue__default-color {
    color: #424242;
}

.e-t-blue__eywa-blue-color {
    color: #398D9C;
}

.e-t-blue__punch-line {
    color: #01579B;
}

.e-t-blue__punch-line span {
    color: #03A9F4;
}

.e-t-blue__note {
    background-color: #0091ea;
    color: #FFFFFF;
}

/* Blue - Glaze */

.e-t-blue-glaze {
    background-color: #0074D9;
    color: #FFFFFF;
}

/* Golden */

.e-t-golden {
    color: #D9B12E;
}

.e-t-golden__default-color {
    color: #424242;
}

.e-t-golden__punch-line {
    color: #01579B;
}

.e-t-golden__punch-line span {
    color: #03A9F4;
}

.e-t-golden__note {
    background-color: #D9B12E;
    color: #FFFFFF;
}

/* Pink */

.e-t-pink {
    color: #FF4081;
}

.e-t-pink__default-color {
    color: #424242;
}

.e-t-pink__punch-line {
    color: #01579B;
}

.e-t-pink__punch-line span {
    color: #03A9F4;
}

.e-t-pink__note {
    background-color: #FF4081;
    color: #FFFFFF;
}

/* Purple */

.e-t-purple {
    color: #8E24AA;
}

.e-t-purple__default-color {
    color: #424242;
}

.e-t-purple__punch-line {
    color: #01579B;
}

.e-t-purple__punch-line span {
    color: #03A9F4;
}

.e-t-purple__note {
    background-color: #8E24AA;
    color: #FFFFFF;
}

.carousel {
    align-items: center;
    display: flex;
    flex-direction: column; 
    height: 760px;   
    overflow: hidden;  
    perspective: 3500px; /* $viewer-distance; */
    width: 100%;
}

.carousel > * {
   flex: 0 0 auto;
}
    
.carousel figure {
    margin: 0;       
    /* opacity: 0.9;  */
    transform-style: preserve-3d;
    transition: transform 0.5s;
    width: 85%; /* $item-width; */
}

.carousel figure .item {
    box-sizing: border-box;
    padding: 0 40px; /* 0 $item-separation / 2; */
    width: 100%;
}       

.carousel figure .item .e-l-card {
    margin: 0 auto;
    padding: 20px 0 15px;
    width: 100%;
}

.carousel figure .item:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
}

/* 
 * 
 * ===== Helpers =====
 *
 */

 .e-h-full-width {
    max-width: 100%;
    width: 100%;
} 

.e-h-width-90 {
    width: 90%;
}

.e-h-width-30 {
    width: 30%;
}

.e-h-full-viewport {
    min-height: 100vh;
}

.e-h-height-80 {
    height: 80%;
}

.e-h-display-inline-block {
    display: inline-block;
}

.e-h-position-absolute {
    position: absolute;
}

.e-h-position-fixed {
    position: fixed;
    top: 0;
}

.e-h-position-relative {
    position: relative;
}

.e-h-no-margin {
    margin: 0;
}

.e-h-no-padding {
    padding: 0;
}

.e-h-tmargin-05 {
    margin-top: 0.5rem;
}

.e-h-tmargin-2 {
    margin-top: 2rem;
}

.e-h-tmargin-10p {
    margin-top: 10px;
}

.e-h-tmargin-15p {
    margin-top: 15px;
}

.e-h-bmargin-1 {
    margin-bottom: 1rem;
}

.e-h-bmargin-20p {
    margin-bottom: 20px;
}

.e-h-bmargin-15p {
    margin-bottom: 15px;
}

.e-h-bmargin-10p {
    margin-bottom: 10px;
}

.e-h-bpadding-15p {
    padding-bottom: 15px;
}

.e-h-tpadding-20p {
    padding-top: 20px;
}

.e-h-hpadding-5p {
    padding-left: 5px;
    padding-right: 5px;
}

.e-h-hpadding-10p {
    padding-left: 10px;
    padding-right: 10px;
}

.e-h-center-align {
    text-align: center;
}

.e-h-left-align {
    text-align: left;
}

.e-h-right-align {
    text-align: right;
}

.e-v-top-align {
    vertical-align: top;
}

.e-h-small-text {
    font-size: 15px;
    line-height: 1.4;
}

.e-h-smaller-text {
    font-size: 12px;
    line-height: 1.4;
}

.e-h-grey-text {
    color: #757575;
}

.e-h-dark-grey-text {
    color: #616161;
}

.e-h-spaced-text {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 
 * 
 * ===== State =====
 *
 */

body {
  background-color: #FFFFFF;
  transition: background-color 2s ease;
}

.e-a-hdovflw {
  overflow: hidden;
}

.e-a-element {
  opacity: 0;
}

.e-a-element.e-a-slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.e-a-element.e-a-slide-right {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.e-a-element.e-a-slide-left.e-s-in-view, 
.e-a-element.e-a-slide-right.e-s-in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}

.e-a-element.e-a-rotate {
    -moz-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.e-a-element.e-a-rotate.e-s-in-view {
    opacity: 0.3;
    -moz-animation: rotation 0.4s  linear;
    -webkit-animation: rotation 0.4s  linear;
    -o-animation: rotation 0.4s  linear;
    -ms-animation: rotation 0.4s  linear;
    animation: rotation 0.4s linear;
}

.e-revision.e-s-in-view {
    background-color: #E1F5FE;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(-90deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

/* 
 * 
 * ===== Responsiveness =====
 *
 */

 @media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

    html, body {
        font-size: 15px;
        line-height: 1.2;
    }

    h1 {
        font-size: 2rem;
        font-weight: 300;
        line-height: 1.2;
        margin: 1rem 0 0 0;
        /* padding: 0.3em 0;  */
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 300;
        line-height: 1.2;
        margin: 2rem 0 0 0;
        /* padding: 0.3em 0;  */
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.2;
        margin: 0;
        padding: 0.5rem 0;
    }

    h4 {
        font-size: 1.1rem;
        line-height: 1.2;
        margin: 0;
        padding: 0.5rem 0;
    }

    h5 {
        font-size: 1.05rem;
        line-height: 1.4;
        margin: 0;
        padding: 0.5rem 0;
    }

    .e-h-small-text {
        font-size: 13px;
    }

    .e-l-title-box__logo {
        width: 60%;
    }

    .e-l-title-box__content.e-l-hcontainer {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 0;
    }

    .e-title-box__icon-container {
        border-bottom: 2px solid #76FF03;
        border-right: 0;
    }

    .e-l-title-box__icon-container {
        height: 65px;
        padding-left: 50px;
        padding-right: 50px;
        width: 65px;
    }

    .e-l-partnerships__partner {
        margin: 10px 5px;
        width: 110px;
    }

    .e-l-covericon {
        padding: 25px 25px;
        border-right: 0px;
        border-bottom: 2px solid #76FF03;
        width: 75px;
    }  

    .e-l-sect {
        padding: 15% 10%;
    }

    .e-l-title-box__icon {
        height: 65px;
        min-height: 65px;
        min-width: 65px;
        width: 65px;
    } 

    .e-l-sect__sect-number {
        right: 5vw; 
        top: 5vw; 
    }

    .e-sect__sect-number {
        font-size: 40px;  
    }  

    .e-l-header__icon {
        height: 65px;
        min-width: 65px;
        width: 65px;
    }

    .e-punch-line {
        font-size: 1.8rem;
    }

    .e-l-stats__header {
        width: 75%;
    }

    .e-l-numberscont.e-l-hcontainer div:nth-child(-n+3) {
        margin-bottom: 1.9rem;
    }

    .e-l-client-box {
        width: 50%;
    }

    .e-l-client-box:nth-child(3n+1) {
        border-left: unset;
    }

    .e-l-client-box:nth-child(2n+1) {
        border-left: solid 0.5px #E0E0E0;
    }

    .e-l-client-box:nth-child(n+3) {
        border-top: 0;
    }  

    .e-l-client-box__logo {
        width: 60%;
    }

    .e-l-tech-box {
        width: 50%;
    }
    
    .e-l-tech-box:nth-child(2n+1) {
        border-left: solid 0.5px #E0E0E0;
    }
    
    .e-l-tech-box:nth-child(n+3) {
        border-top: 0;
    }   

    .e-l-tech-box__logo {
        width: 50%;
    }

    .e-l-tech-box__logo-big {
        width: 70%;
    }

    .e-l-card .e-l-title__logo {
        height: 45px;
    }

    .e-l-title__logo-limit {
        width: 50%;
    }
    
    .e-l-card .e-l-title__text {
        height: 60px;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .e-l-card hr {
        margin: 0;
    }

    .e-l-card .e-l-tech-box__title {
        margin: unset;
    }
    
    .e-l-card .e-tech-box {
        font-size: 10px;
    }
    
    .e-l-title__services {
        margin-bottom: 5px;
        margin-top: 15px;        
    }

    .e-l-service-box.e-l-hcontainer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .e-l-service {
        background-color: #ffffff;
        border-bottom: 0.5px solid #BDBDBD;
        border-right: 0.5px solid #BDBDBD;       
        height: 50px;
        padding: 3px;
        width: 33%;
    }

    .e-l-service:nth-child(2n+1) {        
        border-right: 0.5px solid #BDBDBD;
    }

    .e-l-service:nth-child(3n) {               
        border-right: 0;
    }

    .e-l-service:nth-last-child(3):nth-child(n+4),
    .e-l-service:nth-last-child(2):nth-child(n+4),
    .e-l-service:nth-last-child(1):nth-child(n+4) { 
        border-bottom: 0;
    }

    .e-l-service:nth-last-child(1) { 
        border-right: 0;
    }

    .e-l-text__services {
        margin: 5px 0 5px;
    }

    .e-l-title__quick-look {
        margin-bottom: 5px;
    }

    .e-l-screenshots {
        height: 250px;
        /* transform-style: preserve-3d; */
    }

    .e-l-screenshot--left,
    .e-l-screenshot--right {
        /* backface-visibility: hidden;
        background-position: center; */
        margin: 0;
        /* position: absolute;
        width: 100%; */
    }

    /* .e-l-screenshot--right {
        transform: rotateY(180deg);
    } */

    .carousel {
        height: 650px;
    }

    .carousel nav {
        margin: 10px 0 5px;
    }

    .carousel figure {
        width: 100%;
    }

    .carousel figure .item {
        padding: 5px 5px 0;
    }

    .carousel figure .item .e-l-card {
        padding-top: 10px;
        padding-bottom: 0;
    }

    .mover {
        animation: move 5s infinite;
    }
      
    @keyframes move {
        0% {
              transform: rotateY(0deg);
        }
        5% {
              transform: rotateY(180deg);
        }
        50% {
            transform: rotateY(180deg);
        }
        55% {
            transform: rotateY(360deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }
    
    /* .e-l-scshcont.e-l-hcontainer {
        height: 600px;
    }

    .e-l-scshbox {
        height: 50%;
        width: 100%;
    }

    .e-l-scsh-1,
    .e-l-scsh-2 {
        background-position: center;
    } */

    table.e-l-costtable tr, th, td {
        padding-left: 5px;
    }

    table.e-l-costtable td:first-child {
        padding-left: 0px;
    }

    table.e-l-costtable th:nth-child(n+2), td:nth-child(n+2) {
        border-left: 1px solid #F5F5F5;
    }

    table.e-l-costtable ul {
        text-align: left;
        -webkit-padding-start: 1.5rem;
    }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {



}

/* Medium devices (tablets, 768px and up) */
/* @media only screen and (max-width: 1200px) {

    body {
        --card-width: 614.4px;
    }
 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (max-width: 812px) {

    body {
        --card-width: 331.2px;
    }

} */ 





/* 

// Carousel configuration parameters

$item-width: 834px;
$item-separation: 80px;
$viewer-distance: 500px;

// Formulae

// $theta: 2 * 3.141592653589793 / $n; 

// $apothem = $image-width / (2 * tan($PI/$n)) 

// figure.style.transform = `rotateY(${currImage * -theta}rad)`;
// i.e.:
//  @for $i from 2 through $n {
//      &:nth-child(#{$i}) {
//          transform: rotateY(#{($i - 1) * $theta}rad);
//    }
//  } 

// Calcs
 
$n: 8;
$theta: 0.786rad;
$apothem: 1007.295px;

$n: 4;
$theta: 1.571rad;
$apothem: 407.209px;

$n: 5;
$theta: 1.256rad;
$apothem: 

$n: 6;
$theta: 1.0472rad;
$apothem: 

*/
            
/* .carousel  figure .item:nth-child(2) {
    transform: rotateY(1.0472rad);
}

.carousel  figure .item:nth-child(3) {
    transform: rotateY(2.0944rad);
}

.carousel  figure .item:nth-child(4) {
    transform: rotateY(3.1416rad);
}

.carousel  figure .item:nth-child(5) {
    transform: rotateY(4.188rad);
}

.carousel  figure .item:nth-child(6) {
    transform: rotateY(5.236rad);
} */

/* .carousel  figure .item:nth-child(7) {
    transform: rotateY(4.716rad);
}

.carousel  figure .item:nth-child(8) {
    transform: rotateY(5.502rad);
} */
    
nav {
    display: flex;
    justify-content: center;
    margin: 15px 0 20px;
}

nav button {
    flex: 0 0 auto;
    margin: 0 5px;            
    cursor: pointer;
    color: #333;
    background: none;
    border: 1px solid;
    letter-spacing: 1px;
    padding: 5px 10px;
}

/* .e-l-coloredtint {  
  height: 100%;
  opacity: 0.3;
  top: 0;
  width: 100%;
  z-index: 1;  
} */


/***** If we decide to use background-img *****/
/* .e-l-client-box__logo-ntpc {
    background-image: url("../images/ntpc-logo.png");
    height: 50%;
    width: 40%; 
}

.e-l-client-box__logo-kbl {
    background-image: url("../images/kirloskar-logo.png");
    height: 50%;
    width: 40%; 
}

.e-l-client-box__logo-awr {
    background-image: url("../images/awrostamani-logo.jpg");
    height: 50%;
    width: 40%; 
}

.e-l-client-box__logo-pulsepoint {
    background-image: url("../images/pulsepoint-logo.png");
    height: 50%;
    width: 40%; 
}

.e-l-client-box__logo-pubmatic {
    background-image: url("../images/pubmatic-logo.png");
    height: 50%;
    width: 40%; 
}

.e-l-client-box__logo-forcebrands {
    background-image: url("../images/forcebrands-logo.jpeg");
    height: 50%;
    width: 40%; 
} */

/* Misc Client Box */

/* .e-l-client-box .e-l-vcontainer {
    height: 100%;
    margin: 0 auto;
    width: 50%;
}

.e-l-client-box-name {
    z-index: 5;
}

.e-l-client-box__logo img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

/* .e-l-note ul:only-child {
    margin-bottom: 0; 
    -webkit-padding-start: 1.1em;
}
  
.e-l-note.e-l-note-last{
    margin-bottom: 3em;
} */

/* Auto color change */

/* .e-a-revision {
    -webkit-animation:colorchange 1s infinite alternate;
  }
  
  @-webkit-keyframes colorchange {
        0% {  
          background-color: #FFFFFF;
        }
        50% {
          background-color: #ccffff;
        }
        100% {
          background-color: #b2ffff;
        }
      }
  
  .color-gold {
    background-color: #f2f2dd;
    transition: background-color 3s ease;
  }
  
  .color-blue {
    background-color: #e2f1f1;
    transition: background-color 2s ease;
  }
  
  .color-red {
    background-color: #FCE4EC;
    transition: background-color 2s ease;
  }
  
  .color-white {
    background-color: #FFFFFF;
    transition: background-color 2s ease;
  } */