﻿/*
Theme Name: Theflow
Theme URI: http://tanshcreative.com/theflow-st-preview/index.html
Description: Theflow software / app template is designed and developed by Tansh.
Author: Tansh
*/

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

1. TEMPLATE SETUP
	1.1 Reset 
	1.2 General styles
	1.3 Typography - Only headings and link
	1.4 Button styles
	1.5 Image styles
	1.6 List styles
	1.7 Divider
	
2. TEMPLATE STRUCTURE
	2.1 header
	2.2 features
	2.3 screenshots
	2.4 team
	2.5 download
	2.6 sub footer
	2.7 contact
	2.8 footer
	2.9 other pages (css properties for pages other than index.html)
	
3. Pricing page

4. Media queries

5. Some fixes for browsers

/*============================================================*/
/*---------- 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: 14px;
	/*font: inherit;*/
	vertical-align: baseline;
	line-height: 1.8;
	font-weight: 500;
}
/* 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 -----*/
/*----------------------------------------*/
body {
	background: url(../images/pattern1.jpg) repeat #fff;
	font-size: 14px;
	font-weight: 300;
	color: #717576;
	line-height: 1.5em;
	/*text-shadow: 0px 1px 1px #fff;*/
}
img, embed, object, video {
	max-width: 100%;
	height: auto;
}
video {
	width: 100% !important;
	height: auto !important;
}
strong {
	font-weight: bold;
}
/*----------------------------------------*/
/*----- 1.3 Typography -----*/
/*----------------------------------------*/
/*only font families are provided here, font sizes etc. are in respective section*/
body, h5, h6, .btn_yellow span, .btn_yellowsmall span, .btn_greysmall span, .btn, #nav ul li a, #slider_replace h2, input[type=text], textarea, .submit, .pricing_table td h6 {
	font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, .twitter p, .pricing_table thead th {
	font-family: 'Lato', sans-serif;
}
/*Others*/
h1, h2, h3, h4, h5, h6 {
	color: #4d546b;
	font-weight: 400;
	line-height: 1.3em;
	font-style: normal;
	word-spacing: 1px;
}
h1 {
	font-size: 30px;
	line-height: 1em;
	margin-bottom: 0;
}
h2 {
	font-size: 28px;
	margin-bottom: 15px;
}
h3 {
	font-size: 20px;
	margin-bottom: 15px;
}
h4 {
	font-size: 20px;
	margin-bottom: 10px;
}
h5 {
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	margin-bottom: 0;
}
h6 {
	font-size: 14px;
	margin-bottom: 0;
	float: left;
}
a {
	color: #717576;
	text-decoration: none;
	cursor: pointer;
	font-style: normal;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #4d656b;
}


#features h1 {
  font-weight: 600;
  line-height: 120%;
}

#features p {
  font-size: 16px;
  text-align:justify;
}

#features h3 {
  font-weight: 600;
}


#tutorials h5 a {
  font-size: 16px;
  font-weight: 600;
}


#tutorials h5 {
  font-weight: 600;
}


 



#screenshots h2, #team h2, #tutorials h2, #contact h2, #sub_footer h2, #page_subfooter h2 {
	background: url(../images/heading-text-divider-line.jpg) no-repeat right;
	padding-right: 10px;
	margin: 0 10px 15px 0;
	float: left;
}
#sub_header h2 {
	background: url(../images/heading-divider-darkline.png) no-repeat right;
	padding-right: 10px;
	margin: 0 10px 15px 0;
	float: left;
}
.coloredstrong {
	font-size: 14px;
	color: #dc8f89 !important;
	font-weight: bold;
}
.smallstrong {
	font-size: 14px;
	font-weight: 600;
}
.textstyle1 {
	text-align: center;
}
.textstyle2 {
	padding-top: 4px;
	margin-bottom: 25px;
	font-size: 18px;
}
.textstyle3 {
	font-size: 12px;
}
.textstyle4 {
	font-size: 14px;
}

