body {
margin:0px;
background-image:url(\'bg.png\');
background-attachment:fixed;
}
@font-face {
font-family: "Oswald light";
src : url(font/oswald.light.ttf) format("truetype");
}
@font-face {
font-family: "Oswald bold";
src : url(font/oswald.bold.ttf) format("truetype");
}
header {
background-color:#222;
padding:1em;
width:98%;
z-index:999999;
position:fixed;
}
header .logo {
color:#FFF;
font-family:Oswald bold;
font-size:2em;
margin:0;
}
#menu {
float:right;
position:relative;
}
#menu ul {
list-style-type:none;
margin:0.5em;
}
#menu ul li {
display:inline-table;
vertical-align:middle;
margin:0em 0.5em;
}
#menu ul li a {
color:#FFF;
font-family:oswald light;
text-decoration:none;
}
#menu ul li a:hover {
color:#CCC;
}
.wrapper1 {
padding:5em;
min-height:24em;
margin-top:0;
background-color:transparent;
}
#canvas {
width:22em;
margin:2em auto;
}
#submenu {
width:10em;
height:10em;
background-color:#00B945;
opacity:0.6;
float:left;
margin:0.5em;
opacity:0.7;
overflow:hidden;
vertical-align:text-bottom;
cursor:pointer;
}
#submenu:nth-child(2)
{
background-color:#FFC300;
}
#submenu:nth-child(3)
{
background-color:#084c8d;
}
#submenu:nth-child(4)
{
background-color:#9A001E;
}
#submenu:hover > .img {
-webkit-transform:rotate(-360deg) scale(1.4);
-webkit-transition:900ms all ease-in-out;
-moz-transform:rotate(-360deg) scale(1.4);
-moz-transition:900ms all ease-in-out;
-ms-transform:rotate(-360deg) scale(1.4);
-ms-transition:900ms all ease-in-out;
opacity:0.2;
}
#submenu .caption {
background-color:#222;
padding:1em;
padding-bottom:0.2em;
font-family:oswald light;
color:#FFF;
margin-top:10em;
overflow:hidden;
}
#submenu .img {
-webkit-transition:900ms all ease-in-out;
-ms-transition:900ms all ease-in-out;
-moz-transition:900ms all ease-in-out;
width:10em;
height:10em;
margin-left:2em;
}
#submenu:hover {
-webkit-transform:scale(1.1);
}
.wrapper2 {
background-color:#FFD100;
width:96.8%;
min-height:13em;
padding:1em;
}
.span1 {
background:#222;
font-family:Oswald light;
font-weight:900;
text-transform:uppercase;
padding:0.5em;
color:#FFF;
font-size:2em;
}
.span2 {
background:#222;
font-family:Oswald light;
padding:0.5em;
color:#FFF;
font-size:2em;
}
.segi {
border:50px solid;
border-bottom-color:none;
border-left-color:none;
border-right-color:none;
border-top-color:#FFD100;
height:0;
width:0;
margin:0em auto;
z-index:2222;
position:relative;
}
.njero-wrapper {
background-color:#000;
min-height:14em;
vertical-align:text-top;
}
.njero-wrapper .content {
display:inline-table;
width:46%;
color:#FFF;
padding:1em;
font-family:"Franklin Gothic Book";
font-size:1.2em;
}
.njero-wrapper .content table td {
vertical-align:text-top;
}
.njero-wrapper .content:nth-child(2) {
float:right;
color:#FFF;
}