/* Mobile first layout. Within each breakpoint, base styles, layout styles, module styles */


/* Base styles for smallest screen */

@import url('https://fonts.googleapis.com/css?family=Nunito:100.200,300,400,600|Open+Sans:100,200,300,400,600|Source+Sans+Pro:100,200,300,400,600,700');
/* Apparently nunito sans is less round. Compar to Avenir, there is some disagreement on this. Google says Download will be slow*/

/*@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/webFonts/opensans_regular_macroman/OpenSans-Regular-webfont.woff') format('woff'),
}*/

/* Set base font size to default browser size, usu 12 or 14 px, for making small (<28px) text resizable */
/* Padding to make fixed navbar not overlap the rest of the page */
body {
  padding-top:80px;
}

h1, .h1-like {
  font-family: 'Source Sans Pro', 'Nunito', sans-serif;
  font-size: 36px; 
  line-height: 1.44; 
  font-weight: 600;
  color: #008d88;
}

/* 20181203 Fix problem where mailto links get dark blue on hover */
a:hover{color:white;cursor:pointer;}

a.beta-link {
 color: black;
 text-decoration:underline;
 white-space: pre-wrap; 
 }
a.beta-link:hover{color: #008d88;cursor:pointer;}

.get-earthquake-ready-headline{text-align:left;font-weight:normal !important;}

.join-our-mailing-list-headline{text-align:left;font-weight:normal !important;}

/* KVM says this is still too wide, adding columns doesn't really fix */
.developing-headline{
  width:80%;
  margin-right:auto;
  margin-left:auto;
}
.myshake-is{
  width:83%;
  margin-right:auto;
  margin-left:auto;
}

.have-earthquake-information{
  font-weight:300 !important;
}

.join{
  width:85%;
  margin-right:auto;
  margin-left:auto;
}

.by-the-numbers{
  font-family: 'Source Sans Pro', 'Nunito', sans-serif;
  font-size: 60px; 
  line-height: normal; 
  font-weight: 600;
  color: #008d88;
  text-align:center;
  margin-bottom:0px;
}

.collect-detect-record {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: #4a4a4a;
  margin-bottom:0px;
}

h2, .h2-like {
  font-family: 'Source Sans Pro', 'Nunito', sans-serif;
  font-size: 32px;
  line-height: 1.56;
  font-weight: 600;
  color: #4a4a4a;
  padding-top:20px; /*Standard 20 px between elements minus 8px margin already around it */
  margin-top:0px;
  margin-bottom:0px;
}

h2.our-team-header{padding-bottom:15px;}

h3, .h3-like {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 20px;
  line-height: 2.00;
  font-weight: normal;
  color: #4a4a4a;
}

a.publications{
  color:#4a4a4a;
}

a.publications:hover{
  color:#4a4a4a;
  text-decoration: underline;
  cursor:pointer;
}

.paragraph-padding{
    padding-top:20px;
    margin-top:0px;
    margin-bottom:0px;
  }

.body-text {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  font-size: 18px;
  font-weight: normal;
  color: #4a4a4a;
}

.separate-pody-text-paragraphs{
  padding-top:20px;
}

/* Specific to details below large numbers in about us */
.details{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #4a4a4a;
  padding-bottom:40px;
  padding-top:27px;
  margin-bottom:0px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
}

.name-team-member{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.08;
  letter-spacing: normal;
  color: #4a4a4a;
  margin-bottom:0px;
}

.position{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: normal;
  text-align: left;
  color: #4a4a4a;
  line-height:normal;
  margin-bottom:30px;
}

.bottom-callout-header{
  font-family: 'Source Sans Pro', 'Nunito', sans-serif;
  font-size: 36px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.44;
  letter-spacing: normal;
  color: #ffffff;
  text-align:left;
  margin-top:0px;
  padding-top:0px;
  padding-bottom:20px;
}

.bottom-callout-text{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  color: #ffffff;
  text-align:left;
  padding-top:0px;
  padding-bottom:20px;
  margin-bottom:0px;
}

/* FAQ styles are a little different */
h1.faq{
  font-size:36px;
  line-height:1.44;
  margin-bottom:0px;
}
h2.faq{
  font-size:18px;
  line-height:1.67;
  width:calc(100% - 60px);
  font-weight: normal;
  padding-top:33px;
  padding-bottom:33px;
  margin-top:0px;
  margin-bottom:0px;
}

h2.faq:hover{color:#00A39E;cursor:pointer;}

.faq-arrow:hover{color:#00A39E;cursor:pointer;}

a.faq{
  font-size:18px;
  line-height:2.22;
}

a.tutorial-link{
  color:#4a4a4a;
}
a.tutorial-link:hover{
  color:#4a4a4a;
  text-decoration:underline;
}

/* Scooches the FAQ tab text down */
.faq-tab-text{
  vertical-align:text-top;
}

h2.explore-faq{
  font-family: 'Open Sans', Tahoma, sans-serif;
  line-height:2.22;
  font-size:18px;
  font-weight: normal;
  margin-top:0px;
  margin-bottom:0px;
  padding-top:20px;
  padding-bottom:40px;
  width:80%;
  margin-right: auto;
  margin-left: auto;
}
.faq-body-text{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size:16px;
  line-height:1.75;
  padding-bottom:33px;
  margin-bottom:0px;
}

a.faq-tabs{
  border-left-color:#fff !important;
  border-right-color:#fff !important;
  border-top-color:#fff !important;
  border-bottom-color:#fff !important;
  margin-bottom:0px;
  padding-bottom:0px;
}

ul.faq-tabs{
  border-bottom-color:#fff !important;
}

#research{padding-top:20px;}
#mobile-app{padding-top:20px;}

/* Set margins on hr to 0 because they are messing with the FAQ spacing */
hr {
  width:100%;
  height:2px;
  color:#dcdcdc;
  margin-top:0px;
  margin-bottom:0px;
}

hr.last-row {
  padding-bottom:20px;
}

.centered{text-align: center;}

.teal{color:#008d88;}

.white{color:#ffffff;}

.teal-background{background-color:#008d88;}

.off-white-background{background-color:#F7F7F7;}

.underlined-link{
  text-decoration: underline;
}

.big-underline {
  position:relative;
}

.underline {
  position:relative;
}

.big-underline::after {
  height: 22px;
  position: absolute;
  content: "";
  background-color:#f0f89d;
  width: 100%;
  bottom: -2px;
  right: -0.2rem;
  left:0.75rem;
  z-index:-1;
}

.underline::after {
  height: 22px;
  position: absolute;
  content: "";
  background-color:#f0f89d;
  width: 100%;
  bottom: -4px;
  right: -0.2rem;
  left:0.75rem;
  z-index:-1;
}

/* Layout styles for smallest screen (header, footer)*/

/* Really having trouble with the padding here, creating single class for each row :( */

.get-earthquake-ready-row{
  padding-top:60px;
  padding-bottom:40px;
}
.as-seen-in-row{
  padding-top:40px;
  padding-bottom:20px;
}
.press-row{
  padding-top:0px;
  padding-bottom:40px;
}
.collect-detect-record-row{
  padding-top:20px;
  /* This is 0 px because of the padding on each details class element */
  padding-bottom:0px;
}
.learn-more-button-row{
  padding-top: 40px;
  padding-bottom:20px;
}
/* Has to have no padding so it collapses */
.main-video-row{
  padding-top:40px;
  padding-bottom:20px;
}

.developing-network-row{
  padding-top:60px;
  padding-bottom:60px;
}
.join-row{
  padding-top: 40px;
  padding-bottom:20px;
}
.by-the-numbers-row{
  padding-top:20px;
  /* This is 0 px because of the padding on each details class element */
  padding-bottom:0px;
}
.mission-row{
  padding-top: 40px;
  padding-bottom:40px;
}
.myshake-delivers-row-1{
  padding-top: 40px;
  padding-bottom: 0px;
}
.myshake-delivers-row-2{
  padding-top: 0px;
  padding-bottom:40px;
}
.machine-learning-row{
/* Visually need slightly less padding bc brain is on white background */  
  padding-top: 30px;
  padding-bottom:30px;
/* Needs additional padding because other things use nezted containers */
  padding-left:15px;
  padding-right:15px  
}
.video-row{
  /*padding-top:0px;*/
  padding-top:20px;
  padding-bottom:20px;
  /* Needs additional padding because other things use nezted containers */
  padding-left:15px;
  padding-right:15px  
}
.team-row{
  /* There is other padding on the h2 element */
  padding-top:5px;
  padding-bottom:10px;
}
/* Team pix row nested inside team row */
.team-pix-row{padding-top:20px;}
.get-myshake-row{
  padding-top:40px;
  padding-bottom:40px;
}

.how-can-we-help-row{
  padding-top:60px;
  padding-bottom:0px;
}
.still-question-row{
  padding-top:40px;
  padding-bottom:20px;
}

/* OLD, these were not working, get them out */
.myshake-row{
  padding-top:0px;
  padding-bottom:20px;
}

.myshake-row-first{
  padding-top:0px;
  padding-bottom:20px;
}

.myshake-row-last{
  padding-top:20px;
  padding-bottom:20px;
}

.logo{
  width: 220px;
  /*height: 56px;*/
  height: 81px;
  /*margin-top:14px;*/
  margin-top:0px;
  margin-left:0px;
}

.myshake-navbar-row{
  padding-top:10px;
  padding-bottom:10px;
}

.header-menu-link {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  text-align: right;
  color: #4a4a4a;
}

.extra-padding{ /* class to add extra padding to even out with nested containers */
  padding-right:30px;
  padding-left:30px;
}

.footer-row{
  padding-top:0px;
  padding-bottom:40px;
  padding-left:15px;
  padding-right:15px;
}

.footer-menu-header{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #4a4a4a;
  padding-top:0px;
  padding-bottom:0px;
  margin-bottom:0px;
  margin-top:0px;
  padding-top:40px;
}

ul.footer-menu-list{
  padding-top:0px;
  margin-bottom: 0px;
  margin-top: 0px;
}

ul.footer-menu-list > li {
  padding-top:20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

ul.footer-menu-list > li > a {
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #4a4a4a;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  margin-top: 20px;
  margin-bottom: 20px;
}

.twitter-follow{
  margin-top:20px;
}
.facebook-share{
  margin-top:20px;
}
.twitter-share{
  margin-top:20px;
}


/* Other styles for smallest screen */

/* Special text styles */

.by-the-numbers-underline {
  width: 80%;
  height: 4px;
  background-color:#b9f6f4;
  margin-top:0px;
}

/* Video styles */
#phone-video-container{display:none;}
#phone-video{display:none;}
/* phone image for video */
#phone-video-phone{display:none;}
#phone-coming-soon-phone{display:none;}

.phone-video-container-wrapper{
  position:relative;
  /*height:293px;
  width:205px;*/
  height:444px;
  width:254px;
  margin-left:auto;
  margin-right:auto;
}

#phone-video-container-small-1, #phone-video-container-small-2, #phone-video-container-small-3 {
  display:block;
  width:254px;
  height:444px;
  margin-top:40px;
}

#phone-video-small-1, #phone-video-small-2, #phone-video-small-3 {
  /*display:block;*/
  position:absolute;
  /*top:29px;
  left:20px;  */
  /*margin-top:30px;*/
  margin: 0 auto;
  border: 5px outset #f8d5d1;
}
/* phone image for video */
#phone-video-phone-small-1, #phone-video-phone-small-2, #phone-video-phone-small-3 {
  display:none;
  position:absolute;
  /*height:412px;*/
  /*height:618px;*/
  width:254px;
}

#email-envelope{display:none;}

#main-video-container{display:none;}
#main-video{display:none;}

/* Image styles */
/*News logos*/

#mobile-news-logos{width:90%;margin-right:5%;margin-left:5%;}
#desktop-news-logos{display:none;}

/*Collect Detect Record Icons */
.collect-detect-record-image{}

.team {width:100%;}

.gr-waveform {
  width: 100%;
  height:100%;
  max-height:192px;
}

.myshake-neural {
  padding-top:20px;
  width: 100%;
  max-width:410px;
}

.our-mission-flowchart{
  padding-top:20px;
  width: 100%;
}

.about-us-video{
  width: 100%;
  padding-bottom:20px;
}

.searching-graphic{
  width:30px;
  height:30px;
  margin-top:1px;
  margin-right:8px;
  /*margin-bottom:7px;*/
  margin-bottom:0px;
  margin-left:0px;
}
.alert-phone{
  width:18px;
  height:30px; 
  margin-top:1px;
  margin-right:8px;
  /*margin-bottom:7px;*/
  margin-bottom:0px;
  margin-left:7px;
}

.faq-arrow{
  width:20px;
  height:11px;
  margin-top:49px;
  float:right;
}  

.faq-arrow:hover{color:#00A39E;cursor:pointer;}

/* Button styles */
/* Buttons in menu at this stage are not actual button-links, just links*/
.partner-button{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-weight: normal;
  line-height: normal;
  text-align: right;
  color: #4a4a4a;
}
.partner-button:hover{color:#4a4a4a;}
.about-button{
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: normal;
  text-align: right;
  color: #4a4a4a;
}
.about-button:hover{color:#4a4a4a;}

.learn-more-button{display:none;}

.email-list-button{
    border:#008d88 solid 2px;
    color: #008d88 !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius:8px;
    font-size: 20px !important;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    margin-left:0px;
    background-color:white;
    padding:9px 21px !important;
  }

.email-input{height:30px !important;color:black;}  

/* Get on google play and Download iTunes buttons */
.main-download-on-the-app-store{
  width:249px;
  padding-top:40px;
}
.main-get-it-on-google-play{
  width:251px;
  padding-top:40px;
}
.download-on-the-app-store{
  width:249px;
  padding-left:0px;
  margin-bottom:20px;
}
.get-it-on-google-play{
  width:251px;
  padding-left:0px;
}

/* State styles for smallest screen */
/* FAQ page */
.question{}

ul.faq-tabs::after{
  /* From steckinsights.com */
  content: ""; /* This is necessary for the pseudo element to work. */ 
  display: block; /* This will put the pseudo element on its own line. */
  margin: 0 auto; /* This will center the border. */
  width: 317px; /* Change this to whatever width you want. */
  padding-top: 1px; /* This creates some space between the element and the border. */
  border-bottom: 2px solid #dee2e6; /* This creates the border. Replace black with whatever color you want. */
  margin-bottom:-1px;
}

.active-question{color: #008d88 !important;}
img.active-arrow{transform: rotate(180deg);}

a.active{
  color: #008d88 !important;
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.22;
  letter-spacing: normal;
}
a.disabled{
  color: 
  #919191 !important;
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.22;
  letter-spacing: normal;
}
a.active::after{
  /* From steckinsights.com */
  content: ""; /* This is necessary for the pseudo element to work. */ 
  display: block; /* This will put the pseudo element on its own line. */
  margin: 0 auto; /* This will center the border. */
  width: 100%; /* Change this to whatever width you want. */
  padding-top: 0px; /* Used to be 5px This creates some space between the element and the border. */
  border-bottom: 4px solid #00b5af; /* This creates the border. Replace black with whatever color you want. */
  /*margin-bottom:-10px;*/
  margin-bottom:-1px;
}
.answer{display:none;}

/* NO NEW STYLES AT THIS BREAKPOINT */
/* Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  /* Base styles for min-width: 768px*/
  h1, .h1-like {
    font-size:44px;
    line-height: 1.41;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.41;
    letter-spacing: 1.6px;
  }

 .get-earthquake-ready-headline{text-align:left;}
 .join-our-mailing-list-headline{text-align:left;}


/* KVM says this is still too wide, adding columns doesn't really fix */
  .developing-headline{
    width:80%;
    margin-right:auto;
    margin-left:auto;
  }

  .myshake-is{
    width:90%;
    margin-right:auto;
    margin-left:auto;
  }

.have-earthquake-information{
  width:100%;
}

  .by-the-numbers{
    font-family: 'Source Sans Pro', 'Nunito', sans-serif;
    font-size: 60px; 
    line-height: normal; 
    font-weight: bold;
    color: #008d88;
    text-align:center;
  }

/* No changes at this width */
  .collect-detect-record {}

  h2, .h2-like {
    font-size: 32px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56;
    letter-spacing: normal;
  }
  h3, .h3-like {
    font-size:20px;
    line-height: 2;
  }

  .paragraph-padding{
    padding-top:40px;
  }

  .body-text {
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
  }
  .details{
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    width:100%;
    padding-bottom:0px;
  }

  .by-the-numbers-underline {
    width: 100%;
    height: 4px;
    background-color:#b9f6f4;
    margin-top:0px;
  }

  .name-team-member{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.08;
    letter-spacing: normal;
    color: #4a4a4a;
  }

  .position{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    color: #4a4a4a;
    line-height:normal;
    margin-bottom:40px;
  }

  .bottom-callout-header{
    font-family: 'Source Sans Pro', 'Nunito', sans-serif;
    font-size: 44px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.41;
    letter-spacing: 1.6px;
    text-align:left;
    margin-top:0px;
    padding-top:0px;
  }

  .bottom-callout-text{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 2;
    letter-spacing: normal;
    color: #ffffff;
    text-align:left;
    margin-bottom:0px;
    padding-bottom:0px;
  }

  .align-with-button{
    /*position:absolute;*/
    /*bottom:-10px;*/
    /* Above commented out when we did not have second button at first launch */
    bottom:30px;
  }

  .big-underline::after {
    bottom: 0.5rem;
    right: -0.0rem;
    left:0.75rem;
    z-index:-1;
  }

  .underline::after {
    bottom: 0.5rem;
    right: -0.2rem;
    left:0.75rem;
    z-index:-1;
  }

  /* FAQ styles are a little different */
  h1.faq{
    font-size:44px;
    line-height: 1.41;
    letter-spacing: 1.6px;
    font-weight: 600;
    margin-bottom:0px;
    padding-top:80px;
  }
  h2.faq{
    font-size:20px;
    line-height:2;
    padding-top:50px;
    padding-bottom:50px;
    margin-top:0px;
    margin-bottom:0px;
  }
  a.faq{
    font-size:28px;
    line-height:1.79;
  }
  h2.explore-faq{
    line-height:2;
    font-size: 20px;
    font-weight: normal;
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:120px;
    width:80%;
    margin-right:auto;
    margin-left: auto;
  }
  .faq-body-text{
    font-size:18px;
    line-height:1.67;
    padding-bottom:50px;
    margin-bottom:0px;
  }

  hr.last-row {
    padding-bottom:40px;
  }

  #research{padding-top:40px;}
  #mobile-app{padding-top:40px;}

  .big-underline::after {
    bottom: -0.0rem;
    right: -0.0rem;
    left:0.75rem;
    z-index:-1;
  }

  .underline::after {
    bottom: -.2rem;
    right: -0.2rem;
    left:0.75rem;
    z-index:-1;
  }

  /* Layout styles for min-width: 768px (header, footer)*/

  .myshake-navbar-row{
    padding-top:30px;
    padding-bottom:30px;
  }

  .logo{
    margin-top:0px;
    margin-left:0px;
  }

  /* Really having trouble with the padding here, creating single class for each row :( */

  .get-earthquake-ready-row{
    padding-top:120px;
    padding-bottom:80px;
  }
  .as-seen-in-row{
    padding-top:20px;
    padding-bottom:0px;
  }
  .press-row{
    padding-top:20px;
    padding-bottom:40px;
  }
  .collect-detect-record-row{
    padding-top:20px;
    padding-bottom:80px;
  }
  .learn-more-button-row{
    padding-top:20px;
    padding-bottom:0px;
  }

  .main-video-row{
    padding-top:80px;
    padding-bottom:60px;
  }
  .developing-network-row{
    padding-top:160px;
    padding-bottom:40px;
  }
  .join-row{
    padding-top:20px;
    padding-bottom:0px;
  }
  .by-the-numbers-row{
    padding-top:20px;
    padding-bottom:80px;
  }
  .mission-row{
    padding-top:80px;
    padding-bottom:80px;
  }
  .myshake-delivers-row-1{
    padding-top:80px;
    padding-bottom:0px; 
  }
  .myshake-delivers-row-2{
    padding-top:20px;
    padding-bottom:80px; 
  }
  .machine-learning-row{
    padding-top:60px;
    padding-bottom:40px;
  }
  .video-row{
    /*padding-top:0px;*/
    padding-top:60px;
    padding-bottom:60px;
  }
  .team-row{
    padding-top:60px;
    padding-bottom:40px;
  }
  .team-row > div > h2 {text-align:center !important;}

  .get-myshake-row{
    padding-top:80px;
    padding-bottom:80px;
  }

/* FAQ */
  .how-can-we-help-row{
    padding-top:160px;
    padding-bottom:0px;
  }
  .still-question-row{
    padding-top:80px;
    padding-bottom:80px;
  }

/* OLD these were not working, get them out */
  .myshake-row {
    padding-top:40px;
    padding-bottom:40px;
  }
  .myshake-row-first {
    padding-top:80px;
    padding-bottom:40px;
  }
  .myshake-row-last {
    padding-top:40px;
    padding-bottom:80px;
  }

  .myshake-row-callout{
    padding-top:80px;
    padding-bottom:80px;
  }

  .team-1{padding-right:45px;padding-left:15px;}
  .team-2{padding-right:15px;padding-left:45px;}
  .team-3{padding-right:45px;padding-left:15px;}
  .team-4{padding-right:15px;padding-left:45px;}
  .team-5{padding-right:45px;padding-left:15px;}
  .team-6{padding-right:15px;padding-left:45px;}
  .team-7{padding-right:45px;padding-left:15px;}
  .team-8{padding-right:15px;padding-left:45px;}
  .team-9{padding-right:45px;padding-left:15px;}

  .position{margin-bottom:50px;}

  .footer-row{
    padding-top:0px;
    padding-bottom:60px;
    padding-left:0px;
    padding-right:0px;
  }

  .footer-menu-header{
    padding-top:40px;
    padding-bottom:0px;
    margin-bottom:0px;
  }

  ul.footer-menu-list{
    padding-top:0px;
  }

  ul.footer-menu-list > li {
    padding-top:24px;
  }

  ul.footer-menu-list > li > a {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #4a4a4a;
  }

  /* Other styles for min-width: 768px */
  /* Other styles for min-width: 768px: Special text styles */

  /* Video styles */
  #phone-video-container{
    display:block;
    width:308px;
    height:618px;
    margin-top:30px;
  }
  #phone-video{
    display:block;
    position:absolute;
    top:88px;
    right:64px;  
    margin-top:30px;
  }
  /* phone image for video */
  #phone-video-phone{
    display:block;
    position:absolute;
    height:618px;
    width:308px;
  }

.phone-video-container-wrapper{
  position:relative;
  height:618px;
  /*width:205px;*/
  width:308px;
  margin-left:auto;
  margin-right:auto;
}

#phone-video-container-small-1, #phone-video-container-small-2, #phone-video-container-small-3 {
  display:block;
  width:308px;
  height: 618px;
}

#phone-video-container-small-1, #phone-video-container-small-2 {margin-top:30px;}

#phone-video-container-small-3 {margin-top:50px;}

#phone-video-small-1, #phone-video-small-2, #phone-video-small-3 {
  position:absolute;
  top:59px;
  left:30px; 
  margin:0; 
  margin-top:30px;
  border:none;
}
/* phone image for video */
#phone-video-phone-small-1, #phone-video-phone-small-2, #phone-video-phone-small-3 {
  display:block;
  position:absolute;
  /*height:412px;
  width:205px;*/
  height:618px;
  width:308px;
}

#phone-coming-soon-phone{display:block;width:100%;max-width:354px;float:right;}

#email-envelope{display:block;width:100%;max-width:354px;float:right;}

  #main-video-container{display:block;width:100%;min-width:720px;max-width:980px;height:auto;margin-left:auto;margin-right:auto;}
  #main-video{display:block;max-width:100%;height:auto;}

  /* Other styles for min-width: 768px: Image styles */

  /*News logos*/
  #mobile-news-logos{display: none;}
  #desktop-news-logos{display:block;width: 100%;padding-top:0px;}
  
  .collect-detect-record-image{margin-top:40px;}

  .searching-graphic{
    width:52px;
    height:52px;
    margin-right:12px;
    margin-left:5px;
  }
  .alert-phone{
    width:27px;
    height:45px; 
    margin-top:8px;
    margin-right:12px;
    margin-left:11px;
  }

  .faq-arrow{
    width:20px;
    height:11px;
    margin-top:49px;
    float:right;
  }

  /* Other styles for min-width: 768px: Button styles */

  .partner-button{
    border:#008d88 solid 2px;
    color: #008d88 !important;
    padding: 17px 21px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius:8px;
    margin-left:40px;
    font-size: 20px !important;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
  }

  a.partner-button:hover{
    color:#00A39E !important;
    border-color:#00A39E !important;
  }

  .about-button{
    border: none;
    color: #4a4a4a !important;
    /*padding: 20px 32px 15px 32px !important;*/
    padding: 20px 0px 15px 32px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px !important;
    border-radius:8px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: right;
  }

  a.about-button:hover{
    color:#00A39E;
  }

  /* Get on google play and Download iTunes buttons */
  .main-download-on-the-app-store{
    width:249px;
  }
  .main-get-it-on-google-play{
    width:251px;
  }

  .download-on-the-app-store{
    width:249px;
    padding-right:0px;
    margin-right:0px !important;
    margin-bottom:20px;
    float:right;
  }
  .get-it-on-google-play{
    width:251px;
    padding-right:0px;
    margin-right:0px !important;
    float:right;
  }

  /* Active styles for min-width 768*/
  ul.faq-tabs::after{
    width: 467px; /* Change this to whatever width you want. */ 
    position: absolute;
    bottom: -1px;
  }

  a.active::after{
    padding-top: 2px; /* Used to be 5px This creates some space between the element and the border. */
  }

}


/* ONLY FRONT PAGE VIDEO STYLES AT THIS BREAKPOINT */
/* Large devices (landscape tablets and small laptops, 992px and up) */
@media screen and (min-width: 992px) {
/* Video styles */
  #phone-video-container{
    display:block;
    width:308px;
    height:618px;
    margin-top:30px;
  }
  #phone-video{
    display:block;
    position:absolute;
    top:88px;
    right:30px;  
    margin-top:30px;
  }
  /* phone image for video */
  #phone-video-phone{
    display:block;
    position:absolute;
    height:618px;
    width:308px;
  }


  #phone-video-container-small-1, #phone-video-container-small-2 {margin-top:30px;}
  #phone-video-container-small-3 {margin-top:30px;}
}

