@charset "UTF-8";
body {margin:0;  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
    background-color: #FFF}
		
		
		

		
        .rslides {
          position: relative;
          list-style: none;
          overflow: hidden;
          width: 100%;
          padding: 0;
          margin: 0 auto 40px;
		  
        }

        .rslides li {
          position: relative;
          display: none;
          width: 100%;
          left: 0;
          top: 0;
        }

        .rslides li:first-child {
          display: block;
        }

        .rslides img {
          display: block;
          height: auto;
          width: 100%;
          border: 0;
        }

        .caption {
          position: absolute;
          bottom: 5%;
          left: 2%;
          background-color: rgba(0, 0, 0, 0.2);
          color: white;
          padding: 50px;
          font-size: 2rem;
        }
		
			@media screen and (max-width: 630px) {
				.caption {
          position: absolute;
          bottom: 5%;
          left: 2%;
          background-color: rgba(0, 0, 0, 0.2);
          color: white;
          padding: 20px;
          font-size: 1rem;
        }
			}
		
		#tableMenu {width:100%; margin:0; position: fixed; z-index:30; background-color:#FFF; height:120px}
		
		#logoMenu {position:absolute; margin-left:2%}
		
		.spacerMenu{width:100%; height:120px}
		
		#menuSocial { width:100%; text-align:right; height:57px; border-bottom: 3px black solid}
		#menuSocial table {float:right}
		#menuCont { width:100%; text-align:right;}
		
		@media screen and (max-width: 630px) {
			#menuCont { display:none}
		}
		
		select {
            display: none;
        }
		.custom-select-container{
           display: none;
        }
		
		.custom-select-container.active .dropdown {
		display:none
			
		}
		
		.logodos {max-width:500px; width:100%;}
		
		@media screen and (max-width: 630px) {
		 select {
            display: none;
        }

        /* Container for the custom select */
        .custom-select-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        /* Custom select box */
        .custom-select {
            display: flex;
            justify-content: flex-end; /* Aligns hamburger to the right */
            align-items: center;
            width: 100%; /* Full width for container */
            cursor: pointer;
            padding: 5px;
        }

        /* Hamburger menu style */
        .hamburger {
            width: 30px; /* Adjust size as needed */
            height: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
			margin-right:15px !important;
			margin-top: 13px !important
        }

        .hamburger div {
            width: 100%;
            height: 3px;
            background-color: #333;
        }

        /* Dropdown container */
        .dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            left: 0; /* Full width dropdown */
            background-color: white;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
		
		.dropdown a {text-decoration:none; color:black}

        /* Dropdown options */
        .dropdown div {
            padding: 8px 16px;
            cursor: pointer;
        }

        .dropdown div:hover {
            background-color: #ddd;
        }

        /* Show dropdown when active */
        .custom-select-container.active .dropdown {
            display: block;
        }
		}
		
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
}

li a:hover {
 color:#195F88;
}

#MainHeader {
	margin:auto; text-align:center; width:100%; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color:#195F88;
	}
	
	

#MainHeader h1{text-align:center; font-weight: 600; color:#195F88 !important;}
#MainHeader h2{text-align:center; font-weight: 300; color:#195F88 !important;}
.spanFix{font-weight: 800; font-style: bold; color:#195F88 !important;}
#MainHeader h3{text-align:center; margin-top:-20px; font-weight: 400; color:#195F88 !important;}

#MainHeaderShop {
	margin:auto; text-align:center; width:100%; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color:#195F88;
	}
	
	#MainHeaderShop h1{text-align:center; font-weight: 600; color:#195F88 !important;}
