@import url("fonts/Cabal/stylesheet.css");
@import url("fonts/amhara/stylesheet.css");
@import url("Cabal/stylesheet.css");

/***** Resets *****/
html, body, ul, li, h1, h2, p {
  margin: 0;
  padding: 0;
}

/* Declares font family, text colour and adds a subtle pattern to the background */
body {
  font-family: 'amhara', sans-serif;
  color: #007200;
  background-image: url('img/texture.png');
  -webkit-font-smoothing: antialiased;
}
 

/* Make container centered in page and center text inside <div> */
.container {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 420px;
	margin: -220px 0 0 -200px;
	text-align: center;
}
#axzart001 { 
  text-align: center;
}
/* Makes image a circle and sizes it to 40% of the outside container */
.container img { 
  max-width: 42%;
  border-radius: 50%;
}


/* Clears bullet points and places <li> items next to each other instead of stacked on top and changes font */
li {
  display: inline;
  list-style: none;
  padding: 0 4px;
  font-family: 'Cabal', monospace;
}


/* Remove default hyperlink styling, add custom colours and change font-size*/
a, a:visited {
  color: #b2b2b2;
  font-size: 20px;
  text-decoration: none;
}

/* This changes the link colour when someone hovers their mouse over it */
a:hover {
	color: #990000;
	font-size: 18px;
}

a:click {
	color:#007200; 
}

/* Style header tags */
h1, h2 {
  font-weight: 700;
}

h1 {
  font-size: 32px;
  margin: 10px 0 0;
}

h2 {
	font-family: 'Cabal';
	font-size: 22px;
	color: gold;
	text-shadow: #BC0909;
}


/* Add some space around bio */
p {
	padding: 12px 0;
	font-size: 14px;
	font-family: Cabal;
	font-style: normal;
	font-weight: 400;
}

#slogan2 {
	font-family: 'Cabal';
	color: #007200;
}

#slogan3 {
	font-family: 'Cabal';
	color: #b20000;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {
	display: inline;
}

ul.pagination li a {
    color: silver;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd inset;
}

ul.pagination li a.active {
    background-color: #3e8e41;
    color: gold;
    border: 1px solid #b20000;
}

ul.pagination li a:hover:not(.active) {
	background-color: #b20000;
}

div.center {
	text-align: center;
}

#axzNav.center {
	text-align:center;
}

/*********Biography**********/
#axzbio_ {
	word-wrap:normal;
	richness:inherit;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	text-decoration:none;
	color: #A6CA8F;
	appearance:pull-down-menu;
	background-color: #010101;	
}

/*******Audio Playlist*********/
#axzmedia {
	text-align:center
}
#audiolist {
	text-align: center;		
}

#playlist li {
	text-align:center;

}
#playlist1.center {
	text-align:center;	
}

#playlist,audio {
	text-align: center;
	background: #242424;
	width: 416px;
	padding: 8px;
}
#playlist.active a {
	color: #34a853;
	text-decoration: none;
}
#playlist li a {
	text-align: center;
	color: #b3b3b3;
	background: #333;
	padding: 3px;
	display: block;
}
#playlist li a:hover {
	text-decoration:none;
	color: #72A560;
}




/*********IMG Gallery********/
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
		margin: 4px auto;
    }

}

@media only screen and (max-width: 500px){
    .responsive {
        width: 99.99999%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}



/**Footer**/
#footer {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: #7c7e81;
	text-align:center;
	text-decoration:none;      	
	
}
#footer a {
	font-size:10px;	
}
#footer a:hover {
	color: #007200;  	
}
#footer p {
	font-size:10px	
}

/*******Media*******/
#mediahome {
	animation-duration: 0.4s;
	-webkit-animation-duration: 0.4s;
	animation: ease-in-out;
	text-align:center;
}

#media1 {
	backface-visibility:hidden;
	volume:soft soft 0.23;
	background-color: #131212;
	background-image:url(img/haile+selassie+i.jpg);
	border-image:url(img/media/angels.gif);
}

.button {
  display: inline-block;
  padding: 16px 64px;
  font-family:amhara;
  font-size: 23px;
  cursor: pointer;
  text-align: center;	
  text-decoration: none;
  outline: none;
  color: gold;
  background-color: #329932;
  border: none;
  border-radius: 16px;
  box-shadow: 0 9px #b20000;
}

.button:hover {
	background-color: #3e8e41;
}

.button:active {
  background-color: #b20000;
  box-shadow: 0 5px #1a1d20;
  transform: translateY(4px);
  color: #007200;
}




/* Style 'achievable' and 'unachievable' classes */
.achievable, .unachievable {
  width: 64%;
  margin:10px auto 20px;
  border-radius: 3px;
  padding: 12px 0;
  display:inline-block;
}

.button {
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;

}

.achievable {
	opacity: 72%;
  color: #e5c100;
  background-color: #329932;
  text-shadow: #010101;
}

.unachievable {
  color: #329932;
  background-color: #b20000;
  text: 'Try and Tri again!!!';
  
}

.hidden  {
	display:none;
}

#smiz_lb {
	animation:ease-in-out;
	background:url(img/media/smoke_.gif):center:inherit;
	background-image:url(img/media/smoke_.gif):!important;
	padding: 96px 0px;
}

/*__________________________________________________________________  tables  */
table {
  width: 100%;
  margin: 0 0 18px 0;
}
table th {
  text-align: center;
  font-style: normal
  font-weight: bold;
  font-family: Cabal, serif;
  border-bottom: 1px dotted #333;
}
table td, table th {
  padding: 5px 15px 5px 0px;
  vertical-align: top;
}
table td.option {
  font-weight: bold;
  color: #ff3b9a;
  padding-left: 0;
  width: 120px;
}
table#features-table tr td {
  vertical-align: middle;
  padding: 5px 5px 5px 10px;
}
table#features-table tr td.strong {
  font-family: Cabal, serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  width: 96px;
  color: #ff3b9a;
}
table.thumbs {
  margin-left: auto;
  margin-right: auto;
  width: 420px;
}
table.thumbs td {
  padding: 0;
  text-align: center;
  width: 144px;
}
table#download-table tr td {
  vertical-align: middle;
}
table#download-table tr td.button-container {
  width: 144px;
  text-align: center;
}


/*__________________________________________________________________  galleria  */


<style>

#fadeshow2 .gallerylayer img{
text-align:center;
width: 100%;
height: auto;
}

@media screen and (max-width: 860px){ /* when document is 860px or less */
#fadeshow2{
height: 573px !important;
}
}

@media screen and (max-width: 600px){ /* when document is 600px or less */
#fadeshow2{
height: 400px !important;
}
}

@media screen and (max-width: 480px){ /* when document is 480px or less */
#fadeshow2{
height: 320px !important;
}
}

</style>