/*
  using http://www.sessions.edu/color-calculator
  colors: white:fcfcff blue:000060  light-blue:3a5e87 000060
  former: brown:6e4719 light-brown:805e39
*/
*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
html,body {
  min-height: 101%; /* prevent from hiding y-scrollbar*/
}
body{
  background-color:#fcfcff; /* white body bg color */
  font-size: 14px;
  font-family:'Open Sans',sans-serif; /* Tinos */
  color:#000060;            /* body text color */
  line-height:1.7;
}
nav,footer{
  background-color:#000060; /* top & bottom bg color*/
  color:#fcfcff;
  width:100%;
  float:left;
}
article{
  width:100%;
  float: left;
  margin-top: 0.75rem;
}
footer{
  margin-top:30px;
  text-align:center;
  padding:12px 0;
  font-size:12px 
}
a{
  text-decoration:none; 
}
a:hover{
  text-decoration:underline; 
}
p,li{ 
  text-align:justify;
}
ol,ul {
  padding-left:2rem;
}
p {
  text-indent:2rem;
}
.iomt-title{
  width:100%;
  float:left;
  text-align:center;
  font:small-caps 900 14px georgia,serif;
}
.title-main, .title-mobi{
  border-radius:5px;
  width:100%;
  margin-top:2%;
}
.title-mobi{
  display:none;
}

.powered-by{
  margin-top:10px;
  text-align:center; 
  font-size:10px;
  color:grey;
  padding:12px 0; 
}

#menu-main{
  padding:0;
  display:block;
  margin:12px auto 3px auto;
  width:100%;
  position: relative;
  text-align:center;
}
#menu-main li{
  list-style: none;
  display:inline;
  position: relative;
  margin:0 9px;
}
#menu-main li a{
  font-size: 13px;
  color:#fcfcff;
}
#menu-mobi{
  width:70%;
  margin:3px auto 0 auto;
  display:none;
  font-size: 1rem;
  color:#000060;
  background-color:#fcfcff;
  border: 1px solid #000060;
}
#menu-mobi option {
  padding: 5px;
  border-bottom:1px solid #000060;
  text-align: center;
}
.title-project{
  text-align:center;
  font-size:24px;
  font-weight:600;
  background-color:#000060;
  color:#fcfcff;
}
.subtitle-project{
  text-align:center;
  font-weight:600;
  font-size:16px;
  margin-bottom:18px;
}
.title-page{
  font-weight:600;
  font-size:16px;
  padding:0 0 3px 2rem;
}
.cols21{
  padding:0 2rem;
  width:50%;
  float:left;
}
.cols22{
  padding:0 2rem;
  width:50%;
  float:left;
}
.cols30{      /* wafers for 1-col layout */
  width:20%;
  float:left;
  padding-bottom:1px;
}
.cols32{      /* 1-col layout */
  width:60%;
  float:left;
}
.ctable{
  table-layout:fixed;
  width:100%;
  border-collapse:collapse;
}
.ctable td, .ctable th{
  padding:6px;
  border:1px solid #3a5e87; /*  light-blue table */
}
.ctable th{
  background-color:#3a5e87; /*  light-blue table */
  color:#fcfcff;
}

/* Back to Top */
#toTop {
    background: url("../imgs/ui.totop.png") no-repeat scroll left top transparent;
    border: medium none;
    bottom: 6px;
    display: none;
    height: 40px;
    overflow: hidden;
    position: fixed;
    right: 10px;
    text-decoration: none;
    text-indent: -999px;
    width: 40px;
}
#toTopHover {
    background: url("../imgs/ui.totop.png") no-repeat scroll left -40px transparent;
    display: block;
    float: left;
    height: 40px;
    opacity: 0;
    overflow: hidden;
    width: 40px;
}
#toTop:active, #toTop:focus {
    outline: medium none;
}
#map_canvas { 
  border:1px solid grey;
  height: 230px; 
  width: 100%;
}
.padding60{
  padding:60px 0;
}
.gallery-col {
  margin: 0 auto;
  width: 1212px;
}
.gallery-row {
  float:left;
  padding:3px;
  border:1px solid #ccc;
  border-radius:5px;
  margin-left:3px;
  margin-bottom:3px;
  width:100%;
  max-width:400px;
}
.gallery-row img {
  width:100%;
  border-radius:3px;
}
.gallery-row div {
  min-height:4.0em;
  width:100%;
  font-size:0.82rem;
  text-align:center;
  line-height: 1.3;
}

@media screen and (max-width: 1270px){
  .gallery-col {
    width: 809px;
  }
}
@media (max-width: 860px) {
  .title-main, #menu-main{
    display:none;
  }
  .title-mobi, #menu-mobi{
    display:block;
  }
  #menu-mobi{
    width:90%;
  }
  .cols21, .cols22{
    width: 100%;
  }
  .cols30 {
    width:12%;
  }
  .cols32 {
    width:76%;
  }
  .gallery-col {
    width: 406px;
  }
  
  .padding60{
    padding:20px 0;
  }
}
@media (max-width: 600px) {
  .cols30 {
    width:5%;
  }
  .cols32 {
    width:90%;
  }
}
@media (max-width: 460px) {
  .cols30 {
    width:0%;
  }
  .cols32 {
    width:100%;
    padding: 0 5px;
  }
  .gallery-col {
    margin-left:2%;
    width: 96%;
    float: left;
  }
  .gallery-row{
    margin-left:0;
  }
  #menu-mobi{
    width:100%;
  }
  p,li{ 
    text-align:left;
  }
  p{ 
    text-indent:0;
  }
}