@font-face {
  font-family: 'Questrial';
  src: url("/content/dam/Panasonic/Global/en/consumer/audio-learn/Questrial-Regular-webfont.eot");
  src: url("/content/dam/Panasonic/Global/en/consumer/audio-learn/Questrial-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("/content/dam/Panasonic/Global/en/consumer/audio-learn/Questrial-Regular-webfont.woff") format("woff"), url("/content/dam/Panasonic/Global/en/consumer/audio-learn/Questrial-Regular-webfont.ttf") format("truetype");
  /*font-weight: normal;*/
  font-style: normal;
  unicode-range: U+0000-017F,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303,U+0309,U+030F,U+0323,U+0384-03CE,U+0400-0513,U+1EA0-1EF9,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2039-203A,U+20AB-20AC;
}

/* === Reset === */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  color: #000;
  font-family: "Questrial", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

body.scroll-lock {
  overflow: hidden;
}

input[type="text"],
input[type="search"],
input[type="submit"],
textarea {
  font-family: "Questrial", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #222;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  width: auto;
  height: auto;
}

ul, ol {
  list-style: none;
}

a {
  color: #007797;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 601px), print {
  html {
    font-size: 16px;
  }
  .md-hid {
    display: none;
  }
}

@media only screen and (min-width: 1280px) {
  html {
    font-size: 26px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  html {
    font-size: 22px;
  }
}

@media only screen and (min-width: 840px) and (max-width: 1023px) {
  html {
    font-size: 18px;
  }
}

@media only screen and (max-width: 600px) {
  html {
    font-size: 16px;
  }
  .xs-hid {
    display: none;
  }
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  /*overflow: hidden;*/
}

#colorbox {
  overflow: visible !important;
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.visual-box #cboxLoadedContent {
  overflow: visible !important;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

#colorbox {
  outline: 0;
}

#cboxContent {
  margin-top: 42px;
  overflow: visible;
  background: none;
  padding: 12px;
}

.cboxIframe {
  background: #fff;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadedContent {
  background: none;
}

#cboxLoadingGraphic {
  background: url(/content/dam/Panasonic/Global/en/consumer/4kworld/common/libs/images/loading.gif) no-repeat center center;
}

#cboxLoadingOverlay {
  background: none;
}

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #000;
}

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -20px;
  right: 12px;
  background: url(/content/dam/Panasonic/Global/en/consumer/4kworld/common/libs/images/controls.png) no-repeat 0 0;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

#cboxPrevious {
  background-image: url(/content/dam/Panasonic/Global/en/consumer/4kworld/top/images/icon-modal-arrow.svg);
  background-size: contain;
  background-position: center;
  left: 12px;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#cboxNext {
  background-image: url(/content/dam/Panasonic/Global/en/consumer/4kworld/top/images/icon-modal-arrow.svg);
  background-size: contain;
  background-position: center;
  left: 42px;
}

#cboxClose {
  background-image: url(/content/dam/Panasonic/Global/en/consumer/4kworld/top/images/icon-close.svg);
  background-size: contain;
  top: -20px;
  right: 12px;
}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover {
  opacity: 0.7;
}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px;
}

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px;
}

@media only screen and (max-width: 600px) {
  #cboxContent {
    margin-top: 27px;
  }
  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
    width: 15px;
    height: 15px;
    position: absolute;
    top: -15px;
    right: 12px;
  }
}

/******************** page ********************/
#page {
  /*max-width:1680px;*/
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@media print {
  #page {
    width: 840px;
  }
}

@media only screen and (max-width: 600px) {
  html {
    min-width: 320px;
  }
}

/******************** grid ********************/
.container {
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container > .row:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}

