@charset "utf-8";

:root {
 --rojo: linear-gradient(90deg, #EE3018, #610F10);
}

body, td, th, input, select, textarea, p, h1, h2, h3, h4, h5, h6, a, li{
    font-family: 'Montserrat', sans-serif;
    color:#5B5B5F;
}
body, td, th, input, select, textarea{
    font-size:16px;
}
body{margin:0px;padding: 0px;}

h1{color:#991b12;}
h2{color:#991b12;}
h3{color:#5B5B5F;}
h4{color:#000;}
h5{color:#000;}
h6{color:#5B5B5F;}
/* Estilos para las zebras */
.zebra { margin-top:15px; margin-bottom:20px;}
.zebra td { border-bottom: 1px solid #f1f1f1;}
.zebra tr.alt td {      background: #f7f7f7;}
.zebra tr.over td { background: #E2E2E2;}
.zebra tr.title td { background-color: #D6D6D6; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999; }
/* Retoques al jQuery UI*/
.ui-state-default, .ui-widget-content .ui-state-default { background: #302010; color:#FFF; border:none; }
.ui-state-active, .ui-widget-content .ui-state-active { color:#FFF; border:none; background-color: #A7CF3A; background-image:none; }
.ui-state-default, .ui-widget-content .ui-state-default * { color:#FFF; border:none; }
.ui-state-active, .ui-widget-content .ui-state-active * { color:#FFF; border:none; }
.ui-widget-header, .ui-widget-content { border:none; background:#FFF; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color:#FFF; }
.ui-tabs-nav { border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #626262; padding-bottom:5px; border:none; }
.ui-tabs .ui-tabs-nav li a{ padding:5px;}
.margin{margin: 5px;}
.clear{clear: both;}
#MenuVertical{padding: 0; margin: 0; width: 172px; float: left;  margin-right: 27px;}
#MenuVertical li { list-style-position: inside; list-style-type: none; padding: 0px; margin-top: 3px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; list-style-image: url(vineta.gif); }
#MenuVertical li a { color: #3e545f; display: inline; list-style-position: inside; list-style-type: none; padding: 0px; font-size: 13px; font-weight: normal; text-decoration: none; margin: 0px; }

/* Tags */
p {
    font-weight: 300;
    line-height: 1.5;
    text-align: justify;
}
a {
    transition: all 0.3s ease-in-out;
}
a:hover{
    text-decoration: none;
    color: red;
}
a:visited,a:active,a:focus{
    text-decoration: none !important;
}
*:focus{
    outline: none !important;
}
/*------------*/
.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 50px;
}

/* HEADER */
header {
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;
    transition: all .4s ease;
    background: rgba(0,0,0,0.29);
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 1em;
    max-width: 1200px;
    margin: 0 auto;
}
.nav-brand {
    max-width: 150px;
}
.nav-brand img{
    width: 100%;
}
#fondo {
    background-image: url(bg.jpg);
    background-size: cover;
    background-position: center center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*header*/
.nav-icon {
    color: #fff;
    font-size: 35px;
}

/*section 1*/

.foto-phone {
    max-width: 160px;
    margin: auto;
    position: relative;
    z-index: 3;
}

.titulo {
    padding: 3em 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.titulo > h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px #000;
}
.titulo > h2:before, .titulo > h2:after {
    content: '';
    display: block;
    height: 124px;
    width: 150px;
    background: rgba(255, 255, 255, 0.37);
    position: absolute;
}
.titulo > h2:before {
    top: -30px;
    left: -15px;
}
.titulo > h2:after {
    z-index: -1;
    top: -15px;
    left: -30px;
}

.content-footer > div {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.29);
    color: #fff;
    padding: 0.5em 1em;
}

.login > a{
    color: #fff;
    display: flex;
    align-items: center;
}
.login {
    display: flex;
}
.login > a {
    margin: 0 8px;
}
header.fixed {
    padding: 0;
}

.login > a:hover {
    background: #fff;
}

/* Media Queries */
@media (min-width: 500px) {

    #fondo > div{
        display: flex;
        flex-direction: row-reverse;
    }

    .titulo {
        padding: 1em 0;
    }

    .titulo > h2 {
        font-size: 25px;
    }

    .ct{
        display: flex;
        align-items: center;
    }
    
}

@media (min-width: 768px){
    
    .login > a {
        background: #d5ccd7;
        color: #5E5E5E;
        width: 158px;
        height: 43px;
        border-radius: 35px;
        display: flex;
        justify-content: center;
       
    }
    .login > a > span {
        margin: 0!important
    }
}

@media (min-width: 992px){
    .foto-phone {
        max-width: 324px;
    }
    .titulo > h2 {
        font-size: 30px;
    }

   .titulo > h2:before, 
   .titulo > h2:after{
        width: 326px;
        height: 270px;
   }

   .titulo > h2:before {
        top: -124px;
        left: -65px;
    }
    .titulo > h2:after {
        z-index: -1;
        top: -71px;
        left: -87px;
    }

    .site-content {
        padding-top: 140px;
    }
}

@media(min-width: 1200px){
    
    .ct{
        justify-content: flex-end;
    }
    .foto-phone{
        margin: initial;
        margin-right: auto;
    }

    .titulo > h2 {
        font-size: 40px;
    }
    
    header{
        padding: 1em;
        background: transparent;
    }

}