/* Reset Stuff*/
		 html, body, div, span, applet, object, iframe,
		 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		 a, address, big, cite, code,
		 del, dfn, img, ins, kbd, q, s, samp,
		 small, strike, sub, tt, var,
		 b, u, i, center,
		 dl, dt, dd, ol, ul, li,
		 fieldset, form, label, legend,
		 table, caption, tbody, tfoot, thead, tr, th, td,
		 article, aside, canvas, details, embed,
		 figure, figcaption, footer, header, hgroup,
		 menu, nav, output, ruby, section, summary,
		 time, mark, audio, video {
		 	margin: 0;
		 	padding: 0;
		 	border: 0;
		 	font-size: 100%;
		 	font: inherit;
		 	vertical-align: bottom;
			line-height: 1.2;
		 }
		 /* HTML5 display-role reset for older browsers */
		 article, aside, details, figcaption, figure,
		 footer, header, hgroup, main, menu, nav, section {
		 	display: block;
		 }
		 ol, ul {
		 	list-style: none;
		 }
.clearfix { overflow: auto; }
body { background-color: #8af;}
body, .test    {
    background-image: url(../images/DefenceBG2.jpg);
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.mainframe  {
    font-family: 'Trebuchet MS', sans-serif;
    width: 90%;
    max-width: 56em ;
    margin: 3em auto ;
    border-radius: 90px 30px 100px 20px;
}
header {
    position: relative;
    max-height: 100px ;
    min-height: 40px;
    background: #fff ;
    border-top: 30px solid #880;
    border-radius: 90px 30px 0 0;
    overflow: hidden;
}
.logo   {
    position: relative ;
    top: 20%;
    margin: 0 auto ;
    width: 90%;
    max-width: 700px ;
    padding: 2%;
}

.logo img   {
    width: 100% ;
    color: #0071bc;
    font-size: 3em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
.logo span {
    display: block;
    height: 0;
    overflow: hidden;
}
main {
       background: #fff;
       background: rgba(255,255,255,0.7);
       padding: 1em 0 2em 0;
       margin: 0;
}
h1, h2, h3, h4  {
    font-family: verdana;
    font-style: italic;
    margin: 0.5em 1em 0;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
h1     {
       font-size: 2em;
       color: #880;
}
header h1     {
       font-size: 1em;
}
h2  {
    font-size: 1.6em;
    color: #00d;
}
h3  {
    font-size: 1.3em;
    color: #d00;
}
a, a:hover, a:focus   {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
address a:hover, address a:focus {
    text-decoration: none;
    color: #a0f;
}
footer span,
footer a {
   display: inline-block;
}
.menu   {
    background: #543;
    padding: 1.5em 0 0 0;
    overflow: hidden;
}
#menwrap    {
    padding: 2px;
}
.ham, .clomen, .contact, .menu ul li a img  {
    display: none;
}
.menu ul    {
    display: table;
    width: 100%;
    text-align: center;
}
.menu ul li {
    display: table-cell;
    padding: 2px;
}

.menu ul li a   {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    vertical-align: middle;
    padding: 0.2em 0 0.2em 0;
    color: #880;
    background: #fff;
    background: linear-gradient(to top right, #8af, #fff 40%);
}
.menu ul li a:hover,
.menu ul li a:focus {
    background: #d00;
    background: linear-gradient(to top right, #700, #880 40%);
    color: #fff;
    border-color: #0071bc #fff #fff #0071bc ;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.menu ul li a:active   {
    background: #0071bc;
    color: #fff;
    border-color: #fff #d00 #d00 #fff ;
}
p   {
    margin: 0.2em 2em 1em;
    text-align: justify ;
}
q {
    quotes: "\2018" "\2019" "\201c" "\201d";
}
article ul {
       list-style: disc;
       margin: 1em  0 0 3em;
}
article ul li {
       margin-bottom: 0.8em;
}
figure  {
    float: right;
    text-align: center;
    max-width: 60%;
}
figure img  {
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.ellipse {
       padding:  2em;
       -webkit-shape-outside: ellipse() ;
       shape-outside: ellipse() ;
}
.fullf {
       margin: 0.5em;
}
.intile img,
.fullf img    {

       border: solid 3px #d00;
       border-radius: 20px;
       box-sizing: border-box;
}
.table {
       display: table;
       width: 100%;
       table-layout: fixed;
       border-collapse: collapse;
}
.cell  {
       display: table-cell;
       vertical-align: top;
}
.cell p       {
       text-align: left;
}
.cell figure,
.tile figure {
       float: none;
       margin: 0 auto;
       max-width: 90%;
}
.tile img,
.cell .fullf img     {
       margin: 0;
}
.tile {
       display: flex;
       flex-flow: wrap ;
       justify-content: space-around;
       margin: 10px 0 ;
}
.tile section {
       display: inline-block;
       min-width: 250px;
       max-width: 95%;
       margin: 10px ;
       flex: 1 1 30%;
}
.tile section.quart {
       flex: 1 1 22%;
       min-width: 10em ;
}
.tile a {
       display: block;
       background: #0071bc;
       border-radius: 20px;
       padding: 10px;
       box-sizing: border-box;
       text-decoration: none;
       color: #000;
       box-shadow: 0 0 0 rgba(0,0,0,1);
}
.tile a:hover, .tile a:focus {
       background: #d00;
       transform: scale(1.02);
       box-shadow: 20px 20px 8px rgba(0,0,0,0.3);
}
.tile section h4,
.tile section h3 {
       color: #fff;
       margin: 0;
       padding: 0.3em;
       text-align: center;
}
.tile img {
       border-radius: 16px;
}
.totop {
       text-align: center;
       background: #fff;
       background: rgba(255,255,255,0.7);
       padding-bottom: 0.8em;
}
.totop a      {
       text-decoration: none;
       font-weight: bold;
       color: #fff;
       background: #0071bc ;
       padding: 0.2em 0.5em 0.2em 0.5em ;
       border-radius: 1em 0 1em 0 ;
}
.totop a:hover, .totop a:focus       {
       background: #d00;
}
footer  {
       background: #fff;
    /*background: rgba(255,255,255,0.9);*/
    margin: 0;
    padding: 0.5em;
    border-bottom: 30px solid #543 ;
    border-radius: 0 0 100px 20px ;
    box-shadow: inset 0px -10px 0px 0px #880 ;
}
address, .co {
    color: #0071bc ;
    margin: 0 3em 0.5em 1em;
    text-align: center ;
}
.co     {
    font-size: 0.6em;
}
.down   {
    display: block;
    margin: 0.5em;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
}
.down svg   {
    height: 20px;
    width: 20px;
    fill: #0071bc;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.down:hover, .down:focus, .down:hover svg {
    text-decoration: underline;
    color: #a0f;
    fill: #a0f;
}
aside   {
    float: right ;
    margin: 0.5em;
    max-width: 300px ;
    background: #8af;
    background-image: url(../images/boat1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0;
    border: 4px solid #0071bc ;
    border-radius: 50px 0px 50px 0px ;
    border-color: #fd0 #d00 #d00 #fd0 ;
}
.test   {
    display: block;
    list-style: none;
    width: 90%;
    margin: 1em auto;
    border: 4px solid #0071bc ;
    border-radius: 50px 0px 50px 0px ;
    border-color: #880 #543 #543 #880 ;
    overflow: hidden;
    background-color: #333;
}
.test blockquote, .test cite    {
    background: rgba(0,0,0,0.2);
}
blockquote    {
    color: #fff;
    padding: 0.2em;
    font-weight: bolder ;
    font-style: italic;
    font-size: 1.4em;
    text-shadow: 1px 1px 1px #000 ;
    line-height: 1.2em;
    text-align: left;
}
blockquote p    {
    margin: 0.5em;
}
blockquote p:before    {
    content: open-quote;
}
blockquote p:after    {
    content: close-quote;
}
cite    {
    display: block;
    padding: 0.5em 1em;
    font-weight: bold;
    color: #adf;
    text-shadow: 1px 1px 1px #000 ;
}
@media screen and (max-width: 600px) {    /*40.63em*/
    .mainframe  {
        margin-top: 1em;
        margin-bottom: 1em;
        width: 95% ;
        border-radius: 50px 10px 50px 20px;
    }
    header {
        border-top: 20px  solid #d00;
        border-radius: 50px 10px 0 0;
    }
    .logo img   { font-size: 2em; }
    .menu{
       padding: 4px;

       top: 0;
       box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .sticky {
       position: -webkit-sticky;
       position: sticky;
    }
    h1        {
       margin-left: 0.5em;
    }
    footer  {
        border-radius: 0 0 50px 20px ;
    }
    #menwrap    {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
    }
    .table,
    .cell,
    #menwrap:target,
    .show #menwrap,
    .contact { display: block; }

       .contact { float: right;}

    .contact a  {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;

    }
    .contact a svg  {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .contact a:hover,
    .contact a:focus {
        -ms-transform: scale(1.2) ;
       -webkit-transform: scale(1.2) ;
       transform: scale(1.2) ;
       background: #000;
    }
    .contact a:active   {
        background: #d00;
    }
    .sicon  {
        fill: #fff;
    }
    .bicon  {
        fill: #0071bc;
    }
    a:hover .bicon,
    a:focus .bicon   {
        fill: #d00;
    }
    a:hover .sicon,
    a:focus .sicon   {
        fill: #d00;
    }
    a:active .bicon  {
       fill: #fff;
    }
    a:active .sicon    {
        fill: #fd0;
    }
    .ham, .clomen   {
        display: block;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 5px;
    }
    .clomen {
        position: fixed;
        bottom: 0;
        right: 0;
    }
    .ham   {
        position: relative;
        top: 0;
        left: 0;
    }
        .icon  {
        position: absolute;
        width: 70%;
        top: 0;
        left: 15%;
    }
    .ham:active, .clomen:active   {
        background: #d00;
    }
    .menu ul    {
        display: block;
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 50px;
    }
    .menu ul li{
        display: inline-block;
        width: 41%;
        height: 41%;
        margin: 2%;
        background: none;
        padding: 0;
        overflow: hidden;
    }
    .menu ul li a   {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.9);
        background: linear-gradient(to top right, #acf, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.2));
        border: solid 4px;
        border-color: #0071bc #d00 #d00 #0071bc ;
        border-radius: 20% 0;
        font-size: 1.3em;
        font-size: 5vw;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    }
    .menu ul li a:hover, .menu ul li a:focus {
        background: linear-gradient(to top right, #700, rgba(220,0,0,0.9) 50%, rgba(255,0,0,0.2));
    }
    .menu ul li a img   {
        display: block;
        margin: auto;
        padding: 0.2em;
        width: 70%;
        width: 20vmin;
    }
    .menu ul li a span   {
        position: absolute;
        width: 100%;
        bottom: 0.4em;
        left: 0;
    }
    p   {
        margin: 1em;
    }
    aside, figure, .tile figure   {
        float: none;
        margin: 0 auto;
        max-width: 95%;
    }
    .ellipse {
       padding:  0;
       }
    .fullf img    {
       margin: 0;
    }
    blockquote  {
        font-size: 1.2em;
    }
    .tile section {
       min-width: 200px;
    }
    .fltswp {
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              -ms-flex-direction: column;
              -webkit-flex-direction: column;
              flex-direction: column;
    }
    .fltswp figure {
              -webkit-box-ordinal-group: 2;
              -moz-box-ordinal-group: 2;
              -ms-flex-order: 2;
              -webkit-order: 2;
              order: 2;
    }
}
@media screen and (min-width: 52em) {     /*832*/
    .menu ul    { table-layout: fixed; }
    .totop    { display: none ; }
}