@charset "utf-8";

/* ============================== */
/* 
	
*/
/* ============================== */	

/* ---------------------- 
	Stylesheet Guide
-------------------------

01. Import styles
	-  bootstrap.css  - include resetes ( Media querys, grid-responsive,layout).
	-  bootstrap-responsive.css		
	-  jquery.fancybox-1.3.1.css  - Lightbox
	-  animate.css  - Animations in css3
	-  font-awesome.min.css  - Incons
	-  Google Fonts  - Open sans	
	
02. Basic Elements
	-  Standar Styles	
	-  Class and styles Generals
	-  Titles
	-  Divisor
	
0.3.  General Structure
	-  Logo
	-  Nav 
	-  Profile
	-  Contens Info
	-  About
	-  Social
	-  Portfolio
	-  Blog
	-  Single Blog
	-  Contact - Footer
	-  Box
	-  Services	
	-  Carousel		
	-  Color Changer		
	

0.4.	Layout for 1024px Version

0.5.	Layout for 900px Version

0.6.	Layout for 767px mobile version

0.7.	Layout for 480px 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");
/*jquery.fancybox-1.3.1.css  - Lightbox*/
@import url("../js/fancybox/jquery.fancybox-1.3.1.css");
/*Animations*/
@import url("animations/animate.css");
/*flipshow*/
@import url("flipshow/flipshow.css");
/*Icons Font-Awesome*/
@import url("icons/font-awesome.min.css");
/*Google Fonts*/
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,300,700,800");


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

body{
  	margin: 0;
 	font-size: 16px;	
	font-family: 'Open Sans', sans-serif;
	line-height:28px;	
	position: relative;
	font-weight:normal;	
	background-color: #fff;
	color: #626262;
}
a{
	color: #000;
}
a:hover{
	text-decoration: none;		
}
p{
	margin:0 0 20px 0;
	padding: 0;
}
h7 {font-size:36px;
	line-height: 34px;
}

h1 {font-size:24px;
	line-height: 34px;
}
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:14px;
	line-height: 24px;
}
h1, h2, h3, h4, h5, h6, h7{
	font-weight: bold;
	padding: 5px 0 15px 0;		
	color: #000;
	font-family: Georgia, Times New Roman, Times, 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;
}
.center{
	text-align: center;
}
.padding_top{
	padding-top: 50px;
}
.margin_top{
	margin-top: 50px;
}
strong{
	color: #333;
}
.relative{
	position: relative;
}
.button{
	width: auto;
	background-color: #303030;
	border: 0;
	color: #fff;
	border-left: 5px;
	padding: 15px 25px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.button:hover{
	color: #fff;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
ul{
	margin:0;
}
ul li{
	list-style: none;
}
.tinynav{
	display: none;
}
.border_left{
	border-left: 1px solid #cdcdcd;
	padding: 0 35px 0 ;
}
.border_right{
	border-right: 1px solid #cdcdcd;
	padding: 0 35px 0 0;
}
.border_top{
	border-top: 1px solid #cdcdcd;
}
.border_bottom{
	border-bottom: 1px solid #cdcdcd;
}
.lead{	
	line-height: 45px;
	font-size: 25px;
	margin-bottom: 30px;
	color: #000;
}
.lead span{
	border-bottom: 1px solid #dedede;
	padding-bottom: 5px;
}

/* Titles ------------------*/

.titles img{
	display: inline-block;
	margin-top: -15px;
	margin-right: 10px;
}
.titles h1{		
	font-size: 45px;
	line-height: 55px;
	padding-top: 15px;
}

/* Divisor ------------------*/

.divisor{
	background-color: #e2e2e2;
	width: 100%;
	height: 1px;
	margin: 60px 0 30px 0;
}


/* ---------------------------------------------------------------------- */
/*	0.3 General Structure
/* ---------------------------------------------------------------------- */

/* Logo-------------------------------*/

.logo h1{
	font-size: 40px;
	font-weight: bold;
	line-height: 30px;	
	padding: 0;
	color: #fff;
}
.logo h1 small{
	font-style: italic;
	margin-top: 10px;
	font-size: 18px;
	display: block;
}

/* nav-------------------------------*/

nav{	
	width: 100%;
	padding: 10px 0;
	background: #303030;
	z-index: 999;
	box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	-khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	-ms-box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	-o-box-shadow: 0 1px 5px rgba(0,0,0,0.33);
	transition: all 0.35s ease;
	-khtml-transition: all 0.35s ease;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-ms-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;		
}
#menu{
	text-align: right;
	margin: 0;
	padding-top: 5px;
}
#menu li{	
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 10px;
	background: #545454;
	border: 2px solid #777;
	text-align: center;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
#menu li:hover{	
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
#menu li:last-child{
	margin: 0;
}
#menu li a{
	color: #fff;
	font-size: 13px;
}
#menu li a i{	
	font-size: 1.5em;
	display: block;
	width: 100%;
	margin-bottom: 5px;
}

