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

E2E0D4 lt beige
c3c4b2 dk beige
9F1B33 burgundy
f2f2f2 bg grey

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


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

@media only screen and (max-width: 1600px) {
	
	#anything-slider .banner_text
	{
	/*bottom: 180px;*/
	}
	
	.main_content_padding
	{
	/*padding-left: 250px;	
	padding-right: 250px;	*/
	}				

}


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

	/*** MENU SWITCH ***/
		#nav_container
		{
		display: none !important;	
		}
		
		#mobile_nav_bar, 
		#nav-menu-mobile,
		#nav_container_mobile_wrapper
		{	
		display: block;
		}
		
		#header_1
		{				
		height: 90px;
			
		}
		
			.smaller #header_1
			{					
			height: 80px;
			height: 0px;
			border: 0px solid red;		
			}
		
		#header_2_container
		{
		display: none;	
		}

		#container_1
		{		
		margin-top: 134px !important;	/* must match total header height plus 44px (for the WP toolbar) */ 
		}
		
		#header_1_container
		{
		top: 44px !important;	/* make room for drop down nav */
		}
	/*******************/	

#logo
{
position: relative;	
width: 200px;
height: 70px;		
left: 0px;
top: 12px;
margin: 0 auto;
}

	.smaller #logo
	{
	position: relative;	
	width: 58px;
	height: 70px;
	
	height: 0px;
	width: 0px;
	
	left: 0px;
	top: 5px;
	margin: 0 auto;
	}

/* 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 */
	
	
}

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

.invisalign_boxes
{
flex-wrap: wrap;
}

	.invisalign_boxes .content 
	{
	width: 100%;
	}
	
	.invisalign_boxes.reverse /* ensure images go under the text if required */
	{
	/*flex-direction: column-reverse;*/
	}
	
/* ANYTHING SLIDER CONTENT */	

	#anything-slider .banner_text
	{	
	padding: 40px 40px 60px 40px;		
	margin: 20px 20px 0px 20px;
	/*top: 120px;*/
	}
	
		#anything-slider .banner_text .banner_text_title
		{
		font-size: 50px;
		line-height: 64px;
		}
		
		#anything-slider .banner_text .title_2
		{
			
		}
		
		.banner_text .banner_text_details
		{
		font-size: 22px;	
		line-height: 30px;	
		}
		
		.banner_text .call_to_action
		{
		font-size: 24px;
		line-height: 50px;	
		}

/* END ANYTHING SLIDER CONTENT */
	
	
	.main_content_padding
	{
	/*padding-left: 180px;	
	padding-right: 180px;	*/
	}	

	.home_page_content_padding
	{				
	padding-bottom: 0px;
	padding-top: 20px;
	}
	
	.home_appt_button.button_1
	{
	margin: 0 auto;
	text-align: center;		
	display: block;
	width: 300px;
	}
	
}


/* Smaller than 1024 (ipad Air) */
@media only screen and (max-width: 1024px) {

	.main_content_padding
	{
	/*padding-left: 150px;	
	padding-right: 150px;	*/
	}	
	
	#header_1 /* make header a bit taller to fit the horizontal menu UNDER the logo */
	{		
	/*height: 150px;	*/
	}	
	
	.selection_boxes img
	{	
	padding: 20px 40px 20px 40px; /* padding can only be applied to the image as the absolute positioned image below will not honour it on the div */	
	}
	
	#nav_container /* move menu down to slip under logo */
	{	
	
	}
	
	#logo
	{
	/*top: 12px;
	width: 250px;
	height: 85px;*/	
	}	
		
	#vcard
	{
	top: 38px;	
	}
	
	/*** responsive promo boxes ***/
	.responsive_promo_box .content
	{						
	/*max-width: 470px;	*/
	/*margin: 0 0 0 -400px;*/
	}
	
	.responsive_promo_box
	{	
	/*min-height: 200px;	*/
	}
	

	/*****************/
}

