/*
 * global site styles
 */


div{
 /*border: 1px dotted blue;*/
}


html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  color: black;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

#section-overflow-wrapper{
 overflow-x: hidden;
}


/*GLOBAL--------------------------------------------------------------------------------------------*/

.navbar {
  /*margin: auto;*/
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.navbar-default {
  transition: 500ms ease;
  background: transparent;
}

.navbar-default.scrolled {
  background-image: url('../image/navbar.png');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  padding-left: 2em;
  max-width: 100%;
  height: auto;
  width: 10em;
}

.div-logo:hover {
  opacity: 1;
}

/*determines navbar padding*/
.col {
  padding: 1em 0.5em;
}

.style-nav-dropdown {
  font-size: 30px;
  color: white;
  cursor: pointer;
  float: right;
}

.overlay {
  height: 100%;
  width: 0px;
  position: fixed;
  z-index: 500;
  top: 0px;
  left: 0px;
  overflow-x: hidden;
  transition: all 0.5s ease 0s;
  background-color: rgba(100, 106, 113, 0.9);
  color: white;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 0px;
  text-decoration: none;
  font-size: 36px;
  line-height: 2;
  display: block;
  transition: all 0.3s ease 0s;
  text-transform: uppercase;
  color: white;
}

.overlay a:hover,
.overlay a:focus {
  color: black;
}

.overlay .closebtn {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 60px;
}


.header-wrap {
  display: flex;
  flex-direction: column;
}

.fade-in{
 opacity: 0;
 transition: opacity 250ms ease-in;
}

.fade-in.appear{
 opacity: 1;
}

.from-left {
  grid-column: 2 / 3;
  -webkit-transform: translateX(-2%);
  transform: translateX(-2%);
}

.from-right {
  grid-column: 3 / 4;
  -webkit-transform: translateX(2%);
  transform: translateX(2%);
}

.from-left,
.from-right {
  transition: opacity 250ms ease-in, -webkit-transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in,
    -webkit-transform 400ms ease-in;
  opacity: 0;
}

.from-left.appear,
.from-right.appear {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}



.heading-text {
  color: black;
  margin: auto;
  font-weight: 100;
  z-index: 5;
}

.heading-text h1{
  font-size: 50px;
  font-weight: 100;
  text-transform: uppercase;

}

.heading-text h2{
  font-size: 45px;
  font-weight: 100;
}

.text-center{
 font-size: 40px;
 font-weight: 100;
 flex-basis: 45%;
 margin: 0.5em;
}

.text-center p{
 font-size: 20px;
 line-height: 1.6;
 font-weight: 100;
 margin-top: 2em;
}

.text-left {
 font-size: 40px;
 font-weight: 100;
 flex-basis: 70%;
 margin: 0.5em 2em 0.5em 0;
}

.text-left p{
 font-size: 20px;
 line-height: 1.6;
 font-weight: 100;
 margin-top: 2em;
}

.section-text{
 font-size: 15px;
 font-weight: 600;
 flex-basis: 8%;
}

.button{
 font-size: 15px;
 font-weight: 600;
 border: 2px solid RGB(255, 70, 250);
 margin-top: 2em;
 padding: 0.4em 2em;
}

.button:hover {
 color: #ffffff;
 background-color: rgb(255, 70, 250);
 transition: all 0.5s ease-in-out;
}



/*HOME--------------------------------------------------------------------------------------------*/


#section-intro-bg{
  width: 100%;
  background: url('../image/0001.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  margin-bottom: 5em;
}

#section-intro{
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh;
}


#landingPageAnimation {
  max-height: 75%;
  max-width: 75%;
  position: absolute;
  top: 15%;
  left: 15%;
}


/************************** Our Mission Page****************************************/

#section-mission-technology{
}

.heading-flexbox{
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 3% 5%;
}

.text-flexbox{
 display: flex;
 justify-content: center;
 align-items: center;
}


.fromImg{
 background-image: url("../image/fromImg.png");
 height: 584px;
 background-size: contain;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-repeat: no-repeat;
 flex-basis: 45%;
}

.toImg{
 background-image: url("../image/toImg.png");
 height: 584px;
 background-size: contain;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-repeat: no-repeat;
 flex-basis: 45%;
}

.arrowImg{
 background-image: url("../image/arrowImg.png");
 background-size: contain;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-repeat: no-repeat;
 flex-basis: 10%;
 height: 64px;
}

