<div class="wrapper clearfix">
	<div class="selectCat">
	    <div class="titleSelectCat">
		  <div class="selectFlechaDown"></div>
		  <span>Ordenar por...</span>
	    </div>
	    <div class="boxOption">
		  <a class="option" data-seccion="seccion1">Más baratos primero</a>
		  <a class="option" data-seccion="seccion2">Más caros primero</a>
		  <a class="option" data-seccion="seccion3">Más nuevo primero</a>
		  <a class="option" data-seccion="seccion4">Por nombre</a>
	    </div>
	</div>
	<div id="boxSecciones">
		<div id="seccionInicio">
			<h2 class="nombre_seccionInicio">Clic en Select</h2>
		</div>
		<div class="secciones seccion1">
			<h2 class="nombre_seccion">Más Baratos</h2>
		</div>
		<div class="secciones seccion2">
			<h2 class="nombre_seccion">Más Caros</h2>
		</div>
		<div class="secciones seccion3">
			<h2 class="nombre_seccion">Más Nuevo</h2>
		</div>
		<div class="secciones seccion4">
			<h2 class="nombre_seccion">Por nombre</h2>
		</div>
	</div>
</div>
<span class="mysite">Junio Marques | front-end developer Ecommerce - my site: <a  href="http://juniomarques.com" target="black">juniomarques.com</a></span>

body, html {
	font-family: arial;
	margin: 0;
}
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
@mixin seccionStyle($left:-100%, $background: #9EA820){
	position: absolute;
	bottom: 50px;
	left: $left;
	height: 300px;
	width: 100%;
	background: $background;
	transition: all .3s cubic-bezier(1, -0.19, 0, 1.74);
	z-index: 1;	
}
.wrapper {
	max-width: 480px;
	width: 100%;
	margin: 40px auto;
	overflow: hidden;
	position:relative;
	height: 400px;
} 
.selectCat{
      max-width: 160px;
	cursor: pointer;
	width: 100%;
	float: right;
    .titleSelectCat {
        background: #909090;
        padding: 6px;
        position: relative;
	  color:#ffffff;
        .selectFlechaDown {
           content: "";
           position: absolute;
           bottom: 0;
           right: 10px;
           border-width: 7px 6px 8px 6px;
           border-color: #000 transparent transparent;
           border-style: solid;
        }
        .selectFlechaUp {
              bottom: 6px;
              border-width: 5px 6px 9px 6px;
              border-color: rgba(0, 0, 0, 0) transparent black;
              border-style: solid;
        }
    }
    span {
        display: block;
    }
    .boxOption {
        	display: none;
		border-width: 0 1px 1px 1px;
		border-color: #ccc;
		border-style: solid;
		font-size: 13px;
	    	position:absolute;
	    	box-sizing: border-box;
	    	max-width: 160px;
	    	width: 100%;
	    	background-color: #ffffff;
	    	z-index: 10;
            a{
                text-decoration: none;
                color: #000000;
                display: block;
               padding: 6px;
                &:hover {
                    background:#E00B57;
                    color: #ffffff;
                }
            }  
     }
}

.secciones {
	@include seccionStyle();
	.nombre_seccion {
	 	margin-left: 10px;
		font-family: Lato;
		font-weight: 300;
		color:#ffffff;
	}
	
}

#seccionInicio {
	@include seccionStyle($left:0, $background:#21C1D9);
	.nombre_seccionInicio {
		text-align: center;
		font-family: Lato;
		font-weight: 300;
		color:#ffffff;
		font-size:42px;
		margin: 120px auto 0;
	}
}
.seccion2 {background: #527F83;}
.seccion3 {background: #67B294;}
.seccion4 {background: #7D4B82;}

.seccionEntra {
	left:0 !important;
}
.mysite {
	display:block;
	text-align:right;
	text-align:center;
	display:block;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}