/*
    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;
    font-family: "Lato", sans-serif;
*/

html { font-size:90%; line-height: 1.3em;
    font-family: "Lato", sans-serif;
}

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

/* Body */

body { background: #024; }

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

.container a:hover { opacity: 80%; }

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

.bookbox { color: #333 ; background: #eee ; text-align: left ; padding: 0% 6% 0% 20% ; 
   margin: -1% 0% 0 0% ; border: 0px solid #ff0 ; clear: both; display: block;  }

.bookbox a:hover { opacity: 80%; background: #4df;  }

.white { background: #fff ; }
.eee { background: #eee ; }

.flex-container { display: flex; }


.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button {width: 100px;
  height: 100px; border-radius: 50%;}

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}

.button {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.rect { font-size: 100%; background: #48b; color: #fff; line-height: 1.3em;
        box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.15); display: inline-block;
        padding:0.5% 2% 0.5% 2%; margin: 1% 0% 1% 0%; border: 1px solid #666; 
        border-radius: 10px; }

.rect { font-size: 100%; background: #fd9; line-height: 1.3em;
     box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.15); text-align:center;
     padding:3% 3% 2% 3%; margin: 1% 1% 1% 1%; border: 1px solid #bbb; }
.rect a { text-decoration: none; }
.rect a:hover { color: #c26; font-style: italic; font-size: 120%;  }

.latest { margin: 15% 3% 0% 3% ; padding: 4% 6% 3% 6% ; text-align: center;
        font-size: 90%; line-height: 1.2em; background: #fff; 
        border: 7px dotted #fd9; border-radius: 50px; color: #242; }

.latest a:hover { font-style: italic; font-size: 130%; }

.review { line-height: 1.2em; text-indent: 0em;
        margin: 0.1em 0 0.1em 0; color:#079; text-align: center; 
        font-weight: bold; font-style: italic; }

.mastbox {padding:2% 4% 2% 4%; margin: 1% 3% 1% 1% ; text-align: center; font-size: 80%;
          line-height: 1.1em;
         float:right; background: #8de; border: 0px solid #aaa ; }

.twitbox {padding:2% 4% 2% 4%; margin: 1% 3% 1% 1% ; text-align: center; 
         float:right; background: #8be; border: 0px solid #aaa ; }
.twitbox img { display:block; margin-left:auto; margin-right:auto; } /* centres img */

.topbox {padding:1.0% 4% 0% 4%; margin: 1% 2.5% 1% 2.5% ; background: #cde; border: 0px solid #eee ; }
.topbox img { display:block; margin-left:auto; margin-right:auto; } /* centres img */

.wbox {padding:0% 0% 0% 0%; margin: 0% 3% ; background: #fff; border: 0px solid #eee ; }

.cbox { display:block; margin-left:auto; margin-right:auto; } /* centres img */

.gbox {min-height: 40%; padding:2% 2% 2% 2%; margin: 0% 1% 0% 3% ; background: #e0e5e6; border: 0px solid #f00 ; }
.gbox img { display:block; margin-left:auto; margin-right:auto; } /* centres img */


.caption { font-style: italic; font-size: 90%; padding: 0% 0% 0% 0% ; }

.grow img { transition: all .2s ease-in-out; }
.grow img:hover {  transform: scale(1.03); }



/* seabooks old */

.g-recaptcha { margin: 1% 0% 1% 1.5% ; }

.rimg img { float:right; margin: 3% 0% 2% 4% ; }

/* Footer seabooks */

#footer { position: relative; width:100%; background:#024; 
          color: #fff; font-size: 80% ; line-height: 1.2em ; text-align:right; 
          margin: 0.0em 0 0em 0; border-top: 0px solid #bbb ;
          padding: 1% 2% 1% 2% ; overflow:hidden; }

#footer a { color:#fff; border-bottom: 0px solid #aaa; border-color: #abc; }


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

* { box-sizing: border-box; } 

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

[class*="col-"] { float: left; padding: 10px; border: 0px solid #f00 ; }

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

    /* For tablets: */
@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-15 {width: 12.5%; border: 0px solid #f00 ;}
    .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%; border: 0px solid #f00 ;}
    .col-13 {width: 11.1%; border: 0px solid #f00 ;}
    .col-15 {width: 12.5%; border: 0px solid #f00 ;}
    .col-2 {width: 16.66%; border: 0px solid #f00 ; }
    .col-24 {width: 20.00%; border: 0px solid #f00 ; }
    .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%;}
}

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

.corner {
  -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
          border-radius: 9px;
     border-collapse:separate; /* to stop border-collapse:collapse being inherited */
  }

.gradient {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-ed
itor/#f7f7f7+0,e7e7e7+100 */
  background: #f7f7f7; /* Old browsers */
  background: -moz-linear-gradient(top, #f7f7f7 0%, #e7e7e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), c
olor-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%); /* Chrome10+,Safar
i5.1+ */
  background: -o-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f7f7f7 0%,#e7e7e7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColor str='#e7e7e7',GradientType=0 ); /* IE6-9 */
}