/* Audience Fullscreen Landing Page Template 
    Document   : layout.css
    Created on : May, 2012
    Author     : Kobus Swartz
    Description: Stylesheet for index.html

All sections are marked to make it easier to navigate and change the css.
The first section of the css file contains the basic styles for the theme, followed by the user styles for the specific content.
At the bottom you will find the 'helper' section, which contains classes to hide and mark certain elements across the Audience Theme
*/

/* Basic HTML Elements for Sticky Fudge  */

body {
	background: url("../img/bgpattern.png") repeat;
	color: #252222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

* {
	margin: 0:;
}

a. img {
	border-bottom: none;
}

p {

}

 @font-face {
 	font-family: 'Lobster 1.4';
 	src: url('Lobster 1.4.otf');
 	font-style: normal;
 }

/* ==== Text Link Styles ==== */

/* Light Text Links */

a {
	color: #fff;
	text-decoration: none;
}

a:active {
	color: #fff;
}


a:hover {
	color: #999;
}


a:visited {
	color: #fff;
}

a.light {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

a.light:active {
	color: #fff;
}


a.light:hover {
	color: #999;
}


a.light:visited {
	color: #fff;
}


/* Dark Text Links */

a.dark {
	color: #000;
	text-decoration: none;
}

a.dark:active {
	color: #000;
}


a.dark:hover {
	color: #000;
}


a.dark:visited {
	color: #000;
}

/* Basic Heading Styles */

h1, h2 {
	font-family: 'Lobster 1.4';
	color: #252222;
	font-weight: normal;
}

h1, h2, h3 {
	margin: 0;
}

p {
	margin: 0;
}
.splitter {
	background: url("../img/splitter.png") repeat-x;
	height: 10px;
	margin-bottom: 10px;
	margin-top: 5px;
}

/* === Header Styling === */

#header {
	width: 1020px;
	margin: 20px 0 50px 0;
}

.logo {
	float: left;
	width: 195px;
}

.top-menu {
	float: right;
	width: 244px;
	background: black;
	background: rgba(0, 0, 0, .7);
}

.top-menu ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.top-menu ul li {
	float: left;
	padding: 5px 10px 5px 10px;
}

/* === Content === */

#content {
	position: relative;
	margin: 0 auto;
	width: 1020px;
}

#feature {
	width: 980px;
	padding: 20px;
	background: url("../img/white-bg.png") repeat;
	margin-bottom: 50px;
}

#feature .intro-text {
	float: left;
	width: 462px;
	margin-right: 110px;
}

#feature .intro-text h1 {
	padding: 0;
	margin: 0 0 10px 0;
	color: #252222;
	font-size: 72px;
	line-height: 60px;
}

#feature .intro-text h1 span {
	margin: 0;
	font-size: 48px;
	padding: 0;
}

#feature .intro-text h2 {
	font-size: 22px;
	margin-bottom: 10px;
}

#feature .featured-img {
	float: left;
	width: 462px
}

#feature p {
	margin: 0 0 15px 0;
}

#feature .intro-text p.btn-1, p.btn {
	display: inline;
}

#feature .intro-text p.btn-1 {
	margin-right: 20px;
}

#feature .intro-text img.android:hover, img.apple:hover {
	opacity: 0.8;
	cursor: pointer;
}

/* ==== Info styling ==== */

#info {
	position: relative;
	background: #fff;
	padding: 20px 20px 0px 20px;
	margin-bottom: 0px;
}

#info p {
	color: #5b5656;
}

/* ==== Previews Styling ==== */

#previews {
	margin-bottom: 50px;
}

#previews .videos {
	width: 460px;
	background: #fff;
	float: left;
	padding: 20px;
	margin-right: 20px;
}

#previews .images {
	width: 460px;
	background: #fff;
	float: left;
	padding: 20px;
}

#previews img:hover {
	opacity: 0.9;
}

#previews .images ul {
	list-style-type: none;
	padding-left: 0;
}

#previews .images ul li {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

#previews .images ul li.last {
	padding-right: 0;
}

#previews .images ul li.btm {
	padding-bottom: 0;
}

#info2 {
	background: #fff;
	margin-bottom: 0px;
	padding: 20px;
}

#info2 img{
	margin-top: 10px;
	margin-bottom: 5px;
}

#info2 h3 {
	margin-bottom: 5px;
}

#info2 img {
	opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
	
}
#info2 img:hover {
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	
}
#info2 img.notransp{
	opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#info2 h3 {
font-size: 20px;
margin-bottom: 10px;
}


#info2 p {
	text-align: left;
}

/* ==== Footer Styling ====*/

