/* ///  DECORATION CSS ///  */
.cont_select_center {
  position: absolute;
  left: 50%;
  top:50%;
  margin-top: -30px;
  margin-left: -92px;
}

.cont_heg_50 {
  position: absolute;
  height: 50%;
  left: 0;
  top: 0;
  width: 100%;

}
/* ///  END DECORATION CSS  ///  */

.icon_select_mate {
  position: absolute;
  top:20px;
  right: 2%;
  font-size: 16px;
    height: 22px;
  transition: all 275ms;
}

.select_mate {
    position: relative;
    float: left;
    min-width: 184px;
    width: 117px;
    min-height: 62px;
    font-family: 'Roboto';
    color: #777;
    font-weight: 300;
    /* background-color: #fff; */
    box-shadow: 1px 2px 10px -2px rgb(0 0 0 / 30%);
    border-radius: 3px;
    transition: all 375ms ease-in-out;
    select {: ;
    position: absolute;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    z-index: -1;
    }: ;
}

.cont_list_select_mate {
  position: relative;
  float: left;
  width: 100%;
}

.cont_select_int {
 position: absolute;
	color: #000;
  left: 0px;
  top: 0px;
  z-index: 999;
  overflow: hidden;
  height: 0px;
  width: 100%;
  background-color: #fff;
  padding: 1px 3px 0px 7px;
  margin-bottom: 0px;
  margin-top: 0px;
  border-radius: 0px 0px 3px 3px;
  box-shadow: 1px 4px 10px -2px rgba(0, 0, 0, 0.2);
  transition: all 375ms ease-in-out;

	li {
	position: relative;
    float: left;
    width: 96%;
    border-bottom:1px solid #E0E0E0;
   
    list-style-type: none;
    padding: 10px 2%;
    margin: 0px;  
    transition: all 275ms ease-in-out;
    display: block;
    cursor:pointer;
		
		&:last-child {
        border-radius: 3px;
        border-bottom:0px; 

        }
         &:hover {
		background-color: #EEEEEE;
		 } 
     }

   .active {
   background-color: #EEEEEE;
   }

}

/* etiqueta <p> con la opcion selecionada  */
.selecionado_opcion {
   color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 16px 5px 5px 15px;
    height: 20px;
    cursor: pointer;
}
}

@media only screen and (max-width: 600px) {
	
.selecionado_opcion {
   color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 16px 5px 5px 15px;
    height: 34px;
    cursor: pointer;
}
	.icon_select_mate {
    position: absolute;
    top: 16px;
    right: 2%;
    font-size: 16px;
    height: 22px;
    transition: all 275ms;
}

} 


@media only screen and (min-width: 600px) { 
	
	.selecionado_opcion {
   color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 16px 5px 5px 15px;
    height: 34px;
    cursor: pointer;
}
	.icon_select_mate {
    position: absolute;
    top: 16px;
    right: 2%;
    font-size: 16px;
    height: 22px;
    transition: all 275ms;
}


} 


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



	.selecionado_opcion {
color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 12px 5px 5px 15px;
    height: 34px;
    cursor: pointer;
}
.icon_select_mate {
    position: absolute;
    top: 16px;
    right: 2%;
    font-size: 16px;
    height: 22px;
    transition: all 275ms;
}} 


@media only screen and (min-width: 992px) {

	.selecionado_opcion {
color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 12px 5px 5px 15px;
    height: 28px;
    cursor: pointer;
}
.icon_select_mate {
    position: absolute;
    top: 16px;
    right: 2%;
    font-size: 16px;
    height: 22px;
    transition: all 275ms;
}
} 

@media only screen and (min-width: 1200px) {
	
	.selecionado_opcion {
color: #000;
    width: 100%;
    display: block;
    margin-top: 6px;
    padding: 12px 5px 5px 15px;
    height: 28px;
    cursor: pointer;
}
.icon_select_mate {
    position: absolute;
    top: 16px;
    right: 2%;
    font-size: 16px;
    height: 22px;
    transition: all 275ms;
}


}