@charset "utf-8";
.brand {
   display: none;
}
.page-header {
   display: block;
   height: 200px;
   margin-top: 80px;
   width: 100%;
   background-image: url(../images/desktop/UNION-MEMBER.png);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
}
body {
   display: block;
   margin: 0px;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
}
figcaption {
   padding-bottom: 10px;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   font-size: .75em;
   font-weight: normal;
   padding-top: 5px;
}
header {
   display: none;
}
#contentBlock {
   width: 50vw;
   height: auto;
   top: .5vh;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
}
#contentBlock img {
   display: block;
   width: 50vw;
   height: auto;
}
.sub-header {
   display: none;
}
h5 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.5vw;
   text-transform: uppercase;
   font-weight: bold;
   color: #FFFFFF;
   background-color: #BD2031;
}
.top-image {
   border-bottom: 2px solid #BD2031;
   padding-bottom: 35px;
   display: block;
   float: left;
   margin-bottom: 25px;
}
.top-image h3 {
   overflow: hidden;
   width: 50%;
   padding-left: 5%;
   text-align: left;
   font-weight: bold;
   font-size: 2em;
   font-family: 'Lato', sans-serif;
   color: #454142;
}
.top-image img {
   width: 50%;
   height: auto;
   overflow: hidden;
   float: left;
}
}
#top-caption {
   position: relative;
   width: 84%;
   height: 40px;
   background-color: rgba(32, 106, 171, 1.00);
   top: -20px;
   left: 5.5%;
   display: inline-block;
   margin-bottom: -20px;
   color: #FFFFFF;
   font-size: 14px;
   font-weight: normal;
   padding-left: 3%;
   padding-right: 3%;
   padding-top: 5px;
   text-align: center;
   -webkit-box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
.nav-header {
   position: fixed;
   display: inline-block;
   left: 0;
   right: 0;
   z-index: 999;
   top: 0px;
}
.main-title h2 {
   text-align: center;
   font-size: 2em;
   color: #fff;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
   margin: 0px;
}
.main-title {
   display: flex;
   margin: 40px auto 0px auto;
   align-items:center;
   justify-content: flex-start;
   background-color: #BD2031;
   padding:7px 0px 7px 5%;
   width:90%;
}
.unionInfo {
   
   width: 100%;
   display: flex;
   margin: 5px 0;
   font-weight: bolder;
   border-top: 4px solid #BD2031;
   border-bottom: 4px solid #BD2031;
   text-align: center;
   justify-content: center;
   align-content: center;
}

.unionInfo h1 {
font-size: 1em;
color: #BD2031; 
text-transform: uppercase;  
padding: 5px 2%;
margin: 0px;
}


.content-wrapper {
   float: left;
   width: 100%;
   height: auto;
   position: relative;
   top: 70px;
}
.accordion {
   background-color: #BD2031;
   color: #FFFFFF;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   outline: none;
   font-size: 15px;
   margin-top: 5px;
   margin-bottom: 5px;
   transition: 0.4s;
   border: none;
}
.active, .accordion:hover {
   background-color: #2581DC;
}
.panel {
   background-color: white;
   height: auto;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
   margin: 0;
   padding: 0;
}
.panel ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
.panel ul li a, .panel ul li a:visited, panel ul li a:active {
   width: 80%;
   display: block;
   float: left;
   padding-top: 15px;
   padding-left: 15px;
   height: 30px;
   margin-top: 2px;
   margin-right: 0%;
   margin-left: 0%;
   margin-bottom: 2px;
   text-align: left;
   text-decoration: none;
   line-height: 15px;
   font-family: Arial, Helvetica, sans-serif;
   color: #ffffff;
   font-size: 12px;
   background-color: #2581DC;
   text-transform: capitalize;
   border: none;
}
.panel ul li a:hover {
   background-color: #75AAF9;
   text-transform: capitalize;
}
#description {
   display: none;
}
main {
   width: 100%;
   height: auto;
   background-color: #E3E3E3;
   display: block;
   margin: 0px;
   padding: 0px;
   float: left;
}
#content-container {
   background-color: #FFF;
   display: block;
   float: left;
   width: 100%;
}
article {
   width: 90%;
   flex-wrap: nowrap;
   background-color: #FFF;
   display: flex;
   flex-direction: column;
   margin:0px auto;
   padding:15px 0px;
   border-bottom: 1px solid #a9a9a9 ;
   }

