/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Orbitron:500);

html { height: 100%; font-size: 100%;}
/*
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
*/
* {
	-webkit-overflow-scrolling: touch;
}
*:not(html) {
	-webkit-transform: translate3d(0, 0, 0);
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background: #fff;
    font-weight: 400;
    font-size: 1em;
    color: #000;
    overflow: auto;
    overflow-x: hidden;
}

a {
	color: #fff;
	text-decoration: none;
}

#wrapper {
	width:100%;
	height:100%;
	margin:0;
	text-align:center;
	overflow:hidden;
}

#container {
	position:relative;
	width:95%;
	height:95%;
	margin:auto;
	margin-top:1.5%;
	/*border: solid 1px #ff0000;*/
}

#boxes_container {
	position:absolute;
	width:100%;
	height:30%;
	margin:auto;
	bottom:2%;
	/*border: solid 1px #00ff00;*/
}

#boxes {
	position:relative;
	width:100%;
	height:100%;
	max-width:1000px;
	margin:auto;
	/*border: solid 1px #0000ff;*/
}

.boxes {
	list-style-type:none;
	width:100%;
	height:100%;
}
/*
.box {
	display:inline-block;
	width:21%;
	height:100%;
	border:solid 2px #000;
	margin-left:1%;
	margin-right:1%;
	max-width:200px;
	max-height:180px;
	background:url('../images/defaults/transparent.png');
	text-align:center;
	color:#fff;
	font-size:30px;
	padding-top:14%;
	padding-bottom:2%;
	cursor:pointer;
}
*/

.inner_box {
	display:inline-block;
	width:100%;
	height:100%;
	/*border:solid 2px #000ff;*/
	max-width:200px;
	max-height:200px;
	text-align:center;
}

.box:hover {
	opacity:0.5;
}

.box.active {
	/*border: solid 2px #000000;*/
	border: none;
}

#contents_container {
	position:absolute;
	width:100%;
	height:60%;
	margin:auto;
	top:2%;
	/*border: solid 1px #00ff00;*/
}

#contents {
	position:relative;
	width:100%;
	height:100%;
	max-width:1000px;
	margin:auto;
	padding-left:4%;
	padding-right:4%;
	/*border: solid 1px #0000ff;*/
}

.content
{
	position:absolute;
    display: none;
	position:relative;
	width:100%;
	max-width:872px;
	height:100%;
	margin:auto;
	background:url('../images/defaults/transparent.png');
	border: solid 2px #000;
	color:#fff;
	z-index:10;
	text-align:justify;
	padding:20px;
	font-size:15px;
}

@media screen and (max-width: 1000px) {

.box {
	font-size:26px;
}

.content {
	font-size:15px;
}

}


@media screen and (max-width: 900px) {

.box {
	font-size:22px;
}

.content {
	font-size:13px;
}

}


@media screen and (max-width: 700px) {

.box {
	font-size:16px;
}

.content {
	font-size:11px;
}

}

@media screen and (max-width: 600px) {

.box {
	font-size:12px;
}

.content {
	font-size:10px;
}

}

@media screen and (max-width: 500px) {

.box {
	font-size:10px;
}

.content {
	font-size:9px;
}

}

@media screen and (max-width: 460px) {

.box {
	font-size:9px;
}

.content {
	font-size:8px;
}

}

@media screen and (max-width: 320px) {

.box {
	font-size:8px;
}

.content {
	font-size:7px;
}

}

@media screen and (max-width: 290px) {

.box {
	font-size:7px;
}

}

@media screen and (max-width: 250px) {

.box {
	font-size:6px;
}

}

/*

@media screen and (max-height: 580px) {

.content {
	font-size:12px;
}

}

@media screen and (max-height: 520px) {

.content {
	font-size:11px;
}

}

@media screen and (max-height: 460px) {

.content {
	font-size:10px;
}

}

@media screen and (max-height: 400px) {

.content {
	font-size:9px;
}

}
*/



	#sn-icons a{
		float:left;
		margin-left:8px;
		width:25px;
		height:25px;
		overflow:hidden;
		
	}
	
	#sn-icons a img{
		-webkit-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-ms-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
        transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		
	
	}
	
	#sn-icons a img:hover{
		margin-top: -25px;
	}