/*******Extra small devices (portrait phones, less than 576px)****************************************************************/
/*******No media query since this is the default in Bootstrap****************************************************************/
/* body::before{ content: "viewport is XS - 0px  -->575px";
 font-weight: bold !important;
 font-size: 11px;
font-family:sans-serif;
 display: block !important;
 text-align: center !important;
 background: rgba(243, 239, 5, 0.979) !important;   
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 z-index: 999 !important; 
}*/
 h4.modal-title{
 	font-size: 1.2rem !important;
 }
/******Small devices (landscape phones, 576px and up)*****************************************************************/

@media (min-width: 576px) {
    body::before{ content: "viewport is SM - 576px  -->767px";
     font-weight: bold !important;
     font-size: 10px;
    font-family:sans-serif;
     display: block !important;
     text-align: center !important;
    color: white;
     background: rgba(200,0,0, 0.9) !important;   
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     z-index: 399 !important;
    }
    }

    /* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    body::before{ content: "viewport is MD - 768px  -->991px";
    font-weight: bold !important;
    font-size: 10px;
   font-family:sans-serif;
    display: block !important;
    text-align: center !important;
    background: rgba(200,0,200, 0.9) !important;   
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 399 !important;
    
   }
   }

    /* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    body::before{ content: "viewport is LG - 992px  --> 1199px";
    font-weight: bold !important;
    font-size: 10px;
   font-family:sans-serif;
    display: block !important;
    text-align: center !important;
   color: #000;
    background: rgba(200,200,0, 0.9) !important;   
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 399 !important; 
   }
   }
   

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    body::before{ content: "viewport is XL - 1200px  --> XXXpx";
     font-weight: bold !important;
     font-size: 10px;
    font-family:sans-serif;
     display: block !important;
     text-align: center !important;
     background: rgba(200,200,200, 0.9) !important;   
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     z-index: 399 !important;
    
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1600px) {
    body::before{ content: "viewport is XXL - 1600px  --> XXXpx";
     font-weight: bold !important;
     font-size: 10px;
    font-family:sans-serif;
     display: block !important;
     text-align: center !important;
     background: rgba(200,200,200, 0.9) !important;   
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     right: 0 !important;
     z-index: 399 !important;
    
    }
}