/* general CSS */


/* setup for browser when we shrink width */
@media screen and (max-width: 720px) {
   /* just for development so we can tell when this triggers */
   /*body { 
     background-color: lightpink;
   }*/
   .welcome {
     padding-top: 8px;
     height: 72px;
     /*border-bottom: 5px solid #DA291C;*/
   }
  /* hide carousel, banner images, and side navigation */
  .featured-slider {
    display:none;
  }
  div.banner {
    display:none;
  }
  div.sidenav {
    display:none;
  }
  /* resize the main content box (we removed sidenav) */
  .rightofleft {
    margin-left: 10px; 
    margin-right: 0px !important;
    width: 100%;
    max-width: 100%;
  }
  .rightofleft ul, li, p {
    width: 100%;
  }
  .facultyp {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 1400px) {
  img.banner {
    left: 50%;
    margin-left: -700px;
  }
}

/* iphone portrait mode */
@media only screen 
  /*and (min-device-width: 375px) */
  and (max-device-width: 670px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation : portrait )  { 
   /* just for development so we can tell when this triggers */
   /*body {   
     background-color: lightblue;
   }*/
   /* resize welcome banner */
   .welcome {
     padding-top: 8px;
     height: 72px;
     width: 100%;
     margin: 0 ;
     /*border-bottom: 5px solid #DA291C;*/
   }
  /* hide carousel, banner images, and side navigation */
  .featured-slider {
    display:none;
  }
  div.banner {
    display:none;
  }
  div.sidenav {
    display:none;
  }
  .rightofleft {
    margin-left: 5px; 
    margin-right: 5px;
    width: 370px;
    max-width: 100%;
  }
  .rightofleft ul, li {
    width: 100%;
  }
  /*.faculty-thumb {
     display:none;
  }*/
  .faculty-listing {
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 10px;
    min-height: 100px;
    height: auto;
    max-width: 100%;
  }
  li.faculty-listing {
    min-height: 100px;
    height: 100px;
  }
  .facultyp {
    display:none;
  }
  .software-right-box {
    /*margin-left:*/
    /*margin-right: 0px;*/
    width: 350px; 
    max-width: 350px;
    margin-bottom: 10px;
  }
  .landing-right-box {
    display: none;
  }
  img {
    max-width: 100%;
    /*float: none;*/
    /*margin: 0 auto !important ;*/
  }
  div.featured-software {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  div.flex-container {
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  img.featured-image {
    max-width: 80%;
  }
  /* top navigation bar */
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    font-size: 30px;
  }
  .topnav.responsive {
    position: absolute;
    width: 300px;
    right: 0;
    top: 0;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Portrait and Landscape */
/*@media only screen 
  and (min-width: 375px) 
  and (max-width: 667px) {
     body {
        background-color: pink;
     }
}
*/
/* iphone landscape mode */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation : landscape )  { 
   /* just for development so we can tell when this triggers */
   /*body {   
     background-color: lightgreen;
   }*/
   /* resize welcome banner */
   .welcome {
     padding-top: 4px;
     height: 36px;
     width: 100%;
     margin: auto auto ;
     /*border-bottom: 5px solid #DA291C;*/
   }
  /* hide carousel, banner images, and side navigation */
  .featured-slider {
    display:none;
  }
  div.banner {
    display:none;
  }
  div.sidenav {
    display:none;
  }
  .rightofleft {
    margin-left: 5px; 
    margin-right: 5px;
    width: 660px;
    max-width: 660px;
    /*max-width: 100%;*/
  }
  .rightofleft ul, li {
    width: 100%;
  }
  /*.faculty-thumb {
     display: block;
  }*/
  /*.faculty-listing {
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 10px;
    min-height: 100px;
    height: auto;
    max-width: 100%;
  }
  li.faculty-listing {
    margin-top: 100px;
    min-height: 100px;
  }*/
  .faculty-listing {
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 10px;
    /*min-height: 100px;*/
    height: auto;
    max-width: 100%;
  }
  li.faculty-listing {
    min-height: 100px;
    /*height: 100px;*/
  }
  .facultyp {
    /*display:none;*/
    height:auto;
  }
  .software-right-box {
    /*margin-left:*/
    /*margin-right: 0px;*/
    width: 350px; 
    max-width: 350px;
    margin-bottom: 10px;
  }
  .landing-right-box {
    display: none;
  }
  img {
    max-width: 100%;
    /*float: none;*/
    /*margin: 0 auto !important ;*/
  }
  div.featured-software {
    width: 10%;
    /*margin: 0;*/
    margin-left: auto;
    margin-right: auto;
  }
  div.flex-container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  .flex-container > div {
    width: 40%;
  }
  img.featured-image {
    max-width: 80%;
  }
  /* top navigation bar */
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    font-size: 30px;
  }
  .topnav.responsive {
    position: absolute;
    width: 300px;
    right: 0;
    top: 0;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Portrait and Landscape */
/*@media only screen 
  and (min-width: 375px) 
  and (max-width: 667px) {
     body {
        background-color: pink;
     }
}
*/