@import url('http://fonts.googleapis.com/css?family=Droid+Sans');
@import url('http://fonts.googleapis.com/css?family=Carme');

/*-----------------------------------------------------------------------------------*/
/*	1.	Global properties (body, common classes, vertical rhythm, structure etc)
/*-----------------------------------------------------------------------------------*/
body{ color:#AAA; font-size: 16px; font-family: Arial, sans-serif; }
header,
nav,
section,
article{display: block;}

figure { border:0; margin:0; border:0; padding:0; }

.last{ margin-right: 0 !important; margin-bottom: 0 !important; }
.clear{clear: both;}
.alignleft{float: left !important;}
.alignright{float: right !important;}
.aligncenter {text-align: center !important;}
.span6.no-margin-left {margin-left: 0!important;}

/* Headers */
h1, h2, h3, h4, h5, h6{ color: #FFFFFF; }

h1{ font-size: 22px; margin-bottom: 15px; line-height: 22px; }
h2{ font-size: 20px; margin-bottom: 15px; line-height: 20px; }
h3{ font-size: 18px; margin-bottom: 10px; line-height: 18px; font-weight:400; }
h4{ font-size: 16px; margin-bottom: 16px; }
h5{ font-size: 14px; margin-bottom: 14px; } 
h6{ font-size: 12px; margin-bottom: 12px; }

p{ margin-bottom: 15px; line-height: 20px; }
* p:last-child{margin-bottom: 0 !important;}

.color, .color2{ font-weight: 700; padding: 0 2px; }

.color{color: #FFF;}
.color2{color: #0AF;}

/* Link Styles */
a{ color: #FFF; text-decoration: none; }
a:hover{ text-decoration: none; color: #0AF;} 
.title a{ color: #0AF; font-weight: 600; font-size: 12px; }
h4.title a{ font-size:16px; font-weight:400; letter-spacing: 0.05em; }
.title a:hover{color: #FFF;}


/*-----------------------------------------------------------------------------------*/
/*	2.	Header, Navigation & Menus
/*-----------------------------------------------------------------------------------*/
#top-menu { background-color: rgba(0,0,0,0.75); overflow:hidden; padding: 0 10px; }
#top-menu li{ float: right; font-size:12px; line-height:25px; list-style: none; margin-left:10px;}
#top-menu i { color:#0AF}
#top-menu a{ color: #FFF;}
#top-menu a:hover{color: #0AF;}

#header {background: rgba(0,0,0,0.5); height: 100px; padding:0; position: relative; }
.menu-container { max-width:1200px; margin:0 auto; }
#header .logo { float: left; margin:10px 0 0; min-width:300px; width:30%; }
#header .logo img{ width:100%;}

/* Main Menu */
.res-menu{display: none;}

#menu{ background:rgba(0,0,0,0.25); border-radius:5px; display: table; float:right; font-family:'Droid Sans',sans-serif;margin:30px 10px 0; padding:0 20px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.5); text-transform: uppercase; width:440px;}
#menu ul {margin-left:9px;}
#menu > ul{ display: block; margin-left:0; }
#menu > ul > li{ list-style: none; float:left; position: relative; padding:12px 10px;}
#menu > ul > li > a { color: #EEE; display: block; font-size:14px; font-weight: 400;  }
#menu > ul a:hover{color: #0AF;}
#menu .current{color: #0AF !important;}

#menu ul ul { background:rgba(0,0,0,0.25); border-radius: 0 0 10px 10px; margin:-12px 0 0; padding:5px 10px; position:absolute;  width:120px; }
#menu > ul > li > ul{ }
#menu ul ul li { list-style: none; position: relative; border-bottom: 1px solid rgba(0,0,0,0.25);}
#menu ul ul li.last{ border-bottom: none !important}
#menu ul ul li.menu-last{border-bottom: none;}
#menu ul ul a{ display: block; padding:5px 0; color:#EEE; font-size:14px;}
#menu ul ul a:hover{color: #0AF;}
#menu li:hover {visibility: inherit;}
#menu li:hover ul,
#menu li.sfHover ul { left: -10px; top: 52px; z-index: 99; }
#menu li li:hover ul,
#menu li li.sfHover ul { left: 166px; top: -2px; }


/*-----------------------------------------------------------------------------------*/
/*	3.	Main Content Styles
/*-----------------------------------------------------------------------------------*/
.contenido

#contenedor{ position: relative; }
#contenedor .contenido {background:rgba(0,0,0,0.8); border-radius:10px; margin:2% auto; max-width:1200px; overflow:hidden; padding: 2%; position:relative; width:92%; }


/* Video container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Flex Slider */
section#slider {
    background: #ebebeb url('../images/slider-bg.png');
    margin-top:0;
}
.flexslider{
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba( 255, 255, 255, 0.5);
}
.slides li{position: relative;}

.slides h3 {
    bottom: 0px;
    left: 40px;
    position: absolute;
    display: block;
    font-family: 'Arial',sans-serif;
    font-size: 15px;
    font-weight: 400 !important;
    line-height: 18px;
    max-width: 400px;
    margin-bottom: 30px;
    padding: 20px;
    background-color:rgba(0, 0, 0, 0.4);
    box-shadow: 10px 0 0 rgba(0, 0, 0, 0.4), -10px 0 0 rgba(0, 0, 0, 0.4);
    -webkit-border-radius:3px;
    border-radius: 3px;
}
.slides h3 a{
    color: #787878;
    font-weight: normal;
    padding: 2px 0;
}
.slides li a:hover{color: #0AF !important;}
.slides span {
    font-size: 36px;
    line-height: 36px;
    color: #d0d0d0;
    display:block;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.flex-direction-nav{
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.flex-direction-nav li{
    float: left;
    margin-left: 1px;
    list-style: none;
}
.flex-direction-nav a{
    display: inline-block;
    width: 30px;
    height: 30px;
    opacity: 0.7;
    text-indent: -9999px;
}
.flex-direction-nav .flex-prev{background: url(../images/arrow-slider-left.png) no-repeat bottom right;}
.flex-direction-nav .flex-next{background: url(../images/arrow-slider-right.png) no-repeat bottom right;}
.flex-direction-nav .flex-prev:hover,
.flex-direction-nav .flex-next:hover{opacity: 1;}
.flex-direction-nav .flex-disabled {
    opacity: .3!important;
    filter:alpha(opacity=30);
    cursor: default;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
    width: 100%;
    display: block;
}
.flex-pauseplay span {text-transform: capitalize;}
.no-js .slides > li:first-child {display: block;}

.flexslider {
    position: relative;
    zoom: 1;
}
.flex-viewport {
    max-height: 2000px;
    -webkit-border-radius:3px;
    border-radius: 3px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
    .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

/* Welcome Slogan */

#welcome{ font-family: "bebas_neueregular" 'Arial',sans-serif; left:10%; position:absolute; top:42%; width:400px; }
#welcome h1, #welcome h2, #welcome h3 { font-weight:300; letter-spacing:0.05em; text-shadow:1px 1px 1px rgba(0,0,0,0.5); }
#welcome h1{font-size: 80px; color:#0AF; line-height:60px; }
#welcome h2, #welcome h3 {font-size: 37px; color:#CCC; line-height:36px; }

#corporativa {}

/* Mas Proyectos */
#corporativa h3 { background:rgba(0,0,0,0.5); border-radius:5px; line-height:40px; display:block; margin:0 0 20px; text-align:center;}
#corporativa .img-cont { float:left; background:rgba(0,0,0,0.5); border-radius:10px; padding:1%; width:28%; }
#corporativa .img-cont img{ width:100%; }
#corporativa .txt-cont { float:right; width:68%;}
#firma { float:right; margin:20px 0 0; text-align:right; width:250px; }
#firma ul { list-style:none;}
#firma li { line-height:22px;}
#firma i { color:#0AF; margin-left:10px;} 


/* Our Blog */
.our-blog article p.l-meta{
    width: 100%;
    font-size: 12px;
    color: #b6b6b6;
    padding: 5px 0;
    margin: 0;
    background-color: #1d1d1c;
    font-weight: 100;
    margin-bottom: 20px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
}
.our-blog p{margin-bottom: 10px}
.our-blog article p.l-meta span{
    display: block;
    padding: 0 10px;
}
.our-blog article p.l-meta a{color: #b6b6b6;}
.our-blog article p.l-meta a:hover{color: #0AF;}
.our-blog img {
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
}

/* Our News */
.our-news{position: relative;}
.our-news p{margin-bottom: 10px;}
.our-news .news-data{
    float: left;
    width: 60px;
    height: 50px;
    color: #b6b6b6;
    text-align: center;
    text-transform: uppercase;
    font-size:20px;
}
.our-news .news-data span{
    display: block;
    font-weight:900;
    font-size: 42px;
    line-height: 42px;
}
.our-news .title{margin-bottom: 5px !important;}


/* Our Services */
.accordion-group {border:0;}
.accordion .accordion-toggle{
    font-weight: 900;
    color: #fff;
    padding: 5px 10px;
    background-color: #b6b6b6;
    position: relative;
    border: 1px solid #b6b6b6;
    border-radius: 4px 4px 4px 4px;
    text-shadow: 1px 1px #aaa;
}
.accordion .accordion-toggle:hover{
    background-color: #cdcdcd;
    border-color:#cdcdcd;
    text-shadow: 1px 1px #bbb;
}
.accordion .accordion-toggle span{
    right: 10px;
    top: 5px;
    width: 16px;
    height: 16px;
    position: absolute;
}
.accordion .accordion-inner{
    margin-top: 1px;
    border: 0;
}
.accordion .acc-block{padding: 20px 10px;}
.accordion h4{
    color: #707070;
    text-transform: none;
}

.accordion li{
    padding-left: 15px;
    margin-bottom: 10px;
}
.accordion i.pull-right {margin:3px 0 0 0;}

/* Twitter */
.twitter {margin-top:-5px;}
.twitter  img{
    float: left;
    margin-right: 15px;
    margin-top:5px;
}
.twitter span.tweet_time{
    display: block;
    padding-bottom: 5px;

}
.twitter dl{
    border-bottom: 1px dotted #efefef;
    padding-bottom: 20px;
    margin-bottom: 20px;
    list-style: none;
}
.twitter dl:last-child{border: none;}

/* Testimonials */
.testimonials p{
    line-height: 22px;
    font-size: 12px;
    padding: 0 15px 15px 38px;
    background: #fff url('../images/quotes.png') no-repeat top left;
    border-bottom:1px dotted #efefef;
}
.testimonials h4{
    padding-top: 20px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color:#0AF;
}
.testimonials img{
    float: left;
    margin-right: 15px;
    margin-top:10px;
}
.testimonials small{
    display: block;
    font-size:11px;
}


/*-----------------------------------------------------------------------------------*/
/*	4.	Footer Styles
/*-----------------------------------------------------------------------------------*/
#footer {
    background: url(../images/bg.jpg) repeat-x scroll 0 0 #E7E7E7;
    bottom: 0;
    padding-bottom: 45px !important;
    padding-top: 40px;
    position: absolute;
    right: 0;
    width: 100%;
}
#footer h3{
    margin-bottom: 25px;
    font-size:16px;
    color: #0AF;
    font-weight:400;
    letter-spacing:0.05em;
}
#footer li{
    margin-bottom: 10px;
    list-style: none;
}

/* Flickr */
.flickr li{
    list-style: none;
    margin: 0 5px 30px 4px ;
    float: left;
    background-color: #c4c4c4;
    line-height: 0 !important;
}

/* Contact Form */
#footer #contact{margin-bottom: 0px}
#footer #contact .control-group {margin-bottom:5px;}
#footer #contact input[type="text"]{
    color: #777;
    padding: 3px 5px;
    border: 1px inset rgba(0,0,0, 0.3);
    background-color: transparent ;
    margin-bottom: 1px !important;
    height: 19px;
    border-radius: 3px;
}
#footer #contact span{
    color: #777;
    font-size: 13px;
    display: inline-block;
    width: 44px;

}
#footer #contact input:focus,
#footer #contact textarea:focus{
    box-shadow: none;
    background-color: rgba(150,150,150, 0.1) !important;}
#footer #contact textarea{
    color: #777;
    padding: 5px;
    height: 66px;
    overflow: auto;
    margin-bottom: 2px;
    border: 1px inset rgba(0,0,0, 0.3);
    background-color: transparent;
    border-radius: 3px;
}
#footer #contact p{margin-bottom: 5px;}

#footer #contact .btn {
    background-image:none;
    box-shadow: none;
    text-shadow:none;
    background-color: transparent;
    border: 1px solid #343434;
    border-radius: 3px 3px 3px 3px;
    color: #7d7d7d;
    display: inline-block;
    font-size: 13px;
    font-weight:900;
    margin-right: 3px;
    padding: 4px 10px;
}
#footer #contact .btn:hover {
    text-decoration: none;
    background-color:  rgba(150,150,150, 0.1);
    *background-color:  rgba(150,150,150, 0.1);
    /* Buttons in IE7 don't get borders, so darken on hover */
}

#footer .form-horizontal .control-label {width: 25px;}
#footer .form-horizontal .controls {margin-left: 45px;}
#footer .form-horizontal .controls:first-child {*padding-left: 45px;}
#footer .form-horizontal .form-actions {padding-left: 45px;}

/* Footer Menu */
#footer-menu { width: 100%; background-color: #0AF; }
#footer-menu .contenido{ padding-top: 0; padding-bottom: 0; }
#footer-menu li{ list-style: none; padding: 15px 0; margin-left: 10px; float: left; font-size: 10px; }
#footer-menu a{ font-weight: 400; color: #fff; font-size:11px; }
#footer-menu a:hover{color: #323232;}
#footer-menu p{ font-size: 11px; color: #fff; padding-top: 14px; letter-spacing: 0.04px; }


/*-----------------------------------------------------------------------------------*/
/*	5.	Blog 
/*-----------------------------------------------------------------------------------*/

#page-sidebar { float:left; width:70%}

.blog-post {background:rgba(0,0,0,0.5); border-radius:5px; margin-bottom:20px; overflow:hidden; padding:2%; width:96%;}
.blog-post h2.post-title { font-weight:300; line-height: normal; margin-bottom: 10px; padding:1%; width:98%;}

.blog-post .img1 {}
.blog-post .img1 img { background:rgba(0,0,0,0.5); border-radius:5px; display:block; height:auto; margin-bottom:10px; padding:2%; width:96%;}
.blog-post .img2 {background:rgba(0,0,0,0.5); border-radius:5px 5px 0 0; display:block; height:auto; margin-bottom:0; padding:2%; width:96%;}
.blog-post .img2 img { height:auto; margin-bottom:0; width:100%;}
.blog-post .pie-foto {background:rgba(0,0,0,0.5); border-radius:0 0 5px 5px; display:block; font-size:12px; margin-top:0; padding:0 1% 2%; text-align:center; width:98%; }

.blog-post .meta{background:rgba(0,0,0,0.5); border-radius:3px; margin:0 0 15px; overflow:hidden; padding:5px 10px; }
.blog-post .meta li{ list-style: none; font-size:0.9em; margin-right: 10px; float: left; letter-spacing: 0.03em; }
.blog-post .meta a{color: #0AF;}
.blog-post .meta a:hover{color: #777;}

.blog-post.style2 img { width: 50%; float: left; margin-right: 25px; }
.blog-post.style2 .carousel, .blog-post.style2 .video{ width: 50%; float: left; margin-right: 25px; }
.blog-post.style2 .carousel img{width: 100%;}
.blog-post.style2 p{padding-top: 30px;}
.blog-post.style2 .meta{border: none;}

.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom: 30px; height: 0; overflow: hidden; }
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*-----------------------------------------------------------------------------------*/
/*	5.	Blog Sidebar
/*-----------------------------------------------------------------------------------*/

#sidebar{ float:right; font-size: 14px; width:28%;}
#sidebar h4{background:rgba(0,0,0,0.5); border-radius:3px; clear:both; color:#0AF; font-weight:300; padding:2% 5%; width:90%;}
#sidebar li {list-style:none; margin-bottom:10px; }

#sidebar section{;}
#sidebar section:last-child{margin-bottom:0px;}

#sidebar .tags { background:rgba(0,0,0,0.5); border-radius:2px; margin:10px 0; overflow:hidden; padding:5%;}
#sidebar .tag li{  }
#sidebar .tag a{ border-radius:2px; color: #FFF; float: left; width: 44%; margin:0 2% 2% 0; padding:2%;}
#sidebar .tag a:hover { background:rgba(0,0,0,0.5); color: #0AF;}


/* Popular Posts Widget */
.post-widget { background:rgba(0,0,0,0.5); border-radius:3px; overflow:hidden; padding:5%; width:90% }
.post-widget li { clear:both; display:block; padding:2.5%; width:95% }
.post-widget img { background:rgba(0,0,0,0.5); border-radius:3px; float:left; margin-right:10px; padding:6px; width:80px;}
.post-widget .img{ display: block; margin-bottom: 0; line-height: normal; width:10px;}

.post-widget a { font-size:1em; line-height:18px; margin-bottom: 7px;} 
.post-widget p { font-size:12px; letter-spacing: 0.02em; margin-bottom: 0;  }
.post-widget li:last-child{margin-bottom: 0 !important;}

/* Flickr Widget */
.sidebar-flickr ul{width: 110.9489051094891%;}
.sidebar-flickr li{
    border: 0;
    float: left;
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 03.28947368421053% !important;
    margin-right: 03.28947368421053% !important;
    height: 20.06578947368421% ;
    width: 20.06578947368421% ;
}

/* Latest Projects Widget */
.carousel{margin-bottom: 0;}
.carousel-control{ background:#0C0;
    border: none;
    position: absolute;
    top: inherit;
    left: inherit;
    bottom: 0;
    width: 17px;
    height: 17px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.carousel-control.post{top: 50%;}
.carousel-control.left.post{left: 0;}
.carousel-control.left{
    right: 17px;
    background: url(../images/arrow-blog-left.png) no-repeat center center;
}
.carousel-control.right{
    right: 0;
    background: url(../images/arrow-blog-right.png) no-repeat center center;
}

/* Comments Widget */
.comment-sidebar li:last-child{margin-bottom: 0 !important;}


/* Services Block */
.ident-bot-2 {margin-bottom: 17px;}
.figure-1 a.left-image { margin-right: 17px; }
.lightbox-image { display: inline-block; overflow: hidden; position: relative; }
.lightbox-image img { position:relative; z-index:2; }
.img-border-bg {background: #FFF; border-radius:4px; box-shadow:0 0 0 1px #EEE inset; display:inline-block; padding:5px;}
.img-border { border-radius: 4px; width: 100%; }
.lightbox-image span { background: url("../images/magnify.png") no-repeat scroll 50% 50% transparent; display: block; height: 100%;  left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.service { margin:0 5px 10px 0; }

/*-----------------------------------------------------------------------------------*/
/*	8.	Forms
/*-----------------------------------------------------------------------------------*/

#sidebar .contacto { background:rgba(0,0,0,0.5); border-radius:3px; padding:5%; width:90%;}
#sidebar .contacto h4 {background:rgba(0,0,0,0.5); border-radius:3px; clear:both; color:#0AF; font-weight:300; padding:2% 5%; width:90%;}
#sidebar .contacto li { line-height:12px;}

#form { background:rgba(0,0,0,0.5); border-radius:3px; overflow:hidden; padding:2% 5%; width:90%;}
#form .form-field { margin-bottom:10px}
#form .form-field label { color: #FFF; display:inline-block; vertical-align:top; min-width:80px; width:15%;}
#form input[type="text"] { border: 1px solid #000; color: #777777; height:30px; padding:5px 10px; width:80%; }
#form input[type="text"], #form textarea { background:rgba(0,0,0,0.5); opacity:0.5; }
#form input[type="text"]:focus, #form textarea:focus { background:rgba(0,0,0,0.5); opacity:1; }
#form textarea { color:#777; padding:5px 10px; height:160px; overflow:auto; border:1px solid #ececec; width:80%; }

label.error, label.ferror{ color: #dc3f35; font-size: 13px; }
#form input.error, textarea.error {border: 1px solid #ff3f3f;}

.ver-mas { background:#09F; border:none; border-radius:3px; color:#FFF; margin-left:120px; padding:10px; width:120px; }
.ver-mas:hover { background:rgba(0,0,0,0.5); border:1px solid #09F; color:#09F; }
/*-----------------------------------------------------------------------------------*/
/*	9.	Comments
/*-----------------------------------------------------------------------------------*/
.comments .textarea {
    border: 1px solid #EDEDED;
    margin-bottom: 40px;
    margin-left: 94px;
    padding: 10px 20px;
    position: relative;
}
.comments .avatar{
    position: relative;
    float: left;
    margin-right: -5px;
}
.comments .comments-list{
    list-style: none !important;
}
.comments .comments-list ul{
    margin-left: 30px;
    margin-bottom: 20px;
}
.comments .meta{
    font: 12px 'Open Sans', serif;
    color: #666666;
    padding-bottom: 8px;
    margin-bottom: 10px !important;
    border-bottom: 1px dotted #e2e2e2;
}
.comments ul ul .textarea {margin-top:-20px;}

/*-----------------------------------------------------------------------------------*/
/*	10.  Mas Proyectos
/*-----------------------------------------------------------------------------------*/

.mas-proyectos {background:rgba(0,0,0,0.8); border-radius:10px; clear:both; margin:20px auto; max-width:1200px; overflow:hidden; padding:2%; width:96%;}
.mas-proyectos .mas-pro-info { float:left; padding:2%; width:23%}
.mas-proyectos .mas-pro-images { float:right; width:70%;}

/* Our Projects */
.our-projects article{margin-bottom: 30px;}
.our-projects article img{display: block;}
.our-projects article h4{margin-bottom: 0;}
.our-projects article:nth-last-child(-n+4){margin-bottom: 0 !important;}

#secciones { background:rgba(0,0,0,0.8); border-radius:10px; clear:both; margin:2% auto; max-width:1200px; overflow:hidden; padding:2%; width:92%;}
#secciones .seccion-info {float:left; padding:2%; width:23%}
#secciones .secciones {float:right; width:72%;}
#secciones .secciones ul { list-style:none;}
#secciones .secciones li {background:rgba(0,0,0,0.5); border-radius:5px; float:left; margin:0 0 0 1%; padding:1%; width:30%}
#secciones .secciones li img {width:100%}

/*-----------------------------------------------------------------------------------*/
/*	5.	Post/Portafolio Content Styles
/*-----------------------------------------------------------------------------------*/

.contenido h2 {background:rgba(0,0,0,0.5); border-radius:5px; font-weight:300; letter-spacing:0.1em; line-height:40px; margin:0 auto 1%; text-align:center; width:100%;}

/* Portafolio */

.portafolio .port-img {float:left; margin:0.5%; width:24%;}
.portafolio .port-img img {background: rgba(0,0,0,0.5); border-radius:5px; padding:4%; width:92%;}

.portafolio li, .portafolio .port-img, .portafolio span{ overflow: hidden; position: relative; }
.portafolio li img, .portafolio span{ display: block; position: relative; }
.portafolio li div, .portafolio article div{ position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%;}
.portafolio li div.da-animate, .portafolio article div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.da-slideFromTop { left: 0px; top: -100%;}
.da-slideFromBottom { left: 0px; top: 100%;}
.da-slideFromLeft { top: 0px; left: -100%;}
.da-slideFromRight { top: 0px; left: 100%;}
.da-slideTop { top: 0px;}
.da-slideLeft { left: 0px;}

.p-view, .p-link{ display: block; width: 31px; height: 31px; position: absolute; top: 50%; margin-top: -18px; opacity:0.8;
    -webkit-transition: opacity 0.35s linear;
    -moz-transition: opacity 0.35s linear;
    -o-transition: opacity 0.35s linear;
}
.p-view:hover, .p-link:hover{ opacity:1; }
.p-view{ left: 50%; margin-left: -39px; background: url(../images/view.png); }
.p-link{ right: 50%; margin-right: -39px; background: url(../images/link.png); }


/* Categories */
#filtrable{ margin:10px 0 15px; float: right; }
#filtrable li{ float: left; margin-left: 10px; list-style: none; }
#filtrable a{ padding: 4px 10px;  background: rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.5); font-size: 0.9em; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
#filtrable a:hover, #filtrable .current a { background: rgba(0,0,0,0.5); border-color: #000000; color: #0AF; }


/* Pagination */

.pagination li { list-style: none; float: left; margin-right: 5px; }
.pagination a{ background:rgba(0,0,0,0.25); font-size:0.9em; display:inline-block; border:1px solid #000; }
.pagination a:hover{
    background: #000;
    color:#bbb;
}
.pagination .active a, .pagination .active span {
  background: #000;
}

/*-----------------------------------------------------------------------------------*/
/*	11.	Shortcode Styles
/*-----------------------------------------------------------------------------------*/
.span9,
.span6{position: relative;}

/* Divider */
.divider-arrow, hr, .divider{
    height: 1px;
    clear: both;
}

#contenedor hr {
    border-color: transparent;
    margin-bottom: 50px;
    margin-top: 25px;
}

#contenedor hr.soft {margin:10px 0;}

#contenedor .portafolio-single hr, #contenedor .blog-vid-got hr{
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Read More */
.read-more { display: block; color: #0AF; letter-spacing: 0.02em }
.read-more:hover{color: #1d1d1c;}


/* Back to Top */
#toTop {
    background: url("../images/ui.totop.png") no-repeat scroll left top transparent;
    border: medium none;
    bottom: 6px;
    display: none;
    height: 40px;
    overflow: hidden;
    position: fixed;
    right: 10px;
    text-decoration: none;
    text-indent: -999px;
    width: 40px;
}
#toTopHover {
    background: url("../images/ui.totop.png") no-repeat scroll left -40px transparent;
    display: block;
    float: left;
    height: 40px;
    opacity: 0;
    overflow: hidden;
    width: 40px;
}
#toTop:active, #toTop:focus { outline: medium none; }

/* Others */
#gallery_cover{
    background: url("../img/cover.png") repeat scroll 0 0 transparent;
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -998;
}

/*-----------------------------------------------------------------------------------*/
/*	12.	Responsive Fixes
/*-----------------------------------------------------------------------------------*/
@media only screen and (min-width: 980px)  and (max-width: 1199px){

    .btleft .es-nav {left: -53px;}
    #latest-work .carousel-wrapper li{width: 340px !important;}
    .figure-1 a.left-image {margin-right:5px;}
    .service.img-border-bg {margin-top:50px;}

}

@media (max-width: 979px) {
#menu{ width:400px;}
#menu ul {margin-left:9px;}
#menu > ul > li{ padding:12px 8px;}
#menu > ul > li > a {font-size:13px; font-weight:300;  }

#form .form-field label { color: #FFF; display:inline-block; vertical-align:top; min-width:80px; width:20%;}
#form input[type="text"] { border: 1px solid #000; color: #777777; height:30px; padding:5px 10px; width:70%; }
#form textarea { color:#777; padding:5px 10px; height:160px; overflow:auto; border:1px solid #ececec; width:70%; }
}

@media (max-width: 767px){

#menu{ clear:both; display:block; float:none; margin:5% 2%; width:90%;}
#menu ul {margin-left:none;}
#menu > ul > li{ padding:12px 8px;}
#menu > ul > li > a {font-size:13px; font-weight:300;  }

#corporativa h3 { font-size:16px; line-height:30px; margin:0 0 10px; text-align:center;}
#corporativa .img-cont { width:30%; }
#corporativa .img-cont img { padding:0 1%; width:98%; }
#corporativa .txt-cont { float:right;  width:65%;}
#firma { margin:10px; width:250px;}

#secciones { background:rgba(0,0,0,0.8); border-radius:10px; clear:both; margin:2% auto; max-width:1200px; overflow:hidden; padding:2%; width:92%;}
#secciones .seccion-info {float:none; padding:2%; width:96%}
#secciones .secciones {float:none; width:100%;}
#secciones .secciones li {margin:0 0 0 1%; padding:1%; width:30%}
#secciones .secciones li img {width:100%}

.portafolio .port-img {margin:1%; width:48%;}
.portafolio .port-img img {padding:4%; width:92%;}
#page-sidebar { float:none; width:100%}
.blog-post h2.post-title { font-size:16px;}
#sidebar { float:none; margin-top:10px;  width:100%}
}

@media (max-width: 480px){
body { font-size:13px; margin:0; padding:0;}
#header { background: none;}
#header .logo {background:rgba(0,0,0,0.5); clear:both; display:block; float:none; margin:0; padding:0; min-width:280px; text-align:center; width: 100%; }
#header .logo img { margin:1% 5%; width:90%;}
	
#menu { background:none; margin:10px 0;}
#menu ul,
#top-menu > .span6{display: none;}
#top-menu .top-social{float: none;}

.res-menu{background:rgba(0,0,0,0.5); border: rgba(0,0,0,0.75) solid 1px; border-radius:5px; clear:both; color:#FFF; display: block; margin:0; padding:2%; width: 95%; }
.res-menu ul {background: rgba(0,0,0,0.5); }
.res-menu li { padding:5px;}

#contenedor{ margin:60px 0;}
#contenedor .contenido {padding:3%; margin:0 auto; position:relative; width:94%; }
.blog-post { padding:4%; width:92%;}

#welcome{ left:5%; top:42%; width:300px; }
#welcome h1, #welcome h2, #welcome h3 {}
#welcome h1{font-size: 60px; line-height:40px; }
#welcome h2, #welcome h3 {font-size: 26.5px; line-height:18px; }

#corporativa h3 { font-size:14px; line-height:30px; margin:0 0 10px; text-align:center;}
#corporativa .img-cont { float:none; padding:2%; width:96%; }
#corporativa .img-cont img{ width:100%; }
#corporativa .txt-cont { float:none; margin:2% auto; padding:1%; width:94%;}

/* Categories */
#filtrable{ margin: 10px 0; }
#filtrable li{ margin-left: 3px; }
#filtrable a{ padding: 3px 6px; font-size: 0.9em; }

.blog-post h2.post-title { font-size:14px;}

#form .form-field label { margin:1% 2%; width:96%;}
#form input[type="text"] { padding:1% 5%; width:90%; }
#form textarea { padding:1% 5%; width:90%; }
.ver-mas { margin-left:0; }
}

@media (max-width: 479px){
#secciones .secciones li {margin:1% 0; padding:2%; width:96%}
#secciones .secciones li img {width:100%}
#filtrable a{ padding: 3px 5px; font-size: 0.8em; }
.portafolio .port-img {float:none; margin:2%; width:96%;}
.portafolio .port-img img {padding:4%; width:92%;}
}
@media (max-width: 460px){ #contenedor{ margin:50px 0;} }
@media (max-width: 400px){ #contenedor{ margin:40px 0;} }
@media (max-width: 360px){ #contenedor{ margin:20px 0;} }
@media (max-width: 350px){ #contenedor{ margin:25px 0;} }
@media (max-width: 330px){ #contenedor{ margin:15px 0;} }

/* Font Squirrel*/

@font-face {
    font-family: 'bebas_neueregular';
    src: url('bebasneue-webfont.eot');
    src: url('bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('bebasneue-webfont.woff') format('woff'),
         url('bebasneue-webfont.ttf') format('truetype'),
         url('bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.col4 { float:left; margin:1%; width:30% }
.col4 ul { list-style:none; }