:root{
	--lotsOfYellow: #F0A500;
	--kindaBlue: #334756;
	--navyBlue: #082032;
	--black: #000000;
	}
  

* {
	margin: 0; 
	padding: 0;
    
}

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 48em
}
body {
	background: white;
	font-family: 'Raleway', sans-serif;
font-weight: 500;
}


.accordian {
	width: 805px; height: 320px;
	overflow: hidden;
	
	margin: 10px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}


.accordian ul {
	width: 2000px;

}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;

}


.accordian ul:hover li {width: 40px;}

.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

.image_title:active {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}

     /* GallryL */
     #gallarytext{
        position:relative;
        top:4px;
        color:rgb(12, 12, 12);
        font-family: 'Raleway', sans-serif;
font-weight: 500;
    }
    #gallarytext2{
        color:var(--lotsOfYellow);
    }
    .gallary {
     font-size: 32px;
     color:rgb(10, 10, 10);
     height:60px;
     padding-right:10px;
     border-right:0.1px solid var(--lotsOfYellow);
    }
    .gallary:hover #gallarytext{
     color:var(--lotsOfYellow);
     transition:color 2s;
    }
    .gallary:hover #gallarytext2{
     color:rgb(8, 8, 8);
     transition:color 2s;
    }