site.css

/* @FontFace
------------------------------------------------------- */

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans Condensed Bold';
    src: url('fonts/opensans-condbold-webfont.eot');
    src: url('fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-condbold-webfont.woff2') format('woff2'),
         url('fonts/opensans-condbold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans Condensed Light';
    src: url('fonts/opensans-condlight-webfont.eot');
    src: url('fonts/opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-condlight-webfont.woff2') format('woff2'),
         url('fonts/opensans-condlight-webfont.woff') format('woff');
}

.title {
	font-family: 'Open Sans Condensed Bold';
	font-size: 40px;
	color: white;
	text-align: center;
}

.subhead {
  font-family: 'Open Sans Condensed Bold';
	font-size: 24px;
	color: rgba(87, 43, 122, 0.8);
}

.content {
	font-family: 'Open Sans Condensed Bold';
	font-size: 16px;
	color: rgba(20, 82, 207, 0.6);
}

.content .social {
	font-size: 12px;
	color: rgba(20, 82, 207, 0.6);
}

/* Fills
-------------------------------------------------------- */

.fill-blue			{ background-color: rgba(20, 82, 207, 1); }
.fill-purple		{ background-color: rgba(87, 43, 122, 1); }
.fill-light     { background-color: rgba(173, 182, 196, 1); }
.fill-gold			{ background-color: rgba(255, 202, 27, 1); }
.fill-white     { background-color: #fff; }



/* Layout
------------------------------------------------------- */

body {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  /*overflow-y: hidden;*/
}

header {
    background: white;
    min-height: 160px;
    vertical-align: middle;
}

map {
    background-image: url('images/route_map.png');
    display: block;
    background-position: center center;
    min-height: 420px;
}

section {
	min-height: 150px;
}

footer {
	background-color: rgba(173, 182, 196, 1);
	color: rgba(255, 255, 255, 0.8);
	font-family: 'Open Sans Condensed Light';
	font-size: 12px;
	letter-spacing: .5px;
	min-height: 40px;
	}

.contain {
    position:relative;
}
.overlay {
    background: rgba(20, 82, 207, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
}


.clearfix { display:block; }
.clearfix:after {
  content:'';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
  
.limiter {
  width:83.3333%;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  }


/* Section Icons
------------------------------------------------------- */

.section-icons {
    background-image: url('images/section_icons.svg');
    -webkit-background-size: 118px 41px;
    background-size: 118px 41px;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 10px;
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 32px;
    height: 36px;
}

.section1-icon  { background-position: 0px 0; }
.section2-icon  { background-position: -46px 0; }
.section3-icon  { background-position: -88px 0; }

.social-icons {
    background-image: url('images/social_icons.svg');
    -webkit-background-size: 37px 101px;
    background-size: 37px 101px;
    background-repeat: no-repeat;
    margin: 0;
    padding-top: 5px;
    padding-left: 5px;
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 22px;
}

.social1-icon  { background-position: 0 0px; }
.social2-icon  { background-position: 0 -32px; }
.social3-icon  { background-position: 0 -70px; }



/* General
------------------------------------------------------- */

body,
select,
label {
  font:15px/1.6667 'Helvetica neue', Helvetica, sans-serif;
  }


/* HTML elements */
h1 { font-size:22px; font-weight:bold; }
h2 { font-size:36px; line-height:42px; }
h3 { font-size:24px; line-height:36px; }
h4 { font-size:16px; font-weight:bold; }

a       { font-size: 12px; color: rgba(87, 43, 122, 1); /*color:#4698ca;*/ }
a:hover { 
	text-decoration: none;
	 }


label {
  font:14px/1.6667 'Helvetica neue', Helvetica, sans-serif;
  display:block;
  margin-bottom:5px;
  font-weight:bold;
  }

fieldset {
  margin-bottom:20px;
  }

textarea {
  border-color:rgba(0,0,0,0.2);
  }

select {
  background-color:#fff;
  border:1px solid rgba(0,0,0,0.2);
  display:inline-block;
  height:40px;
  margin:0;
  color:rgba(0,0,0,.5);
  padding:10px;
  border-radius:0;
  cursor:pointer;
  line-height:19px;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  }
  select:focus { border-color:rgba(0,0,0,0.4); }

bdo {
  display:block;
  width:100%;
  position:relative
  }
  bdo:before {
    top:8px;
    right:5px;
    position:absolute;
    pointer-events:none;
    }

.map.leaflet-container {
  background-color:transparent;
  }
.map {
  position:absolute;
  width:100%;
  height:100%;
  top:0;right:0;left:0;bottom:0;
  }

.feature { min-height:60px; }

.pill > *:first-of-type,
.pill > *:first-child {
  border-radius:20px 0 0 20px;
  }
.pill > *:last-of-type,
.pill > *:last-child {
  border-radius:0 20px 20px 0;
  }
  
  
.button {
	font-family: 'Open Sans Condensed Bold';
	font-size: 18px;
	color: #FFCA1B;
  padding: 10px 40px;
  border-radius: 5px;
  border-width: 3px;
  border-color: #FFCA1B;
  border-style: solid;
  text-align: center;
  background-color: transparent;
  }
  .button:hover { 
  	background-color: #FFCA1B;
  	border-radius: 5px;
  	color: white;
  }

.button2 {
	font-family: 'Open Sans Condensed Bold';
	font-size: 18px;
	color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border-width: 3px;
  border-color: white;
  border-style: solid;
  text-align: center;
  background-color: transparent;
  margin-left: 20px;
  }
  .button2:hover { 
  	background-color: white;
  	border-radius: 5px;
  	color: rgba(87, 43, 122, 1); 
  }


/* Additional Utility Classes
------------------------------------------------------- */
.center                       { text-align:center; }
.vcenter                      { vertical-align: middle;}
.clip                         { overflow:hidden; }
.fr                           { float:right; }
.fl                           { float:left; }
.z1   { z-index:1; }
.z10  { z-index:10; }
.z100 { z-index:100; }


/* Columns / Row
------------------------------------------------------- */
.col0    { float:left; width:04.1666%; max-width:50px; }
.col1    { float:left; width:08.3333%; max-width:100px; }
.col2    { float:left; width:16.6666%; max-width:200px; }
.col3    { float:left; width:25.0000%; max-width:300px; }
.col4    { float:left; width:33.3333%; max-width:400px; }
.col5    { float:left; width:41.6666%; max-width:500px; }
.col6    { float:left; width:50.0000%; max-width:600px; }
.col7    { float:left; width:58.3333%; max-width:700px; }
.col8    { float:left; width:66.6666%; max-width:800px; }
.col9    { float:left; width:75.0000%; max-width:900px; }
.col10   { float:left; width:83.3333%; max-width:1000px; }
.col11   { float:left; width:91.6666%; max-width:1100px; }
.col12   { width:100%; display:block; }

.row0  { height: 0px;}
.row1  { height: 40px;}
.row2  { height: 80px;}
.row3  { height: 120px;}
.row4  { height: 160px;}
.row5  { height: 200px;}
.row6  { height: 240px;}
.row7  { height: 280px;}
.row8  { height: 320px;}
.row9  { height: 360px;}
.row10 { height: 400px;}
.row11 { height: 440px;}
.row12 { height: 480px;}
.row13 { height: 520px;}
.row14 { height: 560px;}
.row15 { height: 600px;}
.row16 { height: 640px;}

/* Padding
------------------------------------------------------- */
.pad0  { padding:5px; }
.pad0y { padding-top:5px; padding-bottom:5px; }
.pad0x { padding-right:5px; padding-left:5px; }

.pad1    { padding:10px; }
.pad2    { padding:20px; }
.pad4    { padding:40px; }

.pad1x { padding-left: 10px; padding-right: 10px;}
.pad2x { padding-left: 20px; padding-right: 20px;}
.pad4x { padding-left: 40px; padding-right: 40px;}

.pad1y { padding-top: 10px; padding-bottom: 10px;}
.pad2y { padding-top: 20px; padding-bottom: 20px;}
.pad4y { padding-top: 40px; padding-bottom: 40px;}

.pad8 {  padding: 80px; }
.pad8y { padding-top: 80px; padding-bottom: 80px;}
.pad8x { padding-left: 80px; padding-right: 80px;}


.space-bottom2, .space-bottom { margin-bottom:10px; }
.space-bottom4                { margin-bottom:20px; }
.space-bottom8                { margin-bottom:40px;}
.space-top2                   { margin-top:10px;}
.space-top4                   { margin-top:20px;}
.space-top8                   { margin-top:40px;}
.space-top12                   { margin-top:80px;}

  
.margin0  { margin-left:04.1666%; }
.margin1  { margin-left:08.3333%; }
.margin2  { margin-left:16.6666%; }
.margin3  { margin-left:25.0000%; }
.margin4  { margin-left:33.3333%; }
.margin5  { margin-left:41.6666%; }
.margin6  { margin-left:50.0000%; }
.margin7  { margin-left:58.3333%; }
.margin8  { margin-left:66.6666%; }
.margin9  { margin-left:75.0000%; }
.margin10 { margin-left:83.3333%; }
.margin11 { margin-left:91.6666%; }
.margin12 { margin-left:100.0000%; }

/* reverse margins on right-floated elements */
.margin0r  { margin-right:04.1666%; }
.margin1r  { margin-right:08.3333%; }
.margin2r  { margin-right:16.6666%; }
.margin3r  { margin-right:25.0000%; }
.margin4r  { margin-right:33.3333%; }
.margin5r  { margin-right:41.6666%; }
.margin6r  { margin-right:50.0000%; }
.margin7r  { margin-right:58.3333%; }
.margin8r  { margin-right:66.6666%; }
.margin9r  { margin-right:75.0000%; }
.margin10r { margin-right:83.3333%; }
.margin11r { margin-right:91.6666%; }
.margin12r { margin-right:100.0000%; }


.top40  { top:40px; }
.top80  { top:80px; }

.bottom40  { bottom:40px; }
.bottom80  { bottom:80px; }

.pull-left0  { left:-04.1666%; }
.pull-left1  { left:-08.3333%; }
.pull-left2  { left:-16.6666%; }
.pull-left3  { left:-25.0000%; }
.pull-left4  { left:-33.3333%; }
.pull-left5  { left:-41.6666%; }
.pull-left6  { left:-50.0000%; }
.pull-left7  { left:-58.3333%; }
.pull-left8  { left:-66.6666%; }
.pull-left9  { left:-75.0000%; }
.pull-left10 { left:-83.3333%; }
.pull-left11 { left:-91.6666%; }
.pull-left12 { left:-100.0000%; }

.pull-right0  { right:-04.1666%; }
.pull-right1  { right:-08.3333%; }
.pull-right2  { right:-16.6666%; }
.pull-right3  { right:-25.0000%; }
.pull-right4  { right:-33.3333%; }
.pull-right5  { right:-41.6666%; }
.pull-right6  { right:-50.0000%; }
.pull-right7  { right:-58.3333%; }
.pull-right8  { right:-66.6666%; }
.pull-right9  { right:-75.0000%; }
.pull-right10 { right:-83.3333%; }
.pull-right11 { right:-91.6666%; }
.pull-right12 { right:-100.0000%; }

.space-left2 { margin-left:20px; }
.space-left4 { margin-left:40px; }
.space-left7 { margin-left:70px; }
.space-left8 { margin-left:80px; }

.space-right2 { margin-right:20px; }
.space-right4 { margin-right:40px; }
.space-right8 { margin-right:80px; }

.pad-top8 { padding-top:80px; }
.pad-top4 { padding-top:40px; }
.pad-top2 { padding-top:20px; }


.pad2xr { padding-right:20px; }
.pad2xl { padding-left:20px; }
.pad4xr { padding-right:40px; }
.pad4xl { padding-left:40px; }

.pad0  { padding:5px; }
.pad0x { padding-left:5px; padding-right:5px; }
.pad0y { padding-top:5px; padding-bottom:5px; }

.pad8y { padding-top:80px; padding-bottom:80px; }

.round-topright     { border-radius:0 3px 0 0; }
.round-topleft      { border-radius:3px 0 0 0; }
.round-bottomleft   { border-radius:0 0 3px 0; }
.round-bottomleft   { border-radius:0 0 0 3px; }

.z1   { z-index:1; }
.z10  { z-index:10; }
.z100 { z-index:100; }

/* Colors */
.fill-dark    { background:#000; }
.fill-darken0 { background:#043b5d; }
.fill-darken1 { background:#03314d; }
.fill-darken2 { background:#03263c; }

.square60 {
  border-radius:50%;
  width:60px;
  height:60px;
  }
  .icon.square60:before {
    font-size:60px;
    }



/* Device style */
.device {
  background-color:rgba(0,0,0,0.25);
  min-height:540px;
  position:relative;
  }
  .device:before {
    background-color:#ddd;
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    top:-20px;
    width:100%;
    height:20px;
    border-radius:6px 6px 0 0;
    }

/* Custom styling */
.basemap-intro .device {
  min-height:480px;
  }
  .basemap-intro .device,
  .basemap-intro .device .map {
    border-radius:0 0 6px 6px;
    z-index:0;
    }

a.fill-dark {
  background:#202020;
  color:#fff;
  }
  a.fill-dark:hover {
    background:#000;
    color:#fff;
    }
  a.fill-dark:hover .fill-blue { background-color:#317dac; }

.paging-controls,
.paging-controls a { color:rgba(0,0,0,0.75); }
.paging-controls a:hover {
  background-color:#eee;
  color:rgba(0,0,0,0.75);
  }
.paging-controls.paging-controls a { border-color:rgba(0,0,0,0.1); }
.paging-controls * {
  text-align:center;
  height:40px;
  margin:0;
  padding:10px;
  cursor:pointer;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:20px;
  -webkit-appearance:none;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
  display:inline-block;
  }

.tab-content { display:none; }
.tab-content.active { display:block; }

/* Icons */
.icon:before {
  font-family:'icon';
  content:'';
  display:inline-block;
  font-size:26px;
  color:inherit;
  vertical-align:middle;
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  }
  .icon.i-arrow-down:before     { content:'\e600';}
  .icon.i-arrow-left:before     { content:'\e601';}
  .icon.i-arrow-right:before    { content:'\e602';}
  .icon.i-coverage:before       { content:'\e603';}
  .icon.i-frequency:before      { content:'\e604';}
  .icon.i-global:before         { content:'\e605';}
  .icon.i-interactivity:before  { content:'\e606';}
  .icon.i-mosaic:before         { content:'\e607';}
  .icon.i-pixels:before         { content:'\e608';}
  .icon.i-document:before       { content:'\e609';}

.sprite {
  background:url(img/sprite@2x.png) no-repeat 0 0;
  display:inline-block;
  background-size:280px 44px;
  text-indent:-999em;
  }
  .sprite.s-mapbox-powered {
    background-position:0 0;
    width:280px;
    height:44px;
    }

.hide-mobile                  { display:block!important; }
.show-mobile                  { display:none; }



/* Mobile Layout
------------------------------------------------------- */

@media only screen and (max-width:640px) {

.hide-mobile                  { display:none!important; }
.show-mobile                  { display:block!important;; }

.title {
font-size: 28px;
}

.subhead {
font-family: 'Open Sans Condensed Bold';
font-size: 24px;
color: rgba(87, 43, 122, 0.8);
padding-top: 10px;
}

.subhead2 {
font-family: 'Open Sans Condensed Bold';
font-size: 24px;
color: rgba(20, 82, 207, 0.6);
}

.margin1 {
margin-left: 0;
}

.content {
font-size: 14px;
}

.device {
min-height:360px;
}

map {
    min-height: 275px;
}

a:link          { -webkit-tap-highlight-color:rgba(0,0,0,0); }
label .inline a { font-weight:normal; }

.row1  { height:auto; min-height: 40px;}
.row2  { height:auto; min-height: 80px;}
.row3  { height:auto; min-height: 120px;}
.row4  { height:auto; min-height: 160px;}
.row5  { height:auto; min-height: 200px;}
.row6  { height:auto; min-height: 240px;}
.row7  { height:auto; min-height: 280px;}
.row8  { height:auto; min-height: 320px;}
.row9  { height:auto; min-height: 360px;}
.row10 { height:auto; min-height: 400px;}
.row11 { height:auto; min-height: 440px;}
.row12 { height:auto; min-height: 480px;}
.row13 { height:auto; min-height: 520px;}
.row14 { height:auto; min-height: 560px;}
.row15 { height:auto; min-height: 600px;}
.row16 { height:auto; min-height: 640px;}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12,
.fifths > * { width:100%; max-width:100%; }
.margin0,
.margin1 { text-align: left; }
.margin2,
.margin3,
.margin4,
.margin5,
.margin6,
.margin7,
.margin8,
.margin9,
.margin10,
.margin11,
.margin12                     { margin-left:0; }
.pad8                         { padding:40px; }
.pad8y                        { padding-top:40px; padding-bottom:40px;}
.pad8x                        { padding-left:40px; padding-right:40px;}
.pad4y                        { padding-top:20px; padding-bottom:20px; }
.pad4                         { padding:20px; }
.pad4x                        { padding-left:20px; padding-right:20px; }
.pad2                         { padding:10px; }
.pad2y                        { padding-top:10px; padding-bottom:10px; }
.pad2x                        { padding-right:10px; padding-left:10px; }
.title                        { margin-bottom:10px; }
.space-bottom2, .space-bottom { margin-bottom:10px; }
.space-bottom4                { margin-bottom:20px; }
.space-bottom8                { margin-bottom:40px;}
.space-top2                   { margin-top:10px;}
.space-top4                   { margin-top:20px;}
.space-top8                   { margin-top:40px;}
.hide-mobile                  { display:none!important; }
.show-mobile                  { display:block!important; }
.show-mobile.inline           { display:inline-block!important; }

}