:root {
  --header-color: #422485;/*#482366;*/
  --main-blue: #00ACD8;
  --main-green: #08c8af;
  --main-orange: #F36D21;
  --main-pink: #E50695;
}
#logo {
	max-height: 60px;
  min-height: 50px;
 }

 #logo-footer{
  min-height: 40px;
  max-height: 50px;
 }

 .sistemas-logo {
    max-height: 200px;
 }

.dh-icon {
	height: 180px;
}

/*#pregunta-image {
  border: solid red 1px;
}*/

.fixed-header {
  background-color: var(--header-color);
}

.main-menu .navigation > li > ul {
  background-color: var(--header-color);
}

.btn-style-two:before, .btn-style-three:before, .btn-style-four:before {
  background-color: var(--header-color);
}

#app-page-section{
	position:relative;
	padding:100px 5vw 100px;
} 

@media only screen and (max-width: 767px) {
  .main-menu .navbar-collapse > .navigation, .main-menu .navbar-collapse > .navigation > li > a {
    background-color: var(--header-color);
  }

  #app-page-section{
    padding:100px 0 100px 0;
  }
}

#sistema-sudh-container{
  background-color: var(--main-green);
}

#sistema-sidh-container {
  background-color: var(--main-orange);
}

.btn-style-two {
  background: var(--main-blue);
}

.btn-style-three {
  background: var(--main-green);
}

.btn-style-four {
  background: var(--main-orange);
}

.btn-style-five {
  background: rgba(40, 148, 164, 1);
  position: relative;
    cursor: pointer;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 2px;
    padding: 12px 30px;
    line-height: 1.2;
    text-transform: capitalize;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.btn-style-five:hover::before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.20);
  -ms-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.20);
  box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.20);
}

.btn-style-five:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #202020;
  background-color: var(--header-color);
  border-radius: 2px;
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.main-footer {
  background-color: var(--header-color);
}

.seo-section .content-column .inner-column div {
  margin-bottom: 50px;
}

.span-list-color {
  color: #41acf3;
  font-weight: 600;
}
.feature-block-two .inner-box h3 {
  color: #222222;
}

.services-block-two .inner-box .content {
  position: relative;
  padding-left: 0px;
}

.blog-single .inner-box {
  height: 100%;
  margin-bottom: 0px;
}

.blog-single .inner-box .lower-content .text h3 {
  font-size: 16px;
}

.feature-block-two .inner-box .dh-desc_title:hover {
  color: var(--main-pink);
  cursor: pointer;
}

/*.page-title {
    padding: 150px 0px 100px;
}*/

.page-title p {
	position:relative;
	display:inline-block;
	margin-right:10px;
	padding-right:10px;
	color:#ffffff;
	font-size:16px;
	font-weight:300;
}

.form_filtros_app {
    margin: 10px 0px 50px;
    color: #848484;
    font-family: 'Poppins', sans-serif;

}

.custom-form-control {
  background: #eaeff3;
  color: #848484;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  line-height: 32px;
  height: 52px;
  padding: 10px 22px;
}

#btn-app-filtros {
  margin: 10px 5px 20px 5px;
}

#btn2-app-filtros {
  margin: 28px 5px 0px 5px;
}

select.form-control:not([size]):not([multiple]) {
	height: 52px;
}

#filter-form-title {
  font-weight: 500;
}

#img-sudh-ciclos {
  max-width: 700px;
  height: auto;
}

.modal {
	overflow: hidden;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   align-items: center;
   justify-content: center;
}

.modal-hide {
  display: none;
}

.modal-show {
  display: flex;
}

/* Modal Content */
.modal-content {
	position: relative;
  background-color: #fefefe;
  padding: 35px;
  border: 1px solid #888;
  max-width: 60vw;
  min-width: 30vw;
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-content p {
  margin: 0 auto;
  font-size: 15px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  /*float: right;*/
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-content-header {
	position: absolute;
    padding: 10px 20px 0 0;
    right: 0;
    top: 0;
	/*border-style: solid;
	border-color: green;*/
}

#orden-participacion-title, .modal-content-title {
  margin-bottom: 0.4rem;
  font-weight: bold;
  text-align: center;
}

.modal-content-title {
  margin-bottom: 20px;
}

.referencia-container {
  border-top: 1px solid #e8e8e8;
  padding-top: 10px;
  margin-top: 2px;
  p {
    padding: 0;
    margin-top: 0.4rem;
    margin-bottom: 0;
  }
}

.empty-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #b3b3b3;
}

.span-list-color {
  color: #c8187d;
}

.list-style-two li:before {
  color: #c8187d;
}


