.wid{
    width: 100%;
}
.primary{
    background-color: skyblue;
    width: 19%;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
 
  transition-duration: 0.4s;
  cursor: pointer;
}
.pri{
    background-color: skyblue;
    width: 48%;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.bon {
    background-color: white; 
    color: black; 
    border: 2px solid skyblue;

}
.bon:hover{
    background-color: skyblue;
  color: white;
}

#footer {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: skyblue;
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
    display:flexbox;
}

.jumbotron{
    padding: 20px 30px 20px 30px;
    margin: 0px auto;
    background:skyblue;
    color: floralwhite;
}
canvas {
    width: 100%;
    height: 300px;
}
.wi{
    width: 10%;
}
.canStyle {
   
    width: 49%;
    border-style: ridge;
    border-width: 4pt;
    
    border-color: skyblue;
}
#myvideo{
    width: 100%;
}
.social-footer {
    padding: 1rem;
    background: $dark-gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    .social-footer-icons {
      li:last-of-type {
        margin-right: 0;
      }
  
      .fa {
        font-size: 1.3rem;
        color: $white;
  
        &:hover {
          color: darken($dark-gray, 25%);
          transition: color 0.3s ease-in;
        }
      }
    }
  }
} 
.cent{
  display: -ms-flexbox;
}