/* 
	
This is to quickly build a stylesheet for a section for the CMS	
	
---------------------------------------------------------------------*/
/* Dark/Rhino colour
@buttText: #fff;
@buttHoverText: #323b40;
@buttBg: #323b40;
@buttHoverBg: #dce1df;
@buttActiveText: #323b40;
@buttActiveBg: #dce1df;

Rhino: #323b40
Pebble: #dce1df
Teal: #008c9b
*/
/* 1. Button Colours
-----------------------------------------------------------------------------------------------
===============================================================================================*/
body.rhino.subSubSection1 li.subSubSectionLink1 a.button,
body.rhino.subSubSection1 li.subSubSectionLink1 a.buttonIcon,
body.rhino.subSubSection1 li.subSubSectionLink1 a.buttonIcon span.icon,
body.rhino.subSubSection1 li.subSubSectionLink1 a.button span.icon,
body.rhino.subSubSection1 li.subSubSectionLink1 a.button span.label,
body.rhino.subSubSection2 li.subSubSectionLink2 a.button,
body.rhino.subSubSection2 li.subSubSectionLink2 a.buttonIcon,
body.rhino.subSubSection2 li.subSubSectionLink2 a.buttonIcon span.icon,
body.rhino.subSubSection2 li.subSubSectionLink2 a.button span.icon,
body.rhino.subSubSection2 li.subSubSectionLink2 a.button span.label,
body.rhino.subSubSection3 li.subSubSectionLink3 a.button,
body.rhino.subSubSection3 li.subSubSectionLink3 a.buttonIcon,
body.rhino.subSubSection3 li.subSubSectionLink3 a.buttonIcon span.icon,
body.rhino.subSubSection3 li.subSubSectionLink3 a.button span.icon,
body.rhino.subSubSection3 li.subSubSectionLink3 a.button span.label,
body.rhino.subSubSection4 li.subSubSectionLink4 a.button,
body.rhino.subSubSection4 li.subSubSectionLink4 a.buttonIcon,
body.rhino.subSubSection4 li.subSubSectionLink4 a.buttonIcon span.icon,
body.rhino.subSubSection4 li.subSubSectionLink4 a.button span.icon,
body.rhino.subSubSection4 li.subSubSectionLink4 a.button span.label,
body.rhino.subSubSection5 li.subSubSectionLink5 a.button,
body.rhino.subSubSection5 li.subSubSectionLink5 a.buttonIcon,
body.rhino.subSubSection5 li.subSubSectionLink5 a.buttonIcon span.icon,
body.rhino.subSubSection5 li.subSubSectionLink5 a.button span.icon,
body.rhino.subSubSection5 li.subSubSectionLink5 a.button span.label,
body.rhino.subSubSection6 li.subSubSectionLink6 a.button,
body.rhino.subSubSection6 li.subSubSectionLink6 a.buttonIcon,
body.rhino.subSubSection6 li.subSubSectionLink6 a.buttonIcon span.icon,
body.rhino.subSubSection6 li.subSubSectionLink6 a.button span.icon,
body.rhino.subSubSection6 li.subSubSectionLink6 a.button span.label,
body.rhino.subSubSection7 li.subSubSectionLink7 a.button,
body.rhino.subSubSection7 li.subSubSectionLink7 a.buttonIcon,
body.rhino.subSubSection7 li.subSubSectionLink7 a.buttonIcon span.icon,
body.rhino.subSubSection7 li.subSubSectionLink7 a.button span.icon,
body.rhino.subSubSection7 li.subSubSectionLink7 a.button span.label,
body.rhino.subSubSection8 li.subSubSectionLink8 a.button,
body.rhino.subSubSection8 li.subSubSectionLink8 a.buttonIcon,
body.rhino.subSubSection8 li.subSubSectionLink8 a.buttonIcon span.icon,
body.rhino.subSubSection8 li.subSubSectionLink8 a.button span.icon,
body.rhino.subSubSection8 li.subSubSectionLink8 a.button span.label,
body.rhino.subSubSection9 li.subSubSectionLink9 a.button,
body.rhino.subSubSection9 li.subSubSectionLink9 a.buttonIcon,
body.rhino.subSubSection9 li.subSubSectionLink9 a.buttonIcon span.icon,
body.rhino.subSubSection9 li.subSubSectionLink9 a.button span.icon,
body.rhino.subSubSection9 li.subSubSectionLink9 a.button span.label,
body.rhino.subSSubection10 li.subSubSectionLink10 a.button,
body.rhino.subSubSection10
  li.subSubSectionLink10
  a.buttonIcon
  body.rhino.subSubSection10
  li.subSubSectionLink10
  a.buttonIcon
  span.icon,
