figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0 auto; 
}


figcaption {
position: absolute;
background: rgba(255,255,255,0.50);
padding: 10px 40px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-o-transition:      all 0.6s ease;}

figure:hover figcaption {opacity: 1;}

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }



a.fig:link, a.fig:active, a.fig:visited {
color: #aaa;
background: #ddd;
margin: 2px;
padding-right: 5px;
padding: 6px;
font: 10px calibri;
text-align: center;
letter-spacing: 1px;
border-radius: 4px;
border-bottom: 3px solid #ccc;
border:1px;
}
 
 a.fig:hover {
text-align: center;
border-bottom: 3px solid #bbb;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}






/*************TABS******************/


 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    overflow: hidden;
    background-color: #f7f7f7;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: #aaa;
    text-align: center;
    padding: 7px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 10px;
border: 1px solid #eee;
margin: 2px;
    display: inline-block;
    background-color: #f7f7f7;
    color: #29A1E3;
    text-align: center;
    padding: 7px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 2px;
    border: 1px dashed #5ABBEF;
}

/* Change background color of links on hover */
ul.tab li a:hover {box-shadow:inset 120px 0px 0px #29A1E3;color:#fff;border: 1px dashed #5ABBEF;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #29A1E3;color:#fff;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding-top: 10px;
    border-top: none;
}


/*//////////////////////////////////////*/






figure1 {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0 auto; 
}


figcaption1 {
position: absolute;
padding: 10px 10px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-o-transition:      all 0.6s ease;}

figure1:hover figcaption1 {opacity: 1;}

.cap-bot:before { top: 10px; left: 10px; }
.cap-bot figcaption1 { left: 0; top: -30%;}
.cap-bot:hover figcaption1 { top: 0; }


/*//////////////////////////////////////*/




figure3 {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0 auto; 
}


figcaption3 {
position: absolute;
background: rgba(0,179,255);
padding: 10px 40px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-o-transition:      all 0.6s ease;}

figure3:hover figcaption {opacity: 1;}

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }



a.fig3:link, a.fig3:active, a.fig3:visited {
color: #eee;
background: #99deff;
PUT THE REST OF YOUR LINK CODING HERE
}


 a.fig3:hover {
background-color: #dddddd;
PUT THE REST OF YOUR HOVER LINK CODING HERE
}

/*//////////////////////////////////////*/




#themebox { 
margin: 2px;
padding: 6px;
width: 256px; 
height:180px;
position: relative;
display:inline-block;
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 5px;
}

		
#themebox img {  
width:245px;
height:145px; 
margin: 0px;
-moz-transition: 0.8s ease-out;
-webkit-transition: 0.8s ease-out;
}
	

	

.ssi {
opacity:0;
z-index:2;
width:200px;
height:85px;
padding:20px;
margin-left:15px;
margin-top:15px;
text-align:left;
background-color:rgba(228,230,228,.7);
text-transform:lowercase;
position:absolute;
font-family:calibri;
font-size:10px;
color:#4d4d4d;
font-style: italic;
overflow:auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;}

.ssi:hover{opacity:0.95;}




.linkbox { 	
position: absolute; 
padding: 3px 2px 3px 2px;
width: 250px;		
margin-top: 5px;
background:#e9e9e9;
border: 1px solid #ddd;
}




a.link1, a.link1:active, a.link1:visited {
margin-bottom: 2px;
color:#bbb;
background: #f1f1f1;
font-size:10px;
font-family:arial;
text-align:center;
letter-spacing: 0px; 
padding-left: 38px;
padding-right: 38px;
border:1px solid #ddd;
}

a.link1:hover {
  background:#aaa;
  border: 1px solid #999;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}





/*//////////////////////////////////////*/
SOCIAL ICONS


/* fixed social*/
#fixed-social {
   position: fixed;
   top:222px;
left:7px;
}

#fixed-social a {
   color: #;
   display: block;
   height: 40px;
   position: relative;
   text-align: center;
   width: 40px;
   margin-bottom: 1px;
   z-index: 2;
}
#fixed-social a:hover>span{
	visibility: visible;
  left: 41px;
  opacity: 1;
} 
#fixed-social a span {
	line-height: 30px;
    left: 60px;
    position: absolute;
    text-align: center;
    width: 120px;
    visibility: hidden;
    transition-duration: 0.5s;
    z-index: 1;
    opacity: 0;
}
 .fixed-facebook{
 	background-color: #0069D3;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/Facebook.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 .fixed-facebook span{
	background-color: #0069D3;
 }
 .fixed-twitter{
	background-color: #5ABBEF;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/Twitter.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 .fixed-twitter span{
 	background-color: #5ABBEF;
 }
 .fixed-gplus{
	background-color: #0069D3;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/Google%20Plus.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 .fixed-gplus span{
 	background-color: #0069D3;
 }
 .fixed-linkedin{
	background-color: #2AA2E3;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/LinkedIn.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 .fixed-linkedin span{
 	background-color: #2AA2E3;
 }
 .fixed-instagrem{
	background-color: #7FCDEF;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/Instagram.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 .fixed-instagrem span{
 	background-color: #7FCDEF;

 } 
 .fixed-tumblr{
	background-color: #0069D3;
    background-image: url('http://adammcquaid.ca/mysocialbuttons/Tumblr.png');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
 }
 
 .fixed-tumblr span{
background-color: #0069D3;}




/*end fixed social*/

/* ----------- download button 1 ---------------------------- */





/* Style buttons */
.btn {
  background-color: #f7f7f7;
  border: 4px double #2AA2E3;
  color: #333;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 10px;
  font-family: georgia;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px auto;
-moz-transition: 0.8s ease-out; 
-webkit-transition: 0.8s ease-out; 
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #ccc;
  color: #2AA2E3;
  font-style: italic;
-moz-transition: 0.8s ease-out; 
-webkit-transition: 0.8s ease-out; 
}


/*<button class="btn"><b class="fa fa-download"></b> Download all</button>*/
/* ----------- download button 1 ---------------------------- */











/* ----------- download button 2 ---------------------------- */


body {
	back​body {
	background-color: #1a1a1a;
}

.buttonDownload {
	display: inline-block;
	position: relative;
	padding: 10px 25px;
  
	background-color: #4CC713;
	color: white;
  
	font-family: sans-serif;
	text-decoration: none;
	font-size: 0.9em;
	text-align: center;
	text-indent: 15px;
}

.buttonDownload:hover {
	background-color: #333;
	color: white;
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:before {
	border-color: #4CC713;
}

.buttonDownload:hover:after {
	border-top-color: #4CC713;
	animation-play-state: running;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
  }ground-color: #1a1a1a;
}

.buttonDownload {
	display: inline-block;
	position: fixed;
	top:5px;
	left: 5px;
	padding: 10px 25px;
  
	background-color: #000;
	color: white;
  
	font-family: sans-serif;
	text-decoration: none;
	font-size: 0.9em;
	text-align: center;
	text-indent: 15px;
}

.buttonDownload:hover {
	background-color: #333;
	color: white;
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:before {
	border-color: #4CC713;
}

.buttonDownload:hover:after {
	border-top-color: #4CC713;
	animation-play-state: running;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
}



html


/* <a href="zdownload.zip" class="buttonDownload">Download</a>*/

/* ----------- download button ---------------------------- */