.ag-format-container {

  width: 1142px;

  margin: 0 auto;

}





.ag-sherlock {

  height: 73.375em;

  width: 45.8125em;

  background: url(../images/sherlock.png) no-repeat scroll 0 0;

  -webkit-background-size: 100% 100%;

  -moz-background-size: 100% 100%;

  -o-background-size: 100% 100%;

  background-size: 100% 100%;



  z-index: 5;

  position: relative;

}

.ag-sherlock_smoke {

  display: block;

  height: 21.25em;

  width: 16.875em;



  opacity: 1;



  position: absolute;

  top: 0%;

  left: 0%;



  -webkit-transition: opacity 2.4s linear;

  -moz-transition: opacity 2.4s linear;

  -o-transition: opacity 2.4s linear;

  transition: opacity 2.4s linear;

}





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

  .ag-format-container {

    width: 96%;

  }



}



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



}



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



}



@media (min-width: 768px) and (max-width: 979px) {

  .ag-format-container {

    width: 750px;

  }



}



@media (min-width: 980px) and (max-width: 1161px) {

  .ag-format-container {

    width: 960px;

  }



}

































.steam1{

        position: absolute;

    left: 50%;

    top: 15%;

}





.steam2{

        position: absolute;

    left: 68%;

    top: -7%;

}