.test-container{
  position: relative;
  left: 50%;
  width: 80%;
  transform: translate(-50%, 0);

  outline:0;
  border:none;
  color:#808080;
  background-color: #FFF;
}


.test-alert-container{
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	width: 60%;
}


.test-document {
	height: 10vh;
	width: 100%;
	border-radius: 15px;
	border-left: 20px solid #46A040;
    background-color: #f2f2f2;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 2vh;
    cursor:pointer;
}

.test-document:hover {
    background-color: #dfdfdf;
}

.test-documentImageLeft {
	width: 20%;
	float:left;
	height: 10vh;
	top: 0;
	position: absolute;
}

.test-documentImageLeft > svg {
	  position: absolute;
	  top: 50%; 
	  left: 50%;
	  width: 80%;
	  height: 80%;
	  transform: translate(-50%, -50%);
}

.test-documentImageRight {
	width: 20%;
	right:0;
	height: 10vh;
	top: 0;
	position: absolute;
}

.test-documentImageRight > svg {
	  position: absolute;
	  top: 50%; 
	  left: 50%;
	  width: 80%;
	  height: 80%;
	  transform: translate(-50%, -50%);
}


.test-documentSpan {
	width: 60%;
	left:20%;
	height: 10vh;
	top: 0;
	position: absolute;
	font-size: 25px;
}


.test-documentSpan >span {
	 position: absolute;
	  top: 50%; 
	  left: 50%;
	  width: 80%;
	  transform: translate(-50%, -50%);
	  color: #000;
	  text-align: center;
}

.test-documentImageRight >span {
	 position: absolute;
	  top: 50%; 
	  left: 50%;
	  width: 80%;
	  transform: translate(-50%, -50%);
	  color: #000;
	  text-align: center;
}

/*#########################################################
###########################################################
###                    Contenedor                     #####
###########################################################
#########################################################*/



/* Computer */
@media only screen and (min-width:1025px){ 
  
	.test-documentSpan >span {
		 font-size: 23px;
	}
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
 	.test-documentSpan >span {
		 font-size: 23px;
	}
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  	.test-documentSpan >span {
		 font-size: 23px;
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.test-documentSpan >span {
		 font-size: 18px;
	}
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.test-documentSpan >span {
		 font-size: 18px;
	}
}


/*#########################################################
###########################################################
###                    Contenedor                     #####
###########################################################
#########################################################*/



/* Computer */
@media only screen and (min-width:1025px){ 
  
	.test-documentImageRight >span {
		 font-size: 23px;
	}
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
 	.test-documentImageRight >span {
		 font-size: 23px;
	}
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  	.test-documentImageRight >span {
		 font-size: 23px;
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.test-documentImageRight >span {
		 font-size: 18px;
	}
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.test-documentImageRight >span {
		 font-size: 18px;
	}
}