* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block; 
}
[class*="col-"] {
    float: left;
    padding: 15px; 
    background-image: url("http://www.imogap.org/graphics/bg_sand.png"); 
    background-color: #FFEEBC;
}
  body{    
     background-image: url("http://www.imogap.org/graphics/bg_sand.png"); 
    background-color: #FFEEBC;
  }
   
.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%;}
  
html {
    font-family: "Lucida Sans", sans-serif;
}
  
.header {
     background-image: url("http://www.imogap.org/graphics/bg_sand.png"); 
    background-color: #FFEEBC;
    color: #ffffff;
    padding: 15px;
    text-align:center;
    
}
 
h1,h3{
  font-family: "papyrus", cursive;
    font-weight:300;
  }
   h3{
    font-size:160%;
    margin-top:5px;    
  }
   h1{
    font-size:200%;
    padding: -20px;
    margin: 0px;
  }
  
.menu ul { 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#31b2d6;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    font-size:100%;
}

   .menu li a{
    color:black;
    text-decoration:none;
  }

  .menu li a:hover{
    text-decoration:underline;
  } 

.menu li:nth-child(4n-7) {  
    background:#2AA0C2;
} 

  .menu li:nth-child(3n-4) {  
    background:#c91a1a;
}

   .menu li:nth-child(3n-3) {  
    background:#dda949;
}  

  /** Mailing List box **/
  .menu li:nth-child(16){
    background:#CB2424;    
  }
  
  input[type="text"]{
    padding:5px;
    margin-top:3px;
    width:100%;    
  }
input[type="submit"]{
    width: 100%;
    background-color: white;
    border:1px solid gray;
    color: black;
    padding: 14px 20px;
    margin: 8px 0;
    cursor: pointer;
  }
  
  .socialicons{ 
      width: 100%;
      margin-top:5%;
      padding-top: 0 auto;
       margin-bottom:5%;   
  } 

 .socialicons ul { 
    list-style-type: none; 
    padding: 0;
    overflow: hidden;
    margin: auto;    
  text-align: center;
}

.socialicons li {
    display:inline;
    margin-left:18px;
    padding-bottom:12px;
}

  .socialicons li a  {
    float: left;
    display: block;
    padding: 8px;  
}
  
  .footer { 
    background:#CB2424;
    border-top: 3px solid #e8d49d;
    font-size:100%;
    color:#FFEEBC;
    height:200px;
    float:left;
    padding: 10px 0 0 24px;
  }

  .footer a{
    color:#FFEEBC;
  }  
  
  .footerlogo{ 
    font-size:100%;
    color:Black;
    border-top: 3px solid #e8d49d;
    padding: 10px 0 0 30px;
    float:left;
    margin:0 auto;
    background:WHITE;
    height:200px;
  }
  
hr {
  border: 0;
  border-top: 3px solid #e8d49d;
  width: 60%; 
  margin-top: 50px; 
  padding-bottom: 30px;}
  
  .newsbox{
    display:inline-block;
    float:right;  
    border:3px solid #E8D49D;
    padding:12px; 
    width:30%;
    overflow:auto;
    background:white;
  } 

  .newsbox p{
    font-size:13px;
  }

  .newsbox h3{
    font-size:18px;
  }
  .newsbox img{
    width:100%;
  }

  .reminder{
    background:white;
    text-align:center;
  } 

  .reminder span{
    font-size:16px;
    font-weight:bold;
    color:#CB2424;
  }
  

/** MOBILE STYLE **/

  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }

    .header img{
      width:100%;
    }
    
    p, span{
      line-height:1.8;
      font-size:120%;
    }

    h1,h2,h3{      
      line-height:1.8;
      font-size:180%;
    }
    
     ul{
      font-size:120%;
      line-height:1.8;   
    }
    
    .menu li {
      font-size:160%;
      padding:24px;
    }

    .socialicons li {
      padding:10px;
      float:none; 
    } 

    .socialicons{
      width: 100%;
      text-align: center;
      margin-top:0;
      padding-top: 0 auto;
       margin-bottom:10%;  
    }

    .socialicons img{
      width: 80%;
      height:auto;
    }
    
    .newsbox img{
    width: 80%;
    height: auto;
    }
    
    .newsbox{
      width:100%;
      float:right;
      display:block;
      margin-bottom:10%;
    } 

    .newsbox p{
      font-size:120%;}
       
    .footer{  
      padding-left:10%; 
      height:35%;
      padding-bottom:10%;
      padding-top:8%;
    }

    .footerlogo{
      background:white;
      color:black;
      padding-top:5%;
      padding-bottom:5%;
      padding-left:10%; 
      height:45%;
      border:none;
      
    }
    
}

input[type="text"] {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
   padding: 10px;
  border: solid 2px #c9c9c9;
  transition: border 0.3s;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}
input[type="text"]:focus {
  outline: none;
  border: solid 2px #969696;
}

input[type=submit] {
  color: #000000;
  font-size: 16px;
  background: #f5f5f5;
  padding: 5px 10px 5px 10px;
  border: solid #dbdbdb 1px;
  text-decoration: none;
display:inline-block;
margin-top:5px;
margin-bottom:5px;
font-family:inherit;}

input[type=submit]:hover{background: #e6e6e6;
  text-decoration: none;
}

/** GIFT SHOP STYLES **/

.shopbox{  
  padding:10px;
  display:inline-block;
  
}
.shopbox p{
  font-size:11px;
}
.shopbox h1{
  line-height:10px;
 font-size:1.6em; 
  text-decoration:underline;
} 
.shopbox img{
  width:100%;  
}
.itembox{ 
  float:left;
  border:3px solid gray; 
  display:inline-block;
  padding:20px 30px 30px 20px;  
  width:250px;
  margin-bottom:10px;
  margin-right:10px;
}

.itembox{ 
  float:left;
  border:3px solid gray; 
  display:inline-block;
  padding:20px 30px 30px 20px;  
  width:250px;
  margin-bottom:10px;
  margin-right:10px;
}