body,p {font-family: "Montserrat", sans-serif; font-size: 100%;}
h1,h2,h3,h4,h5,h6 {font-family: "Bebas Neue", sans-serif; }

body, html {
  height: 100%; /* needed for parallax effects */
}

.w3-bar-item{
  font-family: "Bebas Neue";
  font-size: 22px;
}

.blondied-yellow{
  color: #f5e505;
  background-color: #000;
}

.blondied-title{
  font-size: 42px;
}

.yellow-line{
  border: none;
  border-top: solid;
  border-width: 2px;
  border-color: #f5e505;
}

.blondied-border{
  border: solid;
  border-width: 2px;
  border-color: #f5e505;
}

.blondied-black-on-yellow{
  color: #000;
  background-color: #f5e505;
}

.blondied-red{
  color: white;
  background-color: #A00;
}

.push-down{ /*nudge DIV down below the Navbar*/
  padding-top: 50px;
}

.align-centre{
  margin: 0 auto;
  text-align: center;
}

/* INTRO PAGE text over lay for intro page video */
.textoverlay {
  position: absolute;
  top: 5%;
  width: 100%;
  padding: 20px;
}

@keyframes fadeinandout {
  0%   { opacity:0; }
  10%  { opacity:0; }
  20%  { opacity:1; }
  60% { opacity: 1; }
  100% { opacity:0; }
}
@-o-keyframes fadeinandout{
  0%   { opacity:0; }
  10%  { opacity:0; }
  20%  { opacity:1; }
  60% { opacity: 1; }
  100% { opacity:0; }
}
@-moz-keyframes fadeinandout{
  0%   { opacity:0; }
  10%  { opacity:0; }
  20%  { opacity:1; }
  60% { opacity: 1; }
  100% { opacity:0; }
}
@-webkit-keyframes fadeinandout{
  0%   { opacity:0; }
  10%  { opacity:0; }
  20%  { opacity:1; }
  60% { opacity: 1; }
  100% { opacity:0; }
}
.fadeinandout { /* video length is 20s */
   -webkit-animation: fadei2andout 10s infinite;
   -moz-animation: fadeinandout 10s infinite;
   -o-animation: fadeinandout 10s infinite;
    animation: fadeinandout 10s infinite;
}

/* NEWS PAGE loading image styling */
.loadingBG {
  float: center;
  min-width: 300px;
  min-height: 600px;
  padding: 10px;
  background: url(images/loading.gif) top center no-repeat;
  background-position: center;
}


/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('images/blondied-angled-text-logo.png');
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("images/blondied-angled-text-logo.png");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("images/blondied-angled-text-logo.png");
  min-height: 500px;
}


.w3-hover-opacity {cursor: pointer;}

.wideButton{width: 90%;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}


.youtube-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.yt-connecting{
    background-color: hotpink;
    color:#FFF;
    text-align: center;
    padding: 20px;
    font-size:20px;
    font-weight:900;
    margin-top: 10%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#scrollToTopButton {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 3%; /* Place the button at the bottom of the page */
  right: 3%; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 3px; /* Remove borders */
  border-style: solid;
  border-color: white;
  outline: none; /* Remove outline */
  opacity: 0.5;
  background-color: #888; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#scrollToTopButton:hover {
  background-color: #f5e505; /* Add a dark-grey background on hover */
}

.messagedirt{
  display: none;
  background-color: #F44;
  color: #000;
  font-size: 80%;
  font-weight: bold;
}