/*----------------------------------------*/
/*----- 1.4 Button Styles -----*/
/*----------------------------------------*/


.bigBtn {
    background:#4F9617;
    color:#ffffff;
    font-size:18px;
    letter-spacing: 0.05em;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    padding:20px 60px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	display: inline-block;
	text-transform: uppercase;
	box-sizing: border-box;
	margin-top: 20px !important;


}
.bigBtn:hover {
	background:#67a905; 
	color: #fff;
    text-decoration:none;

}

.hvr-icon-down:before {top: 21px !important;}

/* Icon Down */
@-webkit-keyframes hvr-icon-down { 
  0%,50%,100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25%,75% {-webkit-transform: translateY(6px);transform: translateY(6px);}
}
@keyframes hvr-icon-down {
  0%,50%,100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25%,75% {-webkit-transform: translateY(6px);transform: translateY(6px);}
}

/* Icon Down */
.hvr-icon-down {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  padding-right: 2.2em;
}
.hvr-icon-down:before, .secondaryBtn .hvr-icon-down:before {
  content: url(../images/download-arrow.png);
  position: absolute;
  left:25px; top:27px;
}

.secondaryBtn.hvr-icon-down:before {
  content: url(../images/download-arrow2.png);
}

.hvr-icon-down:hover:before, .hvr-icon-down:focus:before, .hvr-icon-down:active:before {
  -webkit-animation-name: hvr-icon-down;
  animation-name: hvr-icon-down;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}



/*Big yellow button*/
.btn_yellow span {
	background: url(../images/btn-cta-yellow2.png) no-repeat 0 0 transparent;
	padding: 17px 0 21px 20px;
	font-size: 18px;
	color: #a0741f;
	line-height: 14px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0px 1px 1px #fff;
	display: inline-block;
 
	/*text-transform: uppercase;*/
}
.btn_yellow {
	background: url(../images/btn-cta-yellow-span2.png) no-repeat top right transparent;
	height: 52px;
	padding-right: 20px;
	margin-top: 20px !important;
	display: inline-block;
	text-decoration: none;
}
.btn_yellow:hover span {
	background-position: 0 -152px;
}
.btn_yellow:hover {
	background-position: right -152px;
	text-decoration: none;
}
/*Small yellow button*/
.btn_yellowsmall span {
	background: url(../images/btn-yellow-small.png) no-repeat 0 0 transparent;
	padding: 11px 0 13px 20px;
	font-size: 12px;
	color: #a0741f;
	line-height: 12px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 1px #fff;
	display: inline-block;
	text-transform: uppercase;
}
.btn_yellowsmall {
	background: url(../images/btn-yellow-small-span.png) no-repeat top right transparent;
	height: 36px;
	padding-right: 20px;
	margin-top: 20px !important;
	display: inline-block;
	text-decoration: none;
}
.btn_yellowsmall:hover span {
	background-position: 0 -36px;
}
.btn_yellowsmall:hover {
	background-position: right -36px;
	text-decoration: none;
}
/*Small grey button*/
.btn_greysmall span {
	background: url(../images/btn-grey-small.png) no-repeat 0 0 transparent;
	padding: 11px 0 13px 20px;
	font-size: 12px;
	color: #b9b9b9;
	line-height: 12px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 1px #fff;
	display: inline-block;
	text-transform: uppercase;
}
.btn_greysmall {
	background: url(../images/btn-grey-small-span.png) no-repeat top right transparent;
	height: 36px;
	padding-right: 20px;
	margin-top: 20px !important;
	display: inline-block;
	text-decoration: none;
}
.btn_greysmall:hover span {
	background-position: 0 -36px;
}
.btn_greysmall:hover {
	background-position: right -36px;
	text-decoration: none;
}
/*Extra small grey button (fixed width button)*/
.btn {
	background: url(../images/btn-upgrade.png) no-repeat;
	width: 68px;
	height: 20px;
	font-size: 11px;
	color: #454545;
	text-align: center;
	line-height: 1.6em;
	/*text-transform: uppercase;*/
	display: inline-block;
	font-weight: 600;
}
.btn:hover {
	text-decoration: none;
}
/*android, appstore, googleplay buttons*/
.btn_android {
	background: url(../images/btn-android.png) no-repeat;
	width: 178px;
	height: 65px;
	margin-top: 20px;
	display: inline-block;
}
.btn_appstore {
	background: url(../images/btn-appstore.png) no-repeat;
	width: 178px;
	height: 65px;
	margin-top: 20px;
	display: inline-block;
}
.btn_googleplay {
	background: url(../images/btn-googleplay.png) no-repeat;
	width: 178px;
	height: 65px;
	margin-top: 20px;
	display: inline-block;
}
.btn_downloadnow {
	background: url(../images/btn-download.png) no-repeat;
	width: 178px;
	height: 65px;
	margin-top: 20px;
	display: inline-block;
}

