/* --- Hero --- */

.hero, .secid { 
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  text-align: left;
  padding: 7.5em 2em 1em;
  background: #0459a0;
  background: -moz-linear-gradient(left, #0459a0 0%, #089ab3 100%);
  background: -webkit-linear-gradient(left, #0459a0 0%,#089ab3 100%);
  background: linear-gradient(to right, #0459a0 0%,#089ab3 100%);
}
.secid { 
  padding: 2em 2em 1.5em;
}
.hero .logo { 
  width: 9em;
}
.hero .intro { 
  max-width: 100%;
}
.hero h1, .secid h1 { 
  color: #fff;
  font-size: 170%;  
  margin-top: 1em;
  margin-bottom: 0;
}
.secid h1 {
  margin-top: 0;
}
.hero h1 a, .secid h1 a { 
  color: #fff;
}
.hero h1 a:hover, .secid h1 a:hover { 
  color: var(--light-blue);
}
.hero p, .secid p { 
  font-size: 120%;
  line-height: 1.4;
}
@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .hero { 
    padding: 9em 2em 1.5em;
  }  
  .hero .logo { 
    width: 12em;
  }  
  .hero h1 { 
    font-size: 180%;
  }  
  .hero p { 
    font-size: 130%;
  }
} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero { 
    padding: 10em 2em 1.5em;
  }    
  .hero h1, .secid h1 { 
    font-size: 200%;
  }
  .hero p, .secid p { 
    font-size: 140%;
  }
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .hero { 
    padding: 9em 2em 1.5em;
  }    
  .hero h1, .secid h1 { 
    font-size: 250%;
  }
  .hero p, .secid p { 
    font-size: 160%;
  }
}
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .hero { 
    padding: 10em 2em 2em;
  }  
  .hero h1, .secid h1 { 
    font-size: 280%;
  }
  .hero .intro, .secid .intro { 
     max-width: 1400px;
   }
}

/* Hero */

