* {
  padding: 0;
  margin: 0;
  font-family: 'ralewaylight';
}
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
	padding-left: 0;
	padding-right: 0;
}
@font-face {
        font-family: 'ralewaylight';
    src: url('../fonts/raleway-light.eot');
    src: url('../fonts/raleway-light.eot?#iefix') format('embedded-opentype'),        
         url('../fonts/raleway-light.woff') format('woff'),
         url('../fonts/raleway-light.ttf') format('truetype'),
         url('../fonts/raleway-light.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
        font-family: 'ralewaybold';
    src: url('../fonts/raleway-bold.eot');
    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),        
         url('../fonts/raleway-bold.woff') format('woff'),
         url('../fonts/raleway-bold.ttf') format('truetype'),
         url('../fonts/raleway-bold.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: 'ralewaysemibold';
    src: url('../fonts/raleway-semibold.eot');
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),        
         url('../fonts/raleway-semibold.woff') format('woff'),
         url('../fonts/raleway-semibold.ttf') format('truetype'),
         url('../fonts/raleway-semibold.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
        font-family: 'ralewaymedium';
    src: url('../fonts/raleway-medium.eot');
    src: url('../fonts/raleway-medium.eot?#iefix') format('embedded-opentype'),        
         url('../fonts/raleway-medium.woff') format('woff'),
         url('../fonts/raleway-medium.ttf') format('truetype'),
         url('../fonts/raleway-medium.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
 @font-face {
        font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),        
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Gwendolyn&display=swap');
body{
	font-family: 'ralewaylight';
	height:100%;width: 100%;
}
/* -----------Media Screen Dispositivos------ */

/* Imagen utilizada en pantallas de anchura 768 px y superior */
@media (min-width: 768px) {
    .direccion{
        display: block;
    }
    #brand{
        display: block;
    }
    #menu_principal{
        display: none;
        background-image: url("img/areas/jcampus.jpg");
    }
    #menu_movil{
        display: block;
    }
    #jbrand{
        display: none;
    }
    #jlogo{
        display: block;
    }
}