@media only screen and (max-width: 768px){
	.modal-content {
    min-width: 90vw;
		max-width: 90vw;
		max-height: 90vh;
	}

  .seo-section .content-column .inner-column div {
    margin-bottom: 30px;
  }

}

@media only screen and (min-width: 1000px){
	.modal-content {
    min-width: 30vw;
		max-width: 50vw;
		max-height: 80vh;
	}

}


/******************Pagination****************************/

.styled-pagination li .pag-more-items {
  position: relative;
  display: inline-block;
  line-height: 40px;
  height: 40px;
  width: 45px;
  font-size: 16px;
  min-width: 40px;
  color: #777777;
  font-weight: 500;
  text-align: center;
  background: #ffffff;
}

.styled-pagination li span:not(.pag-more-items) {
  position: relative;
  display: inline-block;
  line-height: 40px;
  height: 40px;
  width: 45px;
  font-size: 16px;
  min-width: 40px;
  color: #777777;
  font-weight: 500;
  text-align: center;
  background: #ffffff;
  border: 1px solid #eeeeee;
  text-transform: capitalize;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
}

.styled-pagination li.next span {
  border-color: #eeeeee;
  color: #777777;
  width: 75px;
}

.styled-pagination li span:not(.pag-more-items):hover, .styled-pagination li span.active {
  color: #ffffff;
  border-color: var(--main-pink);
  background-color: var(--main-pink);
  cursor: pointer;
}

/*******************Footer********************************/
.social-icon-one li a:hover {
  color: #ffffff;
  border-color: var(--main-pink);
  background-color: var(--main-pink);
}

/********************Actuaciones**********************/

.sistema-item {
  margin-top: 50px;
}

.organo-selected {
  background-color: var(--header-color);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
}

.category-list .organo-selected span {
  color: white;
}

.category-list li span {
  position: relative;
  display: block;
  font-size: 16px;
  color: #222222;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 5px 10px 15px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.category-list li span:hover {
  color: #08c8af;
  padding-left: 30px;
  cursor: pointer;
}

.category-list li span:hover::before {
  opacity: 1;
}

.category-list li span::before {
  position: absolute;
  left: 15px;
  top: 8px;
  content: "";
  color: #777;
  font-size: 14px;
  opacity: 0;
  font-family: FontAwesome;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

#actuaciones-items-container {
  margin-top: 16px;
}

.actuacion-item {
  position: relative;
  padding: 32px 16px 40px 16px;
  border-bottom: 1px dotted #7f7f7f;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.actuacion-item:hover {
  background-color: #f9f9f9;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.actuacion-item h3 a {
  /*position: relative;
  color: #222222;
  transition: all 300ms ease;
  font-size: 32px;
  font-weight: 700;*/
  position: relative;
  font-size: 24px;
  color: #222222;
  /*line-height: 1.3em;*/
  font-weight: 600;
  margin-bottom: 18px;
  font-family: 'Poppins', sans-serif;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
}

.actuacion-item-header {
  display: flex;
  flex-direction: row;
}

.actuacion-item .icon-da {
  min-width: 50px;
  height: 50px;
  background-size: 40px;
  margin-top: 12px;
  margin-right: 4px;
}

.actuacion-item .icon-da2 {
  min-width: 50px;
  height: 50px;
  background-size: 40px;
  margin-top: 2px;
  margin-right: 4px;
}

@media only screen and (max-width: 767px) {
  .actuacion-item .icon-da {
    display: none;
  }

  .actuacion-item .icon-da2 {
    display: none;
  }

}

