@import url(http://fonts.googleapis.com/css?family=Dosis:400,700,600);

*                       { padding: 0px; margin: 0px;}
body, html              { width: 100%; height: 100%; background-color: #8ec449; font-family: verdana,Arial; line-height: 200%; }

/* main slide */
.slide                  { width: 100%; min-height: 100%; overflow: visible;}
.table                  { display: table; list-style: none;}
.table > ul             { display: table-row; list-style: none; vertical-align: top;}
.table > ul > li        { display: table-cell; list-style: none; vertical-align: top;}

/**  width pattern */
.width100               { width: 100%; }
.width70                { width: 70%; }
.width65                { width: 65%; }
.width30                { width: 30%; }
.width35                { width: 35%; }
.width25                { width: 25%; }
.width20                { width: 20%; }


.height100              { height: 100%;}

.topPadding             { padding: 15%;}

.padding10              { padding: 10%;}
.paddingl10             { padding-left: 10%; padding-right: 10%;}
/* menu */
.menu                   { background-color: #ffffff; height: 15%; position: absolute; top: 85%; width: 100%; box-shadow: 0px 0px 5px #888888;}
.menu a                 { display: block; width: 100%; padding-top: 12%; padding-bottom: 10%; text-align: center; text-decoration: none; color: #717073; font-size: 16px;}
.menu ul li:hover       { background-color: #B0D67F;}
.menu ul li:hover a     { color: #ffffff; }

.fixedmenu              { position: fixed; top: 0px; left: 0px;}


.homepage               { padding-top: 10%; padding-left: 10%; padding-right: 10%;}
.homepage .homecontent  { width: 50%; color: #ffffff; opacity: 0.9; line-height: 175%; font-size: 17px;}
.homepage .header       { display: block; height: 150px;}
.homepage .header h1    { display:block; color: #ffffff; padding-top: 15px; font-size: 50px; width: 600px; opacity: 0.7; font-family: Dosis;}
.homepage .header h3    { display:block; color: #ffffff; padding-top: 15px; font-size: 30px; width: 600px; padding-left: 250px;opacity: 0.7; font-family: Dosis;}


.homepage .home         { bottom: 15%; position: absolute; right: 0%; width: 532px; height:270px; background-image: url(img/home.png); text-align: center;}

.homepage .home p {
    color: #ffffff;
    text-align: right;    
    position: absolute;
    right: 0%;
    width: 300px;
    padding-right: 15px;
    line-height: 110%;
}

.homepage .home .fan    { background-image: url(img/fan.png); width: 133px; height: 135px; position: relative;  top: 20%; left: 67%; 
    -webkit-animation: fananimation 10s infinite linear;
    -moz-animation: fananimation 10s infinite  linear;
    animation: fananimation 10s infinite  linear;

}


@keyframes fananimation {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(36deg); }
    20% { transform: rotate(72deg); }
    30% { transform: rotate(108deg); }
    40% { transform: rotate(144deg); }
    50% { transform: rotate(180deg); }
    60% { transform: rotate(216deg); }
    70% { transform: rotate(252deg); }
    80% { transform: rotate(288deg); }
    90% { transform: rotate(324deg); }
    100% { transform: rotate(360deg); }
}
.logo                   { background-image: url(img/cloud.png); width: 152px; height: 93px; text-indent: -100000px; opacity: 0.8; float: left;}
.radianceMenu           { background-image: url(img/cloud.png); text-indent: -100000px; background-position: center; background-repeat: no-repeat;}

/* about us */
.whiteBackground            { background-color: #ffffff;}
.yellowBackground           { background-color: #f5b900;}
.orangeBackground           { background-color: #ee4f13;}

/** about us page */
.aboutus  h1                { font-size: 24px; line-height: 350%; font-weight: normal; }
.aboutus p                  { display: block; padding-bottom: 40px;}
.aboutmenu                  { position: fixed; top:30%; display: none;}
.aboutmenu a                { text-decoration: none; color: #000000; background-color: #8EC449; padding: 10px; display: block; padding-left: 30px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: 2px;}