.simpleTest-menuContainer{
	position: absolute;
	background-color: #CCC;
}

.simpleTest-miniContainerContainer{
  position: absolute;
  right: 0;
  top: 0;
}

.simpleTest-miniContainer{
	position: absolute;

  top: 50%; 
  left: 50%;

  transform: translate(-50%, -50%);

}


/* Computer */
@media only screen and (min-width:1025px){ 

	.simpleTest-menuContainer{
		top: 0;
		width: 10vw;
		height: 100vh;
		left: 0;
	}

	.simpleTest-miniContainer{
		right: 0;
		width: 90%;
	}

  .simpleTest-miniContainerContainer{
    width: 85%;
    height: 100%;
  }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 

	.simpleTest-menuContainer{
		top: 0;
		width: 15vw;
		height: 100vh;
		left: 0;
	}

	.simpleTest-miniContainer{
		right: 0;
		width: 85%;
	}

  .simpleTest-miniContainerContainer{
    width: 85%;
    right: 0;
    height: 100%;
  }

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
	.simpleTest-menuContainer{
		top: 0;
		width: 100vw;
		height: 20vh;
	}

	.simpleTest-miniContainer{
		width: 100%;
	}

  .simpleTest-miniContainerContainer{
    width: 100%;
    height: 80%;
  }

}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){

	.simpleTest-menuContainer{
		top: 0;
		width: 15vw;
		height: 100vh;
		left: 0;
	}

	.simpleTest-miniContainer{
		right: 0;
		width: 85%;
	}

  .simpleTest-miniContainerContainer{
    width: 85%;
     height: 100%;
  }

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

	.simpleTest-menuContainer{
		top: 0;
		width: 100vw;
		height: 20vh;
	}

	.simpleTest-miniContainer{
		width: 100%;
	}

  .simpleTest-miniContainerContainer{
    width: 100%;
     height: 75%;
       top: 20%;
  }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%    simpleTest-linkQuestion   %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.simpleTest-linkQuestion {   
    position: relative;
    border-style: solid;
    border-color: #FFF;
    background-color: #CCC;
    outline: 0;
}


/* Computer */
@media only screen and (min-width:1025px){ 

	.simpleTest-linkQuestion {   
	    width: 25%;
	    height: 5vh; 
	    border-width: 2px; 
	}
	.simpleTest-linkQuestion:hover {   
	    border-color:red;
	}

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
	.simpleTest-linkQuestion {   
	    width: 25%;
	    height: 5vh; 
	    border-width: 1px; 
	}
	.simpleTest-linkQuestion:hover {   
	    opacity: 0.2;
    	filter: alpha(opacity=20); /* For IE8 and earlier */
	}

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 

	.simpleTest-linkQuestion {   
	    width: 6.2vw;
	    height: 20%;  
	    border-width: 1px;
	}
	.simpleTest-linkQuestion:hover {   
	    opacity: 0.2;
    	filter: alpha(opacity=20); /* For IE8 and earlier */
	}

}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.simpleTest-linkQuestion {   
	    width: 25%;
	    height: 5vh; 
	    border-width: 1px; 
	}
	.simpleTest-linkQuestion:hover {   
	    opacity: 0.2;
    	filter: alpha(opacity=20); /* For IE8 and earlier */
	}

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

	.simpleTest-linkQuestion {   
	    width: 6.2vw;
	    height: 20%;  
	    border-width: 1px;
	}
	.simpleTest-linkQuestion:hover {   
	    opacity: 0.2;
    	filter: alpha(opacity=20); /* For IE8 and earlier */
	}

}



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


.simpleTest-choiceContainer{
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);

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

.simpleTest-choiceInitText {
    position: relative;
    background-color: #FFF;
    top:0;
}


.simpleTest-choiceInitText > h1{
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    text-align: center;
}

.simpleTest-choiceContent {
    position: relative;
    border-style:dashed;
    border-width: 2px;
    border-color: #cfb752;
    padding-right: 5%;
    padding-left: 5%;
    text-align: center;
}

.simpleTest-choiceContent >p{
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    margin: 0;
}

