.list1a{
margin:20px 0 0;
padding:0;
list-style:none;
counter-reset:li;
}
.list1a li{
border:2px solid #337AB7;
background:#EBF3FA;
position:relative;
margin-bottom:20px;
padding:16px 10px;
}
.list1a li:hover{
z-index:1;
}
.list1a li:before{
border:2px solid #337AB7;
position:absolute;
top:-14px;
padding:2px 10px;
font-size:11px;
font-weight:bold;
color:#337AB7;
background:#F7FAFD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list1a li:hover:before{
background:#337AB7;
color:#FFF;
-webkit-transform:translate(-12px, 0);
-ms-transform:translate(-12px, 0);
-o-transform:translate(-12px, 0);
transform:translate(-12px, 0);
}
.list1a li:after{
content:"";
position:absolute;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
-webkit-transition-property:width;
transition-property:width;
z-index:-1;
background:#FFF;
height:100%;
left:0;
top:0;
width:0;
}
.list1a li:hover:after{
width:100%;
}
/*-------------------*/
.list1b{
margin:20px 0 0;
padding:0;
list-style:none;
counter-reset:li;
}
.list1b li{
border:2px solid #DDDDDD;
background:#FAFAFA;
position:relative;
margin-bottom:20px;
padding:16px 10px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
.list1b li:hover{
z-index:1;
border:2px solid #ADCEE9;
}
.list1b li:before{
border:2px solid #ADCEE9;
position:absolute;
top:-14px;
padding:2px 10px;
font-size:11px;
font-weight:bold;
color:#337AB7;
background:#F7FAFD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list1b li:hover:before{
border:2px solid #337AB7;
background:#337AB7;
color:#FFF;
-webkit-transform:translate(-12px, 0);
-ms-transform:translate(-12px, 0);
-o-transform:translate(-12px, 0);
transform:translate(-12px, 0);
}
.list1b li:after{
content:"";
position:absolute;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
-webkit-transition-property:width;
transition-property:width;
z-index:-1;
background:#F0F5FB;
height:100%;
left:0;
top:0;
width:0;
}
.list1b li:hover:after{
width:100%;
}
.list1b{
margin:20px 0 0;
padding:0;
list-style:none;
counter-reset:li;
}
.list1b li{
border:2px solid #DDDDDD;
background:#FAFAFA;
position:relative;
margin-bottom:20px;
padding:16px 10px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
.list1b li:hover{
z-index:1;
border:2px solid #ADCEE9;
}
.list1b li:before{
border:2px solid #ADCEE9;
position:absolute;
top:-14px;
padding:2px 10px;
font-size:11px;
font-weight:bold;
color:#337AB7;
background:#F7FAFD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list1b li:hover:before{
border:2px solid #337AB7;
background:#337AB7;
color:#FFF;
-webkit-transform:translate(-12px, 0);
-ms-transform:translate(-12px, 0);
-o-transform:translate(-12px, 0);
transform:translate(-12px, 0);
}
.list1b li:after{
content:"";
position:absolute;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
-webkit-transition-property:width;
transition-property:width;
z-index:-1;
background:#F0F5FB;
height:100%;
left:0;
top:0;
width:0;
}
.list1b li:hover:after{
width:100%;
}
.list1b{
margin:20px 0 0;
padding:0;
list-style:none;
counter-reset:li;
}
.list1b li{
border:2px solid #DDDDDD;
background:#FAFAFA;
position:relative;
margin-bottom:20px;
padding:16px 10px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}
.list1b li:hover{
z-index:1;
border:2px solid #ADCEE9;
}
.list1b li:before{
border:2px solid #ADCEE9;
position:absolute;
top:-14px;
padding:2px 10px;
font-size:11px;
font-weight:bold;
color:#337AB7;
background:#F7FAFD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list1b li:hover:before{
border:2px solid #337AB7;
background:#337AB7;
color:#FFF;
-webkit-transform:translate(-12px, 0);
-ms-transform:translate(-12px, 0);
-o-transform:translate(-12px, 0);
transform:translate(-12px, 0);
}
.list1b li:after{
content:"";
position:absolute;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
-webkit-transition-property:width;
transition-property:width;
z-index:-1;
background:#F0F5FB;
height:100%;
left:0;
top:0;
width:0;
}
.list1b li:hover:after{
width:100%;
}
/*-------------------*/
.list2a{
margin-bottom:8px;
padding:0;
list-style:none;
counter-reset:li;
}	
.list2a li{
position:relative;
border:2px solid #337AB7;
background:#EBF3FA;
padding:16px 20px 16px 28px;
margin:12px 0 12px 40px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list2a li:hover{
background:#FFF;
}
.list2a li:before{
line-height:32px;
position:absolute;
top:4px;
left:-40px;
width:40px;
text-align:center;
font-size:16px;
font-weight:bold;
color:#FFF;
background:#337AB7;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.2s;
transition-duration:0.2s;
}
.list2a li:hover:before{
width:46px;
}
.list2a li:after{
position:absolute;
left:0;
top:4px;
content:"";
height:0;
width:0;
border:16px solid transparent;
border-left-color:#337AB7;
-webkit-transition-duration:0.2s;
transition-duration:0.2s
}
.list2a li:hover:after{
margin-left:6px;
}
.list2a{
margin-bottom:8px;
padding:0;
list-style:none;
counter-reset:li;
}  
.list2a li{
position:relative;
border:2px solid #337AB7;
background:#EBF3FA;
padding:16px 20px 16px 28px;
margin:12px 0 12px 40px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list2a li:hover{
background:#FFF;
}
.list2a li:before{
line-height:32px;
position:absolute;
top:4px;
left:-40px;
width:40px;
text-align:center;
font-size:16px;
font-weight:bold;
color:#FFF;
background:#337AB7;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.2s;
transition-duration:0.2s;
}
.list2a li:hover:before{
width:46px;
}
.list2a li:after{
position:absolute;
left:0;
top:4px;
content:"";
height:0;
width:0;
border:16px solid transparent;
border-left-color:#337AB7;
-webkit-transition-duration:0.2s;
transition-duration:0.2s
}
.list2a li:hover:after{
margin-left:6px;
}
/*-------------------*/
.list2b{
margin-bottom:8px;
padding:0;
list-style:none;
counter-reset:li;
}  
.list2b li{
position:relative;
border:2px solid #DDDDDD;
background:#FAFAFA;
padding:16px 20px 16px 28px;
margin:12px 0 12px 40px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list2b li:hover{
background:#F0F5FB;
border:2px solid #ADCEE9;
}
.list2b li:before{
line-height:32px;
position:absolute;
top:4px;
left:-40px;
width:40px;
text-align:center;
font-size:16px;
font-weight:bold;
color:#FFF;
background:#77AEDB;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.2s;
transition-duration:0.2s;
}
.list2b li:hover:before{
width:46px;
background:#337AB7;
}
.list2b li:after{
position:absolute;
left:0;
top:4px;
content:"";
height:0;
width:0;
border:16px solid transparent;
border-left-color:#77AEDB;
-webkit-transition-duration:0.2s;
transition-duration:0.2s
}
.list2b li:hover:after{
margin-left:6px;
border-left-color:#337AB7;
}
/*-------------------*/
.list3a{
padding:0;
list-style:none;
counter-reset:li;
}	
.list3a li{
position:relative;
border-left:4px solid #337AB7;
padding:16px 20px 16px 28px;
margin:12px 0 12px 80px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list3a li:before{
line-height:32px;
position:absolute;
top:10px;
left:-80px;
width:80px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#77AEDB;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;	
}
.list3a li:hover:before{
color:#337AB7;
}
.list3a li:after{
position:absolute;
top:26px;
left:-40px;
width:60px;
height:60px;
border:8px solid #3399FF;
border-radius:50%;
content:'';
opacity:0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-moz-transition:-moz-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transform:translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform:translateX(-50%) translateY(-50%) scale(0.1);
transform:translateX(-50%) translateY(-50%) scale(0.1);
pointer-events:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;		
}
.list3a li:hover:after{
opacity:0.2;
-webkit-transform:translateX(-50%) translateY(-50%) scale(1);
-moz-transform:translateX(-50%) translateY(-50%) scale(1);
transform:translateX(-50%) translateY(-50%) scale(1);
}	
.list3a{
padding:0;
list-style:none;
counter-reset:li;
}  
.list3a li{
position:relative;
border-left:4px solid #337AB7;
padding:16px 20px 16px 28px;
margin:12px 0 12px 80px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list3a li:before{
line-height:32px;
position:absolute;
top:10px;
left:-80px;
width:80px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#77AEDB;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;   
}
.list3a li:hover:before{
color:#337AB7;
}
.list3a li:after{
position:absolute;
top:26px;
left:-40px;
width:60px;
height:60px;
border:8px solid #3399FF;
border-radius:50%;
content:'';
opacity:0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-moz-transition:-moz-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transform:translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform:translateX(-50%) translateY(-50%) scale(0.1);
transform:translateX(-50%) translateY(-50%) scale(0.1);
pointer-events:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;       
}
.list3a li:hover:after{
opacity:0.2;
-webkit-transform:translateX(-50%) translateY(-50%) scale(1);
-moz-transform:translateX(-50%) translateY(-50%) scale(1);
transform:translateX(-50%) translateY(-50%) scale(1);
}
/*-------------------*/
.list3b{
padding:0;
list-style:none;
counter-reset:li;
}	
.list3b li{
position:relative;
border-left:4px solid #DDDDDD;
padding:16px 20px 16px 28px;
margin:12px 0 12px 80px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list3b li:before{
line-height:32px;
position:absolute;
top:10px;
left:-80px;
width:80px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#DDDDDD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;		
}
.list3b li:hover:before{
color:#77AEDB;
}
.list3b li:after{
position:absolute;
top:26px;
left:-40px;
width:60px;
height:60px;
border:8px solid #3399FF;
border-radius:50%;
content:'';
opacity:0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-moz-transition:-moz-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transform:translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform:translateX(-50%) translateY(-50%) scale(0.1);
transform:translateX(-50%) translateY(-50%) scale(0.1);
pointer-events:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;		
}
.list3b li:hover:after{
opacity:0.2;
-webkit-transform:translateX(-50%) translateY(-50%) scale(1);
-moz-transform:translateX(-50%) translateY(-50%) scale(1);
transform:translateX(-50%) translateY(-50%) scale(1);
}
.list3b{
padding:0;
list-style:none;
counter-reset:li;
}  
.list3b li{
position:relative;
border-left:4px solid #DDDDDD;
padding:16px 20px 16px 28px;
margin:12px 0 12px 80px;
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
}
.list3b li:before{
line-height:32px;
position:absolute;
top:10px;
left:-80px;
width:80px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#DDDDDD;
counter-increment:li;
content:counter(li);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;       
}
.list3b li:hover:before{
color:#77AEDB;
}
.list3b li:after{
position:absolute;
top:26px;
left:-40px;
width:60px;
height:60px;
border:8px solid #3399FF;
border-radius:50%;
content:'';
opacity:0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-moz-transition:-moz-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transform:translateX(-50%) translateY(-50%) scale(0.1);
-moz-transform:translateX(-50%) translateY(-50%) scale(0.1);
transform:translateX(-50%) translateY(-50%) scale(0.1);
pointer-events:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;       
}
.list3b li:hover:after{
opacity:0.2;
-webkit-transform:translateX(-50%) translateY(-50%) scale(1);
-moz-transform:translateX(-50%) translateY(-50%) scale(1);
transform:translateX(-50%) translateY(-50%) scale(1);
}
/*-------------------*/
.list4a{
padding:0;
list-style:none;
counter-reset:li;
}	
.list4a li{
position:relative;
padding:12px 20px 20px 28px;
margin-left:40px;
transition-duration:0.3s;
}
.list4a li:before{
border:6px solid transparent;
line-height:30px;
position:absolute;
top:0;
left:-30px;
width:42px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#77AEDB;
counter-increment:li;
content:counter(li);
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;	
}
.list4a li:hover:before{
color:#337AB7;	
}
.list4a li:after{
position:absolute;
top:0;
left:-30px;
width:42px;
height:42px;
border:6px solid #3399FF;
border-radius:50%;
content:'';
opacity:0.5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;	
}
.list4a li:hover:after{
animation:500ms ease-in-out 0s bounceIn;
opacity:1;
}	
@keyframes bounceIn{
0%{
opacity:0;
transform:scale3d(.3, .3, .3);
}
20%{
transform:scale3d(1.3, 1.3, 1.3);
}
40%{
transform:scale3d(.9, .9, .9);
}
60%{
opacity:1;
transform:scale3d(1.03, 1.03, 1.03);
}
80%{
transform:scale3d(.97, .97, .97);
}
to{
opacity:1;
transform:scale3d(1, 1, 1);
}
}
/*-------------------*/
.list4b{
padding:0;
list-style:none;
counter-reset:li;
}	
.list4b li{
position:relative;
padding:12px 20px 20px 28px;
margin-left:40px;
transition-duration:0.3s;
}
.list4b li:before{
border:6px solid transparent;
line-height:30px;
position:absolute;
top:0;
left:-30px;
width:42px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#ADCEE9;
counter-increment:li;
content:counter(li);
transition-duration:0.3s;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;	
}
.list4b li:hover:before{
color:#337AB7;
}
.list4b li:after{
position:absolute;
top:0;
left:-30px;
width:42px;
height:42px;
border:6px solid #DDDDDD;
border-radius:50%;
content:'';
opacity:0.5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;	
}
.list4b li:hover:after{
animation:500ms ease-in-out 0s bounceIn;
opacity:1;
border:6px solid #ADCEE9;	
}	

@keyframes bounceIn{
0%{
opacity:0;
transform:scale3d(.3, .3, .3);
}
20%{
transform:scale3d(1.3, 1.3, 1.3);
}
40%{
transform:scale3d(.9, .9, .9);
}
60%{
opacity:1;
transform:scale3d(1.03, 1.03, 1.03);
}
80%{
transform:scale3d(.97, .97, .97);
}
to{
opacity:1;
transform:scale3d(1, 1, 1);
}
}
/*-------------------*/
.list5a{
padding:0;
list-style:none;
}  
.list5a li{
position:relative;
padding:10px 30px;
background:linear-gradient(to left, #ADCEE9 0%, #FFF, #ADCEE9);
border:2px solid #337AB7;
color:#506a6b;
box-shadow:0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom:5px;
text-align:center;
background-size:100% 100%;
z-index:1;
}
.list5a li:before{
content:"";
position:absolute;
width:0;
height:100%;
top:50%;
left:50%;
background:linear-gradient(to left, #EBF3FA 0%, #FFF, #EBF3FA);
opacity:0;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
z-index:-1;
}
.list5a li:hover:before{
width:100%;
opacity:1;
}
/*-------------------*/
.list5b{
padding:0;
list-style:none;
}	
.list5b li{
position:relative;
padding:10px 30px;
background:linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
border:2px solid #C0C0C0;
color:#506a6b;
box-shadow:0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom:5px;
text-align:center;
background-size:100% 100%;
z-index:1;
}
.list5b li:hover{
border:2px solid #ADCEE9;
}
.list5b li:before{
content:"";
position:absolute;
width:0;
height:100%;
top:50%;
left:50%;
background:linear-gradient(to left, #E2F0FA 0%, #FFF, #E2F0FA);
opacity:0;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
z-index:-1;
}
.list5b li:hover:before{
width:100%;
opacity:1;
}
.list5b{
padding:0;
list-style:none;
}  
.list5b li{
position:relative;
padding:10px 30px;
background:linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
border:2px solid #C0C0C0;
color:#506a6b;
box-shadow:0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom:5px;
text-align:center;
background-size:100% 100%;
z-index:1;
}
.list5b li:hover{
border:2px solid #ADCEE9;
}
.list5b li:before{
content:"";
position:absolute;
width:0;
height:100%;
top:50%;
left:50%;
background:linear-gradient(to left, #E2F0FA 0%, #FFF, #E2F0FA);
opacity:0;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
z-index:-1;
}
.list5b li:hover:before{
width:100%;
opacity:1;
}
/*-------------------*/
.list6a{
padding:0;
list-style:none;
}
.list6a li{
padding:6px;
}
.list6a li:before{
padding-right:10px;
font-weight:bold;
color:#77AEDB;
content:"\2606";
transition-duration:0.5s;
}
.list6a li:hover:before{
color:#337AB7;
content:"\2605";
}
.list6b{
padding:0;
list-style:none;
}
.list6b li{
padding:6px;
}
.list6b li:before{
padding-right:10px;
font-weight:bold;
color:#C0C0C0;
content:"\2714";
transition-duration:0.5s;
}
.list6b li:hover:before{
color:#337AB7;
content:"\2714";
}  
/*-------------------*/
.rounded{
counter-reset:li;
list-style:none;
font:14px "Trebuchet MS", "Lucida Sans";
padding:0;
text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.rounded a{
position:relative;
display:block;
padding:.4em .4em .4em 2em;
margin:.5em 0;
background:#DAD2CA;
color:#444;
text-decoration:none;
border-radius:.3em;
transition:.3s ease-out;
}
.rounded a:hover{background:#E9E4E0;}
.rounded a:hover:before{transform:rotate(360deg);}
.rounded a:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:-1.3em;
top:50%;
margin-top:-1.3em;
background:#8FD4C1;
height:2em;
width:2em;
line-height:2em;
border:.3em solid white;
text-align:center;
font-weight:bold;
border-radius:2em;
transition:all .3s ease-out;
}
/*-------------------*/
.rectangle{
counter-reset:li;
list-style:none;
font:14px "Trebuchet MS", "Lucida Sans";
padding:0;
text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.rectangle a{
position:relative;
display:block;
padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;
background:#D3D4DA;
color:#444;
text-decoration:none;
transition:all .3s ease-out;
}
.rectangle a:hover{background:#DCDDE1;}     
.rectangle a:before{
content:counter(li);
counter-increment:li;
position:absolute;
left:-2.5em;
top:50%;
margin-top:-1em;
background:#9097A2;
height:2em;
width:2em;
line-height:2em;
text-align:center;
font-weight:bold;
}
.rectangle a:after{
position:absolute;
content:"";
border:.5em solid transparent;
left:-1em;
top:50%;
margin-top:-.5em;
transition:all .3s ease-out;
}
.rectangle a:hover:after{
left:-.5em;
border-left-color:#9097A2;
}
/*-------------------*/
.border{
list-style:none;
padding:0;
}
.border li{
font-family:"Trebuchet MS", "Lucida Sans";
padding:7px 20px;
margin-bottom:10px;
border-radius:5px;
border-left:10px solid #f05d22;
box-shadow:2px -2px 5px 0 rgba(0,0,0,.1),
-2px -2px 5px 0 rgba(0,0,0,.1),
2px 2px 5px 0 rgba(0,0,0,.1),
-2px 2px 5px 0 rgba(0,0,0,.1);
font-size:20px;
letter-spacing:2px;
transition:0.3s all linear;
}
.border li:nth-child(2){border-color:#8bc63e;}
.border li:nth-child(3){border-color:#fcba30;}
.border li:nth-child(4){border-color:#1ccfc9;}
.border li:nth-child(5){border-color:#493224;}
.border li:hover{border-left:10px solid transparent;}
.border li:nth-child(1):hover{border-right:10px solid #f05d22;}
.border li:nth-child(2):hover{border-right:10px solid #8bc63e;}
.border li:nth-child(3):hover{border-right:10px solid #fcba30;}
.border li:nth-child(4):hover{border-right:10px solid #1ccfc9;}
.border li:nth-child(5):hover{border-right:10px solid #493224;}
/*-------------------*/
.first {
list-style:none;
padding:0;
}
.first li{
padding:10px 30px;
background:linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);
border-bottom:1px solid grey;
color:#506a6b;
font-size:20px;
box-shadow:0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom:5px;
}
.first li:last-child{border-bottom:none;}
/*-------------------*/
.beads{
list-style:none;
background:#EEE3DB;
margin:0;
padding-left:40px;
border-radius:5px;
}
.beads li{
text-transform:uppercase;
font-family:'Montserrat', sans-serif;
line-height:40px;
border-bottom:1px solid #D4D7D6;
position:relative;
}
.beads a{
text-decoration:none;
color:#464643;
display:block;
line-height:40px;
position:relative;
}
.beads a:before{
content:"";
position:absolute;
left:-20px;
top:6px;
width:6px;
height:6px;
border-radius:50%;
background:#A58063;
}
.beads li:last-child{border-bottom:none;}
.beads li:before, 
.beads li:after{
content:"";
position:absolute;
border-radius:50%;
}
.beads li:before{
top:calc(50% - 5px);
background:#E0926E;
left:-22px;
width:10px;
height:10px;
transition:0.5s linear;
}
.beads li:after{
bottom:6px;
left:-20px;
width:6px;
height:6px;
background:#A58063;
}
.beads li:hover:before{background:#FFCE08;}
/*-------------------*/
.dotted{
list-style:none;
font-family:'Marck Script', cursive;
}
.dotted li{
margin-bottom:5px;
border-bottom:2px #404B51 dotted;
font-size:26px;
line-height:1;
}
.dotted li span:nth-child(odd){
padding-right:6px;
color:#404B51;
}
.dotted li span:nth-child(even){
float:right;
padding-left:6px;
color:#35D1CE;
}
.dotted span{
background:white;
position:relative;
bottom:-7px;
}
/*-------------------*/
.bullet{
margin-left:0;
list-style:none;
counter-reset:li;
}
.bullet li{
position:relative;
margin-bottom:1.5em;
border:3px solid #CADFCF;
padding:0.6em;
border-radius:4px;
background:#FEFEFE;
color:#231F20;
font-family:"Trebuchet MS", "Lucida Sans";
}
.bullet li:before{
position:absolute;
top:-0.7em;
padding-left:0.4em;
padding-right:0.4em;
font-size:16px;
font-weight:bold;
color:#DCC24B;
background:#FEFEFE;
border-radius:50%;
counter-increment:li;
content:counter(li);
}
/*-------------------*/
.pills{
margin-left:0;
list-style:none;
counter-reset:li;
font-family:calibri;
}
.pills li{
padding:10px 0;
position:relative;
left:1.5em;
margin-bottom:0.75em;
padding-left:1em;
background:#E3DEDC;
}
.pills li:before{
padding:10px 0;
position:absolute;
top:0;
bottom:0;
left:-1.5em;
width:1.875em;
text-align:center;
color:white;
font-weight:bold;
background:#D66786;
border-bottom-left-radius:70em;
border-top-left-radius:70em;
counter-increment:li;
content:counter(li);
}
/*-------------------*/
.square{
margin:0;
counter-reset:li;
list-style:none;
background:#E8E8E8;
padding:10px;
}
.square li{
position:relative;
margin:0 0 10px 2em;
padding:4px 8px;
border-top:2px solid #787A77;
transition:.3s linear;
}
.square li:last-child{margin-bottom:0;}
.square li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-2em;
width:2em;
box-sizing:border-box;
margin-right:8px;
padding:4px;
border-top:2px solid #787A77;
border-left:2px solid transparent;
border-right:2px solid transparent;
border-bottom:2px solid transparent;
background:#787A77;
color:white;
font-weight:bold;
text-align:center;
transition:.3s linear;
}
.square li:hover{border-top:2px solid #389F70;}
.square li:hover:before{
border:2px solid #389F70;
background:#98EABA;
}
/*-------------------*/
.zebra{
list-style:none;
border-left:10px solid #FC7574;
padding:0;
font-family:"Lucida Sans";
}
.zebra li{padding:10px;}
.zebra li:nth-child(odd){background:#E1F1FF;}
.zebra li:nth-child(even){background:white;}
/*-------------------*/
.holiday{
overflow:hidden;
font-size:16px;
}
.holiday dt, .holiday dd{
height:2.5em;
line-height:2.5em;
padding:0 0.625em 0 0.875em;
color:#4C565C;
box-sizing:border-box;
}
dt{
width:30%;
float:left;
clear:right;
background:#D3E6DD;
font-weight:bold;
}
dd{
width:70%;
float:right;
margin-left:0;
margin-bottom:.3125em;
border:1px solid #BECFC7;
border-left:none;
}
/*-------------------*/
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.older{
list-style:none;
margin:0 auto;
width:660px;
counter-reset:li;
}
.older li{
border-bottom:dashed 1px #006699;
margin-top:10px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:5px;
}
.older a{
text-decoration:none;
padding:10px;
display:block;
line-height:30px;
color:#3A3A3A;
font-family:'EB Garamond', serif;
font-size:20px;
}
.older a:before{
display:inline-block;
content:counter(li);
counter-increment:li;
height:30px;
width:30px;
text-align:center;
border:solid 1px #dedede;
margin-right:20px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
font-family:'Fredericka the Great', cursive;
font-size:24px;
-webkit-transition:.4s linear;
transition:.4s linear;
}
.older a:hover:before{
color:#D72F2C;
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
/*-------------------*/
.category-list *{transition:.4s linear;}
.category-list{
background:white;
list-style-type:circle;
list-style-position:inside;
padding:0 10px;
margin:0;
}
.category-list li{
font-family:"Trebuchet MS", "Lucida Sans";
border-bottom:1px solid #efefef;
padding:10px 0;
}
.category-list a{
text-decoration:none;
color:#555;
}
.category-list li span{
float:right;
display:inline-block;
border:1px solid #efefef;
padding:0 5px;
font-size:13px;
color:#999;
}
.category-list li:hover a{color:#c93961;}
.category-list li:hover span{
color:#c93961;
border:1px solid #c93961;
}