* { margin: 0; padding: 0; border: 0 }
body {
    font: 14px 'arial Lucida Sans Unicode';
    color: #fff;
     background-image:url('reg21.jpg');
}
marquee{
	color: #FFFF99;
	font-size: 30px;
}
section#wrapper {
    width: 1000px;
    margin: 20px auto 0 auto;
	
}
h1 {
    font-size: 60px;
    color: #666666;
    text-align: center;
	text-shadow: 4px 4px 1px #B8B8E6;
}
h1 span { 
		font-size: 80px;
		color: #000 ;
		
}
h4 {
    font-size: 16px;
    color: #666666;
    text-align: center;
	text-shadow: 2px 2px 1px #B8B8E6;
}
h2{
	font-size: 100%;
	color: #666666;
}

table,td
{
width:1000px;
height: 180px;	
border-style: none;
text-align: center;
border-color: #666666;
background-color:#cccccc;
text-decoration: none;
color: #3d3d4c;
border-radius: 1px;
border: 1px solid #ffffd1;
text-decoration: none;
box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
}


div.box {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px 20px 0 20px;
    border: 2px solid #ffffd1;
    border-radius: 105px;
    overflow: hidden;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
    position: relative
}
div.box img { border-radius: 100px ;
		
}
div.box div {
    width: 200px;
    height: 105px;
    background: #cccfff;
	color: #001F3D;
    text-align: center;
    border-radius: 100px;
    padding: 95px 0 0 0
}

div.effect-1 div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 700ms;
}
div.effect-1 div:hover { opacity: 0.9 }
div.effect-2 div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 700ms;
}
div.effect-2 div:hover { opacity: 0.9 }
div.effect-3 div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 700ms;
}
div.effect-3 div:hover { opacity: 0.9 }
div.effect-4 div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 700ms;
}
div.effect-4 div:hover { opacity: 0.9 }





footer{
	width: 1000px;
    margin: 60px auto auto;
    font-size: 85%;
    background: #082A3E ;
    padding: 10px;
    text-align: center;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
	float: left;
	}
footer a{ margin: 0 15px; 
	color: #F0F8FF;
	text-decoration: none;
}


@media only screen
and (min-width : 480px)
and (max-width : 800px) {
    section#wrapper { width: 600px }
    h1 { font-size: 320% }
    div { width: 408px }
    aside { width: 150px }
    footer { width: 560px }
	table img { width: 480px}
}
 
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
    section#wrapper { width: 400px; }
    h1 { font-size: 200%; }
    div{ width: 400px; padding: 0; margin: 0; border: 0 }
    aside { display: none }
    footer { width: 360px }
	table img { width: 320px}
}
 
@media only screen
and (min-width: 240px)
and (max-width: 320px) {
    section#wrapper { width: 300px; }
    h1 { font-size: 200%; text-align: center }
    h1 span { display: block }
    nav { text-align: center }
    nav a { margin: 0 3px }
    nav a:first-child { margin: 0 3px }
    div { width: 300px; padding: 0; margin: 0; border: 0 }
    aside { display: none }
    footer { display: none }
	table img { width: 240px}
}