@media(max-width: 1550px){
/*WORK PAGE*/	
	#work-page .services-provided{
		margin-bottom: 0;  
	}
	#work-page .services-provided:first-of-type{
		margin-top: 4px;
	}	
}/*end max 1550*/

@media(max-width: 1200px){
/*HOME PAGE ABOUT SECTION FONT SIZE*/
	.about-home-content p{
		font-size: 16px;
	}
}/*end max 1200*/

@media(max-width: 1170px){
/*HOME PAGE SERVICE ICONS*/
	#services-section .service-hover{
		width:189px;
	}
	#services-section .col-sm-4 .service-icon{
		height:110px;
	}
	#services-section .col-sm-4 p{
		font-size: 28px; 
	}	
	#services-section .col-sm-4{
		margin-top: 0;
		margin-bottom:55px;
	}
}/*end max 1170*/

@media (min-width:768px) and (max-width: 1050px){
/*CONTACT PAGE*/	
	.contact-form input.contact-field-container,
	.contact-form textarea.contact-field-container{
		max-width: 98%;
	}
	.contact-field:focus + .contact-label-container,
	.input--filled .contact-label-container{
		-webkit-transform: translate3d(75%, 0, 0);
	  	transform: translate3d(75%, 0, 0);
	  	pointer-events: none;
		opacity: .34;
  	}
}/*end 1050 */

@media (max-width: 1026px){
/*HOME PAGE CAROUSEL*/
	.carousel-caption{
	  bottom: 34px;
	}
/*SERVICES PAGE*/
	.bwd-col-7{ 
		float:none;
		width:auto;
	}
/*ABOUT PAGE*/
	#about-page .bwd-col-7{
		margin-left:195px;
	}

}/*end max 1026px*/

@media (min-width: 766px) and (max-width: 880px) {
/*https://stackoverflow.com/questions/21076922/bootstrap-how-to-collapse-navbar-earlier*/	
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
/*NAVIGATION*/
	.nav-navbar-position{
		float:none;
		text-align: center;
		margin:auto;
		padding:0;
	}
	.nav.navbar-nav li {
	  margin-left: 0; 
	  margin-bottom: 0px;  
	}  
	.navbar-nav{
		margin: 0;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form{
		border-color: rgba(0, 244, 7, .34); 
	}
	.nav.navbar-nav li a{ 
	  padding: 8px 3px;
	}
	.nav.navbar-nav li a:hover{ 
	  color:#f1fffa; 
	  border-radius: 3px;
	  background-color: #154266
	}
 }/*end 768 to 880*/

@media(max-width: 769px){
/*SERVICES PAGE*/
	#services-page,
	#about-page{
	  background-image:none;
	}
}/*END 769*/

@media (max-width: 767px) {
/*NAVIGATION*/
	.nav-navbar-position{
		float:none;
		text-align: center;
		margin:auto;
		padding:0;
	}
	.nav.navbar-nav li {
	  margin-left: 0; 
	  margin-bottom: 0px;  
	}  
	.navbar-nav{
		margin: 0;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form{
		border-color: rgba(0, 244, 7, .34); 
	}
	.nav.navbar-nav li a{ 
	  padding: 8px 3px;
	}
	.nav.navbar-nav li a:hover{ 
	  color:#f1fffa; 
	  border-radius: 3px;
	  background-color: #154266
	}
/*HOME CAROUSEL*/
	.carousel-caption .btn-lg{
		padding:2% 4%;
		font-size: 14px;
	}
	.carousel-indicators li{
  		height:8px;
  		width:8px;
	}
	.carousel-indicators .active{
  		height:10px;
  		width:10px;
	}
/*PAGE HEADING COLUMN LAYTOUT*/
	#page-heading .col-sm-10,
	#page-heading .col-sm-1,
	#development-design .col-sm-10, 
	#development-design .col-sm-1, 
	#maintenance-education .col-sm-10,
	#maintenance-education .col-sm-1, 
	#analytics-optimization .col-sm-10,
	#analytics-optimization .col-sm-1{
  		margin-left: 15px; 
  		margin-right: 15px;
  		min-height:127px; 
	}
/*HOME PAGE WORK SLIDER*/
	#work-section .work-title{
		position: relative;
		z-index: 2;
	}
	#work-section{
		padding-bottom: 25px;
	}
	.cd-hero-slider .cd-half-width{
		padding-top: 89px !important;
	}
	.cd-hero-slider{
	  	height:300px !important;
	}
	#work-section h2,
	#work-section p{
		text-shadow: 2px 2px 8px #000;
	}
