/*
* 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
================================================== */

*{
	margin: 0;
	padding:0;
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
  }
  
  
  
  body{
	  /*font-family: 'Nunito Sans', sans-serif;*/
	  font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
	  font-family: 'Lato', sans-serif;
	  background: rgb(29,4,90);
	  color: #333;
	  font-size: 16px;
  }
  
    a, a:active, a:visited{
	  text-decoration: none;
  }

  main{
	  z-index: 0;
  }

  section{
	display: flex;
	position: relative;
	z-index: 1;
	border: none;
  }

.bgn{
	position: absolute;
	z-index: 1;
}

.top{
	position: absolute;
	top: 0px;
	z-index: 2;
	width: 100%;
}


.left{
	position: absolute;
	left: 0px;
	z-index: 2;
	height: 100vh;
}

.bandRight{
	position: absolute;
	right: 0px;
	z-index: 2;
	height: 100vh;
	width: 25vw;
	min-width: 250px;
	background: rgba(251, 114, 003, 0.65);
}

.bandBottom{
	position: absolute;
	bottom: 0px;
	z-index: 0;
	width: 100%;
	height: 30vh;
	min-height: 250px;
	/*background: rgba(003, 251, 219, 0.75);*/
}

/*:::::::::::::::Main Nav:::::::::::::::::::*/

#mainNav{
	display: flex;
	position: fixed;
    height: 200px;
    width: 200px;
    z-index: 999;
    bottom:10px;
    right: 10px;
	padding: 25px;
	background:  url('../04-images/bgn-nav-8-b.png') no-repeat center center;
	/*background-color: rgba(255, 255, 255, 0.5);*/
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

#mainNav h4{
	position: relative;
}
#mainNav h3{
	position: relative;
}

	.centralBtn{
		position: relative;
		z-index: 3;
	}

	.verticalBtn{
		display: flex;
		flex-direction: column;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		left: 0px;
		z-index: 2;
	}

	.horizontalBtn{
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 62.5px;
		z-index: 1;
	}

	.btnSection{
		width: 90px;
		height: 90px;
		/*background: rgba(003, 251, 219, 0.9);*/
		/*background:radial-gradient(180deg, rgba(50,50,50,0.8) 0%, rgba(003, 251, 219,1) 20%, rgba(003, 251, 219,1) 80%, rgba(50,50,50,0.8) 100%);*/
		background: radial-gradient(rgb(003, 251, 219) 50%, rgb(50,50,50));
		-webkit-border-radius: 75px; 
		-moz-border-radius: 75px;
		border-radius: 75px;
  		position: absolute;
  		z-index: 3;
  		left:30px;
  		top:30px;
		/*border: 1px solid rgba(050, 050, 050, 0.8);*/
		border: 2px solid rgb(223, 103, 2);
	}
			.btnSection h3{
				top:30px;
				text-align: center;
				font-size: 1.2em;
				font-family: 'Oleo Script', cursive;
				text-transform: capitalize;
				font-weight: 700;
				letter-spacing: -0.5px;
			}


	#mainNav .btnMain{
		flex-direction: column;
		color:rgb(127, 255, 212);
		font-size: 1em;
		text-align: center;
		cursor: pointer;
		border:2px solid rgb(223, 103, 2);
	}

		.verticalBtn .btnMain{
			width: 75px;
			height: 75px;
			background: radial-gradient(rgb(50,50,50) 50%, rgba(223, 103, 2));
			/*background: rgba(050, 050, 050, 0.8);*/
		}

			.verticalBtn .btnMain:hover, .horizontalBtn .btnMain:hover{
				-webkit-box-shadow: 0px 0px 4px 5px rgba(255, 255, 255, 0.5);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
				-moz-box-shadow:    0px 0px 4px 5px rgba(255, 255, 255, 0.5);;  /* Firefox 3.5 - 3.6 */
				box-shadow:         0px 0px 4px 5px rgba(255, 255, 255, 0.5);;

			}

		.verticalBtn .btnSection{
			width: 75px;
			height: 75px;
		}



		.horizontalBtn .btnMain{
			width: 75px;
			height: 75px;
			background: rgba(050, 050, 050, 0.8);
			background: radial-gradient(rgb(50,50,50) 50%, rgb(223, 103, 2));
		}

		.horizontalBtn .btnSection{
			width: 75px;
			height: 75px;
		}

			.btnTop{
  				-webkit-border-radius: 75px; 
  				-moz-border-radius: 75px;
  				border-radius: 75px;
			}
				.btnTop h4{
					top:6px;
					font-size: 0.8rem;
				}

			.btnBottom{
				-webkit-border-radius: 75px; 
				-moz-border-radius: 75px;
				border-radius: 75px;
			}
				.btnBottom h4{
					top:42px;
					font-size: 0.8rem;
				}

			.btnLeft{
				-webkit-border-radius: 75px; 
				-moz-border-radius: 75px;
				border-radius: 75px; 
  				display: block;
			}
				.btnLeft h4{
					top:25px;
					right: 20px;
				}

			.btnRight{
				-webkit-border-radius: 75px; 
				-moz-border-radius: 75px;
				border-radius: 75px; 
  				display: block;
			}
				.btnRight h4{
					top: 25px;
					left: 20px;
				}
		
			.btnLeft h4 i, .btnRight h4 i{
				font-size: 1.1rem;
			}

		.btnMain:hover{
			background: rgba(251, 114, 003, 0.8);
		}
		.btnMain:hover h4{
			color:#fff;
		}

