/* Main font */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/* 
	Main stylesheet

	1. Basics
	2. Spacings
	3. Header
	4. Logo
	5. Social icons top
	6. Teaser
	7. Tagline
	8. Boxes with icons
	9. Blockquote
	10. Video block
	11. Pricing tables block
	12. Social share block
	13. Large footer area
	14. Footer
	
*/

/* 1. Basics */

body {
	font: 13px/1.5 'Droid Sans', Arial, 'Liberation Sans', FreeSans, sans-serif;
	background-image:url(../images/background.png);
	background-repeat:repeat-all;
	background-position:0 0;
	padding-top:35px;
	color:#202020
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 23px;
}

h3 {
  font-size: 21px;
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 15px;
}

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

input, textarea { 
	padding: 8px 4px 8px 8px;
	border: 0;
	outline: 0;
	width: 240px;
	background: #343434;
	margin-bottom:18px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color:#777
}

textarea { 
	width: 240px;
	max-width: 240px;
	height: auto;
	line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus { 
	background: #3b3b3b; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px
}

form label { 
	color: #999999;
	display:block;
	width:100px;
	cursor:pointer
}

/* 2. Spacings */

li {
  margin-left: 30px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 20px;
}

.spacer {
	display:block;
	float:left;
	clear:both;
	width:100%;
	height:2px;
	background-image:url(../images/spacer.png);
	background-repeat:repeat-x;
	background-position:0 0;
	margin:50px 0
}

.spacer-small {
	display:block;
	float:left;
	clear:both;
	width:100%;
	height:25px
}

ul.checked-list {
	list-style:none;
	margin:0 0 10px 0;
	padding:0
}

ul.checked-list li {
	background-image: url(../images/check.png);
	background-repeat: no-repeat;
	background-position: 0 7px;
	line-height: 30px;
	padding-left: 20px;
	font-size: 13px;
	color: #878787;
	margin: 0
}

/* 2.1 Main container */

#main-container {
	background:#f1f1f1;
	box-shadow:1px 1px 6px #333;
	-moz-box-shadow:1px 1px 6px #333;
	-webkit-box-shadow:1px 1px 6px #333;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

/* 3. Header */

#body-glow {
	position:absolute;
	background-image:url(../images/body-glow.png);
	background-repeat:no-repeat;
	background-position:top center;
	width:100%;
	height:100%;
	top:0
}

header {
	width:100%;
	min-height:583px;
	background-image:url(../images/rays.png);
	background-repeat:no-repeat;
	background-position:top center;
	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius: 8px 8px 0 0
}

/* 4. Logo */

#logotype img {
	padding-top: 25px;
	margin-left: 25px
}

/* 5. Social icons top */

ul#social-icons-top {
	margin: 25px 0 0 0;
	padding: 10px 5px 10px 15px;
	list-style: none;
	float: right;
	background: rgb(0, 0, 0); /* The Fallback */
	background: rgba(0, 0, 0, 0.15);
	border:1px solid rgba(0, 0, 0, 0.15);
	border-bottom:1px solid rgba(255, 255, 255, 0.25);
	border-right:1px solid rgba(255, 255, 255, 0.25);
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius: 8px
}

ul#social-icons-top li {
	float:left;
	margin:0;
	padding:0;
	margin-right:10px
}

ul#social-icons-top li a {
	/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 5-7 */
  filter: alpha(opacity=50);
  /* Netscape */
  -moz-opacity: 0.5;
  /* Safari 1.x */
  -khtml-opacity: 0.5;
  /* Good browsers */
  opacity: 0.5;
}

ul#social-icons-top li a:hover {
	/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1
}

/* 6. Teaser */

/* 7. Tagline */

#tagline {
	float:left;
	display:block;
	width:100%;
	height:75px;
	margin-top:50px;
	background:url(../images/tagline-background.jpg) repeat;
	z-index:5;
	position:relative;
	text-align:center
}

#tagline h2 {
	display: inline;
	line-height: 75px;
	width: 100%;
	font-size: 21px;
	color: white;
	text-shadow: 1px 1px 3px #222;
	margin-right: 15px;
	font-weight: normal;
	letter-spacing: -1px
}

