/* Avoid exceeding the boundaries */
* {
    box-sizing: border-box;
  }
  .et {
    display: inline-block;
    position: relative;
  }
  
  /* ==========================================================================
     Increase pointer-events successful area
     ========================================================================== */
  .et::after {
    /*background-color: black;  !* only when testing *!*/
    content: '';
    cursor: inherit;
    min-height: calc(100% + 30px);
    min-width: calc(100% + 30px);
    pointer-events: none;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
  }
  .et:hover::after,
  .et:focus::after {
    pointer-events: auto;
  }
  
  /* ==========================================================================
     Common attributes for all tip-block
     ========================================================================== */
  .et .et-bottom,
  .et .et-top {
    display: inline-block;
    border-radius: 6px;
    cursor: default;
    font-size: 14px;
    font-weight: 500;
    height: auto;
    max-width: 400px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;  /* comment only when testing */
    z-index: 999999;
  }
  
  /* ==========================================================================
     Common attributes for all tip-arrow
     ========================================================================== */
  .et .et-arrow::after {
    border: 12px solid transparent;
    content: '';
    position: absolute;
    z-index: 999999;
  }
  .et .et-arrow::before {
    border: 16px solid transparent;
    content: '';
    position: absolute;
    z-index: 999999;
  }
  .et .et-left.et-arrow::after,
  .et .et-right.et-arrow::after {
    border: 8px solid transparent;
  }
  .et .et-left.et-arrow::before,
  .et .et-right.et-arrow::before {
    border: 12px solid transparent;
  }
  
  /* ==========================================================================
     Bottom tip-block
     ========================================================================== */
  .et .et-bottom {
    margin: 10px -400px 0 0;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.7));
  }
  .et .et-bottom.et-arrow::after {
    border-bottom-color: #fff;
    bottom: 100%;
    left: 50%;
    margin-left: -12px;
  }
  .et .et-bottom.et-arrow::before {
    border-bottom-color:#fff;
    bottom: 100%;
    left: 50%;
    margin-left: -16px;
  }
  
  /* ==========================================================================
     Top tip-block
     ========================================================================== */
  .et .et-top {
    margin: 0 -400px 10px 0;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.7));
  }
  .et .et-top.et-arrow::after {
    border-top-color: #fff8c2;
    top: 100%;
    left: 50%;
    margin-left: -12px;
  }
  .et .et-top.et-arrow::before {
    border-top-color: #367abd;
    top: 100%;
    left: 50%;
    margin-left: -16px;
  }
  
  /* ==========================================================================
     .et hover & focus events
     ========================================================================== */
  .et:hover .et-top,
  .et:focus .et-top,
  .et:hover .et-bottom,
  .et:focus .et-bottom {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 6px);
  }
  
  
  /* ==========================================================================
     Tip block max-width definition
     ========================================================================== */
  .et .et-narrow {
    max-width: 260px;
  }
  .et .et-wide {
    max-width: 660px;
  }
  
  
    /* ==========================================================================
      Button Designs
       ========================================================================== */
    .ad_type_wrapper {
        position: absolute;
    	margin-left: -28px;
    	margin-top: -10px;
		padding-left: 18px;
		padding-right: 9px;
    }
    .ad-type-icon.et-pb-icon{
        font-size: 14px;
        color: #fff;
    }
    
    .et .et-top, .et .et-bottom{
        background-color: #fff;
        color: #666 !important;
        padding: 10px;
    }
    .et .et-top a{
        color: inherit;
    }
    .et .et-top.et-arrow::before, .et .et-top.et-arrow::after {
        border-top-color: #fff;
    }
    .et_pb_blog_grid .et_pb_post, .et_pb_post{
        overflow: visible !important;
    }
    
    @media all and (max-width:767px){
        .et .et-top,.et .et-bottom {
          margin: 0 -150px 10px 0;
        }

    }
    @media all and (max-width:480px){
        .et .et-top,.et .et-bottom {
          margin: 0  0 10px 0;
        }
    }

    .single .et_pb_column,.archive .et_pb_column{
	    z-index: initial;  
    }
    .et_pb_column#sticky {
	    z-index: 0;
	}
    /* ==========================================================================
      Custom
       ========================================================================== */
    
    button.et.ad-type-btn {
        padding: 0px 3px;
        font-size: 14px;
        border: 1px solid #ffa7c1;
        font-weight: bold;
        background: #fff;
        color: #ffa7c1;
        cursor: pointer;
    }
    .ad-type-icon.et-pb-icon {
        font-size: 14px;
        color: #ffa7c1 !important;
    }
	.blog-highlight .et_pb_ajax_pagination_container .ad_type_wrapper {
    	position: absolute;
    	top: 0;
   		right: 0;
		padding: 0;
		margin: 0;
	}