article:last-of-type {

border-bottom:none;

}




.flex-item {
   display: flex;

}

article .flex-item:nth-of-type(1) {
order:2;

}

 article .flex-item:nth-of-type(2) {
order:3;

}

article .flex-item:nth-of-type(3) {
order:1;

}

article .flex-item:nth-of-type(4) {
order:4;

flex-direction: column;
}

article .flex-item:nth-of-type(5) {
order:5;
flex-direction: column;
flex-wrap: wrap;
}


article .flex-item:nth-of-type(6) {
order:6;
flex-direction: column;
flex-wrap: wrap;
}

.article-text {

}


.article-image {
  
  padding-bottom: 20px;
  width:100%;  
}

.article-image img {
   width:100%;
   height:auto;
    float: left;
}

.article-header {
text-align: left;
padding-bottom: 10px;
}


.article-header h3 {

   font-family: 'Lato', sans-serif;
   color: #454142;
   font-weight: bold;
}

.article-date {
   color: #BD2031;
   font-size: 1.2em;
   text-transform: uppercase;
}

.article-date-container {
width:100%;
display: flex;
margin: 0;
}


.article-text {

}


.article-text p {
 
 font-size: 1.7em;

}

.top-teaser {
   float: left;
   line-height: 1.2em;
   padding-left: 5%;
   text-align: justify;
   width: 47%;
}
.teaser-container {
   height: auto;
   padding-left: 1%;
   width: 65%;
   margin-top: 0px;
   display: block;
   float: right;
}
.teaser {
   width: 100%;
   height: 180px;
   overflow: hidden;
   position: relative;
   color: #333;
}
.teaser:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.29) 88%, rgba(255, 255, 255, 1) 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.29) 88%, rgba(255, 255, 255, 1) 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.29) 88%, rgba(255, 255, 255, 1) 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
   /* IE6-9 */
}
.readmore {
   margin-left: auto;
   margin-bottom: 5px;
   width: 100%;
   margin-right: auto;
   text-align: center;
   display: block;
   float: left;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 15px;
}
.readmore {
   width: 50%;
   text-align: center;
   display: inline-block;
   float: right;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 40px;
}
.readmore a, .readmore a:visited {
   background-color: #BD2031;
   padding: 10px;
   text-decoration: none;
   border-radius: 5px;
   color: #fff;
}
.readmore a:hover {
   background-color: #F50307;
}
figure img {
   width: 100%;
}
figure {
   text-align: center;
   width: 30%;
   padding-right: 0;
   margin-top: 10px;
   margin-bottom: 0px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   height: auto;
   margin-left: 1%;
   float: left;
   margin-right: 0px;
   clear: both;
}
aside {}
section {
   display: block;
}
#mobileLogo {
   display: none;
}
#left-container {
   display: block;
   height: auto;
   margin: 0px;
   width: 100%;
   float: left;
}
#right-container {
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   height: auto;
   justify-content: space-around;
   background-image:url(../images/bg2-flags.png), url(../images/blue-sky.jpg);
   background-position:bottom center, center center;
   background-repeat: no-repeat,no-repeat;
   background-size:100%, cover;
   background-attachment: fixed,fixed;
}
.placard {
   width: 30%;
   display: block;
   float: left;
   height: auto;
   padding: 0px;
   margin-top: 1%;
   margin-right: 1%;
   margin-bottom: 1%;
   margin-left: 2%;
}
.placard img {
   width: 100%;
   height: auto;
}
.right-textbox {
   background-color: #FFF;
  
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   margin-top: 20px;
   padding-bottom: 5px;
   padding-top: 10px;
    box-shadow: 4px 6px 6px 2px rgba(0,0,0,0.42);
-webkit-box-shadow: 4px 6px 6px 2px rgba(0,0,0,0.42);
-moz-box-shadow: 4px 6px 6px 2px rgba(0,0,0,0.42);
}
.right-textbox:nth-child(1) {
   order: 1;
   width: 45%;
  flex-direction:row;
   align-content: flex-start;
   justify-content:space-around;
   flex-wrap: wrap;
}
.right-textbox:nth-child(2) {
   order: 3;
   width: 45%;
    margin-bottom: 20px;
}
.right-textbox:nth-child(3) {
   order: 2;
   width: 45%;
}
.right-textbox:nth-child(4) {
   order: 4;
   width: 45%;
    margin-bottom: 20px;
}
.right-textbox-header {
   width: 100%;
   display: flex;
   flex-direction: row;
    background-color: #BD2031;
    justify-content: center;
    align-content: center;
   margin-bottom: 20px;
}
.right-textbox h5 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2vw;
   text-transform: uppercase;
   font-weight: bold;
   color: #FFFFFF;
   padding: 5px 0;
   margin: 0;
   
}
.right-textbox p {
   text-align: left;
   width: 90%;
   padding-left: 5%;
   padding-right: 1%;
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
}
.right-textbox a, right-textbox a:visited {
   margin-left: auto;
   margin-right: auto;
   width: auto;
   display: block;
   margin-bottom: 10px;
}
.textbox-image {
   display: none;
}
.card-header .fa {
   transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
   transform: rotate(-90deg);
}
.menu-header {
   background-color: #fff;
   border: none;
   padding: 0;
   margin: 0;
}
.menu-header a, .menu-header a:visited {
   color: #343a40;
   font-size: .8em;
   display: block;
   line-height: 3em;
   padding-left: 7%;
   font-family: 'Lato', sans-serif;
   font-weight: bold;
   text-align: left;
   text-transform: uppercase;
}
.menu-header a:active, .menu-header a:hover {
   color: #BD2031;
}
.menu-item {
   width: 90%;
   padding: 0;
   margin: 0 auto .2em auto;
   border: 1px solid #E5DDDD;
   border-radius: 0;
}
.menu-item:last-child {
   margin-bottom: 1em;
}
.menu-item:hover {
   border: 1px solid #E5DDDD;
}
.menu-item ul {
   list-style-type: none;
   width: 100%;
   padding: 0;
   margin: 0;
}
.menu-item ul li {
   border: none;
   width: 100%;
   display: block;
   padding: 0;
   margin: 0;
}
.menu-item ul li a, .menu-item ul li a:visited {
   color: #454142;
   font-size: 1em;
   width: 100%;
   float: left;
   padding: 0 0 1.2em 0;
   margin: 0;
   font-family: 'Lato', sans-serif;
}
.menu-item ul li:active, .menu-item ul li a:hover {
   text-decoration: none;
   color: #BD2031;
}
footer {
   background-color: #003366;
   display: flex;
   width: 100%;
}
#footer-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex: 1 100%;
   max-width: 800px;
   margin: 100px auto 0 auto;
   padding: 0 4% 40px 4%;
   font-family: 'Lato', sans-serif;
}
.bottom-nav {
   display: flex;
   flex-direction: column;
   width: 20%;
   font-size: 2vw;
}

