html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    background-color: #ffffff;
    
    font-family: 'Sora', sans-serif;
  }

  #serifFont {
    font-family: 'Tinos', serif;
  }

 

 .icons-Emojis {
  padding-top: 3px;
  font-size: 2em;
 }
  
  #navbar {
   
    position: fixed !important;
    top: 0 !important;
    padding-top: 50px !important;
    
    width: 100% !important;
    display: block;
    transition: top 0.3s !important;
    z-index: 1000;
  }

  .exitPadding {
    margin-right: 300px;
  }

 .exitPadding:hover {
   border: white 0px solid;

 }
  
  #navbar a {
    float: right !important;
    display: block !important;
    color: #2f2c2c !important;
    text-align: center !important;
    padding: 25px !important;
    text-decoration: none !important;
    font-size: 18px !important;
   
    transition: 0.3s;
  }

  .navBackgrdWhite {
    background-color: white;
  }
  
  #navbar a:hover {
    background-color: #202021;
    color: rgb(255, 255, 255) !important;
    box-shadow: 5px 5px 5px gray;
  }

  #logo a:hover {
    background-color: white;
    box-shadow: 0 0 0 white;
  }
  #logo a:hover img {
    transform: scale(1.1) !important; /* You can adjust the scale factor as needed */
    transition: transform 0.3s ease !important; /* Add a smooth transition effect */
  }                      

 #logoHover:hover {
  background-color: transparent !important;
}


 #dropdown {
    float: right !important;
    overflow: hidden !important;
}

/* Dropdown button */
#dropbtn {
    font-size: 18px !important;
    border: none !important;
    outline: none !important;
    font-weight: 200 !important;
    text-align: center !important;
    padding: 25px !important;
    text-decoration: none !important;
    font-size: 18px !important;
    background-color: white !important;
    cursor: pointer !important;
    z-index: 1;
    transition: 0.3s;
}



/* Dropdown content (hidden by default) */
#dropdown-content {
  display: none !important;
  position: absolute !important;
  background-color: #f9f9f9 ;
  box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2) !important;
  z-index: 1 !important;
  width: 120px !important; /* Adjust the width as needed */
}

/* Links inside the dropdown */
#dropdown-content a {
  color: #2f2c2c !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  display: block !important;
  text-align: left !important;
  width: 100% !important; /* Make each link take up the full width */
  box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
}

#dropdown > #dropbtn:hover 

 {
  border: 2px 2px 0px 2px;
  
  
}

/* Change color on hover */
#dropdown-content a:hover {
    background-color: #121214 !important;
    color: rgb(255, 255, 255) !important;
}

/* Show the dropdown on hover */
#dropdown:hover #dropdown-content {
    display: block !important;
}
  
  .spacerIndex {
    margin-top: 1000px !important;
  }
  
  #logo {
    float: left !important;
    padding-left: 30px !important;
    margin-top: -45px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 100% !important;
  height: auto !important;
  }

  .TerraBruntonPosition {
    font-family: 'Tinos', serif ;;
    font-weight: 100;
    font-size: 2.0em;
    text-shadow: 
    1px 1px 0 white,
    -1px 1px 0 #ffffff,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff;
   }
  

   #linksNav > #logo > #logoHover > img{
    background-color: transparent;
   }

  
  #linksNav {
    padding-right: 100px !important;
    
  }

  main {
    background-image: url('me.png'); /* Replace 'your-background-image.jpg' with the actual file name */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}