/*To get center aligned button*/
.button_wrapper {
	width: 100%;
	text-align: center;
}
.button_wrapper_left {
	width: 100%;
	text-align: left;
}
.button_wrapper_right {
	width: 100%;
	text-align: right;
}


.features_sub {
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 500;	
}



/*line behind button*/
.centerline {
	background: url(../images/line-center.png) repeat-x;
	width: 100%;
	height: 52px;
	margin-top: 40px;
	float: left;
	display: block;
}
.centerline .btn_yellow {
	margin-top: 0px !important;
}
.centerline .bigBtn {
	margin-top: -10px !important;
}

.centerline .btn_yellowsmall, .centerline .btn_greysmall {
	margin-top: 8px !important;
}
/*----------------------------------------*/
/*----- 1.5 Image styles -----*/
/*----------------------------------------*/
.image_noborder {
	display: block;
	margin-bottom: 10px;
}
.image_border {
	background: #fcfcfc;
	border: 1px solid #e6e6e6;
	padding: 4px;
	margin-bottom: 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	display: block;
}
.image_left {
	background: #fcfcfc;
	border: 1px solid #e6e6e6;
	padding: 4px;
	margin: 0 10px 10px 0px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	float: left;
}

.image_left2 {
	/*background: #fcfcfc;*/
	/*border: 1px solid #e6e6e6;*/
	padding: 4px;
	margin: 0 10px 10px 0px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	float: left;
}


.image_right {
	background: #fcfcfc;
	border: 1px solid #e6e6e6;
	padding: 4px;
	margin: 0 0 10px 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	float: right;
}



.image_right2 {
	/*background: #fcfcfc;*/
	/*border: 1px solid #e6e6e6;*/
	padding: 4px;
	margin: 0 0 10px 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	float: right;
}


/*----------------------------------------*/
/*----- 1.6 List styles -----*/
/*----------------------------------------*/
.list1 li {
	background: url(../images/bullet-checkmark.png) no-repeat 0 6px;
	padding-left: 20px;
	margin-bottom: 10px;
	display: block;
	list-style-type: none;
}
.list2 li {
	background: url(../images/bullet-circles.png) no-repeat 0 6px;
	padding-left: 22px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
	list-style-type: none;
}
.list3 li {
	background: url(../images/bullet-plus.png) no-repeat 0 6px;
	padding-left: 22px;
	margin-bottom: 10px;
	display: block;
	list-style-type: none;
}
.list4 li {
	background: url(../images/bullet-circles.png) no-repeat 0 8px;
	padding-left: 22px;
	margin-bottom: 10px;
	display: block;
	list-style-type: none;
	font-size: 16px;
	font-weight: 500;
}

