/* VIDEOPOEMAS DA AELG */
@import "base";

$pf_color_1: #211e30;
$pf_color_2: #555;
$pf_color_3: #94ac3f;
$pf_color_4: #efd;
$pf_color_5: #c2dc63;
$pf_color_6: #cddffa;
$pf_color_7: #003C78;
$pf_color_8: #000;
$pf_color_9: #e9ecf0;
$pf_color_10: #ebe7e6;
$pf_color_11: #C7064D;
$pf_color_12: #e7f4bf;
$pf_color_13: #c6de6d;
$pf_color_14: #95aa4c;

#window {
box-sizing: border-box;
}

/*GENERICOS*/
body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  background-image: url(../images/fondo.gif);
}

.popupBody {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  background: #c11;
  color: #555;
}

.PBPIterator {
  font-size: 10px;
  text-align: center;
  float: right;
  margin: 20px 10px;
  clear: both;
}

.PBPIterator div {
  color: #444;
  margin: 0px 2px;
  display: inline;
}

.PBPIterator div.title {
  margin-right: 10px;
  font-weight: bold;
  font-size: 10px;
}

.PBPIterator div.actualPage {
  font-weight: bold;
}

.PBPIterator div a {
  color: #444;
  font-weight: normal;
  text-decoration: none;
}

.PBPIterator div a img {
  border: none;
  vertical-align: middle;
}

//LOGO
#windowMenu {
}

#windowHeader div.logo {
  padding: 0px 10px;
  float: left;
  width: 85px;
}

#windowHeader div.logo img {
}

#windowHeader div.title {
  color: #fff;
  font-size: 20px;
  float: left;
  margin-top: 30px;
}

#windowNavigationBar {
  background: #fbdddd;
  float: left;
  width: 958px;
  border: solid #c11 1px;
}

#windowContent {
  width: 1000px;
  margin: auto;
  float: none;
}

#windowMainContent {
  _height: 400px;
  min-height: 400px;
}

.avisoBaleiro {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}

#videoPoemaBody {
  margin-top: 0px;
}

#windowHeader {
  display: inline-block;
  width: 1000px;
  background-color: #FFFFFFFF;
  height: 90px;
  margin: auto;
  display: block;
}

#videoPoemaHeader {
  height: 100%;
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}

#videopoemaLanguageLinks {
  div {
    font-size: 10px;
    float: left;
    margin: 0px 5px;

    a {
      color: #555555FF;
      text-decoration: none;
    }

    &.languageOff {
      font-weight: bold;
    }
  }
}


#videoPoemaHeader div {
  &.logo {
    display: inline-block;

    img {
      height: 90px;
    }
  }

  &.linkAELG {
    float: right;
    padding-right: 30px;
    background-color: #c7064d;
    border-bottom-left-radius: 94px;
    height: 100%;
    box-shadow: inset 0 -10px 10px -10px rgba(199, 6, 77, 0.55);

    img {
      height: 70px;
      float: right;
      margin-top: 8px;
    }

  }

  &.textAELG {
    font-size: 17px;
    font-weight: bold;
    color: #EEFFDDFF;
    width: 450px;
    margin-top: 36px;
    float: left;
    margin-left: 46px;
  }

  &.textSection {
    float: right;
    width: 70px;
    top: 70%;
    position: absolute;
    left: 74%;
  }
}

#videoPoemaBody #windowContent {
  border-top: none;
}

#videoPoemaMenu {
  width: 200px;
  float: left;
  color: #c7064d;
  margin-left: -105px;
}

