/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 30 nov. 2023, 16:42:57
    Author     : DanielCarlosGarzaGon
    Update : 04 Agu. 2024, 15:10:16
*/

/* ============ barra ============ */
 /* Estilo de la barra horizontal (nav) */
  #csMenu {
    display: inline-block;	
    font-size: 16px;    
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    font-weight: bold;
    position: relative;
    z-index: 10;
  }  
  /* Estilo de bloque del primer nivel */
  #csMenu ul {
    margin: 0;
    padding: 0;
    display: block;	
    list-style: none;
    
  }
  /* Estilo de cada celda */
  #csMenu ul li {
    float: left;    
    display: block;	
  }
  /* Estilo de cada enlace */
  #csMenu ul li a {
    color: black;	
    display: block;	    
    padding: 0.6em 0.8em;	
    text-decoration: none;
  }
  /* Estilo de cada enlace (sobre) */
  #csMenu ul li a:hover {
    background-color: #d1ffc7;
  }
  /* Estilo de bloque del segundo nivel */
  #csMenu ul li ul {
    display: none;
    position: absolute;
    background-color: #d1ffc7;
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.55);
  }
  /* Estilo de bloque del segundo nivel (sobre) */
  #csMenu ul li:hover ul {
    display: block;
  }
  /* Estilo de cada celda */
  #csMenu ul li:hover ul li {
    float: none;
  }
  /* Estilo de cada enlace */
  #csMenu ul li:hover ul li a {
    text-align: left;
    white-space: nowrap;
  }
    /* Estilo de cada enlace (sobre) */
  #csMenu ul li:hover ul li a:hover {
    background-color: #b8fca9;
  }
  /* Estilo de bloque del tercer nivel */
  #csMenu ul li ul li ul {
    display: none !important;    
  }
  /* Estilo de bloque del tercer nivel (sobre) */
  #csMenu ul li ul li:position:sticky ul {
    left: 12em;
    top: 2em;
    display: block !important;
  }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item .btn-group{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}	

/* ============ desktop view .end// ============ */

/* Override bootstrap classes */

@media all and (max-width: 991px) {

    .navbar-collapse{
        background-color: white;
        z-index: 10;
        padding-bottom: 10px;
        border-bottom: 1px #CCCCCC solid;
        border-left: 1px #CCCCCC solid;
        border-right: 1px #CCCCCC solid;
    }
    
    .navbar-completemenu{
        margin-top: 9px;
    }
    
    .navbar-minimenu{
        margin-top: -11px;
    }
}

.content-text  {
    font-size: 13px !important;
    color: #666666 !important;
}
.nopadding {
   padding: 0 !important;
}

.container-fluid{
    max-width: 1600px;
}

.carousel-control-next, .carousel-control-prev {
    z-index: 3 !important;
}

/* End override bootstrap classes */

/* HEADER */

header {
    height: 110px;
}

.sticky-header{
    position: sticky; top: 0;
}

.fixed-sticky{
    width: 100%;
    position: fixed;
    z-index: 5;
    background-color: white;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px #CCCCCC solid;
}

@keyframes logo-sticky-animation {
  from {width: 150px;}
  to {width: 100px;}
}

.logo-sticky-animated {
    width: 100px;
    animation-name: logo-sticky-animation;
    animation-duration: 1s;
}

@keyframes height-sticky-animation {
  from {height: 0px;}
  to {height: 70px;}
}

.height-sticky-animated {
    animation-name: height-sticky-animation;
    animation-duration: 0.5s;
    height: 70px;
}

@keyframes display-sticky-animation {
    from {top:0;opacity:0.2;}
    to {top:30;opacity:1;}
}

.display-sticky-animated {
    animation-name: display-sticky-animation;
    animation-duration: 1s;
}

/* End Header */

ul.list-content {
    list-style: none;
    padding-left: 10px;
}

ul.list-content li:before
{
    content: '>';
    color: #008f45;
    font-weight: bolder;
    margin-right: 5px;
}

ul.list-content li{
    line-height: 18px !important;
    padding-bottom: 5px;
}

ol.list-content {
    padding-left: 15px;
}

input[type=text].input-content{
    border: 2px solid #333333;
    border-radius: 20px;
    text-align: center;
    padding: 6px 0px;
    color: #333333;
    font-weight: bold;
    margin: 10px 0px;
}

textarea.input-content{
    border: 2px solid #333333;
    border-radius: 20px;
    text-align: center;
    padding: 6px 0px;
    color: #333333;
    font-weight: bold;
    margin: 10px 0px;
}

input[type=submit].submit-content{
    padding: 0px 6px 0px 6px !important;
    border: 0px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    background-color: #008f45;
    text-align: center;
}

