html {
	scroll-behavior: smooth;
}

body {
	background-color: #ffffff;
	background-image: url("../img/pattern.png");
	background-repeat: repeat;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 120%;
	color: #555555;
}

.menu {
	background: #ffffff url("../img/pattern.png") repeat scroll 0 0;
	float: left;
	position: fixed;
}

.contenido {
	float: left;
	background-color: #ffffff;
}

.contenido2 {
	background-color: #f7f7f7;
}

.trabajo-texto {
	background-color: #f7f7f7;
	float: left;
	padding: 15px 30px;
}

.titulo {
	border-bottom: 2px solid black;
	color: black;
	font-size: 2em;
	line-height: 1em;
	padding-bottom: 4px;
	padding-top: 37px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
}

.navbar-custom {
	background: transparent;
	border-color: transparent;
	font-size: 28px;
	line-height: 120%;
}

.navbar-brand {
	height: 120px;
	text-align: right;
}

.seccion {
	font-weight: 400;
}

#bs-menu ul li a {
	color: black;
	padding: 5px 0 0;
}

#bs-menu ul li a::before {
	border-bottom: 1px solid black;
    color: transparent;
    content: attr(data-hover);
    max-width: 0;
    overflow: hidden;
	position: absolute;
    transition: max-width 0.5s ease 0s;
}

#bs-menu ul li a:hover::before, #bs-menu ul li a:focus::before {
	max-width: 100%;
}

.navbar-brand span {
	color: black;
	font-size: 100px;
	transition-property: color;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

.navbar-brand span:hover {
	color: #00AEf6;
}

.social {
	float: right;
	height: 25px;
	margin-right: 10px;
	width: 25px;
}

.social span {
	color: black;
	font-size: 25px;
	text-align: center;
	transition-property: color;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

.social span:hover {
	color: #00AEf6;
}

.bottom {
	bottom: 25px;
	position: absolute;
	text-align: right;
	width: 100%;
}

.bottom span {
	color: black;
	font-size: 50px;
	margin-right: 10px;
}

.tlf {
	font-size: 24px;
}

.grid::after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

.grid {
	position: relative;
}

.imagenes {
	background-color: #ffffff;
	float: left;
	text-align: center;
}

.creditos {
	font-size: 16px;
	font-style: italic;
	font-weight: 400;	
	line-height: 19px;
}

#malla-calendar {
	width: 70%;
}

#malla-reloj {
	max-width: 1024px;
	width: 100%;
}

#detalle-reloj {
	max-width: 1024px;
	width: 100%;
}

#mockup-calendar {
	width: 50%;
}

#comp-modelo {
	max-width: 1024px;
	padding-top: 50px;
	width: 80%;
}

#mockup-modelo {
	max-width: 1024px;
	width: 80%;
}

#banner-mundial {
	max-width: 1024px;
	padding: 50px 0;
	width: 80%;
}

#mockup-mundial {
	max-width: 1024px;
	width: 80%;
}

#vtwin {
	max-width: 595px;
	padding: 50px 0;
	width: 80%;
}

#mockup-vtwin {
	max-width: 1024px;
	width: 80%;
}

#cocina {
	max-width: 960px;
	padding: 50px 0;
	width: 80%;
}

#cocina2 {
	max-width: 942px;
	padding: 50px 0;
	width: 80%;
}

#malla-tazon {
	max-width: 960px;
	padding: 50px 0;
	width: 80%;
}

#render-tazon {
	max-width: 960px;
	padding: 50px 0;
	width: 80%;
}

#tazon {
	max-width: 960px;
	padding: 50px 0;
	width: 80%;
}

#pnb {
	max-width: 960px;
	padding: 50px 0;
	width: 80%;
}

#repostal {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

#bbva {
	width: 80%;
	padding: 50px 0;
	max-width: 870px;
}

#aravaca {
	border: 1px solid #EEEEEE;
	width: 80%;
	margin: 50px 0;
	max-width: 800px;
}

#portada {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

#sumario {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

#paginas1 {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

#paginas2 {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