body.rhino.subSubSection10 li.subSubSectionLink10 a.button span.icon,
body.rhino.subSubSection10 li.subSubSectionLink10 a.button span.label {
  color: #323b40;
}
.rhino.greenUI a.button,
.rhino.greenUI a.buttonIcon,
.rhino .buttonIconInner,
.rhino .buttonInner,
.rhino .buttonIconInner,
.rhino .buttonInner {
  /*color: @buttText;*/
}
.rhino .s4cContent div.masonryItemInfo a,
.rhino .s4cContent div.masonryItemInfo a span.icon {
  color: #323b40;
}
.rhino .s4cContent div.masonryItemInfo a:hover,
.rhino .s4cContent div.masonryItemInfo a span.icon:hover {
  color: #fff;
}
.rhino .s4cContent a.button,
.rhino .s4cContent a.buttonIcon {
  background: #323b40;
  color: #fff;
}
.rhino .s4cContent a.button span.skew,
.rhino .s4cContent a.buttonIcon span.skew {
  background: #dce1df;
  color: #323b40;
}
.rhino .buttonIconInner:hover,
.rhino .buttonInner:hover {
  color: #323b40;
}
.rhino.greenUI a.button:hover span.icon,
.rhino.greenUI a.buttonIcon:hover span.icon {
  color: #323b40;
}
.rhino a.button span.icon,
.rhino a.buttonIcon span.icon {
  color: #fff;
}
.rhino .lightBG a,
.rhino .darkBG a {
  color: #118e9b;
  box-shadow: inset 0 -1px 0 0 #25e9fd;
}
.rhino .lightBG a:hover,
.rhino .darkBG a:hover {
  color: #dce1df;
  box-shadow: inset 0 -4px 0 0 #25e9fd;
}
.rhino .actions a.button,
.rhino .actions a.buttonIcon {
  background: #323b40;
  color: #fff;
}
.rhino .s4cContent a.button,
.rhino .s4cContent a.buttonIcon {
  background: #323b40;
  color: #fff;
}
.rhino .s4cContent a.button span.skew,
.rhino .s4cContent a.buttonIcon span.skew {
  background: #dce1df;
  color: #323b40;
}
.rhino .buttonIconInner:hover,
.buttonInner:hover {
  color: #323b40;
}
.rhino.greenUI a.button:hover span.icon,
.rhino.greenUI a.buttonIcon:hover span.icon {
  color: #323b40;
}
.rhino strong {
  font-weight: bold;
}
.rhino a.button span.icon,
.rhino a.buttonIcon span.icon {
  color: #fff;
}
.rhino.greenUI a.carouselControl {
  background: #323b40;
}
.rhino.s4cSection2 ul.feedLinks span.icon {
  color: #323b40;
}
.rhino.s4cSection2 .masonryGridItem a:hover {
  color: #323b40;
}
.rhino.s4cSection2 ul.feedLinks a:hover span.icon,
.rhino.s4cSection2 ul.feedLinks a:focus span.icon {
  color: #323b40;
}
ul.feedLinks a:hover,
ul.feedLinks a:focus {
  -webkit-box-shadow: inset -30px 0 0 0 #323b40;
  -moz-box-shadow: inset -30px 0 0 0 #323b40;
}
/* Custom Styles */
.rhino.darkBG .carouselControls a.carouselControl,
.rhino.lightBG .carouselControls a.carouselControl {
  color: #fff;
}
.rhino.greenUI a.carouselControl:hover {
  background: #dce1df;
}
.rhino hr {
  background: #323b40;
}
.rhino .s4cContent div.masonryItemInfo h2 a,
.rhino .s4cContent div.masonryItemInfo h2 a:hover {
  color: #33312d;
}
.rhino strong {
  font-weight: bold;
}
.rhino .hero {
  margin-bottom: 0;
  border-top: 1px solid #fff;
}
.rhino .explore-main .masonryGridItemContent {
  background: none;
  color: #fff;
}
.music-4.rhino .subSectionMenu,
.cerddoriaeth-4.rhino .subSectionMenu,
.drama-2.rhino .subSectionMenu,
.drama-3.rhino .subSectionMenu,
.ffeithiol-2.rhino .subSectionMenu,
.factual-2.rhino .subSectionMenu,
.adloniant-3.rhino .subSectionMenu,
.entertainment-3.rhino .subSectionMenu {
  padding-bottom: 5%;
}
.rhino .explore-main .masonryItemInfo,
.rhino .explore-main .masonryItemInfo p {
  font-size: 1.9rem;
}
body.subSection.pori-10.rhino .sectionHeading,
body.subSection.explore-10.rhino .sectionHeading {
  padding: 2% 20px 0;
}
.pori-10.rhino h1.largeHeading,
.explore-10.rhino h1.largeHeading {
  padding: 4% 0 0;
}
.rhino .sponsor {
  padding: 5.5% 0;
}
.rhino div.masonryItemInfo ul li {
  list-style: outside none disc;
  list-style-type: disc;
  display: list-item;
  margin: 0 0 0.5em 1em;
}
.rhino #contact-form {
  padding: 25px 0 20px;
}
.rhino #contact-form div {
  margin-bottom: 25px;
}
.rhino #contact-form label span {
  cursor: pointer;
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.4rem;
  margin: 5px 0;
}
.rhino #contact-form input[type='text'],
.rhino #contact-form input[type='email'],
.rhino #contact-form input[type='tel'],
.rhino #contact-form input[type='url'],
.rhino #contact-form textarea,
.rhino #contact-form select {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ddd inset, 0 1px 0 #fff;
  margin: 0 0 5px;
  padding: 10px;
  width: 100%;
}
.rhino #contact-form select {
  height: 50px;
}
.rhino #contact-form input[type='text']:hover,
.rhino #contact-form input[type='email']:hover,
.rhino #contact-form input[type='tel']:hover,
.rhino #contact-form input[type='url']:hover,
.rhino #contact-form textarea:hover,
.rhino #contact-form select:hover {
  border: 1px solid #aaa;
  transition: border-color 0.3s ease-in-out 0s;
}
.rhino.eisteddfod-genedlaethol {
  background-size: cover;
}

