/*
Theme Name: Soshal
Theme URI: http://tanshcreative.com/soshal-st-preview/index.html
Description: Social Landing page is designed and developed by Tansh.
Author: Tansh
Version: 1.3
*/

/*
Searching for particular element?
Here is CSS structure...

1. TEMPLATE SETUP
	1.1 Reset 
	1.2 General styles
	1.3 Typography 
	1.4 Button styles
	
2. TEMPLATE STRUCTURE
	2.1 header
	2.2 slider
	2.3 content
			- common divs
			- about
			- features
			- screenshots
			- tesimonial
			- twitter
			- social
			- subscribe
			- tabs
	2.4 copyright

3. Media queries

4. Browser fixes

/*============================================================*/
/*---------- 1. TEMPLATE SETUP ----------*/
/*============================================================*/

/*----------------------------------------*/
/*----- 1.1 Reset -----*/
/*----------------------------------------*/
/* From - http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, nav, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*----------------------------------------*/
/*----- 1.2 General styles -----*/
/*----------------------------------------*/
/*choose pattern as per your liking*/
body {
	background: url(../images/patterns/pattern-6.jpg) repeat #eeeeee;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #3a3a3a;
	line-height: 1.5em;
}
img, embed, object, video {
	max-width: 100%;
	height: auto;
}
video {
	width: 100% !important;
	height: auto !important;
}
strong {
	font-weight: bold;
}
/*----------------------------------------*/
/*----- 1.3 Typography -----*/
/*----------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'Signika', sans-serif;
	color: #2f2f2f;
	text-shadow: 0px 1px 0px #ffffff;
	font-weight: 600;
	line-height: 1.2em;
	font-style: normal;
	word-spacing: 1px;
}
h1 {
	font-size: 45px;
	line-height: 1.1em;
	margin-bottom: 20px;
}
h2 {
	font-size: 32px;
	margin-bottom: 15px;
}
h3 {
	font-size: 22px;
	margin-bottom: 15px;
}
h4 {
	font-size: 18px;
	margin-bottom: 10px;
}
h5 {
	font-size: 16px;
	margin-bottom: 10px;
}
a {
	color: #e16528;
	text-decoration: none;
	cursor: pointer;
	font-style: normal;
	outline: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #2f2f2f;
}
p {
	padding-bottom: 10px;
}
.text-color {
	color: #e16528;
}
.text-light {
	color: #9e9e9e
}
.link-style1 {
	margin-left: 20px;
	font-size: 13px;
	border-bottom: 1px solid #ffffff;
}
/*----------------------------------------*/
/*----- 1.4 Button styles -----*/
/*----------------------------------------*/
.btn-big span {
	background: url(../images/cta-btn.png) no-repeat 0 0 transparent;
	padding: 14px 0 18px 20px; /*may need adjustment in case of font change*/
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-shadow: 0px -1px 0px #e16528;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	display: inline-block;
}
.btn-big {
	background: url(../images/cta-btn-span.png) no-repeat top right transparent;
	height: 56px;
	padding-right: 20px;
	margin-top: 10px;
	display: inline-block;
}
/*fixed width button (used in sequence slider)*/
.btn {
	background: url(../images/btn.png) no-repeat;
	width: 220px;
	height: 41px;
	padding-top: 15px;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-shadow: 0px -1px 0px #e16528 !important;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	display: inline-block;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTURE ----------*/
/*============================================================*/
#wrapper {
	width: 980px;
	margin: 40px auto;
	background: url(../images/wrapper-bg.jpg) repeat #fcfbf9;
	-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.2);
	box-shadow:0 0 2px rgba(0, 0, 0, 0.2);
}
/*----------------------------------------*/
/*----- 2.1 Header -----*/
/*----------------------------------------*/
#header {
	background: url(../images/header-top.jpg) no-repeat center top;
	padding: 20px 10px 10px 10px; /*tweak padding top/bottom as per your logo*/
}
.logo h1 {
	margin-bottom: 0px !important;
}
.logo h1 a {
	line-height: 1em;
	color: #e16528;
}
.call {
	font-family: 'Signika', sans-serif;
	padding-top: 12px;
	font-size: 18px;
	font-weight: 700;
	text-align: right;
}
.call p {
	padding-bottom: 0px;
}
/*----------------------------------------*/
/*----- 2.2 Slider -----*/
/*----------------------------------------*/
#slider, #slider-para {
	background: url(../images/white-overlay.png) no-repeat 50% center #55000c;
	width: 100%;
	padding: 30px 0px;
	font-size: 14px;
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
#slider a, #slider-para a {
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
#slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider-para h1, #slider-para h2, #slider-para h3, #slider-para h4, #slider-para h5 {
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
/*parallax slider*/
#slider-para {
	padding: 30px 0px 15px 0px; /*height of this slider is specified in 'cslider.css'*/
}
/*flexslider*/
.slider {
	min-height: 285px; /*Tweak this as per your content to avoid fluctuations*/
}
/*'#slider_replace' will be displayed in mobile, in place of parallax slider*/
#slider_replace {
	width: 94%;
	padding: 30px 3%;
	display: none;
	float: left;
	text-align: left;
}
#slider_replace h1 {
	font-size: 28px;
}
/*----------------------------------------*/
/*----- 2.3 Content -----*/
/*----------------------------------------*/
/*----- Common divs -----*/
.row {
	padding: 30px 10px;
}
.row-color {
	background: #f0f0f0;
	border: 1px solid #dcdcdc;
	border-width: 1px 0px 1px 0px;
	padding: 30px 10px;
}
.half-column {
	width: 48%;
	margin-right: 4%;
	float: left;
}
.half-column-last {
	width: 48%;
	float: left;
}
.left {
	float: left;
}
.right {
	float: right;
}
/*----- about -----*/
.circle {
	background: #e8e8e8; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e8e8e8'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e8e8e8)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #f4f4f4, #e8e8e8); /* for firefox 3.6+ */
	background:  -o-linear-gradient(top, #f4f4f4, #e8e8e8);
	width: 30px;
	height: 21px;
	padding-top: 9px;
	margin-right: 10px;
	text-align: center;
	font-size: 13px;
	line-height: 13px;
	border: 1px solid #c7c7c7;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	-webkit-box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	float: left;
}
.list_number li {
	margin-bottom: 20px;
	background: none;
	list-style-type: none;
	display: inline-block;
}
/*----- features -----*/
.features li {
	margin-bottom: 25px;
	background: none;
	list-style-type: none;
	display: block;
}
.features li img {
	margin-right: 20px;
	float: left;
}
/*----- screenshots -----*/
.screenshots li {
	width: 220px;
	margin: 0px 10px;
	font-size: 12px;
	background: none;
	list-style-type: none;
	float: left;
}
.screenshots li img {
	margin-bottom: 5px;
}
/*----- testimonial -----*/
.testimonial span {
	font-size: 11px;
	color: #9e9e9e;
	display: block;
}
/*----- twitter -----*/
.twitter li {
	margin-bottom: 20px;
	font-size: 12px;
	background: none;
	list-style-type: none;
	display: block;
}
.tweet_time {
	font-size: 11px;
	margin-bottom: 5px;
	display: block;
}
/*----- social -----*/
.social li {
	font-size: 11px;
	padding-bottom: 10px;
	background: none;
	list-style-type: none;
	display: block;
}
.social li a {
	font-size: 13px;
}
.social li img {
	margin-right: 10px;
	float: left;
}
/*----- subscribe -----*/
#subscribe-bg {
	background: url(../images/subscribe-bg.png) no-repeat left 50% #55000c;
	width: 100%;
}
#subscribe {
	padding: 30px 20px;
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
#subscribe h3 {
	margin-bottom: 0px;
	color: #ffffff;
	text-shadow: 0px 1px 0px #000000;
}
/* subscribe form */
form#subform {
	margin-top: 10px;
	position: relative;
}
form#subform fieldset {
	border: none;
	background: none;
}
form#subform fieldset p {
	background: none;
	padding: 0;
	margin: 0;
}
form#subform input {
	background: #e2e2e2; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e2e2e2'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #ffffff, #e2e2e2); /* for firefox 3.6+ */
	background:  -o-linear-gradient(top, #ffffff, #e2e2e2);
	width: 268px;
	height: 28px;
	padding: 5px 10px;
	margin-right: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	color: #9e9e9e;
	line-height: 1.9em;
	outline:none;
	float: left;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .8);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, .8);
	box-shadow:0 1px 1px rgba(0, 0, 0, .8);
	border: none;
}
form#subform input.sub_submit {
	background: #e16528; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b06a', endColorstr='#e16528'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#f6b06a), to(#e16528)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #f6b06a, #e16528); /* for firefox 3.6+ */
	background:  -o-linear-gradient(top, #f6b06a, #e16528);
	width: 120px;
	height: 39px;
	margin-right: 0px;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0px -1px 0px #e16528;
	cursor: pointer;
	border: none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .8);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, .8);
	box-shadow:0 1px 1px rgba(0, 0, 0, .8);
}
form#subform label.error {
	font-size: 10px;
	color: #f17171;
	position: absolute;
	top: 37px;
	left: 0;
}
form#subform #result_sub {
	width: 100%;
	line-height: 2em;
	text-align: left;
	position: absolute;
	top: 45px;
	left: 0;
}
/*----- tabs -----*/
/*While increasing / decreasing number of tabs you will need to adjust width of "ul.tabs"*/
.tabs-wrapper h2 {
	margin-bottom: 5px;
	text-align: center;
}
.tabs-wrapper h4 {
	margin-bottom: 0px;
	color: #e16528;
	text-align: center;
	font-weight: 400;
}
ul.tabs {
	background: #e8e8e8; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e8e8e8'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e8e8e8)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #f4f4f4, #e8e8e8); /* for firefox 3.6+ */
	background:  -o-linear-gradient(top, #f4f4f4, #e8e8e8);
	width: 710px; /*width of "ul.tabs" = 142 X no. of tabs (i.e. no. of ul.tabs li a)*/
	height: auto;
	padding: 0;
	margin: 30px auto 0px auto;
	border: 1px solid #c7c7c7;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	-webkit-box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	box-shadow: 0 1px 1px 0px rgba(255, 255, 255, 1) inset;
	left: -50%;
}
ul.tabs li {
	display: block;
	padding: 0;
	margin: 0;
	float: left;
}
ul.tabs li a {
	background: url(../images/tab-nav-divider.jpg) repeat-y right;
	width: 140px;
	padding: 15px 0px;
	font-family: 'Signika', sans-serif;
	font-size: 16px;
	color: #2f2f2f;
	line-height: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	display: block;
}
ul.tabs li a.last_tab {
	background: none;
}
ul.tabs li a.active {
	color: #9e9e9e;
}
ul.tabs-content {
	width: 820px;
	padding: 30px 0px;
	margin: 0 auto;
	display: block;
}
ul.tabs-content > li {
	display:none;
}
ul.tabs-content > li.active {
	display: block;
}
/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before, ul.tabs:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
ul.tabs:after {
	clear: both;
}
ul.tabs {
	zoom: 1;
}
/*----------------------------------------*/
/*----- 2.4 Copyright -----*/
/*----------------------------------------*/
#copyright {
	font-size: 10px;
	padding: 10px 0px;
}
#copyright a {
	color: #2f2f2f;
}
#copyright p {
	float: left;
	padding-bottom: 0px;
}
#copyright ul {
	float: right;
}
#copyright ul li {
	padding-left: 10px;
	background: none;
	list-style-type: none;
	float: left;
}
/*============================================================*/
/*---------- 3. Media queries ----------*/
/*============================================================*/