/* Tablet Portrait size to standard 1000 (devices and browsers) */
/*@media only screen and (min-width: 768px) and (max-width: 999px) {*/
@media only screen and (max-width: 999px) {



/* 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 */


.row_of_boxes.container .column, .row_of_boxes.container .columns /* represents each box */
{	
padding: 10px;
}

	
/* ANYTHING SLIDER CONTENT */	

#anything-slider .banner_text
{	
padding: 20px 40px 20px 40px;		
margin: 10px 20px 0px 10px;
/*top: 80px;*/
/*top: auto;
bottom: 20px;*/
}

	#anything-slider .banner_text .banner_text_title
	{
	font-size: 36px;
	line-height: 48px;
	margin-bottom: 10px;
	}
	
	#anything-slider .banner_text .title_2
	{
		
	}
	
	#anything-slider .banner_text .banner_text_details
	{
	font-size: 20px;	
	line-height: 28px;	
	}
	
	.banner_text .call_to_action
	{
	font-size: 24px;
	line-height: 50px;			
	}
	
/* END ANYTHING SLIDER CONTENT */	

	
	
	#anything-slider 
	{	
	position: relative;
	/*border-top: 2px solid #8FA4CF;	*/
	}
	
	#container_1, .home #container_1 
	{	
	/*background:transparent url('images/tiling_bg_2_internal.jpg') left top repeat-x;*/
	}
	
	#content_container_2 /* to place a padding on left and right of containers when on mobile (single column) */
	{	
	/*padding-left: 20px;
	padding-right: 20px;*/
	}
	
	.home #content_container
	{
	/*margin-top: 110px;*/
	}
	
	.main_content_padding
	{
	/*padding-left: 80px;	
	padding-right: 80px;	*/
	}	
	
	#home_page_content_padding
	{				
	padding: 50px 40px 50px 40px;				
	}				
	
	/*** 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 -80px; /* 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: 500px;
	}
	
	.responsive_promo_box.image_left .responsive_image /* image on left */
	{				
	left: -40px;	/* move it over so its centered better */
	left: -180px;
	}
	
			.responsive_promo_box.image_left.alternate .responsive_image /* image on left */
			{				
			left: -0px;	/* move it over so its centered better */			
			}
			
	.responsive_promo_box.image_right .responsive_image /* image on right */
	{				
	right: -100px;	 /*move it over so its centered better */
	}
	/*************/

	.board_train_packages.container
	{	
	padding: 40px 20px 0px 20px;	
	}

	#social_buttons_2
	{
	right: 20px;
	}

	#social_buttons_2 #linked_in_link, #social_buttons_2 #facebook_link, #social_buttons_2 #twitter_link, #social_buttons_2 #youtube_link, #social_buttons_2 #instagram_link
	{	
	margin-right: 5px;
	}
	
	#footer_logo, #ministry_logo
	{
	position: relative;	
	margin: 0 auto;
	right: 0;
	top: 0;
	margin-bottom: 10px;
	}
	
}



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

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

.row_of_boxes #header h2
{
font-size: 36px;
line-height: 50px;
}

.row_of_boxes.container .column, .row_of_boxes.container .columns /* represents each box */
{
padding: 0px;
margin-bottom: 0px;
}
		
.row_of_boxes .box_title_container
{		
-moz-border-radius: 0px;  	
-webkit-border-radius: 0px;  	 
border-radius: 0px; 
border-bottom: 4px solid #23282D; 		
}	
		
#header_1_container
{			
margin-bottom: 0px;
}	

	#vcard
	{
	display: none;
	}

	/*#logo
	{
	left: 0px;
	margin: 0 auto;
	top: 12px;
	position: relative;	
	border: 0px solid black;
	}
	
		#logo, #logo img
		{
		width: 270px;
		height: 88px;	
		}*/
	
	.home_page_content .quote
	{
	font-size: 24px;
	line-height: 38px;
	/*display: none;	*/
	}
	
	#anything-slider-wrapper
	{
	width: 100%;
	}

	/* STATIC BANNER */	
	#banner_images_wrapper /* wraps everything */
	{	
	
	}	
	
	.banner_image .banner_content
	{
	position: relative;
	padding: 25px 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 */
	
	
	/* ANYTHING SLIDER CONTENT */	
	
	#banner_images_wrapper /* wraps everything */
	{	
	
	}	
	
	#anything-slider .banner_text
	{	
	padding: 20px 30px 30px 30px;		
	margin: 20px 20px 0px 10px;	
	/*max-width: none;
	width: 100% !important;*/	
	max-width: 500px;	
	top: 0px;
	}
	
		#anything-slider .banner_text .banner_text_title
		{
		font-size: 30px;
		line-height: 42px;
		}
		
		#anything-slider .banner_text .title_2
		{
			
		}
		
		#anything-slider .banner_text .banner_text_details
		{
		font-size: 20px;	
		line-height: 28px;	
		}
	
			#anything-slider .banner_text .banner_text_details ul
			{
			/*display: none;*/
			}	

			#anything-slider .banner_text .banner_text_details ul li
			{
			padding: 6px 0px 6px 0px;		
			border-bottom: 0px solid #B0D7F6;	
			}
			
			#anything-slider .banner_text .banner_text_details ul li.two, .banner_content .banner_text_details ul li.last
			{
			display: none;
			}
		
		#anything-slider .banner_text .call_to_action
		{
		font-size: 22px;
		line-height: 46px;
		max-width: 300px;
		/*margin: 0 auto;*/
		margin-top: 20px;
		left: 0px;
		/*display: none;	*/
		}
					
		
	/* END ANYTHING SLIDER CONTENT */	
		

	#anything-slider img#slider_image_5 /* change slider image to a different size image for mobile */
	{
	/*content:url("http://sunnyviewpools.ca/wp-content/themes/responsive_1/images/banner_images_1200_5.jpg");	*/
	}	
	
	#anything-slider img#slider_image_1 /* change slider image to a different size image for mobile */
	{
	/*content:url("http://sunnyviewpools.ca/wp-content/themes/responsive_1/images/banner_images_1200_1.jpg");	*/
	}	
	
	#anything-slider img#slider_image_4 /* change slider image to a different size image for mobile */
	{
	/*content:url("http://sunnyviewpools.ca/wp-content/themes/responsive_1/images/banner_images_1200_4.jpg");*/	
	}	
	

	.selection_boxes img
	{	
	padding: 20px 20px 20px 20px; /* padding can only be applied to the image as the absolute positioned image below will not honour it on the div */	
	}


	#home_page_content_container
	{
	margin-top: 0px;		
	border-top: 1px solid #ccc;	
	}

		#home_page_content
		{
		Max-width: 1200px;
		/*margin-bottom: 35px;*/				
		font-size: 18px;
		line-height: 26px;
		margin: 0 auto;				
		}
		
			#home_page_content_padding
			{
			padding: 20px 20px 20px 20px;	
					
			}
		
	#banner_box
	{
	display: none;
	}
	
	#container_3 
	{
   /*margin-top: 0px;*/
	}
	
	#search
	{
	display: none;	
	}
	
	#email_button, #phone_button
	{
	/*display: block;	*/
	}
	
	#quote
	{
	display: none;	
	}
	
	#container_1, .home #container_1 
	{	
	/*background:transparent url('images/tiling_bg_2_internal.jpg') left top repeat-x;*/
	}
	
	#content_container_2 /* to place a padding on left and right of containers when on mobile (single column) */
	{	
	/*padding-left: 20px;
	padding-right: 20px;*/
	}

	.home #content_container
	{
	/*margin-top: 110px;*/
	}
	
	/*** 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;
	text-align: center;
	}
	
	.responsive_promo_box .content h2
	{
	font-size: 32px;
	line-height: 40px;
	}
	/****************************/

	
	.main_content_padding
	{
	/*padding-left: 20px;*/
	/*padding-top: 28px;*/
	/*padding-right: 20px;*/
	/*padding-bottom: 30px;*/
	padding-left: 5vw;	
	padding-right: 5vw;	
	}					

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

	}	

	#content_container_2
	{	
	/*max-width: 650px;	
	/*padding-left: 20px;
	padding-right: 20px;*/
	}	
	
	.default-theme.wp-posts-carousel .wp-posts-carousel-details
	{	
	padding: 110px 80px 80px 80px !important;		
	}

	.board_train_packages .columns .content
	{
	text-align: center;
	}
	
	#footer
	{
	/*display: none;*/
	}
	
	#footer_logo
	{
	position: relative;	
	right: 0px;
	top: 0px;	
	margin: 0 auto;
	margin-bottom: 10px;
	}

	#social_buttons_2
	{	
	position: relative;
	top: 0px;			
	right: 0px;	
	border: 0px solid black;	
	margin-top: 15px;			
	}	
	
	
	.videos.container .column, .videos.container .columns
	{
	padding-left: 0px !important;
	padding-right: 0px !important;	
	}

	.double_note_left, .single_note_right_2
	{
	display: none;
	}
					
}


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

