/* The special www front page hero will appear right below the menu */
#hero.full-width {
  padding-top: 0px;
}

.featured-link-text .ext, .footernav .ext, .rightbar .ext, .navbar-nav .ext {background: none; margin:0; padding-right: 0}
.nav > li > a.ext {padding-right: 15px}

/* www front page */
#hero.full-width {
  background-color: #000000;
}

#hero .carousel-captions {
  height: 335px;
  padding-top: 55px;
}

#hero .carousel-indicators li.active, .carousel-indicators li.active {
  background-color: #ffae00;
  border: 1px solid #ffae00;
}

#hero .carousel-indicators li {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

#hero h5 {
  font-size: 18px;
  line-height: 20px;
  color: #ffae00;
  margin-bottom: 10px;
}

#hero h1 a {
  color: #FFF;
  display: block;
  font-size: 34px;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 45px;
  margin: 0;
  text-shadow: rgba(0,0,0,0.4) 0px 1px 1px;
  width: 500px; /* needs adjustment per breakpoint */
}

#hero .views-element-container.form-group {
  margin-bottom: 0;
}

#hero .carousel-image {
  float: right; /* where does this start? */
  max-height: 400px;
  display: block;
}

#special-front {
  padding-top: 15px;
}

.foot-room {
  margin-bottom: 15px;
  padding: 0;
  min-height: 104px !important;
}

.view-article-images .carousel-control .glyphicon-chevron-left, .view-article-images .carousel-control .glyphicon-chevron-right, .view-article-images .carousel-control .icon-prev, .view-article-images .carousel-control .icon-next{
  color: #000;
  text-shadow: 0 2px 2px rgba(255,255,255,255);
}

.visible-desktop .social-sharing-buttons {display: inline; }
.visible-desktop .social-sharing-buttons a {margin: 0 0 10px 0}
.visible-phone .social-sharing-buttons {justify-content: left;}
.visible-phone .social-sharing-buttons a.social-sharing-buttons__button {margin: 0 10px 0 0}

.view-content .panel-title a::after {
  position: absolute;
  content: "\f106";
  top: auto;
  right: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  margin-right: 30px;
}

.view-content .panel-title a.collapsed::after {
  position: absolute;
  content: "\f107";
  top: auto;
  right: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  margin-right: 30px;
}

