@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  #B>.partB {
    height: 8vh;
    /*63px;*/
    background-color: none;
  }

  #C>.partB {
    background-color: none;
    width: 180px;
  }

  #C>.partC {
    margin-left: -0.2vw;
    background-color: none;
  }
}

@media only screen and (min-device-width: 644px) and (max-width: 1220px) {
  body {
    background-color: none;
  }

  #A>.partA {
    width: 50%;
  }

  #A>.partB {
    width: 15%;
    background-color: none;
    margin-left: 0.25%;
  }

  #A>.partC {
    width: 33%;
  }

  #B>.partB {
    width: 20%;
    height: 8%;
  }

  #B>.partC {
    width: 22%;
  }

  #C>.partA {
    width: 20%;
  }

  #C>.partB {
    width: 15%;
  }

  #C>.partC {
    width: 60vw;
  }

  #red_dot {
    top: 1.5%;
    right: 2%;
    height: 40px;
    width: 40px;
  }

  #img1 {
    transform: scale(1.2)translate(-10%, 10%);
  }

  #img2 {
    transform: scale(1.2)translate(10%, 5%);
  }

  #cctvimg3 {
    transform: scale(1.2)translate(10%, 35%);
  }

  #img4 {
    transform: scale(1.2)translate(30%, 35%);
  }

  #img5 {
    transform: scale(1.5)translate(35%, -25%);
  }

  #img6 {
    transform: scale(1.2);
  }

  #img7 {
    transform: scale(1.2)translate(0%, -25%);
  }

  #cctvimg8 {
    transform: scale(1.2);
  }

  #img9 {
    transform: scale(1.2);
  }

  #img10 {
    transform: scale(1.2);
  }

  #cctvimg11 {
    transform: scale(1.2);
  }

  #img12 {
    transform: scale(1.2);
  }

  #img13 {
    transform: scale(1.2);
  }

  #img14 {
    transform: scale(1.2);
  }

  #img15 {
    transform: scale(1.2);
  }

  #img16 {
    transform: scale(1.2);
  }

  #img17 {
    transform: scale(1.2);
  }

  #cctvimg18 {
    transform: scale(1.2);
  }

  #cctvimg19 {
    transform: scale(1.2);
  }

  #cctvimg20 {
    transform: scale(1.2);
  }

  .imgContainer>div {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-top: 5px;
  }

  .logo>img {
    /* margin-top: 25vh; */
  }
}

@media only screen and (min-device-width: 544px) and (max-width: 644px) {
  body {
    background-color: none;
  }

  #A>.partA {
    width: 35%;
  }

  #A>.partB {
    width: 25%;
    height: 1.5%;
    background-color: none;
    margin-left: 0.25%;
  }

  #A>.partC {
    width: 35%;
  }

  #B>.partA {}

  #B>.partB {
    width: 20%;
    height: 8%;
  }

  #B>.partC {
    width: 22%;
  }

  #C>.partA {
    width: 20%;
  }

  #C>.partB {
    width: 15%;
  }

  #C>.partC {
    width: 60vw;
  }

  #red_dot {
    top: 1%;
    right: 2%;
    height: 40px;
    width: 40px;
  }

  #img1 {
    transform: scale(2)translate(-25%, 20%);
  }

  #img2 {
    transform: scale(1.2)translate(10%, 5%);
  }

  #cctvimg3 {
    transform: scale(1.8)translate(-10%, 75%);
  }

  #img4 {
    transform: scale(1.2)translate(30%, 85%);
  }

  #img5 {
    transform: scale(2)translate(35%, 25%);
  }

  #img6 {
    transform: scale(1.2);
  }

  #img7 {
    transform: scale(1.2)translate(0%, 15%);
  }

  #cctvimg8 {
    transform: scale(2)translate(20%, 80%);
  }

  #img9 {
    transform: scale(1.2);
  }

  #img10 {
    transform: scale(2)translate(-20%, 35%);
  }

  #cctvimg11 {
    transform: scale(2)translate(60%, -60%);
  }

  #img12 {
    transform: scale(1.2);
  }

  #img13 {
    transform: scale(1.2);
  }

  #img14 {
    transform: scale(1.5)translate(0, 60%);
  }

  #img15 {
    transform: scale(1.2)translate(0, -20%);
  }

  #img16 {
    transform: scale(1.2)translate(20%, 0%);
  }

  #img17 {
    transform: scale(1.5)translate(-80%, 0);
  }

  #cctvimg18 {
    transform: scale(1.2);
  }

  #cctvimg19 {
    transform: scale(1.5)translate(0, 100%);
  }

  #cctvimg20 {
    transform: scale(1.5)translate(30%, 0);
  }

  .imgContainer>div {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-top: 5px;
  }

  .logo>img {
    /* margin-top: 30vh; */
  }
}

