/* Requires Bootstrap */

.full {
	width: 100%;
	height: 100%;
}

.text-bottom-gradient {
	position: absolute;
	width: 100%;
	height: 25px;
	bottom: 10px;
	right: 16px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

/* Default  */

div.article {
	width: 960px;  					/* 960 */
	height: 600px;

	overflow:hidden;
}

div.article > div.spacer {
	height: 50px; 					/* 50 */
	width: 100%;
}

div.article > div.closer {
	height: 20px;  					/* 20 */
	width: 100%
}

div.article > div.closer div.action {
	padding-right: 12px; 
}

div.article > div.info {
	height: 430px; 					/* 430 */
}

div.article > div.info .info-container {
	height: 100%;
	line-height: 20px;
	padding: 0 54px;
	overflow: hidden;
}

div.info-container h2 {
	font-family: 'Roboto' , sans-serif;
	font-size: 30px;
	line-height: 33px;
	height: 34px; 					/* 34 */
}

div.info-container p, div.info-container span, div.info-container input, div.info-container textarea, div.info-container button {
	font-family: 'Roboto' , sans-serif;
	font-size: 14px;
	line-height: 20px;
}

div.article div.info-container > .text {
	height: 350px; 					/* 350 */
	margin-top: 20px;
}

.contact-form-container {
	height: 380px; 
	width: 60%;
	padding-left: 0 !important;
}

.form-text {
	height: 35px;
	padding: 5px;
}

.form-textbox {
	height: 100px;
	padding: 10px 5px;
	margin-top: 10px;
}

.form-button {
	height: 35px;
	margin-top: 10px;
}

/* Common */

div.article > div.closer div.action span {
	font-family: 'Roboto' , sans-serif;
}

div.info-container p {
	font-family: 'Roboto' , sans-serif;
}

.no-lef-padding {
	padding-left: 0 !important;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */



@media (max-width: 767px) {
	div.article {
		width: 370px; 
		height: 340px;					/* 340 */

		overflow:hidden;
	}

	div.article h2 {
		height: 14px;
		line-height: 14px;
		font-size: 14px;
		margin: 5px 0;
	}

	div.article > div.spacer {
		height: 14px; 					/* 14 x 2 */
		width: 100%;
	}

	div.article > div.closer {
		height: 10px;  					/* 10 */
		width: 100%
	}

	div.article > div.closer div.action {
		padding-right: 5px; 
	}

	div.article > div.closer div.action span {
		font-size: 8px;
		line-height: 10px;
		vertical-align: middle;
	}

	div.article > div.info {
		height: 280px; 					/* 280 */
	}

	div.article > div.info .info-container {
		height: 100%;
		line-height: 10px;
		padding: 0 34px;
		overflow: hidden;
	}

	div.info-container h2 {
		font-family: 'Roboto' , sans-serif;
		font-size: 14px;
		line-height: 16px;
		height: 18px; 					/* - 18 */
	}

	div.info-container p, div.info-container span, div.info-container input, div.info-container textarea, div.info-container button {
		font-family: 'Roboto' , sans-serif;
		font-size: 8px;
		line-height: 10px;
	}

	div.article div.info-container > .text {
		height: 240px; 					/* - 240 */
		margin-top: 6px;
		font-size: 10px;
	}

	.contact-form-container {
		height: 240px; 
		width: 80%;
		padding-left: 0 !important;
	}

	.form-text {
		height: 20px;
		padding: 2px;
	}

	.form-textbox {
		height: 60px;
		padding: 2px 4px;
	}

	.form-button {
		height: 20px;
	}

}





/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {

	div.article {
		width: 620px;  					/* 620 */
		height: 360px;

		overflow:hidden;
	}

	div.article h2 {
		height: 18px;
		line-height: 18px;
		font-size: 16px;
		margin: 8px 0;
	}

	div.article > div.spacer {
		height: 30px; 					/* 30 x 2 */
		line-height: 30px;
		width: 100%;
	}

	div.article > div.closer {
		height: 12px;  					/* 12 */
		width: 100%
	}

	div.article > div.closer div.action {
		padding-right: 10px; 
	}

	div.article > div.closer div.action span {
		font-size: 12px;
		line-height: 11px;
		vertical-align: middle;
	}

	div.article > div.info {
		height: 330px; 					/* 330 */
	}

	div.article > div.info .info-container {
		height: 100%;
		line-height: 12px;
		padding: 0 34px;
		overflow: hidden;
	}

	div.info-container h2 {
		font-family: 'Roboto' , sans-serif;
		font-size: 22px;
		line-height: 24px;
		height: 24px; 					/* - 24 */
	}

	div.info-container p, div.info-container span, div.info-container input, div.info-container textarea, div.info-container button {
		font-family: 'Roboto' , sans-serif;
		font-size: 10px;
		line-height: 12px;
	}

	div.article div.info-container > .text {
		height: 300px; 					/* - 300 */
		margin-top: 10px;
	}

	.contact-form-container {
		height: 300px; 
		width: 70%;
		padding-left: 0 !important;
	}

	.form-text {
		height: 20px;
		padding: 2px 4px;
	}

	.form-textbox {
		height: 60px;
		padding: 6px 4px;
	}

	.form-button {
		height: 20px;
	}

}




/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {

	div.article {
		width: 960px;  					/* 960 */
		height: 600px;

		overflow:hidden;
	}

	div.article h2 {
		height: 20px;
		line-height: 20px;
		font-size: 20px;
		margin: 10px 0 5px 0;
	}

	div.article > div.spacer {
		height: 50px; 					/* 50 */
		width: 100%;
	}

	div.article > div.closer {
		height: 20px;  					/* 20 */
		width: 100%
	}

	div.article > div.closer div.action {
		padding-right: 12px; 
	}

	div.article > div.info {
		height: 430px; 					/* 430 */
	}

	div.article > div.info .info-container {
		height: 100%;
		line-height: 20px;
		padding: 0 54px;
		overflow: hidden;
	}

	div.info-container h2 {
		font-family: 'Roboto' , sans-serif;
		font-size: 30px;
		line-height: 33px;
		height: 34px; 					/* 34 */
	}

	div.info-container p, div.info-container span, div.info-container input, div.info-container textarea, div.info-container button {
		font-family: 'Roboto' , sans-serif;
		font-size: 14px;
		line-height: 20px;
	}

	div.article div.info-container > .text {
		height: 350px; 					/* 350 */
		margin-top: 20px;
	}

	.contact-form-container {
		height: 380px; 
		width: 60%;
		padding-left: 0 !important;
	}

	.form-text {
		height: 35px;
		padding: 5px;
	}

	.form-textbox {
		height: 100px;
		padding: 10px 5px;
	}

	.form-button {
		height: 35px;
	}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	div.article {
		width: 960px;  					/* 960 */
		height: 600px;

		overflow:hidden;
	}

	div.article h2 {
		height: 22px;
		line-height: 22px;
		font-size: 20px;
		margin: 14px 0 8px 0;
	}

	div.article > div.spacer {
		height: 50px; 					/* 50 */
		width: 100%;
	}

	div.article > div.closer {
		height: 20px;  					/* 20 */
		width: 100%
	}

	div.article > div.closer div.action {
		padding-right: 12px; 
	}

	div.article > div.info {
		height: 430px; 					/* 430 */
	}

	div.article > div.info .info-container {
		height: 100%;
		line-height: 20px;
		padding: 0 54px;
		overflow: hidden;
	}

	div.info-container h2 {
		font-family: 'Roboto' , sans-serif;
		font-size: 30px;
		line-height: 33px;
		height: 34px; 					/* 34 */
	}

	div.info-container p, div.info-container span, div.info-container input, div.info-container textarea, div.info-container button {
		font-family: 'Roboto' , sans-serif;
		font-size: 14px;
		line-height: 20px;
	}

	div.article div.info-container > .text {
		height: 350px; 					/* 350 */
		margin-top: 20px;
	}

	.contact-form-container {
		height: 380px; 
		width: 60%;
		padding-left: 0 !important;
	}

	.form-text {
		height: 35px;
		padding: 10px 5px;
	}

	.form-textbox {
		height: 100px;
		padding: 5px;
	}

	.form-button {
		height: 35px;
	}

}