html{
    overflow-y: hidden;
}

body{
    margin:0;
    /*background-color: #fff;*/
background:
radial-gradient(rgba(53, 53, 53, .2) 15%, transparent 16%) 0 0,
radial-gradient(rgba(53, 53, 53, .2) 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#484848;
background-size:16px 16px;
}

#wrapping{
    position: relative;
    width: 60%;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

nav .circle{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
    -khtml-border-radius: 75px;
    box-shadow:0 0 9px 0px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 9px 0px -moz-rgba(0,0,0,.8);
    -webkit-box-shadow:0 0 9px 0px rgba(0,0,0,.8);
    background:#353535 none; 
    background:-webkit-gradient(linear,left top,left bottom,from(#A0A0A0),to(#353535)); 
    background:-moz-linear-gradient(top,#A0A0A0,#353535); 
    filter:progid:DXImageTransform.Microsoft.gradient(endcolorstr=#FF353535,startcolorstr=#FFA0A0A0)); 
    background:-ms-linear-gradient(top,#A0A0A0,#353535); 
    background:-o-linear-gradient(top,#A0A0A0,#353535);
}

nav .circle:hover{
    background:#A0A0A0 none; 
    background:-webkit-gradient(linear,left top,left bottom,from(#353535),to(#A0A0A0)); 
    background:-moz-linear-gradient(top,#353535,#A0A0A0); 
    filter:progid:DXImageTransform.Microsoft.gradient(endcolorstr=#FFA0A0A0,startcolorstr=#FF353535)); 
    background:-ms-linear-gradient(top,#353535,#A0A0A0); 
    background:-o-linear-gradient(top,#353535,#A0A0A0);
}

nav .container{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 130px;
    height: 130px;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    -khtml-border-radius: inherit;
    text-align: center;
   /* vertical-align: middle;*/
}

nav .content{
    position: absolute;
    display: table-cell;
    width: inherit;
    height: inherit;
    vertical-align: middle;
    text-align: center;
    font-size: 15pt;
    font-family: fantasy;
    color: white;
    text-shadow:#aaa 1px 1px 0, #555 -1px -1px 0;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    -khtml-border-radius: inherit;
    box-shadow: inset 0 0 19px 7px rgba(100,100,100,1);
    -moz-box-shadow: inset 0 0 9px 3px -moz-rgba(100,100,100,.8);
    -webkit-box-shadow: inset 0 0 9px 3px rgba(100,100,100,.8);
}

nav .cdiv{
    position: relative;
    display: table-cell;
    width: inherit;
    height: inherit;
    vertical-align: middle;
    text-align: center;
}
nav .content {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
nav .content img {
    -webkit-filter: none;
    filter: none;
    opacity: 0.6;
}
nav .content:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}
/*nav .content img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
nav .content img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}*/
/*
nav.main #c1{
    
    top: 10px;
    left: 130px;
}
nav.main #c2{
    
    top: 10px;
    left: 260px;
}
nav.main #c3{
    
    top: 10px;
    left: 390px;
}
nav.main #c4{
    
    top: 10px;
    left: 520px;
}
nav.main #c5{
    
    top: 10px;
    left: 10px;
}
nav.main #c6{
    
    top: 10px;
    left: 10px;
}
nav.main #c7{
    
    top: 10px;
    left: 10px;
}
nav.main #c8{
    
    top: 10px;
    left: 10px;
}*/
/*
nav.main #c1{
    background: url('graphics/1.jpg') no-repeat;
}
nav.main #c2{
    background: url('graphics/2.jpg') no-repeat center center;
}
nav.main #c3{
    background: url('graphics/3.jpg') no-repeat center right;
}
nav.main #c4{
    background: url('graphics/4.jpg') no-repeat center center;
}
nav.main #c5{
    background: url('graphics/5.jpg') no-repeat center center;
}
nav.main #c6{
    background: url('graphics/6.jpg') no-repeat center center;
}*/

article .circle{
    display: none;
    position: absolute;
    width: 410px;
    height: 410px;
    -moz-border-radius: 205px;
    -webkit-border-radius: 205px;
    border-radius: 205px;
    -khtml-border-radius: 205px;
    box-shadow: inset 0 0 7px 3px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 0 7px 3px -moz-rgba(0,0,0,.8);
    -webkit-box-shadow: inset 0 0 7px 3px rgba(0,0,0,.8);
    background:#FFFFFF none; 
    background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#C5C5C5)); 
    background:-moz-radial-gradient(205px 320px ,#FFFFFF,#C5C5C5); 
    filter:progid:DXImageTransform.Microsoft.gradient(endcolorstr=#C5C5C5FF,startcolorstr=#FFFFFFFF)); 
    background:-ms-linear-gradient(top,#FFFFFF,#C5C5C5); 
    background:-o-linear-gradient(top,#FFFFFF,#C5C5C5);
}

article h1{
    text-align: center;
    font-size: 20pt;
    font-family: fantasy;
    margin-top: 30px;
    margin-bottom: 15px;
}

article .container{
    position: absolute;
    left: 45px;
    right: 45px;
}

article .content{
    text-align: justify;
    display: table-cell;
}