/*
FOUR MEDIA QUERY SIZES ARE USED. GENERAL CSS IS AT THE BOTTOM__________________
*/

 
@media screen and (min-width:300px) and (max-width:399px) {
    #foreground_color{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        background-color:rgb(0,0,0,0.8);
        display:none;
      }
      #display_big{
        display:none;
        position:absolute;
        top:33%;
        background-color:rgba(0,0,0,0.9);
        width:100%;
        height:320px;
        text-align:center;
        box-shadow:4px 8px 8px 4px rgba(0,0,0,0.4);
        border-radius:5px;
       
      }
    #div-left{
    width:50%;
    height:100%;
    color:white;
    float:left;
    padding-top:15px;
    }
    #display_big_left{

    width:100%;
    height:100%;
    object-fit:contain;
    }
    #img-holder{
        width:50%;
        height:100%;
        color:white;
        float:left;
    }
    .each-row{
    
    height:250px;
    background-color:rgba(100,100,100,0.1);
    box-shadow:0px 1px 1px 0px;
    text-align:center;
    padding:3px;
    box-sizing: border-box;
    float:left;
    
    }
    .spec{
        width:100%;
        height:96px;
        background-color:white;
        font-size:12px;
    }

    .big-img{
        height:150px;
        width:100%;
        cursor:pointer;
        object-fit:fill;

    }
    
    .inner-div{
        width:50%;
        height:50px;
        float:left;
        border-right: 1px solid rgba(100,100,100,0.5);
        font-size:10px;
        box-sizing: border-box;
    }

    .second-inner-div{
        width:50%;
        height:50px;
        float:left;
        font-size:10px;
        box-sizing: border-box;
    }
    .price{

        clear:left;
        float:right;
        font-size:10px;
        margin-right:15px;
        color:rgba(255,0,0,0.8);   
    }

    .buy{

        color:white;
        background-color:green;
        border-radius:100%;
        padding:3px;
        font-size: 8px;
        cursor:pointer;
    }
    .row-margin{
        margin-top:15px;
        padding:0;
    }
    
}


/* MEDIA QUERY FOR SMALL SCREEN -----------------------------------------------------------------------------*/

