/* ---------------------------------------------------- */

/* R E S P O N S I V E */

/* Super large Devices, Wide Screens */
@media only screen and (min-width : 1600px) {
	.overview .item { margin-top: 20px; margin-bottom: 25px; }
	
}

@media only screen and (max-width : 1599px) {
	.ball-items img { max-width: 250px; height: auto !important;}
	.container-fluid.references .slide { padding: 0; }
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.navbar { margin-top: 1.2em; }
	.header { padding: 1.2em 0 0 0; }
	.navbar-collapse.collapse { height: 95px !important; }
	.nav > li > a { font-size: 17px; padding-left: 1.5em; padding-right: 1.5em; line-height: 40px; }
	.nav > li.active:before { width: 0.75em; height: 0.75em; }
	.container-fluid .jumbotron { height: 20em; }
	.container-fluid .jumbotron header { font-size: 1.1em; padding: 1em 0; }
	.container-fluid .jumbotron header a { line-height: 2.5em; padding: 0 1em; }
	.overview .item { font-size:0.9em; line-height: 1.5em; margin: 10px 0; }
	.beam-large { padding: 1em; font-size: 1.5em; }
	.beam-large a { line-height: 2.5em !important; padding: 0 1em; }
	
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.navbar { margin-top: 1.0em; }
	.header { padding: 1.0em 0 0 0; }
	.nav > li > a { font-size: 16px; padding-left: 0.5em; padding-right: 0.5em; }
	.nav > li.active:before { width: 0.65em; height: 0.65em; }
	.header .logo { width: 350px; height: 81px; background-size: 350px 81px; margin-bottom: 1.0em; }
	.container-fluid .jumbotron { height: 17em; }
	.container-fluid .jumbotron header {  }
	.container-fluid .jumbotron header a { display: block; max-width: 11em; font-size: 0.9em; margin: 1em auto 0 auto; }
	.beam-gigantic h2 { font-size: 1.3em !important; line-height: 1.2em; border-bottom: none; margin-bottom: 10px; }
	.overview .item { font-size:0.85em; line-height: 1.4em; min-height: 180px; }
	.beam-large a { display: block; max-width: 11em; font-size: 0.6em; margin: 1em auto 0 auto; }
	.footer .contact-form { padding-top: 40px; padding-left: 0px; }
	.footer .contact-details, .footer .contact-details p { font-size: 13px; line-height: 1.5em; }
	.socialmedia { margin-top: 30px; }
	.jumbotron .carousel-caption header { font-size: 30px; line-height: 33px; }
	.jumbotron .carousel-caption p { font-size: 20px; }
	
	.ball-items .col-md-4 { margin-bottom: 35px; margin-top: 35px; }
	.ball-items .col-md-4:last-of-type { margin-bottom: 0px !important; }
	.ball-items .row.t-margin {  padding-top: 0px;margin-top: 0px; }
	.ball-items ~ .ball-items { padding-top: 0px;margin-top: 0px; }
	/*
	.ball-items, .ball-items .row.t-margin {  padding-top: 0px;margin-top: 0px; }
	.ball-items:first-of-type { margin-top: 35px !important; }
	*/
	.ball-items img { max-width: 300px; height: auto !important;}
	
	.contact-details .logo-sm  { margin: 30px auto 0 auto; }
	
	.content img { max-width: 767px; }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
	.heading { padding-top: 40px; }
	h1 { font-size: 25px; line-height: 30px; }
	.navbar-collapse.collapse { height: auto !important; }
	.navbar-collapse {  background-color: #dcf0f4; }
	.container-fluid .jumbotron { height: 15em; }
	.container-fluid.header { min-height: 50px; }
	.nav > li > a { line-height: 20px; }
	.nav > li:first-of-type { padding-top: 15px; }
	.nav > li:last-of-type { padding-bottom: 10px; }
	.nav > li.active:before { display: none; }
	.beam-gigantic { padding: 1.1em 1em 1.3em 1em; font-size: 1.2em; }
	.beam-gigantic h2 { border-bottom: 0px !important; font-size: 1em; }
	.overview .item .text-left { padding-left: 0px !important; }
	nav.navbar {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	.nav ul {
		position: static;
		display: block;
		left: auto;
		top: auto;
		float: none;
		opacity: 1;
		background-image: none !important;
		background-color: transparent;
	}
	.nav ul li:first-of-type { padding-top: 0px; margin-top: -5px; }
	.nav ul li:last-of-type { padding-bottom: 5px; }
	.nav ul li a { font-size: 17px !important; }
	.nav li.active a, .nav li:hover a { color: #484848 !important; }
	.navbar-nav>li>a { padding-bottom: 0px !important; }
	.dropdown-menu>li>a, .nav li.active .dropdown-menu>li>a { color: #737373 !important;text-align: center; padding: 1px; }

	.jumbotron .carousel-caption { padding-top: 10px; padding-bottom: 10px; }
	.jumbotron .carousel-caption header { font-size: 20px; line-height: 22px; }
	.jumbotron .carousel-caption p { font-size: 15px; line-height: 16px; }	
	
	.ball-items img { max-width: 200px; height: auto !important;}
	
	.img-resp-l, .img-resp-r { float: left !important; clear: both; width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin-bottom: 30px; }
	.img-resp-l { margin-left: 0px !important; }
	.img-resp-r { margin-left: 0px !important; margin-right: 20px; }
	.img-resp { width: 100%; max-width: 100%; height: 100%; margin: 15px 0; }
	
	.contact-details  { text-align: center; padding-bottom: 30px !important; }
	.contact-details .logo-sm  { margin: 0 auto; }
	
	.row.shopgallery a { width:100%; text-align: center; }	
	.content img { margin: 30px auto; width: 100%; max-width: 320px; height: auto !important; display: block; }
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	html, body { font-size: 18px; }
	.t-margin { margin-top: 15px; }
	.b-margin { margin-bottom: 15px; }	
	.top-bar .row { line-height: 32px; font-size: 13px; }
	.logo img { margin: 20px auto 25px auto; }
	.beam-large { line-height: 1.1em; }
	.beam-large a { width: 100%; max-width:100%; }
	.overview h3 { margin-bottom: 0.1em; }
	.overview .item { font-size:0.82em; line-height: 1.3em; min-height:115px; margin-bottom: 10px; margin-top: 10px; }
	.overview img { max-width: 70px; max-height: 70px; }
	.overview .item:last-child { margin-bottom: 0px !important; }
	.content table, .content tr, .content td, .content tbody { display: block; }	
	
	.content img { margin: 30px auto; width: 100%; max-width: 320px; height: auto !important; display: block; }
	
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	.top-bar .row { font-size: 11px; }	
	
	.content img { margin: 30px auto; width: 100%; max-width: 320px; height: auto !important; display: block; }
}