.container > .row > [class*="col-"] {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

@media screen and (min-width: 601px), print {
  .container > .row {
    margin-left: -1px;
    margin-right: -1px;
  }
  .container > .row > [class*="col-md-"] {
    padding-left: 1px;
    padding-right: 1px;
  }
  .container > .row > [class*="col-md"] {
    float: left;
  }
  .container.md-table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .container.md-table > .row {
    display: table-row;
  }
  .container.md-table > .row,
  .container > .row.no-margin {
    margin-left: 0;
    margin-right: 0;
  }
  .container.md-table > .row > [class*="col-md-"],
  .container > .row.no-margin > [class*="col-md-"] {
    padding-left: 0;
    padding-right: 0;
  }
  .container.md-table > .row > [class*="col-md-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
  .container > .row > .col-md-1 {
    width: 8.3333333%;
  }
  .container > .row > .col-md-2 {
    width: 16.6666666%;
  }
  .container > .row > .col-md-3 {
    width: 25%;
  }
  .container > .row > .col-md-4 {
    width: 33.3333333%;
  }
  .container > .row > .col-md-5 {
    width: 41.6666666%;
  }
  .container > .row > .col-md-6 {
    width: 50%;
  }
  .container > .row > .col-md-7 {
    width: 58.3333333%;
  }
  .container > .row > .col-md-8 {
    width: 66.6666666%;
  }
  .container > .row > .col-md-9 {
    width: 75%;
  }
  .container > .row > .col-md-10 {
    width: 83.3333333%;
  }
  .container > .row > .col-md-11 {
    width: 91.6666666%;
  }
  .container > .row > .col-md-12 {
    width: 100%;
  }
}

/******************** header ********************/
@media screen and (min-width: 601px), print {
  /* header */
  #page-header {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 10;
    background-color: transparent;
  }
  #page-header #brand-logo {
    margin-left: 3.2739%;
    width: 13.095238%;
  }
  #page-header #brand-logo img {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  /* header */
  #page-header {
    position: absolute;
    z-index: 10;
    background-color: transparent;
  }
  #page-header #brand-logo {
    margin-left: 19px;
    width: 75px;
    height: 41px;
    background-size: contain;
  }
  #page-header #brand-logo a {
    display: block;
  }
}

/******************** header-utils ********************/
@media screen and (min-width: 841px), print {
  #header-utils {
    position: fixed;
    width: 100%;
    height: 0;
    top: 0;
    right: 0;
  }
  #header-utils > div {
    text-align: right;
    height: 0;
    /*max-width:1680px;*/
    margin: 0 auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  #header-utils > div > .btns {
    font-size: 0;
    padding: 10px 10px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 0;
  }
  #header-utils .lang,
  #header-utils .nav,
  #header-utils .back {
    display: inline-block;
    width: 38px;
    height: 38px;
    position: relative;
    margin-left: 2px;
    background-color: rgba(241, 241, 241, 0.7);
    vertical-align: top;
    font-size: 0;
  }
  #header-utils .icon {
    width: 100%;
    height: 100%;
  }
  #header-utils .icon .logo {
    display: none;
  }
  #header-utils .icon > a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  #header-utils .icon > a:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  #header-utils .icon > a > span {
    display: inline-block;
    vertical-align: middle;
  }
  #header-utils .lang .icon a {
    font-size: 17px;
    color: #000;
    /*cursor:default;*/
  }
  #header-utils .lang .icon a > span {
    padding-top: 2px;
  }
  #header-utils .nav .icon img {
    width: 16px;
  }
  #header-utils .back .icon span > img {
    width: 18px;
  }
  #header-utils .nav-wrapper {
    position: absolute;
    top: 0;
    right: -100%;
    height: 100vh;
    padding: 60px 50px 20px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
  }
  #header-utils .nav-wrapper .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
  }
  #header-utils .nav-wrapper .btn-close img {
    width: 100%;
  }
  #header-utils .nav-wrapper ul.hid {
    visibility: hidden;
    height: 0;
  }
  #header-utils .nav-wrapper li:not(:first-child) {
    margin-top: 0.7142em;
  }
  #header-utils .nav-wrapper li {
    font-size: 0.875rem;
  }
  #header-utils .nav-wrapper li a {
    color: #fff;
  }
  #header-utils .nav-wrapper ul > li > ul {
    margin-top: 0.7142em;
    margin-left: 0.7142em;
  }
  #header-utils .nav-wrapper ul > li > ul > li > a:before {
    content: "- ";
  }
  body.pagetop #header-utils .back {
    width: auto;
    padding: 0 10px;
  }
  body.pagetop #header-utils .back .icon a > span {
    display: none;
  }
  body.pagetop #header-utils .back .icon .logo {
    display: inline-block;
    vertical-align: middle;
    /*padding-left:8px;*/
    text-align: center;
  }
  body.pagetop #header-utils .back .icon .logo > span {
    display: none;
    margin-top: 3px;
    font-size: 15px;
    color: #000;
  }
  body.pagetop #header-utils .back .icon .logo img {
    max-height: 20px;
    height: 0.765rem;
    vertical-align: middle;
  }
}

