@charset "UTF-8";
/* CSS Document */
body{
	font-family: Verdana;
	padding:0;
	margin:0;

}
#site{
 	width:100%;
	
}
#headerline{
	height:40px;
	background-color:#7a868e;
	
	
}

#headerline>div{
    width: 900px;
    margin: 0 auto;
    font-size: 14px;
    color:#FFF;
    line-height: 40px;
    text-align:center;
}

#header{
	width:930px;
	margin: 0 auto;
	color:#5c5e5f;
	line-height:22px;
	font-size:21px;
}
#main, #footermain{
	width:930px;
	margin: 0 auto;
	padding:5px 0px;
	
}


#main img{
	margin:0px;
 	
}
.mainapp{
	text-align:center;
	height:420px;
	float:left;
	color:#5c5e5f;
	font-size:24px;
	
}
#footer{
	clear:both;
	width:100%;
	background-color:#e77f03;
	height:330px;
	
}
.footertext{
	width:27%;
	text-align:justify;
	margin-left:5%;
	color:#FFF;
	font-size:12px;
	float:left;
	height:220px;
	margin-top:20px;
	
}
.footertext b{
	font-size:16px;
	
}


@media only screen and (max-width: 900px){
       #headerline > div{
           width: 100%;
           font-size: 11px;
       }

    #header{
        text-align: center;
        float: none;
        width: 100%;
    }


    #main{
        width: 100%;
    }
    .mainapp{
        height: auto;
        font-size: 18px;
        width: 33%;
        margin-bottom: 5%;
    }

    .mainapp img{
        width: 100%;
        height: 100%;
    }

    #footer{
        width: 100%;
        height: 350px;
    }

    #footermain{
        width: 100%;
    }

    .footertext{
        height: auto;
    }
}

@media only screen and (max-width: 640px){
    #header{
        text-align: center;
        float: none;
        width: 100%;
    }

    #headerline{
        display: none;
    }

    #main{
        width: 100%;
    }

    .mainapp{
        float: none;
        width: 100%;
        font-size: 24px;
    }

    .mainapp img{
        width: 60%;
        height: 60%;
    }

    #footer{
        height: auto;
    }

    #footermain{
        width: 100%;
    }
    .footertext{
        float:none;
        margin: 0 auto;
        margin-bottom: 5%;
        width: 80% !important;
        height: auto;
    }

    .footertext b{
        text-align: center;
    }
}

@media only screen and (max-width: 480px) {
    #header{
        text-align: center;
        float: none;
        width: 100%;
        margin: 0 1%;
        font-size: 19px;
    }

    #header img{
        display: block;
        padding:  2% 25% 2% 15%;
        margin-left: 2%;
        width: 20%;
        height: 30%;
    }

     #headerline{
         display: none;
     }

     #main{
        width: 100%;
     }

     .mainapp{
         float: none;
          height: auto;
     }

     .footertext{
         float:none;
         margin: 0 auto;
         margin-bottom: 5%;
         width: 80% !important;
         height: auto;
     }

     .footertext b{
         text-align: center;
     }
}