@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
a, a:hover, a:active, a:visited {
  text-decoration:none;
  color:   #bbb;
}
*{
  box-sizing: border-box;
}
/* latin */
@font-face {
  font-family: 'BenchNine';
  font-style: normal;
  font-weight: 400;
  src: local('BenchNine Regular'), local('BenchNine-Regular'), url(https://fonts.gstatic.com/s/benchnine/v5/xmB9oJNpSFKa3qTF2JABPltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
#beta{
    position: absolute;
    bottom: 0;
    background: red;
    color: #FFF;
    font-size: 21px;
    padding: 4px;
    width: 250px;
    text-align: center;
    transform: rotate(-45deg);
    left: -100px;
    top: 53px;
    height: 25px;
    z-index: 4;
}
#beta p{
    -webkit-animation:pulse 3s linear infinite;
}
body {
  font-size: 3vw;
  line-height: 1;
  font-family: 'BenchNine', sans-serif;
  color:#333;
}
@media only screen and (max-width:479px) {
body {
  font-size: 14px;
}
}
ol, ul {
  list-style: none;
}

#featured{padding: 1em;background: #FFFFFF;width: 90%;line-height: 1.3em;text-align:left;margin: 1em auto;display:block}
#featured:before{
	content:"En el blog:";
	font-size: 1.5em;
	margin-bottom: 0.3em;
	display: block;
}
#featured b{
	font-size: 1.2em;
	text-align:center;
	width: 100%;
	display: inline-block;
	color: #000;
	margin-bottom: 0.3em;
	border-bottom: 1px solid #DDD;
}
#wrap {
  width:100%;
  margin:auto;
  /*! background: #000000; */
  box-shadow: 0 0 20px #bbbbbb;
  max-width:1400px;
  height: 100vh;
  position: relative;
  top: 0;
  overflow:hidden;
}
.full {
  position: relative;
  background-position: center top;
  background-color: rgba(0,0,0,0.8);
}
.preview {
  width: 95%;
  height: 90%;
  margin: 2.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: drop-shadow(0px 0px 15px #000);
}
.active {
  z-index:999;
}
.hidden {
  opacity:0;
}
nav input{
position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    z-index:10;
    opacity:0;
    display:none;
}
nav .button{
    width: 40px;
    height: 40px;
    display:none;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 7;
}
nav span img{
     height: 20px;
    background: #FFF;
    width: auto;
    padding: 5px;
    margin-right: 7px;
    display: inline-block;
    float: left;
    display:none;
}
nav span a,nav span a:hover, nav span a:visited, nav span a:active {
 background: transparent;
     color: #FFFFFF;
}
.button:before{
    height: 8px;
    background: #fff;
    content: "";
    width: 35px;
    position: absolute;
    top: 6px;
    left: 0;
     transition: all 0.5s cubic-bezier(.5, 1.07, .67, .96);
}
.button:after{
 transition: all 0.5s cubic-bezier(.5, 1.07, .67, .96);
    height: 8px;
    background: #fff;
    content: "";
    width: 35px;
    position: absolute;
    bottom: 10px;
    left: 0;
}
nav {font-weight: bold;width: 100%;text-align: center;padding:0  0.3em;/*! max-width: 800px; */position: relative;display:flex;margin: auto;background: #000;justify-items: center;z-index: 2;}

nav input:checked  ~ a{
 width:100%;
 /*! padding-top: 9px; */
 height:40px;
 /*border-top: 1px solid #505050;/*
 /*! display: block; */
 /*font-size: 20px;*/
}
 nav input:checked  ~ .button:before{
   transform: translatex(7px) translatey(8px)  rotate(315deg);
 }
  nav input:checked  ~ .button:after{
   transform: rotate(225deg) translatey(10px) translatex(1px);
 }
.seccion {
  text-align: center;
  position:absolute;
  height: calc(100% - 40px);
  background: #efefef;
  overflow-y:auto;
  transition: all 0.5s cubic-bezier(.5, 1.07, .67, .96);
  width: 100%;

}
nav a {
  font-size: 1.6em;
  max-width:160px;
  font-family: BenchNine;
  flex: 2;
  padding:5px 0;
  background: #000;
  /* max-width: 160px; */
  transition: background 0.5s ease-in-out;
  overflow:hidden;
  z-index: 4;
}
nav>span{
      
    font-size: 0.7em;
      background: #000;
      z-index: 5;
    padding: 0 40px 0 10px;
}
nav span:first-child a{
    background: transparent;
    padding: 0;
    color: #FFF;
}

nav a.hightlighed {
  color: #000  ;
  transition: background 1s ease-in-out;
  background: #FFF;
}

.comentario {
  width: 90vw;
  left: 5vw;
  padding: 0.5em 0.5em;
  border-radius: 2px;
  position: absolute;
  bottom: 0vh;
  height: auto;
  transition: all 700ms cubic-bezier(0.000, 0.745, 0.190, 1.020);
  z-index: 99999;
  background: rgba(255,255,255,0.9);
  opacity: 0;
  font-size: 1.2em;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.comentario.active {
  bottom: 10vh;
  opacity:1;
}
.comentario span {
  display:none;
}
.comentario a {
  color: red;
  position: absolute;
  right: 20px;
  text-decoration:underline;
  top: 0.5em;
}
.seccion>div {
  position: relative;
  padding: 0.11em;
  margin: 1VW;
  background: #FFFFFF;
  box-shadow: 0 0 20px #bbb;
  transform: scale(1);
  display: inline-block;
  width: 44VW;
  height: 28VW;
  max-height:230px;
  transform: scale(1);
  transition: opacity 300ms cubic-bezier(0.54, 0.28, 0.72, 0.43);
}
.seccion>div.tech{
    height: 40VW;
    width: 25vw;
}
.thumb {
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}

.cerrar {
  width: 50px;
  height: 50px;
  background-size: 100%;
  top: 0;
  right:0;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  background-image: url(../img/cerrar.png);
  z-index: 99999999999999999;
}
b{
font-weight:strong;
color:#000;
}
#blog {
  position: absolute;
  width: 95%;
  left:2.5%;
  height: 100%;
  display:none;
}
.full {
  width:100%;
  height:100%;
  display:flex;
  position: absolute;
  z-index: 9999;
}
 .full ~ .cerrar {
display:block;
}
 .full ~ .comentario.active {
 transform: translateY(-50px);
}
.full {
  animation: pulse 1s 1;
}
 @keyframes pulse {
 0% {
 opacity:0;
}

 100% {
 opacity:1;
}
}
 @-webkit-keyframes  pulse {
 0% {
 opacity:0;
}

 100% {
 opacity:1;
}
}

@media only screen and (max-width: 470px) {
	
	.item .button:after,	.item .button:before{
		background:#666;
	}
	
	#blog{
		margin-top:80px;
	}
nav{
 flex-direction:column;
padding:0;
 position: absolute;
}
nav input,nav .button, nav span img{
display:inline-block;
}
  nav > a{
    z-index:2;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #1e1e1e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #000000 0%,#1e1e1e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #000000 0%,#1e1e1e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 }
nav > a:not(.hightlighed){
 height:0;
 padding:0;
   transition: all 0.5s cubic-bezier(.5, 1.07, .67, .96);
 /*font-size: 0;*/
  flex: none; 
 display: flex;
 align-items: center;
 justify-content: center;
 max-width:none;
}

.hightlighed{
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	width:100%;
	max-width:none;
}

nav>span {
    font-size: 1.1em;
    padding: 10px;
    color: #FFF;
    text-align: left;
    /*! background: #000; */
    /*! z-index: 2; */
}


nav span a br{
             display:none;
}
.seccion{
	  margin-top:80px;
}

.seccion>div {
  width: 96%;
  height: 50vw;
  margin: auto;
}
.seccion>div.tech {
  width: 36VW;
  height: 60vw;
}
}
@media only screen and (min-width:640px) {
body {
  font-size: 20px;
}
.seccion>div {
  width: 10em;
  height: 8em;
}
.seccion>div.tech {
  width: 7em;
  height: 19em;
}
}