/* @override http://wp.dev/impacto/wp-content/themes/impacto2/layout.css
	http://machine/wordpress/wp-content/themes/impacto/layout.css?ver=5.0 */

/* This file controls the responsiveness of your
/* theme on mobile devices using media queries.
/* proceed with caution
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face

/* #Site Styles
================================================== */


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


	/* iPad Portrait/Browser */
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		/* clear desktop margins for columns white-space*/
		#sidebar .widget-container {margin-left: 0px;}
		/* prevent comments from overextending */
		#respond textarea {width:auto;}
		/* reduce menu item padding */
		#wrap #menu li a {font-size: .85em;padding-right:.5em;padding-left:1.25em;}

		/* legacy */
		#wrap #content ul.left,
		#wrap #content ul.right,
		#wrap #content ul.left li,
		#wrap #content ul.right li {width: 175px;}

		/* device-specific utility */
		.show-on.desktop {visibility: hidden !important;display: none !important;}
		.show-on.tablet,.show-on.tablet.desktop {visibility: visible !important;display: inherit !important;}
	}

	/* Mobile/Browser */
	@media only screen and (max-width: 767px) {
		/* clear desktop margins for columns white-space*/
		#wrap #sidebar .widget-container {margin-left: 0px !important;margin-right: 0px !important;}
		/* prevent comments from overextending */
		#respond textarea {max-width:300px;}
		/* sliders */
		li.slide .inner {padding: 10px !important;}
		/* breadcrumbs just don't look good */
		#breadcrumb {display: none;}
		/* prevent comments from overextending */

		/* device-specific utility */
		.show-on.desktop {visibility: hidden !important;display: none !important;}
		.show-on.mobile,.show-on.handheld {visibility: visible !important;display: inherit !important;}
		.show-on.mobile.desktop,.show-on.handheld.desktop {visibility: visible !important;display: inherit !important;}
		/* center logo and header extras */
		#wrap  #site-title {position: relative;}
		#wrap #header .header_extras {position: relative;width: 100%;top: 0px;}
		#wrap #menu {background-image: none;}
		#wrap #menu .container,#wrap #menu .row {display: block;}
		#wrap #menu .columns {margin-bottom: 10px;background-image: none;}
		/* responsive drop-downs */
		#wrap #menu li a {font-size: 1.15em;}
		#wrap #menu ul {
			display:inline;
			margin: 0;
			padding: 0;
		}
		#wrap #menu li {
			float: left;
			margin: 0;
			padding: 0px 0px 0px 10px;
		}
		#wrap #menu li a {
			display: block;
			min-width: 270px;
			text-align: left;
			background-image: none;
			background-color: transparent;
			margin: 0;
			padding: 0;
			text-shadow: inherit;
		}
		#wrap #menu li ul {
			background-color: transparent;
			margin-bottom: 20px;
		}
		#wrap #menu li ul li a {
			border: none;
			color: inherit;
		}
		#wrap #menu ul ul {
			visibility: hidden;
			position: relative;
			display: block;
			float: left;
			box-shadow:none;
		}
		#wrap #menu .columns {
			padding: 0;
		}
		/* legacy */
		#wrap #content ul.left,
		#wrap #content ul.right,
		#wrap #content ul.left li,
		#wrap #content ul.right li {float: left;width: 100%;}
		/* slider/showcase buttons */
		#showcase .button,
		#showcase .button.right,
		#showcase .button.left {
			margin: 0 auto !important;
			float: none !important;
			display: inline-block;
			width: 85%;
		}
		#showcase .button a.button {
			font-size: 1em;
			margin: 10px 0;
		}
		#content-wrapper.landing #content,
		#teaser {
			background: none;
			padding-top: 0;
			position: relative;
			top:0;
		}
		p.flex-caption {
			font-size: 11px;
		}
	}
	@media only screen and (max-width: 767px) {
		.hide-on.mobile {display: none;}
	}
	/* Mobile Landscape/Browser */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Anything smaller than standard 960 */
	@media only screen and (max-width: 959px) {}

	/* iPad Portrait Only */
	@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}

	/* Mobile Only */
	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {
		#respond textarea {width:300px;}
	}

	/* Mobile Landscape Only */
	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}

	/* @group Responsive Video Embeds */
	.video.true {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	.video.false {
		padding-bottom: 0;
		padding-top: 0;
		height: auto;
		overflow: visible;
	}
	.video.true iframe,
	.video.true object,
	.video.true embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.video.false iframe,
	.video.false object,
	.video.false embed {
		position: relative;
	}

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

		body.rspimg #content .wp-caption {
		   margin-bottom: 1em;
		   margin-left: 0;
		   max-width: 99% !important;
		   width: 99% !important;
		   text-align: center;
		}

		body.rspimg #content div.aligncenter,
		body.rspimg #content div.alignright,
		body.rspimg #content div.alignleft,
		body.rspimg #content .wp-caption img {
			float: none;
		   display: block;
		   margin: 0 auto;
		   max-width: 100% !important;
		   width: 100% !important;
		}

		body.rspimg #content img.scale-with-grid.wp-post-image {
		   display: block;
		   margin: 0 auto;
		   max-width: 95.5% !important;
		   width: 95.5% !important;
		}

	}

/* @end */

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('/wp-content/themes/fonts/FontName.eot');
	    src: url('/wp-content/themes/fonts/FontName.eot?iefix') format('eot'),
	         url('/wp-content/themes/fonts/FontName.woff') format('woff'),
	         url('/wp-content/themes/fonts/FontName.ttf') format('truetype'),
	         url('/wp-content/themes/fonts/FontName.svg') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/