/* ************************************************************************
 * resize panels based on screen width (width x height - columns in row)  *
 * ********************************************************************** */
@media only screen and (min-width: 960px) {
    .show-on-mobile                                                            {  display: none !important;  }
    
    .panel-1x1-5                                                               {  width: 20%;   }
    .panel-1x1-3, .panel-1x2-3                                       {  width: 33.33%;}
    .panel-2x1-5                                                               {  width: 40%;   }
    .panel-1x1-2                                                                {  width: 50%;   }
    .panel-2x1-3, .panel-2x2-3                                       {  width: 66.66%;}    
    .section-tall .panel-1x1-3, .panel-3x1-3               {  width: 100%;  }
    .producttile:nth-child(4),
    .producttile:nth-child(9),
    .producttile-more                                                      {  border-right: 0px !important; }
    .panel, .faq-section-head                                        { padding-left: 0; }
    
    .primary-topmarg                                                         { padding-top: 55px; }
    
    /* page specific responsive sizings */
    #navigation form input[type=submit] {  background-color: #FFFFFF; opacity: .5; }
    #relevantfor span                                                        {  width: 50%;   }
     .lookuptable .chart li div.notsupported                   { background-image: none !important; }
    
    .faqtable.w2 li div:not(:first-child) {  width: 75%;  }
    .faqtable.w2 li div.title, .faqtable.w2 li div.empty   {  width: 25%;  }
    .faqtable.w2 li div:nth-child(1), .faqtable.w2 li div:nth-child(3), .faqtable.w2 li div:nth-child(5) {  border-left-width: 0px;  }        
    
    .faqtable.w3 li div:not(:first-child) {  width: 37.5%;  }
    .faqtable.w3 li div.title, .faqtable.w3 li div.empty   {  width: 25%;  }
    .faqtable.w3 li div:nth-child(1), .faqtable.w3 li div:nth-child(4), .faqtable.w3 li div:nth-child(7) {  border-left-width: 0px;  }
    
    .faqtable.w4 li div:not(:first-child) {  width: 25%;  }
    .faqtable.w4 li div.title, .faqtable.w4 li div.empty   {  width: 25%;  }
    .faqtable.w4 li div.shorter   {  width: 15%;  }
    .faqtable.w4 li div.longer   {  width: 35%;  }
    .faqtable.w4 li div:nth-child(1), .faqtable.w4 li div:nth-child(5), .faqtable.w4 li div:nth-child(9) {  border-left-width: 0px;  }
    
    .faqtable.w5 li div:not(:first-child) {  width: 18.75%;  }
    .faqtable.w5 li div.title, .faqtable.w5 li div.empty   {  width: 25%;  }
    .faqtable.w5 li div:nth-child(1), .faqtable.w5 li div:nth-child(6), .faqtable.w5 li div:nth-child(11) {  border-left-width: 0px;  }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .show-on-mobile                                                            {  display: none !important;  }

    .panel-1x1-5                                                                {  width: 25%;   }
    .panel-1x1-3, .panel-1x2-3                                        {  width: 33.33%;}
    .panel-2x1-5, .panel-1x1-2                                        {  width: 50%;   }
    .panel-2x1-3, .panel-2x2-3                                        {  width: 66.66%;}
    .section-tall .panel-1x1-3, .panel-3x1-3                {  width: 100%;  }
    
    .primary-topmarg                                                         { padding-top: 55px; }
    
    /* page specific responsive sizings */
    #navigation form input[type=text]                                {  display: none !important;  }
    #hero-search-input                                                     { width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: calc(100% - 100px); }
    #relevantfor span                                                        {  width: 50%;   }
    .lookuptable .chart li div.notsupported                     { background-image: none !important; }
    
    .faqtable.w2 li div:not(:first-child) {  width: 75%;  }
    .faqtable.w2 li div.title, .faqtable.w2 li div.empty   {  width: 25%;  }
    
    .faqtable.w3 li div:not(:first-child) {  width: 37.5%;  }
    .faqtable.w3 li div.title, .faqtable.w3 li div.empty   {  width: 25%;  }
    
    .faqtable.w4 li div:not(:first-child) {  width: 25%;  }
    .faqtable.w4 li div.title, .faqtable.w4 li div.empty   {  width: 25%;  }
    .faqtable.w4 li div.shorter   {  width: 18%;  }
    .faqtable.w4 li div.longer   {  width: 32%;  }
    
    .faqtable.w5 li div:not(:first-child) {  width: 18.75%;  }
    .faqtable.w5 li div.title, .faqtable.w5 li div.empty   {  width: 25%;  }

}

