/* My Awesome Customized Styles */
body{
    font-family: Arial,'Century Gothic',  sans-serif;
}

h3{
   font-size: 1.4em; 
}
.wrapper { width: 80%; margin: 0px auto; padding: 0px; }
p {color: #444}
p.italic {font-style:italic}

.header { background: transparent url("../images/top-most.png") repeat-x; height: 120px; float: left; padding: 0%; width: 100%; color: #31628D; margin-bottom:1%;}
.header-logo { margin-left: 0;}

.my-footer { background: transparent url("../images/bottom-most.png") repeat-x; height: 80px; float:left; padding-top: 15px; margin-top: 2%;text-align: center; width: 100%; color: #CCC; font-family: Verdana; font-size: 0.7em;}
.my-footer a { color: #ff6a00; }
.my-footer a:hover { color: #fff; text-decoration: none;}
.my-footer ul { list-style: none; padding: 0px;  }

/* Making Content Area Responsive */
section {
    width: 100%;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0, .3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0, .3);
    box-shadow: 0 0 5px #ff6a00;
    border-radius: 0px;
    padding: 8px;
}

section img { width: 100%; float: right; margin: 1%; }
section h4{ margin-bottom: 1%;}
section h6{ margin-bottom: 1%;font-size: 0.8em;}
section ul { color: #333; padding: 5px; list-style-type: square; filter:alpha(opacity=100); opacity: 0.7;}

/* Making the divs flow from right to left */
.flow {
	float: right;
}

.textbox { font-size: 0.8em;}
.textbox h4 { color: #028153}

.mybox {
    width: 100%;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0, .3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0, .3);
    box-shadow: 0 0 5px #31628D;
    border-radius: 0;
    padding: 10px;
}

.mybox ul {
    color: #333;
    padding: 5px;
    list-style-type: square;
    filter: alpha(opacity=100);
    opacity: 0.7;
}

.mybox h4 { color: #10768E}

.columns {
    -ms-column-count: 4;
    -o-column-count: 4;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    
    -webkit-column-width: 1em;   
}

.columns ul {
    color: #333;
    padding: 5px;
    list-style-type: square;
    filter: alpha(opacity=100);
    opacity: 0.7;
}


/* Media Queries*/

@media screen and (max-width: 1010px){
    .g2 {margin-left: 2%}
    .g3 {margin-left: 2%}
    h3{margin-bottom: 0%; }
    .mybox { width: 100%; padding: 8px; margin: 0% 0% 0% 2%;}
}

@media screen and (max-width: 768px){
    .header { background: transparent url("../images/top-most.png") repeat-x;height: 120px; text-align: center; float: left; padding: 0%; width: 100%; color: #31628D; margin-bottom:1%;}
    .header-logo { margin-left: 0%;}        
    .columns { -ms-column-count: 2; -o-column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;-webkit-column-width: 1em; }
    section { width: 100%; -webkit-box-shadow: 0 0 5px rgba(0,0,0, .3); -moz-box-shadow: 0 0 5px rgba(0,0,0, .3); box-shadow: 0 0 5px #ff6a00; border-radius: 10px; margin-left: 1%; }
    .g2 {margin-left: 1.5%}
    .g3 {margin-left: 0%}
    h3{margin-bottom: 0%; }
    .mybox { width: 100%; padding: 8px; margin: 1.5% 0% 0% 0%;}
}

@media screen and (max-width: 360px){
    .header { background: transparent url("../images/top-most.png") repeat-x; height: 70px; text-align: center; float: left; padding: 0%; width: 100%; color: #31628D; margin-bottom:1%;}
    .header-logo { margin-left: auto;}

    .g2 {margin: 3% 0% 3% 1% }
    .g3 {margin: 0% 0% 0% 0% }    

    h3{text-align: center; margin-bottom: 0%; }
    h5{text-align: center; margin-bottom: 0%;}
    .mybox { width: 100%; padding: 8px; margin: 4% 0% 0% 0%;}

}

@media screen and (max-width: 320px){
    .header { background: transparent url("../images/top-most.png") repeat-x; height: 65px; text-align: center; float: left; padding: 0%; width: 100%; color: #31628D; margin-bottom:1%;}
    .header-logo { margin-left: auto;}
    .columns { -ms-column-count: 1; -o-column-count: 1; -moz-column-count: 1; -webkit-column-count: 1;-webkit-column-width: 1em; }
    section { width: 100%; -webkit-box-shadow: 0 0 5px rgba(0,0,0, .3); -moz-box-shadow: 0 0 5px rgba(0,0,0, .3); box-shadow: 0 0 5px #ff6a00; border-radius: 10px; padding: 2%; margin: 4% 0% 0% 0%;}
    .g2 {margin: 3% 0% 3% 1%  }
    .g3 {margin-left: 0%}
    h3{text-align: center; margin-bottom: 0%; }
    h5{text-align: center; margin-bottom: 0%;}
    .mybox { width: 100%; padding: 8px; margin: 4% 0% 0% 0%;}
}