#tagline .btn {
	display:inline;
}

.btn {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #ffffff;
	background: #589e20;
	background: -moz-linear-gradient(
		top,
		#67b924 0%,
		#589e20);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#67b924),
		to(#589e20));
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border: 1px solid rgba(0, 0, 0, .25);
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 1px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 1px 1px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 1px 1px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
	text-decoration:none;
	font-weight:bold;
	letter-spacing:-1px;
	text-transform:capitalize
}

.btn:hover {
	background: #60ab22;
	background: -moz-linear-gradient(
		top,
		#74d127 0%,
		#60ab22);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#74d127),
		to(#60ab22))
}

.btn-large {
	padding: 10px 25px;
	font-size: 18px
}

.btn-medium {
	padding: 7px 18px;
	font-size: 15px
}

.btn-small {
	padding: 5px 15px;
	font-size: 13px
}

#left-ear, #right-ear {
	position:absolute;
	top:0;
	width:20px;
	height:87px
}

#left-ear {
	left:-20px;
	background-image:url(../images/left-ear.png);
	background-repeat:no-repeat;
	background-position:top center
}

#right-ear {
	right:-20px;
	background-image:url(../images/right-ear.png);
	background-repeat:no-repeat;
	background-position:top center
}

/* 8. Boxes with icons */

#content {
	margin-top:50px
}

.content-box h3 {
	font-size: 21px;
	font-weight: bold;
	text-transform: capitalize;
	margin: 5px 0 4px 0;
	text-shadow: 1px 1px 1px white;
	letter-spacing: -1px
}

.content-box p {
	font-size:14px;
	color:#888888;
	padding:0 10px;
	margin-bottom:0
}

.content-box {
	text-align:center
}

/* 9. Blockquote */

blockquote {
	margin: 50px 0;
	padding: 18px 20px 7px 19px;
	clear: both;
	text-align: center;
	font-family: "Georgia",Arial,serif;
	font-size: 24px;
	letter-spacing: 0px;
	line-height: 26px;
	background: #EDEDED;
	box-shadow: 0 0 1px #777;
	border-top: 1px solid #F9F9F9;
	border-bottom: 1px solid #F9F9F9;
	width: 98%;
	margin-left: -10px
}

blockquote p {
	margin-bottom:8px
}

blockquote, q {
	quotes: none
}

blockquote cite {
	display: block;
	font-size: 12px;
	color: #555
}

blockquote cite::before {
	content: "—  ";
}
/* 10. Video block */

.block .content-box {
	text-align:left;
	padding-left: 10px
}

.video-box-title {
	margin-top:70px!important
}

.video-box {
	margin:0
}

.video-box iframe {
	margin:0 10px 0 0;
	float:right;
	texta-align:right;
	box-shadow:0 0 12px #333;
	-moz-box-shadow:0 0 12px #333;
	-webkit-box-shadow:0 0 12px #333
}

.block h3 {
	font-size: 27px;
	font-weight: bold;
	text-transform: none;
	line-height: 30px;
	margin-top: 0
}

.block .subtitle {
	font-size:12px;
	font-weight:normal;
	text-transform:uppercase;
	line-height:16px;
	letter-spacing:3px;
	padding:0;
	margin:12px 0;
	color:#888
}

.block p {
	font-size:13px;
	line-height:20px;
	padding:0;
	margin-bottom:25px
}

/* 11. Pricing tables block */

.pricing-block {
	margin-top: 14px;
	display: block;
	float: left
}

.pricing-boxes-title {
	margin-top:70px!important
}

.pricing-box {
	float:right;
	margin:0
}

.price-box {
	width:200px;
	height:auto;
	background:#fff;
	box-shadow:0 0 8px #888;
	-moz-box-shadow:0 0 8px #888;
	-webkit-box-shadow:0 0 8px #888;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	text-align:left;
	float:left
}

