@charset "UTF-8";


  /* START DEFAULT BODY STYLES */
  /* START DEFAULT BODY STYLES */
  html {
  min-height: 100%
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

  body {
  font-family: "SF Compact", sans-serif;
  background-color: #ffffff;
  font-family: "SF Compact", sans-serif;
  padding: 50px;
  }

  a {
  text-decoration: none;
  color: #2E333B;
  }

  img {
  width: 100%;
  }

  em {
  font-size: 16px;
  color: #008F56;
  font-weight: 400;
  line-height: 1.2em;
  font-style: normal;
  }
  /* END DEFAULT BODY STYLES */
  /* END DEFAULT BODY STYLES */
  

/* CASE STUDY PAGE ICON LIST */
#iconscontainer {
display: inline-flex;
}

#iconscontainer svg {
padding-right: 8px;
}

#iconscontainer p{
margin-right: 16px;
font-size: 12px;
font-weight: 300;
display: inline-flex;
align-items: center;
}
/* CASE STUDY PAGE ICON LIST */


/* START METRIC TILE STYLES */
#metric {
display: flex;
width: 100%;
}

.metriccontainer {
padding: 16px;
background: #F4F4F4;
border-radius: 8px;
width: 120px;
margin-right: 16px;
}

.metriccontainer h1 {
font-size: 14px;
color: #000;
font-weight: 400;
line-height: 1.2em;
font-style: normal;
}

.metriccontainer p {
font-size: 18px;
color: #008F56;
font-weight: 400;
line-height: 1.2em;
font-style: normal;
}
/* END METRIC TILE STYLES */



  /* START PORTFOLIO PAGE HEADER STYLES */
  .topbar {
  display: flex;   
  padding-bottom: 8px;
  flex-direction: column;
  max-width: 1000px;
  }

  .topbar h1 {
  font-size: 60px;
  color: #000000;
  font-weight: 300;
  text-align: left;
  max-width: 1200px;
  line-height: 1.1em;
  }

  .topbar p {
  color: #000000;
  max-width: 1200px;
  font-weight: 300;
  line-height: 1.5em;
  font-size: 24px;
  }
  /* END PORTFOLIO PAGE HEADER STYLES */
  /* END PORTFOLIO PAGE HEADER STYLES */




  /* START SECTION CONTAINERS STYLES */
  /* START SECTION CONTAINERS STYLES */
  .pagewrapper {
  max-width: 1000px;
  margin: 0 auto;
  }

  .left {
  width: 48%;
  }

  .portfoliowrapper {
  max-width: 1000px;
  margin: 0 auto;
  }

  .images-header {
  margin: 0px;
  padding-left: 32px;
  padding-top: 24px;
  padding-bottom: 0px;
  }

  .mobilesectioneone {
  display: flex;
  text-align: center;
  }

  .videosection {
  display: inline-flex;
  margin:0 auto;
  text-align: center;
  }
  /* END SECTION CONTAINERS STYLES */
  /* END SECTION CONTAINERS STYLES */





  /* START PROJECT DESCRIPTION STYLES */
  /* START PROJECT DESCRIPTION STYLES */
  .maingrid {
  display: flex;
  background-color: #ffffff;
  max-width: 1200xp;
  }

  .maingrid p {
  font-size: 14px;
  font-weight: 300;
  color: #000;
  line-height: 1.7em;
  }

  .maingrid h1 {
  font-size: 24px;
  font-weight: 300; 
  color: #F52B63;
  }

  .maingrid h2 {
  font-size: 18px;
  font-weight: 400; 
  color: #000000;
  }

  .maingrid h3 {
  font-size: 14px;
  font-weight: 400; 
  color: #000000;
  margin-bottom: 0px;
  }

  .description-lg {
  width: 50%;
  padding-right: 16px;
  }

  .description-sm {
  width: 25%;
  padding-right: 16px;
  }

  .miniheader h1{
  width: 100%;
  font-weight: 400;
  font-size: 13px;
  color: #77828F;
  }

  .miniheader p{
  width: 50%;
  font-weight: 400;
  font-size: 12px;
  color: #000;
  }
  /* END PROJECT DESCRIPTION STYLES */
  /* END PROJECT DESCRIPTION STYLES */