@media only screen and (max-width: 544px) {
  body {
    background-color: none;
  }

  #A>.partA {
    width: 35%;
  }

  #A>.partB {
    width: 25%;
    height: 1.5%;
    background-color: none;
    margin-left: 0.25%;
  }

  #A>.partC {
    width: 35%;
  }

  #A>.partC {
    width: 35%;
  }

  #B>.partB {
    width: 20%;
    height: 4.5%;
  }

  #B>.partC {
    width: 22%;
    margin-bottom: 4.4vh;
  }

  #C>.partA {
    width: 20%;
  }

  #C>.partB {
    width: 15%;
  }

  #C>.partC {
    width: 60vw;
  }

  #red_dot {
    top: 1%;
    right: 2%;
    height: 40px;
    width: 40px;
  }

  #img1 {
    transform: scale(2)translate(-25%, 20%);
  }

  #img2 {
    transform: scale(1.2)translate(10%, 5%);
  }

  #cctvimg3 {
    transform: scale(1.8)translate(-10%, 75%);
  }

  #img4 {
    transform: scale(1.2)translate(30%, 85%);
  }

  #img5 {
    transform: scale(2)translate(35%, 25%);
  }

  #img6 {
    transform: scale(1.2);
  }

  #img7 {
    transform: scale(1.2)translate(0%, 15%);
  }

  #cctvimg8 {
    transform: scale(2)translate(20%, 80%);
  }

  #img9 {
    transform: scale(1.2);
  }

  #img10 {
    transform: scale(2)translate(-20%, 35%);
  }

  #cctvimg11 {
    transform: scale(2)translate(60%, -60%);
  }

  #img12 {
    transform: scale(1.2);
  }

  #img13 {
    transform: scale(1.2);
  }

  #img14 {
    transform: scale(1.5)translate(0, 60%);
  }

  #img15 {
    transform: scale(1.2)translate(0, -20%);
  }

  #img16 {
    transform: scale(1.2)translate(20%, 0%);
  }

  #img17 {
    transform: scale(1.5)translate(-80%, 0);
  }

  #cctvimg18 {
    transform: scale(1.2);
  }

  #cctvimg19 {
    transform: scale(1.5)translate(0, 100%);
  }

  #cctvimg20 {
    transform: scale(1.5)translate(30%, 0);
  }

  .imgContainer>div {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    margin-top: 2px;
  }

  .logo>img {
    /* margin-top: 30vh; */
  }
}

@media only screen and (max-width: 975px) {
  div.DisplayLabel#rollingMessage {
    top: 37.5vh;
  }

}

@media only screen and (max-width: 815px) {
  div.DisplayLabel#rollingMessage {
    top: 40vh;
  }
}

@media only screen and (max-width: 750px) {
  .body_container>img {
    width: calc((50% - 30px) / 2);
  }
}

@media only screen and (max-width: 660px) {
  div.DisplayLabel#rollingMessage {
    top: 42.5vh;
  }
}

@media only screen and (max-width: 550px) {
  div.menu>div>h1 {
    font-size: 24pt;
  }

  div.menu>div#audio>h1.stat {
    font-size: 24pt;
  }

  section.warning>h1 {
    font-size: 4vw;
  }

  .ga_optout{
    font-size: 4vw;
  }

  section.warning>button {
    font-size: 4vw;
  }

  div.captInput>input {
    font-size: 4vw;
  }

  .container {
    font-size: 11pt;
  }

  .body_container {
    margin-left: 60px;
    width: calc(100vw - 120px);
  }

  div.menu {
    width: 100vw;
    margin-left: 0vw;
  }
}

