/* escritorio____________________*/
@font-face {
    font-family: 'tracy_queen_personal_use_onRg';
    src: url('../../fonts/tracyqueen_personal_use_only-webfont.eot');
    src: url('../../fonts/tracyqueen_personal_use_only-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/tracyqueen_personal_use_only-webfont.woff2') format('woff2'),
         url('../../fonts/tracyqueen_personal_use_only-webfont.woff') format('woff'),
         url('../../fonts/tracyqueen_personal_use_only-webfont.ttf') format('truetype'),
         url('../../fonts/tracyqueen_personal_use_only-webfont.svg#tracy_queen_personal_use_onRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

.hero {
    background-image: url(../images/flaminguettes.gif);
    background-repeat: no-repeat;
    background-position: center top;
    max-width: 1200px;
    width: 100%;
    height: 740px;
    overflow: hidden;
    margin: 0 auto;
}

.rainbow-text {
    font-family: 'tracy_queen_personal_use_onRg';
    font-size: 15vw;
    margin: 50px;
    text-align: center;
}

.rainbow-text .char { 
  
    color: hsl(
      calc(360deg * var(--char-percent)
      ), 
      90%, 
      65%
    );
   
  }
  
  .rainbow-text.animated .char {
    animation: rainbow-colors 2s linear infinite;
    animation-delay: calc(-2s * var(--char-percent));
  }
  /* Unfortunately, browsers try to take the shortest distance between transition/animation properties, so a simple `0turn` to `1turn` doesn't get the proper effect. */
  @keyframes rainbow-colors {
    0% { color: #a17096; }
    10% { color: #99b3a2; }
    20% { color: #154d52; }
    30% { color: #edde3e; }
    40% { color:#e25555; }
    50% { color: #fdeae9; }
    60% { color: #a17096; }
    70% { color: #99b3a2; }
    80% { color: #0c507f; }
    90% { color: #edde3e; }
    1000% { color:#e25555; }
   

  }
  

.fotoizquierda {
    grid-column: 2/7;
}

.fotoderecha {
    grid-column: 7/12;
}

.columnaizquierda {
    grid-column: 3/7;
    margin-right: 24px;
}

.columnaderecha {
    grid-column: 7/11;
    margin-left: 24px;
}








/* responsive _________________ */
@media (max-width:768px){
  
  .fotoizquierda {
    grid-column: 1/-1;
}

.fotoderecha {
    grid-column: 1/-1;;
}

.columnaizquierda {
    grid-column: 1/-1;
    margin-right: 0;
    margin-top: 2rem;
}

.columnaderecha {
    grid-column: 1/-1;
    grid-row: 2/3;
    margin-top: 2rem;
    margin-left: 0;
}
.rainbow-text {
        
    font-size: 12vw;
  
}
}



/*Resoluciones mayores a 1200 */
@media screen and (min-width: 1200px) {
    .rainbow-text {
        
        font-size: 180px;
      
    }


}