.icon-bar { background-color: red; }

.navbar-collapse { box-shadow: none; }

@media only screen and (max-width: 1600px) { 
    .navigation #navicon { font-size: 2.4em; margin-top: 0.6em; margin-left: 0.3em; }
    .navigation #navicon:after { content: 'CLOSE'; display: block; font-size: 12px; margin-top: -4px; margin-left: 2px; }
    .brand h1  { font-size: 7em;  }
}

@media only screen and (max-width: 1200px) {
    .brand h1  { font-size: 5em;  }
	#portfolio .portfolio-item .portfolio-caption p {    
    font-size: 1.1em;}
	#introduction {background-attachment: scroll;}
	#portfolio {background-attachment: scroll;}
	#about {background-attachment: scroll;}
	#interests {background-attachment: scroll;}
}

@media only screen and (max-width: 930px) {
    #introduction .chevron div { font-size: 1.1em; }
    #interests .row .column { border-left: none; } 
    .brand h1  { font-size: 3.8em;  } 
    .brand h2 { font-size: 1.6em; }
	.portfolio-modal .close-modal {    
    top: 10px;    
    height: 35px;}
	.portfolio-modal .close-modal .lr { 
    height: 35px;}
	.portfolio-modal .close-modal .lr .rl {    
    height: 35px;}
	
}

@media only screen and (max-width: 750px) {
    .brand h1  { font-size: 3em; letter-spacing: 8px; margin-top: 1em; } 
    .brand h2 { font-size: 1.4em; }
      #top .chevron .down { font-size: 12px; }   
      #about *, #interests *, #work *, #contact *, #quote * { visibility: visible !important; -webkit-animation: none !important; -webkit-animation-name: none !important; -moz-animation: none !important; -o-animation: none         !important; -ms-animation: none !important; animation: none !important; }
      #about img { width: 200px; }
      .post p { font-size: 14px; color: black; } 
}

@media only screen and (max-width: 630px) {
    #introduction .chevron div { font-size: 1em; letter-spacing: 2px; }
    .brand h1  { font-size: 2.4em; }
    .brand h2 { margin-top: 15px; }
   .left   { margin: 0 20px 0 50px; }
  #footer ul li { margin: 0 15px; padding: 0 15px; }
  #footer ul li a i { font-size: 2.3em; }
  #about { padding: 60px 0 80px; }
  #interests { padding-bottom: 20px; }
  #contact { padding: 40px 0 120px; } 
}

@media only screen and (max-width: 480px) { 
   .navigation #navicon { font-size: 2em; margin: 0; }
   .navigation #navicon:after { content: 'CLOSE'; display: block; font-size: 10px; margin-top: -4px; margin-left: 2px; }
  .brand h1  { font-size: 1.6em; font-weight: bold; }
  .brand h2 { margin-top: 10px; }
  #header .navigation ul li { font-size: 12px; }
  #introduction .chevron .down { font-size: 1em; }
  #about li { font-size: 1em; letter-spacing: 0.04em; line-height: 1.3em; font-weight: 300; margin-left: 0.5em;}
  #about p { font-size: 1.2em; letter-spacing: 0.04em; line-height: 1.3em; font-weight: 300; margin-left: 0.5em;}
  #about br { display: none; }
  #footer .license { font-size: 1em; }
  #footer {padding-top: 10px;}
  #contact { padding: 40px 0 30px; }
  .portfolio-modal .close-modal {top: 10px; right: 10px;}
	
}

@media only screen and (max-width: 380px) { 
    .navigation #navicon { margin-top: 0.1em; }
  .brand h1  { font-size: 1.3em; }
  .brand h2 { font-size: 1em; }
  #work h3 { font-size: 1.4em; } 
  .portfolio-modal .modal-content {
    padding: 10px 0;
	width: 100%;
}
}

@media only screen and (max-width: 320px) { 
  .brand h1  { font-size: 1.2em; }
  .brand h2 { font-size: 0.8em; }
  #work h3 { font-size: 1.4em; } 
}