/**
 * RPI Engineering Styles - Responsive Overrides
 * This is a mobile-first theme.
 * Primary themes (mobile first) are in styles.css.
 * This stylesheet is for special cases, primarily to larger views.
 */
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
/* Primary Break Point */
@media only screen and (min-width : 768px) {
  /* TOP BAR and HEADER  */
  #apply-donate-links {
    display: block;
    position: absolute;
    right: 15px;
    top: 0;
  } 
  #apply-donate-links a,
  #block-search-form label {
    color: #ddd;
    margin-left: 0.5em;
    font-weight: normal;
    text-transform: uppercase;
  }
  #apply-donate-links a:hover {
    color: #fff;
    text-decoration: none;
  }
  #top-search-icon {
    display: none;
  }
  #block-search-form {
    display: block;
    position: absolute;
    width: 250px;
    right: 105px;
    top: 0;
  }
  #block-search-form #edit-search-block-form--2 {
    background-image: none !important;
    border-radius: 5px;
    float: right;
    font-size: 0.8em;
    height: 16px;
    padding: 2px 8px;
    position: relative;
    top: 2px;
    right: -2px;
    width: 100px;
  }
  #block-search-form button.btn-primary {
    position: relative;
    top: -5px;
    left: -3px;
    background-color: transparent;
    border: none;
    opacity: 0.9;
    transform: scale(0.85);
  }
  #block-search-form .input-group {
    text-align: right;
  }
  #navbar .navbar-collapse {
    display: none !important;
  } 
  #navbar {
    min-height: 72px;
    margin-bottom: 0;
    padding: 0;
  }
  #navbar .navbar-header a.navbar-brand,
  #navbar .navbar-header h1 {
    display: block;
    font-size: 3em;
    height: 72px;
    line-height: 72px;
    margin: 0;
    padding: 0;
  }
  #navbar .navbar-header h1 {
    font-size: 1em;
  }
  #rpiLogo {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 14px;
    height: 72px;
  }
  #rpiLogo img {
    width: 236px;
  }
  /* TABS - NON-MOBILE MENU */
  #tabs-outer {
    display: block;
    margin-bottom: 20px;
    background-color: #424242;
    color: white;
  }
  #tabs {
    position: relative;
  }
  #tabs ul {
  }
  #tabs li {
    display: inline-block;
  }
  #tabs a {
    color: white;
    background-color: #424242;
    display: inline-block;
    padding: 10px 15px;
  }
  #tabs a:hover,
  #tabs a:active,
  #tabs a:focus {
    background-color: #333;
  }
  #tabs a.active-trail {
    background-color: #000;
  }
  #tabs #block-social-icons {
    font-size: 1.2em;
    font-weight: 600;
    position: absolute;
    right: 10px;
    top: 7px;
    color: #ddd;
  } 
  #tabs #block-social-icons a {
    color: #ddd;
    display: inline-block;
    padding: 0 6px;
  }
  #tabs #block-social-icons a:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
  }
  #tabs #block-social-icons .glyphicon {
    font-size: 20px;
    top: -1px;
  }
  #tabs #block-social-icons img {
    border: none;
    vertical-align: baseline;
    margin: 1px 0 0 0;
    opacity: 0.8;
  }
  #tabs #block-social-icons img:hover {
    opacity: 1;
  }
  /* RIGHT SIDEBAR MENU */
  #side-menu li a {
    border-radius: 4px;
  }
  #side-menu .dropdown-menu > li > a {
    white-space: normal;
    line-height: 1em;
    margin-bottom: 0.5em;
    color: #337ab7;
  }
  #side-menu .dropdown-menu li.first {
    margin-top: -0.25em;
  }
  #side-menu li.active > a.active, 
  #side-menu li.active > a.active:focus {
    background-color: #f5f5f5;
    text-decoration: none;
  }
  /* Boot Overrides  */
  #side-menu .dropdown-menu {
    float: none;
  }
  #side-menu .active-trail .dropdown-menu {  
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1em;
  }
  .nav > li > a {
    padding: 6px 15px;
  }
  #side-menu .caret {
    display: none;
  }
  #side-menu .active-trail .caret {
    display: inline-block;
  }
  /* Right Sidebar Blocks */
  .region-sidebar-second h2.block-title {
    font-size: 24px;
  }
  .region-sidebar-second .block-block li {
    margin: 12px 15px;
    list-style: none;
  }
  /* FRONT PAGE */
  #front-page-boxes a.title {
    margin-top: 1em;
  }
  #front-page-about ul {
    margin-top: 0;
  }
  body.front .region-content {
    position: relative;
  }
  #block-fp-interview {
    position: absolute;
    top: 258px;
    right: 0px;
    text-align: center;
    width: 110px;
    font-size: 0.9em;
    line-height: 1.2em;
    min-width: 130px;
  }
  #block-fp-interview .views-field-title {
  }
  #block-fp-interview a {
    color: #424242;
  }
  #block-fp-interview a:hover {
    text-decoration: none;
  }
  #block-fp-interview a:hover img {
    opacity: 0.9;
  }
  #block-fp-interview img {
    border-bottom: 2px solid #E2231B;
    min-width: 0;
    /*width: 110px;*/
    max-height: 80px;    
  }