@media only screen and (min-width: 720px) and (max-width: 767px) {
    .hide-on-tablet                                                           {  display: none !important;  }
    .hide-bg-on-tablet                                                      {  background-image: none !important; }
    .panel-1x1-2-border                                                     {  border-width: 0px !important;  }
    
    .panel-1x1-5                                                                 {  width: 33.33%;}    
    .panel-1x1-3, .panel-1x1-5                                         {  width: 50%;   }
                                                                     
    .panel-2x1-3, .panel-2x2-3, .panel-1x2-3, .fill-3,
    .panel-3x1-3, .panel-2x1-5, .panel-1x1-2               {  width: 100%;  }
    
    /* page specific responsive sizings */
    #hero-search-input                                                     { width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: calc(100% - 100px); }
    #relevantfor                                                                {  display: none; }
    .compatibility h2, .compatibility p                          {  width: 100% !important;  }
    .lookuptable .chart-4wide li div:not(.title):not(.moreinfo)  {  width: 33.33% !important;  }
    .lookuptable .chart-3wide li div:not(.title):not(.moreinfo)  {  width: 50% !important;  }
    .lookupexamples li                                                        {  width: 25% !important;  }
    #hero-connecteddevices div.panel:first-child          {  width: 100% !important; }
    #hero-devicelookup2 .lookuptable .chart .header div.title:first-child { display: none; !important; }
    #hero-devicelookup2 .lookuptable .chart li div.title,
    #hero-devicelookup2 .lookuptable .chart li div.moreinfo    { width: 100%; !important; border-bottom-width: 1px;  }
    #hero-devicelookup2 .lookuptable .chart .moreinfo  { padding: 7px 10px 20px 10px !important;  }
    
    #hero-connecteddevices .lookuptable .chart .header div.title:first-child { display: none; !important; }
    #hero-connecteddevices .lookuptable .chart li div.title  { width: 100%; !important; border-bottom-width: 1px !important;  }
    #hero-connecteddevices .lookuptable .chart li div.title  { background-image: none !important; }
    #hero-connecteddevices .lookuptable .chart div.irexplanation-tip  { display: none !important; }
    
    .faq .sbs-wrapper.sbs-w3 div {  width: 100% !important;    }
    .faq .sbs-wrapper.sbs-w4 div {  display: block !important; width: 50% !important;     }
    .faq .sbs-wrapper.sbs-w3 div, .faq .sbs-wrapper.sbs-w4 div:nth-child(3) {  border: 0 !important;   }
    .faq .sbs-wrapper.sbs-w4 div:nth-child(3), .faq .sbs-wrapper.sbs-w4 div:nth-child(4) {  important; margin-top: 20px !important;  }
    
    .faqtable li div.title {
        width: 100%;
        text-align: center;
        padding: 10px 0 10px 0;
        border-top: 1px solid #808080;
        border-bottom: 1px dotted #808080;
    }
    
    .faqtable li.header div.title, .faqtable li div.empty { display: none;  }
    
    .faqtable.w2 li div:not(.title) {      width: 100%;  }
    .faqtable.w2 li div:nth-child(2), .faqtable.w2 li div:nth-child(4) {    border-left-width: 0px;  }
    
    .faqtable.w3 li div:not(.title) {      width: 50%;  }
    .faqtable.w3 li div:nth-child(2), .faqtable.w3 li div:nth-child(5) {    border-left-width: 0px;  }
    
    .faqtable.w4 li div:not(.title) {      width: 33.33%;  }
    .faqtable.w4 li div:nth-child(2), .faqtable.w4 li div:nth-child(6) {    border-left-width: 0px;  }
    
    .faqtable.w5 li div:not(.title) {      width: 25%;  }
    .faqtable.w5 li div:nth-child(2), .faqtable.w5 li div:nth-child(7) {    border-left-width: 0px;  }
}

