/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

.regular{
	display: block;
}

.mobile{
	display: none;
}

.flex-regular{
	display: flex;
}

.flex-mobile{
	display: none;
}

.gradient-text-orange {
	background-color: #f9922c;
	background-image: linear-gradient(45deg, #fab351, #f08213);
	background-size: 100%;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-text-fill-color: transparent;
}

.shadow-text-orange{
	font-family: 'Oleo Script', cursive;
	color: rgba(0, 0, 0, 0);
	text-shadow:2px 2px 0px rgb(239, 107, 19),
				8px 8px 0px rgba(68, 25, 3, 0.55),
				20px 20px 10px rgba(48, 2, 48, 0.6);
	letter-spacing: 2px;
	/* position: absolute;
	z-index: 1;
	*/
}

h2{
	font-family: 'Oleo Script', cursive;
	font-size: 4rem;
	line-height: 4rem;;
	font-weight: 400;
}

p{
	font-family: 'Lato', sans-serif;
	font-size: 1.3rem;
}

.hBig{
	font-size: 5rem;
}

.hSmall{
	font-size: 3.5rem;
}

.pBig{
	font-size: 1.5rem;
}

.pSmall{
	font-size: 1.1rem;
}

.pBlack{
	font-weight: 900;
}

.pRight{
	text-align: right;
}

.pBottom{
	margin-top: 50px;
}

/* #Page Styles
================================================== */


/*:::::::::::::::::::::::: INICIO ::::::::::::::::::::::::::*/

#inicio{ 
	flex-flow: column nowrap;
    align-items: center;
    justify-content: center; 
	position: relative;         
}

	#inicio h1{
		font-family: 'Oleo Script', cursive;
		color: #f9bf2c;
		font-size: 14rem;
		letter-spacing: 2px;
		z-index: 2;
	}

	#inicio nav{
		height: 32vh;
		height: calc(var(--vh, 1vh) * 32);
		width: 100%;
		background: linear-gradient(180deg, rgba(5,3,53,0.65) 0%, rgba(55,45,170,0) 100%),
		          rgba(106,9,156,0);
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: flex-start;
		position: relative;
		z-index: 9;
	}

	#inicio header{
		height: 40vh;
		height: calc(var(--vh, 1vh) * 40);
		display: flex;
		width: 100%;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	#inicio footer{
		height: 28vh;
		height: calc(var(--vh, 1vh) * 28);
		width: 100%;
		background: linear-gradient(180deg, rgba(55,45,170,0) 0%, rgba(4,137,254,0.75) 100%),
				  rgba(11,4,127,0);
	}

		#inicio h2{
			position: relative;
			font-family: 'Lato', sans-serif;
			font-size: 1rem;
			line-height: 1.6rem;
			letter-spacing: 1px;
			color: rgba(255, 255, 255, 0.7);
			text-align: left;
			flex: 2 0 0;
			min-width: 60%;
			top:-20px;
		}
			#inicio h2 span{
				font-size: 1.2rem;
			}
/*::::::::::::::Sprites BTN:::::::::::::*/

.starBtn{
	width: 155px;
	height: 160px;
	position: relative;
	margin: 10px;
	cursor: pointer;
}

.starBtn h3{
	position: absolute;
	bottom: -30px;
	color: rgba(255, 255, 255, 0.4);
	font-family: 'Oleo Script', cursive;
	font-size: 1.3em;
	text-align: center;
	left: 15%;
	cursor: pointer;

}

.starBtn:hover h3{
	color: rgba(255, 255, 255, 0.6);
}

