* {
    box-sizing: border-box;
}



/******************** SIDEBAR L ******************/

#sidebarL {
	position: relative;
	float:left;
	/* left:1%; */
	top:1%;
	width: 20%;
	height: auto;
	overflow: hidden;
   	z-index:10000;
	}
	
	.sidebarL{
	width:20%;
	height:100%;
	border: 1px solid #a1a1a1;
}

.menu {
	position: fixed;
	
	float:left;
	left: 10%;
	width: 120px;
	height:90%;
	overflow: hidden;
    z-index:10100;
	}

.menu ul {
    /* margin: 1%; */
	list-style-type: none;
}

.menu li {
	animation:slide 5s 1;
 	-webkit-animation:slide 5s 1;
	list-style-type: none;
    padding-left: 7px;
	padding-right: 7px;
	padding-top:7px;
	padding-bottom:7px;
	text-align:centre;
	margin-left:-50px; 
    margin-bottom: 2%;
	width: 120px;
	/* background-color :#33b5e5; */
   /*  color: #ffffff; */ 
	 /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}


.menu li{
	transition: transform .7s ease-in-out;
	-webkit-transition: transform .7s ease-in-out;
}

.menu li:hover{
	transform: translate3d(90px,0px, 0px);
	-webkit-transform: translate3d(90px,0px, 0px);
}

@keyframes slide {
	0%{
		transform: translate3d(90px, 0px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(90px, 0px, 0px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
	 }
}

/******************SIDEBAR R****************************/

#sidebarR {
	position: fixed;
	right:1%;
	top:1%;
	width: 20%;
	height: auto;
	overflow: hidden;
   	z-index:10000;
	}

.sidebarR{
		width:20%;
		height:100%;
		border: 1px solid #a1a1a1;
	}

.social{
	position: fixed;
	float:right;
	right:0%;
	top:25%;
	width: 60px;
	height:auto;	
	overflow: show;
    z-index:10100;
}

.social ul {
    list-style-type: none;
    /* padding: 2%; */ 
}

.social li {
	animation:slideR 5s 1;
 	-webkit-animation:slideR 5s 1;
	list-style-type: none;
   /*  padding-left: 5px;
	padding-right: 5px; */
	text-align:left;
	margin-right:0px;
    margin-bottom: 1px;
	width: 85px;
	/* background-color :#33b5e5; */
   /*  color: #ffffff; */ 
	/*  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}


.social li{
	transition: transform .7s ease-in-out;
	-webkit-transition: transform .7s ease-in-out;
}

.social li:hover{
	transform: translate3d(-50px,0px, 0px);
	 -webkit-transform: translate3d(-50px,0px, 0px);
}


 @keyframes slideR {
	0%{
		transform: translate3d(-15px, 0px, 0px);
       animation-timing-function: ease-in;
	}
    50% {
        transform: translate3d(-40px, 0px, 0px);
	}
    100% {
        transform: translate3d(0px, 0px, 0px);
	}
}