/**USCG National Maritime Center CSS
Created by: James F McKinlay Web Master
Last Update: 12-16-25***/


.affix {
    
    width: 100%;
    z-index: 1000 !important;
  -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
top: 95px;
  }

  .affix ~ .container-fluid {
   position: relative;
   

  }

  .navbar {
background-color:#486591;
    margin-bottom: 0px;
  }





.icon-bar {
  width: 100%;
  background-image: linear-gradient(-3deg, rgb(2,31,57) 0%, rgb(2,31,57) 49.95%, rgb(7,36,62) 50%, rgb(7,36,61) 100%);
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
border-right: 1px solid #d8d8d8;
 
}

.icon-bar a:hover {
  background-image: linear-gradient(-3deg, rgb(2,31,57) 0%, rgb(2,31,57) 49.95%, rgb(7,36,62) 50%, rgb(7,36,61) 100%);
opacity: 0.5;
color: #f1f1f1;

}

.header-container {
display: flex;
align-items: stretch;  /*logo and text same height*/
padding: 5px;
}

.navbar1 {
  overflow: hidden;
  background-color:#486591;
background-size: 100%;

display: flex;
padding-left: 18px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar1 a {
  float: left;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  padding: 10px 15px;
text-transform: uppercase;
  text-decoration: none;

}

.dropdown1 {
  float: left;
  overflow: hidden;
}

.dropdown1 .dropbtn {
  font-size: 12px;
  font-weight: bold;
  color: white;  
  border: none;
  outline: none;
  padding: 10px 15px;
text-transform: uppercase;
  background-color: inherit;
  margin: 0;

}

.navbar1 a:hover, .dropdown1:hover .dropbtn {
  background-color: #041E42;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #041E42;
padding-inline: 60px;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
  z-index: 1;
}

.dropdown-content .header {
 background-color: #041E42;
color: white;
border-bottom: 1px solid white;
}

.dropdown1:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
   height: auto;
}

.column a {
  float: none;
  color: white;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #486591;
}


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





/* Add media queries for responsiveness - when the screen is 600px wide or less, stack the links on top of each other */
@media screen and (max-width: 600px) {
 .affix {
    position:static;
  }
  .navbar1 {
    flex-direction: column;
align-items: flex-start;
	
  }
  .dropdown1-content {
    position:static;
width: 100%;

  }
  
  .column {
  width: 100%;
  padding: 10px 15px;
}


.header-container {
flex-direction: row;
align-items: center;
text-align: center;
}


.icon-bar {
  width: 100%;
  background-image: linear-gradient(-3deg, rgb(2,31,57) 0%, rgb(2,31,57) 49.95%, rgb(7,36,62) 50%, rgb(7,36,61) 100%);
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  color: white;
border-right: 1px solid #d8d8d8;
 
}

.icon-bar a:hover {
  background-image: linear-gradient(-3deg, rgb(2,31,57) 0%, rgb(2,31,57) 49.95%, rgb(7,36,62) 50%, rgb(7,36,61) 100%);
opacity: 0.5;
color: #f1f1f1;

}
}


h1, h2, h3, h4 {
	font-family: Georgia, serif;
        
}

h2 {
	font-size : 48px;
}


@media (min-width:576px) { 
h1 { 
font-size : 30px; 
} 
} 

@media (min-width:768px) { 
h1 { 
font-size : 48px; 
} 
} 

@media (min-width:992px) { 
h1 { 
font-size : 58px; 
} 
} 

@media (min-width:1200px) { 
h1 { 
font-size : 66px; 
} 
} 

@media (min-width:576px) { 
h2 { 
font-size : 18px; 
} 
} 

@media (min-width:768px) { 
h2 { 
font-size : 23px; 
} 
} 

@media (min-width:992px) { 
h2 { 
font-size : 26px; 
} 
} 

@media (min-width:1200px) { 
h2 { 
font-size : 28px; 
} 
} 

@media (min-width:576px) { 
h3 { 
font-size : 16px; 
} 
} 

@media (min-width:768px) { 
h3 { 
font-size : 18px; 
} 
} 

@media (min-width:992px) { 
h3 { 
font-size : 20px; 
} 
} 

@media (min-width:1200px) { 
h3 { 
font-size : 23px; 
} 
} 

@media (min-width:576px) { 
h4 { 
font-size : 14px; 
} 
} 

@media (min-width:768px) { 
h4 { 
font-size : 16px; 
} 
} 

@media (min-width:992px) { 
h4 { 
font-size : 18px; 
} 
} 

@media (min-width:1200px) { 
h4 { 
font-size : 20px; 
} 
} 