@media only screen and (max-width: 840px) {
  #header-utils {
    position: fixed;
    width: 100%;
    height: 0;
    top: 0;
    right: 0;
  }
  #header-utils > div {
    text-align: right;
    font-size: 0;
    height: 0;
    margin: 0 auto;
    padding: 10px 10px 0 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  #header-utils .lang,
  #header-utils .nav,
  #header-utils .back {
    display: inline-block;
    width: 23px;
    height: 23px;
    position: relative;
    margin-left: 2px;
    background-color: rgba(241, 241, 241, 0.7);
    vertical-align: top;
  }
  #header-utils .icon {
    width: 100%;
    height: 100%;
  }
  #header-utils .icon .logo {
    display: none;
  }
  #header-utils .icon > a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  #header-utils .icon > a:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  #header-utils .icon > a > span {
    display: inline-block;
    vertical-align: middle;
  }
  #header-utils .lang .icon a {
    font-size: 10.5px;
    color: #000;
  }
  #header-utils .nav .icon img,
  #header-utils .back .icon span > img {
    width: 11px;
  }
  #header-utils .nav-wrapper {
    position: absolute;
    top: 0;
    right: -100%;
    height: 100vh;
    padding: 45px 20px 20px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
  }
  #header-utils .nav-wrapper.active {
    box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.4);
  }
  #header-utils .nav-wrapper .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 15px;
  }
  #header-utils .nav-wrapper ul.hid {
    visibility: hidden;
    height: 0;
  }
  #header-utils .nav-wrapper li:not(:first-child) {
    margin-top: 13px;
  }
  #header-utils .nav-wrapper li a {
    font-size: 13px;
    color: #fff;
  }
  body.pagetop #header-utils .back {
    width: auto;
    padding: 0 10px;
  }
  body.pagetop #header-utils .back .icon a > span {
    display: none;
  }
  body.pagetop #header-utils .back .icon .logo {
    display: inline-block;
    vertical-align: middle;
    /*padding-left:8px;*/
    text-align: center;
  }
  body.pagetop #header-utils .back .icon .logo > span {
    display: none;
    margin-top: 3px;
    font-size: 15px;
    color: #000;
  }
  body.pagetop #header-utils .back .icon .logo img {
    max-height: 20px;
    height: 0.765rem;
    vertical-align: middle;
  }
}

@media only screen and (max-width: 600px) {
  body.pagetop #header-utils .back {
    background-color: black;
  }
}

@media print {
  #header-utils {
    position: absolute;
    width: 840px;
  }
}

/******************** footer ********************/
#page-footer {
  text-align: center;
}

#page-footer .copyright {
  font-size: 0.6875rem;
}

#page-footer nav {
  margin-top: 10px;
}

#page-footer nav ul {
  display: inline-block;
  overflow: hidden;
}

#page-footer nav ul li {
  float: left;
  padding: 0 12px;
  border-right: 1px solid #000;
}

#page-footer nav ul li:first-child {
  border-left: 1px solid #000;
}

#page-footer nav ul li a {
  font-size: 0.6875rem;
  color: #000;
}

#page-footer .social-link {
  font-size: 0;
  margin-bottom: 24px;
}

#page-footer .social-link li {
  display: inline-block;
}

#page-footer .social-link .facebook img {
  min-height: 24px;
  height: 24px;
  height: 1.125rem;
}

#page-footer .social-link .pinterest img {
  min-height: 24px;
  height: 24px;
  height: 1.125rem;
}

#page-footer .social-link .youtube img {
  min-height: 22px;
  height: 22px;
  height: 1rem;
}

@media screen and (min-width: 601px), print {
  #page-footer {
    padding-bottom: 50px;
  }
  #page-footer .social-link li {
    padding: 0 12px;
  }
}

@media screen and (max-width: 600px) {
  #page-footer {
    padding-bottom: 50px;
  }
  #page-footer .social-link li {
    padding: 0 6px;
  }
}