.icon-da-direct {
  background: url("/static/images/icons/folder2x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.icon-organismo_inter-direct {
  background: url("/static/images/icons/globe1x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.icon-estado-honduras-direct {
  background: url("/static/images/icons/honduras1x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.icon-sociedad-civil-direct {
  background: url("/static/images/icons/society1x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.icon-other-entities-direct {
  background: url("/static/images/icons/entity1x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.icon-referencia-direct {
  background: url("/static/images/icons/reference2x64.png") no-repeat;
  background-size: cover;
  width: 12px;
  height: 14px;
  background-size: 12px;
}

.actuacion-item h3 {
  line-height: 1.4;
}

.actuacion-item h3 a:hover {
  color: var(--main-pink);
}

.actuacion-item h3 .actuaciones-list-item-link-organismo-inter:hover {
  color: var(--main-green);
}

.actuacion-item h3 .actuaciones-list-item-link-estado:hover {
  color: var(--main-blue);
}

.actuacion-item h3 .actuaciones-list-item-link-society:hover {
  color: var(--main-orange);
}

.actuacion-item h3 .actuaciones-list-item-link-other-entity:hover {
  color: var(--header-color);
}

.actuacion-item .text {
  position: relative;
  color: #7d7d7d;
  font-size: 18px;
  line-height: 1.7em;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 40px;
}

.actuacion-item .text span {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}

.actuaciones-back-links-container {
  margin-bottom: 50px;
}

.actuaciones-back-links-container ul {
  display: block;
  list-style: none;
}

.actuaciones-back-links-container ul li {
  display: block;
  padding: 15px;
  background-color: #eaeff3;
  margin-bottom: 15px;
}

.actuaciones-back-links-container ul li a {
  color: white;
  font-size: 16px;
  font-weight: 500;
  display: block;
  background-color: var(--header-color);
  padding: 12px 6px 12px 16px;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.actuaciones-back-links-container ul li a:hover {
  color: var(--main-green);
}

.fa-chevron-circle-left::before {
  content: "\f137";
}

.fa {
  display: inline;
  font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 12px;
}
/***********************Detail********************************/
.item-detail-container {
  margin-bottom: 50px;
}

.blog-classic > .item-detail-title {
  border-bottom: 2px solid var(--main-green);
  margin-bottom: 30px;
}

.item-detail-title h2 {
  position: relative;
  font-size: 32px;
  color: #222222;
  line-height: 1.3em;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 22px;
}

.actuaciones-info-item-container {
  margin-bottom: 16px;
}

.actuaciones-info-item-title {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #222222;
}

.actuaciones-info-item-desc {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: #747474;
}

/*********************Horizontal List*************************/
nav#dh-list-menu-container {
  background: rgba(40, 148, 164, 1);
  position:relative;
  width:100%;
  height: 56px;
  padding-right: 55px;
  margin-bottom: 50px;
}
#dh-list-btn-nav-previous {
  text-align: center;
  color: white;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  left: 0px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.4);
  fill:#FFF;
  backdrop-filter: blur(5px);
}
#dh-list-btn-nav-next {
  text-align: center;
  color: white;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  right: 0px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.4);
  fill:#FFF;
  backdrop-filter: blur(5px);
}
.dh-list-menu-inner-box
{ 
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  overflow-x: scroll;
  padding: 0px 54px;
  box-sizing: border-box;
}

.dh-list-menu-inner-box::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}

.dh-list-menu-inner-box::-webkit-scrollbar-thumb {
  background-color: rgb(217, 217, 217);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}

.dh-selected {
  background-color: var(--header-color);
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}


.dh-list-menu
{  
  padding:0;
  margin: 0;
  list-style-type: none;
  /*display:block;*/
  text-align: center;
  display:flex;
  flex-direction: row;
}
.dh-list-menu li /*.dh-list-menu-item*/
{
  height:100%;
  padding: 0px 25px 0px 25px;
  color:#fff;
  margin: 0;
  line-height:57px;
  text-decoration:none;
  text-align:center;
  white-space:no-wrap;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.dh-list-menu li:not(.dh-selected):hover {
  background-color: rgba(175, 175, 175, 0.4);
}

.dh-list-menu li span:hover {
  cursor: pointer;
}

.dh-list-menu-item {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

/*************************************************************/
/*************************Animations**************************/
/*************************************************************/
.animated {
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@keyframes fadeIn {
  0%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
}
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    transform: translateX(20px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    transform: translateX(-20px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes darkenBgColor {
  0% {
    background: none;
  }

  100% {
    background: rgba(0,0,0,0.4);
  }
}

@keyframes fadeBgColor {
  0% {
    background: rgba(0,0,0,0.4);
  }
  100% {
    background: none;
  }
}

.animated.animationDelay {
  animation-delay: 0.4s;
}
.animated.animationDelayMed {
  animation-delay: 1.2s;
}
.animated.animationDelayLong {
  animation-delay: 1.6s;
}
.animated.darkenBgColor {
  animation-name: darkenBgColor;
}
.animated.fadeBgColor {
  animation-name: fadeBgColor;
}
.animated.bounceIn {
  animation-name: bounceIn;
}
.animated.bounceOut {
  animation-name: bounceOut;
}
.animated.bounceInRight {
  animation-name: bounceInRight;
}
.animated.bounceInLeft {
  animation-name: bounceInLeft;
}
.animated.fadeIn {
  animation-name: fadeIn;
}
.animated.fadeInDown {
  animation-name: fadeInDown;
}
.animated.fadeInUp {
  animation-name: fadeInUp;
}
.animated.moveUp {
  animation-name: moveUp;
}