/* My Awesome Customized Styles */
body{
    
    background: #ECECE7;
}

.nav{
    font-family:'Century Gothic', Candara, sans-serif;
}

h3{
   font-size: 1.4em; 
}


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

.header {  float: left; padding: 0%; width: 100%; color: #31628D; margin-bottom:1%;
          /* IE10 Consumer Preview */ 
        background-image: -ms-linear-gradient(left, #FFFFFF 0%, #366774 100%);

        /* Mozilla Firefox */ 
        background-image: -moz-linear-gradient(left, #FFFFFF 0%, #366774 100%);

        /* Opera */ 
        background-image: -o-linear-gradient(left, #FFFFFF 0%, #366774 100%);

        /* Webkit (Safari/Chrome 10) */ 
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #366774));

        /* Webkit (Chrome 11+) */ 
        background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #366774 100%);

        /* W3C Markup, IE10 Release Preview */ 
        background-image: linear-gradient(to right, #FFFFFF 0%, #366774 100%);
          
}
.header-logo { margin-left: 0;}

.my-footer { background: transparent url("../img/bottom-most.png") repeat-x; height: 80px; float:left; padding-top: 15px; margin-top: 0;text-align: center; width: 100%; color: #CCC; font-family: Verdana; font-size: 0.8em;}
.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){     
    .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-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-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%;}
}