/* General */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
/* Menú de navegación */
.atras {
 display: flex;
 height: 3em;
 width: 100px;
 align-items: center;
 justify-content: center;
 background-color: inherit;
 border-radius: 3px;
 letter-spacing: 1px;
 transition: all 0.2s linear;
 cursor: pointer;
 border: none;
 background: #fff;
}

.atras > svg {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 transition: all 0.4s ease-in;
}

.atras:hover > svg {
 font-size: 1.2em;
 transform: translateX(-5px);
}

.atras:hover {
 box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
 transform: translateY(-2px);
}
header a{
	text-decoration: none;
}
header{
	position: fixed;
	z-index: 100;
	width:100vw;
	background: #E05347;
}
header > nav{
	display:flex;
	justify-content: space-between;
	height: 3em;
	align-items: center;
}
#botones-hacia-la-derecha{
	display: flex;
	margin-right: 10px;
	flex-wrap: wrap;
}
#botones-hacia-la-derecha > a:link, #botones-hacia-la-derecha > a:visited{
	color:#fff;
	margin: 0 10px;
}
@media only screen and (max-width: 979px){
	header > nav{
		height: 4em;
	}
	#botones-hacia-la-derecha > a:link, #botones-hacia-la-derecha > a:visited{
		margin: 5px 10px;
	}
}
/* Menú toogle */
#responsive-menu{
	position:fixed;
  	width:200px;
  	height:100vh;
  	top:0px;
  	left:-210px; 
  	padding-top:0px;
  	background-color: rgba(0, 0, 0, 1);
  	border-right:4px solid rgba(255, 255, 255, 1);
  	transition:left 0.5s ease;
  	z-index: 10;
  	overflow-y: auto;
}
.nav-item{
	display:block;
    margin:0 auto;
    line-height: 2.3;
    position:relative;
  	padding:20px;
    border-bottom:.5px solid rgba(255, 255, 255, 1);
    border-top:.5px solid rgba(255, 255, 255, 1);
    background-color:transparent;
    font-family: sans-serif;
    font-size: 1.4rem;
    text-align:center;
    color:rgba(255, 255, 255, 1);
  	text-decoration:none;
}
.menu-toogle {
    position:fixed; 
    width: 35px;
    line-height:1.1;
    text-align:center;
    top: 3px;
    left: 3px; 
    border-radius:3px;
    background-color: #000000;
    transition: all .5s ease; 
    z-index:10;
}
.menu-toogle::before {
     content:" ☰ ";
     font-size: 36px;
     color:#FFFFFF;
}
.checkbox {
      display:none; 
    }
    .checkbox:checked ~ #responsive-menu {
      position:fixed;
      left:0px;
    }
    .checkbox:checked ~ .menu-toogle { 
      left: 210px;
      position:fixed; 
    }
.menu-toogle:hover{
  cursor: pointer;
}
@media only screen and (min-width: 567px){
	#m-toogle{
		display: none;
	}
}
/* Cuerpo de página */
main{
	position: relative;
	top:3em;
}
@media only screen and (max-width: 566px){
	header{
		display: none;
	}
	main{
		position: relative;
		top:0;
	}
}
/* Se setea padding-top a todas las secciones para una mejor navegabilidad */
article{
	padding-top: 3em !important;
}
/* Copypaste para presentación */
.section{
	/* Defino el tamaño de las secciones */
	width: 100%;
	height: 85vh;
}

/* ---------------- Aca seteamos las propiedades del nombre con imagen de fondo en movimiento ------------------- */

.main-name{
	/* Centramos el contenido de la sección y determinamos el color de fondo */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: black;
}


.name{
	/* seteamos las propiedades del texto */
	font-size: 10vmax;
	text-align: center;
	color: rgba(255, 255, 255);
   
}