/*HOME PAGE CONTACT SECTION*/
	.contact-header{
	  font-size: 40px;
	  padding-top: 14px;
	}

/*CONTACT PAGE*/ 
	.contact-logo{
	  background-size: 100% !important;
	}  
	#contact-page .col-sm-6{	
		padding-bottom: 55px;
	}	 
	#contact-page .contact-logos{
		padding-bottom: 100px;
	} 
	.bwd-col-3, 
	.bwd-col-6{
		margin-left: 0;
		width: 50%;
	  	float:left;
	}
	.contact-form input.contact-field-container,
	.contact-form textarea.contact-field-container{ 
		max-width: 80%;
	}
	.contact-field:focus + .contact-label-container,
	.input--filled .contact-label-container{
		-webkit-transform: translate3d(80%, 0, 0);
	  	transform: translate3d(80%, 0, 0);
	  	pointer-events: none;
	} 
}/*end max 767*/
  
@media (max-width: 680px){
/*PAGE HEADING TITLE FONT SIZE*/	
	#page-heading h1, 
	#development-design h1,
	#maintenance-education h1,
	#analytics-optimization h1,
	#work-page h2{
		font-size: 3em;
	} 
}/*end max 680*/
@media (min-width: 601px){
	.carousel-inner>.item>img{
  		left:0 !important;
	}
}/*end min 601*/

@media (max-width:600px){
	#development-design h1,
	#maintenance-education h1,
	#analytics-optimization h1{
		text-align: center;
		width:100%;
		margin-bottom: 0;
	}
/*HOME CAROUSEL*/	
	#myCarousel .item,
	#myCarousel .item img{
	  height: 250px;
	}
	.carousel-inner>.item>img{
		max-width: none;
	}
	/*
	  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
	  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
	  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
	  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
	*/
	.carousel-fade .carousel-inner .item {
	  opacity: 0;
	  transition-property: opacity;
	}
	.carousel-fade .carousel-inner .active {
	  opacity: 1;
	}
	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
	  left: 0;
	  opacity: 0;
	  z-index: 1;
	}
	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {
	  opacity: 1;
	}
	.carousel-fade .carousel-control {
	  z-index: 2;
	}
	/*
	  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
	  Need to override the 3.3 new styles for modern browsers & apply opacity
	*/
	@media all and (transform-3d), (-webkit-transform-3d) {
	    .carousel-fade .carousel-inner > .item.next,
	    .carousel-fade .carousel-inner > .item.active.right {
	      opacity: 0;
	      -webkit-transform: translate3d(0, 0, 0);
	              transform: translate3d(0, 0, 0);
	    }
	    .carousel-fade .carousel-inner > .item.prev,
	    .carousel-fade .carousel-inner > .item.active.left {
	      opacity: 0;
	      -webkit-transform: translate3d(0, 0, 0);
	              transform: translate3d(0, 0, 0);
	    }
	    .carousel-fade .carousel-inner > .item.next.left,
	    .carousel-fade .carousel-inner > .item.prev.right,
	    .carousel-fade .carousel-inner > .item.active {
	      opacity: 1;
	      -webkit-transform: translate3d(0, 0, 0);
	              transform: translate3d(0, 0, 0);
	    }
	}
/*ABOUT PAGE*/
	#about-page .bwd-col-7{
		margin-left:0;
	}		
}/*end max 600*/

@media (max-width: 545px){
/*pages*/	
	#development-design h1,
	#maintenance-education h1, 
	#analytics-optimization h1{
		font-size: 2.5em;
	}
/*ABOUT PAGE*/
	#about-page .bwd-col-7{
		margin-left:0;
	}	
/*CONTACT PAGE*/
	.contact-form input.contact-field-container,
	.contact-form textarea.contact-field-container{
		max-width: 98%;
	}
	.contact-field:focus + .contact-label-container,
	.input--filled .contact-label-container{
		-webkit-transform: translate3d(75%, 0, 0);
	  	transform: translate3d(75%, 0, 0);
	  	pointer-events: none;
	  	opacity:.34;
	}
}/*end max 540*/