/*
#secondNav{
	display: flex;
	position: absolute;
	background: rgba(000, 050, 050, 0.6);
    height: 100vh;
    width: 80px;
    z-index: 999;
    top:10px;
    right:0px;
}

	#secondNav li{
		list-style: none;
	}
*/



/*:::::::::::::::::::::Main Nav Mobile :::::::::::::::::*/

#mainNavMobile{
	display: none;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 50px;
	height: 100px;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9;
	bottom: 30vh;
	bottom: calc(var(--vh, 1vh) * 30);
	right: 0px;
	padding: 5px 10px 5px 10px;
	-webkit-border-radius: 20px 0 0 20px; 
	-moz-border-radius: 20px 0 0 20px; 
	border-radius: 20px 0 0 20px;  
}

div.bottomIcon, #mainNavMobile aside i{
	flex: 1 0 0;
	color:rgb(127, 255, 212);
	font-size: 1.6rem;
	-webkit-border-radius: 50px; 
	-moz-border-radius: 50px; 
	border-radius: 50px; 
	background: rgba(239,107,20, 0.8);
	padding: 5px;
	cursor: pointer;
	margin: 5px 0px 5px 0px;
}
	div.bottomIcon:hover{
		color:rgb(239,107,20);
		background: rgb(127, 255, 212);
	}

#mainNavMobile aside h3{
	color: rgb(239,107,20);
	font-family: 'Oleo Script', cursive;
	font-weight: 700;
	text-transform: capitalize;
	font-size: 1.6rem;
	margin-top: -5px;
	margin-bottom: -5px;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.8);
}

#mainNavMobile aside{
	flex: 2 0 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}


	#mainNavMobile aside i{
		margin: 0 10px 0 10px;
		padding: 10px;
	}





/* ::::::::::: All the Main snapping stuff :::::::::: */

.scroll-container {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
}

#inicio, #soluciones, #desarrollo, #redes, #publicidad, #contacto {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    scroll-snap-align: center;
}

/* Other styles */
#inicio, #soluciones, #desarrollo, #redes, #publicidad, #contacto  {
	position: relative;
    display: flex;  
    width: 100%;
    flex-flow: column nowrap;
}




/* :::::::::::::::::::: Arrows ::::::::::::::::::: */

.arrow {
  border: solid #fff;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
}

.rightRot {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.leftRot {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.upRot {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.downRot {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

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

/*
#mainContent{
	background: linear-gradient(180deg, rgba(42,3,42,1) 0%, rgba(121,9,120,1) 17%, rgba(246,131,16,1) 49%, rgba(0,255,231,1) 79%, rgba(0,215,255,1) 99%);
}
*/

#inicio{
background: rgb(74,3,164);
background: linear-gradient(180deg, rgba(74,3,164,0.90) 0%, rgba(110,4,254,0.15) 50%, rgba(4,137,254,0.75) 100%),
            url('../04-images/bgn-1-b.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
            
}


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

#soluciones{
	/*
	background: rgb(4,137,254);
	background: linear-gradient(180deg, rgba(4,137,254,0.9) 0%, rgba(4,174,254,0.65) 50%, rgba(12,213,241,0.65) 100%);            
	*/
	background: #fff;
}


#desarrollo{

}

#redes{

}

#publicidad{

}

#contacto{

}

/* #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) {
		
		
		/*:::::::::::::::::::::Main Nav's :::::::::::::::::*/
		
		#mainNav{
			display: none;
		}
		#mainNavMobile{
			display: flex;
		}

	}

	/* 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 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; }
*/