/* Extra large devices (laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  /* Base styles for min-width: 1200px*/
  h1, .h1-like {
    font-size: 56px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 2px;
    text-align: center;
  }

h2.our-team-header{padding-bottom:35px;}

 .get-earthquake-ready-headline{
    text-align:left;
    margin-bottom:0px;
    padding-top:140px;
  }

.join-our-mailing-list-headline{
    text-align:left;
    margin-bottom:0px;
    padding-top:0px;
  }

  /* KVM says this is still too wide, adding columns doesn't really fix */
  .developing-headline{
    width:71%;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:0px;
  }
  .myshake-is{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    padding-top:40px !important;
  }

  .have-earthquake-information{
    width:93%;
  }

  .by-the-numbers{
    font-family: 'Source Sans Pro', 'Nunito', sans-serif;
    font-size: 80px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
  }

  .collect-detect-record {
    font-size: 36px;
    letter-spacing: 2px;
  }

  h2, .h2-like {
    font-size: 48px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.46;
    letter-spacing: 2px;
    padding-top:0px;
  }
  h3, .h3-like {
    font-size: 28px;
    line-height:1.79;
  }

/* KVM says this is still too wide, adding columns doesn't really fix */
  .join{width:100%;}

  .paragraph-padding{
    padding-top:20px;
  }

  /* classes body-text, myshake-row are the same */
  .body-text{
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.22;
    letter-spacing: normal;
  }

  .name-team-member{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.08;
    letter-spacing: normal;
    color: #4a4a4a;
    margin-bottom:0px;
  }

  .position{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    color: #4a4a4a;
    line-height:normal;
    margin-bottom:40px;
  }

  .details{
    font-size: 18px;
    font-weight: 600;
    width:100%;
  }

  .bottom-callout-header{
    font-family: 'Source Sans Pro', Tahoma, sans-serif;
    font-size: 56px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.44;
    letter-spacing: 2px;
    color: #ffffff;
    text-align:left;
    margin-top:0px;
    padding-top:0px;
  }

  .bottom-callout-text{
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 28px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.79;
    letter-spacing: normal;
    color: #ffffff;
    text-align:left;
    margin-bottom:0px;
  }

  .align-with-button{
    /*position:absolute;*/
    /*bottom:-12px;*/
    /* Above commented out when we did not have second button at first launch */
  }

  .big-underline::after {
    height: 22px;
    position: absolute;
    content: "";
    background-color:#f0f89d;
    width: 100%;
    bottom: 0.4rem;
    right: -0.2rem;
    left:0.75rem;
    z-index:-1;
  }

  .underline::after {
    height: 22px;
    position: absolute;
    content: "";
    background-color:#f0f89d;
    width: 100%;
    bottom: 0.2rem;
    right: -0.2rem;
    left:0.75rem;
    z-index:-1;
  }

  /* FAQ styles are a little different */
  h1.faq{
    font-family: 'Source Sans Pro', Tahoma, sans-serif;
    font-size: 56px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 2px;
    text-align: center;
    color: #008d88;
    margin-bottom:0px;
    padding-top:80px;
  }
  h2.faq{
    font-size:26px;
    line-height:1.92;
    padding-top:47px;
    padding-bottom:47px;
    margin-top:0px;
    margin-bottom:0px;
  }
  h2.explore-faq{
    line-height:1.79;
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 28px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.79;
    letter-spacing: normal;
    text-align: center;
    margin-top:0px;
    margin-bottom:0px;
  }
  .faq-body-text{
    font-size:18px;
    line-height:1.67;
    padding-bottom:40px;
  }

  hr.last-row {
    padding-bottom:80px;
  }

  #research{padding-top:60px;}
  #mobile-app{padding-top:60px;}
 
  /* Layout styles for min-width: 1200px (header, footer)*/
  .waveform{margin-right:-30px;}

  .team-1{padding-right:45px;padding-left:15px;}
  .team-2{padding-right:30px;padding-left:30px;}
  .team-3{padding-left:45px;padding-right:15px;}

  .team-4{padding-right:45px;padding-left:15px;}
  .team-5{padding-right:30px;padding-left:30px;}
  .team-6{padding-left:45px;padding-right:15px;}

  .team-7{padding-right:45px;padding-left:15px;}
  .team-8{padding-right:30px;padding-left:30px;}
  .team-9{padding-left:45px;padding-right:15px;}

  .myshake-navbar-row{
    padding-top:30px;
    padding-bottom:30px;
  }

  .footer-row{
    padding-top:40px;
    padding-bottom:60px;
    padding-left:0px;
    padding-right:120px;
  }

  .footer-menu-header{
    padding-top:40px;
    padding-bottom:0px;
    margin-bottom:0px;
  }

  ul.footer-menu-list{
    padding-top:0px;
  }

  ul.footer-menu-list > li {
    padding-top:26px;
  }

  ul.footer-menu-list > li > a {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #4a4a4a;
  }

  /* Really having trouble with the padding here, creating single class for each row :( */
  .get-earthquake-ready-row{
    padding-top:120px;
    padding-bottom:80px;
  }
  .as-seen-in-row{
    padding-top:80px;
    padding-bottom:0px;
  }
  .press-row{
    padding-top:80px;
    padding-bottom:80px;
  }
  
  .collect-detect-record-row{
    padding-top:50px;
    padding-bottom:40px;
  }
  .learn-more-button-row{
    padding-top:40px;
    padding-bottom:80px;
  }
  .main-video-row{
    padding-top:80px;
    padding-bottom:80px;
  }

  .developing-network-row{
    padding-top:120px;
    padding-bottom:80px;
  }
  .join-row{
    padding-top:80px;
    padding-bottom:30px;
  }
  .by-the-numbers-row{
    padding-top:50px;
    padding-bottom:120px;
  }
  .mission-row{
    padding-top:120px;
    padding-bottom:120px;
  }
  .myshake-delivers-row-1{
    padding-top:120px;
    padding-bottom:0px;
  }
  .myshake-delivers-row-2{
    padding-top:40px;
    padding-bottom:120px;
  }
  .machine-learning-row{
    padding-top:120px;
    padding-bottom:120px;
  }
  .video-row{
    /*padding-top:0px;*/
    padding-top:100px;
    padding-bottom:100px;
  }
  .team-row{
    padding-top:120px;
    padding-bottom:87px;
  }
  .get-myshake-row{
    padding-top:80px;
    padding-bottom:80px;
  }

  /* FAQ */
  .how-can-we-help-row{
    padding-top:120px;
    padding-bottom:0px;
  }
  .still-question-row{
    padding-top:80px;
    padding-bottom:80px;
  }

