

body, html {
  font-family: 'Kufam', sans-serif;
  height: 100%; /* needed for parallax effects */
  background-color: #cba;
}

/* 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/parallax1.jpg');
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("images/parallax2.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("images/parallax3.jpg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* 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;
  }
}

.smtpushdown{
  min-height: 12vh;
}

.smt-brown{
  background-color: #c2b3a7;
  color: #000;
}

.smt-gold{
  background-color:#BE9B5D;
  color: #000;
}

.smt-grey{
  background-color: #262626;
  color: #BE9B5D;
}

.smt-tight-menu{
  line-height: 0px;
  margin-top: 0px;
}

#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: none; /* Remove borders */
  outline: none; /* Remove outline */
  opacity: 0.5;
  background-color: #444; /* 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: #F55; /* Add a dark-grey background on hover */
}


.youtube-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   66.6%; /* This is your aspect ratio */ 
}

.youtube {
  position: absolute;
  margin: auto;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    90%;
  height:   90%
}




.scheduleinfo {
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  background-color: #E8D7C0;
  color: #F00;
  border-style: solid;
  border-color: #111;
}

.scheduletable {
  width: 100%;
  border-width: 1px 1px 1px 1px;
  border-spacing: 0px;
  border-style: solid solid solid solid;
  border-collapse: separate;
}

.scheduletable th {
  border-width: 1px 1px 1px 1px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-color: #BBB;
  background-color: #DDD;
  border-style: double double double double;
  -moz-border-radius: 6px 6px 6px 6px;
  text-align: center;
  font-family: Tahoma, Arial, Verdana;
  font-size: 10pt;
  color: #000
}

.scheduletable td {
  vertical-align: middle;
  border-width: 1px 1px 1px 1px;
  max-width: 200px;
  border-style: none dashed solid none;
  border-color: #AAA;
  background-color: #F9F9F9;  /* cell background color */
  -moz-border-radius: 3px 3px 3px 3px;
  font: normal 8pt  Tahoma, Arial, Verdana;
  text-align: center;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
