/*congi body*/
html,body{
    width: 99%;
    height:100%;
    overflow: hidden;
    background: #000;
    border: 0px solid blue;
}
  img{
      max-width: 100%;
      height: auto;
    }

    .top iframe {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 100%;
    width: 100%;
}

.sub_e iframe {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 98%;
    width: 100%;
}

.sub_d iframe {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 98%;
    width: 100%;
    border: 0px solid red;
}

.sub_c iframe {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 98%;
    width: 100%;
}

.container {
    position: absolute;
    padding: 10px;
    border-radius: 15px;
    border: 0px solid red;
    }

    /*===============MARROM================================================ */
@media all and (min-width: 1600px) {

  .container {
    width: 97%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
    background: ;
    }

.top{
  width: 99.3%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 26%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 72.3%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 99.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

    /*===============MARROM================================================ */
@media all and (min-width: 1500px) and (max-width: 1599px) {

  .container {
    width: 97%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
    background: ;
    }

.top{
  width: 99,3%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 28%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 70.1%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 99.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

    /*===============MARROM================================================ */
@media all and (min-width: 1400px) and (max-width: 1499px) {

  .container {
    width: 97%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
    background: ;
    }

.top{
  width: 99%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 22%;
  height: 83%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 75.8%;
  height: 83%;
  overflow-x: hidden;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.5%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

    /*===============MARROM================================================ */
@media all and (min-width: 1300px) and (max-width: 1399px) {

  .container {
    width: 97%;
    height: 100%;
    overflow: auto;
    border: 0px solid green;
    background: ;
    }

.top{
  width: 98vw;
  height: 60px;
  overflow: hidden;
  border: 0px solid yellow;
  margin-left: 9px;
}

.sub_e{
  width: 22%;
  height: 83%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 75.8%;
  height: 83%;
  overflow-x: hidden;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 99.3%;
  height: 32%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

    /*===============MARROM================================================ */
@media all and (min-width: 1200px) and (max-width: 1299px) {

  .container {
    width: 97%;
    height: 100%;
    overflow: auto;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 22%;
  height: 83%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 75.8%;
  height: 83%;
  overflow-x: hidden;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 16%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}


/*===============MARROM================================================ */
@media all and (min-width: 1100px) and (max-width: 1199px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 35%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 61.8%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}


/*===============MARROM================================================ */
@media all and (min-width: 1000px) and (max-width: 1099px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 35%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 61.8%;
  height: 80%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

/*=================VERDE============================================== */
@media all and (min-width: 900px) and (max-width: 999px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid green;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 35%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 61.8%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

/*===================ROSA============================================ */
@media all and (min-width: 800px) and (max-width: 899px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid pink;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 31%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 65.5%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 22%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

/*====================ROXO=========================================== */
@media all and (min-width: 700px) and (max-width: 799px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid #800080;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 32%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 63.8%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

/*==================BRANCO============================================= */
@media all and (min-width: 600px) and (max-width: 699px) {

  .container {
    width: 94%;
    height: 100%;
    overflow: auto;
    border: 0px solid #ffffff;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 100%;
  height: 40%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 100%;
  height: 40%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 14%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}


/*================CINZA=============================================== */
@media all and (min-width: 500px) and (max-width: 599px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid #c0c0c0;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 97.9%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 97.9%;
  height: 100%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}


/*==================AMAERELO======================================== */
@media all and (min-width: 400px) and (max-width: 499px) {

  .container {
    width: 92%;
    height: 100%;
    overflow: auto;
    border: 0px solid yellow;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 97.8%;
  height: 45%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 97.8%;
  height: 45%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 14%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}


/*====================AZUL========================================= */
@media all and (min-width: 300px) and (max-width: 399px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid blue;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 98%;
  height: 45%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 98%;
  height: 45%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}

/*====================Preto========================================= */
@media all and (min-width: 200px) and (max-width: 299px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid #000000;
    background: ;
    }

.top{
  width: 98%;
  height: 45px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 5px;
}

.sub_e{
  width: 98%;
  height: 44%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 98%;
  height: 44%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 5px;
  margin-top: 5px;
}

}

/*====================VERMELHO========================================= */
@media all and (max-width: 199px) {

  .container {
    width: 96%;
    height: 100%;
    overflow: auto;
    border: 0px solid red;
    background: ;
    }

.top{
  width: 98%;
  height: 70px;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 9px;
}

.sub_e{
  width: 98%;
  height: 40%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_d{
  width: 98%;
  height: 40%;
  overflow: auto;
  border: 0px solid #333;
  float: left;
  margin-left: 9px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.sub_c{
  width: 98.3%;
  height: 10%;
  overflow: hidden;
  border: 0px solid #333;
  margin-left: 8px;
  margin-top: 5px;
}

}