html[lang='en'] *[lang='cy'],
html[lang='cy'] *[lang='en'] {
  transform: scaleY(0);
  position: absolute;
  opacity: 0;
}
html *[lang] {
  transition: transform 0.3s ease-in-out;
}
a {
  color: #bd1522;
  font-weight: normal;
}
a:hover {
  color: #343a40;
}
a:visited {
  color: #343a40;
}
a:active {
  color: #bd1522;
}

/* logo */
img.logo {
  border-width: 1px !important;
}
.logo {
  transition: all 0.3s ease-out;
}
a.logo:hover,
a.logo.hover,
a.logo:hover > img.logo,
a.logo.hover > img.logo {
  border-top-color: rgba(255, 67, 79, 0.3) !important;
}
a.logo.hover > img.logo,
a.logo:hover > img.logo {
  border-top-width: 1px !important;
}
a.logo.hover,
a.logo:hover {
  transform: rotate(5deg);
  box-shadow: 3px 10px 17px rgba(0, 0, 0, 0.8);
}
@supports not (-webkit-overflow-scrolling: touch) {
  a.logo.hover,
  a.logo:hover {
    transform: rotateX(-20deg) rotate(5deg);
  }
}
a.logo:active,
a.logo:focus {
  outline: 0;
  border: none;
}
a.border-heavy.border-danger{
    transition: border .3s ease-out;
}
a.border-heavy.soundcloud-link:hover{
    border-color: #f67415 !important
}
a.border-heavy.youtube-link:hover{
    border-color: black !important
}
#intro blockquote {
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.3;
    margin: 1em 0 2em 0;
}
#strapline blockquote {
    font-size: 1.67rem;
    font-weight: 400;
    line-height: 1.3;
}
blockquote:before {
    content: "“";
}
blockquote:after {
    content: "”";
}
blockquote:before,
blockquote:after {
    font-size: 2.2rem;
    line-height: 1rem;
    font-weight: 300;
    vertical-align: middle;
}
blockquote strong{
    font-weight: 600;
}

/* branding colours */
.bg-danger {
  fill: #bd1522;
  background-color: #bd1522 !important;
}
.border-danger {
  border-color: #bd1522 !important;
}
.text-danger {
  color: #bd1522 !important;
}
.bg-white {
  fill: #fff;
}
.bg-light {
  fill: #f8f9fa;
}
.bg-success {
  fill: #28a745;
}
.bg-dark {
  fill: #343a40;
}
.bg-warning {
  fill: #ffc107;
}
.bg-primary {
  fill: #007bff;
}
.bg-secondary {
  fill: #6c757d;
}
.bg-info {
  fill: #17a2b8;
}
.bg-transparent {
  fill: transparent;
}
.bg-danger-dark {
  fill: #a6121e;
  background-color: #a6121e !important;
}

/* responsive svg separator */
svg#separator * {
  all: inherit;
}
.divider {
  height: 3rem;
  stroke-width: 2px;
  stroke-linecap: square;
}

#top-divider,
#top-divider-2 {
  height: 6rem;
  stroke-width: 2px;
}
#top-divider-2 {
  /* filter: drop-shadow(0px 1rem 0.5rem rgba(0, 0, 0, 0.44)); */
}
#last-divider {
  height: 6rem;
  stroke-width: 2px;
}
.divider-container {
  position: absolute;
}
.divider-container:before {
  content: '';
  width: 100%;
  height: 20rem;
  display: block;
}
.section-title h2 {
  font-size: 2.75rem;
}
/* icons */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  vertical-align: -0.15em !important;
}
li .icon {
  margin-right: 0.4em;
}
.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

/* navbars */
#navbarHeader {
  z-index: 1021;
}
.navbar {
  z-index: 2;
}
#navbarHeader #headerText {
  transition: opacity 0.4s ease-in;
}
#navbarHeader.collapse #headerText {
  opacity: 0;
}
#navbarHeader.collapsing #headerText {
  opacity: 0.8;
}
#navbarHeader.collapse.show #headerText {
  opacity: 1;
}
#navbarHeader {
  transform-origin: top;
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#navbarHeader.collapse {
  transform: scaleY(0);
}
#navbarHeader.collapsing {
  transition: transform 0.1s linear;
  transform: scaleY(0.01);
}
#navbarHeader.collapse.show {
  transform: scaleY(1);
}
a.navbar-brand img {
  max-width: 9rem;
  filter: invert(1) grayscale(0) hue-rotate(180deg) contrast(55%) brightness(160%);
  transform: translate(-1.8rem,-2.7rem) rotate(15deg);
}

