/* 320x480, because...compatiblity */
@media(width:320px) and (height:480px){
/*	#winchester em {
		display: none;
	}*/
	a.btn.hidden-xs {
		display: none;
	}
	.description p {
		font-size: 1.5rem;
	}
	.description a.btn {
		padding: 10px 45px;
	}
}

/* iPhone 5 Retina regardless of IOS version */
@media(device-height:568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2){
	/*IPhone 5 only CSS here*/
	.description p {
		font-size: 1.6rem
	}
	.example.small-image .images > .inner {
    	background-position: center 15%;
	}
	#aspect .images > .inner {
		background-size: contain;
		background-repeat: no-repeat;
	}
}
/* non-iphone */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (width : 375px) {
	.example.small-image .images > .inner {
	    background-position: center 33.33%;
	}
}
/* iPhone 6 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (width : 375px) and (height : 559px) and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2){
	.example.small-image .images > .inner {
	    background-position: center 33.33%;
	}
	#aspect .images > .inner {
		background-size: contain;
		background-repeat: no-repeat;
	}
}

@media(max-width:767px){

	html{
		font-size: 45%;
	}

	#all-content{
		/*margin-bottom: 25vh;*/
		margin-bottom: 37.5vh;
		padding-left: 0px;
		padding-right: 0px;
	}

	nav.navbar {
		background: transparent;
		margin-bottom: 0px !important;
		position: absolute;
		z-index: 1000;
		width: 100%;
		border-color: transparent;
	}
	.navbar-nav {
		background: #fff;
	}

	section#home h1{
		font-size: 4rem;
	}

	#maritz.example{
		margin-top: 0 !important;
	}

	section.example{
		margin-top: 25vh;
	}
	
	#home #blurb {
		opacity: 1 !important;
	}

	.example .description{
		padding: 30px 15px;
	}	

	.example .copy{
		height: auto;
	}
	.example .images{
		height: 75vh;
	}

	.top-image{
		display: none;
	}

	.mobile-image{
		display: block;
	}

	.example .images {
		padding: 30px;
	}

	.example .images .inner{
		margin: 0px;
	}

/*	.example.small-image .images > .inner {
		background-position: center 15%;
	}*/

	.calculated {
	    left: 25%;
    	right: 25%;
	}
}

@media(min-width:768px){

	html{
		font-size: 55%;
	}

	nav{
		display: none;
	}

	.navbar-collapse {
	  height: auto;
      border-top: 0;
	  box-shadow: none;
	  max-height: none;
      padding-left:0;
	  padding-right:0;
	}
	
	.navbar-collapse.collapse {
	  display: block !important;
	  width: auto !important;
	  padding-bottom: 0;
	  overflow: visible !important;
	}
	
	.navbar-collapse.in {
	  overflow-x: visible;
	}

	nav, #all-content{
		padding-left: 0px;
		padding-right: 0px;
	}

	.navbar{
		max-width:300px;
		margin-right: 0;
		margin-left: 0;
		border: none;
		position: fixed;
		padding:0;
		border-radius: 0px;
		z-index: 10000;
		height: 100%;
	}	

	.navbar-nav,
	.navbar-nav > li,
	.navbar-left,
	.navbar-right,
	.navbar-header
	{float:none !important;}

	.navbar-right .dropdown-menu {left:0;right:auto;}
	.navbar-collapse .navbar-nav.navbar-right:last-child {
	    margin-right: 0;
	}

	.navbar-nav>li>a{
		padding: 10px 15px;
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}

	.active.navbar-nav>li>a{
		color: white;
	}

	section#home h1{
		font-size: 5.4rem;
	}

	section.example{
		position:static;
		margin-top: 25vh;
	}

	#maritz.example{
		margin-top: 0 !important;
	}

	.example .copy{
		height: auto;
	}

	.example .images{
		height: 75vh;
	}

	.top-image{
		display: none;
	}

	.mobile-image{
		display: block;
	}

	.example .images {
		padding: 30px;
	}

	.example .images .inner{
		margin: 0px;
	}
}

@media(min-width: 768px) and (max-width: 992px){
	.calculated{
		bottom: -40%;
		position: relative;
	}
}

@media(min-width:992px){

	html{
		font-size: 60%;
	}

	nav{
		display: block;
	}
	.navbar-logo {
		left: 0;
		position: relative;
	}
	section.example{
		position:relative;
		margin-top: 0;
	}

	.top-image{
		display: block;
	}

	.mobile-image{
		display: none;
	}

	.example .images {
		padding: 45px 45px 0px 45px;
		height: 100vh;
	}
	.slide-nav-button {
	    bottom: 92%;
	}
	
}
/* In case the visitor wants to abuse the page */
@media(min-width: 992px) and (max-width: 1030px) {
	.unsqueeze .example .images {
		height: 100%;
	}
	.unsqueeze section.example {
		height: 800px;
	}
}
@media(min-width: 1220px) and (max-height:600px)  {
	.unsqueeze .example .images {
		height: 100%;
	}
	.unsqueeze section.example {
		height: 800px;
	}

}
@media(min-width:992px) and (max-width: 1220px){

	.navbar-default .navbar-nav>li>a{
		font-size: 12px;
		padding: 10px 7.5px;
	}
	.description, h4 {
		font-size: 1.2rem;
		line-height: 160%;
	}
	.description p {
		font-size: 1.4rem;
	}
	.description a.btn {
		padding: 10px 45px;
	}

}
@media(min-width:992px) and (max-width: 1220px) and (max-height: 600px){
  	#winchester em {
		display: none;
	}
	a.btn.hidden-xs {
		display: none;
	}
	.navbar-default .navbar-nav>li>a{
		font-size: 12px;
		padding: 10px 7.5px;
	}
	.description p {
		font-size: 1.2rem;
	}
	.description a.btn {
		padding: 10px 45px;
	}

}
@media(min-width:1200px){
	


}