/*
https://hackerthemes.com/bootstrap-cheatsheet/#card-group
http://www.debmark.com/colors.htm
*/

body {
    background: #000000; /*#781215; burgundy*/
    text-align: center;
}

.body_White
{
    background: #FFFFFF;
    text-align: center;
}

.card
{
    background: #781215;
	width: 100%;

}



.card_black
{
	background: #000000;
	width: 100%;
}

.card_white
{
	background: #ffffff;
	width: 100%;
}

.card_LightGray
{
	background: #DCDCDC;
	width: 100%;
}

.card_DarkGray
{
	background: #333339;
	width: 100%;
}

.card_DarkGreen
{
	background: #194F19;
	width: 100%;
}

.card_DarkBlue
{
	background: #1443D5;
	width: 100%;
}

.card_DarkOrange
{
	background: #A74F01;
	width: 100%;
}




.cardLogo
{
    background: #000000;
}

.cardWithPadding
{
    background: #661618;
	padding-bottom: 2px;
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 10px;
	
}

.cardWithPadding_DarkGray
{
    background: #333339;
	padding-bottom: 2px;
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 10px;
	
}

.extraPadding
{
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 40px;

}

.cardWhiteWithPadding
{
    background: #dddddd;
	padding-bottom: 2px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}

.cardGoldWithPadding
{
    background: #f2e5ba;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

.cardHighlight {
	color: #ffcf68;
    /*color: yellow;*/
    font-style: italic;
}

.cardHighlight_Burgundy
{
	color: #781215;
    font-style: italic;
}



hr {
    height: 2px;
    border: 0;
	background-color: #84775d;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

.hr_wide {
    height: 20px;
	background: #781215;
}

.hr_wide_black {
    height: 20px;
	background: #000000;
}

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:center;
    /* inline-block space fix */
    margin-right:-4px;
}

.cardBackgroundColor2 {
    background: #535050;
    width: 260px;
}

.h2Text {
    color: #ffffff;
}

h4 {
    text-align: center;
    font-family: Brush Script MT,cursive;
}

.h4Text
{
    text-align: center;
    color: #f2e5ba;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 200;
    font-size: 15px;
}

.cover {
    max-height: 50%;
}


.card-img-top{
    margin:auto;
    height: 150px;
    max-width: 190px;
}


.container_skitter{
    width: 100%!important;
    height: 100%!important;
}

.box_skitter {
    width:648px;
    height:486px;
}


.box_skitter img {      width: 100% ; }


.card {
    width: 100%;
}

/*
a:link, a:visited, a:active {
	color: #ffcf68;
}
*/


.changeLinks a:link
{	
	color: green;
}

.changeLinks a:visited
{	
	color: green;
}


.cardText {
    color: #f2e5ba;
    text-align: center;
}

.cardText_Black {
    color: #000000;
    text-align: center;
}

.card-title-white {
    color: #FFFFFF;
    text-align: center;
}




.cardTextBlack {
    color: #000000;
    text-align: left;
    font-weight: 600;
}

.nameheader {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    background: #781215;
    margin-bottom: 2px;
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 12px;
}

.nameheader2 {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    background: #781215;
    margin-bottom: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
}


#banner-bkg {
    width: 100%;
    max-width: 100%;
}

img {
    display: inline-block;
    vertical-align: middle;
}


.thumb_image
{
    width:25%;
    max-width:50%;
    -moz-box-shadow:    2px 2px 3px #777;
    -webkit-box-shadow: 2px 2px 3px #777;
    box-shadow:         2px 2px 3px #777;
    margin: 0px

}


/* line color for menu */
li {
    /*float: left;*/
    border-right: 1px solid #bbb;
}


/* line color for menu */
.noline {
    float: left;
    border-right: 0px;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
}

.dropdown-menu
{
    background-color: #dddddd;
}

.side-item
{

}

.image_circle
{
    width: 25%;
    border-radius: 50%;
    display: block;

}

/* circular image */
#image_circular img
{
    border-radius: 30%;
    width: 25%;
}

#image_circular {
    display: inline;
}


/* slideshow part */
* {box-sizing:border-box}

.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}


/* The dots/bullets/indicators */
.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
}

#scroll {
    width: 100%;
    height: 500px;
    margin: 100px auto;
    border: 2px solid #000;
    overflow: auto;
    white-space: nowrap;
    box-shadow: 0 0 10px #000;
}


.scrollimg {
    height: 435px;
    margin: 20px 10px 0 10px;
}

.TextWrap
     {
         float: right;
         margin: 10px;
     }
	 
table, th, td
{
	/*border: 1px solid #f2f2f2;	*/
	border: 1px solid #000000;
}

#table_noborder
{
	border: 0px;	
}

table th
{
	background-color: #717171; /*#5f4546; */
}

.wrapper2 {
  max-width: 800px;
  float: none;
  margin: 0 auto;
  height: 150px;
}

.col-centerText {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:center;
    /* inline-block space fix */
    margin-right:-4px;
	padding: 20px;
	padding-left: 20px;
}

.slideText
{
	height: 300px;
	width: 1000px;
	text-align: center;
}


.latestNews1
{
	background: #781215;
	height: 100%;
	width: 1000px;
	text-align: left;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 10px;
}
.latestNews2
{
	background: #232430;
	height: 100%;
	width: 1000px;
	text-align: left;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 10px;
}

.latestNews3
{
	background: #550026;
	height: 100%;
	width: 1000px;
	text-align: left;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 10px;
	vertical-align: middle;
}

.latestNews4
{
	background: #383838;
	height: 100%;
	width: 1000px;
	text-align: left;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 10px;
	vertical-align: middle;
}


.blink_text 
{

    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;

     color: #ffcf68;
}

@-moz-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@-webkit-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }
	 

.pdf  {text-align: center; display: inline-block}
.pdf img{display:block; border: none;text-decoration: underline}
.pdf:before{content:'Download:'}

/*
Running out of time is never fun.  These are items that would be great to figure out this year or next time around.
1) The carousel icons could be positioned closer to the edges to we can fit more text content without overlapping the arrows
2) We really need to figure out how to create a footer again.  Duplicating the code is insane, but I am out of time here
3) This was more of a pain than anything else.  There were times when I had a table on one page and a table in another page.  What if I wanted
to make one table blue and one red as an example.  The css as it currently is coded will change both.  How can I create another tag like .table2 and use it.  
This same issue would apply for the links.  I wanted to change link colors and the link colors in the navigation changes as well which was not the desired outcome.
4) Put the latest news in it's own file and reference it from the main page.  This will reduce some of the clutter in index. 

Stuff to do soon



2018: What a great year.  We revamped the website. The kids put in a lot of work.  Great job.  
*/