/*------------------------------------------------------------------- /
Theme Name: Focuz  Multipurpose HTML Template
Theme URI: http://codexcoder.com/
Author: CodexCoder
Author URI: http://codexcoder.com/
Description: Focuz is a multi page html template
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: html, template, Focuz

--------------------------------------------------------------------- */

 
/* 1 - Import Google Font
------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic,900,900italic);
/* 1 - Import Google Font End 
------------------------------------------------------------------------*/


/* 2 - Global Styles
---------------------------------------------------------------------- */
html,body {
	font-family: 'Roboto', sans-serif; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;  
 	z-index: 0;
	background-color:#222222;
} 
.section-description {
	margin: 0 1em;
}
.box-layout {
	max-width: 1200px;
	margin: auto; 
	clear: both;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,.1); 
}
.box-layout .focuz-main-slider>.master-slider{
	margin: 0 !important;
	clear: both;
}

a {
	color: #00a1cb;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
} 
a:focus {
	outline:none;
	outline-offset:0; 
	text-decoration: none; 
}
a:hover { 
	text-decoration: none;
}
p {
	color: #777777;
	font-size: 0.875rem;
	line-height: 24px;
}
hr {
	border-color: #e4e4e4;
}
img {
	max-width: 100%;
	height: auto;
}
.boxer-container img {
	max-width: inherit;
}
.inline {
	display: inline-block;
}
.overlay {
	background-color: rgba(0,0,0,.8);
}
.text-upc {
	text-transform: uppercase;
} 
.section-padding {
	padding: 50px 0;
} 
section+hr,
.section-padding+hr{
	margin: 0;
}
.polygon-bg {
	background-image: url(../images/polygon-bg.jpg);
	background-repeat: repeat;
	color:#FFF; 
}
.parallax-bg { 
	background-attachment: fixed;
	background-size: cover;
}
.relative {	
	position: relative; 
}
.dark-bg  { background: #1c1c1c !important; }
.white-bg { background: #ffffff !important; } 
.blue-bg  { background: #00a1cb !important; } 


/* 2.1 - Resets 
------------------------------------------- */
.no-border,
.no-border-ab:after,
.no-border-ab:before {
	border:none !important;
}
.no-after:after,
.no-before:before {
	content: none !important; 
}
.no-border-l { border-left:none !important;  }
.no-border-r { border-right:none !important; }
.no-border-t { border-top:none !important;   }
.no-border-b { border-bottom:none !important;}
.border2px   { border-width: 2px !important; }
.border1px   { border-width: 1px !important; }

.m0    { margin: 0 !important; }
.lm0   { margin-left: 0 !important; }
.rm0   { margin-right: 0 !important; }
.tm0   { margin-top: 0 !important; }
.bm0   { margin-bottom: 0 !important; }
.bm50  { margin-bottom: 50px !important; }
.tm50  { margin-top: 50px !important; }
.bm30  { margin-bottom: 30px !important; }
.tm30  { margin-top: 30px !important; }
.mauto {
		 margin-left: auto !important;
		 margin-right: auto !important;
}
.lm-15 { margin-left: -15px !important; }

.p0   { padding: 0 !important; }
.lp0  { padding-left: 0 !important; }
.rp0  { padding-right: 0 !important; }
.tp0  { padding-top: 0 !important; }
.bp0  { padding-bottom: 0 !important; }
.lrp15{ 
		padding-left: 15px !important;
		padding-right: 15px !important;
}
.lrp30 {
 		padding-left: 30px !important;
		padding-right: 30px !important;
}
.p15 { padding: 15px; }
.p30 { padding: 30px; }
.pt50,
.tp50{ padding-top: 50px !important; }
.tp40{ padding-top: 40px !important; } 
.tp20{ padding-top: 20px !important; }  

@media (max-width: 992px) { 
	.md-bm30 	{ margin-bottom: 30px !important; }
	.md-bm50 	{ margin-bottom: 50px !important; }
	.md-no-pull { float: none !important }
	.md-hide 	{ display: none !important }
}

@media (max-width: 768px) { 
	.sm-bm30 	{ margin-bottom: 30px !important; }
	.sm-bm50 	{ margin-bottom: 50px !important; }
	.sm-no-pull { float: none !important }
	.sm-hide 	{ display: none !important }
}

@media (max-width: 480px) { 
	.xs-full 	{ width: 100% !important }
	.xs-bm30 	{ margin-bottom: 30px !important; }
	.xs-bm50 	{ margin-bottom: 50px !important; }
	.xs-no-pull { float: none !important }
	.xs-hide 	{ display: none !important }
}
 
.mf-width { max-width: 100% !important; }
.f-width  { width: 100% !important; }

.dtable  { display: table; }
.dblock  { display: block; }
.dinline { display: inline; }
.diblock { display: inline-block; }

/* 2.1 - Resets End
------------------------------------------- */

 
/* 2.2 - Headings
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { 
	font-family: 'Oswald', sans-serif;  
	font-weight: 700;
	text-transform: uppercase;  
}

h1 { font-size: 2.125em; }
h2 { font-size: 1.75em;  }
h3 { font-size: 1.375em; }
h4 { font-size: 1.125em  }
h5 { font-size: 1em; 	 }
h6 { font-size: 0.875em; }

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a {
	color:#2d2d2d;
}

h1 a:hover, 
h2 a:hover, 
h3 a:hover, 
h4 a:hover, 
h5 a:hover, 
h6 a:hover {
	color:#00a1cb;
}

h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span {
	color: #00a1cb;
}

h1 > em,
h2 > em,
h3 > em,
h4 > em,
h5 > em,
h6 > em {
	color: #00a1cb;
	font-weight: 300;
}
/* 2.2 - Headings End
------------------------------------------- */


/* 2.3 - Buttons
------------------------------------------- */
.btn {  
	color: #00a1cb; 
	background-color: transparent;
	border:1px solid #dedede;
	font-weight: 700;
	border-radius: 0; 
	margin: 5px; 
} 
.btn:hover, 
.btn:focus, 
.btn.focus {
	color: #00a1cb; 
}
.filter-btn.btn {
	margin: 5px 2px;
	font-size: 12px;
	font-family: "Roboto", sans-serif;
}
.filter-btn {
	background: #ffffff;
	text-transform: uppercase; 
}
.btn,
.btn .badge { 
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	     	transition: all .25s ease;
}
.btn:active, 
.btn.active {
	-webkit-box-shadow:none;
	box-shadow:none;
}
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus,
.btn:active,
.btn:hover, 
.btn:focus, 
.btn.focus {
	outline: none;
	outline-offset:0;
}
.rbtn {
	border-radius: 25px;
}
.btn.has-badge {
	padding-left: 25px;
	padding-right: 25px;
}
.btn.has-badge .badge {
	display: none;
	padding: 0;
}
.btn.has-badge.active {
	padding-left: 10px;
	padding-right: 5px;
}
.btn.has-badge.active .badge { 
	margin-left: 5px;
	height: 25px;
	min-width: 25px; 
	display: inline-block;
	background: white; 
	color: #00A1CB;
	line-height: 25px;
}
.btn .badge {
	border-radius: 15px;
} 
.btn.active,
.bg-btn {
	color: #ffffff;
	border-color: #00a1cb;
	background: #00a1cb;
}  
.bg-btn:hover {
	color: #ffffff;
}
.bg-btn.btn:focus {
	color: #ffffff;
}
.sm-btn {
	padding:0 15px;
	min-height: 36px; 
	line-height: 30px;
}
a.sm-btn {
	line-height: 34px;
}
.md-btn {
	padding:0 15px;
	min-height: 40px; 
	line-height: 38px;
}
.full-btn {
	margin:5px 0;
	width: 100%;
	max-width: 100%;
}
.nav-btn.rbtn {
	padding: 0;
	width: 36px;
	border-color: #00a1cb;
}
.md-btn:hover,
.sm-btn:hover,
.nav-btn:hover {
	border-color: #00a1cb;
	background: #00a1cb;
	color: #ffffff;
}
.btn-container {
	padding-top: 30px;
}
.btn-container .btn {
	color: #606060;
}
.btn a:hover,
.btn-container .btn:hover{
	color: #ffffff;
}
.btn a {
	width: 100%;
	display: inline-block;
}
.btn-black {
	background: #000000;
	border-color: #000000;
}
.btn-black:hover {
	color: #ffffff;
}
/* 2.3 - Buttons End
------------------------------------------- */

 
/* 2.4 - Stripe Title 
------------------------------------------- */
.stripe-full,
.stripe-bfixw {
	position: relative;
	margin-bottom: 30px;
}
.stripe-over:after,
.stripe-over:before,
.stripe-full:after,
.stripe-full:before,
.stripe-bfixw:after,
.stripe-bfixw:before {
	content: "";
	position: absolute; 
	bottom: -18px; 
}
.mozilla .stripe-over:after,
.mozilla .stripe-over:before,
.mozilla .stripe-full:after,
.mozilla .stripe-full:before,
.mozilla .stripe-bfixw:after,
.mozilla .stripe-bfixw:before{
	/*bottom: -19px; */
}
.stripe-full.stripe-1:after {
	height: 0;
	border:0;
}
.stripe-bfixw:after,
.stripe-bfixw:before {
	left: 50%;
	width: 50px;
	margin-left: -25px;
}
.stripe-over:after,
.stripe-over:before,
.stripe-full:after,
.stripe-full:before{
	left: 0;
	width: 100%; 
}
.stripe-over:after,
.stripe-full:after,
.stripe-bfixw:after {
	height: 5px; 
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.stripe-over:before,
.stripe-full:before,
.stripe-bfixw:before {
	height: 3px; 
	border-top: 1px solid #dedede; 
}
.stripe-over {
	display: inline-block;
	position: relative;
	margin-bottom: 0; 
}
.stripe-over:after,
.stripe-over:before {
	bottom: -22px;
	z-index: 2;
}
.stripe-blue:after,
.stripe-blue:before { 
	border-color: #00a1cb;
}
.title-container {
	overflow: hidden;
}
.striped-title {
	display: inline-block; 
	position: relative; 
	z-index: 0;
}

.striped-title:after,
.striped-title:before,
.stripe-t-left:after,
.stripe-t-left:before,
.stripe-t-right:after,
.stripe-t-right:before,
.stripe-t-back:after, 
.stripe-t-back:before {
	content: "";
	position: absolute; 
	top: 50%;
	margin-top: -3px;
}
.stripe-t-back:after, 
.stripe-t-back:before { 
	left: 0;
	right: 0;
	z-index: -1; 
}
.stripe-t-left:after,
.stripe-t-left:before {
	width: 1100px;
	right: 100%;
	margin-right: 40px;
}
.stripe-t-right:after,
.stripe-t-right:before {
	width: 1100px;
	left: 100%;
	margin-left: 40px;
}
.for-widget .stripe-t-right:after,
.for-widget .stripe-t-right:before {
	margin-left: 10px;
}

.stripe-t-left:after,
.stripe-t-right:after,
.stripe-t-back:after {
	height: 5px;
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
}
.stripe-t-left:before,
.stripe-t-right:before,
.stripe-t-back:before {
	height: 3px; 
	border-bottom:1px solid #dedede;
}
.striped-title:after,
.striped-title:before{
	top: 4px;
	bottom: 2px;
	width: 11px;
	border-left:4px solid #dedede;
	border-right:4px solid #dedede;
}
.striped-title:after {
	right: -25px;
}
.striped-title:before {
	left: -25px;
} 
.special-stripe {
	min-width: 50px;
	margin: 0px;
	bottom: 0px;
}
.special-stripe:after,
.special-stripe:before {
	bottom: 0px !important;
}
.polygon-bg .stripe-t-left:before, 
.polygon-bg .stripe-t-right:before, 
.polygon-bg .stripe-t-back:before,
.polygon-bg .stripe-t-left:after, 
.polygon-bg .stripe-t-right:after, 
.polygon-bg .stripe-t-back:after,
.polygon-bg .striped-title:after, 
.polygon-bg .striped-title:before {
	border-color: #292929;
}
.mozilla h5.stripe-over:after, 
.mozilla h5.stripe-over:before,
h6.stripe-over:after, 
h6.stripe-over:before {
	bottom: -23px;
}
.striped-title.no-border-ab .stripe-t-left:after,
.striped-title.no-border-ab .stripe-t-left:before {
	margin-right: 15px;
}
.striped-title.no-border-ab .stripe-t-right:after,
.striped-title.no-border-ab .stripe-t-right:before {
	margin-left: 15px;
}
/* 2.4 - Stripe Title End
------------------------------------------- */



/* 2.14 - Callout Action
---------------------------------------------*/
.callout-action h2 {
	font-size: 22px;
}
.callout-action .action-links a {
	color:#606060;
	font-size: 14px; 
	font-weight: 500;
}
.callout-action .action-links a:hover {
	color: #00a1cb;
}
.callout-action .callout-background {
	position: relative;
	top: 0px;
	right: 0px;
}
.callout-action .action-description {
	color: #777777;
	font-weight: 600;
	text-transform: capitalize;
}
.callout-action .btn.purchase {
	color: #ffffff;
	margin-top: 30px;
	margin-bottom: 80px;
}
.callout-action.top-part {
	position: relative;
	border-top: 4px solid #2d2d2d;
	z-index: 0;
}
.callout-action.top-part:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	height: 1px;
	width: 100%;
	background: #bfbfbf;
	display: inherit;
	z-index: 1;
}
.dark-bg .callout-content .callout-title {
	color: #ffffff;
	margin-top: 10px;
}
.dark-bg .callout-content .purchase {
	background: #ffffff;
	color: #2d2d2d;
}
.dark-bg .callout-content .purchase:hover {
	background: #00a1cb;
	color: #ffffff;
}
.blue-bg .callout-content .callout-title {
	color: #ffffff;
	margin-top: 10px;
}
.blue-bg .callout-content .btn {
	background: #00a1cb;
	color: #ffffff;
}
.blue-bg .callout-content .btn:hover {
	background: #ffffff;
	color: #00a1cb;
}
/* 2.14 - Callout Action End
---------------------------------------------*/



/* 2.15 - Progress Bar
---------------------------------------------*/
.progress.v1 {
	height: 40px; 
	background: #ebebeb;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-bottom: 10px;
}
.progress.v1 .progress-bar.default-bar {
	background-color: #00a1cb;
}
.progress.v1 .progress-bar {
	text-align: left;
	font-size: 13px;
	font-weight: 400;
	line-height: 38px;
	padding-left: 15px;
	position: relative;
}
.progress.v1 .progress-bar:before {
	content: ""; 
	top: 0;
	right: 0;
	width: 20px;
	height: 40px;
	position: absolute;
	border-style: solid;
	border-width: 20px 0px 20px 20px;
	border-color: #ebebeb #ebebeb #ebebeb #00a1cb;;
}

/* 2.15.1 - Progress V2
----------------------------*/
.progress.v2 {

}
/* 2.15.1 - Progress V2 End
----------------------------*/


/* 2.15.2 - Progress V3
----------------------------*/
.progress.v3 {
	height: 10px;
	width: 58%;
	margin-top: 14px;
}
.progress.v3 .progress-bar.default-bar {
	background-color: #00a1cb;
}
.progress-bg {
	background: #ffffff;
	height: 40px;
	border: 1px solid #dddddd;
	margin-bottom: 10px;
	display: block;
	padding-right: 50px;
	position: relative;
}
.progress-name {
	background: #000000;
	color: #ffffff;
	padding: 10px 3px;
	float: left;
	margin-right: 15px;
	font-size: 13px;
	text-transform: uppercase;
	width: 35%;
	text-align: center;
	position: relative;
	z-index: 0;
}
.progress-name:after {
	content: "";
	position: absolute;
	border:1px solid #000000;
	z-index: 1;
	left: -1px;
	right: -1px;
	top: -1px;
	bottom: 0;
}
.progress-count {
	position: absolute;
	right: 0px;
	bottom: 0px;
	border-left: 1px solid #ddd;
	display: block;
	height: 38px;
	line-height: 37px;
	font-size: 13px;
	width: 10%;
	text-align: center;
}
/* 2.15.2 - Progress V3 End
----------------------------*/
/* 2.15 - Progress Bar End
---------------------------------------------*/
 

/* 2.16 - Accordion
---------------------------------------------*/
.panel-group .panel, .panel {
	border-radius: 0; 
	margin-bottom: 10px;
}
.panel-title {
	font-size: 0.8125rem;
	font-weight: 700;
	font-family: 'Roboto',sans-serif;
	text-transform: inherit;
}
.panel-title a {
	color: #606060;
	min-height: 40px;
	display: inline-block;
	position: relative;
	padding-left: 15px;
	padding-right: 40px;
	line-height: 30px;
	padding-top: 5px;
	width: 100%;
}
.panel-title a[class^="fa-"] {
	padding-left: 40px;
}
.panel-title a:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	text-align: center;
	line-height: 38px;
	border-left: 1px solid #dedede;
	font-family: FontAwesome;	
	content: "\f0d8"; 
}
.panel-title a,
.panel-title a.collapsed:hover {
	color: #00a1cb;
}
.panel-title a.collapsed {
	color:#606060;
}
.panel-title a.collapsed:after {
	position: absolute;
	top: 0;
	right: 0;
	font-family: FontAwesome;	
	content: "\f0d7";
}
.panel-title a[class^="fa-"]:before {
	position: absolute; 
	font: normal normal normal 14px/1 FontAwesome;

	font-size: 1rem;
	width: 40px;
	text-align: center;
	height: 43px;
	left: 0;
	top: 0;
	line-height: 40px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.panel-default>.panel-heading {
	background-color: transparent;
	padding:0;
}
.panel-body p,
.panel-body {
	color:#777777;
	font-size: 0.875rem;
	line-height: 24px;
}
.panel-body 
.panel {
	margin-bottom: 10px;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* 2.16 - Accordion End
---------------------------------------------*/
 

/* 2 - Global Styles End
---------------------------------------------------------------------- */



.img-container  a {
	color: #ffffff;
}
.img-container img{
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.img-container:hover img{
	-webkit-transform: scale(1.1,1.1);
	   -moz-transform: scale(1.1,1.1);
	    -ms-transform: scale(1.1,1.1);
	     -o-transform: scale(1.1,1.1);
	        transform: scale(1.1,1.1);
}