/*#########################################################
###########################################################
###              user-top / subtopic-content              #####
###########################################################
#########################################################*/

.subtopic-top {
    background-color: #808080;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 2;
}

.subtopic-content{
  position: absolute;
  width: 100% !important;
  bottom: 0;
  background-color: #FFF;
}

/* Computer */
@media only screen and (min-width:1025px){ 
  .subtopic-top {
      height: 10vh;
  }
  .subtopic-content{
    height: 90vh;
  }
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
  .subtopic-top {
      height: 10vh;
  }
  .subtopic-content{
    height: 90vh;
  }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  .subtopic-top {
      height: 8vh;
  }
  .subtopic-content{
    height: 92vh;
  }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .subtopic-top {
      height: 14vh;
  }
  .subtopic-content{
    height: 86vh;
    top: 14vh;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .subtopic-top {
      height: 10vh;
  }
  .subtopic-content{
    height: 90vh;
    top: 10vh;
  }
}


/*#########################################################
###########################################################
###               subtopic-picture-button                #####
###########################################################
#########################################################*/

.subtopic-picture {   
    position: relative;
    height: inherit;
    border: 0;
    outline:0;
    background-color: transparent;
    float:right;
}


.subtopic-picture > img {
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: #CCC;
  outline:0;
  height: 70%;
}

.subtopic-picture:hover >img  {
   outline:0;
   height: 80%;
}


.subtopic-picture:active> img  {
   outline:0;
   height: 90%;
}

/*#########################################################
###########################################################
###                       Spin                        #####
###########################################################
#########################################################*/

.spin {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0 ;
    right: 0;
    overflow: hidden;
    background-color: #FFF;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%     Botones pequeños     %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.subtopic-buttonMenuTop {   
    position: absolute;
    height: inherit;
    border: 0;
    outline:0;
    background-color: transparent;
}


.subtopic-buttonMenuTop > img {
  outline:0;
  height: 90%;
}


.subtopic-buttonMenuTop:hover >img  {
   outline:0;
   height: 100%;
}


.subtopic-buttonMenuTop:active> img  {
   outline:0;
   height: 110%;
}

/*#########################################################
###########################################################
###                    otros                          #####
###########################################################
#########################################################*/


.text1Subtopic > h1 {
  position: relative;
  top:10px;
  bottom:0px;
  width: 100%;
  color:#000;
  font-family: 'Dosis', sans-serif;
  font-weight: 200;
  font-size: 40px;
  outline:0;
  margin:0;
}



.imageThemeSubtopic {   
    position: relative;
    background-color: transparent; 
    border: 0;
    border-width: 10px; 
    outline:0;
    z-index: 1;

    cursor:pointer;

}


.imageThemeSubtopic > img {
  background-color: #F2F2F2;
  border-radius: 20%;
  border-style: solid;
  border-width: 5px;
  border-color: #CCC;
  outline:0;
}



.imageThemeSubtopic:hover >img  {
   background: #FFF;
   outline:0;
}


.imageThemeSubtopic:active> img  {
   background: #F2F2F2 ;
   outline:0;
}


.lineEnd {
    background-color: #CCC;
    position: absolute;
    left: 70%;
    top: 50%;
    height: 5px;
    width: 60%;
    z-index: -1;
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         PORTRAIT       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



@media only screen and (orientation: portrait) {

    .subtopic-content {
        overflow-y: scroll;
        padding-top: 7vh;
    }


    .imageThemeSubtopic {   
          height: 20vh;
          width: 100vw;
          left:0 ;
          margin-bottom: 6vh;
      }


    .imageThemeSubtopic > img {
        float:left;
        width: 30%; 
        margin-left: 10vw; ;
        border-radius: 10%;
      }


    .lineEnd {
        background-color: #CCC;
        float:left;
        left: 25%;
        top: 80%;
        height: 20vh;
        width: 5px;
        z-index: -1;
    }

    .text1Subtopic  {
      position: absolute;
      height: 20vh;
      width: 30vw;
      left: 40vw;
      top:0px;
      width: 50%;
      color:#000;
    }

    .text1Subtopic > h1 {
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
    }


}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         PORTRAIT       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



@media only screen and (orientation: landscape) {

    .subtopic-content{
        overflow-x: scroll;
        padding-left: 10vw;
        padding-right: 30vw;
        height:90wh;

        white-space:nowrap;
        overflow-x:scroll;
    }


    .imageThemeSubtopic {  
          height: 90vh;
          width: 20vw;
          left:0 ;
          margin-right: 10vw;
          display:inline-block

      }


    .imageThemeSubtopic > img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%; 
        border-radius: 10%;
      }


    .lineEnd {
        top: 43%;
        left:90%;
        height: 5px;
        width: 15vw;
        z-index: -1;
    }


}

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

  .text1Subtopic > h1 {
        font-size: 25px;
    }
    
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         ANIMATIONS      %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



/* Animation */

.subtopic-animation {
    -webkit-animation: subtopic-animation-movement 1s;  /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation: subtopic-animation-movement 1s;
    animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes subtopic-animation-movement {
    from { transform: none; }
    50% { transform: scale(1.02); }
    to { transform: none; }
}

@keyframes subtopic-animation-movement {
    from { transform: none; }
    50% { transform: scale(1.02); }
    to { transform: none; }
}