/*----------------------------------------*/
/*----- 3.1 Tablet (Portrait) / Design for a width of 768px -----*/
/*----------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
	
/*----- No need to change below unless heavy layout changes -----*/
h1 {
 font-size: 34px;
 line-height: 1em;
 margin-bottom: 20px;
}
#wrapper {
 width: 100%;
 margin: 20px auto;
}
.screenshots li {
width: 172px;
}
form#subform input {
 width: 195px;
}
ul.tabs-content {
 width: 748px;
}
}

/*----------------------------------------*/
/*----- 3.2 Mobile (Portrait) / Design for a width of 320px -----*/
/*----------------------------------------*/

@media only screen and (max-width: 767px) {
	
/*Change as per your content*/
.slider {
 min-height:  650px; /*Tweak this as per your content to avoid fluctuations*/
}

/*----- No need to change below unless heavy layout changes -----*/
.container .columns, .container .column {
 margin: 10px 0px 10px 0px !important;
}
#wrapper {
 width: 100%;
 margin: 20px auto;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
}
.row {
 padding: 30px 0px;
}
.row-color {
 padding: 30px 0px;
}
.half-column {
 width: 100%;
 margin-right: 0%;
 margin-bottom: 20px;
 float: left;
}
.half-column-last {
 width: 100%;
 float: left;
}
.logo {
text-align: center;
}
.call {
 padding-top: 0px;
 text-align: center;
}
/*slider*/
#slider, #slider-para {
 padding: 10px 0px 30px 0px;
}
#da-slider {
display: none !important;
}
#slider_replace {
display: block;
}
.screenshots li {
width: 100%;
display: block;
}
/*tabs*/
 ul.tabs {
background: none;
border: none;
 width: 300px; /*width of "ul.tabs" = 142 X no. of tabs (i.e. no. of ul.tabs li a)*/
}
 ul.tabs li a, ul.tabs li a.last_tab {
background: #e8e8e8; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e8e8e8'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e8e8e8)); /* for webkit browsers */
 background: -moz-linear-gradient(top, #f4f4f4, #e8e8e8); /* for firefox 3.6+ */
 background:  -o-linear-gradient(top, #f4f4f4, #e8e8e8);
border: 1px solid #c7c7c7;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
margin: 0 auto;
}
ul.tabs li {
 display: block;
 margin-bottom: 5px;
 float: none;
}
ul.tabs-content {
 width: 100%;
}
/*subscribe*/
form#subform {
 margin-top: 0px;
}
form#subform input {
margin-bottom: 10px;
float: none;
}
form#subform label.error {
 font-size: 10px;
 color: red;
 position: absolute;
 top: 85px;
 left: 0;
}
form#subform #result_sub {
 width: 100%;
 line-height: 2em;
 text-align: left;
 position: absolute;
 top: 95px;
 left: 0;
}
}

/*----------------------------------------*/
/*----- 3.3 Mobile (Landscape) / Design for a width of 480px -----*/
/*----------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
/*Change as per your content*/
.slider {
 min-height:  600px; /*Tweak this as per your content to avoid fluctuations*/
}
/* Other properties are as those specified for Mobile (Portrait)*/
}