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

@media (min-width: 1281px) {

	
}

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

@media (min-width: 1025px) and (max-width: 1280px) {
  /*header*/
  ul.ruby-menu > li > a{
    padding: 0px 10px!important;
    font-size: 10px;
  }
  ul.ruby-menu > li > a > img {
    width: 65%!important;
  }
  /*footer*/
  .footer-fb {
    right: 280px;
  }
  .footer-twt {
    position: absolute;
    right: 250px;
  }
  .footer-lin {
    position: absolute;
    right: 220px;
  }
  .footer-insta {
    position: absolute;
    right: 190px;
  }
  /*list page*/
  .kitch-crock {
    margin: 50px 30px 0px 30px;
  }
  /*flow chart*/
  .ps-timeline-sec .container ol.ps-timeline li .no-1{
    left: 155px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-2{
    top: -7px;
    left: 133px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-3{
    top: -37px;
    left: 126px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top2 {
    right: 62px;
  }

	

}

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

@media (min-width: 768px) and (max-width: 1024px) {
  /*header*/
  ul.ruby-menu > li > a > img{
    width: 50%!important;
  }
  ul.ruby-menu > li > a{
    padding: 0px 6px!important;
    font-size: 7px;
  }
  /*footer*/
  .footer-logo {
    width: 25%;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .footer-fb {
    right: 500px;
    top: 60px;
  }
  .footer-twt {
    right: 470px;
    top: 60px;
  }
  .footer-lin {
    right: 440px;
    top: 60px;
  }
  .footer-insta {
    right: 410px;
    top: 60px;
  }
  /*list page*/
  .kitch-crock {
    margin: 50px 20px 0px 20px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-1{
    top: -45px;
    left: 140px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-2{
    top: 6px;
    left: 121px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-3{
    top: -40px;
    left: 113px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .no-4{
    left: 138px;
  }
  .box2 {
    width: 96%;
    height: 100px;
    border: dashed 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 52%/56px 59px 0 0;
    transform: rotate(25deg);
    left: 84px;
    position: relative;
    top: 5px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top1 {
    top: 14px;
    left: 28px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot1 {
    left: 37px;
    bottom: 19px;
    width: 100%;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top1 {
    bottom: 144px;
    left: 33px;
    width: 100%;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot1 {
    width: 100%;
    top: -116px;
    left: 29px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top2 {
    width: 100%;
    top: 0px;
    right: 34px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot2 {
    left: -64px;
    bottom: 37px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top2 {
    bottom: 142px;
    left: 43px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot2 {
    width: 100%;
    top: -147px;
    left: 18px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot3 {
    top: 92px;
    left: 10px;
  }
	
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

	
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/



@media screen and (max-width: 767px) {
  .ps-timeline-sec .container ol:before {
    background: #348e80;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    top: 130px !important;
    left: 36px !important;
  }
  .ps-timeline-sec .container ol:after {
    background: #348e80;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    top: inherit !important;
    left: 36px;
  }
  .ps-timeline-sec .container ol.ps-timeline {
    margin: 130px 0 !important;
    border-left: 2px solid #ed3237;
    padding-left: 0 !important;
    padding-top: 75px !important;
    border-top: 0 !important;
    margin-left: 25px !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li {
    height: 130px;
    float: none !important;
    width: inherit !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li:nth-child(2) .img-handler-bot img {
    width: 70px;
  }
  .ps-timeline-sec .container ol.ps-timeline li:last-child {
    margin: 0;
    bottom: 0 !important;
    height: 75px;
  }
  .ps-timeline-sec .container ol.ps-timeline li span {
    left: 0 !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
    content: none !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
    content: none !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
    content: none !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
    content: none !important;
  }
  .ps-timeline-sec .container ol.ps-timeline li p {
    text-align: left !important;
    width: 100% !important;
    margin: 0 auto !important;
    margin-top: 0px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  /*header*/
  .ruby-menu-demo-header {
    height: 60px;
  }
	ul.ruby-menu > li > a > img {
    display: none;
  }
  div.ruby-wrapper > ul {
    top: 107px;
  }
  /*footer*/
  .since {
    position: fixed;
    top: 60px;
  }
  .footer-logo {
    width: 48%;
    margin-top: 13px;
    margin-bottom: 25px;
  }
  .footer-fb {
    position: absolute;
    top: 60px;
    left: 120px;
  }
  .footer-twt {
    position: absolute;
    top: 60px;
    left: 150px;
  }
  .footer-lin {
    position: absolute;
    top: 60px;
    left: 180px;
  }
  .footer-insta {
    position: absolute;
    top: 60px;
    left: 210px;
  }
  /*home*/
  .profile-p {
    padding: 30px;
  }
  /*list page*/
  .kitch-crock {
    margin: 50px 25px 0px 25px;
  }
  .kitch-para{
    padding-left: 30px;
  }
  /*flow chart*/
  #work_flow{
    display: none;
  }
  #work_mob{
    display: block;
  }
  .bt .container ol:after{
    display: none;
  }
  .bt .container ol:before{
    display: none;
  }
  .ps-timeline-sec {
    background: #564a350d;
  }
  .ps-timeline-sec .container ol.ps-timeline {
    margin: 130px 0 !important;
    border-left: 2px solid #ed3237;
    padding-left: 0 !important;
    padding-top: 75px !important;
    border-top: 0 !important;
    margin-left: 39px !important;
    position: relative;
    left: -16px;
    margin-top: -16px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline .step5  .span-5{
    right: 50px!important;
    margin-left: -50px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top1 {
    position: absolute;
    width: 80%!important;
    top: -45px!important;
    left: -72px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot1 {
    position: absolute;
    left: 174px!important;
    bottom: 113px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot1 {
    position: absolute;
    width: 80%!important;
    top: -44px!important;
    left: -68px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top1 {
    position: absolute;
    position: absolute;
    bottom: 118px!important;
    left: 178px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top2 {
    position: absolute;
    width: 80%!important;
    top: -41px!important;
    right: 150px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot2 {
    position: absolute;
    left: 182px!important;
    bottom: 108px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot2 {
    position: absolute;
    width: 80%!important;
    top: -49px!important;
    left: -62px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top2 {
    position: absolute;
    bottom: 114px!important;
    left: 182px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top3 {
    position: absolute;
    width: 80%!important;
    top: -39px!important;
    left: -78px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot3 {
    position: absolute;
    top: -9px!important;
    left: 162px!important;
  }

}

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

@media (min-width: 320px) and (max-width: 480px) {
	
	.ruby-menu-demo-header{
    height: 50px;
  }
  div.ruby-wrapper > ul {
    top: 42px;
  }
  ul.ruby-menu > li > a {
    line-height: 43px;
  }
  .since {
    top: 50px;
  }
  .c-hamburger--htx {
    background-color: #ed3237;
  }
  .ruby-wrapper .visible-xs {
    visibility: visible;
    position: absolute;
    right: 0;
    top: 0;
  }
  /*footer*/
  .footer-logo {
    width: 75%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .footer-fb {
    position: absolute;
    top: 59px;
    left: 112px;
  }
  .footer-twt {
      position: absolute;
      top: 59px;
      left: 140px;
  }
  .footer-lin {
      position: absolute;
      top: 59px;
      left: 169px;
  }
  .footer-insta {
      position: absolute;
      top: 59px;
      left: 196px;
  }
  .footer-op {
    padding-left: 34px;
    padding-right: 0px;
  }
  /*banner*/
  .nav-container .nav-lists .nav-list1:hover {
    transform: translateX(-63vw);
  }
  .nav-container .nav-lists .nav-list:hover {
      transform: translateX(-12vw);
  }
  .nav-container .nav-lists .nav-list1 {
    --tx: calc( -60% + var(--offset-width));
  }
  .nav-container .nav-lists .nav-list {
    --tx: calc( -109% + var(--offset-width));
  }
  /*home page*/
  .profile-p {
    padding: 10px;
  }
  .ourpro-cont {
    margin-top: 50px;
    padding-left: 42px;
    padding-right: 20px;
    margin-bottom: 50px;
  }
  /*list page*/
  .kitch-crock {
    margin: 0px;
  }
  .kitch-p {
    padding: 0px 0px 0px 30px;
  }
  .kitch-para h2{
    text-align: right!important;
  }
  .img-w{
    width: 25%;
  }
  .crock-det p {
    padding-right: 0px;
  }
  .btnsbt {
    width: 26%!important;
  }
  /*flow chart*/
  #work_flow{
    display: none;
  }
  #work_mob{
    display: block;
  }
  .bt .container ol:after{
    display: none;
  }
  .bt .container ol:before{
    display: none;
  }

  .ps-timeline-sec .container ol.ps-timeline {
    margin: 130px 0 !important;
    border-left: 2px solid #ed3237;
    /* padding-left: 0 !important; */
    padding-top: 75px !important;
    border-top: 0 !important;
    margin-left: 25px !important;
    position: relative;
    left: -12px;
    margin-top: -20px!important;
  }
  .ps-timeline-sec .container ol.ps-timeline .step5  .span-5{
    right: 50px!important;
    margin-left: -50px;
  }
  .ps-timeline-sec .container ol.bt1 {
    margin: 50px 0;
  }
  .ps-timeline-sec {
    background: #564a350d;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot1 {
    position: absolute;
    width: 90%;
    top: -161px;
    left: -63px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top1 {
    position: absolute;
    position: absolute;
    bottom: 234px;
    left: 116px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top1 {
    position: absolute;
    width: 90%;
    top: 99px;
    left: -63px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot1 {
    position: absolute;
    left: 121px;
    bottom: -24px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top2 {
    position: absolute;
    width: 90%;
    top: -36px;
    right: 87px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot2 {
    position: absolute;
    left: 117px;
    bottom: 116px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot2 {
    position: absolute;
    width: 90%;
    top: -26px;
    left: -63px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top2 {
    position: absolute;
    bottom: 95px;
    left: 120px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top3 {
    position: absolute;
    width: 90%;
    top: -27px;
    left: -84px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot3 {
    position: absolute;
    top: -13px;
    left: 99px;
  }

	
}





/*
	##one-plus = phone iphone long
	##screen = b/w 412 to 767

*/

@media only screen and (min-width: 412px) and (max-width: 767px) {
/*header*/
  ul.ruby-menu > li > a > img {
    display: none;
  }
  div.ruby-wrapper > ul {
    top: 98px;
  }

  /*flow chart*/
  #work_flow{
    display: none;
  }
  #work_mob{
    display: block;
  }
  .ps-timeline-sec {
    background: #564a350d;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot1 {
    position: absolute;
    width: 90%;
    top: -169px;
    left: -86px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top1 {
    position: absolute;
    position: absolute;
    bottom: 250px;
    left: 135px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top1 {
    position: absolute;
    width: 90%;
    top: 86px;
    left: -79px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot1 {
    position: absolute;
    left: 138px;
    bottom: -24px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top2 {
    position: absolute;
    width: 90%;
    top: -41px;
    right: 108px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot2 {
    position: absolute;
    left: 141px;
    bottom: 110px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot2 {
    position: absolute;
    width: 90%;
    top: -41px;
    left: -68px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-top2 {
    position: absolute;
    bottom: 114px;
    left: 150px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .img-handler-top3 {
    position: absolute;
    width: 90%;
    top: -43px;
    left: -92px;
  }
  .ps-timeline-sec .container ol.ps-timeline li .ps-bot3 {
    position: absolute;
    top: -22px;
    left: 126px;
  }


}





/*---------------------------------------------------- */
/*Responsive  area*/
/*----------------------------------------------------*/
/* ==================================================
*	01 - media screen and (max-width: 1440px)
*	02 - media screen and (max-width: 1280px)
*	03 - media screen and (max-width: 1199px)
*	04 - media screen and (max-width: 991px)
*	05 - media screen and (max-width: 767px)
*	06 - media screen and (max-width: 680px)
*	07 - media screen and (max-width: 580px)
*	08 - media screen and (max-width: 480px)
*	09 - media screen and (max-width: 380px)
*	10 - media screen and (max-width: 320px)
================================================== */



/* All the mobile devices*/

@media screen and (max-width: 480px) {
}

@media all and (max-width: 767px) {
  
    #mainnav #menu {
        display: block;
    }

    #mainnav ul {
        display: none;
    }
    #mainnav ul li {
        display: block;
    }

    #mainnav ul li a {
        display: block;
    }
    .rlogo{
      display: block;
      width: 40%;
    }
    ul.ruby-menu > li > a {
      line-height: 45px;
  }
  .ruby-menu-mega-blog-nav{
    display: none;
  }
}
@media (min-width: 320px) and (max-width: 480px){

.css-order-item{
  display: flex;
  flex-direction: column-reverse;
}
.office-chair1{
  padding-left: 5px;
 
}
}
@media (min-width: 481px) and (max-width: 767px){

.css-order-item{
  display: flex;
  flex-direction: column-reverse;
}
.office-chair1{
  padding-left: 5px;
 
}
}
@media (min-width: 768px) and (max-width: 1024px){

.css-order-item{
  display: flex;
  flex-direction: column-reverse;
}
.office-chair1{
  padding-left: 5px;
 
}
}
@media (min-width: 1025px) and (max-width: 1280px){

.css-order-item{
  display: flex;
  flex-direction: column-reverse;
}
.office-chair1{
  padding-left: 5px;
 
}
}