/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

.text-small {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.text-colored {
  color: #f7ef51 !important;
}

.text-black {
  color: #000000 !important;
}

.post-thumbnails .post-item {
  padding: 0 0 40px 0;
}

.red-box {
  border-radius: 20px;
  background-color: rgba(201, 80, 27, 0.7);
  padding: 40px;
}

.orange-box {
  border-radius: 20px;
  background-color: rgba(252, 176, 64, 0.7);
  padding: 40px;
}

@media (max-width: 575px) {
.inspiro-slider .slide .slide-captions h1 img {
  width: 300px !important;
}
}

/* ----------------------------------------------------------------
Main Menu
-----------------------------------------------------------------*/


#mainMenu nav>ul>li>a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  line-height: normal;
  padding: 4px 8px;

}

.dark #mainMenu nav>ul>li.hover-active>a,
.dark #mainMenu nav>ul>li.hover-active>span,
.dark #mainMenu nav>ul>li.current>a,
.dark #mainMenu nav>ul>li.current>span,
.dark #mainMenu nav>ul>li:hover>a,
.dark #mainMenu nav>ul>li:hover>span,
.dark #mainMenu nav>ul>li:focus>a,
.dark #mainMenu nav>ul>li:focus>span,
#mainMenu.dark nav>ul>li.hover-active>a,
#mainMenu.dark nav>ul>li.hover-active>span,
#mainMenu.dark nav>ul>li.current>a,
#mainMenu.dark nav>ul>li.current>span,
#mainMenu.dark nav>ul>li:hover>a,
#mainMenu.dark nav>ul>li:hover>span,
#mainMenu.dark nav>ul>li:focus>a,
#mainMenu.dark nav>ul>li:focus>span {
  color: #fcb040 !important;
}

@media (max-width: 1024px) {

  #mainMenu:not(.menu-overlay) nav>ul {
    float: none;
    width: 100%;
    padding-top: 60px;
  }

  #mainMenu:not(.menu-overlay) nav>ul>li>a {
    color: #ffffff;
  }
}

#header.header-sticky.sticky-active.dark .header-inner #mainMenu nav>ul>li>a,
#header.header-sticky.sticky-active.dark #header-wrap #mainMenu nav>ul>li>a {
  color: #ffffff;
}

/* Slider */

.bg-overlay[data-style="13"] {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 45%);
  opacity: 1;
}

.bg-overlay[data-style="14"] {
  background: linear-gradient(to bottom, rgba(81, 168, 71, 1) 0%, rgba(81, 168, 71, 0) 80%);
  opacity: 1;
}

.inspiro-slider.dots-creative .flickity-page-dots .dot,
.carousel.dots-creative .flickity-page-dots .dot {
  opacity: 0.5;
  box-shadow: none;
  border-radius: 50%;
  background-color: #ffffff;
  height: 20px;
  width: 20px;
}

@media (max-width: 1024px) {

  .inspiro-slider .slide .container,
  .inspiro-slider .slide .container-wide,
  .inspiro-slider .slide .container-fluid {
    padding-top: 20px;
    padding-left: 0;
  }

  .mx-auto-sm {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.inspiro-slider .slide .slide-captions h2 {
  font-weight: 400;
}

/*Overcover */

.overcover {
  position: absolute;
  top: 126px;
  left: 20px;
  z-index: 2;
  width: 150px;
  height: 98px;
  overflow: hidden;
  background-color: transparent;
}

@media (min-width: 1025px) {
  .overcover {
    top: 226px;
    left: 60px;
  }
}


/*Video responsive */

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/*Google map responsive */

.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/*Footer */

#footer .copyright-content {
  min-height: 80px;
  padding: 30px 0;
  background-color: #ffffff;
  font-size: 18px;
}

#footer .copyright-content a:not(.btn):not(:hover) {
  color: #231f20;
}

@media (max-width: 767px) {
  #footer .copyright-content {
    min-height: 60px;
    padding: 20px 0;
    background-color: #ffffff;
    font-size: 13px;
  }
}