body{background:#FFFFFF;}

#flex-header{display:-webkit-flex; display:flex; flex-direction:row; justify-content:center; background-color:#dddddd;}
#flex-footer{display:-webkit-flex; display:flex; flex-direction:row; justify-content:center; background-color:#dddddd; padding:2% 1%; width:98%;}

#wrapper{border:none; margin:5px auto 0 auto; padding:0%; width:90%;} 



.outer-flexbox{
	display:-webkit-flex;
	display:flex;
	flex-direction:row;
	-webkit-justify-content:center;
	justify-content:center;
	padding:2%;
	}

.outer-box{
	border:none;
	margin:2% 0% 0% 2%;
	width:40%;
	display:inline-block;
	vertical-align:top;
	}
	
.inner-box{
	background:#ffffff;
	border:1px solid #999999;
	padding:1%;
	margin:0.5%;
	width:46%;
	display:inline-block;
	vertical-align:top;
	}

.t1{color:DarkRed; font-size:150%; text-align:center;}
.t3{font-family:arial,verdana,sans-serif; color:DarkRed; font-size:medium; font-weight:bold;}	
.t4{text-align:center; color:OrangeRed; font-size:180%;}
.t6{font-family:verdana,arial,sans-serif; font-size:medium; font-weight:bold;text-align:center; color:DarkRed;}							/* Charlie Title */
.t7{text-align:center; color:GhostWhite; font-size: 180%; padding:3%;}																	/* Eclectic Photos Heading */
.t8{color:#ffffff; font-size:130%; font-weight:bold; text-align:center;}
.t9{font-family:arial,verdana,sans-serif; color:#000000; font-size:110%; text-align:left; padding:0% 4%;}
.box3{background-color: SlateGray; border-radius:10px; width:auto; padding:0% 4% 3% 4%; display:inline-block;}							/* photos style box */
.box4{background:#ffffff;padding:1%;margin:2%; width:25%;display:none; vertical-align:top; border:1px solid #999999}					/* mobile size photos style box */
.box5{border:5px solid OrangeRed; background-color: darkblue; padding:3%; margin:1%; display:inline-block;}								/* Eclectic Electric style */
.box6{background-color: darkblue;width:50%; padding:0% 5%; margin:2% 12% 2% 2%; display:inline-block;}									/* Go Gators style */
.box7{width:20%; float:right;}
.box8{width:auto;}
.box9{display:-webkit-flex; display:flex; flex-direction:row; justify-content:center; background-color:#dddddd;}						/* video box */
.a1{border: 2px groove LightGrey; border-radius:6px; color:DarkSlateGray; background-color:LightGrey;									/* photo links */
      padding: 5px; text-decoration: none; margin: 3px; float:left;}
.a3{border:none; background-color:LightGrey; padding:2.5% 2%; display:inline-block; vertical-align:top; margin-left:5%;					/* Family portal link text and style*/
      font-family:arial,verdana,sans-serif; color:DarkRed; font-size:medium; font-weight:bold; text-decoration:none;}

.box3 > a:hover, a:active {color:black; background-color: gold;}
.box5 > a:hover, a:active {color:black; background-color: gold;}


div.img {
    margin: 18px;
    border: 3px solid #CCCCCC;
    display:inline-block;
    width:45%;
}
div.img img {
    width: 100%;
    height: auto;
}
div.img:hover {
    border: 3px solid #FF0000;
}


.img1 {
	background:#856451;
	border: 3px solid #856451;
    width:95%;
    display:inline-block;

}
.img1 img {
    width: 100%;
    height: auto;
    margin:auto;
    
}
.img1:hover {
    border: 3px solid gold;
}

ul{padding-left:5%;}


/* desktop config */
@media only screen and (min-device-width: 1600px) {
#wrapper{width:80%; min-width:1280px;max-width:1600px}
.image{max-width:20%;float:left;padding:0px 2% 1% 0%;}
}

/* tablet config */
@media only screen and (min-width: 800px) and (max-width: 1279px){
#wrapper{width:80%; min-width:700px;max-width:1279px}
.image{max-width:30%;float:left;padding:0px 2% 1% 0%;}
}

@media only screen and (max-width: 1280px){}
.t5{font-size:200%;}

@media only screen and (max-width: 1024px){
.t5{font-size:150%;}
}

/* mobile config */
@media only screen and (min-width: 300px) and (max-width: 799px){
#wrapper{border:none; margin:0%; padding:0%; min-width:300px; width:100%}
.outer-box{width:92%;padding:2%;}
.image{padding:0% 2% 2% 0%;max-width:100px;}
.t5{font-size:150%;}
}
@media only screen and (max-width: 700px){
.box1{border:none; width:100%;}
.t6{display:none;}
}

@media only screen and (max-width: 399px){
.box6{display:none;}
}