*
  margin: 0
  padding: 0
  box-sizing: border-box
  ::-webkit-scrollbar
    width: 8px
  ::-webkit-scrollbar-track
    background: #fff
    background: #000000
  ::-webkit-scrollbar-thumb
    -webkit-border-radius: 10px
    background: #EC1A2D
html,
body
  background-color: #fff
  // font-family: 'Monserrat', sans-serif
  font-family: 'Poppins', sans-serif
main
  margin-left: 210px
  margin-top: 69px
  @media (max-width: 840px)
    margin-left: 50px
    margin-top: 53px
.layout
  padding: 15px 0 85px
  @media (max-width: 840px)
    padding: 15px 0
ul
  list-style: none
a
  text-decoration: none
  &:hover, &:focus
    text-decoration: none
  @extend %animacion-suave
.d-none
  display: none
.dn
  display: none
.btn-danger
  background-color: #F20000
  border-color: #F20000
  &:hover
    background-color: #990000
  &:active
    background-color: #990000

.clear 
  clear: both

.overflow-hidden
  overflow: hidden

// Contenedores
div[class^='cont-'], div[class*=' cont-']
  width: 100% 
  margin: 0 auto
  padding: 0  15px

.cont-x100
  max-width:  100%
.cont-1300 
  max-width:  1300px 
.cont-1170 
  max-width:  1170px 
.cont-990 
  max-width:  990px 
.cont-975 
  max-width:  975px 
.cont-840 
  max-width:  840px 
.cont-768 
  max-width:  768px 
.cont-710 
  max-width:  710px 
.cont-680
  max-width:  680px 
.cont-550 
  max-width:  550px

.w-100
  width: 100%
.w-75
  width: 75%
.w-50
  width: 50%
.w-25
  width: 25%

  // F l e x B o x
.flex-row
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: flex-start
.flex-row-r
  display: flex
  flex-direction: row-reverse
  justify-content: space-between
  align-items: center
.flex-column
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: center
.flex-column-r
  display: flex
  flex-direction: column-reverse
  justify-content: space-between
  align-items: center
.just-start
  justify-content: flex-start
.just-end
  justify-content: flex-end
.just-between
  justify-content: space-between
.just-center
  justify-content: center
.align-center
  align-items: center
.align-start
  align-items: flex-start
.align-end
  align-items: flex-end
.wrap
  flex-wrap: wrap
.self-start
  align-self: flex-start
.self-end
  align-self: flex-end
.self-center
  align-self: center
.text-center
  text-align: center
.text-left
  text-align: left
.text-right
  text-align: right
.mx-auto
  margin-left: auto
  margin-right: auto
.font-weight-bold
  font-weight:700 !important
.font-weight-bolder
  font-weight:900 !important
.font-weight-smibold
  font-weight:600 !important
.fw-medium
  font-weight:500 !important

.separador
  width: 100%
  height: 3px
  margin-bottom: 1rem
  background: linear-gradient(90deg, rgba(0,0,0,1) 3%, rgba(139,30,30,1) 69%, rgba(210,10,10,1) 100%)
  // Transiciones
%animacion-suave 
  -webkit-transition: all .35s ease-in-out
  -moz-transition: all .35s ease-in-out
  -o-transition: all .35s ease-in-out
  -ms-transition: all .35s ease-in-out
  transition: all .35s ease-in-out

%animacion-lenta
  -webkit-transition: all .55s ease-in-out
  -moz-transition: all .55s ease-in-out
  -o-transition: all .55s ease-in-out
  -ms-transition: all .55s ease-in-out
  transition: all .55s ease-in-out

.btn-rojo
  background: #F20000
  border: solid 1px #F20000
  color: #ffffff
  text-transform: uppercase
  font-size: 15px
  padding: 5px 35px
  margin: 15px
  font-weight: 600
  border-radius: 8px
  letter-spacing: 1px
  cursor: pointer
  display: inline-block
  transition: all .35s ease-in-out
  &:hover
    background: inherit
    color: #ffffff
.btn-verde
  background: #2AB51E
  border: solid 1px #2AB51E
  color: #ffffff
  text-transform: uppercase
  font-size: 15px
  padding: 5px 35px
  margin: 10px
  font-weight: 600
  border-radius: 5px
  letter-spacing: 1px
  cursor: pointer
  display: inline-block
  transition: all .35s ease-in-out
  &:hover
    background: transparent
    color: #2AB51E
    border: solid 1px #2AB51E
.btn-negro
  background: #000000
  border: solid 1px #000000
  color: #ffffff
  text-transform: uppercase
  font-size: 15px
  font-weight: 600
  padding: 5px 35px
  margin: 15px
  border-radius: 8px
  letter-spacing: 1px
  cursor: pointer
  display: inline-block
  transition: all .35s ease-in-out
  &:hover
    background: inherit
    color: #000000
    border: solid 1px #000000
.btn-secundario
  background: transparent
  color: #F20000
  font-size: 14px
  font-weight: 500
  padding: 5px 35px
  margin: 15px
  letter-spacing: 1px
  cursor: pointer
  display: inline-block
  transition: all .35s ease-in-out
  &:hover
    background: inherit
    color: #000000

.nav-link
  transition: all .35s ease-in-out


$spaces: 35

@mixin m($size)
    margin: $size + rem !important
@mixin mt($size)
    margin-top: $size + rem !important
@mixin ml($size)
    margin-left: $size + rem !important
@mixin mr($size)
    margin-right: $size + rem !important
@mixin mb($size)
    margin-bottom: $size + rem !important
@mixin p($size)
    padding: $size + rem !important
@mixin pt($size)
    padding-top: $size + rem !important
@mixin pl($size)
    padding-left: $size + rem !important
@mixin pr($size)
    padding-right: $size + rem !important
@mixin pb($size)
    padding-bottom: $size + rem !important
@mixin fz($size)
    font-size: $size + px !important
@mixin ltp($size)
    letter-spacing: $size + px !important
@for $i from 0 through $spaces
    .m-#{$i}
        @include m($i)
    .mt-#{$i}
        @include mt($i)
    .ml-#{$i}
        @include ml($i)
    .mr-#{$i}
        @include mr($i)
    .mb-#{$i}
        @include mb($i)
    .p-#{$i}
        @include p($i)
    .pt-#{$i}
        @include pt($i)
    .pl-#{$i}
        @include pl($i)
    .pr-#{$i}
        @include pr($i)
    .pb-#{$i}
        @include pb($i)
    .fz-#{$i}
        @include fz($i)
    .ltp-#{$i}
        @include ltp($i)