.bottom-nav:nth-child(1)
{
 order: 1;

}
.bottom-nav:nth-child(2)
{
 order: 2;
}
.bottom-nav:nth-child(3)
{
 order: 3;  
}
.bottom-nav:nth-child(4)
{
 order: 4;  
}
.bottom-nav:nth-child(5) {
 width:100%; 
order: 5;
}
.bottom-nav:nth-child(6) {
width:20%; 
order: 8;
margin: 20px  auto 0 auto;
padding-bottom: 30px;

}
.bottom-nav:nth-child(6) img {
 width:100%; 
 height:auto;
 border:1px solid #bcd3f6; 
 padding: 2px;
 justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.bottom-nav:nth-child(7) {
 order: 8;
width:45%; 

text-align: center;
margin-bottom: 0px;
 order: 7;
}
.bottom-nav:nth-child(7) img {
width:100%; 
height:auto;
margin: 0 auto;
padding: 15px 0;
}
.bottom-nav:nth-child(8) {
width:45%;
padding:5px auto 0 auto;
align-items: center;
margin-bottom: 0px;
order:6;
}
.bottom-nav:nth-child(8) img {
width:40%;
height:auto;
border:1px solid #bcd3f6; 
 padding: 2px;
}
.bottom-nav p {
color: #bcd3f6;
font-family: 'Lato', sans-serif;
font-size: calc(12px + (14 - 12) * ((100vw - 601px) / (799 - 601)));
margin-bottom: 0;
padding-bottom: 0;
}


.bottom-nav-header
{
   
    width: 100%;
   margin-bottom: 5px; 
   color: #bcd3f6;
   border-bottom: 1px solid #bcd3f6;
   padding-bottom: 3px;
   font-size: calc(16px + (18 - 16) * ((100vw - 601px) / (799 - 601)));
}


.bottom-nav ul {
   padding: 0;
}
.bottom-nav ul li {
   list-style-type: none;
   margin-top: 5px;
   margin-bottom: 5px;
}
.bottom-nav ul li a, .bottom-nav ul li a:visited {
   text-decoration: none;
   color: #bcd3f6;
}
.bottom-nav ul li a:hover {
   color: #FFFFFF;
}
.bottom-nav address {
   color: #bcd3f6;
   font-size: 1.5vw;
   font-style: normal;
   margin-top: 5px;
   font-family: 'Lato', sans-serif;
}
.image_off, .footer-icons:hover .image_on {
   display: none
}
.image_on, .footer-icons:hover .image_off {
   display: inline-flex;
}


 .footer-icons img {
 width:25%; 
 height:auto;
}
.contact-nav a, .contact-nav a:visited {
   display: block;
   width: 100%;
   height: 2em;
   text-decoration: underline;
   color: #bcd3f6;
   padding: 5px 0 3px 0;
   font-size: 2vw;
}
.contact-nav a:hover, .contact-nav a:active {
   color: #fff;
}
.calendar-container {
   display:flex;
flex-direction: column;
   position:relative;
   align-items: center;
   width: 47%;
   padding-left: 3%;

   
  }

.calendar-container img {
      
   width:100%;
}

.column {
   -webkit-flex-direction: column;
   flex-direction: column;
   float: left;
}
#info-wrapper {
display:flex;
flex-direction: column;

width: 50%;
align-content: center;
justify-content: center;
}
.column {
   -webkit-flex-direction: column;
   flex-direction: column;
   float: left;
}
#calendar-middle {
position: absolute;
top: 30%;
left:40%;
transform: translate(-30%, -40%);
font-size: calc(10px + (13 - 10) * ((100vw - 415px) / (600 - 415)));
font-weight: bold;
font-family: 'Work Sans', sans-serif;
text-transform: uppercase;
}
#meeting-date {
position: absolute;
top: 45%;
  left:45%;
  transform: translate(-45%, -45%);
   font-family: 'Work Sans', sans-serif;
   font-size: calc(30px + (48 - 30) * ((100vw - 415px) / (600 - 415)));
}

