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



.choice-page{
    position: absolute;
    width: 100%;
    height: 100%;
}

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

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

.choice-initText {
    position: relative;
    background-color: #FFF;
    top:0;
}


.choice-initText > h1{
    font-family: 'Dosis', sans-serif;
    font-weight: 600;
}

.choice-content {
    position: relative;
    border-style:dashed;
    border-width: 2px;
    padding-right: 10%;
    padding-left: 10%;
    text-align: center;
}

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

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

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


.botonChoice{
    margin-bottom: 0px;
    color:#FFF;
    font:inherit;
    border:none;
    outline: 0;
    cursor:pointer;
    border-radius:10px;
}
/*#########################################################
###########################################################
###                    Contenedor                     #####
###########################################################
#########################################################*/

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

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

    .choice-content >p{
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .choice-content >p{
        font-size: 22px;
    }

    .choice-question {
        margin-top:27px;
    }
    .botonChoice{
        padding: 10px !important;
        margin: 10px !important;
    }

    .botonChoice>p{
        font-size: 18px;
        margin: 0;
    }

}

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

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

    .choice-content >p{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .choice-content >p{
        font-size: 24px;
    }

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

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

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

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

    .choice-content >p{
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .choice-content >p{
        font-size: 24px;
    }

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

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


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

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

    .choice-content >p{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .choice-content >p{
        font-size: 15px;
    }

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

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

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

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

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

    .choice-content >p{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .choice-content >p{
        font-size: 15px;
    }

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

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

}

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




.contextChoice-color-Brown {
    border-color: #cfb752;
}


.contextChoice-color-Green {
    border-color: #217821;
}

.contextChoice-color-Red {
    border-color: #A00000;
}
.contextChoice-color-Purple {
    border-color: #660080;
}


.contextChoice-color-Blue {
    border-color: #1669b7;
}

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

.textContent > p{
    margin:0;
}

.imageContent {
	width: 40%;
    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);
}

.botonColor-Brown >button{
    background-color: #cfb752;
}

.botonColor-Brown >button:hover{
    background-color: #b79d32;
}




.botonColor-Green >button{
    background-color: #217821;
}

.botonColor-Green >button:hover{
    background-color: #217821;
}

.botonColor-Red >button{
    background-color: #A00000;
}

.botonColor-Orange >button{
    background-color: #af4600;
}

.botonColor-Red >button:hover{
    background-color: #A00000;
}

.botonColor-Purple >button{
    background-color: #660080;
}

.botonColor-Purple >button:hover{
    background-color: #660080;
}

.botonColor-Blue >button{
    background-color: #1669b7;
}

.botonColor-Blue >button:hover{
    background-color: #1669b7;
}


.botonColor-Turquoise >button{
    background-color: #0c9482;
}

.botonColor-Turquoise >button:hover{
    background-color: #00473d;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         Choice-time-big       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


.choice-time-big{
  position: relative;
  text-align: center;
  font-weight: 400;
  cursor: pointer;
}


/* Computer */
@media only screen and (min-width:1025px){ 
  .choice-time-big{
    font-size: 100px;
  }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
  .choice-time-big{
    font-size: 100px;
  }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  .choice-time-big{
    font-size: 100px;
  }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .choice-time-big{
    font-size: 100px;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .choice-time-big{
    font-size: 100px;
  }
}




/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         Choice-time-little       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


.choice-time-little{
  position: relative;
  text-align: center;
  font-weight: 400;
  cursor: pointer;
}


/* Computer */
@media only screen and (min-width:1025px){ 
  .choice-time-little{
    font-size: 35px !important;
  }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
  .choice-time-little{
    font-size: 45px !important;
  }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  .choice-time-little{
    font-size: 45px !important;
  }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .choice-time-little{
    font-size: 25px !important;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .choice-time-little{
    font-size: 30px !important;
  }
}