/* OLD, these were not working, get them out */
  .myshake-row {
    padding-top:40px;
    padding-bottom:40px;
  }
  .myshake-row-first {
    padding-top:120px;
    padding-bottom:80px;
  }
  .myshake-row-last {
    padding-top:80px;
    padding-bottom:120px;
  }

  .myshake-row-callout{
    padding-top:80px;
    padding-bottom:80px;
  }

/* Learn more button only on desktop version */  
  .learn-more-button{
    border:#008d88 solid 2px;
    color: #008d88 !important;
    padding: 17px 21px !important;
    text-align: center;
    text-decoration: none;
    display: block;
    border-radius:8px;
    font-size: 20px !important;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    margin-left:auto;
    margin-right:auto;
    width:260px;
  }

  a.learn-more-button:hover{
    color:#00A39E !important;
    border-color:#00A39E !important;
    text-decoration: none !important;
  }

  /* Get on google play and Download iTunes buttons */

  .main-download-on-the-app-store{
    /*width:249px;*/
    height:114px !important;
    float:left;
  }
  .main-get-it-on-google-play{
    /*width:251px !important;*/
    height:91px !important;
    float:right;
    margin-right:200px;
    margin-top:0px;
    padding-top:15px;
  }

  .download-on-the-app-store{
    width:249px;
    padding-right:0px;
    margin-right:0px !important;
    margin-bottom:30px;
    float:right;
  }
  .get-it-on-google-play{
    width:251px;
    padding-right:0px;
    margin-right:0px !important;
    float:right;
  }

  /* Other styles for min-width: 1200px */
  /* Other styles for min-width: 1200px: Special text styles */
  /* Other styles for min-width: 1200px: Image styles */

  /* Video styles */
  #phone-video-container{}
  #phone-video{margin-left:100px;}
  /* phone image for video */
  #phone-video-phone{left:72px;}

  #main-video-container{display:block;width:100%;min-width:720px;max-width:980px;height:auto;margin-left:auto;margin-right:auto;}
  #main-video{display:block;max-width:100%;height:auto;}

  /*News logos*/
  #mobile-news-logos{}
  #desktop-news-logos{padding-top:0px;}


  .collect-detect-record-image{margin-top:0px;}

  .faq-arrow{
    display:none;
  }
  /* Other styles for min-width: 1200px: Button styles */
}