.drawer{


   	& > .header{
   		position: relative;
   		display: inline-block;
   		width: 100%;
   		height: 143px;
   		left: 0px;
   		top: 0px;
   		margin-bottom: 8px;
   	    padding: 8px;

   	    border: 1px solid $c-divider;
   	    
   	   // 

		& > .bg{
			position: absolute;
			display: inline-block;
			height: 72px;
			width: 72px;
			top: 0px;
			right:0px;
			
			background:          url('svg/illustrations/gosive-logo-white.svg');
      		background-size:     100% auto   !important;
      		background-position: center !important;
      		background-repeat:   no-repeat !important;

      		opacity: 0.54;
      		@include selectNo;

			//border: 0.3px solid red;               //←←←←←←←←←←←←←←←←←←←←
		}

	    &:before{ //lapiz
	    	content: "";
	    	position: absolute;
	    	top: 0px;
	    	left: 0px;
			width:  100%;
			height: 100%;

			@include selectNo;
			// background: $c-p;
			// background: linear-gradient(164deg, rgba(2,128,238,1) 47%, rgba(15,62,169,1) 100%);
		    //filter: blur(2px);

			background: linear-gradient(90deg, #0072FF, #0CA9E8);	
		    background-size: 400% 400%;

		    -webkit-animation: animationRotationLocal 4s ease infinite;
		    -moz-animation: animationRotationLocal 4s ease infinite;
		     animation: animationRotationLocal 4s ease infinite;

	    }

   			& > .title{
   				position: relative;
				display: block;	 
				margin-top: 8px;
				padding-left: 16px;
		   		@include font(title, $c-w)
   			}

     		& > .des{
   				position: relative;
				display: block;	
				margin-top:4px;
				padding-left: 16px;
		   		@include font(body2, $c-w) 
   			} 


		& > .avatarD{
			position: relative;
			width: 56px;
			height: 56px;
			//border-radius: 50%;
			border: 2px solid $c-w;
		   	margin-bottom: 8px;
		   	margin-left: 12px;

		   	border-radius: 50%;

		    background: url(img/pic/person.svg) no-repeat;
		    background-size: 130% auto;
		    background-position: center;
		    cursor: pointer;

		    @include bs-4;
		    

			    &:after{ //lapiz
			    	content: "";
			    	position: absolute;
			    	top: 0px;
			    	left: 0px;
	   				width: 48px;
	   				height: 48px;
					border-radius: 50%;
				    background:   url(svg/edit-white.svg) no-repeat;
 
				    background-size: 70% auto;
				    background-position: center;
		    		opacity: 0;
		    		transform: rotate(-180deg);
				    transition: all .200s; 

			    }

			    &:hover {
		    		&:after{
			    		opacity: 1;
			    		transform: rotate(0deg)
	
			    	}
			    }

   		} /*avatar*/

		
   	}




} 



@keyframes animationRotationLocal{
	    0%{background-position:0% 50%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 50%}
}