body, html{
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: rgb(31, 23, 15);
}
.text-white{
  color: #fff;
}
.home-container{
    width: 100%;
    height: 100vh;
    background-image:url('../img/background.jpg') !important;
    background-size:cover;
    background-repeat: no-repeat ;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    position: relative;
}
.tela{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(24, 23, 23) !important;
    position: absolute;
    opacity: 0.85;
}
.container-own{
    width: 50%;
    height: auto !important;
    position: relative;
    display:flex;
    flex-direction: column;
    align-items:center;
}
.container-own > img {
    margin-bottom: 0.1rem;
}
.container-own > h1{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    color: #fff;
    font-size: 2rem;
}
.subcontainer{
    color: #E4E4E4;
    margin-bottom: 2rem;
}
.subcontainer > p{
    font-size: 22px;
    text-align: center;
    letter-spacing: 1px;
    font-weight: normal;
    text-transform: capitalize;
}
.subcontainer > p >a{
    text-decoration: none;
    color: rgb(237 160 91);
    font-weight: bold;

}
.subcontainer > p >span{
  text-decoration: none;
  color: rgb(97, 196, 94);
  font-weight: bold;

}
.subcontainer > p >a:hover{
    color: rgb(107, 71, 39);
}

.small{
  text-transform: none!important;
  font-size:0.85rem!important;
}
.small > span{
  color:rgb(237 160 91)!important;
}
.img-logo{
    width: 25%;
}
.social-section{
    margin-top: 6rem;
    width: 30%;
    display: flex;
    flex-direction: column;
}
.icono{
    border-style: solid;
    border-width: thin;
    border-radius: 75%;
    width:3rem;
    height:3rem;
    padding: 2rem;
    display: flex;
    align-items:center;
    justify-content:center;
}
.icono:hover{
    color:#4a5e69;
    cursor: pointer;
}
.icono >a> i:hover{
    color:#4a5e69;
}
.icono >a> i{
    color:#E4E4E4;
    font-size: 2rem;
}
.iconos-wrapper{
  width: 100%;
  display: inherit;
  justify-content:space-between;
}

.text-logo{
  position: relative;
  text-align: center;
  line-height: 1.4em;
}
.background-for-modal{
  background-color: #1A2328!important;
  color:#888888!important;
}

.logo-animation {
  position: relative;
  display: inline-block;
}
.main-text {
  position: relative;
  display: inline-block;
  opacity: .7;
}

.back-text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: .3;
  display: inline-block;
}

.skew {
  animation: skew 0.95s infinite alternate;
}

.glitch {
  animation: glitch 0.8s infinite alternate;
}

@keyframes skew {
  0% {
    transform: skew(0deg);
  }
  20% {
    transform: skew(0deg);
  }
  24% {
    transform: skew(-7deg);
  }
  28% {
    transform: skew(0deg);
  }
  70% {
    transform: skew(0deg);
  }
  74%{
    transform: skew(10deg);
  }
  78% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes glitch{
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  20% {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  24% {
    transform: translate3d(5px, 4px, 0);
    opacity: 1;
  }
  28% {
    transform: translate3d(0, 0, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
  64%{
    transform: translate3d(-4px, -3px, 0);
  }
  68% {
    transform: translate3d(0, 0, 0);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  74%{
    opacity: 0.3;
    transform: translate3d(10px, -6px, 0);
  }
  78% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}


/*Responsive design*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .social-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
  }
  .container-own > h1{
    font-size: 1rem!important;
  }
  .subtitle{
    font-size: 0.8rem!important;
  }
  .subcontainer > p {
    font-size: 1rem!important;
  }
  .icono{
    padding: 1.5rem;
  }
  .icono >a> i{
    font-size: 1rem!important;
  }
  .iconos-wrapper{
    display: inherit;
    justify-content:space-between;
  }
  .img-logo{
    width: 125%;
  }
  .footer-first-line{
    width: 95%;
    flex-direction:column;
  }
  .footer-first-line>div{
    width:95%;
    padding:15px;
  }
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .social-section{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
}
.container-own > h1{
  font-size: 2rem;
}
.iconos-wrapper{
  display: inherit;
  justify-content:space-between;
}
.img-logo{
  width: 115%;
}.footer-first-line{
  width: 95%;
  flex-direction:column;
}
.footer-first-line>div{
  width:95%;
  padding:15px;
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .social-section{
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
  }
  .iconos-wrapper{
    display: inherit;
    justify-content:space-between;
  }
  .img-logo{
    width: 80%;
  }
  .footer-first-line{
    width: 95%;
    flex-direction:column;
  }
  .footer-first-line>div{
    width:95%;
    padding:15px;
  }
}


@media only screen and (min-width: 992px) {
  .social-section{
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
  }
  .iconos-wrapper{
    display: inherit;
    justify-content:space-between;
  }
  .img-logo{
    width: 60%;
  }
  .footer-first-line{
    width: 95%;
    flex-direction:column;
  }
  .footer-first-line>div{
    width:95%;
    padding:15px;
  }
}

@media only screen and (min-width: 1200px) {
  .social-section{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
  }
  .iconos-wrapper{
    display: inherit;
    justify-content:space-between;
  }
  .footer-first-line{
    width: 95%;
    flex-direction:row;
  }
  .footer-first-line>div{
    width:30%;
    padding:15px;
  }

}