.animatedbox1 .animated-box {
  perspective: 1000px;
  position: relative;
  height: 100%;
}
.animatedbox1 .animated-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  overflow: hidden;
}
.animatedbox1 .animated-box-back .box_header{
  padding-bottom: 20px;
}
.animatedbox1 .animated-box-back .box_content{
  /*padding-top: 20px;*/
}
.animatedbox1 .animated-box.backend_active .animated-box-back .box_content,
.animatedbox1 .animated-box:hover .animated-box-back .box_content{
  padding-top: 0;
}
.animatedbox1 .animated-box-back {
  position: absolute;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 20px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  top: auto;
  right: 0;
  left: 0;
  bottom:0;
  transform: translate(0,60%);
  color: white;
}
.pagebuilder-content .animatedbox1 .animated-box:hover .animated-box-inner .animated-box-back,
.custom_edit .animatedbox1 .animated-box.backend_active .animated-box-inner .animated-box-back {
  top: auto;
  transform: translate(0,0);
}
.animatedbox1 .animated-box:hover .animated-box-inner .animated-box-back,
.custom_edit .animatedbox1 .animated-box.backend_active .animated-box-inner .animated-box-back {
  top: auto;
  transform: translate(0,0);
}
.animatedbox1 .animated-box-back h5 {
    color: #ffffff;
}
/* Animated box 2 */
.animatedbox2 .animated-box .box_content ul li {
    border-top: 2px solid #e8c99a;
    padding: 5px;
}
.animatedbox2 .animated-box .box_content ul {
    padding-top: 20px;
    padding-left: 0;
}
.animatedbox2 .animated-box .animated-box-inner {
    padding: 15px;
    /*background-color: #fff6e9;*/
}
.animatedbox2 .animated-box h4 {
    color: #333333;
    padding: 15px 0;
}
.animatedbox2 .animated-box .box_content {
    opacity: 0;
    visibility: hidden;
    height: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    transform: translate(0, -100%);
    overflow:hidden;
}
.pagebuilder-content .animatedbox2 .animated-box:hover .animated-box-inner,
.custom_edit .animatedbox2 .animated-box.backend_active .animated-box-inner {
    background-color: #ffefd7;
    background-image: linear-gradient(#ffefd7,#ffefd7);
}
.pagebuilder-content .animatedbox2 .animated-box:hover .box_content,
.custom_edit .animatedbox2 .animated-box.backend_active .box_content {
    opacity: 1;
    visibility: visible;
    height: 100%;
    transform: translate(0, 0);
    overflow:auto;
}
.animatedbox2 .half_container {
    position: relative;
    height: 100%;
}
/* Animated 3 */
.animatedbox3 {
  /*background-image: url('/banaa/assets/elements_professional/bundles/animated-boxes-3.jpg');*/
  /*background-position: center center;*/
  /*background-repeat: no-repeat;*/
  /*background-size: cover;*/
  position: relative;
}
.animatedbox3 h4,
.animatedbox3 p, 
.animatedbox3 div {
  font-family: 'Poppins', sans-serif;
}
.animatedbox3 .box_excerpt {
    font-size: 14px;
}
.animatedbox3 .overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.65);
  background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65));
}
.animatedbox3 .animated-box-inner .box_icon {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: calc(50% - 25px);
  bottom: 0;
}
.animatedbox3 .animated-box-inner .box_header {
  width: calc(100% - 60px);
  margin-left: auto;
  margin-right: 0;
  color: #ffffff;
}
.animatedbox3 .animated-box {
  position: relative;
}
.animatedbox3 .animated-box .animated-box-inner {
  border: 1px solid #ffffff;
  padding: 10px 20px;
  margin: 15px 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.animatedbox3 .animated-box-inner .box_header h4 {
  color: #ffffff;
  text-transform: uppercase;
}
.pagebuilder-content .animatedbox3 .animated-box:hover .animated-box-inner,
.custom_edit .animatedbox3 .animated-box.backend_active .animated-box-inner {
    background-color: #0f89a7; 
    background-image: linear-gradient(#0f89a7,#0f89a7);
  	border: 1px solid #0f89a7;
}
.animatedbox4 {
  /*background-image: url('/banaa/assets/elements_professional/bundles/animatedbox4.jpg');*/
  /*background-position: center center;*/
  /*background-repeat: no-repeat;*/
  /*background-size: cover;*/
  position: relative;
}
.animatedbox4 .overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.animatedbox4 .animated-box {
  position: relative;
}
.animatedbox4 .left_sec .box_icon {
  width: 70px;
  height: 70px;
  float: right;
  padding: 10px;
}
.animatedbox4 .box_icon {
  filter: opacity(0.6) brightness(2.5);
}
.animatedbox4 .animated-box.backend_active .box_icon,
.animatedbox4 .animated-box:hover .box_icon {
  filter: opacity(1) brightness(1);
}
.animatedbox4 .right_sec .box_icon {
  width: 70px;
  height: 70px;
  float: left;
  padding: 10px;
}
.animatedbox4 .left_sec .box_header {
    position: absolute;
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
    text-align: center;
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.animatedbox4 .animated-box-inner {
    min-height: 70px;
    background-color: #ffffff;
    background-image: linear-gradient(#ffffff,#ffffff);
    border-radius: 50px;
}
/*.animatedbox4 .animated-box.backend_active .animated-box-inner,*/
.animatedbox4 .animated-box .animated-box-inner.hc-state
.animatedbox4 .animated-box:hover .animated-box-inner{
    background-color: #d4b29c;
    background-image: linear-gradient(#d4b29c,#d4b29c);
}
.animatedbox4 .box_header h4 {
    line-height: 70px;
    color: #573a27;
    text-transform: uppercase;
}
.animatedbox4 .animated-box {
    margin-bottom: 15px;
    margin-top: 15px;
}
.animatedbox4 .left_sec .animated-box.backend_active .box_header,
.animatedbox4 .left_sec .animated-box:hover .box_header {
    width: calc(100% - 70px);
    opacity: 1;
    visibility: visible;
    height: auto;
}
.animatedbox4 .left_sec .animated-box-inner {
    width: 70px;
    margin-right: 0;
    margin-left: auto;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.animatedbox4 .left_sec .animated-box.backend_active .animated-box-inner,
.animatedbox4 .left_sec .animated-box:hover .animated-box-inner {
    width: 100%;
    margin-right: 0;
    margin-left: auto;
}
.animatedbox4 .right_sec .animated-box-inner {
    width: 70px;
    margin-left: 0;
    margin-right: auto;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.animatedbox4 .right_sec .animated-box.backend_active .animated-box-inner,
.animatedbox4 .right_sec .animated-box:hover .animated-box-inner {
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}
.animatedbox4 .right_sec .box_header {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
.animatedbox4 .right_sec .animated-box.backend_active .box_header,
.animatedbox4 .right_sec .animated-box:hover .box_header {
    width: calc(100% - 70px);
    opacity: 1;
    visibility: visible;
    height: auto;
}
@media (max-width:992px) and (min-width: 768px){
}
@media (min-width: 993px){
}
@media (max-width: 992px){
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0%;
  }
}
@media (min-width: 768px) and (max-width:992px){
  .animatedbox1 .animated-box-back{
    transform: translate(0,70%);
  }
}
@media (max-width:767px){
  .animatedbox1 .half_container,
  .animatedbox2 .half_container {
    margin-bottom: 25px;
  }
  .animatedbox4 .right_sec .animated-box-inner,
  .animatedbox4 .left_sec .animated-box-inner {
        margin-left: auto;
        margin-right: auto;
    }
}
.animatedbox5 .half_container {
    padding-right: 0px;
    padding-left: 0px;
}
.animatedbox5 .animated-box .box_header h4 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
}
.animatedbox5 .animated-box .box_header {
    opacity: 0;
    visibility: hidden;
    position :absolute;
    top:  50%;
    Left:  50%;
    width:  100%;
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
}
.animatedbox5 .animated-box img {
  filter: grayscale(1);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;   
}
.pagebuilder-content .animatedbox5 .animated-box:hover,
.custom_edit .animatedbox5 .animated-box.backend_active {
    z-index: 2;
}
.pagebuilder-content .animatedbox5 .animated-box:hover .box_header,
.custom_edit .animatedbox5 .animated-box.backend_active .box_header {
    opacity: 1;
    visibility: visible;
}
.pagebuilder-content .animatedbox5 .animated-box:hover img,
.custom_edit .animatedbox5 .animated-box.backend_active img {
    filter: none;
    transform: scale(1.1);
    border: 2px solid transparent;
    border-image: linear-gradient(-45deg,#0018ff,#f003ff);
    border-image-slice: 1;
}