.our_modal_pop{
position: fixed;
z-index: 99999999;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
width: 80%;
width: 80%;
left:10%;
right:10%;
top:10%;
bottom: 10%;
background: white;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.32s;
-moz-transition: all 0.32s;
transition: all 0.32s;
}




@media (max-width: 1450px) and (min-width: 769px){
.our_modal_pop{width:88%!important;height:88%!important;left:6%!important;right:6%!important;top:6%!important;bottom:6%!important;}

}

@media (max-width: 768px) and (min-width: 320px){
.our_modal_pop{width:100%!important;height:100%!important;left:0px!important;right:0px!important;top:0px!important;bottom:0px!important;}

}


/*bite size modal ? this is for just regualr alaerets etc -- ones that need to be more adanved than a noty */

.our_modal_pop_small{
position: fixed;
z-index: 99999999;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
width: 46%;
width: 46%;
left:27%;
right:27%;
top:27%;
bottom: 27%;
background: white;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.32s;
-moz-transition: all 0.32s;
transition: all 0.32s;
}




@media (max-width: 1450px) and (min-width: 769px){
.our_modal_pop_small{width:50%!important;height:50%!important;left:25%!important;right:25%!important;top:25%!important;bottom:25%!important;}

}

@media (max-width: 768px) and (min-width: 320px){
.our_modal_pop_small{width:100%!important;height:100%!important;left:0px!important;right:0px!important;top:0px!important;bottom:0px!important;}

}



.our_modal_show {
visibility: visible!important;
}



.our_modal_overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9999999;
opacity: 0;
    background-color: rgba(0,0,0,0.32)!important;
-webkit-transition: all 0.32s;
-moz-transition: all 0.32s;
transition: all 0.32s;
}





.our_modal_show {
opacity: 1;
visibility: visible;
}


/* pop up modal style  */


.our_modal_show.our_modal_pop {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}






.our_modal_close {
text-shadow: 1px 1px 1px #fff;
cursor: pointer;
color: #d8d8d8;
position: absolute;
font-size: 24px!important;
height: 30px;
overflow: hidden;
z-index: 20;
z-index: 9999999999999;
border: 0;
width: 30px;
text-align: center;
}


.our_modal_no_head_close{
top: 12px;
    right: 25px;
}

.our_modal_with_head_close{
top: 10px;
    right: 10px;
}


.our_modal_pop {
  display: flex;
  flex-direction: column;
}

.our_modal_header, .our_modal_footer {
  flex: 0 0 auto;
  ackground: red;
}

.our_modal_content {
  flex: 1 1 auto;
  overflow-y: auto;
  ackground: green;
   -webkit-overflow-scrolling: touch;


}