/**
Inicio de las fuentes
*/

@font-face {
    font-family: "Arapey-Regular";
    src:
      url("../fonts/Arapey-Regular.eot?#iefix") format("embedded-opentype"),
      url("../fonts/Arapey-Regular.woff") format("woff"),
      url("../fonts/Arapey-Regular.ttf")  format("truetype"),
      url("../fonts/Arapey-Regular.svg#Arapey-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "JosefinSans-Regular";
    src:
      url("../fonts/JosefinSans-Regular.eot?#iefix") format("embedded-opentype"),
      url("../fonts/JosefinSans-Regular.woff") format("woff"),
      url("../fonts/JosefinSans-Regular.ttf")  format("truetype"),
      url("../fonts/JosefinSans-Regular.svg#JosefinSans-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "JosefinSans-Bold";
    src:
      url("../fonts/JosefinSans-Bold.eot?#iefix") format("embedded-opentype"),
      url("../fonts/JosefinSans-Bold.woff") format("woff"),
      url("../fonts/JosefinSans-Bold.ttf")  format("truetype"),
      url("../fonts/JosefinSans-Bold.svg#JosefinSans-Bold") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "JosefinSans-SemiBold";
    src:
      url("../fonts/JosefinSans-SemiBold.eot?#iefix") format("embedded-opentype"),
      url("../fonts/JosefinSans-SemiBold.woff") format("woff"),
      url("../fonts/JosefinSans-SemiBold.ttf")  format("truetype"),
      url("../fonts/JosefinSans-SemiBold.svg#JosefinSans-SemiBold") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "JosefinSans-Light";
    src:
      url("../fonts/JosefinSans-Light.eot?#iefix") format("embedded-opentype"),
      url("../fonts/JosefinSans-Light.woff") format("woff"),
      url("../fonts/JosefinSans-Light.ttf")  format("truetype"),
      url("../fonts/JosefinSans-Light.svg#JosefinSans-Light") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  *,
  a,
  p,
  h1,
  h2,
  h3,
  h4,
  a:hover {
    margin: 0;
    padding: 0;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  
  .text-JosefinSans-Regular {
    font-family: "JosefinSans-Regular", Arial, Helvetica, sans-serif !important;
  }
  
  .text-arapey-regular {
    font-family: "Arapey-Regular", Arial, Helvetica, sans-serif !important;
  }
  
  .text-josefin-Bold {
    font-family: "JosefinSans-Bold", Arial, Helvetica, sans-serif !important;
  }
  
  .text-josefin-SemiBold {
    font-family: "JosefinSans-SemiBold ", Arial, Helvetica, sans-serif !important;
  }
  
  .text-josefin-Light {
    font-family: "JosefinSans-Light", Arial, Helvetica, sans-serif !important;
  }
  
  .text-dark-gray {
    color: #3b3b3b;
  }
  
  .text-ligth-gray {
    color: #626262;
  }
  
  .font-69 {
    font-size: 55px;
  }
  
  .font-38 {
    font-size: 38px;
  }
  
  .font-30 {
    font-size: 30px;
  }
  
  .font-27 {
    font-size: 27px;
  }
  
  .font-15 {
    font-size: 15px;
  }
  
  .font-9 {
    font-size: 9px;
  }
  
  /**
  Final fuentes
  */
  
  /**
  Inicio background
  */
  
  .bg-dark-gray {
    background: #3b3b3b;
  }
  
  .bg-ligth-gray {
    background: #626262;
  }
  
  /**
  Final background
  */
 
  .title-splash {
    padding-top: 9px;
  }
  
  .subtitle-splash {
    padding-top: 11px;
  }
  
  .background-splash {
    background: url("../images/background-big.png") no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: 100%;
    padding: 20px 0;
    position: relative;
    min-height: 100vh;
  }
  
  .wrap-align-vertical {
    position: absolute;
    right: 20px;
  }
  
  .align-vertical {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    height: 62%;
  }

  .align-vertical p {
    margin: 0;
    height: 101%;
  }
  
  .content-contact,
  .content-rrss {
    padding-top: 4.5%;
  }

  .content-contact p,
  .content-rrss p {
    margin-bottom: 0;
  }

  .content-contact h2,
  .content-rrss h2 {
    padding-bottom: 20px;
  }
  
  .content-rrss ul { 
    margin-left: 0;
    list-style: none;
  }
  .content-rrss ul li { 
    display: inline-block;
    text-align: center;
    padding-right: 8px;
    cursor: pointer;
  }

  .content-rrss ul li:hover a { 
    color: #0f2554;
  }
  .content-rrss ul li:hover span,
  .content-contact p:hover span { 
    background: #0f2554;
  }
  
  .icon-splash {
    color: white;
    border-radius: 50%;
    width: 31px;
    height: 31px;
    text-align: center;
    font-size: 19px !important;
    padding: 6px;
    vertical-align: text-bottom;
    margin-right: 9px;
  }

  .m100vh {
    min-height: 100vh;
  }
  
  @media (max-width: 1500px) {
    .wrap-image-splash {
      max-width: 51%;
    }
  }
  
  @media (max-width: 1199.98px) {
    .wrap-image-splash {
      max-width: 50%;
    }
  
    .font-30 {
      font-size: 26px;
    }
  
    .font-27 {
      font-size: 22px;
    }
  
    .font-69 {
      font-size: 50px;
    }
  
    .font-38 {
      font-size: 26px;
    }
  
    .content-contact h2,
    .content-rrss h2 {
      padding-bottom: 12px;
    }
  }
  
  @media (max-width: 991.98px)  {
    .section-splash {
      height: 100%;
      overflow: auto;
    }
  
    .wrap-image-splash {
      max-width: 75%;
    }
  
    .font-69 {
      font-size: 35px;
    }
  
    .font-38 {
      font-size: 19px;
    }
  
    .font-27 {
      font-size: 16px;
    }
  
    .content-rrss {
      max-width: 450px;
      text-align: center;
    }
  }
  
  @media (max-width: 767.98px) {
    .wrap-image-splash {
      max-width: 90%;
    }
  
    .section-splash {
      height: 100%;
      overflow: auto;
    }
  
    .content-rrss {
      max-width: 100%;
      text-align: center;
    }
  
    .font-27 {
      font-size: 20px;
    }
  
    .content-contact {
      text-align: center;
    }

    .content-contact   
    .icon-splash {
      display: block;
      max-width: 31px;
      width: 100%;
      left: 0;
      right: 0;
      margin: auto;
      margin-bottom: 10px;
    }

    .font-69 {
      font-size: 25px;
    }
  }
  