/*#########################################################
###########################################################
###              user-top / topic-content              #####
###########################################################
#########################################################*/

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

.topic-content{
  position: absolute;
  width: 100vw;
  bottom: 0;
  background-color: #FFF;
}



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

/* Portatil computer */
@media only screen and (min-width:1025px) and (max-width:1400px) and (orientation:landscape){ 
  .topic-top {
    height: 10vh;
  }
  .topic-content{
    height: 90vh;
  }
}

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

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


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

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


/*#########################################################
###########################################################
###               topic-picture-button                #####
###########################################################
#########################################################*/

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


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

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


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

/*#########################################################
###########################################################
###               topic-picture-button                #####
###########################################################
#########################################################*/

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

.spin-wait {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0 ;
    right: 0;
    overflow: hidden;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%  Estructuras principales %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

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

.imageTheme {   
    position: absolute;
    background-color: transparent; ;
    border: 0;
    border-width: 10px; 
    outline:0;

    cursor:pointer;

}

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


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


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


/*#########################################################
###########################################################
###                     Animation                     #####
###########################################################
#########################################################*/


/* Animation */

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

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

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


/* Animation */

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

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

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