/***** COLORS *****

19618f dk blue
418dbf lt blue
d1d1d1 border grey
fafafa background lt grey
85d223 green
fc6500 orange

/*******************/


/* #Media Queries
================================================== */

@media only screen and (max-width: 1600px) {
	
	
	.main_content_padding
	{
	padding-left: 250px;	
	padding-right: 250px;	
	}				

}

@media only screen and (max-width: 1200px) {
	.main_content_padding
	{
	padding-left: 160px;	
	padding-right: 160px;	
	}	

/* STATIC BANNER */	
	.banner_image .banner_content
	{
	position: relative;
	/*padding: 40px 40px 60px 40px;		
	margin: 20px 20px 0px 40px;*/
	}
	
		.banner_content .title
		{
		/* font-size: 50px;
		line-height: 64px; */
		}
		
		.banner_content .title_2
		{
			
		}
		
		.banner_content .details
		{
		font-size: 22px;	
		line-height: 30px;	
		}
		
		.banner_content .call_to_action
		{
		font-size: 24px;
		line-height: 50px;	
		}

/* END STATIC BANNER */
	
}


/* Smaller than 1024 (ipad Air) */
@media only screen and (max-width: 1024px) {
	#header_1 /* briefly make header a bit taller to fit the horizontal menu UNDER the logo */
	{		
	height: 150px;	
	}

	.main_content_padding
	{
	padding-left: 150px;	
	padding-right: 150px;	
	}	
}