.rhino.eisteddfod-genedlaethol:after {
  content: '';
  position: fixed; /* stretch a fixed position to the whole screen */
  top: 0;
  height: 100vh; /* fix for mobile browser address bar appearing disappearing */
  left: 0;
  right: 0;
  z-index: -1; /* needed to keep in the background */
  background: url(https://dlo6cycw1kmbs.cloudfront.net/media/media_assets/Eist_Gen_Clean_7-2024.png)
    center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@viewport {
  width: device-width;
  zoom: 1;
}

.rhino.eistedddod-genedlaethol {
  background-size: cover;
}

.eisteddfod-genedlaethol .largeHeading {
  bottom: 150px !important;
  position: relative !important;
  padding: 0px 200px !important;
}

.rhino.bwyd-epic-chris .subSectionMenu,
.rhino.rhino.bwyd-epic-chris .subSubSectionMenu {
  display: none;
}

.rhino.bwyd-epic-chris div.subSubSection div.sectionHeading h1.largeHeading {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  .rhino.bwyd-epic-chris div.contentBlock {
    /* padding: 0; */
  }
  .rhino.bwyd-epic-chris div.subSubSection div.sectionHeading h1.largeHeading {
    width: 50%;
    margin: auto;
  }
}

@supports (-webkit-touch-callout: none) {
  .rhino.bwyd-epic-chris {
    background-size: contain;
    background-position: top;
  }

  .rhino.bwyd-epic-chris div.contentBlock {
    padding: 0;
  }

  .rhino.bwyd-epic-chris div.subSubSection div.sectionHeading h1.largeHeading {
    margin: 0 auto;
    padding: 0;
    width: 80%;
  }

  .rhino.bwyd-epic-chris div.contentBlock {
    padding: 0;
  }
}

@media screen and (max-width: 1600px) {
  .rhino.eisteddfod-genedlaethol {
    background-size: initial;
  }
}
.rhino #contact-form input[type='checkbox'] {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ddd inset, 0 1px 0 #fff;
  margin: 0 0 5px;
  padding: 10px;
}
.rhino #contact-form input[type='checkbox']:hover {
  border: 1px solid #aaa;
  transition: border-color 0.3s ease-in-out 0s;
}
.rhino #contact-form textarea {
  height: 100px;
  max-width: 100%;
}
.rhino #contact-form select {
  height: 50px;
  max-width: 100%;
}
.rhino #contact-form button[type='submit'] {
  background: #323b40;
  border: medium none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 0 0 5px;
  max-width: 250px;
  padding: 10px;
  text-align: center;
  width: 100%;
}
.rhino #contact-form button[type='submit']:hover {
  background: none repeat scroll 0 0 #dce1df;
  transition: background-color 0.3s ease-in-out 0s;
}
.rhino #contact-form button[type='submit']:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.rhino #contact-form input:focus,
.rhino #contact-form textarea:focus {
  border: 1px solid #999;
  outline: 0 none;
}
.rhino #name_trp {
  display: none;
}

.rhino li ul,
.rhino li ol {
  font-size: 0.9rem;
}

.rhino .heroText {
  font-size: 1.4rem;
}

.rhino .fullWidthVideo {
  margin-bottom: 10%;
}

