:root {
  --primary-color: #a57f2d;
  --primary-dark-color: #611232;
  --primary-light-color: #51897E;
  --secondary-color: #B38E5D;
  --secondary-light-color: #D4C19C;
  --light-color-font: #FFFFFF;
  --color-font: #545454;
  --white: #FFFFFF;
  --modal-color-background: #98989A;
  --boton-cerrar-color: FFFFFF;
}

body {
    font-size: 16px !important;
    height: auto;
    overflow: auto;
}

#s4-bodyContainer{
	width:90% !important;
}

#s4-workspace{
	height: 80% !important;
}

#ms-designer-ribbon{
	margin-top:14px;
}

/*Personalización menú*/
#s4-workspace .nav {
	padding: 14px 4px;
}

#s4-workspace .navbar-brand>.sm-logo {
    height: 38px;
}

.navbar {
    height: initial !important;
}

.sub-navbar {
	background: var(--primary-color) !important;
	margin-top: 0 !important;
}

.sub-navbar .navbar-collapse {
	background-color: var(--primary-color) !important;
}

.nav>li>a {
	color: var(--white);
	text-decoration: none;
	padding: 10px 4px !important;
	font-size:14px;
}

.nav>li>a:hover {
	background-color: var(--primary-dark-color) !important;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: var(--primary-dark-color) !important;
    color: var(--white);
}

.dropdown-menu>li>a {
	color: var(--white) !important;
    font-weight: 100 !important;
    font-size:12px;
}

.dropdown-menu>li>a:hover , a.ms-signInLink:hover{
	color: var(--white) !important;
	background-color: var(--secondary-color) !important;
}

a:visited {
    color: var(--color-font);
    text-decoration: none;
}

.navbar-nav>li>.dropdown-menu {
    background-color: var(--primary-color);
}

.navbar-toggle .icon-bar {
    background-color: var(--white);
}

#s4-workspace button.navbar-toggle:hover {
    border-color: var(--white) !important;
    background-color: var(--primary-dark-color) !important;
}

.ms-signInLink {
	font-size: 12px !important;
	color: var(--white) !important;
	text-decoration:none;
	padding: 3px 20px !important;
	width: 100% !important;
}


/*Componente busqueda en la plataforma*/
.ms-srch-sb {
	margin-top: 4px;
	padding-top: 6px;
	padding-bottom: 6px;
	background:var(--white);
}
 
.ms-srch-sb > input {
	font-size: 0.8em;
	line-height:2;
	/*width:160px;*/
	height:1.8em;
	padding:4px;
}

.ms-srch-sb-borderFocused {
	border-color: var(--primary-color);
}

.ms-srch-sb-border {
	border-color: var(--white);
	background-color: #EEEEEE;
}

.ms-srch-sb-border:hover {
	border-color: var(--white);	
}

/*//*/




.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:-100px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
  background-color: var(--primary-color);
}
.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
  border-left-color:#555;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.dropdown-menu>li>table {
	table-layout:fixed;
	width: 440px;	
}

.dropdown-menu>li>table a {
	font-size: 12px;
	color: var(--white) !important;
	text-decoration:none;
	display: block;
}

.dropdown-menu>li>table td {
	padding-left: 6px;
}

.dropdown-menu>li>table td:hover {
	background-color: var(--secondary-color);
}

.carousel-indicators li {
    background-color: var(--primary-color) !important;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


.container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

a.thumbnail-link , 
a.thumbnail-link:hover, 
a.thumbnail-link:visited, 
a.thumbnail-link:active, 
a.thumbnail-link:focus {
	text-decoration:none !important;
}

.thumbnail{
	height: 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  	transition: box-shadow 0.4s ease-in-out !important;
}

.thumbnail:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}

.thumbnail-img{
	max-width:100%;
	max-height:100%;
	object-fit: cover;
}





.thumbnail-img_p{
	max-width:90%;
	max-height:90%;
}



.btn-carousel {
	font-size: 14px !important;
	padding: 4px 12px !important;
	background: var( --primary-dark-color) !important;
	color: var(--white) !important;
	font-weight: 500 !important;
	border: 0 !important;
    box-shadow: none !important;
}

.btn-carousel:hover, .btn-datatur-report:hover {
	background: var( --secondary-color) !important;
}

.btn-datatur-lg {
	font-size: 32px !important;
	padding: 10px 12px !important;
	background: var( --primary-dark-color) !important;
	color: var(--white) !important;
	font-weight: 500 !important;
	border: 0 !important;
    box-shadow: none !important;
}

.btn-datatur-lg:hover, .btn-datatur-lg:hover {
	background: var( --secondary-color) !important;
}

.btn-datatur-report {
	font-size: 22px !important;
	background: var( --primary-dark-color) !important;
	color: var(--white) !important;
	font-weight: 500 !important;
    padding: 62px 84px !important;
	box-shadow: none !important;
}

/*
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
}
@media (min-width: 1200px) { 
}
*/

.underline {
	position: relative;
    background-color: #b38e5d;
    width: 35px;
    height: 5px;
    margin-bottom: 10px;
}

.table>caption{
	text-align: center;
}