#inicio header{
	display: flex;
	position: relative;
}

	.soluciones{
		background: url('../04-images/iconos-sprite/soluciones-icons-sprite-2.png') no-repeat 0px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		top: 2vh;
	}
	.soluciones:hover{
		background: url('../04-images/iconos-sprite/soluciones-icons-sprite-2.png') no-repeat -148px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.desarrollo{
		background: url('../04-images/iconos-sprite/desarrollo-icons-sprite-2.png') no-repeat 0px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		top: 8vh;
		top: calc(var(--vh, 1vh) * 8);
	}
	.desarrollo:hover{
		background: url('../04-images/iconos-sprite/desarrollo-icons-sprite-2.png') no-repeat -148px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.redes{
		background: url('../04-images/iconos-sprite/redes-icons-sprite-2.png') no-repeat 0px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		top: 2vh;
		top: calc(var(--vh, 1vh) * 2);
	}
	.redes:hover{
		background: url('../04-images/iconos-sprite/redes-icons-sprite.png') no-repeat -148px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.ads{
		background: url('../04-images/iconos-sprite/ads-icons-sprite.png') no-repeat 0px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		top: 8vh;
		top: calc(var(--vh, 1vh) * 8);
	}
	.ads:hover{
		background: url('../04-images/iconos-sprite/ads-icons-sprite.png') no-repeat -148px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	.contacto{
		background: url('../04-images/iconos-sprite/contacto-icons-sprite.png') no-repeat 0px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		top: 2vh;
		top: calc(var(--vh, 1vh) * 2);
	}
	.contacto:hover{
		background: url('../04-images/iconos-sprite/contacto-icons-sprite.png') no-repeat -148px 0px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

/*:::::::::::::::::::::::: SECCIONES ::::::::::::::::::::::::::*/

#soluciones, #desarrollo, #redes, #publicidad, #contacto{
	background: url('../04-images/bgn-paper-1.jpg') repeat left top;
}

section .content{
	display: flex;
	position: relative;
	flex-flow: row wrap;
	justify-content: flex-start;
	height: 72vh;
	height: calc(var(--vh, 1vh) * 72);
	z-index: 4;
}
	section .content article{
		flex: 1 1 0;
		display: flex;
		flex-flow: column wrap;
		justify-content: space-around;
		align-items: flex-start;
		padding: 20px 20px 10vh 20px;
		min-width: 420px;
		  position: relative;
		  z-index: 4;
	}
		.sectionTag{
			position: absolute;
			top:5px;
			left: -5px;
			width:35%;
			height: 200px;
			z-index: 0;
		}
		section .content header{
			display: flex;
			width: 98%;
			min-height: 100px;
            margin: 10px;
			flex-flow: row nowrap;
			justify-content: flex-end;
			align-items: center;
			position: relative;
			z-index: 1;
		}
		section .content p{
			-webkit-box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
			-moz-box-shadow:    2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
			box-shadow:         2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
			background: rgba(255, 255, 255, 0.8);
			margin-bottom: 10px;
			padding: 10px;
			position: relative;
			z-index: 4;
		}
	section .content figure{
		flex: 2 0 0;
		min-width: 350px;
		min-height: 300px;
		border: 8px solid #fff;
		position: relative;
		z-index: 3;
		-webkit-box-shadow: -3px 5px 5px 3px rgba(0, 0, 0, 0.3); 
		-moz-box-shadow:    -3px 5px 5px 3px rgba(0, 0, 0, 0.3); 
		box-shadow:         -3px 5px 5px 3px rgba(0, 0, 0, 0.3); 

	}

	section footer{
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content:center;
		align-items: center;
		height: 28vh;
		height: calc(var(--vh, 1vh) * 28);
		padding: 20px;
		z-index: 1;
	}
		section footer p{
			flex: 2 1 0;
			padding-left: 20px;
		}
		section footer aside{
			flex: 2 0 0;
			display: flex;
			flex-flow: row nowrap;
		}

		.tagCloud{
			display: flex;
			flex-flow: row wrap;
			flex: 1 0 0;
			justify-content: space-evenly;
			align-items: center;
			padding: 5px;
			font-family: 'Oleo Script', cursive;
			overflow: hidden;
			border-right: 4px solid rgba(77, 77, 77, 0.5);
		}
		.tagCloud h3{
			margin: 0.3rem;
			/*color: rgba(6, 114, 84, 1);*/
			color: rgb(246, 113, 4);
			font-size: 1.2rem;
			/*text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);*/
			cursor: pointer;
		}


		.btnSpace{
			flex: 1 0 0;
		}

		.corner{
			width: 40px;
			height: 40px;
			position: absolute;
			right: -40px;
			z-index: 5;
			top:20%;
		}
			.cornerTop{
				background: url('../04-images/corner-sprite-2.png') no-repeat 0px -79px;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
			}
			.cornerCenter{
				background: url('../04-images/corner-sprite-2.png') no-repeat 0px -39px;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
			}
			.cornerBottom{
				background: url('../04-images/corner-sprite-2.png') no-repeat 0px 0px;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
			}

/*:::::::::::::::::::::::: SOLUCIONES ::::::::::::::::::::::::::*/

#soluciones{

}
	#soluciones .sectionTag{
		background: url('../04-images/logo-soluciones-tag.png') no-repeat left top;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#soluciones .content figure{
		background: url('../04-images/bgn-2.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#soluciones footer{
		background: rgba(0, 255, 184, 0.3);
	}

	#soluciones .bandBottom{
		background: rgba(0, 255, 184, 0.5);
	}

#desarrollo{

}
	#desarrollo .sectionTag{
		background: url('../04-images/logo-desarrollo-tag.png') no-repeat left top;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#desarrollo .content figure{
		background: url('../04-images/bgn-3.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	#desarrollo footer{
		background: rgba(204, 237, 0, 0.3);
		
	}
	
	#desarrollo .bandBottom{
		background: rgba(204, 237, 0, 0.5);
	}

