/* 

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

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

*/
#modal-auto-open {
  max-width: 700px;
}
#modal-auto-open .modal-auto-open-bg-img {
  height: 470px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
#modal-auto-open h2 {
  font-size: 22px;
  /* overflow: hidden; */
  /* max-height: 120px; */
  /* text-overflow: ellipsis; */
}
#modal-auto-open p {
  /* overflow: hidden; */
  /* max-height: 190px; */
  /* text-overflow: ellipsis; */
}
#modal-auto-open .modal-auto-open-txt-wrapper {
  position: relative;
  overflow: hidden;
  max-height: 320px;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
  /* -webkit-box-orient: vertical; */
  /* -webkit-line-clamp: 10; */
}
#modal-auto-open .modal-auto-open-txt-wrapper:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(transparent 200px, #fff);
}
@media (max-width: 768px) {
  #modal-auto-open .modal-auto-open-bg-img {
    height: 200px;
  }
  #modal-auto-open .modal-auto-open-txt-wrapper {
    max-height: 120px;
  }
  #modal-auto-open .modal-auto-open-txt-wrapper:after {
    background: linear-gradient(transparent 100px, #fff);
  }
}
#topbar.dark {
    border-bottom: 0;
}
#mainMenu.menu-hover-background nav > ul > li.current > a, 
#mainMenu.menu-hover-background nav > ul > li:hover > a, 
#mainMenu.menu-hover-background nav > ul > li:focus > a {
    color: #d41735 !important;
}

.flickity-button:hover {
    background-color: #d41735;
}

#welcome .carousel .slide-captions {
        color: #fff;
    text-shadow: 1px 1px 3px #333;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
@media (max-width: 1024px){
#header[data-transparent="true"] + #page-title {
    top: -124px;
    margin-bottom: -124px;
    padding: 160px 0 20px 0;
}
}
@media (max-width: 1024px) {
#page-title .page-title > h1 {
    font-size: 2.5rem;
}
}
@media (max-width: 1024px) {
  #welcome .carousel .slide-captions {
      font-size: 26px;
  }
}
@media (max-width: 767px) {
  #welcome .carousel .slide-captions {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    font-size: 26px;
    top: auto;
    margin-top: 0;
    padding: 10px;
  }

}
@media (max-width: 380px) {
  #welcome .carousel .slide-captions {
    font-size: 22px;
  }

}
.section-background {
    padding: 30px 0;
}
.actualite-section-background {
background-size: auto;
}
.call-to-action {
    padding:0;
}
a:not(.btn):not(.badge):hover, 
a:not(.btn):not(.badge):focus, 
a:not(.btn):not(.badge):active {
color: #d41735;
}
#footer a:not(.btn) {
    color: #fff;
}
.actualite-section-background {
padding: 30px 0 30px;
}

.portfolio-item.revert .portfolio-slider .flickity-viewport:after, 
.portfolio-item.revert .portfolio-image:after, 
.portfolio-item.revert .portfolio-video:after, 
.portfolio-item.revert .grid-slider .flickity-viewport:after, 
.portfolio-item.revert .grid-image:after, 
.portfolio-item.revert .grid-video:after, 
.grid-item.revert .portfolio-slider .flickity-viewport:after, 
.grid-item.revert .portfolio-image:after, 
.grid-item.revert .portfolio-video:after, 
.grid-item.revert .grid-slider .flickity-viewport:after, 
.grid-item.revert .grid-image:after, 
.grid-item.revert .grid-video:after {
    opacity: 0.3;
}
@media (max-width: 1024px) {
.mainMenu-open #header #mainMenu {
    overflow-y: auto;
}
}

#page-title .page-title > h1 {
  text-shadow: 1px 1px 3px #777;
}