#latestVideoPoemas {
  width: 600px;
  float: left;
  padding: 10px;

  div {
    &.header div {
      &.content {
        background: #CDDFFAFF;
        height: 20px;
        border: solid #999999FF 1px;
        margin: 0px;
        padding: 2px;
        border-radius: 6px;
        line-height: 20px;

        div {
          &.logo {
            width: 15px;
            height: 15px;
            float: left;
            padding: 0px 5px;
          }

          &.title {
            color: #333333FF;
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
          }
        }
      }
    }

    &.content {
      margin: 5px;
      _margin-top: -5px;

      div.miniVideoPoema {
        width: 120px;
        padding: 8px 12px;
        float: left;
        text-align: center;
        font-size: 10px;
        color: #555555FF;

        div {
          &.title {
            margin-bottom: 2px;
            vertical-align: middle;

            a {
              font-weight: bold;
              color: #003C78FF;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }

          &.snapshot {
            width: 102px;
            margin: auto;

            a {
              img {
                border: double #999999FF 3px;
              }

              &:hover img {
                border: double #777777FF 3px;
              }
            }

            div.length {
              margin: auto;
              text-align: center;
              width: 35px;
              background: #000000FF;
              color: #FFFFFFFF;
              position: relative;
              top: -25px;
              _top: -59px;
              left: -30px;
              font-size: 9px;
              filter: alpha(opacity = 60);
              opacity: 0.6;

              a {
                color: #FFFFFFFF;
                font-weight: bold;
                text-decoration: none;
              }
            }
          }

          &.polafia {
            margin-top: -10px;

            a {
              color: $color_titulos;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}

#xenerosMenuList {
  margin-bottom: 10px;
  margin-top: 15px;

}

#xenerosMenuList div.titulo {
  margin: 5px 5px 10px 5px;
  padding: 1px 3px;
  font-weight: bold;
  color: #c7064d;
  font-size: 14px;
  border-bottom: solid #c7064d 2px;
}

#xenerosMenuList div.entrada {
  font-size: 13px;
  margin: 5px;
  margin-left: 15px;
  padding: 1px 3px;
}

#xenerosMenuList div.entrada a {
  text-decoration: none;
  color: #555;
}

#xenerosMenuList div.entrada a:hover {
  font-weight: bold;
  color: #c7064d;
}

#xenerosMenuList div.seleccionado a {
  font-weight: bold;
  color: #c7064d;
}

#videoPoemaMainPageContent {
}

.columnas {
  width: 800px;
  float: left;
  background-color: #FFFFFFFF;

  #videoPoemaCenterDiv {
    margin: 10px 0 0 0;
  }
}

#videoPoemaCenterDiv {
  min-height: 500px;
  float: left;
  width: 625px;
}

#videoPoemaRightDiv {
  width: 170px;
  min-height: 500px;
  float: left;
}

#videoPoemaFooter {
  color: rgba(0, 0, 0, 0.55);
  width: 100%;
  float: none;
  text-align: center;
  font-size: 11px;
  margin-top: 20px;
  display: inline-block;
}

#videoPoemaFooter{
  a {
    color: rgba(0, 0, 0, 0.55);
    font-weight: bold;
    text-decoration: none;
  }

  #languageLinksMenu{
    display:none;
  }
}


/* Titulo das seccions */
#videoPoemaBody div.tituloSeccion {
  margin: 5px 5px 10px 5px;
  padding: 1px 3px;
  font-weight: bold;
  color: #c7064d;
  font-size: 14px;
  border-bottom: solid #c7064d 2px;
}


/* videopoemas filtrados */
#videoPoemasFiltrados {
  width: 587px;
  float: left;
  padding: 0px 10px;
}

#videoPoemasFiltrados .filtro {
  background: #F5E9EE;
  padding: 10px 0px;
  margin: 10px auto;
  text-align: center;
  width: 580px;
  border: solid #DD9FB6 1px;
}

#videoPoemasFiltrados .filtro .separables {
  margin: auto 3px;
}

#videoPoemasFiltrados .videos {
  margin-left: 3px;
}


/* Vista en miniatura dun videopoema */
.miniVideoPoema {
  width: 120px;
  height: 120px;
  padding: 8px 12px;
  float: left;
  text-align: center;
  font-size: 11px;
  color: #555;
  margin-right: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 2px;
}

