/* UNIVERSAL STYLINGS */
html, body { scroll-behavior: smooth; }
/* For all pages, just to provide a minimum height to adhere to */
#rn_MainColumn {
min-height: 600px;
}
/* RESET STYLINGS */
/* The button reset stylings */
.buttonStandard, .resetButton {
background: none;
color: inherit;
border: none;
padding: 0;
margin: 0;
font: inherit;
outline: inherit;
box-sizing: border-box;
box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.4);
font-family: Arial, Helvetica, sans-serif;
}
/* Universal classes... A class that can be applied to an element to give it one specific, or one specific set of styles */
.underline { text-decoration: underline; }
.pointer { cursor: pointer; }
.centerMe { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.circle { border-radius: 50%; }
.flexRow { display: flex; flex-flow: row; }
.flexColumn { display: flex; flex-flow: column; }
.wrap { flex-wrap: wrap; }
.noWrap { flex-wrap: nowrap; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }
.alignJustify { text-align: justify; }
/* VARIABLES HERE */
:root {
/* Button width */
--button-width-small: 100px;
--button-width-medium: 155px;
--button-width-large: 210px;
/* Link font size */
--link-size-small: 12px;
--link-size-medium: 14px;
--link-size-large: 17px;
}
.marginTopStandard { margin-top: var(--margin-top-standard); }
.marginBottomStandard { margin-bottom: var(--margin-bottom-standard); }
/* The button stylings */
.buttonStandard {
display: inline-block;
padding: 5px 4px;
background: #0a3a76;
color: #fff;
border-radius: 3px;
text-align: center;
font-weight: bold;
width: var(--button-width-medium);
/* For button rows */
margin-right: 3px;
}
/* Button sizes */
.buttonStandard.small { width: var(--button-width-small); }
.buttonStandard.medium { width: var(--button-width-medium); }
.buttonStandard.large { width: var(--button-width-large); }
/* Hover and colours */
.buttonStandard:hover, .buttonStandard:active, .buttonStandard:focus,
.blubot:hover, .blubot:active, .blubot:focus { background: #0E54AA; }
.buttonStandard.red, .blubot.red { background: #780f08; }
.buttonStandard.red:hover, .buttonStandard.red:active .buttonStandard.red:focus,
.blubot.red:hover, .blubot.red:active, .blubot.red:focus { background: #99130a; }
.buttonStandard.disabled, .blubot.disabled { background: #707070; cursor: default; }
.buttonStandard.disabled:hover, .buttonStandard.disabled:active, .buttonStandard.disabled:focus,
.blubot.disabled:hover, .blubot.disabled:active, .blubot.disabled:focus { background: #707070; }
/* Standard link styling || Also Styling the guided assistant links */
.linkStandard, .rn_GuidedAssistant a, .yui-ac-bd ul li {
text-decoration: underline;
color: #0C4B97;
font-size: 15px;
font-weight: bold;
cursor: pointer;
display: inline;
}
.linkStandard.disabled {
text-decoration: none;
cursor: default;
font-weight: bold;
}
.linkStandard.small {font-size: var(--link-size-small);}
.linkStandard.medium {font-size: var(--link-size-medium);}
.linkStandard.large {font-size: var(--link-size-large);}
/* If it has the disabled class, the hover does nothing. It just recieved the style of a link standard class */
.linkStandard:not(.disabled):hover, .linkStandard:not(.disabled):active, .linkStandard:not(.disabled):focus,
.rn_GuidedAssistant a:hover, .rn_GuidedAssistant a:active, .rn_GuidedAssistant a:focus, .yui-ac-bd ul li:focus, .yui-ac-bd ul li:hover, .yui-ac-bd ul li:active, .linkStandard.active { background: #0A3A76; color: #fff; }
/* HIDDEN TEXT FOR SCREEN READER */
.hiddenTextForScreenReader {
position: absolute !important;
opacity: 0 !important;
color: transparent !important;
font-size: 0 !important;
height: 0 !important;
width: 0 !important;
}
/* Font size classes */
.textSmall { font-size: var(--h5-size); }
.textMedium { font-size: var(--h4-size); }
.textLarge { font-size: var(--h3-size); }
.textExtraLarge { font-size: var(--h2-size); }
/* Font weight classes */
.typeRegular { font-weight: 500; }
.typeBold { font-weight: 600; }
.typeExtraBold { font-weight: 800; }
/*BEGIN STYLING*/
/* The drop down "modules" (select-dropdown-hide-and-show) styling found in FAQs */
.selectDropdownLabel { display: block; margin-bottom: 4px; margin-left: 8px; }
.selectDropdown { margin-left: 8px; height: 35px; min-width: 127px; }
.selectDropDownContainer { margin-top: var(--margin-top-standard); }
.selectDropDownSection {
overflow: hidden;
display: block;
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-duration: 500ms;
transition-property: max-height;
}
.selectDropDownSection[data-active="inactive"] { display: none; max-height: 0px; /* 0PX onload */ }
.selectDropDownSection[data-active="active"] { display: block; max-height: auto; /* Attribute updated in JS */ }
/* The confirm button */
.confirmDropdownSelection { margin-left: 8px; }
/* THE MARKUP FOR ALL APPLICABLE MODE ICONS */
/* THE SHOOTING MODE ICONS || FOR THE LUMIX CATEGORY */
.shootingModeIconContainer, .recordingModeIconContainer {
max-height: 30px;
height: 30px;
width: auto;
display: inline-flex;
flex-flow: row nowrap;
border: 2.5px solid #0E54AA;
padding: 4px 0px 4px 4px;
vertical-align: top; /* This fixes the inherit vertical align middle that an inline-flex element receives */
}
.recordingModeIconContainer {
height: 27px;
padding-top: 5.5px;
padding-bottom: 5.5px;
}
/* THE SLIDE MODULE STYLING */
/* The parent container in an instance in which the FAQ uses both the applicable shooting mode and recording mode icons. Adding margin-right to the first div to increase space between applicable modes items */
/* .applicableModeParentContainer div:first-child {
margin-right: 12px;
} */
/* The icons within the shooting mode || universally applied styles */
/* Then each class is for a specific icon */
.shootingModeIcon, .recordingModeIcon {
max-height: 100%;
height: 30px;
max-width: 34px;
width: 27.60px; /* scaled down 34x37 to this value using https://scriptygoddess.com/resources/proportioncalc.htm */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
list-style-type: none;
display: block;
margin: 0 !important;
margin-right: 4px !important;
color: transparent !important;
font-size: 0 !important;
}
.recordingModeIcon {
width: 75px;
background-size: contain;
max-width: 79px;
height: 27px;
}
.shootingModeIcon.disabled, .recordingModeIcon.disabled { opacity: 0.5; }
.shootingModeIcon.activeSports {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/active-sports-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.activeSports::before { content: 'Active Sports Shooting Mode Icon'; }
.shootingModeIcon.aperturePriority {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/aperture-priority-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.aperturePriority::before { content: 'Aperture Priority Shooting Mode Icon'; }
.shootingModeIcon.beachAndSurf {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/beach-and-surf-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.beachAndSurf::before { content: 'Beach and Surf Shooting Mode Icon'; }
.shootingModeIcon.cinema {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/cinema-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.cinema::before { content: 'Cinema Shooting Mode Icon'; }
.shootingModeIcon.creativeControl {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/creative-control-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.creativeControl::before { content: 'Creative Control Shooting Mode Icon'; }
.shootingModeIcon.creativeVideo {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/motion-picture-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.creativeVideo::before { content: 'Creative Video Shooting Mode Icon'; }
.shootingModeIcon.custom {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/custom-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.custom::before { content: 'Custom Shooting Mode Icon'; }
.shootingModeIcon.custom1 {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/custom-1-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.custom1::before { content: 'Custom 1 Shooting Mode Icon'; }
.shootingModeIcon.custom2 {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/custom-2-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.custom2::before { content: 'Custom 2 Shooting Mode Icon'; }
.shootingModeIcon.custom3 {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/custom-3-shooting-mode-min.png');
} /*Text for screenreader*/
.shootingModeIcon.custom3::before { content: 'Custom 3 Shooting Mode Icon'; }
.shootingModeIcon.intelligentAuto {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/intelligent-auto-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.intelligentAuto::before { content: 'Intelligent Auto Shooting Mode Icon'; }
.shootingModeIcon.intelligentAutoPlus {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/intelligent-auto-plus-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.intelligentAutoPlus::before { content: 'Intelligent Auto Plus Shooting Mode Icon'; }
.shootingModeIcon.manual {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/manual-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.manual::before { content: 'Manual Shooting Mode Icon'; }
.shootingModeIcon.myScene {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/my-scene-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.myScene::before { content: 'My Scene Shooting Mode Icon'; }
.shootingModeIcon.normalPicture {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/normal-picture-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.normalPicture::before { content: 'Normal Picture Shooting Mode Icon'; }
.shootingModeIcon.panorama {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/panorama-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.panorama::before { content: 'Panorama Shooting Mode Icon'; }
.shootingModeIcon.portrait {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/portrait-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.portrait::before { content: 'Portrait Shooting Mode Icon'; }
.shootingModeIcon.programAe {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/program-ae-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.programAe::before { content: 'Program AE Shooting Mode Icon'; }
.shootingModeIcon.scene {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/scene-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.scene::before { content: 'Scene Shooting Mode Icon'; }
.shootingModeIcon.scenery {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/scenery-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.scenery::before { content: 'Scenery Shooting Mode Icon'; }
.shootingModeIcon.shutterPriority {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/shutter-priority-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.shutterPriority::before { content: 'Shutter Priority Shooting Mode Icon'; }
.shootingModeIcon.slowAndQuick {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/slow-and-quick-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.slowAndQuick::before { content: 'Slow and Quick Shooting Mode Icon'; }
.shootingModeIcon.snow {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/snow-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.snow::before { content: 'Snow Shooting Mode Icon'; }
.shootingModeIcon.underwater {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/underwater-shooting-mode-min.jpg');
} /*Text for screenreader*/
.shootingModeIcon.underwater::before { content: 'Underwater Shooting Mode Icon'; }
/* Recording mode icons - This are mare lengthy and not shaped like a square */
.recordingModeIcon.autoScene {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/recording-modes/auto-scene-recording-mode-min.png');
} /*Text for screenreader*/
.recordingModeIcon.autoScene::before { content: 'Auto Scene Recording Mode Icon'; }
.recordingModeIcon.video {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/recording-modes/video-recording-mode-min.png');
} /*Text for screenreader*/
.recordingModeIcon.video::before { content: 'Video Recording Mode Icon'; }
.recordingModeIcon.still {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/recording-modes/still-recording-mode-min.png');
} /*Text for screenreader*/
.recordingModeIcon.still::before { content: 'Still Recording Mode Icon'; }
.recordingModeIcon.scene {
background-image: url('https://fre-ca.faq.panasonic.com/euf/assets/images/panasonic/answer_images/Lumix/applicable-shooting-mode-icons/recording-modes/scene-recording-mode-min.png');
} /*Text for screenreader*/
.recordingModeIcon.scene::before { content: 'Scene Recording Mode Icon'; }
/* OVERWRITING STYLES */
h2 {
font-size: 1.45em; /*OVERWRITING SO PROMOTION ISN'T NEEDED YET*/
}
h3 {
font-size: 1.16em; /*OVERWRITING SO PROMOTION ISN'T NEEDED YET*/
}
/* FIXING UL/LI BULLET POINT FORMATTING SO THEY ARE INSIDE OF THE ELEMENT */
.rn_AnswerDetail ul,
.rn_AnswerDetail li,
.rn_AnswerDetail ol,
.rn_AnswerDetail dl {
list-style: disc inside;
font-size: 15px;
}
/* CATEGROY THUMBNAIL OVERWRTIING STYLES. MOBILE TEMPLATE HICCUPS */
ul.thumbnailContainer {
margin-left: 0;
padding-left: 0;
}
ul.thumbnailContainer li {
list-style: none;
margin: 0;
}
/* IF THIS IS THE AUDO & HEADPHONES THUMBNAILS, THEY RECEIVE SMALLER FONT */
.thumbnail[data-thisModel="audio & headphones"] p, .thumbnail[data-thisModel="audio & headphones us home"] p { font-size: 17px; }
.quickLinkSection { /* Removing ul weird padding from template */
padding-left: 0 !important ;
}
.quickLink li {
list-style: none;
margin: 0;
}
.quickLink .angledBackground {
top: 0;
}
.quickLinkTertiary img {
height: 80% !important;
}
.quickLinkTertiary.youtube img {
height: 60% !important; top: 20%;
}
/* OVERWRITING THE GUIDED ASSISTANCE BUTTONS AND LINK STYLING */
.rn_GuidedAssistant button {
display: inline-block;
padding: 5px 4px;
background: #0a3a76;
color: #fff;
border-radius: 3px;
text-align: center;
font-weight: bold;
/* For button rows */
margin-right: 3px;
}
/* Hover and colours and selected guided assistance button */
.rn_GuidedAssistant button:hover, .rn_GuidedAssistant button:active, .rn_GuidedAssistant button:focus, .rn_GuidedAssistant button.rn_SelectedButton { background: #0E54AA; }
/* OVERWRITING ALL OF THE TABLE STYLES TO ALL BE UNIFORM */
table {
border-collapse: collapse !important;
border: 1px solid #0a3a76 !important;
border-spacing: none !important;
}
table caption {
padding-bottom: 3px;
}
table th, table td[scope="row"] {
background: #0a3a76 !important;
color: #fff !important;
font-size: var(--h3-size);
}
/* Headings on the horizontal level */
table th:not(:last-child) {
border-right-color: #fff !important;
}
/* Headings on the vertical level */
table tr:not(:last-child) td[scope="row"], table tr:not(:last-child) th[scope="row"] { border-bottom-color: #fff !important; }
table th, table td {
border: 1px solid #0a3a76 !important;
padding: 6px 11px 6px 11px !important;
min-width: 50px;
}
/* Aligning only the contents of the body cells to bevertically aligned */
table td, table th[scope="row"] { vertical-align: middle; }
/* The empty cell for when there is a row + a column of header cells, so the top left cell is an emptied out cell. It recieves a border right and border bottom to separate the cells surrounding the top left appropriately */
.topLeftEmptyCell {
border-right-color: #fff !important;
border-bottom-color: #fff !important;
background: #0a3a76 !important;
}
/* For the occurence where you need to add only a bottom border to a heading cell element */
th.borderBottom { border-bottom-color: #fff !important; }
/* Standard indentation for items that should be farther indented (e.g, a nested ol/ul) */
.indentStandard {
margin-left: 15px;
}
.indentStandard li, .indentStandard a {
font-size: 13.5px;
}
.indentStandard .indentStandard { /*Indented below the initial indent. Can go to any level yayyy*/
margin-left: 7px;
}
.indentStandard .indentStandard li, .indentStandard .indentStandard a {
font-size: 13px;
}
/* Standard styling for a "this FAQ applies to" text || It basically receives h5 stylings. Same principle for "model(s) shown in this FAQ" elements */
/* Also always has the "This FAQ applies to model(s)" text before the content that gets input */
.modelsShownInThisFAQ, .faqAppliesToNote, .noteSmall {
font-size: var(--h5-size);
font-weight: var(--h5-weight);
padding: 0 4px;
}
/* Bring the text closer to the title */
.thisFAQApplies {
margin-top: -15px;
}
.thisFAQApplies, .thisFAQApplies ol, .thisFAQApplies ol li {
line-height: 127%;
font-size: 12px;
font-weight: var(--h5-weight);
padding: 0 4px;
}
/* The faq applies text when it gets converted into a list format */
.thisFAQApplies ol {display:inline; list-style-type: none; font-size: 12.45px;}
.thisFAQApplies ol li {display:inline; list-style-type: none; padding: 0; margin: 0; font-size: 12.45px;}
.thisFAQApplies ol li:not(:last-child)::after {content: ', ';}
/* The before text for any recurring items */
.thisFAQApplies::before { content: "This FAQ applies to model(s):"; font-size: 12.45px;}
/* The "no list" items that recieve the "this FAQ applies text," ormally, this would appear as a string so requires a space in front of it (because the thisFAQApplies li conversion adds it's own spaces) */
.thisFAQApplies.noList::before { content: "This FAQ applies to model(s): "; font-size: 12.45px;}
.modelsShownInThisFAQ::before { content: "Model(s) shown in this FAQ: "; }
.forModels::before { content: "For model(s): "; }
/* WHEN THE "OPENS IN A NEW WINDOW" TEXT SHOWS UP, THE SECTION DROPDOWNS NEED SPACE BELOW TO MAKE SURE THIS ABSOLUTE ELEMENT CAN STILL BE SEEN */
.selectDropDownSection {
padding-bottom: 24px;
}
/* Sections inside of product guides. They all receive a top border for separation between sections */
.productGuideSection:not(:last-child), .productGuideSection:not(:last-child) { padding-bottom: 15px; }
.productGuideSection:not(:first-child), .productGuideSection:not(:first-child) {
border-top: 1.5px solid #0a3a76;
padding-top: 15px;
}
/* Product guide text that gets auto-filled */
.productGuideSection .modelRegion { text-align: center; }
.productGuideSection .modelRegion::before { content: "This model was released in "; }
/* If the model WAS sold, add was */
.productGuideSection .modelRegion.northAmerica::after { content: "both Canada and the USA"; }
.productGuideSection .modelRegion.canada::after { content: "Canada"; }
.productGuideSection .modelRegion.usa::after { content: "the USA"; }
.productGuideSection .modelYear { text-align: center; }
.productGuideSection .modelYear::before { content: "This model was released in "; }
.productGuideSection .modelYear::before { content: "This model was released in "; }
.productGuideSection .viewAllFaqs::before, .productGuideSection .viewMoreFaqs::before { content: "View More ";}
.productGuideSection .viewAllFaqs::after, .productGuideSection .viewMoreFaqs::after { content: " FAQs";}
.productGuideSection li {
line-height: 1.4em;
margin: 4px 0;
}
.productGuideSection .buttonStandard {
font-size: 15px;
}
/* The container that will go at the top of FAQs for temporary notices */
.noticeContainer {
max-width: var(--site-content-width);
margin: 0 auto;
padding: 6px 13px;
background: hsla(0, 0%, 0%, 0.1);
border-radius: 20px;
border: 0.4px solid hsla(0, 0%, 0%, 0.3);
}
.noticeContainer h2 { font-size: 1.1em; text-decoration: underline; }
.noticeContainer h3 { font-size: 1.0em; }
.noticeContainer h4 { font-size: 0.9em; }
.noticeContainer p { font-size: 0.85em; }
.noticeContainer li { font-size: 0.8em; }
/* Handset guide thumbnails. This is essentially the productThumbnails but to be designed to look more fitting for the handsets */
.handsetContainer {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.handsetContainer li {
list-style-type: none;
}
/* Universal thumbnail styling */
.handsetContainer .thumbnail {
width: 180px;
height: 435px;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
text-align: center;
align-content: center;
position: relative;
margin: 2.5px;
padding-top: 5px;
background: transparent;
border: none;
}
.handsetContainer .thumbnail .imageContainer {
width: 100%;
height: 100%;
position: relative;
}
.handsetContainer .thumbnail img {
margin: 0 auto;
height: auto;
width: auto;
max-height: 90%;
max-width: 75%;
transition-property: all;
transition-duration: 200ms;
}
.handsetContainer .thumbnail p {
/* RESET STYLINGS */
margin-left: 0;
max-width: 100%;
width: 100%;
margin-top: 3px;
padding: 0;
height: auto;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: var(--h1-weight);
font-size: var(--h2-size);
color: #0C4B97;
}
/* Hovers and transitions for thumbnail elements */
.handsetContainer .thumbnail:hover p, .handsetContainer .thumbnail:active p, .handsetContainer .thumbnail:focus p, .handsetContainer .thumbnailContainer a:focus .handsetContainer .thumbnail p {
background: #0A3A76;
color: #fff;
}
.handsetContainer .thumbnail:hover img, .handsetContainer .thumbnail:active img, .handsetContainer .thumbnail:focus img, .handsetContainer .thumbnailContainer a:focus .handsetContainer .thumbnail img {
max-height: 86%;
max-width: 71%;
}
.handsetContainer .thumbnail::after {
transform: translateX(-50%);
left: 50%;
}
/* Opens in a new window text that shows up when hovering over an element */
.opensInANewWindow { position: relative; }
.opensInANewWindow::after {
content: '(Opens in a new window)';
position: absolute;
left: 60%;
top: 100%;
background: #0A3A76;
color: #fff;
font-size: 0;
width: 0;
z-index: 10; /*Keep above any other links*/
height: 0;
opacity: 0;
text-indent: 0; /* When the element is inside of an indent standard element class, it recieves inherit text indent */
}
.opensInANewWindow:hover::after, .opensInANewWindow:focus::after, .opensInANewWindow:active::after {
font-size: 12px;
width: 144px;
height: auto;
padding: 2px 4px;
opacity: 1;
}
/* ON MOBILE, THE "OPENS IN A NEW WINDOW" TEXT GETS HIDDEN. It will still be read by a screenreader, just not seen. */
/*PHONE --- TABLET 0PX to 768PX*/
@media screen and (max-width: 768px) {
.opensInANewWindow:hover::after, .opensInANewWindow:focus::after, .opensInANewWindow:active::after {
opacity: 0;
pointer-events: none;
font-size: 0px;
width: 0px;
height: 0;
padding: 0px 0px;
}
}
/* The elements that get toggled when a user clicks the relevant toggleTrigger */
.targetToggle { display: none; }
/* Inline images, text and icons */
/* CLasses specifically for only adding inline or inline block */
.inline {display: inline;}
.inlineBlock {display: inline-block;}
.inlineList {
display:inline;
list-style-type: none;
}
.inlineList li {
display:inline;
list-style-type: none;
padding: 0;
margin-right: 5px;
}
.inlineImage {
height: 23px;
width: auto;
}
.inlineCircle {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
}
/* This is the replacement of the low light focus / star focus icon. It is a circle on top of text. Straightforward idea, but messy markup kinda */
.lowLightFocusIcon {
display: inline-flex;
position: relative;
flex-flow: column nowrap;
text-align: center;
margin-top: 4px;
}
.lowLightFocusIcon .inlineCircle {
background-color: #000;
height: 15px;
width: 15px;
top: -4px;
}
.lowLightFocusIcon.low .lowLightIconText::before {
content: "Low";
font-size: var(--h5-size);
font-weight: var(--h5-weight);
}
.lowLightFocusIcon.star .lowLightIconText::before {
content: "Star";
font-size: var(--h5-size);
font-weight: var(--h5-weight);
}
/* HAVE TO OVERWRITE STYLES FOR ANSWERS LIST. IT'S A STYLE THAT KEEPS GETTING OVERWRITTEN BY THE TEMPLATE. IT'S THE PAGE COUNTER ON THE LIST PAGE. IT ISN"T LINK STANDARD COLOUR EVEN THOUGH IT WAS ATTEMPTED TO BE FIXED A FEW TIMES NOW */
.rn_Paginator a, .rn_Paginator li, .rn_Paginator .rn_NextPage {
color: #0C4B97 !important;
font-size: 12px;
font-weight: bold;
}
.rn_Paginator a:hover, .rn_Paginator a:active, .rn_Paginator a:focus,
.rn_Paginator .rn_NextPage:hover, .rn_Paginator .rn_NextPage:active, .rn_Paginator .rn_NextPage:focus
{ background: #0A3A76; color: #fff !important; }
.rn_Paginator .rn_NextPage:hover a, .rn_Paginator .rn_NextPage:active a, .rn_Paginator .rn_NextPage:focus a { background: #0A3A76; color: #fff !important; }
/* Cookie confirm stylings */
.cookieConfirmPadding {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background: #434343;
transition-duration: 500ms;
}
.cookieConfirmInner {
margin: 0 auto;
padding: 20px;
max-width: 976px;
}
.cookieConfirmInner p {
color: #fff;
margin-bottom: 12px;
font-size: 16px;
font-weight: 600;
}
.cookieConfirmInner button {
font-size: 16px;
padding: 10px;
}
/* The class applied to the elements when they are hidden */
.cookieConfirmPadding.hide {
bottom: -100%;
}
/* THE CHAT PAGE STYLINGS */
#chatStatus {
font-size: 13.5px;
}
#chatContainer {
width: 100%;
overflow: hidden;
position: relative;
height: 500px;
}
/* chat sections inside of the main container */
#chatContainer section {
width: 100%;
position: absolute;
display: block;
top: 0;
transition-duration: 500ms;
transition-property: opacity;
}
/* Sections with classes added onto them for when we want them shown or hidden */
#chatContainer section#preChat.show {left: 0%; opacity: 1;}
#chatContainer section#preChat.hide {left: -100%; opacity: 0;}
#chatContainer section#chat.show {left: 0%; opacity: 1;}
#chatContainer section#chat.hide {left: 100%; opacity: 0;}
/* Styles for elements in the sections */
#chatContainer h3 {
font-size: 16px;
}
#chatContainer p, #chatContainer label, #chatContainer select {
font-size: 13.5px;
}
#chatContainer section .buttonStandard {
font-size: 15px;
}
#chatContainer section#chat #usaEmailButton {margin-top: 12px;}
/* Styling for "independent" pages with dropdowns (https://eng-ca.faq.panasonic.com/app/support/parts-and-accessories is an example) */
.independentDropdownPage p {font-size: 14px;}
.independentDropdownPage label { font-size: 14px; margin-left: 8px; margin-bottom: 4px;}
.independentDropdownPage select { font-size: 14px; }
.independentDropdownPage .buttonStandard { font-size: 15px; }
/* Stylings for the list page */
.rn_Results {
text-align: left;
}
/* The Loading text that is animated (the dots are what is anaimated) */
.preloaderText {
position: relative;
font-weight: bold;
font-size: 2.6em;
color: #000;
display: inline-block;
}
.preloaderText .preloaderElipses {
display: block;
position: absolute;
bottom: 0;
animation-name: preloaderElipses;
-webkit-animation-name: preloaderElipses;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
.preloaderText .preloaderElipses:nth-child(1) { left: 100%; }
.preloaderText .preloaderElipses:nth-child(2) { left: calc(100% + 10px); animation-delay: 200ms; }
.preloaderText .preloaderElipses:nth-child(3) { left: calc(100% + 20px); animation-delay: 400ms; }
@keyframes preloaderElipses {
0% {bottom: 0;}
25% {bottom: 3px;}
27% {bottom: 0;}
100% {bottom: 0;}
}
/* The preload error element, goes to the bottom of the screen */
.preloadError {
font-weight: 300;
color: #950F0F;
background: #fff;
border-radius: 5px;
font-size: 1em;
padding: 10px;
display: block;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 20px;
transition-duration: 750ms;
transition-property: bottom;
}
/* Email form formatting (basically any forms on the site will have this formatting, but too afraid to apply a sitewide style so will be pushing out forms with a spceific class from here on out - Dylan_Smart*/
.formStandard { display: flex; flex-flow: column nowrap; padding: 10px 0 10px 20px; max-width: 600px; margin: 0 auto;}
.formStandard textarea {
min-height: 300px;
}
/* Styling for the operating manuals page */
.oiLookup p, .oiLookup h2, .oiLookup h3, .oiLookup p, .oiLookup a, .oiLookup label, .oiLookup input, .oiLookup .searchResultInfo, .oiLookup .categorySection, .oiLookup .searchReset {
margin-left: 17px;
}
.oiLookup .productThumbnail p, .oiLookup p a {
margin-left: 0;
}
.oiLookup .productThumbnail[data-category="shavers and grooming"] p { font-size: 1.35em }
.thumbnail.active p {
background: #0A3A76;
color: #fff;
}
.thumbnail.active img {
max-height: 86%;
max-width: 71%;
}
.oiLookup .textMedium {
font-size: 15px;
}
/* The label for the input */
.oiLookup label[for="productLookup"] {
font-size: 14px;
}
.oiLookup input {
padding: 7px 10px;
width: 250px;
font-size: 16px;
margin-right: 12px;
border: 1px solid transparent;
}
.oiLookup input.noResultsShown, .oiLookup input.noResultsShown:focus {
border-color: red;
outline: none;
}
.oiLookup button {
font-size: 16px;
}
/* The "tag" icon for indicating filter status */
.filterTag {
display: block;
background: rgb(194, 194, 194);
color: #000;
border-radius: 30px;
margin-top: 1px;
padding: 9px 10px 9px 0px;
box-sizing: border-box;
font-size: 16px;
margin-left: 12px;
display: none;
box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.4);
border: 1px solid hsla(0, 0%, 0%, 0.3);
}
.filterTag.active {display: block;}
.filterTag .filterExit {
font-size: 16px;
background: rgb(194, 194, 194);
color: #000;
border-radius: 30px;
padding: 8px 11px;
box-sizing: border-box;
height: 100%;
border: 1px solid hsla(0, 0%, 0%, 0.3);
border-left: none;
}
.filterText {
margin-left: 6px;
}
.filterExit:hover, .filterExit:active, .filterExit:focus {background: hsl(0, 0%, 86%);}
.oiLookup .searchResultInfo {
padding-top: 4px;
display: block;
}
/* The search reset button */
.searchReset {
/* Resetting the styles received from the buttonStandard stylings we don't want */
font-size: 12px;
display: none;
}
.searchReset.active {display: block;}
/* Category sections hidden onload */
.oiLookup .categorySection {display: none;}
.oiLookup .categorySection.active {display: block;}
/* The title of the sections */
.oiLookup .categorySection h2 {
font-size: 1.7em;
margin-left: 0;
padding-bottom: 5px;
padding-top: 25px;
}
/* THe elements within the category sections */
.modelItem {
font-size: 16px;
padding: 12px 0px 12px 4px;
border-bottom: 1px solid #0a3a76;
background: hsla(0, 0%, 81%, 0.2);
}
.modelItem:first-child {border-top: 1px solid #0a3a76;}
.modelEntryList {
padding-top: 5px;
font-size: 13px;
display: inline;
}
.modelEntry {
display: inline;
margin-left: 6px;
}
.modelEntry a {
margin-left: 0;
font-size: 13px;
}
/* The no results section text */
#noResultsSection p {
margin-top: 14px;
font-size: 15px;
}
/* The old operating manual section */
#oldOperatingManualLink * {
font-size: 15px;
}
#oldOperatingManualLink a {
margin-left: 0;
}
/* The elements that display when there are matching manuals available in a separate category */
.alternateCategoryTitle {
font-size: 17px !important;
margin-left: 0px !important;
}
.otherCategoriesModel .openOtherCategoryModel {
box-shadow: none;
text-shadow: none;
}
/* The secondary site search needs t's z-index pushed down for overlays like the one on the video library: https://eng-ca.faq.panasonic.com/app/support/video-library */
#secondarySiteSearch * { z-index: 0; position: inherit !important; } /* Targetting the div by the id of the element within thw secondary site search */
/* Styling for the custom page search bar that gets shoved at the bottom */
#secondarySiteSearch.customPageElement {
margin-bottom: 125px; /* Required due to the weird positioning on this search element. It was basically set halfway on the footer */
padding-left: 16px; /* To line up with the contact cards */
padding-right: 4px; /* To line up with the contact cards */
}
/* Search widget (custom/KeywordTextOnly) */
#rn_PageTitle[data-identifier="top"] .rn_SubmitButton { margin-top: 17.5px; }
#secondarySiteSearch .rn_SubmitButton { margin-top: 24.5px; }
/* The country switch population element's container. Receives margin on top to push it away from the header */
.countrySwitchLinkHere {margin-top: 12px;}
/* Youtube page styling */
/* The YT banner */
.bannerImage {
max-width: 100%;
height: auto;
}
/* Removing li default style. List bullet removed */
.youtubeCategoryThumbnailContainer {
list-style: none !important;
}
/* Updating the colour and adding in the youtube icon to the youtube page's specific thumbnails */
.youtubeCategoryThumbnail p,
.youtubeCategoryThumbnail p,
.youtubeCategoryThumbnail p { color: #780f08; font-size: 18px; } /* This class extends the "thumbnails class */
.youtubeCategoryThumbnail:active p,
.youtubeCategoryThumbnail:focus p,
.youtubeCategoryThumbnail:hover p,
.youtubeCategoryThumbnail.active p { background: #780f08; } /* This class extends the "thumbnails class */
/* Youtube Icon in the corner */
.youtubeCategoryThumbnail .youtubeIcon {
position: absolute;
top: 4px;
left: 4px;
width: auto;
height: 21px;
}
.youtubeH2 { font-size: 20px; }
/* The sections containing content, hidden onload */
/* Preloader section */
#preloaderSection {
display: none;
text-align: center;
}
/* .playlistContainer {
} */
.playlistContainer.active { display: block; }
.playlistContainer.inactive { display: none; }
/* The search / filter bar styling */
.playlistContainer label {
font-size: 14px;
margin-bottom: 3px;
margin-left: 12px;
}
.playlistContainer input {
padding: 7px 10px;
width: 250px;
font-size: 16px;
border: 1px solid transparent;
margin-left: 12px;
}
.playlistContainer input.noResultsShown, .playlistContainer input.noResultsShown:focus {
border-color: red;
outline: none;
}
.playlistContainer button {
font-size: 16px;
margin-left: 12px;
}
.playlistContainer button.playlistFilterReset { display: none; }
.playlistContainer button.playlistFilterReset.active { display: block; }
/* The video item styling */
.playlistItem {
font-size: 16px;
height: 162px;
}
.playlistItem.active { display: block; }
.playlistItem.inactive { display: none; }
.playlistItem .playlistBorder {
border-bottom: 1px solid #0a3a76;
background: hsla(0, 0%, 81%, 0.2);
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 7px 0px;
padding-left: 6px;
}
.playlistItem:first-child .playlistBorder {border-top: 1px solid #0a3a76;}
.playlistItem .youtubeVideoThumbnail {
height: 100%;
width: auto;
}
/* Thumbnail unavailable sizing */
/* Since we have a set height, the width of the thumbs never change inside this query*/
.playlistItem .youtubeVideoThumbnail.unavailable {
display: none;
}
.playlistItem .youtubeElementContent {
padding-left: 6px;
box-sizing: border-box;
height: 100%;
width: 90%;
}
.playlistItem .youtubeElementContent h3 {
cursor: default;
}
.playlistItem .youtubeElementContent .channelLink { margin-top: -10px; }
.playlistItem .youtubeElementContent a { font-size: 12px; }
/* The description */
.playlistItem .description {
max-width: 90%;
line-height: 20px;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
/* Read more text */
.readMore {font-size: 14px;}
/* The section that shows up when there isn't a result available */
.noResults {
padding-top: 20px;
padding-bottom: 20px;
}
.noResults.active {display: block;}
.noResults.inactive {display: none;}
/* Begin the youtube channel section */
#youtubeChannelsSection.active {display: block;}
#youtubeChannelsSection.inactive {display: none;}
/* The section styling for the channel icons */
#youtubeChannelsHere {
justify-content: center;
overflow-x: auto;
}
.youtubeChannelContainer {
width: 117px;
margin: 0 2.5px;
text-align: center;
border: solid 1px #999;
background: white;
box-sizing: border-box;
border-radius: 10%;
overflow: hidden;
padding: 0 10px 5px 10px;
transition-duration: 200ms;
flex-shrink: 0; /* Make sure it doesn't shrink with the flexbox and the full container scrolls sideways */
}
.youtubeChannelContainer:hover,
.youtubeChannelContainer:active,
.youtubeChannelContainer:focus {
background: hsla(213, 84%, 25%, 0.9);
}
.youtubeChannelContainer .youtubeIcon {
position: absolute;
width: auto;
height: 15px;
top: 5px;
left: 5px;
}
.youtubeChannelContainer img.channelImage {
width: 70%;
height: auto;
margin-left: 15%;
margin-top: 10px;
border-radius: 50%;
box-shadow: 3px 3px 5px hsla(0, 0%, 0%, 0.4);
transition-duration: 200ms;
}
.youtubeChannelContainer:hover img.channelImage,
.youtubeChannelContainer:focus img.channelImage,
.youtubeChannelContainer:active img.channelImage {
transform: scale(0.95);
box-shadow: 3px 3px 5px hsla(0, 0%, 100%, 0.4);
}
.youtubeChannelContainer p {
padding: 10px 0px 3px 0px;
line-height: 100%;
color: #0a3a76;
width: 100%;
font-weight: var(--h1-weight);
font-size: 13px;
transition-duration: 200ms;
}
.youtubeChannelContainer:hover p,
.youtubeChannelContainer:active p,
.youtubeChannelContainer:focus p {
color: #fff;
}
/* The "Video Popup Container" */
#videoPlayerMaster {
position: fixed;
top: 100%; /* Initial top value to be off screen */
left: 0;
height: 100vh;
width: 100vw;
transition-duration: 400ms;
}
#videoPlayerMaster.active {
top: 0;
}
#fullScreenBackground { /*The background to darken the screen*/
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: hsla(0, 0%, 0%, 0.6);
}
#videoPlayer { /*Vid container*/
position: absolute;
height: auto;
max-height: 650px;
width: 60vw;
max-width: 792px;
background: #EEEEEE;
box-sizing: border-box;
padding: 8px 40px;
border-radius: 1%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
opacity: 0;
transition-duration: 400ms;
transition-delay: 400ms;
transition-property: all;
box-shadow: 4px 4px 8px hsla(0, 0%, 0%, 0.4);
align-items: center;
z-index: 10;
}
#videoPlayer.active {
opacity: 1;
}
/* Begin video player contents */
/* The exit element */
#videoPlayer .exit {
font-size: 16px;
background: rgb(194, 194, 194);
color: #000;
height: 30px;
width: 30px;
line-height: 30px;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid hsla(0, 0%, 0%, 0.3);
position: absolute;
top: -15px;
left: -15px;
}
#videoPlayer .exit:hover, #videoPlayer .exit:active, #videoPlayer .exit:focus { background: hsl(0, 0%, 86%); }
#videoPlayer h2 { font-size: 1.7em; }
/* The video and the video's "view on Youtube Link */
#videoPlayer .youtubeVideoContainer {
display: inline-block;
}
#videoPlayer iframe {
border: 1px solid #0a3a76;
width: 560px;
height: 315px;
}
#videoPlayer .description {
font-size: 17px;
padding: 4px 36px;
padding-bottom: 20px;
overflow-y: auto;
width: 85%;
overflow-x: none;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
/* Set the links in the deacription to be all the way on the left */
#videoPlayer .description .opensInANewWindow::after { left: 0; }
/* Styling for product guide sections to hide onload and be toggled to block */
.hiddenSection { display: none; }
/*PHONE UNDER 414px*/
@media screen and (max-width: 414px) {
.buttonStandard {margin-bottom: 5px;}
/* OPERATING MANUAL LOOKUP /////////////////////////////////////////////////////////////////////////////////////////////////// */
#filterButtons {
flex-wrap: wrap; /*Wrap all of the buttons*/
}
#productLookup {
width: 155px; /* Made it smaller to allow the search button to be right beside it, going all the way down to 320px (the smallest screen width (iPhone SE) */
padding-bottom: 4px; padding-top: 4px;
}
#productLookup, #productLookupButton, .filterTag, .searchReset {
margin-bottom: 6px; /* Will push down anything below it, whether that be a wrapped element or not */
}
.searchReset, .filterTag {
margin-left: 17px;
}
.filterTag {
padding-top: 3px; padding-bottom: 3px; /* To make it so the filter tag matches the height of the btn */
max-height: 24px;
}
.filterExit {
padding: 2px 4px !important; /* To match the previous resizing || Had to be set as important because it wouldn't overwrite the previously set padding */
}
/* Styling for the category section */
.categorySection {
width: calc(100% - 34px); /* It already has 17px left margin, so to center it, it becomes 100% width - 34px */
}
/* VIDEO lIBRARY PAGE ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
h1.youtubePageTitle { font-size: 20px; }
.youtubeH2 { font-size: 17px; }
/* Now editing the list items */
.playlistItem { height: 100px; }
.playlistItem h3 {
font-size: 14px;
line-height: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
.playlistItem .description { display: none; }
.playlistItem p { font-size: 12px; }
.playlistItem .readMore { font-size: 16px; }
.playlistItem .youtubeElementContent .channelLink { margin-top: 0; margin-bottom: 4px; display: none; /* REMOVED ON ALANNA'S REQUEST FOR SPACING ON THE HEADING */ }
.playlistItem .youtubeElementContent .videoLink { margin-top: 4px; }
/* YT Channels */
#youtubeChannelsHere { justify-content: left; position: relative; /* Set to position relative to make the scrollbar not go though the overlay. z-index is fun */ }
/* Video player styling */
#videoPlayer { padding: 8px 13px; width: 80vw; }
/* Title / Channel Link */
#videoPlayer h2 { font-size: 16px; }
#videoPlayer h3, #videoPlayer h3 a { font-size: 13px; }
/* Iframe styling */
#videoPlayer iframe {
width: 230px;
height: 205px;
}
#videoPlayer .viewOnYoutube { font-size: 13px; }
#videoPlayer .description, #videoPlayer .description a { font-size: 12px; }
}
/* Phone ---- Tablet */
@media screen and (min-width: 415px) and (max-width: 768px) {
/* OPERATING MANUAL LOOKUP /////////////////////////////////////////////////////////////////////////////////////////////////// */
#filterButtons {
flex-wrap: wrap; /*Wrap all of the buttons*/
}
#productLookup, #productLookupButton, .filterTag, .searchReset {
margin-bottom: 6px; /* Will push down anything below it, whether that be a wrapped element or not */
}
.searchReset { padding-top: 7px; padding-bottom: 7px; }
/* VIDEO lIBRARY PAGE ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
h1.youtubePageTitle { font-size: 20px; }
.youtubeH2 { font-size: 19px; }
/* Now editing the list items */
.playlistItem { height: 110px; }
.playlistItem h3 {
font-size: 14px;
line-height: 14px;
}
.playlistItem .description { display: none; }
.playlistItem p { font-size: 12px; }
.playlistItem .readMore { font-size: 16px; }
.playlistItem .youtubeElementContent .channelLink { margin-top: 0; margin-bottom: 4px; }
.playlistItem .youtubeElementContent .videoLink { margin-top: 10px; }
/* YT Channels */
#youtubeChannelsHere { justify-content: left; }
/* Video player styling */
#videoPlayer { padding: 8px 13px; width: 80vw; }
/* Title / Channel Link */
#videoPlayer h2 { font-size: 16px; }
#videoPlayer h3, #videoPlayer h3 a { font-size: 13px; }
/* Iframe styling */
#videoPlayer iframe {
width: 400px;
height: 225px;
}
#videoPlayer .viewOnYoutube { font-size: 13px; }
#videoPlayer .description, #videoPlayer .description a { font-size: 12px; }
}
/* Tablet ---- Desktop */
@media screen and (min-width: 769px) and (max-width: 960px) {
/* VIDEO lIBRARY PAGE ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
h1.youtubePageTitle { font-size: 20px; }
.youtubeH2 { font-size: 19px; }
/* Now editing the list items */
.playlistItem { height: 143px; }
.playlistItem h3 {
font-size: 14px;
line-height: 14px;
padding-right: 10px;
}
.playlistItem .youtubeElementContent .channelLink { margin-top: 0; }
.playlistItem .description { font-size: 14px; line-height: 16px; }
/* YT Channels */
#youtubeChannelsHere { justify-content: left; }
/* Video player styling */
#videoPlayer { padding: 8px 13px; width: 80vw; }
/* Iframe styling */
#videoPlayer iframe {
width: 500px;
height: 281.25px;
}
/* Title / Channel Link */
#videoPlayer h2 { font-size: 16px; }
#videoPlayer h3, #videoPlayer h3 a { font-size: 13px; }
}