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

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

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

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

/* Garddio a Mwy */
.garddio-a-mwy .sponsor {
  background: #fff;
  color: #4f585c;
}

.pebble .lightBG.rownd-home {
  background: none;
  background-color: transparent;
}
.pebble .lightBG {
  padding-bottom: 2%;
}

ul.hide-card-title .masonryGridItemContent {
  background: none;
}

ul.hide-card-title .masonryGridItemContent > h2,
ul.hide-card-title .masonryItemInfo h2 {
  display: none;
}
.pebble.eisteddfod-yr-urdd {
  background-size: cover;
}

@media screen and (max-width: 1600px) {
  .pebble.eisteddfod-yr-urdd {
    background-size: initial;
  }
}
@media screen and (min-width: 320px) {
  .pebble.y-swn {
    background-size: 150% !important;
    background-repeat: repeat-y;
    background-position: top center !important;
  }
  .pebble.y-swn: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/1600x898_Campaign.jpg);
    background-size: 150% !important;
    background-repeat: repeat-y;
    background-position: top center !important;
  }
  .pebble.y-swn h1.largeHeading {
    margin: auto !important;
    width: 250px !important;
    height: 200px !important;
    overflow: hidden !important;
  }
  .pebble.y-swn h1.largeHeading img {
    margin: -10% 0 0 auto !important;
  }
  .pebble.y-swn .subSectionMenu {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .pebble.y-swn {
    background-size: initial !important;
  }
  .pebble.y-swn h1.largeHeading {
    margin-top: 50px !important;
    width: initial !important;
    height: initial !important;
    overflow: initial !important;
  }
  .pebble.y-swn h1.largeHeading img {
    margin: auto !important;
  }
  .pebble.y-swn .subSectionMenu {
    display: block !important;
  }
}