.form-academicos{
    width: 600px;
}
.textarea-contacto{
    height: 70px;
}

.form-egreso{
    width: 700px;
}
.form-contacto{
    width: 80%;
}
.space-bottom {
    margin-bottom: 60px;
}

.space-top {
    margin-top: 60px;
}

.menu-padding{
    padding-top: 30px;
}

.menu-link{
    padding: 2px 9px 2px 9px !important;
    color: #777777;
}

.menu-link:hover{
    color: #333333;
}

.link-content{
    font-size: 13px;
    color: #666666;
}

.link-content:hover{
    color: #333333;
    text-decoration: underline;
}

.link-content-green, ol a{
    font-size: 14px;
    color: #008f45;
    text-decoration: underline;
}

.link-content-green:hover, ol a:hover{
    color: #333333;
}

.green-button, .green-button-menu{
    padding: 2px 10px 5px 10px !important;
    border-radius: 15px;
    color: white !important;
    font-weight: bold;
    /*background-color: #008f45;*/
    background-color: #cc6a08;
    text-align: center;
}

.green-button:hover, .green-button-menu:hover{
    color: white;
    /*background-color: #119f56;*/
    background-color: #ff870f;
}

.green-button-menu{
    width: 145px;
}

.title{
    font-size: 30px;
    padding-top: 12px;
    padding-bottom: 8px;
}

.title, .subtitle {
    color: #008f45;
    font-weight: bold;
    text-transform: uppercase;
}

.subtitle-light{
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #008f45;
    text-transform: uppercase;
}

.border-green-bottom {
    border-bottom: 2px solid #008f45;
    width: 50%;
}

@keyframes home-logo-animation {
  from {width: 180px;}
  to {width: 150px;}
}

.home-logo {
    padding-top: 10px;
    padding-bottom: 10px;
}

.home-logo-animated{
    width: 150px;
    animation-name: home-logo-animation;
    animation-duration: 1s;
}

.home-front-image, .home-front-image-2, .home-front-image-3, .pages-front-image, .ficha-front-image {
    background-size: 100%;
    background-position-y: 50%;
    width: 100%;
    opacity: .2;
}

.home-front-green, .pages-front-green {
    position: absolute;
    top:0px;
    background-color: #008f45;
    /*background-color: #cc6a08;*/
    background-size: 100%;
    width: 100%;
    opacity: .2;
    z-index: 1;
}

.home-front-image {
    background-image: url("../images/home-front-image.JPG");
}

.home-front-image-2 {
    background-image: url("../images/home-front-image-2.jpg");
}

.home-front-image-3 {
    background-image: url("../images/home-front-image-3.JPG");
}
.home-front-image, .home-front-image-2, .home-front-image-3, .home-front-green, .ficha-front-image, .ficha-front-image-2  {
    height: 550px;
}

.manufactura {
    background-image: url("../images/manufactura-front-image.jpg");
}

.electronica {
    background-image: url("../images/electronica-front-image.jpg");
}

.agroindustrial {
    background-image: url("../images/agroindustrial-front-image.jpg");
}

.comercio {
    background-image: url("../images/comercio-front-image.jpg");
}

.ambiental {
    background-image: url("../images/ambiental-front-image.jpg");
    background-position-y: -100px;
}

.ficha {
    background-image: url("../images/slider_inscripciones.jpg");
    /*background-position-y: -270px;*/
    background-repeat: no-repeat;
}

.nosotros {
    background-image: url("../images/nosotros-front-image.jpg");
    background-position-y: -170px;
}

.transparencia {
    background-image: url("../images/transparencia-front-image.jpeg");
    background-position-y: -400px;
}

.apoyos {
    background-image: url("../images/apoyos-front-image.JPG");
    background-position-y: -50px;
}

.vinculacion {
    background-image: url("../images/vinculacion-front-image.JPG");
}

.academicos{
    background-image: url("../images/academicos-front-image.JPG");
    background-position-y: -50px;
}

.extension {
    background-image: url("../images/extension-front-image.JPG");
}

.admision {
    background-image: url("../images/admision-front-image.JPG");
    background-position-y: -100px;
}

.normativa {
    background-image: url("../images/normativa-front-image.JPG");
    background-position-y: -100px;
    background-position-x: 80px;
}

.egresos {
    background-image: url("../images/egreso-front-image.JPG");
}

.contacto {
    background-image: url("../images/contacto-front-image.JPG");
}

.trabajo {
    background-image: url("../images/trabajo-front-image.JPG");
    background-position-y: -100px;
}

.psicopedagogia {
    background-image: url("../images/psicopedagogia-front-image.JPG");
    background-position-y: -200px;
}

.estudiantil {
    background-image: url("../images/estudiantil-front-image.jpeg");
    background-position-y: -200px;
}