.number {
	list-style: decimal;
	list-style-position: inside;
}
.roman {
	list-style: upper-roman;
	list-style-position: inside;
}
.number li, .roman li {
	padding-bottom: 10px;
}
/*----------------------------------------*/
/*----- 1.7 Divider -----*/
/*----------------------------------------*/
.divider {
	background: #ebebeb;
	width: 100%;
	height: 1px;
	margin: 10px 0 10px 0;
	float: left;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTRE ----------*/
/*============================================================*/
/*----- Commons -----*/
/*Adjust top padding of divs below in case of increase in height of header_wrapper (wrapping logo & navigation)*/
.image-slider {
	padding: 95px 0 70px 0 !important; /* you can give fix height to slider just to avoid fluctuations of content below the slider */
}
#overview {
	padding: 80px 0 40px 0;
}


#features {
	padding: 110px 0;
}
#screenshots {
	padding: 110px 0;
}
#team {
	padding: 110px 0
}
#sub_footer {
	padding: 110px 0;
}
#tutorials {
	padding: 110px 0;
}

#download {
	padding: 110px 0;
}
#contact {
	padding: 110px 0 0 0;
}
/*columns system has separate CSS - skeleton.css*/
.row_color {
	background: url(../images/div-grey-top.png) no-repeat center top #f8f8f8;
	width: 100%;
	border-bottom: 1px solid #eaeaea;
}
/*----------------------------------------*/
/*----- 2.1 header -----*/
/*----------------------------------------*/
#header_wrapper {
	background: url(../images/header-bg-full.jpg);
	background-size: cover;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden !important;

}


/*#header_wrapper {
	background: url(../images/header-bg.png) no-repeat center top #075D94;
	width: 100%;
	height: auto;
}*/


#header {
	background: url(../images/nav-bg.png) no-repeat center bottom;
	width:940px;
	height: 90px; /*In case if you need more height than 90px for header, due to your logo height, visit help document*/
	z-index: 9999;
	position:fixed;
	top: 0;
	left: 50%;
	margin-left: -470px;
}
/*----- logo -----*/
.logo h1 {
	color: #fff;
	margin-left: 20px;
	margin-top: 6px; /*Tweak 'margin-top' if you have text logo*/
	margin-bottom: 0 !important;
	font-style: italic;
}
/*----- navigation -----*/
#nav {
	float: left;
}
#nav ul {
	padding-top: 27px;
	padding-right: 10px;
	z-index: 999;
	float: right;
}
#nav ul li {
	padding: 0 10px;
	float: left;
	background: none;
	list-style-type: none;
}
#nav ul li a {
	font-size: 16px;
	color: #fff;
	font-weight: 400;
	text-shadow: 0 1px 0 #000;
	text-decoration:none;
	/*text-transform: uppercase;*/
	word-spacing: 2px;
	outline: none;
}
#nav ul li a:hover {
	color: #aab7e3;
}
#nav .selected {
	color: #aab7e3;
}
#nav li ul {
	width: 280px; /*Adjust width if you have long text link*/
	display: none;
}
#nav li:hover ul {
	padding: 55px 0 5px 0;
	margin-left: -20px;
	position: absolute;
	top: 0;
	display: block;
	z-index: -9;
}
#nav li:hover li {
	background: #1f2333;
	padding: 5px 20px;
	float: none;
	/*line-height: 1em;*/
}
#nav li:hover li a {
	font-size: 14px;
}
.coloredlink {
	color: #075D94 !important;
}


#nav ul li ul {
  width: 250px !important;
}
#nav ul li ul li ul {
  width: 280px !important;
}


#nav ul li ul li ul {
	display: none !important;
	left: 180px;
	z-index: 9 !important;
}

#nav ul li ul li:hover ul {
	display: block !important;
}


#nav li:hover li.firstdroplink {
	border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	padding-top: 15px !important;
}
#nav li:hover li.lastdroplink {
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	padding-bottom: 15px !important;
}
#nav select {
	display: none;
	cursor: pointer !important;
	color: #8b9192 !important;
	outline: none;
}



