banner{
    #background-video{
        z-index: 5;
    }
}

.logo {
    text-align: top;
}

#image{
    display: grid;
      grid-template-columns: 1fr 1fr;
}

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    width: 100%;
}

h2 {
    padding-left: 2%;
}

h3 {
    padding-left: 2%;
}

#background-video {
    width: 100%;
}

p {
    padding-left: 20px;
    padding-right: 20px;
}

ol li{
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 20px;
}

.life{
    position: relative;
    font-family: cursive;
    /* The animation code */
    animation: myfirst 5s infinite;
}

@keyframes myfirst {
    0%   {color: red; left: 0px; top: 0px;}
    25%  {color: yellow; left: 100px; top: 0px;}
    50%  {color: blue; left: 100px; top: 50px;}
    75%  {color: green; left: 0px; top: 50px;}
    100% {color: red; left: 0px; top: 0px;}
  }

  /* About page css */

#casestudies h2 {
    padding-left: 2%;
    padding-right: 2%;
}

.case {
    display: inline-block;
    padding-bottom: 20px;
}

.case img {
    width: 30%;
    float: left;
    padding-left: 2%;
    padding-right: 2%;
    shape-outside: square(50%);
}

.casetext {
    padding-left: 2%;
    display: inline-block;
}

    /* casestudy css  */

.coach {
    padding-left: 2%;
    padding-right: 2%;
    display: inline-block;
}

.coach img {
    width: 60%;
}

.quote {
    margin: auto;
    width: 60%;
}

.name {
    float: right;
}

  /* Add a black background color to the top navigation */

  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
    z-index: 20;
  }

  .topnav img {
    height: 50px;
    padding-left: 20px !important;
  }

  .topnav ul {
    list-style-type: none;
    float: right;
    display: flex;
    padding: 0;
    margin: 0;
  }

  .topnav a {
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 17px;
    height: 50px;
  }

  .topnav a.icon {
    background: black;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

/*  Mobile Navigation  */

@media screen and (max-width: 600px) {
  .case {
    display: block;
  }
  .case img{
    width: 96% !important;
  }
  .casetext {
    display: block;
  }
  .casetext h3 {
    padding-left: 2%;
  }
  .coach img {
      width: 100%;
  }
}

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

  .topnav ul {display: none;}
  .topnav a.icon {
    float: right;
    display: flex;
    vertical-align: middle;
    }
  }

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive ul {
    display: initial;
    height: 50px;
    float: none;
  }
}