/*--This is a grid system for Banner Rows plugin only. 
    
  --Its purpose is to avoid loading libraries and their massive content*/


.brg-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.brg-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  
}

.brg-col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.brg-col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.brg-col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.brg-col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.brg-col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.brg-col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.brg-col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.brg-col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.brg-col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.brg-col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.brg-col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}



.home-page-placeholders-wrapper{
    margin: 5px 0;
    margin-bottom:100px;
}

.banner-box-wrapper{
    position: relative;
}

.banner-text {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;  
  transition: all 500ms ease-out;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 70%;
  z-index: 2;
  overflow: visible;
  background: #000;
  opacity: .7;  
  padding: 10px;
}

.banner-box-wrapper:hover{ 
    cursor: pointer;
}

  .banner-box-wrapper:hover .banner-text {
    visibility: hidden;
    opacity: 0;
  }




.banner-text a{
    display: block;
    position: relative;
    z-index: 2;    
    text-align: center;
    font-size: 26px;
    color: #e22134;
    letter-spacing: 1.7px;
}

.button-text{
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-text a{
    margin-top: 10px;    
    padding: 5px 15px;    
    min-width: 150px;
    font-size: 21px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffe9e9;
    border: 1px solid #ffe9e9;
    background-color: transparent;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.button-text a:hover{
    background-color: #e22134;
    border-color: #e22134;
    color: #fff;
}



.home-page-placeholders-wrapper .brg-col-6,
.home-page-placeholders-wrapper .brg-col-4 {
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom:30px;
}


@media(max-width: 1024px){
  .banner-text {
    visibility: hidden;
    opacity: 0;
     max-width: 80%;
  }

  .banner-text a{
      font-size: 21px;
      padding: 12px 50px;
  }

  .banner-text a h2{
      font-size: 21px;
  }

  .button-text a{
      font-size: 16px;
      margin-bottom: 10px;
  }

}


@media(max-width: 765px){
    .home-page-placeholders-wrapper .brg-row{
        flex-direction: column;
    }


    .home-page-placeholders-wrapper .brg-row .brg-col-6,
    .home-page-placeholders-wrapper .brg-row  .brg-col-4{
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* Flashing */
.banner-box-wrapper:hover img {
	opacity: 1;
	-webkit-animation: flash 3s;
	animation: flash 2s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .7;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .7;
	}
	100% {
		opacity: 1;
	}
}