@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");
@import url("bootstrap/bootstrap-responsive.css");
/*Skins*/
@import url("skins/default.css");
/*jquery.fancybox-1.3.1.css  - Lightbox*/
@import url("../js/fancybox/jquery.fancybox-1.3.1.html");
/*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");


/* ---------------------------------------------------------------------- */
/*	02 Basic Elements
/* ---------------------------------------------------------------------- */

/* Standar Styles --------------------------------------------------------*/

body{
	font-size: 16px;	
	font-family: 'Open Sans', sans-serif;
	line-height:26px;
	color:#666;
	position: relative;
	font-weight: normal;	
	background-color: #f6f4f1;
}
a{
	color: #43402f;
}
a:hover{
	text-decoration: none;
}
p{
	margin:0 0 20px 0;
	padding: 0;	
	font-weight: 300;	
}

h1 {
	font-weight: 700;
	font-size:34px;
	line-height: 44px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FFFFFF;
	font-family: 'OpenSansBold', Arial, sans-serif;
}
h2 {
	font-weight: 700;
	font-size:34px;
	line-height: 44px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FF6908;
	font-family: 'OpenSansBold', Arial, sans-serif;
}
h3 {
	font-weight: 700;
	font-size:20px;
	line-height: 30px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FFFFFF;
	font-family: 'OpenSansBold', Arial, sans-serif;
}
h4 {
	font-weight: 700;
	font-size:20px;
	line-height: 30px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FF6908;
	font-family: 'OpenSansBold', Arial, sans-serif;
}
h5 {
	font-weight: 700;
	font-size:18px;
	line-height: 28px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FF6908;
	font-family: 'OpenSansBold', Arial, sans-serif;
	}
h6 {
	font-weight: 700;
	font-size:16px;
	line-height: 26px;
	padding: 5px 0 15px 0;
	margin: 0;
	color: #FF6908;
	font-family: 'OpenSansBold', Arial, sans-serif;
	}
/* Class and styles General ----------------------------*/

.clearfix{
	width:1px;
	height:1px;	
	display:block;
	clear:both;
	content:" , ";
}
.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: 50px 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;
	margin: 10px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-bottom: 3px solid #222;
	border-radius: 5px;		
	font-weight: 600;	
	padding: 12px 25px;		
	text-shadow: 0 -1px 0 #000;
	-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;		
	-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;
}

/* 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 img{
	max-width: 100%;	
}
.nav_logo{
	position: relative;
	top: 0;
	width: 100%;
	z-index: 999;
	padding: 20px 0;
	background: #111;
}
.tinynav{ 
	display: none 
}
.sf-menu{	
	margin:0;
	float: right;		
	padding-top: 7px;	
}
.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:17px;	
	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: 50px;
	line-height: 50px;
}
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;
}
.adresse{
	margin:0 0 20px 0;
	padding: 0;
	font-weight: normal;
	font-size: 12px;
}

/* 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;
}

/* Comments -------------------------------------------*/

.comments{
	position: relative;

}
.info_comments{
	position: absolute;
	left: 0;
	top: 0;
	width: 86%;
	height: 80%;
	background: #111;
	padding:7.5% 7% 0 7%;
	background: rgba(1,1,1,0.9);
}
.comments_carousel p{			
	color: #fff;
}
.comments_carousel h3, .comments_carousel h6{
	color: #fff;
}
.comments_carousel h6{
	padding: 0;
}
.comments_carousel a:hover{
	text-decoration: underline;
}
.white h1{
	color: #fff;
	text-align: center;
	margin-bottom: 30px;
}
.info_comments.white, .white h4{
	color: #fff;
}

/* Drivers -----------------------------------------------*/

.drivers li i{
	margin-right: 15px;
	font-size: 12px;
}
.drivers li{
	line-height: 40px;
}


/* Crumbs  ----------------------------*/

.crumbs{
	background: #f7f5f2;
	padding: 10px 20px;
	border-bottom: 1px solid #e3e1de;
}
.crumbs ul{
	margin: 0;
	list-style: none;
}
.crumbs ul li{
	display: inline-block;
	padding-right: 12px;
	line-height: 20px;
	font-weight: 400;
	font-size: 15px;
}
.crumbs ul li a:hover{
	text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/*	 0.6 Version 1024px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 1024px) {
	

	.input-prepend input{
		width: auto;
	}
	.info_head{
		max-width: 900px;
	}
	.info_comments{				
		height: 82.5%;
	}
	footer .title_footer h1{		
		font-size: 40px;
		line-height: 50px;
	}


}

/* ---------------------------------------------------------------------- */
/*	 0.7 Version 900px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 900px) {
	

	.sf-menu > li > a {		
		font-size:15px;					
		padding:0 20px 0 0;
	}

	
}

/* ---------------------------------------------------------------------- */
/*	0.8 Mobile Version 767px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 768px) {

	body{
		text-align: center;
	}
	.padding_right, .padding_left{
		padding: 0;
	}
	.content_info{
		padding: auto 20px;
	}
	#menu{
		display: none;	
	}
	.tinynav {
		display: inline;
		width: 100%;				
		position:relative;
		top: 1px;
		right: 20px;
		border-radius: 0;
		border: 1px solid #dbdbdb;
		height: 30px;	
	} 
	.logo img{		
		padding: 0 0 0 20px;
		text-align: left;
	}
	.nav_logo{	
		padding:10px 0;	
		text-align: left;			
	}
	.nav_logo .span9{
		position: absolute;
		top: 0;
		width: 50%;
		right: 0;
	}

	.info_resalt{
		padding: 50px 20px;
	}

	.item_table{
		max-width: 300px;
		margin: 0 auto;
		margin-bottom: 30px;
	}


	.rslides {	  
	  height: 500px;	  
	  background: #222;
	}
	.info_slide{	  
	  width: 90%;
	  left: 5%;	  
	}
	.image_slide{
	  max-width: 1000px;
	  margin: 0 auto;
	  text-align: center;
	  margin-top: 50px;
	}
	.info_slide h1{
	font-size: 30px;
	line-height: 40px;
	}
	.info_slide p{	  
	  font-size: 20px;
	  line-height: 30px;	  
	}

	.info_comments{		
		width: 86%;
		height: 94%;
	}
	.info_comments img{
		margin: 30px 0;
	}

	footer .title_footer h1{		
		font-size: 30px;
		line-height: 40px;
	}
	footer{
		padding-top: 50px;
	}
	.coopring{
		margin-top: 30px;
	}
	.support ul{
		list-style: none;
		margin-left: 0;
	}

	.icons_resalts{
		display: none;
	}
	.white{
		overflow: auto;
	}

}

/* ---------------------------------------------------------------------- */
/*	 0.9 Version 685px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 685px) {	
	


}

/* ---------------------------------------------------------------------- */
/*	 10 Version 600px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 600px) {
	


}


/* ---------------------------------------------------------------------- */
/*	 11 Version 480px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {
	
	.info_comments{		
		width: 86%;
		height: 95%;
	}

}


/* ---------------------------------------------------------------------- */
/*	12 Mobile Version 380px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 380px) {

	.info_comments{				
		height: 96.5%;
	}
	.logo img{
		max-width: 30%;	
	}

}

/* ---------------------------------------------------------------------- */
/*	13 Mobile Version 320px
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 320px) {

	.table{
		width: 90%;
		max-width: 90%;
	}

}