#redes{

}
	#redes .sectionTag{
		background: url('../04-images/logo-redes-tag.png') no-repeat left top;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#redes .content figure{
		background: url('../04-images/bgn-4.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	#redes footer{
		background: rgba(0, 226, 255, 0.3);
	}

	#redes .bandBottom{
		background: rgba(0, 255, 255, 0.5);
	}

#publicidad{

}
	#publicidad .sectionTag{
		background: url('../04-images/logo-ads-tag.png') no-repeat left top;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}

	#publicidad .content figure{
		background: url('../04-images/bgn-5.jpg') no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	#publicidad footer{
		background: rgba(232, 0, 231, 0.3);

	}
	#publicidad .bandBottom{
		background: rgba(232, 0, 231, 0.5);
	}
	

#contacto{
	position: relative;
	display: flex;
}

#contacto .sectionTag{
	background: url('../04-images/logo-contacto-tag.png') no-repeat left top;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

#contacto figure{
	position: relative;
}

#cover{
	position: absolute;
	display: flex;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(203,241,12,0.4) 0%, rgba(231,160,6,0.1) 50%, rgba(247,115,2,0.4) 100%);
}

#contacto video{
	display: flex;
	object-fit: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}

#contacto article address{
	/*display: flex;*/
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
}

			#contacto aside address{
				/*display: flex;*/
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: 100px;
				padding-bottom: 50px;
			}

	#contacto address a{
		display: flex;
		flex-flow: column nowrap;
		text-align: center;
		position: relative;
		flex: 1 0 0;
		justify-content: flex-start;
		align-items:  center;

	}
	
	#contacto address a img{
		position: absolute;
		top: -10px;
		left: 45%;
	}

	#contacto address i{
		width: 60px;
		height: 60px;
		color:rgb(239,107,20);
		font-size: 2.4rem;
		-webkit-border-radius: 100px; 
		-moz-border-radius: 100px; 
		border-radius: 100px; 
		background: rgba(127, 255, 212, 0.8);
		min-width: 50px;
		min-height: 50px;
		padding: 10px;
		cursor: pointer;
		margin: 10px;
		border: 1px solid rgba(74,74,74, 0.8);
		-webkit-box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
		-moz-box-shadow:    2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
		box-shadow:         2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
	}
	
		#contacto address i.fa-mobile-screen-button{
			padding: 10px 15px 10px 15px;
		}
	
	#contacto address i:hover{
		color: rgb(127, 255, 212);
		background: rgba(239,107,20, 0.8);
	}
	
	#contacto address span{
	 	background: rgb(74,74,74);
	 	color: rgb(127, 255, 212);
	 	font-size: 0.8rem;
	 	font-weight: 600;
	 	padding: 5px 10px;
	 	-webkit-border-radius: 100px; 
		-moz-border-radius: 100px; 
		border-radius: 100px; 
		position: relative;
	}


	#contacto h2{
		color: rgb(223, 103, 2);
	}

#contacto footer{
	display: flex;
	flex-flow: column nowrap;
	background: rgba(245, 99, 1, 0.4);

}
#contacto .bandBottom{
	background: rgba(245, 99, 1, 0.5);
}

#contacto footer p{
	width: 100%;
	padding-left: 20px;
	text-align: left;
}

#contacto footer aside{
	width: 100%;
	/*display: flex;*/
	flex-flow: row wrap;
}
						
	#contacto footer ul{
		/*display: flex;*/
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		flex: 2 0 0;
		overflow: scroll;
		max-height: 150px;

	}
		#contacto footer ul li{
			list-style: none;
			margin: 5px;
		}
			#contacto footer ul img{	
				width: 110px;
				height: 50px;
				-webkit-background-size: contain;
				-moz-background-size: contain;
				-o-background-size: contain;
				background-size: contain;
				-webkit-box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
				-moz-box-shadow:    2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
				box-shadow:         2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
				-webkit-border-radius: 5px; 
				-moz-border-radius: 5px; 
				border-radius: 5px; 
			}

