@charset "utf-8";

/* ============================== */
/* 
	- Title: TecnoSoft Responsive And Retina Landing Page
	- Autor: Imaginacionweb
	- Email: jdrendon@imaginacionweb.net
	- Version: 1.0
*/
/* ============================== */	

/* ---------------------- 
	Stylesheet Guide
-------------------------

01. Import styles
	-  bootstrap.css  - include resetes ( Media querys, grid-responsive,layout).
	-  bootstrap-responsive.css	
	-  default.css  - Default color skin	
	-  flexslider.css  - Carousel (comments, sponsors and gallery)	
	-  responsiveslides.css  - Slide
	-  font-awesome.min.css  - Incons
	-  grid.css - Gallery team	
	-  Google Fonts  - Open sans	
	
02. Basic Elements
	-  Standar Styles	
	-  Class and styles Generals	
	-  Info Resalt		
	-  Top

0.3.  Structure
	-  Header	
	-  Main Navigation
	-  Galley Carousel	
	-  Footer
	-  Social	
	-  Comments	
	
0.4.	Layout 1920px version

0.5.	Layout for 1440px Version

0.6.	Layout for 1024px Version

0.7.	Layout for 900px Version

0.8.	Layout for 767px mobile version

0.9.	Layout for 685px mobile version

10.		Layout for 600px mobile version

11.		Layout for 480px mobile version

12.		Layout for 380px mobile version

13.		Layout for 320px mobile version

*/

/* ---------------------------------------------------------------------- */
/*	01 Import styles
/* ---------------------------------------------------------------------- */

/* bootstrap.css  - include resetes ( Media querys, grid-responsive,layout).*/
@import url("bootstrap/bootstrap.css");
/*Skins*/
@import url("skins/default.css");
/*carousel.css*/
@import url("carousel/flexslider.css");
/*slide.css*/
@import url("slide/responsiveslides.css");
/*Icons Font-Awesome*/
@import url("icons/font-awesome.min.css");
/*Grid Gallery*/
@import url("grid/grid.css");
/*Google Fonts*/
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,300,700,800");


.share {
  padding:4px 0 0 0 !important;
}
.share__count {
	background-color: #fff;
	border: solid 1px #a5b1bd;
	border-radius: 3px;
	/* add in vendor rules */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	/* add in vendor rules */
	color: #424a4d;
	float: left;
	font-weight: bold;
	margin-top:0;
	margin-right: 8px;
	padding: 2px 7px;
	position: relative;
	text-align: center;
}
.share__count:before, .share__count:after {
  content: '';
  display: block;
	height: 0;
	top: 50%;
  position: absolute;
	right: -14px;
  width: 0;
	margin-top: -6px;
}
.share__count:before {
	border: solid 7px transparent;
	border-color: transparent transparent transparent #a5b1bd;
}

