/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%      multipleSelection-container     %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/


/*  Contenedor principal */
.multipleSelection-container{
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Computer */
@media only screen and (min-width:1025px){ 
  .multipleSelection-container{
      width: 70%;
      height:70%;
    }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
  .multipleSelection-container{
      width: 90%;
      height:75%;
    }

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
    .multipleSelection-container{
      width: 90%;
      height:70%;
    }

}


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

  .multipleSelection-container{
      width: 90%;
      height:80%;
    }

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
    .multipleSelection-container{
      width: 90%;
      height: 70%;
    }

}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%      multipleSelection-text     %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/


.multipleSelection-text{
  position: relative;
  text-align: center;
  font-weight: 200;

  border-radius: 5px;
  border-style:dashed;
  border-width: 2px;
}


/* Computer */
@media only screen and (min-width:1025px){ 
  .multipleSelection-text{
    font-size: 20px;
    padding: 20px;
    margin-bottom:40px;
  }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
  .multipleSelection-text{
    font-size: 24px;
    padding: 20px;
    margin-bottom:40px;
  }
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
  .multipleSelection-text{
    font-size: 24px;
    padding: 20px;
    margin-bottom:40px;
    border-width: 1px;
  }
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .multipleSelection-text{
    font-size: 15px;
    padding: 8px;
    margin-bottom:16px;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .multipleSelection-text{
    font-size: 15px;
    padding: 8px;
    margin-bottom:20px;
  }
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         multipleSelection-checkbox       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/


.multipleSelection-groupCheckbox{
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 65%;
}

/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .multipleSelection-groupCheckbox{
    width: 90%;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .multipleSelection-groupCheckbox{
    width: 80%;
  }
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         multipleSelection-opcion         %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/


.multipleSelection-option{
  padding-bottom: 20px;
}

/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
  .multipleSelection-option{
    padding-bottom: 8px;
  }
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .multipleSelection-option{
    padding-bottom: 14px;
  }
}



/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%         multipleSelection-checkbox       %%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
}

.multipleSelection-checkbox{
  position: relative;
  font-weight: 200;
  display: inline;
  padding: 20px;
}


/* Computer */
@media only screen and (min-width:1025px){ 
  .multipleSelection-checkbox{
    font-size: 20px;
  }

}

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

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


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

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
  .multipleSelection-checkbox{
    font-size: 15px;
  }
}



/*#########################################################
###########################################################
###           multipleSelection-button                #####
###########################################################
#########################################################*/



.multipleSelection-button{
    position: relative;
    padding: 20px;
    margin: 20px;
    margin-bottom: 0px;
    color:#FFF;
    font:inherit;
    border:none;
    outline: 0;
    cursor:pointer;
    border-radius:10px;

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


}



/* Computer */
@media only screen and (min-width:1025px){ 
  
    .multipleSelection-button{
        padding: 15px 70px!important;
        margin: 20px !important;
        font-size: 20px;

    }

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
    
    .multipleSelection-button{
        padding: 15px 70px!important;
        margin: 20px !important;
    }

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

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
   
    .multipleSelection-button{
        padding: 15px 70px!important;
        margin: 20px !important;
    }

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


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
    
    .multipleSelection-button{
        padding: 8px 60px!important;
        margin: 3px !important;
    }

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

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

 
    .multipleSelection-button{
        padding: 8px 60px!important;
        margin: 10px !important;
    }

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

}

/*#########################################################
###########################################################
###         multipleSelection-button-color            #####
###########################################################
#########################################################*/


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

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


/*#########################################################
###########################################################
###         multipleSelection-button-color            #####
###########################################################
#########################################################*/


.multipleSelection-text-color-Brown {
    border-color: #cfb752;
}