.span-main-name{
	/* Establecemos la iamgen de fondo del texto */
   display: block;
   background: url('../img/fire.jpg');
   background-clip: text;
   -webkit-background-clip: text;
   text-fill-color: transparent;
   -webkit-text-fill-color: transparent;
   
   /* Establecemos la animación */
	animation: fire 20s linear infinite;
 -webkit-animation: fire 20s linear infinite;
	   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
 
}
h2{
	font-size: 40px;
}
.other_name{
	/* Centramos el contenido de la sección y determinamos el color de fondo */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.light{
	/* Establecemos las características del texto */
	font-size: 10vmax;
	text-align: center;
	font-weight: bold;
	position: relative;
}

.light::before{
	/* Establecemos una sombra utilizando un pseudoelemento con un texto idéntico superpuesto */
	content: attr(data-text);
	position: absolute;
	font-size: 10vmax;
	text-shadow: 0 0 20px  rgb(0, 238, 255);
	filter: blur(10px) brightness(0);
	/* Determianmos la animación */
	animation: parpadeo 2s linear infinite;
	animation-delay: 1s;
}

@keyframes parpadeo {
	/* Establecemos el paso a paso de la animación que queremos realizar */
	0%{
		 filter: blur(5px) brightness(1);
	}
	3%{
		 filter: blur(5px) brightness(0);
	}
	6%{
		 filter: blur(5px) brightness(0);
	}
	7%{
		 filter: blur(5px) brightness(1);
	}
	8%{
		 filter: blur(5px) brightness(0);
	}
	9%{
		 filter: blur(5px) brightness(1);
	}
	10%{
		 filter: blur(5px) brightness(0);
	}
	20%{
		 filter: blur(5px) brightness(1);
	}
}
/* Presentación */
#presentacion{
	background-image: url(../img/Mi_foto.jpg);
	background-size: cover;
	width: calc(100vw-3px);
	height: 99vh;
	background-attachment:fixed;
	color: #fff;
}
/* Adaptación de la presentación a distintas resoluciones */
@media only screen and (max-width: 912px){
	.light h2, .light::before{
		font-size: 55px;
	}
}
@media only screen and (max-width: 768px){
	.light h2, .light::before{
		font-size: 50px;
	}
}
@media only screen and (max-width: 660px){
	.light h2, .light::before{
		font-size: 45px;
	}
}
@media only screen and (max-width: 620px){
	#presentacion{
		background-image: url(../img/presentacion-para-celulares.jpg);
		background-position: center;
	}
}
@media only screen and (max-width: 470px){
	.light h2, .light::before{
		font-size: 40px;
	}
}
@media only screen and (max-width: 419px){
	.light h2, .light::before{
		font-size: 35px;
	}
}
@media only screen and (max-width: 377px){
	.light h2, .light::before{
		font-size: 30px;
	}
}
@media only screen and (max-width: 334px){
	.light h2, .light::before{
		font-size: 25px;
	}
}
@media only screen and (max-width: 290px){
	.light h2, .light::before{
		font-size: 20px;
	}
}
/* Estilos del texto en el que hablo sobre mí */
#conociendome{
	margin:30px;
	background: #B8BEE6;
	padding: 20px;
}
/* Estilos de la sección de preguntas */
#preguntas{
	background: #F7C80A;
	height:auto;
	color: #fff;
	padding: 20px;
}
#preguntas > h2{
	text-align: center;
}
/* Preguntas alineadas a la izquierda */
.left{
	text-align: left;
	border-left: 5px solid #B7FF4F;
}
/* Preguntas alineadas a la derecha */
.right{
	text-align: right;
	border-right: 5px solid #B7FF4F;
}
/* Seteanse propiedades a todas las preguntas */
.left, .right {
	margin:30px 0px;
	padding: 5px 15px;
}
/* Para las negritas */
.destacado{
	font-weight: bold;
}
#link-de-ping-pong:link, #link-de-ping-pong:visited{
	color: #fff;
}
/* Galería de fotos de mi paso por el Illia */
.grid-item{
	margin: 1px;
}
/* Momento es la columna que indica año */
.momento{
	display:flex;
	flex-direction: column;
	margin: 125% 0;
}
.momento h3 {
  margin: 0px 0px;
  font-size: 30px;
  text-align: center;
  display: inline;
}
.grid-container{
	display:grid;
	grid-template-rows: repeat(6,calc(100% / 6));
	grid-template-columns: 10% repeat(3,29%);
	margin-left: 20px;
	width:calc(100vw-3px);
}
.grid-item img{
	width:100%;
	height:100%;
	object-fit: cover;
	transition: transform 0.2s;
}
.grid-item img:hover{
	transform: scale(1.1);
}
/* Foto de primero */
#ppd{
	grid-column: 2/5;
}
#ppd img:hover{
	transform: scale(1.05);
}
/* Foto con la de Lengua */
#ft-con-carrizo{
	grid-column: 3/5;
}
/* titleBox son los títulos de las imágenes que aparecen cuando se le pone el mouse encima */
.grid-item .titleBox {
      position: relative;
      bottom: 10%;
      left: 0;
      right: 0;
      display: none;
      background: rgba(0, 0, 0, 0.5);
      color: #FFF;
      padding: 10px;
      text-align: center;
    }
 .grid-item:hover .titleBox{
    display: block;
    }
