*:focus {
  outline: none;
}

body {
  margin-top: 70px;
  background-color: #f4f4f4;
  font-family: 'Raleway', sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
p,
a,
span {
  color: #fff;
}

span.boton {
	font-family: 'flexa-compressedBold', sans-serif !important; /* Usa comillas si el nombre contiene caracteres especiales o espacios */
	text-transform: uppercase;
	font-size: 22px;
}


span.desde {
	font-size: 22px;
}


h1 {
  font-size: 2.5em;
}

p {
  font-size: 1.5em;
  line-height: 25px;
}

button {
  border: 0;
  border-radius: 999px;
  padding-bottom: 2px;
}

.container,
.flip-box,
.front,.back {
  width: 100%;
  height: 350px;
}

.container,
.flip_box {
  position: relative;
}

.front,
.back {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.container {
  -moz-transform: perspective(1200px);
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.flip_box1,.flip_box2,.flip_box3,.flip_box4,.flip_box5,.flip_box6,.flip_box7,.flip_box8,.flip_box9,.flip_box10,.flip_box11,.flip_box12,.flip_box13,.flip_box14,.flip_box15,.flip_box16,.flip_box17,.flip_box18
,.flip_box19,.flip_box20,.flip_box21,.flip_box22,.flip_box23,.flip_box24 {
  transition: all 0.5s ease-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.f_title {
    padding-top: 26px;
    padding-left: 26px;
    font-size: 30px;
    font-family: 'flexa-compressedBold', sans-serif;
    text-transform: uppercase;
    line-height: 28px;
}

.f_subline {
  padding-top: 205px;
  color: #B1D4E8;
}

.f_headline {
  transform: rotate(-90deg);
  position: absolute;
  left: 190px;
  top: 80px;
  font-family: open_sansregular,sans-serif;
}

.back {
  background: url("../images/back2.jpg") no-repeat;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.b_headline {
  padding-top: 50px;
}

.b_text {
  font-size: 14px;
  line-height: 19px;
  padding-top: 10px;
  text-align: center;
  padding: 45px 20px;
}

.b_button {
  position: auto;
  left: 56px;
  bottom: 112px;
  width: 150px;
  height: 43px;
  background-color: #ff002d;
  transition: all 0.3s;
  margin-top: 25px;
}

.b_button:hover {
  background-color: #b30000;
}

.flipped {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.r_wrap,.r_wrap2,.r_wrap3,.r_wrap4,.r_wrap5,.r_wrap6,.r_wrap7,.r_wrap8,.r_wrap9,.r_wrap10,.r_wrap11,.r_wrap12,.r_wrap13,.r_wrap14,.r_wrap15,.r_wrap16,.r_wrap17,.r_wrap18,.r_wrap19,.r_wrap20,.r_wrap21,.r_wrap22,.r_wrap23,.r_wrap24 {
  position: absolute;
  right: 40px;
  bottom: 38px;
}

.b_round,
.s_round,.s2_round,.s3_round,.s4_round,.s5_round,.s6_round,.s7_round,.s8_round,.s9_round,.s10_round,.s11_round,.s12_round,.s13_round,.s14_round,.s15_round,.s16_round,.s17_round,.s18_round,.s19_round,.s20_round,.s21_round,.s22_round,.s23_round,.s24_round {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: all 0.2s linear;
}

.b_round,.b_round1,.b_round2,.b_round3,.b_round4,.b_round5,.b_round6,.b_round7,.b_round8,.b_round9,.b_round10,.b_round11,.b_round12,.b_round13,.b_round14,.b_round15,.b_round16,.b_round17,.b_round18,.b_round19,.b_round20,.b_round21
,.b_round22,.b_round23,.b_round24 {
  opacity: 0;
  background-color: #ffffff;
}

.b_round_hover,.b_round_hover1,.b_round_hover2,.b_round_hover3,.b_round_hover4 {
  transform: scale(1.37);
  opacity: 0.4;
}

.b_round_back_hover {
  background-color: #ffffff;
}

.s_round_click {
  transform: scale(1.7);
}

.s_round_back {
  background-color: #ffffff;
}

.s_arrow,.s_arrow1,.s_arrow2,.s_arrow3,.s_arrow4,.s_arrow5,.s_arrow6,.s_arrow7,.s_arrow8,.s_arrow9,.s_arrow10,.s_arrow11,.s_arrow12,.s_arrow13,.s_arrow14,.s_arrow15,.s_arrow16,.s_arrow17,.s_arrow18,.s_arrow19,.s_arrow20,.s_arrow21,.s_arrow22,.s_arrow23,.s_arrow24 {
  width: 52px;
  height: 52px;
  background-image: url("../images/arrow.png");
  background-color: transparent;
  transition: all 0.35s linear;
}

.s_arrow_rotate {
  transform: rotate(-180deg);
}