.bosch{
	background: #fff url("../04-images/logos/logo-bosch.jpg") no-repeat center center;
}
.dremel{
	background: #fff url("../04-images/logos/logo-dremel.jpg") no-repeat center center;
}
.skp{
	background: #fff url("../04-images/logos/logo-skp.jpg") no-repeat center center;
}
.loctite{
	background: #fff url("../04-images/logos/logo-loctite.jpg") no-repeat center center;
}
.kodak{
	background: #fff url("../04-images/logos/logo-kodak.jpg") no-repeat center center;
}
.makita{
	background: #fff url("../04-images/logos/logo-makita.jpg") no-repeat center center;
}
.tec{
	background: #fff url("../04-images/logos/logo-tec.jpg") no-repeat center center;
}
.henkel{
	background: #fff url("../04-images/logos/logo-henkel.jpg") no-repeat center center;
}
.marquez{
	background: #fff url("../04-images/logos/logo-marquez.jpg") no-repeat center center;
}
.credicoop{
	background: #fff url("../04-images/logos/logo-credicoop.jpg") no-repeat center center;
}

#contacto span{
	margin-left: 5px;
	vertical-align: middle;
}

.scrollTag{
	position: absolute;
	bottom: 5px;
	left: 20%;
}

/* ::::::::::::::: FORM :::::::::::::::::*/

#contacto form{
	width: 95%;
	-webkit-box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
	-moz-box-shadow:    2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
	box-shadow:         2px 2px 5px 3px rgba(0, 0, 0, 0.3); 
	background: rgb(100, 248, 206);
	margin-bottom: 10px;
	padding: 10px;
	position: relative;
	z-index: 4;
	margin: 10px auto 30px auto;
}

