@charset "utf-8";
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

#popupBody{
    width: 46%;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    transition: all 5s ease-in-out;
    margin: 20% auto;    
}

#cerrar{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #F00;
}

/*
-----------------------
EVENTOS FIDES */

.eventos-fides {
    color: white;
    text-decoration: none;
}

.eventos-fides .fondo {
    background-size: cover;
    background-color: #ffffff;
    padding: 20px; 
    min-height: 300px; 
    position: relative; 
    max-width: 400px; 
    margin-left: auto; 
    margin-right:auto;
}

.eventos-fides .fondo2 {
    background-size: cover;
    background-color: #ccc;
    padding: 20px; 
    min-height: 300px; 
    position: relative; 
    max-width: 1100px; 
    margin-left: auto; 
    margin-right:auto;
}

.eventos-fides .fecha {
    background-color: #39b54a; 
    border-radius: 0px 0px 8px 8px; 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .7)!important; 
    color: white; 
    padding: 6px; 
    position: relative; 
    width: 70px; 
    top:-20px; 
    text-align: center; 
    float: right;
}

.eventos-fides .dia {
    font-size: 2.5rem; 
    margin-bottom: -10px!important;
}

.eventos-fides .mes {
    font-size: 1.5rem; 
    margin-bottom: 0!important;
}

.eventos-fides .texto {
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    right: 20px;
    color: white;
    text-shadow: 0 0 2px #000000!important;
}

.eventos-fides .texto h2 {
    font-size: 2rem;
    font-weight: 100;
    line-height: 36px;
    text-transform: uppercase;
}

.eventos-fides .texto img {
    height: 24px;
    vertical-align: bottom;
    padding-right: 6px;
}

.eventos-fides-detalle {
    padding: 70px 0 1px 0;
    font-size: 16px;
}

.eventos-fides-detalle-info {
    padding-top: 30px; 
    font-size: 16px;
}

.eventos-fides-logo {
    padding-top: 60px;
}

.eventos-fides-logo img {
    width: 130px;
    margin-bottom: -15px;
}

.eventos-fides-titulo h1 {
    font-size: 24px;
    color: #39b54a!important;
    text-align: right;
    margin-bottom: 55px;
}

@media only screen and (max-width: 1023px) {
    .eventos-fides-logo {
        text-align: center;
    }
    
    .eventos-fides-logo img {
    margin-bottom: -55px;
    }
    
    .eventos-fides-titulo h1 {
        text-align: center;
        margin-bottom: 26px;
    }
    
}

@media only screen and (max-width: 749px) {
    .eventos-fides-logo {
        padding-top: 0;
        text-align: center;
    }
    
    .eventos-fides-logo img {
    margin-bottom: 15px;
    }
    
    .eventos-fides-descripcion {
        padding-top: 30px;
    }
    
    .eventos-fides-detalle {
        padding-top: 0;
    }

    .eventos-fides-titulo h1 {
        text-align: center;
    }
    
}

/*
-----------------------
EVENTOS ESTUDIANTES */

.eventos-estudiantes {
    color: white;
    text-decoration: none;
}

.eventos-estudiantes .fondo {
    background-size: cover;
    background-color: #ccc;
    padding: 20px; 
    min-height: 300px; 
    position: relative; 
    max-width: 400px; 
    margin-left: auto; 
    margin-right:auto;
}

.eventos-estudiantes .fondo2 {
    background-size: cover;
    background-color: #ccc;
    padding: 20px; 
    min-height: 300px; 
    position: relative; 
    max-width: 1100px; 
    margin-left: auto; 
    margin-right:auto;
}

.eventos-estudiantes .fecha {
    background-color: #b1b0b0; 
    border-radius: 0px 0px 8px 8px; 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .7)!important; 
    color: white; 
    padding: 6px; 
    position: relative; 
    width: 70px; 
    top:-20px; 
    text-align: center; 
    float: right;
}

.eventos-estudiantes .campus {
    background-color: #ffffff; 
    border-radius: 0px 0px 8px 8px; 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .7)!important; 
    color: #b1b0b0; 
    padding: 6px; 
    position: relative; 
    width: 70px; 
    top:-20px; 
    text-align: center; 
    float: left;
}

.eventos-estudiantes .titulacion { 
    position: absolute; 
    left: 20px; 
    right: 20px;
    top: 160px; 
    text-align: center; 
}

.eventos-estudiantes .lugar {
    font-size: 0.8rem; 
    margin-bottom: -5px!important;
}


.eventos-estudiantes .dia {
    font-size: 2.5rem; 
    margin-bottom: -10px!important;
}

.eventos-estudiantes .mes {
    font-size: 1.5rem; 
    margin-bottom: 0!important;
}

.eventos-estudiantes .texto {
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    right: 20px;
    color: white;
    text-shadow: 0 0 2px #000000!important;
}

.eventos-estudiantes .textotop {
    position: absolute; 
    top: 200px; 
    left: 20px; 
    right: 20px;
    color: white;
    text-shadow: 0 0 2px #000000!important;
}

.eventos-estudiantes .textotop2 {
    position: absolute; 
    top: 200px; 
    left: 20px; 
    right: 20px;
    color: white;
    text-shadow: 0 0 2px #000000!important;
}

.eventos-estudiantes .textotop2 h3 {
    font-size: 0.85rem;
    font-weight: 100;
}

.eventos-estudiantes .textotop2 h4 { 
    font-weight: 100;	
}


.eventos-estudiantes .texto h2 {
    font-size: 2rem;
    font-weight: 100;
    line-height: 36px;
    text-transform: uppercase;
}

.eventos-estudiantes .texto img {
    height: 24px;
    vertical-align: bottom;
    padding-right: 6px;
}

.eventos-estudiantes-detalle {
    padding: 70px 0 1px 0;
    font-size: 16px;
}

.eventos-estudiantes-detalle-info {
    padding-top: 30px; 
    font-size: 16px;
}

.eventos-estudiantes-logo {
    padding-top: 60px;
}

.eventos-estudiantes-logo img {
    width: 130px;
    margin-bottom: -15px;
}

.eventos-estudiantes-titulo h1 {
    font-size: 24px;
    color: #39b54a!important;
    text-align: right;
    margin-bottom: 55px;
}

@media only screen and (max-width: 1023px) {
    .eventos-estudiantes-logo {
        text-align: center;
    }
    
    .eventos-estudiantes-logo img {
    margin-bottom: -55px;
    }
    
    .eventos-estudiantes-titulo h1 {
        text-align: center;
        margin-bottom: 26px;
    }
    
}

@media only screen and (max-width: 749px) {
    .eventos-estudiantes-logo {
        padding-top: 0;
        text-align: center;
    }
    
    .eventos-estudiantes-logo img {
    margin-bottom: 15px;
    }
    
    .eventos-estudiantes-descripcion {
        padding-top: 30px;
    }
    
    .eventos-estudiantes-detalle {
        padding-top: 0;
    }

    .eventos-estudiantes-titulo h1 {
        text-align: center;
    }
    
}