/* Profile-------------------------------*/

.information li{
	line-height: 50px;	
	border-bottom: 1px solid #dedede;
	color: #222;
}
.information li:first-child{	
	border-top: 1px solid #dedede;
}
.information li span{
	color: #555;
	margin-left: 20px;
	font-size: 14px;
}


/* Contens Info -------------------------------*/

.info_area{
	padding: 30px 0;
}
.color_one{
	background: rgba(217,217,217,0.1);
	background: url("../img/bg/bg.jpg");
	border-bottom: 1px solid #e2e2e2;
	border-top: 1px solid #e2e2e2;
}


/* About -------------------------------*/

.me img{
	padding: 5px;
	border:solid 1px #cdcdcd;
}
.item_info{
	background-color: #f4f4f4;
	padding:10px 20px;
	border: 1px solid #cdcdcd;
}
.item_info i{
	float: left;	
	margin-top: 8px;
}
.item_info h4{
	padding: 0 0 0 20px;
	margin: 0;
}
.item_info p{
	margin:0 0 0 20px;
	color: #000;	
	font-style: italic;
}

/* Social-------------------------------*/

.social{
	margin: 0 auto;
	display: inline-table;
	margin-top: 30px;
}
.social li{
	float: left;
	margin-right: 10px;
	width: 40px;
	height: 40px;
}
.social li a i{
	font-size: 2em;
}

.download{
	margin-top: 8px;
}
#button_download{
	width: auto;
	background-color: #000;
	border: 0;
	color: #fff;
	border-left: 5px;
	padding: 10px 20px;
}


/* Portfolio ----------------------------*/