/* Diseño responsivo para la galería de fotos */
@media only screen and (max-width: 1274px){
	.año-letra{
		display: none;
	}
}
@media only screen and (min-width: 1275px){
	.año-numero{
		display: none;
	}
}
@media only screen and (max-width: 923px){
	.momento h3:first-child{
		font-size: 25px;
	}
}
@media only screen and (max-width: 864px){
	.momento h3:last-child{
		font-size: 25px;
	}
}
@media only screen and (max-width: 772px){
	.momento h3:first-child{
		font-size: 20px;
	}
}
@media only screen and (max-width: 724px){
	.momento h3:last-child{
		font-size: 20px;
	}
}
@media only screen and (max-width: 622px){
	.grid-container{
		margin-left: 0;
	}
}
@media only screen and (max-width: 602px){
	.momento h3:first-child{
		font-size: 15px;
	}
}
@media only screen and (max-width: 564px){
	.momento h3:last-child{
		font-size: 15px;
	}
}
@media only screen and (max-width: 451px){
	.palabra-año{
		display: none;
	}
	.momento h3:first-child{
		font-size: 30px;
	}
}
@media only screen and (max-width: 414px){
	.momento h3:last-child{
		font-size: 10px;
	}
}
/* Estilos copiados de Internet para cuando se pone una imagen en pantalla completa */
body.ps-active 
{
	-webkit-text-size-adjust: none;
	overflow: hidden;
}
body.ps-active * 
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
body.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */
div.ps-document-overlay 
{
	background: #000;
}


/* Viewport */
div.ps-viewport 
{
	background: #000;
	cursor: pointer;
}


/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
	background: #000;
}


/* Slider */
div.ps-slider-item-loading 
{ 
	background: url(http://abvichico.com/images/photoswipe/photoswipe-loader.gif) no-repeat center center; 
}


/* Caption */
div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
}

div.ps-caption-content
{
	padding: 13px;
}


/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-webkit-background-size: 176px 88px;
		background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons@2x.png);
	}
}
/* Fotomontajes: uno vertical y otro horizontal */
#imagenes{
	display: flex;
	justify-content: center;
}
/* Si el que visita a este gran sitio lo hace con pantalla con resolución horizontal, que solo se muestre la imagen horizontal */
@media only screen and (min-width: 1024px){
	#vertical{
		visibility: hidden;
		display: none;
	}
	#horizontal{
		visibility: visible;
	}
}
/* Si la resolución es menor al ancho de la imagen horizontal, que se muestre la vertical */
@media only screen and (max-width:1024px){
	#horizontal{
		visibility: hidden;
		display: none;
	}
	#vertical{
		visibility: visible;
	}
}
#grande{
	display: flex;
	flex-direction: row-reverse;
}
#code{
	max-height: 175px;
}
@media only screen and (max-width: 318px){
	#code{
		width:100%;
	}
}
#grande__text{
	min-width: 50vw;
}
@media only screen and (max-width:632px){
	#grande{
		display: flex;
		flex-direction: column;
	}
	#code{
		max-width: 400px;
		margin: 0 auto;
	}
}
footer{
	margin-top: 50px;	
	padding: 20px;
	background: #111;
	width: 100%;
}
footer h5{
	color: white;
}
.widget-title span::after {
    background: inherit;
    content: "";
    height: inherit;
    position: absolute;
    top: -4px;
    width: 50%;
}
footer ul{
	list-style: none;
	display: flex;
}

/*==================== 
	Footer 
====================== */

/* Main Footer */
footer .main-footer{	padding: 20px 0;	background: #252525;}
footer ul{	padding-left: 0;	list-style: none;}

/*==================== 
	Widgets 
====================== */
.widget{	padding: 20px;	margin-bottom: 40px;}
.widget .widget-last{	margin-bottom: 0px;}
.widget .no-box{	padding: 0;	background-color: transparent;	margin-bottom: 40px;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget p{	margin-bottom: 18px;}
.widget li a{	color: #ff8d1e;}
.widget li a:hover{	color: #4b92dc;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{	float: right;	background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{	color: #fff;}

ul .social-footer2 {	margin: 0;padding: 0;	width: auto;}
ul .social-footer2 li {display: inline-block;padding: 0;}
ul .social-footer2 li a:hover {background-color:#ff8d1e;}
ul .social-footer2 li a {display: block;	height:30px;width: 30px;text-align: center;}
.btn{background-color: #ff8d1e; color:#fff;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;

}
a[title="Mi dirección de correo electrónico"]:link, a[title="Mi dirección de correo electrónico"]:visited{
	color: #279AE0;
}