/**************************************************
    Adjust media containers based on screen size
 **************************************************/

@media screen and (min-width: 521px) {

  .triple-pix {
    width: 520;
    height: 147;
  }

  @supports (aspect-ratio: 16/9) {
    .video-player {
      width: calc(520px + 2%);
      aspect-ratio: 16/9;
      /*border-color: green;
      border-style: solid;
      border-width: 1px;*/
      
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .video-player {
      width: 520px;
      height: 292px;
      /*border-color: red;
      border-style: solid;
      border-width: 1px;*/
    }
  }
  
  .video-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  
}

@media screen and (max-width: 520px) {
  
  @supports (aspect-ratio: 520/147) {
    .triple-pix {
      width: 100%;
      aspect-ratio: 520/147;
      /*border-color: green;
      border-style: solid;
      border-width: 1px;*/
    }
  }
  @supports not (aspect-ratio: 520/147) {
    .triple-pix {
      width: 360px;
      height: 102px;
      /*border-color: red;
      border-style: solid;
      border-width: 1px;*/
    }
  }
  
  @supports (aspect-ratio: 16/9) {
    .video-player {
      width: 100%;
      aspect-ratio: 16/9;
      /*border-color: yellow;
      border-style: dotted;
      border-width: 10px;*/
    }
    .video-player iframe {
      width: 100%;
      height: 100%;
      border: 0;
      /*border-color: blue;
      border-style: solid;
      border-width: 1px;*/
    }
  }
  @supports not (aspect-ratio: 16/9) {
    .video-player {
      width: 360px;
      height: 202px;
      /*border-color: red;
      border-style: solid;
      border-width: 1px;*/
    }
    .video-player iframe {
      width: 360;
      height: 202;
      border: 0;
      /*border-color: yellow;
      border-style: solid;
      border-width: 1px;*/
    }
  }
  
}

/*******************************************************
    Below here, things don't vary based on screen size
 *******************************************************/

body {
  font-family:Arial,Helvetica,sans-serif;
  font-size:24px;
  background-color:black;
  color:white;
  text-align:center;
}

div {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  /*border-color: red;
  border-style: solid;
  border-width: 1px;*/
}

p {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:0px;
}

h1 {
  font-size:32px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:5px;
}

h2 {
  font-size:24px;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:5px;
}

.top-banner {
  width:30%%;
  max-width:50%;
  height:auto;
}

.flexie {
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.biz-heading {
  height: 79; /* set to triple-pix height [147] minus this guy's top+bottom padding */
  font-size:24px;
  font-weight:bold;
  color:white;
  background-color:#202020;
  text-align:center;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 13px;
  border-spacing: 0;
  padding-top: 34px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 34;
}

a:link {
  text-decoration:none;
  color:steelblue;
}

a:visited {
  text-decoration:none;
  color:steelblue;
}

a:hover {
  text-decoration:none;
  color:dimgray;
}

a.biz-link {
  text-decoration: none;
  font-size:20px;
  font-weight:bold;
}

.rounded-corners {
  border-radius: 13px;
  border-spacing: 0;
}

.leedle-rectangle {
  width: 80;
  height: 30;
}

.leedle-square {
  width: 30;
  height: 30;
}

.big-top-gap {
  margin-top: 16px;
}

.top-gap {
  margin-top: 8px;
}

.bottom-gap {
  margin-top: 8px;
}

.footer {
  font-size:13px;
}