@media(max-width:1200px) {
 .content_1440 {padding: 0 20px !important} 
}

@media (min-width: 1200px) and (max-width: 1439px){  
  .header { padding-bottom:50px !important }
 .home .heroTextHome h1 {font-size: 45px;line-height: 58px;padding-bottom: 40px !important}
 .home #canvas-width {width: 400px !important;height: 400px !important;}
 .home .heroTextHome h4 {font-size: 23px !important}
 .home .heroTextHome h6 {padding-top: 50px}
}

@media all and (min-width: 0px) and (max-width: 1200px){ 
.home .heroTextHome h6 {padding-bottom: 40px !important;}
 
}

@media all and (min-width: 820px) and (max-width: 1180px) and (orientation:landscape){
   .header { padding-bottom:40px !important }
 .home .heroTextHome h1 {font-size: 40px;line-height: 50px;padding-bottom: 40px !important}
 .home #canvas-width {width: 400px !important;height: 400px !important;}
 .home .heroTextHome h4 {font-size: 23px !important}
 .home .heroTextHome h6 {padding-top: 40px !important}
}

@media all and (min-width: 768px) and (max-width: 1024px) and (orientation:landscape){
  .header { padding-bottom:40px !important }
 .home .heroTextHome h1 {font-size: 40px;line-height: 50px;padding-bottom: 40px !important}
 .home #canvas-width {width: 400px !important;height: 400px !important;}
 .home .heroTextHome h4 {font-size: 23px !important}
 .home .heroTextHome h6 {padding-top: 40px !important}
}


@media (min-width: 768px) and (max-width: 992px){ 
  .header { padding-bottom:0px !important }
  .HeroPanel-content {flex-direction: column-reverse;width: 100%}
  .home .heroTextHome {width: 100% !important;}
  .home .heroImageHome {width: 100% !important;padding-bottom: 10px}
  .home .heroTextHome h1 {width: 100%;max-width: 650px;}
  /*.home .heroTextHome h4 { font-size: 18px;padding-bottom: 15px;line-height: 30px;}
  .home .heroTextHome h4 br {display: none;}
  .home .heroTextHome h6 {font-size: 16px;padding-top: 50px !important}*/
  .home #canvas-width {width: 270px !important;height: 270px !important}

}

  @media (min-width: 768px) and (max-width: 915px){ 
   @media all and (orientation: landscape) { 
  .header .logo {max-width: 80px !important;}
   .header { padding: 0 0px 35px !important;}
    .home .heroTextHome {width: 70% !important;}
    .home .heroImageHome {width: 30% !important;padding-bottom: 10px}
    .home .heroTextHome h1 {font-size: 26px;line-height: 30px;padding-bottom: 20px !important}
    .home .heroTextHome h4 { font-size: 17px !important;line-height: 25px;padding-bottom: 15px}
    .home .heroTextHome h4 br {display: none;}
    .home .heroTextHome h6 {font-size: 16px;padding-top: 10px !important}
    .home #canvas-width{width: 130px !important;height: 130px !important}
     .HeroPanel-content {
    flex-direction: unset;
    width: 100%;
  }
   
   }
  }


@media screen and (min-width: 0px) and (max-width: 767px) {
    @media all and (orientation: landscape) {

    /*HeroPanel Start*/
    .header .logo {max-width: 80px !important;}
   .header { padding: 0 0px 20px !important;}
    .home .heroTextHome {width: 70% !important;}
    .home .heroImageHome {width: 30% !important;padding-bottom: 10px}
    .home .heroTextHome h1 {font-size: 26px;line-height: 30px;padding-bottom: 20px !important}
    .home .heroTextHome h4 { font-size: 17px;line-height: 25px;padding-bottom: 15px}
    .home .heroTextHome h4 br {display: none;}
    .home .heroTextHome h6 {font-size: 16px;padding-top: 10px !important}
    .home #canvas-width{width: 130px !important;height: 130px !important}

    }

    @media all and (orientation: portrait) {
    /*HeroPanel Start*/
     .header .logo {max-width: 80px !important;}
    .header { padding: 0 0px 20px !important;}
    .HeroPanel-content {flex-direction: column-reverse;}
    .home .heroTextHome,.home .heroImageHome {width: 100% !important;}
    .home .heroImageHome {padding-bottom: 10px}
    .home .heroTextHome h1 {font-size: 26px;line-height: 35px;padding-bottom: 20px !important}
    .home .heroTextHome h4 { font-size: 18px;line-height: 25px;padding-bottom: 20px}
    .home .heroTextHome h4 br {display: none;}
    .home .heroTextHome h6 {font-size: 16px;padding-top: 10px !important}
    .home #canvas-width{width: 130px !important;height: 130px !important}
    }
  }



  @media (min-width: 500px) and (max-width: 767px) {
  @media (orientation: portrait) {
    .home #canvas-width {
      width: 230px !important;
      height: 230px !important;
    }
  }
}
@media (min-width: 500px) and (max-width: 568px){ 
   @media all and (orientation: landscape) { 
     .header .logo {max-width: 50px !important;}
    .home .heroTextHome h1 {font-size: 22px;line-height: 28px;padding-bottom: 10px !important;}
   }
  }

  @media (min-width: 300px) and (max-width: 320px){
    .home .heroTextHome h1 {font-size: 22px;line-height: 28px;padding-bottom: 10px;}
    .home .heroTextHome h4{font-size: 16px;line-height: 25px;padding-bottom: 10px;}
    .home .heroTextHome h6 {font-size: 14px}
  }