@media only screen and (max-width: 999px) {	


	/* HEADER HEIGHT CHANGE */
		#header_1 /* set header back to normal height now that hor menu has gone  */
		{		
		height: 100px;	
		}
		
	/* END HEADER HEIGHT CHANGE */

	#logo
	{		
	top: 11px;	
	}
	
	/*** MENU SWITCH ***/	
	#nav_container
	{
	display: none;	
	}
	
	#mobile_nav_bar, 
	#nav-menu-mobile,
	#nav_container_mobile_wrapper
	{	
	display: block;
	}

	#header_1_container
	{	
	border-top: 0px solid #202020;
	top: 44px !important;	/* make room for drop down nav */		
	}	

	/*******************/	
	
	#nav_tel_container_mobile .phone_number
	{
	display: none;
	}
	
	#vcard
	{
	display: none;	
	right: 20px
	}
	
	#social_buttons_2
	{
	/*right: 230px;*/
	top: 30px; 
	}
	
		
	#container_1, .home #container_1 
	{	
	/*background:transparent url('images/tiling_bg_2_internal.jpg') left top repeat-x;*/
	}
	

	/* STATIC BANNER */	
	.banner_image .banner_content
	{
	position: relative;
	/*padding: 20px 40px 20px 40px;		
	margin: 10px 20px 0px 40px;*/
	}
	
		.banner_content .title
		{
		font-size: 36px;
		line-height: 48px;
		margin-bottom: 10px;
		}
		
		.banner_content .title_2
		{
			
		}
		
		.banner_content .details
		{
		font-size: 20px;	
		line-height: 28px;	
		}
		
		.banner_content .call_to_action
		{
		font-size: 24px;
		line-height: 50px;	
		background-color: rgba(237, 35, 36, 0.70); /* used RGB so I can use opacity (0.30) */		
		}
	/* END STATIC BANNER */

	
	.home #content_container
	{
	/*margin-top: 110px;*/
	}
	
	.main_content_padding
	{
	padding-left: 50px;	
	padding-right: 50px;	
	}	
	
	/*** responsive promo boxes ***/
	.responsive_promo_box, .responsive_promo_box  .content /* reduce overall height of box and content */
	{	
	/*min-height: 300px;	*/
	}
	
	.responsive_promo_box .content /* content  */
	{						
	/*max-width: 400px;*/
	}
	
	.responsive_promo_box.image_left .content /* content when image is on left */
	{
	/*margin: 0 -700px 0 0;*/
	margin: 0 0 0 0px; /* use this setting to move content left or right */
	max-width: 500px;
	}
	
	.responsive_promo_box.image_right .content /* content when image is on right */
	{		
	margin: 0 0 0 -400px; /* use this setting to move content left or right */	 
	max-width: 450px;
	max-width: 400px;
	}
	
	.responsive_promo_box.image_left .responsive_image /* image on left */
	{				
	left: -40px;	/* move it over so its centered better */
	}
	
	.responsive_promo_box.image_right .responsive_image /* image on right */
	{				
	right: -150px;	 /*move it over so its centered better */
	}
	/*************/
	
	.carouselNav, .carousel-next, .carousel-last /* hide grey nav circles and arrows on slider*/
	{
	display: none;
	}

	#footer_logo
	{
	position: relative;	
	margin: 0 auto;
	right: 0;
	top: 0;
	margin-bottom: 90px;
	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.entry-content img, .wp-caption.alignright, .wp-caption.alignleft, #main_content img, #main_content img.alignright, #main_content img.alignleft  /* center all floated images in content areas */
{
float: none !important;
display: block;
margin: 0 auto;
margin-bottom: 25px;
}

#header_1_container
{			
margin-bottom: 0px;
}	

#contact_page_logo
{
display: none;	
}

	#logo
	{	
	left: 0px;	
	margin: 0 auto !important;
	position: relative;	
	border: 0px solid black;
	}	
	
	
	#social_buttons_2
	{	
	display: none;
	}	
	
	/*#social_buttons_2
	{
	right: 60px;	
	border: 0px solid blue;
	}	
	
			#social_buttons_2 #facebook_link
			{
			position: absolute;			
			top: -30px;
			top: -10px;
			}
			
			#social_buttons_2 #youtube_link
			{
			position: absolute;
			top: 27px;
			top: 42px;
			}*/
	
		
	#anything-slider-wrapper
	{
	width: 100%;
	}
	
	#anything-slider
	{
	border-top: 0px;	
	}	
	
	#quote_button_1
	{
	display: none;	
	}
	
	#mobile_buttons_padding, #email_button, #phone_button, #quote_button
	{
	display: block;	
	}
	
	#container_1, .home #container_1 
	{	
	/*background:transparent url('images/tiling_bg_2_internal.jpg') left top repeat-x;*/
	}
	
	/* STATIC BANNER */	
	#banner_images_wrapper /* wraps everything */
	{	
	
	}	
	
	.banner_image .banner_content
	{
	position: relative;
	padding: 12px 40px 40px 40px;
	/*margin: 20px 20px 0px 20px;	*/
	/*max-width: none;
	width: 100% !important;*/	
	}
	
		.banner_content .title
		{
		/*font-size: 28px;
		line-height: 38px;		*/
		
		}
		
		.banner_content .title_2
		{
			
		}
		
		.banner_content .details
		{
		font-size: 20px;	
		line-height: 28px;	
		}
	
			.banner_content .details ul
			{
			/*display: none;*/
			}	

			.banner_content .details ul li
			{
			padding: 10px 0px 10px 0px;		
			border-bottom: 0px solid #B0D7F6;	
			}
			
			.banner_content .details ul li.two, .banner_content .details ul li.last
			{
			display: none;
			}
		
		.banner_content .call_to_action
		{
		font-size: 22px;
		line-height: 46px;
		max-width: 300px;
		margin: 0 auto;
		margin-top: 10px;
		/*display: none;	*/
		}
		
		.home .banner_content .call_to_action /* shut off quote button in banner as the mobile quote button will now be displayed on home page */
		{
		display: none;	
		}
		
		
	/* END STATIC BANNER */
	
	.main_content_padding
	{
	padding-left: 20px;
	/*padding-top: 28px;*/
	padding-right: 20px;
	/*padding-bottom: 30px;*/
	}					
			

	
	#arrow_skinny_1, #arrow_skinny_2	
	{
	display: none;
	}
	
	#content_container
	{	

	}	

	#content_container_2 /* add content side spacing for mobile here */
	{	
	/*width: 100%;
	padding-left: 20px;
	padding-right: 20px;*/
	}
	
	/*** responsive promo boxes - turn to all vertical for mobile ***/
	.responsive_promo_box .responsive_image, .responsive_promo_box.image_left .responsive_image
	{
	display: block;
	height: auto;	
	position: relative;
	top: 0px;
	left: 0;
	margin: 0;
	/*min-width: 440px;*/
	}
	
	.responsive_promo_box .content, .responsive_promo_box.image_left .content, .responsive_promo_box.image_right .content
	{							
	max-width: none;		
	left: 0px;	
	margin: 0;
	min-height: auto;
	padding-top: 30px;
	padding-bottom: 35px;
	}
	
	.responsive_promo_box .content h2
	{
	font-size: 32px;
	line-height: 40px;
	}
	/****************************/
	
	.row_of_boxes .column
	{
	border-bottom: 2px solid #fff !important;
	}
	
	.row_of_boxes .column .content_padding
	{			
	padding: 20px 10px 20px 10px;
	
	}	
	
	#footer
	{
	/*display: none;*/
	}
	
	.footer_links ul
	{		
	padding-bottom: 30px;
	}

	#dimensions.size_boxes.container .column .column_margin, #dimensions.size_boxes.container .columns .column_margin /* represents each box */
	{	
	border-bottom: 1px solid #e7e7e7;
	padding-bottom: 20px;
	}

	.containers_for_sale .right
	{
	padding-left: 0px;	
	}

	.footer_links ul
	{
	margin-bottom: 0px !important;	
	padding-bottom: 20px !important;
	}
	
	#dimensions.size_boxes
	{
	margin-bottom: 0px !important;	
	}

}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	#content_container_2 /* to place a padding on left and right of containers when on mobile (single column) */
	{	
	padding-left: 10px;
	padding-right: 10px;
	}
	
	/* START STATIC BANNER */
	
	.banner_image .banner_content
	{
	position: relative;
	/*padding: 10px 20px 10px 20px;		
	margin: 20px 20px 0px 20px;	*/
	/*max-width: none;
	width: 100% !important;*/	
	display: none;
	}
	
	.banner_content .title
	{
	font-size: 24px;
	line-height: 32px;
	}
	
	.banner_content .details ul
	{
	display: none;
	}	
	/* END STATIC BANNER */	
	
	
	
}