/* ======================= */
/* MEDIA QUERY BREAKPOINTS */
/* ======================= */

/* ========================== */
/* BREAKPOINT 1 320px x 480px */
/* ========================== */
@media screen and (max-width: 360px) {

    /*TOP MENU*/
    #loginBasketBox{display:none;}
    .MainMenuSearch{width: 70px;}
    .LogoMiddle{width: calc(100% - 70px);}
    .LogoMiddleBox{line-height: 0.8;margin-left: 0;}

    #onTopBasket{display:block;}
    #onTopBasketNum{display:block;}

    
    /*#promotionImage{height: 240px;background-image: url(../common/backMainSmall.jpg);background-size: cover;}*/
    #promotionImage{height: 240px;background-image: url(../common/kierie.jpg);background-size: cover;}
    .goBig{top: 8px;font-size: 22px;}
    .goBig2{top: 120px;font-size: 40px;}
    .HD1{font-size: 20px;}
    .HD2{font-size: 12px;}
        
    #newsemail{width: 190px;}
    #vendorLogosHeader{margin-top: 20px;}
    
    #contactUsFacebook{background-color: white};
    #aboutUs{padding: 10px;}
    #aboutUsIn{left: 0;
               width: 100%;}
        
        
    #policyLeft{width: 100%;  text-align: center;background-color: white}
    #policyLeft img{height: 20px;}
    #policy{width: 100%;}
    #policyRight{width: 100%;}

    #topProductPromoBox{height: 220px;}
    #topProductPromoWords{
        top: 165px;
        left: 0;
        width: 100%;
        height: auto;
        font-size: 30px;}
    
    /*ShowProduct*/
    #imagesContainer{width: 300px;margin-top: 5px;}
    #smallImg img{width: 30px;}
    .backDrop{top:20px;}
    #productInfoDiv{width: 300px;}
    .SP1{font-size: 25px;}
    
    #loginScreenDiv{width: 99%;}
    #registerScreenDiv{width: 99%;}
    
    /*SHOPPING BASKET*/
    #transbar{display:none;}
    .deleteDiv {padding-top: 30px;
                margin-right: 20px;
                width: 100%;
                height: 25px;
                padding-top: 0;
                margin-right: 0;
                margin-bottom: 5px;
                text-align: left;}
    .image {margin-right: 0;
            width: 100%;}
    .image img{height: 220px;}
    .description {padding-top: 10px;
                  margin-right: 0px;
                  padding-bottom: 10px;
                  width: 100%;
                  font-size: 15px;
                  border-bottom: 1px dotted grey;}
    .ref{font-size: 15px;}
    .quantity {margin-right: 0;
               padding-top: 5px;
                width: 30%;
                font-size: 16px;}
    .minus-btn,
    .plus-btn{margin-top: 0px;}
    .item-price {width: 35%;
      padding-top: 5px;
      margin-right: 0px;
      font-size: 16px;
      text-align: right;
    }
    .total-price {padding-top: 5px;
                    font-size: 16px;
                  text-align: right;
            width: 35%;}
    .butLeft{width: 100%; text-align: center; background-color: transparent;}
    .butRight{width: 100%; text-align: center; background-color: transparent;}

    /*vendorShow*/
    .venAboutMiddle2{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .venBox{
        width: 300px;
    }
    
    
    /*showVoucher*/
    #showAdminVouch{width: 358px;}
    .colV2{width: 60px;}
    .colV3{width: 60px;}
    .colV4{display:none;}
    .colV5{width: 90px;}
     
    /*showOrder*/
    .ordSize {font-size: 11px;}
    #transbar{display:none;}

    
    /*checkoutone and two*/
    #shipLeft{display:none; order: 6;}
    #manCheckOutOneDiv{width: 100%;}
    #spacer{width: 100%; 
            order: 1; 
            text-align: center; 
            padding-left: 0px; 
            padding-bottom: 30px;}
    #shipRight{text-align: right; 
               order: 2;
               padding-left: 0px;
               padding-right: 20px;
               width: 100%;}

    /*checkoutthree*/
    .payHeight{height: 30px;}
    .payBut{width: 150px;}
    
    /*packages*/
    #vendorPackHead{font-size: 40px;}
    #vendorOffer{font-size: 15px;
                 padding-left: 10px;
                 padding-right: 10px;}
    .vendorinfo{width: 240px;height: 30px;}
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{width: 90%;
                padding-left: 0px;
                padding-right: 0px;
                margin: 0;}
    #vendorPack1,
    #vendorPack2, 
    #vendorPack3{padding-left: 10px;
                padding-right: 10px;
                width: 280px;}
    .VH1{font-size: 20px;}
    .bitem{width: 300px;}
    
    
}

