/*Global Responsive CSS*/
img {
    height: auto;
/*    max-width: 100% !important; */
}
form{ margin:0px !important; }

#container_logo_menu_mobile .wrapper960{
	width: 100% !important; 

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"logo phone"
		"menu menu";
	gap: 0;
	justify-items: stretch;
	align-items: stretch;

	#logo_mobile { grid-area: logo; }
	#custom { 
		grid-area: phone; 
		padding: 0; 
		align-self: center; 
		a { color: blue; }
	}
	#responsive_menu { 
		grid-area: menu; 
		width: 100%; }


}


/* # - Desktop
================================================== */
@media only screen and (min-width: 1025px) and (max-width: 1400px) {

/* Default Settings */
.bottom-2 {width:50% !important;}

}


/* # - Medium Devices
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

.item-content ul {
	columns: 1; }

/* Default Settings */
.wrapper960 {width:95% !important;}
.col-3 {width:100% !important;}
.bottom-2 {width:50% !important;}
.topscroller{display: block !important;}
.spacer-mobile{display: block !important;}

/* Hide Containers/divs */
#container_header {display:none !important;}
#container_header-sticky-wrapper{display:none !important;}
#hornav{display:none !important;}
.spacer {display: none !important;}

/* disable css animations */
.animated {
	-webkit-animation-duration: 0;
	animation-duration: 0;
	-webkit-animation-delay: 0;
	animation-delay: 0;
}

/* Adjust divs*/
#slideshow.block_holder{padding-top: 0px !important;}

/* Arrow for scrolltos*/
.arrow {bottom: 40px;}

/* Hide sidebar*/
#site-wrapper{margin-left: 0px !important;}
#container_sidebar{display: none !important;}

/* Purchase button */
.purchase-btn, 
.purchase-btn:active,
.purchase-btn-more, 
.purchase-btn-more:active{
    display: block !important;
}


/*------ Mobile Containers Styling------ */

/* Mobile Menu */
#responsive_menu {margin-top: -80px; height: 80px;}
.slicknav_menu {display:block; clear: both;}
.slicknav_nav {margin-top: 80px !important;}


/* Show mobile logo and navigation */
#container_logo_menu_mobile { display: block; z-index: 5000; position: absolute; top: 0px; }
#logo_mobile { position: relative; }
#custom { 
	padding: 0; 
	h1 { font-size: 1.4rem; } }

}


/* # - Small Devices
================================================== */

/* Note: Design for a width of 480px */

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

#container_logo_menu_mobile .wrapper960{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"logo"
		"phone"
		"menu";
}

/* Default Settings */	
.wrapper960 {width:95% !important;}
.top-1, .top-2, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2, #sidecol_a, #sidecol_b {width:100% !important;}
#sidecol_a, #sidecol_b{width:100% !important;}
#content_remainder {width:100% !important;}
.spacer-mobile{display: block !important;}
h2, h2 a:link, h2 a:visited, .content_header, .articleHead {font-size: 35px !important; line-height: 38px;}


/* Hide divs */
#container_header {display:none !important;}
#container_header-sticky-wrapper{display:none !important;}
#hornav{display:none !important;}
#breadcrumb.block_holder {display: none;}
.spacer {display: none !important;}

/* disable css animations */
.animated {
	-webkit-animation-duration: 0;
	animation-duration: 0;
	-webkit-animation-delay: 0;
	animation-delay: 0;
}

/* Adjust divs*/
#container_main{padding-top:0px !important;}
#slideshow.block_holder{padding-top: 0px;}

/* remove block holder padding left and right */
.block_holder{padding-left: 0px !important; padding-right: 0px !important;}

/* Arrow for scrolltos*/
.arrow {bottom: 20px;}

/* Hide sidebar*/
#site-wrapper{margin-left: 0px !important;}
#container_sidebar{display: none !important;}

/* Purchase button */
.purchase-btn, 
.purchase-btn:active,
.purchase-btn-more, 
.purchase-btn-more:active{
    display: block !important;
}


/*------ Mobile Containers Styling------ */

/* Mobile Menu */
#responsive_menu {
	height: 80px;
	position: absolute; 
	right: 0;
	z-index: 1000; }
.slicknav_menu {display:block; clear: both;}
.slicknav_nav { position: relative; top: 5px; }


	/* Show mobile logo and navigation */
	#container_logo_menu_mobile {
		display: block; 
		border-top: 1px solid rgba(0, 0, 0, 0.5);
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
		background-color: rgba(227,255,214, 1 );
		z-index: 5000;
		padding-top: 0px; 
		position:  absolute; 
		top: 0px; 
		height: auto;

		.wrapper960 { background: none; }
	}

	#logo_mobile a img { 
		display: block; 
		max-width: 70%; 
		height: auto; }

	#logo_mobile { /* position: absolute; */ }
	#custom { 
		text-align: center; 
		padding: 0;
		h1 { font-size: 1.2rem; }
	}
}


/* ipad iphone specific */
/* # - iPad Landscape
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  { 

	/* Background scrolls - fixes image scaling problem*/
	html{background-attachment: scroll !important;}


	/* FIX Turn off opacity on some containers. Because background image is fixed it will not show properly behind content out of the viewport*/
	#container_main
    {
		background-color: rgba(255,255,255,1) !important;
	}

}

/* # - iPad Potrait
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {

	/* Default Settings */	
	.wrapper960 {width:95% !important;}
	.top-1, .top-2, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2, #sidecol_a, #sidecol_b {width:100% !important;}
	#content_remainder {width:100% !important;}
	img {float:none !important;}

	/* Background scrolls - fixes image scaling problem*/
	html{background-attachment: scroll !important;}


	/* FIX Turn off opacity on some containers. Because background image is fixed it will not show properly behind content out of the viewport*/
	#container_main
    {
		background-color: rgba(255,255,255,1) !important;
	}

}


/* # - iPhone 2G-4S in portrait & landscape
================================================== */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* Background scrolls - fixes image scaling problem*/
	html{background-attachment: scroll !important;}
}