*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 15px;
}

body {
	margin: 0;
	--color-text: #000;
	--color-bg: #fff;
	--color-link: #aaa;
	--color-link-hover: #333;
	--color-title-underline: #e44c65;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

body .dg.ac {
  z-index: 10000;
}

.dg.main > ul {
  border: 1px solid #333;
  border-top: 0;
  border-bottom: 0;
}

body .dg.main .close-button {
  background: #333;
}

body .dg.main .close-button:hover {
  background: #333;
}

.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: -1;
}

.frame__title {
	font-size: 1rem;
	margin: 0 0 1rem;
}

.frame__links {
	display: inline;
}

.frame__links a:not(:last-child) {
	margin-right: 1rem;
}

.content {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: calc(100vh - 13rem);
	position: relative;
	justify-content: flex-start;
	align-items: center;
}

@media screen and (min-width: 53em) {
	.frame {
		position: fixed;
		text-align: left;
		z-index: 100;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 3rem;
    z-index: -1;
		pointer-events: none;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title ...'
							'... ...'
							'... links';
	}
	.frame__title {
		margin: 0;
    grid-area: title;
	}
	.frame__links {
		grid-area: links;
		padding: 0;
		justify-self: end;
	}
	.frame a {
		pointer-events: auto;
	}
	.content {
		height: 100vh;
		justify-content: center;
	}
}

.fullscreen-bg {
    overflow: hidden;
    z-index: -100;
    width: 100%;
    height: 100%;
}

.fullscreen-bg-video {
    display: block;
    margin: 0 auto;
    z-index:-1;
        width: 100%;
    height: 100%;
}

video {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*#video_bg{
  filter: brightness(50%);
}*/

/*@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg-video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg-video {
    width: auto;
    height: 100%;
  }
}*/

.mobile-menu .button_container span {
	background: #fff;
}

/* LANDED */

/* Container */

	.container {
/*		margin: 0 auto;
		max-width: calc(100% - 4em);
		width: 70em;*/
	}

		.container.xsmall {
			width: 17.5em;
		}

		.container.small {
			width: 35em;
		}

		.container.medium {
			width: 52.5em;
		}

		.container.large {
			width: 87.5em;
		}

		.container.xlarge {
			width: 105em;
		}

		.container.max {
			width: 100%;
		}

		@media screen and (max-width: 1280px) {

			.container {
				width: 90%;
				max-width: 100%;
			}

		}

		@media screen and (max-width: 980px) {

			.container {
				width: 100% !important;
			}

		}

#animacion video {
	background: #101010;
}

#animacion {
	background: #000;
}

#footer {
	background: #222;
}

#footer h4.contacto {
	color: white;
	font-size: 1.2rem;
}

#footer .copyright p {
	font-color: #ff0000;
	font-size: 1rem;
}

body, input, select, textarea {
		/*color: rgba(255, 255, 255, 0.75);*/
		color: #000;
		font-family: "Roboto", Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: 100;
		line-height: 1.75em;
	}

/*	a {
		-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #e44c65;
		text-decoration: none;
	}

		a:hover {
			color: #e44c65 !important;
			border-bottom-color: transparent;
		}*/

	strong, b {
		color: #ffffff;
		font-weight: 300;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #000;
		font-weight: 300;
		line-height: 1em;
		margin: 0 0 1em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			border: 0;
		}

	h2 {
		font-size: 2em;
		line-height: 1.5em;
		letter-spacing: -0.025em;
	}

	h3 {
		font-size: 1.35em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.3);
		margin: 3em 0;
	}

		hr.major {
			margin: 4em 0;
		}

				/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, select, textarea {
				font-size: 12pt;
			}

			h2 {
				font-size: 1.5em;
			}

			h3 {
				font-size: 1.2em;
			}

			h4 {
				font-size: 1em;
			}

/* Portfolio Content */

#portfolio .column {
	padding: 30px;
}

#screenshots-wrapper .columns { padding: 0; }
.item .item-wrap {
   /*background: #fff;*/
   overflow: hidden;
   position: relative;

   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.item .item-wrap a {
   display: block;
   cursor: pointer;
   width: 100%;
   height: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlays {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.5);
}

.item-wrap:hover .overlays {
  opacity: 1;
}

.overlay-text {
  color: white;
  font-size: 20px;
  font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;

}

.dimgrey {
	color: dimgrey;
}