@media screen and (min-width: 360px) and (max-width: 375px) {

    /*TOP MENU*/
    #loginBasketBox{display:none;}
    .MainMenuSearch{width: 70px;}
    .LogoMiddle{width: calc(100% - 70px);}
    .LogoMiddleBox{line-height: 0.8;margin-left: 0;}
    
    #onTopBasket{display:block;}
    #onTopBasketNum{display:block;}
    
    #promotionImage{height: 240px;background-image: url(../common/kierie.jpg);background-size: cover;}
    .goBig{top: 8px;font-size: 22px;}
    .goBig2{top: 120px;font-size: 40px;}
        
    #newsemail{width: 190px;}
    
    #policyLeft img{height: 20px;}
    #aboutUs{padding: 20px;}
    #aboutUsIn{left: 0;
               width: 100%;padding-bottom: 20px;}
    
    #vendorLogosHeader{margin-top: 20px;}
    
    #contactUsFacebook{background-color: white;}
    
    #topProductPromoBox{height: 220px;}
    #topProductPromoWords{
        top: 170px;
        left: 0;
        width: 100%;
        height: auto;
        font-size: 30px;}
    
     
    /*ShowProduct*/
    #imagesContainer{width: 300px;margin-top: 5px;}
    #smallImg img{width: 30px;}
    .backDrop{top:20px;}
    #productInfoDiv{width: 300px;}
    .SP1{font-size: 25px;}
    
    #loginScreenDiv{width: 99%;}
    #registerScreenDiv{width: 99%;}
    
    /*SHOPPING BASKET*/
    #transbar{display:none;}
    .deleteDiv {padding-top: 30px;
                margin-right: 20px;
                width: 100%;
                height: 25px;
                padding-top: 0;
                margin-right: 0;
                margin-bottom: 5px;
                text-align: left;}
    .image {margin-right: 0;
            width: 100%;}
    .image img{height: 220px;}
    .description {padding-top: 10px;
                  margin-right: 0px;
                  padding-bottom: 10px;
                  width: 100%;
                  font-size: 15px;
                  border-bottom: 1px dotted grey;}
    .ref{font-size: 15px;}
    .quantity {margin-right: 0;
               padding-top: 5px;
                width: 30%;
                font-size: 16px;}
    .minus-btn,
    .plus-btn{margin-top: 0px;}
    .item-price {width: 35%;
      padding-top: 5px;
      margin-right: 0px;
      font-size: 16px;
      text-align: right;
    }
    .total-price {padding-top: 5px;
                    font-size: 16px;
                  text-align: right;
            width: 35%;}
    .butLeft{width: 100%; text-align: center; background-color: transparent;}
    .butRight{width: 100%; text-align: center; background-color: transparent;}
    
    /*vendorShow*/
    .venAboutMiddle2{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .venBox{
        width: 300px;
    }   
     
    /*showVoucher*/
    #showAdminVouch{width: 358px;}
    .colV2{width: 60px;}
    .colV3{width: 60px;}
    .colV4{display:none;}
    .colV5{width: 90px;}
     
    /*showOrder*/
    .ordSize {font-size: 13px;}
    
    /*checkoutone and two*/
    #shipLeft{display:none; margin: 0;}
    #manCheckOutOneDiv{width: 100%;}
    #spacer{width: 100%; 
            order: 1; 
            text-align: center; 
            padding-left: 0px; 
            padding-bottom: 30px;}
    #shipRight{text-align: right; 
               order: 2;
               padding-left: 0px;
               padding-right: 20px;
               width: 300px;}
    
    /*checkoutthree*/
    .payHeight{height: 30px;}
    .payBut{width: 150px;}
    
    /*packages*/
    #vendorPackHead{font-size: 40px;}
    #vendorOffer{font-size: 15px;
                 padding-left: 10px;
                 padding-right: 10px;}
    .vendorinfo{width: 240px;height: 30px;}
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{width: 90%;
                padding-left: 0px;
                padding-right: 0px;
                margin: 0;}
    #vendorPack1,
    #vendorPack2, 
    #vendorPack3{padding-left: 10px;
                padding-right: 10px;
                width: 280px;}
    .VH1{font-size: 20px;}
    .bitem{width: 300px;}

}