#footer {
	background: url("../img/white-bg.png") repeat;
	padding: 20px;
	margin-bottom: 50px;
	font-size: 12px;
}
#footer a{
	color:#000000
}

#footer .col1, #footer .col2, #footer .col3 {
float: left;
margin-right: 10px;
width: 320px;
overflow: hidden;

}

#footer .col1 p {
	color: #b54d4b;
	margin: 0;
	padding: 0;
}

#footer ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 50px;
	margin-top:0;
}

#footer ul li{
	float: left;
	padding-right: 15px;
}

#footer .col2 p {
	text-align: center;
	color: #999;
	padding-top: 10px;
}

#footer .col3 img {
	float: right;
}

#footer .last {
	margin-right: 0;
}


/* ==== Slide-Out Panels ==== */

/* Right slide out contact form */

.panel3 {
background-image:url("../img/heart.png");
background-position:top left;
background-repeat:no-repeat;
color:#fff;
height:310px;
padding:4px 8px;
position:fixed;
top: 197px;
width:200px;
z-index:99;
box-shadow:-2px 2px 5px #000;
opacity: 0.8;
}

#contact .panel3 strong {
	color: #fff;
 	font-family: 'Lobster 1.4';
 	font-weight: normal;
 	font-size: 20px;
}

form {
	margin-top: 10px;
}

.panel3 input {
	background: #fff;
	border: none;
	border: 1px solid #999;
	height: 20px;
	width: 185px;
	margin-bottom: 7px;
	padding-left: 5px;
	color: #666;
}
.footercont input {
	background: #fff;
	border: none;
	border: 1px solid #999;
	height: 20px;
	width: 100%;
	margin-bottom: 7px;
	padding-left: 5px;
	color: #666;
}

.panel3 textarea {
	background: #fff;
	border: none;
	border: 1px solid #999;
	height: 100px;
	width: 185px;

	padding-left: 5px;
	color: #666;
}
.footercont textarea {
	background: #fff;
	border: none;
	border: 1px solid #999;
	height: 100px;
	width: 100%;

	padding-left: 5px;
	color: #666;
}

.panel3, .footercont input.btn {
	width: 80px;
	height: 18px;
	background: #c91087;
	border: 1px solid #641264;
	color: #fff;
	border-radius: 3px;
	padding: 5px 0 18px 0;
}

.panel3, .footercont input.btn:hover {
	width: 80px;
	height: 18px;
	background: #641264;
	border: 1px solid #c91087;
	color: #fff;
	border-radius: 3px;
	padding: 5px 0 18px 0;
}

.panel3 {
	
}

.right3 {
right:-220px;
padding-left: 50px;
transition:right .2s ease-out;
-moz-transition:right .2s ease-out;
-webkit-transition:right .2s ease-out;
-o-transition:right .2s ease-out;
}

.right3:hover {
cursor:pointer;
right:0;
transition:right .4s ease-out;
-moz-transition:right .4s ease-out;
-webkit-transition:right .4s ease-out;
-o-transition:right .4s ease-out;
}

.contact-slide {
background-color: #000;
opacity: 0.9;
}

.contact-slide:hover {
border-color: red;
}

/* Right slide out Social slide */

.panel1 {
	color: #fff;
 	font-family: 'Lobster 1.4';
 	font-weight: normal;
 	font-size: 16px;
	height:auto;
	padding:4px 8px;
	position:fixed;
	text-align:right;
	top: 197px;
	width:170px;
	z-index:99;
	box-shadow:2px 2px 5px #000;
}

.left1 {
	left:-132px;
	transition:left .2s ease-out;
	-moz-transition:left .2s ease-out;
	-webkit-transition:left .2s ease-out;
	-o-transition:left .2s ease-out;
}

.left1:hover {
	cursor:pointer;
	left:0;transition:left .4s ease-out;
	-moz-transition:left .4s ease-out;
	-webkit-transition:left .4s ease-out;
	-o-transition:left .4s ease-out;
}

.social {
	background-color:#000;
	opacity: 0.9;
}

#social b {
padding-left: 10px;	
}

/* ===== Helpers ===== */

/* .todo is used to apply a red border around sections you are working on and would like to return to at a later stage. */ 

.todo {
	border: 1px dashed #f00;
}

/* .hide is used to hide certain elements in the theme which you dont want to display, for example the resume section, search bars or any other class or id. */

.hide {
	display: none;
}


ul.list {
	list-style-type: none;
    margin: 0px;
}
ul.list li{
	height:20px;
	background-repeat: no-repeat;
    background-position: 0px 0px 0px 0px;
    padding-left: 14px; 
	list-style-image: url('../img/heart-single.png');}