/*----- slider -----*/
.image-slider h3 {
	margin-top: 35px; /*specify 'margin-top' as per your your choice*/
	font-size: 32px;
	font-weight: 300;
	color: #fff;
	text-shadow: 0 1px 10px #383E2B;
	/*text-transform: uppercase;*/
	word-spacing: 1px;
	z-index: 10;
}

.image-slider h2 {
	margin-top: 0px; /*specify 'margin-top' as per your your choice*/
	font-size: 40px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 10px #383E2B;
	/*text-transform: uppercase;*/
	word-spacing: 2px;
	z-index: 10;
}


.image-slider h4 {
	margin-top: 40px; /*specify 'margin-top' as per your your choice*/
	font-size: 24px;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 1px 10px #383E2B;
	/*text-transform: uppercase;*/
	word-spacing: 1px;
	z-index: 10;
}



.image-slider p {
	font-size: 20px;
	font-weight: 300;
	color: #FDFEFE;
	text-shadow: 0 1px 0 #383E2B;
	text-align: left;
	word-spacing: 3px;
}
/*----------------------------------------*/
/*----- 2.2 features -----*/
/*----------------------------------------*/
#features h1, #features h4 {
	/*text-align: center;*/
	margin-bottom: 40px;
}

#features h1 {
	font-weight: 600;
}


#features h3 {
	text-align: center;
}

 



.icon_bg {
	background: #126EA8;/* #075D94;*/
	width: 100px;
	height: 100px;
	margin: 40px auto 20px auto;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	text-align: center;
	line-height: 128px;

}
.icon_bg img {
	float: left;
}

.icon_bg i {
	/*padding-left: 22px;*/
	/*padding-top: 22px;*/
	color: white;
	text-shadow: 2px 2px 8px #0C4A71;

}


/*----------------------------------------*/
/*----- 2.3 screenshots -----*/
/*----------------------------------------*/
#mycarousel li {
	background: #fcfcfc;
	width: 210px;
	height: 145px;
	
	padding: 4px;
	margin: 0;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	position: relative;
	list-style: none;
	float: left;
}

#mycarousel li img {
	width: 210px;
	height: 145px;
	float: left;
}


 
.thumb {
	position:relative;
	overflow:hidden;
}
.thumb .zoom {
	background: url(../images/zoom.png) 0 0 no-repeat transparent;
	width: 80px;
	height: 80px;
	position:absolute;
	left:-90px;
	top: 14px;
	outline: none;
}
.thumb .zoom:hover {
	background: url(../images/zoom.png) 0 -80px no-repeat transparent;
}
/*----------------------------------------*/
/*----- 2.4 team -----*/
/*----------------------------------------*/
.team_info {
	padding: 15px 0;
	display: block;
}
.team_info li {
	margin-bottom: 5px;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4em;
	display: block;
	background: none;
	list-style-type: none;
}
.team_info li a {
	font-size: 12px;
	font-style: italic;
}
.team_info li img {
	margin-right: 5px;
	float: left;
}
/*----------------------------------------*/
/*----- 2.5 download -----*/
/*----------------------------------------*/
#download h2 {
	text-align: center;
	margin-bottom: 8px;
	font-weight: 600;
}
.logo_grey {
	width: 122px;
	height: 62px;
	margin: 0 auto 30px auto;
}
.textlist {
	text-align: center;
}
.textlist li {
	padding: 0 7px;
	font-size: 16px;
	display: inline;
	background: none;
	list-style-type: none;
}
/*----------------------------------------*/
/*----- 2.6 sub_footer -----*/
/*----------------------------------------*/
/*--- reviews / testimonials ---*/
.testimonial li {
	margin-bottom: 20px;
	font-style: italic;
	background: none;
	list-style-type: none;
 
}
.testimonial li span {
	padding-top: 7px;
	font-style: normal;
	font-size: 14px;
	display: block;
}
/*--- updates ---*/
.updates li {
	font-size: 14px;
	margin-bottom: 20px;
	background: none;
	list-style-type: none;
}
.updates li .btn {
	float: right !important;
}
.updates li h6 {
	width: 220px;
}
.updates .divider {
	margin: 3px 0 10px 0;
}
/*----------------------------------------*/
/*----- 2.7 contact -----*/
/*----------------------------------------*/
/*----- contact form -----*/
form {
	margin: 0;
	padding: 0;
	z-index: 0;
}
form p {
	margin-bottom: 20px;
	padding: 0;
}
/*errors*/
form label.error {
	display: none !important;
}
form input.error, form textarea.error, form password.error {
	border-color: #dc8f89 !important;
	box-shadow: none;
}
/*label and inputs*/
label {
}
input[type=text], textarea {
	background: #fcfcfc;
	width: 95%;
	height: 28px;
	padding: 5px;
	border: 1px solid #e6e6e6;
	font-size: 14px;
	color: #717576;
	line-height: 1.9em;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	display: block;
}
textarea {
	height: 88px;
}
textarea:focus, input[type=text]:focus {
	border-color: rgba(82, 168, 236, 0.8) !important;
}
/*results*/
#result {
	width: 300px;
	padding-top: 5px;
	float: left;
	display: block;
}
/*submit button*/
.submit {
	background: url(../images/btn-submit-small3.png) no-repeat;
	width: 147px;
	height: 40px;
	font-size: 14px;
	color: #454545;
	font-weight: 600;
	text-shadow: 0 1px 1px #ededed;
	cursor: pointer;
	border: none;
	/*text-transform: uppercase;*/
	text-align: center;
}
/*placeholder*/
::-webkit-input-placeholder {
 color: #999;
}
:-moz-placeholder {
 color: #999;
}