@media screen and (min-width: 375px) and (max-width: 411px) {

    /*TOP MENU*/
    #loginBasketBox{display:none;}
    .MainMenuSearch{width: 70px;}
    .LogoMiddle{width: calc(100% - 70px);}
    .LogoMiddleBox{line-height: 0.9;margin-left: 0;}
    
    #onTopBasket{display:block;}
    #onTopBasketNum{display:block;}
     
    #promotionImage{height: 240px;background-image: url(../common/kierie.jpg);background-size: cover;}
    .goBig{top: 8px;font-size: 25px;}
    .goBig2{top: 115px;font-size: 45px;}
        
    #newsemail{width: 210px;}
    #vendorLogosHeader{margin-top: 20px;}
    
    #policyLeft img{height: 20px;}
    #aboutUs{padding: 20px;}
    #aboutUsIn{left: 0;width: 100%;padding-bottom: 20px;}
    
    #contactUsFacebook{background-color: white;}
    
    #topProductPromoBox{height: 250px;} 
    #topProductPromoWords{
        top: 195px;
        left: 0;
        width: 100%;
        height: auto;
        font-size: 30px;}
    
    /*ShowProduct*/
    #imagesContainer{width: 300px;margin-top: 5px;}
    #smallImg img{width: 30px;}
    .backDrop{top:20px;}
    #productInfoDiv{width: 300px;}
    .SP1{font-size: 25px;}
    #loginScreenDiv{width: 99%;}
    #registerScreenDiv{width: 99%;}
    
    /*SHOPPING BASKET*/
    #transbar{display:none;}
    .deleteDiv {padding-top: 30px;
                margin-right: 20px;
                width: 100%;
                height: 25px;
                padding-top: 0;
                margin-right: 0;
                margin-bottom: 5px;
                text-align: left;}
    .image {margin-right: 0;
            width: 100%;}
    .image img{height: 220px;}
    .description {padding-top: 10px;
                  margin-right: 0px;
                  padding-bottom: 10px;
                  width: 100%;
                  font-size: 15px;
                  border-bottom: 1px dotted grey;}
    .ref{font-size: 15px;}
    .quantity {margin-right: 0;
               padding-top: 5px;
                width: 30%;
                font-size: 16px;}
    .minus-btn,
    .plus-btn{margin-top: 0px;}
    .item-price {width: 35%;
      padding-top: 5px;
      margin-right: 0px;
      font-size: 16px;
      text-align: right;
    }
    .total-price {padding-top: 5px;
                    font-size: 16px;
                  text-align: right;
            width: 35%;}
    .butLeft{width: 100%; text-align: center; background-color: transparent;}
    .butRight{width: 100%; text-align: center; background-color: transparent;}

    /*vendorShow*/
    
    .venAboutMiddle2{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .venBox{
        width: 300px;
    }
    
    
    /*showVoucher*/
    #showAdminVouch{width: 358px;}
    .colV2{width: 60px;}
    .colV3{width: 60px;}
    .colV4{display:none;}
    .colV5{width: 90px;}
     
    /*checkoutone and two*/
    #shipLeft{display:none; margin: 0;}
    #manCheckOutOneDiv{width: 100%;}
    #spacer{width: 100%; 
            order: 1; 
            text-align: center; 
            padding-left: 0px; 
            padding-bottom: 30px;}
    #shipRight{text-align: right; 
               order: 2;
               padding-left: 0px;
               padding-right: 20px;
               width: 300px;}
    
    /*checkoutthree*/
    .payHeight{height: 30px;}
    .payBut{width: 150px;}
    
    /*packages*/
    #vendorPackHead{font-size: 40px;}
    #vendorOffer{font-size: 15px;
                 padding-left: 10px;
                 padding-right: 10px;}
    .vendorinfo{width: calc(100% - 80px);
               height: 30px;}
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{width: 99%;
                padding-left: 0px;
                padding-right: 0px;
                margin: 0;}
    #vendorPack1,
    #vendorPack2, 
    #vendorPack3{padding-left: 10px;
                padding-right: 10px;
                width: 280px;}
    .VH1{font-size: 20px;}
    .bitem{width: 300px;}
    
}