@keyframes slideAndFadeIn {
  from {
    transform: translateY(-300%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInWelcome {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hiImTerraWelcomeContainer {
  display: flex;
  flex-direction: column;
  padding-left: 50%;
  margin-top: -150px;
  font-family: 'Tinos', serif;
}



.hiImTerra {
 
  font-size: 1.5em !important;
  animation: slideAndFadeIn 1.0s ease-out; /* Adjust the duration and timing function as needed */
}





.welcome {
  
  font-size: 7em;
  padding-bottom: 0px;
  opacity: 0; /* Set initial state to invisible */
  animation: fadeInWelcome 2s ease-out 2s forwards; /* Start after 1 second, and keep the final state */
}

.indexVerbageContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: left;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 250px;
  padding-bottom: 50px;
  
}

.indexVerbageContainer > p {
  font-size: 1.25em;
  padding-top: 20px;
  margin-top: 0px;
}

.ideasAreEngines {
  font-size: 2.75em;
  font-family:  'Tinos', serif ;
  margin-top: -200px;
}


/*---------------------------------------------------------------Biography________________________________________________*/







/*----------------------------------DM positioning on page---------------------------------------*/

.musicVideoPosition {
  padding-left: 20%;
  padding-top: 200px;
}

#podcastPosition {
  padding-left: 20%;
  padding-top: 200px;
}

.tutorialPosition {
  padding-left: 20%;
  padding-top: 200px;
}

#voiceOverPosition {
  padding-left: 20%;
  padding-top: 200px;
}

.biographyWord {
  font-size: 2em;
  margin-top: 45px;
  background-color: white;
  margin-right: 70%;
}

.digitalMedia {
  font-size: 2em;
  padding-top: 45px;
 }

.musicVideoWord {
  font-size: 2em;
  padding-top: 30px;
}

.infographicWord {
  padding-top: 30px;
  font-size: 2em;
}

.shortStoryWord {
  padding-top: 30px;
  font-size: 2em;
}



.iconsEmojiWord {
  padding-top: 30px;
  font-size: 2em;
}

.illustrationWord {
  padding-top: 30px;
  font-size: 2em;
}

.podCastWord {
  padding-top: 30px;
  font-size: 2em;
}

.websitesWord {
  padding-top: 10px;
  font-size: 2em;
  background-color: white;
  margin-right: 1100px;
  margin-left: 100px;
}

.tutorialVideoWord {
  padding-top: 30px;
  font-size: 2em;
}

.voiceOverWord {
  padding-top: 30px;
  font-size: 2em;
}

.resumeWord {
  font-size: 2em;
  padding-top: 15px;
}

.prototypesWord {
  font-size: 2em;
  padding-top: 18px;
}

.websiteWord {
  font-size: 2em;
  padding-top: 20px;
}

.wordContact {
  font-size: 2em;
  padding-top: 40px;
}
#infographicPosition {
  padding-left: 20%;
  padding-top: 200px;
  
}

.infographicDescription > p{
  font-size: 1.25em;
}

#infographicImage {
  width: 1000px;
}

#pdfPosition {
  padding-left: 30%;
  padding-top: 150px;
}

#sspdfPosition {
  padding-left: 30%;
  padding-top: 150px;
}



#iconsEmojisPosition {
  padding-top: 200px;
  padding-bottom: 200px;
  display: flex;
  flex-direction: column;
}

#iconsEmojisPosition > img{
padding-left: 25%;
}

.iconsPosition {
  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-right: 20px;
  padding-top: 150px;
}

.iconsPosition img {
  padding-right: 60px;
}


#illustrationPosition img{
  margin-top: 200px;
  margin-left: 24%;
  box-shadow: 19px 19px 19px gray;
}


/*------------------------------------------------------websites------------------------------------------*/

.websitesFlexContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 250px;
}

.websitesFlexContainer > div {
 
  margin: 0px 0px 200px 0px;
  
}

.websiteDescriptionList {
  width: 700px;
}

.websitesFlexContainer > div > img {
  border: 8px solid rgb(79, 78, 78);
  box-shadow: 15px 15px 20px gray;
  border-radius: 10px;
}

/*------------------------------------------------------prototypes and wire frames----------------------------------------*/
.prototypeFrame {
  
  margin-left: 20%;
  margin-bottom: 200px;
}

.aboutPrototype {
   margin: 2% 20% ;
}

.cellPrototypeFrame {
  margin-left: 35%;
  margin-top: 200px;
}

/*---------------------------------------------------resume-------*/
.resumePngPdf {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 165px;
}

.resumePng > img{
 
    width: 600px;
    
    border: 1px black solid;
    border-radius: 15px;
    box-shadow: 15px 15px 15px gray;
}

.resumePdf > embed {
 
 width: 300px;
 height: 450px;
 
}

.resumePng {

flex: 4;
}


.resumePdf {
  display: flex; 
 margin-bottom: 10%;
 flex: 4;
}

.downloadPdf {
 display: flex;
 flex: 2

}

.downloadPdf > p {
 text-align: center;
 padding: 50px 0px 50px 0px;
}

/*-----------------------------------------------------------reels---------------------------------------------*/
.reels {
  display: flex;
  flex-direction: column;
  padding-top: 300px;
  align-items: center;
  justify-content: space-around;
}

.reels > video {
  margin-bottom: 50px;
  border: #36383F solid 3px;
}