::-moz-placeholder {
 color: #999;
}
:-ms-input-placeholder {
 color: #999;
}
/*antispam*/
.antispam {
	display:none;
}
/*--- address section ---*/
.address {
	text-align: right;
}
.contact_info {
	font-size: 16px;
	color: #4d546b !important;
	font-weight: bold;
	padding-bottom: 10px;
}
.contact_info a {
	font-size: 16px;
	color: #4d546b !important;
	font-weight: bold;
}
/*--- social ---*/
.social {
	margin-bottom: 10px;
}
.social li {
	background: #aab7e3;
	width: 46px;
	height: 46px;
	margin-left: 2px;
	border-radius: 46px;
	-moz-border-radius: 46px;
	-webkit-border-radius: 46px;
	list-style-type: none;
	display: inline-block;
}
.social li img {
	float: left;
}
/*--- twitter ---*/
.twitter-wrapper {
	margin-top: 40px;
	display: block;
}
.twitter-wrapper p {
	padding-right: 10px;
	font-size: 16px;
	color: #4d656b;
	float: left;
}
.twitter-wrapper a {
	color: #dc8f89;
}
.tweet_time {
	display: none;
}
/*----------------------------------------*/
/*----- 2.8 footer -----*/
/*----------------------------------------*/
#footer {
	background: #1a1e2b;
	width: 900px;
	padding: 20px;
	margin: 40px auto 0 auto;
	font-size: 11px;
	color: #727378;
	font-weight: 400;
	text-shadow: 0 1px 0 #000;
	border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
}
#footer p {
	float: left;
}
#footer ul {
	float: right;
}
#footer ul li {
	margin-left: 10px;
	background: none;
	list-style-type: none;
	display: inline-block;
	float: left;
}
#footer a {
	font-size: 11px;
	color: #717677;
	text-shadow: 0 1px 0 #000;
}
.scrollToTop {
	display: none;
}
/*----------------------------------------*/
/*----- 2.9 Other Pages -----*/
/*----------------------------------------*/
#sub_header {
	width: 100%;
	padding: 110px 0 25px 0;
	float: left;
}
#content {
	padding: 40px 0;
}
#page_subfooter {
	padding-top: 40px;
}
/*============================================================*/
/*---------- 3. PRICING ----------*/
/*============================================================*/
/*--- pricing intro ---*/
.pricing_intro {
	padding: 40px 0;
}
.pricing_intro h2 {
	text-align: center;
	margin-bottom: 0;
}
.pricing_intro .textstyle1 {
	font-size: 16px;
}
/*--- pricing table ---*/
.pricing_table {
	margin-bottom: 40px;
	margin-top: 40px;
	border: 1px solid #d4d4d4;
	border-width: 1px 1px 4px 1px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-moz-border-radius-bottomright: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-webkit-border-bottom-left-radius: 9px;
}
.pricing_table table {
	width: 100%;
	font-size: 12px;
	color: #00A1D1;
	font-weight: 400;
	text-shadow: 0px 1px 1px #fff;
}
.pricing_table thead th {
	background: #f4f4f4;
	width: 84.3%;
	padding: 13px 8%;
	font-size: 24px;
	color: #f4f4f4;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px #878787;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	float: left;
}
.pricing_table tfoot td {
	background: #ededed;
	width: 84.3%;
	padding: 20px 8%;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
}
.pricing_table td {
	background: #f6f6f6;
	width: 84.3%;
	padding: 10px 8%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #d4d4d4;
	float: left;
}
.pricing_table td.focus {
	background: #ededed;
	width: 84.3%;
	padding: 25px 8%;
	font-size: 32px;
	color: #c0c2c2;
	font-weight: 400;
	text-align: center;
	text-shadow: 0px 1px 1px #fff;
	border-top: 1px solid #f7f7f7;
	border-bottom: 1px solid #d4d4d4;
}
.pricing_table td.focus span {
	font-size: 10px;
	display: block;
}
.pricing_table td h6 {
	width: 100%;
	font-size: 14px;
	color: #c0c2c2;
	font-weight: 400;
	/*text-shadow: 0px 1px 1px #fff;*/
    text-align: center;
}
.pricing_table td p {
	width: 40%;
	text-align: right;
	float: left;
}
.pricing_table tfoot td .btn_yellowsmall, .pricing_table tfoot td .btn_greysmall {
	margin-top: 0 !important;
}
/*--- featured table ---*/
.featured_table {
	position: relative;
}
.featured_table thead th {
	background: #00A1D1;
}
.featured_table td.focus {
	color: #4d546b;
}
.featured_table td h6 {
	color: #909697;
}
.featured_table td p {
	color: #6b6e6f;
}
.ribbon {
	background: url(../images/corner-best.png) no-repeat;
	width: 48px;
	height: 48px;
	position: absolute;
	top: -5px;
	right: -5px;
}
/*============================================================*/
/*---------- 4. Media queries ----------*/
/*============================================================*/

