@import url('/components/responsive/css/responsive.css');
@import url('/components/responsive/css/centurion-grid_v2.min.css');

/* -------------------------------------------------

    Esri Home Stylesheet
    
    Last Modified: July 15, 2013

---------------------------------------------------- */
.container {
  position: relative; }

img {
  height: auto;
  width: 100%;
  max-width: auto; }

html {
  -webkit-font-smoothing: antialiased; }

/* ====================
    Typography
==================== */
h1, h2, h3, p {
  font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; }

h1 {
  font-size: 28px; }

h2 {
  font-size: 22px;
  margin-bottom: 10px; }

h3 {
  font-size: 1.286em;
  margin-bottom: 10px; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

/* Change Font Weight */
.content h2.light,
.content p.light,
.content .light,
.light {
  font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; }
.content h2.heavy,
.content p.heavy,
.content .heavy,
.heavy {
  font-family: 'Avenir LT W01 85 Heavy', Arial, Helvetica, sans-serif; }


/* ====================
    Home Rotator
==================== */
#rotator .slide {
  background-position: 50% 0%;
  background-repeat: initial initial;
}
#rotator .content h1,
#rotator .content h2,
#rotator .content p {
  min-width: 100%;
  position: relative; }
#rotator a {
  color: #FFF; }

/* Change Font Color for Banners  */
#rotator .content h2.black,
#rotator .content p.black {
  color: #000 !important; }
#rotator .content.black a,
#rotator .content a.black {
  color: #2A7433 !important; }
#rotator .content.blue h2,
#rotator .content.blue p,
#rotator .content h2.blue,
#rotator .content p.blue {
  color: #007AC2 !important; }
#rotator .content.blue a,
#rotator .content a.blue {
  color: #2A7433 !important; }

#rotator .content h2,
.slide .content h2 {
  top: 70px;
  font-size: 3.5em !important;
}
#rotator .content p,
.slide .content p {
  top: 80px;
  line-height: 1.5;
}
#rotator .slide a,
#rotator .slide a .content h1,
#rotator .slide a .content h1,
#rotator .slide a .content p {
  text-decoration: none !important;
}

/* Misc Additions */
span.play-btn {
  background-image: url('http://www.esri.com/~/media/D1DF86AED59843A09319FD80F1CF3EC6.png');
  display: inline-block;
  height: 17px;
  width: 17px;
  vertical-align: middle;
}
.green-play  {
  background-image: url('http://www.esri.com/~/media/0A10606FBFCA453EAB4B17DA566470F3.jpg') !important;
}
#cboxTitle {
  font-size: 15px;
}

/* Desktop to Mobile - Media Query */
@media screen and (max-width:920px) {
  .slide {
    background-size: cover !important;
    background-position: 35% 0% !important;
  }  
}


/* Mobile - Media Query */
@media screen and (max-width:480px) {
  #rotator,
  #rotator .slide,
  #rotator .content {
    /* background-position: 30% 0% !important; */
    background-position: 32% 0% !important;
    height: 280px !important;
  }
  
  #rotator .slide .content h2 {
    font-size: 2.8em !important;
    margin-top: 0;
    top: 40px;
  }
  #rotator .slide .content p { 
    font-size: 1.1em !important;
    min-width: 100%;
    top: 50px;
  }
  
  /* Misc Additions */
  #cboxTitle {
    font-size: 13px;
  }
  
}

/* ====================
    Home Content
==================== */
small {
  font-size: 0.8em; }

hr {
  background: #DEDEDE;
  color: #DEDEDE; }

#home-top-content {
  margin: 30px 0; }
  #home-top-content p {
    margin-bottom: 0; }
  #home-top-content .home-left,
  #home-top-content .home-right {
    position: relative; }
    #home-top-content .home-left h2,
    #home-top-content .home-right h2 {
      color: #2A7433;
      font-size: 2.286em;
      margin-top: 0.5em; }
    #home-top-content .home-left p,
    #home-top-content .home-right p {
      color: #4D4D4D;
      font-size: 1.071em !important;
      line-height: 1.500em; }

@media screen and (min-width: 200px) and (max-width: 600px) {
  #home-top-content .home-left h2,
  #home-top-content .home-right h2 {
    margin: 0;
    position: relative; }
  #home-top-content .home-left img,
  #home-top-content .home-right img {
    margin-top: 0; } }
#home-bottom-content .home-primary-bottom {
  background: #E5F1F9;
  border-bottom: 1px solid #E5F1F9;
  border-top: 1px solid #E5F1F9;
  min-height: 250px;
  padding: 2.5em 0; }
#home-bottom-content .announcement h3 {
  color: #2A7433;
  font-size: 1.714em;
  margin: 0.5em 0; }
#home-bottom-content .announcement p {
  color: #4D4D4D;
  font-size: 1.071em;
  line-height: 1.5em; }