p {
line-height: 1.5;
}

 

/***table & col***/
table {
	border-collapse : collapse;
	width : 100%;
	border: 1px groove #f2f2f2
         
}

th, td {
    padding: 3px;
    text-align: left;
    color: black;
    
}

.col-container { 
display : table; 
width : 100%; 
} 
.col { 
display : table-cell; 
padding : 3px; 

} 
@media only screen and (max-width:600px) { 
.col { 
display : block; 
width : 100%; 
} 
} 
 

 
/***text break***/

.text-break { 
white-space : normal; 
} 
@media (max-width:479px) { 
.text-break-xs { 
white-space : normal; 
} 
} 

@media (min-width:480px) and (max-width:767px) { 
.text-break-sm { 
white-space : normal; 
} 
} 

@media (min-width:768px) and (max-width:991px) { 
.text-break-md { 
white-space : normal; 
} 
} 

.btn-1 { 
display : block; 
color : white; 
text-align: center;
text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
font-weight : 700;
letter-spacing: 1px; 
padding : 6px; 12px; 
background: linear-gradient(135deg, rgba(99, 0, 0, 1) 0%, rgba(99, 0, 0, 1) 33%, rgba(128, 0, 0, 1) 33%, rgba(119, 41, 35, 1) 34%, rgba(99, 0, 0, 1) 34%, rgba(99, 0, 0, 1) 50%, rgba(128, 0, 0, 1) 62%, rgba(99, 0, 0, 1) 73%, rgba(119, 41, 35, 1) 84%, rgba(99, 0, 0, 1) 93%); 
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
white-space : normal; 
border : white solid 2px; 
width: 100%;

} 

