@font-face {
  font-family: 'Bebas';
  src: url('font/Bebas.eot');
  src: url('font/Bebas.eot?#iefix') format('embedded-opentype'),
      url('font/Bebas.woff2') format('woff2'),
      url('font/Bebas.woff') format('woff'),
      url('font/Bebas.ttf') format('truetype'),
      url('font/Bebas.svg#Bebas') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body{
  margin: 0px;
  font-family: 'Bebas';
}
ul{
  padding-left: 0px;
}
/*Banner**/
.banner{
  height:100vh;
  position: relative;  
  overflow: hidden;
  text-align: center;
}
.banner::before{
  content: '';
  background: rgba(0,0,0,.5);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.banner video{
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  left: 0px;
}
.banner .content-text{
  text-align: center;
  width: 100%;
  position: absolute;
  z-index: 2;
}
.banner .content-text h2{
  color: #fff;
  font-size: 60px;
}
.banner .content-text p{
 color: #fff;
}
.logo{
  z-index: 2;
  position: absolute;
  width: 100%;
  max-width: 250px;
  top: 3em;
  left: 3em;
}
.social{
  z-index: 2;
  list-style: none;
  position: absolute;
  right: 5em;
  bottom: 3em;
}
.fondo{
  background: url('../img/circulos2.png') no-repeat center center / contain;
  padding: 50px;
}
.social img{
  width: 50px;
  margin-bottom: 25px;
}
.title li{
  display: inline-flex;
    padding-right: 10px;
    padding-left: 10px;
}
.title li:nth-child(1){
  border-right: solid 2px #fff;
}
.title li p{
  font-size: 30px;
  letter-spacing: 4px;
}
.texto li p{
  font-size: 40px;
}
.c{
  position: relative;
}
.c::before{
  content: "´";
  position: absolute;
  top: -21px;
  left: 6px;
}
/***querys***/

@media only screen and (min-width: 200px) and (max-width: 600px) {
.logo {
  max-width: 250px;
  top: auto;
  left: auto;
  position: relative;
}
  .banner .content-text {
    top: 10em;
}
.title li p {
  font-size: 14px;
}
.texto li p {
  font-size: 20px !important;
}
.c::before {
  top: -11px;
}
.social {
  right: auto;
  bottom: 0em;
  width: 100%;
}
.social li{
  width: 49%;
  display: inline-block;
}
/**/
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
.logo {
  max-width: 250px;
  top: auto;
  left: auto;
  position: relative;
}
  .banner .content-text {
    top: 10em;
}
.title li p {
  font-size: 14px;
}
.texto li p {
  font-size: 20px !important;
}
.social {
  right: auto;
  bottom: 0em;
  width: 100%;
}
.social li{
  width: 49%;
  display: inline-block;
}
/**/
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
.logo {
  max-width: 250px;
  top: auto;
  left: auto;
  position: relative;
}
  .banner .content-text {
    top: 16em;
}
.title li p {
  font-size: 25px;
}
.texto li p {
  font-size: 35px !important;
}
.social {
  right: auto;
  bottom: 0em;
  width: 100%;
}
.social li{
  width: 49%;
  display: inline-block;
}
/**/
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {

  .banner .content-text {
    top: 16em;
}
.title li p {
  font-size: 25px;
}
.texto li p {
  font-size: 35px !important;
}
.social {
  right: auto;
  bottom: 0em;
  width: 100%;
}
.social li{
  width: 49%;
  display: inline-block;
}
}