@charset 'UTF-8';
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,700');
@import url('font-awesome.min.css');

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body 
{
	color: #526066;
}

h2, h3 
{
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}

p 
{
	line-height: 1.6em;
}

p.comments
{
	width: 90%;
	text-align: center;
	background-color:#dff4fe;
	/* #fdffdf; */
}

p.comments2
{
	width: 90%;
	text-align: justify;
	background-color:#dff4fe;
	/* #fdffdf; */
}

img.article-photo-right 
{
	/* border: 1px solid #333333 ; */
	padding: 0px 0px 7px 10px ;
}

/*
 * -- Layout Styles --
 */
.l-content 
{
	margin: 0 auto;
	background: transparent url('../../images/pgbg01.jpg') 0 0 no-repeat fixed;
	-webkit-background-size: 1280px 854px;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/pgbg01.jpg', sizingMethod='scale');
	
	/*
	background: transparent url('../../images/pgbg01.jpg') 0 0 no-repeat scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/pgbg01.jpg', sizingMethod='scale');
	height: 100%;
	width: 100%;
	display: table;
	*/
}

.l-box 
{
	padding: 0.5em 2em;
}

/*
 * -- MENU STYLES --
 * Make the menu have a very faint box-shadow.
 */
.pure-menu 
{
	box-shadow: 0 1px 1px rgba(0,0,0, 0.50);
}


/*
 * -- BANNER --
 * The top banner with the headings. By using a combination
 * of `display: table;` and `display: table-cell;`, we can
 * vertically center the text.
 */

.banner 
{
	background: transparent url('../../images/splash01.jpg') 0 0 no-repeat scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/splash01.jpg', sizingMethod='scale');
	height: 200px;
	width: 100%;
	margin-bottom: 3em;
	display: table;
}

.banner-head 
{
	display: table-cell;
	vertical-align: middle;
	margin-bottom: 0;
	font-size: 2em;
	color: white;
	font-weight: 500;
	text-shadow: 0 1px 1px black;
}

.red
{
	color:#ff0000;
}

.button-orange
{
	color:#FFF;
	background: rgb(255, 126, 15);
}

.button-green
{
	color:#FFF;
	background: rgb(28, 184, 65);
}

.button-blue
{
	color:#FFF;
	background: rgb(115, 211, 255);
}

.button-text-white
{
	color:#FFF;
}

/*
 * -- PRICING TABLE WRAPPER --
 * This element wraps up all the pricing table elements
 */
.pricing-tables,
.information 
{
	max-width: 980px;
	margin: 0 auto;
}
.pricing-tables 
{
	margin-bottom: 3.125em;
	text-align: center;
}

/*
 * -- PRICING TABLE  --
 * Every pricing table has the .pricing-table class
 */
.pricing-table 
{
	border: 1px solid #ddd;
	margin: 0 0.5em 2em;
	padding: 0 0 3em;
}

/*
 * -- PRICING TABLE HEADER COLORS --
 * Choose a different color based on the type of pricing table.
 */
.pricing-table-free .pricing-table-header 
{
	background: #519251;
}

.pricing-table-biz .pricing-table-header 
{
	background: #2c4985;
}

.pricing-table-free .pricing-table-free-green 
{	
	background: #519251;
	color: #fff;
	text-align: center;
}



/*
 * -- PRICING TABLE HEADER --
 * By default, a header is black/white, and has some styles for its <h2> name.
 */
.pricing-table-header 
{
	background: #111;
	color: #fff;
}
.pricing-table-header h2 
{
	margin: 0;
	padding-top: 2em;
	font-size: 1em;
	font-weight: normal;
}


/*
 * -- PRICING TABLE PRICE --
 * Styles for the price and the corresponding <span>per month</span>
 */
.pricing-table-price 
{
	font-size: 4em;
	margin: 0.2em 0 0;
	font-weight: 100;
}
.pricing-table-price span 
{
	display: block;
	text-transform: uppercase;
	font-size: 0.2em;
	padding-bottom: 2em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	*color: #fff;
}

.pricing-table-price2 span 
{
	display: block;
	text-transform: uppercase;
	font-size: 0.2em;
	padding-bottom: 2em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	*color: #fff;
}



/*
 * -- PRICING TABLE LIST --
 * Each pricing table has a <ul> which is denoted by the .pricing-table-list class
 */
.pricing-table-list 
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}


/*
 * -- PRICING TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each pricing table
 */
.pricing-table-list li 
{
	padding: 0.8em 0;
	background: #f7f7f7;
	border-bottom: 1px solid #e7e7e7;
}




/*
 * -- PRICING TABLE BUTTON --
 * Styles for the "Choose" button at the bottom of a pricing table.
 * This inherits from Pure Button.
 */
.button-choose 
{
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	border-radius: 2em;
	font-weight: bold;
	position: relative;
	bottom: -1.5em;
}

.information-head 
{
	color: black;
	font-weight: 500;
}

.footer 
{
	background: #111;
	color: #888;
	text-align: center;
}
.footer a 
{
	color: #ddd;
}



/*
 * -- TABLET MEDIA QUERIES --
 * On tablets, we want to slightly adjust the size of the banner
 * text and add some vertical space between the various pricing tables
 */
@media(min-width: 767px) 
{
	.banner-head 
	{
		font-size: 4em;
	}
	.pricing-table 
	{
		margin-bottom: 0;
	}
}

/*
 * -- PHONE MEDIA QUERIES --
 * On phones, we want to reduce the height and font-size of the banner further
 */
@media (min-width: 480px) 
{
	.banner 
	{
		height: 400px;
	}
	.banner-head 
	{
		font-size: 3em;
	}
}

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{ 
	/* STYLES GO HERE */
	.banner-head 
	{
		font-size: 4em;
	}
	.pricing-table 
	{
		margin-bottom: 0;
	}
}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{ 
	/* STYLES GO HERE */
	.banner-head 
	{
		font-size: 4em;
	}
	.pricing-table 
	{
		margin-bottom: 0;
	}
}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{ 
	/* STYLES GO HERE */
	.banner-head 
	{
		font-size: 4em;
	}
	.pricing-table 
	{
		margin-bottom: 0;
	}
}