.featured-box {
	position:relative;
	z-index:5;
	margin:-14px -8px 0 -8px;
	width:220px;
	box-shadow:0 0 12px #777;
	-moz-box-shadow:0 0 12px #777;
	-webkit-box-shadow:0 0 12px #777;
}

.featured-box .price-box-header  {
	padding:15px 10px 15px 20px;
}

.price-box-header {
	background:#f2f2f2;
	padding:5px 10px 5px 20px;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
	border-bottom:1px solid #dfdfdf
}

.price-box-header h4 {
	font-size:24px;
	font-weight:bold;
	margin-bottom:-10px;
	text-shadow: 1px 1px 1px white;
	letter-spacing:-1px
}

.featured-box .price-box-header h4  {
	font-size:28px;
}

.price-box-description {
	font-size:11px!important;
	color:#878787;
	margin-bottom:0!important;
}

.price-box-body {
	padding:5px 10px 5px 20px;
	margin-top:12px
}

.price-box-body p {
	font-size:14px;
	color:#878787
}

.price-box-price {
	background: #2b2b2b;
	min-height:30px;
	padding:5px 20px 5px 60px
}

.price-box-price p {
	font-size: 25px;
	line-height: 50px;
	color:#ffffff;
	margin-bottom:0
}

.price-box-footer {
	padding:15px 10px;
	text-align:center
}

.featured-box .price-box-footer  {
	padding:15px 10px 15px 20px;
}

/* 12. Social share block */

footer {
	margin-top:14px
}

#social-share {
	text-align:center;
	height:66px;
	background:#ededed;
	box-shadow:0 0 1px #777;
	border-top:1px solid #f9f9f9;
	float:left;
	clear:both;
	display:block;
	padding: 13px 0;
	width:100%
}

#social-share p {
	font-size: 31px;
	float: left;
	margin: 8px 14px 0 180px;
	position: relative;
	font-weight: bold;
	color: #777;
	text-shadow: 1px 1px 1px white;
	letter-spacing: -2px
}

#social-share {
	margin:35px 0 0 0;
}

#shareme {
		display:inline-block
}

#social-share .button {
	float:left;
	margin-right: 12px
}

#social-share .buttons {
	float:left;
	width:420px;
	display:block
}

.pinterest {
	margin-top: 4px
}

/* 13. Large footer area */

#large-footer {
	height:auto;
	background:#2b2b2b;
	border-top:4px solid #176362;
	float:left;
	clear:both;
	display:block;
	padding: 15px 0 25px 0;
	width:100%;
	color:#898a8a;
	font-size:11px
}

#large-footer h5 {
	font-size: 24px;
	margin-top: 17px
}

#large-footer h6 {
	font-size:13px;
	line-height:18px;
	color:#898a8a
}

.footer-box-inner {
	padding: 0 10px
}

#contact_form {
	width:100%;
	height:auto;
	display:block
}

/* 14. Footer */

#footer {
	height:50px;
	margin-bottom:20px;
	background:#252525 url(../images/footer-background.png) repeat-x;
	border-top:1px solid #1e1e1e;
	-moz-border-radius:0 0 8px 8px;
	-webkit-border-radius:0 0 8px 8px;
	border-radius: 0 0 8px 8px
}

img#footer-logo {
	margin:12px 0 0 20px;
	float:left;
}

#copyright {
	float: left;
	margin: 18px 0 0 4px;
	color: #4C4C4C;
	letter-spacing: -1px
}


/* Demo stuff */

#demo-container {
	text-align:center
}

#demo-container h1 {
	margin-bottom: 75px;
	margin-top: 100px;
	color: white;
	position: relative;
	z-index: 9;
	text-shadow: 1px 1px 1px #555;
	text-transform: uppercase;
	font-size: 17px
}

.thumbnail-list {
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
	position:relative;
	z-index:9
}

.thumbnail-list li {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	margin:0 35px 35px 0
}

.thumbnail-list li a {
	display:block;
	box-shadow:0 0 1px #000;
	-moz-box-shadow:0 0 1px #000;
	-webkit-box-shadow:0 0 1px #000;
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	/* IE 5-7 */
	filter: alpha(opacity=80);
	/* Netscape */
	-moz-opacity: 0.8;
	/* Safari 1.x */
	-khtml-opacity: 0.8;
	/* Good browsers */
	opacity: 0.8
}