/* Imagen utilizada en pantallas de anchura 1200 px y superior */
@media (min-width: 992px) {
    .direccion{
        display: block;
    }
    #brand{
        display: none;
    }
    #menu_principal{
        display: block;
        background-image: url("img/areas/jcampus.jpg");
    }
    #menu_movil{
        display: none;
    }
    #jbrand{
        display: block;
    }
    #jlogo{
        display: none;
    }
}
/* -----------Barra de Dirección------------- */
.direccion{
    background-color: #ff2837;
    color:#fff;
    font-family: 'ralewaymedium';
    font-size: 14px;
    padding: 6px 6px;
    text-align: center;
    width: 100%;
}
/* ------------- Brand Jefferon ------------ */
#brand{
    background-color: #171A35;
    color:#fff;
    font-family: 'ralewaybold';
    font-size: 14px;
    padding: 6px 6px;
    text-align: center;
    width: 100%;
}
/* ------------- Menu principal ------------ */
#menu_principal{
    color: #fff;
    padding: 10px 10px 0 10px ;
}
#menu_principal .menu_logo{
    text-align: center;
}
#menu_principal .menu_logo img{
    margin-top: 10px;
    vertical-align: middle;
    width: 140px;
}
#menu_principal .menu_logo p{
    font-family: 'Gwendolyn', cursive;
    font-size: 22px;
}
#menu_principal .menu_opciones li{
    display: inline-block;
    float: right;
    font-family: 'ralewaysemibold';
    margin-top: 128px;
    padding: 8px 10px;
    text-decoration: none;
    font-size: 14px;
}
#menu_principal .menu_opciones li:hover{
    border-bottom: 12px solid #fff;
}
.menu_opciones a{
    text-decoration: none;
    color: #fff;
}
.menu_opciones a:hover{
    color: #fff;
}
.activo{
    border-bottom: 12px solid #ff2837;
}
#pie .navegador li .activo_pie{
    color:#ff2837;
    font-size: 20px;
}
/* -------------- Menú Móvil --------------- */
#jlogo{
    margin-bottom: 10px;
}
/* ----------------- Nombre de la Institución ---------------- */
#jbrand{
    color: #83C526;
    /*color: #171A35;*/
    font-family: 'ralewaybold';
    font-size: 2.5em;
    padding-top: 12px;
    text-align: center;
}
/* ------------- Servicios --------------- */
#servicios{
     background-color: #fff;
     margin-bottom: 40px;
}
.servicios img{
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.thumbnail { 
    position: relative; 
    display: inline-block;
} 
.caption { 
    position: absolute; 
    top: 75%; 
    left: 0; 
    width: 100%; 
    color:#fff;
    font-family: 'ralewaybold';
    background-color: rgba(131,187,38,0.5);
    font-size: 24px;
} 
/* -------------Acceso Sistema y mensajes PPFF ------------ */
#login_mensajes{
    display: inline-block;
    width: 100%;
    border-bottom: 20px;
}
#login_mensajes .card-body{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.card-body img{
    margin-top: 80px;
    border-radius: 50% 50%;
}
#login_mensajes .card-body p{
    margin-top: 90px;
    margin-bottom: 80px;
    padding-top: 20px;
    font-family: 'ralewaylight';
    font-size: 18px;
    font-style: italic;
}
.card_change{
    border: 1px solid #404AAF;
}
.card_line{
    border-bottom: 1px solid red;
}
.card .mensajes{
    margin-top: 80px;
    margin-bottom: 80px;
}
.card{
    border: 1px solid rgb(198,231,244);
    background-color: rgba(255,255,244,0.6);
}
.card-header{
    background-color: rgb(33, 37, 68);
    color: #fff;
}
/* ------------Videos ------------ */
#video{
    background-color: #000;
    padding: 10px 10px;
    margin-bottom: 10px;
}
#autoridades{
    display: inline-block;
    vertical-align: top;
    float: left;
    width: 100%;
}
#autoridades .card-body p{
    margin-top: 90px;
    margin-bottom: 80px;
    padding-top: 20px;
    font-family: 'ralewaylight';
    font-size: 18px;
    font-style: italic;
}
#autoridades .card-body{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
/* ---------- Info Admisión ---------- */
.texto_invita{
    font-family: 'ralewaylight';
}
.texto_invita .resalta{
    color: #1a5fff;
    font-family: 'Anton', sans-serif;
    font-size: 48px;
}
.texto_invita a{
    text-decoration: none;
    color: #1a5fff;
}
.card-body .garantia{
    color: #9895a5;
    font-family: 'ralewaysemibold';
    font-size: 24px;
    text-align: left;
}
#info_admision .card-body {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin-top: 10px;
    padding: 20px 20px;
}
.garantia{
    padding: 20px 20px;
}
.garantia .garantia_titulo{
    color: #9895a5;
    font-family: 'Exo', sans-serif;
    font-size: 24px;
    text-align: left;
}
.garantia .garantia_texto{
    font-family: 'ralewaylight';
    text-align: justify;
}
.garantia_titulo{
    
    font-family: 'Exo', sans-serif;
    font-size: 24px;
    text-align: left;
}
.garantia_titulo_resalta{
    color: #000;
    font-family: 'Exo', sans-serif;
    font-size: 24px;
    text-align: left;
}
/* ---------- Pie de Página ----------- */
#pie{
    width: 100%;
    padding: 80px 40px;
    background-color: #4f4f4f;
    overflow: auto;
}
#pie li{
    list-style: none;
}
#pie .navegador a{ 
    color: #fff;
    font-size: 14px;
    font-family: "ralewayregular";
    text-decoration: none;
    margin-left: 40px;
}
#pie .contactos p{
    padding-top: 20px; 
    color: #fff;
    font-size: 14px;
    font-family: "ralewayregular";
}
#pie .contactos img{
    width: 80px;
}
#pie .redes a{ 
    padding: 40px 14px; 
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}
#pie .redes li{
    display: inline-block;
} 
#pie .redes p{
    margin-top: 20px;
    color: #fff;
    font-size: 16px;
    font-family: "ralewaylight";
    text-align: center;
}