.simplesTest-choice-question {
    position: relative;
    background-color: #FFF;
}

.simplesTest-choice-question > h1{
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
}


.simpleTest-choiceButton{
    margin-bottom: 0px;
    color:#FFF;
    font:inherit;
    border:none;
    outline: 0;
    cursor:pointer;
    border-radius:10px;
    background-color: #cfb752;
}

.simpleTest-choiceButton:hover{
    background-color: #b79d32;
}


/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

    .simpleTest-choiceContainer{

      width: 90%;
    
    }

}

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

/* Computer */
@media only screen and (min-width:1025px){ 
  
    .simpleTest-choiceInitText > h1{
        font-size: 18px;
    }

    .simplesTest-choice-question > h1{
        font-size: 16px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .simpleTest-choiceContent >p{
        font-size: 19px;
    }

    .simplesTest-choice-question {
        margin-top:27px;
    }
    .simpleTest-choiceButton{
        padding: 15px !important;

        margin: 8px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 16px;
        margin: 0;
    }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
    .simpleTest-choiceInitText > h1{
        font-size: 24px;
    }

    .simplesTest-choice-question > h1{
        font-size: 19px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .simpleTest-choiceContent >p{
        font-size: 19px;
    }

    .simplesTest-choice-question {
        margin-top:27px;
    }
    .simpleTest-choiceButton{
        padding: 17px !important;
        margin: 10px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 20px;
        margin: 0;
    }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
    .simpleTest-choiceInitText > h1{
        font-size: 24px;
    }

    .simplesTest-choice-question > h1{
        font-size: 24px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .simpleTest-choiceContent >p{
        font-size: 24px;
    }

    .simplesTest-choice-question {
        margin-top:27px;
    }
    .simpleTest-choiceButton{
        padding: 20px !important;
        margin: 20px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 20px;
        margin: 0;
    }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
    .simpleTest-choiceInitText > h1{
        font-size: 15px;
    }

    .simplesTest-choice-question > h1{
        font-size: 15px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .simpleTest-choiceContent >p{
        font-size: 15px;
    }

    .simplesTest-choice-question {
        margin-top:20px;
    }
    .simpleTest-choiceButton{
        padding: 10px !important;
        margin: 10px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 13px;
        margin: 0;
    }
}

/* Phone, portrait*/
@media only screen and (min-width:351px) and (max-width:767px) and (orientation:portrait){ 

    .simpleTest-choiceInitText > h1{
        font-size: 12px;
    }

    .simplesTest-choice-question > h1{
        font-size: 14px;
    }

    .simplesTest-choice-question > span{
        font-size: 14px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .simpleTest-choiceContent >p{
        font-size: 12px;
    }

    .simplesTest-choice-question {
        margin-top:20px;
    }
    .simpleTest-choiceButton{
        padding: 6px !important;
        margin: 3px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 10px;
        margin: 0;
    }

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:350px) and (orientation:portrait){ 

    .simpleTest-choiceInitText > h1{
        font-size: 10px;
    }

    .simplesTest-choice-question > h1{
        font-size: 10px;
    }

    .simplesTest-choice-question > span{
        font-size: 10px;
    }

    .simpleTest-choiceContent >p{
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .simpleTest-choiceContent >p{
        font-size: 10px;
    }

    .simplesTest-choice-question {
        margin-top:10px;
    }
    .simpleTest-choiceButton{
        padding: 5px !important;
        margin: 2px !important;
    }

    .simpleTest-choiceButton>p{
        font-size: 10px;
        margin: 0;
    }

}

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





.textContent {
    position: relative ;
    margin:0;
}

.textContent > p{
    margin:0;
}

.SimpleTest-imageContent {
	width: 30%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.context> img {
    height: 100%;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}




.status {
    position: absolute;
    background-color: #FFF;
}




.contentApp {
    position: absolute;
    bottom: 80px;
    left: 0 ;
    right: 0;
   /* overflow: hidden;*/
    background-color: #FFF;
}


.choices {
    position: absolute;
    bottom: 0px;
    left: 0 ;
    right: 0;
    background-color: #FFF;
}

.choice {
    position: absolute;
    background-color: #000;
    border: 2px solid;
    border-radius: 25px;
    border-color: #FFF;
}

.choice > h1{
    text-align: center;
    font-size: 24px;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    color: #FFF;
}






.cajaChoice{
    position: relative;
    display:inline-block;
    text-align:center;


  left: 50%;
  transform: translate(-50%, 0);
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         ANUNCIO        %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*  Contenedores de boton */
.testChoice-message {
  position: fixed;
  border-radius: 40px 0px 0px 40px;
  border-style: none;
  cursor: pointer;
  bottom: 2%;
  right: 0px;
  width: 20%;
  height: 13%;
  outline: 0;
  background-color: #cfb752;

  padding-left: 10px;

  font-size: 100%;
  color:#FFF;
}

/*  Contenedores de boton */
.testChoice-message  > h1 {
  font-family: 'Dosis';
  font-size: 30px;
  margin-bottom: 0;
  margin-top: 0;
  color:#FFF;
}

.testChoice-message  > h2 {
  font-family: 'Dosis';
  margin-top: 0;
  font-size: 17px;
  color:#FFF;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         PORTRAIT       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



@media only screen and (orientation: portrait) {

    /*  Contenedores de boton */
      .testChoice-message {
        width: 45%;
        height: 12%;
      }

}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         MOBILE          %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


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

       /*  Contenedores de boton */
      .testChoice-message {
        width: 45%;
        height: 8%;
      }

      /*  Contenedores de boton */
      .testChoice-message  > h1 {

        font-size: 25px;

      }

      .testChoice-message  > h2 {
        font-size: 12px;
      }
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%        Close button       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.testChoice-closeButton{

	position: fixed;
	border:none;
	background-color: #FFF;
	outline: 0;

}

.testChoice-closeButton >img{

	  display: inline;
	  vertical-align: middle;
	  width: 90%; 
	  height: auto;  
	  outline:0;
	  cursor: pointer;

}




.testChoice-closeButton >img:hover{
	  width: 100%; 
}


/* Computer */
@media only screen and (min-width:1025px){ 

	.testChoice-closeButton{
		width: 6vw;
		height: 6vw;
		top:0;
		right: 0;
	}

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 

	.testChoice-closeButton{
		width: 6vw;
		height: 6vw;
		top:0;
		left: 0;
	}

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 

	.testChoice-closeButton{
		width: 10vw;
		height: 10vw;
		bottom:0;
		left: 0;
	}


}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){

	.testChoice-closeButton{
		width: 6vw;
		height: 6vw;
		top:0;
		left: 0;
	}

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

	.testChoice-closeButton{
		width: 15vw;
		height: 15vw;
		bottom:0;
		left: 0;
	}

}





/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         ANUNCIO        %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

/*  Contenedores de boton */
.testChoice-messageEnd {
  position: fixed;
  border-radius: 40px 0px 0px 40px;
  border-style: none;
  cursor: pointer;
  bottom: 50%;
  right: 0px;
  width: 13%;
  height: 15%;
  outline: 0;
  background-color: #cfb752;

  padding-left: 10px;

  font-size: 100%;
  color:#FFF;
}

/*  Contenedores de boton */
.testChoice-messageEnd  > h1 {
  font-family: 'Dosis';
  font-size: 30px;
  margin-bottom: 0;
  margin-top: 0;
  color:#FFF;
}

.testChoice-messageEnd  > h2 {
  font-family: 'Dosis';
  margin-top: 0;
  font-size: 20px;
  color:#FFF;
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         PORTRAIT       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */



@media only screen and (orientation: portrait) {

    /*  Contenedores de boton */
      .testChoice-messageEnd {
        width: 35%;
        height: 10%;
      }

}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         MOBILE          %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


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

       /*  Contenedores de boton */
      .testChoice-messageEnd {
        width: 30%;
        height: 10%;
        bottom: 1%;
      }

      /*  Contenedores de boton */
      .testChoice-messageEnd  > h1 {

        font-size: 25px;

      }

      .testChoice-messageEnd  > h2 {
        font-size: 12px;
      }
}