.miniVideoPoema div.title {
  margin-bottom: 2px;
  vertical-align: middle;
}

.miniVideoPoema div.title a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.miniVideoPoema div.title a:hover {
  text-decoration: underline;
}

.miniVideoPoema div.snapshot {
  margin: auto;
}

.miniVideoPoema div.snapshot div.length {
  text-align: center;
  width: 35px;
  background: #000;
  color: #fff;
  position: relative;
  top: 5px;
  left: 12px;
  font-size: 9px;
  filter: alpha(opacity=60);
  opacity: 0.6;
  z-index: 2000;
}

.miniVideoPoema div.snapshot div.length a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.miniVideoPoema div.snapshot div.image {
  position: relative;
  top: -10px;
}

.miniVideoPoema div.snapshot div.image a {
  display: block;

}

.miniVideoPoema div.snapshot div.image a img {
  border: double #999 3px;
}

.miniVideoPoema div.snapshot div.image a:hover img {
  border: double #777 3px;
}

.miniVideoPoema div.creador {
  margin-top: -10px;
}

.miniVideoPoema div.creador a {
  color: #333;
  text-decoration: none;
}

.miniVideoPoema div.creador a:hover {
  text-decoration: underline;
}

/* Fin da ficha de un videopoema */


/* Novidades dos videopoemas */
#videoPoemaNews {
  float: left;
  width: 150px;
  padding-top: 10px;
  font-size: 11px;
  margin-bottom: 20px;
  border-bottom: dashed #dd9fb6 1px;
}

#videoPoemaNews div.news {
}

#videoPoemaNews div.news .new {
  margin-bottom: 15px;
  margin-left: 5px;
}

#videoPoemaNews div.news .new a {
  color: #333;
  text-decoration: none;
}

#videoPoemaNews div.news .new a:hover {
  text-decoration: underline;
}

/* Fin das Novidades dos videopoemas */


/* Ligaz�ns dos videopoemas */
#videoPoemaLinks {
  float: left;
  width: 150px;
  padding-top: 10px;
  font-size: 11px;
  margin-bottom: 20px;
}

#videoPoemaLinks div.links {
}

#videoPoemaLinks div.links .link {
  margin: 4px 4px 4px 8px;
}

#videoPoemaLinks div.links .link img {
  margin-right: 3px;
}

#videoPoemaLinks div.links .link a {
  margin: 2px;
  color: #333;
  text-decoration: none;
}

#videoPoemaLinks div.links .link a:hover {
  margin: 2px;
  text-decoration: underline;
}

/* Fin das Ligazons dos videopoemas */


/* Publicacions dos videopoemas */
#videoPoemaPublications {
  float: left;
  width: 150px;
  padding-top: 10px;
  font-size: 11px;
  margin-bottom: 20px;
}

#videoPoemaPublications div.publications {
}

#videoPoemaPublications div.publications .publication {
  margin: 4px 4px 4px 8px;
}

#videoPoemaPublications div.publications .publication img {
  margin-right: 3px;
}

#videoPoemaPublications div.publications .publication a {
  margin: 2px;
  color: #333;
  text-decoration: none;
}

#videoPoemaPublications div.publications .publication a:hover {
  margin: 2px;
  text-decoration: underline;
}

/* Fin das publicacions dos videopoemas */

/* Visualizacion do videopoema */
#videoPoemaContent {
  float: left;
  margin: 10px 20px;
  width: 720px;
}

#videoPoemaContent div.header {
  width: 708px;
  background: #f0b5cb;
  border: solid #DD9FB6 1px;
  border-bottom: none;
  float: left;
  padding: 4px;
  font-size: 14px;
  color: #333;
}

#videoPoemaContent div.header div.logo {
  width: 15px;
  height: 15px;
  float: left;
  padding: 0px 5px;
}

#videoPoemaContent div.header div.title {
  float: left;
  font-weight: bold;
}

