/* 
    Document   : styles.css
    Created on : 10/06/2014, 10:53:05 PM
    Author     : benjie
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
@font-face {
    font-family: 'trajanpro';
    src: url('fonts/GoudyTrajan-Regular-trial.otf');
    font-style: normal;
}

@font-face {
    font-family: 'sinkin_sans100_thin';
    src: url('fonts/sinkinsans_100thin_macroman/SinkinSans-100Thin-webfont.ttf');
    src: url('fonts/sinkinsans_100thin_macroman/SinkinSans-100Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sinkinsans_100thin_macroman/SinkinSans-100Thin-webfont.woff') format('woff'),
         url('fonts/sinkinsans_100thin_macroman/SinkinSans-100Thin-webfont.ttf') format('truetype'),
         url('fonts/sinkinsans_100thin_macroman/SinkinSans-100Thin-webfont.svg#sinkin_sans100_thin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sinkin_sans200_x_light';
    src: url('fonts/sinkinsans_200xlight_macroman/SinkinSans-200XLight-webfont.eot');
    src: url('fonts/sinkinsans_200xlight_macroman/SinkinSans-200XLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sinkinsans_200xlight_macroman/SinkinSans-200XLight-webfont.woff') format('woff'),
         url('fonts/sinkinsans_200xlight_macroman/SinkinSans-200XLight-webfont.ttf') format('truetype'),
         url('fonts/sinkinsans_200xlight_macroman/SinkinSans-200XLight-webfont.svg#sinkin_sans200_x_light') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
   font-family: 'sinkin_sans200_x_light';
   font-size: 16px;
   color: #555;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background: #257dd3;
    /* margin-bottom: -90px; */ /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
    font-family: 'trajanpro';
}

/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
    border: 0;
    background: #257dd3;
}

/* Remove border and change up box shadow for more contrast */
.navbar .navbar-up {
    background: #fff;
    position:  absolute;
    top:0; 
    left:0;
    width: 100%;
    height: 5px;
    z-index: 10;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.navbar{

    margin-bottom: 0;
    height: 70px;
    overflow: visible;
}
.navbar-inner{
    box-shadow: none;
    border-radius: 0;
}


.nav li a{
    padding-bottom: 0;
}

.active{
    background-color: #ffffff;
    color:  #0044cc !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.dropdown-menu>li>a {
display: block;
padding: 3px 10px;
margin: 2px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #777;
white-space: nowrap;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 10px;
margin: 2px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #777;
white-space: nowrap;
}

.dropdown-menu>li>a:hover {
   border: none; 
}

@media (max-width: 979px) {

    .navbar .nav-collapse .nav.pull-right {
        float: right;
        color: #ffffff;
        text-align: right;
        margin-left: 0;
        width: 100%;
    }
    .navbar-inverse .nav-collapse .nav>li>a, .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #ddd;
    }
    .navbar-inverse .nav .active > a,
    .navbar-inverse .nav .active > a:hover,
    .navbar-inverse .nav .active > a:focus {
        color: #ffffff;

        background-color: #065B8B;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .collapsed .btn-navbar {
    background-color: #065B8B;
    }
    
    .navbar-inner{
        padding-bottom: 8px;
        min-height: 60px;
        
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }


    .navbar-inverse .nav-collapse .nav>li>a:hover, .navbar-inverse .nav-collapse .nav>li>a:focus, .navbar-inverse .nav-collapse .dropdown-menu a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:focus {
        color: #ffffff;

        background-color: #065B8B;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }
}
/* Downsize the brand/project name a bit */
.navbar .brand {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    z-index: 11;
    padding: 0;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.brand{
    padding: 0;
    background: #065B8B url('../images/logo1.png') no-repeat -10px 6px;
}
.brand>img{
    margin: 0;
    background: #ffffff url('../images/logo1.png') no-repeat 0 0;
}

/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
    margin-top: 20px;
}
/* NAV BAR 1
  -------------------------------------------------- */   
.navbar .nav {
    position: relative;
    left: 0;
    display: block;
    float: right;
    margin: 20px 0 0 0;
    font-size: 17px;
    font-weight: 100;
    letter-spacing: .1px;
}

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle {
    color: #fff;
    background-color: #065B8B;
}

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
    color: #fff;
    text-shadow: none;
    margin-left: 4px;
}

.nav > li > a:hover{
    background-color: #0a86eb !important;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 20px;
}

.carousel .container {
    position: relative;
    z-index: 9;
}

.carousel-control {
    height: 80px;
    margin-top: 0;
    font-size: 120px;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
    background-color: transparent;
    border: 0;
    z-index: 10;
}

