@font-face {
  font-family: 'icomoon';
  src:  url('https://www.mybibnumber.com/fonts/icomoon.eot');
  src:  url('https://www.mybibnumber.com/fonts/icomoon.eot#iefix') format('embedded-opentype'),
    url('https://www.mybibnumber.com/fonts/icomoon.ttf') format('truetype'),
    url('https://www.mybibnumber.com/fonts/icomoon.woff') format('woff'),
    url('https://www.mybibnumber.com/fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cross:before {
  content: "\ea0f";
}
.icon-shrink2:before {
  content: "\e98c";
}
.icon-enlarge:before {
  content: "\e989";
}
.icon-zoom-in:before {
  content: "\e987";
}
.icon-zoom-out:before {
  content: "\e988";
}
.icon-undo2:before {
  content: "\e967";
}
.icon-redo2:before {
  content: "\e968";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-check-circle-solid:before {
  content: "\e901";
}
.icon-cart-minus-solid:before {
  content: "\e900";
}
.icon-cart-plus-solid:before {
  content: "\e903";
}
.icon-download-solid:before {
  content: "\e904";
}
.icon-facebook-f-brands:before {
  content: "\e905";
}
.icon-shopping-cart-solid:before {
  content: "\e906";
  margin-right:10px;
}
.icon-twitter-brands:before {
  content: "\e907";
} 
.icon-cart-arrow-down:before {
  content: "\e90d";
}
.icon-cart-arrow-up:before {
  content: "\e90e";
} 

#my_overlay {
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	position:fixed;
	top:0;
	left:0;
	z-index:80;
}
#my_popup_container {
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:90;
        display:flex;
        flex-wrap: wrap;
	
} 
.my_popup2 {
	width:45vw;
	height:45vw;
	margin:auto;
	display:flex;
        flex-direction:column;
        justify-content:center;
	padding:8px;
	max-width:100vw;
	max-height:100vh;
	color:black;
	box-sizing:border-box;
        align-items: center;
         text-align: center;
}
.my_popup2 h1 {font-size:1.75rem; line-height:1.75rem;}
.my_popup2 h2 {font-size:1.5rem; line-height:1.5rem;}

@media (min-height: 667px) and (min-width: 375px){
    .my_popup2 h1 {font-size:2.25rem; line-height:2.25rem;}
    .my_popup2 h2 {font-size:2rem; line-height:2rem;}
}
@media (min-height: 375px) and (min-width: 667px){
    .my_popup2 h1 {font-size:2.25rem; line-height:2.25rem;}
    .my_popup2 h2 {font-size:2rem; line-height:2rem;}
}
.my_popup2 .btn--bordered { background: black !important;}


@media (orientation: portrait) {
.my_popup2 {
    width:45vh;
    height:45vh;
    }
}
.popup_hider {
	display:none !important;
}

.my_popup {
	width:80%;
	height:80%;
	margin:auto;
	background:rgb(var(--gray-dark));
	position:absolute;
	padding:8px;
	 top: 0; left: 0; bottom: 0; right: 0;
	 max-width:700px;
	 max-height:450px;
	 
}
.my_popup div, .my_popup2 div {
    width: 100%;
    height: 100%;
    margin:auto;
   
    box-sizing: border-box;
    text-align: center;
    overflow-y: auto;
    background: rbg(var(--primary-color));
    max-width: 350px;
    max-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    align-self: stretch;
    align-content: center
}

@media (min-width: 1400px) {
.my_popup div, .my_popup2 div {
    max-width: 450px;
    max-height: 450px;
}
}

/* BOOTSTRAP OVERRIDE */

.modal-open .modal {overflow: hidden;}
.modal-content {background-color: rgb(var(--primary-color)); color: rgb(var(--secondary)) !important;}
.modal-content table {color: rgb(var(--secondary)) !important;}
.modal-dialog{  overflow-y: initial !important}
.modal-body{ max-height:75vh;    overflow-y: auto;}


.pswp__bg { background:rgb(var(--secondary)) !important; }

.pswp button { color:rgb(var(--primary-color)); !important; }

#back_to_top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 50px;
    background-color: rgb(var(--primary-color));;
    border-radius: 50px;
    opacity: 0;
    background-size: contain;
    background-image: url(/img/arrow_up.png);
    transition: all 1s ease-in-out;
    }
 #back_to_top.show{
    opacity: 0.7 !important;
    cursor: pointer;
 }