#MainHeaderShop h2{text-align:center; font-weight: 300; color:#195F88 !important;}
.spanFix{font-weight: 800; font-style: bold; color:#195F88 !important;}
#MainHeaderShop h3{text-align:center; margin-top:-20px; font-weight: 400; color:#195F88 !important;   margin-left:10%; margin-right:10%}

/*slideshow*/

.mySlides {display: none;   background-color: #FFF}
.mySlides img {vertical-align: middle; width:100%;   background-color: #FFF}

/* Slideshow container */
.slideshow-container {
  max-width:100%;
  position: relative;
  margin: auto;
  background-color: #FFF
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
 color:#195F88;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}



/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
    background-color: #FFF;
  padding:0px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
    background-color: #FFF;
  margin:0px;
  height:100%
}

.column p {text-align:center;  background-color: #FFF; height:100%}

/* Styles for the button */
  .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color:#195F88 ;
    color: #fff;
    border: none;
    border-radius: 5px;
	font-family: "Inter Tight", sans-serif;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none; /* Remove underline for anchor tag */
  }
  /* Hover effect */
  .button:hover {
    background-color: #0056b3; cursor: pointer;
  }

/*Slideshow END*/



/* Create two equal columns that floats next to each other */
.columnTwo {
  float: left;
  width: 50%;
  padding: 0px;
  
}

.blueBg p a {text-decoration: underline; color:#FFF}
.blueBg p a:active {text-decoration: underline; color:#FFF}
.blueBg p a:hover {text-decoration: underline; color: #CCC}

.columnTwo img {width:100%; max-height:500px}


.columnTwoContact {
  float: left;
  width: 50%;
  padding: 0px;
  
}

.columnTwoContact img {width:100px; max-height:auto; max-width:100px; margin-left:45%;}

.columnThreeContact a {color:#000; text-decoration:none}

@media screen and (max-width: 1200px) {
	.columnTwoContact img {width:100px; max-height:auto; max-width:100px; margin-left:30%;}
}


.blueBg {
	background-color: #195F88; margin-top:10px; bottom:10px; text-align:center; color:#FFF;
	}
	
.blueBg p {margin:auto; line-height:35px; max-width:400px; padding-bottom:30px}
	
.logoBlueBg {max-width: 400px; margin:auto; padding:5rem 1rem 2rem 1rem}	

/* Clear floats after the columns */
.rowTwo:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {

  
  .blueBg p {margin:auto; line-height:25px; max-width:400px; padding-bottom:30px}
	
.logoBlueBg {max-width: 300px; margin:auto; padding:2rem 1rem 1.5rem 1rem}	

.columnTwo img {width:100%; max-height:350px}
  
}

@media screen and (max-width: 800px) {
  .columnTwo {
    width: 100%;
  }
  
}

/* Create three equal columns that floats next to each other */
.columnThree {
  float: left;
  width: 33.33%;
    background-color:#195F88 ;
  padding:0px;
  text-align:center;
  margin-top:2%;
  margin-bottom:2%
}

/* Clear floats after the columns */
.rowThree:after {
  content: "";
  display: table;
  clear: both;
   background-color:#195F88 !important;
  margin:0px;
  height:100%
}

.columnThree img{margin:auto;}


@media screen and (max-width: 800px) {
  .columnThree {
    width: 100%;
  }
  .spacer3 {width:100%; height:25px;}
  
}

/* Create three equal columns that floats next to each other */
.columnThreeContact {
  float: left;
  width: 33.33%;
    background-color:#FFF ;
  padding:0px;
  text-align:center;
  margin-top:2%;
  margin-bottom:2%
}

/* Clear floats after the columns */
.rowThreeContact:after {
  content: "";
  display: table;
  clear: both;
   background-color:#FFF !important;
  margin:0px;
  height:100%
}

.columnThreeContact img{margin:auto; width:100%; max-width:200px}


@media screen and (max-width: 800px) {
  .columnThreeContact {
    width: 100%;
  }
  .spacer3 {width:100%; height:25px;}
  
}


.spacer1 {width:100%; height:25px;}
.spacer2 {width:100%; height:75px;}
.spacer3 {width:100%; height:60px;}


#SecondHeader h2{text-align:center; font-weight: 300; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-style: normal; color:#195F88}


#footer {
	margin: 20px 0;
	background-color: #FFF;
	display: block;
	width: 100%;
	text-align: right;
	
}
#footer .sponsors {
	margin: 15px;
}

#footer .sponsorLogos .logoRow {
	text-align: center;
	margin-bottom: 30px;
	width: 100%;
	
}

#footer .sponsorLogos .logoRow a {
	margin: 0 15px;
	display: inline-block;
	
}

#footer .sponsorLogos .logoRow a img {
	height: auto;
	width: 100%;
	margin:50px; padding:50px
}


#footer .sponsorLogos .row2 a {
	height:auto;
	margin-bottom: 15px;
	margin-top: 15px;
}



.col-xs-12 {
  width: 100%;  position: relative;
  min-height: 1px;
}	

#fotoBtm {margin:0px; width:100%}
#fotoBtm img {width:100%; height:auto}

#BottomFooter {color:#FFF; width:100%; margin-top:-5px; padding:0px; background-color:#195F88}

.columnThree h1{text-align:center; font-weight: 600;}
.columnThree h2{text-align:center; font-weight: 300; color:#FFF !important}
.columnThree .spanFixThree{font-weight: 800; font-style: bold; color:#FFF}
.columnThree h3{text-align:center; margin-top:-20px; font-weight: 400;}
.center {margin:auto; text-align:left}

#BottomFooter a{color: white; text-decoration:none}
#BottomFooter a.visited{color: white; text-decoration:none}

#iframeContainer {
	width:100; margin:2rem;
	}

 iframe {
    width: 98%;
    height: 300px;
	margin:20px;
}


#video-wrap {max-width:800px; width:100%; margin:auto}

.video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
			
        }
        video {
            width: 100%;
            height: auto;
            display: block;
        }
        .controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
        .controls button, .controls input {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }
        .controls input {
            width: 100px;
        }