:root {
	--boxC: #047f49;
	--boxC:  #00274c;
	;
	--textC:  #ffcb0b;
	--textBlue: #337ab7;
	--color_misc1:  #00274c;
	--color_misc: #ffcb0b;
	--lightblue:#567daa;
  }

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#cssmenu:after, #cssmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#cssmenu #menu-button {
	display: none;
}
#cssmenu {
	width: auto;
	font-family: 'Open Sans', sans-serif;
	line-height: 1;
	background: none;
	position: relative;
	z-index: 1000;
}
/*#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #ffcb05;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}*/
#cssmenu > ul > li {
	float: left;border-right: 1px solid #000;
}
#cssmenu.align-center > ul {
	font-size: 0;
	text-align: center;
}
#cssmenu.align-center > ul > li {
	display: inline-block;
	float: none;
}
#cssmenu.align-center ul ul {
	text-align: left;
}
#cssmenu.align-right > ul > li {
	float: right;
}
#cssmenu.align-right ul ul {
	text-align: right;
}
#cssmenu > ul > li > a {
	padding: 11px 10px;

	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}
#cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a {
	color: #000 !important;
	background-color: #ffcb05;
}
#cssmenu > ul > li:hover > a, #cssmenu > ul > li.active2 > a {
	color: #000 !important;
	background-color: #ffcb05;
}

#cssmenu > ul > li.has-sub > a {
	padding-right: 20px;
}
#cssmenu > ul > li.has-sub > a::after {
	position: absolute;
	top: 13px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}
#cssmenu > ul > li.active2 > a::after {
	position: absolute;
	top: 13px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #000;
	border-right: 2px solid #000;
	content: "";
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}

#cssmenu > ul > li.has-sub:hover > a::after {
	border-color: #000;
}
#cssmenu > ul > li.has-sub:active > a::after {
	border-color: #000;
}

#left_menu ul ul li a:active::before {
    content: '>>';
    position: absolute;
    top: 7px;
    left: 5px;
    display: block;
    color: #ffffff;
}


#cssmenu ul ul {
	position: absolute;
	left: -9999px;
}
#cssmenu li:hover > ul {
	left: auto;
}
#cssmenu.align-right li:hover > ul {
	right: 0;
}
#cssmenu ul ul ul {
	margin-left: 100%;
	top: 0;
}
#cssmenu.align-right ul ul ul {
	margin-left: 0;
	margin-right: 100%;
}
#cssmenu ul ul li {
	height: 0;
	-webkit-transition: height .2s ease;
	-moz-transition: height .2s ease;
	-ms-transition: height .2s ease;
	-o-transition: height .2s ease;
	transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
	height: 32px;
}
#cssmenu ul ul li a {
	padding: 10px 10px;
	font-size: 12px;
	background: #0B2651;
	text-decoration: none;
	color: #fff;
	min-width: 173px;
	white-space: nowrap;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover {
	color: #000;
	background-color: #ffcb05;
}
#cssmenu ul ul li.has-sub > a::after {
	position: absolute;
	top: 13px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	content: "";
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}
#cssmenu ul ul li.active > a::after {
	position: absolute;
	top: 13px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	content: "";
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}


#cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a{
    color: #000;
    background-color: #ffcb05;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
	right: auto;
	left: 10px;
	border-bottom: 0;
	border-right: 0;
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
	border-color: #000;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
 #cssmenu {
 width: 100%;
}
 #cssmenu ul {
 width: 100%;
 display: none;
}
 #cssmenu.align-center > ul,  #cssmenu.align-right ul ul {
 text-align: left;
}
 #cssmenu ul li,  #cssmenu ul ul li,  #cssmenu ul li:hover > ul > li {
 width: 100%;
 height: auto;
 border-top: 1px solid rgba(255, 255, 255, 0.15);
}
 #cssmenu ul li a,  #cssmenu ul ul li a {
 width: 100%;
}
 #cssmenu > ul > li,  #cssmenu.align-center > ul > li,  #cssmenu.align-right > ul > li {
 float: none;
 display: block;
}
 #cssmenu ul ul li a {
 padding: 12px 33px;
 font-size: 13px;
 color: #fff;
 background: none;
}
#cssmenu ul ul li a::before{
	content: '>>';
    position: absolute;
    top: 12px;
    left: 12px;
    display: block;
    color: #ca7171;
	}
 #cssmenu ul ul li:hover > a,  #cssmenu ul ul li a:hover {
 color: #000000;
}
 #cssmenu ul ul ul li a {
 padding-left: 40px;
}
 #cssmenu ul ul,  #cssmenu ul ul ul {
 position: relative;
 left: 0;
 right: auto;
 width: 100%;
 margin: 0;
}
 #cssmenu > ul > li.has-sub > a::after,  #cssmenu ul ul li.has-sub > a::after {
 display: none;
}
 #menu-line {
 display: none;
}
 #cssmenu #menu-button {
 display: block;
 padding: 20px;
 color: #fff;
 cursor: pointer;
 font-size: 12px;
 text-transform: uppercase;
}
 #cssmenu #menu-button::after {
 content: '';
 position: absolute;
 top: 20px;
 right: 20px;
 display: block;
 width: 15px;
 height: 2px;
 background: #fff;
}
 #cssmenu #menu-button::before {
 content: '';
 position: absolute;
 top: 25px;
 right: 20px;
 display: block;
 width: 15px;
 height: 7px;
 border-top: 2px solid #fff;
 border-bottom: 2px solid #fff;
}
 #cssmenu .submenu-button {
     position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    height: 36px;
    width: 52px;
    cursor: pointer;
}
 #cssmenu .submenu-button::after {
 content: '';
 position: absolute;
 top: 13px;
 left: 26px;
 display: block;
 width: 1px;
 height: 11px;
 background: #fff;
 z-index: 99;
}
#cssmenu > ul > li > a {
    padding: 11px 23px;
    margin: 0;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}
 #cssmenu .submenu-button::before {
 content: '';
 position: absolute;
 left: 21px;
 top: 18px;
 display: block;
 width: 11px;
 height: 1px;
 background: #fff;
 z-index: 99;
}
 #cssmenu .submenu-button.submenu-opened:after {
 display: none;
}
}





div.topmenu {
	font-size: 14px;
  }
  div.topmenu .left {
	height: inherit;
	display: inline-block;
	margin-top: 1px;
	padding-left: 5px;
  }
  div.topmenu .left li i {
	color: red;
	size: 12px;
	font-weight: 500;
  }
  div.topmenu .left li {
	height: inherit;
	list-style: none;
	display: inline;
	margin-right: 20px;
  }
  div.topmenu .left li a {
	height: inherit;
	list-style: none;
	display: inline;
	margin-right: 20px;
	color: white;
	text-decoration: none;
  }
  div.topmenu .right {
	height: inherit;
	display: inline-block;
	margin-top: 1px;
	padding-left: 5px;
  }
  div.topmenu .right li i {
	color: #C46A00;
	size: 12px;
	font-weight: 500;
  }
  div.topmenu .right li {
	height: inherit;
	list-style: none;
	display: inline;
	margin-right: 20px;
  }
  div.topmenu .right li a {
	height: inherit;
	list-style: none;
	display: inline;
	margin-right: 20px;
	color: white;
  }
  div.topmenu a:hover {
	color: red;
  }
  ul.topmenu {
	list-style: none;

  }
  ul.topmenu li {
	display: inline-block !important;
	padding:20px;
	padding-top:30px;
	padding-bottom:30px; 
	border-right: 1px solid #567daa;
	border-radiuss: 6px;;
	/* clip-path: polygon(20% 60%, 100% 0, 100% 100%, 0% 100%); */
  }
  ul.topmenu li a {
	color: white !important;
	text-decoration: none;
  }
  ul.topmenu li a:hover {
	colors: var(--boxC) !important;
  }
  ul.topmenu li i {color:#ac1b2a;
    margin-right:3px;
  font-size:3vh !important;}


  #footer h3 {
	text-align: center;
	padding: 5px;
	border-radius: 10px;
  }
  
  @media only screen and (max-width: 968px) {

    #header #zone-main-nav #main-nav {
        font-size: 13px;
    }

    #header #zone-main-nav #main-nav ul {
        border-right: none;
    }

    #header #zone-main-nav #main-nav ul li:first-child {
        border-left: none;
    }

    ul.topmenu li {
      display: inline-block !important;
      padding:5px;
     
      border-left: 1px solid #567daa;
      border-radius: 6px;;
    }

}

