/**
 * 
 *  File: responsive.css
 *
 *  SM Visual Studio web development responsive size style definitions
 *  Responsive 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
 * 
 */

/**
 *  Responsive wide (default) media elements
 */

.container {
	width:100%;
	overflow:hidden;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	clear:both;
}

.container-client {
	/* width:1260px; */
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	margin:0px auto;
	clear:both;
}

.container-inner {
	width:1110px;
	overflow-x:hidden;
	overflow-y:auto;
	margin:0px auto;
	clear:both;
}

.container-banner {
	width:100%;
	height:400px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	overflow:hidden;
	clear:both;
}

.container-pad {
	padding:12px 12px 12px 12px;
}

.container-pad-x {
	padding-left:12px;
	padding-right:12px;
}

.container-pad-y {
	padding-top:12px;
	padding-bottom:12px;
}

.container-center {
	text-align:center;
}

.container-left {
	text-align:left;
}

.container-right {
	text-align:right;
}

.container-left-center {
	text-align:left;
}

.container-right-center {
	text-align:right;
}

.container-100 {
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	float:none;
	display:block;
	clear:both;
}

.container-90 {
	width:90%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-80 {
	width:80%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-75 {
	width:75%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-70 {
	width:70%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-66 {
	width:66%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-60 {
	width:60%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-50 {
	width:50%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-40 {
	width:40%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-33 {
	width:33%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-30 {
	width:30%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-25 {
	width:25%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-20 {
	width:20%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-10 {
	width:10%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.container-5 {
	width:5%;
	overflow-x:hidden;
	overflow-y:auto;
	float:left;
	display:block;
}

.equal-height {

}

/**
 *  Responsive desktop media elements up to 1280 px width 
 */

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

	.container-client {
		/* width: 1080px; */
		width:100%;
		margin: 0px auto;
	}

	.container-inner {
		width: 990px;
		margin: 0px auto;
	}

	.container-banner {
		height: 400px;
	}

	.container-left-center {
		text-align:left;
	}

	.container-right-center {
		text-align:right;
	}

	.container-100 {
		width: 100%;
		float: none;
	}

	.container-90 {
		width: 90%;
		float: none;
	}

	.container-80 {
		width: 80%;
		float: none;
	}

	.container-75 {
		width: 75%;
		float: left;
	}

	.container-70 {
		width: 70%;
		float: left;
	}

	.container-66 {
		width: 66%;
		float: left;
	}

	.container-60 {
		width: 60%;
		float: left;
	}

	.container-50 {
		width: 50%;
		float: left;
	}

	.container-40 {
		width: 40%;
		float: left;
	}

	.container-33 {
		width: 33%;
		float: left;
	}

	.container-30 {
		width: 30%;
		float: left;
	}

	.container-25 {
		width: 25%;
		float: left;
	}

	.container-20 {
		width: 20%;
		float: left;
	}

	.container-10 {
		width: 10%;
		float: left;
	}

	.container-5 {
		width: 5%;
		float: left;
	}

}

/**
 *  Responsive laptop media elements up to 1024 px width
 */

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

	.container-client {
		/* width: 750px; */
		width:100%;
		margin: 0px auto;
	}

	.container-inner {
		width: 720px;
		margin: 0px auto;
	}

	.container-banner {
		height: 300px;
	}

	.container-left-center {
		text-align:left;
	}

	.container-right-center {
		text-align:right;
	}

	.container-100 {
		width: 100%;
		float: none;
	}

	.container-90 {
		width: 90%;
		float: none;
	}

	.container-80 {
		width: 80%;
		float: none;
	}

	.container-75 {
		width: 75%;
		float: left;
	}

	.container-70 {
		width: 70%;
		float: left;
	}

	.container-66 {
		width: 66%;
		float: left;
	}

	.container-60 {
		width: 60%;
		float: left;
	}

	.container-50 {
		width: 50%;
		float: left;
	}

	.container-40 {
		width: 40%;
		float: left;
	}

	.container-33 {
		width: 33%;
		float: left;
	}

	.container-30 {
		width: 30%;
		float: left;
	}

	.container-25 {
		width: 25%;
		float: left;
	}

	.container-20 {
		width: 20%;
		float: left;
	}

	.container-10 {
		width: 10%;
		float: left;
	}

	.container-5 {
		width: 5%;
		float: left;
	}

}

/**
 *  Responsive tablet media elements up to 768 px width
 */

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

	.container-client {
		width: 90%;
		margin: 0px 5%;
	}

	.container-inner {
		width: 92%;
		margin: 0px auto;
	}

	.container-banner {
		height: 280px;
	}

	.container-left-center {
		text-align:center;
	}

	.container-right-center {
		text-align:center;
	}

	.container-100 {
		width: 100%;
		float: none;
	}

	.container-90 {
		width: 100%;
		float: none;
	}

	.container-80 {
		width: 100%;
		float: none;
	}

	.container-75 {
		width: 100%;
		float: none;
	}

	.container-70 {
		width: 100%;
		float: none;
	}

	.container-66 {
		width: 100%;
		float: none;
	}

	.container-60 {
		width: 100%;
		float: none;
	}

	.container-50 {
		width: 100%;
		float: none;
	}

	.container-40 {
		width: 100%;
		float: none;
	}

	.container-33 {
		width: 100%;
		float: none;
	}

	.container-30 {
		width: 100%;
		float: none;
	}

	.container-25 {
		width: 100%;
		float: none;
	}

	.container-20 {
		width: 100%;
		float: none;
	}

	.container-10 {
		width: 100%;
		float: none;
	}

	.container-5 {
		width: 100%;
		float: none;
	}

}

/**
 *  Responsive phone media elements up to 480 px width
 */

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

	.container-client {
		width: 90%;
		margin: 0px 5%;
	}

	.container-inner {
		width: 92%;
		margin: 0px auto;
	}

	.container-banner {
		height: 180px;
	}

	.container-left-center {
		text-align:center;
	}

	.container-right-center {
		text-align:center;
	}

	.container-100 {
		width: 100%;
		float: none;
	}

	.container-90 {
		width: 100%;
		float: none;
	}

	.container-80 {
		width: 100%;
		float: none;
	}

	.container-75 {
		width: 100%;
		float: none;
	}

	.container-70 {
		width: 100%;
		float: none;
	}

	.container-66 {
		width: 100%;
		float: none;
	}

	.container-60 {
		width: 100%;
		float: none;
	}

	.container-50 {
		width: 100%;
		float: none;
	}

	.container-40 {
		width: 100%;
		float: none;
	}

	.container-33 {
		width: 100%;
		float: none;
	}

	.container-30 {
		width: 100%;
		float: none;
	}

	.container-25 {
		width: 100%;
		float: none;
	}

	.container-20 {
		width: 100%;
		float: none;
	}

	.container-10 {
		width: 100%;
		float: none;
	}

	.container-5 {
		width: 100%;
		float: none;
	}

}