/*----------------------------------------------------------contact------------------------------------------*/

.pleaseReachOut {
  margin-top: 200px;
  text-align: center;
  font-size: 4em;
  font-family:  'Tinos', serif;
}

.contactContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}

.contactContainer > div {
  margin: 50px 100px 140px 100px;
}

.contactIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}



.contactIcon > a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.contactIcon > a:hover {
  color: rgb(0, 76, 255);
}



/*------------------------------------------------------------infographic-----------------------------------*/

.infographicDescription {
  margin: 3% 20%;
}



/*-----------------------------------------------------------footer-----------------------------------------*/

footer {
  background-image: url("footer.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 240px;
  margin-top: 125px;
  
}
.copyrightPosition{
  padding-top: 200px;
  padding-left: 25px;
  color: rgb(255, 255, 255);
}


.mobileNav {
  display: none;
}


#dmMobile {
  display: none;
}
#mobileDmNavbar {
  display: none;
}

.dmFooter {
  display: none;
}



.bird{
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg');
  filter: invert(34%) sepia(55%) saturate(427%) hue-rotate(141deg) brightness(93%) contrast(91%);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  
  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
}

.bird-one{
  animation-duration: 1s;
  animation-delay: -0.5s;

}
.bird-two{
  animation-duration: 0.9;
  animation-delay: -0.75.s;

}
.bird-three{
  animation-duration:1.25s;
  animation-delay: -0.25s

}
.bird-four{
  animation-duration: 1.1s;
  animation-delay: -0.5s;
}

.bird-container {
position: absolute;
padding-bottom: 20px;
left: -3%;
transform: scale(0) translateX(-10vw);
will-change: transform;

animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.bird-container-one{
animation-duration: 15s;
animation-delay: 0;
}



.bird-container-three{
animation-duration: 14.6s;
animation-delay: 9.5s;
}

.bird-container-four {
  animation-duration: 16s;
  animation-delay: 10.25s;
}
/* @keyframes fly-cycle {
  100%{
      background-position: -3600px 0;
  }
} */
@keyframes fly-cycle {

100% {
  background-position: -900px 0;
}

}

@keyframes fly-right-one {

0% {
  transform: scale(0.3) translateX(-10vw);
}

10% {
  transform: translateY(2vh) translateX(10vw) scale(0.4);
}

20% {
  transform: translateY(0vh) translateX(30vw) scale(0.5);
}

30% {
  transform: translateY(4vh) translateX(50vw) scale(0.6);
}

40% {
  transform: translateY(2vh) translateX(70vw) scale(0.6);
}

50% {
  transform: translateY(0vh) translateX(90vw) scale(0.6);
}

60% {
  transform: translateY(0vh) translateX(110vw) scale(0.6);
}

100% {
  transform: translateY(0vh) translateX(110vw) scale(0.6);
}

}

@keyframes fly-right-two {

0% {
  transform: translateY(-2vh) translateX(-10vw) scale(0.5);
}

10% {
  transform: translateY(0vh) translateX(10vw) scale(0.4);
}

20% {
  transform: translateY(-4vh) translateX(30vw) scale(0.6);
}

30% {
  transform: translateY(1vh) translateX(50vw) scale(0.45);
}

40% {
  transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
}

50% {
  transform: translateY(0vh) translateX(90vw) scale(0.45);
}

51% {
  transform: translateY(0vh) translateX(110vw) scale(0.45);
}

100% {
  transform: translateY(0vh) translateX(110vw) scale(0.45);
}

}

@media (min-width: 900px){
  main {
    background-image: url('me.png'); /* Replace 'your-background-image.jpg' with the actual file name */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}
}



/*------------------------------------------------------------------mobile version-------------------------------------------------------------------------------------------------------*/

@media (max-width: 900px) {
#navbar {
  display: none;
}

#mobileDmNavbar {
  display: flex;
  flex-direction: row;
}

.mobileLogoPosition {
float: right;
padding-right: 55px;
}


.mobileNav {
  display: block;
  height: 500px;
}
body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #1E1E23;
  opacity:1;
  font-family: 'Tinos', serif;
  font-size: 1.5em;
  font-weight: 1000;
  transition: 200ms;
}
a:hover {
  opacity:0.5;
}
ul {
  padding: 0;
  list-style-type: none;
}





nav {
  background-color: #1E1E23 !important;
  height: 150px;
}


#menuToggle {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  top: 25px !important;
  padding-left: 40px !important;
  z-index: 1 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