@media screen and (min-width: 411px) and (max-width: 768px) {
    
    /*TOP MENU*/
    #loginBasketBox{display:none;}
    .MainMenuSearch{width: 70px;}
    .LogoMiddle{width: calc(100% - 70px);}
    .LogoMiddleBox{line-height: 0.9;margin-left: 0;}
    
    #onTopBasket{display:block;}
    #onTopBasketNum{display:block;}
    
    #promotionImage{height: 240px;background-image: url(../common/kierie.jpg);background-size: cover;}
    .goBig{top: 8px;font-size: 25px;}
    .goBig2{top: 115px;font-size: 45px;}
    
    
    #policyLeft img{height: 20px;}
    #aboutUs{padding: 20px;}
    #aboutUsIn{padding-bottom: 20px;}
    
    #topProductPromoBox{height: 280px;}
    #topProductPromoWords{
        top: 230px;
        left: 0;
        width: 100%;
        height: auto;
        font-size: 30px;}
    
    /*ShowProduct*/
    #imagesContainer{width: 390px;margin-top: 5px;}
    #smallImg img{width: 50px;}
    .backDrop{top:20px;}
    #productInfoDiv{width: 390px;}
    #loginScreenDiv{width: 99%;}
    #registerScreenDiv{width: 99%;}
    /*SHOPPING BASKET*/
    #transbar{display:none;}
    .deleteDiv {padding-top: 30px;
                margin-right: 20px;
                width: 100%;
                height: 25px;
                padding-top: 0;
                margin-right: 0;
                margin-bottom: 5px;
                text-align: left;}
    .image {margin-right: 0;
            width: 100%;}
    .image img{height: 220px;}
    .description {padding-top: 10px;
                  margin-right: 0px;
                  padding-bottom: 10px;
                  width: 100%;
                  font-size: 15px;
                  border-bottom: 1px dotted grey;}
    .ref{font-size: 15px;}
    .quantity {margin-right: 0;
               padding-top: 5px;
                width: 30%;
                font-size: 16px;}
    .minus-btn,
    .plus-btn{margin-top: 0px;}
    .item-price {width: 35%;
      padding-top: 5px;
      margin-right: 0px;
      font-size: 16px;
      text-align: right;
    }
    .total-price {padding-top: 5px;
                    font-size: 16px;
                  text-align: right;
            width: 35%;}
    .butLeft{width: 100%; text-align: center; background-color: transparent;}
    .butRight{width: 100%; text-align: center; background-color: transparent;}

    /*vendorShow*/
    
        .venAboutLeft{
        width: 100%;
        padding: 20px;
        margin-left: 0;
        text-align: center;
    }
    .venAboutMiddle2{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .venBox{
        width: 300px;
    }
    .venAboutRight{
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .vendorPhotoLeft,
    .vendorPhotoMiddle,
    .vendorPhotoRight{
        width: 100px;
        height: 100px;
        margin: 10px;
    }

    
     /*showVoucher*/
     #showAdminVouch{width: 358px;}
     .colV2{width: 60px;}
     .colV3{width: 60px;}
    .colV4{display:none;}
     .colV5{width: 90px;}
     
     /*checkoutone and two*/
    #shipLeft{display:none; margin: 0;}
    #manCheckOutOneDiv{width: 100%;}
    #spacer{width: 100%; 
            order: 1; 
            text-align: center; 
            padding-left: 0px; 
            padding-bottom: 30px;}
    #shipRight{text-align: right; 
               order: 2;
               padding-left: 0px;
               padding-right: 20px;
               width: 300px;}

     /*checkoutthree*/
    .payHeight{height: 30px;}
    .payBut{width: 150px;}
    
    /*packages*/
    #vendorPackHead{font-size: 40px;}
    #vendorOffer{font-size: 15px;
                 padding-left: 10px;
                 padding-right: 10px; 
                 margin: 0 auto;}
    .vendorinfo{width: calc(100% - 80px);
               height: 30px;}
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{width: 99%;
                padding-left: 0px;
                padding-right: 0px;
                margin: 0;}
    #vendorPack1,
    #vendorPack2, 
    #vendorPack3{padding-left: 20px;
                padding-right: 20px;
                width: 280px;}
    .VH1{font-size: 20px;}
    
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
    .LogoMiddle a { letter-spacing: 8px;   
                    font-size: 25px;}
    
    #promotionImage{height: 240px;background-image: url(../common/kierie.jpg);background-size: cover;}
    .goBig{top: 8px;font-size: 45px;}
    .goBig2{top: 60px;font-size: 60px;}
    
   
    #policyLeft img{height: 20px;}
    
    #aboutUs{padding: 40px;}
    
    #topProductPromoBox{height: 400px;}
    #topProductPromoWords{
        top: 330px;
        font-size: 40px;}
    
    /*ShowProduct*/
    #imagesContainer{margin-top: 5px;}
    .backDrop{top:20px;}

    /*SHOPPING BASKET*/
    #transbar{display:none;}
    .deleteDiv {padding-top: 30px;
                margin-right: 20px;
                width: 100%;
                height: 25px;
                padding-top: 0;
                margin-right: 0;
                margin-bottom: 5px;
                text-align: left;}
    .image {margin-right: 0;
            width: 100%;}
    .image img{height: 220px;}
    .description {padding-top: 10px;
                  margin-right: 0px;
                  padding-bottom: 10px;
                  width: 100%;
                  font-size: 15px;
                  border-bottom: 1px dotted grey;}
    .ref{font-size: 15px;}
    .minus-btn,
    .plus-btn{margin-top: 0px;}
    .quantity {margin-right: 0;
               padding-top: 5px;
                width: 30%;
                font-size: 16px;}
    .item-price {width: 35%;
      padding-top: 5px;
      margin-right: 0px;
      font-size: 16px;
      text-align: right;
    }
    .total-price {padding-top: 5px;
                    font-size: 16px;
                  text-align: right;
            width: 35%;}
    .butLeft{width: 100%; text-align: center; background-color: transparent;}
    .butRight{width: 100%; text-align: center; background-color: transparent;}

    /*vendorShow*/
    .venAboutLeft{
        width: 100%;
        padding: 20px;
        margin-left: 0;
        text-align: center;
    }
    .venAboutMiddle2{
        display:flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
        
    }
    .venAboutRight{
        width: 100%;
        padding: 20px;
        margin-left: 0;
        margin: auto;
        text-align: center;
    }
    .vendorPhotoLeft,
    .vendorPhotoMiddle,
    .vendorPhotoRight{
        width: 200px;
        height: 200px;
    }
    

     /*checkoutone and two*/
    #shipLeft{width:200px; order: 2;}
    #manCheckOutOneDiv{width: 100%;}
    #spacer{width: 100%; 
            order: 1; 
            text-align: center; 
            padding-left: 0px; 
            padding-bottom: 40px;}
    #shipRight{text-align: right; 
               order: 3;
               padding-left: 30px;
               padding-right: 20px;
               width: 300px;}

        
     /*packages*/
    #vendorOffer{font-size: 15px;}
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        margin: 0;background-color: transparent;}
    .vendorinfo{width: calc(100% - 60px)}
    #vendorPack1,
    #vendorPack2,
    #vendorPack3{
        padding-left: 10px;
        padding-right: 10px;
        width: 600px;}
    
    #vendorPackages{font-size: 15px;}
    
}


