body {
	font-family: arial;
	margin: 0px;
	padding: 0px;
}



#mainbodyright img {
max-width: 240px;
}



.defaultgallery figure {display:none;}

.topbar-cont { background-color:#dddddd;

/*background-image:url(armour/gfx/topbar-bg.jpg);
background-repeat:no-repeat;
background-position:center top;*/
width:100%;
border-bottom: 1px solid #cccccc; }

#mainmenu { width:625px;float:left;  /* display:inline-block; */ }

.search-box{position:relative;width:190px;   float:left; /* display:inline-block;*/ margin:12px 5px 10px 10px; height:29px; background-color:#d1ebfe;}
  .searchinput {
    width: 158px;
    height: 25px; border:0px; float:left;
    padding:2px 3px 2px 3px; font-size:13px; 
	 background-color: #d1ebfe; margin:0px
}

.searchsubmit {
    margin: 0px 0px 0px 0px;
    height: 25px;
    width: 25px; float:left;
    background-color: #d1ebfe;
	/*background-image:url(armour/gfx/search-icon.png); background-repeat:no-repeat;
	background-position:top;*/
    color: white;
    border: 0;
	font-size:1px; 
	 z-index:5;
}
input#stayConnected {
	background-image:url(armour/gfx/search-icon.png); background-repeat:no-repeat;
	background-position:top;
	display: block; margin:0px;
	height: 25px; background-color: #d1ebfe;
	text-indent: -9999px; float:left;
	width: 25px; border:0px;
}


h2 {color: #016ee6; font-size:19px; font-weight:bold; }

a:link { 
    text-decoration: none;
    color: #016ee6;
	
}
a:visited { 
    text-decoration: none;
    color: #016ee6;
}
a:active { 
    text-decoration: none;
    color: #016ee6;
}
a:hover { 
    text-decoration: none;
    color: #333333;
}



	 
/* top menu */

.main-menu-cont {
  opacity: 0.9;
  width: 100%;
  text-align: center;
  background-color: #333333;
  position: fixed;
  z-index: 500;
  top: 0px;
}

#main-menu {
width:100%;
display:block;
}
#main-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333; color: #FFFFFF; max-width:1050px ;display:inline-block;
}

#main-menu ul li {float: left; margin:0px;}

#main-menu ul li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 25px 15px 25px 15px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  font-family: arial;
  text-transform: uppercase;
}

#main-menu ul li a:hover {background-color: #555555; color:#ffffff;}

#main-menu ul li.icon {display: none;}

/* SUB MENU LINK CONTAINER */
#main-menu ul li ul { position: absolute; background-color: #555555; color:#ffffff; width: 160px; height: auto; text-align: left; left: -999em; z-index:150;  margin:0px 0px 0px 0px; display:block; /*border-top:1px solid #cccccc;*/  }
#main-menu ul li ul li { line-height: normal; height: auto; padding:0px; width:160px; margin:0px 0px 0px 0px; text-align:left;   color: #FFFFFF; }

#main-menu ul li ul li a:hover {background-color: #333333; color:#ffffff;}

#main-menu ul li ul a:link, #main-menu ul li ul a:visited {
    width: 160px;
    float: none;
    width/**/: /**/ 130px;
    height: auto;
    padding: 10px 15px 10px 15px;
    color: #FFFFFF;
    line-height: normal;
    font-weight: normal;
    text-decoration: none;
   /* font-size: 12px;*/
    font-family: arial;text-align:left;
}





/* SUB MENU Links  */




#main-menu ul li:hover ul ul, #main-menu ul li:hover ul ul ul, #main-menu ul li.sfhover ul ul, #main-menu ul li.sfhover ul ul ul { left: -999em; }
#main-menu ul li:hover ul, #main-menu ul li li:hover ul, #main-menu ul li li li:hover ul, #main-menu ul li.sfhover ul, #main-menu ul li li.sfhover ul, #main-menu ul li li li.sfhover ul { left: auto; }

#main-menu ul li li:hover, #main-menu ul li li.sfhover { background-color: #333333; }
#main-menu ul li li:hover a:link, #main-menu ul li li:hover a:visited, #main-menu ul li li:hover a:hover, #main-menu ul li li:hover a:active, #main-menu ul li li.sfhover a:link, #main-menu ul li li.sfhover a:visited, #main-menu ul li li.sfhover a:hover, #main-menu ul li li.sfhover a:active { color: #FFFFFF; color:#FFFFFF; }