.btn-1:hover { 
 
background-color : #da190b; 
background-image : linear-gradient(to bottom, #da190b, #da190b); 

} 

.btn-2 { 

	display: block;
	color: #FFFFFF;
	text-align: center;
        text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
        font-weight : 700;
        letter-spacing: 1px;
	background: linear-gradient(135deg, #778899 10%,#778899  10%,#355d8e 10%,#0f243e 50%,#355d8e 90%,#778899 90%);
        box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
	border: #ffffff solid 2px;
        padding : 6px; 12px; 
width: 100%;
}
 
.btn-2:hover {
	background-color : #355d8e;
	background-image: linear-gradient(135deg, #1b8efa, #355d8e, #1b8efa);
}
 
.btn-3 { 
display : block;  
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
font-weight : 700; 
text-align : center; 
text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
background-color : #ffffff; 
white-space : normal; 
border: #f2f2f2 solid 2px;
padding : 6px; 12px; 
width: 100%; 

} 
.btn-3:hover { 

background-color : #e7e7e7; 
border-image : none; 
} 
.btn-4 { 
        display: block;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
        font-weight : 700;
        letter-spacing: 1px;
	background: linear-gradient(135deg, #0f243e 10%,#0f243e 10%,#355d8e 10%,#0f243e 50%,#355d8e 90%,#0f243e 90%);
        box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
	
	border: #ffffff solid 2px; 
        padding : 6px; 12px; 
width: 100%;
} 
.btn-4:hover { 
background: #0f243e;
	background: linear-gradient(135deg, #1b8efa, #0f243e, #1b8efa);
} 


.btn-5 { 
display : block;  
color : white; 
font-size : inherit; 
font-weight : 700; 
text-align : center; 
text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
padding : 1px; 
white-space : normal; 
background-color : #b4823a; 
background-image : linear-gradient(to bottom, #b4823a, #b4823a);
box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3); 
border : white solid 2px; 
border-image : none; 
margin-top: 10px;
margin-bottom: 10px;
} 

.btn-5:hover { 
background-color : #ffaa07; 
background-image : linear-gradient(to bottom, #ffaa07, #ffaa07); 

 
} 

.btn-7 {
	display: block;
	color: #ffffff;
	text-align: center;
        text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
        font-weight : 700;
        letter-spacing: 1px; 
	background: linear-gradient(to bottom, #07243e 10%, #800000 11%, #800000 11%,#800000 90%,#07243e 90%,#07243e 90%);
        box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
	border: #ffffff solid 2px;
        padding : 6px; 12px; 
width: 100%;
}
.btn-7:hover {
	background-color: #1b8efa;
	background-image: linear-gradient(to bottom, #800000 10%,#355d8e 11%,#07243e 11%,#355d8e 48%,#355d8e 88%,#07243e 90%,#800000 90%,#800000 90%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.btn-8 {
	display: block;
	color: #fff;
	text-align: center;
        text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
        font-weight : 700;
        letter-spacing: 1px; 
	background: linear-gradient(to bottom, #800000 10%,#07243e 11%,#07243e 11%,#07243e 90%,#800000 90%,#800000 90%);
        box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.3);
	border: #f2f2f2 solid 2px;
        padding : 6px; 12px; 
width: 100%;
}
.btn-8:hover {
	background-color: #1b8efa;
	background-image: linear-gradient(to bottom, #800000 10%,#355d8e 11%,#07243e 11%,#355d8e 48%,#355d8e 88%,#07243e 90%,#800000 90%,#800000 90%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

a:hover { 
text-decoration : underline; 
}
.btn-9 {
	display: block;
	width: 100%;
	color: white;
	text-align: center;
        text-shadow: 1px 1px 1px #2c3e50, 1px 1px 1px grey;
        font-weight : 700;
        letter-spacing: 1px; 
	background-image: linear-gradient(-3deg, rgb(44,54,56) 0%, rgb(44,54,56) 49.95%, rgb(49,59,61) 50%, rgb(49,57,60) 100%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 1px;
	border: #ffffff solid 2px;
        margin-top: 10px;
        margin-bottom: 10px;
}
.btn-9:hover {
	background-color: #1b8efa;
	background-image: linear-gradient(to bottom, #800000 10%,#334a73 11%,#07243e 11%,#334a73 48%,#334a73 88%,#07243e 90%,#800000 90%,#800000 90%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

a:hover { 
text-decoration : underline; 
} 


 

.well1 { 
display : block; 
background : white;
color: black; 
border: #d7d7d7 solid 1px;   
padding: 5px;
} 

.well2 {
	display: block;
	background: #e4e4e4;
        border: #F2F2F2 solid 2px;
	padding : 5px;
	
}
/**liteblue**/
.well3 {
	display: block;
	background: #778899;
        color: #fff; 
	padding : 3px 3px 3px 3px;
	margin-bottom: 15px;
        text-shadow: 1px 2px 4px rgba(0,0,0,0.3);

}
 
.well4 {
	display: block;
	background: #778899;
        color: #fff; 
        border-radius: 15px;
	padding : 3px 3px 3px 3px;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

.well4:hover {

background: #355d8e;
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.well5 {
  display: block;
  background-color: black; /* For browsers that do not support gradients */
  background-image: radial-gradient(silver,gray, black  ); /* Standard syntax (must be last) */
  color: #FFFFFF;
}


/**darkblue**/
.well6 {
	display: block;
	background-image: linear-gradient(-3deg, rgb(2,31,57) 0%, rgb(2,31,57) 49.95%, rgb(7,36,62) 50%, rgb(7,36,61) 100%);
        border: none;
	color: #FFFFFF;
	
}
/****/
.well7 {
	display: block;
        background: rgb(37,66,103);
	padding : 3px 3px 3px 3px;
     
}



/****/
.well9 {
	display: block;
        background: rgb(51, 93, 139);
	padding : 3px 3px 3px 3px;
}


/**blue*red**/
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
.well20 {
	display: block;
	background: linear-gradient(135deg, rgba(15, 36, 62, 1) 0%, rgba(15, 36, 62, 1) 10%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 11%, rgba(99, 0, 0, 1) 11%, rgba(128, 0, 0, 1) 12%, rgba(99, 0, 0, 1) 23%, rgba(119, 41, 35, 1) 34%, rgba(99, 0, 0, 1) 43%, rgba(99, 0, 0, 1) 53%, rgba(128, 0, 0, 1) 63%, rgba(99, 0, 0, 1) 73%, rgba(119, 41, 35, 1) 84%, rgba(99, 0, 0, 1) 93%);
	color: #FFFFFF;
	padding : 3px 3px 3px 3px;
	border: none;
}
.well21 {
	display: block;
	color: #FFFFFF;
	padding: 3px;
	background: linear-gradient(to bottom, rgba(128, 0, 0, 1) 4%, rgba(15, 36, 62, 1) 4%);
}

 /* Black background with transparency */

.well30 {

    display: block;

    background: #000000;

    opacity: 0.7;

    color: #ffffff;

    top: 0;

    margin: 0;

}

/* Black background with transparency */

.well31 {

    display: block;

    background: #000000;

    opacity: 0.5;

    color: #f1f1f1;

    bottom: 0;

    margin: 0;

}




/*box-shadow*/

.shadow {
box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}

.shadow5 {
    box-shadow: inset 1px 1px 10px 1px #323a45;
    
}

/*text-shadow*/

.text-shadow {
text-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}



/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}