@charset "utf-8";
/*
FILE: CSS with media queries for 'index.html' only. 
BY: Frank Henderson, TDCJ Web Services
DATE: 01/04/17
UPDATED: 08/10/17
UPDATED: 12/28/2021 by Wendy Skains-McLeod for image slider
*/

/* hyperlinks for home content */
#content a:link, #content a:visited, #content a:focus, #content a:active {
	color: #333333;
	text-decoration: none;
}
#content a:hover {
	color: #333333;
	text-decoration: underline;
}

.smaller {
    font-size: 13.4px;
}

/* bullet list titles */
.home_titles {
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	color: #333333;
	font-weight: bold;
}

/*
=====================================================
BODY & CONTENT
=====================================================
*/

/* image slider *************************************/


#image_slider {	
/*	display: none;			/* appears at 1024px */ /* removed this to display on cellphones */
    display: block;
    margin-top:10px;
}


/* keystones ***************************************/

#keystones_container	{
	width: 189px;    /*was 230*/
	margin-right: auto;
	margin-left: auto;
	margin-top: 7px;
	margin-bottom: 10px;
}

.keystone_panel	{
	display: block;
	width: 189px;    /*was 230*/
	height: 50px;
	text-indent: -99999px;
	margin-top: 2px;
}

#keystone1	{
	background-image: url(/images/keystone1b.png);
}
#keystone1:hover{
	background-position: 100% -50px;
}

#keystone2	{
	background-image: url(/images/keystone2b.png);
}
#keystone2:hover{
	background-position: 100% -50px;
}

#keystone3	{
	background-image: url(/images/keystone3b.png);
}
#keystone3:hover{
	background-position: 100% -50px;
}

#keystone4	{
	background-image: url(/images/keystone4b.png);
}
#keystone4:hover{
	background-position: 100% -50px;
}

#keystone5	{
	background-image: url(/images/keystone5c.png);
}
#keystone5:hover{
	background-position: 100% -50px;
}


/* page content ***********************************/

.home_container, .home_container_title	{
	width: 312px;
	margin-right: auto;
	margin-left: auto;
}


/*
=====================================================
PROGRESSIVELY ENHANCED STYLES
=====================================================
*/

@media screen and (min-width: 480px) {

#keystones_container	{
	width: 380px;	/* 2px extra due to margins /////////////// width changed from 462 to 380 /////////////// */
	padding-bottom: 154px;    /* increased padding from 104px to 154px to accommodate keystone5 at bottom ///////////// */
}

#keystone1, #keystone2, #keystone3, #keystone4, #keystone5	{ /* added keystone5 here /////////////////*/
	float: left;
}

#keystone1, #keystone3	{
	margin-right:2px;
}
#keystone5 {
	margin-left: 95px;    /* removed "align-content: center;", added this ///////////////////////  */
}

}

@media screen and (min-width: 640px) {

#content	{
	width: 610px;
	margin-right: auto;
	margin-left: auto;
}

.home_outer_container	{
	display: table-cell;
}
.home_container_title	{
	display: table-column span-2;
}
.home_container {
	display: table-row;
}

}

@media screen and (min-width: 1024px) {

#image_slider {
	display: block;
	margin-top:10px;
}

#keystones_container	{
	width: 1005px;  /*was 993px*/
	padding-bottom: 52px;
}
#keystone1, #keystone2, #keystone3, #keystone4	{
	margin-right: 15px;  /*was 24px*/
}
    
#keystone5    {
    margin-left: 0px;  /*  remove margin assigned @ 480 /////////////////// */  
}

#content	{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}

.home_outer_container	{
	display: table-row;
}
.home_container_title {
	width: 150px;
	display: table-cell;
}
.home_container	{
	width: 310px;
	display: table-cell;
}

}