@import url('https://fonts.googleapis.com/css2?family=Lora&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
	font-family: poppins, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	color: #000;
}

footer{
 background: #3d3d3d;
 color: #fff;
}
header{
  background: #ed1c24;
  position: fixed;
  width: 100%;
  z-index: 100;
  border-bottom: 3px solid #3d3d3d;
}
.logoExpansion{
  height: 30px;
  margin: 0.5rem 0rem;
}
 
/*Header*/
.oper {
  background-image: url(../img/portada-uber.jpg);
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top;
  max-height: 800px;
}

.tit1 {
  text-align: center;
  font-family: montserrat, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 5vw;
  padding: 18% 0px 20% 0px;
  color: #fff;
  text-shadow: 0px 0px 20px #000;
  text-transform: uppercase;
  margin-bottom: 0px;
}
/*Header*/

.back1{
  background-color: #1a1a1a;
  color: #ffffff;
}

.back2{
  background-color: #06c167;
  color: #ffffff;
}

/*--button--*/
button.mas {
 padding: 0.5em 2em;
 border: 2px solid #ed1c24;
 position: relative;
 overflow: hidden;
 background-color: transparent;
 text-align: center;
 text-transform: uppercase;
 font-size: 16px;
 transition: .3s;
 z-index: 1;
 font-family: inherit;
 color: #fff;
}

button.mas::before {
 content: '';
 width: 0;
 height: 300%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(45deg);
 background: #ed1c24;
 transition: .5s ease;
 display: block;
 z-index: -1;
}

button.mas:hover::before {
 width: 105%;
}

button.mas:hover {
 color: #fff;
}
/*--button--*/
h3{
  font-family: montserrat, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #06c167;
}
.intro{
  font-size: 1.2rem;
  background: #3d3d3d;
  color: #fff;
}
.cita{
  font-style: italic;
  color: #06c167;
  font-size: 1.5rem;
}
.fg{
    background: #f1f1f1;
    border-radius: 15px;
}
.citfg{
    background: #06c167;
    border-radius: 15px;
    padding: 2%;
}

.autor{
  font-size: 0.9rem;
  color: #1a1a1a;
}
.carousel-caption{
  position: static;
  text-align: center;
  padding: 0% 15%;
}
.cuotes{
  background: #f1f1f1;
  padding: 1rem 0rem;
}
.mesa{
  padding: 3%;
  background: #f1f1f1;
  border-radius: 10px;
}
.ponente{
  font-size: 0.9rem;
}

/*--------Flip card------------*/
.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  
  .middle {
    display: table-cell;
    vertical-align: middle;
  }
  
  .inner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* Whatever width you want */
  }

.flip-card {
    margin: auto;
    padding: 10px;
    background-color: transparent;
    perspective: 1000px;
    width: 20rem;
    height: 20rem;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card-back {
    
    background-color: #ffffff;
   
    transform: rotateY(180deg);
  }
  .espacio{
    padding: 0px;
  }
  .redondo{
    border-radius: 20px;
  }
  @media only screen and (max-width: 1800px) {

    .tit1 {
 
  font-size: 4vw;
  padding: 25% 0px 20% 0px;

  }

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

    .flip-card {
    width: 20rem;
      height: 20rem;
  }

}

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

    .flip-card {
    width: 15rem;
    height: 15rem;
  }

}

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

 
    .flip-card {
    width: 20rem;
      height: 20rem;
  }

  .oper {
  background-image: url(../img/portada-m.jpg);}

  .tit1 {
  text-align: center;
  font-family: montserrat, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8vw;
  padding: 18% 0px 20% 0px;
  color: #fff;
  text-shadow: 0px 0px 20px #000;
  text-transform: uppercase;
  margin-bottom: 0px;
}
h3{
  font-family: montserrat, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #06c167;

}
/*--------Flip card------------*/