@media (max-width: 479px) {
  #hero .carousel-image {float:none}
  #hero .carousel-caption {float: none}

  #hero h1 a {
    color: #FFF;
    display: block;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 20px;
    padding: 0 20px;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
    width: 85%;
  }
  #hero .carousel-captions, #hero .showcase .carousel-captions {
    background-color: rgba(0, 0, 0, 0.4);
    height: 55px;
    margin-top: 0;
    max-width: 100%;
    min-height: 40px;
    padding: 0;
    position: absolute;
    top: 185px;
    width: 100%;
    left:0;
  }

  #hero .carousel-inner .item {
    height: 240px;
  }

  #hero .carousel-indicators li.active {
    background-color: #FFAE00;
  }

  #hero .carousel-indicators li {
    background-color: #FFFFFF;
    display: block;
    float: left;
    font-size: 35px;
    font-weight: bold;
    height: 12px;
    width: 12px;
    margin-right: 5px;
    cursor: pointer;
    /* x */
  }
}
@media (max-width: 599px) {

  #hero .front-article.container {padding: 0; margin: 0;}
  #hero .carousel-captions h1 {margin: 0}

  #hero .carousel-control {
    background-color: transparent;
    border: 0 none;
    width:110px;
    margin-left:-15px;
  }

  #hero .carousel-indicators {
    top: 20px;
    right: 15px;
    left: revert;
    width: auto; /* or 100% */
  }
  #hero .carousel-item .carousel-captions h5 {display:none}
}
@media (min-width: 480px) and (max-width: 599px) {
  #hero .carousel-image {float:none}
  #hero .carousel-caption {float: none}

  #hero h1 a {
    color: #FFF;
    display: block;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.25;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
    margin: 0 25px;
    width: 85%;
    /* x */
  }
  #hero .carousel-captions, #hero .showcase .carousel-captions {
    background-color: rgba(0, 0, 0, 0.4);
    height: 60px;
    margin-top: 0;
    max-width: 100%;
    min-height: 60px;
    padding: 0;
    position: absolute;
    top: 220px;
    width: 100%;
    left:0;
  }

  #hero .carousel-indicators {
    list-style: none outside none;
    margin: 0;
    position: absolute;
    z-index: 5;

  }

  #hero .carousel-control {
    background-color: transparent;
    border: 0 none;
    width:10px;
    margin-left:-15px;
  }

  #hero .carousel-control .glyphicon-chevron-left, #hero .carousel-control .glyphicon-chevron-right, #hero .carousel-control .icon-prev, #hero .carousel-control .icon-next {
    background-color: transparent;
    border: medium none;
    height: 30px;
    margin-top: -10px;
    width: 75px;
  }

  #hero .carousel-inner .item {
    height: 280px;
  }

  #hero .carousel-indicators li.active {
    background-color: #FFAE00;
  }

  #hero .carousel-indicators li {
    background-color: #FFFFFF;
    display: block;
    float: left;
    font-size: 35px;
    font-weight: bold;
    height: 12px;
    width: 12px;
    margin-right: 5px;
    cursor: pointer;
  }

  .carousel-item .carousel-captions h5 {display:none}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) and (min-width: 600px) {

  #hero .carousel-indicators {
    top: 20px;
    right: 15px;
    left: revert;
    width: auto; /* or 100% */
  }
  .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
    height: 30px;
    margin-top: -30px;
    width: 28px;
  }

  .carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
    margin-right: -15px;
  }

  .carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
    margin-left: -25px;
  }

  #hero .carousel-image {float:none}
  #hero .carousel-caption {float: none}

  #hero h1 a {
    color: #FFF;
    display: block;
    font-size: 25px;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.25;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 1px;
    margin: 0 25px;
    width: 85%;
    /* x */
  }
  #hero h5 {display:none}
  #hero .carousel-captions, #hero .showcase .carousel-captions {
    background-color: rgba(0, 0, 0, 0.4);
    height: 60px;
    margin-top: 0;
    max-width: 100%;
    min-height: 60px;
    padding: 0;
    position: absolute;
    top: 290px;
    width: 100%;
    left: 0;
  }

  #hero .carousel-captions h1 {margin: 0}

  #hero .carousel-control {
    background-color: transparent;
    border: 0 none;
    width:10px;
    margin:0 5px 0 -10px;
  }

  #hero .carousel-control .glyphicon-chevron-left, #hero .carousel-control .glyphicon-chevron-right, #hero .carousel-control .icon-prev, #hero .carousel-control .icon-next {
    background-color: transparent;
    border: medium none;
    height: 30px;
    margin-top: -10px;
    width: 90px;
  }

  #hero .carousel-indicators {
    list-style: none outside none;
    margin: 0;
    position: absolute;
    z-index: 5;

  }

  #hero .carousel-inner .item {
    height: 350px;
  }

  #hero .carousel-indicators li.active {
    background-color: #FFAE00;
    /* x */
  }

  #hero .carousel-indicators li {
    background-color: #FFFFFF;
    display: block;
    float: left;
    font-size: 35px;
    font-weight: bold;
    height: 12px;
    width: 12px;
    margin-right: 5px;
    cursor: pointer;
    /* x */
  }

  .carousel-item .carousel-captions h5 {display:none}
}
@media (min-width: 768px) and (max-width: 979px) {
  #hero .carousel-indicators {left: 35%}
}
@media (max-width: 979px) {
  .rightbar{
    border:none;
  }
}
@media (min-width: 980px) {
  #hero .carousel-indicators {left: 35%}
  .article-wrapper {
    height: 400px;
  }
  .front-article {
    /*  width: 1140px; bascially needs padding 15 left and right inside container size
    margin: auto;
    currently replaced by just using container here
    */
  }
  #hero .carousel-control {
    font-size: 120px;
  }
}

/* end www front page */

.rightbar {
    border-left: 1px solid #e3e3e3;
    border-radius: 0px;
}
.front-tabs .nav-tabs > .active > a, .front-tabs .nav-tabs > .active > a:hover, .front-tabs .nav-tabs > .active > a:focus, .front-tabs .nav-tabs > li > a {
    font-size: 18px;
    font-weight: bold;
}

.featured-link-img {
    margin: 0 10px 0 0;
    float: left;
}

.front-tabs .technologies {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -10px -10px;
}

.front-tabs .science {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -65px -10px;
}

.front-tabs .biosecurity {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -10px -65px;
}

.front-tabs .counterterrorism {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -65px -65px;
}

.front-tabs .defense {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -120px -10px;
}

.front-tabs .economic {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -120px -65px;
}

.front-tabs .energy {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -10px -120px;
}

.front-tabs .engineering {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -65px -120px;
}

.front-tabs .security {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -120px -120px;
}

.front-tabs .hpc {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -175px -10px;
}

.front-tabs .intelligence {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -175px -120px;
}

.front-tabs .research {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -10px -175px;
}

.front-tabs .lasers {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -120px -175px;
}

.front-tabs .nonproliferation {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -175px -175px;
}

.front-tabs .open {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -230px -10px;
}

.front-tabs .physics {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -230px -65px;
}

.front-tabs .pubs {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -230px -120px;
}

.front-tabs .facilities {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -10px -230px;
}

.front-tabs .weapons {
    width: 35px; height: 35px;
    background: url('assets/css_sprites.png') -65px -230px;
}