section.video {
    background-color: var(--second-bg-color);
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    text-align: centre;
}

.video-header {
    position: relative;
    padding-bottom: 40px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;    
    margin-top: 40px;
}

.video-header > h1 {
    color: var(--second-txt-color);
}


/*
.width-container {
 max-width: 1080px;
 width: 100%;
 margin: auto;
}

.video-container {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 0;
  padding-bottom: 43.8%;
  box-shadow: -14px 14px orange;
  margin-bottom: -4px;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
}
*/

.width-container {
width: 100%; /* Ensures it takes the full width of its parent */
    max-width: 720px; /* Maximum width of the video */
    margin: auto;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.5%;/*
    height: 100%;
    width: 720px;
    height: 405px;
    overflow: hidden;*/
}

iframe.totem {
    background: url(../image/totem.jpg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    position: absolute; 
    top: 0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    border: none;
}

.video-footer {
    margin: 0 auto 100px auto;
    width: 40%;
}


@media only screen and (max-width: 980px) {
    .video-container {
      margin: auto;
    }
    .video-footer {
        width: 80%;
    }
    .video-header > h1 {
        font-size: 2em;
    }
    
}
@media only screen and (max-width: 768px) {
    
}