@font-face {
  font-family: dionisia;
  src: url(dionisia.ttf);
}

@font-face {
  font-family: futura;
  src: url(futura_book_font.ttf);
}

body {
  margin: 0;
}

br {
  margin-bottom: 1.25ex;
}

.barra {
  width: 100%;
  top: 0;
  background-color: rgba(255,255,255,0.875);
  font-family: dionisia;
  font-size: 160%;
  position: fixed;
  z-index: 1;
}

.inicio {
  float: left;
  padding: 15px;
  cursor: pointer;
}

.inicio:hover {
  font-weight: 900;
}

.menu {
  float: right;
  padding: 18px 20px;
}

.menu:hover {
  filter: opacity(0.7);
  transition: 0.4s;
}

#logo_text {
	vertical-align: middle;
}

.labCheck {
  padding: 18px 20px;
  cursor: pointer;
}

header nav {
  background-color: rgba(255,255,255,1);
  position: fixed;
  top: 67px;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 1;
}

#menuCheck {
  display: none;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: futura;
  font-size: 4.4vh;
}

header nav ul li {
  list-style-type: none;
  margin-left: -100%;
  white-space: nowrap;
  animation-name: marquesina;
  /* animation-duration: 25s; */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

header nav ul li:hover {
  animation-play-state: paused;
}

header nav ul li a:hover, a:active {
  filter: opacity(1);
  background-color: black;
  color: white;
}

@keyframes marquesina {
  to {
    transform: translateX(50%);
  }
}

.watch {
  animation-duration: 39s;
}

.auto {
  animation-duration: 36s;
}

.indus {
  animation-duration: 41s;
}

.edit {
  animation-duration: 38s;
}

.shows {
  animation-duration: 35s;
}

.fash {
  animation-duration: 40s;
}

.food {
  animation-duration: 37s;
}

.port {
  animation-duration: 34s;
}

.trav {
  animation-duration: 39s;
}

.docu {
  animation-duration: 36s;
}

.arch {
  animation-duration: 33s;
}

.prod {
  animation-duration: 40s;
}

.cart {
  animation-duration: 34s;
  /*display: none;*/
}

.rand {
  animation-duration: 36s;
}

.vide {
  animation-duration: 33s;
}

.abou {
  font-weight: bold;
  animation-duration: 42s;
}

.contenedor {
  margin: 67px auto 15px;
  text-align: justify;
  font-family: futura;
}

.elemento {
  width: 150px;
  margin-bottom: 4px;
}

p {
  font-size: 1.3em;
  }

.suave{
  color: dimgray;
}

a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

a:hover, a:active {
  filter: opacity(0.7);
  transition: 0.4s;
}

#ohport {
  margin-top: -192px;
  text-align: right;
  position: relative;	
  z-index: -1;
}

.cuadro {
	display: grid;
	height: 100%;
}
.centrado {
	max-width: 100%;
	max-height: 90vh;
	margin: 65 auto 0;
}

#texto {
	margin: 65 25% 15;
	text-align: left;
	font-family: futura;
}

@media only screen and (max-width: 1030px) {
    header nav ul {
      font-size: 4.0vh;
    }
}

@media only screen and (max-width: 880px) {
	#ohport {
	  margin-top: auto;
	}

	.barra {
	  font-size: 120%;
	}

    #texto {
    	margin: 65 12% 15;
    }
}

@media only screen and (max-width: 400px) {
	.barra {
	  font-size: 90%;
	}

    #texto {
    	margin: 65 6% 15;
    }

    .menu {
      padding: 25px 20px;
    }

    header nav ul {
      font-size: 3.6vh;
    }
}