.hero.splash-hero { 
    position: relative;
    width: 100%;
    background-image: url(/image/hero2020_mobile_sm.png);
    background-color: #0680b2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}
    
@media only screen and (min-width: 520px) and (min-device-width: 480px) { 
  .hero.splash-hero { 
    min-height: 600px;
    background-image: url(/image/hero2020_mobile.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
  }
}

@media only screen and (min-width: 640px) and (min-device-width: 480px) { 
  .hero.splash-hero {
    min-height: 600px;
  }
}

@media only screen and (min-width: 800px) and (min-device-width: 480px) {  
  .hero.splash-hero {
    background-image: url(/image/hero2020.png);
    height: 600px;
    min-height: auto;
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }  
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero.splash-hero {
    height: 750px;
  }  
}


@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .hero.splash-hero {
    background-size: auto 100%;
    background-position: left bottom;
  }  
}


/* --- Priority Page --- */
.priority-hero {
  position: relative;
  min-height: auto;
  width: 100%;
  overflow: hidden;
  background-color: #0459a0;
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.priority-hero figure { 
  display: block;
  width: 100%;
}

.priority-hero figure img {
  width: 100%;
  height: auto;
  display: block;
}

.priority-hero .gradient-overlay {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 600px;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(4,89,160);
  background: -moz-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  background: linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459a0",endColorstr="#0898b3",GradientType=1);
  -webkit-mask-image: linear-gradient(to right, transparent 25%, black 65%);
  mask-image: linear-gradient(to right, transparent 25%, black 65%);
}

.priority-hero.right .gradient-overlay {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 600px;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(4,89,160);
  background: -moz-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  background: linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0459a0",endColorstr="#0898b3",GradientType=1);
  -webkit-mask-image: linear-gradient(to left, transparent 25%, black 65%);
  mask-image: linear-gradient(to left, transparent 25%, black 65%);
}

.priority-hero .title {
  background: rgb(4,89,160);
  background: -moz-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(4,89,160,1) 40%, rgba(8,152,179,1) 100%);
  padding: 1em 2em 0.5em;
}

.priority-hero .title .heading {
  font-size: 160%;
  font-weight: 700;
  color: #fff;
}

.priority-hero .title h1 {
  color: #fff;
  font-size: 200%;
  top: -3px;
  left: -3px;
  position: relative;
  margin: 0;
}

@media only screen and (min-width: 800px) and (min-device-width: 480px) { 
  .priority-hero {
    position: relative;
    min-height: 400px;
    width: 100%;
    overflow: hidden;
    background-color: #0459a0;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
  }
  .priority-hero.right {
    background-position: right center;
  }
  .priority-hero figure { 
    display: none;
  }
  .priority-hero .gradient-overlay, .priority-hero.right .gradient-overlay {
    display: block;
  }
  .priority-hero .title {
    background: none;
    z-index: 101;
    margin: 0;
    position: absolute;
    width: 50%;
    top: 50%;
    right: 5%;
    margin-right: -40%;
    transform: translate(-50%, -50%);
    padding: 2em 2em 1.5em;
  }
  .priority-hero.right .title {
    right: initial;
    margin-right: 0;
    left: 5%;
    margin-left: 25%;
  }
  .priority-hero .title .heading {
    font-size: 200%;
  }
  .priority-hero .title h1 {
    font-size: 350%;
    max-width: 550px;
    top: -6px;
    left: -6px;
  } 
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .priority-hero {
    min-height: 500px;
  }
  .priority-hero .title h1 {
    font-size: 400%;
  }
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .priority-hero {
    min-height: 600px;
  }
}


/* --- Main --- */

.main {
  background: #ffffff;
  font-size: 100%;
  line-height: 1.2;  
  font-weight: 400;
  letter-spacing: 0px;
}
.offset {
  padding: 7.5em 0 0 0;
}

@media only screen and (min-width: 800px) and (min-device-width: 480px) {  
  .offset {
    padding: 9em 0 0 0;
  }
} 
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .offset {
    padding: 10em 0 0 0;
  }
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .main {
    font-size: 120%;
    line-height: 1.3;
  }
  .offset {
    padding: 8em 0 0 0;
  }
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .offset {
    padding: 8.5em 0 0 0;
  }
}

.width100 {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* --- 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;
	}
}


/* --- Section Front Blocks --- */
.side-by-side-layer {
  display: -ms-flexbox;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(1, 1fr);
}
.side-by-side-layer figure {
  background: none;
}
figure img {
  max-width: 100%;
  display: block;
}
.text-side {
  position:relative;
}
.text-side h1, .text-side h2 {
  color: #fff;
}
.text-side.light-gray h1, .text-side.light-gray h2 {
  color: #357fae;
  color: var(--blue);
}
.text-side .pad {
  padding: 2em;
}
.text-only-layer {
  padding: 2em;
}

@media only screen and (min-width: 800px) and (min-device-width: 480px) {  
  .side-by-side-layer {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .side-by-side-layer.photo-40 {
    -ms-grid-columns: 3fr 2fr;
    grid-template-columns: 3fr 2fr;
  }
  .side-by-side-layer.photo-60 {
    -ms-grid-columns: 2fr 3fr;
    grid-template-columns: 2fr 3fr;
  }
  .side-by-side-layer.intro {
    min-height: 400px;
  }
  .side-by-side-layer figure {
    min-height: 400px; 
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .side-by-side-layer figure img {
    display: none;
  }
  .text-side .pad {
    margin: 0;
    position: relative;
    width: 80%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .side-by-side-layer.intro {
    min-height: 500px;
  }
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .text-only-layer {
    padding: 3em 6em;
  }
  .side-by-side-layer.intro {
    min-height: 0px;
  }
  .side-by-side-layer figure {
    min-height: 0px;
     background: none;
  }
  .side-by-side-layer figure img {
     display: block;
  }
}


/* --- 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%;
  }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gradient-overlay { display: none !important; }
  .priority-hero { background-position: -150px center; }
}