@media screen and (max-width:680px) {
  #main-menu ul li:not(:first-child) {display: none;}
  #main-menu ul li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  #main-menu ul.responsive {position: relative; width:100%;}
  #main-menu ul.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav {width:100%;}
  #main-menu ul.responsive li {
    float: none;
    display: inline;
  }
  #main-menu ul.responsive li a {
    display: block;
    text-align: left;
  }
  
#main-menu ul li ul {
  width:100%;
    background-color: #222222;
    color: #ffffff;
   position: static;
    text-align: left;
   
}
#main-menu ul li ul li {
    float: none;
    display: block;
	color: #ffffff;line-height: normal;
   
    width:100%;
    margin: 0px;
    text-align: left;
  }
#main-menu ul li ul a:link, #main-menu ul li ul a:visited {
   padding: 15px 15px 15px 15px;
    float: none;
    display: block;
    text-align: left;
    color: #FFFFFF;
    line-height: normal;
   width:100%;
}
#main-menu ul li li:hover, #main-menu ul li li.sfhover { background-color: #555555; }
#main-menu ul li ul li a:hover {background-color: #555555; color:#ffffff;}
}



/* ENCYCLOPEDIA */

.encyclopedia-thumbnails {
	display:inline-block; 
	width:18%; 
	height:35vh; 
	overflow:hidden; margin:8px; 
	background-position: center center;
	background-repeat:no-repeat; background-size:cover; 
	 border:0px solid #ffffff
	
}
.imagegal-thumbnails {
  width: 30%;
  height: 30vh;
 display:inline-block;
 margin:10px;
	
}

.logo {
	width:40%; float:left; margin:15px; text-align:left
}
.header-rightbox{
	width:50%; display:inline-block; text-align:right; margin:15px; font-size:13px; color: #868585;  
}
#gallery-thumbs {
	width: 30%;
    height: 30vh;
	 display:inline-block;
	 margin:10px;
}
#imagegal-breadcrumb {text-align:left;}
.image-copyrite{font-size:12px;}
.encyclopedia-imgcont {
	text-align: left; width:58%; float:left;padding:15px;margin : 0px 15px 0px 0px;
}
.encyclopedia-imginfo {
	text-align: left; width:35%; float:right; padding:15px;margin : 0px 15px 0px 0px;
}
#mainpage-blocks {
	width:30%; display:inline-block; margin:15px; text-align:left; vertical-align:top
}

#imagegallery-imgcont {
	text-align: left; width:62%; float:left; padding:15px;margin : 0px 15px 0px 0px;
	
 
}
#imagegallery-imgcont img{
	 height: 100%;
}
#imagegallery-imginfo {
	text-align: left; width:28%; float: right; padding:15px;margin : 0px 15px 0px 0px;   font-size: medium;
	color: #000000;
}



.footer-cont { text-align:center; position:relative; width:100%; background-color:#222222; color:#ffffff; padding: 5% 0px 0px 0px; }
#footer {width:90%; margin:15px 0px 15px 0px; text-align:left; font-size:small; color:#ffffff; display:inline-block;}
#footer-blocks { width:25%; float:left;}

#footer-blocks h3 { margin: 0px 0px 15px 0px; text-transform: uppercase; }
#footer-blocks a { padding: 0px 0px 0px 0px; color:#ffffff; line-height: 19px; text-decoration:none; }

.boxfifty { width:50%; float:left;}
.boxseventy { width:70%; float:left;}
.boxthirty { width:33%; float:left;}
.boxsixty { width:60%; float:left;}
.boxforty { width:40%; float:left;}
.boxthree { width:33%; float:left;}
.boxfour { width:25%; float:left;}
.boxfive { width:20%; float:left;}
.paddingbox { padding:15px;}
.paddingbox-med { padding:10px;}
.paddingbox-sl { padding:5px;}

.bannerboxes {margin:10%;padding: 30px 40px ; text-align:left; background-color:#ffffff; color:#666666}

.secpagetitle {
    font-size: 5em;
    line-height: 1.2em;
    background-color: #eeeeee;
    padding: 10px;
}
.encyclopedia-thumbnails-name {text-align:center;}

.defaultgallery {
  width: 100%;
  height: auto;
  float: left;
}
.defaultgallery a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  display: block;
  float: left;
  margin:15px;
 /* margin: 0 12px 12px 0;
  width: 171px;*/
  line-height: 0;
}



a.defaultgallery__img--main {
 /* width: auto;
  height: auto;
  */
  width: 100%;
  height: 100%;
}



@media(max-width:767px){
	.encyclopedia-thumbnails {
	display:inline-block; 
	width:100px; height:100px; 
	overflow:hidden; margin:5px; 
	background-position: center center;
	background-repeat:no-repeat; background-size:cover; 
	 border:5px solid #ffffff
	
}
#mainpage-blocks {
	width:100%; display:inline-block;  text-align:left; vertical-align:top
}
.defaultgallery {
  max-width: 500px;
}
.logo {
	 margin:15px; text-align:center;width:100%; 
}
.header-rightbox{
	 text-align:center; margin:15px; font-size:13px; color: #868585; width:100%; 
}

#gallery-thumbs {
	width:100%;height:200px;
	 display:inline-block; margin:10px;
}

