/*
font-family: Arial, Helvetica, sans-serif;
font-family: "Roboto Light", sans-serif; 
     font-family: Roboto, sans-serif; 
font-family: Montserrat, sans-serif;
font-family: Cabin, sans-serif;
*/

html * { font-size:94%; }

html {
    font-family: "Montserrat", sans-serif; line-height: 1.2em;
font-family: Arial, Helvetica, sans-serif;
font-family: "Lato", Arial, sans-serif;
}

img { max-width: 100%; height: auto; }

.container { width: 100%; overflow:hidden; background: #fff ; 
            float:left; padding: 40px 0 0 0 ; border: 0px solid #f00; }

.menu1 { background: #d3d7a6; text-align: center; font-weight: bold; font-size: 80%; border-bottom: 1px solid #999; }

.leftbox { color: #333 ; background: #fff ; text-align: left ; padding: 1% 15% 1% 15%  ; 
   margin: 0% 3% 0% 3% ; border: 0px solid #ff0 ; clear: both; display: block;  }

.announce {background: #fff ; border: 2px solid #573 ; padding-right: 4% ; padding-top:2%; 
       padding-left:5%; padding-bottom:5%; line-height: 1.4em; 
       margin: 0 0 0 0%; }

.news {background: #eee ; border: 1px solid #ddd ; padding-right: 4% ; padding-top:2%; 
       padding-left:5%; padding-bottom:5%; line-height: 1.4em; font-size: 90%;
       margin: 0 0 0 0%; }

.gbox {padding:3% 3% 3% 3%; margin: 0.0% 0.0% 0.0% 0.0% ; 
font-size: 90%; background: #f7f7f7; border: 1px solid #eee ; }

.cap {font-size: 80%; font-style: italic; float: right; }

.aqbox { margin: 2% 3% 2% 3% ; padding: 2% 3% 2% 3% ; 
        font-size: 120%; background: #38b3bc; color: #fff; }

.grbox { margin: 2% 3% 2% 3% ; padding: 2% 3% 2% 3% ; 
        font-size: 120%; background: #897; color: #fff; }

.orbox { margin: 2% 3% 2% 3% ; padding: 2% 3% 2% 3% ; 
        font-size: 120%; background: #e35825; color: #fff; }

.floatbox { float:left; padding:0 2% 0 2%; font-size: 90%; line-height: 1.4em;
border: 0px solid #fa6 ; }

.rect { font-size: 120%; background: #05b; color: #fff; line-height: 1.5em;
     box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.15); display: inline-block;
          padding:1% 2% 1% 2%; margin: 1% 4% 2% 0%; border: 1px solid #bbb; }
 
/* Footer */
#footer { position: relative; width:100%; background:#888; 
          color:#fff; font-weight: normal; padding: 0% 0% 0% 0% ;
          overflow:hidden; border: 0px solid #f00; line-height: 1.2em; }

.fcol1 { float: left; width: 46%; text-align: left; padding: 0% 0% 0.5% 1% ;  
         font-size:80%; border: 0px solid #cc7; }

.fcol2 { float: right; text-align: right; width: 46%; padding: 0% 1% 0.5% 0% ; 
         border: 0px solid #c7c;
         font-size:80%;  }

.grey { background: #ddd ; }
.acid { background: #bc6 ; }

.aq { color: #078 ; font-size: 120%; }
.gr { color: #560 ; font-size: 120%; }
.or { color: #e52 ; font-size: 120%; }

/* ------- Responsive Grid  ---------------------------- */

* { box-sizing: border-box; } 

.row::after { content: ""; clear: both; display: table; }

[class*="col-"] { float: left; padding: 10px; }

/* For mobile phones: */
[class*="col-"] { width: 100%; }

    /* For tablets: */
@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

    /* For desktop: */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* ----------------------------------------------*/