.carousel .item {
    height: 500px;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

.carousel-caption {
    background-color: rgba(0,0,0,0.4);
    position: relative;
    max-width: 550px;
    padding: 20px;
    margin-top: 150px;
}
.carousel-caption h1,
.carousel-caption .lead {
    margin: 0;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

.carousel-caption h1{
    color: #0a86eb;
}

.carousel-caption .btn {
    margin-top: 10px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {

    .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
    }
    .circulo {
        margin: auto;
        text-align: center;
    }
    .circulo img{
        margin: auto;
    }
    .navbar-inner {
        border-radius: 0;
        margin: 0;
    }

    .carousel .item {
        height: 500px;
    }
    .carousel img {
        width: auto;
        height: 500px;
    }

    .featurette {
        height: auto;
        padding: 0;
    }
    .featurette-image.pull-left,
    .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
    }
}


@media (max-width: 767px) {

    .navbar-inner {
        margin: 0;
    }
     .circulo img{
        margin: auto;
    }
    
    .carousel {
        margin-left: -20px;
        margin-right: -20px;
    }
    .carousel .container {

    }
    .carousel .item {
        height: 300px;
    }
    .carousel img {
        height: 300px;
    }
    .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
        background-color: rgba(0,0,0,0.1);
    }
    .carousel-caption h1 {
        font-size: 30px;
    }
    .carousel-caption .lead,
    .carousel-caption .btn {
        font-size: 18px;
    }

    .marketing .span4 + .span4 {
        margin-top: 40px;
    }

    .featurette-heading {
        font-size: 30px;
    }
    .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
    }

}

/*----------------------------*/
.view {
    width: 100%;
    height: 100%;
    float: left;
    border: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 1px #000;
    -moz-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000;
}
.view a.info:hover {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}

/*----------------------------*/
.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(20,0,70, 0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/*----------------------------*/
.view-first img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.view-first .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: rgba(20,0,50, 0.7);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.view-first:hover img {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}
.view-first a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.view-first:hover p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/* Wrapper for page content to push down footer */


/* Set the fixed height of the footer here */
#push {
    height: 100px;
}
#footer {
    background: url("../images/bg_footer.png") repeat 0 0 #e6e6e6;

    border-top: 1px solid #ccc;
}
#footer h4{
    background-color:  #eee;
    color: #002a80;
    padding: 3px;
    width: 100%;
}
#footer p{
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color:  #615c5c;
}

.social{
    padding: 10px;
    background-color:  #efefef;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/*========MODAL====================*/

.modal-body:not(.two-col) {  padding:20px }
.glyphicon { margin-right:5px; }
.glyphicon-new-window { margin-left:5px; }
.modal-body .radio,.modal-body .checkbox {margin-top: 0px;margin-bottom: 0px;}
.modal-body .list-group {margin-bottom: 0;}
.margin-bottom-none { margin-bottom: 0; }
.modal-body .radio label,.modal-body .checkbox label { display:block; }
.modal-footer {margin: 10px;}
@media screen and (max-width: 325px){
    .btn-close {
        margin: 15px ;
        width: 100%;
    }
    .btn-results {
        margin-top: 5px;
        width: 100%;
    }
    .btn-vote{
        margin-top: 5px;
        width: 100%;
    }

}
.modal-footer .btn+.btn {
    margin-left: 0px;
}
.progress {
    margin-right: 10px;
}
input,
textarea,
.uneditable-input {
    width: 87%;
    margin-left: 35px;

}

.close{
    margin: 10px;
}

.btn-default{
    margin: 10px 10px 10px 0;
}

#twitter-box{
    background: #002a80;
    color: #eee;
}

#twitter-box p{
    padding: 10px;
}

.side-box{
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 10px;
    margin-bottom: 10px;
}


.titulo {
    margin: 50px 0 15px 0;
    padding: 10px;
}
.titulo h3{

    text-transform: none;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    color:  #aaa;
    font-size: 22px;
    line-height: 1.2em;
}
.titulo h2{

    text-transform: none;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    color:  #aaa;
    font-size: 36px;
}

.mod_margin{
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.ver-mas{
    padding: 2px 5px;
    background-color: black;
    color:white;
    position: relative;
    top:0;
    right: 0;
}

.categorias li{
    list-style-type: none;
    font-size: 15px;
}

.categorias li a{
    color: #aaa;
    text-transform: uppercase;
}

.proyecto_titulo{
    float:right;
    text-align: right;
    margin: 85px 0 15px auto;
    
}

.servicios{
    text-align: center;
    text-justify: center;
}



#footer{
    padding-top: 15px;
}