/* The side navigation menu */
* {
    box-sizing: border-box;
  }

body{
    background-color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin:0;
   
}
#openbtn{
    margin:20px;
    padding:8px 12px;
    color:orange;
    background-color:black;
    border-radius: 3px;
    cursor: pointer;
}
.tool{
    cursor: pointer;
    background-color:black;
    color:orange;

}

#topMenu, #myForm{
    border:1px solid gray;
    padding:16px 32px;
}
#main{
    margin: 100px 0 0 250px;
    border:1px solid red;
}
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 250px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgba(0,0,0,0.4); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 100px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #111;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .header {
    padding-bottom: 10px;
    text-align: center;
    background: rgb(56, 52, 51);
    color: rgba(243, 235, 235, 0.815);
    font-size: larger;
    font-family: fantasy;
  }
  
  /* Increase the font size of the heading */
  .header h1 {
    font-size: 40px;
  }
  
  /* Style the top navigation bar */
  .navbar {
    overflow: hidden;
    background-color: #333;
    position: sticky;
    top: 0;
    padding: 5px;
    z-index: 1;
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Column container */
  .row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  /* Main column */
  .main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
  }
  
  /* Fake image, just for this example */
  .fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
  }
  
  /* Footer */
  footer {
    text-align: center;
    padding: 3px;
    background-color: rgb(56, 52, 51);
    color: white;
    font-size: small;
  }
  
  footer .dca-site {
      text-decoration: none;
      color:#f5a425
  }
  
  footer .dca-site:hover {
      color:#e016e7;
      text-decoration:underline;
  }
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row {   
      flex-direction: column;
    }
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .navbar a {
      float: none;
      width: 100%;
    }
  }
  
  /* Slider */
  
  .header {
    position: relative;
    max-height: 100%;
    overflow: hidden;
    margin-bottom: -7px;
  }
  
  #bg-video {
      height: 650px;
      min-width: 100%;
      max-width: 100%;
      /*min-height: 100vh;
      max-height: 100vh;*/
      object-fit: cover;
      z-index: -1;
  }
  
  #bg-video::-webkit-media-controls {
      display: none !important;
  }
  
  .video-overlay {
      position: absolute;
      background-color: rgba(22,34,57,0.85);
      top: 0;
      left: 0;
      bottom: 7px;
      width: 100%;
  }

  .video-overlay div img {
    background-color: #ddd;
    position: relative;
    opacity: 0.3;
    width: 200px;
    top: 50px;
    border-radius: 6%;
  }
  
  .header .caption {
    text-align: center;
    position: absolute;
    width: 80%;
    left: 50%;
    top: 35%;
    transform: translate(-50%,-50%);
  }
  
    
  .header .caption h2 {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 64px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
  }
  
  .header .caption h2 em {
    font-style: normal;
    color: #f5a425;
    font-weight: 900;
  }
  
  @media screen and (max-width: 1180px) {
  
    .header .caption h6 {
      font-weight: 500;
    }
  
    .header .caption h2 {
      font-size: 58px;
    }
  
  }
  @media screen and (max-width: 767px) {
  
    .header .caption h6 {
      font-weight: 500;
    }
  
    .header .caption h2 {
      font-size: 36px;
    }

  }

  .modal {
    display:none;
    position:fixed;
    left:0;
    top:0;
    z-index: 20;
    height:100%;
    width: 100%;
    background-color: rgb(0,0,0); /*fallback color*/
    background-color: rgba(0,0,0,0.4);
    overflow: auto;
  }
  .modal-content{
    background-color: #fefefe;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position:relative;
  }
  .close{
    position: absolute;
    right: 25px;
    top: 15px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: red;
    cursor: pointer;
  }
  .container {
    /*display: flex;
    justify-content: space-between;*/
    padding: 16px;
  }
  .container input[type=email], .container input[type=text] {
    width: 100%;
    padding: 12px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .container button {
    position: relative;
    left: 10%;
    right: 10%;
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: px;
    border: none;
    cursor: pointer;
    width: 40%;
  }
  .container button:hover {
    opacity: 0.8;
  }
  .container a{
    text-decoration: none;
    color:blue;
  }
  .container a:hover{
    text-decoration: underline;
    opacity: 0.7;
  }

  .main-button a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
  }
  .main-button a:hover {
    color:#c57a19;
    text-decoration:underline;
    font-weight: bolder;
  }
  .cbl {
    display: flex;
    justify-content: space-around;
    padding: 30px 0 10px 0;
    width: 100%;
    border: none;
    top: 60%;
   ;
  }
  .cbl img {
    width: 350px;
   
  }