:root{
  --principal: #e0e0e0;
  --secondary: #ed3833;
  --terciary: rgba(255,255,255, .3);
  --bkg-color: #000225;
  --bkg-modal-color: rgba(0, 2, 36, .9);
  --max-content: 1000px;
  --font-size: 16px;
  --tripas: rgba(255,255,255, .1);
}
@font-face{
  font-family: 'Titulo';
  src: url('../fonts/RobotoCondensed-Bold.ttf');
}
@font-face{
  font-family: 'Texto';
  src: url('../fonts/BigShouldersDisplay-Regular.ttf');
}
@font-face {
  font-family: 'Bold';
  src: url('../fonts/BigShouldersDisplay-Bold.ttf');
}
html{
  box-sizing: border-box;
  font-family: var(--main-font);
  font-size: var(--font-size);
  scroll-behavior: smooth;
}
*,
*::before,
*::after{
  box-sizing: inherit;
}
body{
  margin: 0;
  cursor: url(../img/c-default.png), auto;
  background-color: var(--bkg-color);
  overflow-x: hidden;
  font-size: var(--font-size);
}
section,
footer{
  width: 85%;
  margin: 0 auto;
}
section{
  overflow-x: hidden;
  padding: 80px 0;
}
img{
  max-width: 100%;
  height: auto;
}
h1,h2{
  font-family: 'Bold';
  font-size: 4.5rem;
  text-align: center;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--secondary);
}
h3{
  font-family: 'Titulo';
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--principal);
}
ul{
  padding: 0;
  list-style: none;
}
p, li, a, span{
  font-family: 'Texto';
  color: var(--principal);
  font-size: 1.25rem;
  margin: 0;
}
b{
  /*font-family: 'Bold';*/
  font-weight: bold;
  color: var(--principal);
  font-size: 1.25rem;
}
a{
  text-decoration: none;
  cursor: url(../img/c-pointer.png), auto;
}
i{
  margin-right: 5px;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  padding: 10px 0;
  border: 1px solid var(--secondary);
  transition: all .5s ease;
}
.btn:hover{
  background-color: var(--terciary);
  border: 1px solid var(--principal);
  color: var(--bkg-color);
}
.btn i{
  margin-left: 10px;
  margin-right: 0;
  font-size: 1rem;
}
@media(min-width: 768px){
  section{
    width: 100%;
  }
  h1,h2{
    font-size: 10rem;
    -webkit-text-stroke: 2px var(--secondary);
  }
  p,li,a,span,b,h3{
    font-size: 1.125rem;
  }
  .btn{
    width: auto;
    padding: 10px 50px;
  }
  .wrapp{
    width: 100%;
    max-width: var(--max-content);
    margin: 0 auto;
  }
}



/* FADE */
.img__fade{
  opacity: 0;
  transition: all .8s;
}
.transform_show{opacity: 0;}
.transform_up{transform: translateY(30%)}
.transform_down{transform: translateY(-30%)}
.transform_left{transform: translateX(30%)}
.transform_right{transform: translateX(-30%)}

.img__aparece{
  opacity: 1;
  transform: none;
}