/*----------------------------------------*/
/*----- 4.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 -----*/

#sub_header {
 padding: 40px 0 25px 0;
}
#header {
	background: #1a1e2b;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	width: 748px;
	left: 50%;
	margin-left: -374px;
	height: auto !important;
}
.team_info {
width: 236px;
clear: both;
}
.updates li h6 {
 width: 160px;
}
input[type=text], textarea {
 width: 224px;
}
.submit {
 background: url(../images/btn-submit-small.png) no-repeat;
 width: 236px;
}
#footer {
 background: #1b292c;
 width: 708px;
 padding: 20px;
}
.scrollToTop {
 width: 25px;
 height: 30px;
 position:fixed;
 bottom:40px;
 right:40px;
 display:none;
 background: url(../images/Arrow-Up.png) no-repeat;
 font-size: 0px;
 text-indent: -9999;
}
/*for slider*/
.image-slider h2 {
 font-size: 30px !important;
 margin-top: 20px !important;
}
.thumb .zoom {
display: none;
}
}

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

@media only screen and (max-width: 767px) {

/*----- Need changes while customization -----*/
.logo h1 {
width: 260px; /*change height and width as per your logo*/
height: 61px;
margin: 0 auto;
}

/*----- No need to change below unless heavy layout changes -----*/
.container .columns, .container .column {
margin: 10px 0 10px 0 !important;
}
.logo {
width: 300px;
}
#nav ul {
display: none;
}
#nav {
text-align:center;
 
}
#nav select {
display: inline-block;
text-align:left;
width:60%;
border:solid 1px #46494d;
padding: 5px;
background:transparent;
color: #82848a;
}
#header {
 background: #262b1a;
 border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 width:300px;
 position: relative;
 left: 0;
 margin-left: 0;
 height: auto !important;
 padding-bottom: 10px;
}
#features, #screenshots, #tutorials, #team, #download, #sub_footer, #contact {
 padding: 30px 0;
}
#sub_header {
 padding: 40px 0 25px 0;
}
.team_info {
width: 236px;
clear: both;
}
#footer {
 width: 260px;
 padding: 20px;
}
#footer p {
float: none !important;
}
#footer ul {
 float: left;
 display: block;
}
#footer ul li {
 margin-right: 10px;
 margin-left: 0;
}
/*for slider*/
.image-slider h2 {
 font-size: 35px !important;
 margin-top: 0 !important;
}
.image-slider {
 padding: 30px 0 60px 0 !important;
}
.thumb .zoom {
display: none;
}
}

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

