@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body{
	position: absolute;
	background-color: #ffffff;
	margin:0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: background-color 0.75s; /* Safari */
    transition: background-color: 0.75s;0
    -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  	-webkit-tap-highlight-color: transparent;

}

  	p::-moz-selection,
	p::selection { background-color: rgb(255,255,0) }
@media (min-width: 0px) { 
	.mainContent{
		width:96%;
		height:auto;
		position:absolute;
		left: 2%;
		top: 50%;
		transform:translate(0, -50%);
		z-index: 0;
	}
	.generalText{
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
		line-height:2px; 
		font-size:16px; 
		color:#000;
		text-align: center;
		-webkit-transition: color 0.25s; 
	    transition: color: 0.25s;0

	}
	a.generalText:hover{
	background-color: #ffff00;
	cursor: pointer;
	}
}
@media (min-width: 800px) { 
	.mainContent{
		width:80%;
		height:auto;
		position:absolute;
		left: 10%;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 0;
	}
	.generalText{
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
		line-height:2px; 
		font-size:18px; 
		color:#000;
		text-align: center;
		-webkit-transition: color 0.25s; 
	    transition: color: 0.25s;0

	}
	a.generalText:hover{
	background-color: #ffff00;
	}
}
@media (min-width: 1800px) { 
	.mainContent{
		width:80%;
		height:auto;
		position:absolute;
		left: 10%;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 0;
	}
	.generalText{
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
		line-height:2px; 
		font-size:22px; 
		color:#000;
		text-align: center;
		-webkit-transition: color 0.25s; 
	    transition: color: 0.25s;

	}
	a.generalText:hover{
	background-color: #ffff00;
	}
}
.replica{
	position: absolute;
	top: 0;
	left: 0;
	width: 25%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	z-index: 1;
	/*background-color: #ff0000;*/
}
.replicaMask{
	position: absolute;
	margin:0;
	top: 0;
	left: 0;
	width: calc(100% + 20px);
	height: 100%;
	max-height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	/*background-color: #222;*/
}
.replicaRepository{
	/*display: inline;*/
	margin-left:0;
	margin-right: 15px;
	margin-top:0px;
	color: #000;
	/*background-color: #ffff00;*/
	font-size: 10px;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	word-break:break-word;
}