.rhino .fullWidthVideo .holder {
  border: solid #323b40 1px;
}

.rhino .textBlock ul li {
  list-style-position: inside;
}

.rhino .s4cContent div.masonryItemInfo a:hover,
.rhino .s4cContent div.masonryItemInfo a span.icon:hover {
  color: #0f818d;
}

.rhino ul.cardgrid-min-height .masonryGridItemContent {
  min-height: 180px;
}
.rhino li.card-min-height .masonryGridItemContent {
  min-height: 195px;
  margin-bottom: 12px;
}
.rhino div.pageSubSubTitle > h2 {
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .rhino div.pageSubSubTitle > h2 {
    font-size: 1.9rem;
  }
}

@media screen and (max-width: 1000px) {
  .eisteddfod-genedlaethol .largeHeading {
    bottom: 0px !important;
    position: static !important;
    padding: 0px 20px !important;
  }

  .rhino div.pageSubSubTitle > h2 {
    font-size: 1.9rem;
  }
}

.rhino div.pageSubSubTitle > h3 {
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .rhino div.pageSubSubTitle > h3 {
    font-size: 1.3rem;
  }
}

/*# sourceMappingURL=style-rhino.css.map */

/* Slideshow container */
.eisteddfod-genedlaethol .slideshow-container {
  left: 0 !important;
  max-width: 1280px;
  width: 95%;
  position: relative !important;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .eisteddfod-genedlaethol .slideshow-container {
    width: 45%;
  }
}

/* Hide the images by default */
.eisteddfod-genedlaethol .mySlides,
.eisteddfod-genedlaethol .mySlidesCyw {
  display: none;
}

.eisteddfod-genedlaethol .mySlides img {
  width: 100% !important;
}

/* Next & previous buttons */
.eisteddfod-genedlaethol .prev,
.eisteddfod-genedlaethol .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white !important;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  box-shadow: none !important;
}

/* Position the "next button" to the right */
.eisteddfod-genedlaethol .next {
  right: 0 !important;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.eisteddfod-genedlaethol .prev:hover,
.eisteddfod-genedlaethol .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.eisteddfod-genedlaethol .text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.eisteddfod-genedlaethol .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.eisteddfod-genedlaethol .dots,
.eisteddfod-genedlaethol .dotsCyw {
  display: none !important;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.eisteddfod-genedlaethol .active,
.eisteddfod-genedlaethol .dots:hover,
.eisteddfod-genedlaethol .dotsCyw:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.cn-i-gymru,
.can-i-gymru,
.audience-registration-2025,
.cofrestru-cynulleidfa-2025,
.voting-terms-and-conditions-2025,
.telerau-ac-amodau-pleidleisio-2025,
.how-to-vote,
.sut-i-bleidleisio {
  background-size: cover;
  background-color: white !important;
}
@media screen and (max-width: 1600px) {
  .cn-i-gymru,
  .can-i-gymru,
  .audience-registration-2025,
  .cofrestru-cynulleidfa-2025,
  .voting-terms-and-conditions-2025,
  .telerau-ac-amodau-pleidleisio-2025,
  .how-to-vote,
  .sut-i-bleidleisio {
    background-size: initial;
  }
}
.cn-i-gymru,
.can-i-gymru,
.audience-registration-2025,
.cofrestru-cynulleidfa-2025,
.voting-terms-and-conditions-2025,
.telerau-ac-amodau-pleidleisio-2025,
.how-to-vote,
.sut-i-bleidleisio {
  background-size: cover;
}
@media screen and (max-width: 1600px) {
  .cn-i-gymru,
  .can-i-gymru,
  .audience-registration-2025,
  .cofrestru-cynulleidfa-2025,
  .voting-terms-and-conditions-2025,
  .telerau-ac-amodau-pleidleisio-2025,
  .how-to-vote,
  .sut-i-bleidleisio {
    background-size: initial;
  }
}
@media screen and (max-width: 320px) {
  .cn-i-gymru,
  .can-i-gymru,
  .audience-registration-2025,
  .cofrestru-cynulleidfa-2025,
  .voting-terms-and-conditions-2025,
  .telerau-ac-amodau-pleidleisio-2025,
  .how-to-vote,
  .sut-i-bleidleisio {
    background-size: initial;
  }
}
@viewport {
  width: device-width;
  zoom: 1;
}

body.rhino.test-form:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('https://www.s4c.cymru/media/media_assets/CanIGymru-Banner-Logo-copy-dimlogo-web.jpg')
    no-repeat center center / cover;
  z-index: -1;
}

@supports (-webkit-touch-callout: none) {
  body.rhino.test-form {
    background-attachment: scroll;
  }
}