/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body, h1, h2, h3, h4, h5 {
    font-family: 'Open Sans';
}

p, li {
    font-size: 16px;
}

a {
    color: #1D7777;
    font-weight: 600;
}



/*.opening {
    font-size: 30px;
}*/

@media (min-width: 1025px) {
    .opening {
    font-size: 24px;
    
}
}

@media (max-width: 1024px) {
    .opening {
    font-size: 20px;
}
}

.row { margin: 0; padding: 0 }

.container {
    width: 98%;
}

/*Make Va Banner sit at very top*/
.top{
 padding: 5px 0;
 margin:-25px 0 0 0;
			
}

.top2{
 padding: 0;
 margin:-10px 0 0 0;
			
}


h1.welcome {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    
}



/* Youtube Video Embedding code */ /*Direct questions to Cole Evans*/

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.defaultText {
    font-size: 11px;
}

h1.search {
    color: #0065A4;
    font-size: inherit;
    margin-left: 2%;
    font-weight: 700;
}



/*****EXTERNAL and APP LINK ICONS**********************************************************EXTERNAL and APP LINK ICONS**********************************************EXTERNAL and APP LINK ICONS***********************/

/* Add Icon to external links */
a[href^="http://"]:not([href*="tstdesigns/"]):before, /*THIS NEEDS TO BE CHANGED BEFORE LAUNCH AND FOR STAGING TO TEST*/
a[href^="https://"]:not([href*="tstdesigns/"]):before,
a[href$='.asp']:not([href*="tstdesigns/"]):before, /*For some reason, .asp and .aspx need their own declaration of rules*/
a[href$='.aspx']:not([href*="tstdesigns/"]):before{
  content: url('../images/icons/global_sm.png');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Removes external link from in front of app links of pdf, word, excel, ppt ---- focuses on type of file instead*/
a[href$='.pdf']:not([href*="tstdesigns"])::before,
a[href$='.doc']:not([href*="tstdesigns"])::before,
a[href$='.docx']:not([href*="tstdesigns"])::before,
a[href$='.xls']:not([href*="tstdesigns"])::before,
a[href$='.xlsx']:not([href*="tstdesigns"])::before,
a[href$='.ppt']:not([href*="tstdesigns"])::before,
a[href$='.ppt']:not([href*="tstdesigns"])::before { 
  content: none;
}



/*Add PDF icon to any link that ends in .pdf*/
a[href$='.pdf']::after { 
  content: url('../images/icons/pdf.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}


/*Add Word icon to any link that ends in .doc, .docx*/
a[href$='.doc']::after,
a[href$='.docx']::after { 
  content: url('../images/icons/doc.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Add Excel icon to any link that ends in .xls, .xlsx*/
a[href$='.xls']::after,
a[href$='.xlsx']::after { 
  content: url('../images/icons/xls.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Add PPT icon to any link that ends in .ppt, .pptx*/
a[href$='.ppt']::after,
a[href$='.pptx']::after { 
  content: url('../images/icons/ppt.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}


/* Add Icon to email links */
a[href^=mailto]::before {
    content: url('../images/icons/mail_sm.png');
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    padding-right: 2px;
    padding-bottom: 5px;
    vertical-align:middle;
}

/* Add class to remove external link icon - currently used for footer and google directions link in VABOARD*/
.noext a[href^="http://"]:not([href*="tstdesigns"]):before, /*THIS NEEDS TO BE CHANGED BEFORE LAUNCH AND FOR STAGING TO TEST*/
.noext a[href^="https://"]:not([href*="tstdesigns"]):before{
    content: none;
}

/* Add class to remove external link icon from internal apps pages*/
.apps a[href$='.aspx']:before{ 

    content: none;
}




/* Add class to external links in menu. items need class="menuexit" added in the nav.htm include ONLY on text <li> that leave site NOT on images*/
.menuexit a[href^="http://"]:not([href*="tstdesigns"]):after, /*THIS NEEDS TO BE CHANGED BEFORE LAUNCH AND FOR STAGING TO TEST*/
.menuexit a[href^="https://"]:not([href*="tstdesigns"]):after {
  content: url('../images/icons/right-arrow15.png');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}



/*Formatting below is ONLY to be used in UL for large lists - need to add class to UL of "iconlist"* - Example: vaboard.org/links.htm ---- Need to double-check for hard-coded internal links*/

ul.iconlist a[href^="http://"]:not([href*="tstdesigns"]):before, /*THIS NEEDS TO BE CHANGED BEFORE LAUNCH AND FOR STAGING TO TEST*/
ul.iconlist a[href^="https://"]:not([href*="tstdesigns"]):before{
  content: url('../images/icons/global_sm.png'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /* This overrides the main external icon to allow for alignment with list items that do NOT have icons */
}

ul.iconlist a[href$='.pdf']:not(.owl-item)::after { /*This removes the PDF from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.pdf']:not(.owl-item)::before {
  content: url('../images/icons/pdfList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}

ul.iconlist a[href$='.doc']:not(.owl-item)::after,
ul.iconlist a[href$='.docx']:not(.owl-item)::after
{ /*This removes the doc from the end of a line ONLY in the UL with class "ext"*/
  content: none;
  
}

ul.iconlist a[href$='.doc']:not(.owl-item)::before,
 ul.iconlist a[href$='.docx']:not(.owl-item)::before
{
  content: url('../images/icons/docList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}



ul.iconlist a[href$='.xls']:not(.owl-item)::after,
ul.iconlist a[href$='.xlsx']:not(.owl-item)::after,
{ /*This removes the xls from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.xls']:not(.owl-item)::before {
  content: url('../images/icons/xlsList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}


ul.iconlist a[href$='.ppt']:not(.owl-item)::after,
ul.iconlist a[href$='.pptx']:not(.owl-item)::after,
{ /*This removes the ppt from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.ppt']:not(.owl-item)::before {
  content: url('../images/icons/pptList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}





ul.pList {
    margin-bottom: /*10px*/0px;
    margin-top: 0;
    line-height:30px;
}



/*FANCY NAV/Header*/

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  /*margin: 0 auto -225px;*/
  /* Pad bottom by footer height */
  /*padding: 0 0 225px;*/
}


/* Set the fixed height of the footer here */
#footer {
  /*height: 225px;*/
  background-color: #eeecec;
  margin-top:10px;
  padding-top:20px;
  padding-bottom:20px;
  color: #000;
  
}

    #footer h3 {
        background-color: rgb(107,201,202);
    padding: 3px;
    color: #000;
    border-bottom: 3px solid RGB(153, 204, 102);
    font-size: 20px;
    text-align:center;
}

 
        .contactlink a {
        background-color: rgb(107,201,202);
   font-weight: 500;
   border-bottom: 1px dotted;
    color: #000;
   
    font-size: 20px;
    text-align:center;
}


  

.scroll-top {
   position:fixed;
   bottom:0.5em;
   right:1%;
   z-index:1200;
   background: RGB(244, 238, 110);
   font-size:14px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#78A22F;
}






/*CAROUSEL*/

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 10px;



}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  position: absolute;
    left: 60%;
    top: 12%;
    width: 35%;
    height: 250px;
    background-color: #fff;
    opacity: 0.8;
    color: #000;
    font-size: 120%;
    padding: 10px;
    text-shadow: none;
    text-align: left;
  
}


.carousel-caption a, .carousel-caption a:visited{
 
    color: #0065A4;
    font-weight: 600;
  
  
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 325px;
  background-color:#bbb;
}



@media (max-width: 800px) {
         .carousel {
        width: 75%;
        margin-left: 15%;
    }
    .carousel .item {
  height: 450px;
  background-color:#bbb;
}
}

@media (min-width: 801px) and (max-width: 1023px) {
     .carousel {
        width: 65%;
        margin-left: 20%;
    }
    
    .carousel .item {
  height: 475px;
  background-color:#bbb;
}
}

@media (min-width: 1024px) and (max-width: 1099px) {
     .carousel {
        width: 90%;
        
    }
    
    .carousel .item {
  height: 290px;
  background-color:#bbb;
}
}

@media (min-width: 1100px) and (max-width: 1280px) {
     .carousel {
        width: 90%;
        
    }
    
    .carousel .item {
  height: 350px;
  background-color:#bbb;
}
}

@media (min-width: 1281px) {

     .carousel {
        width: 90%;
    }
    .carousel .item {
  height: 400px;
  background-color:#bbb;
}
}

@media (min-width: 1600px) {
    .carousel {
        margin-left: 10%;
        width: 75%;
    }
     .carousel .item {
  height: 385px;
  background-color:#bbb;
}
}

@media (min-width: 1900px) {
    .carousel {
        margin-left: 10%;
        width: 75%;
    }
     .carousel .item {
  height: 475px;
  background-color:#bbb;
}
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 60%;
}

.carousel-buttons {
  z-index: 1000;
  position: absolute;
  width: 100%;
  color:#000;
  bottom:0px;
  background-color: rgb(107,201,202);

}


    .carousel-buttons > div {
        padding: 1px;
        border: 1px solid #fff;
    }
.carousel-buttons a {
  color:#000;
  display:block;
  line-height:25px;
  font-weight:600;
}








/*end of carousel*/

.imgleft {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
}


.imgright {
    float: right;
    margin-bottom: 10px;
    margin-left: 10px;
}


@media (min-width: 1000px) and (max-width: 1279px){
    .socialmedia{
        margin-left:-3%;
    }

    .moveright {
        margin-left:1%;
    }

}


@media (min-width: 1280px) and (max-width: 1599px){
    .socialmedia{
        margin-left: auto;
    }

    .moveright {
        margin-left:2%;
    }

     .moveright2 {
        margin-left:3%;
    }


}

@media (min-width: 1600px) {
    

    .moveright {
        margin-left:-3%;
    }

     .moveright2 {
        margin-left:4%;
    }


}




.title {
    background-color: rgb(107,201,202);
    padding: 5px;
    color: #000;
    border-bottom: 5px solid RGB(153, 204, 102);
    font-size: 25px;
}

.title2 {
    background-color: RGB(153, 204, 102);
    padding: 5px;
    color: #000;
    border-bottom: 5px solid RGB(107,201,202);
}

@media (max-width: 900px) {
  li  .hidesearch {
        display: none;
    }
}


/*BREADCRUMB EDITS*/
/*change breadcrumb background color*/
.breadcrumb {
     background-color: #eeeeec;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -o-border-radius: 0;
}

/*change breadcrumb links color*/
.breadcrumb a {
     color: #666;
     border-radius: 5px;
     padding: 5px;
}

.breadcrumb a:hover {
     text-decoration: none;
     background-color: #9CD05F;
     color: #000;
}

/*change active color*/
.breadcrumb > .active {
     color: rgb(107,201,202);
     font-weight:600;


}

/*EDIT PANEL PRIMARY COLOR*/
.panel-primary > .panel-heading {
     background-color: #eeeeec;
     color: #000;
     font-weight: 700;
    
     
}

.panel-primary {
     border-color: rgb(107,201,202);
     font-size: 16px;
}


/**********ICON LIST FORMATTING*****************/

.iconlist {
    list-style-type:none; 
    line-height: 20px;
}






/****CUSTOM ICONS FOR ACCORDION --- copy script found on vaboard.org/policymaking.htm*/
.your-icon {
    position: relative;
    /*top: 1px;*/
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1px;
    float: left;
    margin-right: 5px;
    display: block; /* This is required */
}

.your-icon.arrowdown {
    background: url('../images/icons/arrow-down.png');
    background-size: cover;
}

.your-icon.arrowup {
    background: url('../images/icons/arrow-up.png');
    background-size: cover;
}

.your-icon.normal {
    width: 32px;
    height: 32px;
}

.your-icon.small {
    width: 20px;
    height: 20px;
}

.your-icon.medium {
    width: 64px;
    height: 64px;
}

.your-icon.large {
    width: 128px;
    height: 128px;
}



.searchimg {
    vertical-align:middle;
}

.contactlink {
}

/*EMAIL ON CONTACT*/



        @media (min-width:1025px) and (max-width:1280px) {
        .alert2 {
            margin-bottom: 30px;
            padding: 11px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    }

    @media (min-width:768px) and (max-width:1024px) {
        .alert2 {
            margin-bottom: 10px;
            padding: 5px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    }


    @media (min-width:1281px) {
    .alert2 {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #000;
    background-color: rgba(106, 201, 202, 1);
    font-weight: 700;
    border: 2px solid #78A22F;

}

.nav-tabs > li > a {
    border: 2px solid rgba(106, 201, 202, 1);
    background-color: rgba(148, 149, 153, 1);
    color: #fff;
}

.nav-tabs > li > a:hover {
    border: 2px solid rgba(106, 201, 202, 1);
    background-color: rgba(148, 149, 153, 1);
    color: #000;
}