.calendar-info:nth-of-type(1) {
   margin: 0;
   padding: 0;
   width: 100%;
  align-self: flex-start;
}

.calendar-info:nth-of-type(2) {
   display:flex;
   width: 100%;
   align-self: flex-start;
   justify-content: center;
   
}

.wrapper-info:nth-of-type(1) {
   width: 100%;
   display: flex;
   flex-direction: row;
    align-content:center;
    justify-content:space-around;
   order: 2;

}
.wrapper-info:nth-of-type(2) {
   width: 100%;
   display: flex;
   flex-direction: row;
    align-content:center;
    justify-content:space-around;
   order: 1;

}


.wrapper-info:nth-of-type(3) {
   width: 100%;
   display: flex;
justify-content: center;
padding: 8px 0;
 
}
.wrapper-info:nth-of-type(3) a {

color: #BD2031;
border-color: #BD2031;
border-radius: 0;

}

.wrapper-info:nth-of-type(3) a:hover {

color: #fff;

}


.wrapper-info h4 {
   font-size: 1rem;
   text-align: center;
   padding: 0;
   margin: 0;
   }


.info-address{
  font-size:.8rem;
   text-align: center;

}

.calendar-info h4 {
   font-size: calc(12px + (16 - 12) * ((100vw - 415px) / (600 - 415)));

   text-align: center;
   padding: 0;
   margin: 0;
   }