#videoPoemaContent div.header div.title a {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

#videoPoemaContent div.videoPoema {
  float: left;
  width: 716px;
  padding: 10px 0px;
  border: solid #DD9FB6 1px;
}


#videoPoemaContent div.videoPoema div.mediaPlayer {
  background: #000;
  width: 320px;
  height: 260px;
  float: left;
  border: solid #999 1px;
  margin-left: 10px;
  _margin-left: 5px;
}

#videoPoemaContent div.videoPoema div.mediaPlayerNuevo {
  width: 320px;
  float: left;
  margin-left: 10px;
}

#videoPoemaContent div.videoPoema div.mainInfo {
  background: #f5e9ee;
  border: solid #ddd 1px;
  width: 340px;
  float: left;
  margin-left: 10px;
  color: #333;
  padding: 3px 10px;
}

#videoPoemaContent div.videoPoema div.mainInfo div {
  margin: 5px 0px;
}

#videoPoemaContent div.videoPoema div.mainInfo div a {
  color: #C7064D;
  font-weight: bold;
  text-decoration: none;
}

#videoPoemaContent div.videoPoema div.mainInfo div a:hover {
  text-decoration: underline;
}

#videoPoemaContent div.videoPoema div.statistics {
  width: 342px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  color: #333;
  padding: 10px;
}

#videoPoemaContent div.videoPoema div.statistics div.doVoteMsg {
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

#videoPoemaContent div.videoPoema div.statistics div.doVote {
  float: left;
  width: 80px;
}

#videoPoemaContent div.videoPoema div.statistics div.thanksForVoting {
  font-size: 11px;
  margin-left: 5px;
  float: left;
}

#videoPoemaContent div.videoPoema div.statistics div.numberOfVotes {
  font-size: 11px;
  float: right;
}

#videoPoemaContent div.videoPoema div.statistics div.visits {
  clear: both;
  margin-top: -5px;
  font-size: 11px;
}

#relatedVideosContent {
  margin-top: 10px;
}

#relatedVideosContent div.video {
  width: 110px;
  padding: 0px 12px;
  float: left;
  text-align: center;
  font-size: 10px;
  color: #555;
}

#relatedVideosContent div.video div.relatedTitle {
  margin-bottom: 2px;
  vertical-align: middle;
}

#relatedVideosContent div.video div.relatedTitle a {
  font-weight: bold;
  color: #003C78;
  text-decoration: none;
}

#relatedVideosContent div.video div.relatedTitle a:hover {
  text-decoration: underline;
}

#relatedVideosContent div.video div.relatedSnapshot {
  width: 102px;
  margin: auto;
}

#relatedVideosContent div.video div.relatedSnapshot a img {
  border: double #999 3px;
}

#relatedVideosContent div.video div.relatedSnapshot a:hover img {
  border: double #777 3px;
}

#relatedVideosContent div.video div.relatedSnapshot div.length {
  margin: auto;
  text-align: center;
  width: 35px;
  background: #000;
  color: #fff;
  position: relative;
  top: -62px;
  _top: -59px;
  left: -30px;
  font-size: 9px;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

#relatedVideosContent div.video div.relatedSnapshot div.length a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

#relatedVideosContent div.video div.relatedCreador {
}

#relatedVideosContent div.video div.relatedCreador a {
  color: #333;
  text-decoration: none;
}

#relatedVideosContent div.video div.relatedCreador a:hover {
  text-decoration: underline;
}


