/*
* 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
================================================== */
	html, body, .container{height: 100%;}
	
	body{background: url(../images/bg_mariomir.jpg) center top no-repeat;background-size:cover ;}

	section{margin:auto;}

	.container .round{ height: 350px; width: 350px; display: block; 
	 	-moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box;
		border-radius: 100%; -webkit-border-radius:100%; -moz-border-radius:100%; 

		
		border-color:#000;border:5px solid rgba(0,0,0,0.1); text-decoration: none; 
		
		text-transform: uppercase;  background:#1a1a1a url(../images/bg_round.jpg) repeat;

		-webkit-box-shadow: inset 0px 0px 65px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 0px 65px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 0px 65px rgba(0, 0, 0, 0.75);
	}
	
	#vertical_align{display: table;height: 100%;}
		#vertical_align .columns{vertical-align: middle; display: table-cell; height: 350px; width: 100%; float: none;}
	
	.ie6 .container .round, .ie7 .container .round, .ie8 .container .round{ 
		background:transparent url(../images/bg_round_ie.png) no-repeat 0 0 !important; border: none !important;
		height: 364px !important; width: 364px !important;
	}
	
	ie6 .sixteen.columns, .ie7 .sixteen.columns{display: inline-block !importat;}
	
	 .alpha .round .icono{ margin: 77px auto auto 110px;  }
	 .omega .round .icono{ margin: 77px auto auto 97px;  }	
	 .round p{ display:block; color:#FFF; text-align: center; font: 40px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial; font-weight:lighter;
 			-moz-user-select: -moz-none;
			-khtml-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
	 
	  }
	 
	  .omega .round{float:right;}
	  
	  .download{ display: block; margin: 12px auto; 
	  	opacity: 0; filter: alpha(opacity = 0);
		-webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
	  
	  .round:hover{ cursor: pointer; }
	  .round:hover .download{opacity: 1;   filter: alpha(opacity = 100);
		 transform:translate(0,5px);-ms-transform:translate(0,5px); -webkit-transform:translate(0,5px);
}

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

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

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		body{background-image: url(../images/bg_mariomir960.png);background-size:cover; }

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		body{background-image: url(../images/bg_mariomir960.png);background-size:cover; background-position-y: 20%;}

	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		body{background-image: url(../images/bg_mariomir770.jpg); background-position: center top; }
		.container{padding-top: 15px;}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		body{background-image: url(../images/bg_mariomir770.jpg);background-size:inherit; background-position: center top; }
		.container{padding-top: 15px;}
		.container .round{ height: 300px; width: 300px; margin: 5px auto 15px auto; }
			.omega .round{float:none;}
				.alpha .round .icono{ margin: 47px auto auto 90px;  }
				.omega .round .icono{ margin: 47px auto auto 80px;  }	
			.round p{font-size: 25px; line-height: 30px;}
			
			.download{ display: none; }
			.download:hover{ opacity: 0 !important; filter: alpha(opacity = 0) !important;
 }


	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		body{background-image: url(../images/bg_mariomir480.jpg); background-size:inherit ; }
		.container{padding-top: 15px;}
		.container .round{ height: 215px; width: 215px; margin: 5px auto 15px auto;  }
			.omega .round{float:none;}
				.alpha .round .icono{ margin: 15px auto auto 45px;  }
				.omega .round .icono{ margin: 15px auto auto 35px;  }	
			.round p{font-size: 20px; line-height: 20px;}
	
		.download{ display: none; }
		.download:hover{ opacity: 0 !important; filter: alpha(opacity = 0) !important; }

	}


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