#home-bottom-content .home-second-bottom {
  background: #007AC2;
  color: #FFF;
  padding: 2.5em 0 2.5em 0; }
  #home-bottom-content .home-second-bottom h1, #home-bottom-content .home-second-bottom h2, #home-bottom-content .home-second-bottom h3, #home-bottom-content .home-second-bottom h4, #home-bottom-content .home-second-bottom h5, #home-bottom-content .home-second-bottom h6, #home-bottom-content .home-second-bottom ul, #home-bottom-content .home-second-bottom ol, #home-bottom-content .home-second-bottom ul li, #home-bottom-content .home-second-bottom ol li, #home-bottom-content .home-second-bottom p {
    color: #FFF; }
  #home-bottom-content .home-second-bottom h2 {
    font-size: 1.714em;
    margin-top: 0; }
  #home-bottom-content .home-second-bottom h3 {
    font-size: 1.286em;
    margin-top: 0; }
  #home-bottom-content .home-second-bottom p {
    font-size: 1em; }
  #home-bottom-content .home-second-bottom a {
    color: #FFF; }
    #home-bottom-content .home-second-bottom a:hover {
      color: #FFF; }
  #home-bottom-content .home-second-bottom .dark-blue-box img {
    float: left;
    margin-right: 1.5em;
    width: auto; }
  #home-bottom-content .home-second-bottom .grid-75,
  #home-bottom-content .home-second-bottom .grid-50,
  #home-bottom-content .home-second-bottom .grid-25 {
    min-height: 180px;
    padding-top: 1em;
    padding-bottom: 1em; }
  #home-bottom-content .home-second-bottom .dark-blue-box {
    background-color: #005F9B;
    min-height: 130px;
    *height: 130px;
    margin-top: 1em;
    padding-right: 1em; }
    #home-bottom-content .home-second-bottom .dark-blue-box h3 {
      padding-top: 0.6em; }

.fatFooter {
  margin-top: 0; }

@media screen and (min-width: 200px) and (max-width: 600px) {
  #home-top-content .home-left {
    margin-bottom: 30px; }
  #home-top-content .home-left h2,
  #home-top-content .home-right h2 {
    font-size: 1.286em; }
  #home-top-content .home-left p,
  #home-top-content .home-right p {
    font-size: 0.9em;
    line-height: 1.5em; }
  #home-top-content .home-left img,
  #home-top-content .home-right img {
    float: left;
    margin-right: 0.8em;
    width: 50%; }

  #home-bottom-content .home-second-bottom .grid-25 {
    margin-top: 1em; }
  #home-bottom-content .home-second-bottom .dark-blue-box {
    padding-bottom: 1em; }
    #home-bottom-content .home-second-bottom .dark-blue-box img {
      margin-bottom: 1em; }
  #home-bottom-content .announcement h3 {
    margin: 0 0 0.3em 0; }
  #home-bottom-content .announcement p {
    margin-bottom: 2em; }

  .mobile-50 {
    padding: 0 !important;
    width: 50% !important; }
  .mobile-alpha {
    padding-left: 0 !important; } }

/* ====================
    Various
==================== */
.push-down {
  margin-bottom: 40px; }
.hide {
  display: none !important;
  visibility: hidden; }
.visible {
  display: block !important; }


/* ====================================================
    Countdown Clock - REMOVE after UX 2013
==================================================== */
/*
#timer {
  height: 100%;
  padding-top: 3.5em;
  position: absolute;
  text-align: center;
  width: 100%; }

.count-days,
.count-hours,
.count-minutes,
.count-seconds {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFF;
  display: inline-block;
  font-size: 8em;
  float: left;
  height: 220px;
  position: relative;
  line-height: 1.2;
  width: 21%; }

.count-days span,
.count-hours span,
.count-minutes span,
.count-seconds span {
  border-radius: 8px 8px 0 0;
  display: inline-block;
  font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
  padding: 20px 0;
  width: 100%; }

.divide {
  color: #FFF;
  display: inline-block;
  font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
  font-size: 9em;
  float: left;
  line-height: 1.2;
  width: 5%; }

.count-days .label,
.count-hours .label,
.count-minutes .label,
.count-seconds .label {
  border-radius: 0 0 8px 8px;
  bottom: 0;
  display: inline-block;
  font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
  font-size: 15px;
  left: 0;
  position: absolute;
  text-transform: uppercase;
  width: 100%; }

.count-days span {
  background: #D44033; }

.count-hours span {
  background: #EF6F27; }

.count-minutes span {
  background: #EF8A25; }

.count-seconds span {
  background: #E9B533; }

.count-days .label {
  background: #C72A18; }

.count-hours .label {
  background: #E0492A; }

.count-minutes .label {
  background: #F46623; }

.count-seconds .label {
  background: #E69730; }

@media screen and (max-width: 940px) {
  #timer {
    padding-top: 2.5em;
    width: 95%; }

  #rotator .content {
    left: 0 !important;
    width: 90% !important; }
    #rotator .content .count-days,
    #rotator .content .count-hours,
    #rotator .content .count-minutes,
    #rotator .content .count-seconds {
      height: 180px; }
      #rotator .content .count-days span,
      #rotator .content .count-hours span,
      #rotator .content .count-minutes span,
      #rotator .content .count-seconds span {
        font-size: 0.5em; }
      #rotator .content .count-days .label,
      #rotator .content .count-hours .label,
      #rotator .content .count-minutes .label,
      #rotator .content .count-seconds .label {
        font-size: 12px; }
    #rotator .content .divide {
      font-size: 6em;
      line-height: 2; } }
@media screen and (max-width: 480px) {
  #timer {
    margin-top: 1.0em; }

  #rotator .content .count-days,
  #rotator .content .count-hours,
  #rotator .content .count-minutes,
  #rotator .content .count-seconds {
    height: 150px; }
    #rotator .content .count-days span,
    #rotator .content .count-hours span,
    #rotator .content .count-minutes span,
    #rotator .content .count-seconds span {
      font-size: 0.4em;
      line-height: 0.5; }
  #rotator .content .divide {
    font-size: 4em;
    line-height: 2.5; } }
*/
