body {
    margin: 0;
    padding: 0;
    background-color: #DADADA;
    font-size: 12pt;
    color: #10253F;
    font-weight: 300;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

nav,
.nav,
.navbar,
.navbar-header,
.navbar-default,
.navbar-collapse {
    background-color: #CDCDCD;
    color: #10253F;
}

.navbar-default a {
    color: #10253F !important;
}

.container-fluid {
    margin: 0;
    padding: 0;
}

.navbar {
    width: 100%;
}

.navbar-header {
    padding-left: 12px;
}

.navbar-collapse {
    background-color: #CDCDCD;
    background-image: -webkit-gradient(linear, left, right, from(#DCDCDC), to(#9D9D9D));
    background-image: -webkit-linear-gradient(left, #DCDCDC, #9D9D9D);
    background-image: -moz-linear-gradient(left, #DCDCDC, #9D9D9D);
    background-image: linear-gradient(to right, #DCDCDC, #9D9D9D);
}

.navs {
    background-color: #CDCDCD;
    margin-top: 3.25em;
    margin-bottom: 0;
    margin-right: 1em;
    padding: 0;
    vertical-align: bottom;
    float: right;
}

.navs li {
    list-style-image: none;
    display: inline-block;
    padding: 4px;
    padding-bottom: 0;
    /*background-color: silver;*/
}

.nav-tabs {
    color: #6E0408 !important;
    border-radius: 8px 8px 0 0;
}

.nav-tabs .active a {
    color: #10253F !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CDCDCD), to(#8F8F8F));
    background-image: -webkit-linear-gradient(top, #CDCDCD, #8F8F8F);
    background-image: -moz-linear-gradient(top, #CDCDCD, #8F8F8F);
    background-image: linear-gradient(to bottom, #CDCDCD, #8F8F8F);
    text-shadow: 1px 1px white;
}

.tab {
    color: #880000;
}

.tab-pane {
    display: block;
}

.tab-home,
.tab-services,
.tab-about,
.tab-contact {
    width: 80%;
    margin: 2em auto;
    text-align: justify;
    text-shadow: silver -1px -1px;
    background-color: silver;
    padding: 14px;
    height: 100%;
    border-radius: 12px;
    box-shadow: #4C4C4C 2px 2px 4px;
}

.main-content {
    padding-top: 8em;
    padding-bottom: 4em;
    width: 100%;
    height: auto;
    min-height: 48em !important;
    overflow: visible;
    display: block;
    background: url(/img/out/bg_sm.png);
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: cover;
}

#inicio {
    height: 400px;
    vertical-align: middle;
    font-size: 1em;
    background: none !important;
}

.slider div {
    display: none;
}

.slider .trigger {
    cursor: pointer;
    font-size: 1.2em;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;
}

.top {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 5em !important;
    width: 100%;
}

footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 60px;
    width: 100%;
    background: #999;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8A8A8A), to(#CDCDCD));
    background-image: -webkit-linear-gradient(top, #8A8A8A, #CDCDCD);
    background-image: -moz-linear-gradient(top, #8A8A8A, #CDCDCD);
    background-image: linear-gradient(to bottom, #8A8A8A, #CDCDCD);
}

ul,
li {
    list-style-image: none;
    list-style-type: none;
}

.cat {
    min-height: 390px;
    height: 390px;
    padding: 2px;
    clear: none;
    float: left;
}

.cat .details {
    overflow: auto;
    text-align: center;
    width: 100%;
    border: 1px solid silver;
    background-color: #DCDCDC;
}

.cat .info {
    background-color: #DCDCDC;
    border: 1px solid #4C4C4C;
    width: 100%;
    height: 100%;
    min-height: 380px;
    margin: 4px auto;
    padding: 8px;
    text-align: center;
}

.form-control {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#DEDEDE), to(#FBFBFB));
    background-image: -webkit-linear-gradient(top, #DEDEDE, #FBFBFB);
    background-image: -moz-linear-gradient(top, #DEDEDE, #FBFBFB);
    background-image: linear-gradient(to bottom, #DEDEDE, #FBFBFB);
    box-shadow: #4C4C4C 2px 2px 4px;
}

.details {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CDCDCD), to(#FBFBFB));
    background-image: -webkit-linear-gradient(top, #CDCDCD, #FBFBFB);
    background-image: -moz-linear-gradient(top, #CDCDCD, #FBFBFB);
    background-image: linear-gradient(to bottom, #CDCDCD, #FBFBFB);
    padding-bottom: 0.2em;
}

.cat .pic {
    width: 100%;
    height: 220px;
    margin: 4px auto;
    padding: 8px;
    text-align: center;
}

.cat p {
    width: 100%;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
    min-height: 2em;
}

.cat .details p {
    min-height: 2em;
}

.pic img {
    width: auto;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

.error {
    background-color: red;
    color: yellow;
}

.dim-bg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
    border: none;
}

.dim-bg ul {
    border: none;
}

.dim-bg ul li {
    list-style-type: disc;
}

.dim-bg * {
    border: none;
}

.dim-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.25;
    z-index: -1;
    background-position: top left;
    background-attachment: local;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: silver;
}

.dim-bg-surveilance::before {
    background-image: url(/img/out/camaras.png);
}

.dim-bg-access-control::before {
    background-image: url(/img/out/hand_scan.png);
}

.dim-bg-voip::before {
    background-image: url(/img/out/phone.png);
}

.dim-bg-network:before {
    background-image: url(/img/out/cables_red.png);
}

.dim-bg-maintenance::before {
    background-image: url(/img/out/tecla_control.png);
}

.dim-bg-equipment::before {
    background-image: url(/img/out/motherboard.png);
}

.dim-bg-software::before {
    background-image: url(/img/out/codigo.png);
}

.dim-bg-web::before {
    background-image: url(/img/out/website_layout.png);
}

.dim-bg-it::before {
    background-image: url(/img/out/book_pen.png);
}

.dim-bg-photo::before {
    background-image: url(/img/foto.png);
}

.dim-bg-courses::before {
    background-image: url(/img/cursos.png);
    background-attachment: scroll;
}

.dim-bg-diagnose::before {
    background-image: url(/img/diagnose.png);
}

#info_dlg {
    width: 680px;
    height: 400px;
}

.trigger-details {
    /*border: 1px solid #880000;*/
    margin: 2px auto 2px 24px;
}

.ui-state-error {
    color: black;
    padding: 4px;
    text-shadow: none;
}

.ui-state-error a {
    color: #228;
}

div.ui-state-error {
    border-radius: 8px;
    color: #F88;
}

.form-progress {
    display: none;
}


/*
Fix jQuery.ui dialog's close button
*/

button.ui-dialog-titlebar-close {
    border: 1px solid silver;
    background-image: url(images/ui-icons_222222_256x240.png);
    background-position-x: -96px;
    background-position-y: -128px;
    border-radius: 2px;
}

button.ui-dialog-titlebar-close:hover {
    border: 1px outset silver;
}

.ui-dialog,
.ui-dialog * {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

.ui-widget-header {
    border-color: #888;
    background-color: #888;
    text-shadow: 1px 1px silver;
}


/*
.btn.btn-primary {
    background-color: #6E0408;
    border-color: #600204;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6E0408), to(#600204));
    background-image: -webkit-linear-gradient(top, #6E0408, #600204);
    background-image: -moz-linear-gradient(top, #6E0408, #600204);
    background-image: linear-gradient(to bottom, #6E0408, #600204);
}

.btn.btn-primary:active {
    background-color: #6E0408;
    border-color: #600204;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#600204), to(#6E0408));
    background-image: -webkit-linear-gradient(top, #600204, #6E0408);
    background-image: -moz-linear-gradient(top, #600204, #6E0408);
    background-image: linear-gradient(to bottom, #600204, #6E0408);
}

.ui-dialog-buttonset>button {
    background-color: #6E0408;
    color: white;
    border-radius: 4px;
    padding: 4px 12px;
    border-width: 1px;
    border-color: #600204;
    font-weight: normal;
    text-shadow: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6E0408), to(#600204));
    background-image: -webkit-linear-gradient(top, #6E0408, #600204);
    background-image: -moz-linear-gradient(top, #6E0408, #600204);
    background-image: linear-gradient(to bottom, #6E0408, #600204);
}

.ui-dialog-buttonset>button:active {
    border-color: #600204;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#600204), to(#6E0408));
    background-image: -webkit-linear-gradient(top, #600204, #6E0408);
    background-image: -moz-linear-gradient(top, #600204, #6E0408);
    background-image: linear-gradient(to bottom, #600204, #6E0408);
}

*/


/*
   Botones Gris Oxford
*/

.ui-dialog-buttonset>button {
    background-color: #afb4cb;
    color: white;
    border-radius: 4px;
    padding: 4px 12px;
    border-width: 1px;
    border-color: #414141;
    font-weight: normal;
    text-shadow: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#afb4cb), to(#414141));
    background-image: -webkit-linear-gradient(top, #afb4cb, #414141);
    background-image: -moz-linear-gradient(top, #afb4cb, #414141);
    background-image: linear-gradient(to bottom, #afb4cb, #414141);
}

.ui-dialog-buttonset>button:active {
    border-color: #414141;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#414141), to(#afb4cb));
    background-image: -webkit-linear-gradient(top, #414141, #afb4cb);
    background-image: -moz-linear-gradient(top, #414141, #afb4cb);
    background-image: linear-gradient(to bottom, #414141, #afb4cb);
}

.btn.btn-primary {
    background-color: #afb4cb;
    border-color: #414141;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#afb4cb), to(#414141));
    background-image: -webkit-linear-gradient(top, #afb4cb, #414141);
    background-image: -moz-linear-gradient(top, #afb4cb, #414141);
    background-image: linear-gradient(to bottom, #afb4cb, #414141);
}

.btn.btn-primary:active {
    background-color: #afb4cb;
    border-color: #414141;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#414141), to(#afb4cb));
    background-image: -webkit-linear-gradient(top, #414141, #afb4cb);
    background-image: -moz-linear-gradient(top, #414141, #afb4cb);
    background-image: linear-gradient(to bottom, #414141, #afb4cb);
}


/*
 Media based styles
*/

@media (max-width: 399px) {
    /*@media handheld and (max-width: 499px) {*/
    .top {
        position: inherit !important;
        height: auto !important;
        margin-top: 0 !important;
        padding: 0;
    }
    footer {
        height: 5em !important;
        position: inherit !important;
    }
    footer address {
        text-align: left !important;
        height: 1em !important;
        line-height: 1.2em !important;
        float: left !important;
        padding-right: 0;
        padding-left: 12px !important;
    }
    .main-content {
        margin-top: 0;
    }
    .cat {
        min-height: 320px !important;
    }
    .cat .info {
        min-height: 300px !important;
    }
    .cat .pic {
        height: 160px;
    }
    .pic img {
        height: 140px;
        width: auto;
        max-width: 220px;
        display: block;
    }
    .navbar-brand {
        width: 70%;
        height: auto;
    }
    .navbar-brand img {
        width: 100%;
        height: auto;
    }
    .navs {
        display: block;
        width: 100%;
        margin: 0;
    }
    .navs li {
        list-style-image: none;
        display: block;
        padding: 4px;
        /*background-color: silver;*/
    }
    #info_dlg {
        width: 95%;
        height: 99%;
    }
}