.amanuense {
	width: 80%;
	padding: 50px 0;
	max-width: 960px;
}

#curso {
	width: 100%;
	padding: 50px 0;
	max-width: 960px;
}

.cabecera {
	border-top: 3px solid;
	color: black;
	font-size: 100px;
	margin: 70px auto 0;
	padding: 70px 0 50px;
	text-align: center;
	width: 50%;
}

.h-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}
.ih-item.square {
  	float: left;
  	position: relative;
}
.ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ih-item.square.effect13 {
  overflow: hidden;
}
.ih-item.square.effect13 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect13 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect13 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
.ih-item.square.effect13 .info p {
  font-style: italic;
  font-size: 18px;
  position: relative;
  color: #fff;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square.effect13 a:hover .img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.ih-item.square.effect13 a:hover .info {
  visibility: visible;
  opacity: 1;
}
.ih-item.square.effect13.bottom_to_top .info {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect13.bottom_to_top a:hover .info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

#sobremi {
	font-size: 24px;
	line-height: 120%;
}

.miDescripcion {
	text-align: justify;
}

.oscuro {
	font-size: 20px;
	font-weight: 400;
	text-align: center;
}

.submit {
	text-align: center;
}

.big {
	font-size: 48px;
	font-weight: 400;
}

.bloqueRetrato {
	padding-top: 50px;
}

#contacto {
	padding: 0 35px 25px;
}

#form1 {
	margin: 0 auto;
	width: 80%;
}

.form-title {
	font-weight: 300;
	margin-top: 0;
	padding: 15px;
	text-align: center;
}

.feedback-input {
    background-color: #fbfbfb;
    border: 3px solid rgba(0, 0, 0, 0);
    border-radius: 0;
    box-sizing: border-box;
    color: #3c3c3c;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
}

.feedback-input {
    margin-bottom: 10px;
    padding: 13px 13px 13px 54px;
    width: 100%;
}

#button {
	padding-bottom: 22px;
    padding-top: 22px;
    width: 50%;
	border: none;
}

.btGeneral {
	background-color: black;
	color: white;
	transition-duration: 0.3s;
    transition-property: background-color;
    transition-timing-function: linear;
}

.btGeneral:hover {
	background-color: #444444;
}