@media screen and (min-width:400px) and (max-width:767px) {
    #foreground_color{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        background-color:rgb(0,0,0,0.8);
        display:none;
      }
      #display_big{
        display:none;
        position:absolute;
        top:33%;
        background-color:rgba(0,0,0,0.9);
        width:100%;
        height:320px;
        text-align:center;
        box-shadow:4px 8px 8px 4px rgba(0,0,0,0.4);
        border-radius:5px;
       
      }
    #div-left{
    width:50%;
    height:100%;
    color:white;
    float:left;
    padding-top:15px;
    }
    #display_big_left{

            width:100%;
            height:100%;
            object-fit:contain;
    }
    #img-holder{
        width:50%;
        height:100%;
        color:white;
        float:left;
    }
    .each-row{
    
    height:250px;
    background-color:rgba(100,100,100,0.1);
    box-shadow:0px 1px 1px 0px;
    text-align:center;
    padding:3px;
    box-sizing: border-box;
    float:left;
    
    }
    .spec{
        width:100%;
        height:96px;
        background-color:white;
        font-size:12px;
    }

    .big-img{
        height:150px;
        width:100%;
        cursor:pointer;
        object-fit:cover;

    }
    
    .inner-div{
        width:50%;
        height:50px;
        float:left;
        border-right: 1px solid rgba(100,100,100,0.5);
        font-size:10px;
        box-sizing: border-box;
    }

    .second-inner-div{
        width:50%;
        height:50px;
        float:left;
        font-size:10px;
        box-sizing: border-box;
    }
    .price{

        clear:left;
        float:right;
        font-size:10px;
        margin-right:15px;
        color:rgba(255,0,0,0.8);   
    }

    .buy{

        color:white;
        background-color:green;
        border-radius:100%;
        padding:3px;
        font-size: 8px;
        cursor:pointer;
    }
    .row-margin{
        margin-top:15px;
        padding:0;
    }
}

 /* MEDIA QUERY FOR MEDIUM SCREEN -----------------------------------------------------------------------------*/


 @media screen and (min-width:768px) and (max-width:992px) {

    #foreground_color{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        background-color:rgb(0,0,0,0.8);
        display:none;
      }
      #display_big{
        display:none;
        position:absolute;
        top:33%;
        left:5%;
        background-color:rgba(0,0,0,0.9);
        width:90%;
        height:300px;
        text-align:center;
        box-shadow:4px 8px 8px 4px rgba(0,0,0,0.4);
        border-radius:5px;
       
      }
      #div-left{
        width:50%;
        height:100%;
        color:white;
        float:left;
        padding-top:15px;
        }
        #display_big_left{
    
                width:100%;
                height:100%;
                object-fit:cover;
        }
        #img-holder{
            width:50%;
            height:100%;
            color:white;
            float:left;
        }
      .each-row{
        
        height:250px;
        background-color:rgba(100,100,100,0.1);
        box-shadow:0px 1px 1px 0px;
        text-align:center;
        padding:3px;
        box-sizing: border-box;
        float:left;
        
        }
        .spec{
            width:100%;
            height:96px;
            background-color:white;
        }
        .big-img{
            height:150px;
            width:100%;
            cursor:pointer;
            object-fit:fill;

        }

        .inner-div{
            width:50%;
            height:50px;
            float:left;
            border-right: 1px solid rgba(100,100,100,0.5);
            font-size:10px;
            box-sizing: border-box;
        }
    
        .second-inner-div{
            width:50%;
            height:50px;
            float:left;
            font-size:10px;
            box-sizing: border-box;
        }
        .price{
    
            clear:left;
            float:right;
            font-size:10px;
            margin-right:15px;
            color:rgba(255,0,0,0.8);   
        }
    
        .buy{
    
            color:white;
            background-color:green;
            border-radius:100%;
            padding:3px;
            font-size: 8px;
            cursor:pointer;
        }
        .row-margin{
            margin-top:15px;
            padding:0;
        }
 }

 /* MEDIA QUERY FOR LARGE SCREEN -----------------------------------------------------------------------------*/

 @media screen and (min-width:993px){

    #foreground_color{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        background-color:rgb(0,0,0,0.8);
        display:none;
      }
      #display_big{
        display:none;
        position:absolute;
        top:33%;
        left:15%;
        background-color:rgba(0,0,0,0.9);
        width:70%;
        height:300px;
        text-align:center;
        box-shadow:4px 8px 8px 4px rgba(0,0,0,0.4);
        border-radius:5px;
       
      }
      #div-left{
        width:50%;
        height:100%;
        color:white;
        float:left;
        padding-top:15px;
        }
        #display_big_left{

        width:100%;
        height:100%;
        object-fit:cover;
        }
        #img-holder{
            width:50%;
            height:100%;
            color:white;
            float:left;
        }
      .each-row{
        
        height:250px;
        background-color:rgba(100,100,100,0.1);
        box-shadow:0px 1px 1px 0px; 
        text-align:center;
         padding:3px;
        box-sizing: border-box;
        float:left;
        
        }
        .spec{
            width:100%;
            height:96px;
            background-color:white;
        }
        .big-img{
            height:150px;
            width:100%;
            cursor:pointer;
            object-fit:fill;

        }
        .inner-div{
            width:50%;
            height:50px;
            float:left;
            border-right: 1px solid rgba(100,100,100,0.5);
            font-size:10px;
            box-sizing: border-box;
        }
    
        .second-inner-div{
            width:50%;
            height:50px;
            float:left;
            font-size:10px;
            box-sizing: border-box;
        }
        .price{
    
            clear:left;
            float:right;
            font-size:10px;
            margin-right:15px;
            color:rgba(255,0,0,0.8);   
        }
    
        .buy{
    
            color:white;
            background-color:green;
            border-radius:100%;
            padding:3px;
            font-size: 8px;
            cursor:pointer;
        }
        .row-margin{
            margin-top:15px;
            padding:0;
        }
    

 }