/** the following should be kept for if we want to use it; the 
 *  content is commented out in the "front page about" block */
  #front-page-about #fpTenQuestions {
    font-size: 25px; /* set exact size so we can set exact line-height so we can drop a white border over the line below */ 
    line-height: 14px;
    border-bottom: 1px solid white;
    color: #888;
    display: block;
    float: right;
    width: 320px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    position: relative;
    top: 28px;
    text-align: right;
  }
  #front-page-about #fpTenQuestions:hover {
    text-decoration: none;
    color: #0479db;
  }
  #fpTenQuestions .tq-subtext {
    color: #666;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    width: 80%;
    display: block;
    float: right;
    margin: 0.5em 1em;
  }
  #fp-summer-arch a {
    border: medium none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 120px;
    top: 273px;
  }
  #fp-summer-arch img {
    width: 120px;
    height: auto;
  }
  /* Front Page About */
  #front-page-about li {
    float: left;
    list-style: disc;
    margin: 0 0.5em 0 1em;
  }
  #front-page-about li:first-child {
    list-style: none;
    margin-left: 0;
  }
  /* RESEARCH PAGE */
  #research-thrusts-list .media-left_image {
    margin-bottom: 1em; /* increase on desktop */
  }
  /* NEWS LISTING & BLOG */
  #block-news-page .views-field-field-image,
  #block-views-interviews-block .views-field-field-image,
  #block-teaching-opportunities .views-field-field-image,
  body.page-blog .view-blog .views-field-field-image {
    float: left;
  }
  #block-news-page .views-field-field-image img,
  #block-views-interviews-block .views-field-field-image img,
  #block-teaching-opportunities .views-field-field-image img,
  body.page-blog .view-blog .views-field-field-image img {
    min-width: 0;
    max-width: 140px;
    height: auto;
    margin: 0 1em 1.5em 0;
  }
  /* Events Lists  */
  #block-eng-events ul,
  #block-views-event-list-block ul {
    margin: 0 0 0 1em;
  }
  #block-eng-events li,
  #block-views-event-list-block li {
    margin: 0 0 1em 0;
  }
  /* NEWS PAGES & BLOG PAGES & INTERVIEWS (and general page images) */
  .field-name-field-image {
    float: right;
    margin: 0 0 1em 1em;
  }
  .field-name-field-image img {
    min-width: 0;
  }
  body.node-type-news-story .field-name-field-image, 
  body.node-type-news-story blockquote.image-field-caption {
    max-width: 480px;
  }
  body.node-type-blog-post .field-name-field-image-caption {
    float: right;
    max-width: 480px;
    clear: right;
    margin: 0 0 1em 1em;
  }
  body.node-type-interview .field-name-field-image {
    float: none;
    margin: 0;
  }
  body.node-type-interview #block-system-main .field-name-body h2 {
    margin-top: 0;
  }
  body.node-type-interview #block-system-main .field-name-body h3 {
    margin-top: 1em;
  }
  /* NEWS BLOCKS  */
  .soe-news-blocks .views-row {
    margin: 0 0 1em;
    padding: 0 1em 0 0;
  }
  body.front .soe-news-blocks .views-row {
    padding: 0;
  }
  body.front .soe-news-blocks .views-row:nth-child(1) {   
    padding-right: 1em;
  }
  body.front .soe-news-blocks .views-row:nth-child(4) {
    padding-left: 1em;
  }
  body.front .soe-news-blocks .views-row:nth-child(2) {
    padding-left: .35em;
    padding-right: .65em;
  }
  body.front .soe-news-blocks .views-row:nth-child(3) {
    padding-left: .65em;
    padding-right: .35em;
  }
  .soe-news-blocks h3 {
    font-size: 1em;
    margin: 6px 4px 18px;
  }
  body.front .soe-news-blocks a {
    color: #424242;
  }
  body.front .soe-news-blocks a:hover {
    color: #0479db;
  }
  body.front .soe-news-blocks .views-field.views-field-title {
    margin-right: 0;
  }
  .soe-news-blocks a {
    /*color: #000;*/
  }
  .soe-news-blocks a:hover {
    text-decoration: none;
    color: #000;
  }
  .soe-news-blocks .views-field.views-field-title {
    position: relative;
  }
  body.not-front .soe-news-blocks .news-block-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(250, 250, 250, 0.8);
    border: 1px solid #eee;
    border-top: none;
    padding: 0.5em 1em;
    margin-right: 1em;
  }
  body.front .soe-news-blocks .views-field.views-field-title,
  .soe-news-blocks-faculty .views-field.views-field-title,
  body.not-front .soe-news-blocks.soe-news-blocks-faculty .news-block-title {
    position: static;
    bottom: auto;
    opacity: auto;
    background-color: transparent;
    border: none;
    padding: 0;
  }
  .soe-news-blocks-faculty .views-row:nth-child(3n+1) {
    clear: left;
  }
  /*#faculty-spotlight-on-achievements h2.block-title {
    font-size: 1.7em;
  }*/
  .soe-news-blocks img {
    min-width: 0;
  }
  /* VIDEOS PAGE */
  body.page-news-video .view-video .views-row {
    float: left;
    width: 32%;
    margin-right: 1.3%;
    font-size: 0.9em;
    min-height: 200px;
  }
  body.page-news-video .view-video .views-row:nth-child(3n+1) {
    clear: left;
  }
  body.page-news-video .view-video iframe {
    width: 100%;
    height: auto;
  }
  /* VIDEO WIDGET */
  /* CENTERS LISTING */ 
  .view-centers .views-field-field-center-image {
    float: right;
    margin: 0 0 0.5em 0.5em;
  }
  .view-centers .views-field-field-center-image img {
    min-width: 0;
  }
  /* ABOUT PAGE */
  #GCL-ResearchTable {
    /*width: 135%; /* if we want a full-width table */
  } 
  /* PROGRAM LISTINGS */
  .program img {
    margin: 0 1em 0.25em 0;
    float: left;
    min-width: 0;
  }
  .program:nth-child(even) img {
    float: right;
    margin: 0 0 0.25em 1em;
  }
  /* GENERAL */
  ul {
    padding-left: 0;
  }
  img.file-right-image {
    float: right;
    margin: 0 0 1em 1em;
  }
  img.file-left-image {
    float: left;
    clear: left;
    margin: 0 1em 1em 0;
  }
  .two-col {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin: 1em 0 2em;
    padding: 0;
    text-align: left;
  }
  .three-col {
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
    margin: 1em 0 2em;
    padding: 0;
    text-align: left;
    list-style: none;
  }
  .two-col li,
  .three-col li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .two-col li {
    margin-left: 0.5em;
  }
  .right {
    float: right;
    margin: 0 0 1em 1em;
  }
  /* PEOPLE PAGES */
  body.node-type-person .field-name-field-image {
    max-width: 300px;
  }
  /* HUB */
  .hub-team-member {
    display: grid;
    grid-template-columns: 300px 1fr;
    margin: 1em 0 4em;
    column-gap: 2em;
  }
  .hub-team-member-photo {
    margin: 0.5em 0;
  }
  /* SPECIAL */
  body.page-node-3900 #node-3900 .file-right-image {
   width: 200px;
   height: auto;
  }
  body.page-node-4733 h2.nae-2020-title {
    font-size: 1.6em;
  }
  #social-media-icons-inline.right {
    float: right;
    clear: right;
  }
  #social-media-icons-inline img {
    width: 80px !important;
    height: auto !important;
  }
  /* NMD - National Manufacturing Day */
  body.page-node-4429 #node-4429 .field-name-field-image {
    margin: -1.5em 0 1em 0;
  }
  body.page-node-4429 #node-4429 ul.three-col img {
    height: fit-content;
  }
  body.page-node-4429 #node-4429 ul.three-col,
  body.page-node-4429 #node-4429 ul.two-col {
    margin: 0;
  }
  body.page-node-4429 #node-4429 ul.three-col li, 
  body.page-node-4429 #node-4429 ul.two-col li {
    margin-bottom: 2em;
    list-style: none;
  }
  /* FOOTER */
  #footer-contact-info {
    float: left;
    clear: left;
  }
  #block-footer-menu {
    clear: none;
  }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  #block-fp-interview {
    top: 282px;
    width: 120px;
  }
  #block-fp-interview img {
    /*width: 120px;*/
    max-height: 90px;
  }
  #fp-summer-arch a {
    display: block;
    border: 0 none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 150px;
    top: 295px;
  }
  #fp-summer-arch img {
    width: 130px;
  }
  /* SPECIAL */
  body.page-node-3900 #node-3900 .file-right-image {
   width: 250px;
  }
  body.page-node-4733 h2.nae-2020-title {
    font-size: 2.3em;
  }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  #block-fp-interview {
    top: 312px;
    width: 140px;
  }
  #block-fp-interview img {
    /*width: 140px;*/
    max-height: 110px;
  }
  #block-fp-interview .interview-title {
    display: block;
    padding: 0 0.5em;
  }
  #fp-summer-arch a {
    right: 180px;
    top: 340px;
  }
  /* SPECIAL */
  body.page-node-3900 #node-3900 .file-right-image {
   width: 300px;
  }
}