#videoPoemaContent div.videoPoema div.moreInfo {
  width: 673px;
  float: left;
  color: #333;
  margin-left: 10px;
  _margin-left: 5px;
  padding: 5px 10px;
  background: #f5e9ee;
  border: solid #ddd 1px;
  margin-top: 10px;
  text-align: justify;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoSection {
  border-bottom: dashed #ccc 1px;
  padding: 5px 0px;
  float: left;
  width: 100%;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoSection p {
  margin: 5px 0px;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoLink {
  font-size: 12px;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoLink a {
  color: #C7064D;
  font-weight: bold;
  text-decoration: none;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoLink img {
  vertical-align: middle;
  margin-right: 3px;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoContent {
  font-size: 12px;
  margin-top: 5px;
  padding-left: 18px;
}

#videoPoemaContent div.videoPoema div.moreInfo div.moreInfoContent div.autor {
  text-align: right;
  margin-top: 15px;
}

/* Fin visualizacion do videopoema */

/* Patrocinadores dos Videopoemas */
#videoPoemaCollaborators {
  float: left;
  margin-top: 30px;
}

#videoPoemaCollaborators div.collaborator {
  margin: 5px 0px;
}

#videoPoemaCollaborators div.collaborator img {
  border: solid #777 1px;
  padding: 5px 3px;
}

/* Fin dos patrocinadores dos Videopoemas */


#mestresCenter, #polafiasCenter{
  display: none;
}

