/* Cascading Stylesheet for CAUSE CELEBRE PRODUCTIONS */




body {
  background-color: black;
}

.footer 
  {font-family: "Saira", sans-serif;
   font-weight: bold;
   font-size:14px;
   position: relative; 
   left: 0px;
  bottom: 13px;
   width: 100%;
   height:28px;
   background-color: none;
   color: #c4deff;
   text-align: center;
  
}

h1
  {font-family: Impact, sans-serif;
  font-size:45px;
  font-weight: bold;
  color:#ffd9b3;
}


h2  {font-family: Impact, sans-serif;
  font-size:24px;
  font-weight: bold;
  color:#fff2e6;
}


h3   {font-family: "Titillium Web", sans-serif;
  font-size:14px;
  font-weight: 600;
  font-style: normal;
  color:#48b8bb;
}
 


h4  {font-family: "Saira", sans-serif;
  font-size:22px;
  font-weight: 700;
  font-style: normal;
}


h5 
{font-family: Impact, sans-serif;
  font-size:26px;
  font-weight: normal;
  color:#ffd9b3;
}



p 
  {font-family: "Titillium Web", sans-serif;
  font-size:20px;
  font-weight: 600;
  font-style: normal;
}



.readplay {font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size:23px;
  font-style: normal;
  color: #ccccff;
  font-variation-settings:
    "wdth" 85;
}


.read {font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size:22px;
  font-style: normal;
  font-variation-settings:
    "wdth" 85;
}
  



.readsm {font-family: "Saira", sans-serif;
  
  font-optical-sizing: auto;
  font-weight: 600;
  font-size:17px;
  font-style: normal;
  font-variation-settings:
    "wdth" 62;
}


.readlg {font-family: "Saira", sans-serif;
  
  font-optical-sizing: auto;
  font-weight: 600;
  font-size:26px;
  font-style: normal;
  font-variation-settings:
    "wdth" 85;
}



.readdbl {font-family: "Saira", sans-serif;
  position: relative;
  left: 150px;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size:22px;
  font-style: normal;
  font-variation-settings:
    "wdth" 85;
}


.readham {font-family: Impact, sans-serif;
  position: relative;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size:22px;
  color:#00e6e6;
  font-style: normal;
  font-variation-settings:
    "wdth" 85;
}

.readsub {font-family: Impact, sans-serif;
  position: relative;
  left: 225px;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size:22px;
  color:#00e6e6;
  font-style: normal;
  font-variation-settings:
    "wdth" 85;
}


a:link {
  color:    #c2f0f0;
  background-color: transparent;
  text-shadow: 1px 1px 2px #eafafa;
  text-decoration: none;
}
a:visited {
  color:   #c2f0f0;
  background-color: transparent;
  text-shadow: 1px 1px 2px #eafafa;
  text-decoration: none;
}

a:hover {
  color:    #c2f0f0;
  background-color: transparent;
  text-shadow: 1px 1px 2px #eafafa;
  text-decoration: none;
}

a:active {
  color:   #c2f0f0;
  background-color: transparent;
  text-shadow: 1px 1px 2px #eafafa;
  text-decoration: none;
}



div.show {
display: none;

}

div.hide {
display: block;

}



div.curtain {
  position: relative;
  display: none;

}


div.subcurtain  {
  display: none;

}




.active {

  background-color: none;

}


img.bravo {
  filter: drop-shadow(10px 10px 10px black);
}


img.charlie {
  filter: drop-shadow(5px 5px 5px black);
}

img.delta {
  filter: drop-shadow(3px 3px 3px black);
}



.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0px;
 
  padding: 0px;
}

.grid-container > div {
 background-image: url('IMAGES/dbpage.jpg');
 background-repeat: yes-repeat;

 padding: 0px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item2 {
  grid-column-start: 1;
  grid-column-end: 4;
}


.item3 {
  grid-column-start: 1;
  grid-column-end: 4;
}



.flip-card {
  background-color: transparent;
  width:350px;
  height: 325px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: transparent;
  color: #ffffff;
}

.flip-card-back {
  background-color: transparent;
  color: #000000;
  transform: rotateY(180deg);
}




@media only screen and (max-width: 600px) {
.flip-card-inner {
  width: 50%;
  height: 50%;

}




@media only screen and (max-width: 600px) {
div.curtain  {
 display: block;
  position: relative;
  left: 40px;

}


@media only screen and (max-width: 600px) {
div.subcurtain {
position: relative;
left: 2px;
display: block;

}





@media only screen and (max-width: 600px) {
div.show {
display: block;

}

@media only screen and (max-width: 600px) {
div.hide {
display: none;

}



@media only screen and (max-width: 600px) {
.readplay {
font-size: 18px;

}


@media only screen and (max-width: 600px) {

.read {
font-size: 17px;

}


@media only screen and (max-width: 600px) {
h4 {
font-size:19px;
  font-weight: 600;

}


@media only screen and (max-width: 600px) {
.footer {
font-size: 12px;
height:20px;

}