@media screen and (min-width: 1280px) and (max-width: 1366px) {
    .LogoMiddle a { letter-spacing: 8px;   
                    font-size: 30px;}
    
    #aboutUs{padding-left: 250px;
             padding-right: 250px;}
    #afterCart{width: 900px;}
    
    /*packages*/
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{
        padding-left: 10px;
        padding-right: 10px;
        width: 250px;
        margin: 30px;}
    .vendorinfo{width: 170px;}
    #vendorPack1,
    #vendorPack2,
    #vendorPack3{
        padding-left: 10px;
        padding-right: 10px;
        width: 250px;}
    #vendorOffer{font-size: 18px;}
    #vendorPackages{font-size: 15px;}
}

@media screen and (min-width: 1366px) and (max-width: 1440px) {
    .LogoMiddle a { letter-spacing: 8px;   
                    font-size: 30px;}        
    
    #aboutUs{padding-left: 250px;
             padding-right: 250px;}
    #afterCart{width: 900px;}
    /*packages*/
    #vendorOff1,
    #vendorOff2,
    #vendorOff3{
        padding-left: 10px;
        padding-right: 10px;
        width: 250px;
        margin: 30px;}
    .vendorinfo{width: 170px;}
    #vendorPack1,
    #vendorPack2,
    #vendorPack3{
        padding-left: 10px;
        padding-right: 10px;
        width: 250px;}
    #vendorOffer{font-size: 18px;}
    #vendorPackages{font-size: 15px;}
}

@media screen and (min-width: 1440px) {
    .LogoMiddle a { letter-spacing: 8px;   
                    font-size: 30px;}   
    
    #aboutUs{padding-left: 250px;
             padding-right: 250px;}
    #afterCart{width: 900px;}
}