/********* MOBIL *********/
@media only screen and (max-width: 1000px) {


  html {
    width: 100%;
  }

  body{
    margin: 0;
    height:100vh;
  }

  #videoPoemaBody{
    background-color: #FFFFFFFF;
  }

  #window{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  #videoPoemaMenu{
    display: none;
  }

  #videoPoemaMainPageContent{
    width: 95vw;
    display: flex;
    flex-direction: column;

    .columnas{
      width: 95vw;
    }
  }

  #videoPoemaFooter{
    margin-top:auto;
    width: 95vw;
    color: #000000FF;
    padding-top: 10px;
    margin-bottom:20px;

    a{
      color: #000000FF;
    }
  }

  #windowHeader{
    width: 100vw;
    margin-top:0;
    margin-bottom:20px;

  }

  #videoPoemaHeader{
    width: 100vw;
    margin-top:0;
    .textAELG {
      width: 30vw!important;
      margin-top:1vw!important;
    }
    .linkAELG{
      width: 50vw;
    }
  }


  #languageLinks{
    display: none;
  }


  #videoPoemaCenterDiv {
    width: 90vw;
  }

  #videoPoemaRightDiv {
    width: 90vw;
    float: none;
  }

  #windowContent {
    width: 90vw;
    margin-top:0;
  }

  #mestresCenter, #polafiasCenter {
    width: 90vw;
    padding:0;
    display: block;
    float: left;
    margin-top: 10px;

    div {
      &.header div {
        &.content {
          background: $pf_color_6;
          height: 20px;
          border: solid $color_9 1px;
          margin: 0px;
          padding: 2px;
          border-radius: 6px;
          line-height: 20px;

          div.title {
            color: $color_titulos;
            font-size: 14px;
            font-weight: bold;
            padding-left: 10px;
            a{
              text-decoration:none;
              color:unset;
            }
          }
        }

      }

      &.genres {
        float: left;
        color: $color_titulos;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 90vw;
        margin-left:1vw;
        margin-top: 5px;
      }

      &.genre {
        margin-top: 2px;
        float: left;

        div {
          &.name {
            background: $color_fondos;
            border: solid $color_bordes 1px;
            padding: 3px 6px;
            float: left;
            width: 85vw;

            img {
              vertical-align: middle;
              margin-bottom: 2px;
              margin-right: 2px;
            }

            a {
              color: $pf_color_2;
              font-size: 12px;
              font-weight: bold;
              text-decoration: none;
              display: block;
            }
          }

          &.videos {
            float: left;
            padding: 5px 0px 10px 0px;

            div.video {
              width: 85vw;
              padding-left: 0;
              background: $color_blanco;
              margin: 5px;
              float: left;
              border-bottom: dashed $color_9 1px;

              div {
                &.snapshot {
                  width: 105px;
                  margin: auto;
                  float: left;
                  padding: 5px;

                  a {
                    img {
                      border: double #999999FF 3px;
                    }

                    &:hover img {
                      border: double #777777FF 3px;
                    }
                  }

                  div.length {
                    text-align: center;
                    width: 35px;
                    background: #000000FF;
                    color: #FFFFFFFF;
                    position: relative;
                    top: -62px;
                    _top: -59px;
                    left: 3px;
                    font-size: 9px;
                    filter: alpha(opacity = 60);
                    opacity: 0.6;

                    a {
                      color: #FFFFFFFF;
                      font-weight: bold;
                      text-decoration: none;
                    }
                  }
                }

                &.info {
                  width: 60vw;
                  float: left;
                  margin: 3px 5px;
                  font-size: 12px;
                  color: #333333FF;

                  a {
                    color: #333333FF;
                    font-size: 12px;
                  }

                  div {
                    &.videoTitle {
                      margin-bottom: 3px;

                      a {
                        color: #003C78FF;
                        font-size: 12px;
                        font-weight: bold;
                        text-decoration: none;
                      }
                    }

                    &.polafia a, &.reporter a {
                      font-style: italic;
                      text-decoration: none;

                      &:hover {
                        text-decoration: underline;
                      }
                    }

                    &.visits {
                      clear: both;
                      margin-bottom: 3px;
                    }

                    &.rating {
                      width: 60px;
                      float: left;

                      img {
                        vertical-align: middle;
                        margin-bottom: 2px;
                      }
                    }

                    &.numVotes {
                      font-size: 10px;
                      font-style: italic;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #latestVideoPoemas{
    width: 90vw;
    padding:0;
  }

  #videoPoemasFiltrados .filtro {
    background: #F5E9EE;
    width: 90vw;
    padding: 10px 0px;
    margin: 10px auto;
    text-align: center;
    border: solid #DD9FB6 1px;
  }

  #videoPoemasFiltrados {
    width: 90vw;
    padding:0;
  }

  #videoPoemaPublications{
    width: 90vw;

    div.header{
      width: 90vw;
    }

    div.publications{
      div.middle{
        width: 90vw;
      }
    }
  }

  #videoPoemaLinks{
    width: 90vw;

    div.header{
      width: 90vw;
    }

    div.links{
      div.middle{
        width: 90vw;
      }
    }
  }

  #videoPoemaCollaborators{
    width: 90vw;
    display:flex;
    flex-direction:column;
    max-width: 90vw;

    div.collaborator {
      display: inline-block;
      text-align: center;
    }
  }

  #videoPoemaCollaborator{
    width: 88vw;
    margin-left: 0;
    padding-left: 1vw;
    padding-right: 1vw;
  }

  #mestresCenter {
    width: 90vw;
    padding:0;
    display: block;
    float: left;
    margin-top: 10px;

    div {
      &.header div {
        &.content {
          background: $pf_color_6;
          height: 20px;
          border: solid $color_9 1px;
          margin: 0px;
          padding: 2px;
          border-radius: 6px;
          line-height: 20px;

          div.title {
            color: $color_titulos;
            font-size: 14px;
            font-weight: bold;
            padding-left: 10px;
            a{
              text-decoration:none;
              color:unset;
            }
          }
        }

      }

      &.genres {
        float: left;
        color: #333333FF;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 90vw;
        margin-left:1vw;
        margin-top: 5px;
      }

      &.genre {
        margin-top: 2px;
        float: left;

        div {
          &.name {
            background: #EEEEEEFF;
            border: solid #CCCCCCFF 1px;
            padding: 3px 6px;
            float: left;
            width: 85vw;

            img {
              vertical-align: middle;
              margin-bottom: 2px;
              margin-right: 2px;
            }

            a {
              color: #555555FF;
              font-size: 12px;
              font-weight: bold;
              text-decoration: none;
              display: block;
            }
          }

          &.videos {
            float: left;
            padding: 5px 0px 10px 0px;

            div.video {
              width: 85vw;
              padding-left: 0;
              background: #FFFFFFFF;
              margin: 5px;
              float: left;
              border-bottom: dashed #999999FF 1px;

              div {
                &.snapshot {
                  width: 105px;
                  margin: auto;
                  float: left;
                  padding: 5px;

                  a {
                    img {
                      border: double #999999FF 3px;
                    }

                    &:hover img {
                      border: double #777777FF 3px;
                    }
                  }

                  div.length {
                    text-align: center;
                    width: 35px;
                    background: #000000FF;
                    color: #FFFFFFFF;
                    position: relative;
                    top: -62px;
                    _top: -59px;
                    left: 3px;
                    font-size: 9px;
                    filter: alpha(opacity = 60);
                    opacity: 0.6;

                    a {
                      color: #FFFFFFFF;
                      font-weight: bold;
                      text-decoration: none;
                    }
                  }
                }

                &.info {
                  width: 60vw;
                  float: left;
                  margin: 3px 5px;
                  font-size: 12px;
                  color: #333333FF;

                  a {
                    color: #333333FF;
                    font-size: 12px;
                  }

                  div {
                    &.videoTitle {
                      margin-bottom: 3px;

                      a {
                        color: #003C78FF;
                        font-size: 12px;
                        font-weight: bold;
                        text-decoration: none;
                      }
                    }

                    &.polafia a, &.reporter a {
                      font-style: italic;
                      text-decoration: none;

                      &:hover {
                        text-decoration: underline;
                      }
                    }

                    &.visits {
                      clear: both;
                      margin-bottom: 3px;
                    }

                    &.rating {
                      width: 60px;
                      float: left;

                      img {
                        vertical-align: middle;
                        margin-bottom: 2px;
                      }
                    }

                    &.numVotes {
                      font-size: 10px;
                      font-style: italic;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #videoPoemaContent{
    width: 90vw;
    padding-left: 0;
    margin: 0;

    div.header{
      width: 87vw;
      padding: 1vw;
      div.content{
        div.logo{
          height:auto;
          width: 3vw;
          padding: 0 1vw;
        }

        div.title{
          margin-left: 1vw;
        }
      }
    }

    div.videoPoema{
      width:89vw;
      div.mediaPlayerNuevo{
        width: 83vw;
        margin-left: 2vw;
        video{
          width: 83vw;
        }
      }

      div.mainInfo{
        width: 80vw;
        padding: 1vw 1.5vw;
        margin-left: 2vw;
      }
      div.statistics{
        width: 77vw;
      }
      div.moreInfo{
        width: 80vw;
        margin-left: 2vw;
        padding: 1vw 2vw;
        margin-top: 2vw;
      }
    }

  }

}

@media only screen and (min-width: 650px) and (max-width: 1000px){
  #polafiasHeader{
    margin-bottom:0;
  }
  #windowHeader{
    margin-bottom:20px;
  }

  #languageLinksMenu{
    display: none!important;
  }


}

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


  #videoPoemaHeader {
    text-align:left;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    .linkAELG{
      background-color: unset!important;
      box-shadow: none!important;
      padding-right: 0!important;
      margin-left: 55vw !important;
      .textAELG, .textSection{
        display: none;
      }
    }
  }

  #videoPoemaFooter{

    #languageLinksMenu {
      display: inline-flex;
      list-style: none;
      bottom: 0;
      padding: 0;
      margin-left: 25px;
      margin-top: 20px;
      li {
        display: flex;
        a {
          background: #A4A1A1FF;
          color: black;
          font-family: $font_arimo, $font_arial;
          font-weight: bold;
          font-size: 14px;
          border-radius: 50%;
          width: 25px;
          height: 25px;
          margin-right: 3px;
          display: block;
          text-align: center;
          line-height: 1.6em;
          &:hover {
            background: $color_7;
            text-decoration: none;
          }
        }
        &.active a {
          background: $color_7;
          text-decoration: none;
        }
      }
    }
  }
}