@media only screen and (max-width: 500px) {
  div.DisplayLabel#rollingMessage {
    top: 45vh;
  }
  #captionsText>h1{
    font-size:24pt!important;
  }
  div.DisplayLabel>h1{
    font-size:24pt!important;
  }
}

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

  div.DisplayLabel#rollingMessage>h1 {
    -webkit-text-stroke-width: 1px;
  }
  div.CCTV>section#CCTV>div.selection {
    bottom: -10vh;
  }
  .shape9 {
    width: 20%;
  }
  div.captInput>input {
    font-size: 16pt;
  }
  #captionsText>h1{
    font-size:16pt!important;
  }
  div.DisplayLabel>h1{
    font-size:16pt!important;
  }
  div.CCTV>section#CCTV>div.selection>h1 {
    font-size: 16pt;
  }

  .container {
    font-size: 9pt;
  }

  .body_container {
    margin-left: 45px;
    margin-bottom: 15px;
    width: calc(100vw - 45px - 50px);
  }

  div.captInput>div.button {
    width: 7vw;
    background-size: 5.5vw 5.5vw;
  }

  div.captInput {
    left: 50vw;
    transform: translate(-50%, 0%);
    width: calc(100% - 60px);
  }

  div.CCTV {
    width: 90vw;
    height: 50.69vw;
    top: calc(50% - 25.345vw);
    left: calc(50% - 46vw);
  }

  div.CCTV>section#CCTV>div.selection {
    bottom: -10vh;
  }

  div.captInput>input {
    width: 35vw;
  }

  #img1{
  	background-image: url("/images/gifs/Film3.jpg");
  }
  #img2{
  	background-image: url("/images/gifs/Film1.jpg");
  }
  #cctvimg3{
  	background-image: url("/images/gifs/CCTV9.jpg");
  }
  #img4{
  	background-image: url("/images/gifs/Film2.jpg");
  }
  #img5{
  	background-image: url("/images/gifs/Film4.jpg");
  }
  #img6{
  	background-image: url("/images/gifs/Film6.jpg");
  }

  #img7{
  	background-image: url("/images/gifs/Film5.jpg");
  }

  #cctvimg8{
  	background-image: url("/images/gifs/CCTV2.jpg");
  }
  #img9{
  	background-image: url("/images/gifs/Film12.jpg");
  }

  #img10{
  	background-image: url("/images/gifs/Film7.jpg");
  }

  #cctvimg11{
    background-image: url("/images/gifs/CCTV7.jpg");
  }

  #img12{
  	background-image: url("/images/gifs/Film8.jpg");
  }

  #img13{
  	background-image: url("/images/gifs/Film9.jpg");
  }

  #img14{
  	background-image: url("/images/gifs/Film14.jpg");
  }

  #img15{
  	background-image: url("/images/gifs/Film15.jpg");
  }

  #img16{
  	background-image: url("/images/gifs/Film10.jpg");
  }

  #img17{
  	background-image: url("/images/gifs/Film13.jpg");
  }

  #cctvimg18{
  	background-image: url("/images/gifs/CCTV8.jpg");
  }

  #cctvimg19{
  	background-image: url("/images/gifs/Film11.jpg");
  }

  #cctvimg20{
  	background-image: url("/images/gifs/CCTV10.jpg");
  }

  .logo{
    margin-top: -5vh;
  }

  div.DisplayLabel#rollingMessage {
    top: 40vh;
  }

  #about_container>.form>.partB {
    width: 75px;
  }

  #about_container>.form>.partB>div>svg>line {
    stroke-width: 1;
  }

  #about_container>.form>.partC {
    width: calc(35% - 37.5px);
    border-top: 1px solid white;
    border-right: 1px solid white;
  }

  #about_container>.form>.partA {
    width: calc(50% - 37.5px);
  }
}

/* @media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3){
    video::-webkit-media-controls {
      display: inline !important;
    }
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2){
    video::-webkit-media-controls {
      display: inline !important;
    }
  }

  @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2){
      video::-webkit-media-controls {
        display: inline !important;
      }
  }

  @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2){
      video::-webkit-media-controls {
        display: inline !important;
      }
  } */