.item{
	position: relative;
	overflow: hidden;
	border: solid 1px #dedede;
	padding: 3px;
	margin-bottom: 30px;
	border-bottom: double 5px  #e3e3e3; 
}
.item:hover{
	cursor: pointer;
}
.item img{
	background: rgba(255, 255, 255, .5);
    opacity: 0.7;
    -webkit-transition: opacity .25s ease-in;
    -ms-transition: opacity .25s ease-in;
    -moz-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
}
.item:hover img{
	opacity: 1;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item:hover .info{
	bottom: 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item .info{
	position: absolute;
	background: #fff;
	left: 0;
	bottom: -40px;
	padding: 10px 5px;
	width: 100%;
	text-align: center;	
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item .info p{
	font-size: 13px;
	margin-bottom: 6px;
}
.item .info h5{
	margin: 0;
	padding: 0;
	line-height: 20px;
}
.item .info .button{
	font-size: 13px;
	padding: 5px 10px;
}
.technologies{
	margin: 20px 0 35px;
}
.technologies i{
	font-size: 28px;
	margin-right: 10px;
	color: #403e3d;
}
.details_portfolio{
	padding:0 2%;
	width: 96%;
}
.details_portfolio ul li{
	line-height: 30px;
}
.details_portfolio ul li i{
	margin-right: 10px;
}
.details_portfolio h3{
	padding: 0 0 10px 0;
	border-bottom: 1px solid #dedede;
}
.details_portfolio img{
	opacity: 1;
}
.carousel{
	margin-bottom: 0;
}
.carousel-control{
	display: none;
}


/* Blog ----------------------------*/

.item_blog{
	position: relative;
	overflow: hidden;
	border: solid 1px #dedede;
	padding: 3px;
	margin-bottom: 30px;
	border-bottom: double 5px  #e3e3e3; 
}
.item_blog:hover{
	cursor: pointer;
}
.item_blog img{
	background: rgba(255, 255, 255, .5);
    opacity: 0.7;
    -webkit-transition: opacity .25s ease-in;
    -ms-transition: opacity .25s ease-in;
    -moz-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
}
.item_blog:hover img{
	opacity: 1;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item_blog:hover .info{
	bottom: 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item_blog .info{
	position: absolute;
	background: #fff;
	left: 0;
	bottom: -44px;
	padding: 15px 5px 20px 5px;
	width: 100%;
	text-align: center;	
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item_blog .info p{
	font-size: 13px;
	margin-bottom: 10px;
}
.item_blog .info h5{
	margin: 0;
	padding: 0;
	line-height: 20px;
}
.item_blog .info .button{
	font-size: 13px;
	padding: 5px 10px;
}


/* Single Blog ------------------------------*/

.details_blog{	
	width: 98%;
}
.details_blog img{
	margin-bottom: 20px;
	width: 100%;
}
.single h1{
	margin: 0;
	padding: 0;
}
.single{
	text-align: center;
	padding: auto 25px;
}
.meta{
	margin: 0 0 30px 0;
	list-style: none;	
	border-bottom: 1px solid #dedede;
	padding: 10px 0;
}
.meta li{
	display: inline-block;
	font-style: italic;
	border-right: 1px solid #cdcdcd;
	padding:0 10px 0 6px;
	margin-right: 5px;
}
.meta li:last-child{
	border: 0;
}


/* Contac - Footer -----------------------------------------------------*/

.down{
	text-align: center;
	background: #303030;
	padding: 20px 0;
}
.down p{
	margin: 0;
	color: #fff;
}
footer .social{
	padding-bottom: 50px;
}
footer .social li{
	margin: 0 80px;
	text-align: center;
}
footer .social li a{	
	text-align: center;
}
footer .social li i{
	font-size: 4em;
	text-align: center;
}
footer .button{
	padding: 25px 40px;
	font-size: 18px;
}
footer .button i{
	margin-right: 10px;
	font-size: 1.3em;
	margin-top: 10px;
}


/*Box ------------------------------------*/

.box{
	z-index: 1;
	color: #868686;
	font: 14px/21px Arial,sans-serif;
	padding: 32px 0;
	border: 1px solid #e3e3e3;
	border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	background: #fff;
	overflow: auto;
	border-bottom: double 5px  #e3e3e3; 
}
.item_box{
	min-height: 80px;
	margin-bottom: 13px;
	padding: 15px 30px 0 30px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item_box:hover{
	background-color: #f9f9f9;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all .1s linear;
	transition: all .1s linear;
}
.item_box .num{
	float: left;
	top: 2px;
	width: 19px;
	height: 19px;
	color: #fff;
	font: 11px/19px "Avenir LT W01 95 Black","Avenir LT W01 85 Heavy","Avenir LT W01 55 Roman",Arial,sans-serif;
	text-align: center;
	border-radius: 99em;
	-khtml-border-radius: 99em;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	-ms-border-radius: 99em;
	-o-border-radius: 99em;
}
.item_box aside{
	float: right;
	width: 90%;
	display: block;
}
.item_box h5{
	font: 18px/22px "Avenir LT W01 65 Medium","Avenir LT W01 55 Roman",Arial,sans-serif;
	margin: 0 0 10px;
	padding: 0;
	line-height: 16px;
}
.item_box h5 span{
	color: #000;
	font-size: 12px;
	border-left: 1px solid #000;
	margin-left: 10px;
	padding-left: 10px;
}
.item_box .donwload{
	border-left: 1px solid #000;
	margin-left: 10px;
	padding-left: 10px;
}
.titles_short{
	margin-bottom: 10px;
}
.titles_short img{
	float: left;
	margin-right: 15px;
}
.titles_short h3{
	padding-bottom: 5px;	
}


/* Services animations -------------------------------------*/

.service-process{
	background-image:url('../img/service-bg.png');
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;	
}
.service-process a{
	color: #5c5c5c;
}
@media(max-width:979px){
	.service-process{
		background-image:none}
}
.service-process .thumbnail,.service-process .thumbnail:hover{
	border:0 none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none
}
.caption-head{
	height:200px;
	width:200px;	
	background-color:#fff;
	border:6px solid #e6e6e6;
	-webkit-border-radius:500px;
	-moz-border-radius:500px;
	border-radius:500px;
	margin-top: -20px;
	margin: 0 auto;
	text-align: center;
	-webkit-transition:background-color .3s ease;
	-moz-transition:background-color .3s ease;
	-o-transition:background-color .3s ease;
	transition:background-color .3s ease
}
.caption-head .caption-icon{
	margin-top:45px;	
}
.caption-head .caption-title span{
	display: block;
	font-size: 16px;
}
.caption-head .caption-icon:hover,.caption-head .caption-title:hover{
	cursor:pointer
}
.caption-head:hover{	
	cursor:pointer;
	-webkit-transition:background-color .3s ease;
	-moz-transition:background-color .3s ease;
	-o-transition:background-color .3s ease;
	transition:background-color .3s ease
}
.caption-head:hover>.caption-icon{
	-webkit-animation:slideFromBottom 300ms ease;
	-moz-animation:slideFromBottom 300ms ease;
	-o-animation:slideFromBottom 300ms ease;
	animation:slideFromBottom 300ms ease
}
.caption-head:hover>.caption-title{
	-webkit-animation:slideFromBottom 500ms ease;
	-moz-animation:slideFromBottom 500ms ease;
	-o-animation:slideFromBottom 500ms ease;
	animation:slideFromBottom 500ms ease
}

@-webkit-keyframes slideFromBottom{
	from{
		-webkit-transform:translateY(150%) scale(0.5);
		opacity:0
}
to{
	-webkit-transform:translateY(0%) scale(1);
	opacity:1
 }
}
@-moz-keyframes slideFromBottom{
	from{
		-moz-transform:translateY(150%) scale(0.5);opacity:0
		}
		to{
			-moz-transform:translateY(0%) scale(1);
			opacity:1
			}
	}
	@-ms-keyframes slideFromBottom{
		from{
			-ms-transform:translateY(150%) scale(0.5);
			opacity:0
		}
		to{
			-ms-transform:translateY(0%) scale(1);
			opacity:1
		}
}



/*Carousel ------------------------------------*/

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
}
.nbs-flexisel-ul {
    position:relative;
    width:9999px;
    margin:0px;
    padding:0px;
    list-style-type:none; 
}
.nbs-flexisel-inner {
    overflow:hidden;
    width:100%; 
}

.nbs-flexisel-item {
    float:left;
    margin:0px 20px;
    max-width: 362px;
    padding:0px;    
    position:relative;    
}
.nbs-flexisel-item:first-child,
.nbs-flexisel-item:last-child {
    margin: 0 5px;
}

/*Navigation Carousel ---------------------------------*/

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    width: 22px;
    height: 22px; 
    position: absolute;
    cursor: pointer;
    z-index: 100;
    opacity: 0.8;
    top: -50px;
    right: 0;
}
.nbs-flexisel-nav-left:hover,
.nbs-flexisel-nav-right:hover {
    opacity: 1;
}
.nbs-flexisel-nav-left {
    right: 30px;
    background: url("../img/button-previous.png") no-repeat;
}
.nbs-flexisel-nav-right {
    right: 5px;
    background: url("../img/button-next.png") no-repeat;
}


/* COLOR CHANGER -------------------------------*/

#colorchanger { 
	position: fixed;
	left: 0;
	top: 210px; 
	background: #fff;
	padding: 10px 10px 10px 7px;	
	border: 1px solid #dedede;
	border-left: 0;
}
.colorbox { width:20px; height:20px; border:1px solid #050505;  margin:5px; cursor:pointer; display:block; }
.colordefault { background-color:#1abc9c; }
.colorb { background-color:#8551e1; }
.colorc { background-color:#ec555e; }
.colord { background-color:#e47a00; }
.colore { background-color:#0099ff; }
.colorf { background-color:#FFCC00; }
.colorg { background-color:#87bd65; }



/* ---------------------------------------------------------------------- */
/*	0.4 1024px Version
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 1024px) {
	
	.fc-slideshow {		
		width: 200px;
		height: 200px;			
	}
	
}

/* ---------------------------------------------------------------------- */
/*	0.5 900px Version
/* ---------------------------------------------------------------------- */

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


	nav{
		padding: 0;
	}
	#menu{
		display: none;	
	}
	.menu_responsive{
		position: absolute;
		top: 32px;	
		right: 25px;
	}
	.tinynav {
		display: inline;
		margin:0 0 10px 0;
		height: 35px;	
		right: 25px;
		width: 36%;	
		position: absolute;
	} 	
	
	
	.fc-slideshow {		
		width: 150px;
		height: 150px;			
	}
	/* Logo-------------------------------*/

	.logo h1{
		font-size: 30px;
		line-height: 35px;	
		padding: 12px 0 12px 25px;
	}
	.logo h1 small{		
		font-size: 16px;
		line-height: 16px;
		margin: 5px 0 0 0;
	}
	.button{
		display: block;
		margin-bottom: 20px;
		text-align: center;
	}
	#colorchanger{
		display: none;
	}
	.titles h1{
		font-size: 28px;
	}
}


/* ---------------------------------------------------------------------- */
/*	0.6 Mobile Version
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
	
	.fc-slideshow {		
		width: 270px;
		height: 270px;			
	}
	
	.border_left,
	.border_right{
		border:0;
		padding: 0;
	}
	.info_area{
		padding: 100px 25px;
	}

	.item img{
		width: 100%;
	}
	.fc-slideshow{
		margin-top: -50px;
	}

	footer .social li{
		margin: 0 40px;			
		margin-bottom: 30px;	
	}
	footer .social li:first-child{
		margin: 0 40px auto 0;			
	}
	footer .social li i{
		font-size: 3em;
	}
	footer .social{
		padding-bottom: 0;
	}
	.down{
		padding: 15px 25px;
	}
	
	#portfolio .span3.item{
		max-width: 480px;
		margin: 20px auto;
	}
	.item .info{		
		bottom: -50px;		
	}
	.item .button{
		margin-bottom: 0;
	}

	.item_blog .info{
		bottom: -50px;
	}
	.item_blog .button{
		margin-bottom: 0;
	}

}


/* ---------------------------------------------------------------------- */
/*	0.7 480px Mobile Version
/* ---------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 480px) {
	
	.menu_responsive{
		position: absolute;
		top: 26px;	
		left: 0;
	}

	/* Logo-------------------------------*/

	.logo h1{
		font-size: 20px;
		line-height: 25px;	
		padding: 12px 0 12px 25px;
	}
	.logo h1 small{		
		font-size: 13px;
		line-height: 13px;
		margin: 5px 0 0 0;
	}

	footer .social li{
		margin: 0 20px;
		margin-bottom: 30px;		
	}
	footer .social li i{
		font-size: 2em;
	}

	
}