/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media only screen and (max-width: 320px){
    .logo_size{
        margin-top: -57px;
        max-width: 67%;
    }
    .image_product{
        margin: auto;
        display: block; 
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
        height: 150px ;
        max-width: 80%;
    }
    .login_image{
        margin: auto;
        display: block; 
        height: 150px ;
    }

    #logo_img{
        margin-top: -2px;
    }

    .navbar-brand {
        padding: 0px 0px;
    }
    .img_details{
        width: 100%;
        cursor:pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .detalis_text{
        float: left;
        color:white ;  
        font-size: 25px ;
    }
    .detalis_text1{
        float: right ;
        color:white ;
        font-size: 25px ;
    }
    .container-fluid {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .form_margin{
        margin-top: 161px;
    }
    .form_margin{
        margin-top: 71px;
    }
    .form-control {
        color: white !important;
        background-color: transparent !important;
        border: 3px solid white !important;
    }
    .btn {
        border: none;
        border-radius: 3px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 10px !important;
    }
    .about_section{
        padding:0px 0;  
    }
}


/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media only screen and  (min-width: 768px) and (max-width: 1024px){
    .logo_size{
        margin-top: 0px;
        max-width: 70%;
    }
    .image_product{
        margin: auto;
        display: block; 
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
        height: 455px ;
        max-width: 100%;
    }
    .login_image{
        margin: auto;
        display: block; 
        height: 170px ;
    }
    #logo_img{
        margin-top: -27px;
    }
    .navbar-brand {
        padding: 0px 0px;
    }
    .detalis_text{
        float: left;
        color:white;  
        font-size: 32px;
    }
    .detalis_text1{
        float: right;
        color:white;
        font-size: 32px;
    }
    .img_details{
        max-height:550px;
        cursor:pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        max-width: 80%;
    }
    .navbar-nav>li>a {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        PADDING-RIGHT: 10px!important;
        font-size: 16px !important;
    }
    .navbar-brand>img {
        max-width: 65% !important;
        margin-top: 11px !important;
    }
    .form_margin{
        margin-top: 161px;
    }
    .form-control {
        color: white !important;
        background-color: transparent !important;
        border: 3px solid white !important;
    }
    .about_section{
        padding:100px 0;  
    }

}


/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media only screen and (min-width: 1280px) {
    .logo_size{
        margin-top: -27px;
    }
    .image_product{
        margin: auto;
        display: block; 
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
        height: 190px ;
        max-width: 100%;
    }
    .login_image{
        margin: auto;
        display: block; 
        height: 190px ;
    }
    #div_height{
        height:271px;
    }
    #zoom_img{
        height:536px;
        cursor:pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .navbar-brand {
        padding: 0px 0px;
    }

    #BG{
        background:url('UC.png');
        background-size:cover;
        background-position:center center;                                                      
        margin-top: 50px;
        padding-bottom:350px;
        height: auto;
        display: block;
        max-width:100%
    }
    .section_margin{
        margin-top:26px;
    }
    .form_margin{
        margin-top: 161px;
    }
    #BG1{
        background:url('UC.png');
        background-size:cover;
        background-position:center center;

        margin-top: 50px;
        padding-bottom:181px;
        height: auto;
        display: block;
        max-width:100%
    }
    .section_margin1{
        margin-top:26px;
    }
    .form_margin1{
        margin-top: 161px;
    }

    .img_details{
        max-height:500px;
        cursor:pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        max-width: 80%;
    }
    .detalis_text{
        /*        float: left;*/
        color:white;  
        font-size: 27px;
    }
    .detalis_text1{
        /*        float: right;*/
        color:white;
        font-size: 27px;
    }
    .about_section{
        padding:100px 0;  
    }

}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media only screen and (min-width: 1920px) {
    .logo_size{
        margin-top: -27px;
    }

    .image_product{
        margin: auto;
        display: block; 
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
        height: 211px;
        max-width: 100%;
        /*                transform: rotate(90deg);*/
    }
    #div_height{
        height:280px;
    }
    #zoom_img{
        height:680px;
        cursor:move;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .navbar-brand {
        padding: 0px 0px;
    }
    .col-md-2 {
/*        width: 13.666667%;
        height: 386px;*/
    }
    .img_details{
        max-height:685px;
        cursor:move;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        max-width: 80%;
    }
    .detalis_text{
        /*        float: left;*/
        color:white;  
        font-size: 27px;
    }
    .detalis_text1{
        /*        float: right;*/
        color:white;
        font-size: 27px;
    }
    .section_margin{
        margin-top: -79px;
    }
    #BG{
        background:url('UC.png');
        background-size:cover;
        background-position:center center;

        margin-top: -40px;
        padding-bottom:443px;
        height: auto;
        display: block;
        max-width: 100%;
    }

   .form_margin{
        margin-top:300px ;
    }

    #BG1{
        background:url('UC.png');
        background-size:cover;
        background-position:center center;
        background-attachment:fixed;
        margin-top: 50px;
        padding-bottom:390px;
        height: auto;
        display: block;
        max-width: 100%;
    }
    .section_margin1{
        margin-top:-100px; 
    }
    .form_margin1{
        margin-top:200px ;
    }
    .login_image {
        margin: auto;
        display: block;
        height: 211px;
    }
    .row_margin_details{
        margin-top: 39px;
    }
    .about_section{
        padding:100px 0;  
    }
}