.pages-front-image, .pages-front-green {
    height: 300px;
}

.ficha-front-image {
    /*background-image: url("../images/campus-2.JPG"); */
    background-image: url("../images/slider_inscripciones.jpg");
    /*background-position-y: -180px;*/
}

@keyframes home-front-animation {
  from {top:20%;opacity:0.2;}
  to {top:40%;opacity:1;}
}

.home-front-text{ 
    top: 40%;
    animation-name: home-front-animation;
    animation-duration: 1s;
}

.ficha-front-text{
    font-weight: bold;   
    top: 30px;
}

.home-front-text, .ficha-front-text{
    position: absolute;
    width: 100%;
    z-index: 2;
}

.home-front-font{
    font-size: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.home-front-font1{
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.round-left img {
    border-radius: 0 250px 250px 0;
}

.round-right img {
    border-radius: 250px 0 0 250px;
}

@keyframes round-images-animation {
    from {width: 75%;}
    to {width: 100%;}
}

.home-nuestras-carreras {
    height: 250px;
    object-fit: cover;
}

.round-images-animated{
    animation-name: round-images-animation;
    animation-duration: 0.5s;
    width: 100%;
}

.observed-image{}

.image-carrera {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.image-content-initial{
    width: 75%;
}
.image-content-small {
    height: 300px;
    object-fit: cover;
}

.image-content-medium {
    height: 400px;
    object-fit: cover;
}

.stay {
    display: flex;
    flex-direction: column;
    align-self: start;
}

.green-bar {
    height: 70px;
    background-color: #008f45;
}
.bg-green-bar {
    background-image: url("../images/bg-green-bar.jpg");
    background-size: auto;
    background-position-y: 0px;
    background-position-x: 0px;
    background-repeat: repeat-x;
    width: auto;
    height: 70px;
}

.img-campus{
    height: 350px;
    width: 50%;
    object-fit: cover;
}

.actividades-text{
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 10px;
    color: #666666;
    font-size: 15px;
}

.bg-green-content{
    background-color: #ebf6f0;
}

.bg-lightgreen-content{
    background-color: #5ecf81;
}

.divisor-green-content{
    border-left-color: #008f45;
    border-left-style: solid;
    border-left-width: 2px;
}

.padding-row-topbottom{
    padding-top: 30px;
    padding-bottom: 30px;
}
.padding-row-top{
    padding-top: 30px;
}
.padding-row-bottom{
    padding-bottom: 30px;
}

.footer {
    background-color: #008f45;
    height: 80px;
}

.footer-content{
    position: relative;
    top: 20px;
}
.footer-font {
    font-size: 25px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
}
.footer-image {
    width: 22px;
    filter: invert(97%) sepia(0%) saturate(13%) hue-rotate(204deg) brightness(103%) contrast(104%);
    margin-top: -10px;
    margin-left: 15px;
}

.footer-image-white {
    width: 22px;
    margin-top: -10px;
    margin-left: 15px;
}

.image-green{
    width: 18px;
    filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(3233%) hue-rotate(141deg) brightness(92%) contrast(101%);
}

table.table-bolsa-trabajo{
    width: 100%;
}

table.table-bolsa-trabajo tr:nth-child(odd) td  {
    background-color: #ebf6f0;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12%;
    width: 50%;
}
table.table-bolsa-trabajo tr:nth-child(even) td {
    background-color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12%;
    width: 50%;
}

.padding-left-content{
    padding-left: 12%;
}

.img-galeria-estudiantil{
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.icon-arrow-green{
    color: #008f45;
    font-size: 15px;
    font-weight: bolder;
    margin-right: 5px;
}
table.table-planeacion tr td{
    padding-right: 30px;
}

img.violentometro{
    width: 100%;
    height: 300px;
}
img.portadas{
    height: 250px;
    padding-right: 150px;
}

.reorder, .reorder-reverse {
    display: flex;
}

.space-bottom-md{
    margin-bottom: 0px;
}

@media (max-width: 991.98px) { 
    .green-button-menu{
        margin-top: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 768px) {

    .reorder {
        flex-direction: column;
    }

    .reorder-reverse {
        flex-direction: column-reverse;
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        max-width: 100% !important;
        padding: 0;
    }

    .round-left{
        padding-right: 4% !important;
    }
    
    .round-right, .title, .content-text, .subtitle {
        padding-left: 4% !important;
    }
    
    td.content-text .subtitle{
        padding-left: 0px !important;
    }
    
    .space-bottom {
        margin-bottom: 30px;
    }
    
    iframe {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .green-button-content{
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .space-bottom-md{
        margin-bottom: 20px;
    }
    
    img.portadas{
        padding-right: 20px;
    }

}