@media (max-width: 767px) {
	.menu {
		background-image: url("../img/pattern.png");
		background-repeat: repeat;
		width: 100%;
		z-index: 99;
	}

	.trabajo-texto {
		padding: 110px 30px 15px;
		width: 100%;
	}
	
	.imagenes {
		width: 100%;
	}

	#portfolio {
		padding-top: 141px;
	}

	#sobremi {
		padding: 1px 0;
	}

	#contacto {
		padding: 1px 35px 25px;
	}

	.cabecera {
		margin: 141px auto 0;
		width: 70%;
	}

	.contenido {
		width: 100%;
	}

	.navbar-brand {
		padding-right: 0px;
		padding-left: 5px;
		width: 60%;
	}

	.navbar-toggle {
		margin-top: 38px;			
	}

	.navbar-default .navbar-toggle {
		border-color: transparent;
	}

	.navbar-default .navbar-toggle .icon-bar {
		background-color: black;
		border-radius: 3px;
		display: block;
		height: 6px;
		width: 35px;
	}
	
	.miDescripcion {
		padding: 0 8%;
	}

	.autorretrato img {
		max-width: 400px;
		width: 80%;
	}

	#form1 {
		width: 92%;
	}
	
	.ih-item.square {
		height: 50%;
	  	width: 50%;
	}
	
	.secundaria {
		display: none;
	}

	.bottom {
		display: none;
	}

	.footer a div {
		float: right;
		height: 40px;
		margin: 10px 15px 10px 0;
		width: 40px;
	}
	
	.footer a div span {
		color: black;
		font-size: 40px;
		transition-property: color;
		transition-duration: 0.3s;
		transition-timing-function: linear;
	}

	.footer a div span:hover {
		color: #00AEf6;
	}
	
	#cartelCine {
		padding: 10%;
		width: 100%;
	}

	#mockup-cine {
		padding: 10%;
		width: 100%;
	}

	#video-pnb {
		height: 140px;
		margin-bottom: 50px;
		width: 258px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.menu {
		width: 27%;
		height: 100%;
		min-height: 540px;
		padding-bottom: 70px;
		z-index: 99;
	}
	
	.contenido {
		padding-left: 27%;
		position: relative;	
		width: 100%;
	}
	
	.trabajo-texto {
		width: 100%;
	}
	
	.imagenes {
		width: 100%;
	}
	
	.navbar-custom {
		text-align: right;
		float: left;
		width: 100%;
	}

	.navbar-brand {
		width: 100%;
	}
	
	.navbar-brand span {
		font-size: 72px;
	}

	.nav > li > a:hover, .nav > li > a:focus {
		background: transparent;
	}

	.social {
		height: 35px;
		margin-right: 12px;
		width: 35px;
	}

	.social span {
		font-size: 35px;
	}
	
	.miDescripcion {
		padding: 50px 7%;
	}
	
	#form1 {
		width: 93%;
	}
	
	.ih-item.square {
		height: 25%;
	  	width: 25%;
	}
	
	.secundaria {
		margin-top: 50px;
	}

	footer {
		display: none;
	}
	
	#cartelCine {
		padding: 10%;
	}

	#mockup-cine {
		padding: 10%;
	}
	
	.cabecera {
		width: 70%;
	}	

	.miDescripcion {
		padding: 0 10%;
	}

	#form1 {
		width: 80%;
	}
	
	#video-pnb {
		height: 246px;
		margin-bottom: 50px;
		width: 454px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.menu {
		width: 27%;
		height: 100%;
		min-height: 540px;
		padding-bottom: 70px;
		z-index: 99;
	}
	
	.contenido {
		padding-left: 27%;
		position: relative;	
		width: 100%;
	}
	
	.trabajo-texto {
		width: 35%;
		height: 100%;
		min-height: 540px;
	}
	
	.imagenes {
		width: 65%;
	}

	.navbar-custom {
		text-align: right;
		float: left;
		width: 100%;
	}
	
	.navbar-brand {
		width: 100%;
	}

	.nav > li > a:hover, .nav > li > a:focus {
		background: transparent;
	}
	
	.ih-item.square {
		height: 25%;
	  	width: 25%;
	}
	
	.secundaria {
		margin-top: 50px;
	}

	footer {
		display: none;
	}
	
	#cartelCine {
		width: 100%;
	}

	#mockup-cine {
		width: 100%;
	}
	
	.cabecera {
		width: 60%;
	}	

	.miDescripcion {
		padding: 0 10%;
	}

	#form1 {
		width: 80%;
	}

	#video-pnb {
		height: 206px;
		margin-bottom: 50px;
		width: 380px;
	}
}

@media (min-width: 1200px) {
	.menu {
		width: 23%;
		height: 100%;
		min-height: 540px;
		padding-bottom: 70px;
		z-index: 99;
	}
	
	.contenido {
		padding-left: 23%;
		position: relative;	
		width: 100%;
	}
	
	.trabajo-texto {
		width: 28%;
		height: 100%;
		min-height: 540px;
	}
	
	.imagenes {
		width: 72%;
	}
	
	.navbar-custom {
		text-align: right;
		float: left;
		width: 100%;
	}
	
	.navbar-brand {
		width: 100%;
	}

	.nav > li > a:hover, .nav > li > a:focus {
		background: transparent;
	}
	
	.ih-item.square {
		height: 25%;
	  	width: 25%;
	}

	.secundaria {
		margin-top: 50px;
	}

	footer {
		display: none;
	}

	#cartelCine {
		padding: 12%;
		width: 70%;
	}

	#mockup-cine {
		padding: 12%;
		width: 70%;
	}
	
	.miDescripcion {
		padding: 0 20%;
	}
	
	#form1 {
		width: 60%;
	}

	#video-pnb {
		width: 640px;
		height: 360px;
		margin-bottom: 50px;
	}

}