/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#container
{
	float: left;
	width: 100%;
    background-color: white;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#logo
{
	background-color: white;
}

#logo img
{
    float:left;
	width: 30%;
	height: auto;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.topnav {
  float: left;
  width: 100%;
  overflow: hidden;
  background-color: #ebe8e8;
}

.topnav a {
  float: right;
  display: block;
  color: #003366;
  text-align: center;
  padding: 5px 24px;
  text-decoration: none;
  font-family: 'Bahnschrift';
  font-size: 26px;
}

@media screen and (max-width: 600px)
{
    .topnav
    {
        float: right;
        width: 100%;
    }

    .topnav a
    {
	    font-size: 10px;
    }

    .topnav .responsive
    {
      position: relative;
    }
  
    .topnav .responsive a
    {
      float: none;
      display: block;
      text-align: left;
    }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#weather_bar
{
	float: left;
	width: 100%;	
	background: #003366;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#message
{
    float: left;
	width: 100%;
	
    color: #003366;
	background-color: #ebe8e8;

	text-align: center;
	font-size: 40px;
	font-family: 'Bahnschrift';
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#content
{
	float: left;
	width: 100%;
	background: #003366;
}



@media screen and (max-width: 600px) {
    #message
    {
    float: left;
	font-size: 22px;
    }
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#carouselContainer
{
    float: left;
    width: 70%;
    padding: 5px 10px 5px 10px;
}

@media screen and (max-width: 600px) {
    #carouselContainer
    {
        float: left;
        padding: 0 0 10px 0;
        width: 100%;
    }
}

.carousel-control
{
    opacity: 0.5
}

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.ad_container {
  text-align: center;
}

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

#adspace_left, #adspace_right
{
    float: left;
    width: 15%;
    min-height: 1px;
}

#adspace_left img, #adspace_right img
{
    width: 80%;
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    #adspace_left, #adspace_right
    {
        display: none;
    }
}

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

#adspace_lower
{
    float: left;
    width: 100%;
    min-height: 1px;
}


/*
@media screen and (max-width: 600px) {
    #adspace_lower
    {
        display: block;
        float: left;
        width: 100%;
        
    }
}
*/

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#image_selection
{
    width: 100%;
    background: #003366;
    
}

.images
{
	float: left;
	padding: 5px 20px
}

.hdc_image
{
	height: auto;
	text-align: center;
}

.hdc_image img
{
        float: left;
	    width: 25%;
        height: auto;
            background: #003366;
        padding: 5px;
}

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

    .images
    {
        display: none;
        /*
        float: none;
        width: 80%;
        padding: 20px 0;
        */
    }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#overlay_w {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay_w img{
    height: 100%;
}

@media screen and (max-width: 600px) {
    #overlay_w img 
    {   
        height: auto;
        width: 100%;
    }
}

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

#overlay_se {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay_se img{
    height: 100%;
}

@media screen and (max-width: 600px) {
    #overlay_se img 
    {   
        height: auto;
        width: 100%;
    }
}

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

#overlay_multi {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay_multi img{
    height: 100%;
}

@media screen and (max-width: 600px) {
    #overlay_multi img 
    {   
        height: auto;
        width: 100%;
    }
}

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

#overlay_sw {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay_sw img{
    height: 100%;
}

@media screen and (max-width: 600px) {
    #overlay_sw img 
    {   
        height: auto;
        width: 100%;
    }
}

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

#overlay_ne {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay_ne img{
    height: 100%;
}

@media screen and (max-width: 600px) {
    #overlay_ne img 
    {   
        height: auto;
        width: 100%;
    }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#livestream
{
	float: left;
	width: 100%;
	text-align: center;
	background-color: #ebe8e8;

}

@media screen and (max-width: 600px) {
    iframe {
        width: 100%;
        padding: 10px 0px;
    }
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#description
{
    float: left;
    width: 100%;
    padding: 0px 40px;
	background-color: #ebe8e8;
	font-size: 20px;
	text-align: justify;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#copyright
{
	float: left;

	text-align: center;

	width: 100%;
	height: auto;

	margin: 2px auto;
	border: 0 solid black;
	padding: 0px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

#Statcounter
{
	float: left;

	text-align: right;

	margin: 2px auto;
	border: 0px solid black;
	padding: 0px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */