/*!
 * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
@import url('https://fonts.googleapis.com/css?family=Special+Elite');
body {
	position:relative;
	/*margin:84px 0px 0px 0px;*/
	/*padding-top: 2.5em;*/
	-webkit-text-size-adjust:none;
	min-height:95%;
	font-family: 'Antic';
	/*text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.5);*/
	/*background: (#c21703, #e8f7ff, #c21703) fixed;*/
    background-image: url("../backgrounds/bg_new1.png");
    background-position: center center;
    background-attachment: fixed;
    background-size: cover; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	-webkit-font-smoothing:antialiased;
    padding-top: env(safe-area-inset-top);
}
:root {
  --primary-900: hsl(256, 43%, 7%);
  --primary-800: hsl(240, 24%, 13%);
  --primary-700: hsl(243, 26%, 15%);
  --primary-600: hsl(252, 9%, 22%);
  --primary-500: hsl(259, 13%, 28%);
  --primary-400: hsl(254, 22%, 32%);

  --primary-300: hsl(251, 13%, 68%);
  --primary-200: hsl(240, 15%, 76%);
  --primary-100: hsl(240, 21%, 88%);

  --neutral-100: hsl(0, 0%, 100%);

  --accent-400: hsl(93, 60%, 69%);

  --text-1: var(--neutral-100);
  --text-2: var(--primary-100);
  --text-3: var(--primary-200);

  --surface-1: var(--primary-900);
  --surface-2: var(--primary-800);
  --surface-3: var(--primary-700);

  --border-1: var(--primary-500); /* top */
  --border-2: var(--primary-600); /* bottom */
}
.mainmenufont {
color: rgba(0,0,0,0.6);
font-style: bold;
font-size: 16px;
margin-bottom: 1px;
font-family: 'Special Elite';
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);	
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: "Antic","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}
ht1,
ht2,
ht3,
ht4,
ht5,
ht6 {
    font-family: "Antic","Helvetica Neue","Helvetica","Arial","sans-serif";
    font-weight: 500;
    letter-spacing: 0.5px;
}

ht1,
ht2,
ht3,
ht4,
ht5,
ht6,
.ht1,
.ht2,
.ht3,
.ht4,
.ht5,
.ht6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
ht1 small,
ht2 small,
ht3 small,
ht4 small,
ht5 small,
ht6 small,
.ht1 small,
.ht2 small,
.ht3 small,
.ht4 small,
.ht5 small,
.ht6 small,
ht1 .small,
ht2 .small,
ht3 .small,
ht4 .small,
ht5 .small,
ht6 .small,
.ht1 .small,
.ht2 .small,
.ht3 .small,
.ht4 .small,
.ht5 .small,
.ht6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777;
}
ht1,
.ht1,
ht2,
.ht2,
ht3,
.ht3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
ht1 small,
.ht1 small,
ht2 small,
.ht2 small,
ht3 small,
.ht3 small,
ht1 .small,
.ht1 .small,
ht2 .small,
.ht2 .small,
ht3 .small,
.ht3 .small {
  font-size: 65%;
}
ht4,
.ht4,
ht5,
.ht5,
ht6,
.ht6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
ht4 small,
.ht4 small,
ht5 small,
.ht5 small,
ht6 small,
.ht6 small,
ht4 .small,
.ht4 .small,
ht5 .small,
.ht5 .small,
ht6 .small,
.ht6 .small {
  font-size: 75%;
}
ht1,
.ht1 {
  font-size: 36px;
}
ht2,
.ht2 {
  font-size: 30px;
}
ht3,
.ht3 {
  font-size: 24px;
}
ht4,
.ht4 {
  font-size: 18px;
}
ht5,
.ht5 {
  font-size: 14px;
}
ht6,
.ht6 {
  font-size: 12px;
}
p {
    font-size: 1em;
    line-height: 1.6;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #999999;
}

.brand,
.address-bar {
    display: none;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 3px;
    font-family: 'Special Elite';
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.box {
	border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 66px; 
    padding: 3px 3px;
border: var(--border-width) solid transparent;
  background: linear-gradient(var(--border-1), var(--border-2)) border-box;
  mask: linear-gradient(black, grey) border-box,
    linear-gradient(grey, black) padding-box;
  background: hsl(from var(--surface-3) h s l / 0.15);
  backdrop-filter: blur(5px) saturate(180%);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3)
}
.indexbox {
    margin-top: 30px;
     margin-bottom: 30px; 
    padding: 18px 0px 40px 0px;
    /*background: #fff;
    background: rgba(120,120,120,0.5);*/
}

.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

footer {
    background: #fff;
    background: rgba(255,255,255,0.4);
	position: static;
	bottom: 0;
	margin: 0;
}
.message {
   color: rgba(0, 0, 0, 0.5);
    font-family: "Special Elite","Helvetica Neue","Helvetica","Arial","sans-serif";
}
/*footer {
  position: absolute;
  bottom: 0;
  width: 90%;
  /* Set the fixed height of the footer here */
/*  height: 60px;
  background-color: #f5f5f5;
}
footer p {
    margin: 0;
    padding: 50px 0;
}*/

@media screen and (min-width:768px) {
    .brand {
        display: inherit;
        margin: 0px 0px 0px 0px; 
        padding: 66px 0px 10px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
        font-family: "Special Elite","Helvetica Neue","Helvetica","Arial","sans-serif";
        font-size: 5em;
        font-weight: 700;
        line-height: normal;
        color: rgba(0, 0, 0, 0.6);
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
        display: inherit;
        margin: 0;
        padding: 0 0 40px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
        text-transform: uppercase;
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: rgba(0, 0, 0, 0.6);
    }

    .navbar {
        border-radius: 0px;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
		opacity: 0.9;
       /* background: #fff;
        background: rgba(255,255,255,0.7); */
    }

    .nav>li>a {
        padding: 10px;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: CENTER;
        margin: 10px auto auto;
        table-layout: fixed;
        font-size: 1.25em;
    }
}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
        box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
    }
}
* {
  box-sizing: border-box;
   }

.zoom {
  
  /*background-color: green;*/
  transition: transform .2s;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2); 
}
#lightbox .modal-content {
    display: inline-block;
    text-align: center;
    margin-left: 20px;
    margin-top: 40px;
}

#lightbox .close {
    opacity: 1;
    /*color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 1px solid rgb(255, 255, 255);*/
    position: absolute;
    top: 42px;
    right: -55px;
    z-index:1032;
}
.btn-group button {
  background-color: #703d0c; /* Green background */
  border: 1px solid #fff; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  /*cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
          filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    color: #f6c700; /* White text */
}
          
.btn-disabled {
        cursor: not-allowed;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
        color: #f6c700; /* White text */
}
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 0.0625rem solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

.btn-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.3);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.9375rem;
  display: inline-block;
  text-decoration: none;
}

.btn-glass::after {
  border-radius: 0.75rem;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.play-btn {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 20%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}