.info-address {
  font-size: calc(10px + (14 - 10) * ((100vw - 415px) / (600 - 415)));
   text-align: center;

}


.calendar-input {
	
	display: flex;
	justify-content: space-around;

	width: 100%;
	}

.calendar-input a, .calendar-input a:visited {
	color: #BD2031;
	font-size: 1.1em;
	display: flex;
	height:25px;
	width:60%;
	border:2px solid #BD2031;
	text-decoration: none;
	padding:3px 10%;
	justify-content: space-around;
	align-content: center;
	
}
.calendar-input a:hover {
	color: red;
	border:2px solid red;
}
address br {
	display:none;
}

/* begin countdown timer-----------background-color: #002040;--------------------------*/



    #countdown {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin: 0;
   padding: 10px 0;
   font-family: 'Lato', sans-serif;
   color: #bcd3f6;
   border:1px solid #bcd3f6;
 }

 .countdown-header {
display: flex;
 font-size: calc(16px + (18 - 16) * ((100vw - 601px) / (799 - 601)));
margin-bottom: 8px;
 color: #bcd3f6;
 }

#countdown-top {

 display: flex;
   width: 100%;
   justify-content: space-around;

}

#countdown-date {
font-size: calc(14px + (21 - 14) * ((100vw - 601px) / (799 - 601)));
text-align: center;
font-family: 'Sarabun', sans-serif;

}
#countdown-date-till {
font-size: calc(10px + (12 - 10) * ((100vw - 300px) / (500 - 300)));
margin :5px 0;
}
 #countdown-middle {
   display: flex;
   width:70%;
   justify-content: center;
   margin: 0 auto;
   padding: 0;
 }
 #countdown-bottom {
   display: flex;
   width:70%;
   justify-content: center;
   margin: 0 auto;
   padding: 0;
   
 }

 #countdown-bottom-text {
   
   font-size: calc(12px + (16 - 12) * ((100vw - 601px) / (799 - 601)));
    text-align: center;
    width: 80%;
    margin: 0 auto;
    background-color: #bcd3f7;
    color:#003366;
    font-weight: 900;
 }
 
 #days, #hours, #minutes, #seconds {
   display:flex;
   margin: 0;
   padding: 0px 10%;
   font-size: calc(16px + (24 - 16) * ((100vw - 601px) / (799 - 601)));
   justify-content: center;
   width: 22%;
   border: 1px solid #bcd3f6;
   
 }
 .colon {
   display: flex;
   width: 4%;
   margin: 0;
   padding: 0;
   
   align-items: center;
   justify-content: center;
 }
 .timeTextSmall {
   display: flex;
   padding: 0 0 5px 0;
   font-size: calc(10px + (12 - 10) * ((100vw - 300px) / (500 - 300)));
   width: 22%;
   justify-content: center;
   align-self: flex-start;
   margin: 0;
 }
  
  .timeText {

   display:none;
  }


/* end countdown timer-------------------------------------*/