.fromtoFlex{
 display: flex;
 justify-content: center;
 align-items: center;
}


.text-left-flexbox{
 display: flex;
 padding-left: 15%;
}


.team-img{
 margin-top: 5%; 
 align-items: flex-end;
 flex-basis: 50%;
 background-image: url("../image/teamlong.png");
 height: 712px;
 background-size: contain;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-repeat: no-repeat;
}

.mission-line{
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(120, 51, 234) 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(120, 51, 234) 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(120, 51, 234) 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, RGB(96, 218, 221)), color-stop(1, RGB(120, 51, 234)));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(120, 51, 234) 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to right, RGB(96, 218, 221) 0%, RGB(120, 51, 234) 100%);
  
  flex: 90%;
  height: 0.2em;
}

.technology-line{
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(right, RGB(83, 56, 189) 0%, RGB(255, 70, 250) 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(right, RGB(83, 56, 189) 0%, RGB(255, 70, 250) 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(right, RGB(83, 56, 189) 0%, RGB(255, 70, 250) 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, RGB(83, 56, 189)), color-stop(1, RGB(255, 70, 250)));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(right, RGB(83, 56, 189) 0%, RGB(255, 70, 250) 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to right, RGB(83, 56, 189) 0%, RGB(255, 70, 250) 100%);
  
  flex: 90%;
  height: 0.2em;
}

.get-involved-line{
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(255, 70, 250) 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(255, 70, 250) 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(255, 70, 250) 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, RGB(96, 218, 221)), color-stop(1, RGB(255, 70, 250)));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(right, RGB(96, 218, 221) 0%, RGB(255, 70, 250) 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to right, RGB(96, 218, 221) 0%, RGB(255, 70, 250) 100%);
  
  flex: 90%;
  height: 0.2em;
}

/******************************End Mission*********************************************/



/*****************************************FOOTER*************************************************************************************/

.footer-top {
  display: flex;
}

/*.footer-top-scrollpage{
  display: flex;
}

.footer-top > img, .footer-top-scrollpage > img{
  width: 100%;
}*/

#section-footer {
  display: flex;
  color: black;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5em;
}

.footer-logo {
  background-image: url('../image/logoWhiteLarge.png');
  width: 15%;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  padding-bottom: 1%;
}

.footerImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('../image/footerImg.png');
  width: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 5%;
  padding-bottom: 5%;
}

.social-media {
  color: black;
  padding-top: 1%;
  padding-bottom: 1.5%;
}

.social-media-icons {
  width: 100%;
}

.social-media-icons > span > a {
  font-size: 1.8em;
  margin: 15px 5px;
}

.copyright {
  margin-top: 10px;
  font-weight: 200;
  font-size: 12px;
  text-align: center;
  color: white;
  align-content: flex-end;
}

.footerImgText {
 color: white;
 font-weight: 600;
 font-size: 15px;
 text-align: center;
 text-transform: uppercase;
}

.footerImgTextSmall {
 color: white;
 font-weight: 400;
 font-size: 13.5px;
 text-align: center;
}

/******************************Start Our Mission*************************************/

#section-our-mission{
 height: auto;
 background-image: url('../image/pumpLab.png');
 background-repeat: no-repeat;
 -webkit-background-size: 100%;
 -moz-background-size: 100%;
 -o-background-size: 100%;
 background-size: 100%;
 background-attachment: fixed;
}

.GIImg{
 background-image: url("../image/GIImg.png");
 height: 60vh;
 background-size: contain;
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-repeat: no-repeat;
 margin-left: 25%;
 margin-right: 25%;
}

/******************************END Our Mission*************************************/

/******************************Start Our Technology*************************************/

#section-our-technology-wrapper{
 overflow-x: visible;
}

#section-our-technology{
 height: auto;
 background-image: url('../image/Box1Colour.png');
 background-repeat: no-repeat;
 -webkit-background-size: 100%;
 -moz-background-size: 100%;
 -o-background-size: 100%;
 background-size: 100%;
 background-attachment: fixed;
 overflow-x: visible;
}


.scroll-flex-container {
  display: flex;
  font-size: 30px;
  text-align: right;
  background: white;
  padding-top: 5em;
  overflow-x: visible;
}

.scroll-flex-item-left {
  flex: 60%;
  margin: -6rem 0 100px 300px;
  padding: 100px 0 180px 0;
  background: transparent;
  overflow-x: visible;
}

