/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {

.banner{height:auto;}
img.bannerLogo{width:200px; height:66px; margin:1em auto;}
.navbar{width: 100%;}
ul.nav. li {width:100%;}
ul.nav.responsive{width:100%;}
.twitter{width: 100%; text-align: center; margin: 0;}
.staffContent{width:80%;}
.infoBox{width: 100%; text-align: left;}
img.infoBox{width: 100%; margin: 0 auto;}
p.contentPagesStaff{width: 100%; margin: 0 auto; padding: 0;}
.main{width:100%; margin: 0 auto; padding: 5% 10%;}
.textWrap{padding: 0;}

h1.contentPages{margin:0 0 1em 0;}

/* To hide columns */
.push {
	    display: none;
	}

#slideshow, #slideshow img{
    height:auto;
    width:100%;
    display: none;
  }

.moreButton{display: none;}

img.workHeader{
  width: 100%;
  margin:0 auto;
  text-align: center;
  }

.caseStudyHeader{
  margin-top: 8em;
  }

h1.caseStudy{font-size: 1.2em;}

#formContainer{width:80%;}
#contactForm, #contactForm input[type="text"], #contactForm textarea{width: 100%;}
img.contactPage{display: none;}

.prevButton, .nextButton{width:50px;}

.majorWork{width: 100%;}
img.majorWorkDetail{float: none;}
}

/* NAVBAR */
/* When the screen is less than 1073 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1073px) {

  .navbar{
    margin:0;
    position: absolute;
    top:0;
    right:0;
    opacity: 0.9;
  }

  ul.nav li {display: none;}
  ul.nav li.icon {
    position: absolute;
    right: 0;
    top:20px;
    display: inline-block;
  }

  a.menu{
  font-size: 0.8em;
  padding:0;
}

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:1073px) {
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
 
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;   
    background-color: #626879;
    width: 100%;
    height: 100%;
    float: right;
    margin: 0;
    padding: 1em;
    border: 0;
  }

  .titleBox{
    margin: 2em auto;
    width:100%;
  }

.footer{text-align: center;}

.footerImgLeft, .footerImgRight{
  float:none;
  text-align: center;
  }

.twitter{max-height: 400px;}

}



@media screen and (min-width:480px) and (max-width:900px) {
.twitter{width: 60%; text-align: center; margin:0 auto; float: none;}
.titleBox{width: 80%; float:right; padding: 1em 8em;}
.infoBox{width: 90%; max-width: 500px; padding:1em; margin: 0 auto; text-align: left;}
img.infoBox{width: 80%; margin: 0 auto; text-align: center; float: none;}
h2.infoBox{width:100%;}
ul.contentPages{width:100%;}
img.workHeader{padding:1.6%;}
img.caseStudyHeader{margin-top: 6em;}
h1.caseStudy{font-size: 2em;}
.titleBox{margin: 2em auto; width:100%;}
li.infoBox{padding: 0;}

}