a.navbar-brand {
  height: 4.2rem;
  width: 5.6rem;
  border-radius: 0px 0.4rem 0.4rem;
  transform: scale(0.62);
  border-left: .25rem solid #343a40;
  border-right: .1rem solid black;
  transform-origin: top left;
  overflow: hidden;
  transition: opacity .4s ease-in; 
}

/* iframes */
iframe {
  border-width: 0;
}
.embed-placeholder{
    top: 0;
    height: 100%;
    width: 100%;
}
.embed-placeholder use{
    fill: black;
    color: white;
    opacity: .4;
    transition: all .3s ease-out;
    transform-origin: center;
}
a.embed-responsive.embed-responsive-21by9 img{
    position: absolute;
    top: -25%;
    left: 0;

}
a.embed-responsive.embed-responsive-21by9:hover .embed-placeholder use{
    opacity: 1;
    fill: #bd1522;
}
/* footer */
footer h2 {
  font-size: 1.5rem;
}
.text-opaque {
  opacity: 0.5;
  transition: opacity .3s ease-out;
}
#footer-logo-container {
  position: absolute;
  left: 2rem;
  margin-top: -3rem;
  height: 10rem;
  background-blend-mode: multiply;
  background-image: url(/img/cwmni-bro-ffestiniog-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
}
a.text-opaque:hover {
  opacity: 1;
}
.border-heavy {
  border-width: 5px !important;
}
.list-inline li .icon {
  margin-right: inherit;
}

.brocast_latest_title {
  position: absolute;
  z-index: 2;
  font-size: 1rem;
  color: white;
  width: 100%;
  text-align: center;
  padding: .3em;
  margin: 0;
  top: 0;
  font-weight: normal;
  text-shadow: 1px 1px 3px black;
}

/* responsive css */

@media only screen and (max-width: 426px) {
  .btn-lg2 {
    padding: 0.25rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
  .icon-lg2 {
    width: 1.5em;
    height: 1.5em;
  }
}

/* mobile first*/
@media only screen and (min-width: 321px) {
  img.logo {
    border-width: 4px !important;
  }
  a.logo.hover > img.logo,
  a.logo:hover > img.logo {
    border-top-width: 3px !important;
  }
  .divider {
    height: 2.1rem;
    stroke-width: 3px;
  }
  .d-xs-inline-block{display:inline-block!important}
}
@media only screen and (min-width: 427px) {
  img.logo {
    border-width: 3px !important;
  }
  a.logo:hover > img.logo {
    border-top-width: 2px !important;
  }
}
@media (min-width: 576px) {
  img.logo {
    border-width: 4px !important;
  }
  a.logo.hover > img.logo,
  a.logo:hover > img.logo {
    border-top-width: 3px !important;
  }
  .divider {
    height: 6.5rem;
    stroke-width: 2px;
  }
  .divider {
    height: 3rem;
    stroke-width: 2px;
  }
  footer h2 {
    font-size: 2rem;
  }
  .section-title {
    padding: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .section-title h2 {
    font-size: 2.75rem;
  }
  .section-title h2[lang='en'] {
    max-width: 1000px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .divider {
    height: 19rem;
  }
  .divider {
    height: 3.5rem;
  }
  footer h2 {
    font-size: 1.5rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  footer h2 {
    font-size: 2rem;
  }
  .divider {
    height: 22rem;
  }
  .divider {
    height: 4rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .divider {
    height: 3rem;
    stroke-width: 4px;
  }
  .section-title blockquote {
    transform: rotate(-1.72deg);
  }
}

/* XXL large devices (2k desktops, 1600px and up) */
@media (min-width: 1600px) {
    .divider {
      height: 6rem;
      stroke-width: 4px;
    }
    .section-title blockquote {
      transform: rotate(-2.8deg);
    }
}
  
/* XXXL large devices (4k desktops, 2000px and up) */
@media (min-width: 2000px) {
    .divider {
      height: 6rem;
      stroke-width: 4px;
    }
    .section-title h2 {
      transform: rotate(-1.6deg);
    }
}
