*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}

.banner {position: relative; }
#particles {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #16a085;
  background: #1a7582;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
	  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

#intro {
  position: absolute;
  left: 0;
  top: 40%;
  padding: 0 20px;
  width: 100%;
  text-align: left;

}
#intro h1 {
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color:#fff;
  font-family: 'Ropa Sans', sans-serif;
}
#intro h1::after {
  content: '';
  width: 80px;
  display: block;
  background: #fff;
  height: 10px;
  margin: 10px 0;
  line-height: 1.1;
}
#intro p { 
	margin: 0 0 30px 0; 
	font-size: 21px; 
	font-weight: 300; 
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

@media only screen and (max-width: 1000px) {
  #intro h1 { font-size: 30px; }
}

@media only screen and (max-width: 800px) {
  #intro h1 { font-size: 28px; }
  #intro h1::after { height: 8px; }
}

@media only screen and (max-width: 568px) {
  #intro { padding: 0 10px; }
  #intro h1 { font-size: 20px; }
  #intro h1::after { height: 6px; }
  #intro p { font-size: 18px; }

}

@media only screen and (max-width: 320px) {
  #intro h1 { font-size: 28px;  }
  h1::after { height: 4px; }
}