.scroll-flex-item-right {
  margin: -6rem 300px 100px 0;
  padding: 100px 0 30px 0;
  flex: 40%;
  background: transparent;
  overflow-x: visible;

}

.scroll-icons {
 padding-bottom: 1.5em;
}

#scroll-bioreactor {
  position: sticky;
  position: -webkit-sticky;
  top: 200px;
  padding-bottom: 200px;
  overflow-x: visible;
}

#scroll-v0 {
  max-height: 400px;
  max-width: 557px;
  position: absolute;
  top: 0;
  left: 27%;
  overflow-x: visible;
}

#scroll-v1 {
  max-height: 400px;
  max-width: 557px;
  position: absolute;
  top: 0;
  left: 27%;
}

#scroll-v2 {
  max-height: 400px;
  max-width: 557px;
  position: absolute;
  top: 0;
  left: 27%;
}

#scroll-v3 {
  max-height: 400px;
  max-width: 557px;
  position: absolute;
  top: 0;
  left: 27%;
}

#scroll-v4 {
  max-height: 400px;
  max-width: 557px;
  position: absolute;
  top: 0;
  left: 27%;
}

.scroll-content-text {
  top: 0;
  text-align: left;
  padding: 0 5em 10vh 5em;
  width: 40%;
}

.bioreactor-inner-description {
  font-weight: 300;
  font-size: 17px;
  margin: 0;
  padding: 0;
}

.bioreactor-video-and-text-mobile {
  display: none;
}

/******************************END Our Technology*************************************/

/*MEDIA QUERIES********************************************************************************************************/

/******************************Start Max Width 1600px*************************************/

@media (max-width: 1600px) {

#section-intro{
  height:80vh;
}

.fromtoImg{
 height: 500px;
}

.team-img{
 height: 500px;
}

.scroll-flex-item-left {
  margin: -6rem 0px 100px 50px;
}

.scroll-flex-item-right {
  margin: -6rem 50px 100px 0px;
}

}

/******************************END Max Width 1028px*************************************/


/******************************Start Max Width 1300px*************************************/

@media (max-width: 1300px) {

.scroll-flex-item-left {
  flex: 50%;
}

.scroll-flex-item-right {
  flex: 60%;
}

#scroll-v0 {
  max-height: 250px;
  max-width: 379px;
}

#scroll-v1 {
  max-height: 250px;
  max-width: 379px;
}

#scroll-v2 {
  max-height: 250px;
  max-width: 379px;
}

#scroll-v3 {
  max-height: 250px;
  max-width: 379px;
}

#scroll-v4 {
  max-height: 322px;
  max-width: 379px;
}

}

/******************************Start Max Width 1028px*************************************/


@media (max-width: 1028px) {

.logo {
  padding-left: 1.5em;
}

#section-intro{
  height:60vh;
}

#landingPageAnimation {
  max-height: 100%;
  max-width: 100%;
  top: 15%;
  left: 2%;
}

.heading-text h1{
  font-size: 30px;
  font-weight: 100;
  text-transform: uppercase;
}

.heading-text h2{
  font-size: 27px;
  font-weight: 100;
}

.text-center{
 font-size: 30px;
}

.text-center p{
 font-size: 18px;
}

.text-left {
 font-size: 30px;
 flex-basis: 90%;
}

.text-left p{
 font-size: 18px;
}

.section-text{
 font-size: 12px;
 font-weight: 600;
 flex-basis: 8%;
}

.button{
 font-size: 12px;
 font-weight: 600;
 border: 2px solid RGB(255, 70, 250);
 margin-top: 2em;
 padding: 0.4em 2em;
}

.fromImg{
 height: 200px;
}

.toImg{
 height: 200px;
}

.arrowImg{
 height: 30px;
}


.team-img{
 height: 400px;
}

.footer-logo {
  width: 13%;
}

.footerImg {
  width: 1920px;
  max-height: 402px;
}

.social-media-icons > span > a {
  font-size: 1.5em;
}

.copyright {
  font-size: 11px;
}

.footerImg{
 background-image: url("../image/footerImg2.png");
}

.footerImgText {
 font-size: 14px;
}

.footerImgTextSmall {
 font-size: 12.5px;
}

.GIImg{
 height: 40vh;
}

.scroll-content-text {
  padding: 10vh 0.5em 10vh 6em;
  width: 50%;
}

.bioreactor-inner-description {
  font-weight: 300;
  font-size: 15px;
}

}