#contacto .cornerCenter{
	background: url('../04-images/corner-center-2.png') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#contacto form table{
	width: 100%;
}
	input[type='text'], input[type='tel'], input[type='email']{
		height: 30px;
		padding: 5px;
		background: rgba(0, 0, 0, 0.5);
		width: 95%;
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 5px; 
		/* Firefox 1-3.6 */
		-moz-border-radius: 5px; 
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 5px; 
		margin-bottom: 5px;
		-webkit-box-shadow: inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		-moz-box-shadow:    inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		box-shadow:         inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		font-family: 'Lato', sans-serif;
		font-size: 1rem; 
		padding-left: 10px;
	}

	input::placeholder{
		color: rgb(162, 251, 226);
		font-family: 'Lato', sans-serif;
		font-size: 1rem; 
	}

	textarea{
		background: rgba(0, 0, 0, 0.5);
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 5px; 
		/* Firefox 1-3.6 */
		-moz-border-radius: 5px; 
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 5px; 
		width: 98%;
		height: 100px;
		-webkit-box-shadow: inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		-moz-box-shadow:    inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		box-shadow:         inset 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		color: rgb(162, 251, 226);
		font-family: 'Lato', sans-serif;
		font-size: 1rem;
		padding: 10px;
	}

	input[type='submit']{
		padding: 10px;
		width: 50%;
		font-weight: 900;
		color: #333;
		font-size: 1.2rem;
		background: rgba(246, 117, 31, 0.9);
			-webkit-border-radius: 15px; 
			-moz-border-radius: 15px; 
			border-radius: 15px; 
		margin-left: 25%;
		-webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		-moz-box-shadow:    0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		box-shadow:         0px 0px 3px 2px rgba(0, 0, 0, 0.6); 
		cursor: pointer;
		margin-top: 20px;
	}

		textarea::-webkit-input-placeholder {
			color: rgb(162, 251, 226);
			font-family: 'Lato', sans-serif;
			font-size: 1rem;
		}
		textarea:-moz-placeholder { /* Firefox 18- */
			color: rgb(162, 251, 226);
			font-family: 'Lato', sans-serif;
			font-size: 1rem; 
		}
		textarea::-moz-placeholder {  /* Firefox 19+ */
			color: rgb(162, 251, 226); 
			font-family: 'Lato', sans-serif;
			font-size: 1rem; 
		}
		textarea:-ms-input-placeholder {
			color: rgb(162, 251, 226);  
			font-family: 'Lato', sans-serif;
			font-size: 1rem; 
		}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px){

	/*:::::::::::::::::::::::: GLOBAL ::::::::::::::::::::::::::*/

		.regular{
			display: none;
		}

		.mobile{
			display: block;
		}

		.flex-regular{
			display: none;
		}

		.flex-mobile{
			display: flex;
		}

		h2{
			font-size: 2rem;
		}
		p{
			font-family: 'Lato', sans-serif;
			font-size: 0.9rem;
		}
		.hBig{
			font-size: 3rem;
		}
		.hSmall{
			font-size: 2.5rem;
		}
		.pBig{
			font-size: 1rem;
		}
		.pSmall{
			font-size: 0.9rem;
		}
		.pBlack{
			font-weight: 900;
		}
		.pRight{
			text-align: right;
		}
		.pBottom{
			margin-top: 20px;
		}
		
		.btnSpace{
			display: none;
		}
	/*:::::::::::::::::::::::: INICIO ::::::::::::::::::::::::::::*/

		#inicio h1{
			font-size: 9rem;
			letter-spacing: 3px;
			z-index: 2;
		}
		
		#inicio h2 {
	    	line-height: 1.2rem;
			letter-spacing: 1px;
			top: -60px;
		}

		#inicio h2 spam{
			margin-top: 5px;
		}

		#inicio nav{
			height: 30vh;
			height: calc(var(--vh, 1vh) * 30);
			background: linear-gradient(180deg, rgba(5,3,53,0.65) 0%, rgba(55,45,170,0) 100%),
			          rgba(106,9,156,0);
			padding: 10px;
		}
	
		#inicio header{
			height: 50vh;
			height: calc(var(--vh, 1vh) * 50);
		}
	
		#inicio footer{
			height: 20vh;
			height: calc(var(--vh, 1vh) * 20);
			background: linear-gradient(180deg, rgba(55,45,170,0) 0%, rgba(4,137,254,0.75) 100%),
					  rgba(11,4,127,0);
		}

		.starBtn{
			width: 85px;
			height: 90px;
			position: relative;
			margin: 10px;
		}

		.starBtn h3{
			font-size: 1em;
		}

		.soluciones:hover{
			background: url('../04-images/iconos-sprite/soluciones-icons-sprite-2.png') no-repeat -88px 0px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
	
		.desarrollo:hover{
			background: url('../04-images/iconos-sprite/desarrollo-icons-sprite-2.png') no-repeat -88px 0px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
	
		.redes:hover{
			background: url('../04-images/iconos-sprite/redes-icons-sprite.png') no-repeat -88px 0px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

		.ads:hover{
			background: url('../04-images/iconos-sprite/ads-icons-sprite.png') no-repeat -88px 0px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
	
		.contacto:hover{
			background: url('../04-images/iconos-sprite/contacto-icons-sprite.png') no-repeat -88px 0px;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

		.contacto{
			top: 8vh;
			top: calc(var(--vh, 1vh) * 8);
			left: 40px;
		}
	/*:::::::::::::::::::::::: SECCIONES ::::::::::::::::::::::::::*/

		section .content{
			flex-flow: column nowrap;
			height: 75vh;
			height: calc(var(--vh, 1vh) * 75);
		}
		section .content article{
			justify-content: space-between;
    		padding: 20px;
			flex: 1 1 0;
		}

		section .content header{
			min-height: 40px;
			padding-right: 40px;
		}
		
		section .content p {
			width: 90%;
			margin-right: 5%;
		}

		section .content figure{
			flex: 1 1 0;
			min-height: 200px;
			border: none;
			-webkit-box-shadow: inset 2px 2px 5px 3px rgba(0, 0, 0, 0.5); 
			-moz-box-shadow:    inset 2px 2px 5px 3px rgba(0, 0, 0, 0.5); 
			box-shadow:         inset 2px 2px 5px 3px rgba(0, 0, 0, 0.5); 
		}


		section footer{
			position: relative;
			display: flex;
			flex-flow: row wrap;
			justify-content:center;
			align-items: flex-start;
			height: 25vh;
			height: calc(var(--vh, 1vh) * 25);
			z-index: 1;
		}
			section footer p{
				flex: 1 0 0;
				padding: 20px 10px 10px 10px;
				width: 100%;
			}
			section footer p.pBig{
				font-size: 1rem;
			}
			section footer p.pSmall{
				font-size: 0.9rem;
			}

			section footer aside{
				flex: 1 1 0;
			}
			section footer p.pBig{
				font-size: 1rem;
			}
			
		    section footer p, section footer p.pRight{
				text-align: center;
			}

			.corner{
				width: 20px;
				height: 20px;
				right: -20px;
				z-index: 5;
				top:20%;
			}
				.cornerTop{
					background: url('../04-images/corner-sprite-2.png') no-repeat 0px -39px;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
				}
				.cornerCenter{
					background: url('../04-images/corner-sprite-2.png') no-repeat 0px -19px;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
				}
				.cornerBottom{
					background: url('../04-images/corner-sprite-2.png') no-repeat 0px 0px;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
				}
	
	/*:::::::::::::::SOLUCIONES::::::::::::::*/


	/*::::::::::::::::::::CONTACTO::::::::::::::*/


			#contacto video{
				object-fit:cover;
			}

			#contacto form{
				padding-bottom: 5px;
				margin-bottom: 10px;
			}
			
			#contacto footer p {
			    flex: 1 0 0;
			    padding: 40px 10px 10px 5px;
			    width: 100%;
			    font-size: 1.2rem;
			}

			#contacto footer ul img{	
				width: 70px;
				height: 30px;
			}
			
			#contacto form {
				width: 90%;
				margin: 10px 5% 10px 5px;
			}
			
			textarea {
				height: 70px;
			}
			
			input[type='submit'] {
			    padding: 5px;
			    width: 50%;
			    font-weight: 900;
			    color: #333;
			    font-size: 1rem;
			    margin-top: 10px;
			}

			#contacto footer ul {
			    display: flex;
			    flex-flow: row wrap;
			    justify-content: center;
			    align-items: flex-start;
			    flex: 2 0 0;
			    overflow-x: scroll;
			    max-height: 100px;
			    width: 100%;
			    margin-bottom: 10px;
			}
			
	}
	

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}
	
	@media only screen and (min-width: 768px) and (max-height: 800px) {
		
		/*:::::::::::::::::::::::: Global ::::::::::::::::::::::::::*/
		
		h2{
			font-size: 2rem;
		}
		p{
			font-family: 'Lato', sans-serif;
			font-size: 1rem;
		}
		.hBig{
			font-size: 2.5rem;
		}
		.hSmall{
			font-size: 2rem;
		}
		.pBig{
			font-size: 1.1rem;
		}
		.pSmall{
			font-size: 1rem;
		}
		.pBlack{
			font-weight: 900;
		}
		.pRight{
			text-align: right;
		}
		.pBottom{
			margin-top: 20px;
		}
		

		
/*:::::::::::::::::::::::: SECCIONES ::::::::::::::::::::::::::*/

		section .content {
			justify-content: flex-end;
		    height: 75vh;
		    height: calc(var(--vh, 1vh) * 75);
		}

		section .content header{
			min-height: 30px;
			padding-right: 40px;
		}

		section .content figure{
			max-height: 60vh;
			max-height: calc(var(--vh, 1vh) * 60);
		}


		section footer{
			height: 25vh;
			height: calc(var(--vh, 1vh) * 25);
		}
		
		.bandBottom {
			height: 25vh;
			height: calc(var(--vh, 1vh) * 25);
			min-height: 200px;
		}
		
			section footer p.pBig{
				font-size: 1.1rem;
			}
			section footer p.pSmall{
				font-size: 1rem;
			}
			section footer p.pBig{
				font-size: 1.1rem;
			}
		
		section footer aside {
			min-height: 150px;
		}
		
		/*:::::::::::::::::::::::CONTACTO:::::::::::::::::*/
		#contacto form{
			margin: 10px auto 5px auto;
		}
		
		textarea {
		    height: 80px;
    	}
    	
    	#contacto article address{
	/*display: flex;*/
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
}

			#contacto aside address{
				/*display: flex;*/
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: 80px;
				padding-bottom: 50px;
			}

			
			#contacto address a img{
				position: absolute;
				top: -10px;
				left: 45%;
			}
		
			#contacto address i{
				width: 50px;
				height: 50px;
				margin: 10px;
				font-size: 2.2rem;
				padding: 5px;
			}
			
				#contacto address i.fa-mobile-screen-button{
					padding: 5px 10px 5px 10px;
				}
			
			
			#contacto address span{
			 	background: rgb(74,74,74);
			 	font-size: 0.8rem;
			 	font-weight: 600;
			 	padding: 5px 10px;
			 	-webkit-border-radius: 50px; 
				-moz-border-radius: 50px; 
				border-radius: 50px; 
			}

		
	}
	
	


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile 
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) 
@media (min-width: 550px) {}

/* Larger than tablet 
@media (min-width: 750px) {}

/* Larger than desktop 
@media (min-width: 1000px) {}

/* Larger than Desktop HD 
@media (min-width: 1200px) {}

*/

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/