/******** LAYOUT & GENERIC CLASSES ********/

/* basic elements styling or re-styling (boostap) */
body {padding-bottom: 40px;}
#content {background-color: #fff;}
#main-content {position: relative;}
a, a:visited, a:active {outline: none!important;}
a:hover {text-decoration: none;}
h1, h2, h3, h4, h5, h6 {color: #545253; font-weight: normal;}
h1 {font-size: 50px; margin-top: 0; margin-bottom: 10px; line-height: 55px;}
h2 {margin-bottom: 20px;}
hr {border-top: 1px solid #eee;border-bottom: 1px solid #fcfcfc;}
#footer {padding-top: 20px; text-align: center; margin-top: 5px; }
.well {border-color: #ccc; margin-bottom: 30px; padding: 10px 30px;}
.well h3 {font-size: 30px;}
.icon-btn {display: inline-block; padding: 6px 0 0 10px; border-radius: 5px; height: 36px; width: 33px; margin-right: 5px;background-color: #0088CC;}
.icon-btn,.btn-primary {background-image: none; border: none; text-shadow: none; box-shadow: none;}
.tooltip.in {opacity: 1; filter: alpha(opacity=100);}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #005580;
  *background-color: #005580;
}

/* nav */
#sidebar.sbleft {margin-left: 0;}
.sidebar-nav {padding: 10px 0;}
#resumenav.affix {top: 30px; width: 235px; overflow: hidden; padding-left: 30px;}
#resumenav a {text-transform: uppercase; text-shadow: none; padding: 5px 30px; margin-left: -30px; margin-right: 0;}

/* tools */
.tools {position: absolute; top: 1px; right: -7px; padding-top: 30px;}
.tools a {display: block; width: 10px; height: 10px; opacity: .7; filter: alpha(opacity=70); float: left; padding: 10px; margin-left: 20px; text-align: center;}
.tools a:hover {opacity: 1; filter: alpha(opacity=100);}
.dark .tools .glyphicons i:before {color: #fff;}

/* sections */
.section.first-section {padding-top: 30px; margin-top: 0;}
.section {margin-top: 70px; margin-bottom: 20px;}
.section .section-title {display: inline-block; margin: 0 30px 30px 0; padding: 5px 30px;}
.section .section-title .glyphicons {height: 13px; font-weight: normal;}
.backgrounded .section .section-title{ margin-left: -30px;}

/* personal info block */
#personal-information h2 {margin-bottom: 10px;}
.infoline {padding: 0; overflow: hidden; border-bottom: 1px solid #eee; border-top: 1px solid #fcfcfc; padding-top: 15px; padding-bottom: 15px;}
.infoline.first {border-top: none!important;}
.infoline.last {border-bottom: none!important;}

/* helpers */
.clear {display: block; clear: both; width: 100%; height: 0; line-height: 0;}
.hidden {display: none;}
.spacer {display: block; height: 10px;}
.printonly {display: none;}

/* blog & portfolio blocks */
.blogitem, .portfolioitem {position: relative; height: 270px; margin-bottom: 30px;}
.blogitem h3 {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); color: #fff; display: block; text-align: center; padding: 4px 10px 6px; margin-bottom: 0; font-size: 15px; line-height: 20px;}
.portfolioitem h3 { margin-top: 5px; margin-bottom: 21px; color: #fff; text-align: center; font-size: 20px; line-height: 25px;}
.blogitem .blogitem-date {position: absolute; top: 0; left: 0; width: 25px; height: 35px; padding: 5px 10px; background: rgba(0,0,0,.5); color: #fff; text-align: center;}
.blogitem .blogitem-date .month, .blogitem .blogitem-date .day {font-weight: bold; display: block; font-size: 12px; line-height: 16px;}
.blogitem .blogitem-date .day {font-size: 16px;}
.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 20px 30px; font-size: 16px;}
.blogitem .blogitem-hoverinfo {padding: 30px;}
.portfolioitem .portfolioitem-hoverinfo p {opacity: .9;filter: alpha(opacity=90);}
.blogitem .blogitem-actions, .portfolioitem .portfolioitem-actions {margin-top: 30px;text-align: center;}
.blogitem .blogitem-actions a, .portfolioitem .portfolioitem-actions a{margin: 0 10px; padding: 3px 0 18px 8px; height: 20px; display: inline-block; width: 33px;}
.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {color: #fff;}
.blogitem-content .pager, .portfolioitem-content .pager { margin-top: 30px;}
.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {background-color: #0088CC}
#portfolio-back, #blog-back {margin-bottom: 30px;}
.blogmeta {font-size: 12px;}
.blogmeta div {display: inline-block; margin-right: 10px;}
.blogmeta .glyphicons {padding: 7px 2px 5px 15px;}
.blogmeta .glyphicons i:before{font-size: 11px; line-height: 16px; color: #999;}
#portfolio #portfolio-filters {margin-top: -2px; margin-bottom: 28px;}
.blogitem-content h2, .portfolioitem-content h2 {margin-top: 30px;}

/* contact block */
.form-horizontal .control-label {width: 80px;}
.form-horizontal .controls {margin-left: 100px;}
.add-on .glyphicons {padding: 7px 0 5px 15px;}
.add-on .glyphicons i:before{font-size: 15px;}

/* testimonials block */
.testimonial {margin-bottom: 10px; overflow: hidden;}
.testimonial small {margin-top: 10px;}
.testimonial .media .pull-left {margin-right: 15px;}

/* skills block */
.skills .label {padding: 5px 10px 7px; margin: 0 10px 14px 0; font-size: 14px; font-weight: normal;}
.skills h2.section-title {margin-bottom: 10px;}
.skills h3 {margin-bottom: 20px;}

/* hobbies block */
.hobbies .label {padding: 10px 15px; margin: 0 10px 14px 0; font-size: 14px; font-weight: normal; color: #fff;}
.hobbies .label .glyphicons {color: #fff;}
.hobbies .label.tips {cursor: pointer;}

/* Author block */
.author {margin-bottom: 30px; overflow: hidden;}
.author h1, .author h2  {display: inline-block;}
.author h2 {margin-top: 0;}

/* timeline blocks */
.timeline-item-trigger span i:before {background-color: #0088CC; display: inline-block; border: 6px solid #0088CC; border-radius: 50%; font-size: 12px;}
.timeline {background: url(images/timeline.gif) 109px 0 repeat-y;}
.dark .timeline {background-image: url(images/timelinedark.gif);}
.timeline-item {position: relative; margin-bottom: 30px; overflow: hidden;}
.timeline-item-date {float: left; width: 85px; margin-top: 31px;}
.timeline-item-trigger {float: left; width: 50px; text-align: center; padding-top: 10px;}
.timeline-item-content {float: left; width: 658px; margin-left: 15px; padding: 15px 30px; border: 1px solid #ccc; position: relative; border-radius: 5px; background-color: #f5f5f5;}
.timeline-item-trigger i {cursor: pointer;}
.timeline-item-trigger span i:before {width: 12px; height: 12px;}
.timeline-item-trigger span {display: block; margin-left: 13px; height: 15px; overflow: hidden; margin-top: 21px;}
.timeline-item-title {cursor: pointer;}
.timeline-item-content h3{font-size: 25px; line-height: 30px;}
.timeline-arrow {display: block; position: relative;}
.timeline-arrow i {display: block; background: #f9f9f9; position: absolute; height: 10px; width: 10px; top: 37px; left: -6px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; left: 145px; z-index: 10; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=-45); }
.timeline-item h4 {margin-bottom: 10px;}

/* Isotope */
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }


/******** DARK SKIN ********/

body.dark {color:#eee; background: #1b1b1b;}
.dark #content {background: #1B1B1B;}
.dark .muted {color: #ccc;}
.dark .tooltip-inner {background: #fff; color: #000;}
.dark .tooltip.top .tooltip-arrow {border-top-color: #fff;}
.dark .tooltip.right .tooltip-arrow {border-right-color: #fff;}
.dark .tooltip.left .tooltip-arrow {border-left-color: #fff;}
.dark .tooltip.bottom .tooltip-arrow {border-bottom-color: #fff;}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {color: #fff;} 
.dark hr {border-top: 1px solid #111;border-bottom: 1px solid #222;}
.dark .progress {background: #000; background-image: linear-gradient(to bottom, #191919, #111)}
.dark .alert-danger h4, .dark .alert-error h4{color: #B94A48;}
.dark .alert-success h4 {color: #468847;}
.dark .input-append .add-on, .dark .input-prepend .add-on{color: #222;}
.dark .pager li > a, .dark .pager li > span {background: #111; border-color: #000;}
.dark .pager li > a:hover {background-color: #000;}
.dark legend {color:#eee;}
.dark .infoline { border-bottom: 1px solid #111; border-top: 1px solid #222;}
.dark .well {background: #222; border-color: #000;}
.dark .timeline-item-content {border-color: #000;background-color: #222;}
.dark .timeline-arrow i {background: #222; border-left: 1px solid #000; border-top: 1px solid #000;}
.dark .nav-pills > li > a:hover {background: #333;}
.dark .skills .label, .dark .hobbies .label {background: #333; color: #fff;}
.dark .blogmeta .glyphicons i:before {color: #ccc;}

/**** CSS TRANSITIONS ****/ 

* {
-webkit-transition-duration: 0.20s;
   -moz-transition-duration: 0.20s;
    -ms-transition-duration: 0.20s;
     -o-transition-duration: 0.20s;
    	transition-duration: 0.20s;

-webkit-transition-property: color, background-color;
   -moz-transition-property: color, background-color;
    -ms-transition-property: color, background-color;
     -o-transition-property: color, background-color;
        transition-property: color, background-color;

-webkit-transition-timing-function: ease;
   -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
     -o-transition-timing-function: ease;
        transition-timing-function: ease;
}

.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
 -moz-transition-property: height, width;
  -ms-transition-property: height, width;
   -o-transition-property: height, width;
      transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
 -moz-transition-property:    -moz-transform, opacity;
  -ms-transition-property:     -ms-transform, opacity;
   -o-transition-property:      -o-transform, opacity;
      transition-property:         transform, opacity;
}


/******** RESPONSIVE DESIGN ********/

/* Normal Desktop */
@media (min-width: 980px) and (max-width: 1199px) {
	#resumenav.affix {width: 185px; top: 20px;}
	.backgrounded .section .section-title{ margin-left: -20px;}
	.blogitem, .portfolioitem {height: 220px; margin-bottom: 20px;}
	.timeline-item-content {width: 508px; padding: 5px 20px;}
	#resumenav a {padding: 5px 20px;}
	.well {margin-bottom: 20px; padding: 2px 20px 0;}
	.author {margin-bottom: 20px;}
	.section.first-section, .tools {padding-top: 20px;}
	.section .section-title {padding: 5px 20px; margin-bottom: 20px;}
	.timeline-arrow i {top: 27px;}
	.timeline-item-date {margin-top: 21px;}
	.timeline-item-trigger span {margin-top: 11px;}
	.timeline-item {margin-bottom: 20px;}
	.skills h2.section-title, #personal-information h2 {margin-bottom: 0;}
	.testimonial {margin-bottom: 0;}
	#portfolio #portfolio-filters {margin-bottom: 18px;}
	.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {padding: 10px 20px;}
	.blogitem .blogitem-hoverinfo {padding: 20px;}
	.blogitem-content h2, .portfolioitem-content h2 {margin-top: 20px;}
	#portfolio-back, #blog-back {margin-bottom: 20px;}
	.portfolioitem h3 {margin-bottom: 11px;}
	.blogitem .blogitem-actions, .portfolioitem .portfolioitem-actions {margin-top: 20px;}
	#footer {padding-top: 10px;}

}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	#main-navbar {margin-bottom: 0; position: fixed; top: 0;}
	#resumenav a {font-size: 14px; padding: 5px 20px;}
	.backgrounded .section .section-title{ margin-left: -20px;}
	.blogitem, .portfolioitem {width: 258px; height: 258px; margin-bottom: 20px;}
	.blogitem .blogitem-actions, .portfolioitem .portfolioitem-actions {margin-top: 10px;}
	.blogitem-content h2, .portfolioitem-content h2 {margin-top: 20px;}
	#portfolio-back, #blog-back {margin-bottom: 20px;}
	.portfolioitem .portfolioitem-metadata span {margin: 2px; font-size: 10px;}
	.portfolioitem .portfolioitem-metadata span i {margin-right: 2px;}
	#resumenav.affix {width: 131px; top: 20px;}
	.author {margin-bottom: 20px;}
	.section.first-section, .tools {padding-top: 20px;}
	.timeline-item-content {width: 346px; padding: 5px 20px;}
	.well {margin-bottom: 20px; padding: 2px 20px 0;}
	.section .section-title {padding: 5px 20px; margin-bottom: 20px;}
	.timeline-arrow i {top: 27px;}
	.timeline-item-date {margin-top: 21px;}
	.timeline-item-trigger span {margin-top: 11px;}
	.timeline-item-content h3 {font-size: 20px;}
	.timeline-item {margin-bottom: 20px;}
	.skills h2.section-title, #personal-information h2 {margin-bottom: 0;}
	.testimonial {margin-bottom: 0;}
	#portfolio #portfolio-filters {margin-bottom: 18px;}
	.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {padding: 10px 20px;}
	.blogitem .blogitem-hoverinfo {padding: 20px;}
	.portfolioitem h3 {margin-bottom: 11px;}
	.blogitem .blogitem-actions, .portfolioitem .portfolioitem-actions {margin-top: 20px;}
	#footer {padding-top: 10px;}

}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	h1 {margin-top: 20px;}
	#content {margin-left: -20px;margin-right: -20px; padding-left: 20px; padding-right: 20px; }
	#phone-navbar {margin-bottom: 0;}
	.top .glyphicons {padding-bottom: 4px;}
	.section.first-section {padding-top: 20px;}
	.section .section-title {margin-left: -20px!important;display: block; margin-right: -20px; text-align: center; border-right: none; padding-right: 50px; overflow: hidden; font-size: 25px; margin-bottom: 20px;}
	.author, .social-media, .infoline, #portfolio-filters {text-align: center;}
	#blog-items, #portfolio-items {margin: 0 -4% 0 -1%;}
	.blogitem, .portfolioitem {width: 45%; height: auto; float: left; margin: 0 2% 4% 2%;}
	#portfolio-filters.nav-tabs > li, #portfolio-filters.nav-pills > li {display: inline-block; float: none;}
	.blogitem-content h2, .portfolioitem-content h2 {margin-top: 20px;}
	.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {padding: 20px;}
	#portfolio-back, #blog-back {margin-bottom: 20px;}
	.blogitem .blogitem-actions, .portfolioitem .portfolioitem-actions {margin-top: 20px;}
	.top {display: block; float: right; width: 40px; height: 40px; margin-right: -50px;}
	.timeline-item-trigger span {display: inline-block; margin-top: 0;}
	.timeline-item-trigger span i:before {line-height: 12px;}
	.timeline {background-position: center center;}
	.timeline-item-content h3 {font-size: 20px;}
	.timeline-item-date, .timeline-item-content, .timeline-item-trigger {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	display: block;
	width: 100%; 
	float: none; 
	text-align: center;
	margin: 5px 0;
	}
	.timeline-item-content {margin-bottom: 0; padding: 5px 20px;}
	.timeline-item-trigger {padding-top: 0; margin: 10px 0 15px;}
	.timeline-item-date {background:#fff; padding: 5px 0; margin-top: 0;}
	.dark .timeline-item-date {background:#1b1b1b;}
	.section .section-title {border-right: none!important;}
	.timeline-arrow {text-align: center; height: 0;}
	.timeline-arrow i {
	position: relative; 
	display: inline-block;
	top: -4px;
	left: auto;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=45);
	}
	.well {margin-bottom: 20px; padding: 2px 20px 0;}
	.tooltip {width: 200px;}
	.infoline .span2.muted {margin-bottom: 5px;}
	.testimonial {margin-bottom: 0;}
	.skills .span2 {margin-bottom: 10px;}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
	.blogitem .blogitem-hoverinfo, .portfolioitem .portfolioitem-hoverinfo {padding: 20px;}
	#blog-items, #portfolio-items {margin: 0 -4% 0 -1%;}
	.blogitem, .portfolioitem {width: 45%; height: auto; float: left; margin: 0 2% 4% 2%;}
	.blogitem-hoverinfo p, .portfolioitem-hoverinfo p, .portfolioitem-hoverinfo h3 {display: none;}
	.blogitem .blogitem-actions a, .portfolioitem .portfolioitem-actions a {margin: 0;}
	#contact .controls {margin-left: 0;}
}