@media only screen and (max-width: 719px) {
    .hide-on-mobile                                                           {  display: none !important;  }
    .hide-bg-on-mobile                                                      {  background-image: none !important; }
    .hide-on-tablet                                                            {  display: none !important;  }
    .hide-bg-on-tablet                                                      {  background-image: none !important; }
    
    .panel-1x1-5                                                                  {  width: 33.33%;}
    .panel-1x1-3                                                                 {  width: 50%;   }
    .panel-2x1-5                                                                 {  width: 66.66%;}
    .panel-2x1-3, .panel-2x2-3, .panel-1x2-3, .fill-3 ,
    .panel-3x1-3, .panel-1x1-2                                        {  width: 100%;  }
    
    /* page specific responsive sizings */
    #hero-search-input                                                     { width: -moz-calc(100% - 100px); width: -webkit-calc(100% - 100px); width: calc(100% - 100px); }
    #relevantfor                                                                {  display: none; }
    .compatibility h2, .compatibility p                    {  width: 100% !important;  }
    .lookuptable .chart-4wide li div:not(.title):not(.moreinfo)  {  width: 33.33% !important;  }
    .lookuptable .chart-3wide li div:not(.title):not(.moreinfo)  {  width: 50% !important;  }
    .lookupexamples li                                                        {  width: 25% !important;  }
    #hero-connecteddevices div.panel:first-child          {  width: 100% !important; }
    #hero-devicelookup2 .lookuptable .chart .header div.title:first-child { display: none; !important; }
    #hero-devicelookup2 .lookuptable .chart li div.title,
    #hero-devicelookup2 .lookuptable .chart li div.moreinfo    { width: 100%; !important; border-bottom-width: 1px;  }
    #hero-devicelookup2 .lookuptable .chart .moreinfo  { padding: 7px 10px 20px 10px !important;  }
    
    #hero-connecteddevices .lookuptable .chart .header div.title:first-child { display: none; !important; }
    #hero-connecteddevices .lookuptable .chart li div.title  { width: 100%; !important; border-bottom-width: 1px !important;  }
    #hero-connecteddevices .lookuptable .chart li div.title  { background-image: none !important; }
    #hero-connecteddevices .lookuptable .chart div.irexplanation-tip  { display: none !important; }
    
    .faq .sbs-wrapper.sbs-w2 div, .faq .sbs-wrapper.sbs-w3 div, .faq .sbs-wrapper.sbs-w4 div {  width: 100% !important; border: 0 !important; margin-top: 20px !important; display: block !important; }
    .faqtable li div.title {
        width: 100%;
        text-align: center;
        padding: 10px 0 10px 0;
        border-top: 1px solid #808080;
        border-bottom: 1px dotted #808080;
    }
    
    .faqtable li.header div.title, .faqtable li div.empty { display: none;  }
    
    .faqtable.w2 li div:not(.title) {      width: 100%;  }
    .faqtable.w2 li div:nth-child(2), .faqtable.w2 li div:nth-child(4) {    border-left-width: 0px;  }
    
    .faqtable.w3 li div:not(.title) {      width: 50%;  }
    .faqtable.w3 li div:nth-child(2), .faqtable.w3 li div:nth-child(5) {    border-left-width: 0px;  }
    
    .faqtable.w4 li div:not(.title) {      width: 33.33%;  }
    .faqtable.w4 li div:nth-child(2), .faqtable.w4 li div:nth-child(6) {    border-left-width: 0px;  }

    .faqtable.w5 li div:not(.title) {      width: 25%;  }
    .faqtable.w5 li div:nth-child(2), .faqtable.w5 li div:nth-child(7) {    border-left-width: 0px;  }
    
    .downloadpg .downloadimg { display: none !important; }
    .downloadpg p { max-width: 100% !important; }
    .downloadpg .selectsw { width: 100% !important; }
    .downloadhelp .left {width: 100% !important; }
}