/*---fuentes ---*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&display=swap');



@font-face {

    font-family: 'playfair_display_scbold';

    src: url('../font/playfairdisplaysc-bold-webfont.woff2') format('woff2'),

        url('../font/playfairdisplaysc-bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



/*-- COLORES --*/

:root {

    --first-color: #E52420;

    --second-color: #707070;

    --third-color: #AAB0BB;

    --fourth-color: #000000;

    --separator-color: #D1D1D1;

    --swiper-theme-color: #788392 !important;

    --blanco: #ffffff;

    --negro: #444;

}



body {

    font-family: 'Raleway', sans-serif;

    font-size: 12px;

    margin: 0px;

    background-color: #f5f5f5;

    max-width: 768px;

    margin: auto;

    height: 1024px;

}



p {

    margin: 0px;

}



a {

  text-decoration: none;

}



.g_container {

    display: block;

    margin: auto;

    max-width: 768px;

}



.bg-white {

    background-color: #fff;

}



/*-- home ---*/

.c_home {

    position: relative;

    height: 100%;

}



.b_enter {

    position: absolute;

    top: 20px;

    right: 20px;

    text-decoration: none;

    text-align: center;

}



.h_home {

    padding-top: 30px;

    padding-bottom: 20px;

    text-align: center;

}



.h_home img {

  width: 160px;

  height: auto;

}



.rojo {

    color: var(--first-color);

}



.gris {

    color: var(--second-color);

}



.redes {

    display: flex;

    flex-direction: row;

    align-content: center;

    justify-content: center;

    align-items: center;



}



.redes img {

  margin: 15px;

  height: 28px;

  width: auto;

}



.botones {

  margin: 15px;

}



.botones1, .botones2 {

  display: flex;

  flex-direction: row;

  align-content: center;

  justify-content: space-between;

  align-items: center;

}



.botones1 a, .botones2 a  {

    display: block;

    width: 100%;

    text-align: center;

    border: 1px solid var(--first-color);

    background-color: var(--blanco);

    color: var(--negro);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    padding: 15px 5px;

    margin:5px;

}



.botones1 a.tipo1  {

    border: 1px solid var(--first-color);

    background-color: var(--first-color);

    color: var(--blanco);

}



.elementos {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  margin-top: 20px;



}

.fijada .elemento {
  padding: 30px 15px;
}



.elemento {

  margin-left:20px;

  margin-right:20px;

  margin-bottom: 10px;

  position: relative;

  height: 100px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: left;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

}



.elemento img {

  width: 100px;

  height: auto;

}



.elemento h2 {

  font-size: 17px;

  color: var(--negro);

  font-weight: 400;

  margin:0;

  padding: 0;

  line-height: 18px;

}



.elemento h3 {

  font-size: 12px;

  color: var(--third-color);

  font-weight: 400;

  margin: 0;

  padding: 0;

  line-height: 12px;

  margin-top: 5px;

}



.flecha {

  position: absolute;

  bottom: 0;

  right: 0;

  width:30px;

  height: 30px;

}



.flecha svg {

  width:30px;

  height: 30px;

}



.card {

  border: 1px solid var(--first-color);

  background-color: var(--blanco);

  width: 100%;

  padding: 10px;

  padding-right: 35px;

  margin-left: 10px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.cardfijada {

  border: 1px solid var(--first-color);

  background-color: #ffffffe6;

  width: 100%;

  padding: 20px;

  margin: 10px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.cardfijada h2 {

  color: var(--first-color);

  font-weight: 600;

  line-height: 25px;

}



.cardfijada h3 {

  background: #ffffff;

  padding: 1px 10px;

  color: var(--negro);

  border: 1px solid var(--first-color);

  line-height: 20px;

  text-align: center;

}



/*-- RESPONSIVE --*/



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





    body {

        height: 100vh;

    }



    .elementos {

      flex-direction: row;

      flex-wrap: wrap;

      margin-left: 0;

      margin-right: 0;

      padding-left: 20px;

      padding-right: 20px;

    }



    .elementos a {

      flex: 0 0 calc(50% - 5px);

    }



    .elementos a.fijada {

      flex: 0 0 100% !important;

    }



    .elemento {

      margin-left: 0;

      margin-right: 0;

    }



}