#menuToggle input
{
  display: flex !important;
  width: 40px !important;
  height: 32px !important;
  position: absolute !important;
  cursor: pointer !important;
  opacity: 0 !important;
  z-index: 2 !important;
}

#menuToggle span
{
  display: flex !important;
  width: 29px !important;
  height: 2px !important;
  margin-bottom: 5px !important;
  position: relative !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  z-index: 1 !important;
  transform-origin: 5px 0px !important;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease !important;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0% !important;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100% !important;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px) !important;
  background: #36383F !important;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2) !important;
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px) !important;
}

#menu
{
  position: absolute !important;
  width: 180px !important;
  height: 500px !important;
  box-shadow: 0 0 10px #85888C !important;
  margin: -50px 0 0 -50px !important;
  padding: 50px !important;
  padding-top: 125px !important;
  background-color: #F5F6FA !important;
  -webkit-font-smoothing: antialiased !important;
  transform-origin: 0% 0% !important;
  transform: translate(-100%, 0) !important;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0) !important;
}

#menuBiography
{
  position: absolute !important;
  width: 300px !important;
  height: 675px !important;
  box-shadow: 0 0 10px #85888C !important;
  margin: -50px 0 0 -50px !important;
  padding: 50px !important;
  padding-top: 125px !important;
  background-color: #F5F6FA !important;
  -webkit-font-smoothing: antialiased !important;
  transform-origin: 0% 0% !important;
  transform: translate(-100%, 0) !important;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0) !important;
}

#menuBiography li {
  padding: 15px 0 !important;
  transition-delay: 2s !important;
}

#menu li
{
  padding: 15px 0 !important;
  transition-delay: 2s !important;
}

#menuToggle input:checked ~ ul
{
  transform: none !important;
}

.hiImTerraWelcomeContainer {
  display: flex;
  flex-direction: column;
  padding-left: 0%;
  margin-left: 0%;
  padding-bottom: 300px;
  font-family: 'Tinos', serif;
}
.hiImTerra {
 
  font-size: 3.0em;
  animation: slideAndFadeIn 1.0s ease-out; /* Adjust the duration and timing function as needed */
}




.welcome {
  
  font-size: 4em;
  padding-bottom: 0px;
  opacity: 0; /* Set initial state to invisible */
  animation: fadeInWelcome 1.5s ease-out 1.5s forwards; /* Start after 1 second, and keep the final state */
}

main {
  background-image: url('meMobile.png'); /* Replace 'your-background-image.jpg' with the actual file name */
  
  background-repeat: no-repeat;
  height: 100vh; /* Adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -400px;
}


.indexVerbageContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  padding-left: 7%;
  padding-right: 7%;
 margin-top: -300px;
  
}

.indexVerbageContainer > p {
  font-size: 1.25em;
  
}

.ideasAreEngines {
  font-size: 2.75em;
  font-family:  'Tinos', serif ;
  padding-top: 200px;
}
.bird-container {
display: none;
    
}
/*--------------------------------------------mobile----biography--------------------------------------*/




#pastBody {
  border: #121214 solid 2px;
  margin-top: -300px !important;
  z-index: 200;
  font-size: .75em;
}

.timeline {
  padding-top: 50px;
}

.timelineDates {
  color: rgb(56, 55, 55);
  text-align: center;
  display: block !important;
  padding-top: 50px;
  margin-bottom: -90px;
}


.timelineDates {
  display: none;
}



.timeline ul {
  background: #ffffff;
  padding: 50px 0;
 
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1.5px;
  margin: 0 auto;
  padding-top: 50px;
  background: #4a4949;
  color: rgb(0, 0, 0);
  
}

.timeline ul li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
  z-index: 1;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 10rem !important;
  padding: 15px;
  box-shadow: 0 10px 50px #5f5f5e82;
}

.timeline ul li div::before {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 70px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #fcab1f transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -200px !important;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #fcab1f;
}

time {
  display: block;
  font-size: 2.0em !important;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #fcab1f;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0) ;
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0) ;
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

/*---------------------------------------------------------------------------mobile Resume--------------------------------------------------*/
.resumePngPdf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: -300px;
}

.resumePng img{
 display: flex;
    width: 100%;
    
    border: 1px black solid;
    border-radius: 15px;
    box-shadow: 15px 15px 15px gray;
}

.resumePdf embed {
 display: flex;
 width: 300px;
 height: 450px;
 
}