@media (max-width: 501px){
/*blockquote styling*/	
	blockquote {
	  border-left: 10px solid #015eac;
	    text-align: left;
	}
	blockquote:before {
	  content: "";
	  font-size: 0em;
	  margin-right: 0;
	}
	blockquote:after {
	  content: "";
	  font-size: 0em;
	  margin-right: 0;
	}
/*services page*/	
	.services-icon{
		float:left;
		text-align: center;
		width:100%;
	}
	.bwd-col-2{
	  width:100%;
	  float:left;
	}
	#services-page .services-icon img{
  		width:55%;
  		min-width: 155px;
  		margin-bottom: 20px;
	}
/*contact page*/	
	.bwd-col-3,
	.bwd-col-6{
		width:100%;
		float:none;
		text-align: center;
	}
	.bwd-col-6{
		padding-bottom: 21px;
	}
	.contact-icons-address,
	.contact-icons-phone,
	.contact-icons-email,
	.contact-icons-facebook{
  		height:auto;
	}
	#contact-page .col-sm-6 .row{
		margin-bottom: 21px;
	}
	#contact-page .col-sm-6 .row p:first-of-type{
		margin-top: 13px;
	}	
	.button-wrapper{
		text-align: center; 
	}
	.contact-logo{
	  background-position: center 80% !important;
	} 	
}/*end max 500*/

@media (max-width: 440px){
/*HOME PAGE CONTACT SECTION*/
	.contact-space{
		padding-left: 0;
	}
/*PAGE HEADING*/
	#page-heading h1{
		font-size: 2.5em;
	} 
/*ABOUT PAGE HEADING*/
	#about-page .mobile-switch{
		margin-top: 16px;
	}
/*CONTACT PAGE HEADING*/
	#contact-page .page-heading-underline h1{
		margin-top: 55px;
	}
/*ADDS BREAK TAG BETWEEN WORDS IN PAGE HEADER TITLE
AND HOME PAGE CONTACT HEADLINE*/
	.desktop-switch{
		display:none;
	}
	.mobile-switch{
		display:inline;
	}	
	.contact-header span{
		line-height: .55;
	}
	#contact-section .col-sm-12.link{
		margin-top: 83px;
	}
/*CONTACT PAGE*/
	.contact-form input.contact-field-container,
	.contact-form textarea.contact-field-container{
		max-width: 98%;
	}
	.contact-field:focus + .contact-label-container,
	.input--filled .contact-label-container{
		-webkit-transform: translate3d(63%, 0, 0);
	  	transform: translate3d(65%, 0, 0);
	  	pointer-events: none;
	}
}/*end max 440*/

@media (max-width: 415px){
/*BRYAN WHITE DESIGNS NAME IN HEADER*/
	.navbar-header a span{
  		font-size: 1.21em; 
	}
/*HOME PAGE WORK SLIDER*/
	.cd-hero-slider .cd-half-width{
		padding-top: 34px !important;
	}
	.cd-hero-slider{
	  height:200px !important;
	}
/*WORK PAGE*/
	.work-service figcaption{
	  font-size: 10px;
	}	
}/*end max 415*/

@media(max-width: 360px){
/*BRYAN WHITE DESIGNS NAME IN HEADER*/ 
	.navbar-header a span{
  		font-size: 1.13em; 
	}
}/*end max 360*/

@media(max-width: 340px){
/*BRYAN WHITE DESIGNS NAME IN HEADER*/
	.navbar-header a span{
  		font-size: 1.08em; 
	}
	.nav-header-position a span{
	  padding-left: 8px;
	  width:100px;
	  padding-top: 7px;
	} 	
/*WORK PAGE CAPTIONS*/
	.caption.caption-visible{
	  font-size: 21px !important;
	}	
/*TESTIMONIALS*/
	#testimonials-page span a{
		font-size: 13px;
	}
}/*end max 340*/

@media (max-width: 330px){ 
/*BRYAN WHITE DESIGNS NAME IN HEADER*/
	.navbar-header a span{
  		font-size: 1.05em; 
	} 
	.work-content h3{
	  padding: 5px 0 5px 0;
	  font-size: 21px;
	}
	.work-content h4{
	  font-size: 16px;
	}
	#work-page .back-border p{
	  font-size: 11px;
	}
	footer{
		min-height: 89px;
	}	
	footer p{
		margin-bottom: 21px;
	}
}/*end max 330*/