#a1
{
position: absolute;
width:100%;
height: 18%;
background-color:red;
top: 0%;
left: 0%;
}
#a2
{
position: absolute;
top: 0%;
left: 0%;
padding: 9px;
}
#a3
{
position: absolute;
left:9%;
top: 1%;
padding: 14px;
}

#b2,#b3,#b4,#b5,#b6
{
position: absolute;
top: 21%;
text-shadow:3px 3px 3px #2F4F4F;
font-family:Cooper Black;
font-size:30px;
padding:20px;
}
#t
{
position: absolute;
top: 21%;
text-shadow:3px 3px 3px #2F4F4F;
font-family:Cooper Black;
font-size:30px;
padding:20px;
left: 25%;
opacity:0;
height:2%;
color:red;
}
#b2
{
left: 5%;
}
#b3
{
left: 25%;
}

#b4
{
left: 45%;
}
#b5
{
left: 65%;
}
#b6
{
left:85%;
}
a:hover {
    color: 	#FF7F50;
}
#c1
{
position: absolute;
top:34%;
left: 0%;
width: 100%;
height:62%;
animation-name: example1;
    animation-duration: 4s;
    animation-iteration-count: infinite;

	
}
@keyframes example1 
{
     0%   { opacity:.2}
	 40% { opacity:1}
	  60% { opacity:1}
    100% {  opacity:0.2}

}
#d1,#d2,#d3,#d4
{
position: absolute;
top:113%;
left:0%;
height:30%;
width:25%;
  border: 2px solid;
 border-radius: 25px;
 overflow:hidden;
}
#d2{
left: 26%;
}
#d3{
left: 52%;
}
#d4{

left: 78%;
}
#d11
{
position: absolute;
bottom:0%;
left:0%;
height:0%;
width:100%;
color:white;
font-size:25;
 border-bottom-right-radius: 25px;
 border-bottom-left-radius: 25px;
 overflow:hidden;
background-color:blue;
opacity:0;
transition:all 3s;
}
#d1:hover #d11
{
opacity:0.5;
height:70%;
}
#d22
{
position: absolute;
bottom:0%;
left:0%;
height:0%;
width:100%;
color:white;
font-size:25;
 border-bottom-right-radius: 25px;
 border-bottom-left-radius: 25px;
 overflow:hidden;
background-color:blue;
opacity:0;
transition:all 3s;
}
#d2:hover #d22
{
opacity:0.5;
height:70%;
}
#d33
{
position: absolute;
bottom:0%;
left:0%;
height:0%;
width:100%;
color:white;
font-size:25;
 border-bottom-right-radius: 25px;
 border-bottom-left-radius: 25px;
 overflow:hidden;
background-color:blue;
opacity:0;
transition:all 3s;
}
#d3:hover #d33
{
opacity:0.5;
height:70%;
}
#d44
{
position: absolute;
bottom:0%;
left:0%;
height:0%;
width:100%;
color:white;
font-size:25;
 border-bottom-right-radius: 25px;
 border-bottom-left-radius: 25px;
 overflow:hidden;
background-color:blue;
opacity:0;
transition:all 3s;
}
#d4:hover #d44
{
opacity:0.5;
height:70%;
}
a{text-decoration:none; color:black;}

#t:hover
{
height:40%;
width:100%;
opacity:1;
}
#t0
{
visibility:visible;
}
#t:hover #t0
{
visibility:visible;
}
#t1
{
position:absolute;
top:30%;
left:-29%;
height:50%;
width:25%;
 transition:all 5s
}
#t1:hover
{
text-shadow:4px 4px 4px #2F4F4F;
transform: rotateY(180deg);
}
#t2
{
position:absolute;
top:30%;
left:-5%;
height:50%;
width:25%;
 transition:all 5s
}
#t2:hover
{
text-shadow:4px 4px 4px #2F4F4F;
transform: rotateY(180deg);
}
#t3
{
position:absolute;
top:30%;
left:20%;
height:50%;
width:25%;
 transition:all 5s
}
#t3:hover
{
text-shadow:4px 4px 4px #2F4F4F;
transform: rotateY(180deg);
}
#t4
{
position:absolute;
top:30%;
left:45%;
height:50%;
width:25%;
 transition:all 5s
}
#t4:hover
{
text-shadow:4px 4px 4px #2F4F4F;
transform: rotateY(180deg);
}