.share__count:after {
	border: solid 6px transparent;
	border-color: transparent transparent transparent #fff;
	right: -12px;
	margin-top: -5px;
}
.share__btn {
	border: solid 1px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	padding: 3px 7px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.share__btn:hover, .share__btn:focus {color:#fff;text-decoration:none;}

.share_type_twitter > .share__btn {
	background-color: #4099FF;
}

.share_type_facebook > .share__btn {
	background-color: #3B5999;
}
	
.share_type_gplus > .share__btn {
	background-color: #F90101;
}

.share_type_comment > .share__btn {
	background-color: #666;
}




.call_slide {background-color:#000;position:relative;text-align: center;}

.callinfo_slide{
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  text-align: center;
}
.callinfo_slide h1{
  font-size: 60px;
  position: relative;
	letter-spacing:-2px;
  line-height: 60px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.callinfo_slide p{
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  color: #fff;
	letter-spacing:-1px;
  font-size: 38px;
  line-height: 40px;
  margin-bottom: 40px;
}
.callinfo_slide a{
  margin-right: 15px;
}

.callinfo_slide a.button {
  font-size:18px;
	font-weight:bold;
	box-shadow:0px 0px 6px #333;
}

  .container {
    width:1200px;
  }


/********************************* pagination */

.pagination {text-align: center;border-top:1px solid #ddd;overflow:hidden;padding:35px 0 100px 0!important;margin:30px 20px 0 20px;}
.pagination a, .pagination span {font-weight:bold;margin:0 2px 0 0 !important;display:inline-block;width:36px;height:36px;color:#333;padding-bottom:0;font-size:100%;line-height:36px;background:#EAEAEA;border:2px solid #B8B8B8;-moz-border-radius:20px!important;-webkit-borderradius:20px!important;border-radius:20px!important;text-align:center;}
.pagination a:hover {background:#fff;border:2px solid #666;}
.pagination span.current {color:#000;background:#fff;border:2px solid #555!important;}
.pagination a.next_page, .pagination span.disabled {margin-left:11px!important;}
.pagination a.prev_page, .pagination span.disabled  {margin-right:15px!important;}
.pagination a.next_page, .pagination a.prev_page, .pagination span.disabled {width:140px;}




.padding-content {padding:50px;}

/* ---------------------------------------------------------------------- */
/*	02 Basic Elements
/* ---------------------------------------------------------------------- */

/* Standar Styles --------------------------------------------------------*/

body{
	font-size: 16px;	
	font-family: 'Open Sans', sans-serif;
	line-height:26px;
	color:#666;
	padding:79px 0 0 0;
	position: relative;
	font-weight: normal;	
	background-color: #f6f4f1;
}
a{text-decoration: none;}
a:hover{text-decoration: none;}
a:active, a:focus {outline:none;text-decoration: none;}
p{
	margin:0 0 20px 0;
	padding: 0;	
	font-weight: 300;	
}
h1 {font-size:34px;
	line-height: 44px;
}
h2 {font-size:30px;
	line-height: 40px;
}
h3 {font-size:24px;
	line-height: 34px;
}
h4 {font-size:20px;
	line-height: 30px;
}
h5 {font-size:18px;
	line-height: 28px;
}
h6 {font-size:16px;
	line-height: 26px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;	
	padding: 5px 0 15px 0;	
	margin: 0;	
	color: #403e3d;
	font-family: 'OpenSansBold', Arial, sans-serif;
}

/* Class and styles General ----------------------------*/


.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.text_right{
	text-align: right;
}
.text_left{
	text-align: left;
}
.center{
	text-align: center;
}

/* Info resalt --------*/

.info_resalt{	
	padding: 0;
}
.padding_sides{
	padding-left: 40px;
	padding-right: 40px;
}
.padding_left{
	padding-left: 40px;
}
.padding_right{
	padding-right: 40px;
}
.padding_top{
	padding-top: 50px;
}
.padding_bottom{
	padding-bottom: 50px;
}
.padding_top_mini{
	padding-top: 15px;
}
.margin_top{
	margin-top: 50px;
}
.button{
	width: auto;	
	border: 0;
	color: #fff !important;
	margin: 10px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;		
	font-weight: 600;	
	padding: 12px 25px;		
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
.button:hover{
	color: #fff !important;		
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

div.show-grid [class*="span"] {
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	background-color: #43402f;
	opacity: 0.5;
	margin-bottom: 20px;
	color: #fff;
	border-radius: 3px 3px 3px 3px;
	line-height: 40px;
	min-height: 40px;
	text-align: center;
}
.the-icons div a{
	line-height: 40px;
	padding: 0 0 0 10px;
}
.the-icons div:hover i{
	font-size: 28px;
}
.the-icons div i{
	padding-right: 10px;
}
ul li,
ol li{
	line-height: 30px;
}
dl,
dt{
	padding-bottom: 10px;
}


.btext h4 {margin:0;line-height:16px;color:#c30041;}
.btext p {margin:0 0 50px 0;}
.p_button {text-align:right;padding:6px 0 0 0;}
.p_button a.button {font-weight:bold;}

.center_title {line-height:120%;font-size:250%;color:#333;padding:50px 10% 0 10%; margin:30px 0 60px 0;text-align:center;letter-spacing:-1px;border-top:2px solid #ddd;}
.center_title.no_margin {margin:0 0 60px 0;}
.center_title.no_border {border:0;margin:0 0 40px 0;padding-top:60px;}

.promos {text-align:center;margin-bottom:25px;}
.promos li {display:inline;margin:0 40px;}
.promos li a {color:#666;font-size:18px;font-weight:bold;padding:115px 0 0 0;display:inline-block; width:108px;background: url("../img/iconos.gif") no-repeat;}
.promos li.more_sales a {background-position: -216px 0;}
.promos li.support a {background-position: -108px 0;}
.promos li.promotion a {background-position: -324px 0;}
.promos li.free a {background-position: -432px 0;}

/* Icons Resalts------------------------*/

.icons_resalts{
	position: absolute;
	top: 3%;
	color: #fff;
	font-size: 110px;
}
.icons_resalts.right{
	right: 5%;
}

/* Accordion ----------------------------*/

.accordion-heading i{
	margin-right: 10px;
}
.accordion-inner ul{
	margin: 0;
	list-style: none;
}
.accordion-inner ul li{
	border-bottom: 1px solid #eee;	
}
.accordion-inner ul li:last-child{
	border-bottom: 0;	
}
.accordion-inner ul li h6{
	padding-bottom: 0;
}
.support h5{
	padding-bottom: 10px;
}
.support h5 i{
	margin-right: 10px;
	color: #555;
}
.support ul{
	list-style: circle;
	margin-left: 20px;
}

.arrow_resalt{
	position: absolute;
	background: url("../img/arrow_resalt.png")no-repeat;
	width: 224px;
	height:99px;
	bottom: -80px;
	left: 3%;
}

/* Top ---------------------------------------------------------*/

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("../img/ui.totop.png") no-repeat left top;
}
#toTopHover {
	background:url("../img/ui.totop.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;	
}
#toTop:active, #toTop:focus {
	outline:none;
}


/* Tables Princing -----------------------------------------------*/

.item_table{	
	border: solid 1px #cdcdcd;		
	background-color: #fff;
	padding-bottom: 30px;
	margin-bottom: 30px;
	text-align: center;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.item_table:hover{
	margin-top: -5px;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;	
}
.head_table{		
	position: relative;	
	z-index: 5;
	text-align: center;
}
.head_table h1{	
	margin:0;
	font-size: 25px;
	line-height: 35px;
	padding: 10px 0;	
	background-color: #f9f9f9;	
	border-bottom: solid 1px #cdcdcd;		
}
.head_table h2{	
	font-size: 30px;
	line-height: 40px;
	margin: 0;
	padding: 30px 0;
}
.head_table h2 span{
	font-size: 20px;
	line-height: 30px;
}
.item_table .color{
	background-color: #f9f9f9;
}
.item_table ul{
	margin:0 0 30px 0;
}
.item_table ul li{
	list-style: none;
	border-top: 1px solid #eee;
	line-height: 40px;
	text-align: center;
	padding: 5px 0;
}
.item_table ul li i{
	color: #555;
	padding-right: 5px;
}
.item_table ul li:last-child{
	border-bottom: 1px solid #ddd;
}

/* Tables Princing Promotions -----------------------------------------------*/

.promotion_table{
	margin-top: -40px;
}
.promotion_table:hover{
	margin-top: -40px;
}
.promotion_table .head_table{		
	position: relative;	
	z-index: 5;
	text-align: center;
}
.promotion_table h2{
	color: #fff;
}
.promotion_table h2 span{
	color: #43402f;
}


/* ---------------------------------------------------------------------- */
/*	03 Structure
/* ---------------------------------------------------------------------- */

/* header ---------------------------------------------------------*/

header{	
	padding: auto 0;	
	position: relative;
}
header .container{
	position: relative;
}

.postion_info_head{
	position: absolute;	
	left: 0;
	width: 100%;
	height: 110px;
	bottom: 5px;	
}
.info_head{	
	background-color: #111;	
	background: rgba(1,1,1,0.9);
	padding: 10px 20px;
	max-width: 1130px;	
	z-index: 9;
	border-right: 1px solid #111;
	border-left: 1px solid #111;
	border-radius: 10px 10px 0 0;
}

.content_info{	
	background: #FFF;
	border-right: 1px solid #e3e1de;
	border-left: 1px solid #e3e1de;
	position: relative;
}

.info_title{
	padding: 50px 20px;
}

/*  Main Navigation -----------------------------------------*/


.logo {
	position: absolute; top: -20px;

}

.logo img{
	max-width: 100%;	
}
.nav_logo{			
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	padding: 20px 0 21px 0;	
	background: #111;	
}

.tinynav{ 
	display: none 
}
.sf-menu{	
	margin:0;
	float: right;		
	padding-top: 9px;	
}
.sf-menu ul{
	position:absolute;	
	list-style: none;
	top:-999em;
	width:170px;
	display:none;
}
.sf-menu > li{
	position: relative;
	float:left;	
	list-style: none;	
	line-height: 20px;
	margin:0 40px 0 0;
}

.sf-menu > li:last-child {	
	margin:0;
}
.sf-menu > li > a {
	text-decoration:none;
	display:block;
	font-size:18px;	
	font-weight: 600;
	color:#fff;	
}

.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:44px;  left:-28px; z-index:999;}
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
.sf-menu li.current,.sf-menu li:hover,.sf-menu li.sfHover{
	text-decoration:none;
}
.sf-menu li li a{
	display:block;
	margin:0;
	position:relative;
	text-decoration:none;
	font-size:12px;
	line-height:16px;
	color:#fff;
	overflow:hidden;
	padding:12px 15px;
	background: #111111;	
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
.sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{
	color:#1B1823;		
}
.sf-menu li li{
	float:none;
	position:relative;	
}
.sf-menu li li a:hover{		
	color: #fff;	
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:145px;top:0;}


/* Galley Carousel ------------------------------------*/

.flexslider .gallery li img{
	width: 100%;
	margin: 0;
}
.flexslider .gallery li{
	padding: 5px;
	max-width: 296px;
	background: #fff;
	border:solid 1px #cdcdcd;	
	text-align: left;	
}
.flexslider .gallery li .hover{
	position: relative;
	overflow: hidden;
}
.flexslider .gallery li .info{
	padding: 5px 2px;
	font-size: 14px;
}
.flexslider .gallery li .info i{
	float: right;
	padding: 5px 2px;
	color: #333;
	font-size: 15px;
}
.overlay{
	position: absolute;	
	left: 0;
	top: -400px;	
	width: 100%;
	height: 100%;	
	z-index: 1;
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
.flexslider .gallery li:hover .overlay{
	top: 0;
	cursor: pointer;	
	-webkit-transition: 0.3s all ease;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-ms-transition: 0.3s all ease;
	transition: 0.3s all ease;
}


/* Footer ----------------------------*/

footer{	
	background-color: #111;
	padding: 80px 0 0 0;	
	color: #fff;
	font-weight: 600;	
}
footer p{
	margin: 0;
	font-weight: normal;
}
footer h3{
	font-size: 18px;
	color: #fff;		
}
footer ul{
	margin: 0;
	list-style: none;
}
footer ul li{
	line-height: 40px;
	font-weight: normal;
}
footer ul li a{
	color: #ddd;
}
footer ul li a:hover{
	color: #fff;
}
footer .input-prepend{
	width: 100%;	
}
footer .input-prepend input{
	height: 30px;
	width: 82%;
}
footer .input-prepend{
	margin:6px 0 12px 0;
}
footer .input-prepend .add-on{
	background: #ddd;
	height: 30px;
}
footer .input-prepend .add-on i{	
	color: #222;
	vertical-align: middle;
}
footer .button{
	border-radius: 0;
	margin-top: 3px;
	padding: 0px auto;
}
.contact_footer li i{
	margin-right: 10px;
}

footer .title_footer h1{
	color: #fff;
	font-size: 200%;
}
footer .title_footer h1 span{	
	font-style: italic;
}
footer .divisor{
	margin: 30px 0 25px 0;
	background-color: #333;
	width: 100%;
	height: 1px;
}
.coopring{	
	margin-top: 60px;
	background-color: #222;
	padding: 20px 0;		
	text-align: center;
}


/* Social   ----------------------------*/

.social li{
	-webkit-transition: 0.2s all ease;
	-moz-transition: 0.2s all ease;
	-o-transition: 0.2s all ease;
	-ms-transition: 0.2s all ease;
	transition: 0.2s all ease;
}
.social li span{
	background: #555;
	margin-right: 15px;	
	-webkit-transition: 0.2s all ease;
	-moz-transition: 0.2s all ease;
	-o-transition: 0.2s all ease;
	-ms-transition: 0.2s all ease;
	transition: 0.2s all ease;
}
.social li span i{
	padding: 3px;
	color: #fff;
}
.social li:hover{
	margin-left: 5px;
	-webkit-transition: 0.2s all ease;
	-moz-transition: 0.2s all ease;
	-o-transition: 0.2s all ease;
	-ms-transition: 0.2s all ease;
	transition: 0.2s all ease;
}
.social li:hover span{
	-webkit-transition: 0.2s all ease;
	-moz-transition: 0.2s all ease;
	-o-transition: 0.2s all ease;
	-ms-transition: 0.2s all ease;
	transition: 0.2s all ease;
}
.social .facebook:hover span{
	background: #3B5998;
}
.social .twitter:hover span{
	background: #3C8FC9;
}
.social .linkedin:hover span{
	background: #3399CC;
}
.social .github:hover span{
	background: #000;
}
