/* --- Hero --- */

.hero { 
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 8em 2em 3em;
}
.hero .logo { 
  width: 9em;
}
.hero .intro { 
  max-width: 1000px;
}
.hero h1 { 
  color: #fff;
  font-size: 190%;  
  margin-top: 1em;
  margin-bottom: .25em;
}
.hero h1 a { 
  color: #fff;
}
.hero h1 a:hover { 
  color: var(--light-blue);
}
.hero p { 
  font-size: 120%;
  line-height: 1.4;
}
@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .hero { 
    padding: 6em 2em 4em;
  }  
  .hero .logo { 
    width: 12em;
  }  
  .hero h1 { 
    font-size: 220%;
  }  
  .hero p { 
    font-size: 130%;
  }
} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero h1 { 
    font-size: 240%;
  }
  .hero p { 
    font-size: 140%;
  }
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .hero { 
    padding: 7em 2em 5em;
  }    
  .hero h1 { 
    font-size: 280%;
  }
  .hero p { 
    font-size: 160%;
  }
}
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .hero { 
    padding: 8em 2em 5em;
  }    
}

/* --- Main --- */

.main {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%,#e4e4e4 100%);
  background: linear-gradient(to bottom, #ffffff 0%,#e4e4e4 100%);
  font-size: 110%;
  line-height: 1.4;  
  font-weight: 300;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  

} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  

}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .main {
    font-size: 150%;
    line-height: 1.4;
  }
}

/* --- Photo --- */
.photo {
  max-width: 1200px;
}

.photo.top-margin {
  margin-top: 1em;
}
.photo.bot-margin {
  margin-bottom: 1em;
}
.photo img {
  width: 100%;
}
.photo figcaption {
  display: block;
  opacity: .8;
  font-size: 70%;
  text-align: center;
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .photo.top-margin {
    margin-top: 2em;
  }
  .photo.bot-margin {
    margin-bottom: 2em;
  }
  .about .photo.top-margin {
    margin-top: 4em;
  }
}

@media only screen and (min-width: 1000px) and (min-height: 800px) and (min-device-width: 480px) {  
	.photo {
	  max-width: 1300px;
	}
}

/* --- List Block --- */
.list-block {
  background: #fff;
  margin: 1.3em 1em;
  border-left: .8em solid white;
  box-shadow:         0 0 .7em 0 rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 .7em 0 rgba(0,0,0,.2);
  -moz-box-shadow:    0 0 .7em 0 rgba(0,0,0,.2);  
}
.list-block:first-child {
  margin-top: 0;
}
.list-block.blue {
  border-left-color: var(--blue); 
}
.list-block.light-blue {
  border-left-color: var(--light-blue); 
}
.list-block.dark-blue {
  border-left-color: var(--dark-blue); 
}
.list-block.green {
  border-left-color: var(--green); 
}
.list-block.red {
  border-left-color: var(--red); 
}
.list-block h3 {
  font-size: 145%;
  color: var(--gray);
  margin: 0 0 1em 0; 
}
.list-block ul {
  color: var(--gray);
  margin: 0 0 0 1em; 
}
.list-block li {
  margin: 0 0 1em; 
}
.list-block li:last-child {
  margin-bottom: 0; 
}
@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .list-block {
    background: #fff;
    margin: 1em 0;
  }
  .list-block h3 {
    font-size: 155%;
  }  
} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .list-block h3 {
    font-size: 165%;
  }  
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .list-block {
    margin: 1em 0 3em;
  }
  .list-block h3 {
    font-size: 190%;
  }  
}

.text-block img {
  max-width: 100%;
  margin: 1em auto;
  box-shadow:         0 0 .7em 0 rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 .7em 0 rgba(0,0,0,.2);
  -moz-box-shadow:    0 0 .7em 0 rgba(0,0,0,.2);    
}
@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .text-block img {
    width: 35%;
    margin-bottom: 1em; 
    position: relative;
  }  
  .text-block img.left {
    float: left;
    left: -3em;
    
  }    
  .text-block img.right {
    float: right;
    right: -3em;
  }
}

/* --- List Block --- */

.numbered.grid {
}
.numbered.grid article {
  text-align: left; 
  counter-increment: step-counter;
}
.numbered.grid .pad {
  padding: 2em;
}
.numbered.grid h3 {
  color: #fff;
}

.numbered.grid h3 {
  color: #fff;
  position: relative;
}
.numbered.grid h3 a {
  color: #fff;
}
.numbered.grid h3:before {
  background: rgba(255,255,255,.15);
  color: white;
  -webkit-border-radius:  50%;
  -moz-border-radius:     50%;
  border-radius:          50%;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.55em;
  padding: .25em;  
  text-align: center;
  display: block;
  margin: 0 0 .5em;  
  font-size: 80%;  
  content: counter(step-counter);  
}  
@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .numbered.grid {
    margin-bottom: 2em;
  }      
  .numbered.grid h3 {
    font-size: 140%;
  } 
} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .numbered.grid h3 {
    font-size: 160%;
  } 
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .numbered.grid {
    margin-bottom: 4em;
  }    
  .numbered.grid h3 {
    font-size: 180%;
  }
}