/*
 Author:         ERICK RAMIREZ
 Author URI:     https://springtide.com/
 Template:       Custom Homepage
 Version:        1.0.0
*/
/* =Custom CSS starts here
------------------------------------------------------- */
  .er-flex-container{
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start; 
        align-items: flex-start;
    /* align-content: flex-start;*/
  }
  .er-flex-child {
        background-color: #ffffff;
        width: 48%;
        margin: 10px 1%;
        flex-grow: 0;
        overflow: hidden;
        box-sizing: border-box;
        min-height:500px;
  }
  .er-flex-child-2 {
    background-color: #ffffff;
    width: 46%;
    margin: 10px 2%;
    flex-grow: 0;
    overflow: hidden;
    box-sizing: border-box;
    min-height:300px;
}
.er-flex-child-3 {
    background-color: #ffffff;
    width: 96%;
    margin: 10px 2%;
    flex-grow: 0;
    overflow: hidden;
    box-sizing: border-box;
    min-height:500px;
}
.er-flex-child-4 {
    background-color: #ffffff;
    width: 96%;
    margin: 10px 2%;
    flex-grow: 0;
    overflow: hidden;
    box-sizing: border-box;
    min-height:300px;
}
    /*.image_bg_posts{
        min-height:500px;	
   } */
    .st-overlay{
        background-color: rgba(0,0,0,0.3) !important;
        height: 500px;
    }
    .st-overlay-2{
        background-color: rgba(0,0,0,0.3) !important;
        height: 300px;
    }
    /***********Overlay 1*******************/
    .sp-shadow:hover{
        cursor:pointer;
    }
    .sp-shadow:before {
        content: '';
        display: block;
        position: absolute;
        height: 0%;
        width: 48%;
        margin-bottom: 10px;
        bottom: 0;
        transition: height 0.5s ease-out;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
    }
    .sp-shadow:hover:before {
        height: 100%;
    }
    /***********Overlay 1 ends here*******************/
    /***********Overlay 2*******************/
    .sp-shadow-2:hover{
        cursor:pointer;
    }
    .sp-shadow-2:before {
        content: '';
        display: block;
        position: absolute;
        height: 0%;
        width: 48%;
        margin-bottom: 10px;
        bottom: 0;
        transition: height 0.5s ease-out;
        background: rgb(11,4,142);
        background: -moz-linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        background: -webkit-linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        background: linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0b048e",endColorstr="#00d4ff",GradientType=1);
    }
    .sp-shadow-2:hover:before {
        height: 100%;
    }
    /***********Overlay 2 ends here*******************/
    /***********Overlay 3 small blog post*******************/
    .sp-shadow-3:hover{
        cursor:pointer;
    }
    .sp-shadow-3:before {
        content: '';
        display: block;
        position: absolute;
        height: 0%;
        width: 46%;
        margin-bottom: 10px;
        bottom: 0;
        transition: height 0.5s ease-out;
        background: rgb(11,4,142);
        background: -moz-linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        background: -webkit-linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        background: linear-gradient(0deg, rgba(11,4,142,1) 0%, rgba(9,9,121,0.28757440476190477) 38%, rgba(0,212,255,0) 55%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0b048e",endColorstr="#00d4ff",GradientType=1);
    }
    .sp-shadow-3:hover:before {
        height: 100%;
    }
    /***********Overlay 3 small blog post ends here*******************/
    /***********Overlay 4 small blog post*******************/
    .sp-shadow-4:hover{
        cursor:pointer;
    }
    .sp-shadow-4:before {
        content: '';
        display: block;
        position: absolute;
        height: 0%;
        width: 46%;
        margin-bottom: 10px;
        bottom: 0;
        transition: height 0.5s ease-out;
        background: rgb(29,214,200);
        background: -moz-linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
        background: -webkit-linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
        background: linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1dd6c8",endColorstr="#ffffff",GradientType=1);
    }
    .sp-shadow-4:hover:before {
        height: 100%;
    }
    /***********Overlay 4 small blog post ends here*******************/
    /***********Overlay 5*******************/
    .sp-shadow-5:hover{
        cursor:pointer;
    }
    .sp-shadow-5:before {
        content: '';
        display: block;
        position: absolute;
        height: 0%;
        width: 96%;
        margin-bottom: 10px;
        bottom: 0;
        transition: height 0.5s ease-out;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7693671218487395) 0%, rgba(0, 0, 0, 0.2987788865546218) 26%, rgba(0, 0, 0, 0) 50%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
    }
    .sp-shadow-5:hover:before {
        height: 100%;
    }
    /***********Overlay 5 ends here*******************/
    /***********Overlay 6 small blog post*******************/
        .sp-shadow-6:hover{
            cursor:pointer;
        }
        .sp-shadow-6:before {
            content: '';
            display: block;
            position: absolute;
            height: 0%;
            width: 96%;
            margin-bottom: 10px;
            bottom: 0;
            transition: height 0.5s ease-out;
            background: rgb(29,214,200);
            background: -moz-linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
            background: -webkit-linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
            background: linear-gradient(0deg, rgba(29,214,200,1) 0%, rgba(29,214,200,1) 19%, rgba(255,255,255,0) 50%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1dd6c8",endColorstr="#ffffff",GradientType=1);
        }
        .sp-shadow-6:hover:before {
            height: 100%;
        }
        /***********Overlay 6 small blog post ends here*******************/
    .et-db #et-boc .et-l .et_pb_image_container {
        margin: 0 auto !important;
    } 
    .box-title{
        position: relative;
        top: 240px !important;
        text-align: left;
        background-color: transparent;
        width: 100%;
        min-height: 87px;
        padding: 15px 30px 0px 30px;
    }
    .box-title h2{
        font-family: ivyjournal, sans-serif !important;
        font-size: clamp(30px, 2.5vw, 50px);
        line-height: 1.3em;
        font-weight: 400;
        color: #ffffff !important;
    }
    .box-title-2{
        position: relative;
        top: 80px !important;
        text-align: left;
        background-color: transparent;
        width: 100%;
        min-height: 60px;
        padding: 15px 15px 0px 15px;
    }
    .box-title-2 h2{
        font-family: ivyjournal, sans-serif !important;
        font-size: clamp(10px, 1.25vw, 20px);
        line-height: 1.3em;
        font-weight: 400;
        color: #ffffff !important;
    }

  .cat-top {
      position: relative;
      top: 25px;
      padding: 5px 20px 5px 20px;
  }
  .cat-top p {
      line-height: 1.2;
      font-weight: 400;
      text-align: left;
      font-size: 18px !important;
      color: #ffffff !important;
      font-family: synthese, sans-serif!important;
  }
  .cat-top p span{
    font-weight: 600;
}
  .box-read-more {
      position: absolute;
      bottom: 35px;
      text-align: left;
      background-color: transparent;
      width: auto;
      min-height: 50px;
      padding: 15px 30px 10px 30px;
      color: #ffffff !important;
  }
  .box-read-more p {
      font-size: 16px;
      line-height: 1.3em;
      font-weight: 400;
      color: #ffffff !important;
      font-family: synthese, sans-serif!important;
  }
  .box-read-more:hover {
      text-decoration: underline;
  }
  @media only screen and (max-width: 980px)  {
      /*.er-flex-child {
          border: 1px solid #aaa;
          width: 47%;
      }*/
        .er-flex-child-4 {
            background-color: transparent !important;
        }
    .box-read-more {
        position: relative;
        bottom: 10px;
        text-align: left;
        background-color: transparent;
        width: auto;
        min-height: 50px;
        padding: 15px 0px 10px 0px;
        color: #000000 !important;
    }
    .box-read-more a {
        font-size: 16px;
        line-height: 1.3em;
        font-weight: 400;
        color: #000000 !important;
        text-decoration: underline !important;
        font-family: synthese, sans-serif!important;
    }
    .cat-top {
        padding: 5px 0px 5px 0px;
    }
    .cat-top p {
        line-height: 1.2;
        font-weight: 400;
        text-align: left;
        font-size: 18px !important;
        color: #000000 !important;

    }
    .box-title-2 {
        position: relative;
        top: 20px !important;
        text-align: left;
        min-height: 60px;
        height: auto;
        padding: 15px 0px 35px 0px;
    }
    .box-title-2 h2 {
        font-size: 25px;
        line-height: 1.3em;
        font-weight: 400;
        color: #000000 !important;
    }
    .er-hr {
        position: relative;
        top: 0px;
        border: none;
        height: 1.3px;
        background: #707070;
        margin-bottom: 10px;
    }

  }
  @media only screen and (max-width: 630px)  {
      .er-flex-child {
          border: 1px solid #aaa;
          width: 99%;
      }
      .entry-featured-image-url img{
          min-height: auto;
      }
  }