.table>thead>tr>th{
	border-bottom-width: 1px !important;
    text-align: center;
    font-weight: 400;
    padding: 10px 0;
    background-color: var(--primary-color);
    color: white;
}

.table>tfoot>tr>td{
	border-bottom-width: 1px !important;
    text-align: center;
    background-color: var(--secondary-light-color);
    color: var(--color-font);
}

.table>tbody>tr>td, .table>tfoot>tr>td{
	text-align:right;
}

.table td[data-type="meses"]{
	text-align:center;
}

.table td[data-type="porcentaje"]{
    text-align: center;
}

.table td[data-type="texto-1"]{
    text-align: left;
}

.table td[data-type="texto-2"]{
	padding-left: 32px;
    text-align: left;
}

.table-marked>tbody>tr:nth-child(even){
    background-color: #E9E9E9;
}

.table a{
	color: var(--color-font);
}

.table a:hover
, .table a:active
, .table a:focus{
	color: var(--secondary-light-color) !important;
}

.table-sm{
	margin:auto;
	width:60% !important;
}

.table-md{
	margin:auto;
	width:80% !important;  /*  980% */
}

.table-lg{
	margin:auto;
	width:94% !important;
}
.table>tbody>tr.estilo-1{
    background-color: var(--secondary-light-color);
}
.table-middle>tbody>tr>td{
	vertical-align:middle !important;
}

.row h2{
	color: var(--color-font) !important;
	margin-bottom: 2px !important;
}

.ms-rte-embedil{
	width:100% !important;
}

#layoutsTable{
	max-width: 100%
}

/*media querys*/
@media (max-width: 768px) {
	.sub-navbar .navbar-brand {
		padding-left:32px;
	}
	
	#s4-workspace .navbar-brand>img {
    	height: 24px;
	}
	
	.ms-srch-sb {
		width: inherit;
	}
	
	#SearchBox{
		padding-left:10px;
	}
}

@media (min-width: 768px) {
	.col-sm-6 { 
	    margin-top: 10px;
	}
	
}

.list-info {
    background-color: var(--primary-color) !important;
    color: var(--light-color-font) !important;
}

.list-info p>a, .list-info ul>li>a {
    color: var(--light-color-font) !important;
}

.mapa-sitio li ul li>a, .mapa-sitio li ul li table tr td>a, .mapa-sitio li>a  {
	color: #287A28 !important;
}


.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;  /* Cambiado a 0 */
  top: 0;   /* Cambiado a 0 */
  width: 100%; /* Cambiado a 100% */
  height: 100%; /* Cambiado a 100% */
  background-color: rgba(0, 0, 0, 0.8); /* Agregado un fondo semi-transparente */
  display: grid; /* Usar grid */
  place-items: center; /* Centrar horizontal y verticalmente */
}

/* Imagen ampliada dentro del modal */
.modal-content {
  display: block;
  width: 70%; /* Ajusta según sea necesario */
  max-width: 70%;
  background-color: var(--modal-color-background) !important; /* Mueve el fondo aquí si es necesario */
}

/* Botón de cerrar */
.close {
  position: absolute;
  top: 2px;
  right: 2px;
  color: white;   /* var(--boton-cerrar-color) !important;*/
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: var(--boton-cerrar-color) !important;
  text-decoration: none;
  cursor: pointer;
}

/* Animación de entrada */
@keyframes zoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}


/* animacion fade  */
.image-container {
  position: relative;
  width: 100%; 
  height: 300px;
  overflow: hidden;
} 

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%%;
  height: 90%%;
  transition: opacity 0.5s ease-in-out;
}

.image-back {
  opacity: 0;
}

.image-container:hover .image-back {
  opacity: 1;
}

.image-container:hover .image-front {
  opacity: 0;
}






/* aqui acaba */




/*carusel 3d*/
.content-all{
    width: 430px;
    height: 200px;
    margin: auto;
    perspective: 1200px;
    position: relative;
    margin-top: 50px;
}
.content-carrousel{
    width: 100%;
    position: absolute;
    animation: rotar 16s infinite linear;
    transform-style: preserve-3d;
}
.content-carrousel:hover{
    animation-play-state: paused;
    cursor: pointer;
}
.content-carrousel figure{
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: absolute;
    box-shadow: 0px 0px 6px 0px black;
    padding-top: 15px;

}
.content-carrousel figure:hover{
    box-shadow: 0px 0px 0px 0px black;
    transition: all 400ms;
}

.content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);}
.content-carrousel figure:nth-child(2){transform: rotateY(72deg) translateZ(300px);}
.content-carrousel figure:nth-child(3){transform: rotateY(144deg) translateZ(300px);}
.content-carrousel figure:nth-child(4){transform: rotateY(216deg) translateZ(300px);}
.content-carrousel figure:nth-child(5){transform: rotateY(288deg) translateZ(300px);}
.content-carrousel figure:nth-child(6){transform: rotateY(360deg) translateZ(300px);}

.content-carrusel img{
    width:100%;
    transition: all 300ms;
}

.content-carrousel img:hover{ 
    transform: scale(1.1); 
    transition: all 300ms;}

@keyframes rotar{
                    from{transform: rotateY(0deg);} to {transform: rotateY(360deg);}
                }
}
/*/carusel 3d*/