/* START STATIC BANNER */

.banner_content_wrapper .banner_content
		{		
		padding: 20px 30px 20px 30px;			
		}
		

.banner_content .title
{
font-size: 30px;
line-height: 42px;
}

.banner_content .details ul
{
display: none;
}	
/* END STATIC BANNER */	

/* ANYTHING SLIDER CONTENT */

#anything-slider .banner_text
{
padding: 10px 20px 10px 20px;		
margin: 10px 10px 0px 10px;	
/*max-width: none;
width: 100% !important;*/	
top: auto;
bottom: 20px;
}

	#anything-slider .banner_text .banner_text_title
	{
	font-size: 30px;
	line-height: 42px;
	
	}
	
	#anything-slider .banner_text .banner_text_details
	{
	display: none;
	}	
	
	#anything-slider .banner_text .banner_text_details ul
	{
	display: none;
	}	
	
	#anything-slider .banner_text .call_to_action
	{
	display: none;
	}

/* END ANYTHING SLIDER CONTENT */


#header_1 /* make header smaller as logo is also getting smaller */
{		
/*height: 61px;*/
}

.selection_boxes img
{	
padding: 20px 10px 20px 10px; /* padding can only be applied to the image as the absolute positioned image below will not honour it on the div */	
}

.responsive_promo_box .content
{	
padding-left: 20px;
padding-right: 20px;
}	

.main_content_padding
{
/*padding-left: 20px;	
padding-right: 20px;	*/
}	

.default-theme.wp-posts-carousel .wp-posts-carousel-details
{	
padding: 100px 30px 80px 30px !important;		
}	

	.wp-posts-carousel .wp-posts-carousel-desc, 
	.wp-posts-carousel .wp-posts-carousel-desc p
	{	
	font-size: 22px !important;
	line-height: 30px !important;	
	}

#home_page_content_2
{
display: none;	
}

#home_page_content h2
{									
font-size: 22px;
line-height: 40px;
margin-bottom: 0px;
}

#footer_logo
{
right: 2px;
/*display: none;*/
}

.double_note_left, .single_note_right_2
{
display: none;
}					


}

@media only screen and (max-width: 320px) {
	
#google_translate_element
{
display: none;
}

#logo
{
position: relative;	
margin: 0 auto;
}

#anything-slider .banner_text
{
display: none !important;	
}
	
}