/**
 * 
 *  File: visibility.css
 *
 *  SM Visual Studio web development responsive style visibility definitions
 *  Visibility styles. Default for wide normal media elements.
 *  Responsive size are: wide, desktop, laptop, tablet, phone
 *
 *  Version: 2.0.0
 *  Author: Stefano Mengarelli
 *  Copyright: (C) 2017 by Stefano Mengarelli
 * 
 *  January 2017
 * 
 */

/**
 *  Default visibility
 */

.hidden {
	display:none;
}

.visible {
	display:block;
}

.visible-wide {
	display:block;
}

.visible-desktop, .visible-laptop, .visible-tablet, .visible-phone {
	display:none;
}

.visible-from-wide, .visible-from-desktop, .visible-from-laptop, .visible-from-tablet, .visible-from-phone {
	display:block;
}

.visible-upto-wide {
	display:block;
}

.visible-upto-desktop, .visible-upto-laptop, .visible-upto-tablet, .visible-upto-phone {
	display:none;
}

/**
 *  Visibility for responsive desktop media elements up to 1280 px width 
 */

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

	.visible-desktop {
		display:block;
	}

	.visible-wide, .visible-laptop, .visible-tablet, .visible-phone {
		display:none;
	}


	.visible-from-desktop, .visible-from-laptop, .visible-from-tablet, .visible-from-phone {
		display:block;
	}

	.visible-from-wide {
		display:none;
	}

	.visible-upto-desktop, .visible-upto-wide {
		display:block;
	}

	.visible-upto-laptop, .visible-upto-tablet, .visible-upto-phone {
		display:none;
	}

}

/**
 *  Visibility for responsive laptop media elements up to 1024 px width
 */

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

	.visible-laptop {
		display:block;
	}

	.visible-wide, .visible-desktop, .visible-tablet, .visible-phone {
		display:none;
	}

	.visible-from-laptop, .visible-from-tablet, .visible-from-phone {
		display:block;
	}

	.visible-from-desktop, .visible-from-wide {
		display:none;
	}

	.visible-upto-laptop, .visible-upto-desktop, .visible-upto-wide {
		display:block;
	}

	.visible-upto-tablet, .visible-upto-phone {
		display:none;
	}

}

/**
 *  Visibility for responsive tablet media elements up to 768 px width
 */

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

	.visible-tablet {
		display:block;
	}

	.visible-wide, .visible-desktop, .visible-laptop, .visible-phone {
		display:none;
	}

	.visible-from-tablet, .visible-from-phone {
		display:block;
	}

	.visible-from-laptop, .visible-from-desktop, .visible-from-wide {
		display:none;
	}

	.visible-upto-tablet, .visible-upto-laptop, .visible-upto-desktop, .visible-upto-wide {
		display:block;
	}

	.visible-upto-phone {
		display:none;
	}

}

/**
 *  Visibility for responsive phone media elements up to 480 px width
 */

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

	.visible-phone {
		display:block;
	}

	.visible-wide, .visible-desktop, .visible-laptop, .visible-tablet {
		display:none;
	}

	.visible-from-phone {
		display:block;
	}

	.visible-from-tablet, .visible-from-laptop, .visible-from-desktop, .visible-from-wide {
		display:none;
	}

	.visible-upto-phone, .visible-upto-tablet, .visible-upto-laptop, .visible-upto-desktop, .visible-upto-wide {
		display:block;
	}

}