.resumePng {
display: flex;
flex: 4;
padding-left: 30px;
padding-right: 30px;
}


.resumePdf {
  display: flex; 
 margin-bottom: 10%;
 flex: 4;
}

.downloadPdf {
 display: flex;
 flex: 2

}

.downloadPdf > p {
 text-align: center;
 padding: 50px 0px 50px 0px;
}


/*------------------------------------------------------------mobile websites-----------------------------------------------------------------*/
.websitesFlexContainer {
 padding-left: 75px;
  
  margin-top: -280px;
}
.websitesFlexContainer > div > img {
  width: 80%;
  
}
.websitesFlexContainer > div > p {
  width: 80%;
}

/*------------------------------------------------------------------mobile DM---------------------------------------------------------------*/
#sspdfPosition embed {
  width: 100%;
  padding: 0px;
}

#sspdfPosition {
  padding: 0px;
  margin-top: 100px;
}


.dmFooter {
  display: block;
  margin-top: 75px;
}

#external {
 display: none;
  
}

.car-container > img {
  width: 400px;
}

#dmMobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: -300px;
}

#dmMobile > a > img {
  width: 200px;
  
}

#dmMobile > a {
  margin-top: 75px;
  border: #7c7a7a solid 1px;
  padding: 15px;
  box-shadow: 7px 7px 7px gray;
}

#dmMobile > a:hover {
  
  border: #7c7a7a solid 1px;
  opacity: 1; 
  box-shadow: 22px 22px 22px gray;
  
}

.mobileDmExamples {
  font-family: 'Tinos', serif;
  font-size: 2em;
}

#mobileDmNavbar a {
  float: right;
  padding-top: 50px;
}

#mobileDmNavbar a:hover {
opacity: 1;
}

#mobileDmNavbar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
}

.musicVideoPosition > iframe {
    width: 80%;
    height: 300px;
    margin-left: 10%;
    margin-right: 10%;
}
.musicVideoPosition {
  padding-left: 0%;
  padding-top: 100px;
}

#podcastPosition > iframe {
 width: 80%;
 height: 300px;
 margin-left: 10%;
 margin-right: 10%;
}

#podcastPosition {
  padding-left: 0%;
  padding-top: 100px;
}

#voiceOverPosition {
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 100px;
}

#voiceOverPosition > iframe {
  width: 80%;
 height: 300px;
 margin-left: 10%;
 margin-right: 10%;
}

#infographicImage {
  width: 100%;
}

#infographicPosition {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 100px;
  
}
 .infographicDescription {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
 }



#illustrationPosition {
  width: 100%;
}

#illustrationPosition > img {
  width: 80%;
  
  margin-top: 90px;
  margin-left: 10%;
}

#iconsEmojisPosition {
  width: 100%;
  margin-top: 0px;
  padding-top: 0px;
  margin-left: 0%;
}

#iconsEmojisPosition > img {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 0px;
  padding-right: 0px;
}

.iconsPosition {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.iconsPosition > img {
  width: 75px;
  padding-bottom: 100px;
  padding: 0px;
  margin: 0px;
}

.tutorialPosition {
  margin-top: -400px;
  width: 100%;
  margin: 100px 0px 0px 0px;
  padding: 0px;
}

.tutorialPosition > iframe {
  width: 80%;
 height: 300px;
 margin-left: 10%;
 margin-right: 10%;
}

#mobileDmNavbar > a > img{
 width: 50px;
}




/*---------------------------------------------------------------------mobile Prototypes-------------------------------------------------*/



.prototypeFrame {
  
 
  margin-bottom: 50px;
}

.aboutPrototype {
   margin: 10% 2% ;
}

.cellPrototypeFrame {
  margin-left: 5%;
  margin-top: -200px;
}

.cellPrototypeFrame > iframe {
  
  width: 80%;
}

.prototypeFrame > iframe {
  width: 90%;
  height: 400px;
 
}

.prototypeFrame {
  margin-left: 0px;
  padding-left: 0px;
}

/*------------------------------------------------------------------mobile contact-----------------------------------------*/

.pleaseReachOut {
  margin-top: -220px;
}

.pleaseReachOut > p {
  font-size: .5em !important;
}

.contactContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
}

.contactContainer > div {
  margin: 20px;
  font-size: 0.75em;
}



.contactIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}


.afterCarPassesText {
   margin: 0px!important;
   padding: 10px !important;
   font-size: 1.2em !important;
}




}