﻿:root{
	--resource-green: #71af43;
	--osha-blue: #00567d;
	--osha-blue-hover: #002131;
	--resource-red: #a5233c;
	--resource-red-hover: #6b081c;
	--resource-purple: #8e3b72;
	--resource-purple-hover: #5b2649;
	--resource-dark-green: #065541;
	--resource-orange: #de9150;
	--resource-orange-hover: #a95c1c;
	--light-grey: #eee;
	--med-grey: #666;
}

.resource-logo{
	text-align:center;
	margin-bottom: 1em;
}

.resource-logo img{
	max-width: 40%;
}

#tag_select{
	min-height: 44px;
}

#blog_container {
	margin: 20px 0;
}
        #filters_nav {
            display: none;
        }

        .blog_category, .blog_tag {            
            margin: 30px 10px 0 0; 
            font-size: 18px;
		    line-height: 1.36;
		    display: none;
        }

            .blog_category > span,
            .blog_tag > span { 
                padding: 12px;           
	            border-radius: 5px;
            }
            
            .blog_category > span { 
                background-color: var(--osha-blue);               
	            color: #ffffff;
            }

			.blog_tag > span { 
                background-color: var(--dcbs-light); 
            }

            .blog_tag span:not(:last-child), 
            .blog_category span:not(:last-child) {
                margin-right: 5px
            }


        .blog_list--wrapper {

        }
        
                .blog_grid--item {
                    margin-bottom: 30px;
                }
                
                .blog_list--item:not(:last-child) {
				    border-bottom: 1px dotted var(--light-grey);
				    margin-bottom: 15px;
				    padding-bottom: 20px;
				}
                
                .blog_item--item_details {
                    margin: 20px 0;
                }

                .blog_item--item_details h3.blog_item--item_title {
                    margin: 0 0 5px;
                    font-size: 20px;
                }

                    h3.blog_item--item_title a {
                        margin-bottom: 0;
                    }

	                p.blog_item--item_date {
	                    margin-bottom: 10px;
	                }
	
	                p.blog_item--item_excerpt {
	                    margin-bottom: 0;
	                }
                
                .blog_item--item_categories,
                .blog_item--item_tags  {	
					margin-bottom: 30px;
				}

                
                .blog_item--item_category,
                .blog_item--item_tag {	
					padding: 5px;	
					border-radius: 5px;
					margin-right: 5px;
					white-space: nowrap;
					line-height: 2;
				}   
				             
                .blog_item--item_category {	
					background-color: var(--resource-green);	
					color: white !important;
				}							
				.short-takes .blog_item--item_category{
					background-color: var(--osha-blue);
				}
				.ask-oregon-osha .blog_item--item_category{
					background-color: var(--resource-red);
				}
				.incident-alert .blog_item--item_category{
					background-color: var(--resource-orange);
				}
				.datapoints .blog_item--item_category{
					background-color: var(--resource-purple);
				}
				
				.feature .blog_item--item_title a{
					color: var(--resource-green);
				}
				.short-takes .blog_item--item_title a{
					color: var(--osha-blue);
				}
				.ask-oregon-osha .blog_item--item_title a{
					color: var(--resource-red);
				}
				.incident-alert .blog_item--item_title a{
					color: var(--resource-orange);
				}
				.datapoints .blog_item--item_title a{
					color: var(--resource-purple);
				}
				
				.feature .blog_item--item_title a:hover{
					color: var(--resource-dark-green);
				}
				.short-takes .blog_item--item_title a:hover{
					color: var(--osha-blue-hover);;
				}
				.ask-oregon-osha .blog_item--item_title a:hover{
					color: var(--resource-red-hover);
				}
				.incident-alert .blog_item--item_title a:hover{
					color: var(--resource-orange-hover);
				}
				.datapoints .blog_item--item_title a:hover{
					color: var(--resource-purple-hover);
				}
				
                .blog_item--item_tag {	
					background-color: var(--light-grey);
					color: #333 !important;	
				}
				
                .blog_item--item_category:hover {	
					background: var(--med-grey);
					text-decoration: none;
				}

				
                .blog_item--item_tag:hover {	
					background: var(--med-grey);
					text-decoration: none;
					color: white !important;
				}

                                
                .blog_grid--item_image {				    
                	width: 100%;
				    height: 300px;
				    position: relative;
				    overflow: hidden;
				}
				
				.blog_grid--item_image img {
				    position: absolute;
				    margin: auto;
				    left: -677px;
				    right: -677px;
				    top: -300px;
				    bottom: -300px;
				    max-height: 400px; /* allows images to fill the space */
				}
				
				@media (min-width: 768px) {                
	                .blog_grid--item_image {
					    min-width: 440px;
					    height: 250px;
					}
					
					.blog_grid--item_image img {
					    left: -440px;
					    right: -440px;
					    top: -250px;
					    bottom: -250px;
					    max-height: 250px;
					}
				}
				
				@media (min-width: 992px) {                
	                .blog_grid--item_image {
					    min-width: 616px;
					    height: 250px;
					}
					
					.blog_grid--item_image img {
					    left: -440px;
					    right: -440px;
					    top: -250px;
					    bottom: -250px;
					    min-width: 616px;
					    max-width: 650px;
					    min-height: 250px;
					    max-height: 390px;

					}
				}

				
				@media (min-width: 1200px) {                
	                .blog_grid--item_image {
					    min-width: 345px;
					    height: 200px;
					}
					
					.blog_grid--item_image img {
					    left: -345px;
					    right: -345px;
					    top: -200px;
					    bottom: -200px;
					    min-width: 360px;
					    max-width: 400px;
					    min-height: 200px;
					    max-height: 250px;
					}
				}
				
    .blog_nav h2.blog_nav--section_title {
	    margin: 20px 0 10px;
        font-size: 24px;
    }
    
    span.activeIcon {
		display: none;
	}

    ul.blog_nav--list {
        padding: 0;
        margin: 0;
    }
            
	.blog_nav--item {
	  display: block;
	  overflow: auto;
	  transition: ease 0.2s border;
	  /* margin-bottom: 0.25em; */
	  clear: both;
	  font-size: 16px;
	  border-bottom: 1px solid #00639a;
	}

	.blog_nav--item:last-child {
        border-bottom: 0;
	}
	
	.blog_nav--link {
	  display: block;
	  overflow: auto;
	  color: var(--osha-blue);
	}
	
	.blog_nav--item:hover,
	.blog_nav--item.active {
	  background-color: #e1f5ff;
	}
		
	.active .blog_nav--title,
	.blog_nav--item:hover .blog_nav--title {
    	padding-left: 20px;
	}
		
	.active .activeIcon,
	.blog_nav--item:hover .activeIcon {
    	display: inline-block;
    	padding-right: 10px;
	}
	
	.blog_nav--link:hover {
	  color: var(--med-grey);
	}
	
	/* .blog_nav--link:hover .blog_nav--icon,
	.blog_nav--link:focus .blog_nav--icon,
	.blog_nav--link:active .blog_nav--icon {
	  opacity: 1;
	  color: var(--dcbs-primary);
	} */
	
	.blog_nav--title {
	  padding: 6px 10px;
	  float: left;
	  transition: ease 0.2s padding;
	}