:root {
    --headheight: 0;
	--navheight: 0;
	--lbPaddingVid: 5em 10em 2em 10em;
	--lbPaddingNoVid: 10em 20em 2em 20em;
}

/* The alert message box */
.alert {
  padding: 20px;
  background-color: #74b9ff; /* Light Blue */
  color: white;
  margin-top: 15px;
  width: 40%;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

body, html{
  /*font-family: Tahoma, Geneva, sans-serif; */
  font-family: 'Raleway'; 
  height: 100%;
  margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
}

mbr{
	display: block;
    margin: 10px 0;
}

.header{
	position: fixed;
	z-index: -1;
	top:2.8em;
}

section{
	position:relative;
	z-index: 2;
	background-color: #edeff2;
	overflow:auto;
}

th{
font-weight: normal; 
}

input[type=checkbox] {
  display:none;
}

.lightbox {
  position:fixed;
  z-index: 4;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox .content {
  font-style: normal;
  background:#fff;
  margin: var(--lbPaddingVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;  
}

.cp1{
line-height:150%;

 }
 
.cp1Mobile{
line-height:150%;
font-size:30px;
 }
 
.lightbox2 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox2 .content2 {
  background:#fff;
  margin: var(--lbPaddingVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}
 
.lightbox3 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox3 .content3 {
  background:#fff;
  margin: var(--lbPaddingVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}
 
.lightbox4 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox4 .content4 {
  background:#fff;
  margin: var(--lbPaddingNoVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}

.lightbox5 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox5 .content5 {
  background:#fff;
  margin: var(--lbPaddingVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}

.lightbox6 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox6 .content6 {
  background:#fff;
  margin: var(--lbPaddingNoVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}
 
.lightbox7 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox7 .content7 {
  background:#f0f0f0;
  margin: var(--lbPaddingVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}

.lightbox8 {
  position:fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  background: rgba(0,0,0,0.75);
  visibility:hidden;
  opacity:0;
  transition: all ease-in 300ms;
}
 
.lightbox8 .content8 {
  background:#fff;
  margin: var(--lbPaddingNoVid);
  padding: 0.1em 1em 1em 1em;
  border-radius:12px;
}
 
#call:checked ~ .lightbox {
  visibility:visible;
  opacity:1;
}

.navbar ~ #call:checked {
  visibility:hidden;
  opacity:0;
}
 
#call2:checked ~ .lightbox2 {
  visibility:visible;
  opacity:1;
}

#call3:checked ~ .lightbox3 {
  visibility:visible;
  opacity:1;
}
 
#call4:checked ~ .lightbox4 {
  visibility:visible;
  opacity:1;
}

#call5:checked ~ .lightbox5 {
  visibility:visible;
  opacity:1;
}

#call6:checked ~ .lightbox6 {
  visibility:visible;
  opacity:1;
}

#call7:checked ~ .lightbox7 {
  visibility:visible;
  opacity:1;
}

#call8:checked ~ .lightbox8 {
  visibility:visible;
  opacity:1;
}

.input1 {
  padding: 4em 0em 3em 0em;
}

.input2 {
   padding: 0em 0em 0em 0em;
}

 /*variable classes*/
.pointer { 
  cursor:pointer;
}
  
.fr ]{
  float:right;
}


.preview {
    opacity: 1; /* Change this to .5 for 50% opacity */
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}
.preview:hover {
    opacity: 0.65;
}

/* NAV BAR */

.navbar {
  overflow: hidden;
  background-color: #333;
  width: 100%;
  position: fixed;
  z-index: 3;
  opacity:1;
  visibility:visible;
  height:2.8em;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  opacity: 1; /* Change this to .5 for 50% opacity */
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
	
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #b2b2b2;
  opacity: 1;
}