html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #fff;
    font-family: Helvetica, sans-serif;
}

h1 {
    margin-top: 30px;
}

h3 {
    margin: 0;
    display: block;
}

/* cards */
.card {
    background-color: #fff;
    box-shadow: rgba(39, 39, 39, 0.1) 0 0 20px;
    border: .2x solid #f3f3f3;
    padding: 30px 30px;
    text-align: center;
}

.bcard {
    display: flex;
    flex-direction: column;
}

.videoFuncs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 107px;
    margin-top: 5px;
}

/*home page*/
.card a:visited {
    text-decoration: none;
    color: #F08605;
}

.case-cards {
    display: grid;
    justify-content: center;
    grid-template-columns: 55% 25%;
    grid-template-rows: 30% 30% 30%;
    grid-gap: 30px;
    padding: 20px 20px;
}

.card-hidden {
    display: none;
}

#c0 {
    grid-column: 1; 
    grid-row: 1/ span 3;
}

#c0 img {
    width: 90%;
    padding: 20px 20px;
}

#c1 {
    grid-column: 2;
    grid-row: 1;
}

#c2 {
    grid-column: 2;
    grid-row: 2;
}

#c3 {
    grid-column: 2;
    grid-row: 3;
}

/*for case 1-3 pages*/
.header {
    width: 100%;
    margin: 15px 15px;
    text-align: center;
}

.nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding-top: 9px;
    padding-bottom: 15px;
}

.nav li {
    display: inline-block;
    padding: 0 20px;
    color: #222;
}

.nav li:hover {
    opacity: 0.5;
    transition: opacity ease-in-out 0.2s;
}

a {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: rgb(36, 45, 66);
}

button {
    background-color: #fff;
    border-color: #fff;
    margin: 0px;
    font-size: 18px;
}

.replay, 
.pause, 
.play {
    height: 15px;
    padding: 0px;
}

.videoFuncs button {
    width: 50px;
}

.override {
    margin-top: 5px;
    color: black;
    background-color: #D3D3D3;
    width: 107px;
}

.animation {
    background-color: rgb(165, 165, 165);
    text-align: center;
    width: 804px;
    height: 350px;
    padding: 30px 30px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

video {
    width: 825px;
    margin-top: 30px;
}

/*button h3 {
    color: #F08605;
}*/

/*alignment for all button cards*/
#c1-1, 
#c1-2, 
#c1-3, 
#c1-4, 
#c2-1, 
#c2-2, 
#c2-3, 
#c3-1, 
#c3-2, 
#c3-3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*case one-three page*/
.case1 p, 
.case2 p, 
.case3 p {
    padding: 15px 15px;
    text-align: left;
}

.case1, 
.case2, 
.case3 {
    display: grid;
    justify-content: center;
    grid-template-columns: 18% 65%;
    grid-gap: 30px;
    padding: -5px 15px;
    margin-bottom: 30px;
}

.case1 {
    grid-template-rows: 115px 115px 115px 115px 355px;
}

.case2 {
    grid-template-rows: 115px 115px 115px 115px 465px;
}

.case3 {
    grid-template-rows: 115px 115px 115px 115px 115px;
}

#c1-1, 
#c2-1, 
#c3-1 {
    grid-column: 1;
    grid-row: 1;
}

#c1-2, 
#c2-2, 
#c3-2 {
    grid-column: 1;
    grid-row: 2;
}

#c1-3, 
#c2-3, 
#c3-3 {
    grid-column: 1;
    grid-row: 3;
}

#c1-4 {
    grid-column: 1;
    grid-row: 4;
}

#e1, 
#e5, 
#e8 {
    display: block;
}

.c1, 
.c2, 
.c3 {
    grid-column: 2;
    grid-row: 1 / span 5;
}

/*.tab1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
}

#col1 {
    height: 153px;
}*/

/*all table syling*/
.tab{
    display: flex;
    justify-content: center;
}

.tab2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border: none;
}

table {
    table-layout: fixed;
    word-wrap:break-word;
    border-spacing: 5px .5rem;
    text-align: left;
}

th, td {
    border: 1px solid;
    padding: 15px;
}

.ct1 {
    width: 650px;
    height: 150px;
    margin: 0px;
    border-collapse: collapse;
    border: 1px solid;
}

.ct2 {
    width: 500px;
    border-collapse: collapse;
    border: 1px solid;
}

.ct2-2 {
    width: 300px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 50%; /* Full width */
    height: 50%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */
    margin-left: 450px;
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    text-align: center;
  }
  
  /* The Close Button */
  .close, 
  .close2 {
    color: black;
    float: center;
    font-size: 16px;
    background-color: #fff;
    border-color: #fff;
  }
  
  .close:hover,
  .close:focus,
  .close2:hover,
  .close2:focus {
    text-decoration: none;
    cursor: pointer;
  }