/*.container {
	   width: 90%;
	   margin: 20px auto;
	   bottom: 0px;
	   background-color: rgba(0, 0, 0, 0.37);
	   padding: 20px;
	   color: #d8d3d3;
	   text-align: center;
	margin-top: 560px;
	    }
@media only screen and (max-width: 747px) {
.container{
width: auto;
height: auto;
padding: 6px;
margin-top: 390px;
	}
}
*/


a.btn.btn-outline-success{
	padding: 4px;	
}
a.btn.btn-outline-secondary{
	padding: 4px;	
}



/*TEXT RANDOM COLOUR CHANGE*/
.textanim{
	animation-name: successcolors;
    animation-duration: 2s;
	animation-iteration-count: infinite;
	
}





/* Standard syntax */
@keyframes successcolors {
    
    25%  {border-color: #5cb85c; left:200px; top:0px;
	     color: #5cb85c; left:200px; top:0px;   
	}
    75%  {border-color: #ccc; left:0px; top:200px;
	      color: #ccc; left:0px; top:200px;
	}
}


/*TEXT RANDOM COLOUR CHANGE*/
.btn-outline-secondary,.btn-outline-primary{
	animation-name: primarycolors;
    animation-duration: 2s;
	animation-iteration-count: infinite;
	
}

/* Standard syntax */
@keyframes primarycolors {
    
    25%  {color: #ccc; left:200px; top:0px;
	     border-color: #ccc; left:0px; top:200px;}
    75%  {color: #5cb85c; left:0px; top:200px;
	     border-color: #5cb85c; left:200px; top:0px;}
}


/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
	
}

code {
  font-size: 80%;
}

.pagination.pagination-sm{
	float:none;
	

	
}
li.page-item a{ 
 font:  3px solid #ffffff;
	
	}
li .btn.btn-block{
	background-color: rgba(0, 0, 0, 0.2);
}

a.btn.btn-block img{
	
	border-radius: 10em;
	background: linear-gradient(#ffffff, #3e3e3e);
}
a.btn.btn-block img:hover{
	border: 4px solid #ff0000;
	
	transform: scale(1.1);
	
    transition: 0.5s;
	animation-name: rollingcolors;
    animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function:ease;
	
}

/* Standard syntax */
@keyframes rollingcolors {
	0%  {border-left-color: deepskyblue;
	border-right-color: black;
	border-bottom-color: yellowgreen;
	border-top-color:fuchsia;
	}
    
    25%  {border-top-color: deepskyblue;
	border-left-color: black;
	border-right-color: yellowgreen;
	border-bottom-color:fuchsia;}
	
    75%  {border-bottom-color: deepskyblue;
	border-top-color: black;
	border-left-color: yellowgreen;
	border-right-color:fuchsia;}
	
   100%  {border-right-color: deepskyblue;
	border-bottom-color: black;
	border-top-color: yellowgreen;
	border-left-color:fuchsia;}
}