/******************************End Max Width 1028px*************************************/

/******************************Start Max Width 900px*************************************/
@media (max-width: 900px) {

.overlay a {
 font-size: 20px;
}


#section-intro-bg {
 height: auto;
}


.text-left-flexbox{
 display: flex;
 padding-left: 2%;
}

.text-left {
 flex-basis: 90%;
}

.scroll-content-text {
  padding: 5vh 0.5em 5vh 6em;
  width: 50%;
}

.scroll-icons {
 padding-bottom: 0.5em;
 max-height: 20px;
}

.footerImg {
  background-image: url('../image/footerImg3.png');
}


}

/******************************End Max Width 900px*************************************/



/******************************Start Max Width 750px*************************************/

@media (max-width: 750px) {

.navbar {
 font-size: 12px;
}

#section-intro{
  height:40vh;
}

.team-img{
 min-height: 500px;
 min-width: 400px;
 align-self: center;
}

.text-left-flexbox{
 flex-direction: column-reverse;
}

.text-left {
 margin-right: 0.5em;
}


.footer-logo {
  width: 10%;
}

.footerImg {
  max-height: 20rem;
}

.social-media-icons > span > a {
  font-size: 1em;
}

.copyright {
  font-size: 10px;
}

.footerImgText {
 font-size: 12px;
}

.footerImgTextSmall {
 font-size: 11.5px;
}

.scroll-content-text {
  padding: 10vh 0.1em 10vh 2.5em;
  width: 60%;
}

.scroll-flex-item-left {
  flex: 60%;
  margin-left: 0;
  background: white;
  border-width: 0;
}

.scroll-flex-item-right {
  margin-right: 0;
  flex: 40%;
  border-width: 0;
}

}

/******************************End Max Width 750px*************************************/

/******************************Start Max Width 640px*************************************/

@media (max-width: 640px) {

.logo {
 padding-left: 0em;
}


#section-intro-bg{
 background-image: url('../image/0002.png');
 height: 100vh;
 width: 100%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

#section-intro{
 height: 100vh;
}



#landingPageAnimation {
 max-height: 100%;
 max-width: 100%;
 position: absolute;
 top: 30%;
 left: 0%;
}

.heading-text h1{
  font-size: 20px;
  font-weight: 200;
  text-transform: uppercase;
}

.heading-text h2{
  font-size: 17px;
  font-weight: 200;
}

.heading-flexbox{
 padding-left: 2.5%;
}

.text-center{
 font-size: 18px;
 font-weight: 200;
 flex-basis: 75%;
 line-height: 1.6;
}

.text-center p{
 font-size: 15px;
}

.text-left {
 font-size: 18px;
 font-weight: 200;
 flex-basis: 90%;
}

.text-left p{
 font-size: 15px;
}


.section-text{
 font-size: 12px;
 font-weight: 600;
 flex-basis: 8%;
}

.button{
 font-size: 12px;
 margin-top: 2em;
 margin-bottom: 2.5em;
 padding: 0.4em 2em;
}

.section-text{
 padding-right: 5%;
}


.fromImg{
 width: 65%;
 flex-basis: 45%;
}

.toImg{
 width: 65%;
 flex-basis: 45%;
}

.arrowImg{
 background-image: url("../image/downarrowImg.png");
 width: 10%;
 flex-basis: 5%;
}

.fromtoFlex{
 flex-direction: column;
 height: 400px;
 padding-left: 5%;
}


.text-left-flexbox{
 display: flex;
 padding-left: 15%;
}

.team-img{
 min-height: 350px;
 min-width: 300px;
 padding-left: 7.5%;
}

.GIImg{
 height: 30vh;
 margin-left: 10%;
 margin-right: 10%;
}

.scroll-flex-item-left {
  display: none;
}

.scroll-flex-item-right {
  display: none;
}

.bioreactor-video-and-text-mobile {
 padding: 50px;
 display: flex;
 flex-direction: column;
 background-color: white;
}

.bioreactor-mobile-v1.bioreactor-mobile-v2.bioreactor-mobile-v3.bioreactor-mobile-v4.bioreactor-mobile-v5 {
 max-width: 85%;
}


.footerImg {
  background-image: url('../image/footerImg4.png');
  width: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.footer-logo {
  width: 50%;
}


}

/******************************End Max Width 640px*************************************/

/******************************Start Max Width px*************************************/