/* Mobile First! Mobile Phone========================================================================*/
@media (max-width:767px) {


html, body {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll; 
  position: absolute;
  top: 0;
  left: 0;
  -webkit-font-smoothing: antialiased;
}


h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  font-size: 21px;
  font-weight: 300;
  margin-left: auto;
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  margin-top: 5px;
  margin-right: auto;


}

h2 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  font-size: 26px;
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

.navbar-default .navbar-brand {
color: #000000;
position: relative;
z-index: 9999;
left: 12px;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  margin-right: auto;
  margin-left: auto;
  margin-top: 35px;
}

a {
  text-decoration: none;
}

a:hover {
  color: #ff6c2f;
  text-decoration: none;
}


.navbar-default .navbar-nav > li > a {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  color: #ffffff;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #7b2732;
}


.navbar-default .navbar-toggle {
  border-color: #ff6c2f;
}

.navbar-toggle {
  border-radius: 0px;
  background-color: #000000;
}


.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ff6c2f;
  border: 1px solid #ff6c2f;
  outline-color: #ff6c2f;

  }

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-toggle .icon-bar {
  border-radius: 0px;

}

.navbar-default, .navbar-collapse {
  border: 0px;
}

.navbar-brand {
  top: 9px;
}

.navbar-brand > h4 {
color: #ffffff;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: #ff6c2f; 


}

#speech {
  left: 30px;
}



}

/*Desktop and Larger================================================================================*/

@media (min-width:768px) {


html, body {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll; 
  position: absolute;
  top: 0;
  left: 0;
}



.header {
  width: 100%;
  left: 15px;
  position: relative;

}


h1 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  font-size: 56px;
  font-weight: 600;
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  margin-top: 5px;
}

.subheader > h2 {
  margin-top: 5px;

}

.subheader {
  position: relative;
  left: 15px;

}

h2 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  margin-right: auto;
  margin-left: auto;
  
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans-serif";
  color: #ff6c2f;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  margin-right: auto;
  margin-left: auto;
  margin-top: 35px;
}

a {
  text-decoration: none;
}

a:hover {
  color: #ff6c2f;
  text-decoration: none;
}

.hairline {
  border-top: 3px solid #ff6c2f;
  width: 32%;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  
}

#Danos {
  top: 70px;
  display: inline-block;
  margin-bottom: 35px;
  position: relative;
}

#Danos img {
  margin-top: 35px;
  margin-bottom: 55px;
  margin-right: auto;
  margin-left: 5px;
  border: 4px solid #f2f2f2;
}

.frame:hover .DanosOverlay {
  opacity: 1;
}

.frame:hover .headshot {
  opacity: 0.9;
}

#Kelly {
  top: 70px;
  display: inline-block;
  margin-bottom: 35px;
  position: relative;
}

#Kelly img {
  margin-top: 35px;
  margin-bottom: 55px;
  margin-right: auto;
  margin-left: 5px;
  border: 4px solid #f2f2f2;
  
}

.frame:hover .KellyOverlay {
  opacity: 1;

}

.frame:hover .headshot {
  opacity: 0.9;

}

#speech {
  margin-top: 45px;
  left: 15px;
}



.footer {
  background-color: #f2f2f2;
  height: 80px;
  width: 100%;
  margin-top: 45px;
  margin-left: auto;
  margin-right: auto;
  bottom: 0px;
  position: relative;
}



}