/*
//////////////////////////////////////////////////////
//  LOADER
//////////////////////////////////////////////////////
*/
.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    background: #ffffff;
}

.loader .loader-cont {
    position: fixed;
    margin: auto;
    left: 0;
    top: 25%;
    text-align: center;
    width: 100%;
}

.fil0 {
    fill: #404F21;
    fill-rule: nonzero
}

/*
//////////////////////////////////////////////////////
//  VARIOS
//////////////////////////////////////////////////////
*/
.ui.list{
    color: #ffffff;
}

.servicio {
    color: #404F21;
}

.secondary.pointing.menu {
    border-bottom: none !important;
}

.masthead {
    min-height: 300px;
}

.masthead.grande {
    min-height: 750px;
}

.color-verde {
    background: #505C24 !important;
}

.color-claro {
    background: #B5CC18 !important;
}

.color-galeria {
    background: #EDEDEF !important;
}

.color-verde h1, .color-claro h1, .color-claro p, .color-verde p, .color-verde .ui.header {
    color: #FFFFFF !important;
}

.cut-top {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 90px 100vw 0 0;
    transform: scale(1.0001);
}

.cut-bottom {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 90px 100vw 0 0;
    transform: scale(1.0001);
}

.cut-top.verde {
    border-color: transparent #505C24 transparent transparent;
}

.cut-bottom.verde {
    border-color: #505C24 transparent transparent transparent;
}

.cut-top.claro {
    border-color: transparent #B5CC18 transparent transparent;
}

.cut-bottom.claro {
    border-color: #B5CC18 transparent transparent transparent;
}

.cut-top.galeria {
    border-color: transparent #EDEDEF transparent transparent;
}

.cut-bottom.galeria {
    border-color: #EDEDEF transparent transparent transparent;
}

p {
    font-size: 24px;
}

h1.ui.header {
    font-size: 48px !important;
}

.logo-cont {
    padding-top: 100px !important;
}

.ui.list {
    font-size: 2em !important;
}

/*
//////////////////////////////////////////////////////
//  MENU
//////////////////////////////////////////////////////
*/
.overlay {
    padding: 0em;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all 1s ease;
    background: transparent;
    right: 0;
    z-index: 999;
}

.fixed.overlay {
    position: fixed;
    padding: 0 0 2.5px 0;
    right: 0;
    top: 0;
    left: 0;
    background: #505C24;
    color: #ffffff;
    width: 100%;
}

.ui.container.overlay .column {
    padding-top: 0 !important;
}

.ui.container.overlay .ui.grid + .grid {
    margin-top: -0.5rem;
}

.fixed.overlay .item, .fixed.overlay .item.active {
    color: #ffffff !important;
}

.fixed.overlay .item.active {
    border-color: #ffffff !important;
}

.ui.sidebar {
    background-color: #505C24 !important;
}

/*
//////////////////////////////////////////////////////
//  MASONRY
//////////////////////////////////////////////////////
*/
.freewall {
    margin: 15px;
}

.brick img {
    margin: 0;
    display: block;
}

/*
//////////////////////////////////////////////////////
//  FONDOS
//////////////////////////////////////////////////////
*/
.fondo:before {
    content: "";
    position: absolute;
    top:-100px;
    left: 0;
    right: 0;
    z-index: -1;
    transition: all 2s ease;
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/fondos/emprsa1500.jpg') no-repeat center !important;
}

.blur.fondo:before {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.fondo-servicios{
    padding-bottom: 100px !important;
    padding-top: 100px !important;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    transition: all 2s ease;
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/fondos/fondo-servicios.jpg') no-repeat center #505C24 !important;
}

/*
//////////////////////////////////////////////////////
//  CONTACTO
//////////////////////////////////////////////////////
*/
#map {
    width: 100%;
    height: 400px;
}

/*
//////////////////////////////////////////////////////
//  TRANSICION
//////////////////////////////////////////////////////
*/
/* always present */
.expand-transition {
    transition: all 2s ease;
    background-color: #eee;
    overflow: hidden;
}

/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
    opacity: 0;
}
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
    opacity: 0;
    transition: opacity 0.5s ease; /* Transición suave de la opacidad durante 0.5 segundos */
}
/* Define la animación de transición */
@keyframes fadeOut {
  from {
    opacity: 1; /* Estado inicial: completamente visible */
  }
  to {
    opacity: 0; /* Estado final: completamente transparente */
  }
}

/* Aplica la animación a los estados de entrada y salida */
.expand-enter, .expand-leave {
  animation-duration: 0.5s; /* Duración de la animación: medio segundo */
  animation-fill-mode: both; /* Mantiene los estilos finales después de la animación */
}

/* Define el estado inicial para la entrada */
.expand-enter {
  opacity: 0; /* Comienza completamente transparente */
  animation-name: fadeOut; /* Aplica la animación de desvanecimiento */
}

/* Define el estado final para la salida */
.expand-leave {
  opacity: 1; /* Comienza completamente visible */
  animation-name: fadeOut; /* Aplica la misma animación de desvanecimiento */
}