@import url('//fonts.googleapis.com/css?family=Lato:400,700|Raleway:400,700,900');

html { font-size: 14px; }
body { font-family: Lato, san-serif;}


/************ COLORS  ***********
Bright Blue: #1b75bc; Links, button, Client title underline
Light Gray: #f1f2f2; backgrounds
Light Gray: #d1d3d4; underline/section break (between Timeline & Important Links)
Dark Gray: #a7a9ac; inactive tabs
Text: #414042
*/

.pageheader.mapbackground { 
  background: url(../images/public-header-map.jpg) 0 0 no-repeat; 
  background-size: cover;
  margin-bottom: 20px;
}

.pageheader.gearbackground { 
  background: url(../images/public-header-gears.jpg) 0 0 no-repeat; 
  background-size: cover;
  margin-bottom: 20px;
}

.pagefooter {
  background: #0e0e0e;
  margin-top: 40px;
}

.pagefooter { padding-bottom: 40px;}

h1 { font-family: 'Raleway', san-serif; text-transform: uppercase; font-weight: 900; font-size: 3vw; letter-spacing: 1px;}
h2 { font-family: 'Lato', san-serif; font-weight: 700; font-size: 3rem; color: #414042; padding-bottom: 3px; border-bottom: 2px #1b75bc solid; }
h3 { font-family: 'Lato', san-serif; font-weight: 400; font-size: 2rem; color: #414042;  }
h4 { font-family: 'Lato', san-serif; font-weight: 700; font-size: 1.3rem; color: #414042; }
h5 { font-family: 'Lato', san-serif; font-weight: 700; font-size: 1.3rem; color: #414042; }
h6 { font-family: 'Lato', san-serif; font-weight: 400; font-size: 1rem; color: #414042; text-transform: uppercase; margin-bottom: 5px;  margin-top: 20px;}
p { font-size: 1.3rem;}
a { color: #1b75bc; }
hr { border-bottom: 3px #d1d3d4 solid; border-top: none;}

@media only screen and (max-width: 767px) {
  h1 { font-size: 2.3rem;}
  h2 { font-size: 2rem;}
  h3 { font-size: 1.5rem;}
  h5 { font-size: 1.3rem;}
  p { font-size: 1rem;}

}

.mapbackground h1 { padding-bottom: 0px;}


h1.trimtitle, h2.trimtitle, h3.trimtitle, h4.trimtitle, h5.trimtitle, p.trimtitle, i.trimtitle, .pageheader h1.trimtitle  { margin: 0 0 10px 0; padding: 0;}
h1.nopadding, h2.nopadding, h3.nopadding, h4.nopadding, h5.nopadding, p.nopadding, i.nopadding  { margin: 0; padding: 0;}

h2.trimtitle { border: none;}
h1.smallertitle {  font-size: 3rem; }
h2.smallertitle { font-size: 2.5rem;}

.pageheader h1 { color: white; text-align: center; padding-bottom: 30px;  }
.pageheader h3 { color: white;   }
.pageheader h2 { border: none;}
.pagefooter h1, .pagefooter p, .pagefooter h5, .pagefooter i, .pagefooter a, .pageheader h1, .pageheader h2, .pageheader h3, .pageheader h4,  .pageheader p, .pageheader h5, .pageheader i, .pageheader a  { color: white;   }
.fullblocktitle { display: block; }
.greyarea h1, .greyarea h2, .greyarea h3, .greyarea h4,  .greyarea p, .greyarea h5, .greyarea i, .greyarea a  { color: #293895;   }
.greyarea { background: #f1f2f2;  }

img { max-width:  100%;}
.headerlogo img { width: 20vw; padding-top: 15px; padding-bottom: 5px; display: block; margin: auto;}


.mockupimage { width: 200px; height: 250px; object-fit: cover; object-position: top; border: 5px #ddd solid; border-radius: 5px;}
.smallmockup { width: 75px; height: 100px; object-fit: cover; object-position: top; border: 1px #333 solid; border-radius: 3px; margin-top: 10px;  margin-right: 10px; }
.mockupdiv {padding: 10px 10px 30px 10px;}
.approved { background: #fffbe5 url(images/star.png) 100% 100% no-repeat;  margin-right: 20px; }
.margintop20 { margin-top: 20px;}
.marginbottom10 { margin-bottom: 10px;}

.multiplemockups { display: flex; flex-wrap: wrap; flex-direction: column; }
.multiplemockups .mockupimage { width: 9vw; height: 12vw; margin-right: 10px;}

@media only screen and (max-width: 767px) {
  .multiplemockups { width: 100%; display: flex; flex-wrap: wrap; }
  .multiplemockups .mockupimage { width: 40vw; height: 60vw; margin-right: 10px;}
  .multiplemockups  { order: 2; }
}




.flexrow, .flexauto { display: flex; }
.flexrow.evenspace, .evenspace { justify-content: space-between; }
.flexrow.centervertical, .centervertical { align-items: center; }
.flexauto.centerhorizontal { justify-content: center; }
.flexrow.padbetween > div { padding: 10px 20px;}
.flexrow.padbetween > div:first-child { padding-left: 0;}
.flexrow.padbetween > div:last-child { padding-right: 0;}
.flexauto { justify-content: space-between; }
.aligntextcenter { text-align:center; }
.aligntextcenter input[type=range] { margin: auto;}
.flexrow > div { flex: 1; }
.flexrow.evenspace > div { flex: auto; }
.flexrow > div.tiny { flex: .2; }
.flexrow > div.small { flex: .5; }
.flexrow > div.large { flex: 2; }
.flexrow > div.huge { flex: 4; }
.flexrow > div.smallcell { flex: none; }
.flexrow.smalltable { flex-wrap: wrap;}
.flexrow.smalltable > div { flex: none; padding-right: 10px; }
.flexrow.smalltable.extraspacing > * {padding: 20px 20px; }
.flexcenterallcontent { justify-content: center; align-items: center; display:flex; flex-direction: column;}
.spaceright { margin-right: 30px;}
.spaceleft { margin-left: 20px;}
.flexrow.centervertical .alert { margin: 0;}
.centertitle { text-align: center; }


.teamcontact {  width: 450px; padding-bottom: 35px;}

@media only screen and (max-width: 767px) {
    .flexrow.stackonmobile, .flexauto.stackonmobile { display: flex; flex-wrap: wrap; }
    .flexrow > div.smallcell { display: block; margin: auto; text-align: center;  }
}

.mediumsizeicon { font-size: 1.7rem; vertical-align: middle; padding-bottom: 10px; }
.greenicon { color: #28a745;}
.orangeicon { color: #FF5722; }
.purpleicon { color: #673AB7; }
.brownicon { color: #795548; }
.blueicon { color: #007bff; }
.goldicon { color: #e0a800; }
.tealicon { color: #009688; }
.redicon { color: #f44336; }
.greyicon { color: #607D8B; }

.bigicon { font-size: 4rem;}
.medicon { font-size: 2rem; vertical-align: middle;}

button.btn { transition: all .2s ease-in-out; border: 1px rgba(0,0,0,0) solid; }
button.btn:hover {border: 1px rgba(0,0,0,.4) solid; }


.greenbutton, .greenbuttonnohover, .card-column:nth-child(1) .cardheader { background: #4CAF50; color: white; }
.orangebutton, .orangebuttonnohover, .card-column:nth-child(2) .cardheader { background: #FF9800; color: white; }
.darkorangebutton, .darkorangebuttonnohover, .card-column:nth-child(3) .cardheader { background: #FF5722; color: white; }
.purplebutton, .purplebuttonnohover, .card-column:nth-child(4) .cardheader { background: #9C27B0; color: white;}
.greybutton, .greybuttonnohover, .card-column:nth-child(5) .cardheader { background: #607D8B; color: white;}
.bluebutton, .bluebuttonnohover, .card-column:nth-child(6) .cardheader { background: #1b75bc; color: white;}
.goldbutton, .goldbuttonnohover, .card-column:nth-child(7) .cardheader  { background: #e0a800; color: white;}
.tealbutton, .tealbuttonnohover { background: #009688; color: white;}
.redbutton, .redbuttonnohover { background: #f44336; color: white;}
.indigobutton, .indigobuttonnohover { background: #3F51B5;  color: white; }
.brownbutton, .brownbuttonnohover { background: #795548;  color: white; }
.limebutton, .limebuttonnohover {background: #CDDC39; color: #333; }
.pinkbutton, .pinkbuttonnohover {background: #E91E63; color: white; }
.amberbutton, .amberbuttonnohover {background: #FFC107; color: white; }
.deeporangebutton, .deeporangebuttonnohover {background: #FF5722; color: white; }

.greenbuttonnohover:hover, .orangebuttonnohover:hover, .darkorangebuttonnohover:hover, .purplebuttonnohover:hover, .greybuttonnohover:hover, 
.bluebuttonnohover:hover, .goldbuttonnohover:hover, .tealbuttonnohover:hover, .redbuttonnohover:hover, .indigobuttonnohover:hover, 
.brownbuttonnohover:hover, .limebuttonnohover:hover, .pinkbuttonnohover:hover, .amberbuttonnohover:hover, .deeporangebuttonnohover:hover { color: white;}


.container, main { width: 100%; padding: 0 2%; }
@media only screen and (min-width: 1600px)  { .container, main { padding: 0 10%; }   }
@media only screen and (min-width: 1200px)  and (max-width: 1599px) { .container, main {  padding: 0 10%; } }


.greybox { font-size: 1.5rem; background: #f1f2f2; padding: 5px 10px; display: inline; }
.whitebox {font-size: 1.5rem; background: white; padding: 15px; }

.teammemberpic {    
  height: 150px;
  width: 150px;
  border-radius: 100%;
  object-fit: cover;
  object-position: center;
}

.smallicon img { width: 50px; height: 50px; object-fit: cover; object-position: top center; border-radius: 100%; border: 3px rgba(0,0,0,.4) solid;}

.alternaterows > div { padding: 10px;}
.alternaterows > div:nth-child(odd) { background: rgb(223, 223, 223);}
.alternaterows > div:nth-child(even) { background: rgb(255, 255, 255); }
  

/************ PROGRESS BAR  ************/
.percentbar {
  background: #CCCCCC;
  border: 1px solid #666666;
  height: 50px;
  margin: 10px auto 5px 0; 
  width: 90%;
  border-radius: 10px; 
  transition: all .3s ease-in-out;
}

.percentbar.fourhundredwidth { width: 400px;}

.percentbar div {
  background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
  border-radius: 10px; 
  margin-top: -1px;
  margin-bottom: -1px;    
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: 700;
  font-family: 'Lato', san-serif;
  font-size: 1.7rem;
}

.greenbar {
  background: #CCCCCC;
  border: 1px solid #666666;
  height: 25px;
  margin: 10px auto 5px 0; 
  width: 90%;
  border-radius: 0px; 
  transition: all .3s ease-in-out;
}


.greenbar div {
  background: #82c785; 
  border-radius: 0px; 
  margin-top: 0;
  margin-bottom: 0;    
  height: 23px;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: 700;
  font-family: 'Lato', san-serif;
  font-size: 1.7rem;
  border-right: 20px #707070  solid;
}



/************ TABS  ************/

main {
  max-width: 100%;
}

section {
  display: none;
  padding: 20px 20px;
  border-top: 1px solid #abc;
  background: #f1f2f2;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 400;
  font-size: 1.3rem;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}


label:hover {
  color: #789;
  cursor: pointer;
}

input:checked + label {
  color: #1b75bc;
  border: 1px solid #abc;
  border-top: 2px solid #1b75bc;
  border-bottom: 1px solid #f1f2f2;
  background: #f1f2f2;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 800px) {
  label {
    font-size: 1rem;
  }

  label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 500px) {
  label {
    padding: 15px;
  }
}

/************ CONTACT CARDS  ************/
.contact-cards {
  flex: 1 1 auto;
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden; 
  margin: 0 4px;
  padding: 0 4px;
  z-index: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
}

.contact-card {
  background-color: #f7f7f7;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(9,45,66,.25);
  display: block;
  padding: 10px 0 10px 10px;
  min-height: 20px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  transition: all .2s ease-in; 
  margin: 0px 5px 15px 5px ;
  width: 350px;
}

.contact-card.maincontact {
  background: #fffbe5 url(star.png) 100% 100% no-repeat;  
}


/************ IFRAME  ************/
.iframe-container {
  overflow: hidden;
  padding-top: 75%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}


.featherlight .featherlight-content { max-height:  auto; width: 90%;}
.featherlight { overflow: scroll; }
.featherlight .featherlight-close-icon { font-size: 2rem;}
.featherlight-content img { width: 100% !important; height: auto !important;}



.stagebox {
  position: relative;
}
.stageboxline {
  position: absolute;
  top: 4.4vw;
  height: .4vw;
  width: calc(100% - 4vw);
  margin-left: 2vw;
  background:rgb(57, 186, 83); 
}
.projectstage {
  z-index: 2; 
  line-height: 1.2;
  display:flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px auto;
  width: 8vw;
  height: 8vw;
  border: 3px rgb(146, 146, 146) solid;
  border-radius: 100%;
  font-family: 'Lato', san-serif;
  font-weight: 700;
  font-size: 1vw;
  color: rgb(39, 39, 39);
  background: rgb(255,255,255);
  background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 60%, rgba(227,227,227,1) 100%);
}
.done.projectstage{
  color: rgb(57, 186, 83);
  border: .4vw rgb(57, 186, 83) solid;
}
.stagedesc { border-radius: 10px;  z-index: 3; height: 0px; display: none; width: 10vw; padding: 10px; background: rgba(255,255,255,.95);  font-size: .9rem; border: none; position: absolute; color: black; font-weight: normal; transition: all .3s ease-in-out;  }
.projectstage:hover .stagedesc { display: block; height: auto;  border: 4px rgb(61, 61, 61) solid;}
.stagedesc h3 { margin-top: 0px; font-size: 1.7rem;} 


.stagedate {
  font-weight: 400;
  color: #7d5203;
  text-transform: uppercase;
  font-size: .9vw; 
}

@media only screen and (max-width: 767px) {
   .hiddenmobile { display: none; }
 }