html, body{
	height: 100%;
	width: 100%;
}


/*-- header --*/
.header{
	background:url(../images/Puntoar-web-teclado-fondo.webp) no-repeat 0px 0px;
	background-size:cover;
	height: 100%;
	position: relative;
}
.intro{
	padding:4em 0;
}
.head-section{
	
}
.head-section h2{
	color: #0087cc;
	text-transform:uppercase;
	font-weight:700;
	font-size:1.8em;
	margin:0 0 0.4em 0;
	padding:0
}
.head-section span{
	height:2px;
	width:7%;
	background: gray;
	display:inline-block;
}

/*-- portfolio --*/
.portfolio{
	padding:5em 0 4em;
}
.portfolio p{
	color:white;
	font-weight: 400;
	font-size: 1.3em;
	width: 80%;
	margin: 1em auto 2em auto;
	line-height: 1.8em;
	font-family: 'Montserrat', sans-serif;
}
.portfolio-grid{
	position:relative;
}
.portfolio-grid-pic{
	position:relative;
}
.portfolio-grid-pic img{
	width:100%;
}
.portfolio-grid-caption{
	position: absolute;
	top: 0;
	width: 100%;
	background:rgba(66, 74, 81, 0.2);
	bottom:0;
	right:0;
	padding-top:2em;
	display:none;
}
.portfolio-grid:hover div.portfolio-grid-caption{
	display:block;
}
.portfolio-grid-caption h4{
	color:#FFF;
	font-weight:700;
	font-size:1.5em;
	text-transform:uppercase;
}
.portfolio-grid-caption h5{
	color: black;
	font-size:1.6em;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}
.portfolio-grid-caption span{
	width:20%;
	height:2px;
	display:inline-block;
	background:gray;
}
a.more{
	background: gray;
	color:#FFF;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	letter-spacing:0.1em;
	padding:0.8em 2em;
	text-decoration:none;
	margin:3em 0;
	display:inline-block;
}
a.more:hover{
	background: #00afef;
}
z
/*-- responsive-design --*/
@media(max-width:1280px){
	.header-info {
		width: 44%;
	}
	.header {
		min-height: 679px;
	}
}
@media(max-width:1024px){
	.header-info {
		width: 55%;
		left: 24%;
	}
	.header {
		min-height: 679px;
	}
	.menu ul li a {
		margin: 0 3em;
	}
}
@media(max-width:768px){
	.header-info {
		width: 72%;
		left: 15%;
	}
	.header {
		min-height: 679px;
	}
	
}
@media(max-width:640px){
	.header-info {
		width: 72%;
		left: 14%;
		top: 36%;
	}
	.header {
		min-height: 584px;
	}
	.intro {
		padding: 2em 0;
	}
	.head-section h2 {
		font-size: 1.5em;
	}
	.head-section span {
		width: 12%;
	}
	.intro p,.portfolio p,.services p,.about-us p{
		font-size: 1.1em;
	}
	.portfolio {
		padding: 2.5em 0;
	}
}
@media(max-width:480px){
	.header-info {
		width: 72%;
		left: 14%;
		top: 37%;
	}
	.header {
		min-height: 475px;
	}
	.intro {
		padding: 2em 0;
	}
	.head-section h2 {
		font-size: 1.3em;
		margin: 0 0 0.3em 0;
	}
	.head-section span {
		width: 15%;
	}
	.intro p,.portfolio p,.services p,.about-us p{
		font-size: 1em;
		margin: 0.8em auto 1.2em;
	}
	.portfolio {
		padding: 2.5em 0;
	}
	.header-info span {
		width: 20%;
	}
	.text-box {
		width:100%;
		float:none;
		margin-right:0%;
		margin-bottom: 1em;
	}
	.contact-right input[type="submit"]{
		float:none;
		width:100%;
		margin-top:1em;
	}
	#small-dialog iframe{
		min-height:200px;
		border:none;
	}
}
@media(max-width:320px){
	html, body{
		height: 100%;
	}
	.header-info{
		width: 83%;
		left: 8%;
		top: 37%;
	}
	.header {
		min-height: 350px;
	}
	.intro {
		padding: 1.5em 0;
	}
	.head-section h2 {
		font-size: 1.3em;
		margin: 0 0 0.3em 0;
	}
	.head-section span {
		width: 15%;
	}
	.intro p,.portfolio p,.services p,.about-us p{
		font-size: 1em;
		margin: 0.8em auto 1.2em;
		width:100%;
	}
	.portfolio {
		padding: 1.5em 0 1.2em;
	}
	.header-info span {
		width: 25%;
	}
	.text-box {
		width:100%;
		float:none;
		margin-right:0%;
		margin-bottom: 1em;
	}
	.contact-right input[type="submit"]{
		float:none;
		width:100%;
		margin-top:1em;
	}
	.header-info h2 {
		font-size: 1em;
	}
	span.menu-icon {
		top: 30px;
	}
	.menu ul {
		margin: 2.2em 0 0 3em;
	}
	.shope a {
		padding: 1em 2.5em;
	}
	.shope {
		padding: 2em 0;
	}
	.client-list {
		margin-top: 2em;
	}
	
}