@media only screen and (min-width: 480px) and (max-width: 767px) {

/*-----No need to change below unless heavy layout changes-----*/
/* Other properties are according to those specified for Mobile (Portrait)*/
#header {
 background: #262b1a;
 border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 width:420px;
 position: relative;
 left: 0;
 margin-left: 0;
 height: auto !important;
 padding-bottom: 10px;
}
.logo {
width: 420px;
}
.address {
text-align: left !important;
}
#footer {
 width: 380px;
 padding: 20px;
}
}

/*============================================================*/
/*---------- 5. Browser fixes ----------*/
/*============================================================*/
/*----- IE 8 fix -----*/
@media \0screen {
.pricing_table thead th, .pricing_table td, .pricing_table td.focus, .pricing_table tfoot td {
	width: 84%;
}
}
/*----- Opera fix -----*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.pricing_table thead th, .pricing_table td, .pricing_table td.focus, .pricing_table tfoot td {
 width: 85.9%;
 padding-left: 7.8%;
 padding-right: 7.7%;
}
}
/*----- Chrome fix -----*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.pricing_table thead th, .pricing_table td, .pricing_table td.focus, .pricing_table tfoot td {
 width: 84.6%;
}
}


.imagecenter {
	text-align: center;
}

.righttext {
	text-align: right;
}


.font-weight500 {
	 font-weight: 500;
}


.font-weight600 {
	 font-weight: 600;
}

.font-weight700 {
	 font-weight: 700;
}


.font-colorblue {
	 color: #075D94;
}


.topmargin-sss { margin-top: 8px !important; }

.bottommargin-sss { margin-bottom: 8px !important; }


.topmargin-ss { margin-top: 20px !important; }

.bottommargin-ss { margin-bottom: 20px !important; }


.topmargin-s { margin-top: 50px !important; }

.bottommargin-s { margin-bottom: 50px !important; }


.topmargin-m { margin-top: 120px !important; }

.bottommargin-m { margin-bottom: 120px !important; }


.topmargin-l { margin-top: 180px !important; }

.bottommargin-l { margin-bottom: 180px !important; }






.title_sub{
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
	font-weight: 600;
}


.divider2 {
	background: #ebebeb;
	width: 100%;
	height: 40px;
	margin: 40px 0 20px -5px;
	float: left;
	padding-left: 12px;
	padding-top: 4px;
 
}
.factbox {
	border: 2px dotted #ff9900 ;
	color: black;
	padding: 10px;
	background: #ffffcc;
	font-size: 11px;
}
