/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

}


/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
#hero-bg img {height: 90vh;}
nav ul li { margin-bottom:0;}
nav ul li a {font-size: 14px;}
header.navbar-only { background-color:transparent;}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
#hero-bg img {height: 90vh;}
nav ul li { margin-bottom:0;}
nav ul li a {font-size: 14px;}
header.navbar-only { background-color:transparent;}
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
#hero-bg img {height: 90vh;}
nav ul li { margin-bottom:0;}
nav ul li a {font-size: 14px;}
header.navbar-only { background-color:transparent;}
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  .mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}  
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
#hero-bg img {height: 90vh;}
nav ul li { margin-bottom:0;}
nav ul li a {font-size: 14px;}
header.navbar-only { background-color:transparent;}
}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
nav {
  position: fixed;
  background-color: #eaecee;
  height: 100%;
  top:0;
  left:0;
}
nav ul li { display:block; }
nav ul li a {
  font-size: 20px;
  margin:0 0 0 0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
.responsiveimage-about {
    padding-bottom: 160%;
	background-position: 75% 100%;
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
.responsiveimage-about {
    padding-bottom: 150%;
	background-position: 80% 100%;
}  }

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
nav {
  position: fixed;
  background-color: #eaecee;
  height: 100%;
  top:0;
  left:0;
}
nav ul li { display:block; }
nav ul li a {
  font-size: 20px;
  margin:0 0 0 0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.responsiveimage-about {
    padding-bottom: 160%;
	background-position: 75% 100%;
}
  }

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
.responsiveimage-about {
    padding-bottom: 150%;
	background-position: 80% 100%;
}  }

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
.mixover{
	background-color:rgba(0,0,0,0.0); background-size:24px 24px; opacity:0.7; height:20%; top:auto; bottom:0;
}
nav {
  position: fixed;
  background-color: #eaecee;
  height: 100%;
  top:0;
  left:0;
}
nav ul li { display:block; }
nav ul li a {
  font-size: 20px;
  margin:0 0 0 0;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	  .responsiveimage-about {
    padding-bottom: 160%;
	background-position: 75% 100%;
}
}


/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
	.responsiveimage-about {
    padding-bottom: 150%;
	background-position: 80% 100%;
}  
}