.encyclopedia-imgcont {
	text-align: left; width:98%;padding:15px;margin : 0px 15px 0px 0px;
}
.encyclopedia-imginfo {
	text-align: left; width:98%;  padding:15px;margin : 0px 15px 0px 0px;
}
 #slider {
        position:relative;
        max-width:100%;
        max-height:100%;
        height:200px;
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
	
	
	.boxfifty { width:49%; float:left;}
.boxseventy { width:69%; float:left;}
.boxthirty { width:33%; float:left;}
.boxsixty { width:59%; float:left;}
.boxforty { width:39%; float:left;}
.boxthree { width:33%; float:left;}
.boxfour { width:24%; float:left;}
.boxfive { width:19%; float:left;}
.paddingbox { padding:15px;}
.paddingbox-med { padding:10px;}
.paddingbox-sl { padding:5px;}
	
     }
	 
	 
	 @media(max-width:520px){
		 
		 .boxfifty { width:100%; float:none;}
.boxseventy {  width:100%; float:none;}
.boxthirty {  width:100%; float:none;}
.boxsixty {  width:100%; float:none;}
.boxforty {  width:100%; float:none;}
.boxthree {  width:100%; float:none;}
.boxfour {  width:100%; float:none;}
.boxfive {  width:100%; float:none;}
.paddingbox { padding:15px;}
.paddingbox-med { padding:10px;}
.paddingbox-sl { padding:5px;}
		 
	.encyclopedia-thumbnails {
	display:inline-block; 
	width:100%; height:300px; 
	overflow:hidden; margin:5px; 
	background-position: center center;
	background-repeat:no-repeat; background-size:cover; 
	 border:5px solid #ffffff
	
}
#gallery-thumbs {
	 width:98%;
	 margin-bottom:10px;overflow:hidden;
   margin: 0px 0px 10px 0px;
}

     }
	 
	 
	 
@media screen and (max-width: 48em) {
#left .thumbs {
width:33%!important;}

#footer-blocks {
  width: 50%;
  float: left;
}

#imagegal-breadcrumb {text-align:center;}

.secpagetitle {
    font-size: 3em;
    line-height: 1.2em;
    background-color: #eeeeee;
    padding: 10px;
}
.encyclopedia-thumbnails-name {text-align:center;}
.bannerboxes {margin:0px;padding: 30px 40px ; text-align:left; background-color:#ffffff; color:#666666}
}
	 
	 
	   * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

  

    .accordion {
      width: 100%;
      height: 70vh;
      display: flex;
      overflow: hidden;
    }

    .panel {
      flex: 1;
      transition: flex 0.5s ease;
      background-size: cover;
      background-position: center;
      cursor: pointer;
    }

    .accordion:hover .panel {
      flex: 1;
    }

    .accordion .panel:hover {
      flex: 5;
    }

    .panel:not(:last-child) {
      margin-right: 2px;
    }

    /* ----- Responsive Mobile (Vertical) ----- */
    @media (max-width: 768px) {
      .accordion {
        flex-direction: column;
        width: 100vw;
        height: 70vh;
      }

      .panel {
        flex: 1;
        margin-right: 0;
        margin-bottom: 2px;
      }

      .accordion:hover .panel {
        flex: 1;
      }

      .accordion .panel:hover {
        flex: 5;
      }
    }