.thumbnail-list li a:hover {
	display:block;
	box-shadow:0 0 3px #000;
	-moz-box-shadow:0 0 3px #000;
	-webkit-box-shadow:0 0 3px #000;
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	/* IE 5-7 */
	filter: alpha(opacity=100);
	/* Netscape */
	-moz-opacity: 1;
	/* Safari 1.x */
	-khtml-opacity: 1;
	/* Good browsers */
	opacity: 1
}

#demo-logo {
	margin-top: 2px;
	margin-bottom: -95px
}

/* Mobile styles */

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
.hidden-phone {display:none!important}

	body {
		padding:0;
		margin:0
	}
	
	.container_12 {
		margin-left: 0;
		margin-right: 0;
		width: 480px;
		border-radius:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
	}
	
	header,#footer {
		border-radius:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		margin:0
	}
	
	header {
		text-align: center;
	}
	
	header {
		min-height: 350px
	}
	
	#logotype {
		width: 100%
	}
	
	#logotype img {
		padding-top: 25px;
		margin-left: -6px
	}
	
	#social-share {
		padding: 14px 0 14px 100px;
	}
	
	#social-top {
		width: 100%;
		margin-left: -145px
	}
	
	.da-slider {
		min-height: 130px!important;
		margin:18px auto -20px auto
	}
	
	.da-dots {
		display:none
	}
	
	#tagline .btn {
		display: inline;
		margin-top: 10px;
		float: left;
		margin-left: 154px
	}
	
	.content-box {
		text-align: center;
		width: 460px!important;
		margin-bottom: 32px
	}
	
	blockquote {
		margin: 15px 0 -25px -28px;
		width: 480px
	}
	
	.block .content-box {
		text-align: center;
		padding-left: 0px
	}
	
	.video-box iframe {
		margin: 0 0 0 10px;
		float: left;
		width: 460px
	}
	
	#contact_form {
		margin-bottom: 25px
	}
	
	img#footer-logo {
		margin: 12px 0 0 182px
	}
	
	.block p {
		margin-bottom: -12px
	}
	
	.pricing-boxes-title {
		margin-top: -28px!important
	}
	
	.price-box {
		width: 460px;
		margin-left: 10px;
		clear: both;
		margin-bottom: 25px
	}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

	.hidden-phone {display:none!important}

	body {
		padding:0;
		margin:0
	}
	
	.container_12 {
		margin-left: 0;
		margin-right: 0;
		width: 320px;
		border-radius:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
	}
	
	header,#footer {
		border-radius:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		margin:0
	}
	
	header {
		text-align: center;
	}
	
	header {
		min-height: 480px
	}
	
	#logotype {
		width: 100%
	}
	
	#logotype img {
		padding-top: 25px;
		margin-left: -6px
	}
	
	#social-share {
		padding: 14px 0 14px 42px;
	}
	
	#social-top {
		width: 100%;
		margin-left: -63px
	}
	
	.da-slider {
		min-height: 214px!important
	}
	
	#tagline .btn {
		display: inline;
		margin-top: 10px;
		float: left;
		margin-left: 76px
	}
	
	.content-box {
		text-align: center;
		width: 300px!important;
		margin-bottom: 32px
	}
	
	blockquote {
		margin: 15px 0 -25px -28px;
		width: 320px
	}
	
	.block .content-box {
		text-align: center;
		padding-left: 0px
	}
	
	.video-box iframe {
		margin: 0 0 0 10px;
		float: left;
		width: 300px
	}
	
	#contact_form {
		margin-bottom: 25px
	}
	
	img#footer-logo {
		margin: 12px 0 0 91px
	}
	
	.block p {
		margin-bottom: -12px
	}
	
	.pricing-boxes-title {
		margin-top: -28px!important
	}
	
	.price-box {
		width: 300px;
		margin-left: 10px;
		clear: both;
		margin-bottom: 25px
	}

}