/* START RESPONSIVE STYLES */
  @media (min-width: 320px) and (max-width: 815px) {

  .portfoliowrapper {
  margin-right:0;
  width:auto;
  padding: 12px;
  }

   .maingrid {
  display: grid;
  background-color: #ffffff;
  width: 100%;
  } 

  .description-lg {
  width: 100%;
  padding-right: 0px;
  }

  .description-sm {
  width: 100%;
  padding-right: 0px;
}




  .videosection {
  display: flex;
  max-width: 340px !important;
  }

  video {
    max-width: 320px;
  }

  body {
  padding: 16px
  }

  img {
  width: 100%;
  }

 .viewmorework {
  display: flow !important;
  }

  .topbar {
  padding-left: 0px !important;
  padding-bottom: 8px;
  max-width: 700px;
  }

  .mobilesectioneone {
  display: flow;
  }

  .footerrow {
  padding: 4px !important;
  }

  .upshot h1 { 
  font-size:32px !important; 
  }

  .tagdribbble {
  margin-left: 0px !important;
  }
  }
  /* END RESPONSIVE STYLES */














































  /* START FOOTER STYLES */
  .footerrow {
  padding-bottom: 32px;
  }
  /* END FOOTER STYLES */
  


  /* START TAG STYLES */
  .headertags {
  background: linear-gradient(
  90deg, 
  #F73D4A 0%, 
  #F85035 50.38%, 
  #EC4361 65.64%, 
  #E73E75 72.57%, 
  #D127C5 100%);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  color: #fff; 
  padding: 6px 14px 6px 12px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .companytag {
  background-color: #fff;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  color: #9A9A9A; 
  padding: 0px 32px 6px 0px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .companytag svg {
    color: #0072FF;
  }

  .tagback2 {
  display: inline-flex;
  align-items: center;
  background-color: #fff; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #CEDCED;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagback2:hover {
  display: inline-flex;
  align-items: center;
  background-color: #F5F9FD; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #A6B5D8;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagback2 svg {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  fill: none;
  stroke: #E81FAF;
  stroke-width: 2;
  margin-right: 6px;
  }

  .taglinkedin {
  display: inline-flex;
  align-items: center;
  background-color: #fff; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #CEDCED;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .taglinkedin:hover {
  display: inline-flex;
  align-items: center;
  background-color: #F5F9FD; 
  color: #3A7FD5; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #165098;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .taglinkedin svg{
  width: 20px;
  height: 20px;
  margin-right: 6px;
  fill: none;
  stroke: #165098;
  stroke-width: 2;
  }

  .tagdribbble {
  display: inline-flex;
  align-items: center;
  background-color: #fff; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #CEDCED;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  margin-left: 8px;
  }

  .tagdribbble:hover {
  display: inline-flex;
  align-items: center;
  background-color: #FFF1F6; 
  color: #E81FAF; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #E81FAF;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagdribbble svg{
  width: 20px;
  height: 20px;
  margin-right: 6px;
  fill: none;
  stroke: #E81FAF;
  stroke-width: 2;
  }

  .tag svg {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  fill: none;
  stroke: #66779E;
  stroke-width: 2;
  margin-right: 6px;
  }

  .tagback {
  display: inline-flex;
  align-items: center;
  background-color: #fff; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #CEDCED;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagback svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #E81FAF;
  stroke-width: 2;
  margin-right: 6px;
  }

  .tagbacktotop {
  display: inline-flex;
  align-items: center;
  background-color: #fff; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #CEDCED;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagbacktotop:hover {
  display: inline-flex;
  align-items: center;
  background-color: #F5F9FD; 
  color: #354772; 
  padding: 6px 14px 6px 12px;
  border-radius: 100px;
  border: 1px solid #E81FAF;
  font-family: Arial, sans-serif;
  font-size: 13px;
  width: auto;
  height: 24px;
  }

  .tagbacktotop svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #E81FAF;
  stroke-width: 2;
  margin-right: 6px;
  }
  /* END TAG STYLES */



  



  /* START TEXT GRADIENT ANIMATION STYLES  */
  @keyframes gradientAnimation {
    0% {
    background-position: 0;
    }
    to {
    background-position: 100%;
    }
  }

  @keyframes gradientAnimation {
    0% {
    background-position: 0;
    }
    to {
    background-position: 100%;
    }
  }
  /* END TEXT GRADIENT ANIMATION STYLES  */

    /* START PASSWORD FORM STYLES */
  /* START PASSWORD FORM STYLES */
   #portfoliohidden {
  display: none;
  }

  .password-form {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 100px;
  }

  .password-form-header {
  width: 300px;
  text-align: center;
  margin:0 auto;
  }

  .password-form-header h1 {
  font-size: 20px;
  color: #2E333B;
  font-weight: 300;
  }

  .password-form-header p {
  font-size: 14px;
  color: #798392;
  font-weight: 300;
  margin-bottom: 24px;
  }

  form input {
  border-radius: 100px;
  border: 1px solid #CEDCED;
  padding: 20px;
  width: 300px;
  color: #929CAD;
  height: 55px;
  }

  form input[type="password"] {
  font-size: 14px;
  color: #929CAD;
  }

  form input::placeholder{
  font-size: 14px;
  color: #929CAD;
  }

  button {
  width: 300px;
  height: 55px;
  background-color: #52627B;
  border-radius: 100px;
  color: #fff;
  border:none;
  }
  /* END PASSWORD FORM STYLES */
  /* END PASSWORD FORM STYLES */