@media screen and (min-width: 1201px){
   .container {
      max-width: 1300px;
   }

   .col {
      min-width: 550px;
   }
}


/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1200px) {



}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
   
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (min-width: 576px) and (max-width: 767px) {	

   .p2header-wrapper h3 {
      font-size: 28px;
   }

   .p2code-wrapper-one {
      width: 40%;
   }

   .p2code-wrapper-two {
      width: 55%;
   }

   label {
      font-size: 16px!important;
   }

   .input-with-plus-minus{
      width: 50%;
   }


}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 576px) {

   .p1logo-wrapper a img {
      width: 250px;
   }

   .p2header-wrapper h3 {
      font-size: 28px;
   }

   .p2code-wrapper-one {
      width: 40%;
   }

   .p2code-wrapper-two {
      width: 55%;
   }

   label {
      font-size: 16px!important;
   }

   .p3mode-input input {
      width: 220px;
   }

   .slider > span.slider-container > span.bar-btn {
      min-width: 45px;
   }

   .slider > span.slider-container > span.bar-btn > span::before {
      left: -14px;
   }

   .slider > span.slider-container > span.bar-btn > span::after {
      right: -14px;
   }

   .input-with-plus-minus{
      width: 70%;
   }

   .setting-element .input-with-plus-minus {
      margin: 0px 8px;
  }
   



























}