@media only screen and (max-width: 820px) {

    #header #zone-main-nav #main-nav {
        font-size: 15px;
        background-color: #003e78;
    }

    #header #zone-main-nav #main-nav .hamburger-header {
        display: block;
        cursor: pointer;
    }

    #header #zone-main-nav #main-nav .hamburger-header:hover {
        background-color: #003e78;
    }

    #header #zone-main-nav #main-nav .hamburger-header h3 {
        padding: 12px;
        color: #ffcb0b;
        font-family: 'Roboto Condensed',sans-serif;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
    }

    #header #zone-main-nav #main-nav .hamburger-header h3 .fa {
        margin-right: 5px;
    }

    #header #zone-main-nav #main-nav ul {
        display: none;
    }

    #header #zone-main-nav #main-nav ul li {
        display: inherit;
        float: none;
        width: auto !important;
        text-align: center;
        border-left: none;
        border-top: 1px dotted #567daa;
    }

    ul.topmenu li {
      display: inline-block !important;
      padding:5px;
     
      border-left: 1px solid #567daa;
      border-radius: 6px;;
    }
}

@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
  .topNav {
    height: 60px;
    border: 1pt solid red;
    display: none;
    color: #3278a9;
  }
  .topNav .right {
    display: none;
  }
  .topMenu ul li {
    display: block;
  }
  .copyright {
    margin-top: 0px;
    font: 12px Arial, "Times New Roman", Times;
    color: #fff;
    text-decorations: underline;
    color: silver;
    font-size: 12px;
    text-shadow: 2px 2px 4px #000000;
    text-align: left
  }
  #myCarousel2 {
    clip-paths: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
    height: 340px !important;
  }
  ul.topmenu li {
    display: inline-block !important;
    padding:5px;
   
    border-left: 1px solid #567daa;
    border-radius: 6px;;
  }
}
#menuCon {
  background-color: #1ca0de;
}

/* Add a black background color to the top navigation */
#headerImg {
  height: 300px;
  margin-top: 31px;
}
.onlyMobile {
  display: none;
}
.noMobile {
  display: inherit
}
/*for galler*/
.caption {
  color: black;
}
.caption p {
  color: #1ca0de;
}
.caption dd {
  color: #1ca0de;
}
.caption h5 {
  color: #1ca0de;
}
.caption h6 {
  color: #1ca0de;
}
.caption .glyphicon {
  color: red;
  font-weight: 500;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    .onlyMobile {
      display: inherit;
    }
    .noMobile {
      display: none;
    }
    #myCarousel2 {
      clip-paths: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
      height: 340px !important;
    }
    ul.topmenu li {
      display: inline-block !important;
      padding:5px;
     
      border-left: 1px solid #567daa;
      border-radius: 6px;;
    }
  }
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {
      position: relative;
    }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom: 2pt inset grey;
    }
    .topnav.responsive a.icon {
      border-bottom: 0pt inset grey;
    }
    #headerImg {
      height: 180px;
      margin-top: 0px;
    }
    .onlyMobile {
      display: inherit;
    }
    .noMobile {
      display: none;
    }
    #myCarousel2 {
      clip-paths: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
      height: 340px !important;
    }
    ul.topmenu li {
      display: inline-block !important;
      padding:5px;
     
      border-left: 1px solid #567daa;
      border-radius: 6px;;
    }
  }